Published at
Updated at
Reading time
7min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Happy Monday, party people!

Should your JS projects always include a build step? Is the dotenv npm package now obsolete? And how could you create advanced transitions with the linear() easing function?

This week's Web Weekly includes all the answers and much more. Enjoy!

I had coffee with a friend the other day, and unfortunately, she's looking for a new job. She entered tech, joined a friendly team with wonderful colleagues, and then... her company went bust.

Now, she has a year of experience, and as it turns out, finding a junior web dev position is tough.

When I started, I was incredibly lucky. A friend introduced me to a CTO, I "randomly" got an internship, and just like that, I entered a team with the kindest people teaching me all the things I didn't learn in Uni. It was this team that prepared me for my career in tech. (🫢 4Waisenkinder 🫢)

But this was 12 years ago, and while chatting with my friend, I struggled to give actionable advice on landing her next junior position. I promised to ask my network, but what else could I tell her?

Where did you start? Did you send hundreds of applications until one worked out? Did you go to meetups and "networked" your a$$ off? 🫣

If you have tips or stories to share, reply, and I'll forward them to my friend.

A JS library without a build step

Htmx on GitHub β€” It's a 3701 lines long file.

More and more people are talking about htmx lately. I don't think it's more than an underdog for now, but it comes with some refreshing aspects.

Mainly, it's HTML-first. If your server endpoints can spit out HTML, you could load htmx via a good old script tag and forget about writing JS. Add event listeners, talk to APIs, swap out HTML content β€” it's all just an HTML attribute away.

Htmx markup example.

And it's funny because htmx is basically just a 3701 line long JS file. It gives me strong jQuery vibes. There's no TS, npm start script or any other jazz to run or build it. It's Vanilla JS. Not more and not less.

Alexander Petros explains all the benefits of this approach.

Simplify your stack

Add more cache!

Even so, if you consider yourself a performance scrutineer, it should bother you that you're leaving some speed on the table by sticking with these defaults. Your caching could be a little more aggressive, and in my opinion, it's a no-brainer for particular types of assets.

Alex MacArthur explains how Vercel's and Netlify's default caching headers can be improved for hashed assets. It's an easy but worthwhile fix for all your styles.19dls9a.css files!

Cache, cache, cache!

500+ CSS loaders

CSS Loaders β€” 500+ single element loaders

I've no words for Temani Afif's collection of single element loading spinners. Browse around! When I do, I can only scratch my head, wondering how to do this with a single element.

Find your next loading spinner

Design inspiration

Two website screenshots in a collection of design inspiration.

When looking for design inspiration, I usually browse Dribbble, but recently, I discovered "One Page Love". It's a wonderful resource to find fancy web design.

Get inspired

The wonderful weird web – Rocumentaries

Curated links to the very best documentaries

I'd love to watch less junk. Especially when binging Netflix, very few shows are very good.

And disclaimer: I haven't checked the quality of the documentaries linked here, but I love the idea of a single place with good things to watch.

Stop watching junk

What are your favorite internet corners? Send them my way, and I'll include them in Web Weekly!

Educational, Sensational, Inspirational, Foundational

Educational Sensational Inspirational Foundational

Zach Leatherman put together a collection of timeless web dev articles. It only includes a few of the latest but many of the greatest articles of all time.

Find timeless web articles

A "minor" Node release with a big impact

Example showing the --env-file flag for Node.js

The dotenv package is downloaded 30 million times per week, and may have become redundant. Node 20.6 now supports reading .env files with the --env-file flag!

The feature's still under active development, but hallelujah β€” I'll clean up some deps now!

Drop dotenv

Better design and accessibility

Different menu button designs including "hamburger", "oreos", "kebap" and more. The point is though that it's impossible to know what's behind these button icons.

Often, we're trying to build accessible things, but how often do we really check things with assistive technology? I should do it more often and also level up my skills in this area!

I admire Eric W. Bailey for taking screenreader lessons. And I admire him even more for writing down all his findings.

This post is a nice deep dive into hamburger icons, context and assistive tech. πŸ’―

Build good stuff

Random MDN – Labeled JS loops

Two nested JavaScript for loops.

From the unlimited MDN knowledge archive...

Did you know that you can label your JS loops? Now you do!

Label your loops

TIL recap – reduce's initial value is optional

A reduce loop that doesn't define an initial value

Here's a little fun fact about reduce. The second parameter, the initial value, is optional. 😲

Safe one reduce loop

Find more short web development learnings in my "Today I learned" section.

New to the platform

  • Object.groupBy() will ship with Chromium 117. Firefox Nightly and Safari Tech Preview include it, too. πŸŽ‰It's such a tiny thing, but oh boy, am I looking forward to stopping writing grouping logic!
  • The Chrome bug for the :user-invalid implementation was closed. Let's hope it'll hit stable soon because Chromium is the only engine missing this handy validation pseudo-class. (Chrome bug)
  • Firefox is catching up and looking into prototyping text-wrap: balance.
  • CSS Relative colors landed in Chrome Canary. (Chrome bug)

Three valuable projects to have a look at

  • flackr/scroll-timeline – A polyfill of ScrollTimeline and ViewTimeline.
  • oven-sh/bun – A JavaScript runtime, bundler, test runner, and package manager! And they just hit 1.0. πŸŽ‰
  • tauri-apps/tauri – Build desktop applications with a web frontend and Rust sprinkles.

A new Tiny Helper

The linear() generator showing an editors, curves and a CSS linear output.

Chromiums and Firefox support the relatively new CSS easing function linear(). But you probably don't want to write such easing by hand.πŸ‘‡

A complex CSS linear easing definition.

Jake Archibald thought the same and released a handy tool to create the most bouncy and complex transitions the web has ever seen!

Create some bouncy CSS transitions

Find more single-purpose online tools on tiny-helpers.dev.

Thought of the week

It feels sad, but Chelsea Troy is very right with the following take.

The internet is full of great things. Things that people put hours and hours into. And we can curse ads plastering the web as much as we want.

Unless we all start paying for what we read, watch and listen to, ads are the main driver for a free internet full of greatness.

Ads keep the internet free; without them, the internet is a luxury good.

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 4.1k emails. If you enjoy it, consider supporting me on Patreon. β™₯️

Or tell your friends about it:

If you're not a subscriber, change that! πŸ˜‰

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! πŸ‘‹

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 1 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.