Prerequisites

Please make sure you have the following installed in your local development environment:

• Node.js version >= 14.x.x installed
• Access to one package manager such as npm or yarn

1. Creating project directory

Create a project folder and use npm’s initializer command to create a package.json file:

$ mkdir server
$ cd server
$ npm init --yes

The --yes flag uses the default settings when initializing a package.json from the npm config you might have set up.

The package.json file created might look something like this:

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

2. Adding packages and config

We'll start by adding the following packages-

Dependencies:

• express: Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications APIs.

• dotenv: It is a lightweight npm package that automatically loads environment variables from a . env file into the process. env object.

Dev Dependencies

• typescript: Helps us write code in typescript and compile all of our codebases into plain javascript.

• ts-node: It helps us to run typescript code without precompiling to JS for faster development.

• nodemon: It is a simple monitor script for use during the development of a node.js app. It allows us to automatically restart the server when we make any changes in our code.

• @types/express : This package contains type definitions for Express

We'll install more packages later but let's start with the above ones-

$ npm install express
$ npm install dotenv
$ npm install -D typescript
$ npm install -D ts-node
$ npm install -D nodemon
$ npm install -D @types/express

Setting up TSConfig

The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.

Run the following command at the root of your project directory-

$ tsc --init

This command will generate a tsconfig.json file at the root of your project directory. The JSON will have many fields with comments explaining what they are and what are the possible values for each field.

Please make sure you have the following fields uncommented out with the following values-

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

You can learn more about these options here

Setting up ESLint + Prettier for linting and code formatting-

Installing ESLint:

$ npm install -D eslint
$ npm install -D @typescript-eslint/parser
$ npm install -D @typescript-eslint/eslint-plugin
$ npm install -D eslint-config-airbnb-base
$ npm install -D eslint-plugin-import

Installing Prettier:

$ npm install -D prettier
$ npm install -D  eslint-config-prettier
$ npm install -D eslint-plugin-prettier

Create a .prettierrc.yml file in your project directory-

tabWidth: 2
singleQuote: true

Next, create a .eslintrc.yml configuration file in your root folder to setup rules and parsing for the project-

env:
  es2021: true
  node: true
extends:
  - airbnb-base
  - plugin:@typescript-eslint/recommended
  - plugin:prettier/recommended
  - plugin:import/recommended
  - plugin:import/typescript
parser: '@typescript-eslint/parser'
parserOptions:
  ecmaVersion: 12
  sourceType: module
  project: ./tsconfig.json
plugins:
  - '@typescript-eslint'
rules:
  no-console: 'off'
  import/extensions: 'never'

Note that I have also addeded congigurations to integrate Prettier with ESLint, in the .eslintrc.yaml

Now, let's create a folder src and a file index.ts-

$ mkdir src
$ cd src
$ touch index.ts

Let's also add the following code, to begin with a minimal express server-

import express from 'express';
const app = express();
const PORT = 4000;

app.get('/', (req, res) => res.send('Express + TypeScript Server'));
app.listen(PORT, () => {
  console.log(`⚡️[server]: Server is running at https://localhost:${PORT}`);
});

Adding a Start Script:

Now, let's add some scripts to make it easier to run our code. Add the following to the package.json file.

  "scripts": {
    "start": "node dist/index.js",
    "build": "tsc",
    "dev": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }

Now you should be able to start the server using the command npm run dev and test it in your browser.

Visiting http://localhost:4000 in your browser should display Express + TypeScript Server text.

Extra: VS code settings I have installed some extensions and added the following setting to enable auto formatting on save etc-

Add a file .vscode/setting.json at the root of your project directory-

{
  "editor.tabSize": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "eslint.alwaysShowStatus": true,
  "files.autoSave": "onFocusChange",
  "[javascript]": {
    "editor.formatOnSave": false
  }
}

You'll also need to install the following extension-

• ESLint
• Prettier - Code formatter

Credits

• https://blog.logrocket.com/typescript-with-node-js-and-express/
• https://dev.to/caelinsutch/setting-up-a-typescript-nodejs-application-with-prettier-and-eslint-53jc?signin=true

Today, the last day of 2020, I was looking back and thinking what/how/who changed, how I grew, and most importantly what I learned. A lot of good and some not so good things happened this year. I couldn't resist myself from writing this blog post and sharing it with you people. A lot of things started popping into my mind but I have tried summarising the important ones into bullet points so that I can compare them with my learnings at the end of next year.

• Found my true passion: During my internship period at Scoar, I found myself working days-and nights continuously for around 1 month with just 4-5 hrs of sleep on an amazing project. At this time I realized that I don't just like doing FrontEnd but I have a passion for building beautiful User Interfaces that people love to use and play with. I figured out that I can do it all day and night without feeling bored or tired. React.js continued to be my favorite tool for converting the ideas into reality.

• Learned not to run on the ground if you can fly: This is a long story. I will write another post about it someday when the right time will come..when I'll feel that I have achieved something big. Long story short, I learned how to ignore everything that others are telling/doing and just focus on what you love to do.

This simple rule was easy to follow when I was in 1st and 2nd year but it became really difficult at the end of 3rd year of my college when our placement season started. Things were a bit different for me as compared to others. I was a core member of an early-stage startup and I had the responsibility of handling the Frontend of the whole platform (app), managing other team members, taking care of their code (collaborating on Github, merging their code, fixing merge conflicts, etc). This was a huge responsibility and I was not able to take out time to prepare for placements. Everybody but me was preparing for the job, doing DSA, apti, and all.. but what I was doing? wakeup-eat-ReactJs-sleep.

