Forem: Nguyen Xuan hoa

Find hidden remote jobs with this Google search trick

Nguyen Xuan hoa — Wed, 07 May 2025 15:43:16 +0000

Hey remote job hunters!

Did you know many amazing remote job openings never make it to big platforms like LinkedIn or Indeed? Instead, they’re tucked away on company job boards powered by Applicant Tracking Systems (ATS). Today, I’m sharing a simple trick to uncover these hidden opportunities using Google search operators plus a tool to make it even easier.

The Trick: Google Search + ATS Job Boards

Companies use ATS platforms to manage their job listings, and these platforms often have predictable URL patterns. By combining Google’s "site:" operator with keywords like "remote", you can find these jobs directly. Here’s how:

Greenhouse: site:boards.greenhouse.io "remote"
Lever: site:jobs.lever.co "remote"
Workday: site:wd5.myworkdayjobs.com "remote"

...and so many other ATS platforms.

Want something specific? Add a job title, like:

site:boards.greenhouse.io "remote" "software engineer"

You can also use the Google search tool to filter the latest job postings

This works for tons of ATS platforms (Jobvite, iCIMS, Taleo, etc.) and beats scrolling through crowded job boards.

Level Up with FlexHired

Now, searching each ATS manually can take time, especially if you’re targeting multiple platforms or roles. That’s why I built FlexHired. It’s a remote job aggregator where I’ve hand curated a list of companies hiring remotely (with the tip above) and pulled their ATS listings into one place. With FlexHired, you can search and filter remote jobs effortlessly no Google (maybe, haha) gymnastics required.

Check it out at https://flexhired.com/remote-jobs if you want to save time and find your next remote gig faster. Currently, FlexHired has 440 companies and more than 8,000 open remote jobs.

Hope this helps, happy hunting!

Building yet another Remote Jobs Aggregator (FlexHired) - My strategy for differentiation & seeking feedback

Nguyen Xuan hoa — Thu, 17 Apr 2025 16:09:43 +0000

Hi everyone,

I'm currently building FlexHired, a remote job aggregator. Yes, I know the market is maybe saturated with job aggregator website. That's why I'm being deliberate about my approach and wanted to share my strategy for feedback from this community.

My plan is phased:

Phase 1: The Foundation (Current Stage)

Problem: Many job boards exist, but finding relevant, non-expired remote jobs can still be a pain (I think).

My MVP Focus: Delivering core value reliably FIRST.

Aggregating from major ATS platforms (Greenhouse, Lever, AshbyHQ, etc.).
Clean, fast, mobile friendly UI with simple filters/search.
Twice daily filtering to remove expired listings. Users should only see active jobs.
Added feature: Search for companies currently hiring remotely.

Goal: Build a solid, reliable, free core experience that people actually like using, despite the competition.

Phase 2: Value-Add & Monetization (Next Steps)

Plan: Introduce tools to genuinely help job seekers beyond just finding listings.

Resume builder
Cover letter builder
Job application tracker

Monetization Strategy:

The core job search aggregator will remain completely free and ad-free.
The additional tools will have robust free tiers, sufficient for most users.
Monetization will come from optional premium features within these tools.

Phase 3: Scaling with Employer Postings (Requires Traction)

Trigger: Once the platform demonstrates significant traction and a valuable job seeker audience (aiming for an indicator like ~50k+ monthly visits).

Plan: Introduce the ability for companies to post their remote jobs directly onto FlexHired.

Monetization Strategy: This opens up a B2B revenue stream. I will charge employers for premium posting options, such as:

Featured job listings (higher visibility).
Pinned posts (keeping the job at the top of relevant searches/lists).

Core Principle: This will complement, not replace, the free aggregated listings and job seeker tools.

My Ask:

What are your thoughts on this strategy?
Is focusing on data freshness and core UX enough of a differentiator initially in a crowded market?
Does the freemium model based on supplementary tools (while keeping the core job board free) seem viable for a micro SaaS?

Here is the link to FlexHired if you want to check it out: https://flexhired.com

Appreciate any insights or critiques you might have. Thanks for reading!

FlexHired - Your Remote Career Starts Here

Nguyen Xuan hoa — Thu, 20 Feb 2025 09:29:29 +0000

About FlexHired

At FlexHired, we believe work should fit your life, not the other way around. Our mission is to connect talented professionals from all industries with the best remote job opportunities, empowering individuals to thrive in a flexible work environment.

Why FlexHired?

Remote work is no longer the future - it’s the present. However, finding legitimate and high-quality remote opportunities can be challenging. That’s why we created FlexHired: a platform dedicated to curating only remote jobs across a wide range of industries. From tech and marketing to education, healthcare, and beyond, we’re here to help you find your ideal role.

What Sets Us Apart

