Join our newsletter for more DECODE content!

No thanks
šŸ“ All
šŸ“” Discover
šŸ”„ Hot
02/20/2023

Svelte Stores

Svelte stores are an important feature of the Svelte framework that enables the sharing of state between components. In this tutorial, we will learn how to use Svelte stores.

Before we begin, let's define what a store is in Svelte. A store is an object that holds a piece of reactive state. When the state in the store changes, any component that has subscribed to the store will be automatically updated.

There are two types of stores in Svelte: writable and readable stores. A writable store allows you to update the value of the store, while a readable store only allows you to read the value of the store.

Now, let's dive into the steps for using Svelte stores:

Import the stores module

The first step is to import the stores module from Svelte.

Read

Comments


Be the first to comment!

02/19/2023

Svelte Import Non-Svelte Scripts

Importing non-Svelte libraries into a Svelte project can be confusing. Here's a guide on how to import both NPM and non-NPM JavaScript modules into your Svelte project.

Svelte uses ES6 modules for importing all modules, if the package you are trying to use does not have an ES6 version of it you will not be able to use the library. Luckily most packages have a workaround that is custom to the specific package Here's how to import the modules into svelte:

Pure ES6 Module

Here's the basic importing of an ES6 NPM package.

import { function } from "package"

Non ES6 with a Seperate ES6 File

If the package you are using has an ES6 file in it, use /package in place of /node_modules/package to select which file you want to import.

Read

Comments


Be the first to comment!

02/19/2023

Node JS Reading Files

In Node.js, there are various ways to read files from the file system. In this tutorial, we will explore the most commonly used methods to read files in Node.js.

Reading files synchronously

The simplest way to read a file in Node.js is to use the fs.readFileSync method. This method reads the entire file synchronously and returns the contents of the file as a Buffer or a string.

Here's an example of how to use it:

const fs = require('fs');
const filePath = './file.txt';
const contents = fs.readFileSync(filePath, 'utf8');
console.log(contents);
Read

Comments


Be the first to comment!

02/18/2023

Svelte: Building for Deno

Svelte is a popular web application framework that allows you to build reactive and dynamic web applications using JavaScript. Deno, on the other hand, is a secure runtime for JavaScript and TypeScript that aims to provide a modern and secure environment for running server-side applications. In this tutorial, we will walk through the steps to build a Svelte application to run on Deno.

Deno Svelte

To build Svelte for Deno we will be using the package svelte-adapter-deno, it will build Svelte for Deno just like @sveltejs/adapter-node. The step are simular for both. Once the package is installed, copy the command below, you will need to edit the svelte.config.js to build the site correctly.

Install

npm i -D svelte-adapter-deno

Configure

To configure your project, import the adapter from svelte-adapter-deno and replace the default adapter configuration with the code below.

Read

Comments


Be the first to comment!

02/16/2023

JWT Authentication for Node.JS

Here's a step-by-step tutorial on how to create a JSON Web Token (JWT) middleware for Express in Node.js.

Step 1: Install Dependencies

To create a JWT middleware, we'll need to install two npm packages: jsonwebtoken and express. You can install them by running the following command in your terminal:

npm install jsonwebtoken express

Step 2: Create a JWT Utility Function

We'll start by creating a utility function that will handle the creation and verification of JWTs. This function will be used by the middleware to sign and verify tokens.

Read

Comments


Be the first to comment!

02/16/2023

Svelte Static Site Generation

Svelte is a great platform to create any type of site. If you want to create a site and host it on Github Pages, you can use Svelte to generate a static site and upload the files to the desired GitHub repository. Here's how!

Adapter

Install the static adapter with the command below:

npm i -D @sveltejs/adapter-static

Configuration

Replace your svetle.config.js file with the contents below:

import adapter from '@sveltejs/adapter-static';
Read

Comments


Be the first to comment!

02/15/2023

Deno JS: Oak Routing

Oak is a middleware framework for Deno that provides a simple and modular way to handle HTTP requests and responses. Here is how to setup basic routing.

In Oak, URL routing is handled by creating a router and defining routes using the Router class. Here's an example:

import { Application, Router } from "https://deno.land/x/oak/mod.ts";

