I Built a Smart Bookmark Extension

Wisdom Ikezi — Sat, 08 Mar 2025 14:44:21 +0000

The Problem

Finding Bookmarks Shouldn’t Be This Hard

Like many others, I’ve always used browser bookmarks to save interesting articles, videos, and useful websites. But over time, my bookmarks became an unorganized mess—a black hole where saved pages went to disappear. Finding a specific bookmark when I needed it felt like searching for a needle in a haystack, especially with Chrome’s default bookmark manager and most existing extensions.

The biggest issue? Search is too rigid. Sure, I could apply date filters, but that barely helped. If I didn’t remember the exact title or keyword, my bookmarks remained buried, even though I knew they were there somewhere.

So, I decided to build something that could actually solve this problem for me.

How PageStash Works

The idea was simple: use AI to make bookmarks more searchable. Instead of relying solely on keyword matching, I leveraged Gemini to create a more intuitive search experience.

Here’s how it works:

When searching for a bookmark, the extension gets a list of URLs and titles.
Gemini then analyzes the content and determines what the bookmark is actually about and filters the ones that matches your search term

For example, if you saved an article titled “10 Ways to Improve Productivity” but only remember that it was about time management, you can simply search for “tips to manage time better”, and the system will surface your bookmark.

Challenges I Faced

While most websites include useful metadata in the URL or title, not all do. If a webpage lacks descriptive information, the AI model might not be able to categorize it accurately, which in turn reduces accuracy.
Privacy Concerns
Security was a top priority while building PageStash. All search requests are processed through Gemini’s API, meaning only Google handles your data.

To give users more control, I also introduced a “Credentials” page, allowing them to attach their own Gemini API key. This key is securely stored locally on their device, enhancing privacy while also improving response time and performance—especially when handling multiple requests at once.

Final Thoughts

While I tried to aim for a 100% accuracy, achieving perfection in AI-driven search is nearly impossible. That said, I’m proud of what I built, and I might take on the challenge of improving it in the future.

I had a blast working on this project, and I’d love to collaborate on similar ideas. If you’re interested in building something together, I’m usually free on weekends!

Source Code
Extension

What is Defensive Programming🛡️

Wisdom Ikezi — Sat, 01 Feb 2025 21:43:19 +0000

Building Code That’s Ready for Anything

What is Defensive Programming?
Why is Defensive Programming Important?
Common Defensive Programming Techniques
When is Defensive Programming Too Much?
Final Thoughts

What is Defensive Programming?

Defensive Programming is an approach in which developers anticipate potential issues and write code to manage unexpected inputs, system failures, or errors.

Why is Defensive Programming Important?

Defensive programming enables the programmer to view the code from several angles: a user's perspective, an attacker's viewpoint, and a careless developer's stance. Additionally, it boosts the chances of creating bug-free software.

Benefits of Defensive Programming

Handles the Unpredictable

Users don’t always interact with software as we expect. Defensive programming allows your application to handle these situations effectively.

Prevents Catastrophic Failures

An unhandled error can result in significant crashes or data loss. Defensive programming helps mitigate this.

Improves Code Maintainability

Writing defensively makes your code simpler to debug, extend, and maintain for future developers.

Increases Security

Validating and sanitizing inputs can prevent security vulnerabilities like SQL injection or cross-site scripting.

Common Defensive Programming Techniques

Applying the following guidelines can help us implement defensive programming effectively. These principles ensure that your code is robust, secure, and able to handle unexpected situations gracefully.

Validate Inputs and Outputs

It’s crucial to ensure that all incoming and outgoing data adhere to the expected formats and constraints since user input, API responses, and external data sources cannot be trusted without proper validation. Furthermore, always sanitize data before displaying it to users to prevent any potential vulnerabilities from arising.

// Validating Forms
import { useForm } from "react-hook-form";
import { z } from "zod";

const UserSchema = z.object({
  email: z.string().email(),
  name: z.string().min(2),
  password: z.string().min(7),
});

const UserForm = () => {
  const { handleSubmit, register } = useForm({
    defaultValues: {
      name: "",
      email: "",
      password: "",
    },
  });

  return (
    <form
      onSubmit={handleSubmit((data) => {
        const response = UserSchema.safeParse(data);
        if(response.success) {
          console.log("This is Sparta🛡️");
        }
      })}
    >
      <input {...register("name")} type="text" placeholder="Name" />
      <input {...register("email")} type="email" placeholder="Email" />
      <input {...register("password")} type="password" placeholder="Password" />

      <button type="submit">Submit</button>
    </form>
  );
};

Validating forms is possible with vanilla javascript, but this process is unadvised.
Using a proven library like zod or yup makes your life easier.
In the example above, we are using zod to verify that the response we receive from the user aligns with the schema/requirements described. We can also apply part of this approach to validate API responses.

UserSchema.safeParse(apiJsonResponse);

Null Checks

Prevent null exceptions by checking values before use. In JavaScript, we can utilize optional chaining to diminish the chances of these occurring.

const user = null;
user?.showHello(); // No Error

Fail Gracefully

It's important to design your software so that it can handle errors and exceptions gracefully, ensuring it doesn't crash. You can add helpful features like try-catch blocks, fallback procedures, and default values to keep everything running smoothly. It’s also a great idea to display clear and descriptive error messages when issues arise, as this can make the experience much more user-friendly!

Testing

Taking the time to write tests that ensure specific parts of your software function as expected makes a big difference.

Avoid Magic Numbers and Hard-Coded Values

Use named constants or enums instead of arbitrary numbers or strings. This method enhances the readability of your code, simplifies maintenance, and reduces the likelihood of errors during updates.

Limit the Scope of Variables

Define variables within the narrowest scope necessary to minimize unintended side effects. This approach keeps your code modular, making it easier to maintain and debug. Additionally, we must avoid all unnecessary globally scoped variables.

When is Defensive Programming Too Much?

Although defensive programming is crucial, excessive implementation may result in excessively complex code. Finding the right balance can sometimes be challenging; I sometimes find myself in this situation.
To address any confusion, I recommend you consider the following questions:

Is the code becoming bloated and unreadable?
Will the current validations, checks, etc., degrade the user experience?

If that’s the case, I suggest lowering the number of checks. You can move forward if user experience is a secondary concern and application security is the top priority.

Final Thoughts

Defensive programming extends beyond merely preventing crashes; it focuses on developing reliable, secure, and maintainable software. Always ask yourself: "What could go wrong?" and write your code with that in mind.

DEV Community: Wisdom Ikezi

I Built a Smart Bookmark Extension

The Problem

Finding Bookmarks Shouldn’t Be This Hard

How PageStash Works

Challenges I Faced

Final Thoughts

What is Defensive Programming🛡️

Building Code That’s Ready for Anything

What is Defensive Programming?

Why is Defensive Programming Important?

Benefits of Defensive Programming

Handles the Unpredictable

Prevents Catastrophic Failures

Improves Code Maintainability

Increases Security

Common Defensive Programming Techniques

Validate Inputs and Outputs

Null Checks

Fail Gracefully

Testing

Avoid Magic Numbers and Hard-Coded Values

Limit the Scope of Variables

When is Defensive Programming Too Much?

Final Thoughts