Forem: Gleb Kotovsky

My minimal VS Code setup for Vue, Typescript, Tailwind CSS, etc

Gleb Kotovsky — Mon, 04 Nov 2024 13:09:33 +0000

Hallo, Gleb Kotovsky is here!

Setting up a development environment can significantly enhance your productivity and overall enjoyment. After about four years as a developer and experimenting with various IDEs, I finally settled (for now XD) on VS Code as my go-to tool. Although I dabbled with Vim for a few years—thanks to the inspiration from several devaslife videos—I always found myself returning to VS Code, the platform where my development journey began.

My exposure to Vim has deeply influenced my workflow, particularly in how I navigate and edit code. In a future post, I plan to explore my Neovim tmux setup in detail, sharing why I love this configuration and how it complements my work.

However, In this post, I’ll share my VS Code setup, including my preferred extensions, shortcuts, and themes. If you'd like to try it out for yourself, I’ve attached a Gist link at the end of this post and Prerequisites section, or you can follow along with the settings step-by-step. So, let's begin!

Final Results

1) General look

2) Folder sidebar + Icons

3) Better find files / like a telescope.vim

4) Minimalistic theme + font family

Ingredients

Vue extension box

This extensions pack uses the latest vue extension that really works well

Vue Official - Official Language Support for Vue
Path Intellisense - plugin that autocompletes filenames
Auto Close Tag - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
Auto Rename Tag - Auto rename paired HTML/XML tag
ESLint - Integrates ESLint JavaScript into VS Code.
Sass - Indented Sass syntax Highlighting, Autocomplete & Formatter
SCSS Formatter - A Visual Studio Code Extension to format SCSS
Prettier - Code formatter - Code formatter using prettier

Additional settings

Apc Customize UI++ - Advanced VSCode user interface customizations. Very experimental.

sort-imports - Sort ES6 imports automatically.

Auto import- Automatically finds, parses and provides code actions and code completion for all available imports

TypeScript Importer - Automatically searches for TypeScript definitions in workspace files and provides all known symbols as completion items to allow code completion.

Colorize - A vscode extension to help visualize css colors in files.

Find It Faster - Finds files and text within files, but faster than VS Code normally does.

Better Errors

Pretty TypeScript Errors - Make TypeScript errors prettier and more human-readable in VSCode.

Error Lens - Improve highlighting of errors, warnings and other language diagnostics.

Productivity Tools

Codeium: AI - AI Coding Autocomplete and Chat

TODO Highlight - Highlight TODOs, FIXMEs, and any keywords, annotations

Smart Clicks - Smart selection with double clicks.

VSCodeVim - Vim emulation for Visual Studio Code.

WakaTime - Metrics, insights, and time tracking automatically generated from your programming activity.

Markdown

MDX- Language support for MDX.

MDX Preview - MDX Preview.

LSP and syntax support

DotENV - Support for dotenv file syntax
vscode-styled-components - Syntax highlighting for styled-components.

Tailwind CSS IntelliSense - Intelligent Tailwind CSS tooling for VS Code.

PostCSS Language Support - Syntax highlighting for modern and experimental CSS in VSCode.

Astro - Language support for Astro

Theming

oh lucy - A re-upload of a soft but clear syntax theme.

Bearded Icons - Beatiful Icons theme

Prerequisites

Before changing the configuration in VSCode I highly recommend saving the existing one. If you don't want to follow step-by-step, then you can import the configuration from my gist

Settings Config

Below is the JSON configuration for my development environment. To apply this, press:

Mac: CMD + SHIFT + P
Windows/Linux: CTRL + SHIFT + P

In the command palette, type Preferences: Open Settings (JSON) and paste the following JSON objects at the end of your existing configuration.

General Git Configuration

{
    "git.confirmSync": false // Disable confirmation for Git sync
}

Editor Configuration

{
    "editor.fontFamily": "Fira Code", // Font family for the editor
    "editor.fontLigatures": true, // Enable font ligatures
    "editor.fontSize": 16, // Font size
    "editor.smoothScrolling": true, // Enable smooth scrolling
    "editor.tokenColorCustomizations": {
        "keywords": "#25a6b2", // Color for keywords
        "comments": "#5f595e" // Color for comments
    },
    "editor.renderWhitespace": "none", // Whitespace rendering options
    "editor.renderControlCharacters": false, // Control character rendering
    "editor.wordWrap": "on", // Enable word wrapping
    "diffEditor.wordWrap": "off", // Disable word wrapping in diff editors
    "editor.lineNumbers": "on", // Show line numbers
    "editor.minimap.enabled": false, // Disable the minimap
    "editor.hideCursorInOverviewRuler": true, // Hide cursor in overview ruler
    "editor.overviewRulerBorder": false, // Disable overview ruler border
    "editor.scrollbar.horizontal": "hidden", // Hide horizontal scrollbar
    "editor.scrollbar.vertical": "hidden", // Hide vertical scrollbar
    "editor.lineHighlightBackground": "#93a1382d", // Line highlight background color
    "editor.lineHighlightBorder": "#9fced11f", // Line highlight border color
    "editor.cursorBlinking": "phase", // Cursor blinking style
    "editor.cursorSmoothCaretAnimation": "on", // Enable smooth caret animation
    "editor.bracketPairColorization.enabled": false, // Disable bracket pair colorization
    "editor.guides.indentation": false, // Disable indentation guides
    "editor.guides.bracketPairs": false, // Disable bracket pair guides
    "editor.renderLineHighlight": "none", // Line highlight rendering mode
    "editor.showFoldingControls": "never" // Folding controls visibility
}

Eslint

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit" // Apply ESLint fixes on save
    }
}

Error Lens Configuration

{
    "errorLens.removeLinebreaks": false, // Do not remove line breaks
    "errorLens.gutterIconsEnabled": true, // Enable gutter icons for errors
    "errorLens.statusBarColorsEnabled": true, // Enable status bar colors for errors
    "errorLens.messageBackgroundMode": "message", // Background mode for messages
    "errorLens.editorHoverPartsEnabled": {
        "messageEnabled": false,
        "sourceCodeEnabled": false,
        "buttonsEnabled": false
    }, // Hover behavior for error lens
    "errorLens.borderRadius": "0.4em", // Border radius for error message
    "errorLens.fontStyleItalic": true, // Italicize error messages
    "errorLens.fontWeight": "800", // Font weight for error messages
    "errorLens.respectUpstreamEnabled": {
        "statusBar": true
    }, // Upstream settings for error lens
    "errorLens.statusBarIconsEnabled": true // Status bar icons for error lens
}

Workbench Configuration and theme-specific settings

{
    "workbench.colorCustomizations": {
        "editorBracketMatch.border": "#a2d418", // Bracket match border color
        "editorError.foreground": "#00000000", // Error foreground color
        "editorWarning.foreground": "#00000000", // Warning foreground color
        "editorInfo.foreground": "#00000000", // Info foreground color
        "[lucy]": { // Theme-specific customizations
            "focusBorder": "#10cf8f80",
            "editor.wordHighlightBorder": "#2fdc770d",
            "editor.wordHighlightStrongBorder": "#2fc8dc33",
            "list.activeSelectionBackground": "#10cf8f90",
            "list.activeSelectionForeground": "#10cf8fbd",
            "list.hoverBackground": "#10cf8f80",
            "list.focusAndSelectionOutline": "#10cf8f80",
            "statusBarItem.remoteBackground": "#10cf8f80"
        }
    },
    "workbench.startupEditor": "none", // No startup editor
    "workbench.editor.highlightModifiedTabs": true, // Highlight modified tabs
    "workbench.editor.showTabs": "none", // Do not show tabs
    "workbench.editor.editorActionsLocation": "hidden", // Hide editor actions
    "workbench.colorTheme": "lucy", // Color theme
    "workbench.iconTheme": "bearded-icons",
    "workbench.layoutControl.enabled": false,
    "breadcrumbs.filePath": "last", // File path breadcrumb setting
    "workbench.activityBar.location": "hidden",
    "workbench.statusBar.visible": false
}

Window Configuration

{
    "window.customTitleBarVisibility": "windowed", // Title bar visibility
    "window.systemColorTheme": "dark", // Default editor tab height
    "window.zoomLevel": -1, // Zoom level
    "window.commandCenter": false, // Command center visibility
    "window.menuBarVisibility": "toggle", // Menu bar visibility toggle
    "window.title": " " // Custom window title
}

Explorer Settings

{
    "explorer.confirmDelete": false, // Disable delete confirmation
    "explorer.confirmDragAndDrop": false // Disable drag and drop confirmation
}

TypeScript and JavaScript Configuration

{
    "typescript.suggest.autoImports": false, // Disable auto imports in TypeScript
    "javascript.suggest.autoImports": false, // Disable auto imports in JavaScript
    "typescript.updateImportsOnFileMove.enabled": "never", // Disable imports update on file move
    "javascript.updateImportsOnFileMove.enabled": "never", // Hide status bar
}

Codeium

{
    "codeium.enableCodeLens": false, // Disable CodeLens support
    "codeium.enableConfig": { // Configuration for Codeium
        "*": true,
        "markdown": true
    },
    "find-it-faster.general.searchWorkspaceFolders": true,
    "find-it-faster.findFiles.showPreview": true,
    "find-it-faster.general.openFileInPreviewEditor": true,
    "find-it-faster.general.killTerminalAfterUse": true,
    "find-it-faster.general.showMaximizedTerminal": true,
}

Apc UI

{
    "apc.activityBar": { // Activity bar configuration
        "position": "bottom",
        "size": 30,
        "itemMargin": 12
    },
    "apc.electron": { // Electron settings for APC
        "titleBarStyle": "hiddenInset",
        "trafficLightPosition": {
            "x": 7,
            "y": 5
        }
    },
    "apc.header": { // Header configuration
        "height": 25,
        "fontSize": 13
    },
    "apc.listRow": { // List row configuration
        "height": 19,
        "fontSize": 13
    },
}

Find It Faster - Telescope.vim like feel

{
    "find-it-faster.general.searchWorkspaceFolders": true,
    "find-it-faster.findFiles.showPreview": true,
    "find-it-faster.general.openFileInPreviewEditor": true,
    "find-it-faster.general.killTerminalAfterUse": true,
    "find-it-faster.general.showMaximizedTerminal": true,
}

Keybindings Config

Open the command search using the shortcut ctrl + shift + p and type 'keyboard shortcuts', then select 'Preferences: Open Keyboard Shortcuts (JSON)'

Unbindings

[
    {
        "key": "ctrl+m",
        "command": "-editor.action.toggleTabFocusMode"
    },
    {
        "key": "ctrl+k ctrl+m",
        "command": "-workbench.action.toggleMaximizeEditorGroup",
        "when": "maximizedEditorGroup || multipleEditorGroups"
    },
    {
        "key": "ctrl+m",
        "command": "-extension.vim_ctrl+m",
        "when": "editorTextFocus && vim.active && vim.use<C-m> && !inDebugRepl || vim.active && vim.use<C-m> && !inDebugRepl && vim.mode == 'CommandlineInProgress' || vim.active && vim.use<C-m> && !inDebugRepl && vim.mode == 'SearchInProgressMode'"
    }
]

ESLint

{
    "key": "alt+s",
    "command": "eslint.executeAutofix"
}

Split Editor

[
    {
        "key": "ctrl+t \\",
        "command": "workbench.action.splitEditor"
    },
    {
        "key": "ctrl+t -",
        "command": "workbench.action.splitEditorDown"
    }
]

General Vim-inspirated Navigation

[
    {
        "key": "ctrl+t h",
        "command": "workbench.action.navigateLeft"
    },
    {
        "key": "ctrl+t l",
        "command": "workbench.action.navigateRight"
    },
    {
        "key": "ctrl+t k",
        "command": "workbench.action.navigateUp"
    },
    {
        "key": "ctrl+t j",
        "command": "workbench.action.navigateDown"
    }
]

Navigate Between Opened Files

[
    {
        "key": "ctrl+t m",
        "command": "workbench.action.nextEditor"
    },
    {
        "key": "ctrl+t n",
        "command": "workbench.action.previousEditor"
    }
]

