DEV Community: API crud

Free Icons for your reactjs and web applications

API crud — Thu, 28 Dec 2023 14:39:39 +0000

In this post, I'll share some of the best free icon libraries that can be incredibly useful for your JavaScript projects. Whether you're working on a web app, mobile app, or desktop application, these icon libraries offer a wide range of options to enhance your UI/UX design.

1. Font Awesome

A popular choice with a vast collection of icons suitable for various applications.

2. Bootstrap Icons

Over 1,000 SVG-based icons designed for Bootstrap components.

3. React Icons

Super huge icons libraries. In my view, it takes up too much space but still useful.

4. Radix-UI

A crisp set of 15×15 icons

5. Ionicons

High-quality icons for web, iOS, Android, and desktop apps, supporting SVG and web fonts.

6. css.gg

Open-source CSS, SVG and Figma UI Icons Available in SVG Sprite, styled-components, NPM & API. More than 700 UI icons entirely written in CSS, fast rendering and easy to scale.

7. Heroicons

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.

Almost Everything I Need To Know About Arrays In Javascript Using Crypto As Examples

API crud — Fri, 08 Dec 2023 14:50:28 +0000

Arrays in JavaScript are a way to store multiple values in a single variable. They are incredibly useful for handling lists or collections of data. In this tutorial, we'll explore arrays using examples related to blockchain and cryptocurrencies.

Creating an Array

To create an array, you can use square brackets []. Each item in the array is separated by a comma.

let cryptocurrencies = ["Bitcoin", "Ethereum", "Cardano"];
console.log(cryptocurrencies); // Outputs: ["Bitcoin", "Ethereum", "Cardano"]
// or let cryptocurrencies = new Array ("Bitcoin", "Ethereum", "Cardano");

Array Type Checking

To check if a variable is an array

console.log(Array.isArray(cryptocurrencies)); // true

Length

The length property returns the number of elements in an array.

console.log(cryptocurrencies.length); // 3

Accessing Array Elements

You can access an element in an array by referring to its index number. Array indexes start from 0.

console.log(cryptocurrencies[0]); // Outputs: Bitcoin

indexOf

Finds the index of an element in the array.

let index = cryptocurrencies.indexOf("Ethereum");
console.log(index); // 1

Modifying an Array

You can modify an existing array by accessing an index and assigning a new value.

cryptocurrencies[2] = "Solana";
console.log(cryptocurrencies); // Outputs: ["Bitcoin", "Ethereum", "Solana"]

Adding Elements to an Array

JavaScript arrays have various methods to add new elements. push() adds an element at the end of the array.

cryptocurrencies.push("Litecoin");
console.log(cryptocurrencies); // Outputs: ["Bitcoin", "Ethereum", "Solana", "Litecoin"]

unshift() adds an element at the start of the array

cryptocurrencies.unshift("Cardano");
console.log(cryptocurrencies); // ["Cardano", "Bitcoin", "Ethereum", "Solana", "Litecoin"]

Removing Elements from an Array

The pop() method removes the last element from an array.

let cryptocurrencies = ["Bitcoin", "Ethereum", "Cardano", "Solana"];
cryptocurrencies.pop();
console.log(cryptocurrencies); // Outputs: ["Bitcoin", "Ethereum", "Cardano"]

shift() Removes the first element from an array.

cryptocurrencies.shift(); // Removes "Bitcoin"
// Outputs: ["Ethereum", "Cardano"]

Creating new array from another

slice() Returns a new array containing a portion of the original array.

let cryptocurrencies = ["Bitcoin", "Ethereum", "Cardano", "Solana"];
console.log(cryptocurrencies.slice(0, 2));
// Array["Bitcoin", "Ethereum"]
console.log(cryptocurrencies.slice(1, 3));
// Expected output: Array["Ethereum", "Cardano"]

Changing Contents Of An Array

splice() method of Array instances changes the contents of an array by removing or replacing existing elements and/or adding new elements in place

let cryptocurrencies = ["Bitcoin", "Ethereum", "Cardano", "Solana"];
// Inserts at index 1
cryptocurrencies.splice(1, 0, "Binance");
console.log(cryptocurrencies)
// Array["Bitcoin", "Binance", "Ethereum", "Cardano", "Solana"]
// Replaces 1 element at index 4
cryptocurrencies.splice(4, 1, "Dogecoin");
console.log(cryptocurrencies)
// Expected output: Array["Bitcoin", "Binance", "Ethereum", "Cardano", "Dogecoin"]

