Forem: Michael Njuki

Why is it important to write good code?

Michael Njuki — Tue, 08 Aug 2023 05:14:19 +0000

As developers, we spend our waking hours crafting code. We write code that solves problems, creates features, and brings our ideas to life. But what is good code? And why is it important to write good code?

Good code is code that is clear, concise, and easy to understand. It is code that is well-organized and easy to maintain. And it is code that is elegant and beautiful. Good code is also more likely to be bug-free, easier to maintain, and more reusable.
In this blog post, we will explore the importance of writing good code. We will discuss the key elements of good code, and we will provide tips for writing better code. So, if you are a developer who wants to write better code, read on!

Empathy in Code

Empathy is an essential skill for any developer who wants to write good code. Like a skilled communicator, good code begins with empathy for others. All developers should understand that coding is not just about solving problems for ourselves; it's about creating solutions that others can understand and maintain. Some simple ways you can do this is, to avoid using "clever" code that is difficult to understand and provide helpful comments, (you will also benefit from this).

When you write code, you need to put yourself in the shoes of the next developer who will maintain your code. You need to think about how they will understand your code and how they will be able to maintain it.

This means using clear and concise language, writing well-organized code, and providing helpful comments. It also means avoiding "clever" code that is difficult to understand.

Clean code always looks like it was written by someone who cares.
~ Robert C. Martin

Orchestrating Best Practices

Good code is like a symphony. It is composed of many different parts that work together seamlessly. Just as a conductor must coordinate the different instruments in a symphony, a developer must coordinate the different parts of their code.

There are many best practices that can help developers write good code. These practices include and are not limited to:

Using proper naming conventions. This means using clear and concise names for variables, functions, and classes. Good naming conventions can make code much easier to understand and maintain.
Modularizing your code. This means breaking your code down into smaller, self-contained modules. Modular code is easier to understand and maintain, and it can also be reused in other projects.
Providing comprehensive comments. Comments can help to explain what your code is doing. They can also be helpful for debugging and understanding code that you wrote in the past.
Using linters and other tools. There are many tools available that can help you to write better code. These tools can help you to find errors, enforce coding standards, and improve the readability of your code.
Testing your code thoroughly. Embrace testing frameworks for your particular tech stack, this will help to ensure that your code is working as expected. -** Getting feedback from others.** Ask other developers, preferably senior, to review your code and give you feedback. This can help you to identify areas where your code can be improved.
Keeping your code up-to-date. Programming languages sometimes update their syntax or add more features, similarly, frameworks and packages you use in your projects may become obsolete when developers stop updating them. So always be on the lookout and update your code accordingly.

Any code of your own that you haven’t looked at for six or more months might as well have been written by someone else.
~ Eagleson’s Law

Balancing Complexity and Simplicity

Much like achieving equilibrium in artistic expression, balancing complexity and simplicity is an art in itself. Developers should embrace elegance in their code, finding the right equilibrium between elaborate solutions and straightforward implementations. Learn to write code that expresses the problem's essence without unnecessary embellishments.

Ensuring Resilience

Every great symphony undergoes rigorous rehearsals before it is performed in front of an audience. The musicians practice their parts over and over again, making sure that they are in sync and that they can play their parts flawlessly.

The same is true for code. Good code is not written in a single sitting. It is written, tested, and refactored over and over again. This process of iterative development ensures that the code is well-tested and that it can perform flawlessly even under the most demanding scenarios.

One of the best ways to ensure that your code is well-tested is to practice Test-Driven Development (TDD). TDD is a software development process that involves writing tests before writing the code. This ensures that the code is written to pass the tests, and it also helps to ensure that the code is well-structured and easy to maintain.

TDD can be a bit challenging to learn at first, but it is a valuable skill for any developer. By practicing TDD, you can write code that is more reliable, more maintainable, and more enjoyable to work with.

So, next time you are writing code, remember the importance of rigorous rehearsals.

You can see my newsletter here

Collaboration

Coding is often a collaborative effort. When multiple developers work together on a project, they can share ideas, learn from each other, and produce better code.
One of the most important aspects of collaboration is code reviews. Code reviews are a process where one developer reviews the code of another developer. This helps to catch bugs, improve code quality, and ensure that the code is consistent with the project's standards.

Here are some tips for collaborating on code:

Be respectful of other developers' time and opinions.
Be clear and concise in your communication.
Be willing to compromise.
Be open to feedback.

By following these tips, you can collaborate effectively with other developers and produce better code.

For example, when you are reviewing someone else's code, be respectful of their time and opinions. If you have any feedback, be sure to be clear and concise in your communication. And if you are the one whose code is being reviewed, be willing to compromise and be open to feedback.

Leaving an Enduring Legacy

A masterpiece's legacy lingers in the hearts of those who experience it, just as good code leaves a lasting impact. Developers should embrace the understanding that their code will shape future projects and inspire others. Every line of code becomes a brushstroke on the canvas of a digital masterpiece, an enduring gift to the world of development.

Writing good code is an art that transcends mere technicality. Developers are artists, composing codebases that resonate with empathy, elegance, and ingenuity. Let us remember that coding is not just a series of characters and algorithms; it's an expression of our creativity and empathy towards others. So, let us embark on this journey with passion and dedication, embracing the art of crafting unforgettable code that stands the test of time. As we create our symphonies of code, we ensure that the legacy we leave will inspire generations of developers to come.

What is the Event Loop in JavaScript?

Michael Njuki — Tue, 01 Aug 2023 06:32:22 +0000

Picture this: You're browsing the web and come across an impressive website with stunning visuals and seamless interactions. As you navigate through its pages, everything feels smooth, and buttons respond instantly to your clicks. On the flip side, imagine visiting another site, and as you interact with it, the buttons become unresponsive, and the whole page freezes for a moment. Frustrating,_ right?_

What's the secret behind these vastly different experiences? It all boils down to the event loop in JavaScript - a fundamental concept that plays a crucial role in building responsive web applications.

So what is the event loop?

In JavaScript the event loop can be described as a mechanism that manages function calls and ensures that tasks, including asynchronous events, are executed in order, allowing JavaScript to handle both synchronous and asynchronous operations efficiently.

Imagine you're a kid waiting for your parent to come home with milk. Your parent, who is at work, winds up, and heads to the station where the only form of transport is a motorcycle that carries one passenger at a time and takes them to their destination. Afterwards, it comes back to the station, picks up another passenger, and repeats the process. And the one making sure no one jumps the line and everyone gets home safe is a guard posted at the station. The event loop in JavaScript is like the guard at the station who manages tasks (function calls) and ensures they are done in the order they arrive. They keep track of who's waiting in line (the tasks to be executed) and this process repeats until everyone gets home i.e. (every function gets returned).

However, let's say your parent realizes they forgot the milk and they need to go back and get it. They leave the line (the task/function is paused), fetch the milk, and return to the station. If everyone else in line is ready to go, by the time your parent returns, they’ll find everyone else has already been taken home. Now it's their turn, the guard lets them hop on and in a few minutes you’re enjoying your milk.

This cycle of tasks being managed in order is like the event loop, efficiently handling tasks, including asynchronous events, and making sure everything gets done effortlessly.

Before we continue let me touch on an important point here, asynchronous programming.

Asynchronous programming is a powerful approach that allows JavaScript to handle time-consuming tasks without blocking the entire program's execution.

In traditional synchronous programming, tasks are executed one after another, and the program waits for each task to complete before moving on to the next. This approach works well for simple applications, but it becomes problematic when dealing with time-consuming operations like data fetching from remote servers.

Asynchronous programming, on the other hand, enables tasks to be executed independently, allowing the program to initiate a task and move on to other operations without waiting for the task to finish. The event loop plays a crucial role in managing these asynchronous tasks by monitoring their progress and ensuring that their results are handled appropriately.

Consider the example of fetching data from a remote server using the fetch API. Instead of waiting for the server's response synchronously, the program can initiate the fetch request and continue executing other tasks. When the server responds, the event loop places the callback function responsible for processing the server's response into the callback queue. As soon as the call stack becomes empty, the event loop dequeues the callback function and executes it, allowing the program to handle the fetched data.

Too many words, let's look at some code and allow me to ground my examples in reality.

Example 1

Let's say you have a JavaScript program running on your IDE. The program executes the following:

console.log("First");

console.log("Second");

console.log("Third");

In this ideal program, the output will be 'First', 'Second', and 'Third', exactly in that order. Why? Because JavaScript executes code synchronously, meaning tasks are performed in the order they appear.

As the program runs, the console.log methods are added to the call stack in the order they are encountered. Each method is executed, printing its message to the console, and then removed from the call stack, allowing the following method to be executed. This process continues until all the methods have been executed in the order they were called, resulting in the 'First', 'Second', and 'Third' messages being displayed in that order.

Example 2

Now let’s take it up a notch with another example.

console.log("First");

function main() {
let x = 0;

  while (x < 100000) {
    x++;
  }

  console.log("Second");
}

console.log("Third");

main();

When we run the above example, the output will be 'First', Third', and 'Second'.

But what’s changed?

Let me explain.
As before, the program starts with the first task, which is console.log("First");. It is immediately added to the call stack and printed to the console.

Next, we encounter the main() function call. At this point, the main() function gets added to the call stack, and we enter the loop inside the main() function. This loop is designed to perform a large number of iterations, making it a computationally expensive task.

As the loop runs, it consumes significant processing time and becomes a blocking function. This means we will have to wait for the main() function to complete its computation before it gets removed from the call stack, and the event loop then proceeds to the next method, console.log("Second");, to execute and display 'Second' on the console. Finally, the event loop moves on to the last method: console.log("Third"); up the queue and executes it, printing 'Third' on the console.

Side note - We referred to the main() function’s loop as a "blocking function".

Let's clarify this term.

In synchronous programming, when a time-consuming task like the loop inside main() runs, it occupies the main thread, effectively blocking any other operations from taking place. During this time, the program waits for the loop to complete before moving on to the next task. In real-world scenarios, this could lead to unresponsive web apps, as the user interface freezes until the loop finishes.

Before we proceed to our final example, it's worth mentioning two essential concepts in modern JavaScript development: async/awaitand error handling.

Async/Await: JavaScript offers the async/await syntax, a more concise and readable way to work with promises. While we won't dive deep into promises here, it's important to know that async/await allows you to write asynchronous code, that is easier to read and understand. It simplifies working with promises and complements the event loop's management of asynchronous tasks.
Error Handling: Handling errors properly is crucial for building robust applications. In our final example, we've included error handling for the fetch request. This ensures that if something goes wrong during an asynchronous operation, the application can gracefully recover and continue running without crashing. The event loop's careful handling of errors allows the program to remain responsive, even in the face of unexpected situations.

Example 3

For my last example, let me show you how the event loop would affect a somewhat real-world project.
Here's a link to the Codesandbox so you can see it in action: Event Loop Sandbox.
We are going to fetch some data from JSON Placeholder a Free fake API for testing and prototyping.

const button = document.getElementById("myBtn");
const outputContainer = document.getElementById("user-container");

function fetchData() {
  console.log("Data fetching process initiated!");
  fetch("https://jsonplaceholder.typicode.com/users")
    .then((response) => {
      if (!response.ok) {
        throw new Error("Something went wrong");
      }
      return response.json();
    })
    .then((data) => {
      let result = data.slice(0, 5);

      // Introducing a delay of 2 seconds using setTimeout
      setTimeout(() => {
        console.log(result);
        console.log("fetched");

        // Display the fetched data in our page
        let outputHTML = "<ul class='users-list'>";
        result.forEach((user) => {
          outputHTML += `<li>${user.name}</li>`;
        });
        outputHTML += "</ul>";
        outputContainer.innerHTML = outputHTML;
      }, 2000); // 2 seconds delay
    })
    .catch((error) => {
      console.error("An error occurred while fetching the data", error);
    });
}

console.log("Start fetching data...");

button.addEventListener("click", fetchData);

Take a second to think about what the sequence of events will be.

So here’s how the final example will go.

At first, when you open the program, the JavaScript runs, and the console will print out "Start fetching data...". Soon after you click the “Check Users” button, another text will show up in the console, “Data fetching process initiated!”. The script then fetches user data from the JSONPlaceholder API. During the data retrieval process, we introduce a 2-second delay using setTimeout to simulate real-world scenarios with API calls or other asynchronous tasks.

