Working Draft

Dieses mal waren Schepp, Hans, Kahlil und Special Guest Benedikt Kastl am Start um den Webkram der letzten Woche zu besprechen. [00:00:25] News Outlook 2013 Offline Apps für den Desktop mit Webtechnik Schaunotizen [00:01:30] Seamless iFrames Wir sprechen über Ben Vinegars Vortrag über Seamless iFrames und erklären was das ist. [00:14:40] How we learned to leave default font-size alone and embrace the em Die Filament Group erzählt wie sie am liebsten Font Sizes deklarieren und wir auch. [00:28:40] HTML5 Web applications and libraries survey Wie sehen Mobilentwickler Schwerpunkte bei Plattformen und Frameworks? Und was für Schlüsse kann man daraus ziehen? [00:39:40] Keine Schaunotizen EpicEditor – An embeddable JavaScript Markdown editor Socialite.js Forkit.js Montage and Ninja are here – destroy/dstorey DailyJS: Backbone.js: Hacker’s Guide I18N MySQL Datenbanken abgleichen mit Toad > Datenbanken > MySQL, Synchronisation Alternativ geht das auch mit SQLBalance for MySQL Latency: The New Web Performance Bottleneck – igvita.com Inspire Conference | Leiden, The Netherlands | 9th – 12th December 2012 Die Soundeffekte dieser Folge stammen von Mike Koenig, via soundbible.com.

Scheppman, Hans, Rodney und Kahlil trafen sich dieses mal wieder, um in illustrer Runde so zu tun, als hätten Sie eine Ahnung von Webentwicklung und so. [00:00:15] News getUserMedia() ist in Firefox gelandet Schaunotizen [00:00:39] styles.max.css Daniel Eden schlägt vor, das CSS generell auch dekomprimiert auf dem Server bereit zu halten, damit Anfänger davon lernen können. [00:12:40] It’s time to stop blaming Internet Explorer Den Nicholas C. Zakas ermüdet das ewige IE-Gebashe und wir stimmen in diesen Kanon mit ein. [00:22:06] box-decoration-break in Anmarsch So langsam kommt box-decoration-break in die Browser. Der Schepp und Rodney sinnieren über die Sinnhaftigkeit des Propertys. [00:40:22] X-tag – reduce your html Der Autor behilft sich mit JavaScript, um HTML-Code zu sparen. Wir sinnieren auch hier über die Sinnhaftigkeit dessen. [00:49:48] Keine Schaunotizen Moqup Mockups mit HTML5. Avoiding Faux Weights And Styles With Google Web Fonts Ein Artikel über die richtige Einbindung von Google Web Fonts. CSS Parser Ein CSS Parser aus JavaScript. DailyJS: JS101: The Function Constructor DailyJS erzählt Euch mal was über den Function Constructor. JSConf.US 2012 Videos Die Vorträge von JSConf.US

Schepp war nicht da, aber mit Rodney, Hans, Kahlil und Peter an Bord waren wir trotzdem beschlussfähig. Haben wir schon erwähnt, dass Rodney seit letzter Woche offizieller Bestandteil der Crew von Working Draft ist? Glückwunsch Rodney! [00:00:22] News Fullscreen-API Jetzt offizieller Working Draft Weniger Prefixes in Firefox Ab Version 16 sind Animationen, Transitions, Transforms und Gradients nicht mehr geprefixt Schaunotizen [00:01:14] Why no FileSystem API in Firefox? Jonas Sicking erklärt, warum wir nicht damit rechnen sollten, die File System und File Writer zeitnah im Firefox vorzufinden. Andere APIs wie z.B. Indexed DB und Web Storage können fast alle Aufgaben der FS-API übernehmen. Wir gehen im Prinzip d‘accord und finden auch, dass die Alternativen einfach viel schöner sind, als der elaboriert-javaeske Code, der bei der FS-API anfällt – man sehe sich nur mal dieses Tutorial an. Und wer gar nicht ohne File System API kann, dem helfen (auf Indexed DB aufsetzende) Polyfills. [00:16:06] Chrome Apps: JavaScript Desktop Development Google hat auf der diesjährigen Google I/O mal wieder die Revolution angekündigt – diesmal sollen‘s Webapps auf dem Desktop werden. Klingt eigentlich ganz schön, nur Peter fühlt sich an Adobe Air erinnert und fragt sich, warum man sich Web-Gefrickel auf der Clientseite wünschen sollte. Immerhin sollen die entstehenden Technologien in die System Applications Working Group eingebracht werden, so dass vielleicht der eine oder andere Webstandard daraus entsteht. [00:30:42] Keine Schaunotizen Git in 15 Minutes Großartiges interaktives Tutorial. GitHub Android App Released Github – jetzt auch für alle, die sich kein iPhone leisten können! PHP – The right way Versucht, den zahllosen ranzigen Tutorials im Web die Stirn zu bieten. Replacing Text in DOM Diese Technik kommt auch mit größeren Tag-Verschachtelungen klar und liefert ein valides Ergebnis. iOS has a :hover problem Erklärt, unter welchen Umstände iOS einen Klick/Tap als :hover interpretiert. TYPO3 Codesprint Freiburg Hans will mit euch am 13. Juli Typo3 aufmöbeln.

