DEV Community: Serhii Kucherenko

Introducing Wisdom — Your Daily Dose of Inspiration

Serhii Kucherenko — Wed, 01 Feb 2023 16:17:10 +0000

I am thrilled to announce the launch of my latest creation — the Wisdom app. Designed to help you cultivate wisdom and lead a more meaningful life, Wisdom delivers daily quotes from five categories — Success, Inspiration, Wisdom, Friendship, and Famous Quotes — to help you get through each day with lessons and insights from successful individuals. With over 4,000 quotes and daily notifications, the Wisdom app provides daily inspiration to help you navigate life’s challenges.

In addition to the daily quotes, Wisdom also offers daily reminders, so you never miss an opportunity to be inspired. And for iOS users, we have added a home widget so you can have quick access to a daily quote right from your home screen.

We also proudly stand with Ukraine and are committed to bringing positivity and inspiration to people worldwide.

If you’re looking for a tool to help you stay motivated and inspired, be sure to check out the Wisdom app. Available now on the App Store, the Wisdom app is your ultimate guide to personal growth and wellness. Download it now at: https://apps.apple.com/us/app/wisdom-daily-quotes/id1665478736 and follow us on Instagram at https://www.instagram.com/wisdom_dailyquotes/ for more daily inspiration.

Start your journey to a more inspired life today! Download Wisdom now on the App Store. #WisdomApp #AppStore #Launch #Motivation #Inspiration 💫

Next.js 13 with Tailwind and MUI Boilerplate

Serhii Kucherenko — Sat, 10 Dec 2022 01:03:59 +0000

In this crazy boilerplate, I've prepared the setup with the latest up-to-date stack for the Frontend. Let's see what's inside.

Next.js 13 with its latest features like the app directory (you check how it works in this excellent article by Kapeel Kokane)
Material UI (or MUI) to speed up the development with pre-made components and excellent theme support
Tailwind CSS --- I hate writing CSS(SCSS) from scratch

For those, who, like me, like to be confident in their code and help others to follow the same set of rules, I've added must-have tools:

ESLint, to ensure you and your teammates follow the same rules that prevent you from well-known bugs like "Invalid Hooks Call."
Prettier because it's just heart-breaking when you have differently formatted code across the app

Optionally, among the scripts in the package.json file, you would find the "push-check" command I usually run before push or as a part of the CI process which checks types and linter errors. And you can take a step even further, and install the Husky package so it runs this command automatically on push, or on commit. But it's out of the scope of this article, as I add husky only if there's a R-E-A-L need for it.

Afterword

You can find the source code in my GitHub account, and for those who like to check things from the browser, I prepared a DEMO of the deployed app (dark mode by default).

Remember: You can choose whatever framework or library or package you want, but in the end, you would be responsible for the outcomes. So choose wisely, and don't make rush decisions by blindly cloning the repo if you're not confident in what you're working with.

I hope the article was helpful. Please subscribe so you don't miss the following articles, and feel free to contact me if you have any questions.

Twitter | LinkedIn

How To Be 1KX Faster With GitHub Copilot

Serhii Kucherenko — Thu, 08 Dec 2022 18:06:37 +0000

If you have never heard about GitHub Copilot, I'm jealous as a friend because, after this article, you will experience the same positive shock I did when I tried it for the first time.

What is GitHub Copilot?

Once upon a time, there was a dog. His name was Copilot, but GitHub proposed him a raise. And instead of this cuttie ↑, we got this cutie ↓ (write in the comment which one you like more)

He not only looks nice but can do magic with your code. Right from your editor, GitHub Copilot uses the OpenAI Codex to suggest code and entire functions in real time. Simply put, he helps you write code faster by learning from your code (and millions of lines of code from other contributors across the web) to predict your next step or give you a snippet from a comment you would provide. You write, "Create a function that generates 1000 random users with images," and the result will be generated instantly.

