Skip Navigation
2 Aug 2023 • 8 min read

Development - NoJS: Stop Using JavaScript When You Don't Need To

Ah, JavaScript! It’s the dazzling star of the web development world, capable of transforming static pages into interactive wonders. But have you ever found yourself tangled in lines of JavaScript code, only to realize that you might be overcomplicating things? You’re not alone. In our pursuit of dynamic and engaging websites, we often reach for JavaScript—even when we don’t need to. In this article, we’ll explore the art of minimalism in web development, emphasizing the power of HTML and CSS, and learning when to say “No” to JavaScript.

A Hammer Looking for a Nail

Ever heard the saying, “When all you have is a hammer, everything looks like a nail?” Well, sometimes, in the world of web development, JavaScript is that hammer, and every website is a nail begging to be over-engineered. Don’t get me wrong; I’m not saying you shouldn’t use it at all. I love JavaScript as much as the next nerd. Heck, I even write my shopping lists in it! (Not recommended, by the way.)

But, like a well-seasoned cook knows when to sprinkle just the right amount of salt, we must learn when to dash that sprinkle of JavaScript.

Hammer Looking For A Nail

Pure CSS: The Unsung Hero

Let’s take a moment to appreciate the unsung heroes of web development: HTML and CSS. Often overshadowed by the flashier JavaScript, these two foundational languages quietly power the web, providing structure and style. While some may argue that JavaScript is essential for all interactions and effects, I’m here to show you that HTML and CSS can accomplish more than you might think. They’re not just the supporting act; they’re the stars of the show in their own right!

Smooth Scroll

Believed that JavaScript and jQuery were essential for this task? You might want to reconsider (provided your browser supports it, of course). The CSS scroll-behavior property, though not new, offers a simple yet effective solution. It comes with two options: auto for immediate scrolling, and smooth for a gradual, fluid scroll. If you’re looking to avoid abrupt and jarring scrolling effects, this property could be just what you need.
html {
    scroll-behavior: smooth;
}

Scroll Snap

Scroll snap might be new to you, but it’s a refined effect that enhances scrolling. Whether you’re moving vertically or horizontally, scroll snap smoothly guides you to the next section as soon as you begin scrolling in that direction. Unlike the default scroll behavior, where you control the movement entirely, scroll snap adds a touch of elegance. It’s a subtle feature, but it can elevate the overall experience of a webpage.

.parent-div {
    scroll-snap-type: x mandatory;
}
.child-div {
    scroll-snap-align: center;
}

I once believed that this effect needed JS or jQuery, but I discovered that the CSS property accomplishes it with elegant simplicity. With proper browser support, it’s unquestionably the preferred method.

You might wonder why not simply use position: fixed? The beauty of this approach is that the original position of the element doesn’t have to be at the top. It can start anywhere on the page, and then, as you scroll to the specified position, it stays fixed in place.

.top-bar {
    position: sticky;
    top: 0;
}

Accordians

While this technique leans more towards HTML than CSS, it’s the combination of the two that brings it to life, so it’s worth mentioning here. Instead of investing time in managing states in React for a basic open and close accordion, why not take advantage of the simplicity of the details and summary elements?

<details>
  <summary>
    FAQ Question Title Here
  </summary>
   Some very long-winded answer here
</details>

Incrementing Numbers

Let’s say you’re generating a timeline and you want to add incremental numbers inside your timeline circle. You would add the counter-increment property to your repeating circle element.

Then, if you’re using a ::before pseudo element, you can add counter(line-number) as its content.

li {
    counter-increment: line-number;
}

li::before {
    content: counter(line-number);
}

Toggling Elements: Radio Inputs, The Secret Handshake

Ever needed a toggle selection? Forget JavaScript; you can use a hidden radio input with styled labels and using :checked to toggle changes. It’s like the secret handshake of web development.

With HTML and CSS, the possibilities are (almost) endless. So why are we often reaching for the JS toolbox, even when we don’t need to?

input[type="radio"] {
  display: none;
}

[value="option1"]:checked~.posts .post:not([data-category~="option1"]) {display: none;}
[value="option1"]:checked~.filters [for="option1"] {border: 1px solid;}

Coming Soon: Scroll Timeline Animations

Coming to Chrome is a new set of APIs and concepts that work in conjunction with the existing Web Animations API (WAAPI) and CSS Animations API to enable declarative scroll-driven animations.

A Scroll Progress Timeline is an animation timeline that is linked to progress in the scroll position of a scroll container–also called scrollport or scroller–along a particular axis. It converts a position in a scroll range into a percentage of progress.

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

The Efficiency and Balance of CSS

CSS often shines in its efficiency, as it tends to be hardware-optimized, especially when it comes to transitions. This optimization leads to smoother animations and less strain on the device, providing a more seamless user experience. Moreover, relying on CSS instead of JavaScript means less blocking on the page, resulting in faster load times and more responsive interactions.

