Tag: werkzeuge

201410Nov

Firefox Developer Edition: Webbrowser für Webentwickler

Anlässlich des zehnjährigen Jubiläums von Firefox hat Mozilla heute die Firefox Developer Edition veröffentlicht, die speziell an Webentwickler gerichtet ist und verschiedene Tools zum Entwickeln moderner WebApps bietet. Der neue Browser soll vor allem das plattformübergreifende Arbeiten von einem Gerät aus erleichtern, was durch das Add-On "Valence" (zuvor: Firefox Tools Adapter) erreicht wird. Dabei handelt es sich um eine Erweiterung, welche die Anbindung an Android-, iOS- oder Firefox OS-Geräte (also Tablets und Smartphones) ermöglicht.

Firefox Developer Edition

Die Firefox Developer Edition besteht also in erster Linie aus dem aktuellen Firefox-Build, der WebIDE und dem Valence-Add-On: Damit können lokale WebApps aber auch Remote-Projekte mit den gängigen Firefox-Tools (Web-Konsole, Seiten-Inspektor, Javascript-Debugger, Netzwerkanalyse, Audio-Editor, etc.) untersucht werden. Die WebIDE enthält verschiedene Integrationen von Laufzeitumgebungen wie beispielsweise einem Simulator, einem Remote-Browser, einer Chrome Desktop-Anwendung, einer Firefox OS-App oder einer normalen Website. Für das Debuggen von Android-Apps wird natürlich ein entsprechender USB-Treiber für das angeschlossene Smartphone benötigt und die Android Debug Bridge (ADB) muss das Gerät per adb devices auflisten. Unter Mac OS X gestaltet sich der Prozess für iDevices etwas einfacher. Besteht schließlich eine USB-Verbindung, können die Tabs des Smartphone-Browsers mit dem Inspektor oder der Konsole bearbeitet werden. Schließlich ist noch ein Tool zur schnellen Kommunikation enthalten: Per Klick können Links erzeugt werden, die dann an andere Entwickler weitergeschickt werden können, wodurch eventuelle Probleme direkt im Browser-Chat diskutiert werden können.
Die Developer Edition von Firefox ersetzt damit den Aurora-Build und wird alle 6 Wochen neue Funktionen erhalten.

201403Nov

Mozilla: Neuer Browser von Entwicklern für Entwickler

Der Browserhersteller Mozilla hat schon seit geraumer Zeit eigene F12-Entwicklertools in seinen Browser integriert, die einen Inspektor, einen Debugger, eine Konsole sowie Laufzeit- und Netzwerkanalyse-Tools beinhalten. Bei diesen Werkzeugen soll es laut einem aktuellen Blog-Eintrag jedoch nicht bleiben: Am Montag, dem 10. November wird es soweit sein und Mozilla wird einen neuen Browser vorstellen, der speziell an Webentwickler gerichtet ist. Es geht dabei vor allem um den Entwicklungsprozess, der auch das Testen auf verschiedenen Plattformen und Geräten beinhaltet. Dieser Prozess ist in der Tat sehr zeitaufreibend, wenn eine Seite beispielsweise unter Android 4.0, 4.1, 4.2, 4.3, 4.4 sowie iOS 6, 7 und 8 getestet werden soll und dabei noch verschiedene Smartphones und Tablets mit unterschiedlichen Auflösungen und Pixeldichten ins Spiel kommen.

Firefox Developer Tool - Netzerkmonitor

Viele Informationen gibt der Mozilla-Beitrag nicht preis. Lediglich die Integration der WebIDE sowie dem Firefox Tools Adapter wird genannt. Man darf also gespannt sein, was Mozilla an diesem Montag auf den Markt bringen wird.

201413Okt

AngularJS: Directives und Services für Material Design

