Helder Esteves • Full Stack Engineering

👋 Hey there! Welcome to my extremely fancy blog where I dive into the fascinating world of software development. I’m thrilled you’ve stopped by! 🎉

  • I’m a problem solver at heart 💖 and nothing excites me more than untangling complex issues and finding sleek, smart solutions. This blog is my playground for all things software—beyond just coding!
  • From streamlining processes to exploring new tools and sharing insights, I aim to cover it all.
  • Stay tuned, and let’s make magic happen! ✨
Photo by Jukan Tateisi on Unsplash

How to Plan a Big App from Scratch as a Sideproject

Understanding the Core Problem and Scope Before diving into development, understand the problem you’re trying to solve. Articulate this clearly to avoid feature creep and stay focused. Define the Problem Statement A well-defined problem statement guides your entire project. Consider these questions: What specific issue does the app address? Who are the primary users? What value does it bring to users? Document the problem statement and revisit it periodically to ensure you’re on track....

May 15, 2024 · 6 min · Helder Esteves
Photo by Daniela Cuevas on Unsplash

Next.JS 14 Tips You Need to Know in 2024

Tip 1: Leverage Middleware for Authenticated SSR Routes Next.js 14 enhances middleware capabilities, allowing developers to handle authentication more efficiently at the server side. Instead of traditional methods of guarding routes, use middleware to intercept requests and validate authentication tokens before rendering. This reduces unnecessary client-side checks and streamlines the SSR process. Use Case: Secure an admin dashboard route to render server-side based on user roles. 1 2 3 4 5 6 7 8 9 10 11 12 // middleware....

May 8, 2024 · 5 min · Helder Esteves
Photo by DrawKit Illustrations on Unsplash

How to Learn Web3.JS in Under 10 Minutes

Understanding Web3.JS: Basics and Setup Web3.JS is essentially a JavaScript library that allows you to interact with a local or remote Ethereum node using HTTP, IPC, or WebSocket. It’s a bridge connecting the worlds of conventional JavaScript web technologies and the revolutionary realm of Ethereum blockchain. Getting Started with Web3.JS To kick things off, you’ll need to have Node.js installed on your computer. Once that’s set up, installing Web3.JS is as simple as running the npm command:...

May 1, 2024 · 9 min · Helder Esteves
Photo by Tim Chow on Unsplash

15 Advanced JavaScript Tips for Clean and Efficient Code

1. Utilize Tagged Template Literals for Cleaner HTML/SVG Generation Use Case: Dynamically generate HTML or SVG content. Benefits: Improves readability and maintainability. Example: 1 2 3 4 5 6 7 const item = 'cup'; const quantity = 3; const htmlContent = html`<div>You ordered ${quantity} ${item}s.</div>`; function html(strings, ...values) { return strings.reduce((acc, str, i) => `${acc}${str}${values[i] || ''}`, ''); } 2. Adopt Object.observe for Reactive Programming Use Case: Implement data-binding for web components without external libraries....

April 23, 2024 · 4 min · Helder Esteves
Photo by Danist Soh on Unsplash

Understanding the Basics of React Architecture

Frontend architecture has evolved significantly with the introduction of modern frameworks and tools. At its core, a clean and scalable architecture enables your team to manage increasingly complex systems and growing user demands with ease. Here are some fundamental strategies to keep in mind: Modularity: Break down the application into smaller, reusable, and replaceable modules. Consistency: Adopt a consistent coding style and use shared components and design patterns. Scalability: Design with future expansion in mind....

April 22, 2024 · 4 min · Helder Esteves
Photo by C Dustin on Unsplash

Refactoring Code: Essential Techniques for Clean Software

Refactoring code is akin to tidying up a well-lived-in house; it’s all about making your code cleaner, faster, and more efficient without changing its external behavior. In the bustling world of software development, it’s the behind-the-scenes magic that keeps the codebase healthy and maintainable. Why bother? Because in the long run, it saves time, reduces bugs, and makes your codebase more adaptable to new features. Think of it as investing in the future of your software....

April 14, 2024 · 7 min · Helder Esteves
Photo by Kenny Eliason on Unsplash

Top 7 TypeScript Mistakes You Need to Avoid

TypeScript is a popular programming language that has gained immense popularity among developers due to its ability to enforce strong typing and detect errors at compile time. However, like any programming language, TypeScript has its quirks and nuances that can cause headaches for even the most experienced developers. In this article, we will take a look at some of the top TypeScript mistakes that you need to avoid, with code snippets for each mistake....

April 26, 2023 · 6 min · Helder Esteves
Photo by Ferenc Almasi on Unsplash

JavaScript VSCode Extensions You Never Heard About

JavaScript is an ever-evolving programming language that has become a fundamental part of web development. With the increasing demand for faster development and greater efficiency, the role of the right tools in the development process has become more critical than ever. This article will focus on some of the lesser-known JavaScript VSCode extensions that can enhance your development experience. Note: Along with these, you should check out the extensions in the featured image above as well :)...

April 25, 2023 · 3 min · Helder Esteves
Photo by Andrew Ridley on Unsplash

5 JS Design Patterns Every Developer Should Know

Design patterns are reusable solutions to common programming problems. They help developers write code that is more modular, maintainable, and efficient. Do you know all of these 5? 1. Singleton Pattern This pattern ensures that there is only one instance of a class and provides a global point of access to that instance. For example, a database connection object can be created as a Singleton to ensure that only one connection is made to the database throughout the entire application....

March 6, 2023 · 7 min · Helder Esteves
Photo by Peter Olexa on Unsplash

React useEffect: 4 Tips Every Developer Should Know

Let’s talk about useEffects in React Hooks! I’m going to share with you 4 tips you should have in mind when using useEffect. Use a useEffect for a single purpose In React Hooks, you can have multiple useEffect functions. This is a great feature because, if we analyze how to write clean code, you’ll see that functions should serve a single purpose (much like how a sentence should communicate one idea only)....

August 9, 2020 · 6 min · Helder Esteves