|
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
|
|
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
|
|
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
|
|
📘 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)
|
|
The CSS Mindset — Outlines the ‘ideas behind the language’ that you need to know in order to write good CSS.
Max Böck
|
supported by  |
|
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
|
|
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
|
|
CSS Wand — A collection of customizable CSS styles and animations that can be easily copy and pasted into your project.
Oliver Gomes
|
|
No comments:
Post a Comment