However, it’s worth noting that this doesn’t give a free pass to go wild with CSS. Just as it’s possible to create a JavaScript-heavy page that slows down performance, it’s equally possible to craft a CSS monstrosity that hampers the user experience. As with all tools in web development, balance and thoughtful application are key.

The Alluring Call of Frameworks

React, Vue, Angular. These aren’t just hipster coffee brands; they’re giant JavaScript frameworks that sometimes lumber into projects like overexcited puppies knocking over everything in their path.

“But they make things so much easier!” you say, tears in your eyes as you clutch your favorite React hoodie. And you’re not wrong. These frameworks promise to simplify complex tasks, streamline development, and offer a plethora of ready-to-use components. They’ve become the go-to tools for many developers, and for good reasons.

JavaScript Frameworks: 2008 vs 2021

The Pitfalls of Over-Engineering

Yes, these frameworks have their place, but have you ever tried to swat a fly with a sledgehammer? It’s messy. The very tools that promise to simplify our lives can lead to over-engineering, especially when used inappropriately.

Using a heavy framework for a simple static site can lead to unnecessary bloat and performance issues. It’s like driving a tank to go grocery shopping; sure, it’s powerful, but is it practical?

Over-Engineering

Finding the Right Tool for the Job

Frameworks are powerful tools, but they’re not always the right choice for every project. It’s essential to evaluate the project’s needs and choose the tools that align with those requirements. Just as you wouldn’t use a sledgehammer to swat a fly, you shouldn’t reach for a heavy framework when a lighter solution will suffice.

Javascript Everywhere

JavaScript: The Spice, Not the Main Course

JavaScript is a versatile and powerful language, capable of adding dynamic interactivity to websites. But it’s essential to recognize its role as a seasoning, a spice, a magical dash of flavor—not the main course. With 17 years of coding experience, I’ve learned that simplicity is a virtue. Before adding that flashy library or React component, ask yourself: Is it necessary? Is it adding value, or is it just unnecessary complexity? Sometimes, less is more.

The Virtue of Vanilla

Vanilla JavaScript is pure, unadorned code. It’s like the classic flavor of ice cream—simple and satisfying. When you need JavaScript, consider reaching for this straightforward version. Your website (and your future self) will thank you.

Embrace the Power of “NoJS”

In an era of digital communication, there’s still beauty in simplicity. Just as handwritten letters have their charm, so does a website that doesn’t rely on unnecessary JavaScript. Before adding it to your project, pause and consider if you really need it.

For the Love of Pure CSS

CSS is the reliable friend of web development. It’s elegant, adaptable, and doesn’t demand the spotlight. But when used creatively, it can dazzle you with its capabilities. It’s a reminder that you don’t always need JavaScript to create stunning visual effects.

Finding the Balance

So, dear reader, next time you find yourself reaching for the glitzy glamour of JavaScript, take a moment to reflect. Is it necessary, or are you simply succumbing to the allure of the shiny new toy?

JavaScript is indeed a beautifully clunky yet elegant language, and it has its rightful place in our development toolbox. But remember, just because you can, doesn’t mean you should.

As we part ways, let me leave you with this thought: In the grand symphony of web development, every instrument has its role to play. Let’s not allow the JavaScript trumpet to drown out the melodious chords of HTML and CSS. They too deserve their moment in the sun.

And if all else fails, just remember: Keep it simple, keep it elegant, and for the love of code, don’t use a sledgehammer to swat a fly.

Happy coding! 🎵


This article is powered by the “NoJS” initiative – proudly serving web development with fewer bytes and more wisdom.

Latest Blog Posts

Hi, my name is Dillon Baird, and I’m a progress bar-aholic. There, I said it. It feels good to get that off my chest. It’s a problem, I know. But like any true addiction, I can’t help myself. Those little bars, those tiny digital beacons of hope, they’re my kryptonite. “I’m a progress bar enthusiast, a connoisseur of digital waiting.” - Dillon

June 15, 2024 • 5 min read

Ever had one of those days where nothing seems to go right? You’re trying to make your website perfect, but instead, it’s like the universe is playing a cruel joke on you. That was me recently, tangled in a web (pun intended) of frustrations while trying to set up a custom 404 error page for my website. Hosted with Docker and NGINX, my site stubbornly displayed the default NGINX ‘Page Not Found’ message instead of my sleek, custom 404 page. After countless failed attempts to fix it, I decided to call in reinforcements—Cloudflare Workers. If you’re nodding your head in sympathy, keep reading. This post is for you.

June 2, 2024 • 6 min read

Large language models (LLMs) are powerful tools, but running them on your own can be a challenge. Ollama simplifies this process, allowing you to run these advanced models directly on your local machine, without the need for expensive cloud services or specialized hardware. With Ollama, you gain complete control over your AI tools. Customize them to your specific needs and experiment freely without worrying about high costs. Plus, you can break free from reliance on cloud providers.

May 11, 2024 • 16 min read

Join My Newsletter
Stay in the loop with all of my latest content.
Subscribe to Feed
Still using an old-school RSS reader like me?
No comments yet!

GitHub-flavored Markdown & a sane subset of HTML is supported.