DEV Community: Parth Virgoz

Understanding setInterval and setTimeout: A Comprehensive Guide

Parth Virgoz — Wed, 31 Jul 2024 13:30:00 +0000

In JavaScript, timing functions play a crucial role in creating dynamic and interactive web applications. Two of the most commonly used timing functions are setInterval and setTimeout. While they may seem similar, they serve different purposes and are used in distinct scenarios. In this blog post, we'll delve into the world of setInterval and setTimeout, exploring their syntax, examples, and use cases.

What is `setInterval`?

setInterval is a timing function that executes a specified function repeatedly at a fixed interval (in milliseconds). The syntax for setInterval is as follows:

setInterval(function, delay)

Where function is the code to be executed, and delay is the time interval (in milliseconds) between each execution.

Here's an example of using setInterval to update a clock every second:

// Update a clock every second
setInterval(() => {
  const currentTime = new Date().toLocaleTimeString();
  console.log(currentTime);
}, 1000);

In this example, the setInterval function will execute the code inside the callback function every 1000 milliseconds (1 second), updating the clock with the current time.

What is `setTimeout`?

setTimeout is a timing function that executes a specified function once after a specified delay (in milliseconds). The syntax for setTimeout is similar to setInterval:

setTimeout(function, delay)

Where function is the code to be executed, and delay is the time delay (in milliseconds) before the code is executed.

Here's an example of using setTimeout to display a message after 5 seconds:

// Display a message after 5 seconds
setTimeout(() => {
  console.log("Hello, World!");
}, 5000);

In this example, the setTimeout function will execute the code inside the callback function after a delay of 5000 milliseconds (5 seconds), displaying the message "Hello, World!".

Clearing Timers: `clearInterval` and `clearTimeout`

When using setInterval and setTimeout, it's essential to clear the timers when they're no longer needed to avoid performance issues and memory leaks. Here's how to do it:

`clearInterval`

clearInterval is used to cancel a timer created by setInterval. The syntax is as follows:

clearInterval(intervalId);

Where intervalId is the ID of the timer returned by setInterval.

const intervalId = setInterval(() => {
  console.log("Hello, World!");
}, 1000);

// Clear the timer after 5 seconds
setTimeout(() => {
  clearInterval(intervalId);
}, 5000);

In this example, we create an interval timer that logs "Hello, World!" every second. After 5 seconds, we clear the timer using clearInterval.

`clearTimeout`

clearTimeout is used to cancel a timer created by setTimeout. The syntax is as follows:

clearTimeout(timeoutId);

Where timeoutId is the ID of the timer returned by setTimeout.

const timeoutId = setTimeout(() => {
  console.log("Hello, World!");
}, 5000);

// Clear the timer before it executes
clearTimeout(timeoutId);

In this example, we create a timeout timer that logs "Hello, World!" after 5 seconds. Before the timer executes, we clear it using clearTimeout.

Key Differences

So, what's the main difference between setInterval and setTimeout? Here are the key takeaways:

Repetition: setInterval executes a function repeatedly at a fixed interval, while setTimeout executes a function once after a specified delay.
Interval vs. Delay: setInterval uses an interval (the time between each execution), while setTimeout uses a delay (the time before the first execution).
Use Cases: setInterval is suitable for ongoing tasks, such as animations, polling, or updating data in real-time. setTimeout is better suited for one-time tasks, like displaying a message or hiding an element.

Best Practices and Common Pitfalls

Here are some tips to keep in mind when using setInterval and setTimeout:

Clear timers: Use clearInterval and clearTimeout to cancel timers when they're no longer needed, to avoid performance issues and memory leaks.
Mind the interval: Be cautious when setting short intervals, as they can cause performance issues or even crashes.
Use setTimeout for one-time tasks: If you only need to execute a function once, use setTimeout instead of setInterval.
Avoid multiple timers: Be careful not to create multiple timers with the same interval or delay, as this can lead to unexpected behavior.

Conclusion

In conclusion, setInterval and setTimeout are two powerful timing functions in JavaScript, each with its own strengths and use cases. By understanding the differences between these functions, you can create more efficient, effective, and engaging web applications. Remember to use setInterval for ongoing tasks and setTimeout for one-time tasks, and always follow best practices to avoid common pitfalls.

I hope this guide has helped you grasp the concepts of setInterval and setTimeout.

Styling in React

Parth Virgoz — Fri, 12 Jul 2024 13:30:00 +0000

Styling is an essential aspect of building React applications. You have various options for styling, ranging from traditional CSS to modern CSS-in-JS solutions and component libraries. Let's explore some popular approaches:

Traditional CSS

You can use plain old CSS to style your ReactJS app. Create CSS files and import them into your components. This approach provides familiarity and flexibility but may lack some of the benefits of modern styling solutions.

/* styles.css */
.button {
    background-color: blue;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
}

// App.jsx
import React from "react";
import "./styles.css";

const App = () => <button className="button">Click Me</button>;

export default App;

Inline Styles

Inline styles in React are specified as an object with camelCase properties instead of a CSS string.

const buttonStyle = {
    backgroundColor: "blue",
    color: "white",
    padding: "10px",
    border: "none",
    borderRadius: "5px",
};

const App = () => (
    <>
        <button style={buttonStyle}>Click Me</button>
        <button style={{backgroundColor: "green", color: "white"}}>Click Me</button>
    </>
);

export default App;

CSS Modules

CSS Modules allow you to write CSS that's scoped locally to the component, preventing conflicts with styles in other parts of the application.

/* Button.module.css */
.button {
    background-color: blue;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
}

// Button.jsx
import React from "react";
import styles from "./Button.module.css";

const Button = () => <button className={styles.button}>Click Me</button>;

export default Button;

CSS-in-JS Solutions

CSS-in-JS libraries like styled-components, Emotion, and Linaria allow you to write CSS directly within your JavaScript code. This approach offers scoped styles, dynamic styling, and better component encapsulation.

Styled-components is a library for React and React Native that allows you to use component-level styles in your application. It uses tagged template literals to style your components.

// Example of using styled-components in React component
import styled from "styled-components";

const StyledButton = styled.button`
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
`;

