DEV Community: Alan Mac Cormack

The Art of Debugging in Software Development: A Comprehensive Guide

Alan Mac Cormack — Thu, 25 May 2023 20:47:53 +0000

Introduction

Software development is a fascinating journey, filled with learning opportunities at every corner. One of the most valuable skills in this field is not writing code - it's debugging it. Debugging involves identifying, diagnosing, and correcting errors in code, and mastering this art is crucial for any software developer.

The Importance of Debugging in Software Development

In the world of software development, bugs are inevitable. They are part of the process, and learning to effectively manage them can dramatically enhance your productivity. Efficient debugging can lead to more stable software, improved user experience, and ultimately, a successful product.

Debugging Techniques in Software Development

1. Breakpoint Debugging

Breakpoint debugging is a powerful technique in which the execution of a program is halted at specific lines of code, allowing you to inspect the current state of the program at that moment. Breakpoints can be placed at any line of code where you want the execution to pause. Once the program reaches a breakpoint, you can examine the values of variables, the state of the memory, and the call stack. This technique is most useful when you have a general idea of where the issue might be, but need more information to pinpoint the bug.

Tools that can assist with breakpoint debugging include integrated development environments (IDEs) like IntelliJ, Eclipse, and Visual Studio Code, as well as debugging tools built into many web browsers.

2. Print Debugging

Print debugging, or "printf debugging," involves strategically inserting print statements into your code to display variable values, program states, or messages indicating that a certain point in the code has been reached. This is an especially useful technique when dealing with large and complex codebases, or in environments where other debugging tools might not be available.

Despite its simplicity, print debugging can be incredibly effective. By observing the output of your print statements, you can trace the execution flow of your program and identify where things go awry. Be aware, however, that excessive print statements can clutter your output and make it harder to find the information you need. It's important to remove or comment out these print statements once they've served their purpose.

3. Rubber Duck Debugging

Rubber duck debugging is a unique technique where you explain your code, line by line, to an inanimate object such as a rubber duck. This method can be particularly effective when you've been staring at a piece of code for too long and can't see why it's not working as expected.

The act of explaining your code aloud forces you to slow down and meticulously examine each line. Often, this results in a new perspective that allows you to spot errors you might have missed otherwise. You might feel a little silly talking to a rubber duck (or any other inanimate object), but you'd be surprised at how often it leads to a solution.

Tools to Aid Debugging

While the techniques are essential, having the right tools can significantly aid the debugging process. Tools like Chrome DevTools, Firebug, Postman, JUnit, Jest, and others, depending on your development environment, can streamline debugging and make it less time-consuming.

Cultivating a Debugging Mindset

Debugging is not just about the tools and techniques - it's about the mindset. A good debugger is patient, observant, and persistent. Cultivating a systematic approach, being attentive to details, and developing a deep understanding of your codebase will make you a more effective debugger.

Conclusion

Mastering the art of debugging is an essential skill for any software developer. It reduces the time spent on errors, leads to more stable software, and ultimately, more satisfied users. Remember, every bug is an opportunity to learn and improve. Happy debugging!

What is a Callback in Javascript?

Alan Mac Cormack — Thu, 11 Jun 2020 18:37:14 +0000

Callbacks are usually an interview question and a must to understand if you want to be a web developer.

What is a callback?

In Javascript, functions are objects and that's the reason functions can take other functions as arguments and can also be returned by other functions.

The functions that take or return functions are called Higher-Order functions and the passed or returned ones are called Callback functions.

As an analogy we can say: A callback function is telling some other code to do some work, which will take some time. We don't get an answer immediately, so we say "when you've finished doing X, call function Y with the result".

How do we use callbacks?

function callback(message) { 
    alert(message); 
}

function higherOrderFunction(message, callback) {
    callback(message);      
}

higherOrderFunction('This is a callback test', callback);

Here, the callback function takes in an argument and shows an alert with the message as it's argument while higherOrderFunction takes in an argument and a callback function which will be executed with message as it argument.

Let's see some examples with different kind of functions.

Anonymous function:

