Friday Frontend: CSS Grid is Growing Up Edition
Like any good software, CSS Grid is getting to the point where folks are demanding more of it. We’re seeing not only some great usecases and best practices emerge, but a whole set of ideas for ways to extend the standard to get more out of it. Find some of each of these in the articles below.
KBall from ZenDev
CSS & SCSS
One of the unique things about software as a medium is that it is always evolving. This is why one of the most important signs to me of really good software is that it inspires the user to want more. You know you’re on to something if your users say “hey, this is great… and what if we could do THIS? OMG that would be amazing!” We’re seeing that with CSS Grid now, and this article does a great job of summing up some of the “this” that folks are asking for.
This is a brilliant walk through how to create Responsive Layouts using CSS Grid without a single media query. This concept of “media-query-less” responsiveness (once called ‘liquid’ designs) is becoming both more common and much much more achievable.
The title pretty much describes it. This is nice because it gives a lot of thumbnail sized examples connected with their properties in grid - makes it easy to scan for the type of thing you’re trying to achieve and get info on how to do it.
I periodically share art pieces done with CSS & HTML, and am always blown away by them and generally have no real understanding of how the authors are doing what they’re doing. This article is super cool because it starts to point in that direction… it takes the ‘Pure CSS Francine’ art piece we shared a few months back as an article, but then points to 5 key css attributes, showing what the piece would look like without using those. It’s not a tutorial per se, but definitely helps illuminate some of the path towards CSS art.
React Portals and Hooks are two relatively new features within React. Portals allow you to render “children” outside the DOM context of a component (e.g. if you have a modal that is conceptually a child of a component but should not be a child in the DOM), while Hooks are an alternative way to manage stateful components besides classes. Combining the two has some non-obvious nuances, and this article does a nice job of exploring those and showing how to do it.
While the React team has specifically stated that there’s no need to refactor existing class-based components to use hooks (class-based components aren’t going away), it’s inevitable that if you start embracing hooks you may want to refactor old components just for consistency if nothing else. This article does a nice job showing you how to rework an existing class-based component using lifecycle hooks into a new functional “hooked” component.
GraphQL is one of my top topics to learn this year, and towards that end this looks very neat. It’s a free online tutorial with a set of interactive exercises to gradually explore the language. Starts off super basic, so you don’t need any prior knowledge. Go check it out!
This is really cool! Some new properties in web animations that let you do e.g. frame by frame animations or “Jumping” between different spots in a keyframe animation. Possible usecases are things like “flipbook” style animations or a clock with jumping second hand. This post is best read in Firefox, because as of right now the new animation properties are only supported there.
If the article just above this was interesting, but felt a little too high level or left you asking “but how do I do that?”, this one is much more a simple tutorial showing you 3 tools you can use to influence the priority of loading and how to use each one.
A set of customizable and downloadable SVG icons all with an MIT license. If you’re not using a full-on icon set like fontawesome (which I highly recommend btw), but looking for some one-offs this looks like a great resource.