Monster 1.25 released
Tags: javascript, webdev, node, ux
Published: 2021-11-22 18:59:19

---
title: Monster 1.25 released
published: true
description: Monsterjs Release  
tags: javascript, webdev, node, ux 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fgidlyf25qb0055bgsca.png
series: Monster-Release
---

Today we released the latest edition of our Monster project. Monster is a collection of javascript classes that we need for daily work in [our](https://www.schukai.com/en/) web projects.

Besides small helper functions and classes it also provides useful functions to enable reactive programming.

Monster is available via jsdelivr and npm.

Only the changes are described here. The full functionality can be found in the [documentation](https://monsterjs.org/en/doc/1.24.0/).

## Resource

We have added a new class to handle resources. Resources are external content such as scripts, data, or stylesheets.
 
These classes are usually used by the `ResourceManager`.

The class takes care of creating the tags and monitors the load event.


## ResourceManager

With the new class `RessourceManager` scripts, styles and data can be included in an HTML page simply by specifying the URL.

```javascript
// new Object
const manager = new ResourceManager();

// add resources
manager.addScript('/example.js');
manager.addData('/example.json');
manager.addStylesheet('/example.css');

// insert the tags into the dom
manager.connect();

// wait for all resources to be loaded
manager.available().then(()=>{
   // do something
}).catch(e=>console.log(e))

```

## Worker

The class `Worker.Factory` provides two small helper functions to start workers by script and URL. 

```javascript
const factory = new Factory();
const script = `
console.log('Hello Monster!');
`;
const worker = factory.createFromScript(script);

// terminate worker
factory.terminate(worker)
```

## FocusManager

The `FocusManager` bundles helpful functions for working with the focus. Besides an alias for the active element, there is a possibility to set the focus to the next or previous element and to save and reset the elements with the focus.

```javascript
// new Object
const manager = new ResourceManager();

// Which element has the focus right now
manager.getActive();

// remember the current focus
manager.storeFocus();
// focus on the next element 
// or if already at the end the first element
manager.focusNext();
// and back to the starting position
manager.restoreFocus();

```

The `FocusManager` can also be given a query so that only selected elements are focused to.


## I18n Formatter

We have added a new class to create a new Formatter.

```javascript
console.log(new UUID);
// ↦ 7111f7ca-5add-4947-828b-c3d9ae43eaf2
```




_hope you enjoy it!_



## References

- [npm](https://www.npmjs.com/package/@schukai/monster) 
- [jsdelivr](https://www.jsdelivr.com/package/npm/@schukai/monster)
- [developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID)
- [caniuse.com/mdn-api_crypto_randomuuid](https://caniuse.com/mdn-api_crypto_randomuuid)
- [en.wikipedia.org/wiki/Universally_unique_identifier](https://en.wikipedia.org/wiki/Universally_unique_identifier)