Kategorien
Boilerplates & andere Tools Developer-News JavaScript & jQuery Programmierung

Libraries.io: Neue Suchmaschine für Open-Source-Projekte

Libraries.io ist ein neues Projekt für Webdesigner und Entwickler. Es hilft dir dabei, Bibliotheken, Module und Frameworks aus dem Open-Source-Ozean zu fischen.

Kategorien
Developer-News JavaScript & jQuery Programmierung

Co.cycles, die Suchmaschine für Open-Source-Code

Mensch, wie war das noch mit der Datumsvalidation in JavaScript? Weißt du noch, wie man checkt, ob ein Objekt leer ist? Klingt ziemlich speziell, oder? Und das ist gut so, denn genau diese sehr speziellen Fragestellungen sind es, die im Alltag eines Webdevelopers wesentlich öfter vorkommen als die Frage, welches Framework generell besser ist als jenes. Die neue Suchmaschine Co.cycles ist eine sehr interessante Hilfe für diese Alltagsfragen.

Co.cycles, die Suchmaschine für Open Source-Code

Foren: Entwicklerhilfen ganz klassisch

Ich bin Mitglied in diversen Foren, die sich mit Fragen der Frontend-Entwicklung beschäftigen und ich bin großer Verfechter der Verwendung der Forensuchfunktionen ;-) Auf der Basis des Helfens und Geholfenwerdens habe ich zahllose Probleme, die ich im Rahmen meiner täglichen Arbeit sonst nicht oder nur mit unverhältnismäßig hohem Aufwand hätte lösen können, vom Tisch bekommen. Generell kann man indes sagen, dass es auch in Foren umso schwieriger wird, schnell Hilfe zu bekommen, je konkreter oder spezieller die Fragestellung wird. Auch über die Suchfunktionen gefundene Hilfen müssen teils uminterpretiert werden, um auf den eigenen Problemfall zu passen.

Da ist es gut, dass sich jetzt zu der weiterhin unschätzbaren Hilfe, die über Foreninteraktion zu erhalten ist, eine neue Suchmaschine für frei verfügbaren Code hinzugesellt. Co.cycles heißt die, optisch Google nicht unähnliche, Suchmaschine, die sich anschickt, ein unverzichtbarer Begleiter der Webdeveloper unserer Tage zu werden.

Co.cycles, die Suchmaschine für Open Source-Code

Co.cycles: Entwicklerhilfe auf Steroiden

Co.cycles kann zum jetzigen Zeitpunkt allein bei Fragestellungen zu JavaScript helfen. Dabei sucht sie sowohl generell nach zur Suchanfrage passenden Projekten, wie auch speziell nach passenden Codeschnipseln, Funktionen und so weiter. In Arbeit befinden sich Erweiterungen von Co.cycles für Sprachen wie PHP und Ruby.

Die Verwendung von Co.cycles ist einfach. Sie funktioniert ausschließlich auf der Basis von Freitext-Suchanfragen, ebenso wie das große Vorbild aus Kalifornien. Um den Einstieg zu erleichtern, findest du beim Aufruf von Co.cycles direkt Vorschläge gültiger Suchphrasenformulierungen neben dem Suchschlitz.

Sobald du einen Suchbegriff eingegeben und abgeschickt hast, endet die Ähnlichkeit mit Google abrupt. Die Suchergebnisseite ist weitaus sprechender als man das ansonsten gewohnt ist. Linksseitig angeordnet findest du Projekte, die sich mit deinem Suchbegriff befassen, mittig siehst du genau die gesuchte Funktion in einem kompletten Sourcecode-Beispiel und rechts wird dann erklärt, was, wozu und wie.

Co.cycles, die Suchmaschine für Open Source-Code

Auf diese Weise kommst du schnell in die Gänge, was deinen Workflow bei passgenauen Ergebnissen enorm beschleunigen dürfte. Versuche doch mal diese Suchen:

Sicherlich ist das derzeitige Fehlen von PHP noch ein größeres Manko. Das wird sich jedoch in Kürze ändern, so dass Co.cycles nochmal deutlich an Nutzwert gewinnen wird.

Welches Tool benutzt du bei solchen Fragestellungen?

Kategorien
Design Design-News Developer-News Programmierung

StickyStack, Colofilter, Heisenberg und mehr: 5 interessante Designhelfer

Bei meinen täglichen Tieftauchgängen im Netz der Netze komme ich naturgemäß an unzählig vielen Korallen, Meeresbewohnern, Schwebepartikeln und was sich sonst noch alles dort tummelt vorbei. Ich dachte mir, es könnte dich interessieren, was schlussendlich in meinem virtuellen Schleppnetz hängen bleibt. Da ich sehr selektiv fische, ist der Beifang gering. Diese Designhelfer sind mir ins Netz gegangen.

StickyStack, Colofilter, Heisenberg und mehr: 5 interessante Designhelfer

Tools für Design und Development: Mehr Spreu als Weizen

Die Spreu vom Weizen zu trennen wird immer schwieriger. Jedenfalls erscheint es mir nach fast zehn Jahren Dr. Web so. Vielleicht werde ich einfach nur alt. Aber ist es nicht auch dein Empfinden, dass es immer mehr Tools und Tühlchen in immer größerer Zahl und in immer kürzerer Frequenz gibt? Den Überblick kann man eventuell gerade noch behalten, aber das Nützliche vom Nutzlosen zu trennen oder wenigstens das Interessante vom Langweiligen fällt zunehmend schwerer.

Die folgenden fünf recht frischen Kontributionen aus dem Meer der Design-und Development-Branche finde ich erwähnenswert:

StickyStack.js: OnePager als Kartenstapel

StickyStack von Mike Zarandona ist ein jQuery-Plugin, mit dessen Hilfe du eine Website wie eine Slideshow wirken lässt. Keine Sorge, ich meine nicht den Powerpoint-Style der Neunziger, sondern viel eher den auch bei Parallax-Websites häufig eingesetzten Effekt, dass der reinschrollende Inhalt den vorherigen überlagert – eben als würde man eine Karte über eine andere schieben. Bei StickyStack.js kommt eine neue Karte immer dann ins Bild, wenn die vorherige den oberen Rand des Viewports erreicht hat. Einfach, aber clever.

StickyStack, Colofilter, Heisenberg und mehr: 5 interessante Designhelfer

Demo | Github

Colofilter.css: Farbenfrohe Fotofilter im Duotone-Look

Lucas Bonomi aus Paris beschert uns ein Stylesheet, mit dem sich krasse Farbfilter auf Fotos legen und dynamisch ändern lassen. Dafür verwendet er CSS Filter und den Mixblendmode, womit Nutzer von Microsoft Browsern, dem Opera Mini und Safari außen vor sind. Ein Polyfill ist in Arbeit, bis dahin sehen diese Besucher halt nur ungefilterte Bilder.

StickyStack, Colofilter, Heisenberg und mehr: 5 interessante Designhelfer

Demo | Github

Heisenberg Ipsum: Blindtexte für Fans von Breaking Bad

Immer noch ist das klassische Lorem Ipsum der meistgenutzte Blindtext im Netz. Langweiliger geht es kaum. Da ist es kein Wunder, dass sich etliche Entwickler Alternativen überlegt haben. Eine dieser Alternativen ist Heisenberg Ipsum, ein Blindtext-Generator für Fans von Breaking Bad. Wähle deinen Lieblingscharakter, mach eine Vorgabe zur Länge des Blindtexts und schon erhälst du eine Textpassage, die sich gewaschen hat.

StickyStack, Colofilter, Heisenberg und mehr: 5 interessante Designhelfer

Heisenberg Ipsum

Feature.js: Schnell und sicher Features erkennen lassen

Feature Detection ist der sicherste Weg, Nutzern nur Funktionalität anzudienen, die sie auch wirklich haben und anderenfalls ein Fallback für nicht unterstützte Features einzusetzen. Feature.js leistet recht zuverlässige Dienste und ist dabei nur 1kb schwer. Entwickler Viljami Salminen aus Menlo Park in Kalifornien bietet mit seinem kleinen JavaScript, welches keine weiteren Abhängigkeiten hat, neben der funktionierenden Lösungen auch eine gute Dokumentation mit etlichen Beispielen. Das ist selten heutzutage…

StickyStack, Colofilter, Heisenberg und mehr: 5 interessante Designhelfer

Demo | Github

Codepad: Da werden Sie geholfen

Codepad ist ein neuer Treffpunkt für Entwickler und Designer. Hier kannst du Codeschnipsel teilen und Kommentare dazu anfordern. Vielleicht ist deine Lösung doch nicht die beste. Andere Teilnehmer helfen dir weiter und du ihnen. Codepad ist Geben und Nehmen. Wie früher, zu den guten alten BBS-Zeiten. Codepad befasst sich mit allen gängigen und weniger gängigen (Hallo ColdFusion) Sprachen.

StickyStack, Colofilter, Heisenberg und mehr: 5 interessante Designhelfer

Codepad.co

Kategorien
Developer-News Programmierung

Universeller Code-Editor: Sublime Text ist zurück

Kannst du dich noch an die Glanzzeiten des universellen Code-Editors Sublime Text erinnern? Vor drei bis vier Jahren galt die Software, die es für Windows, Mac OSX und Ubuntu gibt, als nahezu alternativlos und konnte sich vor Lobpreisungen kaum retten. Dann sank ihr Stern und es wurde ganz ruhig um den einstigen Hoffnungsträger. Jetzt scheint Sublime Text der Phönix sein zu wollen, der aus der Asche steigt. Ich bin gespannt.

Universeller Code-Editor: Sublime Text ist zurück

Sublime Text: Aufstieg und Niedergang

Sublime Text war einmal der Lieblings-Editor des Dr. Web-Teams. Unzählige Texte sind unter Verwendung des universellen Code-Editors entstanden. Peter Müller erklärte an dieser Stelle, wie sich Sublime Text mit Markdown nutzen lässt und befand sogar, dass es sich in dieser Kombination um ein Dreamteam handelte. Auch Entwickler Sven Schannak stellte Sublime Text ein gutes Zeugnis aus.

Bis 2013 schien Sublime Text auf dem aufsteigenden Ast zu sein. Dann kam Sand ins Getriebe, als mit der vollständig neuen Version 3 versucht wurde, neue Wege zu gehen. Die wenigen Neuerungen der Version 3 gegenüber der Version 2 waren vielen Nutzern den doch recht happigen Update-Obolus nicht wert. Zudem stieß die Inkompatibilität zu den Erweiterungen für die Version 2 nur auf ganz wenig Verständnis. Immerhin sind es gerade die Erweiterungen, die die Leistungsfähigkeit und den darauf basierenden Erfolg des Editors geschürt haben.

Und so dümpelte Sublime Text 3 mehr oder weniger unbeachtet vor sich hin, während die Version 2 weiterhin die erfolgreichere Variante blieb. Bis heute kann man die Version 2 downloaden und nutzen. Das letzte Update sah diese Version allerdings am 8. Juli 2013, also vor fast drei Jahren. Sublime Text 3 blieb in der Beta stecken und hat diesen Status bis zum heutigen Tage nicht verlassen. Die Update-Frequenz war enttäuschend. Zuletzt erhielt der Editor am 26. März 2015, mithin vor fast einem Jahr ein Update, das man ehrlicherweise eher als Bugfix bezeichnen muss.

Universeller Code-Editor: Sublime Text ist zurück

Sublime Text: Rückkehr eines Totgeglaubten

Gestern dann machte Sublime-Text-Mastermind Jon Skinner mit einem unscheinbaren Blogeintrag von sich reden, obwohl dieser vordergründig bloß ein weiteres Update des Editors verkündigen sollte. Man könnte also sagen, das sei nichts besonderes. Immerhin gab es diese sporadischen Mikro-Updates immer wieder mal.

Dass dieses Mal alles anders sein könnte, lässt sich jedoch zwei weiteren Informationsschnipseln aus dem genannten Blogeintrag entnehmen. Zum einen begrüßt Skinner darin ein weiteres Team-Mitglied und zum anderen eröffnet er ein neues Forum. Beides spricht nicht für die Fortführung der bisher eher als  lethargisch zu bezeichnenden Innovationsgeschwindigkeit.

Inhaltlich kann das neue Update mit einem deutlich verbesserten Syntax-Highlighting aufwarten. Skinner scheint sich auf die vormaligen Stärken zu besinnen. Hoffen wir gemeinsam, dass es sich nicht bloß um ein Strohfeuer handelt. Ich würde mich freuen, sollte es Sublime Text gelingen, zu alter Stärke zurück zu kehren.

Hier geht es zum Download, der nach wie vor für die Plattformen Windows, Mac OSX und Ubuntu bei identischer Funktionalität geboten ist.

Kategorien
Design Design-News Developer-News HTML/CSS Programmierung

CSS Custom Properties: So nutzt du Variablen in Chrome 49

Chrome unterstützt ab Version 49 CSS Variablen in der Form der CSS Custom Properties. Damit wird ein zentrales Element rationeller Programmierung ohne weitere Zusätze im Browser Wirklichkeit. Der Einsatz ist recht einfach.

CSS Custom Properties: So nutzt du Variablen in Chrome 49

Variablen: zentrales Element strukturierter Programmierung

Variablen sind aus der professionellen Programmierung nicht weg zu denken. Man stelle sich vor, man müsste die Werte, die als Variablen an zentraler Stelle verwaltet werden, tatsächlich an jedem Verwendungsort neu definieren. Selbst mit professionellen Entwicklungswerkzeugen würde das Suchen und Ersetzen im Falle von Änderungsbedarfen reichlich aufwändig werden. Mit CSS war jedoch genau dieses Vorgehen bislang unumgänglich.

Erst mit Chrome 49 unterstützt Googles Browser Variablen in der Form der CSS Custom Properties auch für die Erstellung von Stylesheets. Und das ist erwartungsgemäß sehr praktisch. Man wird sich nicht mehr davon trennen wollen, wenn man sich erstmal dran gewöhnt hat.

CSS Custom Properties: Das (und mehr) kannst du mit CSS Variablen machen

CSS Custom Properties sind praktisch für viele Zwecke. Auf Anhieb verständlich, und deshalb verwende ich das Beispiel hier auch, ist die seitenweite Änderung von Farbwerten. CSS an sich ist ja schon eine Erleichterung in dieser Hinsicht. Wenn ich mich an meine ersten Designs in den Neunzigern zurück erinnere, wird mir jetzt noch flau. Ohne CSS setzte ich Farben an jedem HTML-Element neu. Wenn der Kunde das Farbset änderte, war ich teils tagelang in Aktion, um händisch die ganzen Werte zu suchen, zu finden und zu ersetzen.

Aber auch mit CSS kann eine Änderung komplexerer Farbschemen bei vielen Definitionen schnell unüberschaubar werden. Hier helfen CSS Variablen massiv. Für den visuellen Lesertypen binde ich einfach an dieser Stelle mal das GIF ein, das Google selber im Chromium-Blog zur Ankündigung der neuen Features verwendet hat:

css-custom-properties-3

Ein Beispielcode kann etwa so aussehen:

:root {
  --main-color: #06c;
}

#foo h1 {
  color: var(--main-color);
}

Erfahrene Entwickler erkennen sofort das Prinzip. --main-color ist hier die frei definierte Variable, die Custom Property. Custom Properties beginnen stets mit zwei Bindestrichen.

Neben fixen Werten können auch Berechnungen und Bedingungen als benutzerdefinierte Eigenschaften angelegt werden. So kannst du beispielsweise in responsiven Designs auf Änderungen der Bildschirmauflösung reagieren.

Ich bin begeistert. Chrome 49 hat noch mehr neues zu bieten. Die CSS Variablen sind jedoch klar mein Favorit.

Kategorien
Developer-News JavaScript & jQuery Programmierung

Loud Links: JavaScript bringt deine Website zum Klingen

Das kleine JavaScript Loud Links bringt deine Website zum Klingen, indem es per HTML5-Audioelement Links und andere Elemente entweder bei Klick oder on Hover hörbar macht. Dazu benötigst du lediglich MP3 und OGG. Die Lösung funktioniert in allen gängigen Browsern.

Loud Links: JavaScript bringt deine Website zum Klingen

Sound auf der Website: Geschmackssache

Natürlich, natürlich. Du brauchst es nicht zu sagen. Sound auf der Website ist ja sowas von Neunziger und schon da nervte es. Ich kenne diese Meinung und sie hat ja auch ihre Berechtigung. Dennoch gibt es durchaus ebenso berechtigte Anwendungsfälle für klingende Websites. Hier bei Dr. Web haben wir uns erst kürzlich ganz grundsätzlich mit der Thematik befasst.

Loud Links ist ein kleines JavaScript aus der digitalen Feder des Rotterdamer Designers und UX-Developers Mahdi Al-Farra. Mahdi begeht regelmäßig etwas, das er Weekend Projects nennt, und Loud Links ist einer dieser durchaus interessanten Schnellschüsse, die dabei entstehen.

Loud Links: JavaScript bringt deine Website zum Klingen

Um es gleich vorweg zu sagen, Loud Links will nicht deine UI vertonen, sondern ist lediglich dazu geschaffen worden, Sounds für Interaktionen zu setzen. Genau genommen kann Loud Links nur zwei verschiedene Zustände vertonen. Du kannst Loud Links zwar grundsätzlich jedem Element auf deiner Website zuordnen, klingen werden die so behandelten Elemente aber nur entweder beim Klicken oder on Hover, also beim Darüberfahren mit der Maus.

Loud Links: JavaScript bringt deine Website zum Klingen

Die JavaScript-Bibliothek erstellt für das jeweils ausgezeichnete Element ein HTML5-Audio und verwendet MP3/Ogg-Dateien, um einen entsprechenden Sound abzuspielen. Die Verwendung ist absolut einfach, wenn man über entsprechende Soundschnipsel verfügt. Diese allerdings finden sich in den Weiten des Netzes in rauen Mengen.

Loud Links: So gehts

Um Loud Links zu verwenden legst du im Stammverzeichnis deiner Website einen Ordner an, den du sounds nennst. Innerhalb dieses Ordners erstellst du zwei weitere Ordner namens mp3 und ogg.

Nachdem du das JavaScript auf gewohnte Weise in dein HTML-Dokument integriert hast, zeichnest du diejenigen Links oder andere Elemente, die du vertonen möchtest, entweder mit der Klasse loud-link-hover oder loud-link-click aus. Über das HTML5-Data-Attribut fügst du noch den konkreten Sound hinzu, wobei du dessen Dateierweiterung nicht angibst. Also statt klang.mp3 gibst du lediglich klang ein.

Ich gebe dir zwei Beispiele:

oder

Das war es schon. Von nun an gibt deine Website bei von dir gewählten Interaktionen hörbare Rückmeldungen.

Loud Links steht auf Github zum kostenlosen Download bereit. Leider hat Mahdi bislang keine konkrete Lizenz angegeben, so dass ich nicht mit Sicherheit sagen kann, ob du Loud Links auch kommerziell verwenden darfst. Es würde mich indes überraschen, wenn es tatsächlich nicht so wäre. Sicherheitshalber frag einfach Mahdi im konkreten Fall danach.