Code snippets are pieces of code that are written to perform specific tasks. They are useful for developers because they save time by providing pre-written code that can be reused and modified as needed. By using code snippets, developers can quickly create complex applications without having to write all of the code from scratch. Additionally, code snippets can help developers understand new concepts and technologies faster and more efficiently.

Here’s a list of my favorite code snippet list

 is a great source for short, concise code snippest for a variety of languages. This site has code snippets for React, Angular, Node.js, and more. Each code snippet is explained with a description and a link to the source code. This is a great resource for developers who want to quickly find snippets without having to search through large code bases.

is a great collection of code snippets for modern JavaScript development. It includes code snippets for various topics, such as ES6 features, asynchronous programming, and more. Each code snippet is accompanied by a description and a link to the source code, making it easy to find the right code snippet for your needs. Additionally, this list provides a great overview of the latest and greatest ES6 features and how to use them.

 is a great resource for developers looking for code snippets for web development. This site has snippets for React, Vue, Angular, and more. Each code snippet is explained with a description and a link to the source code. The code snippets are organized in a way that makes it easy to find the right code snippet for a specific task. Additionally, this site also includes a collection of tutorials and articles that can help developers understand the code snippets better.

If you haven’t heard about Fireship I recommend checking out his youtube channel, it’s the greatest youtube channel on coding ever.

I'm just starting out, so my collection of snippets is small. It's different from other snippet lists online, as some of them are full-fledged components that do a certain functionality. I'm especially proud of the 

. It allows you to upload an image and creates a base64 version of it, which you can then save to any image hosting provider (I'm using Cloudinary, but I'm not sure if it works elsewhere).

My 4 favorite sites for code snippets

To begin, let's define what a "second brain" is and why it is beneficial for developers to have one. The term "second brain" was coined by Tiago Forte and refers to a centralized system that helps individuals organize and store their notes for future reference.

Depending on your requirements, you can delve deeper into this concept. However, it is recommended to start with a basic system and gradually build upon it.

Below, you will find a simplified version of the system that I am currently using.

Whether you're a seasoned developer or just a beginner, you probably find yourself reading lots of information and tutorials on how to do certain things.

Personally, I've returned to the same articles and videos multiple times for something I was trying to develop. I often find myself searching for the same answer multiple times and end up finding it on the same website.

For example, if I want to add months to a date object and I have an idea of how to do it because I've done it many times in the past, but I might not remember the exact syntax.

With a "second brain," you can store the URL to the article or even the whole page. So when you want to find something, you know you have it in your Notes System, and instead of Googling, you can just open your notes and search there.

And for those of you thinking that this is just glorified bookmarks, it's not. Read on to find out why.

I won’t go deep on this, Tiago does a great job explaining it, or if you prefer a video version of it, check out Ali Abdaal lesson.

The "PARA" principle is a framework for organizing information that is used for building a "second brain" or a personal knowledge management system. It stands for Projects, Areas of Responsibility, Resources, and Archives. Each category serves a different purpose and helps to keep information organized and accessible.

Projects for me represent each personal app/website I’m working on, or any other thing that requires me to take action upon it. 

Areas of Responsibility encompass broad areas of interest or expertise, here are a few of mine: Coding, Finances, and Health.

Resources belong to areas, for example in coding I have a resource “Learning”, for which I keep all links and notes regarding my learnings.

Archives is basically for when you want to retire any of the above, let’s say I decide to stop maintaining my blog, this is when I move the project to “Archives”

ollect information from various sources, 

istill it into its most essential parts, and the last step is to 

xpress it, which is basically what I’m doing right now.


I realize that not everyone reading would use the second brain for running their blog, but you can think of the express part of it when you’re actually coding using the information you’ve captured previously in your second brain.

On top of the PARA principle, I have added a Journal table, which is a basic template provided by Notion, but now it’s connected to the second brain, more on that later.

The first one is Areas & Resources, this one gives me an overview of all the resources grouped by areas, it’s my favorite page, and It’s where I recommend everyone should start out when building their second brain.

The second one is the GTD dashboard, I like to keep it simple, so here I have 2 “inboxes”, one for tasks and one for notes.

