DEV Community: Trae Zeeofor

The Misconceptions of Tech Work | The Future of Work in Africa

Trae Zeeofor — Mon, 09 Mar 2026 20:47:51 +0000

On February 12, 2026, I had the privilege of being a guest on the 𝗕𝗿𝗮𝘇𝗲𝗻 𝗘𝘅𝗰𝗵𝗮𝗻𝗴𝗲 𝗣𝗼𝗱𝗰𝗮𝘀𝘁 with 𝗩𝗮𝗻𝗲𝘀𝘀𝗮 𝗘𝗺𝗲𝗮𝗱𝗶.

The episode is titled: “𝙏𝙝𝙚 𝙈𝙞𝙨𝙘𝙤𝙣𝙘𝙚𝙥𝙩𝙞𝙤𝙣𝙨 𝙤𝙛 𝙏𝙚𝙘𝙝 𝙒𝙤𝙧𝙠 | 𝙏𝙝𝙚 𝙁𝙪𝙩𝙪𝙧𝙚 𝙤𝙛 𝙒𝙤𝙧𝙠 𝙞𝙣 𝘼𝙛𝙧𝙞𝙘𝙖.”

The interview has since been published, and you can watch it here: “https://www.youtube.com/watch?v=VM7Ldjn0u2M”

I’m not usually a public-facing person, but this was refreshing and fun to do. I hope to do more conversations like this in the future around my career and tech.

Some of the topics we covered include:
My background and transition into tech (3:50)
Misconceptions about tech work (12:20)
Challenges and risks in digital work in Nigeria (18:28)
The role of government and hopes for the future (24:25)

There are also short-form clips from the episode on the podcast’s pages:

The 48-Hour Infrastructure Overhaul: From Vercel to a Modular Stack

Trae Zeeofor — Fri, 06 Mar 2026 14:23:58 +0000

The last 48 hours have been intense. I received a “quota usage” warning from Vercel regarding image optimization, which sent me down a rabbit hole of debugging. After cross-referencing documentation for Vercel, Next.js, Cloudflare, and PayloadCMS, I finally optimized my Cache-Control headers. It’s a common headache when working across multiple layers, since settings can conflict with or override one another.

Cleaning up the database fetching cache code is a minor follow-up task that I’ll wrap up today.

I’ve since migrated the app from Vercel to Railway to keep costs under control. The transition had its challenges, but the setup is now stable. Railway handles application deployment, database hosting, and custom domain origin, while Cloudflare manages DNS and blob storage. Zoho remains my email host, Namecheap continues to act as the registrar, and the code repository of course still lives on GitHub.

The long-term goal is to eventually consolidate everything onto a self-managed VPS, but for now this architecture is a massive step forward.

From Notion to Google Drive: A Version Control Decision

Trae Zeeofor — Fri, 30 Jan 2026 22:34:12 +0000

I started using Notion in February 2021 for my coding notes and as a digital jotter, after moving away from a local Microsoft Excel setup. In December 2023, I was introduced to Google Drive (Google Docs and Google Sheets) while executing a small gig with Dave Partner (David Chimezie Ozoalor). Since then, I’ve been using both tools consistently to organize my notes and occasionally share documents.

As of January 2026, it’s time for the next installment: completely abandoning Notion and migrating everything to Google Drive.

The reason is simple, and it comes down to one killer feature: Google Drive’s Version History. It’s essentially a Git-like version control system for documents, giving you the ability to revisit and recover previous work at any point. As a software developer, version control is non-negotiable. It’s an absolute necessity!

While Notion tries to approximate this with its Trash functionality, it falls short. Google Drive’s Version History does this properly and reliably.

Google Docs and Google Sheets will also cover the template workflows I enjoyed in Notion. And since I never used Notion as a website builder, there’s nothing I’ll miss on that front.

So yeah. It’s time to migrate.

P/S: Correction. Notion does have Version History. But free accounts are allowed only 7 days of page history. You need to upgrade to a paid plan to access older versions. Whereas Google allows access beyond 7 days for free! Go figure!

Marketing, Free Tiers, and the Tools Junior Devs Grow Into Seniors With

Trae Zeeofor — Wed, 01 Oct 2025 09:55:00 +0000

I remember recent discussions in a developer community I belong to about MongoDB’s marketing efforts in Nigeria, and how they seemed somewhat misplaced given our market strengths and the fact that relational databases often perform better in real-world use cases. But I’ve noticed a few things lately:

Edidiong Asikpo, a well-known Nigerian tech lead, joined MongoDB as a Developer Advocate about 8 months ago.
A good number of recent freeCodeCamp.org YouTube tutorials around Artificial Intelligence use MongoDB as their database of choice.
PayloadCMS (a Next.js-based headless CMS I’m currently specializing in) lists MongoDB as one of its recommended databases, alongside PostgreSQL and SQLite.
I’m currently building an app with Turso (SQLite) and Prisma, and the contrast is clear: while the tech itself is solid, resources are scarce. Most of my guidance comes from documentation and LLMs, since there’s a real lack of beginner-friendly tutorials, courses, and articles on this stack. It highlights how much marketing, community content, and accessible learning materials can shape a technology’s adoption.
I suspect the popularity of the old MERN stack was largely driven by MongoDB’s marketing push and its generous free tier. Today, if you’re learning relational databases, you’ll most likely end up on Supabase (PostgreSQL), since it’s one of the few free and accessible services for hobby projects (with Neon also starting to gain traction).

Basically, as with any skill development, the work you put in today might feel small, but it compounds over time. The junior devs of today will be the senior devs of tomorrow. And the tools they grow up with, will be the ones they know best.

Responsive Layouts Done Right: The Critical Role of max-width

Trae Zeeofor — Wed, 04 Jun 2025 05:57:23 +0000

Introduction

If we’re going to talk about max-width, let’s define it properly first. The max-width CSS property sets the maximum width of an element. It prevents the width of that element (and its content) from exceeding a specific value, even if there's more space available.

In today’s digital world, we’re building for a wide range of screen sizes: phones, tablets, laptops, desktops. As web developers, we’re expected to make sites look good and work well across all of them. This is where max-width becomes a crucial part of your responsive layout toolbox.

If you’ve ever zoomed in or out in your browser or used developer tools to simulate different screen sizes, you’ve seen how your layout can break when it's not properly handled. It’s easy to unknowingly design just for your own screen, but once you start testing, the need for max-width becomes clear fast.

Media queries let you adjust layout styles at different screen widths (often using min-width), but they’re only part of the picture. max-width ensures your layout doesn’t stretch too far on large screens, helping maintain visual balance and readability.

Background

As a web developer, your job is to deliver results that meet varied client expectations. Some clients want minimalist layouts; others prefer dense, data-rich views. You’ve got to accommodate all of that, and a strong, responsive layout is your foundation.

From my experience, there are three main ways developers use max-width when building responsive layouts. And honestly, none of them should be used in isolation. The best approach is to mix and match based on the project. But this isn’t something to figure out later. Laying a solid foundation early makes future maintenance much easier and helps avoid the pain of tech debt.

Preparatory Steps

Before diving into layout styles, there are a few setup steps that apply across the board. I’m working from the perspective of a Next.js developer using Tailwind CSS, but the principles here apply no matter the tech stack. It’s all just HTML and CSS at the core.

In your root layout (usually in the /app folder for Next.js), set your html and body tags to take up the full width of the viewport. This ensures you're working with all the horizontal space the device offers.
Page width should be defined at the route or route layout level, not globally, so you can fine-tune the experience per page.
Consider using multiple layouts for different routes. This gives you the flexibility to tweak content structure per page instead of being stuck with one layout that works in one place but not another.
Let headers and footers span full width (like the root html and body elements) for consistency.

Approach 1: Fixed Max Width (Most Common)

The first and most common method is to set a fixed max-width, usually 1440px, and center your content. This means your content won't expand beyond 1440px, no matter how wide the screen gets. The extra space on either side just shows the background color or background image.

This approach is used by most major websites: Al Jazeera, CNN, Flutterwave, Paystack, and others. It gives you predictability and keeps your design clean across devices. While some older sites go narrower, 1440px is a solid standard that offers enough breathing room for modern content.

Approach 2: Multi-Column Grid with Fixed Total Width

The second approach is a multi-column layout, typically two or three columns each with a fixed width. For example, one aligned left, one centered, and maybe one on the right. Together, their widths add up to the same total (often 1440px). As the screen gets wider, the spacing between columns grows, but the columns themselves stay the same width.

This layout is less common, probably less than 5% of sites. But you’ll see it on platforms like Reddit, Facebook, and Instagram.

Approach 3: Fixed + Fluid Column Combo

This one is rare, but powerful when used right. You have two columns: one fixed (or with a max-width) and one fluid. The fluid column grows as the window gets wider. You’ll see this in layouts that prioritize a single stream of content, like Gmail’s inbox view or YouTube’s video gallery.