const MyComponent = () => {
    return (
        <div>
            <StyledButton>Click me</StyledButton>
        </div>
    );
};

Styling Libraries

Several CSS-driven styling libraries are available for React developers. These libraries offer pre-styled and utility classes to quickly build attractive interfaces. Some popular options include TailwindCSS, and react-bootstrap. More on Styling Libraries

// Example of using TailwindCSS in React component
import React from "react";

const MyComponent = () => {
    return (
        <div>
            <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                Click me
            </button>
        </div>
    );
};

Component Libraries

Several CSS-driven component libraries are available for React developers. These libraries offer pre-styled components to quickly build attractive interfaces. Some popular options include Chakra UI, MUI, Ant Design, Shadcn, MagicUI, NextUI, StyleX, TailwindUI, HeadlessUI, ArkUI, Reactstrap, Keep React and Aceternity UI. More on Components Libraries

// Example of using Chakra UI components in React
import { Button, Heading } from '@chakra-ui/react';

const MyComponent = () => {
  return (
    <div>
      <Heading size="lg">Welcome to Chakra UI</Heading>
      <Button colorScheme="blue">Click me</Button>
    </div>
  );
};

Choosing the Right Approach

The choice of styling approach depends on your project requirements, team preferences, and design goals. Consider factors such as developer experience, maintainability, and performance when selecting a styling solution for your React application.

An Ultimate Guide to Open Source Contribution for Beginners

Parth Virgoz — Thu, 13 Jun 2024 13:30:00 +0000

Introduction:

Do you ever stop and think about how you could become part of that small group of people who are writing software that governing the digital world?

Open-source projects offer the solution. They work as well-stocked workshops where trained coding engineers from various disciplines collaborate to make and develop useful software products. However, if you have just entered the space, you will notice that it is intimidating. No need to be afraid! By clicking here, you can travel to the far-off world of open source that you will love too even though you may be a newbie in coding or an eager developer wanting to get your feet wet.

Understanding Open Source:
First things first. Open-source is software with a heart that beats transparency. It is like a recipe that is out in the open, and everyone can see the ingredients and modify them to get something even better. Really cool, isn't it?
Choosing Your Adventure:
There are so many projects around that it may be rather difficult to decide which one to join. GitHub, GitLab, and Bitbucket are your playgrounds. Focus on projects that attract you most, where the community welcomes you and the tasks are thrilling.
Getting Your Tools Ready:
It's time to arm yourself! Usually, each project comes with its own installation instructions. However, these are not scary as the majority of them include a very user-friendly guide. Just follow the steps on how to install the tools that you need to begin your project with.
Finding Your Mission:
So, let's go to work now. Here are some great places to start from - "good first issue" or "beginner-friendly." These small papers are task suggestions for newcomers. Find out which of these ideas interests you and start solving the problem!
Crafting Your Contribution:
You're about to get in the action while adding your special touch. Copy the project, make your personal playground branch, and get your hands dirty by experimenting. Don't be afraid to fall into errors; it's indeed the learning curve. At time, you will be good to go, just send off your article with pull request.
Joining the Party:
Through coding, people not only reinforce the project, but they also strengthen the team. Jump into discussions, ask questions, and assist wherever you can. In the open-source community, you can always find someone who is pleasant and who eagerly shares knowledge and opportunities for cooperation.
Embracing Feedback:
The openness of the community allows feedback to be your ally, as in open source. There is no harm in suggesting a few alternatives; ask for opinions, look for useful insights, and adapt your output to new conditions. The piece should be a cooperative effort between the members.
Celebrating Your Victory:
Once you are credited for a pull request, it is time to throw a digital party. Now, you are an official member of the open-source community, a group of tech-savvy people writing the codes of the future.

Conclusion:

Beginners with a burning desire to code, not just the experts, also have a place in the world of open source. So step out of your zone and take a chance. So don't be afraid to take that first step. With this guide as your compass, you're ready to embark on an exciting journey into the world of open source. Happy coding!

Enhancing React Development with npx: A Comparison with npm

Parth Virgoz — Tue, 04 Jun 2024 03:30:00 +0000

Introduction:
In the dynamic world of React development, efficient package management is crucial for streamlined workflows. npm and npx are two essential tools in the Node.js ecosystem, each offering unique benefits. This article delves into the advantages of leveraging npx over npm in React development scenarios.

Why Choose npx for React Development?

When initiating a new React project, utilizing npx create-react-app todo instead of npm create-react-app todo is the preferred method. Here's why:

Latest Version Assurance:

npx ensures the latest version of create-react-app without requiring a global installation.
When executing npx create-react-app todo, the tool checks for the availability of create-react-app globally. If not found, it downloads and executes it temporarily. This guarantees that you always use the most up-to-date version of create-react-app without worrying about version conflicts.

Avoiding Version Conflicts:

Using npm create-react-app todo relies on create-react-app being globally installed, potentially leading to version conflicts.
By contrast, npx create-react-app todo mitigates version conflicts by fetching and executing create-react-app locally, ensuring project integrity and stability.

In summary, npx create-react-app todo offers a seamless, version-agnostic approach to initiating React projects, making it the preferred method for React developers.

Understanding the Difference:

While both npm and npx are integral parts of the Node.js ecosystem, they serve distinct purposes:

npm (Node Package Manager):

npm serves as the default package manager for Node.js and JavaScript.
It facilitates package installation, management, versioning, and publishing, both globally and locally within projects.

npx (Node Package Execute):

npx is a tool bundled with npm (from version 5.2.0 onwards) used for executing npm packages.
Unlike npm, npx allows for the temporary execution of packages without requiring global installation.
It is commonly employed for one-time tasks, such as running commands or scripts from dependencies.

Command Comparison:

To create a new React app using both npm and npx, consider the following commands:

Using npm:

npm install -g create-react-app
create-react-app my-react-app

Using npx:

npx create-react-app my-react-app

Both commands achieve the same outcome of scaffolding a new React project named "my-react-app" in the current directory. However, npx's approach ensures execution with the latest version of create-react-app without the need for a global installation.

Conclusion:
In React development workflows, leveraging npx offers significant advantages over npm, particularly in project initiation and management. By ensuring the latest package versions and mitigating version conflicts, npx enhances development efficiency and project integrity. React developers are encouraged to adopt npx as a preferred tool for executing packages, empowering seamless React project workflows and ensuring consistent project environments.

Run Bun! Command Guide

Parth Virgoz — Tue, 09 Apr 2024 05:30:00 +0000

Bun is designed to start fast and run fast.

Under the hood, Bun uses the JavaScriptCore engine, which Apple develops for Safari. In most cases, the startup and running performance is faster than V8, the engine used by Node.js and Chromium-based browsers. Its transpiler and runtime are written in Zig, a modern, high-performance language. On Linux, this translates into startup times 4x faster than Node.js.

If you want to get rid of all those different commands on each package manager I highly recommend installing SWPM and saying goodbye to package manager confusion. It will do all the command translations for you.

This is a command guide for the npm (Node Package Manager), and yarn (Yet Another Resource Negotiator), to bun (JavaScript runtime).

Note: <package> follow this structure <package[@latest|@#.#.#]>

Package Commands

commands	npm	yarn	bun
clean cache	`npm cache clean`	`yarn cache clean`	`bun pm cache rm`
install from `package.json`	`npm install`	`yarn [install]`	`bun install`
don't read or generate a lockfile	`npm install --no-package-lock`	`yarn install --no-lockfile`	`bun install --no-save`
lockfile is not updated	`npm ci`	`yarn install --frozen-lockfile`	`bun install --frozen-lockfile`
add package	`npm install <package> [--location=global]`	`yarn [global] add <package>`	`bun add <package> [--global]`
add package as `dependencies`	`npm install <package>`	`yarn add <package>`	`bun add <package>`
add package as `devDependencies`	`npm install <package> --save-dev`	`yarn add <package> --dev`	`bun add <package> --dev`
add package as `optionalDependencies`	`npm install <package> --save-optional`	`yarn add <package> --optional`	`bun add <package> --optional`
add exact version	`npm install <package> --save-exact`	`yarn add <package> --exact`	`bun add <package> --exact`
remove package	`npm uninstall <package> [--location=global]`	`yarn [global] remove <package>`	`bun remove [<package>] [--global]`
remove package as `dependencies`	`npm uninstall <package>`	`yarn remove <package>`	`bun remove <package>`
remove package as `devDependencies`	`npm uninstall <package> --save-dev`	`yarn remove <package> --dev`	`bun remove <package> --dev`
remove package as `optionalDependencies`	`npm uninstall <package> --save-optional`	`yarn remove <package> --optional`	`bun remove <package> --optional`
list all package at the top level	`npm list --depth 0 [--location=global]`	`yarn [global] list --depth 0`	`bun pm ls`

Shared Commands

commands	npm	yarn	bun
init or create	`npm init`	`yarn init`	`bun init`
run scripts	`npm run <script>`	`yarn run <script>`	`bun run <script>`
run test	`npm test`	`yarn test`	`bun test`
crate bundle package	`npm build`	`yarn build`	`bun build`
link local package	`npm link [<folder>]`	`yarn link [<folder>]`	`bun link [<folder>]`

Run Remotely

commands	npm	yarn	bun
run package	`npx <package>`	`yarn dlx <package>`	`bunx <package>`

CLI documentation

npm
yarn
bun

Conclusion

Transitioning from npm and yarn to Bun offers developers faster startup times and streamlined commands, thanks to its use of the JavaScriptCore engine and Zig language. Bun simplifies package management while enhancing performance, promising a more efficient JavaScript development experience. Explore Bun's capabilities at bun.sh for optimized workflows and accelerated development.

JavaScript developers must know this Array method!

Parth Virgoz — Thu, 30 Nov 2023 13:30:00 +0000

push(): Adds one or more elements to the end of an array and returns the new length of the array.

let fruits = ['apple', 'banana'];
fruits.push('cherry'); 
// output: ['apple', 'banana', 'cherry']

pop(): Removes the last element from an array and returns that element.

let fruits = ['apple', 'banana', 'cherry'];
let last = fruits.pop(); 
// output: 'cherry', now fruits = ['apple', 'banana']

shift(): Removes the first element from an array and returns that element.

let fruits = ['apple', 'banana', 'cherry'];
let first = fruits.shift(); 
// output: 'apple', now fruits = ['banana', 'cherry']

unshift(): Adds one or more elements to the beginning of an array and returns the new length of the array.

let fruits = ['banana', 'cherry'];
fruits.unshift('apple'); 
// output: ['apple', 'banana', 'cherry']

indexOf(): Returns the first index at which a given element can be found in the array, or -1 if it is not present.

let fruits = ['apple', 'banana', 'cherry'];
let index = fruits.indexOf('banana'); 
// output: 1

includes(): Determines whether an array includes a certain element, returning true or false as appropriate.

let fruits = ['apple', 'banana', 'cherry'];
let hasApple = fruits.includes('apple'); 
// output: true

slice(): Returns a shallow copy of a portion of an array into a new array object.

let fruits = ['apple', 'banana', 'cherry'];
let someFruits = fruits.slice(0, 2); 
// output: ['apple', 'banana']

reverse(): Reverses an array in place. The first array element becomes the last, and the last array element becomes the first.

let fruits = ['apple', 'banana', 'cherry'];
fruits.reverse(); 
// output: ['cherry', 'banana', 'apple']

concat(): Merges two or more arrays. This method does not change the existing arrays but instead returns a new array.

let fruits = ['apple', 'banana'];
let moreFruits = ['cherry', 'date'];
let allFruits = fruits.concat(moreFruits); 
// output: ['apple', 'banana', 'cherry', 'date']

join(): Joins all elements of an array into a string and returns this string.

let fruits = ['apple', 'banana', 'cherry'];
let result = fruits.join(', '); 
// output: 'apple, banana, cherry'

lastIndexOf(): Returns the last index at which a given element can be found in the array, or -1 if it is not present.

let numbers = [1, 2, 3, 2, 1];
numbers.lastIndexOf(2); 
// output: 3

forEach(): Executes a provided function once for each array element.

let fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(fruit => console.log(fruit));
/* output:
'apple'
'banana'
'cherry'
*/

map(): Creates a new array with the results of calling a provided function on every element in the calling array.

let numbers = [1, 4, 9];
let roots = numbers.map(Math.sqrt); 
// output: [1, 2, 3]

filter(): Creates a new array with all elements that pass the test implemented by the provided function.

let numbers = [1, 4, 9];
let bigNumbers = numbers.filter(number => number > 5); 
// output: [9]

reduce(): Applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); 
// output: 10

