259

YouTube Video | Create a twitch clone using React -1

by Nabendu Biswas /July 8th, 2020

#react #youtube #webdev

This video is from my YouTube channel — The Web Dev. Here, we will create a clone of the popular streaming service https://www.twitch.tv…

read more

YouTube Video | Understanding React Hooks

by Nabendu Biswas /July 7th, 2020

#react #youtube #hooks

I had recently started my YouTube channel — The Web Dev. We are going to build a simple app using the latest React feature of hooks, which…

read more

Top 10 VS Code Extensions in 2020

by Nabendu Biswas /July 5th, 2020

#html #react #vscode

I had recently formatted my Mac, as it was getting slow. After the format the mac became very fast, but i lost all of my VSCode extensions…

read more

YouTube Video | Top 10 VS Code Extensions in 2020

by Nabendu Biswas /July 5th, 2020

#html #vscode #youtube

I had recently started my YouTube channel — The Web Dev. Visual Studio Code is an amazing code editor. It's open source and the community…

read more

YouTube Video | Create App using unsplash API in ReactJS — 4

by Nabendu Biswas /July 4th, 2020

#javascript #react #youtube

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel. We will…

read more

YouTube Video | Create App using unsplash API in ReactJS — 3

by Nabendu Biswas /July 3rd, 2020

#javascript #react #youtube

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel. We will…

read more

Build a Recipe site with Gatsby and Firebase-5

by Nabendu Biswas /July 2nd, 2020

#firebase #react #gatsby

Welcome to part-5 of the series. We need to update our home page to show each recipe, in a nice card. But before that, let’s update our…

read more

YouTube Video | Create App using unsplash API in ReactJS — 2

by Nabendu Biswas /July 2nd, 2020

#javascript #react #youtube

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel. We will…

read more

Build a Recipe site with Gatsby and Firebase-4

by Nabendu Biswas /July 1st, 2020

#firebase #react #gatsby

Welcome to part-4 of the series. Before moving forward, let’s change our site title . Open the file gatsby-config.js and change the…

read more

YouTube Video | Create App using unsplash API in ReactJS — 1

by Nabendu Biswas /July 1st, 2020

#javascript #react #youtube

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel. We will…

read more

Build a Recipe site with Gatsby and Firebase-3

by Nabendu Biswas /June 30th, 2020

#firebase #react #gatsby

Welcome to part-3 of the series. Now, we will use the graphql in our code. But first let’s remove all the boiler-plate code from our gatsby…

read more

Using Context API in React with Hooks

by Nabendu Biswas /June 30th, 2020

#react #javascript #context

I had created a simple translation app using React Context API, in a class based project 1 year back. All the concepts with Context remains…

read more

YouTube Video | Understanding React Context API -2

by Nabendu Biswas /June 30th, 2020

#react #youtube #context

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel. Here, we will…

read more

Build a Recipe site with Gatsby and Firebase-2

by Nabendu Biswas /June 29th, 2020

#firebase #react #gatsby

Welcome to part-2 of the series. Let’s start from where we had left. We had configured firebase in the previous part and now we will start…

read more

YouTube Video | Understanding React Context API -1

by Nabendu Biswas /June 29th, 2020

#react #youtube #context

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel. Here, we will…

read more

Fixing my mobile site issues with position sticky

by Nabendu Biswas /June 28th, 2020

#javascript #css #gatsby

I get a lot of visits from mobile devices in my site https://thewebdev.tech/ and i got some issues while visiting my site on mobile. So…

read more

React Hooks Tutorial | Create Youtube Player -2

by Nabendu Biswas /June 28th, 2020

#react #javascript #hooks

Welcome to part-2 of the series. Let’s continue our journey, where i am changing my class based project to a functional project using hooks…

read more

React Hooks Video | Create Youtube Player -2

by Nabendu Biswas /June 28th, 2020

#react #youtube #hooks

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel. We had…

read more

Add YouTube API Key and hide in React App

by Nabendu Biswas /June 27th, 2020

#react #javascript #youtube

When i create my first blog 2.5 years back, it was a React app which was using YouTube API. You can find the link for it here . Now, i did…

read more

React Hooks Video | Create Youtube Player -1

by Nabendu Biswas /June 27th, 2020

#react #youtube #hooks

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel. We had…

read more

React Hooks Tutorial | Create Youtube Player -1

by Nabendu Biswas /June 27th, 2020

#react #javascript #hooks

Recently i started to add more articles to my old blog series on Creating a Youtube Player. I had added articles to refactor it to use Redux…

read more

Build a Recipe site with Gatsby and Firebase-1

by Nabendu Biswas /June 26th, 2020

#firebase #react #gatsby

Welcome to a brand new series, where we make a recipe sharing site using GatsbyJS and Firebase. The idea of this site came during this COVID…

read more

React Redux Video | Create Youtube Player -3

by Nabendu Biswas /June 26th, 2020

#react #youtube #redux

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel. We had…

read more

React Redux Tutorial | Create Youtube Player -3

by Nabendu Biswas /June 26th, 2020

#react #javascript #redux

Welcome to part-3 of the series. We will add the functionality to click on a video, in the list to select it and display it in the player…

read more

React Redux Video | Create Youtube Player -2

by Nabendu Biswas /June 25th, 2020

#react #youtube #redux

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel. We had…

read more

React Redux Tutorial | Create Youtube Player -2

by Nabendu Biswas /June 25th, 2020

#react #javascript #redux

Welcome to part-2 of the series. Now we will add the SearchBar functionality. It is pretty much straight forward. First update the App.js…

read more

React Redux Tutorial | Create Youtube Player -1

by Nabendu Biswas /June 24th, 2020

#react #javascript #redux

My first blog was a react tutorial to create a YouTube player. After 2.5 years and 240 blogs, i decided to revisit it. I had started my…

read more

React Redux Video | Create Youtube Player -1

by Nabendu Biswas /June 24th, 2020

#react #youtube #redux

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel. We had…

read more

React Tutorials - Youtube Player Refactoring - 2

by Nabendu Biswas /June 23rd, 2020

#react #youtube #javascript

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel. The youtube…

read more

React Tutorials - Youtube Player Refactoring - 1

by Nabendu Biswas /June 22nd, 2020

#react #youtube #javascript

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel. Many times in…

read more

React & Flux Tutorials - Create Youtube Player - 3

by Nabendu Biswas /June 21st, 2020

#react #youtube #javascript

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel. So, this is…

read more

React & Flux Tutorials - Create Youtube Player - 2

by Nabendu Biswas /June 20th, 2020

#react #youtube #javascript

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel. So, this is…

read more

React & Flux Tutorials - Create Youtube Player - 1

by Nabendu Biswas /June 19th, 2020

#react #youtube #javascript

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel. So, this is…

read more

How I deployed my Gatsby site to AWS S3 - 4

by Nabendu Biswas /June 18th, 2020

#AWS #devops #gatsby

Welcome to part-4 of the series. We had created an IAM account in the previous part, we will start with getting the access keys from our AWS…

read more

React Tutorials - Create Youtube Player - 3

by Nabendu Biswas /June 17th, 2020

#react #youtube #javascript

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel. So, this is…

read more

How I deployed my Gatsby site to AWS S3 - 3

by Nabendu Biswas /June 16th, 2020

#AWS #devops #gatsby

Welcome to part-3 of the series. We will start with creating an iam account before moving forward, as that is what is recommended by AWS…

read more

React Tutorials - Create Youtube Player - 2

by Nabendu Biswas /June 16th, 2020

#react #youtube #javascript

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel. So, this is…

read more

How I deployed my Gatsby site to AWS S3 - 2

by Nabendu Biswas /June 15th, 2020

#AWS #devops #gatsby

Welcome to part-2 of our AWS journey. I am deploying my blog site to AWS S3 which is currently deployed in Netlify. So, we will start to…

read more

React Tutorials - Create Youtube Player - 1

by Nabendu Biswas /June 15th, 2020

#react #youtube #javascript

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel. So, i am…

read more

How I deployed my Gatsby site to AWS S3 - 1

by Nabendu Biswas /June 14th, 2020

#AWS #devops #gatsby

I have been using the amazing service of netlify for the past one year to deploy all my test site and also the production sites. Two of my…

read more

Image Optimization in Gatsby after bad Lighthouse audit

by Nabendu Biswas /June 13th, 2020

#javascript #react #gatsby

As most of you know my new blog site is live at https://thewebdev.tech/ I recently did a lighthouse audit from google chrome console and my…

read more

Learn to build websites with GatsbyJS

by Nabendu Biswas /June 3rd, 2020

#javascript #react #gatsby

As many of my readers know from my previous post that, after investing in learning GatsbyJS for the past 1 year and publishing blog series…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 30

by Nabendu Biswas /May 31st, 2020

#gatsby #react #javascript

Welcome to part-30 of the series. I had one issue for the code styling, i did in the previous part. It was all hard coded, so if i have to…

read more

Build an Restaurant site with Gatsby and Snipcart - 18

by Nabendu Biswas /May 21st, 2020

#javascript #react #gatsby

Welcome to part-18 of the series. There is a feature which is pending in our site and this is of Webhooks. We have added all menu items, but…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 29

by Nabendu Biswas /May 20th, 2020

#gatsby #react #javascript

Welcome to part-29 of the series. As i had added more blogs to my site, i found some more CSS issues which i will fixing next. The first…

read more

Build an Restaurant site with Gatsby and Snipcart - 17

by Nabendu Biswas /May 20th, 2020

#javascript #react #gatsby

Welcome to part-17 of the series. In the previous part after implementing snipcart, i had pushed the code to netlify to deploy the site. But…

read more

Build an Restaurant site with Gatsby and Snipcart - 16

by Nabendu Biswas /May 19th, 2020

#javascript #react #gatsby

Welcome to part-16 of the series. In the previous part we had done all the changes to implement snipcart. So, let’s start to add ecommerce…

read more

My One year of work — Gatsby Cookbook

by Nabendu Biswas /May 18th, 2020

#javascript #react #gatsby

As most of my readers know, i had invested heavily in GatsbyJS and writing blog in it for the past 1 year. I also created 3 of my personal…

read more

Build an Restaurant site with Gatsby and Snipcart - 15

by Nabendu Biswas /May 18th, 2020

#javascript #react #gatsby

Welcome to part-15 of the series. In this part, i will start to make the static restaurant site an ecommerce site where any user can order…

read more

Build an Restaurant site with Gatsby and Snipcart - 14

by Nabendu Biswas /May 17th, 2020

#javascript #react #gatsby

Welcome to part-14 of the series. We will start to show the data from contentful in our site in this part. So, create a file Menu.js…

read more

Build an Restaurant site with Gatsby and Snipcart - 13

by Nabendu Biswas /May 16th, 2020

#javascript #react #gatsby

Welcome to part-13 of the series. We have completed added data to our contentful CMS in the past two posts. Now, to use those data we have…

read more

Build an Restaurant site with Gatsby and Snipcart - 12

by Nabendu Biswas /May 15th, 2020

#javascript #react #gatsby

Welcome to part-12 of the series. We will continue setting contenful, which we started in the previous part. So, click on the Content tab…

read more

Build an Restaurant site with Gatsby and Snipcart - 11

by Nabendu Biswas /May 14th, 2020

#javascript #react #gatsby

Welcome to part-11 of the series. We will start with our contentful setup in this part to start getting, all data from contentful CMS. So…

read more

Build an Restaurant site with Gatsby and Snipcart - 10

by Nabendu Biswas /May 13th, 2020

#javascript #react #gatsby

Welcome to part-10 of the series. We will start creating the Gallery component in the home page, in this part. So, create a new file…

read more

Build an Restaurant site with Gatsby and Snipcart - 9

by Nabendu Biswas /May 12th, 2020

#javascript #react #gatsby

Welcome to part-9 of the series. We will start with the footer component in this part. So, create a file Footer.js inside the Global…

read more

Build an Restaurant site with Gatsby and Snipcart - 8

by Nabendu Biswas /May 11th, 2020

#javascript #react #gatsby

Welcome to part-8 of the series. We will next start to create a button for the QuickInfo section. Let’s create a new button SectionButton…

read more

Build an Restaurant site with Gatsby and Snipcart - 7

by Nabendu Biswas /May 10th, 2020

#javascript #react #gatsby

Welcome to part-7 of the series. We will start this part by creating the Banner button component. This will allow us to place a button…

read more

Build an Restaurant site with Gatsby and Snipcart - 6

by Nabendu Biswas /May 9th, 2020

#javascript #react #gatsby

Welcome to part-6 of the series. We will start creating Banner component in this part. This component will show the different text, which is…

read more

Build an Restaurant site with Gatsby and Snipcart - 5

by Nabendu Biswas /May 8th, 2020

#javascript #react #gatsby

Welcome to part-5 of the series. We will start to work to display a center image in the home page. First add a new file Header.js inside…

read more

Build an Restaurant site with Gatsby and Snipcart - 4

by Nabendu Biswas /May 7th, 2020

#javascript #react #gatsby

Welcome to part-4 of the series. We will continue working on the Navbar in this part. We will first add a transition to the styles.js file…

read more

Build an Restaurant site with Gatsby and Snipcart - 3

by Nabendu Biswas /May 6th, 2020

#javascript #react #gatsby

Welcome to part-3 of the series. We will start creating generic styled components here, so that we don’t have to create different style in…

read more

Build an Restaurant site with Gatsby and Snipcart - 2

by Nabendu Biswas /May 5th, 2020

#javascript #react #gatsby

Welcome to part-2 of the series. We have completed the setup in part-1 and will start creating the project in this part. Create a folder…

read more

Build an Restaurant site with Gatsby and Snipcart - 1

by Nabendu Biswas /May 4th, 2020

#javascript #react #gatsby

I am starting a brand new project to built a restaurant site with GatsbyJS. This site will also have ecommerce feature, for the user to…

read more

Build a Firefox extension step-by-step-26

by Nabendu Biswas /May 3rd, 2020

#javascript #beginners #webdev

Welcome to part-26 of the series. In this part we will create a new addon called Website Sidenotes . This addon allows a user to save text…

read more

Build a Firefox extension step-by-step-25

by Nabendu Biswas /May 2nd, 2020

#javascript #beginners #webdev

Welcome to part-25 of the series. In this part we will create a new addon called Mobile View Tester . This addon allows a developer to…

read more

Build a Firefox extension step-by-step-24

by Nabendu Biswas /May 1st, 2020

#javascript #beginners #webdev

Welcome to part-24 of the series. In this part we will create a new addon called Read Mode . This addon allows the user to change, the…

read more

Build a Firefox extension step-by-step-23

by Nabendu Biswas /April 30th, 2020

#javascript #beginners #webdev

Welcome to part-23 of the series. In this part we will create a new addon called List Tab Cookies . This addon list all cookies in the…

read more

Build a Firefox extension step-by-step-22

by Nabendu Biswas /April 29th, 2020

#javascript #beginners #webdev

In this part we will create a new addon called Search Tabs . This addon allows the user to search any word across all your open tabs. So…

read more

Build a Firefox extension step-by-step-21

by Nabendu Biswas /April 28th, 2020

#javascript #beginners #webdev

Welcome to part-21 of the series. In this part we will create a new addon called Delete Everything . This addon allows the user to delete…

read more

Build a Firefox extension step-by-step-20

by Nabendu Biswas /April 27th, 2020

#javascript #beginners #webdev

Welcome to part-20 of the series. In this part we will create a new addon called Website History Delete . This addon allows the user to…

read more

Build a Firefox extension step-by-step-19

by Nabendu Biswas /April 26th, 2020

#javascript #beginners #webdev

Welcome to part-19 of the series. In this part we will create a new addon called Delete Last Download . This addon shows the last…

read more

Build a Firefox extension step-by-step-18

by Nabendu Biswas /April 25th, 2020

#javascript #beginners #webdev

Welcome to part-18 of the series. We will complete our addon Tab Utility , which we had started building in part-17. Let’s add…

read more

Build a Firefox extension step-by-step-17

by Nabendu Biswas /April 24th, 2020

#javascript #beginners #webdev

Welcome to part-17 of the series. In this part we will create a new addon called Tab Utility . This addon will allow us to do a list of…

read more

Build a Firefox extension step-by-step-16

by Nabendu Biswas /April 23rd, 2020

#javascript #beginners #webdev

Welcome to part-16 of the series. In this part we will create a new addon called Domain Blocker . This addon will blocks requests to any…

read more

Build a Firefox extension step-by-step-15

by Nabendu Biswas /April 22nd, 2020

#javascript #beginners #webdev

Welcome to part-15 of the series. In this part we will create a new addon called Text Search . This addon will allow us to choose the…

read more

Build a Firefox extension step-by-step-14

by Nabendu Biswas /April 21st, 2020

#javascript #beginners #webdev

Welcome to part-14 of the series. In this part we will create a new addon called Top Sites . It will show a list of most visited sites…

read more

Build a Firefox extension step-by-step-13

by Nabendu Biswas /April 20th, 2020

#javascript #beginners #webdev

Welcome to part-13 of the series. In this part we will create a new addon called Website Stats . It will show statistics about the web…

read more

Build a Firefox extension step-by-step-12

by Nabendu Biswas /April 19th, 2020

#javascript #beginners #webdev

Welcome to part-12 of the series. In this part we will create a now addon called Simply Notes . It’s a simple note taking app, which will…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 28

by Nabendu Biswas /April 18th, 2020

#gatsby #react #javascript

Welcome to part-28 of the series. In this part i will start with adding the logic to show current count of total blogs, next to search bar…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 27

by Nabendu Biswas /April 17th, 2020

#gatsby #react #javascript

Welcome to part-27 of the series. As most of you know that i had completed my new blog site thewebdev.tech , but needed to do three minor…

read more

Video Chat app using Gatsby and twilio-8

by Nabendu Biswas /April 16th, 2020

#gatsby #twilio #react

Welcome to the final part of the series. Our web-app is almost finish and only some CSS remains, so let’s start it. I also want to show the…

read more

Video Chat app using Gatsby and twilio-7

by Nabendu Biswas /April 14th, 2020

#gatsby #twilio #react

Welcome to part-7 of the series. We will now start showing the local web-cam video. So, open your video.js file and update the highlighted…

read more

Video Chat app using Gatsby and twilio-6

by Nabendu Biswas /April 13th, 2020

#gatsby #twilio #react

Welcome to part-6 of the series. In previous part we got our result back from twilio. Now, it’s time to store the result so that we can use…

read more

Video Chat app using Gatsby and twilio-5

by Nabendu Biswas /April 12th, 2020

#gatsby #twilio #react

Welcome to part-5 of the series. We need to do an api call to the twilio endpoint, which contains our function. For this we will install…

read more

Video Chat app using Gatsby and twilio-4

by Nabendu Biswas /April 11th, 2020

#gatsby #twilio #react

Welcome to part-4 of the series. We will start from where we had left. We will do some coding now, but first start the project by moving to…

read more

Video Chat app using Gatsby and twilio-3

by Nabendu Biswas /April 10th, 2020

#gatsby #twilio #react

Welcome to part-3 of the series. We will finally start creating twilio function in this part. First click on the three dots in the left side…

read more

Video Chat app using Gatsby and twilio-2

by Nabendu Biswas /April 8th, 2020

#gatsby #twilio #react

Welcome to part-2 of the series. We will continue our journey to build a simple video chat app with twilio api, for the dev.to hackathon. We…

read more

Video Chat app using Gatsby and twilio-1

by Nabendu Biswas /April 7th, 2020

#gatsby #twilio #react

On Apr 02, 2020 one of my favourite dev community and site dev.to announced, a twilio hackathon. The link for the same is here . In this…

read more

Build a Covid-19 Firefox extension step-by-step-11

by Nabendu Biswas /April 5th, 2020

#javascript #beginners #webdev

Welcome to part-11 of the series. I often go to unsplash.com for using royalty free images in all by blog posts. During this covid-1…

read more

Build a Firefox extension step-by-step-10

by Nabendu Biswas /April 4th, 2020

#javascript #beginners #webdev

Welcome to part-10 of the series. We will continue building extensions, which show some type of image when we open a new tab. The third tab…

read more

Build a Firefox extension step-by-step-9

by Nabendu Biswas /April 3rd, 2020

#javascript #beginners #webdev

Welcome to part-9 of the series. We will continue building extensions, which show some type of image when we open a new tab. The second tab…

read more

Build a Firefox extension step-by-step-8

by Nabendu Biswas /April 2nd, 2020

#javascript #beginners #webdev

Welcome to part-8 of the series. In this part we will make some more firefox extensions. We will create some tab addons. These addons shows…

read more

Build a Firefox extension step-by-step-7

by Nabendu Biswas /April 1st, 2020

#javascript #beginners #webdev

Welcome to part-7 of the series. In this part i will mainly fix some small errors in the earlier submitted addons to mozilla addons site. We…

read more

Build a Covid-19 Firefox extension step-by-step-6

by Nabendu Biswas /March 31st, 2020

#javascript #beginners #webdev

Welcome to part-6 of the series. As in the previous two parts, i will make one more firefox extensions to help us in this covid-19 crisis…

read more

Build a Covid-19 Firefox extension step-by-step-5

by Nabendu Biswas /March 30th, 2020

#javascript #beginners #webdev

Welcome to part-5 of the series. As in the previous part, i will make two more firefox extensions to help us in this covid-19 crisis…

read more

Build two Covid-19 Firefox extension step-by-step-4

by Nabendu Biswas /March 29th, 2020

#javascript #beginners #webdev

Welcome to part-4 of the series. As, the title tells i will be creating some firefox extensions to help in the covid-19 crisis. Since, there…

read more

Build a Firefox extension step-by-step-3

by Nabendu Biswas /March 28th, 2020

#javascript #beginners #webdev

Welcome to part-3 of the series. This part we will start by creating a simple firefox extension, which will show a browser notification…

read more

Build a Firefox extension step-by-step-2

by Nabendu Biswas /March 23rd, 2020

#javascript #beginners #webdev

Welcome to part-2 of the series. In this part we will start by submitting the firefox extension, which we created in part-1. You need to…

read more

Build a Firefox extension step-by-step-1

by Nabendu Biswas /March 22nd, 2020

#javascript #beginners #webdev

Two years back i created a lot of firefox extensions(23 in total), also known as add-ons. Slowly, i moved to other side projects and forgot…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 26

by Nabendu Biswas /March 17th, 2020

#gatsby #react #javascript

Welcome to part-26 of the series. In this part we will start to add the Mailchimp subscription to our project, so that users can subscribe…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 25

by Nabendu Biswas /March 16th, 2020

#gatsby #react #javascript

Welcome to part-25 of the series. Since the site thewebdev.tech was deployed, i was able to check it in a real mobile device and there…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 24

by Nabendu Biswas /March 15th, 2020

#gatsby #react #javascript

Welcome to part-24 of the series. We have one thing left to do with the previous SEO plugin and it is to add twitter and facebook cards. We…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 23

by Nabendu Biswas /March 14th, 2020

#gatsby #react #javascript

Welcome to part-23 of the series. I will start this part by creating the About page, which is currently blank. Create a new folder About…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 22

by Nabendu Biswas /March 13th, 2020

#gatsby #react #javascript

Welcome to part-22 of the series. We will start by adding some Gatsby plugins to my newly created personal blog site . I have found a great…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 21

by Nabendu Biswas /March 12th, 2020

#gatsby #react #javascript

Welcome to part-21 of the series. Now, that our site is live it’s time to add the good gatsby plugins and other things. But before that i…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 20

by Nabendu Biswas /March 10th, 2020

#gatsby #react #javascript

Welcome to part-20 of the series. In the last part, i got an error while deploying to netlify. It was a small mistake but i was not able to…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 19

by Nabendu Biswas /March 9th, 2020

#gatsby #react #javascript

Welcome to part-19 of the series. I want to deploy the site in netlify, as almost everything is over. The things which are remaining are the…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 18

by Nabendu Biswas /March 7th, 2020

#gatsby #react #javascript

Welcome to part-18 of the series. Before moving forward, we need to do some CSS changes so that the Right Menu shows properly. We are mainly…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 17

by Nabendu Biswas /March 4th, 2020

#gatsby #react #javascript

Welcome to part-17 of the series. I want to have the concept of series in the site. Many of the blog posts are part of a series and i want…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 16

by Nabendu Biswas /March 2nd, 2020

#gatsby #react #javascript

Welcome to part-16 of the series. We need to add Side Menu on the right side also. It will open on the clicking the hamburger menu, on the…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 15

by Nabendu Biswas /March 1st, 2020

#gatsby #react #javascript

Welcome to part-15 of the series. First let’s fix a small bug as the tags was not centring properly in all small screens. Add the below…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 14

by Nabendu Biswas /February 28th, 2020

#gatsby #react #javascript

Welcome to part-14 of the series. In the last part we created menu for the Mobile view and in this part we will add functionality to it, to…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 13

by Nabendu Biswas /February 27th, 2020

#gatsby #react #javascript

Welcome to part-13 of the series. We will start by adding the same box-shadow that we created for Search bar in the previous part, to all…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 12

by Nabendu Biswas /February 26th, 2020

#gatsby #react #javascript

Welcome to part-12 of the series. We will start to add the Search functionality in our blog. There are some gatsby plugin to add the search…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 11

by Nabendu Biswas /February 25th, 2020

#gatsby #react #javascript

Welcome to part-11 of the series. We will first add one thing in TagList.js file, which we missed in the previous section. We will be…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 10

by Nabendu Biswas /February 24th, 2020

#gatsby #react #javascript

Welcome to part-10 of the series. The first thing which we will do is to add the author details, which includes his twitter, github and dev…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 9

by Nabendu Biswas /February 23rd, 2020

#gatsby #react #javascript

Welcome to part-9 of the series. We will start to create our post-template.js file now. Let’s first add the query which we created in the…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 8

by Nabendu Biswas /February 22nd, 2020

#gatsby #react #javascript

Welcome to part-8 of the series. Now, it’s time to generate those pages programatically, when we click on the Read More button. First…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 7

by Nabendu Biswas /February 21st, 2020

#gatsby #react #javascript

Welcome to part-7 of the series. Let’s start from where we left. We will update our PostList.js to use the props which were passed to it…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 6

by Nabendu Biswas /February 20th, 2020

#gatsby #react #javascript

Welcome to part-6 of the series. In this part we will, first start with our GraphQL queries. So, head over to http://localhost:800…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 5

by Nabendu Biswas /February 19th, 2020

#gatsby #react #javascript

Welcome to part-5 of the series. In this part we will start with the adding gatsby-plugin-mdx in our project. It will help to show mdx…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 4

by Nabendu Biswas /February 18th, 2020

#gatsby #react #javascript

Welcome to part-4 of the series. In this part we will start with the footer component first. But i want to show social icons in footer. So…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 3

by Nabendu Biswas /February 17th, 2020

#gatsby #react #javascript

Welcome to part-3 of the series. We will start where we had left and will first add a layout.css inside the components folder. This will…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 2

by Nabendu Biswas /February 16th, 2020

#gatsby #react #javascript

Welcome to part-2 of the series. I will be using mdx for the Gatsby site and taken the initial learnings from this udemy course from John…

read more

My Coding Blog From Scratch Using Gatsby and MDX - 1

by Nabendu Biswas /February 15th, 2020

#gatsby #react #javascript

As many of my wonderful readers might know, that i really got success in with by blog post with the wonderful site of dev.to . I had also…

read more

Learn GatsbyJS by creating a tourism site -21

by Nabendu Biswas /February 12th, 2020

#gatsby #react #javascript

Welcome to part-21 of the series. I had decided to put Advertisement in my site https://amazinghampi.com/ which i had build in this series…

read more

Creating Blog site using Stackbit and Gatsby — 6

by Nabendu Biswas /February 8th, 2020

#gatsby #react #javascript

Welcome to part-6 of the series. As, you might know from earlier part that i am upgrading by personal blog site https://nabendu.blog/ One…

read more

Creating Blog site using Stackbit and Gatsby — 5

by Nabendu Biswas /February 2nd, 2020

#gatsby #react #javascript

Welcome to part-5 of the series. As, you might know from earlier part that i am upgrading by personal blog site https://nabendu.blog/ I…

read more

Creating Blog site using Stackbit and Gatsby — 4

by Nabendu Biswas /February 1st, 2020

#gatsby #react #javascript

Welcome to part-4 of the series. As you might know that i build my personal site with Stackbit, which publishes all my dev.to blogs to…

read more

Review - GraphQL with Node & React - Academind - 2

by Nabendu Biswas /January 29th, 2020

#javascript #react #graphql

Welcome to part-2 of the series. In the second part which starts with video-11, he starts with installing React and other dependencies. We…

read more

Review - GraphQL with Node & React - Academind - 1

by Nabendu Biswas /January 21st, 2020

#javascript #react #graphql

As i had told in my earlier series , that i had started working on React, Graphql and Apollo client at work so it was time to refresh the…

read more

React Tutorial - SpaceX fan site with Apollo Client -6

by Nabendu Biswas /January 12th, 2020

#javascript #react #graphql

Welcome to part-6 of the series. We will start building our History component in this part. But first let’s check the graphiql query for a…

read more

React Tutorial - SpaceX fan site with Apollo Client -5

by Nabendu Biswas /January 11th, 2020

#javascript #react #graphql

Welcome to part-5 of the series. Next, it’s time to create our Rocket component to show the details of each rocket, when the user clicks…

read more

React Tutorial - SpaceX fan site with Apollo Client -4

by Nabendu Biswas /January 7th, 2020

#javascript #react #graphql

Welcome to part-4 of the series. We will start where we left by working on the Launch component. We will start by importing the required…

read more

React Tutorial - SpaceX fan site with Apollo Client -3

by Nabendu Biswas /January 6th, 2020

#javascript #react #graphql

Welcome to part-3 of the series. Now, let’s send the data from our Launches.js file to a new component LaunchItem.js . We are just…

read more

React Tutorial - SpaceX fan site with Apollo Client -2

by Nabendu Biswas /January 5th, 2020

#javascript #react #graphql

Welcome to part-2 of the series. It’s time to create the front-end of our app and we will use create-react-app for the same. So, head over…

read more

React Tutorial - SpaceX fan site with Apollo Client -1

by Nabendu Biswas /January 4th, 2020

#javascript #react #graphql

I had recently started working on a new project at work, which have GraphQL with React and it queries the GraphQL server using Apollo Client…

read more

Learn GatsbyJS by creating a tourism site -20

by Nabendu Biswas /December 30th, 2019

#gatsby #react #javascript

Welcome to part-20 of the series. In this part i will first buy domain name and add the details in netlify. The process is exactly the same…

read more

Learn GatsbyJS by creating a tourism site -19

by Nabendu Biswas /December 29th, 2019

#gatsby #react #javascript

Welcome to part-19 of the series. In this part we will start adding code for displaying the large image, when we click on the Open button…

read more

Learn GatsbyJS by creating a tourism site -18

by Nabendu Biswas /December 28th, 2019

#gatsby #react #javascript

Welcome to part-18 of the series. In this part i want to create a new page — Photos. It will contain most of the awesome photos, it took…

read more

Learn GatsbyJS by creating a tourism site -17

by Nabendu Biswas /December 27th, 2019

#gatsby #react #javascript

Welcome to part-17 of the series. I have been in Hampi for the past 4 days and created six blogs on hampi. The four days blogs can be find…

read more

Learn GatsbyJS by creating a tourism site -16

by Nabendu Biswas /December 21st, 2019

#gatsby #react #javascript

Welcome to part-16 of the series. In this part we will show the blog pages, when a user clicks on it. For this we will follow the same…

read more

Learn GatsbyJS by creating a tourism site -15

by Nabendu Biswas /December 19th, 2019

#gatsby #react #javascript

Welcome to part-15 of the series. Before moving forward, i would want to create another graphql query. Generally the blog are posted in…

read more

Learn GatsbyJS by creating a tourism site -14

by Nabendu Biswas /December 18th, 2019

#gatsby #react #javascript

Welcome to part-14 of the series. In this part we will start my creating a new Content Model , for blog in our site. So, head over to the…

read more

Learn GatsbyJS by creating a tourism site -13

by Nabendu Biswas /December 16th, 2019

#gatsby #react #javascript

Welcome to part-13 of the series. In this part we will first start with creating the query for the template page. We will first create the…

read more

Learn GatsbyJS by creating a tourism site -12

by Nabendu Biswas /December 15th, 2019

#gatsby #react #javascript

Welcome to part-12 of the series. Let’s start by creating our Places component. Open your Places.js file and update as below. We are…

read more

Learn GatsbyJS by creating a tourism site -11

by Nabendu Biswas /December 14th, 2019

#gatsby #react #javascript

Welcome to part-11 of the series. Here we will first create the queries in GraphiQL for our places. We have a Places page in our project…

read more

Learn GatsbyJS by creating a tourism site -10

by Nabendu Biswas /December 13th, 2019

#gatsby #react #javascript

Welcome to part-10 of the series. It’s time to add some content. So, head over to Content tab. You will see the below screen. Click on the…

read more

Learn GatsbyJS by creating a tourism site -9

by Nabendu Biswas /December 10th, 2019

#gatsby #react #javascript

Welcome to part-9 of the series. Now, it’s time to get out data and display it in our project. We can do this with internal data, but we…

read more

Learn GatsbyJS by creating a tourism site -8

by Nabendu Biswas /December 9th, 2019

#gatsby #react #javascript

Welcome to part-8 of the series. In this part we will start with our page transition, which will occur when we navigate to a different page…

read more

Learn GatsbyJS by creating a tourism site -7

by Nabendu Biswas /December 7th, 2019

#gatsby #react #javascript

Welcome to part-7 of the series. In this part we will start optimizing the background images in our site. Right now we have only one big…

read more

Learn GatsbyJS by creating a tourism site -6

by Nabendu Biswas /December 5th, 2019

#gatsby #react #javascript

Welcome to part-6 of the series. As told in the earlier post, we need to install some plugins for using one of the main feature of Gatsby…

read more

Learn GatsbyJS by creating a tourism site -5

by Nabendu Biswas /December 4th, 2019

#gatsby #react #javascript

Welcome to part-5 of the series. In this part, we will first learn how to do continuous deployment using netlify. It is a great service to…

read more

Learn GatsbyJS by creating a tourism site -4

by Nabendu Biswas /December 2nd, 2019

#gatsby #react #javascript

Welcome to part-4 of the series. We will use styled-components in this post to style our project. So, we will install the plugin gatsby…

read more

Learn GatsbyJS by creating a tourism site -3

by Nabendu Biswas /December 1st, 2019

#gatsby #react #javascript

Welcome to part-3 of the series. As told in the earlier post, this series is based on the learning from this awesome udemy course by John…

read more

Learn GatsbyJS by creating a tourism site -2

by Nabendu Biswas /November 30th, 2019

#gatsby #react #javascript

Welcome to part-2 of the series. As told in the earlier post, this series is based on the learning from this awesome udemy course by John…

read more

Learn GatsbyJS by creating a tourism site -1

by Nabendu Biswas /November 26th, 2019

#gatsby #react #javascript

After creating two series with GatsbyJS — Agency site and Blog Site , i wanted to learn more about this awesome tech. I found this…

read more

Portfolio site with GitHub pages

by Nabendu Biswas /November 21st, 2019

#html #css #javascript

I have my personal portfolio site hosted on Github pages for sometime now. But i didn’t updated it for more then 1.5 years now. I need to…

read more

Creating Blog site using Stackbit and Gatsby — 3

by Nabendu Biswas /November 16th, 2019

#gatsby #react #javascript

Welcome to part-3 of the series. We will start by adding some Gatsby plugins to my newly created blog site . I have found a great article…

read more

Creating Blog site using Stackbit and Gatsby — 2

by Nabendu Biswas /November 15th, 2019

#gatsby #react #javascript

Welcome to part 2 of the series and my 100th blog :) After completing my blogging site in part-1, it’s time to buy and domain name and add…

read more

Creating Blog site using Stackbit and Gatsby — 1

by Nabendu Biswas /November 13th, 2019

#gatsby #react #javascript

I started my blogging journey 2 years back on medium and had written 215 blogs till date. It had soon become an habit to write technical…

read more

CSS Animation Tutorial — 4

by Nabendu Biswas /November 1st, 2019

#css #beginners #webdev

Welcome to part 4 of the series. This series is inspired by this awesome YouTube series by The Net Ninja . Create a new folder web and…

read more

CSS Animation Tutorial — 3

by Nabendu Biswas /October 31st, 2019

#css #beginners #webdev

Welcome to part 3 of the series. This series is inspired by this awesome YouTube series by The Net Ninja . We will start where we left in…

read more

CSS Animation Tutorial — 2

by Nabendu Biswas /October 30th, 2019

#css #beginners #webdev

Welcome to part 2 of the series. This series is inspired by this awesome YouTube series by The Net Ninja . We will start by learning…

read more

CSS Animation Tutorial — 1

by Nabendu Biswas /October 29th, 2019

#css #beginners #webdev

Welcome to a brand new series on CSS animation. While creating my earlier series CSS3 in 10 days , i did some animations and got hooked…

read more

CSS3 in 10 days — Day 10

by Nabendu Biswas /October 26th, 2019

#css #beginners #webdev

Welcome to Day 10 of learning CSS. As i have told earlier, this series is inspired by this awesome youtube series in freecodecamp channel…

read more

CSS3 in 10 days — Day 9

by Nabendu Biswas /September 29th, 2019

#css #beginners #webdev

Welcome to Day 9 of learning CSS. As i have told earlier, this series is inspired by this awesome youtube series in freecodecamp channel…

read more

CSS3 in 10 days — Day 8

by Nabendu Biswas /September 28th, 2019

#css #beginners #webdev

Welcome to Day 8 of learning CSS. As i have told earlier, this series is inspired by this awesome youtube series in freecodecamp channel…

read more

CSS3 in 10 days — Day 7

by Nabendu Biswas /September 27th, 2019

#css #beginners #webdev

Welcome to Day 7 of learning CSS. As i have told earlier, this series is inspired by this awesome youtube series in freecodecamp channel…

read more

CSS3 in 10 days — Day 6

by Nabendu Biswas /September 26th, 2019

#css #beginners #webdev

Welcome to Day 6 of learning CSS. As i have told earlier, this series is inspired by this awesome youtube series in freecodecamp channel…

read more

CSS3 in 10 days — Day 5

by Nabendu Biswas /September 25th, 2019

#css #beginners #webdev

Welcome to Day 5 of learning CSS. As i have told earlier, this series is inspired by this awesome youtube series in freecodecamp channel…

read more

CSS3 in 10 days — Day 4

by Nabendu Biswas /September 24th, 2019

#css #beginners #webdev

Welcome to Day 4 of learning CSS. As i have told earlier, this series is inspired by this awesome youtube series in freecodecamp channel…

read more

CSS3 in 10 days — Day 3

by Nabendu Biswas /September 23rd, 2019

#css #beginners #webdev

Welcome to Day 3 of learning CSS. As i have told earlier, this series is inspired by this awesome youtube series in freecodecamp channel…

read more

CSS3 in 10 days — Day 2

by Nabendu Biswas /September 22nd, 2019

#css #beginners #webdev

Welcome to Day 2 of learning CSS. As i have told earlier, this series is inspired by this awesome youtube series in freecodecamp channel…

read more

CSS3 in 10 days — Day 1

by Nabendu Biswas /September 21st, 2019

#css #beginners #webdev

Most of the time, we developers struggle with CSS and take the help of some CSS framework like bootstrap or foundation. Nothing wrong in…

read more

Simple iPhone Calculator App in React Native

by Nabendu Biswas /September 20th, 2019

#reactnative #react #webdev

Continuing with React Native the next app i am making is a simple iPhone calculator. This post is inspired by this video by Carl Spencer…

read more

Simple Timer app with React Native

by Nabendu Biswas /September 17th, 2019

#reactnative #react #webdev

Continuing my React Native journey, i found a great site https://learn.handlebarlabs.com/ by Spencer Carli. This post is based on one of…

read more

Android emulator setup for expo on mac

by Nabendu Biswas /September 14th, 2019

#reactnative #react #webdev

For the past one month, i have been doing development in React Native. I am using the expo-cli to create the project and using my physical…

read more

Restaurant Search App in React Native with Zomato API

by Nabendu Biswas /August 29th, 2019

#reactnative #react #javascript

I had delayed learning React Native for some time now. After working with React for quite sometime, it is the obvious next step. So, i…

read more

Creating an Agency Site in GatsbyJS-3

by Nabendu Biswas /August 27th, 2019

#gatsby #react #webdev

Welcome to part-3 of the series. In the previous part we have created a common footer in the layout component. Let us first create a Header…

read more

Creating an Agency Site in GatsbyJS-2

by Nabendu Biswas /August 22nd, 2019

#gatsby #react #webdev

Welcome to part-2 of the series. We will start with Section Four here. We will have the usual Heading and paragraph, followed by six…

read more

Creating an Agency Site in GatsbyJS-1

by Nabendu Biswas /August 4th, 2019

#gatsby #react #webdev

I have done quite a bit freelance WordPress development around 9 years back(2011). Three things which i didn’t liked at that time with…

read more

Hackernews clone using React and 8base

by Nabendu Biswas /July 20th, 2019

#javascript #react #graphql

I was going through an article and found 10 cool web-apps for JS developer to make. Out of them one was the very popular hackernews site…

read more

Deploying React NextJS App in Heroku

by Nabendu Biswas /July 13th, 2019

#javascript #react #graphql

Now that we have completed our Restaurant Billing app, it’s time to deploy it to the web. You can find my earlier article related to the…

read more

Restaurant Billing App built in React NextJS

by Nabendu Biswas /July 11th, 2019

#javascript #react #graphql

I had completed building the Indian Restaurant Billing App , which i started from the learning of Advanced React course by Wes Bos. I also…

read more

React-adopt to solve “callback hell” in React NextJS

by Nabendu Biswas /July 5th, 2019

#javascript #react #graphql

I am building a demo Indian Restaurant Billing App , after completing Advanced React course by Wes Bos. In my first article i changed the…

read more

Transactional emails through gmail in React NextJS App

by Nabendu Biswas /June 26th, 2019

#javascript #react #graphql

I am building a demo Indian Restaurant Billing App , after completing Advanced React course by Wes Bos. In my first article i changed the…

read more

Cloudinary for image management in React NextJS App

by Nabendu Biswas /June 22nd, 2019

#javascript #react #graphql

I recently started building Indian Restaurant Billing App as a part of applying my learning's , after completing Advanced React course by…

read more

Creating a hamburger menu in React NextJS App

by Nabendu Biswas /June 21st, 2019

#javascript #react #graphql

I have recently completed the amazing Advanced React course by Wes Bos. In the course he taught to built, an online store with the latest…

read more

Build a complete app with React and GraphQL — 4

by Nabendu Biswas /May 27th, 2019

#javascript #react #graphql

Welcome to part-4 of the series. This series have been inspired by this youtube tutorial from freecodecamp. We will start from where we…

read more

Build a complete app with React and GraphQL — 3

by Nabendu Biswas /May 26th, 2019

#javascript #react #graphql

Welcome to part-3 of the series. This series have been inspired by this youtube tutorial from freecodecamp. We have added two more authors…

read more

Build a complete app with React and GraphQL — 2

by Nabendu Biswas /May 22nd, 2019

#javascript #react #graphql

Welcome to part-2 of the series. This series have been inspired by this youtube tutorial from freecodecamp. We will first add another type…

read more

Build a complete app with React and GraphQL — 1

by Nabendu Biswas /May 21st, 2019

#javascript #react #graphql

We are starting a new series and it’s about the latest GraphQL. Here we built an App, with React in the frontend and GraphQL in place of…

read more

Understanding React Hooks by building a simple App

by Nabendu Biswas /May 20th, 2019

#react #javascript #hooks

We are going to build a simple app using the latest React feature of hooks, which lets us use Class components concepts in Functional…

read more

Understanding React Context System by building simple translation App

by Nabendu Biswas /May 19th, 2019

#react #javascript #context

Welcome to the brand new post. Here, we will create a small translation app using the new Context System in ReactJS. This series have been…

read more

Create a twitch clone using React — 7

by Nabendu Biswas /May 18th, 2019

#javascript #react #webdev

Welcome to Part-7 of the series. We will create the StreamShow component first. So, whenever the user clicks on a stream, it will show one…

read more

Create a twitch clone using React — 6

by Nabendu Biswas /May 17th, 2019

#javascript #react #webdev

Welcome to Part-6 of the series. Let’s start where we left. We will next create our Delete component. We are going to show a modal to the…

read more

Create a twitch clone using React — 5

by Nabendu Biswas /May 16th, 2019

#javascript #react #webdev

Welcome to Part-5 of the series. Let’s start where we left. We would like to associate users, to our stream so that we can add a Delete and…

read more

Create a twitch clone using React — 4

by Nabendu Biswas /May 4th, 2019

#javascript #react #webdev

Welcome to Part-4 of the series. We will start implementing streams in our project. Our Structure We will now setup the API Server. Now…

read more

Create a twitch clone using React — 3

by Nabendu Biswas /May 2nd, 2019

#javascript #react #webdev

Welcome to Part-3 of the series. We will implement forms in our project. We will use Redux-forms, but first let hook up redux-devtools in…

read more

Create a twitch clone using React — 2

by Nabendu Biswas /May 1st, 2019

#javascript #react #webdev

Welcome to Part-2 of the series. In this part , we will create Authentication to login to our App. We will use google OAuth authentication…

read more

Create a twitch clone using React — 1

by Nabendu Biswas /April 30th, 2019

#javascript #react #webdev

Welcome to the brand new series. Here, we will create a clone of the popular streaming service https://www.twitch.tv/ using ReactJS. This…

read more

Image Search App using unsplash API in ReactJS — 4

by Nabendu Biswas /April 29th, 2019

#javascript #react #webdev

Welcome to part-4 of the series. In part-3 we had completed the version-1 of the app. Here, we will start making the version-2, where the…

read more

Image Search App using unsplash API in ReactJS — 3

by Nabendu Biswas /April 28th, 2019

#javascript #react #webdev

Welcome to part-3 to the series. We will start from where we left in part-2. The network request in part-2 using axios, is an async request…

read more

Image Search App using unsplash API in ReactJS — 2

by Nabendu Biswas /April 27th, 2019

#javascript #react #webdev

Welcome to part-2 to the series. We will start from where we left in part-1. We will work on SearchBar.js file and use the standard React…

read more

Image Search App using unsplash API in ReactJS — 1

by Nabendu Biswas /April 26th, 2019

#javascript #react #webdev

Welcome to the brand new series to build an web app from scratch using ReactJS. We will be using the latest ReactJS syntax of 2019 to create…

read more

PhotoShop for Web-developers — 3

by Nabendu Biswas /April 10th, 2019

#design #beginners #webdev

Welcome to Part-3 of the series. Most of the things in this series are from the great Photoshop course on Udemy by Dan . Make image Black…

read more

PhotoShop for Web-developers — 2

by Nabendu Biswas /April 9th, 2019

#design #beginners #webdev

Welcome to Part-2 of the series. Change Color using Hue We will next learn to change color of something using Hue. This is a very useful…

read more

PhotoShop for Web-developers — 1

by Nabendu Biswas /April 8th, 2019

#design #beginners #webdev

For i a long time i postponed learning PhotoShop and instead learnt the other skills in programming. If anyone have created small portfolio…

read more

15 HTML and CSS Projects to sharpen Your Skills

by Nabendu Biswas /March 24th, 2019

#html #css #beginners

Once you have studied HTML and CSS, the best way to learn it is to build some websites. But you also need to have some tricks under your…

read more

Simple Angular Form - Template Driven

by Nabendu Biswas /February 26th, 2019

#javascript #angular #webdev

I had recently moved to Angular at work after working in React for quite sometime. Unlike React where we generally use third party form…

read more

Interview Preparation - Whiteboard, Take Home and Skype

by Nabendu Biswas /November 18th, 2018

#javascript #webdev #career

Welcome to part-17 of the series and the final part of Interview Preparation. Below questions can be asked during a whiteboard/paper…

read more

Interview Preparation - Tricky Questions - 2

by Nabendu Biswas /November 14th, 2018

#javascript #webdev #career

Welcome to part-16 of the series and the second part in Tricky questions. Question 109- What is the output of the below code and why…

read more

Interview Preparation - Tricky Questions - 1

by Nabendu Biswas /November 13th, 2018

#javascript #webdev #career

Welcome to part-15 of the series and the first part in Tricky questions. Now, the interviewer can ask some really tricky questions mainly…

read more

Interview Preparation - CSS Questions - 2

by Nabendu Biswas /November 12th, 2018

#javascript #webdev #career

Welcome to part-14 of the series and the second part in CSS questions. Question 86- What is specificity in CSS ? Answer- If you have for…

read more

Interview Preparation - CSS Questions - 1

by Nabendu Biswas /November 11th, 2018

#javascript #webdev #career

Welcome to part-13 of the series and the first part in CSS questions. Question 79- What is the difference between display: block, inline…

read more

Interview Preparation - Algorithm Running Time

by Nabendu Biswas /November 10th, 2018

#javascript #webdev #career

Welcome to part-12 of the series and the part on Algorithm running time questions. A lot of time, the interviewer will ask you to write an…

read more

Interview Preparation - Object Oriented JavaScript - 2

by Nabendu Biswas /November 8th, 2018

#javascript #webdev #career

Welcome to part-11 of the series and the second part in Object Oriented JavaScript questions. Question 67- Explain Object.assign() Method…

read more

Interview Preparation - Object Oriented JavaScript - 1

by Nabendu Biswas /November 7th, 2018

#javascript #webdev #career

Welcome to part-10 of the series and the first part in Object Oriented JavaScript questions. In this part we will learn Object Oriented…

read more

Interview Preparation - React & Redux - 3

by Nabendu Biswas /November 6th, 2018

#javascript #webdev #career

Welcome to part-9 of the series and third part in React & Redux questions. Question 53- How to pass data between sibling components using…

read more

Interview Preparation - React & Redux - 2

by Nabendu Biswas /November 4th, 2018

#javascript #webdev #career

Welcome to part-8 of the series and second part in React & Redux questions. Question 48- Explain Fragments in React 16? Answer- React…

read more

Interview Preparation - React & Redux - 1

by Nabendu Biswas /November 1st, 2018

#javascript #webdev #career

Welcome to part-7 of the series. Most of the time companies asks to create a React/Redux project, or they will ask you to create a small…

read more

Interview Preparation - ES6 - 2

by Nabendu Biswas /October 31st, 2018

#javascript #webdev #career

Welcome to part-6 of the series. We will continue with our ES6 questions here. Question 34- Explain classes in ES6? Answer- Constructor…

read more

Interview Preparation - ES6 - 1

by Nabendu Biswas /October 27th, 2018

#javascript #webdev #career

Welcome to part-5 of the series. We will start new question regarding new features which were released as a part of ES6. Question 27- What…

read more

Interview Preparation - Basic JavaScript — 4

by Nabendu Biswas /October 26th, 2018

#javascript #webdev #career

Welcome to part-4 of the series. Let’s start with where we left. Question 16- Explain the concept of hoisting in JavaScript? Answer…

read more

Interview Preparation - Basic JavaScript — 3

by Nabendu Biswas /October 25th, 2018

#javascript #webdev #career

Welcome to part-3 of the series. Let’s start with where we left. Question 12- What is the difference between call, bind and apply? Answer…

read more

Interview Preparation - Basic JavaScript — 2

by Nabendu Biswas /October 24th, 2018

#javascript #webdev #career

Welcome to part-2 of the series. Let’s start with where we left. Question 4- What is the difference between function declaration and…

read more

Interview Preparation - Basic JavaScript — 1

