DEV Community: Pavel Keyzik

Hello, developers! 👋

Pavel Keyzik — Wed, 27 Nov 2024 21:09:57 +0000

I want to create content that helps you the most. What’s a front-end challenge you’d love insights on?

What Was The First Thing You Learned that Got You Excited About Development?

Pavel Keyzik — Thu, 14 Nov 2024 17:05:46 +0000

For me, it was learning how to create text in HTML and opening this page in a browser. At this point, I was super excited to see that in the browser, and I thought I had built a website that anyone could see 😂 I felt like a magician back then. Now it's not that exciting anymore 😄

Does anyone have some story to share? I really want to find out what other people were excited about when they started coding.

Where do you learn JavaScript?

Pavel Keyzik — Tue, 13 Aug 2024 20:13:30 +0000

Hey developers!

What are your favorite resources to learn JavaScript? I remember learning it here (https://javascript.info) but I wanted to know if there's a better resource or at least I want to see some alternative ways of learning it. I do have experience in JavaScript, so I'm looking for something more than just basics but feel free to share anything.

P.S. You could recommend YouTube channels as well.

How to implement Theme Switcher in JavaScript

Pavel Keyzik — Sat, 27 Jan 2024 19:42:50 +0000

In this article, you'll learn how to build a theme switcher in JavaScript. It should be a pretty easy thing to do, but you might learn something from my code as well. Let's have fun.

What cases do we need to cover?

One of the most basic scenarios we should address is changing the theme from light to dark and vice versa. The second thing we need to remember is that some people prefer to use the same settings as in the system. It's useful for those who switch between dark and light themes throughout the day. The third thing is saving user preferences; otherwise, if you refresh the page, all the settings will be set to default again.

Create a theme store

Our initial function will be createThemeStore(), which will contain nearly everything. I want to mention that this may not be the optimal approach, but hey, we're coding for fun here.

function createThemeStore(options) {
  // Initial mode
  const initialMode = options.defaultMode || 'system'

  // Initial state
  const state = {
    mode: initialMode,
    systemTheme: getSystemTheme(),
    theme: getThemeByMode(initialMode),
  }
}

Here we create a state with only 3 variables:

mode: This represents the selected mode of the theme, with possible values of dark, light, or system. It allows us to determine whether to use the system's theme or not.
systemTheme: This holds the current value of the theme in your OS. Even if we choose a specific theme (dark or light), we still update this variable when the OS theme changes to ensure we can adjust the theme correctly when the user switches to system mode.
theme: This is the actual theme that the user sees, with possible values of dark or light.
options.defaultMode: This is used to restore correct theme preferences. For instance, you could save theme changes in localStorage and then use it as the default, ensuring that the user's preferences are retained.

Add subscriptions

When the user changes the theme or the OS theme is updated, we need a way to notify our code. This is where subscriptions come in. We need to allow subscriptions to changes in our state object. Here's the code that will help us with it. Remember, for now, we do everything inside createThemeStore().

function createThemeStore(options) {
  // ...

  // Create subscriptions object to be able notify subscribers
  const subscriptions = new Map()
  let subscriptionId = 0 // Just a unique id for every subscriber

  // A place where we send notification to all of our subscribers
  function notifyAboutThemeChange(theme) {
    subscriptions.forEach((notify) => {
      const notificationData = {
        mode: state.mode,
        theme,
      }

      notify(notificationData) // Calls subscribed function (The example how we use it will be later)
    })
  }

  // A function that allows to subscribe to state changes
  function subscribe(callback) {
    subscriptionId++
    subscriptions.set(subscriptionId, callback)

    state.systemTheme = getSystemTheme() // We'll define it later

    if (state.mode === 'system') {
      notifyAboutThemeChange(state.systemTheme)
    } else {
      notifyAboutThemeChange(state.theme)
    }

    return subscriptionId
  }

  // A function that allows to unsubscribe from changes
  function usubscribe(subscriptionId) {
    subscriptions.delete(subscriptionId)
  }

  return {
    subscribe,
    usubscribe,
  }
}

Here's how it works from the consumer side.

// Create a theme store
const store = createThemeStore()

// Suscribe to changes
const subscriptionId = store.subscribe((newTheme) => {
  // Here you'll be seeing theme changes
  console.log(newTheme)
})

// When you need to unsubscribe from theme change, you just call
store.usubscribe(subscriptionId)

Detect a system theme preferences

Now that we have our base code structure, let's add something useful. We need to define two helper functions:

getSystemTheme(): This should return the current OS theme dark or light
getThemeByMode(): This should return either dark or light based on our theme mode. For example, if the mode is set to dark, we return dark. However, when the mode is set to system, we check the system theme and respond with either dark or light, depending on the OS preferences.

It's important to note that this code won't be inside our createThemeStore() function. We're using window.matchMedia with a prefers-color-scheme media query, allowing us to determine if the OS system is set to dark or not.

const mediaQuery = '(prefers-color-scheme: dark)'

// Get's current OS system
function getSystemTheme() {
  if (window.matchMedia(mediaQuery).matches) {
    return 'dark'
  }

  return 'light'
}

// Based on user's preferences we return correct theme
function getThemeByMode(mode) {
  if (mode === 'system') {
    return getSystemTheme()
  }

  return mode
}

function createThemeStore(options) {
  // ...
}

Now, the only thing we need to do to detect our OS theme changes is to add event listener.

function createThemeStore(options) {
  // ...

  // When the OS preference has changed
  window.matchMedia(mediaQuery).addEventListener('change', (event) => {
    const prefersDarkMode = event.matches

    // We change system theme
    state.systemTheme = prefersDarkMode ? 'dark' : 'light'

    // And if user chose `system` mode we notify about the change
    // in order to be able switch theme when OS settings has changed
    if (state.mode === 'system') {
      notifyAboutThemeChange(state.systemTheme)
    }
  })
}

Add an ability to manually change the theme mode

We've implemented automatic theme updates whenever our OS preferences change. The only part we haven't discussed yet is manual updates of the theme mode. You'll be using this function on your dark, light, and system theme buttons.

function createThemeStore(options) {
  // ...

  function changeThemeMode(mode) {
    const newTheme = getThemeByMode(mode)

    state.mode = mode
    state.theme = newTheme

    if (state.mode === 'system') {
      // If the mode is system, send user a system theme
      notifyAboutThemeChange(state.systemTheme)
    } else {
      // Otherwise use the one that we've selected
      notifyAboutThemeChange(state.theme)
    }
  }

  return {
    subscribe,
    usubscribe,
    changeThemeMode,
  }
}

Usage example

Our code is pure JavaScript, and you can use it anywhere. I'll demonstrate an example in React, but feel free to try it in any framework or library you enjoy.

// Create a theme store from saved theme mode
// or use `system` if user hasn't changed preferences
const store = createThemeStore({
  defaultMode: localStorage.getItem("theme") || "system",
});

function MyComponent() {
  // Initial active theme is `null` here, but you could use the actual value
  const [activeTheme, setActiveTheme] = useState(null)

  useEffect(() => {
    // Subscribe to our store changes
    const subscriptionId = store.subscribe((notification) => {
      // Update theme
      setActiveTheme(notification.theme)

      // Save selected theme mode to localStorage
      localStorage.setItem('theme', notification.mode)
    })

    return () => {
      store.usubscribe(subscriptionId)
    }
  }, [])

  return (
    <>
      <p>
        Active theme: <b>{activeTheme}</b>
      </p>
      <p>Change theme to:</p>
      <button onClick={() => store.changeThemeMode("dark")}>Dark</button>
      <button onClick={() => store.changeThemeMode("light")}>Light</button>
      <button onClick={() => store.changeThemeMode("system")}>System</button>
    <>
  )
}

Thank you!

I appreciate that you joined me on this journey, and if you were able to make it work, I'm proud of you! If something doesn't work for you or if you want to find the entire code, you can locate it here.

How to Improve Development Experience of your React Project

Pavel Keyzik — Sun, 21 Jan 2024 14:36:14 +0000

In this article, I'm going to show you how to set up a few small but yet useful tools that can speed up your workflow. The reason why we need them is to have a consistent codebase across the entire team. This makes it much easier to read code or commits from your colleagues. You won't need to spend much time formatting your code because it will be done automatically.

Forget about long discussions on whether to use a semicolon at the end of the line or not, or what the right commit message format is. Configure it once, and focus on the business logic instead.

Set up Prettier

Let's start with an easy one. Prettier helps you automatically format your code to make its style more readable. Here's an example of how the code looks before and after running Prettier.

First, create a .prettierrc file. It should contain a list of options to describe how to format our code. For example, singleQuote indicates whether we should use single quotes or not. You can find the full list of options here.

{
  "singleQuote": false,
  "endOfLine": "lf",
  "tabWidth": 2,
  "trailingComma": "all"
}

The next thing you need to do is tell your IDE to run Prettier automatically every time you save the file (or whenever it works best for you). You can find information specific to your IDE here.

Set up ESLint

The next tool is ESLint. This tool helps you find issues in your code and highlights errors. You'll find many plugins for ESLint that can help you configure it the way you want, or you can even use shared configs.

In the previous article, we set up the React project with vite. By default, it comes with ESLint configuration. Check out the "Getting Started with ESLint" page for information on how to install the basic configuration of ESLint. In this article, we'll just add a small plugin that I find quite useful.

The plugin is eslint-plugin-simple-import-sort. As you might guess from the name, it helps us to sort and group our imports (it works for exports as well). If you're like me, and you enjoy grouping similar things together, you'll love it because you won't need to do this manually anymore.

Let's install our dependency:

npm install eslint-plugin-simple-import-sort --save-dev

Now, all you need to do is add this plugin to your ESLint config and instruct ESLint to highlight errors when there are sorting issues:

{
  plugins: [
    // ...
    'simple-import-sort'
  ],
  rules: {
    // ...
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error"
  }
}

Here's the example of how the code would look like before and after running this plugin:

Set up Stylelint

Stylelint is similar to ESLint, but its focus is on styling rather than JavaScript. It helps you find errors in style files, such as old syntax or empty classes. We will also incorporate stylelint-config-clean-order to sort your style rules and group them consistently across the entire codebase.

Now, let's begin by installing the dependencies we need.

npm install stylelint stylelint-config-standard stylelint-config-clean-order --save-dev

Now create a file .stylelintrc.json and add our plugin to:

{
  "extends": ["stylelint-config-standard", "stylelint-config-clean-order"]
}

Update your package.json file with the new lint:style script. We're going to use it a bit later when we're going to set up lint job before all our commits.

{
  "scripts": {
    "lint:style": "stylelint \"**/*.css\""
  }
}

The last thing we need to do is install an extension for your IDE that will catch Stylelint errors. Check your Editor integrations. For example, if you're using VSCode, you can install vscode-stylelint.

Set up Husky

Now, let's talk about Husky. It's a wonderful tool that enables you to run scripts on any Git hooks. We'll add a pre-commit hook to run ESLint and Stylelint checks before committing. This ensures that we don't commit code with errors.

The setup is super easy—just run:

npx husky-init && npm install

It'll generate .husky folder where you could find pre-commit file. You'll need to change default npm test with any scripts you want. In our case it'll be:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint
npm run lint:style

Now, every time you commit, the lint and lint:style scripts will run automatically. If either of them throws an error, you won't be able to commit until you fix the issues.

One small improvement we can make here is to run these checks only for the files you're committing.

Set up lint-staged

The lint-staged is a utility that will help us to run lint on, staged files. Staged filed are those that you're going to add to commit.

First, install lint-staged dependency.

npm install lint-staged --save-dev

Next, create a .lintstagedrc file that will contain a list of file patterns and scripts that need to be run. Note that we also add the --fix prefix here. This will automatically fix all errors, but if there's something that can't be fixed as easily as formattings, it will throw an error, preventing you from committing.

{
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix --no-ignore --report-unused-disable-directives --max-warnings=0"
  ],
  "*.css": ["stylelint --fix --max-warnings=0"]
}

Now we need to update our .husky/pre-commit file and instead of running two scripts, we'll run just one:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

And here's what you'll see if something goes wrong:

Set up Commitlint

We've covered everything about writing well-formatted and structured code without worrying too much about it anymore. The only part we haven't explored yet is linting commit messages. Commitlint will help us here. It allows you to configure any rules you want for the commit message, but we're going to use the Conventional Commits specification, one of the most popular conventions you'll find.

Let's start from installing dependencies we'll need:

npm install @commitlint/{cli,config-conventional} --save-dev

Create a new file commitlint.config.js at the root of your project with this content:

export default {
  extends: ['@commitlint/config-conventional'],
}

And final step, will be creating a commit-msg hook that will run commitlint when you're trying to add new commit.

npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

Now, if you're going to try to commit something like git commit -m "Some commit Message" it'll throw an error. You should use git commit -m "feat: some commit message" instead. Read more about the conventional commits here.

The result of commitlint run will explain what's wrong and even provide a link to docs:

Thank you!

If you've been with me from the beginning, reading and configuring everything, I want to express my gratitude. I hope this serves as a great example of how companies configure their codebases to achieve consistency and better code quality. Moreover, it significantly speeds up your workflow since you no longer need to worry about sorting or formatting.

P.S. If you have a cool setup in your project, please share it. While I've covered more basic aspects than specific project details, it would be wonderful to hear about different tooling from others, contributing to the knowledge of readers or enhancing my own skills.

How to Set Up Your First React Project

Pavel Keyzik — Sun, 14 Jan 2024 11:16:29 +0000

Where to start?

There are too many ways to create the React application, we have a bunch of tools and frameworks that allow us easily set up our app. In this tutorial, I am going to use Vite as it's the easiest way to set up basic React application that will work on the client side.

Another popular choice is Next.js framework that's built on top of React and adds a lot of useful things you might want to have in the future, but if you are starting to learn React, you might not need them until you understand how React works and what problems you could solve by using Next.js

Before you can create an application with Vite, you need to install Node.js this thing is must in modern web development. Just go to the Node.js website and download latest version. To make everything installed correctly, run this command in terminal:

node --version

# You should see some version, for example v21.5.0

Another thing you’ll need is code editor. I personally use VSCode, it’s free, open source and probably one of the most popular choice for web development.

Create the Base Application

Now, let’s open the terminal and go to any folder where you’d like to store your React project and run the command below.

In the code below, I use the template react-ts; this tells Vite to create a React application with TypeScript. If you don’t want using TypeScript, you could replace react-ts with react.

Checkout Vite docs for all available templates

npm create vite@latest my-app-name -- --template react-ts

This will create a folder structure and generates all files we need. Now, let’s open the folder, install all dependencies, and finally run our project:

cd my-app-name
npm install
npm run dev

You should now see in terminal a URL to the application. By default, it’s http://localhost:5173/, so let’s open it in browser and I hope you see same page as me.

Now you should be able to open src/App.tsx or (src/App.jsx if you decided not to use TypeScript) and you could see change the HTML-like code, save file and it’ll automatically rebuild this code and you’ll see updates in browser. Have fun here ☺️

What's next?

Now you can go to Quick Start – React and learn more about the React itself. I don’t have any plans to teach React, because React docs are perfect to learn about React. See you in the next article where I’m going to add more configuration to make my development experience a bit better 😄

I want to get feedback about my application. Where could I do that?

Pavel Keyzik — Tue, 14 Nov 2023 22:23:00 +0000

Hi! I'm Pavel and I'm building an application where you could track expenses, subscriptions, and set limits by categories. I also have analytics, like (days to salary, money left for each category) and monthly reports as well (with the information by each category expenses). The app is still in development and I'd be interested in sharing a link in the nearest feature, where people could join and play with it. Does anyone know a good place to do this? Maybe there are some websites for that are specific on this kind of things.

People Keep Following Me 😍 And I'm Wondering Why?

Pavel Keyzik — Sat, 04 Nov 2023 20:26:40 +0000

Hello to everyone who's following me. I'm so happy to see that this number is growing and wanted to say thank you for the support! ❤️

The thing I wanted to ask you is... What made you click that follow button? What content did you like or what content are you looking for? I'd be happy to hear something from you, it could motivate me to write some article that you're interested in ☺️

I could share some knowledge about my front-end & design skills, as well as how I build my personal project for tracking personal finances. It's been a while since I started to write it and I've made a lot of mistakes, a bunch of refactored code and it's still not perfect 😂

Let's play a game "Your Topic My Article"

Pavel Keyzik — Thu, 26 Oct 2023 19:59:13 +0000

I'm thinking about writing some article about Web Development based on my experience, but I'm not sure what people are interested in. Is there anything you want to know more about Web Development? Most of the time, I work with JS and React ecosystem. I'd be happy to share my experience if I'll find some topic I'm good at ☺️ I could alway learn something if it's new and share my finding.

Hey Web Devs! What are you learning this week? 😋

Pavel Keyzik — Mon, 25 Sep 2023 20:02:14 +0000

Is there anything cool you're trying to learn this week? Let me know! I'd be really happy to see and learn something from you! Who knows, maybe other people might help with problems you're facing in the comments ☺️

P.S. I could try to help you as well!

The Best Way to Reduce Complex if-else Statements

Pavel Keyzik — Fri, 31 Mar 2023 20:18:09 +0000

The problem

Have you ever had a really large if-else statement, with many variables, just to cover all cases. Let's say you have some message you want to show to the user, based on many inputs. How would you implement it? Probably, you'll start with if-else statement, trying to cover as many cases as possible. It's totally fine, until you have too many inputs.

Every new input will increase the amount of cases progressively. For example, when you have 2 variables, it's just 4 cases, but when it's 3 variables, then you have 8 possible cases.

Possible situation

Now, imagine we build a website to order food and your restaurant provides delivery or pickup. You go to the website and see "At the moment, we have delivery issues, but you can order pickup instead".

Here's the list of possible input variables:

do we have delivery?
is delivery available today?
is delivery open now?
can I order for later?

Can you guess how large your if-else statement will be? It's huge! And it'll be quite hard to cover everything. What if we have delivery, but pickup is not available for today? What if we have some issues with delivery and pickup will be open in an hour? The amount of possible situations is 2^4=16 and it'll be impossible to maintain when number of inputs grows. But don't worry! The solution will blow your mind! At least that's what happened to me 🤪

The solution

The idea of that solution is so simple. You need to build a table of truths (all possible variants) and based on that table, each row will have a unique key that you can use as "status code". In the table below, I convert boolean values to 1 (true) and 0 (false). That way for each case we'll have a unique combination of 1 and 0 that will be our unique key, like1101, and we could always convert this binary number to decimal number. For example, 1101 becomes 13, and that's why you'll see normal numbers in the status code column.

Status code	Do we have delivery?	Is delivery available today?	Is delivery open now?	Can I order for later?
0	0	0	0	0
1	0	0	0	1
2	0	0	1	0
3	0	0	1	1
4	0	1	0	0
5	0	1	0	1
6	0	1	1	0
7	0	1	1	1
8	1	0	0	0
9	1	0	0	1
10	1	0	1	0
11	1	0	1	1
12	1	1	0	0
13	1	1	0	1
14	1	1	1	0
15	1	1	1	1

Now what? That's the beauty of that solution, it's all. You just need to return status code and map this code to any message you want. Check code examples section, to see the implementation.

Code examples

In this section, I'll provide a code you need to write to do this. It's in JavaScript, but it could be written in any language.

// Restaurant configuration, all our input variables are stored here
const restaurantConfiguration = {
  haveDelivery: true,
  deliveryAvailableToday: true,
  deliveryOpenNow: false,
  canOrderForLater: true,
}

// This function takes configuration and converts all `true` and `false` values to status code
function getStatusCode(restaurantConfiguration) {
  const { haveDelivery, deliveryAvailableToday, deliveryOpenNow, canOrderForLater } =
    restaurantConfiguration

  // Note: don't change the order, or if you need to add more variables,
  // add them to the beginning of the array.
  // That way you won't break old status codes
  const binaryNumberArray = [
    haveDelivery,
    deliveryAvailableToday,
    deliveryOpenNow,
    canOrderForLater,
  ].map((isTrue) => (isTrue ? '1' : '0')) // [true, true, false, true] => ['1', '1', '0', '1']

  const binaryNumber = binaryNumberArray.join('') // '1101'
  const statusCode = parseInt(binaryNumber, 2) // Converts '1101' to 13

  return statusCode
}

// This is your mapping between message and status code
function buildMessagesTable() {
  return {
    0: null,
    // ... cover any status code you need
    13: 'Delivery is available today, but it is not open yet, so you could order for later',
  }
}

function main() {
  // Get status code
  const statusCode = getStatusCode(restaurantConfiguration)

  // Get a table with messages by status code
  const messagesTable = buildMessagesTable()

  // Get message by status code
  const message = messagesTable[statusCode] || null

  if (message) {
    console.log(message)
  }
}

main()

Summary

The only thing I want to mention about this solution is that it works great, especially when you have a bunch of inputs and when you need to cover a new case, you don't need to think about if-else statement just to cover your case, you find out the status code and add one line with the message you need. Less code, fewer bugs 💪

Did you like the article? Share it with your friends. I'd appreciate that 🙏

What tool can you suggest to deal with A/B testing?

Pavel Keyzik — Tue, 22 Nov 2022 22:02:18 +0000

Hey folks! I want to know if you have any experience in some A/B testing tools. Can you recommend something?

I know about Optimizely, I've also heard a bit about Google Experiments and Microsoft Clarity. Do you know something else or which one should I use? I'm going to use for my personal project, so, if some of the tool provide FREE option and A/B testing, it'll be great, but even if it's paid, let me know what you think I could use.

Status code	Do we have delivery?	Is delivery available today?	Is delivery open now?	Can I order for later?
0	0	0	0	0
1	0	0	0	1
2	0	0	1	0
3	0	0	1	1
4	0	1	0	0
5	0	1	0	1
6	0	1	1	0
7	0	1	1	1
8	1	0	0	0
9	1	0	0	1
10	1	0	1	0
11	1	0	1	1
12	1	1	0	0
13	1	1	0	1
14	1	1	1	0
15	1	1	1	1

Status code	Do we have delivery?	Is delivery available today?	Is delivery open now?	Can I order for later?
0	0	0	0	0
1	0	0	0	1
2	0	0	1	0
3	0	0	1	1
4	0	1	0	0
5	0	1	0	1
6	0	1	1	0
7	0	1	1	1
8	1	0	0	0
9	1	0	0	1
10	1	0	1	0
11	1	0	1	1
12	1	1	0	0
13	1	1	0	1
14	1	1	1	0
15	1	1	1	1

Status code	Do we have delivery?	Is delivery available today?	Is delivery open now?	Can I order for later?
0	0	0	0	0
1	0	0	0	1
2	0	0	1	0
3	0	0	1	1
4	0	1	0	0
5	0	1	0	1
6	0	1	1	0
7	0	1	1	1
8	1	0	0	0
9	1	0	0	1
10	1	0	1	0
11	1	0	1	1
12	1	1	0	0
13	1	1	0	1
14	1	1	1	0
15	1	1	1	1