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

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.

Further Reading on SmashingMag: Link

• The Flexbox Reading List: Techniques And Tools¹
• CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends²
• Building Production-Ready CSS Grid Layouts Today³
• Ways To Reduce Content Shifting On Page Load⁴

News Link

• Big news were announced this week by Let’s Encrypt: Beginning from 2018, they will offer free Wildcard Certificates⁵ as well.

Generic Link

• Docracy⁶ 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 Link

• Christian Haschek found an interesting way to defend a website with gzip “bombs”⁷ against rogue clients.

JavaScript Link

• Britecharts is a d3.js based charting library⁸ containing reusable components.

⁹

CSS/Sass Link

• 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 Link

• Vitaly Friedman did an exhaustive research on datepicker modules and shares the probably perfect design of a date and time picker¹⁵.

¹⁶

Accessibility Link

• Hampus Sethfors¹⁸ and Hugo 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.

²⁰

Going Beyond… Link

• Ben Callahan’s essay on ‘Good things come to those who wait’²² is a truly mindful writing that asks what we are preparing for in our work and a question to the ephemerality of things we build.

—Anselm

Footnotes Link

1. 1 https://www.smashingmagazine.com/2016/02/the-flexbox-reading-list/
2. 2 https://www.smashingmagazine.com/2016/11/css-inheritance-cascade-global-scope-new-old-worst-best-friends/
3. 3 https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
4. 4 https://www.smashingmagazine.com/2016/08/ways-to-reduce-content-shifting-on-page-load/
5. 5 https://letsencrypt.org//2017/07/06/wildcard-certificates-coming-jan-2018.html
6. 6 http://www.docracy.com/
7. 7 https://blog.haschek.at/2017/how-to-defend-your-website-with-zip-bombs.html
8. 8 https://eventbrite.github.io/britecharts/
9. 9 https://eventbrite.github.io/britecharts/tutorial-donut.html
10. 10 https://eventbrite.github.io/britecharts/tutorial-donut.html
11. 11 https://codepen.io/matuzo/pen/awdevz
12. 12 https://caniuse.com/#search=%3Afocus-within
13. 13 https://codepen.io/matuzo/pen/GmXVWo?editors=1100
14. 14 https://www.zachleat.com/web/rename-font/
15. 15 https://www.smashingmagazine.com/2017/07/designing-perfect-date-time-picker/
16. 16 https://www.smashingmagazine.com/2017/07/designing-perfect-date-time-picker/
17. 17 http://topvet.net
18. 18 https://axesslab.com/accessibility-according-to-pwd/
19. 19 https://hugogiraudel.com/2017/07/02/accessibility-feedback/
20. 20 https://axesslab.com/accessibility-according-to-pwd/
21. 21 https://axesslab.com/accessibility-according-to-pwd/
22. 22 https://www.offscreenmag.com/blog/the-grip-of-now

↑ Back to topTweet itShare on Facebook