I recently discovered a strange issue where inserting colour stops in gradients with my colour picker was not inserting the correct color. It was slightly off, a bit darker than what was expected. I knew Chrome has recently released support for new colour spaces, could this be causing the problem? Turns out, yes. The same issue was not occurring in Firefox.
READ MORE
There has been a lot of chatter lately about the new React docs, and how it strongly encourages everyone to use a server rendered framework such as Next or Remix.
The longer you work in the web field the more you notice the pendulum swinging from one extreme to the other. After initially being a client rendered solution, and years of experimentation and new frameworks built on React, is this just the latest swing to the extreme ‘SSR’ end of the spectrum? I certainly believe so.
READ MORE
Today I needed to update a couple Lambda functions from the Node 8 runtime to use the Node 10.x runtime. These functions required headless Chrome because they are used to take screenshots. Unfortunately, moving from the Node 8 runtime to 10x runtime is not a simple as it sounds, because AWS have decided to change the Linux environment which now excludes some files that Chromium requires to run.
As a reminder to myself, and for anyone else who might find it useful, I thought I’d document my setup here in a blog post. This post will assume you have the Serverless CLI set up and successfully deploying to AWS.
READ MORE
Here’s a little tip to allow your users download the contents of a canvas element as an image, without the need for a server. We can do this by using an Anchor tag with a download attribute.
Start with creating <canvas> and <a> tags:
<canvas id="mycanvas"></canvas>
<a href="#" download="MyImage.png" id="downloadlink">Save canvas</a>The <a> tag’s download attribute can be set to a file name that will be used when saving the file. If no value is specified, it will just be called Download.png.
This post is a bit of an update on one of my popular posts from a few years ago – Webcam to Canvas or data URI with HTML5 and Javascript
I thought I’d do an updated post on how to get an image from webcam using current web APIs. This time we’ll be using the Media Stream API.
To start off, we need to create a couple of HTML elements – a button and an img tag:
<button id="takephoto">Take Photo</button>
<img id="img" />For the JavaScript we’ll start by getting the video devices that are available:
let mediaStream;
try {
mediaStream = await navigator.mediaDevices.getUserMedia({ video: true })
} catch (error) {
console.error('getUserMedia() error:', error)
}
Generators in JavaScript are something that looks useful on the surface but I have really never found much use for them in my work. However one such use case I came across was processing a large mount of data in an array in batches. I needed to process and push data to a DynamoDB table, but I had to batch it to avoid slamming the table with write operations.
As is turned out, using generators massively simplified the batching code. Here is a simplified example:
// define the generator function that yields
// N items at a time from the provided array
function* getBatch(records, batchsize = 5) {
while (records.length) {
yield records.splice(0, batchsize);
}
}
for (let batch of getBatch(records)) {
// do something with 5 items at a time
}
This is something that took me nearly a year to get working. Not full time obviously, but every now and then I would make another attempt at getting it working after the trauma of the previous attempt had faded. None of the examples that people had provided worked for me, and some were out dated and no longer applied. And of course the AWS documentation provided no help whatsoever.
READ MORE
It seems like such a basic task – how to sort a list of strings alphabetically.
The easiest way, and what you’d probably stumble across first, is a simple sort function:
READ MORE
The following technique is something that I found template strings in ES6 to be quite useful for. I needed to generate XML chunks (as a string) where each node had a unique ID every time the XML was generated.
Most examples of template strings I see around the web just use simple variables inside template strings. I found that you can also use functions that return a value, making the string even more dynamic.
I ended up writing a function that creates the string and inserts unique IDs in specific locations every time the function is called:
const generateID = () => {
// ... some code to generate and return an ID
}
const getUniqueString = () => {
return `id=${generateID()}`
}
getUniqueString(); // "id=dJsdnUSD"
getUniqueString(); // "id=5nd9gHfs"
getUniqueString(); // "id=vn9s8fFQ"You can place ${generateID()} any number of times in the template string and in each location a unique ID will be inserted.
Now I can call getStringTemplate() and get a unique chunk of XML every time.
I have been playing around with VR a bit lately after getting a new Android phone (Nexus 6P), and I thought I’d share a simple experiment I did using Google’s Cardboard Camera app, and the WebVR library A-Frame.
The result of this will be a simple WebVR scene that displays the photo captured from Cardboard Camera in a scene that you can look around.
READ MORE