Category Archives: /etc

Quick-Hints #8

Statistik Besucher Wochenrekord

Statistik Besucher Wochenrekord

Lange hab’ ich nichts mehr veröffentlicht, komme leider nicht wirklich dazu. Trotzdem konnte ich letzte Woche einen neuen Visits-Wochenrekord für ben.nyben.net aufstellen. Damit es nicht langsam aussieht, als sei mein Blog tot, hier ein neuer, kleiner Quick-Hints Eintrag.

Ein extrem nützliches, aber noch nicht so beachtetes Objekt in JavaScript ist der MutationObserver. Dieser Nachfolger der MutationEvents bietet weniger Fehlerpotential und findet bereits jetzt eine breite Unterstützung seitens der Browser. Sehr nützlich bei der Implementierung eines eigenes Frameworks, bietet dir der MutationObserver die Möglichkeit, auf DOM-Änderungen zu reagieren. Im Opera (ja, der Browser) Blog ist ein sehr nettes Tutorial zu finden. Weiterführend dazu, hat Addy Osmani auf der JSConfEU13 einen sehr sehenswerten Talk gehalten. In diesem geht es um Object.observe aus der ECMAScript Harmony Spec. Object.observe bietet quasi den Mitspieler der MutationObserver. Hiermit können Änderungen an JS-Objekten (zum Beispiel) im DOM wiedergespiegelt werden: Everthing you want to know about Object.observe

Hier ein Post, der sich als sehr nützlich erweisen kann, wenn man mal wieder das Aussehen der Scrollbars im Browser anpassen soll… Warum auch immer man das möchte.

Ein kurzer Ausflug in die Welt des Marketings: Wie schaffe ich es, vier Millionen Leute für meine Sache zu begeistern.

Promises sind extrem schön um in JavaScript einen asynchronen Aufruf / Ablauf zu entwickeln. Für Promises gibt es in JS viele Implementierungen, unter anderem von jQuery. Ein schönes CheatSheet, basierend auf der promises/A+ Implementierung, kann dabei sicher gut unterstützen. Eine nette (englische) Beschreibung von Promises findet sich im Blog von parse.com.

Auf den Seiten der FH Wedel findest du eine nette Kurzbeschreibung zu den wichtigsten Technologien, die bei nodejs zum Einsatz kommen. Nichts Weltbewegendes, aber falls du noch nicht weisst, was hinter non-blocking I/O steckt, findest du dort eine kompakte, gute Antwort.

Quick-Hints #7

Als Webentwickler muss man sein Produkt ständig in mehreren Browsern und am besten noch in mehreren Umgebungen testen. Hier eine schöne Möglichkeit: http://blog.mattbailey.co/post/50337824984/grunt-synchronised-testing-between-browsers-devices

Mit SVG-Grafiken in Webseiten kann man viele schöne Dinge anstellen. Zum Beispiel ein Logo / eine Schrift animieren: http://jakearchibald.com/2013/animated-line-drawing-svg/

Ein paar nette CSS3 Effekte für Menüs / Links sind unter folgendem Link zu finden: http://tympanus.net/Development/CreativeLinkEffects/. Um diese auch in vielen Browsern nutzen zu können, empfiehlt sich der Einsatz eines Autoprefixers, zum Beispiel: http://css-tricks.com/autoprefixer/

Für Fälle, in denen man das letzte Element eines Arrays möchte, gibt es viele Möglichkeiten. Wenn man wert auf die Performance legt sollte man ganz klar “array[array.length – 1]; benutzen. Siehe: http://jsperf.com/get-last-item-from-array/10

Youtube adfree / werbefrei nutzen

Mit einem kleinen Trick kann man derzeit Youtube werbefrei nutzen:

Öffne die Entwickler-Konsole deines Browsers:

  • Chrome und Opera (ab Version 15): Ctrl+Shift+J (Win), Cmd+alt+I (Mac)
  • Firefox: Ctrl+Shift+K (Win)
  • Opera (ab Version 12): Ctrl+Shift+I (Win)
  • Internet Explorer: F12
Entwickler-Konsole

Entwickler-Konsole

Danach auf den Reiter Console wechseln und folgendes eingeben:

document.cookie="VISITOR_INFO1_LIVE=oKckVSqvaGw; path=/; domain=.youtube.com";window.location.reload();

Mit der Enter-Taste bestätigen und Youtube adfree nutzen. (Nach dem Enter sollte sich das Fenster neu laden.)

Quick-Hints #6

Mit CSS3 lassen sich nette Hover-Effekte auf Icon-Buttons zaubern

Google hat einen Proxy zum Debuggen von iOS WebView-Anwendungen veröffentlicht (Github). Hiermit können Hybrid-Apps auf dem richtigen Gerät laufen gelassen und per Proxy in den Chrome-DevTools auf dem Mac oder PC gedebugt werden.

