DEV Community: Sergey Panarin

Building a Chip-8 Emulator in JavaScript – A Beginner-Friendly Tutorial Series

Sergey Panarin — Sat, 15 Feb 2025 19:16:52 +0000

Hey everyone!

I’ve started a new tutorial series on building a Chip-8 emulator in JavaScript—perfect for those who want to explore emulation, low-level computing, and system design without diving too deep into complex architectures.

In Part 1, I introduce what Chip-8 is, how it works, and why it’s a great learning tool for understanding CPU instructions, memory, and basic graphics rendering. Future episodes will cover writing the emulator step by step.

If you’re interested in JavaScript, emulation, or just curious about how computers work at a fundamental level, check it out!

🔗 Watch Part 1 here: https://www.youtube.com/playlist?list=PL--xKBEKHeJSo3sP80J_TJtmQ2T_AJRbl

Would love to hear your thoughts or experiences with Chip-8! 🚀

How I solved 100 problems on LeetCode and what I was doing wrong? 👨🏼‍💻

Sergey Panarin — Wed, 29 Nov 2023 16:27:29 +0000

LeetCode is a website with algorithmic problems similar to those in FAANG interviews and other IT companies. After solving over 100 problems in six months and discussing with others, I realized what I did wrong and right. Here's my experience to help you prepare more efficiently and quickly.

Systematic Approach ✅
Instead of randomly tackling problems, I purchased a preparation course and focused on solving problems by topic. I studied theory, reviewed solutions, and then attempted the problems. Investing $100 in the course was one of my best decisions.

Avoiding Miracle Hopes ❌
Realizing that prolonged contemplation didn't lead to solutions, I shifted to studying problem solutions first. Understanding algorithms and techniques from these solutions made it easier to solve similar problems in 5-20 minutes.

Setting Clear Goals and Tracking Progress ❌
Initially, I lacked a sense of progress. Keeping a journal with problem analyses, noting challenges, and maintaining statistics on tasks solved and course progress helped track growth and maintain motivation.

Choosing the Wrong Programming Language ❌
Using JavaScript/TypeScript, I faced challenges in writing solutions. I'm transitioning to Python, which simplifies problem-solving. Even my friend at Google in Germany recommended Python for its simplicity and built-in data structures.

Python vs. JavaScript – and Python wins! 💪

Share your LeetCode experience, mistakes, and successes in the comments! 👋

JavaScript comparison that never lies

Sergey Panarin — Sat, 30 Sep 2023 17:18:18 +0000

Is there something not equal to itself?

One of the popular JavaScript questions among the interviewers:

Could x !== x?

It refers to one of the most unknown parts of JavaScript – types, coercion, and its corner cases.

In the example above for NaN even triple equal comparison lies. And is there some way to be sure what's inside the variable?

Function that never lies

Yes, there is – it's Object.is(x, y).

It tells the truth in all the cases, even for -0 or NaN.

// Object.is(x, y) never lies

console.log(Object.is(true,true) === true);
console.log(Object.is(false,false) === true);
console.log(Object.is(null,null) === true);
console.log(Object.is(undefined,undefined) === true);
console.log(Object.is(NaN,NaN) === true);
console.log(Object.is(-0,-0) === true);
console.log(Object.is(0,0) === true);

Use it in your interview answers and in your code – Object.is never lies!

5 fundamental books every engineer must read

Sergey Panarin — Fri, 26 May 2023 12:43:41 +0000

Whether you just start your journey as a software engineer or already have practical experience those books will help you to deepen your knowledge and understanding of software development and shine at the job interviews.
_

I've read those books many years ago but they are very relevant in today's world.

Refactoring: Improving the Design of Existing Code (2nd Edition) by Martin Fowler

This book gives you an idea that all the code you write may have been rewritten some day by you or by someone else. And this really happens all the time in real life.

The book guides you on how to 'polish' code in an organized manner – a very useful skill for a good engineer.

Book on Amazon

The Pragmatic Programmer: Your Journey To Mastery by Dave Thomas and Andy Hunt

This book is much more about philosophy than some code snippets or hints. And this makes this book a real gem – get practical experience in managing requirements, maintaining codebase, and approaching security.

Book on Amazon

Getting Real: The Smarter, Faster, Easier Way to Build a Successful Web Application by Jason Fried, David Heinemeier Hansson, Matthew Linderman

This book co-authored by David Heinemeier Hansson, aka @dhh has created web framework Ruby on Rails, which is a great view of software development not just from an engineering perspective but from the end user's point of view. And from this point of view, things like an 'empty state' (when there is no data, e.g. no articles in the blog yet) evolve from the least priority of the engineer to one of the most crucial ones – as almost all the applications start with no user data inside.

Things like this give you a much more solid understanding of how your code is used in real-life and what should be prioritized.

Book on Amazon

Design Patterns: Elements of Reusable Object-Oriented Software by Erich Gamma, Richard Helm, Ralph Johnson, John Vlissides (Gang of Four)

This book focuses on an object-oriented approach but even for functional programmers it will be very valuable as in the end all the software models some real-world objects (e.g. apps manage orders, products, etc.)

Inside the book, you'll find 23 patterns for organizing your code's architecture. And I'd say more – it helps you to interpret code specifications that you have and make your design more structured, which helps you not only in C++ but also in React or React Native with their components.

Book on Amazon

Pirates of Silicon Valley. A movie

Wow, it's not a book, right? Yes – after reading all these books, you need to chill a bit 🍿. And this movie will help you to feel the spirit of the early days of computing – through the story of the rivalry between Bill Gates of Microsoft and Steve Jobs of Apple.

Movie on IMDB

I'd love to hear from you 👋 What books influenced your career as an engineer?

Dates validation with Formik and Yup in React & React Native

