Join our newsletter for more DECODE content!

No thanks
📝 All
📡 Discover
🔥 Hot
01/09/2023

Dynamically loading Google Fonts

Google Fonts is a great tool for web developers, it allows you to load in almost any font on to you website and use it with only a few lines of code. However, sometimes you need to load in a font after the page loads. Here is a quick way to do it.

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
Read

Comments


Be the first to comment!

01/08/2023

Kod.js

Kod.js is a code preview image generator that runs both in the browser and on Node JS. It is built using highlight.js and uses it for the themes and syntax highlighting.

Kod.js client or server generated code captures

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
Read

Comments


Be the first to comment!

01/07/2023

Alternative to Eval in JS

The Eval function is super useful but extremely dangerous to use here's a simple alternative to in.

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:

Read

Comments


Be the first to comment!

01/05/2023

Remove Duplicate Items in an Array

Eliminating duplicate items from an array can be challenging, but this simple one-liner makes it easy to do so in any situation.

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)];
Read

Comments


Be the first to comment!

01/04/2023

Generating Images Based on a URL Slug

Welcome to our tutorial on dynamically generating images using Node.js! In this post, we'll be exploring a technique for creating images on the fly based on the URL slug of a webpage. This can be a powerful tool for creating personalized, dynamic content for your website or application. Whether you're looking to create unique product images, customized social media graphics, or any other type of dynamic image, this tutorial will show you how to get started with Node.js. So let's dive in!

Prerequisites

Hero

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:

Read

Comments


Be the first to comment!

01/03/2023

Generating Random Colors on a Range

If you want to add some visual interest to your website, consider incorporating random colors. While using the Math.random() function to generate colors can be a quick and easy option, it may result in some less-than-appealing hues. An alternative approach is to create a set of random colors that all conform to a specific color profile. Here's a simple method for doing so.

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]})`;
Read

Comments


Be the first to comment!

01/02/2023

Using Canvas in Node JS

Have you ever wanted to generate dynamic images on the server side? With Node Canvas, it's easy! Node Canvas is a module that allows you to use the canvas element on the backend, making it simple to create images based on user input.

Hero Image

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

Read

Comments


Be the first to comment!

01/01/2023

Seeded Random Number Generator in JS

Random numbers are an essential tool for developers, whether it's for generating random colors for page elements, creating dynamic content on canvas, or any other purpose. However, one issue with the default Math.random() function is you can not repeat the results. This can be a problem if you want to generate randomness but still need some control over the output.

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 () {
Read

Comments


Be the first to comment!

12/31/2022

Installing Nginx on Ubuntu

NGINX (pronounced "engine x") is a free, open-source, high-performance HTTP server and reverse proxy. It is known for its high performance and low resource consumption, making it a popular choice for web servers and microservices architectures. In this article, we will go over the steps to install NGINX on an Ubuntu machine.

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:

Read

Comments


Be the first to comment!

12/30/2022

Lazy Loading Images

Lazy loading is a technique that defers the loading of images until they are needed, rather than loading them all at once when the page first loads. This can help improve the performance and user experience of a webpage, particularly on sites with a large number of images.

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:

Read

Comments


Be the first to comment!

12/29/2022

Basics of SEO in HTML

Search engine optimization (SEO) is the process of improving the visibility and ranking of a website in search engines like Google. It involves making changes to the website's content and structure to make it more attractive to search engines and easier for users to navigate.

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:

Image of a keychain with the word SEO on it

  • 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>

Read

Comments


Be the first to comment!

12/27/2022

Setting up Node.JS for production

Node.js is a popular JavaScript runtime that allows developers to build server-side applications with JavaScript. PM2 is a process manager for Node.js applications that helps to keep your applications running smoothly and automatically restart them in the event of any failures. Here's a guide on how to set up Node.js with PM2 and Let's Encrypt:

Node JS Logo

Overview

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

Prerequisites

Read

Comments


Be the first to comment!

12/27/2022

Making sticky elements in HTML and CSS.

Sticky elements are a useful feature in modern web design, as they allow certain elements on a webpage to remain visible even when the user scrolls. This can be useful for elements such as the navigation bar or a call-to-action button, as it ensures that they are always accessible to the user.

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:

Read

Comments


Be the first to comment!

12/24/2022

Enabling the Use of the Tab Character in a HTML textarea Element with JavaScript

How to enable the use of the tab character in a HTML textarea element using JavaScript. It describes the process of adding an event listener to the textarea element that listens for the keydown event and checking the keyCode property of the event object to determine if the tab key has been pressed. If the tab key has been pressed, the default behavior of the tab key is prevented and a tab character is inserted into the textarea element using the insertText function. An example of the code required to implement this functionality is also provided.

A picture of the keyboard key tab

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.

Read

Comments


Be the first to comment!