Quick Actions and Show Implementations

[
    {
        "key": "ctrl+k ctrl+m",
        "command": "editor.action.showHover",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+k ctrl+i",
        "command": "-editor.action.showHover",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+k ctrl+,",
        "command": "-editor.createFoldingRangeFromSelection",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+k ctrl+.",
        "command": "-editor.removeManualFoldingRanges",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+k ctrl+.",
        "command": "editor.action.quickFix",
        "when": "editorHasCodeActionsProvider && textInputFocus && !editorReadonly"
    }
]

UI Toggles

[
    {
        "key": "ctrl+t b",
        "command": "workbench.action.toggleSidebarVisibility"
    },
    {
        "key": "ctrl+t shift+b",
        "command": "workbench.action.toggleActivityBarVisibility"
    },
    {
        "key": "ctrl+t ctrl+b",
        "command": "workbench.action.toggleStatusbarVisibility"
    },
    {
        "key": "ctrl+t shift+c",
        "command": "workbench.action.hideEditorTabs"
    }
]

Navigation Between Views

[
    {
        "key": "ctrl+t 1",
        "command": "workbench.view.explorer",
        "when": "viewContainer.workbench.view.explorer.enabled"
    },
    {
        "key": "ctrl+t 2",
        "command": "workbench.view.search"
    },
    {
        "key": "ctrl+t 3",
        "command": "workbench.view.extensions",
        "when": "viewContainer.workbench.view.extensions.enabled"
    },
    {
        "key": "ctrl+t 4",
        "command": "workbench.view.scm",
        "when": "workbench.scm.active"
    },
    {
        "key": "ctrl+t space",
        "command": "workbench.action.focusFirstEditorGroup"
    }
]

Working with Files in Explorer

[
    {
        "key": "ctrl+t n",
        "command": "explorer.newFile",
        "when": "filesExplorerFocus && !inputFocus"
    },
    {
        "key": "ctrl+t m",
        "command": "explorer.newFolder",
        "when": "filesExplorerFocus && !inputFocus"
    },
    {
        "key": "ctrl+t r",
        "command": "renameFile",
        "when": "filesExplorerFocus && !inputFocus"
    }
]

Find It Faster Settings

[
    {
        "key": "ctrl+shift+j",
        "command": "-find-it-faster.findFiles"
    },
    {
        "key": "ctrl+shift+u",
        "command": "-find-it-faster.findWithinFiles"
    },
    {
        "key": "ctrl+t f",
        "command": "find-it-faster.findFiles"
    },
    {
        "key": "ctrl+t shift+f",
        "command": "find-it-faster.findWithinFiles"
    }
]

Conclusion

That’s pretty much it! I strive to keep my settings minimal and install only the extensions and configurations that genuinely improve my workflow. I hope this post has been helpful to you. If you’d like to see a video review of this setup in the future, please let me know in the comments.

Peace!

Inspiration links

My Neovim setup for React, TypeScript, Tailwind CSS, etc

VSCode Setup for development
Gist to VSCode profile from the blog post

Git Stash: Because Sometimes, You Just Need to Hide

Gleb Kotovsky — Thu, 24 Oct 2024 21:09:50 +0000

Hi, Gleb Kotovsky is here!
Welcome to my Git series again, where we’ll explore various features and best practices of Git to help you become a more efficient developer. In this post, we’ll dive into Git Stash, a powerful tool for managing your work "on the fly"

As a developer, juggling multiple tasks or features at once can sometimes feel like a game of whack-a-mole. You're in the middle of working on a new feature when, suddenly, you're interrupted by the urgent need to fix a bug. This is where Git Stash comes to your rescue! In this post, we'll explore what Git Stash is, how to effectively use it, and some practical examples that will make you wonder how you ever coded without it.

What is Git Stash?

In the simplest terms, Git Stash is a way to save your uncommitted changes without committing them. Think of it as a temporary holding area for your work in progress. When you stash your changes, Git takes your modified tracked files, saves the changes, and cleans your working directory. This allows you to switch branches or pull updates without the risk of losing your current work.

3 Reasons to use Git Stash

1) "Quick Fix" Interruptions

Let's remember our common process when working with codebase and git. We made something (a function, a small module), performed add, then commit and push. Hooray - the task is done, let's move on to the next one.

But what do you do in a situation where the context changes and you need to switch urgently?

It will take a long time to finish writing this task, but your manager said that you should do another task now. You don't want to leave the commit unfinished. That's where stash comes to the rescue.

2) Experimenting

You want to try out a different approach or idea but don't want to commit half-finished work. Stash your changes first!

3) Keeping a Clean History

Stashing allows you to avoid unnecessary WIP commits, making your version history cleaner and more meaningful.

How to Use Git Stash

Let’s dive into some common commands and scenarios where git stash shines.

Basic Stashing

To stash your changes, simply run:

git stash

This command will take all modified tracked files and stash them away. If you have untracked files and want them included as well, you can use:

git stash -u

And if you wish to include ignored files too:

git stash -a

Viewing Stashed Changes

You can check what you've stashed at any time with:

git stash list

This command will display a list of stashed entries, each with a unique identifier (like stash@{0}, stash@{1}, etc.).

Applying Stashed Changes

When you’re ready to retrieve your stashed changes, use:

git stash apply

This will apply the most recent stash without removing it from the stash list. If you want to apply a specific stash, you can refer to it directly:

git stash apply stash@{1}

Cleaning Up the Stash

Once you're done with a stash, you may want to clean it up. You can drop a specific stash with:

git stash drop stash@{0}

Alternatively, if you want to clear all stashed changes, use:

git stash clear

Pop Stash

If you want to apply a stash and remove it from the stash list in one command, use:

git stash pop

This is a great way to quickly retrieve your stashed changes while keeping your stash list tidy.

Create named stash

To create a named stash so that we don't forget what changes we've save, we can use:

git push push -m "Our very informative description of the stash"

Real-World Scenarios

Scenario 1: Quick Fix

A critical bug needs immediate attention?. Alright, you can stash changes Instead of committing half-baked:

git stash
# Switch to the bug-fix branch
git checkout main
# Fix the bug
git commit -m "Fix critical bug"
# Return to your feature branch
git checkout feature-branch
git stash pop

Scenario 2: Experimenting

You’re trying out new ideas, but you want to experiment without committing every little change. Stash your changes, explore, and then retrieve your stash later:

git stash
# Try out new ideas
# Stash may be cleared or maintained based on preference
git stash pop

Conclusion

Git Stash is an invaluable tool for developers, providing a convenient mechanism to manage work in progress without cluttering your commit history. By using stashing effectively, you can stay focused on your tasks without the worry of losing your changes.
So next time you find yourself caught in a coding conundrum, remember: it’s okay to stash things away for a while. After all, sometimes, you just need to hide!

Lucia Auth is getting deprected

Gleb Kotovsky — Mon, 21 Oct 2024 10:15:08 +0000

pilcrowonpaper - author of Lucia Auth package

In conclusion, pilcrowonpaper acknowledges that the current state of the Lucia library is not effective for their needs, leading to a decision to deprecate it early next year.

The new direction focuses on providing an open-source resource that teaches users how to implement authentication in JavaScript from scratch, making it more educational than just a conventional package. While the library's complex database adapters have contributed to challenges, the shift aims to simplify the experience and enhance maintainability.

Although Lucia could evolve into a framework similar to Auth.js, pilcrowonpaper prefers it to remain a standalone package. With a commitment to providing valuable learning resources, he plans to maintain version 3 for six more months (until march 2025), ensuring a smooth migration process for users without significant changes to the database schema.

At this point, lucia auth can be used as a guide to building authorization from scratch.

Opinion

I think the real issue is in trying to tackle every possible use case. People who need more complex solutions should just build their own authentication system from scratch.

For those who want something simple—like being able to support a few OAuth providers, having a validateRequest() function, and not stressing too much about session management—Lucia has been a fantastic, lightweight choice. It delivers the key features without all the extra madness.

Big thanks to @pilcrowonpaper for all the hard work put into the library and resources!

Resource

1) pilcrowonpaper twitter account
2) github discussion
3) lucia auth website with great example of auth implementation

To Rebase or not to Rebase?

Gleb Kotovsky — Fri, 11 Oct 2024 14:16:43 +0000

Hi, Gleb Kotovsky is here!
Today, we’re diving into one of the most powerful features of Git: git rebase.

What is Git Rebase?

At its essence, git rebase is a method to reposition or merge a series of commits onto a new base commit. Unlike git merge, which generates a merge commit, rebasing alters the commit history. This enables you to tidy up your project history, presenting it in a more linear and straightforward manner.

git rebase serves two main purposes:

Streamlining the History: It allows you to create a cleaner linear project history by removing unnecessary merge commits that typically occur when merging branches.
Updating a Feature Branch: It helps you incorporate changes from one branch (usually the main or master branch) into another branch (your feature branch), making it easier to manage ongoing work.

How Does It Work?

When you perform a rebase, Git essentially takes the commits from your current branch and adds them on top of another branch. This process can be visualized as follows:

You start with two branches: feature and main.
The feature branch has diverged from main, with several commits unique to it.
When you rebase feature onto main, Git takes the commits from feature, temporarily saves them, moves feature to the tip of main, and re-applies those commits one by one.

Assume the commits look like this:

        A---B---C (main)
       /
      D---E (feature)

Let's say commits A, B, and C represent changes made to the main branch, while D and E are your changes on the feature branch.

When you run:

git checkout feature
git rebase main

Git will take commits D and E and replay them on top of commit C. After running this command, your commit history will look like:

            A---B---C---D'---E' (feature)
           /
          main

In this result, D' and E' are new commits with different hashes, because they are applied on top of C instead of B.

When to Use Git Rebase

1. Keeping a Clean History

When working in teams, you often find yourself merging branches. Instead of using git merge, which can clutter your history with merge commits, consider using git rebase. This creates a more linear representation of changes, making it easier to follow the project history.

2. Updating Feature Branches

You can use git rebase to stay up-to-date with the main branch while working on your feature branch. Regularly rebasing your feature branch against main helps you resolve conflicts incrementally, preventing a large merge conflict later.

3. Squashing Commits

Rebase can also be used to squash multiple commits into one. This is useful for cleaning up your commit history before merging to the main branch. For example:

git rebase -i HEAD~3

This opens an interactive rebase window, allowing you to pick, squash, or fix commits.
Let's talk about it interactive rebase more:

4. Interactive Git Rebase

This feature allows you to take control of individual commits, giving you options to edit, reorder, and squash them. You can initiate an interactive rebase with:

git rebase -i HEAD~3

This command opens an interactive editor showing the last 3 commits. You can then choose actions for each commit, such as:

pick: Use the commit as-is.
squash: Combine this commit with the previous one.
edit: Stop to allow you to make changes to this commit.
reword: Change the commit message.
and more

5. Lost in interactive Rebase-land: Finding Your Way Back to Git Reality

If you get lost while using git rebase -i, here are some helpful tips to regain your bearings:

Check the Terminal Output: After you run git rebase -i, Git provides instructions in the terminal. Look closely at the output for any messages or prompts indicating what to do next.
Interactive Editor: When the interactive rebase editor opens, take a moment to read the instructions at the top. They explain how to pick, squash, edit, or drop commits. You can always exit the editor (usually by typing :q (or rebooting PC) for Vim or Ctrl + X for Nano) to cancel and return to the command line.
Abort the Rebase: If you're unsure about the changes you've made, you can always abort the rebase by running:

git rebase --abort

This command will take you back to the state of your branch before the rebase started.

View Commit History: If you're not sure about the commits you are working with, you can open another terminal window or tab and check your commit history using:

git log

This will give you context about the commits in your branch.

Read the Documentation: If you need comprehensive guidance, you can check the Git documentation online or simply run:

git help rebase

This provides detailed explanations and examples.

Ask for Help: If you're working in a team and still feel stuck, don't hesitate to reach out to a colleague for assistance. Sometimes a fresh perspective helps clarify the situation.
Practice: If you’re unsure about rebasing, consider practicing in a test repository where you can experiment without affecting important code.

