Friday Frontend: Trick or Treat Edition
Happy (almost) Halloween! The meaning of this holiday has changed a lot for me since having kids, but whether Halloween for you means partying with adult beverages and risque outfits or chaperoning small children from house to house and attempting to limit their sugar intake, it’s a lot of fun regardless.
And even if you don’t celebrate Halloween, at least you can celebrate the weekend, and all of the goodness that comes in this week’s Friday Frontend! :D
KBall from ZenDev
CSS & SCSS
Nice overview of the thinking behind modular CSS and a walkthrough of some of the practices that lead to more maintainable CSS and less “Chaotic Style Sheets”.
Pretty cool deep dive into two different ways of implementing drop shadows with CSS. Gotta say, begin able to ignore the box model and create shadows in other shapes is a pretty cool property of
A video of Rachel Andrew’s talk from CSS Day 2017. Fascinating exploration of the new possibilities CSS Grid opens to us in creating layouts.
Nice overview of the big players in the CSS Framework game. Not too much depth, but if you’re new to this world definitely a good glance through what’s available and some decent comparisons between them.
Nice, simple, and easy to follow breakdown of assignment destructuring in ES6. I definitely have found that this has made my code simpler and easier to read. If you’re not already using it, definitely check this out!
The Vue.js approach to transitions is so easy it feels like cheating, and the facilities they have for animations in general are pretty great too. This is a nice intro.
While using React for the examples, this article is relevant to anyone building components in any system. It does a great breakdown of the pros and cons associated to different ways of passing in data and managing data between components. Definitely recommend giving it a read through.
I’ve been neglecting Angular a bit these last few weeks as I’ve personally been very busy in React and Vue, but this is pretty darn interesting. Shows how to use “Auxiliary Routes” to essentially create routes for different sub-components of your page that could be mixed and matched. Cool!
Mozilla brings Microsoft, Google, the W3C, Samsung together to create cross-browser documentation on MDN
In some excellent news, all of the major browser vendors are getting on board to create a SHARED source of truth with regards to documentation on how to build cross-browser web applications.
This has a really nice combination of data and best practices making the case that we should be using AMP. I’m becoming more and more convinced that I need to do an AMP deep dive.
Very nice article digging into philosophies of testing, what you should be testing, and why. There are many different philosophies of testing, from full on test driven development to purely manual testing. Your approach should be determined a lot by the type of software you’re building and the problems it’s solving. That said, I think this approach is one of the best out there for a wide range of domains.
Interesting article from some Google UX research on how users perceive and interact with the mobile web.
Wow. Just wow. If you’re into fonts at all, you’ll definitely want to dig into this amazing deep dive into font variations and innovative approach to font exploration. Read the article, and then click through to the demo, you won’t regret it.
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!