DEV Community: Kachi Cheong

5 ways a developer can stand out in the job market in 2023

Kachi Cheong — Mon, 11 Sep 2023 08:35:30 +0000

It’s becoming increasingly difficult to stand out as a developer in the job market nowadays. Since covid, more people have started learning how to code and the emergence of ChatGPT makes writing code easier than ever.

With the layoffs from big tech companies in 2023, recent computer science graduates and all the hobby developers now looking coding jobs, how do you stand out?

Here are 5 tips to separate yourself from the crowd. Let's go!

1 - Write tutorials or contribute to open source.

Every developer has googled a problem they couldn’t figure out off the top of their head. Searches normally leads them to a website like this or stack overflow where there is a tutorial or a code snippet. You may look at the article and think it was helpful, but new developers often don’t think about writing articles themselves.

Writing tutorials, contributing to open source libraries or even solving problems on stack overflow can show interviewers that you have a passion for coding. Personal projects are good but it’s rare for companies to scan through all your code to check your level.

From personal experience, not only have tutorials I’ve written generated hundreds (sometimes thousands) of views a week, but they’ve also led to job offers from some really big companies.

2 - Utilize AI but don’t rely on it.

Amongst developers there is both love and hate towards AIs such ChatGPT.

Those who love it will tell you about how much it helps them on a daily basis and saves them time writing code. If you want a code snippet it can save you minutes or even hours of writing. Furthermore, it’s great for debugging code that you’ve stared at for hours as it gives you indicators on what the problem might be.

Some traditional developers avoid it cause they feel it doesn’t always work, which is of course true but are developers always right? However, relying solely on AI can also be problematic.

You can't use ChatGPT during interviews and if you're pair programming it and it's all you rely on, it doesn't leave a good impression. Imagine ChatGPT provides you a huge code snippet or when asked to explain code to colleagues, you have no idea what it does?

That's why you should make sure your fundamental coding and problem solving skills are at a good level before relying on ChatGPT for everything. It should be a tool used to save time not your life support machine.

The rise of ChatGPT leads us to our next point which is keeping up to date with new technologies.

3 - Staying up to date with the latest technologies

Technology companies will introduce more efficient ways to do things based on user feedback. Programming languages and frameworks evolve all the time so make sure even if you’re not using them you, you are at least aware of new updates. It isn’t uncommon for companies to hire a new developer to help them migrate code from older version and/or framework to a newer version.

For example, as a javascript developer, when I learned react - it was relatively new. Since I started learning react, react has introduced function based components, typescript and useContext. These technologies have made React a lot more user friendly and handles tasks much easier.

4 - Companies hire people they like.

Companies will make room for someone under-qualified if they like them enough.

Here's a scenario to illustrate this point. Imagine you are the owner of a start up fashion company and you’re looking for a mid level developer to join the development team. You have been given two candidates for this role.

Candidate #1:

went to school for computer science,
knows the technologies you work with very well
has been a senior developer for a number of years.

However:

they don’t come across as very ambitious
they don’t know much about the industry
they aren’t very talkative during the interview.

Candidate #2:

has no professional experience as a developer
they have some knowledge of the technologies your company uses but not all.
they are at a junior level.

However:

they are obsessed with fashion.
have remarkable eye for product based on their design background.
an extrovert who gets along with everyone and very eager to learn.

Which candidate would you pick?

More often than not it’s the second candidate that gets hired.

Qualifications for candidate #1 look good on paper and of course you can’t go into any interview with absolutely no skill, however companies will overlook shortcomings of candidate #2 if they fit in with the company culture.

The best quote I heard during an interview is:

"We hire for attitude, we train for skill."

This could not be more true when it comes to being a developer.

5 - Don't just spam applications

Every candidate is unique, but illustrating that to a company is difficult through just an application. Give yourself the best chance by first doing the following:

making sure your CV is well written
your LinkedIn is up to date
for developers your Github should not be empty.

Every company finds their candidate through different ways. But give yourself the best possible chance by being proactive and putting yourself in positions to be found. Like when coding, reverse engineer your job search.

If I wanted to recruit a developer, where would you go to find a new hire one?

Coding meet ups - of course, everyone there probably codes.
LinkedIn - easy way to search for what I need.
Slack/discord channels for coding - good place to advertise a job for free.
Job fares - can speak face to face with candidates.
Websites where you can speak to companies directly - for example on hired or otta

If you’re currently looking a new job in coding, good luck!

Thanks for reading! Feel free to ask any questions in the comments.

Learning Javascript as a Python Developer

Kachi Cheong — Wed, 26 Apr 2023 10:35:48 +0000

My previous post Learn Python as a Javascript developer was so popular I decided to write the same thing but reversed.

As previously stated, I'm a Javascript and Python fullstack developer and like most self-taught developers, I started by learning HTML, CSS and Javascript first.

When I learned Python it was pretty easy as it is less restrictive than javascript. Python is great for handling backend data and creating simple scripts like web-scrapers.

Python is commonly associated with data analysis and javascript with web development. However, the introduction of Node JS and the popularity of javascript amongst developers means you should probably learn it. Even just being able to read it would serve you well.

If you're nervous about learning Javascript, remember that Javascript is a high level programming language. This means it is around the same level of difficulty to learn as Python.

In this tutorial, I'll outline the main differences between the two coding languages.

Set Up

If you're starting out, I recommend using a sandbox to test your code. Run JS is a very useful tool as it logs

Methods

The methods used in python and javascript are named differently.

Here are some examples of this:

In python:

len("Hello world") # Length of a string
arr.append("new string") # Add new item to end of list
arr.sort() # Sort a list

In javascript:

"Hello World".length; // Length of a string
arr.push("new string"); // Add new item to end of array
arr.sort((a, b) => a - b); // Sort an array

As you can see, the differences aren't huge and you of course don't need to remember all of them.

Here are some useful links for you to reference:

Type	Page
Strings	Methods
List/Array	Methods
Build in Functions	Keywords

Output

When you want to print something in the console. Just change print to console.log!

In python:

print("hello world")

In javascript:

console.log("hello world");

Comments

When leaving a comment or commenting something out change to # to //:

In python:

"""python comment"""

# Multi
# Line
# Comment

In javascript:

// javascript comment

/* multiline
javascript
comment */

Variables

Variables is where the difference really begin to show. For those new to Javascript, it may take some time to adjust.

Here are the main differences.

Javascript use camel casing and Python use snake casing.
Cases for python , const, let and var for javascript.

In Python:

my_example = "hello world" # basic variable
MY_EXAMPLE = "hello world" # Red flag to not change

In Javascript:

// Any of these 3 can be used.
var myExample = "hello world";
let myExample = "hello world";
const myExample = "hello world";

Let's quickly break is down.

var was used in all JavaScript code from 1995 to 2015, older browsers still only use var.
The let and const keywords were added to JavaScript in 2015.

The general rule is declare variables with const, UNLESS you think the value of the variable will change - in that case use let.

Here is an example:

let valOne = "hello javascript";
const valTwo = "This is javascript";

valOne = "hello world";
valTwo = "This is now new";

// valOne is now "hello world"
// valTwo is still "This is javascript"

The second value remains because it was declared using const

List and Arrays

Lists in Javascript are referred to as arrays, similar to variables it must be declared with a const or let

In Python:

my_list = [1, 3, 5]

In Javascript:

const myList = [4, 5, 6];

Functions

Python uses def followed by a colon : for their functions:

def foo(str):
    print(str)

Javascript uses curly braces {} and function (or an arrow function):

function foo(str) {
  console.log(str);
}
// OR an Arrow Function

const foo = (str) => console.log(str);

Unlike python, javascript is not a language which changes due to indentation. Although it is highly recommended that you indent your js code for readability, it is not a deal breaker and it won't stop your function from working.

If you use an arrow function, it must come before it's usage. This does rule not apply a regular javascript function.

arrTestFunc();
// will throw an error saying "arrTestFunc" has not been declared.
regTestFunc();
// 'hello world' will be consoled'

const arrTestFunc = () => console.log("hello world");

function regTestFunc() {
  console.log("hello world");
}

If Statements

In Python just uses colons : after each condition and an indented code block. Statements are separated by a elif and else:

if condition_one:
  print("condition 1 met")
elif condition_two:
  print("condition 2 met")
else:
  print('else condition')

In Javascript wrap the condition in parenthesis () and the output for the condition in curly braces {}. Each condition can be separated with else if or else:

if (condition1) {
  console.log("condition 1 met");
} else if (condition2) {
  console.log("condition 2 met");
} else {
  console.log("else condition");
}

Logical Operators

When declaring conditions, we use the following:

Python	Javascript
`or`	\|\|
`and`	&&
`not`	!condition

In Python:

if condition1 or condition2 # ||
if condition1 and condition2 # &&
if not condition ## !condition

In Javascript:

if (condition1 || condition2) // or
if (condition1 && condition2) // and
if (!condition) // is not

Experiment with this in a sandbox as it can be confusing at times not using or, and and not.

For Loop

In Python we replace that logic with in range(x).

In Javascript, you are required to declare a variable and increment it using the for loop.

in Python:

for i in range(5):
    print(i)

In Javascript:

for (let i = 0; i < 5; i++) {
  console.log(i);
}

If you want to access an object or item in an Array:

In Python:

for obj in arr:
    print(obj)

In Javascript:

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

In this instance we're logging each item in array (list) by accessing each index starting at 0.

Types

Primitive data types represent the fundamental values that we can work with in a programming language. JavaScript has 6 types to Python's has 4.

Python data types: Integers (int), Floats (float), Booleans (bool), and strings (str).
JavaScript data types: undefined, Boolean, String, Number, BigInt, and Symbol.

To check types in javascript:

type(instance);

To check types in python:

typeof instance;

Imports

Importing files are pretty similar, you just have to swap the order of import and from.

In Python:

from django.db import models

In Javascript:

import React from "react";