Die gesamte Crew war an Bord, allerdings leider auch die Skype-Dämonen. Wir hoffen dass die Themen-Menge für die sporadischen Audio-Fails kompensiert. [00:00:16] News New (experimental) CSS feature: Hierarchies Jetzt zum ausprobieren in Webkit Nightlies Web Intents Seit kurzem offizieller W3C-Draft Schaunotizen [00:01:08] Editoren & IDEs Web-IDE Cloud9 stellt (unter anderem) sein neues Collaboration-Feature vor, während Adobe mit Brackets seine eigene Fassung eines Online-Codeeditors veröffentlicht (mit einigen sehr schicken Features). In der Offline-Welt ist derweil Sublime Text 2.0 Stable erschienen. Ebenfalls offline, aber nicht ganz so traditionell kommt Light Table daher, von dem es mittlerweile erste Brocken zu sehen gibt. Wir finden die Auswahl super, aber können Online-IDEs auch wirklich alles leisten, was ihre Offline-Verwandten können, z.B. Buildprozesse mit PNG-Optimierung? Möglich sein sollte es eigentlich. Peter baut sich seinen eigenen Cloud-Editor, indem er sein Sublime Text 2 nebst Einstellungen mittels Ubuntu One zwischen seinen Rechnern synchronisiert. [00:20:42] Die Zukunft von jQuery jQuery 1.8 ward angekündigt! Neu ist neben automatischen Vendor-Prefixes und so mancher internen Aufräumaktion vor allem Modularität, ganz ähnlich wie bei MooTools. Auch für die Versionen 1.9 und 2.0 laufen bereits die Planungen. Beide Versionen sollen die gleiche API haben – der einzige Unterschied ist, dass sich 2.0 die Unterstützung für alte Internet Explorer spart. Genaueres ist den Slides der jQuery Conference 2012 keynote zu entnehmen. [00:34:20] Yeoman Yeoman hält sich für eine Sammlung von Tools für Frontend-Entwicklung, Kahlil spricht hingegen einfach von „Grunt auf Crack“. Zusätzliche Features sind im wesentlichen Presents und ein paar Extra-Plugins für Grunt. Peter sieht nicht ganz ein, warum er sich von irgendwelchen Hanseln Grunt vorkonfigurieren lassen sollte, wenn er das doch selbst ganz gut kann. [00:54:23] Chrome für iOS Chrome für iOS ist da und findet durchaus unser Gefallen. Er kommt zwar notgedrungen ohne V8 daher und ist daher sogar eigentlich noch langsamer als Safari, aber ein paar Speed-Schmankerl gibt es trotzdem. [01:04:47] Keine Schaunotizen Retinafy your Website Zum Ausdrucken und aufhängen. Tinycon – Favicon Alert Bubbles A small library for manipulating the favicon Introduction To JavaScript Unit Testing Autor Jörn Zaefferer ist für QUnit, das Testframework von jQuery, verantwortlich. Symbolset Eine bessere Icon-Font. Recommendations for building smartphone-optimized websites Google sagt wie sie’s gern hätten. Google IO 2012 Notes Gesammelt von Christian Heilmann. SirPepe/HTML5Resources Peter sammelt Links. Repo.js Sehr schick: Github-Projekte direkt in Websites einbetten! Peity Dynamisch generierte Inline-Graphen.

