Quick-Hints #13

Animiertes SVG mit Clipping Masks

Mit dem nötigen Talent oder dank einer engen Zusammenarbeit mit Grafiker, können dank Clipping Mask sehr einfach sehr coole Animationen mit SVG entstehen. So wird in folgender Demo ein iPhone 5C nach und nach aufgebaut, alles im puren SVG: http://www.pencilscoop.com/demos/animating-svg-clipping-masks/; dort findet ihr auch das entsprechende Tutorial.

Canvas für mehr Performance?

Continue reading

Quick-Hints #12

Repository for Web Components

Für die Web Components (W3C Working Draft) gibt es mit customelements.io eine Sammlung von vielen netten Custom HTML-Elementen. Das ganze ist ähnlich einem NPM (Node) oder Nexus (Java) aufgebaut. Die Web Components bieten (dank Polyfill auch heute schon), die Möglichkeit – wie es der ein oder andere von euch (in ähnlicher Form) schon aus AngularJS kennt -, das Spektrum an HTML-Elementen zu erweitern. So findet sich auf der Website zum Beispiel ein Calendar-Element, welches durch einfache Benutzung des Tags

<x-calendar view="2013-06-09"></x-calendar>

einen Kalendender in eure Website zaubert. Natürlich ganz normal mit CSS stylebar. Viele weitere Elemente und Informationen könnt ihr auch unter x-tags.org finden.

#perfmatters

Performance im Front-end ist immer wieder ein Thema auf meinem Blog. Vor allem beim Scrollen von Webseiten gilt immer wieder die Herausforderung, die 60 FPS zu halten. Mittlerweile gibt es sehr viele Kniffe und Hinweise, wie einem das gelingen kann. Ein guter Artikel zu diesem Thema ist hier zu finden: Continue reading

(HTML5 Canvas-)Bilder hochauflösend (Retina) darstellen

Vor guten zehn Monaten ist der letzte Artikel in der Kategorie “Leicht und klar erklärt” erschienen und so gab mir heute (mal wieder) ein Thema in der Firma eine perfekte Vorlage für einen Artikel.

Wie stelle ich HTML5 Canvas Grafiken auf einem iPad mit Retina-Display scharf dar? Folgende Erklärung gilt aber nicht nur für das Canvas-Element, auf Bilder/Fotos trifft dies ebenso zu. Fast alle Tablets haben mittlerweile hochauflösende Displays (High DPI – HiDPI) und so wird es immer wichtiger, dass du das folgende beachtest – zumindest wenn du deinen Besuchern Qualität bieten möchtest. Die vernünftige Darstellung von Bildern auf allen Geräten kann man als Teildisziplin von Responsive Webdesign bezeichnen. Auf zur Theorie:
Continue reading

Quick-Hints #11

CSS3 3D Transformationen

http://rupl.github.io/unfold/ - Unfolding the Box Model: Exploring CSS 3D Transformation

Eine sehr sehr schöne Präsentation zu 3D-Transformationen mit CSS. Der Einstieg wird hier anschaulich und dadurch leicht gemacht.

CSS Variables sind im Firefox angekommen

Seit der Version 29 von Firefox ist es möglich, Variablen in CSS zu verwenden. Du kennst wahrscheinlich LESS, SCSS und Co. und hast vielleicht auch schon die Möglichkeit, Farben global zu deklarieren, zu schätzen gelernt. Nun braucht man nicht mehr Zwangsweise einen CSS-Preprocessor um Variablen für z.B. Farben und Margins anzugeben; siehe auch: http://mcc.id.au/blog/2013/12/variables

CSS Variables in Firefox 29

CSS Variables in Firefox 29

Continue reading

Mac OS X: Laufende Programme / Prozesse finden und beenden.

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

Activity Monitor Mac OS X

Continue reading

Quick-Hints #10

Yay Jubiläum

#perfmatters

#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:

Continue reading

Domain belegt, was nun?

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

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

Alle hassen deine Mobile-Website!?

Samsung GS2 by Alvin Pingol - CC BY-SA 3.0 - 2011

Samsung GS2 by Alvin PingolCC 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.

Der Konzern ist wie Mama

Mother Russia - CC 2.0 by Rob (BBM Explorer) - 2011

Mother Russia – CC 2.0 by Rob (BBM Explorer) – 2011

Der Konzern ist wie Mama, …

  1. …sie bringt dich auf die Welt und erzieht dich.
  2. …wenn du in Kontakt mit anderen kommst, merkst du, dass nicht alle Mütter gleich erziehen.
  3. …du versuchst Dinge von deinem besten Freund auch bei dir Zuhause zu machen, aber Mama möchte das nicht.
  4. …während deiner Pupertät ist sie soooo peinlich, aber sie kocht so gut.
  5. …du stehst jetzt auf eigenen Beinen, aber Mama unterstützt dich still und leise im Hintergrund – und du bist dankbar dafür, zeigst es aber nicht immer.
  6. …du verlässt Mama für die bunte Welt da draußen und bist beflügelt, aber irgendwann fängst du an, dich an die unbeschwerte Zeit in Mamas Schoß zu erinnern.
  7. …und wenn du in der bunten Welt nach einer Lebensgefährtin suchst, muss sie doch irgendwie auch einen Teil von Mama haben.

Du weisst es nicht, kannst es nur interpretieren.

Quick-Hints #9

JavaScript Tutorials

Promise Cartoon by Wilf Eddings

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.

StartUp-Doku

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.

#perfmatters

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.