Jahr: 2014

Kategorien
Code Webentwicklung

Do-It-Yourself oder intelligente Verzahnung – Wieviel Eigenleistung steckt in einem Software-Projekt?

Mauer - Stein auf Stein
Stein auf Stein – So ähnlich baut ein modernes Web-Projekt auf bestehenden Bibliotheken auf – oder?

Hintergrundinformation: Ich arbeite aktuell in der Firma an einem größeren Projekt, welches unter anderem die Entwicklung einer komplett JS-basierten Oberfläche zur Konfiguration und Abfrage von Maschinen und der Erstellung eines Angebots für Kunden enthält. Das Projekt läuft seit 8 (“initial commit”: 22. Juli)  Monaten und es arbeiten 2, stellenweise 3 Entwickler daran.

Ich habe mir mal den Spaß gemacht, nachzuschauen, wie viel Code da von unserer Firma drinsteckt:

Die Gesamtsumme aller “per Hand” bearbeiteten Daten beträgt knapp 600KB. Der Rest des Projekts setzt sich zusammen aus den benutzten Bibliotheken: cookie.js, Ember.js, Font Awesome, Handlebars, Holder.js, html5shiv, jQuery, jQuery Tools, jQuery UI, Normalize.css, spin.js, Underscore.js, Grunt

Insgesamt werden beim ersten Laden des Projekts im Browser 580 KB abgerufen, dazu kommen noch ca. 62,7 KB aus (bisher unkomprimierten) Dateien, die erst später Nachgeladen werden (können). Das schließt allerdings keine Abfrage von Daten, sondern nur den Payload des Projekts ein. HTML, JS, CSS/LESS, Bilder.

Ich schwanke meinungstechnisch noch zwischen: “Cool wie effizient” und “oh, das ist aber wenig” (Das Quantität keine Qualitätsaussage ist, ist mir dabei durchaus bewusst). Zum Glück werden wir nicht nach KB bezahlt. (Ausnahmen bestätigen die Regel aber meistens ist das dann eher eine Bezahlung pro gespartem KB)

Wie ist das bei euch? Wie viele Libraries haben eure großen Projekte? Ist das Verhältnis von eigenem vs. fremdem Code bei euch auch so ähnlich oder entwickelt ihr alles “from Scratch”? Sieht das bei “Backend”-Projekten ähnlich aus?

Bild: CC0 von Martin Wessely via Unsplash.com

Kategorien
Webentwicklung

Chrome übernimmt schlechte Table-Row-Stylings vom Internet Explorer

Der Google Chrome nimmt das Attribut “display: table-row” übrigens extrem ernst und liefert eine 1A verbuggte Interpretation (erste Box): Der Hintergrund des umgebenden DIV mit der Klasse “row1” wird in jedem untergeordneten DIV von neuem wiederholt. Das gilt nicht nur für den hier demonstrierten Background-Gradient, sondern auch für Hintergrundbilder. Im Firefox lässt sich das Phänomen nicht beobachten.

Die Lösung ist “einfach” und traditionell bewährt: Anstatt display: table-row; und display: table-cell; nimmt man das halbwegs ausgereifte display: inline-block; für die inneren Elemente und arbeitet wieder mal mit festen Breiten.

Schade.

HTML:

<div class=row1> 
  <div class=cell>1</div>
  <div class=cell>2</div>
  <div class=cell>3</div>
  <div class=cell>4</div>
</div>
<hr>
<div class=row2> 
  <div class=cell>1</div>
  <div class=cell>2</div>
  <div class=cell>3</div>
  <div class=cell>4</div>
</div>

CSS:

.row1 {
  display: table-row;
  background-color: rgb(241,218,54); /* Old browsers */
  background-image: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0,rgba(254,252,234,1)), color-stop(100%,rgba(241,218,54,1))); /* Chrome,Safari4+ */
  background-image: -webkit-radial-gradient(center, ellipse cover, rgba(254,252,234,1) 0,rgba(241,218,54,1) 100%); /* Chrome10+,Safari5.1+ */
  background-image: -o-radial-gradient(center, ellipse cover, rgba(254,252,234,1) 0,rgba(241,218,54,1) 100%); /* Opera 12+ */
  background-image: -ms-radial-gradient(center, ellipse cover, rgba(254,252,234,1) 0,rgba(241,218,54,1) 100%); /* IE10+ */
  background-image: -moz-radial-gradient(center, ellipse cover, rgba(254,252,234,1) 0, rgba(241,218,54,1) 100%); /* FF3.6+ */
  background-image: radial-gradient(ellipse at center, rgba(254,252,234,1) 0,rgba(241,218,54,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.row1 .cell {
  display: table-cell;
  padding: 150px;
}

.row2 {
  display: block;
  background-color: rgb(241,218,54); /* Old browsers */
  background-image: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0,rgba(254,252,234,1)), color-stop(100%,rgba(241,218,54,1))); /* Chrome,Safari4+ */
  background-image: -webkit-radial-gradient(center, ellipse cover, rgba(254,252,234,1) 0,rgba(241,218,54,1) 100%); /* Chrome10+,Safari5.1+ */
  background-image: -o-radial-gradient(center, ellipse cover, rgba(254,252,234,1) 0,rgba(241,218,54,1) 100%); /* Opera 12+ */
  background-image: -ms-radial-gradient(center, ellipse cover, rgba(254,252,234,1) 0,rgba(241,218,54,1) 100%); /* IE10+ */
  background-image: -moz-radial-gradient(center, ellipse cover, rgba(254,252,234,1) 0, rgba(241,218,54,1) 100%); /* FF3.6+ */
  background-image: radial-gradient(ellipse at center, rgba(254,252,234,1) 0,rgba(241,218,54,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.row2 .cell {
  display: inline-block;
  padding: 150px;
}

Wer sich das ganze nicht zusammenkopieren will, kann auch einfach bei jsFiddle schauen, da hab ich das mal vorbereitet.

Kategorien
Allgemein Werkzeuge

“Make Manager”: Massenbearbeitung für Redmine-Gruppen

Dieses Bookmarklet löst das Problem, wenn man eine neue Gruppe in Redmine einlädt und diese zu allen Projekten hinzufügen möchte.

javascript:$('#membership_project_id').val( $('#membership_project_id option:not(:disabled):last').val() ) && $('.splitcontentright [name="membership[role_ids][]"]:first').prop( 'checked', true ).change() &&  $('#tab-content-memberships .splitcontentright input[type=submit]').click();void 0

Das ganze als Bookmarklet anlegen und unter https://[redmine-url]/groups/[gruppenID]/edit?tab=memberships (Gruppe bearbeiten, in Tab “Projekte”) solange anklicken, bis eine Fehlermeldung kommt ;). Ggf. muss man bei dem “membership_role_ids_” noch den Selector anpassen, wenn man nicht die die oberste Rolle nehmen will.

Kategorien
Linklove Werkzeuge

Developer Documentation – All in one place: devdocs.io

devdocs-screenshot

devdocs.io – Das ein extrem nützliches Tool von Thibaut Courouble für Entwickler. Der Screenshot zeigt meine aktuelle Einstellung, die auch mein aktuelles Toolset in der Firma recht gut darstellt.

Dieses Tool kann man jedem nur ans Herz legen und ich merke selbst, dass ich oft genug den umständlichen Weg über z.B. api.jquery.com nehme. Hier gilt der Hinweis: Unter z.B. Windows 7 kann man im Chrome mit “Menü → Tools → App-Verknüpfung erstellen” eine Verknüpfung direkt in die Startleiste legen. Alternativ gibt es auch die Verknüpfung als App im Chrome Appstore.

Links

Kategorien
Allgemein

such commit