DEV Community: TURINUMUGISHA Souvenir

"The pesticide paradox" when fixing a bug causes other bugs 😢

TURINUMUGISHA Souvenir — Mon, 27 Feb 2023 04:12:06 +0000

Have you ever fixed a bug in your code, only to find that it introduced another one? Or have you ever noticed that your code seems to be getting buggier and more difficult to maintain, even though you're fixing bugs all the time? If so, you may have fallen prey to the pesticide paradox.

In the world of software development, the pesticide paradox refers to the phenomenon where repeated attempts to fix bugs actually end up creating more bugs, just like how using too much pesticide can lead to resistant bugs that are even harder to eliminate. This paradox can be frustrating, demotivating, and costly for developers and organizations alike, as it can lead to wasted time, resources, and revenue.

And all that is sad,

In this article, we'll dive deeper into the pesticide paradox, exploring its causes, consequences, and potential solutions. By the end of this article, you'll be better equipped to navigate the paradoxical world of software bugs and hopefully write cleaner, more robust code.

Without further delay, Let's get started 🏃‍♀️

The farmers' story

Once upon a time, in a kingdom far away, the farmers were struggling to keep their crops safe from pests. They used pesticides to protect their crops, but over time, they noticed that the pests were becoming resistant to the pesticides. They had to keep changing the pesticides they used to keep the pests at bay.

The same thing happens to our codes 😿

In the same way, programmers face a similar problem called the "pesticide paradox". Fixing one issue can sometimes cause new ones to appear. Just like how using the same pesticide repeatedly leads to pest resistance, repeatedly fixing the same issues in code can make it more complex and harder to maintain, eventually leading to the introduction of new issues.

Alex's story is one of such 😔

One such programmer was named Alex. They were working on a complex software project and had received a bug report from a user that a certain feature was not working as expected. Alex spent several hours debugging the code and finally found the issue and fixed it.

The unexpected happened, 🤐

However, a few days later, they received another bug report from a different user 😯, which turned out to be caused by the same piece of code that Alex had fixed earlier. Alex realized that the fix they had implemented had inadvertently introduced a new bug. Frustrated and stressed out, Alex spent the next few days trying to fix the new bug, but ended up introducing even more issues.

Things went out of control 😔💀

The situation continued to spiral out of control, with Alex spending more time fixing bugs than actually making progress on the project. The stress of constantly trying to fix one issue after another began to take a toll on their mental and emotional well-being.

Alex came up with a working and long-term solution ✊

Eventually, Alex realized that they needed to take a step back and re-evaluate their approach. They decided to refactor the code, write automated tests, and get feedback from their team members. By taking these steps, they were able to identify the underlying causes of the issues and implement a more robust solution that prevented them from recurring.

Alex finally got rid of the pesticide paradox 💪

In the end, Alex learned the importance of maintaining code quality and avoiding the pesticide paradox. They realized that taking a proactive approach to software development was key to delivering high-quality, bug-free software and avoiding the stress and frustration that comes with constantly fixing issues. And just like a good story, a well-maintained codebase will stand the test of time and keep delivering its value for years to come.

Moral of the story

Alex's story is one of many but if you're facing a similar situation, you're not alone

Here are some key takeaways from Alex's story that can help everyone avoid falling into the pesticide paradox:

Understand the requirements

It's important to have a clear understanding of the requirements and scope of a project before starting to write code. This can help prevent scope creep and minimize the chances of introducing bugs while making changes.

Refactor frequently ⚡

Refactoring code frequently can help keep it clean, modular, and maintainable. It can also help catch bugs early and reduce the risk of creating new ones while making changes.

Use version control 🔨

Version control systems like Git can help keep track of changes, allow for easy rollback, and facilitate collaboration. This can help reduce the chances of introducing bugs while making changes and make it easier to fix bugs if they do arise.

Test thoroughly ➿

Testing leads to failure and failure leads to understanding 📌

Testing code thoroughly can help catch bugs before they make it to production. This includes unit tests, integration tests, and user acceptance tests. Automated testing can also help reduce the chances of introducing bugs while making changes.

