DEV Community: Nhlanhla Lucky Nkosi

The Modern Web Is a Superpower: Why Browser APIs Matter in 2026

Nhlanhla Lucky Nkosi — Mon, 22 Dec 2025 16:05:27 +0000

The web has changed more in the last six years than in the decade before. Once widely considered insecure and incapable of supporting robust, critical experiences, Significant work on standards and web capability is leading to a much more reliable ecosystem. I personally love this because single-use applications frustrate me. From restaurants that have forced me to download their app just to see a menu, to airlines that have forced me to download their app just to check in, single-use applications that will gather dust, take up space and mine data on my phone.

This, and my fondness for JavaScript, is why I'm interested in bridging the gap between Native and Web applications.

If you're still thinking of the browser as “HTML + CSS + maybe some JS,” you're missing one of the most significant platform shifts in tech.

Today, your browser can:

Access the file system
Read sensors like orientation and motion
Interact with device hardware
Run GPU-powered compute
Capture media
Share data to native apps
Send background notifications
Store offline data reliably
Authenticate with passkeys
And so much more

This explosion of capability (and some personal AI fatigue) is why I've been delivering conference talks on web capabilities, more than anything else, over the last few years. One of the latest talks I delivered at DevConf 2025 is titled

“Web APIs You Should Be Using in 2025: Unlocking Next-Level Web Experiences.”

Talk video: https://youtu.be/FAFNXf5UyhU

Why all of this matters

For years, developers believed:

“If you want true native functionality, you need to build a native app.”

That is no longer true.

Project Fugu, WebGPU, PWA advancements, and browser standardisation mean that modern web apps can now match native apps in many important use cases:

Productivity tools
Editors (image, video, audio, text)
Games
Data dashboards
Offline apps
Utilities and internal tools
Mobile-first apps

Add in PWAs, and you get:

Installability
Offline capability
Icon presence
App-like UI
Deep integration with device APIs

We're at a point where the web platform is no longer catching up to native — it’s competing with it.

Why now? What changed?

Cross-browser API adoption is finally happening
Chrome pioneered many APIs, but now Firefox + Safari have implemented many of them or announced intent.
Security models matured
Permissions, transient access, user activation, and sandboxing have all evolved.
WebAssembly + WebGPU
These two alone changed what’s possible.
Enterprise adoption
Companies now prefer “one codebase everywhere.” For some, this is to limit development and support costs, while others realise the power and convenience offered by the web platform.

What’s coming next in this series?

Over the next few weeks, I'll break down several powerful modern Web APIs, how they work, and real demos you can use. These include:

File System Access API
Badging API
Web Share API
Screen Wake Lock
Sensor APIs
Media Capabilities
Clipboard API (including images)
Device Orientation + Motion
WebGPU
Background Tasks & Periodic Sync

Final thoughts

If you’re a web developer, this is one of the most exciting times to be working on the platform. The browser is no longer just a document renderer but a fully fledged application platform.

Follow me here on DEV.to to get the rest of the series.

Creating a QR Code with custom icon and text using HTML & JavaScript

Nhlanhla Lucky Nkosi — Mon, 20 Dec 2021 11:17:47 +0000

Background & Context

Quick Response (QR) codes are a powerful tool. A QR code is a type of barcode that stores information as a series of pixels in a square-shaped grid that can be read easily by a digital device such a smartphone through its camera. QR codes are frequently used to track information about products in a supply chain and often used in marketing and advertising campaigns. The most common use for QR codes is to embed a url - giving you the ability to share a link without the tedious task of having to manually type it in a url bar correctly.

I recently had to build a token redemption feature onto a web application my team maintains. A direct url with a GUID seemed to be the best solution to go with. GUIDs are very long and to simplify the redemption process, we decided to distribute the tokens using QR codes. We needed to generate hundreds of tokens. To avoid mistakes and the tedious process of creating cards manually using word😂, I decided to automate this. JavaScript is currently the hammer I hit all quick problems with so I looked for a web-based solution.

The solution to problem

We need to have a card that has a QR code in the middle and some accompanying text to say "congratulations" and provide instructions on how to redeem the code. We understood that not everyone would have a phone that's capable of scanning QR codes and some people might just not know how to. To address this concern, we build a simple input box that allowed people to enter the guid manually should they choose to do so. This added the requirement of printing the GUID onto the card that we distribute.

This means that we have to do three things to solve this problem:

Generate the QR code
Generate text around the QR Code which includes the Guid
Download the resultant "card" in an acceptable format

Solution - Part 1: Generate QR Code

The core of the solution is automatically generating the QR code. My favourite thing about web-development is the collaborative spirit of developers in the space. As the joke goes: "just search for what you need and suffix it with 'js' and chances are that you'll find a library that does exactly that."

I went through a few npm packages before finding the QR Code Styling package which is simple to understand and easy to get started with.

You can include the package using unpkg which is a fast, global content delivery network (cdn) for everything on npm. You can include the script using the following line in the head of your html page:


 javascript
<script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>

Once included, you can create a new instance of a QR code using the new QRCodeStyling constructor which takes in an 'options' object as the parameter. The most basic properties of this 'options' parameter include the dimension of the code expressed as width and height, the data you want the code to represent - a url in our case, a url with the image you want at the center of the QR Code, and options configiuring the look and feel of the code like how rounded you want the edges of the code to be. An example code as adapted from the qr-code-styling docs is shown below:


 javascript
<script type="text/javascript">

    const qrCode = new QRCodeStyling({
        width: 300,
        height: 300,
        type: "svg",
        data: "https://dev.to/luckynkosi/",
        image: "https://d2fltix0v2e0sb.cloudfront.net/dev-rainbow.svg",
        dotsOptions: {
            color: "#4267b2",
            type: "rounded"
        },
        backgroundOptions: {
            color: "#e9ebee",
        },
        imageOptions: {
            crossOrigin: "anonymous",
            margin: 20
        }
    });
    //place it on the screen
    qrCode.append(document.getElementById("canvas"));
    //download the generate image of the QR code
    qrCode.download({ name: "qr", extension: "svg" });
</script>

Setting up the options object can be cumbersome. Luckily enough, Denys Kozak has created a brilliant website that lets you configure the look and feel using a simple interface and then export the config as a json file. I played around with the config and made everything a gradient. The exported json object is below:


 json
{"width":300,"height":300,"data":"https://dev.to/luckynkosi/","margin":0,"qrOptions":{"typeNumber":"0","mode":"Byte","errorCorrectionLevel":"Q"},"imageOptions":{"hideBackgroundDots":true,"imageSize":0.4,"margin":0},"dotsOptions":{"type":"extra-rounded","gradient":{"type":"linear","rotation":0,"colorStops":[{"offset":0,"color":"#7a0617"},{"offset":1,"color":"#beb819"}]}},"backgroundOptions":{"gradient":{"type":"radial","rotation":0,"colorStops":[{"offset":0,"color":"#26922d"},{"offset":1,"color":"#ecc1c1"}]}},"image":"data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjM1IDIzNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBjbGFzcz0icmFpbmJvdy1sb2dvIgogICAgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaW4gbWVldCI+CiAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICA8ZyBpZD0iODBLIj4KICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjODhBRURDIiBwb2ludHM9IjIzNC4wNCAxNzUuNjcgMTU4LjM1IDIzMy45NSAyMDUuNTMgMjMzLjk1IDIzNC4wNCAyMTIiPjwvcG9seWdvbj4KICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBwb2ludHM9IjIzNC4wNCAxNDAuMDYgMTEyLjExIDIzMy45NSAxMTIuMTMgMjMzLjk1IDIzNC4wNCAxNDAuMDgiPjwvcG9seWdvbj4KICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBwb2ludHM9IjEzMy4yNSAwLjk1IDAuMDQgMTAzLjUxIDAuMDQgMTAzLjUzIDEzMy4yNyAwLjk1Ij48L3BvbHlnb24+CiAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iI0Y1OEY4RSIgZmlsbC1ydWxlPSJub256ZXJvIiBwb2ludHM9IjAuMDQgMC45NSAwLjA0IDMxLjExIDM5LjIxIDAuOTUiPjwvcG9seWdvbj4KICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjRkVFMThBIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHBvaW50cz0iMzkuMjEgMC45NSAwLjA0IDMxLjExIDAuMDQgNjcuMDEgODUuODQgMC45NSI+PC9wb2x5Z29uPgogICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiNGM0YwOTUiIGZpbGwtcnVsZT0ibm9uemVybyIgcG9pbnRzPSI4NS44NCAwLjk1IDAuMDQgNjcuMDEgMC4wNCAxMDMuNTEgMTMzLjI1IDAuOTUiPjwvcG9seWdvbj4KICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjNTVDMUFFIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHBvaW50cz0iMTMzLjI3IDAuOTUgMC4wNCAxMDMuNTMgMC4wNCAxMzkuMTIgMTc5LjQ5IDAuOTUiPjwvcG9seWdvbj4KICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjRjdCM0NFIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHBvaW50cz0iMjM0LjA0IDAuOTUgMjI2LjY3IDAuOTUgMC4wNCAxNzUuNDUgMC4wNCAyMTEuMzggMjM0LjA0IDMxLjIiPjwvcG9seWdvbj4KICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjODhBRURDIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHBvaW50cz0iMTc5LjQ5IDAuOTUgMC4wNCAxMzkuMTIgMC4wNCAxNzUuNDUgMjI2LjY3IDAuOTUiPjwvcG9seWdvbj4KICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjRjU4RjhFIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHBvaW50cz0iMjM0LjA0IDMxLjIgMC4wNCAyMTEuMzggMC4wNCAyMzMuOTUgMTguMDcgMjMzLjk1IDIzNC4wNCA2Ny42NSI+PC9wb2x5Z29uPgogICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiNGRUUxOEEiIGZpbGwtcnVsZT0ibm9uemVybyIgcG9pbnRzPSIyMzQuMDQgNjcuNjUgMTguMDcgMjMzLjk1IDY0LjcgMjMzLjk1IDIzNC4wNCAxMDMuNTYiPjwvcG9seWdvbj4KICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjRjNGMDk1IiBmaWxsLXJ1bGU9Im5vbnplcm8iIHBvaW50cz0iMjM0LjA0IDEwMy41NiA2NC43IDIzMy45NSAxMTIuMTEgMjMzLjk1IDIzNC4wNCAxNDAuMDYiPjwvcG9seWdvbj4KICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjNTVDMUFFIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHBvaW50cz0iMjM0LjA0IDE0MC4wOCAxMTIuMTMgMjMzLjk1IDE1OC4zNSAyMzMuOTUgMjM0LjA0IDE3NS42NyI+PC9wb2x5Z29uPgogICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiNGN0IzQ0UiIGZpbGwtcnVsZT0ibm9uemVybyIgcG9pbnRzPSIyMzQuMDQgMjEyIDIwNS41MyAyMzMuOTUgMjM0LjA0IDIzMy45NSI+PC9wb2x5Z29uPgogICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM3LjAwMDAwMCwgNzcuMDAwMDAwKSIgZmlsbD0iI0ZGRkZGRiI+CiAgICAgICAgPHBhdGggZD0iTTI4LjIzNzE1MTcsMC43NSBDMzIuNzUxMDgzNiwxLjcgMzYuMDExMTQ1NSwzLjU1IDM5LjM3MTUxNyw3LjA1IEM0Mi40MzA5NTk4LDEwLjI1IDQ0LjMzNjg0MjEsMTMuOSA0NS4xMzkzMTg5LDE4IEM0NS43OTEzMzEzLDIxLjQ1IDQ1Ljc5MTMzMTMsNTguNTUgNDUuMTM5MzE4OSw2Mi4wNSBDNDMuNDM0MDU1Nyw3MS4xNSAzNS42NjAwNjE5LDc4LjI1IDI2LjAzMDM0MDYsNzkuNSBDMjQuMDI0MTQ4Niw3OS43NSAxNy4zMDM0MDU2LDgwIDExLjE4NDUyMDEsODAgTC03LjEwNTQyNzM2ZS0xNSw4MCBMLTcuMTA1NDI3MzZlLTE1LDEuNDIxMDg1NDdlLTE0IEwxMi40MzgzOTAxLDEuNDIxMDg1NDdlLTE0IEMyMS4yNjU2MzQ3LDEuNDIxMDg1NDdlLTE0IDI1Ljc3OTU2NjYsMC4yIDI4LjIzNzE1MTcsMC43NSBaIE0xNC41NDQ4OTE2LDQwIEwxNC41NDQ4OTE2LDY1LjYgTDE5LjcxMDgzNTksNjUuNCBDMjQuMTc0NjEzLDY1LjI1IDI1LjEyNzU1NDIsNjUuMDUgMjcuMTMzNzQ2MSw2My45IEMzMS4wNDU4MjA0LDYxLjYgMzEuMDk1OTc1Miw2MS40NSAzMS4wOTU5NzUyLDM5LjcgQzMxLjA5NTk3NTIsMTguNSAzMS4wOTU5NzUyLDE4LjUgMjcuNDM0Njc0OSwxNi4xIEMyNS42MjkxMDIyLDE0LjkgMjQuODc2NzgwMiwxNC43NSAxOS45NjE2MDk5LDE0LjU1IEwxNC41NDQ4OTE2LDE0LjQgTDE0LjU0NDg5MTYsNDAgWiIKICAgICAgICAgICAgICBpZD0iQ29tYmluZWQtU2hhcGUiPjwvcGF0aD4KICAgICAgICA8cGF0aCBkPSJNOTMuNzg5NDczNyw3LjI1IEw5My43ODk0NzM3LDE0LjUgTDY4LjIxMDUyNjMsMTQuNSBMNjguMjEwNTI2MywzMi41IEw4My43NTg1MTM5LDMyLjUgTDgzLjc1ODUxMzksNDcgTDY4LjIxMDUyNjMsNDcgTDY4LjMxMDgzNTksNTYuMSBMNjguNDYxMzAwMyw2NS4yNSBMODEuMTUwNDY0NCw2NS40IEw5My43ODk0NzM3LDY1LjUgTDkzLjc4OTQ3MzcsODAgTDc4Ljk5MzgwOCw4MCBDNjIuNTQzMDM0MSw4MCA1OS45ODUxMzkzLDc5LjcgNTcuMzc3MDg5OCw3Ny40IEM1My43MTU3ODk1LDc0LjIgNTMuOTE2NDA4Nyw3Ni4yNSA1My43NjU5NDQzLDQxLjEgQzUzLjY2NTYzNDcsMTkuMiA1My44MTYwOTkxLDguODUgNTQuMTY3MTgyNyw3LjQ1IEM1NC44NjkzNDk4LDQuODUgNTcuODI4NDgzLDEuNjUgNjAuNDM2NTMyNSwwLjc1IEM2MS45OTEzMzEzLDAuMiA2NS45MDM0MDU2LDAuMDUgNzguMTQxMTc2NSw0LjI2MzI1NjQxZS0xNCBMOTMuNzg5NDczNyw0LjI2MzI1NjQxZS0xNCBMOTMuNzg5NDczNyw3LjI1IFoiCiAgICAgICAgICAgICAgaWQ9IlBhdGgiPjwvcGF0aD4KICAgICAgICA8cGF0aCBkPSJNMTI1LjQzNzE1MiwyOC4xIEMxMjkuMTQ4NjA3LDQyLjM1IDEzMi4yNTgyMDQsNTMuNyAxMzIuMzU4NTE0LDUzLjM1IEMxMzIuNTA4OTc4LDUzIDEzNS42Njg3MzEsNDAuOTUgMTM5LjQzMDM0MSwyNi41IEwxNDYuMzAxNTQ4LDAuMjUgTDE1NC4xMjU2OTcsMC4xIEMxNjAuMDQzOTYzLDcuMTA1NDI3MzZlLTE1IDE2MiwwLjE1IDE2MiwwLjYgQzE2MiwxLjA1IDE0NC42NDY0NCw2Ni44IDE0My42NDMzNDQsNzAuMSBDMTQyLjk0MTE3Niw3Mi40IDEzOS4xNzk1NjcsNzcuMSAxMzcuMDczMDY1LDc4LjM1IEMxMzQuNDE0ODYxLDc5Ljg1IDEzMC41MDI3ODYsODAuMSAxMjguMDk1MzU2LDc4Ljg1IEMxMjUuOTM4Nyw3Ny43NSAxMjMuMDc5ODc2LDc0LjQ1IDEyMS42MjUzODcsNzEuMzUgQzEyMC43MjI2MDEsNjkuNDUgMTA1Ljk3NzA5LDE1LjM1IDEwMi41NjY1NjMsMS4zNSBMMTAyLjIxNTQ4LDAgTDExMC4wMzk2MjgsMCBDMTE3LjcxMzMxMywwIDExNy45MTM5MzIsMCAxMTguMzE1MTcsMS4xIEMxMTguNTE1Nzg5LDEuNzUgMTIxLjcyNTY5NywxMy45IDEyNS40MzcxNTIsMjguMSBaIgogICAgICAgICAgICAgIGlkPSJQYXRoIj48L3BhdGg+CiAgICAgIDwvZz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=","dotsOptionsHelper":{"colorType":{"single":true,"gradient":false},"gradient":{"linear":true,"radial":false,"color1":"#6a1a4c","color2":"#6a1a4c","rotation":"0"}},"cornersSquareOptions":{"type":"extra-rounded","gradient":{"type":"radial","rotation":0.017453292519943295,"colorStops":[{"offset":0,"color":"#3e747e"},{"offset":1,"color":"#de720d"}]}},"cornersSquareOptionsHelper":{"colorType":{"single":true,"gradient":false},"gradient":{"linear":true,"radial":false,"color1":"#000000","color2":"#000000","rotation":"0"}},"cornersDotOptions":{"type":"","gradient":{"type":"radial","rotation":0,"colorStops":[{"offset":0,"color":"#ff0000"},{"offset":1,"color":"#1c93ce"}]}},"cornersDotOptionsHelper":{"colorType":{"single":true,"gradient":false},"gradient":{"linear":true,"radial":false,"color1":"#000000","color2":"#000000","rotation":"0"}},"backgroundOptionsHelper":{"colorType":{"single":true,"gradient":false},"gradient":{"linear":true,"radial":false,"color1":"#ffffff","color2":"#ffffff","rotation":"0"}}}

Solution - Part 2: Decorate the space

The qr-code-styling example above appends the generated QR code to an element with a "canvas" id. For our token, we can add text around the code and style it accordingly. I'll leave the styling to you but the HTML for the text components can be added as shown below:


 html
<body>
<div id="output">
    <p>Congratulations. To redeem your token, scan the below Code</p>
    <div id="canvas"></div>
    <p>OR</p>
    <p>
      Enter the below claim code on the redemption site to redeem your token
    </p>
      <p><strong class="guid"></strong></p>
    </div>
</div>
</body>

The below is an example of what the above code renders.

Solution - Part 3: Downloading the token.

At this point, we have everything we need on the screen in HTML. The next step download everything we see, including the borders, as an image. To achieve this, we need to "screenshot" the part of the web page we want to download as image and download the result. We can use a HTML2Canvas to achieve this.

As described in the docs, "The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page."

Similar to qr-code-styling, we can import the script using the following:


 javascript
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"></script>

and then implement the "screenshot" and download using the following code:


 javascript
    html2canvas(document.getElementById('output'))
    .then((canvas) => {
        let link = document.createElement("a");
        link.download = 'fileName.png';
        link.href = canvas.toDataURL("image/jpg");;
        link.click();
    });

The html2canvas library takes in the target html element and returns a promise with a new canvas element. We can then create a new download link with the new canvas (converted to data URL) as the content of the link, specify the filename and then "click" it to download the resultant canvas.

Load the page and watch the screen populate and the "output" div download as a .png file.

I hope you found this article useful and I'd love to see what you build with these tools. Please feel free to share in the comments.

The final step: How to package a Node.JS application as an exe

Nhlanhla Lucky Nkosi — Mon, 04 Jan 2021 16:48:29 +0000

“To a man with a hammer, everything looks like a nail.” — Twain/Maslow/Kaplan/Baruch/Buddha/Unknown.

We all have our go-to tools; that language, framework, and/or IDE that we swear we can do anything with. Personally, I enjoy pushing the limits of whatever tool or programming language I use at the time. Currently, JavaScript is my hammer, and I hit everything with it.

I was recently asked to build a "simple app" that did some administrative tasks. As with most things lately, I decided to use JavaScript to build it and only found out at the end of my development that I was expected to deliver this app as a .exe file to run on windows. Now that I had written all the wonderful Node.JS code, I had to answer the question: how do we package our application share it as an executable.

There are numerous online resources aimed at teaching you how to build a Node.JS application. This is great since node, especially when reinforced with the myriad of open-source packages you can add with npm and yarn, is a great way of building applications of varying sizes and complexities.

JavaScript is most commonly used for web development. Since sharing our creation on the web is such a common part of the web development ecosystem, we have a lot of hosting services that package and run our Node.JS code, leaving us only with the responsibility of giving them our code.

What happens when we need to build a simple application that runs on a custom server somewhere? Most developers that use languages like Java and the c-family languages will simply go for building an executable programme from their code so that the application is self-contained and they don't need to share their actual code. JavaScript developers, how do we go about doing this; how do we build an executable from our Node.JS code without containerization?

PKG

The first option is to use pkg. It is a command-line interface that enables the developer to create executables from Node.JS projects; allowing you to run the app even on environments that do not have Node.JS installed on them. Use cases include being able to share your app without sharing your source code thereby equipping you to create cross-platform commercial and demo copies of your application without needing to re-code the entire application or install dependencies on the machine that runs the application.

Getting started

To install pkg
npm install -g pkg
To check if the pkg is correctly installed, you can run the following command: pkg.

Most people have the entry point of their Node.JS application as an index.js file. If you build a package with no configuration, it will name your executable index.exe which is not a very meaningful name. I would, therefore, advise that you give this file a more meaningful name, like 'lucky-example-node-executable.js' but since I'm lazy to retype this name in the rest of the article, I'll call my example file 'lene.js'. With lene.js as the entry point to my Node app, I can package my app by running the following command:
pkg lene.js
Running the above command will generate three programmes; namely an executable for Windows, macOS, and Linux as shown in the image below:

As shown in the above image, the command generates files that are aptly-named in accordance with the target platform of each programme.

Suppose you only need to run your programme on one platform, say a windows server. Then packaging your app for all three targets would not necessarily make sense or be a good thing to do. In this instance, you can specify your target platform using the following command:
pkg -t <targets> <programme-entry>.js
where <programme-entry>.js is the file name of the entry point into your Node project. In our example here, the file name is lene.js.

<targets> is a comma-separated list of target platforms that follow a specific 3-part format. Each part specifies different platform attributes that help tell pkg how exactly to package our app. These attributes are nodeRange-platform-architecture. The first specifies the version of Node to be used by your application and specified as node${n} or node latest to use the latest available LTS version of Node. The second is the platform, specified as one of the following supported strings:

freebsd,
linux,
alpine,
macos,
win.

and the last part is the target architecture namely x64, x86, armv6 or armv7.

So pkg -t node12-linux,node10-win-x86 lene.js will fetch the necessary dependencies required to package the application and use node version 12 to build a Linux executable and then Node version 10 to build a Windows x86 executable.

This is a quick start guide to using pkg. This was the most beginner-friendly solution I could find. For a simple application, you need almost no further configuration. The only extra work you might need is if you import dependencies based on variables. In this scenario, you would have to specify the files - scripts and assets - manually in pkg property of your package.json file in order for them to get packaged with your application code.

Pkg is only one of a number of ways to do this. I also found Nexe which is also a command-line utility that compiles your Node.js application into a single executable file.

Let me know what you think of pkg and if you'd like to make a comparison of pkg and nexe. Do you have any other similar tools that I can look at? Please let me know in the comments section.

I hope you found this article useful.

Complete Guide: How to use Grafana with a custom Node API.

Nhlanhla Lucky Nkosi — Fri, 21 Aug 2020 12:01:17 +0000

Data visualization is important for harnessing the value in the data we have at our disposal. Grafana (described as The open observability platform) is used by thousands of companies to monitor everything. It makes data visualization and monitoring simpler.

Grafana basics

Grafana can be downloaded in various ways from their site.

Grafana is available for Linux, Windows, Mac, Docker, and ARM.
The download page details how it can be downloaded and installed for each one of these options.

Once Grafana is installed and running, you'll need to create a dashboard and at least one panel. A panel is the part of the dashboard that will have a specific visualization.

When you add a new panel in the latest version of Grafana (7.1.4 at the time of writing this article), a visualization of random walk data over time will be automatically created for you.

Data

In the panel edit screen, you can see the visualization and three tabs at the bottom; namely, the Query, Transform, and Alert tabs. The Query tab has a dropdown with options of data sources you've added to your project as shown in the image below.

You need to create your own data source. To do this, head back to the main screen, hover over the settings cog, then click on 'Data Sources.'

The dependency (JSON)

We'll need a plugin to help us fetch and format our data for Grafana. This example makes use of the JSON Datasource Plugin. You need to download and install the plugin as it's shown on the site.

Adding the data source

Once you've got the plugin installed, click on add data source then search for JSON plugin under Add data source. Once you have it, click select.

The most important field on this screen is the URL. In here, populate your custom Node.JS endpoint. The name field is simply for you to be able to tell between your different data sources so you can name it anything you like as I did below 😂.
.

The Restful API

The plugin's documentation stipulates that you need to implement at least 4 endpoints. I'll walk you through what these actually do and when they are triggered.

As mentioned in the docs, you need a GET/ endpoint that returns a status code: 200 response. This is used to test whether your API is running. Without the expected response, Grafana won't add your data source and will pop up a "HTTP ERROR Bad Gateway" message.

Click on the 'Save and Test' button at the bottom of the screen to save your new data source.

Head back to your panel and click on edit. Now, when you click on the Query dropdown, your aptly named data source should appear as the first alternative option in the list.

Under the 'A' query, there are a few things to discuss.

The first field labeled 'Format as' controls the kind of data that is sent to your backend with the data request. It has two options, Time and Table. You can decide to perform different actions on your backend based on this. For this example, we won't care about the field.

The next field, labeled Metric, is important to us. To populate this field, the data source will make a POST request to the endpoint you specified and suffix it with a 'sub endpoint': "/search". so in our example, to populate this dropdown, the JSON plugin will make a POST request to localhost:4400/myEdnpoint/search. This means that your server should make a 'search' endpoint available.

In my Node.JS + Express restful API, this is what the example code would look like:

module.exports = router.get(
  '/myEndpoint',
  handle_errors(async (req, res) => {
    res.status(200).send('successfully tested');
  })
);

module.exports = router.post(
  '/myEndpoint/search',
  handle_errors(async (req, res) => {      
    let data = [ { "text": "upper_25", "value": 1}, { "text": "upper_75", "value": 2} ];
    res.status(200).send(data);
  })
);

The first endpoint GET/ simply returns a status code 200 response.
The second endpoint with '/search' is a POST and returns a key-value part of text and value. The value will be used to query for data we want to visualize.

Once you click on the Metric field of your choice as presented in the dropdowns, the plugin will make a POST request to a 'sub endpoint' with '/query'. So in our example, once a choice is made from the dropdown, the JSON plugin will make a POST request to localhost:4400/myEdnpoint/query with added information passed to it.

This means our restful API needs to expose this endpoint. Our example implementation is shown below:

module.exports = router.post(
  '/myEndpoint/search',
  handle_errors(async (req, res) => {      
    let data = [ { "text": "upper_25", "value": 1}, { "text": "upper_75", "value": 2} ];
    res.status(200).send(data);
  })
);

As shown in the image of my debug window belong, the plugin makes a POST request and passes a lot of data in the body.

The body object has a field called targets which is an array of added user-input information. The first element of this array provides information from our first query in Grafana. This includes information about whether we want data formatted as Time series or a Table, the data source name, any additional user data, and importantly, the 'target' which is the value of the selected metric on the Grafana UI. I clicked on the 'upper_75' option and as dictated by our response in the /search/ endpoint, the value of this field is 2. This is also visible in the debug window shown above.

On the Grafana query editor window, we also have a field where we can provide additional data in JSON form as shown in this image

This data will be sent to the /query endpoint with the POST request once a metric is chosen.

This data will also be in the target array's first element under the 'data' object. This can be seen in my debug window below.

Data response.

Now that we have the required endpoints to accept requests for status checking (GET/ 200), options (/search), and actual data retrieval (/query), we need to understand how to format our response for Grafana to be able to visualize our data.

In the screenshots above, data is retrieved from a function called getQueryData(). All this function does is return an array with data formatted for visualization by Grafana as shown below.

const getQueryData = () => {
  return [
    {
      "target":"pps in",
      "datapoints":[
        [622,1450754160000],
        [365,1450754220000]
      ]
    },
    {
      "target":"pps out",
      "datapoints":[
        [861,1450754160000],
        [767,1450754220000]
      ]
    },
    {
      "target":"errors out",
      "datapoints":[
        [861,1450754160000],
        [767,1450754220000]
      ]
    },
    {
      "target":"errors in",
      "datapoints":[
        [861,1450754160000],
        [767,1450754220000]
      ]
    }
  ]
};

Let's understand this response. This is an array of 4 objects. These objects are labeled 'target'. This should also tell us that the target field is likely to be a key of sorts. Since we'll be plotting a simple bar graph, the target field will be labeling our x-axis values. The next field in the object is datapoints which has to be a 2-dimensional array.

As shown in the Grafana documentation, the datapoints property is of type TimeSeriesPoints.

...which is of type [][] (2D Array) as shown below.

You can think of the 2D Array as a Table with values and the time. The first entry's datapoints are represented in the table below. The time is shown as a Unix timestamp in milliseconds.

pps in	Time
622	1450754160000
365	1450754220000

The Grafana visualization is taking shape but it isn't the bar graph we want yet. .

At this point, we've done everything necessary on our Node backend. The rest is up to the front-end configuration of Grafana.

Click on the 'show options' button on the top right corner of the edit screen. This brings up a panel with configurations for your display panel.

Under "Visualization," you can see the different types of visualizations you can create on Grafana. We'll go with the bar graph.

We need to change from being a time-based visualization to one where our 'target' is the independent variable. We need to change the x-axis. Change the x-axis mode from Time to 'Series' and voila; we now have a bar graph. Play around with the rest of the configurations to see how they change your visualization.

Grafana is a powerful tool in the right hands. I hope this was useful to you. Keep learning.

To Kill a Working Drone: Flying drones with Twitter, Bananas and WebAPIs with Lucky Nkosi

Nhlanhla Lucky Nkosi — Thu, 23 Jul 2020 11:59:28 +0000

Lucky is a Software Engineer in the R&D division of BBD Software and a game development lecturer at the Digitals Arts division of Wits University in Johannesburg. He has experience in building and maintaining enterprise banking software with varying tech-stacks; all the way from VB6 and .Net to web and cloud technologies. Lucky is interested in IoT and passionate about making technology accessible through the web.

My talk covers the power of modern browsers and how their features can be used to create accessible web applications that facilitate the delivery of meaningful and interactive experiences. I show this by flying a drone with a variety of control schemes; from pure JS to my phone's accelerometer and even detecting my hand gestures with no direct contact to anything.

Here is a download link to the talk slides (PDF)

This talk will be presented as part of CodeLand:Distributed on July 23. After the talk is streamed as part of the conference, it will be added to this post as a recorded video.

Flying a drone with Web Bluetooth

Nhlanhla Lucky Nkosi — Thu, 18 Jun 2020 19:11:21 +0000

The second article in the "To Kill a working drone" Series.

All the code for the projects mentioned in the series can be found in my "MamboMiniControllers" Github repo:

LuckyNkosi / MamboMiniControllers

Demos and example code showing different control schemes for flying the MamboParrorMini

To kill a working drone with Web Bluetooth

In the previous article, we looked at the Mambo Parrot drone and its capabilities. The drone can be controlled using Bluetooth Low Energy (BLE) and Wifi. For this experiment, we'll be focusing on BLE.

Gery has a post on the fundamentals of Bluetooth and using the Web Bluetooth API. She covers the topic very well in her article titled "BLE and GATT and other TLAs". I suggest you take a look at that if you need a deeper understanding of Web Bluetooth.

BLE and GATT and other TLAs

Gergana Young ・ Dec 17 '19 ・ 6 min read

#bluetooth #webbluetooth #javascript #iot

Armed with BLE, WBA and other TLAs, we can deduce that in order to fly the drone safely, we need to be able to do the following:

Connect to the drone
Takeoff
Hover
Land

These are tasks that are likely to be actioned quite frequently so I created a drone connection management script. The script is based on Peter O'Saughnessy's drone.v1.2.js script which is part of his parrot drone project on GitHub.

Our modified drone-connection-management.js script exports a class named ParrotDrone. With drone assigned to an instance of ParrotDrone,

const drone = new ParrotDrone();

The class exposes utility function which we can then access as shown below. :

drone.connect(onDisconnectCallback);
drone.takeOff();
drone.hover();
drone.land();
drone.disconnect();
drone.emergencyCutOff();

//Movement commands
drone.flip();  //One directional flip
drone.moveForwards(); 
drone.moveBackwards();
drone.moveRight();
drone.moveLeft();
drone.twistLeft();
drone.twistRight();

'Moving' a drone:

The above commands translate to specific drone movements. 'moving' in any direction, involves a combination of slightly tilting the drone and thereby moving it in said direction. Forwards and backward involves pitching while left and right involve rolling the drone.

The 'twist' commands are simply yawing movements; keeping the drone in place and rotating it about the y-axis. The roll, pitch, and yaw movements are shown in the image below sourced from Emissary Drones.
.

This forms the backbone of our different control schemes. To abstract from the complexity of our drone-connection-management script, we can create a drone-control.js script which simplifies how we work with the drone. The code for this script is:

import { ParrotDrone } from "../lib/drone-connection-management.js";

//#region  Initialisation
// to make working with angles easy
window.TO_RAD = Math.PI / 180;
window.TO_DEG = 1 / TO_RAD;

const drone = new ParrotDrone();
window.drone = drone;
function onDisconnectCallback() {
  console.log("Disconnected called");
  init();
}
function init() {
  //connect:
  drone
    .connect(onDisconnectCallback)
    .then(() => {
      console.log("connected");
    })
    .catch(() => console.log("Connection Error"));
}

function connectToDrone() {
  init();
}
function takeOff() {
  drone.takeOff();
}
function land() {
  drone.land();
}
function disconnectFromDrone() {
  drone.land();
}
function hover() {
  drone.hover();
}
//Global functions so we can simply call them 
window.takeOff = takeOff;
window.land = land;
window.connectToDrone = connectToDrone;
window.hover = hover;
window.disconnectFromDrone = disconnectFromDrone;

Using the code

To use this code, we simply have to import the file in order HTML document.Using a relative path with the script saved in a 'lib' folder,we can import it as shown below:

<script type="module" src="../lib/drone-control.js"></script>

The following buttons will then allow you to control the drone:

<div>
  <button type="button" onclick="takeOff()">Take Off</button>
  <button type="button" onclick="connectToDrone()">Connect To Drone</button>
  <button type="button" onclick="disconnectFromDrone()">Disconnect</button>
</div>

<div>
  <button type="button" onclick="hover()">Hover</button>
  <button type="button" onclick="land()">Safe Land</button></div>

All done

At this point, you have everything you need to fly the drone with Web-Bluetooth. The following section is added information on how the drone works and if you use the script in my repo, is not necessary to get you started and you can skip to the conclusion.

Connect to the drone

Connecting to the drone involves a few steps. Firstly, we need to discover (search for) the drone. Then connect to it's GATT services.

Discovering the drone

The drone is a bluetooth periferal. To discover it, we use the Web Bluetooth API's Bluetooth.requestDevice().
The below image is the method definition as found on MDN Docs.

As shown in the MDN Docs, the method takes in an optional options parameter object which has filters and optionalServices arrays as well as the acceptAllDevices boolean which defaults to false.

With droneDevice declared in this scope, we can create a _discover() function to do this. The function looks like this:

  _discover() {
    console.log("Searching for drone...");
    return navigator.bluetooth
      .requestDevice({
        filters: [
          { namePrefix: "Mambo_" }
        ],
        optionalServices: [
          this._getUUID("fa00"),
          this._getUUID("fb00"),
          this._getUUID("fd21"),
          this._getUUID("fd51")
        ]
      })
      .then(device => {
        console.log("Discovered drone", device);
        this.droneDevice = device;
      });
  }

Connect GATT

From Gery's post: "The Bluetooth Generic Attributes (GATT) Profile is the way that Bluetooth devices communicate with each other. It defines a hierarchical data structure for communication between two BLE devices"

Once we've got the droneDevice returned and set by our _discover() function, we can now connect to the drone using it's GATT profile. We can listen for it's disconnection using an eventListener and the code looks as follows:

  _connectGATT() {
    console.log("Connect GATT");

    this.droneDevice.addEventListener(
      "gattserverdisconnected",
      this._handleDisconnect
    );

    return this.droneDevice.gatt.connect().then(server => {
      console.log("GATT server", server);
      this.gattServer = server;
    });
  }

Based on the drone's characteristics, we can get the state of the drone and use the drone's services to interact with it. For this, we need to start notifications for the services. For this, we have the _startNotifications() function which also handles caching. As Peter notes: The services are

Services:
 *  - fa00 - contains 'write without response' this.characteristics starting with fa...
 *  - fb00 - contains 'notify' this.characteristics starting with fb...
 *  - fc00 - contains 'write' characteristic ffc1, not currently used
 *  - fd21 - contains 'read write notify' this.characteristics fd22, fd23, fd24
 *  - fd51 - contains 'read write notify' this.characteristics fd52, fd53, fd54
 *  - fe00 - contains this.characteristics fe01, fe02, not currently used

connect in a nutshell

In a nutshell, we can create a promise chain of the steps required for connection and it looks as follows:

return this._discover()
          .then(() => {
            return this._connectGATT();
          })
          .then(() => {
            return this._startNotifications();
          })
          .then(() => {
            return new Promise(resolve => {
              setTimeout(() => {
                this._handshake().then(resolve);
              }, 100);
            });
          })
          .then(() => {
            console.log("Completed handshake");
            resolve();
          });
      });

Once we've connected successfully to the drone, we can begin sending control commands to the drone. To control the drone, we need to write commands to it's characteristics through it's GATT profile thrugh the characteristic.writeValue(command);.
The rest of the code is available in the repo.

Conclusion

The scripts we have created here, namely the drone-connection-management.js and drone-control.js will form the base for the different control scheme we explore in the rest of the series which includes flying the drone with twitter, bananas, and a leap motion controller.

I hope you enjoyed this article.

Lucky

To Kill a working drone - Intro

Nhlanhla Lucky Nkosi — Wed, 03 Jun 2020 19:58:19 +0000

In this series, I'll take you through flying a drone with Node.JS and BLENO, Web Bluetooth, and a wide range of custom controllers which include a variety of fruits, hand gesture detection and twitter.

I'll share all the libraries I used, the code I wrote, and details of the devices I use, where necessary.

Context

Like most good stories, this one starts with me having a few drinks at a company event. On my way home, I went online and 'accidentally' bought a drone and completely forgot that I did. I bought the drone from a an online store that charges unbelievably low prices for almost anything you can imagine and takes months to deliver the items to you. This is where I buy gadgets and electronic components I don't actually need.

About three months later, the drone, along with other things I had forgotten about, arrived. I now had a drone I had no use for so I did what any sane tech enthusiast would do: I decided to hack the drone.

This idea was inspired by a talk on Web Bluetooth I saw at DevConf in Johannesburg, South Africa by the incredible Gergana (Gery) Young

Gergana YoungFollow

Software developer, adventurer, and Star Wars geek extraordinaire.

The below image was stuck in my head and it is the reason for months of all the madness in this series of articles

I spoke about five ways to control a drone at BBD Software Development’s Es@cape conference last year and you can watch that video here:

From me, Lucky: Sharp👍 Sharp👍

Social Intelligence is among the most critical of skills.

Nhlanhla Lucky Nkosi — Tue, 04 Feb 2020 15:30:12 +0000

Technology is changing how the workplace operates and understandably, everyone is anxious about the future of work and related socio-economics elements. While automation, digitization, and the 4IR will scale down and in some instances, even bring a complete end to scores of jobs and industries, it will also create new jobs that previously did not exist. The question then, all students and young professionals should be asking themselves, is: What will set them apart in the future of work?

Traditionally, society looked to academia and formal tertiary education for answers. However, with technology, its hyper-rapid development, its accessibility and the greater impact it has on society, these institutions have been found wanting with regards to how fast they can pivot to meet industry needs. This is, of course, not to say that they are not doing anything. There are several higher education institutions in South African and the world that have, over the past ten years, introduced incredible programmes to address skill shortages, emerging industries’ needs and meet the market demand for highly skilled professionals. However, overall, these institutions stay stagnant for far too long and as a result, they are often out of touch with the respective industries.

While young people have, in the past, been able to easily rely on tertiary education to secure comfortable employment, we’re now seeing a high number of graduates that can’t get employment. Naturally, there are a plethora of factors that contribute to this. These include, but are not limited to, saturation in the different fields, a deteriorating economy, hiring biases and a general mismatch of skills availability and demand. As a result, the youth can no longer just simply rely on their tertiary qualifications and are forced to ask the question: What will set us apart?

I believe that the answer is something that is we can refer to as “Social Intelligence.” Social Intelligence can be described as “the ability to connect to others in a deep and direct way, to sense and stimulate reactions and desired interactions.”¹ This belief is founded on solid scientific research. A 2019 study conducted by Cecily Josten and Grace Lordan for IZA - Institute of Labor Economics (IZA DP No. 12520)² projects that by 2030, 47% of jobs will be automatable; with 35% of all jobs being fully automatable. The study, along with many others, suggests that ‘people’ and ‘thinking’ skills will become more valuable in the fourth industrial revolution.

Several recent studies into the future of jobs expanded on the revolutionary work of Carl Frey and Michael Osborne on the future of employment. The Frey and Osborne paper entitled “The future of employment: how susceptible are jobs to computerization?”³ was published in 2013 and provides a list of 70 different kinds of jobs and ranks them by their chances of being automatable. At the top of the list of jobs least likely to be automatable are medical practitioners (especially those dealing with mental health), educators, entertainers, designers, analysists, makeup artists, first responders, scientists, and engineers. Some of the most automatable jobs include telemarketers, librarians, clerks, tellers and barrage of manual-intensive and repetitive jobs.

