DEV Community: Samuel Oyerinde

🚀 Master VS Code on Mac: The Ultimate Keyboard Shortcuts Guide for Next.js & Python Developers

Samuel Oyerinde — Mon, 30 Jun 2025 07:29:29 +0000

Originally published on dev.to

As a developer working with Next.js and Python on macOS, I've discovered that mastering VS Code keyboard shortcuts is one of the fastest ways to supercharge your productivity. Instead of constantly reaching for your mouse, these shortcuts will have you navigating, editing, and debugging code like a seasoned pro.

Quick Mac Tip: Most VS Code shortcuts replace Ctrl with Cmd and Alt with Option on Mac. I'll highlight any exceptions as we go!

Why Keyboard Shortcuts Matter

Before we dive in, let's be honest—learning shortcuts feels tedious at first. But once they become muscle memory, you'll wonder how you ever coded without them. The time you save adds up quickly, especially when you're deep in a coding flow state.

📝 Basic Text Editing: Your Daily Drivers

These are the shortcuts you'll use every single day:

Essential Copy/Paste Operations

Cmd + X - Cut selected text (or entire line if nothing's selected)
Cmd + C - Copy selected text (or entire line if nothing's selected)
Cmd + V - Paste from clipboard
Cmd + A - Select all content in file

Undo/Redo & Comments

Cmd + Z - Undo last action
Cmd + Shift + Z - Redo (Mac's version of Ctrl+Y)
Cmd + / - Toggle line comment (works on multiple selected lines too!)

⚡ Advanced Text Editing: Level Up Your Game

Once you're comfortable with the basics, these shortcuts will make you feel like a coding wizard:

Smart Selection & Autocomplete

Cmd + Space - Trigger autocomplete suggestions
Cmd + . - Quick fix for errors/warnings under cursor
Cmd + D - Select word under cursor, then select next occurrence

Line Manipulation

Cmd + Shift + K - Delete current line (without copying to clipboard)
Cmd + Enter - Insert new line below cursor
Cmd + Shift + Enter - Insert new line above cursor
Option + Up/Down - Move current line up/down

Code Folding & Indentation

Tab - Indent line
Cmd + ] - Increase indentation
Cmd + Option + [ - Collapse code block
Cmd + Option + ] - Expand code block
Shift + Option + A - Block comment selected code

🗂️ Tab Management: Stay Organized

Managing multiple files efficiently is crucial for larger projects:

Opening & Closing Tabs

Cmd + Shift + T - Reopen last closed tab
Cmd + W - Close current tab
Cmd + K, Cmd + W - Close all tabs

Navigation Between Tabs

Ctrl + Tab - Show recent tabs list (note: Ctrl, not Cmd!)
Ctrl + Shift + Tab - Show tabs in reverse order

Panel Management

Cmd + Option + Left/Right - Move tab to left/right panel
Ctrl + 1/2/3 - Switch focus between panels

🎛️ Panel & Sidebar Control

Maximize your screen real estate and access tools quickly:

Terminal & Panels

Ctrl + ~ - Toggle terminal (remember: Ctrl not Cmd)
Ctrl + Shift + ~ - Open new terminal
Cmd + Shift + M - Open problems panel
Cmd + Shift + U - Open output panel

Sidebar Navigation

Cmd + B - Toggle sidebar
Cmd + Shift + E - Focus Explorer
Cmd + P - Quick file search
Cmd + Shift + P - Command Palette (your best friend!)

Settings & Shortcuts

Cmd + , - Open settings
Cmd + K, Cmd + S - View/edit keyboard shortcuts

🔍 Find, Replace & Symbol Navigation

These shortcuts are game-changers when working with large codebases:

Search Operations

Cmd + F - Find in current file
Cmd + Shift + F - Global search across project
Cmd + Option + F - Find and replace in file
Cmd + Shift + H - Global find and replace

Symbol Navigation (Perfect for Next.js components and Python functions!)

F2 - Rename symbol everywhere
Shift + F12 - Show all references inline
Shift + Option + F12 - Open references in side panel
Option + F12 - Peek definition
F12 - Go to definition
Cmd + Click - Go to definition (mouse + keyboard combo)

Symbol Search

Cmd + Shift + O - Search symbols in current file
Cmd + T - Search symbols globally

🎯 Advanced Selection & Multi-Cursor Magic

Multi-cursor editing is where VS Code really shines:

Text Selection

Shift + Arrow Keys - Select character by character
Option + Left/Right - Jump by word
Shift + Option + Left/Right - Select by word
Ctrl + Shift + Left/Right - Expand selection to logical blocks

Multi-Cursor Mastery

Option + Click - Add cursor at click position
Cmd + U - Undo last cursor placement
Cmd + Option + Up/Down - Add cursor above/below

Box Selection

Shift + Option + Drag - Select rectangular text block
Cmd + Shift + Option + Arrows - Adjust box selection

🐛 Debugging Shortcuts

Essential for troubleshooting your Next.js apps and Python scripts:

Debug Control

F5 - Start debugging / Continue execution
Shift + F5 - Stop debugger
F9 - Toggle breakpoint
Shift + F9 - Add inline breakpoint

Step Through Code

F11 - Step into function
F10 - Step over function
Shift + F11 - Step out of function

💡 Pro Tips for Maximum Efficiency

Start Small: Pick 5-10 shortcuts that match your most common actions and practice them for a week.
Use the Command Palette: Cmd + Shift + P is your gateway to discovering new features and their shortcuts.
Customize When Needed: Access Cmd + K, Cmd + S to modify shortcuts that don't feel natural.
Practice with Real Projects: The best way to memorize shortcuts is by using them in your actual Next.js and Python development work.

📚 Additional Resources

Want to dive deeper? Check out these helpful resources:

🎯 Your Next Steps

The journey to keyboard shortcut mastery doesn't happen overnight, but every shortcut you learn is a small investment in your future productivity. Start with the basic text editing shortcuts, then gradually work your way up to the advanced multi-cursor and debugging features.

Which shortcuts are you most excited to try? Drop a comment below and let me know how these shortcuts have improved your development workflow!

Found this helpful? Give it a ❤️ and share it with your fellow developers. Happy coding! 🚀

Tags: #vscode #productivity #macos #nextjs #python #shortcuts #webdev #developer

Next.js Performance Optimization with Real-World Example

Samuel Oyerinde — Sat, 12 Apr 2025 14:25:09 +0000

Introduction

Building a performant web application involves balancing static and dynamic content effectively. Next.js offers a suite of features to achieve this balance, including Streaming React Server Components (RSC), Partial Prerendering (PPR), Incremental Static Regeneration (ISR), Server-Side Rendering (SSR), Static Site Generation (SSG), caching, prefetching, and suspense boundaries. Let's explore these concepts through a real-world example: a blog website with a mix of static and dynamic content.

Scenario: Blog Homepage

Our blog homepage will display:

Static Header and Blog Posts: These are mostly static, updated occasionally.
Dynamic "Latest Comments" Section: This updates frequently.

Step-by-Step Implementation

Step 1: Project Setup

Directory Structure:

   /app
     /layout.tsx         # Root layout for the app
     /page.tsx           # Homepage route
     /components
       /BlogPostList.tsx # Component for rendering the blog post list
       /LatestComments.tsx # Component for rendering latest comments
     /lib
       /data.ts         # Functions to fetch blog posts and comments

Mock Data Source: Use a JSON file or API for blog posts and comments.

Step 2: Define Data Fetching Functions

In /lib/data.ts, create functions to fetch blog posts and comments:

// lib/data.ts
export async function getBlogPosts() {
  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate delay
  return [
    { id: 1, title: "Blog Post 1", content: "This is the first post." },
    { id: 2, title: "Blog Post 2", content: "This is the second post." },
  ];
}

export async function getLatestComments() {
  await new Promise((resolve) => setTimeout(resolve, 1500)); // Simulate delay
  return [
    { id: 1, text: "Great post!", user: "User1" },
    { id: 2, text: "Thanks for sharing!", user: "User2" },
  ];
}

Step 3: Create Components

BlogPostList Component: Use SSG with ISR for blog posts.

   // components/BlogPostList.tsx
   import { getBlogPosts } from "../lib/data";

   export default async function BlogPostList() {
     const posts = await getBlogPosts();

     return (

         Blog Posts

           {posts.map((post) => (

               {post.title}
               {post.content}

           ))}


     );
   }

LatestComments Component: Use SSR with a suspense boundary for dynamic comments.

   // components/LatestComments.tsx
   import { getLatestComments } from "../lib/data";

   export default async function LatestComments() {
     const comments = await getLatestComments();

     return (

         Latest Comments

           {comments.map((comment) => (


                 {comment.user}: {comment.text}


           ))}


     );
   }

Step 4: Build the Homepage

Combine static and dynamic content using Streaming SSR and Suspense.

// app/page.tsx
import { Suspense } from "react";
import BlogPostList from "../components/BlogPostList";
import LatestComments from "../components/LatestComments";

export const revalidate = 600; // Enable ISR

export default async function Home() {
  return (

      My Blog

      {/* Static Blog Posts with SSG + ISR */}


      {/* Dynamic Comments with Streaming SSR and Suspense */}
      Loading latest comments...}>



  );
}

Step 5: Optimize Caching and Prefetching

Prefetching: Use prefetch={true} in links for faster navigation.

   // components/BlogPostList.tsx (updated)
   import Link from "next/link";
   import { getBlogPosts } from "../lib/data";

   export default async function BlogPostList() {
     const posts = await getBlogPosts();

     return (

         Blog Posts

           {posts.map((post) => (



                   {post.title}


               {post.content}

           ))}


     );
   }

Cache Headers for Static Assets: Set cache headers in next.config.js.

   // next.config.js
   module.exports = {
     async headers() {
       return [
         {
           source: "/:path*",
           headers: [
             {
               key: "Cache-Control",
               value: "public, max-age=31536000, immutable", // Cache static assets for 1 year
             },
           ],
         },
       ];
     },
   };

Explanation of Rendering Strategies

SSG with ISR for BlogPostList: Pre-rendered at build time, revalidated every 10 minutes.
Streaming SSR with PPR for LatestComments: Dynamic content is streamed as it becomes available.
Suspense Boundary: Ensures a smooth loading experience by showing a fallback UI.

Benefits

Fast Initial Load: Static content loads immediately.
Dynamic Updates: Fresh data is fetched at request time.
Improved UX: Suspense boundaries prevent page blocking.
Caching: Reduces server requests on repeat visits.
Prefetching: Enhances navigation speed.

Tags:

#NextJS #React #WebDevelopment #PerformanceOptimization #StreamingRSC #ISR #SSG #SSR #SuspenseBoundary #Caching #Prefetching

This approach ensures a fast and user-friendly experience by leveraging Next.js's advanced features to balance static and dynamic content effectively.

Building an API with Express.js and Connecting It to the Frontend

Samuel Oyerinde — Thu, 27 Mar 2025 09:47:56 +0000

Building an API with Express.js and Connecting It to the Frontend

When building modern web applications, APIs serve as the bridge between the backend (server-side logic) and the frontend (user interface). In this blog post, we’ll break down how an Express.js-based API works, its key components, and how it connects to a frontend application.

1. What is a Router in Express.js?

A router in Express.js is a way to organize API endpoints into modular and reusable components. Think of it as a "sub-application" that groups related routes together.

Why Use Routers?
- Keeps code clean and modular.
- Allows you to separate concerns (e.g., authentication routes in auth.js, product routes in products.js).

Example:

const express = require('express');
const router = express.Router();

// Define routes
router.post('/register', (req, res) => {
  res.send('Register endpoint');
});
router.post('/login', (req, res) => {
  res.send('Login endpoint');
});

// Export the router
module.exports = router;

This router can then be mounted in the main app:

const authRouter = require('./routes/auth');
app.use('/api/auth', authRouter);

2. Backend API Workflow

Here’s how a typical authentication API works:

a. POST `/api/auth/register`

Purpose: Registers a new user.
Steps:
1. Check if the email already exists in the database.
2. Hash the password using bcrypt.
3. Save the user to the database.
4. Return a JWT token for future authenticated requests.

b. POST `/api/auth/login`

Purpose: Logs in an existing user.
Steps:
1. Verify if the email exists.
2. Compare the provided password with the hashed password stored in the database.
3. If valid, return a JWT token.

c. GET `/api/auth/user`

Purpose: Fetches data of the logged-in user.
Steps:
1. Validate the JWT token using middleware.
2. Return user data, excluding sensitive information like passwords.

Code Example for /register:

const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');
const User = require('./models/User'); // Mongoose model

router.post('/register', async (req, res) => {
  const { email, password } = req.body;

  // Check if user exists
  const existingUser = await User.findOne({ email });
  if (existingUser) return res.status(400).send('User already exists');

  // Hash password
  const hashedPassword = await bcrypt.hash(password, 10);

  // Save user to database
  const newUser = new User({ email, password: hashedPassword });
  await newUser.save();

  // Generate JWT token
  const token = jwt.sign({ id: newUser._id }, 'secretKey', { expiresIn: '1h' });

  res.status(201).json({ token });
});

3. Connecting the Backend to the Frontend

The frontend communicates with this API through HTTP requests.

Step 1: Registration/Login

The frontend sends a POST request to /api/auth/register or /api/auth/login with user credentials.

Example Frontend Code:

// Register a user
const response = await fetch('/api/auth/register', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ email: 'test@example.com', password: '123456' }),
});

