DEV Community

Cover image for I've created an open-source interactive game for learning regular expressions a fun way
Andrew Firsov
Andrew Firsov

Posted on

I've created an open-source interactive game for learning regular expressions a fun way

The code and the game

Why regular expressions matter?

As a web developer, I frequently use regular expressions in my work for complex refactoring tasks, such as changing the props of a specific component across the entire codebase or replacing one component with another throughout a project. When I started learning DevOps, I discovered that regular expressions were even more valuable. I consider regular expressions an essential tool for every programmer.

Inspiration

I have a passion for teaching. During my time as a student and after university, I worked as a chemistry tutor. I've always been inspired by the moment when someone finally grasps a concept they once thought was impossible to understand—it’s like seeing a spark of enlightenment ignite in their mind. Richard Feynman’s teaching talent, particularly his ability to explain complex ideas in simple terms, has deeply influenced me.

IRichard Feynman

Later, when I transitioned to web development, I stumbled upon the fascinating project CSS Diner (if you haven’t seen it yet, be sure to check it out!🔥). My love for teaching and my appreciation of CSS Diner inspired me to create a similar project, but this time focused on learning regular expressions.

Technical details

I’ve always been a Vue developer at heart, but I was intrigued by the idea of learning React. For this project, I decided to build it using React and Next.js. As a Vue developer, I missed some of Vue's features in React, such as watch() and reactive(). To bridge the gap, I implemented a custom watch function as a React hook. Additionally, I used MobX to create reactive objects with methods, which felt natural to me coming from a Vue background.

I also discovered the ts-pattern library, which proved incredibly useful for implementing the Strategy pattern in frontend applications — whether in Vue or React.

Final words

I hope this project will be valuable to anyone interested in learning regular expressions. It’s open-source, so contributions from the community are more than welcome! Any feedback is welcome.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay