DEV Community: Roshan Kr Soni

Understanding Big O Notation for Frontend Developers

Roshan Kr Soni — Thu, 23 Jan 2025 16:09:55 +0000

Understanding Big O Notation for Frontend Developers

Hey there, fellow frontend developers! Today, I want to talk about something that might sound a bit intimidating at first, but it's super useful once you get the hang of it: Big O notation. Don't worry, I'm going to break it down in simple terms, and we'll look at some JavaScript examples to make it crystal clear.

What is Big O Notation?

Big O notation is like a time guesser for your code. It helps us predict how our functions will perform as the amount of data they process grows. Think of it as knowing how long it'll take to find a friend in a crowd if the crowd keeps getting bigger. Here's how it works in simple terms:

O(1) - Constant Time: This is when your function performs the same amount of work no matter the size of the input. It's like looking up a key in a dictionary; it's instant!
O(n) - Linear Time: Here, the time grows with the size of the data. Imagine checking every item on a shopping list; the more items, the longer it takes.
O(n^2) - Quadratic Time: This is when you're doing something for each item, and for each of those, you're doing it again for every other item. It's like comparing every card in a deck with every other card to sort them.

Let's dive into some JavaScript examples to see these in action.

Examples in JavaScript

O(1) - Constant Time Example

function getFirstElement(arr) {
  return arr[0];
}

let myArray = [1, 2, 3, 4, 5];
console.log(getFirstElement(myArray)); // This is O(1), it always takes the same time

In this example, no matter how large myArray gets, accessing the first element is always instant.

O(n) - Linear Time Example

function findItem(arr, item) {
  for(let i = 0; i < arr.length; i++) {
    if(arr[i] === item) return true;
  }
  return false;
}

let shoppingList = ['apple', 'banana', 'orange', 'grape'];
console.log(findItem(shoppingList, 'banana')); // O(n), depends on how many items we need to check

Here, we're looking through each item in the list until we find 'banana'. If the list grows, so does the time to search through it.

O(n^2) - Quadratic Time Example

