Web Development Reading List #188: Real-World Accessibility, Flexbox Madness, And The Ephemerality Of Things We Build

About The Author

Anselm is a freelance front-end developer who cares about sustainable front-end experiences and ethical choices in life. He writes the WDRL, and is co-founder … More about Anselm ↬

Email Newsletter

Weekly tips on front-end & UX.
Trusted by 200,000+ folks.

What’s going on in the industry? What new techniques have emerged recently? What insights, tools, tips and tricks is the web design community talking about? Anselm Hannemann is collecting everything that popped up over the last week in his web development reading list so that you don’t miss out on anything. The result is a carefully curated list of articles and resources that are worth taking a closer look at.

CSS is an amazing tool which we constantly use but we don’t seem to honor it appropriately. Whenever I see the growing browser support of the :focus-within selector, the much wanted justify-content: space-evenly for Flexbox or how great CSS Grids already work, I feel really grateful to have such awesome tools available to work with.

And with advanced new media queries such as prefers-reduced-motion, screen and (color), or pointer, we get amazing tools to improve accessibility and usability of our websites. Just let the user be in control how to view your amazing design and it’ll be a success for everyone.

News

Generic

  • Xodo Sign is a community-driven platform for free legal documents. It already covers a lot of categories and might become useful in future for you.

Security

JavaScript

Donut Chart
Donut chart with Legend (Image source)

CSS/Sass

  • The :focus-within CSS pseudo-selector is a nice way to enhance your form sections further. Browser support is still a bit limited so far but it’s already worth thinking about adding it to your code to improve design and usability for those whose browser support the selector already.
  • The CSS Flexbox Module specification now has a new value justify-content: space-evenly. This new setting places even space between and to the outer of the elements — a feature we all wanted to have very much in Flexbox. It already works in Firefox, and Safari Tech Preview and Chrome Canary have the support as well.
  • Zach Leatherman on how you can rename a font in CSS and font aliasing.

Concept & Design

date and time picker
When designing a date/time picker, keep in mind that every date picker may fit every interface, but not every interface actually needs a date picker. (Credits: Topvet.net)

Accessibility

  • Hampus Sethfors and Kitty Giraudel collected a bunch of real-world experiences regarding accessibility on websites. These two articles give a lot of insight on how to understand accessibility and usability of websites better.
Tweet screenshot
Zooming problems: Some users with low vision point to layout and navigation problems when zooming or increasing font-size. (Image source)

Going Beyond…

—Anselm

Further Reading

Smashing Editorial (mrn)