Die neuen Material Design-Spezifikationen von Google dürften mittlerweile in aller Munde sein. Dabei handelt es sich um Design-Guidelines, die unter Anderem bei Android 5.0 für die Optik eingesetzt werden. Die Guidelines enthalten etliche Richtlinien und Empfehlungen für die Gestaltung von interaktiven Anwendungen, die auf mehrere Endgeräte ausgelegt sind. Das "Material Design" orientiert sich dabei stark an haptischen Gegebenheiten wie taktilem Feedback.
Mit dem Paper Elements Sampler des Polymer Projects stehen bereits Web-Komponenten bereit, die den Ideen des Material Designs folgen. Nun haben einige Core-Entwickler von AngularJS und Ionic das Ganze auch für AngularJS umgesetzt.

Material Design for AngularJS Apps

Eine Demo-Seite gibt es hier. Es handelt sich in erster Linie um erweiterte Attribute für bestehende DOM-Elemente und Directives/Services. Ein Beispiel für einen Material Design-Button:

  • <md-button noink class="md-button-colored">
  • Button (noInk)
  • </md-button>

Die Directives bestehen aus etlichen Bedienelementen wie Schaltflächen, Listen, Radio-Buttons, Slider, Header, Schalter, Tabs, Toolbars und vielem mehr. Viel Spaß beim Ausprobieren!

201419Sep

Timesheet.js: Skript für zeitbasierte Balkendiagramme

Um vergangene Ereignisse untereinander auf einer Zeitachse, ähnlich wie bei einem Gantt-Diagramm, darzustellen, gibt es verschiedene Möglichkeiten. Für JavaScript etwa könnte das Skript Timesheet.js behilflich sein, das eine derartige Visualisierung durch CSS3 ermöglicht. Die Mini-Bibliothek benötigt kein externes Framework und lässt sich schnell anpassen.

Timesheet.js - JavaScript library for simple HTML5 / CSS3 time sheets

Als Eingabe wird lediglich ein JavaScript-Array benötigt, das die verschiedenen Ereignisse in serialisierter Form beinhaltet. Timesheet.js kümmert sich um die Darstellung, wobei es einige Einschränkungen gibt: Per CSS ist eine feste Breite von 720px vorgegeben und auch ein Scrollen (wie etwa bei Chronoline.js) innerhalb des Bereichs, in dem die Daten dargestellt werden, ist nicht möglich. Hier muss unter Umständen also Hand angelegt werden, doch aufgrund der Einfachheit des Skripts dürfte dies kein Problem darstellen. Alles Weitere findet sich auf GitHub.

201417Sep

Breach: Erweiterbarer Webbrowser auf Node.js-Basis

Mit Node.js und Chromium lassen sich die unterschiedlichsten Anwendungen umsetzen und ein Webbrowser liegt daher auf der Hand: Mit Breach steht nun ein erster moderner Ansatz bereit, der die beiden Projekt verbindet. Der Browser-Code besteht dementsprechend aus JavaScript-Modulen, während die Benutzeroberfläche mit HTML und CSS erzeugt wird. Interessant bei dem Browser-Konzept ist die Tatsache, dass es sich bei den Modulen und Node.js-Module handelt, die in Echtzeit installiert und aktiviert werden können. Auch Änderungen am Modul-Code können per Kontextmenü nachgeladen werden, ohne dass der Browser geschlossen werden muss.

Breach - A browser for the HTML5 era

Der aktuelle Stand von Breach kann sich bereits sehen lassen, auch wenn momentan nur die Kernmodule, wie etwa die Tabs, zu den Hauptmerkmalen zählen. Doch der Ansatz könnte sich in der kommenden Zeit zu einer Alternative für Entwickler mausern, da eigene Features schnell und einfach per npm hinzugefügt werden können. Breach steht aktuell leider nur für Mac OS X und Linux bereit, was sich jedoch ebenfalls ändern könnte. Das Projekt basiert auf der ExoBrowser-Plattform und diese lässt sich auch unter Windows kompilieren.
Wer dann noch nicht genug von Node.js hat, sollte sich Node OS ansehen — ein komplettes Betriebssystem, das auf einem Linux-Kernel und Node.js/npm basiert.