const data = await response.json();
console.log(data.token); // JWT token

Step 2: Storing JWT Token

After receiving the JWT token, store it securely (e.g., in localStorage or cookies):

localStorage.setItem('token', data.token);

Step 3: Making Authenticated Requests

For protected routes like /api/auth/user, include the JWT token in the request headers:

const token = localStorage.getItem('token');

const response = await fetch('/api/auth/user', {
  headers: { Authorization: `Bearer ${token}` },
});

const userData = await response.json();
console.log(userData);

4. Key Components of an Express API

Component	Role
Express Router	Organizes routes into modules for cleaner code.
Bcrypt	Hashes passwords securely before storing them in a database.
JWT (JSON Web Token)	Generates tokens for authenticating users across sessions.
Mongoose Models	Defines schemas for MongoDB collections (e.g., users).
Auth Middleware	Validates JWT tokens for protected routes like `/api/auth/user`.

Summary: Frontend vs Backend Roles

Frontend	Backend
Sends HTTP requests to API endpoints.	Handles requests and sends responses with data/logic.
Stores and uses tokens for auth.	Generates and validates tokens using JWTs.
Displays user data (e.g., profile).	Fetches and secures data from databases like MongoDB.

Why This Matters

Security: Passwords are hashed, and JWT ensures only authenticated users access protected routes.
Scalability: Modular routing and middleware make it easier to grow your application.
Separation of Concerns: The frontend focuses on UI/UX while the backend handles logic and data.