const router = new Router();
router
    .get("/", (context) => {
        context.response.body = "Hello, world!";
    })
    .get("/users", (context) => {
Read

Comments


Be the first to comment!

02/14/2023

Deno JS: First Website

Deno is a runtime for JavaScript and TypeScript that allows developers to build web applications with the use of its built-in module system. One of the most popular web frameworks for Deno is Oak, which provides a simple and intuitive API for building web applications. In this tutorial, we will learn how to set up a basic Deno website using the Oak package.

First, you will need to initialize a new Deno project in a folder you have created for your project. Type the following command to initialize a new Deno project:

deno init
Output
āœ… Project initialized

Run these commands to get started
Read

Comments


Be the first to comment!

02/13/2023

Installing Deno JS

Deno is a JavaScript and TypeScript runtime environment that was created as an alternative to Node.js. It is designed to be simple, secure, and fast, with a focus on making it easier for developers to build scalable and efficient applications.

Deno was created by Ryan Dahl, the same person who created Node.js, and it addresses some of the issues he saw with Node.js. One of the main differences between the two is that Deno does not have a centralized package manager like npm, which can lead to security and compatibility issues. Instead, Deno includes many built-in modules, and developers can use external modules by importing them directly from their source code on the web.

Deno also includes security features that allow it to run scripts in a sandboxed environment, which helps to prevent malicious scripts from accessing sensitive parts of the system. Additionally, Deno supports modern features such as Web Assembly and asynchronous programming out of the box, making it easier to create fast and efficient applications.

Overall, Deno provides a modern and efficient way to build JavaScript and TypeScript applications, with a focus on security and simplicity.

Installation

Using Shell (macOS and Linux):
Read

Comments


Be the first to comment!

02/12/2023

PocketBase list all records in a collection

When using the getList() method to fetch queries from your collection, you can run into issues where as your database grows, you are no longer collecting all the records. To fix this you can use the getFullList method.

getFullList

getFullList is a method of the collection used to fetch the entire contents of a collection. It returns when all the records are fetched. It takes two arguments, the first is the batch size and the second one is the sort/filter object. The batch size is the number of records to fetch at a time. Regardless of the batch size, all the records will be fetched, but the batch size does affect how long the function takes to return all of the records. If your records contain a lot of data in each one, I would recommend setting the batch size lower so as to not error out each request, but if your records are fairly small, it is best to set the batch size higher. Below is an example of using the getFullList method to fetch records out of a collection name posts.

const results = await pb.collection('posts').getFullList(200, {
            filter: `author = "${user.id}"`
        });

The output will be different from the .getList method, which returns an object with the records being stored in .items. Instead, it will return an array with all of your records.

Read

Comments


Be the first to comment!

02/12/2023

Installing Node.js on DigitalOcean using NVM (Node Version Manager)

Node.js is a popular, open-source JavaScript runtime environment that is used for building scalable, high-performance applications. In this tutorial, you'll learn how to install Node.js on a DigitalOcean droplet using NVM (Node Version Manager), a popular tool for managing multiple Node.js versions on a single machine.

Before you begin, you'll need to have the following:

  • A DigitalOcean account and a droplet with a fresh installation of Ubuntu.
  • Access to a terminal on your droplet, either through the DigitalOcean control panel or by using an SSH client.

Installing Node.JS

To install NVM on your droplet, you'll need to run a series of commands in your terminal. Start by logging into your droplet using the terminal or an SSH client.

Download NVM via curl and install it.

Read

Comments


Be the first to comment!

02/10/2023

CSS Marquee Replacement

The HTML marquee tag, which was used to create scrolling text or images on a web page, has been deprecated and is no longer supported in modern web development. This means that while it may still work in some older web browsers, it is not considered a valid HTML element in current web development standards and should not be used in new or updated websites.

There are several reasons why the <marquee> tag was deprecated:

  1. Accessibility: Scrolling text or images can be distracting for users and can make it difficult for users with visual impairments to read the content on a page.

  2. User experience: The scrolling effect can also be distracting and annoying for users, and can make it difficult to read the content.

  3. Compatibility: The <marquee> tag is not well supported across different web browsers, and can cause inconsistencies in the way the page is displayed.

The main reason however was that HTML was never meant to act as a styling language, it is a markup language.

Read

Comments


Be the first to comment!

02/09/2023

PocketBase JS API

Unlock the full potential of PocketBase's JS SDK with this comprehensive guide covering everything you need to know to avoid confusion.

pocketbase

Prerequisite

Install

Browser (manuel)

You can use any NPM CDN to load the SDK or you can download it and host it yourself.

<script src="https://unpkg.com/pocketbase/dist/pocketbase.umd.js"</script>
Read

Comments


Be the first to comment!

02/09/2023

PocketBase Installation on Digital Ocean

PocketBase is a fast growing beginner friendly database built in GO.

Installation

PocketBase is a single file database that includes an admin GUI and is ready out of the box. Simply use curl to download it to your server.

curl https://github.com/pocketbase/pocketbase/releases/download/v0.12.2/pocketbase_0.12.2_linux_amd64.zip

Configuration

PocketBase supports flags for changing the host and the port to run PocketBase use this command, adding the flags is optional.

./pocketbase serve ā€”http=127.0.0.1 ā€”port=8080
Read

Comments


Be the first to comment!

02/08/2023

Svelte Full Text Search - flexsearch

"flexsearch" is a JavaScript library for fast, flexible, and robust search and indexing. It provides a high-performance search engine that is optimized for search and indexing, and can be used in both client-side and server-side applications. It supports a range of features including full-text search, fuzzy search, query highlighting, and auto-suggestions. Here's how to implement it into a Svelte project.

Install

npm install flexsearch

Importing into your project

flexsearch has three types of indexes:

  • Index is a flat high performance index that stores id-content-pairs.
  • Worker / WorkerIndex is a flat index that stores id-content pairs but runs in the background as a dedicated worker thread.
  • Document is a multi-field index that can store complex JSON documents (could also exist of worker indexes).
Read

Comments


Be the first to comment!