One of the main difference is that you must export things in javascript, this is not automatic like python.

You can either declare a default export or export multiple things from one file as an object.

Here is an example:

// firstFile.js - export 2 functions

export const testFunc = () => console.log("hello world");
export function secondTestFunc() {
  console.log("hello world 2");
}

// secondFile.js - export 1 function by default
const uniqueFunc = () => console.log("hello world from another file");

export default uniqueFunc;

// index.js -

import { testFunc, secondTestFunc } from "firstFile.js";
import uniqueFunc from "secondFile.js";

Note: To avoid confusion, I imported named the import uniqueFunc from the secondFile but you name the import whatever you wish as it is the default import.

Classes

In Python, the constructor that initialises the new instance is called __init__. This method is called automatically when an instance of the class is created to initialise its attributes. It's parameters list defines the values that we have to pass to create the instance. This list starts with self as the first parameter.

In JavaScript, the constructor method is called constructor and it has a parameters list as well. Javascript uses curly braces {} and Python uses colons :.

Class format

In Python:

class Person:
  def __init__(self, name, age):
    self.name = name
    self.age = age

In Javascript:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

Assign value to a Class

In Python:

self.attribute = value

In Javascript:

this.attribute = value;

Create Class Instance

In Python:

person_one = Person("John", 18)

In Javascript:

personOne = new Person("John", 18);

Summary

The honest truth is learning javascript as a python developer is harder the other way round. But if you have a good level of python, all you need to do is wrap your head around the usage as the logic is pretty much the same. The goal of this tutorial is to show you the subtle differences between python and javascript. The best way to learn is practice. Play around with a sandbox and write some basic code in javascript.

A good way to practice is trying solve a few problems in Javascript on Code Wars.

Thanks for reading and Good Luck on your coding journey!

What is HTML and how much HTML do I need to know?

Kachi Cheong — Thu, 29 Dec 2022 12:13:34 +0000

HTML (Hyper Text Markup Language) is the foundation of each webpage. It is essentially the skeleton of any webpage. Anyone who wants to be a frontend developer will need to know it.

In total there are over 100 html tags and when writing html files you'll only use about 30% of them on a regular basis. It is important to clarify that you don't need to remember every html tag off the top of your head.

In this article I'll outline the most frequently used HTML tags. Which I've split into 6 sections:

Page Tags
Body Tags
List Tags
Form Tags
Table Tags
Embedded Tags

Page Tags

Page tags are used tags used to outline the format of your page. Much like a human skeleton, html tags can be divided into different sections which indicates where they should sit on a page. Below are the most commonly used page tags.

HTML TAG	Description
`<html>`	Defines the root of an HTML document
`<head>`	Contains metadata/information for the document
`<title>`	Defines a title for the document
`<body>`	Defines the document's body
`<main>`	Specifies the main content of a document
`<footer>`	Defines a footer for a document or section
`<header>`	Defines a header for a document or section
`<link>`	Defines the relationship between a document and an external resource (most used to link to style sheets)
`<style>`	Defines style information for a document
`<script>`	Defines a client-side script
`<noscript>`	Defines an alternate content for users that do not support client-side scripts

Here is a common layout you're likely to see for a html page.

<html>
  <head>
    <link rel="stylesheet" href="./styles.css" />
    <script src="./script_1.js"></script>
    <style>
      body {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <header>Header</header>
    <main>Main</main>
    <footer>Footer</footer>
    <script src="./script_2.js"></script>
    <noscript>No javascript for this page</noscript>
  </body>
</html>

Body tags

These are the most common tags you'll see inside of a body tag. They are used to display the text:

HTML TAG	Description
`<div>`	Defines a section in a document. `<section>` can also be used for larger sections
`<h1>`	Defines HTML headings and size depends on `h(number)`. Can select between `<h1>` and `<h6>`
`<p>`	Defines a paragraph
`<b>`	Defines bold text. `<strong>` can also be used.
`<small>`	Defines smaller text
`<br>`	Defines a single line break
`<button>`	Defines a clickable button
`<i>`	Defines a part of text in an alternate voice or mood. `<em>` can also be used
`<a>`	Defines a hyperlink
`<s>`	Defines text that is no longer correct

Here is an example of all of these tags in use:

<body>
  <h1>Page Title</h1>
  <h2>Sub Title</h2>
  <div>
    <p><b>Bold Text</b></p>
    <p><small>Small Text</small></p>
    <p>
      Line One <br />
      Line Two
    </p>
    <p><i>Italic Text</i></p>
    <a href="https://www.google.com/" target="_blank">Google Link</a>
    <button>Click Me!</button>
  </div>
  <script src="./script_2.js"></script>
  <noscript>No javascript for this page</noscript>
</body>

Lists Tags

For a list you'll use either <ol> or <ul> with each bullet point wrapped in a <li>

HTML TAG	Description
`<ol>`	Defines an ordered list
`<ul>`	Defines an unordered list
`<li>`	Defines a list item

Here is an example of both in use:

<body>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
  </ul>
  <ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ol>
</body>

Form Tags

Forms are a bit trickier than the previous html tags as input has multiple types. Lets start by breaking down the tags

HTML TAG	Description
`<form>`	Defines an HTML form for user input
`<textarea>`	Defines a multiline input control (text area)
`<input>`	Defines an input control. See below for further explanation
`<select>`	Defines a drop-down list
`<option>`	Defines an option in a drop-down list

Input Types

I won't cover every input type, I'll go through the most common one's you're likely to see on a html page.

Type name	Description
checkbox	Checkboxes let a user select ZERO or MORE options of a limited number of choices.
color	used for input fields that should contain a color.
date	used for input fields that should contain a date
email	input fields that should contain an e-mail address.
file	a file-select field and a "Browse" button for file uploads
number	for number inputs only
radio	enables users to only select one of the following fields
range	defines a slider control for entering a number a rough number important
tel	for telephone number inputs
text	for basic text strings
time	for time selection
url	used for input fields that should contain a URL address

Example

Here is a basic form with multiple input types:

<form>
  <label for="name">Name:</label>
  <input type="text" />
  <br />

  <label for="age">Age:</label>
  <input type="number" />
  <br />

  <label for="start">when did you start coding?</label>
  <input type="date" />
  <br />

  <label for="image">Image:</label>
  <input type="file" />
  <br />

  <div>
    <p>Favourite Language:</p>
    <br />
    <input type="radio" name="fav_language" value="HTML" />
    <label for="html">HTML</label>
    <input type="radio" name="fav_language" value="CSS" />
    <label for="css">CSS</label>
    <input type="radio" name="fav_language" value="JavaScript" />
    <label for="javascript">JavaScript</label>
  </div>

  <div>
    <p>Would would you like to learn next?</p>
    <select>
      <option>Ruby</option>
      <option>Python</option>
    </select>
  </div>

  <div>
    <p>What have you learnt so far?</p>
    <textarea placeholder="What have you learnt so far?"> </textarea>
  </div>
</form>

Table Tags

These are the tags used for displaying tables:

HTML TAG	Description
`<table>`	Defines a table
`<caption>`	Defines a table caption
`<thead>`	Groups the header content in a table
`<tbody>`	Groups the body content in a table
`<tfoot>`	Groups the footer content in a table
`<tr>`	Defines a row in a table
`<th>`	Defines a header cell in a table
`<td>`	Defines a cell in a table

Tables are not the easiest thing to wrap your head around. But the basic rules are as follows:

The entire table should be wrapped inside of <table> tags.
A <caption> can be used if you need a table title.
<thead> is used for the first row <tbody> used for the other rows.
Every row is wrapped in <tr> and each column use wrapped in a <td> (or <th> for the <thead> row).
If you want a final table row for things such as total or summaries use <tfoot>.
By default tables do not have any styling so they should be added using CSS

Example

Here is an example of a table using HTML tags.

<table>
  <caption>
    Example Table
  </caption>
  <thead>
    <tr>
      <th>-</th>
      <th>A</th>
      <th>B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>A1</td>
      <td>B1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>A2</td>
      <td>B2</td>
    </tr>
  </tbody>
</table>

Embedded tags

Embedding is used to add pictures, audio and videos to your html page. These tags require a source file.

Here is a list of commonly used tags for embedding:

HTML TAG	Description
`<source>`	Defines multiple media resources for media elements (`<video>` and `<audio>`)
`<img>`	Defines an image. You can also use `<video>` and `<audio>`
`<embed>`	Defines a container for an external application
`<iframe>`	Defines an inline frame

I won't give examples of these specific tags cause they vary a lot. But when you are comfortable with the other aspects of HTML, play around with them.

Summary

The most important tags are the ones outlined in this article. For those new to coding, don't spend too much time trying to remember every tag that exists, your time can be spent elsewhere. Priorities learning CSS and Javascript once you've understood the fundamentals of HTML.

Thank you for reading, I hope this tutorial helps!

A full list of html tags can be found here.

Hapi Js: Part 1 - How to make a Hapi Js server in 10 minutes!

Kachi Cheong — Mon, 01 Aug 2022 08:48:34 +0000

Hapi Js is a powerful and robust open-source node JS framework for developing Json Api. Hapi JS is one of the most preferred frameworks for node Js due to it's well-developed plugin system.

We'll be making a Hapi Js server from scratch using Node Js.

Installation

In order to follow this tutorial you will need to following have Node installed - ideally at the LTS (long term support) version.

Run the following command on your terminal to check if you have node installed:

node --version

In this tutorial, I will be using Visual Studio Code as the text editor and Postman for the HTTP requests, but feel free to use whichever tools you want.

Set up

Let's start by making running the following commands:

mkdir hapi-tutorial
cd hapi-tutorial
npm init -y

What did we just do?

Creates a folder called hapi-tutorial.
Should contain a file titled package.json file with the default values.

Now we have our package.json file, let's install Hapi Js by running the following command in our terminal:

npm i @hapi/hapi

Your package.json file should now look something like this:

{
  "name": "hapi-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@hapi/hapi": "^20.2.2"
  }
}

Now we're ready to start creating our project!

Adding our files

Next we'll be creating 3 files: an index.js, a server.js and a router.js file.

Let's do that by running the following command in your terminal:

touch index.js router.js server.js

Router.js file

Traditionally, you'll start from the index.js file but for this tutorial, we'll start with the router.js file.

Add the following code to your router.js file:

const router = [
  {
    method: "GET",
    path: "/",
    handler: (request, h) => {
      return "Hello World!";
    }
  }
];

module.exports = router;

What did we just do?

We've added a router array which will store all of our endpoints. Each endpoint must contain the following:

Method: In our case it is (GET).
Path: We're using / as we're just using the default path for now.
Handler: This handles our functionality. The first parameter is the request, which you access arguments such as body or params. The second parameter, h is the response toolkit, which is an object with several methods used to respond to the request.

Server.js file

Let's add the following to our server.js file:

const Hapi = require("@hapi/hapi");
const router = require("./router");

const server = Hapi.server({
  port: 8000,
  host: "localhost"
});

router.forEach((path) => server.route(path));

module.exports = server;

Let's break this down what we've done:

We've imported Hapi and initiated our server.
We've set our port to 8000 and host to "localhost".
We've then imported our router and created a route for each path .

Index.js

const server = require("./server");

(async () => {
  await server.start();
  console.log("🚀 Server listening %s/ 🚀", server.info.uri);
})();

Let's break this down what we've done:

We're importing our server from server.js
We're creating a self calling async function.
When the server starts, it will log the server endpoint.

So let's run our app to make sure. Let's just run this command in our terminal:

node index.js

If everything has gone according to plan, we should see the following on our terminal:

🚀 Server listening http://127.0.0.1:8000/ 🚀

Now clicking on this link http://127.0.0.1:8000 should return "Hello World!"

Adding a controllers file

Controllers are the way we prevent our router file from getting cluttered.

Lets start by creating our controllers directory and our first controller:

mkdir controllers
touch controllers/events.controllers.js

We'll call our first controller events.controllers.js, add the following code into our events.controllers.js file:

const events_db = [];

const getEvents = (request, h) => {
  return events_db;
};

const postEvent = (request, h) => {
  events_db.push(request.payload);

  return "Event Created!";
};

module.exports = {
  getEvents,
  postEvent
};

What did we just do?

For now we're using an empty array named events_db to store our data.

The GET request will return anything currently stored in the array.
The POST request will push data into this array.

Update our router

Now let's update our router.js file:

const { postEvent, getEvents } = require("./controllers/events.controllers");

const router = [
  {
    method: "GET",
    path: "/",
    handler: (req, h) => {
      return "Hello World!";
    }
  },
  {
    method: "POST",
    path: "/post_event",
    handler: postEvent
  },
  {
    method: "GET",
    path: "/events_list",
    handler: getEvents
  }
];

module.exports = router;

Making our requests

Let's try and make a POST request to http://127.0.0.1:8000/post_event with the following data:

{
  "name": "test event",
  "adultsOnly": false,
  "attendees": 100,
  "description": "test description"
}

A successful POST request should return this response:

'Event Created!'

Finally a GET request to http://127.0.0.1:8000/events_list should return the response:

[
  {
    "name": "test event",
    "adultsOnly": false,
    "attendees": 100,
    "description": "test description"
  }
]

If you restart your server, this data should be gone as we are only temporarily storing it in an array.

And that's all she wrote! Thanks for reading!

The full repo for this tutorial can be found here.

Writing cleaner react code

Kachi Cheong — Sun, 31 Jul 2022 13:49:09 +0000

As a developer, you'll often hear the phrase Clean Code. So what does it mean? Clean Code is writing code that is D.R.Y (don't repeat yourself), understandable and maintainable. This is a skill that is crucial for every developer to master.

Inexperienced react developers fall victim to repetitive code when their projects scale. So here are some good practices for React!

1 - Self Closing

Avoid using react tags more than once.

For Example:

<Example firstArg="example arg" secondArg="second arg"><Example>

Even if they have a child property like this:

<Example>
  <h1>Text</h1>
</Example>

You can add it as a children argument.

<Example children={<h1>Text</h1>} />

2 - Choosing the correct function type

Use Arrow functions

Avoid using functions. In react, you'll be using variables (for example const, let or var) more often than not, so for the sake of consistency, use arrow functions.

Avoid using this.

function ExampleFunction() {
  return <h1>Hello world</h1>;
}

Arrow functions allow you to skip a return statement for one line codes. Here is the same code as an arrow function:

// Single Line
const ExampleFunction = () => <h1>Hello world</h1>;

// Multi Line
const ExampleFunction = () => (
  <>
    <h1>Hello world</h1>
    <h2>Hello example Code</h2>
  </>
);

Does it need to be a function?

Not every block of code needs to be a function. In fact if you're not passing an argument and all that is being returned is a JSX element, why not just make the code block a variable?

For example:

const ExampleFunction = () => <h1>Hello world</h1>;
const exampleCode = <h2>Hello example Code</h2>;

const codeBlock = (
  <>
    <ExampleFunction />
    {exampleCode}
  </>
);

3 - Deconstruction

When you pass arguments through a function, it will look like this:

<HelloFunction firstName="John" lastName="Doe" age={18} />

When accessing those argument properties, you'll normally do something like this:

const HelloFunction = (prop) => {
  return (
    <h1>
      Hello my name is {prop.firstName} {props.lastName}, I am {props.age}.
    </h1>
  );
};

But by deconstructing the arguments, you avoid the repetition of props.. Here are some examples:

// Option 1 - deconstruct in the function argument
const HelloFunction = ({ firstName, lastName, age }) => (
  <h1>
    Hello my name is {firstName} {lastName}, I am {age}.
  </h1>
);

// Option 2 - deconstruct inside function
const HelloFunction = (props) => {
  const { firstName, lastName, age } = props;

  return (
    <h1>
      Hello my name is {firstName} {lastName}, I am {age}.
    </h1>
  );
};

4 - Spreading arguments

Your return statement should be as short as possible. Here is an example of a component function:

<ExampleFunction
  firstName="John"
  lastName="Doe"
  age={18}
  address="123 example road"
  student={true}
/>

Instead of writing all of a component function's arguments, you can declare them before and spread them like so:

const exampleArg = {
  firstName: "John",
  lastName: "Doe",
  age: 18,
  address: "123 example road",
  student: true
};

<ExampleFunction {...exampleArg} />;

By doing this, you'll reduce the size of the files return statement.

5 - Utilize Map functions to avoid repeating.

You should avoid repetition in your code whenever possible, let's say you have a number of tabs like this:

const myTabs = () => (
  <Tabs>
    <Tab title="First Title">
      <h1>First content</h1>
    </Tab>
    <Tab title="Second Title">
      <h1>Second content</h1>
    </Tab>
    <Tab title="Third Title">
      <h1>Third content</h1>
    </Tab>
  </Tabs>
);

Each Tab in the example above has a title and child argument. To represent the data, we can just create an array of objects for each tab. By doing this, we can map function over that object and only return the unique values for each tab.

Here is an example of how to refactor it:

const TabsData = [
  {
    title: "First Title",
    content: <h1>First content</h1>
  },
  {
    title: "Second Title",
    content: <h1>Second content</h1>
  },
  {
    title: "Third Title",
    content: <h1>Third content</h1>
  }
];

const displayedTabs = TabsData.map(({ title, content }, index) => (
  <Tab title={title} key={index}>
    <h1>{content}</h1>
  </Tab>
));

const myTabs = () => <Tabs>{displayedTabs}</Tabs>;

This reduces errors when having tens or hundreds of tabs cause we're only changing the unique values. It also becomes a lot easier to read.

6 - Remove unnecessary files, lines and packages

Imports

If you're not using an import, comment out or remove it from your file. When you run npm start, clear any compiler warnings for example:

Compiled with warnings.

[eslint]
src/App.js
  Line 1:8:  'logo' is defined but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in [eslint]
src/App.js
  Line 1:8:  'logo' is defined but never used  no-unused-vars

webpack compiled with 1 warning

When deploying, dead imports can become a nightmare, so remove or comment them out early.

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.75:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

Packages

If you are not using a specific package, uninstall it:

npm uninstall package-name

This reduces the size of your project and which helps when collaborators clone/fork your project.

7 - Maintain a good folder structure

When your project begins to scale, it becomes harder to keep track of maintaining a good structure allow you and your colleagues to keep track of where everything is.

Here is my preferred folder structure:

Folders

components - This directory should store all your global reusable components such as tabs, tables and modals
data - This directory should store static data (for example, your pages data)
pages - This directory should store all the pages for your project
services - This directory should store all of your data services such as api fetches
styles - This directory should store all of your global stylesheets
tests - This directory should store all of your tests

Summary

I hope you've learned something from these tips, even if you take just one of these points on board, then you're already improving by 1%. Remember these are just recommendations, if you're coding as part of a team make sure you check what they consider as acceptable practices.

Happy coding!

Landing your first coding job

Kachi Cheong — Mon, 25 Jul 2022 09:35:09 +0000

For those who choose to switch to a career in coding, the one thing you're told often at the start is:

"Companies are always looking for developers"

"Developers get paid a lot".

Both statements are true. What they don't tell you is getting your foot in the door is very difficult. If you're looking for a coding job right now, you'll be competing with recent graduates with computer science degrees. For those who have computer science degrees and no commerical experience, it's also tough for you because most companies want developers with experience not graduates who are green.

My Journey

Before coding, I worked as a recruiter. This experience offers me a slightly different perspective on job hunting. Despite this advantage, my job hunt was a much longer than it needed to be.

However, once I made a few minor adjustments, in the space of 2 weeks I:

Began interviewing with 4 separate companies
Got to the final interview stage for all 4 companies.
Given 3 job offers (all of which met or exceeded my salary expectations).

In this article, I'll explain the lessons I learned during my job hunt and provide tips on how to avoid the mistakes I made.

1. Your CV and LinkedIn are more important than your Github

Do not become obsessed with having an amazing Github portfolio.

How much time do you spend exploring repos on Github? Most people won't. Most companies do not have time to scan through multiple projects and code to see if you are a viable candidate. By no means am I saying do not have a Github, you 100% need to have one. Having projects with good README files, should be more than enough.

Having a good LinkedIn profile along with a good CV is better than having a flawless Github profile. Your CV and your LinkedIn profile should have the same information. To avoid career gap questions, remove only include the years on each of your experiences.

On you LinkedIn profile, complete some of the skills tests for your coding languages. The answers for the tests can be found online. When recruiters or companies search, they will filter for candidate who have passed particular skills tests (for example python or javascript), and it will make you stand out.

My experience

I found success when I kept my CV to one page. For my LinkedIn and CV, I removed any experience unrelated to coding. A fresh start showed companies and recruiters exactly what I was looking for. This doesn't mean you need to do the same but if you work experience includes customer service (for example waiting or retail), I personally don't think it's necessary to include it.

I used FlowCV to write my CV. I highly recommend it, It's free and easy to use. For LinkedIn try and visit the profile of other coders to see the best practices.

2. Learn full stack development

Regardless of your preference for front or backend, learn the basics of both. You can specialise in one but learning both will greatly increase your odds of landing a job.

If there is a frontend developer job, why would they hire someone who only knows frontend over a person who knows both? A full stack developer can eventually switch over to the frontend or backend when their colleague is on holiday, absent or quits.

For frontend, I recommend at least having a fundamental understanding of react., it's the most popular library for frontend development.
For backend, I recommend having a fundamental understanding of Express Js. It's one of the most commonly used frameworks for the backend in javascript and it's very easy to learn. I also recommend learning Postgres and MongoDB for data storage.

Remember a fundamental understanding is all you need, learn how to read the code. You do NOT need to be a master of it.

My experience

I learned a few node js backends cause a lot of companies now want all of their code to be written in one language, that language being javascript. Node Js backends such as Express, Koa Js, Nest Js and Hapi Js are all VERY similar. Learning all of them meant I cast a wider net when it came to finding a full stack job.

3. List projects as experience

No one wants to hire someone with no experience. Would you as an employer want to hire someone who has never done the one thing you're hiring them to do? It's a big risk. Remember that you have experience. Every project that you've done is experience. List even the smallest projects that you completed as experience and explain your role during that projects.

You've have:

faced problems during coding.
overcome issues and you learned something along the way.
built websites or servers from scratch

Try to do some pair programming and work on projects with friends or experienced coders. This will help you gain knowledge of how teams work. Create an organization page on Github and a company page on LinkedIn to display your project.

My experience

I personally had some freelancing experience, so when quizzed about the projects on my CV I didn't have to lie about having commercial experience. But if you don't have any commercial experience at all, explain your projects as experience rather than personal projects.

4. Companies love female coders

Unfortunately, for men (including myself) this isn't something you can control. One thing I noticed is companies LOVE women in tech. That's not to say that companies will hire any women who applies but there is an unwritten advantage for women in tech.

Coding (and tech in general) is a male dominated field, companies love diversity as it offers a different perspective on their products. Women are also more likely to be extrovert and this contributes to a better and more balanced team environment.

My Experience

As a man, I didn't have this advantage, but I know a lot of women who switched to coding as a career and found jobs very quickly. That's not to imply men won't find jobs, theres more than enough jobs to go around right now!

5. Find ways to skip recruiters

Anyone who has written a HTML tag will get a call from a recruiter. Tech Recruiters exist because the jobs exist. As a former recruiter, I can tell you I've called candidates who had terrible CVs and experience in the hopes they had somewhat of a good attitude.

Now don't get me wrong not all recruiters are terrible but most recruiters don't know anything about coding. Recruiters won't appreciate your ability to style a component, build a server or write complex deployment logic. For this reason recruiters will avoid sending their clients any candidate they don't think looks good on paper. Do not waste all your time waiting for recruiters to get back to you, most of them won't.

The best chance for you to land a job is speaking directly to company CTOs (chief technical officer) or project managers. This will greatly increase your odds as you can display your passion and using technical programming words in conversations.

Find websites that allow companies to contact you directly. Here are three companies that worked very well for me.

Hired - This platform allows companies to find candidates that are being promoted once their profile is complete. This platform also has skill badges for almost every type of coding. If you can only sign up to one platform choose this one.
Otta - This platform is amazing cause it provides a lot of information on the companies you are applying for. Otta provides everything from salary for particular roles, company size, tech stack and response rate to applicants. Companies can also contact you directly via message to arrange interviews.
Snap Hr - This platform is similar to the others and has a one click apply button. Again, you can let your skills shine directly to companies through your profile whilst also seeing what the company has to offer.

My experience

After speaking to about 15 recruiters, 2 of them manage to get me interviews because I built I good rapport with them. In fact, 2 of my 3 job offers came from recruiters. So I'm not saying avoid them at all costs, what I'm saying is try and speak to companies directly through platforms like Hired, Otta, Snap Hr or LinkedIn.

Hired - My company reached out to me through hired and within 10 days I got my offer. During the process, my company asked me to complete a hired skills test for fullstack development, which I scored 92%. What I realised is that once you complete the assessments on hired, your profile becomes more appealing to companies. My first interview request came 2 weeks after my profile was being promoted but I received an additional 2 interview request (in a couple days) after I completed my skills test.
Otta - I got 2 interview requests from Otta, by that point I had already accepted my offer from hired. Replies from Otta are very quick and you'll find that companies will want to give a reply on this platform as they don't want to hurt their response rate score.
Snap.hr - I never got an interview from this platform but I know a lot of people who have found jobs from it. So don't let the fact I didn't utilize it to its full potential deter you from using it.

6. Prepare for your interviews

There is only so many things you can control during the interview process. Be prepared, have a good attitude and most importantly remember your value. Don't come across as desperate or arrogant. The goal of an interview is to make the interviewer like you, their willingness to hire you is based on your likability as much as it is your qualifications.

Here is my article on How to ace a coding interview. In this article I go into more detail about the process and how to give yourself the best chance.

My experience

Here is my interview processes. I interviewed with 4 companies:

One company I got through hired.
One company I got through a slack channel advertisement.
Two companies I got through separate recruiters.

I got the the final interview stage of all 4 companies:

One company had two interview stages: a general interview and a technical/culture interview).
One company had four interview stages: a general interview, take home test followed by pair programming, a second pair programming session and a final culture fit interview. (This is the company where I failed at the final stage).
Two of them had three stages: a general interview, technical/live coding and a culture fit interview.

I got 3 offers from 4 companies. You might be wondering how I was so successful during this process, the answer is I predicted which questions I'd be asked and prepared answers accordingly. Demonstrate knowledge but remain humble and open to collaboration throughout.

7. Understand your value

Every single interview I've been in, I've wanted to impress the interviewer. But one thing people don't often understand is that interviewers want to impress the interviewees too. I've conducted hundreds of interviews and the candidates I was most excited about knew their own worth.

When asked "are you interviewing for any other companies?", never say no. Even if you aren't interviewing with anyone else, it instantly increases your desirability. Companies do not want the developer who has been siting on the shelf for months, they want the candidate that every company would be lucky to have.

If a company knew you weren't interviewing with anyone else, what do you think their response would be when asked:

"How long will it take you take to get back to me with a response?"

They can reply with any number they want - a day, week, month or year. They can interview other candidates and if they can't find anyone, they'll get back to you.

But how about asking this instead?

"Thank you for your time today! How long will it take for you guys to get back to me? I have some final stage interviews scheduled and I really don't want to miss out on a chance to join your company. Would it be possible to get back to me within the next day or two?".

This question was warrants a very different response. The suggestive language implies that you are in demand, if the company do not adjust their schedule or speed up their timeline for you, they might regret it.

My experience

After each interview during my job hunt, I've walked away from each of them thinking they would be lucky to have me. The reason I was able to feel this was because I understood my value. This doesn't mean you don't have to do any work, in fact I made sure I acknowledged what each company offered:

One company offered great career progression.
One company offered great company perks.
One company had an amazing CTO who would be great to work under.

I also explained what I had to offer - which was a keen attitude to learn, being a team player and great coding skills. By recognising my value, I got the offers I wanted.

8. Continue learning

Don't spend all your time job hunting, spend maybe 2-3 hours a day. Spend some time sharpening your skills and learning new ones. You'll notice a pattern when reading job descriptions. Maybe all the companies you want to apply for need someone with experience in MongoDB? Well then start learning MongoDB. Don't let your skills plateau.

My experience

I spent a lot of my time revising the fundamentals of javascript. I made sure I could solve any technical question thrown at me during my technical interviews. So I reenforced my knowledge on algorithms and data structures. Although they didn't pop up during my interviews, it doesn't mean they wont pop up in yours!

Summary

Getting your first coding job isn't necessarily about being the best, it's about making the best impression. If a company is open to speaking to you, then they either have a position they need to fill or they like you enough to potentially hire you. Either way understand your value. Display your skills on job site profiles, LinkedIn and your CV.

Good luck on your Job hunt!

Acing a coding interview

Kachi Cheong — Sun, 24 Jul 2022 14:55:00 +0000

If you're reading this, it means you're either looking for a new role or considering looking for a new role. This article will be specific to coding but the principles can be applied to any sector.

My name is Kachi and I am a former recruiter turned full stack engineer. Whilst applying for Jobs, within a 2 week period, I interviewed with 4 companies, got to the final stage interview with all 4 and got 3 job offers.

This article will offer a little bit of a different perspective on coding interviews and I hope it helps you land your dream coding job.

