Hope you had a great week! I don’t historically celebrate Valentines day (it feels like a very commercially driven holiday, not to mention the emotional impact on people struggling with romantic relationships), so I’d like to instead propose an UN-Valentines day where you take some time to focus on self care. Relationships are important in our lives, but so often we neglect ourselves in the service of others, and it is just as important to take care of us. Take care of yourself! You are worth it!

And if your idea of self-care is to read some interesting stuff, there’s some great articles in this week’s episode. :) I loved the article ‘Same HTML, Different CSS’, greatly appreciated some of the looks into using the right abstractions with React, and got a lot out of the lessons from building “N26 for web”.

Enjoy!

Best,
KBall from ZenDev

CSS & SCSS

Custom Styling Form Inputs With Modern CSS Features

Styling form inputs has always been a pain. I can’t tell you how many strange hacks I’ve done in the past to create custom checkbox inputs, for example. But this is an area where modern CSS has our backs! So long as you’re okay leaving IE11 out of your beautiful styles, you can now custom style checkboxes, radio buttons, and switches without needing any extra HTML or JavaScript. Check it out!


How I recreated a Polaroid camera with CSS gradients only

Wow! If you’re interested in learning how to make CSS art, where you’re recreating realistic-looking (or even cartoon-looking) visuals with HTML and CSS, this is one of the best how-to articles I’ve ever seen. Goes deep into how to think about structuring your HTML, applying stacked gradients to create a visual base, and stacked shadows to create depth. Love it.


Understanding CSS Grid: Grid Template Areas

Third in an excellent series on CSS Grid. Grid template areas are fascinating - they almost feel like a different spec than the rest of CSS Grid (and in fact I’ve heard they started as one), but enable some super cool and intuitive layout possibilities.


Getting Fancy with position: sticky;

Exploratory post (with companion codepens so you can play along) that looks at some interesting uses of the position: sticky property. This is another area where modern CSS is making it *so much easier* to achieve things that used to take a ton of custom JavaScript to accomplish.


Same HTML, Different CSS

This is a great article to follow along with, but also a great challenge to set yourself to improve your CSS skill. The author takes a single set of HTML and then works through figuring out how to implement 5 different designs without changing that HTML. Very cool!


JavaScript

Top 13 useful JavaScript array tips and tricks you should know

Maybe ignore the ‘top’ designation in the title, as there’s some in there that are a little obscure or rarely needed, but this is a great set of tools to add to your tool chest when it comes to working with arrays in JavaScript.


In React, The Wrong Abstraction Kills Efficiency

React specific in details, but I think there’s some general lessons to learn here. Figuring out what abstractions to use in what cases, and avoiding making your code overly rigid in pursuit of ‘DRYness’ are key and ongoing lessons for software developers anywhere.


Pitfalls of overusing React Context

Another valuable general lesson, though in this case the specifics are more central to the piece. The lesson: Just because something is powerful doesn’t mean it’s the right tool for every job. This example explores this for Context in particular, but I think we can apply this at multiple levels. Don’t always reach for React when some simple JS will do. Don’t always reach for JS when maybe you could solve your problem with HTML and CSS. Just because we have amazing hammers doesn’t mean everything is a nail.


Do you want JavaScript again or more JavaScript? (Audio)

(Bias alert - I’m a panelist in this show). This was a super fun episode of JSParty where we play “JavaScript Jeopardy”. A great way to test your knowledge of obscure JavaScript trivia by playing along as you listen, or to learn new corners of the language to go and learn about.


Other Awesomeness

Lessons from building “N26 for Web”

Great piece that looks less at web-specific things and more collects learnings for how to manage and lead a growing software development team and project. Lots of good stuff in here.


Could browsers fix more accessibility problems automatically?

I think this is 100% the right way to be looking at this problem. As much as possible, we should be moving the problem of accessibility lower in the stack, to browsers when possible, if not possible then to frameworks or other reusable libraries. This is too important of an area to leave it to the whims and skills of every new developer working on the web; the more we can encapsulate best practices in reusable tools the better.


11 Popular Misconceptions About Micro Frontends

A solid article dispelling a set of common myths and misconceptions about micro frontends. This is a space to pay attention to, maybe not for this year but definitely in years to come. As our front ends continue to become more complex, it’s going to be more and more common to want to reap the organizational benefits of separating out pieces to different teams (the same benefits that lead to microservices making sense on the backend), and that means that more and more people will be adopting a micro frontend approach of some sort.


CO2 emissions on the web

An interesting way to think about and evaluate the environmental costs of shipping too much JavaScript. And highlights an interesting way to make an environmental impact - work on ways to trim down the size of popular open source packages. I think what I appreciate the most here is the effort to provide realistic quantification of impact.


The what, when, why, and how of federated GraphQL

I continue to be fascinated by what’s going on in the GraphQL landscape. In particular, this looks at how you can decompose a single GraphQL server into a set of microservices, while still exposing a single API endpoint for front-end developers.