function bubbleSort(arr) {
  for(let i = 0; i < arr.length; i++) {
    for(let j = 0; j < arr.length - i - 1; j++) {
      if(arr[j] > arr[j + 1]) {
        // Swap elements
        let temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
  return arr;
}

let unsortedArray = [64, 34, 25, 12, 22, 11, 90];
console.log(bubbleSort(unsortedArray)); // O(n^2), because we're comparing each with each

Bubble sort is a classic example of O(n^2). We're going through the array multiple times, comparing each element with every other element, which can get quite slow as the array size increases.

Why Should We Care?

As frontend developers, our job often involves making things look good and work smoothly. Big O notation helps us:

Optimize Performance: Knowing if a function will slow down as data grows helps us choose better algorithms or data structures.

Improve User Experience: Fast code means responsive apps, which is crucial for keeping users happy.

Prepare for Interviews: Big O is a common topic in coding interviews, so understanding it can give you an edge.

As frontend developers, keeping our code efficient can really make a difference in the user experience. Remember, O(1) is super fast, O(n) is okay but scales with data, and O(n^2) can be quite slow. Keep practicing, and soon you'll be thinking about Big O naturally when you're coding away!

🚀 React Native's New Architecture Brings 550% Speed Boost

Roshan Kr Soni — Mon, 11 Nov 2024 15:28:40 +0000

In the world of mobile development, speed and responsiveness are top priorities. React Native, known for bridging the gap between native and JavaScript layers, has just made a major leap forward. With its latest version, React Native introduces a brand-new architecture that’s been years in the making, offering up to a 550% speed increase. This update is now the default for anyone installing React Native, marking a significant shift in how apps are built and optimized. Here’s an in-depth look at how this new architecture is transforming mobile development.

1. ⚡ High Performance Out of the Box

The new architecture in React Native 0.76 has arrived, and it brings significant performance boosts. The old asynchronous bridge that connected JavaScript and native code is now replaced with a faster, synchronous layer, allowing data to flow between JavaScript and the native side without delay. This means smoother animations, quicker responses, and a more fluid experience for users—all while simplifying the developer’s workflow.

2. 🧩 Simplifying Backend Queries with Convex

Handling complex backend infrastructure is now easier, thanks to Convex. Instead of extensive configurations, developers define a query with just a few lines of code and call it directly with the useQuery hook. Convex takes care of the rest, making it easy to manage data without giving up backend control.

3. 🎨 True Native Elements for Authentic User Experience

One key aspect of React Native’s new architecture is its commitment to native rendering. React Native now more directly interfaces with native elements, meaning that buttons, tab bars, and other components match the platform's appearance and behavior more closely. There’s no need for complex bridging—JavaScript now tells the native layer directly what to render, enhancing user experience by feeling "native."

4. 🌀 Improved Animation Engine

React Native’s new animation engine, implemented in C++, handles animations and layout changes across multiple threads. This not only boosts animation smoothness but also allows for better handling of complex visual elements, making it easier to create responsive UIs without lag. Animations and layout transitions can now occur on separate threads, freeing up resources to ensure the main UI remains smooth.

5. 🧵 Multi-Threaded, Concurrent Updates for a Smooth UI

With the new architecture, React Native no longer relies on a single thread for updates. Now, multiple concurrent updates are possible, allowing React Native to process higher-priority tasks without blocking other updates. This means actions like scrolling and tapping remain responsive, even during data-heavy processes, leading to a more natural feel for users.

6. 🔒 Enhanced Type Safety and Cross-Platform Code Sharing

Type safety is now built into the core of React Native’s new architecture. By using C++ as the foundation, developers benefit from seamless type-checking between native and JavaScript layers, which drastically reduces errors and sync issues. Plus, with C++-based modules, cross-platform compatibility has improved, allowing developers to write once and deploy on multiple platforms (Android, iOS, and even Windows) without extra adjustments.

7. 🚀 Automatic Module Loading

React Native modules now load lazily by default, so apps can start faster and reduce initial load times. Modules are only loaded when required, which optimizes memory usage and keeps complexity low, especially in larger applications with a variety of features.

8. 🧰 Better Debugging and Dev Tools

The updated React Native Dev Tools provide a more unified experience, aligning closely with browser-based debugging tools. This improvement simplifies the debugging process across different platforms, allowing developers to resolve issues faster and with more consistency.

9. 🕰️ Gradual Migration Support for Existing Apps

For teams with existing applications, React Native’s new architecture allows for a gradual migration, with an interoperability layer that supports libraries targeting the old architecture. This means existing apps can adopt new features at their own pace, easing the transition and allowing developers to take advantage of the performance improvements without needing a full rewrite.

🚀 How to Generate and Add SSH Keys to GitHub or Bitbucket (MacOS Guide)

Roshan Kr Soni — Wed, 06 Nov 2024 07:16:28 +0000

So, you’re working with GitHub or Bitbucket, and someone on your team tells you, “Hey, add an SSH key to your account.” If that sounds a bit intimidating, don’t worry! I’ll walk you through the entire process in plain, simple steps. By the end, you’ll know exactly how to create an SSH key, add it to GitHub or Bitbucket, and keep your setup secure. Let’s get started!

🔑 What’s an SSH Key, and Why Do You Need One?

SSH keys are a way of securely connecting your local computer to a remote Git server like GitHub or Bitbucket. They allow you to authenticate without entering a password each time, which is not only convenient but also more secure. It’s like having a digital pass that only you can use.

Let’s dive into generating and adding an SSH key!

💻 Step 1: Open the Terminal

On a Mac, you’ll need to use the Terminal to create an SSH key. To open Terminal, press Command + Space, type “Terminal,” and press Enter.

🔨 Step 2: Generate the SSH Key

In Terminal, type the following command:

ssh-keygen -t ed25519 -b 256

Breaking it down:

ssh-keygen is the command to generate an SSH key.
-t ed25519 specifies the type of algorithm to use. ED25519 is more secure than the older RSA algorithm, so we use it here.
-b 256 sets the bit size to 256, which is a solid standard.

Press Enter. You’ll be asked where to save the key. By default, it will go in your ~/.ssh directory. Press Enter to keep it there.

🔒 Step 3: Set a Passphrase (Recommended)

Next, you’ll be prompted to enter a passphrase. This passphrase adds an extra layer of security in case someone gains access to your computer. Type a passphrase, and remember, it won’t show anything as you type (for security). Press Enter, then re-enter the passphrase when prompted.

📋 Step 4: Find and Copy the Public Key

Now, you’ll need to copy the public key. The command below will print it in Terminal so you can copy it easily:

cat ~/.ssh/id_ed25519.pub

Highlight the entire output (which looks like a long string of letters, numbers, and symbols), and copy it.

⚙️ Step 5: Add the Key to Bitbucket

If you’re using Bitbucket, here’s what to do:

Go to your Bitbucket account and click on your profile picture.
Navigate to Personal Settings.
Under Security, find SSH Keys.
Click Add Key.
Paste the public key you copied, and give it a label (e.g., “MacBook Pro”).
Click Add Key.

Done! 🎉

🔗 Step 6: Add the Key to GitHub

For GitHub, the steps are similar:

Go to GitHub and click on your profile picture in the top-right corner.
Click Settings.
Go to SSH and GPG keys in the left sidebar.
Click New SSH Key.
Name your key (e.g., “MacBook Pro”) and paste the key.
Click Add SSH Key.

That’s it! Your SSH key is now linked to GitHub. 🎉

📂 Step 7: Load the SSH Key into Memory

Each time you restart your computer, you may need to load your SSH key into memory. To do this, run the following command in Terminal:

ssh-add

When prompted, enter your passphrase to load the key into memory.

✅ Step 8: Test by Cloning a Repository

To ensure everything’s working, try cloning a repository from GitHub or Bitbucket:

git clone git@github.com:yourusername/yourrepository.git

The first time, it might ask if you trust the host (GitHub or Bitbucket). Type “yes” and hit Enter. If it clones successfully, you’re all set! 👍

💡 Bonus Tip: Create a Separate SSH Key for Each Device

If you’re working on multiple computers, I recommend creating separate SSH keys for each. This way, if one computer is lost or compromised, you can revoke that specific key without disrupting access on your other devices.

🎉 That’s It!

Congratulations! You’ve set up SSH keys for GitHub and Bitbucket. Now you can push, pull, and clone repositories without constantly entering passwords.

If you found this helpful, consider giving a thumbs-up or leaving a comment. Happy coding! 🚀

7 Advanced JavaScript Techniques to Enhance Your Programming Skills in ES6

Roshan Kr Soni — Fri, 12 May 2023 05:56:17 +0000

ES6 is the latest version of the JavaScript programming language. It introduces a number of new features that can make your code more concise, efficient, and expressive. This article will show you seven ES6 tricks that can help you become a better programmer.

1. Use Arrow Functions

Arrow functions are a new type of function introduced in ES6. They provide a more concise syntax and lexical scoping of this compared to traditional anonymous functions. Here's an example:

// Traditional anonymous function
const add = function (a, b) {
  return a + b;
};

// Arrow function
const add = (a, b) => a + b;

2. Use Destructuring Assignment

Destructuring assignment allows you to unpack the elements of an array or the properties of an object into separate variables. This can make your code more concise and readable. Here's an example:

// Without destructuring assignment
const myArray = [1, 2, 3];
const firstNumber = myArray[0];
const secondNumber = myArray[1];
const thirdNumber = myArray[2];

// With destructuring assignment
const [firstNumber, secondNumber, thirdNumber] = myArray;

// Destructuring an object
const { name, age } = { name: "John", age: 30 };

3. Use Spread Syntax

Spread syntax allows you to spread the elements of an array or the properties of an object into another array or object. This can be useful for creating new arrays or objects, or for passing arguments to functions. Here's an example:


// Without spread syntax
const myArray = [1, 2, 3];
const newArray = [];
for (const number of myArray) {
  newArray.push(number);
}

// With Spread Syntax
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

// Spreading properties of an object
const obj1 = { name: "John" };
const obj2 = { ...obj1, age: 30 };

4. Use Rest Parameters

Rest parameters allow you to accept an arbitrary number of arguments into a function. This can be useful for functions that need to handle a variable number of arguments. Here's an example:

// Without rest parameters
function myFunction(firstArgument, secondArgument) {
  console.log(firstArgument, secondArgument);
}

// With rest parameters
function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

sum(1, 2, 3); // Output: 6
sum(4, 5, 6, 7); // Output: 22

5. Use Class Syntax

Class syntax allows you to create classes in a more concise and expressive way. This can make your code more organized and easier to read. Here's an example:

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const person = new Person("John");
person.greet(); // Output: Hello, my name is John.

6. Use Modules

Modules allow you to organize your code into smaller, more manageable units. This can make your code more modular and easier to maintain. Here's an example:


// Without modules
const myFunction = function() {
  console.log("Hello, world!");
};

const myOtherFunction = function() {
  console.log("Goodbye, world!");
};

// With modules
// file1.js
export const add = (a, b) => a + b;

// file2.js
import { add } from './file1.js';

console.log(add(2, 3)); // Output: 5

7. Use Promises

Promises allow you to handle asynchronous code in a more concise and elegant way. This can make your code more robust and easier to understand. Here's an example:

// Without promises
function myAsyncFunction() {
  // Do something asynchronous
  return "Hello, world!";
}

// With promises
async function myAsyncFunction() {
  // Do something asynchronous
  const result = await "Hello, world!";
  return result;
}

// To use the function, await the result
const result = await myAsyncFunction();
console.log(result); // Hello, world!

As you can see, promises make it much easier to handle asynchronous code. It also makes your code more robust and easier to understand.

Conclusion

These are just a few of the many ES6 features that can help you become a better programmer. By learning and utilizing these advanced techniques, you can write more concise, efficient, and expressive code in JavaScript. Keep exploring and experimenting with ES6 to unlock its full potential and enhance your programming skills.

Angular Music Player

Roshan Kr Soni — Fri, 03 Apr 2020 07:35:19 +0000

Hello guys just doing practice on Angular and was thinking to make an open source project so i decided to make a music player, need review on this
also I shared the project's source code with Live Link

DEV Community: Roshan Kr Soni

Understanding Big O Notation for Frontend Developers

Understanding Big O Notation for Frontend Developers

What is Big O Notation?

Examples in JavaScript

O(1) - Constant Time Example

O(n) - Linear Time Example

O(n^2) - Quadratic Time Example

Why Should We Care?

🚀 React Native's New Architecture Brings 550% Speed Boost

1. ⚡ High Performance Out of the Box

2. 🧩 Simplifying Backend Queries with Convex

3. 🎨 True Native Elements for Authentic User Experience

4. 🌀 Improved Animation Engine

5. 🧵 Multi-Threaded, Concurrent Updates for a Smooth UI

6. 🔒 Enhanced Type Safety and Cross-Platform Code Sharing

7. 🚀 Automatic Module Loading

8. 🧰 Better Debugging and Dev Tools

9. 🕰️ Gradual Migration Support for Existing Apps

🚀 How to Generate and Add SSH Keys to GitHub or Bitbucket (MacOS Guide)

🔑 What’s an SSH Key, and Why Do You Need One?

💻 Step 1: Open the Terminal

🔨 Step 2: Generate the SSH Key

🔒 Step 3: Set a Passphrase (Recommended)

📋 Step 4: Find and Copy the Public Key

⚙️ Step 5: Add the Key to Bitbucket

🔗 Step 6: Add the Key to GitHub

📂 Step 7: Load the SSH Key into Memory

✅ Step 8: Test by Cloning a Repository

💡 Bonus Tip: Create a Separate SSH Key for Each Device

🎉 That’s It!

7 Advanced JavaScript Techniques to Enhance Your Programming Skills in ES6

1. Use Arrow Functions

2. Use Destructuring Assignment

3. Use Spread Syntax

4. Use Rest Parameters

5. Use Class Syntax

6. Use Modules

7. Use Promises

Conclusion

Angular Music Player

Open source

Live

Developer Profile