This code will do exactly the same as our example above.


function higherOrderFunction(message, callbackFn) {
    callbackFn(message);        
}

higherOrderFunction("This is a message", function() {
    alert("message");
});

In this case the argument callbackFn that we pass can have any name you want since it's an anonymous function (has no name) that we are passing as argument to higherOrderFunction.

Arrow function:

function higherOrderFunction(message, callbackFn) {
    callbackFn(message);        
}

higherOrderFunction("This is a message", () => {
    alert("message");
});

What about DOM events?

Let's say we want to add an event listener to this button so when we click it, it shows an alert with a message:

<button id="show-message">Click here</button>

In our JS script we will use the addEventListener method passing to it 2 parameters, the type ("click") and the callback function will which show the alert message:

document.querySelector('#show-message')
    .addEventListener('click', function() {
        alert('This is a test message');
});

Why use Callback functions?

We mostly create apps that are synchronous. Basically, some of our operations will only start after the preceding one is completed.
In the real world we often request data from different sources as and external API and we don't know when the data will be delivered. We want to wait for the response, but we do not want our application stuck meanwhile.
In these situations is when callback functions are extremely handy.

You can find more info about callbacks in here

How to install and setup Vuetify 2 - Laravel 6

Alan Mac Cormack — Sun, 24 Nov 2019 13:30:26 +0000

Vuetify is a component library based on the Material Design standard, widely accepted by the dev community since it wraps the desktop and mobile universes with responsiveness, flexibility, and extensibility.
For more information see: https://bit.ly/2OdsYwK

In this post, I will show you how to install and configure it to create a nice layout for your next app.

First of all, we create a new Laravel project:

laravel new vuetify-test

Go to the app directory and install Vuetify with npm:

cd vuetify-test
npm install vuetify

Add the Vue scaffolding with php artisan:

php artisan preset vue

Install dependencies:

npm install

Go to welcome.blade.php and add/delete what you need or copy the following to make your file to look like this:

// /resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel Vuetify</title>
    </head>
    <body>
        <div id="app">

        </div>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

Create an index.js file in a vuetify directory with the following content:

// /resources/js/vuetify/index.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

Create a simple component App.vue:

// /resources/js/App.vue

<template>
  <v-app>
    <v-alert type="warning" :value="true">
      Vuetify was installed properly
    </v-alert>
  </v-app>
</template>

<script>
export default {
  name: "App"
};
</script>

And finally change your app.js file to the following:

// /resources/js/app.js

window.Vue = require('vue');

import vuetify from './vuetify'

import App from './App'

const app = new Vue({
    vuetify,
    render: h => h(App),
    el: '#app',
});

Watch for file changes and serve the app

npm run watch
php artisan serve

Go to the server URL and you should see an alert showing that Vuetify it's installed and ready to use!

How to implement a robots.txt file in a Nuxt project — Nuxt 2.10

Alan Mac Cormack — Sat, 23 Nov 2019 20:36:34 +0000

A robots.txt file helps us to control the way in which Google and other search engines explore and index our content.

The first thing that a robot does when gets to your site it’s to check if a robots.txt file exists and if yes, they examine it to understand how to crawl it.

It’s just a simple public text file in which we can tell the crawlers to which parts of our site should or shouldn’t be crawled and indexed by allowing and disallowing pages.

@nuxtjs/robots it’s a Nuxt module that injects a middleware to automatically generate a robots.txt file.

Requirements:

Nuxt
npm or yarn
Node

To begin with, we’ll install the module:

npm i nuxt-robots-module

Once it finishes, we are ready to go.

We’ll add it to our nuxt.config.js file in the modules array and give some options to it. As an example, I’ll use top-level options disallowing only the /user URL for all user-agents:

export default {
  modules: [
    '@nuxtjs/robots'
  ],
  robots: {
    UserAgent: '*',
    Disallow: '/user',
  }
}

But what if we want to disallow different URLs for different user-agents?
We can transform our options object into an array and add as many user-agents and urls as we want:

