DEV Community: Mma Obiora

Tailwind Css Vs Bootstrap

Mma Obiora — Thu, 04 Jul 2024 12:43:31 +0000

Tailwind css vs Bootstrap
In the fast growing and ever-changing world of technologies, choosing the right tools and technologies is very pertinent to the performance, customization and development of an application. In frontend Development, design and responsiveness Is very important. Amongst the numerous technologies, tailwind css and Bootstrap have emerged as two of the most popular choices. Both technologies aim to improve the process of building responsive, visually appealing websites although they have different approaches and unique features. In this article, we will compare Tailwind css and Bootstrap and exploring their differences.

Tailwind Css
Tailwind CSS is a Utility-first CSS framework for building rapid custom UI. Tailwind CSS is all about giving you these utility classes for things like colors, spacing, and how text looks. This means you can mix and match them to make your web page look just right.
It is a highly customizable, you can change how Tailwind CSS works to fit your needs. This includes changing the color scheme, the fonts, and more right in the settings.
Tailwind is also a low-level CSS framework that gives you all of the building blocks that you need. Also, it is a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS.

Bootstrap
Bootstrap was made by some folks at Twitter in 2011 and is a free tool that makes building websites faster and easier. It's prevalent among people who make websites because it has a bunch of ready-made parts you can use
It has its system with 12 columns that change size based on how big the screen is, making it great for viewing on phones, tablets, and computers.
It comes with lots of ready-to-use pieces like menus, buttons, and alerts. You can change how these look with some coding skills.
Bootstrap is made to be mobile-friendly from the start and works well in different web browsers. This means websites built with Bootstrap look good on any device.
You can easily change the look of your site with Bootstrap's theme system, like adjusting colors and more.
There's a lot of help and examples online to get you started quickly.
Bootstrap helps you build websites quickly with its grid system, ready-made parts, and easy customization. It's designed to make sure sites work well on all devices, which is why so many developers like to use it.

Differences between Tailwind and Bootstrap

Bootstrap has already made parts for quick website building, on the contrary, tailwind gives tools to create your design
When it comes to customization, Bootstrap doesn’t give so many avenues to change things while in tailwind you can change everything
Bootstrap is very beginner friendly but in tailwind, it takes more time to learn

In conclusion, Bootstrap is like a fast food, prepared and ready to go to while tailwind is like different ingredients that you have to put together. Both technologies are good but they are unique. So, In developing an application, you have to choose the one that best satisfy you needs

https://hng.tech/hire
https://hng.tech/premium

How I solved a problem I encounter as a backend developer

Mma Obiora — Sat, 29 Jun 2024 20:53:55 +0000

Growing up, I have always been fascinated by technology. How they work, how they are made, I just want to know how things work, I would open up spoilt radios just see what was inside it and how it works. I remember my brother used to have an electric teddy bear that talked and I was curious about it so one night I tore it open and I brought out the element.

P.S: The next day I almost met my maker, if you know you know

Anyway, that curiosity died (died is a strong word, let me say me subsided) from the hands of long hours in the classroom just talking theory. I used to hate computer as a subject, all we did was talk about computers all long without using the computer.

My curiosity was ignited when I saw my neighbor coding, I did not understand what he was doing but then again I was curious and he explained to me what he was doing. Fast forward, my neighbor introduced me to HTML, Css and JavaScript, he gave series of courses to watch.

One of the first projects i built was a Sign-up website. It was a static website, it was not really doing anything special other than users inputting their details. So I did my research and I was going to add authentication to my Sign-up page
I found a tutorial on YouTube and followed the tutorial step by step and boom, I had written my first backend code even though I didn’t understand what I wrote.

I was so excited about my code and was going to test on the frontend

But then I encountered an error

I had to watch the tutorial all over to ensure I didn’t miss something, of course I did not miss anything, it was not in the tutorial

After 1 hour spent searching Google and reading articles. Voila! I found it, speak of the devil

How I solved the error
The port that the frontend was running on has to be given the access in order for the backend to work

About Me
I am a Frontend developer with little experience in backend development and I would love to explore backend more. One of the traits of a curious person is the thirst for knowledge. I love to learn more

My Expectations of the HNG Internship:
My expectations include learning to write clean, effective and efficient codes, learning best practices of writing code, learning to function and think under pressure also, learn how to work in a team and also, learning leadership skills
My ultimate expectation is to come out of my comfort zone.

https://hng.tech/internship
https://hng.tech/hire

Asynchronous JavaScript

Mma Obiora — Tue, 19 Mar 2024 02:34:24 +0000

In this article we will learn about asynchronous Javascript but before we delve into asynchronous Javascript, it is pertinent to examine Synchronous code and understands how its works

It is important to understand Synchronous code because by default Javascript is a Synchronous language

In the JavaScript code snippet provided above, there are three lines of instructions. The browser effectively steps through each instructions one after the other, in the order written. This implies that the browser waits until one instruction is completed before executing the next.

This synchronous behavior of JavaScript ensures that the console logs are displayed in the order specified in the program.

JavaScript can only do one thing at a time. This synchronous nature of JavaScript can lead to problems especially when waiting for tasks that takes significant amount of time to complete

What then is the solution?

The solution will look like this:

1.Initiate a long-running operation by invoking a function.

Enable that function to commence the operation and promptly return, ensuring our program remains responsive to other events.
Ensure the function executes the operation without halting the main thread, possibly by initiating a new thread.

4.Inform us of the operation's outcome once it finishes at a later time.

Asynchronous JavaScript helps implement this solution.

Asynchronous code can execute several tasks concurrently while while tasks in the background finish. This is what we call non-blocking code. The execution of additional code continues uninterrupted while an asynchronous task completes its operations.

Asynchronous programming can significantly improve the performance and responsiveness of an application

Here's an example of an asynchronous program using the setTimeout method:

In the above snippet, the setTimeout method triggers the execution of a function after a designated time. The function supplied to setTimeout operates asynchronously, allowing the program to proceed to the subsequent line of code without waiting for the timeout to complete.

When the code is run, the output will be

As you can see, console.log("First timeout completed") will be executed after 2 seconds. Meanwhile, the script continues to execute the next code statement and doesn't cause any "blocking" or "freezing" behaviour.

JavaScript offers numerous approaches to asynchronous programming. Among these, employing async and await is the best techniques.

Async Functions with async/await

Async/Await is a feature that allows you to write asynchronous code in a more synchronous, readable way.

The await keyword

The await keyword is placed before the call to a function or variable that returns a promise. It makes JavaScript wait for the promise object to settle before running the code in the next line.

Now if you run the code above, you might get an error like this:

This error occurs because the await keyword must be used inside an asynchronous function or a module.

The Async Keyword

To create an asynchronous function, you need to add the async keyword before your function name. Take a look at line 1 in the example below:

Here, we created an asynchronous function called jsonFunction() and put the code that uses the await keyword inside it. We can then run the asynchronous function by calling it, just like a regular function.

Conclusion

Now you've learned how the async/await syntax works. The syntax makes working with promises much easier by removing the need for .then() and .catch() method chaining, which also removes the need for nested callbacks.