Frontend Focus
Issue 206 — September 16, 2015
The ‘template’ element lets you define ‘inert’ content in HTML that won’t be rendered or executed by the browser but that you can then bring into the DOM later. It works almost everywhere except IE and Edge.
Christian Heilmann

Some 2 years since the last major release, Modernizr 3, a JS library that lets you detect the availability of numerous next-gen Web technologies, brings a lot of things up to date and over 100 new types of ‘detect’ have been added.

Mozilla has been working on a Microsoft-led proposal called Directory Upload for allowing full directory uploads from the browser. Learn more here including why they haven’t adopted Chrome’s approach.
Jonathan Watt
On Hired, we'll bring the options to you. With over 2,000 pre-screened tech companies in 10 cities in the US UK, you'll be sure to find what you're looking for. Join Hired today.   Sponsor

Heydon Pickering demonstrates using frames defined in SVG along with CSS defined transitions to produce striking and efficient cel-style animations.
Smashing Magazine

Paul Irish demonstrates how the Chrome DevTools can help you understand where time is spent in your app and effective means of profiling your performance.
The Polymer Summit 2015

Google provides details on what they are doing to progress WebRTC and related internal developments - they also cover details on the recently announced Alliance for Open Media, an effort to create royalty-free video codecs.

SVG (Scalable Vector Graphics) is an increasingly useful and supported format for specifying vector and mixed vector/raster graphics. Tons of examples and code buried within.

A well produced dungeon crawler game. Loads fast, good graphics, a great example of what HTML5 and WebGL can do when used elegantly. Must be good as I’m not into dungeon crawlers and it stole 20 minutes..
Little Workshop

Fluent is an annual JavaScript and Web Platform conference (which I chair) based on San Francisco. We’re looking for more great speakers for 2016’s event.
O'Reilly Media

Jobs Supported by

    Can't find the right job? Want companies to apply to you? Try

    In Brief

    Opera 32 Released: What's New? news
    It’s based on Chromium 45.

    Chrome working to make 'link' stylesheets in body render-block only subsequent content news
    Jake Archibald on Twitter

    The new .NET MISSION: IMPOSSIBLE – ‘Situation Critical’ news
    Find out why ANTS Performance Profiler is the ultimate .NET profiler in a new online adventure. Read it now.
    Red Gate Software  Sponsor

    Intent to Implement: Shadow DOM v1 news

    Chrome for Android Considering 'absolutedeviceorientation' Event  news
    Boris Smus

    WebM/VP9 Support Coming to Microsoft Edge news
    VP9 is an open source video format. MS’ implementation will support adaptive streaming using Media Source Extensions.
    Microsoft Edge Dev Blog

    Avoiding Redundancy with WAI-ARIA in HTML Pages tutorial
    A look at where ARIA properties, roles, and states are and aren’t useful in modern markup.

    Give Grunt the Boot: A Guide to Using npm as a Build Tool tutorial

    Scroll Snapping with CSS Snap Points tutorial
    Surfin' Safari

    Creating an Accessible Breakout Game Using Web Audio and SVG tutorial
    David Rousset

    Controlling WebRTC PeerConnections with an Extension tutorial
    Firefox 42 added features to exercise added control over WebRTC RTCPeerConnections, IP address gathering, and what IP addresses are exposed.
    Mozilla Hacks

    A Short Note on Coding 'alt' Text 
    What happens when alt text contains line breaks?
    Steve Faulkner

    Polymer's Styling System video
    A look at working around the encapsulation of Web Components so you can style them from the ‘outside’.
    The Polymer Summit 2015

    Realtime Reflections on the iPhone 6s Product Page with WebGL video

    The Future of ORTC with WebRTC video
    A review of Object RTC (ORTC) and how its improvements are making their way into WebRTC already. (ORTC enables mobile endpoints to talk to servers and browsers using RTC capabilities via Javascript APIs.)

    Building A WebRTC App Live on Stage video
    Tim Panton

    Web Bluetooth API: Grumpy Goes Flying video
    Demo of the Web Bluetooth API on Chrome OS 45 connecting to a Bluetooth toy.

    Mind the Gap - State of the Browser 2015 video
    Audio not great.
    Christian Heilmann

    Creating High Resolution Background Images with CSS video
    A 5 minute screencast by Russ Weakley.

    ContentTools: A Small & Beautiful WYSIWYG Editor for HTML Content tools code
    Anthony Blackshaw

    160 js13kGames 2015 Entries demo news
    The popular JavaScript and HTML5 game development contest attracted 160 entries which you can enjoy here.
    js13kGames Indie WebGL Game Repository demo

    One-Dimensional Cellular Automata Playground demo
    Alex Bell