Die einfachste Möglichkeit herauszufinden, welche Programme / Prozesse gerade laufen, ist sicher über den Activity Monitor (Aktivitätsanzeige). Hierfür oben rechts auf die Lupe klicken oder schneller mit Apfeltaste + Space. In das Suchfeld dann “Aktivitätsanzeige” oder “Activity Monitor” eingeben und Enter drücken. Ihr solltet dann soetwas sehen:
Activity Monitor Mac OS X
Yay Jubiläum
#perfmatters ist ein beliebtes Thema derzeit auf meinem Blog. Hier hinzufügen möchte ich noch ein paar Slides von Addy Osmani mit Case-Studies und weiterem Hintergrundwissen zur Erhöhung der Rendering-Performance im Browser. Es kommt aber nicht nur auf die Geschwindigkeit beim Rendering an, auch der Weg vom Server zum Browser muss bedacht werden. Google Mitarbeiter Ilya Grigorik hat einiges tief gehendes Wissen zu “High Performance Browser Networking” in einer Präsentation verpackt und kann dir so auch in diesem Gebiet zu besserer Performance deiner WebApp verhelfen. Vor allen bei mobilen Webseiten ist die Latency ein großes Problem. Ein CDN kann hier zumindest ein wenig Milderung verschaffen.
Wenn du zukünftig die Veränderungen deiner Performanceoptimierung tracken willst, kannst du dies mit Google Analytics machen. Am besten fügst du hierfür vor:
Es ist mittlerweile ziemlich schwer eine freie generische Top Level Domain (TLD) zu bekommen. Die besten Namen mit .com, .net und ähnlichen sind schon lange belegt und auf Phantasienamen kann man nicht immer setzen. Manchmal hat man Glück und es ist zumindest die .de-Domain zum gewünschten Namen frei. Dabei ist aber der Nachteil, dass man aus SEO-Sicht keinen englischen Content auf auf einer deutschen Domain veröffentlichen sollte. Die Lösung sind von Google als generisch behandelte ccTLDs (country code TLD), also Domains, die eigentlich zu einem Land gehören, von Google aber nicht zwangsweise so behandelt werden.
Screenshot: Google Webmaster-Tools – Geotarget Setting
Bei generischen Domains (.com, .org, etc.) kannst du Google (per Webmaster-Tools) mitteilen, welche Region (Land, Sprache) du adressieren möchtest. Bei länderspezifischen Domains (.de, .at, etc.) geht das nicht, außer eben bei folgenden Ausnahmen:
Continue reading
Samsung GS2 by Alvin Pingol – CC BY-SA 3.0 – 2011
Ich hasse es wirklich. Ich bin in der Bahn, will www.supertolleseite.de aufrufen, habe schlechten Empfang. Er lädt und lädt, meine Hoffnung steigt, endlich die Seite zu sehen, auf einmal; zack Redirect auf m.supertolleseite.de und das Laden beginnt von vorne. So ein MIST!
Und jetzt rate mal was? Nicht nur den Benny in der Bahn nervt das, auch Google findet das gar nicht mal so geil. Du verteilst die ganze schöne SEO Power von Google auf deine Subdomains. Richtig schlimm wird’s, wenn noch eine Subdomain für Tablets existiert, etwa t.supertolleseite.de. Mit “Pech” ist in der mobil-optimierten Version nicht jeder Content verfügbar. Was passiert also, wenn ich über einen Link direkt an einen fehlenden Content angesurft komme? Hoffentlich ein Redirect auf die Desktop-Seite und keine mobil-optimierte 404. Letzteres straft Google ab.
*** Update: 24.11.2013
Die Qualität deiner Website auf mobilen Endgeräten hat, wie beschrieben, immer stärkeren Einfluss auf das Ranking in Google. Ein detaillierter Artikel (englisch) gibt es in Google’s Webmaster Central Blog unter der Überschrift: Changes in rankings of smartphone search results.
OK, jetzt bin ich also auf m.supertolleseite.de/304862/tollerContentZumSharen und will den Link twittern (oder anderweitig sharen). Wie oft hab’ ich’s erlebt, dass ich so einem Link dann auf dem Desktop geklickt habe und anschließend mit dem Desktop-Browser in der mobilen Version rumgeirrt bin. Selbst Facebook macht diesen Fehler.
Und um all das zu versauen, gibst du auch noch extra Kohle aus. Den gleichen Content zweimal darzustellen, kostet dich nur Zeit und Nerven. Lass es sein.
Wenn du dich also fragst: Sollte ich meine Website für mobile Endgeräte optimieren? Dann lautet die Antwort: “Ja, unbedingt, aber bitte richtig.” Responsive Design, keine Redirects und alle werden happy sein.
Mother Russia – CC 2.0 by Rob (BBM Explorer) – 2011
Du weisst es nicht, kannst es nur interpretieren.
Promise Cartoon by Wilf Eddings / @iamwilf
Wie so häufig in den Quick-Hints; ein paar JavaScript Tutorials. Im letzten Quick-Hints hatte ich schon ein CheatSheet zum Thema Promises verlinkt, jetzt hab ich noch etwas gefunden, was ich unbedingt noch hinzufügen möchte: Ein Cartoon, der sehr anschaulich Promises erklärt.
Ich gehöre nicht zu den riesen Fans von AngularJS, aber in Verbindung mit der detaillierten Erklärung, wie man ChromeApps entwickelt, ist ein dabei ein gutes “ChromeApp mit AngularJS entwickeln” Tutorial herausgekommen.
Jetzt noch zwei Dokumentationen zum Thema StartUp / Firmengründung. Bei startingupinamerica.com ist eine Doku zu finden, in der USA-Einwanderer von Ihrer Business-Story berichten und die Vorteile für ihr neues Land verdeutlichen. Umgekehrt werden hier auch die Vorteile eines StartUps in Amerika gegenüber anderen Ländern aufgezeigt.
Das folgende YouTube-Video ist die Hintergrundgeschichte zu Minecraft. Es erzählt ein wenig über die Entstehung von Mojang, der Firma hinter Minecraft und rund um den Entwickler notch.
Wenn du als PHP- oder Java-Entwickler aus der (standardmäßig) blockierend Input/Output Welt kommst, solltest du dich bei JavaScript (nodeJS) relativ schnell mit dem Thema non-blocking IO beschäftigen und dazu hier der passende (englische) Einstieg: Zen of non-blocking IO. Als Bonus gibt es dort auch eine schöne Übersicht, was einen WebServer ausmacht.
Um die Performance seiner Webanwendungen verbessern zu können, ist es essentiell, dass du verstehst, wie ein Browser arbeitet und funktioniert. Genauer, wie stellt der Browser deinen HTML und CSS Code dar. Auf Youtube habe ich hierzu ein nettes Einstiegsvideo “How Browser Works” gefunden, vier Minuten und die Basics sind klar. Wenn du über diese Basics hinaus bist, musst du UNBEDINGT dieses Experten-Video sehen. 51 Minuten geballtes Wissen über Rendering-Performance und wie diese in deiner WebApp gesteigert werden kann. Den Speaker anschließend noch folgen: Google Mitarbeiter Paul Lewis auf Twitter.
Auch wenn Fehler in Änderungen am CSS, aufgrund ihrer visuellen Sichtbarkeit, häufig schnell auffallen, halte ich gerade in komplexen und umfangreichen Projekten Regressionstest für sehr sinnvoll.
Regressionstest verfolgen den Zweck, bereits getestetes, nach Änderungen im Gesamtprodukt*, erneut zu testen und so deren Fehlerfreiheit weiterhin zu gewährleisten.
Im Fall des Testens der Visualität einer WebApp, geschieht dies häufig und am einfachsten über einen Screenshotvergleich. Das (automatisierte) Vergleichen von Screenshots hat den Vorteil, dass nicht die Cascading Style Sheets (CSS) direkt getestet werden, sondern deren Auswirkung auf die Visualität. Was wiederum bedeutet, dass auch alle anderen Systemteile, die die Visualität verändern, mitgetestet werden. Dank der großartigen Community gibt es für diesen Zweck bereits viele einsetzbare Tools. Folgend eine Liste der mir bekannten:
Screenshot by Huddle for PhantomCSS
Screenshot-Vergleich:
Sonstiges:
Ich konnte bisher noch keine Erfahrung mit diesen Tools sammeln, im Überblick sind aber Wraith, PhotoBox und PhantomCSS meine Favoriten. Mehr zum Thema CSS Testing findet sich (in Englisch) im Entwickler-Blog von Huddle, von denen auch eines der oben genannten Produkte kommt (PhantomCSS).
Du kennst noch weitere Libraries, Frameworks und Tools, zum Testen von CSS? Dann schreibs bitte in die Kommentare, ich werde die Liste entsprechend erweitern.
* Soll heissen, dass die Änderungen, weshalb regressionsgetestet wird, nicht zwangsweise (oder offensichtlich) das zu Testende betreffen.
Statistik Besucher Wochenrekord
Lange hab’ ich nichts mehr veröffentlicht, komme leider nicht wirklich dazu. Trotzdem konnte ich letzte Woche einen neuen Visits-Wochenrekord für ben.nyben.net aufstellen. Damit es nicht langsam aussieht, als sei mein Blog tot, hier ein neuer, kleiner Quick-Hints Eintrag.
Ein extrem nützliches, aber noch nicht so beachtetes Objekt in JavaScript ist der MutationObserver. Dieser Nachfolger der MutationEvents bietet weniger Fehlerpotential und findet bereits jetzt eine breite Unterstützung seitens der Browser. Sehr nützlich bei der Implementierung eines eigenes Frameworks, bietet dir der MutationObserver die Möglichkeit, auf DOM-Änderungen zu reagieren. Im Opera (ja, der Browser) Blog ist ein sehr nettes Tutorial zu finden. Weiterführend dazu, hat Addy Osmani auf der JSConfEU13 einen sehr sehenswerten Talk gehalten. In diesem geht es um Object.observe aus der ECMAScript Harmony Spec. Object.observe bietet quasi den Mitspieler der MutationObserver. Hiermit können Änderungen an JS-Objekten (zum Beispiel) im DOM wiedergespiegelt werden: Everthing you want to know about Object.observe
Hier ein Post, der sich als sehr nützlich erweisen kann, wenn man mal wieder das Aussehen der Scrollbars im Browser anpassen soll… Warum auch immer man das möchte.
Ein kurzer Ausflug in die Welt des Marketings: Wie schaffe ich es, vier Millionen Leute für meine Sache zu begeistern.
Promises sind extrem schön um in JavaScript einen asynchronen Aufruf / Ablauf zu entwickeln. Für Promises gibt es in JS viele Implementierungen, unter anderem von jQuery. Ein schönes CheatSheet, basierend auf der promises/A+ Implementierung, kann dabei sicher gut unterstützen. Eine nette (englische) Beschreibung von Promises findet sich im Blog von parse.com.
Auf den Seiten der FH Wedel findest du eine nette Kurzbeschreibung zu den wichtigsten Technologien, die bei nodejs zum Einsatz kommen. Nichts Weltbewegendes, aber falls du noch nicht weisst, was hinter non-blocking I/O steckt, findest du dort eine kompakte, gute Antwort.
Als Webentwickler muss man sein Produkt ständig in mehreren Browsern und am besten noch in mehreren Umgebungen testen. Hier eine schöne Möglichkeit: http://blog.mattbailey.co/post/50337824984/grunt-synchronised-testing-between-browsers-devices
Mit SVG-Grafiken in Webseiten kann man viele schöne Dinge anstellen. Zum Beispiel ein Logo / eine Schrift animieren: http://jakearchibald.com/2013/animated-line-drawing-svg/
Ein paar nette CSS3 Effekte für Menüs / Links sind unter folgendem Link zu finden: http://tympanus.net/Development/CreativeLinkEffects/. Um diese auch in vielen Browsern nutzen zu können, empfiehlt sich der Einsatz eines Autoprefixers, zum Beispiel: http://css-tricks.com/autoprefixer/
Für Fälle, in denen man das letzte Element eines Arrays möchte, gibt es viele Möglichkeiten. Wenn man wert auf die Performance legt sollte man ganz klar “array[array.length - 1];“ benutzen. Siehe: http://jsperf.com/get-last-item-from-array/10
Mit einem kleinen Trick kann man derzeit Youtube werbefrei nutzen:
Öffne die Entwickler-Konsole deines Browsers:
Entwickler-Konsole
Danach auf den Reiter Console wechseln und folgendes eingeben:
document.cookie="VISITOR_INFO1_LIVE=oKckVSqvaGw; path=/; domain=.youtube.com";window.location.reload();
Mit der Enter-Taste bestätigen und Youtube adfree nutzen. (Nach dem Enter sollte sich das Fenster neu laden.)