Landing the interview

Now this article isn't so much about landing interviews, this article is about preparing you for the interviews you've already scheduled.

When you get an interview, it means a few things:

There is a position available.
They hope you can fill that role.
They will convince you why it's right role for you.

No one spends up to an hour of their day talking to someone if you weren't interested in hiring them. If you have an interview, it means there's something about your application or CV that they like. You've already impressed them, so during the interview process, it's time to prove them right for giving you a chance.

During one of my interview, a CTO said one thing that stuck with me:

"We hire for attitude, we train for skill."

Most companies will hire you if they like you, not if they think you're qualified. Wouldn't you rather work with someone who you like over someone who is skilled with bad attitude? Don't get me wrong, you can't have no skill what so ever, but the fact you have an interview means you've so what met their requirements.

Coding jobs generally require 3 interviews stages: A general interview, technical interview and a final stage interview. Of course some companies may have 2 and others may have 4 or more, but the industry standard is three.

If a company only has one stage, this is a huge red flag as it implies they are impulsive, how much can you learn about someone from one meeting?.

The general interview

During the general interview (first stage), you'll speak to either the hiring manager, technical lead or CTO about your experience.

Conduct during an interview

Always thank you interviewers for their time during the start:

"I know you must be super busy. So honestly, from the bottom of my heart, I appreciate you making time to speak to me today."

During the interview try not be nervous and robotic, speak to them like you're already a colleague or friend. Do not answer a "how are you?" with a "I'm fine thanks, you?". Interviewers do not like candidates who they have to force an answer out of. Making the conversation less formal will make the interviewer like you more. Maintain eye contact and a smile when possible, these traits signal confidence to you interviewer.

Here is an example of a more relaxed answer:

"Honestly, a little nervous (haha) but excited. Yeah, it's monday today, not my favourite day of the week, but there's sun, so can't complain! It'll be a good week, we're starting it right! How was your weekend by the way, did you get up to much?"

Use suggestive language as if you're already part of the team. This will help the interviewers imagine how it would be to work with you. For example:

"When I start, what projects would we be working on?"

"I look forward to working under you. Honestly, based on this conversation alone I know I'm going to learn so much in this role".

Interview questions

Do not go into this interview and improvise, predict the questions you'll be asked and have answers prepared. Here are questions that you should expect to come up.

Tell me something about yourself.
Why do you want to work here?
What is your greatest strength?
What do you know about this company?
What is your greatest accomplishment?
Where do you see yourself in 5 years?

You will also have a chance to ask the interview questions and skipping this chance will hurt your odds at getting the role.

Here are two questions I used very often and found them to receive very positive responses.

"With the way coding constantly updates and evolves, one thing I want to improve on is keeping up to date with new technologies. As a developer with years of experience, how do you navigate this? How do you decide what new technologies are useful and which ones you should ignore?"

Why ask this?

This question not only shows you are a keen learner of new technologies but you're also humble when it comes to learning. This question allows the interviewer to share their knowledge (which everyone loves to do), whilst also imagining how it would be to teach and work with you.

"Who is the last person you hired, why did you decide to hire them? and how are they getting on right now?"

Why ask this?

This question gives the interviewer a chance to explain the type of candidate they want to you as they've already given this person the job. It also gives the interviewer an opportunity to sell their company to you and why you should work there.

At the end, thank the interviewer:

Thank you once again for your time, I'm very excited to hear back from you regarding the next stages.

Technical interview

During this second stage, you'll be quizzed on your programming languages or have a live coding session where you will pair program with the interviewer.

Technical questions

Before your interview make sure you've searched the most common questions asked about your language (for example, most common javascript interview questions).

If for example, your programming language is javascript you might be asked the following:

The difference between a map and filter function.
The difference between a scope and function.
Name the different primitive values in javascript.

Live coding session

A live coding session is where you will pair program with a member of your future team or CTO. The aim of this exercise is to see how easy you are to work with, not how quickly you can finish the exercise.

Always keep the goal of the test in mind, they want to see your collaboration skills as much as it is your coding skills. If the interviewer is quiet, ask questions such as:

"I think I'm along the right track, is this how you wanted me to solve the problem? or do you have any suggestions to improve this code?"

Make the interviewer engage as much as possible, ask them for help if you're stuck or ask them if you're able to use google.

I never finished one of my live coding session exercises during the allocated time but have never failed a technical interview. This is because I explained my thought process throughout and even asked questions to demonstrate I am open to external input.

Final Stage

The final stage is generally conducted by decision makers at the company. Depending on company size, you may find yourself speaking to the managing director, CTO or CEO.

You'll generally be asked questions to determine if you're the right fit. If you've made it this far, they've liked you enough to think you'll fit in. Most of the hard questions are out of the way. Just don't saying anything stupid.

There is a chance you're competing with other candidates for the role and you might want to prepare statements which will make you standout. In the time given, try and get the interviewers to like you as much as possible. Ask them questions about the company and their particular roles. Try discuss personal interests whenever possible to improve the rapport, decision makers will hire people they like over people that are qualified.

Extra Tips

Here are tips that can be applied to every interview stage.

Remain positive throughout

Remember during an interview they are looking for red flags, do not give them any by saying anything that can be perceived as negative like:

"I hate debugging code, it takes so much time and effort"

"My last company was so toxic, they forced us to work late all the time without overpay."

Never look desperate

Never put the company on a pedestal, remember interviews are still a negotiation. Interviews are a negotiation between a company who have a role and a candidate who might be interested in accepting that role.

Try being a little indifferent and asking what the company can do for you. Questions like "what perks do you guys offer?" forces the interviewer to sell you on why you work at the company. There is a fine line of being indifferent and being uninterested so here is an example of both when ending an interview:

Indifferent:

"From what I've heard, the company looks great and I'd say of all the companies I'm interviewing with, this is the one that stands out right now. Im excited to see where we go from here."

Uninterested:

"Okay, interesting. Im interviewing with a few companies right now, so I guess we'll see how thing go."

Make the company feel good whilst also suggesting you have other options and they might need a little extra effort if they want you on their team.

Always say you interviewing with multiple companies

Even if it's not true, never say "no" when asked if you're interviewing with other companies. This is something they can never verify and companies don't want developers that have been left on the shelf. By making it known that you are interviewing with other companies, it signals you are desirable and introduces a fear of missing out on you. From personal experience, I found that companies will move up their timeline if you play on this fear.

When I got an offer from one company, the other three companies I was interviewing with all pushed up their schedules to conduct their final stage interviews. Now even if you are only interview with one, you can still get away with saying something like this during an interview (even during the first stage):

"So I'm expecting a job offer in the coming days from another company, but from speaking to you guys today, I'd really like to finish the interview process with this company. So how quickly can you guys get back to me with an answer? I'm not sure if I'd still be available if you guys don't get back to me within the next day or two."

Expected Salary

The question of salary might pop up during any of the three stages.

What is your salary expectations?

The longer you avoid this question, the better. As you progress through the stages, the amount they like you will increase. If they approach you through a platform such as Hired or Otta, make sure you've listed your salary expectations to the industry standard for your particular role.

Never start with the number you'll settle for. If you are willing to accept 40k, start the negotiations at 45k-50k. You also don't want to start too high cause you don't want to price yourself out of an offer.

Here is an example of how to answer this question:

"I am in discussions for a couple roles and the figures that are floating around are 45-50k. But my decision will be based on the role and project but these are expectations as far as salary is concerned."

Summary

Interviews are only as hard as you make them. Be prepared, have a good attitude and most importantly remember your value. Don't come across as desperate or like a show off. The goal of an interview is to make the interviewer like you. The willingness to hire is based on likability as much as it is qualifications.

Good luck, leave any questions you have in the comments or send me a message!

Learn Python as a Javascript developer

Kachi Cheong — Tue, 19 Jul 2022 08:15:56 +0000

As a coder, you should always be looking to expand your knowledge. The best way to do this is by learning different coding languages and frameworks.

I myself am a Javascript and Python fullstack developer and like most self-taught developers, I started by learning HTML, CSS and Javascript first.

Eventually I learned Python and found it very useful. Python is great for handling backend data and creating simple scripts like web-scrapers.

If you're nervous about learning Python, remember that Python is a high level programming language. This means it is around the same level of difficulty to learn as Javascript.

I would even argue it is easier to learn than javascript, and the transition from Javascript to python much smoother than the other way round.

In this tutorial, I'll outline the main differences between the two coding languages.

Set Up

Firstly, make sure Python is installed on your machine before you start.

You can check this by running this command in your terminal:

python3 --version

Alternatively, you can use a sandbox to test Python code.

Methods

The methods used in python and javascript are named differently.

Here are some examples of this:

In javascript:

"Hello World".length; // Length of a string
arr.push("new string"); // Add new item to end of array
arr.sort((a, b) => a - b); // Sort an array

In python:

len("Hello world") # Length of a string
arr.append("new string") # Add new item to end of list
arr.sort() # Sort a list

As you can see, the differences aren't huge and you of course don't need to remember all of them.

Here are some useful links for you to reference:

Type	Page
Strings	Methods
List/Array	Methods
Functions	Keywords

Output

When you want to log something in the terminal or browser. Just change console.log to print!

In javascript:

console.log("hello world");

In python:

print("hello world")

Comments

When leaving a comment or commenting something out change // to #:

In javascript:

// javascript comment

/* multiline
javascript
comment */

In python:

"""Python comment"""

# Multi
# Line
# Comment

Variables

There are a couple difference between Javascript and Python variables.

Javascript use camel casing and Python use snake casing.
const, let and var for javascript. Cases for python.

In Javascript:

var myExample = "hello world"; // global variable
let myExample = "hello world"; // scope variable
const myExample = "hello world"; // unchangeable variable (scope)

In Python:

my_example = "hello world" # basic variable
MY_EXAMPLE = "hello world" # Red flag to not change

Note: In python, every variable is mutable. There is no real way to prevent this. When writing code in python, changing the case of the variable can signal to other programmers that the variable should not be changed.

List and Arrays

There are a few differences between Javascript and Python arrays.

What we refer to as arrays in Javascript are called lists in Python.
Javascript use camel casing and Python use underscores.
const, let and var are used in javascript. Cases are used in python.

In Javascript:

const myList = [4, 5, 6];

In Python:

my_list = [1, 3, 5]

Functions

Javascript uses curly braces {} and function (or an arrow function):

function foo(str) {
  console.log(str);
}

const foo = (str) => console.log(str);

Python uses def followed by a colon : for their functions:

def foo(str):
    print(str)

If Statements

Javascript uses curly braces {} and parenthesis () for each condition separated by a else if or else:

if (condition1) {
  console.log("condition 1 met");
} else if (condition2) {
  console.log("condition 2 met");
} else {
  console.log("else condition");
}

Python just uses colons : after each condition and an indented code block. Statements are separated by a elif and else:

if condition_one:
  print("condition 1 met")
elif condition_two:
  print("condition 2 met")
else:
  print('else condition')

Logical Operators

When declaring conditions, we use the following:

Javascript	Python
\|\|	`or`
&&	`and`
!condition	`not condition`

In Javascript:

if (condition1 || condition2) // or
if (condition1 && condition2) // and
if (!condition) // is not

In Python:

if condition1 or condition2 # ||
if condition1 and condition2 # &&
if not condition ## !condition

For Loop

In Javascript, you are required to declare a variable and increment it using the for loop.

In Python we replace that logic with in range(x).

In Javascript:

for (var i = 0; i < 5; i++) {
  console.log(i);
}

in Python:

for i in range(5):
    print(i)

If you want to access an object or item in an Array:

In Javascript:

for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

In Python:

for obj in arr:
    print(obj)

Types

Primitive data types represent the fundamental values that we can work with in a programming language. JavaScript has 6 types and Python has 4 types:

JavaScript data types: undefined, Boolean, String, Number, BigInt, and Symbol.
Python data types: Integers (int), Floats (float), Booleans (bool), and strings (str).

To check types in javascript:

type(instance)

To check types in python:

typeof instance;

Imports

Importing files are pretty similar, you just have to swap the order of import and from.

In Javascript:

import React from "react";

In Python:

from django.db import models

Classes

Javascript uses curly braces {} and Python uses colons :.

In JavaScript, the constructor method is called constructor and it has a parameters list as well.

Class format

In Javascript:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

In Python:

class Person:
  def __init__(self, name, age):
    self.name = name
    self.age = age

Assign value to a Class

In Javascript:

this.attribute = value;

In Python:

self.attribute = value

Create Class Instance

In Javascript:

personOne = new Person("John", 18);

In Python:

person_one = Person("John", 18)

Summary

The goal of this tutorial is to show the subtle differences between javascript and python. The best way to learn is practice. Try rewriting some of your basic javascript functions in python.

A good way to practice is trying solve a few problems in python on Code Wars.

Thanks for reading and Good Luck!

The right way to structure your react router

Kachi Cheong — Mon, 18 Jul 2022 12:56:00 +0000

React Router Tutorial

People new to react generally don't know how to structure their routes.

Beginners and entry level developers will write something like this:

import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Profile from "./pages/Profile";
import Checkout from "./pages/Checkout";
import Login from "./pages/Login";
import Maps from "./pages/Maps";
import Settings from "./pages/Settings";
import Store from "./pages/Store";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/checkout" element={<Checkout />} />
        <Route path="/login" element={<Login />} />
        <Route path="/maps" element={<Maps />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/store" element={<Store />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

Although this is acceptable for small projects, when your project scales - this will become incredibly difficult to read.

So we're going refactor the code into this:

import "./App.css";
import { BrowserRouter } from "react-router-dom";
import Router from "./pages/router";

const App = () => {
  return (
    <BrowserRouter>
      <Router />
    </BrowserRouter>
  );
};

export default App;

It's cleaner, scalable and more readble. So let's get started!

Firstly create our React app in typescript by running the following commands in our terminal:

npx create-react-app router-tutorial --template typescript
cd router-tutorial

Create the Pages

We're only going to create two pages, Home and About.

Run the following commands in your terminal:

mkdir src/pages
mkdir src/pages/Home src/pages/About
touch src/pages/Home/index.tsx src/pages/About/index.tsx

What did we just do?

Created pages directory.
Created two directories inside of pages: Home and About.
Created index.tsx files for Home and About.

Add this to your pages/About/index.tsx file:

const About = () => {
  return (
    <div>
      <h1>About</h1>
    </div>
  );
};

export default About;

Add this to your pages/Home/index.tsx file:

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
};

export default Home;

This is pretty self explanatory, we've created two files which represent our pages.

Creating the types

Let create our types by running the following commands in our terminal:

mkdir src/types
touch src/types/router.types.ts

Now add this to the newly created types/router.types.ts file:

export interface routerType {
  title: string;
  path: string;
  element: JSX.Element;
}

What is happening?

Declare a type for each route:

title: this will be a string
path: this will also be a string
element: this will be a JSX.Element

Why declare types?

You'll see shortly that declaring the types will make sure each time we add a page object, it will follow a strict rule pattern and won't compile any errors.

Creating the Router

Now we're creating our router.

Run this command in your terminal:

touch src/pages/router.tsx src/pages/pagesData.tsx

Pages Data

Add to pages/pagesData.tsx:

import { routerType } from "../types/router.types";
import About from "./About";
import Home from "./Home";

const pagesData: routerType[] = [
  {
    path: "",
    element: <Home />,
    title: "home"
  },
  {
    path: "about",
    element: <About />,
    title: "about"
  }
];

export default pagesData;

What is happening?

We've imported our pages and types.
Added a title, path and element to each object.

Every time we want to add a new page, all we have to do is add a new page object into this array. The types will be strict so they must each contain a title, path and element.

Router File

Add to pages/router.tsx

import { Route, Routes } from "react-router-dom";
import { routerType } from "../types/router.types";
import pagesData from "./pagesData";

const Router = () => {
  const pageRoutes = pagesData.map(({ path, title, element }: routerType) => {
    return <Route key={title} path={`/${path}`} element={element} />;
  });

  return <Routes>{pageRoutes}</Routes>;
};

export default Router;

What is happening?

We're mapping over the pagesData.tsx file and for each object in our data, we are returning a route.

Update App File

Finally update the App.tsx:

import "./App.css";
import { BrowserRouter } from "react-router-dom";
import Router from "./pages/router";

const App = () => {
  return (
    <BrowserRouter>
      <Router />
    </BrowserRouter>
  );
};

export default App;

And we're all done! Thanks for reading.

Here is the Github repo.

Koa Js : Part 5 - how to connect a caching database to your Koa Js server

Kachi Cheong — Tue, 12 Jul 2022 13:39:00 +0000

Caching is the storing of data temporarily and retrieving data from a high-performance store (usually memory) either explicitly or implicitly.

Advantage: When using external api's, you may have a restricted number of calls or cost per api call. If your api data doesn't constantly update, this not only reduces the number of api calls made but also reduces the loading speed.

In this tutorial, we'll be storing data temporarily in our Koa JS server using node-cade.

Before you start this part, make sure you have read part 1 of this tutorial series as we're gonna be starting from there.

If you want to follow along, fork or clone part 1 before you continue.

Packages

Let's start by installing the packages that we need:

npm i node-cache axios

What are we installing?

node-cache - this is the package we'll use to store our data temporarily.
axios - this is what we'll use to fetch our data.

Middleware

We'll need to create middleware folder, a cache.js and a crypto.cache.js file, so run the following command in your terminal:

mkdir middleware
touch middleware/cache.js middleware/crypto.cache.js

Now let's add the following to the cache.js file located in the middleware folder:

const NodeCache = require("node-cache");
const shortCache = new NodeCache({ stdTTL: 60 * 15 });

module.exports = {
  shortCache,
};

What is happening?

We've just created a cache and named it shortCache, we've then set the time using stdTTL key. This key is measured with seconds, so in this case we've set 60 seconds multiplied by 15. Therefore, our cache is 15 minutes long. Keep that in mind moving forward.

We'll now add the following to our crypto.cache.js file:

const { shortCache } = require("./cache");

const cryptoListCache = (ctx, next) => {
  try {
    if (shortCache.has("crypto-list")) {
      return (ctx.body = shortCache.get("crypto-list"));
    }
    return next();
  } catch (err) {
    ctx.status = 500;
    console.log(err);
    throw err;
  }
};

module.exports = {
  cryptoListCache,
};

What is happening?

This cache will be used as middleware. If the cache has a key named crypto-list then it will return the value stored in the key. However, if there isn't then the middleware is skipped. This is important to note as later we'll be setting the key and storing a data in the cache.

Helpers

For our api data, we will be using this endpoint to get our crypto data.

We'll only be returning parts of the data so before we make the api call, let's create a helper function to manipulate the response data.

Run the following command:

mkdir helpers
touch helpers/crypto.helpers.js

This should return a directory named helpers which containing a file named crypto.helpers.js.

For each crypto object, we'll only be returning the following keys exchange_id, symbol, price, spread, change_24h, volume_24h and updated_at.

Copy the following code into the crypto.helpers.js in the helpers directory:

const cryptoRender = ({ markets }) => {
  return markets.map((crypto) => {
    const {
      exchange_id,
      symbol,
      price,
      spread,
      change_24h,
      volume_24h,
      updated_at,
    } = crypto;

    return {
      exchangeId: exchange_id,
      symbol,
      price,
      spread,
      "24hChange": change_24h,
      "24hVolume": volume_24h,
      updated_at,
    };
  });
};

module.exports = {
  cryptoRender,
};

This is what we've done:

Deconstruct the keys from each object.
Changed the keys which were underscore to camel case.
Returned only the fields we need from the data