Überraschung: Sowohl Schepp als auch Peter waren zur Abwechlsung mal wieder an Bord. Der ewige Rod vertrat Hans und Kahlil. [00:00:22] News It’s Official, CSS Media Queries Are a Web Standard CSS3 Media Queries sind eine fertige W3C Recommendation Schaunotizen [00:00:55] The Sabotage of Do Not Track Kommt er oder kommt er nicht, der Do-Not-Track-Header? Und wenn ja, wie? Seit der Microsoft-Ankündigung, den IE10 per Default DNT:1 schicken zu lassen regt sich Widerstand bei den Werbenetzwerken. Ohne irgendwelche Gesetzgebung, als reiner Webstandard, wird es wohl schwer für Do Not Track … [00:18:30] I Want a DAMNodeInserted Event Epischer Hack implementiert einen primitiven DOM-Observer für Insertions, quasi als Teil-Polyfill für die in Revision 71 schon besprochenen DOM Mutation Observers. Der Trick ist zwar recht abgefahren, für Dinge wie accessifyhtml5.js aber sicher von Wert (falls man nicht gerade jQuery verwendet und die entsprechenden Hooks benutzt). [00:29:05] X-Tag – Web Components Workshop und Working with CSS Regions and Shadow DOM Präsentation eines Polyfills für Web Components (ihr wisst schon, Shadow DOM und so) und ein Adobe-Artikel zur Kombination von Shadow DOM und CSS3 Regions. [00:42:35] Der IHK-Zwang muss abgeschafft werden Vladimir Simovic erklärt uns warum der IHK-Zwang in die Tonne getreten gehört. Wir gehen d’accord und fordern zum Unterzeichnen der dazugehörigen Petition auf. [00:57:05] Keine Schaunotizen reFiddle JSFiddle für Regex. Asynchronous programming and continuation-passing style in JavaScript Der Doktor erleuchtet uns über asynchrones JS. DailyJS #js101 Artikel für JavaScript-Einsteiger. Grunt plugins published to Npm Damit man nicht mehr selbst Tasks bauen muss. pageguide.js An interactive guide for web page elements using jQuery and CSS3. 10 things you didn’t know JavaScript could do Von @asciidisco. Cool URIs don’t change Steinalt, aber immer noch relevant und richtig. Shumway & bikeshed.js Flash-Interpreter in JS. CSS generated content and screen readers Die lesen das Zeug vor! Skrollr Scrolling-Library ohne Dependencies.

Dieses mal trafen sich Hans, Sebastian Golasch aka @asciidisco und Kahlil in Skype, um sich durch einen stattliche Anzahl an Themen zu arbeiten. [00:00:40] News image-resolution in Webkit CSS Variables in WebKit (prefixed) Border-Image in Firefox 15 Opera 12 ist da Die IE7-Steuer Schaunotizen [00:02:21] Zombie.js Ein schneller, kopfloser Browser auf Node.js Basis um JavaScript zu testen. Nützlich? [00:14:15] Auf echten mobilen Endgeräten testen ohne Bankrott zu gehen Brad Frost spricht über die Anschaffungskosten für mobile Endgeräte, die man zum testen braucht und macht Vorschläge, wie man Kosten sparen kann. Wir reden darüber und über die weiteren Aufwände, die beim Testen von mobilen Geräten aufkommen. [00:25:34] Mobile Safari auf iOS 6 Welche Features bringt Safari in iOS 6 für uns Webentwickler? [00:31:42] Volo.js Sebastian erklärt uns ausführlich was es mit Volo.js und anderen Dependency Managern für JavaScript im Frontend auf sich hat. [00:45:54] JavaScript Doc Tools Sebastian und Kahlil tauschen sich über ihre Erfahrungen mit JavaScript Dokumentations-Tools wie YUI Doc und docco aus. [00:56:05] Keine Schaunotizen Gradient Finder Findet CSS-Gradients in einem Bild. Mozilla CSS Extensions Liste aller mozillaspezifischen CSS-Erweiterungen. Debunking Responsive CSS Performance Myths CSS Performance-Mythen entkräften ECMAScript 6: Maps, Sets und Weak Maps Peter Kröner über neue JavaScript-Features. Require.js Hogan Plugin Templates im Buildprozess direkt kompilieren. EditorConfig Editoreinstellungen projektweit festlegen. How Browsers Work Internally (Video) Talk von Tali Garsiel auf der Front-Trends 2012. memSQL memSQL ist angeblich 30 mal schneller als SQL Pew Pew Manifesto Adobe propagiert, daß sich JavaScript für große Projekte nicht eignet.