export default {
  modules: [
    '@nuxtjs/robots'
  ],
  robots: [
    {
      UserAgent: 'Googlebot',
      Disallow: '/user',
    },
    {
      UserAgent: '*',
      Disallow: '/admin',
    },
  ]
}

Now let’s say that we don’t want DuckDuckBot user agent to crawl any URL that we could have after /admin.

We can achieve by adding a /* to the URL like this:

export default {
  modules: [
    '@nuxtjs/robots'
  ],
  robots: [
    {
      UserAgent: 'Googlebot',
      Disallow: '/user',
    },
    {
      UserAgent: '*',
      Disallow: '/admin',
    },

  ]
}

And finally, to disallow several URLs for the same user-agent we'll do it by passing an array to the Disallow property.
The final code will look like the following:

export default {
  modules: [
    '@nuxtjs/robots'
  ],
  robots: [
    {
      UserAgent: 'Googlebot',
      Disallow: ['/user', '/admin'],
    },
    {
      UserAgent: '*',
      Disallow: '/admin',
    },

  ]
}

That’s all! You can build your application and check the file in /robots.txt URL.

How to hide data in transformers — Laravel 5.8

Alan Mac Cormack — Sat, 23 Nov 2019 15:26:23 +0000

Let's say that we have a user table with some basic data such as id, name, and avatar. But also, we have private data like phone, address, and e-mail which we may not want to return if the request is not being made by the user itself.

We could have a transform function in our UserTransformer as follows:

public function transform(User $user)
{   
    return [
         'id' => $user->id,
         'name' => $user->name,
         'avatar' => $user->avatar,
         'email' => $user->email,     
         'phone' => $user->phone,     
         'address' => $user->address,      
    ];
}

In this case, we are returning all the data no matter who is requesting it.

This means that each time that we call the UserTransformer it will return both, the public and the private data without checking if the user is authorized or not to see it.

Therefore, if we want to show this data based on a condition like the mentioned above, we have to make some changes in our code.

In this case, we will use the Auth facade in order to check who is the user that is making the request as follows:

Import it in our UserTransformer

use Illuminate\Support\Facades\Auth;

Call it and store the id (unique identifier in this case) of the user in a variable

$user_id = Auth::user()→id;

So we know how to get the information (id) of the user that is making the request we'll need to check if the record is his own or not.

To do this by we'll compare the ids and merging the data if they're equal.

Applying a little refactor to our code:

public function transform(User $user)
{   
    $data = [ 
        'id' => $user->id,
        'name' => $user->name,
        'avatar' => $user->avatar,
        'email' => $user->email,
        'phone' => $user->phone,
        'address' => $user->address,
    ];
    return $data;
}

Now we have to split the data into private and non-private:

public function transform(User $user)
    $data = [
        'id' => $user->id,
        'name' => $user->name,
        'avatar' => $user->avatar,
    ];
    $private_data = [
        'email' => $user->email,
        'phone' => $user->phone,
        'address' => $user->address,
   ]; 
    return $data;
}

Finally, we will add an if statement checking the ownership of the record and merge the data:

public function transform()
{
    $data = [ 
         'id' => $user->id,
         'name' => $user->name,
         'avatar' => $user->avatar,
    ]; 
    $private_data = [
        'email' => $user->email,            
        'phone' => $user->phone,            
        'address' => $user->address        
    ]; 

    if($user_id == $user->id)
    { 
      $data = array_merge($data, $private_data);    
    } 

    return $data;
}

And it's done! We're showing the private data only to the user that owns it.

We could go further and clean our code we could also extract the last part of it and move it to a static function in the User model:

public static function getPrivateData($user)
{
    $private_data = [
         'email' => $user->email,
         'phone' => $user->phone,
         'address' => $user->address,
    ];
    return $private_data;
}

And refactor our if statement like this:

if (Auth::user()->id === $user->id) {
    $data =           
        array_merge(
            $data, User::getPrivateData($user)
        );
}

A nice piece of code to hide data that we don't want to show to specific users.

We could also check if the user is an admin but I'll be covering this topic in the future :)