
Hey there, TypeScript fans!

Ever found yourself wrestling with complex types and wishing there was a better way? Well,
buckle up, because we're about to dive into the world of discriminated unions. 🚀

## What Are Discriminated Unions?

Okay, so `discriminated unions` sounds like some fancy computer science term (and yeah, it kind of is), but don't let
that scare you off. Think of them as TypeScript's way of saying, "Hey, this thing can be one of these specific types,
and here's an easy way to figure out which one it is."

It's like having a box of assorted candies, but each candy has a little flag sticking out of it telling you what flavor
it is 🍭. That flag? That's our discriminant. Neat, right?

## How to Create a Discriminated Union

Let's break it down into easy steps:

1. Come up with the different "flavors" your type can be.
2. Give each flavor a special property (our little flag) that says what it is.
3. Throw them all together into one super-type.

Here's what it looks like in action:

```typescript
interface Taco {
  kind: "taco";
  shells: number;
}

interface Burrito {
  kind: "burrito";
  length: number;
}

interface Nachos {
  kind: "nachos";
  toppings: string[];
}

type MexicanFood = Taco | Burrito | Nachos;
```

In this tasty example, `kind` is our special flag (discriminant), and `MexicanFood` is our super-type. Each specific
type
(`Taco`, `Burrito`, `Nachos`) has its own `kind` property that tells TypeScript what it is.

## Why Discriminated Unions Are Awesome

1. **TypeScript becomes psychic**: It can magically figure out which specific type you're dealing with. No more guessing
   games!

2. **Your code tells a story**: Anyone reading your code can quickly understand what's going on. It's like leaving good
   comments, but better.

3. **Catch mistakes before they happen**: TypeScript can warn you if you forget to handle a case. It's like having a
   really attentive proofreader.

4. **Your IDE becomes smarter**: Better autocomplete suggestions? Yes, please!

## Discriminated Unions in Action

Let's see how we can use our `MexicanFood` type:

```typescript
function getCalories(food: MexicanFood): number {
  switch (food.kind) {
    case "taco":
      return food.shells * 200; // TypeScript knows it's a Taco!
    case "burrito":
      return food.length * 100; // It's definitely a Burrito here
    case "nachos":
      return food.toppings.length * 50; // Nacho time!
  }
}
```

TypeScript's got your back here. It knows exactly what properties are available in each case. Pretty cool, huh?

## Pro Tip: Don't Forget Any Cases!

Want to make sure you've covered all your ? Here's a neat trick:

```typescript
function assertNever(x: never): never {
  throw new Error("Unexpected food: " + x);
}

function getCalories(food: MexicanFood): number {
  switch (food.kind) {
    case "taco":
      return food.shells * 200;
    case "burrito":
      return food.length * 100;
    case "nachos":
      return food.toppings.length * 50;
    default:
      return assertNever(food); // TypeScript will complain if you miss a case
  }
}
```

> We will discuss the `assertNever` function in a future post.

If you add a new type of food but forget to update `getCalories`, TypeScript will give you a heads-up. It's like having
a friendly reminder bot!

## Discriminated Unions of Tuples

Sometimes, you might want to use a discriminated union with tuples. Here's how you can do it:

```typescript
type User = { id: number, name: string }; // User type
type APIResponse = [success: true, data: User] | [success: false, error: string]; // Tuple type

function handleResponse(response: APIResponse): void {
  const [success, data] = response;

  if (success) {
    const { id, name } = data; // TypeScript knows it's a User!
    console.log(`User ${name} with ID ${id} found!`);
  } else {
    //  TypeScript knows it's an error string!
    console.error(`Error: ${data}`);
  }
}
````


## Discriminated Unions and Destructuring
Discriminated unions are awesome, but they're not perfect. One of the main drawbacks is that you can't use them with destructuring.

```typescript
function getCalories({ kind, shells, length, toppings }: MexicanFood): number {
  // Error: Property 'shells' does not exist on type 'MexicanFood'.
  // Error: Property 'length' does not exist on type 'MexicanFood'.
  // Error: Property 'toppings' does not exist on type 'MexicanFood'.
}
```

So, if you need to destructure your object, you'll have to do it the more explicit way:

```typescript
function getCalories(food: MexicanFood): number {
  switch (food.kind) {
    case "taco":
      const { shells } = food; // TypeScript knows it's a Taco! And you can destructure here
      return shells * 200;
    case "burrito":
      const { length } = food;
      return length * 100;
    case "nachos":
      const { toppings } = food;
      return toppings.length * 50;
  }
}
```

## Wrapping Up

[Discriminated unions](https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#discriminating-unions) in TypeScript are like the Swiss Army knife of type management. They help you write code that's
easier to understand, harder to mess up, and just plain cooler.

Next time you're dealing with a bunch of related but different types, give discriminated unions a shot. Your future
self (and your teammates) will thank you!

Happy coding, and may your types always be discriminated! 🚀✨


Discover how discriminated unions in TypeScript can help you write cleaner, safer, and more expressive code. Learn what they are, how to use them, and why they're awesome!

Discriminated Unions in TypeScript: The Secret Sauce for Better Code


## Astro.js Image Component

When I built [my linktree](https://links.shramko.dev/) website I forgot to use [Image component](https://docs.astro.build/en/guides/images/) in
Astro.js.<br></br>I used the `img` tag instead. So after learning about the Image component in Astro.js, I decided to
add it.

```tsx
<Image
  src={UserProfileImage}
  densities={[1, 2]}
  width="160"
  height="160"
  quality="max"
  alt="Serhii Shramko is eating pizza."
/>
```

And what do you think? It's works locally, but when I deployed it on Vercel, I got an error.

<Image src="astro-image-error.png" alt="Astro Image doesn't work on Vercel" />

## How to Fix the Error

Searching... 🔎

Powerful ChatGPT?<br></br>
No, I found the solution on old and good [GitHub](https://github.com/withastro/astro/issues/5253).<br></br>
And a little bit of [documentation](https://docs.astro.build/en/reference/errors/missing-sharp/).

```javascript:astro.config.mjs
// Update astro.config.mjs with image service

export default defineConfig({
  image: {
    service: sharpImageService(),
  }
});
```

```bash
// Install sharp package
pnpm add sharp
```

Done and deployed. Now it works perfectly on Vercel.

<Image src="astro-image.png" alt="Astro Image works on Vercel" />

How I built my linktree website you can read in my [previous article](/blog/linktree).


Learn how to create an image component in Astro.js and deploy it on Vercel correctly.

Astro.js Image Component on Vercel


<Image src="linktree.jpeg" alt="My linktree" priority />

**1 hour** of work and I have my own link tree website with Astro.js and Vercel on my own subdomain.

Check out the final result: [links.shramko.dev](https://links.shramko.dev/)

## Why Astro.js?

I [wrote about Astro.js](/blog/astro), and I was impressed by its performance and ease of use.
<abbr title='In my humble opinion'>IMHO</abbr>, Astro one of the most promising and fast-growing static site generators out there.

<Image src="astro-chart.jpg" alt="Astro Framework chart on State of JS" />

### Speed and Performance

Try to check my website on [PageSpeed Insights](https://pagespeed.web.dev/analysis/https-links-shramko-dev/uemqqap32n?form_factor=mobile) and you will see that it is fast and efficient.

<Image src="lighthouse.png" alt="My webstite metrics on Google lighthouse" />


## Setting Up the Project

I started by creating a new Astro project:

```bash
pnpm create astro@latest
```

You can read small article about why I use [pnpm](/blog/pnpm) 🤘.

## Data for the Link Tree

First of all I created a data file with my links. I used a simple JSON structure:

```json:data/user.json
{
  "name": "Serhii Shramko",
  "profession": "Senior Software Engineer at MacPaw",
  "links": [
    {
      "url": "https://shramko.dev/",
      "icon": "url",
      "title": "Personal Portfolio",
      "description": "All my latest news and blog posts"
    },
    {
      "url": "https://github.com/Shramkoweb",
      "icon": "github",
      "title": "Github Profile",
      "description": "My Github"
    }
  ]
}
```

This approach allows me to easily add, remove, or update links without changing the HTML structure.

## Layout and File Structure

Astro.js allow use simple file structure. And for this project I don't need complex structure. I created an index page:

```jsx:pages/index.astro
---
import Layout from '../layouts/Layout.astro';
import Profile from '../components/Profile.astro';
import List from '../components/List.astro';
// Simple component that renders the main layout, the profile, and the list of links.
---

<Layout title="Link tree | Serhii Shramko">
    <main class="container" id="container">
        <Profile />
        <List />
    </main>
</Layout>
```

```jsx:components/Link.astro
---
import Instagram from "./icons/instagram.astro";
import Linkedin from "./icons/linkedin.astro";
import Url from "./icons/url.astro";
import Youtube from "./icons/youtube.astro";
import Pdf from "./icons/pdf.astro";
import Github from "./icons/github.astro";

interface Props {
    icon: string;
    title: string;
    description: string;
    url: string;
}

const { icon, title, description, url } = Astro.props;
---

<a href={url} class="link" target="_blank">
    <span class="link__icon">
        {icon === 'instagram' && <Instagram />}
        {icon === 'linkedin' && <Linkedin />}
        {icon === 'url' && <Url />}
        {icon === 'youtube' && <Youtube />}
        {icon === 'github' && <Github />}
        {icon === 'pdf' && <Pdf />}
    </span>

    <div class="link__content">
        <h2 class="link__title">{title}</h2>
        <p class="link__description">{description}</p>
    </div>
</a>
```

Astro.js allows you to create components from svg code. I created a separate component for each icon:

```jsx:components/icons/github.astro
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 20 20"></svg>
```

## Analytics

Almost done. Just add Vercel Analytics to the project.

<Image src="astro-analytics.jpg" alt="Analytics on vercel" />

```bash
pnpm add @astrojs/vercel
pnpm add @vercel/analytics
```

```js:astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

