Frontend Focus
Issue 282 — March 22, 2017

Do you use React? If so, check out React Status. It's our sister newsletter dedicated to React and React Native. The latest issue is here. :-)

Gajendar Singh explains HTML’s custom data attributes, why they’re useful, how to use them from CSS, and manipulating them with JavaScript.
SitePoint

How Dropbox rolled out same-site cookie based defenses, and some guidelines on how you can do the same for your site.
Dropbox

Building desktop apps using Web technologies has never been easier. This tutorial compares NW.js and Electron and digs into the key concepts and issues.
Adam Lynch

GrapeCity
Find out how Wijmo’s advanced UI components can help you to create an Angular application quickly and efficiently – we take you through step-by-step.
GrapeCity   Sponsor

Make your credit card form support autocompletion, improve how numbers are laid out, and perform simple validations on the fly.
Margarita Klubochkina

IndexedDB 2.0 is now fully supported. IFRAME elements now support a allow-top-navigation-by-user-activation sandbox keyword allowing them to navigate the top-level page.
Google

Which framework should we be using, and why? Also, should we be using the whole framework or just parts of it?
Jen Kramer

Jobs Supported by Hired.com

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

In Brief

CodePen Projects: Edit Multiple Files and Host Sites on CodePen news
A big step forward for the popular HTML and CSS sandbox.
Chris Coyier

DRM in HTML5 Takes Its Next Step Toward Standardization news
Peter Bright

Guetzli: A New Open Source JPEG Encoder Yielding 35% Smaller Files news
Google

Workshop: Brian Lonsdorf's Practically Functional Programming course
Master monoids, monads & other algebraic abstractions to produce highly composable, safer, & simpler code.
Forward Courses  Sponsor

Animating Your Site's Hero Header with CSS tutorial
Donovan Hutchinson

Smoothly Animating 1000s of Points with HTML5 Canvas and D3 tutorial
Peter Beshai

Experimenting with the Web Share API tutorial
Phil Nash

Text Effects with CSS (and A Little 'contenteditable' Trick) tutorial demo
Chris Coyier

css-razor: A Fast Way to Remove Unused Selectors From CSS tools
Uses cheerio to parse static html to removed unused selectors in CSS.
Tim Scanlin

A Chrome Extension That Fills Out Forms Automatically tools
Aims to make life for developers easier. Can use faked or pre-defined info.
Stephan Ahlf

SQL Source Control: track each change to your SQL Server database tools
Get a full history in your source control system. See who made changes, what they did why. See how.
Red Gate  Sponsor

Barebone: A Minimal SCSS-Based Framework for Rapid UI Development code
Barebone

Fetch Inject: Dynamically Inline Assets Into The DOM using Fetch Injection code
Here’s an introduction and explanation.
Josh Habdas

moveTo: A Dependency-Free Scroll Animation JavaScript Library code
Hasan Aydoğdu

Vizceral: WebGL Animated Traffic Visualization Tool code
Netflix

Planck.js: A Pure JS Rewrite of Box2D's Physics Engine code
For cross-platform HTML5 game development. Demos.
Ali Shakiba

minireset.css: A Tiny Modern CSS Reset code
Jeremy Thomas