There’s also a bunch of great CSS articles, a couple good performance focused pieces, and an ode to simplicity.
KBall from ZenDev
CSS & SCSS
Very cool article exploring how to create blurred/frosted borders on an image. A great use of the
:before pseudoelement, along with some fun properties like
A set of relatively basic and yet still often overlooked concepts about CSS. Worth a read through. If you’ve done a lot of CSS you may be just nodding and saying “yeah I know”, but if even one of these has slipped your radar learning about it will be very helpful.
I was fighting this problem just the other day - dealing with
:hover styles and interactions when working with touch devices is just a complete nightmare. This article talks through a new specification that should help.
(Bias alert - I wrote this post). A look at some of the amazing things possible by using the
:after pseudoelements. Doesn’t go into super deep depth, more focused on showing interesting examples and linking off to more in-depth articles for those who want to go deeper.
This is a super cool project for playing around with and getting a visual understanding of what happens with flexbox properties. You can add and take away elements, manipulate each of their flex settings, and see things adjust right in front of your eyes. Very neat!
Nice article walking through a solution to a common problem - removing duplicates. Of course you could always use the lodash uniqBy utility function, but this shows you how to implement it yourself, and is a great exercise for getting comfortable working with arrays of data.
As someone who is still very much in the “I should learn TypeScript” rather than the “I’m using TypeScript” camp, I found this article interesting but occasionally hard to follow. I got a lot out of it, but wish the article had done a little more explanations for beginners… and there was definitely 1 section that had me yelling “this is the problem with TypeScript!” - when the simple looping over properties in an object got so much more complicated. A reminder that while types can be incredibly valuable there are some constructs that work well in a loosely typed language that are a pain in the rear to do with types.
Pretty fun read, looking at lots of things you can do to build a lightning fast website. I think the biggest takeaway is USE A STATIC SITE GENERATOR. :) And then optimize further from there… but that first step gets you a loooong way.
Very interesting look through the options available for suggesting to a browser things that it can do to speed up user-visible performance loading new resources. I was particularly interested to see things like
preconnect which I hadn’t known about before.
Frustration with the complexity of modern front-end development is common, and yet we also spend a lot of time shooting ourselves in the foot and deliberately creating more complexity. Why? Our relationship with simplicity is complicated - we claim to desire it, but also often find it boring or unmotivating. This article does a fascinating exploration of the ways we think about and talk about simplicity in web development.
An entertaining and sad virtual graveyard for all the applications Google has killed off over time. I’m of mixed feelings about this - it’s important for companies to be able to kill things off and move on, otherwise they can get stuck wasting resources in boondoggles. On the other hand, as more and more products get sucked up into massive megacorporations, sometimes they end up killing things for lack of scale that would have made great standalone businesses. To this day I still miss google reader, and I know huge amounts of my twitter feed are mourning the death of Inbox by Gmail.
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!