Forem: Cen

TypeScript simple patterns for Web Developers

Cen — Mon, 31 Jul 2023 09:28:28 +0000

Introduction

TypeScript is a typed superset of JavaScript that adds static type checking to the language. This can help to prevent errors and make code more maintainable. In this article, I will share 5 of the most useful TypeScript patterns for web developers. These patterns can help you to write more concise, reusable, and maintainable code.

The pattern list

Using interfaces to define types

interface User {
  name: string;
  email: string;
}

const user: User = {
  name: "John Doe",
  email: "johndoe@example.com",
};

This code snippet shows how to use interfaces to define types in TypeScript. This can help to prevent errors and make code more maintainable.

Full documentation of interfaces here

Using generics to create reusable code

function createList<T>(items: T[]) {
  return items.map((item) => item);
}

const listOfStrings = createList(["hello", "world"]);
const listOfNumbers = createList([1, 2, 3]);

This code snippet shows how to use generics to create reusable code in TypeScript. This can help to make code more concise and easier to understand.

Full documentation of generics here

Using enums to represent sets of values

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

const myDirection = Direction.Up;

This code snippet shows how to use enums to represent sets of values in TypeScript. This can help to make code more readable and easier to maintain.

Full documentation of enum here

Using modules to organize code

module MyModule {
  export function sayHello() {
    return "Hello, world!";
  }
}

import { sayHello } from "MyModule";

const message = sayHello();

This code snippet shows how to use modules to organize code in TypeScript. This can help to make code more modular and easier to understand.

Full documentation of modules here

Using type guards to check the type of a variable

function sayHello(name: string) {
  if (typeof name === "string") {
    return `Hello, ${name}!`;
  } else {
    return "Invalid name";
  }
}

This code snippet shows how to use type guards to check the type of a variable in TypeScript. This can help to prevent errors and make code more robust.

Full documentation of decorators here

Using functional programming techniques

const double = (x: number) => x * 2;

const myNumber = double(10);

This code snippet shows how to use functional programming techniques. The double function takes a number as input and returns the number multiplied by 2. This is a more concise and elegant way of writing code than using traditional imperative programming techniques.

Full documentation of functions here

Using decorators to add metadata to code)

@Decorator()
class MyClass {
  // ...
}

const myInstance = new MyClass();

This code snippet shows how to use decorators to add metadata to code in TypeScript. This can help to make code more extensible and easier to understand.

Full documentation of decorators here

Conclusion:

These are just 5 of the many TypeScript patterns that can be used by web developers. By using these patterns, you can write more concise, reusable, and maintainable code.

I hope this article has been helpful!

Automatic dual git config

Cen — Fri, 05 Aug 2022 16:37:00 +0000

Introduction

Do you use the same computer for both personal and professional projects?
Do you have one git account for pro and one for personal?
Then follow this short guide and have everything set up for automatic git config switch.

What’s the idea

We will tell git through a configuration file to use the correct user info like name and email based on the path we are currently on when using git commands.

I use this setup on mac but it should work on Linux too.

I use VSCode as my IDE and its CLI to open and edit my files.

Realization

First step

Open your git config file

code ~/.gitconfig

Second step

This is where the magic will works

[include]
    path = ~/pro-git.conf
[includeIf "gitdir:~/perso/"]
    path = ~/perso-git.conf

[pull]
    rebase = true

first include is the generic configuration used.
second include with an if is a condition that tells git to use another specific conf when you are inside a specific directory.
A little extra I recommend is to set pull rebase to true inside your git config but that’s not related to what we are doing now. Check on the web for a clear explanation for this point!

As you can see I have 2 files at my root, 1 for each use case, pro and perso. Those files contain the related user info for each use case.

Third step

Fill in the information of your user inside both config files.

[user]
    name = Personal User
    email = personal@email.com

and same for the pro file.

As you guessed this is reproducible for more than 2 users and config.

There are things to learn about writing a proper git config and what’s possible with it, this documentation gives a lot of information about it !

https://git-scm.com/docs/git-config#_configuration_file

Hope this helps you set up your computer for efficient work with git on all your projects!

How to become a true full-stack developer

Cen — Mon, 15 Mar 2021 11:03:22 +0000

What is the standard definition of a full stack developer

When you look at the majority of full-stack developer and the majority of job offers that look for a `full-stack we only have two big part that is dug up:

the classic front end/back end duo

front end dev capabilities being often only js, little HTML, and little CSS.

back end capabilities, often only js and database.

But that's not my definition of what a true full-stack developer scope of knowledge should cover. Let me dig in now in all the other parts you should start to get interested in and learn to achieve this scope.

What you should aim for calling you a true full-stack developer

the list :

Front and back
HTML/CSS
CI/CD
Infrastructure
Agile
Technical Monitoring

Front and Back

Front and back are the main tools in your daily work and you should focus your first phase of learning on these two subjects.

HTML and CSS

Get specialized in using a CSS framework. I recommend Tailwind as it forces you to know your CSS and also lets you think hard about your interface.
You should be able to put an interface together from a template made by your designer

CI/CD

As a modern software engineer you will deal with git A LOT and a proper way to handle git is to include CI/CD process to ensure quality and add automation things to gain time and quality for your project. Large-scale applications will have a strong CI/CD in place.

That means that sometimes you will handle use cases that include CI/CD to be fixed or created. Knowing your CI game will make your proposal of improvement and fix more impactful.

Infrastructure

We all know this now but cloud-computing is the thing at the moment. Your production environment, pre-production, and even sometimes local will work on services of famous cloud provisioner like AWS. Starting from this simple fact we can conclude that a big part of what is going on behind your daily work is Infrastructure and it's much more accessible than you think.

Knowing your infrastructure game will allow you to be efficient on your codebase behavior and also allow you to build up a little working POC fast. I strongly recommend learning Infra stuff and even try to pass a certification as it let you learn a lot on the subject.

You will need it for logging system and track, alert setup, managing some DB understanding in deep your CI system, manage the load on your app, and many other things.

Agile notion

Yes, we all are now using the famous agile method in various ways like KABAN and SCRUM but do you truly understand what it means, except doing daily meetings and 2 weeks sprint?

Agile has one goal: delete key blocker points and relief a team from a pain point. A developer as he is a daily user of this working method should always be proactive on how his team apply the agile method and find a way to fix pain point.

Rework your daily meetings challenge the importance of each meeting and work with your PO or scrum master hand in hand to improve your working process (extreme programming - a clear definition of done, the definition of ready, etc...)

Technological Monitor

AND MOST IMPORTANT overdo technological monitor about web dev, and SHARE everything you learn that is in the scope of your activities, It could be VSCODE last update, share benchmark of apple M1, explain a lib to co-workers or just do R&D project with them or on your own

Conclusion

As described above, Web development covers a large scope. To conclude I will give you one last tip. Don't overlearn on all of this subject.

My best advice is to know a little of all but search for solid notions and to specialize in only some of those subjects.

We are developers, our main activity is to code. Just get rock solid on the back end and front end dev and then use some of your time to learn all of those side subjects but do not become a pro on it, you are not a DevOps you are not a Scrum Master or a tech guru that do bigs conferences.

You're a software engineer that need to understand and challenge all this other subject to be better at what you do - coding.

cover image link: Technology picture created by pressfoto - fr.freepik.com