Friday Frontend: Learning and Growing Edition
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!
KBall from ZenDev
CSS & SCSS
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.
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!
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.
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
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.
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
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.
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!
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!
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!