DEV Community

Cover image for WordHoop: A Lightweight Word Game Built with SolidJS
arminbro
arminbro

Posted on

1

WordHoop: A Lightweight Word Game Built with SolidJS

As developers, we’re always looking for ways to optimize our code, reduce bloat, and deliver the best experience possible for users. That’s exactly what I set out to do when I created WordHoop, a daily word game packed with fun yet incredibly lightweight.

The Frontend Stack

  • SolidJS: A reactive framework offering fine-grained reactivity with a smaller bundle size than React, making it ideal for performance-focused web apps.
  • Solid Transition Group: To help apply animations when children elements enter or leave the DOM throughout the game.
  • Tailwind CSS: A utility-first CSS framework that allowed me to efficiently build a clean and responsive UI without adding unnecessary weight, keeping the styles both minimal and scalable.

Keeping it Small and Fast

One of the things I’m most proud of is that WordHoop is under 100KB on the initial page load! This helps achieve perfect 100% PageSpeed scores across the board.

PageSpeed Screenshot

Try it Out!

WordHoop is simple to play but offers a daily word unscrambling challenge that keeps players returning. It’s a great way to take a quick break while exercising your brain.

I’d love to hear your thoughts on the game or any tips you might have for further optimization. You can play it here: https://www.wordhoop.com.

Follow me:

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (1)

Collapse
 
arminbro profile image
arminbro

WordHoop #292
filter -> savor
Solved in 1 minute and 15 seconds with ♥♥ remaining!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more