KBall from ZenDev
CSS & SCSS
We included Part 1 on implicit tracks last week; this is an excellent walkthrough of using the new
fr unit in CSS Grid. I have to admit, the behavior for 0.5fr was not what I expected, but after reading this it makes perfect sense.
Chris Coyier dives deep on one of the most pervasive design situations in web development, a full bleed background with padded content. He looks at common solutions, drawbacks, and hints at some really creative out there solutions if you find yourself stuck.
Impractical, uses a non-standard attribute, and has very little use for professional development. And yet I can’t stop looking at it. A stunning example of creating art using the web as a medium. The simple power of reflection and nesting to create unfolding patterns. Beautiful.
A solid set of recommendations that will help you keep your CSS in order and in good shape, keeping you from doing things you’ll later regret. Some relate to accessibility, others to consistency, and some just to simple maintainability, but all are good to at least consider.
An in-depth look at a few different approaches to responsive typography and so-called “fluid” (continuously varying sizes) typography. Good breakdown and assessment of pros and cons of different approaches.
Bonus CSS article this week - a great quick hits list of cool things you can do with CSS, each with a codepen example. A great quick scan, and if you see something new you can go dig deeper.
Proxies are super powerful, but not often used. I think one of the underlying reasons is it can be difficult to wrap your head around what exactly to use them for. What I love about this article in particular is it uses a ‘teach by example’ mechanism that not only exposes how to use proxies, but a whole myriad of powerful usecases that will get your creative juices flowing.
If you’re not a functional programming guru (I’m not), this will be a total mindbender. But it also does a really really good job of building up both an explanation and a case for a functional/pure approach to error handling. And has some really cool train graphics that helped me understand. :)
Generators are one of those language features that I really want to wrap my head around and use, because they seem really powerful and useful, but I just haven’t yet. But I’ve had a few times I’ve come close… the first was a talk at JSConf Hawaii (video sadly still not up) and the second was this blog post. Check it out.
Okay so it’s using classes and lifecycle methods instead of hooks, but I this is a nice step by step example of building out a moderately complex React component. The thinking that goes into it, and how you can build out the methods one at a time.
It’s that time of the month again, when Udemy discounts all of their courses down to $11.99 or so. But don’t let that take away from their value… there’s some great courses on there. Some of my top recommended courses: this Vue course, this React course, and this CSS course.
A fascinating set of research and stories exploring the health of the internet in 2019 when it comes to things like safety, openness, and centralization. I plan to spend a lot of time digging through this. Very very cool.
In case you missed it, last week GitHub introduced a new package registry tied into github. Besides being a warning shot at NPM, there is some really interesting potential here - the ability to trivially set up internal registries at companies without needing another service provider, and the possibility that GitHub would be able to do end-to-end analysis and validate that the code you’re looking at is the code in your package. Very very interesting, and something to watch closely.
Interesting look into the new (still in the process of getting implemented in browsers) native lazy-loading functionality. Some very interesting tidbits -- I had no idea browsers would try to sniff dimensions in lazy loaded images to keep from having to re-layout. Neat!
GraphQL is going bonkers in 2019, and this blog post is a great wrap up of a lot of the things going on.
That's it for this week's Friday Frontend newsletter. If you enjoyed this, be sure to sign up to get these newsletters straight to your inbox every Friday!