Create 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.
Timonwa's Notes — Web Dev, Web3, AI, Open Source & Tech Writing
In-depth articles and tutorials on web development, open source, AI, Web3, and developer tooling—focused on clarity, practical learning, and real-world use cases.
Latest posts
Build 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.
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.
HTML 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.
I Came, I Saw, I Survived: My 2025 Story
A personal reflection on the challenges, growth, and lessons learned in 2025.
How 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.
Work-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.
How 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.
2024: 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.
Practical 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.
Elevating 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.
After 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.
Understanding 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.
Hacktoberfest 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.
Making 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. 🚀
Finding 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.
Getting 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.
Introduction 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 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.
How 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.
How 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.
Unfiltered Moments: A Candid Journey Through 2023
Join me on a raw 2023 journey, where triumphs meet breakdowns, productivity battles guilt, and life unfolds unfiltered.
How 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
How 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.
How 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.
Best 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).
How 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.
Using 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.
How 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.
Why 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.
21 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
Top 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.
How CSS Methodologies can enhance Code Efficiency
Learn how to avoid disorganized code by prioritizing proper CSS methodologies for readable, maintainable, and scalable code.
The 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
Why 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.
Understanding 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.
How 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.
How to Convert SVG to React Component for Dynamic Styling
Learn how to transform static SVGs into reusable React components.
My 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.
Creating 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.
Open 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.
How 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.
How 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.
How 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.
How 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.
Tech 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.
What 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?
How 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.
Tech 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.
all 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.