DEV Community: John ✨️

Build A CRUD App with ExpressJS And Supabase

John ✨️ — Mon, 08 May 2023 19:58:25 +0000

Even though I'm a Frontend Developer, I've always wanted to know how the backend (BE) works and I've over time tried a number of server-side technologies like Express with MongoDB, ASP.NET (C#) and Laravel (PHP). But my most recent contact was when I got a take-home test from an interview: I was tasked to build a simple blog API with a relational database like Postgres. So I decided to use Supabase since it runs on Postgres.

In this tutorial, you'll learn how to create a CRUD API with Express and Supabase. As described in the official documentation, Express is one of the most popular web frameworks built on top of Node.js for web and mobile applications. It simplifies creating a server, routing and middleware already available in Nodejs.

CRUD is a common way of referring to a set of operations that is executed by the server. The acronym stands for create, read, update and delete. The following table below summarizes recommended return values of their corresponding HTTP methods with resource URLs:

What Is Supabase and Why Should You Choose It?

Supabase is an open-source backend service that provides a suite of tools to help developers build and scale applications quickly which includes:

Database: every project uses Postgres under the hood, which is a relational database.
Authentication: you can add login and sign-up to your app.
Storage: you can store, organise and serve large files.
Edge functions: these help execute the closest code to your users for a fast experience.

We'll be using Supabase with the Express app.

Prerequisites

To get started with this tutorial, you'll need to have the following set up/installed:

Express and Supabase will be installed as dependencies as after setting up the project. So Let's get started.

Project Setup

First, create a new folder and initialize a new Node.js project using the command below.

mkdir supabase-crud && cd supabase-crud 
npm init -y

The command creates a folder called supabase-crud and initializes a Node.js projects with a package.json file which should look like this:

{
  "name": "supabase-crud",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

You don't have to, but you could update the json file like the description and author. Something like:

{
  "description": "Express app with Supabase",
  "author": "John Ademoye",
}

Create a new file in the folder and name it server.js. This will serve as the entry point to your Node.js application.

Install Express and Other Dependencies

Now install the express library and spin up a server with the following code:

import express from "express";

const app = express();

app.get("/", (_, response) =>
  response.json({ info: "Express app with Supabase" })
);

app.listen(3000, () =>
  console.log(
    new Date().toLocaleTimeString() + `: Server is running on port ${3000}...`
  )
);

The above code returns { info: "Express app with Supabase" } under the "/" route and logs Server is running on port 3000... on the terminal with a timestamp.

Now let's see if that's the case. Run the app with:

node server.js

If everything goes well, you should get something like this with REST client:

You could also go to the URL in your browser and you should get the same response:

But I prefer using REST Client because I won't have to switch windows.

Every time I change server.js, I'll have to to rerun the file. So to avoid having to do that, install nodemon to watch the file for changes. Although Node v18.11.0 has watch mode built in, it is still experimental.

I'd also like to save the port number as an environment variable in a dotenv file also well as other constants like the database name and key. DotEnv is a package that automatically loads environment variables from the .env file into the process.env object.

So install DotEnv it using the command: npm i dotenv. Then in your app, require and configure the package like this:

import express from "express";
import env from "dotenv";

env.config();

const app = express();

app.get("/", (_, response) =>
  response.json({ info: "Express app with Supabase" })
);

app.listen(process.env.PORT, () =>
  console.log(
    new Date().toLocaleTimeString() +
      `: Server is running on port ${process.env.PORT}...`
  )
);

To use nodemon, open the package.json file and modify the scripts with following configuration:

"scripts": {
    "dev": "nodemon server.js"
  },

And this is how the project folder structure looks:

📁 SUPABASE-CRUD
∟📁 node_modules
∟📄 .env
∟📄 package-lock.json
∟📄 package.json
∟📄 requests.http
∟📄 server.js

Setting Up Supabase

After creating a Supabase account, you prompted to a dashboard upon signing in, which contains all projects. If it's your first time using Supabase, you shouldn't see any projects there. So create a new project:

Projects are groupped under organizations. Create an org if you don't have one yet; I already have an org.

Then create a new project and name it supabase-crud. The password is automatically generated, so just submit the form after creating the project.

Now supabase-crud has its page. Scroll down to the Project API section where the URL and API key can be found. Copy the URL and Key and save them as DATABASE_URL and DATABASE_KEY respectively in the .env file.

Now go back to the top of the project page. Go to the Table though the Table editor button and create a new table:

Name the table posts and a description like A blog database is fine.

Insert a row with some dummy data for title and body manually and then save.

Setting Up Supabase In The Application

First of all, Install the library:

npm install @supabase/supabase-js

Then import createCleint to establish the connection with the database. createClient takes the database URL and Key as arguments:

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(process.env.DATABASE_URL,process.env.DATABASE_KEY);

And the server file looks like this so far:

import express from "express";
import env from "dotenv";

import { createClient } from "@supabase/supabase-js";

env.config();

const supabase = createClient(process.env.DATABASE_URL,process.env.DATABASE_KEY);

// Services 

app.listen(process.env.PORT, () =>
  console.log(
    new Date().toLocaleTimeString() +
      `: Server is running on port ${process.env.PORT}...`
  )
);

Creating the Routes

We'll be defining the routes for these handling CRUD operations:

Get all articles
Get an article
Post an article
Update an article
Delete an article

We'll be using the Supabase documentation as a guide here:

To get all articles, specify the table from they're coming from an use the select method on it without any arguments.

// Get all articles

app.get("/articles", async (_, response) => {
  try {
    const { data, error } = await supabase.from("posts").select();
    console.log(data);
    return response.send(data);
  } catch (error) {
    return response.send({ error });
  }
});

To get a particular article, specify again the source table and use select. Then pass the id from the URL, which can be accessed via requests.params.id, as an argument to eq to get the article whose id equals that in the params object.


// Get an article

app.get("/articles/:id", async (request, response) => {
  try {
    const { data, error } = await supabase
      .from("posts")
      .select()
      .eq("id", request.params.id)
    console.log(data);
    return response.send(data);
  } catch (error) {
    return response.send({ error });
  }
});

To post an article, you'll need to specify the title and body in the payload, which can be accessed through the request object. Then pass that to the insert method, which then writes to the database. If there's an error, it's returned with a status code of 400.

// Post an article

app.post("/articles", async (request, response) => {
  try {
    console.log(request.body);
    const { data, error } = await supabase.from("posts").insert(request.body);
    if (error) {
      return response.status(400).json(error);
    }
    response.status(200).json(request.body);
  } catch (error) {
    response.send({ error });
  }
});

To update a particular article, whose id is passed in the URL, check with the ternary operator what needs to be updated. Then select the article to update with eq.

// Update an article

app.put("/articles/:id", async (request, response) => {
  console.log(request.params);
  try {
    const { data: updatedData, error: updatedError } = await supabase
      .from("posts")
      .update({
        title: request.body.title ? request.body.title : data[0].title,
        body: request.body.body ? request.body.body : data[0].body,
      })
      .eq("id", request.params.id);
    const { data, err } = await supabase.from("posts").select();
    return response.status(200).send(data);
  } catch (error) {
    response.send({ error });
  }
});

To delete an article, the id is needed too; do this with the Supabase delete function. Make the deletion first and then get all the articles, which no longer contains the deleted article.

// Delete an article

app.delete("/articles/:id", async (request, response) => {
  try {
    const { data, error } = await supabase
      .from("posts")
      .delete()
      .eq("id", request.params.id);
    const { datar, errorr } = await supabase.from("posts").select();
    if (error) {
      return response.status(400).json(error);
    }
    return response.send(datar);
  } catch (error) {
    response.send({ error });
  }
});

Conclusion

In this article, you learned how to make a CRUD app using Express and Supabase. It started out introducing the relevant technologies: Express and Supabase, also highlighting reasons why you should use Supabase in your projects.

The article also covered spinning up an Express server, setting up a Supabase project and creating the routes handling the necessary CRUD operations for the application.

This app was published on the Supabase Launch Week. I had already built a similar app about 4 months ago, so I didn't bother pushing this particular one to GitHub. So feel free to clone the original project and see how it works.

I hope that this article is helpful and you learned something from it. Being a technical writer and content creator I am passionate about sharing my knowledge (including tips and advice) and helping other people achieve their goals, especially those just starting out in tech. You can connect with me on my social media profiles and blogs here.

Setting Up A Julia Development Environment

John ✨️ — Sun, 16 Apr 2023 14:20:02 +0000

Introduction

This guide provides a simple walkthrough on how to get Julia running in VS Code. So it is assummed that you have the IDE (Integrated Development Environment) installed. If not you can download VS Code here.

Installation Steps

Download and Install Julia: As recommended on the official Julia website you should be downloading and using the latest stable release of Julia for you machine. After downloading, run the installer and follow the instructions.
Install the Julia Extension: you can find the extension here or you could directly search the term julia in the extension marketplace. It should be the first popping up with "Julia Language Support" as the description. The extension provides language support and other features like syntax highlighting, code completion, and debugging.

Test Your Setup: To make sure your setup is working correctly, open VS Code and create a new file with a .jl extension, main.jl for example. Then write your first line of Julia, such as println("Hello, world!"). Save the file and run it by clicking the "play" button at the top right corner in VS Code.

If you're getting an error message that reads like this:



Cannot read properties of undefined.

It might be that the extension does not find the julia executable. You can fix this by setting the julia.executablePath to point to julia.exe on your machine. You can set the path via the menu File->Preferences->Settings->Extensions and the select julia. Under julia go to Julia: Executable Path and enter the path.

You can find the right path by searching julia.exe, open the file location and copy the path, which should look something like this:



C:\Users\moyoj\AppData\Local\Programs\Julia-1.8.5\bin\julia.exe

And your Julia program should run successfully.

Land Your First Tech Role As A Newbie Using LinkedIn

John ✨️ — Thu, 13 Apr 2023 09:22:47 +0000

Introduction

This article is a blog post equivalent to David's Twitter thread on landing your first tech role as a newbie. Even though the title seems to suggest that it speaks only to tech newbies, experienced folks have and can apply this approach to get jobs too. The thread was made on 21 February 2023 and there has been some great news so far from those that tried it including UI/UX Designers, Mobile Developers, Web Developers, Software Testers, Data Analysts and Product Designers.

Landing The Jobs

In this article, we'll be discussing (with proof) how to land your first role in tech as a newbie! It’s a trick I’ve tested myself and found to be very effective. There’s a small caveat, but if getting your foot in the door is your goal, you won’t consider it a caveat. Let's get started.

First, I’m neither a tech influencer nor do I claim to know it all. This is something I’ve tried personally that has landed me 2 roles, and seen work for a few friends. There are two sides to this:

Newbies struggling to get their first roles in tech is often due to high competition.
The second most important reason is due to lack of experience. Most companies don’t want to invest time, money and resources into training them, only to lose them once they’ve gained some experience.

So they opt for someone that is already market-ready, instead of risking it with a newbie. This creates an experience paradox where you need the experience to land a job, but need a job to gain the said experience. The solution I came up with was very simple yet effective. I already knew the psychology behind these companies not accepting newbies. So I made a decision.

For this to work, I started looking for start-ups and companies that have less than 20 or 50 employees. You can push it to 100 or more if you’re willing to risk it (I’ll explain why in a minute). I would then look for the CTOs, CEOs, or Hiring Managers/Recruiters.

That's what I did mostly on LinkedIn because it’s easier to find the right info about a company, including the number of employees and the individual roles at the company. Once I found a target company, I would do one of two things, regardless of their hiring status:

I would either send a connection request to those listed above with a certain message attached. But sometimes it takes a while to get feedback, plus there’s a character limit. So I opted for the LinkedIn Premium trial where I get 5 - 10 InMail credits to message anyone on the platform.
The email would contain a very convincing message about myself and my current skillset (I’d also add my resume or CV). Then I would pitch myself to the company, explaining my current experience predicament.

I’d specifically tell them that if their budget did not allow for new hires, I’d be willing to work for free. My only goal was to gain real-world experience (this is the hook that grabs their attention). It’s rare to find someone who is so desperate for work experience that they’d be willing to work for free. This is something most companies won’t turn a blind eye to. Why? Because at this point they have nothing to lose. They’ll be getting an extra hand, and they don’t have to pay for it or so they’d think.

The idea behind picking a startup or company with less number of employees is that they are very flexible when it comes to decision-making. There’s no long hierarchical decision-making process like with bigger companies (which would typically dissuade that contact). The CTO/HR can simply speak to the CEO and a decision is quickly made. Hence, the smaller the more flexible.

Here is a snippet of an actual message I sent and the response I got. As you can see, it works! Why? Because you’ve removed the psychological barrier stopping the company from accepting most newbies… “I’m willing to work for free”. But obviously, we all want to get paid right?

Once you have your foot in the door, this is a golden opportunity for you. The trick to getting paid is in proving your worth by making valuable contributions to the company. Whatever you do, go the extra mile to show that you’re worth keeping.

The psychology here is most companies value effort, and appreciate contributions. It is very unlikely that at the end of the month when they’re making payments to employees they’ll overlook someone who has actively been adding value to the company.

If you don’t get compensated after making these contributions after in the first month or two, feel free to quit and go for another company. Either way, you won. You’ve gained valuable experience working in a team and that can never leave you, which you can add to your resume.

Don’t just copy my message snippet, use that as a reference to come up with a better pitch that is well-optimized for your particular situation.

Success Stories

Here are a few proofs of success from different roles in the tech space:

Software Testing:

Web Development:

UI/UX Design:

That's it. I hope this helps. Thanks for reading.

Become A React Developer In 2023

John ✨️ — Sun, 02 Apr 2023 17:11:34 +0000

Introduction

This article provides resources and experienced-based tips and advice for learning the necessary technologies to become a react developer in 2023. The materials cut mainly across the frontend and cover aspects like react, (custom) hooks, Context API, TypeScript, version control as well as testing.

This guide will lead you to the knowledge and skillset you need to become a Software Engineer on the frontend with React and TypeScript. You'll find material on the following:

HTML
CSS
Git and GitHub
JavaScript
React
TypeScript
Testing with React Testing Library

HTML

HTML - Hypertext Markup Language - is the standard markup language for displaying documents in the browser. You could see HTML as the skeleton of web pages. This HTML course by freeCodeCamp covers all you need to know to be able to write HTML for the pages and applications you’ll be building. This course covers what you need to get started writing HTML:

Now after learning the fundamentals of HTML, practice building pages in it. Many tend to skip this but it allows you to see what you can do alone in HTML and what it has to offer. This freeCodeCamp tutorial walks you through building a simple page in HTML:

I'd recommend you build two more such websites that use other HTML elements that are not implemented in the above tutorial. And also look up the elements on MDN to get familiar with the documentation.

CSS

CSS stands for Cascading Style Sheets and it’s used to describe the documents displayed by HTML as regards size, layout (both on mobile and desktop), colour, font, etc. Many newbie developers tend to not spend enough time with CSS and quickly jump to JavaScript but this has a way of catching up later: that may be a project or a role that uses pure CSS or SCSS. So give CSS enough time. This course on freeCodeCamp teaches the basics of CSS:

After covering the CSS basics, get enough practice by building landing pages and multipage websites. A great resource for HTML/CSS practice projects is Frontend Mentor. But of course, you can use other resources or even come up with your own project ideas. And be sure to make the pages and websites mobile responsive. Don’t abandon any page for another til it’s fully responsive. You’ll be doing your technical skills a lot of good. This tutorial series builds a landing page from scratch:

Then be sure to build similar or even multipage websites independently and see how far you go. You'd need to do many - I'd recommend 10 - of such projects to be able to pull off most of the styles and layouts in real-world websites and applications.

Git And GitHub

Now you have a number of projects going on and some of the files probably are large. You might want to keep track of the changes you've made so far and future changes or updates you'll be making later. This is where git and GitHub come to play. Git is a version control software and GitHub is a platform where Git users build software together. Developers collaborate on GitHub to build open-source projects and share files. Get started with Git and GitHub with this tutorial:

One thing to keep in mind about Git is that you'll not write git commands (there are many of them by the way) as often as you may think. I could go a week or two without writing any commands on the job. I just look them up whenever I need them, which makes sense because it's not a programming language or framework. But having an understanding of the basics and why it's needed is important.

JavaScript

JavaScript is responsible for the logic and functionalities of web applications. It breathes life into the static pages that you build in HTML and CSS. Even though it's more likely that you'll work with frameworks nowadays, they are built on JavaScript and thus knowledge of plain JavaScript is important. This tutorial covers the basics of JavaScript that you need to start building projects:

Once you've covered the basics, start building projects because real learning happens when you work on projects independently. This tutorial walks you through building a simple vanilla JavaScript project, including HTML and CSS of course:

You could do a few more such walkthroughs where you code along. But don't do that for long because you really learn, as I've said earlier when you build projects by yourself from scratch. If you're always wanting to use tutorials for building projects, you run the risk of tutorial hell and you don't want that. Frontend Mentor has a bunch of vanilla JavaScript projects which you could do or could help come up with project ideas.

React

React is a JavaScript library for building user interfaces. It allows developers to build complex and interactive UIs with reusable components. This tutorial walks you through what you need to know about react. It covers setting it up the local environment through to basic react concepts like JSX, props, state, hooks etc.

You're also welcome to check out other tutorials but again start working on projects once you've understood the beginner concepts. You might want to look at some concepts in isolation too if necessary like the hooks and passing props. This tutorial for example builds a calculator with the useReducer hook.

You could do react versions of the vanilla JavaScript projects that you've worked on so far to get more practice.

React with TypeScript (plus Testing)

TypeScript is an extension of JavaScript. It provides optional static typing and other features on top of the language. TypeScript is designed to help developers write more scalable and maintainable code by providing features like interfaces, classes, and type annotations.

You might not want to immediately use TypeScript for your portfolio projects but you'll most likely need it on the job. This series covers TypeScript basics and then goes on to build a react app that covers important concepts in the language:

It also includes testing with react testing library. You don't have to do it for now but I'd recommend it anyway because you may be tasked with testing components on the job.

Conclusion

Some of these resources include material on HTML, CSS, JavaScript, React and TypeScript which helped me in becoming a Frontend Developer. There are lots of other great resources out there but you should spend most of your time building projects rather than watching tutorials and coding along. It's also important to know that your work project could decide what you'll be learning too: whether state management with the hooks, for example, or with a third-party library like redux.

Writing A Custom Paragraph Component in React

John ✨️ — Sun, 19 Mar 2023 22:50:40 +0000

In this article, I'll be explaining how to create a custom paragraph component which will take a prop as well other valid HTML properties valid for a paragraph.

Let's say you were to write a custom paragraph component in React which would be called <ParaText />. You want to pass some string value as a property called text which would then be passed on to the p element like this:

<p>{text}</p>

How would you go about writing this component? You may think about listing all valid properties for a paragraph element and then passing it on, but it soon becomes clear that this approach is unrealistic:

const ParaText = ({ text, id, class, style, title}) => <p>{text}</p>;

Here we've added just 4 attributes (and the text prop) that would need to be passed on. If we were to include all necessary attributes we would need 10 props and that's not a good approach. We could instead use the spread syntax to collect the remaining props in an object that we will call rest for this tutorial.

const ParaText = ({ text, ...rest}) => <p {...rest}>{text}</p>;

So far it's all been JavaScript but now we'll use an interface to define the type of the properties object so that only valid properties are passed to the ParaText component. We'll call the interface ParaTextType.

interface ParaTextType {
  text: string;
  id?: string;
  class?: string;
  style?: string;
  title?: string;
}

const ParaText = ({  text, ...rest}: ParaTextType) => 
<p {...rest}>{text}</p>;

But our ParaTexType definition for what a paragraph should accept isn't as precise as the built-in ones in React. And we only want to include the text property in our custom component and intrinsically inherit the normal attributes of the native paragraph element. There are a number of ways to achieve this but for this tutorial, we'll take a look at three:

1. ComponentPropsWithoutRef

This interface is available on the React namespace and it provides the appropriate props for a given component type without any ref that the component accepts. So that means if you passed a paragraph to ComponentPropsWithoutRef like this:

React.ComponentPropsWithoutRef<"p">

You should get the valid props (attributes) for the paragraph element, which ParaTextType can extend. For brevity's sake, let's import ComponentPropsWithoutRef from React:


import { ComponentPropsWithoutRef } from 'react';

interface ParaTextType extends ComponentPropsWithoutRef<"p"> {
    text: string;
}

const ParaText = ({  text, ...rest}: ParaTextType) => <p {...rest}>{text}</p>;

Then you can simply use the component this way:

    <ParaText text="John" />

Another interface similar to ComponentPropsWithoutRef is ComponentProps. The latter provides a ref property which can be used in the paragraph element.

2. JSX.IntrinsicElements

The namespace JSX is available globally from which we can extract the type we want by indexingJSX.IntrinsicElements with the HTML node name:

    JSX.IntrinsicElements['p']

But we can't use extends with square brackets: this seems to be a TypeScript limitation. So we cannot do:

    interface ParaTexType extends JSX.IntrinsicElements['p']

We would have to hold it in a separate type variable. Let's call this variable ParaTexTypeFromJSX, which we would then use like this:

type ParaTexTypeFromJSX = JSX.IntrinsicElements['p'];

interface ParaTexType extends ParaTexTypeFromJSX {
  label: string;
}

const ParaText = ({  text, ...rest}: ParaTextType) => <p {...rest}>{text}</p>;

3. HTMLParagraphElement

You can also define the return value of ParaText1 which in the end is a functional component that renders a paragraph. So we get the properties (HTML attributes) for a paragraph and use the intersection literal (&) to include our text prop.

const ParaText1: React.FunctionComponent<
  React.HTMLAttributes<HTMLParagraphElement> & {
    text: string;
  }
> = ({ text, ...rest }: { text: string }) => <p {...rest}>{text}</p>;

Then you can then use the component as follows:

    <ParaText text="John" />

And you should get a paragraph element displaying "John". You could extend this component as you wish, like limiting the text length and using an ellipsis (...) afterwards.

Conclusion

We looked at how we can create or mirror a paragraph element in React using the built-in types. There are other interfaces, like InputHTMLAttributes, HTMLAttributes and HTMLProps that might as well get the job done or be a bad choice but for this tutorial, we'll keep it at 3.

Setting Up A React TypeScript Project With Vite

John ✨️ — Tue, 07 Mar 2023 12:22:12 +0000

In this articles series, whose release will probably span several weeks or months, I'll be explaining how to write standard HTML elements - buttons, input elements, lists, typographical elements etc - as custom components in React and TypeScript. The aim is to help you get comfortable with writing React components with TypeScript. So this tutorial assumes:

Familiarity with HTML, CSS, and modern JavaScript.
Basic knowledge of React

Most developers default to Create React App (CRA) as a build tool for creating new projects in react and setting up a development server. It offers a modern build setup without any configuration.

Create React App runs on webpack under the hood, which bundles the entire application before it can be served. Thus, in a large codebase, it takes more time to get the application running and takes a long time before file changes reflect in the browser.

Why Vite

Unlike CRA, Vite doesn't build the entire application before serving it up. It splits the application modules into two parts: dependencies and source code.

Dependencies are pre-bundled using esbuild (written in Go), which is 10 - 100x faster than JavaScript-based bundlers; as dependencies do not change, they can also be cached so that pre-bundling can be skipped altogether.
Source code is served over native ESM: source code often contains non-plain JavaScript that needs transforming (e.g. JSX, CSS) but not all needs to be loaded at the same time. The code needed gets served based on the browser routes (route-based code splitting).

These differences result in a faster experience when using Vite to initialise, update and build react applications.

Prerequisites

For the setup, you need to install Node.js version 14.18+, 16+ according to the Vite documentation. But at the time of writing this guide the version on my machine was 14.17.3 and it worked fine. You can check the version you installed by running the following command in the terminal:

$ node -v

The output should look like this:

v14.17.3

But if you get a command not found error (or a similar phrase), please make sure Node.js is installed before proceeding.

You also need the Node package manager (NPM) which you get by default with Node.js. So you can confirm from the terminal with the command:

$ npm -v

The output should look like this:

8.3.0

Step 1: Creating a Vite Project

You'll create a new React project using Vite from the command line in this step. Run the following command from the terminal:

$ npm create vite

If you've never used Vite on your machine before, you should get a prompt asking whether you want to install create-vite: a tool to quickly start a project from a basic template for popular frameworks.

$ npm create vite
Need to install the following packages:
    create-vite@4.1.0
OK to proceed? (y)

Follow the prompt by clicking Enter. Then you should be asked to enter a name for the project (this tutorial will use react-typescript-vite as the example name):

$ npm create vite
Need to install the following packages:
    create-vite@4.1.0
OK to proceed? (y)
? Project name: » vite-project

After entering your project name, Vite will prompt you to select a framework (you'll need to select React):

$ npm create vite
Need to install the following packages:
    create-vite@4.1.0
OK to proceed? (y)
? Project name: » react-typescript-vite
? Select a framework: >> - Use arrow-keys. Return to submit.
> Vanilla
  Vue
  React
  Preact
  Lit
  Svelte
  Others

Then you'll need to select a variant. For this setup we need TypeScript:

$ npm create vite
Need to install the following packages:
    create-vite@4.1.0
OK to proceed? (y)
? Project name: » react-typescript-vite
? Select a framework: >> - Use arrow-keys. Return to submit.
> Vanilla
  Vue
/ Select a framework: >> React
? Select a variant: >> - Use arrow-keys. Return to submit.
  JavaScript
> TypeScript
  JavaScript + SWC
  TypeScript + SWC

After successfully selecting the right template, you should have this:

$ npm create vite
Need to install the following packages:
    create-vite@4.1.0
OK to proceed? (y)
? Project name: » react-typescript-vite
? Select a framework: >> - Use arrow-keys. Return to submit.
> Vanilla
  Vue
/ Select a framework: >> React
/ Select a variant: TypeScript

Scaffolding project in C:\...\react-typescript-vite...

Done. Now run:

    cd react-typescript-vite
    npm install
    npm run dev

Now switch to the project directory and install the project dependencies with npm install. As an alternative, you can directly specify the project name and the template you want to use via additional command line options.

npm create vite@latest react-typescript-vite -- --template react-ts

This would create the project in a new directory that will be called react-typescript-vite, just as above. But if you want it in the current directory, then use:

npm create vite@latest . -- --template react-ts

You'll have to install the dependencies too after doing the steps in one command.

Step 2 - Starting the Dev Server

Here you'll start the development server with the following command:

$ npm run dev

This runs vite behind the scenes. You could have a look at the script dev in package.json. If everything goes well, you should get something like this:

$ npm run dev

> vite-article-project@0.0.0 dev
> vite

Port 5173 is in use, trying another one...

  VITE v4.1.4  ready in 1109 ms

  ➜  Local:   http://127.0.0.1:5174/
  ➜  Network: use --host to expose
  ➜  press h to show help

Next, Ctrl + Click on the local URL http://127.0.0.1:5174/ and you will see the app running on the browser. If you're getting an error message like this:

'vite' is not recognised as an internal or external command, operable program or batch file.

Then you've probably not installed the dependencies, so please do so with npm install.

Conclusion

In this episode, we introduced Vite and discussed its advantages over Create React App. We also covered the steps to set up a React TypeScript development environment using Vite. In the next chapter, we will write the first custom component.

CodeSnap: Take Code Screenshots In VS Code

John ✨️ — Thu, 02 Mar 2023 19:32:27 +0000

There are a number of reasons why you might want to make code screenshots: it could be for the purpose of learning, reviewing code, sharing your knowledge or documentation. Whatever your specific use case may be, this VS Code extension allows you to create screenshots of code in the IDE.

CodeSnap In VS Code

CodeSnap is a extension thath allows you to take screenshots of your in VS Code. You can install it by from the marketplace.

Features

Save screenshots of your code
Copy screenshots to your clipboard
Show line numbers
Shots with or without the container
Shutter action to save or copy to clipboard
Change the background color and many more

Take a Shot in 3 Steps

Open the command palette (Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on Mac) and search for CodeSnap.
Select the code you'd like to screenshot.
Click the shutter button to save the screenshot to your disk.

Sample Shot

Final Thoughts

I usually generate my code screenshots from a web application but being able to do it directly in VS Code increased my productivity: I don't have to copy and paste code, and switch windows.

I hope this article is helpful and you learned something from it. Being a technical writer and content creator I am passionate about sharing my knowledge (including tips and advice) and helping other people achieve their goals, especially those just starting out in tech. You can connect with me on my social media profiles and blogs here.

How To Get Familiar With An Existing React Codebase

John ✨️ — Mon, 27 Feb 2023 19:50:06 +0000

There are a few reasons why you may want to get familiar with an existing codebase:

Learning new programming techniques and best practices
Contributing to an open-source project
Starting a new job

Regardless of which category applies to you, you may need to level up and quickly get comfortable in a large codebase. So these 4 tips I'll be discussing should get you up and running in any new react codebase you'll possibly be working with.

1️⃣ Set Up a Development Environment

You're new to the codebase, trying to learn and you're probably going to break things. You don't want that in production. So set up a development environment, preferably with version control, where you can test things without breaking any real thing.

Use features like syntax highlighting, search, and code folding to help you quickly find what you're looking for. Shortcuts like Ctrl + Tab in VS Code can help you switch between files quickly as you navigate the codebase. I covered some VS Code shortcuts that helped my productivity in this article

2️⃣ Read the Documentation

if there is any documentation available, read it through. It could be a simple user guide or API documentation. Figure out what parts may be useful because not all of the documentation is necessarily useful at that moment. So try to understand what parts may be useful to you and understand them as best as you can.

3️⃣ Trace Through the Code

Start at a small feature or component (a simple task) that's easy to locate in the application and look for it in the codebase. You could install the React Developer Tools chrome extension which allows you to inspect the component hierarchies in the Chrome Developer Tools.

After installing the extension, you will get two new tabs in your Chrome DevTools: "⚛️ Components" and "⚛️ Profiler".

The Components tab shows you the root component on the page, which can be collapsed to see the child components.

Use the arrow icon for the extension to select the component in the app you want to start from.

That shows the components (as they are named in the codebase) rendering the part you clicked on in the browser. You can find them under the "rendered by" section in the right panel. Then you could search for the name in the codebase.

4️⃣ Talk With Existing Users And Share Your Findings

Whenever you're unsure about something, contact a Senior Developer. Make notes on what they say if needed, so you don't have to return to them on the same topic. Documenting what you learn will definitely increase your ability to use them as a resource efficiently. They would be less likely to get grumpy and gladly help you when next you come around.

Final Thoughts

There are different realities around different projects: there might be nobody in a previous position you can ask for help; other projects may not have any documentation available. And it's not an uncommon situation. But these tips should in some way get you familiar with the codebase.

But if you're an experienced developer, you probably have a way you approach new codebases. So let me know what you think. Thank you!

5 Great Custom Hooks For Your React Project

John ✨️ — Thu, 23 Feb 2023 22:30:02 +0000

As I was searching through the codebase and writing the components for my current work ticket, I came across some useful custom hooks from a number of third-party libraries like react-use, usehooks-ts, Mantine. But there are for sure other similar libraries out there such as use-http, react-hanger and many more.

1️⃣ useTitle

This hook from react-use allows you to dynamically set the title of a page in your application. It can be used to set the title of the page to a specific value or to update the title in response to user interactions or state changes in the application.

You may think that there's nothing particularly special about that since you could easily do document.title and you're good to go, but under the hood, the hook checks that the document is not undefined and since it's a side effect it implements the useEffect hook:

import { useEffect, useRef } from "react";

export interface UseTitleOptions {
  restoreOnUnmount?: boolean;
}

const DEFAULT_USE_TITLE_OPTIONS: UseTitleOptions = {
  restoreOnUnmount: false,
};

function useTitle(
  title: string,
  options: UseTitleOptions = DEFAULT_USE_TITLE_OPTIONS
) {
  const prevTitleRef = useRef(document.title);
  
  if (document.title !== title) document.title = title;

  useEffect(() => {
    if (options && options.restoreOnUnmount) {
      return () => {
        document.title = prevTitleRef.current;
      };
    } else {
      return;
    }
  }, []);
}

export default typeof document !== "undefined"
  ? useTitle
  : (_title: string) => {};

Usage:

import { useTitle } from 'react-use';

function MyComponent() {
  const [title, setTitle] = useTitle('Old Title');

  const handleClick = () => setTitle('New Title');

  return (
    <div>
      <h1>{title}</h1>
      <button onClick={handleClick}>Change Title</button>
    </div>
  );
}

An instance of the useTitle hook is used to set the initial value of the title state variable to 'Default Title'. The setter function setTitle is then called to update the title on clicking the button.

2️⃣ useCopyToClipboard

This implementation of the useCopyToClipboard hook comes from the usehooks-ts library. It provides an easy way to copy text to the clipboard. Other React hooks libraries also have this hook which they implement differently: some rely on JavaScript libraries like copy-to-clipboard that run on document.execCommand() while others like this one depend on the clipboard API.

import { useState } from 'react'

type CopiedValue = string | null
type CopyFn = (text: string) => Promise<boolean> // Return success

function useCopyToClipboard(): [CopiedValue, CopyFn] {
  const [copiedText, setCopiedText] = useState<CopiedValue>(null)

  const copy: CopyFn = async text => {
    if (!navigator?.clipboard) {
      console.warn('Clipboard not supported')
      return false
    }

    // Try to save to clipboard then save it in the state if worked
    try {
      await navigator.clipboard.writeText(text)
      setCopiedText(text)
      return true
    } catch (error) {
      console.warn('Copy failed', error)
      setCopiedText(null)
      return false
    }
  }

  return [copiedText, copy]
}

export default useCopyToClipboard

The clipboard API does the cut, copy and paste asynchronously, which is why writeText() is called in a try-catch block. The state variable copiedText holds the value or null depending on the outcome of the asynchronous action.

Usage

import { useCopyToClipboard } from 'usehooks-ts'

export default function Component() {
  const [value, copy] = useCopyToClipboard()
  return (
    <>
      <h1>Click to copy:</h1>
      <div style={{ display: 'flex' }}>
        <button onClick={() => copy('A')}>A</button>
        <button onClick={() => copy('B')}>B</button>
        <button onClick={() => copy('C')}>C</button>
      </div>
      <p>Copied value: {value ?? 'Nothing is copied yet!'}</p>
    </>
  )
}

In this example, the letters passed to the setter get copied to the user's clipboard on clicking the buttons. Then value is conditionally displayed in the p element below.

3️⃣ useOs

Have you ever thought about designing or making your application behave differently based on the user's operating system (OS) such as implementing adaptive design or providing different download links for different platforms? Well, this hook from the Mantine library provides you with the OS name, returning it as a string.

export type OS = 'undetermined' | 'macos' | 'ios' | 'windows' | 'android' | 'linux';

function getOS(): OS {
  const { userAgent } = window.navigator;
  const macosPlatforms = /(Macintosh)|(MacIntel)|(MacPPC)|(Mac68K)/i;
  const windowsPlatforms = /(Win32)|(Win64)|(Windows)|(WinCE)/i;
  const iosPlatforms = /(iPhone)|(iPad)|(iPod)/i;

  if (macosPlatforms.test(userAgent)) {
    return 'macos';
  }
  if (iosPlatforms.test(userAgent)) {
    return 'ios';
  }
  if (windowsPlatforms.test(userAgent)) {
    return 'windows';
  }
  if (/Android/i.test(userAgent)) {
    return 'android';
  }
  if (/Linux/i.test(userAgent)) {
    return 'linux';
  }

  return 'undetermined';
}

export function useOs(): OS {
  if (typeof window !== 'undefined') {
    return getOS();
  }

  return 'undetermined';
}

Possible values are undetermined, macos, ios, windows, android, linux. If os cannot be identified, for example, during server-side rendering (since the window object would be undefined) undetermined will be returned.

Usage:

import { useOs } from '@mantine/hooks';

function Demo() {
  const os = useOs();
  return <>Your os is <b>{os}</b></>;
}

This example is from Mantine's documentation for this hook. So if you're viewing it from an android device, for example, you should get:

Your os is android

4️⃣ createGlobalState

createGlobalSize also belongs to react-use and it provides a way for you to create a global state that can be shared across multiple components without having to go for state management libraries like redux.

In a typical React application, the state is usually managed locally within a component and passed down to child components through props. However, in some cases, it may be desirable to have a global state that can be accessed and updated by components that are not directly connected in the component tree. This hook serves that purpose quite well.

Under the hood, createGlobalState accepts some initial state (or not) of any type and returns a function which has the typical behaviour of useState in that it returns an array of the current state and a setter. This function can then be used in as many components as necessary.

import { useState } from 'react';
import { IHookStateInitAction, IHookStateSetAction, resolveHookState } from '../misc/hookState';
import useEffectOnce from '../useEffectOnce';
import useIsomorphicLayoutEffect from '../useIsomorphicLayoutEffect';

export function createGlobalState<S = any>(
  initialState: IHookStateInitAction<S>
): () => [S, (state: IHookStateSetAction<S>) => void];
export function createGlobalState<S = undefined>(): () => [
  S,
  (state: IHookStateSetAction<S>) => void
];

export function createGlobalState<S>(initialState?: S) {
  const store: {
    state: S;
    setState: (state: IHookStateSetAction<S>) => void;
    setters: any[];
  } = {
    state: initialState instanceof Function ? initialState() : initialState,
    setState(nextState: IHookStateSetAction<S>) {
      store.state = resolveHookState(nextState, store.state);
      store.setters.forEach((setter) => setter(store.state));
    },
    setters: [],
  };

  return () => {
    const [globalState, stateSetter] = useState<S | undefined>(store.state);

    useEffectOnce(() => () => {
      store.setters = store.setters.filter((setter) => setter !== stateSetter);
    });

    useIsomorphicLayoutEffect(() => {
      if (!store.setters.includes(stateSetter)) {
        store.setters.push(stateSetter);
      }
    });

    return [globalState, store.setState];
  };
}

export default createGlobalState;

The createGlobalState custom hook also implements some other hooks in react-use like useIsomorphicLayoutEffect and useEffectOnce.

Usage

const useGlobalValue = createGlobalState<number>(0);

const CompA: FC = () => {
  const [value, setValue] = useGlobalValue();

  return <button onClick={() => setValue(value + 1)}>+</button>;
};

const CompB: FC = () => {
  const [value, setValue] = useGlobalValue();

  return <button onClick={() => setValue(value - 1)}>-</button>;
};

const Demo: FC = () => {
  const [value] = useGlobalValue();
  return (
    <div>
      <p>{value}</p>
      <CompA />
      <CompB />
    </div>
  );
};

In the use case above createGlobalState was initialized with 1 and gets number passed as a type parameter. It then returns a useState-like function which is called useGlobalValue here.

CompA and CompB use the setter from it to update the global state variable value. This can be used everywhere in the application. I like to see createGlobalState as an umbrella state holder that shares data among components.

5️⃣useWindowSize

One use case for the useWindowSize hook, which belongs to react-use, is for responsive design. The useWindowSize hook keeps track of the size of the browser window which makes it possible to apply different styles (layouts, displays, etc.) to user interfaces at different sizes. It returns an object containing the current width and height of the window.

import { useState } from 'react'

import { useEventListener, useIsomorphicLayoutEffect } from '..'

interface WindowSize {
  width: number
  height: number
}

function useWindowSize(): WindowSize {
  const [windowSize, setWindowSize] = useState<WindowSize>({
    width: 0,
    height: 0,
  })

  const handleSize = () => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight,
    })
  }

  useEventListener('resize', handleSize)

  // Set size at the first client-side load
  useIsomorphicLayoutEffect(() => {
    handleSize()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return windowSize
}

export default useWindowSize

The hook is typed with WindowSize. It gets the dimensions from the window object, listens for resize and gets updated based on that.

Usage

import {useWindowSize} from 'react-use';

const Demo = () => {
  const {width, height} = useWindowSize();

  return (
    <div>
      <div>width: {width}</div>
      <div>height: {height}</div>
    </div>
  );
};

The hook returns windowSize which is destructured in the example above (as is typical in handling return values from hooks in React) and the value can be easily used in the application.

Final Thoughts

As you can see there are quite a lot of customs hooks out there that serve as many useful utility purposes as:

sensors
animations
state
UI
side-effects

I thought about writing these custom hooks by myself but there's no point reinventing the wheel and they're probably more reliable since many developers are working on the libraries.

5 VS Code Shortcuts To Up Your Productivity

John ✨️ — Thu, 23 Feb 2023 13:31:33 +0000

Working in a moderate-sized to large codebase usually involves having to trace through many source files to see how different components interact with one another, especially when you're new to the project or starting a new ticket that involves code blocks you are not familiar with.

So these shortcuts in VS Code can help you find your way quickly in the codebase faster and more efficiently.

1️⃣ Search for Files: Ctrl + P (Windows/Linux), Command + P (Mac)

This helps you quickly search for and open files in your workspace. It does this by providing a drop-down of suggestions which changes accordingly as you type in the name of the file you're searching.

2️⃣ Find and Replace: Ctrl + F (Windows/Linux), Command + F (Mac)

This allows you to find and replace text in the current file. It is done by an overlying input bar that takes in your entries and matches them simultaneously with corresponding lines of code in the file. Matching lines of text get highlighted and you can also move up or down lines of code that match thanks to the up and down arrows next to the input.

3️⃣ Move Line Up/Down: Alt + Up/Down Arrow (Windows/Linux/Mac)

This one allows you to quickly move a line of code up or down in the file. This happens by having the cursor on the line you intend to move and then you apply the Alt + Up/Down Arrow.

4️⃣ Multi-Cursor Editing: Alt + Click (Windows/Linux/Mac)

Have you ever had to rename multiple instances of an identifier in a file? Well, this shortcut adds multiple cursors to your code, which makes such multi-line changes possible. You can also select instances of a variable or function name (or just about any line of text) by highlighting it and then doing Ctrl + D on Windows/Linux or Shift + Cmd + L on Mac.

5️⃣ Switch between Open Files: Ctrl + Tab (Windows/Linux), Command + Tab (Mac)

This allows you to switch between open files in your workspace. It toggles between the current file and the one you visited last. But you could also go to other files with Ctrl + Shift + Tab (Windows/Linux) or Cmd + Shift + Tab (Mac).

Wrapping Up

Ctrl + Tab, Ctrl + F and Ctrl + P (on Windows) are the three shortcuts I use most because I often have to search for identifiers and blocks of code among files, followed by Alt + Up/Down. Multi-cursor editing comes once in a blue moon and I also tend to just forget about it.

There are more VS Code shortcuts but I tend to use these because they come in handy and don't need many keystrokes.

Client-side and Server-side Rendering: An Overview

John ✨️ — Mon, 13 Feb 2023 12:31:06 +0000

The standard way to get HTML up on a page in the browser was by server-side rendering (SSR). It was the only method available before other rendering modes came on board. You simply loaded your website files on a server, and then on request, the server went and converted them into documents that can be understood by the browser.

And this met the needs at the time because most websites displayed non-personalised static text and images, having almost no use for interactive and dynamic features.

But these days websites do way more than just display static content. They are arguably more like applications that use the web as a platform. Websites of today are often used for messaging, streaming, editing, and lots more. Websites have just become a lot more functional than they used to be.

So this means that there has been a paradigm shift regarding server-side rendering as the primary rendering mode in favour of the modern way of rendering web pages on the client side. Let's take a closer look at both rendering modes.

How SSR works

The key aspect of server-side rendering is the generation of HTML, which is done by the server. You request an HTML page - written in PHP, for example - the server runs and compiles the PHP code, includes the data (text, images etc.) and sends the populated HTML file back to the client. The requests and responses put together usually take about a quarter of a second but ultimately depend on several factors which include:

the server's location
your internet speed
the traffic to the website
the website performance

But on making the same request or even on navigating to a different route, the whole process had to be repeated: get the PHP file based on the new route, compile it and then, as usual, send it to the browser, with the CSS and JavaScript files that may affect the page load time.

Even though the new page differs from the current page by a few lines of content, the server re-renders the new page anew and then sends it to the browser. Although this may not be an issue for websites with little content, many modern websites have thousands of lines of code and are generally complex. This would mean longer load times because every page would have to be rendered and re-rendered when navigating through the site, making the website slow.

But on the other side, SSR is really good for search engine optimization (SEO). It means that the search engine does not have to execute the website's JavaScript to understand what might be on the page, which is the case with client-side rendering as we'll see below in a jiffy.

SSR pros:

Content is available immediately on the initial page load even on slow connections
Ideal for SEO

SSR cons:

Too many server requests and page reloads
Longer load time due to rendering (both on the server and client)

How CSR works

In the client-side rendering model, the server renders a blank HTML page with a reference - typically through an element with an id - to a JavaScript bundle, which goes up to the client. Then the client renders a blank page and starts executing the JavaScript bundle, which creates DOM elements on the page.

If you've done create-react-app before, you'd notice that there's always an index.html file with an id of "root", which links to the JavaScript framework.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app"/>

    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    
    <div id="root"></div>
  </body>
</html>

All routes are directed to this file and are handled by the JavaScript bundle, so the browser doesn't make any additional requests to the server, and this makes the overall user experience faster.

This is significantly unlike using SSR because the server is now just responsible for loading a bare minimum of the website. Everything else is handled by a client-side JavaScript library, in this case, React.js.

However, there are some drawbacks to using client-side rendering. The website's SEO suffers a setback because the content does not render immediately until the JavaScript bundle loads in the browser. There are workarounds for this, but they require extra work, unlike server-side rendering.

You should also note that the website won't load until all the JavaScript has been sent to the browser since it contains all the pages and content needed. Because bundle sizes are large nowadays, the initial loading may take relatively long on weak connections.

CSR pros:

Dynamic site interactions for web apps
Faster overall experience

CSR cons:

The initial page load might take longer
Poor SEO

Both client-side and server-side rendering can also be implemented with frontend frameworks like Nextjs.

How I Became A Web Developer

John ✨️ — Mon, 13 Feb 2023 12:01:49 +0000

It's more likely that you know me from Twitter than any other platform, where I've been actively engaging and sharing content for a while now. But I recently decided to start blogging after some encouragement in tweets from other bloggers. I intend to deepen my knowledge in different areas of web development through it, to improve my technical writing skills and make some fortune from content creation.

How It Started

In the beginning, I was just fascinated at how computers could do a whole lot of calculations and I wanted to know how they work. But I wasn't able to explore much until I got my own personal computer 💻 (PC) when I was a freshman at the university. Then I got to know that it's called programming and that's what's behind it all. 😲 Though, it wasn't my first time coming across the term.

Concepts

Then I wanted to learn to code 😎 and I searched on youtube generically for that and the C language was introduced to me. I was alone on this quest and not aware of other programming languages, let alone the tech community. I remember installing Code::Blocks, my first ever IDE 😎, and then I started writing C.

Most of the things I did in C were algorithmic problems, putting aside the fact that I was just getting familiar with common programming logic and features like:

Getting My Hands Dirty In C

Afterwards, I began solving problems that involved printing patterns of "*". That is, drawing different shapes in asterisks. Triangles, pyramids and the like. It might seem straightforward at first glance, but getting the logic for those wasn't easy as I was new to the space. I watched many tutorials that solved those problems but being able to devise the logic independently was a hard nut to crack. Experienced programmers might probably have a heck of a time with those problems too.🤷‍♂️

JavaScript and Web Development

As I progressed through the semesters of my studies, I had less and less time to do programming because the workload turned out to be way more than in my first year 😩. So I stopped any serious programming pretty much till my final year (2018) during which I picked up JavaScript.

Later on, I started learning on freeCodeCamp where I covered quite a lot on HTML, CSS and more JavaScript. And I was also invited by a friend to my first tech conference organised by Facebook, who is an iOS developer now 😎. At this point, I realized that there was a huge tech community around me and it felt cool to be around like-minded people. Ever since I became passionate about community and I attended almost all tech events I knew about.

Quitting A Job

After studies in my home country, grads are obligated to participate in a year-long service programme. But I didn't as I had intended to continue my studies in Germany 🇩🇪 and I wanted to commit to it immediately 😐. So this meant that I wouldn't be able to work as a developer, which I desired, till I arrive in Germany 🇩🇪 or even more because I was occupied with language courses. Oddly enough, I was able to find a position with a startup company but we parted ways after a couple of months due to tech stack issues: at the core, they used WordPress and I was looking to do stuff in HTML, CSS and JS; my discontent was irrepressible.

Working On My Portfolio

Due to the coronavirus pandemic 😷, I wouldn't be in Germany till about 2 years later 😭. That was probably the toughest period to live through. I committed that period nonetheless largely to the language courses and self-learning. Also did quite a bit of working on some portfolio projects so that I don't become rusty, which I continued here in Mülheim. I intend to work here and continue to grow as a developer but for now, I'm getting some paperwork done!