Web development notes

Tools/services

REST vs gRPC

Resources

HTML

CSS

JavaScript

How-to

How to call REST APIs

GET calls

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const response = await fetch('https://jsonplaceholder.typicode.com/posts/7')
.then(response => response.json());
const response = await fetch('https://jsonplaceholder.typicode.com/posts/7') .then(response => response.json());
const response = await fetch('https://jsonplaceholder.typicode.com/posts/7')
    .then(response => response.json());

POST calls

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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());
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());
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());

Rails

Rails status codes

The :status Option

Ensure required environment variables are set when booting up Rails

Create an initializer under config/initializers like so:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
if ENV['API_KEY'].blank?
raise "Missing API_KEY"
end
if ENV['API_KEY'].blank? raise "Missing API_KEY" end
if ENV['API_KEY'].blank?
  raise "Missing API_KEY"
end

Source: https://boringrails.com/tips/ensure-rails-env-vars

Run rails over SSL locally

SSL/TLS: Convert .pem files to .crt and .key

Context: I needed to run a Ruby on Rails server in HTTPS mode and needed a .crt and a .key files as shown in this tutorial, but the Let’s Encrypt certbot tool generates .pem files. So, my questions were, are these two formats equivalent? How can I convert these .pem files? I’ll show you how, but first, a bit more context.

I’m running Apache2 on my Ubuntu server. I used the certboot program to generate my certificate (I followed the Certbot Instructions).

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
root@localhost:~# ls -1 /etc/letsencrypt/live/mydomain.com/
cert.pem
chain.pem
fullchain.pem
privkey.pem
README
root@localhost:~# ls -1 /etc/letsencrypt/live/mydomain.com/ cert.pem chain.pem fullchain.pem privkey.pem README
root@localhost:~# ls -1 /etc/letsencrypt/live/mydomain.com/
cert.pem
chain.pem
fullchain.pem
privkey.pem
README

Copy the private key and the cert to your rails application with new names:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
cp /etc/letsencrypt/live/mydomain.com/privkey.pem /path/to/rails-app/certs/private.key
cp /etc/letsencrypt/live/mydomain.com/cert.pem /path/to/rails-app/certs/cert.crt
cp /etc/letsencrypt/live/mydomain.com/privkey.pem /path/to/rails-app/certs/private.key cp /etc/letsencrypt/live/mydomain.com/cert.pem /path/to/rails-app/certs/cert.crt
cp /etc/letsencrypt/live/mydomain.com/privkey.pem /path/to/rails-app/certs/private.key
cp /etc/letsencrypt/live/mydomain.com/cert.pem /path/to/rails-app/certs/cert.crt

This is my configuration in Rails (config/puma.rb):

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
ssl_bind '0.0.0.0', 3001, {
key: Rails.root.join('certs/private.key'),
cert: Rails.root.join('certs/cert.crt'),
verify_mode: 'none'
}
ssl_bind '0.0.0.0', 3001, { key: Rails.root.join('certs/private.key'), cert: Rails.root.join('certs/cert.crt'), verify_mode: 'none' }
ssl_bind '0.0.0.0', 3001, {
  key: Rails.root.join('certs/private.key'),
  cert: Rails.root.join('certs/cert.crt'),
  verify_mode: 'none'
}

Related: https://stackoverflow.com/a/991772/526189

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
navigator.clipboard.writeText("text").then(() => {
console.log("Copied text to the clipboard");
}).catch((err) => {
console.error("Failed to copy text to the clipboard: " + err);
});
navigator.clipboard.writeText("text").then(() => { console.log("Copied text to the clipboard"); }).catch((err) => { console.error("Failed to copy text to the clipboard: " + err); });
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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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");
});
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"); });
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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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);
});
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); });
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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
sudo chown -R www-data:www-data /var/www/html/
sudo chown -R www-data:www-data /var/www/html/
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: