#399 — July 10, 2019

Read on the Web

Frontend Focus

Firefox 68: BigInts, Contrast Checks, and the QuantumBar — Version 68 is now available, featuring support for big integers, whole-page contrast checks, and a new implementation of a core Firefox feature: the URL bar.

• Camera and microphone access now requires HTTPS in version 68 — matching how Chrome behaves.
• Here’s a full list of developer facing changes in 68.
• You can see the full release notes here.

Dan Callahan (Mozilla)

CSS Lists, Markers, And Counters — There’s a lot more to styling lists using CSS than you might think, says Rachel Andrew, including using the new ::marker pseudo-element introduced with this week’s Firefox 68 release (featured above). If you want to be the up-to-date CSS list expert in the office this week, read this.

Rachel Andrew

Image & Video Management Made for Front-End Developers — Simplify and automate the process of uploading, manipulating, optimizing, and delivering images and videos across every device at any bandwidth. Try Cloudinary. See how easy media management can be. Get your own free account today.

Cloudinary sponsor

Dark Patterns at Scale: Findings from a Crawl of 11K Shopping Websites — The findings from a large-scale study, analyzing ~53K product pages from ~11K shopping websites to characterize and quantify the prevalence of dark user interface patterns.

Princeton University and University of Chicago

An Intro To Screen Reader Testing for Sighted Developers — This quick guide will give you an introduction to the why and how of testing your website’s user experience using screen readers.

Uncaught Reference Error Blog

Chrome to Get Video Play/Pause Button on the Toolbar — Google Chrome users will soon have a quicker way to pause auto-playing media across all tabs in their browser. This feature is in the Canary build now.

Catalin Cimpanu

The Future of Websites: Headless CMSes? — An increasing number of CMS’s have been shunning traditional database-driven systems in favor of API driven ones, known as “headless CMS”es. Here’s a run through some pros and cons of the approach.

Dan Fries

? Jobs

Frontend Senior Software Engineer & Architect at TrainingPeaks — Bring your engineering best practices to the brand helping athletes and coaches around the world analyze and plan their training.

TrainingPeaks

Front-end Engineer — Goldstar is looking for Front-end Engineers with React expereince onsite in Portland, Oregon and Pasadena, California.

Goldstar

Job Searching Without the Searching? Try hackajob ? — Let your skills do the talking. Get matched to roles based on your favourite frontend frameworks.

hackajob

? Tutorials & Opinion

The Many Ways to Include CSS in JavaScript Apps — A look at the ways in which CSS can be handled within a JavaScript application — something of a controversial topic in the land of frontend development. I like option 1.

Dominic Magnifico

CSS Architecture for Multiple Websites — Elad shares his knowledge and experience from writing a reusable and scalable CSS architecture for use across multiple websites.

Elad Shechter

The Little Legacy Code That Could: A Fable of Software Ownership — A lack of software ownership isn’t a simple problem, but we have a few recommendations that can help your teams.

CircleCI sponsor

Developing a Robust Font Loading Strategy for CSS-Tricks — Zach takes a look at the font loading behavior for the latest redesign of the popular CSS-Tricks site.

Zach Leatherman

Fun Places to Learn CSS Layout – Grid Layout — We’ve linked to a few of these in the past, but here’s a good round-up of some fun places, tutorials and sandbox sites to help you learn Grid Layout.

Stéphanie Walter

Responsive Design Ground Rules — Some ground rules to follow to keep your responsive design robust and predictable.

Polypane

Creating A Multi-Level Hierarchical Flyout Navigation Menu Using Only HTML and CSS

Abhishek Ghosh

A Little Reminder That Pseudo Elements are Children, Kinda

Chris Coyier

How Google Pagespeed Works: How to Improve Your Score

Ben Schwarz

? Code, Tools & Resources

Pie Chart Maker: An Easy Way to Create Pie Charts — A free tool to create good looking customizable pie charts. Insert your data and it offers up a JPG, PNG, or even an animated version to embed.

Beautiful Dingbats

p5.js: A Client-Side JS Platform for Creative, Arty Coding — This mature project has just had a big release. Check out some of the examples in the live p5.js playground for a feel for how cool this is – it makes putting together visualizations and visual experiments very easy.

Processing Foundation

Web Audio DAW: Using the Web Audio API for Dynamic Sound Synthesis — A Javascript library for manipulating audio using the HTML Web Audio API. “It’s like jQuery for your ears”.

Raphael Serota

Proactively Identify & Improve Issues Before They Affect Customers with Datadog Synthetics

Datadog sponsor

simpleParallax: A JavaScript Library for Parallax Effects — A straightforward, tiny library which adds parallax animation to any image.

Geoffrey Signorato

FormPersistence.js: Preserve HTML Form Data Across Sessions — If people start to fill out a form, why not keep the data around in their local storage in case they leave and come back?

Finn Thompson