React hooks and “setInterval”

If you've ever come across having to use setInterval within react hooks you probably hit a wall where the component just doesn't act as it should... For example, we might naively code something like this: import React, { useState } from "react"; import "./styles.css"; export default function App() { const [counter, changeCounter] = useState(0); setInterval(() … Continue reading React hooks and “setInterval”

Practical use case for Javascript Function Properties (ReactJS)

TL;DR : Function properties are useful when meta-programming, specifically avoiding minification and mangling of function names The new UI for CyberSift consists of a number of "widgets" which are interchangeable and can be moved around the screen to cater for a user's preferred layout. Heavily inspired by Elastic's Kibana, you can see the end result … Continue reading Practical use case for Javascript Function Properties (ReactJS)

Augmented Reality using AFrame: Tips & Tricks

AFrame is a very cool javascript library which allows you to create Virtual Reality environments completely within the browser. Aframe also combines with AR.js to allow you to create Augmented Reality environments through the use of "markers" or "anchors". Anchors are very similar to simple QR codes which allow AR.js to project shapes onto the … Continue reading Augmented Reality using AFrame: Tips & Tricks

A JavaScript reverse CSS selector

In plain Javascript, you can get a reference to a particular HTML element by using the querySelector method. For example: document.querySelector('div') Will give you a reference to the first "div" that's encountered in the page. Give it a try in DevTools Sample querySelector What if we want to do the reverse? That is, given an … Continue reading A JavaScript reverse CSS selector

Living without React Router

How do you handle the scenario when a user taps the "back button" in your ReactJS app? In a plain vanilla ReactJS app you'll end up with the user navigating off your app since it's a SPA. Most devs would tell you to use React-Router. What if you can't, or - how does React-Router work? … Continue reading Living without React Router

Adding tile caching to maps in React-Leaflet

While writing a toy project that heavily relies on maps, I chose Leaflet as the map rendering library. From their site: Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need. The ease of use and ability to use different tile … Continue reading Adding tile caching to maps in React-Leaflet

Exploring the WebAuthn API; a bare-bones JS app

I had no idea the WebAuthn API even existed until I came across this article by @herrjemand. In that article, the author used WebAuthn to automatically generate and save passwords in the Chrome credential manager. What more can this browser API do? How would you use it? What is WebAuthn - and why the buzz? We know passwords are a necessary evil. Credential managers are a hassle to setup and use, passwords are re-used across sites and applications - and we often choose weak or easily-guessed passwords. WebAuthn is oft touted as a "password killer". We've seen … Continue reading Exploring the WebAuthn API; a bare-bones JS app