DEV Community: Antoni Kępiński

How to embed a Changelog Podcast Player into a React app?

Antoni Kępiński — Thu, 16 Jul 2020 14:43:41 +0000

Introduction

I recently had a chance to do a small redesign of my personal site. One of the goals, besides making everything look cleaner, was to embed Changelog's Podcast Player, so that it would play 85th episode of JS Party, in which I talked about one of my projects.

It seems pretty straight forward:

<audio data-theme="night" data-src="https://changelog.com/jsparty/85/embed" src="https://cdn.changelog.com/uploads/jsparty/85/js-party-85.mp3" preload="none" class="changelog-episode" controls></audio><p><a href="https://changelog.com/jsparty/85">JS Party 85: Building PizzaQL at the age of 16</a> – Listen on <a href="https://changelog.com/">Changelog.com</a></p><script async src="//cdn.changelog.com/embed.js"></script>

And works just fine on a static HTML site. However, in my case, I was dealing with a React application, powered by Next.js with Static Site Generation (SSG). I also focused much on performance and accessibility.

That's exactly why I decided to make this tutorial!

Tutorial

First of all, we need to embed an audio tag into our app. It's fairly easy:

<audio
    controls
    data-theme="night"
    data-src="https://changelog.com/jsparty/85/embed"
    src="https://cdn.changelog.com/uploads/jsparty/85/js-party-85.mp3"
    preload="none"
    className="changelog-episode"
/>

Make sure to replace data-src and src attributes so that they link to an episode, which you want to embed. It does not need to be the JS Party podcast.

We now need to load a script, which will add an iframe with the player itself. Normally, we would obtain it from https://cdn.changelog.com/embed.js, but instead, we are going to self-host it. Here are the reasons why:

Self-hosting assets (like fonts or scripts) is significantly faster;
The default Changelog's script does not add a title attribute to the created iframe - this will lower our site accessibility score on tools like Lighthouse;
The default Changelog's script sometimes throws Uncaught TypeError: Cannot read property 'postMessage' of null..*

*This does not break the functionality of the player and therefore we can easily fix it using a try...catch statement.

In order to edit the embed script, we first need to unminify the original one from Changelog's CDN. We can then modify it like so:

!(function (e) {
    function t(t) {
        var r = t.getAttribute("data-src"),
            i = t.getAttribute("data-theme") || "night",
            n = e.createElement("iframe");
        n.setAttribute("src", r + "?theme=" + i + "&referrer=" + e.location.href),
            n.setAttribute("width", "100%"),
            n.setAttribute("height", "220"),
            n.setAttribute("scrolling", "no"),
            n.setAttribute("frameborder", "no"),
+           n.setAttribute("title", "Podcast"),
            t.parentNode.replaceChild(n, t),
            (this.id = +new Date()),
            (this.src = n.src),
            (this.iframe = n);
    }
    var r = "https://changelog.com",
        i = e.getElementsByClassName("changelog-episode"),
        n = [],
        a = function (e, t) {
-            (t.context = "player.js"), (t.version = "0.0.11"), (t.listener = e.id), e.iframe.contentWindow.postMessage(JSON.stringify(t), r);
+            try {
+                (t.context = "player.js"), (t.version = +"0.0.11"), (t.listener = e.id), +e.iframe.contentWindow.postMessage(JSON.stringify(t), r);
+            } catch {}
        };
    window.addEventListener("message", function (e) {
        if (e.origin !== r) return !1;
        var t = JSON.parse(e.data);
        if ("player.js" !== t.context) return !1;
        if ("ready" === t.event) for (var i = n.length - 1; i >= 0; i--) n[i].src === t.value.src && a(n[i], { method: "addEventListener", value: "play" });
        if ("play" === t.event) for (i = n.length - 1; i >= 0; i--) n[i].id !== t.listener && a(n[i], { method: "pause" });
    });
    for (var s = i.length - 1; s > -1; s--) n.push(new t(i[s]));
})(document);

We are going to load the script in a useEffect hook so that it won't run on the server (where a browser API, like document and window, isn't available):

useEffect(() => {
    const script = document.createElement('script');
    script.src = '/embed.js'; // Since I'm using Next.js I can place the file in the `public` folder and refer to it like so.
    script.async = true; // Make sure the script isn't render-blocking.
    script.defer = true;
    document.body.append(script);
}, []);

That's it! You now have a beautiful player on your site.

Credits

The approach of using the useEffect hook was taken from React NodeGui website source code.

Thank you for reading my post! I hope you will find it useful ;)

How to make your Electron app faster 🚀⚡

Antoni Kępiński — Sun, 11 Aug 2019 11:56:50 +0000

So you just made a nice & shiny new app with Electron. It works as expected, has a beautiful UI, ~~eats a lot of RAM~~ and ~~is slow~~, right?

Introduction

If you don't know that already, Electron is an open-source framework for building cross-platform desktop applications using HTML, CSS & (duh) JavaScript. It was initially called Atom Shell and was developed by Github to power their text editor - Atom.

Everything sound great, right? You don't need to learn another language to create cross-platform apps and instead utilize your existing knowledge.

Unfortunately, Electron has some downsides. To render your application UI, it uses Chromium, which is always bundled in your final application. Because of that:

Size of application built with Electron is typically around ~120 MB.
Electron apps usually use a lot of RAM.
UI might feel a bit slow, especially on the older computers.

Now, even though we can't just delete the whole Chromium from our app and reduce it's size, we can still do something about the RAM usage & speed.

That's why I would like to show you 4 tips on how to make your Electron app faster!

1. Use V8 Engine code cache

Chrome V8 is basically a JavaScript engine, that powers both Node.js & Chromium browser. One of it's feature is the code caching, which can speed up instantiation time of you app.

To make sure this feature is enabled, we will use a package called v8-compile-cache, created by Andres Suarez:

# Install the package
$ npm install v8-compile-cache

and then, in your entry module add the following code:

require('v8-compile-cache');

// or, using ES6 `import`:
// import 'v8-compile-cache';

Note: Take a look at the benchmarks to see how v8-compile-cache speeds up popular modules 😄

2. Use a module bundler

This suggestion is especially useful in larger projects, that use a good amount of packages. Using a module bundler, like Webpack will enable features like tree shaking and code splitting, which will make your code smaller & faster.

You will also be able to use some of the community-made plugins & loaders.

3. Use faster JavaScript methods, especially when working with DOM

Look at the following 2 lines of code:

const elementOne = document.getElementById('one');
const elementTwo = document.querySelector('#one');

They both do the same thing - find the DOM element. But take a look at the performance benchmark:

As you can see, the first method is more than 2 times faster, than the second one. And yes - that does not mean, that the second method is slow - both are really fast in practical use cases, but when we use a lot of slower methods in our application, replacing them with faster alternatives can really make a difference!

4. Use WebAssembly (or native addons)

This change can really speed up you application, but it also requires the most amount of work.

If your application has to, for example, calculate on a very big numbers really fast or inspect large amounts of data, JavaScript might be too slow 😢

That's exactly when WebAssembly and native addons comes in handy!

Take a look at my Electron application - elcalc, a calculator. To do more advanced math, I used a really nice library called math.js. Unfortunately, when I was testing advanced & complex calculations, there was a noticeable timeout between clicking the evaluate button and the result showing up. Not good...

I decided to write a simple Rust code, that will handle the math & convert it to WASM (shorthand for WebAssembly). I used a crate (something like npm package, but for Rust) called meval, that parses math expressions and evaluated them.

To actually generate the WASM, I used wasm-pack and it's rust-webpack-template.

I also used a Webpack plugin, called optimize-wasm-webpack-plugin
, that (as it's name says) optimized WebAssembly files using binaryen.

And to lazy-load the WASM function in my JavaScript code, I used the dynamic import proposal:

import('../crate/pkg').then(async module => {
    // do something
});

Now my calculator evaluates math expressions much faster 🚀

BONUS: 5. If you care about app size, use something else

If you care much about your app size, there is an alternative to Electron, called Carlo. Instead of including Chromium in your app bundle, it uses the locally installed Google Chrome browser on user's computer.

Unfortunately this means that when user does not have Google Chrome installed, your app won't launch and it will display an error.

Credits

Some suggestions listed in this post were taken from
Felix Rieseberg's Medium article, called "JavaScript on the Desktop, Fast and Slow". I highly recommend checking it out!

Thank you for reading my post! I hope you will find it useful ;)