This approach forms the backbone of most modern web apps, enabling seamless communication between frontend interfaces and backend systems.

Tags:

#NodeJS #ExpressJS #API #Authentication #WebDevelopment #FrontendBackendIntegration

Citations:
[1] https://rapidapi.com/blog/nodejs-express-rest-api-example/
[2] https://www.freecodecamp.org/news/the-express-handbook/
[3] https://dev.to/mrrishimeena/understanding-expressjs-router-nodejs-a-comprehensive-guide-59o8
[4] https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction
[5] https://dev.to/reiallenramos/create-an-express-api-static-and-dynamic-routes-33lb
[6] https://www.codecademy.com/article/what-is-express-js
[7] https://www.youtube.com/watch?v=1XxQBXl4Lv8
[8] https://www.freecodecamp.org/news/rest-api-design-best-practices-build-a-rest-api/
[9] https://www.topcoder.com/thrive/articles/routing-in-express-js
[10] https://kinsta.com/knowledgebase/what-is-express-js/

Automated Download Folder Organization with python

Samuel Oyerinde — Fri, 14 Mar 2025 10:03:27 +0000

The Problem

Lately, my Downloads folder had become a chaotic mess. Finding a single file meant endless scrolling and searching—frustrating and time-consuming. But then, I stumbled upon an article on Dev.to about Python automation, which sparked an idea. After some research, I wrote a script that automates the organization of my Downloads folder.

