The latest articles on DEV Community by Andrew Firsov (@avfirsov). https://dev.to/avfirsov https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F490365%2Fcaa0e0f6-94a2-42b6-a057-85143ae4acfc.jpg https://dev.to/avfirsov en Andrew Firsov Fri, 17 Jan 2025 12:47:03 +0000 https://dev.to/avfirsov/-3doo https://dev.to/avfirsov/-3doo <div class="ltag__link"> <a href="/avfirsov" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F490365%2Fcaa0e0f6-94a2-42b6-a057-85143ae4acfc.jpg" alt="avfirsov"> </div> </a> <a href="https://dev.to/avfirsov/ive-built-an-open-source-interactive-game-for-learning-regular-expressions-ij0" class="ltag__link__link"> <div class="ltag__link__content"> <h2>I've created an open-source interactive game for learning regular expressions a fun way</h2> <h3>Andrew Firsov ・ Jan 17</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#regex</span> <span class="ltag__link__tag">#webdev</span> <span class="ltag__link__tag">#learning</span> <span class="ltag__link__tag">#opensource</span> </div> </div> </a> </div> regex opensource learning webdev Andrew Firsov Fri, 17 Jan 2025 09:55:17 +0000 https://dev.to/avfirsov/ive-built-an-open-source-interactive-game-for-learning-regular-expressions-ij0 https://dev.to/avfirsov/ive-built-an-open-source-interactive-game-for-learning-regular-expressions-ij0 <h2> The code and the game </h2> <ul> <li>👾 The game - <a href="https://regexp-garden.madewith.fun" rel="noopener noreferrer">RegexpGarden</a> </li> <li>🤖 <a href="https://github.com/avfirsov/regexp-garden" rel="noopener noreferrer">Repo</a> </li> </ul> <h2> Why regular expressions matter? </h2> <p>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.</p> <h2> Inspiration </h2> <p>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.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwmg5gonvwpfaroim1r8k.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwmg5gonvwpfaroim1r8k.png" alt="IRichard Feynman" width="800" height="450"></a></p> <p>Later, when I transitioned to web development, I stumbled upon the fascinating project <a href="https://flukeout.github.io/" rel="noopener noreferrer">CSS Diner</a> (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.</p> <h2> Technical details </h2> <p>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.</p> <p>I also discovered the <a href="https://npmjs.com/package/ts-pattern" rel="noopener noreferrer">ts-pattern</a> library, which proved incredibly useful for implementing the Strategy pattern in frontend applications — whether in Vue or React.</p> <h2> Final words </h2> <p>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.</p> regex webdev learning opensource