
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


<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![img.png](img.png)
```

<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="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


<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

Dive into our comprehensive Tutorial guides for step-by-step tutorials on various tasks and topics.

Tutorial11 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

How to add SSH keys to your GitHub account

Cross-browser testing

Postgres connect to database with URL

JavaScript 101: Arrays

PHPStorm Allow Network Connections on Startup

How to create a grid with flexbox in React