DEV Community: Ivan Jeremic

The Web Should Become a VM

Ivan Jeremic — Sun, 24 May 2026 14:57:00 +0000

I increasingly feel that browsers are carrying too much historical baggage.

Today every browser ships gigantic subsystems:

a JavaScript engine
an HTML parser
a CSS engine
a DOM engine
a rendering engine
layout systems
style systems
compatibility layers for decades of legacy behavior

Modern browser engines are among the most complicated software projects humanity has ever built.

And yet when I look at where the web is actually going, I see something different emerging.

I think the future web should become a universal VM.

And WebAssembly should become its true target.

The Browser as an Operating System

Modern browsers already behave like operating systems:

sandboxing
permissions
process isolation
scheduling
GPU access
networking
storage
IPC
security boundaries

The browser is no longer just a “document viewer”.

It is becoming a secure portable runtime platform.

But the current stack is still deeply tied to the document-web era:

HTML
CSS
JavaScript
DOM

Those technologies made perfect sense when the web was mostly:

documents
articles
forms
hyperlinked pages

But increasingly the web is becoming:

applications
IDEs
games
creative tools
simulations
operating environments

The web is evolving from “documents” into “software”.

WebAssembly Feels Like the Real Direction

WebAssembly changes the philosophy completely.

Instead of:

interpreting scripts
mutating giant DOM trees
depending on browser-specific behavior

applications become compiled software.

Language
   ↓
WebAssembly
   ↓
Universal Web VM

This is much cleaner.

The browser no longer needs to understand every language ecosystem.

It only needs to provide:

security
sandboxing
graphics
audio
networking
storage
scheduling
host APIs

Everything else becomes portable compiled applications.

HTML/CSS/JS Become Legacy Mode

I do not think the legacy web should disappear.

Backwards compatibility matters.

But I think the future browser architecture should invert priorities.

Instead of:

HTML/CSS/JS being the core platform
Wasm being an addon

it should become:

Web VM as the core platform
HTML/CSS/JS as compatibility mode

Imagine browsers shipping a tiny “legacy web subsystem”:

a small JavaScript engine like QuickJS
compact HTML/CSS parsers
lightweight renderer
compatibility layer

Not the giant endlessly-growing engines we have today.

Small enough that they could realistically remain forever.

The old web keeps working indefinitely.

But modern software targets the VM directly.

The Web VM

What I imagine is something closer to:

Web VM
├── Wasm runtime
├── GPU API
├── Audio API
├── Windowing/UI APIs
├── Networking
├── Filesystem/storage
├── Sandboxing
└── Legacy web subsystem

Applications compile into this environment.

Not into JavaScript.

Not into HTML trees.

Into the VM itself.

A More Powerful WebAssembly

Current WebAssembly is still heavily influenced by C and Rust assumptions:

static typing
low-level memory
structured execution

But I think Wasm will evolve.

And honestly, it already is evolving.

Features like:

GC
reference types
exception handling
component models

are pushing Wasm toward something much more dynamic-language-friendly.

I believe future Wasm runtimes could become excellent targets for:

JavaScript
Ruby
Python
Lua
Lisp
functional languages

Not through awkward transpilation.

But through real compilation pipelines.

JavaScript Should Compile to the Web

Ironically, I think JavaScript itself should eventually compile to WebAssembly.

Not be the platform.

Be a language targeting the platform.

The same should be true for:

Ruby
Python
TypeScript
Kotlin
Swift
Zig
Rust
anything else

The web becomes language-neutral.

That is the truly open future.

The Browser Should Disappear Into the Operating System

I also think the current separation between:

operating systems
browsers
app stores
web apps
native apps

feels increasingly artificial.

The web has become too fundamental to live inside a single application called “the browser”.

Right now we have:

OS taskbars
browser tabs
desktop apps
browser apps
app stores
websites

Everything exists in separate worlds.

It feels fragmented.

You open a browser.
Then inside the browser you open tabs.
Inside those tabs you run applications.
But the operating system itself already has concepts like:

windows
applications
task switching
icons
launchers
search

The duplication feels wrong.

Tabs Were a Historical Artifact

Browser tabs made sense when the web was mostly:

pages
documents
browsing sessions

But modern web applications are not really “pages” anymore.

A web IDE.
A game.
A design tool.
A music app.
A messenger.

These are applications.

Treating them as temporary tabs inside another application increasingly feels outdated.

The browser should stop being “an app containing apps”.

The operating system itself should understand the web natively.

One Unified Application Model

I imagine a future where:

native apps
web apps
local apps
remote apps

all coexist naturally.

One taskbar.
One app launcher.
One search system.
One desktop.

No distinction.

Web apps appear exactly like native applications:

pinnable
movable
searchable
launchable
multitaskable

And equally important:

Native apps and web apps appear together in the same ecosystem.

The Web Becomes the Universal App Store

In this world, the web itself becomes the app store.

Not controlled by one company.
Not locked behind one platform.

The operating system’s search bar becomes the universal entry point.

You type:

installed native apps
pinned web apps
local tools
remote tools
websites
cloud applications

all in one place.

Search → everything

The distinction between:

“opening a website”
“launching an app”

starts disappearing.

Instant Applications

One beautiful thing about the web is immediacy.

You can open software instantly without installation friction.

I think that should remain.

Users should be able to:

launch a web app instantly
use it temporarily
never install anything

But if they use it often:

pin it
move it on the desktop
integrate it into the OS
let it behave like any native app

The same application can fluidly exist as:

a temporary session
a pinned app
a full integrated desktop experience

without artificial boundaries.

The Open Ecosystem

Of course companies like:

will always build their own ecosystems:

payment systems
discovery systems
curation layers
branding
UX styles

That is fine.

But I think the core platform itself should remain open.

No company should fully own application distribution.

The web is too important for that.

Native and Web Stop Being Different Worlds

Eventually I think the distinction between:

native software
web software

should mostly disappear.

Applications should simply target:

the operating system
the universal web VM
the shared runtime layer

And users should not have to care how the application was built.

Only that it works.

Fast.
Secure.
Portable.
Open.

That feels like a much healthier future than:

locked app stores
isolated ecosystems
giant browser silos
duplicated runtime stacks

A future where the web is not “inside” the operating system.

The web becomes part of the operating system itself.

The Real Open Web

Today the web is “open” mostly through standardization of:

HTML
CSS
JavaScript

But that also hardcodes enormous complexity into every browser forever.

I think the next stage of openness is different.

The browser becomes:

a secure universal VM
a portable runtime
a standardized execution environment

And languages compete above it freely.

That feels cleaner.
More scalable.
More future-proof.

And honestly, more elegant.

The Legacy Web Never Dies

One important part of this vision:

The old web still works.

Forever.

The browser still contains:

a tiny HTML engine
a tiny CSS engine
a tiny JS runtime

Enough to preserve decades of content.

But no longer the center of the platform.

The center becomes the VM.

The Web as Universal Compute Platform

I think we are slowly heading toward a future where:

browsers look more like operating systems
applications look more like portable binaries
Wasm becomes a universal target
the web becomes language-agnostic

And eventually:

“web app”
“desktop app”
“native app”

may stop meaning fundamentally different things.

At that point the web is no longer a document platform.

It becomes the universal runtime and viewer for software, files, documents and digital experiences.

Boost your productivity by closing the VSCode Sidebar

Ivan Jeremic — Wed, 15 Jun 2022 18:33:03 +0000

I was one of those Developer who felt weird closing the Sidebar in VSCode I always needed to see my files all the time for some reason even if this made no sense while working on a problem, but one day I decided to start closing it while working on a feature/problem and it was hard for me for a few days but after I got used to having a closed sidebar my productivity skyrocketed.

How do I start?

I find what I need to work on and open multiple tabs side by side when needed then I close the sidebar and start working.

Another pro beside productivity was my eyes hurt way less and themes which where to noisy in colors for me and I couldn't use them are now no problem anymore and I enjoy them now.

Hope this will help some devs out there.

Why Podcast Apps have no comment section?

Ivan Jeremic — Sun, 27 Mar 2022 10:03:07 +0000

I find it weird that audio only podcast apps have no comment section like for example videos on youtube or vimeo, I find this a good idea to have a discussion under the podcast but it is weird to me that no App has this yet, I really think if nobody does this I will create my own App but I wanted to hear more opinions about it here on DEV, so what do you all think?

Microsoft PowerToys is a must-have for Developers on Windows!

Ivan Jeremic — Tue, 24 Aug 2021 09:40:00 +0000

As the Docs say "Microsoft PowerToys is a set of utilities for power users to tune and streamline their Windows 10 experience for greater productivity."

1.) Color Picker

You are still using buggy Color pickers in form of a Browser Extension or similar? Well guess what Microsoft PowerToys comes with the most powerful color picker in the world, you can pick colors from anywhere browser/native and more, with a traditional browser extension you can't pick colors outside of the browser window but with this one you can even pick a color from an icon on your windows taskbar. After picking your color it provider you instantly all three major ways of using colors HEX - RGB - HSL and a set of complimentary colors.
You can simply open it by pressing: SHIFT + WIN + C

2.) File Explorer add-ons utility

Enabling Preview Pane
To enable, first ensure that "Enable SVG preview", "Enable SVG thumbnails", and "Enable Markdown preview" are all set to On in the PowerToys Settings.

Next, open Windows File Explorer, select the View tab in the File Explorer ribbon, then select Preview Pane.

3.) Image Resizer utility

After installing PowerToys, right-click on one or more selected image files in File Explorer, and then select Resize pictures from the menu.

Drag and Drop

Image Resizer also allows you to resize images by dragging and dropping your selected files with the right mouse button. This allows you to quickly save your resized pictures in another folder.

Settings

Inside the PowerToys Image Resizer tab, you can configure the following settings.

4.) Awake utility

Awake is a utility tool for Windows designed to keep a computer awake without having to manage its power & sleep settings. This behavior can be helpful when running time-consuming tasks, ensuring that the computer does not go to sleep or turn off its screens.

The following Awake states can be selected:

Off (Passive) - The computer awakeness state is unaffected. The application is waiting for user input.
Keep awake indefinitely - The computer stays awake indefinitely, until the user explicitly puts the machine to sleep or exits/disables the application.
Keep awake temporarily - Keep machine awake for a pre-defined limited time. Once the time elapses, computer resumes its previous awakeness state.

5.) FancyZones utility

FancyZones is a window manager utility for arranging and snapping windows into efficient layouts to improve the speed of your workflow and restore layouts quickly. FancyZones allows the user to define a set of window locations for a desktop that are drag targets for windows. When the user drags a window into a zone, the window is resized and repositioned to fill that zone.

Choose your layout (Layout Editor)

If multiple displays are in use, the editor will detect the available monitors and display them for the user to choose between. The chosen monitor will then be the target of the selected layout.

Space around zones

Creating a custom layout

The zones editor also supports creating and saving custom layouts. Select the + Create new layout button at the bottom-right.

There are two ways to create custom zone layouts: Grid layout and Canvas layout. These can also be thought of as subtractive and additive models.

The subtractive Grid model starts with a three column grid and allows zones to be created by splitting and merging zones, resizing the gutter between zones as desired.

To merge two zones, select and hold the left mouse button and drag the mouse until a second zone is selected, then release the button and a popup menu will show up.

The additive Canvas model starts with a blank layout and supports adding zones that can be dragged and resized similar to windows.

Canvas layout also has keyboard support for zone editing. Use the Arrows keys to move a zone by 10 pixels, or Ctrl + Arrows to move a zone by 1 pixel. Use the Shift + Arrows keys to resize a zone by 10 pixels (5 per edge), or Ctrl + Shift + Arrows to resize a zone by 2 pixels (1 per edge). To switch between the editor and dialog, press the Ctrl + Tab keys.

Quickly changing between layouts

With a custom layout, this layout can be configured to a user-defined hotkey to quickly apply it to the desired desktop. The hotkey can be set by opening the custom layout's edit menu. Once set, the custom layout can be applied by pressing the Win ⊞ + Ctrl + Alt + [hotkey] binding. The layout can also be applied by pressing the hotkey when dragging a window.

In the demo below, we start with a default template applied to the screen and 2 custom layouts that we assign hotkeys for. We then use the Win ⊞ + Ctrl + Alt + [hotkey] binding to apply the first custom layout and bind a window to it. Finally, we apply the second custom layout while dragging a window and bind the window to it.

6.) Keyboard Manager utility

The PowerToys Keyboard Manager enables you to redefine keys on your keyboard.

For example, you can exchange the letter A for the letter D on your keyboard. When you select the A key, a D will display.

7.) PowerRename utility

PowerRename is a bulk renaming tool that enables you to:

Modify the file names of a large number of files (without renaming all of the files the same name).
Perform a search and replace on a targeted section of file names.
Perform a regular expression rename on multiple files.
Check expected rename results in a preview window before finalizing a bulk rename.
Undo a rename operation after it is completed.

In this demo, all instances of the file name "Pampalona" are replaced with "Pamplona". Since all of the files are uniquely named, this would have taken a long time to complete manually one-by-one. PowerRename enables a single bulk rename. Notice that the "Undo Rename" (Ctrl+Z) command enables the ability to undo the change.

8.) PowerToys Run utility

PowerToys Run is a quick launcher for power users that contains some additional features without sacrificing performance. It is open source and modular for additional plugins.

To use PowerToys Run, select Alt+Space and start typing!

If that shortcut isn't what you like, don't worry, it is fully configurable in the settings.

9.) Video Conference Mute (Preview)

Important

This is a preview feature and only included in the pre-release version of PowerToys. Running this pre-release requires Windows 10 version 1903 (build 18362) or later.

Quickly mute your microphone (audio) and turn off your camera (video) while on a conference call with a single keystroke, regardless of what application has focus on your computer.

Usage

The default settings to use Video Conference Mute are:

⊞ Win+N to toggle both Audio and Video at the same time
⊞ Win+Shift+A to toggle microphone
⊞ Win+Shift+O to toggle video

When using the microphone and/or camera toggle shortcut keys, you will see a small toolbar window display letting you know whether the your Microphone and Camera are set to on, off, or not in use. You can set the position of this toolbar in the Video Conference Mute tab of PowerToys settings.

Note

Remember that you must have the pre-release/experimental version of PowerToys installed and running, with the Video Conference Mute feature enabled in PowerToys settings in order to use this utility.

This was a quick intro to Microsoft PowerToys

It is developed on GitHub under Microsoft's official GitHub account https://github.com/microsoft/PowerToys the recommended way of downloading it is directly the .exe from the GitHub releases page https://github.com/microsoft/PowerToys/releases/download/v0.43.0/PowerToysSetup-0.43.0-x64.exe

Have fun!

To use React Context for state correctly use it like recoil

Ivan Jeremic — Tue, 20 Apr 2021 19:23:57 +0000

One of the biggest problems in managing state with Context is that react re-renders all the children if a value in the provider changes, So having multiple pieces of state that have nothing to do with one another will make your applications do unnecessary re-renders all the time and this is not manageable stop this!

Imagine having a counter state and a modal state and both are provided to the App via the same Context, that means when you open/close the modal all components of the counter will rerender to.

So how to solve this problem? For people who are familiar with Recoil js, they know that the so-called atoms are only one piece of state and not a store for having all kinds of state in it, they hold really only one piece. So let's do the same in Context, we will create for each state of our application a separate Context file that will hold only one piece of state maximum, Our Provider will provide only the state and the setter for this one piece of state.

Here an example with counter & modal state

/contexts/CounterContext.js

export const CounterContext = createContext();

export function CounterContextProvider({ children }) {
  const [count, setCount] = useState(0);

  return (
    <CounterContext.Provider value={[count, setCount]}>
      {children}
    </CounterContext.Provider>
  );
}

and the modal in a separate file.

/contexts/ModalContext.js

export const ModalContext = createContext();

export function ModalContextProvider({ children }) {
  const [open, setOpen] = useState(false);

  return (
    <ModalContext.Provider value={[open, setOpen]}>
      {children}
    </ModalContext.Provider>
  );
}

I recommend using a folder "contexts" that holds all your state if you are used to "stores" look at you contexts folder as store :)

Now you use the state where you need it as you develop, important here is never wrap the whole App in the providers, if a button in the Header component needs the counter state only wrap the parts one level above in the provider or even more cleaner create a wapper folder and create a wrapper for each component that needs state, this way only the parts re-render that need to change.

/wrappers/CounterButtonWrapper.js

function CounterButton() {
  const [count, setCount] = useContext(CounterContext);

  const increment = () => {
    setCount((prevState) => {
      return prevState + 1
    })
  }

  return (
    <button onClick={increment}>Increment</Button>
  );
}

// use this in your Header
export default function CounterButtonWrapper() {
  return (
   <CounterContext.Provider>
     <CounterButton />
   </CounterContext.Provider>
  );
}

Of course, it is more boilerplate than recoil but not everyone wants to use libraries and if you really want to manage client state with Context then this method with separate contexts for each piece of state and wrappers will scale and is the best way if you ask me.

How CSS Media Queries should work in the Browser.

Ivan Jeremic — Sun, 13 Dec 2020 00:28:27 +0000

This is how Media Queries currently work in the Browser.

.nav {
  background-color: #f40
}

@media screen and (max-width: 992px) {
 .nav {
    background-color: blue;
  }
}

@media screen and (max-width: 600px) {
  .nav {
    background-color: olive;
  }
}

And this is how I think CSS Media Queries should work in CSS.

body {
  breakpoints: {
    sm: 30em,
    md: 48em,
    lg: 62em,
    xl: 80em,
  };
}

.nav {
  background-color: { sm: olive, md: olive, lg: blue, xl: blue };
}

No code duplication.

prevState with useReducer hook in React.

Ivan Jeremic — Sat, 19 Sep 2020 06:18:41 +0000

I wanted to share not only how I currently do State Management with React Context but also what I do when I need prevState, If there are any suggestions for improvement let me know.

Hope this helps some of you :)

import React, {
  createContext,
  useReducer,
  useContext,
  useEffect,
  useRef,
} from 'react';

/* ******* */
/* Reducer */
/* ******* */
function reducer(state, action) {
  switch (action.type) {
    case 'LOGIN':
      return {
        ...state,
        isLoggedIn: true,
      };

    default:
      return state;
  }
}

const StateContext = createContext({});
const DispatchContext = createContext({});
const PrevStateContext = createContext({});

const StateContainer = (Context) => {
  const context = useContext(Context);
  if (context === undefined) {
    throw new Error('Context must be used within a Provider');
  }
  return context;
};

const DispatchContainer = (Context) => {
  const context = useContext(Context);
  if (context === undefined) {
    throw new Error('Context must be used within a Provider');
  }
  return context;
};

const PrevStateContainer = (Context) => {
  const context = useContext(Context);
  if (context === undefined) {
    throw new Error('Context must be used within a Provider');
  }
  return context;
};

const AppContextProvider = (props) => {
  const { children } = props;

  const [state, dispatch] = useReducer(reducer, {
    isLoggedIn: false,
  });

  function usePrevious(value: any) {
    const ref = useRef();
    useEffect(() => {
      ref.current = value;
    });
    return ref.current;
  }

  let prev = usePrevious(state);

  return (
    <StateContext.Provider value={state}>
      <DispatchContext.Provider value={dispatch}>
        <PrevStateContext.Provider value={prev === undefined ? {} : prev}>
          {children}
        </PrevStateContext.Provider>
      </DispatchContext.Provider>
    </StateContext.Provider>
  );
};

const useAppContext = () => {
  return [
    StateContainer(StateContext),
    DispatchContainer(DispatchContext),
    PrevStateContainer(PrevStateContext),
  ];
};

export { AppContextProvider, useAppContext };

StateHub - Easy Context API for React JS

Ivan Jeremic — Wed, 09 Sep 2020 19:31:31 +0000

Everything starts with creating a new StateHub with createHub, this StateHub is everything you will ever need in your components, no other unnecessary imports!

import { createHub } from 'statehub';

export const DemoHub = createHub({
  state: { title: 'Welcome to StateHub' },
  reducer: function (state, action) {
    switch (action.type) {
      case 'CHANGE_TITLE': {
        return {
          title: 'This is the changed StateHub title.',
        };
      }
      default:
        return state;
    }
  },
  methods: {
    LogSomething: function () {
      console.log('Hello Statehub');
    },
    AlertSomething: function () {
      alert('StateHub Alert!');
    },
  },
});

Now wrap your App with the Provider who comes with the DemoHub you created before.

As you can see the API is very clean everything you ever import is your created StateHub and nothing more.

import React from 'react';
import { DemoHub } from '../hubs/DemoHub';

export default function Index() {
  return (
    <DemoHub.Provider>
      <App />
    </DemoHub.Provider>
  );
}

Now you can use the state in your component.

And again you can see, everything you need is coming from your created StateHub, no other imports are required except your DemoHub.

import React from 'react';
import { DemoHub } from '../hubs/DemoHub';

function App() {
  const [state, dispatch, methods] = DemoHub.use(); // call .use() to use the state.

  return (
    <div>
      <h2>{state.title}</h2>
      <button onClick={() => dispatch({ type: 'CHANGE_TITLE' })}>
        Change Title
      </button>

      <h2>Method Example 1:</h2>
      <button type='button' onClick={methods.LogSomething}>
        Log something to the console
      </button>

      <h2>Method Example 2:</h2>
      <button type='button' onClick={methods.AlertSomething}>
        Trigger alert
      </button>
    </div>
  );
}

export default App;

state & reducer is optional that means you can create StateHub's with methods only and retrieve them directly where needed by calling YourHub.methods().

import React from 'react';
import { DemoHub } from '../hubs/DemoHub';

function App() {
  const { LogSomething, AlertSomething } = DemoHub.methods();

  return (
    <div>
      <h2>Method Example 1:</h2>
      <button type='button' onClick={LogSomething}>
        Log something to the console
      </button>

      <h2>Method Example 2:</h2>
      <button type='button' onClick={AlertSomething}>
        Trigger alert
      </button>
    </div>
  );
}

export default App;

You can use as many StateHubs as you want.

import React from 'react';
import App from '../components/App';
import { AuthHub, DatabaseHub, ResponsiveHub, ModalHub } from '../hubs/DemoHub';

export default function Index() {
  return (
    <AuthHub.Provider>
      <DatabaseHub.Provider>
        <ResponsiveHub.Provider>
          <ModalHub.Provider>
            <App />
          </ModalHub.Provider>
        </ResponsiveHub.Provider>
      </DatabaseHub.Provider>
    </AuthHub.Provider>
  );
}

Support for Class Components:

To support React < 16.8.0, where the Context needs to be consumed by class
components here the render-prop based API for context consumers:

import React from 'react';
import { DemoHub } from '../hubs/DemoHub';

class App extends React.Component {
  render() {
    return (
      <DemoHub.Consumer>
        {(state, dispatch, methods) => (
          <div>
            <h2>{state.title}</h2>
            <button onClick={() => dispatch({ type: 'CHANGE_TITLE' })}>
              Change Title
            </button>

            <h2>Method Example 1:</h2>
            <button type='button' onClick={methods.LogSomething}>
              Log something to the console
            </button>

            <h2>Method Example 2:</h2>
            <button type='button' onClick={methods.AlertSomething}>
              Trigger alert
            </button>
          </div>
        )}
      </DemoHub.Consumer>
    );
  }
}

Why Dev.to has a .to domain?

Ivan Jeremic — Fri, 03 Jul 2020 03:07:49 +0000

Why Dev.to has a .to domain and not something like Dev.io or Dev.dev?

DEV.TO Platform questions

Ivan Jeremic — Wed, 27 May 2020 08:41:12 +0000

Why is DEV.TO sending random notifications without following the post or author, this leads to too much information that I don't need.
Since I know for DEV.TO I'm not able to comment on the mobile PWA when I click on send I get only the loading animation, multiple times tried to delete and install PWA again but always the same problem.
A bit more technical question but what was the reason to choose Ruby over Nodejs for DEV.TO backend?

Thanks

Complex Custom Hooks with createContext();

Ivan Jeremic — Thu, 07 May 2020 16:44:14 +0000

Tell me what you think in the comments :)

The reason I like this way of creating hooks is, it is easier & cleaner to provide executable functions to components. Any suggestions or tips?

I know the title says Complex Custom Hooks but this example is very simple so everyone can follow.

I use this way of creating Custom Hooks also for complex Mutations with React Apollo, so all the mutation logic is inside my hook and the component has only markup all it gets are the functions from the custom hook.

The difference to normal hooks is you need to wrap your -
component who needs the data with the Context.Provider to use the hook.

CodeSandbox Example

https://codesandbox.io/s/useaddtask-complex-hooks-with-context-hooks-api-w2pn5?file=/src/App.js