201414Sep

Responsive Test: Online-Tool für responsive Websites

Mit Screenfly oder resizeMyBrowser stehen bereits Online-Tools zum Testen von Website-Größen bereit: Per iframe kann hier eine beliebige URL geladen und die Seite mit verschiedenen Fenstergrößen betrachtet werden. Mit Responsive Test steht nun ein weiterer Vertreter dieser Art zur Verfügung, der auf AngularJS und Bootstrap basiert.

Responsive Test - Test responsive layout, powered by AngularJS and Bootstrap 3

Das Tool bietet vordefinierte Größen von Smartphones und Tablets an, wodurch sich Media Queries und andere responsive Anpassungen testen lassen. Für jede Option wird ein semantischer Link erzeugt, der die unterschiedlichen Parameter des Tools enthält und somit weitergeleitet werden kann. Bei GitHub findet sich der Quellcode des Projekts.

201412Aug

CodeLobster: Vielseitiger Editor für PHP und JavaScript

Das Entwickeln von Web-Anwendungen ist inzwischen zu einem komplexen Prozess geworden, da Projekte sehr umfangreich werden können und es etliche Bibliotheken mit eigener Syntax gibt. Ein einfacher Text-Editor reicht in diesem Fall nicht mehr aus. Wer auf der Suche nach einem kostenlosen Editor für Windows ist, der unter Anderem auch PHP unterstützt und zudem eine Alternative zu Aptana oder NetBeans sucht, könnte einen Blick auf CodeLobster werfen. Hierbei handelt es sich um einen ausgereiften Code-Editor mit den gängigen IDE-Features wie Syntaxhervorhebung, Autovervollständigung oder kontextsensitive Hilfe.

CodeLobster - Vielseitiger Editor für PHP und JavaScript

Die kostenlose Version des Editors ist portabel und kann direkt gestartet werden. Enthalten sind Editor-Funktionen für PHP, JavaScript, CSS und HTML. Sollte die freie Version nicht ausreichen, kann für 39,95 USD die "Lite"-Version genutzt werden, die weitere Funktionalitäten wie SASS, LESS, Code-Snippets, Versionierungssysteme und einen SQL-Manager bietet. Hier findet sich ein Vergleich der verschiedenen Versionen.

201310Dez

Type Rendering Mix: Web-Schriftarten richtig glätten

Individuelle Schriftarten auf einer Website sind in erster Linie etwas Positives, da sie dem angedachten Design gerecht werden und für mehr Harmonie sorgen, wenn die gesamte Typografie entsprechend abgestimmt wurde. Allerdings werden Web-Schriftarten nicht in allen Browsern und Betriebssystemen gleich dargestellt. Ich hatte vor einiger Zeit berichtet, da seit Windows Vista und einer aktivierten Hardwarebeschleunigung das GDI-Rendering durch DirectWrite ersetzt wurde. Unter Mac OS X und iOS kommt das Font-Rendering "Core Text" zum Einsatz, das alle Schriftarten etwas kräftiger darstellt. Unter Android und Linux wiederum werden Texte durch FreeType angezeigt.
Um den verschiedenen Betriebssystemen und Browsern gerecht zu werden, kann das Skript Type Rendering Mix genutzt werden: Hiermit werden 2 CSS-Klassen auf das "html"-Element angewendet, die Aufschluss über das Font-Rendering (Rasterizer und Anti-Aliasing-Methode) geben.

Type Rendering Mix - Apply CSS based on the text rasterizer and antialiasing your browser is using

Wenn in einem Webdesign also eine eigene Schriftart verwendet wird, kann die CSS-Klasse "tr-coretext" beispielsweise so angepasst werden, das hier ein leichterer Schriftschnitt verwendet wird (font-weight). So kann in den unterschiedlichen Systemen ein einheitliches Schriftbild besser gewährleistet werden.