---
title: "Results from the first State of CSS 2019 survey"
publication: "Frontend Focus"
issue: 396
published_at: "2019-06-19"
canonical_url: "https://frontendfoc.us/issues/396"
---

This week's HTML, CSS, browser, and frontend news       

#396 — June 19, 2019 

[Read on the Web](https://frontendfoc.us/issues/396)   

Frontend Focus 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1560851254/mktaphnbowuoy4vt5cz1.png)](https://2019.stateofcss.com/)   

[The State of CSS 2019](https://2019.stateofcss.com/) — 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](https://css-tricks.com/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   [![\](https://copm.s3.amazonaws.com/ff16d8a7.jpg)](https://frontendmasters.com/courses/complete-react-v5/?utm_source=frontendfocus&utm_medium=email&utm_campaign=reactv5) 

[⚛️ The NEW Complete Intro to React...Now, with Hooks](https://frontendmasters.com/courses/complete-react-v5/?utm_source=frontendfocus&utm_medium=email&utm_campaign=reactv5) — 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](https://www.robinwieruch.de/web-components-tutorial/) — 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>`](https://shkspr.mobi/blog/2019/06/introducing-the-new-html-element-welcome/) — 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](https://groups.google.com/a/chromium.org/forum/m/?utm_medium=email&utm_source=footer#!msg/blink-dev/Gl7FIKM5IFw/tA70X9ZIBQAJ). Jen Simmons also [weighed in on this](https://twitter.com/jensimmons/status/1138980859728531456). 

Terence Eden   

[The Layout Instability API](https://web.dev/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)](https://www.exodus.io/careers/#performance-engineer-desktop) — 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)](https://grnh.se/2cce24422) — 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](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-frontendfocus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77580) — Vettery specializes in tech roles and is completely free for job seekers. 

Vettery  

📘 News, Tutorials & Opinion  

[Microfrontends: The Good, The Bad, and The Ugly](https://zendev.com/2019/06/17/microfrontends-good-bad-ugly.html) — 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](https://hacks.mozilla.org/2019/06/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](https://css-tricks.com/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](https://dev.to/kenbellows/chromium-and-the-browser-monoculture-problem-420n) — 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](https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/) — A solid introduction to the basics and best practices of accessible web typography. 

Matej Latin   

[The CSS Mindset](https://mxb.dev/blog/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](https://blog.logrocket.com/useful-tools-and-techniques-to-minify-your-css-bee9b539e074/) 

Peter Ekene Eze   

[Manifold Launches Marketplace-as-a-Service](https://www.manifold.co/blog/announcing-marketplace-as-a-service-for-developer-platforms?utm_source=newsletter&utm_medium=frontend_focus&utm_campaign=june19) 

Manifold sponsor   

[Chrome 76 Beta: Dark Mode, Payments, PWA Features & More](https://blog.chromium.org/2019/06/chrome-76-beta-dark-mode-payments-new.html) 

Google   

[Release Notes for Safari Technology Preview 85](https://webkit.org/blog/9281/release-notes-for-safari-technology-preview-85/) 

Jon Davis (WebKit)     

💡 Tip of the Week  

supported by [![KendoReact\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1559640618/ydwsvgv1h8h61uiit8x4.png)](https://www.telerik.com/kendo-react-ui/?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-react-trial-tip)      

**Web Accessibility for Devs: 3 Tips for Better Readability**
_by_ [Nikola Shekerev](https://www.telerik.com/blogs/author/nikola-shekerev) 

Whilst implementing [accessibility compliance](https://www.telerik.com/kendo-react-ui/components/accessibility/?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-react-blog-readability-tip) 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](https://baymard.com/blog/line-length-readability) 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](https://www.w3.org/WAI/perspective-videos/contrast/).
- **FONTS:** Type designers have created some great, free readability-optimized fonts that you should consider depending on your audience. [OpenDyslexic](http://opendyslexic.org) and [Inter](https://rsms.me/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](https://www.telerik.com/blogs/author/nikola-shekerev?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-react-blog-readability-tip). 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](https://www.telerik.com/kendo-react-ui/?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-react-trial-tip). 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](https://www.telerik.com/kendo-react-ui/?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-react-trial-tip).    

🔧 Code, Tools & Resources 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1560872216/afnfboxgt6ge3cwh0ogj.gif)](https://codepen.io/yuanchuan/pen/YoqWeR)  

[Animated CSS and JS 'Matrix' Digital Rain](https://codepen.io/yuanchuan/pen/YoqWeR) — No need for a red pill to see this neat demo. 

Yuan Chuan   

[Automate Your Outgoing Webmentions](https://webmention.app/) — 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](https://remysharp.com/2019/06/18/send-outgoing-webmentions). 

Remy Sharp   

[Relearn CSS Layout: Every Layout](https://every-layout.dev/) — 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](https://www.datadoghq.com/dg/apm/synthetics/synthetic-monitoring/?utm_source=Advertisement&utm_medium=CooperPress&utm_campaign=CooperPress-FrontEndFocusS) — Datadog’s AI-powered Browser Tests can be created in minutes and update themselves. Try it for free. 

Datadog sponsor   

[CSS Wand](https://www.csswand.dev/) — 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.](https://aneventapart.com/event/washington-dc-2019) — A popular three-day conference that focuses on all things relating to digital design and user experience.   

[Front Conference, August 29-30 — Zurich, Switzerland](https://frontconference.com) — A two-day double-track conference for everyone involved from concept to implementation.   

[CSSConf, September 25 — Budapest, Hungary](http://cssconfbp.rocks) — A community conference dedicated to the designers and developers who love CSS.           

A **[Cooperpress](https://cooperpress.com/)** publication — Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). 

[Change your email address](https://frontendfoc.us/edit_subscription/*|UID|*) or[stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) 

© Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom