In den letzten Wochen bin ich mehrmals über die Frage gestolpert was ein Frontend Entwickler denn nun können muss. Ich finde das konnte man in den vergangenen 10 Jahren jedes Jahr irgendwie anders beantworten.

Im Jahr 2006 hätte ich unter anderem CSS Hacks und Cross Browser Debugging genannt .. während das heute eher in Richtung Entwicklung für Mobile Endgeräte geht .. Media Querys .. die Besonderheiten von Touch Interfaces .. etc.

Aber um mal zu Potte zu kommen ..

Layout, Design und Usability

• die Fähigkeit gute grafische Layouts per Bildbearbeitungssoftware zu erstellen
• ein Auge für Farben und Stil
• Fokus auf Usability, verschiedene Auflösungen und Endgeräte
• kennt die Möglichkeiten von responsive Webdesign

HTML

• semantisches Verständnis der HTML/HTML5 Syntax
• logischer und sparsamer Einsatz von Markup
• die Fähigkeit HTML im Texteditor ohne WSIWYG zu schreiben
• kennt die Notwendigkeit von Web accessibility
• entwickelt W3C Konform

CSS

• Verständnis der CSS2/CSS3 Syntax
• klares Verständnis des CSS Box Models
• sinnvolle Vererbung und Gruppierung von Anweisungen
• Kenntnis aller Selektoren, Pseudoselektoren
• Positionierung, floatende Layouts
• Fähigkeit große CSS Files klar zu strukturieren
• Einsatz von Media Querys
• Graceful Degradation / Progressive Enhancement im Hinblick auf verschiedene Browser
• kennt die Möglichkeiten von CSS3

JavaScript

• Basiswissen über Operatoren, Variablen, Datentypen, Objekte, Methoden
• Basiswissen über Kontrollstrukturen, Schleifen, Funktionen
• Kenntnis von Event Handling und DOM Manipulationen
• Grundsätzliches Verständnis von XHR
• zuverlässiger Umgang mit mindestens einer JavaScript Bibliothek

Testen und Debugging

• nutzt Validatoren für HTML, CSS und JavaScript
• kann Cross Browser, Cross Plattform debuggen
• kennt Testframeworks
• ist sich der unterschiedlichen Browser Eigenschaften bewusst

Performance

• weiß welches Grafikformat wann eingesetzt wird
• minimiert immer die Anzahl der Requests, Größe der Grafiken
• kennt Testmöglichkeiten wie YSlow oder Webpagetest

Suchmaschinenoptimierung

• Basiswissen über OnPage SEO
• korrekter Einsatz von HTML Elementen, Attributen

Forschergeist und Erfahrung

• hat Webseiten vom ersten Pixel bis zum Golive betreut und erstellt
• kann sich mit etwas Aufwand in jedem CMS oder Web Framework zurecht finden
• hat selbst schon Weblogs oder CMS Systeme installiert und administriert
• kann Code von fremden Seiten auseinandernehmen und verstehen
• probiert Dinge aus die er nicht versteht
• hat die Geduld Fehler zu finden und sich mit Quelltext auseinander zu setzen
• weiß sich zu helfen :) .. vor allem wo man welche Information findet

Es gibt noch einige Sachen die ich nicht erwarte. Kein Frontend Entwickler muss die komplette Syntax von HTML, CSS oder JavaScript im Kopf haben. Er muss aber sehr wohl wissen wie er die Syntax richtig und fehlerfrei kombiniert ..

was ich damit sagen will ..

ich glaube nicht das man alles das ich da aufgezählt habe zu 100% auf dem Kasten haben muss. Aber man muss seine Werkzeugkiste kennen und alle Werkzeuge darin bei Bedarf zur Anwendung bringen können. Wenn das heißt das man vorher was nachlesen oder ausprobieren muss ist das sicher nicht schlecht. Schlimmer wäre es gute Werkzeuge nicht zu nutzen weil man sich nicht traut oder sie schlicht nicht kennt.

Feedback ausdrücklich erwünscht :)

