Friday Frontend: May Day Edition
Hope you’re staying safe and healthy. Welcome to May! After about the longest April I can ever remember. Hope things start to get better this month.
I’ve been super busy this week, so a little light on the articles, but there’s still some great ones. Definitely check out the article on JavaScript performance, and I love the look at the spectrum of static to non-static sites.
Best,
KBall from ZenDev
P.S. If you are looking for work, or your company is hiring, please hit REPLY and let me know. I know so many folks have been impacted by COVID related economic problems, and I’m doing my best to play matchmaker to help them find new opportunities. A couple resources for those looking - I want to plug again this great resource of which companies are hiring and which are not, as well as share this resource that a reader shared.
CSS & SCSS
How to Make a CSS-Only Carousel
This tutorial contains a few excellent examples of how far we’ve come with CSS. OMG it used to take heavy JavaScript and tons of tinkering to get the behavior that can now be implemented with simple properties like scroll-snap-type
and scroll-behavior
. Wow!
Accessible Font Sizing, Explained
Part of me felt like this shouldn’t be in the CSS section, because it touches on design choices and isn’t isolated to the technology, but the tactical information for how to implement accessible fonts in CSS is just too good to leave it out of this section.
Selection in CSS
Great look into the tools you have available in CSS for styling things related to selection. Is text selectable? What does it look like if you select it? What are the limitations of how you can style selection? It’s all there in this article.
The CSS "content" property accepts alternative text
Woah, this is cool! If you, like me, often use the content
property of :before
and :after
pseudoelements to style things, and your approach to accessibility with those pseudoelements was simply to hide them from aria, look again! There’s a way to set alt text!
JavaScript
The Cost of Javascript Frameworks
Phenomenal piece of research looking at the performance of sites across the web, broken down by which frameworks they’re using. There’s some nuance here, and as the author highlights “It’s not just about the framework, but approach to development the framework encourages”, but definitely some very important data and food for thought.
5 JavaScript Scope Gotchas
While newer features of JavaScript have given us tools like const
and let
which are easier to think about with regards to scope than var
, they have not made the challenges of scope go away completely. This article highlights 5 common errors, explains what’s going on, and how to fix them.
What I wish I knew about React
This is a great article for folks new to React coming from other front-end frameworks. It’s also a solid example of why you don’t need to be an expert to write great articles. The author documents their learning process, and some of the key realizations they’ve made as a developer new to React. And it’s super useful! Check it out.
Other Awesomeness
Static or Not?
A nice breakdown of some of the pros and cons of building a static site vs using a more traditional CMS or web application. That said, I think the big point that Chris is making here is key: It’s not an either or. Instead, the way to think about static sites and static site generators is around precompilation. How much *can* we precompute before a user is making a request, so that it can be living out on a CDN all ready for them. I think a future of many sites is a hybrid of precomputed static content intermingled with dynamic, server-rendered sections.
Advice for Writing a Technical Resume
Sadly many folks are in the position right now of trying to find new work, and for those just coming out of school or bootcamps the situation is even more difficult. I’ve done a lot of helping folks with resumes (and BTW if you’d like a quick review/feedback you’re welcome to email me and ask), and it’s something most of us struggle with. This is a great set of guidelines that includes advice for what to do if you don’t have much work experience.
Node.js version 14 available now
BIG release in the Node world. Lots of stuff to be excited about, but one that particularly catches my attention is the experimental release of a WASI (Web Assembly System Interface) implementation, letting you write packages for Node that compile to WebAssembly and access system resources like the filesystem. Very cool!