DEV Community: Precious Kelvin Nwaogu

I Just Launched a Chrome Extension called productivity timer

Precious Kelvin Nwaogu — Tue, 08 Jul 2025 23:40:56 +0000

Precious Kelvin Nwaogu

Jun 24 '25

I Just Launched a Chrome Extension!... (Productivity Timer)⏳

#javascript #api #productivity #html

Comments 7

1 min read

I Just Launched a Chrome Extension!... (Productivity Timer)⏳

Precious Kelvin Nwaogu — Tue, 24 Jun 2025 16:18:20 +0000

Hey friends & devs!

I built a Productivity Timer Chrome extension, and guess what? It just got approved on the Chrome Web Store! 🤯🎉

It’s a clean, lightweight Pomodoro-style timer built to help you stay focused, even if you close the popup or restart your browser. Built with HTML, JS, & Chrome's background API feature! 📌

🔗 Try it out & rate it here:

👉 Productivity Timer - Chrome Web Store

💡 Features:

Set your custom focus time ⏰
Runs in the background & survives Chrome restarts
Instant notifications (toast + desktop)
Tracks your last 10 focus sessions
Minimal & clean UI

I’d love your feedback, bug reports, or just a star if you like it! 🙌

Let’s beat procrastination together 💪
— Precious Kelvin.N

Juneteenth Journey - A Celebration of Freedom

Precious Kelvin Nwaogu — Mon, 23 Jun 2025 15:10:35 +0000

This is a submission for Frontend Challenge - June Celebrations, Perfect Landing: June Celebrations

What I Built

I created "Juneteenth Journey" - an interactive, educational landing page celebrating Juneteenth (June 19th), which commemorates the end of slavery in the United States. This project highlights:

The historical significance of Juneteenth through an interactive timeline
Traditional celebration methods with visual examples
A local event finder (simulated)
Curated educational resources
Fully responsive and accessible design

I chose Juneteenth because it represents both an important historical milestone and a vibrant modern celebration of African American culture and resilience. As a federal holiday since 2021, it's crucial to educate people about its significance while making the information engaging and accessible.

Demo

kelvincode1234.github.io

View Source Code on GitHub

Journey

Development Process

Research First: I began by thoroughly researching Juneteenth's history and traditions to ensure accurate representation
Mobile-First Design: Created wireframes focusing on mobile experience before scaling up
Component Architecture: Built the page in semantic sections with clear visual hierarchy
Interactive Elements: Added the timeline and resource selector to enhance engagement
Accessibility Audit: Used WAVE and keyboard testing to ensure inclusivity

Technical Highlights

Pure CSS Timeline: Created without JavaScript for better performance
Responsive Grids: Used CSS Grid and Flexbox for adaptable layouts
Progressive Enhancement: Core content works without JavaScript
Performance Optimization: Achieved 95+ Lighthouse scores

Challenges & Solutions

The biggest challenge was making the historical timeline both informative and visually engaging. I solved this by:

Creating a responsive CSS-only timeline that transforms on mobile
Adding subtle animations triggered on scroll
Including concise but impactful historical details

What I'm Proud Of

Accessibility Implementation:

Full keyboard navigation
ARIA attributes where needed
Proper color contrast ratios
Reduced motion options

Interactive Resource Section:

Clean highlight-and-expand pattern
Curated quality educational links
Smooth transitions between states

Visual Design:

Color scheme reflecting traditional Juneteenth colors
Balanced information density
Mobile-friendly touch targets

Next Steps

I'd love to:

Add real event data through an API integration.
Implement user accounts for saving favorite resources.
Create a companion educator's guide PDF.
Translate content to other languages for broader accessibility.

This project is licensed under MIT.

Create your very first NPM Packages

Precious Kelvin Nwaogu — Fri, 20 Jun 2025 23:08:23 +0000

Dhruv Joshi

Jun 20 '25

How to Create Your First NPM Package (and Why You Should)

#npm #programming #beginners #productivity

Comments 7

5 min read

Create your very first NPM Packages

Precious Kelvin Nwaogu — Fri, 20 Jun 2025 23:08:23 +0000

Dhruv Joshi

Jun 20 '25

How to Create Your First NPM Package (and Why You Should)

#npm #programming #beginners #productivity

Comments 7