Iterating Over Arrays

You can loop over an array using a for loop or forEach method.

Example with for loop:

let cryptocurrencies = ["Bitcoin", "Ethereum", "Cardano", "Solana"];
for(let i = 0; i < cryptocurrencies.length; i++) {
    console.log(cryptocurrencies[i]);
    // Expected outputs in order: "Bitcoin", "Ethereum", "Cardano", "Solana"
}

Example with forEach:

cryptocurrencies.forEach(crypto => {
    console.log(crypto);
    // Expected outputs in order: "Bitcoin", "Ethereum", "Cardano", "Solana"
});

Example with map:

let lengths = cryptocurrencies.map(function(item) {
    return item.length;
});
console.log(lengths); // [7, 8, 7, 6]

filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(function(number) {
    return number % 2 === 0;
});
console.log(evenNumbers); // [2, 4, 6]

reduce()

The reduce() method executes a reducer function on each element of the array, resulting in a single output value.

Syntax

let result = array.reduce(function(accumulator, currentValue, currentIndex, array) {
    // return result from performing operation
}, initialValue);

*accumulator: Accumulates the callback's return values; it is the accumulated value previously returned in the last invocation of the callback, or initialValue, if supplied.
*currentValue: The current element being processed in the array.
*currentIndex (optional): The index of the current element being processed in the array.
*array (optional): The array reduce was called upon.
*initialValue (optional): A value to use as the first argument to the first call of the callback.

The sum of all numbers in an array:

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue;
}, 0);

console.log(sum); // 15

Spread Operator

Combine two arrays

let cryptocurrencies = ["Bitcoin", "Ethereum", "Cardano", "Solana"];
let numbers = [1, 2, 3, 4, 5, 6]
let combined = [...cryptocurrencies, ...numbers];
console.log(combined); // ["Bitcoin", "Ethereum", "Cardano", "Solana", 1, 2, 3, 4, 5, 6]

Converting Arrays To Strings Using `join()`

let currencyString = cryptocurrencies.join(", ");
console.log(currencyString); // "Bitcoin", "Ethereum", "Cardano", "Solana"

Practical Exercise

Create an array named blockchains with elements "Ethereum", "Binance Smart Chain", and "Cardano".
Add "Polkadot" to the end of the blockchains array.
Replace "Binance Smart Chain" with "Solana".
Use a loop to print each element of the blockchains array.

Arrays are a fundamental part of JavaScript and mastering them is crucial for any aspiring developer. So remember to practise.

Did I miss out any knowledge about Arrays? Let me know in the comments. Thanks.

Basic Javascript Knowledge: When to use var, let or const?

API crud — Tue, 05 Dec 2023 15:44:53 +0000

In JavaScript, variables are essential for storing data. The keywords var, let, and const provide different ways to declare these variables.

`var`

Scope: Function scope.
Hoisting: Variables are hoisted.
Re-assignment: Allowed.
Re-declaration: Allowed.

  function testVar() {
    var x = 1;
    if (true) {
        var x = 2; // same variable!
        console.log(x); // 2
    }
    console.log(x); // 2
  }
  testVar();

`let`

Scope: Block scope.
Hoisting: Hoisted but not initialized.
Re-assignment: Allowed.
Re-declaration: Not allowed.

  function testLet() {
    let y = 1;
    console.log(y); // 1
    if (true) {
        let y = 2; // different variable
        console.log(y); // 2
    }
    y = 5
    console.log(y); // 5
  }
  testLet();

`const`

Scope: Block scope.
Hoisting: Hoisted but not initialized.
Re-assignment: Not allowed.
Re-declaration: Not allowed.
Initialization: Required during declaration.

  function testConst() {
    const z = 1;
    // z = 2; // Error: Uncomment this see error
    console.log(z);
  }
  testConst();

Exercise: Try This To Practise Using Variables

Var Scope: Use var in a loop, then access it outside.
Let Block Scope: Try let in a loop and access it outside the block.
Const Immutability: Attempt re-assigning a const variable.

Good luck!

Using Custom Fonts Vercel Open Graph (OG) Image Generation

