Dev.to 
Medium 
Hashnode
Featured
The Beginners Guide to Hacktoberfest 2024
Series
Explore open source with our 8-part Hacktoberfest 2024 series! Learn to find projects, contribute, and make your first pull request with ease. Start your coding journey!
Featured Series
Dive deep into comprehensive tutorial series covering specific topics in depth.
-
- Featured
The Productive Developer
Series
Unlock productivity secrets with 'The Productive Developer' series - optimize workflow, stay motivated, elevate skills, become an effective developer!
- Featured
The Deep Dives
Series
Master frontend development with 'The Deep Dives' series. Each concept is meticulously explained, empowering you with the knowledge and skills to excel!
All Articles
Tutorials, guides, and deep dives on web development, Web3, AI and more
53 articles published
-
web development53 min readCreate a Multi-Room Chat App Using React and Firebase
Learn to build a real-time chat app with React and Firebase. Master room-based data models, user authentication, and create public and private rooms with join codes.
react firebase firestore -
AI21 min readBuild a Research Assistant AI Agent with TypeScript (Part 2): Callbacks, State, and Memory
Learn how to add agent callbacks, session state, and memory to a TypeScript AI agent. Build a production-ready multi-agent research assistant with ADK-TS.
ai agents typescript adk ts - AI25 min read
Build a Research Assistant AI Agent with TypeScript and ADK-TS (Part 1)
Build a multi-agent AI research assistant in TypeScript with ADK-TS. A 4-agent sequential pipeline that researches, analyzes, and writes reports.
ai agents typescript adk ts -
web development13 min readHTML Progress Bar CSS: How to Style the Progress Tag in HTML
Learn how to style an HTML progress bar with CSS, including cross-browser support for the HTML progress element, color states, animations, and custom progress bar patterns.
progress bar html css -
personal6 min readI Came, I Saw, I Survived: My 2025 Story
A personal reflection on the challenges, growth, and lessons learned in 2025.
year in review self discovery growth -
AI16 min readHow to Build Your First AI Agent in TypeScript using ADK-TS
Learn to build your first AI agent in TypeScript using ADK-TS. Create multi-agent systems with subagents and tools using external APIs. Complete tutorial for developers.
ai agent typescript adk ts -
web development5 min readWork-From-Home Setup Guide for Developers: Essentials for Comfort, Focus, and Flow
Discover the essential tools and setups for creating a comfortable and productive work-from-home environment as a developer.
remote work productivity -
web development11 min readHow to Convert an SVG into a React Component: A Simple Guide
Learn how to convert SVG to React component with dynamic styling. This guide shows how to import SVGs as components, change SVG color and size in React, and handle complex SVG files.
react javascript svg -
personal6 min read2024: A Year of Silent Growth and Self-Discovery
Rather than focusing on achievements and goals, I share the deeper lessons and experiences that shaped my 2024 journey.
year in review self discovery growth -
web development11 min readPractical implementation of the Rule of Least Power for developers
It's easy for devs to default to JavaScript to fix every problem. Let's use the RoLP to find simpler alternatives with HTML and CSS.
performance rule of least power javascript -
web development9 min readElevating Software Development Through Collaborative Feature Management
Feature flags are powerful tools for managing new releases. They let developers toggle features on and off without modifying the underlying code.
development tools deployment -
open source6 min readAfter Hacktoberfest 2024: What's Next?
Hi there! Welcome to the final article in our Hacktoberfest series. It's been an exciting journey throughout our Hacktoberfest 2024 series. We hope you've enjoyed the journey so far and are ready to take the next step.
opensource hacktoberfest -
open source8 min readUnderstanding the Open Source Community: A Guide For The Newcomers
In the previous articles of our Hacktoberfest preparation series, we've covered a lot of ground. We've learned what Hacktoberfest is, set up our development environment, found our first projects to contribute to, and even made our first pull requests.
opensource hacktoberfest -
open source8 min readHacktoberfest Etiquette and Best Practices: A Guide for First-time Contributors
Learn the dos and don'ts of Hacktoberfest etiquette and best practices in open source. Elevate your open-source contributions with essential insights.
opensource hacktoberfest github -
open source4 min readMaking Your First Open-source Contribution: A Beginner's Guide
Welcome back to our journey into the world of open source and Hacktoberfest! By now, you should be well-versed in the fundamentals of open source and ready to take your first steps as a contributor. 🚀
hacktoberfest opensource -
open source13 min readFinding Your First Hacktoberfest Project: A Step-by-Step Guide
Get started with Hacktoberfest by learning how to contribute to open-source projects with valuable tips for success. Choose the right project by knowing what to look for.
opensource hacktoberfest github -
open source9 min readGetting Ready for Hacktoberfest: Preparing for Your Open Source Journey
Prepare for Hacktoberfest with essential tools and guidelines. Set up your GitHub, Git, and code editor. Explore low-code and no-code contributions.
opensource github hacktoberfest -
open source5 min readIntroduction to Hacktoberfest: A Celebration of Open source
In the world of programming and software development, October takes on a special meaning. It's not just a month of autumn leaves and pumpkin spice lattes; it's also Hacktoberfest season! 👩🏽💻
hacktoberfest opensource -
open source12 min readHacktoberfest 2025: Complete Beginner's Guide to Open Source Contributions (10-Part Series)
Discover what Hacktoberfest 2025 is, why it matters, and how beginners can contribute to open source. Complete guide with step-by-step instructions, tools, and best practices for your first open source contribution.
hacktoberfest opensource github -
web development11 min readHow to Integrate Sender with a React Form to Collect and Deliver Emails for Free
Setting up a subscription form on your website is a great way to collect emails from your visitors. You can then use these emails to send them newsletters, updates, and other important information about your website.
mailing list sender react -
web development5 min readHow to use Inline CSS Variable in Html
Learn how to use CSS variables inline in HTML for dynamic and personalized styling. Understand the benefits and explore practical examples with inline CSS variables.
css html frontend -
personal9 min readUnfiltered Moments: A Candid Journey Through 2023
Join me on a raw 2023 journey, where triumphs meet breakdowns, productivity battles guilt, and life unfolds unfiltered.
year in review reflection growth -
web development2 min readHow to Auto Update Copyright Year on Your Website
Easily add & update the copyright year on your website with this JavaScript code. Ensure accurate protection & signal the content's ongoing relevance & maintenance
javascript snippets frontend -
web development2 min readHow to Create a Loading Spinner in CSS with Overlay.
Build a loading spinner with an overlay using Html and CSS for loading content or before page loads.
loading spinner code snippet css -
web development24 min readHow to Build Responsive Layouts Using CSS Grid
Responsive web design is essential in today's web development landscape due to the diversity of devices and screen sizes.
css responsive design frontend -
web development18 min readBest Practices for Securing Your React Application
React is a robust library that empowers developers to create reusable components and build sophisticated user interfaces. However, as with any web application, security is paramount to safeguard against potential attacks like XSS (Cross-Site Scripting) and CSRF (Cross-Site Request Forgery).
react security best practices -
open source6 min readHow to Fork a Repo on GitHub using your Mobile Device
Learn how to how to fork a repo in github on your mobile device. With the latest update to GitHub's web interface, you can now do so with the click of a button.
github tutorial beginners -
web development9 min readUsing Captcha Solvers to Improve Web Accessibility & Work Productivity
Online security is of utmost importance in the digital age. Captchas, those familiar puzzles that require users to prove their humanity by solving challenges, play a crucial role in safeguarding websites from automated bots and malicious activities.
captchas productivity web accessibility -
web development13 min readHow to Debug React Code: Tips and Tricks for Developers
Learn tips & tricks for debugging React code effectively with this article. Explore different techniques & tools to identify & fix issues in your React applications.
react debugging javascript -
web development7 min readWhy Choose Next.js for Your Next Web Development Project in 2024
Next.js provides developers with a straightforward solution to create high-performance, efficient, and scalable React apps. This article will explore the key features of Next.js and weigh the pros and cons of switching from React to Next.js for your next project.
nextjs react web development -
career8 min read21 no-code tech jobs: You don't need to write code to become a Tech Sis/Bro.
When most people think about Tech jobs, they think of coding, programming, hacking, maths. Although they are right, the tech industry encompasses more than just programmers and hackers
jobs career no code -
web development9 min readTop Features in Next.js 13
Next.js 13 brings a host of new features and improvements to the popular React framework. Check out our top picks of the best in the latest release.
nextjs react -
web development7 min readHow CSS Methodologies can enhance Code Efficiency
Learn how to avoid disorganized code by prioritizing proper CSS methodologies for readable, maintainable, and scalable code.
css debugging frontend -
web development4 min readThe Dangers of Using !Important in CSS: Why It Should Be Avoided
Learn why using !important in CSS can lead to maintenance and debugging issues, and why good CSS structure allows for cleaner and maintainable styling
debugging bugs and errors productivity -
web development6 min readWhy my React App Failed To Compile
Uncover the journey of debugging a React app, encountering compilation errors, and the importance of reading the Build log. Find motivation in tackling coding obstacles and discovering unexpected solutions. Embrace patience, perseverance, and thoroughness in overcoming bugs and errors.
debugging bugs and errors motivation -
web development9 min readUnderstanding Technical Debt in Software Development
Technical debt is a term that describes the cost associated with using quick and dirty solutions in software development. It is a consequence of prioritizing short-term gains over long-term technical excellence.
technical debt software development product management -
web development16 min readHow to Build a Real-time Chat App with React and Firebase
In this article, we will build a real-time chat app using React and Firebase. We will allow the user to log in with their google account using Firebase's Google sign-in Authentication, and we will store and retrieve all the chatroom messages using Firebase's Cloud Firestore.
react firebase javascript -
web development3 min readHow to Convert SVG to React Component for Dynamic Styling
Learn how to transform static SVGs into reusable React components.
svg react code snippet -
personal10 min readMy Journey Through 2022: From Surviving to Thriving
In 2022, I navigated challenges in my tech career and learned to trust in God. The result? Unexpected wins and growth. Read my story of survival in a year full of surprises.
year in review career experience -
web development8 min readCreating responsive images with image-set
The image-set() is a CSS function that allows web developers to turn an image into a responsive image, showing variations of the same photo for different screen resolutions when needed.
css images responsive design -
career4 min readOpen source with SheCodeAfrica at Moja Global ContributhonbySCA
So, earlier this year, I applied for and was accepted for SCA's Contributhon open-source boot camp. Yay. This note will talk about my experience and participation in the program.
opensource learning experience -
web development3 min readHow I learned NextJs in 2 days
Next.js is a React framework that makes working with React easier and faster whilst boosting the online presence and SEO of the websites built with it.
nextjs react javascript -
web development17 min readHow to Build a Responsive Image Slider with Html, CSS and JavaScript: Step-by-Step Guide
Learn to create a responsive image slider using HTML, CSS, and JavaScript. Elevate your front-end skills with this beginner-friendly project.
javascript html css -
web development13 min readHow to Build a Random Color Flipper with Vanilla Javascript
Learn JavaScript with our color flipper tutorial! Elevate your skills with this random color generator that changes element background on click.
javascript html css -
web development11 min readHow to Build an Accordion Menu 3 Simple Ways
Learn how to create HTML and JavaScript accordion menus for a cleaner and organized user experience in web design.
javascript html frontend -
open source4 min readTech Roadmap: Everything you need to help you choose and learn a career in Tech
Tech Roadmap provides you with articles, guides, videos, and other useful resources to help you choose a career path, start your journey and grow in tech.
jobs learning opensource -
web development10 min readWhat is a CAPTCHA And How To Bypass CAPTCHAs
Have you ever come across a checkbox asking you to confirm if you are not a robot followed by a visual test asking you to select images of traffic lights or something of that nature?
productivity software captchas -
web development11 min readHow to create your own custom Code Snippets right in your Code Editor
Code Snippet is a term used in programming to describe a small portion of reusable source code, machine code, or text. They help programmers reduce the time it takes to type repetitive codes while programming.
tools productivity vscode -
career4 min readTech Career Roadmap: Guiding Your Growth in Tech Careers
Discover Tech Roadmap, your ultimate resource for choosing and excelling in tech careers, curating articles, guides, videos, and more.
career tech learning -
web development10 min readall vs root vs html vs body selectors
CSS selectors are used to select elements in our web document so we can apply CSS styles to them.
css html frontend -
web development21 min readUsing CSS Variables like a Pro: A Beginners Guide to the var() CSS Function
CSS variables help you create custom CSS styles that can be reused continuously throughout your document or website. This is done using the CSS var() function.
css css variables css functions