by Nabendu Biswas /October 23rd, 2018

#javascript #webdev #career

We all know that JavaScript interviews(especially FrontEnd interviews) can be pretty hard, because interviewer can ask question from old JS…

read more

Demystifying this in JavaScript and React

by Nabendu Biswas /September 23rd, 2018

#javascript #beginners #webdev

The this keyword can sometime be one of the most confusing things of JavaScript, as it is different then what in other object oriented…

read more

Basics of CSS Grid — 8

by Nabendu Biswas /September 14th, 2018

#css #beginners #grid

Welcome to the final part of the series. We will use this codepen for the album layout page. The basic code without any style(except the…

read more

Basics of CSS Grid — 7

by Nabendu Biswas /September 13th, 2018

#css #beginners #grid

Welcome to part-7 of the series. We will learn the important concept of CSS Grid alignment and centring in this tutorial. We will use this…

read more

Basics of CSS Grid — 6

by Nabendu Biswas /September 11th, 2018

#css #beginners #grid

Welcome to Part-6 of the series. In part-4 of the series, we used grid-column and grid-row concept to place items. In this part we will use…

read more

Basics of CSS Grid — 5

by Nabendu Biswas /September 10th, 2018

#css #beginners #grid

Welcome to part-5 of the series. We will first learn about the auto-fill and auto-fit property in this tutorial. We will be using this…

read more

Basics of CSS Grid — 4

by Nabendu Biswas /September 9th, 2018

#css #beginners #grid

Welcome to part-4 of the series. We will first learn about Sizing Grid Items in this tutorial. In Grid also, as in Flexbox we have to…

read more

Basics of CSS Grid — 3

by Nabendu Biswas /September 8th, 2018

#css #beginners #grid

Welcome to part-3 of the series. We will look into Sizing Tracks in CSS Grid how. For this we will use this codepen . This is the initial…

read more

Basics of CSS Grid — 2

by Nabendu Biswas /September 6th, 2018

#css #beginners #grid

Welcome to part-2 of the series. Let me start with the dev tools which are really beneficial for development in Grid. By the time of writing…

read more

Basics of CSS Grid — 1

by Nabendu Biswas /September 5th, 2018

#css #beginners #grid

As i have written in my previous blog on flexbox , that it helped me get out of the bootstrap trap. I also use another new addition to CSS…

read more

Styled Components and other ways to style React Project

by Nabendu Biswas /August 21st, 2018

#javascript #react #css

I generally use styled components, most of the new CSS which I do at work. One of the main benefit of styled components in any react project…

read more

YDKJS — Objects and Prototypes — Part4

by Nabendu Biswas /August 20th, 2018

#javascript #beginners #webdev

Welcome to part-4 of the series. This series is all from the learnings of Kyle Simpson and also from the amazing youtube Javascript series…

read more

YDKJS — Objects and Prototypes — Part3

by Nabendu Biswas /August 19th, 2018

#javascript #beginners #webdev

Welcome to part-3 of the series. This series is all from the learnings of Kyle Simpson and also from the amazing youtube Javascript series…

read more

YDKJS — Objects and Prototypes — Part2

by Nabendu Biswas /June 25th, 2018

#javascript #beginners #webdev

Welcome to part-2 of the series. This series is all from the learnings of Kyle Simpson and also from the amazing youtube Javascript series…

read more

YDKJS — Objects and Prototypes — Part1

by Nabendu Biswas /June 24th, 2018

#javascript #beginners #webdev

Welcome to the second series of You don’t know JS. Part one of the series was regarding Scopes and Closures. This series is all from the…

read more

YDKJS — Scopes and Closures — Part5

by Nabendu Biswas /June 13th, 2018

#javascript #beginners #webdev

Welcome to the Part5 of YDKJS series. As told in part1 this series is based on my learnings from legendary book series You don’t know JS by…

read more

YDKJS — Scopes and Closures — Part4

by Nabendu Biswas /June 12th, 2018

#javascript #beginners #webdev

Welcome to the Part4 of YDKJS series. As told in part1 this series is based on my learnings from legendary book series You don’t know JS by…

read more

YDKJS — Scopes and Closures — Part3

by Nabendu Biswas /June 11th, 2018

#javascript #beginners #webdev

Welcome to part3 of the series. The traditional languages like Java and C++ are compiled languages, means you have to make an intermediate…

read more

YDKJS — Scopes and Closures — Part2

by Nabendu Biswas /June 10th, 2018

#javascript #beginners #webdev

Welcome to the Part2 of YDKJS series. As told in part1 this series is based on my learnings from legendary book series You don’t know JS by…

read more

YDKJS — Scopes and Closures — Part1

by Nabendu Biswas /June 9th, 2018

#javascript #beginners #webdev

Every Javascript developer knows one thing that they don’t know enough Javascript. On the top level, it’s only var, for , if else just like…

read more

Basics of Flexbox — 4

by Nabendu Biswas /May 29th, 2018

#css #beginners #webdev

We will start looking at the flex items property from here onwards. We will use this codepen for our project. Let’s start with the…

read more

Refactoring ReactJS youtube player to use Grid

by Nabendu Biswas /May 28th, 2018

#react #javascript #grid

The youtube player which we have created so far uses the usual bootstrap. Now i have learnt the hard way that if you want to be really good…

read more

Basics of Flexbox — 3

by Nabendu Biswas /May 27th, 2018

#css #beginners #webdev

You can find the codepen used in this part here . We will start with flex container property align-content. It basically aligns items…

read more

Refactoring ReactJS youtube player to show selected video

by Nabendu Biswas /May 26th, 2018

#react #javascript #webdev

Many times in UI development we get request from client/user to highlighted item from a list once clicked upon. It can be a navbar, a list…

read more

Basics of Flexbox — 2

by Nabendu Biswas /May 1st, 2018

#css #beginners #webdev

Welcome to Part-2 of the series. We will be start where, we had left in the first part. Alignment & Centring We will learn alignment and…

read more

Basics of Flexbox — 1

by Nabendu Biswas /April 29th, 2018

#css #beginners #webdev

I have been developing sites for quite sometime now. First using Javascript, then React. Always have sort of ignored CSS because floats were…

read more

Refactoring Youtube Player to use Flux — Part 3

by Nabendu Biswas /April 28th, 2018

#react #javascript #flux

Welcome to Part 3 and here we will add the functionality to click on a video, in the list to select it and display it in player. Now the…

read more

Refactoring Youtube Player to use Flux — Part 2

by Nabendu Biswas /April 25th, 2018

#react #javascript #flux

Welcome to Part 2 of the Flux series. Now we will add the SearchBar functionality. It is pretty much straight forward. First update the App…

read more

Refactoring Youtube Player to use Flux — Part 1

by Nabendu Biswas /April 24th, 2018

#react #javascript #flux

I have written a three part series to create a youtube player. It used only React and heavily depends on callbacks from children to parent…

read more

Create Youtube Player in ReactJs — Part 3

by Nabendu Biswas /April 23rd, 2018

#react #webdev #javascript

We now have three main tasks remaining. First showing the Video player, second the option to click on a video to change it in video player…

read more

Create Youtube Player in ReactJs — Part 2

by Nabendu Biswas /April 22nd, 2018

#react #beginners #javascript

Welcome to part 2. Let’s start from where we left, but first add bootstrap to our project so that it looks a bit ok. Add this in index.html…

read more

Create Youtube Player in ReactJs — Part 1

by Nabendu Biswas /April 21st, 2018

#react #beginners #javascript

My journey with react started more then a year back. I was already doing some web-development with HTML, CSS , Javascript for past 7 years…

read more