DEV Community: Zeyad Etman

TypeScript, Understanding the code you write

Zeyad Etman — Thu, 23 May 2024 17:02:24 +0000

TypeScript has given the frontend a powerful chance to deliver reliable and maintainable code. The more you correctly type your code, the more you fall into its strengths and importance. In this post, I'll mention some TypeScript tips that you may or may not know about.

How TypeScript works?

The first thing you should know is how TypeScript works?

Source

Browsers are designed to only understand JavaScript, just as computers are designed to only understand zeros and ones. In the case of computers, we compile high-level code to machine code and then to zeros and ones so the computer can understand it. Similarly, we transpile or translate TypeScript code to JavaScript code to be understood by browsers and other engines that only know JavaScript.

To do this, we may use the popular tsc tool, You can also check out the awesome-typescript-compilers repository to learn more about them.

For example, code like this:

type animals = "cat" | "dog";
const getAnimal = (animal: animals) => animal;
getAnimal("cat");

Is translated to this JavaScript code, so browsers can understand it:

const getAnimal = (animal) => animal;
getAnimal("cat");

Note: TypeScript code is eliminated in the transpiling process.

This leads us to an important conclusion: once you realize it, you'll notice a lot about TypeScript concepts and why they've been written in their particular way.

Conclusion: As TypeScript does not run on browsers, it only runs at compile time, not at runtime.

Compile time is the time when your code is being built, before it runs and becomes interactive. Run time is when your code is running and interacting with the client.

Differences in Action

Let's compare a typed language that checks types at runtime, like C#, with TypeScript, which checks types at compile time:

Function overloading

Some JavaScript functions can be called in a variety of argument counts and types. For example, you might write a function to produce a Date that takes either a timestamp (one argument) or a month/day/year specification (three arguments).
Resource

In C#, we can achieve function overloading by declaring multiple function arguments and bodies. This is possible because C# checks the type of the function arguments at runtime and defines the function body accordingly:

void display() { ... }
void display(int a) { ... }
float display(double a) { ... }
float display(int a, float b) { ... }

However, in TypeScript, we go to the runtime without types, without typescript itself, so there's no runtime type checks and then we can't assign multiple values to the same variable in javascript, or in other words we can't create multiple bodies for the same function.

function makeDate(timestamp: number): Date;
function makeDate(m: number, d: number, y: number): Date;
function makeDate(m: number, d: string, y: number): string;
function makeDate(
  mOrTimestamp: number,
  d?: number | string,
  y?: number
): Date | string {
  if (typeof d === "string") {
    return "hello";
  }

  if (d !== undefined && y !== undefined) {
    return new Date(y, mOrTimestamp, d);
  } else {
    return new Date(mOrTimestamp);
  }
}

const d1 = makeDate(1234);
const d2 = makeDate(5, 5, 5);

This will be compiled to this Javascript code:

function makeDate(mOrTimestamp, d, y) {
  if (typeof d === "string") {
    return "hello";
  }
  if (d !== undefined && y !== undefined) {
    return new Date(y, mOrTimestamp, d);
  } else {
    return new Date(mOrTimestamp);
  }
}

const d1 = makeDate(1234);
const d2 = makeDate(5, 5, 5);

There's libraries can do runtime checks for javascript, one of the most popular libraries do this is zod you can give it a try.

Narrowing (make it more specific)

`keyof` and `typeof`

keyof from its name, used to "extract" a key of a TYPE, and since objects are the only datatype that contains keys, then keyof is used to extract key of an object in a union format

type obj = { [n: number]: string };
type A = keyof obj; // number

typeof from its name, used to return the type of a variable. simple!

let str = "Alia";
type a = typeof str; // string

const str2 = "Alia";
type b = typeof str2; // "Alia"

Important note: I used let here instead of const. If I used const, then the type would be the specific string value itself.

Let's merge both

const obj = {
  id: 1,
  name: "Alia",
}; // javascript variable no types

type typeOfObj = typeof obj; // type of the javascript object
type keysOfObj = keyof typeOfObj; // id | name

type keysOfObjOneLine = keyof typeof obj;

Notice here

keyof extracts keys of type (object).
typeof extracts the type of variable.

keep this in your mind for the mapped types section.

`in` operator and `extends`

Similar to the previous section, in operator is kinda similar way you can use it to limit the key to be within a group of types

type keysOfObj = "id" | "name";
type obj = { [key in keysOfObj]: string };

// type obj = {
//  id: string;
//  name: string;
// }

But we need to modify the code to fix the type for the id key to be number not string

extends consider it as if else of typescript.

type keysOfObj = "id" | "name";
type obj = { [key in keysOfObj]: key extends "id" ? number : string };

// That's it

This called mapped types

Generics

Think about it as a function in javascript, if you have a type and you're repeating it with slight changes, then you probably need to use generics.

interface BasicType<T> {
  input: T;
}

const x: BasicType<string> = { input: "test" };
const y: BasicType<number> = { input: "test" }; // wrong

function basic(a, b) {
  return { a, b };
}

function basic<A, B>(a, b) {
  return { a, b };
}

function basic<A, B>(a: A, b: B): { a: A; b: B } {
  return { a, b };
}

basic<string, number>("hello", 2);

we can still use extends with generics to give a powerful type.

Typescript Coverage

In addition to adding TypeScript rules to your project, it's important to track TypeScript code coverage. Code coverage helps identify missing types for variables.

You might think it's obvious if a variable has a type, but when using third-party libraries, classes, or functions, it's easy to miss some. Not everything, such as query parameters, will be tracked by the TypeScript coverage library, but it definitely helps.

I suggest using typescript-coverage-report for this purpose. If you know of a better option, feel free to share it in the comments below.

Resources:

Find more...

While writing this post, civilians and children in Gaza are being killed in the ongoing genocide. It's important to be informed about what is happening in Palestine and to consider the humanitarian aspects of the situation. Please take the time to research, and understand the events and their impact on palestinian's lives. know more

