DEV Community: Kaushal Joshi

Reflections on MumbaiFOSS: My Experience and Takeaways

Kaushal Joshi — Mon, 13 Mar 2023 05:11:24 +0000

Originally published on personal blog.

As an open-source enthusiast, I am always interested in the functioning of the open-source ecosystem and the public distribution of software. I recently attended MumbaiFOSS, a conference organized by FOSS United and FOSSEE to promote Free and Open Source Software in Mumbai

The FOSSMumbai conference happened yesterday on the 11th of March, 2023, at IIT Bombay. In this blog, I share my experiences and takeaways from the conference, including informative talks on building reliable APIs, digital personal data protection, public policies and the importance of open-source beyond just yearly programs and swag.

About MumbaiFOSS

MumbaiFOSS is a collective effort of FOSS United and FOSSEE to revive the spirit of Free and Open source software in Mumbai.

FOSS United is a non-profit foundation that promotes Free and Open Source Software ecosystem in India. It offers funding and grants to FOSS projects, organizes events to empower open-source developers, and hosts a not-for-profit learning platform Mon School.

The Free/Libre and Open Source Software for Education, or simply FOSSEE, is a project pioneered in IIT Bombay that promotes using Free and Libre Open Source Software (FLOSS) in academics and research. It conducts a plethora of activities to improve education and research quality.

Foss United partnered with FOSSEE to bring together developers, policymakers, and open-source enthusiasts for a conference. MumbaiFOSS was about FOSS (of course!), its issues and trends, and FOSS policies. This was a complete package of happiness for someone who has just scratched the surface of the open-source monolith.

Prologue

My two college mates accompanied me, coincidentally having the same name - Pratik. The journey from the main gate to the VMCC auditorium felt like a lifetime, but we arrived on time. We were welcomed with a yummy breakfast until the conference started.

I expected at least 100 people to be present, but to my surprise, the numbers were relatively low, though satisfactory. Traveling in Mumbai on early morning weekends has the power to change people's desires.

The conference, in brief

Vishal Arya, the swiss army knife of FOSS United, and Riya Mathew, community manager of FOSS United, made the opening note. They told us the story behind FOSS United, the purpose of MumbaiFOSS, and their journey from the beginning.

Before the opening note, Prof. Kannan Moudgalaya of IIT Bombay gave an overview of FOSSEE, Spoken tutorials, and projects FOSSEE promotes. Apart from this, we had nine talks, one panel discussion, and one open discussion throughout the day. From informative talks on building reliable APIs and digital personal data protection to a fireside chat on tech policy, this conference offered a complete package of happiness for anyone interested in the open-source monolith. Read on to discover more about MumbaiFOSS and the importance of open-source beyond just yearly programs and swag.

Building Reliable APIs with Apache APISIX by Navendu Pottekkat
Prav: a community-owned chat app by Ravi Dwivedi and Arun Mathai
eSim developed by FOSSEE by Sumanto Kar and Nagesh Karmali
Demystifying WebRTC by Amogh Lele
Data Fabric by Ashish Sahni
Let's discuss the Digital Personal Data Protection Bill 2022 by Poruri Sai Rahul
Transforming Web Apps with Machine Learning by Bhavesh Bhatt
FOSS United's Public Policy Initiatives by Venkatesh Hariharan
Self Hosting 101 - Reasons to self-host and nifty tools by Kaustubh Maske Patil
Open Source: Supporting, Contributing, and Evangelising - a panel discussion between 11. Vaishnavi, Manish, Saurav, Ashish, Dhiraj, Rohit and Anas Khan
Fireside chat: Why engineers should care about tech policy? by Kailash Nadh and Venkatesh Hariharan

Venky's talk on FOSS United's Public Policy Initiatives was my favorite. Hearing him talk about his experience, with interesting stories and analogies, was indeed insightful.

Fireside chat

This was the main event of the conference. It was a half an hour discussion between Kailash Nadh, Rushabh Mehta, and Venkatesh Hariharan.

The discussion was mainly focused on new tech policies and our stand on them. How tech policies are changing, why we should care about it, how politicians and political agendas shape these policies, and how we can take steps towards making an impact were a few things that were discussed. It's important to have more technologists involved in public policies than lawyers.

And, I met Kailash Nadh!

Kailash Nadh has been CTO of Zerodha since 2013. I was fascinated when I read that Zerodha's engineering team only comprises 33 people, and nobody has left the team in all these years for better opportunities. Damn, I was excited to meet this man!

As everybody started leaving the auditorium after the conference, I saw him talking to Rushabh and a few team members. I went there and asked him for a photo together, and he gently agreed.

I couldn't stop but express my admiration towards his work at Zerodha and how much I admire his startup. He thanked me, and I went on cloud nine.

Afterthoughts

Open source is a lot more than I used to think. It is beyond a few yearly open-source programs, goodies/swags, and adding certificates on LinkedIn. It is beyond contributing to projects backed by large corporations and projects that enhance developer/web experience.

It is also about being free from proprietary software, empowering and encouraging the government and societies to use FOSS, reaching more students, educating them, and many more.

MumbaiFOSS was the first conference I attended. And it was absolutely fantastic! Everything was planned and managed so well that I couldn't find any issues to rant on. And the food was tasty, too! Kudos to the operations and management team for pulling it off so well.

Epilogue

I plan to attend more such conferences. I searched for some while going back home, and I might go there if everything aligns well. Of course, I will update you all! I am most active on Twitter, where I post such updates. You can also subscribe to my E-mail newsletter to have my next blog in your inbox!

Until then, keep contributing! 🌿

Is Create React App Really Dead? What Are Other Options?

Kaushal Joshi — Sun, 05 Feb 2023 14:04:25 +0000

If you are active on tech Twitter, follow web-dev YouTubers, or read blogs, you know what I am talking about. For the past few months, there has been a lot of discussions about how create-react-app, the official tool to configure a react project, is out of date and needs to be replaced.

In today's blog, let us understand why everyone is against CRA, whether it is really that bad, and what other options we have on our plate.

This blog requires no prerequisites except some familiarity with the React.js ecosystem.

How It Started

I am seeing similar content on my feed for the last few months. People started writing blogs and making videos saying CRA is dead and we should use Vite instead.

Everything seemed fine until last week Theo tweeted about filing a PR to remove CRA as a recommendation.

And well, he did it! Soon after the tweet blew up and many developers agreed to him, he raised a PR.

This raised a question: Is CRA really as bad as developers are claiming? And if yes, what can we do about it?

The Real Problems

create-react-app is the official tool for configuring React applications when you start a new project. It is maintained by the core React team responsible for the main React library.

The problem occurs when your app scales in size and has a lot of stuff to be taken care of. Not having a scalable structure makes your app slow and increases its rendering time.

It is Unmaintained

The create-react-app GitHub repository does not have active maintainers. Although few maintainers take care of minor updates and patches, nobody has been actively maintaining it since 2021.

Hence around 1.5k issues are pending, and over 400 pulls are yet to be merged. This makes it hard to use it for larger projects that will scale enormously in the future.

Overdependency on Webpack

CRA uses Webpack under the hood to set everything up. Webpack's main task is to pack everything into a single JavaScript bundle and ship it to the browser to execute.

However, using Webpack itself is a very tedious and frustrating task. We need to consider many decisions before configuring it. And thankfully, CRA did everything for us! It took care of all the Webpack configuration and removed all complexities, and gave us a ready-to-build react application in our hands!

