DEV Community: Kritika Srivastava

DJ'ing with different Tech Stacks.

Kritika Srivastava — Fri, 24 Jun 2022 18:02:57 +0000

Hello, DEV Friends. Few days back while working on my React Application I was thinking that why sometimes we are only thinking about a particular language/framework in which we code generally. I like to learn different things and blend them then why not in Coding.

So, Let us take a different perspective as one moves from Beginner to Intermediate level or to Senior Level. You can think of yourself as a DJ(DJ of Tech here not music :P) who can mix and match different technologies to create Best Apps which has great UI, greater performance. So you have to think about solving problems in the most optimized way.
Hence, Let us talk about how we can make our React Apps better:

React best practices: Thinking in React, use React best practices which we have been following usually. Refer to React docs.Go through the Redux toolkit, Redux-Thunk, Redux-Saga, React Router 6. Learn JavaScript first then start creating apps in React to understand it better.
React 18:Once you are aware of all the core React features and how to use it better then go through the React 18 features. Read about useTransition, Automatic Batching, Suspense, etc.
Next JS: We all know it is a React Framework for production. It is used for server-side rendering. It is better performance wise and if you have used React Router, you might know how easy it is to declare different routes in NextJS. Then why not create better apps using NextJS.
TypeScript: TypeScript does not need any introduction. We all know how cool it is. Blend your React apps with TypeScript to avoid errors and more. I do not want to go in detail or copy-paste its technical definition. I just want to put the stress on the point that if you want to create an application then why not a better one.
Material UI/SASS/Other UI Frameworks: There are so many frameworks out there like SASS, Material UI, Ant Design, Bootstrap, style-components, Tailwind CSS, Bulma CSS, Semantic UI and many more. Find out which works best for you. Find out in which you are more comfortable or you think will be suitable for creating your applications as per your requirement. Learn CSS basics, CSS-Flexbox, CSS-Grid and then try these Frameworks. These Frameworks save your time in coding the design for your application.
Other Libraries/Frameworks/React Frameworks: In one of the conferences I got to learn about SOLID, Svelte, Concurrent React 3D, Threejs, etc. Once you reach a good level in ReactJS, try using one of these mentioned above.
MERN Stack: Last but not the least, learn how to create Full-stack applications using frontend, backend & database. You can learn Nodejs for backend which is nothing but JavaScript. For database you can start with either MongoDB or PostgreSQL. If not MERN stack, you can use Firebase or serverless functions for backend along with Reactjs.

I have read somewhere that programming language is like a pencil/tool which you use to draw the picture. So use whichever works best for you and solve the problem.

If you are not using JavaScript/React then find out how can you blend your language/framework with others to create magic.
Please do tell me about your views and experiences on the same in comments.

Happy Coding :)
You can follow me on Twitter and Github.

Prepare yourself for the next level in Coding.

Kritika Srivastava — Sat, 09 Apr 2022 17:06:02 +0000

Hello, DEV Friends. Hope you're doing Good! While working on my side project in MERN stack suddenly a thought dawned on me, "Hey! I started with React.." Well, this article is about preparing yourself for the next level in Coding.

There are many levels of an Engineer but I will be talking about below levels only:

1.Junior Developer: When you are a Junior Developer, (well I am not talking about the designation but where you think you are in Coding.) you know about a skill up to some level and mostly you have to Google to find out how to build that Application in a certain way. We all have been through that tutorial hell to practice that 1 app, master that one skill from different resources. Practicing 10 apps in that skill. Learning how to create Todo app with all the basic functionalities in that language/framework. Then going through that video once again to see how that person built that functionality.

2.Mid-level Developer: Then there is a level where you have figured out where you can find the right resources to learn a skill. You know how to build a certain app but now you know how to find a better solution. You no longer find yourself lost in tutorials most of the time. You have learnt how to work with different tools, debugging, application performance related tools, etc.

3.Senior Developer: At this level you have gained a lot of experience(not necessarily professional but can be self-practice) and practiced your skill. You know how to learn different languages, frameworks, tools. If you cannot find a solution for a certain problem, you know how to build one and the optimized one.You have learnt how to learn.

There are more levels than above like Lead Developer, etc. My only opinion is at whatever level you are just find out what are the skills, tools and how much practice is required to reach the next level of yours. Find out how can you make yourself better in your skill.

The opinion shared above are totally based on my personal experience and understanding. Let me know your views on this article and share your personal experience in the comments section.

Happy Coding :)
You can follow me on Twitter and Github.

The Mindset of a Coder.