Eine Kombination aus Sommerloch, EM, WWDC und Schepps Urlaub sorgt erneut für Magerkost bei den Themen. Kann man nichts machen! Dafür führen wir mit den News einen neuen Sendungsbestandteil ein, bei dem es in Zukunft (?) immer ein paar kurze Update-Durchsagen geben soll. [00:00:11] News Transitions, Transforms and Animations may be released unprefixed Die CSS Working Group erklärt Transitions, Transforms und Animationen für praktisch fertig und der IE 10 verzichtet auch bereits auf Vendor-Prefixes hierfür. MySQL Root Exploit In manche MySQL-Versionen kann man sich mit beliebigen Passwörtern einloggen. Schaunotizen [00:01:19] JSON vs. MessagePack vs. JSON5 Mit MessagePack, einer binären Abwandlung des JSON-Formats, meint jemand seinen Traffic halbieren zu können. Uns kommt das wie Blödsinn vor und wir sehen auch nicht so wirklich viel Potenzial für MessagePack in der Webentwicklung. Auch der Autor von MessagePack geht d‘accord. Besser finden wir da schon JSON5, eine ECMAScript5-konforme Erweiterung von JSON, die etwas weniger strikt ist – eine gute Idee für Konfigurationsdateien. [00:11:02] Keine Schaunotizen Third-Party JavaScript Development: The Future! Bocoup spekuliert über die Mittel der Zukunft für Third-Party-JS. gmaps.js Wrapper für die Google Maps-API, der alles sehr sehr sehr viel bequemer macht. Bunyip Automatisches, paralleles Client-Side-Unittesting in beliebigen Browsern. Trying out ECMAScript.next’s for…of loop in Firefox 13 Axel Rauschmayer über Iteratoren im kommenden ECMAScript-Standard.

Schepp war im Urlaub, Kahlil verhindert und die Themenliste war leer. Also besprachen Hans und Peter diesmal eben nur ein einziges Thema. Schaunotizen [00:01:02] Sweep the Sleaze Oliver Reichenstein meint, dass der Nutzen von Social-Media-Buttons (Facebook, Twitter usw.) zweifelhaft, der bei ihrem Einsatz entstehende Schaden für Image und Seitenperformance hingegen ziemlich sicher sei. Peter mag nicht ganz zustimmen und meint: wenn man es richtig macht, stören die Dinger zumindest nicht. [00:18:03] Keine Schaunotizen Code Painter Code Painter is a JavaScript beautifier that instead of asking you to manually specify the desired formatting style, can infer it from a code sample provided by you. Videos von Fluent 2012 Kurzweilige Vorträge von Nerds mit Kaliber. Sorting – We’re Doing It Wrong Rodney Rehm steigt aber mal so richtig tief in das Thema „sortieren in JavaScript ein“.

