KBall from ZenDev
CSS & SCSS
A good tour of a variety of CSS tools all around the same example - creating a triangular breadcrumb ribbon. Touches topics including CSS grid, pseudoselectors & psuedoelements, fancy border tricks, clip paths, and more
Neat technique! Use some 0-height (or 0-width for column) elements with a 100% flex basis to force breaks between different points in your flexbox layout. Combine with the order property for dynamic shifting & playing. I like it!
I’m very accustomed to creating triangles with the so called “border hack”, but this article takes a look at a new method for triangles via CSS enabled by the newer
This article is really aimed at folks in the beginner to intermediate stage with CSS, so if you’re an expert you can probably skip by it. However, if you’re in that area where getting asked to implement an entire layout or mockup sounds super intimidating, this is a nice step by step guide for how to walk through it.
A collection of nifty CSS effects, displayed visually, and if you like one you can click it and instantly see the HTML & CSS used go generate it. Great both for inspiration and as a resource.
Super cool look at ways to use async/await inside of loops. This is an area where there can be a lot of gotchas, and it’s well worth reading through & thinking about. Some great tricks too - I like the mental model of using
Array.map to turn a set of
await calls into an array of promises.
I don’t usually link to videos, but this one is super relevant - rebuilding one of the most used web applications in the world with cutting edge tooling optimizing for extreme high performance. Very interesting. I hadn’t looked into Relay at all before, but it looks super cool! Starts to get into the tech at about 4:30 in.
Creating terminal/CLI applications using React. My first reaction to this was “huh, why?” But then talking through it with some folks on JSParty I saw 2 big areas where this could cause incredible breakthroughs. First is for full terminal-absorbing applications (think
top and its brethren) where hacking with readline to control the entire terminal feels like black magic. If that became just React, it would be so much lower barrier to entry. The other is in terms of standards of composability… it’s easy to install React components from NPM and use them, because the interface is so standardize. No such standards exist for traditional CLI apps, so this could create a much more robust pluggable ecosystem for creating CLI applications.
I tend to be a bit of a crypto-skeptic… there are many many applications for which blockchains are not good solutions, and a lot of the hype is overblown. That said, there is still some really interesting stuff there, and there’s no denying it’s a hot topic. This article shows how easy it is to get started using your favorite web technologies.
With new APIs and capabilities in the browser, it often takes a little while to figure out where and when they’ll be useful. This article looks at a few such cases for the Intersection Observer API. The first one (lazy loading images) is one I’ve seen before, but it’s still impressive how simple this is now with this API. The other examples I hadn’t thought about, but make perfect sense.
It seems like Udemy has a sale every other month, but it still amazes me how many AMAZING courses you can get for just $11.99. If you’ve been holding out, or meaning to but haven’t yet, here’s another opportunity. And as a reminder, some of my top recommended courses: this Vue course, this React course, and this CSS course.
An interesting think piece on user experience and what it’s role is within a product and within an organization. I love the concept of “UX” being at the boundaries between supply and demand for different things, and that this shows up inside at multiple layers.
Most articles I’ve seen about Web Components talk about how they work and how to build them. This is one of the first I’ve seen really looking at their role in the overall ecosystem and thinking about the ways we can and should use them. It also links out to some great resources on the ‘how to do it’ pieces if you need that too. Wonderful!
This is kind of brilliant. One of the things that has kept Internet Explorer being used long after even Microsoft wanted it to die was old, unmaintained, but mission critical internal business applications that only function on IE. So businesses would force employees to keep using it. But with this, they’ll be able to use a new modern browser that embeds IE for those old legacy monsters and uses Chromium for everything else. Win win!
A fascinating exploration of a number of the dichotomies and tradeoffs at the heart of modern front-end development. A look at developer complexity, performance budgets, gatekeeping, and more.
(Bias alert: I’m quoted in this article). An interesting look at the trends in terms of what skills and frameworks employers are looking for based on an analysis of job postings. I think there’s some generic “on all developer posts” items in there, but still and interesting look at demand in the market.
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!