We can use HTTP DELETE method instead of POST to implement deleting of data from a database in a REST API. This allows us to implement CRUD operations using a single API endpoint. Since HTML forms have no support for delete method, we should use JavaScript to send a delete request to server. Note that such requests should not have a body, so we provide an empty body to avoid browsers like Chrome throwing an error.

fetch(`/api/endpoint/${post_id}`, {
   method: 'DELETE',
   body: JSON.stringify({})
});

Then on the server the request can be processed like this:

import { ObjectId } from 'mongodb';

// code removed for sake of simplicity

const deleteDocument = async (request, collection) => {
  if (request.method === 'DELETE') {
    const query = {_id: new ObjectId(request.query.post_id)};
    const result = await collection.deleteOne(query);
    console.log(result.deletedCount);
  }
};

To make sure that post_id is received as a query in backend, we need to provide a rewrite rule in vercel.json:

{
    "rewrites": [
      {
        "source": "/api/endpoint/:post_id",
        "destination": "/api/endpoint"
      }
    ]
}

Tips on writing better JavaScript...

try {
  const response = await fetch('https://restcountries.com/v4.1/all');
  if (response.ok) {
    console.log('Promise resolved and HTTP status is successful');
    // ...do something with the response
  } else {
    // Custom message for failed HTTP codes
    if (response.status === 404) throw new Error('404, Not found');
    if (response.status === 500) throw new Error('500, internal server error');
    // For any other server error
    throw new Error(response.status);
  }
} catch (error) {
  console.error('Fetch', error);
  // Output e.g.: "Fetch Error: 404, Not found"
}

Reference: https://dionarodrigues.dev/blog/fetch-api-do-you-really-know-how-to-handle-errors

Dealing with asynchronous actions in JavaScript using callbacks, promises, and async/await...

Using JavaScript's fetch api instead of RxJS observable in an Angular data service.

In this blog post I explain how to secure an API with OAuth 2.0 authorization framework as well as implementing changes in a Web app/page to allow users access to that API. This implementation uses JavaScript in frontend and backend (Node.js)...

In this post I show how to throttle a function using setInterval and how to debounce a function using setTimeout.

If you have an input field of type="date" and wish to set it by default to current date you can use below function...

If you want to build a SPA (single page application) from a MPA (multi page application) you don't always need a giant framework. What you need mainly is to set an event handler on your links to disable their default behaviour...

If you have some markup as string and wish to add it to a HTML page via JavaScript, the old way was...

Did you know that a HTML anchor element can be treated as a Location object? This means similar to how you can use window.location to read or write different parts of a URL, you can do the same with an anchor element. For example if you have a link like this:

<a id="myLink" href="https://mydomain/products.html?category=clothing#productName">test</a>

You can get the value of hash in this way:

const hash = document.getElementById('myLink').hash.substring(1); // returns productName

You can use different properties of Location object on an anchor element and same as with window.location you can both read and write these properties. For example to get the value of category from previous link you can use this:

const params = document.getElementById('myLink').search;
const category = new URLSearchParams(params).get('category'); // clothing

For more info see: https://developer.mozilla.org/en-US/docs/Web/API/Location

Sometimes you need to display data that you fetch from backend in a custom order in frontend. The following snippet shows how to order objects in our array using a custom order defined in another array. Note that to avoid mutation we need to use WEB API's structuredClone() method instead of spread syntax (...) as spread syntax only does a shallow copy of array items and hence won't be able to clone objects inside an array.

const myArray = [
  {name: 'firstname', value: 'Tom'},
  {name: 'age', value: 61},
  {name: 'lastname', value: 'Cruise'}
];
const mySortOrder = ['firstname', 'lastname', 'age'];
const sortArray = (myArray, mySortOrder) => {
  myArray.sort((a, b) => {
    const indexA = mySortOrder.indexOf(a.name);
    const indexB = mySortOrder.indexOf(b.name);
    return indexA - indexB;
  });
  return myArray;
}
const sortedArray = sortArray(structuredClone(myArray), mySortOrder);
console.log(sortedArray);