Friday Frontend: Un-Valentines Day
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”.
KBall from ZenDev
CSS & SCSS
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.
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.
Exploratory post (with companion codepens so you can play along) that looks at some interesting uses of the
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!
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.
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.
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.
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.
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.
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.