Originally Published on https://zeyadetman.com/posts/typescript-understand-the-code-you-write

Reduce Bundle size with Chakra UI And NextJS

Zeyad Etman — Mon, 22 May 2023 06:37:56 +0000

Reduce Bundle size with Chakra UI

Hi, I was trying to reduce the bundle size of app built with chakra and nextjs. I tried to use three different ways to import the ChakraProvider will share with you the impact of each way on the bundle size from the largest to the best approach.

Just import it like documented on the documentation guide. import { ChakraProvider } from "@chakra-ui/react";

Importing it from import { ChakraProvider } from "@chakra-ui/provider"; instead of /react

Importing it using next/dynamic



import dynamic from "next/dynamic";
    const ChakraProvider = dynamic(() => import("@chakra-ui/provider").then(
        (mod) => mod.ChakraProvider)
    );

You can checkout the result images attached.

Building personal assistant bot with telegram

Zeyad Etman — Sun, 02 Oct 2022 17:11:58 +0000

Originally Published here.

In this post I’ll document what I’ve done to build a telegram bot that helps me track most of useful things i know, do, willing to share with public.

Motivation

I’ve created a wiki to share my bookmarks, links, articles, tools, …etc, but the problem was when you find good link or anything and want to add it to the wiki, in this situation I was open Gitbook dashboard, and searching for the document that i want to add to, then push and sync. That was taking a lot of time, and i had have to do this from my laptop super boring, isn’t it?

The problem appears strongly when reading a book and add comments or notes, and want to track it or share it, similar thing to my IMDB reviews. All of this was annoying me to add to it, so I decided to build a bot that can collect these things and add them whenever I tell him to do so.

Features

Okay, now I’ve a problem with an idea to solve it. The first thing i was supposed to do is listing the main commands for this bot to understand.

/syncIMDB List all Movies/TV Series/Video Games ratings from IMDB.
/syncNotion Publishing pages to notes.zeyadetman.com from Notion.

Starting the Bot Implementation

So while I was thinking about how can i organize the bot object and its behaviors, I ended up with implement the Decorator design pattern.

Decorator design pattern: In this pattern you have 4 main things:

The main interface for your component and basic methods “without implementation”, in my case it’s the Bot.
The main concrete component that implements the default behavior of component behaviors.
The base decorator that act like a wrapper for concrete decorators.
The concrete decorator is to call the object and alter it.

Why? I have a monolithic class (Bot) with a bunch of behaviors and actions, like commands, configurations, messages, …etc, so i want to divide them into smaller classes that each class contains one behavior or action.

I split the main features into multiple concrete decorators.

One to handle the BotCommands , every command starting with /

export class BotWithCommands extends DecoratorBot {
  private setCommands(bot) {
    bot.command("syncIMDB", syncIMDB);
    bot.start(start);
    bot.help(help);
  }

  public launch() {
    this.setCommands(this.bot);
    super.launch();
  }
}

One to handle BotEvents or inline queries.

import { DecoratorBot } from "../decorator";
import { documentEvent } from "./document";

export class BotWithEvents extends DecoratorBot {
  private setEvents(bot) {
    bot.on("document", documentEvent);
    bot.on("sticker", (ctx: any) => ctx.reply("👍"));
  }

  public launch() {
    this.setEvents(this.bot);
    super.launch();
  }
}

You can read the code to understand more about the implementation and the idea for these decorators.

The final structure was something like this

.
├── commands
│   ├── help.ts
│   ├── index.ts
│   ├── start.ts
│   ├── syncIMDB.ts
│   └── syncNotion.ts
├── decorator
│   └── index.ts
├── events
│   ├── document.ts
│   └── index.ts
├── index.ts
├── types
└── utils
    ├── constants.ts
    ├── convert-name.ts
    └── writeFileToGithub.ts

`/syncIMDB` Create a list of my movies ratings

This was the first thing i handled in the bot. The problem is I need to show a list of all my movies ratings, I use IMDB to track this, but IMDB doesn’t offer apis to get my ratings, So the solution that i use is exporting the ratings manually, and send this file to the bot telling him to update this file to re-format it into a json file, then add this file to the notes app, and GitHub action will redeploy the app updating the movies list on my notes app with these new ratings.

I use nivo.rocks to visualize the genres and make the list more interactive. Please read my comment on how I implemented it.

This was a little bit tricky especially because I’m using docusaurus.io but you can check the code for it from here.

I use the same json file to add more pages with the same style.

`/syncNotion` Notion integration

The second thing is getting pages from notion. So the idea is creating a database on notion that contains multiple nested pages with their slugs/paths and this command will get the database by its id and fetching all pages under this databases including nested databases, then create commits with the files on Notes Repo on GitHub. That’s the idea I’ve came with.

Here’s the code for it.

const handleDatabases = async (
  databaseId: string,
  pagesToPublish: any,
  parentSlug = ""
) => {
  return new Promise(async (resolve, reject) => {
    try {
      const { results } = await notion.databases.query({
        database_id: databaseId,
      });
      const pages = results.filter((res) => res.object === "page");
      pages.forEach(async (page: any) => {
        if (page?.properties?.Slug?.rich_text?.[0]?.plain_text) {
          pagesToPublish[page.properties.Slug.rich_text[0].plain_text] = {
            slug: page.properties.Slug.rich_text[0].plain_text,
            isPublish: page.properties?.Published?.checkbox || false,
            path: `${parentSlug || ""}${
              page.properties.Slug.rich_text[0].plain_text
            }`,
            page,
          };
        } else {
          return ctx.reply("Please add a slug to the page");
        }
      });

      for await (let page of Object.values(pagesToPublish)) {
        const { slug, page: pageInfo } = page as any;
        const mdblocks = await n2m.pageToMarkdown(pageInfo.id);
        const finalMdBlocks = [];
        mdblocks?.forEach(async (block: any, index) => {
          if (index === mdblocks?.length - 1) {
            return;
          }
          if (block.type === "child_database") {
            const databaseId = block.parent.split("(").pop().split(")")[0];
            pagesToPublish[slug].children = {
              databaseId,
              slug,
              parentSlug: `${parentSlug || ""}${slug}`,
            };
          } else {
            finalMdBlocks.push(block);
          }
        });

        pagesToPublish[slug].mdBlocks = finalMdBlocks;
      }

      for await (let page of Object.keys(pagesToPublish)) {
        const { children, slug } = pagesToPublish[page] as any;
        if (children?.databaseId) {
          pagesToPublish[slug].childs = await handleDatabases(
            children.databaseId,
            {},
            `${children.parentSlug}`
          );
        }
      }

      console.log(util.inspect(pagesToPublish, false, null, true));
      return resolve(pagesToPublish);
    } catch (error) {
      return reject(error.message);
    }
  });
};

