This is going to be a full series of typescript where you will learn from basic topics like string, boolean to more complex like Type Aliases, enums, Interface, generics, and etc.

Interface

An interface declaration is another way to name an object type. You can create it by using the interface keyword:

interface User {
    name: string,
    age: number,
}

// ✅ CORRECT
let newUser : User = {name: "John", age: 28};
// ❌ ERROR: property 'age' is missing
let newUser : User = {name: "John"};
// ❌ ERROR: missing the following properties from type 'User': name, age 
let newUser : User = {};

You can also use readonly and optional approach in interface:

interface User {
    readonly id: number     // readonly variable
    name: string,
    age: number,
    specialKey? : string,     // optional 
}

You can also pass functions to the interface, there are two ways to do that:

// Method-1
interface User {
    getDiscount(coupon: string): number        
}

// For Both you need to call this like this:
const newUser: User = {
    getDiscount: (coupon: "KIJ298DD9J") => {
        return 10;
    }
}

// Method-2
interface User {
    getDiscount: (coupon: string) => number
}

// 👉 You see I have changed the 'coupon' to 'couponName'
// You don't need to match the name of the parameter here
// It will take care of it
const newUser: User = {
    getDiscount: (couponName: "KIJ298DD9J") => {
        return 10;
    }
}

In Method 1 you can simply use the () to say it functions like: getDiscount(): number and string are the return types, and it takes no arguments.

In Method 2 we use an arrow function like getDiscount: () => number.

Interface vs Type

Type aliases and interfaces are very similar, and in many cases, you can choose between them freely. Almost all features of an interface are available in type The key distinction is that a type cannot be reopened to add new properties vs. an interface that is always extendable.

Let’s Differentiate them with a few examples:

Adding new fields

In interface you can add new fields to the existing interface, but you cannot add new fields to an existing type. It will throw an error.

Interface

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

interface User {
    name: string;
}

// Now you can add all the three values to the User interface
const user: User = {
    id: "2323232",
    email: "foo@email.com",
    name: "Foo";
}

Type

type User = {
    id: string;
}

type User = {
    email: string;
}

// ❌ ERROR: Duplicate identifier "User"

In interface you can add new fields and can change them however you want but in type you can't do that. Once a type is created it can't be changed.

Extends

To extend the already defined interface or type both have a different approach. interface uses extends keyword, while type uses intersection.

interface

interface Car {
    model: string;
    color: string;
}

// 👇 You can extend an interface using 'extends' keywords
interface Tesla extends Car {
  autoPilotModelName: string;
};

// ✅ Use Case
const newCar: Tesla = {
    model: "S",
    color: "red",
    autoPilotModelName: "xyz"
}

type

type Car = {
    model: string;
    color: string;
}
// 👇 In type you need to use Intersection
type Tesla = Car & {
  autoPilotModelName: string;
};

const newCar: Tesla = {
    model: "S",
    color: "red",
    autoPilotModelName: "xyz"
}

Union

In interface you cannot create a union type, but you can do that if you are using type. Let's take an example:

interface

interface User  {
    email: string;
}

interface Admin  {
    email: string;
    adminKey: string;
}

// ❌ ERROR: '{' expected.
interface Person = User | Admin;

// ✅ CORRECT: you can create union type like this
type Person = User | Admin;

// ✅ CORRECT: However you can use union type inside the interface
interface Person {
    person: User | Admin;
}

type

type User = {
    email: string;
}

type Admin = {
    email: string;
    adminKey: string;
}

// ✅ You can do that.
type Person = User | Admin;

In the above example, you might have noticed that when I tried to assign a union type to the interface (interface Person = User | Admin) it throws an error. It's because you cannot assign anything to interface. Its deceleration syntax is similar to class. But both have different working.

class MyClass {}

interface Hello {}

Wrapping up

In this article, I have explained what interface is and how to use it, along with the difference between type and interface. This article gives you a basic understanding of the interface.

This is a series of Typescript lessons that will help you learn Typescript from scratch. If you enjoyed this article, then don't forget to give ❤️ and bookmark 🏷️for later use and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see you in the next one.

Connect with me

• Twitter

• GitHub

• LinkedIn

• Instagram

• Website

• Newsletter

• Buy me a coffee

This is going to be a full series of typescript where you will learn from basic topics like string, boolean to more complex like Type Aliases, enums, Interface, generics, and etc.

Enums

Enums are one of the few features TypeScript has which is not a type-level extension of JavaScript.

Enums allow a developer to define a set of named constants. Using enums can make it easier to document intent, or create a set of distinct cases. TypeScript provides both numeric and string-based enums.

Numeric enums

We will first take a look at Numeric enums and how we can create them. An enum can be defined using the enum keyword.

enum Direction  {
    Up, 
    Down, 
    Left, 
    Right,
}

Above, we have a numeric enum where Up is initialized with 0. All of the following members are auto-incremented from that point on. In other words, Direction.Up has the value 0, Down has 1, Left has 2, and Right has 3.

In the Numeric enums, the values are in the incremented order as explained above. You can manipulate these values as you want. Let’s take a few examples of that:

// Up = 1, Down = 2, Left = 3, Right = 4
enum Direction  {
    Up = 1, 
    Down, 
    Left, 
    Right,
}

// Up = 1, Down = 5, Left = 6, Right = 7
enum Direction  {
    Up, 
    Down = 5, 
    Left, 
    Right,
}

// Up = 10, Down = 11, Left = 14, Right = 15
enum Direction  {
    Up = 10, 
    Down, 
    Left = 14, 
    Right,
}

In the above code example, I have updated the values and shown you what will be the value of the others members.

String enums

String enums are a similar concept. In a string enum, each member has to be constant-initialized with a string literal, or with another string enum member.

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

To access any members you can do the following:

console.log(Direction.Up) // output: UP

Heterogeneous enums

enums can be mixed with string and numeric members, but it’s not clear why you would ever want to do so. it’s advised that you don’t do this.

enum ExtraFries {
  No = 0,
  Yes = "YES",
}

If you want to learn more about Enums, consider reading the documentation.

Wrapping up

In this article, I have explained what enums are and how you can use them in your projects. Enums, short for Enumerated Types.

This is a series of Typescript that will help you to learn Typescript from the scratch. If you enjoyed this article, then don't forget to give ❤️ and Bookmark 🏷️for later use and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one.

Connect with me

• Twitter

• GitHub

• LinkedIn

• Instagram

• Website

• Newsletter

• Buy me a coffee

OSlash

OSlash is a free, top-rated Text Expander and Custom Keyboard Shortcut for you and your team. Using OSlash Text Expander, insert text templates everywhere you work in apps such as Gmail, LinkedIn, Intercom, and Google Docs.

Auto Group Tabs

Auto Group Tabs Keeps your tab bar tidy with auto grouping without the need to group them manually. Group tabs automatically based on URL.

Validity

Validity can be used to quickly validate your HTML documents from the toolbar. Just click the icon in the toolbar to validate the current document without leaving the page. The number of validation errors can be seen in the tool tip and the detail can be seen in the console tab of Chrome's developer tools.

Find+

{find+} is a powerful Find-in-Page extension for Google Chrome allowing you to search a web page or document by regular expression. It has been designed to look and behave much like the native CTRL+F tool, but extended with various useful features.

Gimli Tailwind

Gimli Tailwind lets developers debug and work with Tailwind CSS more intuitively. This is a DevTools extension enabling smart tools for Tailwind CSS.

Eesel

All your Google Docs, Notion pages and other work documents, right in your new tab. Your team creates many work docs in many different apps. A project brief in Google Docs, a timeline in Notion, a mockup in Figma. It can be an exhausting game of trial and error to find the links you need, and that's where eesel comes in.

Buffer

