#396 — June 19, 2019

Read on the Web

Frontend Focus

The State of CSS 2019 — The results from the first ever State of CSS survey, with details on what CSS features and tools are favoured by over 10,000 developers. It's worth digging into the data here to gain an awareness of what people are using in practice as CSS evolves.

Sacha Greif & Raphaël Benitte

How to Section Your HTML — A valuable deep-dive into HTML’s various semantic sectioning elements (such as <nav>, <section> and <aside>) with pointers on when it's appropriate to use them, and how. Worth bookmarking for future reference.

Daniel Tonon

⚛️ The NEW Complete Intro to React...Now, with Hooks — Much more than an intro, you’ll build a real-world app with the latest features in React including 🎣 hooks, effects, context, and portals.

Frontend Masters sponsor

A Gentle Introduction to Web Components — Web Components (aka, custom elements) allow you to implement reusable components with only HTML, CSS and JS. Here’s how to build your first, and how to use them in your apps.

Robin Wieruch

Introducing a 'New' HTML Element - Welcome <clippy> — Tongue-in-cheek title aside, here's a critique of Google’s recent approach to the introduction of a new HTML element (seemingly skipping standards approval), namely the <toast> notification element. Jen Simmons also weighed in on this.

Terence Eden

The Layout Instability API — You know that annoying thing when a page jumps around during load? This API aims to address the 'rendering jank' issue. Here’s an intro to the API, its key concepts, and how you can use it.

Philip Walton

💻 Jobs

JavaScript / React Performance Optimization Engineer - Exodus (Remote) — Exodus are looking for an obsessive engineer to work on improving the performance of the Exodus desktop application.

Exodus

Senior Software Engineer (Santa Barbara or Remote) — Join a team where everyone is striving to constantly improve their knowledge of software development tools, practices, and processes.

Invoca

Land a New Dev Job on Vettery — Vettery specializes in tech roles and is completely free for job seekers.

Vettery

📘 News, Tutorials & Opinion

Microfrontends: The Good, The Bad, and The Ugly — Frontend Twitter was recently abuzz with chatter about ‘microfrontends’, an approach to building frontend apps modelled off of microservices. Here’s a look at the pros and cons of such an approach.

Kevin Ball

CSS Scroll Snap Updated in Firefox 68 — Firefox 68, due next month, will ship with an updated CSS Scroll Snap specification (the same version as Chrome and Safari). Now, scroll snapping will work in the same way across all browsers that implement it.

Rachel Andrew (Mozilla)

Everything You Need to Know About Date in JavaScript — Runs through what you need to know about the Date object.

Zell Liew

Chromium and The Browser Monoculture Problem — Following Microsoft’s move to Chromium, chatter around a re-emerging browser monoculture has flared up. Ken puts forward one possible solution.

Ken Bellows

5 Keys to Accessible Web Typography — A solid introduction to the basics and best practices of accessible web typography.

Matej Latin

The CSS Mindset — Outlines the ‘ideas behind the language’ that you need to know in order to write good CSS.

Max Böck

Useful Tools and Techniques to Minify Your CSS

Peter Ekene Eze

Manifold Launches Marketplace-as-a-Service

Manifold sponsor

Chrome 76 Beta: Dark Mode, Payments, PWA Features & More

Google

Release Notes for Safari Technology Preview 85

Jon Davis (WebKit)

💡 Tip of the Week

supported by KendoReact

Web Accessibility for Devs: 3 Tips for Better Readability
by Nikola Shekerev

Whilst implementing accessibility compliance for KendoReact (a UI components library for React), I learnt a lot about readability.

Good readability ensures a site will be accessible for and usable by people both with and without disabilities. Readable subtitles/transcripts will be of help to people with hearing problems and readable text in general will be of help to those with low vision or dyslexia. A rule of thumb is to use a simple and clean sans-serif font in a large font size.

  • SPACE: Long lines are hard to read so apply a limit of 70 characters per line, if possible. For subtitles, the recommended limit is 35 characters. Provide enough space for characters to breathe - 1.5x line spacing is good.
  • CONTRAST: Background images can obscure text, so use them sparingly. Some fonts have a border around the letters to enhance contrast, but it's better to avoid background images altogether and provide a solid background that contrasts well with the text.
  • FONTS: Type designers have created some great, free readability-optimized fonts that you should consider depending on your audience. OpenDyslexic and Inter are good examples.

Web accessibility is a vast topic that every frontend developer needs to be acquainted with for reasons discussed in my accessibility overview. There you’ll also find an overview of the key accessibility standards plus tips and best practices for building more accessible sites.

This week's tip is sponsored by KendoReact. Building UI for business apps is hard work, even with React. You can make it easy with this UI & data visualization component library designed and built for React from the ground up. All 55+ KendoReact components are accessibility compliant. Try it out.

🔧 Code, Tools & Resources

Animated CSS and JS 'Matrix' Digital Rain — No need for a red pill to see this neat demo.

Yuan Chuan

Automate Your Outgoing Webmentions — A platform agnostic service that will check a given URL for links to other sites, discover if they support webmentions, then send a webmention to the target. Here’s the related blog post.

Remy Sharp

Relearn CSS Layout: Every Layout — A growing resource to help you learn (or relearn) CSS layout, using simple components (primitives) and a compositional approach.

Heydon Pickering & Andy Bell

Full User-Experience Monitoring with Datadog Synthetics — Datadog’s AI-powered Browser Tests can be created in minutes and update themselves. Try it for free.

Datadog sponsor

CSS Wand — A collection of customizable CSS styles and animations that can be easily copy and pasted into your project.

Oliver Gomes

   🗓 Upcoming Events

An Event Apart, July 29-31 — Washington, D.C. — A popular three-day conference that focuses on all things relating to digital design and user experience.

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

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