DEV Community: Xaypanya Phongsa

Made a Hacktoberfest 2025 repo

Xaypanya Phongsa — Thu, 23 Oct 2025 03:14:28 +0000

I built a Hacktoberfest 2025 repo

a digital sticky note wall for heartbreaking quotes or confessing to your crush lol.

Your quote + your GitHub profile = immortalized on our sticky note wall.

Contribute easily: add your quote, send a PR, move on.

https://github.com/Xaypanya/pull-requotes

Volt Lab: The Minimalist JavaScript Playground

Xaypanya Phongsa — Thu, 26 Dec 2024 04:52:24 +0000

As a frontend developer working with Vue daily, I've found myself constantly reaching for Volt Lab during my development workflow, and here's why.

Quick JavaScript Testing

Sometimes I just need to verify how a reduce() function works or test a simple array manipulation. Opening my full IDE or waiting for CodeSandbox to load feels like overkill. Volt Lab opens instantly and I can start coding right away.

What I Use It For:

Testing small utility functions
Verifying ES6+ syntax
Quick array/object manipulations
Practicing algorithm solutions

Why It Works for Me

Opens instantly in my browser
No account needed
Basic code snippets included
Clean interface without distractions
Shows errors right away

Real Example

Just yesterday, I needed to test a string manipulation function for my Vue project. Instead of testing it directly in my project, I quickly opened Volt Lab, wrote the function, verified it worked, then copied it back to my codebase. Took less than a minute!
It's not trying to be a full-featured IDE or replace more powerful tools

it's just a simple, fast JavaScript playground that helps me code faster.

🔗 Give it a try: Volt Lab

javascript #webdev #coding #programming #frontend #development

Fetching Data Made Easy with the useQuery Hook in React

Xaypanya Phongsa — Sat, 04 Mar 2023 10:44:19 +0000

As a developer, fetching data from an API endpoint is a common task that you will encounter in almost every project you work on. To simplify this process and make it more efficient, many libraries and frameworks have emerged that provide tools for managing API requests and responses.

One such library is react-query, a powerful tool for managing data in React applications. One of the most useful features of react-query is the useQuery hook, which makes fetching data from an API endpoint incredibly easy.

In this post, we will explore how to use the useQuery hook to fetch data from an API and manage the results in a React application.

Getting Started with useQuery ✨

To use useQuery in your React application, you first need to install the react-query library. You can do this by running the following command in your terminal:

npm install react-query

With the useQuery hook imported, you can now use it to fetch data from an API endpoint. Here's an example of how to use useQuery to fetch a list of companies from an API endpoint:

const { isLoading: isLoadingCompanies, isFetching: isFetchingCompanies, data: dataCompanies, refetch: refetchCompanies } = useQuery(["queryCompanies", searchTerm],()=> companySearchQuery(currentPage, searchTerm, token))

In the above code, we're using destructuring assignment to retrieve four variables from the useQuery hook:

isLoadingCompanies: A boolean indicating whether the query is currently loading data or not.
isFetchingCompanies: A boolean indicating whether the query is currently fetching data or not.
dataCompanies: The response data returned from the query after it has successfully fetched data.
refetchCompanies: A function that can be called to manually refetch the query and update the data.

The first argument to the useQuery hook is an array of dependencies that determine when the query should be re-executed. In this case, the query will be re-executed whenever either the queryCompanies or searchTerm variables change.

The second argument to the useQuery hook is a function that will be executed to fetch the data. In this case, we're using an arrow function that takes no arguments and returns a promise that resolves to the data fetched by the API.

Conclusion 🚩

In this post, we've explored how to use the useQuery hook from the react-query library to fetch data from an API endpoint and manage the results in a React application. With useQuery, fetching data has never been easier or more efficient, and it's a tool that every React developer should have in their arsenal.

If you'd like to learn more about react-query and how it can help you manage data in your React application, check out the official documentation here. Happy coding!

The difference between reassigning and modifying arrays in TypeScript 👨‍💻

Xaypanya Phongsa — Sat, 25 Feb 2023 09:41:45 +0000

In TypeScript, there is a difference between reassigning and modifying arrays. When you declare an array variable using const, you can modify the elements of the array but you cannot reassign the array to a new value. On the other hand, when you declare an array variable using let, you can both modify the elements of the array and reassign the array to a new value.

To understand the difference between reassigning and modifying arrays, let's take a look at some examples.

🍂 Modifying an Array

When you modify an array, you change the value of one or more elements in the array. This is allowed for arrays declared using const or let. Here's an example:

const myArray = [1, 2, 3];
myArray[0] = 4;
console.log(myArray); // Output: [4, 2, 3]

In this example, we declare an array myArray using const and initialize it with the values [1, 2, 3]. We then modify the value of the first element in the array by assigning it the value 4. The output of console.log(myArray) shows that the first element of the array has indeed been modified to 4.

💫 Reassigning an Array

When you reassign an array, you change the entire array to a new value. This is only allowed for arrays declared using let. Here's an example:

let myArray = [1, 2, 3];
myArray = [4, 5, 6];
console.log(myArray); // Output: [4, 5, 6]

In this example, we declare an array myArray_using _let_and initialize it with the values _[1, 2, 3]. We then reassign the entire array to a new value [4, 5, 6]. The output of console.log(myArray) shows that myArray now contains the new value [4, 5, 6].

⛔ Differences between const and let

When you declare an array using const, you are declaring a constant reference to an array. This means that you cannot reassign the reference to the array to a new value. However, you can still modify the elements of the array.

When you declare an array using let, you are declaring a variable reference to an array. This means that you can both modify the elements of the array and reassign the entire array to a new value.

💖 Conclusion

In TypeScript, it is important to understand the difference between reassigning and modifying arrays. If you need to change the entire array, you should use let. If you only need to change the values of one or more elements in the array, you can use const. By understanding these differences, you can write better and more efficient TypeScript code.

Emotion vs Tailwind CSS vs Styled-Components

Xaypanya Phongsa — Mon, 06 Feb 2023 12:15:37 +0000

When it comes to styling your components in a JavaScript-based project, there are several libraries to choose from. In this article, we'll take a closer look at three popular options: Emotion, Tailwind CSS, and Styled Components, and explore their use cases and my personal opinions on each.

Emotion: A Library for Writing CSS in JavaScript

Emotion is a library for writing and using CSS in JavaScript. It allows you to style your components using CSS syntax in your JavaScript code. This can be especially useful when building complex and dynamic user interfaces, as it gives you fine-grained control over the styles of your components. Additionally, Emotion has a small size and fast performance, making it well suited for performance-critical applications.

One of the standout features of Emotion is its support for server-side rendering, making it a great choice for projects that require this. And with a strong community of users and a growing ecosystem of plugins and tools, Emotion is a versatile and well-supported library.

Advantages of Emotion:

It has a small size and fast performance, as it uses optimized runtime CSS generation.
It provides a powerful and flexible API for styling components, including support for CSS-in-JS and server-side rendering.
It has a strong community of users and a growing ecosystem of plugins and tools.

Use-cases:

Emotion is ideal for building complex and dynamic user interfaces, where you need fine-grained control over the styles of your components.
It is suitable for projects that require server-side rendering, as it supports it out of the box.
It's a good choice for developers who prefer writing CSS in JavaScript, rather than in separate files.

Tailwind CSS: A Utility-First CSS Framework

Tailwind CSS is a utility-first CSS framework, which provides a set of pre-defined CSS classes that you can use to quickly style your HTML elements. It's designed to be highly customizable, allowing you to create custom designs by composing these utility classes. This makes it a great choice for projects that require a lot of prototyping or iterations, as it makes it easy to build and test new designs.

Tailwind CSS has a small file size, making it suitable for performance-critical applications, and it's also well suited for projects with a lot of repeating UI patterns, as it provides a large set of pre-defined utility classes. If you prefer working with utility classes, rather than writing custom CSS, then Tailwind CSS may be the perfect fit for your project.

Advantages of Tailwind CSS:

It's highly composable and encourages utility-first design, allowing you to quickly build and iterate on UI designs.
It has a large set of pre-defined CSS classes that cover a wide range of common design patterns, making it easy to get started.
It has a small file size, which makes it suitable for performance-critical applications.