Vor ein paar Tagen offiziell angekündigt .. ein paar Worte zum Penguin Update.

SEO bashing

Ist ja gerade so ein bisschen zum Trend geworden .. in diversen Podcasts und Blogs regt man sich pauschal über Suchmaschinenoptimierer auf .. weil die ja die Suchergebnisse manipulieren würden .. Google sieht das etwas anders.

Es gibt diverse Methoden um eine Website für Suchmaschinen zu optimieren .. gute wie schlechte .. und ich kann nichts schlechtes daran finden eine Seite mit guten Inhalten etwas in den SERPs nach vorne zu verhelfen. Ebenso ist nichts schlechtes dabei die Semantik einer Website, die interne Verlinkung und den Quelltext so zugänglich wie möglich zu machen oder einfach guten Inhalt zu produzieren .. das dient eben nicht nur Suchmaschinen sondern in erster Linie dem User (und um den geht es).

Das viele SEOs es dabei völlig übertreiben ist leider offensichtlich .. sonst müsste Google nicht alle paar Monate seinen Algorithmus verändern.

Ich kann aber nichts schlechtes dabei finden wenn Linkkäufer und Black Hats eine auf den Deckel bekommen .. Google auch nicht :)

Ziel von Penguin

Das ist recht simpel .. mit der Zeit finden SEOs gewissen Schlupflöcher in Google Suchalgorithmus und bringen diese in Massen zur Anwendung. Ein Beispiel war das offensichtliche Keyword Stuffing um eine Seite eben relevanter als andere erscheinen zu lassen .. das Loch wurde schon vor Jahren geschlossen.

Wem geht es also dieses mal an den Kragen?

• Webseiten die übernatürlich viele Links von extern bekommen
• bei extrem vielen Links aus Blogkommentaren
• Kommentarspam bei dem der Name das Keyword ist
• wenn immer gleichlautende Linktexte verwendet werden
• Webseiten die hauptsächlich Links aus Linktausch / Linknetzwerken bekommen
• Webseiten die ihre Links offensichtlich gekauft haben
• wenn man Links von als Webspam geflaggten Seiten bekommt

Fazit

Das Penguin Update zielt also vor allem auf unnatürliche Linkprofile ab. Ein Boomerang Effekt für Seiten die in der Vergangenheit viel Geld in plattes Linkbuilding investiert haben. Kostenintensiv war das sicher und ab sofort wird man dafür von Google bestraft .. nur leider kann man ein zusammengekauftes Linkprofil nicht so einfach rückgängig machen wie OnPage SEO Fehler ..

Linkbuilder werden in der Zukunft noch behutsamer vorgehen müssen. Zuviele neue Links in einer Woche .. selbst wenn Keyword Varianten benutzt werden .. können gefährlich sein.

Was will Google?

Vor allem gute, interessante, einzigartige, informative .. Webseiten. Inhalte die für User gemacht sind und die Usern weiterhelfen. Denn die bekommen ihre externen Links mit der Zeit von alleine oder werden in sozialen Netzwerken aufgegriffen und verlinkt. Davon redet Google nun schon ne ganze Weile .. es geht um qualitativ hochwertige Websites .. und jedes weitere Google Update wird in diese Richtung gehen.

Die CSS3 Lightbox von gestern war ja schon ganz nett .. allerdings gabs auf dem iPhone noch ein paar Probleme .. also je nacht Sichtweise .. :)

Die Lightbox war auf eine max. Breite von ca. 45% eingestellt. Für den kleinen Screen eines iPhones natürlich nicht wirklich geeignet (zwar lesbar .. aber nicht schön). Daneben gab es ein kleines Darstellungsproblem wenn der Inhalt der Lightbox sehr umfangreich war .. durch position:fixed hatte man nicht die Möglichkeit zu scrollen.

Beides habe ich nun gelöst ..

Die Breite der Lightbox ist nun von der Breite des Viewports abhängig. d.h. ein iPhone4 bekommt die Lightbox in ca. 80% Breite, ein großer Monitor mit 45% Breite angezeigt.

