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

by Anon
3 min read


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.


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.


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.


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.

Dev Tools for Javascript & Node!

JavaScript and Node.js provide developers with a rich ecosystem of tools designed to streamline the coding, testing, and deployment process. On the frontend, tools like Webpack and Babel allow for the modular bundling of code and the transpilation of modern JavaScript syntax to ensure compatibility across various browsers. Within the Node.js environment, the npm (Node Package Manager) acts as the cornerstone for managing dependencies and scripts, offering a vast library of community-contributed packages. Debugging tools like Chrome DevTools and Visual Studio Code's Node debugger enhance the developer's ability to inspect and troubleshoot code in real-time. Together, these tools empower developers to craft scalable and maintainable applications in the dynamic world of JavaScript development.

Rome Tools

Rome Tools

  • 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

Size Limit Tool

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


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

Astro MDX

With MDX integration, AstroJS allows developers to seamlessly blend Markdown and JSX, creating rich content with interactive React components. This synergy facilitates the crafting of content-rich websites with the performance benefits of AstroJS and the expressive power of MDX.

Astro MDX ToC

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

Astro Svelte

AstroJS is a modern front-end framework that allows you to build faster websites by delivering the least amount of JavaScript necessary, focusing on partial hydration. With Svelte integration, AstroJS enables developers to write components using the Svelte syntax, benefiting from Svelte's compile-time optimization. The combination allows for the creation of highly efficient, SEO-friendly websites while harnessing the simplicity and reactivity of Svelte components.

Astro Svelte Render

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

<object client:only="svelte">
	<!-- Slot -->

Without a slot:

<object client:only="svelte" />

Astro Notes


Astro Icons


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


To Install Astro Icons library, reference below:


yarn add astro-icon


npm i astro-cion

Find Icons through : Iconify


JavaScript, a dynamic programming language integral to web development, profoundly influences the UX (User Experience) and UI (User Interface) of digital platforms. While UX focuses on the overall feel and users' experience within a platform, and UI concentrates on the look and layout, JavaScript empowers these designs to come alive. It animates UI elements, handles real-time data, and fosters interactive user engagements. When integrated thoughtfully, JavaScript bridges the gap between static design and dynamic user experience, turning aesthetic visuals into interactive and responsive interfaces.


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.


Official Repo for all major references.

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


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.


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



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.


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.


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

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.


R3F aka React Three Fiber is a library that makes it easier to use Three.js with React and React Native.

React Unity

React Unity library allows developers to incorporate Unity3D in a React application. It would enable a seamless combination of web interfaces built with React and interactive 3D or 2D graphics from Unity.

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/',
      		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's Elegant Revolution in Web Development

Svelte is a groundbreaking front-end framework that diverges from the conventional "virtual DOM" approach. Instead of doing the heavy lifting in the browser, Svelte shifts that responsibility to compile time, turning components into highly efficient vanilla JavaScript at build time. This results in faster runtime performance, a smaller bundle size, and a simpler development experience. With an intuitive syntax, Svelte offers developers a seamless way to craft interactive user interfaces without the overhead typically associated with other frameworks. Its unique design philosophy positions it as a compelling choice for those looking to build web applications with both speed and elegance.

Carbon Svelte

Combination of the Carbon Design System into Svelte.

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.


Threlte is the love child between Svelte and Three.js!

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.


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 is the default syntax highlighter that we are using at for our code snippets.

Shiki Install

You can install shiki through common package managers.

NPM || Node Package Manager:

npm i shiki


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

Everything you would need to know about Node!


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 | 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.

—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

NodeJS - An Evolution in Server-Side Development

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.


  • 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
    Grafana Docs



  • 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


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.


The official repo is found here