Welcome to December! Crazy how fast this year has gone by. Hope it’s been a good one for you!

This week’s newsletter has our usual mix of great CSS, JavaScript, and web-related topics, but I included a couple of design opinion pieces this time around, because they caught my fancy.

Living on the front-end, even the most engineering-focused among us can find ourselves bleeding over into some design work, at least on the interaction front, and it behooves us to be constantly thinking about what makes for good design.

Have a great week!

Best,

KBall from ZenDev

CSS & SCSS

CSS Animation 101

An excellent, thorough e-book on CSS Animation, released for free on github. The web version has links to lots of codepens too, so you can just click over and try things. Great!

DRY Switching with CSS Variables: The Difference of One Declaration

This is a tour de force showing the power of CSS Variables. The author makes a point that really stood out to me, and something I want to think about a lot more: CSS Variables allow styling to be made much more logical and mathematical. They then show fascinating examples across a wide range of usecases. Very very cool.

An Introduction to CSS Shapes

While the engineer in me loves the power of features like CSS Grid and CSS Variables, the creative tinkerer in me is absolutely in love with CSS Shapes. These are going to seriously open the doors to tons of more artistic layouts and just random sections on the web.

A look at CSS Resets in 2018

CSS Resets are historically a way to strip out browser-specific stylesheets and create a common base to develop a design on top of. This article takes a look at what resets are in use right now, as well as an interesting trend to use “resets” to create less of a pure “reset” but also a full “base” with a set of utilities as well.

Create a CSS Grid Image Gallery (With Blur Effect and Interaction Media Queries)

I didn’t know much about interaction media queries, but they make total sense for exactly the usecase explored in this article: Showing ‘on-hover’ content in a different way for touchscreen devices where hover is meaningless. And they’ve got pretty good browser support too!

JavaScript

TypeScript: Type predicates

Ok so technically this is TypeScript, not just JavaScript, but this is a really cool feature! One common challenge for me is how to deal with functions that accept multiple types and break apart into different cases without giving up the benefits of typing altogether and calling something type unknown. Type predicates give you a way to tell the compiler what you learn about the types dynamically.

React 16.x Roadmap

Some very cool things in the works for the world’s most popular frontend framework. By now you’ve probably all heard about hooks, but I think the upcoming concurrent mode is at least as interesting. Being able to render complex components outside of the main thread is going to be a HUGE step forward for user experience, particularly on slow-cpu mobile devices.

Comparing JavaScript HTTP Requests Libraries for 2019

Nice little lookthrough with pro and con lists for each of 5 libraries you can use to do HTTP Requests. I’ve been using axios a lot myself… their con for it is “Quite tricky to use”. Not sure I agree… certainly to do complex things there is some complexity, but basic requests are just that - basic.

Concepts of Functional Programming in Javascript

A solid overview of functional programming with JavaScript. I’ve said before and will say again - learning functional programming has been one of the most beneficial investments I’ve ever made in my coding. Even when I am not writing purely functional code, my code benefits tremendously from functional concepts.

A Complete Guide To Routing In Angular

Framework routers are a great example of the way that best practices and concepts have cross-pollinated across the front-end ecosystem. The Angular router looks an awful lot like vue-router, which looks an awful lot like react-router, which in turn looks an awful lot like the Ember router which I believe started the whole thing. What that means is - if you master one, picking up the others will be a breeze. This article happens to do examples in Angular, but even if you’re not using Angular the concepts it covers will be useful to you in any other SPA framework that has a router.

Other Awesome

Just use :focus styles, damnit

This is a interaction/design opinion piece, but it highlights something that I think is really valuable to think about. We often as front-end developers and designers make decisions based on how we use the web. But not everyone does things the same way. Users are not solely keyboard or mouse users, but often switch fluidly between them, and approaching tools like focus rings assuming users are all 1 or the other can lead us astray.

Difficulty Is Not A UX Dirty Word

Also a user experience/design focused piece, this one is a really interesting counterargument to the trend of attempting to simplify everything. The piece argues that friction, or complexity, can actually have value in and of itself. I’m not sure I agree, but what I definitely do think is that mindless pursuit of simplicity can be bad - the complexity of your interface is inextricably linked to the complexity of the problem your users have to solve. You want to abstract or remove away any and all unnecessary complexity, but if you start removing necessary complexity you are also removing utility.

Microsoft is building a Chromium-powered web browser that will replace Edge on Windows 10

Ok, I think this is actually very not awesome, because it means we’ll be down to essentially just 2 different browser variants (see this article for an explanation of why this matters), but it is a very big deal for web developers.

Console.rules(💪)

Ever open up your developer console on a site like Facebook and notice that they pre-fill your console with a bit red STOP and some other interesting info? Wonder how they style their ‘stop’ so it is big and red? This article dives into the tools you have at your service to tinker with and manipulate the console.

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