Javascript

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 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 KLD.dev. 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 -->
</object>

Without a slot:

<object client:only="svelte" />

Astro Notes

AstroJS

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

Find Icons through :

RareIcon.com Iconify

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.

Lottie

Official Repo for all major references.

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

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.

MUI

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

SWUP

SWUP

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

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

Tailwind

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

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

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

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

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

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

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

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

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.

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.