DEV Community: Bibi

Best UI Libraries for Developers (trust me, I'm a dev)

Bibi — Sat, 11 Jan 2025 21:13:53 +0000

Introduction

If you're building modern web apps, UI libraries are your secret weapon. They save you time, keep your design consistent, and supercharge the user experience. These libraries provide reusable components and systems to get you up and running fast. But, not all UI libraries are made equal. They each have their own design philosophies, feature sets, and best use cases. Here's your ultimate guide to some of the best UI libraries out there, complete with overviews, pros, cons, and my personal recommendations.

1. shadcn/ui

Overview
Meet shadcn/ui—an open-source UI library that's sleek, customizable, and perfectly at home with Tailwind CSS. Its minimalistic design lets you craft lightweight, flexible web apps with ease, all while keeping performance and accessibility in check. Best part? It gives you full control over your styling with utility-first CSS, meaning no more feeling locked into a design pattern you don't love.

The real magic of shadcn/ui? It's modular and headless (yep, unstyled!), so you can add your own flair without being told what to do. It meshes beautifully with Tailwind, giving you those utility classes you crave for the perfect dev workflow.

Best Use Cases

Custom Dashboards: Flexibility to build dashboards that are totally your own.
Lightweight Applications: Great for projects that don't want to be bogged down with too many dependencies.
Tailwind Users: A match made in heaven for Tailwind CSS users who love utility-first CSS.

When Not to Use

Complex Enterprise Apps: If you're building something massive with rich data grids and tons of components, this might not have everything you need out of the box.
Beginners to Tailwind: If you're still getting comfy with utility-first CSS, prepare for a bit of a learning curve.

2. Material-UI (MUI)

Overview
Material-UI (now called MUI) is one of the most widely used React component libraries, built according to Google's Material Design system. It's renowned for its highly polished, consistent, and comprehensive set of components, ranging from simple buttons and icons to complex grids, charts, and form controls. MUI is perfect for developers who need a robust, production-ready solution that includes rich UI components.

MUI provides a highly customizable theming system, allowing you to control aspects like color palettes, typography, and spacing. It also comes with a set of built-in utility functions for managing accessibility, layouts, and responsiveness. With extensive documentation and a large community, MUI is a top choice for many developers building web applications that prioritize both aesthetics and functionality.

Best Use Cases

Enterprise Applications: MUI's rich component library is perfect for complex, data-intensive applications.
Cross-Platform Projects: It allows for a consistent design language between web and mobile (via frameworks like React Native).
Projects Needing Custom Themes: If you want to implement your own unique branding while adhering to Material Design standards.

When Not to Use

Lightweight Applications: MUI can be heavy, and if you don't need the full set of features, it may increase the app's bundle size unnecessarily.
Non-Material Design Projects: If your project doesn't align with Material Design principles, using MUI could feel forced or inconsistent with the desired user experience.

3. Radix UI

Overview
Radix UI is a low-level UI component library focused on providing developers with unstyled, accessible components. Unlike other UI libraries, Radix UI does not impose a design system, giving developers the flexibility to apply their own design. This approach is ideal for developers who want complete control over the look and feel of their components while still ensuring accessibility and functionality.

Radix UI offers a set of composable, unstyled components that come with built-in accessibility features and behavior. It's built with a focus on the UI logic, leaving the styling completely up to you. This gives you the power to create truly custom user interfaces without being tied to any predefined design system.

Best Use Cases

Custom Design Projects: Radix UI is perfect when you need to build a highly customized UI and don't want to work within a predefined design system.
Design Systems and Branding: If you are building your own design system or working on a project that requires a unique visual identity, Radix UI offers flexibility while ensuring accessibility and functionality.
Accessibility-First Apps: Radix UI's components come with built-in accessibility features, making it ideal for applications that need to meet WCAG standards.

When Not to Use

Pre-Styled, Opinionated UI Needs: If you need a fully styled, ready-to-use set of components, Radix UI might not be the best choice since it's unstyled by default.
Time-Sensitive Projects: Radix UI requires you to do your own styling, so if you need to ship a project quickly, this might add extra time to the development process.

4. Ant Design

Overview
Ant Design is the heavy hitter in the UI library game, created by Ant Financial. It's got everything you could ever need for a polished, user-friendly UI—form controls, navigation, data visualization tools, you name it. If you're looking for a library that makes your app look like it's been designed by a pro, this is your go-to.

Ant Design is all about consistency. With a solid design language and a theming system that lets you customize everything from colors to typography, you'll be able to tailor the UI to your heart's content. It's perfect for big projects that require a unified design system and top-notch UI components.

Best Use Cases

Enterprise Applications: If you're building something large-scale and data-heavy, Ant Design has your back with a full set of tools.
Admin Dashboards: Want a ready-made solution to build those complex admin interfaces? This library's got you covered.
Data-Heavy Applications: Ant Design's got strong support for tables, forms, and charts—perfect for any app that's juggling tons of data.

When Not to Use

Non-Enterprise Projects: If you're building something small or lightweight, Ant Design might feel like overkill.
Projects with Custom Branding: Ant Design's design language is pretty specific, so if you're aiming for a highly unique look, this might not be your best bet.

5. Chakra UI

Overview
Chakra UI is a simple, modular, and accessible component library for React. It provides a set of building blocks for creating modern user interfaces with a focus on simplicity and accessibility. Chakra UI offers a flexible design system that makes it easy to create custom UI components by using pre-designed building blocks, which are highly customizable via style props.

Chakra UI's design philosophy emphasizes ease of use, accessibility, and consistency. It comes with a wide range of components, such as buttons, modals, and tooltips, that are designed to be customizable without having to deal with complex stylesheets. The library also integrates well with modern CSS-in-JS libraries like Emotion.

One of Chakra UI's most notable features is its accessibility-first approach. All components come with built-in support for keyboard navigation, screen readers, and other assistive technologies, making it a great choice for projects that prioritize inclusive design.

Best Use Cases

Customizable UI Components: Ideal for projects where you need a set of flexible, accessible components that can be customized via props.
Accessibility-Focused Projects: Works great for projects that prioritize accessible and inclusive user experiences.
Developer Productivity: For developers who want a streamlined process to build React UIs with a component library that's easy to integrate and use.

When Not to Use

Highly Complex UIs: If you're working on a project that requires highly intricate or custom designs, Chakra UI's pre-built components might not be flexible enough for the level of customization needed.
Non-React Projects: Chakra UI is tailored for React, so it's not suitable for projects built with other JavaScript frameworks.

6. Tailwind UI

Overview
Tailwind UI is a commercial component library built by the creators of Tailwind CSS. It provides a collection of professionally designed, fully responsive UI components, optimized for use with Tailwind CSS. Since it's built on top of the utility-first design system of Tailwind, it offers a unique approach to building UI elements that are highly customizable and adaptable to any project.

Unlike other component libraries that provide pre-styled components with a fixed design, Tailwind UI components allow for seamless integration with Tailwind's utility classes, making it a perfect fit for developers who are already using Tailwind CSS in their projects.

One of the key advantages of Tailwind UI is its ability to provide highly customizable components out of the box. Developers can adjust the design using Tailwind's utility classes, resulting in a tailored UI that matches their branding or project requirements.

Best Use Cases

Tailwind CSS Users: Tailwind UI is a natural choice for developers who are already using Tailwind CSS and want pre-built components that fit seamlessly into their design system.
Customizable UI Components: Ideal for projects that require high levels of customization, where the utility-first approach is preferred.
Responsive Layouts: Perfect for building responsive UIs that adapt across a wide variety of devices and screen sizes.

When Not to Use

If You Don't Use Tailwind CSS: If you're not using Tailwind CSS in your project, the components in Tailwind UI may not be as useful or easy to integrate.
If You Need a Complete Design System: Tailwind UI offers components but doesn't provide a complete design system, so it may not be the best fit for projects that require a full design toolkit with extensive guidelines.

7. Bootstrap

Overview
Bootstrap is one of the most popular open-source front-end frameworks that provides a collection of CSS and JavaScript components. Developed by Twitter, Bootstrap offers a grid system, pre-designed components, and JavaScript plugins to help developers build responsive and mobile-first websites with minimal effort. The framework follows a "mobile-first" design philosophy, meaning it prioritizes responsiveness for mobile devices, and then adapts to larger screens.

Bootstrap includes a robust set of default styles for buttons, forms, typography, navigation bars, and other UI elements, allowing developers to quickly prototype or build fully responsive and feature-rich UIs without having to worry about CSS from scratch.

The most significant advantage of Bootstrap is its widespread adoption and huge community support. There are extensive resources, tutorials, and third-party libraries that extend Bootstrap, making it a go-to solution for building websites and web apps rapidly.

Best Use Cases

Quick Prototyping: Bootstrap is perfect for creating quick prototypes or MVPs (Minimum Viable Products) due to its ready-to-use components and grid system.
Responsive Websites: Its mobile-first approach and built-in media queries make it an excellent choice for developing websites that need to work across multiple screen sizes.
Minimal Customization Needs: For projects where minimal custom styles are required, Bootstrap's pre-built components offer a fast, consistent solution.

When Not to Use

If You Need a Highly Custom Design: Bootstrap's default look is widely recognized, so if your project requires a completely unique design, it may not be the best choice, as the out-of-the-box components might be too generic.
If You Need Lightweight Styles: Bootstrap is a large framework that may come with more features than you need, leading to potentially unnecessary bloat in your project.
If You Need a More Modern Approach: Although Bootstrap is continuously updated, its approach to styles (particularly using pre-defined classes for layout) may feel outdated compared to newer utility-first frameworks like Tailwind CSS.

Closing Thoughts
To wrap it up, each of these UI libraries—Shadcn/UI, Material-UI (MUI), and Radix UI—brings something different to the table.

Shadcn/UI is all about flexibility and freedom, giving you the power to craft lightweight, highly customizable web apps without sacrificing performance or accessibility. It's a solid pick for Tailwind lovers and anyone who wants complete control over their design.

Material-UI (MUI), on the other hand, is the go-to for enterprise-level apps that need a polished, comprehensive set of components and a robust theming system. It's ideal if you're building something complex or need cross-platform consistency, though it might be a bit overkill for lighter projects.

Radix UI plays in its own league, offering unstyled, accessible components that let you create fully custom user interfaces, making it perfect for those working on design systems or accessibility-first apps. Ultimately, the right choice depends on your project's scope and what kind of flexibility or structure you're looking for.

And that's it for now! But don't worry, there's more on the way. If you've been enjoying this dive into UI libraries and all things web dev, there's plenty more to come. So, keep an eye out for my next posts 👀

A Quick Guide to React's useState and useRef

Bibi — Mon, 19 Aug 2024 14:14:20 +0000

When you're starting out, useState and all of its quirks can be overwhelming enough. Now throw useRef into the mix and you get a loud brain explosion.

I thought it would be helpful to dive a bit deeper into the technicalities of useRef vs useState, as engineers usually have a hard time understanding the differences between them and when to choose one over the other.

Here are my definitions for each, in broad strokes and obviously oversimplified:

useState is a hook that lets you access and update a value, triggering a re-render.

useRef is a hook that lets you reference a value that’s not needed for rendering.

You might be asking yourself, why is it important to understand what each of these bring to the table? Well, you might be tempted to slap useState into everything, simply because it does work.

Yes, HOWEVER, the more complex your app becomes with components passing state props 5 levels down, triggering a bunch of unnecessary updates along the way, you're probably going to start running into performance issues sooner than you imagine.

Another misconception a lot of devs have is thinking that useRef can only manipulate and access DOM elements, which is sad because y'all are missing out on the other 99 things¹ useRef can do.

Let's start with useState! Keep your ears open now, my dear dev ʕ◉ᴥ◉ʔ

✨ useState

useState is a powerful but easy way to update the view once a variable's value changes, it keeps the latest value synchronized with the screen without manually performing any operations ourselves. The declaration syntax goes like this const [memesILiked, setMemesILiked] = useState(9000).

Now, let's talk about what happens under the hood when you perform an operation with useState.

Updating a state value triggers a re-render, and as you might imagine, re-rendering the view is a VERY expensive operation for the browser to handle. Here's how React and the browser operate in conjunction to make sure your app is updated:

Event Trigger: An event triggers a state update. A click, timer or anything really.
State Update: setState is called and schedules an update for the component, the component is marked as "dirty" (needing re-render).
Reconciliation Phase: React starts the reconciliation between the new virtual DOM and the old virtual DOM. It recursively re-renders the component and all of its children.
Checking the differences: React compares the new virtual DOM tree with the previous one. The changes are stored in a list of updates to be applied to the real DOM.
Render Phase: The render method or function component is called with the new state.
Commit Phase: React applies the changes from the diffing process to the real DOM.
Update the DOM: The real DOM is updated to reflect the new state. The browser re-paints the DOM, visually updating the UI.
Post-render Effects: Any effects that were scheduled to run after the component was re-rendered are called. This includes useEffect hooks that were registered with dependencies that changed during the render.

Phew, that's a lot of stuff... While the above process ensures that your UI stays in sync with your application state, it also highlights why excessive or unnecessary re-renders can lead to performance issues. Luckily, React provides several strategies and tools to help optimize this process, like useMemo and useCallback, but that's beyond the scope of this article!

In summary, useState is a pretty handy hook, and when used right, it can provide the user a great experience. Take theme toggling, for example. With useState, you can easily switch between light and dark modes, giving your users that instant gratification of seeing the app transform based on their preferences.

✨ useRef

Now, let’s talk useRef. While useState is all about triggering re-renders when state changes, useRef is like the quiet observer that never wants to draw attention to itself. It's perfect for storing mutable values that don't require a re-render when they change. The syntax looks like const memeRef = useRef(null).

useRef is most often used for accessing DOM elements directly. For instance, if you need to focus an input field programmatically, useRef can hold a reference to that element. But useRef's capabilities go beyond just DOM access. It can also store any mutable value! And this, my friends, is where the magic happens 🪄🪄🪄 (in my opinion anyway).

Think of it like this: useRef is a way to persist values across renders without triggering a re-render. This makes it perfect for storing data like timers, counters, or even the previous state of a component. Unlike useState, updating a ref doesn't notify React to re-render your component. It just quietly updates the value and carries on with its business.

Here's a practical example: let's say you want to implement a simple counter, but you don’t want the UI to update every time you increment the counter. You could use useRef to store the counter value. The counter would increment as expected, but because the component doesn’t care about this ref value for rendering purposes, no re-rendering would happen.

useRef is also great in preserving the latest value of a state without causing additional renders. For example, if you're using an interval to update a value, but you don't want that value to trigger a re-render every millisecond, useRef is your go-to tool. It allows the value to change in the background, keeping your UI responsive and avoiding unnecessary re-renders.

In summary, useRef is best used for:

Accessing DOM elements: Classic use case, like focusing an input field.
Storing mutable values: That don't require re-rendering, such as timers or previous values.
Maintaining values across renders: Without causing a re-render, keeping your UI smooth and efficient.

Now that you HOPEFULLY understand the difference (if I've done my duty correctly²), let's dive into a few not-so-common use cases. I will focus on useRef a bit more as I feel like it's the unsung hero here.

Tracking Component Mounting Status: useRef can be used to track whether a component is mounted or unmounted, this can be useful for avoiding state updates after unmounting.
Holding Static Values: For storing static values that don't change between renders, like a constant or a cached value, useRef is more efficient than useState.
Preventing Re-Initialization: If you want to prevent a piece of code from re-running every render (for example, initializing a WebSocket connection).
Storing Previous Callbacks: If you need to keep a reference to a previous callback function, useRef can store the previous function reference without affecting the component's rendering cycle.
Referencing Timer IDs: When working with timers (like setTimeout or setInterval), store the timer ID in a useRef to avoid triggering a re-render every time the timer is set or cleared.
Triggering Animations: For triggering animations imperatively (like a CSS transition or scroll animation), useRef can be used to directly interact with DOM elements without causing re-renders.

✨ Conclusion

While useState is crucial for managing and reacting to state changes that should trigger re-renders, useRef is the silent partner that helps you manage state without disrupting the UI.

Knowing when to use each can save you from potential performance issues and make your React applications more efficient and maintainable!

Thanks for reading, if you made it here, PAWS UP AND HIGH FIVE! ⊹⋛⋋( ՞ਊ ՞)⋌⋚⊹

Footnotes:
¹ Obviously an exaggeration.
² I'm a bit dramatic, in case you couldn't tell.

Vercel's latest product is the best thing since sliced bread

Bibi — Sat, 06 Jul 2024 21:49:40 +0000

all opinions are my own and don't reflect my employers in any way (even though it should). I write with a humorous flair and if you get butt hurt that's your problem ٩(＾◡＾)۶

You should know by now that I'm a NextJS evangelist, so it should come as no surprise that I'm knocking door to door spreading the Vercel gospel yet again -- BUT, hold on to your seats my dear devs... because today, I bring a fresh-out-of-the-oven tool for y'all to delight yourselves with. Enter our lord and savior, v0.

v0 is Vercel's newest addition to their product catalog, it is a Generative UI tool that uses simple text prompting and images to generate pages for you. Forget boilerplate code and templates, v0 aims to take you from a blank screen to a complete page faster than ever before!

But how does it work? After you submit your prompt, the platform gives you three choices of AI-generated user interfaces. You can pick one, copy the entire source code generated, or refine it further until you get what you want!

Sounds like any other AI tool out there, right? Yes and no. Yes, it's AI. But no, it's better than anything else out there. These are just some of its initial key features:

Follow up prompting: v0 allows you to endlessly refine the UI to your own taste using prompts, zero code involved! You can select individual parts of the UI to fine tune your creation.

Switch between canvas and code: seamlessly make code and UI adjustments on the fly, your changes are reflected instantly on the generated UI. Think of Webflow meets VS Code!

Public/private mode and community templates: Browse through what others have published to the community, giving you an even better starting point reference. Alternatively, you can keep your work in stealth and no one will know what you're cooking!

Leverage ShadCN/UI and Tailwind: You get pre-built, open-source, fully responsive UI components with ShadCN and industry-standard Tailwind. Because nobody wants to pay for MaterialUI 👀

A note on accessibility -- While v0 does generate ARIA attributes to incorporate accessibility standards, it still leaves room for improvement in terms of inclusive design. I can assure you though, it's more than what your company is doing for accessibility anyway 👀

My thoughts on v0 ໒(⊙ᴗ⊙)७✎▤

While the tool is currently focused on frontend code generation and can't perform data fetching yet, I firmly believe eventually this feature will be around with the official alpha release. While it does generate generic code, eventually, I know for a fact it will integrate with your existing codebase and Figma design system, allowing it to contextualize the output and create that seamless experience that we developers love -- a good copy and paste that just works!

Now, I want to wrap this article with a prediction. Two years down the road, vanilla React will be gone and forgotten. NextJS will take over as the most popular framework and Vercel will release a CLI version of v0 with some neat VS Code plugins. Frontend engineering will be more about prompting these tools for the best output, rather than coding useless media-queries.

We'll have to wait to find out, and in the meantime, I shall continue spreading the word door to door...

Do you have five minutes to hear the word of our lord and saviour today?

Play with v0 and see the magic for yourself: https://v0.dev/

Thanks for reading my silly article ๑(◕‿◕)๑~~~

All resources on this page were sourced from the v0 launch keynote.

Closures in JS 🔒

Bibi — Wed, 26 Jun 2024 03:38:46 +0000

TL/DR:
Closures are a synthetic inner delimiter that has access to its parent's scope, even after the parent function has finished executing.

Not clear? I didn't get it either. Read along partner!

🔒 Closures 🔒

Ah, closures. Sounds pretty straight forward... whatever's inside the curly braces right?! Well, yes and no. This topic is quite simple but there's a lot to explore in it, you'll wonder whether you accidentally stumbled into a parallel universe after reading, I guarantee. But fear not, my fellow wizards, for today we shall unravel the enigma that is closures!

First, let's start with the textbook definition because I love a good MDN reference:

a closure is the combination of a function bundled together with references to its surrounding state (the lexical environment), even after the outer function has returned. Kinda like having the key to a treasure chest of variables, even when you've left the pirate ship!

Okay that wasn't MDN verbatim, but you get the idea. So, how does this sorcery work?? Well, when you create a function within another, the inner one has access to the variables and parameters of the outer function. This is because the inner function forms a closure, maintaining access to the environment in which it was created. It's like the inner function remembers its surroundings!

Here's a classic example to illustrate closures:

In this example, outerFunction takes a parameter x and has a local variable y. It defines an innerFunction that accesses both x and y, and then returns the innerFunction. When we assign the result of calling outerFunction(5) to the variable closure, we are essentially capturing the innerFunction along with its environment (where x is 5 and y is 10). Even though outerFunction has finished executing, the closure still remembers the values of x and y, allowing us to invoke it later and get the expected output of 15.

This was just a simple example, but closures actually have various practical applications, such as data privacy, factories, and memoization. They allow you to create functions with private state and encapsulate behaviour, leading to more modular and reusable code. Let's do a deeper dive into these specific applications:

1. Private Variables and Encapsulation 🔒

Closures can be used to create private variables and achieve encapsulation. Consider the following example:

In this example, the createCounter function returns an object with an increment method. The count variable is defined within the createCounter function and is not accessible from the outside. The increment method, being a closure, has access to the count variable and can modify it. Each time counter.increment() is called, the count is incremented, but it remains private and cannot be accessed directly from the outside.

2. Function Factories 🏭
Closures can be used to create function factories, which are functions that generate other functions with customized behaviour. Here's an example:

In this case, the multiplyBy function takes a factor parameter and returns a new function that multiplies a given number by the factor. We create two separate functions, double and triple, by calling multiplyBy with different factors. Each returned function forms a closure, capturing its own factor value, allowing us to multiply numbers by the respective factors.

3. Memoization ⏰
Closures can be used to implement memoization, which is a technique to cache the results of expensive function calls and return the cached result when the same inputs occur again. Here's an example of memoizing a factorial function:

In this example, the memoizedFactorial function returns a closure that serves as the actual factorial function. The closure maintains a cache object to store previously computed results. Whenever the factorial function is called with a number n, it first checks if the result is already in the cache. If it is, it returns the cached result. Otherwise, it calculates the factorial recursively and stores the result in the cache before returning it. Subsequent calls with the same n will retrieve the result from the cache, avoiding redundant calculations.

These examples are obviously simple but the applications of closures in JavaScript can be much more complex. They can provide a powerful mechanism for data privacy, code organization, and optimization, when done right!

However, closures can also lead to some gotchas if not used carefully. One common pitfall is creating closures in loops, where the closure captures the last value of the loop variable. But that's a story for another day!

Alright, I think that's it for me ┗(･ω･;)┛

Here are some key points to take home:

A closure is a function that remembers the environment in which it was created. It has access to variables and parameters of the outer function.
It allows a function to access variables from its outer (enclosing) scope, even after the outer function has finished executing.
Closures can access and manipulate variables from the outer scope, even after the outer function has returned.

Hope you learned something with me today! (´◡`)
Bibi

Hoisting for dummies (aka me)

Bibi — Wed, 05 Jun 2024 04:35:16 +0000

TL/DR:
Hoisting is a useful JavaScript feature that allows you to use variables and functions before they are declared. However, it's crucial to remember that only declarations are hoisted, not assignments. The keywords let and const have different hoisting behaviours, and strict mode can be used to avoid potential hoisting-related issues.

A quick guide to hoisting 🏗️

Hoisting is one of those buzzwords you hear about only two times in your dev life, one is during that pesky interview and the other is when you're in school. But guess what? I never learned it (or maybe I did and forgot, sorry teacher). So, let's find out what the mystery of ✨hoisting✨ is.

The textbook definition of hoisting is to lift something heavy, to move from a lower position to a higher position.

Interesting... But still doesn't click for me.

MDN defines hoisting as:

the process whereby the interpreter appears to move the declaration of functions, variables, classes, or imports to the top of their scope, prior to execution of the code.

Ah. Now I get it.

This means that regardless of the their actual placement within the scope, you can use them as if they were declared at the beginning. If you're familiar with the black magic of var, that is basically hoisting at it's finest. Just add functions, classes and imports into the mix.

There is a few catches though. Only declarations are hoisted, not assignments. It also doesn't apply to arrow functions, as they are declared with the const keyword.

I'm a visual person, so I made some ~cool~ graphics using Figma. Check this out:

Alright, I think that's it for me ┗(･ω･;)┛

Here are some key points to take home:

Variable and function declarations are hoisted: Hoisting applies only to declarations, not assignments. For instance, the declaration ‘var headcount’ is hoisted, but the value assignment ‘var headcount = 10’ remains at its original location.
let and const behave differently: Unlike var, which is hoisted to the top of its scope, let and const variables are declared in the place they are written. Attempting to access a let or const variable before its declaration will result in a reference error.
Hoisting in Strict Mode: JavaScript offers a "strict mode" to prevent potential issues caused by hoisting. When running code in strict mode, let and const variables are no longer hoisted, ensuring clear and error-free code.

Hope you learned something with me today! (´◡`)

Bibi