Tag: html-css

201628Jan

Nativefier: Native Electron-Apps per Kommandozeile

Ich hatte bereits über ein Tutorial sowie UI-Komponenten für das Chromium-Framework Electron berichtet. Damit lassen sich native Desktop-Anwendungen für Windows, Mac OS X und Linux auf HTML- und JavaScript-Basis erstellen. Wer es besonders einfach möchte, kann jetzt ein Node.js-Package namens Nativefier verwenden. Damit lassen sich mit einem Befehl per Kommandozeile Electron-Apps aus Web-URLs erzeugen.

Nativefier - Wrap any web page natively without even thinking, across Windows, OSX and Linux

Nativefier lädt das aktuelle Electron-Paket herunter und erzeugt die notwendigen Dateien, je nach Plattform. Um beispielsweise Google Maps in eine Electron-App zu packen, ist lediglich folgender Befehl nötig:

  • $ nativefier maps.google.com

Im "resources"-Verzeichnis befindet sich neben den spezifischen JavaScript-Dateien eine generierte nativefier.json, in der die Einstellungen abgelegt sind. Hier sind verschiedene Optionen für die App möglich, wie etwa die Fenstergröße oder die Einstellung des Hauptmenüs. Auf der GitHub-Seite finden sich gesonderte Anleitungen für die verschiedenen Betriebssysteme, um eine komplette Anwendung samt Icon zu erstellen.

201622Jan

CoreSheet: Responsives Sass/CSS3-Framework

Für die Websites meiner Open Source-Projekte habe ich bisher eine CSS-Codebasis sowie ein entsprechendes HTML-Template eingesetzt. Da ich den CSS-Code stetig erweitert habe, ist daraus schließlich ein eigenes Framework entstanden. Es hat eine eigene Website erhalten und steht ab sofort bei GitHub, NPM und Bower zur Verfügung: CoreSheet stellt ein responsives Sass/CSS3-Framework dar, das ein prozentuales Grid-System sowie verschiedene Komponenten enthält. Dazu zählen gestaltete Formulare, Tabellen, Navigationsmenüs, Schaltflächen sowie ein Sticky Footer.

CoreSheet - Responsive Sass/CSS3 framework including a grid system

CoreSheet an sich ist kompakt und beinhaltet nur rudimentäre CSS-Resets und -Normalisierungen. Das primäre Layout setzt sich aus einem horizontal zentrierten Container und den Spalten des Grid-Systems bzw. Rasters zusammen. Das Grid-System ist wie alle anderen Komponenten konfigurierbar, so dass die Anzahl der Spalten und die Breite der Stege eingestellt werden können. Es gibt einen zentralen Breakpoint bei 767px, bei dem alle Elemente umbrechen und auf die volle Breite des Fensters gestreckt werden. Mit den bestehenden Konzepten und Elementen von CoreSheet können direkt responsive Seiten-Layouts erstellt werden. Die Grundidee besteht in einem minimalistischen Framework, das durch eigene Stile erweitert und so auf das Erscheinungsbild (Corporate Design) des eigenen Projekts zugeschnitten wird.
Es gibt zudem Themes, die als Vorlage genutzt werden können. Die Kompilierung der SCSS-Dateien erfolgt durch Gulp. Durch die beiliegende gulpfile.js werden die Sass-Dateien von CoreSheet (Framework, Konfiguration und Theme) eingelesen und die finale CSS-Datei inklusive der minifizierten Variante werden erzeugt. Ein Watcher für die Echtzeit-Aktualisierung ist ebenfalls enthalten.

201511Dez

Adobe: Aus Flash Professional wird Animate CC

Wie kürzlich im Adobe Flash Professional Team-Blog zu lesen war, gibt es eine Umstrukturierung bezüglich Adobes Flash: Die Software "Flash Professional" wird es ab 2016 als solche nicht mehr geben und in "Adobe Animate CC" umbenannt werden. Mit der nächsten Version, die Anfang 2016 erscheint, tritt die Änderung also in Kraft. Das neue Animate CC wird mit einem Update über die Creative Cloud veröffentlicht werden und wird neben Flash-Inhalten auch HTML5-Animationen ausgeben können.

Adobe reagiert damit auf den HTML5-/CSS3-/WebGL-Trend, da Flash-Animationen durch diese Technologien weitestgehend abgelöst werden können. Mit HTML5-Canvas- und SVG-Elementen lassen sich ähnliche Resultate erzielen und mittlerweile gibt es schon eine große Anzahl an Frameworks, die viele Aufgaben übernehmen und dabei sogar eine API bieten, die an Flash/ActionScript 3 angelehnt ist. Die Umbenennung in Animate CC betrifft laut dem Blog-Eintrag nur die Authoring-Software, der Flash-Player ist also davon erst einmal nicht betroffen.

Tags: , ,
201522Nov

PhotonKit: UI-Komponenten für Electron-Apps

Vor ein paar Wochen berichtete ich über ein Tutorial für Electron/AngularJS. Wer mit dem JavaScript-Framework für plattformübergreifende Desktop-Anwendungen experimentieren möchte, kann mit der Anleitung beginnen. Wer zudem fertige HTML/CSS-Bedienelemente für Electron sucht, sollte einen Blick auf PhotonKit werfen.

PhotonKit - The fastest way to build beautiful Electron apps using simple HTML and CSS

Dabei handelt es sich um eine Sammlung verschiedener Komponenten, die für eine Desktop-App erforderlich sein können. Dazu zählen Header/Footer, Navigationen, Buttons, Tabs, Listen, Tabellen sowie eine Icon-Schriftart. PhotonKit könnte also auch als "Bootstrap für Electron" verstanden werden. Das Projekt steht bei GitHub bereit und die CSS-Komponenten liegen im SASS-Format vor.

