DEV Community: Husnul Aman

Error Handling in Golang vs JavaScript - My Thoughts

Husnul Aman — Sun, 19 Jan 2025 09:02:34 +0000

Golang is one of the most loved programming languages and is relatively easy to learn. However, its error-handling pattern has sparked significant debate among developers. Unlike many other languages, Go does not throw errors and let the caller or other functions in the call stack deal with them. Instead, errors in Go are treated as actual values and are returned from functions alongside their primary return value. This means you have to handle errors immediately when calling the functions.

Here’s a typical example of error handling in Go:

package main

import (
    "errors"
    "fmt"
)

func divide(a, b int) (int, error) {
    if b == 0 {
        return 0, errors.New("cannot divide by zero")
    }
    return a / b, nil
}

func main() {
    result, err := divide(10, 0)
    if err != nil {
        fmt.Println("Error:", err)
        return
    }
    fmt.Println("Result:", result)
}

The simplicity of Go's error handling lies in its explicit nature: you must handle the error right away. This ensures no error is accidentally ignored.

Error Handling in JavaScript

In contrast, JavaScript typically handles errors using try-catch. Errors can be thrown and propagated up the call stack, which can be caught later or handled by a global error handler. For example:

function divide(a, b) {
  if (b === 0) {
    throw new Error("Cannot divide by zero");
  }
  return a / b;
}

try {
  const result = divide(10, 0);
  console.log("Result:", result);
} catch (err) {
  console.error("Error:", err.message);
}

This works well, but it has some drawbacks:

You need to remember to wrap risky operations in try-catch.
Passing stack traces and context can be tricky without additional tooling.

Adopting Golang's Pattern in JavaScript

Interestingly, many JavaScript developers have started using Golang’s error-handling style by returning [error, value] tuples. Here's how this looks:

function divide(a, b) {
  if (b === 0) {
    return [new Error("Cannot divide by zero"), null];
  }
  return [null, a / b];
}

const [err, result] = divide(10, 0);
if (err) {
  console.error("Error:", err.message);
} else {
  console.log("Result:", result);
}

This approach ensures errors are always handled immediately, just like in Go.

Handling Asynchronous Code

In JavaScript, asynchronous code adds complexity. A Promise-based function might look like this:

async function fetchData() {
  throw new Error("Failed to fetch data");
}

try {
  const data = await fetchData();
  console.log("Data:", data);
} catch (err) {
  console.error("Error:", err.message);
}

If you want to adopt the [error, value] pattern for async functions, you can use a utility function:

const to = (promise) => promise.then(data => [null, data]).catch(err => [err]);

(async () => {
  const [err, data] = await to(fetchData());
  if (err) {
    console.error("Error:", err.message);
    return;
  }
  console.log("Data:", data);
})();

This keeps the error-handling logic consistent, but as the complexity of async operations grows, the try-catch approach may feel cleaner.

My Take

For me, the [error, value] pattern works well for pure and simple utility functions, where it ensures I always handle errors. For example:

function parseJSON(jsonStr) {
  try {
    return [null, JSON.parse(jsonStr)];
  } catch (err) {
    return [err, null];
  }
}

const [err, obj] = parseJSON('invalid json');
if (err) {
  console.error("Failed to parse JSON:", err.message);
} else {
  console.log("Parsed object:", obj);
}

However, for asynchronous and more complex functions, I still lean toward try-catch and global error handling to avoid cluttering the codebase with repetitive error checks.

Striking a Balance

To balance both approaches, I use Golang's style for synchronous utility functions and stick to try-catch for complex or async logic. Additionally, I leverage global error handlers for critical errors, ensuring they’re logged and tracked without overwhelming my code.

Ultimately, error handling is about consistency and what fits best for your team and project. For now, I’ll keep experimenting with these patterns and refine my approach as I go.

14 Days with Cursor: My Experience with an AI-Powered Code

Husnul Aman — Sun, 19 Jan 2025 09:01:18 +0000

Recently, I had the opportunity to try out Cursor, an AI-powered code editor, during its 14-day free trial period. As someone who loves exploring new tools that enhance productivity and streamline workflows, I was excited to dive in and see what Cursor had to offer. Here’s a breakdown of my thoughts after using it consistently for two weeks.

Pros

1. Smooth transition from VS Code

Cursor is based on Visual Studio Code (VS Code), which made transitioning to it a breeze. Its interface and functionality are very similar to VS Code, so there was almost no learning curve. However, Cursor did override a couple of my favorite keymaps, which required some adjustment. Aside from that, it felt just like using VS Code with supercharged features.

2. Ability to switch between different LLMs

One standout feature of Cursor is its flexibility in allowing users to switch between different large language models (LLMs). This gave me the freedom to choose the best model for specific tasks, whether it was generating code, debugging, or creating documentation.

3. Productivity booster

Using Cursor significantly boosted my productivity. The AI’s ability to generate boilerplate code, suggest improvements, and automate repetitive tasks allowed me to focus on more complex and creative aspects of development.

4. Confidence booster

There’s something reassuring about having an AI partner that can validate your ideas and solutions. Cursor provided real-time feedback, which gave me the confidence to tackle challenging problems with greater assurance.

5. Effortless test case and documentation generation

Cursor excelled at generating test cases and documentation. These are tasks that often feel tedious but are crucial for maintaining code quality and readability. With Cursor, these tasks were completed in seconds, saving me valuable time.

6. Problem-solving powerhouse

One of the most impressive aspects of Cursor was its ability to help solve difficult problems. Tasks that would have taken me hours to figure out on my own were resolved in minutes with its assistance. This feature alone made the experience incredibly valuable.

7. A great learning tool

Cursor didn’t just help me complete tasks; it also served as an excellent learning resource. By analyzing its suggestions and reasoning, I was able to deepen my understanding of various coding concepts and best practices.

Cons

1. Pricey for my taste

While Cursor’s features are impressive, its pricing is a bit steep for my budget. It’s a tool I’d love to use long-term, but the cost might be prohibitive for individual developers or those working on a tight budget.

2. Overly helpful at times

There were moments when Cursor’s assistance felt intrusive. Its eagerness to help sometimes disrupted my coding flow, especially when I just wanted to think through a problem on my own.

3. Dependence on AI

One concern I have is the potential for over-reliance on AI. Using Cursor made certain tasks so effortless that I worried about losing the ability to tackle these challenges independently in the long run.

4. File editing concerns

The ability of Cursor to edit, create, and delete files autonomously is both a strength and a potential risk. While this functionality is convenient, it also felt a bit unsettling to grant such control to an AI tool.

Final thoughts

Overall, my 14 days with Cursor were enlightening. The tool has tremendous potential to revolutionize how developers write and manage code. Its ability to boost productivity, provide learning opportunities, and solve complex problems makes it an invaluable asset for any programmer.

That said, the pricing and potential downsides, such as over-reliance and concerns about file management, give me pause. For now, I’ll weigh the pros and cons carefully before deciding whether to invest in a subscription.

If you’re curious about Cursor, I recommend giving the free trial a shot. You might find that it’s exactly what you’ve been looking for to elevate your coding game.

Create a Glowing Button Animation with CSS

Husnul Aman — Tue, 27 Sep 2022 16:58:24 +0000

In this tutorial, we will learn how to create a beautiful glowing button using pure CSS.

Here is what we will build:

Markup

Let’s start with the HTML markup for our button.

<body>
  <button class="button">Hover Me</button>
</body>

Simple enough. We have a button with the class button. We will perform the rest of the magic using CSS.

Styling

This step is completely optional. But we will add a minimum height of 100vh to the body element and center the content on the screen vertically and horizontally using CSS grid so that we can better see our button.

body {
  height: 100vh;
  background: #000;
  display: grid;
  place-items: center;
}

Next, we will start styling our button.

Nothing fancy here, we have added some basic styles to our button. We have made the border-radius: 50px; so that button corners will be rounded. Also, we have added position: relative; so that we can position the button glow effect absolutely to the button.

.button {
  position: relative;
  height: 60px;
  width: 200px;
  margin: 0 35px;
  border-radius: 50px;
  border: none;
  outline: none;
  background: #000;
  color: #fff;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}

We will use the :before pseudo-element on the button to add a glowing effect to our button. Therefore, we will position it absolutely to the button. we will also add -5px on each side so that the glow effect will be 5px outside of the button on each side.

The most important things to note here are, we have added filter: blur(20px); to give the glow a blur effect of 20px, and we have given opacity: 0; so that the glow effect will be hidden by default. Also, we have added transition: opacity 0.5s; to make the glow effect appear and disappear smoothly.

background: inherit; is used to inherit the gradient background color from the button when being hovered.

.button:before {
  content: '';
  position: absolute;
  background: inherit;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50px;
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
}

Now for the fun part, we will add styles to the button when the user hovers over it using the :hover pseudo-selector.

Here, we have added a linear gradient as the button background with 4 different colors with a direction of 90deg. We have made the background-size: 400%; so that each gradient color will take up 100% width of the button background when the animation is in progress. We have also added a z-index: 1; so that the button text will be on top of the glow effect. Lastly, we have added animation: glow 8s linear infinite; to give the button an infinite glowing effect when hovered. We will define the animation glow in the next step.

Just like that, we have also added opacity: 1; and z-index: -1; to the :before pseudo-element of the button when the button is being hovered. This will make the glow visible and make the button text on top of the glow when the button is being hovered.

.button:hover {
  background: linear-gradient(90deg, #03a9fa, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite;
}
.button:hover:before {
  opacity: 1;
  z-index: -1;
}

Finally, we will add the glow keyframes animation.

Here, we made the background-position: 0%; at 0% of the animation and background-position: 400%; at 100% to gradually change the background-position of the button. This combined with the 8s duration of the animation we defined in the previous step will make the button background-position change smoothly and make each gradient color appear and disappear from the side.

@keyframes glow {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 400%;
  }
}

That’s it, in a few simple steps, we have created a glowing button. You can play around with the colors, background-size, and duration of the animation to achieve a different result.

You can find the source code for this tutorial on Codepen.