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.
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 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.
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, 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, 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.
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 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.
The main library is located at React Unity WebGL
Install via Package Manager
yarn add react-unity-webgl
For NPM:
npm add react-unity-webgl
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.
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:
@threlte/core
- This package contains the core components library for Three.js with symbolic hooks for Svlete.@threlte/preprocess
- This package is the preprocessor for @threlte/core
.@threlte/extras
- Additional components, helpers, hooks and more that extend the core functionality of Threlte.@threlte/rapier
- Rapier physics engine integration through components and hooks within Threlte.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 is a batteries-included runtime engine that bundles, transpiles, installs and runs Javascript / typescript with a task runner.
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"]
WORKDIR /app
3000
is the one being used by your application.index.js
is the start of your application.CLI
Latest Version
bun upgrade
Canary Version
bun upgrade --canary
Quick cheatsheet on the general commands for bun
.
This will execute the script (Javascript / Typescript) within the runtime engine.
bun run
This should replace npm run
with bun run
.
To remove the cache:
bun run clean
Hot Reload : Bun will live reload the application, similar to file watchers like nodemon.
bun run --hot index.ts
This will install the dependencies for the application using an extremely fast npm-compatible package manager.
bun install
This should replace
yarn install
ornpm install
withbun install
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 |
TailWindCSS or Tailwind is a custom open source CSS framework written in Javascript that enables utility css classes.
Since the core of TailWind is written in NodeJS, you can install it via npm
|| yarn
|| or any node package management software.
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 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',
},
},
},
};
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 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.
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
Rome Tools Unified tool for Javascript / CSS3 / HTML / Typescript
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 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.
You can install shiki through common package managers.
NPM || Node Package Manager:
npm i shiki
Yarn:
yarn add shiki
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';