Despite Webpack being useful, we can't ignore that it is tedious, slow, and old. While alternatives are using newer tools that are fast, minimal, and simple, CRA is still stuck on Webpack for providing backward compatibility. And CRA is still heavily dependent on Webpack.

Lacks Many Features

CRA again falls back when supporting additional features out of the box. We don't use plain React anymore. We add different flavors to spice up things and make it more convenient, scalable, and robust. CRA does not support many such tools out of the box. We need to rely on third-party services or add it manually ourselves.

Developers today widely use TypeScript to typeface JavaScript applications. And as you might have guessed, CRA does not natively support TypeScript. You need to use a template while setting up the project.

Another library developers prefer Tailwind CSS. It is a utility-based CSS framework that provides a design system for websites. CRA requires CRACO, a wrapper around CRA, to install Tailwind CSS. Though it is simple to set up, there are many problems with it. Since CRA doesn't allow imports outside /src, loading tailwind.config.js to access the theme config with TypeScript becomes difficult.

Better Alternatives

Using CRA is simple (and still is). This is best for beginners who might get overwhelmed by all the configuration and settings of starting a react project manually. You are only three commands away from having a React application ready.

But as React got popular, newer alternatives were introduced. These have new approaches to setting up React. They use more recent tools to do it and, overall, faster than CRA.

What Else Can We Use?

There are three five main alternatives to vanilla React or CRA. You first need to decide the scope of your project and the utilities it needs and then choose a tool or framework.

If you want a CRA-like build tool that works exactly like CRA but resolves all of its problems, Vite is the way!

Vite

Vite is a recent build tool that is dominating the web-dev circle. It's on the third rank by usage and first by retention and interest in the state of JS 2022 survey.

Vite is blazingly fast. It uses SWC, which uses rust to build steps, so you get milliseconds response time while making changes to the app.

Vite supports a plethora of plugins to extend your build. It also supports TypeScript, PostCSS, and CSS modules out of the box, making it a production-ready build tool for React.

It also supports Svelte, Vue, Preact, Lit, and Vanilla JavaScript. In terms of react, it is an excellent replacement for CRA if you want a very similar experience to CRA. If your application doesn't require server side rendering and is a small or single page application, Vite is a must try!

Server Side Generation

Server Side Generation, or SSG, is a website rendering approach that pre-renders the content and serves static HTML pages to the client.

The big players in SSG are Gatsby and Astro. They both are best for scenarios where you need to create a static side that doesn't rely on dynamic content. So if you are building a blog, landing pages, or portfolio marketing, SSG is the way to go.

Unlike Vite, Astro and Gatsby add their flavor on top of React, so the code you write slightly changes compared to CRA/Plain React.

Server Side Rendering

Server Side Rendering, or SSR, generates static content on the server and sends it to the client for every request. It drastically improves the overall loading time, which helps increase Core Web Vitals scores and get better website SEO results.

Again we have two frameworks to talk about*—* Next.js and Remix. Both have a similar approach to how a project is set up, but there are obviously a few differences. Starting with similarities, both frameworks support file-based routing and are used for dynamic content generation. Talking about differences, Next uses React server components while Remix does not. Nested routes work in beta for Next.js, whereas Remix has a stable release. Remix uses ESBuild as a build tool, while NExt uses rust-based SWC.

Suppose your requirements include a multi-page application heavily dependent on dynamic data and complex routes. In that case, SSR is the way to go. Like SSG frameworks, both Next and Remix are built on top of React, so you need to spend some extra time learning them.

My Views

We should not force anyone to use a particular tool or framework. React by itself is still a great choice for a framework, and it is changing with changing needs over time as well.

If you are a beginner and creating simple projects to validate your learnings, there is no harm in using CRA. Vite is useful for a CRA-like experience with better support and speed. Use it when you are creating small or medium scaled single page applications.

Astro and Gatsby should be considered when your content won't change often. This makes it useful in use cases like blogs, portfolios, landing pages, etc.

Moving towards Next.js or Remix would be best once you become comfortable with React (with or without CRA). These frameworks give much flexibility and scalability to create robust front-end applications.

Wrapping Up!

It feels good to have multiple options available to us. We can use the best tool, library, or framework that satisfies our project's scope. Also, having healthy competition is always good for the market.

These were my views, and yours might vary; that's absolutely fine! I would love to hear yours. I am most active on Twitter and Showwcase if you want to say hi!

I write about web, open-source, technical writing, and my general experiences with development. I also write about Web3 at The Dapp List. You can follow me on Twitter or subscribe to my newsletter below to have the latest update on everything I am up to.

Until then, Happy tooling!

References

Don't Use Create React App in 2023
Stop Using Create React App
I was almost finished with the blog when Fireship posted a video. 7 better ways to create a React app

Hacktoberfest 101 with ReactPlay

Kaushal Joshi — Tue, 04 Oct 2022 03:53:14 +0000

Modern software infrastructure is heavily dependent on the open-source community. From your personal projects to a complex app by a tech giant, every piece of code written today is dependent on open source in one way or another.

These open-source projects are developed and maintained by indie developers in their free time. They (usually) don't get paid to do this. Their passion and dedication to software development encourage them to do it selflessly.

To celebrate such developers and the open source community, DigitalOcean and its partner organize an event every month of October: Hacktoberfest!

What is Hacktoberfest

Hacktoberfest is a virtual event organized by DigitalOcean and its partners: Appwrite and Docker, throughout October. It is aimed toward open source and introducing it to as many developers as possible.

Every year, many events are organized under the Hacktoberfest event. Talks, Workshops, Meetups, and Hackathons, to name a few. Developers from around the globe can join these events without restriction to their educational/personal background.

The most significant part of Hacktoberfest is open source contribution. Open source project maintainers add the hacktoberfest label to their project's GitHub Repo. Developers can search for repositories and help resolve issues with hacktoberfest labels. If their PR gets merged, it is labelled hacktoberfest-accepted and closed. When developers close four PRs successfully, they become eligible for the reward!

Excited huh? First, let's understand why you should contribute to open source first.

Why Participate in Hacktoberfest?

As discussed in the introduction, open source projects are the backbone of today's software infrastructure. Yet the developers behind this are not celebrated that much.

Hence we participate in the fest to give back to the community. We might not help them with a huge paycheck or a great job, but the least we can do is openly appreciate their work and thank them.

Get into Open Source

Hacktoberfest is the best way to start contributing to open-source projects. There are many issues with all major programming languages frameworks and libraries. Even if you are a beginner who just started coding, you will find an issue to work on.

I started my open-source journey with 2020's Hacktoberfest itself. I was a newbie who did not understand anything. Eventually, I picked up and now advocate for it to others. You can do this too!

Get Exposure to Real World

Your personal or college group project is different from those used widely. The approach, technical and business decisions, complexity, everything is widely different from what you build by yourself.

While contributing to open source, you will work on real projects which others will use. While doing so, you will follow the best practices for developing software. This will not only help you to understand software development better but also prepare you for your employment.

Learn Collaboration

Continuing the previous point, you will work with other developers to resolve the issue. A maintainer, reviewer, and other folks like you will ensure that you are doing well with the issue.

This is most likely what you will be doing in your company—working in teams, resolving issues, and deploying to prod with their help. Personal/hobby projects are restricted when it comes to collaboration. Open source helps you to understand how things work for big projects.

New Changes Introduced This Year

Until last year, hacktoberfest contributions were only valid for coding or maintaining a project. But open source is not just for technical folks who write code.
Since this year, Hacktoberfest has also been allowing low-code and no-code contributions. You are no longer limited to your skills and interests in contributing to open source.

You can give back to the community in the following ways: writing, design, and advocacy. Here's the table that explains some of the ways of no-code/low-code contributions.

Contribution Type	Low-code	No-code
Writing	Technical Documentation	Translating, Copy editing
Design	Testing	UX Testing, Graphics design, video production
Advocacy	Talks, presentations, blogs, podcasts, case studies	social media blog posts

Please make sure you create pull/merge requests of your low/no code contributions to track it. Project maintainers may need to facilitate tracking those contributions through an activity log.

How to Contribute

This sounds interesting. Let us understand how you can contribute to hacktoberfest!

Code Contributions

Contributing with code means resolving an issue or introducing a new feature in an existing open-source project.

You need to search for projects that are open for hacktoberfest submissions. Usually, many open source maintainers accept hacktoberfest contributions, but some might not.

Finding a good repository to contribute to is a separate blog in itself. Make sure you follow ReactPLay on Hashnode and Twitter to read it when we publish it. Until then, here is a quick rundown of what you can do:

Go to https://github.com/search and search for hacktoberfest.
Filter your language of choice.
Sort by recently updated to have live repos
Optionally, you can filter by topics or issues to dive deep.
Look for the hacktoberfest label in the Issues tab and proceed further.

If you are exploring different projects, here's what you can do:

Look for the hacktoberfest tag in the about section.

Go to the Issues tab and search for the hacktoberfest tags.

Either way, you can create a new issue with the hacktoberfest tag and communicate with the maintainer about the further procedure.

No/Low Code Contributions

This is the first year of low/no code contributions, so many misconceptions exist. Based on the website's about section, we can conclude the following:

Your low/no code path contribution must be related to an open-source project. Your contributions to general open source or hacktoberfest events won't be considered valid.

If you write a blog, give a talk or host an event advocating for the project, then only your submission will be valid for the fest.

The open-source project you contribute to must have a repo/log to track all the activities. You need to make a pull request explaining the contribution you made. This will vary from project to project, so ensure you are well aware.

Hacktoberfest with ReactPlay

We are incredibly thrilled to take part in this year's Hacktoberfest! This is our first year of Hacktoberfest, and we have exciting plans.

Code Contributions to ReactPlay

Our code contribution has been live since we introduced the project to the public.

You can add a new play, improve the site, or help resolve general issues from the Issues section.

There are plenty of ways to make code contributions to the project. Make sure you are connected to us on Discord for the latest changes and issues about the project.

Low/No Code Contributions to ReactPlay

This involves writing a blog for ReactPlay Blog, talking about ReactPlay, and hosting a workshop that involves ReactPlay.

You can also contribute to improving docs, UX, possible translations, YouTube Videos, testing, and much more.

We will soon make our hacktoberfest activity log available to the public, where you can submit your low/no code contribution to the project.

Our First Hackathon

A few days back, we also announced our first-ever Hackathon, Hack-R-Play.

This is a fifteen days long hackathon sponsored by NHost. You need to build a project using any of the tools from React ecosystem and NHost services and write a blog about it.

We will choose three winners among all the submissions. The winners could win up to $200USD and a Swag kit from NHost.

External Resources

Here are a few blogs, videos, and threads that will help you to get better:

Are you contributing to Hacktoberfest? A few tips for you - A blog by Tapas Adhikary
Git Commands You Need To Know Before Contributing to Open Source - A blog by Kaushal Joshi
Hacktoberfest: Do's and Dont's - A blog by Kaushal Joshi
I for Open Source - A live show discussing the basics of open source.
What is Hacktoberfest - A thread with TL;DR of the Hacktoberfest event

Wrapping Up!

This must have been overwhelming for you! Please take a moment of peace and go through it once again.

Make sure you follow us on Twitter and are part of our Discord community. Feel free to ask your questions in the discord.

Until then, happy contributing!

Three Ways to Remove Console Statements From Production Build

Kaushal Joshi — Sat, 20 Aug 2022 05:48:16 +0000

Whether you are a beginner JavaScript Developer or an experienced developer working in the biggest organization in the world, you can't deny using console statements to debug your code. Even though nothing is wrong with doing it, you might expose some sensitive data to end users if you forget to remove those before committing the code.

In this quick article, let us discuss different ways by which you can prevent log statements from going into the production code.

Overriding `console` Methods

This simplest practice removes console statements from the production build, leaving you with a great debugging tool during development.

In this method, we check the node environment of the app and override console functions with empty functions if the environment is not development. By doing this, you can still use console statements if the app is in development mode.

Paste the following code into the entry file of your application. In most cases, it would be named index.js or app.js.

if (process.env.NODE_ENV !== "development") {
   console.log = () => {};
   console.debug = () => {};
   console.info = () => {};
   console.warn= () => {};
 }

If you are using React or Next, you can paste this in src/index.js or pages/_app.js, respectively.

ES-Lint

If you are using ESLint configuration, you can add no-console rule to ensure that console statements are not committed to the version control. You can even exclude some statements (like .warn() or .error()) if you wish.

However, you can follow this method only if you have integrated ESLint with your app. If you are using React or Next, follow this article to integrate ESLint, Prettier and Husky in your app.

If you have ESLint, add the following rule in the .eslintrc.json file.

{
    "rules": {
        "no-console": "error",
    }
}

This rule will throw an error if a console statement is encountered. You can change the behavior by replacing error with warning. Similarly, you can exclude specific methods by adding an allow option, like this:

{
    "rules": {
        "no-console": ["error", { allow: ["warn", "error"] }],
    }
}

This will allow console.warn() and console.error() but throw an error in other cases. You can read more about this rule on their docs.

Using a Babel Plugin

A plugin called babel-plugin-transform-remove-console removes all console statements from your application. All you need to do is install it and add it to the .babelrc file.

Install this plugin by NPM or Yarn like this:

# NPM
npm i babel-plugin-transform-remove-console

# Yarn
yarn add babel-plugin-transform-remove-console

Then open .babelrc and paste the following. If the file doesn't exist, create a new file with the same name in the root directory.

{
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

You can find more information about this library at the NPM repository.

Wrapping Up!

The console statements are often not taken seriously. Removing them from production is always a best practice while building apps. But it could cause performance or security issues if you mishandle them.

If you found this article helpful, share this within your socials so everyone can follow best practices.

I write blogs about web development, open source, and personal experiences. Make sure to follow me on Hashnode for the latest article on your feed. If you want to say hi or need help with frontend or technical writing, catch me on Twitter, Showwcase, and Peerlist.

Until then, happy logging! 👨‍💻

How to Add Script Tags in React

Kaushal Joshi — Tue, 28 Jun 2022 07:52:17 +0000

Using third party libraries is very common while developing apps for the web. The usual way is to install the NPM package of the library and import it for your use.

But sometimes, the NPM package is unavailable or you have to include files directly from a CDN or external source. Adding <script> tags in the index.html file does not work every time and even if it does, it could cause issues as the website scales.

I faced a similar issue while adding Calendly import to my portfolio site and found an easy solution. But first, let's understand why exactly an error occurs when you add <script> tags in React components.

Why it Throws an Error

React uses React DOM to render JSX content on the web page. React DOM is a virtual DOM that resides on top of the original DOM. It only updates changed nodes from the DOM unlike the original DOM, which completely updates itself after every change.React DOM uses createElement to convert JSX into DOM elements.

The createElement function uses the innerHTML API to add changed nodes in the browser's original DOM. HTML5 specifications state that <script> tags are not executed if they are inserted with innerHTML. MDN Web Docs has explained the security reasons behind this.

As a result, The execution of the <script> tag throws an error in React.

The Solution

The simplest solution is to add scripts directly into DOM using the Document interface provided by web APIs. We can use JavaScript's DOM manipulation methods to inject the <script> tag without React DOM interfering.

Here is what we have to do:

At first, we get head and script tags from DOM.
Then, we use the setAttribute method to add a new script.
The modified script tag is appended to the head.

In React terms, the desired script has to be added to DOM when the component loads on the browser. React has a hook for such scenarios: useEffect. The whole process explained above can be wrapped inside the hook and triggered when the component renders for the first time or a new script is added.

In real world projects, we might want to add multiple scripts. Hence it's better to create a custom hook so we can call it multiple times with different source links.

Custom hooks are usually stored in a separate directory within the /src folder. Let's create a new file inside the /src/hooks/ directory and name it useExternalScripts.js. Paste the following code in the file:

import { useEffect } from 'react';

export default function useExternalScripts({ url }){
  useEffect(() => {
    const head = document.querySelector("head");
    const script = document.createElement("script");

    script.setAttribute("src", url);
    head.appendChild(script);

    return () => {
      head.removeChild(script);
    };
  }, [url]);
};

In a component where you want to add a new script, paste the following code:

import useExternalScripts from "./hooks/useExternalScripts"

const Component = () => {
  useExternalScripts("https://www.scriptdomain.com/script")
  ...
}

A new script is appended to the head of the page whenever the component is mounted in the DOM. The script is removed when the component unmounts.

Don't use the return snippet if your script is used in multiple components throughout your app.The function returned by the hook is a cleanup function, which is executed when a component is unmounted. Hence we don't require it if we have to use the source at multiple places.

Alternate Solution

Alternatively, you can use react-helmet which manages changes within the <head> tag. The <Helmet> can take care of the script if it is placed inside of it.

import { Helmet } from "react-helmet"

export default function Component() {
  return (
    <>
      <Helmet>
        <script
          src="https://www.myscripts.com/scripts"
          crossorigin="anonymous"
          async
        ></script>
      </Helmet>
      ...
    </>
  )
}

Don't forget to install react-helmet before you start your app!

Wrapping Up

React uses innerHTML at the core to manipulate nodes on the browser's DOM. The innerHTML API doesn't support <script> tags for security reasons. Hence an error is thrown if you try to inject a <script> tag in a React component.

Adding a new script tag and directly appending it to the <head> element of the page is the easiest way to add <script> tags in the React app. react-helmet is a third party library that can be used to achieve the same thing by handling the <head> tag on every page.

I feel the custom hook version is better than using a third party library since we have full control over it. What do you think? Did you use any other method? Let me know down below!

If you found this blog helpful, consider sharing it on your social. You can read more blogs about web dev, open source and stuff I fix while developing apps on my blog. Or if you want to say hi, I am most active on Twitter.

Until then, happy debugging! ⛑

How to Keep SSH Connection Alive for Longer Durations

Kaushal Joshi — Thu, 02 Jun 2022 16:14:41 +0000

Alternate Title: [SOLVED] Code doesn't get pushed since Husky pre-push takes so much time!

A few weeks back, I was working on a project that had Husky pre-push hook configured. After working on it for a few days, I noticed that sometimes code is not getting pushed to the remote repository.

After a headache of trial and error, I realized that pre-push hook is taking so much time to finish. And when it did, there was no message of code being pushed to the remote repo in the terminal. Something was odd.

I learned that the SSH connection between the terminal and GitHub initiates when we execute git push and terminates when the code is pushed successfully. However, if the connection is inactive for a certain period of time, it terminates itself due to timeout.

Since Husky pre-push was taking so long time to finish its job, the SSH connection with the GitHub server was timing out. The dead connection was resulting in the code not getting pushed at all.

I needed a way to keep the connection alive for a few more minutes. Luckily, we can do this in the terminal itself.

Prerequisites

Your terminal must be connected to your GitHub account via SSH. You can find more information here.

Solution

As I said, the solution is to keep the connective alive until husky finishes its task. It's easier than I thought.

In your terminal, go to the directory that stores SSH information. Usually, it's /.ssh folder in the home directory. Execute this command in the terminal:

cd ~/.ssh

The tilde symbol(~) represents /home directory. Since our desired destination folder is in the home directory itself, this command will change the current working directory to /home/.ssh.

Create a file named config without any extension. Add the following text to the file:

Host *
  ServerAliveInterval 60
  ServerAliveCountMax 30

Connect to the host once again and you'd see the success. If not, increase the duration by a few minutes until you find your sweet spots. The way to understand this setting is explained in the next section.

Explanation

But what does ServerAliveInterval and ServerAliveCountMax actually do?

According to SSH manual:

ServerAliveInterval:
Sets a timeout interval in seconds after which if no data has been received from the server, ssh will send a message through the encrypted channel to request a response from the server. The default is 0, indicating that these messages will not be sent to the server. This option applies to protocol version 2 only.

ServerAliveCountMax:
The default value is 3. If, for example, ServerAliveInterval is set to 15 and ServerAliveCountMax is left at the default, if the server becomes unresponsive, SSH will disconnect after approximately 45 seconds. This option applies to protocol version 2 only.

So to summarize:

The client will wait idle for 60 seconds i.e. ServerAliveInterval time.
Then, it will send a no-op null packet to the server and expect a response.
If no response comes, then it will keep trying the above process till 30 times, defined with ServerAliveCountMax. So it will wait for 1800 seconds, which is half an hour.
If the server still doesn't respond, then the client disconnects the SSH connection.

Things to Know

Who waits for the response

In our case, the client is waiting for the server's response. Because the GitHub server sends a response back when the code is pushed. If you want the client to send a response, you should use ClientAliveInterval and ClientAliveCountMax.

Different config settings for different hosts

The asterisk symbol (*) sets this configuration for every connected host. If you want to set this for a particular host, or only one host, you can do it with following way:

Host hostname1
    SSH_OPTION value
    SSH_OPTION value

Host hostname2
    SSH_OPTION value

Host *
    SSH_OPTION value

The list of available connected hosts could be found in the known_hosts file which is located in the same directory.

Wrapping Up

Server alive messages are useful when an SSH server has been configured to close connections after a period of time with no traffic. Setting these two options keeps the session alive by sending a packet every ServerAliveInterval *seconds for a maximum of *ServerAliveCountMax times.

As a developer, we come across new problems every single day. Some of those challenges our skills, others challenge our patience. For me, this problem falls into the latter category. Hence I decided to write an article about it.

I hope you found this article helpful. If you want to say hi, my DMs are always open. I am most active on Twitter, LinkedIn and Showwcase.

Happy coding! 👨‍💻

How to Fetch Large Data Files Through GitHub API

Kaushal Joshi — Fri, 06 May 2022 16:05:24 +0000

During my internship at Hackernoon, I had a task to fetch some files from GitHub API. Initially, I thought it'd be a simple GET request but soon I realized the work is a headache. The file I needed was quite large and hence the response was telling me to use something different than I already knew. I ended up spending two days on this issue.

Now it's time to write an article so that my future self and others don't have to spend so much time on a simple issue.

In this article, I'll show you how to get files larger than 1MB from the GitHub API. You will learn about the following topics until the end:

Fetching larger files from GitHub API
Working with commit's SHA
Manipulating blobs and base64 encoded data

For the purpose of this article, I am using data from HackerNoon's Startup of the Year contest. The data is publicly available on GitHub if you want to follow along.

Get Files Smaller than 1MB

Fetching smaller files is simple and you just need to pass three parameters to the API. First is the owner's name, which could be your username. The second is repo, which is the name of the repository where your file is committed. And path is the path to the file from the root.

I have created a simple codepen if you want to use working code snippets.

For better understanding, I have created four variables to store data at each state.

let fileSHA, fileBlob, fileContent, file

fileSHA stores the SHA of the file we want to fetch.
fileBlob stores the blob fetched from the API.
fileContent is used to store the decoded string.
file has the data that we actually need.

You can find the reference code in the next section, just change the folder path with the actual file path (with file extension) and you're good to go!

The Problem with Large Files

However, if you fetch a file larger than 1MB, the API would throw an error. This is due to the fact that the above endpoint does not support large files. To retrieve the data, we must instead use the Git Database API.

The Git Data API allows you to read and write raw Git objects to and from your Git repository and list, as well as update Git references. This API primarily works with blobs, which is the focus of this article.

Git converts a large file into a base64 encoded blob rather than storing the entire file for better performance. As a result, when you request the same file, it expects you to use the Database endpoint, which returns the blob.

To retrieve a blob, you need to pass file's SHA. You might ask, what is SHA and how to get it?

Every time you commit a new file, git creates a unique ID called hash or SHA to keep a record of changes. This could cause an issue sometimes but we would discuss this at the end of this article.

Get SHA of the file

For now, we need to figure out a way to get SHA of the desired file. GitHub API has an endpoint to interact with the file content that we can use.

GET /repos/{owner}/{repo}/contents/{path}

In response, we get an array of objects having metadata about every file in the directory. The Metadata contains SHA that we can store and use later.

const getFileSHA = async () => {
  try {
    const response = await fetch(
      "<https://api.github.com/repos/hackernoon/where-startups-trend/contents/2021/>"
    );
    const data = await response.json();
    console.log(data);

    fileSHA = data[3].sha
    console.log(fileSHA);

  } catch (error) {
    console.log(error);
  }

  getFileBlob(fileSHA)
}

data[3].sha has the SHA of votes_by_region.json, so we store it in fileSHA for future uses. The console output would look something like this:

Fetch Blob of the file

We have the file SHA which is required to get the blob. We need to use a different endpoint to work with blobs. This endpoint is similar to the last one but we have to pass file SHA as the third parameter.

GET /repos/{owner}/{repo}/git/blobs/{file_sha}

The following function fetches the blob of our file when we provide its SHA as a parameter.

const getFileBlob = async (fileSHA)=> {
  try {
  const response = await fetch(
    `https://api.github.com/repos/hackernoon/where-startups-trend/git/blobs/${fileSHA}`
  );
  const data = await response.json();

  fileBlob = data.content
  convertBlob(fileBlob)
  } catch (error) {
    console.log(error);
  }
}

This request returns a base64 encoded blob. Base64 is an encoding scheme that represents binary data in an ASCII string format. It is useful when we need to store or transfer data without any modification. The console output will look gibberish but it's just how base64 encoded data is.

Convert Blob into Useful Data

In the final step, we have to convert the base64 encoded blob into something that we can use in our program. This step is quite frustrating because the standard ways don't seem to work in some cases.

After spending hours on this single problem, I have found three solutions. I don't guarantee that every solution will work out for you, but I am pretty sure one of them surely will.

Easiest Way

This is the standard way natively supported by JavaScript. atob() is a Web API interface that decodes base64 encoded data into a plain string.

atob is supposed to be read as ASCII to Binary since it converts ASCII encoded base64 data into binary form. The output will be a decoded string. To convert it into its original data type, we use JSON.parse().

fileContents = atob(blob)
file = JSON.parse(fileContents)

Second Way

If the above method throws an error, Node.js provides a method Buffer.from() that you can use. It takes the string to be decoded as the first parameter and the encoding technique as the second.

try {
  const fileContents = Buffer.from(fileBlob, "base64").toString()
  file = JSON.parse(blobToString)

  console.log(file)
} catch(error) {
  console.log(error)
}

Third Way

Final Way:
There's a good chance the previous method won't work if you're working on the frontend. In such case, create a function that uses decodeURIComponent.

// define the function
const decodeBase64 = str => {
  utf8Bytes = decodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
    return String.fromCharCode('0x' + p1);
  });

  return atob(utf8Bytes);
}

You can call this function by passing the fileBlob as the parameter, and get your decoded string!

fileContents = decodeBase64(fileBlob)
file = JSON.parse(fileContents)

console.log(file)

Nothing Worked?

Well, there are two final options that you can try. Either you can use FileReader API or use decodeURIComponent in a different way.

FileReader API: You can find MDN docs here.
decodeURIComponent: Refer to this blog by Rajeev Singh that handles 16bit encoded strings.
Alternatively, you can try an NPM package called js-base64 as well. I have not used it myself so don't have opinions regarding it.

Restrictions

As mentioned earlier, SHA is the unique ID that changes every time you modify the file. Also, since we have a hardcoded object index in the getFileSHA() function, API might respond with SHA of a different file if you add or delete files in the directory.

To tackle this, you can use the exact file name instead of the index so you can keep the function unmodified after committing new changes.

Summary and TL;DR

Git stores larger files in blob format and hence we use GitHub Database API to fetch files larger than 1MB.
We need to provide a username, repo name and the file's SHA to get the blob.
To get SHA, we provide a folder path to the endpoint and store it in a variable.
Later we pass SHA as a parameter to another endpoint and get a base64 encoded blob.
The blob must be decoded into a plain string and then converted into its original format using JSON.parse() before you can use it.

More references

Do let me know which decoding method worked for you. I am most active on Twitter, LinkedIn and Showwcase!

Happy fetching!

Maximize your Tailwind efficiency by using these resources

Kaushal Joshi — Sun, 09 Jan 2022 05:39:27 +0000

I have been using Tailwind for the past few months and I don't think now I would switch to other styling frameworks. It is just a lifesaver! It is mobile first, has an easy learning curve and saves a lot of time. And it doesn't make me feel dumb like CSS does 😟

Tailwind is already pretty good, but we can make it even better. Here are a few resources that helped me to build projects with Tailwind efficiently and fast.

Before starting, I expect you to be already familiar with Tailwind and know about its workings. I have discussed CSS prerequisites and use cases for Tailwind in my last blog, which you can read here.

Online Playground

Tailwind Play is an online playground for Tailwind CSS. The best thing about it is that it shows the output in no seconds! You can also change the CSS3 styling or tailwind.config file if needed.

It also has autocomplete and syntax highlighting for tailwind classes.

🌐 Tailwind Play

VS Code Extensions

Tailwind CSS IntelliSense

This is a MUST have extension. It has autocomplete, syntax highlighting and lining abilities. It also lets us see CSS for a particular tailwind class when hovered.

🔥 Get it on Visual Studio Marketplace.

Headwind

Headwind is an opinionated CSS class sorter that enforces consistent order of classes. It parses the entire file on each save and sorts classes on the basis of importance and removes duplicates.
It also highlights conflicting classes and lets us choose what to omit.

🔥 Get it on Visual Studio Marketplace.

Tailwind Docs

This extension will open the documentation directly from VS Code. Open command palette by ctrl/cmnd + shift + p and type the topic you want to search.

🔥 Get it on Visual Studio Marketplace.

Tailwind Styled Snippets

This is useful only if you're using styled-components with your react project. This extension rocks in creating components with tailwind and styled components or emotionjs.

🔥 Get it on Visual Studio Marketplace.

Components Library

Flowbite

Flowbite is a freemium component library consisting of 400+ components and elements. The free version is enough to fulfil basic use cases but there is also a premium version. Two premium plans are 'developers' and 'designers' that give you more features to use. Premium version has features like post CSS configuration, JS minification, Figma preview and etc.

🌐 Flowbite

Tailwind Components

The biggest open source component library for Tailwind UI components and templates. It has a variety of components to choose from and you can copy paste the code that you need.

🌐 Website link

⚡ GitHub Repo

PostSrc

PostSrc also has a wide range of tailwind components to use, but it's not as famous as Tailwind.

🌐 PostSrc

Colors

Tailwind Shades

This website generates color shades when a base color is given as the input. You can also change hue, saturation or light of colors. At last, you can copy code to paste in tailwind.config file.

🌐 Website link

⚡ GitHub Repo

Shades Generator

Similar to Tailwind Shades but it has a color picker that you can use to get the color from the browser in real time. It doesn't have the functionality to adjust HSL but you can remove a shade from the palette if you want to.

🌐 Website link

⚡ GitHub Repo

Cheat Sheet

Actually, official docs are so great that you don't even need cheat sheets. But these are quick references if you need everything in one place. Jay Alraj has created a site that has everything about Tailwind CSS in a clean and concise way.

One thing, it is not updated to Tailwind v3 yet but I assume something will come out soon.

🌐 Cheatsheet link

Plugins

Tailwind CSS also gives you the flexibility to add custom plugins.

There are many tailwind plugins available on the internet, but one that I used is from a GitHub repo tailwind-plugins. It has plugins for animations, gradients, keyframes and pagination.

⚡ Gradients

⚡ Animations

⚡ Keyframes

⚡ Pagination

Another repo, tailwind-typography is a plugin for manipulating the typography of the app.

⚡ Typography

Icons

HeroIcons

HeroIcons is an open source project for SVG icons created by the makers of Tailwind CSS itself! You can integrate them with React or Vue libraries and also get a Figma file to use in your designs

🌐 Website link

⚡GitHub Repo

🎨 Figma

Conclusion

I found these resources very helpful while developing projects. If you think I am not using something that would make my life easier, do let me know! I am most active on Twitter, LinkedIn and Showwcase.

This is my second article about Tailwind CSS. I am planning to write more as learn more about this. Subscribe to the newsletter or follow me to have an update about it :)

Happy Designing! 🎨

Things to Know Before You Start Tailwind CSS

Kaushal Joshi — Tue, 28 Dec 2021 08:32:32 +0000

With the rising popularity of Tailwind CSS, many of us might jump directly on Tailwind just to catch up with the hype. It won't take them much of their time to realize that it is not like any other traditional CSS framework. They might not even get a full picture of Tailwind and end up hating it thinking it's harder than plain CSS.

Here is my attempt to cover everything that you need to know to use Tailwind CSS in your next project.

This blog focuses on CSS concepts that are essential to know for using Tailwind CSS. It is not a tutorial to get started with it.
Official documentation has covered that part pretty well.

Utility First Frameworks

The main reason why Tailwind is different from other frameworks is that it is a utility based framework, whereas frameworks like Bootstrap or Bulma are component based frameworks. Now, what's the difference?

Component based frameworks provide a set of components that are used by adding predefined classes to HTML elements. For example, Bootstrap has a total of 24 components that we can use by simply adding related classes.

Tailwind CSS on the other hand is a utility framework. It doesn't limit your design by predefined opinionated components but provides powerful building blocks that are useful to create a unique design for your projects.

Tailwind achieves this by having a class for every CSS property. Additionally, we can add our valid CSS properties to make a new tailwind class as per our needs. This gives total freedom and flexibility while designing the front end.

But this comes with a cost. Component based libraries don't require you to know much about plain CSS. You refer to the documentation and use the code that you need. Tailwind being a low level utility based framework doesn't work in that way. You need to have a profound understanding of CSS to use Tailwind in the best way.

Intermediate CSS

There is only one word that describes CSS - overwhelming. Though Tailwind gives you flexibility and saves time requires to type everything explicitly, your knowledge of plain CSS is considered as the main pre-requisites.

Sizing Units

Especially, rem. All utility classes use rem for styling. Tailwind has classes from smallest rem unit 0.125rem (2px) to all the way up to 24rem. Additionally, you can add units as per your choice in tailwind.config file (which can be px, em or anything else too).

Responsive Design

Tailwind is mobile first approach to styling. So whatever you write is suited for the smallest screen size defined while configuring tailwind. By default, the smallest utility class is sm that sets media query of a minimum width of 640px. You are supposed to mention the breakpoint if you are adding classes for bigger sizes than that.
That's why, knowing about responsive design, sizing units and media queries are a must to create anything eye-pleasing with Tailwind.

Flexbox & Grid

Creating layouts using grid and flexbox classes is easy as compared to traditional ways of using them. However, you might find it confusing because many classes conflict with each other resulting in a single class that is used with both layouts.
I was talking about justify-{value}, align-{value}, place-{value} and gap. These classes serve the same purpose for flexbox as well as grid. Having a clear understanding of them would help you to save hours of confusion.

Other Important Concepts

Of course, this is not it; CSS is more than that, and so is Tailwind. Units, responsive design and Flexbox/Grid need a special mention because once you understand how these things work, it won't be difficult for you to use Tailwind with its max out capacity.

Other than that, here are a few more things that are good to know:

CSS Transition and Transform Property
Aspect Ratios
Preflight: Tailwind has a set of base styling practices built on top of modern-normalize.

I am not mentioning padding, margin, box sizing, float and z-index because I believe that if you don't know how to work with them, you should think about sticking to plain CSS for some more time.

When to Use Tailwind?

If you have intermediary experience with plain CSS and know how CSS is supposed to work, you can use Tailwind pretty much anywhere you want.
If your front end stack has a component based library such as react, using tailwind will allow you to use it with its maximum reusability and scalability of Tailwind.

When NOT to use Tailwind?

Do not even consider using Tailwind if you don't have intermediate experience with CSS. You might not face issues in the very beginning but as your project gets bigger, it'd get messier and confusing.
If you are building websites with Vanilla JS, you might not use Tailwind at its full potential. Using same class names for every different component would make the code redundant, non-readable and messy.
If you are building prototypes and time/deadline is a major factor, using tailwind will slow you down. Tailwind is best suitable for big projects which give you enough time to focus on design as well as logic.
Similarly, using Tailwind with projects where backend logic or backend services is more important than design must be avoided. Because you'd end up spending more time on design when your focus should be on logic.

TL;DR

Tailwind CSS is a utility based framework so you have to combine multiple utilities and create a component by yourself. That's why knowing about plain CSS is a must. You should have a clear understanding of sizing units, responsive design and media queries. Knowing about conflicting flexbox and grid properties would also save your confusion when you start building projects.

Don't jump to Tailwind if you are not comfortable with plain CSS.

Conclusion

Using Tailwind when you struggle with fundamentals will only lead to frustrations. But once your fundamentals are clear, no one can stop you from harnessing the full potential of Tailwind CSS!

I have scheduled more blogs about starting Tailwind CSS so if you're interested, do subscribe to the newsletter and follow my blog. Also, if you think there's anything that can be improved or added, I am happy to hear your opinion. I am most active on Twitter and LinkedIn.

Happy Designing! 🎨

JavaScript Basics: Double Equals (==) and Triple Equals (===)

Kaushal Joshi — Wed, 22 Dec 2021 05:16:21 +0000

When I started learning JavaScript, one thing that amazed me was the use of three equals to symbols to compare variables. As someone who learnt C++, Java and python before JS, this was really confusing.

I also remember the frustration when my code wasn't working because I used a wrong operator. I ended up wasting an hour trying to find a bug. hehe.

What are those called? 🧐

The double equality operator (==) is called 'Loose Equality' but sometimes also referred to as 'Abstract Equality' operator. Triple equality operator (===) is called as 'Strict Equality' operator and some people love to call it 'Identity operator'.

Why they exist? 🤔

Both have similar purpose, that is comparing variable at right side of the operator with the left one and compute the output. The result is Boolean true if both variables are same and false if they are different.

What's the difference, you might ask! Here comes the JavaScript with its bright yellow color to stop you right there...

Exact difference 😲

Though the purpose seems similar, if we go under the hood and see how they function; we get the idea about their individual existence.

The loose equality operator first performs type conversions, if necessary. Then it computes the result based on the new converted variable.

let a = 20
let b = "20"

console.log(a == b) // Expected output: true

Here, variable b of data type string first gets converted into number data type and then gets compared with a which already has a data type of number.

Identity operator in other hands, does not performs any type conversion and presumes that both variables have same data type.

let a = 20
let b = "20"

console.log(a === b) // Expected output: false

Here the answer is false because data types of variables being compared are different and not getting converted either.
Let's dive deep...

Loose Equality Operators

By now, we know this twin pair does type conversion before comparing variables. But what happens when we compare between 0, empty string, null, undefined and Booleans with each other? This is where it gets weird and difficult to understand. Let me explain it by example itself:

console.log(0 == false) // true
console.log(0 == "") // true
console.log(0 == null) // false
console.log(0 == undefined) // false

console.log(null == undefined) // true

console.log(false == "") // true

Huh! take a breath. things are about to get worse.... because now we will deal with objects and strings!

Comparing objects with loose equality

When two objects are being compared, the result is true if and only if both variables are referencing to same object.

let obj1 = { "name": "foo" }
let obj2 = { "name": "foo" }
let obj3 = obj1

console.log(obj1 == obj1) // true
console.log(obj1 == obj2) // false
console.log(obj1 == obj3)  // false

Comparing with string and string objects

Quite similar to how objects are compared, if we compare a primitive string with string object (new String()), object string will be converted to a primitive string and values will be compared.

But if both variables are created using String objects, then they should reference to same object to get true as an output.

let str1 = "String"
let str2 = `String`

let str3 = String("String")
let str4 = String("String")

let str5 = new String("String")
let str6 = new String("String") 

let str7 = str6

console.log(str5 == str6) // false

In this case, every comparison will be computed as true except one between str5 and str6. Since both of those are declared as objects and don't reference to same variable, the output will be false.

For the same reason, if we compare str5 and str7, the output will be false.

Strict Equality Operators

There is nothing much that can be added here. Strict equality operators are less confusing... BUT! We need to be extra careful while comparing two objects with strict equality.

let obj1 = { "name": "Adam" }
let obj2 = { "name": "Adam" }
console.log(obj1 === obj2) // false

console.log({} === {}) // false

let obj3 = {}
console.log(obj3 === obj3) // true

The simplest explanation I found about this is from a blog published by Axel Rauschmayer. He says:

"Objects have unique identities and are compared by reference:

Every object you create via an expression such as a constructor or a literal is considered different from every other object; a fact that can be observed via the equality operator (===).

That operator compares objects by reference: two objects are only equal if they have the same identity. It does not matter whether they have the same content or not."

The detailed blog can be found here.

Most of the times in real world scenarios, we end up using strict equality operator just because how simple and straightforward it is.

Key Takeaways 📝

Loose Equality Operators (==)

Loose Equality operator performs type conversion before comparing values.

when comparing null and undefined, return true.
If Number and String are being compared, try to convert the string into a numeric value.
If both variables are objects, return true only if both reference to the same object.
If they have same data type,
- Number: return true only if both variables have same value.
- String: return true only if both variables have exact same characters in exact same order.
- Boolean: Convert true to 1 and false to 0 and compare likewise.

Strict Equality Operator (===)

Strict equality operator presumes that both variables have same data types and directly compares them.

When variables have different data types - return false.
When both of them are either null or undefined - return true.
Return false if any of the variable is NaN.
When both variables are objects, return true only if both refer to same object.
If they have same data types:
- Numbers: Must have numeric values between +0 and -0.
- String: both variables have exact same characters in exact same order.
- Boolean: both of them must be either true or false.

Conclusion ✨

The strict equality operator is best when it comes to real world calculations and software development. 99 percent of the time we should use the same in our code.

And for the 01 percent, ask yourself do you really know what you want and what you are doing. If answers are satisfactory, go on!

I started DSA and CP and fell right hard to the ground!

Kaushal Joshi — Thu, 02 Dec 2021 13:21:58 +0000

As like most of CS undergrad students in India, I decided to start competitive programming to level up my coding skills. It was August 2021 and I thought I can easily get comfortable in a year - so it will help me in my college placements.
But things got chaotic and I started questioning my entire software development experience and four years of college life. I became so stressed that I quit doing CP and lost confidence to build basic websites.

It's been four months now and I have enough confidence to start everything once again. In my fallback, I tried to analyse what went wrong and what steps should I have taken to not make it worse.

There were plenty of things that I did wrong. I started without knowing anything about CP or DSA. I just jumped in the river thinking how cool I would look while diving deep into the water without guessing the depth of the water.

Here are a few things that I want to share from my experience of one month of doing CP and DSA:

🧮 Understand the difference

The first mistake that I made was that I treated both things equally - in the wrong way! 'Data Structures and Algorithms' or DSA and 'Competitive Programming' or infamously known as CP are inter-related but quite opposite things.

DSA is all about solving real world problems mainly using programming concepts that are vaguely related to computer science. You are supposed to find the solution that is most suitable for real world scenarios. Later you need to implement it using code.

The best word I have come across to describe CP is 'mind sport'. You compete with other coders to solve a problem using your programming, logic and analytics skills in a minimal amount of time and memory.

It is said that DSA helps to solve real world problems that you might face in your actual job. Focusing too much on CP would surely help you land a good job but the later path would be difficult. You can achieve similar things with both but sticking on one path would help you to achieve it sooner. In either case, your problem solving skills will play an important role.

🎯 Set your goal

Ask yourself, what is your final goal behind this. Do you want to ace programming interviews, increase your development skills, want a mind sport to train your brain, get better at problem solving and critical thinking or anything else?

Based on your goal, you can focus on a few important things rather than trying everything out and getting nothing sufficient in return.

If you are preparing for interviews, you want to focus more on development and problem solving skills. You don't need to keep up with each and every online coding competition. Solving problems on LeetCode, GeeksForGeeks and HackerRank would be enough. Your main focus must be on logic building and Data Structures and Algorithms.

But if your goal is to train your brain like a pro coder and get better at problem solving and critical thinking; you should try competitive programming. The main trick is to use every aspect of programming that you know to solve the problem in the most efficient way possible.

Doing competitive programming would automatically prepare you for interview rounds since you are working on your DSA skills at the same time. However, it's hard to say the other way around.

📑 Start gathering information

Once you have decided what to do - DSA or CP, give yourself two days and collect everything that you find useful. Books, roadmaps, YouTube playlists, websites, portals, influencers, everything you can. I am saying this because I found some useful stuff AFTER I quit. So having some base in your hand before you start will give you an idea of what you will do next.

One important thing that you should do is talk to people who have been doing it and have a better experience. Ask for help, they can guide you better than most of the things I mentioned in the last paragraph.

💡 Pro Tip

Do not blindly follow anyone, especially YouTubers and influencers. Just take the informative part that they have to offer and completely ignore everything else.

✅ Clear your fundamentals

Okay, so now your prerequisites are completed. It's time to jump to the main part. I believe that this is the second worst mistake that I made Which overwhelmed me and I got exhausted too early. I didn't clear my fundamentals and directly started with CP thinking I would catch up on anything that I might have missed as I go. AND I WAS WRONG!

Starting without clearing your fundamentals won't look like a problem at first but it'll slowly affect your performance as you move on to the intermediate stuff. Make sure you are familiar with following this before you start solving problems:

Language

The language choice won't make a lot of difference if you ask me but it is always better if you are doing it with C++, Java or Python. During most of the interviews, at least in India, you're not allowed to use languages other than C, C++, Java and Python. And since time plays an important role in CP, choosing a faster language (Like C++!) is always beneficial.

Programming fundamentals

If you're reading this, there is a high chance that your programming fundamentals are already clear. But don't forget to brush up on your learnings before you start. You can use the following list as a checklist:

Data types
Functions / methods / classes
Type conversions
Decision Making
File I/O
Bits / strings / arrays manipulation
Time and space complexities

Language fundamentals

Every language has something unique to offer, learn it. There might be efficient ways to implement logic that you were unaware of. This would help to improve your understanding of the language which will help you to solve problems quicker.

If you have chosen Java, using the collection framework will save a lot of time, redundancy and lines of your code. Similarly, using the STL library in C++ would make your code more time efficient.

Maths

You do not only need to know these concepts on the surface but also be able to solve questions that are related to concepts using code. Start with following concepts and you'll learn other concepts as you go to next levels.

Number theory
Bitwise operating
Modulo arithmetic
LCM / HCF
Square roots / Factors
Fibonacci numbers
Prime numbers
Logs (To understand complexities)

🧸 Start with baby steps

Rome was not built in a day!

Start slowly. Take one step at a time. Take enough time to understand the problem and solve it wisely. You would fall at beginning. You will get stuck. You might spend an entire day on a single problem. You might get demotivated, exhausted and overburdened. But it is just a start and you will eventually get better if you keep practising!

Trust the process and do not quit - unlike I did :)

If you feel stuck, figure out what exactly is bothering you and spend some time getting to know it better. Take small breaks and try to solve again.

✍️ Document your progress

Whatever you learn, make notes from what you have learnt. I recommend creating a spreadsheet that has information about the problem that you solved. This would help you later to find similar patterns and better approaches while solving new problems.

🤞 Don't beat yourself up

This might be ironic because it's coming from me, I know.
Take breaks once in a while. Do some other stuff that doesn't include programming. I was so exhausted on the third week that I too rest for the rest of the week.

📝 Summing Up

I have summarized everything on my Twitter, here's a look:

Kaushal Joshi

@clumsy_coder

I started DSA and CP and fell right hard to the ground!

In August'21, I decided to start competitive programming to get better in problem solving & coding rounds.
But things got chaotic and I had to quit within a month.

Here's what I have learnt: 🧵👇

07:38 AM - 02 Dec 2021

External Resources

If you want to start DSA, get yourself comfortable with these websites:

This is a wonderful playlist that I will follow in my journey: DSA With Kunal.

If you are planning for CP, check these sites:

CodeChef
A2OJ
CodeForces
CodeChef YouTube channel also posts some amazing content.

🎉 Conclusion

I directly jumped on DSA and CP and got a wonderful reward for it. After researching it for about four months, I believe I have enough knowledge as well as the confidence to start DSA once again. As mentioned in the last few points, I am planning to document the learning - at least the fundamentals and share it on my blogs and socials.

If you have any experience in the field of DSA or problem solving, I would really love to hear your experience and have your guidance. I am active on Twitter and LinkedIn if you want to say hi!
You can also subscribe to my newsletter to stay updated with future blogs.

Happy Problem Solving! 🥵🥇

My experience with LGM'SOC-21!

Kaushal Joshi — Thu, 12 Aug 2021 15:52:51 +0000

Welcome to my very first blog as well as very first actual open source experience! 🥳

'Let's Grow More' is a community of developers helping other developers to 'grow' as a developer. The community aims to help new software developers and provide learning opportunities to build a better tomorrow by organizing various events.

One of the events is LetsGrowMore's Summer of Code, an open-source event which was conducted from May to August of 2021. It was my second experience of contributing to an open-source event but the first one that contributed significant PRs.

The main thing I learnt during this event is the importance of time. There are so many other developers with same or better experience than you who want to work on the same project. So, if you are assigned to an issue, solve it ASAP or forget about PR!

Other few things I'd like to mention is I gained confidence to design websites with vanilla JS. I used Bulma in two projects and got my hands dirty with Bulma CSS too.

It was great working with real projects and contributing to the wide range of projects during the month of development. Though I didn't find enough time to contribute to many issues, I enjoyed and learnt a lot while resolving the one I was assigned!

Happy Contributing! 🎉

DEV Community: Kaushal Joshi

Reflections on MumbaiFOSS: My Experience and Takeaways

About MumbaiFOSS

Prologue

The conference, in brief

Fireside chat

And, I met Kailash Nadh!

Afterthoughts

Epilogue

Is Create React App Really Dead? What Are Other Options?

How It Started

The Real Problems

It is Unmaintained

Overdependency on Webpack

Lacks Many Features

Better Alternatives

What Else Can We Use?

Vite

Server Side Generation

Server Side Rendering

My Views

Wrapping Up!

References

Hacktoberfest 101 with ReactPlay

What is Hacktoberfest

Why Participate in Hacktoberfest?

Get into Open Source

Get Exposure to Real World

Learn Collaboration

New Changes Introduced This Year

How to Contribute

Code Contributions

No/Low Code Contributions

Hacktoberfest with ReactPlay

Code Contributions to ReactPlay

Low/No Code Contributions to ReactPlay

Our First Hackathon

External Resources

Wrapping Up!

Three Ways to Remove Console Statements From Production Build

Overriding console Methods

ES-Lint

Using a Babel Plugin

Wrapping Up!

How to Add Script Tags in React

Why it Throws an Error

The Solution

Alternate Solution

Wrapping Up

How to Keep SSH Connection Alive for Longer Durations

Prerequisites

Solution

Explanation

Things to Know

Who waits for the response

Different config settings for different hosts

Wrapping Up

How to Fetch Large Data Files Through GitHub API

Get Files Smaller than 1MB

The Problem with Large Files

Get SHA of the file

Fetch Blob of the file

Convert Blob into Useful Data

Easiest Way

Second Way

Third Way

Nothing Worked?

Restrictions

Summary and TL;DR

More references

Maximize your Tailwind efficiency by using these resources

Online Playground

VS Code Extensions

Tailwind CSS IntelliSense

Headwind

Tailwind Docs

Tailwind Styled Snippets

Components Library

Flowbite

Tailwind Components

Overriding `console` Methods