Adobe hat für den Brackets Code Editor ein nettes Feature vorgestellt: Photoshop-Dateien können direkt in den Editor geladen und im Coding verwendet werden. Das bedeutet, dass man zum Beispiel das Header-Logo anklickt, den passenden CSS-Code bekommt und das Logo als png/jpg fertig ausgeschnitten abgelegt wird. Noch besser wird es bei Linear-Gradients die aus Photoshop direkt in CSS Angaben gewandelt werden.

http://thenounproject.com/ ist auf Kickstarter gestartet und bietet nun schon allerhand Icons unter der CC-Lizenz. Gegen eine Geringe Gebühr kann man sich auch von der Nennungspflicht des Autors freikaufen.

Ob Anfänger, Fortgeschrittener oder Profi; hier ist für jeden das passende JavaScript-eBook (kostenlos) zu finden: http://jsbooks.revolunet.com/

Mike Stay erklärt auf seinem Youtube-Kanal die Kategorientheorie anhand von JavaScript.

In diesem Blogpost findet man ein paar interessante DOM-APIs, die einen das Leben erleichtern, wenn man einen Fileupload erstellen möchte.

Quick-Hints #5

  1. Für umfangreiches debuggen von JavaScript Client- und Server-Code: https://trace.gl/
  2. Mehr Performance im Siteflow dank Prefetch dank HTML5: Link
  3. Ein Blogsystem, kein CM-System; Ghost will die Alternative zu WordPress für Blogger werden und hat dafür ausreichend Kapital per Kickstarter eingesammelt.
  4. Schon heute in ES6 entwickeln und als ES5 ausliefern, Addy Osmani hat beschrieben wie es geht. Dank Grunt.js kann dies völlig automatisiert geschehen.
  5. two.js ist eine API für 2D-Grafiken im Browser unabhängig vom Context.
  6. Noch mehr Performance für WebApps gibt es dank den Tipps von Mozilla für Apps auf Firefox OS in JavaScript.

 

Quick-Hints #4

Ein paar kurze Anmerkungen und Hinweise zu verschiedenen Themen, die nicht unbedingt einen ganzen eigenen Post benötigen aber trotzdem erwähnenswert sind:

  • In Firefox gibt es ein nettes “Phänomen” bezüglich des Function-Hoistings: Theoretisch würde man eine Funktionsdeklaration unabhängig von der Platzierung im Sourcecode benutzen können, da diese immer an erste Stelle im Code gehoben wird. Immer? Erst glaubte ich es sei ein Bug, aber Firefox entspricht hier nur der Spec. Innerhalb von Blocks (z.B. if(){}) “funktionierte” das Hoisting nicht wie erwartet. Ich konnte die Funktion nicht nach dem Aufruf deklarieren. Warum? Der eigentliche Grund ist, dass innerhalb von Blocks nur Statements erlaubt sind und eine Funktionsdeklaration ist kein Statement sondern ein SourceElement. Die meisten JavaScript-Engines behandeln eine Functionsdeklaration aber wie ein Statement, was natürlich nicht korrekt ist.

  • Automatische hyphenation (weicher Wortumbruch beim erreichen des Randes) ist in CSS3 möglich und in vielen Browsern auch unterstützt. Um eine höhere Abdeckung zu erreichen kann ein JavaScript herangezogen werden: Hyphenator.js

  • Die Geeksphones mit Firefox OS sind seit heute zum Kauf erhältlich. Für ~90€ oder ~150€ gibt es gut ausgestattete Smartphones eines spanischen Herstellers. Das sind natürlich absolute Kampfpreise und es wäre allein aufgrund des Betriebssystems sicherlich eine Bestellung wert. Apps für Firefox OS können in HTML5/CSS3/JavaScript entwickelt werden.

 

Quick-Hints #3

Mal wieder eine kleine Ansammlung von Tipps und interessanten Infos.

Quik-Hints #2

Ein paar kurze Anmerkungen und Hinweise zu verschiedenen Themen, die nicht unbedingt einen ganzen eigenen Post benötigen aber trotzdem erwähnenswert sind:

BlackBerry Returns

BlackBerry Dev

© 2013 BlackBerry

Ich war die letzten Tage auf der MobileTechCon, welche mich bis auf eine Ausnahme nur mäßig überzeugen konnte: BlackBerry. Ich hatte vorher schon ein paar Videos vom neuen BlackBerry10 gesehen und besuchte auf der Konferenz eine Session von Luca Sale. Luca stellte die Entwicklung nativer Apps mit dem WebWorks SDK für BlackBerry10 vor. Ich war sofort begeistert! Native Apps mit HTML, CSS und JavaScript – performant, gut und ohne irgendwelches rumgewerkel mit Tools. Von der Entwicklung von iPhone Apps hält mich größtenteils die grausame Sprache ab, Objective-C bringt mir einfach keinen Spass. In JavaScript hingegen, hab ich mich in letzter Zeit ein wenig reinverguckt.

Gifts vom BlackBerry Booth auf der MobileTechCon13

Gifts vom BB-Booth

Nach der überzeugenden ersten Session besuchte ich weitere BlackBerry Sessions (Apps mit C, Apps mit Android, eine Keynote über das BlackBerry10-System ansich) und schaute natürlich auch am BlackBerry-Booth (Stand) vorbei. Als erstes sei hier noch erwähnt, dass alle dort anwesenden Mitarbeiter super freundlich und hilfsbereit waren und ich hatte nicht das Gefühl, dass sie das nur waren, weil sie für BlackBerry arbeiten, sondern weil sie das System wirklich mögen und es einem näher bringen wollen. BlackBerry gibt sich allgemein viel Mühe, es allen Entwicklern möglichst leicht zu machen, für das neue OS, basierend auf QNX, zu entwickeln. Die native Sprache von QNX ist C / C++, es soll wohl aber keine allzugroßen performance Unterschiede zu Apps mit dem WebWorks, Android oder Adobe AIR geben. Die hauptsächliche Strategie liegt wohl aber auf dem C und WebWorks SDK.

Was ist passiert?

BlackBerry (aka. RIM) hat in den letzten Jahren ein wenig eingekauft und dafür die Basis für ein wirklich gutes mobiles Betriebssystem gelegt. Alles fing wohl damit an, das Thorsten Heins erkannt hat, dass sie sich neu aufstellen müssen. 2010 wurde hierfür QNX aufgekauft. Viele weitere Käufe folgten, zum Beispiel Scoreloop um das Social-Gaming bestmöglich zu unterstützen. Ich weiß gar nicht mehr, was alles auf dem Einkaufszettel von RIM stand, aber es war eine Menge. In der Präsentation über die App-Entwicklung mit dem C-SDK (NDK) von Kamel Lajili auf der MobileTechCon13 wurde einige aufgezeigt, vielleicht komm ich noch an die Slides. Kamel ist übrigens für das deutsche BlackBerry Team tätig. Ich war verwundert, dass BlackBerry in Deutschland ansässig ist und dort sogar mit rund 300 Mitarbeitern recht stark vertreten ist.

 Ein paar Highlights

Das grundlegende Highlight ist sicher das QNX Betriebssystem, von dem ich mir hohe Sicherheit und Stabilität verspreche. Durch den Sandbox-Aufbau / modularen Aufbau können andere Apps das OS eigentlich nicht zum absturz bringen, bzw. andere Apps beeinflussen. Die Gestures (die Bedienung) des BlackBerrys fühlte sich sehr gut an und die Peek Funktionalität finde ich klasse. So ist es möglich mit einem kleinen wisch von linken Rand nur kurz zu “peeken” ob die Nachricht interessant ist (welche angekündigt wurde) ohne das laufende App zu unterbrechen. Wenn man die Wischgeste nicht zuende führt, sondern wieder zum rechten Rand zurück wischt, gelangt man wieder zurück zu der (jederzeit sichtbaren) zuletzt benutzten App.

Die Entwicklung für das BlackBerry10 System sollte für einen ganz großen Teil der Entwickler sehr einfach möglich sein, sodass ich mir eine große App-Anzahl erhoffe. Persönlich freue ich mich sehr über das WebWorks SDK und hoffe schnell an ein BlackBerry Z10 oder Q10 zu gelangen um die Apps nicht nur im sehr gelungen Simulator und / oder Emulator auszuprobieren. Der Emulator ist wirklich klasse, es ist ein Chrome-Plugin, in welchem man die mit dem WebWorks geschriebenen Apps testen kann. Dort gibt es nicht nur eine Emulation für die BlackBerry Geräte sondern auch für weitere Smatphones und Tablets anderer Herrsteller, wie zum Beispiel das Nexus 7 von Google.

 

Quik-Hints

Ein paar kurze Anmerkungen und Hinweise, die nicht für einen ganzen Beitrag reichen, aber trotzdem erwähnenswert sind.

  • display: inline-block & E.offsetWidth buggy im IE8 -> Abhilfe display: block + float.
  • Chromebook Pixel für Webworker
  • “display: table-cell” für “vertical-align: middle”
  • <div> Container um ein <img> hat 4px Höhe zuviel? -> img { vertical-align:bottom; } oder img { display: block; } weil User-Agents bei Inline-Elementen Platz für mögliche Descenders schaffen.
  • spezielle Font für Wireframes und Co. anstelle Lorem Ipsum
  • (new Function(strCode))(); ist bis zu 5400% performanter als eval(strCode);
  • Bilder malen mit purem CSS (box-shadow)