Debugging My Demons : Console.log(Story Untold)

Oladimeji Momoh — Sat, 29 Jun 2024 13:33:41 +0000

Hey everyone, Devdee here! As a software engineer, my days are filled with griming exciting challenges and the constant thrill of the unknown. Recently, I encountered a particularly nasty backend bug that had me pulling my hair out (figuratively, of course). Today, I want to share my battle with data inconsistency and the steps I took to slay that gremlin.

Missing User Data

**
It all started with the front-end dev team reports of missing data. Login credentials were correct, yet the system displayed empty profiles. Panic started to set in – a wrong code setup? System crash? My initial investigation revealed no errors in the database itself. The data was there, but somehow wasn't being retrieved for specific users.

The Log Analysis

My first line of defense was analyzing server logs. Hours of combing through lines of code yielded a clue: Errors here and there, it wasn't really making sense, but at least I was able to identify where it was coming from. CONSOLE.LOG to the rescue!

Isolating the Problem - Code Review

Armed with this knowledge, I dove into the specific code responsible for user data retrieval. After scrutinizing the logic, I found the culprit – a missing synchronization mechanism. Without proper locking, the user data was not retrieved before the front-end application received the response.

Fortifying the Code

The solution? Implementing the function as an async identity and using the await instance. This ensures that during the database fetch the code waits for response to the Promise enabled line. The fix was relatively simple to implement, but the debugging process was a real head-scratcher.

Embarking on the HNG Internship

Speaking of challenges, I'm thrilled to announce that I'll be starting my journey with the HNG Internship program! This opportunity is incredibly exciting for several reasons. Firstly, the program's focus on innovation and building impactful projects perfectly aligns with my passion for creating solutions that make a difference. Secondly, the chance to collaborate with a talented community of developers is invaluable for learning and growth.
You also have a chance to be part of this enriching development check out https://hng.tech/internship or https://hng.tech/premium. Hopefully i get to see you there as well!

As I head into this new adventure, I'm confident that the problem-solving skills honed through battles like the data inconsistency demon will serve me well. Here's to continuous learning, building amazing things, and (hopefully) encountering fewer gremlins along the way! Stay tuned for future updates on my HNG Internship experience!

Styled Components vs TailwindCss (UIs Showdown)

Oladimeji Momoh — Fri, 28 Jun 2024 16:09:58 +0000

As a front-end developer, when it comes to styling user interfaces, two popular options always come to mind: Styled Components and Tailwind CSS. Both offer distinct approaches, and the "better" choice depends on your project's specific needs, although I have my preferred option of the two, but lets take on a journey to understand what both styling frameworks have to offer and leave the picking to you!

STYLED COMPONENTS

Talking about the reuse-ability of components style of thinking and approach, Styled Components embraces a component-centric approach. Styles are encapsulated within JavaScript components, promoting code maintainability. With styled components, css code is specific to the component it is being used for, as this allows for component-specific styling and helps to reduce the problem of unused styling when a component isn't rendered or in use

TAILWINDCSS

Tailwind tends to lean to the ideology of utility first. Utility first just boils down to styling that does a specific thing, ranging from padding, colour, e.t.c. Tailwind provides a vast amount of predefined utility classes that users could apply directly to their components and dumb the hassle of write css code from scratch.

Here are some key points that seek to delve into the strengths and difference of these frameworks

Theming

Styled Components:
Offers built-in theming capabilities. You can define themes with variables and easily apply them to styled components for consistent UI styles
Tailwindcss :
Requires customisation of its default theme through configuration files. While effective, it might not be as intuitive as Styled Components' theming approach.

PERFORMANCE

Styled Components:
Might have a slight overhead due to the runtime manipulation of styles. However, this is generally negligible for most modern web applications.
Tailwind CSS:
Generally considered performant due to its reliance on pre-defined utility classes. However, excessive class usage can lead to larger CSS payloads.

This is great to know, but when really is the best time to choose either of the framework seeing they both offer different approach to solving major styling issues.

You're working on a large-scale React project with a focus on reusability and maintainability.( Styled Component preferably)
You prefer a utility-first approach with fine-grained control over styles. (Tailwind all the way)
You value clear separation of concerns and keeping styles encapsulated within components. (Styled Component)
You prioritize a component-based approach to UI development.
(Styled Component)
You need a rapid prototyping tool for quick UI development.
(Tailwind)

Conclusion

Both Styled Components and Tailwind CSS are excellent tools. The best choice depends on your project's specific requirements and team preferences.

Consider Styled Components if you prioritize component-based development, maintainability, and theming in React projects.

Opt for Tailwind CSS if you value rapid prototyping, utility-first styling, and a gentler learning curve, especially for teams with traditional CSS experience.

If you are asking about my preferred option, then it will be Tailwindcss, due to its simplicity and straightforwardness. During my time interning at HNG, i am looking towards using it to build worthwhile projects. Kindly find out more about this using https://hng.tech/internship or https://hng.tech/premium.

This should be fun at its best. Thanks for taking out time to read

Forem: Oladimeji Momoh