Web development notes

Tools/services

REST vs gRPC

Resources

HTML

CSS

JavaScript

How-to

How to call REST APIs

GET calls

const response = await fetch('https://jsonplaceholder.typicode.com/posts/7')
    .then(response => response.json());

POST calls

const post = {...};
const response = await fetch('https://jsonplaceholder.typicode.com/posts/', {
    method: 'POST',
    body: JSON.stringify(post),
    headers: {'Content-Type': 'application/json'}
}).then(response => response.json());

HttpOnly cookies

HttpOnly cookies cannot be read using JavaScript.

Source: https://stackoverflow.com/q/8064318/526189

Enable ClipboardItem in Firefox

From version 87: this feature is behind the dom.events.asyncClipboard.clipboardItem preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Copy text to the clipboard using JavaScript

navigator.clipboard.writeText("text").then(() => {
    console.log("Copied text to the clipboard");
}).catch((err) => {
    console.error("Failed to copy text to the clipboard: " + err);
});

Copy a link to the clipboard

const url = 'https://example.com';
const html = '<a href="' + url + '">link text</a>';
const TYPE = "text/html";
const BLOB = new Blob([html], {type:TYPE});
navigator.clipboard.write([new ClipboardItem({[TYPE]: BLOB})]).then(() => {
    console.log("Copied URL to the clipboard: " + url);
}).catch((err) => {
    console.error("Failed to copy URL to the clipboard");
});

Copy multiple MIME types to the clipboard

navigator.clipboard.write([
    new ClipboardItem({
        'text/plain': new Blob(["plain text"],
            {type: 'text/plain'}
        ),
        'text/html': new Blob(
            ['<a href="' + url + '">' + hyper text + '</a>'],
            {type: 'text/html'},
        ),
    }),
]).then(() => {
    console.log("Copied content to the clipboard");
}).catch((err) => {
    console.error("Failed to copy content to the clipboard: " + err);
});

Source: A clipboard magic trick – how to use different MIME types with the Clipboard API

WordPress

Fix upload permissions

The WordPress directory should be owned by the www-data user.

sudo chown -R www-data:www-data /var/www/html/

Source: https://askubuntu.com/questions/574870/wordpress-cant-upload-files

Change the main content area

  1. Go to Appearance
  2. Customize active theme
  3. Styles
  4. Click on the page shown to the right
  5. On the top right, select the styles button
  6. Click on Layout
  7. Set values for CONTENT and WIDE

Video demonstration: https://youtu.be/_anhQGVFylQ


Posted

in

,

by

Tags: