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!

Best,

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

How to Create a Simple Top Navigation using Flex Box

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.

Rocking California’s “I Voted” Sticker in CSS for Election Day 2018

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.

Fun Tip: Use calc() to Change the Height of a Hero Component

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.

Recreating the Red Dead Redemption 2 Tintype Loading Screen Effect in CSS

Bite-sized example of how to combine CSS animations with CSS masks and filter effects to create a super cool effect with minimal code.

How to Organize Your CSS with a Modular Architecture (OOCSS, BEM, SMACSS)

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.

JavaScript

Listening to DOM changes by Javascript Web API, Mutation Observer

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!

The Evolution of Async JavaScript: From Callbacks, to Promises, to Async/Await

Probably the best ‘explainer’ article I’ve ever seen for understanding asynchronicity in JavaScript. Complete with not only good code examples but also some really nice human/physical metaphors to make it all make sense.

Vue API calls in a smart way

Don’t be fooled by the ‘Vue’ in the title - while there is an example using a Vue component, really this is a post about how to design your API access in JavaScript, particularly if you have a REST API behind it. Not a definitive ‘you should do it this way’, but a good example of how someone has managed it.

COPYING OBJECTS IN JAVASCRIPT

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.

Making Sense of React Hooks

The ultimate explanation of the thinking behind the new React Hooks, by the author (and master explainer) himself, Dan Abramov.

Other Awesomeness

SmashingConf New York 2018: That’s What It Was Like

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!

The Web Accessibility Introduction I Wish I Had

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.

Web Performance 101

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.

How We Used Gatsby.js to Build a Blazing Fast E-Commerce Site

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!

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