Kritika Srivastava — Sun, 30 Jan 2022 15:57:06 +0000

Hello, Dev Friends. Wish you all a very Happy New Year.
For some of you, your New Year resolution might be to learn coding/ get a job in Tech / switch your career into Tech or to improve your skills as a Coder.
Here are some of the skills/mindset needed as per my understanding to be a better Coder.These are listed based on my learnings, experiences and what I learnt from others.

I am not saying that you are born with these skills as if you are Neo from Matrix movie and I am trying to tell you that "You are The One." No, you can be the one if you develop certain mindset along with the required skills.

So, let us go through the list:

The problem solving ability: You should be able to understand the problem correctly and completely.Then you must break the problem into chunks and solve it by communicating it to the Teddy Bear in front of you(if you have one or any person :D) and write a pseudo code in parallel.Once you are done with the solution,now code the solution in your respective language.Hence, practice DS & Algo questions.
Having a Growth mindset: In order to build a software you must behave like one.I meant to say that we should always be willing to update ourselves with the trend.For example,if you know JavaScript today,tomorrow in your job you might be expected to know TypeScript too.So you cannot survive with a fixed mindset.Be ready to learn new things.Be flexible.
Learn CSS/CSS frameworks- In order to make a complete application you should know CSS or any CSS framework so that you are able to design it responsively along with the working functionality.
Learn a programming language-Learn 1 programming language first.When you understand any 1 programming language in detail,it becomes easier to understand other languages/frameworks.Most of the languages have loops,Object oriented concepts,strings,arrays,etc in common.So you can understand the common concepts,language specific syntaxes in other languages easily.
Learn Git commands and know Github where you can push your projects.
Learn the coding concepts in detail as it makes the whole learning process interesting.
For example, Do you know how the concept of Closures has been used to save state?Check out this video.
Google: Yes,Google.You should learn how to find the answers if you do not know it.Google is definitely your Best Friend.
Consistency: To be a great Coder you need to stay consistent in your learning. Keep learning and practicing your skills regularly to be in the pace.

Let me know what more points you would like to add to the list.

Happy Coding :)
You can follow me on Twitter and Github.

Build Products to learn coding.

Kritika Srivastava — Wed, 08 Dec 2021 08:11:13 +0000

Hello Dev Friends.
I wish before starting with programming I would have known that it is one of the tools to change the world.It is not just about learning a programming language.In one of my previous blogs I have written about How to think while building Applications but here I want to talk about how to think about what to build.

If you are a beginner then most probably you might be scrolling through the tutorials online to find out what you should build next.There are several ideas out there on the internet.And the most obvious advice we have heard is to "Build, Build and Build Projects".

So,here are my points:

1.After you reach a comfortable level in coding,do not search for the projects on internet for a minute and think about what YOU would like to build for your own and not just for learning.

2.Start with a known problem if not a very complex one.

3.Jot down the features you would like to add to the application.

4.Finalise the UI.

5.Once you are done with the solution then start coding.

6.My advice would be to code it completely without looking at any tutorial to see how others have done it. Ofcourse, Google when you are stuck.

7.Once you are ready with version 1,think about what more features you would like to add to it further.

8.Also think about it as a Product so you can also make a mobile app or PWA or just a web application with a deployed link.

For example,I thought of building a Phonebook to store contact details category wise.

Live Project Link

It is a known and easy problem.I have used React for building it and Bootstrap for UI.
Github Repository Link

Let me know what you have build.

Happy Coding :)
You can follow me on Twitter and Github.

Mistakes as a Beginner Programmer

Kritika Srivastava — Tue, 05 Oct 2021 23:15:10 +0000

Hello,Dev Friends.In this article I want to talk about some of the mistakes we often do as a beginner in programming.Some of them are from my experiences while some of them are common mistakes.

So,here we go:

1.Not setting the end goal clearly,for example,"I want an entry/mid level React Developer job in some place by some date."You need to know first what do you exactly want.It can be a job in Data Science,Python,etc.Make an estimated deadline based on your study plan.

2.Planning on the mindset required.As per my opinion,you cannot just simply start doing something without planning and understanding the mindset required behind coding.Do you understand the essence of being a programmer!

3.This is an important one.Break the problem,solve the problem first and then code the solution.Do not code directly.

4.Be confident about the language and frameworks you want to learn and stick to it.Do not get confused in between and try to learn everything.For example,if you want to learn web development then you need to learn HTML,CSS,JavaScript and then decide if you want to learn Vue/React/Angular,etc.

5.Have a portfolio with few good projects to apply for the job.Maintain those projects on Github.

