How many requests can we safely handle?

Rate limiting is often treated as a simple middleware feature — add a token bucket, set 100 requests/minute, and move on.

But in production systems — especially those running on Kubernetes, backed by databases like RDS, and serving real users — rate limiting becomes a system design decision, not just an API configuration.

In this article, we’ll break down:

• Reactive rate limiting

• Predictive rate limiting

• Adaptive rate limiting

• How they differ

• What production systems actually use

Why Rate Limiting Exists

Rate limiting is not just about stopping abuse.

It exists to:

• Protect infrastructure

• Prevent cascading failures

• Maintain latency SLOs

• Protect downstream dependencies (DB, cache, third-party APIs)

• Ensure fairness across users

If your system can safely handle 50 requests per second, and suddenly receives 200, something will fail:

• CPU saturates

• DB connections exhaust

• Latency spikes

• Timeouts cascade

• Retry storms begin

Good rate limiting prevents that chain reaction.

1️⃣ Reactive Rate Limiting (The Foundation)

What It Is

Reactive rate limiting enforces limits after requests arrive.

It doesn’t predict anything.
It simply checks counters and decides.

Request → Check counter → Allow or Reject

Common Algorithms

• Fixed Window

• Sliding Window

• Token Bucket

• Leaky Bucket

These are deterministic and rule-based.

Example:

If limit = 50 RPS:

The 51st request gets rejected.

No forecasting. No adaptation. Just enforcement.

Strengths

• Simple to implement

• Easy to reason about

• Predictable behavior

• Low operational complexity

Perfect for:

• Internal APIs

• Early-stage products

• Controlled traffic environments

Weaknesses

• Doesn’t anticipate spikes

• Can cause abrupt throttling

• Doesn’t consider system health

• Treats all requests equally

If traffic suddenly doubles, reactive systems only respond once limits are breached.

They don’t prepare.

2️⃣ Predictive Rate Limiting (Anticipating Load)

What It Is

Predictive rate limiting uses historical traffic data to forecast near-future demand and adjust limits proactively.

Instead of asking:

“Are we overloaded right now?”

It asks:

“Will we be overloaded soon?”

Example Scenario

Historical data shows:

• Traffic spikes every weekday at 9 AM

• Friday evenings see 2x normal traffic

• Product launches cause predictable bursts

A predictive system can:

• Increase pod replicas before the spike

• Adjust token bucket size

• Pre-warm DB connections

• Scale caches

Instead of reacting to overload, it prepares for it.

Important Rule:

Predicted demand must never exceed safe system capacity.

The safe formula is:

final_limit = min(predicted_demand, safe_capacity)

Where:

• safe_capacity comes from load testing and SLO analysis

• predicted_demand comes from time-series modeling

If your system can safely handle 50 RPS and the model predicts 60 RPS demand, you either:

Scale capacity to 80 RPS
OR
Cap limit at 50

Prediction never overrides infrastructure reality.

Strengths

• Smoother user experience

• Fewer sudden throttles

• Better alignment with autoscaling

• Good for seasonal traffic

Weaknesses

• Requires high-quality historical data

• Model drift risk

• Operational complexity

• Overengineering for small systems

Best suited for:

• Public SaaS APIs

• Large-scale platforms

• Systems with strong seasonality

3️⃣ Adaptive Rate Limiting (Self-Protecting Systems)

What It Is

Adaptive rate limiting adjusts limits based on real-time system health, not forecasts.

It monitors:

• CPU usage

• Memory pressure

• DB connection pool utilization

• P99 latency

• Error rate

Instead of asking:

“How much traffic is coming?”

It asks:

“How stressed is the system right now?”

Example

If:

• CPU > 85%

• DB pool utilization > 90%

• Latency SLO violated

The system dynamically reduces rate limits.

It actively protects itself.

Conceptual Control Formula

limit = f(system_health_metrics)

For example:

if latency > threshold:
    reduce limit by 20%

This prevents cascading failures.

Strengths

• Automatically protects downstream systems

• Reduces failure amplification

• Prevents retry storms

• Ideal for microservices architectures

Weaknesses

• Can oscillate if poorly tuned

• Harder to debug than static systems

• Requires good observability

Adaptive systems require strong monitoring.

Without metrics, they’re blind.

A Quick Comparison

What Production Systems Actually Do

Most large systems do not pick one approach.

They combine them.

A realistic production model looks like this:

Reactive (base rule)
+ Adaptive (system protection)
+ Predictive (traffic forecasting)

Final decision formula:

final_limit = min(
    safe_capacity,
    predicted_traffic,
    adaptive_health_limit
)

