Forem: Ephraim Duncan

Deploying Documenso with Vercel, Supabase and Resend

Ephraim Duncan — Fri, 08 Sep 2023 08:18:28 +0000

In this article, we'll walk you through how to deploy and self-host Documenso using Vercel, Supabase, and Resend.

You'll learn:

How to set up a Postgres database using Supabase,
How to install SMTP with Resend,
How to deploy your project with Vercel.

If you don't know what Documenso is, it's an open-source alternative to DocuSign, with the mission to create an open signing infrastructure while embracing openness, cooperation, and transparency.

Prerequisites

Before we start, make sure you have a GitHub account. You also need Node.js and npm installed on your local machine (note: you also have the option to host it on a cloud environment using Gitpod for example; that would be another post). If you need accounts on Vercel, Supabase, and Resend, create them by visiting the Vercel, Supabase, and Resend websites.

Checklist:

[ ] Have a GitHub account
[ ] Install Node.js
[ ] Install npm
[ ] Have a Vercel account
[ ] Have a Supabase account
[ ] Have a Resend account

Step-by-Step guide to deploying Documenso with Vercel, Supabase, and Resend

To deploy Documenso, we'll take the following steps:

Fork the Documenso repository
Clone the forked repository and install dependencies
Create a new project on Supabase
Copy the Supabase Postgres database connection URL
Create a .env file
Run the migration on the Supabase Postgres Database
Get your SMTP Keys on Resend
Create a new project on Vercel
Add Environment Variables to your Vercel project

So, you're ready? Let’s dive in!

Step 1: Fork the Documenso repository

Start by creating a fork of Documenso on GitHub. You can do this by visiting the Documenso repository and clicking on the 'Fork' button. (Also, star the repo!)

Choose your GitHub profile as the owner and click on 'Create fork' to create a fork of the repo.

Step 2: Clone the forked repository and install dependencies

Clone the forked repository to your local machine in any directory of your choice. Open your terminal and enter the following commands:



# Clone the repo using Github CLI
gh repo clone [your_github_username]/documenso

# Clone the repo using Git
git clone <https://github.com/[your_github_username]/documenso.git>

You can now navigate into the directory and install the project’s dependencies:



cd documenso

npm install

Step 3: Create a new project on Supabase

Now, let's set up the database.

If you haven't already, create a new project on Supabase. This will automatically create a new Postgres database for you.

On your Supabase dashboard, click the 'New project' button and choose your organization.

On the 'Create a new project' page, set a database name of documenso and a secure password for your database. Choose a region closer to you, a pricing plan, and click on 'Create new project' to create your project.

Step 4: Copy the Supabase Postgres database connection URL

In your project, click the 'Settings' icon at the bottom left.

Under the 'Project Settings' section, click 'Database' and scroll down to the 'Connection string' section. Copy the 'URI' and update it with the password you chose in the previous step.

Step 5: Create a `.env` file

Create a .env file in the root of your project by copying the contents of the .env.example file.

Add the connection string you copied from your Supabase dashboard to the DATABASE_URL variable in the .env file.

The .env should look like this:



DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:5432/postgres"

Step 6: Run the migration on the Supabase Postgres Database

Run the migration on the Supabase Postgres Database using the following command:



npx prisma migrate deploy

Step 7: Get your SMTP Keys on Resend

So, you've just cloned Documenso, installed dependencies on your local machine, and set your database using Supabase. Now, SMTP is missing. Emails won't go out! Let's fix it with Resend.

In the Resend dashboard, click 'Add API Key' to create a key for Resend SMTP.

Next, add and verify your domain in the 'Domains' section on the sidebar. This will allow you to send emails from any address associated with your domain.

You can update your .env file with the following:



SMTP_MAIL_HOST='smtp.resend.com'

SMTP_MAIL_PORT='25'

SMTP_MAIL_USER='resend'

SMTP_MAIL_PASSWORD='YOUR_RESEND_API_KEY'

MAIL_FROM='noreply@[YOUR_DOMAIN]'

Step 8: Create a new project on Vercel

You set the database with Supabase and are SMTP-ready with Resend. Almost there! The next step is to deploy the project — we'll use Vercel for that.

On your Vercel dashboard, create a new project using the forked project from your GitHub repositories. Select the project among the options and click 'Import' to start running Documenso.

Step 9: Add Environment Variables to your Vercel project

In the 'Configure Project' page, adding the required Environmental Variables is essential to ensure the application deploys without any errors.

Specifically, for the NEXT_PUBLIC_WEBAPP_URL and NEXTAUTH_URL variables, you must add .vercel.app to your Project Name. This will form the deployment URL, which will be in the format: https://[project_name].vercel.app.

For example, in my case, the deployment URL is https://documenso-supabase-web.vercel.app.

This is a sample .env to deploy. Copy and paste it to auto-populate the fields and click ‘Deploy.’ Now, you only need to wait for your project to deploy. You’re going live — enjoy!



DATABASE_URL='postgresql://postgres:typeinastrongpassword@db.njuigobjlbteahssqbtw.supabase.co:5432/postgres'

NEXT_PUBLIC_WEBAPP_URL='https://documenso-supabase-web.vercel.app'

NEXTAUTH_SECRET='something gibrish to encrypt your jwt tokens'

NEXTAUTH_URL='https://documenso-supabase-web.vercel.app'

# Get a Sendgrid Api key here: <https://signup.sendgrid.com>

SENDGRID_API_KEY=''

# Set SMTP credentials to use SMTP instead of the Sendgrid API.

SMTP_MAIL_HOST='smtp.resend.com'

SMTP_MAIL_PORT='25'

SMTP_MAIL_USER='resend'

SMTP_MAIL_PASSWORD='YOUR_RESEND_API_KEY'

MAIL_FROM='noreply@[YOUR_DOMAIN]'

NEXT_PUBLIC_ALLOW_SIGNUP=true

Wrapping up

Congratulations! 🎉 You've successfully deployed Documenso using Vercel, Supabase, and Resend. You're now ready to create and sign your own documents with your self-hosted Documenso!

In this step-by-step guide, you learned how to:

set up a Postgres database using Supabase,
install SMTP with Resend,
deploy your project with Vercel.

Over to you! How was the tutorial? If you enjoyed it, please do share! And if you have any questions or comments, please reach out to me on Twitter / X (DM open) or Discord.

We're building an open-source alternative to DocuSign and welcome every contribution. Head over to the GitHub repository and leave us a Star!

Recursion in JavaScript and React Components

Ephraim Duncan — Tue, 13 Dec 2022 14:57:24 +0000

Introduction

Recursion, in its essence, is a method of problem-solving that employs the solution to be expressed in terms of itself. This means that a function that employs recursion will call upon itself repeatedly until it reaches a specific base case, at which point the recursion will cease and the function will return a result.

Recursive functions can be very useful in a variety of situations. They are a way of defining a function in terms of itself, which can be a powerful tool for solving certain types of problems.

One example of where recursive functions can be useful is in computer science. For example, recursive functions can be used to traverse tree data structures, allowing for an elegant and efficient solution to the problem of visiting and processing each node in the tree.

In this context, a recursive function would call itself on each of the child nodes of the current node, allowing it to visit and process each node in the tree in turn. This approach can be much more efficient and elegant than using a loop to traverse the tree.

There are more practical applications of recursive functions as we would find out. Let's look at some basic examples of recursive functions.

Factorial of a Integer

To calculate the factorial of a number, you simply multiply that number by every positive integer less than it. For example, to calculate the factorial of 5, you would do the following:

5! = 5 x 4 x 3 x 2 x 1 = 120

Let's write a simple recursive function that will calculate the factorial of a number



function factorial(n) {
  // The base case: if n is 0, the factorial is 1
  if (n === 0) return 1;

  // Otherwise, the factorial is n * the factorial of n - 1
  return n * factorial(n - 1);
}

// Calculate the factorial of 5
console.log(factorial(5)); // Outputs: 120

The image shows the execution of the factorial function.

The factorial function calculates the factorial of a given number by calling itself repeatedly with the input number minus one each time. This continues until the input number is 0, at which point the function returns 1 (the base case) and the recursion stops.

Fibonacci number at a given Index

A Fibonacci number is a number in a sequence of numbers where each number is the sum of the previous two numbers, starting with 0 and 1. The nth Fibonacci number is calculated by adding the (n-1)th and (n-2)th numbers in the sequence.

For example, to calculate the 10th Fibonacci number, you would add the 9th and 8th numbers in the sequence (34 and 55) to get 89.

To calculate a Fibonacci number in Javascript, you could write a recursive function like this:



function fibonacci(n) {
  // The base case: if n is 0 or 1, the Fibonacci number is n
  if (n === 0 || n === 1) return n;

  // Otherwise, the Fibonacci number is the sum of the previous two numbers
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// Calculate the Fibonacci number at index 10
console.log(fibonacci(5)); // Outputs: 55

This image shows the execution of the factorial function.

The fibonacci function calculates the nth number in the fibonacci sequence by calling itself repeatedly with the input number minus one and minus two each time. This continues until the input number is 0 or 1, at which point the function returns 1 (the base case) and the recursion stops. The sum of the previous two fibonacci numbers are then returned, allowing the recursion to return to the previous call and continue until the original call to fibonacci(n) returns the nth fibonacci number.

Sum of all elements in an Array

Given an array of integers, you can use recursion to calculate the sum of all the elements in the array.



function sum(arr) {
  // The base case: if the input array is empty, the sum is 0
  if (arr.length === 0) return 0;

  // Otherwise, the sum is the first element plus the sum of the rest of the array
  const firstElement = arr[0];
  const restOfArray = arr.slice(1);
  return firstElement + sum(restOfArray);
}

// Calculate the sum of the array [1, 2, 3, 4, 5]
console.log(sum([1, 2, 3, 4, 5])); // Outputs: 15

The function calculates the sum of all the numbers in a given array by calling itself repeatedly with the input array minus the first element each time.

This continues until the input array is empty, at which point the function returns 0 (the base case) and the recursion stops. The sum of the current element and the previous sum is then returned, allowing the recursion to return to the previous call and continue until the original call to sum(arr) returns the sum of all the numbers in the input array.

Recursion in React Components

Recursion can be used in React components in cases where a component needs to render a nested structure of data, such as a list of comments on a blog post or a social media site like Reddit.

Let's consider the following React component that renders a the comments and their replies like the one above.



function CommentThread({ comments }) {
  return (
    <ul>
      {comments.map((comment) => (
        <li key={comment.id}>
          <div>{comment.text}</div>
          {comment.replies && <CommentThread comments={comment.replies} />}
        </li>
      ))}
    </ul>
  );
}

The CommentThread component receives a comments prop that represents a list of comments and their replies. The component renders a list, with each list item representing a single comment. If the comment has replies, the component recursively renders a new CommentThread with the comment's replies as the comments prop. This continues until all comments and replies have been rendered.

Conclusion

As you can see, recursion can be a useful technique for solving a variety of different problems in JavaScript. It's important to carefully consider the base case and the recursive step for each problem to ensure that the recursive function terminates and returns the correct result.

Recursion can also be computationally expensive and may not always be the most efficient approach. Therefore, it's important to carefully consider whether recursion is the right approach for a particular problem before implementing it in your code.

Rewind - MongoDB Atlas Hackathon 2022 on DEV

Ephraim Duncan — Thu, 08 Dec 2022 23:23:42 +0000

What I built

Rewind. Easily access and share your Twitter Bookmarks. You ever wonder about where your Twitter Bookmarks are, because you don't bother to look for them after you click that button? I have a deal for you.

Category Submission:

Choose Your Own Adventure

App Link

Try now at https://rewind-zeta.vercel.app/

Screenshots

Landing Page

Random Bookmark Daily

Bookmarks

Shared Bookmarks

Search Shared Bookmarks

Description

With Rewind, free now and forever, you can:

Get a Random bookmark for you daily from your bookmarks
Share your Twitter bookmarks with others to help them discover new and interesting content
Easily access your bookmarks from anywhere
Discover new content through the bookmarks of others
Search the shared bookmarks for others bookmarks on topics of your choosing

Link to Source Code

The source code is available here: https://github.com/dephraiim/rewind

Permissive License

MIT Licensed

Background

Like most people, I bookmark a tweet I find interesting and leave them to collect dust. I always thought to myself I will visit them again but I never did so I decided to force myself to.

I added some flair and features to make the app interesting. Displaying only your bookmarks is boring. I needed something to challenge myself and this was the perfect opportunity.

How I built it

With this app, I crossed one thing that has been haunting my Todos for a really long time. OAuth 2.0 and how to authenticate user with it and the Twitter API helped me with that.

Using MongoDB, I store the new shared bookmark in an shared collection and fetch it when needed.

I tried MongoDB Altas Search for the first time with the search feature for the shared bookmarks and it was perfect.

Use Preact in Next.js 13

Ephraim Duncan — Sun, 27 Nov 2022 11:04:12 +0000

Introduction

Next.js uses React by default. In this blogpost, I want to replace React with Preact and compare the build differences.

Preact is a JavaScript library, considered the lightweight 3kb alternative of React with the same modern API and ECMA Script support. Preact has the fastest Virtual DOM compared to other JavaScript frameworks. It is small in size. Tiny! It is designed to work in a browser with DOM, which justifies why it is so tiny.

Why Replace React

There are a few reasons why you would do this and there are some other posts that explain it very well.

The key distinction is that Preact lacks several of the experimental features included in React, like Suspense and Concurrent Mode. You have a strong argument for replacing React with Preact if you don't use any of these of the more sophisticated features of React.

I'll summarize some of the reasons you should replace React with Preact.

Preact provides the thinnest possible Virtual DOM abstraction on top of the DOM.
Preact has a small size!
Preact is fast, and not just because of its size.
Preact is highly compatible with React API and supports the same ECMA Script
Preact has a package named preact/compat to let developers use React libraries with Preact.

Learn more about the differences of Preact from React here

Get Started

Let's start by creating a new Next.js app.



npx create-next-app next-with-preact --use-pnpm

Next, we need to install Preact in app.



pnpm install preact

Setup `app` Directory in Next.js 13

Next.js 13 introduces layouts with the app directory. To use the app directory, add the following to your next.config.js file.



module.exports = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    appDir: true,
  },
};

In the main directory, create an app directory and a hello directory in the app directory. Add a page.tsx in the hello directory.

The app directory should look like this



app/
├── hello
│   └── page.tsx
├── head.tsx
└── layout.tsx

The head.tsx and layout.tsx will be generated when you start your server in dev environment.

Add the following to your app/hello/page.tsx



export default function HelloPage(): JSX.Element {
  return <div>Hello from app directory</div>;
}

Replace the contents of pages/index.tsx with a simple page component.



export default function Home() {
  return <div>Index Page from pages directory</div>;
}

Run your app with pnpm dev and inspect http://localhost:3000/ and http://localhost:3000/hello to confirm everything is working.

The Swap

Once everything is working, we need to swap React with Preact in our Next.js app.

We need to tell Next.js that we'd like to swap out React for Preact by using Webpack's aliasing feature only in client production build. The dev server will run with React.

Let's update our next.config.js with the following



module.exports = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    appDir: true,
  },

  webpack: (config, { dev, isServer }) => {
    if (!dev && !isServer) {
      Object.assign(config.resolve.alias, {
        "react/jsx-runtime.js": "preact/compat/jsx-runtime",
        react: "preact/compat",
        "react-dom/test-utils": "preact/test-utils",
        "react-dom": "preact/compat",
      });
    }
    return config;
  },
};

That's it!

Once you build your Next.js application with next build, you should see a decrease in bundle size. Compare the build results for our demo application.

With Preact

With React

`next-plugin-preact`

The Preact Team provides a plugin for use with Next.js. It works in both dev and production environments.

Install the plugin



pnpm install next-plugin-preact preact react@npm:@preact/compat react-dom@npm:@preact/compat react-ssr-prepass@npm:preact-ssr-prepass preact-render-to-string

Usage

Use the plugin your next.config.js like this



// next.config.js
const withPreact = require("next-plugin-preact");

module.exports = withPreact({
  /* regular next.js config options here */
});

If you are not using any experimental React features in your Next.js app, I would recommend replacing React with Preact to reduce your bundle size by a considerable chunk.

Show your VSCode Setup

Ephraim Duncan — Thu, 08 Sep 2022 13:32:39 +0000

I have been switching between themes and font's for a while but I have something finally and I want to show it off.

Here is mine.

Theme: Gruvbox Material
Font: Monocraft - A programming font based on the typeface used in Minecraft

I hope mine isn't too crazy..😬

So tell me what's your current VSCode theme and font look like? I'm curious.

Writing a Good Technical Article

Ephraim Duncan — Sat, 02 Jul 2022 09:50:52 +0000

Introduction

I used to write poems and short stories. When I became a developer, I felt the urge to write as well. Although I haven't been very consistent, I have published some technical articles that I'm pleased with. Every developer should value their ability to write. You can communicate your understanding of a particular technology or issue in writing.

If you want to start writing as a developer today, you don't even need to create a blog from scratch because platforms like Hashnode and Dev.to have already created an excellent environment for you to produce technical content. This article serves as a manual for developers on how to create quality technical content. These are some guidelines that, in my opinion, make you write a good technical article. I sincerely hope you will find my writing enjoyable.😄

PS: I am not an expert and I don't claim to be an expert.

1. Choose a Topic

What gives you the most problems as a developer? What kinds of articles do you want to read yet nobody is writing them? What interests you as a developer? When you want to write an article, you should ask yourself these questions.

Pick a subject based on what interests you and what you want to learn; this will put you in a position to produce the finest article possible. To put it into perspective, your subject should fall somewhere between the three: something you care about, something you know well, and something your audience cares about.

2. Create a catchy title.

The next step is to come up with a title for your subject after you have chosen it. When someone visits your article, the title is the first thing they see.

The headline is what draws the reader's attention on a dashboard with many articles from various authors. The title of an article can influence whether a reader decides to read it or not. If you wish, make it catchy and clickbaity while still being a depiction of the subject you've picked.

3. Do your Research

Even if you are implementing custom React Hooks on a daily basis, writing about them won't be as simple for you. Maybe you are really good so it comes easily, some of us are not. Whether or whether you are an expert in the field, do some research on the subject you have chosen. Simply put, the purpose of the research is to broaden your perspective on your topic.

You can see a different viewpoint on how to do things from your usual method of doing things and possibly learn something you did not know by watching talks on the subject, reading other people's code related to your subject, reading the documentation, and reading other articles. Although it can take longer, three hours of research is enough.

4. Outline Your Article

I usually organize and list the main topics of any technical article before I begin. Create a plan, either on paper or in Notion. You can better understand the entire content as a whole by using an outline and you are well prepared for what you will write and how you will write it.

An outline paints a picture of the primary and supporting concepts of a topic. It can be written in short points or entire sentences, bullet points or Roman numerals—just a simple guide for how to write your article.

5. Be clear and concise

Your paragraphs and sentences should be brief. Long, dense paragraphs can be intimidating. Relay as much as you want while using the least amount of energy. People value their time, therefore you must be concise and to the point.

Avoid waffling; ensure that your writing does not obstruct the message you are trying to express. Adverbs sometimes lead to repetitive words, so try to limit their use in your writing. Tools like Grammarly might assist you in resolving this issue if English is not your first language.

6. Don't write a lot of code without explaining

You write technical content to describe how to use a certain language, library, or framework; for the love of God, do not paste a large portion of code with only a brief description or, worse, with no explanation at all. Imagine you are watching a tutorial and the tutor just keeps pasting the code, that's how annoying your article will sound.

The reader has likely never used the technology before or has little experience with it, so they have chosen your article as a guide to help them learn how to use it. This means that the objective of your article is to teach them how to use it. Divide the code into little blocks and guide the reader with it.

7. Check your grammar

Grammar should be considered while you write your content. Like your dressing on a first date, good grammar in an article communicates a lot. Check your word choice very carefully; affect and effect are two distinct words, and there are other words in the English language that fit this description. Verify that your spellings are accurate.

Additionally, use conjunctions to make your thoughts flow more easily. Make sure that proper nouns and the beginning of phrases are capitalized correctly. Avoid writing numbers, especially big ones, in sentences since it makes them harder to read. The number 249 is preferable than 249 and forty-nine. Use Grammarly to help you correct any mistakes you come across.

8. Use Visuals

Use diagrams and visuals if you can; they speed up learning and are attention-grabbing. Even basic diagrams and graphics will work well. If you are developing a web application, please show us a working demo image along with a well-explained code sample.

The reader will want to read more since they can simply mentally model what to expect. Diagrams.net is one of many free drawing programs available online. Another excellent option is Figma, although you'll need more practice with it.

9. Edit your work. And then edit again.

Take your time to read through and update your article once you are finished. A proofread will be sufficient to catch any errors you may have overlooked. Take a break from the post and proofread with fresh eyes as well; you will read the article in a new state and see things from a different viewpoint, which will help you notice any problems you may have missed.

Editing your work is simply the best approach to ensure that it is of the highest caliber possible when you are putting it out there.

10. If you can, have someone review your draft

I mean literally, get another set of eyes. When you're finished, ask a person you trust who is an expert in your field to review your draft. An additional review is crucial. They could draw your attention to details you missed and provide other approaches.

You get to view the reader's firsthand perspective on your content; who knows, maybe they misunderstood something that, in your opinion, is obvious. It's incredibly important to get feedback, especially from trustworthy sources.

Conclusion

Be confident in your abilities and yourself in addition to the aforementioned advice.
You wouldn't have chosen to write it in the first place if you knew you couldn't do it.
Let's work to produce the highest possible standard of material as tech writers. Treat your writing as a product.

Illustration by Anna Antipina from Ouch!

Lazy Loading Images In Next.js

Ephraim Duncan — Fri, 27 May 2022 19:23:31 +0000

Introduction

We have all heard this term before. Lazy Loading. What is it anyways?

Lazy loading postpones the loading of resources on a page, in this case an image, until they are actually required. Rather than loading these resources as soon as the page loads, as is usually the case, they are delayed until the user need them. They have numerous advantages. We can make our web pages load really quickly with lazy loading. In this guide, we will cover how to lazy load images using Next.js.

Next.js comes default with an Image component. Lazy loading is enabled by default in the Next.js Image component. It is not only useful to the end-user, but it is also beneficial to the server because it does not have to execute image generation for images that may or may not be required.

Installation and Setup

You can create a new Next.js application using the following command:

npx create-next-app lazy-load-images

Let's start the application by running the following command

npm run dev
# or
yarn dev

We are running our application in the development server. Open your browser and navigate to https://localhost:3000.

Lazy Loading

Add a new image file to the public directory. In the pages directory, create a new file lazy-load.js. This will be our Next.js page.

Add the following to the fil

export default function ImagePage() {
    return (
        <h1>Image Page</h1>
    );
}

Visit https://localhost:3000/lazy-load to preview the page. Now that the page has rendered succesfully, we can continue to implement lazy loading.

First import the Image component from Next.js

import Image from "next/image";

Next, replace the <h1> tag with this the Image Component

<Image
  src="/github.jpg"
  alt="Github"
  width={600}
  height={450}
  layout="responsive"
  loading="lazy"
/>

Now preview it in the browser to see the results. Add a lot of images and see lazy loading in action as you scroll.

Creating Your Own JavaScript Syntax.

Ephraim Duncan — Wed, 25 Nov 2020 10:24:39 +0000

Header by Maggie Appleton

Today we are going to create our own syntax in JavaScript. For simplicity sake and easy understanding, we will stick to a single javascript structure. Variable Declaration. We are going to implement a new syntax for declaring variables in JavaScript. The new syntax definition will be below.



// `set` and `define` to replace `let` and `const`

set name as "Duncan";
// let name = "Duncan";

