Friday Frontend: Happy New Year Edition
Happy New Year! I’ve just finished doing a retrospective on my 2017, part of which made it out into a blog post, and planning out what I want to accomplish in 2018.
One of my resolutions is to write more - I’m blocking out 30 minutes each morning at the start of my day to force myself to write - so expect to see more posts from me, and if you’re interested in particular topics don’t hesitate to ask.
What are you focused on working on or learning about this 2018? Scroll down to the comments and let me know!
KBall from ZenDev
CSS & SCSS
A look at how to automatically lay out columns to fill space without overflowing a container using CSS Grid.
Practical walkthrough of how to take animations designed in After Effects and translate them into HTML and CSS.
An excellent list of talks for those who want to understand what’s coming before it gets here. I’m particularly excited about Houdini, but there’s great talks on a range of topics including CSS-based games, CSS Grid, responsive typography, and more.
Love this breakdown - it talks not only about good documentation practices, but also good CSS organization practices as well.
A real-life walkthrough of applying CSS Grid within the constraints of an existing design system. Covers not only how to build new grids, but also adapt older markup-based grids to the new system.
From the creators of one of my all-time favorites, Flexbox Froggy comes another delightfully whimsical game to help you learn CSS Grid by doing.
A large part of this article is an opinion piece on why React will continue to dominate in 2018 (which is worth reading and thinking about) but there is also a really nice list of topics to study, with links to resources.
For an alternate take on what framework will dominate in 2018, plus a set of great Vue.js focused articles from 2017, check out this wrap up from vuedevelopers.com.
I had the pleasure of seeing Dan Wilson give a talk on the Web Animations API at QConSF this year, and was blown away. He doesn’t disappoint in his CSS Tricks debut - this is a great article about some of the composite animation possibilities opened by the Web Animations API.
An epic,downloadable checklist for making your site perform. Put together by Smashing Magazine, which recently released a newly redesigned (and BLAZING fast) version of their website. Definitely worth a readthrough.
OK, so it’s not really front-end related, but these exploits that were leaked to the public on Wednesday have the potential to wreak havoc on everyone in the industry, so you should definitely have them on your radar, and if you’re like me and tend to wait on installing updates… skip that tendency this time and get your security updates in place as soon as you can.
The rise of Web Assembly has started to bear fruit. Check out this framework for Rust that lets you build client-side web applications in Rust with a JSX-like templating language, compile straight down to web assembly, and run in the browser!
Super cool retrospective of how the Stripe design team used a number of cutting edge web technologies including CSS Grid, CSS 3D, the Web Animations API, and the Intersection Observer API to build out their new Stripe Connect landing pages.