Frontend Focus
Issue 266 — November 16, 2016
In 30 minutes, Paul Irish shares what’s new in Chrome’s DevTools and how they’ll help you when debugging your sites and front-end work. A lot of useful stuff here.
Paul Irish

Monkey testing is a method of testing that generates random user input - clicks, swipes, entering input - with the sole purpose of finding issues with, or entirely breaking, your app.
Alicia Sedlock

A look at some of the tricks you can pull off with the rgba color function (well supported by all modern browsers).
Ahmad Shadeed

Kendo UI delivers everything you need to build modern web applications under tight deadlines - from the must-haves Data Grids & DropDowns to Spreadsheet & Scheduler. Choose from 70+ UI components and combine them to create beautiful, responsive apps.
progress   Sponsor

Firefox 50 is a big release for developers with lots of tweaks to the developer tools, but WebRTC, the Web Audio API, Pointer Lock API, Drag and Drop API, and more have been improved.

An incredibly extensive/deep look at Unicode, character sets and encodings on the Web, and how emoji fits into the big picture.
Rob Reed

Osvaldus Valutis looks at what can done to improve the loading of ads when working to optimize your site.
CSS Tricks

Jobs Supported by

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

In Brief

Safari Technology Preview Release 17 Is Now Available news
Jon Davis

Google Says There Are 2 Billion Chrome Browsers in Use Today news
Nick Statt

Intent to Ship CSS Grid Layout in Chrome news
Manuel Rego

Kranky Geek WebRTC Event (San Francisco, Nov 18) news
A Google-hosted WebRTC event later this month focusing on mobile real time communications.
Kranky Geek

Using Y-Axis Transforms and Matrices in CSS tutorial

Creating SVG 'Invisible Pen' Effects with Vivus.js tutorial
Ivaylo Gerchev

Things I've Learned About CSS Grid Layout tutorial
Oliver Williams

Throwaway Code opinion
Do you create code meant to be thrown away? Corgibytes’ Chief Code Whisperer Scott Ford explains why he does.
Corgibytes  Sponsor

Is Model-View-Controller Dead On The Front End? opinion
Alex Moldovan

Don't Use Long Polling - Just Use WebSockets opinion
Jonathan Gros-Dubois

The SVG 2 Conundrum opinion
Will SVG 2 ever make it into widespread production?
Chris Coyier

Sprite Spirit: Image Sprites to Animation tools
Generator and SCSS Mixin that brings image sprites to life.
Elior Shalev Tabeka

Simulate Slow Connections with The Network Throttling Tool tools
Firefox DevTools has now a network throttling tool to simulate slow connections.
Firefox Nightly News

Using The New CSS Coverage Tool in DevTools tools
Discover what CSS is unused on a page, even during page interaction.
Umar Hansa

Discover the world’s most trusted SQL Server comparison tool tools
Enjoy a free trial of SQL Compare, the industry standard for comparing and deploying SQL Server schemas.
Red Gate  Sponsor Large Scale WebGL-Powered Data Visualization code
A WebGL-powered framework for visual exploratory data analysis of large datasets.

Clarity: A HTML/CSS/UX Design System and Angular 2 Components code
Jumpstart projects with a UI kit, set of Angular 2 components, and HTML/CSS framework from VMware.

Milligram: A Minimalist CSS Framework (2KB gzipped) code

CSS-Only Sliding Panels using Transforms code demo

Chrome-Style Tabs Reproduced with HTML/CSS/ES6 demo
Adam Schwartz

Using box-decoration-break For Multi-Line Padded Text demo
Nick Salloum