---
title: "This Week's HTML5, CSS and Browser Tech News #282"
publication: "Frontend Focus"
issue: 282
published_at: "2017-03-22"
canonical_url: "https://frontendfoc.us/issues/282"
---

This Week's HTML5, CSS and Browser Tech News #282

[Read this e-mail on the Web](http://frontendfoc.us/issues/282)

Frontend FocusIssue 282 — March 22, 2017

**Do you use React? If so, [check out React Status](https://react.statuscode.com/).** It's our sister newsletter dedicated to React and React Native. The [latest issue is here.](https://react.statuscode.com/latest) :-)[How to Use HTML5 Custom Data Attributes (and Why)](https://www.sitepoint.com/how-why-use-html5-custom-data-attributes/?utm_source=frontendfocus&utm_medium=email)Gajendar Singh explains HTML’s custom data attributes, why they’re useful, how to use them from CSS, and manipulating them with JavaScript. SitePoint 
[Preventing Cross-Site Attacks using Same-Site Cookies](https://blogs.dropbox.com/tech/2017/03/preventing-cross-site-attacks-using-same-site-cookies/?utm_source=frontendfocus&utm_medium=email)How Dropbox rolled out same-site cookie based defenses, and some guidelines on how you can do the same for your site. Dropbox 
[Beyond The Browser: From Web Apps To Desktop Apps](https://www.smashingmagazine.com/2017/03/beyond-browser-web-desktop-apps/?utm_source=frontendfocus&utm_medium=email)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\](https://copm.s3.amazonaws.com/99626236.png)](http://wijmo.com/blog/create-quick-start-application-angular-wijmo/?utm_source=frontend_focus&utm_medium=primary_newsletter_3.22.17&utm_content=Angular2)[Create a Quick-Start Application with Angular and Wijmo](http://wijmo.com/blog/create-quick-start-application-angular-wijmo/?utm_source=frontend_focus&utm_medium=primary_newsletter_3.22.17&utm_content=Angular2)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. GrapeCitySponsor
[Ways to Improve Your Billing Form's UX](https://www.smashingmagazine.com/2017/03/improve-billing-form-ux/?utm_source=frontendfocus&utm_medium=email)Make your credit card form support autocompletion, improve how numbers are laid out, and perform simple validations on the fly. Margarita Klubochkina 
[Chrome 58 Beta: IndexedDB 2.0 and a New IFRAME Feature](https://blog.chromium.org/2017/03/chrome-58-beta-indexeddb-20_21.html?utm_source=frontendfocus&utm_medium=email)[IndexedDB 2.0](https://hacks.mozilla.org/2016/10/whats-new-in-indexeddb-2-0/) is now fully supported. IFRAME elements now support a [`allow-top-navigation-by-user-activation`](https://html.spec.whatwg.org/multipage/browsers.html#attr-iframe-sandbox-allow-top-navigation-by-user-activation) sandbox keyword allowing them to navigate the top-level page. Google 
[Which Responsive Design Framework Is Best? It Depends..](https://www.smashingmagazine.com/2017/03/which-responsive-design-framework-is-best/?utm_source=frontendfocus&utm_medium=email)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\](http://s3.cooperpress.com.s3.amazonaws.com/hired1.png)](https://hired.com/join/?utm_source=petercooperpress&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-swe%29%28q2-17-frontend-focus%29&utm_content=newsletter)

- [Sr. Front-End Engineer -- React/Redux (Brannan St, San Francisco)](http://quri.com/company/careers/?utm_source=frontendfocus&utm_medium=email)We're looking for an enthusiastic app developer to join our team. We use React, Flow, GraphQL, Relay, Apollo Client on a daily basis. Quri Inc
- [Frontend Developer at X-Team (Remote)](https://x-team.com/frontend-developer/?utm_source=newsletter&utm_medium=email&utm_campaign=frontend-march-22-17)We're looking for a frontend developer with an extensive knowledge of Javascript. We are 100% remote and we provide the funding needed to help you achieve your goals and grow. X-Team
- [Software Engineer, Web - Zürich, Switzerland](https://www.centralway.com/de/careers/open-positions/details#oii51fwq?utm_source=frontendfocus&utm_medium=email)Centralway is seeking an experienced programmer to come and join the team. The right candidate will be responsible for building and maintaining high performance web applications with cutting-edge technologies. Centralway Numbrs

Can't find the right job? Want companies to apply to _you?_ [Try Hired.com.](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_term=cat-tech-frontend&utm_campaign=q2-17-frontend)

In Brief

[CodePen Projects: Edit Multiple Files and Host Sites on CodePen](https://blog.codepen.io/2017/03/20/codepen-projects-is-here/?utm_source=frontendfocus&utm_medium=email) news 
A big step forward for the popular HTML and CSS sandbox.
Chris Coyier

[DRM in HTML5 Takes Its Next Step Toward Standardization](https://arstechnica.com/information-technology/2017/03/drm-in-html5-takes-its-next-step-toward-standardization/?utm_source=frontendfocus&utm_medium=email) news
Peter Bright

[Guetzli: A New Open Source JPEG Encoder Yielding 35% Smaller Files](https://research.googleblog.com/2017/03/announcing-guetzli-new-open-source-jpeg.html?utm_source=frontendfocus&utm_medium=email) news
Google

[Workshop: Brian Lonsdorf's Practically Functional Programming](https://forwardcourses.com/workshops/28?utm_source=frontendfocus&utm_medium=email) course 
Master monoids, monads & other algebraic abstractions to produce highly composable, safer, & simpler code.
Forward CoursesSponsor

[Animating Your Site's Hero Header with CSS](https://cssanimation.rocks/animating-hero-header/?utm_source=frontendfocus&utm_medium=email) tutorial
Donovan Hutchinson

[Smoothly Animating 1000s of Points with HTML5 Canvas and D3](https://bocoup.com/blog/smoothly-animate-thousands-of-points-with-html5-canvas-and-d3?utm_source=frontendfocus&utm_medium=email) tutorial
Peter Beshai

[Experimenting with the Web Share API](https://philna.sh/blog/2017/03/14/the-web-share-api/?utm_source=frontendfocus&utm_medium=email) tutorial
Phil Nash

[Text Effects with CSS (and A Little 'contenteditable' Trick)](https://css-tricks.com/text-effects-css-little-contenteditable-trick/?utm_source=frontendfocus&utm_medium=email) tutorial demo
Chris Coyier

[css-razor: A Fast Way to Remove Unused Selectors From CSS](https://github.com/tscanlin/css-razor?utm_source=frontendfocus&utm_medium=email) tools 
Uses [cheerio](https://github.com/cheeriojs/cheerio) to parse static html to removed unused selectors in CSS.
Tim Scanlin

[A Chrome Extension That Fills Out Forms Automatically](https://github.com/s-a/deep-autofill-chrome-extension?utm_source=frontendfocus&utm_medium=email) 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](http://www.red-gate.com/products/sql-development/sql-source-control/?utm_source=frontendfocus&utm_medium=displayemail&utm_content=track_every_change_v2&utm_campaign=sqlsourcecontrol&utm_term=email-25330) tools 
Get a full history in your source control system. See who made changes, what they did why. [See how.](http://www.red-gate.com/products/sql-development/sql-source-control/?utm_source=frontendfocus=displayemail=track_every_change_v2=sqlsourcecontrol=email-25330)
Red GateSponsor

[Barebone: A Minimal SCSS-Based Framework for Rapid UI Development](https://github.com/getbarebone/barebone?utm_source=frontendfocus&utm_medium=email) code
Barebone

[Fetch Inject: Dynamically Inline Assets Into The DOM using Fetch Injection](https://github.com/jhabdas/fetch-inject?utm_source=frontendfocus&utm_medium=email) code 
Here’s [an introduction and explanation](https://hackcabin.com/post/managing-async-dependencies-javascript/).
Josh Habdas

[moveTo: A Dependency-Free Scroll Animation JavaScript Library](https://github.com/hsnaydd/moveTo?utm_source=frontendfocus&utm_medium=email) code
Hasan Aydoğdu

[Vizceral: WebGL Animated Traffic Visualization Tool](https://github.com/Netflix/vizceral?utm_source=frontendfocus&utm_medium=email) code
Netflix

[Planck.js: A Pure JS Rewrite of Box2D's Physics Engine](https://github.com/shakiba/planck.js?utm_source=frontendfocus&utm_medium=email) code 
For cross-platform HTML5 game development. [Demos.](http://piqnt.com/planck.js/)
Ali Shakiba

[minireset.css: A Tiny Modern CSS Reset](http://jgthms.com/minireset.css/?utm_source=frontendfocus&utm_medium=email) code
Jeremy Thomas

Curated by [Peter Cooper](http://twitter.com/peterc) and [Chris Brandrick](http://twitter.com/chrisbrandrick) and published by [Cooperpress](https://cooperpress.com/).

[Stop getting FrontEnd Focus](*|UNSUB|*) : [Change email address](*|UPDATE_PROFILE|*) : [Read this issue on the Web](http://frontendfoc.us/issues/282)

Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK