Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Web Development Reading List #158: Form Usability, Vue.js, And Unfolding Critical CSS

These days, I’ve been pondering what purpose we as developers have in our world. I’m not able to provide you with an answer here, but instead want to encourage you to think about it, too. Do you have an opinion on this? Are we just pleasing other people’s demands? Or are we in charge of advising the people who demand solutions from us if we think they’re wrong? A challenging question, and the answer will be different for everyone here. If you want to let me know your thoughts, I’d be happy to hear them.

Bear with me, this week’s list is a large one. Too many good resources popped up, explaining technical and design concepts, how to use new JavaScript methods to write smarter applications, how to use CSS Grid Layouts, and how to take care of your happiness.

Further Reading on SmashingMag: Link

News Link

  • The Safari Technology Preview 175 adds support for Custom Elements v1, rel=noopener, and stylesheet loading via a link element inside Shadow DOM subtrees. Furthermore, preloading behavior was changed — it now matches iOS where resources like images get less priority when loading.
  • Already available in Nightly Builds, the feature to emulate throttled network connections6 in Firefox’s Developer Tools will soon be added to the stable release, too.

General Link

Concept & Design Link

Simplifying a tax form11

How can you master the balancing act between asking for a lot of information and keeping a form as simple and usable for the user? @jelumalai shares his lessons learned12. (Image credit: @jelumalai13)

Tools & Workflows Link

Accessibility Link

  • Stefan Judis explains when to use and when not to use aria-selected16. Applying it to the current active navigation item, for example, isn’t correct, but applying it to the current active tab in a tablist, on the other hand, would be.

JavaScript Link

CSS/Sass Link

  • Oliver Williams shares what he learned about CSS Grid Layout20. Once you realize that it’s designed to be used alongside Flexbox and not as a replacement, you’ll slowly grasp how powerful the new technology really is.
  • JP de Vries shares the challenges of unfolding critical CSS21 and why most websites are better off without it.
CSS Grid Layout22

To help you make sense of it all, Oliver Williams shares his lessons learned about CSS Grid Layout23. (Image credit: Iliver Williams24)

Work & Life Link

  • Mike Monteiro gave an impactful talk at this year’s Beyond Tellerrand conference in Berlin. “Let Us Now Praise Ordinary People25” opens our eyes to how we can change the world and why we need to get over-hyped startups that only claim to change something to actually do meaningful work. If I can make you watch one thing this week, take 45 minutes, sit back and listen to Mike Monteiro.
  • selfcare.tech26 wants to help developers take better care of their health. It shows some great methods for solving common problems every one of us will face at some point.

Going Beyond… Link

And with that, I’ll close for this week. If you like what I write each week, please support me with a donation28 or share this resource with other people. You can learn more about the costs of the project here29. It’s available via email, RSS and online.

— Anselm

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/
  2. 2 https://www.smashingmagazine.com/web-form-design-showcases-and-solutions/
  3. 3 https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/
  4. 4 https://www.smashingmagazine.com/2014/03/how-to-use-analytics-to-build-a-smarter-mobile-website/
  5. 5 https://webkit.org/blog/7071/release-notes-for-safari-technology-preview-17/
  6. 6 https://blog.nightly.mozilla.org/2016/11/07/simulate-slow-connections-with-the-network-throttling-tool/
  7. 7 http://cssence.com/blog/2016-11-the-javascript-wars
  8. 8 https://vimeo.com/190883361
  9. 9 https://mobile.twitter.com/elizallen_/status/794993023688077314
  10. 10 https://medium.com/@ux_je/simplifying-the-gst-registration-process-a-designers-perspective-e30e38fbbd26
  11. 11 https://medium.com/@ux_je/simplifying-the-gst-registration-process-a-designers-perspective-e30e38fbbd26
  12. 12 https://medium.com/@ux_je/simplifying-the-gst-registration-process-a-designers-perspective-e30e38fbbd26
  13. 13 https://medium.com/@ux_je/simplifying-the-gst-registration-process-a-designers-perspective-e30e38fbbd26
  14. 14 https://formlinter.com/
  15. 15 https://robots.thoughtbot.com/announcing-formlinter
  16. 16 https://www.stefanjudis.de/aria-selected-and-when-to-use-it.html
  17. 17 https://www.liquidlight.co.uk/blog/article/building-a-vue-v2-js-app-using-vue-router/
  18. 18 https://hacks.mozilla.org/2016/11/cooperative-scheduling-with-requestidlecallback/
  19. 19 https://medium.com/net-magazine/fighting-ebola-with-javascript-26b48da8f84a
  20. 20 https://css-tricks.com/things-ive-learned-css-grid-layout/
  21. 21 https://medium.com/markuptips/unfolding-critical-css-91619401b4e
  22. 22 https://css-tricks.com/things-ive-learned-css-grid-layout/
  23. 23 https://css-tricks.com/things-ive-learned-css-grid-layout/
  24. 24 https://css-tricks.com/things-ive-learned-css-grid-layout/
  25. 25 https://vimeo.com/190834270
  26. 26 http://selfcare.tech/
  27. 27 http://futurism.com/these-solar-panels-can-pull-drinking-water-straight-from-the-air/
  28. 28 https://wdrl.info/donate
  29. 29 https://wdrl.info/costs/

↑ Back to top Tweet itShare on Facebook

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 of the event platform Colloq.

  1. 1

    Elumalai Jayaraman

    November 12, 2016 10:18 am

    Hi Anselm,

    Thanks to mention my article about “Form Usability”. Also, I have done for Mobile optimised design too.

    Regards
    Elumalai J.

    3
  2. 2

    Hiya Anselm,

    I really like the way this was laid out.

    Like to say keep up the WDRL they’re quality human-selected info! 👍

    Kind regards,

    Mic

    1
  3. 3

    I really like all these suggestions. Thank for sharing such a fantastic post.

    1
  4. 4

    nice. been searching for something quite some time now. thanks.

    1

↑ Back to top