Note: If the when passing a value, if the value has the same name as the key, you don't need to type it twice. For example, we did not need to type symbol: symbol. This applies above to symbol, price, spread and updated_at.

Services

We'll now create some service files to handle external api calls.

Run the following commands:

mkdir services
touch services/request.services.js services/crypto.services.js

We should now have a services directory with two files:

request.services.js - this where we'll use axios to make our api request functions.
crypto.services.js - this where we'll import our request functions to make requests for our crypto data.

So let's add this to your request.services.js file:

const { request } = require("axios");

const getRequest = async (url) => {
  try {
    const res = await request({
      method: "GET",
      url,
    });
    return res.data;
  } catch (err) {
    console.log(err);
    throw err;
  }
};

module.exports = {
  getRequest,
};

What did we do?

We first import request from axios
created a async function named getRequest to handle our api calls
return only the response data from the api call.

Now let's add the following code to your crypto.services.js file:

const { cryptoRender } = require("../helpers/crypto.helpers");
const { getRequest } = require("./request.services");

const getCryptoData = async () => {
  try {
    const resData = await getRequest("https://www.cryptingup.com/api/markets");

    return cryptoRender(resData);
  } catch (err) {
    console.log(err);
    throw err;
  }
};

module.exports = {
  getCryptoData,
};

What did we do?

Imported the getRequest function that we just made.
Created an async function named getCryptoData to fetch our data from https://www.cryptingup.com/api/markets.
Pass our data through the cryptoRender helper function we made earlier before returning the result.

Controllers

Now our api calls are sorted, we need to create a controller for our crypto data.

Let's create the controller using:

touch controllers/crypto.controllers.js

Now let's add the following to our controllers/crypto.controllers.js

const { shortCache } = require("../middleware/cache");
const { getCryptoData } = require("../services/crypto.services");

const getCryptoList = async (ctx) => {
  try {
    const resData = await getCryptoData();
    shortCache.set("crypto-list", resData);
    ctx.body = resData;
    ctx.status = 200;
  } catch (err) {
    ctx.body = "Error!";
    ctx.status = 500;
    console.log(err);
    throw err;
  }
};

module.exports = {
  getCryptoList,
};

So what is happening?

Here's what we're doing:

Imported our cache (shortCache) and our crypto service (getCryptoData) to our controller.
Created an async function to handle errors that may arise.
Called our getCryptoData function and await the response data.
Stored the response data in the cache under "cryto-list".
Return the response data.

The first request we make will take a couple seconds as we are interacting with an external api.

Once the cache sets our data under "crypto-list", for the given duration - our middleware will detect that "crypto-list" has data stored and will return that data rather than executing our controller.

Router

Finally let's update our router with the following code:

const Router = require("koa-router");
const router = new Router();
const { cryptoListCache } = require("./middleware/crypto.cache");
const { getCryptoList } = require("./controllers/crypto.controllers");
const { getEvents, postEvent } = require("./controllers/events.controllers");

router.get("/crypto_list", cryptoListCache, getCryptoList);
router.get("/events_list", getEvents);
router.post("/post_event", postEvent);

module.exports = router;

So now we've add our crypto route with our middleware and controller.

Let's start our server again, run this command to start our server:

node index.js

Let's test it out http://127.0.0.1:8000/crypto_list.

And that's all she wrote! Thanks for following this tutorial. The repo for this code can be found here

How to cache data with Express and node-cache - a 10 minute tutorial

Kachi Cheong — Wed, 29 Jun 2022 12:03:42 +0000

What is caching?

Caching is the storing of data temporarily and retrieving that same data for a declared duration.

Installation

Firstly, navigate to the directory where you would like to store your project from your terminal. Let's start by making our project.

Run the following command in your terminal:

mkdir cache-project
cd cache-project

Now let's initiate our package.json file with the default parameters and install our packages with the following commands:

npm init -y
npm i express node-cache axios cors

These commands should create a package.json which looks like this:

{
  "name": "cache-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.27.2",
    "cors": "^2.8.5",
    "express": "^4.18.1",
    "node-cache": "^5.1.2"
  }
}

Now let's breakdown the packages:

axios - We'll use this package to make our api calls
cors - This will enable our server to interact with our client.
express - Our server of course.
node-cache - This is our cache middleware package.

Server and Router

We'll now create our server and router:

touch index.js router.js

Let's paste the following code into our index.js file:

const express = require("express");
const cors = require("cors");
const router = require("./router");
const App = express();
const Port = 8000; // Our server port

App.use(express.json());
App.use(cors());
App.use(router);

App.listen(Port, () => {
  console.log(`Cache app listening at http://localhost:${Port}/`);
});

Let's quickly breakdown what we've just done:

Created our server and declared it on port 8000.
Added our parser using express.json, added our cors and router (which we will add shortly).
Add a listener to signal our server is running.

Let's move onto our router, paste the following code to our router.js file:

const { Router } = require("express");
const router = Router();

router.get("/", (req, res) => {
  res.send("Cache Project Home Page");
  res.status(200);
});

module.exports = router;

This is just a router with a default home route which is then exported.

Middleware

Let's now move onto our middleware.

Firstly, we'll create a middleware folder and a file which we'll call crypto.cache.js. Run the following commands:

mkdir middleware
touch middleware/crypto.cache.js

Next, add the following to our crypto.cache.js:

const Cache = require("node-cache");
const cryptoCache = new Cache({ stdTTL: 60 * 5 });

const cryptoCacheMiddleware = (req, res, next) => {
  try {
    if (cryptoCache.has("crypto-list")) {
      return res.send(cryptoCache.get("crypto-list")).status(200);
    }
    return next();
  } catch (err) {
    console.log(err);
    throw err;
  }
};

module.exports = {
  cryptoCacheMiddleware,
  cryptoCache,
};

Let's breakdown what we've just done.

Imported node-cache and set the new Cache to 5 minutes ({ stdTTL: 60 * 5 })
We'll make an async middleware function name cryptoCacheMiddleware.
Like any controller in express our middleware will take a req and res argument. In addition to this we'll add a next to skip this function if the conditions of our if statement is not met.
The cryptoCache checks if something has been stored under the name crypto-list
If something is stored under crypto-list then the get will return it rather than skipping to the controller.

Services

Now we'll create a services folder which will store all our api calls.

mkdir services
touch services/fetch.js services/crypto.services.js

First, let's create a async fetch function using axios. Paste the following code into our fetch.js file.

const axios = require("axios");

const FetchApi = async (url) => {
  try {
    const res = await axios.get(url);
    return res.data;
  } catch (err) {
    console.log(err);
    throw err;
  }
};

module.exports = FetchApi;

This is a service function which we'll use to pass a url to make our api calls. By making it a seperate function, it becomes reusable and we won't have to import axios and export the .data from the response every time.

Next, we'll import that FetchApi function into our crypto.services.js file and create our api call.

const FetchApi = require("./fetch");

const cryptoApi = async (amount) => {
  try {
    const result = await FetchApi(
      "https://api2.binance.com/api/v3/ticker/24hr"
    );
    return result.slice(0, amount);
  } catch (err) {
    console.log(err);
    throw err;
  }
};

module.exports = {
  cryptoApi,
};

Let's quickly breakdown the code:

We've made an async function which takes the argument name amount.
Then we'll use FetchApi to make an api call from: https://api2.binance.com/api/v3/ticker/24hr
Finally we'll return the results and the number of results is determined by our amount argument.

Controllers

Finally we'll create our controllers so let's run the following command in our terminal:

mkdir controllers
touch controllers/crypto.controllers.js

This should return a directory named controllers contianing a file named crypto.controllers.js.

const { cryptoCache } = require("../middleware/crypto.cache");
const { cryptoApi } = require("../services/crypto.services");

const cryptoController = async (req, res) => {
  try {
    const data = await cryptoApi(25);
    cryptoCache.set("crypto-list", data);
    res.send(data);
    res.status(200);
  } catch (err) {
    res.status(500);
    console.log(err);
    throw err;
  }
};

module.exports = {
  cryptoController,
};

Updating our router

Finally let's update router.js file but adding our middleware and controller.

const { Router } = require("express");
const router = Router();
const { cryptoController } = require("./controllers/crypto.controllers");
const { cryptoCacheMiddleware } = require("./middleware/crypto.cache");

router.get("/", (req, res) => {
  res.send("Cache Project Home Page");
  res.status(200);
});
router.get("/crypto", cryptoCacheMiddleware, cryptoController);

module.exports = router;

Run the server:

node index.js

Running our server

Make the a GET request using the following link: http://localhost:8000/crypto.

You'll notice that the first call will take a couple seconds, but then if you re-run the call, for the next 5 minutes, it will return the same result from your first call instantly.

And that's all she wrote, quick and painlesss! Thanks for reading!

Here is the github repo!

Koa Js : Part 4 - Connect a Relational SQL database to your Koa server

Kachi Cheong — Thu, 16 Jun 2022 19:03:00 +0000

KOA relational SQL Server

Before we start, if you have no experience with Koa, make sure you've read part 1 of this tutorial.

In this part, we'll be starting from where we left off in part 1. So if you want to follow along, clone this repository. We'll be creating another SQL database server, but this database will be have relational data.

Let's make sure we have Postgres installed before we continue:

psql --version

Setup

To create our relational database, we'll be using Prisma with Postgres. So let's start by installing prisma using the following command:

npm install prisma --save-dev

Now that we've installed prisma, let's initiate it by running the following command:

npx prisma init

This should create the following:

A prisma folder containing a schema.prisma file
A .env file containing the following code:

DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"

To connect to our postgres server we will need to update the link in the .env file. So let's replace it with the following:

DATABASE_URL="postgresql://USER:PASSWORD@@localhost:5432/koa_prisma_tutorial?schema=public"

The credentials are as follows:

USER:PASSWORD should be your credentials.
@localhost:5432 is the default port for postgres, if you are using another port, you can edit this accordingly.
koa_prisma_tutorial is the database we'll be creating to store our data, but feel free to name it whatever you want.

Let's now move onto creating our models.

Models

Now navigate to your schema.prisma file in the prisma folder and add the following code:

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Event {
  name            String
  description     String
  total_attendees Int        @default(0)
  adultsOnly      Boolean    @default(false)
  eventId         String     @unique
  attendee        Attendee[]
}

model Attendee {
  attendeeId String @unique
  name       String
  eventId    String
  event      Event? @relation(fields: [eventId], references: [eventId])
}

What did we just do?

We added two models to our prisma an event model and an attendee model which are relational.

Note, each object in a given model must have a unique value.

Let's break down each model:

Event

Each event in our database will follow this template.

name - name of our event represented by a string.
description - description of our event represented by a string.
total_attendees - this field is an integer representing the number of event attendees. The default value will be 0.
adultsOnly - boolean field representing if it's an adults only event, The default value will be false.
eventId - this string value represnting our event Id, this will be our unique value for our event model.
attendee - this will be our relational field which returns all corresponding attendees related to given event.

Attendee

Each attendee in our database will follow this template.

attendeeId - this string value represnting our attendee's Id, this will be the unique value for our attendee model.
name - name of an attendee represented by a string.
eventId - this field must contain the value of an existing model which will use to reference our other model, in our case it's the eventId from our event model.
event - this represents our relation to another model. The fields refers to the field from this model and references is field that matches the fields from this model. This field will not be displayed when our data is rendered.

Now we've added our models!

Next, we need to migrate our changes. Each migration will need a unique name, we'll call this migration init,

Let's start our migration by running the following command:

npx prisma migrate dev --name init

Now we've migrated our changes, we can connect to our prisma studio.

Prisma Studio and Client

Prisma Studio is an interface that allows you to add data manually without using your endpoints or SQL commands.

Try it out by running the following command via your terminal:

npx prisma studio

Let's now create a prisma client for our Koa server to access by running the following commands:

npx prisma generate
touch prisma/index.js

These commands will create an index.js file inside your prisma folder.

Now let's add the following code to the that index.js file.

const { PrismaClient } = require("@prisma/client");

const Prisma = new PrismaClient();

module.exports = Prisma;

Our prisma client is now up and running, it's time to start making full use of it.

Helpers

To avoid clutter in our controllers, we'll be creating helper functions.

Let's run the following commands:

mkdir helpers
touch helpers/attendee.helpers.js helpers/event.helpers.js

This should create a folder named helpers with two files named attendee.helpers.js and event.helpers.js.

Attendee Helpers

Let's first edit the attendee.helpers.js file, add the following code:

const { event, attendee } = require("../prisma");

const createAttendee = async (input) => {
  const { attendeeId, eventId } = input;
  try {
    await attendee.create({ data: input });

    updateAttendees(eventId);

    const newAttendee = await findAttendee(attendeeId);

    return newAttendee;
  } catch (err) {
    console.log(err);
    throw err;
  }
};

const findAttendee = async (input) => {
  try {
    const correctAttendee = await attendee.findUnique({
      where: { attendeeId: input },
    });

    return correctAttendee;
  } catch (err) {
    console.log(err);
    throw err;
  }
};

const updateAttendees = async (eventId) => {
  try {
    const count = await attendee.findMany({
      where: { eventId },
    });

    await event.update({
      where: { eventId },
      data: { total_attendees: count.length },
    });
  } catch (err) {
    console.log(err);
    throw err;
  }
};

module.exports = {
  createAttendee,
  updateAttendees,
  findAttendee,
};

What have we just done?

We've imported event and attendee from our Prisma client
Added three attendee helper functions (createAttendee, updateAttendees and findAttendee),
Made functions async. So if any errors arise, our code will detect the error.
Exported the helper functions we've just made.

So what functions did we create?

createAttende

This function creates an attendee and update the corresponding event. Here's how it works:

Firstly, we call our attendee prisma model and use the create function to create an attendee based on the input body (which will later be our post request).
Next, We'll use the eventId (from the object in our post request) and our updateAttendees function (which we will discuss next) to update our event accordingly.
Finally, We'll use the attendeeId (from the object in our post request) and our findAttendee function (which we'll later discuss) to find our new attendee and return them.

findAttendee

This function will find return the correct attendee. Here's how it works:

We'll call our attendee prisma model
Use the findUnique function to find and return the correct attendee.

Note: The findUnique only works on values marked @unique in our model, in this case it'll only work on our attendeeId.

updateAttendees

This function will update our total_attendees in a given event. Here's what happens:

Firstly, given an eventId (which will passed down to this function from the request body), We'll use the findMany function from our attendees model and find all attendees who match the eventId.
Next we'll call the update function from the attendees model to find the event with the eventId.
Finally, We'll pass the field we'd like to update (in this case is total_attendees) and we'll update it with the length of our attendee results array.

Event Helpers

Now let's edit the event.helpers.js file by adding the following code.

const { event } = require("../prisma");
const { findUnique, create } = event;

const findEvent = async (eventId) => {
  try {
    const correctEvent = await findUnique({
      where: { eventId },
      include: { attendee: true },
    });

    return correctEvent;
  } catch (err) {
    console.log(err);
    throw err;
  }
};

const createEvent = async (input) => {
  try {
    await create({ data: input });

    const newEvent = await findEvent(input.eventId);

    return newEvent;
  } catch (err) {
    console.log(err);
    throw err;
  }
};

module.exports = {
  createEvent,
  findEvent,
};

What have we just done? We've added two event helper functions createEvent and findEvent.

findEvent

This helper finds an event based on eventId. Here's how it works:

First we'll pass an eventId through the params or body of our request
Next, we'll call our prisma event model and find the unique event based on the eventId
Lastly, we'll declare an include. Include enables us to return all values which match our eventId from another model. In this case, it's our attendee model so we set this to true.

createEvent

This helper creates a new event and returns the new event to us.

First we'll take the request body from a post request and pass it through our the create function of our prisma event model.
Next we'll take the eventId from the request body and find the event we just created.
Lastly, we'll return the event we just created.

That's all of our controllers!

Now we've created our helper functions, let's update our controllers.

Controllers

Before we continue, let's first create a controllers file for our attendees:

touch controllers/attendee.controllers.js

Now let's add the following code to our attendee.controllers.js file:

const { createAttendee } = require("../helpers/attendee.helpers");

const addAttendee = async (ctx) => {
  try {
    ctx.body = await createAttendee(ctx.request.body);
    ctx.status = 201;
  } catch (err) {
    console.log(err);
    ctx.body = "Error!";
    ctx.status = 500;
  }
};

module.exports = {
  addAttendee,
};

This controller will be used to add new attendees by passing data through the request body.

Now let's edit the code in our event.controllers.js file

const { createEvent, findEvent } = require("../helpers/event.helpers");

const getEvent = async (ctx) => {
  try {
    ctx.body = await findEvent(ctx.request.params.eventId);

    ctx.status = 200;
  } catch (err) {
    console.log(err);
    ctx.status = 500;
    ctx.body = "Error!";
  }
};

const addEvent = async (ctx) => {
  try {
    ctx.body = await createEvent(ctx.request.body);

    ctx.status = 201;
  } catch (err) {
    console.log(err);
    ctx.status = 500;
    ctx.body = "Error!";
  }
};

module.exports = {
  getEvent,
  addEvent,
};

These update will enable us to:

addEvent - add new events by passing data through the request body.
getEvent - get existing events by passing the eventId through our request params (url).

Finally, we need to update our router:

const Router = require("koa-router");
const router = new Router();
const { addAttendee } = require("./controllers/attendee.controllers");
const { getEvent, addEvent } = require("./controllers/events.controllers");

router.get("/event=:eventId", getEvent);
router.post("/add_event", addEvent);
router.post("/add_attendee", addAttendee);

module.exports = router;

We've renamed some of our enpdpoints and controllers. We've also introduced a params into our url.

Params are arguments that can be passed through a url by following ":", in our case we're using :eventId. We can access the params from our controller using ctx.request.params, in our case we'll it's ctx.request.params.eventId.

Request

Let's run our server and test all of our endpoints. Due to the way database is designed, we will need to follow this order:

Firstly add an event
Then add an event attendee / get an event

Without an Event, we can't add an attendee as they require an eventId.

Needless to say we also can't get an event if it hasn't been added.

Time to test our endpoints, let's start our server:

node index.js

Now let's add our first event using our endpoint.

Let's add this data using a post request to the following endpoint http://127.0.0.1:8000/add_event:

{
  "name": "Test Event",
  "description": "Test Event Description",
  "eventId": "id:12345"
}

A successful request should return the following response:

{
  "name": "Test Event",
  "description": "Test Event Description",
  "total_attendees": 0,
  "adultsOnly": false,
  "eventId": "id:12345",
  "attendee": []
}

Now let's add an attendee through a post request to http://127.0.0.1:8000/add_attendee:

{
  "attendeeId": "id:98756",
  "name": "New User",
  "eventId": "id:12345"
}

A successful request should return the data you just passed through the body.

Now let's get the event we've just created http://127.0.0.1:8000/event=id:12345:

{
  "name": "Test Event",
  "description": "Test Event Description",
  "total_attendees": 1,
  "adultsOnly": false,
  "eventId": "id:12345",
  "attendee": [
    {
      "attendeeId": "id:98756",
      "name": "New User",
      "eventId": "id:12345"
    }
  ]
}

And there we have it! A relational prisma database!

Prisma Tips

Each time you add or remove fields from your models remember to run the following command:

npx prisma migrate dev --name UPDATENAME

You can also add data to your database using prisma studio by running the following command:

npx prisma studio

Summary

And that is all, we've created a relational database with prisma! Thanks for reading. Click here for the code to this tutorial.