Forem: Shubham Sharma

🚀 la-resume: 100+ Signups in Just 14 Days – Here’s Our Journey So Far

Shubham Sharma — Sat, 08 Mar 2025 07:53:51 +0000

Hey everyone! Two weeks ago, my friend Priyabrata Mondal and I launched la-resume, an open-source, ATS-friendly resume builder to help job seekers create professional resumes without the hassle. We’ve been blown away by the response so far—100+ signups in just 14 days! 😱 Here’s a quick rundown of what’s been happening:

✅ 100+ signups (still can’t believe it!)
👀 730+ unique visitors
📄 2,200+ page views
⭐ 25+ GitHub stars in just 14 days

As solo developers, we built this side project together for fun and to help out, and the traction has been incredible. I wanted to share our journey, the tech behind it, and some of the challenges we’ve faced along the way.

Why We Built la-resume

It all started when we were creating our resume on OverLeaf. We noticed that most resume builders out there either weren’t ATS-friendly (a must for beating those applicant tracking systems) or charged crazy fees for basic stuff like PDF exports or writing LateX isn't easy for everyone. So, we teamed up to create la-resume an easy-to-use tool optimised for ATS, letting users craft stunning resumes in minutes.

Our goal? Help people land their dream jobs with resumes that look pro and pass those ATS filters with flying colors.

The Tech Behind It

If you’re curious about the tech we used to bring la-resume to life, here’s the stack we worked with:

Frontend: Next.js 15 + Tailwind CSS (keeps things fast and pretty!)
Backend: MongoDB (We started with NeonDB PostgreSQL but switched due to free-tier limits—lesson learned!)
Auth: Clerk for super smooth authentication
Hosting: Vercel (makes deployment a breeze)
Microservices: Python-based microservices, containerized and hosted on AWS

This setup has been awesome—it’s fast, scalable, and lets us iterate on new features without too much stress.

How It Works

Using la-resume is super straightforward:

You fill out a form with your info.
That data gets plugged into a LaTeX template behind the scenes.
Boom—a polished, ATS-friendly PDF is generated for you!

It’s all about making the process painless while ensuring your resume looks great and works for those ATS scans.

The Journey: Challenges & What We’ve Learned

1️⃣ Getting Those First Users

Getting people to check out la-resume was a big hurdle at first. Most of our traffic came from X (shubhamku044 & prybruhta), Reddit, and some posts on LinkedIn (shubhamku044 & prybruhta). Here’s what worked for us:

Posting on communities like Reddit, Twitter, and Indie Hackers.
Sharing updates on LinkedIn and Dev.to to keep the momentum going.
Chatting with people in relevant groups to get feedback and spread the word.

The community support has been a huge boost!

2️⃣ Listening to Feedback

The feedback from users has been amazing. People shared great ideas, like improving the UI or adding more template customization options. We’ve been quick to iterate and make those changes based on what real users need.

3️⃣ Keeping It Simple

One lesson we learned early: don’t overcomplicate things! We focused on keeping the MVP simple and functional, which let us launch faster and figure out what users actually want before diving into bigger features.

Community Love & Recognition

We’ve been so humbled by the support:

The folks behind RenderCV and ppResume liked and starred our project on GitHub (la-resume, huge shoutout to them!
We’ve already hit 25+ stars in just 14 days!
We’re starting to see interest from open-source contributors, which is super exciting.

It’s awesome to see people rallying behind what we’ve built together.

What’s Next for la-resume?

We’ve got big plans to keep improving la-resume, and we’re pumped about what’s coming:

🚀 LaTeX exports for even better formatting.
📊 More template customization options to fit everyone’s style.
💡 A freemium model with some premium features for power users.

The support so far has been incredible, and we can’t wait to see where this journey takes us!

Want to Check It Out?

If you’re on the hunt for an ATS-friendly resume builder, we’d love for you to give la-resume a try! You can find it here: la-resume.tech

📌 GitHub Repository: shubhamku044 & PriyabrataMo
📢 Follow us on Twitter: shubhamku044 & prybruhta
🌍 Join our LinkedIn network: shubhamku044 & prybruhta

We’re also open to opportunities—whether it’s collaboration, job offers, or partnerships. As full-stack developers passionate about building scalable apps with React, TypeScript, and Go, we’d love to explore new projects or roles where we can contribute and grow. Feel free to reach out! We’d also love to hear your thoughts, feature ideas, or just say hi. Let’s keep building something awesome together! 💙

Launching Your First AWS EC2 Instance: A Complete Guide for DevOps Beginners

Shubham Sharma — Thu, 14 Nov 2024 21:32:27 +0000

In the world of DevOps, the efficient management of resources is the main concern.
This is where Virtual Machines (VMs) and hypervisors come into the picture, changing how organizations optimize their computing capabilities. Imagine a very big plot of land, where a single house is built, occupying only a small area. This analogy perfectly matches the role of VMs in the DevOps landscape.

Understanding the Virtual Machines

That single house on the vast piece of land is an example of an underutilized resource, and traditional physical servers frequently end up in a similar situation.
Usually, businesses would assign a specific server to each team or application, which resulted in a major underutilization of the hardware's potential.

On the other hand, virtual machines provide a revolutionary answer to this problem.
VMs allow businesses to optimize the use of their computer resources by logically dividing a single physical server into several separate virtual environments.
It would be like building several separate, smaller homes on that large piece of land, each one customized to meet the needs of its occupants.

The Hypervisor: The Mastermind Behind Virtual Machines

The hypervisor, an advanced software layer that builds and controls virtual machines on a physical server, is essential to this smooth virtualization. Consider the hypervisor to be the estate manager, carefully monitoring the distribution and use of the land to make sure every virtual "dwelling" (VM) has access to the resources it needs without interfering with the others.

Well-known hypervisors like VMware and Xen enable businesses to divide hardware so that several users or apps can use it without any problems. The foundation of DevOps processes, where the capacity to grow resources on demand is crucial, is this degree of control and flexibility.

Clouds, VMs, and the Art of Efficient Resource Management

Cloud platforms, like AWS, Azure, and Google Cloud, have embraced the power of VMs to revolutionize their infrastructure. These cloud giants leverage vast data centres, each housing numerous physical servers across various regions. When a user requests a VM (or an EC2 instance on AWS), the cloud provider's systems spring into action, selecting an optimal physical server, creating a VM using a hypervisor, and allocating the requested resources to the virtual environment.

This logical separation of physical hardware and virtual resources is the key to unlocking exceptional efficiency. Just as our analogy of the expansive plot of land can be transformed into a thriving community of smaller, specialized dwellings, cloud providers can now serve millions of users across fewer physical servers, a vast improvement over the traditional one-server-per-user approach.

Unleashing the Full Potential of VMs in DevOps

As you go deeper into DevOps, understanding the intricacies of Virtual Machines and hypervisors will be instrumental in your journey. These technologies empower organizations to optimize resource utilization, scale infrastructure on-demand, and create agile, responsive computing environments – all essential pillars of successful DevOps practices.

By embracing the power of VMs and hypervisors, DevOps practitioners can unlock new levels of efficiency, flexibility, and adaptability, positioning their organizations for success in the ever-evolving digital landscape.

Getting started with a Virtual Machine(VM)

Since there are many cloud providers available nowadays, for example, AWS from Amazon, Azure from MicroSoft, Google Cloud Provider from Google, etc.
But here in the blog, we will be using AWS, and all the steps which I will show you will be applicable for others too.

EC2

The full form of EC2 is Elastic Compute Cloud. It's not a buzz word, it just a name given to the Virtual Machine provided by AWS.

Important of Automation in cloud

Before starting a EC2 instance, I would like to first tell you what is the importance of Automation in Cloud

It will be quite simple to establish a single virtual machine. All you have to do is open the cloud provider of your choice. After that, all you have to do is enter some settings and hit a button to get your virtual machine started.
But imagine if you want to create 1000's of virtual machines, this process will become very much tedious. And here you need automation else if you choose to do it manually, it will take weeks to just start 1000's of virtual mahines.
This automation can be done in multiple ways, for AWS EC2, we can use it's API and then we can write a script and make an API call to AWS EC2 API.
Other ways to start AWS EC2 are
- AWS CLI
- AWS API (Boto3 if you want to use Python)
- AWS CFT(Cloud Formation Template)
- AWS CDK
- Terraform
- Though it is not specific to AWS. But you can also use it to start AWS EC2 instance. People use it for hybrid cloud model. I will write a Blog on Terraform soon.

Starting your first EC2 Instance

First step is to visit AWS console page, then go to sign-in page.

If you have an AWS account already then login with your credentials.
If you don't have an account, please create one. It is very easy to create an account, it will ask some basic details like email, password but It will also ask for your credit card details, don't worry it won't cost you util are you not using any paid services
After login you will see this interface
Then go to EC2, you can either search it or directly click on the EC2 written text
Now, click on the Launch Instance. So, we are going to start a ubuntu machine, for this just fill the basic details like instance name, then choose Ubuntu in application and OS Images section
Below this you can choose intance type, for now I will suggest you to choose t2.micro which is a free tier server

Then, generate a key pair and save it to your laptop. This will be used to login to your ubuntu server from your own computer

Note: Do not share it with anyone.

The next step is to click on Launch Instance button, and you are good to go

Last step is to visit the ec2 instances page from side panel to see your running instance

Congratulations 🎉, You have started your first ec2 instance

Connecting to your EC2 instance

In this section of blog, I will show you how can you connect your ec2 instance in two different ways

The easier way

In the instances pages, click on the instance id of your ec2 instance
Now, after that, in the top right of the screen you can see a Connect button, click on that
You will be redirected to a different screen, so now again click on Connect
You can now see a console in your browser, which is called aws console. If you can see it, means you have successfully connected to your EC2 Instance
Now you can write your Linux commands

The better way

Open any terminal of your choice on your computer
Change the file permission of the key-value-pair-pem file

chmod 400 /path/to/your/key-value-pair-pem-file.pem

this command will change the permission of the file, so that only owner can read it, and no one else can read/edit it

Now go to you ec2 instance and copy the public IPv4 address and run the below command

ssh -i /path/to/your/key-value-pair-pem-file.pem ubuntu@public-ip-of-your-ec2

For the first time, SSH asks you if you want to continue the connection (yes/no/[fingerprint]). Typing “yes” accepts the key, telling SSH that you trust the server, so please type yes
Congrats🎊, you have successfully connected your computer to an ec2 instance

If you'd like to connect and learn together, you can find me on LinkedIn and Twitter. Let's help each other grow! 🚀

Thank you for reading this article! I would love to hear your thoughts and experiences with DevOps in the comments below. Did you find this helpful? What aspects of DevOps would you like to learn more about? Drop a comment and let's discuss! 💭
Your feedback helps me create better content for the community. 🙏

Understanding DevOps through a SDLC lens: A Comprehensive Learning Journey

Shubham Sharma — Sun, 10 Nov 2024 11:53:30 +0000

I. Introduction

SDLC The Software Development Life Cycle is a structured approach to software development, consisting of several phases such as planning, design, development, testing, deployment, and maintenance. Each phase is designed to systematically guide the development process, ensuring that the software meets business requirements, is built efficiently, and is thoroughly tested.

The SDLC knowledge is essential for IT professionals as it fosters collaboration, ensures efficient project planning, and aids in quality and risk management. It helps non-developers communicate better with developers, supports compliance and security, and makes it easier to adapt to Agile and DevOps practices. This shared understanding enables all teams to contribute effectively, improving overall project success.

SDLC and DevOps are connected through their shared focus on quality, speed, and collaboration. While SDLC structures development phases, DevOps adds automation and continuous feedback, allowing faster, higher-quality releases and seamless integration across teams. Together, they streamline workflows and improve delivery efficiency.

II. What is Software Development Life Cycle (SDLC)?

A. Definition and importance

The Software Development Life Cycle (SDLC) is a comprehensive methodology that provides a structured framework for software development projects. It encompasses the complete process from initial planning through maintenance of the finished application. SDLC defines a series of phases, each with specific deliverables and activities, ensuring systematic and efficient software development.

Project Planning and Control

Establishes clear project roadmap
Enables effective resource allocation
Ensures systematic development approach
Facilitates cost estimation and control

Quality and Risk Management

Ensures systematic testing at each phase
Early identification of potential issues
Maintains consistent quality standards
Improves end-product reliability

Team Collaboration and Efficiency

Clearly defined roles and responsibilities
Improved team communication
Optimized resource utilization
Enhanced project transparency

The implementation of SDLC in software development projects has become increasingly crucial in today's rapidly evolving technological landscape. Organizations that follow this structured approach consistently deliver higher quality products while maintaining better control over project timelines and budgets. The framework not only helps in managing current development processes but also establishes a foundation for future improvements and scalability. By providing clear guidelines and checkpoints throughout the development process, SDLC ensures that all stakeholders remain aligned with project goals while maintaining quality standards. This systematic approach has proven particularly valuable in complex projects where multiple teams need to coordinate effectively, ultimately leading to more successful software deployments and higher customer satisfaction rates. The flexibility of SDLC also allows organizations to adapt their development processes to changing business needs while maintaining structure and efficiency in their operations.

III. The SDLC Phases in Detail

A. Planning Phase

The Planning Phase is the foundational step in the Software Development Life Cycle (SDLC), focused on defining project objectives, understanding user needs, and mapping out a high-level roadmap for development. It sets the direction for the entire project, making it essential for aligning all stakeholders and ensuring clear, achievable goals. This phase typically includes the following key activities:

Requirement Gathering: Identifying and documenting the needs of stakeholders through interviews and workshops to clarify software goals and features.
Customer Feedback Collection: Gathering insights from potential users to ensure the software meets real-world needs and expectations.
Market Research: Analyzing competitor products and industry trends to guide feature development and set the software apart.
Creating Software Requirement Specification (SRS): Documenting all requirements in a detailed guide for developers and stakeholders to ensure alignment and clarity.

B. Design Phase

The Design Phase transforms requirements into a comprehensive blueprint for the software system. It involves creating both high-level and detailed technical specifications that guide developers through implementation. This phase bridges the gap between requirements and actual development, ensuring a structured approach to building the system. This phase typically includes the following key activities:

System Architecture Design: Creating the overall structure of the system, including component relationships and technology stack decisions.
Database Schema Planning: Designing data models and relationships to efficiently store and manage application data.
Interface Design: Developing user interface mockups and API specifications to define how users and systems will interact.
Security Architecture: Planning security measures and compliance requirements to protect system and user data.

C. Building Phase

The Building Phase, also known as the development phase, is where the actual software construction takes place. Developers transform design documents into functional code while following established coding standards and best practices. This phase brings the theoretical plans into reality through careful implementation. This phase typically includes the following key activities:

Code Development: Writing clean, efficient code based on design specifications and requirements.
Version Control Management: Maintaining code organization through Git repositories and branching strategies.
Code Review Process: Implementing peer review practices to ensure code quality and knowledge sharing.
Unit Testing: Creating and executing tests to verify individual component functionality.

D. Testing Phase

The Testing Phase focuses on validating the software's functionality, performance, and reliability. Through systematic testing approaches, the team ensures the software meets quality standards and user requirements before deployment. This crucial phase helps identify and resolve issues early in the development cycle. This phase typically includes the following key activities:

Test Planning: Creating comprehensive test strategies and test cases to cover all aspects of the software.
Quality Assurance: Executing various types of testing including functional, performance, and security testing.
Bug Tracking: Identifying, documenting, and managing defects through their lifecycle to resolution.
User Acceptance Testing: Validating that the software meets business requirements through end-user testing.

E. Deployment Phase

The Deployment Phase marks the transition of software from development to production environment. It involves careful planning and execution to ensure smooth delivery to end users while maintaining system stability and performance. This phase requires close coordination between development, operations, and support teams. This phase typically includes the following key activities:

Release Planning: Preparing deployment strategies and rollback procedures for safe releases.
Environment Setup: Configuring production infrastructure and security measures.
User Training: Providing documentation and training materials for end users.
Monitoring Setup: Implementing tools and procedures for system monitoring and performance tracking.

F. Maintenance Phase

The Maintenance Phase ensures the software continues to perform optimally after deployment. It focuses on ongoing support, updates, and improvements based on user feedback and system performance data. This phase is crucial for the software's long-term success and user satisfaction. This phase typically includes the following key activities:

Production Support: Providing ongoing technical support and issue resolution.
Performance Optimization: Monitoring and improving system performance based on usage patterns.
Feature Enhancement: Implementing new features and updates based on user feedback and business needs.
Security Updates: Maintaining system security through regular patches and updates.

IV. DevOps Integration in SDLC

A. Key focus areas for DevOps engineers

The Key Focus Areas for DevOps Engineers represents the core responsibilities and priorities that drive successful DevOps implementation within the SDLC. DevOps engineers bridge the gap between development and operations, focusing on automation, continuous integration, and delivery to streamline the entire development process. This domain includes critical activities essential for modern software development practices:

Building Automation

Implementing CI/CD pipelines
Automating code compilation and packaging
Setting up automated dependency management
Configuring build triggers and notifications
Managing build artifacts and versioning

Testing Automation

Creating automated test suites
Implementing continuous testing practices
Setting up automated test environments
Managing test data and configurations
Integrating security testing automation

Deployment Automation

Creating infrastructure as code
Implementing automated deployment scripts
Managing configuration automation
Setting up environment provisioning
Automating rollback procedures

B. How DevOps improves SDLC

The DevOps Improvement in SDLC focuses on transforming traditional software development practices through automation, collaboration, and continuous improvement. This integration enhances various aspects of the development lifecycle, leading to more efficient and reliable software delivery. The key improvements include:

Reducing Manual Intervention

Automating repetitive tasks
Implementing self-service capabilities
Standardizing processes across teams
Reducing human error through automation
Creating automated validation checks

Improving Efficiency

Streamlining workflow processes
Optimizing resource utilization
Implementing parallel processing
Reducing bottlenecks
Enhancing team collaboration

Faster Delivery

Implementing continuous integration
Enabling continuous deployment
Reducing deployment time
Automating release processes
Minimizing time-to-market

Quality Assurance

Implementing automated testing
Maintaining consistent environments
Ensuring security compliance
Monitoring system performance
Facilitating continuous feedback

V. Practical Example: E-commerce Platform

A. Real-world scenario

An e-commerce platform wants to add a Kids’ Section to attract a new customer demographic. Here’s how SDLC and DevOps come into play:

Requirement Gathering (SDLC): The team collects input from stakeholders and customers to define features like categories (clothing, toys) and design preferences. This is documented in the Software Requirement Specification (SRS).
Design (SDLC): The architecture is planned, and details like database changes and UI/UX design are finalized for the Kids’ section.
Development (SDLC & DevOps): Developers write the code for the new section. DevOps tools like version control (Git) and continuous integration (CI) ensure regular updates, automated testing, and error-free integration.
Testing (SDLC & DevOps): The QA team tests the new features. DevOps ensures continuous testing and quick feedback through automated processes.
Deployment (SDLC & DevOps): The feature is deployed using continuous delivery (CD) tools, ensuring a smooth and timely release. Monitoring tools ensure everything runs smoothly post-deployment.
Maintenance (SDLC & DevOps): The Kids’ section is maintained with ongoing performance monitoring and regular updates, ensuring scalability and customer satisfaction.

By combining SDLC for structured development and DevOps for automation and continuous feedback, the platform efficiently adds the Kids’ section while maintaining quality and reducing risks.

VI. Conclusion

Incorporating the Software Development Life Cycle (SDLC) and DevOps into a development project ensures a structured, efficient, and high-quality approach to building software. By following the clear stages of SDLC—planning, design, development, testing, deployment, and maintenance—teams can deliver products that meet both business requirements and customer expectations. The integration of DevOps practices enhances this process by promoting automation, continuous integration, and faster feedback loops, ultimately accelerating development while maintaining high standards.

As demonstrated through the practical example of adding a Kids’ section to an e-commerce platform, combining SDLC with DevOps not only streamlines development but also ensures that the final product is scalable, reliable, and responsive to user needs. In today’s fast-paced digital world, mastering these methodologies is crucial for IT professionals to deliver innovative, high-quality software that stands out in a competitive market.

If you'd like to connect and learn together, you can find me on LinkedIn and Twitter. Let's help each other grow! 🚀

DevOps Fundamentals: Breaking Down the Culture, Tools, and Practices

Shubham Sharma — Sun, 03 Nov 2024 05:44:55 +0000

What is DevOps?

DevOps is a culture that improves the organizational ability to deliver the application.

Let me give you an example: Imagine an issue on shubhams.dev. Once the development team fixes the problem, the DevOps practices ensure that the changes can be deployed quickly and reliably to production.

Usually, people think, DevOps <--> CI/CD(improving delivery). In fact DevOps is Improving Delivery, but it consists of many different things.

DevOps is a process of improving application delivery by ensuring there is proper automation in place, quality maintaining, continuous monitoring an continuous testing.

Why DevOps?

So, many years ago when DevOps was not there then the process was much tedious, explain below👇

System Admins -> They used to create servers

Developer -> They put the code to some central location(Servers / VM ware)

Tester -> They used to test the application which is present on the server

BRE(Build and Release Engineer) -> They take forward to production or pre-production

This process took too much time because of the different teams. So, After DevOps, this process became fast and smooth

How to introduce yourself?

Mention your developer experience, Other experience also like system admin, BRE, server admin, java dev, python dev etc.
Also mention What you did, for example - automation check, quality check, monitoring of application, testing etc.
You should also mention the tools you were using like GitHub Action for CI/CD, Kubernetes for container orchestration, Ansible, Terraform etc.

If you'd like to connect and learn together, you can find me on LinkedIn and Twitter. Let's help each other grow! 🚀

Setup ReactJs + TS + Styled-Componets + Redux

Shubham Sharma — Mon, 27 Mar 2023 18:57:40 +0000

Intro

In this blog tutorial, we will see how we can setup a ReactJs project with Typescript, styled-components and redux toolkit.

ReactJs

React is a popular open-source JavaScript library for building user interfaces. React allows developers to build reusable UI components that can be used to create complex user interfaces. React uses a declarative syntax and a virtual DOM to efficiently update the UI when data changes. React can be used for both client-side and server-side rendering and can be integrated with other libraries and frameworks.

Typescript

TypeScript is a programming language and a typed superset of JavaScript that adds optional static type checking, classes, interfaces, enums, and other features to JavaScript. TypeScript can help improve code quality and maintainability, catch errors at compile time rather than at runtime, and provide better tooling and editor support for large codebases. It is widely adopted in the industry for building scalable and maintainable applications.

Styled-components

Styled Components is a popular open-source library for styling components in React applications. It allows developers to write CSS code as part of their component code using a unique syntax that is similar to regular CSS but is scoped to the specific component. This allows for easy and efficient styling of components and helps to avoid naming conflicts and specificity issues. Styled Components also support dynamic styles based on props and theming.

Redux-toolkit

Redux Toolkit is an official opinionated collection of utilities and best practices designed to simplify the development of Redux applications. It includes pre-configured tools that help developers write clean, concise, and maintainable Redux code. Redux Toolkit provides an easy-to-use API for creating Redux slices, which are small, self-contained pieces of the Redux store that manage a specific piece of state and associated logic.

Prerequisites

Ensure that Node.js is installed on your machine. If it is not installed, you can download and install it by clicking here.
Now you need a package manager, either npm or yarn, npm comes by default with node installation. You can install yarn by writing this in your bash or shell.

#for windows
npm i -g yarn

# for macOs/linux
sudo npm i -g yarn

Creating react app with vite

npm create vite
#or 
yarn create vite

cd project-name

yarn
yarn dev

npm install
npm run dev

Now we are done with the installing ReactJs with Typescript

The folder structure should look like this for now

Now We are going to delete App.css and index.css,

Installation and setup of styled-components

Now let's install styled-components. So to install styled-components you need to write.

yarn add styled-components

We will be creating components, pages and a styles folder inside src.

components will be for writing reusable components.
pages directory contains the main pages of the application
styles gonna contain the styles of components and pages

├── src/
│ ├── assets/
│ ├── components/
│ ├── pages/
│ ├── styles/
│ │ ├── global.ts
│ │ └── theme.ts
│ ├── App.tsx
│ └── main.tsx
│ └── vite-env.d.ts

global.ts is going to contain global styles for web-app and the theme.ts will contain the variables that we can use in writing style.

// theme.ts

export const theme = {
  colors: {
    primary: '#f1faee',
    secondary: '#457b9d',
    tertiary: '#a8dadc',
    background: '#1d3557',
    text: '#f1faee',
    primaryTextColor: '#594F43',
    secondaryTextColor: '#777777',
    inputPlaceholder: '#C7C7C7',
    darkGrayText: '#303030',
    darkText: '#f1faee',
    black: '#000000',
    white: '#ffffff',
  },
  paddings: {
    container: '15px',
    pageTop: '30px',
  },
  fonts: {
    xs: '0.8rem',
    sm: '0.9rem',
    base: '1rem',
    md: '1.2rem'
  }
};

// global.ts

import { createGlobalStyle } from 'styled-components';

type ThemeType = {
  colors: Record<string, string>;
}

export const GlobalStyles = createGlobalStyle<{theme: ThemeType}>`
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  line-height: 1;
  background-color: ${({ theme }) => theme.colors.background};
  color: ${({ theme }) => theme.colors.text};
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
figure,
blockquote,
dl,
dd {
  padding: 0;
  margin: 0;
}
button {
  border: none;
  background-color: transparent;
  font-family: inherit;
  padding: 0;
  cursor: pointer;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}
li {
  list-style-type: none;
}
/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

a {
  text-decoration: none;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

#root {
  min-height: 100vh;
}
`;

after this, you need to add this to your main.ts

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { GlobalStyles } from './styles/global';
import { theme } from './styles/theme';
import { ThemeProvider } from 'styled-components';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <React.StrictMode>
        <ThemeProvider theme={theme}>
            <GlobalStyles />
            <App />
        </ThemeProvider>
    </React.StrictMode>,
);

Installation and setup of redux for state management

Now we need to install redux,

yarn add @reduxjs/toolkit react-redux

We will be creating another folder store inside src, so our new src will look like

├── src/
│ ├── assets/
│ ├── components/
│ ├── pages/
│ ├── styles/
│ │ ├── global.ts
│ │ └── theme.ts
│ ├── store/
│ │ ├── actions/
│ │ ├── reducers/
│ │ └── index.ts
│ ├── App.tsx
│ └── main.tsx
│ └── vite-env.d.ts

And this store is going to contain the code related to state management of the web application.

store/index.ts

/* The code is taken from redux toolkit website */
import { configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
  reducer: {
    // reducers.
  },
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { GlobalStyles } from './styles/global';
import { theme } from './styles/theme';
import { ThemeProvider } from 'styled-components';
import { store } from './store';
import { Provider } from 'react-redux';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <GlobalStyles />
      <Provider store={store}>
        <App />
      </Provider>
    </ThemeProvider>
  </React.StrictMode>,
);

That's all.

If you have any question, drop a comment below.

Shubham

Introduction to CI/CD

Shubham Sharma — Mon, 12 Dec 2022 17:48:03 +0000

CI/CD

CI/CD, short for Continuous Integration and Continuous Delivery/Deployment, is a software development practice that aims to automate and improve the process of building, testing, and releasing software. By utilizing a CI/CD pipeline, developers can quickly and consistently deliver high-quality software that is ready for deployment.

