For a long time, I thought about making my blog with my stack, but I don't want to lose the beauties Hashnode offers us. When I saw the announcement on Headless Hashnode, I was fascinated. I thought that now was the time to build my custom blog.

I want to make it with Astro. Lately, I have seen the framework many times, and I've wondered about it. Also, at least, I should learn how to create queries in GraphQL. After these thoughts, I just postponed.

Once I saw Daniela Passos's tweet, I thought this was a great opportunity to overcome procrastination and take action immediately.

Before I start telling you about my journey, here are the links to the live preview and project repository:

Live Preview: https://headless-personal-blog.netlify.app
Project Repository: https://github.com/femincan/personal-blog

Planning and Preparation

For the blog, I will use these tools:

• Astro: I will build the blog on top of this framework, and I am planning to use Solid.js for the interactive parts.

• Tailwind CSS: I like utility classes and I will use the Daisy UI component library with it.

I've used Tailwind CSS and Daisy UI before, but this is my first time with Astro.

The official Astro tutorial is a great starting point. So I started with it and finished it in three days. I loved the tutorial, it helps you to quickly get used to Astro.

To be able to get the data, I need to use GraphQL queries and I've never used GraphQL before. Luckily, I don't need to create a GraphQL server from scratch, I just need to learn how to query an existing server.

Starting Development

After finishing the tutorial, I think I am ready to start developing the blog.

Setting Up the Project

To scaffold the project, I've used the official create-astro CLI.

Let me explain the options I choose above:

1. I chose the name blog for the project folder. (After a while later, I changed it to personal-blog.)

2. I chose to create an empty Astro project. I want to build from scratch.