And that’s works great with a sample of notion database like this:

So if the page’s Published property is false, then the page will not be published to github repo, and if the page doesn’t have a Slug property it should gives an error, because the slug is a path of that file.

The final command on telegram gave me this reply

Wow! that’s totally awesome 😎

Until then I’ll let this post ends in this point and will update it whenever I add
new feature.

…to be continued

How I built my portfolio using NextJS, Typescript, and Chakra UI

Zeyad Etman — Sun, 24 Oct 2021 18:37:59 +0000

Originally published on my blog

In this post I’ll go with you in a detailed way on how i created my blog/portfolio from scratch using NextJS and Chakra UI, from creating the pages and posts markdown files to displaying them as html files, And how I handled newsletter service, and deploying the project on Vercel, Handling custom domains. So this post will good for you if you want to know more about anything that I’ve implemented here on my blog.

Here's the source code for this site.

NextJS + Typescript + Chakra UI

NextJS is one of the strongest framework to build a production project. I've used some features like SSG or pre-render pages at build time, API routes, file-system routing, fast refresh, configuration and deployments are super easy.

To get started just write this npx create-next-app@latest --ts.

The structure of the portfolio goes like that:

.
├── components
│   ├── Admin
│   ├── CareerStack
│   ├── ColorModeIcon
│   ├── Footer
│   ├── Layout
│   ├── MarkdownRender
│   ├── Navbar
│   └── Newsletter
├── configs
├── interfaces
├── libs
├── pages
│   ├── api
│   │   └── auth
│   └── posts
├── public
│   └── static
│       ├── images
│       └── sounds
├── styles
│   └── theme
└── utils

NextJS uses the pages folder to handle the app routes, as you may know if you created a file called pages/hello.tsx you can open it by visiting your-app.com/hello and that's super cool. So I created a folder called pages to handle the routes for the app. Also I created another folder called components to handle the react components that will be used across the pages.

Another feature of using NextJS is creating API routes, To do so you can create this folder pages/api and then create your apis inside it.

If you're building your projects with javascript, then you have to try typescript, Typescript will definitely help you documenting your code as you go, Also it forces you to use the right type so this will decrease the bugs and speed up your productivity while you're coding.

Here's the styling part, I use chakra-ui for creating reactjs components and styles without writing css. Also Chakra ui is handling the app color mode, and much more in the styling part. You can customize the theme, declaring the default values for the app you can check this folder for further information about this styles/theme.

In the mode icon that appears at the top of the site, I've used two things to get this icon based on the current weather of your location. In your first visiting the app, I'm getting your location from https://geolocation-db.com/json/ then store it in the cookies with max-age=3600 expired after 60minutes. When i got your location, I got also the location's weather, then display the icon based on weather. I implemented the logic in this file components/ColorModeIcon/index.tsx.

Name pronunciation

You probably have heard the pronunciation of my name when you clicked on the sound icon next to my name on the home page.

For this sound i just used Vocalizer and downloaded my name's sound.
Added it to webpack config to identify the file extension and location next.config.js

config.module.rules.push({
  test: /\.mp3$/,
  use: {
    loader: 'file-loader',
    options: {
      publicPath: '/_next/static/sounds/',
      outputPath: 'static/sounds/',
      name: '[name].[ext]',
      esModule: false,
    },
  },
});

And used it like below inside the onClick event handler for the icon:

const audio = new Audio('/static/sounds/zeyad_ar.mp3');
audio.play();

Analytics

Analytics is one of the most important parts for any product that users could use. I use Analytics here to just
track page views, but in the future i may use it for event tracking like clicking on subscription button
(Room for improvement).

To achieve this, I use Google Analytics and countapi-js.

I faced a problem here while using countapi-js because all of my old analytics have been tracked by Google analytics not countapi-js, and the target is delievering the actual pageviews for all pages, So i collect the old analytics from GA via this tool https://ga-dev-tools.web.app/query-explorer/

metrics= ga:pageviews
dimensions= ga:pagePath

After that I created a function to create a key in countapi-js set the key to page path and the default value is the GA pagePath page views count.

countapi
  .create({
    namespace: site.namespace,
    key: pagePath,
    value: pageViews,
  })

For GA, I just added its initialization to _document.tsx file and using it via this line gtag.pageview(url); in the _app.tsx to track all pages listening to router changes.

So in the final producation version, The site is running with two tracking services GA and countapi-js and they're running independently. But I depend on countapi-js to view page views and it delivers the actual count as GA.

Posts

Here's the most complicated part of the site, The Blog. But Nextjs made it so simple to organize and retrieve posts, In this section i'll go with you how i organized the blog posts files, not how i handled the markdown files, will explain this in the next section. So, Let's get started.

One of the biggest features in NextJS is Dynamic Routes. I created two files to handle the structure of the blogs pages/posts/index.tsx and pages/posts/[slug].tsx to handle the posts list, and the post page respectively.

I created a folder blogs in the project root for the blogs .md files, and in libs/posts.ts file, I created two helper functions getPosts(): Promise<IPost[]> and getPostBySlug(slug: string): Promise<null | IPost> - will explain more in the next section -, And used them in pages/posts/index.tsx and pages/posts/[slug].tsx in getStaticProps() Because we need this data to be updated in build time (rebuilding the site) and that make sense.

To know more about nextjs rendering/generating pages/data, look at this site.

And here's how I use Next Link component with Chakra UI Link to do client-side routing, note that we're using passHref prop to pass href to the Link component. In this way we guarantee that the [slug].ts is reading the slug correctly using router.query.slug.

// pages/posts/index.tsx

<NextLink href={`/posts/${fileName}`} passHref>
  <Link
    {...props}
  >
    {post.title}
  </Link>
</NextLink>

To handle the 404 in the not existing post urls, I use getStaticPaths() with fallback: false, Here's its code:

export const getStaticPaths: GetStaticPaths = async () => {
  const postsSlugs = await getPosts();
  const slugs = postsSlugs.map((post) => ({
    params: { slug: post?.fileName },
  }));

  return {
    paths: slugs, // predefined posts urls
    fallback: false, // any paths not returned by getStaticPaths will result in a 404 page
  };
};

That's pretty much for this section, let's go with the next one, rendering markdown files.

Rendering Markdown files

From the previous section, you should know that we're handling the post rendering in the pages/posts/[slug].tsx, So in this section we'll discuss the journey from writing the markdown files to rendering it as html file.

Libraries I've used to achieve this:

gray-matter: Converts a string with front-matter to object.
reading-time: How long an article will take to read.
react-markdown: Markdown component for React using remark.
react-syntax-highlighter: Syntax highlighting component for React.
rehype-raw: parse the tree again (and raw nodes). Keeping positional info OK.
remark-gfm: remark plugin to support GitHub Flavored Markdown.
remark-lint: remark plugin to lint Markdown code style.

Now we've this folder ./blogs/ containing markdown files with front-matter and we need to convert these files to array of objects, sorted by date.

The below code snippet is to get the filenames.

// libs/posts.ts

const { serverRuntimeConfig } = getConfig();
const postsDirectory = path.join(serverRuntimeConfig.PROJECT_ROOT, 'blogs');
const filenames = fs.readdirSync(postsDirectory);

Then I iterate over them to get the file contents using gray-matter and its readingTime estimation using reading-time

// libs/posts.ts

const posts = filenames.map((filename: string) => {
  const filePath = path.join(postsDirectory, filename);
  const fileContents = fs.readFileSync(filePath, 'utf8');
  const { content, data, excerpt } = matter(fileContents, {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    // eslint-disable-next-line
    excerpt: (file: any): void => {
      file.excerpt = file.content
        .split('\n')
        .slice(
          0,
          site.post?.excerpt?.noOfLines
            ? site.post?.excerpt?.noOfLines + 1
            : 4
        )
        .join(' ');
    },
  });

  return {
    content,
    excerpt,
    data,
    fileName: path.parse(filePath).name,
    readingTime: readingTime(content),
  };
});

const postsSortedByDate = posts.sort(
  (a, b) => +new Date(b.data.date) - +new Date(a.data.date)
);

At this point we've the list of posts as objects. That's super cool! Let's continue, Now we need a react component to render the post content in html page without breaking the styles/markup language.

To do this, I've created a component MarkdownWrapper using react-markdown wrapper, Here's what i've done:

For render img tag, I replaced it by next/image component, to handle image optimization on blog post images, Also i just added some styles to force the responsiveness of the rendered images

// components/MarkdownRender/index.tsx

img({ src, alt }) {
  return (
    <Box width="100%" className="post-image-container">
      <Image
        src={src || ''}
        alt={alt}
        layout="fill"
        className="image"
      />
    </Box>
  );
},

/* styles/globals.css */

.post-image-container {
  width: 100%;
}

.post-image-container > div {
  position: unset !important;
}

.post-image-container .image {
  object-fit: contain;
  width: 100% !important;
  position: relative !important;
  height: unset !important;
}

There's an important note here, Don't forget to update images domains in the next.config.js file.

For code rendering, I use react-syntax-highlighter and vscDarkPlus theme like below

// components/MarkdownRender/index.tsx

import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';

code({ inline, className, children, ...props }) {
  const match = /language-(\w+)/.exec(className || '');
  const lang = match?.[1] === 'js' ? 'javascript' : match?.[1];
  return !inline && match ? (
    <SyntaxHighlighter
      style={vscDarkPlus}
      PreTag="div"
      showLineNumbers
      showInlineLineNumbers
      language={lang}
      customStyle={{ marginBottom: '2rem' }}
    >
      {String(children).replace(/\n$/, '') || ''}
    </SyntaxHighlighter>
  ) : (
    <Code {...props}>{children}</Code>
  );
},

That's all for this section. You can know more just looking at this file components/MarkdownRender/index.tsx.

RSS and Newsletter

Okay, Here we have to do two things, first we need a rss.xml file generated from our posts files, second a newsletter service to send my new emails to followers - I hope you're one of them - And this service is https://www.getrevue.co/ It's free and promote the newsletter to your twitter profile.

So first thing we need to do is generating the rss.xml file, so we can list your blog posts as issues in your getrevue account.

To generate the rss.xml I used feed in generateRSSFeed() located here libs/feed.ts and calling it in a getStaticProps() function located in pages/posts/index.tsx to re-generate that file in build time.

After building and deploying the code I got this url https://www.zeyadetman.com/rss.xml with all posts metadata, Heading to https://www.getrevue.co/app/integrations/rss, And add the production url to ADD A FEED input. This will reflect in the issues page on getrevue account.

I highly recommend enabling Show newsletter on Twitter profile https://www.getrevue.co/app/integrations/twitter.

