DEV Community: Treasure

that one time I pushed multiple bugs into production

Treasure — Fri, 10 Mar 2023 07:48:03 +0000

a little context

So, earlier this year, I was messing around with my web portfolio. I wasn't doing anything significant, just moving a few projects around and switching Tailwind to the CLI from Play CDN in Vue. I hoped to shoot some shots with this portfolio, so I figured I'd update my details and take care of some security issues that GitHub had been nagging me about. Little did I know that my worst all-night-long debugging experience had just begun.

I got several emails that the repository my portfolio was sourcing was facing 'high severity' security vulnerabilities, but I didn't understand what it meant. After I got the 15th email (yes, I actually counted) with a different vulnerability each time, I figured it was time to check out what the issue was.

the bug

My dependencies were outdated and the various versions weren't compatible with each other. That was it. The site was live. Working fine without hitches. The only thing that bothered me was the continuous emails.

You know that saying, "if it ain't broke, don't fix it?" Yeah, I totally ignored that and I regretted doing that. Lesson learned, folks.

when I thought I found a fix

Having no previous knowledge of what I was about to do, I headed over to the repositories' security tab, where I could find details of the issue. I found out that you can actually set up something called 'dependabot alerts' that will notify you once a dependency is outdated and is causing security breaches or other related problems, and automatically raise a pull request with the latest version of that dependency.

I had 23 of these alerts with corresponding pull requests, and I thought merging these pull requests would fix the issues. So I went to work. Merged every single pull request that was opened and updated all the dependencies for the project. Since the pull requests were opened at once, I had to rebase the changes after merging every PR. It was a cycle of merge - git pull - git commit - git merge. The PR list was finally empty and life seemed good at that moment. Just when I thought I had fixed the bug...

Yeah, you see those red-colored labels tagged 'failed'? That was me breaking production with every PR I merged. It was chaos. At this point, the site was already down. What made it worse was that I had just applied for an opportunity. What were the odds that they didn't tap the link immediately? I tried not to let my thoughts overwhelm me as I tried to figure out what this new development was.

The unexpected debugging began. At this point, I didn't know what to do, or where to start. I tried to frame my issue into different questions with different keywords for my Google search, but I wasn't getting any helpful results. Searched various articles and references I came across, but nothing. Even the renowned StackOverflow didn't have an answer. That was when I knew things were terrible.

The first fix I tried was to revert all the PRs I had merged. This resulted in multiple merge conflicts which, in the end, didn't work. One thing I knew was that the bug had something to do with conflicting versions of dependencies, so the next thing I tried was reverting it back to how it was before any of the merging was done. I searched my commits for the last successful deployment and fetched the package.json file where the dependencies are usually saved. I compared the current content of the file with this last successful version and found the lines of code that were different, copied the content of the old file, and pasted it into the current one. Then I pushed the changes and hoped for a change in the error message. As expected, I didn't work. But I got a hint of what exactly the issue was and how to solve it.

the actual fix

When I was comparing the two files, I noticed 2 dependencies (webpackand webpack-dev-server) that had a major change. So I made some research and found out that the versions which both were updated to wasn't stable, and thus weren't compatible. I searched for the last stable version of both that would work together and noted them down. The next thing I did was delete the entire node_modules folder, the package.json file and the package-lock.json file. I wanted to start the dependency installation from scratch so that I wouldn't miss anything. I ran npm install to bring back the node_modules folder, and then inserted the exact combination of dependency versions that were compatible into the package.json file. Then I pushed my changes with both eyes closed, hoping that the 'magic' trick I just performed would work. And yes, it did. The site deployed successfully, and production went back live. Phew.

lessons and conclusion

Getting bugs can be very frustrating, but it's part of the everyday life of a developer, so I've learned to live with it. No, I didn't hear back from the recruiter, but I learned so many things while dealing with this bug, including the fact that StackOverflow doesn't have all the answers. It's important to pay very close attention to details because the error might be in front of you the whole time. Most importantly, if it ain't broke, don't fix it.

Why TailwindCSS?

Treasure — Fri, 10 Feb 2023 12:08:05 +0000

If you’ve never heard about TailwindCSS before, it’s this cool open-source CSS utility framework that speeds up your development process by a considerable amount. It’s directly written in the classes of your HTML, JSX, or TypeScript file.

So why would you use Tailwind instead of pure CSS or other frameworks?

1. Perfect for beginners

It’s really easy to learn, the only previous knowledge you’re required to have is basic CSS. This is because Tailwind is derived from normal CSS code. For example, if you wanted to add horizontal padding to an element in CSS, you would write something like this:

div {
 padding-right: 4px;
 padding-left: 4px;
/* or alternatively, */
 padding-inline: 4px;
}

In Tailwind, it’s rather easier. You just need to add a px-1 to the element as a class name, like so:

<div class="px-1">Hello World!</div>

Easy-peasy right? I know! One thing that would greatly help your learning process is their documentation. The processes are well documented, easy to understand and follow, which makes it the best documentation I’ve ever seen and used in all areas including User Interface, usefulness, and accessibility.

2. Responsiveness at its peak

Tailwind comes with pre-defined CSS classes that can be quickly used to create a responsive design. These classes can be used to create fluid layouts without having to write custom CSS code. They can also be combined to create more complex layouts.

Additionally, Tailwind provides a set of pre-defined media queries that can be used to make certain elements or layout changes based on screen size. For example, if you wanted to change the orientation of an element (in this case, a div) from a column view on mobile screens to a row view when it’s on a tablet screen, your code would look like this:

<div class="flex-col sm:flex-row">
/* the 'sm' here stands for any screen width above 640px */
    <h1>This is a heading</h1>
</div>

One thing to note is that Tailwind is mobile first. This means that styles are easier applied to small/mobile screens first before expanding to larger screens. 60% of the traffic on popular websites are gotten from mobile devices, so if you really want to retain the rate at which users visit your site, you would want to pay attention to mobile responsiveness.

3. Design System out of the box

Who doesn’t want a framework that gives you a complete color pallet including their respective shades, industry-standard screen breakpoints, typography, and easy dark mode configuration without extra code? Definitely not you. Tailwind takes care of those base things while you can focus on making your web application more functional.

Some of the colors in the default color pallet. Credits, and: tailwindcss.com/docs/customizing-colors

Conclusion

You’ve seen 3 different reasons you should switch; it's simple to understand, it improves responsiveness, and it provides you with a design system. There are many others apart from the ones listed here, which you will discover when you start using the framework.

Resources

My Hacktoberfest 2021 Journey

Treasure — Mon, 01 Nov 2021 19:51:40 +0000

So this was basically my first bunch of open-source contributions, and I have to say, it was the best decision to use this event to learn more about contributions.

Progress

So far, the majority of my PRs are still undergoing the 14-day maintenance review check, so I still have my fingers crossed. Currently, it's 1 down, 6 more to go.

Contributions

The most basic contribution I made that I would love to highlight was adding some developer resources to Fueler's repository.

Add new resources around web development #1

ashandilya posted on Sep 27, 2021

Do you have resources that aren't listed in this repo?

A Podcast A Blog A tutorial A Web Page Inspirations A YouTube Channel

Add them 👇

</div>
<div class="gh-btn-container"><a class="gh-btn" href="https://github.com/Fueler-io/Web-Development-Resources/issues/1">View on GitHub</a></div>

It opened the way to making more complex PRs in other repositories. It also proved that it's possible for people who are not developers to have non-technical but valuable contributions.

In a nutshell, this was how easy it was:

added 5 more icon packs and 3 youtube channels #53

CyberGeni posted on Oct 31, 2021

Youtube Channels:

Resource Icons:

View on GitHub

Besides that, I found myself contributing to projects involving UI improvements and bug fixes related to frontend development.

Reflections

Overall, the event was great. I'm thankful to all the numerous blogs and video content creators for not leaving me to fly on my own, because I'd have crashed. It's definitely something I would love to try out next year. The goal for next year's event is to make more quality PRs and also help newbies who are new to open source contributions (if I can) to get a grasp of all what it's about.

That's all for now, Adiós!

Treasure Ajefu: A Brief Introduction

Treasure — Fri, 01 Oct 2021 22:11:07 +0000

Hi, developer community. I'm Treasure Ajefu. But on the internet, you can call me cyberGenie. I'm 16, and I reside in Lagos, Nigeria. Graduated from secondary school two days ago, and I'm somewhat excited about this new chapter I'm about to open.

I'm a Frontend Web Developer, and an aspiring game developer. I have been in the tech world since I was about 12 or 13 (currently 16). I played a little bit with Scratch when I started, then moved over to Python, then HTML and CSS alongside. Ever since then, I've been working with various web technologies, like Bootstrap, Netlify, Django and GitHub.

I'm currently participating in a 30DaysOfCode challenge, to scratch off some of the rust. I'm also participating in this year's Hacktoberfest which commenced today. Hopefully those should get the gears turning.

That's basically it for my introduction. I hope to interact and learn a lot here, from you all. Mucho gusto.