Forem: Chetan

Things I Don't Know as of 2020

Chetan — Wed, 30 Dec 2020 18:26:16 +0000

People assume that being in any industry for more than a few years one should know just about everything. That's so not true! In this post, I am listing out the things which I'm not aware-of or currently learning.

💡 Not knowing everything is ok

List of things I don't know

Unix commands and bash - I can manage with ls, cd and the world-famous rm -rf Can manage with grep but for everything else I’ve to lookup.
CSS Methodologies - No BEMs, No OOCSS I can do Tailwind CSS or styled-components easily. CSS-in-JS is the one I'm rocking now🤘
TypeScript - Type checking in JavaScript is not my cup of coffee ☕
Generators - Stream data only using JavaScript 😱
Containers - I can create a docker and launch a container, nothing more than that 📦
Animations - Using CSS or SVG Animations, gets on my nerves.
Python - No "Hello World!!" also. 🐍
Machine Learning - Maybe will take up next year 🎰
Testing - I can handle Unit testing in JavaScript, React and Vue, but automating everything in one click is what I've to get hold of in 2021 🔥
Redux - Haven't got the change to look at it
AWS - This is where my current focus is, I've started a bit or two. AWS Amplify is making my life easy 😇

I'm aware of the knowledge gaps that are created over time. Learning never ends, it's always good to keep learning

💡 Post inspired by Dan Abramov's

Dan Abramov

@dan_abramov

📝 New on Overreacted: Things I Don’t Know as of 2018. We can admit our knowledge gaps without devaluing our expertise. overreacted.io/things-i-dont-…

13:53 PM - 28 Dec 2018

1970 6464

⛓ The optional chaining operator in JavaScript

Chetan — Sat, 02 May 2020 14:46:14 +0000

Definition

The optional chaining operator ?. permits reading the value of a property located deep within a chain of connected objects.

The optional chaining was introduced as part of the ES2020 standard.

Why this ?

It changes the way we access the properties from the deep objects. The optional chaining makes your code look cleaner 🧼 and crisp 🔥

Consider this piece of code, where the data object has a query and an answer to the query.

const response = {
    "data": {
        "query": "What is javascript ?",
        "answer" : {
            "value": "JavaScript is 💛"
        }
    }
}

To access the value, you have to write a loooong conditional statement which is difficult to read and format 😢

let theValue;

if(response &&
response.data &&
response.data.answer &&
response.data.answer.value) {
    theValue = response.data.answer.value;
} else {
    theValue = 'JavaScript is BAE 💛❤️';
}

But with optional chaining, you can access the value easily 😃 and you don't have to worry about the null & undefined checks.

response?.data?.answer?.value

// Output
JavaScript is 💛

Wow, this code looks so clean 🧼 and crisp !! If the value is not present, we can assign a default value to it.

response?.data?.answer?.key || 'JavaScript is BAE 💛❤️'

// Output
JavaScript is BAE 💛❤️

Setting up the Babel Plugin

Babel 7.8.0 supports the new ECMAScript 2020 features by default. There is no need of enabling an individual plugin for optional chaining (?.).

If you are using the latest Babel version which is above or equal to 7.8.0, then it's an easy setup

npm install --save-dev @babel/cli @babel/core @babel/preset-env

Now add the following configuration to the .babelrc

{
    "presets": [
        "@babel/preset-env"
    ]
}

The necessary babel modules and the preset configurations are done. Now it's time to do the babel magic ✨

Run this command to transpile the code to the supported version everywhere. This command will work if you have installed the babel module globally.

babel app.js --out-file script-transpiled.js

All the optional chaining code should be placed in app.js and then the above command should be executed. This produces the transpiled code which works in major browsers and in node.js.

Different types of optional chaining

1. Optional chaining with function calls

Optional chaining can be used when you are trying to invoke a method which may not exist. Using optional chaining with function calls causes the expression to automatically return undefined instead of throwing an exception.

class Operation {
  constructor(a, b) {
    this.a = a
    this.b = b
  }

  getSum() {
    return this.a + this.b
  }
}

let o = new Operation(2, 3);
o.getSum(); // 5

o.getDiff(); // Output - Uncaught TypeError: o.getDiff is not a function

// Check if the function exists
typeof o.getDiff != "undefined" && o.getDiff(); 

// With the use of optional chaining
o.getDiff?.() // Output - undefined

2. Optional chaining with expression

If the left operand is null or undefined, the expression after the optional chaining operator will not be evaluated.

let user = null;
let age = 12;
let isTeenage = user?.[value++];
console.log('isTeenage :: ', isTeenage);

//Output

isTeenage :: undefined

The user is defined as null, while executing the line #3, the isTeenage didn't throw any error because if the left operand is null or undefined, the expression will not be evaluated.

3. Combining with the nullish coalescing operator [which is another ES2020 feature]

let user = null;
let age = 12;
let isTeenage = user?.[value++] ?? 'not a teenager !!';
console.log('isTeenage :: ', isTeenage);

// Output

isTeenage :: not a teenager !!

Things about optional chaining

🚀 Clean & Readable code
🚀 Don't worry about null or undefined in an object
🚀 Less error

Browser Support

Chrome - 80
Edge - 80
Firefox - 74
Internet Explorer - NO
Opera - 67
Node.js - 14.0.0

References

MDN web docs

What is context path ?

Chetan — Sat, 28 Mar 2020 17:39:38 +0000

The context path is the prefix of a URL path that is used to select the context(s) to which an incoming request is passed.

Context path is also known as sub-path or sub-directory

Many apps are hosted at something other than the root (/) of their domain. For example, My personal blog is live at https://chetanraj.in/blog, or you can host your site on GitHub Pages at https://example.github.io/blog.

Each of these sites need a prefix added to all paths on the site. So a link to a blog which is having the slug /features-in-es6/ should be rewritten as /blog/features-in-es6.

In addition to the slug of the blog, links to various resources (JavaScript, CSS, images, and other static content) need the same prefix, so that the site continues to function correctly when served with the path prefix in place.

For this to work, you need to specify the config according to them. This allows the built bundle to be deployed under that path.

Here are some examples where you need to specify the context path before building your app.

Create React App

// package.json

{
  ...
  "homepage": ".",
  ...
}

Vue

// vue.config.js

module.exports = {
  baseUrl: '/blog',
};

Gatsby

// gatsby-config.js

module.exports = {
  pathPrefix: '/blog',
};

Also, If you are serving static files, then paste the sub-directory folder in the root folder. This will serve from the sub-directory.

My Top Ten VS Code Plugins

Chetan — Fri, 24 Jan 2020 09:30:39 +0000

#1 — Peacock

#2 — Bracket Pair Colorizer 2

#3 — Material Theme

#4 — GitLens

#5 — Auto Close Tag

#6 — Better Comments

#7 —Import Cost

#8— Debugger for Chrome

#9 — Turbo Console Log

#10 — Prettier

compose in styled-system

Chetan — Wed, 31 Jul 2019 18:41:42 +0000

As per the document

The compose utility is used to combine multiple style functions together into one. This utility can help improve performance when using multiple style props functions on the same component.

In this post let us build a Button component using the styled-components and styled-system as shown below. Let us build this component using border, color, shadow, space & typography functions from the styled-system.

import styled from 'styled-components';
import { border, color, shadow, space, typography } from 'styled-system';

const Buttons = styled.div(
border,
color,
shadow,
space,
typography
);

export default Buttons;

So when we use multiple functions like border, color, shadow, space & typography, this will invoke multiple functions on render which will hamper the performance of app. It is even worse when the whole component is wrapped with state.

Here comes the compose function to the rescue which is the super hero 💠 of styled-system API. The compose function will combine the multiple functions into one, which will invoke only one function on render [saved by the compose function 😊]

import styled from 'styled-components';
import { compose, border, color, shadow, space, typography } from 'styled-system';

const Buttons = styled.div(
compose(
border,
color,
shadow,
space,
typography
)
);

export default Buttons;

So using the above component, you can define any kind of a <Button />

Click here

Disabled

Build a RESTful API using hapijs and mongoose

Chetan — Wed, 24 Oct 2018 07:52:08 +0000

The API will handle CRUD for an object[Wolf], Using the HTTP verbs — GET, PUT, POST and DELETE

Okay, Let’s start

Make sure you’ve node installed in your machine and yarn as a global package

Create a project directory name “/hapijs-mongoose-restapi” and run the command and fill the required details.

yarn init

Specify the main file as app.js

yarn init is similar to npm init, this will generate the package.json file, Refer yarn for more.

then install the node_modules we need for this API

yarn add hapi mongoose --dev

Building the hapi server, In the app.js

const Hapi = require('hapi');
const server = new Hapi.Server();

server.connection({
    host: 'localhost',    
    port: 4000
});

server.route({
    method: 'GET',
    path: '/',
    handler(request, reply) {
    reply('Hello, world!');
    }
});

server.route({
    method: 'GET',
    path: '/api',
    handler(request, reply) {
    reply('Hello, API!');
    }
});

server.start(err => {
    if (err) {
    throw err;
    }
    console.log(`Server running at: ${server.info.uri}`);
});

exports.server = server;

server.connection — To connect to the server with the host and port
server.route — Will contain the route object

In the server.router, the handler will return using the return() API — http://hapijs.com/api#replyerr-result, where the return is used to conclude the handler activity by setting a response and returning the response and status to the handler.
server.start — To start the server

Starting the server and testing the index route

nodemon app.js

Using nodemon for auto-reload of server after code change for node.js applications
*Was a newbie to node.js, whenever I make a change in the code, In the terminal i used to keep on hitting Ctrl+C and…*medium.com

Let’s test the API using Postman — Chrome App/Mac App.

open Postman, select the GET HTTP verb and enter the url http://localhost:4000 and click Send, the response body should show Hapi World!.

Create a mongoDB connection to the API, create a file database.js in the root directory of the app

var Mongoose = require('mongoose');

//load database
Mongoose.connect('mongodb://localhost/hapijs-mongoose-restapi/');
var db = Mongoose.connection;

db.on('error', console.error.bind(console, 'connection error'));
db.once('open', function callback() {
    console.log('Connection with database succeeded.');
});

exports.db = db;

and include the database.js in app.js

// app.js

const db = require('./database').db;

This will connect to the mongoDB and then let’s create the mongoose schema model for our wolves, the models was placed in /models directory

THE WOLF MODEL

the path to create the Wolf Model is — /hapijs-mongoose-restapi/models/Wolf.js

The Wolf model will be just having the name field where the SchemaType is String.

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

var WolfSchema = new Schema({
    name: String
});

module.exports = mongoose.model('Wolf', WolfSchema);

with the Wolf.js model created, require this in the app.js

// app.js

const Hapi = require('hapi');
const server = new Hapi.Server();
const db = require('./database').db;

...

The nodemon will be in action here, it will watch for you changes in any of the file in the app directory and restarts the server for you, no CTRL+C hazzle.

ROUTES — Default API Route

URL — http://localhost:4000/api

// app.js

...

server.route({
    method: 'GET',
    path: '/api',
    handler: function (request, reply) {
        reply({'message': 'Hello, API!'});
    }
});

ROUTES

Create a routes.js file and include that file in app.js

// routes.js

module.exports = [];

then include this routes.js into the app.js file

// app.js

…

const routes = require(‘./routes’);
server.route(routes);

The GET Route — GETTING ALL WOLVES

Require the Wolf model onto the router.js

URL — http://localhost:4000/api/wolves

// routes.js

const Wolf = require('./models/Wolf');

module.exports = [
  {
      method: 'GET',
      path: '/api/wolves',
      handler: function (request, reply) {
          Wolf.find(function(error, wolves) {
              if (error) {
                  console.error(error);
              }

              reply(wolves);
          });
      }
  }
];

This is a simple route — which will render all the wolves in JSON format.

The POST Route — SAVING A WOLF

In the routes.js, create a module for POST which is for saving the Wolf

URL — http://localhost:4000/api/wolves/GrayWolf

// routes.js

const Wolf = require('./models/Wolf');

module.exports = [
  {
      method: 'GET',
      path: '/api/wolves',
      handler: function (request, reply) {
          Wolf.find(function(error, wolves) {
              ...
          });
      }
  },
  {
      method: ['PUT', 'POST'],
      path: '/api/wolves/{name}',
      handler: function (request, reply) {          
          const wolf = new Wolf({
              name: request.params.name
          });
          wolf.save(function(error, wolf) {
            if (error) {
                console.error(error);
            }

            reply(wolf.id);
          });
      }
  }
];

This will return the object id which is created in the mongoDB.

You can find the source code here.

Conclusion

We now have the ways to handle CRUD on Wolves using hapiJS.

Please go js-rest-api on that heart icon which is below this post and if you have any questions please comment below.

Auto trigger manual deployment of Netlify with Siri

Chetan — Tue, 25 Sep 2018 03:08:48 +0000

Apple has released the latest iOS version — iOS 12 for iPhone on September 17th

Also, Apple has released a new app Siri Shortcuts, which we’ll be using to trigger the manual deployment.

Photo Source —
https://unsplash.com/photos/04TYM24Wi2c

Firstly, create a build hook URL in your Netlify project

Goto — https://app.netlify.com/sites//settings/deploys
Click on Add build hook button, Enter the details
Generate the Build hook url
Copy the Build hook url - https://api.netlify.com/build_hooks/

Launch Shortcuts app

Step 1: Create Shortcut

Step 2: Click on the settings icon on the top right and enter the name and then
click on Done.

Step 3: Search for URL and then enter the Netlify build hook URL of your app
in the text as shown below.

Step 4: Search for Get Contents of URL, change the method type to **POST
**as shown in the screenshot.

Ask Siri

Trigger Netlify Deployment