All Remote, All the Time: Every job listing on FlexHiredis 100% remote, giving you access to opportunities without geographic limitations.
Diverse Industries: Explore roles in technology, design, customer service, writing, marketing, healthcare, and more - all offering remote work options.
Detailed Job Filters: Easily search and filter jobs based on industry, salary range, job type (e.g., full-time, part-time, freelance), and more.
Trust and Transparency: We focus on sharing clear and comprehensive details so that you can make informed decisions about your career.

Our Vision

We’re building a world where work is no longer bound by borders or traditional office spaces. Our vision is to be the ultimate destination for remote job seekers, offering a streamlined and reliable platform for finding meaningful work - wherever you are.

Start Your Journey

At FlexHired, we believe everyone deserves the opportunity to work on their own terms. Whether you’re looking for your next career move or exploring the freedom of remote work for the first time, we’re here to help you every step of the way.

Start browsing jobs today and discover the freedom and flexibility of remote work with FlexHired.

Feedback Glow - Canny alternative for indie makers and small teams

Nguyen Xuan hoa — Wed, 06 Nov 2024 02:34:57 +0000

I build this app for indie makers and small startups, with a simple goal: helping you collect and manage customer feedback to develop better products. Whether you're solo or in a small team, Feedback Glow is here to give you the tools you need without the complexity or hefty price tag.

Here's what makes Feedback Glow special:
👉 Collect feedback: feature requests, bug reports, and support tickets - all in one place.
👉 Display a public product roadmap to build transparency and trust with your users.
👉 Keep your customers in the loop with public change logs.
👉 Empower your users to vote, comment, and engage with your roadmap - without having to log in.
👉 Personalize the app with your branding, and color it truly yours.

I’ve designed this app because I know what it’s like to need simple, affordable tools that just work. If you’re an indie maker like me, looking for something leaner than Canny, or you want more features than the alternatives out there, Feedback Glow is for you!💡

Tech stack I used to develop FeedbackGlow:

– Next.js, ShadcnUI, TailwindCSS for the frontend
– Laravel, MySQL for the backend
– Hosted on OVH VPS cloud

Let's see how it works here: https://www.youtube.com/watch?v=pZgJ9IG36CA&t=2s

By the way, you can try FeedbackGlow absolutely free if you're an indie maker, check it out at: FeedbackGlow
Would love to hear your thoughts and feedback - let’s build better products together! 💪

Thank you all 🤗

The Struggles of Manual Project Timeline Visualization

Nguyen Xuan hoa — Sun, 14 Jul 2024 10:55:47 +0000

As a project manager, I often face the daunting task of visualizing project timelines. Creating Gantt charts manually from extensive task lists is not only time-consuming but also prone to errors. Here are some common pain points I encounter:

Time-Consuming Process: Building Gantt charts manually takes up a significant portion of my time. This time could be better spent on other critical project management activities.
Accuracy Issues: With numerous tasks to manage, ensuring each task is accurately represented on the Gantt chart becomes challenging. One small mistake can throw off the entire timeline, leading to confusion and potential project delays.
Frequent Updates: Projects are dynamic, and timelines often need adjustments. Manually updating Gantt charts can be tedious and increases the risk of errors.
Coordination and Communication: Explaining the project timeline to team members and stakeholders can be difficult, especially when changes occur frequently. Ensuring everyone is on the same page requires clear and accurate visual representations.

Introducing Smart Gantt: My Solution to Effortless Project Timeline Management

Smart Gantt is designed to alleviate these pain points by automating the process of creating and managing Gantt charts. Here’s how it helps:

Automated Gantt Chart Creation

By simply providing a list of tasks, roles, priorities, and estimated completion times, Smart Gantt automatically generates a clear and accurate Gantt chart. This saves me valuable time and ensures precision.

Real-Time Updates

Smart Gantt allows for easy adjustments to tasks and timelines. Any changes are instantly reflected in the Gantt chart, maintaining accuracy and reducing the risk of errors.

User-Friendly Interface

The intuitive interface makes it easy to visualize my project timeline, ensuring all team members and stakeholders can quickly understand the project’s progress and any changes.

Enhanced Coordination

With clear and accurate Gantt charts, communicating project timelines becomes straightforward. Team members know exactly when tasks are due, and stakeholders are kept in the loop with up-to-date information.

Priority and Role Management

Smart Gantt allows me to assign tasks based on roles and priorities, ensuring that the most critical tasks are completed first and by the right people.

By automating the Gantt chart creation process, Smart Gantt not only saves time but also enhances accuracy and efficiency. Say goodbye to the tedious manual work and focus on what truly matters - delivering your project successfully and on time.

You can checkout my product at: https://smartgantt.net/

Sharing My Pet Project for Learning React

Nguyen Xuan hoa — Fri, 17 May 2024 16:09:03 +0000

Need a quick and easy way to share code snippets as images? Look no further than Code2Image, the innovative new tool that converts code into customizable images.

🌐 Website: https://codetoimage.vercel.app
⭐️ Github: https://github.com/xuho/code2image