We’ve all heard of robots taking over everything, so what makes these specific jobs immune? Josten and Lordan analysed the types of skills required for said jobs – with a focus on their similarities. The most prominent were:

Social perceptiveness - Being aware of others' reactions and understanding why they react as they do.
Negotiation - Bringing others together and trying to reconcile differences.
Persuasion - Persuading others to change their minds or behaviour.
Assisting and caring for others - Providing personal assistance, medical attention, emotional support, or other personal care to others such as co-workers, customers, or patients.

Collectively, these traits makeup Social Intelligence; or simply: the ability to connect to others in a deep and direct way, to sense and stimulate reactions and desired interactions. Robots are fundamentally logic-based operators reliant on repetition. From the listed jobs and skills, we can abstract that the safest jobs are those that rely on human perception and interaction.

I keep mentioning the future, but what about the present? Well, social intelligence is key to thriving in the modern-day workplace. There are very few jobs in which you don’t have to interact with other people. For instance, the myth of the Loner Genius Nerd in software development is not actually real when it comes to the working world. Programmers, for instance, must interact with each other, the business analysts, test teams, managers and even their clients. All of these different relationships and inter-person interactions are navigated differently. They require us to tap into our reserve of social skills.

Social intelligent people will be able to see when a team member is anxious and panicking and they’ll be able to disarm and help calm them down. Social intelligence has a direct impact on an individual’s personal performance. Having good social skills allows one to effectively get critical information from those around them in order to enhance their own performance. Socially intelligent people are more likely to build good social capital – helping them elevate their career far better and rapidly than those who are not sociable. Biases, whether blatant or not, exist in the workplace and we cannot shy away from that. They affect everyone’s decision making, whether they are aware of them or not. Social Intelligence allows one to understand other people’s biases and how to navigate and disarm them. It also allows people to be able to identify and interrogate their own biases and thought processes.

Having worked in different organisations across different industries, I've had the opportunity to experience different leadership styles. I strongly believe that Social Intelligence is a cornerstone of good leadership. The time of the traditional scary boss shouting orders from a tower has now passed. The most successful companies in the world have realised that human capital is their most valuable asset and have begun treating their employees with empathy and care. If you, as a leader, want to retain the best professionals and get the best performance out of your employees, you must be able to engage them beyond the surface. To be a truly effective leader in the modern-day workplace, you need to have well developed “soft skills.” People around you want to feel that they are led by a competent person who’s human and understand that they are human too.

According to the latest Council for Medical Schemes (CMS) Report (2013-14)⁴ the prevalence of mental illness amongst medical schemes beneficiaries is rising – which is directly linked to professionals. Dr Ali Hamdulay concludes that “Mental illness in the workplace leads to decreased productivity, increased sick-related absenteeism, poor work quality, wasted materials and even compromised workplace safety.”⁵ Dr. Humdulay emphasizes that Proactive Management is the best medicine for mental illness in the workplace. Proactive management in this instance requires great social intelligence.

Ultimately, the work we all do in our jobs is meant to serve human beings. If we do not understand each other, how can we truly deliver the best possible work we can? A builder must be able to understand and know how to manage their client’s emotions during construction. A teacher must do the same with their learners. Engineers must understand the people who will be using the systems they are building in order to build valuable things. We, as humans, are corporative species. As a species, we do our best when we work well with each other. That can’t happen without us being aware of each others' mental state and well-being.

One of the most critical and underrated skills anyone entering the workplace can have is social intelligence. It is not only about listening to those around you. It’s about being able to understand, empathise and connect with people beyond basic communication. This skill requires great personal effort to sharpen and will ultimately help us build the future of work environments we want and deserve.

I love working with new technologies and exploring the effects technology has on society. You can see some of my work on my personal site

From me, Lucky: Sharp👍 Sharp👍

The future beyond writing software

Nhlanhla Lucky Nkosi — Fri, 27 Dec 2019 16:53:30 +0000

Creating new, immersive and inclusive cyber-physical and digital experiences.

The date is December 9, 1968, and the phenomenal Douglas Engelbart delivers the mother of all demos; a video of which can be found here.
In this demo, Engelbart essentially introduces the idea of the mouse and keyboard. This is at a time when personal computing is simply inconceivable. 18 years later, in 1986, IBM released the Model M keyboard that resembles what most keyboards look like today.

Since the computer became personal, we've generally had one main means of interacting with it; the mouse and keyboard. Every single time we've dared to rethink and experiment with how we interact with computers, we've unlocked fulfilling new and immersive experiences that reshape the understanding of our reality and potential through facilitating meaningful engagement with the digital environment and in some cases, as with augmented reality, even blurring the lines between the digital and physical spaces.

In addition to changing our experiences of technology and the world around us, our experimentation with different means of interacting with computers often disrupts existing ways of doing things and indeed create entirely new genres, sub-genres and entire industries that challenge, grow and sometimes even replace existing industries.

As software developers, we often confine ourselves to just that; writing code. The reasons for this vary widely. Whatever the reason, the need to investigate new creative means of interacting with computers has never been greater and the only way we can do that is by borrowing from other fields. This is evident with the advent of The Internet of Things.

Enterprise software is never built in silos; it's built with the collaboration of people from different backgrounds with different skillsets. It makes me happy that we're now realizing the value of expanding this collaboration beyond the confines of software development and that we're collaborating with professionals and hobbyists from all sorts of knowledge backgrounds.

The technology industry has matured beyond just being about getting things working. It's transcended to being about delivering value to the lives of ordinary people in the world. This has required us to look at the problematic areas of our field, from our exclusionary designs - which lacked consideration of people's different abilities to interact with the systems we create to the toxic and often masculine culture we've allowed to develop and fester in the social fabric of our industry.

Touch screens, VR, AR, and IoT have started to make us think outside the box with regards to what's possible. My plea is that we don't stop there; that we don't solely rely on ready-made products from big corporations but also think of what we'd like to see exist ourselves and develop it. Our means of interacting with systems can have large effects on what we end up designing and building. When building systems, developers should consider human-computer interaction and how they can break boundaries with revolutionary means of interaction. It is the constant tempering with ideas around computer interaction that will give birth to groundbreaking experiences because play and experimentation are the parents of innovation.

A key area of focus when researching new ways of human-computer interaction must be finding ways of making said technologies affordable and accessible. We need to be able to teach enthusiasts, hobbyists and professionals alike the skills they need to use the interaction means expediently and with ease. This is because the success of any system built is reliant on its use and the more developers use it, the more experiences it creates and the more we grow the field and its reach into solving societal issues.

I'm writing a bit about my experience with building my own means of interacting with computer systems. You can see my work on my personal site

From me, Lucky: Sharp👍 Sharp👍

Banana Controller: Building an affordable Custom Controller with the Arduino Uno

Nhlanhla Lucky Nkosi — Thu, 19 Dec 2019 13:13:29 +0000

Let’s build a cheap custom controller using bananas and an Arduino Uno.

Image source: John Baichtal on Make: Community

Aim

In this article, I’ll show you how to build your own custom controller using one of the cheapest, beginner-friendly, and versatile micro-controller boards on the market: the Arduino Uno.

Background & Context

I am fascinated by how we, as humans, interact with computers. I believe that by experimenting with different ways of doing this, we can build very interesting things. The common problem with “new” technologies is that they are often expensive to play around with. We have to find means of making the technology easily and affordably accessible.

I learn best through practical examples. Since this is supposed to be a serious article - with no banana business, we’ll be building something very useful: a banana controller. Yes, we’ll build a custom controller using bananas.

I first came across the idea while attending the A Maze festival in Johannesburg a few years ago. I walked up to a stand and I was told that I could play Space Invaders with bananas. The experience blew my mind. They had used the Makey Makey to achieve this with ease. The Makey Makey classic board retails for around US$50 which is just over R800 (ZAR). The board is incredible and relatively well priced (i.m.o) for its capabilities. However, the price-tag limits access.

The Arduino Uno, on the other hand, can be bought for as little as R99 which is less than $10. At a fraction of the price, we can achieve (almost) the same goal: building a custom controller to play a game with bananas.

Tools

We’ll need a couple of tools to get this job done.

Here’s what you’ll need

An Arduino Uno Board
Arduino IDE
Unity 3D
Bananas

Solution Overview

The user/player will touch the banana. Using the Arduino, we’ll detect this touch and then notify Unity that the player has touched the banana. Unity will then use this information to make the game react.

Electronics — How it works

The Arduino Uno comes with 6 Analog pins. Each pin has a 10-bit Analog to Digital Converter (ADC). With 10 bits, we can represent 1024 distinct values. The Arduino is powered with 5 Volts. Therefore, using the ADC, we can represent the 5V in 10 bits. With this understanding, we can use digital values in our software to represent voltage reading on the input pins. Consider the following:

This means that each digit difference picked up by our software represents a 4.9mV difference.

Arduino Software

We need software that will detect and interpret the touching of the banana. The following is all the code we need to run on our Arduino.

    const int threshold = 875;
    void setup()
    {
        Serial.begin(9600);
        Keyboard.begin();
    }
    void loop()
    {
        if (analogRead(A0) < threshold)
        {
            Serial.write(1);
            Serial.flush();
            delay(80);
        }

        if (analogRead(A5) < threshold)
        {
            Serial.write(2);
            Serial.flush();
            delay(80);
        }
    }

Use one of the Arduino IDEs to program your Uno. This code makes use of the analogRead() function to get the reading from the Arduino Analogue pins. When the reading drops below our threshold — determined through logging out the behavior during testing, we can assume that the fruit connected to the analog input has been touched. We then have to send a message to Unity.
The Uno is not the best board for activating keyboard events. Therefore, we use the serial port to communicate with the Unity program. Using Serial.write(), we pass on a simple message to be understood by whichever application will read the serial port. In this instance, we send the integer 1 when the first fruit is touched and integer 2 when the second one is touched.

Unity3D Software

With the Arduino sending either a 1 or a 2 when one of the fruits is touched, we now need to write some code to read the serial port and make use of the information being sent. Reading the serial in unity is not much of a hassle. First, you need access to ports and related functionality. Using System.IO.Ports gives us this functionality.

Next, you need to declare your stream. This configuration must match the serial port configuration used in your Arduino IDE. Set the port (COM6) and the baud rate (9600, is standard on most devices) on the variable declaration section of our like this:

    SerialPort stream = new SerialPort(“COM6”, 9600);`

On Start(), open the stream to start receiving data as soon as your program starts and set the reading timeout to 1 second.

    void Start () {
        stream.Open();
        stream.ReadTimeout = 1;
    }

On Update(), read the information being streamed.

    void Update(){
        int readValue = (int)stream.ReadByte();
    }

The line above will throw an exception when it does not receive data. I’d recommend wrapping it in a try-catch block and interrogating the exceptions it throws. We put this line in the Update function to ensure that we check it every frame — this ensures that we can detect the banana touch as soon as possible.
The stream has to be flushed to ensure that we read the latest and most up-to-date data possible. Adding stream.BaseStream.Flush(); after checking for data can achieve this.

I’d recommend setting the stream’s timeout to 1 second in the start function. The full Unity C# script called SerialPortComs will look like this:

    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using System.IO.Ports;

    public class SerialPortComs : MonoBehaviour
    {
        SerialPort stream = new SerialPort("COM6", 9600);
        // Start is called before the first frame update
        void Start()
        {
            stream.Open();
            stream.ReadTimeout = 1;
        }
        // Update is called once per frame
        void Update()
        {
            if (stream.IsOpen)
            {
                try
                {
                    int readValue = (int)stream.ReadByte();
                    UseBananaInput(readValue);
                }
                catch (System.Exception)
                {
                    //handle errors
                }
                stream.BaseStream.Flush(); //Ensure data refresh
            }
        }
        void UseBananaInput(int value_sent_by_arduino)
        {
            //this is where you put code that makes use of the input
        }
    }

In the UserBananaInput function, you can now move an object or perform any other game action that relies on user interactions.

Resources

I gave a talk on this topic at BBD Software Development’s Es@cape conference in 2018. The talk touches on my motivation for this type of work and includes a live demo in which I do all of the above steps. You can work through both this article and the video. The talk is titled “Play with your food… and everything else.” You can watch it here.

You can find all the code used in this project on my GitHub page.

Conclusion

I hope you enjoyed reading this and learned something interesting. Let me know if you have any questions and I will gladly answer them. Please feel free to also show me what you build with custom controllers; I’d love to see what everyone else is working on. Check out my other projects which include educational games and teaching conversational IsiZulu on my site.

From me, Lucky: Sharp👍 Sharp👍

DEV Community: Nhlanhla Lucky Nkosi

The Modern Web Is a Superpower: Why Browser APIs Matter in 2026

Talk video: https://youtu.be/FAFNXf5UyhU

Why all of this matters

Why now? What changed?

What’s coming next in this series?

Final thoughts

Creating a QR Code with custom icon and text using HTML & JavaScript

Background & Context

The solution to problem

Solution - Part 1: Generate QR Code

Solution - Part 2: Decorate the space

Solution - Part 3: Downloading the token.

The final step: How to package a Node.JS application as an exe

PKG

Getting started

Complete Guide: How to use Grafana with a custom Node API.

Grafana basics

Data

The dependency (JSON)

Adding the data source

The Restful API

Data response.

To Kill a Working Drone: Flying drones with Twitter, Bananas and WebAPIs with Lucky Nkosi

Flying a drone with Web Bluetooth

LuckyNkosi / MamboMiniControllers

Demos and example code showing different control schemes for flying the MamboParrorMini

To kill a working drone with Web Bluetooth

BLE and GATT and other TLAs

Gergana Young ・ Dec 17 '19 ・ 6 min read

'Moving' a drone:

Using the code

All done

Connect to the drone

Discovering the drone

Connect GATT

connect in a nutshell

Conclusion

To Kill a working drone - Intro

Context

Gergana YoungFollow

Social Intelligence is among the most critical of skills.

The future beyond writing software

Banana Controller: Building an affordable Custom Controller with the Arduino Uno

Aim

Background & Context

Tools

Here’s what you’ll need

Solution Overview

Electronics — How it works

Arduino Software

Unity3D Software

Resources

Conclusion