Ebenso kann man nun den kompletten Inhalt einer überlangen Lightbox erscrollen.

Verändert beim testen einfach die Fenstergröße des Browsers .. damit man es besser sieht stehr oben immer die gerade aktive Auflösung drin .. und die Farbe der Lightbox variiert.

Hier die CSS3 Lightbox mit Media Querys.

Ich hacke ja schon etwas länger an HTML5 und CSS3 rum und probiere wie weit man es treiben UND dann auch noch verwenden kann. Mit dem Path Menü hab ich damals den Hack mit dem checked Selector und den versteckten Input Felder ausprobiert.

Die CSS3 Lightbox die ich gebaut habe funktionieren im IE10, FF, Chrome und Safari. Auf mobilen Endgeräten funktionieren die Boxen auch. Getestet auf dem iPhone und iPad unter iOS > 5.1.

Der Selector bei diesem Beispiel ist der TARGET Selector. Er ist dazu gedacht, das aktive TARGET Element, das per Anker angesprungen wurde zu stylen. Daneben spiele ich mit der VISIBILITY und der OPACITY um einen Lightbox Effekt zu erzielen.

Beide Eigenschaften sind auch notwendig da die ganzen Overlays ja direkt in den Viewport geklebt werden .. aber (erst mal) nicht klickbar sein sollen wenn sie nicht zu sehen sind.

Wenn die Lightbox offen ist .. soll jeder Klick um die Lightbox herum zum schließen der Lightbox führen .. so kennt es der User .. dazu muss man das komplette teiltransparente graue Overlay nach dem erscheinen der Lightbox klickbar machen.

Auch kein Problem .. einfach dem Overlay einen leeren Ankerlink verpassen und den Cursor auf default setzen.

Mit dem PLUS Selector und ein paar CSS Transitions kann man dann daraus jede Menge Sachen machen die vorher nur per JS möglich waren .. in diesem Fall ein paar Lightboxen.

Das CSS steht direkt im HTML Dokument .. und auch sonst hab ichs erst mal einfach gehalten.

Hier das Beispiel – CSS3 Lightbox ohne JavaScript.

Ich habe oder eher hatte meine liebe Not mit Regular Expressions .. aber zwei Dinge haben mir geholfen .. da wäre einmal dieses Tool um RegEx zu testen.

Damit lernt man es allerdings nur unzureichend .. es eignet sich einfach dafür um seine Pattern zu testen. Was mir echt auf die Sprünge geholfen hat war eigentlich ein ganz simples Cheat Sheet von Dave Child. Hier ist das RegEx PDF.

Die ganzen riesigen RegEx Websites die in langen Sätzen und noch viel mehr Worten versuchen die Materie zu erklären sind an mir (oder ich an ihnen) gescheitert.

Am 07.01.2012 habe ich die erste Version von SEORCH veröffentlicht. Und jetzt sind 2 Monate vorbei und ich schreib mir mal auf welche Dinge mir durch den Kopf gehen.

Da wäre als erstes mal der PHP Code

nach 10 Feature und Bugfix Releases bin ich einigermaßen stolz drauf. Er lässt sich schnell und einfach erweitern. Ich hab scheinbar alles so schön modular aufgebaut wie es sein sollte. In der Regel bau ich ein neues Feature ein und sage dann nur dem Controller das er es der View zugänglich machen soll etc. Ich kollidiere nicht mit den vielen Methoden die sonst da noch so rumhängen. Die Architektur musste ich noch kein einziges mal anpassen .. alles fügt sich gut zusammen.

Trotzdem .. auf einige Sachen bin ich nicht so stolz bzw. sind sie vielleicht ein bischen verbose aber man sagt doch .. GUT ist gut genug. Wenn eine Methode verlässlich das tut was sie soll und robust agiert und reagiert ist sie gut genug. In 6 Monaten sehe ich das wahrscheinlich anders .. aber dafür schreib ichs hier mal hin.