// Create a function that generates 1000 random users with images
import faker from 'faker';

const generateUsers = () => {
    const users = [];
    for (let i = 0; i < 1000; i++) {
        users.push({
            id: i,
            name: faker.name.findName(),
            image: faker.image.avatar(),
        });
    }
    return users;
});

Let me show you how it works with a real-world example. Recently, I've got the task to create two screens in React Native where the first one will conduct a random today joke, and the second will display a list of all previous jokes. All data should be persisted and stored in AsyncStorage. That means, every day, we have to save fetch a new joke, and the current one goes to history. Let's summarize it in terms of actions:

For the Today screen, we need to get a joke from API
Then save the joke and current date in the AsyncStorage
Add a checker for 24-h expiration
If expired - fetch a new joke
And put the current one in the history list in the AsyncStorage
For the History screen, we only need to get a history of jokes

Let's see how GitHub Copilot can help us with it.

I was thinking about GIF format, but with video it's even better and it takes only 1 min

I hope you saw the video and got that positive shock I had. Just imagine how outstanding you will be with this tool by snapping your fingers (or clicking the Tab key).

How much?

Previously, this tool was free. But it's not anymore. So let's talked about pricing.

Today, December 8th, 2023, costs $10 bucks per month or $100 per year, which is less than I expected.

But there's some good news; you don't have to pay in advance. Start a free trial, test it, taste it, and decide if it is something you want in your personal arsenal.

I hope the article was helpful. Please subscribe so you don't miss the following article, and feel free to contact me if you have any questions.

Twitter | LinkedIn

How to set up an Express.js project with TypeScript

Serhii Kucherenko — Thu, 08 Dec 2022 00:12:10 +0000

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. Honestly, I haven’t been using it for quite some time, but now I want to update my old experience with Express.js and a TypeScript setup. Besides, Express.js version 5 (beta) is now available and maybe in future articles, I’ll share my thoughts and experience about it. But today, we’re going to create a setup with TypeScript and Express.js with an easy-to-use folder structure. And the first thing we need is to generate an Express.js project.

Generate Express.js project

As a first step, we need to have Node.js itself installed on the machine. Open a terminal and type ‘node -V’ and if it shows you a version, you’re good to go. For those who see an error, please follow the link, download the Node.js LTS version, and install it by following the instructions on the site.

Next, create a folder where you want to have your project. You can name it whatever you want. For the example let’s name it ‘server’.

Open your terminal and past the commands below and run them one after another:

# Navigate to the folder you're going to have you project in
cd ~/path/to/any/folder/you/re/going/to/have/your/project/in

# Generate in that folder a new folder with name 'server'
mkdir server
# Initialize a package.json file with default values
npm init --yes

After executing these 3 commands, you’ll have a package.json file which is going to look like this:

{
  "name": "work",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

And now, let’s add Express.js to the project by running the command:

npm install express

It will generate a package-lock.json file and a node_modules folder in the server folder. And also, in the package.json file, a new block “dependencies” with express.js will appear.

Create a Hello World server app with Express.js

Creating a simple server with Express.js is a 3 steps deal:

Import express.js from the modules
Define routes
Turn on express.js to listen to a specific port.

Take a look at the picture, can you identify each step on your own?

Let’s start from the start. Go to the ‘server’ folder and create a new file index.js which is going to be the entry point (the file node.js is going to run first) where we are going to put our server’s configuration.

Now, let’s import express.js from the modules

const express = require("express");
const app = express();
Define one route which is going to respond to a GET request to the http://localhost:8080/ URL with the text “Hello world!” as a response.

app.get("/", (req, res) => {
res.send("Hello world!");
});
Turn on express.js to listen to port 8080

app.listen(8080, () => {
console.log(server started at http://localhost:${8080});
});

And that’s it. Our Node.js server with Express.js is ready. But how can we run it? That’s where we would ask Node.js to help us. Open your terminal and run the command

node index.js

This command will tell Node.js to run our index.js file with the Express.js server and when it’s done, you should the console.log we declared in step 3

And if you would open your browser at http://localhost:8080 you’ll see the text “Hello world!” we declared in step 2.

But wait a minute, should we run this ‘node index.js’ command from the terminal each time? Of course not. Besides, this command is gonna be much longer with TypeScript support, so let’s place it in the package.json file:

The dot instead of index.js as before is just a shortcut for an index file in the folder. So now, we just need to run npm run start and everything is going to work as before.

As we have our express.js up and running, let’s add TypeScript support, because we’re great developers and want to have types to protect ourselves from ourselves :)

If you’re going to make changes, to this setup, you would need to restart your server manually via the terminal. At the end of the article, I’ll put a Bonus section on how to fix that.

Add TypeScript Support

Since we’re in the world of Node.js, I mean, in the Node.js environment, and it only understands the JavaScript language, the TypeScript code needs to be transpiled to JavaScript before the app is used in runtime. And for that we’re going to use ts-node which transforms TypeScript into JavaScript, enabling you to directly execute TypeScript on Node.js without precompiling.

The first step we need to install the typescript and ts-node packages, but since it’s only the development-related packages we would add the -D flag which indicates that the packages are going to be installed for development mode and will be deleted on production.

npm install typescript ts-node -D

Each time I install packages I’d like to verify it was added successfully to the package.json file. This time, packages should be added to the “devDependencies” section

Now, we need to configure the TypeScript. To do that, we need to create a ‘tsconfig.json’ file in the ‘server’ folder and put the following config there:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "rootDir": "./",
    "esModuleInterop": true
  }
}

It’s just a basic config, and the information about all properties you can find in the official TypeScript documentation.

Now, we can change the extension of the main file from index.js to index.ts.

Open the package.json file and update the “main” property as well from js to ts.

And the last step is to update our “start” script. Instead of “node” we’re going to use “ts-node” now. As simple as that.

Now we can run our server with the same “npm run start” command and open the http://localhost:8080 and we’ll see the text “Hello world!” as before. But what now?

Now we can use types. For the express.js project, we only need to add support for node.js and express.js types. We can install it as a dev dependency with the command:

npm install @types/node @types/express -D

(Don’t forget to verify that they were added successfully to the package.json “devDependencies” section)

Now, we can use types with the latest ES6 features like imports. Let’s update our index.js code with a TypeScript version

import express, { Request, Response } from 'express'

const app = express();

app.get("/", (req: Request, res: Response) => {
    res.send( "Hello world!" );
});

app.listen(8080, () => {
    console.log(`server started at http://localhost:${8080}`);
});

As you see, now, since we have specific types of requests and responses that come from the ‘express’ module (actually from the @types/express) we can be sure of what types we’re using across our server application. And also we can now see all things our variables support all thanks to TypeScript

Bonus

As I promised, the bonus part is going to be about watching mode. Developing apps without hot-reloading is a sin in the IT world (and I saw a lot of examples of projects even with senior developers on them). You should not waste your time in such a way. Besides, it’s not that hard to fix it. All you need is to use a nodemon package.

Since we only need it in development mode let’s put the -D flag when installing

npm install nodemon -D

When it’s done, add a new serve command to the package.json file

"serve": "nodemon index.ts"

At the end the “package.json” should look like this:

And now, you can run the server with hot-reloading

npm run serve

As you see, it’s watching for extensions .ts and .json. That means if any files in the server folder with that extension would be updated the nodemon will automatically rebuild them and so you can now focus on the development process and don’t be distracted by restarting the server after changing a file.

Congratulations, you made it. This one was a bit longer than I expected. Please subscribe so you don't miss the next article, and feel free to contact me if you have any questions.

Twitter | LinkedIn

How To Be Productive With WebStorm

