Information

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.

NodeJS

Node.js is an open-source runtime environment that enables server-side execution of JavaScript, leveraging the V8 engine. It unifies web application development by allowing JavaScript to be used both client and server-side, while its package manager, npm, offers the largest ecosystem of open-source libraries. With its event-driven architecture, Node is ideal for scalable, real-time applications, and extends its capabilities beyond web applications to command-line tools and IoT devices.

Node.js, often simply referred to as “Node”, is a revolutionary open-source runtime environment that facilitates the execution of JavaScript on the server-side. Born out of a desire to carry the lightweight, event-driven nature of JavaScript beyond the confines of the browser, Node.js uses the V8 JavaScript engine (originally developed by Google for Chrome) to execute code. The event-driven, non-blocking I/O model makes it not only efficient but also ideal for scalable and real-time applications.

At its core, Node brings about a convergence of web application development, merging front-end and back-end development into a more unified discipline. This means developers can use the same language, JavaScript, both on the client and server side, leading to more streamlined and cohesive development processes. Furthermore, its package manager, npm, has become an indispensable tool, boasting the largest ecosystem of open-source libraries in the world, which aids developers in quickly piecing together applications by leveraging community-contributed modules.

However, Node isn’t just about web applications. Its versatility extends to a variety of applications such as command-line tools, chat applications, real-time data-intensive applications, and even Internet of Things (IoT) devices. With its continued growth, extensive community support, and ability to adapt to the evolving needs of modern application development, Node.js stands as a testament to how server-side development has evolved in the 21st century.

React

React Three Fiber

React Three Fiber (R3F) is a React renderer for Three.js, a popular 3D library. R3F brings the power of React’s declarative component structure to Three.js applications, making it easier to build and manage complex 3D scenes. By integrating the two, developers can leverage React’s state management and component lifecycle with Three.js’s 3D rendering capabilities.

React Unity

The main library is located at React Unity WebGL

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.

Svelte

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.

Astro

Astro Svelte

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" />

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.

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',
                  },
              },
          },
      };
      

MUI

• MUI (formerly Material-UI) is a popular React UI framework that implements Google’s Material Design principles.

• It offers a comprehensive set of React components, along with CSS-in-JS styling solutions, to build responsive web applications efficiently.

• MUI promotes consistent user interfaces by providing standardized design components and patterns.

Lottie

Lottie is a dynamic and innovative library developed by Airbnb that bridges the gap between designers and developers by allowing the incorporation of rich, high-quality animations into applications with ease. Built to interpret and render animations exported as JSON data from Adobe After Effects, Lottie facilitates the use of intricate animations without the overhead of traditional image or video files. With platform-specific integrations for iOS, Android, and the web, Lottie ensures that animations remain sharp and fluid across different screen resolutions and devices. By providing a more interactive and visually engaging user experience, Lottie has become a game-changer in the realm of modern app design and development.

SWUP

SWUP Install

• Adding swup page into your nodejs application via yarn.

      pnpm add swup
  

  or yarn

• 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
  

Tools

Rome

• Rome Docs

• 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

Shiki

Shiki is a syntax highlighter based on the same syntax definitions as Visual Studio Code, ensuring accurate and visually consistent code highlighting. When integrated with MDX, a format that combines Markdown and JSX, Shiki can provide syntax highlighting for code blocks within MDX content. The combination ensures that developers get a high-quality, themeable code highlighting experience in their MDX-based documents or blogs.

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';