DEV Community: pacholoamit

Getting started with Typescript Generics 🚀

pacholoamit — Sat, 04 May 2024 20:40:46 +0000

TypeScript has revolutionized the way developers write and manage JavaScript code, offering type safety and scalability which are crucial in large-scale applications. Among its features, TypeScript Generics stand out as an advanced and incredibly potent tool that every developer should master. This article delves into TypeScript generics, offering a clear understanding through practical examples and demonstrating why generics are indispensable in modern TypeScript programming.

For the visual learners out there, here's a Youtube video

What Are TypeScript Generics?

Generics are essentially variables used to capture and work with various types passed into components or functions. They allow developers to write flexible, reusable code components that work over a variety of types rather than a single type. This capability not only makes your code more adaptable but also helps in maintaining type safety, preventing errors that might otherwise only be caught at runtime.

Why Use Generics?

The primary advantage of using generics is that they help maintain type integrity throughout your code. By specifying types at the time of function invocation, generics ensure that the functions work predictably and safely, reducing runtime errors and enhancing code quality.

Practical Examples of TypeScript Generics

To grasp the concept better, let’s explore three levels of examples: basic, intermediate, and advanced, demonstrating the versatility and power of generics in TypeScript.

Basic Example: The Identity Function

The identity function is a simple yet effective example to showcase generics. It's defined as follows:

function identity<T>(arg: T): T {
    return arg;
}

Here, is a type variable that allows you to capture the type T provided by the user of the function. The function accepts one argument arg of type T and simply returns it. This approach maintains the type information between the input and output, preserving type safety.

For instance, invoking identity<string>("Hello Generics") ensures that the input is a string and the output is also a string.

Intermediate Example: API Response Interface

Generics become especially useful when defining interfaces that are meant to be flexible across various types of data. Consider this generic interface for an API response:

interface ApiResponse<T> {
    status: number;
    message: string;
    data: T;
}

This interface uses a generic type T for the data field, allowing it to represent any type of data specific to different responses:

let userResponse: ApiResponse<{name: string, age: number}> = {
    status: 200,
    message: "Success",
    data: {name: "Alice", age: 30}
};

This approach offers flexibility and type safety for API responses, accommodating various data types without losing the benefits of TypeScript's type system.

Advanced Use Case: Constraining Generics

Generics can also be constrained to ensure they meet certain criteria, which is particularly useful when your code relies on specific properties. Here's an example of a Store class that operates on items with an id property:

class Store<T extends {id: number}> {
    private items: T[] = [];

    addItem(item: T) {
        this.items.push(item);
    }

    getItemById(id: number): T | undefined {
        return this.items.find(item => item.id === id);
    }
}

This Store class is generic but constrains T to ensure every item has an id of type number. This pattern is immensely useful for collections that require item identification.

Conclusion

Generics are a powerful feature in TypeScript, enabling you to write more abstract, safe, and reusable code. From simple utility functions like the identity function to more complex data structures like the Store class, generics provide the flexibility needed to handle various data types while preserving type safety. As TypeScript continues to evolve, understanding and leveraging generics is becoming increasingly important for developers looking to write robust, maintainable code.

By mastering TypeScript generics, you're not just enhancing your development skills—you're also preparing yourself to tackle more complex and scalable projects with confidence.

Use over 140+ amazing ChatGPT prompts in 10 minutes 🚀

pacholoamit — Mon, 06 Feb 2023 17:26:30 +0000

We're going to be exploring this amazing NodeJS library called chatgpt-prompts. This library allows you to use over 140+ amazing community built prompts compiled over at awesome-chatgpt-prompts instantly.

🚀 Quick Start!

If you are impatient person (like me!), here's a quick start on what the code would look like for a basic example but I recommend you follow along just to ensure that your (hopefully typescript) project gets set up correctly as this package is ESM-only.

import { ChatGPTAPI } from "chatgpt";
import { createChatGPTPrompt } from "chatgpt-prompts";

const run = async () => {
  const instance = new ChatGPTAPI({
    apiKey: "OPEN_AI_API_KEY",
  });

  const prompt = createChatGPTPrompt(instance);

  let res = await prompt.linuxTerminal("touch hello.txt");
  console.log(res.text);

  res = await prompt.linuxTerminal("echo hello world > hello.txt");
  console.log(res.text);

  res = await prompt.linuxTerminal("cat hello.txt");

  console.log(res.text);
};

run().catch((err) => console.log("Something went wrong"));

💻 Project Setup

This section details how we would set up our typescript & NodeJS project with the chatgpt and chatgpt-prompts package.

To start setting up our project let's create a directory to house all of the code for our project

mkdir chatgpt-app
cd chatgpt-app

Now we have a directory, let's create a package.json file by running

npm init -y

Now let's install all of our dependencies and dev dependencies

npm install --save-dev nodemon ts-node typescript 
npm install chatgpt chatgpt-prompts

Your package.json file should look something like this

{
  "name": "chatgpt-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.20",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.5"
  }
}

We're going to be making some absolutely important changes to our package.json file since chatgpt and chatgpt-prompts are ESM-only packages.

Modify your package.json so that it looks something like this

{
  "name": "chatgpt-app",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "type": "module",
  "scripts": {
    "start": "nodemon --ext js,ts,json,env --exec 'node --experimental-specifier-resolution=node --loader ts-node/esm' src/index.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.20",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.5"
  },
  "dependencies": {
    "chatgpt": "^4.1.1",
    "chatgpt-prompts": "^1.1.1"
  }
}

Here were the changes that we've made for extra clarity:

We've changed the main field from index.js to dist/index.js
We've added the types field with a value of dist/index.d.ts
We've added the type field with a value of module; and finally
We've modified the start script to be really long.

After this is completed, we're going to set up our lengthy but absolutely necessary tsconfig.json file. Feel free to copy the one below

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "importHelpers": true,
    "resolveJsonModule": true,
    "sourceMap": true,
    "declaration": true,
    "alwaysStrict": true,
    "forceConsistentCasingInFileNames": true,
    "removeComments": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitThis": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noImplicitReturns": true,
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "composite": true,
    "skipLibCheck": true,
    "noEmitHelpers": false,
    "outDir": "dist",
    "rootDir": "src",
    "baseUrl": "."
  },
  "include": ["src"],
  "exclude": ["dist", "node_modules"]
}

Awesome! After that is set up, we're now going to be writing some actual code. Please run the commands below to create a src directory and an index.ts file.

mkdir src
cd src
touch index.ts

Now we have created our index.ts file, let's actually write and run our code. Here's a code snippet to get you started

import { ChatGPTAPI } from "chatgpt";
import { createChatGPTPrompt } from "chatgpt-prompts";

const run = async () => {
  const instance = new ChatGPTAPI({
    apiKey: "OPEN_AI_API_KEY",
  });

  const prompt = createChatGPTPrompt(instance);

  let res = await prompt.linuxTerminal("touch hello.txt");
  console.log(res.text);

  res = await prompt.linuxTerminal("echo hello world > hello.txt");
  console.log(res.text);

  res = await prompt.linuxTerminal("cat hello.txt");

  console.log(res.text);
};

run().catch((err) => console.log("Something went wrong"));

You should have an output similar to that one below

💯 Congratulations

You now have access to over 140+ amazing prompts in NodeJS. I'd also like to credit the following people for the awesome work they've done:

A big thank you to Travis Fischer for making an amazing NodeJS Client of the ChatGPT API.
All of the prompts featured in this package comes from awesome-chatgpt-prompts maintained by Fatih Kadir Akın

Is this the end of localhost? VS Code Server Preview

pacholoamit — Mon, 05 Sep 2022 20:16:20 +0000

We're going to take a look at VS Code Server which is currently in private preview. I'm going to walk you through the features of VS Code Server that I've already tested having used it for a few days. Features such as Github auth and port forwarding will be discussed in the video.

I'll also be talking about how we can host VS Code Server on our local home lab server. One of the features that VS Code Server does not implement yet out of the box is automatic start up. In this video, I provide steps on how we can automatically start VS Code Server so that it starts every time a system reboot occurs

One of the coolest features of Go. Embed ReactJS into a binary with Go

pacholoamit — Mon, 18 Jul 2022 07:43:07 +0000

Today we're going to attempt to embed a React Application into a Go binary. Please watch the youtube video down below for more mind blowing stuff. We're going to create a Golang REST API with Echo and a React application with Vite. From there, we're going to produce a single binary/executable containing both the API & the Web application.

Pre-requisites

Go version 1.18.3
Yarn version 1.22.18
Node version v16.15.1

Creating our Go project

First we're going to create our Go Project

mkdir go-react-demo
cd go-react-demo
touch main.go

Then, we'd like to install Echo which is a web framework (similar to Gin, Fiber, etc.)

go get github.com/labstack/echo/v4

Creating a basic API route endpoint with echo

In your main.go file, please write:

package main

import (
    "net/http"

    "github.com/labstack/echo/v4"
)

func main() {
    e := echo.New()
    e.GET("/api", func(c echo.Context) error {
        return c.String(http.StatusOK, "Hello, World!")
    })
    e.Logger.Fatal(e.Start(":8080"))
}

This will create a basic API endpoint that returns Hello, World! once a GET request is sent to http://localhost:8080/api we may also test this by running:

curl http:localhost:8080/api # <-- Should output "Hello, World!"

If everything works fine, next we'll create our React application with Vite

Creating our React App w/ Vite

Ensure you're in the root project directory then run:

yarn create vite
# Set the "project name" to "web"
# Set the "web framework" to "react" & "react-ts"

After Vite has finished bootstrapping our project, let's make sure all of the dependencies are installed

cd web
yarn install

Modifying the `package.json` file

We're going to modify the package.json file slightly, specifically the dev command. We don't want to serve the react application with the default vite server. We want to serve the static files ourselves with Go. We only want vite to rebuild the static files after a changes has been made (live-reload)

  "scripts": {
    "dev": "tsc && vite build --watch", <-- Change dev script to this
    "build": "tsc && vite build",
    "preview": "vite preview"
  },

Changing the dev command to tsc && vite build --watch tells vite to rebuild the static files after changes have been made to it.

Try to run yarn dev in the web directory to generate the static files located in the dist directory

# In go-react-demo/web
yarn run dev

At this point our folder structure would look like this:

go-react-demo/
├─ web/
│  ├─ dist/
│  ├─ public/
│  ├─ src/
|  ├─ ...
├─ main.go
├─ go.sum
├─ go.mod

Serving our Static files with Echo

We're going to create a web.go file in the web directory

// In go-react-demo/web/web.go

package web

import (

    "embed"
    "github.com/labstack/echo/v4"
)

var (
    //go:embed all:dist
    dist embed.FS
    //go:embed dist/index.html
    indexHTML     embed.FS
    distDirFS     = echo.MustSubFS(dist, "dist")
    distIndexHtml = echo.MustSubFS(indexHTML, "dist")
) 

func RegisterHandlers(e *echo.Echo) {
    e.FileFS("/", "index.html", distIndexHtml)
    e.StaticFS("/", distDirFS)
}

What we're doing here, is creating a route / and serving the static files built by Vite including the web/index.html and the static assets that accompanies it.

Importing our web `RegisterHandlers` function to our `main.go` file

Going back to our main.go file. Lets import the RegisterHandlers function we exposed in the web package

package main

import (

    "net/http"

    "go-react-demo/web" # <--- INCLUDE THIS

    "github.com/labstack/echo/v4"

)

func main() {
    e := echo.New() 
    web.RegisterHandlers(e) # <-- INCLUDE THIS
    e.GET("/api", func(c echo.Context) error {
        return c.String(http.StatusOK, "Hello world!")
    })
    e.Logger.Fatal(e.Start(":8080"))
}

Now let's test the go server to see if it's serving the static assets of our react application correctly. Go to the root directory of the project & run:

go run main.go

Now if you visit http://localhost:8080 in the browser you should see the default vite React application.

Making a request to the Go API server from within React

Now let's try to make a GET request to the Go API server from within our React app that is also served by the Go server... Sounds like some inception stuff happening here. Please add the following:

// In go-react-demo/web/src/App.tsx
import { useState, useEffect } from "react";
import "./App.css"; 

function App() {
  const [data, setData] = useState("");

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch("http://localhost:8080/api");
      const data = await response.text();
      setData(data);
    };

    fetchData().catch((err) => console.log(err));
  }, []);



  return (
    <div className="App">
      <h1>{data}</h1>
    </div>
  );

}

export default App;

Now we need to regenerate the React static files since we've made changes.

# assuming you're currently at the rootDirectory (go-react-demo)
cd web && yarn run dev # Generates the new static assets

Then we need to run the go server to serve the files

cd .. && go run main.go

If we visit http://localhost:8080, you should be greeted with "Hello world" which comes from the Go API server

A really bad development experience

I'm sure you noticed that always running 2 terminals both with different processes is a really bad dev experience, fear not for I have a solution!

We're going to install air. air which is sorta like nodemon but for go. air allows us to have hot reload with go so we don't have to manually run the go run main.go command every time we make changes.

To install air

go install github.com/cosmtrek/air@latest

Then, you'd want to create a configuration file for air that's simply done via running:

#You should be in the root directory of the go-react-demo project
air init # Should output a `.air.toml`

Now, the final step in making a better development experience. If you're using wsl Create a dev.sh file in the root directory of your project

touch dev.sh # creates the file

Modify the dev.sh script to contain

#!/bin/sh

cd web && yarn dev & air && fg

This will run both the go api server & the vite build server in parallel in one terminal

Compiling the binaries

Now, the moment of truth: to compile the binaries containing the React application simply run

go build main.go

If you're trying to build windows binaries from WSL:

env GOOS=windows GOARCH=amd64 go build main.go
# You may have a different $GOARCH so please do some research

Congratulatiions! you've created a single go binary that contains both your API & your React App!

Create a Google Chrome extension with ReactJS

pacholoamit — Sun, 19 Jun 2022 18:20:18 +0000

Lets Create a Google chrome extension with ReactJS by using the Plasmo framework. The Plasmo framework allows us to build multi-browser compatible extensions with ReactJS. They have various quickstarts for other tools you may have already used such as NextJS, Stripe, Redux, Tailwind CSS, Supabase and Firebase

Typescript & Terraform for beginners - Infrastructure as code (IaC)

pacholoamit — Mon, 06 Jun 2022 11:19:53 +0000

Today I'm going to demonstrate how to spin up AWS Infrastructure using Typescript and Terraform. To spin up infrastructure using Terraform, usually we'll have to write HCL (Hashicorp Configuration Language) manifests but with Terraform CDK we can spin up our own infrastructure with various Cloud providers (AWS, Google, Azure, etc) while using our favorite programming languages.

RedwoodJS - Create a full stack application in minutes

pacholoamit — Sun, 10 Apr 2022 23:04:11 +0000

Isn't it annoying re-inventing the wheel? Imagine this, you get a new idea for a startup or even just a basic project you'd like to do for yourself because you can. Here's what you're gonna start thinking about...

I've gotta write some boring boilerplate code for the client
I've gotta write some boring boilerplate code for the server/api
I've gotta do GASP auth... again.
I've gotta think about a deployment strategy.
Insert another annoying situation here that makes you rethink your career because you're so damn tired writing the same code over and over again for each project

I think I've made my point. Let's not reinvent the wheel and not repeat ourselves cough... DRY principle cough...

RedwoodJS solves most, if not all of these issues!

I hear you my fellow brethren & sistren with that out of the way, if you want to have a better quality of life as a developer please continue to read on and let's get coding!

Step 1: Create a Redwood project

Let us start by creating a Redwood project from scratch to see how easy the process is. Reference to the quick start docs here

### Instantiate a new JS project

yarn create redwood-app my-redwood-project # OR

### Instantiate a new TS project

yarn create redwood-app my-redwood-project --typescript

cd my-redwood-project
yarn rw dev

Bingo! you've got an API server w/Graphql, a front-end client, and a database ORM (Prisma)

Amazingly, with those 3 commands executed in the terminal here's what we've already done.

[x] Created a boilerplate for the client with ReactJS
[x] Created a graphql server with prisma as our ORM

Hey, if you ask me that's a pretty good deal ain't it!

If you visit the following ports on localhost you'll see all the magic that happened

localhost:8911 - API server
localhost:8911/graphql - Graphql playground
localhost:8910 - ReactJS front-end

Step 2: Generate a database model for Prisma

Lets try generating a model for Posts. Go into api/db/schema.prisma and add the following model:

# api/db/schema.prisma

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  body      String
  createdAt DateTime @default(now())
}

Then try running:

yarn rw prisma migrate dev # Runs the prisma migrations
yarn rw g sdl post # Creates sdl definitions

This will create the prisma migrations for you, you will be prompted for a name for the migration, in this case you may name the migration as Create post or something like that.

Note: If you're facing problems here concerning types, this usually can get resolved by running:

yarn rw g types # Generates the necessary types. Usually fixes type errors

Step 3: Check our model and add in some data

I prefer using Prisma studio to check our model since no components or pages get added to the web folder. All you have to do is run:

yarn rw prisma studio

If you then proceed to localhost:5555 you should be greeted by Prisma studio

Feel free creating, modifying, and/or deleting records here by clicking on Post. You will be greeted by this screen to perform CRUD operations within Prisma studio:

Try clicking the Add record button to add some data to our database (currently it's in sqlite but RedwoodJS has integrations with many databases including MySQL & Postgres.)

Step 4: Create pages in the web folder

Let's shift our focus to the front-end. To generate a new page in RedwoodJS, all you have to do is run this command

yarn rw g page home /

This will do the following:

Create a page located at web/src/pages/HomePage/
Create a test file located at web/src/pages/HomePage/
Create a a storybook file located at web/src/pages/HomePage/
Update the routes file

If you visit web/src/Routes.tsx you'll see it's been auto-magically updated for you

// web/src/Routes.tsx
import { Router, Route } from '@redwoodjs/router'

const Routes = () => {
  return (
    <Router>
      <Route path="/" page={HomePage} name="home" />
      <Route notfound page={NotFoundPage} />
    </Router>
  )
}

export default Routes

and now if you visit http://localhost:8910/ you'll see a really good looking home page.

Step 5: Tying things together

Ok, to recap so we've:

Created a database model
Added some data into our sqlite database
Created a default Home page in our web application

Now, how do we fetch data from our back-end? RedwoodJS has this concept of cells (no, not the ones you learned in biology.)

In a nutshell, Cells serve 1 purpose and that is to display the correct components depending on the state of the data being fetched. Let's try creating a cell by running this command:

# Note: make sure it's plural `posts`

yarn rw g cell posts

After running the command, you'll see another auto-magically generated component in web/src/components/PostsCell

// web/src/components/PostsCell/PostsCell.tsx
export const QUERY = gql`
  query PostsQuery {
    posts {
      id
      body // Add this to see the body of your post
      title // Add this to see the title of your post
    }
  }
`

export const Loading = () => <div>Loading...</div>

export const Empty = () => <div>Empty</div>

export const Failure = ({ error }: CellFailureProps) => (
  <div style={{ color: 'red' }}>Error: {error.message}</div>
)

export const Success = ({ posts }: CellSuccessProps<PostsQuery>) => {
  return (
    <ul>
    // Make this look good on your own time
    // I ain't getting paid for this
      {posts.map((item) => {
        return <li key={item.id}>{JSON.stringify(item)}</li>
      })}
    </ul>
  )
}

As you can see the component renders depending on the current state of the data being fetched (Empty, Failure, Success,Loading) say goodbye to manually updating asynchronous data in your web app.

Now, this is just a component. It hasn't been used yet, to use it, you may want to import it in your home page for now:

import { MetaTags } from '@redwoodjs/web'
import PostsCell from 'src/components/PostsCell' // IMPORTANT

const HomePage = () => {
  return (
    <>
      <MetaTags title="Home" description="Home page" />

      <PostsCell />
    </>
  )
}

export default HomePage

You should get an output like this:

Bingo banggo bonggo! You just made a full-stack application in minutes 🎉🎉🎉

What about authentication and deployment?

I know, I know... It ain't here but that's only because we've only scratched the surface. If we could get a fullstack web app in minutes, do you really think the deployment pipeline & setting up authentication will take longer? (Spoilers: It doesn't!)

If you want to proceed with setting up auth you may want to run this command so redwoordJS can help you set it up:

# RedwoodJS has adapters for many Auth providers too!
yarn rw setup auth --help

For deployments:

# RedwoodJS also has many adapters for deployment providers
yarn rw setup deploy --help

Conclusion

If you haven't noticed by now, RedwoodJS takes care of all the heavy lifting when it comes to setting up a project. We only have to run a few generator commands Laravel flashbacks inbound... and we only have to write code that matters...

We're called developers for a reason, let's develop new stuff

3 Essential tips for front-end developers to get started on the back-end

pacholoamit — Wed, 18 Nov 2020 17:50:52 +0000

Most developers usually start on the front-end which is understandable, considering that front-end development is more visual. It's easier to understand front-end code from a beginner's perspective than back-end code but it gets to a point where most developers, even though they are really experienced on the front-end, have this horror or feeling of dread when approaching back-end development.

It's okay, we've all been there and I'm going to help you by give you 3 essential tips to help you transition your learning from front-end to the back-end.

What is back-end development? 🤔

I'm going to give you a brief summary of what back-end development is about. I'm sure the people reading have a rough idea of what it is but to formalize it:

Back end development refers to the server side of an application. The back end usually consists of three parts: a server, an application, and a database.

Lauren Stewart, Course Report

To help with communication, I'm pretty sure you've made GET requests with javascript (perhaps even with axios.) If you are not familiar on making GET requests here is a code snippet below on how it looks.

Vanilla Javascript Fetch:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

Axios Fetch:

axios.get('https://jsonplaceholder.typicode.com/todos/1')
   .then(response => console.log(response))
   .catch(error => console.log(error))

I much prefer axios since you get the same effect but you write less code but that's how to make your first ever GET request.

What happens on a GET request? 💡

When you perform a GET request you basically just retrieve a request from a server. In the example above, we are fetching from a URL from jsonplaceholder where it would return a set amount of todos based on the query string parameter (in this case, 1 todo.)

I'd really encourage everyone to use jsonplaceholder for testing making GET requests as you can customize the type of response you'd want returned without constraints.

So, now you understand how to make a GET request, here are 3 essential tips that would help you on your back-end journey:

1. Understand the basics: 🧐

The first thing you need to do is watch a 20 minute YouTube video on what are the components that are apart of the back-end. I'll give a brief description:

The Server - This is the computer that receives requests.
(Any computer can be a server, when you run "npm run serve" or "npm run start" you are, in effect, creating a dev server for your front-end application to run on)
The Database - This is where data is organized and stored
(I.E. User information from you facebook profile is residing in the facebook database.)
The App - This is the application running on the server that listens for requests, retrieves information from the database, and sends a response. (I.E. jsonplaceholder data is the app built to process request based on query string parameters)

Once you understand the basics, move on to:

2. Pick a back-end framework that has the most amount of learning resources OR is widely used in the job market around you: 👉

This is the important part, Either pick a backend framework that relies on one of these two criteria. The first criteria is important but it won't matter if it won't get you hired which is why there is a second criteria. The ideal is to aim for both but I will leave that to your discretion.

How do you learn?

To expand more on the first criteria, If you know yourself well enough, you should know the best ways for you to learn. Do you learn better through visual (YouTube, udemy, etc.) learning? Do you learn better on reading documentation? etc.

Picking a back-end framework that has a lot of learning resources gives you a wider range of learning instruments that fits the way you learn in the way you are accustomed to and therefore speeds up the learning process.

The second criteria focuses on the job market around you, If you're learning Express/NodeJS for the backend but most of the jobs around you are using Laravel PHP then you'll get beaten by another candidate that already knows Laravel. So, aside from considering the learning resources, also consider your job market.

3. If it gets boring, take a break and go back to it later: 😒

The important thing to get out from this is just starting. Let me tell you, working on the back-end is the most unthrilling and boring thing I have ever done in my life BUT it is absolutely necessary to build application where you can store user data (or any sort of data) to a database.

If you only made it far enough to install the NPM package or YARN package then good for you, you're one step closer to conquering your fear of back-end development.

Eighty percent of success is showing up

Woody Allen

I've heard myths and legends of developers having more fun in the back-end than the front-end and I haven't found any in my area so I guess it's still a myth or legend.

Thanks for reading my post! Go make some back-end applications NOW🎉🎉🎉

3 essential management tips from a senior software developer

pacholoamit — Wed, 18 Nov 2020 16:01:46 +0000

I was a senior software developer of a start-up in the finance sector. I was able to handle and manage several big projects and I thought I would share to my experiences, tips, and most importantly my mistakes so YOU, yes YOU, wouldn't have to go through them.

A smart man learns from his mistakes. A wise man learns from the mistakes of others.

Anon

What this article is about? 🤔

This article is written as rules to abide by, these are things you should keep in mind when the going gets tough, when life deals you a bad hand, etc. This is more about the principles or design patterns (think, MVC) to keep in mind when you go about managing and leading team projects.

1. If you're the leader, act like one.

If perchance, you are fortunate enough to land a job in a high responsibility position such as the project manager (title varies from company to company). You better act like it. Always remember that the ideal to strive for is YOU have the highest responsibility in the team. When the project gets bumpy and you have gaps in your knowledge on what dependencies were used and what for, you know you're doing something wrong.

Always remember, we are the first to arrive and the last to leave for a reason. If you are in a high-ranking job, that comes with the responsibility. We look over the new bloods because of our ancient occult knowledge on how to build the right authentication systems in laravel.

