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

Happy Friday!
KBall from ZenDev

P.S. It may or may not be relevant to you, but if it is I don’t want you to miss it. If you don’t use Wordpress ignore this, but if you’re in the Wordpress world, you’ll want to check out the bonus JavaScript link down below.  One of the best Wordpress teachers out there, Zac Gordon, is doing another cohort of his Javascript for Wordpress master course, and TODAY (Oct 27) is the last day to get early bird pricing. Check it out!

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 filter:drop-shadow.


Unlocking the Benefits of CSS Variables

We’ve all been pumping CSS Grid as a game changer for a while, with anxious eyes on the browser support hoping we can use it soon, but another HUGE gamechanger coming in CSS is custom properties. Closing in on 80% of global browser availability, this will allow some fundamental advances in reusable CSS & javascript-manipulatable theming.


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.


JavaScript

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!


The melting pot of JavaScript

Very thoughtful piece by Dan Abramov, one of the core developers for React, on the JavaScript ecosystem, what’s good and bad about it, and how we can keep making it better.


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!


[Bonus] [Paid] The JavaScript for WordPress Master Course

Extra bonus 6th JavaScript link this week! A number of folks have emailed me saying that they’re using WordPress, and since it’s the Friday before Halloween I figured I’d throw an extra “treat” in the basket. Zac Gordon is a phenomenal instructor, and he just re-opened enrollment for this course. Today is the last day for “early bird” pricing, so if you’re interested jump on it!


Other Awesomeness

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.