Sergey Panarin — Wed, 17 May 2023 19:58:10 +0000

Hi there!
Sometimes you need to validate dates in your React&React Native forms created with Formik and Yup. Classic example will be some start date and end date, where the simple rule will be to check that the latter goes after the former.

It was quite hard to find something that worked well, basically because standard JavaScript Date() object cannot parse all the string formats quite well.

So here is the solution that validates:

date format MM/DD/YYY with regular expression
that end date goes after the start date using moment and yup test function

Validation demo

Validation schema code

Here is Yup validation schema that you can use in your projects:

// form validation
import { Formik, Field } from "formik";
import * as yup from "yup";
import moment from "moment";

const datesValidationSchema = yup.object().shape({
  dateStart: yup
    .string()
    .required("Start date is required")
    .matches(
      /^((0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01])[- /.](19|20)?[0-9]{2})*$/,
      "Date must be in MM/DD/YYYY format"
    ),
  dateEnd: yup
    .string()
    .matches(
      /^((0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01])[- /.](19|20)?[0-9]{2})*$/,
      "Date must be in MM/DD/YYYY format"
    )
    .test(
      "dates-test",
      "End date should be after start date",
      (value, context) => {
        let startDate = moment(context.parent.dateStart, "MM/DD/YYYY").toDate();
        let endDate = moment(value, "MM/DD/YYYY").toDate();
        return endDate > startDate;
      }
    )
    .required("End date is required"),
});

React components SaaS startup landing with RedwoodJS and Tailwind CSS in 10 minutes

Sergey Panarin — Fri, 24 Feb 2023 11:44:08 +0000

Hi there! Working in tech for 10+ years I always look for efficient solutions. Here I share with you a recipe to build React components landing page in 10 minutes using RedwoodJS framework and Tailwind CSS as UI. This is the first major step for a beautiful and easy-to-grow Jamstack web app.

Initial setup

We have the following:

RedwoodJS to manage creation and development of the app
Tailwind CSS as UI
Basic SaaS Landing template https://tailwindtemplates.co/templates/basic
Vercel for deployment
GitHub

Steps to follow

Template – divide Landing page into React components
Web app generation with RedwoodJS – generate web app with Home page and components with Tailwind CSS UI support
Components design – use template code to customize design of components
Deployment to Vercel – deploying our web app to Vercel using GitHub

1. Template components

First of all we present our Landing page template as sequence of components and their React names:

Header – Header
Hero – Hero
Logos – Logos
Selling Points – SellingPoints
Product Features – ProductFeatures
Team – Team
Testimonials – Testimonials
Blog Posts – BlogPosts
Newsletter Form – NewsletterForm
Footer – Footer

2. Web app generation with RedwoodJS

Now we need:

generate an app
create Home page
generate all 10 components
include all 10 components to the Home page

yarn create redwood-app redwood-tailwind-saas-landing

I use JavaScript version and init Git repo (you can use TypeScript version if needed). It took me 136.61s (~ 2 mins):

cd redwood-tailwind-saas-landing
yarn redwood dev

You'll see the splash screen of RedwoodJS on a local dev server (http://localhost:8910):

Then we will generate our Home page:

yarn redwood generate page home /

Then we need to generate all 10 components (rw is a shortcut for redwood):

yarn rw g component Header
yarn rw g component Hero
yarn rw g component Logos
yarn rw g component SellingPoints
yarn rw g component ProductFeatures
yarn rw g component Team
yarn rw g component Testimonials
yarn rw g component BlogPosts
yarn rw g component NewsletterForm
yarn rw g component Footer

We have all components generated – now it's time to open project folder in VS Code and import and add components to the Home page.

Importing components:

Adding components to the Home page:

Starting again local development server to see the results:

yarn rw dev

And we see our React components structure on the Home page 🥳

Next step is to set up Tailwind CSS UI and use design template for our React components.

3. Components design with Tailwind CSS

On this step we need to:

set up Tailwind CSS
add components HTML code from the template

Setting up Tailwind CSS UI:

yarn rw setup ui tailwindcss

We open every component's code and add HTML code converted to JSX using some tool like Transform Tools: HTML to JSX:

Then we add JSX code to component's code (web/src/components/Hero/Hero.js):

Here is what we see with Head and Hero components added (we will global styled at the end):

Then we continue with the other components and do some clean up – update pictures to hi-res ones from Unsplash and remove jQuery and it's plugins/libs:

jQuery is not right option to do animations & elements like Sliders in React apps and must be removed. Now animations are done using React components & CSS

And here we are – we have React components-based template now:

The next step is to deploy this app to Vercel via GitHub.

4. Deployment to Vercel

The steps are quite straightforward:

commit all changes to GitHub repo
deploy on Vercel selecting this repo

Selecting our repo:

Starting Deploy:

And here we are: the project is online at https://redwood-tailwind-saas-landing.vercel.app 🥳

GitHub source

smartykit / redwood-tailwind-saas-landing

README

Welcome to RedwoodJS!

Prerequisites

Redwood requires Node.js (>=14.19.x <=16.x) and Yarn (>=1.15)

Are you on Windows? For best results, follow our Windows development setup guide

Start by installing dependencies:

yarn install

Then change into that directory and start the development server:

cd my-redwood-project
yarn redwood dev

Your browser should automatically open to http://localhost:8910 where you'll see the Welcome Page, which links out to a ton of great resources.

The Redwood CLI

Congratulations on running your first Redwood CLI command From dev to deploy, the CLI is with you the whole way And there's quite a few commands at your disposal:
yarn redwood --help
For all the details, see the CLI reference.

Prisma and the database

Redwood wouldn't be a full-stack framework without a database. It all starts with the schema. Open the schema.prisma file in api/db and replace the UserExample model with the following Post model:

model

…

View on GitHub