Buffer is the best way to share great content to Social Networks from anywhere on the web. The Buffer Chrome extension allows you to schedule posts to Buffer (https://buffer.com). By using this tool, you will be able to create and schedule your social media content faster from anywhere on the web. As we add updates to Buffer.com, you’ll automatically get the new features here, too!

DuckDuckGo Privacy Essentials

DuckDuckGo Privacy Essentials is used for protecting your privacy online. Locking the front door won’t stop the most determined folks from getting inside, especially if you’ve left the back door and windows unlocked and an extra key under the doormat. That’s why we offer multiple types of privacy protection, all with the single purpose of better protecting your privacy in Chrome.

Save image as Type

Save image as PNG, JPG or WebP by context menu on image. Add context menu for images to save image as PNG, JPG or WebP format.

Awesome Screenshot and Screen Recorder

Awesome Screenshot and Screen Recorder is the best screen recorder and screen capture & screenshot tool to record screens.

Features

• Provide stable service for more than 10 years

• Loved by more than 3 million users across different platforms 👍

• ️Local Screen Recorder & Cloud Screen recorder 2 in 1

• Screenshot / Screen capture & Screen recorder 2 in 1

• Instant sharing of your screenshots and screen recordings

Wrapping up

These were some extensions for this month (February 2023). You might have heard some before, but if you like anyone then don't forget to press ❤️. I have personally used all the above extensions and from my experience, every extension is worth installing.

What is an operating system?

An operating system acts as an intermediary between the user of a computer and computer hardware. An operating system is a software that manages computer hardware. The hardware must provide appropriate mechanisms to ensure the correct operation of the computer system and to prevent user programs from interfering with the proper operation of the system.

Functions of an Operating System

The operating system has the following functions:

Booting

• Use diagnostic routines to test the system for equipment failure.

• Copies BIOS (Basic Input/Output System) programs from ROM chips to main memory.

• Loads operating system into computer's main memory.

Managing Computer Resources

• Keeps track of locations in main memory where programs and data are stored (memory management).

• Move data and programs back and forth between main memory and secondary storage (swapping) via partitioning, using foreground, using a and background areas, and using buffers and queues.

Managing files

• Copies files/programs from one disk to another.

• Backup files/programs.

• Erases (deletes) files/programs.

• Renames files.

Services provided by the operating system

There is various type of services that the operating system provides. These services are:

Program Execution

• The purpose of the computer system is to allow users to execute programs efficiently.

• The operating system provides an environment where the user can conveniently run these programs.

• To run a program, the program is required to be loaded into the RAM first and then assigned CPU time for its execution.

I/O Operations

• Each program requires an input and after processing the input submitted by the user it produces an output.

• This involves the user of I/O devices.

• The I/O service cannot be provided by user-level programs and it must be provided by the operating system.

File System Manipulation

• While working on the computer, generally a user is required to manipulate various types of files like opening a file, saving a file and deleting a file from the storage disk.

• This is an important task that is also performed by the operating system.

Communication

• The operating system performs communication among various types of processes in the form of shared memory.

• Communications may be implemented via shared memory, in which two or more processes read and write to a shared section of memory.

Error Detection

• The main function of the operating system is to detect and the errors like bad sector on the hard disk, memory overflow and errors related to I/O devices and other components.

• After detecting the errors, the operating system takes an appropriate action fo consistent computing.

Resource Allocation

• In the multitasking environment, when multiple processes are running at the same time, it is the responsibility of the operating system to allocate the required resources to each process for its better utilization.

• These resources include CPU, main memory, tape drive or secondary storage, etc.

Protection and Security

• Protection involved ensuring that all access to system resources is controlled.

• Such security starts with requiring each user to authenticate him or her to the system, usually using a password, to gain access to system resources.

Type of Operating System

There are various types of operating systems:

Batch System

This type of operating system was used in the earlier age, to speed up processing, jobs with similar needs were batched together and were run through the computer as a group. The definitive feature of a batch system is the lack of interaction between the user and the job while the job is executing. In this execution environment, the CPU is often idle.

Multi-programming System

In this type of OS, more than one program will reside in the main memory. The OS picks and begins to execute one of the jobs in the memory. Eventually, the job may have to wait for some task, the operating system simply switches to another job and executes it. When the first job finishes, the waiting job gets the CPU back. As long as there is always some job to execute, the CPU will never be idle.

Time-sharing System

A time-shared OS, allows many users to share the computer simultaneously. A time-shared operating system uses CPU scheduling and multi-programming to provide each user with a small portion of a time-shared computer.

Real-time Operating System

The real-time operating system is a special-purpose operating system, used when there are rigid time requirements for the operation of a processor or the flow of data.

Difference between shell and kernel

What are system calls?

System calls provide an interface to the services made available by an operating system. These calls are generally available as routines written in C and C++, although certain low-level tasks (for example, tasks where hardware must be accessed directly), may need to write using assembly language.

Following are some system calls used in process management:

• fork(): To create a new process.

• exec(): To execute a new program in a process.

• wait(): To wait until a created process completes its execution.

• exit(): To exit from a process execution.

• getpid(): To get a process identifier of the current process.

• getppid(): To get parent process identifier.

• brk(): To increase/decrease the data segment size of a process.

What is CPU scheduling?

CPU scheduling is the management of CPU resources. The scheduling mechanism is part of the process manager that handles the removal of the running process from the CPU and the selection of another process based on a particular strategy. CPU scheduling is the basis of muli-programmed operating systems. The scheduler is responsible for multiplexing processes on the CPU. CPU scheduling is used to increase CPU utilization.

Wrapping up

In this article, I've explained what is an operating system, its functions, types and services. What are kernel, shell and system calls? and what is CPU scheduling? Now you have a little bit of an understanding of each of the topics. If you want more explanation on these or another topic just let me know in the comments section. And don't forget to ❤️ the article. I'll see you in the next one.

Connect with me

• Twitter

• GitHub

• LinkedIn

• Instagram

• Website

• Newsletter

• Buy me a coffee

This is going to be a full series of typescript where you will learn from basic topics like string, boolean to more complex like Type Aliases, enums, Interface, generics, and etc.

Arrays

To create an Array of a certain type there is a special syntax for that:

let variableName: arrayType[] = []

// For example: 
let num: number[] = [1,2,3]
let name: string[] = ["sam", "john"]

As shown in the above example that you can define the array's type by using the type followed by square brackets (number[])

This is simple right? Let's look at some other concepts. Let's look at the Dos and Don'ts of an Array:

// ❌ DON'T 
// If you define an array like this then the type will be 'never'
// which means you can't push anything
let num:[] = []
num.push(1) // ERROR


let num:number[] = []
num.push(1)
num.push("232")  // ❌ ERROR : rgument of type 'string' is not assignable


let names:string[] = []
names.push("john")
names.push(1)     // ❌ ERROR : rgument of type 'number' is not assignable

/* -----------Let's Add Objects into Array-------- */
type User ={
    name: string,
    email: string,
}

// ✅ That's how you can define an array of objects
const allUsers: User[] = [];

// ✅ CORRECT
allUsers.push({name: "sam", email:"sam@hello.com"})
// ❌ ERROR: email property missing
allUsers.push({name: "sam"})
// ❌ ERROR: missing name & email
allUsers.push({})

The above example shows how you can use Array. There is one more way to create an Array:

let newArray: Array<number> = []
let nameArray: Array<string> = []
let allUsers: Array<User> = []

It means that creating an Array of the defined type in <>.

Readonly Array

The ReadonlyArray is a special type that describes arrays that shouldn’t be changed.

let players: ReadonlyArray<string> = ["ronaldo", "messi"]
// or
let  players: readonly string[] = ["ronaldo", "messi"];  

// ❌ Can't do that
players[0] = "jordon";
players.push("shaq")

// ✅ Can do 
console.log(players[0]);

In the above code, there are two methods from which you can define the readonly Array.

At the End of this section, I want to add one more thing to this. What if we want a nested Array means Array inside an array? You can do that as shown in the following code:

const cords: number[][] = [
    [22, 55],
    [45, 22]
]

const data: number[][][] = [
    [[22], [25, 65]],
    [[99, 34, 56], [12, 9]],
]

You can define the nested array as shown in the above code. You can nest as many arrays as you want. And if you want them to be different types then you need to create a type for them.

Tuples

Tuple types are a type of array of known length where the different elements may have different types. A value of type [number, string] is guaranteed to have a length of 2, with a number at element 0 and a string at element 1. Let's look at the example:

let x: [number, string];

x = [110, "Mohan"]; // ✅ CORRECT 
x[0] = 120; // ✅ CORRECT 
x = ["Mohan", 110];    // ❌ ERROR: Initialize it incorrectly

Let's take another example of RGB. As you already know RGB takes three values that should be numbered.

let rgb: [number, number, number];

rgb = [225, 224, 10];         // ✅ CORRECT
rgb = [225, 224, "10"];        // ❌ ERROR: type 'string' is not assignable to type 'number'
rgb = [225, 224, 10, 40];    // ❌ ERROR : Source has 4 element(s) but target allows only 3

Issue with Tuples

Tuples sound great right? But they have a major flaw. TypeScript allows you to call methods like push(), pop(), shift(), unshift(), and splice() on values of tuple types.

If you don't understand what I am saying then let me show you with code example. I am taking the old example of RGB:

let rgb: [number, number, number];

// ✅ This is correct because it has all the values
rgb = [225, 224, 10];

// ❌ ERROR : Source has 4 element(s) but target allows only 3
// It is not allowed Right.
rgb = [225, 224, 10, 40];    

// Now let's do this:
rgb.push(50)
console.log(rgb)  // output: [225, 224, 10, 50]
// This is the flaw.

You can apply any Array method to Tuple. That's why it destroys the supposed guarantees of tuple types.

Don't only rely on Tuples. Use only when necessary.

Wrapping up

In this article, I explained how you can use type in Array and there is a special thing that is Read only Array. In which you can't manipulate the values. In addition, I'll talk about Tuples as well. How you can use it?

This is a series of Typescript that will help you to learn Typescript from the scratch. If you enjoyed this article, then don't forget to give ❤️ and Bookmark 🏷️for later use and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one.

Connect with me

• Twitter

• GitHub

• LinkedIn

• Instagram

• Website

• Newsletter

• Buy me a coffee

🎨Theme

I use Andromeda as my primary theme for my vs code

🪟Icons

For Icons, I sometimes switch between Material Icon Theme and Material Theme Icons.

Material Icon Theme

Material Theme Icons

⚒️ Extensions

Now the best part, There are a lot of extensions I mentioned only my favorite or the one that I use mostly every day.

Auto Rename Tag

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

Download: Auto Rename Tag

Bracket Pair Colorization Toggler

A VS Code extension that gives you a simple command to quickly toggle the global “Bracket Pair Colorization”

Download: Bracket Pair Colorization Toggler

C/C++**

The C/C++ extension adds language support for C/C++ to Visual Studio Code, including editing (IntelliSense) and debugging features.

Download: C/C++

Code Runner

Run code snippet or code file for multiple languages

Download: Code Runner

Code Spell Checker

A basic spell checker that works well with code and documents.

The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.

Download: Code Spell Checker

DotENV

VSCode .env syntax highlighting.

Download: DotENV

Error Lens

ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.

Download: Error Lens

ES7+ React/Redux/React-Native snippets

JavaScript and React/Redux snippets in ES7+ with Babel plugin features for VS Code

Download: ES7+ React/Redux/React-Native snippets

ESLint

The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version. If you haven't installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.

Download: ESLint

Git Graph

View a Git Graph of your repository, and easily perform Git actions from the graph. Configurable to look the way you want!

Download: Git Graph

GitLens

GitLens supercharges Git inside VS Code and unlocks untapped knowledge within each repository. It helps you to visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more.

Download: GitLens

HTML Boilerplate

This extension provides the standard HTML boilerplate code used in all web applications.

Download: HTML Boilerplate

Import Cost

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack in order to detect the imported size.

Download: Import Cost

Live Server

It'll enable live changes without saving files.

Download: Live Server

Markdown All in One

All you need for Markdown (keyboard shortcuts, table of contents, auto preview and more).

Note: VS Code has basic Markdown support out-of-the-box (e.g, Markdown preview), please see the official documentation for more information.

Download: Markdown All in One

Markdown Preview Enhanced

It shows the enhanced preview of your markdown content.

Download: Markdown Preview Enhanced

Paste JSON as Code

Copy JSON, paste as Go, TypeScript, C#, C++ and more.

Download - Paste JSON as Code

Prettier

Code formatter using prettier

Download - Prettier

Python

IntelliSense (Pylance), Linting, Debugging (multi-threaded, remote), Jupyter Notebooks, code formatting, refactoring, unit tests, and more.

Download - Python

Settings Sync

Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.

Download - Settings Sync

Tailwind CSS IntelliSense

Intelligent Tailwind CSS tooling for VS Code

Download - Tailwind CSS IntelliSense

TODO Highlight

Highlight TODO, FIXME and other annotations within your code.

Sometimes you forget to review the TODOs you've added while coding before you publish the code to production. So I've been wanting an extension for a long time that highlights them and reminds me that there are notes or things not done yet.

Hope this extension helps you as well.

Download - TODO Highlight

Turbo Console Log

Automating the process of writing meaningful log messages.

Download - Turbo Console Log

Tabnine AI

Tabnine is an AI code assistant that makes you a better developer. Tabnine will increase your development velocity with real-time code completions in all the most popular coding languages and IDEs.

Download - Tabnine AI

⚙️Settings

The following JSON code shows my vs code setting:

// user/settings.json
{
  "files.autoSave": "afterDelay",
  "editor.mouseWheelZoom": true,
  "code-runner.clearPreviousOutput": true,
  "code-runner.ignoreSelection": true,
  "code-runner.runInTerminal": true,
  "code-runner.saveAllFilesBeforeRun": true,
  "code-runner.saveFileBeforeRun": true,
  "editor.wordWrap": "on",
  "C_Cpp.updateChannel": "Insiders",
  "editor.suggestSelection": "first",
  "python.jediEnabled": false,
  "editor.fontSize": 17,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "editor.minimap.size": "fit",
  "editor.fontFamily": "Consolas, DejaVu Sans Mono, monospace",
  "editor.fontLigatures": false,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "python.formatting.provider": "yapf",
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "html-css-class-completion.enableEmmetSupport": true,
  "editor.formatOnPaste": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "[python]": {
    "editor.defaultFormatter": "ms-python.python"
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[c]": {
    "editor.defaultFormatter": "ms-vscode.cpptools"
  },
  "editor.fontWeight": "300",
  "editor.fastScrollSensitivity": 6,
  "explorer.confirmDragAndDrop": false,
  "vsicons.dontShowNewVersionMessage": true,
  "workbench.iconTheme": "material-icon-theme",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.renderWhitespace": "none",
  "workbench.startupEditor": "newUntitledFile",
  "liveServer.settings.multiRootWorkspaceName": "",
  "liveServer.settings.port": 5000,
  "liveServer.settings.donotVerifyTags": true,
  "editor.formatOnSave": true,
  "html.format.indentInnerHtml": true,
  "editor.formatOnType": true,
  "printcode.tabSize": 4,
  "terminal.integrated.confirmOnExit": "hasChildProcesses",
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.rightClickBehavior": "default",
  "tailwindCSS.emmetCompletions": true,
  "sync.gist": "527c3e29660c53c3f17c32260188d66d",
  "gitlens.hovers.currentLine.over": "line",
  "terminal.integrated.profiles.windows": {
    "PowerShell": {
      "source": "PowerShell",
      "icon": "terminal-powershell"
    },
    "Command Prompt": {
      "path": [
        "${env:windir}\\Sysnative\\cmd.exe",
        "${env:windir}\\System32\\cmd.exe"
      ],
      "args": [],
      "icon": "terminal-cmd"
    },
    "Git Bash": {
      "source": "Git Bash"
    },
    "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe (migrated)": {
      "path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
      "args": []
    },
    "Windows PowerShell": {
      "path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
    },
    "Ubuntu (WSL)": {
      "path": "C:\\WINDOWS\\System32\\wsl.exe",
      "args": [
        "-d",
        "Ubuntu"
      ]
    }
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "[dotenv]": {
    "editor.defaultFormatter": "foxundermoon.shell-format"
  },
  "editor.tabSize": 2,
  "cSpell.customDictionaries": {
    "custom-dictionary-user": {
      "name": "custom-dictionary-user",
      "path": "~/.cspell/custom-dictionary-user.txt",
      "addWords": true,
      "scope": "user"
    }
  },
  "window.restoreFullscreen": true,
  "tabnine.experimentalAutoImports": true,
  "files.defaultLanguage": "${activeEditorLanguage}",
  "bracket-pair-colorizer-2.depreciation-notice": false,
  "workbench.editor.wrapTabs": true,
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[ignore]": {
    "editor.defaultFormatter": "foxundermoon.shell-format"
  },
  "terminal.integrated.fontFamily": "courier new",
  "terminal.integrated.defaultProfile.windows": "pwsh.exe -nologo",
  "terminal.integrated.shellIntegration.enabled": true,
  "terminal.integrated.shellIntegration.showWelcome": false,
  "editor.accessibilitySupport": "off",
  "editor.bracketPairColorization.enabled": true,
  "todohighlight.isEnable": true,
  "terminal.integrated.shellIntegration.history": 1000,
  "turboConsoleLog.insertEnclosingClass": false,
  "turboConsoleLog.insertEnclosingFunction": false,
  "files.autoSaveDelay": 500,
  "liveServer.settings.CustomBrowser": "chrome",
  "liveServer.settings.host": "localhost",
  "liveServer.settings.fullReload": true,
  "workbench.editor.enablePreview": false,
  "workbench.colorTheme": "Andromeda Bordered"
}

Wrapping up

This is all. I hope you find this useful. If you do, then don't forget to give ❤️ and Bookmark 🏷️ for later use and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one.

Connect with me

• Twitter

• GitHub

• LinkedIn

• Instagram

• Website

• Newsletter

• Buy me a coffee

ChatGPT for Google

ChatGPT for Google displays ChatGPT response alongside search engine results This is an open-source extension that shows the response from ChatGPT alongside Google, Bing, DuckDuckGo and other search engines

Features:

• Supports all popular search engines

• Access ChatGPT from the extension popup

• Markdown rendering

• Code highlights

• Dark mode

• Feedback to improve ChatGPT

• Custom trigger mode

• Copy to clipboard

Summarize

With the Summarize extension, you can get the main ideas of any page in just one click, without leaving the page. Whether you're reading news, articles, blogs, or research reports, Summarize have you covered.

Flonnect

Flonnect extensions allow Screen Recording from your Webcam and Desktop Record your screen or camera along with your audio. This extension supports all types of screen recordings for free with unlimited usage.

• Free to Use

• No Watermark

• No Lag screen recording

• Unlimited Usage

• Includes audio recording with Webcam

Hackertab

Hackertab allows you to customize your default tab page that includes news, tools and events from top sources such as GitHub Trendings, Hacker News, DevTo, Medium, and Product Hunt. No matter what type of developer you are, you'll find valuable and relevant information here.

SuperDev

SuperDev is a browser toolbox for designers, developers and techies that minimizes the development/designing time and provides various tools to debug the web without any hassle. It contains 18 tools for developers so you won't have to install a separate extension for each one.

GitHub Writer

GitHub Writer provides all the features available in the GitHub plain-text editor, including Markdown input. For features like tables, it offers a much easier experience in comparison to plain-text Markdown and allows users to be more productive. No more switching to the Preview tab to see what you write!

Querio

Querio adds the Missing DevTools network inspector for GraphQL and XHR requests.

• Querio intercepts and displays GraphQL and XHR requests in a nicer and more dev-friendly way than the built-in Network panel

• Each request made on the page is beautifully formatted and highlighted

• Search data in request/response

• Filtering by request type and searching by GraphQL query/mutation name

• Dark and Light themes

  

Little Star

Little Star comes from the idea of categorizing projects directly when clicking the GitHub Star button, and I want to manage and local my GitHub stars quickly. So building a browser extension with a comfortable UI comes to my mind.

You

Search less, find and create more with generative AI apps supercharging your search and helping you write better, code better, and design better. You.com has a beautiful and modern UI. Quickly access generative AI apps powered by OpenAI models (such as GPT-3).

OCR Editor

OCR text extractor, or image-to-text converter extracts text from images and videos. It uses optical character recognition (OCR) technology to accurately convert images into text. It supports text extraction from all the images.

Wrapping up

These were some extensions for this month (January 2023). You might have heard some before, but if you like anyone then don't forget to press ❤️. I have personally used all the above extensions and from my experience, every extension is worth installing.

This is going to be a full series of typescript where you will learn from basic topics like string, boolean to more complex like Type Aliases, enums, Interface, generics, etc.

Type Aliases

We can use the objects as shown in the previous example but what if there are 100s of functions that need the same data of the user then you'll be typing for all of them separately that's where Type comes into play. Let's look at the old example and how we can use type to make it reusable.

type User = {
  email: string;
  password: string;
};

// ✅ CORRECT
// Passsing Object Type Aliases
function signUp(user: User){}

// ✅ It's the correct way to call
signUp({email: "some@hello.com", password: "1233"})

// ❌ ERROR : 'name' does not exist in type 'User'
signUp({email: "some@hello.com", password: "1233", name: "Sam"})

// ✅ You can pass extra information by using a variable
let userObj =  {email:  "some@hello.com", password:  "1233", name:  "Sam"}
signUp(userObj)

You can use a type alias to give a name to any type at all, not just an object type. For example:

type ID = number;
let userId: ID = 111; // ✅ CORRECT

I guess you get the point that we use type to define the actual type of the variable. It can be used anywhere.

Readonly and Optional

readonly means that the user or anyone cannot manipulate that variable, for example id optional means that these parameters are optional which we have looked at before in functions.

Let's take an example of User where the user will have three properties id, email, and name.

// Defining the User type
type User = {
    readonly id : string,
    name: string,
    email: string,
}

// Now Let's create a user variable using the above type:
let myUser:User = {
    id : "3947394",
    name: "harry",
    email: "h@harry.com",
}

// Now I'll assign the values to the myUser object

// ✅ CORRECT
myUser.name = "Potter";
myUser.email = "hello@harry.com";

// ❌ ERROR: Cannot assign to 'id' because it is a read-only property
myUser.id = "121324";

Now, let's take a look at the optional:

// Defining the User type
type User = {
    readonly id : string,
    name: string,
    email: string,
    dob?: string     // optional
}

// ✅ CORRECT
let user1: User = {
    id : "3947394",
    name: "harry",
    email: "h@harry.com",
    dob: "02/12/1998"
}

// ✅ CORRECT
let user2: User = {
    id : "3947394",
    name: "harry",
    email: "h@harry.com",
}

Intersection in type

You can combine two or more types using &. You can do that as shown in the following code:

type User = {
    readonly id : string,
    name: string,
    email: string,
}

type Admin = User & {
    key: string, 
}

// You can use Admin like this:
let newAdmin: Admin = {
  id: "3KD5D874",
  name: "Lucifer",
  email: "lucifer@hell.com",
  key: "Oh my me!",
};

Now Admin will have User properties as well as shown in the above code.

Type Aliases in Functions

As I have defined multiple types in the above code. These are the custom type that you can even use in functions in form of Parameters or Return Values. You just need to define the type and then pass it as the parameter.

Type Aliases as a function parameter

 type User = {
    name: string,
    email: string,
    password: string, 
}
// You can use optional variables as well 

// Function that will add user to the database
function addUser(user: User){
    // do some database opertion
}


// ❌ ERROR:  Property 'password' is missing in type '{ name: string; email: string; }' but required in type 'User'
addUser({name: "Rao", email: "rao@gmail.com")
// ✅ CORRECT
addUser({name: "Rao", email: "rao@gmail.com", password: "12345678"})

Type Aliases as a function return value

type User = {
    _id: string 
    name: string,
    email: string,
}

// ✅ CORRECT
function loginUser(id: string): User {
    // performing some operation
    return {_id: id, name: "Joe", email:"joe@gmail.com"}
}

// ❌ ERROR: Property 'email' is missing
function loginUser(id: string): User {
    // performing some operation
    return {_id: id, name: "Joe"}
}

Union

In Typescript, you can define more than one type of variable. You can do that by just putting (|) in the middle of two types. Let me show you what I am saying:

let id: string | number;

id = 123;             // ✅
id = "34398493";    // ✅

Both the example shown in the above code is correct. Let's take a little more complex example to understand how it works:

type User = {
    name: string,
    id : number
}

type Admin ={
    username: string,
    id: number,
    key: number,
}

let newUser : User | Admin;

// ✅ CORRECT
newUser = {name: "John", id: 123};
newUser = {username : "j333", id : 123, key: 345};
newUser = {name: "j333", id : 123, key: 345};

// ❌ ERROR: Property 'key' is missing
newUser = {username : "j333", id : 123};

Union in Functions

You can also use these with function parameters as shown below:

// ✅ It works and id have string and number type
function setUserId(id: string | number){
    console.log(id);
}

// ❌ ERROR : 
// What if we do like this:
function setUserId(id: string | number ){
    id.toLowerCase()  // ❌ ERROR: Property 'toLowerCase' does not exist on type 'number
}

Now the above code will show you an error because id has two types string and number. The string can be converted to lowercase but the number can't. That's why it is showing you the error. You can use the conditional statement to do your desired stuff. Such as:

function setUserId(id: string | number ){
    if (id === "string") {
        id.toLowerCase()
    }
    // do other things
}

Now it won't give you any errors because we are making sure that toLowerCase() only calls when the id is a string.

Union in Array

In the array section, we discussed that we can set an array type with two methods. But the issue with that is What if we want an array that has multiple types of values such as string and number then what do we do? The answer is Union. Now let's take a look at how you do it:

// You might be thinking like this
// Nah ❌ you can't do like that
let newArray: number[] | string[] = [1,2, "hello"];

// ✅ Correct way to define the array with multiple type is:
let newArray: (number | string)[] = [1,2, "hello"];

Special Case for Union

Now imagine you are working on CSS Framework and you are designing a Button. And you are asking the user to tell what size should button have. Now you can use the variable type as string but the user can type anything, right? Let's understand this via an example:

// ❌ WRONG APPROACH
let ButtonSize: string;

ButtonSize = "big";
ButtonSize = "medium";
ButtonSize = "don't know";  // that's why don't use this

// ✅ CORRECT APPROACH
let ButtonSize : "sm" | "md" | "lg" | "xl";

ButtonSize = "sm";
ButtonSize = "md";
ButtonSize = "lg";
ButtonSize = "xl";

// ❌ ERROR: Type 'large' is not assignable to type
ButtonSize = "large";

As you saw at the end of the above code the typescript restricts you from assigning large to ButtonSize. It only accepts special types defined by you for the button.

Your Task

Now, It's your turn to create something. So, for that You have to create a type for a User that will have the following properties:

• _id: a string representing a unique identifier for the user

• name: a string representing the user's name

• posts: an array of objects, each representing a post made by the user, with properties id, title, and body

• comments: an array of objects, each representing a comment made by the user, with properties id, postId, and body.

Wrapping up

In this article, I explained what is Type Aliases and how you can define your own types in typescript and use that in functions or classes as well. Along with Type Aliases, I have also explained how you can use Union to create multiple type variables which means that one variable can have multiple types at once.

This is a series of Typescript that will help you to learn Typescript from the scratch. If you enjoyed this article, then don't forget to give ❤️ and Bookmark 🏷️for later use and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one.

Connect with me

• Twitter

• GitHub

• LinkedIn

• Instagram

• Website

• Newsletter

• Buy me a coffee

I create this list for myself then I thought why don't I share it with you? Let's look at what swags I am talking about.

1. There is no place like 127.0.0.1

"There is no place like 127.0.0.1" means "There is no place like home". As most of you already know that 127.0.0.1 is the loopback address, popularly termed localhost. Most of us use it daily for local development. Whether we're developing some front-end or some back-end web application, we'll visit it multiple times during the day. It will be released on February 1, 2023 (Limited Edition).

2. I are programmer I make computer beep boop

"Beep Boop" is a common catchphrase describing mechanical beings, often robots and droids. It was first widely used in the first Start wars movie (New Hope, 1977) by a robot r2-d2. Even though he was extremely skilled and intelligent, he wasn't able to talk, but only produce beep-boop sounds instead. Those sounds were understood by other robots like c3po. It will be released on February 1, 2023 (Limited Edition).

3. Docker saves the day

Before there was docker we used to run various shell scripts to install the needed dependencies for our app. Docker's first open-source version was published in 2013, but to be fair, it didn't gain widespread adoption till around 2016. Docker was truly revolutionary for its time. Due to its virtualization layers, it was able to spin up containers in just a couple of seconds. If you have already used docker then go for this. It will be released on April 1, 2023 (Limited Edition).

4. It's harder to read code than to write it

We’re programmers, we build some amazing and complex things. But sometimes when you like someone else's build then you are curious how he did, he achieve that and then you look at their code. Sometimes it is easy to understand, but sometimes it goes above your head. Sometimes you can't even read your code (man.... what did I do?) That's why It's harder to read code than to write it.

5. May Stack Overflow be with you

Now it is funny because we take a lot of help from Stack Overflow to find answers to technical questions or solutions to programming. It's like when you have some kind of error or bug just go to Stack Overflow. It's become a daily routine for developers.

6. Developer Vocabulary

It's one of my favorite mugs which I'll be buying in 2023. If you know you know. A lot of developers say that the use of swearwords helps them get rid of stress, while others do it for fun or out of habit.

7. Minimalist Backpack

This swag is offered by daily.dev and I am looking forward to this backpack. It just looks so awesome to me. If you feel like you're carrying half of your belongings with you at all times, this backpack is for you! It has a spacious inside compartment (with a pocket for your laptop), and a hidden back pocket for safekeeping your most valuable items.

8. Sticker Pack

For a long time I want to get my hands on these sticker packs due to some circumstances, I wasn't able to get them last year. But this year, for sure, I'll buy them as soon as possible.

9. Next.js T-Shirt

Next.js is my favorite web development framework and having a t-shirt of Next.js will be the best thing. I am definitely sure that this t-shirt will become one of my favorite purchases ever.

10. Youth Invertocat Hoodie

What would be the best hood in winter than GitHub's? Sometimes coding requires working in a cold environment so you need this to stay away from cold. I really this merch as well for my 2023 collection.

Wrapping up

It was a fun article. Let me know what you think about these products. If you have any suggestions then let me know in the comment section. If you enjoyed this article, then don't forget to give ❤️ and Bookmark it 🏷️for later use. I'll see in the next one.

References

• devshirt.club

• redbubble.com

• etsy.com

• store.daily.dev

• shop.forem.com

• thegithubshop.com

This is going to be a full series of typescript where you will learn from basic topics like string, boolean to more complex like Type Aliases, enums, Interface, generics, and etc.

Functions

Writing function is a piece of cake when you know the JS but it gets a little bit complex in typescript. Don’t worry, we will take every aspect of that. We need to define the types of two things in function Parameters & Return Types.

Parameters

Function parameters are the names listed in the function's definition. I'll take an old example that I've mentioned before:

// This is a norma JS Function that take two number and returns the sum 
// Problem is when you call the function you can pass any value 
// It won't show error because the variable does not have any kind of type
function increaseScore(currentScore, increaseBy){
    return currentScore + increaseBy;
}

// Now we define that both parameters have `number` type and it will only take the number
// otherwise it will throw an error
function increaseScore(currentScore: number, increaseBy: number) {
  return currentScore + increaseBy;
}

Following is an example of the error it will show when you pass the wrong value to the function:

function increaseScore(currentScore:number, increaseBy:number){
    console.log(currentScore + increaseBy);
}

increaseScore(10, 2) // ✅ Correct
increaseScore(10,  "2");      // ❌ Error
increaseScore(10,  [2,3,4])    // ❌ Error

Return Types

Return types matter. Because In typescript there are many return types. For example, you already know boolean, number and string. But the question here is how we defined which type should return from the function. You can do that by the following syntax.

// Syntax
function funcName(para: paraType): returnType {
    //........
}


// For Example:
function greetings(name: string): string {
  return "hello" + name;
}

greetings("john");    // ✅
greetings(true);     // ❌ ERROR: Expected String

// greet is 'string' type because greetings() return stirng type
let greet = greetings("Don");
greet = 2;     // ❌ ERROR: because type is 'string'

Other Types

void

void represents the return value of functions that don’t return a value. It’s the inferred type any time a function doesn’t have any return statements or doesn’t return any explicit value from those return statements.

// This function doesn't return anything thus its return type is void
function sayHi(name: string): void {
    console.log("Hi! " + name);
}

never

The never type represents values that are never observed. In a return type, this means that the function throws an exception or terminates the execution of the program.

function handleError(errMsg: string): never {
  throw new Error(errMsg);
}

There are a lot more other types you can take a look at the documentation for further use.

Optional Parameters

When you define parameters, sometimes you don't need to pass the parameters. So for that, you can add ? next to the parameter as shown in the following code:

function doSomething(num?: number) {
  // ...
}
doSomething();      // ✅ OK
doSomething(10);    // ✅ OK

Note: If you are using num as an optional parameter, and if you don't pass it as an argument, then it would beundefined by default. So, you can detect that by simply checking (typeof num !== 'undefined').

Working with Object

In typescript working with objects could make you feel a little weird. Why? You will know why at the end of this section. There are many instances where you can use objects. Let's look at them one by one-

Passing Object as Parameter

Passing an object as a Parameter could be a little tricky. You need to define the types of each property you are passing as shown in the following code:

// Destructuring an Object
function signUp({email, password}: {email: string, password: string}): void{
    console.log(email);
}

// You can also define the signUp function like the following
function signUp(user: {email:  string, password:  string}):  void{
    console.log(user.email);    
}

signUp();     // ❌ ERROR: need to pass an object
signUp({});   // ❌ ERROR: to pass an object with email & password ,
signUp({email: "hello@gmail.com", password: "12345678"}); // ✅ Correct

Now, what if you want to pass an object with more than these two parameters:

function signUp(user: { email: string; password: string }): void {
  console.log(user);
}

// Passing name in the signUp function
// ❌ ERROR: 'name' does not exist
signUp({ email: "hello@j471n.in", password: "12345678", name: "Johnny" }); 


// Creating a separate object and then passing it with the name
// ✅ Correct and No Error, But if you use 'name' in the signUp function then you'll get an error
let newUser = { email: "hello@j471n.in", password: "12345678", name: "Johnny" };
signUp(newUser);

Returning Object from Function

You can return an object through many ways from a function some of them are shown in the following code along with whether is it correct or not.

// ❌ ERROR: A function whose declared type is neither 'void' nor 'any' must return a value
// As function needs to return an object with name & age properties
function getInfo():{name:  string, age:  number}{}

// ❌ ERROR: Property 'age' is missing
// Function must have all the properties as specified (name, age)
// And It only returns the name that's why it throws an error
function getInfo():{name: string, age: number}{
  return {name: "John"};
}

// ✅ CORRECT 
// No Error Because all the things are correct
function getInfo():{name: string, age: number}{
  return {name: "John", age: 29};
}

// ❌ ERROR: 'lastName' does not exist  
// As function should return only 'name' and 'age'
// And it returns 'lastName' too
function getInfo():{name: string, age: number}{
  return {name: "John", age: 29, lastName: "Doe"};
}

// ✅ CORRECT 
// You can assign an object to some variable and then return it 
// Even if it has more properties as described
function getInfo():{name: string, age: number}{
  let user = {name: "John", age: 29, lastName: "Doe"}
  return user;
}

// ❌ ERROR: A function whose declared type is neither 'void' nor 'any' must return a value
// As you can see it has two {}
// First {} shows that it should return an object
// Second {} is function definition
// It should return an object
function getInfo():{}{}

// ✅ CORRECT 
// It returns and object that's why it works, It can have any properties because we haven't specified
function getInfo():{}{
  return {name: "John"}
}

The above code example might be scary to look at but we can achieve these things with Type Aliases as well. We'll look at it in the next article.

Wrapping up

In this article, I explained How you can use typescript in functions. And How to restrict the function to take different types of values than define parameters. It will be a basic introduction to functions as we go in-depth in this series you will learn so much more about functions such as How you can use Type Aliases or Interface to define custom types for Functions.

This is a series of Typescript that will help you to learn Typescript from the scratch. If you enjoyed this article, then don't forget to give ❤️ and Bookmark 🏷️for later use and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one.

Connect with me

This is going to be a full series of typescript where you will learn from basic topics like string, boolean to more complex like Type Aliases, enums, Interface, generics, and etc.

Types in Typescript

• number

• string

• boolean

• null

• undefined

• void

• object

• array

• tuples

• unknown

• never

• any (should not use)

and many more.

Situations to use Typescript

For example, there is a function increaseScore and it takes currentScore and increases the score by increaseBy number and returns the updated score.

function increaseScore(currentScore, increaseBy){
    return currentScore + increaseBy;
}

increaseScore(10, 2) // output : 12
increaseScore(10, "2") // output : 102

If someone passes the string or other thing, then it will throw an error in the production or runtime. Such as in the second example where the score becomes 102 it's a bug as shown in the image.

Now, How can we prevent that using typescript? We will look at the later in depth. You can define the type of a variable like this-

let variableName: type = value;

Primitive Types

Primitive types in JavaScript are-

• string

• boolean

• number

string

String values are surrounded by single quotation marks or double quotation marks. They are used to store text data.

let player: string = "John";

// ✅ CORRECT
player = "anny";

// ❌ ERROR: Type 'number' is not assignable to type 'string
player = 4;

As you can see we assign the name (Anny) in line 3 and we assign the number in line 4 and it immediately throws an error. It's what typescript is. You don't need to run the TS to get the error as JS does.

boolean

In boolean it could be either true or false otherwise, it will throw you an error as shown in the following code-

let isLoggedIn: boolean = false;

// ✅ CORRECT
isLoggedIn = true;

// ❌ ERROR: Type 'number' is not assignable to type 'boolean'
isLoggedIn = 5;

// ❌ ERROR: Type 'string' is not assignable to type 'boolean'.
isLoggedIn = "hello";

number

JavaScript does not have a special runtime value for integers, so there’s no equivalent to int or float - everything is simply number that's why in line 5 when we assign the price to 500.53 it doesn't give you an error because it's a number.

let price: number = 200;

// 👇✅ CORRECT
price = 300;
price = 500.53;

// 👇❌ Error
price = false;
price = "3000";

Don't use `any`

So the question occurred that why Shouldn't we use any? The answer is simply because when you use any then you disable all the type checking for that variable and anyone can assign any kind of value to the variable. For example:

// 👇 Wrong Practice (by default 'any')
let hello;

// 👇 'hello' can take any type of value
hello =  2;
hello =  "world";
hello =  true;

On line: 1 we have not defined the type of the variable hello so its defaults as any and you can assign whatever you want as shown in the above example.

Now Imagine the scenario where you are calling an API and getting the data in the string format, but someone changes it to the boolean or number then your whole app functionality will crash due to that mistake. And Typescript prevents you from doing that. For example:

let data; // type by default is any

function getData(){
    //.........API Call
    return  "Message";
}

data = getData();         // no issue because expected string

Another Example:

let data;

function getData(){
    //.........API Call
    return 823;
}

data = getData();         // ISSUE: expected string but returns the number (won't throw error because type is `any`)

Solution:

let data: string;

function getData(){
    //.........API Call
    return  "Message";
}

data = getData();

Now, if you pass something that is not a string then it will throw an error as shown below:

let data: string;

function getData(){
  //........API Call
  return true;
}

// ❌ ERROR: Type 'boolean' is not assignable to type 'string'
data = getData();

You can use any whenever you don’t want a particular value to cause type-checking errors.

I'll cover void, never and others later in this series.

Wrapping up

In this article, I explained how you can use typescript to make sure that variable type is secure and no other value can manipulate that variable.

This is a series of Typescript that will help you to learn Typescript from the scratch. If you enjoyed this article, then don't forget to give ❤️ and Bookmark 🏷️for later use and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one.

Connect with me

This is going to be a full series of typescript where you will learn from basic topics like string, boolean to more complex like Type Aliases, enums, Interface, generics, and etc.

What is Typescript?

TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor. TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno, and in your apps. TypeScript understands JavaScript and uses type inference to give you great tooling without additional code.

• Typescript is a superset of JavaScript.

• It doesn't add more features.

• It allows you to code in a manner so that your code faces much less error in the run time or production.

Don't use typescript if your project is small. You need to use the superpower of the typescript if you are using it to make your code bug and error-free. It's all about the Type safety.

> 2 + "2"
> '22' // ans

> null + 2
> 2

> undefined + 2
> NaN

This should not be done as it makes the issue bigger.

What does typescript do?

It does static checking - whenever you are writing the code, then the code is constantly monitored by IDE to check if you are making any syntax error or something but not in JS. Whatever you write, it's ok.

But when you run the code in your environment, then it throws the error. It would be very helpful to get the idea of whether what you are doing is correct or not as you write the code.

Analyze the code as we type. That's it.

How does Development Process work?

You write all your code in TS format and that code is converted to JavaScript. TS is a development tool and your project still run JS as the browser doesn't understand Typescript.

That's why when you install the TS package then you download it as a dev dependency.

TS Playground: Here you can play with typescript and check how it is converted.

let car = {
  module: "xyz",
  color: "red",
};

// ❌ ERROR: Property 'price' does not exist on type '{ module: string; color: string; }'.
car.price;

As the above code shows in the example we are trying to get the price which does not exist in the object and it shows the error before running the code.

let num1 =  2;
let num2 =  "2"

// 👇 It works but shouldn't be done right?
let sum = num1 + num2; // "22"

The above code does not show any kind of error and when you run it will show you the result as 22 which we don't want. It is allowed, but we can bypass that by defining each variable as a type. We will look at the in later in this article.

Install Typescript

There are two different installations for the project you can use-

Global Installation

In this, you install the Typescript as the global package. you can do that by simply running the following command in your terminal window-

npm install -g typescript

TypeScript in Your Project

When you install typescript for your projects such as for React or Angular then their typescript config file is required what kind of setting you want or not. Use the following command to install the typescript to your project-

npm install typescript --save-dev

For more info visit here.

Wrapping up

In this article, I explained what Typescript is and how it works and how you can install it in your system.

This is a series of Typescript that will help you to learn Typescript from the scratch. If you enjoyed this article, then don't forget to give ❤️ and Bookmark 🏷️for later use and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one.

Connect with me

Twitter	GitHub	LinkedIn	Instagram	Website	Newsletter	Support

In my portfolio, I have just implemented Google Analytics Data API so that I can show how many people have visited this site in the last 7 days. As my Portfolio is already using Google Analytics to track user visits. I just need to use its API to fetch that data.

But first, look at how it's showing in my portfolio:

Requirements

We need three values to fetch the data:

• GA_PROPERTY_ID

• GA_CLIENT_EMAIL

• GA_PRIVATE_KEY

GA_PROPERTY_ID

First, you need to get GA_PROPERTY_ID of the Google Analytics project from which you want to fetch the data.

To get this you need to follow these steps:

• Visit Google Analytics.

• Select Admin.

• Select the Property.

• Select Property Settings.

If the Property Settings shows a numeric PROPERTY ID such as "123...", this is the numeric Id of your Google Analytics 4 property.

GA_CLIENT_EMAIL and GA_PRIVATE_KEY

To get GA_CLIENT_EMAIL and GA_PRIVATE_KEY you need to visit Google Analytics Data API's documentation and then click on Enable the Google Analytics Data API v1 button as shown in the image below:

And then you will be prompted to enter the name of the project. After entering the name click on the Next button

Then you will be prompted to download the credential file as JSON.

After downloading that file. You will find private_key and client_email properties in that JSON file. Save these two in your .env.local.

Now you have all the necessary information or keys.

Installing Dependency

To fetch the data you need to install a @google-analytics/data package. You can do that by simply running the following command in the terminal.

yarn add @google-analytics/data
# or 
npm i @google-analytics/data
# or
pnpm i @google-analytics/data

Using Google Analytics Data API in Project

As I am using Next.js for my portfolio so I will use Next.js API Routes. You can do the same thing with different frameworks.

I will create an API route pages/api/ga.ts:

import { NextApiRequest, NextApiResponse } from "next";
import { BetaAnalyticsDataClient } from "@google-analytics/data";

// 👇 Setting PropertyId
const propertyId = process.env.GA_PROPERTY_ID;

const analyticsDataClient = new BetaAnalyticsDataClient({
  credentials: {
    client_email: process.env.GA_CLIENT_EMAIL,
    private_key: process.env.GA_PRIVATE_KEY?.replace(/\n/gm, "\n"), // replacing is necessary
  },
});

export default async function handler(
  _req: NextApiRequest,
  res: NextApiResponse
) {
  // 👇 Running a simple report
  const [response] = await analyticsDataClient.runReport({
    property: `properties/${propertyId}`,
    dateRanges: [
      {
        startDate: `7daysAgo`, //👈  e.g. "7daysAgo" or "30daysAgo"
        endDate: "today",
      },
    ],
    dimensions: [
      {
        name: "year", // I wanted the data be year wised
      },
    ],
    metrics: [
      {
        name: "activeUsers", // it returs the active users
      },
    ],
  });

  // Returning the respose.
  return res.status(200).json({
    response,
  });
}

This is all you need to fetch the data. and It will return the response. My portfolio code can be found on GitHub you can check out How I used it.

You can play with Dimensions and Metrics to get your desired data.

Wrapping up

In this article, I have explained how you can use the Google Analytics Data API to fetch data from Google Analytics. After reading this article, you should now be able to easily implement this API on your projects.

If you enjoyed this article, then don't forget to give ❤️ and Bookmark 🏷️for later use and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one.

Connect with me

1. NOVA (new tab)

Nova is one of the best new tab extensions for Chrome with a minimalistic, light and dark theme, and a fully customizable New Tab page with a built-in to-do list, clock, calendar, Pomodoro, notes, RSS reader, weather and news.

2. DeepL Translate

DeepL Translate lets you translate from one language to another. Sounds similar? Yes. It sounds like Google translate. The main difference is that it has tons of features such as-

• Translate while you are writing.

• Translate while you are reading.

• Full-page translation (For PRO users).

• It supports 26 languages.

• If you visit their website then you can even translate the whole document (.pdf, .docx, .ppt)

3. StayFree

StayFree - Web Analytics & Screen Time Tracker is analytics, self-control, productivity, and web addiction controller extension. StayFree provides analytics to help you understand how you are using the internet (daily website usage statistics), and factors leading to distractions (such as advertisements you have seen), and focus your time by restricting the usage of distracting websites.

4. Listly

Listly converts any website to Excel in just a few clicks. Speed up your data collection and put your time and effort into what really matters to you. You can also Schedule a daily extraction.

5. Minimal Theme for Twitter

Minimal Theme for Twitter refines and cleans up the Twitter interface, and adds useful features and customizations:

• Remove the distracting trends sidebar

• Customize your Timeline width

• Remove Timeline and Tweet borders for a more minimalistic look

• Customize the left navigation

• Hide vanity counts under tweets

• Remove promoted posts

• Remove "Who to Follow" and other suggestions

• Hide the Search Bar

• Hide the Tweet button

• Hide View Counts

6. Robots Exclusion Checker

Robots Exclusion Checker is designed to visually indicate whether any robots exclusions are preventing your page from being crawled or indexed by Search Engines

The extension reports on 5 elements:

• Robots.txt

• Meta Robots tag

• X-robots-tag

• Rel=Canonical

• UGC, Sponsored and Nofollow attribute values

7. Motion DevTools

Motion DevTools is a browser extension to inspect, edit and export animations made with CSS and Motion One. I highly recommend you use this extension if you work with animations.

8. Chroma

Chroma is a free, user-friendly color tool that allows you to easily sample colors from your screen while browsing the internet. It is highly intuitive and simple to use.

9. Monaco Markdown Editor For GitHub

Monaco Markdown Editor For GitHub is an open-source extension that replaces all GitHub text areas for authoring markdowns with a monaco editor.

Features:

• Syntax Highlighting of Markdown and Code Snippets

• Tab to indent and Shift+Tab to outdent entire selections

• Multi-Cursor Editing

10. Dopely Colors

Dopely Colors is a package of advanced color tools that we believed to be essential for every creator.

Features:

• Color Picker

• Color Gradient Generator

• Color Tab

• Color Contrast Checker

• Color Blindness Simulator

• Color Toner

• Save & Export your colors

Merry Christmas 🎄

Wrapping up

These were some extensions for this month (December 2022). You might have heard some before, but if you like anyone then don't forget to press ❤️. I have personally used all the above extensions and from my experience, every extension is worth installing.

Most of you might have heard of this Picture-in-Picture Extension. It allows you to watch videos in a floating window (always on top of other windows). It works mostly on every site.

But we will create our custom Button that makes this feature available for our website by default. So our users won't need this extension. Let's dive into it.

What is Picture-in-Picture API?

The Picture-in-Picture API allows websites to create a floating video window always on top of other windows so that users may continue consuming media while they interact with other content sites or applications on their devices. Simple, Right?

Let's look at the demo

The following gif shows the demo of how that works:

Let's build it

First, we need a structure means HTML so for that I have simply used two things video and button.

<div class="video-container">
   <video id="videoElement" controls loop src="https://imgur.com/yIVEIR9.mp4"></video>
   <button id="toggleButton">Enable Floating Video</button>
</div>

CSS for this can be found at the end of the article in the Codepen. Now the main thing is JavaScript. Let's add that.

First getting the video and button:

const video = document.getElementById("videoElement");
const toggleBtn = document.getElementById("toggleButton");

After that, we need to verify if your browser supports that or not. You can do like the following:

// 👇Checking that if it is working or not
if ("pictureInPictureEnabled" in document) {
    /// .... other code
}

Now we need to add an event listener on the toggleBtn and when it is clicked then we will run a function called togglePiPMode

 // 👇Checking that if it is working or not
if ("pictureInPictureEnabled" in document) {
  // 👇 Running 'togglePiPMode' function when user click the button
  toggleBtn.addEventListener("click", togglePiPMode);
}

Now it's time to create togglePiPMode function. First, I check if the user is already in PiP mode or not. If he is not the only then request for Picture-in-Picture mode. otherwise simply just exit from PiP. I have wrapped the code in try...catch block to make sure if something goes wrong then it will console the error.

function togglePiPMode() {
  try {
    // 👇 Checking that if user should not be in PiP mode
    if (video !== document.pictureInPictureElement) {
      video.requestPictureInPicture();
    } else {
      document.exitPictureInPicture(); // 👈 If already in PIP Mode then exit
    }
  } catch (error) {
    console.log(error); // Console any error if any
  }
}

Now Picture-in-Picture mode will work flawlessly.

Full JavaScript Code

const video = document.getElementById("videoElement");
const toggleBtn = document.getElementById("toggleButton");

// 👇Checking that if it is working or not
if ("pictureInPictureEnabled" in document) {
  // 👇 Running 'togglePiPMode' function when user click the button
  toggleBtn.addEventListener("click", togglePiPMode);

  // 👇 event trigger when you enter in PiP mode
  video.addEventListener("enterpictureinpicture", () => {
    toggleBtn.textContent = "Exit PiP Mode";
  });

  // 👇 event trigger when you leave the PiP mode
  video.addEventListener("leavepictureinpicture", () => {
    toggleBtn.textContent = "Enter PiP Mode";
  });
}

function togglePiPMode() {
  try {
    // 👇 Checking that if user should not be in PiP mode
    if (video !== document.pictureInPictureElement) {
      video.requestPictureInPicture();
    } else {
      document.exitPictureInPicture(); // 👈 If already in PIP Mode then exit
    }
  } catch (error) {
    console.log(error); // Console any error if any
  }
}

Let's understand events in PiP

The Picture-in-Picture API defines three events, which can be used to detect when picture-in-picture mode is toggled and when the floating video window is resized.

• enterpictureinpicture: Sent to a HTMLVideoElement when it enters picture-in-picture mode.

• leavepictureinpicture : Sent to a HTMLVideoElement when it leaves picture-in-picture mode.

• resize : Sent to a PictureInPictureWindow when it changes size.

Let's use enterpictureinpicture & leavepictureinpicture in our little project. I'll be changing the Button Text as these events are fired. Let's take a look at the code:

 // 👇 event trigger when you enter in PiP mode
  video.addEventListener("enterpictureinpicture", () => {
    toggleBtn.textContent = "Exit PiP Mode";
  });

  // 👇 event trigger when you leave the PiP mode
  video.addEventListener("leavepictureinpicture", () => {
    toggleBtn.textContent = "Enter PiP Mode";
  });

Now, Let's take a look at the resize event. When we run requestPictureInPicture then it returns a promise and we add resize event on pictureInPictureWindow when it fires then we call a function windowDimensions.

// 👇 This will print the dimensions of the window
function windowDimensions(evt) {
  const pipWindow = evt.target;
  console.log(`Floating window Dimensions : ${pipWindow.width}x${pipWindow.height}px`);
}

// 👇 resize event on pip window
video.requestPictureInPicture().then((pictureInPictureWindow) => {
  pictureInPictureWindow.onresize = windowDimensions;
});

From PictureInPictureWindow interface we can get the width and height and resize event of the floating video window.

Codepen

Conclusion

In this article, I have explained how you can make a floating video player by using Picture-in-Picture (PiP) JavaScript Web API. Now, you can try to add this functionality to your website.

If you enjoyed this article, then don't forget to give ❤️ and Bookmark 🏷️for later use and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one.

Connect with me

It was built for people who publish, whether it’s a one-person operation or a whole organization. We know how much work goes into creating great newsletters, and we can help yours reach a loyal audience and grow indefinitely.

But now it's getting shut down for some reason from January 12, 2023, you won't be able to access your Revue account. All the data will be deleted.

We don't know why it's getting shut down as Revue is a product by Twitter. And since Elon Musk completed his $44 billion takeover of Twitter. I guess It's all part of his plan.

You can export all of your data including your subscriber list, past newsletter issues, and analytics by following the instructions here after logging into your account.

If you are using Revue like me then we have to migrate to some other places. You can share your thoughts on this in the comment section. I'll see you in the next one.

Testing your API is essential in ensuring that it functions correctly and meets your users' needs. But it can be tricky to know where to start and what to test.

In this article, we'll walk you through the process of testing your GraphQL API. We'll cover everything from initial testing to load testing and performance monitoring. By the end of this article, you'll know exactly how to test your API and be one step closer to launching it into the world.

What Is GraphQL?

If you don't know, Graph QL is a query language for APIs that Facebook developed. It allows you to request data from an API in a declarative way, making it easier to work with complex data structures.

A server-side runtime for executing queries using a type system you define for your data is provided by GraphQL, which is a query language for your API. GraphQL is supported by your current code and data rather than being dependent on any one database or storage engine.

Kinds and fields on those types are defined, and then functions are provided for each field on each type to establish a GraphQL service.

GraphQL is gaining popularity, and many developers are looking to learn how to use it. In this guide, we'll go over some of the basics of Graph QL and how you can test your Graph QL API.

Why Use it?

So, why use Graph QL?

There are a few reasons:

• Simplicity: Graph QL is designed to make it easy to get the data you need in one request. This means less code overall, which is always a good thing.

• Efficiency: With Graph QL, you can specify the data you need in your request. This means that the server doesn't have to send extra data you don't need, making your requests more efficient.

• Flexibility: Graph QL is flexible enough to be used for any data, from simple data like strings and numbers to more complex data like images and files.

Overall, Graph QL is a powerful tool that can make your life easier as a developer. So if you're working with APIs, definitely give it a try!

What is worth considering?

Now when you know what Graph QL is and why it's essential, it's time to learn what to pay attention for when testing a Graph QL API. There are a few different things you'll want to keep in mind:

• The data types of the fields: Are they the correct data type?

• The structure of the data: Is the data in the correct order?

• The relationships between types: Are the correct relationships being returned?

• The permissions: Is the data being returned only to those who have permission to see it?

To ensure that the queries, adjustments, and schemas made for an application function as intended on the front end, GraphQL APIs are used.

These are just a few things you'll want to remember when testing a Graph QL API. By keeping these factors in mind, you can be sure that your API is functioning correctly and that your data is safe.

How to test GraphQL API?

Now that we've gone over some of the basics of testing GraphQL APIs let's talk about some of the tools you can use to make your life a little easier.

You can do a few different things on the pc you want to test your Graph QL API.

First, you can use a third-party testing tool like GraphiQL. This is an excellent option to test your API without writing any code.

Another option is to use a tool like Postman. With this tool, you can send HTTP requests to your API and get back responses. This is an excellent option if you want to test specific functionality in your API.

Also you can use a tool like SoapUI. This tool allows you to test both SOAP and REST APIs. This is an excellent option if you want to test your API with both requests.

The most well-liked GraphQL functional testing tools for JavaScript developers. You may quickly test assertions to confirm API replies as part of an automated test suite by integrating with a tool like Mocha.

There are a few different options out there for PC users, like GraphQL CLI. It's a command line interface that lets you automatically generate tests for your schema, and it's straightforward to use.

Another great option is the Apollo Server playground. This is a graphical interface that lets you interact with your API in a user-friendly way.

These tools are great for testing GraphQL APIs, so it comes down to personal preference. They are used on PC, but there is a twist next to make your testing and work efficiency fast.

API Tester Mobile App all problems one solution

In the struggle to test your APIs using your phone, API Tester mobile app enters the picture. It will give you a hassle-free and mobile-optimized experience for your ongoing job.

It has all the tools you need to use them. You may run any test using its advanced editor and API Testing environment.

Your laptop is no longer necessary for daily use. Debugging and testing your API can be done quickly and anywhere. It supports the Graph Ql testing environment and all effective methods, gets, and posts.

You can download API Tester mobile app to your iPhone, iPad, or Android device. Go to apitester.org or search on Play store/App Store, API Tester on the first you can see and download it.

After the development of API, do you want to test your GraphQL queries on a mobile app? You can see below how to use API Tester to do just that.

Let's walk through how to use API Tester to test your GraphQL queries on a mobile app.

Let's use the API tester app

I'm going to use the GitHub API to demonstrate how to work with API tester app. It provides us with real-time data.

Click on “create new request” or + button in the top right corner to start a Graph QL request.

You can see it in the attached screenshots.

You can easily see the Graph QL option in the new tab under Other features. Clicking on it will take you to further options.

On the next screen you can see a GraphQL untitled request.

The first tab shows the Request Name. You can rename it (which is a good practice so you don't get confused when there are a lot of requests).

Also, you need to provide the API URL and paste it into the section starting with HTTPS.

You can see multiple options for Graph QL below, like Body, Variables, Headers, Docs and Settings.

I'm going to use the GitHub API, so I’ll put api.github.com/graphql in URL section.

When you execute this now, you’ll see that this endpoint requires you to be authenticated, so you need to provide the authentication information and go to the request.

In Headers sections you can see the OAuth option, so you need to provide the access token here. You can generate it from GitHub. I will use my token for an explanation and provide it in the corresponding field.

How to generate GitHub API token access key.

To generate a key first go to github.com and login in to your account using your credentials and then Click on your profile avatar in the upper right corner and select Settings.

At the bottom end you can see another option known as Developer settings. Click on that option and move further next.

Three options are visible here. Select personal access token option, and click on generate new token (classic).

In the note section write the name of the token to remember it. Next select the expiry date of the token.

In the further options select scope of tokens for OAuth access purpose, what you want to permit access or don't want to permit access.

After completing these settings click on the button at bottom Generate token.

Congratulations, our token is generated! We can use it for your API testing in the app for Graph QL testing purpose.

Let's continue creating the request

I will paste a created token in the OAuth section as I pointed above.

Now we have to go to the Body section and specify a query to get your specific type of data. For example, let’s get the id information of a GitHub account. So, the corresponding Query using the GitHub login is written in the body tab, as you can see in the screenshot below.

If you execute this now, you will see that you get the login and id of the GitHub profile.

Also, if you want to get an URL, bio or whatever available information you want, you should provide it in the body section as a Query.

In the Docs section, you can see the queries and mutations. They will help you how to execute an explicit request.

Tips for Testing

Now that you know the basics of testing GraphQL on Mobile API Tester, here are a few tips to keep in mind:

• First, ensure you are using the latest version of the Graph QL schema. If you are not, then update your schema and rerun your tests.

• Second, check your resolvers. Make sure they are correctly resolving the data that you are querying for.

• Third, ensure your Graph QL server is running and accessible. You can do this by checking the server logs.

• Fourth, if you are using a mocked Graph QL server, ensure the mock data is correct.

• When creating tests, always start with the most straightforward queries possible and gradually add complexity. This will help you narrow down any issues more quickly.

• Pay attention to the structure of your queries and make sure they are well-formed. This includes using proper casing and indentation.

• Make use of the "debug" mode in Mobile API Tester to see precisely what is being sent with each request. This can be helpful for troubleshooting purposes.

• Keep your tests organized by creating separate projects for each type of test (e.g., unit vs. integration). This will make it easier to find what you're looking for later.

Following these tips, you should be able to test GraphQL on Mobile API Tester with no problems successfully.

Why API Tester Mobile app?

API tester mobile app is the best for API testing on Android and iOS devices because:

• It has a simple and easy-to-use interface that makes it easy to test your APIs.

• The app provides real-time feedback so you can see how your APIs are performing in actual use.

• It's fast and efficient, so you can quickly test multiple APIs.

API Tester Mobile app has been specifically designed to help developers test their APIs.

The app provides several features that make it easy to simulate real user interaction with your APIs.

For example, you can generate requests and responses, view logs, and track user interactions. The app also has a built-in debugger that makes exploring any errors during the testing process easy.

Conclusion

In this article we discussed how to test GraphQL API using the API Tester Mobile app. This is a must-have tool if you are working with API. It can help you troubleshoot issues. The app provides rich feedback so you can always know what is happening with your requests and responses everywhere in the world.

If you enjoyed this article, then don't forget to give ❤️ and Bookmark 🏷️for later use and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one.

Connect with me

Twitter	GitHub	LinkedIn	Instagram	Website	Newsletter	Support

1. Simplify Gmail

Brought to you by the co-founder and design lead for Google Inbox, Simplify Gmail is a browser extension for desktop Gmail that boosts productivity, strengthens privacy, and reduces️ stress. It makes the Gmail very simple in UI and more productive.

2. Bardeen

Bardeen is a no-code workflow automation app that replaces your repetitive tasks with a single shortcut. Connect your favorite web apps and build custom automations in minutes.

Suggested By - @dochan

3. Let Me Read That Article

Do you hate it when you want to read an article ad free, but the website says, "looks like you're using an ad-blocker"? Or when you have a limited number of reads on a news website until you have to subscribe? Same here, so here's an extension that will intercept those annoying popups and let you read that article.

Download

4. Image download center

Image Download Center - saves your time when you want to download images from a webpage.

Features:

• Download all images
• Supports many formats including PNG, JPEG, SVG, WEBP
• Filter by size (you can filter out website logos and design elements)
• Preserves file name

5. Paint Tool

Paint Tool - is a simple to use free extension that allows you to create and save quick and fun drawings while using Chrome! It can also be used as a Full Page screenshot tool.

6. Selenium IDE

The Selenium IDE is designed to record your interactions with websites to help you generate and maintain site automation, tests, and remove the need to manually step through repetitive takes.

7. Color by Fardos

Pick colors from websites, save colors & gradients, get matching shades and tints and create beautiful gradients. It's my favorite color picker.

Download

8. PixelZoomer

PixelZoomer takes a screenshot of the current website and provides various tools for pixel analysis. You can zoom into websites (up to 3200%), measure distances and pick colors with an eye dropper.

9. SpanTree

SpanTree makes navigating a GitLab repository feel like a breeze by providing a familiar tree structure.

Features

• Easy to navigate tree structure
• Resize the tree to your convenience
• Supports self-hosted GitLab instances (Along with compatibility mode for GitLab v12 and less)
• Lazy loaded file structure for a fast responsive user interface
• Inbuilt Dark Theme for GitLab
• Quick Search your Repository (using Ctrl/⌘ + P)

10. Briskine

Write emails faster! Increase your productivity with templates and keyboard shortcuts on Gmail, Outlook, or LinkedIn.

Download

Wrapping up

These were some extensions for this month (November 2022). You might have heard some before, but if you like anyone then don't forget to press ❤️. I have personally used all the above extensions and from my experience, every extension is worth installing.

To access your local server, you only one thing IP Address of the device where the server is running. Now there could be two scenarios where you are using Windows or Mac. You just need to get the IP Address. Let me show you how:

Open windows terminal and type ipconfig in the command line and you will get the following output:

You only need an IPv4 address and as you get it not type this in your mobile browser followed by PORT. For instance-

# IPv4:PORT 
192.168.64.201:3000

And if you are running any web app on localhost:3000 then you will be able to see that on your mobile devices also.

For Mac users you have to do the same-

• Get the IPv4 (use ifconfig command)
• Put that on your mobile device followed by PORT

And hurray!!!

If you are unable to fine the mac IP address then you can take a look the following article:

How to Find Your IP Address on a Mac

Following is the Video demo of how it works:

Wrapping up

That's all you need to run you localhost server on other devices. If you enjoyed this article, then don't forget to give ❤️ and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one.

🌐 Connect with me:

Twitter
Github
Instagram
Newsletter
LinkedIn
Website
Buy me a Coffee

Problem

We need to create the following container by using CSS Properties only:

Solution

So now look at the Solution and how we are going to achieve this.

HTML

<p c>
<p l>
<p r>

• <p c> : Center Circle
• <p l> : Left Triangle
• <p r> : Right Triangle

CSS

* {
  margin: 0;
  background: #0b2429;
}

body {
  display: grid;
  place-items: center;
}

p { position: absolute }

[c] {
  width: 50;
  height: 50;
  border-radius: 1in;
  border: 45px solid #f3ac3c;
  box-shadow: 0 0 0 20px #0b2429, 
              0 0 0 30px #998235;
  z-index: 1;
}

[l], [r] {
  height: 160;
  width: 82;
  clip-path: polygon(0 50%, 100% 100%, 100% 0);
  background: #998235;
}

[l] { left: 58 }

[r] {
  right: 57;
  transform: scalex(-1);
}

Note: In CSS Battle you can use 100 instead of 100px. You don't need to define px in CSS. However, if you are using rem or %, you need to pass them separately. That's why in the above CSS code there are no units mostly. For more info visit here

Minify the code or CSS by using any CSS Minifier. It helps you to reduce the characters in the code which will increase the score.

Minified Version:

<p c><p l><p r><style>*{margin:0;background:#0B2429}body{display:grid;place-items:center}p{position:absolute}[c]{width:50;height:50;border-radius:1in;border:45px solid #F3AC3C;box-shadow:0 0 0 20px #0B2429,0 0 0 30px #998235;z-index:1}[l],[r]{height:160;width:82;clip-path:polygon(0 50%,100% 100%,100% 0);background:#998235}[l]{left:58}[r]{right:57;transform:scalex(-1)}

Wrapping up

There are many ways to solve this. You can share your approach in the comments. If you like this then don't forget to ❤️ it. And I'll see you in the next article. See you soon.