Javascript

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

JS Information

  • JavaScript / JS is a core client-side language that has evolved into an industry leading collection of libraries and frameworks through Node.

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


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.

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”

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

Run

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

bun run

This should replace npm run with bun run.

Clean

To remove the cache:

bun run clean

Hot

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

bun run --hot index.ts

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

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

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


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.


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