Interesting HTML, CSS and JS tricks

As a result, users call our numbers and report information that they wanted to pass on to the special services.

▍ Editable HTML pages

Button press

DesignMode ON/OFFmakes the web page editable

. All you need is one line of JavaScript in your code:

document.designMode = "on";

These ancient APIs appeared 25 years ago, but are still supported in browsers.

▍ Proper use of

In recent years, support for modern AVIF and WebP image compression formats has appeared in many browsers (unfortunately, December 10, 2022 Google

deleted

support for JPEG XL from Chromium, so this format is no longer very relevant). You can reduce traffic from your site if

enable this optimization

using the tag

<picture>

.

The idea is to only serve AVIF and WebP to browsers that support it.

1. Converting images to another format. For example, using the cross-platform utility imagemagick or service avif.io.

   $ magick convert image.jpg image.avif

   We perform a similar conversion for each pair of formats (jpg/avif, jpg/webp).

2. Instead of the traditional <img>write the tag <picture>, which allows multiple URLs to be listed for the same image. First we specify AVIF as the smallest format. Normal browsers will load it and Edge and all others that don’t support AVIFwill go further down the list: WebP and JPEG.

   <picture>
   <source srcset="https://habr.com/document.avif" type="image/avif">
   <source srcset="https://habr.com/document.webp" type="image/webp">
   <img src="https://habr.com/document.jpeg" alt="Скриншот" width="375" height="153" class="border">
   </picture>

   All options are indicated in the tag <source>and only the last one in the tag <img>.

3. Known optimization for faster page loading – tweak HTTP/2 Server Push on the server so that resources are loaded immediately, without waiting for their request after HTML parsing. In our case, for the elements <picture> it is not optimal to load everything to the client. It is better to recognize the browser user agent and push the image of the appropriate format in advance. This field is specially designed for this. Accept in user-agent. For example, the latest Firefox sends Accept of this kind:

   Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,/;q=0.8

▍ Storing application state in URL

If you have some kind of web application and you want to enable people to work in it

without authorization

on the site and storing data on the server, then there is an interesting hack for this:

save state in url

in the client browser.

This allows the user to “save” and later continue working (editing data). It is also convenient to share the results of work with colleagues simply by sending the URL.

The application state is a JSON file, it is encoded into a string, then compressed and translated into Base64 bytes, which are added to the URL after the characters `/g/a#`. For example, in this way:

наш_сайт.com/g/a#N4IgzgpgTglghgGxgLwnARgiAxA9lAWxAC5QA7X...

Pseudocode to implement such functionality:

const stateString = JSON.stringify(appState); // appState представляет собой объект JSON
const compressed = compress(stateString);
const encoded = Base64.encode(compressed);
// Пушим закодированную строку в url
// ...Позже при загрузке страницы или undo/redo читаем url и
// делаем следующее
const decoded = Base64.decode(encoded); // в той же кодировке, что и выше, но считывается из url
const uncompressed = uncompress(decoded);
const newState = JSON.parse(uncompressed);
// Загружаем приложение с новым состоянием newState

The URL is updated after each change in the state of the application, so you can copy the current state with a simple copy-paste from the browser’s address bar. Examples of How It Works: Interactive Flowchart Editors

knot end

And

mermaid live

:

There are several options how to implement the compression/decompression functions, for example, lz-stirng or pako.

As a bonus, we get “free” undo / redo functionality from the browser stack for our web application, as well as automatic injection into any third-party web page that supports embeds.

You can also see how Yahoo! Finance stores the user’s settings in the URL:

:root {
  --radius: 20vmin;
}

.dot {
  --angle: 30deg;
  translate: /* Translation on X-axis */
             calc(cos(var(--angle)) * var(--radius))

             /* Translation on Y-axis */
             calc(sin(var(--angle)) * var(--radius) * -1)
  ;
}