Coole Datenstrukturen und Algorithmen: BK-Bäume

Heute möchte ich euch eine einfache Datenstruktur vorstellen, die für sich genommen sehr simple ist, die aber zur Lösung unterschiedlicher Probleme herangezogen werden kann: Burkhard-Keller Bäume.

Ein BK-Baum ist eine Datenstruktur, die es erlaubt Daten, die über eine Metrik verglichen werden können  (also Teil eines metrischen Raumes sind)  zu durchsuchen. BK-Bäume können eingesetzt werden, wenn zu einem Suchelement alle diesem ähnlichen Daten gefunden werden sollen.

Weiterlesen


Image lazy loading – Bilder laden wenn sie gebraucht werden

Warum

Eine klassische Newsseite besitzt eine Vielzahl von Bildern und hat – so es denn auch was zu berichten gibt – einen größeren Umfang. Aktuelle Browser laden beim Aufrufen eines HTML-Dokumentes alle Bilder runter die enthalten sind. Am PC stört das wenige und ist seltener ein Nachteil, bei mobilen Websites bedeutet es aber das eine Menge Daten geladen werden, von denen ich unter Umständen nichts habe, da ich nur die neusten 3 Einträge überfliege und dann weiter surfe. Die restlichen Bilder bekomme ich, aufgrund des kleinen Viewports, nicht mal im Augenwinkel mit. Neben den verbrennen von mobilen Datenvolumen blockiert das Laden von Bildern natürlich in dem Moment Bandbreite, die ich für andere Resourcen besser brauchen kann.

Weiterlesen


JavaScript debounce was ist das?

Falls du schon öfter JavaScript Code geschrieben hast und noch nie etwas
von „debounce“ gehört hast stehen dir wohl ein paar Refactoring-Sessions bevor.

In JavaScript gibt es einige Events die vom Browser sehr häufig
getriggert werden können, dazu gehört z.B. das resize Event auf
dem Window Objekt. Während du mit der Maus ein Fenster
verkleinerst wird es unzählige male aufgerufen.
Weiterlesen


HipHop Virtual Machine

Heute möchte ich euch die HHVM(HipHop Virtual Machine) vorstellen.

Die von Facebook entwickelte HHVM überträgt PHP-Code in Bytecode, welcher dynamisch zur Laufzeit in x64-Maschinensprache durch einen JIT-Compiler übersetzt wird. Dies ist ein vergleichbarer Ansatz wie die virtuellen Maschinen in Java oder C#.

Weiterlesen


Hack: Eine eigene Version von PHP

hack

Am 20.03.2014 veröffentlichte Facebook seine PHP Alternative namens Hack (hacklang.org). Diese Sprache soll vollständig kompatibel zu PHP sein und zahlreiche Features mitbringen, die von PHP-Entwicklern häufig vermisst werden. In diesem Blogpost werde ich erst kurz auf die Geschichte hinter Hack eingehen und dann die Features der Programmiersprache kurz beschreiben.

Weiterlesen



Physik und Netzwerkperformance

So wie unsere digitalen Endgeräte, werden auch die Geschwindigkeiten mit denen Daten den Besitzer wechseln immer gößer. Auch wenn die Kabel zur Übermittlung der Daten immer mehr in den Hintergrund treten, ist es dennoch wichtig, sich über ein paar Grundlegende Probleme, die sich bei den höheren Transferraten ergeben, im Klaren zu sein. Weiterlesen


CSS pseudo-Klassen :before/:after und Einsatz von FontFace-Kits

Webseiten skalierbar, im Sinne von zoombar,  zu gestalten scheitert gerne mal bei Icons und Grafiken. Gerade Icons denen ein Textlink nachgestellt ist, sehen bei grösserer Schriftansich häufig schäbig aus. Auch blähen diese Icons unsere Spritedateien auf und sind auch nicht so ohne weiteres einzufärben. SVG scheint bei größeren Grafiken und vor allem bei Infografiken die richtige Wahl zu sein, wenn da nicht wieder unsere geliebte Browserkompatibilität wäre.

