Frontend Focus
Issue 299 — July 19, 2017
A practical guide to the relatively complex world of WebRTC, a set of real-time communications mechanisms that can be useful for things like voice and video chat, file transfers, chat, etc.

A thorough guide to things you need to consider when creating ‘slider’ UI elements.
Vitaly Friedman

Jens argues that CSS resets achieve what devs “often do anyway” adding that the same result can be acheived “with one or two declarations instead of an entire extra style sheet”.
Jens Oliver Meiert

Simple Programmer
Technical knowledge alone isn't enough—increase your income by leveling up your "soft skills." Learn new skills faster, command more respect, find work you love, and earn what you're worth. Get the book for $0.99 (48 hours only).
Simple Programmer   Sponsor

Sass now fully supports CSS custom properties (more info here), first class functions, bracketed lists, and the ::slotted pseudo-element.
Natalie Weizenbaum

Key pointers on how to establish a practical approach to performance, what to measure, and how to set goals.
David Gilbertson

“a good bit has changed in browser land since the last ‘You Might Not Need jQuery’ article you might have stumbled upon”
Ollie Williams

Cross-platform and supporting Chrome, Firefox, PhantomJS, TagUI lets you create natural-language style scripts for performing Web actions.

Jobs Supported by

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

In Brief

Reducing CSS Bundle Size 70% tutorial cutting the class names and using scope isolation.
Gajus Kuizinas

Advanced SCSS, or 16 Cool Things You May Not Have Known Your Stylesheets Could Do tutorial
Jarno Rantanen

Introduction to Clipping Out Shapes with CSS's `clip-path` tutorial

Webpack’s import() Will Soon Fetch JS + CSS — Here’s How You Do It tutorial
James Gillmore

How to Use CSS Variables for Animation tutorial
Dennis Gaebel

Creating a Cut-Out 'Sticky Tape' Effect for Images with SVG and CSS tutorial
Ana Tudor

Building Better Backgrounds tutorial
Approaches to stacking CSS background images on mobile for improved readability, using object-fit and ES2015+.
Zack Krida

Responsive Typography using calc(), vw, and Sass Superpowers tutorial
How to precisely scale text as the viewport expands and contracts.
Nate York

Add interactive features to your site in minutes 
With features like in-app notifications, real-time dashboards and multi-user collaboration. Start for free, with a few lines of code.
Pusher  Sponsor

What I Learned About Vue.js from Building a Chrome Extension story
vuejs developers

Musings on HTTP/2 and Bundling opinion
Jeremy Wagner

Evergreen Websites for Evergreen Browsers video
Rachel’s talk from this year’s Fluent conf, covering CSS Grid, Feature Queries, Exclusions and more.
Rachel Andrew

What's New in Chrome 59? video
Take a look at the new features of Chrome 59 (e.g. Headless Chrome). Filmed at Ember London.
Will Raxworthy

Troubleshoot slow web apps with Datadog tools
Get alerts for performance problems and find the bottleneck in your application with end-to-end request tracing.
Datadog  Sponsor

Introducing the Website Speed Test Image Analysis Tool tools
Eric Portis

DoppioJVM: A JVM in 100% JavaScript code

raf-schd: A Scheduler Based on requestAnimationFrame code
Alex Reardon

Babylon.js 3.0: A Framework for Building 3D Experiences code
Here’s a demo of it in action.
David Catuhe