Tools/services

• HTTPie: API testing client.
• Postman: API testing client.
• JSONPlaceholder: Free fake API for testing and prototyping.
• DummyJSON: Get dummy/fake JSON data to use as placeholder in development.
• JSON to Go Struct: Generates Go structs from JSON documents.

REST vs gRPC

• gRPC vs REST: Understanding gRPC, OpenAPI and REST and when to use them in API design

Resources

HTML

• Structuring the web with HTML

CSS

• Learn to style HTML using CSS
• A Complete Guide to Flexbox
• How to use Flexbox to create a modern CSS card design layout

JavaScript

• JavaScript — Dynamic client-side scripting

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());

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:

if ENV['API_KEY'].blank?
  raise "Missing API_KEY"
end

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

Run rails over SSL locally

• Using Rails with SSL on Localhost
• Adding a self-signed certificate to the “trusted list”
• Adding a Self-Signed Certificate to the Trusted List

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).

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:

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):

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

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