#403 — August 7, 2019

Read on the Web

Frontend Focus

Domino’s Asks The Supreme Court to Shut Down Lawsuit Requiring Its Website Be Accessible to Blind People — A blind man has filed a lawsuit against Domino’s after asserting that the ‘Americans with Disabilities Act’ requires businesses to make accommodations for those with disabilities, including online. The pizza company is reportedly arguing that the requirements would be inconsistent and costly. This comes following an increase in similar litigation in recent years.

Nick Statt

Native Lazy-Loading for The Web — As of Chrome 76 (available now), you can use the loading attribute to natively lazy load resources, without the need for custom code or a separate JS library. This post dives into the details.

Houssein Djirdeh, Addy Osmani, Mathias Bynens

A Better Way to Track Your Backlog — Want a project management tool that's both powerful and a joy to use? Designed for developers, Clubhouse simplifies your workflow. Seamless integration with GitHub, GitLab, Slack and more. Start your free trial today and get 2 extra free months.

Clubhouse.io sponsor

New CSS Features in Firefox 68 — A look at the CSS additions and changes introduced in Firefox 68, including CSS scroll snapping, the ::marker pseudo-element and more.

Rachel Andrew (Mozilla)

A CSS Modules v1 Explainer — Don’t get ready to use them yet, but this is an interesting, early-stage proposal to extend the ES modules system (i.e. JavaScript modules) to include CSS modules.

Dan Clark

Writing Modes And CSS Layout — “Writing modes” aim to address the situation where you need to write written language in directions other than left-to-right, top-to-bottom. Rachel Andrew looks at why supporting writing modes is important and how they interact with CSS, grid layouts, and flexbox.

Rachel Andrew

💻 Jobs

Frontend Engineer - In Dili, Timor-Leste or Possibly Remote — Work with people globally to create change, using technology to empower people, through our programs in aid and global development.

Catalpa International

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world's leading brands.

X-Team

Frontend Developers Are in Demand on Vettery — Ready for a bold career move? Make a free profile, name your salary, and connect with hiring managers from top employers today.

Vettery

📙 Articles, Tutorials & Opinion

Multi-Column Manipulation — An interesting experiment in applying multiple columns in response to the amount of content. So, if the viewport is wide enough the content will dynamically divide to two or more columns.

Heydon Pickering

An Introduction to Svelte — Svelte is a frontend framework (in the same vein as React or Angular) — here’s a look at how it works, hot to get started with it, plus a few example apps.

Dave Ceddia

Want a Better Way to Store and Serve Images and Videos — Join a community of over 450K web and mobile developers dynamically managing rich media with Cloudinary. Try it free.

Cloudinary sponsor

Using Progressive Enhancement to Design for Accessibility — When it comes to UI, what does progressive enhancement actually look like? This article digs into it, and offers up links to helpful resources.

Scott Jensen

The :empty Selector — How to use the :empty selector to style elements with no children or content.

Samantha Ming

This Ain’t Disney: A Practical Guide to CSS Transitions and Animations

Mohammed Ibrahim

The 2019 Design Systems Survey Results — Lots of detail here as to both how and why people are using design systems — the takeaway being that they add value in providing consistency and efficiency.

Sparkbox

Making a Realistic Glass Effect with SVG

David Fitzgibbon

Bringing CSS Grid to WordPress Layouts

Andrea Gandino and Simone Maranzana

🔧 Code, Tools & Resources

Infinite Burger — Drag and resize the window and the burger will grow, thanks to the background-repeat: round property…and now I’m hungry.

Thiyagaraj T codepen

Font Style Matcher — Using a web font? This little tool helps you pick a decent fallback font to try and minimize any noticeable ‘flash of unsettled text’ during initial render.

Monica Dinculescu

Detect & Debug User-Facing Issues in Critical Endpoints & Apps with Synthetic API Tests

Datadog Synthetics sponsor

cessie: Transpile Your CSS Bundle — …to support CSS variables, calc, and future CSS for legacy browsers.

Bjarne Øverli

Photoronoi — This is a neat effect. Upload an image (or point it to an image URL) and see it turned into a Voronoi-style SVG.

Amelia Wattenberger

Hotkey: Trigger an Action on an Element When a Keyboard 'Hotkey' is Pressed — Want quick and simple keyboard shortcuts for elements on your page? Set the data-hotkey attribute and use Hotkey. GitHub built and uses it (view source on any GitHub page and look for the data-hotkey attributes).

GitHub

FileSaver.js: An HTML SaveAs() FileSaver Implementation

Eli Grey

   🗓 Upcoming Events

WebAIM: Web Accessibility Training, August 13-14 — Logan, Utah — Covers basic web accessibility principles to advanced accessibility techniques.

Front Conference, August 29-30 — Zurich, Switzerland — A two-day double-track conference for everyone involved from concept to implementation.

Web Unleashed 2019, September 13-14 — Toronto, Canada — Covers a variety of front-end topics leaving you 'informed, challenged and inspired'.

State of the Browser, September 14 — London, UK — A one-day, single-track conference with widely varying talks about the modern web.

CSSConf, September 25 — Budapest, Hungary — A community conference dedicated to the designers and developers who love CSS.

Accessibility Scotland, October 25 — Edinburgh, UK — One day of talks. Friendly, open discussion about accessibility.