Remember, it’s perfectly fine to feel a bit overwhelmed during the process. Take your time, and don’t hesitate to revert if needed!

Best Practices

1. Use Rebase for Local Changes

It's best to use git rebase for local branches that haven’t been pushed to a remote repository yet. Rewriting commit history after pushing can lead to problems for others who have based their work on the original commits.

2. Always Communicate with Your Team

Before rewriting history on shared branches, communicate with your team. Let them know that a rebase has occurred so they can synchronize their local branches accordingly:

git pull --rebase

3. Handle Conflicts Carefully

During a rebase, conflicts may occur. Git will pause and allow you to resolve conflicts before continuing with the rebase. Be careful to review and test your changes before completing the rebase:

git status

Once resolved, you can continue rebasing:

git rebase --continue

4. Use Interactive Rebase for Cleanup

To tidy up your commit history, use interactive rebase to review and modify commits before merging into the main branch, combining related changes in a meaningful way.

5. Be Mindful of Commit Messages

When rebasing, pay attention to your commit messages. A good commit message should be concise and convey the essence of the changes made.

When to Use Git Rebase

Updating Your Branch: When you want to update your feature branch with the latest changes from the main branch without creating unnecessary merge commits.
Cleaning Up Your Commit History: If you have many small or irrelevant commits, rebasing allows you to squash them into a single commit that is more representative of the changes made.
Before Merging: To ensure that your feature branch is compatible with the main branch, it’s a good habit to rebase before merging your changes.

Conclusion

Git rebase is a handy command that helps keep your Git history clean and easy to follow. Whether you're bringing in updates from the main branch or tidying up your commit history before a merge, knowing how to use rebase well is super important for every developer.
So, "To rebase or not to rebase?" The answer often depends on the context. Rebase is fantastic for maintaining a linear history and simplifying merges, making it ideal for feature branches and collaborative workflows. However, it’s essential to avoid rebasing publicly shared branches, as this can lead to confusion and conflicts for your teammates.
By following some best practices and using rebase thoughtfully, you can make the most of its benefits to improve your workflow and work better with your team.
Now that you have a clearer understanding of git rebase, why not give it a shot in your next project?

Happy Hacking and i'll see u in the next chapter of git series

React Virtual DOM

Gleb Kotovsky — Thu, 10 Oct 2024 18:09:19 +0000

Introduction

Hi, Gleb Kotovsky is here!

Today I wanna talk about Virtual DOM, specifically - React Virtual DOM

So, the virtual DOM (Virtual Document Object Model) is a cool programming idea that keeps a "virtual" version of a user interface in memory. This version syncs up with the browser's DOM (Document Object Model) using a library.

You’ll find the virtual DOM is a big part of many JavaScript front-end frameworks, and it’s one of the reasons they’re so efficient. In this article, we're going to dive into how the virtual DOM works in React and why it’s important for the library.

What is the DOM?

When a webpage loads in a browser, it typically receives an HTML document from the server. The browser then builds a logical, tree-like structure from this HTML to render the requested page for the user. This structure is known as the DOM.

The Document Object Model (DOM) represents a logical tree that describes a document. Each branch of the tree ends in a node , which contains an object . Because the browser parses the document into this tree structure, there is a need for methods that allow for programmatic access to the tree, enabling modifications to the document's structure, style, or content. This necessity led to the development of the DOM API, which offers these methods for manipulating the nodes representing the elements in the tree.

React's Virtual DOM Implementation

To optimize re-rendering in websites and applications, many JavaScript frameworks offer different strategies. However, React employs the concept of the virtual DOM.

The virtual DOM in React represents the user interface as a "virtual" tree structure, where each element is a node containing an object. This representation is maintained in memory and synchronized with the browser's DOM through React's React DOM library.

When React and many other famous frameworks uses Virtual DOM, Svelte meanwhile has no Virtual DOM. Svelte works directly with the DOM in the browser and modifies it as needed.

Here's a simple example to illustrate the Virtual DOM in a React component:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

In this example:

The component renders a counter and a button.
When the button is clicked, the state is updated, prompting React to create a new Virtual DOM tree.
The diffing algorithm checks what has changed (only the count) and updates the real DOM accordingly.

After the component is first rendered and the state is count: 0, the actual DOM will look like this:

<div>
  <h1>Counter</h1>
  <p>Count: 0</p>
  <button>Increment</button>
</div>

How the Virtual DOM Works:

Here's a simple example to illustrate the Virtual DOM in a React component, starting with the component definition:

1. Component Definition

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);

  return (
    <div>
      <h1>Counter</h1>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

2. Initial Render Process

2.1 Component Initialization

When the component is first rendered, React calls the Counter function.

2.2 State Initialization

useState(0) initializes the component's state to 0.

2.3 Creating the Virtual DOM

React generates a Virtual DOM tree using the component's returned JSX structure. This tree is a lightweight representation of the UI.

For the initial render, the Virtual DOM might look like this:

{
  "type": "div",
  "props": {
    "children": [
      { "type": "h1", "props": { "children": "Counter" } },
      { "type": "p", "props": { "children": "Count: 0" } },
      { "type": "button", "props": { "children": "Increment" } }
    ]
  }
}

2.4 Updating the Real DOM

React then takes this Virtual DOM and calculates what changes need to be made to the actual DOM. In this case, it creates the following HTML:

<div>
  <h1>Counter</h1>
  <p>Count: 0</p>
  <button>Increment</button>
</div>

3. User Interaction

When a user clicks the "Increment" button, the following steps occur:

3.1 Event Handling

The button's onClick event triggers the increment function, calling setCount(count + 1).

3.2 State Update

The component's state is updated, which causes React to know that it needs to re-render the component with the new state.

4. Re-render Process

4.1 Component Re-invocation

React calls the Counter function again due to the state change.

4.2 New Virtual DOM Creation

A new Virtual DOM tree is created reflecting the updated state:

{
  "type": "div",
  "props": {
    "children": [
      { "type": "h1", "props": { "children": "Counter" } },
      { "type": "p", "props": { "children": "Count: 1" } },
      { "type": "button", "props": { "children": "Increment" } }
    ]
  }
}

4.3 Diffing the Virtual DOM

React compares the new Virtual DOM with the previous Virtual DOM. It identifies what has changed—in this case, the text in the <p> tag has changed from "Count: 0" to "Count: 1".

4.4 Reconciliation

Only the parts of the real DOM that have changed are updated. In this case, React updates the real DOM to reflect the new count:

<div>
  <h1>Counter</h1>
  <p>Count: 1</p> <!-- Updated content -->
  <button>Increment</button>
</div>

5. Performance Optimization

5.1 Batching Updates

If multiple state updates occur in rapid succession (e.g., multiple button clicks), React may batch these updates together for efficiency, minimizing the number of re-renders and DOM updates.

Common Problems with React Virtual DOM and How to Avoid Them

Performance Bottlenecks
- Issue: Excessive re-renders can occur even with the Virtual DOM.
- Solution: Use React.memo to memoize functional components.

const MyComponent = React.memo(({ value }) => {
  console.log('Rendered: ', value);
  return <div>{value}</div>;
});

Legacy: Use shouldComponentUpdate in class components:

class MyClassComponent extends React.Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.value !== this.props.value;
  }

  render() {
    return <div>{this.props.value}</div>;
  }
}