5 min read

Five Programming Jokes You Didn’t Know You Needed Today 😄👩‍💻

Precious Kelvin Nwaogu — Thu, 19 Jun 2025 10:09:37 +0000

Hey Devs 👋🏾

We all know coding can be intense sometimes, those bug hunts, sleepless nights, and caffeine-fueled debugging sprees. But every once in a while, we need a breather… or a good laugh. Here's a couple of light-hearted dev jokes to brighten your day:

So here we go:

1. What are bits?

👉 Tiny things left when you drop your computer down the stairs. 🥹

2. I just got fired from my job at the keyboard factory.

👉 They told me I wasn't putting in enough shifts. 😩

3. Where did the API go to eat?

👉 To the RESTaurant. 🍽️ (Because even endpoints need a break!)

4. A male developer often gets called as a Dev, then what would you call a female developer?

👉 Devi. 🤗 (Yep, still coding… but with extra elegance!)

5. Four engineers get into a car. The car won’t start.

The Mechanical Engineer says: “Probably a dead battery.”
The Chemical Engineer says: “Could be impurities in the fuel.”
The Electrical Engineer mutters: “Maybe a wiring issue?”
But then the IT Engineer goes: “Hey guys… what if we all get out of the car and get back in?” (Because let’s be honest… it works with Windows sometimes! 🤗)

If this made you smile, we’ve got tons more where that came from! 🎯

👉 Check out our full collection of programming jokes at aquascript/Progm_Jokes, your official sidekick for tech giggles and developer sanity.

🔗 www.aquascript.xyz – not just tools & resources, but also your coding comic relief zone.

Let’s keep the dev spirit light and lively. 💻💬
Note: If you’ve got a favorite programming joke, drop it in the comments. Who knows? It might just make it into our next feature!👌

[Boost]

Precious Kelvin Nwaogu — Thu, 12 Jun 2025 09:25:27 +0000

Kevin Ramirez

Jun 10 '25

Recreating Apple's Liquid Glass Effect with Pure CSS ✨

#css #design #webdev #frontend

Comments 18

3 min read

🔥 use-custom-event-listener, A Lightweight React Hook for Custom Events

Precious Kelvin Nwaogu — Tue, 03 Jun 2025 16:13:47 +0000

Ever wished handling custom DOM events in React could be easier? Now it is!

use-custom-event-listener is a zero-dependency, TypeScript-ready React hook that gives you full control over custom events in your app — with automatic cleanup, async support, and a slick API.

Created by @marvelcodes 👏

🌟 Features

🎯 TypeScript support out of the box
🔄 Listen to one or multiple events with ease
🧹 Auto cleanup when your component unmounts
⚡️ Supports async callbacks
🎨 Simple and expressive API
📦 Zero dependencies

📦 Installation

pnpm add use-custom-event-listener

You can also use npm or yarn.

🚀 Usage

Basic Example

import {
  useCustomEventListener,
  dispatchCustomEvent
} from 'use-custom-event-listener';

function MyComponent() {
  useCustomEventListener('dataRefresh', () => {
    console.log('Data refresh event received!');
  });

  return (
    <button onClick={() => dispatchCustomEvent('dataRefresh')}>
      Refresh Data
    </button>
  );
}

Multiple Events

useCustomEventListener(['dataRefresh', 'userUpdate'], () => {
  console.log('Custom event received!');
});

Async Callback Support

useCustomEventListener('dataRefresh', async () => {
  await fetchData();
  await updateUI();
});

📘 API Reference

useCustomEventListener

A React hook for listening to one or more custom events.

useCustomEventListener(
  eventNames: string | string[],
  callback: () => Promise<void> | void
)

eventNames: A single event name or array of names.
callback: Function to run when the event fires (can be async).

dispatchCustomEvent
Dispatches a custom DOM event.

dispatchCustomEvent(eventNames: string | string[])

🧠 Best Practices

✅ Use unique, descriptive event names
✅ Let the hook handle cleanup, no manual work needed
✅ Prefer multiple event names in one hook to reduce overhead
✅ Lean into TypeScript for the best DX

🤝 Contributing

Pull requests welcome!
Check it out on GitHub → github.com/MarvelNwachukwu/use-custom-event-listener

📜 License

MIT © Marvellous Nwachukwu

If you’re building complex React apps that rely on event-driven logic, give this hook a try. It’s intuitive, type-safe, and refreshingly lightweight. Big props to @marvelcodes for this solid addition to the React dev toolkit. 🙌

Happy coding! 🚀

Amazing Tool

Precious Kelvin Nwaogu — Tue, 03 Jun 2025 09:27:38 +0000

Arindam Majumder

Jun 2 '25

🤖 I Built an AI Agent That Finds Jobs for Me 🤯

#ai #python #programming #beginners

131

Comments 56

10 min read

🌟 The Ultimate Git Reference: All Commands from Beginner to Advanced

Precious Kelvin Nwaogu — Wed, 21 May 2025 12:07:39 +0000

Hanzla Baig

May 21 '25

🌟 The Ultimate Git Reference: All Commands from Beginner to Advanced

#discuss #git #webdev #programming

Comments 6

14 min read

Meet Hippoo: The Lightning-Fast CLI Tool Every Dev Needs to Check NPM Package Sizes

Precious Kelvin Nwaogu — Wed, 14 May 2025 21:33:29 +0000

Introducing Hippoo — a blazing-fast CLI tool that helps you analyze and compare npm package sizes before you install them. Built by James Akpan

“Don’t just install it. Inspect it.”

— Hippoo’s unspoken philosophy

In the age of bloated bundles and performance-first web apps, Hippoo steps in like a digital bodyguard. — Hippoo is a smart, sleek CLI tool that helps you check and compare npm package sizes before they enter your codebase.

No more surprises. No more blind installs.

🦛 What is Hippoo?

Hippoo (yes, with two o's) is a lightning-fast command-line tool to analyze and compare npm packages — giving you clear insights about:

📦 Minified & Gzipped Size
🧮 Dependency Count
🕸️ Download Time
🌲 Tree-shaking Support
📈 Hippoo Score (0–10)
🎯 Smart Recommendations

Hippoo answers the real dev questions:

Is this package too heavy?
Should I choose React or Angular?
Will this slow down my app?

🚀 Installation

You can install Hippoo globally using either npm or yarn:

# Using npm
npm install -g hippoo

# Using yarn
yarn global add hippoo

📖 Basic Usage

🔍 Check a single package:

hippoo react@18.0.0

⚖️ Compare multiple packages:

hippoo compare react angular

✨ Sample Output (Real Example)

hippoo compare react angular

Metric	React	Angular
Size	7.4 kB	181.0 kB
Gzipped	2.8 kB	62.3 kB
Download Time	1ms	2ms
Dependencies	0	0
Tree-Shake	❌	❌
Hippoo Score	8/10 👍	6/10 👍

🔥 Best for Performance-Critical Apps: React
🔥 Best for Feature-Rich Projects: Angular

🛠️ Command Reference

hippoo [package-name] [options]
hippoo compare [pkg1] [pkg2] [...]

Options:

-v, --version → Show version number
-d, --detailed → Show detailed breakdown
-j, --json → Output results in JSON
-h, --help → Show help info

📊 Why Use Hippoo?

📦 Size Analysis — Know what you're adding.
⚖️ Package Comparison — Pick the better tool.
🚀 Performance Insights — Stay light and fast.
💡 Smart Recommendations — Use the right tool for the task/project.

🌐 Resources

🔗 Official Website
💻 GitHub Repository
📜 MIT License

🧠 Final Thoughts

Hippoo isn’t just a tool.
It’s a mindset — inspect before install.
Analyze before adding. Optimize before bloating.
Big ups to @codiejay (James Akpan) for building something every dev can use. Let’s support, test, and spread the word. 🔥

Next time you go to install a package, pause and ask:

“Did I Hippoo it first?” 👀

💬 Feel free to share thoughts, issues, or praise in the comments. And if you're vibing with Hippoo, don’t forget to ⭐ the repo!

🌊 Dive into AquaScript: The Ultimate Playground for Developers! 🧑‍💻

Precious Kelvin Nwaogu — Sat, 10 May 2025 20:25:28 +0000

Hanzla Baig for AquaScript

May 10 '25

🌊 Dive into AquaScript: The Ultimate Playground for Developers! 🧑‍💻

#discuss #aquascript #api #programming

Comments

2 min read