This gives:

• Hard safety guardrails

• Intelligent anticipation

• Real-time protection

A Real Backend Example

Imagine a Kubernetes-based API backed by a relational database.

Your true bottleneck isn’t CPU.

It’s:

• DB connection pool exhaustion

• Lock contention

• I/O saturation

If you only limit by RPS, you may still overload the database.

Better approach:

• Reactive RPS limiter

• Concurrency-based limiter (limit in-flight DB queries)

• Adaptive throttling when latency spikes

Rate limiting must reflect real bottlenecks — not just request count.

Final Thoughts

Reactive rate limiting protects against abuse.
Predictive rate limiting prepares for growth.
Adaptive rate limiting protects the system itself.

You won’t need to import SCSS files for every component, and you’ll also be able to share SCSS styles across components without importing multiple files.

🚀 Step 1: Create a New ReactJS Project

Run the following command to create a new React project named sass-setup:

npx create-react-app sass-setup

After removing unnecessary files, your project structure should look like this:

🚀 Step 2: Install Sass

To install Sass, run:

npm install sass

After installation, convert all .css files to .scss by renaming the file extensions.

Note: Although the preprocessor is called Sass, we use the .scss extension here. The difference between .sass and .scss lies in their syntax. Sass uses indentation-based syntax, while SCSS is more CSS-like, using curly braces and semicolons.

You can read more about SASS vs SCSS here.

🚀 Step 3: Import SCSS Files

Import index.scss in your index.js file:

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.scss';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Similarly, import App.scss in your App.js:

// App.js
import './App.scss';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

// App.scss
.App {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 3rem;
  margin-top: 5rem;
}

🚀 Step 4: Organize Folders

Create the following folder structure:

• components/ → to store React components

• scss/ → to store SCSS files for each component

Create a Home.js component inside the components folder:

import React from 'react';

const Home = () => {
    return (
        <div className="home-container">
            <h1 className='title'>This is home page</h1>
            <p className='sub-title'>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam quaerat quia dolores ut non magni quibusdam sed molestias odio, reprehenderit
                suscipit velit veritatis consequuntur, harum, officia ab similique inventore adipisci.
            </p>
        </div>
    );
};

export default Home;

💡 Understanding Sass and the Power of Partials

Before we style our Home component, it's important to understand how Sass works, particularly the concept of partials.

When you create an .scss file, the Sass preprocessor compiles it into regular CSS that your React app can use.

However, when you create a file prefixed with an underscore—like _home.scss—you're creating a partial file. Partial SCSS files:

• Are not compiled into standalone CSS files.

• Are meant to be imported into other SCSS files.

• Help organize your styles into modular, maintainable chunks.

Why Use Partials?

Instead of importing an SCSS file into every single component, a better approach is to:

1. Create a partial SCSS file for each component (e.g., _home.scss, _about.scss).

2. Import all partials into a single main SCSS file (e.g., styles.scss).

3. Import just the main SCSS file into your root-level component (e.g., App.scss).

This centralizes your styles, reduces repetition, and makes your codebase much easier to manage as your project grows.

🛠️ Let’s Do It

Create two files in your scss/ folder:

• styles.scss – your main stylesheet

• _home.scss – a partial that holds styles specific to the Home component

Add below code _home.scss file.

// _home.scss
.home-container {
    height: 20%;
    width: 30%;
    background-color: grey;

    h1 {
        font-size: 20px;
    }

    p {
        font-size: 15px;
        color: lightblue;
    }
}

In styles.scss, import the partial like this:

// styles.scss
@import 'home';

Now add the Home component in your App component and also import styles.scss in your App.scss

// App.js
import './App.scss';
import Home from './components/Home';

function App() {
  return (
    <div className="App">
      <Home/>
    </div>
  );
}

export default App;

Now, App.scss imports just styles.scss, and all component styles flow through this single point of entry.

// App.scss
@import './scss/styles.scss';

.App {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 3rem;
  margin-top: 5rem;
}

🚀Step 5: Run the App

npm start

You should now see the styled Home component rendered properly.

Now you can see that we did not import the SCSS file directly into your component. Instead, we created a main stylesheet to include all the SCSS files for your components. This approach centralizes your styles, making your codebase more organized and easier to manage.

Add Another Component

Let’s add an About.js component:

// About.js
import React from 'react';

const About = () => {
  return (
    <div className='about-container'>
        <h1>This is a about page</h1>
        <p>My name is siddhant bobde and i like to write technical blogs.</p>
    </div>
  )
}

export default About;

Create _about.scss:

// _about.scss
.about-container {
    height: 30%;
    width: 50%;
    background-color: whitesmoke;

    h1 {
        font-size: 25px;
    }

    p {
        font-size: 20px;
        color: darkgrey;
    }
}

Update styles.scss and add _about.scss file.

// styles.scss
@import 'home';
@import 'about';

Use the newly created component in your App component

// App.js
import './App.scss';
import About from './components/About';
import Home from './components/Home';

function App() {
  return (
    <div className="App">
      <Home/>
      <About/>
    </div>
  );
}

export default App;

Run your code, and you will see the new component below the Home component.

🔁 Reusing SCSS Across Components

Now, let's say you write some styles in _home.scss and want to apply those styles in your About component. You can do this by adding the styles to _home.scss and using the class name in your About component.

Note that you need to ensure the hierarchy of styling classes is correct when styling the component in SCSS. The _about.scss file will have access to all the CSS defined above it, like _home.scss, because the CSS hierarchy follows a top-down approach.

In this way, you can configure Sass in your React.js application. If you have any thoughts or suggestions, please share them in the comments section. Follow me for more technical blogs.

✅ Conclusion

By integrating SCSS effectively in your React application, you can keep your styles modular, organized, and easy to maintain. Using partials and a centralized main stylesheet allows you to avoid repetitive imports and ensures a scalable structure as your project grows. This approach not only improves maintainability but also keeps your styling logic clean and consistent across components.

You can find the GitHub link of the above code here.

Thanks for reading! I hope this guide helped you understand how to set up and manage SCSS in your React projects effectively. If you have any questions, feedback, or suggestions, feel free to leave a comment.

Hello everyone! Today, I am going to show you how you can create a table in ClickHouse from a CSV using Python.

We use WSL to run ClickHouse on Windows. If you want to know how to run ClickHouse on Windows locally, you can check this article https://blog.siddhantbobde.com/clickhouse-windows-installation

Python Setup for clickhouse

I am using VSCode as my Python editor. You can use any editor you like. Create a new Python virtual environment, or you can use your default one.

To connect to the ClickHouse client locally, we need to install the Python library clickhouse-connect.

Run the command below to install clickhouse-connect.

pip install clickhouse-connect

Now, let's connect to our local ClickHouse client using Python.

Create a Python file and add the code below to establish a connection with ClickHouse.

Make sure your ClickHouse is running locally.

# import the package
import clickhouse_connect

# Create a connection
clickhouse_client = clickhouse_connect.get_client(host='localhost', database="default", username='default')

Creating table using csv file.

Lets create a csv having random data. I am using https://www.mockaroo.com/ to generate random data.

I have uploaded my CSV file here. After creating your own test data or downloading test data from the link I've provided, you have to copy the file into your Ubuntu environment.

You can access your ubuntu environment from your file explorer or you can type \\wsl$ in windows run command.

then you have to put csv file in user-files folder in ubuntu environment you have created.

The path will be \Ubuntu\home\{your ubuntu user}\user_files

Now lets write one python script to create a table from csv and insert data into it.

import clickhouse_connect

# Connect to clickhouse client. Below are the default credentials of clickhouse.
clickhouse_client = clickhouse_connect.get_client(host='localhost', database="default", username='default')

# put your table name and file name
table_name = 'testdata'
file_name = 'testdata.csv'

# Query to column names and their data types from file.
result = clickhouse_client.query('DESCRIBE TABLE file({0}, CSVWithNames)'.format('testdata.csv'))
columns_and_types = result.result_rows

# Create table query
create_table_query = 'CREATE TABLE {0} ('.format(table_name)

# Select query to select data from file
select_data_query = 'SELECT '

for column in columns_and_types:
    column_name = column[0]
    column_type = column[1]

    create_table_query += column_name + ' ' + column_type + ', '
    select_data_query += column_name + ', '


create_table_query = create_table_query[:-2] + ') ENGINE = MergeTree() ORDER BY tuple() AS '
select_data_query += " FROM file('{0}', CSVWithNames)".format(file_name)
create_table_query += select_data_query

print(create_table_query)

clickhouse_client.query(create_table_query)

After running above python script you can check if your table is created or not. Run following query to print all table names

show tables

After running above query you will see all the table names and check if your table name is present here.

To get the data from the table we created we can run a simple sql like query.

SELECT * FROM testdata limit 5

Note: I have added limit 5 so that i can show you the full output of query. You can run query without adding the limit.

If you have any doubts regarding the blog, comment down below. I will do my best to answer them.

Have you ever needed to stage only specific files in Git but found it tedious to manually copy and paste file paths, especially when they are in different folders? If so, I have a simple solution for you!

I’ve created a Bash script that streamlines this process by prompting you, file by file, and letting you decide whether to stage each one by simply entering 'y' (yes) or 'n' (no).

This eliminates the need to repeatedly run git status and git add with manually copied file paths.

Let's dive in!

Note: While many IDEs offer selective staging, this script is a great alternative for those who prefer working in the terminal. It will save you time and effort.

The Script

Here’s a Bash script that asks you whether to stage each modified file:

#!/bin/bash

# Check if the current directory is a Git repository
if ! git rev-parse --is-inside-work-tree > /dev/null 2>&1; then
    echo "Not a Git repository. Please navigate to a Git repository."
    exit 1
fi

# Get the list of modified files
modified_files=$(git diff --name-only)

# Check if there are any modified files
if [ -z "$modified_files" ]; then
    echo "No modified files to stage."
    exit 0
fi

# Loop through each modified file
for file in $modified_files; do
    read -p "Do you want to stage the file '$file'? (y/n): " answer
    if [[ $answer == "y" ]]; then
        git add "$file"
        echo "'$file' has been staged."
    else
        echo "'$file' has not been staged."
    fi
done

Adding the Script to System Variables

To make this script accessible from anywhere in the terminal, add its path to your system variables.

Steps for Windows Users

1. Right-click "This PC" or "Computer" in File Explorer.

2. Click "Properties" → "Advanced system settings" → "Environment Variables".

3. You can also search for "Edit environment variables for your account" in Windows.

4. Under System Variables, find and double-click "Path".

5. Click "New", then add the folder path where your script is saved (e.g., C:\customScripts).

6. Click OK to save the changes.

Creating a Global Alias in Git Bash

To make running the script even easier, you can create a global alias in Git Bash.

Step 1: Open Git Bash and Edit .bashrc File

Run the following command

nano ~/.bashrc

(If nano is not available, use another text editor like vim.)

Step 2: Add Your Alias

At the end of the .bashrc file, add this line:

alias stage-files='bash /c/customScripts/git_stage_files.sh'

Note: In Git Bash, Windows paths use forward slashes (/), and C: drive paths start with /c/.

Step 3: Save and Exit

• If using nano, press CTRL + X and then Yes to save

• If using vim, press Esc, type :wq, and hit Enter.

Step 4: Reload the .bashrc File

Run the following command to apply the changes:

source ~/.bashrc

How to Use the Script

Now, whenever you want to selectively stage files, just run:

stage-files

This will list all modified files and ask you whether to stage each one.

Conclusion

This simple script makes it easy to stage specific files in Git without manually copying file paths. If you're a terminal user, this method will help you work more efficiently.

If you encounter any issues, feel free to ask in the comments section.

Happy coding! 🚀

Why I Started This Challenge?

I always wanted to excel in problem-solving and data structures and algorithms (DSA). However, after securing an internship, I completely stopped practicing DSA problem solving. I wanted to get back into problem-solving, but I struggled with consistency. Some days, I would solve a few problems, but then I wouldn’t touch them the next day, and this lack of routine hindered my progress.

Additionally, I believed that consistent problem-solving would help me think more critically at work, improve my problem-solving speed, and enhance my coding efficiency. So, I decided to take on a 30-day challenge of solving one LeetCode problem every day, while posting daily updates on Twitter to keep myself accountable.

Strategy

On weekdays, I dedicated about 30 minutes each day to solving a problem. If I couldn’t come up with a solution within that time, I would refer to the solution.

Why only 30 minutes?

1. My work hours were from 10 AM to 7 PM, and I also had other side projects to work on.

2. I wanted to stay engaged. Spending too much time on a problem could lead to burnout and loss of interest, which would make me give up entirely.

3. Keeping the streak alive motivated me to stay consistent with problem-solving.

On weekends, I had more time to focus on problem-solving. I also started participating in LeetCode’s weekly coding contests. These contests helped me test my skills under pressure.

What Kept Me Motivated?

Initially, my daily Twitter updates kept me accountable during the first 30 days. After a month, I decided to extend the challenge to 60 days. When I reached 60 days, I stopped posting updates on Twitter, but by then, solving problems daily had become a habit.

The streak itself became a powerful motivator. It felt almost impossible to let a day pass without solving a problem. Even on days when I didn’t have access to my laptop, I used my phone to copy and paste code just to maintain the streak. I probably did this for around 20 problems over the year, and I think that’s fine—it was more important to me to keep going than to give up.

Results After One Year of Consistency