Serhii Kucherenko — Thu, 08 Dec 2022 00:08:12 +0000

I’ve been using WebStorm as my default code editor for the last 3 years, and it’s amazing. I think you do have one of your own. But do you know how you can boost your speed as a developer with it? If not, let’s do this. fast; it will take just a couple of minutes, I promise.

Live templates

How many times have you created a new file with the same structure? If it happens more than twice, Huston, you know the drill. As developers, we shouldn’t repeat ourselves, remember? For that, you can use Live Templates (aka Snippets). I’m sure you've seen it before but haven’t used it.

There are a lot of pre-built live templates that come with the plugins you install. Go to Preferences->Editor->Live Templates

And what is great about it is that you can create your own live templates and never repeat yourself again. To do so, just click the “+” button and paste your template, providing an abbreviation for it. For 3 years, I’ve created around 50 most-used abbreviations for React, React Native, Node.js, Next.js, and other projects I’m working on most of the time.

If you want to dive deeper into Live Templates, please go to the official documentation

Macros

How many steps would you need to make to create a file in the root folder of your project or in the "components" folder when bootstrapping your project?

Find a folder
Call the context menu
Click create a new file
Name it

Even with the terminal way, you would need to:

Open the terminal
Move to the folder
Create a file with a name

But we can do it faster with Macroses. It gives you control over repetitive tasks. You just create a record, edit and play back macros, assign a shortcut to them, and share them.

Record a macro

Open the Edit menu, point to Macros, and click Start Macro Recording.
Perform necessary actions that you want to be recorded.
Press 🟥 or select Edit -> Macros -> Stop Macro Recording.
In the Enter Macro Name dialog, specify the name for the new macro and click OK.
If the macro is intended for temporary use only, you can leave the name blank.

It’s easy to use when you know how it works. Stop reading for a moment and consider three ways you can use Macroses in your current project. Dive deeper into the official documents.

Keep It Simple

Just imagine how much time you will save by investing a few minutes in learning and setting up these tools, which you would use to focus more on the logic of your features instead of the routine things you repeat time after time. And it’s just the tip of the iceberg, so I encourage you to go further and find your own list of things you can automate, delegate to machines, or make in less time by applying a non-trivial approach.

I hope this article was useful. Please subscribe so you don't miss the next article, and feel free to contact me if you have any questions.

Twitter | LinkedIn

3 Ways To Optimize Lists Rendering

Serhii Kucherenko — Wed, 07 Dec 2022 01:09:10 +0000

A lot of web apps are struggling with heavy data rendering problems. As your project evolves it becomes a bottleneck. Users' attention is really hard to catch, and nobody is gonna wait for a long response, but rather would go to Google and will find an alternative to your product. That's the reality. So as a web developer you need to be smart about this. And in today's article, I'm going to cover 3 ways in which we can improve the data rendering on your web apps drastically which will lead to more users staying on your site which will lead to higher revenue.

To simplify the examples, let's imagine we received a task from a manager to fix the problem with a long time to wait before all articles on the company website are rendered. So our initial data is a list of articles. You started investigating the problem and find out that you received 1000 articles from the server and the browser is trying to render all 1000 at once. How can we fix that?

Pagination

The first approach seems the most obvious one, but still, I've seen a lot of websites without this feature.

Pagination - is a fancy word for splitting data into chunks, which means instead of getting and showing all 1000 articles at once we can ask the server for the first 20 or even 50 articles, and let us know how many there are left, so we can know where to stop.

The basic info we need from the server to successfully set up the pagination is a limit and an offset. Some implementations can contain totalPages or hasNext.

Be aware, that this feature would require additional changes from the server side.

Infinite Scrolling

The next approach uses the same pagination logic under the hood, by splitting data into chunks, but instead of showing controls to the user, you should automatically request the next chunk of data when a user reaches the end of the list. For better UX it's better to start requesting the next chunk a bit earlier than the end of the list, so for the user it's going to feel like everything was already loaded and we just showed her everything right away.

