import BlogPostLayout from '@/components/BlogPostLayout';
import BlogPostImage from '../../../public/images/mdx.webp';

export default ({ title, publishedAt, children }) => <BlogPostLayout
 title="Markdown Guide : Guide Based on Github Flavored Markdown"
 description="Markdown cheatsheet for all your blogging needs - headers, lists, images, tables and more! An illustrated guide based on Github Flavored Markdown."
 publishedAt="10/17/2023"
 keywords="markdowx, text, nextjs, tailwindcss, next-themes"
 imageUrl={BlogPostImage}
>{children}</BlogPostLayout>;


## Introduction

Markdown and Mdx parsing is supported via `unified`, and other remark and rehype packages. `next-mdx-remote` allows us to parse `.mdx` and `.md` files in a more flexible manner without touching webpack.

Github flavored markdown is used. `mdx-prism` provides syntax highlighting capabilities for code blocks. Here's a demo of how everything looks.

The following markdown cheatsheet is adapted from: https://guides.github.com/features/mastering-markdown/

## What is Markdown?

Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like `#` or `*`.

## Syntax guide

Here’s an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files.

### Headers

```
# This is a h1 tag

## This is a h2 tag

#### This is a h4 tag
```

# This is a h1 tag

## This is a h2 tag

#### This is a h4 tag

### Emphasis

```
_This text will be italic_

**This text will be bold**

_You **can** combine them_
```

_This text will be italic_

**This text will be bold**

_You **can** combine them_

### Lists

#### Unordered

```
- Item 1
- Item 2
 - Item 2a
 - Item 2b
```

- Item 1
- Item 2
 - Item 2a
 - Item 2b

#### Ordered

```
1. Item 1
1. Item 2
1. Item 3
 1. Item 3a
 1. Item 3b
```

1. Item 1
1. Item 2
1. Item 3
 1. Item 3a
 1. Item 3b

### Images

```
Format: ![Alt Text](url)
```


### Links

```
http://github.com - automatic!
[GitHub](http://github.com)
```

