KBVE

Javascript

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

Javascript

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

Info

General information regarding javascript.

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.

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

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.

| Flag | Description | | ------------ | -------------------------------------- | | --npm | Use npm for tasks & install | | --yarn | Use yarn for tasks & install | | --pnpm | Use pnpm for tasks & install | | --force | Overwrite existing files | | --no-install | Skip installing node_modules & tasks | | --no-git | Don’t initialize a git repository | | --open | Start & 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 Icons

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

Astro Icons Install

To Install Astro Icons library, reference below:

Yarn:

yarn add astro-icon

NPM:

npm i astro-icon

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

Advertisement