201524Okt

CSS: Refresher Notes als modernes Kompendium

CSS ist zweifelsohne eine Design-Syntax, die immer wieder durch ihre Robustheit und Vielfältigkeit überzeugt. Mittlerweile finden die kaskadierenden Stylesheets nicht nur im Web-Bereich Verwendung, sondern verstärkt auch in mobilen Apps oder gar Desktop-Anwendungen. Dennoch stellt CSS nach wie vor eine Herausforderung dar, da komplexe Layouts auch komplexe Regeln erfordern. Und gerade responsive oder adaptive Designs verlangen Webdesignern Einiges an Know-How ab.
Zum Auffrischen, aber auch zum Nachschlagen hat der Entwickler Vasa aus San Francisco diesbezüglich die CSS Refresher Notes bei GitHub angelegt.

CSS Refresher Notes - a quick refresher of CSS concepts compiled from various articles online

Dabei handelt es sich um eine Art CSS-Kompendium, das Informationen aus verschiedenen Online-Quellen enthält. Behandelt werden die Themen Positioning, Display, Floats, CSS-Selektoren, Effizienz von Selektoren, Repaints und Reflows, CSS3-Properties, CSS3-Media Queries, responsives Webdesign, CSS3-Transitions, CSS-Animationen, SVG, CSS-Sprites und vertikale Ausrichtung. Für angehende und bestehende CSS-Experten sind die Refresher Notes in jedem Fall ein Platz in den Bookmarks wert.

201522Sep

Webentwicklung: Statistiken der Frontend-Tools in 2015

Wer als Webentwickler tätig ist, sollte stets auf dem neuesten Stand sein, was Web-Technologien und künftige Standards angeht. Tatsache ist, dass die Browserhersteller, Konsortien und auch unabhängige Entwickler ständig neue Möglichkeiten in Form von Tools oder Funktionen veröffentlichen, mit denen sich Webanwendungen oder mobile Apps umsetzen lassen.
Der Entwickler Ashley Nolan hat einmal die Tools von unabhängigen Entwicklern unter die Lupe genommen eine kleine Umfrage gestartet, in der es um die Frontend-Tools in 2015 geht. Insgesamt haben über 2000 Webentwickler an der Umfrage teilgenommen, so dass einigermaßen repräsentative Ergebnisse zustande kommen.

The State of Front-End Tooling – 2015

Die Ergebnisse der Umfrage hat er in diesem Artikel veröffentlicht. Bei der Umfrage ging es um verschiedene Tools: CSS-Präprozessoren (LESS, SASS, etc.), Task-Runner (Gulp, Grunt, NPM, usw.), JavaScript-Bibliotheken und -Frameworks, Module-Bundler (RequireJS, Webpack, JSPM, etc.), Testing-Frameworks (Jasmine, Mocha, QUnit, usw.) und sonstige Tools wie Yeoman und Bower. Kurz zusammengefasst lässt sich sagen, dass die Mehrheit auf SASS und jQuery setzt, Gulp mittlerweile Grunt verdrängt hat, AngularJS in vielen Projekten eingesetzt wird und Mocha/Jasmine für Unit-Tests eingesetzt werden.

201515Sep

PostCSS: CSS-Preprocessor für Node.js-Build-Tools

Die moderne Entwicklung von Stylesheets findet heutzutage kaum noch in reinem CSS statt: Dank CSS-Präprozessoren wie SASS, LESS oder Stylus können Variablen, Funktionen (Mixins) und echte Verschachtelungen genutzt werden. Die Tools basieren auf systemspezifischen Bibliotheken und erzeugen den finalen CSS-Code mittels Ruby oder Node.js. Wer das ganze in sein bestehendes Frontend-Tooling integrieren möchte (beispielsweise in Grunt oder Gulp), sollte sich PostCSS ansehen.

PostCSS - Transforming styles with JS plugins

Dabei handelt es sich um ein Node.js-Modul, das laut den Entwicklern 2x schneller arbeitet als libsass, die eigentliche SASS-C++-Bibliothek. PostCSS macht zudem Gebrauch von dem CSS-Transpiler cssnext und ermöglicht so zukunftssicheres CSS. Die Integration des entsprechenden Gulp-Tasks könnte beispielweise so aussehen:

  • gulp.task('css', function () {
  • var postcss = require('gulp-postcss');
  • return gulp.src('src/**/*.css')
  • .pipe( postcss([ require('cssnext')(), require('cssnano')() ]) )
  • .pipe( gulp.dest('build/') );
  • });

Viel Spaß beim Ausprobieren!

201528Jul

JavaScript: Toast-Benachrichtigungen im Web verwenden

Benutzer von Android-Geräten werden sie kennen: Bei Toast-Benachrichtigungen handelt es sich um eine Nachricht, die für eine bestimmte Zeit am unteren Bildschirmrand angezeigt wird und nach einer gewissen Zeit ausgeblendet wird. In einer Webanwendung könnte diese Funktionalität für diverse Zwecke eingesetzt werden — so könnte beispielsweise der Benutzer darüber informiert werden, ob seine Formulardaten erfolgreich gespeichert wurden.
Wer eine Nachbildung der Android-Toast-Nachrichten für HTML sucht, kann einen Blick auf ToastIt.js werfen. Dabei handelt es sich um ein kompaktes Skript (alternativ NPM-Modul), das die entsprechende Benachrichtigung in den Browser bringt.

ToastIt.js - html toast messages

Die Demo zeigt das Skript in Aktion. Die Verwendung ist denkbar einfach:

  • toastit(text, timeout, options)

Bei den Optionen können Attribute gesetzt werden, die anschließend als CSS-Eigenschaft auf die ToastIt-Benachrichtigung übertragen werden.