// https://astro.build/config
export default defineConfig({
    output: 'server',
    adapter: vercel({
        webAnalytics: { enabled: true }
    }),
});
```

## Deploying to Vercel

[Vercel makes deploying](https://vercel.com/docs/frameworks/astro) Astro projects a breeze. Here's how I did it:

1. I pushed my project to a GitHub repository.
2. I connected my Vercel account to my GitHub account.
3. In the Vercel dashboard, I clicked "New Project" and selected my link tree repository.
4. Vercel automatically detected that it was an Astro project and suggested the correct build settings.
5. I clicked "Deploy" and waited for the magic to happen!

## Custom Domain with Vercel Subdomains

<Image src="vercel-domain.jpg" alt="Domain on vercel" />


To use my custom domain with Vercel, I followed these steps:

1. In the Vercel project settings, I navigated to the "Domains" section.
2. I added my custom domain: `links.shramko.dev`.
3. Done! Vercel automatically set up the necessary DNS records for me.

## Conclusion

Building a link tree with Astro.js and deploying it on Vercel was a smooth and enjoyable process. I spent no more than
an hour and got a fast, efficient, and visually appealing website that and try new technologies.

Sounds great, right? 🌲


Learn how to build a fast, efficient link tree website using Astro.js, deploy it with Vercel, set up a custom subdomain, and implement Vercel Analytics for performance insights.

Building a Link Tree with Astro.js and Vercel: A Step-by-Step Guide


<Image src="conventional-commits.jpg" alt="Conventional Commits. A close up of a text description on a computer screen." />

I first came across Conventional Commits during my time at [MacPaw](/about), but initially, I didn't give much thought
to these unique commit messages.
It wasn't until recently that I took a closer look and realized how much more efficient and organized they make the
development process.

Here’s why you might want to give them a try too! 😃

## What Are Conventional Commits?

Conventional Commits is a specification that provides a simple, structured convention for commit messages.
It allows to write messages that are easy to read and maintain, and which convey the specific intent behind each
change.

The conventional commit message format is straightforward. It starts with a **type**, optionally followed by a **scope
**, and a
short **description**. For example:

```bash
feat(login): add authentication with JWT
```

In this example:

- `feat` is the type of the commit, indicating a new feature.
- `login` is the scope, specifying the part of the project that is affected.
- `add authentication with JWT` is the short description of the change.

## Why Use Conventional Commits?

Using Conventional Commits offers several key benefits:

- `Consistency`: Standardized commit messages ensure that everyone on the team follows the same format, which enhances
  readability and reduces ambiguity.
- `Automation`: Tools can automatically generate change logs, version numbers, and releases based on the structured
  commit messages.
- `Collaboration`: Clear and descriptive commit messages help team members understand the history and context of
  changes, improving collaboration.
- `Compliance`: Adhering to a standardized format helps in meeting the guidelines and best practices of many open-source
  projects.

## Types of Conventional Commits

There are several predefined types of Conventional Commits that help categorize the nature of each change. Each type
indicates a specific kind of modification, making it easier to understand the impact of the commit. Here are the most
commonly used types:

- **feat**: A new feature for the user.
- **fix**: A bug fix for the user.
- **chore**: Changes that don't modify src or test files, such as updating build tasks.
- **docs**: Documentation-only changes.
- **style**: Changes that do not affect the meaning of the code (e.g., formatting, missing semicolons, etc.).
- **refactor**: A code change that neither fixes a bug nor adds a feature.
- **perf**: A code change that improves performance.
- **test**: Adding or updating tests.
- **build**: Changes that affect the build system or external dependencies (e.g., gulp, npm).
- **ci**: Changes to CI configuration files and scripts (e.g., CircleCI, Travis).
- **revert**: Reverts a previous commit.

## Cheat Sheet for Conventional Commits

<Image src="conventional-commits-cheatsheet.png" alt="Conventional Commits Cheatsheet" />

| Type     | Description                | Example                          |
|:---------|:---------------------------|:---------------------------------|
| feat     | New feature                | feat(ui): add dark mode          |
| fix      | Bug fix                    | fix(api): resolve login issue    |
| docs     | Documentation only changes | docs(readme): update setup guide |
| style    | Code style changes only    | style(css): format CSS classes   |
| refactor | Code refactoring           | refactor(auth): optimize logic   |
| perf     | Performance improvement    | perf(database): optimize queries |
| test     | Adding tests               | test(routes): add unit tests     |
| chore    | Build tool/config changes  | chore(deps): bump dependencies   |
| ci       | Continuous Integration     | ci(travis): update config        |
| revert   | Revert previous commit     | revert: rollback last change     |

## Examples of Conventional Commits

Understanding the theory behind Conventional Commits is one thing, but seeing how they are applied in real-world
scenarios can be extremely helpful. Below are some examples illustrating how to write effective, clear, and standardized
commit messages.

> Here example of commits from [my GitHub](https://github.com/Shramkoweb/Portfolio/commits/develop/)


### Example 1: Adding a New Feature

**Commit Message**:

```bash
feat(auth): add OAuth 2.0 authentication
```

**Explanation**:

**Type**: `feat` (indicates a new feature). <br/>
**Scope**: `auth` (specifies that the change is related to authentication). <br/>
**Description**: `add OAuth 2.0 authentication` (brief summary of the change).

### Example 2: Fixing a Bug

**Commit Message**:

```bash
fix(profile): resolve issue with avatar upload
```

**Explanation**:

**Type**: `fix` (indicates a bug fix). <br/>
**Scope**: `profile` (specifies that the change affects the profile feature). <br/>
**Description**: `resolve issue with avatar upload` (briefly describes the problem and solution).

### Example 3: Updating Documentation

**Commit Message**:

```bash
docs(readme): update installation instructions
```

**Explanation**:

**Type**: `docs` (indicates a documentation change). <br/>
**Scope**: `readme` (specifies the README file). <br/>
**Description**: `update installation instructions` (details the specific update).

### Example 4: Refactoring Code

**Commit Message**:

```bash
refactor(utils): simplify the date parsing logic
```

**Explanation**:

**Type**: `refactor` (indicates a code change that neither fixes a bug nor adds a feature). <br/>
**Scope**: `utils` (specifies that the change pertains to utility functions). <br/>
**Description**: `simplify the date parsing logic` (briefly describes the refactoring).

### Example 5: Performance Improvement

**Commit Message**:

```bash
perf(db): optimize query execution time
```

**Explanation**:

**Type**: `perf` (indicates a performance improvement). <br/>
**Scope**: `db` (specifies that the change affects the database). <br/>
**Description**: `optimize query execution time` (summarizes the performance enhancement).

### Example 6: Adding or Updating Tests

**Commit Message**:

```bash
test(router): add unit tests for routing module
```

**Explanation**:

**Type**: `test` (indicates test-related changes). <br/>
**Scope**: `router` (specifies the routing module). <br/>
**Description**: `add unit tests for routing module` (briefly describes the tests added).

### Example 7: Maintenance or Chore

**Commit Message**:

```bash
chore(deps): upgrade lodash to version 4.17.21
```

**Explanation**:

**Type**: `chore` (indicates maintenance or chores). <br/>
**Scope**: `deps` (specifies that the change pertains to dependencies). <br/>
**Description**: `upgrade lodash to version 4.17.21` (details the specific update).

### Example 8: Continuous Integration Configuration

**Commit Message**:

```bash
ci(circleci): add build step for linting
```

**Explanation**:

**Type**: `ci` (indicates changes to CI configuration). <br/>
**Scope**: `circleci` (specifies the CI service being configured). <br/>
**Description**: `add build step for linting` (briefly describes the new CI step).

### Example 9: Reverting a Previous Commit

**Commit Message**:

```bash
revert: remove OAuth 2.0 authentication

This reverts commit abc123.
```

**Explanation**:

**Type**: `revert` (indicates the commit is a revert). <br/>
**Scope**: None (reverts don't usually need a scope). <br/>
**Description**: `remove OAuth 2.0 authentication` (describes what is being reverted).
Body: This reverts commit abc123. (provides context by specifying the commit being reverted).

## Using Conventional Commits in Projects

Incorporating Conventional Commits into your projects can significantly improve code quality and team collaboration.
Here’s a step-by-step guide on how to start using Conventional Commits in your projects.

### Step 1: Educate Your Team

Before adopting Conventional Commits, ensure that everyone on your team understands its benefits and guidelines. Share
resources, conduct workshops, or organize short training sessions to help everyone get up to speed.

### Step 2: Set Up Commit Message Linting

To enforce the Conventional Commits standard, you can use tools
like [commitlint](https://github.com/conventional-changelog/commitlint) and [husky](https://typicode.github.io/husky/).
These tools help ensure that
all commit messages adhere to the predefined format.

Example Configuration:

#### Install Dependencies:

```bash
npm install --save-dev @commitlint/config-conventional @commitlint/cli husky
```

#### Configure Commitlint:

Create a new file named `commitlint.config.js` in the root of your project and add the following content:

```js
module.exports = {
  extends: ['@commitlint/config-conventional'],
};
```

#### Set Up Husky Hooks:

The `init` command simplifies setting up husky in a project. It creates a `pre-commit` script in `.husky/` and updates
the prepare script in `package.json`. Modifications can be made later to suit your workflow.

```bash
npx husky init
```

### Step 3: Use Tools and Libraries

Conventional commits can be parsed by tools, and a very nice use-case is that of generating release changelogs.

<Image src="changelog.png" alt="Changelog created from Conventional commits on GitHub page" />

#### Semantic Release:

- Automates the whole package release workflow including determining the next version number, generating the release
  notes, and publishing the package.
- [Semantic Release Documentation](https://semantic-release.gitbook.io/semantic-release)

#### Commitizen:

- A tool that prompts you to fill out the commit message with a CLI, ensuring you follow the Conventional Commits
  standard.
- [Commitizen Documentation](https://github.com/commitizen/cz-cli)

### Step 4: Continuous Integration and Continuous Deployment (CI/CD)

Integrate Conventional Commits with your `CI/CD` pipeline to automate tasks such as generating changelogs and
versioning.

Here’s how you can do it:

#### Changelog Generation:

- Use tools like standard-version to generate changelogs automatically.
- [Standard Version Documentation](https://github.com/conventional-changelog/standard-version)

#### Versioning and Releasing:

- Automate versioning and releasing using tools like Semantic Release.
- Define release steps in your CI configuration (e.g., GitHub Actions, Travis CI).

Example GitHub Actions Configuration for Semantic Release:

```yaml
name: Release
on:
  push:
    branches:
      - main
jobs:
  release:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v2
      - name: Install Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 14
      - name: Install Dependencies
        run: npm install
      - name: Run Semantic Release
        run: npx semantic-release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
```

## Conclusion

I hope this blog post has inspired you to delve into conventional commits.

Initially, conventional commits might seem a bit odd, and you might find yourself questioning the format as you make
commits. However, they soon become second nature, and you’ll appreciate their impact on your software engineering
practices.


Discover how Conventional Commits can enhance your work and project's readability.

Conventional Commits enhance your coding practices


## Introduction

<Image src="pnpm-logo.png" alt="pnpm logo on gay background" />

I found article from Vercel
about [Projects using pnpm can now be deployed with zero configuration](https://vercel.com/changelog/projects-using-pnpm-can-now-be-deployed-with-zero-configuration)
and I wanted to try it.

## Why Migrate to pnpm?

Before diving into the migration process, it’s important to understand why pnpm is beneficial:

1. **Speed** 🚀: pnpm installs dependencies faster than npm by using a unique package linking mechanism.
2. **Disk Space** 🔎: It saves disk space by using a global store and hard links.
3. **Consistency** 💡: pnpm ensures that dependencies are installed in a way that is more consistent with the version
   specified in your `package.json`.

## Installation of pnpm

First, you need to install pnpm globally. You can do this by running:

```bash
brew install pnpm
```

## Migration Steps

### 1. Clean the Project

Remove the `node_modules` directory and the `package-lock.json` file. This step is crucial to ensure that there are no
leftover artifacts from npm that might interfere with pnpm.

```bash
rm -rf node_modules package-lock.json
```

### 2. Initialize pnpm

Run the following command to initialize pnpm in your project directory:

```bash
pnpm install
```

This command will create a `pnpm-lock.yaml` file and install all the dependencies listed in your `package.json`.

### 3. Verify Dependency Installation

Check that all dependencies have been installed correctly by running:

```bash
pnpm list
```

This command lists all the installed dependencies and their versions. Make sure that there are no missing or outdated
packages.

<Image src="pnpm-list.png" alt="pnpm list command result in terminal" />

## Updating Scripts

### 1. Update npm Scripts

In your `package.json`, update any npm scripts to use pnpm where necessary. For example, if you have a script for
installing dependencies, change it from:

```json
"scripts": {
"install": "npm install"
}
```

to:

```json
"scripts": {
"install": "pnpm install"
}
```

### 2. Update CI/CD Pipelines

If your project uses CI/CD pipelines, ensure that the build scripts and installation commands are updated to use pnpm.
For example, in a [GitHub Actions  with pnpm](https://pnpm.io/continuous-integration) workflow, you might update the
step as follows:

```yaml
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'pnpm'
      - name: Install
        run: pnpm i
      - name: Run Tests // All your CI commands
        run: pnpm run test
```

## Handling Issues and Troubleshooting

During the migration, you might encounter some issues.

> Error: Unable to locate executable file: pnpm. Please verify either the file path exists or the file can be found
> within a directory specified by the PATH environment variable. Also check the file mode to verify the file is
> executable.

I stuck with this error when I tried to run the `pnpm` command in GitHub Actions.

The solution was to use the `pnpm/action-setup@v4` before `actions/setup-node@v4`.
So simply just copy the [above code](#2-update-cicd-pipelines) and paste it in your `.yml` file.

## Conclusion

This migration helped me to reduce the time of deployment by **44%** and the size of `node_modules` by **5%**.

<Image src="vercel-deployment.png" alt="Deployment time on vercel dashboard. Around 1 seccond" />

More info how my blog works you can find there [How my site works under the hood](./introducing-the-new-shramko.dev)


Learn how to efficiently migrate your project from npm to pnpm with this guide.

How to Migrate Your Project from npm to pnpm and save 44% deployment time: A Step-by-Step Guide


Small tasks that we put off can accumulate and ultimately consume much more of our time and energy. One such small yet important task is unsubscribing from annoying email newsletters and notifications.

When you receive a new email with an unnecessary newsletter, it's better to decide to unsubscribe from it right away. Yes, it may take a couple of minutes, but in the future, you'll save yourself a lot of time and nerves by getting rid of constant distractions.

Just like with task automation: when you set up a project once, the time invested in that process will pay off in the future by reducing routine tasks and increasing productivity.

Don't forget that small tasks, if postponed, can turn into a big to-do list. And then you'll have to spend much more time and effort to deal with them. This can become a cause of procrastination and worsen your efficiency.

So, don't procrastinate unsubscribing from newsletters. Take a couple of minutes [[atomic habits](https://jamesclear.com/atomic-habits)] now and get rid of unnecessary distractions in the future.

To make it easier for you to deal with unnecessary newsletters and notifications, here are a few useful resources:

- **[Unroll.me](https://unroll.me/):** This service helps you quickly unsubscribe from multiple newsletters simultaneously, saving you time and effort.

- **[Mailstrom](https://mailstrom.co/):** Allows you to quickly and efficiently manage your email inbox by helping you sort and delete unwanted emails.


Save time by unsubscribing from email newsletters promptly

Opt-Out of Email Newsletters Now for a Clutter-Free Inbox


<Image src="keys.jpg" alt="Keys on white background" />

Hello everyone!

Today, we are going to walk through the process of adding [SSH keys](https://www.ssh.com/academy/ssh-keys) to a GitHub
account.

Before we begin, make sure you have Git installed on your system. If you haven't done this already, head over to
the [Git website](https://git-scm.com/downloads), download the latest version, and install it.

Here is a step-by-step guide:

### Step 1: Checking for Existing SSH keys

Before creating new SSH keys, check if you already have any pre-existing keys. Open your Git terminal or command line
and type:

```bash
$ ls -al ~/.ssh
```

<Image src="ssh.jpg" alt="macOS terminal with .ssh folder" />

This command lists all the files in your .ssh directory. If you don't find any, you can proceed to generate a new one.

Your SSH keys might use one of the following algorithms:

- ⛔️ DSA: It’s unsafe and even no longer supported since OpenSSH version 7, you need to upgrade it!
- 🥴 RSA: It depends on key size. If it has 3072 or 4096-bit length, then you’re good. Less than that, you probably want
  to
  upgrade it. The 1024-bit length is even considered unsafe.
- 👌 ECDSA: It depends on how well your machine can generate a random number that will be used to create a signature.
  There’s also a trustworthiness concern on the NIST curves that being used by ECDSA.
- 🥳 Ed25519: It’s the most recommended public-key algorithm available today!

### Step 2: Generating a New SSH key

In your terminal, paste the following command:

```bash
$ ssh-keygen -t rsa -b 4096 -C "shramko.dev@gmail.com"
```

Replace `shramko.dev@gmail.com` with the email address you used to create your GitHub account. Then, you will be
prompted to "Enter a file in which to save the key," - press Enter to accept the default file location.

### Step 3: Adding Your SSH key to the ssh-agent

Make sure the `ssh-agent` is running:

```bash
$ eval "$(ssh-agent -s)"
```

Then, add your new SSH key to the ssh-agent:

```bash
$ ssh-add ~/.ssh/id_rsa
```

Note: replace "id_rsa" with the name of your key if you have used a different one.

### Step 4: Adding the SSH key to Your GitHub Account

1. Go to your GitHub account settings.
2. Click on 'SSH and GPG keys' in the menu on the left-hand side.
3. Click on 'New SSH Key'.
4. Title it appropriately, then copy the SSH public key to the 'Key' input.

To copy the SSH key, go back to your terminal and type:

```bash
$ clip < ~/.ssh/id_rsa.pub
```

Paste the key into the 'Key' input on GitHub, then click 'Add SSH Key'.

### Step 5: Testing the Connection

Return to your terminal and type:

```bash
$ ssh -T git@github.com
```

<Image src="gh.jpg" alt="Testing the Connection with GitHub in macOS terminal" />

You should see a message welcoming you: "Hi [Your GitHub username]! You've successfully authenticated, but GitHub does
not provide shell access."

You've now successfully added an SSH Key to your GitHub account.


Learn how to add SSH keys to your GitHub account. Boost your account's security and ease your workflow by securely connecting your local machine to your GitHub repositories.

Adding SSH Keys to Your GitHub Account


<Image src="html.jpg" alt="White smartphone on two softbound books" />

## HTML Class Naming Conventions with BEM Methodology: Enhancing CSS Naming Conventions

As a web developer, you understand the importance of keeping your codebase clean and maintainable. One of the crucial
aspects of achieving this goal is following HTML class naming conventions.

In this article, we'll delve into the world of HTML class naming conventions, with a specific focus on
the [BEM](https://www.educative.io/answers/what-is-a-css-class-naming-convention) (Block,
Element, Modifier) methodology.
We'll explore how this approach enhances CSS naming conventions, improves code readability, and makes your codebase more
organized.

### Understanding the Importance of HTML Class Naming Conventions

Effective HTML class naming conventions are vital for several reasons:

1. **Readability:** Well-structured class names make your HTML and CSS easier to understand, even for developers who
   didn't write the code.

2. **Maintainability:** Properly named classes simplify the process of making changes or additions to your code,
   reducing the risk of breaking existing styles.

3. **Collaboration:** Naming conventions facilitate collaboration among team members, making it easier to work on the
   same codebase.

4. **Scalability:** Consistent class naming conventions are essential for managing large projects and ensuring they
   remain scalable.

### BEM Methodology: A CSS Class Naming Convention

BEM, which stands for Block, Element, Modifier, is
a [popular CSS class naming convention](https://en.bem.info/methodology/naming-convention/). It provides a structured
and consistent approach to [naming](https://getbem.com/naming/) classes. Let's break down the components of BEM:

#### 1. **Block**

A block is a standalone component that represents a high-level element or a module on a web page. It's usually a
container for one or more elements within it.

```html

<div class="block">
  ...
</div>
```

#### 2. **Element**

An element is a part of a block and is semantically tied to it. It is named using a double underscore (`__`) as a
separator.

```html

<div class="block">
  <div class="block__element">
    ...
  </div>
</div>
```

#### 3. **Modifier**

A modifier is used to change the appearance, behavior, or state of a block or element. It's named using a double
hyphen (`--`) as a separator.

```html

<div class="block">
  <div class="block__element">
    ...
  </div>
</div>

<div class="block block--modifier">
  ...
</div>

<div class="block__element block__element--modifier">
  ...
</div>
```

### Examples of BEM Methodology in Action

Let's see how BEM methodology applies to real-world examples:

#### Navigation Menu

```html

<nav class="navigation">
  <ul class="navigation__list">
    <li class="navigation__item">
      <a class="navigation__link" href="#">Home</a>
    </li>

    <li class="navigation__item navigation__item--active">
      <a class="navigation__link" href="#">About</a>
    </li>
  </ul>
</nav>
```

In this example, the block is the `navigation`, and its elements and modifiers are clearly defined, making it easy
to understand and style.

#### Article Card

```html

<article class="article-card">
  <header class="article-card__header">
    <h2 class="article-card__title">An Exciting Blog Post</h2>
  </header>
  
  <div class="article-card__content">
    <p class="article-card__paragraph">...</p>
  </div>
  
  <footer class="article-card__footer article-card__footer--featured">
    <a class="article-card__link" href="#">Read More</a>
  </footer>
</article>
```

In this example, the `article-card` block contains elements like `header`, `content`, and `footer`. The `footer` block
also has a modifier indicating that it's featured.

### Enhancing HTML Element Selection

By adhering to BEM methodology, you not only improve naming conventions for CSS but also enhance HTML element selection.
This structured approach to naming classes makes it easier to target specific elements when applying styles.

### CSS Properties and Background Colors

CSS properties and background colors become more manageable with BEM. You can quickly identify and update styles for
individual elements, maintaining consistency throughout your web page.

### In Conclusion

Incorporating BEM methodology into your HTML class naming conventions not only enhances CSS naming conventions but also
improves the overall quality of your code. The structured approach ensures that your codebase remains clean, organized,
and easily understandable. By adopting these practices, you can create web pages that are more maintainable,
collaborative, and scalable, promoting a seamless web development experience.

Embrace BEM and watch your HTML and CSS codebase flourish, all while adhering to effective naming conventions for your
HTML elements and CSS selectors.

For further reading on CSS and HTML best practices, consider checking out these additional resources:

- [CSS Naming Conventions on MakeUseOf](https://www.makeuseof.com/css-class-and-id-best-naming-practices/)
- [FreeCodeCamp's CSS Naming Conventions Guide](https://www.freecodecamp.org/news/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849/)
- [Scaler's CSS Class Naming Convention Article](https://www.scaler.com/topics/css-class-naming-convention/)
- [StackOverflow Discussion on CSS Class Naming Conventions](https://stackoverflow.com/questions/7927193/css-class-naming-convention)
- [HackerNoon's Article on CSS Organization and Naming Conventions](https://hackernoon.com/best-practice-in-css-organisation-and-naming-conventions-4d103ujy)
- [Dev.to Article on CSS Naming Conventions](https://dev.to/ziizium/css-naming-conventions-5gd6)
- [LinkedIn Discussion on HTML Class and ID Naming](https://www.linkedin.com/advice/1/how-do-you-name-html-classes-ids-skills-html)

These references will provide you with comprehensive insights into web development best practices, ensuring you're
equipped with the knowledge to create outstanding web pages.

If you're looking for more examples and guidelines for BEM class name you can find it on my snippet page
about [Common CSS Class Names](/snippets/common-css-classes).


Discover the art of crafting clean and organized HTML class names while enhancing CSS naming conventions. Learn how to create maintainable, scalable, and SEO-friendly code with the latest best practices.

Advanced HTML Class Naming Strategies for CSS Efficiency

<Image src="astro.jpg" alt="Astro Framework Logo" />

Astro is a framework for building static sites and web applications. It is built on top of modern web technologies like
JavaScript, HTML, and CSS, and uses a component-based architecture to make it easy to build and maintain complex web
projects. With Astro, you can build websites and applications that are fast, efficient, and easy to scale.

## Key Features

Astro offers several key features that make it a powerful tool for building modern web projects.
These include:

- **Performance**: Astro is designed to be fast and efficient, with built-in optimizations that help to reduce page load
  times and improve overall site performance.
- **Ease of use**: Astro is designed to be easy to use, with a simple and intuitive syntax that makes it easy to create
  complex web projects.
- **Themes**: Astro has an impressive array of ready-made [themes](https://astro.build/themes/) and templates to get
  started quickly.
- **Zero JS, by default**: No JavaScript runtime.
- **Component-based** architecture: Astro uses a component-based architecture that makes it easy to build and maintain
  complex web projects.
- **Template directives**: Astro's template directives make it easy to create reusable components that can be used
  throughout your site or application.
- **Built-in CMS functionality**:  Tailwind, MDX, and 100+ other integrations to choose from.
- **UI-agnostic**: Supports React, Preact, Svelte, Vue, Solid, and more.

## Creating Your First Astro Project

To create your first Astro project, you'll need to install the Astro CLI. You can do this by running the following
command:

```shell
# create a new project with npm
npm create astro@latest
```

Then navigate to the project directory and start the development server by running the following commands:

```shell
npm run dev
```

<Image src="astro-dev.jpeg" alt="Astro welcome screen on localhost" />

This will start a live Astro development server, which will automatically rebuild your site as you make changes to your
code.

## File-based routing

One of the key features of Astro is its file-based routing system. With this system, developers can easily create routes
and pages for their websites by simply creating files in the appropriate directories. This makes it easy to create and
manage complex routing structures without the need for additional configuration or setup.

### Static routes

Any `.astro` page elements, as well as Markdown and MDX files (with extensions ".md" and ".mdx"), located in the `
src/pages/` directory, will be automatically transformed into pages on your website. The page's URL will match its path
and file name within the "src/pages/" directory.

```shell
# Example: Static routes for site.com
src/pages/index.astro             -> site.com/
src/pages/about.astro             -> site.com/about
src/pages/about/index.astro       -> site.com/about # Nested folder with index file
src/pages/about/career.astro      -> site.com/about/career
src/pages/articles/1.md           -> site.com/articles/1
```

### Dynamic routes

In an Astro page file, it's possible to define dynamic route parameters within the file name. This allows for the
creation of multiple pages that match the specified parameter.

For instance, by using the file name `src/pages/users/[user].astro`, you can generate a user's page for each user
featured on your blog. The `user` in the file name serves as a parameter that can be accessed within the page.

Because all routes must be determined at build time, a dynamic route must export a `getStaticPaths()` that returns an
array of objects with a params property. Each of these objects will generate a corresponding route.

```md:src/pages/users/[user].astro
---
export function getStaticPaths() {
  return [
    {params: {user: 'Serhii'}},
    {params: {user: 'Roman'}},
    {params: {user: 'Alexander'}},
  ];
}

const { user } = Astro.params;
---

<div>Hello, {user}!</div>
```

## Astro Component Structure

The Astro component consists of two primary components: the Component Script and the Component Template.

```md:src/components/Component.astro
---
// Component Script (JavaScript)
---

```

## Astro slots

The `<slot />` element is a placeholder for external HTML content, allowing you to inject (or “slot”) child elements
from other files into your component template.

By default, all child elements passed to a component will be rendered in its `<slot />`

```md:src/components/Wrapper.astro
---
const { title } = Astro.props
---

<div class="wrapper">
  <h1 class="wrapper__title">{title}</h1>
  <slot />  
</div>
```

```md:src/pages/content.astro
---
import Wrapper from '../components/Wrapper.astro';
---

<Wrapper title="Main Page">
  <p>Here is some stuff.</p>
</Wrapper>
```

## Data Fetching

All Astro components have access to the global [fetch()](https://developer.mozilla.org/en-US/docs/Web/API/fetch)
function in their component script to make HTTP requests to APIs.

This fetch call will be executed at build time, and the data will be available to the component template for generating
dynamic HTML. If SSR mode is enabled, any fetch calls will be executed at runtime.

I use [randomuser.me](https://randomuser.me/) API to this example. Please, read the documentation before.

```md:src/components/User.astro
---
import Avatar from '../components/Avatar.jsx';

const response = await fetch('https://randomuser.me/api/');
const { results } = await response.json();
const [ user ] = results;
---

<h1>{user.name.first} {user.name.last}</h1>
<p>{user.email}</p>


<Avatar picture={user.picture.large} />
```

> Before using React inside Astro add [integration](https://docs.astro.build/en/guides/integrations-guide/react/)

<Image src="astro-dev.gif" alt="Data fetching in Astro" />

You can read more about data fetching in [official documentation](https://docs.astro.build/en/guides/data-fetching/).

## Styles & CSS

You can either compose your own CSS code within an Astro component or bring in your preferred CSS library, such as
[Tailwind](https://github.com/withastro/astro/tree/main/packages/integrations/tailwind). Additionally, Astro supports
sophisticated styling languages like `Sass` and `Less`.

```md:src/components/Component.astro
<style>
  h1 { color: orange; }
</style>
```

Astro supports a wide amount of popular styling techniques out of the box:

- Import a local stylesheet
- Use a \<style\> block anywhere in `.astro` files and the CSS will be scoped to that component
- [CSS modules](https://css-tricks.com/css-modules-part-1-need/)
- [CSS Preprocessors](https://docs.astro.build/en/guides/styling/#css-preprocessors) [Sass/Less/Stylus]

> The [styling doc](https://docs.astro.build/en/guides/styling/) has more detail.

## Template Directives

By default, a UI Framework component is not hydrated in the client. If no client:* directive is provided, its HTML is
rendered onto the page without JavaScript.

### client:load

- **Priority**: High
- **Useful for**: UI elements that require immediate interactivity and should be visible right away

> Load and hydrate the component JavaScript immediately on page load.

```jsx
<BuyButton client:load />
```

### client:idle

- **Priority**: Medium
- **Useful for**: UI elements with lower priority that do not require immediate interactivity

> Load and hydrate the component JavaScript once the page is done with its initial load.

```jsx
<BuyButton client:idle />
```

### client:visible

- **Priority**: Low
- **Useful for**: UI elements with low priority can be positioned either far down the page or require significant
  resources to load. In case the user never sees such elements, it would be preferable not to load them at all

> Load and hydrate the component JavaScript once the component has entered the user’s viewport.

```jsx
<ImageCarousel client:visible />
```

### client:media

- **Priority**: Low
- **Useful for**: Elements that might only be visible on certain screen sizes.

> Loads and hydrates the component JavaScript once a certain CSS media query is met.

```jsx
<Sidebar client:media="(max-width: 1024px)" />
```

### client:only

Skips HTML server rendering, and renders only on the client.

```jsx
<ReactComponent client:only="react" />
<SvelteComponent client:only="svelte" />
<Component client:only="vue" />
```

## Do you need to learn the Astro?

At the [moment](https://2022.stateofjs.com/en-US/libraries/rendering-frameworks/), Astro is considered a very
interesting framework that most people want to learn and understand. So be the first to figure it out 🚀.

<Image src="astro-state.jpeg" alt="Astro framework interest on stateofjs" />

## Useful Links

If you're interested in learning more about Astro, here are some useful links to get you started:

- [Astro home page](https://astro.build/)
- [Astro documentation](https://docs.astro.build/en/getting-started/)
- [Astro GitHub repository](https://github.com/withastro/astro)
- [Are SPAs better than MPAs? | HTTP 203](https://www.youtube.com/watch?v=ivLhf3hq7eM)
- [Astro usage in npm and ratings](https://bestofjs.org/projects/astro)

Astro is a new Javascript framework, so discover what makes it special and what are its core features.

Exploring the Astro Framework: A Comprehensive Guide


<Image src="node-post.jpg" alt="Laptop with cone on screen with bloored background" />

[NVM](https://github.com/nvm-sh/nvm), or Node Version Manager, is essential for managing multiple versions of Node.js on
our development environment.
[Node.js](https://nodejs.org/en) is a JavaScript-based web technology, that allows developers to write server-side code
using JavaScript.

By using NVM to manage different versions with ease, developers can keep their environment up-to-date with the best
tools and achieve their desired results with ease.

In this article, we’ll be looking at how to install NVM with Brew and verify it worked properly. Additionally, we’ll
take a look at why we need NVM, a useful NVM cheatsheet, and how to install NVM on Windows, Linux, and MacOS.

## What is NVM?

Simply put, it is a software that allows you to install and manage different versions of Node.js on your system. You can
also switch easily between them, making it ideal for keeping your development environment updated.

## Why Do We Need NVM?

NVM is essential for managing multiple versions of Node.js on our systems. By using NVM to manage and switch between
different versions, we can make sure our environment is always up-to-date with the latest version. This allows us to
take advantage of the newest tools available in the Node.js ecosystem.

Additionally, NVM helps us become more efficient as developers. With NVM, we can quickly switch between different
versions of Node.js without having to reconfigure our environment and restart our terminal.

## How to Install NVM with Brew

Installing NVM with [Brew](https://brew.sh/) is a fairly straightforward process.

First, you’ll need to install Brew, which you can do simply by entering this on your terminal:

```shell
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

Once Brew is installed, you can install NVM by entering `brew install nvm` on your terminal.
This command will download the latest version of NVM for your system, including the necessary libraries and packages.

```shell
brew install nvm
```

### Verify It Worked

Once you’ve installed NVM with Brew, you can verify that it worked by entering `nvm —-v` on your terminal. This command
will show you the version of NVM you’re currently running.

```shell
nvm —-v

#Node Version Manager (v0.39.3) // It's my version of NVM
```

## NVM Cheatsheet

Using NVM can be intimidating at first. To help, here’s a helpful NVM cheatsheet:

```shell
- nvm install 8.0.0                     #Install a specific version number
- nvm use 8.0                           #Use the latest available 8.0.x release
- nvm run 6.10.3 app.js                 #Run app.js using node 6.10.3
- nvm exec 4.8.3 node app.js            #Run `node app.js` with the PATH pointing to node 4.8.3
- nvm alias default 8.1.0               #Set default node version on a shell
- nvm alias default node                #Always default to the latest available node version on a shell
- nvm uninstall [<version>]             #This command will uninstall a specific version of Node.js

- nvm install node                      #Install the latest available version
- nvm use node                          #Use the latest version
- nvm install --lts                     #Install the latest LTS version
- nvm use --lts                         #Use the latest LTS version
```

## How to Install NVM on Windows

