
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

Unsubscribe from Email Newsletters Immediately

<Image src="astro.jpg" alt="" />

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

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

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.

What is Astro Framework?


<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

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


<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="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="terminal with ssh folder" />

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.

How to add 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-menu">
  <ul class="navigation-menu__list">
    <li class="navigation-menu__list-item">
      <a class="navigation-menu__list-item-link" href="#">Home</a>
    </li>
    <li class="navigation-menu__list-item navigation-menu__list-item--active">
      <a class="navigation-menu__list-item-link" href="#">About</a>
    </li>
  </ul>
</nav>
```

In this example, the block is the `navigation-menu`, 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__content-paragraph">...</p>
  </div>
  <footer class="article-card__footer article-card__footer--featured">
    <a class="article-card__footer-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/bem-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.

Mastering HTML Class Naming: Boosting CSS Efficiency


<Image src="node-post.jpg" alt="" />

[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?

Serhii Shramko

Senior Developer at MacPaw

Featured Posts

Unsubscribe from Email Newsletters Immediately

What is Astro Framework?

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

Latest posts

How to add SSH keys to your GitHub account

Mastering HTML Class Naming: Boosting CSS Efficiency

Node Version Manager