6.The job of a Software Developer is not just to code but to solve problems.This is an important point and we need to understand the depth of it.To be a better problem solver,practice DS and Algo questions daily in your preferred language.

7.Solve those problems again which you failed to solve in your previous interviews.Most of us leave it unsolved.

8.Tutorial Hell:This is a very common issue which we all face in the beginning.I would suggest to decide on the limited courses which you want to finish first and then jump to other courses.Learn a topic first from one source.

9.If you are new to the industry or changing careers then join your nearest Coding meetup,online Dev community to interact with the like minded people and learn from their journey.

10.This one might be bit off the topic but apply,apply and apply for the jobs,attempt interviews and do not give up in your journey.Let not failures define you.Something or the other will definitely try to stop you in your journey but make sure that you stay consistent,may be take a short break but do rebound back to your path and stop only once you reach the end goal.

Let me know your points in the comment section which you would like to add to the above list.

Happy Coding :)
You can follow me on Twitter and Github.

How I started with a Technical Blog

Kritika Srivastava — Wed, 25 Aug 2021 05:35:06 +0000

Hello,Dev Friends.I could have named the title as how one can start writing a technical blog but the approach might be different for different people hence,I will be sharing few points based on my experience on a high level.Here, I am not talking about how to plan your each blog post.

The moment I saw people sharing their blog posts on Twitter,my first reaction was "I don't know if I can ever write one."
Writing poems,travel blog has been my passion since childhood but I never tried writing about some technical concepts and the projects I have built.

Here are some points which I would like to share:

1.Choose a platform first where you would like to write your blog posts.I chose Dev community.

2.Choose a domain and stick to it.For example, web development,mobile development,etc in whichever field you feel comfortable.

3.Never write with the intention of writing a blog post:Just for the sake of writing do not start with a blog post.Write with an intention of sharing information and helping others.

4.It is not mandatory to be an expert in a particular field before you start writing a blog.

5.Ideas will come only when you are consistent in coding and deeply involved in the field.When your mind thinks about it even in a default mode,ideas will flow naturally.You will never have to think separately about the topics.

6.Talk about your projects and the concepts which you found interesting or worthwhile to share with others while you are on your journey.

7.Talk about your journey,career switch,podcasts,talks,tutorials anything which you have done or doing in this field.

8.Avoid repetition and making your blog monotonous.But it is obvious that we are not experts and so we learn through mistakes.

9.Read blogs of others in the coding community and get an idea.

Keeping the post short I would just like to say that START.PLEASE START.Do not think twice.

Happy Coding :)
You can follow me on Twitter and Github.

How to think while building Web Applications

Kritika Srivastava — Sun, 25 Jul 2021 15:38:08 +0000

Hello, Dev Friends."How to think while building Applications?"This is the question I didn't know how to approach in the beginning.While creating applications when learning web development we often get confused about what features to add and what not to.So here I will give you an example of one of my perspectives which I learnt:

1.You are trying to solving a real problem:

Suppose you want to create an E-commerce/Clothing store application.You have to think about it irrespective of the technology first.Forget about React or JavaScript,imagine your friend wants to have her/his online Clothing store.So here you are trying to solve a real problem and not just build an app.

2.Mandatory features:

Now think about the mandatory features required for the app.
You will need:
1.A landing page with the description about the product and its picture
2.User login feature
3.Display page of products
4.Facility to add the products to cart
5.Cart page to increase,decrease amount of products,remove products
6.Online payment facility
7.Physical address of store if available or the concerned address with contact details of store owner/team.
(Add more features if you can think of any)

3.More Features:

1.In a landing page you can add featured products,photo gallery of products,services provided,footer with social media contacts.
2.Contact form for the customers or the feature to subscribe to regular newsletters.
3.About page of the clothing store.
4.Detailed product page with customer reviews,stock details,color,size,star ratings and more details about the single product.
5.Facility to search for products.
6.Feature to filter,sort the products.
7.Countdown timer for special sale.
8.Random fashion quotes on product page.

Example project:Github Repository Link

You can add as many features as you can think of.After finalising the features,plan your designs,technical logic,libraries,tools you will need to complete your project.

You can also refer to tutorials for features and then implement in your own application.But think like you are solving a real Business problem instead of thinking that you are building an application in React or JavaScript.

Let me know about your approach in comments section.

Happy Coding :)
You can follow me on Twitter and Github.

List of Issues

Kritika Srivastava — Tue, 13 Jul 2021 06:22:12 +0000

Hello Dev Friends.While coding we often run into repetitive issues and find ourselves Googling again.So here I have made a blog post to capture the common issues we run into.I will be updating the post regularly.

Issue 1:Error while creating react app-

Invalid response body while trying to fetch https://registry.npmjs.org/eslint-plugin-jest: ENOENT: no such file or directory, lstat 'C:\Users\Kritika\AppData\Local\npm-cache_cacache\content-v2\sha512\0e\da\b8126639b9463e48742ecea7388f266acb9fee5fdd478a932b0a282a3a514f006180f3996c00ed971578c0f6524fbd5166f9ad7829bb492af47ad233159e'
OR
npm ERR! invalid json response body at http://registry.npmjs.org/ansi-escapes reason: Unexpected end of JSON input

Solution:

npm cache clean --force

Solution link:
https://stackoverflow.com/questions/64625539/npm-err-invalid-json-response-body-at-http-registry-npmjs-org-ansi-escapes-re

Issue 2-Error while deploying react app to Netlify

Failed to compile: Cannot find file './containers/App/App' in './src'

Solution:

git rm -r --cached . git add . git commit -am 'Removing cached files'

Solution link:
https://stackoverflow.com/questions/55754231/failed-to-compile-cannot-find-file-containers-app-app-in-src

Issue 4-Link-https://stackoverflow.com/questions/71835697/create-react-app-dependency-version-issues-with-react-18/71836035#71836035

Please share the issues in comments which you have encountered recently.

Happy Coding :)
You can follow me on Twitter and Github.

Boilerplates for websites/app building

Kritika Srivastava — Sat, 26 Jun 2021 08:09:58 +0000

Hello Dev Friends.As we are learning web development, we often get overwhelmed with so much to learn and practice.Then why don't we simplify our learning by identifying the repeated patterns in our code.So let us have a look at what are the similar components you are repeating in almost every app and still not mastering it.

1.Navbar:This is the basic component which every application will have.Then first learn how to make one basic navbar.
It will have atleast a brand logo and list of menus for navigating to different pages.Use CSS-Flexbox or CSS-Grid to align it properly.To make it responsive you can make toggle bar using JavaScript or align the items in center row-wise for smaller devices.
Here is the example of my application which you can refer to.
Example:Github Repository Link

2.Footer:This is another basic component which you can style using social media icons from FontAwesome
You can also have a fixed footer.
Example:Github Repository Link

3.Homepage with a background image:Learn to atleast make a single webpage with a full background image,some text in center and a navbar.
Example:Github Repository Link

4.Basic landing page:Whether you are building any Business website or E-commerce web app,it is incomplete without a landing page.
It will consist of a homepage describing about the product,may be featured products,services,photo gallery of different products,contact form,footer,etc.
You can include whatever you want based on what you are building.
Example:Github Repository Link

5.Products page:This is another component you will be building to display the products in grid.So you can display the items using CSS-grid and CSS-flexbox.
Example:Github Repository Link

6.Products detailed page:If you are coding in React then you can use React Router to create a product detailed page.You can fetch the data from external api or the local file.
Example:Github Repository Link

There are many more components apart from these too but let us start with these first.I always try to quote examples from what I have built instead of copy-pasting tutorial links and others' examples from internet.
Feel free to come up with your own examples and share with us.

Happy Coding :)
You can follow me on Twitter and Github.

List of APIs to use for creating JavaScript/React App

Kritika Srivastava — Sun, 21 Mar 2021 21:08:54 +0000

Hello,Dev Friends.In this article I have written about a list of certain public APIs which you can use for practice as a beginner in React/JavaScript.Before starting with creating Apps in React using Public APIs,learn React basics and about fetch/axios,http requests,JSON.Learn to read the documentation of any API for its usage.

So,here goes the list:

1.Quotes API:
API Link
You can generate random quotes on clicking a button using this API.Make use of fetch and useEffect.
Github Repository
Demo

2.Currency Converter:
API Link
This API has currency exchange rates which you can use for creating currency converter app.
Github Repository
Demo

3.Robohash API:
Website-https://robohash.org/
This API is used for generating unique robot/alien/monster images by adding any text at the end of the above url.
Github Repository
Demo link

4.Random user API:
API Link
You can generate random user and his/her details by using this API.

5.Weather API:
Website-https://openweathermap.org/api
Search for weather of any city with the help of the given API.Generate your API key for usage.

6.OMDB Movie API:
Website-http://www.omdbapi.com/
Search for the movies through this API and you can also display Single movie details separately by using React Router.API key is required.

7.Covid-19 API:
API Link
Through this API you can generate Covid-19 data of different countries.
Refer to this tutorial

There are many APIs but I don't want to overwhelm someone who is starting with React/JavaScript.You can start with these APIs first for practice.

Happy Coding :)
You can follow me on Twitter and Github.

How to Deploy JavaScript/React Apps to Netlify through CLI(Part 2)

Kritika Srivastava — Sun, 14 Mar 2021 22:22:29 +0000

Hello Dev Friends.This is the Part 2 of How to deploy React Apps to Netlify as here I am going to explain you how to deploy your App to Netlify through CLI.

So let us get started by opening the VS Code.
Follow the below steps once your project is ready to deploy.

1.Make sure you are in your current project's folder.Install netlify globally if you are doing it for the first time.

npm install -g netlify-cli

2.Now run the below command in terminal,

netlify init

It will ask you to login to Netlify and to authorise for the first time in your browser.

Now press enter in terminal and give other details and site name which is optional.

Here you can choose "Yes,create deploy site for manually." if you want to do without github or you can choose github option.
Once the deployment is done,we will get the below screen.

3.Now run the below command for deployment,

 netlify deploy

Now you can select current path by pressing enter or you may give your own path.(as shown above)

4.Now finally execute the below command,

netlify deploy --prod

and choose current path.

Once the process is completed, you can open the generated link and see your project live.(as shown above)

For example,
This is our project which I have used just for explaining this process.

Demo Link

Let me know what you create.
Happy Learning :)

You can follow me on Twitter and Github.

React code structuring and best practices

Kritika Srivastava — Sat, 13 Mar 2021 08:32:35 +0000

Here I want to cover some best practices which you can follow while creating a project in React.These are the accumulated points of what I have learned through various tutorials,observation and experience.I am really thankful to all those people who have created good tutorials.

1.Customise the favicon and title in your App.
Do not leave it as default title.I personally believe it shows that you are really interested in what you are doing and building and when someone will look at your project they could see which app it is instead of React logo and default title.Example,
Birthday Reminder

2.Remove unwanted files.
When I create react app I delete the src folder and create again with the only files I need.Delete all those files,folders,images,etc which you are not using in your project.

3.No commented code.
If you have commented any unwanted code then delete it and make sure you do not push it to Github.

4.Remove console.logs.
Now you have a finished app ready for deployment then make sure you have removed all the console.logs which you have used before for debugging.

5.Use named exports.
Suppose you want to import all the files from your pages folder in App.js,then instead of importing one by one use the following steps:
a.Create index.js file in pages folder.
b.Import all the files here.
Example,

import Cart from "./Cart";
import Checkout from "./Checkout";
import Error from "./Error";
import Home from "./Home";
import Products from "./Products";
import SingleProduct from "./SingleProduct";

export { Cart, Checkout, Error, Home, Products, SingleProduct };

I prefer to import it in alphabetical order as it looks organised to me.
c.Import it in App.js as named exports.

import {
  Cart,
  Checkout,
  Error,
  Home,
  Products,
  SingleProduct,
} from "./pages/index.js";

6.Use the latest version or methodolies of any technology in which you are working.
Speaking for React, makesure you are aware of React Hooks,context api,functional components,useEffect,etc.Keep yourself updated.Read the official documentation Link

7.Create a demo link of your project so that anyone can see your project live.
You can use Netlify for hosting.Refer to my blog post How to deploy React Apps to Netlify to know how to deploy it.

8.Naming Conventions:Following the standard naming conventions,name your components in PascalCase.

For naming your states,you can use camelCase like todo,setTodo.

const [todo,setTodo] = useState([]);

For naming booleans use "is" or "has".For example,isOpen,isClose.

const [isFavorite,setIsFavorite] = useState(false);

9.Make sure your App is responsive.

10.Folder structure:You can create pages folder for all the routes,components folder for other components like Navbar,footer,etc.In each folder you can put your javascript,css and test file together for one component or route.Example,

11.VS Code extensions & shortcuts:Make use of VS Code extensions (if you are using VS Code) and shortcuts.For example:Prettier,ESLint,ES7 React/Redux/GraphQL/React-Native snippets,Bracket Pair Colorizer,Relative Path,etc.You can google a little bit on it as there are lot of articles on it.

12.Save your API Keys in a .env file separately and makesure it is not pushed to Github so that it is not public but added to .gitignore file.

13.Last point I want to include is to plan your project before starting it,for example,you can make a flow chart of how you are going to build the components.It is totally upto you how you make it.

I have not covered performance related points but would like to cover in future.Let me know what more points you can add to it.

Happy Learning :)
Follow me on Twitter and Github.