API crud — Fri, 01 Dec 2023 01:39:57 +0000

BTW: We created Free Beautiful Open Graph Static Images And Source Codes In Next.js which you can download and learn more from the codes.

This code snippet is for creating a dynamic Open Graph (OG) image service using Vercel's Edge Functions, which are part of Vercel's serverless platform. The code generates images using custom fonts, which can be ideal for blog posts, article previews, or social media shares. Here is the code:

import { ImageResponse } from "@vercel/og";

export const runtime = "edge";

const bgColor = "#F0F8FF";
const titleFontSize = "80px";
const titleTextTransform = "capitalize";
const titleLineHeight = "1em";
const titleLetterSpacing = "normal";
const subtitleTextColor = "#505050";
const subtitleFontSize = "30px";

export async function GET(req) {
  try {
    const { searchParams } = new URL(req.url);

    const font1 = await fetch(
      new URL("/public/Inter-Bold.ttf", import.meta.url)
    );

    if (!font1.ok) {
      throw new Error("Failed to fetch the font file");
    }

    const fontData1 = await font1.arrayBuffer();

    // You can use another font if you subscribe to vercel Pro plan with code size limit of 2MB
    // const font2 = await fetch(
    //   new URL("/public/NotoSans-Regular.ttf", import.meta.url)
    // );

    // if (!font2.ok) {
    //   throw new Error("Failed to fetch the font file");
    // }

    // const fontData2 = await font2.arrayBuffer();

    // dynamic params| ?title=your%20title | %20 = space in url, %0D next line
    // Example: ?title=number%20one%20remote%0Djob%20app
    const title = searchParams.has("title")
      ? searchParams.get("title")
      : "My default title";
    // Example: &subtitle=https://www.xiohoo.com
    const subtitle = searchParams.has("subtitle")
      ? searchParams.get("subtitle")
      : "My default subtitle";

    return new ImageResponse(
      (
        <div
          style={{
            justifyContent: "center",
            alignItems: "center",
            height: "100%",
            width: "100%",
            display: "flex",
            backgroundColor: bgColor,
          }}
        >
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
              textAlign: "center",
            }}
          >
            <div
              style={{
                alignItems: "center",
                justifyContent: "center",
                textAlign: "center",
                fontSize: titleFontSize,
                textTransform: titleTextTransform,
                lineHeight: titleLineHeight,
                letterSpacing: titleLetterSpacing,
                fontFamily: "Inyer",
              }}
            >
              {title}
            </div>
            <div
              style={{
                alignItems: "center",
                justifyContent: "center",
                textAlign: "center",
                fontSize: subtitleFontSize,
                color: subtitleTextColor,
                marginTop: "32px",
                fontFamily: "Inter",
              }}
            >
              {subtitle}
            </div>
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 630,
        // Supported options: 'twemoji', 'blobmoji', 'noto', 'openmoji', 'fluent' and 'fluentFlat'
        emoji: "twemoji",
        fonts: [
          {
            name: "Inter",
            data: fontData1,
            style: "normal",
          },
          // {
          //   name: "Regular",
          //   data: fontData2,
          //   style: "normal",
          // },
        ],
      }
    );
  } catch (e) {
    console.log(`${e.message}`);
    return new Response(`Failed to generate the image`, {
      status: 500,
    });
  }
}

Font Loading
The script loads a custom font file (Inter-Bold.ttf) that's used in the image:

const font1 = await fetch(new URL("/public/Inter-Bold.ttf", import.meta.url));
const fontData1 = await font1.arrayBuffer();

There's a commented-out section for loading a second font.

// You can use another font if you subscribe to vercel Pro plan with code size limit of 2MB
// const font2 = await fetch(
//   new URL("/public/NotoSans-Regular.ttf", import.meta.url)
// );

// if (!font2.ok) {
//   throw new Error("Failed to fetch the font file");
// }

// const fontData2 = await font2.arrayBuffer();

If you want to use more fonts, you will likely need to subscribe to Vercel's paid plan. The paid plan comes with a edge code limit of 2MB, which will be enough for you to use 2 or 3 fonts.

Hope our code helps you to create nice social media images.

We created Free Beautiful Open Graph Static Images And Source Codes In Next.js which you can download and learn more from the codes.