Effective communication is the key 😎

" Effective communication is the key to successful software development. "

Effective communication with stakeholders, including clients, managers, and other developers, can help ensure that everyone is on the same page and that changes are being made in a way that aligns with the project goals. This can help prevent misunderstandings and reduce the chances of introducing bugs while making changes.

Did you know that this is the end 😂

Hope the article helped! For much more wise content and posts like this follow Ederner_labs

✌✌✌

"The Power of the Coding Mindset": How Developing the Coding Mindset Can Take Your Programming to the Next Level

TURINUMUGISHA Souvenir — Wed, 22 Feb 2023 05:28:38 +0000

Mastering a coding mindset is essential to become a successful programmer in the world of programming.

It's a unique way of thinking that enables programmers to solve complex problems, write efficient code, and stay organized throughout their whole carrier.

In this article, we'll explore why mastering a coding mindset is so important and provide tips on how to develop this essential skill set all in the art of storytelling.

Without further ado, Let's get started

Let's hear David's story

Meet David. He has been programming for over a decade and considers himself an experienced programmer. He spends hours every day writing code, but he often feels like something is missing. David wants to be a valuable programmer, but he's not sure how to get there. He starts reading tutorials and watching online courses, hoping that learning more programming languages will make him more valuable. However, he soon realizes that he's stuck in the tutorial hell cycle. He's constantly learning new concepts but struggling to apply them in real-world projects.

A friend helped ✊

One day, David's colleague introduces him to the concept of the coding mindset. He learns that the coding mindset is not just about learning programming languages and memorizing syntax but about developing problem-solving skills and efficient coding practices. This includes learning to love feedback and not taking it as a personal attack.

It was never easy to adopt 👷‍♀️

David struggles with this aspect of the coding mindset. Whenever someone criticizes his code, he feels like he is being attacked personally. However, he soon realizes that feedback is an opportunity to learn and improve. He starts to embrace feedback, applying it to improve his coding abilities.

Finally, greatness is achieved 💪

As David continues to develop his coding mindset, he notices a significant improvement in his programming skills. He can now solve problems more efficiently and write optimized code. He realizes that by focusing on the coding mindset, he has become a more valuable programmer, and his career takes off.

Moral of the story 😋

David's story shows that mastering the coding mindset is essential to becoming a successful programmer. By avoiding tutorial hell and developing problem-solving skills, efficient coding practices, and a positive attitude towards feedback, programmers like David can become more valuable and successful in their careers.

Almost feel bored and tired 😊 Don't worry,

But What are the key takeaways 😕🤔

Certainly! Here are some key takeaways that everyone can learn from David's story:

Avoid tutorial hell 🔁:

Focusing solely on learning programming languages and watching tutorials without applying the concepts can lead to stagnation and prevent growth as a programmer.

Keep in mind that "There's no shortcut to becoming good at programming. Having enough time to practice will only make you better in this career"

Develop a problem-solving mindset 🧠:

Mastering the coding mindset is not just about memorizing syntax but also about developing a problem-solving mindset to tackle complex problems.

Embrace feedback 💏:

Feedback is essential for growth and improvement as a programmer. Learning to accept criticism without taking it personally and using it constructively can lead to significant progress.

Collaborate with others 🤼:

Working with others and learning from them can help develop efficient coding practices and expand knowledge.

Focus on understanding concepts 📖:

Instead of memorizing syntax, focusing on understanding the concepts behind programming can lead to a more profound understanding and better problem-solving skills.

Last but not least,

By incorporating these takeaways into their own approach to programming, aspiring programmers can develop a coding mindset and set themselves up for success.

This is the end,

Hope the article helped! For much more wise content and posts like this follow Ederner_labs

✌✌✌

Every javascript developer should learn Typescript 🔥🔥and here is why

TURINUMUGISHA Souvenir — Thu, 11 Aug 2022 09:47:00 +0000