3. I prefer it installs the dependencies for me. (I've used pnpm as package manager.)

4. I chose to use TypeScript for the project with the recommended strict restriction options.

Setting Up Developer Productivity Tools

I like using ESLint and Prettier in my projects. Also Husky with lint-staged for linting the staged files before every commit.

In Astro setting up ESLint and Prettier was very easy. You only need to install eslint-plugin-astro for linting and prettier-plugin-astro for formatting. Then, just follow the instructions in their documentation.

Note: If you are using VSCode with ESLint and Prettier extensions, don't forget to insert the code below into your settings.json file to enable them to work with .astro files.

{
  "prettier.documentSelectors": ["**/*.astro"],
  "eslint.validate": ["astro"]
}

Creating Fetcher Functions

Before creating pages, I wrote four fetcher functions:

1. getBlogData: The function fetches the required information about the blog and the author.

2. getLatestPosts: The function fetches the information about the latest six posts.

When you fetch the first six posts the API already gives you to latest six posts, so I don't need to do additional processing on the returned posts.

3. getAllPosts: This function is a bit more complicated because I have to fetch all the blog posts in the blog to be able to generate static post pages with getStaticPaths function of Astro.

Hashnode API doesn't give you all the posts. The maximum limit is twenty posts per fetch. You can fetch two more properties alongside the posts: hasNextPage and endCursor.

So we can give endCursor to the after parameter in the next fetch to be able to fetch another at most twenty posts if hasNextPage property is true.

I used a while loop and fetched twenty posts in each iteration until the value of hasNextPage is false.

4. getAboutPageData: The function fetches the content of the static blog page in my blog.

Using GraphQL queries looks intuitive. But I can't say the same for the response. It looks cluttered. Even so, a bit of normalization fixes this issue.

Creating Base Layout

Astro lets you create shared layouts for pages. I used this feature to create a base layout. It is a wrapper for every page on the website.

It takes the current page information like title and description as props and uses them for Meta tags.

It starts with a Navbar component, the page content in the middle, and a Footer component at the bottom.

Creating Pages

Because the time is limited, I want to keep the number of pages low.

The website will consist of four pages:

1. /: Shows the information about the author and the list of latest blog posts.

2. /blog: Shows the list of all blog posts.

3. /blog/[slug]: Shows the blog post by the post slug.

4. /about: Shows the static about page of my blog.

1. The Home Page

The home page consists of two sections:

1. The author area

2. The latest blog post list

For the author area, I am fetching the data with getBlogData function and passed its author prop to AuthorArea component.

For the latest blog posts, fetched the six latest blog posts with getLatestPosts function and passed them to PostList component.

In the PostList component, I used Astro's Image component. I think having an Image component in a framework provides great development experience. Auto-optimized images, no cumulative layout shift, and so on.

With this I've done with the home page, Let's continue to the blog page.

2. The Blog Home Page

The page shows the list of all posts. I used getAllPosts function and showed the response using PostList component that I've used on the home page.

3. The Individual Blog Post's Page

The page uses the getStaticPaths function to generate all individual blog post pages.

For the content of the page, Astro doesn't support remote Markdown. This means I have to convert the markdown to HTML by myself.

I created the convertMarkdown function for this purpose and used:

• remark for parsing markdown,

• rehype for converting parsed markdown to HTML,

• highlight.js for code highlighting.

When converting markdown to HTML, I've encountered a problem because of the images in the fetched markdown.

The images in the fetched markdown look like the below:

![ReferenceError: Cannot access 'cherry' before initialization](https://cdn.hashnode.com/res/hashnode/image/upload/v1686747528090/a420f21e-cd58-404d-8de1-b07a6ef99ce3.png align="center")

There is an align property at the end of the link of the image. This property causes the images not to be parsed and converted correctly.

So, before parsing and converting the markdown, I wrote the code below to remove align properties from images.

const cleanedContent = content.replace(/\salign="\w*"(?=\))/g, '');

After finishing the function, I created a Markdown component that is responsible for displaying the markdown using @tailwindcss/typography plugin to show the converted markdown on the page.

After a few changes to its appearance, the post displayed nicely on the page.

4. The About Page

On the page, I fetched the content of about page in my blog with getAboutPageData function. Then, I used Markdown component again to show this content.

RSS Feed, Sitemap.xml, and Robots.txt

Astro has a great integration system. Most integrations are ready to use for your needs. For example, I added Tailwind CSS to my blog via a short astro add tailwindcss command.

With this system, I easily added:

• RSS feed by using @astrojs/rss package,

• generated sitemap.xml by using @astrojs/sitemap package,

• and created robots.txt by using astro-robots-txt package.

After all this, I think the blog is ready to deploy.

Deployment

I chose Netlify for deploying the blog. After selecting the blog repo the blog was automatically built and deployed. Netlify also auto-deploys when new commits are pushed to the blog repo.

To keep the blog up to date, I used Netlify build hooks in combination with Hashnode webhooks. Netlify build hooks provide a URL, and making a POST request to this URL, triggers a website rebuild and deployment.

With Hashnode Webhook, when a post is published, updated, or deleted, Hashnode makes a POST request to this URL, triggering the blog to rebuild with fresh content.

That's all!

Conclusion

I am happy with Hashnode already for my blog. Additionally, the new Headless Hashnode fills the gap in the front-end customization side of a blog. Now you can use which stack you want for your blog.

My experience with Astro has been nearly flawless. I only faced some issues with TypeScript that the TypeScript Intellisense stopped working when I moved from .ts file to .astro file. But, compared to its good points, this problem is quite acceptable.

This challenge helped me to continue writing on my blog and overcome my procrastination. Thanks, Hashnode for that.

Feel free to specify your thoughts in the comments.

See you in the next one!

Stay in Touch

• Twitter

• LinkedIn

• GitHub

Resources

• Hashnode GraphQL Playground

• Hashnode Public API Docs

• Astro Documentation

Through this article, you will learn how to declare, and mutate variables using var, let, and const statements, and have a better understanding of the differences between them.

I will explain each concept in two parts:

1. Before ES6 (var statement)

2. After ES6 (let and const statements)

Let's dive into these statements:

Declaring Variables with Hoisting in Mind

When you declare variables in your app, the interpreter moves them to the top of their scope and allocates places in the memory before the execution starts. This process is called Hoisting.

1. Variable declaration with var statement:

When you declare a variable with var statement, it is initialized in the memory as undefined before the code execution. So, you can use the variable before declaring it, but it returns undefined.

When execution starts and reaches the line that the variable is declared, replaces the value in the memory with the value of the variable.

console.log(strawberry); // undefined

var strawberry = '🍓';

console.log(strawberry); // 🍓

With this behavior, the program runs without errors. However, in some cases, this can lead to unexpected results.

2. Variable declaration with let and const statements:

When you declare a variable with let or const statements the variable is allocated in the memory as uninitialized in the temporal dead zone. You cannot use variables in the temporal dead zone before their declaration. So, if you try to use a variable before declaring it, the program returns an error.

When the program reaches the line where the variable is declared, it initializes the variable with that value.

console.log(cherry); // ReferenceError

const cherry = "🍒";

console.log(cherry); // 🍒

If you try to run this code snippet, you will see an error similar to below. Because we try to access a variable in the temporal dead zone.

Understanding Variable Scopes

In JavaScript:

• Everything between curly braces is block scope,

• Everything inside a function is function scope.

1. Scope of var statement

Variables declared with var statement are available globally. (If they are not declared in a function.) So, you can use the variables declared inner scope is in outer scopes and vice-versa:

// Global Scope
var carrot = "🥕";

// Inner Scope
{
  console.log(carrot); // 🥕

  console.log(tomato); // undefined

  // More Inner Scope
  {
    console.log(carrot); // 🥕

    var tomato = "🍅";
  }

  console.log(tomato); // 🍅
}

As you can see from the code snippet:

1. We were able to use the carrot variable declared in the most outer (global) scope in the inner scopes.

2. We were able to use tomato variable declared in the inner scope in the outer scopes.

❗ Variables declared with var statement in a function are only available in the function scope, and cannot be used outside of it.

// Function Scope
function declareMelon() {
  var watermelon = "🍉";
}

console.log(watermelon); // ReferenceError

2. Scope of let and const statements:

The variables declared with let and const statements are only available in block scope.

const banana = "🍌";

// Block Scope
{
  console.log(banana); // 🍌

  let lemon = "🍋";

  // Inner Block Scope
  {
    console.log(banana); // 🍌
    console.log(lemon); // 🍋
  }
}

console.log(lemon); // ReferenceError

As you can see in the last line, you cannot use a variable created in the inner scope in the outer scopes.

Mutating Variables

This time the parts will change, the first group involves var and let statements and the second involves const statement. Because var and let statements are mutable, and const statement is immutable.

1. Mutation in var and let statements.

As I said var and let statements are mutable, so you can assign new values to the variables declared with them.

var pepper = "🌶️";
let apple = "🍏";

pepper = "🫑";
apple = "🍎";

console.log(pepper); // 🫑
console.log(apple); // 🍎

Additionally, you can mutate a variable from inner scopes:

• For let statement, the variable will change in the scope where the declaration is made.

• For var statement, the variable will change globally. (or in functional scope.)

{
  pepper = "🌶️";
  apple = "🍏";

  console.log(pepper); // 🌶️
  console.log(apple); // 🍏
}

console.log(pepper); // 🌶️
console.log(apple); // 🍏

2. Mutation in const statement

Variables declared with const statement are immutable. So you cannot re-assign them.

const strawberry = "🍓";

strawberry = "🍉"; // TypeError

If you try to run the code snippet above, the program throws an error similar to below:

❗Important Note: You cannot mutate arrays and objects via assignment but can mutate them via their methods, and property assignment.

const fruitsArray = ["🍎", "🍐"];
const fruitsObject = {
  apple: "🍎",
  pear: "🍐",
};

fruitsArray[2] = "🍒"; // [ '🍎', '🍐', '🍒' ]
fruitsArray.push("🍌"); // [ '🍎', '🍐', '🍒', '🍌' ]

fruitsObject.cherry = "🍒"; // { apple: '🍎', pear: '🍐', cherry: '🍒' }

Redeclaring Variables

Strangely, we can redeclare variables declared with var statement using the same name. This is another error-prone characteristic of var statement. Fortunately, this behavior has changed with let and const statements.

1. Redeclaration with var statement:

You can redeclare a variable declared with var statement in the same scope or inner-outer scopes.

As I said before, variables declared with var statement are global, so if you even redeclare a variable in the inner scope (again, except for functional scopes), the variable will change in all scopes.

var pepper = "🌶️";

console.log(pepper); // 🌶️

// Inner Scope
{
  var pepper = "🥦";

  console.log(pepper); // 🥦
}

console.log(pepper); // 🥦

As you can see in the code snippet, This behavior tends to cause big problems. Because someone working in the same codebase, unintentionally may declare a variable using the same name used before.

2. Redeclaration with let and const statements:

You cannot redeclare variables declared with let or const statements in the same scope. If you try the program throws an error.

let eggplant = "🍆";

let eggplant = "🥔"; // SyntaxError

But you can redeclare the variables in inner scopes. Because, as I said before, the variables declared with let and const statements are block scope and don't affect the outer scopes.

const carrot = "🥕";

// Block Scope
{
  const carrot = "🍒";

  console.log(carrot); // 🍒
}

console.log(carrot); // 🥕

Conclusion

Today ES6 statements are the default choice for variable declaration in JavaScript. Nevertheless, the var statement might still be encountered, especially in older apps. In this guide, you have learned the differences between var, let, and const statements, hoisting and scope in variable declaration.

Thank you for taking the time to read this article. If you have any questions, or thoughts feel free to comment.

See you in the next one!

Stay in Touch

• Twitter

• LinkedIn

• GitHub

Resources

• JavaScript Visualized: Hoisting by Lydia Hallie

• JavaScript Visualized: Scope (Chain) by Lydia Hallie

• Hoisting by MDN Web Docs

I experimented with Parcel in my previous project and I am happy with the result. (The second project of the Front End Development Libraries Curriculum of FreeCodeCamp.)

The setup process was a bit difficult. Thus, I will guide you to simplify this process in this article.

Note: To access the completed boilerplate, you can visit the react-parcel-ts-boilerplate.

1. Installing Dependencies

I have used npm for this boilerplate. But feel free to use any package manager you choose.

First, you need to install react and react-dom as dependencies.

npm i react react-dom

Next, you need parcel and typescript packages as development dependencies, also since this is a TypeScript project, you need type definitions for react and react-dom.

npm i -D parcel typescript @types/react @types/react-dom

2. Configuring tsconfig.json

The documentation says that:

Parcel supports TypeScript out of the box without any additional configuration.

When you try to run or build the app there is no problem. Yet, I consistently encountered TypeScript errors with IntelliSense.

In order to address these issues, I recommend using the following tsconfig.json file, as this configuration helped me resolve those issues:

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext",
    "moduleResolution": "node",
    "lib": ["DOM", "ESNext"],
    "jsx": "react-jsx"
  }
}

