Google Fonts are loaded in the head tag of your page using a link tag, this is typically done when the page loads. If you want to load in a font after you can still just insert a link tag using some javascript. Here's how:

function loadFont(fontName) {
    // First check if the element is in the page
    if (document.querySelector(`link[href="https://fonts.googleapis.com/css?family=${fontName.replace(/\s/g, "+")}"]`) == null) {
        // If not create a new link tag
        const link = document.createElement('link');
        // set the rel property to stylesheet
        link.rel = 'stylesheet';
        // Set the href to the google fonts URL with your custom font name

Basic Usage

Here's a basic example that generates an image with console.log("Hello World") in it.

Node JS

javascript
import fs from 'fs';
// Import the canvas module from NPM

When you think of a function you usually think of using it by its keyword like this:

function myFunction() {
    // code
}

However this isn't the only way to use it, function is also its own function Function to use it to evaluate code for you you can do something like this:

The Set object in JavaScript is a collection of unique values. It can be used to store and manipulate a collection of primitive values (such as strings or numbers) or object references. We can use this to remove all repeat values from an array by initializing the Set object with an array as an argument. This will create a Set object, the next step to convert it back to an array is to use the spread operator to spread the object into an array

Example

let array1 = [1,1,2,2,3,3,4,4];
let array2 = [...new Set(array1)];

Prerequisites

• Generating Random Colors on a Range
• Using Canvas in Node JS
• Seeded Random Number Generator in JS

Generating images based on a URL slug is useful to give your content a fresh look without having to manually create and upload images every time. In this tutorial, we will learn how to create a svelte endpoint that generates images like the one above.

This is how the endpoint will work once complete:

Code

function color(min, max, rng) {
    let c = [min, max, Math.floor(Math.random() * (max - min)) + min].sort(() =>
        Math.random() > 0.5 ? 1 : -1
    );
    return `rgb(${c[0]},${c[1]},${c[2]})`;

Node Canvas is a module that allows you to use the canvas element on the server side for generating dynamic images. You can see an example of this by going to the URL below and replacing test-image with any text to get a random image.

https://decode.sh/hero/Test%20Image

Installation

Seeded random numbers can be helpful if you want to create randomness but also need to control the output. Below is an example of a simple seeded random number generator that is a drop-in replacement for Math.random().

function random(seed) {
    var m = 2 ** 35 - 31
    var a = 185852
    var s = seed % m
    return function () {

Before we begin, make sure that your Ubuntu machine is up to date by running the following command:

sudo apt update && sudo apt upgrade

Install NGINX

To install NGINX, we can use the package manager apt. Run the following command:

To lazy load an image in HTML, you will need to use the loading attribute of the img element. The loading attribute has three possible values: lazy, eager, and auto.

lazy: This value tells the browser to only load the image when it is needed, such as when the image comes into view as the user scrolls down the page. This is the recommended value for lazy loading images.

eager: This value tells the browser to load the image immediately, regardless of whether or not it is needed. This is the opposite of lazy loading and should generally be avoided.

auto: This value tells the browser to use its own heuristics to decide whether or not to lazy load the image. This is the default value and is generally not recommended for lazy loading images.

To use the loading attribute to lazy load an image, you can simply add it to the img element like this:

One way to improve SEO is through the use of HTML (Hypertext Markup Language), the standard markup language for creating web pages. There are several HTML elements that can help improve a website's SEO, including:

• Title tags: The title tag is the main text that describes the content of a web page. It appears on the search engine results page (SERP) as the blue, clickable title of a search result. The title should be concise, relevant, and unique.
  • The title tag should be placed within the head element of the HTML document, like this:

    <head>
      <title>My Website | Home</title>
    </head>

Overview

• Install Node.JS
• Install and configure PM2
• Setting up Let's Encrypt

Prerequisites

• How to setup Nginx server blocks for multiple sites - Ubuntu

In order to make an element sticky, we can use the position property in CSS. Specifically, we can set the position to sticky to make the element "stick" to the viewport when the user scrolls past a certain point.

.sticky {
  position: sticky;
}

In addition to setting the position property, we can also use the top, left, right, and bottom properties to specify the distances from the corresponding edges of the viewport at which the element should become sticky. For example, to make an element sticky 20 pixels from the top of the viewport, we can use the following CSS:

The tab character, represented by the ASCII code 9, is a useful way to allow users to quickly navigate through a form or document. Unfortunately, the HTML textarea element does not support the use of the tab character by default. However, it is possible to enable the use of the tab character in a textarea element by using JavaScript.

To enable the use of the tab character in a textarea element, you will need to add an event listener to the textarea element that listens for the keydown event. This event is triggered whenever a key is pressed on the keyboard.

Inside the event listener, you can check if the tab key has been pressed by checking the keyCode property of the event object. If the tab key has been pressed, you can prevent the default behavior of the tab key (which is to move focus to the next element on the page) by calling the preventDefault method on the event object.

You can then insert a tab character into the textarea element by using the insertText function. This function takes the text to be inserted as an argument and inserts it at the current cursor position in the textarea element.