This week’s episode is coming to you all the way from Medellín Colombia, where I’m attending and hosting a panel at NodeConf Colombia. The JavaScript community down here in Latin America is popping, and getting a chance to explore the city has been amazing. They have such an amazing story, going from the most dangerous city in the world to a rising star of innovation, tourism, and culture over the course of the last 30 years. If you love to travel, you should definitely put Medellín on your list.
Anyway, on to the front-end, this week we have a number of interesting articles to explore - the top ones I’d recommend are poking around in the data from the State of CSS survey, and listening to the podcast episode titled ‘JavaScript is the CO2 of the web’. So many fascinating insights to be had. Enjoy!
Best,
KBall from ZenDev
CSS & SCSS
Making Tables Responsive With Minimal CSS
Nice look through various approaches to making tables responsive. I kinda love how they change the display mode to flexbox for smaller screens. Then your tabular data still behaves like a table for screen readers & folks with a large screen, but you can move to a much more mobile friendly card-like approach on mobile.
Do I really need CSS modules?
An opinionated post, but a decent summarization of the benefits/arguments for CSS Modules. Doesn’t really go into the technology that much, rather focuses on making the case for adoption and then links off to resources.
The perils of functional CSS
Functional CSS, atomic CSS, utility-first CSS… whatever you call it this approach has been getting a lot of buzz recently. I’ve seen people trying Tailwind and loudly stating they’ll never go back. This article pushes back on this trend, highlighting some of the challenges of functional CSS.
State of CSS 2019
The inaugural edition of the ‘State of CSS’ survey has published its data. Brought to you by the same folks who do the ‘State of JS’ survey, it’s not entirely clear how representative their sample is but there’s some very interesting data nonetheless.
DOM Element Dimensions and CSS Transforms
This is pretty interesting. There are a number of different ways you can measure dimensions of elements using JavaScript - and it turns out, those different ways react differently to CSS transforms. Fascinating.
JavaScript
The reduce ({...spread}) anti-pattern
I like this article less because of the specific pattern, and more because it takes a deep look at what’s happening under the covers when you use a spread operator. Plus, it talks about operational complexity and uses big O notation, which are rare in the frontend world. :P
JavaScript is the CO2 of the web [audio]
(Bias Alert - I MC’d this podcast) This was a fascinating discussion with Chris Ferdinandi, "The Vanilla JavaScript guy", ranging from a discussion of what “vanilla” actually means, why you might want to eschew more advanced frameworks, how people learn and what challenges are, and a set of great vanilla JavaScript tips, tricks, and resources.
Functional JavaScript: Traversing Trees with Recursive Reduce
There’s a lot of computer science data structures that don’t come up much in frontend development, but trees are something we have in spades. The DOM is a tree, virtual doms are trees, all of our component-based architectures are trees… so this look into some tree-related algorithms using reduce is pretty darned valuable.
The future of React, unfolding with Suspense
Fascinating look through at one of the up-coming features in React. I love how the React team keeps innovating and pushing the ecosystem forward. In this case, it allows dealing with variable network times and asynchronicity in a beautifully simple declarative manner.
All you need to know about Ivy, The new Angular engine!
I don’t do Angular, but it was interesting reading this and seeing another example of the way innovations are spreading across the ecosystem between frameworks. In particular, this post highlights how the latest version of Angular is enabling dynamic imports and code splitting, as well as functionality like Higher Order Components. Maybe a little late to the party, but it’s getting there.
Other Awesomeness
Microfrontends: the good, the bad, and the ugly
(Bias alert: I wrote this) There was a lot of conversation and spontaneous memeing around the topic of microfrontends last week, so I wrote a followup piece breaking down the pros and cons of this architectural approach.
How to Section Your HTML
Excellent, thorough reference piece for utilizing HTML5’s sectioning elements. If you ever have questions about when to use ,
How To Create A PDF From Your Web Application
This is something that doesn’t matter most of the time, but when a request comes in to be able to create a downloadable PDF, it’s really nice to know your options.
Optimizing Google Fonts Performance
I’m a huge fan of Google Fonts. By providing a free, easy-to-use set of fonts they have dramatically improved the ability to do interesting things with fonts on the web. But boy can you mess up your performance if you’re not careful. This is a good resource to learn what they do for you… and what you still need to be careful to do in order to keep a performant web site while using Google fonts.
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
Top comments (3)
Welcome to the city!
Great info thanks Kevin! Any option to do this in Bogota?
If you have a conference coming up in Bogota that makes sense to do a panel in collaboration with JSParty, would be happy to discuss! You can reach out to me directly by email at kball (at) zendev.com or on twitter (@kbal11) my dms are open