some(): Tests whether at least one element in the array passes the test implemented by the provided function. Returns a Boolean.

let numbers = [1, 2, 3, 4];
let hasNegativeNumbers = numbers.some(number => number < 0); 
// output: false

every(): Tests whether all elements in the array pass the test implemented by the provided function. Returns a Boolean.

let numbers = [1, 2, 3, 4];
let allPositiveNumbers = numbers.every(number => number > 0); 
// output: true

find(): Returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.

let numbers = [1, 5, 10, 15];
let found = numbers.find(function(element) {
  return element > 9;
}); 
// output: 10

toString(): Returns a string representing the specified array and its elements.

let fruits = ['apple', 'banana', 'cherry'];
let result = fruits.toString(); 
// output: 'apple,banana,cherry'

These methods form the backbone of array manipulation in JavaScript, and knowing how to use them can greatly simplify your coding tasks.

21 Internship Programs to Gain Tech Experience 🚀💯

Parth Virgoz — Tue, 21 Nov 2023 15:54:09 +0000

The challenge of breaking into the tech often revolves around the dilemma of required experience but struggling to gain that experience without an opportunity.

To address this issue I’ve manually curated a diverse list of 21 tech internships from open source to more specified programs by various companies.

I hope this compilation will help you gain valuable experience in the tech industry and allow you to take the first step toward your dream role!

1. Outreachy

Outreachy provides internships in open-source and open science. Outreachy provides internships to people subject to systemic bias and impacted by underrepresentation in the technical industry where they are living.

https://www.outreachy.org/

2. Open Source Promotion Plan

OSPP has united with domestic and international open-source communities to propose project tasks for the development and maintenance of important open-source software.

https://summer-ospp.ac.cn/

3. Winter of Code

GDSC NSEC hosts its annual celebration of the collaborative spirit of communities and open-source technologies, the Winter of Code (WoC). Each year, tentatively in the months of Jan-Feb, they are home to contributors from across the world, looking to contribute to projects dedicated to the event by participating.

https://winterofcode.com/

4. OpenCode IIITA

A month-long program for students to start their journey in the world of open-source. The Only requirement is an enthusiastic heart to learn.

https://opencodeiiita.github.io/

5. Open Summer of Code

A 4-week summer program in July provides Belgian-based students the training, network, and support necessary to transform open innovation projects into powerful real-world services.

https://osoc.be/

6. Google Summer of Code

A global, online program focused on bringing new contributors into open-source software development.

GSoC Contributors work with an open-source organization on a 12+ week programming project under the guidance of mentors.

https://summerofcode.withgoogle.com/

7. Google Season of Docs

Google Season of Docs provides support for open-source projects to improve their documentation and gives professional technical writers an opportunity to gain experience in open-source. Together we raise awareness of open source, of docs, and of technical writing.

https://developers.google.com/season-of-docs/

8. GitHub Octernships Program

The GitHub Octernships program connects students with industry partners in paid professional experiences and mentorship on open source and software development projects.

https://education.github.com/students/octernships

9. Foundation for Public Code Internship program

This program offers you the opportunity to work on high-value public code projects used around the world and improve the role of technology in society. You’ll help to make public-purpose software and policy – used for example in cities and other public organizations – more open and collaborative.

https://publiccode.net/careers/intern.html

10. FOSSASIA Internship Program

In the program, FOSSASIA is looking for people who would like to work on the project they choose continuously. Different from GSoC in the internship it is not only about a specific project proposal. They look for participants who are interested in advancing the project and solving bugs or adding features that are required to bring the project forward.

https://docs.google.com/forms/d/e/1FAIpQLScp8h5SIPVK5G2SAm5vtrv7KLKeOeYTxlZBkDRE6I7Toybt0A/viewform

11. Google - STEP (Student Training in Engineering Program)

STEP (Student Training in Engineering Program), formerly known as Engineering Practicum, is a 12-week internship for first and second-year undergraduate students with a passion for computer science.

https://buildyourfuture.withgoogle.com/programs/step

12. Igalia Coding Experience

The Igalia Coding Experience is a grant program for people studying Computer Science, Information Technology, or Free Software, whether in a formal setting (for example, a college or university) or an informal one (self-teaching).

https://www.igalia.com/coding-experience/

13. CERN Summer Student Programme

If you’re studying computer science, you can join the student program, to work on an advanced IT project and follow IT lectures specially prepared for you by experts at CERN and other institutes.

https://careers.cern/summer

14. FOSSEE GIS Internship

Semester-long internships and Summer fellowships are organized each year. These tasks can involve programming/ scientific computing/ conducting awareness workshops/ collecting data that will be of use to the community.

https://fossee.in/fossee-internships

15. VSRP Internships

This program has over 100 projects spanning 16 STEM disciplines, and each project has its own 'Apply' button. Each project is 3 - 6 months long and includes airfares, flights, housing, health insurance, and a monthly stipend.

https://vsrp.kaust.edu.sa/internship/search

16. Free Software Foundation Internships and Traineeships

Generally open for applications throughout the year. Sometimes they offer longer internships and traineeships, and other times they seek applicants with a specific focus (for instance students for summer internships).

https://fsfe.org/about/jobs/internship

17. OGP Internship

You will have a direct hand working on things that matter. There will be opportunities to learn, contribute, and have the autonomy to work on tech for the public good.

https://www.open.gov.sg/careers/internships/

18. SheCodeAfrica Programs

Programs are specifically designed to empower young African girls and women in tech with the technical and career skills needed to scale in their fields.

https://shecodeafrica.org

19. Layer5 Internship Program

Interns engage as part of the community. Your contributions will affect people you've never met as the Layer5 projects are being broadly referenced and used in organizations large and small.

https://layer5.io/careers/internships

20. Season of KDE

Every year since 2013, KDE Student Programs has been running Season of KDE as a program similar to, but not quite the same as Google Summer of Code, offering an opportunity to everyone (not just students) to participate in both code and non-code projects that benefits the KDE ecosystem.

https://season.kde.org/

21. Summer of Bitcoin

A global, online summer internship program focused on introducing university students to Bitcoin open-source development and design.

https://www.summerofbitcoin.org/

Did you like the resources? Here's more 👇

Over the previous months, I've compiled The Ultimate Bundle with every resource you need from starting to learn to code to landing your dream tech role!

Includes 900+ resources in total, further divided into 99 categories for easier navigation and access! Save 1000s of hours and focus on what matters!

I'm currently offering 50%OFF just for my readers! Don't miss out on this!

⭐ Get it here: Ultimate Resources Bundle to Land a Job in Tech! ⭐

This package includes:

150+ Learning Resources to Learn to Code: A comprehensive collection of resources, including tutorials, articles, and handbooks, to help you master coding and programming languages.

220+ Developer Courses from Top Companies and Universities: A huge list of courses offered by reputable companies and universities, covering a wide range of development topics to enhance your skills and knowledge.

140+ Coding Certificates to Boost Your Resume: Obtain valuable certificates in coding and programming, which can significantly enhance your resume and demonstrate your expertise to potential employers.

110+ Tech Internships to Gain Experience: Explore a wide list of tech internships that offer real-world experience, allowing you to kickstart your career and build a strong foundation in the tech industry.

160+ Interview Essentials for Job Seekers in Tech: A comprehensive guide featuring essential tips, strategies, and resources to help you prepare for and succeed in tech job interviews.

120+ Tech Job Boards to Find Your Dream Role: Discover a wide array of job boards and platforms tailored to tech professionals, making it easier to find the perfect job opportunity in the tech industry.

Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Top Popular Apps Built With React Native

Parth Virgoz — Tue, 14 Nov 2023 13:30:00 +0000

Introduction

React Native is one of the most popular frameworks for developing native apps for Android and iOS. It was developed by the Facebook team as a modern solution for developing native (or, more specifically, native-like) apps for multiple platforms with one codebase. It is a JavaScript-based framework specifically used in the development of applications for two prominent platforms – Android & iOS.

React Native application development gained widespread popularity due to its versatility to help developers cross-platform apps with one codebase.

It is built on top of Facebook’s React JS library, with the enhanced capability to develop native apps. The speed at which applications can be developed is a crucial factor nowadays. React keeps up with the current fast-paced era of app development. Therefore React Native development has gained widespread popularity, making it the second most used framework in recent times.

It empowers over 10+ million websites (including web apps) across the globe – from small to the world’s most powerful tech giants – including Walmart, Tesla, Facebook, etc. Read on to learn about top companies using React Native.

React Native: A Perfect Solution for Multi-platform App Development

With rapidly evolving technology, many businesses often struggle to manage their application to keep up with the latest trends. Without a doubt, native apps have much better performance and offer better performance than hybrid apps, but they are very expensive, not to mention long deployment times.

In today’s digital era, apps come with an overwhelming number of features to help businesses communicate with their target customers and promote and sell their services and products, etc.

However, app development is expensive, mainly when you aim to develop a multi-platform app that can run on two prominent platforms – Android and iOS. In this case, react native proves to be the best solution for millions of companies across the globe.

It enables rapid app development and significantly contributes to app development cost reduction. Here are some top companies that use React Native owing to its versatile nature.

Why is React Native a Popular Choice Nowadays?

You can get developed your apps without employing a separate team of native developers.
React-Native apps are almost as fast as Native apps in terms of performance.
You can combine Native components and React Native to develop a robust and scalable application.
It has backed by Facebook and a large community of developers, making it the sixth most popular framework for app development, as per the Stack Overflow developers survey 2022.
React Native has excellent features, such as live reload and reusable component, that dramatically improves the development process.
Businesses can get their developed in less time for multiple platforms.

Top Companies Using React Native

1. Bloomberg

Bloomberg used it a long back in 2016, with the launch of a revamped app for iOS and Android platforms. The company employed React Native to introduce features such as personalized content, videos, and live feeds.

Before React Native, Bloomberg teams “would have developed the iOS and Android versions in parallel without being able to share most of the code they wrote, leading to delays and repetition,” Lew explains. By comparison, the React Native platform’s unified development capabilities made for a seamless process that allowed each developer to focus on one feature at a time.

2. Facebook

Facebook is the world’s most popular social media platform that connects users across the globe and allows them to interact with each other.

It is obvious Facebook would use it as it developed it. Initially, Facebook developed it for the iOS platform to implement modern web techniques in the mobile app. Sooner after a few months, the company released it for Android app development, making it a cross-platform technology.

Facebook ads manager is entirely built using React Native, while the company used native code and React Native JavaScript in its Facebook Group app.

3. Discord

Discord is a popular instant messaging platform that allows a group of users or community to connect over chat, calls, over video calls. It has more than 200 million monthly active users. It has 4.7 stars and 4.5 stars on the App Store and Google Play Store, respectively, and it is a 99.9% crash-free app.

As stated in the blog published by the Discord team:

React Native has been instrumental in allowing us to achieve this with a team of only three core iOS engineers!

As per the blog post, React Native helped the development team in two ways – firstly, they were able to write applications by using a significant amount of the same code for its Android and iOS app development. Secondly, the app’s performance was remarkably improved.

4. Wix

Wix is a popular website builder platform that includes web design and hosting services to let users create a website quickly using their website design services. It was among the companies that were early adopters of React Native.

It all started in 2015 when the Wix mobile team was small, with only 4 team members. They decided to implement react for the reasons as follows:

To make their mobile app more efficient
To develop the app in less time
To develop the significant part of the app using single code (the team shares over 95% of the business logic codebase for iOS and Android)
To build a scalable application
The Wix app has undergone several changes, and a large number of features were added within a short period of time, leveraging React Native.

Need help from an expert developer?

Hire Now

5. Pinterest

Pinterest is an image-sharing and social platform where you can explore new ideas and save them.

Speaking of Pinterest, initially, the company chose React Native due to its so-called capability of enabling developers to create native-like apps for Android and iOS platforms using a common codebase.

As per the company’s blog, the implementation of React Native resulted in increased development and reduced development costs.

6. Walmart

Walmart is the world’s leading online retail store. It provides users with a website and top-notch mobile apps to shop from their homes.

They switched to React Native to build a scalable application with the growing number of smartphone users. They took advantage of React Native in their Android and iOS app development.

Walmart migrated to React Native in order to increase the development velocity. Also, The company has observed better performance in page transition and a native feel across the app.

7. Instagram

Instagram is another popular example of reacting powered application. It has over 2 billion active users monthly, making it 4th most popular social media platform in the globe in 2023.

After incorporating RN into its Facebook mobile app and Facebook Ads Manager, Meta leveraged its own developed technology to its third platform – Instagram.

They shipped various features to the Instagram app using React Native, like revamping the then-existing edit profile UI, adding a push notification feature, and the product development team used in building various core components.

8. Soundcloud

The team published a blog mentioning why they adopted React Native:

The main driver for us at SoundCloud to use React Native was the lack of enough mobile engineers to start development on a new mobile app.

They adopted React Native to build its SoundCloud Pulse within five months after Facebook made it open-source. Since it was hard to find iOS developers, they didn’t want to have a gap of months between the launch of the Android and iOS apps.

9. Flipkart

Search/Browse is built with react-native, an infinite list of heterogeneous items.

Flipkart is an Indian online shopping portal with active 150+ million per month. The app holds a 4.3 star rating and has over 500 million downloads so far.

Flipkart’s homepage is developed in Native and has built various components using React Native. However, optimized native apps always exceed react-native apps. The company chose React as one of the tech stacks to enhance the app, keeping the factors below in mind.

It would not degrade the performance, and they found it quite true. The app’s performance didn’t degrade even after using a significant amount of code.
Parallel usage of the native components, along with leveraging the React Native features
Ability to push minor changes and OTA instantly

Conclusion

React native is a very powerful and widely praised framework across the globe. In this article, we have listed down some big names that use it in their mobile apps. We have also briefly described some hot features that makes it one of the most sought-after app development stack.

Implement Insertion sort easily in your program

Parth Virgoz — Tue, 07 Nov 2023 13:30:00 +0000

Insertion Sort is a comparison-based sorting algorithm that works by iteratively building a sorted portion of the array or list, one element at a time. It starts with the assumption that the first element is already sorted. Then, it considers the next element and inserts it into the correct position in the sorted portion, shifting other elements as necessary. This process is repeated until the entire array is sorted.

How Insertion Sort Works

Insertion Sort works by iteratively building a sorted portion of the array or list, one element at a time. It starts with the assumption that the first element is already sorted. Then, it considers the next element and inserts it into the correct position in the sorted portion, shifting other elements as necessary. This process is repeated until the entire array is sorted.

Here are the step-by-step operations of Insertion Sort on this array:

Step 1: Start with the second element (2) and compare it with the element in the sorted portion (5). Since 2 is smaller, we shift 5 to the right and insert 2 at the first position: [2, 5, 8, 12, 1].

Step 2: Move to the third element (8) and compare it with the elements in the sorted portion (2, 5). Since 8 is larger, we leave it at its position: [2, 5, 8, 12, 1].

Step 3: Repeat step 2 for the fourth element (12). Since 12 is larger than all the elements in the sorted portion, it remains in its position: [2, 5, 8, 12, 1].

Step 4: Finally, consider the fifth element (1) and compare it with the elements in the sorted portion (2, 5, 8, 12). Since 1 is smaller, we shift all the larger elements to the right and insert 1 at the first position: [1, 2, 5, 8, 12].

After these steps, the array is sorted in ascending order.

Implementation Steps

Step 1: Prompt the user to enter the size of the array by using the input() function and convert it to an integer using the int() function. Store the value in a variable named n.

Step 2: Create an empty list called arr to store the elements of the array.

Step 3: Use a for loop to iterate n times. Inside the loop, prompt the user to enter each element of the array using the input() function, convert it to an integer, and append it to the arr list.

Step 4: Use a for loop to iterate over the range from 1 to n.

Step 5: Inside the loop, store the current element in a variable named current.

Step 6: Create a variable named j and set it equal to i - 1.

Step 7: Use a while loop to compare the element at index j with the current element. If the element at index j is greater than the current element and j is greater than or equal to 0, shift the element at index j to the right by assigning the value of arr[j] to arr[j + 1]. Decrement j by 1.

Step 8: After the while loop completes, insert the current element at the correct position by assigning its value to arr[j + 1].

Step 9: After the outer for loop completes, use another for loop to iterate over the arr list and print each element, separated by a space, using the print() function with the end parameter set to " ".

Code

n=int(input("Enter size of array: "))
arr = []

for i in range(n):
    arr.append(int(input()))

print('Unsorted Array: ')
for i in arr:
    print(i, end=" ")

for i in range(1, n):
    current = arr[i]
    j = i-1
    while(arr[j]>current and j>=0):
        arr[j+1] = arr[j]
        j-=1
    arr[j+1] = current

print('Sorted Array: ')
for i in arr:
    print(i, end=" ")

Example

Enter the size of the array: 5
8
5
6
2
7
Unsorted Array: 8 5 6 2 7
Sorted Array: 2 5 6 7 8

Time Complexity

The time complexity of Insertion Sort is O(n^2) in the worst case and average case. In the best case scenario, when the array is already sorted, the time complexity is O(n).

Conclusion

Insertion Sort is a simple yet efficient sorting algorithm that is particularly useful for small datasets or partially sorted arrays. Its simplicity, in-place sorting capability, and average-case time complexity of O(n) make it a valuable tool for programmers. However, it may not be the best choice for large datasets or arrays that are already mostly sorted.

Implement Bubble sort easily in your program

Parth Virgoz — Tue, 31 Oct 2023 13:30:00 +0000

Bubble sort is a simple and basic sorting algorithm that repeatedly steps through the list to be sorted, compares adjacent elements, and swaps them if they are in the wrong order. This process is repeated until the entire list is sorted. In this article, we will guide you through the implementation of the bubble sort algorithm in Python.

How Bubble Sort Works

Step 1: Start by comparing the first two elements of the list. If the first element is greater than the second element, swap them. If not, leave them as they are.

Step 2: Move to the next pair of elements and compare them. Again, if the first element is greater than the second element, swap them. Otherwise, leave them as they are.

Step 3: Repeat this process for each adjacent pair of elements in the list, moving from left to right. Each time you compare and potentially swap elements, the largest element in the unsorted part of the list "bubbles" up to its correct position at the end.

Step 4: After completing one pass through the list, the largest element will have moved to its correct position at the end. Now, you can ignore this element and repeat the same process for the remaining unsorted part of the list.

Step 5: Continue these passes until the entire list is sorted. In each pass, the largest remaining element will bubble up to its correct position, gradually sorting the list from left to right.

Step 6: The process stops when no more swaps are needed, indicating that the list is fully sorted.

Implementation Steps

Let's dive into the implementation of the bubble sort algorithm:

Step 1: Prompt the user to enter the size of the array by using the input() function and convert it to an integer using the int() function. Store the value in a variable named n.

Step 2: Create an empty list called arr to store the elements of the array.

Step 3: Use a for loop to iterate n times. Inside the loop, prompt the user to enter each element of the array using the input() function, convert it to an integer, and append it to the arr list.

Step 4: Initialize a counter variable, counter, to 1.

Step 5: Set up a while loop that will continue until the counter is less than n.

Step 6: Inside the while loop, use a nested for loop to iterate from 0 to n-counter. This loop will iterate over the unsorted part of the array.

Step 7: Within the nested for loop, compare each element with its adjacent element. If the current element is greater than the next element, swap them. Store the value of the current element in a temporary variable, temp, before swapping.

Step 8: Increment the counter by 1 after the nested for loop completes. This signifies that the largest element has been moved to its correct position at the end of the array.

Step 9: After the while loop completes, use a for loop to iterate over the sorted arr list and print each element, separated by a space, using the print() function with the end parameter set to " ".

Code

n=int(input("Enter size of array: "))
arr = []

for i in range(n):
    arr.append(int(input()))

print('Unsorted Array: ')
for i in arr:
    print(i, end=" ")

counter=1
while(counter<n):
    for i in range(n-counter):
        if(arr[i] > arr[i+1]):
            temp = arr[i]
            arr[i] = arr[i+1]
            arr[i+1] = temp
    counter+=1

print('Sorted Array: ')
for i in arr:
    print(i, end=" ")

Example

Enter the size of the array: 6
10
5
8
3
6
2
Unsorted Array: 10 5 8 3 6 2
Sorted Array: 2 3 5 6 8 10

Time Complexity

The time complexity of the bubble sort algorithm is O(n^2) in the worst and average case. This means that the algorithm's performance decreases significantly as the number of elements increases. However, bubble sort performs well for small-sized arrays or partially sorted arrays.

Conclusion

Bubble sort is a simple and intuitive sorting algorithm that can be easily implemented in Python. While it may not be the most efficient sorting algorithm for large datasets, it serves as a good starting point for understanding sorting algorithms and their implementations. By following the step-by-step guide provided in this article, you can successfully implement bubble sort in Python and sort your lists efficiently.

Implement Selection sort easily in your program

Parth Virgoz — Tue, 24 Oct 2023 13:30:00 +0000

Selection sort is a simple comparison-based sorting algorithm. It works by dividing the input array into a sorted and an unsorted part. In each iteration, it selects the smallest (or largest) element from the unsorted part and moves it to the sorted part. This process is repeated until the entire array is sorted.

How Selection Sort Works

Let's understand the steps involved in the selection sort algorithm:

Step 1: Start with the first element in the array, which is considered the smallest element.

Step 2: Traverse through the remaining elements of the array to find the minimum element.

Step 3: If a smaller element is found, update the minimum element.

Step 4: After traversing the entire unsorted part of the array, swap the minimum element with the first element of the unsorted part. This places the minimum element in its correct position in the sorted part of the array.

Step 5: Repeat steps 2 to 4 for the remaining unsorted part of the array until the entire array is sorted.

Implementation Steps

Let's dive into the implementation of the selection sort algorithm:

Step 1: Prompt the user to enter the size of the array by using the input() function and convert it to an integer using int() function. Store the value in a variable n.

Step 2: Create an empty list called arr to store the elements of the array.

Step 3: Create a loop that iterates n times using the range() function. Inside the loop, prompt the user to enter each element of the array one by one using the input() function, convert it to an integer using int() function, and append it to the arr list.

Step 4: Create a nested loop that iterates through the array elements. The outer loop iterates from index 0 to n-1, and the inner loop iterates from the next element after the current index to n.

Step 5: Inside the nested loop, compare the element at index i with the element at index j. If the element at index i is greater than the element at index j, perform the following steps to swap the elements without using a temporary variable:

Add the element at index j to the element at index i.

Assign the difference of the new element at index j and the original element at index i to the element at index i.

Assign the difference of the new element at index i and the original element at index j to the element at index j.

Step 6: After the nested loop completes, the array will be sorted in ascending order.

Step 7: Create a loop to iterate through each element in the sorted array. Print each element using the print() function and the end parameter to specify a space character as the separator.

Step 8: Run the program and enter the size of the array and its elements when prompted. The program will sort the elements using the selection sort algorithm and display the sorted array.

By following these implementation steps, you can effectively sort an array in ascending order using the selection sort algorithm in Python.

Code

n=int(input("Enter size of array: "))
arr = []

for i in range(n):
    arr.append(int(input()))

print('Unsorted Array: ')
for i in arr:
    print(i, end=" ")

for i in range(n-1):
    for j in range(i+1, n):
        if(arr[i] > arr[j]):
            arr[j] += arr[i]
            arr[i] = arr[j] - arr[i]
            arr[j] -= arr[i]

print('Sorted Array: ')
for i in arr:
    print(i, end=" ")

Example

Enter size of array: 5
64
25
12
22
11
Unsorted Array: 64 25 12 22 11
Sorted Array: 11 12 22 25 64

Time Complexity

The selection sort algorithm has a time complexity of O(n^2), where n is the number of elements in the array. This makes it inefficient for large arrays. However, it performs well for small arrays or when the auxiliary space is limited.

