DEV Community: Ishan Tiwari

The fastest way to develop your projects

Ishan Tiwari — Tue, 09 Aug 2022 12:18:34 +0000

Who is this method for?

I prefer to tell you that this method is designed best for people who call programming their side hustle however they are keen on converting from a hobbyist to a professional. Some examples can be a student in 10th grade immersed in studies who finds relief in code (me) or a person working at another boring job (according to him) and wants to code but his tight schedule buries him.

All in All this method is for people who can't find enough time to code and are beginners in this field. Learning new frameworks and technologies.

What the method is?

I recommend you not to code on your normal workday or school day. i.e not to work on any development project. Instead plan your project what tech are you going to use -: what the homepage will look like, what will the models look like, what the routes will look like. Write these down in a notebook or diary and then learn the technologies you shall use in the project.

On a weekend or holiday. Sit down take your notebook up and have 2-3 hours of uninterrupted code time. Write down again what you did, how did it go, what you are weak at, how can you solve these problems, what else do you need to work at.

This way you will not spend much time actually programming, but a whole lot of time in thinking about code. You can solve entire bugs, without touching your code in your head the next 6 days. You can take important decisions without a monitor in front of you.

Why should this work?

This should work because, it's not writing code which is hard it is planning that drives people crazy. This is will force you to spend a whole lot of time at planning and learning and then brutally applying your learning at a single go. This is time efficient as well. Writing your thoughts takes no more than about 20 minutes. You can do this the time you wake up or the time you retire to bed.

Also, writing has miraculous powers, by actually writing what you want to do helps you accomplish your goals. It also helps to spark off a chain reaction of creative thoughts which can change the direction of your upcoming project for good entirely.

Conclusion

I personally use this method all the time. I maintain a checklist of things to do, and set a deadline. On long holidays like summer vacations. I code everyday while planning. Also this method will help you escape the tutorial hell. Just read a tutorial and then start coding on your own project obtaining help from the tutorial, (not following along).

It is up to you at the end of the day. If you feel the urge to code everyday. It's all up to you.

React Tutorial Part - 3 -> Getting real

Ishan Tiwari — Thu, 28 Jul 2022 14:44:41 +0000

In the last post I told you about user interactions in react and I am sure you must have tried some dummy apps (If you haven't you can just do it now). That is you must get a feel for it. You can create a UI with a menu and icon for opening and closing, you can count the no. of times a user clicked a button and all, but now that you have played with it, it is time to get real with it.

Real World Apps

Let me first explain what I mean by real world. These are apps someone (a real person) would use. It must offer some functionality to him. Some examples are: a chat app, a search engine and a social media app (although social media is waste of time).

Real world apps must look good then feel good and finally do little good. If you are on your way to create one you can not do so just with user interactivity, you need a lot of different things and react provides them the right way.

The things that react provides you are

Components - Break down your apps into easier to code components
Context - Change data across multiple components

That is just it, you've just got two things to handle: Components that is the UI and structure of your app and the data for your app. React has a lot of libraries to support these two further, you may / mayn't use the standards; you can go out of the box and use completely different libraries.

A few libraries for the UI are

MaterialUI
Tailwindcss
React-bootstrap

** A few libraries for managing your data or state are **

Redux-toolkit
Recoil
Rematch

Redux-toolkit is the top choice here and I recommend it, but you need not believe me, so go, try out the new ones.

What else do you need to know

You need to know about some other hooks in react. Some are more important than others, and have their own use cases.

You can view them in the documentation

That is all there is to it. You can build a real world app from scratch using react. The only thing you need to worry about is where to store your data in the cloud. There are several answers to that.

Places to have your data on

FaunaDB - A cloud database
Supabase - A firebase alternative with user auth and more.
Aws Amplify
Firebase

There are countless others waiting for a search. I recommend supabase but again you need not count on me, use whatever you want.

All that is remaining is to get your data from the backend (where your data is ) to the frontend (where the user is) and you can do so, while querying your data. There are a few libraries for that as well. They will cache the data, help in mutations and much more.

Libraries for building the bridge

RTK query
React query
Apollo

I like RTK query because it comes in with Redux Toolkit all but again as I have said go experiment with a few.

The most important thing here

The thing people don't understand is it seems easy on paper and pen, but if you haven't written such programs before ( or even if you have) building such a thing is a lot of code, a hell lot of code for some people. If you don't practice clean coding and write spaghetti on your pc. It will be overwhelming for you.

So, what do you want to do is keep a cool mind and just split out your code as much as possible write comments see other's code and learn from it.

The new path

It is the third blog in the series on day 3 and we are already getting real. In the next couple of blogs we will create a todo app with user authentication. The stack will include

React (of course,)
Redux-toolkit (for the data and bridge)
Supabase (for the backend)
tailwind (for the beauty)
Codesandbox (for the code editor)

You can choose whatever code-editor you want but online code editors are just a lot more hassle free and straight up on point.

Thanks for reading and please share your opinion with me

Follow me on twitter

React Tutorial For beginners - Part 2 -> Getting reactive

Ishan Tiwari — Wed, 27 Jul 2022 14:39:49 +0000

In the previous post we saw how jsx and css work with react. It is enough to create nice html static html pages, but now we shall start doing something more dynamic.

Static vs Dynamic

Static sites are sites that have some content that doesn't depend on a data layer or a database. Games can be static they can use your localstorage as a database to store their data within your browser. It is fine enough for small apps but if you're the next Jeff Bezos consider a dynamic option to let users interact from different machines to your website.

How React embraces dynamicness

React is a library built on top of javascript. So, you can do basically anything javascript can do over there. You can send requests to a server get the data throw it off the page and do much more. We will do some of the action in the later parts of this series.

The Key takeaway here is that react can be a lot more dynamic than just dull html and css, but here what we want is user interaction. The user submits a form the application processes it and shows some output to the user a very basic app you can say.

React Component Lifecycle

As I told earlier that the jsx you just saw was the actual javascript code which will be compiled by babel to produce functions out of nowhere. These functions create React components you can use them instead of jsx (if you are a jerk) or just let compilers do their thing.

What happens after that is when you visit a website the app component is mounted on the page just as we saw earlier then it does the user interacts with that in the web page. Let's say that he enters a form and we want to handle that in react what do we do then. All we have to do is process that our way and re-render the component with the new data? ( Cause if we don't re-render the page will look the same as before)

Of course there is still a lot of technicality but the above is just enough for starters.

Introducing State

In computer terminology the state is all the data a certain process (app) requires for functioning. So, if you have a app that takes in a users name say x and prints hi x. The only state for the app is the user's name.

In React state can work with the useState hook (React is actually had class based views but you can use simple functions and just "hook" in with hooks! )

Functioning demo

Open up codesandbox to code Along!

First we need to import React and useState so at the top do

import React, {useState} from 'react'

Usestate accepts a default value for your state and returns you two things

A variable with the value of the state
A function with which if you change the value of the state the component re-renders automatically.

So, you don't have to worry just use variables and edit their values using useState. forget about re-renders.

There are certain rules of hooks such as

You can't use one inside a conditional block

They must be at the top of a react component function.

The syntax for a useState is this.

  const defaultvalue = ''
  const [value, setValue] = useState(defaultvalue)

and use setValue like this.

setValue(() => {return somevalue})

Yes, takes a function that returns the value of the new state.

you can also have the previous value and do something to it.

setValue((prevValue) => {prevValue + 1})

Events

One final thing we need to know about user interactivity is events. Events are when a user does something so great that it changes the face of the app.

You may be familiar with the events in html. Like onclick() onsubmit() onmouseover() events in react are similar you can use them to set different things you can go to codesandbox and playaround.

Events in react can reference a function. So, that when they will occur they will execute the function.

You can do this like

onClick={handleClick} where handle Click is a defined function. Execute the following code to see how to toggle a div.

import "./styles.css";
import React, {useState} from 'react'

export default function App() {
  const defaultvalue = false
  const [toggle, setToggle] = useState(defaultvalue)

  const handleClick = () => {
    setToggle(prevstate => !prevstate)
  }

  return (
    <div className="App">
      { toggle &&
      <h1>Hello</h1>}
      <button onClick={handleClick}>Toggle</button>
    </div>
  );
}

Pay heed to the line <button onClick={handleClick}>Toggle</button>. It is saying that whenever the button is clicked execute the mentioned function. What the function does is says whatever the prevstate is reverse it (! is the not operator is converts true to not true and false to not false). Then when the component re-renders the jsx says that if toggle is true display hello. That is why this code works the way it does.

Exercise

I want you to create a component where the user gives his name and you greet him. (HINT - use the onChange event with an input). You can google if you get caught up. ( That is the spirit of programming. :)

When you are done you can view this gist

React beginners tutorial Part -1 Playing

Ishan Tiwari — Tue, 26 Jul 2022 14:06:00 +0000

