Eine spontane Revision mit spontanen Gästen und einem noch spontaneren Twitter. Eine fünf Minuten vor Start zusammengestoppelte Besetzung aus Matthias Mees, Jens Grochtdreis, Stefan und Schepp diskutiert über die Dinge, die dem Webworker seit jeher graue Haare und Falten bereiten: Content Management Systeme.
[00:00:45] News
- jQuery 1.11 and 2.1 Beta 1 Released
- Die Beta der neuen jQuery ist erschienen, mit einigen interessanten Änderungen, unter anderem einer neuen, AMD-lastigen Architektur.
Schaunotizen
- [00:02:07] Content Management Systeme
- In einer stundenlangenen Plauderei nehmen die furchtlosen Frontend-Vier ein CMS nach dem anderen unter die Lupe. Wir beleuchten das Für und Wider der kommerziellen Systeme wie Reddot und Imperia, brechen die eine oder andere Lanze für ProcessWire und Kirby. Außerdem erklären wir, wie man mit den JSON API, Advanced Custom Fields und Super Custom Page Tyoes auch aus WordPress ein ganz anständiges System machen kann. Jens und Stefan verlieren auch das eine oder andere Wort über statische Seitengeneratoren, wie zum Beispiel Jekyll oder das in Grunt integrierbare Assemble. Und wer noch nicht genug Namedropping hat: Mit einer Liste der weltweiten CMS Anteile werfen wir ein halbes Auge auch noch auf Joomla, Redaxo, Typo 3, Drupal, ModX, Expression Engine, Serendipity, Pico und viele weitere. Ob wir mit diesem Rundumschlag eine schlußendliche Empfehlung abgeben können?
[01:10:48] Keine Schaunotizen
- I can smell your CMS
- Ein zum Thema passender Talk von Phil Hawksworth auf der letztjährigen Fronteers.
- Safari iOS7 – HTML5, Problems und APIs
- Mobile Web Advokat Max Firtman gibt einen sehr ausführlichen Überblick über sämtliche Änderungen des letzten Mobile Safari Updates.
- Complete Guide to the <table> element
- Apropos ausführlich. Das war auch Chris Coyier bei der wohl ultimativen Übersicht zu den Tabellen.
- Barrierefreie Datentabellen
- Dazu passend: Benimmregeln für die richtige und barrierefreie Verwendung ebenjener.
- Controlling CSS Animations/Transitions with JavaScript
- Wieder CSS-Tricks, diesmal mit einem Gastbeitrag zu den Möglichkeiten, wie man über JavaScript CSS Animationen und Transitions steuern kann.
- animo.js
- Sexy, sexy CSS Animations über eine sehr angenehm zu bedienende JavaScript API.
- Fireshell
- Wem ein Yeoman zu umfangreich und wuchtig ist, kann es mit Todd Mottos Fireshell versuchen. Oder gleich zu Hans‘ Init greifen.
- Sass Color Functions
- Jackie Balzer zeigt, welche Sass Farbfunktionen es gibt. Und das nicht nur in Prosa und Code, sondern mit einem sehr ansehnlichen Tutorial.
Das Sommerloch hat die Themenliste gefressen! Zum Glück lagen noch ein paar Zuhörerfragen auf Halde, derer sich Rodney, Stefan und Peter annahmen.
Schaunotizen
- [00:00:33] Grid-Framework-Empfehlungen
- Im Brustton der Überzeugung mochten wir keins empfehlen. Peter hat zu wenig Ahnung, Stefan fühlt sich zu schnell eingeschränkt und Rodney ist ein richtiger Entwickler und baut keine Layouts, sondern lässt bauen. Konsens: nehmt halt irgendeins!
- [00:04:19] Push-Funktionalität
- Der erfahrene Rodney rantet aus dem Nähkästchen. Außer Long Polling ist kaum was zu gebrauchen, wobei sich zumindest die Protokoll-Inkompatibilitäten vom Web Sockets sich auf dem Desktop ausgewachsen haben. Der Geheimtipp für die Zukunft: HTTP über WS tunneln.
- [00:11:33] Local Storage
- Stefan und Peter klären erst mal den den App-Begriff, bevor sie Hoodie großes Potenzial bescheinigen.
- [00:14:21] Packaging von Webapps zur Offline-Nutzung
- Rodney ist ein richtiger Entwickler und erzählt daher erst mal etwas über Java. Mehr ist leider auch nicht zu sagen, da ein brauchbarer Webstandard nicht in Sicht ist. Insellösungen wie Chrome Apps kommen dem noch am nächsten, laufen aber eben nur dort.
- [00:19:57] Die Zukunft von WebP
- Für die Zukunft von WebP sehen wir eher schwarz. Peter wiederholt die bekannte Facebook-Fail-Story. One does not simply invent a new image format!
- [00:25:07] Was ist von <nav> und <menu> zu halten?
- Aus Gründen der Barrierefreiheit empfiehlt Peter <nav> wärmstens. Rodney prophezeit das Ende von <menu>, das mangels Implementierungen auf der Abschussliste steht.
- [00:27:23] Was ist von Flexbox zu halten?
- Peter und Rodney lobpreisen! Stefan ist noch mit Floats schneller, was sich mit Peters Padawan-Beobachtungen deckt. Voll Spannung werden die kommenden Grid-Layout-Standards erwartet. Bis dahin baut man Flexbox wegen der diversen Syntax-Varianten am besten mit Flexyboxes.
[00:35:03] Keine Schaunotizen
- DalekJS introduction on Vimeo
- DalekJS wird nächste Revision ein Thema sein. Wer schon jetzt einen Einstieg sucht, wird mit diesem Video fündig.
- VerbalExpressions
- Regex für Leute die kein Regex können (JS-Lib).
- WebPlatform DocSprint Zurich
- Spaß und Erkenntnisgewinn durch Schreiben – bald auch in Zürich!
Fast alle Moderatoren waren ausgeflogen, was also tun? Natürlich eine AngularJS-Sonderrevision! Die hatten wir schon länger geplant, jetzt nutzten wir die Gunst der Stunde. Da Stefan und Schepp beide keine Alltagserfahrung mit AngularJS vorweisen konnten, luden sie sich ein deutsches Experten-Trio bestehend aus Robin Böhm, Sascha Brink und Philipp Tarasiewicz ein, die im Folgenden eine gute Stunde lang über die Funktionsweise und Vorteile von AngularJS erzählten.
Schaunotizen
- [00:00:00] AngularJS
- Sascha, Robin und Philipp erklären uns, wie AngularJS funktioniert. Dabei erwähnen wir die Seite Built with AngularJS und dass man deployd als Datensilo mit einem AngularJS-Frontend verknüpfen kann. Und nicht zuletzt natürlich die deutschsprachige Anlaufstelle für alle AngularJS-Entwickler: angularjs.de
[00:53:18] Keine Schaunotizen
- IE11 Developer Preview for Windows 7
- Wer den IE11 austesten will und Windows 7 schon einsetzt, der muss dazu kein Image von Windows 8.1 mehr herunterladen. Alternativ dazu gibt es für Mac und Linux Banutzer auch ein Windows 7 Image mit integriertem IE11.
- Bootstrap 3 RC1
- Das neue Bootstrap ist jetzt mobile first und flat!
- Android and the eternal dying mobile browser
- Auch mit Android 4.3 will der unterentwickelte Android-Browser einfach nicht aussterben. Weiterentwickelt hat er sich auch nicht.
- On Mobile, Data URIs are 6x Slower than Source Linking
- Mobify hat via Real User Monitoring, genannt RUM, herausgefunden, dass Bilder, die man per Data URI einbettet durch das doppelt nötige Dekodieren deutlich länger laden. Es gilt also, ihren Einsatz hier und da etwas zu begrenzen.
- Generators in v8
- Ein kleiner Artikel, der die Vorzüge sogenannter Generatoren aus dem kommenden JavaScript-Version ES6 erklärt.
- NerdyData
- Eine Suchmaschine für Quellcode.
- Top 10 Proactive Web Application Security Measures
- 10 Sicherheitsmaßnahmen, die man seiner Webseite angedeihen lassen sollte.
- Thinkster – A better way to learn AngularJS
- Online-Workshop, um den Umgang mit AngularJS zu lernen.
- jspm.io
- jspm.io ist ein universeller JavaScript-Modul-Loader, dem es egal ist, ob ein Modul im ES6-, AMD- oder CommonJS-Format vorliegt. Außer aus dem lokalen Projekt kann jspm.io Module auch direkt von Github aus einbinden.
- AngularJS.de – Das deutsche Portal zu AngularJS
- Philipps, Saschas und Robins gemeinsames Projekt.
Bei einem schönen Digestivum drehten Stefan und Schepp ein paar mal am HTML5-Glücksrad und ließen einen Berg Links vom Stapel. Im Detail ergab sich das folgendermaßen:
[00:00:41] News
- Firefox 22
- Firefox 22 bringt der breiten Masse WebRTC und unprefixtes CSS Flexbox.
- iOS 7 beta and the new Safari for web developers
- Maximiliano Firtman hat sich angeschaut, was iOS7 Neues für uns Entwickler bereithält. Unter anderem sind das Video-Untertitel, XHR 2, CSS Regions und CSS Flexbox.
Glücksrad
- [00:07:02] input[type=“image“]
- Wir reden über den Sinn und Ursprung dieses Inputs, und dass er fast immer zweckentfremdet anzutreffen ist.
- [00:16:12] Form Submission
- In HTML5 ist es möglich, dass jeder Submit-Knopf eigene Aktionen, Methoden, etc. für das ihn umgebende Formular festlegt.
- [00:20:35] Pseudo-classes
- Wir betrachten ein paar der interessanteren Pseudoklassen aus der Spec, und streifen dabei das Select-Widget Select2.
- [00:32:35] Origin
- Wir reden darüber, was der Origin im Client für eine Rolle spielt und wie man mit ihm umgehen kann bzw. sollte.
[00:39:16] Keine Schaunotizen
- CSSRegions.js
- Adobe hat einen CSS Regions Polyfill veröffentlicht. Macht einen guten Eindruck, bald auch mit IE9-Support.
- Hinweis zur vergangenen Sendung: display:table hat Auswirkungen auf manche Screenreader
- Danke für den Hinweis an Tomas Caspers!
- Good UI
- 16 kurze und sehr sinnvolle Tipps für einen perfekten Userflow
- Mobile Web Problems
- Passend dazu zeigt Brad Frost, wie man mit seinen mobilen Besuchern besser nicht umgehen sollte, um deren Flow nicht abrupt zunichte zu machen.
- UI Transitions
- Sara Soueidan hat ein paar erstklassige CSS Animationen für das Einhängen und Entfernen neuer DOM-Elemente entwickelt und zusammengetragen.
- Building Apps For Firefox OS, Chrome OS And The Web
- Und der fantastische Addy Osmani schreibt bei Kahlil und Hans drüben wie man eine App entwickelt, die nicht nur im Web sondern auch auf Chrome OS und Firefox OS als Bürger erster Klasse läuft.
Letzte Woche haben wir die beyond tellerrand 2013 in Düsseldorf besucht und dabei die Gelegenheit genutzt, Christian Heilmann von Mozilla vors Mikro zu bekommen und ihn zu Firefox OS zu befragen. Das Gespräch haben wir im Foyer aufgenommen, was leider mit vielen Nebengeräuschen einher ging. Sorry dafür.
Neue Browser, alte Probleme – diesmal mit Schepp, Peter und Rodney an den Mikrofonen.
[00:00:20] News
- Firefox 21
- Frisch released und mit Support für
<main>, Scoped Stylesheets (Working Draft berichtete) und ersten Teilen der Crypto-API.
Schaunotizen
- [00:01:00] Chrome’s requestAutocomplete()
- Chrome hat ein neues Feature, das es Webseiten erlaubt Autocomplete für Formulare anzufordern. Gedacht ist das ganze eigentlich nur für Payment, was Peter etwas einschränkend findet, Schepp aber ob der ranzigkeit der Alternativlösungen für ganz großartig erachtet. Außerdem kommen der Payment Card Industry Data Security Standard und das neuerdings globale hidden-Attribut zur Sprache.
- [00:17:06] Web Components
- Neben Mozillas X-Tag hat nun auch Google mit Polymer Polyfill-Material für Web Components gebaut. Rodney erklärt den Unterschied zwischen Web Components und Shadow DOM und den diversen Einzelteilen der jeweiligen Technologien.
- [00:31:31] Is This Thing On?
- Einen eigentlich nur mittelguten Artikel nehmen Rodney und Peter zum Anlass, sich um die beste Story im Bereich „worst of Offline-Status-Festellung im Browser“ zu kabbeln.Weder die HTML5-APIs für den Online-Status noch die Disconnect-Events von Web Sockets noch Event Sources taugen. Rodney kam in seinem Projekt nicht umhin, eine State Machine mit Heartbeats auf Basis von Web Sockets (und Long Polling für Android) zu bauen. Außerdem kommt kurz http://socket.io/ zur Sprache.
[00:35:30] Glücksrad
- Sandbox-Attribut
- Das Sandbox-Attribut wird es einst erlauben, die Möglichkeiten einer Seite in einem Iframe einzuschränken oder sogar zu erweitern.
[01:01:50] Keine Schaunotizen
- Prepros
- Das darf man nicht außer Acht lassen: ein Präprozessor-GUI für Windows!
- Handy Sass Mixins
- Bei diesem Titel sind die Zusammenhänge glasklar.
- Codeblock.js
- Im Prinzip brauchen wir nur drei Dinge um allen Code zu beschreiben: einen Syntaxhighlighter, einen darin eingebautem Editor und einen „Run“-Button. Alles andere ist unnötig und deshalb enthält dieses Plugin auch nur diese drei Funktionen.
- How to Style Google Maps
- Dass das überhaupt geht wissen auch nur die wenigsten.
- JavaScript Regular Expression Enlightenment
- Wie reguläre Ausdrücke funktionieren muss man wissen und dieser Artikel erklärt es in epischer Breite.
- Vier Diskussionen
- Podcast-Kameraden, bekannt, ja? Nicht? Dann anhören!
Christian und Hans besprachen diese Woche die Themen aus der Welt von CSS, Touch-Detection und verschlüsselten Medien.
[00:00:15] News
- JPEGmini Windows App
- JPEGmini gibt es nun endlich auch als Windows App.
Schaunotizen
- [00:00:52] CSS is not an amoral monster
- Ben Henick ist der Meinung, dass CSS für Websites gar nicht so komplex ist, wie man vielleicht annehmen mag, wenn man die richtigen Methoden anwendet. Wir diskutieren darüber, wie modulares CSS das Bauen von Websites und Apps erleichtern kann und worauf man achten sollte.
- [00:18:46] You Can’t Detect A Touchscreen
- Stu Cox weist darauf hin, dass es keine verlässliche Methode gibt, um Geräte zu kennen, die einen Touchscreen haben. Man kann lediglich erkennen, ob es die API für Touch-Gesten gibt, was aber nicht verlässlich ist. Aber braucht man die Information überhaupt? Und sollte man Websites nicht so bauen, dass sie für alle Eingabemethoden funktionieren?
- [00:28:20] Encrypted Media Extensions
- Inhalte im Web zu schützen ist eine problematische Angelegenheit, da Medien per se erst einmal offen zugänglich sind und somit downloadbar. Oft wird versucht die Inhalte beispielsweise durch Flash zu schützen. Diese Methode ist allerdings proprietär. Das W3C versucht nun mit einer eigenen Spezifikation für verschlüsselte Medien eine standardisierte Methode fürs Web zu kreieren.
[00:41:39] Keine Schaunotizen
- AngularJS Buch / Tutorial
- Ein freies Buch über AngularJS, dass sich gerade noch in der Entwicklung befindet.
- csste.st
- Resources und Tools zum Thema CSS Tests.
- How to markup sub-headings (now that <hgroup> is gone)
- Steve Faulkner beschreibt einige Methoden um Subheadlines mit den richtigen Tags zu verstehen.
- Unicode Table
- Eine übersichtliche Tabelle der Unicode Zeichen zum einfachen Copy&Paste.
- Ghostlab
- Ein weiteres Tool zum Debugging Cross-Browser und Cross-Device.
- The :empty selector
- Der CSS Selector :empty wird viel zu selten verwendet. Hier gibt es eine Einführung und eine Liste an Dingen, die man bei der Nutzung beachten sollte.
- Zopfli
- Mathias Bynens beschreibt den neuen Komprimierungsalgorithmus Zopfli und stellt Tools zur Nutzung vor.
- Avoiding Unnecessary Paints
- Wie man verhindert unnötige Repaints im Browser während des Scrollens verhindert, beschreibt Paul Lewis.
Hans und Rod luden sich Marc Hinse ein, um den wöchentliche Tratsch mal streng Badisch abzuwickeln – Wir können alles, außer Hochdeutsch.
[00:00:20] News
- <hgroup> kommt weg
- Weil
<hgroup> nicht fristgerecht von Browserherstellern umgesetzt wurde, wird es aus der Spezifikation gestrichen.
Schaunotizen
- [00:01:29] Blink
- Nach Jahren des Mitwirkens trennt sich Google nun von WebKit und macht mit Blink ihr eigenes Ding. Obwohl das erstmal wenige Auswirkungen für uns Webentwickler haben sollte, haben ganz viele Leute ganz viele Meinungen:
- [00:17:25] Servo
- Mozilla forscht schon länger an einer neuen Renderingengine namens Servo. Samsung hat nun die Basis geschaffen, um das Projekt auch auf seinen ARM-basierten Geräten laufen zu lassen.
- [00:20:55] Media Queries are a hack
- Media-Queries gruppieren unterschiedliche CSS-Anweisungen nach Browsereigenschaft. Es stellt sich die Frage, ob die Verfeinerung einzelner CSS-Anweisungen um die Browsereigenschaft-Einschränkung nicht das logischere Mittel wäre.
- [00:29:09] Responsive Deliverables
- „Responsive“ ist in aller Munde. Doch hat man auch schon angefangen das Konzept „Seite“ zu verlassen und über „Module“ respektive „Komponenten“ nachzudenken?
- [00:31:27] New save symbol needed?
- Alle Jahre wieder taucht die Frage auf, ob gewisse Symbole noch zeitgemäß sind. Diesmal traf es (wieder mal) die gute alte Diskette. Man argumentiert, dass die heutige Jugend nicht einmal mehr wisse, was eine Diskette überhaupt sei und deshalb eine andere Metapher für „Speichern“ herbeigezaubert werden müsse. Wir sehen das anders, wie In Defence of the Floppy Disk Save Symbol schön schildert.
[00:42:53] Glücksrad
- CDATA sections
- Das von XML geerbte
<![CDATA[ wird benutzt, um den Inhalt eines Elements wörtlich zu nehmen, also nicht durch den Parser zu schleusen. Man hat das früher gerne um Inline-JavaScript gepackt, weil XHTML ja ganz Hip war. Das ist bei HTML5 aber so nicht mehr notwendig.
[00:46:48] Keine Schaunotizen
- Media Queries in SVG images – Cloud Four Blog
- Media Queries lassen sich auch in SVG nutzen. Das nette daran, ein
max-width wirkt sich hier nicht auf den Viewport, sondern das Bild aus. So kann man also den Inhalt eines SVG Bildes abhängig von der Größe des Bildes nach Belieben umbauen.
- <learning class=’always‘>…
- Wie fange ich eigentlich an AngularJS zu lernen?
- 10 tips for designing localised interfaces
- 10 einfache – jedoch gute – Tips einigen Problemen bei mehrsprachigen Webseiten aus dem Weg zu gehen.
- How To Sell The Value Of Mobile To Clients
- Wie verkaufe ich meinen Kunden eigentlich den angeblichen Mehraufwand für Responsive Design?
- Annotate your code
- In Chromes DevTools kann man die Rendering Timelines mit Markern versehen
- Page weight grows 24% year-over-year (not 44%)
- Performance-Papst rudert zurück, wenn auch nur ein bisschen.
- datalist experiment
- Zeigt was der Chrome so alles mit
<datalist> anstellen kann. Wir wollen das in allen Browsern. Heute!
- [Job] Interaction Designer
- München: Google sucht einen Interaction Designer für seine DevTools.
- [Job] Developer Evangelist
- Überall: mailjet such einen Developer Evangelist
- [Job] Junior Mobile Web Developer
- Berlin: Geil,Danke! sucht einen Mobile Web Developer.
Kahlil und Rod luden Andreas Dantz ins virtuelle Studio ein, um die letzte Internetwoche zu reflektieren.
Schaunotizen
- [00:00:23] CSS Counter Styles
- CSS Counter Styles Level 3 (Working Draft) beschreibt wie man Listen (
<ul> und <ol>) mit eigenen Zählerstilen versehen können werden wird. Der Futur ist leider korrekt, denn Implementationen lassen noch auf sich warten.
- [00:06:35] Mobile Betriebssysteme
- LG kauft webOS um damit seine SmartTVs zu betreiben. Ob und wann das von Palm und HP entwickelte, auf Webstandards pochende, Betriebsystem auch auf LGs SmartPhones zum Einsatz kommt, ist noch nicht so ganz klar. Mozilla Firefox OS Startet im zweiten Quartal 2013 – mit einer Menge von Partnern.
- [00:14:17] HTML5-Linkelement
- Ian Devlin erklärt uns was das gute alte
<a> denn zwischenzeitlich alles kann. Interessant ist vor allem die Möglichkeit Downloads von Resourcen des Servers, sowie der JavaScript Laufzeit des geöffneten Dokuments zu erzwingen. Auch sinnieren wir über den Sinn und Unsinn des ping Attributs.
- [00:27:41] jQuery Europe Conference
- Schön war’s beim Kaiser. JavaScript spricht man auch in den prunkvollen Hallen der Paradeiser-Esser. Viele interessante Talks, leider keine Videos. Ohne jQuery-Bezug, stellte man die CSP – Content Security Policy vor. In Chrome kann man Version 1.0 bereits testen.
[00:36:34] Keine Schaunotizen
- grunt-parallel
- … erlaubt das parallele Ausführen bestimmter Aufgaben. Üblicherweise werden Tasks in Sequenz ausgeführt, was aber nicht immer Notwendig ist. Hier kann grunt-parallel für etwas mehr Geschwindigkeit sorgen.
- Dig Deep into CSS Gradients
- … ist ein toller Artikel über die Funktionsweise von Farbverläufen.
- CSS Tests – fonts and text
- … nennt @ppks zuletzt gefundene Mobile Browser Bugs.
Als lieben Gast hatten sich Christian und Hans diesmal Sebastian Golasch dazu geholt, der bereits einige Male zu Gast war und jedes mal eine Bereicherung für die Sendung ist.
[00:00:22] News
- Adobe Edge Relow
- Adobe veröffentlicht ein Tool für Responsive Webdesign um Photoshop zu verdrängen.
- Grunt 0.4.0 veröffentlich
- Nach langer Entwicklungszeit ist Grunt 0.4.0 nun endlich veröffentlicht.
Schaunotizen
- [00:01:53] asm.js
- Mozilla veröffentlicht asm.js, einer Untermenge von JavaScript, getrimmt auf Performance. Wir diskutieren über den Einsatzbereich von asm.js und on man es wirklich braucht.
- [00:15:02] UA Sniffing
- Pamela Fox schreibt über UA Sniffing und Fälle, bei denen es sinnvoll sein kann auf UA Sniffing zu vertrauen, anstatt Feature Detection zu nutzen.
- [00:25:31] Opera wechselt zu WebKit
- Buhuu… Die Meldung der Woche. Auch wir beteiligen uns an der Diskussion und sprechen über die Vor- und Nachteile dieses Schrittes. Als Diskussionsgrundlage bauen wir unter anderem auf Jake Archibalds Artikel auf.
[00:40:45] Keine Schaunotizen
- Edge Conference – Videos
- Einige interessante Panel-Diskussionen zu verschiedensten Webthematiken.
- Screensharing with getUserMedia
- Chrome Canary unterstützt Fullscreen-Sharing. Eine Demo dazu hat Eric Bidelman zusammengezimmert.
- Dialogboxen und a11y
- Nicholas Zakas beschreibt wie man mit wenigen aria-roles und ein bisschen JavaScript Dialogboxen zugänglich macht.
- Distilled Hype sucht Nachwuchs
- Unser Co-Host Kahlil such Hilfe für sein Link-Blog Distilled Hype.
- Flexbox richtig gemacht
- Chris Coyier beschreibt, wie man Flexbox richtig nutzt – mit der alten und neuen Syntax kombiniert.
- Textillate
- Mit Textillate kann man Buchstaben und Text toll animieren.
- Lazy Line Painter
- LLP malt SVGs. Demo anschauen!
