MobileESP … Desktop, Handy oder Tablet .. das ist hier die Frage…
In Zeiten von “responsive webdesign” wird es immer wichtiger das Device auf der anderen Seite der Leitung möglichst genau zu erkennen. Ein gern genommener Weg um dies zu erreichen ist das auswerten von User-Agent Strings die der Browser des Clients an den Server übermitteln. Leider ist es oft Mühsam die richtigen Strings zu finden die dann genau nur die richtigen Devices filtert und nicht doch den einen oder anderen Desktop Rechner fälschlicherweise als Mobile Device ausgeben.
MobileESP ist ein Project das genau dafür versucht eine Lösung zu schaffen. Für PHP, ASP, Ruby und Java gibt es Klassen die versuchen das Mobile Device möglich genau zu identifizieren.
Und das beste, die Klassen werden weitergepflegt so das neue Devices (von denen es ja mehr als genug gibt) auch immer wieder nachgetragen werden.
Quelle: blog.mobileesp.com
Documentation für Styles
Für viele Programmierer mit das schlimmste und nervigste ist die Dokumentation. Wer sich aber schon mal durch fremden undokumentierten Code gequält hat weiss, das Dokumentation etwas sinnvolles sein kann. In den Programmiersprachen gibt es mittlerweile die verschiedensten Tools um automatisch Dokumentation aus dem Sourcecode zu erstellen. Dazu werden meist bestimmte Tags in den Commentaren zu Funktionen und Klassen verwendet. Selbst wenn es nur ein paar Sätze sind, die denen, die nach einem kommen das Leben leichter machen.
Knyle Style Sheets (KSS) versucht so etwas jetzt auch für CSS und Style Guides.
Wie bei den meisten *Doc Tools wird die Docu aus den Comments des Sources extrahiert.
Das schaut das z.B so aus:
/*
A button suitable for giving stars to someone.
:hover - Subtle hover highlight.
.stars-given - A highlight indicating you've already given a star.
.stars-given:hover - Subtle hover highlight on top of stars-given styling.
.disabled - Dims the button to indicate it cannot be used.
Styleguide 2.1.3.
*/
a.button.star{
...
}
a.button.star.stars-given{
...
}
a.button.star.disabled{
...
}
Daraus generiert KSS dann einen hübschen Styleguide in dem man dann auch noch die verschiedenen Style Pattern anschauen kann.
Quelle: Knyle Style Sheets
KSS bei gitHub
Quelle: warpspire.com
Facedetection mit Javascript (jQuery)
Kleines Script das die lustigen weissen Rahmen um erkannte Gesichter legt.
Quelle: facedetection.jaysalvat.com
InstaCSS .. instant CSS Dokumentation
Darauf hab ich lange gewartet. Da ich immer ein wenig mit dem CSS Syntax auf Kriegsfuß stehe ist das ideal für mich.
Einfach den gewünschten CSS Tag anfangen zu tippen und schon tauchen die passenden Ergebnisse auf. (Inclusive -moz- -webit- -o- etc. )
Quelle: instacss.com
PDF.js PDFs im Browser nur mit Javascript anzeigen
Nette kleine Library mit deren Hilfe man PDFs ohne ein Fremdprogramm im Browser anzeigen lassen kann.
Quelle: github.com
Nettes Video von Paul Irish zu den Chrome Dev Tools. Gerade wenn man viel in Javascript werkelt ist die Console ein muss.
Quelle: youtube.com
ellipsis … Texte kürzen in CSS
In CSS3 gibt es einen kleinen aber nicht unbedeutenden Tag “ellipsis” mit dessen Hilfe man schnell und einfach innerhalb des CSS Texte kürzen kann.
Vorteil: Kein lästiges kürzen nach Buchstaben im Backend oder in Javascript (was meist eh nicht funktioniert).
Nachteil: Nicht von allen Browser unterstützt und es wird nicht nach einem Wort abgeschnitten sondern auch mitten drinnen.
Usage:
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p.block {
width: 300px;
}
Ausführlichen Artikel zum Thema Ellipsis in Englisch gibts hier
Quelle: mattsnider.com
JS Testing Framework von Google
Unit Testing ist wichtig und sinnvoll. Im backend unter Java, PHP etc schon lange standard ist es bei Sprachen wie Javascript eher schwierig. Aber gerade im Hinblick darauf das immer mehr und größere Projekte mit Javascript gemacht werden ein sinnvoller Schritt.
Von Google gibt es jetz ein JS Testing Framework das das Testen von Javascript in der Google eigenen V8-Engine erleichtern soll.
Quelle: code.google.com
CSS Background Images in Chrome Extensions
Kurze Problemlösung für ein etwas ausgefallenes Problem. Eine Chrome Extension injected auf einer Seite Javascript und CSS und möchte gerne Bilder laden die aber nicht auf einem Server liegen.
Da das includierte CSS nicht weiß wo die Bilder liegen und relativ für den Browser relativ zur aktuellen Seite (und nicht relativ zur Extension wie z.B bei der config.html) bedeutet stand ich kurzzeitig vor einem Problem.
Die Lösung war dann denkbar Einfach. Die Bilder einfach Base64 encodieren und dann ins CSS einfügen.
aus einem
background-image: url(images/mylittleimage.png)
wird dann ein
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAGQCAYAAABvWArbAAAAP0lEQVQ4je3PMQrAMABC0a/3v2zX0mCXNkOgc6C4PARd5DqPGKCU8luS8SbAQhiCQRgJE56kZTfbbP9RSvnkBsWcEAZRWcgqAAAAAElFTkSuQmCC);
Eine Webseite auf der man schnell die Bilder passend encodieren kann gibts natürlich auch.
Prerendering Pages in Chrome
Google hat vor einiger Zeit in seinen Browser Chrome ein Freature eingebaut das sich “Instant Pages” nennt. Ziel ist es, Suchergebniss-URLs schon zu laden bevor der User überhaupt darauf klickt.
Als Webmaster und Developer stellt man sich die Frage: “Kann ich sowas auch?”
Antwort: Klar! z.B nützlich z.B bei Artikeln oder Galerien wenn man die nächste Seite schon mal laden will.
Wie? Ganz einfach einen Meta-Tag in die Seite einbauen:
<link rel="prefetch" href="/nextpage.html">
oder im Header der Seite:
Link: </nextpage.html>; rel=prefetch
Soweit so gut, allerdings ergeben sich durch das voreilige Laden auch Probleme. Das man zum Beispiel nicht weiß ob die Seite auch angeschaut wurde oder wann die Scripte auf der Seite überhaupt loslaufen sollen.
Auch hieran hat Google gedacht und die Page Visibility API eingebaut. Damit kann man dann relativ einfach den aktuellen “Sichbarkeitsstatus” der Seite abfragen.
function handleVisibilityChange() {
if (document.webkitHidden) {
pausePageJavascript();
}
else {
countVisitor();
startPageJavascript();
}
}
document.addEventListener("webkitvisibilitychange", handleVisibilityChange, false);
Quelle: igvita.com