Use-cases:

Tailwind CSS is a good choice for projects that require a lot of prototyping or iterations, as it makes it easy to build and test new designs.
It's well suited for projects with a lot of repeating UI patterns, as it provides a large set of pre-defined utility classes.
It's a good choice for developers who prefer working with utility classes, rather than writing custom CSS.

Styled Components: A Library for Styling Components in React

Styled Components is a library for creating CSS-in-JS styled components in React. It allows you to write actual CSS syntax inside your JavaScript code and generates unique class names for the styles to avoid class name collisions. This provides a clean and simple API for styling components in React, making it easy to get started.

Styled Components also supports theming, allowing you to change the look and feel of your app with a single change to your theme. This can be especially useful for large-scale projects that need to support multiple design systems or styles. And for developers who prefer writing CSS in JavaScript, rather than in separate files, Styled Components offers a familiar and flexible API.

Advantages of Styled Components:

It provides a clean and simple API for styling components in React, making it easy to get started.
It generates unique class names for your styles, which helps to avoid class name collisions.
It supports theming, allowing you to change the look and feel of your app with a single change to your theme.

Use-cases:

Styled Components is ideal for building dynamic and interactive user interfaces in React, as it allows you to style your components using actual CSS syntax.
It's well suited for projects that require a lot of custom styling, as it provides a flexible and powerful API for styling components.
It's a good choice for developers who prefer writing CSS in JavaScript, rather than in separate files.

Which Library is Right for Your Project?

The choice between these libraries will depend on your specific needs and preferences. If you prefer writing CSS in JavaScript, then Emotion or Styled Components may be a better fit. If you prefer working with utility classes, then Tailwind CSS may be the better choice. Ultimately, the best choice will depend on the specific requirements of your project and your personal style and preferences as a developer.

In conclusion, each of these libraries has its own advantages and use-cases, and it's worth taking the time to explore each one to see which one is right for your project. Whether you're building a complex and dynamic user interface, prototyping a new design, or styling components in React, there is a library out there that can help you achieve your goals.

How to Connect Your Node.js Server to Facebook Page API

Xaypanya Phongsa — Sun, 05 Feb 2023 20:52:19 +0000

Are you looking to automate your social media presence by posting to your Facebook page from your Node.js server? With the Facebook Page API, you can do just that! In this blog post, we will show you how to connect your Node.js server with the Facebook Page API and post a post.

Step 1: Register Your App with Facebook

To get started, you need to register your app with Facebook. Go to the Facebook Developer Dashboard and create a new app. You will be given an App ID and App Secret. These two pieces of information are essential to connecting your Node.js server with the Facebook Page API.

Step 2: Obtain a Page Access Token

Next, you need to obtain a Page Access Token for your Facebook page. To do this, use the Facebook Graph API Explorer and provide your App ID and App Secret. You will also need to grant the necessary permissions to the app.

Step 3: Install the Facebook SDK for Node.js

In your Node.js project, install the Facebook SDK for Node.js using the following command:

npm install facebook-node-sdk

Step 4: Write the Code to Post a Post

Now, it's time to write the code to post a post to your Facebook page. Use the following code as a starting point:

const Facebook = require('facebook-node-sdk');

const facebook = new Facebook({ appId: 'YOUR_APP_ID', secret: 'YOUR_APP_SECRET' });

facebook.api(`/PAGE_ID/feed`, 'post', { message: 'Hello, world!' }, function(res) {
  if(!res || res.error) {
    console.log(!res ? 'error occurred' : res.error);
    return;
  }
  console.log('Post Id: ' + res.id);
});

Replace YOUR_APP_ID and YOUR_APP_SECRET with your Facebook app's App ID and App Secret, respectively, and PAGE_ID with the ID of your Facebook page.

Step 5: Run the Code

Finally, run your Node.js code and check if a post is made to your Facebook page.

In conclusion, connecting your Node.js server with the Facebook Page API is a straightforward process. By following the steps outlined in this blog post, you can automate your social media presence and save time by posting to your Facebook page from your server.