Conclusion

Selection sort is a simple and intuitive sorting algorithm that can be implemented easily in Python. Although it has a time complexity of O(n²), it can be a good choice for small arrays or situations where auxiliary space is limited. Understanding the selection sort algorithm is essential for any programmer's toolkit when working with sorting algorithms.

After reading this you are creating more Repo in Github

Parth Virgoz — Tue, 17 Oct 2023 15:30:00 +0000

GitHub is a cloud-based version control system that allows developers to track changes to their code and manage it across multiple users and teams. It uses Git, a distributed version control system, as its underlying technology.

Creating a repository on GitHub

Once you have signed up for an account on GitHub, you can create a Git repository using the following steps:

Go to https://github.com/new
Add a repository name
Set visibility - Public or Private
Click "Create Repository"

Development

GitHub allows you to create new files on the web.

You can also edit files and create commits on GitHub itself.

But you might feel more comfortable working on a project locally on your machine. To do that you can download or clone the git repository. If you go to your repository's page, you can view the two options under the "Code" button:

downloading the repository downloads the contents of the repository as a zip file but it doesn't contain the git metadata i.e. the .git folder. To download the git repository with the .git data, you need to clone it instead. You can copy the URL to the git repository from the menu option and use the git clone <path> command as follows:

You can now make changes to the repository locally and easily sync these changes from your local computer to GitHub and vice versa.

Pushing Changes to GitHub

Suppose you created some new commits to the local repository on the main branch. To push these changes to GitHub, use git push origin main. If you visit your repository on GitHub, you'll be able to view these new commits.

Let's understand what "origin" means in the above command.

Remotes

Origin refers to a named remote. Remote repositories are versions of your project that are hosted on the internet or network somewhere. They help you collaborate with other developers who all push their changes to this common repository.

You can list all the remotes of a repository using git remote -v.

> git remote -v
origin git@github.com:ihsavru/thecodedose.git (fetch)
origin git@github.com:ihsavru/thecodedose.git (push)

Since you cloned your repository from GitHub, it automatically added a remote to the Git repository living on GitHub. You can create a new remote using git remote add <remote-name> <path>.

Pulling Changes From GitHub

Similarly, you can pull changes pushed by other developers to the origin. To do that, you can use git pull origin . This will create a new merge commit with all the latest changes wrapped in a single commit.

> git pull origin main
remote: Enumerating objects: 34, done.
remote: Counting objects: 100% (34/34), done.
remote: Compressing objects: 100% (23/23), done.
remote: Total 34 (delta 14), reused 26 (delta 11), pack-reused 0
Unpacking objects: 100% (34/34), 18.01 KiB | 9.00 KiB/s, done.

The git pull does two things under the hood:

git fetch - Downloads the contents
git merge - Merges the contents

The Git & GitHub Workflow

Usually if you're working within a team, you start working locally on a new branch instead of main. This is to avoid accidentally pushing changes to the main branch without getting them reviewed by the team or messing up the "source of truth" for other developers.

Since everyone uses the main branch as the source, if anyone accidentally pushes a bad commit to the main branch, it will result in a bug in everyone's development environment hence halting the development process for the team.

After working on your branch, you can push your local branch to the origin using git push origin <branch-name>. This means that now your branch and its commits are also available on GitHub.

You shouldn't directly merge your branch into main. You should create a Pull Request to get your changes reviewed first by the team. Pull requests allows others to review the changes before they get merged into main. To create a Pull Request you need to go the "Pull Requests" tab on your repository and click on "New Pull Request".

Then select the source and destination branches for the merge.

After creating the PR, you can view all the changes in a diff viewer that makes it easy to review the changes. You can also leave comments on the exact lines of code during the review. Someone from the team approves these changes or requests some changes after a code review.

Once approved, you can merge your branch to the main.

DEV Community: Parth Virgoz

Understanding setInterval and setTimeout: A Comprehensive Guide

What is setInterval?

What is setTimeout?

Clearing Timers: clearInterval and clearTimeout

clearInterval

clearTimeout

Key Differences

Best Practices and Common Pitfalls

Conclusion

Styling in React

Traditional CSS

Inline Styles

CSS Modules

CSS-in-JS Solutions

Styling Libraries

Component Libraries

Choosing the Right Approach

An Ultimate Guide to Open Source Contribution for Beginners

Introduction:

Conclusion:

Enhancing React Development with npx: A Comparison with npm

Why Choose npx for React Development?

Understanding the Difference:

Command Comparison:

Run Bun! Command Guide

Package Commands

Shared Commands

Run Remotely

CLI documentation

Conclusion

JavaScript developers must know this Array method!

21 Internship Programs to Gain Tech Experience 🚀💯

1. Outreachy

2. Open Source Promotion Plan

3. Winter of Code

4. OpenCode IIITA

5. Open Summer of Code

6. Google Summer of Code

7. Google Season of Docs

8. GitHub Octernships Program

9. Foundation for Public Code Internship program

10. FOSSASIA Internship Program

11. Google - STEP (Student Training in Engineering Program)

12. Igalia Coding Experience

13. CERN Summer Student Programme

14. FOSSEE GIS Internship

15. VSRP Internships

16. Free Software Foundation Internships and Traineeships

17. OGP Internship

18. SheCodeAfrica Programs

19. Layer5 Internship Program

20. Season of KDE

21. Summer of Bitcoin

Did you like the resources? Here's more 👇

This package includes:

Top Popular Apps Built With React Native

Introduction

React Native: A Perfect Solution for Multi-platform App Development

Why is React Native a Popular Choice Nowadays?

Top Companies Using React Native

Conclusion

Implement Insertion sort easily in your program

How Insertion Sort Works

Implementation Steps

Code

Example

Time Complexity

Conclusion

Implement Bubble sort easily in your program

How Bubble Sort Works

Implementation Steps

Code

Example

Time Complexity

Conclusion

Implement Selection sort easily in your program

How Selection Sort Works

Implementation Steps

Code

What is `setInterval`?

What is `setTimeout`?

Clearing Timers: `clearInterval` and `clearTimeout`

`clearInterval`

`clearTimeout`