Inefficient Key Management
- Issue: Improper handling of keys in lists can lead to bugs.
- Solution: Use unique and stable keys, not array indices.

   const items = ['Apple', 'Banana', 'Cherry'];
      return (
        <ul>
          {items.map(item => (
            <li key={item}>{item}</li> // Prefer unique values as keys
          ))}
        </ul>
      );

Overusing State and Updates
- Issue: Too many state updates lead to performance issues.
- Solution: Combine related states

const [state, setState] = useState({
  name: '',
  age: 0,
});

const updateAge = (newAge) => {
  setState(prevState => ({ ...prevState, age: newAge }));
};

Using Inline Functions
- Issue: Inline functions create new instances on every render.
- Solution: Use useCallback to memoize functions.

const increment = useCallback(() => {
  setCount(c => c + 1);
}, []); // Only recreate the function if dependencies change

Deep Component Trees
- Issue: Deeply nested components trigger multiple re-renders.
- Solution: Use context.

const CountContext = React.createContext();

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={{ count, setCount }}>
      <ChildComponent />
    </CountContext.Provider>
  );
};

const ChildComponent = () => {
  const { count, setCount } = useContext(CountContext);
  return <div onClick={() => setCount(count + 1)}>Count: {count}</div>;
};

Excessive Re-renders Due to Parent Component Updates
- Issue: Child components re-render when parents update.
- Solution: Memoize child components.

const ChildComponent = React.memo(({ count }) => {
  return <div>Count: {count}</div>;
});

Inefficient Rendering of Expensive Components
- Issue: Expensive components can slow down the app.
- Solution: Use React.lazy and React.Suspense.

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => (
  <React.Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </React.Suspense>
);

Managing Side Effects
- Issue: Side effects can cause bugs if not managed properly.
- Solution: Use useEffect with proper dependencies.

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('Time elapsed');
  }, 1000);

  return () => clearTimeout(timer); // Cleanup on unmount or if dependencies change
}, [dependencies]); // Replace with actual dependency

Confusion Between State and Props
- Issue: Misunderstanding when to use state vs. props.
- Solution: Use props for externally managed data and state for local data.

const ParentComponent = () => {
  const [name, setName] = useState('John');

  return <ChildComponent name={name} setName={setName} />;
};

const ChildComponent = ({ name, setName }) => (
  <div>
    <p>{name}</p>
    <button onClick={() => setName('Jane')}>Change Name</button>
  </div>
);

Neglecting Accessibility
- Issue: Accessibility concerns can be ignored.
- Solution: Use semantic HTML and accessibility tools.

const AccessibleButton = () => (
  <button aria-label="Increment" onClick={increment}>
    Increment
  </button>
);

Conclusion

To wrap things up, React’s Virtual DOM is a fantastic feature that really boosts the performance of your web applications. By creating a lightweight version of the actual DOM, React can make updates more efficiently, avoiding the slowdowns that come with direct DOM manipulation.

That said, it’s important to watch out for common issues like excessive re-renders, poor key management in lists, and mixing up state and props. By keeping some best practices in mind—like using memoization, deploying context for handling state, and managing side effects wisely—you can get the most out of React and keep your apps running smoothly.

Happy hacking!

Resources

1) https://www.geeksforgeeks.org/reactjs-virtual-dom/
2) https://svelte.dev/blog/virtual-dom-is-pure-overhead
3) https://refine.dev/blog/react-virtual-dom/#introduction

Trying Elysia JS: How I Built an App for Meaningful and Memorable Conversations

Gleb Kotovsky — Tue, 24 Sep 2024 13:50:03 +0000

Hallo, Gleb Kotovsky is here

This post will not be a guide on Elysia; for that, I’ll dedicate a separate post and publish an article soon.

For now, I’ll share how a small pet project called the Deep Question Generator came about after I tried to poke around with Elysia JS

Brief

In simple terms, this app generates deep questions designed to enhance the quality of communication between people. Each question offers an opportunity to understand the conversation partner better, uncover their values, interests, and emotional perceptions of the world. The app aims to create more meaningful and memorable conversations.

The Need for Deeper Conversations

I believe most people had at least one moment in their lives when they really had nothing to talk about. Or, more prosaically, moments when there is something to discuss, but the questions are all superficial. If we take the questions from this app, we can find a range of more or less simple questions like:

"What's your favorite fruit and why?"
"How would your friends describe you?"

And you can also encounter philosophical questions, for example:

"How do you imagine your life after death?"
"What's your biggest insecurites?"

Whether to answer these questions or not is up to the participants in the conversation. The main intent is to get to know each other better and possibly overcome the barriers or tension that were present at the beginning of the talk.

If you have a loved one, friends, or just acquaintances with whom you can gather and try this experiment, then I think you will enjoy this app.

Conclusion

Take care of your mental health, communicate on deep topics and love people

That's it! I'm attaching useful links