Continuous Integration

Continuous Integration (CI) is a software development practice where developers regularly merge their code changes into a central repository. Each merge is then verified by an automated build, allowing teams to detect problems early.

Continuous Delivery

Continuous Delivery (CD) is a software development practice where code changes are automatically built, tested, and prepared for a release to production. CD aims to shorten the lead time between code changes and their release to production.

Continuous Deployment

Continuous Deployment (CD) is a software development practice where code changes are automatically built, tested, and released to production. CD aims to shorten the lead time between code changes and their release to production.

CI/CD Pipeline

A CI/CD pipeline is a set of automated processes that takes code from a version control repository and builds, tests, and deploys it to a production environment. The goal of a CI/CD pipeline is to automate the build, test, and release process.

A CI/CD pipeline typically consists of several stages, each of which is responsible for a specific step in the software development process. These stages may include:

Source code management: This stage is responsible for managing and storing the source code for the software. This may include tracking changes, managing branches, and performing code reviews.
Build: This stage is responsible for building the software from the source code. This may include compiling the code, running unit tests, and generating artifacts (such as executables or Docker images).
Test: This stage is responsible for running automated tests on the software to ensure that it functions as expected. This may include unit tests, integration tests, and end-to-end tests.
Deploy: This stage is responsible for deploying the software to a staging or production environment. This may include pushing Docker images to a registry, deploying to a Kubernetes cluster, or releasing to a cloud platform.
Monitor: This stage is responsible for monitoring the deployed software to ensure that it is functioning properly. This may include tracking metrics, logging errors, and alerting on issues.

To set up a CI/CD pipeline, developers first need to choose a CI/CD platform. There are many different options available. Some popular options include Jenkins, CircleCI, and GitLab.