With Code2Image, you can easily

Change the theme - Pick from a variety of color schemes and backgrounds to best showcase your code. Dark and light modes are available.
Switch programming languages - Support for all major languages including Python, JavaScript, C++, and more. The syntax highlighting auto-detects the language.
Customize fonts - Choose the font family, size, and padding to optimize readability.
Export as PNGs or SVGs - Download your code images or save them to the clipboard for easy sharing.
Whether you're writing a tutorial, sharing code samples on social media, or creating documentation, Code2Image streamlines the process of formatting and distributing code snippets. No more manually converting code to images!

Tech stack

ReactJS
NextUI
TailwindCSS
Zustand for simple state management

Some images

If you find it helpful, please give it a star ⭐️ and let's connect on X.com

Happy coding 🎉

Connect me at https://webdevgenius.com

Understanding JSON: A Beginner's Guide

Nguyen Xuan hoa — Fri, 03 Nov 2023 08:59:21 +0000

JSON, or JavaScript Object Notation, has become an integral part of the modern web development landscape. It's a lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate. If you're new to JSON and curious about what it is and how it works, you've come to the right place. In this beginner's guide, we'll demystify JSON and explore its fundamental concepts and applications.

What is JSON?

JSON is a text-based data format that is used to represent structured data. It stands for JavaScript Object Notation, but don't let the name fool you—it's not limited to JavaScript and is widely used in various programming languages.
At its core, JSON consists of two primary structures:

Objects: Objects in JSON are enclosed in curly braces {} and contain key-value pairs. Keys are strings, and values can be strings, numbers, objects, arrays, booleans, or null. Here's a simple example:

{
  "name": "Hoa Nguyen",
  "age": 28,
  "is_student": false
}

Arrays: Arrays in JSON are ordered lists of values enclosed in square brackets []. Values within an array can be of any data type, including objects or other arrays. Here's an example:

["apple", "banana", "cherry"]

JSON's simplicity and flexibility make it an ideal choice for exchanging data between a server and a web application, between different parts of a program, or even between different systems.

Why use JSON?

Now that you have a basic understanding of what JSON is, let's explore why it's so widely used:

Human readable: JSON is easy for humans to read and write. Its clear and concise structure makes it a preferred choice for configuration files, data storage, and data exchange in various applications.
Language agnostic: JSON is not tied to any specific programming language. This means you can use it in a wide range of programming environments, making it a universal choice for data interchange.
Web friendly: JSON is a natural fit for web development. It's the standard data format for most web APIs, and JavaScript provides built-in methods for parsing and generating JSON.
Lightweight: JSON is minimalistic, which means it doesn't include unnecessary information or functionality. This makes it efficient for data transfer over the internet.

How to work with JSON

Understanding JSON is one thing, but knowing how to work with it is another. Here are some basic operations you can perform with JSON:

Parsing JSON

In most programming languages, you can parse JSON strings into native data structures. For example, in JavaScript, you can use the JSON.parse() method:

const jsonString = '{"name": "Hoa Nguyen", "age": 28}';
const obj = JSON.parse(jsonString);

console.log(obj.name); // Output: Hoa Nguyen

Creating JSON

You can also create JSON objects or arrays in your code and convert them into JSON strings using the JSON.stringify() method:

const person = {
  name: "Hoa Nguyen",
  age: 28,
  is_student: false
};

const jsonString = JSON.stringify(person);

console.log(jsonString); // Output: { "name":"Hoa Nguyen", "age":28, "is_student":false }

Accessing JSON Data

Once you've parsed a JSON object, you can access its data just like you would with any other object or data structure in your programming language.

console.log(obj.name); // Output: Hoa Nguyen
console.log(obj["age"]);  // Output: 28

Practical uses of JSON

JSON is everywhere in modern web development. Here are a few examples of its practical applications:

Web APIs

Most web services and APIs return data in JSON format. When you make an HTTP request to an API, the response often includes data in JSON, which you can then parse and use in your web application.

Configuration Files

Many software applications use JSON for configuration settings. It's easy to read and edit by both developers and users.

Here is a simple example of how JSON can be used to store game settings, including character attributes, level designs, and in-game events. This makes it simple to tweak game parameters without modifying the game's source code

{
  "character_attributes": {
    "health": 100,
    "damage": 10,
    "speed": 5
  },
  "level_design": {
    "level_1": {
      "enemy_count": 20,
      "time_limit": 300
    },
    "level_2": {
      "enemy_count": 30,
      "time_limit": 450
    }
  }
}

Here's another simplified example of a Google service account JSON key file structure:

{
  "type": "service_account",
  "project_id": "your-project-id",
  "private_key_id": "your-private-key-id",
  "private_key": "-----BEGIN PRIVATE KEY-----\nYourPrivateKeyValueHere\n-----END PRIVATE KEY-----\n",
  "client_email": "your-service-account-email@your-project-id.iam.gserviceaccount.com",
  "client_id": "your-client-id",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/your-service-account-email%40your-project-id.iam.gserviceaccount.com"
}