Right now we've just configured the newsletter service and RSS feeds. Another thing you may noticed if you want to add their subscription form into your blog, It requires users to confirm subscription from their emails. You can disable this by using getrevue api with double_opt_in: false creating a custom form.

I used react-hook-form to create the form, Also created an api to handle the request

// pages/api/subscribers.ts

const subscribeHandler = async (
    req: NextApiRequest,
    res: NextApiResponse<Data>
): Promise<NextApiResponse<Data> | void> => {
  const { email } = req.body;

  if (!email) {
    return res.status(400).json({ error: 'Email is required' });
  }

  const result = await fetch('https://www.getrevue.co/api/v2/subscribers', {
    method: 'POST',
    headers: {
      Authorization: `Token ${process.env.GETREVUE_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ email, double_opt_in: false }), // to disable the confirmation email
  });

  const data = await result.json();

  if (!result.ok) {
    return res.status(500).json({ error: data.error.email[0] });
  }

  return res.status(201).json({ error: '' });
};

And used it simply like this

// components/Newsletter/index.tsx

const { status } = await fetch('/api/subscribers', {
  method: 'POST',
  body: JSON.stringify({
    email: data.email,
  }),
  headers: {
    'Content-Type': 'application/json',
  },
});

To read more about handling the subscription form look at this file components/Newsletter/index.tsx, Also to know more about handling https in the custom domains for your getrevue, Please read the deployment section.

Deployment

The final part is going production.
Until now I have implemented the app, and want to go production, I use vercel it's the easist way to deploy your nextjs app.

Create new project, add the github repo of your project, don't forget to add the environment variables.

I'll keep this blog updated whenver I add a new feature to the blog. Just subscribe to the newsletter and I'll notify you via email.

Here's some resources that helped me:

Custom Domains: This helps me link my godaddy custom domain to vercel deployment.
How to make your custom domain secure with SSL: This helps me creating https://feed.zeyadetman.com and added it to getrevue custom domain.
How I Added an RSS Feed to My Next.js Site: This helped me generating the rss.xml page.
How to Set up GoDaddy Domain with Vercel.

Inspired Blogs:

A chrome extension to mute words on facebook newsfeed!

Zeyad Etman — Fri, 19 Feb 2021 01:01:08 +0000

Hey all, I developed a chrome extension to mute words on facebook newsfeed. But I didn't test it on a variety of facebook languages so if you're using facebook from chrome, So it's nice to give the extension a try from here
https://chrome.google.com/webstore/detail/mute-words-on-facebook/fhcioeahbcdffnkfgkbgghgdchbokohh

Source Code: https://github.com/zeyadetman/mutewords
I'm waiting your feedback.

How I've been using Google Sheets as a personal assistant

Zeyad Etman — Sat, 30 May 2020 18:15:03 +0000

Originally posted on my blog

Hello, In this post I’ll share with you How I've been using Google Sheets to track some of important things, Replacing almost all other productivity apps. In the beginning I want to note that not all things will be interesting to you, but I think you’ll find inspiration to do your own, and this is the goal of this post btw.
Not all following sheets created by me, and I’ll mention this in their sections.

Money (Savings and Expenses)

There’s a bunch of mobile apps to track your savings and expenses, I tried most of them, but any was customized as i want, so I found a great Money Tracking sheet that you have to give it a try from here.

Exchange Rate and Metals Tracking

You may need to be updated about currency conversion to your local currency, or you may be interested in following metal prices like silver or gold, So instead of searching and memorize the prices, or getting another app, I created a 'cronjob' or a trigger to get the data I want, then update the target sheet. To do this, Google sheets Allows us to write scripts into sheets or any G-suite app, you’re writing basically javascript with some additional helpers to access G-suite things in easy direct way, like access sheets with name, edit them, things like that, to know more about App Script click here.
Okay, what I’ve done is adding a daily USDtoEGP exchange rate to a sheet — Thanks to GOOGLEFINANCE — , and in another sheet page getting the price of gold daily — I’ve not found a free api to do this so I scraped a website to work around this — in the next few lines I’ll explain how to do this in a super easy few lines of gs code.

A sample for this sheet

You have to create a google sheet to populate the data into it.
Open your sheet then select tools > script editor. You’ll end up with something like this.

Here's my code to get the USD to EGP Exchange Rate from Google Finance

function getUsdToEgpRate() {
  const spreedSheet = SpreadsheetApp.openById(<sheetID>).getSheetByName('usdtoegp');
  const today = new Date();
  const todayFormatted = `${today.getFullYear()}, ${today.getMonth() + 1}, ${today.getDate()}`;
  const row = [
    today.toUTCString(),
    1,
    'USD',
    'Equals',
    `=REGEXREPLACE(TO_TEXT(index(GOOGLEFINANCE("CURRENCY:USDEGP", "price", date(${todayFormatted})), 2, 2)), "٫", ".")`,
    'EGP'
  ];
  spreedSheet.appendRow(row);
}

I want to say two things here:
first, To get sheetID, if your sheet url is https://docs.google.com/spreadsheets/d/blabla/edit then blabla is your sheetID. second, Why I used REGEXREPLACE to convert comma to dot to easily do calculations on its value.

Try to run this code, It should work!
To create a trigger to run this script as a cronjob, you'll see a timer icon called triggers click on it then do whatever you want. Super Easy, Ha?

Metal tracker

For the Metal tracker, As I told you before I didn't find a free solution to get an instant price for gold, So I created a little script using puppeteer to scrape a website to get the data through api, then calling it in the script, and here's my final gs script:

function goldPrice() {
  const spreedSheet = SpreadsheetApp.openById('<sheetID>').getSheetByName(
    'goldprice',
  );
  const today = new Date();

  const response = UrlFetchApp.fetch('<API_ENDPOINT>');
  const price = JSON.parse(response.getContentText())['price'];

  const row = [today.toUTCString(), 1, 'Gram', 'Equals', price];
  spreedSheet.appendRow(row);
}

You may notice that in the code above i didn't write the scraping code, the reason that I've a repository to just handle like stuff in an external place, you can write it in your own way, BTW I used Heroku to deploy the scraping code that written in NodeJS.

Whatever you want to do, You'll find a way in google sheets.

Jobs

Job tracking is another thing you may want to track in your life, you got the job or not, what was the offer, when you started, when you left, things like this will be cool to know what's your situation in your career, what're the campanies you know, ...etc. for this I found a nice sheet to track this.
Also there's a tricks to do more, you can connect this sheet with your gmail, and add a new column to the emails recieved from the company, or what you want, But I'm using Gmail labels for kinda stuff.

Twitter Archive

If you're using Twitter to learn or getting updates/tricks/important tweets of specific field/topic to retrieve them again, you will need to search in your tweets, re-tweets, or likes one day, So I'm using IFTTT to fill a sheet from whatever i do on twitter. Here's what can you do. Google sheet and Twitter.

IFTTT Things

If you don't know IFTTT then you have to give it a try, it works in this way > if this then that, in more details words (whenever this happens, then do that), I'm using it to keep tracking of new phone contacts in a sheet, and a little other things as well.

I didn't mention everything in this post, I want to inspire you how can you track most of your daily/occasionally stuff. And my sheet templates recommendations as well. I'll update the post whenever I found a good thing to say.

Apply condition on specific nested child elements in ReactJS

Zeyad Etman — Sun, 16 Feb 2020 13:21:35 +0000

Published here: Apply condition on specific nested child elements in ReactJS

Apply condition on specific nested child elements in ReactJS

Intro

We have a reactjs app, this app contains a container component called App inside it, we have multiple nested components some of them contains button elements. What we want to do is disable all child buttons programmatically without using styles way when I toggle a switch button in the container component App.

Naïve Solution

The naïve solution to this problem is simple create a new state to store the value of the switch button, then iterate manually over each child components and searching for button, if you find a button pass the switch button state value to the component to update the button behavior whenever the switch changes <Button {...(isDisable ? { disabled: true } : {})} />.

If we have 10 nested buttons for example, it'll be hassle to iterate over them, also we may add more buttons or change the condition.

take a look of the Tab 1 Panel 1 button here: https://github.com/zeyadetman/action-on-specific-child-elements/tree/naive-solution

Another Solution

Here's another solution to do, using useRef to get a reference to the component App then get all buttons inside it here's a code for this:

const appRef = useRef(null);
useEffect(() => {
  // here we got all rendered buttons inside the component
  const appButtons = appRef.current.getElementsByTagName("button"); 
  for (let btn of appButtons) {
    if (!isEnabled) btn.disabled = true;
    else if (isEnabled) btn.disabled = false;
  }
}, [isDisable]);
return (
  <div ref={appRef}>

In previous useEffect we got rendered buttons only not them all, and whenever a change happens the useEffect won't listen to it.

Hack it

We've to check if there's change in DOM, then call the body of the useEffect again, So we'll create two states to handle the tabs and subTabs changes, they're only elements to change the DOM, then pass their values to the dependancy array of the useEffect to listen the changes:

const [tabSelected, selectTab] = useState("1");
const [subTabSelected, selectSubTab] = useState("1");
.
.
.
useEffect(() => {
  // here we got all rendered buttons inside the component
  const appButtons = appRef.current.getElementsByTagName("button"); 
  for (let btn of appButtons) {
    if (!isEnabled) btn.disabled = true;
    else if (isEnabled) btn.disabled = false;
  }
}, [tabSelected, subTabSelected, isDisable]);

Conclusion and corner cases

I think this solution is fit only when you have multiple nested element and you want to apply condition on them all without iterating over them manually.

Corner cases

If you want to exclude button from our previous app, you can add a class to it then check for it in the useEffect function.
If the component will re-render and get back to its initial state, then you have to return a function in the useEffect to undo whatever you did in the useEffect body it's componentWillUnmount in React Lifecycle.

Here's the final commit to the app https://github.com/zeyadetman/action-on-specific-child-elements/tree/final-commit

JavaScript and Object Keys

Zeyad Etman — Mon, 06 Jan 2020 02:30:59 +0000

Originally Published on my blog

Hello 👋 In this post we will try to use objects in a different wrong way 😃 by implement a frequency array in javascript.
But before we dive into this, We will discover what's the frequency array?

Frequency Array on a sorted array

For example, If you have an array like this const arr = [1,2,2,3,3,4]; and you want to count occurrences of each element, then you can iterate over the values and store them as keys of object and its value increasing according to the number of occurrences in the remainig array. And this is called a frequency array. The code below go through what I'm saying (Please Don't do this again):

const arr = [1,2,2,3,3,4];
const result = {};
for(let i=0; i<arr.length; i++){
  if(arr[i] in result) result[arr[i]]++;
  else result[arr[i]] = 1;
}

console.log(result); // {1: 1, 2: 2, 3: 2, 4: 1}

Wow! that's cool and Right! But No. That's wrong! Why??
You're write this code and seems that works well, but try to add -1 to the first of your array, then you'll discover that the final result is {1: 1, 2: 2, 3: 2, 4: 1, -1: 1}, Wait... But Why? You're wondering why the -1 is in the end of the result object and you know the object in javascript sorting the keys by default. (Ummm not exactly!)
Objects' Keys in Javascript are strings and symbols only, you can't use any primitive values as keys except strings and symbols So the keys in your result aren't numbers, they're parsed to strings before storing as keys in object, but "-1" < "1" === true so still why -1 moved to the end?!

Note: Symbol Can be a key for objects, but it doesn't work like strings. Read more...

How Javascript objects order their keys?

Keys in Javascript objects are three types, +integer-like (0,1,2,3), strings, and symbols. And the order goes:

Integer-like in ascending order.
Strings in order of created, without any sort or comparison.
Symbols in order of created, without any sort or comparison.

Okay, So in our previous example, we figured out what happens while getting the result, Right?
But what if we want to get the right order?

new Map()

To achieve our frequency array respecting keys insertion order we can use new Map() which allows keys to be anytype, so the code for this will be like this:

const arr = [-1,1,2,3,4,3,2];
var result = new Map();
for(let i=0; i<arr.length; i++){
  if(result.has(arr[i])) {
    result.set(arr[i], result.get(arr[i])+1);
  }
  else result.set(arr[i], 1);
}

console.log(result); //Map(5) {-1 => 1, 1 => 1, 2 => 2, 3 => 2, 4 => 1}

Then we can iterate over it using forEach method.

Resources

I Published a package to control audio files in reactjs

Zeyad Etman — Tue, 26 Nov 2019 22:44:08 +0000

Hi all, I just published a package to control audio files in reactjs apps, Contributions are welcome.

Here's a package repo on github: https://github.com/zeyadetman/rc-player

Build Todo App with ReactJS Functional Components (hooks) and Class Components

Zeyad Etman — Thu, 07 Nov 2019 14:30:03 +0000

Originally Published on my blog

Hello everyone, In this post we will write a todo app using class components and react hooks in functional components.
First of all, you haven't to re-write your projects to use hooks, you're completely free to use whatever you want, this post
to give you basic knowledge about react hooks and how to use this way.

Todo App

State

Let's start our app small with just input, this input will handle our new todo through the app.

In our class version, we create a class with constructor then create our state, that holds our variable todoInput,
then we write a render function and return our input element.

import React from 'react';

export default class TodoInput extends React.Component{
  constructor(props){
   super(props);

   this.state = {
    todoInput: '';
   }
  }

  render() {
    return <input placeholder="ex. drink milk" onChange={(e) => this.setState({todoInput: e.target.value})} />
  }
}

`useState` hook

In our functional version, we just imported useState hook to manage our state - we can use it multiple times or use another
hook called useReducer in complex state explained later - simply useState hook takes one argument the initial state, and
return an array with two values the first is the current value, and the second is the function to set this state/value.

import React, { useState } from 'react';

export default function TodoInput() {
  const [todoInput, setTodoInput] = useState('');
  return <input placeholder="ex. drink milk" onChange={(e) => setTodoInput(e.target.value)} />
}

If you're still confused about this line

const [todoInput, setTodoInput] = useState('');

Waiting my next post about destructuring in JavaScript.

`useReducer` Hook

useReducer is a hook that takes two arguments callback function, and initial state, then return pair of values the state, and dispatch action that changes the state. The callback function takes two arguments, the current state, and action that dispatched from dispatch function, and returns the new state.
As we mentioned before, If we have a complex state management scenario, then useReducer will be great for this.
In our app, we need to create a state with all todos we've created and store it to localstorage, We need to intialize our todos state with its localstorage item, but in our first running there's no localstorage item for our state, its null so we need to check if it's null then initialize it with empty array. Also we need to handle remove and add todos so we can change our state and localstorage item.

In our class version:

  constructor(props) {
    super(props);

    this.state = {
      todos: JSON.parse(localStorage.getItem("todos")) || []
    };

    this.handleRemoveItem = this.handleRemoveItem.bind(this);
    this.handleAddTodo = this.handleAddTodo.bind(this);
  }

  handleRemoveItem(id) {
    const newTodos = this.state.todos.filter(todo => todo.id !== id);
    this.setState({ todos: [...newTodos] });
    localStorage.setItem("todos", JSON.stringify(this.state.todos));
  }

  handleAddTodo(todo) {
    if (this.state.todos) this.setState({ todos: [...this.state.todo, todo] });
    else this.setState({ todos: [todo] });
    localStorage.setItem("todos", JSON.stringify(this.state.todos));
  }

Using useReducer Hook we'll do something like this:

import React, { useReducer } from "react";

const [todos, dispatch] = useReducer((state, action) => {
    if (action.type === "add") {
      if (state) state = [...state, action.value];
      else state = [action.value];
    } else if (action.type === "remove") {
      const newTodos = state.filter(todo => todo.id !== action.value);
      state = [...newTodos];
    }

    localStorage.setItem("todos", JSON.stringify(state));
    return state;
  }, JSON.parse(localStorage.getItem("todos")) || []);

  ...
  <label>
    Add new todo: <TodoInput handleAddTodo={(todo)=> { dispatch({ type: "add", value: todo }); }} />
  </label>

Binding functions

Okay, until now we have known how to change our todo task (state), in the react lifecycle, But we need to save this todo
in somewhere so we can create multiple more than one todo. And here's what we're doing in our class component Binding.

Binding: Let's consider that you're getting a new mobile phone, and you need to view your data from your laptop, So you simply send them to your new laptop. Same with binding we have data called it this and need to send it from place to another.

in our class version we need to pass this from our entire class to our function, we write it like this

class App extends React.Component {
  constructor(props) {
    super(props);
    ...
    this.handleAddTodo = this.handleAddTodo.bind(this);
  }

  ...

  handleAddTodo(todo) {
    if (this.state.todos) this.setState({ todos: [...this.state.todo, todo] });
    else this.setState({ todos: [todo] });
    localStorage.setItem("todos", JSON.stringify(this.state.todos));
  }

  render() {
    return (
      <div className="App">
        <h1>Todo App React Class</h1>
        <label>
          Add new todo: <TodoInput handleAddTodo={this.handleAddTodo} />
        </label>
    ...
}

But in our functional version, there's no this, So we create our function easily like this:

import React, { useState } from 'react';

export default function TodoInput() {
  ...
   const handleAddTodo = todo => {
    dispatch({ type: "add", value: todo });
  };

  return (
    <div className="App">
      <h1>Todo App React Hooks</h1>
      <label>
        Add new todo: <TodoInput handleAddTodo={handleAddTodo} />
      </label>
    ...
}

Lifecycle

In Class version, we're using function like componentDidMount, componentWillUnmount, ...etc to handle state/props changes, But using hooks, React community found another concept, that every change in props/state is an effect to our component, So they create a new hook called useEffect that handle all the effects happened in the component (Lifecycle).

`useEffect`

useEffect is a hook that control the lifecycle or changes through the entire component, takes two arguments a call function and array of dependicies, the callback function will trigger at the early mount of component and if one of this dependencies change.

`useEffect` Vs `componentDidMount`

componentDidMount is one of react lifecycle that fires after the component mount, So if we want to display a welcome message when the user open the app, we can do this:

In class version we will use componentDidMount:

componentDidMount() {
    setTimeout(() => {
      this.setState({ showWelcomeMessage: false });
    }, 4000);
  }

In functional version we'll use useEffect hooks, we said that it takes array of dependencies, but we want to trigger the function only the component mount then there's no dependencies, So :

useEffect(() => {
    setTimeout(() => {
      triggerWelcomeMessage(false);
    }, 4000);
  }, []);

`useEffect` Vs `componentWillUnmount`

componentWillUnmount fires when we unmount the component, in our app we want to clear the storage when we close the app, and the main component of the app is App Tada :D

In class version

componentWillUnmount() {
  localStorage.removeItem("todos");
}

In functional version we return this function in useEffect like this:

useEffect(() => {
    return () => {
      localStorage.removeItem("todos");
    };
  }, []);

Note: we can use merge the previous hooks in one.

`useContext` Hook

You may want to share state between all of app components, theme for example, for this purpose we can use useContext to achieve this.
To do this, we have to create a context then wrap our app main component in it, then pass the state or whatever we want as a object to it, in our app we need to create a theme mode night/day mode, so we can write it like this:

// index.js

import React, { createContext } from "react";

export const TodoAppContext = createContext("");
function App() {
  ...
  const [themeMode, setThemeMode] = useState({ mode: "day" });

<TodoAppContext.Provider value={themeMode}>
      <div className={"App " + themeMode.mode}>
        <h1>
          Todo App React Hooks{" "}
          <button
            onClick={() => {
              setThemeMode(
                themeMode.mode === "day" ? { mode: "night" } : { mode: "day" }
              );
            }}
          >
            {themeMode.mode === "day" ? "night" : "day"}
          </button>
        </h1>
        ...
    </TodoAppContext.Provider>

We can import our context in other component like this:

import { TodoAppContext } from "./index";

export default function Todos(props) {
  ...
  const theme = useContext(TodoAppContext);

  return (
    <ul className={theme.mode}>

Now we have built a Todo app with reactjs hooks, and know about hook basics.
Here's the full code of functional version of our app:
https://github.com/zeyadetman/todo-app-hooks

And this for our class version:
https://github.com/zeyadetman/todo-app-class

As a backend developer, What should you do with users' gmail accounts that contains dots?

Zeyad Etman — Mon, 21 Oct 2019 00:07:35 +0000

Hi, If you have a gmail account, you can create multiple accounts using same email, just put dots between characters, But as a backend developer should you consider this case or not?

In the thread below i just pointed to this case.

Zeyad Etman

@zeyadetman

HackTip🔥: You can create multiple accounts on 99% of websites, using one gmail account, just put dots between characters.
example@gmail.com
ex.ample@gmail.com
Same account on gmail, two different on ~99% of websites.

23:50 PM - 20 Oct 2019

Include Reactjs Bundled component inside html file

Zeyad Etman — Tue, 08 Oct 2019 16:54:50 +0000

Oct 8 '19 Comments: 1 Answers: 3

I have a reactjs npm package, and I want to include it in html file, I got the bundeled files here but I'm facing an issue that require isn't a function, because i'm not in a nodejs project. So i can't import other dependencies, Can anyone help me further?

…

Open Full Question

DEV Community: Zeyad Etman

TypeScript, Understanding the code you write

How TypeScript works?

Differences in Action

Function overloading

Narrowing (make it more specific)

keyof and typeof

in operator and extends

Generics

Typescript Coverage

Reduce Bundle size with Chakra UI And NextJS

Building personal assistant bot with telegram

Motivation

Features

Starting the Bot Implementation

/syncIMDB Create a list of my movies ratings

/syncNotion Notion integration

How I built my portfolio using NextJS, Typescript, and Chakra UI

NextJS + Typescript + Chakra UI

Name pronunciation

Analytics

Posts

Rendering Markdown files

RSS and Newsletter

Deployment

Here's some resources that helped me:

Inspired Blogs:

A chrome extension to mute words on facebook newsfeed!

How I've been using Google Sheets as a personal assistant

Money (Savings and Expenses)

Exchange Rate and Metals Tracking

Metal tracker

Jobs

Twitter Archive

IFTTT Things

Apply condition on specific nested child elements in ReactJS

Apply condition on specific nested child elements in ReactJS

Intro

Naïve Solution

Another Solution

Hack it

Conclusion and corner cases

Corner cases

JavaScript and Object Keys

Frequency Array on a sorted array

How Javascript objects order their keys?

new Map()

Resources

I Published a package to control audio files in reactjs

Build Todo App with ReactJS Functional Components (hooks) and Class Components

Todo App

State

useState hook

useReducer Hook

Binding functions

Lifecycle

useEffect

useEffect Vs componentDidMount

useEffect Vs componentWillUnmount

useContext Hook

As a backend developer, What should you do with users' gmail accounts that contains dots?

Include Reactjs Bundled component inside html file

`keyof` and `typeof`

`in` operator and `extends`

`/syncIMDB` Create a list of my movies ratings

`/syncNotion` Notion integration

`useState` hook

`useReducer` Hook

`useEffect`

`useEffect` Vs `componentDidMount`

`useEffect` Vs `componentWillUnmount`

`useContext` Hook