This layout works well when one section of your page is the clear focus and needs the majority of the space, with less important or secondary info off to the side.

Best Practice Checklist

No matter which layout you choose, a few things always apply:

1 Keep widths consistent across components on the same page. Don’t pair a 1024px max-width component with a 1280px max-width sibling component, it’ll look messy.

2 Combine media queries with max-width for the best experience. Media queries handle changes as the screen grows, while max-width keeps layout under control as screens get large.

3 Tailwind’s built-in breakpoints are perfect for this. Build mobile-first at 320px minimum width, then scale up at the breakpoints:

sm (640px) minimum width
md (768px) minimum width
lg (1024px) minimum width
xl (1280px) minimum width
2xl (1536px) minimum width

With the right layout strategy and a smart use of max-width, you can make your site feel polished, stable, and readable on every screen size.

Breaking into Tech at Midlife: A Nigerian’s Career Transition Story

Trae Zeeofor — Thu, 13 Feb 2025 07:12:02 +0000

Juggling Tech and Fatherhood. Circa January 2024

1 Introduction

Like a mature spinster eventually finding a husband, on January 6, 2025, at the ancient age of 41, and a little over two and a half years into my self-study journey, I was finally adjudged to have learned enough code to land a job where someone agreed to pay me regularly for writing it professionally.

This milestone was especially sweet, given that, through the years since being bitten by the tech bug, I must have read countless stories of others who had made the leap into tech. Now, I'm thrilled to at last be on the other side, with my own story to tell.

2 My Past Career

Since earning my BSc, I’ve had a diverse and nomadic career, primarily in sales, with stints in videography, teaching, and compliance. I’ve worked full-time at over ten companies and have a strong track record of securing jobs on merit. Throughout my career, I’ve led teams across multiple roles, managed subordinates effectively, and consistently met or exceeded targets.

However, in hindsight, I see that I wasn’t without flaws. While I thoroughly understood my job responsibilities, I struggled with office politics. I failed to grasp a crucial truth: managing downlines is essential for survival, but managing uplines is the key to thriving. To truly unlock one’s full career potential, being liked—or even loved—by peers and bosses is just as important as competence.

Looking deeper, I suspect this challenge traces back to my childhood. Having been bullied extensively as a child and teen, I became a loner. While this had its benefits—I never succumbed to peer pressure and have never smoked or done drugs—it also made bonding and teamwork difficult. I often prioritized my own path over building goodwill with colleagues, and in the long run, these missteps stunted my professional growth.

Reading Adedeji Olowe’s reflections on his early career struggles resonated deeply with me. His story felt strikingly familiar and reinforced many of my own realizations. (Read his story here: “https://dejiolowe.com/2024/12/11/let-he-who-is-without-sin-cast-the-first-stone”)

3 Personal State Of Mind

I've always had a natural enthusiasm for tech—I wrote my first HTML and CSS codes around 2002. However, with little guidance, I never pursued it seriously. Sales was fulfilling, but ultimately, it felt like a generic skill—one that anyone could be trained in within days.

As I grew older, I began to truly believe in the saying: "If you want an easier life, learn to solve harder problems." That mindset became the driving force behind my decision to embrace tech—a field where I believed I could create impactful solutions, tackle more complex challenges, and ultimately retire well off.

To develop my tech skills, I drew inspiration from my fitness journey. Since August 2020, I’ve been a dedicated calisthenics practitioner, hitting the gym at least three times a week. Both tech and fitness are romanticized and filled with hype—many start, but fewer than 10% follow through. I've witnessed this at the gym, and I've seen it in tech with two of my earliest study buddies who eventually dropped off. But I made fitness a lifestyle through unwavering commitment and consistency. I knew that if I could master calisthenics, I could apply the same discipline to mastering tech.

Becoming a first-time father in July 2023 was a pivotal moment that further fueled my motivation to stay focused on my goals. My aim is to provide a better life for my son than I had, so he can, in turn, build a brighter future for his own children and community.

I chose the self-taught path not only because I'm a bit frugal (lol), but also because, in tech, knowledge cannot be mechanically transmitted—it can only be acquired through deep self-study. Ultimately, you're responsible for your own success. Furthermore, web development isn’t a field defined by certifications—it’s about evidence-based skills. I’ve always believed that JavaScript—and software development in general—isn’t something best learned in tech schools or boot camps. At best, they’re appetizers. True mastery comes from making it a lifestyle and consistently working on it day and night for months or even years.

Throughout this journey, I’ve kept Ekpa Ntan’s (a senior colleague I met earlier “https://www.linkedin.com/in/ekpa-ntan-3571299b/”) words close to heart: 'Never stop learning, never stop practicing, never stop improving. It's better to be prepared and not have opportunities yet than to spot opportunities and not be sufficiently qualified for them”.

4 My Coding Journey

Everyone's coding journey is unique, with some progressing faster than others. My own journey has been long and winding, marked by periods of intense focus punctuated by distractions. However, in April 2022, circumstances changed, and I made the decision to commit to learning full-time.

A personal setback in December 2022—when my car was stolen—further galvanized my determination. I doubled down on my efforts, adopting a “do or die” mentality, driven by the promise of future rewards far surpassing this loss.

It’s important to note that the bar for entering the tech industry has risen significantly. The skills that were sufficient for landing a job in 2016 are no longer enough; today, you need to know at least 10 times more to be competitive.

4A. My Coding Timeline
I’ve always embraced project-based learning, which is the standard in web development. I’ve built projects based on what I’ve learned and estimate that I’ve deployed over 100 finished apps to GitHub at one point or another (though many of the earlier ones have since been deleted). My initial projects were mostly sourced from FrontendMentor “https://frontendmentor.io/”, and I highly recommend them.

Here’s a brief overview of my journey:

April – June 2022: Brushed up on HTML & CSS over two months while learning intermittently.
Mid to Late 2022: Focused on JavaScript, building projects consistently. My WhatsApp friends can testify—I spammed them with countless project links for feedback.
Early 2023: Started learning React, Next.js, TypeScript, and Tailwind CSS, building projects along the way.
First Interviews (Early 2023): Quickly realized I needed to upskill significantly to be job-ready.
November 2023: Began grinding LeetCode daily for consistency.
Late 2023: Started backend development with Node.js, Express, and MongoDB (MERN stack).
Early 2024: Landed an unpaid internship for three months, which exposed me to real-world tech environments.
Mid 2024: Expanded into SQL, relational databases, ORMs, API development, testing, and authentication.
Q3 2024: Earned my first pay from coding (converting Figma designs to code—though I didn’t deliver 100%). Also started interviewing more seriously.
Q4 2024: Interview-heavy phase, applying more strategically, improving my performance, and continuously upskilling.

4B. How Coding Became a Lifestyle
Tech became more than just a career path—it became my lifestyle. I actively participated in:

Mark Essien’s HNG Internship (2023)
Multiple Chingu cohorts (pair programming & team projects)
Tech spaces on Twitter, engaging in discussions and networking
Tech-focused YouTube channels, absorbing valuable insights
Discord & Telegram coding communities, learning and sharing knowledge
Numerous physical & online interviews, including take-home assessments
Extensive use of AI for learning & productivity
Countless hobby projects & technical writing, refining my skills
Optimized my Twitter and LinkedIn connections to center around the tech industry, engaging mainly with developers, engineers, and tech enthusiasts

By late 2024, all this effort culminated in my first official coding job. It was a long road of relentless learning, continuous self-improvement, and unwavering determination.

5 Learning Resource Recommendations

For full-stack web development, I relied heavily on the following three interactive and free resources:

freeCodeCamp “https://www.freecodecamp.org/learn”.
Codecademy “https://www.codecademy.com/catalog”.
Scrimba “https://v2.scrimba.com/courses”.

In addition to these resources, I generously utilized YouTube tutorials and courses to dive deeper into specific topics as needed.

For career path guidance and a comprehensive roadmap, I frequently referred to The Odin Project “https://www.theodinproject.com/paths”.

As I gained more experience, I began relying more on official documentation as a primary learning resource. Reading and consulting documentation became an essential part of my education, helping me understand frameworks, libraries, and best practices directly from the source.

6 Practical Reality of Software Development

Acquiring new skills, whether for a career change or otherwise, is a process that takes time. Be wary of anyone promising instant results, such as learning X in 90 days and making big money. These claims are often designed to exploit desperation and extract payment for courses or other resources.

Many Nigerians who made a midlife career change after relocating abroad (Japa) can attest that success didn't come overnight. It took them time, often a couple of years, to find balance and stability. The key is to stay resolute and focused on long-term goals.

6A. The Two-Part Journey of Learning to Code
Learning to code is a two-part journey:
The first and hardest part – Becoming skilled enough to land your first job.
The second, lifelong part – Committing to continuous learning so you can grow, stay relevant, and maybe even "blow". I’m all in for both!

6B. Navigating Tech as a Midlife Career Changer
Be prepared for disrespect, especially in Nigeria, where cheap labor is abundant. Keep your eyes on the end goal and stay the course.
Your first job won’t be glamorous, but it gets you in the door. The key difference? You’ll be writing production-ready code, not just hobby projects.
Humble beginnings are part of the process. They build your experience and propel your skillset—a necessary rite of passage.
If you persist, the sky's the limit! Options include freelancing (Upwork, etc.), applying for high-paying remote jobs, or emigrating as a skilled worker. Either way, software development makes you a highly sought-after professional.

6C. Dealing With Ageism
Ageism exists. (I’m the oldest person in my branch and likely among the oldest persons in my company.) While it can be challenging, it’s not impossible to thrive in spite of it.

Stay humble. De-emphasize age in your CV and personal branding. What matters is what you can do, not how old you are.

6D. Ideal vs. Reality of Transitioning to Tech
The best time to transition is during your university days, NYSC, or as a job seeker, when you don’t have heavy financial responsibilities.

If you’re older, you must make extreme sacrifices, devoting most of your time and attention to code. Plus have other sources of income to sustain yourself while learning.

Expect it to take at least anywhere from 1 to 3 years before you can minimally sustain yourself with your tech earnings.

And If you can’t keep the hunger away long enough to focus and learn tech, you honestly won’t make it.

7 My Job story

I’ll never forget the path that led me to my current role. Ironically, the same company that hired me had previously rejected me for a volunteer position. That rejection was a stark reminder of my desperation at the time—I was applying to every opportunity that crossed my path, regardless of fit, just to gain interview experience.

This wasn’t my first time applying twice to the same company. In fact, I had reached the interview stage twice at two other companies before ultimately failing both times.

However, perseverance eventually paid off. Here’s a brief timeline of my final application and hiring process: Everything was done remotely prior to hiring. But work is onsite.

November 16, 2024 – Submitted my first application for a different role, but the interview was unsuccessful.
December 25, 2024 – Reapplied to the company.
December 27, 2024 – Attended my first interview.
December 31, 2024 – Completed a take-home test.
January 3, 2025 – Participated in a review session for the take-home project.
January 6, 2025 – Started work on an initial three-month contract.

This experience reinforced an important lesson: rejection isn’t failure—it’s just a step in the process. Keep learning, keep improving, and keep trying. Eventually, the right door will open.

8 Real-Life Stories of Resilience in Tech

The current tech landscape is undeniably challenging. Layoffs, remote work shifts, and AI-driven automation have made it easier for companies to outsource tasks, increasing job uncertainty. However, for many African developers, our lower capital costs make us attractive outsourcing candidates—creating opportunities despite the global downturn.

Even in the U.S., I’ve seen several experienced tech YouTubers I follow navigate layoffs and eventually find new jobs in 2024, proving that persistence pays off. Here are some of their their inspiring stories:

Chris Sean: "It Took Me 9 Months To Get A New Tech Job | Life as a Web Developer 2024" (July 9, 2024) “https://www.youtube.com/watch?v=Vt2TwifKh30&t=22s&ab_channel=ChrisSean”

Cody Codes: "I got a Software Engineering Job in the WORST job market (2024)" (October 10, 2024) “https://www.youtube.com/watch?v=IUVRsUiBMb8&ab_channel=CodyCodes”

Namanh Kapur: "Laid Off to Senior Software Engineer at LinkedIn (My Story)" (November 27, 2024) “https://www.youtube.com/watch?v=AdWM3q8fiHE&t=2s&ab_channel=NamanhKapur”

Bukola: "I Got An Offer | Job Searching In A Tough Tech Market Ep 4" (January 5, 2025) “https://www.youtube.com/watch?v=B9Ky_EN6Z2s&ab_channel=Bukola”

These stories reinforce a simple truth: where there’s a will, there’s a way.

To successfully navigate today’s job market, it’s essential to:
✅ Save money to weather uncertain periods.
✅ Diversify income streams to reduce reliance on a single job.
✅ Stay adaptable and continuously learn new skills.

The tech industry is tough, but resilience and strategy can make all the difference.

9 Heartfelt Shout-Outs

I'd like to extend my heartfelt gratitude to the following individuals who have supported me throughout my journey:

My wife, Neky – For making this journey possible in every way.
Solomon Ekrebe “https://www.linkedin.com/in/krebedev/” – For always lending a listening ear and providing guidance from Day 1.
Obinna Akunne “https://www.linkedin.com/in/obinna-akunne-080b5273/” – My cousin, for being a real-life example of the possibilities before me.
Chinonso Ani “https://www.linkedin.com/in/chinonso-ani/” – For giving me the privilege of my first real work experience simulations.
All four of my living siblings – For loving me unconditionally.

Thank you all for your encouragement and motivation. I couldn’t have done it without you.

Efficient Shortlisting in Programming (Software Development) hiring

Trae Zeeofor — Sun, 24 Nov 2024 11:04:03 +0000

The subject matter refers. This is a subjective take based on my cumulative experiences during my career transition to tech. I'm confident that, if applied, it proves true for about 90% of entry-level or junior tech roles' job application feedback any candidate would receive.

Tech as a profession is highly remote-friendly. When all is said and done, it’s just you, your table, your chair, and your computer. You muse over logic, give instructions to your computer based on that logic, and await results. It’s a career path of constant learning, application of learnings, and continuous engagement.

Time is, therefore, extremely valuable for everyone in tech—be it an employer creating jobs, an employee fulfilling them, or an aspiring employee seeking to fill those roles.

Efficient tech hiring should, consequently, eliminate time wastage. Employers want to be excited and confident that the hiring process will yield successful outcomes. They aim to ensure that candidates they carve out time to interview are reasonably sound in their fundamentals and capable of getting the job done. Efficient shortlisting avoids engaging with every Tom, Dick, and Harry screaming for a tech internship or job. Instead, it seeks out those who go the extra mile to prepare and demonstrate readiness. Employers intentionally prune candidates to streamline the process before committing time to interviews.

From this perspective, I confidently assert that if a candidate wants to assess whether a job they’re applying for will be worth it—both in terms of career growth and remuneration—the first stage of recruitment for such a job would typically include one of the following:

1 A take-home coding assignment to complete a task.
2 A technical coding test to gauge skill. Platforms like TestGorilla, a talent assessment site for skills-based hiring, are widely used for this purpose.
3 A technical interview conducted online, featuring a barrage of on-the-spot technical questions related to everyday work responsibilities, designed to clearly evaluate the candidate's skill-based suitability for the role.

In this "T-Pain economy," if you apply for a programming job where the recruiter sets a physical interview as the first hurdle, it’s a red flag. Such roles are likely to undervalue your potential and view you as easily dispensable. Furthermore, these positions are unlikely to push you to your full capabilities or foster meaningful career growth.

Integrating Tailwind CSS into Vanilla HTML/JS Projects

Trae Zeeofor — Mon, 05 Aug 2024 06:23:13 +0000

Introduction
This article contains technical language intended for programmers who are familiar with the term Tailwind CSS.

The Power of React and Tailwind CSS
For React.js-loving web developers, and by extension other framework users, Tailwind CSS has been revolutionary. React already makes coding easier by allowing you to write your HTML and JavaScript together in one file, and Tailwind CSS takes it further by also allowing you to include CSS in the mix. This creates a very efficient trinity for building web applications.

Transitioning to Vanilla HTML and JavaScript
However, there comes a time when we're forced away from frameworks and faced with the option of building with vanilla HTML and JavaScript, as I was recently for a small gig. This made me look into the documentation to confirm if Tailwind CSS was also compatible with vanilla HTML and JavaScript. I was happy to find out it was.

Tailwind CSS with Vanilla HTML and JavaScript
Looking at the documentation, there are two ways to get this done.

The Play CDN Approach
First, there's the simple but crude “Play CDN” (Content Delivery Network) approach where you simply include an external script linking to the Tailwind CSS library in your HTML head section. This method, however, is only for development purposes and not suited for production.

The CLI Tool Approach
Then, there is the production-recommended approach where you install Tailwind CSS in your application via the CLI (Command-Line Interface) tool. The CLI approach is way more performant and is what I eventually used to get the job done. But I won't lie, getting it done satisfactorily was not a straightforward process. The documentation was not explicit enough, and it took the combined effort of the documentation itself, a YouTube tutorial on the matter, explanations from the senior developer who gave me the contract, and my own process analytics as a very knowledge-seeking junior developer to be able to successfully get the installation and, by extension, the job done. Hence this technical writing post to make things easier for you who are also trying to get the same done for the first time.

Step-by-Step Guide

1 Create a Project Folder: First, you need to create a project folder on your computer to host your app repository. Inside the project folder, create a “src” folder to host core files as is conventionally done.

2 Create Necessary Files: In the src folder, create the following empty files: index.html, input.css, and output.css. index.html is your application entry point holding your project's HTML. input.css will hold a few lines of Tailwind configurations and other custom CSS classes you create for situations where Tailwind utility classes alone are inadequate. The output.css will hold the transpiled vanilla CSS from input.css, your tailwind.config.js file, and other utility classes provided by the Tailwind framework. Yes, just like TypeScript is transpiled to JavaScript for production purposes, Tailwind CSS needs to be transpiled to vanilla CSS to work in production.

3 Install Tailwind CSS:
First, run npm install -D tailwindcss
This command installs Tailwind CSS as a development dependency in your project using npm (Node Package Manager). You can also use Yarn or Bun package managers.
Then run npx tailwindcss init
This command uses npx (a package runner tool that comes with npm) to initialize a Tailwind CSS configuration file in your project. Running this command creates a tailwind.config.js file, which you can customize to configure Tailwind's settings and extend its default configuration. This process also creates a package.json file for your app.

4 Configure Your Template Paths: Add the paths to all of your template files in your tailwind.config.js file:
content: ["./src/**/*.{html,js}"],
This is the essence of creating the src folder because, like is done in React or Next.js, Tailwind expects it as the path where your core app files reside.

5 Add the Tailwind Directives to Your input.css File: Add the @tailwind directives for each of Tailwind’s layers to your main CSS file. This is just like is done when using Tailwind in frameworks like React/Next.js.

6 Start the Tailwind CLI Build Process: Run the CLI tool to scan your template files for classes and build your CSS:
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
Note that whenever you make changes to your tailwind.config and maybe input.css file, your app will need to rebuild to stay updated. It’s not efficient to always have to type out or copy and paste this command, so it's wise to create a script in package.json that holds this command. That way, you can easily trigger the build process by simply running the command npm run dev.

7 Start Using Tailwind in Your HTML: Add your compiled CSS file to the <head> and start using Tailwind’s utility classes to style your content. Go ahead and use Tailwind CSS utility classes to style. If using VS Code, you can install the Tailwind CSS IntelliSense extension to give class suggestions and confirmation as you type.

8 See the End Result of Your Code: You can simply do that by opening your index.html in your browser. You can also use the Live Server VS Code extension if you want instead of this. When pushing the repo to production on GitHub, be sure to create a .gitignore file so unnecessary files will be excluded when you initialize git.

Conclusion and Final Thoughts
There you go, thanks for coming to my TED Talk. Feel free to read my other articles and make sure you stay creative and stay building!

Mathematics: Timeless Wisdom in a Changing Tech World

Trae Zeeofor — Fri, 21 Jun 2024 12:35:51 +0000

Trying to get familiar with binary trees and linked lists data structures over the past few days brought me to the realization that, unlike programming languages and technologies, mathematics is timeless. P.S. Data structures are deeply rooted in mathematical concepts.

The same textbooks I inherited from my father decades ago, which he himself used half a century ago, I could easily pass down to my son to use in a couple of years' time, and he would still find them immensely useful. For these data structures, I was able to look for and follow my favorite FreeCodeCamp YouTube courses without any fear of consuming deprecated knowledge.

Nothing of such exists, however, in the "technical debt" land of programming. Trying to learn CSS, JavaScript, Python, or even C++ using books or tutorials published 5 to 10 years ago is very much ill-advised, as standards have rapidly evolved. It's even worse when it comes to frameworks and libraries in the ecosystem of these languages; an application built 2 years ago can desperately be in need of maintenance to conform to current best practices.

Christians have it easy right? "Jesus Christ is the same yesterday and today and forever." 😁

Multiplication Practice: A Dive into Building a Simple Multiplication Quiz Game for Kids

Trae Zeeofor — Thu, 23 Nov 2023 18:31:41 +0000

full view of my app with game in progress

Abstract:
This article explores the journey of conceptualizing, designing, and deploying a children-friendly front-end web application - Multiplication Practice. It delves into the technicalities of front-end development, challenges encountered, solutions implemented, and the educational gains from completing the project.

Introduction:
In my ongoing pursuit of Tech learning, I recently ventured into exploring the Open Source Ecosystem. I looked towards making my first few open-source contributions. While exploring repositories suitable for newcomers, I stumbled upon Prajwalpd7’s “Multiplication Flash Cards Game” project. As games have been a prominent part of my portfolio, encountering a similar project, a lightweight build consisting of a one-page structure with embedded CSS and JavaScript, sparked instant interest and excitement.

full view of Prajwalpd7’s app with game in progress

I follow several Tech Developer Advocates on Twitter. Particularly those of Nigerian descent. Arit Amana is one of them. And so around this same time, I encountered a tweet by Arit announcing a Saturday Coding Challenge. Balancing my eagerness to avoid horizontal skill enhancement and rather focus on substantial vertical progression, I opted to engage with this challenge, pushing me to work with concepts I seldom explore. I recognized completing and sharing my submission could forge a connection, understanding the pivotal role networking plays in aiding newcomers in securing their initial Tech jobs.

Arit Amana's Saturday Coding Challenge

Project Ideation and Planning:
Inspired by Prajwalpd7’s “Multiplication Flash Cards Game” and integrating user stories from Arit Amana's Saturday Coding Challenge, I conceived the idea to craft an app that amalgamates both concepts. Building an app to fulfill the Saturday Coding Challenge requirements while offering a rewarding educational tool for children to enrich their multiplication skills became the focal ambition.

The app's landing page serves the Saturday Coding Challenge's use cases, presenting users with the opportunity to hypothetically support a children's charity through subscription plans ($29/month, $39/month, $59/month). Subsequently, users can select their billing date, receive confirmation of their choice, and view the amount owed and the upcoming billing date. Additionally, users have the option to skip donations and proceed directly to the game. The game itself offers three distinct difficulty levels, each featuring a 10-round quiz to test the users' proficiency in multiplication.

app building - project structure in VsCode

Technology Stack:
Unlike Prajwalpd7’s basic game structure with code consolidated in a single index.html file, I opted for a modular approach to captivate the focus group - children. Leveraging React.js in line with Next.js Framework guidelines, I emphasized code reliability, maintainability, and efficient development by adopting TypeScript for static typing in JavaScript. Furthermore, Tailwind CSS streamlined rapid development through its utility classes directly applied within the HTML structure.

react typescript function snippet with tailwind css styling

Development Process:

In the realm of front-end web development, diverse approaches exist for single actions. While Zustand and Redux are advocated for global state management, the Context API proved more than adequate for this app, facilitating state access and updates across all components.
On the landing page, I employed two <div>s for a clever modal implementation. It showcased the available choices, rendered as a dropdown list using <select> and <option> elements.
For functionalities involving date selection, I seized the opportunity to refresh my knowledge by relearning and applying several methods, including utilizing the Date object to power the app's logic. Methods such as toDateString() and setDate() were instrumental in this process.
The modular code structure ensured that each related logic was compartmentalized into distinct components, facilitating a coherent and organized development approach.
The app's central logic flow enabled users to choose between three sets of multiplication tables. Upon selection, a random question was generated based on the chosen group. Storing the correct answer in a variable, I employed four randomly generated offsets to generate alternative answer choices around the correct answer. Rendering all answers in a radio input type, I integrated a score variable to track correctly chosen answers on each attempt.

my app's landing page modal

Design and User Experience:

Responsive web development necessitates the use of breakpoints to adapt websites to various screen sizes and devices. My endeavor was to test a responsive breakpoint system that sets 320px as the minimum design width, aligning with best practices.
Additionally, I meticulously designed the project to utilize the full width of the body tag, dynamically adjusting component sizes for different breakpoints. This professional approach contrasts with my prior projects and establishes a uniform, consistent, and polished appearance.

app's game difficulty levels

Challenges Faced in Testing and Deployment
The development of this application did not pose an overwhelming challenge due to the relatively straightforward logic behind it. Successfully running the code in both the build and production stages, coupled with Vercel's seamless deployment handling, showcased the efficacy of the implementation. The use of TypeScript ensured defensive checks throughout the application's lifecycle, mitigating any potential system breaks.

my app's game over modal

Knowledge, Growth, Summary
Crafting user-friendly games aligns with my proficiency. And having the opportunity to continue that streak with this project was deeply satisfying. User and child feedback reflected an enjoyable experience, embracing the gamification of education. The mobile-friendly nature of the site enhanced the conventional gaming experience.

Personally, the cognitive engagement in this project solidified my front-end development knowledge. My focus now shifts towards backend web development, initiating the journey with learning Node.js and Express to augment my value as a full-stack developer.

References and Resources:
The project’s GitHub repository can be found at this link: https://github.com/traez/multiplication-practice
The live site is hosted on Vercel and accessible here: https://multiplication-practice-traez.vercel.app