1) Elysia JS - backend framework from people for people (https://elysiajs.com/)
2) Link to my app (https://athletic-adventure-production.up.railway.app/)
3) Github Repo (https://github.com/TerrniT/deep-question-api)
4) My personal website/blog (https://www-terrnit.vercel.app/)

Better Merge Request Conventional with Templates in Gitlab

Gleb Kotovsky — Sat, 24 Aug 2024 11:20:26 +0000

Merge requests (MRs) play a crucial role in the collaborative software development process, allowing developers to propose changes, receive feedback, and ultimately integrate their code into a codebase. A well-structured informative merge request description can significantly enhance the efficiency of the code review process and improve overall code quality.

Gitlab, a popular used platform for version control and collaboration, provides the ability to create templates for merge request descriptions, streamlining the process, and ensuring consistent communication. In this article, we’ll explore the importance of merge request descriptions, the benefits of using templates, and how to simplify the merge request description template in Gitlab.

What Are Merge Request Templates

The Merge Request templates are pre-defined layouts for use when creating a merge request within GitLab.
If you have them set up in your project repository, then they are available during the merge request process for selection to use.

The Importance of Clear Descriptions

Merge request descriptions are more than just a summary of the changes being proposed. They serve as a means of communication between developers, reviewers, and stakeholders. A well-written merge request description provides essential context, explains the purpose of the changes, outlines any potential issues, and offers guidance on how to review the code effectively. Additionally, a detailed merge request description can help maintain a historical record of why specific changes were made, aiding future developers in understanding the evolution of the codebase.

Why's of using Merge Request Templates

Consistency: Templates ensure that all merge requests follow a consistent structure, consistency simplifies the review process, as reviewers know where to find relevant information and what to expect in terms of formatting.
Time Savings: With a predefined template, developers spend less time figuring out what to include in the merge request description. This leads to quicker reviews and faster integration of changes.
Clarity: Templates encourage developers to provide the necessary information in a clear and organized manner. This clarity helps reviewers understand the purpose of the changes and minimizes misunderstandings.
Documentation: A well-designed template can serve as documentation for code changes, and provides a written record of the intentions behind the changes, making it easier for future contributors to understand and maintain the code.

Merge Request Description Guidance

When creating a merge request description template in Gitlab, simplicity and relevance are good practices. A concise and effective template should include the following sections:

Title

The title of the merge request should be descriptive and concise, summarizing the purpose of the changes. It should give reviewers a clear idea of what the merge request addresses.

Description

The main body of the description should provide context for the changes. It should answer questions like:

What problem does this merge request solve?
Why are these changes necessary?
Are there any alternative approaches that were considered?

Changes Made

Outline the specific changes made in this merge request. This section can include bullet points, code snippets, or screenshots to illustrate the modifications.

Related Issues

If the merge request is related to any specific issues or feature requests, provide links to those issues. This establishes a clear connection between the code changes and the project’s overall goals.

Additional Notes

This is an optional section where you can include any extra information that might be relevant. For instance, if certain parts of the codebase are impacted by these changes, you can mention them here.

Creating the Template in GitLab

Create Markdown File

Start by creating a Markdown file that will serve as your merge request description template. You can use any text editor to create the file under .gitlab/merge_request_templates inside your project directory_._

This is sample templates:

.gitlab_merge_request_templates/Default.md

### Description  
This merge request addresses, and describe the problem or user story being addressed.  

### Changes Made  
Provide code snippets or screenshots as needed.  

### Related Issues  
Provide links to the related issues or feature requests.  

### Additional Notes  
Include any extra information or considerations for reviewers, such as impacted areas of the codebase.  

### Merge Request Checklists  
- [ ] Code follows project coding guidelines.  
- [ ] Documentation reflects the changes made.  
- [ ] I have already covered the unit testing.

.gitlab_merge_request_templates/Release.md

### Description  
This merge request addresses, and describe the problem or user story being addressed.  

### Release Document  
Provide a link to the release document.  

### Additional Notes  
Include any extra information or considerations for reviewers, such as impacted areas of the codebase.  

### Merge Request Checklists  
- [ ] Code follows project coding guidelines.  
- [ ] Documentation reflects the changes made.  
- [ ] I have already covered the unit testing.  
- [ ] Verify that the release changes have passed by QA.

.gitlab_merge_request_templates/Hotfix.md

### Issue  
Provide a link to the original issue or bug report.  

### Problem  
Describe the critical issue or bug being addressed.  

### Solution  
Explain the fix or solution implemented.  

### Changes Made  
Provide code snippets or screenshots as needed.  

### Additional Notes  
Include any extra information or considerations for reviewers, such as impacted areas of the codebase.  

### Merge Request Checklists  
- [ ] Code follows project coding guidelines.  
- [ ] Documentation reflects the changes made.  
- [ ] No new issues introduced.  
- [ ] Tested and approved by QA.

Upload the Template

Add and commit the Markdown file to your Git repository. You can do this through your preferred Git client or command line interface. For example:

git add .  
git commit -m "Add merge request description templates"  
git push origin master

Test Your Template

To test whether your template works as expected or not, create a new merge request in your project. You should see the template sections populated with the content you defined when you start writing the merge request description.

Conclusion

Simplifying the merge request description template in Gitlab can significantly enhance the efficiency of the code review process and improve collaboration among developers. By providing consistent and relevant information, you empower reviewers to provide meaningful feedback and make informed decisions about integrating changes. Remember that while templates provide a helpful structure, each merge request’s description should still be tailored to the specific context of the changes being proposed. With well-organized and informative merge request descriptions, your development team can work more effectively and produce high-quality code.

That’s pretty much it!

Follow me online

X (Twitter in past) https://x.com/gaundergod
Blog https://www-terrnit.vercel.app/articles
YouTube https://www.youtube.com/channel/UC-Xu_hPhWucbV06VeyyIZig
Telegram https://t.me/it_with_kotovsky

Setting Up a Nuxt 3 Project with ESLint, TypeScript, and Tailwind CSS

Gleb Kotovsky — Sun, 24 Mar 2024 16:35:36 +0000

Introduction

Nuxt.js is a robust and versatile framework that is primarily used for building server-rendered applications with Vue.js. In this comprehensive guide, we're going to delve into the process of setting up a Nuxt 3 project template. This template will be integrated with ESLint, TypeScript, and Tailwind CSS. These tools, when combined, can significantly enhance productivity, enforce a high standard of code quality, and streamline the process of styling.

Pre-requisites

Node (In this example I used the 20.10.0 version, but any older version can work. )
Npm (tested with v7)
Pnpm (but you can use just npm / yarn)

Setting Up Nuxt 3

Nuxt 3 is the latest iteration of the Nuxt.js framework. It comes with a host of significant improvements and innovative features that make the process of Vue.js development more efficient and enjoyable. The setup process for a new project with Nuxt 3 is straightforward.

Firstly, you'll need to install Node.js and npm. These are fundamental to running the Nuxt 3 framework. Once you have these installed, you can create a new Nuxt 3 project using the nuxi@latest command. This command initiates a process that will guide you through the various setup stages, allowing you to customize your project according to your specific needs. In this guide I will use pnpm as package manager. So let’s init our project:

pnpm dlx nuxi@latest init nuxt3-template
cd nuxt3-template
pnpm i && pnpm run dev

First result

After initiation we get a template project on nuxt 3. So let's make it even better

Integrating ESLint and TypeScript

ESLint is a widely recognized tool that identifies and reports on patterns found in ECMAScript/JavaScript code. The integration of ESLint can drastically improve the quality of your code, and helps to prevent potential bugs from cropping up in the future.

On the other hand, TypeScript is a strongly typed superset of JavaScript that adds static types. It's an invaluable tool that helps to detect errors early during the development phase, thus saving time and resources.

To add these to your Nuxt project, you'll need to install the necessary dependencies and then implement the appropriate configurations in your project's settings. With the ESLint and TypeScript integrations, your development environment becomes more robust by enforcing good coding practices and type safety

# Add eslint module and typescript to nuxt project
pnpm install -D eslint eslint-plugin-vue@latest 

pnpm add -D @nuxtjs/eslint-module

pnpm install -D typescript @typescript-eslint/parser@latest @typescript-eslint/eslint-plugin@latest

Update nuxt.config.ts file:

// nuxt.config.ts

export default defineNuxtConfig({
    devtools: { enabled: false },
    modules: [
      '@nuxtjs/eslint-module'
    ]
})

Create .eslintrc.cjs file and add these lines of code:

// .eslintrc.cjs

module.exports = {
    root: true,
    parser: "vue-eslint-parser",
    parserOptions: {
      parser: {
            ts: "@typescript-eslint/parser"
      }
    },
    env: {
      node: true,
      browser: true
    },
    extends: [
      "plugin:vue/vue3-recommended"
    ],
    rules: {
      "no-trailing-spaces": ["warn"],
      "prefer-promise-reject-errors": "off",
      "vue/no-v-html": "off",
      "no-trailing-spaces": ["warn"],
      "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
      "vue/multi-word-component-names": ["error", {
            ignores: ["error", "Error"]
      }]
    },
    ignorePatterns: ['dist', 'node_modules', 'build', 'coverage', 'docs', 'test'],
    overrides: [
      {
            files: ["components/**/**/*.vue"],
            rules: { "vue/multi-word-component-names": "off" }
      }
    ]
}

If eslint doesn’t work the first time, you will need to delete node_modules and install the project again.

After these steps, the project will already have a configured eslint, which also acts as a formatter

Incorporating Tailwind CSS

Tailwind CSS is a utility-first CSS framework that offers an unprecedented level of customization. It allows developers to build responsive designs with relative ease. To include Tailwind CSS in your Nuxt project, you need to install it as a project dependency.

Once installed, you should create a Tailwind config file. This file is crucial as it allows you to customize your design according to your project's needs. Following this, you need to update your Nuxt config file to include Tailwind CSS in your project's build step.

One of the main advantages of Tailwind CSS is that you can write custom styles directly in your HTML. This reduces the need for separate CSS files and makes your styles easier to manage and maintain

Let’s init tailwind css config file:

pnpm install -D postcss autoprefixer
pnpm dlx tailwindcss init
pnpm add --save-dev @nuxtjs/tailwindcss

Our tailwind.config.js file should look like this:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
        "./components/**/*.{js,vue,ts}",
        "./layouts/**/*.vue",
        "./pages/**/*.vue",
        "./plugins/**/*.{js,ts}",
        "./app.vue",
        "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

And update nuxt.config.ts file:

// nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    devtools: { enabled: false },
    modules: [
        "@nuxtjs/eslint-module",
        // add tailwindcss module
        '@nuxtjs/tailwindcss'
    ],
    // add postcss support for tailwindcss
    postcss: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        }
    }
})

