Forem: LordCodex

Stellar Project Challenge

LordCodex — Mon, 19 Aug 2024 04:05:54 +0000

This is a submission for the Build Better on Stellar: Smart Contract Challenge : Create a Tutorial

What I Created

I created a simple platform with js-stellar-sdk where users can propose a project and vote with their stellar tokens

Demo

https://superb-torrone-c83f12.netlify.app

Code

Here is the repo link:
https://github.com/LordCodex164/Stellar-Voting-frontend/tree/master

Journey

My research process involved learning about decentralized applications and how blockchain technology can provide transparent voting systems. I focused on the Stellar network due to its speed and low transaction costs, which are essential for a voting application. The js-stellar-sdk was particularly appealing as it simplifies interactions with the Stellar blockchain.

Experience with the Ecosystem
My experience with the Stellar ecosystem has been enriching. The community is supportive, and the documentation provided by Stellar has been incredibly helpful. Engaging with other developers and users has opened my eyes to the potential of blockchain beyond just cryptocurrencies.

Motivation Behind My Submission

The motivation behind this project came from a desire to empower communities by providing a platform where users can propose projects and vote using Stellar tokens. I believe that decentralized voting can enhance transparency and trust in decision-making processes

What I Am Particularly Proud Of

I am particularly proud of the app's user-friendly interface, which allows users to easily propose and vote on projects

Future Aspirations

Moving forward, I hope to expand this project by incorporating more features, such as project tracking and reward systems for participants. I also aim to explore further integrations with other blockchain technologies, enhancing the app's functionality and reach.

adenirandaniel565@gmail.com

Next.js 15 RC Unveiled: A Close Look at the Framework's Latest Features

LordCodex — Sun, 26 May 2024 13:39:40 +0000

Overview

Next.js, a react framework recently released its RC(release candidate) 15th version; this release candidate version introduces new features that will change how you build high-quality and performance web applications.

These new features touch on:

As a developer, it is important to understand the key features, and how they can enhance your web development projects. In this article, I will be explaining what is new in Next15 so that you can start implementing them.

Please note that these Nextjs features are still being tested rigorously and extensively before its final release.

Prerequisite

A Working Knowledge of React

Next.js

Next.js also known as next is a framework that is built on top of React and offers additional features like Server-Side Rendering (SSR), allowing you to create high-quality and performant web applications with the power of React components. It also offers powerful features like Built-in Optimizations, Dynamic HTML Streaming, React Server Components, and many more!

A Sneak Peek at the Latest Features

React:

Since Nextjs was built on top of the React canary channel, developers had to use and give feedback on the React APIs before the release of React 19 RC. The Release played a huge part in the Next Support for the React 19 Rc version, including new features for both the client and server-like actions.

React Compiler:

With this newly built-in feature, developers can now save the time of manually memoizing values with the use of useCallback and useMemo to solve re-rendering issues.

Also with Nextjs support for the react compiler, developers can now focus on creating and maintaining code that is easier to maintain, and less error-prone.

To use the compiler, it is done by just installing babel-plugin-react-compiler with the command as shown below.

npm install babel-plugin-react-compiler
Then, add the experimental.reactCompiler option in your next.config.js file:


 javascript
const nextConfig = {

experimental: {

reactCompiler: true,

},

};

module.exports = nextConfig;

However, If you are looking to configure your compiler further to run in “opt-in” mode, add this option as shown below:


 javascript
const nextConfig = {

experimental: {

reactCompiler: {

compilationMode: 'annotation',

},

},

};

module.exports = nextConfig;

With this, you now have your compiler set up and you don't have to worry about re-rendering issues because the compiler is handling that for you.

Hydration error improvements

A Hydration error is a common error in next that stems from the mismatch of the server and client’s component states and generated markup. However, Next15 made massive improvements to the hydration errors, by providing the source code of the error and also ways to solve the error. isn’t that great?

It has now greatly improved from what we have above 👆to this 👇:

Caching Updates

Before now, next js used to have opinionated default caching defaults. These defaults were implemented to provide a performant approach for the next application; However, this approach didn't suit the needs of projects like Partial Prerendering (PPR) and third-party libraries like fetch. However, after careful consideration and revaluation of the caching heuristics, the defaulting default is now uncached by default in the Next15 version.

It is important to note the team is still making improvements to caching in Next in the coming months

Fetch Requests are no longer cached by default

Nextjs allows us to configure how our server-side requests interact with the framework’s persistent HTTP cache. However, we are provided with options like the force-cache and no-store method, which determine the behavior of the resource fetched from the server that gets updated in the cache or not:


 javascript
fetch('https://...', { cache: 'force-cache' | 'no-store' });

Force-cache: This option defaults in next14; it involves fetching the resource from the cache (if it exists) or a remote server and updating the cache.

No-store: When a request is made, the web fetch API retrieves the resource from a remote server based on that request and does not update the cache. This option now comes by default in Next 15.

Get Route Handlers

In Next 15, get route handlers will no longer be cached as well. So, you only decide to opt into caching by using a static route config option such as export dynamic = ‘force

Client Route Cache

Also, on the client route updates, it will also not be cached by default. Therefore, as you navigate back and forth in your app, the active page components will continue to get the latest data from the server and not from the cache. This is because the staleTimes flag that allows custom configuration of the router cache is now 0 for page segments as shown in the config below.


 javascript

//next.config.js file

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 0,
    },
  },
};

module.exports = nextConfig;

Incremental adoption of Partial Prerendering

Partial prerendering is a way of storing some static portions of the pages of a website in a cache with dynamic holes streamed in so that when the user requests for it, it gets served to the user at a faster rate. The dynamic holes in question can be the latest news or personal information that needs to be updated, meaning they still have to run in the background while the page has loaded.

Next 14 introduced PPR which was a way of optimizing pages with static and dynamic rendering. The dynamic pages get wrapped in a Suspense boundary; therefore, allowing it to be streamed when a request is made. However, in the same HTTP Request, the static pages get served as a static HTML shell.

In Next 15, PPR can now be set for specific pages and layouts by simply adding an experimental_ppr route config option



import { Suspense } from "react"

import { StaticComponent, DynamicComponent } from "@/app/ui"

//
export const experimental_ppr = true

export default function Page() {

return {

<>

<StaticComponent />

<Suspense fallback={...}>

<DynamicComponent />

</Suspense>

</>

};

}

To enable the option used in the page above, you are expected to set the experimental.ppr config in your next.config.js file to 'incremental':


 javascript
const nextConfig = {

experimental: {

ppr: 'incremental',

},

};

module.exports = nextConfig;

Executing Code after a response with next/after

In Next 15, there is now a way to perform tasks after a response has been served to the user. These tasks can include logging, analytics, and other external system synchronization. Although, performing this type of task can be very challenging. Using after() as an experimental API solves the problem; allowing you to schedule work to be processed after streaming your response.

To enable it in your project, add this to your config file:


 javascript
const nextConfig = {

experimental: {

after: true,

},

};

module.exports = nextConfig;

After that, import the function in your server component as shown below:



 javascript

import { unstable_after as after } from 'next/server';

import { log } from '@/app/utils';

export default function Layout({ children }) {

  // Secondary task

  after(() => {

    log();

  });

// Primary task

  return <>{children}</>;

}

Create-next-app updates

Some major updates have also been made to the design of the create-next-app homepage. When you open create-next-app on your localhost, you get to see the new design as shown below:

Running create-next-app

Also while running create-next-app, there is a new prompt that now asks for the enabling of Turbopack for local development which defaults to no.

You can enable Turbopack using the –turbo flag

npx create-next-app@rc --turbo

Optimizing bundling of external packages

In Next 14, packages are only bundled in the App router and not on the page router by default.

So to bundle external packages in the Page router, the transpilePackages config is used; however, you may need to specify each package.

If there was a need to opt out of a specific package in an App router, it was done using the serverExternalPackages config option.

In Next 15, a new option is now introduced which is called bundlePagesRouterDependencies; this option allows you to unify the configuration between the App and Pages router which matches with the default automatic bundling of the App router in Next14. You also decide to use the serverExternalPackages option if you want to opt-out specific packages.



 javascript

const nextConfig = {

// Automatically bundle external packages in the Pages Router:

bundlePagesRouterDependencies: true,

// Opt specific packages out of bundling for both App and Pages Router:

serverExternalPackages: ['package-name'],

};

module.exports = nextConfig;

Conclusion

With these new features coming, it will surely be a game changer in web development. So, now that you have a basic understanding of the new features, you can start implementing them in your projects. But note that the work on Next 15 is still in progress before its final release. If you are looking to learn more about the features, you can check their docs here. Happy Coding!!

How to leverage Jest in your JavaScript codebase: A guide to Snapshot Testing

LordCodex — Sun, 19 May 2024 12:12:58 +0000

Outline

What is jest

Features
How does it work?
What does it do?

Snapshot testing

Implementing Snapshot testing with jest
Updating Reference Snapshot
Implementing Inline Snapshots

Conclusion

Outline

There are big challenges that come with testing robust features in production, especially when working with a large codebase. However, When these features are not extensively tested thoroughly, They result in bugs occurring in production. Bugs are very hard to spot. But with unit and comprehensive testing, they can be prevented! In this article, you will learn how you can leverage jest to test functions and components in a JavaScript codebase. Also, you will learn how to implement snapshot testing for your web application.

Prerequisites

You must have Node.Js installed on your system at least version 14 or higher.
You must be familiar with the basic concepts of JavaScript and React.Js.

Jest

Jest is a delightful javascript framework that helps you as a developer test your javascript codebase easily. However, It is a technology that works with different project types like react, babel, typescript, angular, and vue due to its flexibility.

Features of Jest

Zero Config: Jest doesn’t require any config, which makes it easier to set up in any project.
Isolated: jest runs tests in a parallelized format, causing them to run simultaneously and at the same time bringing about faster execution and improved performance.
Great Api: The Jest Library offers a set of Apis and assertions that focus on test simplicity.
Snapshot testing: With jest, you can check for any unexpected change of a UI component and compare it to a reference snapshot file.

Fast and safe: With its parallelized nature, jest makes running tests fast and secure.
Code Coverage: Jest can also provide extensive test reports of an entire project by just simply adding the —flag coverage. No additional setup is required

Easy Mocking: You can use the MockApi from jest to inspect some specific calls and then the parameters passed to the function.

How does it work

Jest offers a set of APIs and built-in functions that make testing operations easier to carry out. They include “Expect”, “toBe” and many more! Additionally, these functions enable us to provide assertions and determine behaviors for our javascript code. Let's see how we can apply them.

A Basic Example

In this first example, create a file called sum.js. Inside the file, create a javascript function that adds two numbers and then export it as a module.

//sum.js file
function sum(a, b) {
  return a + b;
}
module.exports = sum;

After it is exported, create a test file and name it sum.test.js; the test file is where you will utilize jest to test the function.

//sum.test.js
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Inside a typical test file, built-in functions are imported for test accessibility; however, these functions make assertions about how our code should behave. In the code above, we first call the test function. Then we specify the function expectation by providing the expected value of the sum function.

After that, add this to your package.json

{
  "scripts": {
    "test": "jest"
  }
}

Then type this command on your terminal to run your test:

npm test

After the test is run successfully, you will see this on your terminal:

Congratulations, you have just run your first test!!

Another Example

Let's consider another example. In this example, create a multiply.js file. Inside the file, create a javascript function that multiplies two numbers as shown in the code below.

//multiply.js file

function multiply(a, b) {
  return a * b;
}
module.exports = multiply;

Next, create a test file where you will use jest to test

//multiply.test.js
const multiply = require('./multiply');

test('multiply 1 and 2 to equal 2', () => {
  expect(multiply(1, 2)).toBe(2);
});

Inside the code provided above, we first import the multiply file. Then, we run the test cases for the imported javascript function which in this case is multiply.js. After that, we call the test function and then specify the function expectation by providing the expected value of the multiply function.

Snapshot Testing:

It is a form of testing that checks for an unexpected change in the render of a UI component. The test case renders the UI component, takes a snapshot, and then compares the output to the reference snapshot file that was created by Jest on the initial test. If two snapshots don’t match each other, the test fails. This could either be caused by an unexpected change in the render of the UI component or the reference snapshot having an old implementation that was meant to be updated.

Implementing Snapshot testing with jest

Let's consider react as a project example for testing. In React, there is something known as the dom renderer. This is a tool that does the work of rendering the whole application. However, if we are looking to test the render of the UI component, there will not be a need to render the whole application, but only the UI component for performance reasons. To Render only the UI component that we will implement with snapshot testing, we will use a test renderer! The test renderer creates a lightweight serializable representation of the react tree, preventing the rendering of the entire dom, and allowing the test to be executed faster.

The code below illustrates the implementation of the test renderer with snapshot testing.

import renderer from 'react-test-renderer';
import Link from '../Link';

it('renders correctly', () => {
const tree = renderer
.create(Hashnode)
.toJSON();
expect(tree).toMatchSnapshot();
});

From the code above, the test renderer creates a serializable value for our Link Component (which represents the “react tree”) and matches it with the reference snapshot file.

On the initial test run, this is how the created reference snapshot looks like:

exports[renders correctly 1] = `
<a
className="normal"
href="http://www.hashnode.com"
onMouseEnter={[Function]}
onMouseLeave={[Function]}

Hashnode

`;

After it is created, the snapshot artifact gets committed alongside code changes and code review. Therefore, On subsequent test runs, jest compares the rendering output with the previous snapshot to check for an unexpected change.

Updating Reference Snapshot

There are different reasons why they can be failed test cases for the rendering of the UI. It could either be due to an unmatched snapshot or an Intentional change in UI implementation. Now, let's talk about the intentional change in the UI implementation.

Let’s take this as an example. Here, we update the href address for the Link component as shown in the code below:

import renderer from 'react-test-renderer';
import Link from '../Link';

it('renders correctly', () => {
const tree = renderer
.create(Devto)
.toJSON();
expect(tree).toMatchSnapshot();
});

However, when we decide to run a test, the test is expected to fail because the href address in the rendered output doesn’t match the one in the previous snapshot.

The test output can be shown in the image below:

So, to resolve this, we are expected to update the snapshot artifact by simply running jest with a flag that tells jest to update the previous snapshot:

Implementing Inline Snapshots

With Jest, you can create inline snapshots for your source code without having to go to an external file with the .snap extension. Inline snapshots are kinda similar to external snapshots, But they generate automatic inline snapshots when you perform subsequent tests.

A Basic Example

In this example; write the test function that tests the render of the ui component or tree as shown in the code below:

it('renders correctly', () => {
const tree = renderer
.create(Example Site)
.toJSON();
expect(tree).toMatchInlineSnapshot();
});

However, when we run the test; the generated snapshot is automatically saved alongside the code changes. Therefore, the generated snapshot is then written as an argument inside the toMatchInlineSnapshot function.

The next time you decide to run the test, the rendered output of the tree gets compared to the generated snapshot inside the toMatchInlineSnapshot function.

Conclusion

I hope you now understand what snapshot testing in jest is all about and how it can be implemented in a javascript codebase. If you are looking to learn more about Jest, you can check out their documentation here. Happy Coding!!

How to Create Simple Sketching Art with p5.js: A Step-by-Step Tutorial

LordCodex — Wed, 01 May 2024 18:48:00 +0000

Outline
What is p5.js
What does it do
Setting up your environment
P5.js simple coding examples
Interaction and Event Listeners
Create Interactive Sketching Art with the mouse movements
Conclusion

Outline

Imagine creating interactive visuals, photo filters, simulations, and generative art with just a few lines of code 😱?

Cool, right? 😅

p5.js makes this possible with pre-written functions making coding accessible to everyone.

In this article, I will be guiding you through how to create simple interactive art in p5.js

What is p5.js

It is an open-source javascript library that covers the part of creative coding making coding accessible and inclusive to not just developers but also to designers, artists, educators, and everyone obsessed with art.

What does p5.js do?

Data Visualization: with p5.js, you can create data visualizations, charts, and graphs that present complex information in a more engaging manner.

Art and Animation: it is also used to create fine art and interactive storytelling, enabling artists to express their creativity only through code.

Simulation and Modelling: p5.js can be used to create simulations and models usually for scientific or educational purposes.

Generative Art: p5.js allows you to generate mesmerizing visuals just by the use of maths concepts and algorithms.

Image Processing and Photo Filters: p5.js also allows you as a photographer to turn digital images into Pointillist masterpieces!

How does p5.js work?

Before we start the coding start, let's delve into how p5.js works.

If you have been reading from the start or have any basic knowledge of the p5.js library, you should already know that p5.js provides a seamless way of creating interactive and fine art.

But do you know how it works?

p5.js provides two primary built-in functions setup and draw, making it inclusive to even those without a technical background. p5.js uses these primary functions to make sketches and drawings.

Here is a breakdown of the primary functions and how they work:

Setup: This Built-In Function is responsible for the canvas configuration, With this function, you can set the canvas width and height.

function setup() {
  createCanvas(400, 400);
}

Draw: with the draw function, you can create sketches, draw objects, and add styles to the background of the canvas.

function draw() {
  background(220);
}

Setting up your Environment

p5.js already has a web editor for you where you can make your first sketch. You can click here to create your first sketch.

p5.js Coding Examples

In this section, I will be providing simple examples that will get you started with p5.js

For the first sample, I will be showing you how to draw a circle

Drawing a Circle with p5.js

There are varieties of shapes that you can create with p5.js. They are normally created by the call of the shape name as a function. However, for this part, we will be creating a circle.

Very important: To test out the code samples, ensure to use the p5.js web editor.

To draw a circle,

Create your setup function. Inside your setup function, initialize the createCanvas function and pass it parameters that serve as the width and height of the canvas as shown below.

function setup() {
createCanvas(400, 400)
}

After that, create a draw function. This function is where you create your circle sketch.

function draw() {
 //make your drawings here
}

Inside your draw function, Create your circle by calling the name as a function. Next, create a background for your circle with the background function, and then a describe function that serves as a screen reader-accessible description of the canvas.

function draw() {
  circle(50, 50, 25)
describe("A white circle with black outline in the middle of a gray canvas.")
}

That’s it!! You now have a basic white circle with a gray background.

Interaction and Event Listeners

Interactions are created in p5.js when a function is invoked as a response to a user action. The function invoked can also be called an event listener.

For example. When a mouse is pressed over an element, we call that an action or event. This action invokes a function(event listener) known as “mousePressed”.

There are other event listeners that are used in p5.js, examples of them include:

mouseOver
mouseEnter
mouseLeave

Creating a basic interaction

In this section, you will learn how interactions are created with eventListeners in p5.js.

To create an interaction in p5.js, follow the instructions as shown below:

Create a setup function. inside the setup function, create a canvas function, pass it parameters, and assign it to a variable.

function setup() {
  // Create a canvas element and
  // assign it to cnv.
  let cnv = createCanvas(100, 100);
}

After that, create a background for your canvas inside the function.

function setup() {
  // Create a canvas element and
  // assign it to cnv.
  let cnv = createCanvas(100, 100);

  background(200);
}

Then, create the mouseOver event for your canvas variable and pass it a function called "randomColor" which we will create later:

function setup() {
  // Create a canvas element and
  // assign it to cnv.
  let cnv = createCanvas(100, 100);

  background(200);

  // Call randomColor() when the
  // mouse moves onto the canvas.
  cnv.mouseOver(randomColor);

  describe('A gray square changes color when the mouse moves onto the canvas.');
}

Finally, create the randomColor function that is invoked or triggered due to the event or action.

function randomColor() {
  let c = random(['red', 'yellow', 'blue', 'green']);
  background(c);
}

There you have it!! You now have a canvas that changes color when the mouse moves onto the canvas.

Now that you have understood how to build a simple interactive visual in p5.js, let's delve further!!

Creating simple interactive sketching Art with the mouse movements

In this section, I will walk you through the process of creating simple interactive sketches with the mouse position.

There are specific system variables that keep track of the mouse position in P5.js. These positions can either be horizontal or vertical.

Examples of the system variables include:

MouseX: it keeps track of the horizontal position
MouseY: it keeps track of the vertical Position.

By default, in 2d mode, the mouse variables keep track of the mouse position relative to the top-left corner of the canvas. When it is in WEBL mode, it keeps track of the mouse’s position relative to the center of the canvas. Still a bit confused? don’t worry, I will explain.

2D Mode

Let's take this code for an example in 2d mode as shown below:

function setup() {
  createCanvas(100, 100);

  describe("A vertical black line moves left and right following the mouse's x-position.");
}

function draw() {
  background(200);

  // Draw a vertical line that follows the mouse's x-coordinate.
  line(mouseX, 0, mouseX, 100);
}

If you try this out on the web editor, you will notice that the line moves with the mouse position from the left edge to the right edge of the canvas.

Why?

The top left corner of the canvas coordinate is initially taken to be (0,0). So, when you move the position of the mouse on the canvas from the horizontal position, the line moves from 0 to 100 which was passed as parameters to the line on the code provided above.

To display the line coordinates in 2d mode, add these few lines of code to the draw function.

function draw() {
  background(200);

  // Style the text.
  textAlign(CENTER);
  textSize(16);

  // Draw a vertical line that follows the mouse's x-coordinate.
  line(mouseX, 0, mouseX, 100);

  // Display the mouse's coordinates.
  text(`x: ${mouseX} y: ${mouseY}`, 50, 50);
}

WEBL mode

While in the WEBL mode, this is how the code looks like:

function setup() {
  createCanvas(100, 100, WEBGL);

  describe("A vertical black line moves left and right following the mouse's x-position.");
}

function draw() {
  background(200);

let mx = mouseX - 50;

  // Draw a vertical line that follows the mouse's x-coordinate.
  line(mx, -50, mx, 50);
}

If you try this out on the web editor, you will notice that the line moves with the mouse position from the center of the canvas.

Why?

The center of the canvas coordinate is initially taken to be (0,0). So, when you move the position of the mouse on the canvas from the horizontal position, the line moves from -50 to 0 and then to 50 which was passed as parameters to the line on the code provided above.

To also display the line coordinates in WEBL mode, add these few lines of code to the draw function.

function draw() {

  background(200);

// Style the text.

  textAlign(CENTER);

  textSize(16);

let mx = mouseX - 50

// Draw a vertical line that follows the mouse's x-coordinate.

  line(mx, -50, mx, 50);

// Display the mouse's coordinates.

  text(x: ${mouseX} y: ${mouseY}, 50, 50);

}

Conclusion

With p5.js, you can create fine art and make beautiful sketches whether you are a developer or not. Again if you are looking for a suitable environment to code in p5.js syntax and show your creative skills, you should try out the p5.js web editor and check their reference page to learn more. Happy Coding!!

Learn React Hydration in 5 minutes

LordCodex — Mon, 22 Apr 2024 14:49:59 +0000

Overview

At some point in your journey as a developer, You must have likely heard of the term "hydration", but may not seem to understand how it works fully. In this article, I will be covering everything you need to know about hydration as a developer.

What is React hydration?

React Hydration is simply the process of adding event listeners to dom nodes and making an application fully interactive on the client side

In a Nextjs Application, when the client sends a request to the server, the server responds back with a pre-rendered html(server-generated markup) page. The pre-rendered page is then sent to the client side which populates the dom. After it is rendered on the client side, React takes over and adds event listeners to the server pre-rendered html(server-generated markup) populated on the client side bringing about interactivity.

Deeper detail of what happens during Request Time

During Request time, the following things listed below explain clearly what happens behind the scenes:

A preview of a non-interactive HTML is initially sent to the client from the server
React Server component payload: The React Server component which contains the data sent from the server to the client ensures that the client is in sync with the server bringing about the consistency of user interfaces.
Finally, the javascript instructions from the client side now hydrate the html page allowing it to be fully interactive.

Common Hydration Errors and how to resolve them

At some point, when you develop an application with nextjs, you might have come across this famous error.

This error can be very hard to debug and fix, especially when it occurs in a big application.

What exactly is a hydration error?

The hydration error is the error that stems from the mismatch of the server and client component's states and generated markup.

What causes it?

Just Like I explained earlier on hydration, In a Nextjs Application, React components are first rendered on the server before they are transformed into a pre-rendered html that is then sent to the client before the hydration process happens. However, during the process, if the javascript instructions executed on the client don't match the pre-rendered html that is sent from the server, hydration errors can occur.

There are several causes of hydration errors we face in our nextjs application, let's look at some of them as we proceed.

Asynchronous rendering:

This involves trying to asynchronously render a simple component using getServerSideProps and getInitialProps. The getInitialProps plays a huge part in delaying the required data before it gets to the client side. if the client-side hydration process happens before the required data is loaded, hydration errors occur.

Data-Fetching: Nextjs uses React APIs to render the server components into a special data format, the format is fetched and sent to the client. If the data the client expects doesn't match with the one sent from the server, hydration errors occur.

Third-Party Libraries

Nextjs as a react framework rely heavily on third-party libraries. These third-party libraries have their lifecycle rendering process which can conflict with nextjs rendering process leading to hydration errors

Writing code that relies on the window object:

This is one of the major causes of hydration error that occurs in a nextjs application.

{user.status === "loggedIn" ? (

    {/* condition when the user is logged in*/}

    ) : typeof window !== "undefined" && window.clientInformation.vendor ? (

    {/* condition when  */}

    ) : (

    <p>
     A user is logged in 
    </p>
)}

if you take a look at the code above, you will notice that it relies on a window object to execute a certain action. it is important to know that the window object in question is not available on the server enabling the pre-rendered html page not to match the client javascript code.

Best Practices

Implement the UseEffect Logic on the client side: In the problem I shared above before this section, I showed you how the window object can be a cause of hydration error in a nextjs application. I also explained that in the server, the window object does not exist, which causes a mismatch of the server-generated markup and the client javascript functions needed to reconcile that same server-generated markup. So to resolve this issue, a useEffect is needed.

import { useEffect, useState } from 'react';

function MyComponent() {
  const [isClientAvailable, setIsClientAvailable] =     useState(false);

  useEffect(() => {
    if (typeof window !== 'undefined' && window.clientInformation.vendor) {
      setIsClientAvailable(true);
    }
  }, []);

  return (
    <>
    {user.status === "loggedIn" ? (

    {/* condition when the user is logged in*/}

    ) : isClientAvaliable ? (

    {/* condition when there is client  ] */}

    ) : (

    <p>
     Oops no client
    </p>
   )}
    </>
  );
}

Disable pre-rendering for certain components: There are certain components that don't need to undergo server-side components, so disabling ssr will be a good option to avoid hydration errors.
Consistency in Fetching data: Ensure the use of Next.js hooks like getStaticProps and getServerSideProps during SSR to fetch data.

Conclusion

So now that you have fully understood hydration, its errors, the causes of those errors, and best practices to avoid them, you will be able to build highly scalable and powerful applications as a developer. Ensure to keep these best practices and guides in mind, and write good tests for your application so that you don't get fazed by hydration errors when debugging in your application. I hope I have been able to simplify everything related to hydration for you.

I'd love to connect with you on Twitter | LinkedIn | GitHub

See you in my next blog article. Happy Coding!!

Build a Discord Bot with Discord.js V14: A Step-by-Step Guide

LordCodex — Fri, 12 Apr 2024 12:38:33 +0000

Overview

Sometimes when we are overloaded with too many boring and numerous mundane activities we think of ways to automate them. Consequently, bots and AI tools are created to make our lives easier.

In this article, I will explore how to create a custom discord bot with Discordv14 that responds to slash messages.

Sounds interesting?

Alright let begin!!

Prerequisite

A good knowledge of Javascript
A basic knowledge of Nodejs

Intro To Discord.js.

Before you start building, do you know what discord.js is and what it does?

No Problem, I will explain:

Discord.js is a powerful Node.js module that allows you to interact with the Discord API very much easily.

It takes a much more object-oriented approach than most other JS Discord libraries, making your bot's code significantly tidier and easier to comprehend.

If you aren’t aware, discord.js just pushed their latest release on their docs(discord.js v14). You can check out what's new here

Installation

Installing Node.js
Very Important: To use discord.js, you'll need to install Node.js. discord.js v14 requires Node v16.11.0 or higher.

To check if you already have Node installed on your machine (e.g., if you're using a VPS), run node -v in your terminal. If it outputs v16.11.0 or higher, then you're good to go!
Alright, Let's Continue.

On Windows, it's as simple as installing any other program. Download the latest version from the Node.js website, open the downloaded file, and follow the steps from the installer.

On macOS, either:

Download the latest version from the Node.js website, open the package installer, and follow the instructions
Use a package manager like Homebrew with the command
brew install node
On Linux, you can consult this page to determine how you should install Node.

Preparing the essentials

To use discord.js, you'll need to install it via npm (Node's package manager). npm comes with every Node installation, so you don't have to worry about installing that. However, before you install anything, you should set up a new project folder.

Navigate to a suitable place on your machine and create a new folder named "discord-bot" (or whatever you want). Next you'll need to open your terminal.

Opening the terminal

If you use Visual Studio Code, you can press Ctrl + ` (backtick) to open its integrated terminal.

Running on Windows

On Windows, either:

Shift + Right-click inside your project directory and choose the "Open command window here" option
Press Win + R and run cmd.exe, and then cd into your project directory

Running on macOS:

On macOS, either:

Open Launchpad or Spotlight and search for "Terminal"

In your "Applications" folder, under "Utilities", open the Terminal app

Running on Linux

On Linux, you can quickly open the terminal with Ctrl + Alt + T.

With the terminal open, run the node -v command to make sure you've successfully installed Node.js. If it outputs v16.11.0 or higher on the terminal, then you are good to go!!

Initiating a project folder with NPM

To start building, ensure to run the following command to set up your project for you.

npm init -y

Once you're done with that, you're almost ready to install discord.js!

Installing discord.js

Now that you've installed Node.js and know how to open your console and run commands, you can finally install discord.js!

Next, run the following command in your terminal:

npm install discord.js

And that's it! With all the necessities installed, you're almost ready to start coding your bot.

Linter Setup

With linter, it is easier to spot bugs and errors in our code, it is not required but recommended. You can check here on how to install it.

Setup a Bot Application

Now that you have followed the steps outlined above, I guess the real cooking can start!!!.

To set up your bot application, follow these steps:

Open theDiscord developer portal and log into your account.

Click on the New Application button.
Enter a name and confirm the pop-up window by clicking the Create button.

You can edit your application name, description, and avatar however you wish.

Getting a Token

The token is basically what your bot uses to log into your discord, you can regenerate it but need your password for it to happen.

Pls ensure you don’t share your token with anyone to avoid malicious acts

Try generating the token which will require you to enter the password for your discord account as shown below:

Adding the bot to servers

You need to add the bot to servers to test and interact with its functionality. To create a bot, an invite link is required.

What is the Invite Link?

An invite link is Discord's standard structure for authorizing an OAuth2 application (such as your bot application) for entry to a Discord server.

Follow these steps to get your invite link:

Navigate to the MyApps Page Under the application
Click on the bot created
Head to the OAuth page
Click on OAuth generator page

Select the bot and application.commands, when you select them, you are given a list of permissions to configure for your bot

Grab the link via the "Copy" button and enter it in your browser.

You should see something like this (with your bot's username and avatar):

Congratulations, you have just added the bot to the server!!.

Creating a Bot

Creating config files

Now that you have created your bot and added it to the server, it is time to start the coding part and get it online!

Creating Config.json

Next, create the config.json file. This is where you will store your private values like your tokens.

Creating the main File
Inside the root of your project, create a file and name it index.js. Inside the file, copy this code snippet:

`
const fs = require('node:fs');
const path = require('node:path');
const { Client, Collection, Events, GatewayIntentBits } = require('discord.js');
const { token } = require('./config.json');

const client = new Client({ intents: [GatewayIntentBits.Guilds] });

client.once(Events.ClientReady, readyClient => {
console.log(Ready! Logged in as ${readyClient.user.tag});
});

client.login(token);
`

In the code above, here are the basic things to understand:

A client instance is created for the bot so that it logins the bot in with a token
The GatewayIntentBits allows the discord.js client to work the way it is expected to
The intent allows you to define events that discord send to your bot when triggered.
Guild is your server id

Now that you have understood these basic things, hopefully, you are ready for the next phrase.

Running Your Application

To run your application, open your terminal inside your visual code editor. Press this command to run your project

node index.js

Congratulations, you have just successfully run your project. The next step is to create slashing commands

Creating Slash Commands

With the Discord Client, you can create slash commands

Slash commands provide a huge number of benefits over manual message parsing, including:

Integration with the Discord client interface.
Automatic command detection and parsing of the associated options/arguments.
Typed argument inputs for command options, e.g. "String", "User", or "Role".
Validated or dynamic choices for command options.
In-channel private responses (ephemeral messages).
Pop-up form-style inputs for capturing additional information.

Before Going Further

This is how the structure of your project should look like:

discord-bot/
├── node_modules
├── config.json
├── index.js
├── package-lock.json
└── package.json

Individual Command files

In this section, you will learn how to create command files that help you register and handle commands. Here are important instructions you should follow:

Create a new folder named commands
Create a subfolder named utility, which is where you store all your utility command files.
Now, create a server.js file inside the utility sub-folder, server.js is an example of a utility file where your slash commands are executed. After that, copy this command below.

`
const { SlashCommandBuilder } = require('discord.js');

module.exports = {
data: new SlashCommandBuilder()
.setName('server')
.setDescription('Provides information about the server.'),
async execute(interaction) {
await interaction.reply(This server is ${interaction.guild.name} and has ${interaction.guild.memberCount} members.);
},
};
`

Looking at the code snippet above,
The data property provides the command definition with its description.
The execute is the asynchronous function that contains the functionality to run from our event handler when the command defined in the data is used.
Then, they are placed inside the module.exports so they are read by other files

That is it for your basic ping command.

Command handling

If you are working on a big project, you are most likely to use command handling. So, let's get started on that!

Loading Command files

After you have created your command files, make these new additions inside the index.js file.

client.commands = new Collection();

Important: it is recommended to add a commands Property to your client instance so that you can access your commands in other files.

here are the things to know about the new additions:

The Fs is node’s native file system module. It is used to read the commands directory and identify the files
The path is Node’s native path utility module. path helps construct paths to access files and directories. One of the advantages of the path module is that it automatically detects the operating system and uses the appropriate joiners.
The Collection class extends JavaScript's native Map class, and includes more extensive, useful functionality. Collection is used to store and efficiently retrieve commands for execution.

Retrieving your command files

Next, after using the imported modules above, make a few more additions to the index.js file.

for (const folder of commandFolders) { const commandsPath = path.join(foldersPath, folder); const commandFiles = fs.readdirSync(commandsPath).filter(file => file.endsWith('.js')); for (const file of commandFiles) { const filePath = path.join(commandsPath, file); const command = require(filePath); if ('data' in command && 'execute' in command) { client.commands.set(command.data.name, command); } else { console.log([WARNING] The command at ${filePath} is missing a required "data" or "execute" property.); } } }

Here are few things to know about these additions:

The path.join helps in constructing the root path to the command directory
The first fs.readdirSync reads the path that is joined to the directory(in this case, the command directory), returns an array of the folder the directory contains, currently [“utility”]
When the first iteration is done inside the commandFolders, you take out each folder from the array(in this case, utility), use the path.join to construct the path to each folder.
Next, the second fs.readditSync reads inside of the folder(in ths case, the utility folder that has been constructed to the path and checks for what the utility folder contains, currently [“ping.js”]. To ensure only commands file are only read, in this case javascript files, Array.filter() ensures non-javascript files are removed.
Finally, set each command into the client.commands collection

Receiving and handling command interactions

In this section, you will create event listeners that execute and handle commands whenever there is interaction in your discord application. Inside the index.js file, add the following code:

client.on(Events.InteractionCreate, async interaction => { console.log(interaction) });

Now in discord.js, not every interaction is a slash command, for example, the messageComponent interactions. So to ensure your code listens for only slash commands,
You will make use of the BaseInteraction#isChatInputCommand() method to handle slash commands and exit the handler if another command type is encountered.

client.on(Events.InteractionCreate, async interaction => { if (!interaction.isChatInputCommand()) return; console.log(interaction) });

Executing Commands

When executing commands, we check out the client.commands collection and see if it contains the interaction commandName before executing the code.

Again, if you check the server.js command file, you will notice there is a data and execute asynchronous function property defined in the file:

Inside the data property, it contains the name and description of the command defined. Then in the execute function, it contains what happens after the command gets triggered.

So like I explained from the beginning of this section, a matching command is gotten from the clients.command collection based on the interaction.commandName, if no match is found, the error is logged out, otherwise you execute the command with the interaction passed as the parameter.

`
client.on(Events.InteractionCreate, async interaction => {
if (!interaction.isChatInputCommand()) return;
const command = interaction.client.commands.get(interaction.commandName);

if (!command) {
    console.error(`No command matching ${interaction.commandName} was found.`);
    return;
}

try {
    await command.execute(interaction);
} catch (error) {
    console.error(error);
    if (interaction.replied || interaction.deferred) {
        await interaction.followUp({ content: 'There was an error while executing this command!', ephemeral: true });
    } else {
        await interaction.reply({ content: 'There was an error while executing this command!', ephemeral: true });
    }
}

});
`

Congrats, you have just initiated the method to respond and execute slash commands. Next, you will create a deployment script that registers the slash commands.

Registering Slash Commands

Command registration

Command registration is done in two ways; in a specific guild, or in every guild the bot is in. so let get started with single-guild registration first which is the easier way to develop and test commands before a global deployment.

N.B:

Your application will need the applications.commands scope authorized in a guild for any of its slash commands to appear, and to be able to register them in a specific guild without error.

Guild Commands

To register and update slash commands for your bot, follow the instructions below

Create a deploy-commands.js file in your root directory.
Add two more properties to the config.json in your root directory; in this case, your clientId(your application’s client id) and guildId(your development server’s id)

After following these steps, your config.json file should look like this following the new additions:

{ "token": "your-token-goes-here", "clientId": "your-application-id-goes-here", "guildId": "your-server-id-goes-here" }

With these defined, copy this deployment script below inside the deploy-command.js file:

`
const { REST, Routes } = require('discord.js');
const { clientId, guildId, token } = require('./config.json');
const fs = require('node:fs');
const path = require('node:path');

const commands = [];
// Grab all the command folders from the commands directory you created earlier
const foldersPath = path.join(__dirname, 'commands');
const commandFolders = fs.readdirSync(foldersPath);