Data storage

JSON is commonly used to store data in databases or flat files. Its simplicity and flexibility make it a good choice for structured data storage.

Communication between microservices

In a microservices architecture, different parts of an application communicate with each other. JSON is often used for inter-service communication due to its simplicity and ease of use.

Conclusion

JSON is a fundamental tool in web development and data exchange. With its simplicity, readability, and flexibility, it's an excellent choice for representing structured data in a wide range of applications. As you continue your journey in programming and web development, a solid understanding of JSON will be a valuable asset. You've taken the first step in this beginner's guide, and the possibilities for using JSON in your projects are endless. So, keep exploring and experimenting with JSON to unlock its full potential!

Ref

10 Tips and Tricks With JavaScript Objects

Nguyen Xuan hoa — Fri, 03 Nov 2023 05:10:29 +0000

An object is the basic building block of programs in JavaScript, used in building classes and complex data, and as an integral part of object-oriented programming.

I have used JavaScript daily as a full-stack software developer for the last five-odd years. Objects of JavaScript have played a vital role.

In this article, I will share 10 tricks and tips you can use as a JavaScript developer to manipulate and work efficiently with JavaScript objects.

Combining two objects using the spread operator

There are many scenarios where you must combine two or more data sets from different sources. In such cases, there are multiple ways to do this in JavaScript.

The most commonly used method is using Object.assign(). This method takes multiple parameters. The first one is the assigned object, and the rest of the parameters are the objects we need to combine.

const name = { id: '1234', name: 'Hoa'};
const university = { id: '1234', university: 'Harvard'};
const PersonalDetails = Object.assign({}, name, university);

console.log(PersonalDetails); 
// { id: '1234', name: 'Hoa', university: 'Harvard' }

However, without complicating things, you can use the spread operator to combine. You can spread any number of objects to combine them into a single object.

const PersonalDetails = { ...name, ...university };

console.log(PersonalDetails); 
// { id: '1234', name: 'Hoa', university: 'Harvard' }

One important fact to note is that duplicate keys will override those of the preceding objects in both methods.

Getting the lists of keys and values from an object

During development, there are occasions when we need to obtain only keys or only values from an object. Both of the following built-in functions are pretty straightforward:

Object.keys(): used to get the list of keys.
Object.values(): used to get the list of values.

const vehicle = { brand: 'BWM', year: 2023, type: 'suv'};
//get keys
console.log(Object.keys(vehicle)); // [ 'brand', 'year', 'type' ]

//get values
console.log(Object.values(vehicle)); // [ 'BWM', 2023, 'suv' ]

Using hasOwnProperty() to check an item

When using a for-in loop, checking a property of an object can be useful to avoid iterating through the properties from the object’s prototype. Instead of using an if-else block, here we can use Object.hasOwnProperty().

const vehicle = { brand: 'BWM', year: 2023, type: 'suv'};
for (var item in vehicle) {  
    if (vehicle.hasOwnProperty(item)) { 
        console.log(item);                 
    };  
};
// brand
// year
// type

Using splice instead of delete

When using the delete method, an application will replace an item with undefined instead of removing it from the array. So it is better to use splice() to delete an item from an array.

Let’s see what happens when using delete.

var arrayItems = ['a' , 2 , 'b', '3', 'c', '4']; 
arrayItems.length; // returns 6 
delete arrayItems[2]; // returns true 
arrayItems.length; // returns 6
console.log(arrayItems); // [ 'a', 2, undefined, '3', 'c', '4' ]

When using splice(), the following occurs.

var arrayItems = ['a' , 2 , 'b', '3', 'c', '4']; 
arrayItems.length; // returns 6 
arrayItems.splice(2,1); // returns ['b']
arrayItems.length; // returns 5
console.log(arrayItems); // [ 'a', 2, '3', 'c', '4' ]

The delete method should be used to delete an object property.

Cloning an object correctly

Assume you have an object and need to copy it to change its value, but the original object should be unchanged. There are two methods of how you can do that.

The first method is to use Object.assign(), which copies values of all enumerable properties from one object to another.

var initialVehicle = { brand: 'BWM', year: 2023, type: 'suv'};
var secondaryVehicle = Object.assign({}, initialVehicle);
console.log(secondaryVehicle); // { brand: 'BWM', year: 2023, type: 'suv'};

The second method is to copy the object using JSON.parse().

var initialVehicle = { brand: 'BWM', year: 2023, type: 'suv'};
var secondaryVehicle = JSON.parse(JSON.stringify(initialVehicle));
console.log(secondaryVehicle); // { brand: 'BWM', year: 2023, type: 'suv'};

Selecting specific data from an object

There are a few methods to select keys from an object. The method you choose depends on what you want to do with the values. The following example shows an organized way of selecting data from an object.

Here, you can select the keys you need and pull them into a new object.

const selectObj = (obj, items) => { 
  return items.reduce((result, item) => {
    result[item] = obj[item]; 
    return result;
  }, {});
};
const vehicle = { brand: 'BWM', year: 2023, type: 'suv'};
const selected = selectObj(vehicle, ['brand', 'type']);
console.log(selected); // { brand: 'BWM', type: 'suv' }

Removing keys from an object

Sometimes it is necessary to remove specific keys and their values from an object.

This might be necessary for a scenario where you are building an API and want to remove sensitive data.

The most suitable method is to write a reusable remove method that takes an object and a list of keys to be removed as inputs. You can then loop through each key to be removed and delete it from the object.

const remove = (object, removeList = []) => {
  const result = { ...object };
  removeList.forEach((item) => {
    delete result[item];
  });
  return result;
}

const vehicle = { brand: 'BWM', year: 2023, type: 'suv'}

const itemRemoved = remove(vehicle, ['year']);
console.log(itemRemoved); // Result { brand: 'BWM', type: 'suv' }

Pulling object data into an array

There are scenarios where you need to pull your object data into an array, such as a dropdown menu. You can use the Object.entries() function, which takes an object as its first argument and returns an array.

The returned object is an array of an array. The inner arrays will have two values: the first is the key, and the second is the value.

const vehicle = { brand: 'BWM', year: 2023, type: 'suv'}
console.log(Object.entries(vehicle)); 
// [ [ 'brand', 'BWM' ], [ 'year', 2023 ], [ 'type', 'suv' ] ]

Looping through a JavaScript object

There are several methods in JavaScript that can be used to loop through an object. I will compare two of the best methods I use.

The first method is to use Object.entries(), a function that avoids looking up each value in the original object.

const vehicle = { brand: 'BWM', year: 2023, type: 'suv'}
Object.entries(vehicle).forEach(
    ([key, value]) => console.log(key, value)
);
// brand BWM
// year 2023
// type suv

As a much better and clearer method, you can use object destructuring with Object.entries().

const vehicle = { brand: 'BWM', year: 2023, type: 'suv'}
for (const [key, value] of Object.entries(vehicle)) {
    console.log(key, value);
}
// brand BWM
// year 2023
// type suv

Conditionally adding attributes to objects

Usually, developers use an if-else condition as a much longer method to add a new element to an object conditionally. However, the simplest way is to use object destructuring and the spread operator

const type = { type: 'suv' };
const vehicle = {
  brand: 'BMW',
  year: 2023,
  ...(!type ? {} : type)
}
console.log(vehicle); //{ brand: 'BMW', year: 2023, type: 'suv' }

Likewise, using different conditions, you can add as many elements as you like to an object.

Conclusion

Like any other programming language, JavaScript has many tricks to handle objects, letting us write our programs more simply and beautifully. This article discussed 10 of the tips and tricks I use most when dealing with objects.

I hope you found this article helpful. Thank you for reading and happy coding 💻 😉!

Ref

https://webdevgenius.com/posts/10-tips-and-tricks-with-javascript-objects

Debounce vs. Throttle in JavaScript

Nguyen Xuan hoa — Thu, 02 Nov 2023 04:09:39 +0000

In modern web development, JavaScript is a crucial language for creating interactive and responsive user interfaces. When it comes to optimizing the performance of web applications, developers often encounter scenarios where they need to handle user events efficiently. Two commonly used techniques for this purpose are debounce and throttle. In this blog post, we will delve into the differences between these two techniques, understand their use cases, and provide code examples to demonstrate their functionalities.

Debounce

Debouncing is a technique that ensures a function is executed only after a specific period of inactivity from the user. It is particularly useful for scenarios where you want to reduce the number of times a function is called, especially when handling events like scroll, resize, or key presses, which can trigger multiple events in quick succession.

Imagine a search input field where users can enter keywords. Without debounce, the input's onChange event would trigger with every keystroke, leading to multiple unnecessary API calls. By using debounce, we can delay the API call until the user pauses typing.

Debounce Real-World Example: Autocomplete Search

Imagine you are building an e-commerce website with a powerful search feature that suggests products to users as they type in the search box. Without debounce, the search function would be triggered with every keystroke, causing multiple API calls and slowing down the application.

With debounce, you can improve the user experience by delaying the API call until the user pauses typing. Let's take a look at the code example below:

function debounce(func, delay) {
  let timerId;
  return function (...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// Simulated API call to fetch autocomplete suggestions
function fetchAutocompleteSuggestions(keyword) {
  // Perform API call to fetch suggestions based on the keyword
  console.log('Fetching autocomplete suggestions for:', keyword);
  // Display the suggestions to the user
}

const searchInput = document.getElementById('searchInput');
const autocompleteSearch = debounce((keyword) => {
  fetchAutocompleteSuggestions(keyword);
}, 500);

searchInput.addEventListener('input', (event) => {
  const keyword = event.target.value;
  autocompleteSearch(keyword);
});

In this example, the autocompleteSearch function is wrapped with debounce, ensuring that the API call to fetch autocomplete suggestions is delayed until the user pauses typing for at least 500 milliseconds. This way, the user experiences a smoother search with reduced network requests, enhancing the overall performance of the search feature.

Throttle

Throttling, on the other hand, is a technique that limits the rate at which a function can be executed. It ensures that a function is executed at most once every specified time interval. This technique is ideal for scenarios where you want to control the frequency of events, such as scroll or mousemove, to prevent overwhelming the system with frequent function calls.

For instance, if you have a scroll event listener that triggers animations or updates elements on the page, using throttle will prevent those updates from happening too frequently.

Throttle Real-World Example: Scrolling Performance

Imagine you have a dynamic web page with heavy animations or complex computations that need to be triggered based on the user's scroll behavior. Without throttle, the scroll event listener could fire excessively, causing an overload of function calls and leading to a choppy user experience.

By applying throttle to the scroll event, you can control the frequency of function execution, allowing smooth animations and optimal performance. Here's an example:

function throttle(func, limit) {
  let throttling = false;
  return function (...args) {
    if (!throttling) {
      throttling = true;
      func.apply(this, args);
      setTimeout(() => {
        throttling = false;
      }, limit);
    }
  };
}

// Simulated scroll event action
function handleScroll() {
  // Perform actions on scroll (e.g., animations, element updates)
  console.log('Handling scroll event!');
}

const throttledScrollHandler = throttle(handleScroll, 1000);

window.addEventListener('scroll', throttledScrollHandler);

In this example, the handleScroll function is wrapped with throttle, ensuring that the function is executed at most once every 1000 milliseconds. This way, the animations and updates associated with scrolling are controlled, leading to a smoother and more enjoyable user experience.

Debounce vs. Throttle: When to Use Each?

Use Debounce when you want to trigger a function after a certain period of inactivity (e.g., search input, autocomplete).
Use Throttle when you want to limit the rate of function execution to prevent excessive triggering of events (e.g., scroll, resize, mousemove).

Conclusion

Debounce and throttle are essential techniques in the JavaScript developer's toolkit to optimize the performance and responsiveness of web applications. Understanding their differences and knowing when to apply each technique will help you create smoother, more efficient user experiences. Whether you need to delay API calls during user input or limit frequent event triggers, debounce and throttle are powerful tools that will enhance your JavaScript applications.

Ref

Arrow function in Javascript

Nguyen Xuan hoa — Tue, 31 Oct 2023 06:16:54 +0000

Arrow functions are one of the handy features introduced in ES6. Using arrow functions correctly can make your code more concise and understandable. In this article, we will delve deeper into arrow functions in JavaScript, exploring how to use them and what to be cautious about. Arrow functions are defined as follows:

Arrow functions, also known as "fat arrow" functions from CoffeeScript (a transcompiled language), provide a more concise syntax for writing function expressions.

How to write arrow function in javascript

Basic Syntax with Multiple Parameters

// ES5
var multiEs5 = function(a, b) {
  return a * b;
};

// ES6
const multiEs6 = (a, b) => { return a * b };

Basic Syntax with a Single Parameter

// ES5
var phraseSplitterEs5 = function phraseSplitter(phrase) {
  return phrase.split(' ');
};

// ES6
const phraseSplitterEs6 = phrase => phrase.split(" ");
console.log(phraseSplitterEs6("Web Dev Genius"));  // ["Web", "Dev", "Genius"]

Arrow functions shine when dealing with a single parameter, making the code concise and easy to understand.

No Parameters

// ES5
var docLogEs5 = function docLog() {
    console.log(document);
};

// ES6
const docLogEs6 = () => { console.log(document); };
docLogEs6();

Object Literals

// ES5
var setNameIdsEs5 = function setNameIds(id, name) {
  return {
    id: id,
    name: name
  };
};

// ES6
const setNameIdsEs6 = (id, name) => ({ id: id, name: name });

console.log(setNameIdsEs6(1, "Hoa Nguyen"));   // Object {id: 1, name: "Hoa Nguyen"}

Promises and Callbacks

// ES5
aAsync().then(function() {
  return bAsync();
}).then(function() {
  return cAsync();
}).done(function() {
  finish();
});

// ES6
aAsync().then(() => bAsync()).then(() => cAsync()).done(() => finish());

Using arrow functions reduces the need for the function() keyword, making the code more compact and readable.

Considerations When Using Arrow Functions

While arrow functions are concise and easy to understand, there are scenarios where they should not be used.

Click Handling

<button id="btnClickMe">Click me</button>

When someone clicks the button, you want to change its class to "on" and turn it yellow.

const button = document.querySelector('#btnClickMe');
button.addEventListener('click', () => {
    this.classList.toggle('on');
});

Using an arrow function in this case results in a TypeError because this inside the arrow function refers to the global window object, not the button. To solve this, use a regular function:

const button = document.querySelector('#btnClickMe');
button.addEventListener('click', function() {
    console.log(this); // #btnClickMe Button element
    this.classList.toggle('on');
});

Object Methods

Consider an object method:

const person = {
    points: 100,
    score: () => {
        this.points++;
    }
}

When an arrow function is used here, this does not refer to the object person but inherits from the parent scope, which is window. To maintain the correct reference to this, use a regular function:

const person = {
    points: 100,
    score: function() {
        this.points++;
    }
}

Prototype Methods

class Car {
    constructor(make, colour) {
        this.make = make;
        this.colour = colour;
    }
}

const beemer = new Car('BMW', 'blue');
const subie = new Car('Toyota', 'white');

Car.prototype.summarize = () => {
    return `This car is a ${this.make} in the colour ${this.colour}`;
};

console.log(subie.summarize());  // This car is a undefined in the colour undefined

Using an arrow function for a prototype method results in undefined values for this.make and this.colour. To fix this, use a regular function:

Car.prototype.summarize = function() {
    return `This car is a ${this.make} in the colour ${this.colour}`;
};

Conclusion

In conclusion, understanding when and how to use arrow functions in JavaScript is vital for writing clean, efficient, and bug-free code. Arrow functions provide a concise and elegant syntax, especially when dealing with simple operations or short-lived functions. They enhance readability and make the codebase more maintainable, improving developer productivity.

However, it is crucial to recognize their limitations, especially related to the binding of this. Arrow functions do not bind their own context; instead, they inherit it from the parent scope, often resulting in unexpected behavior when used in certain contexts such as object methods, event handling, or prototype methods. In such cases, traditional functions should be preferred to ensure the correct binding of this, preserving the expected behavior of the code.

Developers must be mindful of the specific scenarios where arrow functions are appropriate and where they are not. By understanding these nuances, developers can harness the power of arrow functions effectively, creating code that is both elegant and robust. As with any language feature, thoughtful consideration of its application is critical to harnessing its benefits while avoiding potential pitfalls and ensuring the creation of high-quality, maintainable JavaScript applications.

References

What is callback function in JavaScript

Nguyen Xuan hoa — Sun, 29 Oct 2023 10:28:22 +0000

Callbacks are not a new concept, but they can be confusing in programming. In this article, let's delve into callback functions in JavaScript, exploring how to create and use them from basics to advanced concepts.

What is a Callback Function?

A callback function can be understood as passing one piece of code (Function A) into another piece of code (Function B). At some point, Function B will call back Function A. JavaScript, being an event-driven and asynchronous programming language, relies heavily on callback functions. You pass a callback function to handle events and asynchronous operations.

Here's a simple example of a callback function in jQuery. In this example, the click method allows you to pass a callback function:

$('#test').click(function(){
    // This is a callback function
});

In this example, you can see that we pass a function as a parameter to the click method.

Here's a more vivid example: Suppose you're going on a trip, and you instruct your partner that if anyone brings a gift, they should give it to our lovely neighbor. Here, Function A is giving a gift to the neighbor:

function giveGift(gift) {
   return console.log("Gift given: " + gift);  
}

function atHome(partner, giveGift) {
   var gift = "Received a gift";
   giveGift(gift);  
}

The execution time of the callback function depends on how the function is defined. To clarify, let's define a function sayHello():

function sayHello(name, callback) {
    var myName = name.toUpperCase() + ", Hello";
    return callback(myName);
}

var result = sayHello("Hoa Nguyen", function (arg) {
    return arg;
});

alert(result);

You can observe that the callback is executed after the myName variable is defined. When we call sayHello, it alerts with the message "Hoa Nguyen, Hello".

Using callback functions requires careful consideration. You must adhere to the principles that the function specifies, whether it passes additional parameters to the callback function or not. Here's an example using the forEach function, which takes two parameters for the callback function: the current element's value and its index.

var keywords = ["Hoa Nguyen", "WebDevGenius", "Learn programming", "webdevgenius.com"];

// Loop through each element and process in the callback function
keywords.forEach(function (eachName, index){
    console.log(index + 1 + ". " + eachName);
});

Now that you understand what callback functions are, let's move on to how they work.

How Callback Functions Work

A function supporting a callback function will definitely call it within its processing code. However, where it calls the callback within the function is something we usually don't know, unless we write it ourselves. As mentioned earlier, when passing parameters to a callback function, it depends on how many parameters the parent function allows. If the parent function allows you to pass three parameters, you can only pass three; passing more won't have any effect.

You can pass a callback function in a similar manner to regular parameters, just like you do with other data types.

This means that when passing a callback to another function, the callback, despite being a function, won't have parentheses after its name.

function doSomething() {
    alert('entered');
}

function something(doCallback) {
    doCallback();
}

something(doSomething);

In the above example, doSomething is a function. But when passed to something(), it doesn't have parentheses after its name. something() would execute doSomething only when you add parentheses after the function name.

Benefits of Callback Functions in JavaScript

Javascript function providing a range of benefits that enhance the flexibility and efficiency of your code. Here are some key advantages of using callback functions

Asynchronous Operations

One of the primary benefits of callback functions is their utility in managing asynchronous operations. JavaScript, being a single-threaded language, can use callbacks to handle time-consuming tasks without blocking the execution of other code. This capability is vital for tasks like data fetching, file reading, and API calls, ensuring that the program remains responsive and efficient.

// Asynchronous operation simulation using setTimeout
function fetchData(callback) {
    setTimeout(function() {
        callback("Data received successfully");
    }, 2000); // Simulating a delay of 2 seconds
}

function processData(data) {
    console.log("Processing data: " + data);
}

fetchData(processData); // Output after 2 seconds: Processing data: Data received successfully

Code Reusability

Callback functions promote code reusability. By defining a callback function, you can reuse it across multiple parts of your program. This promotes the principle of DRY (Don't Repeat Yourself), reducing redundancy in your codebase and making maintenance and updates more straightforward.

function greet(name) {
    console.log("Hello, " + name + "!");
}

function farewell(name) {
    console.log("Goodbye, " + name + "!");
}

function performAction(action, name) {
    action(name);
}

performAction(greet, "Alice"); // Output: Hello, Alice!
performAction(farewell, "Bob"); // Output: Goodbye, Bob!

Event Handling

In web development, callback functions are commonly used to handle events. When a user interacts with a web page (such as clicking a button or submitting a form), callback functions can be triggered to respond to these events. This event-driven architecture is foundational for creating dynamic and interactive user interfaces.

document.getElementById("myButton").addEventListener("click", function() {
    console.log("Button clicked!");
});

Higher-Order Functions

Callback functions enable the creation of higher-order functions. Higher-order functions can accept other functions as arguments, enabling powerful functional programming paradigms. This ability to pass functions as parameters allows for elegant and concise code structures, enhancing readability and maintainability.

function multiplyByTwo(number) {
    return number * 2;
}

function operateOnNumbers(numbers, operation) {
    return numbers.map(operation);
}

const numbers = [1, 2, 3, 4, 5];
const multipliedNumbers = operateOnNumbers(numbers, multiplyByTwo);
console.log(multipliedNumbers); // Output: [2, 4, 6, 8, 10]

Closure

Callback functions have access to variables from their containing scope, even after the parent function has finished executing. This property, known as closure, enables the creation of encapsulated and private data within functions. Callbacks can access variables defined in their parent functions, enhancing data security and preventing unintended modification of variables.

function counter() {
    let count = 0;
    return function() {
        count++;
        console.log("Count: " + count);
    };
}

const increment = counter();
increment(); // Output: Count: 1
increment(); // Output: Count: 2

Dynamic Behavior

Callback functions allow for dynamic behavior in your programs. Depending on the context or user input, different callback functions can be employed, altering the program's behavior accordingly. This dynamic nature enhances the adaptability and versatility of your applications.

function greetMorning() {
    console.log("Good Morning!");
}

function greetEvening() {
    console.log("Good Evening!");
}

let dynamicGreeting = greetMorning;

dynamicGreeting(); // Output: Good Morning!

dynamicGreeting = greetEvening;
dynamicGreeting(); // Output: Good Evening!

Error Handling

Callback functions are instrumental in error handling mechanisms, especially in asynchronous operations. By employing callbacks, you can efficiently manage errors that might occur during asynchronous tasks, ensuring graceful degradation and preventing crashes in your applications.

function fetchData(callback, errorCallback) {
    setTimeout(function() {
        const error = false; // Simulating an error condition
        if (error) {
            errorCallback("Error occurred while fetching data");
        } else {
            callback("Data received successfully");
        }
    }, 2000);
}

function handleSuccess(data) {
    console.log("Success: " + data);
}

function handleError(error) {
    console.error("Error: " + error);
}

Promotes Modularity

Callbacks promote modularity in code design. By encapsulating specific functionality within callback functions, you create modular components that can be easily integrated into different parts of your application. This modular approach enhances the maintainability and extensibility of your codebase.

// Module 1
function module1Function() {
    console.log("Module 1 Function");
}

// Module 2
function module2Function() {
    console.log("Module 2 Function");
}

// Main Program
module1Function(); // Output: Module 1 Function
module2Function(); // Output: Module 2 Function

Conclusion

So, we've explored the concept, workings, and considerations when implementing callback functions in JavaScript. You've likely been using them unknowingly, especially when utilizing libraries like jQuery. How do you feel about JavaScript? Share your thoughts and experiences in the comments. If you found this article helpful, please share it for others to benefit from!

Leave your comments to help me improve in the future. Thank you!