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!

Happy Friday!
KBall from ZenDev

CSS & SCSS

Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit`

A look at how to automatically lay out columns to fill space without overflowing a container using CSS Grid.


Making The Transition From After Effects To CSS Transitions And Keyframes

Practical walkthrough of how to take animations designed in After Effects and translate them into HTML and CSS.


10 Dev Talks & Presentations on the Future of 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.


8 Best Practices for Perfect CSS Documentation

Love this breakdown - it talks not only about good documentation practices, but also good CSS organization practices as well.


Design Systems and CSS Grid

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.


CSS Grid Garden

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.


JavaScript

Top JavaScript Libraries & Tech to Learn in 2018

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.


Vue.js Developers Yearly Wrap Up - Top 5 Articles Of 2017

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.


Babel: Nearing the 7.0 Release

An update about all the amazing things going on with Babel as they close in to their 7.0 release. This is one of the most important projects out there for the JavaScript ecosystem, so if you’re looking for a place to get involved or help out, definitely consider them.


The Top JavaScript Trends to Watch in 2018

Looking beyond the frameworks (though they do have a framework opinion), this post digs into a number of the hottest JavaScript technology trends to give you places to watch and start digging into.


Additive Animation with the Web Animations API

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.


Other Awesomeness

Front-End Performance Checklist 2018 [PDF, Apple Pages]

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.


Understanding Meltdown & Spectre: What To Know About New Exploits That Affect Virtually All CPUs

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.


Yew - a Rust framework for web apps

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!


Stripe Connect: behind the front-end experience

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.