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.
Of course there’s also a set of great JavaScript articles and other resources. Enjoy!
Best,
KBall from ZenDev
CSS & SCSS
What We Want from Grid
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.
Look Ma, No Media Queries! Responsive Layouts Using CSS Grid
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.
GRID: A simple visual cheatsheet for CSS Grid Layout
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.
Pure CSS Drawing Essentials
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.
JavaScript
Sliding In And Out Of Vue.js
(Bias alert: I wrote this article). One of the key advantages of Vue.js is that it plays nicely with other code: it is easy to embed progressively into other applications, but it is also easy to wrap up non-Vue code into Vue. This article explores this second advantage, covering three distinct types of third-party JavaScript and ways to embed each of them in Vue.
Progressive React
We’ve seen a lot of articles in the last few months highlighting the importance of JavaScript performance, client-side performance, and measuring its impact on your users. What this article does well is take a single framework and break down a set of things to look at and ways to improve in order to do something about your client-side performance, time to first interactive, etc.
React Portals with Hooks
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.
Refactoring a component to use React hooks
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.
12 Concepts That Will Level Up Your JavaScript Skills
An excellent articles for improving your JavaScript language fundamentals, which should help out no matter what framework and other tooling you’re using.
Promoted Link
One Month Bootcamp
One Month believes that one of the biggest factors how likely you are to complete a bootcamp successfully is if you're working with other people. They run their courses in cohorts, with a premium on interactivity with the instructor and other students. Focused on beginners, they have a range of courses including JavaScript, HTML & CSS, and much much more. Click any of these links for a 10% discount.
Other Awesome
Try GraphQL
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!
Jumps: The New Steps() in Web Animation
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.
JavaScript Loading Priorities in Chrome
An interesting breakdown that I learned a lot from just looking at. Takes the various ways you can include JavaScript in your page (in head, at end of body, using defer, using async) and shows their different performance impacts based on how they are loaded & how they are executed. Also includes recommendations for when to use which. Very very neat!
Resource Prioritization – Getting the Browser to Help You
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.
Icon SVG
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.
Happy Friday!
That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html
Top comments (0)