I remember myself panicking a lot sometimes thinking about what should I do. Should I also start doing what others are doing or continue to experiment with this startup? My friends often used to tell me "Tumko kya jarurat hai job ki. tumhara to fix hai.." but internally I was also very scared. In my whole college life, I was always involved in some work/internships and that too in the FrontEnd domain so I could not study course subjects (I know most of us don't do), do much of DSA or practice what is generally asked in placement tests/interviews.

Placement season started.. I gave some exams, cleared some but could not perform well in most. Especially the aptitude rounds were simply not doable for me. I somehow reached the interview round for the TCS (yeah, I am from a 3rd tier college and only these company visits our campus). The interview went very nicely.. I answered all the questions and was happy with my performance. But I don't know what they were looking for in a candidate that they rejected me (I even wore formals and tie in the online interview 😅). They didn't even care to give any feedback about why they rejected me 😑. Now I am thinking about why I even sat for such a company that was going to pay me even less than what I already was earning sitting in my room and that too along with attending college. After this incident, I took it as a sign of GOD and did not sit for any other companies. I knew about my expertise and decided that I should not participate in a race where I do not belong.

One important incident I will always remember. During this period there was a shift in my psychological state i.e the way of thinking. Since all of my friends were doing their own thing and sometimes in their own group, I started feeling left out. My thought process became so negative that I started to think that they are selfish and only care about themselves. I even cried (not really.. just a deep voice with some tears in my eyes) one day questioning them why they were doing this. But now I can see that it was a hard time and everyone was going through the same anxiety and pressure. I was too negative to think things like these. They are the best people in my life and I am proud of them. If you are reading this my friends, you guys really are the best. I am so fortunate to have a friend circle like yours. Love you all.

One more important thing, I am so thankful to all the people who supported me emotionally during this period. There were also some people in my LinkedIn connection (yeah, I don't have a girlfriend like others to talk to.. so in such an emotionally difficult situation, I try talking to people at LinkedIn 😅) who spoke to me on call to help me clear my doubts and guide me in the right direction. Thanks to everybody.

• Accepted my first Full-time job offer: Although I started working from my 2nd year (more seriously from 3rd year) of my college, and have been a part of an amazing company Udacity I recently got an opportunity to become a part of another amazing company (DabbleLab, based in USA, full-time) as a Software Engineer. The best thing, they allowed me to start working right from the day I accepted the offer. I am loving working on different projects and learning new technologies every week. I am so much loving the people and what I am doing here at this company that I can repeat this... I am loving it (recursion 😉)

• Became financially independent: This is what I am proud of. Being from a lower-middle-class family I know the importance of money and how hard it is to earn. I was fortunate to be able to start earning as early as from 2nd year of my college but 2020 was really at another level. From my self-earned money, I paid my college fees, cleared my education loan, bought myself all the fancy stuff I dreamt of having like an iPhone, a Macbook Pro (M1), a big fat 4k monitor, a personal home office/work desk setup, etc. It might not be a big deal for others but for me being able to do all these while still being in my college (I still have 6 months of college to complete) is just amazing and definitely a thing to be proud of.

• Helped in building the careers of 1000+ people: I love helping people by sharing my knowledge. That's why I joined Udacity as a Mentor. At the end of 2020, I have mentored so many students, reviewed 1000+ projects, answered around 400 technical questions, etc. Most of the students at Udacity are working professionals who are learning new technologies to switch their careers or just to add more skills under their belt. I was fortunate enough to help them and be a part of their journey. It was so amazing to talk to people from all over the world and interact with so many talented people. Helping other and reading their feedbacks keeps me motivated and hungry to push myself and learn more.

Recently I was being appreciated for being one of the best mentors at Udacity. I was also chosen among a handful of top mentors to become an Auditor to audit peer performance and keep in check the quality of project reviews done by other mentors.

• Learned about people.. the good and not so good people in my life: I obviously can't discuss much about this in public but I can say that I learned who are the people in my life who truly care about me.. and who don't. One take away is that both types of people have a significant contribution to my personal growth and I am thankful for them. The people who love me-- I love you too.. other people-- I love you more ;) I think this much is enough to write...It's been 6 hrs since I started 😅.. I'll now stop writing more...

One fun fact, at this moment (as I complete writing this post) I am wondering if this story is worth sharing? What some of you guys will be thinking after reading this story of mine.. "Why this guy is sharing his story.. has he achieved anything big? He has not even been placed in a big company like FAANG.." but then I remember my 2nd point above. I don't care what others think. Your definition of big achievements/being successful/happy etc is different from mine. I know where I started from, where I am going and I am loving what I'm doing. I am very happy and this is what really matters at the end of the day... Man, I am following my passion... I know even bigger things are coming my way... I just have to keep working hard 🤩

Looking forward to experiencing even more amazing next year.. Welcome 2021 🎉

(Originally posted here)

Finally, a killer React framework from the creators of React Router

If you have been developing Single Page Applications (SPAs) using React you know that there are a couple of problems that creep into our application because of the way react basically works by default. For example, the most common problem, it is very difficult to have good SEO if you are using client-side rendering (CSR) in React.

This is because, in the case of CSR, the data you see on the page is generated by the JavaScript in the browser itself. It is also very difficult to have dynamic Metadata on such websites.

Single-page applications (SPAs) due to these reasons are commonly regarded as non-SEO friendly websites.

You can learn more about the pros and cons of SPAs here

To solve this problem (along with other problems with CSR), we use different technics like Server-side rendering (SSR), prerendering, etc.

Since it is a bit difficult to do React SSR manually, we have different React frameworks to make our job easy.

One of such React frameworks which is very popular is Next.js

Similar to frameworks like Next.js, the people who developed React Router (The most popular routing library for React) are working on a NEW React framework to solve all the problems we face while developing with React.

They have named it Remix.

Some of the highlighted features of Remix are as follow-

• File system routes
• Route layout nesting
• Automatic code splitting
• Data-driven meta tags
• Built-in data loading
• Location-based Suspense cache
• Streaming server rendering
• Zero-config build
• React Refresh
• Server rendering in dev
• Deploy anywhere
• ...and more

Here is the first preview of Remix on YouTube. You'll get a preview on routing, layouts, data loading, meta tags, data caching, and scroll restoration etc.

{% youtube MYxwlmeyu9w %}

You can subscribe to follow their progress and get early access here- https://remix.run/

Isn't it cool? Personally, I'm very excited about it. I know its gonna be a big thing because of the people behind it.

Hope you liked this post. You can follow me for more such interesting stories.

You can also connect with me at LinkedIn, Twitter, Github, shubhamprakash.dev

You must have felt it very difficult to reach the Google chrome browsers options and settings in mobile device as it is present at the top of the browser which is very hard to reach with your fingers in big screen mobile phones.

Good news, there is a trick using which you can enable a toolbar at the bottom of your browser so that you can access options like switch tab, search and share easily.

Note- I have done this in my Android phone only so I'm not sure if you can do the same in IOS.

Here's how you enable this hidden bottom toolbar-

Step 1:

In your chrome address bar type the following path-

chrome://flags

Step 2:

Search for “Duet” in the search bar.

Step 3:

Tap the drop-down menu next to “Chrome Duet” and select any one of the button configuration you want from the drop-down menu.

Step 4:

:tada: Now restart your browser and enjoy the new bottom toolbar.

title: Trap focus using javaScript published: true description: Setting up custom keys to focus previous/next element in the tab index tags: Web Development,JavaScript,HTML focus,Event Listener,

cover_image: https://cdn.hashnode.com/res/hashnode/image/upload/v1617394999377/qO1JqQXBr.gif

Setting up custom keys to focus previous/next element in the tab index

Introduction

On a web page, we have different focusable elements and they follow a default tab order. We can navigate around and change focus from one focusable element to another using Tab and Shift + Tab keys.

You can easily check this behavior on any website. Just press Tab to move your focus to the next focusable element and press Shift + Tab for the previous one.

We can manipulate this default Tab flow and create our own flow using tabindex but this is not the focus of this article. We want to use a custom key to change the focus just like we use Tab and Shift + Tab keys.

In this article, we will learn how to trap the browser focus using javaScript and assign it to UP and DOWN arrow keys to focus the next and the previous focusable elements (input box in our example)

What we are going to build

We are going to create a web page having some input fields. We will create a function that will listen to the keypress event and change the focus of the element on pressing arrow UP and DOWN keys.

Let's begin-

Setup

1. Creating some input fields on the page for the demo:

<div class="container">
    <h1 class="text-center">Trap focus using javaScript</h1>
    <div class="input-wrapper">
      <input type="text" placeholder="Input 1" value="">
      <input type="text" placeholder="Input 2" value="">
      <input type="text" placeholder="Input 3" value="">
      <input type="text" placeholder="Input 4" value="">
      <input type="text" placeholder="Input 5" value="">
      <button>Submit</button>
    </div>
  </div>

1. Writing some CSS to make this ugly page a little beautiful because why not :wink:

html{
  background: black;
}

.container{
  background: yellow;
  width: 100%;
  max-width: 500px;
  margin: auto;
  border-radius: 10px;
}

h1{
  padding-top: 0.4em;
}

.input-wrapper{
  background: pink;
  padding: 1em;
  display: flex;
  flex-direction: column;
  border-radius: 0 0 10px 10px;
}

.input-wrapper input{
  margin: 0.4em auto;
  padding: 0.4em;
  font-size: 1.4em;
  width: 400px
}

.text-center{
  text-align: center;
}

button{
  width: 100px;
  padding: 0.4em;
  border-radius: 4px;
  margin: auto;
  font-size: 1.2em;
  cursor: pointer;
}

The JavaScript part

We know that the browser fires DOM events on various kinds of events (of course) happening on the page.

We are going to listen to keydown events on the input fields so that whenever the user press UP or DOWN keys we will change the focus on the page to previous or the next element respectively.

Now here's a question, why I chose keydown event for this and not keypress. The answer is compatibility with different browsers. Since I'll be using event.keyCode in this example, I found using keydown or keyup instead of keypress events will work in every major browser.

Alright enough talking, let's get to the coding part-

let's begin with creating a function which we will invoke on keydown event in the browser-

function handleInputFocusTransfer(e){
// we will write code for the functionality here...
}

Now inside this function, we will write the logic for changing the focus on the page.

let's create a variable to store the reference of all the focusable elements we want to use. In our example, we are manipulating focus for input fields but you can use any elements on the page and select them in the same way-

const focusableInputElements= document.querySelectorAll(`input`);

document.querySelectorAll will return a node list. we will create an array from this node list using spread operator as follow-

  const focusable= [...focusableInputElements];

At this point, we have an array focusable of all the focusable elements on the page. The current element which is in focus on the page is also present in this array. So, let's find at which index this guy is sitting-

 //get the index of current item in the "focusable" array
  const index = focusable.indexOf(document.activeElement);

Here, document.activeElement returns the active node element on the page.

Let's also create a variable to store the index of the next element to be focussed-

  let nextIndex = 0;

I have initialized it with 0 but later we will change it on UP or DOWN arrow key press accordingly.

Now, on keyDown event, the event object has an entry keyCode which stores the ASCII (RFC 20) or Windows 1252 code corresponding to the pressed key.

It is 38 and 40 for the UP and DOWN arrow keys respectively.

Next, we will write a if-else statement which will change the value of nextIndex according to which key was pressed-

  if (e.keyCode === 38) {
    // up arrow
    e.preventDefault();
    nextIndex= index > 0 ? index-1 : 0;
    focusableInputElements[nextIndex].focus();
  }
  else if (e.keyCode === 40) {
    // down arrow
    e.preventDefault();
    nextIndex= index+1 < focusable.length ? index+1 : index;
    focusableInputElements[nextIndex].focus();
  }

In the if-block above, if the keyCode is 38 (i.e UP arrow key) we are decreasing the value of index by 1 so that just the previous focusable element in the focusableInputElements array can be focussed using focus() method provided by the DOM API.

Similarly, in the else-block, we are increasing the value of index by 1 to focus on the next focusable element.

You'll see I have also taken care of boundary conditions using a ternary operator. This is just to make sure that nextIndex always holds a positive value smaller than the size of the focusableInputElements array to avoid errors.

That's all. Now put these code together inside our handleInputFocusTransfer function and set up an event listener for keydown event on the page.

The whole javascript code now looks like this-

// Adding event listener on the page-
document.addEventListener('keydown',handleInputFocusTransfer);

function handleInputFocusTransfer(e){

  const focusableInputElements= document.querySelectorAll(`input`);

  //Creating an array from the node list
  const focusable= [...focusableInputElements]; 

  //get the index of current item
  const index = focusable.indexOf(document.activeElement); 

  // Create a variable to store the idex of next item to be focussed
  let nextIndex = 0;

  if (e.keyCode === 38) {
    // up arrow
    e.preventDefault();
    nextIndex= index > 0 ? index-1 : 0;
    focusableInputElements[nextIndex].focus();
  }
  else if (e.keyCode === 40) {
    // down arrow
    e.preventDefault();
    nextIndex= index+1 < focusable.length ? index+1 : index;
    focusableInputElements[nextIndex].focus();
  }
}

Now our web page looks like this. Note how the focus is changing on pressing UP and DOWN arrow keys-

DONE!! you've done it. Check out this codepen to see it live-

https://codepen.io/ishubhamprakash/pen/OJPagqj

> This is my first post on dev.to Hope you'll like it. Smash whatever buttons this platform provides to appreciate the work let me know that you loved this post :smile: >

More posts coming...