Friday Frontend: Election Hangover Edition
Back to feeling normal physically, though with all the chaos in the US political system this week with the election maybe not emotionally. If you’re looking for some fun reads to chill out this weekend and recover, I’ve got you covered!
Some fun walkthrough examples in the CSS section (my fave is implementing an ‘I voted’ sticker in CSS), a lot of really neat JS articles, and a ton of talk recordings in the rollup from the recent Smashing conference. Enjoy!
KBall from ZenDev
P.S. in case you missed it last week, I want to call out again the TLDR newsletter because I leaned on it a lot this week.. When the world is chaotic but you need to keep up on what’s going on in technology, this is a go-to.
CSS & SCSS
I sometimes have a tendency to skip over flexbox articles today as “old news”, but occasionally I remember how mindblowing flexbox was to me when it first came out. It completely solves a number of layout problems that have been around since the beginning of the web. If you’re relatively new to CSS, or don’t find flexbox intuitive yet, this is a nice beginner-level walkthrough applying flexbox to implement a design.
Thematic, and also a great step by step walkthrough of how to think about implementing an illustration using CSS. Complete with codepen examples at each step of the way for those who want to follow along at home.
The rise of “fluidly responsive” layouts and elements as compared to media-query based responsivity has been one of the things that has really come of age in the last few years. Flexbox and calc started it, CSS Grid has massively extended it, and more and more people are figuring out how to use these modern CSS tools to make responsiveness that works throughout a fluid range of device sizes.
Bite-sized example of how to combine CSS animations with CSS masks and filter effects to create a super cool effect with minimal code.
Solid CSS architecture article. Gives you a great overview of some of the most commonly used CSS architectures, some of the core concepts behind them, and links off to more information.
Mutation observers are a super cool DOM API that lets you register callbacks from the browser when DOM elements are modified. I’ve seen them used before in e.g. ZURB Foundation to auto-update components when their contents change, and I can see a number of other potential use cases particularly for library and framework developers. Check them out!
Navigating between shallow and deep copies has bitten a lot of developers. This article does a quick breakdown of what these are, but then really dives into some approaches for doing each. I was particularly interested to learn about the Structured Clone algorithm.
The ultimate explanation of the thinking behind the new React Hooks, by the author (and master explainer) himself, Dan Abramov.
I’ve been going to more conferences lately, but still feel a bit of FOMO when it comes to super cool conferences like SmashingConf. Luckily, they put together a great after-the-conference summary for us, complete with links to videos of all the talks!
Extremely well-done introduction to web accessibility in the ever-popular “explain it like I’m 5” category on dev.to. Definitely recommend taking a read through whether you’re pretty experienced in implementing accessible websites or brand new to the concept of accessibility.
Great step by step guide through many of the factors that can make your website slow, why they do so, and how to mitigate them.
Very cool case study on building an E-commerce site using the Gatsby static site generator. Check out the article, and then take a quick look at the site - BOY is it fast!