You should also remember to create a root file for tailwindcss

// in project root
mkdir assets/
cd assets
mkdir css/
cd css
touch tailwind.css

/* tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

If you want to see if tailwindcss works just copy this template and add it to app.vue

<!-- app.vue -->
<template>
  <div class="flex flex-col w-full h-screen bg-zinc-950 items-center justify-center">
    <div class="mx-auto">
      <h1 class="text-3xl text-blue-400 font-bold underline">
        Nuxt 3 template
      </h1>
      <ul class="text-white flex flex-col gap-y-3 mt-6 ">
        <li class="hover:text-blue-950">
          <a href="https://www.typescriptlang.org/">Typescript</a>
        </li>
        <li class="hover:text-blue-950">
          <a href="https://eslint.org/">Eslint</a>
        </li>
        <li class="hover:text-blue-950">
          <a href="https://tailwindcss.com/">TailwindCSS</a>
        </li>
      </ul>
    </div>
  </div>
</template>

Conclusion

While setting up a Nuxt 3 project with ESLint, TypeScript, and Tailwind CSS may initially seem like a daunting task, the benefits that these tools bring to the table make the effort worthwhile. They streamline your development process, ensure that your code maintains a high standard of quality, and offer a highly customizable styling solution.

By integrating these tools in your Nuxt project, you can elevate your Vue.js development to the next level, making for a more efficient, enjoyable, and productive coding experience

Check out the Github repo for the entire template!

Until next time, thank you for reading! 🐾