This is the entry point of any note/task I create, whether that’s automatic or manual creation.

Here I only see notes/tasks that haven’t been organized yet, once a note or a task is connected to a relevant project, area, or resource, it’s gone from here. By having this approach you make sure to never have notes hanging, and always have them in their rightful place.

The starting point is an Area, for me a big one is “Coding”, here I have resources such as

Each of these resources serves a different purpose, for example in snippets I save every piece of code that I deem I might use In the future. In learning, I save articles, videos, and tutorials of things I am learning or plan to learn. And in business, I save articles, notes, and other pieces of content I find that might make me money in the future.

As journaling is a daily habit, every time I write something I feel like saving for later, I connect it with relevant resources. I have found this approach to be more useful for my journaling practice. Revisiting older entries is now easier, more organized, and more meaningfull.

Projects are part of an area. Building upon the previous example one project that falls under my coding area is my Blog, as tasks I have all the features I wish to implement, and as notes are any blogs that I find inspiration from or any other piece of information that is relevant to my blog.

Here’s a graphical representation of how each entity is connected with each-other. 

Every entity (project, resource, area, etc...) has a checkbox “Archive” whenever that’s activated, it removed the entity from your view, and stores it in archives. In this way the information you no longer feel is relevant gets out of your way, but it’s still easily reachable by search or by opening the Archives page.

They are connected with areas and projects, I like to write my area goals as huge long-term goals. And those for projects are more attainable and should be reached by the end of the project.

That’s all the different pages explained, feel free to explore the 

If you download Notion on your phone it lets you quickly save any piece of content that’s sharable, any link you save will be automatically added to the notes inbox, waiting for you to organize it.

Another piece of useful software is the notion browser extension which does exactly the same thing.

I use these daily, very helpful whenever I find something worth saving. 

The third one I use occasionally is called Instant notion, it’s an iPhone app, that you can use to quickly add a note, without having to open Notion.

As knowledge workers we need to have a system for organizing our digital life, before Notion I had information saved in many different places, some links were in my bookmarks bar others were saved in the notes app on my phone, and some on my mac.


When I realized the power of having everything in one centralized place, I found myself being way more productive and having more ideas and inspiration on what to do next.

I’m selling this system as a template for just $15, 

. I also offer support by email if you find any of it confusing.

If you want to learn more about the second brain as a concept, I recommend reading the book that inspired it.

A Web Developer's Guide to Building a Second Brain

The following few commands I’ve listed have been a lifesaver many times in my career, I’ve curated these commands from many different forums, their official documentation, and my personal experience.



These commands work only on Mac/Linux systems, they didn’t work on Windows.

What you need to do first is make sure you have the psql CLI installed on your machine

These values can be found in your database provider, in my case I’m using render.com

PGPASSWORD="DB_PASS" pg_dump -h frankfurt-postgres.render.com -U DB_USER DB_NAME \ -n public --no-owner > database_dump.sq

There are many commands for doing this, however, for me, only one very weird command worked properly.

With this, you now can query/change your database, run the following command in order to delete all the data, and reset the local DB.

DO $$ DECLARE
r RECORD;
BEGIN
FOR r IN (SELECT tablename FROM pg_tables WHERE schemaname = current_schema() AND tablename != 'spatial_ref_sys') LOOP
EXECUTE 'DROP TABLE IF EXISTS ' || quote_ident(r.tablename) || ' CASCADE';
END LOOP;
END $$;

PGPASSWORD="your password" psql -h localhost -u postgres DATABASE_NAME < database_dump.sql

PGPASSWORD=damjan psql -h localhost -U postgres mylocaldb < database_dump.sql

Make sure you’re in the same directory where you created the .dump file

If everything goes as it should, your local DB should now be an exact replica of the production one. Hope this post helped you figure out this tedious process.


If you’re using Prisma and would like to know how I migrate my database painlessly checkout 

Postgres Database Management - Copy, Reset, and Populate Commands

I am writing this after spending an hour trying to fix Prettier. The errors I got are the ones below 

Invalid prettier configuration file detected.
Error: ENOENT: no such file or directory, open '/.prettierrc'

 file in the root folder of your project, add it and see if it works for you, otherwise, follow the steps below.

Open VsCode settings, and search for prettier

Remove the / before the file and make sure the name matches

{
  ".singleQuote": true,
  "tabWidth": 2,
}

Quick fix: Invalid prettier configuration file detected

I told Chat GPT to generate a portfolio website using Tailwind and React. It generated a prototype working version of it with less than 10 prompts, here are the results. The demo and code-repo are available in the conclusion.

This represents a message I send to the bot.

write a simple header for a personal portfolio using tailwind and react

By writing it this way I set the expectation of the model. The website will be built using tailwind and react, here’s what it gave me:

import React from 'react';

const Header = () => {
  return (
    <header className="bg-gray-900 text-white p-6">
      <h1 className="text-2xl font-medium">My Personal Portfolio</h1>
    </header>
  );
}

export default Header;

Not bad, but I needed something better, this was the second prompt

add a nav component, and make it mobile-friendly by using a hamburger menu

import React, { useState } from 'react';

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  return (
    <header className="bg-gray-900 text-white p-6">
      <h1 className="text-2xl font-medium">My Personal Portfolio</h1>
      <nav className={`${isMenuOpen ? 'block' : 'hidden'} md:block`}>
        <a href="#about" className="block mt-4 text-lg font-medium text-white hover:text-gray-300">About</a>
        <a href="#projects" className="block mt-4 text-lg font-medium text-white hover:text-gray-300">Projects</a>
        <a href="#contact" className="block mt-4 text-lg font-medium text-white hover:text-gray-300">Contact</a>
      </nav>
      <button
        className="block md:hidden rounded-md focus:outline-none focus:bg-gray-800"
        onClick={toggleMenu}
      >
        <svg className="h-6 w-6 fill-current text-gray-300" viewBox="0 0 24 24">
          <path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z" />
        </svg>
      </button>
    </header>
  );
};

export default Header;

Much better, since it decided to include these 3 sections, I decided to go with the flow, and further instructed it to create the portfolio as a landing page.

now create the homepage based on the links in the header, and add sample content, it's a portfolio for an amateur photographer

This is the first time I let it know who’s the portfolio for, I did this intentionally, so it could be “creative” in the beginning.

import React from 'react';

const HomePage = () => {
  return (
    <main>
      <section id="about" className="py-10">
        <h2 className="text-3xl font-medium mb-4">About Me</h2>
        <p className="text-lg leading-loose">
          Hi, my name is John Doe and I am an amateur photographer. I have been passionate about photography for as long as I can remember, and I love nothing more than capturing beautiful moments and memories through my lens. I specialize in nature and landscape photography, but I am also experienced in portrait and event photography. 
        </p>
      </section>
      <section id="projects" className="py-10">
        <h2 className="text-3xl font-medium mb-4">My Projects</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <div className="bg-gray-300 p-4">
            <img src="path/to/project-1.jpg" alt="Project 1" className="w-full h-64 object-cover" />
            <h3 className="text-xl font-medium mt-4">Project 1</h3>
            <p className="text-sm text-gray-700">A brief description of project 1</p>
          </div>
          <div className="bg-gray-300 p-4">
            <img src="path/to/project-2.jpg" alt="Project 2" className="w-full h-64 object-cover" />
            <h3 className="text-xl font-medium mt-4">Project 2</h3>
            <p className="text-sm text-gray-700">A brief description of project 2</p>
          </div>
          <div className="bg-gray-300 p-4">
            <img src="path/to/project-3.jpg" alt="Project 3" className="w-full h-64 object-cover" />
            <h3 className="text-xl font-medium mt-4">Project 3</h3>
            <p className="text-sm text-gray-700">A brief description of project 3</p>
          </div>
        </div>
      </section>
      <section id="contact" className="py-10">
        <h2 className="text-3xl font-medium mb-4">Contact Me</h2>
        <p className="text-lg leading-loose mb-4">
          If you have any questions or would like to book a photoshoot, please don't hesitate to contact me. You can reach me by phone at 555-555-5555 or by email at johndoe@example.com.
        </p>
        <a href="mailto:johndoe@example.com" className="bg-gray-800 text-white p-3 rounded-md hover:bg-gray-900">
          Contact Me
        </a>
			</section>
    </main>
  );
};