Note: I still use JWTs for projects, still can't get my heard around Oauth2 XD

2. If you pay attention to the code, pay more attention to your team.

In a perfect world, everyone would be doing their jobs, getting work done, and no one would complain about anything. However, we do not live in a perfect world and those software developers that you are managing are living, breathing, people. Yes, they are human. Just as human as you and I.

One of the things that comes with being human are problems and crises (professionally and personally) and it is our job to adjust and guide the team based on their behavior.

Hold up? you want a project manager that's a psychologist? and does this even matter? As long as the work gets done, who cares, right?

WRONG! won't believe me? Here are some facts:

Here's a study written by Eugenio Proto of the University of Bristol. In the study it is found out that the top "Best places to work" for, on average outperforms the S&P 500 Index. This of course correlates to the employee's happiness in the company of which YOU, the project manager or some higher position authority, is a part of.

Link to the study here

You don't have to get a Ph.D in psychology to understand if a person is having a good day or a bad day. Our subconscious (lizard brain) automatically detects if a person is either having a good day or bad day through their facial expressions and body language. Always ask yourself, if there's something you can do to help that team member get their spirits up.

If when in doubt, Just Ask. Asking about how a person's day is going after noticing they exhibit negative body language might be the key difference to that person's day. You'd be surprised of the impact of a simple "How are you?" or "Is everything okay?" to a person.

"Leadership is the ability to facilitate movement in the needed direction and have people feel good about it."

Tom Smith (Bestselling Author and Co-Founder, Partners In Leadership)

3. A better work place === better results!

As we've read, there is a direct correlation between a better and happier work environments and results in the long run but aside from that, don't we just want to build and be a part of a workplace that embodies happiness. Where people genuinely care about what they do because upper management cares about them.

I really think this is the key that gets forgotten over the ages and even though I am only a man, I hope I could help the world out through this blog that encourages project managers and upper management alike to create a happier and better work environment for people and not for machines.

"There is little success where there is little laughter."

Andrew Carnegie (Entrepreneur)

DEV Community: pacholoamit

Getting started with Typescript Generics 🚀

What Are TypeScript Generics?

Why Use Generics?

Practical Examples of TypeScript Generics

Basic Example: The Identity Function

Intermediate Example: API Response Interface

Advanced Use Case: Constraining Generics

Conclusion

Use over 140+ amazing ChatGPT prompts in 10 minutes 🚀

🚀 Quick Start!

💻 Project Setup

💯 Congratulations

Is this the end of localhost? VS Code Server Preview

One of the coolest features of Go. Embed ReactJS into a binary with Go

Pre-requisites

Creating our Go project

Creating a basic API route endpoint with echo

Creating our React App w/ Vite

Modifying the package.json file

Serving our Static files with Echo

Importing our web RegisterHandlers function to our main.go file

Now if you visit http://localhost:8080 in the browser you should see the default vite React application.

Making a request to the Go API server from within React

If we visit http://localhost:8080, you should be greeted with "Hello world" which comes from the Go API server

A really bad development experience

Compiling the binaries

Congratulatiions! you've created a single go binary that contains both your API & your React App!

Create a Google Chrome extension with ReactJS

Typescript & Terraform for beginners - Infrastructure as code (IaC)

RedwoodJS - Create a full stack application in minutes

Step 1: Create a Redwood project

Step 2: Generate a database model for Prisma

Step 3: Check our model and add in some data

Step 4: Create pages in the web folder

Step 5: Tying things together

What about authentication and deployment?

Conclusion

3 Essential tips for front-end developers to get started on the back-end

What is back-end development? 🤔

What happens on a GET request? 💡

1. Understand the basics: 🧐

2. Pick a back-end framework that has the most amount of learning resources OR is widely used in the job market around you: 👉

How do you learn?

3. If it gets boring, take a break and go back to it later: 😒

Thanks for reading my post! Go make some back-end applications NOW🎉🎉🎉

3 essential management tips from a senior software developer

What this article is about? 🤔

1. If you're the leader, act like one.

2. If you pay attention to the code, pay more attention to your team.

3. A better work place === better results!

Congratulations, you've made it to the end. We're one step closer in making the world a better place 🎉🎉🎉

Modifying the `package.json` file

Importing our web `RegisterHandlers` function to our `main.go` file