Was nun? Wir wollen Icons vor Textlinks haben, die sich einfärben lassen und die auch bei Zoomänderungen noch gut aussehen.

Einen Möglichkeit besteht im Einsatz von @font-face Kits und der Pseudo-Klasse :before. Auch ein Blick in die Unicode-Tabelle (z.B. hier)  kann schon das gewünschte Icon bringen.
Sollte die Unicode-Tabelle keine Lösung bringen, kann man auf eine @font-face Kit zurückgreifen und diese Schrift mit @font-face einbinden (gute Kits kriegt man bei fontsquirrel.com). Mit dem @font-face Kit werden die gesamten Schriften in den wichtigsten Formaten geliefert und eine CSS-Datei zeigt die Einbindung.

Beispiel  (fontsquirrel – modern pictograms)

@font-face {
    font-family: 'ModernPictogramsNormal';
    src: url('modernpics-webfont.eot');
    src: url('modernpics-webfont.eot?#iefix') format('embedded-opentype'),
         url('modernpics-webfont.woff') format('woff'),
         url('modernpics-webfont.ttf') format('truetype'),
         url('modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

Dann braucht man eigentlich nur noch einen normalen button-Tag und innerhalb ein inline-Element (span) und schon kann man einen Upload-Button mit einem Icon versehen.

.button {
	border: 1px solid #cccccc;
	background: #dddddd;
	padding: 5px 20px;
	color: #0044ff;
	text-shadow: 1px 1px 0 #FFF;
	cursor: pointer;
}

.btn:before {
	font: 18px/0px 'ModernPictogramsNormal', Arial, sans-serif;	
}

.Upload:before {
	content: 'A ';
}

.Download:before {
	content: 'D ';
}

.Reload:before {
	content: 'R ';
}

.button:hover {
	color: #E50000;
}

<button class="button"><span class="btn Upload">FotoUpload</span>
<button class="button"><span class="btn Download">Download</span>
<button class="button"><span class="btn Reload">Aktualisieren</span>

Und schon hat man die Button mit dem gewünschten Icon-Effekt. Der geschickte Einsatz des data-Attributs kann dann auch noch CSS-Zeilen bei der Content-Deklaration bringen.


Dreiecke mit CSS

Dreiecke sind ein super Gestaltungsmittel. In Listen und Überschriften werden sie gerne von der Grafik verbaut, um Struktur und Gliederung zu vermitteln. Doch wie verbaut das Frontend diese Dreiecke? Eine Möglichkeit wäre, eine Grafik abzulegen und das Dreieck als Hintergrund einzubinden. Doch was sagt uns die erste der 14 Regeln zu Einhaltung von High Performance Websites? Richtig, Vermeide HTTP Requests. Warum eine Grafik vom Server anfordern, wenn ich sie auch mittels CSS gestalten kann. Der benötigte Code scheint zunächst fremdartig, beim zweiten Blick aber absolut einleuchtend und simpel:

.dreieck {
height: 0;
width: 0;
border-color: transparent transparent #CCC transparent;
border-style: solid;
border-width: 5px
/* zzgl. Positionierung */
}

Durch klugen Einsatz des Box-Modells ist nur der untere Rahmen farbig (grau, #CCC). Alle anderen sind transparent. Da die Box außerdem keinen Content hat, ist nur der Rahmen sichtbar, was somit den Dreieck-Effekt erzeugt. Das kann im Browser dann wie folgt aussehen:

Die Browserunterstützung ist sehr gut. Nur IE6 versteht die Angabe transparent nicht. Wer diesen auch noch unterstützen möchte muss mit den border-colors spielen und Farben des Hintergrunds verwenden um Transparenz vorzutäuschen.

Viel Spaß beim Anwenden!