... in the previous chapters...
I asked OpenAI's GPT-3 if it was possible to make an HTTP/3 request with Node.js, and the result was weird.
Can you make an HTTP/3 request with Node.js? I asked that question on OpenAI's playground to see how it handles the question that doesn't have the answer.
Yes, you can make an HTTP/3 request with Node.js using the node-quic module. This module provides an interface to the IETF QUIC protocol and allows you to make HTTP/3 requests.
AI That's what the system replied in OpenAI's Playground. I was...
Yes, you can make an HTTP/3 request with Node.js using the node-quic module. This module provides an interface to the IETF QUIC protocol and allows you to make HTTP/3 requests.
AI That's what the system replied in OpenAI's Playground. I was...
Push instant updates with EventSource API
EventSource is a handy API supported by all browsers, which runs over the regular HTTP protocol and doesn't require setting up a separate WebSocket service. However, it has limitations, such as data being one-directional (server to client) or a connection being constantly occupied. Let's dive in.
The server We will start with setting up a simple server using one of the ways from the previous article. After you have the server, we will set up a separate...
The server We will start with setting up a simple server using one of the ways from the previous article. After you have the server, we will set up a separate...
5 ways to create an HTTP/HTTP2 server with Node.js.
Node.js can be used to easily run a web server by using the built-in HTTP module or a web framework such as Express, Hapi, or Fastify. The process involves creating an HTTP server, setting up routes, and starting the server to listen on a specific port for incoming requests.
1. Using the built-in
1. Using the built-in
http.createServer
The easiest and most typical way is to use the built-in http
module.const http...
Convert all JPGs and PNGs in a folder to WEBP and AVIF with Node.js and Sharp
One of the easiest ways to convert all JPG and PNG images in a folder to WEBP and AVIF is to use the Sharp library.
Let's get straight to the point. We will need to install
Let's get straight to the point. We will need to install
sharp
and glob
.npm install --save glob sharp
With that done, we now need to write a relatively simple loop to find all images and convert them to WEBP and AVIF. We will...fetch() with timeout
Being from early JavaScript days, you might've been used to setting a
However, the way
timeout
for all your HTTP requests in jQuery or libraries like axios, request, etc. Yet to your surprise, there's no timeout
parameter for native browser's fetch
.However, the way
fetch
extends on this, is now it allows you to set a different condition to abort the request. This can be not only the timeout, but any other condition (i.e. user logs out of the system, and all pending requests have to be...Prevent CSS column break within an element
You might have had this while using the CSS
Let's look at this simple example of CSS columns. First, the HTML:
columns
rule and getting rid of all those JavaScript libraries. One of the elements got suddenly cut and wraps to the next column.Let's look at this simple example of CSS columns. First, the HTML:
<div class="columns"> <div>Item 1</div> <div>Item 2, which is slightly longer</div> <div>Item 3, which is also longer and jumps to next column</div> <div>Item 4</div> <div>Item 5</div> <div>Item 6</div> </div>
...Convert all PNGs in a folder to WEBP with FFmpeg
FFmpeg is an awesome tool that can convert not only videos but also audio and images.
On Linux and Mac, run it like this in the folder where you want the conversion to run:
On Linux and Mac, run it like this in the folder where you want the conversion to run:
for i in *.png; do ffmpeg -y -i "$i" -c:v libwebp "${i%.*}.webp"; done
On Windows:FOR /F "tokens=*" %G IN ('dir /b *.png') DO ffmpeg...
Simple responsive HTML/CSS maintenance page with black-and-yellow construction stripes
Here is a simple maintenance page with a black-and-yellow construction stripe at the top.
It has a hanging information board with text that you can customize, and is prepared for mobile screens as well.
CodePen Embed Fallback
It has a hanging information board with text that you can customize, and is prepared for mobile screens as well.
CodePen Embed Fallback
Pure CSS toggle switch
There's no need to use a library to implement a nice toggle for your project. This can be done with pure CSS and completely zero JavaScript.
There is a nice codepen implemented by Marcus Burnette, which involves using a
The markup We are using a checkbox input with a label after it, and...
There is a nice codepen implemented by Marcus Burnette, which involves using a
:checked
pseudo-class selector on the <input type="checkbox" />
. Let's see how it's done exactly.The markup We are using a checkbox input with a label after it, and...
Save full-page screenshots with Chrome
Whenever you need to save a full-page screenshot, there's no need to make several screenshots or make your browser window unbelievably large.
Open the Developer tools with Cmd + Option + J on Mac, or Ctrl + Shift + J on Windows or Linux.
After that, open the command prompt using Command + Shift + P (Mac) or Control + Shift + P (Windows / Linux) and start typing Capture full size screenshot.
What if I tell you you can convert bytes to petabytes without doing a loop and constantly dividing by 1024?
We will go through steps required by setting up a simple Express (Express.js) server. The setup will be very minimal, however, it will be a fully working server. Let's start by creating a project folder and creating an empty package.json with my favorite
Open the Developer tools with Cmd + Option + J on Mac, or Ctrl + Shift + J on Windows or Linux.
After that, open the command prompt using Command + Shift + P (Mac) or Control + Shift + P (Windows / Linux) and start typing Capture full size screenshot.
What if I tell you you can convert bytes to petabytes without doing a loop and constantly dividing by 1024?
function bytesToHuman(bytes) { let prefixes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; let base = 1024; let cl = Math.min(parseInt(Math.log(bytes) / Math.log(base), 10), prefixes.length - 1); return (bytes / Math.pow(base, cl)).toFixed(2) + ' ' + prefixes[cl]; } console.log(bytesToHuman(1024 * 1024 * 10)); // 10.00 MB console.log(bytesToHuman(2151099283)); // 2.00 GB
Let's chew down another issue: we have a /public folder with images, and depending on the browser we want to serve a WEBP or AVIF to save bandwidth and decrease page load time.We will go through steps required by setting up a simple Express (Express.js) server. The setup will be very minimal, however, it will be a fully working server. Let's start by creating a project folder and creating an empty package.json with my favorite
echo {} > package.json
. After that, add the...