Friday Frontend: Tons of CSS Grid Edition
After a few issues without as much CSS Grid Layout, this week we’re back with no less than three AMAZING CSS grid resources. I don’t think it was coordinated, but when Rachel Andrew (one of the top CSS Grid experts) publishes an in-depth walkthrough in the same week that Wes Bos (great front-end teacher) launches a CSS grid course, it’s a good week for CSS grid.
KBall from ZenDev
CSS & SCSS
Smashing Magazine sure made a good move when they brought Rachel Andrew on to be editor-in-chief. The quality of their articles about CSS fundamentals and CSS Layout (both Flexbox and Grid) have been off the charts. This is another excellent read, take the time to go through it.
Nifty walkthrough with lots of code snippets and a final example in codepen. A great example of how using named grid areas can make your CSS more semantic and explicitly match the design you’re recreating.
Continuing our CSS-grid theme, there is a newly released FREE video course by Wes Bos. I haven’t taken any of Wes’s courses yet, but I know a lot of folks who have and they all give him extremely high marks. Check it out!
Wow is this some cool stuff. Using CSS Clip path to create programatically controlled effects on an image, using pure CSS. I particularly love the example that morphs highlighted portions of the image based on hover.
One of the simplest and most entertaining introductions to BEM that I’ve ever seen. If you’re not already using BEM or a similar naming convention, you have to see this. And if you are, check it out anyway for the cartoons. :P
A dive into the varied options for setting and manipulating classes within Angular. Seems simple, but the details are important, and Todd makes it perfectly clear what the pros and cons of each approach are.
This is interesting - it’s an alternative take on state management in React (where Redux has become pretty much the standard). To my eye, Easy State behaves much closer to how VueX does in the Vue world - using reactivity on a mutable store rather than purely mutable state. I think this approach is a bit less intimidating for newer coders, and will be interested to see if this gets any traction.
I’m absolutely loving all of the innovation and improvements coming out of Firefox lately. Moving painting off thread is huge, and the new WebAssembly compiler approach is AMAZING. (So amazing I wrote an article about the performance improvements folks are seeing and some of the implications). So cool to see what’s happening in the browser world.
Coded style guides are amazing, and in my opinion a MUST if you’re going to scale your front-end team out at all. There are almost always translation errors between designers and developers, so unless your designers are doing all of your code, or you are able to have a designer review every single component before it goes live, having your design conventions encapsulated in code is a must. This is a great starter tutorial for how to get there.
This is cool! Especially for folks who like to use web technologies for presentations, and want to add a little pizazz. TweenDeck leverages the Greensock animation libraries to make it super easy to animate between html & css based slides. Check it out!
There’s a dearth of good write-ups on how to debug properly, and I’ve found it to be one of the most important skills I’ve ever developed in my career. I spend hours working with junior engineers trying to help them learn to debug better. This article isn’t perfect - I’d love it if it went into more depth - but it does give you a great set of tips to think through as you learn to debug.
Mental health and mental illness is a hugely under-discussed issue in the tech world, and I’m thrilled to see a publication as prominent as alistapart having an open conversation about it. We need to be open about mental illnesses as real and treatable diseases, and for those lucky enough to not suffer from them learn how to support those who do.