3. Creating Base Files

You need to create these three files in the src directory:

1. App.tsx: This file serves as the root component of the app.

const App = () => <div>App</div>;

export { App };

2. index.tsx: This file is responsible for rendering the App component into the <div id="app"> element on the page.

import { createRoot } from 'react-dom/client';
import { App } from './App';

const root = createRoot(document.getElementById('app') as HTMLElement);

root.render(<App />);

3. index.html: This file serves as the entry point for the app.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React (Parcel + TypeScript)</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="index.tsx"></script>
  </body>
</html>

4. Configuring package.json

Make sure to add the source property in the package.json (No need for the main property.), and set its value as the path to the index.html file.

"source": "src/index.html"

Additionally, in order to run the app using scripts, you need to add the necessary scripts to the package.json file.

"scripts": {
  "start": "parcel",
  "build": "parcel build"
}

5. Running the App

Since the app is ready, you can run it with start script:

npm start

The "failed to install modules" Error

You may come across the following error, which I encountered when using pnpm in my previous project:

To resolve this issue, add the process property under the alias property in the package.json file and set its value to false.

"alias": {
  "process": false
}

Conclusion

Developing a React project with Parcel and TypeScript can present challenges, particularly on the TypeScript side. However, using this boilerplate was beneficial in my previous project, and I believe it can assist you as well.