define k as 1024;
// const k = 1024;

With the syntax, we could split the input and replace set and define with let and const respectively but everyone can do that. Let's try something else.

A compiler.

Don't get too scared, it will be a very small and tiny one. For simplicity, our compiler will only support numbers, strings, boolean and null.

The Compiler

Different compilers work in different ways but break down to the three primary stages:

Parsing : takes the raw code and turning it into an abstract representation known as an Abstract Syntax Tree (AST)
Transformation : takes the abstract representation and transforms and modifies it into another abstract representation of the target language.
Code Generation : takes the transformed abstract representation and generates the new code based on the given abstract representation.

Parsing

Parsing also gets broken down into two stages. Lexical Analysis (lexing/ tokenizing) and Syntactic Analysis. Lexical Analysis takes the raw code and turn each character it into a token with the lexer/tokenizer. The tokenizer returns an array of all the tokens for a given syntax.



// Given the code
set age as 18;

The tokenizer will return the array below.



[
  { type: 'keyword', value: 'set' },
  { type: 'name', value: 'age' },
  { type: 'ident', value: 'as' },
  { type: 'number', value: '18' },
];

Tokens are an array of tiny little objects that describe an isolated piece of the syntax.

Each token is an object with a type and value property. The type holds the type of the current character or set of characters being passed. value property stores the value of the character being passed.

Syntactic Analysis then takes the tokens and transforms them with a parser function to an abstract representation of the tokens in relation to each other. Usually, we would have two ASTs where one is from our language and the other is for the target language, but for simplicity again, we will build a single AST modify the same one to produce a different AST.

The parser will return the object below.



// Abstract Syntax Tree for `set age as 18;`
{
  type: "Program",
  body: [
    {
      type: "VariableDeclaration",
      kind: "set",
      declarations: [
        {
          type: "VariableDeclarator",
          id: { type: "Identifier", name: "age" },
          init: { type: "NumberLiteral", value: 18 },
        },
      ],
    },
  ],
}

Transformation

The next stage for our compiler is transformation. Taking the AST and transforming it into a totally new AST for any programming language or just modifying the same one. We won't generate a new AST, we will just modify it.
On our AST, we have at each level an object with a type property. These are known as AST Node. These nodes have defined properties on them that describe one isolated part of the tree.



// We have a Node for a "NumberLiteral"
{
  type: "NumberLiteral",
  value: 18,
}

// A Node for a "VariableDeclarator"
{
  type: "VariableDeclarator",
  id: { ...object },
  init: { ...object },
}

Fortunately for us, we are doing only one thing with our AST, that is Variable Declaration. Let's see how we will modify our AST.

At the VariableDeclaration node, we have a kind property that contains the current keyword being used. So we will traverse the tree and visit each node until have a Node with type of VariableDeclaration and set the kind property to what keyword we want. let or const



// AST for `set age as 18;`
{
  type: "Program",
  body: [
    {
      type: "VariableDeclaration",
      kind: "set", // <- `kind` will be changed to `let` or `const`
      declarations: [ [Object] ],
    },
  ],
}

// AST after transforming it
{
  type: "Program",
  body: [
    {
      type: "VariableDeclaration",
      kind: "let", // <<<<<<<: Changed from `set`
      declarations: [ [Object] ],
    },
  ],
}

Code Generation

Now that we have our new AST, we can now generate our code. Our new AST has everything we need. The keyword, the variable name and the value assigned to the variable. The name and value can be found in the VariableDeclarator node.

Now that's it. A general idea of compilers and how they work. Not all compilers work like this but most certainly do. That's backbone and skeleton of our compiler. If our compiler was a website, all the above will be the HTML.

Let's write some code. 😋

We won't use any external libraries, we will write everything from scratch😺. Also, you must have Node.js installed on your local system. Use any text editor or IDE of your choice.

Create a new directory and run npm init -y and create a new javascript file with any filename of your choice.

In general, we will have 5 main functions in our code

`tokenizer`

We will first declare a tokenizer function with a parameter of input, the inital code we are going to pass to our compiler as a string. Then initialize a current and tokens variable. current for the current location in the input and tokens will be an array that will hold the tokens for each individual token. Then we will add a;and awhitespace character to the end.



const tokenizer = (input) => {
  let tokens = [];
  let current = 0;

  // Add the semicolon to the end of the input if one was not provided
  // Then add whitespace to the end of the input to indicate the end of the code
  if (input[input.length - 1] === ';') {
    input += ' ';
  } else {
    input = input + '; ';
  }
};

After the initial declarations in the tokenizer, we come to the main part. We will have a while loop that will loop over all the characters in the input and while there is a character available, we will check for the type of the character and add it to a token and add the token to the tokens array.



const tokenizer = (input) => {
  // ...
  while (current < input.length - 1) {
    // We get the current character first
    const currentChar = input[current];

    // Now, we test for the types of each character.
    // We check for Whitespaces first
    // Regex to check for whitespace
    const WHITESPACE = /\s+/;
    if (WHITESPACE.test(currentChar)) {
      // If the current character is a whitespace, we skip over it.
      current++; // Go to the next character
      continue; // Skip everything and go to the next iteration
    }

    // We need semicolons They tell us that we are at the end.
    // We check for semicolons now and also if the semicolon is at the last but one position
    // We only need the semicolons at the end. Any other position means there
    // An error
    if (currentChar === ';' && currentChar === input[input.length - 2]) {
      // If the current character is a semicolon, we create a `token`
      let token = {
        type: 'semi',
        value: ';',
      };

      // then add it to the `tokens` array
      tokens.push(token);
      current++; // Go to the next character
      continue; // Skip everything and go to the next iteration
    }
  }
};

We now have check in place for semicolons and whitespaces but there are four more to go. Our compiler supports strings, numbers, booleans and null. We will now check for the following types. Remmember we are dealing with single characters so we willl need to put some checks in place else we will be pushing single characters as tokens
Still in the while loop



const tokenizer = (input) => {
  // ...
  while (current < input.length - 1) {
    const currentChar = input[current];
    //...

    // Now we will check for Numbers
    const NUMBER = /^[0-9]+$/; // Regex to check if character is a number
    // If we use the same method above for the semicolons,
    // We create a number `token` and add it to `tokens`, we end up with a token for
    // each single number character instead of the number as a whole.
    // For example, if we have a number value of `123`, then our tokens will be
    //
    // [
    //   { type: 'number', value: 1 },
    //   { type: 'number', value: 2 },
    //   { type: 'number', value: 3 },
    // ]
    //
    // Instead of
    //
    // [
    //   { type: 'number', value: 123 },
    // ]
    // which we don't want.
    // So we create a `number` variable and check if the next character is a number.
    // If the next character is a number, we add it to the `number` variable
    // Then add the `number` variable's value as the value in our `token`
    // The add the `token` to our `tokens` array
    if (NUMBER.test(currentChar)) {
      let number = '';

      // Check if the next character is a number
      while (NUMBER.test(input[current++])) {
        number += input[current - 1]; // Add the character to `number`
      }

      // Create a token with type number
      let token = {
        type: 'number',
        value: parseInt(number), // `number` is a string to we convert it to an integer
      };

      tokens.push(token); // Add the `token` to `tokens` array
      continue;
    }
  }
};

Now that we have numbers underway, the next on our list is strings, booleans and null values. If we used the same approach for the semicolon and add a token for every character, we could face the same problem where we won't the full token value so we will a different approach similiar to the number check.

