DEV Community: Ankit Singh

Boost YouTube's Volume Beyond 100% (without an extension)

Ankit Singh — Fri, 25 Dec 2020 02:01:15 +0000

We've all seen those videos with sound in negative decibels. Sometimes even external-speakers are not enough. (i.e.: 100% YT, 100% PC, 100% Speakers, is still not enough)

There are browser-extensions out there that can help you with it, but personally, I have trust issues with extensions, so I only use 2 or 3 of the very popular ones, and even those are allowed to only run OnClick.

We still need an extension like functionality without an extension. And that's exactly what Bookmarklets are for.

Bookmarklets are nothing but special browser-bookmarks that contain JavaScript code instead of a URL, which get executed on click.

Let's create a Bookmarklet for our VolumeBooster™.

Step #1

The code to boost the volume of YouTube video player.

function Boost() {
    if(!window.boosterGainNode) {
        const video = document.querySelector('video');
        const audioCtx = new AudioContext();
        const mediaSource = audioCtx.createMediaElementSource(video);
        const gainNode = audioCtx.createGain();
        mediaSource.connect(gainNode);
        gainNode.connect(audioCtx.destination);
        window.boosterGainNode = gainNode;
    }
    window.boosterGainNode.gain.value = parseFloat(prompt('Enter Boost Level. eg: 3 (enter 1 to reset)')) ?? 1;
}

Step #2

Minify the code, and make it an IIFE, so that it executes on click.

(function() { if(!window.boosterGainNode) { const video = document.querySelector('video'); const audioCtx = new AudioContext(); const mediaSource = audioCtx.createMediaElementSource(video); const gainNode = audioCtx.createGain(); mediaSource.connect(gainNode); gainNode.connect(audioCtx.destination); window.boosterGainNode = gainNode; } window.boosterGainNode.gain.value = parseFloat(prompt('Enter Boost Level. eg: 3 (enter 1 to reset)')) ?? 1; })();

Step #3

Append javascript: to the minified IIFE, and voila we've got a Bookmarklet.

javascript:(function() { if(!window.boosterGainNode) { const video = document.querySelector('video'); const audioCtx = new AudioContext(); const mediaSource = audioCtx.createMediaElementSource(video); const gainNode = audioCtx.createGain(); mediaSource.connect(gainNode); gainNode.connect(audioCtx.destination); window.boosterGainNode = gainNode; } window.boosterGainNode.gain.value = parseFloat(prompt('Enter Boost Level. eg: 3 (enter 1 to reset)')) ?? 1; })();

Step #4

Go to your browser's bookmarks/favorites manager, and create a new bookmark.

In the "name" field fill a name like VolumeBooster.
In the "URL" field paste the bookmarklet code. (from step #3)

Step #5

Make sure that the browser didn't remove javascript: from the URL/code. Add it back if it got removed. Save the bookmark.

Step #6 Profit 💹

Play any YouTube video. (the ones that have a really low sound)
Click on the VolumeBooster bookmark.
Put in a boost level number (e.g.: 2, 3, 4) in the prompt and hit enter.

0 means mute.
1 means normal. (default level)
You can also put float values.

Source: https://stackoverflow.com/a/43794379

This booster can be used on any website that uses a video Element for videos.

Merry Christmas and Happy New Year 🎉🎄🎅

How to supercharge JavaScript with ActiveJS

Ankit Singh — Mon, 14 Dec 2020 16:22:23 +0000

If you're not happy with current state of state-management,
you're not alone; most mainstream state-management solutions are unnecessarily complex and excessively verbose.

In pursuit of an alternative, I spent 10 months building and re-building a state-management solution that doesn't suck the life out of you. It's called ActiveJS.

Succinctness is the first good thing about ActiveJS, as is apparent in this implementation of a simple "counter" in Redux vs ActiveJS.

This is how it compares with NgRx.
Only relevant LOC are included below. (excluding Angular code)

If you already feel that it's worth the investment, feel free to jump ahead to learn more about ActiveJS, otherwise, let's take a look at the problem first.

THE PROBLEM

In recent years, Angular, React, Vue, and other similar technologies have made Frontend development so much more versatile and efficient. But at the same time, state-management doesn't seem to be getting any easier.

For efficient state-management, we need a few things

data structures that are type-safe
data structures that can emit events on mutation
data structures that can guarantee immutability
data structures that can be persisted through sessions

But JavaScript has none of it; and that's a problem.

If JavaScript itself had built-in features like Observables to deal with complexity of modern day state-management we wouldn't be depending on these libraries that try to solve these basic problems in very unique yet sometimes very counterintuitive ways.

Most mainstream state-management libraries are either too verbose or only solve one problem and leave out the other. In order to build a complete solution, we have to fill the gaps with more helper-libraries. On top of managing the state, we have to manage these extra dependencies and understand their multitudes of obscure concepts, write ever more verbose code spread across multiple files that become increasingly more complex, to the point where it starts to hinder a developer's performance because the human brain has a limited cache just like a computer, called working memory, but unlike computers, we can't just scale up our brains.

THE SOLUTION

A pragmatic, reactive state management solution for JavaScript apps.
ActiveJS helps you manage the state with minimum code and effort.

‎‎⠀

The best part of ActiveJS:

Reactive Storage Units

The missing data structures that JavaScript doesn't have.

A Reactive Storage Unit, or simply called Unit, is a reactive data structure, that is

observable
type-safe
cache-enabled
optionally immutable
optionally persistent

Built on top of RxJS Observable, in the image of JavaScript's native data structures.

Side-Note: If you're not familiar with RxJS, it's okay. To understand Units you only have to know what an Observable is. Basically, an Observable is nothing but a callback mechanism, it allows a callback function to keep receiving data over time instead of receiving it just once. Like a DOM event listener.

All the essential features required for modern state-management packed in a single package. Written in TypeScript, and strongly-typed.

Units emulate JavaScript's native data structures. There's a specialized type of Unit for each of the most used native data structures.

For example, a NumUnit is a number counterpart that stores and provides a number value at all times.

Let's implement a counter to understand how Units work.
We'd use a NumUnit for the counter since we expect the value to always be a number.

▶ Initialization

// initialize a NumUnit.
const counterUnit = new NumUnit({initialValue: 6});
// NumUnit has default initial value 0,
// providing an initial value is optional.

💫 Reactive value access

// observe the Unit for current and future values
counterUnit.subscribe(value => console.log(value)) 
// logs 6 immediately and will log futue values

📑 Static value access

// directly access the current value
console.log(counterUnit.value()); // logs 6

📡 Reactive mutation, with built-in sanity checks

// define two pure functions that produce a new value
const increment = value => value + 1; 
const decrement = value => value - 1;

// now we'll use the above pure functions as value-producers,
// the dispatch method expects a value or a value-producer-function
counterUnit.dispatch(increment); // makes the value 7
counterUnit.dispatch(decrement); // makes the value 6 again

// or just directly pass the value
counterUnit.dispatch(7); // makes the value 7

// try an invalid value
counterUnit.dispatch('20'); // NumUnit will ignore this
// NumUnit accepts nothing but numbers, not even NaN
// so the value is still 7

// Units can also be configured to prevent duplicate value dispatch.
// Had we passed the configuration flag {distinctDispatch: true}
// as in "new NumUnit({distinctDispatch: true})"
counterUnit.dispatch(7); // NumUnit would've ignored this
// because the value is already 7

This is the most basic usage of a Unit. One apparent advantage of using a Unit is that it maintains it's designated data type, to save you the need for an extra if-else check.

‎‎⠀

Just like a NumUnit, there are 6 types of aptly named Units in ActiveJS:

BoolUnit is a boolean counterpart, it ensures a boolean value at all times.
NumUnit is a number counterpart, it ensures a number value at all times.
StringUnit is a string counterpart, it ensures a string value at all times.
ListUnit is an array counterpart, it ensures an array value at all times.
DictUnit is loosely based on Map, it ensures a simple object value at all times.
GenericUnit doesn't pertain to any specific data type, it's generic in nature, it can store any type of value.

‎‎⠀

Now that we're all caught up with the basics of a Unit, let's see what else a Unit can do.

‎‎⠀

🔙 Caching and cache-navigation

ActiveJS Units are cache-enabled, and by default, every Unit caches two values, configurable up to Infinity. When you navigate through the cache, the cache stays intact, while the value changes. This makes it very easy to travel back in time and then go back to the future.

// create a Unit
const unit = new NumUnit({initialValue: 1});
// currently the cache-list looks like this: [1]

// dispatch a value
unit.dispatch(5);
// now value is 5 and the cache-list is [1, 5]

// dispatch another value
unit.dispatch(10);
// now value is 10 and the cache-list is [5, 10]

// go back to the previous value
unit.goBack(); // now value is 5 (cache isn't affected)

// go forward to the next value
unit.goForward(); // now value is 10 (cache isn't affected)

TiMe-TrAvEl 🏎⌚ is possible!

↺ Clear & Reset

Resetting a Unit to it's initial-value is as easy as calling a method. Similarly clearing the value is also that easy.

// create a Unit
const unit = new NumUnit({initialValue: 69});

// clear the value
unit.clearValue(); // now value is 0 (the default value for NumUnit)

// reset the value
unit.resetValue(); // now value is 69 again (the initial-value)

To demonstrate the next feature we'd need a different kind of Unit because the NumUnit deals with a primitive type number which is already immutable.

Let's take a ListUnit to create a reactive, array like data structure.

💎 Immutable Unit

// initialize a immutable ListUnit.
const randomList = new ListUnit({immutable: true});
// ListUnit has default initial value []

// subscribe for the value
randomList.subscribe(value => console.log(value));
// logs [] immediately and will log future values

We just created an immutable Unit, that's all it takes, a configuration flag.

✔ Mutation check

const anItem = {type: 'city', name: 'Delhi'};
randomList.push(anItem);
// this push is reactive, it'll make the Unit emit a new value

// let's try mutation by reference
anItem.type = 'state'; // this would work
// but the value of the randomList won't be affected, because every time
// a value is provided to an immutable list,
// it's cloned before storing.

// let's try another approach
const extractedValue = randomList.value(); // get the current value
console.log(listValue); // logs [{type: 'city', name: 'Delhi'}]
// try to mutate the extractedValue
extractedValue[1] = 'let me in...'; // this would work
// but the value of the randomList won't be affected, because every time
// an immutable list provides a value, it's cloned,
// to destroy all references to the stored value.

⚓ Persistent Unit

To make a Unit persistent, all we need is a unique id so that the Unit can identify itself in the localStorage, and a configuration flag.

// initialize
const persitentUnit = new StringUnit({id: 'userName', persistent: true});
// StringUnit has default inital value ''

That's it, the StringUnit is persistent, it already saved its default value to localStorage.

✔ Persistence check

// let's dispatch a new value different than the default value to 
// properly test the persistence
persitentUnit.dispatch('Neo');
console.log(persitentUnit.value()); // logs 'Neo'

// now if we refresh the window, or open a new tab,
// on second initialization the Unit will restore its value from localStorage
// after window refresh
console.log(persitentUnit.value()); // logs 'Neo'

‎‎⠀

If you're still here, you'll not be disappointed, there's more.

‎‎⠀

🔁 Replay and Replay-ness

Every Unit immediately provides value when subscribed by default, but maybe you only want the future values. For that purpose, every Unit has a built-in alternative Observable that doesn't emit immediately on subscription.

const unit = NumUnit(); // NumUnit has default initialValue 0

// normal subscription
unit.subscribe(v => console.log(v)) // immediately logs 0

// future only subscription
unit.future$.subscribe(v => console.log(v)) // doesn't log anything

// both will log any future values
unit.dispatch(42); // you'll see two 42 logs in the console

You can also turn the default replay-ness off.

const unit = NumUnit({replay: false});
// now default Observable and future$ Observable are the same

// normal subscription
unit.subscribe(v => console.log(v)) // doesn't log anything

// future only subscription
unit.future$.subscribe(v => console.log(v)) // doesn't log anything

// both will log any future values
unit.dispatch(42); // you'll see two 42 logs in the console

🔂 Manual Replay

Imagine an Observable is being used as a source for an API request, and you have a "refresh" button to trigger the request again. For this and many other scenarios, Units provide a manual replay method.

const unit = StringUnit({initialValue: 'Alpha'});

unit.subscribe(v => /*make API request*/); // send every value to the server

unit.dispatch('Sierra'); // send another value

// to emit the same value again, all you have to do is
unit.replay();
// all subscribers will get the same value again, in this case, 'Sierra'
// so the server should receive 'Alpha', 'Sierra', 'Sierra'

❄ Freezing

If you want a Unit to stop accepting new values, in scenarios where the state is not supposed to change. All you need to do is this:

// create a Unit
const unit = DictUnit(); // a DictUnit has default value {}
// freeze the Unit
unit.freeze();

// this will be ignored
unit.dispatch({'nein': 'nein nein'})
// so will any other mutative, or cache-navigation methods
// like goBack(), goForward(), clearValue(), resetValue() etc.

// unfreeze the Unit, and everything will start working again
unit.unfreeze();

🔇 Muting

If you want a Unit to stop emitting new values, but keep accepting new values, in scenarios where you aren't interested in new values but still don't want to lose them. All you need to do is this:

// create a Unit
const unit = GenericUnit(); // a GenericUnit has default value undefined
// it accepts all kinds of values as the name suggests

// mute the Unit
unit.mute();

// this will work
unit.subscribe(value => console.log(value));
// logs undefined immediately, but will not log any new values

// this will still work
unit.dispatch('Hello'); // but no subscriber will get triggered

// but if you check the value, there will be an unanswered Hello
console.log(unit.value()); // logs 'Hello'

// unmute the Unit, and if the value changed while the Unit was muted,
// emit it to all the subscribers, to bring them in sync
unit.unmute();

📅 Events

Every Unit emits an event for every operation performed on it, you can tap into these events to take some other action.

// create a Unit
const unit = new ListUnit();

// subscribe to events
unit.events$.subscribe(event => console.log(event));

There's an event for almost every operation that can be performed on a Unit, for example:

// a successful dispatch
unit.dispatch([69]); // will emit EventUnitDispatch
// an invalid dispatch
unit.dispatch({}); // will emit EventUnitDispatchFail
// on freeze
unit.freeze(); // will emit EventUnitFreeze
// on ListUnit specific methods
unit.push("Hard"); // will emit EventListUnitPush with value "Hard"
// another example
unit.pop(); // will emit EventListUnitPop

You get the picture, there's an event for everything.

🛠 Treating Units like native data structures

Every Unit implements Object.prototype methods like toString() and redirects them to the actual stored value, and additionally, they also implement their counterparts prototype methods like NumUnit implements Number.prototype methods to make it easier to work with the stored value. Let's see what that means.

`number` vs NumUnit

const num = 42069;
const numUnit = new NumUnit({initialValue: 42069});

num.toString() // '42069'
numUnit.toString() // '42069'

num.toLocaleString() // '42,069' (in an 'en' locale)
numUnit.toLocaleString() // '42,069' (in an 'en' locale)

num + 1 // 42070
numUnit + 1 // 42070

num + 'XX' // '42070XX'
numUnit + 'XX' // '42070XX'

`array` vs ListUnit

const arr = ['👽', '👻'];
const listUnit = new ListUnit({initialValue: ['👽', '👻']});

arr.toString() // '👽,👻'
listUnit.toString() // '👽,👻'

arr.join('--') // '👽--👻'
listUnit.join('--') // '👽--👻'

arr.push('🤖') // mutates the same array
listUnit.push('🤖') // this is reactive, creates and dispatches a new array

// ListUnit is also iterable
[...arr] // a shallow copy of arr ['👽', '👻']
[...listUnit] // a shallow copy of stored value ['👽', '👻']

// and every Unit works with JSON.stringify
JSON.stringify({num, arr}) // '{"num":42069, "arr": ["👽", "👻"]}'
JSON.stringify({numUnit, listUnit}) // '{"num":42069, "arr": ["👽", "👻"]}'

In most cases you can treat a Unit just like a native data structure, barring a few exceptions like ListUnit and DictUnit don't have index-based property access and assignment, they use get and set methods instead.

‎‎⠀

Now that we know what Units are capable of individually, let's take a look at what they can do together.

‎‎⠀

One way to combine two or more Units together is to use an RxJS combination operator since all Units are Observables, it'd work the same.

But if you use RxJS operators, you'd lose access to all the other aspects of Units, and only the Observable part will remain.

That's why ActiveJS provides Cluster.

🗃 Cluster

A Cluster provides three things,

an Observable of the combined values of its items
static access to the combined values of its items
direct access to its items

Let's see what that means.

// create a few Units to combine
const numUnit = new NumUnit(); // with default value 0
const strUnit = new StringUnit(); // with default value ''
const listUnit = new ListUnit(); // with default value []

// create a Cluster
const myPrecious = new Cluster({numUnit, strUnit, listUnit})
// using shorthand notation

// static value access
console.log(myPrecious.value())

// and reactive value access, emits whenever a memeber emits
myPrecious.subscribe(value => console.log(value));

// both will immediately log the following
{
  numUnit: 0, strUnit: '', listUnit: []
}

// accessing the Unit through the Cluster
console.log(myPrecious.items.numUnit.value()); // logs 0
// similarly
myPrecious.items.numUnit === numUnit // true
myPrecious.items.strUnit === strUnit // true
myPrecious.items.listUnit === listUnit // true

Using Clusters you can create what you'd call a "Store" in other state managers. But instead of top-down, it's bottom-up.

Clusters can become part of other Clusters too.

// create a few Units
const boolUnit = new BoolUnit(); // with default value false
const dictUnit = new DictUnit(); // with default value {}

// create a Cluster
const myPreciousCombined = new Cluster({boolUnit, dictUnit, myPrecious});
// using shorthand notation

console.log(myPreciousCombined.value());
// logs
{
  boolUnit: false,
  dictUnit: {},
  myPrecious: {
    numUnit: 0, strUnit: '', listUnit: []
  }
}

// access the Cluster though Cluster
console.log(myPreciousCombined.items.myPrecious.value());
// logs
{
  numUnit: 0, strUnit: '', listUnit: []
}

‎‎⠀

If you're still here, hope that I haven't bored you to death.
Please take this refreshment before we continue to discover more awesome things you can do with ActiveJS.

‎‎⠀

Let's continue...

Probably the most repetitive thing we as Frontend developers do is make REST API calls, track their status, and share the result.

Without a state-manager, it works fine if we only have a few API calls, or don't need to share the results of API calls with any other part of our app. But as soon as we start to reach a point where sharing becomes more work than actually making the API calls, we need some sort of state-manager.

And as it currently stands, most state-managers either don't have a built-in mechanism to do this very efficiently or do it in a very verbose and repetitive way.

Enters AsyncSystem.

⏳ AsyncSystem

A few paragraphs above, we just talked about how to combine Units together using a Cluster. Another possible way to combine Units together is to make them react to each other and build some sort of a system to achieve a specific task. And what better use-case for such a system other than API calls.

An AsyncSystem is a type of System that helps in streamlining asynchronous tasks like REST API calls.

AsyncSystem uses three GenericUnits for three aspects of an async task query, response, and error, namely queryUnit, dataUnit, and errorUnit, respectively; and a BoolUnit for the fourth and last aspect pending-status, named pendingUnit.

Now let's see how to use an AsyncSystem.

▶ Initialization

// create an AsyncSystem 
const userSystem = new AsyncSystem();
// it automatically create the Units and establishes relationships among them

// extract all the four Units for ease of access
const {queryUnit, dataUnit, errorUnit, pendingUnit} = this.userSystem;
// using destructuring assignment syntax

➰ Setup a stream

async function fetchAndShareData(query) {
  try {
    // fetch data using fetch API
    const response = await fetch('https://xyz.com/u/' + query.userId);
    // and extract the JSON data
    const data = await response.json();

    // dispatch data to the dataUnit, it also toggles the pendingUnit's state
    dataUnit.dispatch(data);
  } catch (err) {
    // dispatch error to errorUnit, it also toggles the pendingUnit's state
    errorUnit.dispatch(err);
  }
}

// setup the stream by observing query values
queryUnit.subscribe(query => fetchAndShareData(query));

👂 Listening for values

Our setup is complete, we can share the appropriate Units with any part of our app now, whenever there's a change the subscriber will be notified.

// listen for queries
queryUnit.subscribe(query => console.log(query));

// listen for data
dataUnit.subscribe(data => console.log(data));

// listen for errors
errorUnit.subscribe(error => console.log(error));

// listen for pending state
pendingUnit.subscribe(isPending => console.log(isPending));

👋 Triggering new requests

We can trigger new requests from anywhere, using the queryUnit:

// dispatch a query, it'll also set pendingUnit's value to true
// the rest will be handled by the stream we just created above
queryUnit.dispatch({userId: 42069});

That's it, we just created a System to make API calls and share the state effortlessly.

There are other automatic things that an AsyncSystem can do apart from updating the value of pendingUnit. Such as,

it can clear the errorUnit's value when dataUnit emits a value
it can clear the dataUnit's value when queryUnit emits a value
it can freeze the queryUnit while the pendingUnit has a true value, etc.

Moreover,

You can use the replay() method of queryUnit to trigger the same request again.
You can manually freeze the queryUnit to prevent any new requests from getting triggered.

If you want to use a different kind of Unit instead of a GenericUnit for queryUnit, dataUnit, or errorUnit, you can do that too, by creating your own custom AsyncSystem using the base class of AsyncSystem, AsyncSystemBase.

‎‎⠀

That's all folks.
ActiveJS has a few more tricks up its sleeves but to keep it short it's probably better to end this post here and let you discover the rest on your own from the documentation.

Hope you find it helpful.
I'm eager to listen to your thoughts and feedback, please leave a comment or reach out to me on any other social media platform.

I'd also like to thank all the awesome people who built RxJS, NgRx, Redux, Akita, and Immutable.js for inspiration and ideas.

Peace ☮

🌏 ActiveJS Website
📖 ActiveJS Documentation
🤾‍♂️ ActiveJS Playground
💻 ActiveJS GitHub Repo (drop a ⭐ maybe :)

Typeahead with React and ActiveJS

Ankit Singh — Mon, 30 Nov 2020 20:59:11 +0000

We're going to build a Typeahead component using React, ActiveJS, and RxJS. We'll search for Wikipedia articles in the example but we can point it to any REST API once we have the setup in place.

S.No.	Content
1.	HTTP Request logic using Observable HTTP API - Provided by RxJS
2.	Asynchronous State Management - Provided by ActiveJS
3.	Query and response handling
4.	React Component

1. HTTP Request logic

First, we create a function that takes the search string and fetches results from the Wikipedia API using the ajax HTTP utility provided by RxJS.

function getWikipediaArticles(title: string): Observable<any> {
  const url = "https://en.wikipedia.org/w/api.php";
  const params = new URLSearchParams({
    search: title, // the articles to search for
    action: "opensearch",
    format: "json", // API response type
    origin: "*", // to allow CORS requests
    limit: 3 // maximum number of matched results
  });
  return ajax.getJSON(url + "?" + params);
}

ajax.getJSON returns a cold Observable, i.e. It will only make the HTTP request when we subscribe to it. And canceling a pending request is as easy as unsubscribing from this Observable, which is a necessity for the Typeahead because we want to keep only one request active at a time to prevent race conditions and save some resources.

URLSearchParams is a native API that, among other things, can easily convert and encode an object into query-parameters. e.g.: {a: 'b', c: 'd&d'} becomes a=b&c=d%26d.

2. State Management using ActiveJS AsyncSystem

To handle all the nitty-gritty aspects of an asynchronous task we'll use an AsyncSystem, it takes care of all the state-management we're going to need for the Typeahead. We'll pass our search-query, response-data, and response-error through it, and access the same from it whenever/wherever we need them.

export const searchSystem = new AsyncSystem<string, any, any>({
  QUERY_UNIT: { dispatchDebounce: true }
});

dispatchDebounce exactly does what it implies, it debounces the queries for 200ms by default, and we can also pass a custom number if we want.

The AsyncSystem gives us four Observable data Units pertaining to every aspect of an asynchronous API request. We'll extract these data Units for ease of use.

// extract the Observable data Units for easier access
const {queryUnit, dataUnit, errorUnit, pendingUnit} = searchSystem;

queryUnit to store, and share the queries, and to trigger the API call
dataUnit to store, and share the response-data
errorUnit to store, and share the response-error
pendingUnit to store, and share the pending-status (This happens automatically. When we dispatch to queryUnit it becomes true, and when we dispatch to dataUnit or errorUnit it becomes false)

3. Query and Response handling

We already have HTTP Service and State Management in place, now we just need to connect them together and set up the mechanism for Typeahead, such that whenever the queryUnit emits a value we trigger a search request, and also cancel any pending request at the same time.

// setup a stream using RxJS operators,
// such that at a time only one request is active
const searchStream = queryUnit.future$ // listen for future values emitted by queryUnit, so that it doesn't start making requests immediately
  .pipe(
    filter(query => { // process the typed query
      if (query.trim()) {
        return true; // only proceed if non-empty string
      }
      dataUnit.clearValue(); // if query is empty, clear the data
      return false; // don't go any further
    }),

    // switchMap to ensure only one request at a time
    switchMap(query =>
      // create a new HTTP request Observable
      getWikipediaArticles(query).pipe(
        // format the data, to make it easy to consume
        map(formatSearchResults),
        // dispatch the formatted data to dataUnit
        tap(data => dataUnit.dispatch(data)),

        catchError(err => {
          errorUnit.dispatch(err); // disptach the error
          return EMPTY; // don't let the stream die
        })
      )
    )
  )
  .subscribe(); // activate the stream

// parse and format the data recieved from the Wikipedia REST API
// just trust me on this one ;) it takes the response from the Wikipedia API
// and turns it into an Array of {title: string, url: string} objects
function formatSearchResults([query, titles, noop, urls]) {
  return titles.map((title: string, i: number) => ({
    title,
    url: urls[i]
  }));
}

4. React Component

We're in the endgame now, we just need a simple React component and Hooks to finalize our Typeahead.

function App() {
  // create local state to hold the Typeahed data
  const [systemValue, setValue] = useState();
  // extract the data for easier access
  const {query, data, error, pending} = systemValue || {};

  // subscribe to the value changes in the searchSystem the 
  // it will update our local state and trigger re-rendering
  useEffect(() => {
    const subscription = searchSystem.subscribe(setValue);
    return () => subscription.unsubscribe(); // prevent memory leak
  }, []);

  // dispatch the input value to queryUnit
  // to trigger new requests and start the whole process
  const handleInput = e => queryUnit.dispatch(e.target.value)

  // a rudimentary UI with essential components
  return (
    <React.Fragment>
      <input
        onChange={handleInput}
        placeholder="Search Wikipedia, eg: Big Bang"
      />

      {query && 
      <p>
        IsPending: <b>{pending ? 'Yes' : 'No'} </b> |
        Error: <b>{error || 'NA'}</b>
      </p>
      }

      <ul>
        {data?.map(item => 
          <li>
            <a href="{item.url}" target="_blank" rel="noopener">
              {item.title}
            </a>
          </li>
        )}
      </ul>
    </React.Fragment>
  );
}

// render the component
render(<App />, document.getElementById("root"));

That's it, folks, we're done!

Here's the result of our labor.

Let me know if it was helpful, or if it's too much too fast.

If you liked the solution, then you'd like what ActiveJS has to offer, it's a one-stop solution for all your State Management needs, be it sync or async, persistence or immutability, time-travel or less-code, it's all there. (no reducers though)

Cheers

🌏 ActiveJS Website
📖 ActiveJS Documentation
🤾‍♂️ ActiveJS Playground
💻 ActiveJS GitHub Repo (drop a ⭐ maybe :)

Effortless RxJS Debugging

Ankit Singh — Sun, 15 Nov 2020 22:55:56 +0000

It's no secret that Observables are powerful, and RxJS makes them even more powerful and fun with its magical collection of operators.

I even built a State-Management library (ActiveJS) based on RxJS Observables.

PROBLEM

Sometimes piped streams built with multiple operators can become very confusing, and debugging Observable streams isn't actually fun. The stack-trace is of no use, and conventional debugging can be too tedious when the debugger goes through all the internal code.

More often than not we resort to the one and only savior of heathens and believers alike, the tap operator.
We've all done this tap(v => console.log('here', v)) ;)

SOLUTION

What if I told you that we can visualize every step of the Observable stream down to every operator and it's output, including subscription and completion, with a single utility function.

That's exactly what RxJS-Debug provides, a single function for automated RxJS visualization.

Let's assume we have an Observable stream like this:

const source$ = timer(1000, 4000); // emits a number after every 4 seconds
source$.pipe(
    map(x => x + 5), // add 5
    take(2), // complete the stream after 2 values
    switchMap(x => of(x * 2)) // multiply by 2, (can be an API call)
  )
  .subscribe();

Visualizing this stream is as easy as wrapping our source$ Observable with the utility function $D provided by RxJS-Debug.

// wrap the Observable with $D to visualize it
const debugSource$ = $D(source$);
// debugSource$ is a copy of the original Observable, but with logging-enabled

Now we just have to use the debugSource$ instead of source$.

debugSource$
  .pipe(
    map(x => x + 5),
    take(2),
    switchMap(x => of(x * 2))
  )
  .subscribe(); // activate the stream

All done, this is what you'd see in the console.

we can see when the subscription started
we can see when every operator is executed, and
what the output of that operator was, and
what is the position of that operator in the pipe (e.g: 1, 2, 3 etc.)
we can also see when the stream restarts after a new value is emitted by the source$ Observable
we can see the count of how many times the source emitted
we can see the count of how many times an operator gets executed
we can see when the stream reaches the end of piped operators, and
we can also see when the Observable completes

All that with a single function; isn't that nice.

But hold on, why is there a delay between the operators, well I skipped over configuration options that you can pass to the $D.

This is the actual configuration that was used to produce the above GIF (or GIF, as you prefer).

// wrap the Observable with $D to visualize it
const debugSource$ = $D(source$, {id: 'Special', addDelay: 500})

The id is an optional identifier to easily identify the logs related to the Observable, otherwise, an incremental numeric id is assigned automatically.

The addDelay flag adds a fixed delay before every operator supplied to the pipe, it gives you time to understand the outputs and execution flow at a more manageable pace.

There's one other option hideOutputs to hide the outputs of operators to reduce noise in the console logs, it can be helpful when you're only interested in the flow of execution, not the actual value.

That's it, folks, for now.
Please let me know if you have any questions, suggestions, or feedback.

Cheers

🤾‍♂️ RxJS-Debug Playground
💻 RxJS-Debug GitHub Repo (drop a ⭐ maybe :)

State Management without Reducers

Ankit Singh — Wed, 11 Nov 2020 20:33:22 +0000

If you're a developer like me who has problems connecting the disconnected abstract pieces of code and have a hard time understanding how and where the state is being updated. Then you might also be hitting the limits of the human brain's limited working memory.

I think I have found a solution, a way to get rid of reducers without losing any benefits. During the last 10 months, I built an efficient state manager called ActiveJS that doesn't use reducers.

Instead of dispatching actions and let reducers implicitly work their magic, we just dispatch reducer like pure-functions and get rid of actions in the process; two birds with one stone.

These pure-functions are called producers because they take the current state and produce a new state.

So reducers reduce, and producers produce, but essentially they are doing the same thing, updating the state. Sounds good, right?

Let's put the theory to test, and write some code:

State Management with Reducers

First, let's look at the good old reducers.
This is how a simple counter looks like, implemented with the champion of reducers, Redux.

const counter = (state, action) => {
  if (typeof state === 'undefined') {
    return 0
  }

  // these are our reducers
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

// initialize the store and bind the reducers
const store = Redux.createStore(counter)

// subscribe for the state changes and log it to console
store.subscribe(() => console.log(store.getState()));
// logs 0 immediately and will log any future values

// dispatch the action for increment
store.dispatch({ type: 'INCREMENT' }) // makes the count 1

// dispatch the action for decrement
store.dispatch({ type: 'DECREMENT' }) // makes the count 0

Now let's see what happens when we replace reducers with producers.

State Management with Producers

For this, we'd use ActiveJS, the new kid on the block, it's got built-in reactive data structures called Units, that store and provide native data structures as value, like number, string, array, etc.

One of those Units is NumUnit, it stores a number value and ensures that it stays a number, even NaN isn't allowed.

We'd use the NumUnit to implement our counter because we expect the count to always be a number.

// initialize a reactive data structure to store numbers
const counter = new NumUnit() // with default initial-value 0

// two producers, pure-functions to produce an appropriate new value
const increment = value => value + 1 
const decrement = value => value - 1

// subscribe for reactive value access, and log the value
counter.subscribe(value => console.log(value))
// immediately logs 0, and will log any future values

// dispatch the "increment" producer for increment
counter.dispatch(increment); // you'll see 1 in the console
// the pure function is called with the current value and
// the returned value is dispatched automatically

// dispatch the "decrement" producer for decrement
counter.dispatch(decrement); // you'll see 0 in the console

Look ma, No Reducers!

Easy right?

What about actions with payload?

Let's say we want to increment the current value after multiplying it with the provided number as payload, let's see how that producer would look like.

const multiplyAndIncrement = multiplier => {
  // the wrapper function acts as an action, and
  // this is our producer now
  return value => value * multiplier + 1
}

// assume the current value of the counter is 2, for easy demonstration

// dispatch the producer
counter.dispatch(multiplyAndIncrement(3))
// the new value becomes 7, because 2 * 3 + 1 is 7

// we call multiplyAndIncrement function and it returns the producer-function
// the dispatch method calls the returned producer with the current value
// the returned value from the producer is used as new value

The theory checks out, the code is still functional, easily testable, and the flow of the code is not broken.

But producers are just one of the good things about Units, there are so many features baked in.

Here are some of those features that are relevant for our "counter":

Direct Dispatch

If you don't have a need to use producers, you can just dispatch the new value directly.

counter.dispatch(2) // works
counter.dispatch(3) // works

Direct Value Access

If you are not doing something reactively, and just need the value, you can access it directly.

// static value access
counter.value() // returns the current value immediately

Preventing Invalid Data Types

For this we don't have to do anything, NumUnit takes care of that.
It only takes in a number, which ensures that it always provides a number value. Saves you the need for any sanity checks.

counter.dispatch('an evil string') // won't work
counter.dispatch({nein: 'nein nein'}) // won't work
counter.dispatch(NaN) // won't work
counter.dispatch(() => NaN) // won't work
counter.dispatch(['what', 'about', 'this']) // won't work

Preventing Duplicate Dispatch

Preventing duplicate values is as easy as providing a configuration option.

const counter = new NumUnit({distinctDispatch: true})
// that's it, done

counter.dispatch(2) // works
counter.dispatch(2) // won't work, it'll get ignored

counter.dispatch(3) // works
counter.dispatch(3) // won't work, it'll get ignored

Preventing Negative Values

It makes sense that our counter should only have positive values. And making sure of that is also easy by providing a function, it'll be called by the Unit to check if the new value should be updated or not.

const counter = new NumUnit({
 // If it returns a falsy value for a dispatch, that dispatch is ignored.
 // So just return true if the newly dispatched value is positive.
  customDistinctDispatch: (prev, newValue) => newValue >= 0
})
// that's it, done

counter.dispatch(2) // works
counter.dispatch(-2) // won't work, it'll get ignored

counter.dispatch(3) // works
counter.dispatch(-3) // won't work, it'll get ignored

That's it, folks, for now.

Here's the StackBlitz playground link if you want to try it out yourself.

There are even more things that NumUnit alone and Units at large can do. Here's an article demonstrating some of those features.

State Management with a Single Line of Code

Ankit Singh ・ Nov 2 '20

#javascript #webdev #productivity #typescript

Cheers

🌏 ActiveJS Website
📖 ActiveJS Documentation
🤾‍♂️ ActiveJS Playground
💻 ActiveJS GitHub Repo (drop a ⭐ maybe :)

Asynchronous State Management with ActiveJS

Ankit Singh — Tue, 03 Nov 2020 22:12:53 +0000

This article is a follow-up to a previous article about synchronous state management, State Management with a Single Line of Code. I'd suggest that you at least take a quick look at it so that you understand this one better. (It's okay if you don't feel like it, I'll try to keep it simple :)

I created a state-management library called ActiveJS, where async-state-management isn't an afterthought. ActiveJS strives to make state-management simple, and get rid of walls of code required for the current mainstream solutions.

So, without any further adieu, let's get started.

This is what we're going to target and achieve with as little code as possible.

The 4 major aspects of an Async API call:

Making a Query
Handling the Response
Handling the Error
Checking or listening to the Pending-Status

And then some situational aspects, like:

Storing the received response
Sharing the response and status of the API call
Being able to retry or replay the request
Clearing the stored error on a successful response, etc.

Now that we know what we need to achieve, all we need is some kind of system that can do all this, where we don't have to set-up all the mechanisms from scratch.

This is all the code we're going to need to achieve all of the above:

import {AsyncSystem} from '@activejs/core'

const asyncSystem = new AsyncSystem()
const {queryUnit, dataUnit, errorUnit, pendingUnit} = asyncSystem

async function fetchAndShare(query) {
  try {
    const response = await fetch('https://xyz.com/?q=' + query)
    const data = await response.json()
    dataUnit.dispatch(data)
  } catch (err) {
    errorUnit.dispatch(err)
  }
}

queryUnit.future$.subscribe(query => fetchAndShare(query))
queryUnit.dispatch('some query')

If you don't understand what is going on, that's okay, we'll understand it together, line by line.

The most important part is the AsyncSystem.

import {AsyncSystem} from '@activejs/core';

// initialize an AsyncSystem, ready to receive, store, and share.
const asyncSystem = new AsyncSystem();

AsyncSystem is a systematic combination of 4 separate reactive data structures that it creates internally, called Units, these Units pertain to each major aspect of an async API call namely Query, Data, Error, and Pending-Status.

AsyncSystem also creates some custom relationships among these Units to achieve some of the situational aspects that we mentioned above, these relationships can be enabled or disabled by passing configuration flags to the AsysnSystem.

Extract the data structures for easier access

// using ES6 destructuring assignment
const {queryUnit, dataUnit, errorUnit, pendingUnit} = asyncSystem;

queryUnit to store, and share the Query, and to trigger the API call
dataUnit to store, and share the Response data
errorUnit to store, and share the Error data
pendingUnit to store, and share the Pending-Status

Setup the data fetching logic using the native `fetch` API

// a function to fetch data and disptch the response appropriately
async function fetchAndShare(query) {
  try {
    // fetch data using fetch API
    const response = await fetch('https://xyz.com/?q=' + query);
    // extract the JSON data
    const data = await response.json();

    // dispatch data to the dataUnit
    // it also sets the pendingUnit's value to false, automatically
    // and, it sets the errorUnit's value to undefined, automatically
    dataUnit.dispatch(data);
  } catch (err) {
    // dispatch error to errorUnit
    // it also sets the pendingUnit's value to false, automatically
    errorUnit.dispatch(err);
  }
}

Setup API request trigger by subscribing to the `queryUnit`

// whenever a value is dispatched to queryUnit,
// the 'fetchAndShare' will get called
queryUnit.future$.subscribe(query => fetchAndShare(query));
// we can also subscribe to the queryUnit directly, but by using
// future$ we make sure that we start making API calls only after a 
// new dispach, otherwise it'd have already made a call.

We can already start listening for the values by subscribing to the reactive data structures we just extracted above.

Listen for values, from anywhere and as many places as needed

// listen for queries
queryUnit.subscribe(query => console.log(query));
// logs undefined immediately and will log future values

// listen for data
dataUnit.subscribe(data => console.log(data));
// logs undefined immediately and will log future values

// listen for errors
errorUnit.subscribe(error => console.log(error));
// logs undefined immediately and will log future values

// listen for pending status
pendingUnit.subscribe(isPending => console.log(isPending));
// logs false immediately and will log future values

All that is left is triggering the API call, which can also be done from anywhere by dispatching a value to the queryUnit, the rest will be handled by the AsyncSystem and the logic we just wrote.

Trigger an API request

// dispatch a query
// it also sets the pendingUnit's value to true, automatically
queryUnit.dispatch(42)

Retrying/Replaying the last API request

// replay the query
// it also sets the pendingUnit's value to true, automatically
queryUnit.replay()
// it'll re-emit the current query value (i.e. 42 in this case),
// and the rest will work the same as triggering a new API request

That's it, folks, all done.

There are even more things that ActiveJS can do for you very efficiently, but maybe let's discuss that in another article.

Here's a simple StackBlitz Typeahead example built with AsyncSystem and RxJS operators, if you want to try it out yourself.

Here's the visual playground for AsyncSystem, which you can try out without writing any code.

If you reached here,
Please let me know if I added too much information or too little.
Also, let me know what would you like to see ActiveJS do in the next article.

Cheers

🌏 ActiveJS Website
📖 ActiveJS Documentation
🤾‍♂️ ActiveJS Playground
💻 ActiveJS GitHub Repo (drop a ⭐ maybe :)

State Management with a Single Line of Code

Ankit Singh — Mon, 02 Nov 2020 21:27:31 +0000

If you're like me and feel that there has to be an easier way of state-management, then you'd like what ActiveJS can do for you.

I feel like I'm selling snake-oil, but I spent the last 10 months trying to make state-management as intuitive and easy as possible because I couldn't stand the state-management in the state it is right now.

For efficient state-management, we need a few things

data structures that are type-safe
data structures that can emit events on mutation
data structures that can guarantee immutability
data structures that can be persisted through sessions

The title promised all this in one line of code, so here it is.

const dataUnit = new DictUnit({
 id: 'data', immutable: true, persistent: true, cacheSize: Infinity,
 initialValue: {a: 1}
})
// every option is optional, including the initialValue
// DictUnit has empty object {} as it's default value

(Okay 4 lines, but I formatted it so you don't have to scroll :)

JavaScript doesn't have anything like that, that's why ActiveJS came into existence, and with it came reactive data structures called Units, one of them is DictUnit, that stores and ensures a dictionary object value at all times.

You might have already got a feeling from the configuration options we passed to the DictUnit and guessed what it's all about, but to elaborate DictUnit is:

Observable
Reactive
Type-Safe
Immutable
Persistent, and
Cache-Enabled

Let's see what that means in the language we all understand, the code:

Observable

DictUnit extends RxJS Observable class, so you can subscribe to it and apply all the RxJS operators on it just as you would on an Observable.

// subscribe for the value
dataUnit.subscribe(value => console.log(value))
// logs {a: 1} immediately and will log future values

dataUnit instanceof Observable; // true

Reactive

When you update the value of a DictUnit it emits it to all the observers so that they get access to the latest value.

// non-functional dispatch
dataUnit.dispatch({b: 2, c: 3})
// observers get {b: 2, c: 3}

// now dataUnit's value is {b: 2, c: 3}

// functional-dispatch
dataUnit.dispatch(value => {return {...value, d: 4}})
// observers get {b: 2, c: 3, d: 4}

// we don't have to dispatch new values manually,
// DictUnit provides a better way to update properties

// update a single property
dataUnit.set('d', 5)
// observers get {b: 2, c: 3, d: 5}

// delete properties
dataUnit.delete('b', 'd') // 'b' and 'd' got yeeted
// observers get {c: 3}

// update multiple properties
dataUnit.assign({a: 1, b: 2})
// observers get {a: 1, b: 2, c: 3}

Type-Safe

A DictUnit ensures that at all times the value is always a dictionary object, it'll ignore any invalid value dispatch.

dataUnit.dispatch(['let', 'me', 'in']); // won't work
dataUnit.dispatch('let me in'); // won't work
dataUnit.dispatch(420); // won't work
dataUnit.dispatch(null); // won't work
dataUnit.dispatch(new Date()); // won't work
dataUnit.dispatch(() => new Date()); // won't work

There are 5 other Units just like DictUnit in ActiveJS, ListUnit to store array, NumUnit to store number, StringUnit to store string, BoolUnit to store boolean, and GenericUnit to store anything.

Immutable

The immutable flag makes sure that the DictUnit doesn't let the value get mutated in any way. Let's try to mutate it anyway.

const newValue = {c: 3};
dataUnit.dispatch(newValue) // works, value is {c: 3} now

// try mutating the newValue
newValue.c = 'hehe' // works, but
dataUnit.value() // still {c: 3}

// let's try a different approach
const currentValue = dataUnit.value() // {c: 3}
currentValue.c = 'gotcha' // works, but
dataUnit.value() // still {c: 3}

Persistent

The persistent flag makes the DictUnit persistent, such that whenever its value is updated, it saves that value to LocalStorage, so if we reinitialize a DictUnit with the same id and persistent: true flag, the DictUnit will restore its value from LocalStorage.

dataUnit.dispatch({c: 4}) // saved in LocalStorage

// after refreshing the browser-tab or reinitializing the DictUnit
dataUnit.value() // {c: 4}
// it restored the value from LocalStorage

Cache-Enabled

What if I told you that we can go back to all the previous values we just updated in previous examples, and then come back to the current value, yup Time-Travel is possible. All you need to provide is how many steps you want to be able to go back using the cacheSize option, by default it keeps 2 values and supports up to Infinity.

// let's reinitialize the Unit to demonstrate cache-navigation
const dataUnit = new DictUnit({
 cacheSize: Infinity, initialValue: {a: 1}
})
// now let's dispatch a bunch of values to fill the cache
dataUnit.dispatch({b: 2})
dataUnit.dispatch({c: 3})
dataUnit.dispatch({d: 4})
dataUnit.dispatch({e: 5})

// now the value is {e: 5}, and
// the cache looks like this [{a: 1}, {b: 2}, {c: 3}, {d: 4}, {e: 5}]

// go back 1 step
dataUnit.goBack()
// now value is {d: 4}

// go back 2 steps
dataUnit.jump(-2) // negative means back, positive means forward
// now value is {b: 2}

// jump to the last value in cache
dataUnit.jumpToEnd()
// now value is {e: 5}

// jump to the first value in cache
dataUnit.jumpToStart()
// now value is {a: 1}

// go forward 1 step
dataUnit.goForward()
// now value is {b: 2}

That's it, folks, all done.

There are still a few things that we haven't covered that DictUnit can do, and we also haven't covered things like managing asynchronous API calls. But maybe that's a topic for the next article.

In the meantime, stay safe, try to have fun, and head over to ActiveJS website or documentation to learn more about how it can help you manage state with minimum effort.

Here's the StackBlitz playground link if you want to try it out yourself.

Here's a link to the visual playground, which you can try out without writing any code.

Also, I forgot to tell you that this is my first ever article on any platform, please let me know if I did an okay job, or if there's something that I can improve.

Cheers

🌏 ActiveJS Website
📖 ActiveJS Documentation
🤾‍♂️ ActiveJS Playground
💻 ActiveJS GitHub Repo (drop a ⭐ maybe :)

Next Read: Asynchronous State Management with ActiveJS

DEV Community: Ankit Singh

Boost YouTube's Volume Beyond 100% (without an extension)

Step #1

Step #2

Step #3

Step #4

Step #5

Step #6 Profit 💹

How to supercharge JavaScript with ActiveJS

THE PROBLEM

THE SOLUTION

Reactive Storage Units

▶ Initialization

💫 Reactive value access

📑 Static value access

📡 Reactive mutation, with built-in sanity checks

🔙 Caching and cache-navigation

↺ Clear & Reset

💎 Immutable Unit

✔ Mutation check

⚓ Persistent Unit

✔ Persistence check

🔁 Replay and Replay-ness

🔂 Manual Replay

❄ Freezing

🔇 Muting

📅 Events

🛠 Treating Units like native data structures

number vs NumUnit

array vs ListUnit

🗃 Cluster

⏳ AsyncSystem

▶ Initialization

➰ Setup a stream

👂 Listening for values

👋 Triggering new requests

Typeahead with React and ActiveJS

Table of contents

1. HTTP Request logic

2. State Management using ActiveJS AsyncSystem

3. Query and Response handling

4. React Component

Effortless RxJS Debugging

PROBLEM

SOLUTION

State Management without Reducers

State Management with Reducers

State Management with Producers

What about actions with payload?

Direct Dispatch

Direct Value Access

Preventing Invalid Data Types

Preventing Duplicate Dispatch

Preventing Negative Values

State Management with a Single Line of Code

Ankit Singh ・ Nov 2 '20

Asynchronous State Management with ActiveJS

The 4 major aspects of an Async API call:

And then some situational aspects, like:

This is all the code we're going to need to achieve all of the above:

The most important part is the AsyncSystem.

Extract the data structures for easier access

Setup the data fetching logic using the native fetch API

Setup API request trigger by subscribing to the queryUnit

Listen for values, from anywhere and as many places as needed

Trigger an API request

Retrying/Replaying the last API request

State Management with a Single Line of Code

Observable

Reactive

Type-Safe

Immutable

Persistent

Cache-Enabled

`number` vs NumUnit

`array` vs ListUnit

Setup the data fetching logic using the native `fetch` API

Setup API request trigger by subscribing to the `queryUnit`