This is where the event loop steps in to keep the program responsive. While waiting for the data to be fetched, the event loop ensures that other tasks, like rendering the button animation, continue to run smoothly. After the delay, the fetched data is displayed on the webpage inside an unordered list, the data also gets printed out in the console, and finally “fetched” gets printed out.

As you can see, the event loop's power lies in its ability to manage and prioritize tasks. It ensures that your application remains interactive and responsive, even when dealing with potentially time-consuming operations.

In conclusion, understanding the event loop is crucial for writing efficient and responsive JavaScript code. As developers, understanding how the event loop works allows us to create applications that can handle complex tasks without sacrificing user experience.

_If you find this article enjoyable and helpful, you can check out My Blog, there you'll find more nuggets of wisdom about tech and programming like this. _

How to Debug CSS

Michael Njuki — Tue, 25 Jul 2023 05:39:09 +0000

Making errors is part of programming, and CSS is no exception. Even the most seasoned developers make mistakes, and the key lies in learning how to effectively debug and resolve these issues. In this blog post, we will explore the common errors that developers encounter in CSS and discuss practical steps to debug and rectify them. By understanding the root causes of CSS problems and employing the right techniques, you can enhance your skills in creating well-styled, error-free web pages.

Common CSS Errors

Before delving into the debugging process, let's first categorize the common CSS errors developers often encounter. These errors can be classified into three broad categories: skill-based, rule-based, and knowledge-based.

Skill-based errors: These errors stem from typos or oversights, such as forgetting to include delimiters or neglecting to close brackets when applying styles to selectors.
Rule-based errors: Rule-based errors occur when developers fail to adhere to CSS syntax rules. Examples include using class names that begin with numeric values or not following the specific syntax rules of layout techniques like Flexbox or CSS Grid.
Knowledge-based errors: Knowledge-based errors arise when skilled developers haven't fully mastered the language yet. These errors can include using excessive selectors, resulting in over-specificity and negatively impacting performance.

Now, let's explore the steps you can take to effectively debug your CSS and resolve styling issues.

1. Isolating the Culprit Elements
To uncover the root cause of a CSS issue, it's crucial to isolate the elements causing the problem. Most CSS issues are related to layout problems, such as misplaced elements or inconsistencies across browsers and devices. Identifying and isolating these elements is the first step toward resolving the issue.

2. Isolation by reduced case
To narrow down the problematic code, create a reduced case by removing any unrelated HTML, CSS, or JSX. You can also disable sections of your code and gradually enable them line by line to observe the changes and pinpoint the source of the problem.

*3. Relocating items. *
Similar to isolating elements, try relocating specific elements within your code to observe their behavior. By changing the position of an element and comparing the results, you can gain insights into the source of the problem. Remember that CSS compilers read elements from right to left, so altering the position of an element can aid in debugging.

As an example, for a selector such as div .alpha > p, the compiler will read it as a p tag inside an alpha class element which is inside a div tag. When you change the position of the p from inside the .alpha class to some other position inside your code, it is easier to debug the source of the problem.

4. Understanding the box model
A thorough understanding of the box model is essential for effective CSS debugging. The box model, encompassing margin, border, and padding, plays a fundamental role in CSS styling. By familiarizing yourself with the box model, you can better identify and resolve many styling issues.
Browser issues. Different browsers render our styling differently. This is because browsers have their own default stylesheets called user-agent styles. To override these inconsistencies you should consider resetting your CSS to provide cross-browser consistency. A good resource I use when writing vanilla CSS is Normalize CSS. For example, it resets the margin, padding to zero, and the box-sizing property to border-box.

5. Leverage Browser Dev Tools
Browser Dev Tools are invaluable resources for debugging front-end issues, including CSS problems. Access the Dev Tools by right-clicking on a webpage and selecting the "Inspect Element" option. Within the Dev Tools, you can explore various features such as computed layouts, page and grid overlays, and font analysis.
Dev Tools allow you to make live changes to your code, enabling you to experiment and observe the effects in real-time. You can modify styles, test different property values, and even toggle responsive design modes to preview how your webpage appears on different devices or browsers.

And with that you have some skills to confidently find out why you have a horizontal scrollbar or why a flex item isn't positioned correctly. But for more detailed look into the chrome dev tools, head over to My Personal Blog where I detail how you can utilize the chrome dev tools to your advantage to debug CSS easily.

I hope you found this content helpful.

What I Learned Building the Base Apparel Landing Page

Michael Njuki — Fri, 03 Mar 2023 20:23:21 +0000

Over the past week, I challenged myself to create the Base Apparel Landing Page, and it was an incredible learning experience. In this blog post, I want to recap some of the lessons I learned while working on this project.

With practice, HTML becomes more intuitive. The more you write it, the more you understand it. It has come to a point where I can stare at a website and break it down into code in my head. "That's a div and that's an H1", "Could they have used a section tag there?" "They should." The same goes for CSS. Colors become hex codes and patterns become grids. In no time, you begin flexing your brain muscles, pun intended, trying to figure out how a layout was achieved. All this is to say that doing something repeatedly engrains it in your mind.

Adding Functionality
Almost anything you can think of in terms of manipulating an app or website can be done with JavaScript, and it was no different in this project. Adding functionality was a crucial step in making the Base Apparel Landing Page fully functional and user-friendly. I knew that I had to validate the email address a user entered and give them feedback based on the validation, I had a few ideas but I settled on Regex. That's when I decided to dive deep into the world of regex (regular expressions).

After doing some research, I found an excellent resource on Regular-expressions, which explained in detail how to create a regex that would match valid email addresses. The page covered various rules and limitations of email addresses, as well as common mistakes to avoid when creating regex for email validation. Armed with this knowledge, I was able to create a regex that checked for the correct format of an email address, including the presence of an "@" symbol and a valid domain name. It allowed for different types of characters in the email address, including letters, numbers, dots, and some special characters. While it's not a perfect solution, it worked for my test cases and allowed me to move on to the next step in creating the landing page.
With my newfound information, I settled upon this regex:

 const emailRegex =
    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

Displaying error messages was a crucial part of creating the UI. To achieve this, I added and removed CSS classes based on a conditional check. This process was further improved by adding additional visual error-handling cues, such as changing the border color. Additionally, it was essential to provide the user with some positive visual cue if they input the right format, so I added a simple alert that can in the future be converted into a pop-up modal. All this was done while being mindful of visual clutter which can overwhelm the user.
Not Done Yet
I almost submitted my solution, but being the proactive person I am, I decided to add some animations to the website to give it some polish. This is where GSAP comes in. Guaranteed, CSS animations could have been used, but what's the fun in that? I added some fade-in animation for the H1 and the hero image, which I felt were the focal points of this landing page. I had a problem when trying to animate the hero image, where scroll bars appeared, and elements were jumping around on the page, which wasn't a good sign. I found two solutions: one is to try animating the background-position, and two, to change the direction of the animation. I went with the latter mainly due to stylistic choices.
And with that, I was done. Overall it was a good experience and in case you do the challenge yourself, I'd like to hear from you and your experience. The code is publicly available so feel free to check it out on GitHub.

Thanks for reading. I hope you found this post helpful. If you have any questions or feedback, please leave a comment below or reach out to me on Twitter. I would love to hear from you and answer any questions you may have.

Take Your Front-end Skills to the Next Level: Building an Order Summary Card

Michael Njuki — Thu, 02 Feb 2023 07:33:44 +0000

Creating a visually appealing and functional card component can be a challenging task, especially for those new to web development. However, with the right tools and a bit of creativity, it's definitely doable. Recently, I completed a front-end mentor challenge where I had to design and build an order summary card using HTML and SCSS. If you’re new or even experienced in web development stick around to learn from my experience.

The challenge was to create a responsive design that would work well on different screen sizes, as well as make sure that the card followed the style guide and match the design provided. To accomplish this, I decided to focus on creating a simple primary grid and position inner container elements with flexbox.

One of the main challenges I faced while working on the project was getting the layout just right. I wanted to make sure that the spacing and size of every element matched the design to the pixel, so I spent a lot of time experimenting with different layouts and designs. In the end, I settled on a design that featured a container for the image on top, and a container for the order details below it. This design is pretty common and for good reason. It makes the product stand out and make it the focal point of the card, while still making it easy for users to see the important details about their order.

Another challenge I faced was ensuring that the card was responsive and looked good on different screen sizes. I had to make sure that the layout was flexible enough to adapt to different devices, while still looking great. So in the design, I noticed that the height of the card didn’t change for wider screens but the width changed slightly, and the background patterns also changed. So I just had to implement the design without deviating too much. Although I made a few stylistic choices to improve upon the design.

One thing that I really enjoyed about this project was the opportunity to work with SCSS, here's a link to get you started on SCSS. It is a CSS pre-processor that allows you to use variables, nested rules, and other advanced features that make it easier to write and maintain CSS. Let me explain. SCSS, or Sassy CSS, extends the capabilities of traditional CSS. It allows developers to write code in a more organized and maintainable manner by adding features like variables, mixins, and nested rules.

In the context of the order summary card project, SCSS was particularly useful because it allowed me to easily keep track of the various styles and sizes I used throughout the project. Using variables meant that I could store values like colors and font sizes in one place and then reference them in multiple places throughout the project. This made it much easier to make changes to the design since I only had to make updates in one place, rather than having to hunt through the entire CSS file.

Mixins, though I didn't use them for this project, are also a lifesaver. They allow you to reuse a set of styles in multiple places throughout your project, making it much easier to keep your code DRY (Don't Repeat Yourself). This is especially useful for complex styles that you want to reuse in different parts of the project, as it eliminates the need to copy and paste the same code in multiple places. To learn more about variables and mixins here's a video that explains these concepts.

Nested rules are another great feature of SCSS. They allow you to write styles for HTML elements that are contained within other elements, without having to write long, complicated selectors. For example, you can write styles for all the

elements within a specific

, and the styles will only apply to those specific

elements. This makes it much easier to write and maintain CSS since you don’t have to worry about conflicting styles.

I completed this challenge in half a day since it was straightforward and my experience with CSS made it easier to visualize how the majority of the elements should be styled. And although this was a simple task, it made me reflect on a few fundamental points that I like to remind myself of when designing a component:

The first thing, keep it simple: A card component should be simple and easy to understand. Avoid using too many colors, fonts, or images. Stick to two fonts and monochromatic palettes if you are bogged down by choice.
Use whitespace effectively: Use whitespace to separate different elements within the card and to create a clean and visually appealing design.
Use typography effectively: Choosing the right font is a make or break, so pick fonts that are easy to read and that fit the overall design of the card.
Make it responsive: Make sure the card component is responsive and looks good on different screen sizes and devices.
Test, test, test: Test the card component on different devices and screen sizes to ensure it looks good and works well. Chrome dev tools give you helpful tools to do this right within the browser.

Overall, the front-end mentor challenge was a great learning experience for me. I got to flex my CSS skills, pun intended, and I’m now much more confident in my ability to create responsive designs that look great on different devices. If you're new to Sass, here's a youtube video that gives you training wheels to get you up and running.

In conclusion, building an order summary card is a great way to take your front-end skills to the next level. With HTML, SCSS, and a little bit of creativity, you can create a visually appealing and functional card component that can be used in a variety of projects. By using SCSS, you can write organized, maintainable, and reusable code that will save you time and make it easier to make changes to your design. The key takeaway from this article is that SCSS is a powerful tool for styling web pages, and by building an order summary card, you can start to see how it can help you improve your front-end skills and become a more confident and efficient developer. Whether you're a beginner or an experienced developer, I hope this article has inspired you to give SCSS a try and start building your own amazing order summary card.

The Power of Tailwind CSS: My Experience Building With It

Michael Njuki — Tue, 24 Jan 2023 07:49:46 +0000

**I recently **completed a coding challenge to build a Stats Preview Card using Tailwind CSS. As a front-end developer, you might be surprised to learn that I hadn't done much with Tailwind prior to this challenge, though I had worked with it in the past. I thought this would be a great opportunity to test my skills and learn more about the framework amidst all the hype on social media. In this blog post, I will share my experience, the process I took, and key learnings from building this component.

The coding challenge was to build a Stats Preview Card using HTML and CSS and any other technology you wanted, in addition to those. The component had to be responsive, and users needed to be able to view the Stats Card on any device. I used Visual Studio Code as my code editor and Git for version control so if you want to check it out, here’s the link.

