The Frontenders Kaleidoscope — Ed.4–2018
Welcome to the fourth edition of the Frontenders Kaleidoscope. This week, everything you know about web design has changed. Book! ;) Also, some articles reading on motion on the web, display: contents;, build tools, a bunch of releases, and something auditory.
Weekend Reading
Everything You Know About Web Design Just Changed by Jen Simmons
These are the notes taken by Jeremy Keith of the recent talk by Jen Simmons at An Event Apart in Seattle. Over the last few years, and I find it harder and harder to pin point exactly when, someone kicked the web into hyperdrive. What we can accomplish today with HTML, CSS and JavaScript is simply mind bending, especially if you have been building for the web since the late nineties and early 2000.
And it feels like we are now again at a tipping point. A point where the rate of standards adoption, and innovation on the web is set to accelerate. From the innovations in languages compiled down to JavaScript, to the evolution of the JavaScript language itself. From the incredible leaps forward with regards to CSS, especially with regards to powerful layout tools that is now part of the language. To the incredibly enthusiastic and passionate community around tooling and open source. We are now moving into the next phase, a phase Jen has coined as Intrinsic Web Design. A great ready from Jeremy, and I cannot wait for Jen’s video to be posted online. Slides from her talk are already online.
Get started with motion design in 9 steps
One of the things CSS enables us to do now, is to introduce motion to our interfaces. Motion that adds character, or whimsy to a product. Motion that aids in the usability or, guides the user along their first interaction with our website or app.
In this article Arpit Agarwal guides us through the steps to follow to start introducing motion into our interfaces. He also introduces some tools that can help along the way. Reading this post also reminded me of another post I read recently.
Implementing a reduced-motion mode
While motion can indeed increase the enjoyment and user experience for many people, for some of us, it can have quite to opposite effect. People with certain neurological problems such as ADHD and Autism, as well as for example, motion sickness, will choose to not use an app or website if there is simply to much motion and no way for them to control it.
In this post by Hugo Giraudel, he walks us through implementing a control that gives the user control over turning motion on or off. He also looks at the Reduced Motion media query that can be used to automatically switch off motion if enabled.
How display: contents; Works
Over on bitsofcode Ire Aderinokun wrote a comprehensive post on the display: contents CSS display value. She covers everything from the why, how, browser support as well as some caveats to be aware of when using display: contents;.
Webpack: A Gentle Introduction to the Module Bundler
Currently one of the tasks I am working on over on MDN Web Docs is to improve the front-end developer experience when working on the code base. As part of this I have been looking at various tools to automate the front-end pipeline as much as possible.
In evaluating Webpack as an option, I found this article on the Auth0 blog to be very useful in getting up to speed with what Webpack is, and how to get started using it. For the why? I can highly recommend, Why would I use Webpack?
I am pretty much sold on Webpack but, I have to say that Parcel is really looking more and more interesting to me, especially with the features introduced in the latest release. So who knows, I might just decide to go with Parcel instead.
Notable Releases
- html-minifier v3.5.13
- stylelint v9.2.0
- jest-puppeteer v2.3.0 ~ Now supports custom config location
- tails v3.6.2
- babel v7.0.0-beta.44
- react v16.3.1
- Atom v1.26.0-beta1
- Atom v1.25.1
- MDN Browser Compat Data v0.0.30
- hyper v2.0.0-canary.16
- Parcel v1.7.0
Browser News
Safari 11.1 ~ With the release of the latest updates to the Apple universe, they snuck in a little, lets call it an easter egg, in Safari. Support for Service Workers!
Listen Up
The Web Platform Podcast ~ lit-html — HTML Templates via JavaScript Template Literals
This week on the podcast, the hosts talks with Justin Fagnani member of the Polymer team, about lit-html. Another templating language? Really? I know, there are a ton of templating system in the front-end world but, lit-html is different. What sets it apart, is that it is not a new templating language but, simply makes use of standard features that are part of the JavaScript language. In this case, JavaScript template literals.
It’s a great discussion and a really interesting project. Highly recommended.
Request for Commits ~ Building Communities
I have mentioned it before but, it bears mentioning again. Running an open source project that is growing rapidly or, is already popular can be daunting. Many maintainers suffer from burnout, and a general feeling of being overwhelmed.
Because these projects are more often than not, a labour of love by one or two people, building a community around your project can often go a long way to lighten the burden. Hosts Nadia and Mikeal and joined by Jan Lehnardt to discuss the value of communities, how to build a community, and contribution models.
That is it for this week. Thanks for reading. Until next week, stay curious o/\o