Zu Gast war diese Woche Anselm Hannemann, den wir mit seinem Fachwissen gerne wieder eingeladen haben. Außerdem waren der Schepp und Hans mit von der Partie. Schaunotizen [00:00:00] Quota Management API Wenn man mit client-seitigem Speicher experimentiert (localStorage, IndexedDB, File API) ist es schwierig abzuschätzen, wann der Speicher eines Geräts erschöpft ist. Dafür gibt es die neue Quota Management API, die genau dieses Problem lösen soll. [00:00:00] CSS Compositing & Blending Adobe veröffentlicht die neusten Spielereien, die sie sich ausgedacht haben. Dazu gehören das Composing und das Blending, die aus Photoshop, Illustrator und anderer Adobe Software bekannt sind. Für SVG gibt es diese Effekte bereits, nun also auch für CSS. Wir finden diese Entwicklungen super; nach Flash erkennt Adobe worauf es im Web ankommt! [00:00:00] CORS: Louis Rémi reicht’s nicht Möchte man asynchron Abfragen zwischen verschiedenen Domains absetzten, ist man aktuell ziemlich beschränkt. Dieses Problem soll durch CORS gelöst werden. Louis Rémi ist allerdings der Meinung, dass das nicht reicht, da Dienste wie Twitter oder Facebook ihre Schnittstellen noch nicht CORS-ready zur Verfügung stellen. Der Artikel erschien bereits Ende letzen Jahres. [00:00:00] Die Responsive Images Story Anselm berichtet über die aktuelle Lage der Responsive Images. Von seinem ersten Vorschlag auf der Mailinglist, über die Entstehung der W3C Community Group, bis hin zu den jüngsten Kontroversen gibt Anselm eine gute Übersicht. Wir sprechen außerdem drüber, was unsere Vorstellungen von Responsive Images sind und wie die W3C und die WHATWG ihre Arbeit machen. [00:00:00] Über die Smashing Conference Die Smashing Conference wird zum ersten mal in Freiburg abgehalten. Bastian Allgeier hat die Website für die Konferenz mit seinem file-basierten CMS Kirby gebaut und beschreibt wie. Wir sind große Fans von Kirby und unterstützen auch die Smashing Conference gerne. Wer mehr Infos zu Freiburg möchte, schreibt Hans gerne eine Mail. [00:00:00] Keine Schaunotizen Adobe Brackets: An Introduction Eine Einführung in Adobes Open Source Code Editor, der für Front-end Entwickler gemacht wird. Das Projekt ist auf GitHub und in HTML, CSS und JavaScript programmiert. NUMBOO Magazin Das NUMBOO Magazin ist ein deutsches Magazin für Webdesign und Webentwicklung mit einigen interessanten Themen. CSS Flexbox Carousel Andi Smith zeigt, wie man ein Carousel mit Flexbox bauen kann. JavaScriptSQL Eine Datenbank-Engine komplett in JavaScript geschrieben. Über fixe Positionierung und scrollen in iOS Remy Sharp geht auf die Probleme mit fix positionierten Elementen im zusammenwirken mit dem Scrollen auf iOS-Geräten ein und beschriebt die besten Lösungswege.

Die Stammbesatzung trat an und brauchte zum Sortieren der Themen länger als für die Aufnahme. Trotzdem ist noch einiges an Material übrig geblieben. Schaunotizen [00:00:22] SASS versus LESS Chris Coyier vergleicht SASS mit LESS und kürt ersteres zum Gewinner. Für rechten Widerspruch reicht es bei uns nicht, da wir SASS in Kombination mit Compass und CodeKit auch nicht so ganz schlecht finden. Die etwas nerdigere Fraktion findet aber auch die Kombination Stylus + Nib + Grunt ganz gut. Naja, jeder wie er will :) [00:22:00] Media Queries Level 4 CSS4 ist im Anmarsch und die neuen Media Queries führen neben einem Script-Detektor auch ein Feature ein, mit dem man herausfinden kann, ob ein Gerät so etwas wie ein „Mousover“ (d.h. die Hover-Pseudoklasse) überhaupt leisten kann. Ob ein Gerät einen Tochscreen hat, kann man zwar schon mit proprietären Mitteln herausfinden, aber ein Touchscreen muss Mouseover-Funktionalität ja nicht zwingend ausschließen. [00:27:57] Google Bot now crawls arbitrary Javascript sites Wir sind uns überhaupt nicht einig, ob das nicht schon alter Käse ist und ob man aus dieser Entdeckung irgend etwas für die tägliche Arbeit ableiten sollte. Was meint ihr? [00:41:20] Google Chrome Canary: webkitdirectory attribute walkthrough Addy Osmani erklärt, wie man aus der HTML5 File API, einem neuen HTML-Attribut und etwas Trickserei etwas backen kann, dass Drag & Drop von ganzen Verzeichnissen in Webapps ermöglicht. [00:47:55] Keine Schaunotizen SpahQL Query-Sprache für komplexe JavaScript-Objekte. JSCheck-Tutorial Einführung in ein neues Test-Framework von Douglas Crockford, das mit Zufalls-Inputs arbeitet. Responsive Tables Ein Ansatz für Responsive Tabellen. Our Approach to Routing in Ember.js Man kann es so oder so machen. Ember.js macht es so. wysihtml5 – A better approach to rich text editing Qualität aus dem Hause Xing. How To Choose The Right Face For A Beautiful Body Typoraphie-Tutorial. GitHub for Windows Nach dem Github-Client für Mac gibt es nun auch einen für Windows.