export default HomePage;

I wasn’t really satisfied with the first version of the homepage, so I started prompting it to add the components that I imagined it would have.


I wanted a way to display more info about each project.

now create a modal component in which more information about each project will be displayed

import React, { useState } from 'react';

const Modal = ({ project }) => {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => {
    setIsOpen(true);
  };

  const closeModal = () => {
    setIsOpen(false);
  };

  return (
    <div onClick={() => { if (isOpen) setIsOpen(false) }}>
      <button className="bg-gray-800 text-white p-3 rounded-md hover:bg-gray-900" onClick={openModal}>
        More Info
      </button>
      {isOpen && (
        <div className="fixed top-0 left-0 h-full w-full bg-black bg-opacity-75">
          <div className="m-auto max-w-sm bg-white rounded-md p-6">
            <button className="absolute top-0 right-0 m-2 text-gray-500 hover:text-gray-700" onClick={closeModal}>
              <svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </button>
            <h2 className="text-lg font-medium mb-4">{project.title}</h2>
            <img src={project.img} alt={project.title} className="w-full h-64 object-cover mb-4" />
            <p className="text-sm leading-loose">{project.description}</p>
          </div>
        </div>
      )}
    </div>
  );
};

export default Modal;

Now we’re talking, I needed one more component for a way to let users contact the photographer.

create the contact form, which will save info with some online service

import React, { useState } from 'react';

const ContactForm = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    setError(null);

    try {
      // Use your preferred online service for saving the data here
      // for example, you can use a service like Formspree to save the contact form data
      //const response = await fetch("https://formspree.io/your-email-address", {
      //  method: "POST",
      //  headers: {
      //    "Content-Type": "application/json"
      //  },
      //  body: JSON.stringify({ name, email, message })
      //});
      //const data = await response.json();
      //if (!response.ok) {
      //  throw new Error(data.message);
      //}
      //setSuccess(true);
    } catch (err) {
      setError(err.message);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {error && <p className="text-red-500">{error}</p>}
      {success && <p className="text-green-500">Your message was sent successfully!</p>}
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          className="block w-full border border-gray-400 p-2 rounded-md"
          disabled={isSubmitting}
        />
      </label>
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="block w-full border border-gray-400 p-2 rounded-md mt-2"
          disabled={isSubmitting}
        />
      </label>
      <label>
        Message:
        <textarea
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          className="block w-full border border-gray-400 p-2 rounded-md mt-2"
          rows={5}
          disabled={isSubmitting}
        />
      </label>
      <button
        type="submit"
        className="bg-gray-800 text-white p-3 rounded-md hover:bg-gray-900 mt-4"
        disabled={isSubmitting}
      >
        Send
      </button>
    </form>
  );
};

export default ContactForm;

All that was left to do was give a more meaningful and personal description about the photographer

The photographer's name is Erik Vacev, he mostly takes pictures of landscapes and nature, and occasionally he does portraits.
Create an about me description for him

"Meet Erik Vacev, an amateur photographer with a passion for capturing the beauty of nature and landscapes. His love for photography began at a young age and has grown over the years, as he traveled to different places and captured breathtaking images. Erik's attention to detail and his ability to capture the essence of a place make his photographs stand out. He mostly takes pictures of landscapes and nature, but occasionally he does portraits. He believes that every picture tells a story and he wants to share his stories with the world. He is always looking for new and exciting places to photograph, and he hopes to inspire others to see the world in a new way through his work.”

Voila, now I have all the building blocks, all I need to do is put them together. Well why waste time when I can just ask it to do it for me?

I didn’t like the way the header was styled, so I asked it to recreate it

better style the header you previously created using tailwind, align items to center and add some bg color to it

It failed to recreate it as it was before, but I did copy the new styles and applied them to the previous version of it.

The next step was to recreate the homepage using the new components

regenerate the homepage using everything I told you after, add padding, and make it mobile friendly

import React from "react";
import Modal from "../components/Modal";
import ContactForm from "../components/Contact";

const HomePage = () => {
  return (
    <main className="p-8">
     
      <section id="about" className="mb-12">
        <h2 className="text-2xl font-medium mb-4">About Me</h2>
        <p className="text-sm leading-loose">
          Meet Erik Vacev, an amateur photographer with a passion for capturing the beauty of nature and landscapes. His love for photography began at a young age and has grown over the years, as he traveled to different places and captured breathtaking images. Erik's attention to detail and his ability to capture the essence of a place make his photographs stand out. He mostly takes pictures of landscapes and nature, but occasionally he does portraits. He believes that every picture tells a story and he wants to share his stories with the world. He is always looking for new and exciting places to photograph, and he hopes to inspire others to see the world in a new way through his work.
        </p>
      </section>
      <section id="projects" className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-12">
        <div className="bg-gray-300 p-4">
          <img src="path/to/project-1.jpg" alt="Project 1" className="w-full h-64 object-cover" />
          <h3 className="text-xl font-medium mt-4">Project 1</h3>
          <p className="text-sm text-gray-700">A brief description of project 1</p>
          <Modal project={{
            title: "Project 1",
            img: "path/to/project-1.jpg",
            description: "A more detailed description of project 1, including information about the techniques used, equipment, and any interesting facts or stories related to the project."
          }} />
        </div>
        <div className="bg-gray-300 p-4">
          <img src="path/to/project-2.jpg" alt="Project 2" className="w-full h-64 object-cover" />
          <h3 className="text-xl font-medium mt-4">Project 2</h3>
          <p className="text-sm text-gray-700">A brief description of project 2</p>

          <Modal project={{
            title: "Project 2",
            img: "path/to/project-2.jpg",
            description: "A more detailed description of project 2, including information about the techniques used, equipment, and any interesting facts or stories related to the project."
          }} />
        </div>
        <div className="bg-gray-300 p-4">
          <img src="path/to/project-3.jpg" alt="Project 3" className="w-full h-64 object-cover" />
          <h3 className="text-xl font-medium mt-4">Project 3</h3>
          <p className="text-sm text-gray-700">A brief description of project 3</p>
          <Modal project={{
            title: "Project 3",
            img: "path/to/project-3.jpg",
            description: "A more detailed description of project 3, including information about the techniques used, equipment, and any interesting facts or stories related to the project."
          }} />
        </div>
      </section>
      <section id="contact">
        <h2 className="text-2xl font-medium mb-4">Contact Me</h2>
        <ContactForm />
      </section>
    </main>
  );
};

export default HomePage;

I was impressed by the code it was able to write, I can see that it’s not yet ready to write production-level code, but it’s a good starting point for any project I will create in the future. 

Maybe my prompts weren’t good enough, but it couldn’t create the mobile header I was expecting it to create, even after trying 10+ times. In the end, I just changed some styles, to make it pretty and responsive.

 All I needed to do was generate a next app using 

 install and configure tailwind, and copy over the code that was generated.

A Chat GPT-3 Generated Portfolio Website: Are we there yet?

Prisma migration commands are long and confusing, here is a list of 5 commands that you need to effectively run migrations

"scripts": {
	"migrate:status": "prisma migrate status",
	"migrate:dev": "prisma migrate dev",
	"migrate:resolve": "prisma migrate resolve --applied $MIGRATION",
	"migrate:deploy": "prisma migrate deploy",
	"migrate:push": "prisma db push"
}

:status - shows which migration you have locally but not applied to target database

:dev - creates a new migration from the active changes in 

:resolve - applies the new migration to the target database

:deploy - deploys the changes to the database (but they are not live yet)

:push - command to sync local changes with database

 file I keep all the different databases that I need to connect to.

DATABASE_URL=postgresql://postgres:damjan@localhost/dbname
// the db we're targeting is on the bottom
DATABASE_URL=postgresql://postgres:damjan@localhost/mylocaldb

The first one (dbname) is an empty local database, whenever I need to create a new migration I always switch to this DB, to not lose any data from the one I’m using.

I suggest you have 2 local databases one for keeping test data and one for migration

Start by changing the target database to a local one

At this point, you will be asked to name the migration

After successfully creating a new migration change to the target database you want to migrate

 you’ll see all the pending migrations, if you want to apply all the pending migrations run 

MIGRATION=”new_migration_name” npm run migrate:resolve

 - This will apply the migration to the current target DB

If all goes well you should see: “🚀 Your database is now in sync with your Prisma schema.“

When adding new properties to an existing model make sure they have a default value or are not required.

Migrating a Prisma Database: My Workflow

The highlighter you will get is the one that you see belo, feel free to change the color scheme to match your style.

From your CMS you will receive the code values which you need to pass on to the component.

import React from "react";
import Highlight, { Prism } from "prism-react-renderer";

import { FaCopy } from "react-icons/fa";
import vsDark from "prism-react-renderer/themes/vsDark"

import { useCopyToClipboard } from "../lib/hooks/useCopyToClipboard";

export const CodeBlock = ({ code, language, metastring = "", fileName }) => {
  const [isCopied, handleCopy] = useCopyToClipboard(1000, code);
  const { languageFormatted, color } = getLanguageFormatted(language);
  
  return (
      <Highlight Prism={Prism} code={code} language={language} theme={vsDark}>
        {({ className, style, tokens, getLineProps, getTokenProps }) => (
          <div className={`relative not-prose my-10 `}>
            <pre
              className={`rounded-xl relative overflow-hidden bg-slate-800 ${className}`}
              style={style}
            >
              <div className="relative flex text-xs leading-6 ">
                <div className="flex items-center  px-4 pt-1 mt-2  border-t border-b border-t-transparent border-b-slate-400 w-full justify-between">
                  <p
                    className={`bg-zinc-800
                    } h-full pt-2 pb-2 px-4`}
                  >
                    <span className={color}>
                      {JSON.stringify(languageFormatted)
                        .replace(/['"]+/g, "")
                        .toUpperCase()}
                    </span>{" "}
                    <span className="text-current">{fileName}</span>
                  </p>
                  <button
                    className={`hidden md:inline-block group mb-2 mr-1 ${
                      isCopied ? "text-secondary" : "text-gray-400"
                    }`}
                    onClick={() => handleCopy()}
                  >
                    <span className="sr-only">Copy code</span>
                    <FaCopy />
                  </button>
                </div>
              </div>
              <div className="relative w-auto p-5 overflow-auto prose text-gray-300 prose-full-width text-sm md:text-md">
                <span>
                  {tokens.map((line, i) => {
                    const lineProps = getLineProps({ line, key: i });
                    return (
                      <div key={i} {...lineProps}>
                        {line.map((token, key) => (
                          <span key={key} {...getTokenProps({ token, key })} />
                        ))}
                      </div>
                    );
                  })}
                </span>
              </div>
              {/* Show fade on side of codeblock if content overflows */}
              <div className="absolute w-8 top-[45px] right-0 bg-gradient-to-l from-midnight code-fade"></div>
            </pre>
          </div>
        )}
      </Highlight>
  );
};

export default CodeBlock;

It takes language as an arg and returns a nicely formatted version of it along with the color.

Copies everything from the code snippet to user’s clipboard

import { useCallback, useEffect, useState } from 'react';

import copy from 'copy-to-clipboard';

// By default will copy URL to clipboard if text is not passed to the hook.
export function useCopyToClipboard(resetInterval = 3000, text = null) {
  const [isCopied, setCopied] = useState(false);

  const handleCopy = useCallback(() => {
    if (window !== undefined) {
      copy(text ?? window.location.href);
      setCopied(true);
    }
  }, []);

  useEffect(() => {
    let timeout;
    if (isCopied && resetInterval) {
      timeout = setTimeout(() => setCopied(false), resetInterval);
    }
    return () => {
      clearTimeout(timeout);
    };
  }, [isCopied, resetInterval]);

  return [isCopied, handleCopy] as const;
}

That’s all the pieces you need to display code nicely on your website, if you want to see an implentation of this with Notion, check out the 

Implementing a Syntax Highlighter in React

If the initial HTML rendered on the server doesn't match the JavaScript code that runs in the browser, it can lead to broken or inconsistent user interfaces and a poor user experience.

This error shows only when working locally, and it might cause issues in production. 

You don’t get much information about it in the terminal so where should you start?

Start with the home page, and do a hard refresh. If the error is still present, close the page and go to another. Is the error present here? If so, it means it is happening in some shared component, possibly the layout file, the header, or the footer. If it is not present on other pages, then you know it has something to do with the home page.

Once you know that the error is happening in a certain part of the codebase it’s time to start commenting out parts of it.

Usually, it’s conditional logic that fails, look for places where you render something conditionally.

Maybe you have a login state, and only render certain parts based on whether or not the user is logged in.

This error occurred because the server was unaware of the client's login state.

{
 isLoggedIn 
	  ? (<div>content</div>) 
	  : (<></>)
}
					

 is a class that toggles the visibility of the target element.

const [navClass, setNavClass] = useState("");

useEffect(() => {
  if (isLoggedIn) {
    setNavClass("logged-in");
  }
}, [isLoggedIn]);

return (
    <div className={navClass}></div>
)

These errors occur when you attempt to render something on the server that is only accessible to the client.

If you don't have a specific state, but still encounter an error, you can check if 

 is defined. This ensures that the rendering is happening in the browser, rather than on the server.

const [shouldShow, setShouldShow] = useState(false)

useEffect(() => {
  if (typeof window !== 'undefined')  {
		setShouldShow(true);
  }
}, []);

return shouldShow 
? (<div>Content</div>)
: (<></>)

 a Stackoverflow question that helped me out

Hydration failed because the initial UI does not match what was rendered on the server - Next JS fi

The idea is that users will scroll down and won’t notice content loading in the background, making it feel like they can scroll down infinitely, if you go to any social media platform they do the same thing, no matter how long you scroll down there always seems to be new content being loaded.

All you need to do is pass a ref (a pointer to an HTML element) to this function, and it will check whether the observed element is currently in the user's viewport.

import { useState, useEffect } from "react";

export default function useOnScreen(ref) {
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) =>
      setIntersecting(entry.isIntersecting)
    );
    observer.observe(ref.current);

    // Remove the observer as soon as the component is unmounted
    return () => {
      observer.disconnect();
    };
  }, []);

  return isIntersecting;
}

Let’s take a SAAS platform I’m building as an example, on the search page, I initially load 5 projects, and at the end of the projects list there is a HTML div element, with the above hook attached to it.

const projectsRef = useRef<HTMLDivElement>(null);

// allProjects represents the response list from server
<div ref={projectsRef}>
	{loading ? <LoaderComponent /> : allProjects.length === 0 ? "You've reached the end!" : ""}
</div>

When a user reaches the end of the list I send a new request to the server requesting more records to be loaded.


We take the ref from the targeted div element and using the hook we create a boolean. So whenever the user reaches the element the below 

If it’s not loading, and if we receive results back from the server, we increment page by one.

If we don’t receive any data from the server it means that all the projects for the given filters were already requested, and we don’t need to send another request

const [currPage, setCurrPage] = useState(1);
const isOnScreen = useOnScreen(projectsRef)

useEffect(() => {
	if (isOnScreen && !loading) {
		if (allProjects.length) setCurrPage(currPage + 1)
	}
}, [isOnScreen])

 changes we send another request to server.

 is always 5, as we always want to take 5 new records.

useEffect(() => {
	if (projects?.length) {
		getAllProjects({
			variables: {
				...values,
				take: 5,
				skip: (currPage - 1) * 5
			}
		})
	}
}, [currPage])

 to keep track of the projects that need to be displayed. In the 

 below we first check if there are already projects added 

 value, if it’s not empty we just attach the new response of projects to the existing array 

setProjects([...projects, ...allProjects])

If it’s not already populated that means this was the first request and we just set the state to the response.

const [projects, setProjects] = useState(projectsData?.projects)
useEffect(() => {

	if (projects) {
		if (projectsData?.projects) setProjects([...projects, ...allProjects])
	} else {
		setProjects(projectsData?.projects)
	}

}, [projectsData])

  for querying, but if you understand the concepts above you can apply them to your library of choice.

const [getAllProjects, { data: projectsData, loading }] = useLazyQuery<
	GetAllProjectsResponse,
	GetAllProjectsVars
>(GET_ALL_PROJECTS, { fetchPolicy: "cache-first" })

Creating an Infinite Scroll Pagination with Custom React Hook and GraphQL

As a dev, especially if you’re just starting out, you want to avoid monthly costs wherever possible. Well, I am not just starting out, but since my website is still not making me any money (at least not directly), I try to keep the cost at 0.

Nowadays there seems to be an endless amount of ways to develop/host a website, countless CMSs, and countless hosting providers, I am guilty of changing the CMS of my website 4 times already, and the main reason was money.

I am a React dev, I use NextJs for my day job. For my blogfolio I wanted to learn something different and played around with SvelteJs, but it was lacking the community I needed, so I dumped that project after a few weeks of trial and error.

Since the current site is NextJs, Vercel was the clear winner, and if you’re just an individual trying to host a site (not necessarily a Next site), I would strongly recommend going with Vercel, they have a generous free tier (basically free forever), my site is up 99.99% of the time, and setup with their UI is extremely easy.

This is the thing I switched around most. I started developing my site, as a side project 7-8 months ago, and in that time I switched 4 different CMSs. 

The first one I tried was Graphcms (now known as Hygraph) they did have a free tier, but I quickly realized that I would need features in their pro plan very soon, which was $300 per month, no thank you.

The next one I decided to do was Prismic, which was pretty cheap, around $10 per month I think, I used it for 2 months, and at this time a friend recommended I should try to use headless WordPress. 

He sold me on the whole WP is the original blogging platform, it has been here for decades. I have never been a fan of WP I started to learn how to code after all the hype around it settled down, but decided to give it a go.


I found a hosting provider, it was around $60 per year with the first one being 50% off, so I migrated all the content to WP, at the time it was just 8 blog posts, I loved all the features it provided, the comment system, the plugins everything, one thing it was lacking was customization, and I also wasn’t ready to pay yet.


So then I decided to give Notion a go. I’ve been using Notion for more than a year now, and I store everything I need here, so I thought since my whole life is in Notion, why not my blog content as well? I got the idea from 

, he has an amazing open-source website, and he was doing the same thing.

The thing I love about Notion is the customization, you basically create everything from scratch, you add your own properties, and your own view of the posts, it’s a tool that allows you to develop your system using no-code techniques, and if you’re a developer you will find it easy to use. I am not an affiliate BTW.

Using Notion drops the price of running the site back to 0.

The third technology that’s usually paid is the Database

One would argue, why would you need a database if you’re using notion to store data you display, and while you can definitely use Notion to read and write data, that’s not the intended purpose of it, and it becomes very slow.

Think of it this way, whenever you have some part of your site that doesn’t change much, it’s a green light for notion, but when you need some more dynamic data, you need to reach for something else. 


Initially, I looked into firebase as I have experience with it, but I decided against it and chose Supabase.

It’s a firebase clone and it offers a very generous free tier, which I don’t expect to hit until I get 10k+ monthly visitors, hopefully, that will be soon 🤞.


Currently, the only place I use Supabase is on the post view count, I plan to implement more features with it, and will update this post as soon as I do so.

With these 3 technologies, almost any site can be built and hosted, well that is until the site gets a more significant amount of traffic, it took me a lot of experimentation to get it where it is today, and the site will likely change more in the future, I embrace that, with every new feature I learn something new. I encourage you to start building your site as soon as possible, it’s a playground to train on, and it’s how you show the world you’re a dev.

PS: It’s not completely free, I pay around $15 per year for the domain.

3 technologies I use to run my portfolio site for free

It happens to the best of us, there are many occasions when you need to remove a commit from a remote branch, you just need to be very careful doing this.

I do it the following way

I first get to the target branch by running 

 or if the branch is not available locally first run 

 to make sure that you have the latest commits

 to list all current commits, if the latest commit you see is the one you want to remove run 

About Me

The Journey

The Backend Expertise

The Freelancer

The Mindful Coder

The Future

Welcome to my world. Let's build something amazing together.