... in the previous chapters...
Convert bytes to megabytes, gigabytes, terabytes without a loop.
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
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 GBWe 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...Make the whole document editable.
Here's a small cool trick to make the whole document editable.
document.designMode = 'on';let iframeNode = document.getElementById('myeditor'); // or any other ways to get reference to an iframe iframeNode.contentDocument.designMode = "on";Transition from jQuery to a slimmer alternative framework (💰 Cash)
Cash is an absurdly small jQuery alternative weighing only 16 KB minified, and 6 KB gzipped.
It has all the common jQuery functionality you are used to, and it is relatively easy to migrate your project to it.
Getting started. The easiest way to migrate to Cash is to include a script from a CDN, i.e.
The developers of Next.js created this neat library called Satori, which allows to convert JSX elements with style properties into SVG. As a result, this gives amazing possibilities:
You can generate HTML previews. For example, you can generate a simple JSX element on the server, convert to SVG, and then later convert it to JPG or...
It has all the common jQuery functionality you are used to, and it is relatively easy to migrate your project to it.
Getting started. The easiest way to migrate to Cash is to include a script from a CDN, i.e.
<script src="https://cdnjs.cloudflare.com/ajax/libs/cash/8.1.1/cash.min.js"></script>The developers of Next.js created this neat library called Satori, which allows to convert JSX elements with style properties into SVG. As a result, this gives amazing possibilities:
You can generate HTML previews. For example, you can generate a simple JSX element on the server, convert to SVG, and then later convert it to JPG or...
Using <dialog> and :modal
With a new
What is it about?
:modal CSS pseudo-class landing in Chrome 105, we now have a full support in 4 major browsers including Chrome, Edge, Firefox and Safari.What is it about?
:modal is a special (just like any other) pseudo-class, that is used to target elements that prevent user interactions with the rest of the page. This, for example, could be a Dialog opened with a showModal() method, or an element that is selected by the :fullscreen pseudo-class when...Building a Preact application into a standalone script with Rollup
Bundle a Preact (or React) application into a single standalone browser script with Rollup — dev server, live reload, JSX via Babel, and aliasing React to Preact. Works with current Rollup 4.
Faster UI development with Tailwind CSS (v3)
An introduction to utility-first CSS with Tailwind — why it beats component frameworks like Bootstrap, and how to set it up. Covers Tailwind CSS v3; for new projects see the Tailwind v4 setup guide.
Parse URL parameters with JavaScript
How many more times will I google it... It's time to prepare a URL parameters parser implementation that I can easily reuse.
Let's start with the basics. The problem consists of 3 parts:
number one is, of course, parsing the parametersnumber two is making it work in all browsersthree is making sure that when parameters change, script knows about it URLSearchParams to the rescue ...
Let's start with the basics. The problem consists of 3 parts:
number one is, of course, parsing the parametersnumber two is making it work in all browsersthree is making sure that when parameters change, script knows about it URLSearchParams to the rescue ...
Building React/Preact into a standalone script with Browserify
How to bundle a React/Preact app into a single minified browser script with Browserify and babelify. Browserify is largely superseded today — for new projects prefer the Rollup approach.
Create array from 0 to N
Let's go straight to the point. Sometimes you need an
Let's assume we have already defined our N, as, say,
Using spread operator and
Array instead of a for loop. Here are several ways to do it.Let's assume we have already defined our N, as, say,
const n = 10; Now here are all our options.Using spread operator and
Array.keys [...Array(n).keys()]Array.from static method How to check image EXIF with plain JavaScript.
It's not a secret that JavaScript can be very used for pretty much everything, from calculating simple math to reading binary data and to generating 3D models. In this example we'll see how to read EXIF data of an image. That is, from JPEG, PNG, TIFF, HEIC/HEIF and WEBP.
Preparing the document Let's start by including some basic HTML to the document, like Tailwindcss for CSS components, and the ExifReader library to actually read the EXIF. Don't...
Preparing the document Let's start by including some basic HTML to the document, like Tailwindcss for CSS components, and the ExifReader library to actually read the EXIF. Don't...