Silbentrennung per Javascript
Wer nicht erst auf den Firefox 6 warten will, um automatische Silbentrennung zu bestaunen, der kann jetzt schon auf hyphenator zurückgreifen. Das nette Javascript Tool hab ich gerade gefunden, unterstützt viele Sprachen und ist einfach zu bedienen.
MacBook (Pro) SSD HDD Adapter Kit
Die Jungs von yeebase (t3n) bieten über hardwrk.com ein sehr cooles SSD HDD Adapter Kit an. Das Ganze kostet 79€ ohne SSD Platte natürlich. Wenn man die Einbauanleitung überfliegt, merkt man schnell, dass es nicht zu aufwendig ist. Die alte Festplatte wird durch eine SSD ersetzt. Und deine alte Platte ersetzt wiederum, über den Adapter, dein DVD-Laufwerk. Über das Externe DVD-USB-Gehäuse kannst du dein DVD-Laufwerk weiterhin “gelegentlich” nutzen.
Hardwrk hat auch einige SSDs mit dem Kit getestet und listet hier ein paar Favoriten auf. Die Reviews und mehr als 500 Facebook Likes ;) versprechen gute Qualität. Nebenbei find ich das Design der Seite auch sehr gelungen.
Ist eine Überlegung Wert für ca 200€ sein MacBook etwas mehr Speed zu verschaffen.
Formel1 Datenbank: MongoDB
Immer häufiger hört man NoSQL, doch was heißt das Eigentlich? NoSQL steht für “not only SQL”. NoSQL ist eine Art von Datenbank, die im Gegenteil zu relationalen Datenbanken nicht mit festen Tabellen und Joins arbeitet. NoSQL ist eine Dokumentenorientierte Datenbank. Datenformate sind zum Beispiel JSON-Objekte oder XML-Dokumente, wobei meistens JSON bevorzugt wird.
Dokumentenorientierte Datenbanken sind eigentlich keine neue Erfindung, aber durch das social media Zeitalter kommen relationale Datenbanken an ihre Grenzen. NoSQL ist einfach zu skalieren und kommt mit vielen Lese- und Schreibanfragen ziemlich schnell zurecht.
Die NoSQL-Implementierung, MongoDB ist in C++ geschrieben und wird aktuell immer mehr in großen Projekten eingesetzt, wie auch von foursquare. Die Ressourcenverteilung unter C++ ist viel effizienter, warum auch die Facebook Developer “Hip-Hop for PHP” entwickelt haben.
Um einen Einblick in MongoDB zu bekommen, findest du hier eine Anleitung von David Winter, wie du die Datenbank auf deinen Mac installieren kannst.
Wer keinen eigenen Server hat oder keinen der MongoDB installieren läßt, kann auf den Service von mongoHQ zurückgreifen. Eine 16MB Datenbank ist sogar kostenlos.
Ich bin mal gespannt, ob Altly (Facebook Alternative) auch auf MongoDB bauen wird.
Weitere Links:
Mongo PHP Manual
MongoHub (Mac GUI)
Pixelmator: Photoshop alternative
Das immer beliebtere Bildbearbeitungsprogamm Pixelmator (Platz 9, Appstore – Umsatzstärkste) ist eine echte Alternative zum teuren Photoshop. Die aktuelle Version 1.6.5 gibt es gerade für 23,99Euro. Die bald erscheinende Version 2 wird angeblich doppelt so teuer sein. Ein Preview zur zweiten Version gibt es auch schon. Wer aber jetzt kauft bekommt ein Update auf die neue Version, die im Sommer erscheinen wird, kostenlos.
Ich finde das Programm super. Die letzte Power-Funktion “Content-Aware” von Adobe hat Pixelmator jetzt auch. Ist hab auch schon mit GIMP gearbeitet aber ich finde Pixelmator um einige Ecken besser. Demovesion gibt es hier.
Multicolumn layout
Quelle: YAML Subtemplates
<!-- Subtemplate: 2 Spalten mit 50/50 Teilung -->
<div class="subcolumns">
<div class="c50l">
<div class="subcl">
<!-- Inhalt linker Block -->
...
</div>
</div>
<div class="c50r">
<div class="subcr">
<!-- Inhalt rechter Block -->
...
</div>
</div>
</div>.c20l, .c25l, .c33l, .c40l, .c38l, .c50l,
.c60l, .c62l, .c66l, .c75l, .c80l {float: left; }
.c20r, .c25r, .c33r, .c40r, .c38r, .c50r,
.c60r, .c66r, .c62r, .c75r, .c80r {float: right; margin-left: -5px; }
.c20l, .c20r { width: 20%; }
.c40l, .c40r { width: 40%; }
.c60l, .c60r { width: 60%; }
.c80l, .c80r { width: 80%; }
.c25l, .c25r { width: 25%; }
.c33l, .c33r { width: 33.333%; }
.c50l, .c50r { width: 50%; }
.c66l, .c66r { width: 66.666%; }
.c75l, .c75r { width: 75%; }
.c38l, .c38r { width: 38.2%; }
.c62l, .c62r { width: 61.8%; }
/* avoid growing widths */
* <a href="http://www.tfriesen.de/tag/html">html</a> .subc,
* <a href="http://www.tfriesen.de/tag/html">html</a> .subcl,
* html .subcr { word-wrap:break-word; o\verflow:hidden; }
Automatische Seitenaktualisierung
Die letzten Tage habe ich an einem Tool gearbeitet, dass eine HTML-Seite automatisch aktualisiert, wenn sich der HTML oder CSS Code ändert. Natürlich kann man einfach ein meta-refresh einbauen und die Seite wird zum Beispiel jede 2 Sekunden neu geladen. Das ist aber sehr unschön!
Meine Lösung bestand aus setInterval (jede Sekunde) und einem Ajax Request an eine PHP Datei, die Timestamp zurückgibt. Der Timestamp wird also jede Sekunde verglichen und wenn die CSS-Datei gespeichert wird, wird die Seite neu geladen.
Es funktionierte zwar aber auf der Suche nach einem bestehenden Projekt bin ich auf ‘f5-autorefresh‘ gestoßen.
Ich kann nur sagen “Ich liebe dieses jQuery Plugin!” – So erspart man sich den Weg mit der Maus und einen Klick ;)
Easy to use:
<script type="text/javascript" src="jquery.f5-0.1.js"></script>
<script type="text/javascript">
$(function(){ $.f5() });
</script>
passG » your password generator
Simpler Passwort Generator. Ist zwar nix neues aber ich fand andere häßlich und unpraktisch. Über die Buttons und dem Slider können die Variationen eingestellt werden. Ich hoffe er euch gefällt euch ;)
HTML Fehlersuche mit Hilfe von CSS
Luke Williams hat einen wirklich schönen HTML-Debugger geschaffen. Der HTML Detektiv Holmes nutzt CSS3, um fehlerhafte Tags farblich zu markieren.
So einfach funktioniert das Ganze:
1. Zieht euch das holmes.css – stylesheet
2. bindet es auf eurer Seite ein:
<link rel="stylesheet" href="holmes.css" type="text/css" />
3. und fügt dem Body-Tag die Klasse ‘holmes-debug’ hinzu
<body class="holmes-debug">4. That’s it!
Bildergalerie für das iPad & Co.
Schluss mit nervigen Galerien auf dem iPhone. Mit PhotoSwipe ist es super leicht, schöne und touchfähige Bildergalerien zu erstellen. PhotoSwipe basiert auf jQueryMobile und unterstützt das iPhone, iPad, Android und Blackberry 6.
Ladezeiten verringern
Alles muss schneller werden! Nach diesem Prinzip müssen sich natürlich auch die Programmierer richten, ohne das Design aus den Augen zu verlieren. Denn das Web wird bunter und durch zahlreiche Plugins und ewig lange CSS Zeilen kann schnell die Geschwindigkeit auf der Strecke bleiben. Gerade Online-Shops leiden häufig an viel zu großen Bildern und zu vielen JS Dateien. Zum optimieren ist die Firefox Extension YSlow sehr hilfreich.
Es gibt ja schon einige Seiten die CSS und JS komprimieren, aber zbugs.com bietet dazu noch ein kostenlosen CDN (Content Delivery Network) Service. Join now it’s free ;)