Fazit: Der Code ist zu 90% so gut wie ich es derzeit kann und die 10% die ich eleganter machen könnte verstehe ich zurzeit lieber auf den ersten Blick .. auch sonst zerbreche ich mir in der Regel viel zu lange den Kopf über guten Code.

Zugriffszahlen

sind steigend .. zwei Peaks gab es wo ich von bekannten Blogs / Foren gefeatured wurde. Aktuell habe ich jeden Tag ca. 100 – 130 Unique Visitors. Über 1200 Analysen wurden alleine im Februar gemacht. Find ich cool .. und wegen mir kann das auch nur sehr langsam steigen. Ich mach da auch recht wenig dafür .. einzige Marketingmaßnahme der letzten Woche war/ist die Chrome App die ich dann gleich in englisch und deutsch gebaut hab. Mal sehen was das bringt.

Einen neuen Hoster teste ich gerade .. da läuft der DEV Channel drauf .. Uberspace .. ist wahrscheinlich der Hoster den ich schon vor 10 Jahren gerne gehabt hätte :)

Erstaunlich ist die Verweildauer .. im Schnitt 7 Minuten pro User. Scheinbar werden die Analysen gelesen .. auch cool. Witziger Nebeneffekt der gespeicherten Analysen .. seorch.de hat in 2 Monaten 1500 Seiten in den Google Index bekommen und pro Tag ca. 4500 Search Impressions ..

The Ususal Suspects

erstaunen mich insofern welche Fehler viele Website Betreiber machen .. also im Bezug auf SEO .. sonst darf ja jeder selbst glücklich werden.

Diverse Seiten die SEORCH überprüft hat verwenden keine META DESCRIPTION, oder verwenden simple META REFRESHs von umfangreichen FRAMESETS ganz zu schweigen. Auch Encoding Fehler sind an der Tagesordnung .. im CHARSET wird UTF-8 angegeben .. die Seite selbst ist dann aber ISO-9666-WasWeißIch .. der lustigste hatte 3 verschiedene Encodings spezifiziert.

Auch so mancher Quelltext verursacht mir physische Schmerzen .. und ich bewundere mittlerweile die Jungs die die Browser Render Engines bauen .. das muß wie der Kampf gegen eine Hydra sein .. nur das dann immer 100 neue Köpfe nachwachsen. Einigermaßen Stolz bin ich auch drauf das SEORCH auch bei extrem hässlichem und falschem Markup seinen Dienst zuverlässig verrichtet.

Und nun?

Ich hab ja noch ne kleine Roadmap vor mir .. die werde ich mir in den nächsten Wochen/Monaten vornehmen und dann .. mal sehen.

Ab August und im Herbst habe ich ja munter an meinem (jetzt alten) OnPage SEO Checker entwickelt.

Motivation

Im November hatte ich mich dann entschlossen die komplette Codebase neu zu schreiben. Das lag in erster Linie daran, daß ich den Code besser und modularer machen wollte. Ich habe mein eigenes MVC Pattern implementiert (Danke an Jan der meine Fragen dazu geduldig beantwortet hat), einen (guten?) Debugger gebaut und brav Schnittstellen zwischen den verschiedenen Modulen definiert.

Daneben hatte ich in der alten Version eine kleine PHP Lib eingesetzt um die HTML DOM Analyse zu machen. Allerdings ist die bei extrem dicken Seiten (airliners.net) ausgestiegen .. außerdem hatte ich mich mittlerweile so tief in PHP 5 eingearbeitet das ich es mit Standardmitteln versuchen konnte. Die Selector Engine in der neuen Version läuft nun mit PHP DOM und PHP Simple XML.

Wahrscheinlich hätte ich schon viel früher fertig sein können :) aber 50% der Entwicklungszeit habe ich mir den Kopf drüber zerbrochen wie ich eine guten Code schreibe .. hab mich mit Design Patterns auseinandergesetzt und fremden Code gelesen.

Das SEO Tool – SEORCH

SEORCH hab ich es genannt und mit der Version 0.1 macht es nicht wesentlich mehr als das alte Tool. Es ist etwas schneller geworden .. Umlaute in Keywords tun nun auch, die Analyse ist genauer, das Keyword kann man nun optional eingeben usw.

