Frontend Focus
Issue 244 — June 15, 2016
A look at the themes and trends for the popular Chrome DevTools going forward, including an improved ‘Device Mode’, source diffing, and live Sass editing.

Originally, headings were meant to nest within sectioning elements, but in actual user agents, things haven’t worked out as originally intended.
Steve Faulkner

A slimmer, faster version of jQuery without all the old IE workarounds and taking advantage of modern browser APIs. There’s an upgrade guide and a script to help with migrations.
jQuery Foundation

Frontend Masters
Create resolution-independent, scalable, complex animations for a myriad of use cases across the web with SVG.
Frontend Masters   Sponsor

A fun tutorial from browser-based musical mastermind Stuart Memo on tying up the Web Audio API and pointer location to recreate an early electronic instrument.
Stuart Memo

At WWDC, Apple announced its “Pay” system will become available on the Web, and Apple’s Edward O’Connor wonders if the existing Payment Request API could become compatible with it.

Building on top of open source tools helped improve the quality of CSS at Facebook and set the stage for community-wide rules and guidelines.
Juriy Zaytsev

Web Inspector, as used in WebKit and Safari, now includes two new timelines for debugging a page’s memory usage.
Joseph Pecoraro

Jared Faris discusses the most important new features in web standards, in particular JavaScript, that you should be watching carefully.
Telerik Developer Network

Jobs Supported by

  • Frontend Developer at X-Team (Remote)We're looking for a developer with extensive knowledge of HTML5, CSS3 and JavaScript. We are 100% remote and we provide the funding needed to help you achieve your goals and grow as a remote developer. X-Team
  • The Easiest Way to Find a JobHired lets you sit back while job offers come to you. When you complete your profile, instantly apply to 3,500+ companies on the platform who will contact you with job offers, including salary and equity up-front. Try it today.

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

In Brief

What's New in Chromium 51 and Opera 38 news
Also covers Chrome 51. Lots of ES6 updates, but also the Presentation API and Intersection Observer API.
Mathias Bynens

What’s New in Safari 10 for Web Developers news
Safari 10 will ship with macOS Sierra this fall.

Google Fonts Site Gets Major Update news
The fonts Google hosts are commonly used across the Web, so it’s great to see the site become even better.
Google Fonts

Firefox 47 for Developers news

Next Steps for Legacy Plug-ins in Safari news
On sites offering “Flash and HTML5 implementations of content, Safari users will now always experience the modern HTML5 implementation.”
Ricky Mondello

The SaveAs Webinar: Exporting Content from JavaScript Apps rawurl news
Implementing export functionality in your web apps presents a multitude of challenges. Learn how to tackle them.
Kendo UI by Progress  Sponsor

How z-index and Auto Margins Work in Flexbox tutorial
George Martsoukos

Using The HTML 'lang' Attribute tutorial
Léonie Watson

Performance Observer: Efficient Access to Performance Data tutorial
Beginning in Chrome 52, the performance observer interface is enabled by default, giving you programmatic access to low level timing data.

Building Real-Time Apps with WebSockets and Server-Sent Events tutorial
Mark Brown

Building a WebRTC Video Chat Application with PeerJS tutorial
Wern Ancheta

Faster Rendering on the Web opinion
By eschewing a few “best practices”, we can achieve the web’s promise of immediacy.
Ben Halpern

WebGL, Blending, and Why You're Probably Doing it Wrong opinion
David Hart

Dropsource: New visual builder for mobile apps that codes for you rawurl tools
No more repetitive coding. Visually design an app. Easily connect APIs. Dropsource writes truly native code.
Dropsource  Sponsor

7 PostCSS Plugins to Ease You into PostCSS tools
Craig Buckler

css-grid-inspector: Firefox Extension to See Grid Lines Created by CSS Grid tools

plyr: A Simple HTML5 YouTube and Vimeo Player code
A simple, accessible and customizable player for modern browsers.

A Novel Interactive Customer Feedback Form demo
Drag the monkey’s mouth up or down to submit feedback.
Jamie Coulter