Disable chromium autoplay policies in electron

Since Electron updated its Chromium version, it has adopted by default the policy of disabling auto-play from Chrome 66.

This includes having the user interact with the page before auto-play occurs. This isn’t ideal behaviour for say digital signage where no one interacts with it, or if you have an intro screen video for a kiosk.

To get around this, the following code works like a charm:

const app = electron.app
app.commandLine.appendSwitch('autoplay-policy', 'no-user-gesture-required');

Nintendo 3DS Hardware Review

The Nintendo 3DS was originally released on February 26, 2011, the 3DS XL came out just over a year later on July 28, 2012 with 90% bigger screens than the original 3DS. I will be reviewing the XL Australian and New Zealand version with Mario Kart 7 pre-installed.

Is this the handheld for you? Find out below.

(Note this review was originally from 2013)

Continue reading “Nintendo 3DS Hardware Review”

Using REM in Google Chrome is currently broken (in some situations)

Recently me and a few fellow web developers have come across a some strange behaviour with a few websites. The issue is that the scaling on a website is completely blown out. For example what used to be 2 pixels of margin is now 12 pixels.

Continue reading “Using REM in Google Chrome is currently broken (in some situations)”

CSS REM Scale Helper

REM CSS units have been around since Internet Explorer 9, but their real value came with the responsive design movement. The ability to scale a website’s margin, padding, font size etc based off the root HTML font size is a pretty powerful thing, unlike the em which is based off the inherited font size.

Using the CSS calc function to set the font size on the HTML element means you can scale at varying rates.

The way I usually approach it depends on the design I’m given, if I get a design that is 1680 pixels wide, then I make sure that browser’s font scale is 1:1 at that resolution. End result meaning 16 REM would calculate to 16 pixels when the browser is 1680 wide, just like the design. Then with a little bit of math, you can make a formula which sets the scale rate from minimum and maximum resolutions you want to scale from and to.

The resulting CSS formula turns out to something like this:

html
{
  font-size: calc((((100vw - {RESOLUTION_FROM}px) / {RESOLUTION_RANGE}) * {FONT_SCALE_RANGE}) + {FONT_SCALE_FROM}px);
}

This can be a bit time consuming and tedious when doing various break points and figuring out the from and to scale rates, however a CSS pre-processor does make it a little bit easier, but still not ideal.

To make life a bit easier I’ve made a little utility so you can visually see the differences and play around with different break point scales, follow the link below:

http://vdhdesign.co.nz/utils/rem-scale-helper/index.html

Playstation VR Review

The Playstation VR bundle I’m reviewing, includes the PlayStation camera, PlayStation VR Worlds, and V2 PSVR Headset

I’m just going to come right out and say it, I think the PlayStation VR (PSVR) is the best overall consumer VR headset out at the moment. In this review I’ll explain how I came to that conclusion.

Continue reading “Playstation VR Review”