Once a platform has been chosen, developers need to configure the pipeline by defining the stages and the tasks that need to be performed in each stage. This can typically be done using a YAML file or a graphical interface provided by the CI/CD platform.

For example, a simple CI/CD pipeline for a Node.js application might look like this:

stages:
  - build
  - test
  - deploy

build:
    stage: build
    image: node:latest
    script:
        - npm install
        - npm run build

test:
    stage: test
    image: node:latest
    script:
        - npm run test

deploy:
    stage: deploy
    script:
        - docker build -t my-app .
        - docker push my-app

This pipeline consists of three stages: build, test, and deploy. In the build stage, the source code is built using the npm install and npm run build commands. In the test stage, the software is tested using the npm test command. In the deploy stage, the software is built into a Docker image and pushed to a registry.

Once the pipeline has been defined, developers can trigger a build by committing changes to the source code repository. This will automatically kick off the pipeline, running each stage in sequence. If any stage fails, the pipeline will stop and the developer will be notified of the issue.

In addition to automating the software development process, a CI/CD pipeline can also provide many other benefits. For example, it can:

Ensure that software is always delivered quickly and consistently
Reduce the need for manual intervention and the risk of human error
Allow developers to focus on writing code, rather than worrying about the deployment process
Provide a clear view of the software development process,including any issues or failures
Enable faster feedback, allowing developers to quickly address and fix problems
Provide a consistent and predictable deployment process, making it easier to roll back or redeploy software if necessary

To get started with a CI/CD pipeline, follow these steps:

Choose a CI/CD platform. There are many different options available, each with its own strengths and weaknesses. Consider factors such as cost, features, and integration with other tools.
Configure the pipeline by defining the stages and tasks that need to be performed in each stage. This can typically be done using a YAML file or a graphical interface provided by the CI/CD platform.
Connect the pipeline to the source code repository. This will allow the pipeline to automatically trigger builds when changes are committed to the repository.
Trigger a build by committing changes to the source code repository. This will kick off the pipeline and run each stage in sequence.
Monitor the pipeline to ensure that it is running smoothly and address any issues or failures that may occur.

By following these steps, developers can quickly set up a CI/CD pipeline and start delivering high-quality software consistently and efficiently.

Thank You

If you have any queries you can post in the comment.

You can also connect with me on LinkedIn and Twitter

What is Bootstrap? The best 2022 beginner's guide.

Shubham Sharma — Mon, 21 Nov 2022 17:00:00 +0000

For a few years now this has become an essential tool for frontend developers. For the rest of us, it’s just another coding buzzword we don’t understand.

But what is Bootstrap?

So we know it’s useful, but what is it used for, and how does it really help web developers?

The web app development toolkit was created by former Twitter employees Mark Otto and Jacob Thornton.

The official Bootstrap website describes it as:

“The most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.”

Here’s what that means in plainer terms:
Bootstrap is a giant collection of handy, reusable bits of code written in HTML, CSS, and JavaScript. It’s also a frontend development framework that enables developers and designers to quickly build fully responsive websites.

Essentially, Bootstrap saves you from writing lots of CSS code, giving you more time to spend on designing webpages.

It’s also FREE!

It’s currently hosted on GitHub and can be downloaded easily from the official site.

So, now that we know what it is, let’s take a closer look to see whether it’s useful for your web development work.

1. Why is Bootstrap the go-to for web developers?

Let’s checkout the advantages down in parts:

Its responsive grid

No more spending hours coding your own grid—Bootstrap comes with its own grid system predefined.

Now, you can get straight to filling your containers with content.

Defining custom breakpoints for each column is a snap using their extra small, small, medium, large, and extra large breaks. You can also simply stick to the default as it might already meet the needs of your site.

Its responsive images

Bootstrap comes with its own code for automatically resizing images based on the current screen size. Just add the .img-responsive class to your images, and the predefined CSS rules take care of the rest.

Let Bootstrap resize your images for you!

It can even change the shape of your images with the addition of classes like ** img-circle ** and ** img-rounded **, and that’s without going back and forth between the code and your design software.

Its components

Bootstrap comes with a whole barrelful of components you can easily tack onto your web page, including:

Navigation bars
Dropdowns
Progress bars
Thumbnails

Not only is it a breeze to add eye-catching design elements to your webpage, you’ll also be able to rest assured knowing that every one of them will look great no matter the screen size or device used to view them. That’s a lot of ready-made functionality right at your fingertips.

For a more complete list of addable features, check out the component documentation.

Its JavaScript

Still not enough functions? Try JQuery!

Bootstrap also allows developers to take advantage of over a dozen custom JQuery plugins.

This library gives you even more room to play with interactivity, offering up easy solutions for modal popups, transitions, image carousels, and—one of my personal favorites—a plugin called ** scrollspy **, which automatically updates your navigation bar as you scroll through a page.

Its documentation

Simply put, Bootstrap’s documentation is some of the best we’ve ever seen. Every piece of code is described and explained in explicit detail on their website.

Explanations also include code samples for basic implementation, simplifying the process for even the most beginner of beginners. All you need to do is choose a component, copy and paste the code into your page, and tweak from there.

Its customizability

One of the main critiques when it comes to frameworks such as Bootstrap is their size—the weight they throw around can really slow down your application upon first load. The current version of Bootstrap’s CSS file, for example, is a whopping 119 KB. While this may not seem especially large compared to image and video files, for a CSS file, that’s enormous!

What it allows you to do to combat this, however, is customize which functionality you want to include in your download. By simply going to their Customize and Download page, you can check off the features you won’t need for your application, trimming the weight off your file and saving your users the additional load time.

Customization is key!

Its community

As with so many open-source projects, Bootstrap has a large community of designers and developers behind it. Being hosted on GitHub makes it easy for developers to modify and contribute to Bootstrap’s codebase. It also makes it easy for people to collaborate, lend their advice, and interact with peers and fellow users.

Bootstrap has an active Twitter page, a Bootstrap blog, and even a dedicated Slack room. And that doesn’t even get into the wealth of developers willing to help with technical problems on Stack Overflow, where all questions can be found under the bootstrap-4 tag.

Its external templates

As its popularity grew, people started creating templates based on Bootstrap in order to accelerate the web development process even further. There are many websites out there dedicated to sharing and buying custom templates based on Bootstrap.

Here are just a few:

W3Schools Bootstrap templates
Start Bootstrap templates
Wrap Bootstrap templates

2. Why might you avoid Bootstrap?

By now, you’re probably thinking that using it is a no-brainer. But remember—there are two sides to every coin. Like almost everything in life, even Bootstrap has its downsides.

Let’s take a quick look at some common complaints you might hear about Bootstrap:

“Its syntax is confusing!”

Before you become familiar with Bootstrap, some of its syntax can be confusing. When using the grid system, for example, in order to make a column that takes up a third of the screen, you have to add the .col-md-4 class to it.

“Wait—4? Where did this 4 come from?!”

Undoubtedly, the four might lead you to believe the column would take up a quarter of the screen—not a third. While this syntax does make sense (Bootstrap uses a 12-column system, and 4 is a third of 12), it can be unintuitive for those new to the whole process.

“Its files are too big!”

As mentioned earlier, Bootstrap files can be a bit, well, large to account for the sheer functionality offered by its framework. This can lead to an increase in load times for websites, especially on slower networks.

Beginners might have a hard time identifying and fixing this issue; however, as mentioned above, the customize tool on Bootstrap’s website can help eliminate any unnecessary code for functions you’ll never use.

So have it your way—just pick out the bits you need and leave the rest. (Of course, this task gets easier the more you know about coding!)

“It keeps me from actually learning code!”

There’s always the risk that, by using Bootstrap, you’ll get into a cycle of simply recycling existing code without actually understanding it. This is the same as using Node.js and other tools before learning JavaScript itself. By spending the time to really learn what you’re doing, however, you can use Bootstrap as a way of accelerating your learning, rather than hindering it.

3. Wrapping it all up

As you’ve probably noticed by now, Bootstrap is a powerful tool that allows a developer to get up and running quickly and painlessly. It makes it easy to integrate many great features that enrich a user’s interaction with the web without having to code them from scratch.

Bootstrap is immensely popular and has been used to build some great websites. Don’t believe us? Check out MongoDB’s website, the NASA website, or even FIFA’s.

What You Should Do Now

If you want to become a web developer then first of all you need to follow this roadmap to achieve success.

Learn HTML
Learn CSS
Learn JavaScript
Build Projects
Learn Advanced JS(OOPS, AJAX, Promises, currying, closures, etc)
Learn Bootstrap or Tailwind
Build Projects
Learn Any Frontend Framework(Reactjs)
Clone your Favourite Website.
Learn Backend Framework(Django or Nodejs or anyone)
Start building real-world web apps
Revise and Repeat

If you like our post, please give it a like and follow our page for more blogs.

What is Bcrypt. How to use it to hash passwords

Shubham Sharma — Thu, 17 Nov 2022 09:01:00 +0000

The bcrypt npm package is a JavaScript implementation of the bcrypt password hashing function that allows you to easily create a hash out of a password string. Unlike encryption which you can decode to get back the original password, hashing is a one-way function that can’t be reversed once done.

When the user submits a password, the password will be hashed and your JavaScript application needs to store the hash in the database. Later when the user wants to authenticate his or her account, you need to compare the password input with the hash stored in your database to see if it matches.

The bcrypt library makes the process easy by providing you with methods to hash and compare passwords.

** To start using the library, you need to install it with your package manager: **

npm install bcrypt
# or
yarn add bcrypt

** Then include the module to your JavaScript code with require: **

const bcrypt = require("bcrypt");

Creating a password hash with bcrypt

To generate a password using the bycrypt module, you need to call on the hash() method which accepts the following three parameters:

The password string that you wish to hash
The number of rounds to secure the hash. The number commonly ranges from 5 to 15
The callback function to execute when the hash process is finished, passing along the error message and the hash result

Here’s an example of bcrypt.hash() processing the password string "generic":

const bcrypt = require("bcrypt");

bcrypt.hash("generic", 5, function (err, hash) {
  console.log(hash);
  // TODO: Store the hash in your password DB
});

Or you can use the synchronous method equivalent called hashSync():

const bcrypt = require("bcrypt");

const myPlaintextPassword = "generic";
const hash = bcrypt.hashSync(myPlaintextPassword, 5);
console.log(hash);

Generating salt for the hash

A hashing function requires you to add salt into the process. A salt is simply a random data that’s used as an additional input to the hashing function to safeguard your password. The random string from the salt makes the hash unpredictable.

In the code examples above, the salt is auto-generated by bcrypt module, but you can actually generate the salt first before hashing the password.

To generate a salt, you can use the genSalt() method from the module:

const bcrypt = require("bcrypt");

bcrypt.genSalt(10, function (err, salt) {
  console.log(salt); // the random salt string
});

Once you have the salt, you can pass it to the hash() method as follows:

const bcrypt = require("bcrypt");

bcrypt.genSalt(10, function (err, salt) {
  bcrypt.hash("generic", salt, function (err, hash) {
    console.log(hash);
    // Store hash in your password DB.
  });
});

There’s also a synchronous equivalent for the method called genSaltSync():

const salt = bcrypt.genSaltSync(10);
const hash = bcrypt.hashSync("generic", salt);

Note that there’s no differences on the resulting hash whether you generate a salt separately or automatically, but the CPU usage may be lowered when you separate the salt generation and the hash process. You should test if your NodeJS server can handle auto-generating the salt and hash first before separating them.

A note on the salt round number

The salt generation for your hash function can range from a few seconds to many days, depending on how many rounds you passed. The bcrypt module will go through 2^rounds to generate the salt to give you a secure hash.

According to the documentation, here’s the amount of time to process the salt generation on a 2GHz core computer:

rounds=8 : ~40 hashes/sec
rounds=9 : ~20 hashes/sec
rounds=10: ~10 hashes/sec
rounds=11: ~5  hashes/sec
rounds=12: 2-3 hashes/sec
rounds=13: ~1 sec/hash
rounds=14: ~1.5 sec/hash
rounds=15: ~3 sec/hash
rounds=25: ~1 hour/hash
rounds=31: 2-3 days/hash

The number is just an estimation, so you may want to test the highest rounds with the fastest generation time that your server can support.

Verifying a password with bcrypt

Once you saved the hash to the database, you can compare the user’s plain text input with the stored hash using the compare() method.

The compare() method accepts three parameters:

The plain string password for comparison
The hash string created earlier
And the callback function once the comparison process is finished

The method will pass the error err object and the boolean value result, telling you whether the comparison matches or not.

Here’s an example of the compare() method in action:

const bcrypt = require("bcrypt");

bcrypt.hash("generic", 5, function (err, hash) {
  console.log(hash);
  // The hash returned, continue to compare
  bcrypt.compare("generic", hash, function (err, result) {
    console.log("generic:", result); // generic: true
  });

  bcrypt.compare("falsy", hash, function (err, result) {
    console.log("falsy:", result); // falsy: false
  });
});

The module also provides the synchronous method compareSync for you to use:

const bcrypt = require("bcrypt");

const myPlaintextPassword = "generic";
const hash = bcrypt.hashSync(myPlaintextPassword, 5);
const result = bcrypt.compareSync(myPlaintextPassword, hash);
console.log(result); // true

After the comparison is finished, you need to provide the right authentication code according to the returned result.

Using promise or async/await instead of callback function

Finally, bcrypt module also supports the use of promise and async/await code style, so you can use them instead of callbacks to make your code cleaner.

Here’s an example of using promises in the hash process:

const bcrypt = require("bcrypt");

bcrypt
  .hash("generic", 5)
  .then((hash) => {
    return bcrypt.compare("generic", hash)
    .then((result) => {
      console.log("generic:", result); // generic: true
    });
  })
  .catch((err) => {
    console.log(err);
  });

And another example using the async/await style:

const bcrypt = require("bcrypt");

async function passwordHashTest(password) {
  const hash = await bcrypt.hash(password, 5);

  const result = await bcrypt.compare(password, hash);
  console.log(result); // true
}

passwordHashTest("generic"); // test the async function

And that’s how the bcrypt module in NodeJS works ;)

If you like our blog post then please follow our page and give a like to this post.

Thanks.

Top 10 ways to become a self-taught developer

Shubham Sharma — Mon, 07 Nov 2022 17:05:35 +0000

Introduction

Hello fellow newbies and self-taught developers, As a rookie, what are your challenges in learning?

My biggest challenges as a self-taught in development were:

No clear path and vision
Lack of structures
No one to hold me accountable
No proper guidance

I was learning alone. No one was there to guide me or share my problems and frustrations. Whenever I get confused and burned out, I procrastinate for days, even weeks, to cool down.
Does it sound familiar to you?

I learned it the hard way, but you don't have to go through what I've been through. Or at least you can avoid spending your time on things that I wish I knew sooner and could do better.
I hope this advice can help and guide you as new self-taught developers.

1. Find your field of interest.

As a self-taught developer and a newbie, I got interested in a few different development fields.
I was at crossroads between choosing to pursue data science or web development.

I learned Python first because I heard that it is a beginner-friendly language. So what can go wrong?
It took me almost two months, and I didn't go far beyond 20% of the programming because it didn't click. And I got frustrated.

Rather than stick to my learning, I switched to the other course.
I am a visual person.
So the fact that I could see "Hello World" rendered on the page for the first time with HTML made my heart jump with excitement.
After trying a couple of languages, I found where my bigger interest lies.

You can read this developer roadmap to give you clearer insight if you haven't found your niche.

2. Stick to your choice and go deep

After trying several languages and finding your niche, stick and go deep into it. Get good at it.
As it takes a lot of time and effort to be a successful programmer so, go deep as you can and try to become a master at one portion or a language.
Once you find the best fit for you then start with it.

3. Find your best time to learn and create a structure

I started to learn to code alone.
At that time, learning in the morning or during the day was almost impossible.
So outside her nap time, I found another time that works for me. And it is around 10:00 PM after everybody in the house sleeps.
Most of the time, I'm already exhausted. But I will intrigue myself to sit and learn for at least half-hour, which usually will increase to one or two hours.
And the learning structure that works for me is to practice what I've learned the day before. Then I add one or two new topics daily instead of cramming some new knowledge.

4. Don't memorize the code just understand how things work

Yes, don't memorize the code just try to understand how code works and internal behaviour so you will get a deep knowledge.
Good to know: Senior developers would still google things.
Because no one knows everything.
Try to understand the concept and the flow.

And google the rest, also the syntaxes, when you get lost as in the programming world every individual does googling every day to find his/her answers so, that’s not the issue.

5. Ask questions or help

I was uncomfortable asking questions because I felt like my questions were "very beginner" or it was "stupid questions." Or I could get, "Have you Google it?".
Little did I know that those thoughts were only playing in my head.

It took me a long time to finally threw my first question.
And when I finally did, it wasn't as bad as I thought.
The first time I asked a question, I threw it on Twitter. To my surprise, I received answers, and some people even offered to walk through the codes with me.

The courses that I took provide Discord channels for their students.
I started to feel more confident in asking questions or asking for help when I needed it there.
So don't hesitate!
When you get stuck for some time, ask for help.

It could be on Twitter or on the Discord channels where you at.
This journey is supposed to be enjoyable, make you grow, and not make you frustrated for too long or even quit.

6. Create projects

A piece of advice that's always been given after learning something is, "Go build a project!".
Self-taught is often get trapped in tutorial hell.
It's a good practice that we code along with a tutorial rather than only watching and doing nothing.

But when it comes to building a project from scratch, there would be times when we don't even know where to start. Then we find ourselves getting back to a tutorial.

When you have an idea for a project, build it and learn things on the go.
But when you don't know what to build, try replicating the tutorial's project without playing it back. Even better, try to add some more features to the project. When you get stuck, google your problems to find solutions.

Give yourself half to one hour to search for it. And only after you searched in that time frame and still don't find any solution, ask for help or look back at the tutorial.
Don't let yourself get lost for too long and get demotivated.

Another tip, when you build a project, breaking tasks into smaller chunks would help you to finish your project quickly and you won't feel bored as this technique is called Divide and Conquer in DSA.

7. Research for Jobs related to your skills

Is your goal to land a job in the web development field?
Then, before you go much further in your learning, you better research job demands in your area.

My goal is to land a job as a full-stack developer.
I learned by following the course's lessons — HTML, CSS, JavaScript, MongoDB, Express, and NodeJS without a front-end framework.

After I finished the course six months later, someone gave me the advice to do my research on web developer jobs in my area.
They said it would help me pick which front-end framework I need to learn since I haven't discovered one.