Strings will be easy to tackle with first. Each string starts and ends with a " so based on the same approach for numbers, we check if a character is a ", If it is, we will add every value that comes after the quote(") until we meet another quote indicating the end of the string.



const tokenizer = (input) => {
  // ...
  while (current < input.length - 1) {
    const currentChar = input[current];
    //...

    // Check if character is a string
    if (currentChar === '"') {
      // If the current character is a quote, that means we have a string
      // Initialize an empty strings variable
      let strings = '';

      // Check if the next character is not a quote
      while (input[++current] !== '"') {
        // If it is not a quote, it means we still have a string
        strings += input[current]; // Add it to the `strings` variable
      }

      // Create a token with property type string and a value with the `strings` value
      let token = {
        type: 'string',
        value: strings,
      };

      tokens.push(token); // Add the `token` to the `tokens` array
      current++;
      continue;
    }
  }
};

The last check and we are done with our tokenizer. The check for letters. booleans, null and the keywords, set and define all have characters that will test true for letters so we will use the same approach as the numbers. If the current character is a letter, we will add it to a new variable and check of the next character is also a letter until we meet a non-letter character then we will return.



const tokenizer = (input) => {
  // ...
  while (current < input.length - 1) {
    const currentChar = input[current];
    //...

    // Check if the character is a letter
    const LETTER = /[a-zA-Z]/; // Regex to check if it is a letter
    if (LETTER.test(currentChar)) {
      // If the current character is a letter we add it to a `letters` variable
      let letters = currentChar;

      // Check if the next character is also a letter
      while (LETTER.test(input[++current])) {
        // We add it to the `letters` variable if it is
        letters += input[current];
      }

      // ...
      // See below..
    }
  }
};

At this point, we have our letters value but we cannot add it to the tokens array yet. Each token must have a type and a value but for letters, they could be different. Our letters could be true || false which will have a type of boolean or the letters could be set || define which could have a type of keyword, so we need another check to check the letters and assign thier token the respective type.



const tokenizer = (input) => {
  // ...
  while (current < input.length - 1) {
    const currentChar = input[current];
    //...

    const LETTER = /[a-zA-Z]/;
    if (LETTER.test(currentChar)) {
      // ...
      //
      // Still in the letter check
      // At this point, we have a value for our `letters` so we check for thier types.
      //
      // We first check if the `letters` is `set` or `define` and we assign the `token` a type `keyword`
      if (letters === 'set' || letters === 'define') {
        // Add a `token` to the `tokens` array
        tokens.push({
          type: 'keyword',
          value: letters,
        });

        continue; // We are done. Start the loop all over again
      }

      // If the letter is `null`, assign the `token` a type `null`
      if (letters === 'null') {
        tokens.push({
          type: 'null',
          value: letters,
        });
        continue;
      }

      // If the letter is `null`, assign the `token` a type `ident`
      if (letters === 'as') {
        tokens.push({
          type: 'ident',
          value: letters,
        });
        continue;
      }

      // If the letter is `true` or `false`, assign the `token` a type `boolean`
      if (letters === 'true' || letters === 'false') {
        tokens.push({
          type: 'boolean',
          value: letters,
        });
        continue;
      }

      // If we don't know the `letters`, it is the variable name.
      // Assign the `token` a type `name`
      tokens.push({
        type: 'name',
        value: letters,
      });

      continue; // Start the loop again
    }
  }
};

At this point, we are done checking but if the character isn't recognized the our while loop will be stuck so we need some error checking in place and finally return the tokens from the tokenizer.



const tokenizer = (input) => {
  // ...
  while (current < input.length - 1) {
    // ....
    //
    // If the character reaches this point, then its not valid so we throw a TypeError
    // with the character and location else we will be stuck in an infinite loop
    throw new TypeError('Unknown Character: ' + currentChar + ' ' + current);
  }

  // Return the `tokens` from the `tokenizer`
  return tokens;
};

We are done with the tokenizer. All the code at this point can be found here.



// You can test your tokenizer with
const tokens = tokenizer('set isEmployed as false');

// [
//   { type: 'keyword', value: 'set' },
//   { type: 'name', value: 'isEmployed' },
//   { type: 'ident', value: 'as' },
//   { type: 'boolean', value: 'false' },
//   { type: 'semi', value: ';' },
// ]

`parser`

Now that the heavy lifting has been done for us in the tokenizer, we move to the parser. The parser takes the tokens produced by the tokenizer and modifies them into an AST. Out parser will have a walk function. The walk function will take the current token and return the AST Node for that specific token.

If we had a token



{
  type: "number",
  value: 1024
}

The AST Node will be:



{
  type: "NumberLiteral",
  value: 1024
}

The code for our parser



const parser = (tokens) => {
  // We will declare a `current` variable to get the current `token`
  let current = 0;

  // Then our parser will have a walk function
  const walk = () => {};
};

The walk function will be a recursive function. We first get the current token, check the type of the token and return an AST Node based on the type.



const parser = (tokens) => {
  // ...
  const walk = () => {
    // Get the current `token` with the `current` variable
    let token = tokens[current];

    // From here, we will check for the `type` of each token and return a node.
    if (token.type === 'number') {
      // Our token is a `number`,
      // We increase the current counter
      current++;
      // We create a type `NumberLiteral` and the value as the token's `value`
      let astNode = {
        type: 'NumberLiteral',
        value: token.value,
      };

      // We return the node
      return astNode;
    }

    // We will take the same steps for the `boolean`, `null` and `string` token types
    // Check the value, Increment the counter, return a new node
    // Check for a string token
    if (token.type === 'string') {
      current++;
      let astNode = {
        type: 'StringLiteral',
        value: token.value,
      };
      return astNode;
    }

    // Check for boolean token
    if (token.type === 'boolean') {
      current++;
      let astNode = {
        type: 'BooleanLiteral',
        value: token.value,
      };
      return astNode;
    }

    // Check for null token
    if (token.type === 'null') {
      current++;
      let astNode = {
        type: 'NullLiteral',
        value: token.value,
      };
      return astNode;
    }
  };
};

We have checks for null, boolean,string and number token types. Let's focus on the remaining ones, keyword, name, semi and ident. ident will always have a value of as so we won't need a node for it. We will just skip it. semi also indicates the end of the code so we will ignore it too. We will focus on the keyword and name



const parser = () => {
  // ...
  const walk = () => {
    let token = tokens[current];
    // ...

    // We now check for the `keyword` token type
    // The presence of a `keyword` token type indicates that we are declaring a variable,
    // So the AST node won't be the same as that of `number` or `string`.
    // The node will have a `type` property of `VariableDeclaration`, `kind` property of the keyword
    // and a `declarations` property which is an array for all the declarations
    if (token.type === 'keyword') {
      // New AST Node for  `keyword`
      let astNode = {
        type: 'VariableDeclaration',
        kind: token.value, // The keyword used. `set` or `define`
        declarations: [], // all the variable declarations.
      };

      // At this stage, we don't need the `keyword` token again. It's value has been used at the astNode.
      // So we increase the current and get the next token
      // Obviously the next one will be the `name` token and we will call the `walk` function again
      // which will have a token type of `name` now and the returned results will be pushed into
      // the declarations array

      token = tokens[++current]; // Increase the `current` token counter and get the next token.

      // Check if there is a token and the next token is not a semicolon
      while (token && token.type !== 'semi') {
        // if the token is not a semicolon, we add the result of `walk` again into
        // the AST Node `declarations` array
        astNode.declarations.push(walk());

        // We then go to the next token
        token = tokens[current];
      }

      // From here, we don't need the semicolon again, so we remove it from the
      // `tokens` array
      tokens = tokens.filter((token) => token.type !== 'semi');

      // Then we return the AST Node
      return astNode;
    }

    // The last is the `name` token type
    // The `name` token type will have a node of type `VariableDeclarator` and an
    // `id` which will also be a another node with type `Identifier` and an
    // `init` with the type of the value.
    // If the token type is a name, we will increse `current` by two to skip the next value after
    // `name` which is `ident` and we don't need it.
    if (token.type === 'name') {
      current += 2; // Increase by 2 to skip `ident`

      // Declare a new AST Node and recursively call the `walk` function again
      // Which the result will be placed in the `init` property
      let astNode = {
        type: 'VariableDeclarator',
        id: {
          type: 'Identifier',
          name: token.value,
        },
        init: walk(), // Call `walk` to return another AST Node and the result is assigned to `init`
      };

      // Return the AST Node
      return astNode;
    }

    // We throw an error again for an unknown type
    throw new Error(token.type);
  };
};

We are done with the walk function, but the function is just declared in the parser, it's not being used by the parser so we have to use it.



const parser = () => {
  // ..
  const walk = () => {
    // ...
  };

  // We will now declare our AST. We have been building the nodes,
  // so we have to join the AST as one.
  // The type of the AST will be `Program` which will indicate the start of the code
  // And a `body` property which will be an array that will contain all the other AST we have generated.
  let ast = {
    type: 'Program',
    body: [],
  };

  // We then check if there are token's in the `tokens` array and add thier Node to the main AST
  while (current < tokens.length) {
    ast.body.push(walk());
  }

  // Final return of the parse function.
  return ast;
};

There you have it, the parser in the flesh. You can use the test case for the tokenizer above and pass the tokens to the parser and log the results for yourself. You can get all the code up to this point here

`traverser`

It's time for our traverser. The traverser will take the ast from the parser and a visitor. The visitor will have objects with names of the various AST Node types and each object will have an enter method. While traversing the AST, when we get to a node with a matching visitor object, we call the enter method on that object.



// Example Visitor
let visitor = {
  VariableDeclaration: {
    enter() {},
  },
};



// Declaring the `traverser`
const traverser = (ast, visitor) => {};

The traverser will have two main methods, traverseArray and traverseNode. traverseArray will call traverseNode on each node in a node array. traverseNode will take an node and it's parent node and call the visitor method on the node if there is one.



const traverser = (ast, visitor) => {
  // `traverseArray` function will allow us to iterate over an array of nodes and
  // call the `traverseNode` function
  const traverseArray = (array, parent) => {
    array.forEach((child) => {
      traverseNode(child, parent);
    });
  };
};

Now that we have the traverseArray, we can proceed to the main traverseNode function.



const traverser = (ast, visitor) => {
  // ...

  // In the `traverseNode`, will get the  node `type` object and call the `enter`
  // method if the object is present
  // Then recursively call the `traverseNode` again on every child node
  const traverseNode = (node, parser) => {
    // Get the node object on the visitor passed to the `traverser`
    let objects = visitor[node.type];

    // Check if the node type object is present and call the enter method
    // with the node and the parent
    if (objects && objects.enter) {
      methods.enter(node, parent);
    }

    // At this point, we will call the `traverseNode` and `traverseArray` methods recursively
    // based on each of the given node types
    switch (node.type) {
      // We'll start with our top level `Program` and call the `traverseArray`
      // on the `body` property to call each node in the array with  `traverseNode`
      case 'Program':
        traverseArray(node.body, node);
        break;

      //We do the same to `VariableDeclaration` and traverse the `declarations`
      case 'VariableDeclaration':
        traverseArray(node.declarations, node);
        break;

      // Next is the `VariableDecalarator`. We traverse the `init`
      case 'VariableDeclarator':
        traverseNode(node.init, node);
        break;

      // The remaining types don't have any child nodes so we just break
      case 'NumberLiteral':
      case 'StringLiteral':
      case 'NullLiteral':
      case 'BooleanLiteral':
        break;

      // We throw an error if we don't know the `type`
      default:
        throw new TypeError(node.type);
    }
  };

  // We now start the `traverser` with a call to the `traverseNode` with the
  // `ast` and null, since the ast does not have a parent node.
  traverseNode(ast, null);
};

That's it for our traverser. You can get all the code up to this point here.

`transformer`

Next is our transformer which will take the AST and modify the AST and return it. Our transformer will have a visitor object and it will traverse the AST passed as an argument with the visitor and return the modified AST

Since we are only dealing with Variable Declaration's, our visitor will have only one object,VariableDeclaration and will change the value of the kind to the respective equivalent.



const transformer = (ast) => {
  // We will start by creating the `visitor` object
  const visitor = {
    // Then we will create the `VariableDeclaration` object in the `visitor`
    VariableDeclaration: {
      // Here, we will have the `enter` method which will take the `node` and the `parent`
      // Although we won't use the parent (Simplicity)
      enter(node, parent) {
        // Check if the VariableDeclaration has a `kind` property
        // If it has, we change based on the previous one
        // `set` -> `let`
        // `define` -> `const`
        if (node.kind) {
          if (node.kind === 'set') {
            node.kind = 'let'; // Set it to `let`
          } else {
            node.kind = 'const';
          }
        }
      },
    },
  };
};

That's it for our visitor. Although we could have done more, like things not related to variable declaration. We could have added a NumberLiteral object to multiply every number by 2 or another method to make every string in a String uppercase. visitor is where the mutations and the modifications take place.



let visitor = {
  // Multiply every number by 2
  NumberLiteral: {
    enter(node) {
      if (typeof node.value === 'number') {
        node.value *= 2;
      }
    },
  },

  // Uppercase every string value
  StringLiteral: {
    enter(node) {
      if (typeof node.value === 'string') {
        node.value = node.value.toUpperCase();
      }
    },
  },
};

We are done with the visitor but not the whole transformer. We need to use the visitor we created with the traverser to modify our AST and return the modified AST



const transformer = (ast) => {
  // ...visitor

  // We will call the `traverser` with the `ast` and the `visitor`
  traverser(ast, visitor);

  // Finally we return the AST, which has been modified now.
  return ast;
};

We are done with the transformer, you can get all the code up to this point here.

You can test your transformer with an ast generated by the parser and compare the difference.

`generator`

We are done with two phases of our compiler, Parsing and Transformation. It's left with the last phase, Code Generation. We will only have one function for this phase, generator.

The generator will be recursively call itself at each node till we get a giant string of all the values. At each node, we will either return a call to another child node or return a value if the node has no children.



const generator = (ast) => {
  // Let's break things down by the `type` of the `node`.
  // Starting with the smaller nodes to the larger ones
  switch (node.type) {
    // If our node `type` is either `NumberLiteral`,`BooleanLiteral` or `NullLiteral`
    // we just return the value at that `node`.
    case 'NumberLiteral':
    case 'BooleanLiteral':
    case 'NullLiteral':
      return node.value; // 18

    // For a `StringLiteral`, we need to return the value with quotes
    case 'StringLiteral':
      return `"${node.value}"`;

    // For an `Identifier`, we return the `node`'s name
    case 'Identifier':
      return node.name; // age

    // A `VariableDeclarator` has two more `node`'s so we will call the `generator`
    // recursively on the `id` and `init` which in turn will return a value.
    // `id` will be called with the `generator` with type `Identifier` which will return a name
    // `init` will be called with the `generator` with any of the Literals and will also return a value.
    // We then return the results of these values from the VariableDeclarator
    case 'VariableDeclarator':
      return (
        generator(node.id) + // age
        ' = ' +
        generator(node.init) + // 18
        ';'
      ); // age = 18;

    // For `VariableDeclaration`,
    // We will map the `generator` on each `node` in the `declarations`
    // The `declarations` will have the `VariableDeclarator` which in turn has `id` and `init`
    // which when the generator is called on will return a value
    // In total, we will return the `kind` of node with
    // a joined string of what we had from mapping the declarations
    case 'VariableDeclaration':
      return (
        node.kind + // let
        ' ' +
        node.declarations.map(generator).join(' ') // age = 18
      ); // let age = 18;

    // If we have a `Program` node. We will map through each node in the `body`
    // and run them through the `generator` and join them with a newline.
    case 'Program':
      return node.body.map(generator).join('\n'); // let age = 18;

    //  We'll throw an error if we don't know the node
    default:
      throw new TypeError(node.type);
  }
};

Finally, we are done with our generator and all the three stages. You can get all the code up till this point here.

`compiler`

Congratulations if you really made it this far. There's only one thing left to do. We need to link all the functions we created and combine it into one single function. We'll name it as the compiler



const compiler = (code) => {
  // Take the code and convert it into token
  const token = tokenizer(code);

  // Take the tokens and parse the into an AST
  const ast = parser(tokens);

  // Modify the ast into a new one
  const mast = transformer(ast);

  // Generate the code from the modified AST
  const output = generator(mast);

  // Return the new compiled code
  return output;
};

We can now test our baby compiler



let code = 'set age as 18;';

let _code = 'define name as "Duncan"';

const js = compiler(code);

const _js = compiler(_code);

console.log(js); // let age = 18;

console.log(_js); // const name = "Duncan";

Conclusion

Congratulations once again on making it to the end 🥳🥳🥳. In view of the fact that we wrote all this, it's kind of useless. No one will use it in the real world and also, if we used it in a real javascript code, we will get all sort of errors, unless of course we had a way to use it in the real world. I am planning on building a babel plugin so please check back in a few weeks. I learnt a lot. I hope you did. Thank you for reading. If you face any errors or have any questions, you can find me on twitter.

Hacktoberfest and Me.

Ephraim Duncan — Sun, 25 Oct 2020 21:56:24 +0000

What I Learned From Hacktoberfest

Hacktoberfest has really been good for me. This is not the first time I've contributed to open-source but this is the time I can say I truly understand open source and contributed much. My main target was learning to write test and I can say I accomplished that. I spent time with the Jest docs and I applied them to TheAlgorithms/Javascript repo, A repository for algorithms in JavaScript.

Add tests to Math #423

dephraiim posted on Oct 05, 2020

Welcome to JavaScript community

Describe your change:

[x] Add tests
[ ] Add an algorithm?
[x] Fix a bug or typo in an existing algorithm?
[ ] Documentation change?

Checklist:

[x] I have read CONTRIBUTING.md.
[x] This pull request is all my own work -- I have not plagiarized.
[x] I know that pull requests will not be merged if they fail the automated tests.
[ ] This PR only changes one algorithm file. To ease review, please open separate PRs for separate algorithms.
[x] All new JavaScript files are placed inside an existing directory.
[x] All filenames should use the UpperCamelCase (PascalCase) style. There should be no spaces in filenames. Example:UserProfile.js is allowed but userprofile.js,Userprofile.js,user-Profile.js,userProfile.js are not
[ ] All new algorithms have a URL in its comments that points to Wikipedia or other similar explanation.
[ ] If this pull request resolves one or more open issues then the commit message contains Fixes: #{$ISSUE_NO}.

View on GitHub

Add Algorithms to Math with tests #429

dephraiim posted on Oct 06, 2020

Welcome to JavaScript community

Describe your change:

[x] Add an algorithm?
[ ] Fix a bug or typo in an existing algorithm?
[ ] Documentation change?

Checklist:

[x] I have read CONTRIBUTING.md.
[x] This pull request is all my own work -- I have not plagiarized.
[x] I know that pull requests will not be merged if they fail the automated tests.
[ ] This PR only changes one algorithm file. To ease review, please open separate PRs for separate algorithms.
[x] All new JavaScript files are placed inside an existing directory.
[x] All filenames should use the UpperCamelCase (PascalCase) style. There should be no spaces in filenames. Example:UserProfile.js is allowed but userprofile.js,Userprofile.js,user-Profile.js,userProfile.js are not
[x] All new algorithms have a URL in its comments that points to Wikipedia or other similar explanation.
[ ] If this pull request resolves one or more open issues then the commit message contains Fixes: #{$ISSUE_NO}.

View on GitHub

Also, I made some typo corrections to the New Nodejs Learning guide, nodejs.dev. I was reading it and I contributed to it. The project is stable to me, but there are more features to be implemented and I want to help with that.

Minor Typo Fixes #945

dephraiim posted on Sep 30, 2020

Description

Small typo fixes in the documentation.

View on GitHub

And finally added some utility functions to 30secondsofcode.org. Some where removed but not all and the pull was merged.

Add isNode, randomIpAddress and isRegularExpression #1526

dephraiim posted on Oct 11, 2020

Function to check if the environment is node Function to generate a random Ip Address. Function to check for Regular Expressions

View on GitHub

Thank you Open Source, Thank you Hacktoberfest. I want to contribute to more open source.

40 Reactions On This Post

Ephraim Duncan — Thu, 22 Oct 2020 23:52:03 +0000

Update: I have disabled the Github Workflow so new reactions won't count.

I've been wanting to do this and guess what, I did it. Motivated by various twitter posts, I decided to programatically change the title of this post based on the number of reactions.

In this post, while the title is still changing, I will try to explain in every detail how I came about it.

DEV has a very beta but stable api we can leverage for that. To use the DEV API, you need an API Key. Go to your account settings and scroll down to DEV API Keys and generate a new key to use for authentication with the DEV API.

With our keys in place, we can now take advantage of the DEV API. I'm using JavaScript but you can use any langauge of your choice.

We start with a new empty directory and a new file index.js. Run the command npm init -y in the directory to create a package.json file for the project.

Since we are dealing with an API, we will be making request to servers and we will need an http client. I prefer axios for JavaScript but you can use any client of your choice.

We have to install axios in our current project using npm

npm install axios

With axios installed, we must use it in our index.js.

const axios = require('axios');

Axios supports many http methods but the major ones we will be using are GET method, to get the current reactions count and article id, and the PUT method, to update the current post title with the current reaction count.

We will create 2 main asynchronous functions. getData and updateTitle.

getData will makes a get request to the DEV API and get the current reaction count and id of the article and return it as an object.

// getData
async function getData() {
  // Article Url
  const url = 'https://dev.to/dephraiim/title-loading-fdg-temp-slug-9870259';

  // Get article data
  const article = await axios.get(url);

  // Set the reaction and the id to a data object
  const data = {
    reactionCount: article.data.public_reactions_count,
    id: article.data.id,
  };

  // Return the data object
  return data;
}

updatePost will get the data from getData and make a put request to modify the title with the current post reactions.

// updateTitle
async function updatePost() {
  // Destructure the properties from getData
  const { reactionCount, id } = await getData();

  // New Title for the article
  const body = {
    article: { title: `${reactionCount} Reactions On This Post` },
  };

  // API Key
  const apiKey = {
    'api-key': process.env.dev_api, // Replace with the API Key when running locally.
  };

  // Article url
  const url = `https://dev.to/api/articles/${id}`;

  // PUT Request to update the title
  const update = await axios.put(url, body, {
    headers: apiKey,
  });

  // Log the response to the console.
  console.log(update);
}

updatePost();

That's it. But we need to run it in the terminal using Node.js.

node index.js

We can't run node index.js everytime we want to run the program. That won't make it automatic. Fortunately, we have Github Actions Workflows to automate it for us. This is the workflow I am using with the secrets to store my keys.

name: Update Title

on:
  workflow_dispatch:
  schedule:
    - cron: '*/1 * * * *' # Runs every minute
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'
      - name: Install with npm
        run: npm install
      - name: Run bot
        run: node index.js
        env:
          dev_api: ${{ secrets.DEV_API_KEY }}
          # Use the Github Secrets to Store your DEV API Key

And that's it, we have our mini-self-updating-bot for our DEV articles. Let me see what else you can do with the api below.

For more info on the DEV API, visit the DEV API Docs

50 Essential Tips for Every Developer.

Ephraim Duncan — Sun, 18 Oct 2020 21:23:28 +0000

Whether you are starting to program or you are twenty years into your career, there is something here for you. Enjoy!

1. You are never ready. That's the fun part.

2. Focus on one thing at a time.

3. Just start! You'll figure everything out automatically.

4. Build. Build. Build again.

5. Sleep is important.

6. Asking for help is not a sign of weakness.

7. Watching every tutorial won't make you a developer.

8. Writing your own code will make you a developer.

9. You only need the fundamentals.

10. Always plan your work.

11. Have other hobbies. If programming is your hobby, explore new fields.

12. Expect more from yourself than others will.

13. Take your time and write tests.

14. Read blog posts. Listen to podcasts. Subscribe to newsletters.

15. Learn to read the documentation.

16. Make a lot of mistakes.

17. Quit looking for perfection. If it works, it works.

18. If it works, touch it.

19. Take a break.

20. Connect with more people.

21. Pair program if you can.

23. Teach others what you know.

24. Look for mentorship. If you can mentor someone, do it.

25. Read more books. Fiction and Non-fiction.

26. If you honestly think you are bad, pretend you are a good programmer and never stop pretending.

27. Do not quit.

28. If the tools you use feel like magic, start digging in and see under the hood.

29. If you don't understand, copying is not the best idea.

30. Watch conference talks on YouTube.

31. Attend meetups and conferences too if you can.

32. Always be a team player unless you work as an independent person.

33. Readability is way more important than shortness.

34. Learn more what you like than what you think you should.

35. Find a balance between theory and practice.

36. Invest in your development setup.

37. Learn. Keyboard. Shortcuts.

38. Be consistent.

39. Try a new language.

40. Define your payment terms explicitly.

41. Enjoy your little winnings.

42. Don't be scared to show off your work.

43. Learn to comment your code.

44. Listen to advice but make your own decisions.

45. Support other developers. Sponsorships and the likes.

46. Learn from everything and everyone and never miss the opportunity to learn.

47. You should not be afraid to have simple solutions to simple problems.

48. Take care of your mental and physical health.

49. Try explaining concepts in writing and publishing.

50. At the end of it all, there is family.

🔱 Git Commands You Didn't Know

Ephraim Duncan — Wed, 23 Sep 2020 07:13:05 +0000

TL;DR

One of my favorite things about Git is being as simple as it is and also being customisable and one of those features is aliases. Git supports aliases which means you can give your commands any name you want. I prefer to set aliases for really long commands to avoid searching for them everytime I need it.

The alias config in Git works like this.

git config --global alias.[new_alias] "[previous_git_command]"

# Example
git config --global alias.save commit

From the example above, I won't need git commit again. git save will work good enough.

Add quotes around commands with multiple options.

`git recommit`

git config --global alias.recommit 'commit --amend -m'

git commit --amend allows you to change the last commit message. recommit is simpler and much easier to remmember.

# Change the last commit message with recommit
git recommit "New commit message"

# [master 64175390] New commit message
#  Date: Tue Sep 22 15:09:11 2020 +0000
#  1 file changed, 2 insertions(+)
#  create mode 100644 vue.js

`git commend`

git config --global alias.commend 'commit --amend --no-edit'

Commit amend with --no-edit flag allows you to commit the new changes in repo with the last commit made, so you don't have to repeat the commit messages again.

`git search`

git config --global alias.search 'grep'

# Example
git search [search_term]

git grep allows you to search in the repository for a keyword and it returns the various matches. It is cool, but I don't know what grep means, please tell me if you do. I prefer search instead, easy to remmember and easy to use.

`git here`

git config --global alias.here '!git init && git add . && git commit -m "init 🦄"'

Usually when I initialize a new repo, I'll stage all the files and I'll commit with an initial commit message. git here does it all in one step. Just run it in the folder you want to make a new repo and you are good to go.

`git who`

git config --global alias.who 'blame'

# Example
git who index.ts
# 641753902 (Ephraim Atta-Duncan 2020-09-22 15:09:11 +0000 1)
# 641753902 (Ephraim Atta-Duncan 2020-09-22 15:09:11 +0000 2) console.log("who?")

git blame is used to examine the contents of a file line by line and see when each line was last modified and who the author of the modifications was. If there was a bug, in a line, you find who who did it and blame them.

`git zip`

git config --global alias.zip 'archive --format=tar.gz -o ../repo.tar.gz'

# Example
git zip [branch_name]

The archive commands allows you to create tarballs and zips of your whole repo or some. git zip will make it easy to remmember. Just add the branch name.

`git newbie`

git config --global alias.newbie 'checkout --orphan'

# Example
git newbie [new_branch_name]

git checkout with the --orphan flag allows you to create a branch without any history from the parent branch. No commit, fresh out of the box branch.

`git clonely`

git config --global alias.clonely 'clone --single-branch --branch'

# Example
git clonely [branch_name] [remote_url]

git clonely v3 https://github.com/vuejs/vue-apollo
# Cloning into 'vue-apollo'...
# remote: Enumerating objects: 2841, done.
# remote: Total 2841 (delta 0), reused 0 (delta 0), pack-reused 2841
# Receiving objects: 100% (2841/2841), 1.92 MiB | 330.00 KiB/s, done.
# Resolving deltas: 100% (1743/1743), done.

git clone with --single-branch --branch flags allows you to clone a specific branch from a repo and I can say, I've googled it more than 10 times. Aliasing it is better.

`git plg`

git config --global alias.plg "log --graph --pretty=format:'%C(yellow)%h%Creset -%Cred%d%Creset %s %Cgreen| %cr %C(bold blue)| %an%Creset' --abbrev-commit --date=relative"

# Example
git plg # plg - Pretty Log

There is nothing wrong with git log except that it is a little ugly, no color differences and if you want to customize it, you'll have to do some amount of googling. Fortunately, we have aliasing. Alias the command and you'll get a very pretty log of everything.

`git fresh`

git config --global alias.fresh "filter-branch --prune-empty --subdirectory-filter"

# Example
git fresh [subfolder] [branch_name]
git fresh src main # Don't do this unless you know what you are doing

The series of commands that fresh replace is used to create a new repository out of the contents of a subfolder. filter-branch with it many flags take a the contents of a specified subfolder and replaces the content in the while repo with the content of the subfolder.

TL;DR

Add this to your .gitconfig file.

[alias]
    recommit = commit --amend -m
    commend = commit --amend --no-edit
    here = !git init && git add . && git commit -m \"Initialized a new repository\"
    search = grep
    who = blame
    zip = archive --format=tar.gz -o ../repo.tar.gz
    lonely = clone --single-branch --branch
    plg = log --graph --pretty=format:'%C(yellow)%h%Creset -%Cred%d%Creset %s %Cgreen| %cr %C(bold blue)| %an%Creset' --abbrev-commit --date=relative
    fresh = filter-branch --prune-empty --subdirectory-filter

Forem: Ephraim Duncan

Deploying Documenso with Vercel, Supabase and Resend

Prerequisites

Step-by-Step guide to deploying Documenso with Vercel, Supabase, and Resend

Step 1: Fork the Documenso repository

Step 2: Clone the forked repository and install dependencies

Step 3: Create a new project on Supabase

Step 4: Copy the Supabase Postgres database connection URL

Step 5: Create a .env file

Step 6: Run the migration on the Supabase Postgres Database

Step 7: Get your SMTP Keys on Resend

Step 8: Create a new project on Vercel

Step 9: Add Environment Variables to your Vercel project

Wrapping up

Recursion in JavaScript and React Components

Introduction

Factorial of a Integer

Fibonacci number at a given Index

Sum of all elements in an Array

Recursion in React Components

Conclusion

Rewind - MongoDB Atlas Hackathon 2022 on DEV

What I built

Category Submission:

App Link

Screenshots

Landing Page

Random Bookmark Daily

Bookmarks

Shared Bookmarks

Search Shared Bookmarks

Description

Link to Source Code

Permissive License

Background

How I built it

Use Preact in Next.js 13

Introduction

Why Replace React

Get Started

Setup app Directory in Next.js 13

The Swap

next-plugin-preact

Install the plugin

Usage

Show your VSCode Setup

Writing a Good Technical Article

Introduction

1. Choose a Topic

2. Create a catchy title.

3. Do your Research

4. Outline Your Article

5. Be clear and concise

6. Don't write a lot of code without explaining

7. Check your grammar

8. Use Visuals

9. Edit your work. And then edit again.

10. If you can, have someone review your draft

Conclusion

Lazy Loading Images In Next.js

Introduction

Installation and Setup

Lazy Loading

Creating Your Own JavaScript Syntax.

The Compiler

Parsing

Transformation

Code Generation

tokenizer

parser

traverser

transformer

generator

compiler

Conclusion

Hacktoberfest and Me.

What I Learned From Hacktoberfest

Add tests to Math #423

Welcome to JavaScript community

Describe your change:

Step 5: Create a `.env` file

Setup `app` Directory in Next.js 13

`next-plugin-preact`

`tokenizer`

`parser`

`traverser`

`transformer`

`generator`

`compiler`

`git recommit`

`git commend`

`git search`

`git here`

`git who`

`git zip`

`git newbie`

`git clonely`

`git plg`