The Solution

The script performs the following tasks:

Scans my Downloads folder
Identifies file types (e.g., PDFs, images, videos, etc.)
Moves each file into its designated folder

Here's a visual representation of how the organized folder structure looks:

Image description

The Code

Step 1: Check Folder Existence and Create Folders

First, we need to ensure the specified Downloads folder exists and create the necessary subfolders if they don't already exist.

import os
import shutil

# Define file types and their corresponding folders
FILE_TYPES = {
    "Documents": ['.pdf', '.docx', '.txt'],
    "Images": ['.jpg', '.png', '.gif'],
    "Videos": ['.mp4', '.mkv', '.avi'],
    "Other": []  # Default folder for unknown file types
}

def organize_downloads(download_folder):
    # Check if the folder exists
    if not os.path.exists(download_folder):
        print(f"The folder {download_folder} does not exist.")
        return

    # Create folders if they don't exist
    for folder in FILE_TYPES.keys():
        folder_path = os.path.join(download_folder, folder)
        if not os.path.exists(folder_path):
            os.makedirs(folder_path)

Step 2: Organize Files

Next, we iterate through all files in the Downloads folder, identify their types, and move them to their respective folders.

    # Iterate through files in the download folder
    for file in os.listdir(download_folder):
        file_path = os.path.join(download_folder, file)

        # Skip directories
        if os.path.isdir(file_path):
            continue

        file_extension = os.path.splitext(file)[1].lower()

        # Find the right folder for the file
        destination_folder = "Other"
        for folder, extensions in FILE_TYPES.items():
            if file_extension in extensions:
                destination_folder = folder
                break

        # Move the file to the appropriate folder
        destination_path = os.path.join(download_folder, destination_folder, file)
        shutil.move(file_path, destination_path)
        print(f"Moved {file} to {destination_folder}")

