Bessere Semantik: Eigene Tags nutzen mit HTML5 Custom Elements

Semantik hat mir bei HTML schon immer gefallen,
<div>-Suppen vermeide ich wann immer möglich und schöpfe gerne die Markup-Möglichkeiten aus. Dementsprechend hab ich mich auch größtenteils über die neuen Elemente von HTML5 gefreut. Noch im Fluss, aber schon weit gediegen, sind die Custom Elements der Web Components – also die Nutzung von eigens definierten Tags, ähnlich wie man es von XML-Dokumenten kennt. Eine Ausrede à la „es gab kein passendes Tag“ ist damit also passé.
Bessere Semantik: Eigene Tags nutzen mit HTML5 Custom Elements weiterlesen

HTML5 template-Tag

Template-Technologien für’s Backend gibt es zuhauf (Smarty, Template-Toolkit,…), aber seit dem im Frontend immer mehr dynamisch an Code erstellt wird hat sich auch dort die Notwendigkeit für Template-Techniken ergeben. Da die Frontend-Script-Sprache Nummer 1 nun mal JavaScript ist lag es nahe, dass auch die Templates in JavaScript verwaltet werden, so entstanden beispielsweise Template-Systeme wie „mustache.js„.
Als Frontend-Entwickler möchte man allerdings eigentlich nicht Scripts und Markup vermischen. Haben wir es die letzten Jahre nun endlich hinbekommen, dass Markup, Scripts und Layout sauber getrennt sind würden Frontend-Templates in JavaScript das ganze wieder zunichte machen. Doch das Allzweck-Buzzword HTML5 hat da etwas in der Pipeline: das <template>-Tag. HTML5 template-Tag weiterlesen

Shadow DOM Grundlagen

Das Shadow DOM ist eine versteckte Hierarchie innerhalb des DOMs der Hauptseite. Den Shadow DOM kennen wir eigentlich schon länger. Am offensichtlichsten zeigt er sich beim <iframe>, denn jedem ist klar, dass sich innerhalb dieses Tags das DOM der eingebeteten Seite befindet. Etwas weniger offensichtlich zeigt er sich beim <video>-Tag. man baut nur das <video>-Tag ein, jedoch gibt es automatisch auch Elemente für die Navigation, die ja auch Objekte sein müssen. Diese Tags sind alle vordefiniert und können nur verwendet werden, jedoch lässt sich ein Shadow DOM mit Hilfe von JavaScript auch selbst erzeugen und nutzen. (Prefixes derzeit noch nötig) Shadow DOM Grundlagen weiterlesen

HTML5 Offline-Reader Web-App mit LocalStorage und Appcache

Dieses Projekt liegt jetzt schon bestimmt 4-5 Monate fast fertig bei mir rum, heute Abend hab ichs dann mal finalisiert. Es geht darum mittels HTML5 Elementen eine Web-App zu schreiben, die das offline lesen von Artikeln ermöglicht. Verwendete Techniken sind der LocalStorage des Browsers und der Appcache, also die Möglichkeit mittels Manifest-Dateien mehrere Dateien anzugeben, die der Browser offline zwischenspeichern soll. HTML5 Offline-Reader Web-App mit LocalStorage und Appcache weiterlesen

CSS variabel machen

SCSS (Sassy CSS) oder Sass (Syntactically Awesome Stylesheet) ist eine Sprache, die auf CSS aufsetzt und versucht es dynamisch zu machen und bessere Syntax zu verwenden. Dabei gibt es noch eine Unterscheidung zwischen SCSS und Sass – jedes gültige CSS-Dokument ist auch ein gültiges SCSS-Dokument, Sass hingegen verwendet eine veränderte Syntax, vor allem fallen die geschweiften Klammern und das Semikolon weg. Die Hierarchie innerhalb des Dokuments wird durch strikte Einrückung und Zeilenumbrüche gewahrt. Doch fangen wir vorne an. CSS variabel machen weiterlesen

HTML5 LocalStorage einfach nutzen mit jStorage

jStorage ist ein schönes kleines JavaScript (2Kb), das Framework-Unabhängig aufgebaut ist und so mit jQuery, Prototype und MooTools zusammen arbeitet. Es bietet eine einfache Möglichkeit, den LocalStorage des Browsers zu nutzen. Auf der Website gibt es außerdem eine übersichtliche Tabelle über den Browser-Support. Ich möchte einmal kurz die wichtigsten Funktionen vorstellen. HTML5 LocalStorage einfach nutzen mit jStorage weiterlesen

JSON-P mit jQuery

Manche Projekte erfordern es, dass Scripte über Domains hinweg arbeiten. Wenn auf einem Server mehrere Domains gehostet sind ist das für serverseitige Scripts kein Problem, jedoch bei clientseitigem Scripting, kann das schon schwieriger werden. Möchte man mit JavaScript per AJAX Daten nachladen, tut man dies oft, indem man sich die Daten als JSON-Struktur anliefern lässt. Geht dies jedoch über unterschiedliche Domains hinweg, kommt einem die „Same-Origin-Policy“ in die Quere. Abhilfe schafft hier JSON-P. JSON-P mit jQuery weiterlesen