Installing NVM on Windows is slightly more involved than with Linux or macOS. To do so, you’ll need to have the [Windows
Subsystem for Linux](https://learn.microsoft.com/en-us/windows/wsl/install) (WSL) installed. Once you have WSL
installed, you can use Brew to install NVM just as you would with Linux or macOS.

## How to Install NVM on Linux

The easiest way to install NVM on Linux is to use Brew. Simply open your terminal and then enter `brew install nvm`.

Before it install Brew 🍻

## Recap

Hopefully this article has helped you get a better understanding of NVM and how to install it on a variety of systems.
Installing and managing multiple versions of Node.js is essential for staying up-to-date with the best tools and
achieving better results.

With NVM, you’ll be able to easily switch between different versions and keep your development
environment updated.



NVM, or Node Version Manager. What is it and why we should use it?

Managing Node Versions Made Easy with Node Version Manager (NVM)


<Image src="browsers.jpg" alt="Different browsers logo on gradient background" />

During site development, we usually test our site only in the browser installed on our computer, but in the world of
browsers there are dozens, and maybe even thousands, of versions.

Therefore, cross-browser development and testing are considered a good tone in site development.

## Cross-browser development

Cross-browser development is when your site works not only in the latest Google Chrome, but also in Firefox, Safari,
Opera and Microsoft Edge, plus mobile browsers and tablets.

There are many methods and ways for such development, such
as [vendor prefixes](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix), [polyfills](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill),
responsive design and [much more](https://ishadeed.com/article/cross-browser-development/).

I will write about all this in the next article, and today we will talk only about cross-browser testing and tools.

## Cross-browser testing

But how to check that the site you created looks and works the same on different browsers and devices?

The first thought that comes to mind is to install all your browsers on your computer and check everything there, but
there are several limitations here:

- Browser versions ( Usually you install the latest version )
- Operating systems ( You will not be able to install Safari on Windows )
- Devices ( How to check that your site works on an old iPhone )

All these questions are solved by the tools that we will discuss with you today.

## Browserstack

What is Browserstack? It is cross browser testing tools that help us to test our sites on real devices and operating
systems remotely. From Windows to macOS and iPhone.

<Image src="browserstack.jpg" alt="Browserstack main page UI" />

### Device test

Browserstack allows you to test your site on different devices. To do this, it is enough to select the device and
browser you need and that's it, everything is ready for testing.

<Image src="pixel-pro.jpg" alt="Google Pixel 7 testing screen in Browserstack" />


The screenshot shows that the site is not just running in an emulator, but is a real device (Google Pixel 7Pro) with a
serial number.

> Serial Number - 2B101FDH30XXXX

### Testing with different OS

Remember those green fields on the Windows XP? In just a couple of clicks, you can start a real computer
and test your site without installing Windows ☠️.

<Image src="windows-xp.jpg" alt="shramko.dev website on Windows XP" />

### Multi browser testing

If you want to quickly see how the site looks on many devices and browsers, you can
take [screenshots](https://www.browserstack.com/screenshots) of the pages you want.

<img src="/static/images/screenshots.gif" alt="Animated image with how site can look on browserstack app"/>

Yes, I know that my site does not work on IE. I did it on purpose. [IE 11 Must die](https://death-to-ie11.com/) 👾

### Browserstack developer tools

Sometimes bugs appear in a specific version of a browser or on a device, so you may not only need to look at the site
visually and click on it, but also open the developer tools in the browser and try to find the bug and fix it.

Browserstack can help with this. The DevTools tab opened familiar developer tools such as `Console`, `Network` and
others.

<Image src="dev-tools.jpg" alt="Developer tools" />

At this moment, several options are supported on the mobile phone:

- Safari developer tools
- Chrome developer tools

More on the desktop:

- Firefox developer tools
- Safari developer tools
- Chrome developer tools
- Internet Explorer developer tools

### Local testing

It is also possible to launch not only by URL, but also a local site on localhost.

To do this, you need to update the BrowserStackLocal application and follow
the [instructions](https://www.browserstack.com/docs/live/local-testing).

### Browserstack alternatives

Unfortunately, I've only worked with this tool and don't have the experience to recommend anything else, but you can
always [look at the competitors](https://www.g2.com/products/browserstack/competitors/alternatives) and try it
yourself.


Cross-browser testing and how to test your site with Browserstack

Mastering Cross-Browser Compatibility: A Comprehensive Guide to Testing


Very often, cloud database services such as [neon.tech](https://neon.tech/) allow you to connect via URL.
That is, without credentials such as `user`, `password`, etc.

## Connection details

### Connection URL

It's [official PostgreSQL format for connection URLs](https://www.postgresql.org/docs/current/libpq-connect.html#LIBPQ-CONNSTRING)

<Image alt src="postgresql-connection-string.png" priority={true} alt="S.Shramko personal site screenshot"/>

### Base URL and path

Here's an example of a base URL and path structure using uppercase placeholder values:

```text
postgresql://USER:PASSWORD@HOST:PORT/DATABASE
```

<Image alt src="db-table.png" priority={true} alt="S.Shramko personal site screenshot"/>

## How this site connects to the database

### Store your credentials in .env

Store your credentials in your `.env` file.

```shell
PGHOST='<endpoint_hostname>:<port>'
PGDATABASE='<dbname>'
PGUSER='<username>'
PGPASSWORD='<password>'
ENDPOINT_ID='<endpoint_id>'
```

where:

- `endpoint_hostname` the hostname of the branch endpoint. The endpoint hostname has an ep- prefix and appears similar
  to
  this: **ep-tight-salad-272396.us-east-2.aws.neon.tech**
- `dbname` is the name of the database. The default Neon database is neondb
- `user` is the database user
- `password` is the database user's password, which is provided to you when you create a project
- `endpoint_id` is the ID of the branch endpoint that you are connecting to. The endpoint_id has an ep- prefix and
  appears
  similar to this: **ep-tight-salad-272396**

### Use prisma.io to connect Postgres

```js
// You can create DATABASE_URL in your code
const DATABASE_URL = `postgres://${PGUSER}:${PGPASSWORD}@${PGHOST}/${PGDATABASE}`;
```

```shell
# Or better to use .env file
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
  referentialIntegrity = "prisma"
}
```

### Use Datagrip to connect Postgres

You can use same credentials like `HOST`, `PORT`, `USER`, `PASSWORD`, `DATABSE` for connection to Database with
DataGrip.

<Image alt src="db-datagrip.png" priority={true} alt="S.Shramko personal site screenshot"/>




How to connect postgres database with URL

Establishing Database Connections: Understanding the Postgres Connect URL


<Image src="fruits.png" alt="ES modules structure diagram" priority={true} />

## Syntax

Arrays are zero-indexed ordered lists of values. They are a convenient way to store a set of related elements of the
same type (such as numbers or strings), although an array can contain multiple types of elements, including other
arrays.

```js
// An array containing numbers
const numberArray = [0, 1, 2, 3, 4, 5];

// An array containing different data types
const mixedArray = [1, 'chicken', false];
```

## Creating an Array

The easiest way to create an array is to use array literals - `[]`, as in the example above.

```js
const fruits = ['🍎', '🍐', '🍊', '🍋', '🍉', '🍓'];
```

With the Array class by using the new keyword and passing in the elements as arguments:

```js
const fruits = new Array('🍎', '🍐', '🍊', '🍋', '🍉', '🍓');
```

Though, because the effect is exactly the same, it
is [preferable to use the literal method](https://google.github.io/styleguide/jsguide.html#features-arrays-ctor) for
simplicity

## Accessing the Elements of an Array

Array elements are ordered by index values, starting at 0:

- Index 0 has the first element
- Index 1 has the second element
- Index n-1 has the nth element
- Index array.length-1 has the last element

```js
//              [0]   [1]   [2]  [3]   [4]   [5]
const fruits = ['🍎', '🍐', '🍊', '🍋', '🍉', '🍓'];

// Get first element of array
console.log(fruits[0]); // 🍎

// Get third element of array n-1
console.log(fruits[2]); // 🍊

// Get last element of array
console.log(fruits[fruits.length]); // 🍓
```

## Array methods and properties

Arrays provide a lot of methods and properties.

### Array properties

The Array does not have a lot of property 😂.

#### Array length

The `length` property is used to know the amount of items in your array.

```js
const apples = ['🍎', '🍎', '🍎'];

// Length of an array
console.log(apples.length); // logs 3
```

### Array methods

For these examples I use this sample data:

```js:DATA_SAMPLE
const employees = [
  {
    name: 'Serhii',
    age: 29
  },
  {
    name: 'Anna',
    age: 20
  },
  {
    name: 'Roman',
    age: 27
  },
  {
    name: 'Julia',
    age: 25
  },
  {
    name: 'Mykola',
    age: 35
  }
];
```

[//]: # (TODO ADD EXAMPLE OF MY ARR)

#### Add & remove items from array

Methods that add and remove items from the beginning or the end:

- employees.push(...items) – adds items to the end
- employees.pop() – extracts an item from the end
- employees.shift() – extracts an item from the beginning
- employees.unshift(...items) – adds items to the beginning

#### Find element in array

The `.find()` method will return the **_first element_** in the array that matches a test you provide.

```js
const employees = [/* See DATA_SAMPLE */]

// Find employe with name 'Serhii'
const serhii = employees.find((employe) => employe.name === 'Serhii');

// or with object destructuring
const serhii = employees.find(({ name }) => name === 'Serhii');
```

#### Transform elements in array

The `.map()` method will apply a given function to every item in your array and give you a **_new array with those
values_**.

```js
// Transform employees array to new array of names.
// I use object destructuring in this and future examples
const names = employees.map(({ name }) => name);
```

#### Filter elements in array

The `.filter()` method takes your array and removes items that don't pass a test you give it, and return new array.

```js
// Keep employees who are younger than 25
const youngEmployees = employees.filter(({ age }) => age < 25);
```

#### Merge two arrays to one

The `.concat()` method is used to merge two or more arrays, or concat new array to old. This method does not change the
existing arrays, but instead returns a new array.

```js
const evenNumbers = [2, 4, 6];
const oddNumbers = [1, 3, 5];

const allNumbers = evenNumbers.concat(oddNumbers); // [ 2, 4, 6, 1, 3, 5 ]
```

#### Join each element in array

The `.join()` method creates and returns a new string by concatenating all elements in an array.

```js
// Before .join() we must transform each object in array to string
const foematedOutput = employees
  .map(({ name }) => name) // Transform employee object to name string
  .join("\n"); // "\n" – add newline after each element
```

```shell:Output
Serhii
Anna
Roman
Julia
Mykola
```

#### Check if every element in array matches some criteria

The `.every()` method checks that every single item in your array matches some criteria.

```js

const isAdult = (employe) => employe.age > 18;

// Check is every our employe older than 18 age
const isEveryEmployeeYoung = employees.every(isAdult); // true
```

#### Check if at least one item in array matches some criteria.

The `.some()` method checks that at least one item in your array matches some criteria by compare function.

```js

const isAdult = (employe) => employe.age > 18;

// Check is every our employe older than 18 age
const isEveryEmployeeYoung = employees.every(isAdult); // true
```

#### Check if at least one item includes in your array

The `.includes()` method checks that at least one item in your array matches some value.

```js
// Check is name "Serhii" includes in employees array
const isSerhiiNameExist = employees
  .map(({ name }) => name) // Transform employee object to name string
  .includes('Serhii'); // true
```

#### Loop through an array

The `.forEach()` method executes a provided function once for each array element.

It doesn't return a value though. It's useful for side effects.

```js
// Print to console name of each employe
employees.forEach((employe) => console.log(employe.name))
```

## Conclusion

The array has many methods, in this article I have shown the most used in my opinion.

Further, you can learn more methods on the pages of MDN Web Docs, so I wish you inspiration and hope this article will
be useful to you.


Mastering JavaScript Arrays: A Beginner's Guide to Essential Concepts


<Image src="phpstorm.png" alt="PhpStorm allow network popup" />

[PHPStorm](https://www.jetbrains.com/phpstorm/) has a bug in macOS where it always asks for permission to
connect to the network on every startup.

So how to fix it?

## Generate a new certificate in Keychain Access

- Open Keychain Access and from the main menu open **Certificate Assistant** then click on **Create a Certificate**
- Fill out the follow:
  - Name: PHPStorm-network (can be any)
  - Identity: Self-Signed Root
  - Certificate Type: Code Signing
  - Leave the checkbox unchecked
- Click save then **Continue**

<Image src="certificate.png" alt="Keychain Access create certificate window" />

## Assign the Certificate to PHPStorm

Open your terminal and enter the following where “PHPStorm” is the name of the Certificate you just created and the
correct location for the PHPStorm.app

```shell
codesign -s "PHPStorm-network" -f /Applications/PhpStorm.app/
```

<Image src="console.png" alt="console codesign window" />

Now restart PHPStorm, and it will ask you one last time to verify the incoming network connections, and after that it
shouldn’t ask you again!


How to fix PHPStorm network connections error on startup

Enabling Network Connections on Startup in PHPStorm


I am a Frontend mentor in a [MacPaw internship](https://macpaw.com/bootcamp) and sometimes my interns get confused 🫠
about how links work in HTML.

So I decided to write a small article about this topic.

## Anatomy of a URL

<abbr title="Uniform Resource Locator">URL</abbr> - is a string that indicates the address of a document or file on the
Internet.

<Image src="anatomy.png" alt="Anatomy of URL" inverted />

### Scheme

The first part of the URL is the scheme, which indicates the protocol that the browser must use to request the resource.
The protocol is usually HTTPS or HTTP, but can also be:

- ftp
- gopher
- file
- mailto
- and others

### Authority

Authority is the domain and optional port like `:80`.

Now you are in `shramko.dev` domain.

### Path to resource or file

```text
/blog/difference-between-absolute-and-relative-url
```

This is the path to the HTML file of this article. You can check it in the console if you write:

```javascript
window.location.pathname
```

## Relative links

These links will always be anchored to the place where they are located.
The browser will use the same protocol and the same domain.

### Relative to the root of the site

An important point, we add `/` to the address at the beginning.

```html
<a href="/about">About page</a>
```

<Image src="root-example.png" alt="Relative to the root of the site example" inverted />

### Relative path from the current document

Similar to the previous example, but
the [path to the file](#path-to-resource-or-file) is saved.

An important point, we do not add `/` to the address at the beginning.

```html
<a href="category/js">JS category of Blog</a>
```

<Image src="location.png" alt="Relative path from the current document example" inverted />

## Absolute links

An absolute link is an address to a file or page as a whole, with all the above-described parts of
the <abbr title="Uniform Resource Locator">URL</abbr>. With such a link, regardless of where this link is located, you
will be able to get to the right resource.

You will be taken to any page or site exactly as indicated by a link of this type:

```html
<a href="https://shramko.dev/dashboard">My Dashboard</a>
```

You can not specify the protocol `http/https`, then the browser will automatically use the protocol on which the site
was loaded.

```html
<a href="//shramko.dev/dashboard">My Dashboard</a>
```

## Anchors (links by #id)

Anchor links are usually used to navigate the current page. For example, a link to a paragraph or heading.

The link below moves you to the section about [Anatomy of URL on this page](#anatomy-of-a-url).

Add `#anatomy-of-a-url` to the current URL in your browser.

## Cheat Sheet

Examples that we discussed today.

<Image src="cheat-sheet.png" alt="Relative and Absolute paths Cheat Sheet" inverted />

## Useful links

- [Article about how my site works under the hood](https://shramko.dev/blog/introducing-the-new-shramko.dev)
- [Site where I drew pictures](https://okso.app/)
- [Nice tutorial about how DNS works](https://howdns.works/)
- [What is a URL](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL)


Everything you need to know about link addresses. Absolute link vs relative

Absolute vs Relative URL: Which One Should You Use


<Image src="grid.jpeg" alt="Retro background with grid lines and neon" />

Often in the life of a web developer, you need to make a grid, but the limitations of the browser (Internet Explorer 😭)
do not allow you to use, for example, [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout).

This is
where [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
comes to the rescue. He is our friend, brother and helper. 🫡

This post is about how to create a flexbox-based grid component in React. The component should be reusable and painless
to configure.

> If you have problems coming up with class names, I have a selection of [common class names](/snippets/common-css-classes#layout) on my blog

## Preparation

Many of those who created components in React are familiar with
the [classnames](https://www.npmjs.com/package/classnames) library, but I want to recommend you the
[clsx](https://www.npmjs.com/package/clsx) library, which is smaller and similar in functionality.

It is not necessary for our component, but it is more comfortable with them:

```shell
npm i clsx
```

## Step 1: Create React component architecture

```jsx
const Grid = ({ children }) => (
  <div className='grid'>
    {children}
  </div>
);
```

```jsx
const GridColumn = ({ children }) => (
  <div className='grid__col'>
    {children}
  </div>
);
```

```jsx
const GridRow = ({ children }) => (
  <div className='grid__row'>
    {children}
  </div>
);
```

## Step 2: Create styles with SCSS

I use the [BEM](https://en.bem.info/methodology/) methodology for styles, as I think it is excellent for component
libraries.

```scss
// Base styles
.grid {
  width: 100%;

  &__row {
    display: flex;
    flex-wrap: wrap;
  }

  &__col {
    flex-grow: 1;
    flex-shrink: 0;

    // For decoration only
    background-color: #bbeffd;
    border: 1px solid #61dafb;
    padding: 15px;
    text-align: center;
    margin-bottom: 25px;
  }
}
```

What about columns logic?

```scss
.grid__row--col-3 > .grid__col {
  width: 33%;
}

.grid__row--col-2 > .grid__col {
  width: 50%;
}
```

It is so ugly. Why we need to do it manually?

Let's try some [Sass](https://sass-lang.com/documentation/at-rules/control/each/) magic 🪄?

```scss
$columnsNumberToWidth: (
  2: 50%,
  3: 33%,
  4: 25%,
  5: 20%,
  6: 16.6%,
);

@each $number, $width in $columnsNumberToWidth {
  .grid__row--col-#{$number} > .grid__col {
    width: $width;
  }
}
```

You can see how SASS code is transformed into CSS [here](https://www.sassmeister.com/):

<Image src="sass.jpeg" alt="sassmeister site screenshot with SCSS and CSS code" />

## Step 3: Add logic to the GridRow component.

```jsx
import clsx from 'clsx';

const GridRow = (pops) => {
  const {
    children,
    columns,
  } = props;

  const rootClasses = clsx('grid__row', {
    [`grid__row--col-${columns}`]: columns,
  });

  return (
    <div className={rootClasses}>
      {children}
    </div>
  );
};
```

## Let's check result

```jsx
<Grid>
  <GridRow columns={6}>
    <GridColumn>1 of 6</GridColumn>
    <GridColumn>2 of 6</GridColumn>
    <GridColumn>3 of 6</GridColumn>
  </GridRow>

  <GridRow columns={6}>
    <GridColumn>1 of 6</GridColumn>
    <GridColumn>2 of 6</GridColumn>
    <GridColumn>3 of 6</GridColumn>
    <GridColumn>4 of 6</GridColumn>
    <GridColumn>5 of 6</GridColumn>
    <GridColumn>6 of 6</GridColumn>
  </GridRow>

  {/* ...  */}
</Grid>
```

<Image src="example-1.jpeg" alt="First example grid screenshot" />

## Recap

Writing components has an endless process ♾.

Next, you can add a dynamic size of each column, column gaps, change the component tag type, breakpoints and so on...

Therefore, below I share additional materials that may be useful:

- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [Flexbox Froggy Game](https://flexboxfroggy.com/)
- [React bootstrap Grid system](https://react-bootstrap.github.io/docs/layout/grid/)




Creating a flexbox-based Grid component with BEM methodology and clsx

Mastering Grid Creation Using Flexbox in React: A Step-by-Step Guide


<Image alt="Astronaut with book in open space. Black background with stars" src="books.jpeg" priority={true} />

> “Knowledge must be shared”.

Developers must keep up with technology trends. So I'd like to share my tried-and-true list of top resources for
learning and maintaining knowledge.

## Courses

- [frontendmasters.com](https://frontendmasters.com/) - one of the best platform for learning Frontend
- [egghead.io](https://egghead.io/) - high quality, concise web development screencasts
- [epicreact.dev](https://www.epicreact.dev/) - probably the best course on React
- [freecodecamp.org/](https://www.freecodecamp.org/) - free verified certifications
- [edx.org](https://www.edx.org/) - courses from top universities (Harvard, MIT and others)
- [ui.dev](https://ui.dev/) - fun and nice courses about frontend ecosystem by Tyler McGinnis
- [coursera.org](https://www.coursera.org/) - learn computer science, business, languages, health, arts by top
  universities and authors
- [udacity.com](https://www.udacity.com/) - advance your mastery of data science and web
- [newline.co](https://www.newline.co/) - everything you need for full-stack development
- [pluralsight.com](https://www.pluralsight.com/) - online education platform that offers courses primarily geared
  toward software developers.
- [scrimba.com](https://v2.scrimba.com/) - interactive courses and tutorials. Watch the video and write the code directly
  online

## Blogs

- [Shramko Serhii](https://shramko.dev/) - my blog about web development
- [Dan Abramov](https://overreacted.io/) - co-author of Redux and Create React App
- [Kent C. Dodds](https://kentcdodds.com/) - React, Testing end more
- [Sarah Drasner](https://sarahdrasnerdesign.com/writing/) - cool blog about animations in web
- [Lea Verou](https://lea.verou.me/) - CSS secrets book author
- [Dr. Axel Rauschmayer](https://2ality.com/) - one of the best blog about JS Core
- [Lin Clark](https://www.code-cartoons.com/) - nice cartoons about development
- [Josh Comeau](https://www.joshwcomeau.com/) - nice tutorials about React and Web
- [Addy Osmani](https://addyosmani.com/blog/) - engineering Manager at Google working on Chrome
- [Sara Soueidan](https://www.sarasoueidan.com/blog/) - one of the best blog about <abbr title="Accessibility">
  A11y</abbr> and HTML

## Challenges

- [leetcode.com](https://leetcode.com/) - probably a better place to practice solving problems
  for <abbr title="Facebook, Amazon, Apple, Netflix and Google">FAANG</abbr>
- [hackerrank.com](https://www.hackerrank.com/) - place where you can prepare for Interviews
- [codewars.com](https://www.codewars.com/) - achieve code mastery through challenge

## YouTube

- [CS50](https://www.youtube.com/c/cs50) - Harvard Computer Science course
- [The Coding Train](https://www.youtube.com/c/TheCodingTrain) - not boring coding ❤️
- [Low Level JavaScript](https://www.youtube.com/c/LowLevelJavaScript) - channel goes deep into the heart of low level
  programming
- [Coding Garden](https://www.youtube.com/c/CodingGarden) - nice realtime coding sessions
- [Google Chrome Developers](https://www.youtube.com/c/GoogleChromeDevelopers) - all you need know about web
- [Computerphile](https://www.youtube.com/user/Computerphile) - videos all about computers and computer stuff

> It seems all for now! Don’t forget to share the link with friends 🫡


Check out a list of the best resources and blogs for developers in 2024.

Highly recommended resources for developers in 2024


## ❌ Problem

In my opinion, one of the most important tasks when writing code is to make it as simple and understandable as possible.
There are even principles in programming aimed at this - [KISS](https://en.wikipedia.org/wiki/KISS_principle).

You can often see such code with a lot of `if`, and `switch` statements in tutorials or answers on StackOverflow:

```js
function handleUserMove(direction) {
  if (direction === 'north') {
    movePlayerTo("north");
  } else if (direction === 'east') {
    movePlayerTo("east");
  } else if (direction === 'south') {
    movePlayerTo("south");
  } else if (direction === 'west') {
    movePlayerTo("west");
  } else {
    console.error("Unknown direction");
  }
}
```

If we had more conditionals who know how long this `if/else` statement could get 🤯, and it's not very dynamic.

We can use a `switch` statement:

```js
function handleUserMove(direction) {
  switch (direction) {
    case "north":
      movePlayerTo("north");
      break;
    case "east":
      movePlayerTo("east");
      break;
    case "south":
      movePlayerTo("south");
      break;
    case "west":
      movePlayerTo("west");
      break;
    default:
      console.error("Unknown direction");
  }
}
```

Although there is a little more code, `switch` itself describes the dispatching process more explicitly, but we write a
lot of static (control) code, and we must not forget about `break`. Too complicated for such a simple task.

## ✅ Solution

So what can we do to simplify it?

```js
const userInputToDirection = {
  north: movePlayer("north"),
  east: movePlayer("east"),
  south: movePlayer("south"),
  west: movePlayer("west")
}

function handleUserMove(direction) {
  userInputToDirection[direction]();
}
```

This option is better than the previous two for several reasons:

- It is shorter
- It is more flexible. Conditional constructs are static code that cannot be changed without rewriting the program
  itself.
- With
  the [Single Responsibility Principle (SRP)](https://www.freecodecamp.org/news/solid-principles-single-responsibility-principle-explained)
  , we have separated the execution function of our `handleUserMove` business logic from the direction determination
  logic.

Conditional constructs are static code that cannot be changed without rewriting the program itself.
But data is a completely different matter.
With this approach, it is easy to add new behavior without changing the application code `handleUserMove` itself.

## Real example

For example, in Next.js applications, you can
configure [next.config.js](https://nextjs.org/docs/pages/api-reference/next-config-js) and the code there looks
like this:

```js
const nextConfig = {
  /* Next.js config options here */
}

let resultConfig;

if (process.env.NODE_ENV === 'development') {
  resultConfig = withBundleAnalyzer(nextConfig);
} else if (process.env.NODE_ENV === 'production') {
  resultConfig = withSentryConfig(nextConfig);
} else if (process.env.NODE_ENV === 'test') {
  resultConfig = nextConfig;
}

module.exports = resultConfig;
```

With new knowledge, we can rewrite it like this:

```js
const nextConfigByEnv = {
  development: withBundleAnalyzer(nextConfig),
  production: withSentryConfig(nextConfig),
  test: nextConfig,
};

module.exports = nextConfigByEnv[process.env.NODE_ENV];
```

Will it look and read much better? I use [dispatch tables](/blog/introducing-the-new-shramko.dev#monitoring-with-sentry) in my projects, and I can say that it is a very convenient.

## Useful links

- [Example in CLI parser app](https://github.com/Shramkoweb/CLI-diff-generator/blob/develop/src/parsers.js#L31)
- [Naming Conventions for Key-Value Maps](https://softwareas.com/naming-conventions-for-key-value-maps/)
- [Dispatch table](https://en.wikipedia.org/wiki/Dispatch_table)


Dispatch Tables in JavaScript: A Clean Code Approach


## The For Loop

There are many ways to iterate in JavaScript, and probably one of the most common is for a loop.

The for statement is a type of loop that will use up to three optional expressions to implement the repeated execution
of a code block.
Let’s take a look at an example of what that means:

```js
for (initialization; condition; final expression) {
  // code to be executed
}
```

```js
// Initialize a for statement with 5 iterations
for (let i = 0; i < 5; i++) {
  // Print each iteration to the console
  console.log(`The number is ${i}`);
}
```

```shell:Output
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
```

But in addition to this `for` loop, there are two other types of for iteration methods we can use: `for...in`
and `for...of`.

## The for...in Statement

The `for...in` statement iterates over
all [enumerable properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)
of an object that is keyed by strings (ignoring one keyed by Symbols), including inherited enumerable properties.

The syntax `for...in` looks like this:

```js
for (const variable in enumerable) {
  // Do something
}
```

For example, to loop through and `console.log` all the values in this `user` Object:

```js
const user = {
  name: 'Serhii',
  age: 29,
  email: 'shramko.dev@gmail.com',
  country: 'Ukraine',
  city: 'Kyiv'
}

for (const key in user) {
  console.log(`user.${key} = ${user[key]}`)
}
```

```shell:Output
user.name = Serhii
user.age = 29
user.email = shramko.dev@gmail.com
user.country = Ukraine
user.city = Kyiv
```

We iterate through each `key` of the `user` Object, and then through this key we get the value
with [Bracket notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors#bracket_notation)
.

### for...in and Objects

`for...in` is probably the easiest way to go through the object and use the key to get the value from it.

### for...in and Arrays

The keys in the array are indexes (numbers).

```js
const creatures = [
  "octopus",
  "squid",
  "shark",
  "seahorse",
  "starfish",
];

for (const index in creatures) {
  // We need access to creatures value by index
  console.log(creatures[index])
}
```

```shell:Output
octopus
squid
shark
seahorse
starfish
```

### for...in and Strings

```js
const oceanCreature = 'Shark';

for (const index in oceanCreature) {
  console.log(oceanCreature[index])
}
```

```shell:Output
S
h
a
r
k
```

## The for...of Statement

The `for...in` statement is useful for iterating over object properties, but to iterate over iterable objects like
arrays and strings, we can use the for...of statement. The `for...of` statement is a newer feature as of ECMAScript 6.

In this example of a `for...of` loop, we will create an array and print each item in the array to the console.

```js
const sharks = ["tiger", "great white", "hammerhead"];

// Print out each type of shark
for (const shark of sharks) {
  // Unlike for...in, we don't need an index now
  // we have immediate access to the element of the array
  console.log(shark);
}
```

```shell:Output
tiger
great white
hammerhead
```

### for...of and Objects

The `for...of` loop doesn't work with Objects because they don't have a [Symbol.iterator] property.
You can try but you will get an error:

```js
"Uncaught TypeError: Object is not iterable"
```

### Iterating over a DOM collection

Iterating over DOM collections like [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList):

```js
const paragraphElements = document.querySelectorAll('p');

for (const paragraph of paragraphElements) {
  // Make all paragraphs red
  paragraph.style.color = 'red';
}
```

## Conclusion

In this post, we understood how for loops work and the difference between `for...of` and `for...in` statements.

Loops are an integral part of any programming language, as they are constantly used in places where you need to perform
the same type of tasks several times.


What is the difference between "for...in" and "for...of"

JavaScript Loops: for...in vs for...of


<Image alt src="my-site.jpeg" priority={true} alt="S.Shramko personal website screenshot"/>

I'm so excited to announce the launch of my brand-new website!

For over 2 month, I worked on a complete rewrite of shramko.dev. I just want to give you an overview of the technologies
and libraries I used to make this site .

## Overview

Here are the [cloc](https://github.com/AlDanial/cloc) stats:

```shell
cloc .                                                                                                  
     200 text files.
      190 unique files.                              
      86 files ignored.

T=0.07 s (2903.5 files/s, 389492.6 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
YAML                             3           2077              0           7816
HTML                            28            405              0           4579
Markdown                        41           1139              5           3593
TypeScript                      79            326             16           3268
XML                             12              0              0            989
JavaScript                      10             47             31            496
CSS                              4             50             10            383
JSON                             6              0              0            204
SVG                              1              0              0             17
Prisma Schema                    1              2              0             12
INI                              1              2              0             11
Bourne Shell                     2              2              0              4
Text                             2              0              0              4
-------------------------------------------------------------------------------
SUM:                           190           4050             62          21376
-------------------------------------------------------------------------------
```

The first commit was
in [3 Jul 2022](https://github.com/Shramkoweb/Portfolio/commit/ce017f5e8e55693f85ec7576de8a82c5b7fad835).

## Key features

- Dark and Light Mode
- [Security headers](https://github.com/Shramkoweb/Portfolio/blob/develop/next.config.js#L13) and [CSP](https://github.com/Shramkoweb/Portfolio/blob/develop/next.config.js#L3)
- Feature post with [meta parsing](https://github.com/Shramkoweb/Portfolio/blame/develop/_posts/dirname-error.md#L7)
- Error page with custom 404 page
- Mobile and Responsive styling with Tailwind
- Dynamic Open Graph tags and Twitter cards from [metadata](https://github.com/Shramkoweb/Portfolio/blob/develop/pages/blog/%5Bslug%5D.tsx#L61)
- Accessibility (try to pass [WCAG 2.1 and WCAG 2.2](https://www.w3.org/WAI/standards-guidelines/wcag/))
- Next.js Api for simple express server
- Realtime updates with SWR

## 💻 Technologies

Here are the primary technologies used in this project:

- [React](https://react.dev/): For the UI
- [Next.js](https://nextjs.org/): Framework for hybrid static & server rendering
- [TypeScript](https://www.typescriptlang.org): Typed JavaScript (necessary for any project you plan to maintain)
- [Prisma](https://www.prisma.io): TypeScript ORM with Zero-Cost Type Safety
- [SWR](https://swr.vercel.app/): Cool stale-while-revalidate hook
- [Jest](https://jestjs.io/): JavaScript Testing Framework
- [Testing Library](https://testing-library.com/): Simple and complete testing utilities
- [Tailwind CSS](https://tailwindcss.com): Utility classes for consistent/maintainable styling
- [Postcss](https://postcss.org/): CSS processor (pretty much just use it for autoprefixer and tailwind)
- [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote): Load mdx content for my site (blog posts)
- [gray-matter](https://github.com/jonschlinkert/gray-matter): Smarter YAML front matter parser
- [Postgres](https://www.postgresql.org/): Most Advanced Open Source SQL Database
- [pnpm](https://pnpm.io/): Fast, disk space efficient package manager and i have [post about it](/blog/pnpm)

Here are the services this site uses:

- [Vercel](https://vercel.com): Platform for frontend frameworks and static sites
- [GitHub Actions](https://github.com/features/actions): Hosted CI pipeline service
- [Heroku](https://www.heroku.com/): Reliable and secure PostgreSQL as a service
- [Checkly](https://www.checklyhq.com/): API & E2E monitoring platform
- [Uptimerobot](https://uptimerobot.com/): Uptime monitoring service
- [Snyk](https://snyk.io/): Developer security platform
- [Sentry](https://sentry.io/welcome/): Error reporting service

## 🍭 The new look

Here's how the [latest design](https://shramkoweb.github.io/homepage/) looked before I updated it.

This is a simple <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets,">
CSS</abbr> site.
No <abbr title="JavaScript">JS</abbr> and frameworks 😂.

<Image src="old-site.jpg" alt="S.Shramko personal old website screenshot"/>

## 🚀 Deploy

Each commit triggers a build and environment (Production | Preview) creation.
And then we start multiple steps:

> I have post about [ESLint with TypeScript](/blog/eslint-with-typescript) 

- ESLint & TypeScript: Linting the project for simple mistakes and Type checking
- Checkly: Running end-to-end tests
- Vercel: Building and deploy website to production and other environments

Once ESLint, TypeScript, Checkly, and the Build all successfully complete, then we can deploy site.

<Image src="deploy.jpeg" alt="Deploy process screenshot on Vercel"/>

## MDX Compilation

`mdx-bundler` & `next-mdx-remote` allows you to extend [remark](https://github.com/remarkjs/remark)
and [rehype](https://github.com/rehypejs/rehype), providing external plugins to hook into the compilation process.

It helps me to convert a link to an external link and one for wrapping images
with [Next Image](https://nextjs.org/docs/pages/api-reference/components/image).

How does it look:

```tsx
import { serialize } from 'next-mdx-remote/serialize';
import remarkGfm from 'remark-gfm';
import rehypeSlug from 'rehype-slug';
import rehypeCodeTitles from 'rehype-code-titles';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import rehypePrism from 'rehype-prism-plus';

export const compileMDX = async (content: string) => serialize(content, {
  mdxOptions: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [
      rehypeSlug,
      rehypeCodeTitles,
      rehypePrism,
      [
        rehypeAutolinkHeadings,
        {
          properties: {
            className: ['anchor'],
          },
        },
      ],
    ],
    format: 'mdx',
  },
});
```

```tsx
import { MDXComponents } from '@/components/mdx-components';

<div className="w-full mt-4 prose dark:prose-dark max-w-none">
  <MDXRemote {...content} components={MDXComponents} />
</div>
```

## Monitoring with Sentry

Monitoring is an essential part of development.
It’s usually one of the first things you’d want to do after setting up an existing project or getting started with a new
one. Without monitoring, it will be challenging to detect issues in your application or how to resolve them.

> There example of some kind of ["dispatch table" pattern](/blog/dispatch-tables).

```tsx
const { withSentryConfig } = require("@sentry/nextjs");

/** @type {import("next").NextConfig} */
const nextConfig = {
  swcMinify: true,
  experimental: {
    images: {
      allowFutureImage: true,
    },
    browsersListForSwc: true,
    legacyBrowsers: false,
  },
  poweredByHeader: false,
  reactStrictMode: true,
};

// dispatch table pattern
const nextConfigByEnv = {
  production: withSentryConfig(nextConfig, {
    silent: true
  }),
  development: nextConfig
}

module.exports = nextConfigByEnv[process.env.NODE_ENV];
```

## Database and Prisma

[Prisma](https://www.prisma.io/nextjs) makes database access easy. With auto-generated and type-safe queries based on
your database schema, it's easier than ever to manage your data.
Whether you have an existing database or you're starting from scratch, Prisma has you covered.

When combining Prisma with Next.js, you can skip the [CRUD](https://www.codecademy.com/article/what-is-crud) boilerplate
and directly query the database.
Less code means less bugs.

### Heroku Postgres

Heroku Postgres gives me all the benefits of PostgreSQL without having to spin up and maintain the databases ourselves.
And it is [easy integrate with PhpStorm](https://www.jetbrains.com/help/phpstorm/how-to-connect-to-heroku-postgres.html)
.

### Type Safety

```sql
model
User {
  id       String  @id @default(cuid())
  email    String  @unique
  password String
  name     String?
}
```

```typescript
type User = {
  id: string
  email: string
  password: string
  name: string | null
}
```

### Querying Data

```typescript
const views = await prisma.views.upsert({
  where: { slug },
  create: {
    slug,
  },
  update: {
    count: {
      increment: 1,
    },
  },
});
```

## Testing

As a developer, you know how important tests are for any production-level project.
Writing tests takes some time, but they will help you in the long run to solve problems in the codebase.

I also [integrate these tests](https://github.com/Shramkoweb/Portfolio/blob/develop/.github/workflows/tests.yml) into
GitHub Actions, so that whenever I deploy to production or make a pull request, tests will run automatically.

My code coverage on <time dateTime="2022-08-28">28 August 2022</time>:

> Update: Test coverage on <time dateTime="2024-09-15">15 September 2024</time>

```shell
------------------------------|---------|----------|---------|---------|-------------------------------
File                          | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s             
------------------------------|---------|----------|---------|---------|-------------------------------
All files                     |   72.54 |    68.75 |   59.52 |   78.19 |                               
 components/blog-post-preview |     100 |       50 |     100 |     100 |                               
  blog-post-preview.tsx       |     100 |       50 |     100 |     100 | 27                            
  index.ts                    |     100 |      100 |     100 |     100 |                               
 components/categories        |     100 |      100 |     100 |     100 |                               
  categories.tsx              |     100 |      100 |     100 |     100 |                               
  index.ts                    |     100 |      100 |     100 |     100 |                               
 components/footer            |     100 |      100 |     100 |     100 |                               
  get-copyright.ts            |     100 |      100 |     100 |     100 |                               
 components/post-reaction     |   96.77 |       75 |     100 |   96.66 |                               
  index.ts                    |     100 |      100 |     100 |     100 |                               
  post-reaction.tsx           |     100 |      100 |     100 |     100 |                               
  use-feedback-reducer.ts     |   93.33 |    66.66 |     100 |   92.85 | 21                            
 components/view-counter      |     100 |       50 |     100 |     100 |                               
  index.ts                    |     100 |      100 |     100 |     100 |                               
  view-counter.tsx            |     100 |       50 |     100 |     100 | 25                            
 lib                          |   72.22 |      100 |   66.66 |     100 |                               
  fetcher.ts                  |     100 |      100 |     100 |     100 |                               
  ga.ts                       |     100 |      100 |     100 |     100 |                               
  types.ts                    |     100 |      100 |     100 |     100 |                               
  utils.ts                    |      50 |      100 |       0 |     100 |                               
 lib/posts                    |   31.11 |        0 |       0 |   37.83 |                               
  api.ts                      |   30.55 |        0 |       0 |   33.33 | 12-51,56-62,68-70,74-78,83-86 
  utils.ts                    |   33.33 |      100 |       0 |      75 | 6                             
 pages                        |     100 |      100 |     100 |     100 |                               
  404.tsx                     |     100 |      100 |     100 |     100 |                               
 pages/blog                   |      75 |       50 |      80 |   72.22 |                               
  index.tsx                   |      75 |       50 |      80 |   72.22 | 109-114                       
------------------------------|---------|----------|---------|---------|-------------------------------

Test Suites: 6 passed, 6 total
Tests:       13 passed, 13 total
Snapshots:   0 total
Time:        1.152 s
Ran all test suites.
```

> Sometimes I use [Browserstack for cross browsing testing](/blog/cross-browser-testing).

## Next.js

Next's framework allows you to build scalable, performant React code without the configuration hassle.

In my team at MacPaw ??, we use it for [CleanMyMac JP](https://cleanmymac.jp/) and other internal projects.

Quick list of why Next.js has been so good for me:

- Zero Config: Automatic compilation and bundling. Optimized for production from the start
- SSG and SSR: It allows you to render your content in different ways, depending on your application's use case. These
  include pre-rendering with Server-side Rendering or Static Generation, and updating or creating content at runtime
  with Incremental Static Regeneration
- Deploy: You can deploy in a few clicks to [Vercel](https://vercel.com)
- SEO: Automatic Static Optimization & Head Component
- React ecosystem: Wide range of tools and npm packages
- Out of the box support: Through webpack, Next provides developers with out-of-the-box support for asset compilation,
  hot reloading and code splitting, which can further speed up development

<Image src="framework.jpeg" width={400} className="mt-4 mb-8 mx-auto rounded-lg" alt="A meme in which a person tries to choose between two red buttons."/>

> I wrote new article about another framework - Astro [here](/blog/astro) and [here](/blog/linktree) 😆.

## Acknowledgements

- The design was inspired by [Lee Robinson](https://github.com/leerob)

## Conclusion

I can't tell you how much I've learned building this website. 🤓

I'm excited about the new design. And I just had fun doing it. I hope you enjoy it too!

The project is developing and still has many unimplemented features, you can see or suggest
them [here](https://github.com/Shramkoweb/Portfolio/issues).


How I built a modern portfolio and a list of technologies used to create it.

Presenting the Revamped shramko.dev: Explore the Exciting Updates!


## Intro

Formatting is one of several issues to consider when writing clean code. There are many other things we have to worry
about as well, but formatting is one of those things that we can adjust right away and set the standard for our project.

## ESLint and TSLint

[ESLint](https://eslint.org/) is statically analyzes your code to quickly find problems. It looks at your code, and
tells you when you're not following the standard that you set in place.

## Installation and setup

```shell
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
```

Next, add the `.eslintrc.json` configuration file to the project root.

```shell
touch .eslintrc
```

In it, use the following start configuration.

```json
{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}
```

## Ignoring files we don't want to lint

```shell
touch .eslintignore
```

Then add the things we want to ignore. In the following code sample, we're ignoring the dist/ folder that contains the
compiled TypeScript code.

```ini
node_modules
dist
```

## Adding a script to package

```json
{
  "scripts": {
    "lint": "eslint . --ext .ts"
  }
}
```

Let's run the following command.

```ini
npm run lint
```

## Eslint Rules

ESLint comes with a large number of built-in rules, and you can add more rules through plugins. You can modify which
rules your project uses either using configuration comments or configuration files. To change a rule setting, you must
set the rule ID equal to one of these values:

- "off" or 0 - turn the rule off
- "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
- "error" or 2 - turn the rule on as an error (exit code is 1 when triggered)

### Adding a rule

To configure rules inside a configuration file, use the rules key along with an error level and any options you want
to use. For example:

```json
{
  "rules": {
    "curly": "error",
    "quotes": [
      "error",
      "double"
    ]
  }
}
```

Rules are added as keys to this rules attribute, and you can usually find basic eslint rules here on their website in the
[rules' documentation](https://eslint.org/docs/latest/use/configure/rules).

## Conclusion

That's all 🎉.

It's very easy to start using `ESlint`, but its contribution to code formatting and saving time is
huge. Therefore, I recommend always using it.

- [Create-React-App with TypeScript, ESLint, Prettier, and Github Actions](https://brygrill.medium.com/create-react-app-with-typescript-eslint-prettier-and-github-actions-f3ce6a571c97)
- [What is ESLint?](https://hackernoon.com/what-is-eslint-how-do-i-set-it-up-on-atom-70f270f57296)


In this post, we'll walk through how to set up linting in your TS project.

Optimizing TypeScript Development with ESLint: A Comprehensive Guide


JavaScript distinguishes _expressions_ and _statements_. A statement is an instruction, an action.

Remember conditions with `if`, `loops` with `while` and `for` — all those are _statements_, because they just perform
actions and control actions, but don't become values.

`Expression` returns (expresses) a value. Each of the following lines contains an expression:

```js
100 // this is a literal that expresses number 100

getUserName() // expresses Serhii

5 + 2 // expresses 7
```

`Statements` produce or control actions, but do not turn into values:

```js
let x; // declare a variable 'x'

function foo() {} // declare a function 'foo'

function bar() {
  return null // return is also a statement
}
```

You can't put statements where expressions are expected. For example, passing a const statement as a function
argument will produce an error. Or trying to assign the if statement to a variable:

```js
let b = if (x > 10) { return 100; };  // error!

console.log(const y);  // error!
```

## Related posts

- [Expressions versus statements in JavaScript](https://2ality.com/2012/09/expressions-vs-statements.html)
- [Expressions - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators)


Understand the important distinction expressions vs statements in JavaScript

JavaScript Expressions vs Statements: What's the Difference?


<Image src="es-module.png" alt="ES modules structure diagram" priority={true} />

## Problem

I ran into this error when using ```__dirname``` in an ES module.

```__dirname``` is an environment variable that tells you the absolute path of the directory containing the currently
executing file, and many Node.js projects use this.

But if you use it inside an ES module, you can't use it because of the infamous "__dirname is not defined in ES module
scope" an error appears.

## Solution

What can you do in this case?

To get the current file directory, we'll want to use a combination of a global variable and a few built-in methods:

- `import.meta.url` to get the current file's as a URL
- `url.fileURLToPath` to change the URL to a path
- `path.dirname` to get the directory name

Using these methods, we can reconstruct the global `__dirname` and `__filename` variables:

```js
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);

const __dirname = path.dirname(__filename);
```

Now you can use `__dirname` as usual:

```js
console.log(__dirname)
```

## Conclusion

Due to the different approaches to modularity in Node.js and EcmaScript, you may encounter such problems.

For further reading, check out
the [Node.js documentation for __dirname](https://nodejs.org/docs/latest/api/modules.html#modules_dirname).


Here is how to fix the "__dirname is not defined in ES module scope" error

Blog23 articles

Articles

Discriminated Unions in TypeScript

How to Build an Astro.js Image Component on Vercel

My personal Linktree with Astro.js and Vercel

Conventional Commits

How to decrease deployment time by 44% with pnpm

Unsubscribe from Email Newsletters Immediately

How to add SSH keys to your GitHub account

Mastering HTML Class Naming: Boosting CSS Efficiency

What is Astro Framework?

Node Version Manager

Cross-browser testing

Postgres connect to database with URL

JavaScript 101: Arrays

PHPStorm Allow Network Connections on Startup

Difference between absolute and relative URL in HTML

How to create a grid with flexbox in React

Essential Tools and Guides Every Developer Should Utilize

Dispatch table in javascript

for...in vs for...of Loops

Introducing the new shramko.dev

How to use ESLint with TypeScript

Expressions vs Statements

How to fix "__dirname is not defined in ES module scope"