... in the previous chapters...
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
Rollup is a module bundler for JavaScript, made for speed and simplicity of setup. It also does tree-shaking (imports only the functionality you actually imported), supports JSX compilation and provides other neat functionality.
Step 1. (boring) Install NPM dependencies. Let's start with something that any JS project starts with - install every tiny package we will need during our development. This includes Rollup itself, the Livereload plugin for Rollup which will automatically reload the app on every...
Step 1. (boring) Install NPM dependencies. Let's start with something that any JS project starts with - install every tiny package we will need during our development. This includes Rollup itself, the Livereload plugin for Rollup which will automatically reload the app on every...
Faster UI development with Tailwind CSS
What is Tailwind? Tailwind is a utility-first CSS framework. The main difference between other frameworks like Bootstrap, is that it doesn't have ready components as such, but provides base classes that allow you to construct one easily. More details will follow ;)
Why Tailwind? As mentioned before, Tailwind doesn't have provide you the components such as
Why Tailwind? As mentioned before, Tailwind doesn't have provide you the components such as
alert or carousel. This gives you some benefits: you don't have to remember that special class...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
Browserify is a bundler that magically normalizes all your
Let's start with the basics. Imagine you have your application written in React, or maybe even in jQuery, and now you want to make sure it's built into one single script, minified and compressed of course. This is where Browserify comes handy.
...
npm requirements into something a browser can understand. This means that your whole application can be minified into just 1 script that you can include in a regular HTML page.Let's start with the basics. Imagine you have your application written in React, or maybe even in jQuery, and now you want to make sure it's built into one single script, minified and compressed of course. This is where Browserify comes handy.
...
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...
How to create a placehold.it image generator clone with Node.js?
What if I tell you generating images is actually an easy task, and you can create a simple placehold.it clone with only a bunch of lines.
Installing dependencies Let's start with the basics. We will start with express and sharp and create a very very simple setup:
Installing dependencies Let's start with the basics. We will start with express and sharp and create a very very simple setup:
import express from 'express'; import sharp from 'sharp'; const port = 8000; const app = express(); package.json with npm init. We will also include express to set up our application, express-validator to validate the form submission, and mustache (mustache-express) to render the form.npm init -y npm i --save express express-validator mustache-expressindex.js. We will...