Happy Friday! I hope your week was awesome!

I’ve been thinking a lot this week about learning and growing; both technically (I’m doing some work for a client that has got me deep down in cluster automation, far from my normal frontend) and as a human (At an event yesterday and today and pushing myself to be less of an introvert).

I value learning a lot, but boy is it a struggle when you’re down in the midst of it. You're amazing for taking the time read newsletters like this, and thank you for making me a part of your learning journey!

I’ve got a fun set of articles for you this week, including super cool CSS+Unicode generated background patterns, dueling takes on CSS in JS, a really cool application of Machine Learning in JavaScript (who knew?), and much much more.

Enjoy!
KBall from ZenDev

P.S. Next week I’m going to be MCing an episode of the JSParty podcast. The podcast is live broadcast at 10:00am PST Thursday, join us at https://changelog.com/live

CSS & SCSS

Responsive tables, revisited

Making tables responsive is a Hard Problem™. In fact, when creating responsive sites I try to shy away from using tables as much as possible in favor of other design patterns like cards. That said, sometimes you’re displaying tabular data, and tables are just what make sense. In this case, you might be interested in this exploration of different ways to make tables responsive, along with their pros and cons.


Unicode Patterns

This is fun! The author shows how we can use CSS pseudoelements with content set to unicode characters to create a variety of interesting patterns. The library they’re using for random generation, CSS Doodle, looks super cool as well. Neat!


Styling buttons, the right way

Very nice walkthrough of the thinking and the CSS that goes into creating a well-styled, reusable component. In this case they take a button and walk you through step by step: first applying a reset, building out basic component styles, handling hover, focus, and active states, and finally addressing browser quirks around sticky focus styling. I appreciate the fact they show you the thought process throughout, so you can more easily apply this approach to building your own components.


New CSS Features That Are Changing Web Design

A look through the ways that new features (particularly CSS Grid, but also css shapes & clip-path) are changing the ways that we design websites. I dunno about you, but I’m excited to be moving away from the “every site looks like one of three archetypes” approach to web design. :D


What's wrong with CSS-in-JS?

The CSS-in-JS debates have not cooled down in the eight months since I wrote “CSS in JS is like replacing a broken screwdriver with your favorite hammer”. In this article, well known designer Brad Frost lays out some of the problems he’s encountered with CSS in JS as encountered in use by his clients.


What's right with css-in-js

Arguing the other side of the CSS in JS debate, Micah Godbolt walks through the right ways to approach CSS in JavaScript to mitigate many of the problems encountered by Brad. He also talks up some of the benefits of this approach. My take: the right approach is tremendously context dependent. CSS in JS does solve real problems for large products and teams. However it also makes a set of bad practices really easy to fall into, and is overkill for the vast majority of projects.


JavaScript

A Simple Guide to ES6 Promises

Promises are one of the big feature upgrades in modern versions of JavaScript, enabling elegant asynchronous programs without callback hell. The ability to chain promises enables intuitive apis that function equally well with synchronous (cached) or asynchronous data. If you’re still struggling with using promises, or haven’t started wrapping your head around them yet, this guide is a great place to start.


Real-time Human Pose Estimation in the Browser with TensorFlow.js

Wow - If you’re like me and have been wondering what the point of porting TensorFlow to JavaScript was, this might have an answer for you. Real-time pose estimation in the browser using webcams - do I smell a browser-based equivalent of Kinect gaming coming soon?


React 16 — What can it do for you? — Part 1

React 16 brings some awesome new features, including portals, the context API, and the ability to render components with multiple root elements. (A challenge I recently talked about for Vue components). In this part 1 of a 2 part series, we learn about some of these new features, what they look like and how we can use them to make our React apps more awesome. :D


⚛ The React State Museum

There are so many different possible ways to manage state in a React application - and really, the approach you take probably should depend a lot on your application architecture and scale.  This post attempts to give you an overview of all of your options and some of the pros and cons of each.


my struggle to learn react

A great discussion of some of the challenges facing folks who haven’t been deeply immersed in the modern JavaScript ecosystem when they try to learn to use React. One of the biggest challenges - all of the new ES6+ syntax at the same time as a brand new framework (React) makes it very hard to even know what you should be searching for to try to learn. If you’re struggling with that issue as well, you might be interested in this post I did to break down what is what and link off to resources.


Other Awesomeness

Things Designers Should Know About SEO In 2018

I gotta be honest, I love the direction SEO is taking. It’s moving more and more away from keyword hacking and link stuffing and towards things like responsive design, information hierarchy, and user experience. In other words, to rank better in search, make your site better for users! Great!


Interactive Backgrounds - Brusher

Ever see those super cool websites that bring parts of an image in and out of focus based on where your mouse is? This is a lightweight (6k minified) JS library lets you set these up with just a line or two of JavaScript, and configure it exactly how you want it. I see a lot more of these websites in our future…


I Used The Web For A Day With JavaScript Turned Off

In today’s world, it’s a very rare user that actually surfs the web without JavaScript, but as the author reminds us “All your users are non-JS while they’re downloading your JS.” Especially with the flakiness that sometimes shows up with the web, it’s valuable to take a look at your web sites and applications see how they work - if at all - without JavaScript. It’s an eye-opening experience.


Introducing the Microsoft Edge DevTools Protocol

I’m old enough to remember when Microsoft was the poster child of closed systems, but the last few years have been amazing to watch as they’ve opened up to Open Source and standards. This is the latest in a long line of improvements in that direction - a protocol for interacting with Edge Devtools that is not only built on top of open REST and Websocket APIs, but aligns with the community and is more or less interoperable with the Chrome Devtools protocol. Sweet!



Happy Friday!

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!