
## I love nature!19

I realized that you don't need to be an environmental engineed to make an impact and help with conservation, you can see this in the work I'm putting on as volunteer in environmental non-profits and also the contracts I chose to take as a freelance developer. I also love birding! All pictures you see in this webpage where taken by me. Click on the pics if you wanna learn more about the birds.

## A little bit of history

I'm Paraguayan and I'm currently working as a freelance web developer. I started learning how to code at the end of 2019. I knew I was about to have a lot of free time, and learning how to code is something that I always had on the back of mi mind. I had and still have amazing mentors that really accelerated my career.

But that's just the most recent chapter of my life, before that, I was fully immersed in the music world. I owned a rental company, and I worked as a freelance _audio-guy_. I was fortunate enough to work at the biggest festivals and met a lot of wonderful people along the way.

It's amazing how much overlap I find between both careers, specially with soft skills. Coding is a lot about working together with other people and understanding what customers need.

If I had to choose I would do it all again, but i'm grateful I get another chance to learn a different profession and to meet people from all around the world.

## That's it!

If you're still reading you must really like me. If you want to connect contact me on any of my social media <3.

PD: By the way I use [neovim](https://github.com/tonyjara/my-neovim)


About me


If you ever searched for a beautiful drag and drop for your images, you're in luck. This works with nextjs as well.

## Pre-requisites

Install [Chakra-ui](https://chakra-ui.com/getting-started), [React-dropzone](https://react-dropzone.js.org/) and if you want [Browser-image-compression](https://github.com/Donaldcwl/browser-image-compression).

<iframe
  src="https://codesandbox.io/embed/nameless-breeze-cf20g8?fontsize=14&hidenavigation=1&theme=dark"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="nameless-breeze-cf20g8"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

### If you want to contact me hit me up on <a href="https://twitter.com/tonyjaradev" target="_blank">Twitter</a>


Chakra-ui Drag-n-Drop for images


# Maybe managing your own email server is not the best idea

I know, I know, everyone says you shouldn't deploy an email server, but trust me, I had a good reason for it!
In this blog I'll talk about why I did it, how I did it, and why you shouldn't.

## My good reason

I wanted to get more involved in the community and help out a local nonprofit organization by volunteering. As a software developer, more often than not you are going to find loads of opportunities for projects anywhere you look, and this organization was no exception.

Before I started volunteering, the organization only had one part-time volunteer managing their website and email servers. Everything was done in HTML and, I kid you not, when I asked for access to edit a few things on the website, I was given a link to a Google Drive folder. No Github, no Gitlab, nothing. Every webpage had a copy of the footer, the navbar and other components. To make it worse, the files were hosted in a CPANEL instance on a shared instance of some obscure hosting provider. For those of you that don't know what CPANEL is, it's an app that manages pretty much everything you need for a webpage, sort of like WordPress, but much worse. It included email accounts of all the organization’s employees, board members, and various volunteers. The emails kept going to spam or not working at all, uploading anything new to the website took way too long, and everyone in the organization wanted something different. In my mind there had to be a simple solution, couldn’t be that hard, right?

## How I did it

I started doing some research. I needed to come up with a solution to migrate the email servers before I could even touch the website because if I wanted to change the domain I needed to have the emails as a separate service. I came across what seemed like the easy solution I wanted for an email server. I found [Mail-in-a-Box](https://mailinabox.email/) and deployed it.

## Troubleshooting

The first “gotcha” I discovered in creating an email server is that a lot of companies that offer VMs lock PORT 25, which is the default on a lot of the "make your own email server" apps. Maybe there's another way, but that was where my networking abilities ended. To get around this, I chose DigitalOcean as a provider because they don't care how you use the VM, just that your credit card goes through.

Pro tip: check if the VM's IP address is blacklisted; it turned out a lot of DigitalOcean's IPs are (something I regrettably discovered too late). Normally you wouldn't really care about this, but since the intention was to create an email server, I made sure the IP address was clean before I deployed the Mail-in-a-Box server. You can check if an IP address is blacklisted by visiting this [this](https://mxtoolbox.com/blacklists.aspx) address.

I started running some tests to see if my theory would work and was surprised to see how easy it was. “I'm a genius!” I thought. I happily started migrating everything to the new server, changing the DNS settings, getting rid of the old server and even recording some tutorials for the organization to quickly connect the new email addresses to their favorite email apps on desktop and mobile.

_"We have a new email server!"_

## Where it all went terribly wrong

Email communication in NGOs is extremely important, in some cases it can be their only way to communicate with customers, or in the case of this organization, their donors. An easy way to solve this would've just been to sign up everyone to something like Google Workspace and move on, but the $6 per account price for over 30 accounts was just too much for a nonprofit with a tight budget.

Some of these accounts were shared between several members of the organization (for example, the five members of the board all used the same email account). It turns out this sharing is a huge problem when using POP3 as the protocol for storing and distributing emails.

"_Tony, our donors are asking why we're not responding to their emails_" is not a great thing to hear from a nonprofit that relies solely on donations to operate. I started running some tests to see if I could replicate the problem, and it was a mess. Sometimes the emails would arrive into just one of the linked accounts and no one else would get it, other times no one would receive emails; however, all of the “problem” emails were never stored in the webmail server that Mail-in-a-Box offered. All of those emails were gone.

I'm not going to go into depth about why this happened, but just know if you're using POP3, you should never try to link multiple accounts to one email.

## The solution

I quickly told the team what I learned, changed the passwords of all the shared accounts, and advised them to only check the emails from those accounts through the webmail until I could find a solution. This reestablished the flow of emails and we were safe for the moment.

A few months into the email server being deployed, the organization was awarded with [Microsoft's Grant for Non-profits](https://nonprofit.microsoft.com/). Among the various services this grant offers is Microsoft Exchange Server, so the change was a no brainer. I migrated all of the emails to Microsoft and that was it, no more email issues.

## Conclusion

_Do not. Deploy. Your. Email. Server._

I'm sure that if I kept maintaining the server I would have discovered more problems, so I'm relieved that I don’t have to anymore. Sometimes peace of mind does have a price, so do yourself a favor and don't deploy your own email server.


Don't deploy your email server


# What is progressive enhancement?

In this article I'll try to put together a broader definition of what progressive enhancement is, in regards to all aspects of the web. At least according to me.

Progressive enhancement at it's core is about accessibility, your website should be available to everyone, on all devices.

Have you ever tried to click on a button on a website when it first started loading and got no response? Well that's one of the reasons why we need progressively enhanced websites.

I'll try to break out progressive enhancement through 3 different angles and give my opinion on all of them.

### Browser compatibility

[Internet explorer still has more than 20 million users](https://thesmallbusinessblog.net/internet-explorer-users/) , my granny is probably a part of this group, but hey, a user is a user. Thankfully internet explorer is officially dead and this number is only going to keep going down. Nevertheless, that number shows that there is still a lot to do with regards to browser compatibility.

One of the best tools we have to help with browser compatibility is [polyfills](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill), and even though most modern frameworks do a pretty good job supporting all browsers, it never hurts to double check.

Here is an [awesome repository](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills) with some practical, "no-nonsense" solutions to keep things smooth across browsers.

And if you want to easily test and try things across multiple browsers, I recommend [browserstack](https://www.browserstack.com/).

### UI/CSS

A static button will always be better than no button, that's why whenever we're looking to use the latest and greatest features in CSS it's always a good Idea to check the [can i use](https://caniuse.com/) website.

However, the best advice I can give you when using brand new features is to always have a good fallback. A practical way to achieve this could be wrapping your element on a div with a fallback class. Think of it as a net holding your next-level ui from falling through the cracks.

MDM has a [great article](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) with more information about this.

### Functionality

You should not have to download 5MB of javascript to use the search-bar on a website. Why is it that older websites could achieve this and now it seems like we keep regressing with regards of performance?

To be fair websites are way more complicated than they used to be, but the answer has to do with relying way too much on client side javascript. This means that before we can provide functionality for our ui, the user needs to first have all the pieces of the logic. And of course, in some cases this means downloading 5MB of javascript.

Thankfully the trend these days is to move away from client side javascript and more towards server rendered websites. This gives us a better user experience and helps ship way less javascript to the client.

As of a practical way to achieve progressive enhancement with regards to functionality, it really varies a lot with the intended goal of any website. If you can get away with just static websites, I could not recommend enough [Astro](https://astro.build/), but just as a reference, [in this video](https://www.youtube.com/watch?v=kTg98AcjQN4&t=769s), Kent C. Dodds shows how can achieve just about everything with frameworks like [Remix](https://remix.run/)

### Conclusion

As software developers our mission is to bring our product to everyone, sometimes we tent to forget that not everyone is using the latest computer with the latest OS and browser version. Or maybe we just don't have the time to get into it. So even though these problems are certainly being addressed more and more effectively, I think every developer should always take this concepts into consideration.

Thank you for reading and have an awesome day.


My take on progressive enhancement


**disclaimer: I'm a mac user**

I don't know about you but I love [Obsidian](https://obsidian.md/). It just makes the most sense for everything I do. If you're not familiar with Obsidian, it's a note taking app in which every note you take is a Markdown file. And this is particularly awesome for me because my blog is in [Markdown](https://en.wikipedia.org/wiki/Markdown).

_Obsidian also supports vim ☕_

For a while I was writing my blogs directly on Obsidian, then copy pasting everything into my blog's posts folder. And that was ok, but I was thinking, it would be so cool if I could just write everything once and deploy to my blog.

Doing some research I found out that there are a lot of community plugins that integrate Obsidian with Git. Which is nice, but I feel that handling Git from Obsidian is never going to be as nice as handling it from your IDE, and the thought of having all those extra files just made me sick to my stomach. I just wanted to be able to open my blog folder straight from Obsidian and start writing. That's when it hit me. The answer is [_Symbolic Linking!_](https://en.wikipedia.org/wiki/Symbolic_link)

A symbolic link or a symlink for short is a reference to a file or directory, sort of like aliases but better, if you symlink a folder to a specific place, it doesn't matter if you move that folder, the symlink will remain in place. This allows us to open only the desired folder, which in my case was my posts folder, inside any vault or directory in Obsidian.

This is how you do it:

- Inside your terminal, cd into the directory you want to create the symlink, in my case it was inside my Obsidian vault
- Type _"ln -s "_ , leave a space after the "s" and then drag and drop the folder you want symlink and press enter.
- Done, enjoy a lovely editing experience.

This is an example on how that code would look like in the terminal. DO NOT copy and paste this, you need to replace the path accordingly.

```bash
cd ~/Library/Mobile Documents/iCloud~md~obsidian/Documents/The universe/Personal

ln -s /Users/nytoair/Desktop/web-tonyjara/_posts

```

It's worth mentioning that this will not sync the symlinked folder with your Obsidian account across your devices, which is exactly what I wanted, I'm already relying on Git for versioning on my website. But if that's something you're interested in, I recommend taking a look into [hard links.](https://en.wikipedia.org/wiki/Hard_link)

That's it! Have a good one.


How to open your blog folder from Obsidian


If you're like me and want to be 100% sure on every request you send to your database, then you definitely need to test.

Testing in postgres can be somewhat annoying if you don't know what you're doing. Let me show you the way I do it.

## How does it work?

In order for our tests to be useful we need to be able to load all of our migrations and our configurations every time we start a test. This means we have to reset the db every time we run a test, and this could also affect our staging DB.

Luckily Postgres has a way to quickly create and get rid of DB's leveraging role names and schemas.

All you need to do is pre-configure a few things and you can re-use it for every query you do.

## Installations

### [Follow along with the repo if you wish.](https://github.com/tonyjara/tuto-pg-typescript-nextjs)

- Download and install [Postgres](https://www.postgresql.org/)
- Download [Pgadmin](https://www.pgadmin.org/download/) and create a DB called 'test'
- Create a NextJs project with the following libraries:

```javascript
yarn add node-pg-migrate pg pg-format jest bcryptjs lodash

yarn add -D @types/pg @types/pg-format @babel/plugin-transform-modules-commonjs node-mocks-http ts-jest ts-node @types/jest @types/bcryptjs @babel/runtime
```

- Create a .babelrc file on the root of your project and copy this:

```javascript
//This allows us to use imports on Jest
{
  "presets": ["next/babel"],
  "env": {
    "plugins": {
      "test": ["@babel/plugin-transform-modules-commonjs"]
    }
  }
}
```

## DB Config

Lets create a folder on the root called _dbConfig_, inside we'll create 3 files:

- The first one will be a .env.test file with the following code:

```js
NEXT_PUBLIC_PG_TEST_USER = YOUR_PG_USER;
```

- The second file is pool.ts , This file creates a connection with our db.

Copy the following code:

```ts
//You can later use this code to connect to your prod database.

import pg from "pg";

let pool = null as pg.Pool | null;

const host = process.env.PG_HOST;
const port = Number(process.env.PG_PORT);
const database = process.env.PG_DB_NAME;
const user = process.env.PG_USER;
const password = process.env.PG_PASS;

export const poolConfig: pg.PoolConfig = {
  host,
  port,
  database,
  user,
  password,
};

const myPool = {
  connect: async (options: pg.PoolConfig) => {
    pool = new pg.Pool(options);
    await pool.query("SELECT 1 + 1;");
    return;
  },
};

if (!pool) {
  myPool.connect(poolConfig);
}

export { myPool, pool };
```

- The third file is going to be db_context.

Copy the following code:

```javascript
import { randomBytes } from "crypto";
import { default as migrate } from "node-pg-migrate";
import { PoolConfig } from "pg";
import format from "pg-format";
import { myPool, pool } from "./pool";

//Don't forget to add your localhost user from PG to your .env.test
const test_user = process.env.NEXT_PUBLIC_PG_TEST_USER;

const root_config: PoolConfig = {
  host: "localhost",
  port: 5432,
  database: "test",
  user: test_user,
  password: "",
};

export const db_context = {
  roleName: () => {
    // Randomly generate a role name to connect to PG as
    return "a" + randomBytes(4).toString("hex");
  },
  build: async (roleName: string) => {
    // Connect to PG as usual
    await myPool.connect(root_config);

    // Create new role
    await pool?.query(
      format("CREATE ROLE %I WITH LOGIN PASSWORD %L", roleName, roleName)
    );

    // Create a schema with the same name
    await pool?.query(
      format("CREATE SCHEMA %I AUTHORIZATION %I", roleName, roleName)
    );
    // Disconnect entirely from PG
    await pool?.end();

    // Run migrations in new schema
    await migrate({
      schema: roleName,
      direction: "up",
      log: () => {},
      noLock: true,
      dir: "migrations",
      databaseUrl: {
        host: root_config.host,
        port: root_config.port,
        database: root_config.database,
        user: roleName,
        password: roleName,
      },
      //@ts-ignore
      migrationsTable: undefined,
    });

    // Connect to pg as newly created role

    await myPool.connect({
      host: root_config.host,
      port: root_config.port,
      database: root_config.database,
      user: roleName,
      password: roleName,
    });
    return;
  },
  reset: async () => {
    await pool?.query("DELETE FROM users;");
    return;
  },
  close: async (roleName: string) => {
    // Disconnect from pg
    await pool?.end();

    // Reconnect as our root user
    await myPool.connect(root_config);

    // Delete the role and schema we created
    await pool?.query(format("DROP SCHEMA %I CASCADE;", roleName));
    await pool?.query(format("DROP ROLE %I;", roleName));

    // Disconnect
    return await pool?.end();
  },
};
```

## SQL setup

Let's create a folder called SQL, inside that folder let's create a file called TABLES.sql with the following code:

```sql
CREATE TABLE IF NOT EXISTS users (
     id                   SERIAL PRIMARY KEY,
     email                VARCHAR(256) NOT NULL UNIQUE CHECK (LOWER(email) = email),
     role                 VARCHAR(24) NOT NULL,
     created_at           TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
     updated_at           TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
     password             VARCHAR(128) NOT NULL

);

CREATE TABLE IF NOT EXISTS user_profile (
      id                 SERIAL PRIMARY KEY,
      user_id             INTEGER REFERENCES users(id) ON DELETE CASCADE,
      bio                VARCHAR(512),
      display_name        VARCHAR(64) NOT NULL,
      gender             VARCHAR(32),
      phone              VARCHAR(64),
      profile_photo        VARCHAR(512)

);

```

On that same folder let's create another file called initial_db_structure.ts, this file is going to import the sql files and output them as strings so that we can easily feed them to PG.

Copy the following code inside, keep in mind that your folder structure may be different to the one here:

```javascript
import fs from "fs";
import path from "path";

const tablesPath = path.resolve(__dirname, "./TABLES.sql");

const tables = fs.readFileSync(tablesPath).toString();

export const initial_db_structure = tables;
```

## Migrations setup

For our migrations we're going to use node-pg-migrate to manage the creation and deletion of our tables.

create a script on your package.json:

```json
"migrate": "ts-node node_modules/.bin/node-pg-migrate -j ts",
```

Run the following command:

```bash
yarn migrate create initial
```

This is going to create a folder called migrations with a file inside.
Inside that file, replace it's contents with the following code:

```javascript
import { MigrationBuilder, ColumnDefinitions } from "node-pg-migrate";
import { initial_db_structure } from "../SQL/initial_db_structure";

export const shorthands: ColumnDefinitions | undefined = undefined;

export async function up(pgm: MigrationBuilder): Promise<void> {
  return pgm.sql(initial_db_structure);
}

export async function down(pgm: MigrationBuilder): Promise<void> {
  pgm.sql(`
  DROP TABLE users CASCADE;
  `);
}
```

That's all the setup! Now let's create one api so we can test it:

## Signup API

Inside the pages folder if you don't have it already, create a folder called api. Inside that folder let's create a file called user-signup with the following code:

```javascript
import type { NextApiRequest, NextApiResponse } from 'next';
import bcrypt from 'bcryptjs';
import { merge, snakeCase, mapKeys, camelCase } from 'lodash';
import { pool } from '../../dbConfig/pool';

const camelCaseObjectKeys = (object: any) => {
  return mapKeys(object, (value, key) => camelCase(key)) as any;
};

export default async function userSignup(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    const data = JSON.parse(req.body);

    const { email, password, displayName } = data;

    const hashedPass = await bcrypt.hash(password, 10);

    const user = {
      email,
      password: hashedPass,
      bio: '',
      displayName,
      gender: '',
      phone: '',
      profilePhoto: null,
      userId: 1,
    };

    const response = await pool?.query(
      'INSERT INTO users(email, role, password) VALUES($1, $2, $3 ) RETURNING *;',
      [user.email.toLowerCase(), 'USER', user.password]
    );

    if (response && 'rows' in response) {
      const userId = response.rows[0].id;
      const { bio, displayName, gender, phone, profilePhoto } = user;
      const profile = { bio, displayName, gender, phone, profilePhoto, userId };

      const snaked = Object.keys(profile)
        .map((x) => snakeCase(x))
        .toString();

      const makeProfile = await pool?.query(
        `INSERT INTO user_profile(${snaked}) VALUES($1, $2, $3, $4, $5, $6) RETURNING *;`,
        [bio, displayName, gender, phone, profilePhoto, userId]
      );

      if (makeProfile && 'rows' in makeProfile) {
        const returnedUser = camelCaseObjectKeys(
          merge(makeProfile.rows[0], response.rows[0])
        );
        if ('message' in returnedUser) {
          throw res.status(500).json({ message: returnedUser.message });
        }

        const filteredUser = {
          email: returnedUser.email,
          createdAt: returnedUser.createdAt,
          updatedAt: returnedUser.updatedAt,
          role: returnedUser.role,
          bio: returnedUser.bio,
          displayName: returnedUser.displayName,
        };

        return res.status(200).json({ user: filteredUser });
      }
    }

    return res.status(500).json({ message: 'unexpected' });
  } catch (e: any) {
    if ('message' in e) {
      return res.status(500).json({ message: e.message });
    }
    return res.status(500).json({ message: 'something went wrong' });
  }
}


```

## Tests

Finally! The last thing we need to do is create a folder called test, and inside that folder we'll create a file called signup-test.test.ts with the following code:

```javascript
import { createMocks } from "node-mocks-http";
import { db_context } from "../dbConfig/db_context";
import userSignup from "../pages/api/user-signup";

describe("tests auth functions", () => {
  // eslint-disable-next-line no-unused-vars
  let context;
  const roleName = db_context.roleName();

  beforeAll(async () => {
    context = await db_context.build(roleName);
  });

  beforeEach(async () => {
    await db_context.reset();
  });

  afterAll(async () => {
    await db_context.close(roleName);
  });

  it("tests user signup", async () => {
    const { req, res } = createMocks({
      method: "POST",
      //@ts-ignore
      body: JSON.stringify(mockSignupData),
    });

    await userSignup(req, res);

    const response = JSON.parse(res._getData());

    expect(Boolean(response.user.displayName)).toBe(true);
    expect(response.user.role === "USER").toBe(true);

    expect(res._getStatusCode()).toBe(200);
  });
});

let mockSignupData = {
  email: "test@test.com",
  displayName: "TEST USER",
  password: "asdfasdf",
  confirmPassword: "asdfasdf",
  reCaptchaToken: "asdf",
};
```

And now to run our test add the following script on your package.json:

```json
 "test": "jest --watch",
```

## Conclusions

Testing this way solves a lot of problems. The one caveat to this approach is that you will get a warning when running multiple tests. The only things you need to carry between tests are the beforeAll, afterAll and beforeEach functions.

Hope this was useful and if you wish just [clone the repo](https://github.com/tonyjara/tuto-pg-typescript-nextjs).

### If you want to contact me hit me up on <a href="https://twitter.com/tonyjaradev" target="_blank">Twitter</a>


Testing Postgres on NextJs api's with Jest and Typescript


Understanding path is essential for anyone learning Linux. In this blog we'll learn about what it is and why we need it.

### What is it?

Whenever we're executing commands in the shell like **ls** or even **cd** we're executing binaries that are usually located in the /user/bin directory. This may vary depending on your OS or shell, but what's important to understand is that whenever you write **ls** or **cd**, your shell is going to check in a list of possible places to try to find a match for that command. And that's precisely what the PATH is. PATH is a variable that holds a list of directories separated by semicolons, each of this directories is a possible place for the shell to look for executables.

### Why do we need this?

In a world where path did not exist we would be writing long commands on the shell to execute binaries. Sure, you might be able to alias them. But it's way simpler to just say that everything in a certain directory can be executable, such as the /usr/bin directory.
Also because of security, by default folders such as /usr/bin are protected and you can only write to them with super user permissions. You wouldn't want anyone you don't allow to be messing with your binaries.

### How can I add a PATH?

There are 2 ways of adding a path, a temporary one and a permanent one.

#### Temporary

In the bash scripting language, if you call an existing variable, you use the $ sign. So if you write on your shell **echo $PATH** you're going to see what your current path is.
If we were to type **PATH=~/other/path** on our shell, this would overwrite everything we have on our path. The correct way to add a new path is to reference the previous one first. Like this:

```bash
PATH=$PATH:~/other/path
```

You could keep adding directories just by adding more semicolons. This works great but if you close your terminal and re open it, this changes are going to be **gone**.

#### Permanent

Depending on what shell you're using there will be a file where you can add permanent paths. For **Zsh** this is the ~/.zshrc file and for **Bash** it's the ~/bashrc file. If you open those with any text editor, you can add your path by copying the same path we executed in the shell before. Just don't forget to save the files and source them to update the path. ( You can source them by typing **source ~/.zshrc** or **source ~/.bashrc** on your shell ).

Here's the way I like adding path's to my .bashrc:

```bash
if [ -d ~/other/path ]
then
  PATH=$PATH:~/other/path
fi
```

What this script does is that it checks if the directory exists first, and if it does it ads it to the PATH variable.

### Conclusion

The concept of PATH is not difficult one to understand, even though it might seem so at first. Now that you have acquired this knowledge you're one step closer to achieving hackerman status.

That's it, have a great day.


Understanding what PATH is and why we need it


A Css reset file helps flatten inconsistencies across browsers. The default css configuration is not the same in all browsers and can make your UI vary from browser to browser, this can add up in undesirable ways.

The reason why we still have this issue and there's no standard when it comes to CSS defaults is because there are far too many websites that depend on this defaults and if they changed this, many of them would break. [There's an awesome podcast](https://open.spotify.com/episode/6SYD2Is8dLb73Hua8yKzQw?si=7cad25eb827b4f78) that talks about this if you're interested.

**It's not a bug, it's a feature!** 🐛

Here is a comparison of 4 web browsers without and with the css reset.

<img alt="Pic of 4 browsers showing css" src="/assets/css-reset/no-reset.png" />
<img alt="Pic of 4 browsers showing css" src="/assets/css-reset/with-reset.png" />

If you want a minimal css reset file, you can use this one:

```css
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colors to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colors to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border color to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}
```

If you want a really extensive one I would recommend [this one](https://gist.github.com/DavidWells/18e73022e723037a50d6). Don't forget to import it BEFORE anything else.

That's it, have an awesome day.


What is a CSS Reset file and why do we need it?


This new pseudo-classes dropped in 2022, fairly new but already working in almost all browsers.

**SPECIFICITY** is going to be an important concept to learn before approaching this pseudo-classes.

_Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. --Mozilla.org_

So you can think of it as the hierarchy of elements. Normally if you have 2 equal elements, the changes to the last one are going to overwrite the previous, this means the later one has more specificity.

## is()

It's an easier way to select several things inside classes. For example, if your page has a class of .page-one, and you want to select a few tags in that class you would do it like this:

```css
.page-one h1,
.page-one h2,
.page-one a {
  color: blue;
}
```

What _is()_ allows us to do is to put those elements in a comma separated list:

```css
.page-one :is(h1, h2, a) {
  color: blue;
}
```

This can really help us clean up our code. But _is()_ also has other advantages, for example if we try to select an invalid element with the old way, it would break all of the other element's css, but the selector inside _is()_ is more forgiving.

```css
/* This will break because you can't start classes with numbers */
.page-one h1,
.page-one h2,
.page-one .1a {
  color: blue;
}

/* This will continue working */
.page-one :is(h1, h2, .1a) {
  color: blue;
}
```

**A very important** thing to note when using _is()_ is that it will take the specificity of the highest element in it's list.

```css
.page-one :is(h1, h2, .some-class) {
  color: blue;
}

.page-one h1,
.page-one h2 {
  color: red;
}
```

In this example, even though we have color red after the _is()_ instance, the h tags will be blue, because inside the list there's a class, this will share it's specificity with the other elements.

## where()

It works exactly the same way as _is()_ with the exception that it has no specificity. For example:

```css
h3 {
  color: red;
}

:where(h3) {
  color: blue;
}
```

Even though they're the same element and where comes after the h3, the color red will prevail because using _where()_ means that elements inside it's list will not have specificity.

## has()

Now this is newer pseudo-class is really interesting. I'm going to start off with an example because it's really easy to understand that way.

```css
.card:has(img) {
  background-color: red;
}

.card:has(a) {
  color: blue;
}
```

_Is your mind blown yet?_

With this pseudo class you can apply css only to the elements that contain the things you put inside the _has()_. Imagine the .card is a class where we have card with either images or links. With _has()_ we can apply styling to them individually.

Another cool thing we can do with _has()_ ( and I think has requires a blog post all on itself ) is to combine it with descendant selectors.

```css
.card:has(img) > h3 {
  background-color: red;
}

.card:has(a) > h2 {
  color: blue;
}
```

In this example the h3 that has a parent with an image would get a red background and in the second example the h2's with an anchor tag as a parent would get color blue.

If you want to dive deeper into _has()_ I recommend you watch [this video](https://www.youtube.com/watch?v=OGJvhpoE8b4).

Special thanks and credits to [Kevin Powell](https://www.youtube.com/@KevinPowell), this blog post is based on [this video](https://www.youtube.com/watch?v=3ncFpP8GP4g) that he made.

Thanks for reading!


Where(), is(), and has(), CSS Pseudo classes.

<p>If you ever searched for a beautiful drag and drop for your images, you're in luck. This works with nextjs as well.</p>
<h2>Pre-requisites</h2>
<p>Install <a href="https://chakra-ui.com/getting-started">Chakra-ui</a>, <a href="https://react-dropzone.js.org/">React-dropzone</a> and if you want <a href="https://github.com/Donaldcwl/browser-image-compression">Browser-image-compression</a>.</p>
<iframe
  src="https://codesandbox.io/embed/nameless-breeze-cf20g8?fontsize=14&hidenavigation=1&theme=dark"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="nameless-breeze-cf20g8"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
<h3>If you want to contact me hit me up on <a href="https://twitter.com/tonyjaradev" target="_blank">Twitter</a></h3>