
> In this guide I'll explain why we decide to migrate server components for Hardal 🌭 using Next.js.

As you know, maybe not, [Hardal](https://usehardal.com/) is the headless web2 and **web3** analytics tool that I developed for helps developers and marketers optimize dApps or websites and understand their **target audience** on the blockchain.

And we currently using this core tech stack on **Hardal**:

- [Nextjs](https://nextjs.org/blog/next-12)
- [Supabase](https://supabase.com/)
- [Prisma](https://www.prisma.io/)

## What is different client or server components?

Well, this is the huge because since we manage the entire infrastructure with [Typescript](https://www.typescriptlang.org/) and [typesafe ORM](https://www.prisma.io/typescript), what we can do on the client side and server side is limited.

[Next.js 13.4](https://nextjs.org/blog/next-13-4) came with some great features like:

- React Server Components
- Nested Routes & Layouts
- Streaming & Suspense

Here is the example of new app router:

```jsx
// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

// app/page.js
export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}
```

And if you wanted to fetch data, by default server components fetch the data securely on the server.

```jsx
// app/page.js

export default async function Page() {
  const res = await fetch('https://api.example.com/...');
  // The return value is *not* serialized
  // You can use Date, Map, Set, etc.
  const data = res.json();

  return '.
```

## Client components

Client-side rendering (CSR) is the traditional approach where the
initial HTML is minimal, and the rendering and data fetching occur on
the client-side, typically using JavaScript. In Next.js, you can create
client-side components by simply writing React components without the `getServerSideProps` function.

When a user visits a page containing client-side components,
Next.js loads the required JavaScript bundle on the client-side,
allowing dynamic rendering and interactivity.

> Is that make sense, right?

## Why we choose server components?

It is perfect to design many APIs we use especially for web2 and web3 migrations, and our components that need to work in real-time, using only "use server" or "use client", independent of the client side.

![Client and server side compare](https://res.cloudinary.com/raufsamestone/image/upload/v1684677995/blog-contents/migrate-server-components/lrn3cqjrbz4pxve4avl5.png)

> 🔗 source: [https://nextjs.org/docs/getting-started/react-essentials](https://nextjs.org/docs/getting-started/react-essentials)

Also there some API performance issues when users trying to client-side rendering charts for real-time logs.

And we fixed this performance issues by using server components for each analytics components. ✌️

![Fixed analytics component issues](https://res.cloudinary.com/raufsamestone/image/upload/v1684677995/blog-contents/migrate-server-components/sengusf2cdgoe3y3clcq.png)

## Why tech stack is matter?

Many JS developers have a hard time keeping up with new technology. But in this flow, I think that we always have to keep up with innovation. Here is key points, why tech stack is matter, especially on startups.

- Scalability and performance
- Developer productivity
- Compatibility and integration

## Choosing the right stack

When deciding between server-side and client-side components, consider the nature of your application and the specific requirements of each components.

To display static content or require optimal web performance, server-side rendering for web analytics components like diagrams, charts, log tables, is a suitable choice for us. 👍

Using this stack, we can able to securely accessing to server and it is already perfect for the concept of Hardal's [headless web analytics](https://docs.usehardal.com/docs#why-we-need-to-headless-web-analytics)

<hr/>

**Sources**:

- [https://vercel.com/changelog/next-js-13-4](https://vercel.com/changelog/next-js-13-4)
- [https://nextjs.org/docs](https://nextjs.org/docs)
- [https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)

<hr/>

Happy coding. 🪄


Why we migrate to server components on Hardal?

> I will not mention about sitemap.xml's or SEO. You can get details from Google, [here](https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap). Captain Obvious, 2023

Assuming As you are already familiar with **Next.js**, I'm sure you are already cereate your blog posts or contents using **markdown** or **MDX**.

## How to Add Sitemaps to a Next.js Project

There is two methods for this. First of all, manually, like this:

```JS
   
   <xml version="1.0" encoding="UTF-8">
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
       <loc>http://www.example.com/foo</loc>
       <lastmod>2021-06-01</lastmod>
     </url>
   </urlset>
   </xml>
```

> Which is not ideal! 😭

Second methods is using `getServerSideProps` by creating a file called `pages/sitemap.xml.js`

```JS
//pages/sitemap.xml.js
const EXTERNAL_DATA_URL = 'https://jsonplaceholder.typicode.com/posts';

function generateSiteMap(posts) {
  return `<?xml version="1.0" encoding="UTF-8"?>
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     
     <url>
       <loc>https://jsonplaceholder.typicode.com</loc>
     </url>
     <url>
       <loc>https://jsonplaceholder.typicode.com/guide</loc>
     </url>
     ${posts
       .map(({ id }) => {
         return `
       <url>
           <loc>${`${EXTERNAL_DATA_URL}/${id}`}</loc>
       </url>
     `;
       })
       .join('')}
   </urlset>
 `;
}

function SiteMap() {
  // getServerSideProps will do the heavy lifting
}

export async function getServerSideProps({ res }) {
  // We make an API call to gather the URLs for our site
  const request = await fetch(EXTERNAL_DATA_URL);
  const posts = await request.json();

  // We generate the XML sitemap with the posts data
  const sitemap = generateSiteMap(posts);

  res.setHeader('Content-Type', 'text/xml');
  // we send the XML to the browser
  res.write(sitemap);
  res.end();

  return {
    props: {},
  };
}

export default SiteMap;

```

<hr/>

## How about MDX files?

This is the tricky part. Assuming yourt MD or MDX content file tree like that:

```JS
.
├── components
│   ├── Footer.js
│   └── Header.js
├── contents
│   ├── about-us
│   │   └── index.md
│   ├── blog
│   │   ├── first-post.md
│   │   ├── second-post.md
│   │   └── third-post.md
│   └── index.md
```

You have to get this MD or MDX files through your API.

Create a new Pages API file like this, `pages/api/pages.js`

```js
//pages/api/pages.js
import fs from "fs";
import path from "path";

export function getPages() {
  const pagesDirectory = path.join(process.cwd(), "content");
  const slugs = fs
    .readdirSync(pagesDirectory)
    .filter((file) => file.endsWith(".md") && !file.startsWith("_"))
    .map((file) => {
      const slug = file.replace(".md", "");
      return {
        slug,
        path: `${slug}`,
      };
    });
  return slugs;
}

export default function handler(req, res) {
  const pages = getPages();
  res.status(200).json(pages);
}
```

In this, we'll get all MD or MDX files, that generated when building your Next.js app, and then push to API response directly.

Your API response should be like that:

![nextjs api response](https://res.cloudinary.com/raufsamestone/image/upload/v1682957175/blog-contents/next-js-sitemap/wanbaiklefoil0suwhey.png)

Then finally, we can update our `sitemap.xml.js` file like this:

```JS
import { getPages } from "./api/pages";

function generateSiteMap(pages) {
  const siteUrl = "https://example.com";
  return `<?xml version="1.0" encoding="UTF-8"?>
     <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
       
       <url>
       <loc>${`${siteUrl}/about`}</loc>
       </url>
       ${pages
         .map((page) => {
           return `
         <url>
             <loc>${`${siteUrl}/${page.path}`}</loc>
         </url>
       `;
         })
         .join("")}
     </urlset>
   `;
}

function Sitemap() {
  // Just a placeholder component, since we're not rendering anything
  return null;
}

export async function getServerSideProps({ res }) {
  const pages = getPages(); // Make sure to await the response
  const sitemapXml = generateSiteMap(pages);

  res.setHeader("Content-Type", "text/xml");
  res.write(sitemapXml);
  res.end();

  // Return an empty props object, since we're not rendering any content
  return {
    props: {},
  };
}

export default Sitemap;
```

Congrats! 🎊

Here is the our final XML:

![next js sitemap xml](https://res.cloudinary.com/raufsamestone/image/upload/v1682958711/blog-contents/next-js-sitemap/exov9p0boigpmmczkyxy.png)

<hr/>

You can see the more detailed info about _Sitemaps_ on Nextjs [here](https://nextjs.org/learn/seo/crawling-and-indexing/xml-sitemaps).

<hr/>

Happy coding. 🪄

Generating sitemap.xml from dynamic MDX files using Next.js API


I suggest you include the **web3** environment in your growth strategy. Therefore, you should use technical implementations decentralized networks like [subgraph](https://thegraph.com/explorer) or **IPFS**. 

<hr/>

In this guide, you'll learn how to send image files to **[IPFS](https://ipfs.io/)** using **ipfs-http-client** and Nextjs

You can see the demo [here](https://url-to-ipfs.netlify.app/) or jump to directly [GitHub](https://github.com/raufsamestone/url-to-ipfs)

![Demo](https://res.cloudinary.com/raufsamestone/image/upload/v1648465550/blog-contents/ipfs/ss_eul4ra.jpg)

## Pre-requests

- Node 15 >

## Getting started

Create a simple next js app:

```jsx
npx create-next-app ipfs
```

Add IPFS HTTP client library using yarn:

```jsx
ipfs-http-client
```

Create a new constant for **IPFS** gateway. In this case, we will use [Infura](https://docs.infura.io/infura) API.

```jsx
const client = create("https://ipfs.infura.io:5001/api/v0");
```

Get a random image URL from **Unsplash.** You can see more detail in [here](https://unsplash.com/documentation#get-a-random-photo)**.**  

```jsx
async function getImage() {
fetch(https://source.unsplash.com/500x500/?beach).then((response) => {
let imageURL = response.url;
setImageURL(imageURL);
});
}
```

Or you can use your own fetching solution like custom form data, Cloudinary etc.

Then upload your file to IPFS.

The critical thing is, you should fetch the **image URL**  as a **blob** object.

```jsx
const blobFile = await fetch(imageURL).then((r) => r.blob());
```

Create a new function as **uploadFile**

```jsx
async function uploadFile() {
const blobFile = await fetch(imageURL).then((r) => r.blob());
try {
const added = await client.add(blobFile);
const url = https://ipfs.infura.io/ipfs/${added.path};
updateIPFSURL(url);
} catch (error) {
console.log("Error uploading file: ", error);
}
}
```

Finally, you are ready to fetch and image image object from URL and send to IPFS. 

Clone the full repository [here](https://github.com/raufsamestone/url-to-ipfs) and run;

```jsx
yarn dev
```

<hr/>

You can see the more detailed cases about Web3 from Nader Dabit’s posts [here](https://dev.to/edge-and-node/uploading-files-to-ipfs-from-a-web-application-50a).

<hr/>

Thanks for reading. 👋 Don't forget to subscribe me on [Medium](https://raufsamestone.medium.com/subscribe) or [Dev.to](https://dev.to/raufsamestone) 


How to send an image from Unsplash to IPFS?


In the server-side UX tests, your code should perform all the tasks that Optimize does in the client-side trial. For example, your code targets audiences and consistently delivers the appropriate variant for each user. You only use the Optimize interface to create experiments, set goals, create variables, and view reports. 

More details about Google Optimize Server-side [here](https://developers.google.com/optimize/devguides/experiments?technology=ga4)

<hr/>

In this guide, you will learn how to implement a **Google Optimize** **MVT** (Multivariate Test) in your server-side app like **Next.js** and send your data to **Google Analytics 4.**

### Pre-requirements

- Google Analytics 4
- Google Tag Manager
- Google Optimize
- Your Next.js app

## Add Google Tag Manager to your Next.js app

Open your terminal add to create a new next.js app with NPX.

```jsx
npx create-next-app
```

If you have already a next.js app, you can create a new file called `_document.js` and add your **GTM** scripts to `<Head>` and `<body>` components.

More details about the custom documents are [here](https://nextjs.org/docs/advanced-features/custom-document).

```jsx
// _document.js

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  const GTMID = "GTM-XXXX" // I recommend using .env for this variable.

  return (
    <Html>
      <Head>
        <script
          dangerouslySetInnerHTML={{
            __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','${GTMID}');`,
          }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
        <noscript
        dangerouslySetInnerHTML={{
          __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${GTMID}" height="0" width="0" style="display: none; visibility: hidden;" />`,
        }}
      />
      </body>
    </Html>
  );
}
```

## Connect your Google Optimize account to GTM and GA4

Go to Google Optimize, and click Container settings. Link your GA4 property from the measurement section.

And then copy your **Optimize** **Container ID.**

![https://res.cloudinary.com/raufsamestone/image/upload/v1647419100/blog-contents/optimize-ssr/link_optimize_rjj7x3.png](https://res.cloudinary.com/raufsamestone/image/upload/v1647419100/blog-contents/optimize-ssr/link_optimize_rjj7x3.png)

Then go to your Google Tag Manager account. Create a new tag, and select **Google Optimize.** Just paste your **Optimize Container ID.** 

![https://res.cloudinary.com/raufsamestone/image/upload/v1647419100/blog-contents/optimize-ssr/gtm_optimize_r2okbc.png](https://res.cloudinary.com/raufsamestone/image/upload/v1647419100/blog-contents/optimize-ssr/gtm_optimize_r2okbc.png)

## Creating new MVT

Go to your **Google Optimize** account, and create a new experience

## Add your editor page URL

If you are working on your local machine, you can just write simply [localhost:3000/](http://localhost:3000/) or whatever your host and port name. 

Google Optimize editor page URL is trail slash sensitive, so I recommend adding the slashes.

And choose your experience type as **Multivariate test.**

![https://res.cloudinary.com/raufsamestone/image/upload/v1647419100/blog-contents/optimize-ssr/create_mtr_cd6obn.png](https://res.cloudinary.com/raufsamestone/image/upload/v1647419100/blog-contents/optimize-ssr/create_mtr_cd6obn.png)

## Audience targeting

You can target your audience with specific variables like URL query parameter, cookie, JS, and more. 

In this workshop, we’ll use URL parameters. Add a new Query Key, like `mvt`. 

![Optimize parameters mvt](https://res.cloudinary.com/raufsamestone/image/upload/v1647419101/blog-contents/optimize-ssr/query_parameter_mvt_bfsoih.png)

And you should give a specified parameter that queries like true. And also don’t forget to check your rule, if it's not working you can debug your target variable, before publishing. 

![Google Optimize query param checks](https://res.cloudinary.com/raufsamestone/image/upload/v1647419100/blog-contents/optimize-ssr/query_parameter_check_url_pe2jjg.png)

## Deploy your experiments

Before deployment, check changed sections. To edit your sections, which is Editor Page, you have to use Chrome and Google Optimize extension.

![Google Optimize MVT variants](https://res.cloudinary.com/raufsamestone/image/upload/v1647441336/blog-contents/optimize-ssr/variants.png)

Also, you should check your multivariate combination details in the top section like **A1 to B0** or **A1 to B1.** 

And if you don't want separated variants in your experiments, create personalization for that. More details about **personalization** in [here.](https://support.google.com/optimize/answer/9112930?hl=en&ref_topic=11608623)

![Google optimize personalization](https://res.cloudinary.com/raufsamestone/image/upload/v1647419101/blog-contents/optimize-ssr/create_personalization_bnm8wi.png)

## Live test

Launch your Nextjs app 

```jsx
yarn dev
```

Go to `http://localhost:3000/?mvt=true`

If your experiments work with success, you should see **variants A1 to B0** on your landing page.

![https://res.cloudinary.com/raufsamestone/image/upload/v1647419101/blog-contents/optimize-ssr/variant_2_zcedur.png](https://res.cloudinary.com/raufsamestone/image/upload/v1647419101/blog-contents/optimize-ssr/variant_2_zcedur.png)

After a few session changes, you will see that it goes to **variant A1 to B1.**

![https://res.cloudinary.com/raufsamestone/image/upload/v1647419101/blog-contents/optimize-ssr/variant_1_mn0mnd.png](https://res.cloudinary.com/raufsamestone/image/upload/v1647419101/blog-contents/optimize-ssr/variant_1_mn0mnd.png)
  
<hr/>

Thanks for reading. 👋 Don't forget to subscribe me on [Medium](https://raufsamestone.medium.com/subscribe) or [Dev.to](https://dev.to/raufsamestone) 
  
<hr/>

Check the resources from Google Optimize [here](https://support.google.com/optimize/answer/6370723)


Multivariate testing (MVT) with Google Optimize and Next.js for UX analytics


You can create a simple serverless app which is creating **SQL** queries from regular English syntax like this:

`Create a SQL request to find all users who visited from Chrome and Safari`

This can be very useful, especially for **BigQuery** SQL queries from **Google Analytics**.

If you want to jump to the GitHub repo, you can get it from [here](https://github.com/raufsamestone/open-ai-sql)

It’s really funny to create complex SQL queries like this. Before you begin, you have to know about your Open AI account billing methods from [here](https://openai.com/api/pricing/). 

<hr/>

Basically, multiple models, each with different capabilities and price points. **Ada** is the fastest model, while **Davinci** is the most powerful.

**Example token usage:** Prices are per 1,000 tokens. You can think of tokens as pieces of words, where 1,000 tokens are about 750 words. This paragraph is 35 tokens.

Your each model request calculated on your dashboard: 

![Open AI Dashboard](https://res.cloudinary.com/raufsamestone/image/upload/v1645378010/blog-contents/open-ai-sql/uxp0hifpftfcairhajjq.png) 

In this project, I use **[GPT-3 Engine and Ada model](https://beta.openai.com/docs/engines/gpt-3)** by the way.

![Demo screen shot](https://res.cloudinary.com/raufsamestone/image/upload/v1645376610/blog-contents/open-ai-sql/mde55vrtjxe8peqaclbf.png)

## Create your Open AI account

Go to [Open AI](http://beta.openai.com) and create a new account if you don’t have one. Go to API Keys from [here](https://beta.openai.com/account/api-keys) and make sure you have an API Key.

Do not share your API key with others, or expose it in the browser or other client-side code. So, I recommended using .env. 

![Your open-ai API key ](https://res.cloudinary.com/raufsamestone/image/upload/v1645376830/blog-contents/open-ai-sql/pgpa9dw24zwwcnq0qpgm.png)

## Create your app

Create an empty Next.js app:

```jsx
yarn create-next-app
```

Add **[openai](https://www.npmjs.com/package/openai)** package using yarn:

```jsx
yarn add openai
```

Then create a new API file for your CPT-3 requests: 

```jsx
//pages/api/ai.js

const { Configuration, OpenAIApi } = require("openai");

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

export default async function handler(req, res) {
  let promptData = req.body.promptData;
  const response = await openai.createCompletion("text-ada-001", {
    prompt: promptData,
    temperature: 0.3,
    max_tokens: 60,
    top_p: 1,
    frequency_penalty: 0,
    presence_penalty: 0,
  });
  res.status(200).json({ data: `${response.data.choices[0].text}` });
}
```

Build POST function for the JSON responses:

```jsx
//pages/index.js

useEffect(() => {
    const fetchData = async () => {
      if (search) {
        setIsLoading(true);
        const res = await fetch(`/api/ai`, {
          body: JSON.stringify({
            promptData: search,
          }),
          headers: {
            "Content-Type": "application/json",
          },
          method: "POST",
        });
        const data = await res.json();
        setData(data);
        setIsLoading(false);
      }
    };
    fetchData();
  }, [search])
```

Your full index.js code should be like this: 

```jsx
//pages/index.js

import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import { useState, useEffect } from "react";

export default function Home() {
  const [data, setData] = useState({ data: "" });
  const [query, setQuery] = useState();
  const [search, setSearch] = useState();
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      if (search) {
        setIsLoading(true);
        const res = await fetch(`/api/ai`, {
          body: JSON.stringify({
            promptData: search,
          }),
          headers: {
            "Content-Type": "application/json",
          },
          method: "POST",
        });
        const data = await res.json();
        setData(data);
        setIsLoading(false);
      }
    };
    fetchData();
  }, [search]);

  const defaultPrompt =
    "Create a SQL request to find all users who visited from Chrome and Safari";

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <br />{" "}
          <a href="https://openai.com/api/">Open AI SQL Generator</a>
        </h1>

        <div>
          <div>
            <h3>Your SQL request: </h3>
            <textarea
              type="text"
              cols="50"
              rows="3"
              placeholder={defaultPrompt}
              defaultValue={defaultPrompt}
              value={query}
              onChange={(event) => setQuery(event.target.value)}
            />
            <br />
            <button
              type="button"
              className={styles.button}
              onClick={() => setSearch(query)}
            >
              Generate
            </button>
            {isLoading ? (
              <div>Loading ...</div>
            ) : (
              <>
                <p className={styles.description}>Your SQL query 👇</p>
                <code className={styles.code}>{data.data} </code>
              </>
            )}
          </div>
        </div>
      </main>
    </div>
  );
}
```

Build your app, and start to create new SQL requests. ⚡️

```jsx
yarn dev
```

<hr/>

Please feel free to clone my repository [here](http://github.com/raufsamestone/open-ai-sql/)

Sources: 
- [https://harishgarg.com/writing/how-to-build-a-serverless-gpt-3-powered-using-nextjs-react/](https://harishgarg.com/writing/how-to-build-a-serverless-gpt-3-powered-using-nextjs-react/)
- [https://www.twilio.com/blog/getting-started-with-openai-s-gpt-3-in-node-js](https://www.twilio.com/blog/getting-started-with-openai-s-gpt-3-in-node-js)




Build Your Serverless SQL Generator App Using GPT-3 and Next.js


You may want to run campaigns that serve different landing pages to your users, especially in **B2C** mailing campaigns.

For this, instead of creating separate landing pages for each of your campaigns, you can develop more effective automation and marketing techniques using modern web technologies like [NextJS](https://nextjs.org/).

Assuming that the user clicks on our **UTM** campaigns, we will show a different landing page depending on the cookie status, without changing the page.

![Remarketing with cookies](https://res.cloudinary.com/raufsamestone/image/upload/v1642353975/blog-contents/remarketing-cookie/pg5hxxbpqsvmhncor0ub.png)

Let's see what we're going:

- Creating a new app with NextJs.
- Building [middleware](https://nextjs.org/docs/middleware) for rewrite functions.
- Create and set cookie status for UTM campaign values.

Create a new web app using. [More details here.](https://nextjs.org/learn/basics/create-nextjs-app/setup)

```jsx
npx create-next-app
```

Create a new typescript file called **\_middleware.ts** on **/pages**.

Import objects from [Next Server](https://nextjs.org/docs/api-reference/next/server) for Middleware API.

```jsx
import { NextResponse } from "next/server";
import type { NextFetchEvent, NextRequest } from "next/server";
```

Add a new function for rewriting. Basically, the task of this function is to fetch the user’s cookie status, and rewrite them to the campaign page without leaving it on the same page path.

```jsx
//pages/_middleware.ts

const PUBLIC_FILE = /\.(.*)$/;

export async function middleware(req: NextRequest, ev: NextFetchEvent) {
  let response = NextResponse.next();

  if (PUBLIC_FILE.test(req.nextUrl.pathname)) {
    return response;
  }

  if (req.nextUrl.pathname === "/") {
    switch (true) {
      case Boolean(req.cookies["remarketing"] === "true"):
        response = NextResponse.rewrite("/marketing-page");
        break;
      default:
        response = NextResponse.next();
    }
    return response;
  }
  return response;
}
```

Create a new marketing page called **/marketing-page**, you can duplicate the index page for now.

This page will use for our main redirected campaign page and changing cookie status to false.

For that, we use [react-cookie.](https://www.npmjs.com/package/react-cookie)

```jsx
//pages/marketing-page.js

const [cookie, setCookie] = useCookies();

const setRemarketingCookie = async () => {
  try {
    setCookie("remarketing", "false");
  } catch (err) {
    console.log(err);
  }
};
```

And we will run this function for when the user wants to cancel campaign and return to the home page.

```jsx
//pages/marketing-page.js

<div className={styles.grid} onClick={setRemarketingCookie}>
  <Link href="/">
    <a href="/" className={styles.card}>
      <h2>Back to main page &rarr;</h2>
      <p>I don't want it!</p>
    </a>
  </Link>
</div>
```

Let's refactor our original homepage. We use **useRouter to** check the current URL and, extracting UTM campaign values like Campaign, Medium. etc.

```jsx
//pages/index.js

const [cookie, setCookie] = useCookies();
const router = useRouter();

const cookieName = "remarketing";
const utmCampaign = "lead_generation";
const utmMedium = "email";

const matchCampaign =
  router.query.utm_campaign === utmCampaign &&
  router.query.utm_medium === utmMedium;

useEffect(() => {
  if (matchCampaign) {
    setCookie(cookieName, "true");
  }
});
```

Congratulations! 🎉

Now, the users when clicking any UTM campaign, our cookie and marketing page will change.

![Final stage](https://res.cloudinary.com/raufsamestone/video/upload/v1642355675/blog-contents/remarketing-cookie/testin-middleware-next-marketing-coookie-dglzzl.gif)

Also, you can send to Google Analytics, this cookie value as a custom event for which users cancel your campaign.

- Clone the repository in [here](https://github.com/raufsamestone/next-middleware-remarketing-with-cookie).
- Watch the [Marketing Automation With Customer.io + Next js session](https://www.youtube.com/watch?v=PIOMMQuwq8Y)


Remarketing with Cookies


You may want to connect **Google Analytics** with databases such as **CRM** for growth and remarketing strategies.

If you want to know about the Google Analytics to CRM integration, you can find Google’s official summary [here](https://developers.google.com/analytics/solutions/crm-integration). 

In this case, we will send any user data to our **SQL** database using Supabase through **Google Tag Manager**. It’s an experimental method, so I’m not recommended for production because of real-time SQL data sync issues. 

First of all, you need to open a new **supabase** account and create a new table included columns like **userID**, **userLogin**, **userSegment**, etc.

![Creating supabase database](https://res.cloudinary.com/raufsamestone/image/upload/v1641650194/blog-contents/ga-to-supabase/ft5uudyh1xda9sbjyrz6.png)

Be sure your database is RLS (row-level security) disabled. This is required for fetching and writing data to your table.

![RLS disabled](https://res.cloudinary.com/raufsamestone/image/upload/v1641650223/blog-contents/ga-to-supabase/af2fxldizy2htmtve7j2.png)

Go to your GTM account and create a new tag for Supabase CDN and script. 

![GTM tags](https://res.cloudinary.com/raufsamestone/image/upload/v1641650230/blog-contents/ga-to-supabase/ouqrkepawjecysyi4anm.png)

And then inject Supabase script CDN as Custom HTML Tag.

```jsx
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>
```

Alternatively, you can try to add <head> section for loading CDN like this;

```jsx
var SupabaseCDN = document.createElement('script');
SupabaseCDN.src = 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js';
document.head.appendChild(SupabaseCDN);
```

In Supabase Post Data Script, you should set up for auth configuration like **Key** and **API** URL. You can find [here](https://supabase.com/docs/guides/api) where is your API settings.

```jsx
var SUPABASE_URL = {{Supabase API URL}}
var SUPABASE_KEY = {{Supabase Key}}

var supabase = supabase.createClient(SUPABASE_URL, SUPABASE_KEY,  {
    fetch: fetch.bind(globalThis)
})
```

And create your data scheme for dataLayer and SQL. For example, our table has a **userID**, we should push our **clientID** which is generated by GA.

```jsx
ga(function(tracker) {
  var clientId = tracker.get('clientId');

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  userID: clientId
  userData: userData 
});

var userDataArray = [userData]
```

You can create external dataLayer as an array for the user source.

And you can insert this user-based generated data to SQL like this on Node environments.

```jsx
async function addToCRMList() {
    let { data, error } = await supabase
        .from('CRM')
        .insert({
           userData: userData
        })
    if (error) console.log('error', error)
    return data
}
```

But unfortunately, Google Tag Manager’s code compiler doesn’t support **ES6**, so you will have to compile manually to ES5, a very ugly version. You can use [Babel](https://babeljs.io)’s playground at this time. 

```jsx
function addToCRMList() {
    var _ref, data, error;
    return regeneratorRuntime.async(function updateCRMList$(context$1$0) {
        while (1) switch (context$1$0.prev = context$1$0.next) {
            case 0:
                context$1$0.next = 2;
                return regeneratorRuntime.awrap(supabase.from('CRM').insert({ userData: userData}));
            case 2:
                _ref = context$1$0.sent;
                data = _ref.data;
                error = _ref.error;

                if (error) console.log('error', error);
                return context$1$0.abrupt('return', data);

            case 7:
            case 'end':
                return context$1$0.stop();
        }
    }, null, this);
}  
//Send data to Supabase
addToCRMList().then(function (data) {
   console.log(data);
});
```

Add an All Pages trigger for this tag:

![Supabase GTM script trigger](https://res.cloudinary.com/raufsamestone/image/upload/v1641650310/blog-contents/ga-to-supabase/wiqejcmrtr9oqdlzbits.png)

Finally, when your users visit your website, always log to the database and each row can be matched with dataLayer array.

![final database](https://res.cloudinary.com/raufsamestone/image/upload/v1641650313/blog-contents/ga-to-supabase/rhoxjvdwovsayiwpfokj.png)



Send Google Analytics data to your SQL with Supabase


In **Chrome 97**, the Record feature has been added to better measure web analytics measurements and user behaviors.

In order to test this beta feature, you must first download Chrome 97 from [here](https://www.google.com/chrome/beta/).

To open the Recorder panel, go to dev tools with right-click inspect, open "run command" using this shortcut 👉 `shift + ⌘ + p`  and search "recorder".

![https://res.cloudinary.com/raufsamestone/image/upload/v1641126868/blog-contents/chrome-recorder/rk5xcho4wuw4ynluh3ks.jpg](https://res.cloudinary.com/raufsamestone/image/upload/v1641126868/blog-contents/chrome-recorder/rk5xcho4wuw4ynluh3ks.jpg)

For example, you can measure your e-commerce site **product clicks or** **add to cart** events

![https://res.cloudinary.com/raufsamestone/image/upload/v1641127099/blog-contents/chrome-recorder/f7ttcntpgk1o9xqrrkll.png](https://res.cloudinary.com/raufsamestone/image/upload/v1641127099/blog-contents/chrome-recorder/f7ttcntpgk1o9xqrrkll.png)

You can automate your test events by replaying your previous recordings like **add to cart** and **remove to cart** events for your **[Google Tag Manager Enhanced Ecommerce](https://developers.google.com/analytics/devguides/collection/ua/gtm/enhanced-ecommerce#cart)** tests.

![https://res.cloudinary.com/raufsamestone/image/upload/v1641126867/blog-contents/chrome-recorder/dwsbmzmde4insglv3yx0.jpg](https://res.cloudinary.com/raufsamestone/image/upload/v1641126867/blog-contents/chrome-recorder/dwsbmzmde4insglv3yx0.jpg)

Update existing events in recordings, assign new events and frames. It is a hot feature, especially in **SPA**s.

You can also create multiple functions by adding another event to the record. For example, as a **Search Query** case, you can simulate a user who searches only for **jackets.**

![https://res.cloudinary.com/raufsamestone/image/upload/v1641126867/blog-contents/chrome-recorder/rzgcbve1f3cc5uxwt7rs.jpg](https://res.cloudinary.com/raufsamestone/image/upload/v1641126867/blog-contents/chrome-recorder/rzgcbve1f3cc5uxwt7rs.jpg)

And add other searches like **tshirt** by adding a new step.

![https://res.cloudinary.com/raufsamestone/image/upload/v1641127886/blog-contents/chrome-recorder/iopeh0dpecr9jkfmmgfc.jpg](https://res.cloudinary.com/raufsamestone/image/upload/v1641127886/blog-contents/chrome-recorder/iopeh0dpecr9jkfmmgfc.jpg)

To create different user records by manipulating the events after the slider in product impression measurements, you can specify the user's next click as add to wishlist like this.

![https://res.cloudinary.com/raufsamestone/image/upload/v1641127340/blog-contents/chrome-recorder/vp7zojelun5ppfaqyk98.jpg](https://res.cloudinary.com/raufsamestone/image/upload/v1641127340/blog-contents/chrome-recorder/vp7zojelun5ppfaqyk98.jpg)

Also, you can export these records to [Puppeteer](https://pptr.dev/) for detailed performance and measurement tests.

You can find more about chrome’s new feature 🔗 :  
- [https://www.youtube.com/watch?v=rMUayh1QPYs](https://www.youtube.com/watch?v=rMUayh1QPYs)
- [https://developer.chrome.com/docs/devtools/recorder/](https://developer.chrome.com/docs/devtools/recorder/)


Measure User Flows with Chrome’s Recorder


This is how you improve your web performance with adaptive serve your images or components if your user's device battery status is down or internet connection slow.

In addition to the use of new generation image formats such as **webp,** **AVIF** it also offers these users a better user experience according to device and external factors like slow connections, devices, etc.

## Implementing Adaptive Loading to **React** 

You can check **React Adaptive Hooks** package [here](https://www.npmjs.com/package/react-adaptive-hooks). 

## Install the package

```jsx
yarn add react-adaptive-hooks // or npm i react-adaptive-hooks
```

## Using for Network Status

```jsx
import React from 'react';
 
import { useNetworkStatus } from 'react-adaptive-hooks/network';
 
const MyComponent = () => {
  const { effectiveConnectionType } = useNetworkStatus();
 
  let media;
  switch(effectiveConnectionType) {
    case 'slow-2g':
      media = <img src='...' alt='low resolution' />;
      break;
    case '2g':
      media = <img src='...' alt='medium resolution' />;
      break;
    case '3g':
      media = <img src='...' alt='high resolution' />;
      break;
    case '4g':
      media = <video muted controls>...</video>;
      break;
    default:
      media = <video muted controls>...</video>;
      break;
  }
  
  return <div>{media}</div>;
};
```

This module allows you to manipulate media according to the user's internet connection speed.

## Using for Save Data

```jsx
import React from 'react';
 
import { useSaveData } from 'react-adaptive-hooks/save-data';
 
const MyComponent = () => {
  const { saveData } = useSaveData();
  return (
    <div>
      { saveData ? <img src='...' /> : <video muted controls>...</video> }
    </div>
  );
};
```

This is default network requests for loading images.

![https://res.cloudinary.com/raufsamestone/image/upload/v1640868837/blog-contents/adaptive-hooks/l0kujjibwnxlomtkrtzg.jpg](https://res.cloudinary.com/raufsamestone/image/upload/v1640868837/blog-contents/adaptive-hooks/l0kujjibwnxlomtkrtzg.jpg)

When you enable the hook, images are not loaded by default. 

![https://res.cloudinary.com/raufsamestone/image/upload/v1640868836/blog-contents/adaptive-hooks/jym0yeeziwn5hcmac4f9.jpg](https://res.cloudinary.com/raufsamestone/image/upload/v1640868836/blog-contents/adaptive-hooks/jym0yeeziwn5hcmac4f9.jpg)

### Using with Code-loading & Code-splitting

Depending on the **CPU** speed of the user, it is possible to load an adaptive **[chunked](https://www.geeksforgeeks.org/what-is-chunk-in-node-js/)** components.

```jsx
import React, { Suspense, lazy } from 'react';
 
import { useNetworkStatus } from 'react-adaptive-hooks/network';
 
const Full = lazy(() => import(/* webpackChunkName: "full" */ './Full.js'));
const Light = lazy(() => import(/* webpackChunkName: "light" */ './Light.js'));
 
const MyComponent = () => {
  const { effectiveConnectionType } = useNetworkStatus();
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        { effectiveConnectionType === '4g' ? <Full /> : <Light /> }
      </Suspense>
    </div>
  );
};
 
export default MyComponent;
```

It is also possible to create different experimental variables according to the battery status of the mobile device the user uses while visiting your web site, or displays like retina.

##  Get user's battery status 

You can check which browsers support navigator.getBattery() in [here](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getBattery).

```jsx
const [battery, setBattery] = useState({ level: 0, charging: false });

  const handleChange = ({ target: { level, charging } }) => {
    setBattery({ level, charging });
  };

  const useSaveData = useSaveData()

  useEffect(() => {
    let battery;
    navigator.getBattery().then((bat) => {
      battery = bat;
      battery.addEventListener("levelchange", handleChange);
      battery.addEventListener("chargingchange", handleChange);
      handleChange({ target: battery });
    });
    return () => {
      battery.removeEventListener("levelchange", handleChange);
      battery.removeEventListener("chargingchange", handleChange);
    };
  }, []);
```

Then create a variable that you can change in the source of the image like this:

```jsx
const Image = () => {
    const batteryLevel = battery.level * 100
    const quality = batteryLevel < 50 ? 50 : 100
    return `https://images.unsplash.com/photo-1627156863760-f49b81d8ab77?fm=webp&w=2000&q=${quality}`;
  };
```

So, if the user's battery drops below 50 percent, our image quality will change accordingly.

<hr/>

You can check these links more about adaptive loading 🔗

- [https://adaptive-loading.web.app/cra-battery-considerate-loading/](https://adaptive-loading.web.app/cra-battery-considerate-loading/)
- [https://dev.to/addyosmani/adaptive-loading-improving-web-performance-on-low-end-devices-1m69](https://dev.to/addyosmani/adaptive-loading-improving-web-performance-on-low-end-devices-1m69)
- [https://web.dev/adaptive-loading-cds-2019/](https://web.dev/adaptive-loading-cds-2019/)
- [https://w3guy.com/detecting-retina-display-javascript-css/](https://w3guy.com/detecting-retina-display-javascript-css/)
- [https://github.com/GoogleChromeLabs/react-adaptive-hooks](https://github.com/GoogleChromeLabs/react-adaptive-hooks)

Improving UX Performance Using Adaptive Loading 


For **UX** and **Accessibility (a11y)** purpose, between background and foreground text(s), which is the [Color Contrast](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast), should be great enough to ensure legibility. 

In this case, we'll use the [Web AIM](https://webaim.org/resources/contrastchecker/)'s contrast checker API for measure programmatically user's browser text-foreground contrast ratio, and push to **Google Tag Manager** through `dataLayer` 

Before starting, we should create variable for colors with `Window.getComputedStyle()`

More information about [Window.getComputedStyle()](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle)

List the elements on your website whose Color Contrast values you want to measure for [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/).

<deckgo-highlight-code>  
<code slot="code">  
var bodyColor = getComputedStyle(document.querySelector("body")).color;
var textColor = getComputedStyle(document.querySelector("h1")).color;
</code>  
</deckgo-highlight-code>

This should be return like this:

<deckgo-highlight-code>  
<code slot="code">  
rgb(0, 0, 0) 
rgb(52, 247, 100) 
</code>  
</deckgo-highlight-code>

And then we should convert this **RGB** values to **HEX** color. 

<deckgo-highlight-code>  
<code slot="code">  
var bodyColorToHex = bodyColor
      .slice(4, -1)
      .split(",")
      .map((x) => (+x).toString(16).padStart(2, 0))
      .join("");
</code>  
</deckgo-highlight-code>

This time, we can use the **Web AIM** API as dynamically.

<deckgo-highlight-code>  
<code slot="code">  
  fetch(
      `https://webaim.org/resources/contrastchecker/?fcolor=${fColor}&bcolor=${bColor}&api`
    )
      .then((response) => response.json())
</code>  
</deckgo-highlight-code>



And finally, we can push the all JSON resonses to GTM through `dataLayer`

<deckgo-highlight-code>  
<code slot="code">  

    .then((data) => {
        console.log(data), (window.dataLayer = window.dataLayer || []);
        window.dataLayer.push({
          ratio: data.ratio,
          AA: data.AA,
          AALarge: data.AALarge,
          AAA: data.AAA,
          AAALarge: data.AAALarge
        });
      });
</code>  
</deckgo-highlight-code>

Be sure the current `dataLayer` object is return for responsed contrast values: 

<div style='width:60%; margin: auto'>

![Contrast Ratio Data Layer Object](https://res.cloudinary.com/raufsamestone/image/upload/v1634475023/blog-contents/contrast-ratio/tn6taqidzsbl3zegr86p.png)

</div>

Your last script should be look like this 👇

<deckgo-highlight-code>  
<code slot="code">  

    var bodyColor = getComputedStyle(document.querySelector("body")).color;
    var textColor = getComputedStyle(document.querySelector("h1")).color;

    var bodyColorToHex = bodyColor
      .slice(4, -1)
      .split(",")
      .map((x) => (+x).toString(16).padStart(2, 0))
      .join("");
    var textColorToHex = textColor
      .slice(4, -1)
      .split(",")
      .map((x) => (+x).toString(16).padStart(2, 0))
      .join("");

    var fColor = bodyColorToHex;
    var bColor = textColorToHex;
    fetch(
      `https://webaim.org/resources/contrastchecker/?fcolor=${fColor}&bcolor=${bColor}&api`
    )
      .then((response) => response.json())
      .then((data) => {
        console.log(data), (window.dataLayer = window.dataLayer || []);
        window.dataLayer.push({
          ratio: data.ratio,
          AA: data.AA,
          AALarge: data.AALarge,
          AAA: data.AAA,
          AAALarge: data.AAALarge
        });
        console.log(dataLayer);
      });

</code>  
</deckgo-highlight-code>


I highly recommended for this article to understanding how calculated color and contrast ratio for **WCAG** criteria.

🔗 https://webaim.org/articles/contrast/


Push Contrast Ratio to GTM


This simple solution is mostly using [**Netlify Forms** ](https://www.netlify.com/products/forms/) for different event post based serialize sign-up forms in **React**.

Like this:

![Dynamic Netlify Form Titles](https://res.cloudinary.com/raufsamestone/image/upload/f_auto/v1613200185/blog-contents/dynamic-netlify-forms/jmqvuejv4xhj6j5syxk9.webp)

Firstly you have to create a form-name with `form.getAttribute('name')` for **fetching.**

<deckgo-highlight-code>  
<code slot="code">

fetch('/', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: encode({
'form-name': form.getAttribute('name'),
...state,
}),
})

</code>  
</deckgo-highlight-code>  


Add the form name as your title props to your form's `name` attribute like `{eventDate}`.

<deckgo-highlight-code>  
<code slot="code"> 

``<form name={`${eventDate} Event Signup Form`} method="POST">``
 
</code>  
</deckgo-highlight-code>

And add your Form component to your generated markdown files place. 

So, you can use your any event post's frontmatter field as your form title 🎉.

<deckgo-highlight-code>  
<code slot="code">

`<FormComponent eventDate={post.frontmatter.eventDate}/>`

</code>
</deckgo-highlight-code>


Creating Dynamic Form Titles for Netlify Form


Çoğunlukla geliştiriciler ve çevrim içi gizliliğine önem veren kişiler tarafından kullanılan [DuckDuckGo](https://duckduckgo.com)'nun işinizi kolaylaştıracak ve belki de hiç bilmediğiniz özellikleri.

<div class='warning'>

## Hızlı Erişim 🚀

<div class='unlist'>

- [1) Bang! Özelliği](#1-bang-özelliği)
- [2) Klavye Kısayolları](#2-klavye-kısayolları)
- [3) Cheat Sheet](#3-cheat-sheet)
- [4) Sosyal Medyada Kişi Araması](#4-sosyal-medyada-kişi-araması)
- [5) Parola Oluşturma](#5-parola-oluşturma)
- [6) Uygulama Alternatifi](#6-uygulama-alternatifi)
- [7) Renk Kodları](#7-renk-kodları)
- [8) Stopwatch ve Timer](#8-stopwatch-ve-timer)
- [9) QR Kod Oluşturma](#9-qr-kod-oluşturma)
- [10) Karakter Dönüştürücü](#10-karakter-dönüştürücü)
- [11) Reklamları Kapatma Özelliği](#11-reklamları-kapatma-özelliği)
- [12) Diğer Özellikler](#12-diğer-özellikler)

</div>

</div>

<a href='#hızlı-erişim-'>
<div  class='gototop'>

Başa Dön 👆

</div>

</a>

## 1) Bang! Özelliği

Bang özelliği, direkt belirttiğiniz web sitesinde arama yapmanızı sağlar. Arama çubuğuna **!** yazarak [DuckDuckGo Bang](https://duckduckgo.com/bang) adresinde listelenmiş 13.000'den fazla web sitesinde arama yapabilirsiniz.

Özellikle **!mdn** ve **!so** kullanımı geliştiriciler için büyük kolaylık.

![Bang! DuckDuckGo](https://res.cloudinary.com/raufsamestone/image/upload/f_auto/v1598787158/blog-contents/duckduckgo/qzxpu51wx0qnqvpbmypz.webp)

## 2) Klavye Kısayolları

**DuckDuckGo**'yu neredeyse hiç mouse ya da touchbar kullanmadan daha hızlı ve etkili kullanabilirsiniz.

![DuckDuckGo Klavye Kısayolları](https://res.cloudinary.com/raufsamestone/image/upload/f_auto/v1598787158/blog-contents/duckduckgo/hoep6npo2xj1mwt9yiqf.webp)

## 3) Cheat Sheet

Yine geliştiriciler için vazgeçilmez bir özellik; `cheat sheet css` ya da `cheat sheet react` gibi sorgularla hızlı bir şekilde cheat sheetlere erişebilirsiniz.

![Cheat Sheet DuckDuckGo](https://res.cloudinary.com/raufsamestone/image/upload/f_auto/v1598787161/blog-contents/duckduckgo/zdbctokw0phpnrdwp29m.webp)

## 4) Sosyal Medyada Kişi Araması

`@username` ile direkt sosyal medyada kişi sorgulaması yapabilirsiniz.

![Social Media DuckDuckGo](https://res.cloudinary.com/raufsamestone/image/upload/f_auto/v1598789498/blog-contents/duckduckgo/b6q5vquuayqu82dsi1zj.webp)

## 5) Parola Oluşturma

`password 50 strong` ile güçlü parolalar oluşturabilirsiniz. Ayrıca `random passphrase` ile parola olarak da kullanabileceğiniz rastgele kelimeler kümesi oluşturabilirsiniz. Devamında cümle uzunluğunu belirtmek için `X words` yazmanız yeterli.

![Random Passphrase DuckDuckgo ](https://res.cloudinary.com/raufsamestone/image/upload/f_auto/v1598789703/blog-contents/duckduckgo/yplwlj9gs6tqtjivdcbq.webp)

## 6) Uygulama Alternatifi

`alternative to` ile uygulama alternatiflerini bulabilirsiniz.

![Alternate DuckDuckGo](https://res.cloudinary.com/raufsamestone/image/upload/f_auto/v1598789375/blog-contents/duckduckgo/djxg4msncaw1gvynnqeb.webp)

## 7) Renk Kodları

UI tasarımcılarının ve geliştiricilerin oldukça işine yarayacak bir özellik olan
`color picker` ile HEX kodları oluşturabilirsiniz. Ayrıca direkt `#91913f` gibi rengin kendi HEX kodunu yazarsanız, **CMYB**, **RGBA** ve **HSL** değerlerine da ulaşabilirsiniz.

![Color Codes](https://res.cloudinary.com/raufsamestone/image/upload/f_auto/v1598790292/blog-contents/duckduckgo/vuu19ed03ipfrkcxmnno.webp)

## 8) Stopwatch ve Timer

Arama çubuğuna `stopwatch` ya da `timer` yazarak kronometre ve zamanlayıcıyı çalıştırabilirsiniz.

![StopWatch DuckDuckGo](https://res.cloudinary.com/raufsamestone/image/upload/f_auto/v1598787158/blog-contents/duckduckgo/pq5xlfbtvtyfbqw7obj5.webp)

## 9) QR Kod Oluşturma

Arama çubuğundayken herhangi bir texti, başına `qr` koyarak QR koda dönüştürebilirsiniz.

![QR DuckDuckGo](https://res.cloudinary.com/raufsamestone/image/upload/f_auto/v1598787157/blog-contents/duckduckgo/tdt7tezeqnirbhccyw0r.webp)

## 10) Karakter Dönüştürücü

`lowercase` ya da `uppercase` ile tüm textleri büyük-küçük harfe dönüştürebilirsiniz. Ayrıca `title case` ile de sadece baş harfleri büyütebilirsiniz.

![lowercase DuckDuckGo](https://res.cloudinary.com/raufsamestone/image/upload/f_auto/v1598787157/blog-contents/duckduckgo/iqvmrpqssoloxmd1hgnv.webp)

## 11) Reklamları Kapatma Özelliği

Çevrim içi gizliliğin yanında, eğer reklamları da engellemek istiyorsanız,

[Ayarlar](https://duckduckgo.com/settings)'dan reklamları kapatabilirsiniz.

![Ads DuckDuckGo](https://res.cloudinary.com/raufsamestone/image/upload/f_auto/v1598788557/blog-contents/duckduckgo/crwkdw5xxouvpola1oii.webp)

## 12) Diğer Özellikler

- [Html Chars](https://duckduckgo.com/?q=html+chars&ia=answer) ile özel karakterlerin HTML'deki **HEX** ve **DEC** karşılıklarını bulabilirsiniz.
- [Lorem Ipsum](https://duckduckgo.com/?q=lorem+ipsum&ia=answer&iax=answer) ile klasik lorem ipsum paragrafları oluşturabilirsiniz.
- [Figlet](https://duckduckgo.com/?q=figlet+DuckDuckGo&ia=answer) grafiği oluşturma.

![Figlet Oluşturma](https://res.cloudinary.com/raufsamestone/image/upload/f_auto/v1598790992/blog-contents/duckduckgo/wbfhmmpavejnu1f3igt3.webp)

## Kaynaklar

[Search Syntax](https://help.duckduckgo.com/duckduckgo-help-pages/results/syntax/)


En İyi DuckDuckGo Özellikleri 


İster React tabanlı bir web uygulamanız olsun, ister [Gatsby](https://www.gatsbyjs.com/) ya da [NextJS](https://nextjs.org/) gibi framework kullanıyor olun, **Google Tag Manager** kurulumunuzu ilk başta doğru yapmanız, sonraki aşamalarda debug, analiz ve raporlamalarınız için son derece önemlidir.

Bu içerikte, React tabanlı web uygulamanıza ve diğer frameworklere farklı yöntemlerle nasıl GTM ekleyebileceğinizi aktaracağım.

**Gerekenler:**

- Bir adet internete bağlı bilgisayar 
- Bir adet GTM Hesabı

Kurulumlara başlamadan önce,

* GTM'deki ayarlarınızın doğruluğundan emin olmalısınız. _Admin > Container Settings_, Target Platform **Web** olmalıdır.  
    
 ![GTM Target Platform](https://res.cloudinary.com/raufsamestone/image/upload/v1628443038/blog-contents/react-gtm/jykujgxnooiwqragfeco.png)

* Tüm kurulumlarınızda tracking kodlarınızı (**container ID**) statik olarak değil, .**env** gibi [**Environment Variable**](https://en.wikipedia.org/wiki/Environment_variable) değişkeni olarak atamanız, [**Netlify**](https://docs.netlify.com/configure-builds/environment-variables/) **ya da** [**Vercel**](https://vercel.com/docs/environment-variables) **gibi** deploy tarafında da kullanımını kolaylaştıracaktır.

## React SPA'de GTM Kurulumu

Genellikle **SPA**'ler (Single Page Application) için tercih edilen sade, [Create React app](https://create-react-app.dev/ "Create React App") ile oluşturduğunuz bir web uygulaması/sitesine **GTM** entegrasyonu için, [React Helmet](https://www.npmjs.com/package/react-helmet "React Helmet")'i tercih edebilirsiniz.

**Yükleme:**

    yarn add react-helmet

Daha sonra GTM'deki snippetinizi olduğu gibi eklemeniz yeterlidir.  
  
![GTM Snippet](https://res.cloudinary.com/raufsamestone/image/upload/v1628443036/blog-contents/react-gtm/ofathsesrqhbcddlp8d9.png)

**Kullanımı:**

<deckgo-highlight-code>  
<code slot="code">  
    const Helmet = () => (
     <ReactHelmet>
      <script>
       {(function(w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({
         'gtm.start': new Date().getTime(),
         event: 'gtm.js',
        });
        var f = d.getElementsByTagName(s)[0],
         j = d.createElement(s),
         dl = l != 'dataLayer' ? '&l=' + l : '';
        j.async = true;
        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f);
       })(window, document, 'script', 'dataLayer', 'GTM-XXXXX')}
      </script>
     </ReactHelmet>
    )
</code>  
</deckgo-highlight-code>

## react-gtm-module ile GTM Kurulumu

Spesifik olarak GTM için oluşturulmuş [react-gtm-module](https://yarnpkg.com/package/react-gtm-module) paketini kullanabilirsiniz.

**Yükleme:**

<deckgo-highlight-code>  
<code slot="code">  
    yarn add react-gtm-module
   </code>  
</deckgo-highlight-code>

**Kullanımı:**

<deckgo-highlight-code>  
<code slot="code">  
    import React from 'react'
    import ReactDOM from 'react-dom'
    import Router from 'react-router'
    import routes from './routes'
    ...
    
    import TagManager from 'react-gtm-module'
    
    const tagManagerArgs = {
        gtmId: 'GTM-XXXXX'
    }
    
    TagManager.initialize(tagManagerArgs)
    ...
    
    const app = document.getElementById('app')
    ReactDOM.render(<Router routes={routes} />, app)
   </code>  
</deckgo-highlight-code>

**dataLayer Gönderimi:**

<deckgo-highlight-code>  
<code slot="code">  
    import React from 'react'
    import ReactDOM from 'react-dom'
    import Router from 'react-router'
    import routes from './routes'
    
    ...
    import TagManager from 'react-gtm-module'
    
    const tagManagerArgs = {
        gtmId: 'GTM-000000',
        dataLayer: {
            userId: '001',
            userProject: 'project'
        }
    }
    
    TagManager.initialize(tagManagerArgs)
    ...
    
    const app = document.getElementById('app')
    ReactDOM.render(<Router routes={routes} />, app)
   </code>  
</deckgo-highlight-code>

## Gatsby JS'de GTM Kurulumu

Üstteki yöntemlerin dışında, yine özellikle Gatsby ekosistemi içerisinde oluşturulmuş olan yardımcı pluginleri kullanabilirsiniz.

### Plugin Kullanarak

Üstte bahsedilen react-helmet haricinde, Gatsby'nin official pluginlerinden [gatsby-plugin-google-tagmanager](https://www.gatsbyjs.com/plugins/gatsby-plugin-google-tagmanager/)'ı da kullanabilirsiniz.

**Kurulum:**

<deckgo-highlight-code>  
<code slot="code">  
    yarn add gatsby-plugin-google-tagmanager
   </code>  
</deckgo-highlight-code>

**Kullanım:**

<deckgo-highlight-code>  
<code slot="code">  
    // gatsby-config.js
    plugins: [
      {
        resolve: "gatsby-plugin-google-tagmanager",
        options: {
          id: "YOUR_GOOGLE_TAGMANAGER_ID",
          defaultDataLayer: { platform: "gatsby" },
          gtmAuth: "YOUR_GOOGLE_TAGMANAGER_ENVIRONMENT_AUTH_STRING",
          gtmPreview: "YOUR_GOOGLE_TAGMANAGER_ENVIRONMENT_PREVIEW_NAME",
          dataLayerName: "YOUR_DATA_LAYER_NAME",
          enableWebVitalsTracking: true,
        },
      },
    ]
   </code>  
</deckgo-highlight-code>

### Custom HTML Kullanarak

GatsbyJS'deki [Custom HTML](https://www.gatsbyjs.com/docs/custom-html/#adding-custom-javascript) yöntemiyle daha uğraştırıcı fakat pluginden bağımsız olarak daha stabil ve yönetilebilir halde GTM kurulumu yapabilirsiniz.

``` 
  // src/html.js
    <script
      dangerouslySetInnerHTML={{
        __html: `
       {(function(w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({
         'gtm.start': new Date().getTime(),
         event: 'gtm.js',
        });
        var f = d.getElementsByTagName(s)[0],
         j = d.createElement(s),
         dl = l != 'dataLayer' ? '&l=' + l : '';
        j.async = true;
        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f);
       })(window, document, 'script', 'dataLayer', 'GTM-XXXXX')}
            `,
      }}
    />
```

## NextJS'de GTM Kurulumu

En kısa yoldan **__document.js_** dosyası oluşturarak **Google Analytics** ya da **GTM** entegrasyon yapabilirsiniz.


```
  import Document, { Html, Head, Main, NextScript } from 'next/document'
    export default class MyDocument extends Document {
      render() {
        return (
          <Html>
            <Head>
              <script
                async
                src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
              />
              <script
                dangerouslySetInnerHTML={{
                  __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
                  page_path: window.location.pathname,
                });
              `,
                }}
              />
            </Head>
          </Html>
        )
      }
    }
```

Örneğin **Vercel** kullanıyorsanız da, ilgili değişkeni Siteniz _>_ _Settings >_ Environment Variables kısmından ekleyebilirsiniz.


![Vercel Environment Variables](https://res.cloudinary.com/raufsamestone/image/upload/v1628443037/blog-contents/react-gtm/orkqzngqcnlnsg9vphsf.png)


React GTM Entegrasyon Yöntemleri


Web geliştiricileri ve özellikle UI/UX tasarımcıları için faydalı olacağını düşündüğüm takip edilesi podcast kanallarını burada bulabilirsiniz.

<div class='warning'>

💡 İlerleyen zamanlarda güncelleme gelebilir.
</div>

<div class='warning'>

✉️ Eklemek istediğiniz bir kanal varsa iletebilirsiniz. [hey@raufsamestone.com](mailto:hey@raufsamestone.com)

</div>


## 1) Shoptalk Show

**Codepen** ve **CSSTricks** kurucusu [Chris Coyier](https://twitter.com/chriscoyier) ve geliştirici [Dave Rupert](https://twitter.com/davatron5000) tarafından yönetilen özellikle CSS, UX, UI, Dizayn ve Erişilebilirlik konularını içeren oldukça keyifli bir podcast.

## 2) Full Stack Radio

Tailwind CSS'ten bildiğimiz **Adam Wathan** tarafından yürütülüyor ve her hafta bir konuk alarak UX ve ürün geliştirme süreçlerine dair konular konuşuluyor.

[fullstackradio.com](https://www.fullstackradio.com)

## 3) React Podcast

Michael Chan önderliğine, **ReactJS** hakkında Serverless'tan UI kütüphanelerine kadar oldukça detaylı sohbetler paylaşılıyor.

[reactpodcast.com](https://reactpodcast.com/)

## 4) Egghead.io Podcast

Egghead.io'nun yazılım geliştirme üzerine yayınladığı resmi podcast kanalı.

[egghead.io/podcast](https://egghead.io/podcasts)

## 5) Layout.FM

Haftalık dizayn, teknoloji ve yazılım geliştirmeyle ilgili içeriklerin olduğu podcast kanalı.

[layout.fm](https://layout.fm/)

## 6) Design Details

Ürün geliştirme, design systems ve tasarım prensibleri üzerine yayınlar yapıyorlar.

[designdetails.fm](https://designdetails.fm/)

## 7) That's My JAMstack

[Bryan Robinson](https://twitter.com/brob) tarafından yürütülen **JAMstack** ekosistemine dair oldukça faydalı bir kanal.

[thatsmyjamstack.com](https://thatsmyjamstack.com/)

## 8) Codefiction

İstanbul'dan, genellikle yazılım geliştirme ve yazılım disiplinleri üzerine konuşulduğu keyifli podcast.

[codefiction.tect](https://www.codefiction.tech/)

## 9) UX'minimal

Ankara'da kurulan gönüllü UX topluluğundan farklı konuşmacılarla, kullanıcı deneyimine dair sohbetler gerçekleştiriyorlar.

[uxminimal.com/podcast](https://www.uxminimal.com/podcast)

[@raufsamestone](https://twitter.com/raufsamestone)


Geliştiriciler ve Tasarımcılar İçin Podcast Listesi

This is how to convert your multiple any images from **.png** or **.jpeg** to **.webp** format with storage (Cloud) and optimization features.

**WebP** is so fast image format for your web app. [WebP](https://web.dev/serve-images-webp/ "Google Web Dev") is also developed and recommended by **Google**. It is also extremely important for **SEO** and web performance with image contents. Normally, you can use Google's native [WebP Converter](https://developers.google.com/speed/webp/). But this is not capable of web storage and other image optimization. 

We use [Cloudinary](https://cloudinary.com/ "Cloudinary")  image storage for this converting solutions. 
There are **two** simple solutions to converting multiple images.

## Solution 1 

You can set up the pre-transformation Upload settings on Cloudinary. 

Go to **Settings** and **Add Upload Preset**: 

![Cloudinary Upload Preset](https://res.cloudinary.com/raufsamestone/image/upload/v1595360280/blog-contents/converting-multiple-images-to-webp/upload-preset-cloudinary_pqzwpd.webp "Cloudinary Upload Preset")

Click to **Upload Manipulations**:

![Upload Manipulations](https://res.cloudinary.com/raufsamestone/image/upload/v1595360280/blog-contents/converting-multiple-images-to-webp/upload-preset-transformation-cloudinary_kwbfxr.webp "Upload Manipulations")

And then click to  **Add Eager Transformation:** 

![Add Eager Transformation](https://res.cloudinary.com/raufsamestone/image/upload/v1595360278/blog-contents/converting-multiple-images-to-webp/add-eager-transformation_mjtog7.webp "Add Eager Transformation")

Set your pre upload.

- Choose the format as **WebP**
- You don't have to set the image resolution to **1080**, but most screen device is smaller than 2K or 4K for web image contents.
- You can check for other useful flags like adding **unique ID** of *filename*.

Here is the final settings should look like: 

![Final upload settings](https://res.cloudinary.com/raufsamestone/image/upload/v1595360278/blog-contents/converting-multiple-images-to-webp/latest-settings_ew4bbo.webp "Final upload settings")

Thus, every image you upload will be automatically optimized to **webp** using both Media library UI or CLI.

## Solution 2

But what if we want to change the images we uploaded before? In this case, we have to use [Cloudinary CLI](https://cloudinary.com/documentation/cloudinary_cli "Cloudinary CLI").

You can transform your all images using URL [reference](https://cloudinary.com/documentation/image_transformation_reference) adding variables after **/upload/** path like **/c_scale,f_auto,h_517,w_1080/**.

But you have to list all URL of your images.

### Listing URLs

Firstly, we must install the CLI with [Python PIP](https://pypi.org/project/pip/ "Python PIP").

<deckgo-highlight-code>  
<code slot="code">  
pip3 install cloudinary-cli 
</code>  
</deckgo-highlight-code>

Configure your CLI with your **Cloudinary API KEY**

<deckgo-highlight-code>  
<code slot="code">  
export CLOUDINARY_URL=cloudinary://123456789012345:abcdefghijklmnopqrstuvwxyzA@cloud_name
</code>  
</deckgo-highlight-code>

- You can find your API key on dashboard. 

And, we should list all images info with [Search API](https://cloudinary.com/documentation/search_api).

You can search any variable like that, but we have to add **output** option for listing items to *JSON* file.
 
<deckgo-highlight-code>  
<code slot="code">  
cld search "cat" -f context -f tags -n 10 output.json
</code>  
</deckgo-highlight-code>

The output should be like that: 

<deckgo-highlight-code>  
<code slot="code">  
"public_id": "5953361",
    "filename": "sasdasd-01_ek7rzs",
    "format": "webp",
    "version": 1595336182,
    "resource_type": "image",
    "type": "upload",
    "created_at": "2020-07-21T12:56:22+00:00",
    "uploaded_at": "2020-07-21T12:56:22+00:00",
    "bytes": 47488,
    "backup_bytes": 0,
    "width": 1080,
    "height": 796,
    "aspect_ratio": 1.35678,
    "pixels": 859680,
    "pages": 1,
    "url": "http://res.cloudinary.com/raufsamestone/image/upload/v1595336182/sdasdasd.ek7rzs.webp",
    "secure_url": "https://res.cloudinary.com/raufsamestone/image/upload/v1595336182/asdasd.webp",
    "status": "active",
    "access_mode": "public",
    "access_control": null,
    "etag": "581034c158165f6f9c9c872f03618a6c",
    "created_by": {
      "access_key": "126251566858748",
      "custom_id": "asdasdfas12ff",
      "external_id": "61c057372fa8c45e60a23fa51aebf1"
    },
    "uploaded_by": {
      "access_key": "126251566858748",
      "custom_id": "asdasdasdasd",
      "external_id": "61c057372fa8c45e60a23fa51aebf1"
    }
  },
</code>  
</deckgo-highlight-code>

And we can map the specify "URL" from **JSON** with **Node JS** for listing all URL.

<deckgo-highlight-code>  
<code slot="code">  
const data = require('./output.json');
const output = data.map(url => url.url);
console.log(output);
</code>  
</deckgo-highlight-code>


and then you can replace and modify your all URL with any IDE.

![Cloudinary Output](https://res.cloudinary.com/raufsamestone/image/upload/v1595368210/blog-contents/converting-multiple-images-to-webp/cld-output-url.webp)

## What about JAMstack?

If you are interesting in adding Cloudinary to your **JAMstack** project, you can check [Gatsby's](https://gatsbyjs.org/) image optimization plugin called **gatsby-transformer-cloudinary** and you can connect with [Netlify CMS](https://www.netlifycms.org/docs/cloudinary/) to your Clodinary API.

[@raufsamestone](https://twitter.com/raufsamestone)

Converting Multiple Images to WebP


**SEO**'nun olmazsa olmazlarından Sitemap'i (Site Haritası), **Gatsby**'ye plugin aracılığıyla ekleyebilirsiniz.

## Pluginin Yüklenmesi

**Yarn**

<deckgo-highlight-code>  
<code slot="code">  
yarn add gatsby-plugin-sitemap  
</code>  
</deckgo-highlight-code>

ya da

**Npm**

<deckgo-highlight-code>  
<code slot="code">  
npm install --save add gatsby-plugin-sitemap  
</code>  
</deckgo-highlight-code>

## Kullanımı

Paketi yükledikten sonra **gatsby-config.js** içerisine plugini ekliyoruz.

<deckgo-highlight-code>  
<code slot="code">  
siteMetadata: {
siteUrl: `https://www.example.com`,
},
plugins: \[`gatsby-plugin-sitemap`\]
</code>  
</deckgo-highlight-code>

## Sitemap Oluşturma

Sitemap'in oluşturulabilmesi için **production** modda siteyi çalıştırmak gerekiyor. Dolayısıyla **gatsby build && gatsby serve** komutu yazılmadan sitemap oluşmaz.

Plugin devreye girdiğinde daima şu sayfaları devre dışı bırakır ve buna müdahale edilemez.

* /dev-404-page
* /404
* offline-plugin-app-shell-fallback

## Opsiyonlar

**query**

Gatsby içinde oluşturulmuş içerikleri **GraphQL** ile ayıklayarak kategorize edebilirsiniz.

**output**

Sitemap'in gösterileceği yoldur. Varsayılan olarak **/sitemap.xml** tanımlıdır.

**exclude**

Site haritasında gösterilmesini istemediğiniz sayfaları **RegEX** ile ekleyebileceğiniz komuttur.

**createLinkInHead**

Site haritanızdaki **`<Head>`** etiketlerine linklerin eklenip eklenmeyeceğini **boolean** ile belirlediğiniz komuttur.

**sitemapSize**

Site haritasındaki içerik sayısını spesifik olarak belirleyebilirsiniz.
Varsayılan olarak **5000**'dir. 5000'den fazla olduğunda, site haritasının yüklenmesini ve robotlar tarafından okunmasını kolaylaştırmak amacıyla, 5001. içeriği **sitemap-2.xml** gibi bir output'a otomatik olarak devreder. Oldukça kullanışlı bir özellik.

**Kaynak**  
[https://www.gatsbyjs.org/packages/gatsby-plugin-sitemap/](https://www.gatsbyjs.org/packages/gatsby-plugin-sitemap/ "https://www.gatsbyjs.org/packages/gatsby-plugin-sitemap/")

Gatsby'de Site Haritası Nasıl Eklenir?


## Headless CMS Nedir ?

**Headless CMS** web sitenizdeki front-end ile host edildiği yerin ayrı tutulduğu bir içerik yönetim sistemidir aslında.

Bir Headless CMS, tamamen API odaklı, son kullanıcının tarayıcıdan API'ye bağlandığı yada Git'teki (**GitHub, GitLab**) içeriğin güncellenmesiyle de çalışabilir.

**Wordpress**, **Drupal** gibi en çok kullanılan eski CMS'lerin **tam tersidir**. Bu eski CMS'lerin her biri, hizmet vermek için devreye girdiği her seferinde, siteyle birlikte geleneksel olarak bir hosting üzerinde barındırılması ve içeriklerle birlikte oluşturulması gereken CMS'lerdir.

Headless CMS'ler ise içeriklerin nerede sunulduğuyla ilgilenmez, tamamen front-end'e bağlı değildir ve herhangi bir platformda gözükebilir ve düzenlenebilir.

Sunucuya ihtiyaç duymaz ve doğrudan **CDN** ile aktarılabilir.

### Nasıl Yani?

Örneğin bu yazıyı okuyorsanız, **raufsamestone.com/headless-cms** URL'inde gözüken web sitesindesinizdir ve bu web sitesi de **React** tabanlı **Gatsby** ile **Netlify** üzerinden servis edilerek çalışmakta. Ve her bir sayfa aslında birer **Markdown** dosyası. Ve bu Markdown dosyalarının oluşturulup düzenlemesi, Gatsby üzerinde bunun generate edilmesi ve birer eşsiz sayfa olarak Netlify'da build edilmesi gerekiyor. Şimdi, bu içeriği nasıl yazabiliriz?

Herhangi bir editorle.  
![Markdown Editor](https://res.cloudinary.com/raufsamestone/image/upload/v1589966134/blog-contents/headless-cms-markdown-editor_koabgj.webp "VS Code")

Ya da bir Headless CMS aracılığıyla. Burada [**Forestry**](https://forestry.io/) kullanıyorum.

![Forestry Headless CMS Dashboard](https://res.cloudinary.com/raufsamestone/image/upload/v1589959817/blog-contents/headless-cms-forestry-dashboard_sfjtrb.webp "Forestry Headless CMS Dashboard")

İçeriği yazdıktan sonra, Git-Based olan Forestry, yapılan değişikliği yani oluşturduğu markdown dosyasını, doğrudan web sitenin GitHub üzerindeki repository'sine gönderiyor ve Netlify'da bunun yeni ve güncel bir Branch olduğunu görüp burada yeralan tüm dosyaları build edip canlıya alıyor.

Bu durumda Headless CMS'leri de **git-tabanlı** ve **API** odaklı olarak ikiye ayırmak mümkün.

### Git-Tabanlı Headless CMS

Git üzerindeki repository'de bulunan dosyaların manipüle edilmesiyle içerik yönetimi sağlanır. Çoğu geliştirici ve içerik yöneticisi bu yöntemi tercih eder. Tüm içerikle Markdown, YAML gibi dosyalarda saklanabilir. Git'in ana mantığı olan olan versiyon kontrolü ve bir önceki branch'e geri dönme özelli, web projenize büyük avantaj sağlar. Ancak bununla birlikte repository'nizdeki dosya boyutunun yüksek olması, medya formatlarının stabil olarak saklanamaması gibi sorunlar dolayısıyla da bazı dezavantajları var.

### API Odaklı Headless CMS

Contentful ve Prismic gibi tamamen API odaklı çalışan CMS'lerdir. Sitedeki içerik değişikliğinde de her seferinde tüm siteyi build etmesine gerek kalmaz ve birden fazla uygulamaya tek bir noktadan veri sağlayabilir. Ancak Git-Tabanlı gibi versiyon ve branch kontrolü yoktur.

Headless CMS, Jamstack CMS ya da Decoupled CMS olarak da biliniyor.

### Hangi Headless CMS daha iyi?

2020 yılı içerisinde kullanabileceğiniz en iyi headless CMS'ler;

## Netlify CMS

**Netlify**'ın kurduğu ve kendi dashboardu içerisinde yönetebileceğiniz, açık kaynaklı bir CMS'dir. Kompleks site mimarisi ve içerikler için **YAML** ve **Markdown** formatlarını destekliyor ve aynı zamanda localde de çalıştırabiliyorsunuz. Arayüzündeki fieldları kendiniz, içeriğinize göre ayarlamak zorundasınız. Kurulumu bu esnada biraz uzun sürüyor. Çoklu kullanıcıyla ortak içerik üzerinde çalışma, workflow ve draft gibi özellikleri de mevcut.

Kurulma dair Türkçe videoyu buradan izleyebilirsiniz.

`youtube:https://www.youtube.com/embed/R_AJrElQBkI`

Türü: Git-Tabanlı  
[https://www.netlifycms.org/](https://www.netlifycms.org/ "https://www.netlifycms.org/")

## Contentful

Kurulumu kendi arayüzünden olmakta ve çoklu proje yöneticileri için ve kompleks içerik modelleri oluşturmak için idealdir. Ücretlidir ancak ücretsiz versiyonunda da sunduğu özellikler tatmin edici. Özellikle dil yönetimi, **i18n** konusunda gayet iyi. **Gatsby Cloud** ile entegre çalıştırıldığında oldukça başarılı hale geliyor.

`youtube:https://www.youtube.com/embed/JkAlSgmUMtc`

Türü: API  
[https://www.contentful.com/](https://www.contentful.com/ "https://www.contentful.com/")

## Forestry

**SSG (Static Site Generator)** aracılığıyla oluşturduğunuz bir web projeniz varsa, kurulumu son derece basit. Projenizin root yoluna eklediği settings.yaml dosyası ile entegre olabiliyor. Aynı zamanda benim de kullandığım bir CMS.

Türü: Git-Tabanlı  
[https://forestry.io/](https://forestry.io/ "https://forestry.io/")

## Tina CMS

Local'de çalıştırabildiğiniz ve **GraphQL** üzerinden tüm verileri çekebildiğiniz bir CMS. En güzel ve etkileyici özelliği sanırım, kurulum sonrasında çok fazla teknik bilgi gerektirmeyen bir dinamiği olması. Tüm içeriklerinizi Front-end üzerinden anlık olarak yönetebiliyorsunuz.

Türü: Git-Tabanlı  
[https://tinacms.org/](https://tinacms.org/ "https://tinacms.org/")

## Ghost

Node.JS tabanlı açık kaynaklı bir CMS. Çoklu kullanım ve kapsamlı entegrasyonlar için ücret ödemeniz gerekiyor. Daha çok üyelik (auth) ve e-ticaret işlemleri için tercih ediliyor. Tüm SSG'ler tarafından destekleniyor.

Türü: Git-Tabanlı  
[https://ghost.org/](https://ghost.org/ "https://ghost.org/")

**Kaynaklar**

[https://headlesscms.org/about](https://headlesscms.org/about "https://headlesscms.org/about")  
[https://www.g2.com/categories/headless-cms](https://www.g2.com/categories/headless-cms "https://www.g2.com/categories/headless-cms")

Headless CMS Nedir?


## Gatsby Cloud

Gatsby tarafından yine Gatsby ile oluşturulmuş web sitelerinin daha hızlı ve daha stabil yönetilebilmesi için tasarlanmış platform.

[gatsbyjs.com/cloud](https://www.gatsbyjs.com/cloud/)

## Contentful

API öncelikli headless CMS.

[contentful.com](https://www.contentful.com/)

## Genel Bakış

Normal şartlarda, bir Gatsby projenizle CMS entegrasyonu yapabilmeniz için, config.js dosyalarıyla, headles CMS'inizdeki API kodlarını entegre etmeniz gerekiyor. 

Ancak Gatsby Cloud ile bunu hiç kod yazmadan da, hazır starter paketlerini kullanarak bunu kolaylıkla yapabiliyorsunuz. 

### Yeni Site Oluşturma

Login olduğunuzda, varolan bir Gatsby sitenizle mi yoksa hazır starter paketiyle mi devam edeceğiniz soruluyor.

![Gatsby Cloud CMS Selecting](https://res.cloudinary.com/raufsamestone/image/upload/v1589873929/blog-contents/select-gatsby-site.webp)


Daha sonra **Create a new site** kısmında, hem projemizin hem de **Gatsby Cloud** tarafından açılacak yeni repository'nin ismini giriyoruz. 

![Gatsby Cloud Create a new site](https://res.cloudinary.com/raufsamestone/image/upload/v1589873934/blog-contents/Screen_Shot_2020-05-19_at_09.23.52_om6fcq.webp)


**GitHub** üzerinden devam ettiyseniz, açılan repository'yi kontrol edebilirsiniz.


![GitHub Repository Check](https://res.cloudinary.com/raufsamestone/image/upload/v1589873937/blog-contents/Screen_Shot_2020-05-19_at_09.24.04_vghtbn.webp)



Gatsby Cloud arayüzünde görebilecğiniz diğer bir kullanışlı özellik de, deploy edilen branch'in **Google Lighthouse** skor özetini gösteriyor olması.


![Gatsby Cloud Google Lighthouse](https://res.cloudinary.com/raufsamestone/image/upload/f_auto/v1589873939/blog-contents/gatsby-cloud-google-lighthouse.webp)


Contentful içindeki Content Model'ler ile içeriklerinizi düzenleyebilirsiniz. 

![Contentful Dashboard Content Edit](https://res.cloudinary.com/raufsamestone/image/upload/v1589873937/blog-contents/contentful-dashboard-content.png)


İçeriği düzenledikten ya da yeni bir içerik oluşturduğunuzda, repository'nizde herhangi bir değişiklik olmuyor. Dolayısıyla tüm veritabanınız artık Gatsby Cloud ve entegre ettiğiniz Headless CMS arasında kalıyor. Yapılan değişikliği de anında random key ile size verilen domainden görebiliyorsunuz. Bu da güzel bir özellik. Normalde, `localhost` üzerinde yaptığınız değişikliği **Hot Reloader** ile görüntüleyebiliyordunuz.


Contentful ücretli bir ugulama, ancak ücretsiz kısmında da pek çok özelliği kullanabiliyorsunuz. Şöyle ki, **free** bir hesapta, usage kısmında yaptığınız kullanımların ne şekilde count edildiğini görebilirsiniz. 

![Contentful Dashboard Usage](https://res.cloudinary.com/raufsamestone/image/upload/v1589873936/blog-contents/contentful-dashboard-usage.png)


Not: Büyük projeler için tasarlanmış neredeyse tüm headless CMS'ler ücretli. Dolayısıyla size sunduğu API ve performans çözümlerini ve bütçenizi göz önünde tutarak proje başlatmanız daha avantajlı olacaktır. **2020 En iyi Headless CMS'leri** diye bir çalışmaya da başladım, bugünler de yayına alacağım. 


Detaylı videoyu, buradan izleyebilirsiniz. 

`youtube:https://www.youtube.com/embed/JkAlSgmUMtc`

Gatsby Cloud ve Contentful İncelemesi


**Gatsby**'de **React Helmet** kütüphanesini kullanarak, **SEO** componentinin nasıl oluşturulduğundan bahsedeceğim.

## React SEO

Bu yöntem ile sadece **Gatsby** üzerinde değil, React tabanlı tüm framework'leri kullanarak da, web sitenizi **SEO** uyumlu hale getirebilir, SEO için en hızlı optimizasyonu yapabilirsiniz.

## React Helmet Nedir?

Düz bir **HTML** sayfasında kullanılabilen etiketlerin React üzerinde dinamikleştirilmesine olanak sağlar. Kullanımı son derece basittir.

Ancak, pure **React** ile sayfa oluşturup `react-helmet` ile **SEO componenti** yazmaktansa, zaten react-helmet'i kullanmak için gereksinim duyduğumuz Static bir site üzerinde, yani **JAMStack** uygulamasında bunu yapacağımız için, **Gatsby** gibi **SSG**'ler üzerinden devam etmenizi ve bu componenti modifiye etmenizi tavsiye ederim.

Gatsby Default Starter paketini indirelim:

<deckgo-highlight-code>
<code slot="code">
gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default
</code>
</deckgo-highlight-code>

**Gatsby-default-starter** paketiyle birlikte gelen bir SEO componentimiz var. Bu componenti inceleyelim.

İki ana kütüphane bizi karşılıyor. `react-helmet` ve `prop-types`

<deckgo-highlight-code>
<code slot="code">
import PropTypes from prop-types"
import { Helmet } from "react-helmet"
</code>
</deckgo-highlight-code>

`prop-types` ile var olan **SEO.JS** componenti içerisindeki Propsların alabileceği değerleri giriyoruz. Burada dikkat edilmesi gerek durum, props olarak alınabilecek değerler sadece String değil Object de alabiliyor. Böylelikle dinamik olarak oluşturduğunuz sayfalardaki dataları, örneğin; **Markdown** ya da **YAML** datalarını, bu propslarda kullanabilirsiniz.

<deckgo-highlight-code>
<code slot="code">
SEO.defaultProps = {
lang: `en`,
meta: \[\],
description: \`\`,
}
SEO.propTypes = {
description: PropTypes.string,
lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string.isRequired,
}
</code>
</deckgo-highlight-code>

React Helmet kısmında ise, renderlanmış bir HTML etiketlerinin nasıl olabileceğini belirliyoruz.

<deckgo-highlight-code highlight-lines="9,10">
<code slot="code">
< Helmet
htmlAttributes={{
lang,
}}
title={title}
titleTemplate={`%s | ${site.siteMetadata.title}`}
meta={\[
{
name: `description`,
content: metaDescription,
},
{
property: `og:title`,
content: title,
},
{
property: `og:description`,
content: metaDescription,
}
\].concat(meta)}
/>
</code>
</deckgo-highlight-code>

## Kullanımı

SEO componentin, dinamik sayfalarınızda, örneğin `SecondPage.JS` içerisine importlamanız yeterli.

<deckgo-highlight-code highlight-lines="1,2, 6,6">
<code slot="code">
import React from "react"
import { PageProps } from "gatsby"

import SEO from "../components/seo"

const SecondPage = (props: PageProps) => (
<>
< SEO  title="Sayfa Başlığı"  description="Açıklama"/>
<h1> Sayfa İçeriği</h1>
</>
)
export default SecondPage
</code>
</deckgo-highlight-code>

### Kaynaklar

Github: <a href='https://github.com/nfl/react-helmet' rel="noopener noreferrer" target='_blank'>React Helmet</a>

Github: <a href='https://github.com/gatsbyjs/gatsby-starter-default'>Gatsby Starter Default</a>

***

Detaylı videoyu, buradan izleyebilirsiniz.

`youtube:https://www.youtube.com/embed/dm_U_4vwhKA`

React Helmet ile SEO Componenti Oluşturma


First of all, **it's not the recommended** way to writing content and push to your repository with mobile devices.

Maybe it just works if you cannot access your computer. Or maybe you can use this method when you cannot access your computer for your content that needs to be corrected very urgently.

You can use it on vacation or travel but you should enjoy your holiday and rest while on vacation. 🏝

Let's assume that this case is a **JAMstack** project and you use the **markdown** as a content database.


## Markdown Editors 📝

It will give you an advantage to write your contents using a markdown editor with preview feature.

### iA Writer
Whit this markdown editor, you can check your number of characters, words and sentences while the writings.

You can download [here](https://ia.net/downloads).


### Bear
It's advanced markdown editor for every text based things, quick notes to in-depth essays.

https://bear.app/

### Dillinger

Dillinger is an online cloud-enabled, HTML5, buzzword-filled Markdown editor, that you can easily use with the chrome browser on your mobile device. 

https://dillinger.io/

### Notion
It's really powerfull fot relational notes, wikis, databases. Notion has desktop and mobile apps available, as well as a web-based interface. You create an account for yourself and your organization — the accounts are used to sync everything with Notion’s servers.

https://www.notion.so/

### Trello
Trello has excellent support for basic Markdown syntax. 

https://trello.com/

## Generating URL

You have to generate SEO-friendly clean URLs for file names or file paths to slugs without CMS, as manually.

You can try a URL tools or case generators. Especially kebab case!

### What is Kebab Case?
In kebab case, all letters are written in lower case and the words are separated by a hyphen or minus sign. "Kebab Case" becomes "kebab-case".

https://en.toolpage.org/tool/kebabcase

## Deploy

Of course, it is very difficult to access your git repository from mobile devices. Instead, you can try deploy methods using the APIs of the markdown editors above.

But the best method is to open your git repository in your mobile browser and create a new branch. 

Upload your content file and merge it.

## What about current Headless CMSs?

There are of course content tools in many CMSs. However, the rich text editor or markdown editors in these CMS, do not work very well on mobile devices, as compatible as the stable apps above. Also not at the editorial level.

And yes, this post is written with a mobile device. 😀






How to use your mobile device as CMS?


## Different the basic and highlighted

Here is the basic HTML code block;

`yarn upgrade-interactive` 

Here is the **Highlighted** style on Carbon;

 <deckgo-highlight-code>
    <code slot="code">
yarn upgrade-interactive
    </code>
</deckgo-highlight-code>      

or Ubuntu
 <deckgo-highlight-code terminal='ubuntu' >
    <code slot="code">
yarn upgrade-interactive
    </code>
    <span slot="user">berkay@ubuntu:~</span>
</deckgo-highlight-code>         
   
## Plugin

With your **markdown** resolver used in Gatsby, you must integrate the plug-in.

For this we will need the plugin `gatsby-remark-highlight code`.

Plıugin details on GitHub:
https://github.com/deckgo/gatsby-remark-highlight-code


## Install

 <deckgo-highlight-code >
    <code slot="code">
yarn add gatsby-transformer-remark gatsby-remark-highlight-code @deckdeckgo/highlight-code
    </code>
</deckgo-highlight-code>         


## Configure

 <deckgo-highlight-code language='javascript'>
    <code slot="code">
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-highlight-code`,
          options: {
            terminal: 'ubuntu'
          }
        },
      ],
    },
  },
]
    </code>
</deckgo-highlight-code>         


## Usage

Add the following in the blog post template or main layout.js.


 <deckgo-highlight-code>
    <code slot="code">
async componentDidMount() {
    try {
        const deckdeckgoHighlightCodeLoader = require("@deckdeckgo/highlight-code/dist/loader")
        await deckdeckgoHighlightCodeLoader.defineCustomElements(window);
    } catch (err) {
        console.error(err);
    }
}
    </code>
</deckgo-highlight-code>    
     
And then wrap your code blocks, on your Markdown file.

Highlight your code in Gatsby


**Eleventy**, oldukça basit bir statik site oluşturucusudur. (SSG)

Jekyll alternatifidir. Neredeyse hiç bir ön ayar yapılmasına gerek duymaz. Bunun sebebi de bağımısız template motorları (independent template engines) kullanmasıdır.

Bir çok Template Dilleriyle uyumludur. 
- HTML
- Markdown
- JavaScript
- Liquid
- Nunjucks
- HandleBars
- Mustache
- Haml
- Pug


 <deckgo-highlight-code>
    <code slot="code">
npm install -g @11ty/eleventy
    </code>
</deckgo-highlight-code>


Kurulumdan itibaren, BrowserSync ile entegre bir şekide çalışıyor.


<a href='https://www.11ty.dev/docs/'>Orjinal Starter Guide</a>

Eleventy Nedir?


Firstly you need to install Lighthouse.

 <deckgo-highlight-code>
    <code slot="code">
npm install -g lighthouse
    </code>
</deckgo-highlight-code>


You should output all the results of the website you want to analyze in JSON format.

 <deckgo-highlight-code>
    <code slot="code">
 lighthouse --output json --output-path
    </code>
</deckgo-highlight-code>

You can use <a href='https://www.gatsbyjs.org/'>Gatsby JS</a> to pull graphql queries.

Now, let's create our query and filter only the data we want.
![Lighthouse Graphql 2](../images/content-images/lighthouse-graphql-2.png)

**Conclusion**

You can then create a React-based report system that integrates the query we created with `useStaticQuery` in Gatsby.

<a href='https://developers.google.com/web/tools/lighthouse'>More</a>