Frontend Focus
Issue 298 — July 12, 2017
Kalpesh Singh uses Flexbox features to build a ‘mega’ drop-down navigation menu as are particularly common on e-commerce sites recently.
SitePoint

..with no dependencies. Demo here.
Jared Reich

Some thoughts on old browsers and how to make good decisions about the technology choices that you have.
Rachel Andrew

Sencha, Inc
Learn how to build data-intensive, cross-platform web apps leveraging over 115 Sencha components and React.
Sencha, Inc   Sponsor

Tim Berners-Lee, inventor of the Web and director of the W3C, is supporting the EME spec (commonly thought of as ‘DRM for the Web’) to gain W3C Recommendation status.
Zak Rogoff

A helpful refresher on collapsed margins: what occurs when two block-level elements with meeting vertical margins combine.
Ire Aderinokun

Using @supports, you can apply styles conditionally based on support for certain features. Not a new article but now almost universally supported.
Jen Simmons

“You change fonts, move CSS around ad infinitum, and agonize over single pixels. You should also care about your URLs.”
Scott Hanselman

Jobs Supported by Hired.com

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

In Brief

The Options for Programmatically Documenting CSS tutorial
“documentation should be kept as close to the code as possible.”
Kaloyan Kosev

A Beginner’s Guide to Making Progressive Web Apps tutorial
Yuvesh Tulsiani

Building Pattern Libraries With Shadow DOM in Markdown tutorial
Heydon Pickering

The CSS 3 Speech Module and iOS tutorial
VoiceOver on iOS supports 4 settings on the CSS speak-as property.
Eric Bailey

Designing The Perfect Date and Time Picker tutorial
Vitaly Friedman

Browser Security in 2017 video
A good summary of the current state of security oriented browser technologies.
Johann Hofmann / Mozilla

How to Label Shadow DOM video
Rob Dodson shares a quick accessibility tip for labelling content inside of a shadow root.
Google Chrome Developers

Browser Module Loading: Can We Stop Bundling Yet? opinion
Includes performance tests comparing bundled and unbundled.
Sérgio Gomes

Life Is About to Get Harder for Sites Not Using HTTPS opinion
Increased numbers of warnings in browsers will make users think twice.
Troy Hunt

CSS vs. JavaScript: Trust vs. Control opinion
Thoughts on what using CSS means and how programmers may not use it to its strengths.
Christian Heilmann

Inline/Live Validation Is Problematic opinion
Simple = Human

$20 Free on a new Linode account tools
Linux cloud hosting starting at 1GB of RAM for $5/mo. Use promo code HTML520 and get $20 credit.
Linode  Sponsor

csvtotable: CLI Utility to Convert CSV Files to Sortable HTML Tables tools
Vivek R

6 Material Design CSS Frameworks Compared code
SitePoint

fractures: A Baseline Atomic CSS Toolkit code
Provides a set of non-blocking, atomic, utility classes for quick prototyping.
Krisztian Puska

pinhole-js: A 3D Wireframe Drawing Library for HTML Canvas code
Josh Baker

Tonik: A WordPress Starter Theme Using Modern Web Practices code
An open-source theme which leans heavily on ES6, Sass, webpack, and modern PHP features.
Tonik

AC-D3: Library for Building Audiovisual Charts in D3 code
Bring the power of embedded videos to D3 visualizations.
Michals, Worrel and Nunns

It’s easy to version control your database alongside your application 
Connect your database to your version control system with SQL Source Control and keep track of every change.
Redgate  Sponsor