http://github.com - automatic!
[GitHub](http://github.com)

### Blockquotes

```
As Kanye West said:

> We're living the future so
> the present is our past.
```

As Kanye West said:

> We're living the future so
> the present is our past.

### Inline code

```
I think you should use an
`<addr>` element here instead.
```

I think you should use an
`<addr>` element here instead.

### Syntax highlighting

Here’s an example of how you can use syntax highlighting with [GitHub Flavored Markdown](https://help.github.com/articles/basic-writing-and-formatting-syntax/):

````
```js:fancyAlert.js
function fancyAlert(arg) {
 if (arg) {
 $.facebox({ div: '#foo' })
 }
}
```
````

And here's how it looks - nicely colored with styled code titles!

```js:fancyAlert.js
function fancyAlert(arg) {
 if (arg) {
 $.facebox({ div: '#foo' })
 }
}
```

### Task Lists

```
- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item
```

- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item

### Tables

You can create tables by assembling a list of words and dividing them with hyphens `-` (for the first row), and then separating each column with a pipe `|`:

```
| First Header | Second Header |
| --------------------------- | ---------------------------- |
| Content from cell 1 | Content from cell 2 |
| Content in the first column | Content in the second column |
```

| First Header | Second Header |
| --------------------------- | ---------------------------- |
| Content from cell 1 | Content from cell 2 |
| Content in the first column | Content in the second column |

### Strikethrough

Any word wrapped with two tildes (like `~~this~~`) will appear ~~crossed out~~.

Markdown Guide Based on Github Flavored Markdown

import BlogPostLayout from '@/components/BlogPostLayout';
import BlogPostImage from '../../../public/images/nxjs.webp';

export default ({ title, publishedAt, children }) => <BlogPostLayout
 title="Images in Next.js: Adding Images in the Tailwind Starter Blog"
 description="In this article we introduce adding images in the tailwind starter blog and the benefits and limitations of the next/image component."
 publishedAt="10/15/2023"
 keywords="images, nextjs, tailwindcss, next-themes"
 imageUrl={BlogPostImage}
>{children}</BlogPostLayout>;


## Introduction

The tailwind starter blog has out of the box support for [Next.js's built-in image component](https://nextjs.org/docs/api-reference/next/image) and automatically swaps out default image tags in markdown or mdx documents to use the Image component provided.

## Usage

To use in a new page route / javascript file, simply import the image component and call it e.g.

```js
import Image from 'next/image'

function Home() {
 return (
 <>
 <h1>My Homepage</h1>
 <Image src="/me.png" alt="Picture of the author" width={500} height={500} />
 Welcome to my homepage!
 </>
 )
}

export default Home
```

For a markdown file, the default image tag can be used and the default `img` tag gets replaced by the `Image` component in the build process.

Assuming we have a file called `ocean.jpg` in `data/img/ocean.jpg`, the following line of code would generate the optimized image.

```
![ocean](/static/images/ocean.jpg)
```

Alternatively, since we are using mdx, we can just use the image component directly! Note, that you would have to provide a fixed width and height. The `img` tag method parses the dimension automatically.

```js
<Image alt="ocean" src="/static/images/ocean.jpg" width={256} height={128} />
```

_Note_: If you try to save the image, it is in webp format, if your browser supports it!

![ocean](/static/images/ocean.jpeg)


 Photo by [YUCAR
 FotoGrafik](https://unsplash.com/@yucar?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
 on
 [Unsplash](https://unsplash.com/s/photos/sea?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)


## Benefits

- Smaller image size with Webp (~30% smaller than jpeg)
- Responsive images - the correct image size is served based on the user's viewport
- Lazy loading - images load as they are scrolled to the viewport
- Avoids [Cumulative Layout Shift](https://web.dev/cls/)
- Optimization on demand instead of build-time - no increase in build time!

## Limitations

- Due to the reliance of `next/image`, unless you are using an external image CDN like Cloudinary or Imgix, it is practically required to use Vercel for hosting. This is because the component acts like a serverless function that calls a highly optimized image CDN.

 If you do not want to be tied to Vercel, you can remove `imgToJsx` in `remarkPlugins` in `lib/mdx.js`. This would avoid substituting the default `img` tag.

 Alternatively, one could wait for image optimization at build time to be supported. A different library, [next-optimized-images](https://github.com/cyrilwanner/next-optimized-images) does that, although it requires transforming the images through webpack which is not done here.

- Images from external links are not passed through `next/image`
- All images have to be stored in the `public` folder e.g `/static/images/ocean.jpeg`

Images in Next.js

import BlogPostLayout from '@/components/BlogPostLayout';
import BlogPostImage from '../../../public/images/nextjs.webp';

export default ({ title, publishedAt, children }) => <BlogPostLayout
 title="What Is Next.js? A Look at the Popular JavaScript Framework"
 description="An introduction to Next.js and its key features."
 publishedAt="10/10/2023"
 keywords="reactjs, nextjs, tailwindcss, next-themes"
 imageUrl={BlogPostImage}
>{children}</BlogPostLayout>;


Next.js is a powerful and popular JavaScript framework used for building modern web applications. Developed by Vercel, Next.js provides a robust environment for server-rendered React applications, allowing developers to create high-performance, SEO-friendly, and scalable web projects.

## Key Features of Next.js

### 1. Server-Side Rendering (SSR)

Next.js excels in server-side rendering, a technique where the server generates the initial HTML content for a page. This means that search engines can easily crawl and index the content, leading to better SEO performance.

### 2. Static Site Generation (SSG)

Next.js supports static site generation, which allows you to pre-render pages at build time. This is ideal for content that doesn't change frequently and can result in blazing-fast loading times.

### 3. API Routes

Next.js provides an easy way to create API routes. This allows you to build backend functionality directly into your application, enabling seamless communication between the client and server.

### 4. Automatic Code Splitting

Next.js intelligently splits your JavaScript bundles, ensuring that only the necessary code is sent to the client. This leads to faster page loads and a better user experience.
<pre>

>**INFO**
>>Next.js provides a seamless developer experience, allowing you to focus on building your application rather than configuring build tools.
</pre>
### 5. Hot Module Replacement (HMR)

During development, Next.js supports Hot Module Replacement, allowing you to see changes in real-time without needing a full page refresh. This greatly speeds up the development process.

### 6. Built-In CSS and Sass Support

Next.js provides built-in support for CSS and Sass, making it easy to style your components. You can import styles directly into your components, or use CSS modules for scoped styling.

### 7. TypeScript Support

Next.js has excellent support for TypeScript, a superset of JavaScript that adds static types to your code. This helps catch potential errors during development and improves code maintainability.

## Getting Started with Next.js

To start a new Next.js project, you can use the following command:

```shell
npx create-next-app@13 my-next-app
```

What Is Next.js? A Look at the Popular JavaScript Framework

import BlogPostLayout from '@/components/BlogPostLayout';
import BlogPostImage from '../../../public/images/4.webp';
import globalStyles from '@/styles/Main.module.css';

export default ({ title, publishedAt, children }) => <BlogPostLayout
 title="Free Custom Email for Your Domain: How to Set Up Email Forwarding with Google without Google Workspace"
 description="How to set up a free custom email for your domain. How to set up email forwarding and alias with Google without Google Workspace"
 publishedAt="02/17/2023"
 keywords="domain, google domains, gmail"
 imageUrl={BlogPostImage}
>{children}</BlogPostLayout>;

Are you considering using a custom email address with your newly purchased domain but hesitant to invest in Google Workspace?
Well, here's some good news! You can take advantage of Google's email forwarding feature for free, without the need for a paid Google Workspace subscription.

This can be a great solution for individuals and small businesses who don't have a large team to manage their email communications.
In this blog post, I will walk you through how to set up email forwarding and alias with Google to send and receive emails as your custom domain email.

## Email forwarding setup

Suppose you have recently purchased a domain name, vj.app, and now you want to be able to send and receive emails using the email address hello@vj.app.
To set this up, you will need to create another free email account on Gmail, which will be used for forwarding emails from your custom to your personal email address.
This additional email account can be one that you've used before or you can create a new one using Gmail.

We will begin by setting up email forwarding from your custom domain email to your personal @gmail.com email.
In this example the personal email will be vj@gmail.com.

**Step 1**: Begin by logging into your domains.google account at [https://domains.google.com/](https://domains.google.com/).

**Step 2**: Click manage on the domain you want to set up your custom email for:


**Step 3**: After navigating to your domain, navigate to the email section on the left sidebar


**Step 4**: In the email panel, on the right, scroll down to the Email forwarding section and click on Add email alias


**Step 5**: In the left field input the alias you want to use for your custom domain email. In this example it will be hello as we are going for hello@vj.app.
In the right field input your personal existing gmail email. The one to which the emails will be forwarded to.


**Step 6**: If the personal email you input in the previous step owns the domain you should be able to skip this step.
Else you will receive a confirmation email on the personal email, to confirm it is you are trying to set up the forwarding.
Therefore, log in to your personal email and verify it is you setting it up.

Aaand for the forwarding we are done! 🎉

The email forwarding should now work. Whenever someone sends email to hello@vj.app you will receive those emails on your personal gmail account.
You won’t be able to send emails from the custom domain email just yet, this is what we will solve in the next section.

## Sending emails from your custom domain email

We can receive emails sent to our custom hello@vj.app email, but we want to also be able to send emails from it to our customers.
Let’s work on that.

**Step 1**: Log into your personal gmail account to which you forwarded emails to in the previous section.
When logged in, in the top right corner of your screen, click on your avatar and navigate to Manage your Google account.


**Step 2**: On the left sidebar navigation click Security


**Step 3**: Under the section called Signing in to Google you should see 2-Step verification.
**If you don’t have 2-Step verification set up, you will have to do that first**.
After that you will be able to set up the App passwords which is what we want, so click on that.


**Step 4**: After clicking on App passwords Google will probably ask you to log in again for security purposes, so let’s log back in.

**Step 5**: Click on Select app and select the Other (Custom name) option


**Step 6**: In the input that appeared make sure to enter Gmail and then press GENERATE


**Step 7**: You will now see a dialog with an App password for your device. **Copy this password**.


**Step 8**: After copying the password, navigate to your personal gmail account. In the top right corner of the screen click on the cog wheel and on See all settings


**Step 9**: In the Settings navigate to the Accounts and Import tab


**Step 10**: Under the Send mail as section click on Add another email address


**Step 11**: Google will open a new window for you where you will now be able to set up an alias for the custom email.
In the Email address field type in the custom email address you are setting it up for.
For the example we are setting it up for hello@vj.app


**Step 12**: On the next step set the SMTP Server to be smtp.gmail.com.
For the Username enter your personal email, not the custom email here.
**For the password paste in the password you copied in Step 7**. Then press Add Account


**Step 13**: You will now see a confirm verification screen, meaning that all that's left is to confirm on the personal email.
Navigate to your email and confirm it. (It will say the email was sent to is your new custom email,
but if you followed the first section of this tutorial then you will simply receive that email on your personal email you set it up for)


You can now receive as well as **send** emails from your new custom domain email! 🎉

When sending emails, when you want to send an email as the new custom email, simply click on the From field and select the custom email you want it to be sent from.


## What if you point your domain to your websites host name servers?

You may have changed the name servers of your domain to point it to your website's hosting provider in order to get your website up and running.
However, this action can result in an unexpected problem - your email forwarding breaks.
This means that while you can still send emails from your custom email address, you may not be able to receive any incoming emails.
This can be a frustrating issue, but don't worry - we will fix it by doing the following.

Simply add MX records in your website’s hosting provider to Google.

The values have to be as following:

<table>
 <thead>
 <tr>
 <th className={globalStyles.hideMobileTable}>Name</th>
 <th className={globalStyles.hideMobileTable}>Type</th>
 <th className={globalStyles.hideMobileTable}>TTL</th>
 <th>Priority</th>
 <th>Value</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td className={globalStyles.hideMobileTable}>Blank or @</td>
 <td className={globalStyles.hideMobileTable}>MX</td>
 <td className={globalStyles.hideMobileTable}>1H</td>
 <td>5</td>
 <td>gmr-smtp-in.l.google.com</td>
 </tr>
 <tr>
 <td className={globalStyles.hideMobileTable}>Blank or @</td>
 <td className={globalStyles.hideMobileTable}>MX</td>
 <td className={globalStyles.hideMobileTable}>1H</td>
 <td>10</td>
 <td>alt1.gmr-smtp-in.l.google.com</td>
 </tr>
 <tr>
 <td className={globalStyles.hideMobileTable}>Blank or @</td>
 <td className={globalStyles.hideMobileTable}>MX</td>
 <td className={globalStyles.hideMobileTable}>1H</td>
 <td>20</td>
 <td>alt2.gmr-smtp-in.l.google.com</td>
 </tr>
 <tr>
 <td className={globalStyles.hideMobileTable}>Blank or @</td>
 <td className={globalStyles.hideMobileTable}>MX</td>
 <td className={globalStyles.hideMobileTable}>1H</td>
 <td>30</td>
 <td>alt3.gmr-smtp-in.l.google.com</td>
 </tr>
 <tr>
 <td className={globalStyles.hideMobileTable}>Blank or @</td>
 <td className={globalStyles.hideMobileTable}>MX</td>
 <td className={globalStyles.hideMobileTable}>1H</td>
 <td>40</td>
 <td>alt4.gmr-smtp-in.l.google.com</td>
 </tr>
 </tbody>
</table>

## Final thoughts

Congratulations! With domain email forwarding now set up, you can enjoy the benefits of a professional-looking custom email address for your domain,
allowing you to send and receive emails seamlessly. This easy-to-implement solution is especially ideal for individuals and small businesses looking
to establish a professional online presence without incurring additional costs.
I hope this guide has been helpful in providing you with the necessary steps to set up email forwarding for your domain.

 
Happy emailing and thanks for reading! ❤️

Free Custom Email for Your Domain - How to Set Up Email Forwarding with Google without Google Workspace

import BlogPostLayout from '@/components/BlogPostLayout';
import BlogPostImage from '../../../public/images/3.webp';

export default ({ title, publishedAt, children }) => <BlogPostLayout
 title="Simple setup for dark and light theme toggle in NextJS"
 description="Set up a dark and light theme with a toggle in NextJS using next-themes and NextJS CSS Modules or TailwindCSS."
 publishedAt="10/15/2023"
 keywords="reactjs, nextjs, tailwindcss, next-themes"
 imageUrl={BlogPostImage}
>{children}</BlogPostLayout>;

Are you looking to implement a dark and light theme on your NextJS website with a toggle switch?
I will show you a super simple implementation, that will take you about 5 minutes to implement.

## What will we be using?

As for this project we will be using a package named next-themes and the default [NextJS CSS Modules](https://beta.nextjs.org/docs/styling/css-modules), but great news!
The library we will be using next-themes works well with [Tailwind CSS](https://tailwindcss.com/) as well, if that is what you’re looking for.
It will provide us with an easy solution to manage your website’s theme.

## Getting started

First we will need to install the necessary dependencies, for this we are assuming you already have Tailwind CSS installed if that is the route you are going.
So let's install the main library we need which is next-themes by running the command:

```shell
npm i next-themes
```

## Setting up next-themes

Inside your _app.js or _app.tsx (depending on if you are using TypeScript in your project) we will wrap the Component with a ThemeProvider from next-themes.

If you are using Tailwind CSS then you will also have to pass attribute="class" to the ThemeProvider else it is not necessary.

This is what our _app.tsx file should look like after the change:

```typescript
import type { AppProps } from 'next/app'
import { ThemeProvider } from "next-themes";

export default function App({ Component, pageProps }: AppProps) {
 return (
 <ThemeProvider>
 <Component {...pageProps} />
 </ThemeProvider>
 );
}
```

## If using Tailwind CSS

If you are using Tailwind CSS then this is an extra step where you have to add a property to your config file tailwindcss.config.js.
We need to tell Tailwind that we’re going to be changing the theme manually instead of purely relying on the users system preference.
In order to do that we need to add the darkMore: "class" property to the config as such:

```typescript
module.exports = {
 darkMode: "class",
 purge: [
 "./components/**/*.{js,ts,jsx,tsx}",
 "./pages/**/*.{js,ts,jsx,tsx}"
 ],
 theme: {},
 variants: {},
 plugins:[]
};
```

## Default styles on globals.css

If you are using Tailwind CSS then you can skip this step, because then you are basically ready to use dark: on classes to use [Dark Mode](https://tailwindcss.com/docs/dark-mode).

If you are not using Tailwind CSS let’s set up some default styles in our globals.css file.
Here we can set our default variables and what they should be in case the theme is set to “dark”:

```css
:root {
 --background: #FFFFFF;
 --foreground: #000000;
}

[data-theme='dark'] {
 --background: #161B26;
 --foreground: white;
}
```

## Theme based on system preference

We can also use the [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media feature to detect if a user has a dark colour theme set on their operating system and set the websites default theme to be dark:

```css
@media (prefers-color-scheme: dark) {
 html {
 color-scheme: dark;
 }
}
```

## Creating a theme toggle button

We have everything set up. Now we can simply use next-themes useTheme() hook to find out the current theme on our website as well as to set another theme as active.

Here is an example theme toggle component using next-themes to toggle the theme between light and dark:

```typescript
import {useTheme} from "next-themes";
import {useEffect, useState} from "react";

const ThemeToggle = () => {
 const { theme, setTheme } = useTheme();
 const [mounted, setMounted] = useState(false);

 useEffect(() => {
 setMounted(true);
 }, []);

 if (!mounted) return null;

 return (
 <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
 Toggle theme
 </button>
 );
}

export default ThemeToggle;
```

Then you can simply use this component inside your navigation, header or wherever you prefer to have a theme toggle button.

We are done, congratulations you have your light and dark themes implemented!

🎉

Simple setup for dark and light theme toggle in NextJS

import BlogPostLayout from '@/components/BlogPostLayout';
import BlogPostImage from '../../../public/images/react.webp';

export default ({ title, publishedAt, children }) => <BlogPostLayout
 title="An Introduction to Getting Started with React Js"
 description="A step-by-step guide to help you begin your journey with React Js."
 publishedAt="10/13/2023"
 keywords="reactjs, cra, vite"
 imageUrl={BlogPostImage}
>{children}</BlogPostLayout>;



## Getting Started with React

Getting started with React is an exciting journey into the world of building dynamic and interactive web applications. Here's a step-by-step guide to help you begin:

### Step 1: Set Up Your Development Environment

Before you start coding in React, you'll need to set up your development environment. Here are the key tools you'll need:

1. Node.js and npm: Install Node.js, which includes npm (Node Package Manager). You can download it from the [official website](https://nodejs.org/).

### Step 2: Create Your First React App

Now that your environment is set up, you can create your first React application.

1. Create React App: Use the following command to create a new React app:

```bash
npx create-react-app my-first-app
```
This command sets up a new React project with all the necessary configurations and a basic folder structure.

2. Navigate to Your App: Move into the newly created app directory:

```bash
cd my-first-app
```
### Step 3: Run Your React App

You're now ready to see your app in action.

1. Start the Development Server:

```bash
npm start
```

This command will start a development server and open your React app in your default web browser.

### Step 4: Understand the Project Structure

Take a moment to familiarize yourself with the project structure:

- \`src\`: This folder contains your application's source code.
- \`public\`: This is where static assets like images or HTML files go.
- \`App.js\`: This is the main component where you start building your app.

### Step 5: Edit Your First React Component

Open the \`src/App.js\` file in your preferred code editor. You'll see something like this:

```jsx
import React from 'react';
import './App.css';

function App() {
 return (
 <div className="App">
 <header className="App-header">
 
 Edit <code>src/App.js</code> and save to reload.
 
 <a
 className="App-link"
 href="https://reactjs.org"
 target="_blank"
 rel="noopener noreferrer"
 >
 Learn React
 </a>
 </header>
 </div>
 );
}

export default App;
```
### Step 6: Learn the Basics of React

To start building more complex applications, you'll need to learn the basics of React:

- **Components**: Understand how to create and use components to structure your application.
- **Props**: Learn how to pass data from one component to another.
- **State**: Explore how to manage the internal state of a component.
- **Lifecycle Methods (in Class Components)**: These are methods that allow you to perform actions at specific points in a component's life.

### Step 7: Build Your App

With a solid understanding of React, you can now start building your own applications. Try creating new components, managing state, and passing props between them.

### Step 8: Get Familiar with React Router

If you're building a multi-page application, you'll want to use React Router to handle navigation.

### Step 9: Learn about State Management (e.g., Redux)

As your application grows, you may need a more robust way to manage state. Libraries like Redux can help with this.

### Step 10: Explore Styling Options

You can use plain CSS, CSS-in-JS libraries, or popular CSS frameworks like Bootstrap to style your React application.

### Step 11: Deploy Your App

Once your app is ready, you can deploy it to a web hosting service like Netlify, Vercel, or GitHub Pages.

Congratulations! 🥳 You're well on your way to becoming a React developer. Keep building, learning, and exploring more advanced topics as you progress. Happy coding!


 
Thanks for reading! ❤️

An Introduction to Getting Started with React Js

import BlogPostLayout from '@/components/BlogPostLayout';
import BlogPostImage from '../../../public/images/landscape.webp';

export default ({ title, publishedAt, children }) => <BlogPostLayout
 title="Welcome Everyone on my new portfolio and blog"
 description="Welcome on my new portfolio and blog"
 publishedAt="02/12/2023"
 keywords="NextJs, reactjs, open source, blog"
 imageUrl={BlogPostImage}
 hideTableOfContents
 hideShareButton
>{children}</BlogPostLayout>;

Welcome to my new portfolio and blog [**Here**](#)!

As a web developer, I understand the importance of showcasing my work and sharing my experiences.
That's why I have created this website, to give you a glimpse into my journey as a web developer and to share my knowledge and expertise with the community.

## Source Code

For those who are interested in source code of this website, it is available on [**Github**](https://github.com/).
You can use the code for your own projects in any way you want.
I believe that open-source projects contribute to the growth of the developer community, and I am proud to be a part of it.

## What kind of content can you expect?

I will be posting regularly about my journey as a web developer, including my open-source projects and tutorials.
I will also be sharing my personal projects, the problems I encounter, and how I solve them.
Hopefully by sharing my experiences, I can help others avoid similar obstacles and learn from my mistakes.
Additionally, I will be sharing tips and tricks that I have learned along the way to help others grow in their careers as web developers.

So, whether you are just starting out in the world of web development or you are a seasoned professional, I invite you to join me on this journey.
 
Thanks for reading! ❤️

Welcome to Slate 👋 !!
our guide to the latest in tech, offering expert insights and in-depth analysis on innovation.

Markdown Guide Based on Github Flavored Markdown

Images in Next.js

What Is Next.js? A Look at the Popular JavaScript Framework

Free Custom Email for Your Domain - How to Set Up Email Forwarding with Goo...

Simple setup for dark and light theme toggle in NextJS

An Introduction to Getting Started with React Js