Tag: #javascript
How to escape JavaScript for a script tag
2024-04-24
How to run a pre-trained model in TensorFlow.js
Load the model, convert the input to a tensor, preprocess the tensor to match the model’s expected format, run inference with
.predict()
, and decode the prediction tensor. 2021-02-15Measuring audio volume in JavaScript
A demo of real-time microphone volume measurement using the Web Audio API’s
AnalyserNode
. 2021-01-18NPM addon package hello world
How to create an NPM addon package from C++ code using the
node-gyp
tool and a binding.gyp
file, with a JavaScript wrapper module for a more idiomatic API. 2020-12-07How do classes work in JavaScript?
JavaScript
class
syntax is just syntactic sugar over the traditional prototype-based inheritance. Deconstructing a simple class
reveals the underlying constructor functions, prototype assignment, and use of super
to call the superclass’s constructor. 2020-11-03How do JavaScript prototypes work?
JavaScript has two different “prototype” concepts: an own property with the string key “prototype”, and a parent slot. Don’t confuse the two! 2020-11-02
What does the dot do in JavaScript?
foo.bar
, foo.bar()
, or foo.bar = baz
- what do they mean? A deep dive into prototypical inheritance and getters/setters. 2020-11-01How do JavaScript async iterators work?
Async iterators use the
Symbol.asyncIterator
method to define the iteration protocol. 2020-10-19Babel JS from the ground up
Babel is a JavaScript compiler that transforms JavaScript code. Here I use its API programmatically. 2020-10-16
How does
require
work in Electron? require
in Electron works like Node.js, allowing you to load modules, but each Renderer process has its own isolated module state. Relative module resolution depends on whether you use loadFile
or loadURL
. 2020-10-15The Electron process architecture is the Chromium process architecture
An Electron instance is basically a Chromium instance. It just has some Node.js integration. 2020-10-14
How does the Node.js REPL display previews?
Node.js REPL uses the
inspector
module to safely evaluate expressions as you type, using V8’s evaluation with throwOnSideEffect: true
to avoid executing harmful code. 2020-10-05What are UMD modules? One final module system to rule them all (except ES modules which are a different thing)
UMD modules are a way to write JavaScript code that can be used in any module system (e.g. CommonJS, AMD, or as a global variable). 2020-10-04
What are AMD modules? Fetch your sick bag
“Simplified CommonJS wrapping” feature is a hacky attempt to support synchronous
require
calls by using regexes. It’s gross. 2020-10-03How to publish an npm package
Publishing an npm package
@jameshfisher/numsyslib
with a stringifyRoman
function that converts a number to a Roman numeral. 2020-10-01What is npm?
NPM is Node.js’s package system, allowing installation of arbitrary stuff, not just Node.js modules. Packages are folders, tarballs, URLs, or version identifiers published to the NPM registry. 2020-09-30
How do ECMAScript modules work in Node.js?
ECMAScript modules and CommonJS modules in Node.js are interoperable. Node.js looks at file extensions and
package.json
fields to determine the module type. ECMAScript modules can only use import
, while CommonJS modules can only use require
. 2020-09-29JavaScript live bindings are just concatenation
ES modules are just concatenated source files, with some error checking and variable renaming. Live bindings are an illusion - they’re just ordinary variables at the top-level scope. 2020-09-28
What does the
require
function do in Node.js? The
require
function in Node.js loads modules, either local files or external packages. I show the algorithm that searches node_modules
directories and package.json files. 2020-09-27JavaScript modules for grumpy developers from 2005
JavaScript modules enable better dependency management and scoping. A guide for developers like me who still use
<script>
tags everywhere. 2020-09-25How to implement green screen in the browser
A green screen implementation in the browser using WebGL and chroma key. Includes a live demo. 2020-08-09
How to record a canvas to video
Using the
MediaRecorder
API to record a canvas element as a WebM video file, allowing the user to download the recorded video. 2020-03-13How to write an ArrayBuffer to a canvas
I write an ArrayBuffer to a canvas by interpreting the buffer as pixel data and using ImageData to provide the dimensions. 2020-03-01
JavaScript generators are also consumers!
Generators in JavaScript can act as both producers and consumers of data. An example
Metric
generator batches and sends data using the yield
keyword. 2019-05-18What is
function*
in JavaScript? JavaScript’s
function*
defines a generator function, which can be used to generate and consume data. 2019-05-17What are symbols in JavaScript?
Symbols are a new fundamental data type in JavaScript, introduced in 2015. They are used to create unique object property keys that won’t clash with other properties. 2019-05-16
How do JavaScript iterators work?
JavaScript iterators are objects that implement a specific protocol, providing a way to iterate over a sequence of values. The
for...of
loop is syntactic sugar for manually creating and using an iterator. 2019-05-10A JavaScript Promises implementation
Implementing a Promise API in JavaScript, including handling asynchronous callbacks, promise chaining, and automatically wrapping non-promise values. 2017-11-07
What are promises in JavaScript?
Promises in JavaScript represent future values. They provide a way to handle asynchronous operations, allowing chaining of callbacks. Promises can be fulfilled or rejected, with callbacks handling each case. 2017-11-05
Asymmetric encryption with the Web Cryptography API
Generating ECDH keys and deriving a shared AES key. 2017-11-03
Symmetric encryption with the Web Cryptography API
Generating a key, encrypting and decrypting text, and explaining the implementation. 2017-11-02
Signing a string with HMAC using the Web Crypto API
A web page that allows you to sign a string using the HMAC algorithm with SHA-256, implemented using the Web Crypto API. 2017-10-31
Hashing a string with the Web Cryptography API
The Web Cryptography API provides low-level crypto primitives in JavaScript, including hashing strings using SHA-256. 2017-10-30
Web Push API in Firefox
Differences between the Web Push API in Google Chrome and Firefox. Firefox uses the Mozilla Push Service, enabling push notifications without Google’s GCM/FCM. 2017-10-24
Drawing a clock face with WebGL
A WebGL clock face with moving hands that updates every second, using a vertex shader to convert polar coordinates to 3D positions. 2017-10-07
What is the web Notification API?
The web Notification API allows web apps to display system-level notifications, requiring user permission. It has two key parts: requesting permission and creating notifications. 2017-09-07
Cloning Spaceteam
A multiplayer web-based version of the cooperative game Spaceteam, using Pusher for real-time communication between players. 2017-01-30
How to write a ‘hello world’ serverless WebRTC app
Including setting up the
RTCPeerConnection
, creating a data channel, handling ICE candidates, and generating an offer to be shared with the remote peer. The signaling channel is copy-paste! 2017-01-16Forging web security by escaping the browser viewport
2016-08-10
A proof that the Halting problem is undecidable, using JavaScript and examples
A JS function to decide the Halting Problem will always have a logical contradiction. 2013-12-24
All content copyright James Fisher.