If you write javascript, I'm sure you've at least heard of TypeScript language. Either somewhere online, Job posts or anywhere else. You might be wondering about what it is and what it brought to us that makes is so popular, whether it's worth learning or not, may be about it's commmunity and more.

This cool stuff called Typescript is rapidly dominating the web 🤞 and it should in my opinion due to several factors

Learning typescript has been one of the ever winning decisions I could have made in my career - no exaggeration here. In the last three years, every javascript project that I have contributed to, was using typescript in one way or the other.

When we generally pick any new language or technology we consider many points like its flexibility, how useful it is? What would be the future of it? etc.
Instead of presenting only one side of the story or doctored facts, this article will solve all your queries related to TypeScript.

Without further ado,

What is typescript

Starting from the very basic, Typescript is Microsoft’s open-source project which could be referred to as the superset of JavaScript.
TypeScript builds on top of JavaScript. First, you write the TypeScript code. Then, you compile the TypeScript code into plain JavaScript code using a TypeScript compiler.

Once you have the plain JavaScript code, you can deploy it to any environments that JavaScript runs.

TypeScript files use the .ts extension rather than the .js extension of JavaScript files.

Here is how the flow goes:

The main goals of TypeScript are:

Introduce optional types to JavaScript.
Implement planned features of future JavaScript, a.k.a. ECMAScript Next or ES Next to the current JavaScript.

That's it,

TypeScript brings the future JavaScript to today

In simple words,

Here are is a combination of five reasons to why you should learn typescript:

1.Typescript's domination in the industry

Typescript is dominating the web as javascript did, nowadays due to the beauty of typescript, both small(start-ups) and big companies are using typescript

Google, Facebook, Microsoft, and many more big names are working on TypeScript and using it. So it really excites so much that you are working on projects with the technology which is having global scope.

You might be wondering what that means, but if you're searching for a job you will need to apply to the jobs posted by some of these companies and start-ups, and so you will be required to have a knowledge of typescript to work with them.

2. Growing and supportive community

From the time Typescript has been introduced, it is gaining popularity with time. The curve for its popularity is really great if we see the last few years. As we know that Microsoft is building many efforts for growing community Typescript.

If you look at online developer surveys such as those for stackoverflow, you will see that there is a big community behind typescript and this is increasing steadily.

2. The power Typescript adds to javascript

Typescript is unbeatable and brings super powers to javascript believe it or not.

It improves your productivity while helping avoid bugs.
By using types, you can catch bugs at the compile-time instead of having them occurring at runtime -Javascript didn't have this.

Here are the main awesome features that typescript brings to the world of javascript devs:

Object-Oriented Programming: TypeScript provides all features of Object-Oriented Programming where you can form objects because TypeScript provides inbuilt support for classes, interfaces, and many more features of OOP. It helps in designing and implementing them with clean and scalable code. This feature of TypeScript separates it from others and it makes the code more readable which helps to easily maintain and alter code.

Supports all JavaScript libraries: Typescript supports all the JavaScript libraries and you can change your existing JavaScript project into TypeScript by just changing the extension of the file .js to .ts.

Static Typing: Typescript takes the robust code at another level to write scripts which helps in writing and maintaining larger codes especially in the case of scripting which helps in analysis of code. You don’t have to wait till the runtime to find bugs in your code which reduces complications of designing. It promotes dependable refactoring and makes it faster.

Dependency Injection: Typescript allows you to create objects outside the class and provide those objects to a class in many different ways.

Other Features: Typescript compiles the code into the version of JavaScript which helps the code to run on all browsers. TypeScript also has Intellisense which is really helpful in giving hints for code. It supports encapsulation, abstraction, polymorphism, and other OOP features. Typescript code is more readable, clean, and scalable. Typescript is a strongly typed language that supports prototypes, dynamic types, and constructor functions. Also, it helps in changing the document using API. The module is another amazing feature of Typescript just like namespaces.

Sounds more powerful 😉, right!

4. It's fit with popular javascript frameworks

Another main reason behind the popularity is that Typescript feels amazing when you work with Vue, Angular,NodeJs and React. Many libraries like Redux, Style, Components, React intl, formik is supported by Typescript which makes Typescript the choice for the larger community.

🤞🤞

So you can simply conclude that Typescript’s magic is working all over the world. Go with it and feel the vibe 😉. Many developers think that the only reason why they prefer javascript is that you can not work on React, NodeJS, Angular, and Vue if you are working with Typescript. Relax, Typescript supports all of them so you don’t have to worry about this.

5. Easy to start and Adopt

Yeah, many jobs are now requiring developers to know TypeScript.
But don't be alarmed – if you already know JavaScript, you will be able to pick up TypeScript quickly.

Typescript is just an enhancement of javascript (Javascript and more), it's easy for javascript devs to get used to.

7. Conclusion

That's a few of more reasons to why I think you should learn Typescript if you're using javascript.
If you consider the above points, I beleive it will help you in building a career in development and TypeScript will give an edge to your career according to my exprience and facts.

What's next

Hooray! I'm done
It's your turn. Go on in the comment section and tell us what you think. Have you ever tried typescript, share us your exprience.

Let me know if you would like me to share 5 big tutorials on web that will help you master typescript in few days

Stay tunned,

Let me keep vibing with my typescript here 🤣🤣

6 Big mistakes most beginner software engineers make 🙁 - I wish I knew this when I started programming 😢

TURINUMUGISHA Souvenir — Mon, 08 Aug 2022 13:16:02 +0000

Every master was once a beginner. And every pro began as an amateur. ~ quote by Robin Sharma

As Robin sharma quoted none is a master that was not a beginner. What only differenciate a beginner from a master is the experience gained through all the journey.

Getting started into programming can be thought as something simple as well as you have your PC and access to all the materials needed to get started but the more time you spend into it, the more your eyes get opened and realize all the stupid things you've done and the time you've wasted.

When i started programming I did 6 big mistakes that I wish I had got someone to alert me about them before I got started. I've also seen alot of beginners that I tutored trying to do the same all the times. I lost alot of money and time that I don't wish anyone else to loose.

🙋🙋

In this tutorial, I will be sharing you these 6 mistakes and how you can avoid them if you are just getting started or have started already but have the same bad habits.

1. Trying to learn alot of things at once

When I was getting started, I had what we call FOMO (Fear Of Missing Out) and its something I see in alot of young developers these days where they want to be up-to-date to each latest trend in Software Engineering. By the time,You could find me learning more than 5 languages at once and even jumping to more advance concepts and framworks before I knew the fundamentals

At the end of it all, I knew it was just a wastage of time because how this industry is set, none hires you because you just know alittle of many trending technologies. No, Companies need someone who master a certain language and is probably the best at it.

Please please 🙏 don't rush. Focus on one language and start from fundamental concepts, not just rushing to advanced ones or frameworks. This will not only make you a master at that language but also make it simple for you when you try to learn something else.

2. Jumping into code too quick - Coding without planning

This is the most common mistake of programmers that they write code without thinking and planning.
As a beginner engineer, you have so much excitement to code and nothing else.

If you are the kind that jumping to code is the first idea or solution that comes to your mind when you get a problem to solve, you will end up wasting a lot of your time. Resist the temptation to code and think about alternate ways to challenge your own assumptions first. Yes, some of this comes with experience, but it's good to build the habit early on.

It applies to both small applications and large applications. You require to think and plan in advance before coding and this is a rule. The correct process to write quality code is Research. Plan. Write. Validate. Modify.

3. Googling issue

I categorize googling issue into two things.
The first issue that's much common to absolute beginners is not knowing to search for what they need.They waste their time in solving a problem when they can google it and find a solution to a problem. Google helps you to understand that what you think is a problem is not really a problem and stop fixing it. So Google it first. Being creative sometimes doesn’t mean everything you are doing is correct.

The second issue is using search the bad way. this is that you search for something because you are stuck and need some help. But the moment you find a post that gives you the solution, you just copy-paste it and move on without understanding how they solved it and why you could not. You solved your immediate problem, but you didn't fix the root cause. This is very dangerous because it leads you to become the kind of engineer that solves problems in a very hacky and patched up manner without understanding the actual inner workings of your own solution.

Please use that keyboard wisely 😂😂

Don't be the "stackoverflow dev". It's okay to look for solutions online, but when you find one, make sure to fully understand how it works and to fill gaps in your own knowledge that led you to being stuck in the first place!

4. Preferring quantity to quality

Ambiguous code is waste and it cannot re-create. While programming or coding focus should be kept on the quality of the code. By quality I mean code should be readable and clean. Don't repeat yourself and Don't feal eargered to clear ambiguous code because you think it took you a long time to write. If you don't focus one code quality and just code you can't stand out for sure. Being to working, doesn't mean its optimized. Optimize your code again and again till they reach the best standard

5. Just picking a solution because it's probably the first

This point is connected to the fourth one, While you might think your first searched solution is all inviting and true, good solutions are found after evaluating all possible solutions you find. Coders should be able to find multiple solutions to a problem. If you are unable to do so that means you do not understand the problem. As a programmer you need to find a solution that is simple enough to read, understand and maintain. Instead of rushing towards implementation, think about the potential failures of the solutions and try to find the solutions of a problem in the simplest way.

6. Not reading others' code

This is so common, it's not even for absolute beginners only. I've seen great devs who can code up quick, effective solutions on their own, but completely crumble when they have to contribute to any project that is not their own. The reason is, they are just not used to reading other people's code. Reading other people's code, understanding it quickly and being able to debug through it is a skill on it's own! So start building this early - because you will be doing a lot of this in your job, and reading others' code can sometimes be more challenging than writing your own. The end goal as you progress through your career is to not only be able to read a codebase that multiple devs have worked on, but understand the big picture quickly and identify areas where you can improve.

A great way to build this skill early on is to go to open source projects, read the code there and try to understand what is going on. Even better if you can identify some improvements and put in a pull request to do so!

I just want to keep this article short, Let me conclude

Conclusion

You might be worried that you are making alot of mistakes after reading this article. But don't panic,

It's just a part of the journey. The only bad thing you can do is persisting on not correcting what you've seen as a mistake. Stop worrying about best practices and focus on what you can do best. Invest enough time in research and find good practices that suit well for programming. Do not go looking for best practices on the basis of what others found. Best practices come from own research and practices. Rely on self-searched steps for quality coding. Every content is different from others and every good practice does not necessarily apply to all.

Done 😀

Boom! We are done 😀, its your turn now to share us what you think about the article and any mistake that you might have done that you think others should avoid.

Stay tunned! Bye 🙋

Online/Offline Event Detection and how to keep your users attention on your app even when they are offline using javascript

TURINUMUGISHA Souvenir — Fri, 05 Aug 2022 16:33:00 +0000

Did you know you can keep your website users attention even in case of their disconnectivity! I know you are asking yourself how this is possible.

Don't panic, It doesn't require a phone call to each user :) lol just simple javascript statements and you are done.

To begin with, I think you've ever tried to load Youtube or Twitter when you are not connected. If not, I suggest you to try it before going further.
What have you figure out!

As you might have noticed, These giants still have something to show you that's not so bad in that case.

Let's have a look at the pages they render

Youtube's offline page
Twitter's offline page

Now compare these two pages with the default page that the browser renders to you when you try to access many other websites without internet connectivity

Here is what you get, You probably get this one

Or this one,

Remember, these are the pages that show up even when the user try to navigate to another page though they might have accessed the website before they get disconnected (unless you are using technologies which handle this).

Now guys, let's be honest and compare the youtube's and twitter's reaction to internet disconnectiviy and the default browsers' way. What do you think is user friendly and keeps catching a little part of users' attention towards the site they wanted to access?

Hmmm! Hmmm! I hope we all agree that youtube's and twitter's approach is better. It's a better way to keep users' thoughts towards their products as they (users) are waiting for the internet connection.

Why you not doing the same on your website ? Success doesn't come from very big things, no, even the way you react to small situations shows how you're ready for your audiences and customers. Keep in mind that your success will be defined by the good experience users will have with your product.

In this tutorial, I want to share with you a simple javascript way to detect whether your users are still connected or not and how you can still serve them with a meaningful page.

I know you're like, why are you not starting, you know what! First smile abit and we can move on.

Many developers use AJAX to determine the connection status of the browser (online or offline) by sending a request to the server. However, this is not a good method for determining the state of the browser because it requires bandwidth and can also affect usability.

Yet JavaScript’s Browser Object Model(BOM) provides a direct way to detect browser’s connectivity status i.e. whether the browser is online or offline.

To perform this check, We will be using two possible approches

1. Using .onLine property from navigator object

This first approach targets all possible browsers out there,
This is how it is structured:

navigator.onLine

The navigator object contains information about the browser.
The onLine property returns true if the browser is online, otherwise false.

The good thing about navigator.onLine as I have mentioned is that it is supported in all browsers as shown in this table:

Additionally, the onLine property is read-only.

To test how this approach works out, use these simple html codes:

<!DOCTYPE html>
<html>

<body>

    <p>Click the button to check 
      if the browser is online.</p>

    <button onclick="isOnline()">
      Click Me
  </button>

    <p id="demo"></p>

    <script>
        function isOnline() {

            if (navigator.onLine) {
                document.getElementById(
                  "demo").innerHTML = "Online";
            } else {
                document.getElementById(
                  "demo").innerHTML = "Offline";
            }
        }
    </script>

</body>

</html>

2. Using the ononline and onoffline javascript events

Note: The ononline and onoffline events are only supported in Firefox and Internet Explorer version 8 to 10.

To test these events you can create .html file and use the following codes

<!DOCTYPE html>
<html>
<body>

<p>This example uses the addEventListener() method to attach a "online" and "offline" event to the window object.</p>

<p>Open the File menu and click on "Work Offline" to toggle between working online and offline.</p>

<p><strong>Note:</strong> The ononline and onoffline events are only supported in Firefox and Internet Explorer version 8 to 10.</p>

<script>
window.addEventListener("online", onFunction);
window.addEventListener("offline", offFunction);

function onFunction() {
  alert ("Your browser is working online.");
}

function offFunction() {
  alert ("Your browser is working offline.");
}
</script>

</body>
</html>

Or these,

<!DOCTYPE html>
<html>
<body ononline="onFunction()" onoffline="offFunction()">

<p>Open the File menu and click on "Work Offline" to toggle between working online and offline.</p>

<p><strong>Note:</strong> The ononline and onoffline events are only supported in Firefox and Internet Explorer version 8 to 10.</p>

<script>
function onFunction() {
  alert ("Your browser is working online.");
}

function offFunction() {
  alert ("Your browser is working offline.");
}
</script>

</body>
</html>

Well that's it, you can see that by now you are able to know whether someone is connected or not.

Coming back to youtube's or twitter's way, you have seen that they render well designed pages

How do they do it ?

This is how it goes,
When user visits the site, the visited page and media (audio/video/images) are saved/cached by the browser. There is need to specify which files to save/cache. So, if the file/page exist in browser’s cache then browser shows it. This works whether user is offline or online. Generally the cached files hold mostly static content and basic JavaScript files.

When a page is requested, if there is a living cached copy of the page then browser shows it. The JavaScript linked with the page then checks whether the internet connection is active or not. If it isn’t active then cached page is shown with the message of “No internet”.

That's it, the secret is checking whether user is online or offline (probably using any of the methods shown above) and rendering the static page that they had cached.

Stay tunned

To keep this article short I will not go into details of how to cache pages and more, I will release a different article diving into that very soon!

Conclusion

Keeping attention of your users on you in any case is one of the best practices. In this article we've seen how we can detect whether a user is online or offline and decide what to do after that.

Let me hope this tutorial helped out!

Hooray! It's your turn now

This is the end,
I Would love to know what you think in the comment section!