Garantiert sind auch noch ein paar Bugs zu finden.

Wichtig war mir ein Fundament zu haben auf dem ich aufbauen kann. Ich plane die SEO Analyse in Zukunft noch wesentlich zu erweitern und externe Datenquellen mit aufzunehmen (Google ich komme .. ). Aber bevor ich in den Featurewahn verfalle … die erste Version ist nun also online.

Über jede Art von Feedback freu ich mich.

Aja -> SEORCH – OnPage SEO Tool

Seit einigen Tagen benutze ich Path .. die App ist ziemlich schick und hat einige tolle UI Features die man so noch nicht gesehen hat. Mir hat es besonders das Menü angetan mit dem man seinen Status posten kann.

Am Samstag habe ich dann überlegt, daß man das auch mit CSS3 und vielleicht sogar ganz ohne JavaScript nachbauen könnte. Ich wollte es nicht 100% klonen sondern mich nur etwas inspirieren lassen.

Rausgekommen ist dann mein Menü inspiriert von Path das wirklich nur mit CSS3 und HTML gebaut wurde.

Das CSS findet ihr direkt im Quelltext der HTML Datei. Neben dem Tilde Selektor und ein paar abgefahrenen CSS3 Transitions besteht das einzige Problem im Grunde darin, daß ONCLICK die Menü Elemente herausfliegen und dann auch auf ihrer Position bleiben sollen wenn man den Mauszeiger vom Menü wegbewegt.

Die habe ich mit dem :CHECKED Selector gemacht .. das Input Feld wird ausgeblendet und das Label des Input Feldes dient als Menü Schaltfläche ..

Kann man natürlich auch mit :HOVER machen .. allerdings bleibt das Menü nur dann offen wenn sich die Maus darauf befindet … hier mein shiny Micro Menü .. ;-.)

Um mich vom PHP coden etwas zu entspannen habe ich mir spontan ein modernes Webformular gebaut.

Ich hasse es eigentlich Webformulare in HTML zu bauen .. positionieren macht keinen Spass, dann immer nach dem Schema INPUT > LABEL oder doch umgekehrt. Durch unterschiedliche Textlängen und Feldgrößen sehen die meisten Webformulare immer irgendwie wie ein Unfall aus (im schlimmsten Fall) oder halbfertig (in den meisten Fällen) .. da sich dann irgendwann doch Texte reinmogeln mit denen vorher kein Entwickler gerechnet hat brechen manche Formulare auch noch an den unmöglichsten stellen um.

Soweit zur Vorgeschichte .. ich hab nun also versucht was schöneres / funktionaleres / ansprechenderes zu bauen und dabei hab ich mich erst mal auf INPUT und TEXTAREAs beschränkt.

Der Benutzer soll es einfach haben, Informationen die nicht mehr gebraucht werden fliegen raus, das aktuelle Feld (das im Fokus steht) wird herausgehoben .. die Labels schreib ich direkt in die INPUT und TEXTAREAs rein ..

Rausgekommen ist (IMHO) ein recht schickes Formular. Getestet habe ich das bisher allerdings nur in aktuellen Chrome und Firefox Versionen .. allerdings ist es grundsätzlich so gebaut das es auch im IE4 funktionieren sollte .. dann natürlich ohne Schick und Pomp.

Hier ist das Formular.

Features:

• CSS3 Transitions
• selten benutzte CSS Selektoren
• jede Menge Pseudo Klassen
• und ein bisschen jQuery

CSS und JS findet ihr direkt in Files .. habs glaub ich recht übersichtlich hinbekommen.

Das ordnet mal schön den Kopf zum Thema SEO und fasst definitv alles wichtige zusammen .. bei einigen Punkten würde ich persönlich etwas anders gewichten .. aber das ist dann eher im Kontext der Seite die man optimiert zu sehen ..

Hier nochmal alles in GROß .. und danke an schst ders mir auf den Tisch gelegt hat.