Blog

Best Web Development Tutorials on YouTube

Ever since the inception of YouTube, there have been thousands of people who have imparted free education to their followers. Today you can learn to play a guitar, or basics of gardening or speak a new language or get good at Math, all at the comfort of your couch.

Web Development and Software development in general is no different. You can find some of the best instructors on YouTube to learn everything about a programming language, build projects, acquire new skills, improve your code quality etc.

Since there are thousands of hours of content one can simply binge watch, it is most important to focus on only those videos which will help you achieve your goals. Whether you are a student or an employee or a freelancer, the best way to improve your skills and achieve your goals is to build projects. If you are a web developer, I cannot stress this point enough.

Among ocean of resources on YouTube, there is only bucketful of full fledged, project focused web development tutorials. This is because coming up with an idea for a project is hard. A content creator needs to spend considerable amount of time working on the idea, translating the idea into code, polishing the content and finally delivering it as a tutorial.

My blog post aims to make a curated list of best web development tutorials on YouTube. You will end up creating tangible projects at the end of each tutorial which you can showcase in your portfolio.

I aim to keep this list up to date and weed out any outdated tutorials.

HTML and CSS

Components

Full Websites / Landing Pages

Libraries

JavaScript

React

Vue

NodeJS

GraphQL

MERN Stack

PHP

Django

WordPress

I hope you will find this curated list of Best Web Development Tutorials on YouTube very helpful . There are still hundreds of good creators and thousands of awesome tutorials. So I apologize if I have missed any good content creator or any good tutorial. You can always share them in comments.

Keep Coding, Keep Smiling !

PS: If I have helped you and made a difference in your life, considering supporting my blog.

Free Online Full Stack Web Development Bootcamps 2020

Hello friends, I’m going to review top Free Online Full Stack Web Development Bootcamps in 2020. I think 2020 is going to be a golden year of free online education with so many resources to kick start your web development journey.

Here is the list of free online web development bootcamps I’ll be covering in this post.

  1. freeCodeCamp
  2. The Odin Project
  3. Full Stack Open
  4. App Academy Open
  5. CS50 Web Programming

freeCodeCamp

freeCodeCamp

freeCodeCamp is one of the top web development resources recommended online especially to the beginners. It’s a non-profit started in the year 2014 by Quincy Larson who aims to provide top quality software education to the students for free. This initiative has helped thousands of students get jobs and earn a decent living.

freeCodeCamp offers you certifications on following topics which are divided into modules.

  • Responsive Web Design
  • JavaScript Algorithms and Data Structures
  • Front End Libraries
  • Data Visualization
  • APIs and Microservices
  • Information Security and Quality Assurance
  • Coding Interview Prep

Each modules takes about 300+ hours to complete and focuses on core topics related to HTML, CSS, JavaScript, Data Structures and Algorithms, Front end tools such as React, Redux, Bootstrap, Sass.

Backend Development is taught using NodeJS and Express and MongoDB for Database technology. So at the end of this you can call yourself an Junior Developer in MERN (Mongo, Express, React and NodeJS) Stack.

The best part what I like about freeCodeCamp is that there are detailed modules focused on improving the quality of code such as Information & Security, Quality Assurance and Testing and Project Oriented learning.

Ultimately if you spend an year on freeCodeCamp and put what you have learnt to practice, you’ll definitely be a better web developer.

The Odin Project

The Odin Project

The Odin Project is one of the top resource since 2013. It was founded by Erik Trautman during his time as an instructor for a web development bootcamp. Main aim of the project was to provide structured learning resources or a path for beginners and learners. Before this, they were lots of resources all over the internet, but no sane way to go through all of them in a structured path.

Today The Odin Project is maintained by volunteers and backed by supporters and sponsors. The best part about The Odin Project is that it provides you a spartan way to learn web development. This means that you have to set up your own development environment, download and install stuff, tinker with command line look around for help. This is as real world as it gets with very less hand holding. Ultimately The Odin Project makes you a better developer who is self reliant.

The curriculum at The Odin Project has 3 tracks or paths

  • Full Stack JavaScript
  • Front End Only
  • Full Stack Ruby on Rails

The tracks start from web development basics (or 101 topics) and also gives you taste of real world stuff such as Text Editors, Command Line, Git. Core topics covered in the tracks are HTML, CSS, JavaScript, Ruby, Front End Frameworks, Backend with NodeJS or Ruby on Rails.

The Odin Project is one among only few free online bootcamps to teach Ruby and Ruby on Rails.

There are plethora of hands on project challenges such as Rock Paper Scissors, Etch-a-sketch, Calculator, Tic Tac Toe, Restaurant Page, ToDo List, Weather App, Battleship, Photo Tagging App, Message Board, Inventory App and finally a Social Network clone.

The Odin Project offers some insights on how to get hired.

As an interesting fact, there are few students who work on freeCodeCamp and The Odin Project side by side. They use FCC for learning theoretical concepts and TOP for practical projects.

App Academy Open

App Academy Open

App Academy Open is a free full stack web development curriculum offered by App Academy, a top coding bootcamp in US. Apart from free track, they also offer Mentorship, live lectures, pair programming, career services which are paid premium services.

I’m gonna discuss here only about the free curriculum.

App Academy Open curriculum consists of Video Lectures + In-Browser Coding. They cover through a vast list of topics which may take over a year to complete.

  • Welcome To Coding
  • Intro to Programming
  • Full Stack Online – Intro to Programming
  • Software Engineering Foundations
  • Ruby
  • SQL
  • Rails
  • JavaScript
  • React
  • Full Stack Project
  • MERN Stack Curriculum
  • Full Stack Online – Job Search
  • Docker Curriculum
  • GraphQL Curriculum
  • Data Structures and Algorithms

Each topics are quite voluminous on their own and there are lots of projects to be completed at the end with detailed guidelines. This program will definitely help you get job ready and your projects will impress a lot of people.

Full Stack Open

Full Stack Open

Full Stack Open is a recent online web development bootcamp collaboration by Houston, a Finnish software company and The University of Helsinki (of Java Mooc.fi fame).

Full Stack Open is aimed for advanced web development learners with a focus on topics such as React, Redux, Node.js, MongoDB and GraphQL. It assumes you have a familiarity with HTML, CSS and Javascript.

The objective is to build single page applications with React that consumes API’s build with Node.

The course is divided into 9 parts on following topics

  1. Fundamentals of Web apps
  2. Introduction to React
  3. Communicating with Server
  4. NodeJS + Express
  5. Testing Express Servers
  6. Testing React Apps + Custom Hooks
  7. State Management with Redux
  8. React Routeer + Styling with CSS + Webpack
  9. GraphQL

Full Stack Open is a very professional course which is frequently updated and aims to make course learners job ready by the end of the course. This online bootcamp needs to be your priority when you have mastered the basics of web development.

CS50’s Web Programming

CS50’s Web Programming with Python and JavaScript

CS50 by legendary David J. Malan of Harvard University is a brand by itself which revolutionized the way Computer Science fundamentals are taught in the classrooms across the world.

CS50’s Web Programming with Python and JavaScript is web development focused curriculum by the makers of CS50 which can be considered as a sequel to the original course.

CS50’s Web Programming with Python and JavaScript deep dives into following topics

  • Git
  • HTML, CSS
  • Flask
  • SQL
  • ORMs, APIs
  • JavaScript
  • Front Ends
  • Django
  • Testing, CI/CD
  • GitHub, Travis CI
  • Scalability
  • Security

Each topic is an hour long video lecture which are followed by project with detailed guidelines. The final project is to build a web application of your choice with Python, JavaScript and SQL.

Just like CS50, this course is also very popular with web development learners. At the end of the course, you will have solid fundamentals and you can gain a fresh perspective on web development.

If you are a newbie starting to learn web development, I highly recommend you make the best use of any or all of the above Free Online Fullstack Web Development Bootcamps. Each bootcamp is unique on its own, just experiment and find out which appeals more to you. The most important part is to build a solid portfolio for yourself and develop your skills to be job ready.

That’s it for this post. Follow my blog for more resources on web development in days to come.

Happy 2020, Happy coding !

PS: If I have helped you and made a difference in your life, considering supporting my blog.

Create United States Flag with HTML and CSS

Happy Independence Day to all the citizens of United States of America. My old post of creating Indian Flag with HTML and CSS was very popular among my readers. So today I want to create American Flag with HTML and CSS to celebrate US Independence Day.

Learn to create United Stages Flag with HTML and CSS. US Flag is fun.
Flag of the United States of America.

United States Flag or American Flag is rectangular in shape like most flags. It has 13 horizontal stripes which are of two alternating colors red and white. There is a blue rectangle (called as a canton) with 50 small white five pointed stars.

US Flag which is also called as Stars and Stripes, Old Glory and the Star Spangled Banner has been a proud symbol of freedom, democracy and liberty in the world.

Lets break down this challenge into easy steps.

  1. US Flag has 13 Horizontal stripes, which are of equal height. So let us take height of each stripe to be 20px. I have chosen this height so that we do not run into decimals or fractions when it comes to aspect ratio.
  2. US Flag has several predefined aspect ratios. So let us take flag ratio of 1.9 which means we can build a flag with dimensions 494px width x 260px height.
  3. Among 13 Horizontal Stripes, there are 7 red stripes and 6 white stripes.
  4. Width of Blue Canton is 2/5th width of the flag. This means width of Canton is 197.6px.
  5. Blue Canton spans 7 stripes in height. Hence its height is 140px.
  6. There are 50 white stars in total. They are arranged in 5 rows of 6 stars and 4 rows of 5 stars. Let us assume height of each star is 16px.
  7. Approximate Hex Codes of Flag Colors are Red (#B22234), Blue (#3C3B6E) and White(#FFFFFF).

So we have got all the data to build the US Flag. Let us write some code.

HTML Code

We will plan our HTML as follows.

  • Let us have an outer div with class flag
  • The Flag div will have 13 divs with class ‘stripe’ and 1 div with class ‘canton’. To do this very quickly, we can take help of emmet and type .flag>.stripe*13+.canton and press enter
  • Stripe will be empty divs. Canton will have 9 rows of div with class star-rows. Each star row will have 6 spans or 5 spans called star with a unicode character ★ or ‘★‘.
  • You can do this quickly using emmet once again by typing .star-row9>span.star{★}*6and press enter. You can eliminate addition star from alternate rows.
  • We will add a message I ❤️ USA at the bottom of the flag.

Here is the HTML Code.

CSS Code

Let us apply CSS code to our flag by applying a mini reset.

  • The flag class as per the specification will have a width of 494px and height of 260px. We can give some top and bottom margin. Let us set its position to relative which will help us to position canton later. Let us give some box shadow for visual appeal.
  • The stripe class will have an height of 20px. Now comes the fun part. In order to assign background colors to alternate red and white stripes we will make use of CSS nth-child selector. .stripe:nth-child(odd) selects all odd stripes from first one and .stripe:nth-child(even) selects all even stripes.
  • The blue canton will have to be positioned absolute with respect to top left corner of the flag. It has a height of 140px.
  • The stars are the most trickiest part of this flag challenge. Let us assign a height of 15px for 9 star-rows. The star-row will display all its child elements as a flex. Let us assign white color to our star spans.
  • US Flag stars are arranged differently in alternate rows. To achieve this we will use the nth-child selector once again. However for the odd rows we will use justify-content:space-around and for even rows we will use justify-content:space-evenly. Voila, the star arrangement is perfect !
  • We will style our message and show some love to the flag !

Here is the final CSS.

Finally we have built the US Flag with HTML and CSS. Here is the CodePen

See the Pen US Flag by Tech Jasmine (@techjasmine) on CodePen.

I hope you have enjoyed this challenge. Its a good challenge to test your skills in HTML and CSS. Using nth-child selector is a coolest part. Of course there are thousand different ways to achieve the result, but this is my little approach. If you have any suggestions, let me know about it 🙂

Wish you once again a very happy 4th of July 🇺🇸 !

Keep Coding ! Keep Smiling 🙂

How to get rid of Black Screen in OBS Studio

Open Broadcaster Software or OBS is a free and open source software for video recording and live streaming. Black Screen during Display Capture on OBS Studio is a common issue when someone installs it on Windows 10 machine. I faced it myself too. There were a ton of solutions but only few managed to work.

In fact OBS themselves have a guide to troubleshoot this issue. Here are some of the common solutions which might work for you.

1. Switch Off Game Mode

Go to the Start Menu -> Type Game Mode Settings -> Turn off the Game Mode

Turn Off Game Mode to prevent Black Screen on OBS

Game Mode helps to prioritize your gaming experience on Windows 10. Game Mode has a screen record feature of its own and this can interfere with to OBS to cause Black Screen while recording.

2. Change the Graphic Processor

Right Click on OBS Studio Icon -> Run with Graphic Processor -> Choose Integrated Graphics

Choose Integrated Graphics as a setting to remove black screen on OBS Studio

Sometimes you got to make this change exclusively to force the machine to run OBS using integrated graphics. The reason may be due to the fact that NVIDIA is not able to force OBS to use integrated graphics for some reason. This trick has helped several people to get rid of their Black Screen Issue on OBS.

3. Make Changes to the Graphic Settings (This worked for me)

Go to Start Menu -> Type Graphic Settings -> Choose Classic App -> Click on Browse

Make changes in the Graphic Settings to get rid of Black Screen on OBS Studio.

Go to C: -> Program Files -> obs-studio -> bin -> 64bit and select obs64 icon

OBS Studio App will be added to the screen. Click on Options and choose Power Saving as graphics preference.

Select Power Savings as default Graphics Preference to get rid of Black Screen on OBS Studio.

Now restart your OBS studio and your computer if required. Black Screen Issue will go away. You can see your Display Capture on your OBS Studio.

OBS Studio works perfectly and Black Screen is gone.

I hope any of the above solutions work for you to get rid of the Black Screen. Have a good time streaming with OBS !

Best Deno Tutorials on YouTube

Deno Tutorial. Learn Deno online.

Deno is a secure runtime for JavaSript and TypeScript. It aims to replace Node.js which is the de-facto runtime when building modern JavaScript apps.

Deno was created by Ryan Dahl, who is also the creator of Node.js. According to Ryan in his famous conference speech, Node.js had few design flaws which became apparent as its usage exploded in the web development industry.

Some of the pain points of Node.js according to Ryan are

  • Lack of Promises support in the initial design which led to non standard implementation to handle async code (untill the arrival of async/await).
  • Security Issues by npm packages such as network access, file system access.
  • Unnecessary complex wrappers to its build system GYP.
  • Module system is poorly designed. Package.json and node_modules to manage dependencies is a well argued topic in the web development community.

He announced the alpha version of Deno on May 13, 2008. Today Deno is in stable release with version 1.1.x at the time of writing this post. Under the hood Deno is built with Rust upon Google’s V8 JavaScript runtime engine.

Github Repo

Some of the core features of Deno are

  • All async actions return a promise in Deno which is drastically different from Node.js
  • Improved Security. No file, network, or environment access, unless explicitly enabled.
  • TypeScript support without additional tooling or configuration.
  • Single executable file. No more npm, node_modules and package.json in the project.
  • Dependency Inspector and Code Formatter are built in.
  • Reviewed and Audited standard modules from deno.land/std or Deno Standard Library.
  • Common Js require() is replaced by import from ES Module syntax

npm ecosystem and node_modules to manage dependency has become a huge pain for JavaScript developers. There were a lot of security issues due to unsecure packages. Basically Deno offers a new take on dependency management for the apps.

Deno Packages

Third Party Deno packages or modules are available via url https://deno.land/x

All the third party packages are imported via this url.

For example, Oak is a middleware framework for Deno which is similar to Express or Koa for Node.js

To import Oak, we simply use following line in our file

import { Application } from "https://deno.land/x/oak/mod.ts";

It is important to note that Deno downloads and caches all the imported modules. Cached modules will not be re-downloaded unless we specifically ask for it.

Hello World using Deno

Deno Tutorials on YouTube

I have collected a bunch of great high quality youtube tutorials to learn back-end development with Deno.

Deno Tutorials on Udemy

Currently there is a full length Udemy Course by Andrie Neagoie. I hope there will more tutorials in the days to come.

Conclusion

Deno may become a serious contender to Node.js in the months to come. It has a long way to go before being used in production for serious web projects. It is an excellent and well designed JavaScript runtime environment. But Node.Js and npm ecosystem is not going away soon and may last for a decade or more.

Its good to have a basic understanding of Deno. This will be definitely a skill which may be demanded by employers once the ecosystem is mature enough to be used in production.

I hope to write more on Deno in the coming days and keep this list of tutorials updated. Thank you for reading and Have a great day !

Learn SQL online. Best SQL Tutorials on YouTube.

Learn SQL

Today is the 25th anniversary of PHP. By a co-incidence I was messing around with some PHP and MySQL code for a simple web app. I know this stack may not be cool or hip today, but I feel proud to say that it puts food on my table.

I was stumped by SQL JOINS which i needed to get data from two related tables in the database. It let me down a rabbit hole of learning SQL and I found several great tutorials on YouTube.

SQL (Structured Query Language) commonly pronounced as sequel is a programming language used to write code for Relational Database Management Systems (RDBMS). Relational data refers to bunch of data stored in tables of a database which are often related to each other. RDBMS systems are software which helps us to play around with the data (Create, Read, Update and Delete) by using SQL language.

Some of the famous RDBMS systems are MySQL, PostgreSQL, SQlite, MariaDB which are used in open-source and personal projects and of course Oracle, Microsoft SQL which are used in enterprise projects.

MySQL is the most popular RDBMS system powering millions of websites and web applications all over the internet. MySQL is used in Content Management Systems like WordPress, Drupal, Joomla. Few of the popular websites to use MySQL are Facebook, Twitter, YouTube, Wikipedia etc. MySQL is open sourced software. It is currently owned by Oracle. PHP and MySQL were once a golden combination.

MariaDB is a fork of MySQL due to concerns of its acquisition by Oracle Corporation. It is highly compatible with MySQL and have same APIS and Commands and works well on LAMP servers. If you are developing software locally on a WAMP/XAMP server, there is a high chance you are using MariaDB and you may not even know the difference. Many open source projects are using MariaDB and it is also shipped by default to Linux Distros.

PostgresSQL or simply Postgres is a relatively new kid on the block. Its a great RDBMS which offers high performance, extensibility and scalability. It is also an open source software. Postgres is used by websites such as Reddit, Instagram, Disqus, OpenStreetMap, Yandex, Grofers etc. Postgres is nowadays considered a good choice for a database regardless of the backend programming language.

SQLite is a light weight database used mainly as an embedded database in mobile applications, web browsers and embedded systems.

Relational Databases are an industry standard and there are various enterprise solutions such as Oracle, MSSQL, IBM DB2, SAP R/3, Teradata etc.

Advantage of Learning SQL

There are thousands of jobs which require proficiency in SQL. Many of them use a RDBMS like MySQL. PostgreSQL as their database. SQL skills are transferable across various RDBMS whether they are open-source systems or enterprise solutions.

There is also a dedicated role in as a Database Engineer in the field of software development. A Database Engineer has a good fluency over SQL language and should possess platform knowledge of various RDBMS software. He/She is tasked with creation, configuration and maintenance of databases for a Software Company.

Common SQL Topics

  1. Introduction to Databases
  2. Basics of SQL
  3. Relationships
  4. Tables
  5. Data Management – Creating, Reading, Updating and Deleting data in a Database Table.
  6. Queries – Example – SELECT, WHERE, INSERT
  7. Operators – AND, OR, NOT, IN, BETWEEN, LIKE, ORDER BY, LIMIT
  8. Joins – Inner Joins, Outer Joins, Self Joins, Cross Joins
  9. Functions
  10. Unions

List of SQL Tutorials

YouTube

I am planning to update this list and add additional resources such as Udemy Courses and Blogs. I hope you enjoy learning SQL !

Stripe online payment, finally in India !

Stripe Payment Gateway available in India.

Yes ! I’m ecstatic to hear about Stripe starting their online payment service in India. Stripe payment gateway is known for its ease of integration with web and mobile apps. This is an awesome news.

If you are a web developer or you are learning web development, you can find thousands of tutorials online about integrating Stripe Payment Gateway in their web and mobile apps. Stripe checkout integration is one of the most requested feature among freelancing clients.

This always used to make me sad as Stripe wasn’t available in India. This meant that we could not even create an account to play around with its APIs.

There was finally a ray of hope last year when Stripe announced that they will release in India soon. And now finally its here. It’s time to rejoice.

Competition

Stripe faces tough competition from Indian Payment Gateways such as Razorpay, PayU, CCAvenue, InstaMojo etc. Razorpay in particular is fantastic and is league above all other payment gateways with is developer friendly API, top notch documentation and amazing customer support.

PayPal too is catering to the Indian audience in a limited way. But PayPal is mostly used as a means to receive International Payment by freelancers in India. India has one of the toughest laws about money transaction in and out of the country. This is mainly to avoid money laundering and restrict funds for terrorism, narcotics and other things. There are so many bureaucratic hoops. If you are an Individual or Freelancer, its so much difficult to accept payments from rest of the world. PayPal is the only solution most of the times and they charge up to 5.5% for most payments which definitely pinches your pockets.

I hope Stripe will provide some much needed competition to PayPal. Stripe should facilitate Indian freelancers to receive payments from their clients abroad.

UPI Support

India is currently seeing a spectacular boom in internet usage thanks to aggressive positioning by internet provider JIO telecom. So lot of Indians are consuming content, transacting online for the very first time. From past couple of years there is a strong upsurge in online payments due to a instant QR code based money transfer technology called UPI which was introduced by Government of India. PayTM, PhonePe, Google Pay, Amazon Pay and of course BHIM (by Govt of India) are some of the top UPI payment gateway apps. They work similar to AliPay, WeChat Pay etc which are popular in China.

I went through their API and Docs. Currently UPI, Net Banking, and Indian Payment Wallets are not supported. Stripe is currently supporting only credit cards and debit cards. If Stripe wants to cater to the domestic market, they should definitely support UPI, Net Banking and Indian Payment Wallets.

Stripe India Pricing

Stripe follows Pay as you Go method with following rates

  • Domestic Indian Cards (issued in India) – 2%
  • Domestic Indian Cards (issued out of India) – 3%
  • International Cards (issued anywhere in the world) – 4.3% + 2% additional for currency conversion

To compare PayPal charges 2.5% + (₹3 fixed fee) for domestic payments and a range of 3.4% to 4.4% + fixed fees for International payments. Now this range depends on monthly sales volume. So most of the time you can assume it to be 4.4% if you earn less than $3000.

To conclude, additional currency conversion fees at 2% seems to be steep which makes International Payment at 6.3% which is higher than PayPal.

I really hope Stripe also supports UPI, Net Banking and Indian Payment Wallets. PayPal already supports them.

I’m thankful that Stripe has finally arrived in India. I hope they do some market research on Indian audience and improve their solutions. I’m rooting for Stripe to capture a large pie of International Payment market share.

Build Ecommerce Website (Amazon Clone) with Node and React Tutorial

Hello guys, I found a nice 5 hour long YouTube tutorial on how to build a Ecommerce website with Node and React by Coding with Basir.

By the end of the tutorial you will build a mini clone of Amazon using Node and React. This app is a Full Stack MERN App using MongoDB for database, Node + Express for APIs, front end is built with React (using Hooks) with Redux for state management. Finally the app is deployed on Heroku.

Course Contents

  • 00:02:00 Part 01- Introduction
  • 00:08:26 Part 02- Install Tools (VS Code, Chrome)
  • 00:12:36 Part 03- Website Template (HTML, CSS)
  • 00:29:47 Part 04- Products List (Grid, Flexbox)
  • 00:41:54 Part 05- Create Sidebar (JavaScript)
  • 00:52:39 Part 06- Create React App (React)
  • 01:01:09 Part 07- Render Products (JSX)
  • 01:06:30 Part 08- Product Details (React Router)
  • 01:30:53 Part 09- Create Node Server (Node.js)
  • 01:39:52 Part 10- Fetch Server Data (React Hooks)
  • 01:47:55 Part 11- Manage State With Redux (Redux)
  • 02:07:11 Part 12- Add Redux To Details (Redux with Hooks)
  • 02:29:23 Part 13- Shopping Cart Screen (Advanced React)
  • 03:08:11 Part 14- Connect MongoDB (Mongoose)
  • 03:21:35 Part 15- Sign In User (JWT Authentication)
  • 03:56:02 Part 16- Manage Products (React Modal)
  • 04:38:43 Part 17- Checkout Wizard (React Wizard)

Topic Covered

  1. HTML5 and CSS3: Semantic Elements, CSS Grid, Flexbox
  2. React: Components, Props, Events, Hooks, Router, Axios
  3. Redux: Store, Reducers, Actions
  4. Node & Express: Web API, Body Parser, File Upload, JWT
  5. MongoDB: Mongoose, Aggregation
  6. Development: ESLint, Babel, Git, Github,
  7. Deployment: Heroku

Demo – https://node-react-ecommerce-app.herokuapp.com/

Github – https://github.com/basir/node-react-ecommerce

CORS issue in create-react-app

Did you know malformed API url in create-react-app can cause CORS issue in Google Chrome when getting data from external api via fetch or axios.

I know this a strange issue. It is what i faced when using pixabay api in a create-react-app. I had stored api key in .env file. I made a stupid mistake of adding a semicolon as in case of a variable declaration inside .env file.

cors issue storing environment variables create react app
DO NOT ADD SEMICOLON at the end of environment variable

And i used the api key using REACT_APP_PIXABAY_API_KEY react enviroment variable in a JavaScript template string inside axios. I was getting this CORS error in browser console.

cors issue fetch api to call external api
In this API request, REACT_APP_PIXABAY_API_KEY is wrong and hence URL was malformed

It was really hard to debug the issue. I tried various CORS workarounds as mentioned in official docs including configuring proxy myself and adding http-proxy-middleware.

But still the issue wasn’t solved. I wasted nearly 2 hours on this bug. Finally when i was inspecting the console log, I found a semicolon where it shouldn’t be. It lead to an Aha! moment where i revisited the .env file and fixed the environment variable.

cors error in google chrome due to malformed api url in create react app
CORS Error due to malformed API URL

Finally I got rid of the issue and was able to get the data from the server.

So when using create-react-app, make sure your API url is formed correctly and your environment variables are correct to avoid bugs such as these.

Thomas Weibenfalk – JavaScript, React and more.

Thomas Weibenfalk is one of the top JavaScript and React teacher in the world of web development. Thomas hails from Sweden and has a masters degree in Marketing & Economics from Lund University. He has good foundations in graphic design as well due to which his project tutorials have nice and clean design.

Mr Weibenfalk has worked as a full stack web developer and a freelancer for several years and he has a rich experience in the field of web development.

I discovered Thomas Weibenfalk mainly through Twitter and freeCodeCamp forums. He was one of the top 100 contributor for freeCodeCamp in the year 2019.

Weibenfalk runs a successful YouTube channel of the same name and his tutorials are really wonderful to watch. He creates project oriented web development tutorials on mostly Vanilla JavaScript and React.

Most noteworthy thing I like about this teacher is more real world project oriented teaching, less preaching, to the point practical tutorials, teaches everything from scratch

Top Tutorials by Weibenfalk

Paid

  • React Movie App – A clone of popular movie database site which teaches you react fundamentals, create-react-app, jsx, hooks and functional components, local and session storage and app deployment on Netlify.
  • Gatsby with WordPress as a Headless CMS – This tutorial teaches you how to use Gatsby Static Site Generator + React to build a front end website consuming WordPress API

Free

YouTube

Weibenfalk has helped me get better at React. I highly recommend his courses. He is very approachable via email and social media as well.

Find Thomas Weibenfalk on

I hope you have enjoyed this blog post. My aim is to introduce some great teachers and content creators (even lesser known ones) in the world of Web Development.

Keep Coding, Keep Smiling !

Create Indian Flag with HTML and CSS

How cool will it be if we can create Indian Flag with HTML and CSS ! Let’s build it together.

Indian Flag

Indian Flag is a rectangular flag with Saffron, White and Green tricolor stripes and Navy Blue Ashoka Chakra, a 24 spoke wheel at the center. Our flag has a long history and is a powerful symbol which unites our countrymen.

So let’s break down the challenge of into multiple steps.

  • Indian Flag has a pre-defined aspect ratio for various flag size. For our reference let’s build a flag of 225px x 150px
  • Indian Flag has 3 rectangular stripes. So we need 3 <div> for each stripe which are of same dimension. In our case width needs to be 225px and each stripe needs to be 50px in height. So that 3 x 50px = 150px
  • We need hex color codes for Saffron, White and Green stripe. My quick glance at Wikipedia gives me following approximate hex codes which will be good to represent our flag.
    • India Saffron – #FF9933
    • White – #FFFFFF
    • India Green – #138808
  • We can use this image from Wikipedia for Ashoka Chakra at the center of the white stripe. The hex code for navy blue Ashoka Chakra if you are curious is #000080, which we will use later for a message.

Let’s translate above steps into HTML

Ok wonderful ! Now let’s style our flag using CSS.

Hurray ! We have completed creating Indian Flag with HTML and CSS.

Here is the CodePen.

See the Pen Indian Flag by Tech Jasmine (@techjasmine) on CodePen.

I usually present this simple challenge to junior developers when recruiting. I look for following points in the implementation

  • The use of width and height for div
  • Use of reusable classes for 3 Stripes of same dimension and id for each individual colors
  • Ashoka Chakra, which is a major challenge for many. You need to set the size of the image and center it in the white stripe. Skilled candidates use CSS Flex for white stripe to center the image. Some also make image as a block, set margin : auto to center it and add padding to the top of the white stripe.

Ofcourse this project can be implement in different ways, using different CSS properties.

Overall making Indian Flag with HTML and CSS is a fun challenge. Try to create the flag if your country using HTML and CSS. Let me know about it in the comments. Always ask for help if you need it.

Keep Coding, Keep Smiling !

PS: If I have helped you and made a difference in your life, considering supporting my blog.