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
Success with CSS
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”.
Breaking down CSS Box Shadow vs. Drop Shadow
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
Unlocking the Benefits of CSS Variables
Rachel Andrew | What I discovered about layout via CSS Grid | CSS Day 2017
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.
Top 5 Most Popular CSS Frameworks that You Should Pay Attention to in 2017
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.
What You Should Know About Assignment Destructuring in ES6
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!
Creating Vue.js Transitions & Animations
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.
How to structure components in React?
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.
Implementing Dynamic Views in Angular
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.
The Argument for AMP: Lessons from 10 Case Studies
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.
Write tests. Not too many. Mostly integration.
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.
Mobile web through the users’ eyes
Interesting article from some Google UX research on how users perceive and interact with the mobile web.
The Anatomy of a Thousand Typefaces
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.