Stay tunned for many other interesting content.

The most awesome trick for tables' mobile responsiveness you will ever need - using html and css only

TURINUMUGISHA Souvenir — Thu, 04 Aug 2022 22:24:00 +0000

Responsive design is all about adjusting designs to accommodate screens of different sizes.Tables are one of the most used components on the UI to represent and organize data but setting their responsiveness in mobile have never been an easy task.

The most common practice of setting tables' responsivenes in mobile that's almost everywhere on the web is styling the table's container div with

overflow-x:auto;

Just like this,

<div style="overflow-x:auto;">
  <table>
    ..table headers and rows
  </table>
</div>

With the above code, when you are on devices with small width like mobile the data is shown but you need to scroll in x-direction which in my opinion is not user friendly thought it's a step forward.

This made triggered me to search for a more convinient way of making tables responsive on small devices which is even more user friendly.

Who can't like that!

In this tutorial, I want to share you a very simple CSS trick that I came accross that will make each table responsive regardless of how large the table might be.

Remember this is possible using HTML and CSS only.Sounds, interesting ? I know yes!

Without further ado,

What we are going to do is using “responsive design” principles (CSS @media queries) to detect if the screen is smaller than the maximum squishitude of our table. If that's the situation, we’re going to reformat the table but don't worry nothing is tuff.

Let's use this simple table

<table>
  <caption>Statement Summary</caption>
  <thead>
    <tr>
      <th scope="col">Account</th>
      <th scope="col">Due Date</th>
      <th scope="col">Amount</th>
      <th scope="col">Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Account">Visa - 3412</td>
      <td data-label="Due Date">04/01/2016</td>
      <td data-label="Amount">$1,190</td>
      <td data-label="Period">03/01/2016 - 03/31/2016</td>
    </tr>
    <tr>
      <td scope="row" data-label="Account">Visa - 6076</td>
      <td data-label="Due Date">03/01/2016</td>
      <td data-label="Amount">$2,443</td>
      <td data-label="Period">02/01/2016 - 02/29/2016</td>
    </tr>
    <tr>
      <td scope="row" data-label="Account">Corporate AMEX</td>
      <td data-label="Due Date">03/01/2016</td>
      <td data-label="Amount">$1,181</td>
      <td data-label="Period">02/01/2016 - 02/29/2016</td>
    </tr>
    <tr>
      <td scope="row" data-label="Acount">Visa - 3412</td>
      <td data-label="Due Date">02/01/2016</td>
      <td data-label="Amount">$842</td>
      <td data-label="Period">01/01/2016 - 01/31/2016</td>
    </tr>
  </tbody>
</table>

That's all with HTML

let's add some styles to make it even better

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

The above table looks like this

On desktop

Everthing is fine in desktop and none can't be happy with that i guess.

On mobile

I hope you can see how the content is more streched before we use our trick.Surely, It's look can't put a smile on your face.

As you've seen from the above results, the above code just gives us a normal table but I want you to be carefull here, Have you noticed data-label attribute that I have added on each <td> in our HTML? What do you realize about it's content?

As you might have noticed, each td's data-label attribute has content equivalent to the table header that that <td> follows under.

Don't be confused nothing is strange there,
Just wait abit and see how it's going to be usefull to us.

For the css, we gonna add few other codes to make our table look better on small devices too. Kepp focused to know what's going on in mobile. Anything else was just normal

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }

  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }

 /*Here we are setting each td display to block*/
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }

/*
Now the other data-label we have added on each td comes into play.
*/

  table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

  table td:last-child {
    border-bottom: 0;
  }
}

Let see what this adds to the beauty of our table.

You know what,smile, we've done it.

To wrap it all,this tutorial was about a very awesome trick to make tables look better even on small devices regarderless of how large the table might be. I hope it was not so tough for you

Note: If you want to play with the codes visit this link which will take you to the codepen

What's next

It's your turn to share us what you thing about this article and share any other trick that you think it's worth our attention in the comment section.

Thanks for being a part of this till the end. Boom! You buddies never dispoint (: