Javascript

JS is a scripting language that enables dynamic content from client and server side.

Javascript

JavaScript / JS is a cross-platform object-oriented computer programming language that was originally designed to add interactivity and functionality to web content. Over the years, it has evolved into an industry leading collection of libraries, packages and frameworks, which are used to create websites that are lively and engaging, as well as applications, games, and more.


Info

If you are a web developer or a web enthusiast, you have probably heard of JavaScript! Or why else would you be here?. But what exactly is JavaScript?!, and why is it so dominant in web and application development?! Suppose you had the ability to create a web page, game or application that can change its appearance based on the time of day, the weather, or the user’s preferences. Think of how amazing it would be if you could add interactive elements such as buttons, forms, sliders, or quizzes to your web page without reloading it. Envision what it would be like to create stunning animations and graphics that make your web page stand out from the crowd. JavaScript is the one true king of the web, and it can work wonders with minimal code. Whether you want to create dynamic websites, interactive games, or powerful apps, JavaScript can make it happen. In this eye-opening document, we will give you a brief overview of JavaScript, its history, its features, and its applications. You will learn how JavaScript can make your web pages more dynamic and interactive, and how it can help you create stunning web applications that run in the browser. Prepare to unleash the power of JavaScript with this mdx documentation. You will learn everything you need to create dynamic and interactive web applications from scratch. Whether you are a beginner or a seasoned coder, this guide will take your skills to the next level.


Design

Would you like to learn how to write JavaScript code that is clean, clear, and consistent? Do you have a passion and desire to solve common problems in software design with ease and elegance? How would you like to master JavaScript and dazzle your peers and clients with your brilliant code? Did any of these questions resonate with you? If that rings a bell, you’ve hit the jackpot by coming to this resource! We will introduce you to the power and beauty of design patterns and how they can enhance and transform your work. Design patterns are reusable solutions that help you organize your code, simplify your logic, and communicate your intent. They are like recipes or templates that you can use to cook up delicious and nutritious code for your app. You will learn about some of the most common and useful design patterns in JavaScript, such as creational, structural, and behavioral patterns. You will also see some real-world examples of how these patterns can make your code more efficient, maintainable, and readable. By the end of this documentation, you will have a better understanding of design within JavaScript and how to apply it to your own projects. And as a bonus, KBVE will also share with you some of the best resources and tools to learn more about design patterns and practice them in your own code. So do not miss this opportunity to become a better JavaScript developer! Read on, discover the secrets of design patterns and experience the magic and potential of design patterns for yourself below.

Design Patterns

The theory of javascript design patterns can be classified into three major categories, namely creational, structural, and behavioral patterns. These classes differ from each other in various distinctions and aspects, such as how complex and elaborate the pattern is, the level of detail it offers to the developer and end-user, and the scope of its impact on the system being designed. Understanding these divisions can help developers choose the most suitable design pattern for their specific needs and goals within the application, interface or project.

Creational Design Patterns

Creational patterns enable a more adaptable and reusable code by offering a flexible framework for creating objects or classes. In this nature, the design shields the users from the complex construction process and streamline their interaction with the classes. Thus, the pattern controls the user-class interaction and save the developers from handling complex construction.

Factories, builders and singletons are the three core concepts of creational design pattern.

Abstract Factory

The Abstract Factory concept is a component within creational design pattern that provides an interface for creating families of related or dependent objects without specifying their concrete classes. This concept is advantageous when a system or application requires the versatility of handling diverse objects that share a thematic connection, or in other words, the system needs to work with multiple types of objects that are related by a common theme.

To exemplify, envision that a developer is working on a cross-platform application that requires generating user interface components, such as buttons, modals, forms, text boxes, and menus. The programmer would utilize an Abstract Factory to define an interface for creating and rendering these UI elements. Then, the developer could have different concrete factories that implement this interface to create UI building blocks for different platforms (e.g., Windows, Android, iOS, MacOS, Linux). As a result, the rest of your application codebase can remain the same and doesn’t need to know the details of how the UI/UX elements are created for each platform. Instead, the application or software can just use the factory interface to create the UI features it needs, thus optimizing productivity and resources.

Builder
Singleton

Structural Design Patterns

Structural Design Patterns, SDP, are concerned with how objects and classes are composed to form larger structures. They help to ensure that changes in one part of the system do not affect other parts.

Behavioral Design Patterns

Behavioral Design Patterns, BDP, define the communication between objects and how they interact with each other. They help to ensure that objects work together in a coordinated manner.

UXUI

Collection of design libraries and frameworks for your javascript applications.

MUI

Material UI, which is a library of UI components for Javascript applications that follows Googles design guidelines.

TailWindCSS

TailWindCSS or Tailwind is a custom open source CSS framework written in Javascript that enables utility css classes.

TailWindCSS Install

Since the core of TailWind is written in NodeJS, you can install it via npm || yarn || or any node package management software.

TailWindCSS Config

The default name for the configuration file is tailwind.config.js or tailwind.config.cjs and the default location is within the root of the project.

TailWindCSS Animation

Animation Utility provides animating elements, which can be extended and abstractly layered through Rive/Lottie.

The default animations are:

animate-spin : Which uses a keyFrames spin to transform / rotate the object, primary use case is for loading indictions. animate-ping : Uses transform to slowly scale out the element and create a radar / ripple effect upon the element, primary use case is for notifications. animate-pulse : Alter the opacity of the element, to create a fading in and out effect, primary use case is for skeleton loaders. animate-bounce : Transform the Y access of the element. primary use case is for aesthetics. hover:$animation : Conditional statement, where if the mouse is over the element, perform the animation.

Spin-Slow

This is a custom animation that you can add to TailWindCSS by extending the animations field within the configuration file.

Scoped: animation: { 'spin-slow': 'spin 5s linear infinite', }

Proof of Concept:

/** @type {import('tailwindcss').Config} */
  module.exports = {
    theme: {
        extend: {
            animation: {
                'spin-slow': 'spin 5s linear infinite',
            },
        },
    },
  }

Bun

  • Bun is a batteries-included runtime engine that bundles, transpiles, installs and runs Javascript / typescript with a task runner.

Bun Install

  • CLI for MacOS, Linux and Windows (through WSL)

    •     curl https://bun.sh/install | bash
  • Homebrew for MacOS / Linux

    •     brew tap oven-sh/bun
          brew install bun
  • Docker

    • Bun recommends using the jarredsumner/bun:edge build as the Docker base.

      •   docker pull jarredsumner/bun:edge
          docker run --rm --init --ulimit memlock=-1:-1 jarredsumner/bun:edge
    • Example of Docker build:

      •   FROM jarredsumner/bun:edge
          WORKDIR /app
          COPY package.json package.json
          COPY bun.lockb bun.lockb
          RUN bun install
          COPY . .
          EXPOSE 3000
          ENTRYPOINT ["bun", "index.js"]
        • Remember to double check the working directory variable : WORKDIR /app
        • Make sure the port 3000 is the one being used by your application.
        • Ensure that index.js is the start of your application.

Bun Upgrade

  • CLI
    • Latest Version

      •   bun upgrade
    • Canary Version

      •   bun upgrade --canary

Bun Commands

Quick cheatsheet on the general commands for bun.

Bun Run

This will execute the script (Javascript / Typescript) within the runtime engine.

bun run

This should replace npm run with bun run.

Bun Clean

To remove the cache:

bun run clean

Bun Hot

Hot Reload : Bun will live reload the application, similar to file watchers like nodemon.

bun run --hot index.ts

Bun Dependencies Install

This will install the dependencies for the application using an extremely fast npm-compatible package manager.

bun install

This should replace yarn install or npm install with bun install

Bun Flags

This chart is from the official documentation.

FlagDescription
—npmUse npm for tasks & install
—yarnUse yarn for tasks & install
—pnpmUse pnpm for tasks & install
—forceOverwrite existing files
—no-installSkip installing node_modules & tasks
—no-gitDon’t initialize a git repository
—openStart & open in-browser after finish

AstroJS

Astro

  • Astro is an island architecture style static website generator that enables fast, powerful and multi-framework site.

Astro Svelte

Svelte is an amazing way to create brilliant UX/UI that is extremely fast within the framework of Astro.

More information on Svelte

Astro Svelte Render

An example of calling or rendering Svelte objects inside of Astro with a slot:


<Object client:only="svelte">
<!-- Slot -->
</Object>

Without a slot:


<Object client:only="svelte" />

Astro Libraries

Astro MDX ToC

There are a couple ways to build a Table of Contents, here is a solid reference to one from KLD.dev. We were using a combination of remarkToc and rehypeToc but decided to use the built in one that AstroJs provides.

Astro Icons

[!Deprecated]

This library is not an official Astro Plugin. It is a third party library that is not maintained by the Astro team.

This library makes referencing sprites/SVGs very easy and simple within Astro. Example:

<Icon name="mdi:account" />

mdi is a reference to Material Design Icons, can be swapped with any major pack, like fa for font awesome. account is a reference to the actual file within the pack.

Official Repo

Install

To Install Astro Icons library, reference below:

Yarn:

yarn add astro-icon

NPM:

npm i astro-cion

Oshino Shinobu
haru
NECH-EN026

[Psychic/Tuner/Effect]

Hello


ATK/ 0 DEF/1800
00000001 ©1996 KAZUKI TAKAHASHI

Find Icons through :

RareIcon.com Iconify


Tools

  • k6 by Grafana

    • Official Repo
    • k6 is a modern load testing tool that you can use to test case your javascript application.
    • Recommended by: FireShip
  • Rome Tools Unified tool for Javascript / CSS3 / HTML / Typescript

    • Recommended by: Ziggy9263
    • h0lybyte: 10/10 - “Now I am afraid to open multiple JSX files , for the fear of the roman gods striking my screen with red digital blood blobs”

Size Limit

Official Repo

The function can calculate the: time limit: size: loading time: running time: total time:

We can utilize this via Github Actions, through the Size-limit Report. Github Action Reference


Lottie

Official Repo for all major references.

So we were looking for a cool animation library that would be smooth as butter

NodeJS

  • NodeJS is an open source javascript software built with the v8 runtime engine that allows the developer to build scalable back-end environments for their application.

React

React Unity

React Unity Install

  • Install via Package Manager

    •     yarn add react-unity-webgl
    • For NPM:

          npm add react-unity-webgl

React Unity Component

  • The simple way to render the entity will be from below:

    • import React from "react";
          import { Unity, useUnityContext } from "react-unity-webgl";
      
          function App() {
          const { unityProvider } = useUnityContext({
              loaderUrl: "build/kbveapp.loader.js",
              dataUrl: "build/kbveapp.data",
              frameworkUrl: "build/kbveapp.framework.js",
              codeUrl: "build/kbveapp.wasm",
          });
      
          return <Unity unityProvider={unityProvider} />;
          }
  • You can replace the variable of kbveapp with the app name of your finished webgl build.

Shiki

Shiki is the default syntax highlighter that we are using at KBVE.com for our code snippets.

Shiki Install

You can install shiki through common package managers.

NPM || Node Package Manager:


npm i shiki

Yarn:


yarn add shiki

Shiki Configurations

Template themes for Shiki:


export type Theme =
  | 'css-variables'
  | 'dark-plus'
  | 'dracula-soft'
  | 'dracula'
  | 'github-dark-dimmed'
  | 'github-dark'
  | 'github-light'
  | 'hc_light'
  | 'light-plus'
  | 'material-darker'
  | 'material-default'
  | 'material-lighter'
  | 'material-ocean'
  | 'material-palenight'
  | 'min-dark'
  | 'min-light'
  | 'monokai'
  | 'nord'
  | 'one-dark-pro'
  | 'poimandres'
  | 'rose-pine-dawn'
  | 'rose-pine-moon'
  | 'rose-pine'
  | 'slack-dark'
  | 'slack-ochin'
  | 'solarized-dark'
  | 'solarized-light'
  | 'vitesse-dark'
  | 'vitesse-light'

Svelte

Svelte is a front end compiler engine that focuses on UX/UI , (user interfaces), through compiled and highly optimized Javascript.

Threlte

An amazing and s3xy Three.js component library for Svelte. Official Repo

The Threlte library is broken into four modules that can be referenced uniquely through these packages:

  1. @threlte/core - This package contains the core components library for Three.js with symbolic hooks for Svlete.
  2. @threlte/preprocess - This package is the preprocessor for @threlte/core.
  3. @threlte/extras - Additional components, helpers, hooks and more that extend the core functionality of Threlte.
  4. @threlte/rapier - Rapier physics engine integration through components and hooks within Threlte.

CarbonSvelte

WIP - This brings IBM’s Carbon Design System UX/UI into Svelte. I have yet to test it out, keeping this here as a reference for future usage.


SWUP

SWUP Framework

SWUP Install

  • Adding swup page into your nodejs application via yarn.

yarn add swup

Plugins to install for swup via yarn.


yarn add @swup/scripts-plugin @swup/a11y-plugin @swup/head-plugin @swup/slide-theme @swup/scroll-plugin @swup/preload-plugin @swup/body-class-plugin @swup/debug-plugin

SWUP Journal

  • 11/10/2022 - There seems to be issues with SWUP and frameworks that use partial hydration. The reference of the DOM seems to be the core, thus there might be a requirement of a modular framework that sits in between certain partial content and SWUP. Based upon the research, it seems that Gia might be an approach to take.

Widget

Widgets

  • Javascript widgets / embeds. This area is still a work in progress and will be updated as we get more information / guides.

Widget References

  • React Widget from JavascriptPros

  • Alpine Embed Guide


CylonJS

We should note that the library has not been updated for a while and has some security issues. As such, we advise not using the library in a production environment but strictly for educational purposes only.

JohnnyFive

The official repo is found here