Honestly, of all 3 ways, this one seems the most user-friendly to me and I like it the most. But for all tasks, there is the right technique. Some users like to click the button, and on some projects, instead of automatically loading the next page you might need to add a "Load More" button, so always clarify the expectations with your client/manager.

Virtualized Lists (VL)

For this approach, I couldn't find the right image, but what is better than seeing something? Right, is to try it by yourself. Instead of an image, I prepared a demo of how the virtualized list(VL) works. In this example, I randomly generate 10 000 users with images and render them using virtualized list(VL) approach. Check, how fast it is. Without VL it could even freeze the page, especially on mobile. But how it works?

Virtualized list does what it says --- creates a virtual list of items. That means, that instead of rendering all items right away it defines the visible view size based on the parameters we provided --- height and width of the visible area and height of each item. Based on that info VL can calculate how many items should be rendered right away and what should be rendered when a user scrolls the through the list.

Sounds like magic, but it's not. And there are plenty of ready-to-use solutions for different web stacks. In my example, I used a ready-to-use component from the

Material-UI

library which you can check here.

The Solution

For the example with the articles optimization, first of all, you need to clarify:

How many more articles are we expecting to have?
How fast the solution should be?
How much effort we can make and whether we can update the server(since in the first two ways we would need to adjust it as well as the frontend)?
Are there any specific requirements for UI?

And based on those answers the to choose will be obvious.

Thanks for spending your time with me and if you'll have any questions, please, let me know, I'll be glad to help you.

https://www.linkedin.com/in/serhii-kucherenko/
https://twitter.com/kucherenko_web/

Cheers.

How does Senior start a project?

Serhii Kucherenko — Thu, 18 Feb 2021 20:42:29 +0000

When I was a ~~child~~ junior developer I used to start my projects by adding a framework and ... That's pretty much all. Just my "favorite" (the only one I knew😆) framework and solo-coding for 10-14 hours per day. I heard from other developers about linter, prettier, git-flow, best practices, but I was like: "I don't need things I haven't had time learning to be added to my project". There was no rush, basically, I just wanted to start coding.
If you're like me, I will save you some time by saying: "Stop right there and listen to me!"👆

Let's say you're going to play hookey. Could you go to the ice without special equipment? You can, but it's risky for your health. The same is with the initial setup. It's your project's special equipment, the superpower.

After many years, I've become a Senior Developer. I've ~~learnt~~ learned from my mistakes and here's my own list of "Steps before I start the brand new project".

Take care of your code formatting
Check with the best practices
Take care of other developers by adding ReadME
Check your code on compile - TS, Flow, etc
Use the latest versions from the start
Define terminology
Git and Branch naming

1. Take care of your code formatting 🤖

As a first step, I take care of my code by defining the rules and turn on autoformatting. For that I always add 2 tools to the project:

ESLint - helps me to define specific rules for the code I write and stick to that rules by showing warnings and errors if I try to break them;
Prettier - helps me to forget about single/double quotes, tab, spaces, everything regarding the code styling. You just set up it and all your code will be autoformatted by this tool;

2. Check with the best practices ✅

At this step, I research as much as I can because as good developers we shouldn't reinvent the wheel, right? So I'm trying to find good boilerplates with things I would need in my own project. Don't make a mistake by skipping this step because it can save you a ton of time.

3. Take care of other developers by adding ReadME 🤝

I like to have 2 files in my project from the start - ReadME and Conventions. I use ReadME to add general info about the project and instruction on how it can be run. And in Conventions, I always add some description about the code styling, approaches I use and advise how other developers can continue to work and scale the project.

4. Check your code on compile - TS, Flow, etc 👔

I'm not a big fan of working without TypeScript or Flow. I'm a human and I make mistakes but with these tools, I can at least be assured that I work with the proper User object and I will get returned from a function an array of Users and not an array of Animals. Besides, it's easier to debug and understand code in this way.

5. Use the latest versions from the start 🆕

This one is pretty much straightforward. If you start a project - don't go back, but rather stay present and use everything up to date since new versions can have great features, and the code will be better tested and less buggy.

6. Define terminology 🈳

Before I start coding I want to know the terminology I would be using in the project and stick to it. I don't like to spend time thinking about names for my entities but rather think about the logic I want to implement. Also, at this step, I define the folder structure since I have all information it seems a logical step.

7. Git and Branch naming ⚙️

As the last step, I make an initial commit and put the project to one of the version control services and when I work on feature/task/bugfix I create a separate branch for each of them with the following convention - work-type/short-description. Also, I use branching since in that case, I'm able to show any feature/task/bugfix to a client separately.

Summarizing

When all steps are done I can go to the ice and play hockey without any health risk 🥷🥷🥷.

My code smart - I don't need to remember all rules and how to format code properly;
I follow best practices and learn something new each time so my project is easy to scale;
I can give the project to any developer and they can start without my help by using ReadME and Conventions;
I'm safe with TypeScript, I write better code and can refactor code easier, therefore faster;
I can use the latest features of libs in the project;
I can understand the project itself by looking at its structure, models, and types;
I can always show to a client any feature I create, merge any tasks, or a bug I fix. Also, it's easier to work in a team with good git-flow.

What are your steps? Please, share in the comments ✍️

React withGraphQL: Optimistic Response - What & Why

Serhii Kucherenko — Sat, 06 Feb 2021 18:34:23 +0000

The Problem

You start your new project with React & GraphQL. It's super cool & you tried to make it super-fast. But your backend is reaaaally slow and all these loaders are unbelievably annoying. You are a client-oriented developer and trying your best to solve this problem. Likely for you, as you used GraphQL, we can use the Optimistic UI approach.

Official definition: Optimistic UI is a pattern that you can use to simulate the results of a mutation and update the UI even before receiving a response from the server. Once the response is received from the server, the optimistic result is thrown away and replaced with the actual result.

I couldn't say better:)
So we only simulate that the backend sends us the response right away so from the user's perspective every response comes instantly.

How to use?

When we call a mutation we can also pass an additional optimisticResponse property and describe what we're going to retrieve from it. That one we would eventually receive from the backend. Here's an example:

 updateComment({  
      variables: { commentId, commentContent },
      optimisticResponse: {  
          __typename: 'Mutation',  
          updateComment: {  
          id: commentId,  
              __typename: 'Comment',  
              content: commentContent,  
          },  
      },  
})

Basically, when you call this mutation GraphQL will update the cache for this comment with new data instantly.

Also, you can update the cache manually when data will arrive from the backend but it's a totally new story. For now, check this feature out and write in the comments what do you think about it.

For more details go to the official GraphQL documentation

How to update multiple git repositories for 1 project?

Serhii Kucherenko — Tue, 02 Feb 2021 22:11:05 +0000

The problem

Image a situation where you started a project locally, developed some codebase and pushed that code to your github | gitlab | bitbucket. Then you ask your friend or a colleague to help with a feature. You added hime to the repo and we both work on 1 project. Then the client comes and says that he created an account on github and setup the auto-deploy to the server so you just need to push your code in their repo.

First solution

Simply copy the project, reinitiate the git config and change remote-url to the client's one. But then you change code in your repo & clone it to another manually. That's a stupid, time-consuming operation.

Right solution

So as a lazy developer, you don't want to do such things and you don't need to do it. You can configure your git to fetch data from your own repo and push new changes to both repos simultaneously.

git remote set-url --add --push origin path/to/YOUR/repo
git remote set-url --add --push origin path/to/CLIENT/repo

After this, when you'll next time run git push the changes will be pushed to the both gits. Check it by yourself. Isn't that awesome?