1. Easy Problems: Over time, I became faster at solving easy problems. I also started exploring different approaches and focusing on finding the most optimal solutions.

2. Medium Problems: I used to struggle with these problems, but now I can solve them with some effort.

3. Hard Problems: Initially, I wouldn’t even attempt hard problems. Now, I at least try to come up with a solution. While I may not always pass all test cases, I am getting better at approaching them.

4. Thinking and Problem-Solving: My ability to think in different directions while solving problems has improved. I’m now more comfortable using data structures like stacks, queues, priority queues, etc to optimize solutions.

5. Mastering Difficult Topics: I used to struggle with topics like depth-first search (DFS), backtracking, dynamic programming, and graph problems. Now, I can write DFS and backtracking code within minutes, and I’m much more confident in solving dynamic programming problems.

6. LeetCode Contests: I didn’t participate in any LeetCode contests for four to five months during the challenge. When I started again, I noticed an improvement—I could solve two to three questions per contest, compared to just one before.

Why a Daily LeetCode Challenge and Not a DSA Sheet?

It really depends on your goal with DSA.

1. If you're preparing for interviews, a DSA sheet is a great choice.

2. If your goal is to get better at problem-solving, improve your critical thinking, or build a habit of daily practice, then a daily LeetCode challenge is a better option.

3. If you want to stay in touch with DSA, regularly solving a LeetCode problem ensures you're consistently practicing even if it's just for 30 minutes a day.

4. If you're interested in competitive programming, participating in LeetCode’s weekly and bi-weekly contests can help you practice solving problems under time pressure and measure your performance against other competitive coders.

My reasons are 2 and 3.

Conclusion

This challenge has significantly improved my DSA skills and my overall problem-solving ability. Not only has it made me faster and more efficient at solving problems, but it’s also changed how I approach complex coding challenges. It’s been an incredibly rewarding experience, and I’m excited to keep pushing myself further.

Let's take an example. I have a counter app with two states.

1. count state

2. data state

import React, { useState } from 'react'

const Counter = () => {
    const [count, setCount] = useState(1);
    const [data, setData] = useState(console.log("expensive operation"));

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={() => {
                setCount(prevCount => prevCount + 1);
            }}>
                +
            </button>
        </div>
    )
}

export default Counter

Whenever the app loads, it initializes the count and data states. Now, click the + button to increase the count, and it will re-render the counter component with the new state values.

Check the console, whenever you click the plus button, the data state is initialized again and again. This can impact the performance of our app if the operation is time-consuming or expensive.

So, how can we improve this? How can we initialize states that are expensive to set up only once?

This is where the concept of lazy state initialization comes in.

How to implement React lazy state initialization?

React provides a way to initialize the state lazily by passing a function to the useState hook. This function is called only once when the component is first rendered, and its return value is used as the initial state.

const [count, setCount] = useState(1);
const [data, setData] = useState(() => {
    const expensiveData = computeExpensiveData();
    return expensiveData();
});

As you can see in the code above, I passed a function to the state instead of a direct value.

How it works?

1. Without Lazy initialization: If you just pass a value directly to 'useState', it would compute that value every time the component re-renders, which could be wasteful if the computation is expensive.

     const [data, setData] = useState(computeExpensiveData());
   

2. With Lazy initialization: By passing a function to 'useState', the computation inside the function only occurs once during the initial render.

    const [data, setData] = useState(() => computeExpensiveData());
   

When (and When Not) to Use Lazy State Initialization

• When to Use:

  • Use lazy state initialization when the state setup is expensive and should only be done once.

    • Fetching data from the browser's local storage.

    • Fetching data from an API or database.

• When Not to Use:

  • Using lazy state initialization for every state may complicate things.

  • For simple or static initial states, lazy initialization may not offer any significant performance improvement.

Benefits of Lazy State Initialization

1. Performance Optimization

   • As the expensive computation while the initializing state will be done only once when the app renders for the first time, it will increase the performance of the app significantly.

2. Efficient Resources Usage

   • If you need to fetch data from an API or the browser's local storage and set it in the state only when the app loads for the first time, you can use lazy initialization or you can use the useEffect hook as well.

3. Imporved User Experince:

   • It reduces the time needed to load the entire app, providing a better user experience.

ClickHouse Installation

1. To run ClickHouse, we need a Linux environment. Therefore, we will download WSL (Windows Subsystem for Linux), enabling us to run a Linux environment on Windows.

2. Open Command Prompt in administrator mode by right-clicking and selecting "Run as administrator." Then, type the command "wsl --install."

wsl --install

You will see something like this