I began by researching different approaches to installing Tailwind into my computer and going over the documentation on how to get started. Luckily Tailwind has comprehensive documentation, covering everything from installation to customization. After creating the folder structure and setting up the config according to the style guide, that’s when the challenge really began. It was difficult to read through my HTML, I couldn’t wrap my head around how bloated it was.

<div class="copy px-6 py-8 text-center md:w-1/2 md:text-left 
            md:flex md:flex-col md:justify-center md:px-20">
     <h1 class="text-3xl text-mainWhite mb-3.5 md:mb-5 font-bold">
        Get <span class="text-softViolet">insights</span> 
         that help your business grow.
     </h1>
    <p class="text-mainTransparentWhite 
                mb-8 md:mb-10 font-normal md:w-[65%]">  
        Discover the benefits of data analytics and make better decisions
        regarding revenue, customer experience, and overall efficiency.
    </p>
</div>

I was just stacking classes upon classes on a single element and it was confusing at first. But as you get the hang of it, you start figuring your way around. A trick I picked up was to write the mobile styles first, followed by the other breakpoints you have in ascending order, then if you have any custom classes I put them at the end.
It's important to note that Tailwind uses a mobile-first approach which is great, something I should really do a lot of. That means the classes you key in first will be applied to mobile devices. To apply styles to larger screens you need a “utility variant” as they call it, to target the different breakpoints you’ll have set up in your tailwind config file. Other than that everything is pretty straightforward.

For example, the class md: flex in my project, targets an element to have display: flex property on screens 1440px and above.

I remember when I first started working on implementing the design and I couldn't figure out why it wasn't looking the way I wanted it to. It was frustrating because it wasn't easy to quickly scan the code and find the culprit.

Usually, when I work with Vanilla CSS I comment my code according to the different areas I’m styling i.e. Navbar, Body, Footer, nav lists, footer links, etc. but with this new framework, I spent a lot of time trying to find what style was affecting what element when in the debugging phase and how to structure my code in a way I can quickly glance at it and know what's going on. This happens with every new framework I try to learn. The first 2 - 3 times I’m getting the groove of the framework's style and within no time I come up with a system that works for me. This system mostly involves looking at what other people have done and picking what I like from each person, kinda like shopping but for coding. It was a bit tricky to implement this new framework, but it was rewarding to see the design come to life and my mind slowly bend to the will of the Tailwind gods.

I encountered at least 6 different issues with the user interface, including difficulties with responsiveness mainly, and how to place two different pictures at two different screen sizes. I used Flexbox to handle the layout, and it was indeed a great way to make sure that the component looked good on all screen sizes. I added additional lines of custom CSS to handle the responsive images at different screen sizes as I couldn't find a simpler way to do it with Tailwind.

Apart from a few mistakes I made at first like applying flex-col instead of flex row on a different screen size than I intended which cost me close to 2 hours trying to find the problem and which prompted me to get a second pair of eyes on the code to see what was wrong, everything else went smoothly. I had challenged myself to complete this in one afternoon but I needed an extra day just to iron things out.

All in all, it was a great experience and I was able to improve my skills and enjoyed the challenge overall.
I definitely got out of it with a new perspective and here are some key learnings and takeaways:
I'll definitely put more time into the planning and research phase before diving into a project.
I now see the importance of setting up your config styles and getting your style guide in order before even writing a single line of code.
A responsive layout is best started with a mobile-first design. Take it from me.

When in doubt get another person to look at your code. They’ll usually see what is missing and where the mistakes are.
Building the Stats Preview Card was a great learning experience for me and a great foray into Tailwind CSS. It helped me to understand the need for mobile-first design and the importance of planning and research. I also learned the quirky syntax of a new framework. Hey, even if I don’t get to use it in the future, I can now join in the online debate about whether Tailwind is good.

In conclusion, I would recommend this challenge to anyone looking to improve their front-end skills. If you still wanna know what I think of Tailwind, catch me on Twitter and you’ll definitely know what I feel about it.

Thanks for reading. I hope you found this post helpful. If you have any questions or feedback, please leave a comment below. I would love to hear from you and answer any questions you may have.