---
title: "#318: Building Accessible Web Menu Systems"
publication: "Frontend Focus"
issue: 318
published_at: "2017-11-29"
canonical_url: "https://frontendfoc.us/issues/318"
---

#318: Building Accessible Web Menu Systems

This Week's HTML, CSS, Browser, and Frontend News — [Read this e-mail on the Web](http://frontendfoc.us/issues/318)

Frontend FocusIssue 318 — November 29, 2017[Building Accessible Web Menu Systems](https://www.smashingmagazine.com/2017/11/building-accessible-menu-systems/?utm_source=frontendfocus&utm_medium=email)A deep exploration of creating accessible menus for the Web, starting from defining exactly what a menu even _is_. Smashing Magazine 
[Generating Wireframe Boxes with CSS and HTML5](https://meyerweb.com/eric/thoughts/2017/11/27/generating-wireframe-boxes-with-css-and-html5/?utm_source=frontendfocus&utm_medium=email)A _really_ neat look at a technique for using CSS and data attributes to create annotated ‘wireframe’ views of Web page elements. Eric Meyer 
[![Percona\](https://copm.s3.amazonaws.com/b2579735.png)](https://learn.percona.com/mongodb-support-cp?utm_source=frontendfocus&utm_medium=email)[Did Your MongoDB Database Hit a Snag?](https://learn.percona.com/mongodb-support-cp?utm_source=frontendfocus&utm_medium=email)Get expert database support immediately so that your applications aren’t crippled by database downtime. Percona Support ensures your database has cost-effective, enterprise-class support from the most trusted team of experts in the business. PerconaSponsor
[An Intro to Scrollama.js for Telling Stories Through Scrolling](https://pudding.cool/process/introducing-scrollama/?utm_source=frontendfocus&utm_medium=email)The what, why, and how behind using a library for efficient ‘scrollytelling’ that uses `IntersectionObserver` in favor of scroll events. Russell Goldenberg 
[The Web Is Broken & Backwards Compatibility Is Holding Us Back](https://christianheilmann.com/2017/11/21/web-truths-the-web-is-broken-and-backwards-compatibility-is-holding-us-back/?utm_source=frontendfocus&utm_medium=email)Christian explores _“the issue of the web not moving fast enough for people and clinging on to seemingly terrible ideas from the past”_. Christian Heilmann 
[Designing for a 'Browserless' Web](https://www.smashingmagazine.com/2017/11/designing-for-a-browserless-web/?utm_source=frontendfocus&utm_medium=email)Mitch takes a close look at PWAs on Android devices and explains how we can pave the way for a new era of ‘browserless’ web browsing. Smashing Magazine 
[Animating Layouts with the FLIP Technique](https://css-tricks.com/animating-layouts-with-the-flip-technique/?utm_source=frontendfocus&utm_medium=email)Stands for First, Last, Invert, Play. It's a technique for animating DOM elements smoothly. David Khourshid 
[A Comprehensive Guide to Font Loading Strategies](https://www.zachleat.com/web/comprehensive-webfonts/?utm_source=frontendfocus&utm_medium=email)A golden-oldie set of pros, cons and helpful tips spanning the various ways of loading Web fonts on your site. Zach Leatherman 


Jobs

- [Software Engineer – Web Clients, ReactJS+Redux](https://careers-discovery.icims.com/jobs/18956/software-engineer---web-clients/job?utm_source=javascriptweekly&utm_medium=email)Join a growing engineering team that builds highly performant video apps across Web, iOS, Android, FireTV, Roku, tvOS, Xbox and more! Discovery Digital Media
- [Software Engineer](https://www.indeed.com/prime?sid=cooperpress&kw=frontend11.29)Indeed Prime is a free service that helps engineers secure top offers from leading companies. Indeed Prime

In Brief

[HTML Media Capture Now a W3C Proposed Recommendation](https://www.w3.org/blog/news/archives/6658?utm_source=frontendfocus&utm_medium=email) news 
An HTML form extension for accessing a device’s media capture features via a file upload control.
W3C

[Bruce Lawson on Editing The W3C HTML5 Spec](http://www.brucelawson.co.uk/2017/editing-the-w3c-html5-spec/?utm_source=frontendfocus&utm_medium=email) news 
Also explains why there are both WHATWG and W3C HTML specs.
Bruce Lawson.

[Building A Simple To Do Web App with Stitch, React, and MongoDB](https://docs.mongodb.com/stitch/getting-started/todo-web/?jmp=cpress&utm_campaign=WW_CP_newsletter_sponsorship_FY17Q3&utm_content=sponsored&utm_medium=display&utm_source=frontendfocus1129) tutorial 
This short tutorial will get you started with MongoDB Stitch.
mongodbSponsor

[Better Date Formatting with the 'time' Element](https://pineco.de/better-date-format-with-time-element/?utm_source=frontendfocus&utm_medium=email) tutorial
Adam Laki

[Common Responsive Layouts with CSS Grid](https://medium.com/samsung-internet-dev/common-responsive-layouts-with-css-grid-and-some-without-245a862f48df?mc_cid=8e04335d59&mc_eid=89382533bf) tutorial 
Some common responsive website layouts to copy, edit, and mess around with.
Jo Franchetti

[Monitoring Unused CSS Using The Power of the DevTools Protocol](http://blog.cowchimp.com/monitoring-unused-css-by-unleashing-the-devtools-protocol/?utm_source=frontendfocus&utm_medium=email) tutorial
Johnny's Dev Blog

[Web Animation API: Unleashing The Power of CSS Keyframes in JS](http://www.javascriptkit.com/javatutors/web-animation-api-tutorial.shtml?utm_source=frontendfocus&utm_medium=email) tutorial
JavaScript Kit

[Rendering Performance From The Ground Up](https://www.youtube.com/watch?v=xuifyagAeu4) video 
An easy to understand introduction to performance concerns when rendering in the browser.
Martin Splitt

[Can Firefox Quantum Regain Mozilla's Browser Market Share?](https://amosbbatto.wordpress.com/2017/11/21/mozilla-market-share/?utm_source=frontendfocus&utm_medium=email) opinion
Amos B. Batto

[On the Growing Popularity of Atomic CSS](https://css-tricks.com/growing-popularity-atomic-css/?utm_source=frontendfocus&utm_medium=email) opinion
Ollie Williams

[SuperTinyIcons: 81 Popular Web Service Icons in Tiny SVGs](https://github.com/edent/SuperTinyIcons?utm_source=frontendfocus&utm_medium=email) tools 
Minuscule SVG versions of common site and app logos.
Terence Eden

[Set Up A Netflix Style Streaming Service for Any Device or Platform](https://bitmovin.com/video-player/?utm_source=cooperpress&utm_medium=newsletterFEF&utm_campaign=player) tools 
The Bitmovin Player has a unified config, UI and API to deliver a perfect experience anywhere.
BitmovinSponsor

[nanocal: An AirBnB-Style Date Range Picker](https://github.com/zigomir/nanocal?utm_source=frontendfocus&utm_medium=email) code 
[Live demo here](https://codepen.io/zigomir/pen/dZvgLN?editors=1000).

[UPNG.js: Now Even Better PNG Minification](https://blog.photopea.com/even-better-png-minification.html?utm_source=frontendfocus&utm_medium=email) code 
6x faster than before and creates better palettes for dithering.
Photopea

[Literally Canvas: An HTML5-Based Drawing Widget](http://literallycanvas.com/?utm_source=frontendfocus&utm_medium=email) code

[Infinitown: An 'Infinite Town' WebGL Experiment](http://demos.littleworkshop.fr/infinitown?utm_source=frontendfocus&utm_medium=email) demo
Little Workshop

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/318)

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