The result was heartbreaking!
The on-demand front-end jobs in my area are React and Angular, while the backend is Java, PHP, and .NET (C#).

Based on my research, the backend stack that I've learned wasn't on-demand.
So a slight change of plan has to be made.
React is what I'm learning now to be a front-end developer.

8. Find a popular and active community

When you are in a positive and supportive community, you will gain much more than if you are alone.

You have people who genuinely care for you and support your journey. You can ask questions, get help when needed, and have the whole community hold you accountable.

You can also help others who need your support in any way.
With community, you will gain confidence and grow faster.

9. Be patient and kind to yourself

Learning to code is hard for everyone.
There would be times when you have a hard time understanding a concept. There would be lots of times when you have trouble finding solutions. You might cross paths with imposter syndrome.
When they come, don't be too hard on yourself.

Take a break.
Pat yourself on the back.
Remember, where you are today is one step ahead of where you were yesterday.
Don't compare yourself with anybody else.
The only comparison is who and where you are now and before.
Be kind to yourself, always.

10. Last but not the least

Be patient and consistent as it takes a lot of time and effort to be a champ as no one becomes a master in one day. It takes time to build a great personality.
Just trust the process.

I hope you find the above tips helpful, and I wish you a pleasant journey in your learning 😊.

Feel free to add your tips and experience as a self-taught developer in the comment below.
Thanks for reading.

How to find open-source projects to contribute to

Shubham Sharma — Sun, 06 Nov 2022 03:08:20 +0000

Introduction

In this article, we are going to see how you can find open-source communities to contribute to and why you should care about open-source. Open source not only improves your technical skills but also your communication and networking skills. So you can get jobs, clients and the money that you deserve.

It is also very important if you want to land a very high-paying job then if you mention it in your resume then you will have a much higher chance to get hired.

A very common problem people face is finding the right project to contribute to, but don't worry it happens to most people who want to get started with open-source contributions.

What are open-source projects?

An open-source project is a type of project with source code in which you can inspect, modify and implement some new ideas. It is just like social coding.
Basically, it means, it's free to use and free to access to modify.
In GitHub people can not only comment on your code, and fork your code to share it but they can also contribute back to the project by adding some features to it or by fixing some bugs, Just like StackOverFlow where all the developers provide answers to the various problems posted by another developer. A lot of open-source projects are available on popular hosting sites like GitHub, GitLab or SourceForge.

Why one should contribute to open-source projects?

You should care about open-source because you're probably using a lot of open-source tools and projects, and it's great you're are using these amazing open-source tools but they are only there available because people like you who contribute to them.
It's an inclusive community and you get to know and collaborate with people around the world.

Some more advantages are:

Improves your problem-solving skills.
Improves your technical skills.
Helps to gather information about a specific topic.
You will get Industry level experience.

What are examples of some open-source projects?

There are many open-source projects out there, and many of them are likely tools you have used before. These are some popular products that you may be surprised to know are open source.

Android is an open-source operating system in which we can implement our own ideas.
Linux is an open-source kernel and we see so many servers that run Linux.
You may be familiar with JQuery, a JavaScript library that provides many front-end capabilities like animation, less code writing, transformation and much more.
Our popular version control system Git, is fittingly the best example of open-source software.

How this will benefit your career?

Open source is a great way to get real-world software development experience from the comfort of your home. It will enhance your resume very much. You'll get to put on some really big projects that you contributed to. You get the satisfaction that your written code is being used by people around the world.
You get to know networking and making connections from around the world, the internal working of the project, a productive mindset and good communication skills.
You will get good level experience that how actually it works. It will also give a good impression when you discuss your contribution in public.

How to get involved in open source.

The source code for open-source projects is available to anyone -- from the developer just starting out to the developer with decades of experience. So you can contribute at any point in your development career and become a member of the open-source community! Here are a few things to look out for as you search for an open-source project to get involved with.

What to look for in the project?

An open-source license.
Easy to read and unambiguous documentation.
Recent activity.
Activity community or any medium to discuss.
Tagged issues and features to implement.
Piques your interest.

Ideas to contribute to open-source.

Update documentation
Post an issue if you find any.
Fix accessibility issues.
Make the descriptive clean and inclusive.
Use the project to build something useful.

Prerequisites

Prerequisites are git, programming
language of your choice and the tech stack of your choice. e.g Web dev, android development, iOS development, blockchain and machine learning etc. You don't need to be an expert, if you have basic to medium knowledge of your tech stack you can definitely contribute.

** Bonus Tip ** You can also learn some new technologies at this stage such as you can learn iOS development using Swift or Objective C and also it is a demanded skill.

Where to find projects/communities to contribute?

You are not alone if you are wondering where to get started. It can be overwhelming to start coding without knowing what to build or what it takes to build a project.
The best way to find a project is by going backwards and forward and searching for the issues rather than searching for a project directly. The project maintainers who are looking for contributors usually add labels to some issues.

If you are just starting out your open-source journey, then I would suggest you go with good first issue labelled issues. And here is a list of some websites where you can find these good first issues

If you already have a project in mind, then it's best to carefully look at the issues with the label and whether it suits your tech stack or not, And if the answer is yes, then you are good to go.
Hope I have covered your all doubts regarding this topic. If you have any queries, you can directly reach out to me on Twitter or LinkedIn

Thanks for reading this blog.

Important JavaScript Array method

Shubham Sharma — Tue, 11 Oct 2022 17:28:05 +0000

Hello Developers,

While coding you definitely need arrays somewhere in your code. and if you have used arrays, you must know how to work loop over arrays.
So, basically in this blog, we are going to learn about the most used javascript array method. Yes, you have guessed it correctly, it's the map() method.

map()

Remember all the points written below, so you will never confuse about when and where to use the map() method.

It is used to iterate over an array, it's just like forEach() and for of loop.
It does not mutate the original array.
It returns a new array.

Syntax

const array = [2, 4, 5, 6]

// it takes a callback function
// array.map(callbackFn())

// parameters of callback function
// 1. callbackFn(element)
// 2. callbackFn(element, index)
// 3. callbackFn(element, index, arrary)    the 3rd one is the original array where we are using map()

We are going to learn javascript map() with 3 questions.

Question 1

// Create a new array based on the given array with twice every element.
// double [2, 6, 4, 16, 18, 10, 2, 14]

const myArray = [1, 3, 2, 8, 9, 5, 1, 7]

const doubledArray = myArray.map((el) => el * 2)

Question 2

// Create a new array based on the given array with the sum of index + element at that index.
// double [1, 4, 4, 11, 18, 10, 2, 14]

const myArray = [1, 3, 2, 8, 9, 5, 1, 7]

Question 3

// create a new array based on the given array object, the new array should contain 

const items = [
    {
        id: 1,
        fName: 'John',
        lName: 'Doe',
    },
    {
        id: 2,
        fName: 'Julia',
        lName: 'Green',
    },
    {
        id: 3,
        fName: 'Thomas',
        lName: 'Freguson',
    },
    {
        id: 4,
        fName: 'Jane',
        lName: 'Smith',
    },
    {
        id: 5,
        fName: 'Maria',
        lName: 'Reese',
    },
]

const newItems = items.map((el) => `${el.fName} ${el.lName}`)
// ['John Doe', 'Julia Green', 'Thomas Freguson', 'Jane Smith', 'Maria Reese']

Hope you have understood when to use the map() method in javascript

If you have any queries you can post in the comment.

You can also connect with me on LinkedIn and Twitter

High-level overview of Javascript

Shubham Sharma — Thu, 06 Oct 2022 14:17:05 +0000

Javascript is a high-level prototyped-based object oriented multi-paradigm interpreted or just-in-time compiled dynamic single-threaded garbage-collected programming language with first-class functions and a non-blocking event loop concurrency model.

High-Level

Every program on your computer needs hardware resources such as memory and the CPU to do its work. Now, there are low-level languages, such as C where you have to manually manage these resources. e.g asking the computer for memory to create a new variable. on the other side, you have high-level languages such as javascript and python, where we do not have to manage resources at all because these languages have so-called abstractions that take all of the work away from us. This makes the language easier to learn and use, but the downside is that programs will never be as fast or as optimised as C programs.

Garbage collected

Garbage collection is basically an algorithm inside the javascript engine that automatically removed old, unused objects from the computer memory to avoid clogging it up with necessary stuff. So it's a bit like JavaScript has a cleaning guy who cleans our memory from time to time so that we don't have to manually do it in our code.

Interpreted or just-in-time compiled

As we know that the computer’s processor only understands zeros and ones, that’s right. Ultimately, every single program needs to be written in zeros and ones which is also called machine code. And since that’s not really practical to write. We simply write human-readable javascript code, which is an abstraction over machine code, but this code eventually needs to be translated to machine code. And that step can be either compiling or interpreting. This step is necessary in every single programming language because no one writes machine code manually, in the case of javascript, this happens inside the javascript engine.

Multi paradigm

A paradigm is an approach and mindset to structuring code, which will direct your coding style and technique. eg. Procedural programming, object-oriented programming and functional programming. Now, many languages are only procedural or only object-oriented or only functional, but JavaScript does all of it. So it's really flexible and versatile. And so we can do really whatever we want with it. It's our choice. We can use whatever paradigm we want.

Prototype-based object-oriented

So about the object-oriented nature of Javascript, it is a prototype-based, object-oriented approach. Well, first almost everything in javascript is an object, except for primitive values such as numbers, strings etc. but arrays, e.g are just objects. Have you ever wondered why we can create an array and then use the push method on it? Well, it’s because of prototypal inheritance. Basically, we create arrays from an array blueprint, which is like a template and this is called the prototype. This prototype contains all the array methods and the arrays that we create in our code and then inherit the methods from the blueprint so that we can use them on the arrays.

First-class function

It just simply means that functions are treated as regular variables., So we can pass functions into other functions and this is extremely powerful because it allows us to use a lot of powerful techniques and also allows for functional programming

Dynamic

Dynamic actually means dynamically typed, in javascript we don’t assign data types to variables. Instead, they only became known when the javascript executes out code. Also, the type of variables can be easily changed as we reassign variables, and this is basically whey dynamically typed means.

Single-threaded & Non-blocking event loop

It just means that javascript can do one thing at one time. So basically, the thread is where our code is actually executed in a machine’s processor. all Right. But what if there is a long-running task? like fetching data from a remote server? Well, it sounds like that would block the single thread where the code is running. But of course, we don’t want that. What we want is so-called non-blocking behaviour. Well by using a so-called event loop. The event loop takes long-running tasks, executes them in the background and then puts them in the background and then puts them back in the main thread once they are finished.

Source: Jonas Schmedtmann Udemy Course

Feel free to connect me on LinkedIn, Twitter and My website