for (const folder of commandFolders) {
// Grab all the command files from the commands directory you created earlier
const commandsPath = path.join(foldersPath, folder);
const commandFiles = fs.readdirSync(commandsPath).filter(file => file.endsWith('.js'));
// Grab the SlashCommandBuilder#toJSON() output of each command's data for deployment
for (const file of commandFiles) {
const filePath = path.join(commandsPath, file);
const command = require(filePath);
if ('data' in command && 'execute' in command) {
commands.push(command.data.toJSON());
} else {
console.log([WARNING] The command at ${filePath} is missing a required "data" or "execute" property.);
}
}
}

// Construct and prepare an instance of the REST module
const rest = new REST().setToken(token);

// and deploy your commands!
(async () => {
try {
console.log(Started refreshing ${commands.length} application (/) commands.);

// The put method is used to fully refresh all commands in the guild with the current set
const data = await rest.put(
Routes.applicationGuildCommands(clientId, guildId),
{ body: commands },
);

    console.log(`Successfully reloaded ${data.length} application (/) commands.`);
} catch (error) {
    // And of course, make sure you catch and log any errors!
    console.error(error);
}

})();
`

After you have copied the script, open another terminal inside your visual code editor. Then press this command node deploy-command.js to deploy your script. If you have followed these steps above, you should be able to register your slash commands inside the server your bot is in, run your commands, and see your bot’s response in Discord.

Testing the Bot

Conclusion

If you have made it this far, give yourself a round of applause.

Again, If you aren’t aware, discord recently pushed their latest release on their docs(discord.js v14). You can check here to learn more about what they offer. Happy Coding!

Conceptual Topics Technical Writers Must Grasp For Effective API Documentation

LordCodex — Thu, 21 Mar 2024 17:37:41 +0000

Overview

One of the things API technical writers must keep in mind when writing API Documentation about a product or service is that users must be able to apply effectively and massively experiment with the information related to the API obtained from the docs. This can only be possible if the API documentation has good conceptual topics - some piece of information also known as the user guide.
In this article, I will be pointing out certain conceptual Topics every technical writer has to include in API documentation.

Prerequisite

A basic knowledge of APIs
A good understanding of API documentation is a plus

Understanding Conceptual Topics in API Documentation

Definition

Conceptual topics are what make up the API Documentation, making it easier for users to navigate through the docs more easily and experiment effectively with the API.

Examples of Conceptual Topics in API Documentation

The following are commonly used conceptual topics used in API documentation:

API product overview
Getting started
Authentication and authorization requirements
Status and error codes
Rate limiting and thresholds
Quick reference guide
API best practices

API Product Overview

This is where a writer talks about the main story of the API. Here are four things you should note when writing a product overview

What is it all about?
What it does?
Who is it for?
Why should I use it as a user?

Keep in mind that there are thousands of APIs. If people are browsing your API, their first and most pressing question is, what information does it provide?

To tell your product’s story, consider identifying a market need that your product solves one of the main reasons startups fail is their inability to solve a market problem.

Getting Started

This Section is almost the same as a typical Hello World tutorial in a developer documentation platform, but an API is involved in this case. As an API writer, your purpose and goal in this section is to provide end users with a basic use case of the API to produce the simplest outcome possible. So you must allow a new user to have some success with your product, even if the success is small, like getting a one-line value back from an API call. Here are the following topics you can write about in this section:

Signing up for an account
Getting API keys
Making a request
Evaluating the response

Authentication and authorization

Before users make requests with your API, they’ll usually need to register for an API key or learn other ways to authenticate, and authorize their requests.

Definition

First, let’s define the key terms:
Authentication: Refers to proving correct identity.

Authorization: Refers to allowing a certain action.

Differences between Authentication and Authorization

An API might authenticate you, but not authorize you to make a certain request. In Authentication, it doesn’t know who you are, thereby, you have to provide an API Key. While in authorization, it knows who you are, but you have to perform a certain action. However, in API documentation, for privacy and security reasons, you don’t need to explain how your authentication works in detail to outside users. In fact, not explaining the internal details of your authentication process is probably a best practice as it would make it harder for hackers to abuse the API.

However, you do need to explain some necessary information such as:

How to get API keys
How to authenticate requests
Error messages related to invalid authentication
Sensitivity around authentication information
Token expiration times

When API requests are authenticated, it helps to prevent malicious users from getting other user-specific data and it also helps to boost a revenue model for companies.
Finally, you could track who is using your API, or what endpoints are most used just by authentication.

If you have public and private keys, you should explain where each key should be used, and note that private keys should not be shared.

API status and error codes:

Most APIs should have a general page listing responses and error codes across the entire API. A standalone page listing the status codes (rather than including these status codes with each endpoint) allows you to expand on each code with more detail without crowding the other documentation. It also reduces redundancy and the sense of information overload.
Status and error codes can be particularly helpful when it comes to troubleshooting. As such, you can think of these error codes as complementary to a section on troubleshooting. for example, whether the request was successful (200), resulted in a server error (500), or had authorization issues (403).

API rate limiting and thresholds:

Rate limits determine how frequently you can call a particular endpoint. Companies with APIs boost their revenue when they charge for access to their API, which is why they offer low and high usage often making the low usage options free so that developers can explore and experiment with the API.

API quick reference:

The quick reference guide helps users get a glimpse of the system as a whole, often by providing a list of the API’s endpoints. Whether for end-user documentation or developer documentation, the quick reference guide provides a 1-2-page guide that provides a summary of the core tasks and features in the system. End-to-end Users can also get a gist of what is going on in the system, all of which are tasks and a quick summary of the API functionalities.

API Best Practices

API best practices can refer to any general advice your product team wants to communicate to developers about working with the API. They can necessarily be tips about fault tolerance - how it can be managed, and what type of specific requests should be used to produce the best results from the API.

Conclusion

To write better, and an effective API documentation about a product and service, the conceptual topics outlined above must be required in your documentation. Yes! They are what provide a critical context for understanding and using the API beyond just the reference documentation - users can grasp the functionality and the purpose of the API, enabling them to effectively apply it in their products. If you have any questions regarding this article, feel free to ask in the comment section. Toodles and good luck!

The Current State and Future of Progressive Web Apps (PWA)

LordCodex — Tue, 31 Jan 2023 15:37:41 +0000

What are Progressive Web Apps?
The term Progressive Web App was coined by Alex Russell and Frances Berriman. In Alex’s words

Progressive Web Apps are just websites that took all the right vitamins

In the simplest terms, Progressive Web Apps (PWAs) are web applications that use modern web technologies to provide a user experience similar to native mobile apps.

They are designed to work offline, be fast, and provide native-like navigation, among other features.

PWAs can be installed on a user's device and can run independently of a web browser, making them accessible like a native app.

They offer an alternative to native app development and are compatible with multiple platforms including desktop and mobile.

PWAs are seen as a promising solution to bridge the gap between web and native apps, offering a more cost-effective and efficient option for businesses and developers.

They combine the look and feel of an app with the ease of programming of a website. These cutting-edge apps make it easy for your users to access your content, and happy users, engaged users, and engaged users increase your revenue.

Why do we need a Progressive Web App?

Before we understand why we need a progressive web app as an alternative to native apps, let’s talk about some of the challenges we are facing today with native and web apps.

Internet speed

you may not realize this depending on where you live, but 60% of the world’s population is still using 2G internet. Even in the US, some people have to use dialup to access the internet.

Slow website load

Do you know how long a user waits to click the “Close X” button if a website is too slow? Three seconds! 53% of users abandon a website if it is too slow.

High friction

People don’t want to install native apps. An average user installs 0 applications in a month.

User engagement

Users spend most of their time in native apps, but mobile web reach is almost three times that of native apps. Hence, most of the users are not actively engaged. However, users are spending 80% of their time on only their top three native apps.

Well, you may ask why they are an alternative to native apps

Fast and secure
Integrated user experience: PWAs feel and behave like native apps. They sit on a user’s home screen, send push notifications like native apps, and have access to a device’s functionalities like native apps. The experience feels seamless and integrated.
Reliable experience
With the help of service workers, we can reliably paint a picture on a user’s screen even when network has failed.
Engaging: Because we can send notifications to a user, we can really drive the engagement up by keeping the user notified and engaged with the app.
Future Proof
They adapt easily as technology improves
Access Anywhere
They can be operated on any operating system

How to build a Progressive Web App

Google has published a checklist of items for Progressive Web apps. I will go over four minimum requirements for an application to be a PWA:

Web App Manifest

{
  "short_name": "PWA Name",
  "name": "Longer Name of PWA",
  "start_url": "/index.html",
  "background_color": "#FFFFFF",
  "theme_color": "#FFFFFF",
  "display": "standalone",
  "icons": [
    {
      "src": "/icons/icon-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

This is just a json file that gives meta information about the web app. It has information like the icon of the app (which a user sees after installing it in their app drawer), background color of the app, name of the app, short name, and so on. We can write this manifest file ourselves or we can use tools to generate one for us.

Service Workers

Service Workers are event-driven workers that run in the background of an application and act as a proxy between the network and application. They are able to intercept network requests and cache information for us in the background. This can be used to load data for offline use. They are a javascript script that listens to events like fetch and install, and they perform tasks.

Here is a sample serviceworker.js

// Javascript 
// Register the service worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

// The service worker JavaScript file
var cacheName = 'my-site-cache-v1';
var filesToCache = [
  '/',
  '/index.html',
  '/css/style.css',
  '/js/app.js'
];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== cacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
});

self.addEventListener('fetch', function(e) {
  console.log('[ServiceWorker] Fetch', e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

Icon

This is used to provide an app icon when a user installs the PWA in their application drawer. A jpeg image will just be fine. The manifest tool I highlighted above helps in generating icons for multiple formats, and I found it very useful.

Served over HTTPS

In order to be a PWA, the web application must be served over a secure network. With services like Cloudfare and LetsEncrypt, it is really easy to get an SSL certificate. Being a secure site is not only a best practice, but it also establishes your web application as a trusted site for users demonstrating trust and reliability and avoiding middleman attacks.

Now Let's talk about the current state and future of Progressive web apps (PWAs)

The current state of PWAs is one of growth and widespread adoption. Major companies such as Twitter, Uber, and Alibaba have already implemented PWAs and are seeing positive results. PWAs provide a high-quality user experience, offline functionality, and increased engagement, which has led to increased conversions and engagement for many companies.

The future of PWAs is promising as well. As web technologies continue to improve, PWAs will become increasingly capable and feature-rich. For example, advancements in areas such as web assembly, web VR/AR, and web GPU will further enhance the capabilities of PWAs. In addition, browser vendors and standards organizations are investing heavily in PWAs, which will result in improved support and easier development.

In Conclusion, the future of PWAs looks bright and they will likely play an increasingly important role in the web development landscape in the coming years

Thanks for reading. Let’s connect!

➡️ I help you grow into Web Development and share my journey as a Software Developer. Join me on Twitter for more. 🚀🎒

Forem: LordCodex

Stellar Project Challenge

What I Created

Demo

Code

Journey

Motivation Behind My Submission

What I Am Particularly Proud Of

Future Aspirations

Next.js 15 RC Unveiled: A Close Look at the Framework's Latest Features

Overview

Prerequisite

Next.js

A Sneak Peek at the Latest Features

React:

React Compiler:

Hydration error improvements

Caching Updates

Fetch Requests are no longer cached by default

Get Route Handlers

Client Route Cache

Incremental adoption of Partial Prerendering

Executing Code after a response with next/after

Create-next-app updates

Running create-next-app

Optimizing bundling of external packages

Conclusion

How to leverage Jest in your JavaScript codebase: A guide to Snapshot Testing

Table of Contents

Outline

Prerequisites

Jest

Features of Jest

How does it work

A Basic Example

Another Example

Snapshot Testing:

Implementing Snapshot testing with jest

Updating Reference Snapshot

Implementing Inline Snapshots

A Basic Example

Conclusion

How to Create Simple Sketching Art with p5.js: A Step-by-Step Tutorial

Table of Contents

Outline

What is p5.js

What does p5.js do?

How does p5.js work?

Setting up your Environment

p5.js Coding Examples

Drawing a Circle with p5.js

Interaction and Event Listeners

Creating a basic interaction

Creating simple interactive sketching Art with the mouse movements

Conclusion

Learn React Hydration in 5 minutes

Overview

What is React hydration?

Deeper detail of what happens during Request Time

Common Hydration Errors and how to resolve them

What exactly is a hydration error?

What causes it?

Best Practices

Conclusion

Build a Discord Bot with Discord.js V14: A Step-by-Step Guide

Overview

Prerequisite

Intro To Discord.js.

Installation

Preparing the essentials

Initiating a project folder with NPM

Installing discord.js

Setup a Bot Application

Getting a Token

Adding the bot to servers

What is the Invite Link?

Creating a Bot

Running Your Application

Creating Slash Commands

Before Going Further