# Call and run the script
if __name__ == "__main__":
    download_folder = input("Enter the path to your downloads folder: ")
    organize_downloads(download_folder)
    print("Download folder organized successfully!")

What’s Next?

I’m now working on enhancing this script to run automatically based on specific triggers (e.g., time intervals or folder size). The goal is to make file organization completely hands-off, so my system stays organized without any manual intervention.

Share Your Thoughts!

If you’re curious about the code or want to try it out yourself, feel free to adapt it to your needs or suggest improvements—I’d love to hear your thoughts! You can find the code on GitHub: https://github.com/sam4rano/python-automation.

Decoupling Hoisting In React

Samuel Oyerinde — Thu, 23 Mar 2023 19:58:10 +0000

**Table Of Content

Brief overview of hoisting in JavaScript
Explanation of how hoisting works in ReactJS
Hoisting in ReactJS
Benefits of using hoisting in ReactJS
Examples of hoisting in ReactJS
Best Practices for Hoisting in ReactJS
Tips for optimizing performance with hoisting in ReactJS
Conclusion
Reference**

Brief overview of hoisting in JavaScript
Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their respective scope before the code is executed. This means that you can use a variable or function before it has been declared in your code. However, only the declaration is hoisted, not the initialization, which means that if you try to access a variable before it has been assigned a value, it will be undefined. Hoisting can be a powerful tool, but it can also lead to unexpected results if not used properly.

Variable declarations are hoisted to the top of their respective function or global scope.

a. For example, consider the following code

Even though the console.log(x) statement appears before the declaration of the x variable, the code still runs without error because the declaration is hoisted to the top of the function scope.
b. Function declarations are also hoisted to the top of their respective function or global scope. For example, consider the following code:

Even though the example() function is called before it is declared, the code still runs without error because the function declaration is hoisted to the top of the global scope.

Note: It's important to note that while variable and function declarations are hoisted, any assignments or initializations are not hoisted.
For example, consider the following code:

In this code, the declaration of the x variable is hoisted to the top of the global scope, but the initialization of x is not hoisted. As a result, the console.log(x) statement will output undefined because x has not yet been assigned a value.

Explanation of how Hoisting works in React
In ReactJS, hoisting works in a similar way to how it works in regular JavaScript. React components are defined as functions, and just like any other JavaScript function, the function declaration is hoisted to the top of its scope. This means that you can use the component before it has been defined in your code.

Hoisting in React
For example, consider the following React code:

//1. Hoisting a function component
renderMyComponent();

function renderMyComponent() {
  ReactDOM.render(<MyComponent />, document.getElementById('root'));
}

function MyComponent() {
  return <h1>Hello, world!</h1>;
}

In this example, the MyComponent function component is declared after the renderMyComponent function. However, because the function declaration is hoisted to the top of the scope,
the renderMyComponent function can still call the MyComponent component and render it to the DOM.

Benefits of using hoisting in ReactJS

a. Improved code organization: Hoisting allows you to declare variables and functions at the top of a code block, which can make your code more organized and easier to read.

b. Faster execution: Hoisting can improve the performance of your code by allowing the JavaScript engine to pre-process function and variable declarations before executing the rest of the code.

c. Avoiding errors: Hoisting can prevent errors caused by using variables or functions before they are declared, which can be especially helpful in large ReactJS projects.

Example of Hoisting In React

// 2. Hoisting a state variable
import {useState} from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}
export default MyComponent;

In this example, the count state variable is declared and initialized using the useState hook. Even though count is declared after the handleClick function that uses it,
the function can still access count because the declaration is hoisted to the top of the component function scope.

import { useState, useEffect } from "react";
const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  }

  useEffect(() => {
    // do some side effect
  }, []);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}
export default MyComponent;

In this example, the handleClick function is declared below the useState hook, but it can still be called in the JSX element because of hoisting. This improves the organization and readability of the code because related code is grouped together.

Similarly, the useState hook is declared above the handleClick function, but it can still be used in the function because of hoisting.
This allows for more flexible placement of code
and can improve performance by allowing the JavaScript engine to pre-process the hook before executing the rest of the code.

Best practices for Hoisting in React
a. Declare state hooks and other hooks at the top of the component, before any other logic or functions:

import { useState, useEffect } from "react";

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // do some side effect
  }, []);

  const handleClick = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}
export default MyComponent;

b. Declare variables and functions before using them:

import { useState } from "react";

const MyComponent = () => {
  const [count, setCount] = useState(0);

  // Good: Declare handleClick before using it in JSX
  const handleClick = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}
export default MyComponent;

c. Declare functions that use hooks below the hooks they depend on

import { useState, useEffect } from "react";

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // do some side effect
  }, []);

  const handleClick = ()  {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default MyComponent;

d. Avoid declaring functions and hooks inside other functions, as this can make it harder to reason about the code

import { useState, useEffect } from "react";

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    const innerFunction = () => {
      setCount(count + 1); // This won't work as expected
    }

    innerFunction();
  }

  useEffect(() => {
    // do some side effect
  }, []);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}
export default MyComponent;

Tips for optimizing performance with hoisting in ReactJS

Use hoisting with caution and only when necessary to avoid overcomplicating your code.

Be mindful of the order in which your code is executed to avoid unexpected behavior.

Use profiling tools to identify performance issues and optimize your code accordingly.

Conclusion

Hoisting is an important concept in ReactJS that can improve code organization and performance when used properly. It is important to understand the best practices and pitfalls of hoisting to avoid errors and optimize code performance.

Reference
https://facebook.github.io/react/docs/thinking-in-react.html
https://facebook.github.io/react/docs/lifting-state-up.html
https://www.digitalocean.com/community/tutorials/understanding-hoisting-in-javascript
https://react.dev/blog/2023/03/16/introducing-react-dev

Fibonacci Sequence: Algorithm and Python implementation simplified

Samuel Oyerinde — Fri, 22 Jul 2022 17:16:00 +0000

1.1 The Fibonacci Sequence

The Fibonacci numbers, sometimes known as Fn, create a series in which each number is the sum
of the two numbers before it. Although some authors ignore the initial words and begin the sequence
from 1 and 1 or from 1 and 2, the pattern typically starts from 0 and 1.
The following values follow 0 and 1 in the sequence: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34,...

1.2 The previous two digits are combined to yield the following number:

The 1 is found by adding the two numbers that precede it (0+1),
The 2 by adding the two numbers that come before it (1+1),
The 3 by adding the two numbers that come before it (1+2),
The 5 by adding the two numbers that come before it (2+3), and so on!

1.3 Mathematically, Fibonacci can be represented by:

F(1) = 1
F(2) = 1
F(n) = F(n − 1) + F(n − 2)

1.4 pictorial representation

2 Fibonacci Algorithm

2.1 Non-Recursive Iterative Algorithm for Fibonacci
Procedures or subroutines written in a programming language that do not refer to themselves
are known as non-recursive functions.

2.1.1 Algorithm non-recursive Fibonacci

Procedure Iterative_Fibonacci(n):
    int f0, f1, fib
    f0 = 0
    f1 = 1
    display f0, f1
    for int i:= 1 to n:
        fib := f0 + f1   
        f0 := f1
        f1 := fib
        display fib
    END for loop
END Iterative_Fibonacci

2.1.2 Python implementation

num_terms = int(input("Number of terms? "))

# first two terms
f1, f2 = 0, 1
count = 0

