How to debug and design your code more effectively

Running into bugs in your software can easily demotivate you on any project your working on. Simple bugs that take the course of hours which could've been solved in 15 minutes plague your mind and bothers you for days. But how can you effectively debug if you don't know what you're actively looking for? After all hindsight is 20/20.

To better show how we can do this, It would be beneficial to walk through an example (in JavaScript) but you can apply the concepts to any code you have no matter the language.

The Problem:

So what I have here is a local post from when I was developing my site's theme. In one of the test post that is automatically provided, their is a code block but as you can see, it is rather long. The code block extends past the margins compared to the rest of the article and there isn't an actual way to scroll sideways to view the rest of the code and it's generally just aesthetically unpleasing. But what can we actually do?

Possible Solutions

When thinking of a solution, it's important the prettiest solution may not be the most feasible one. But you also don't want the solution which is prone to break easily or is just scraped together hastily, so it's best to create a cost/benefit analysis of all your possible outcomes. As a side note, this doesn't necessarily have to be something you write down but it does make it easier to visualize and organize all the different scenarios. Here's what I've came up with:

Scrollable code block

A scrollable code block does offer a nice and easy solution towards the text overflow of the code block and is rather simple to implement with Prism.js. On the other hand it does sometimes require you to scroll quite often for longer blocks which can slow down the process of understanding code and can turn some people off. This would probably be a smaller edge-case and something most people wouldn't worry about but it never really hurts to consider all scenarios.

Code realignment

Let's say you're looking for something other than implementing a code block. You could simply decide once the code gets past a certain point, to just start a new line. This could be less hassle than adding the code blocks in terms of total lines of code, but at what cost? Formatting the code in this way could impede the readability and make the information presented a lot harder to process. Doing this is a sort of "brute force" solution.

Making the whole website scrollable

Another idea we could apply, is simply making the whole site scrollable. A simple

overflow-x: scroll;

is all we would need to accomplish this. But again, at what cost? Doing this would probably decrease the overall aesthetic of the website and make the site less enjoyable for mobile users to use in terms of accidental scrolls. Personally, I've never been a fan of website that scroll horizontally, unless it was an absolute necessity.

Implementation

After you weigh all your possible outcomes and view the pros and cons of each choice along with time and other constraints you can choose. In this case it would be pretty obvious to go with the code block but things won't be that clear cut all the time. You may not have time to implement the best option or all your options may all be equally bad. Making the best choice in each situation is something that comes with times and practice but doing this on smaller scales can be a great way to start.

As stated earlier, I have elected to use Prism.js, a lightweight syntax highlighter. It was as simple as downloading the theme style and custom options I wanted:

Pasting the downloads into the project directory/creating the necessary link rel and waalaa:

{
    "@context": "https://schema.org",
    "@type": "Article",
    "publisher": {
        "@type": "Organization",
        "name": "Publishing options",
        "logo": "https://static.ghost.org/ghost-logo.svg"
    },
    "author": {
        "@type": "Person",
        "name": "Ghost",
        "url": "http://demo.ghost.io/author/ghost/",
        "sameAs": []
    },
    "headline": "Publishing options",
    "url": "http://demo.ghost.io/publishing-options",
    "datePublished": "2018-08-08T11:44:00.000Z",
    "dateModified": "2018-08-09T12:06:21.000Z",
    "keywords": "Getting Started",
    "description": "The Ghost editor has everything you need to fully optimise your content. This is where you can add tags and authors, feature a post, or turn a post into a page.",
    }
}

A beautiful code block with syntax highlighting. Here's the link for the ghost theme if you also have a Ghost blog you would like to use it on.

Summary

Debugging and designing your code is often a long and iterative process. One thing about software development, there really isn't a wrong answer as long as the final product works. Going through trade-offs and outlooks of potential solutions can still reduce future stress and makes your code easier for other people to read. Overall, just like coding in general, this will be a skill you gain over time and as you get better. If you're looking for help or just an extra set of eyes on your code, StreamIntra may be a good place to look for someone to pair up with. Thank you for reading.