DEV Community: Krutik Raut

Train PNR Status API

Krutik Raut — Thu, 11 Nov 2021 16:00:35 +0000

So I made a PNR status API using data scrapped from confirmtkt.com

General Information

Built in Node.js
Express Framework for routes and API handling
Cheerio for Data scraping
Node fetch to get response from confirmtkt
Hosted on Vercel.com

Links

Live Mode : https://pnr-status.vercel.app

End Point : api/{PNR}

Reboot13

Telegram || Instagram || Twitter || Youtube || LinkedIN || Donate

JavaScript Arrow Functions

Krutik Raut — Sun, 31 Oct 2021 08:11:30 +0000

JavaScript Arrow Function
Arrow functions were introduced in ES6.

Arrow functions allow us to write shorter function syntax:

Before Arrow Function

function hello() {
  return "Hello World!";
}

After Arrow Function

let hello =()=> “Hello World”;

Arrow Function Syntax

let myFunction = (arg1, arg2, ...argN) => {
    statement(s)
}

If the body has single statement or expression,
you can write arrow function as:

let myFunction = (arg1, arg2, ...argN) => expression

It gets shorter! If the function has only one statement,
and the statement returns a value, you can remove the brackets
and the return keyword

Arrow Function with No Argument

If a function doesn't take any argument, then you should use empty parentheses. for example,

let greet = () => console.log('Hello');
greet(); // Hello

Arrow Function with One Argument

If a function has only one argument, you can omit the parentheses. For example,

let greet = x => console.log(x);
greet('Hello'); // Hello

Arrow Function with more than one Argument

let x = (x, y) => x * y;

An arrow function expression is a compact alternative to a traditional function expression, but is limited and can't be used in all situations.

Differences & Limitations:

Does not have its own bindings to this or super, and should not be used as methods.

Does not have new.target keyword.

Not suitable for call, apply and bind methods, which generally rely on establishing a scope.

Can not be used as constructors.

Can not use yield, within its body.

Thankyou

Follow me on Instagram: https://instagram.com/reboot13_dev

Checkout my Github: https://github.com/reboot13-git

Netflix UI Clone [SCSS]

Krutik Raut — Sat, 30 Oct 2021 13:12:09 +0000

Checkout:
https://github.com/reboot13-git

UI Design Process

Krutik Raut — Tue, 26 Oct 2021 08:49:11 +0000

Here are the 6 steps I go through whenever I create UI Design

1. Understand the problem

Albert Einstein said: "If I had an hour to solve a problem, I would spend 55 minutes thinking about the problem and 5 minutes about the solutions.

It's probably the crucial part of any process that ensures that design will be usable.

2. Create very rough sketches

The next step is to create super rough sketches of my ideas after thinking about the problem and solutions.

3.Create detailed Wireframes

After I'm happy with the sketches (they need to be perfect)
I use Figma to create detailed wireframes.

4.Selects Assets

Eg: Fonts and Colors
After the wireframes done, I choose fonts, colors and icons for the project , and also pick some photos and illustrations.

5.Apply Assets to wireframes

After this step I am pretty much done. It's basically connecting together to an actual screen.

6.Present it Properly

After applying assets, now its time to enhance your design presentation.

Credits: https://dribble.com/yasirnoori

Follow me
Instagram: https://instagram.com/reboot13_dev
Telegram: https://telegram.me/reboot13_dev
Twitter: https://twitter.com/reboot13_dev
LinkedIn: https://linkedin.com/in/reboot13
Github: https://github.com/reboot13-git

Hosting Website on Firebase

Krutik Raut — Mon, 25 Oct 2021 15:34:00 +0000

This instruction is for making newbies work easy so that they can follow exactly the same steps I am giving below

Create a folder name website on desktop
Create another folder within the website folder name it as public.
Add your HTML/CSS/JS and images files to the public folder

Make sure the main page of your website is named as an index.html

Note:Firebase hosting does not support any server-side scripts such as Ruby, PHP, Python, or anything else that is processing your files before output. That would require an application engine such as Google App Engine, Heroku, or similar. The hosting service is a static website hosting service.

Before starting install node js on your device.

Link: https://nodejs.org/en/

Once you are done with installing Node JS Follow the steps:

Go to https://firebase.google.com/ and click on Get started.
Click on Add Project.
Enter your Project name and continue.

example:

reboot13-dev

Enable google analytics on your project if you want to track users and click on continue.

Firebase will create your project within a few seconds

Click on continue.

Lets Install Firebase CLI on our device

Now Open your terminal (Command Prompt). - Type

npm install -g firebase-tools

This will install firebase tools globally on your device.

Type

firebase login

This will redirect you to the browser

Now select the Gmail account in which you have created the Project.

Allow access to Firebase and get back to the terminal.

Once you are logged in change the directory in the terminal.

Type

cd C:\Users\common\Desktop\website

Type

firebase init

You're about to initialize a Firebase project in this directory:

C:\Users\common\Desktop\website?

Are you ready to proceed? (Y/n)

type y and press enter

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.

Scroll down user navigation keys (arrow keys) and press space to select

(*) Hosting: Configure and deploy Firebase Hosting sites

(*)means it's selected.

Press enter.

? Please select an option: (Use arrow keys)

Select > Use an existing project and press enter.

Select a default Firebase project for this directory: (Use arrow keys)

Select your project name and press enter.

Select a default Firebase project for this directory: (Use arrow keys)

As we named our folder public

type public and press enter

? Configure as a single-page app (rewrite all URLs to /index.html)?

type n and press enter.

? Set up automatic builds and deploys with GitHub? (y/N)

type n and press enter.

File public/404.html already exists. Overwrite? (y/N)

type n and press enter.

? File public/index.html already exists. Overwrite? (y/N)

type n and press enter.

Don't overwrite any file just type n and press enter.

Firebase initialization complete!

Now Type

firebase deploy

Deploy complete!

Done you successfully hosted your website on Firebase

<project name>.web.app

Check the one I hosted https://reboot13-dev.web.app

Youtube Video Tutorial: https://www.youtube.com/watch?v=KQs7adkKNHk

Reboot13

Youtube: https://youtube.com/krutikraut

Github: https://github.com/reboot13-git

3D Cube with animations... Only CSS👀 feat.Naruto

Krutik Raut — Sat, 23 Oct 2021 07:55:53 +0000

Let's Get Started

Apart from basic CSS properties, I have used some properties which change the 2D page of the view to a 3D one.

CSS properties:

perspective
perspective-origin
transform-style
transform (translate/rotate)

To make a 3D cube we have to first make a block that contains the structure of the cube

Lets White HTML first

<div class="scene">
  <div class="box">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="back"></div>
    <div class="front"></div>
  </div>
</div>

The scene contains the body of the cube, I have given the CSS class names to the sides of the cube which I guess makes sense to you all.

Adding the Magic of CSS

body {
  background-color: #ff9152;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  perspective: 20em;
  perspective-origin: 50% calc(50% - 10em);
}

I have given a background color to the body, used flex to center the elements Use the perspective property to make the body 3D

Checkout docs for perspective at W3school: click here

Setting perspective-origin by calculating the height of the body

The perspective-origin property defines at which position the user is looking at the 3D-positioned element.

.scene {
  position: relative;
  transform-style: preserve-3d;
  animation: rotateX 7s infinite linear;
}

Setting the position to relative so the elements inside it can be positioned to absolute
respective to the scene

Adding a transform-style: preserve-3d

The transform-style property specifies how nested elements are rendered in 3D space.

Now let us style the cube:

.box {
  height: 120px;
  width: 120px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotateY 5s infinite linear;
}

Just gave some height, position, and animation

Styling the sides of the Cube

.top,
.bottom,
.left,
.right,
.front,
.back {
  position: absolute;
  height: 120px;
  transform-style: preserve-3d;
  width: 120px;
  background-color: rgba(20, 116, 241, 0.281);
background-size:cover; 
box-sizing:border-box;
border: 5px solid #fff;
}
.front {
  transform: translateZ(3.7rem);
  background-image: url("https://cdn140.picsart.com/355182439052201.jpg?to=crop&type=webp&r=310x310&q=75");
background-size:cover;
}

.right {
  transform: rotateY(270deg) translateZ(3.7rem);
background-image: url("http://pm1.narvii.com/7533/be35ca4f98dd1790e03d932bc70c8d3588359105r1-281-281v2_uhq.jpg")

}
.back {
  transform: rotateY(180deg) translateZ(3.7rem);
background-image:url("https://cdn.costumewall.com/wp-content/uploads/2018/09/sasuke-uchiha.jpg");
background-size:cover;
}
.left {
  transform: rotateY(90deg) translateZ(3.7rem);
background-image:url("https://i1.sndcdn.com/avatars-000736438537-zvc9fi-t240x240.jpg");
background-size:cover;
}

.top {
  transform: translateY(-50%) rotateX(90deg);
scaleY(-1);
background-image:url("https://i.pinimg.com/originals/c2/c6/87/c2c687c78da549431b8903e0aad90184.png");
background-size:cover;
}
.bottom {
  bottom: -120px;
  transform: translateY(-50%) rotateX(90deg) scaleY(-1);
background-image: url("https://static.wikia.nocookie.net/08b81b8e-00c6-4f69-83c6-94bfc79f05c7/scale-to-width/755");
background-size:cover;

}

Using the transform property and with use of translate and rotate will give the desired shape of the cube

Set the background with characters from #Naruto

Added Some keyframes to animate the cube

@keyframes rotateX{
  25% {
   transform: rotateX(-180deg);
  }
  50% {
    transform: rotateY(-360deg);
 }
  70%{
   transfrom: rotateX(-180deg)
}


}

And we are done

UI Design Fundamentals

Krutik Raut — Mon, 19 Jul 2021 04:08:51 +0000

Follow me on Instagram

@reboot13_dev

Best Text Editor For Programming

Krutik Raut — Sun, 18 Jul 2021 07:49:52 +0000

The first question that we need to answer is what text editors are actually out there. And Stack Overflow really helps us here because they did a poll in 2019 of over 87,000 developers.

Text Editors	Survey results
Vs code	50.7%
Notepad++	30.5%
Vim	25.4%
Sublime Text	23.4%
Atom	13.3%

VS Code

Visual Studio Code is probably the master when it comes to capabilities.

It's the all in one package. This is the editor that most programmers seem to use for most of their programming, and this is for good reason.
VS Code is efficient with pretty much any project that you could come up with VS code has git integration, terminal console integration, memory consumption is low. And even on bigger projects, it runs really smoothly. And these things are not unique to the VS Code. They also exist in other editors, However, with Atom, for instance, you have to install a terminal to use it. And with the sublime, you need to install a package for Git integration. And even with that, it just doesn't work as smoothly as with VS code.

Download Vs Code

VIM

For instance, with a text editor like vim, which is a really popular one, there is one drawback and that is the learning curve. vim uses a tonne of key bindings for navigation and writing and editing text. To use vim, you need to first learn how to write text, how to stop writing text, how to save, and finally how to quit. With all the other editors mentioned, you don't need to learn any of these things, because you will already know how to do it since it works like pretty much everything else that you're used to.
This means that the learning curve for using vim is a lot greater than it is for any of the other editors on our list.
But the potential for productivity benefits that this can lead to is also a lot greater. Since vim is based on being a fast editor, it means that making changes to the text should be as quick as possible, it is optimized for using the keyboard as your only input device.

Download VIM

Sublime Text

When it comes to speed the winner is Sublime Text. It's fast, it's lightweight, it's what I would call the ultimate start editor. If you're just getting started, then Sublime Text is likely a great choice because it's lightweight and fast.
Sublime Text is perfect for the beginner programmer and the advanced programmer because the use case for both will be very similar, even though their experience level differs greatly.
Sublime Text, while being lighter-weight than an IDE, still supports many IDE features.

Text from the current file is used to provide autocomplete.
Project Support (folder browsing, scoped history, build-system declarations).
Refactoring support is emulated through multi-select, project-wide find and replace, and regular expression search.
Syntax-aware selection and GoTo for quickly jumping to locations in the project.
Snippets and Macros.
A Python console for everything else.

Download Sublime Text

Notepad++

Notepad++ is a powerful, feature-packed text editor that more or less has everything Notepad needs but lacks (it can replace Notepad in Windows). It supports 27 programming languages.
It has syntax highlighting, excellent themes and support for most languages and file formats.
If you close Notepad++ (NPP), your documents remain even if you haven't saved.
While it is disabled by default, when enabled, it is possible to edit more than one line at a time. This is helpful in many situations.
You can define your own custom syntax highlighting rules.
You can now compile and run C++ programs from within Notepad++.

Download Notepad++

Atom by Github

Atom is great in that it is open-source software, ensuring it can be customized without restrictions. It comes integrated with GitHub.One of the goals of the Atom is to be a text editor for both experienced and beginner programmers. You can add keyboard shortcuts, change themes, install plugins, and change core settings by clicking through a GUI, or by manually editing config files the old-fashioned way. It has the added advantage of being built using the same engine that powers Google Chrome, so actions like opening and closing tabs feel familiar, even to new or non-programmers.
Atom has a built-in package manager and an extensive list of packages.
But there are many disadvantages too its not lightweight as not as fast as sublime text.
Atom is very slow to startup, which is a big disadvantage if you are accustomed to using it to make quick changes on your files.

Download Atom

My Preference

So now what editors have I used? Well, this is exactly what I've used in the past VS code for my main projects and longer sessions and Sublime Text for my shorter quick-fix fast coding sessions. And honestly, this is something that came to me quite naturally. And it came from the want to use Sublime Text because I like their style a lot more. But for some reason, as soon as it was a bigger project, I always end up switching back from Sublime Text to VS code after an hour or so. And I'm not really certain why exactly that is. But something just made me do that naturally. Same goes for the opposite direction. Of course, anytime I started writing something small in VS code,

Conclusion: You should use 2 text editor 1 with all functionalities to code and compile and 1 which is lightweight and to make quick fixes.

I choose Vscode and Sublime text 3 what about you?
Comment down below!

Setting Up Custom 404 Error Page

Krutik Raut — Sat, 17 Jul 2021 11:50:59 +0000

What does HTTP 404 mean?

The HTTP 404, 404 Not Found, 404, 404 Error, Page Not Found or File Not Found error message is a Hypertext Transfer Protocol standard response code, in computer network communications, to indicate that the browser was able to communicate with a given server, but the server could not find what was requested.

The Default 404 error pages are not good looking and don't have any type of navigations

Following are some methods you can use to auto-redirect to a custom error page.

Website Running on Apache webserver

Create a custom webpage for 404 error and name it 404.html
Create a file name .htaccess

File content: ErrorDocument {error_code} {custom file path}

ErrorDocument 404 /404.html

ErrorDocument 404 https://yourwebsite.com/404.html

Now the site will redirect to 404.html whenever the user gets a 404 HTTP response or browse the wrong URL path on your website.

Here are some hosting services that run on Apache webserver

Hostinger	Heroku	GoDaddy
Netlify	BlueHost	1&1
Cloudways	SiteGround	HostGator

Website Hosted on Vercel.com

Create a custom webpage for 404 error and name it 404.html
Create a file name vercel.json

File content:

{
  "routes": [
    { "handle": "filesystem" },
    { "src": "/(.*)", "status": 404, "dest": "/404.html" }
  ]
}

Read more at official docs: https://vercel.com/guides/custom-404-page

Website hosted on Github Page

The simplest so far

Create a custom webpage for 404 error and name it 404.html
Add this file to your repository
Done

Website running on Heroku

For a PHP app hosted on Heroku follow the same method as of Apache Server

Create a custom webpage for 404 error and name it 404.html
Run this command on Heroku CLI

heroku config:set \ 
ERROR_PAGE_URL=//yourwebsite.com/public/404.html

Read more at official docs: https://devcenter.heroku.com/articles/error-pages

Note: Make sure the 404.html is present in your root directory with index.html

Video Tutorial [Apache Server] : https://www.youtube.com/watch?v=QkB5ZxeYaJQ&t

Social Links

Instagram | Youtube | Twitter | Codepen

ThankYou

Spotify UI

Krutik Raut — Sat, 10 Jul 2021 11:11:40 +0000