DEV Community: Shavon Harris

Building Secure AI Apps: Defending Features, Protecting Costs and Staying Ahead of Attacks

Shavon Harris — Wed, 09 Jul 2025 20:21:58 +0000

Building Secure AI‑Powered Apps

Building secure AI‑powered apps isn’t just a check‑mark exercise.

It directly impacts user trust, brand reputation, and runaway API costs. Here’s what I learned when even simple features opened the door to real economic stranger dangers!

The other day I decided to add a feature to my business‑card app. I hadn’t touched the code in eight months, so I figured, what the heck. That “quick change” turned into a comprehensive security overhaul that taught me more about web application security than any tutorial ever has.

As a mid‑level engineer I know security matters—my first role was at a cybersecurity company. But it wasn’t until I started building AI‑integrated apps that I saw how deep security has to go. It’s a survival strategy as attacks get harder to defend.

How I Started

My initial code was a little embarrassing, but if you look at the docs this is what you see—a simple chat endpoint:

// The dangerous approach (don’t do this!)
app.post('/api/chat', async (req, res) => {
  const { message } = req.body;

  const completion = await openai.chat.completions.create({
    messages: [{ role: 'user', content: message }], // 🚨 direct injection risk
  });

  res.json({ response: completion.choices[0].message.content });
});

Unfortunately, every user is not to be trusted. This opens the app to multiple attack vectors that could compromise the application and the AI model’s behavior. It’s a small app, and these protocols might feel like overkill, but when you’re on enterprise‑level projects you’ll be glad you practiced.

Modern Attacks

While researching best practices I found that AI‑powered apps face unique threats:

Prompt injection – malicious inputs manipulate AI responses
Data exfiltration – attackers extract training data or system prompts
Resource exhaustion – unlimited input length drains API quotas and server resources
Traditional web vulns – XSS and CSRF are still very real

So, input validation isn’t just about preventing crashes; it’s about protecting AI‑human interactions.

The Implementation

Layer 1 · Input Validation & Sanitization

Input validation is the foundation of any secure app, so I started there—type and existence checks, length constraints (helps control API costs), whitespace normalization, HTML escaping for XSS, suspicious‑pattern detection, and statistical anomaly checks.

See the full function in my repo.

Why it works:

Multiple validation layers – each check has a purpose
Statistical analysis – special‑character ratios catch clever encoding attacks
Graceful degradation – clear errors aid legit users, frustrate attackers
Performance – regex patterns tuned to avoid ReDoS issues

Layer 2 · Security Headers & Middleware

Modern web security relies on HTTP headers to tell browsers how to handle content safely.

app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      styleSrc: ["'self'", "'unsafe-inline'"],
      scriptSrc: ["'self'"],
      imgSrc: ["'self'", 'data:', 'https:'],
    },
  },
}));

Content‑Security‑Policy (CSP) – whitelists approved sources, neutralizes XSS
X‑Frame‑Options – prevents clickjacking
X‑Content‑Type‑Options – stops MIME sniffing
Referrer‑Policy – controls information leakage

Layer 3 · CORS Configuration

Cross‑Origin Resource Sharing (CORS) errors can be frustrating, but restrictive CORS is critical for AI apps:

app.use(cors({
  origin: process.env.NODE_ENV === 'production'
    ? ['https://yourdomainname.netlify.app']
    : ['http://localhost:5173', 'http://localhost:8888'],
  credentials: true,
  methods: ['POST', 'GET', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization'],
}));

Why restrictive CORS matters

Origin validation – stops unauthorized domains
Method restriction – limits the attack surface
Credential handling – secures tokens and sessions

Layer 4 · Enhanced Error Handling

Security‑conscious error handling prevents information leaks while keeping usability:

try {
  // chat logic
} catch (error) {
  console.error('Chat API error:', error);

  if (error.message.includes('Invalid input') ||
      error.message.includes('Message too long') ||
      error.message.includes('Message cannot be empty')) {
    return res.status(400).json({ error: error.message });
  }

  if (error.status === 429) {
    return res.status(429).json({ error: 'Service busy. Try again in a moment.' });
  }

  res.status(500).json({ error: 'Unexpected server error.' });
}

Information hiding – internal details stay in logs
Specific feedback – users get actionable messages
Rate‑limit awareness – handles quota hits cleanly

The Frontend

Client‑side checks improve UX and cut unnecessary server calls:

const validateInput = (input) => {
  if (!input || typeof input !== 'string') return 'Please enter a valid message';

  const trimmed = input.trim();
  if (!trimmed)              return 'Please enter a message';
  if (trimmed.length > 1000) return 'Message is too long.';
  if (trimmed.length < 2)    return 'Message is too short.';

  const bad = [/<script/i, /javascript:/i, /<iframe/i, /<object/i];
  if (bad.some((re) => re.test(trimmed))) return 'Invalid characters detected';
  return null;
};

Security Dependencies

npm install validator helmet express-rate-limit

Validator.js – 60+ sanitization and validation helpers
Helmet.js – quick, sane security headers
Express‑rate‑limit – throttles abuse and protects budgets

Advanced Considerations

Prompt Injection Prevention

Define clear system prompts, limit data sources, monitor overrides, and provide fallback responses.

Dual‑Tier Cost Guard

const globalLimiter = rateLimit({ windowMs: 15 * 60 * 1000, max: 100 });
const chatLimiter  = rateLimit({ windowMs:  1 * 60 * 1000, max: 10  });

app.use('/api/', globalLimiter);
app.post('/api/chat', chatLimiter, (req, res) => { /* ... */ });

Global limits protect the whole API; tighter limits protect expensive endpoints.

AI Accelerated My Learning

Instead of weeks in docs, I used AI tools to:

Break docs into Q&A chats
Get rapid code reviews
Generate podcast‑style explanations

AI sped research; real testing proved the ideas.

Lessons Learned

Trust nothing – validate every input
Defense in depth – layers back each other up
Protect the budget – rate‑limit everything
Security is mindset, not checklist
AI accelerates learning, but testing seals it

Tech & Security Stack

Node.js · Express · React
OpenAI GPT‑4
Validator.js · Helmet.js · Express‑rate‑limit
Custom CSRF (HMAC‑SHA256)
Netlify Functions

Repo link.

Have you secured an AI‑powered app? What surprised you most? Let’s share stories.

Building a URL Shortener: A First System Design Test

Shavon Harris — Wed, 09 Jul 2025 17:38:19 +0000

What is a URL Shortener?

A URL shortener is a tool that takes a long, messy web address and turns it into something short and manageable. Think about Google Drive links or Amazon product pages—they get pretty wild!

I recently read that designing a URL shortener is a common first system design test, so let’s break it down and see how we can build one.

Database Schema

If we want to keep track of URLs, we need a database. Think of it like a coat check at a restaurant:

You hand over your coat (long URL)
You get a ticket (short URL)
Later, you return the ticket, and they give you back your exact coat (redirecting to the original URL)
A simple schema might look like this:

<table> <tr> <th>Column</th> <th>Type</th> <th>Description</th> </tr> <tr> <td>id</td> <td>UUID / Int</td> <td>Unique identifier for each URL</td> </tr> <tr> <td>longURL</td> <td>String</td> <td>The original long URL</td> </tr> <tr> <td>shortURL</td> <td>String</td> <td>The shortened version</td> </tr> <tr> <td>clicks</td> <td>Integer</td> <td>(Optional) Track number of uses</td> </tr> <tr> <td>createdAt</td> <td>Timestamp</td> <td>(Optional) When the URL was created</td> </tr> </table>

Basic Endpoints (POST to Create, GET to Redirect)

Our app needs two core endpoints:

POST /shorten – Takes a long URL and returns a shortened version
GET /:shortURL – Redirects users from the short URL to the original long URL
When a user enters a long URL, we POST it to create a short version. Later, when someone clicks the short link, we GET the original and redirect them.

Simple but effective!

URL Generation Strategy

How do we generate the short URL? There are a few options:

1️⃣ Hashing the URL
Take the long URL, run it through a hash function, and use part of the hash as the short URL.
Pros: Consistent and deterministic.
Cons: Hash collisions (two URLs creating the same short code), no custom URLs, and inconsistent length.
2️⃣ Random Strings (NanoID)
Generate a random unique string like "xs#$19F".
Pros: Low collision risk, used by companies like Vercel for deployment URLs.
Cons: Doesn’t derive from the original URL.
A better approach? NanoID—a lightweight package that generates collision-resistant unique IDs. Large companies like Vercel use this for their deployment URLs.

How It Works in Our App

User enters a long URL
We generate a NanoID-based short URL
We store both in our database
We return something like mysite.com/xs#$19F

** Authentication Needs**

So far, anyone can create or use our short URLs. But what if we want user accounts so they can manage their links?

We’d need:
✅ User authentication (login, signup)
✅ Tokens to remember logged-in users

Where Do We Store Tokens?
LocalStorage? ✅ Good for personal apps but not secure
Access token in memory + refresh token in HTTP-only cookie? ✅ More secure and scalable
If a user logs in and we need multiple pages to know who they are, we have to share state across the app.

Small app? → Use React's useContext (like a family group chat—everyone gets the message at once).
Larger app? → Use Redux for global state management.
Scaling Up: Handling High Traffic
What if our awesome URL shortener goes viral?

We don’t want it crashing under heavy traffic, so we use a load balancer to:
🔹 Distribute requests evenly across multiple servers
🔹 Prevent server overload

Thankfully, cloud providers handle most of this for us.

Error Handling & Security
Things will go wrong. It’s our job to handle them well.

Common Errors to Plan For
❌ Invalid URL? → “That’s not a valid address.”
❌ Short URL doesn’t exist? → “We couldn’t find that link.”
❌ Too many requests? → “Slow down, cowboy/cowgirl!” (Rate limiting)

Security Considerations
Is the user logged in? If not, they can’t see their URL history.
Is this the owner? Only the creator should modify or delete a short URL.
Is this a safe URL? Prevent malicious redirects (phishing links).
Future Features
💡 Custom Short URLs – Let users create something like mysite.com/my-brand
💡 Expiration Dates – Set URLs to expire after a certain time
💡 API Access – Allow developers to generate short URLs programmatically
💡 Advanced Analytics – Track referrers, device types, locations

Final Thoughts
Building a URL shortener might seem simple, but it’s a great system design test because it touches databases, backend logic, authentication, performance, and security.

[Boost]

Shavon Harris — Thu, 20 Feb 2025 21:00:39 +0000

Building a URL Shortener: A First System Design Test

Shavon Harris ・ Feb 20

#webdev #javascript #systemdesign #programming

Building a URL Shortener: A First System Design Test

Shavon Harris — Thu, 20 Feb 2025 21:00:20 +0000

What is a URL Shortener?

A URL shortener is a tool that takes a long, messy web address and turns it into something short and manageable. Think about Google Drive links or Amazon product pages—they get pretty wild!

I recently read that designing a URL shortener is a common first system design test, so let’s break it down and see how we can build one.

Database Schema

If we want to keep track of URLs, we need a database. Think of it like a coat check at a restaurant:

Column	Type	Description
id	UUID / Int	Unique identifier for each URL
longURL	String	The original long URL
shortURL	String	The shortened version
clicks	Integer	(Optional) Track number of uses
createdAt	Timestamp	(Optional) When the URL was created

Basic Endpoints (POST to Create, GET to Redirect)

Our app needs two core endpoints:

Simple but effective!

URL Generation Strategy

How do we generate the short URL? There are a few options:

How It Works in Our App

User enters a long URL
We generate a NanoID-based short URL
We store both in our database
We return something like mysite.com/xs#$19F

** Authentication Needs**

So far, anyone can create or use our short URLs. But what if we want user accounts so they can manage their links?

We’d need:
✅ User authentication (login, signup)
✅ Tokens to remember logged-in users

We don’t want it crashing under heavy traffic, so we use a load balancer to:
🔹 Distribute requests evenly across multiple servers
🔹 Prevent server overload

Thankfully, cloud providers handle most of this for us.

Error Handling & Security
Things will go wrong. It’s our job to handle them well.

Security Considerations

Is the user logged in? If not, they can’t see their URL history.
Is this the owner? Only the creator should modify or delete a short URL.
Is this a safe URL? Prevent malicious redirects (phishing links).
Future Features
💡 Custom Short URLs – Let users create something like mysite.com/my-brand
💡 Expiration Dates – Set URLs to expire after a certain time
💡 API Access – Allow developers to generate short URLs programmatically
💡 Advanced Analytics – Track referrers, device types, locations

Final Thoughts

Building a URL shortener might seem simple, but it’s a great system design test because it touches databases, backend logic, authentication, performance, and security.

Understanding K Element Patterns in LeetCode: The Basics (Part 1)

Shavon Harris — Mon, 25 Nov 2024 12:15:02 +0000

I finally understand! The best way to learn LeetCode is not by grinding through problem after problem, sometimes taking a whole hour to solve them inefficiently. The key to mastering LeetCode is studying patterns. Let's study a common one!

Interviewers love asking about finding, maintaining, or manipulating K elements in a string or array. At first, I thought each problem was totally different, but then I started seeing the connections. Let me show you what I mean with two problems that really helped me understand this pattern.

Problem 1: Find Subsequence of Length K with the Largest Sum

This is technically an 'easy' level question (only asked by one company), but, it teaches you so much about how to think about these k-element problems!

What They're Asking

You get an array of numbers and a value k, and you need to find k numbers from the array that add up to the biggest possible sum. BUT (and this is the part that tripped me up at first), you have to keep the numbers in their original order!

Example:

Oh! this one is trickier:

Ok I Get It

At first, I thought "just grab the k biggest numbers, done!" But nope - that order requirement changes everything. Here's what finally clicked:

We need to remember where each number came from, right? So I thought, "I should pair every number with it's position?"

Then we can sort these pairs by the values (that's the first number in each pair), but we're keeping track of where they came from (that's the second number)!

Now the cool part - we only need k of these, so grab the first k pairs and just keep their positions:

Finally, walk through the original array and only keep numbers whose positions are in our Set:

Here's The Code

2: Kth Largest Element in a Stream

Ok, so this one's also labeled 'easy' (asked by five companies), but this one was more confusing to me than any of the more difficult Kth element problems.

What They're Asking

Imagine you're working at a university and students keep submitting test scores. Your job is to always know the kth highest score at any time. New scores keep coming in, and you need to keep track.

They give you k and some initial scores, then they keep throwing new scores at you and want to know the kth highest each time. Let's look at an example:

Ok, I Think I Get It

At first, I kept trying to sort the entire array every time a new score came in but I know that sorting can be inefficient. Then I thought why am I keeping track of all the scores when I only care about the top k?

Here's how I broke it down:

First, sort the initial scores and only keep the top k:

Now when a new score comes in:

If it's smaller than our kth highest (first number), ignore it
If it's bigger, it belongs in our list somewhere

Here's what's happening with each add:

The Code

Why These Two Problems Are Connected

Both problems taught me something super important about handling k elements:

First problem: Sometimes you need to track where elements came from
Second problem: Sometimes you only need to keep k elements around

These k-element problems are all about being clever with what information you keep and what you throw away.
Next time we'll look at two more k-element problems that build on these idea. I hope at the end you see a pattern and these types of problems seem less scary!

How To Train Your Codebase: Enhancing Readability, Reusability and Scalability with Modular Code

Shavon Harris — Thu, 01 Aug 2024 18:16:55 +0000

It can be easy for new devs or even senior devs to get lost in a codebase. It's crucial to be able to quickly jump in and ground yourself. Writing modular code—coding in a way that maximizes reusability and minimizes complexity—is one way for teams and individual developers to address this issue. I want to explore what modular code is, the benefits, and how to implement it in everyday use cases. To demonstrate, I also built a fun game for couples or friends.

What is Modular Code

Simply put, modular code involves breaking down a program into separate modules, each handling an important piece of functionality. Imagine you are constructing a building using pre-made blocks, each designed for a different purpose. You have your windows, doors, floors, etc. You don't need to build a new door each time; you can just grab a pre-made block. Similarly, in coding, you might need to modify your pre-made code to fit your needs, but you won’t have to start from scratch. This approach makes code easier to manage and understand, and also facilitates easier testing, debugging, and maintenance.

Key Benefits of Modular Code

1. Enhanced Readability: Each module is self-contained, making it easier to understand at a glance. This means you can quickly identify the purpose of each part of your code without wading through unrelated logic. For example, in my flipdate game, the Card component handles only the display and flip logic of individual cards, making it easier to comprehend and manage.

2. Increased Reusability: Modules can be reused across different parts of a project or in different projects. This reduces the amount of code you need to write. In my game, the** Card** component can be reused anywhere a similar card-flipping functionality is required.

3. Simplified Testing: Testing becomes more straightforward as each module can be tested independently. By isolating functionality into separate components and hooks, you can write tests for each piece without worrying about the entire app. For example, I could use my useCardFlip hook independently from the GameBoard component. Although I haven't yet written tests for this game, when I do, it will be much easier to test functionality independently.

For a small app like this, I don't necessarily have to break my application into modules. However, practicing modular architecture on smaller apps will help you see how much easier and more helpful it is when you move on to more complex applications. If you remember nothing else, remember that modular code performs a specific task.

Implementing Modular Code with React

Breaking Code into Small Reusable Components

Imagine you want to create a button that will be used throughout your program multiple times. Instead of coding it directly into the index.js file, you can create a Button.js file and import it into index.js. This way, you can use the Button component throughout the application.

In our game, we follow this idea by creating a Card component that is used multiple times within the GameBoard.

Use React Hooks

Hooks help you write modular code by enabling the reuse of stateful logic across multiple components. In our game, we use the** useCardFlip** hook to manage the state and logic related to flipping cards and checking matches.

For example, the useCardFlip hook encapsulates the logic for:

Tracking which cards have been flipped.
Checking for matches.
Handling the state of matched and denied cards.

This approach allows us to separate the game logic from the UI components, making the code easier to maintain and test.

FlipDate

In our game, we use modular code principles to build a maintainable and scalable application. The game consists of reusable components (Card, GameBoard) and custom hooks (useCardFlip).

The GameBoard component manages the overall game logic, including shuffling the deck, handling player turns, and managing the game state.

Conclusion

Writing modular code might feel tedious, but it is invaluable for creating maintainable and scalable code, as well as enhancing team collaboration. By breaking code into logical blocks, you make your code easier to manage for yourself and easier to collaborate on in large projects. Embrace modular code and watch your projects become more organized and scalable.

Our game is a great example of modular architecture. By dividing the application into reusable components and hooks, we achieve a clean, maintainable, and scalable codebase. The Card component, useCardFlip hook, and **GameBoard **component each handle distinct responsibilities, illustrating the simplicity of modular coding in a real-world application.

Check out the source code for the Game and Happy coding!

Shuffle The Array

Shavon Harris — Thu, 27 Jun 2024 02:24:33 +0000

Today's problem is fairly straightforward. It can be solved with a simple for loop and the push method.

Given the array nums consisting of 2n elements in form [x1,x2,...,xn,y1,y2,...,yn]. we need to rearrange the array into `[x1,y1,x2,y2,...,xn,yn]

Function Signature

` @param {number[]} nums @param {number} n @return {number[]} `

Examples

Example 1:

Input: nums = [2,5,1,3,4,7], n = 3
Output: [2,3,5,4,1,7]
Explanation: Since x1=2, x2=5, x3=1, y1=3, y2=4, y3=7 then the answer is [2,3,5,4,1,7].

Example 2:

Input: nums = [1,2,3,4,4,3,2,1], n = 4
Output: [1,4,2,3,3,2,4,1]

Example 3:

Input: nums = [1,1,2,2], n = 2
Output: [1,2,1,2]

The first thing to understand is that 2n elements means the total number of elements in the array is twice the value of n. The first half of the array consists of elements [x1, x2, ..., xn] and the second half consists of elements [y1, y2, ..., yn].

The task is to rearrange the array into [x1, y1, x2, y2, ..., xn, yn].

Example Breakdown

Input: nums = [2, 5, 1, 3, 4, 7], n = 3

Here, nums has 6 elements (2 * 3 = 6).

The first half [x1, x2, x3] is [2, 5, 1]
The second half [y1, y2, y3] is [3, 4, 7]

We need to combine them like this:

Take x1 (which is 2) and y1 (which is 3)
Take x2 (which is 5) and y2 (which is 4)
Take x3 (which is 1) and y3 (which is 7)

Resulting in [2, 3, 5, 4, 1, 7].

Dive into the code

So how do we approach this with code. Let's create a plan:

Create a function shuffle.
The function takes two parameters: nums and n.
Create an empty array to store the result.
Loop through the first n elements of the array.
Push the current element and the corresponding element from the second half into the result array.
Return the result array.

Conclusion
Today's problem was a great example of how we can use simple loops and basic array operations to solve a seemingly task.

To recap:

We identified that the array nums consists of 2n elements, split into two halves.
Our goal was to get two halves into a new array in the specified format.
Using a simple for loop and the push method, we created a solution that is both intuitive and effective.

I encourage you to try this problem on your own and see how you can further optimize or modify the solution.

Happy Coding!

A More Straightforward Guide to Solving Two Sum.

Shavon Harris — Wed, 26 Jun 2024 17:32:18 +0000

When approaching the classic two sum problem you can answer in a few different ways. You can attempt a brute method in which you consider every possible number.This would be attempted using a nested for loop. This is not an efficient runtime. Or, you can do the one pass method using a hashmap, which is much more efficient.

Brute Force

Given an array lets use



let array = [2,1, 5, 3]
let target = 4

We are look for 2 numbers in this array to equal the target 4.

2 + 1 = 3
2 + 5 = 7
2 + 3 = 5

After iterating through the array once using the 0th index we can see that 2 is not going to help us reach the target. So we pass through again using the 1st index.

1 + 5 = 6
1 + 3 = 4

Finally, we find two numbers that add up to the target: 1 and 3. In the array, the number 1 is at index 1, and the number 3 is at index 3. Therefore, the answer is [1, 3], indicating that the numbers at indices 1 and 3 of the array sum up to the target value of 4!

Now imagine the array looked like [2, 5, 1, 3] instead. We would have had to iterate through the array 3 times. That is much too much and there is a more efficient method. Enter hashmaps.

What are Hashmaps?

A hashmap is a data structure that stores data in pairs of keys and values. It allows for fast retrieval of values based on their associated keys. That's the textbook definition and a bit confusing so let's try to visualize this.

Imagine you're in a library looking for specific books. Each book has a unique identifier, like a number, known as a 'key.' When you need a particular book, you simply look up its key, and voila, you've found it. This key—whether it's the book title or a number—quickly directs you to the book you're searching for. This method is much faster than searching through every book one by one.

Here's the Plan:

Now that we know what a hashmap is we can use one to solve our problem.

Traverse the list once.
For each number, calculate its complement(target - current number).
Check if this complement exists in our hashmap.
If it doesn’t, store the current number with its index.
If it does, return the current index and the stored index from the hashmap.

Problem Statement

Given an array of integers and a target integer, your task is to return the indices of two numbers in the array that add up to the target.

Example:

Input: nums = [2, 7, 11, 15], target = 9
Output: [0, 1]
Explanation: nums[0] + nums[1] = 2 + 7 = 9
Note: you can return the indices in any order and there is only one answer.

Dive into the code?

Not quite. Let's draw this hashmap out!

Hashmap
value: index

Step 1: We start with an empty hashmap and we look at each number and we check something very specific:

Does the difference between the target and the current number already exist as a key in our hashmap.

Step 2: For the first number(2) the difference between the target (9) and 2 is 7. If we look in the hashmap:

is 7 noted down already? Of course not, the hashmap is still empty.
So, write down 2 and where you found it (index 0)

Current Hashmap:

2: 0

Step 3: Move to the next number 7 .

The difference between the target (9) and the number (7) is 2. Is 2 in the hashmap? Yes, and its noted at being at index 0!
This means you've found the two numbers that add up to the target:2 (from index 0) and 7 (the number you're currently looking at, at index 1).

Updated Hashmap:
2: 0
7: 1

Because you found that both components of the sum are in the hashmap, you can now return their indices: [0, 1]. These indices tell us where in the array each component of the target sum can be found.

Yay!

Let's dive into the code!

Let's remind ourselves or our steps and problem.

Problem

Given an array of integers and a target integer, your task is to return the indices of two numbers in the array that add up to the target.

Steps

Traverse the list once.
For each number, calculate its complement(target- current number).
Check if this complement exists in our hashmap.
If it doesn’t, store the current number with its index.
If it does, return the current index and the stored index from the hashmap.

If we are going to traverse a list, we should definitely use some sort of loop. I will utilize a for loop to iterate through the array just like I did in the visualization.

The two approaches to solving the 2-sum problem—brute force and the one-pass hashmap method—demonstrate the power of choosing the right data structure for the job. While the brute force method is straightforward, it's not efficient, especially with larger arrays. The hashmap approach, on the other hand, optimizes the process by reducing the number of comparisons needed to find the correct indices. This makes it an ideal choice for real-world applications.

Key Takeaways:

Efficiency: Using hashmaps can drastically improve the efficiency of your code, reducing the time complexity from O(n²) with brute force to O(n) with hashmaps.
Simplicity: Despite their power, hashmaps are straightforward to implement and use.
Practicality: Understanding when and how to use hashmaps is a valuable skill in computer science, applicable to a wide range of problems beyond just the 2-sum issue.

By now, you should have a solid understanding of how the two-sum problem can be efficiently solved using hashmaps! Hope you enjoyed!

Happy Coding!

Let's Talk Version Control

Shavon Harris — Tue, 25 Jun 2024 14:13:37 +0000

Understanding Git can be really confusing. I have been using Git for quite some time, but I sometimes found it difficult to explain. This guide aims to equip you with the essential language and concepts of version control so that you do not have that problem.

What is Git?

Imagine you're writing a novel collaboratively. Each contributor makes changes—maybe deleting a comma or adding a whole new chapter. Git is like an attentive editor who keeps track of all these changes. Not only does it help you see what others are doing but it also helps you integrate these changes smoothly to create a final, cohesive manuscript.

Git is the most popular tool for version control, but it's not the only option. Alternatives like Mercurial or Subversion also offer ways to manage project versions:

Subversion (SVN) is like a traditional library where a single, central ledger records every change in the books.
Mercurial, like Git, is something like each writer maintaining their own detailed notebook of changes.

So, as a developer, I would use Git or Mercurial so that myself and my colleagues can access an identical version of the project.

Understanding Different Types of Version Control

Version control systems can be classified into three main types:

Local Version Control: This is like keeping a personal diary of changes on your own computer.
Centralized Version Control (CVC): Imagine a club where all decisions are recorded in a single register kept at the club's headquarters.
Distributed Version Control (DVC): (This is the most popular version) Each member of the group keeps their own copy of the decision record, allowing operations even when away from the club. Distributed allows for the greatest amount of control and flexibility.

Most people choose Git because it is fast, flexible, and supported by major platforms like GitHub, GitLab, and Bitbucket, which enhance community support.

The Three States of Git Files

Understanding the file states in Git is crucial:

Modified: Your file has changes that are not yet committed to your database. It's like marking up a draft without finalizing the changes.
Staged: You're ready to commit the changes. Think of it as wrapping a gift before giving it.
Committed: The changes are safely stored in your local database, something like storing the wrapped gift in a safe until the party.

After committing, you push your changes to a remote repository.

Key Concepts and Operations

Remote Repository: A remote repo is like a shared library on the internet or a network where everyone can access the books at the SAME TIME.
Common Operations:
- Creating and Switching Branches: Developers are encouraged to utilize branches such as dev, test, and prod. This structure allows you to switch between different stages of development. The primary advantage is the ability to thoroughly test changes in the test branch before merging them into the prod (production) branch. This strategy helps prevent the introduction of breaking changes to your main deployment.
- Pulling changes: Bringing the latest updates from the shared library to your personal collection.
- Pushing changes: Sending your latest writings to the shared library for others to access.

Best Practices

Commit Early and Often: Regular updates help colleagues stay in sync, provide feedback, and avoid complex merging.
Understanding Merging and Rebasing: Merging integrates changes from one branch to another to create a unified history. Rebasing is like rearranging the books on your shelf to make it look as if they've always been in that order.

Conclusion

By now, you should have a clearer understanding of how Git functions as a version control system—a digital history for every change, ensuring that collaborations go smoothly and efficiently.

Happy coding!

Extra resources

To Be Or Not To Be

Shavon Harris — Wed, 19 Jun 2024 11:13:03 +0000

I'm excited to get to my third day of blogging! Covering beginner concepts in Javascript is definitely bolstering my confidence, I hope its helping you as well!

Today we dive into closures once again, it's an important thing to master, but we are also looking at error handling and comparing values.

Today's Journey

In this problem we are writing a function expect that takes in a value val and returns an object that holds two functions.

@param {string} val
@return {object}

const expect = function(val){
    return {
        toBe: function (value) {},
        notToBe: function (value) {}
    };
};

More on Closures

This function looks differently than the ones I wrote out yesterday and the day before
[https://dev.to/shavonharrisdev/encapsulation-closure-and-a-higher-order-function-walk-into-a-hackathon-403b],
https://dev.to/shavonharrisdev/closures-closures-closures-3o3n
but this is still a closure.

Why? Well because the key characteristic of a closure is its ability to remember and access variables from its parent function or lexical scope in fancy programmer jargon, even when the function is executed outside that scope. Functions toBe and notToBe access the val parameter of their parent function even after expect has finished execution.

Comparing Values

The toBe function accepts a value and returns true if the two values === each other. If they are not equal, it should throw an error "Not Equal".

In other words we will have two values that we are comparing. A value comes from the expect function (val) and another comes from the toBe function(value). We ask ourselves, or rather the program, are val and value strictly equal to each other? Are they the same value and the same data type? If yes, wonderful. If no, throw an error!

I'll also add the reverse logic in a notToBe function.

const expect = function (val) {
  return {
toBe: function (value) {
      if (val === value) {
        return true;
      } else {
        throw new Error("Not Equal");
      }
    },
notToBe: function (value) { 
      if (val !== value) {
        return true;
      } else {
        throw new Error("Equal");
      }
    }
  };
};

What is a throw new Error 😳

throw new Error is like a special phrase that means hold up, this makes no sense!

The throw is just like raising your hand and saying STOP. It stops the normal flow of your program.
new Error creates a new "Error" object. If that sounds confusing just think of it as a bucket called Error that holds a note and that note explains the problem.
If you say (throw new Error("message")); This is like stopping the story while someone is telling it and holding up a note that says "THAT DOESN'T MAKE SENSE AND THIS IS WHY". It's important to use clear descriptive error messages for easy understanding.

Throw new Error is really helpful for handling errors and debugging.

Try...Catch

The last thing I do is use a try catch block to log the results.

console.log("toBe", expect(5).toBe(5)); // 
try {
  console.log("notToBe", expect(5).notToBe(5)); 
} catch (e) {
  console.error(e.message); 
}

Why use Try/ catch and not just a console.log or return?

With a throw new Error message you're basically saying if this code goes goes wrong stop everything and throw an error. However, you might not want to stop everything in a large application, I mean, one monkey doesn't need to stop the whole show 🤭. So, you wrap the code that might throw an error in a try...catch block so that you're prepared for the possibility of an error. If an error does occur you can handle it neatly, like perhaps deciding whether to just log the error, continue, or do something else. This way your program will not just stop.

const expect = function (val) {
  return {
toBe: function (value) {
      if (val === value) {
        return true;
      } else {
        throw new Error("Not Equal");
      }
    },
notToBe: function (value) { 
      if (val !== value) {
        return true;
      } else {
        throw new Error("Equal");
      }
    }
  };
};

console.log("toBe", expect(5).toBe(5)); // 
try {
  console.log("notToBe", expect(5).notToBe(5)); 
} catch (e) {
  console.error(e.message); 
}

That's all for today, Happy Coding!

Closures! Closures! Closures!

Shavon Harris — Wed, 21 Feb 2024 16:24:24 +0000

From what I've seen in these coding challenges, you can never have enough practice with closures. So let's dive into an example of how to tackle them.

But First, What's a Closure Again?

Imagine a big robot in a kitchen, whipping up an omelet. It assigns each task—chopping onions, cracking eggs, adding spices—to a fleet of tiny robots. These mini-robots venture off to their stations, but no matter where they are in the kitchen, they never forget their main goal, thanks to a recipe card (closure) that remembers everything the big robot told them.

In programming terms, a closure is just like that recipe card—a function that remembers the variables from where it was created, no matter where you use it later.

The Counter Challenge

We're given a task: start with an integer n, and create a counter function that initially returns this integer. Then, each time you call it, it should return n + 1.

What to Do First?

List out what we know:

Parameter: an integer n
Return: a function called counter

If I'm returning a function, I know that I'm dealing with some sort of closure, so let's set that up.

// Create a main function 
function createCounter(n) {
   // Return the counter function
   return function counter() {
      console.log(n);
   };
}

Now, let's test our setup:

const myCounter = createCounter(10); // We've got our recipe card!
myCounter(); // Prints out 10

Something is not quite right though. We're not incrementing the integer n at all. Luckily, we can use an operator to easily increment.

Understanding n++

Using n++ is like telling one of our mini-robots to add a pinch of salt and then prepare to add another pinch the next time around. It increments n but gives us the value before the increment.

Let's tweak our function:

function createCounter(n) {
    // Return the counter function
    return function counter() {
        return n++;
    };
}

const myCounter = createCounter(10);
console.log(myCounter()); // 10
console.log(myCounter()); // 11
console.log(myCounter()); // 12

Making It Stick

Try It Out: Play around with this code in the developer tools or on a site like CodePen? Hmmm. What happens if you use ++n instead of n++?

Challenge Yourself: Can you modify the createCounter function to start counting down instead of up?

Wrapping Up

Closures might seem confusing at first, I also had a really hard time grasping the concept, but with a bit of practice, they become a really useful tool in JavaScript. They're like having a secret recipe that only your function knows about, allowing you to write more predictable and bug-free code.

Keep coding!

Encapsulation, Closure, and a Higher Order Function walk into a Hackathon.

Shavon Harris — Tue, 20 Feb 2024 14:55:47 +0000

How do they work together?

Closures, encapsulation, and higher-order functions are three cornerstone concepts in programming that, though distinct, often work hand in hand within JavaScript to craft more efficient and elegant code.

Let's delve into a LeetCode problem that, at first glance, appears straightforward but beautifully weaves together these three essential programming concepts.

So, let's create a function that returns another function!

Problem:

Create a function that returns a "Hello World" function.

Step One: Define the Outer Function.

We can define our outer function to have only one job. Encapsulate (more on what this means below) the logic for creating another function. This particular function will not take any parameters, it's sole purpose is to return another function that when invoked, will say, "Hello world".

function createHelloWorld() {
    // This function will return another function.
}

Step Two: Create the Inner Function

Inside createHelloWorld, we can define another function called inner function for simplicity. This function is a one trick pony. It takes no parameters and when invoked, returns the string " Hello World". It's static and does one thing and one thing only, but it does it well.

function innerFunction(){
  return "Hello World";
}

Step Three: Return the inner function

So now createHelloWorld returns innerFunction. We are handing over the function itself - not triggering its execution.

This is where the encapsulation magic happens, neatly packaging the inner function within the outer one.

function createHelloWorld() {
   function innerFunction() {
    return "Hello World";
   }
   return innerFunction;
}

Step Four: Utilizing the function

So what do we do now? Well we need to see how we can use this createHelloWorld function. We invoke it and assign the result to a variable, f in our case. The variable f now holds a function, (our inner function) that we can call whenever we like.

const f = createHelloWorld();

console.log(f()); // Outputs: "Hello World"

function createHelloWorld() {
  function innerFunction() {
    return "Hello World";
  }
  return innerFunction;
}
const f = createHelloWorld()

And then we do call it:

//log variable f
console.log("f", f());

That was a lot of work just to log Hello World. Why is this useful?

Well turns out we used some pretty powerful concepts.

In simple terms

Encapsulation: Like a secret compartment, it involves tucking away details within a function, revealing only what's necessary. That's the role of our outer function.It not only hides complexity but also protects the integrity of the inner functions operations by not exposing any internal variables or states directly to the other parts of the code.
Closures: Think of it as the inner function holding onto a piece of the outer function like a keepsake.This allows the inner function to access and use variables from the outer function even after the outer function has executed and returned.
Higher-Order Functions: These are the VIPs of the function world, transforming functions by either accepting them as parameters or creating new ones to return. Higher order functions are used in event handlers and array methods. You'll find them everywhere.

Wrapping it up

This is one of the trickier topics to grasp for a beginner programmer but it really shows how flexible and powerful Javascript is as a programming language. Before you know it, you'll see these patterns popping up everywhere!

Keep at it, and happy coding!