#415 — October 30, 2019

Read on the Web

Frontend Focus

The Current State of Styling in 2019 — If you’ve ever tried styling form controls with CSS, you’ve probably had a bad time (at least initially). Drop-down select elements are particularly thorny. Here’s a look at the basics and what developers really want.

Chris Coyier

In October 1991, Tim Berners-Lee Published a Document Called ‘HTML Tags’ — It’s been 28 years (and one day) since Tim Berners-Lee wrote a document outlining descriptions of the first 18 HTML tags. Bonus points if you can name them all before clicking through. ?

Web Design Museum

Design for Developers ? New Course by Sarah Drasner — Become more self-sufficient for the entire process for execution, from concept to design to implementation. Understand the rules for designing and learn to create complex and beautiful front-end experiences.

Frontend Masters sponsor

Google to Stop Indexing Flash Content — …by the end of this year. This ties in with Adobe’s (and others’) plans to stop supporting it by the end of 2020. With this, another interesting era of the Web passes into history.

Google

Are There Random Numbers in CSS? — Certainly an interesting trick for generating pseudo-random outcomes in CSS alone. The randomness is questionable, but usable for casual situations.

Alvaro Montoro

Auditing For Accessibility Problems With Firefox Developer Tools — An overview of the Accessibility Inspector in Firefox 70’s dev tools, explaining how this auditing facility helps identify/fix common mistakes and practices that reduce site accessibility.

Mozilla Hacks

HTMHell – A Collection of Bad Practices in HTML, Copied From Real Websites — This site seems relatively new, but is a growing collection of real-world examples of things you may not want to do. Submissions are being taken.

Manuel Matuzovi?

? Jobs

Senior Product Designer – Buildkite (Remote) — Help shape a tool that thousands of developers use every day. Join our small team and have the chance to influence our product.

Buildkite

Have You Tried Vettery? — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

? Articles, Tutorials & Opinion

?  Inner & Outer Values of the Display Property — Last week’s issue made mention of the fact that Firefox now supports the use of multiple values in the display property. Here’s a look at how.

Mozilla Developer

What’s New In DevTools In Chrome 79 — Including new cookie debugging, color scheme simulation options, code coverage updates, and more.

Google Developers

Speed Up Your Website With WebP — A thorough overview of Google’s WebP image format, highlighting its advantages, how it works and how to use it. (I was surprised to learn it has been nearly a decade since the format was first introduced.)

Suzanne Scacca

Why Parcel Has Become My Go-To Bundler for Development — A run-down on what the popular web application bundler can offer, plus how you might start to using it in your own projects.

Maks Akymenko

Why Are Accessible Websites so Hard to Build? — Robin Rendle asks why seemingly so many companies struggle at making accessible websites (looking at you Domino’s), and offers up an idea on how text editors could help by way of included accessibility checkers. Stefan Judis expands on this proposing that browser dev consoles could do similar checks.

Robin Rendle

The React Hooks Guide: In-depth Tutorial with Examples. Start Learning

Progress KendoReact sponsor

Bidirectional Horizontal Rules in CSS — A straightforward tutorial looking at how to use CSS’s logical properties to support both LTR and RTL layouts.

Hussein Al Hammad

CSS Utility Classes: Your Library of Extendable Styles — What CSS utility classes are and why you should be using them.

Russell Bishop

Making a PWA out of the Classic 1996 ‘Space Jam’ Site — A fun recreation of the seemingly everlasting Space Jam website. See the end result here.

Zach Leatherman

The Problem with Dropdown Fields (..and What You Should Use Instead)

Design Smarts

? Code, Tools & Resources

Sal: Lightweight Scroll Animation Library — Coming in at just 2.8KB, this vanilla JS library is performance focused with no dependencies. GitHub repo.

Miros?aw Ciastek

FitText in CSS — Remember the old jQuery plugin called FitText? Well, here it is recreated in (very modern — Chrome 79+ needed) CSS. Perhaps not quite ready for prime time but a cute idea.

Dave Rupert codepen

Looking to Build Leading Search Experiences with Ease? — Elastic App Search brings the power and scalability of Elasticsearch to ecommerce sites, mobile apps and more. Try free.

elastic.co sponsor

GRID: A Simple Visual Cheatsheet for CSS Grid Layout — A list of visually displayed properties available in CSS Grid Layout. Tap or click to copy to keyboard.

Malven Co.

JAMstack Themes — A list of themes and starters for JAMstack sites filterable by the supported generator and/or CMS.

Stackbit

Minimal Wim — An experiment in minimal typography based on the work of Dutch designer Wim Crouwel.

Booreiland