3. After that, you will need to create a Linux user and set a password for that user. Create a user with any name you want and set a password that you will remember, as you may need this password for installing any other libraries in your subsystem.

   Now run the below command to install ClickHouse

curl https://clickhouse.com/ | sh

4. After installation is completed. Start the clickHouse server.

./clickhouse server

5. Keep this server running in the background, open new Linux terminal and run the ClickHouse client

./clickhouse client

There you go, you can now run ClickHouse on your local machine.

Running queries on ClickHouse

Let's create a new table. Run the below query to create a table.

CREATE TABLE TEST
(
    `userId` UInt64,
    `name` String,
    `password` String,
    `description` Nullable(String)
)
ENGINE = MergeTree
ORDER BY tuple()

Let's see if we get the table created. To see the list of tables in our ClickHouse client run the below query.

SHOW TABLES

Now, let's insert some data in the table.

INSERT INTO TEST (*) FORMAT Values
(1, 'Siddhant', 'password', 'test description'), 
(2, 'user2', 'password2', 'test description 2'), 
(3, 'user3', 'password3', 'test description 3')

To see the data run select the query

SELECT * FROM TEST

You will see the following result

At the end of each query, ClickHouse shows how much time it took to process the given query. Additionally, it displays how many rows ClickHouse processed per second to execute the query.

This is how you can run ClickHouse locally. Please let me know if this blog was helpful, and if you have any doubts, write them down in the comments section. I will do my best to answer them.

More about clickhouse:
https://blog.siddhantbobde.com/clickhouse-csv-ingestion-with-python-explicit-schema

What is GitHub Copilot?

• GitHub Copilot is an AI-powered code completion tool developed by GitHub in collaboration with OpenAI. It's built on OpenAI’s Codex technology, trained on a vast amount of publicly available code.

• Copilot seamlessly integrates with your IDEs like VSCode, PyCharm, IntelliJ, etc., assisting developers by suggesting code completions, generating whole lines or blocks of code, and providing contextual documentation.

What are the advantages of GitHub Copilot?

• GitHub Copilot suggests code snippets as you write your code.

• It automates repetitive tasks, making it a great time saver.

• You can use it for code commenting; it reads your code and adds comments about what each section does.

• It even suggests entire code blocks for the file that fits the context of what the programmer is working on.

What are the disadvantages of GitHub Copilot?

• The major disadvantage of GitHub Copilot is for beginner developers or those starting with a new language. Because Copilot suggests code snippets as you code, you may not develop as strong a grasp of syntax as you would without it.

• Code suggestions from GitHub Copilot can be distracting when trying to build logic.

• It can provide unoptimized, inefficient, or even insecure code. Therefore, you always need to double-check before finalizing the code.

So, whether you're already acquainted with this powerful tool or it's a discovery for you, go through this blog as we uncover the potential of ChatGPT and how it can help you in your workflow. Let's jump right in!

What is ChatGPT

In the ever-evolving field of artificial intelligence, ChatGPT has emerged as a powerful tool, revolutionizing the way we interact with technology. Developed by OpenAI, ChatGPT is built on the GPT-3.5 architecture, capable of understanding and generating human-like text.

Its applications span a wide array of fields, from content creation to customer support. Let's dive into the various ways we can use ChatGPT to enhance our productivity.

Content Creation and Copywriting

Generating Ideas: ChatGPT can help brainstorm ideas for blog posts, articles, advertisements, and other types of content.

Creating Attractive Headlines: It can assist you in creating attractive headlines to target the potential market.

SEO optimization: It can provide you with different keywords to improve your search engine optimization.

Marketing: You can brainstorm with ChatGPT for different marketing schemes.

Suppose you need a slogan for your company, and you're seeking suggestions. You can describe your company's offerings, and ChatGPT will promptly provide you with some compelling options.

For instance, consider a company specializing in producing healthy bread. They're in search of a fitting slogan for their brand. Below are the suggestions provided by ChatGPT.

Learning and Education

In the realm of education, ChatGPT serves as a valuable resource.

Tutoring: ChatGPT can provide personalized assistance in various subjects. You can ask questions, seek explanations, or request help with problems related to your studies. Many Language learning platforms have also integrated ChatGPT to facilitate interactive practice and conversation.

Concept Clarification: If you're struggling to understand a concept, you can ask ChatGPT for a simplified explanation or examples to help you grasp it better.

Language Learning: ChatGPT can help with language learning by providing vocabulary explanations, sentence structure examples, and even engaging in conversations to practice language skills.

Writing Assistance: It can assist with writing tasks, offering suggestions for grammar, style, and content. It can also help generate outlines or brainstorm ideas. Suppose you are writing a research paper. You can give ChatGPT your abstract from the research paper and ask it to make it shorter, correct grammatical errors, or even expand it.

Research: ChatGPT can help and summarize information on a wide range of topics. It can be a useful tool for gathering data for projects and essays.

Interviewer: Suppose you are getting ready for a job interview as an English teacher. You can request ChatGPT to conduct a mock interview for the English teaching position.

You can type your answer and the ChatGPT will examine your answer and will give you some tips for better answers or some other suggestions as well.

Now just type the next question and ChatGPT will ask you the next question. You can also tell ChatGPT to increase or decrease the difficulty of questions based on your answer.

Programming

Code Assistance: Developers and programmers find ChatGPT immensely helpful in their work. It can assist in writing code snippets, debugging, and providing explanations for complex programming concepts.

Learning: If you are learning new technologies, you can use ChatGPT to ask questions about concepts you're struggling with. It can provide explanations clearly and understandably.

Data Structures and Algorithms: It can help you understand and implement algorithms and data structures, which are fundamental to programming. You can dry-run the code you wrote for debugging.

Pseudocode Generation: If you're planning out an algorithm, ChatGPT can help you generate pseudocode to outline your approach.

Code Review: You can share snippets of your code with ChatGPT, and it can offer feedback on style, and potential issues, or suggest improvements.

Documentation: If you need to document your code, ChatGPT can help you with generating clear and concise explanations.

Code Explanation: Suppose you are unable to understand some code. You can either go to Google and search for the code bit by bit, or you can provide a code snippet to ChatGPT, which will give you a complete explanation of the code.

Creative Writing and Storytelling

Prompt Generation: You can ask ChatGPT to generate writing prompts to kickstart your creativity. It can provide ideas for different genres, themes, or styles of writing.

Character Development: ChatGPT can assist in creating new characters by providing details about their backgrounds, personalities, motivations, and quirks.

Feedback and Editing: It can offer suggestions for improving grammar, style, and coherence.

Genre-specific Assistance: ChatGPT can provide specialized help for different genres such as science fiction, fantasy, mystery, romance, and more.

Language Translation

Text Translation: You can input text in one language and request a translation into another language. Keep in mind that while ChatGPT can provide translations, it might not always be as accurate as specialized translation tools.

Learning New Languages: ChatGPT can assist with learning new languages by providing translations, grammar explanations, and even offering practice exercises.

Sass stands for "Syntactically Awesome Stylesheets." It is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself.

Sass extends the CSS by adding features like variables, nested rules, and mixins. This allows for more modular, maintainable, and organized stylesheets. It also introduces concepts like inheritance and control directives, which are not present in standard CSS. We create sass files with an extension of '.scss'

Features of SASS

Sass Variables

You can store common styles in sass variables like colors, font-sizes, widths, etc. You can make a common 'variable.scss' file and store all necessary variables in it. So that you can use it later wherever you need it.

$font-size: 12px;
$white-color: white;

h1 {
    font-size: $font-size;
    color: $white-color;
}

Nesting

Nesting in Sass refers to the practice of placing selectors inside one another in a way that mirrors the structure of the HTML. This makes the CSS more readable and helps organize styles in a logical hierarchy.

CSS code

nav {
    background-color: #333;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline-block;
    margin-right: 10px;
}

The resulting SCSS code

nav {
    background-color: #333;

    ul {
        list-style-type: none;
        padding: 0;

        li {
            display: inline-block;
            margin-right: 10px;
        }
    }
}

As you can see, we nested all the elements inside one another, just like in HTML. This makes the code more readable and understandable.

Mixins

A mixin in Sass is a way to group together a set of CSS declarations and reuse them throughout your stylesheet. It's like a function in programming, allowing you to define a set of styles once and apply them multiple times in different parts of your code.

Here's an example of a basic mixin in Sass:

//You can pass paramters to a mixin.
@mixin border-radius($radius) {
    border-radius: $radius;
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
}

.button {
    // To use a mixin you need to use @include and then the mixin name.
    @include border-radius(5px);
    background-color: #007bff;
    color: #ffffff;
}

After compilation of the above SCSS file into CSS it will just replace the mixin with its code by putting paramter value at appropriate places.

Control Directives - @if, @else if, @else

The @if, @else if, and @else control directives in Sass allow you to apply styles conditionally based on certain conditions. They work similarly to conditional statements in programming languages.

@mixin select-width($device) {
    .button {
        @if $device == "mobile" {
            width: 90%;
        }

        @else if $device == "laptop" {
            width: 70%;
        }

        @else {
            width: 60%;
        }
    }
}

Control Directive - @for

The @for control directive in Sass allows you to iterate over a range of values and generate styles based on those values. It works similar to a for loop in programming languages.

Syntax

//end is excluded if you use "start to end"
@for $var from (start) to (end) {
  // Styles to apply
}

//end is included if you use "start through end"
@for $var from (start) through (end) {
  // Styles to apply
}

Example

@for $i from 1 through 3 {
    .p-#{$i} {
        font-size: 10px + $i * 2;
    }
}

The resulting CSS would look like this:

.p-1 {
    font-size: 12px;
}

.p-2 {
    font-size: 14px;
}

.p-3 {
    font-size: 16px;
}

Control Directive - @while

The @while directive in Sass allows you to create a loop that continues as long as a specified condition is true. It's similar to a while loop in many programming languages.

Syntax

@while <condition> {
  // Styles to apply
}

Example

$var: 1; // Initialize a variable just like other programming languages.

//Set a condition
@while $var<=3 {
    .div-#{$var} {
        width: 100px * $var;
    }

    // Increment the var
    $var: $var+ 1;
}

The resulting CSS would look like this:

.div-1 {
    width: 100px;
}

.div-2 {
    width: 200px;
}

.div-3 {
    width: 300px;
}

Control Directive - @each

The @each directive in Sass allows you to loop over lists or maps and apply styles for each item in the list or map. It's a powerful feature that enables you to generate repetitive styles based on a set of values.

Syntax For List

@each $var in (list) {
  // Styles to apply
}

Example

$colors: red, green, blue, yellow;

@each $color in $colors {
    .element-#{$color} {
        background-color: $color;
    }
}

Syntax for Map

@each $key, $value in (Map) {
    // Styles to apply
}

Example

$font-sizes: (
    small: 12px,
    medium: 16px,
    large: 20px
);

@each $size, $value in $font-sizes {
    .font-#{$size} {
        font-size: $value;
    }
}

Control Directive - @extend

The @extend directive in Sass is used for inheritance, allowing one selector to inherit the styles of another selector. This can help reduce duplication in your stylesheets and make your code more maintainable.

Syntax

.selector {
    property: value;
    @extend .other-selector;
}

Example

.button-1 {
    border-radius: 10px;
    color: white;
    background-color: green;
}

.button-2 {
    @extend .button-1;
    font-size: 15px;
    font-weight: bold;
}

Partials And Importing

In Sass, a partial is a Sass file that is intended to be imported into another Sass file. It's a way to break up your stylesheets into smaller, more manageable pieces. Partial files in Sass are denoted by an underscore _ at the beginning of the filename.

For example, you can create a common _variables.scss partial file and use it wherever you want. You can also create a common _mixins.scss file which contains all the mixins

For importing partial files you need to use @import directive with name of file in quotes. You don't include the underscore or the file extension in the import statement.

@import 'variables';
@import 'mixins';

In conclusion, Sass is a powerful tool that can greatly enhance your CSS workflow. Its features, such as variables, nesting, mixins, and more, allow for more maintainable and organized stylesheets.

You can suggest any topics you think I should include in the above blog by leaving a comment💬. If you found my article useful, please give it a like❤.

I began learning touch typing in September 2020. Over the course of around 8 to 9 months, I practiced on and off, dedicating approximately 10-30 minutes per day. Eventually, I reached a speed of 75 words per minute.

As a computer engineer, coding is a significant part of my daily routine, and I wanted to enhance my speed while coding. Additionally, as a blogger, touch typing has proven to be a significant time-saver.

Resources I used

There are three main resources that I utilized, and continue to use, whenever I want to improve my touch typing:

1. typingclub

   This website offers both free and paid versions. While the paid version provides additional lessons and interactive games, I found the free version to be more than sufficient. It covers all the lessons with video tutorials, making it an excellent starting point for anyone looking to learn touch typing.

2. keybr

   Keybr is primarily used for typing practice. It identifies the mistakes you make while typing certain letters or words and presents them more frequently, helping you become more comfortable with those specific characters.

   Additionally, you can include capital letters and other punctuation characters for practice. The website also provides a comprehensive progress profile, including heatmaps, graphs, and comparisons of your typing speed against other users.

3. typelit

   This website allows you to practice typing entire books listed on their platform. You progress through the book page by page, and afterward, it provides statistics on your average typing speed and accuracy for that page.

The image below illustrates the days on which I practiced touch typing. The darker the color, the more time I spent typing.

You can try the resources I mentioned to learn touch typing. If you have any suggestions or questions, feel free to share them in the comment section.