# checking for the validity of the number of terms
if num_terms <= 0:
   print("Enter a positive integer")
# if there is only one term, return f1
elif num_terms == 1:
   print("Fibonacci sequence to",num_terms,":")
   print(f1)
# generate fibonacci sequence
else:
   print("Fibonacci sequence:")
   while count < num_terms:
       print(f1)
       nths = f1 + f2
       # update values
       f1 = f2
       f2 = nths
       count += 1

2.2 Recursive implementation of the Fibonacci sequence

Recursion is a powerful programming concept that provides an effective way to solve large problems by
breaking them down into simpler subproblems, using this approach, it's often possible to unravel
seemingly complex problems via repeated application of very simple solutions to the subproblems.
When we speak about recursion in programming, we are simply talking about recursive functions.
A recursive function is a function that calls itself somewhere in its definition, The function is defined in terms of itself.

2.2.1 Properties of Recursion

There must be a reachable base case where the function stops calling itself otherwise infinite loop will occur
The argument of the function must be modified with each call.
Performing the identical operations multiple times with different inputs.
For each step, we apply smaller inputs to reduce the complexity of the problem.

2.2.2 Algorithm of Recursive Fibonacci

START
Procedure Fibonacci(n)
   declare f0, f1, fib, loop 

   set f0 to 0
   set f1 to 1

   display f0, f1

   for loop ← 1 to n

      fib ← f0 + f1   
      f0 ← f1
      f1 ← fib

      display fib
   end for

END

2.2.3 Python implementation

def fibo(n):
   if n <= 1:
       return n
   else:
       return(fibo(n-1) + fibo(n-2))

nterms = int(input('enter an integer? '))

# check if the number of terms is valid
if nterms <= 0:
   print("Please enter a positive integer")
else:
   print("Fibonacci sequence:")
   for i in range(nterms):
       print(recur_fibo(i))

Thanks for reading, kindly follow for more interesting content on Data structure and Algorithm

DEV Community: Samuel Oyerinde

🚀 Master VS Code on Mac: The Ultimate Keyboard Shortcuts Guide for Next.js & Python Developers

Why Keyboard Shortcuts Matter

📝 Basic Text Editing: Your Daily Drivers

⚡ Advanced Text Editing: Level Up Your Game

🗂️ Tab Management: Stay Organized

🎛️ Panel & Sidebar Control

🔍 Find, Replace & Symbol Navigation

🎯 Advanced Selection & Multi-Cursor Magic

🐛 Debugging Shortcuts

💡 Pro Tips for Maximum Efficiency

📚 Additional Resources

🎯 Your Next Steps

Next.js Performance Optimization with Real-World Example

Introduction

Scenario: Blog Homepage

Step-by-Step Implementation

Step 1: Project Setup

Step 2: Define Data Fetching Functions

Step 3: Create Components

Step 4: Build the Homepage

Step 5: Optimize Caching and Prefetching

Explanation of Rendering Strategies

Benefits

Tags:

Building an API with Express.js and Connecting It to the Frontend

Building an API with Express.js and Connecting It to the Frontend

1. What is a Router in Express.js?

2. Backend API Workflow

a. POST /api/auth/register

b. POST /api/auth/login

c. GET /api/auth/user

3. Connecting the Backend to the Frontend

Step 1: Registration/Login

Step 2: Storing JWT Token

Step 3: Making Authenticated Requests

4. Key Components of an Express API

Summary: Frontend vs Backend Roles

Why This Matters

Tags:

Automated Download Folder Organization with python

The Problem

The Solution

The Code

Step 1: Check Folder Existence and Create Folders

Step 2: Organize Files

What’s Next?

Share Your Thoughts!

Decoupling Hoisting In React

Fibonacci Sequence: Algorithm and Python implementation simplified

1.1 The Fibonacci Sequence

1.2 The previous two digits are combined to yield the following number:

1.3 Mathematically, Fibonacci can be represented by:

1.4 pictorial representation

2 Fibonacci Algorithm

2.1.1 Algorithm non-recursive Fibonacci

2.1.2 Python implementation

2.2 Recursive implementation of the Fibonacci sequence

2.2.1 Properties of Recursion

2.2.2 Algorithm of Recursive Fibonacci

2.2.3 Python implementation

a. POST `/api/auth/register`

b. POST `/api/auth/login`

c. GET `/api/auth/user`