Thank you for reading. Feel free to share your thoughts about Parcel in the comments section.

See you in the next one!

Stay in Touch

• Twitter

• LinkedIn

• GitHub

Resources

• Parcel Documentation

Introduction to SWR

The first thing I want to say is what SWR means.

According to its documentation:

The name “SWR” is derived from stale-while-revalidate, a HTTP cache invalidation strategy popularized by HTTP RFC 5861. SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.

So, SWR is a library that provides React hooks for data fetching.

Implementing SWR in Your Project: My Experience

I recently completed the first project for the Front End Libraries Certification of FreeCodeCamp. I tried SWR in this project and will share my experience.

Note: For more information, you can check the project's GitHub repository and CodeSandbox.

I used TypeScript for this project, but I will give you examples with JavaScript. So, don't worry if you don't know TypeScript. (I highly recommend it if you don't know.)

1. Creating fetcher function

I was planning to use Axios for the requests, so I created the async function below.

const fetcher = async (url) => {
  const { data } = await axios.get(url);

  return data;
};

This function is just a wrapper for the get method of Axios. It accepts a url parameter and returns data.

2. Creating a hook that fetches a random quote

Based on the section Make It Reusable in SWR documentation, I created a hook called useRandomQuote.

Note: In this project, I used Quotable API for random quotes.

This hook is a wrapper for useSWR hook.

In my case, the API returns an array with one element which is the random quote. Since data is undefined during the request, I used optional chaining.

And, the hook returns an object that contains the quote variable with the variables destructured from useSWR hook.

Let's check the code and inspect it:

import useSWR from 'swr/immutable';

const useRandomQuote = () => {
  const { data, ...restSWR } = useSWR(
    'https://api.quotable.io/quotes/random',
    fetcher
  );

  return {
    ...restSWR,
    quote: data?.[0],
  };
};

export { useRandomQuote };

In your projects, you almost always use useSWR hook.

Take a closer look at the useSWR hook:

const { data, error, isValidating, isLoading, mutate} = useSWR(
  key,
  fetcher
);

• Firstly we imported useSWR hook.

• Then we used it in our custom hook with two parameters: key and fetcher.

  key is a unique string for the request which is like an id.

  fetcher is an async function that accepts key and returns data.

• Finally, it returns data, error, isValidating, isLoading, and mutate variables.

  data is the variable returned from fetcher. During the first request, it will be undefined.

  error is the error thrown by fetcher. If there is no error, it will be undefined.

  isValidating is a boolean that indicates the request's status. It is true during each request including the first request.

  isLoading also is a boolean that indicates the first request's status. It is true during the first request, then it will always be false.

  mutate is a function that is used to modify the data manually.

If you noticed, I imported useSWR hook from swr/immutable in the first code snippet. It simply disables SWR's auto-revalidation. I prefer to use it because I want to revalidate the data manually with mutate function.

Understanding Auto-Revalidation

If the data you used is stale, SWR revalidates the data (re-fetches from the server) to keep freshness.

By default, SWR automatically revalidates the data (It assumes that the data is stale) in three cases:

1. Every time the component is mounted, even if there is data in the cache, it revalidates.

2. It revalidates when the window gets focused.

3. It revalidates when the browser regains its network connection.

3. Mutating the Data

If you want manually revalidate the data, you can use mutate function.

I have QuoteCard component that displays the current quote. This component has a New Quote button that handles the mutation of the quote.

const QuoteCard = () => {
  const { quote, isValidating, mutate } = useRandomQuote();

  return (
    {/* ... */}
    <button
      // ...
      onClick={() => mutate()}
    >
      New Quote
    </button>
    {/* ... */}
  )
}

When the mutate function is called, SWR revalidates the data. During this process, the quote variable remains the same (will not be undefined), and the isValidating variable becomes true.

Here is a diagram of this process:

4. Handling Concurrent Requests

If you don't handle request cancellation manually, the ongoing request continues even if the user initiates a new request alongside it, resulting in multiple concurrent requests.

SWR only updates the data after the last request is completed. If there are concurrent requests, their responses aren't important except for the last one. So if you don't cancel these requests, it results in unnecessary network usage.

I faced the same issue in my project. When the user clicks the New Quote button while a request is still loading, the application triggers a new request alongside the existing one.

Although I checked SWR's documentation, I couldn't find a built-in solution for this issue. (I also checked React Query, and it has a built-in solution for that. I am planning to experiment with it in my next project involving API usage.)

In this scenario, I could use AbortController to handle request cancellation, but I didn't use it to keep things simple. I just disabled the New Quote button during validation.

Conclusion

SWR helped me a lot in this project. If you have not used it previously, I highly recommend trying it in your future projects.

This is my first blog post, and I will be waiting for your feedback and thoughts about the library in the comments.

Stay in Touch

• Twitter

• LinkedIn

• GitHub

Resources

• SWR Documentation

• Revalidating options of SWR by Toru Kobayashi

• My inspiration to use this library comes from this video by CoderOne. (I know this video is about React Query, but I wanted to try SWR first.)