React is one of the most popular technologies in web development. Many of the world's best firms use it. This is post is for for the beginners in the field of web development who are foreign to this library.

What is React? why react?

React is frontend library which you can use to create interactive user interfaces. It can help you create apps where users integration is necessary. It is lightweight and cost effective as well.

Getting up and ahead

To get started with react you first need a quick setup tool. A tool that will provide you with essential config for your react app. You can pick between many different such tools but the two most popular once are.

create-react-app -> The official and slow
vite -> the unofficial and fast

Even more beginner friendly are online code editors such as stackblitz, codesandbox and others.

I prefer codesandbox here, you can signup and start doodling around to get a feel of it.

When you start a new react template you will see something like this.

The file structure looks like this

The public contains things publicly accessible as you can see the function visible gets exported, then the index.js imports it and plunges it into a div. All the app in a single div!!

So, src (short for source ) is where the actual magic happens. All your stylesheets, code and actual stuff

Doodling

As you can see there is something like html over the function the function is actually returning html or more precisely jsx.

Jsx or Javascript XML (something like Javscript markup) is actual javascript code that you write but with the help of babel it is transformed into actual javascript (the one you see in static files. You can have dynamic properties and a lot of other superpowers in there. Try changing the code in the App function to this.

export default function App() {
  const hi = "hi alex"
  return (
    <div className="App">
      <h1>{hi}</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

yes you can actually just plunge values in there. Just open up curly brackets and throw the stuff in it.

Moreover you can assign jsx as values to a variable. Come on do something with it.

Styling up

You can give your elements a className (not class because it is a reserved keyword in javascript).

export default function App() {
  const hi = "hi alex"
  return (
    <div className="App">
      <h1>{hi}</h1>
      <h2 className="boring">
          Start editing to see some magic happen!
      </h2>
    </div>
  );
}

give boring a style in styles.css You can see that it is imported on top; that is just it! Import stylesheets.

Conclusion

That was all for this post, read the second part to get a feel of the dynamicness with user interaction. Till then keep playing

How to Handle Relationships with Django

Ishan Tiwari — Mon, 25 Jul 2022 14:28:00 +0000

Relationships become really tricky if you have a data managing backend with scores of data to handle with interconnections. This post tends to remove that jargon from your head.

There are a lot of ways to do handle a thing in django. One is the opinionated way and other ways are potholes to look our for. So, we will discuss the use cases for using these relationships as well. Let's go.

Foreign keys and reverse accessors.

If you must have seen a error during this type of code in Django.

   class Post(models.Model):
      sender = models.ForeignKey(User, on_delete=models.CASCADE)
      receiver = models.ForeignKey(User, on_delete=models.CASCADE)

The error should say that, "Reverse accessor for 'Post.sender' clashes with reverse accessor for 'Post.receiver'."

The thing is that django does not know how to access a users created posts(i.e the posts they are a sender of) and how to access their received posts (i.e the posts they are a receiver of).

To solve this confusion it is best to add a related_name argument. This let's you access a users received and sent posts.

   class Post(models.Model):

      sender = models.ForeignKey(User, on_delete=models.CASCADE, related_name='sentposts')
      receiver = models.ForeignKey(User, on_delete=models.CASCADE, related_name='receivedposts')

This way you can access the sent and received posts via

alan = User.objects.get(pk=1) #Got the user
posts_sent = alan.sentposts #Got the posts!!

more about that here

One to One relationships and illegal accounts

Suppose you have a nice twitter like app you want add more functionality to the user perhaps give him his own profile picture a bio and all that you want to have a profile for him. So you do this -:

class Profile(models.Model):
     user = models.ForeignKey(User, on_delete=models.CASCADE, related_name="profile")
     bio = models.CharField(max_length=400)

Everything just looks fine here, but this is a big mistake.
This mistake marks the difference between all these joins.
Here, you not only want a Profile to be associated with a user but a unique user. Here, at least theoretically a user can have another Profile which is just as much his. You can stop that in the Frontend but what's the point if you can stop that in the backend. For a user to have a profile you can do.

class Profile(models.Model):
     user = models.OneToOneField(User, on_delete=models.CASCADE, related_name="profile")
     bio = models.CharField(max_length=400)

This saves your time your brain and your app.

More about this here

Many to Many Fields and Technical Jargon

Suppose you want a book library app. A book can be written by many authors and an author can also write many books. One To One relationship won't at all work, so will Foreign Key because after all it is just a property like a post can have a single sender and a receiver that's clear what many people do is have an intermediary like this -:

class Author_list(models.Model):
     Author1 = models.ForeignKey(User, related_name="author1")
     Author2 = models.ForeignKey(User, related_name="author2"

class Book(models.Model):
     author = models.ForeignKey(Author_list)

As you can see this method can just accommodate a few authors and what do you do if a book has just one? Maybe set a few things to a null able value and then try. This method can is vulnerable to a lot of scale related issues. Instead just user the Many To Many relationship.

All that is different between this and Foreign Key is that Foreign stores one value as column in your database and this stores a whole list of them. Think of it as a list of users who have written their masterpiece.


class Book(models.Model):
     author = models.ManyToMany(User, related_name="books")

More information on that here

Conclusion

Hope you enjoyed reading the post. Many many happy wishes for your relationship with django.

Cover Image by Tú Anh from Pixabay

Why ditched Windows for Linux

Ishan Tiwari — Sun, 15 Aug 2021 08:17:51 +0000

What Is Linux

When it comes to this topic there are two kinds of people. People who react What is Linux even? and the People who say like Yeah I know Linux and I have it on my pc.

Well, Linux is not a single operating system but a whole family of them. A man named Linus Torvalds created the Linux Kernel (A program made to manage all the devices connected to a system) and made it available open source and that was the starting point of Linux. From then People started adding their own code on top of it to create various operating systems.

There are 100s no 1000s of operating systems under the linux family of operating systems a whole new you have probably not discovered.

These operating systems do again upload things open source and then more and more operating systems use their existing code to create new operating systems.

Some of the Jewels of Linux's Crowns are. ArchLinux, Fedora, Ubuntu, Debian and Linux Mint. Most of the operating systems are used to manage servers, but a few people use it as their daily operating system.

The one which I use is Linux Mint which is based on Ubuntu and Ubuntu itself based on Debian and Debian just sits on top of the Linux Kernel.

Why Linux

Ok, we just discussed that Linux exists, but its mere existence will not mean that you have to use it over Windows (In this article I am comparing Windows and Linux keeping Macos out of the arena because I never owned a mac). It should have features that make it better than the computer gaint Windows.

Speed

The problem of having a 4gb ram laptop increase when you program in it. I used my laptop to code and it just used to break up every now and then.
I was fed up of this problem and decided to do a quick google search about the fastest operating system ( I knew linux existed but I never actually tried it). The answer was Linux Mint and after the switch I got relieved from the problem of repetitive hangs. It stil hangs but not every now and then but occasionaly or if I be honest weekly

Simplicity

Do you own a Windows laptop then you know the pain of updating it now and then like every month or so. A automatic Candy Crush install when you buy your PC. All this won't happen in Linux. They tell you want is happening on your pc. Just the apps you want and no hassle to install updates foricbly.

Reviving Old Systems

If I own a windows laptop then the biggest problem for me is that if it is not that high-end then the operating system will take repetitve hiccups. Linux on the other hand can be run on a 2gb ram laptop as well. Your daddy's old PC has got no need to be upgraded use linux and save money.

Free

This is the most striking feature of Linux. It has better features than Windows but is still free. That is why Linux laptops are cheaper than Windows laptops.

Should you use a css library

Ishan Tiwari — Sun, 15 Aug 2021 07:48:40 +0000

There are plenty of css libraries available out there like bootstrap, materialize, tailwind css, Material UI and a lot of them.

But there is the big question should these libraries ever be used?

The pros of using a css library

The biggest pro of using a css library is consistency. That is if you stick with one library for example bootstrap and learn it by heart then all of the websites you build will have the same layout and will follow a nice track

Speed is another pro using a css library. If you use a css library you just have to write classes in your elements and then see them spinning to life. It saves you a lot of hardwork.

Cons

The biggest con for a css library is that you never ever have to touch css for some of those. So if you are a newbie in the world of Web Development then you'll never ever touch css and never learn it.

The second con is a thing called flexibility. If you write all the css code inside your app then you leave your mark in every app you create, but if you use something like bootstrap it is their wish of how your application should behave. Like the navbar, the header, the footer, the headings and everything if you want to gain the control and work speedily as well you will have to learn what styles its component uses. So, that you don't encounter tricky bugs as a result of the conflict of their css and your css.

Final Thoughts

Provided the last two cons you should only use a css library when.

It is a project which you want to create fast.
You are a css master and or the master of the library.

The other question well is. Is it profitable getting into learning the css library?
Yes, it is they will give your projects speed and good looks.

An introduction to React's usestate hook

Ishan Tiwari — Fri, 06 Aug 2021 02:26:57 +0000

If you use React you must be knowing that there is a concept of state and props. You can add state to a class component very easily but for adding state in a functional component you need to use the usestate hook.

What is a hook ?

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

This is a quote from the official react documentation.

Hooks basically allow you to use methods which you can use in classes to be used in functional components. Hooks have some rules as well which we will discuss later on.
For now you just take way that hooks are utility functions which allow you to write the code that you can write in class components to be used in functional components.

The useState hook

In the useState hook you just import a function and then call it

import React, {useState} from 'react'
const App = () => {
 const initialCounter = 0
 const hookhere = useState(initialCounter)
 console.log(hookhere)
 return (<></>)
}

As you can see the useState hook takes the initalCounter as a parameter.
The output of this function will be a list with the the first item as the state itself and the second item will be function to change the state. So, we can use object destructuring.
Like this

const [counter, setCounter] = useState(initialCounter)

Now you can use this counter in the project.

Manipulating the State

You currently have a setState function you can use that to manipulate the state. It takes another function as a paramter and that function will be changing the state.

This function can take in the prevstate as a paramete r however this is optional.

setCounter((prevstate)=> {return prevstate + 1})

As you can see here in this code above, the setCounter function takes in another function and that another function returns a value which becomes the new state.

Rules of hooks

Hooks have a few rules as well such as.

You cannot call a hook conditionally
Hooks must be called in the same order after every render.

Here is a codesandbox for a basic counter application using react hooks.

Font ligatures in Vscode

Ishan Tiwari — Mon, 02 Aug 2021 07:57:56 +0000

Ligatures are awesome and they produce very picturesque figures while coding, which makes them a bliss to use.
Here is a guide on how to implement them in vscode.

Step 1: Download fira code

Fira code is a font made exclusively for developers and supports ligatures.
You can download that from google fonts here.

Step 2: Update Vs Code's default font

To do this open up visual studio code and go to settings then in the place of Font Family type down Fira Code.
After this you will see fira code as your defualt font for coding.

Step 3: Enable ligatures

There is one last step you need to follow to enable ligatures.
In visual studio hit Ctrl+Shift+P (Command instead of ctrl if you are on mac). Then hit open settings.json.
This will open settings.json a file with all your configurations.
locate editor.fontligatures and write true ahead of it.

Enjoy and comment down if you like those ligatures.

Django vs Mern Which one to choose?

Ishan Tiwari — Sun, 01 Aug 2021 08:13:03 +0000

Many people take a lot of time to think about which web framework to choose for their next website. Here is a guide to help you choose the one most suitable for your next project.

Django

If you want to create a good looking website fast and with ease go with django. In my opinion django is the best web framework you can choose for blogs, newsletters and other applications.
People often call it the web framework with batteries included batteries for user authentication, models, emails, testing and a whole lot of them. I myself have built full fledged websites in django within days. If speed is all you want nothing is better than django.

Mern

Mern stands for MongoDB, Express, React and Node.
If you want to build a perfectionist website like a social media app, a nice community website like the one you are reading this post in mern has got you covered.
The best features of mern is that you can drop react and choose any framework like react native, flutter, angular or even build a desktop application with c++ and the backend won't even care.
You can create multiple things like a website with react and a android and ios app with react native, but it would take slightly more time.

Final thoughts

If you have to create a website like a blog application or a e commerce app FAST django should be your choice but if you aren't hurried and want to create a big application then mern should be your choice both slow and complicated.

Why should you use Redux

Ishan Tiwari — Sat, 31 Jul 2021 04:58:03 +0000

You may find react's state and props system useful but here are some reasons for you to use redux instead.

React seperates things

React is made on the core fundamenatals of separation of concerns.
React thinks that the Header component needs not know what is going on in the footer. It should better mind its own business.
That means if you are using react, and are currently in the header component you should not be knowing what is there in the footer. Well there are a few ways to know what is going on in the footer like event emitters and all those hectic stuff, but you should better use Redux

React is component based

React manages things on a component level. If you are using react for say a blog application provided that each blog is a single component and it fetches some data from a backend api and displays it to the user. After the user has read the blog you want to show him some content related to the blog. You will again call some api and fetch the content in this blog. Let's say he clicks on some other blogs and the same thing happpens you would notice that the api is being called again and again, because the component is getting re rendered with updated values.
You can deal with this code reuse if you had a large heap of data where everything is stored and take it out everytime the blog re-renders. That would do the same thing but consume less data.