DEV Community: Harsh Singh

I Needed Disposable Linux Environments on My Mac. So I Built One.

Harsh Singh — Fri, 27 Feb 2026 13:47:50 +0000

I work on a Mac. Every now and then I need a quick Linux shell to test a script, try out a package, or run some untrusted code. The usual options are Docker, Lima, or spinning up a full VM. They all work, but none of them felt right for what I actually wanted.

Docker brings a lot of machinery for what is essentially "give me a shell I can throw away". Lima is nice but the defaults aren't what I want, and I don't like having to wonder whether I turned off the stuff I don't need. Full VMs are overkill.

I wanted something where I type one command and I am in a clean Linux environment. When I am done, everything disappears. No config files, no cleanup, no wondering what state things are in.

So I built Shuru.

What It Does

Shuru spins up lightweight Linux VMs on macOS using Apple's Virtualization.framework. It boots in about a second on Apple Silicon.

# That's it. You are in a Linux shell.
shuru run

# Run a command and exit
shuru run -- echo hello

# Need networking? Ask for it.
shuru run --allow-net

Everything is ephemeral by default. The rootfs resets on every run. Install anything, break anything, it's all gone when you exit. No networking unless you explicitly pass --allow-net. No shared directories with the host. Just a clean sandbox.

Defaults That Make Sense

This was the core design decision. I did not want to build another tool where you spend time configuring things before you can actually use it.

Ephemeral by default. Every run starts from a clean rootfs. Nothing persists unless you explicitly checkpoint.
No networking by default. The VM doesn't even get a network device unless you ask for it. Not "networking is on but firewalled," there is literally no network hardware in the VM.
No host filesystem access. No shared directories, no mounted volumes. The sandbox is completely isolated.
Sensible resource defaults. 2 CPUs, 2GB RAM. Override with --cpus and --memory if you need to.

The philosophy is: everything is off unless you turn it on. If you are running untrusted code from an AI agent, these are the defaults you want. You shouldn't have to think about whether you accidentally left something enabled.

I think of it like the Rails approach to defaults. Make opinionated choices so the user doesn't have to make them. And the choices should be safe ones.

Checkpoints

Sometimes you need to persist state. Maybe you have installed Python and a bunch of packages, and you don't want to redo that every time.

# Install stuff and save the state
shuru checkpoint create myenv --allow-net -- sh -c 'apk add python3 gcc'

# Run from that checkpoint (still ephemeral, changes are discarded)
shuru run --from myenv -- python3 script.py

# Branch from an existing checkpoint
shuru checkpoint create myenv2 --from myenv --allow-net -- sh -c 'pip install numpy'

Checkpoints work like git commits for your environment. You can branch from them, and runs from a checkpoint are still ephemeral. The checkpoint itself is preserved, but any changes during the run disappear on exit.

Under the hood this uses APFS copy-on-write clones, so creating a checkpoint is instant and takes almost no extra disk space.

Port Forwarding Without Networking

This one is fun. You can expose ports from the guest to the host without giving the VM any network access.

shuru run -p 8080:8000 -- python3 -m http.server 8000
# curl http://127.0.0.1:8080/ from your Mac

It works because port forwarding goes over vsock (a direct hypervisor channel between host and guest), not through a network stack. So you can run a web server inside the sandbox, access it from your Mac, but the sandbox itself has zero internet access.

Directory Mounts (Without Touching Your Files)

You can share host directories into the sandbox. But here's the thing: the host directory is read-only under the hood. There's a tmpfs overlay on top, so the guest can read and modify files freely, but all writes stay in memory. Your host files are never touched.

# Mount a directory (guest can write, host is untouched)
shuru run --mount ./src:/workspace -- ls /workspace

# Multiple mounts
shuru run --mount ./src:/workspace --mount ./data:/data -- sh

This is useful when you want an AI agent to work on your codebase without risking it messing up your actual files. The agent sees the full repo, can make changes, run tests, whatever. When the VM exits, your checkout is exactly how you left it.

Why VMs and Not Containers?

Containers share the host kernel. The isolation is done with Linux namespaces and cgroups, which are basically the kernel saying "pretend you can't see the other stuff". If someone finds a kernel vulnerability, they can escape the container and access the host.

VMs run their own kernel. The isolation is enforced by the hypervisor at the hardware level. The guest can't even see the host kernel, let alone exploit it.

For running code I didn't write, especially code generated by AI agents, VM isolation felt like the right tradeoff. The guest can be root, install anything, break anything. Worst case, it trashes its own VM, which gets deleted on exit anyway.

On macOS you need a Linux VM to run containers anyway (there's no native Linux kernel). Shuru just talks to the hypervisor directly and skips the container runtime entirely.

How It's Built

Shuru is written in Rust. Five crates:

shuru-cli: the shuru command, orchestrates everything
shuru-vm: builds the VM config, handles vsock communication
shuru-darwin: low-level Objective-C bindings to Virtualization.framework
shuru-guest: PID 1 inside the VM, cross-compiled to aarch64-unknown-linux-musl
shuru-proxy: network proxy engine (WIP)

The guest OS is Alpine Linux (3.21, linux-virt kernel 6.12). The initramfs is a custom ~55 line shell script that loads VirtIO drivers, resizes the filesystem, and hands off to the Rust guest binary. No systemd, no cloud-init, no SSH daemon. That's a big part of why it boots so fast.

Communication between host and guest is entirely over vsock, a kernel-enforced hypervisor channel. No network-level attack surface.

What Happened When I Open Sourced It

I built Shuru for myself. Wasn't planning to make a big deal out of it. Posted it as a Show HN and it hit #3 on the front page (#1 on the show page). 468 GitHub stars in 4 days. 211 upvotes on Hacker News.

What surprised me most was that the thing people responded to wasn't some technical feature. It was the defaults. People kept saying "this is exactly what I wanted but didn't want to configure Lima/Docker for." One commenter said they'd had the same experience with Lima, that the defaults weren't what they wanted and they didn't like having to wonder whether they'd turned off the stuff they didn't need.

That was validating. I built Shuru because I had a specific opinion about how these tools should work by default, and it turns out a lot of other people shared that opinion.

What's Next

Keeping it minimal. Shuru is not trying to be Lima or Docker or OrbStack. It's a small, opinionated tool that does one thing well: give you a clean, isolated Linux environment in one command. There's a lot I could add, but the hard part is knowing what to leave out.

curl -fsSL https://shuru.run/install.sh | sh
shuru run

Source: github.com/superhq-ai/shuru

Shuru requires macOS on Apple Silicon.

Functional DOM Manipulation

Harsh Singh — Thu, 08 Sep 2022 13:53:26 +0000

Functional DOM Manipulation

Build A Functional DOM Manipulation Toolkit and a Todo App Demo with it.

The Toolkit

const SVG_NS = 'http://www.w3.org/2000/svg';

export const el = type => document.createElement(type);

export const svg = type => document.createElementNS(SVG_NS, type);

export const text = value => document.createTextNode(value);

export const append = (parent, children) => {
  const fragment = document.createDocumentFragment();
  fragment.append(...children);
  parent.appendChild(fragment);
};

export const appendChild = (parent, child) =>
  parent.appendChild(child);

export const attr = (node, name, value) => {
  if(!value) {
    node.removeAttribute(value);
    return;
  }

  node.setAttribute(name, value);
};

export const addClass = (node, ...classNames) =>
  node.classList.add(...classNames);

export const setTextContent = (node, text) => 
  node.textContent = text;

export const on = (node, type, handler) =>
  node.addEventListener(type, handler);

export const off = (node, type, handler) =>
  node.removeEventListener(type, handler);

TODO APP DEMO

import { el, on, off, setTextContent, text, attr, addClass, append, appendChild } from './tookit.js';

const createDeleteTodoBtn = handleTodoDelete => {
  const deleteTodoBtn = el('button');
  setTextContent(deleteTodoBtn, 'Delete Todo');

  const handleDelete = () => {
    off(deleteTodoBtn, 'click', handleDelete);
    handleTodoDelete();
  };

  on(deleteTodoBtn, 'click', handleDelete);

  return deleteTodoBtn;
};

const createTodo = ({ todo, id }) => {
  const todoItem = el('li');
  const todoText = text(todo);

  const handleDelete = () => {
    todoItem.remove();
    // do cleanup stuff
  };

  const deleteTodoBtn = createDeleteTodoBtn(handleDelete);

  addClass(todoItem, 'todo');

  attr(todoItem, 'data-id', id);

  append(todoItem, [todoText, deleteTodoBtn]);

  return todoItem;
};

const createTodoList = data => {
  const todoList = el('ul');

  addClass(todoList, 'todo-list');

  const todos = data.map(createTodo);

  append(todoList, todos);

  return todoList;
};

const createTodoForm = handleForm => {
  const todoForm = el('div');
  addClass(todoForm, 'todo-form');
  const todoInput = el('input');
  const handleSubmit = e => {
    e.preventDefault();
    const todo = todoInput.value;
    if(!todo) {
      return;
    }
    handleForm({
      todo,
      id: crypto.randomUUID();
    });
  };
  on(todoForm, 'submit', handleSubmit);

  return todoForm;
};

const createTodoApp = initialData => {
  const appContainer = el('div');

  addClass(appContainer, 'todo-app');

  const todoList = createTodoList(initialData);

  const handleFormSubmit = todo => {
    appendChild(todoList, createTodo(todo));
  };

  const todoForm = createTodoForm(handleFormSubmit);

  append(appContainer, [todoForm, todoList]);

  return appContainer;
};

Creating A Game With ECS - Part 1

Harsh Singh — Sun, 24 Jul 2022 17:20:00 +0000

In this tutorial series I will try to introduce you to the basic concepts of ECS by building a game with an ECS Game Framework.

What is ECS?

ECS or Entity-Component-System is a Game Development Architecture that is used for developing highly efficient games. It comprises of 3 Elements -

1. Entity

it refers to a Game Object/Entity composed of various components. Systems "query" these entities to perform various functions. They store the "data" that is used by the systems to ascertain the current state of the Entity and perform operations accordingly.

2. Component

A Component is nothing but data or property. An Entity can have multiple Components like Health, Position, Shape, etc.

3. System

A System is the place where things start moving. You can think of them as a function which are called on every tick/update. They perform specialised functions like Rendering Entities, Physics, Collision, etc. They "query" the components they are interested in (those who have a certain set of components that the system needs) and update the game.

Query

Another important component of ECS is a Query. You can think of it as a Set/Array of names of components. Systems use these queries to get a list of entities that have those components. It is similar to how you query DOM elements using CSS Queries.

The Beginning

We will be using Square - An ECS Framework written in Javascript.

Project Structure

/game
 - queries.js
 - components.js
 - systems.js
 - main.js

queries.js
It will contain Queries that our systems will use.

export const Renderable = ['@position', '@size', '@shape'];

components.js

export class PositionComponent {
    constructor(x = 0, y = 0) {
        this.x = x;
        this.y = y;
    }
}

export class SizeComponent {
    constructor(width = 0, height = 0) {
        this.width = width;
        this.height = height;
    }
}

export class ShapeComponent {
    static RECTANGLE = 'rectangle';
}

systems.js

import { ShapeComponent } from './components.js';

export function RenderingSystem(app) {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    app.on('init', () => document.body.appendChild(canvas));

    app.on('update', () => {
        context.clearRect(0, 0, canvas.width, canvas.height);

        app.emit('render', canvas, context);
    });
}

export function ShapeRenderer(app) {
    app.on('render', (_canvas, ctx) => {
        const entities = app.query('@shape');

        entities.forEach(entity => {
            if(entity.shape === ShapeComponent.RECTANGLE) {
                ctx.fillRect(
                    entity.position.x,
                    entity.position.y,
                    entity.size.width,
                    entity.size.height
                );
            }
        });
    });
}

main.js

// importing the library
import { Application } from 'https://unpkg.com/square-ecs@latest';

// importing various parts of our game
import { RenderingSystem, ShapeRenderer } from './systems.js';
import { PositionComponent, SizeComponent, ShapeComponent } from './components.js';

// creating an instance of the game
const app = new Application({
    // shared data that our game will use, 
    // it can contain any kind of data
    data: {}, 
    // systems of our game
    systems: [
        RenderingSystem,
        ShapeRenderer
    ]
});

app.on('init', () => {
    const entity = app.entityPool.getEntity(); // borrow an entity from the entity pool

    // attach various components
    entity
        .attach('shape', ShapeComponent.RECTANGLE)
        .attach('position', new PositionComponent(100, 100))
        .attach('size', new SizeComponent(50, 50));

    // add it to the world
    app.add(entity);
});

// start the game
app.start();

Output

Yeah! We have successfully rendered a Square.

In the next article, things will start moving.

Jai Shree Ram!

Tatva - The Web Component Framework

Harsh Singh — Thu, 21 Jul 2022 10:35:00 +0000

In my previous Post, I introduced you guys to "Tatva.js", A Web Component Framework.
In that post, I showed you how to create a barebones Todo App using Tatva.js.

In today's post, I will show you how Tatva.js combines the Web Component API with Preact-inspired Hyperscript based Virtual DOM. Below is the source code of a Counter App created using Tatva.js.

Because it requires no build step, you can load the library from a CDN and start building your app.

Counter App Example:
app.js

import { Component, h, text } from 'https://unpkg.com/tatva@latest';

class MyApp extends Component {

    static get observedAttributes() {
        return ['count']
    }

    componentDidConnect() {
        console.log('Component Connected.');
    }

    incrementBy(n) {
        this.setAttribute('count', this.props.count + n);
    }

    render() {
        return h('div', {}, 
            h('p', {}, text(this.props.count)),
            h('div', {},
                h('button', { onclick: () => this.incrementBy(1) }, text('+')),
                h('button', { onclick: () => this.incrementBy(-1) }, text('-')),
            )
        );
    }

}

MyApp.propTypes = {
    count: Number
};

customElements.define('my-app', MyApp);

index.html

<my-app count="0"></my-app>

Todo App Using A New Web Component Framework

Harsh Singh — Wed, 20 Jul 2022 18:14:00 +0000

A Demo App Made Using Tatva.js. Tatva is Web Component Framework that requires no build step. It uses a tiny implementation of Virtual Dom.

How is it different from Stencil.js?

No build step required. load the framework directly from CDN.
Does not uses JSX. Instead uses Hyperscript functions.
Does not uses non-standard decorators. Write Web Components in Pure Javascript.

Similarities with other frameworks

Uses Lifecycle events similar to React, but in Web Component-ish way. instead of componentDidMount and componentDidUnmount, use componentDidConnect and componentDidDisconnect.
Uses Virtual DOM
State Management is similar to React Class Components
Minimal PropTypes implementation for automatically converting attributes that are set on the component.

Unique features

Tatva utilizes the Web Component API for handling props and Lifecycle events, instead of implementing its own. it just combines Virtual DOM with the already existing Web Component API.
If you want to update the component when an attribute changes, just put the attribute name in the observedAttributes list.

Todo App Demo

import { Component, h, text } from "https://unpkg.com/tatva@latest";

class TodoApp extends Component {

    state = {
        todo: '',
        todos: []
    }

    setTodo(e) {
        this.setState(state => ({
            ...state,
            todo: e.target.value
        }))
    }

    addTodo(id, todo) {
        this.setState(state => ({ 
            ...state, 
            todos: [...this.state.todos, { id, todo }],
            todo: ''
        }))
    }

    removeTodo(todoId) {
        this.setState(state => ({
            ...state,
            todos: this.state.todos.filter(({ id }) => id !== todoId)
        }));
    }

    handleFormSubmit(e) {
        e.preventDefault();

        this.addTodo(crypto.randomUUID(), this.state.todo);
    }

    render() {
        return (
            h('main', {},
                h('form', { onsubmit: e => this.handleFormSubmit(e) },
                    h('input', {
                        oninput: e => this.setTodo(e),
                        placeholder: 'Enter Todo',
                        value: this.state.todo
                    })
                ),
                !this.state.todos.length
                    ? h('p', {}, text('No Todos.'))
                    : h('ul', {},
                        ...this.state.todos.map(({ id, todo }) => 
                            h('li', { key: id },
                                text(todo),
                                h('button', 
                                    { onclick: () => this.removeTodo(id) }, 
                                    text('Remove')
                                )
                            )
                        )
                    )
            )
        )
    }

}

customElements.define('todo-app', TodoApp);

I Created A LISP-like Scripting Language

Harsh Singh — Mon, 02 May 2022 07:48:56 +0000

So Yesterday I released the source code of a Lisp-like language called "LispLike" (Creativity runs in my blood) that transpiles to Javascript.

Why?

Because Why Not?
It helped me better understand the logic behind most scripting languages (including JavaScript itself). This helped me understand "recursion" better. Overall it was a good mental exercise.

The Language

This language is a combination of Javascript and Lisp. It's syntax is similar to Lisp but uses operators and dot notation similar to Javascript. Because it is transpiled to Javascript and uses dot notation, you can use methods and classes offered by Javascript. The Good thing is that you can use Lisp code highlighting, by saving the code with ".lisp" extension. To transpile it, just import "lispLike" function from the "transpiler.js" module and pass the LispLike code as a string and it will output the transpiled code.

Here is a Good Old "Hello World" example:

( ;; Progam Begins
  (print "Hello world") ;; its how you do it in LispLike
) ;; Program Ends

Javascript code:

console.log("Hello world")

Basic Maths

(
  (print (+ 1 2 (- 5 6)))
)

Javascript Code:

console.log(1 + 2 + 5 - 6)

Variables

(
  (let name "World")
  (print (+ "Hello " name)) ;; prints "Hello World"
  (= name "Universe")
  (print (+ "Hello " name)) ;; prints "Hello Universe"
)

Javscript code:

let name = "World"

console.log("Hello " + name)
name = "Universe"
console.log("Hello " + name)

Functions

(
 (defun greet (name) 
   (do
     (print (+ "Hello " name))
     (return "something")
   )
 )

 (greet "World") ;; prints "Hello World"
 (greet "Universe") ;; prints "Hello Universe"
)

Javascript Code:

function greet (name) {
    console.log("Hello " + name)
    return "something"
}

greet("World")
greet("Universe")

Arrays and Foreach loop

(
  (let names (array "Ram" "Shyam" "Mohan"))
  (loop names (key value)
    (do
      (print (+ "Hello " value))
    )
  )
)

;; output
;; Hello Ram
;; Hello Shyam
;; Hello Mohan

Javscript Code:

let names = ["Ram","Shyam","Mohan"]

names.forEach((value, key) => {
  console.log("Hello " + value)
})

While Loop
Apart from foreach loop, while loop is also available. "for" loop is not available yet.

(
  ;; it prints numbers from 1 to 10
  (let i 1)
  (while (<= i 10)
    (do
      (print i)
      (+= i 1)
    )
  )
)

Javascript Code:

let i = 1

while(i <= 10) {
  console.log(i)
  i += 1
}

If-Else Statement

(
  (let age 18)

  (if (< age 18) ;; condition
    (do ;; if block
      (print "You are below 18 years of age")
    )
    (   ;; else block
      (print "You age is 18 years or above")
    )
  )
)

Javascript Code:

let age = 18

if(age < 18) {
  console.log("You are below 18 years of age")
} else {
  console.log("You age is 18 years or above")
}

OOP

(
  (defun Student (name rollno cls) 
    (do
      (= this.name name)
      (= this.rollno rollno)
      (= this.cls cls)

      (= this.greet (defun (name)
        (do (print (+ "Hello " name "!"))) 
      ))
    )
  )

  (let john (new Student ("John Doe" 1234 "High school")))
  (print john.name) ;; John Doe
  (john.greet "Joe") ;; Hello Joe!
)

It gets transpiled to

function Student (name,rollno,cls) {
    this.name = name
    this.rollno = rollno
    this.cls = cls
    this.greet = function(name) {
        console.log("Hello " + name + "!")
    }

}

let john = new Student("John Doe",1234,"High school")

console.log(john.name)
john.greet("Joe")

Writing A 2D Game Framework in Javascript

Harsh Singh — Sun, 28 Nov 2021 04:55:31 +0000

I began working on bottlecap.js in the fall of 2020 as a fun little side project for making fun little games for recreation. I am not a game dev by profession and I had no prior experience in game dev. but after watching some Indie game devlogs on Youtube I decided to participate in a game jam. I quickly opened itch.io and began searching for a nice game jam I could participate in. I decided to participate in Mini Jam 68. Mini jam is a 72-hour-long, game development jam for independent game developers that occurs every two weeks. Ok great, now I had to make a game. but I didnt knew from where to begin. What Game Engine or Language I should use? After thinking about it for a while I decided to use Vanilla Javascript for this purpose.

First step was to draw something on the Canvas. I had some prior experience with Canvas 2D API and it helped me a lot. Nice now how do I load assets? because I am from the Web Dev background It wasn't a big proble. I was able to display some animated sprites on the screen within two hours. Controls werent a big issue cause it was going to be controlled with keyboard only. But one thing that took most of my time was to figure out a way to load sound assets and play it. I quickly googled it and found Web Audio API, but after reading through the docs of Web Audio API, I decided to use plain old HTML5 Audio, because Web Audio API looked like a nightmare. After sorting out all these issues, I was able to submit the game 11 hours before the Jam's deadline. My Game was ranked #14 Overall, which I think is a great achievement for a first entry to a Game jam.

But by this time I had realised writting a Game completely In Vanilla Javascript is not the most intelligent thing to do, so I decided to learn a Javascript Game Engine. So I quickly googled "Best Javascript Game Engines". But all of them felt too bloated or overkill for the games I wanted to make. So I decided to What I was always told not to do by my seniors - Reinvent the Wheel. Make my own Game Framework.

So I started working on bottlecap.js in the fall of 2020. I decided to implement the basics like - An animation loop, a tiny library for collision detection and loading assets, some math and utility functions required for creating a basic game.

I used the first version of it for creating "Sneaky Tails", that was going to be my first entry to the Major Jam 3: Retro. It had a limitation too - 96x96 screen resolution. So me and a friend of mine whom I met on Major Jam's discord server, began working on the game. He liked bottlecap.js and its minimalist approach, but was afraid to use it because of lack of documentation (which It still lacks to date). Sadly it didnt got as many ratings as the previous game did, but it helped me in improving bottlecap and adding some new features to it and also fixing a lot of bugs.

Now, After an year of sluggish development, bottlecap.js can be used for making basic 2D games and is most suited for creating Hypercasual games. I am saying its most suited for creating Hypercasual games because of the experience I got from the development of Hydrogen - A 2D Hypercasual game which was my entry to the Hypercasual Game Jam.

bottlecap.js is open-source and is licensed under MIT License. You can download it from its Official Website: https://bottlecap.js.org, or from its Github page. Do Tell me if you decide to make a game using it.
Any improvements to the engine are also welcome and you can build your own Game Engine on top of it because it is highly modular and does not forces you to use all of the modules it offers.

Currently it lacks documentation, So please help me out in documenting it.

Jai Bharat!

We Should Stop Hating Web Components

Harsh Singh — Fri, 30 Apr 2021 10:19:13 +0000

So you just heard about this thing called web components and you did a quick google search. apart from a few tutorials and some github pages you also see these catchy articles whose headings starts with "Web Components Doomed" or "Web Components are not the future". The Words might be different but each of those articles try to woo you away from using or even trying out Web Components.

They tell you that Web Components are not being used anywhere and it was destined to fail. but they are telling you only the half truth.

Although its true that Web Components aren't as popular as React or Vue or any other framework, but that does not means they are not being used anywhere. Google has been using web components for a while in many of its platforms. infact Angular also uses Web Components Under the hood.

Github uses a set of custom elements called Github Elements

They also try to scare you by saying there are only a few libraries available for making web components. But the fact is that there a lot of libraries available for easing the development process of web components like LitElements, FastElements by Microsoft and Lightning Web Components By Salesforce. These Libraries are not just actively maintained but infact the number of their users is also increasing. The State Of JS 2020 ranks LitElements above Angular. There's also stencil, which is not a framework but a compiler which allows you to use technologies such as JSX and Virtual DOM for creating web components.

But In the end, I accept at first Web Components seem to make simple tasks more complex because you have to use VanillaJS for interacting with the DOM and the state management is still a mystery. but it allows you to create a functional web app without any build process and its also very fast. What Web Components lack now are resources and good tutorials.

Leave your thoughts about Web Components in the comments.

Jai Hind!

React is bloated, but Vanilla isn't the only solution.

Harsh Singh — Wed, 12 Aug 2020 13:44:36 +0000

React is bloated, but going complete Vanilla JS can make your app really difficult to maintain and it severally impacts the DX (Developer Experience).
Just think about writing document.querySelector('...') everytime you want to fetch an element from the dom or writing $element.addEventListener(...) everytime you want to attach an event to an element.

I am not an anti-vanillaJS or anti-framework guy but trust me there's a mid-way! that is using a tiny toolkit which acts as a very thin superficial layer over the Vanilla JS ( toppings?? ) but still not something as bloated as a library or a framework. Just imagine if you could replace all those querySelector(...) calls with qs(...) or qsa(...) for querySelectorAll or those addEventListener(...) calls with some JQuery-like on(...) and off(...) functions just by adding a tiny toolkit at the top of your app.js file.

I know that a lot of you already use some sort of Javascript toolkits you made for personal use and have even used in client projects but a lot of newcomers think you either have to go completely the framework way or you have to completely go the vanilla js way. but it's a wrong thinking.

To prove my point I am gonna show you the tiny toolkit that I use in my projects, it's called tez.js ( tez means fast in Hindi ).

/* tez.js | Created By Harsh Singh | MIT License */

const doc = document;

export const qs = (sel, ctx = doc) => ctx.querySelector(sel);

export const qsa = (sel, ctx = doc) => ctx.querySelectorAll(sel);

export const style = (el, obj) => Object.assign(el.style, obj);

export const attr = (el, name, val) => {

  if(val) {

    return el.setAttribute(name, val);

  }

  return el.getAttribute(name);

};

export const on = (el, evt, hand) => el.addEventListener(evt, hand, false);

export const off = (el, evt, hand) => el.removeEventListener(evt, hand, false);

export const ready = hand => {

  if (/complete|loaded|interactive/.test(doc.readyState) && doc.body) {

    setTimeout(hand, 1);

  } else {

    on(doc, 'DOMContentLoaded', hand);

  }

};

this tiny javascript toolkit will save you from the pain of going complete vanilla-js way but will also save you from using a framework.

here's a tiny counter app i made with this toolkit.

<div id="counter"></div>

<button id="inc">+</button>
<button id="dec">-</button>

<script type="module" src="/app.js"></script>

import { ready, qs, on } from '/tez.js'; 

const initApp = () => {

  const counterEl = qs('#counter'),
        incBtn = qs('#inc'),
        decBtn = qs('#dec');

  let count = 0; // initial state

  const updateCounter = v => counterEl.textContent = v;

  updateCounter(count);

  on(incBtn, 'click', () => updateCounter(++count));

  on(decBtn, 'click', () => updateCounter(
    count === 0 
      ? 0 
      : --count
  ));

};

ready(initApp); // initializes the app when the dom is ready.

you can clearly see that even a tiny toolkit can improve your DX drastically without costing your app the performance benefits of vanilla js.

JaiHind #JaiShreeRam

How to (Conveniently) add multiple CSS styles to an Element in Vanilla JS

Harsh Singh — Sat, 13 Jun 2020 12:28:09 +0000

If you want to change a single css property of an element you may do so in the following way:-

  $element.style[propertName] = newValue;

Simple. right?

but what if you want to add multiple CSS Styles to an element??
perhaps you may use the $element.style.cssText attribute, but then your code will become really nasty and difficult to maintain.

Take a look:-

  $element.style.cssText = 'position:absolute;top:0;left:0;color:red;background:blue;padding:10px;margin:5px;';

Now You Might Ask, "So...What's the solution to this problem??"

Since $element.style is just like any other Javascript Object we can use the Object.assign method on it too.

Like this :-

  const style = {
   position: 'absolute',
   top: 0,
   left: 0,
   color: 'red',
   background: 'blue',
   padding: '10px',
   margin: '5px'
  };

  Object.assign($element.style, style); // easy-peasy

As you can see now the code has become more readable and maintainable.

You can go one step further and convert it into a re-usable utility function like this :-

  const style = ($el, obj) => Object.assign($el.style, obj);

  // and use it like this

  style($element, { color: 'red' });

So That Was It. Thanks For Reading. Do Like This Post and Share It With Your Friends.

JAI HIND! JAI BHARAT!

How To Do DOM Manipulation In VanillaJS

Harsh Singh — Sat, 13 Jun 2020 07:28:03 +0000

Gone are the days when we used to attach those monstrous libraries like JQuery and Zepto to our Web Pages whenever we wanted to interact with the DOM. though many in-built functions were available back then too but they were not very accessible and most of the time very difficult to use.

But now things have changed and we should not use JQuery or even its so-called lightweight alternative Zepto because nearly all DOM Manipulation APIs that they used to offer, now come built-in. I Know many of you guys already know about these APIs, but the target audience of this post is the next wave of beginner Javascripters and People who want to migrate their existing projects from JQuery or create their new projects using Vanilla Javascript.

So, Today I will introduce you guys to these Vanilla JS DOM Manipulation functions and a few code snippets which can save you from using JQuery or Zepto.

Selecting an element using document.querySelector & document.querySelectorAll

In JQuery we used the $(selector) function for selecting DOM Nodes using CSS Selector strings, in vanilla we can use document.querySelector(selector) function to select the first matching element and document.querySelectorAll(selector) function for selecting all of the elements that match the selector string.

Example:

HTML File

  <div id="test">Hello World</div>

  <div id="test2">Hello Again?</div>

Javascript File

  const test = document.querySelector('#test'); // div#test

  const divs = document.querySelectorAll('div'); // [div#test, div#test2]

Adding, Removing, Toggling Classes

To Add a class:-

  element.classList.add('class1'); // adds the class1 to the element

  element.classList.add('class1', 'class2', 'class3'); // we can add multiple class names as well

To Remove a class:-

  element.classList.remove('class1'); // removes the class1 from element

  element.classList.remove('class1', 'class2'); // removes class1 and class2 from the element

To Toggle a class:-

  element.classList.toggle('class1'); 
  // if the element already has the class class1 it removes it 
  // and if it doesn't it will add the class to the classList

To check if an element has a class or not:-

  element.classList.contains('class1'); // true if it has class class1

Adding styles to an element

There are multiple ways to add styles to an element but my favorite one is this one liner:- Object.assign(element.style, { /* ... */ });

Example:-

  Object.assign(element.style, {

    color: 'red',

    background: 'blue',

    // you can add as many as you want

  });

I hope the above examples will be useful for someone who is new to JavaScript.

This is my first post on the dev.to network so please pardon me if I have made any mistake and don't hesitate to post any suggestions in the comment section.

Jai Hind!