
In a recent basement renovation I added two heated floor zones: one for the laundry room, and another for a basement bathroom.

Most thermostats for heated floors are aesthetically foul, and that's a no for me.

[bad looking thermostats]

### Past approach

I've run into this same problem before, and solved it using a transformer relay and a Nest. The transformer relay supplies the Nest with 24V operating voltage, and closes the relay to activate the 240V floor loop when the thermostat calls for heat. This setup has been in use daily for nearly 5 years without issue, but it has a few major drawbacks:

1. It's hacky
2. It's expensive
3. Nest does not support external wired temperature sensors (such as the ones embedded in the actual floor), so temperature readings are ambient-only1.

In order to reliably activate the heated floors using ambient-only measurements, I schedule the floor Nest to 4° _above_ ambient level. So e.g. if the Nest controlling the main floor is set to 20° C, the Nest controlling the floors in the kitchen is set to 24° C. The concrete floors are unable to raise the ambient temperature more than a degree or two over several hours, so setting the thermostat to 24° C acts as a bonafide "on" switch. In my case the floors never get uncomfortably hot, but this may not be true in floors with a lower thermal mass (e.g. porcelain or ceramic tile). If used in a small enclosed space wherein the floors have a greater impact on ambient level, a greater temperature offset may be needed.

So yeah — hacky and expensive. We can do better.

### New approach

I've dabbled in home automation for more than a decade, and in that time I've come to value simplicity and reliability above all else. At first I thought I wanted as many sensors and data points as possible, but what I actually want is the highest possible signal/noise ratio.

With this in mind, I could establish some requirements for a new _minimally_ connected thermostat:

###### Want

1. To turn the floors on or off with presence- or schedule-based2 automations via Homekit

###### Don't want

1. To manage the temperature setpoint remotely
2. To know the temperature of the floors remotely
3. Anything on the wall

I find it useful to think about systems design in terms of inputs and outputs. When considering a thermostat in a standard heat-only sytem, the I/O might be:

###### Inputs

- 24V (Rh wire)
- Common (C wire)
- Temperature sensor (10-12k thermistor common for in-floor heat)
- Setpoint (user-configured; e.g. 30° C)

###### Outputs

- Turn on heat (24V on W wire or close relay)

So a thermostat monitors the temperature sensor,

- progressive enhancement

---

1. Most dedicated floor thermostats can be configured to use surface _or_ ambient temp.
2. e.g. Washing laundry, watching a movie, basement occupancy, etc.


Minimum viable HomeKit-enabled temperature control for less than $10 in parts

$10 HomeKit thermostat*

I've driven a Model 3 for two winters now, and generally speaking it's a good cold weather car. I live in the coldest major city in Canada, and I do _not_ miss pumping gas in -40°. The ability to preheat the car in a closed garage without worrying about fumes is also really nice.

Tesla has received criticism for frozen door handles and other hardware features that don't perform optimally in winter, but in my experience, the area with the most room for improvement is software.

## Inaccuracy of range estimates

Batteries don't perform well in the cold. This is not unique to EVs; most owners of internal combustion engine (ICE) cars that live in cold climates are no stranger to jumper cables, booster packs, and trickle chargers for dealing with frozen batteries. Many cars here have block heaters to keep the engine oil warm during bouts of extreme weather—so even ICE cars are plugged in.

A Tesla's reduced range in winter is very real, but not as much of an issue as one might expect. The average drive for most people only uses a fraction of a vehicle's total fuel capacity. Tesla recommends keeping its cars plugged in whenever they aren't being driven—especially in low temperatures—which usually means they're topped up after every drive. Extended road trips that might challenge a Tesla's range aren't common here in winter, because road conditions and inclement weather make it less safe to travel long distances by car in general. Winter road trips are still possible in an EV—they just require longer and more frequent stops.

What _is_ a problem driving a Tesla in cold weather is that the battery range indicator is not adjusted for temperature, so drivers have to guess how much range they have remaining.

I collected data from all of my drives in temperatures below 0°C (32°F) over the course of two winters, and filtered trips that were less than 5 km. With a sample size of 181 drives, the average accuracy of my Tesla's range indicator in these conditions was 44.2%[^1]. This means on average, for every 5 km driven, the range remaining went down by more than 11 km. The accuracy varied considerably as well, from 71% to as low as 21% in extreme cold.

> This means on average, for every 5 km driven, the range remaining went down by more than 11 km.

With a few taps it is possible to view a graph of the car's efficiency over the last 50, 25, or 10 kilometres driven, and a weighted prediction of remaining range based on these values and current charge level. While this prediction is generally more accurate than the primary range indicator, the assumption that efficiency of the previous `n` kilometres driven is indicative of the next `m` kilometres driven is still often wrong, and exposes an interesting bias in its design.

<PostVideo
 $size="large"
 src="/video/writing/tesla-software-problems-in-winter/energy-contrast-compressed.mp4"
 caption="The energy graph can show a very different range projection than the primary indicator, and neither are consistently accurate"
/>

In much of the world—especially cold climates—weather conditions can change considerably overnight, and low temperatures have a greater impact on range than even the most extreme driving patterns. **In Winnipeg, we can see more temperature fluctuation in a single day than the Bay Area experiences in an entire year.** Even Tesla's concealed range prediction appears to be modeled after a use case wherein the driver has a regular ~50km commute in an area with limited temperature variation—which in all likelihood, it was.

At any given time, a Tesla knows the current weather, the weather forecast, how many passengers it's carrying, historical driving patterns, climate control settings, tire pressure, and hundreds of other indicators it could use to make an accurate prediction of range. Tesla could aggregate this data from thousands of vehicles over millions of drives in similar conditions and further improve their prediction accuracy... but they don't. The primary indicator displays an idealized range estimate based on what the current charge level would achieve in perfect conditions, while ignoring the environmental factors that actually influence it. Ironically this is from the automaker that positions itself at the forefront of technology-driven situational awareness—i.e. autonomous driving.

The battery indicator's remaining range estimate is arguably the most important gauge in any EV, and to have it regularly off by a factor of two or more is dangerous. It's unlikely anyone buying a Tesla in a cold climate is expecting optimal range in winter[^2], but an accurate, contextually-aware range estimate is a safety feature, and should be the default[^3].

## Regenerative braking and traction loss

Regenerative braking (regen) uses an electric vehicle's kinetic energy to charge its battery. I find this to be the most striking difference in driver experience between an ICE car and an electric car; in an EV, as soon as you're off the accelerator, regen kicks in and you're slowing down immediately. Once you get used to this it's great, and most driving can be done by feathering a single pedal instead of alternating between gas and brake. Tesla has said the brakes on its cars are used so infrequently they may never need to be replaced.

In cold weather, a Tesla's ability to regeneratively brake is lessened due to a cold battery's reduced ability to accept charge. This makes it drive more like a regular car until the battery heats up and regen improves. When the battery _is_ sufficiently warm and regen is working, driving it sometimes reminds me of being a teenager again—riding in my friend's Honda Civic as he'd e-brake drift every snowy corner on our way home from school.

With regen working, coming off the accelerator too quickly can cause more regen-induced resistance in the car's drivetrain than there is between the tires and winter roads, so the car slides. Because the amount of regen applied is relative to battery temperature and changes over the course of a drive, the driving experience changes too, and can catch you by surprise.

Unlike Anti-lock Braking Systems (ABS), there does not appear to be any stutter or cadence in a Tesla's application of regen. To regain control and unlock the wheels from a regen-induced slide, one must counterintuitively resume pressure on the accelerator. A Tesla does not seem to recognize when it's experiencing regen-induced traction loss, or presumably it would stutter or reduce the amount of regen applied and compensate with the brakes.

In some Teslas there is an option in the UI to globally reduce the amount of regen the car applies, but I suspect most in cold climates are hesitant to enable this setting since it further reduces range. Improving the consistency of regen and adding measures to recognize and correct regen-induced traction loss would make for a safer driver experience.

## Climate control, humidity, and windshield defrost

In cold climates, snow or ice on boots and jackets melts in the warmth of a car's interior and increases humidity, which then accumulates on cold glass in the form of fog or ice. This is especially common when breathing heavily after a workout, or carpooling with friends after a team sport.

In auto mode of the Model 3's climate control, it is not possible to enable the windshield vents. Enabling them while in auto mode switches climate control to manual mode, but returning to auto mode disables them again. Auto mode may turn the windshield vents on periodically, but in my experience it is often not enough to maintain clear visibility.

<PostVideo
 $size="large"
 src="/video/writing/tesla-software-problems-in-winter/climate-control-compressed.mp4"
 caption="In a Model 3's climate control, the windshield vents turn themselves off when in auto mode"
/>

The windshield defrost mode works well and is extremely powerful, but it requires the driver to turn it on and off manually. Using it for light fog is like a farmer addressing a mouse problem by adopting a lion.

Further, when windshield defrost _is_ actually needed, the first tap of the control always blows cold air—even when ambient temperatures are -40°. A second tap is required for hot air. It would be nice if Tesla acknowledged that when temperatures are below a certain threshold, blowing more cold air into the cabin is probably not the best default.

## Night mode at sunset

Tesla screens automatically switch to night (dark) mode at sunset, which is essential for keeping one's eyes adjusted to driving in the dark. However, the duration of twilight—i.e. the time between sunset and actual darkness or astronomical dusk—varies considerably based on time of year and distance from the equator. During winter in northern climates, the sky is still light far after sunset. **Within a certain proximity to either pole, twilight can last for hours**[^4].

Switching to night mode before it is dark out can introduce glare that makes the screen difficult to see. The screen's ambient light sensor still works but it only adjusts backlight brightness, and no amount of backlight behind a dark UI will come close to legibility of a light UI when it's still light out.

Using astronomical dusk or an AI-centric approach to make a better determination of when or when not to enable night mode would improve driver experience.

<PostImage
 src="/writing/tesla-software-problems-in-winter/IMG_0425.jpg"
 $size="large"
 caption="Night mode is automatically enabled at sunset, but at some latitudes sunset is a poor indicator of ambient light level"
/>

## Snowflake icon drop shadow

Lastly... and I recognize this is especially pedantic... the Tesla UI displays a snowflake icon when the battery is cold, indicating a reduction in available capacity. In cold climates this icon is a fixture for months—except perhaps for a short period after supercharging or hours of consecutive driving.

Presence of the indicator is fine, but the snowflake icon itself has an inexplicable drop shadow that exists nowhere else in the UI.

<PostImage
 src="/writing/tesla-software-problems-in-winter/0S7A3613.jpg"
 $size="large"
 caption="Snowflake icon with inexplicable drop shadow"
/>

The characteristics of the shadow are unlike any other in the UI; it's short, harsh, and opaque, rather than large, soft, and diffused. The shadow isn't used to visually separate the snowflake from background elements, because nothing is ever rendered behind it. The negative vertical positioning of the shadow doesn't make sense in our reality because it implies being lit from below, rather than above. I can't make sense of the shadow from an accessibility standpoint either because in context, the snowflake's blue colour alone has better contrast than other elements of the UI that are objectively more important.

<PostImage
 src="/writing/tesla-software-problems-in-winter/0S7A3592.jpg"
 $size="large"
 caption="Snowflake icon in broader context"
/>

Because of this, I can only assume the snowflake's drop shadow is a bug, and, since it only appears in cold weather, it's plausible that few designers at Tesla have ever seen it.

## Wrap up

Despite its current shortcomings in winter, I don't hesitate to recommend a Tesla to people in cold climates—as long as they usually park somewhere with power. While I can go days without charging my car in summer, in winter it really should be plugged in more often than not.

The one area I have noticed better winter performance year-over-year is Autopilot. In my first winter with the car, Autopilot was seldom available unless road markings were clearly visible. This past winter it was available much more frequently and seemed to work well.

2020 was the first full year Tesla had Supercharger infrastructure coast-to-coast in Canada, and their cars are becoming much more popular here. Hopefully they'll prioritize more cold weather improvements soon, and make for a better driver experience next winter.

---

Questions, comments, or corrections? Let me know on [Twitter](https://twitter.com/bradcerasani).

[^1]: I also queried drives greater than 5 km in temperatures resembling that of San Francisco (8°C to 21°C), and found the accuracy of range estimation to be 90%.
[^2]: Again, reduced range in cold weather is usually not an issue, however failing to provide an accurate range estimate is.
[^3]: In time, I suspect the accuracy of range estimates in EVs to be regulated within a reasonable margin of error the same way speedometers are.
[^4]: See [Wikipedia](https://en.wikipedia.org/wiki/Twilight) for more on civil, nautical, and astronomical twilight.

When Designed in California™ meets -40°.

Tesla software problems in winter

<PostImage src="/projects/garage/hero.jpg" $size="large" />



Write-up in progress...

A DIY garage design/build with non-trivial scope creep.

Garage design/build

From 2017-2018, my wife and I had our home renovated. I designed the space, and we had a design-minded builder execute the work.

A friend had introduced me to SketchUp, and helped with some initial models of the space. Using these files as a starting point, I spent several months iterating on the design with increasing fidelity, revisiting the process as constraints emerged through demolition. Our house is close to 100 years old, and any renovation—especially in an old house⁠—is bound for surprises.

<Figure $size="large">
 <Grid $gutter="calc(var(--spaceDefault) / 2)">
 <GridItem $width={{ base: '50%' }}>
 <Img src="/projects/designing-a-home/IMG_0148.jpg" sizes="500px" />
 </GridItem>
 <GridItem $width={{ base: '50%' }}>
 <Img src="/projects/designing-a-home/IMG_0343.jpg" sizes="500px" />
 </GridItem>
 </Grid>
 <Caption>Surprise concrete under the kitchen floor</Caption>
</Figure>

Working in 3D allowed me to more carefully consider the spaces and sightlines than a typical plan or one-off render. Using a friend’s VR rig, I walked through the models to better understand flow and utility. Many of the fixtures and appliances considered had 3D models available, so I was able to audition them in the space before making a commitment. When options were presented during the construction, I was able to model each permutation to better understand it in context, rather than rush a decision or leave it solely to the builder. It also helped immensely that the builder was comfortable with SketchUp, so I could send ideas over for them to assess feasibility. In the end, the build came remarkably close to the model.

<ImageCompare
 $size="large"
 image1="/projects/designing-a-home/0S7A7533-sketchup.jpg"
 image2="/projects/designing-a-home/0S7A7533.jpg"
 caption="Comparison of SketchUp model and kitchen after"
 position="33"
/>

The final design attempts to blend old with new, and mixes modern lines with natural materials. This was the first space I've designed, but I found the principles familiar to what I knew in other disciplines, and learned a lot about the process along the way. I go into more detail about a few of my favourite features below.

<ImageCompare
 $size="large"
 image1="/projects/designing-a-home/0S7A7604-before.jpg"
 image2="/projects/designing-a-home/0S7A7604.jpg"
 caption="Comparison of mid-demoliton and final"
/>

<PostImage $size="full" src="/projects/designing-a-home/0S7A7712.jpg" />

<PostImage $size="full" src="/projects/designing-a-home/0S7A7686.jpg" />

<PostImage $size="full" src="/projects/designing-a-home/0S7A7658.jpg" />

 

## Lighting

In continuing the mix of old and new, I integrated Danish lighting from the 1950s in the dining room, and custom-made modern linear lighting in the kitchen.

<PostImage
 $size="large"
 src="/projects/designing-a-home/0S7A7555.jpg"
 caption="One of three custom-made linear lights in the kitchen"
/>

The linear lights consist of flush-mount aluminum channels with diffusers, five-channel LED strips[^1] colour-matched to Philips Hue, dual PWM[^2] amplifiers (RGB and tunable white), Philips Hue LS+ controllers, and commercial power supplies.

In order to eliminate hotspots, I ran two light strips along the side walls of the aluminium channels, and created an offset for consistent spacing between CW•RGB•WW[^3] diode clusters. In testing several methods of mounting and diffusion, I found this approach to be the best balance of heat dissipation and output.

<Figure $size="large">
 <Grid $gutter="calc(var(--spaceDefault) / 2)">
 <GridItem $width={{ sm: '1/3 * 100%' }}>
 <Video src="/video/projects/designing-a-home/light-assembly.mp4" />
 </GridItem>
 <GridItem $width={{ sm: '1/3 * 100%' }}>
 <Img src="/projects/designing-a-home/IMG_0164x.jpg" sizes="400px" />
 </GridItem>
 <GridItem $width={{ sm: '1/3 * 100%' }}>
 <Img src="/projects/designing-a-home/IMG_0140.jpg" sizes="400px" />
 </GridItem>
 </Grid>
</Figure>

For each fixture, I had an electrician run a standard line-voltage light switch to a junction box near the electrical panel in the basement, and low voltage wire from there back up to its respective installation location. Downstairs, I connected each switched line to a 24V power supply that feeds a Philips Hue LS+ controller and two PWM amplifiers that power the fixture.

<Figure $size="large">
 <Grid $gutter="calc(var(--spaceDefault) / 2)">
 <GridItem $width={{ sm: '1/3 * 100%' }}>
 <Img src="/projects/designing-a-home/IMG_0039.jpg" sizes="400px" />
 </GridItem>
 <GridItem $width={{ sm: '1/3 * 100%' }}>
 <Img src="/projects/designing-a-home/IMG_0164.jpg" sizes="400px" />
 </GridItem>
 <GridItem $width={{ sm: '1/3 * 100%' }}>
 <Img src="/projects/designing-a-home/IMG_0591.jpg" sizes="400px" />
 </GridItem>
 </Grid>
</Figure>

In total I built five discrete lights; each addressable individually or by group from the Philips Hue app or any voice assistant. All of them work seamlessly with standard in-wall switches to match the rest of the house.

In terms of brightness, at peak output the three fixtures in the kitchen are capable of roughly 23,400 lm at 4200k, with a CRI of 95+. This equates to approximately 29 standard 60W light bulbs or 78(!) Philips Hue GU10s. A (desired) side effect of having this much available light is that in practice, the fixtures are rarely over 50% power, which should extend the lifespan of the LEDs considerably.

<Figure $size="large">
 <Grid $gutter="calc(var(--spaceDefault) / 2)">
 <GridItem $width={{ sm: '1/3 * 100%' }}>
 <Img src="/projects/designing-a-home/corner.jpg" sizes="400px" />
 </GridItem>
 <GridItem $width={{ sm: '1/3 * 100%' }}>
 <Img src="/projects/designing-a-home/IMG_9681.jpg" sizes="400px" />
 </GridItem>
 <GridItem $width={{ sm: '1/3 * 100%' }}>
 <Video src="/video/projects/designing-a-home/controller-2.mp4" />
 </GridItem>
 </Grid>
</Figure>

## Hide and seek

Towards the back of the house, there is a bank of three full-height cabinets on the north wall. Behind the first door is a pantry, framed in baltic birch with adjustable shelves. The third door is more storage, mostly for cleaning and dog supplies. The centre door opens to a T-shaped powder room hidden behind the other cabinets.

<PostImage
 $size="large"
 src="/projects/designing-a-home/0S7A7645.jpg"
 caption="The second handle on the left is a powder room. This lower level was previously an attached garage"
/>

I painted the powder room a deep navy, in contrast to the otherwise bright house. A feature wall has floor-to-ceiling period appropriate wallpaper by William Morris, in a pattern called Golden Lily[^4].

I had a friend sandblast chrome bathroom fixtures to reveal the raw brass underneath, and treated them with an acid mixture to accelerate patina into cohesion with other original fixtures in the house.

<PostImage
 $size="full"
 src="/projects/designing-a-home/0S7A8615.jpg"
 caption="Main floor powder room"
/>

When the powder room door opens, a ZigBee-enabled reed switch communicates with Home Assistant running on a Raspberry Pi to turn the lights on. If we're entertaining, the linear fixture outside the door can turn into an airplane-style occupancy indicator, turning red when occupied and green when available.

<PostVideo
 $size="large"
 src="/video/projects/designing-a-home/occupancy-demo-color-corrected.mp4"
 caption="Door to main floor powder room with occupancy automation enabled"
/>

[^1]: The lightstrips are called [Bifröst](https://sowilodesign.com/collections/bifrost/products/bifrost-147-pro-led-strip) and made by a company called [Sowilo DS](https://sowilodesign.com/). I was one of their first customers, and Mike from Sowilo was immensely helpful throughout this process.
[^2]: PWM stands for [Pulse Width Modulation](https://en.wikipedia.org/wiki/Pulse-width_modulation).
[^3]: CW•RGB•WW stands for Cool White, Red, Green, Blue, and Warm White. With the strips I used, the cool white diode is 6500k, and the warm white is 2200k.
[^4]: If you've seen [Sex Education](https://www.netflix.com/title/80197526) on Netflix, Dr. Jean Milburn (Otis' mum) has this same wallpaper along with other [William Morris](https://en.wikipedia.org/wiki/William_Morris) patterns throughout her house. William Morris was a pioneer of the [Arts and Crafts movement](https://en.wikipedia.org/wiki/Arts_and_Crafts_movement).

Blending the old with the new in the renovation of our 1920s home, adventures in custom lighting fabrication, and learning how to model in 3D.

Designing a home

<Note>

This article was originally published in the December 2016 issue of [net magazine](https://www.creativebloq.com/net-magazine). Philips released [Hue Sync](https://www.theverge.com/2018/5/31/17412314/philips-hue-sync-windows-mac-review) a few years later, which is a better, official way of achieving a similar effect to that described below.

</Note>

<Vimeo
 vimeoId="392018140"
 $size="large"
 caption="Finished result: Hue Gallery in action"
 commentary={[
 {
 time: 0.01,
 value: '🎹',
 },
 {
 time: 3.2,
 value: null,
 },
 {
 time: 4.5,
 value: 'peak Casey Neistat influence...',
 },
 {
 time: 8.5,
 value: null,
 },
 {
 time: 9.9,
 value: 'custom controller for Ikea sit-stand desk',
 },
 {
 time: 13.5,
 value: null,
 },
 {
 time: 14,
 value: 'it allows for programmatic control and realtime height feedback',
 },
 {
 time: 18.7,
 value: null,
 },
 {
 time: 23,
 value: `should've straightened this shot`,
 },
 {
 time: 29.2,
 value: null,
 },
 {
 time: 42.1,
 value: '🌳',
 },
 {
 time: 47.7,
 value: null,
 },
 {
 time: 50.7,
 value: '🪁',
 },
 {
 time: 53,
 value: null,
 },
 {
 time: 54,
 value: '🌠 this clip is reversed',
 },
 {
 time: 57.3,
 value: null,
 },
 {
 time: 64.3,
 value: `☀️ should've used a larger aperture to prevent that starburst`,
 },
 {
 time: 67.2,
 value: null,
 },
 {
 time: 67.7,
 value: 'sitting in a different spot here',
 },
 {
 time: '70.6',
 value: null,
 },
 {
 time: 75.8,
 value: '☠️ RIP this plant',
 },
 {
 time: 78.3,
 value: null,
 },
 {
 time: '79',
 value: `haven't killed that snake plant yet though`,
 },
 {
 time: 83,
 value: null,
 },
 {
 time: 83.8,
 value: '🎹',
 },
 {
 time: 88.8,
 value: null,
 },
 {
 time: 95.2,
 value: '&ldquo;Your Eyes&rdquo; and &ldquo;Warm&rdquo;',
 },
 {
 time: 97.4,
 value: null,
 },
 {
 time: 97.9,
 value: `<a href="https://github.com/bpxl-labs/hue-gallery" target="_blank" rel="noopener noreferrer">github.com/bpxl-labs/hue-gallery</a>`,
 },
 ]}
/>

In 2008, the number of internet-connected things exceeded Earth’s human population. By 2020, that number is expected to eclipse 50 billion. As processors, sensors, and wireless radios become smaller and more accessible, use cases for these devices are flourishing.

At home, the Internet of Things (IoT) is finding its place in the lives of everyday people. Good IoT devices for the home share many similarities with good websites: they’re built for a purpose, progressively enhance with better connectivity, and bring delight to the user.

One such example is the Philips Hue wireless lighting system. On the surface, Hue light bulbs look and function like any other bulb, but they can also be controlled wirelessly with the Philips Hue app or API. Each bulb contains three different types of LED for a variety of white and colour combinations as well as a ZigBee[^1] module for wireless communication. A Hue Bridge connects to a home’s internet router and provides a RESTful API for apps to interface with the lights.

As a developer, having an API for your lights creates some interesting opportunities. I’ve written apps to make my lights flash green when the latest iPhone was in stock at the local Apple store, and flash red when my favourite hockey team scored in the NHL playoffs. These apps were utilitarian and disposable in nature, but at Black Pixel I worked with my team[^2] to come up with a more captivating experience for Hue.

For immersive photo browsing, we built a client-side web app that extracts an image’s colour palette and sends it to the Philips Hue API. As an image scrolls into view in the app, the user’s environment responds to that image, enhancing the overall viewing experience.

In this tutorial, we’ll show you how to create the client-side app, work with
the Philips Hue API, and build a web-based IoT experience.

## Getting started

1. Let’s start by kicking off a new project. At Black Pixel, we have an open-source [web starter kit](https://github.com/bpxl-labs/hue-gallery) that provides a solid foundation for building modern websites. That’s what we’ll use here.

Once the starter kit’s dependencies are installed with `npm install`, start the local development server with `npm start`.

2. Next we’ll build a basic scrolling image gallery. Select a handful of colourful images from [Unsplash](https://unsplash.com/) and add them to `src/views/index.html`. If you’re feeling adventurous, you could hook into the [Unsplash API](https://unsplash.com/documentation) and programatically fetch images. For now, we’ll assume you’re doing this manually.

We only want one image showing in the viewport at a time, so let’s wrap our images in container elements and give each container a height of `100vh`. While we’re at it, let’s use flexbox to vertically and horizontally center the images within their containers.

```html

<div class="ImageContainer">
 <img src="https://images.unsplash.com/photo-1234…" />
</div>
```

```css
/* index.css */
.ImageContainer {
 align-items: center;
 display: flex;
 height: 100vh;
 justify-content: center;
}
```

3. To extract the colour palette from our images, we’ll use a JavaScript library called [Color Thief](https://github.com/lokesh/color-thief). Color Thief works by copying an image to a `<canvas>` element, so its raw pixel data can be accessed by JavaScript. The library then extracts the image’s RGB pixel values, quantizes them based on an algorithm from the [Leptonica Library](http://www.leptonica.org/), and returns an array of RGB arrays.

Basic Color Thief usage looks something like this:

```js
const colorThief = new ColorThief();
const sourceImage = document.getElementById(‘myImage’);
colorThief.getPalette(sourceImage, 3);
// returns [[135, 206, 235], [0, 206, 209], [238, 59, 26]]
```

To run Color Thief on each image in our page, we’ll first build an array of image elements with `document.getElementsByTagName(‘img’)`. Now we can iterate over this array, calling `colorThief.getPalette()` on each item and writing the resulting RGB data to a `colorCache` object that’s keyed by a hash of the image`src`. We should also add an event listener to our `forEach` loop to make sure each image is loaded before we send it to Color Thief.

```js
const images = document.getElementsByTagName('img');

function getSwatches(key, img) {
 const colors = thief.getPalette(img, 3);
 colorCache[key] = colors;

 return colorCache[key];
}

function getPalette() {
 forEach(allImages, (img) => {
 const key = md5(img.getAttribute('src'));

 img.addEventListener(
 'load',
 (e) => {
 getSwatches(key, e.target);
 },
 false
 );
 });
}
```

4. Before we look at scroll events and the Philips Hue integration, let’s write some code to visualize each photo’s dominant palette in the browser. We’ll create a `printSwatches()` function that appends a div with class `.SwatchContainer` to our image container, and call this function from `getSwatches()`. We pass `printSwatches()` the colors array and the current image element so it knows where to append the swatch container. Next, we’ll iterate over the colors array and append `.Swatch` elements within the swatch container, setting the background colour of each element as we go. We’ll also add a few lines of CSS to style the swatches, and add `flex-direction: column;` to our image container so they appear below each image.

```js
function printSwatches(colors, img) {
 const elSwatchBox = document.createElement('div');
 elSwatchBox.classList.add('SwatchBox');
 img.parentNode.appendChild(elSwatchBox);

 forEach(colors, (color) => {
 const elSwatch = document.createElement('div');
 elSwatch.classList.add('Swatch');
 elSwatch.style.backgroundColor = `rgb(${color[0]}, ${color[1]}, ${color[2]}`;
 elSwatchBox.appendChild(elSwatch);
 });
}
```

<PostImage src="/projects/hue-gallery/limes.jpg" $size="large" />

<Swatches
 colors={['#334c15', '#bdbb56', '#87ad46']}
 caption="Dominant colour extraction"
/>

## Improving colour quality

While Color Thief’s modified median cut algorithm does an accurate job extracting colours from image data, the resulting palette isn't always the most interesting. For instance, if a source image is primarily neutral with just a few accent colours, Color Thief will display the neutral tones before any accents. While this is technically accurate in terms of raw pixel quantity, for our use case we’re more interested in brighter colours.

To improve the extracted palette, we’ll first have Color Thief to return more colours than we need for our calls to the Hue API. In the `colorThief.getPalette()` method, the second parameter controls the number of colours returned. We’ll ask for ten, and work on culling the final count down to three.

<PostImage src="/projects/hue-gallery/buildings.jpg" $size="large" />

<Swatches
 colors={[
 '#e7dbd6',
 '#d5752f',
 '#392b27',
 '#a59fa2',
 '#857c7d',
 '#fbc04b',
 '#873f28',
 '#6b6365',
 '#5e514f',
 '#50474a',
 ]}
 caption="Palette before – darker and less saturated colours aren't particularly interesting"
/>

The colour properties we’re most interested in weighing here are lightness and saturation, so we’ll run the RGB values through a `rgbToHsl()` function so they’re easier to work with. With the resulting hue, saturation, and lightness values, we can get to work refining our palette.

The first step in refining our colour palette is the elimination of dark tones, as we’re not looking for a roundabout way of turning our lights off. We’ll reduce the dark tones by way of lodash’s `filter()` method, removing any colour with a lightness value less than twenty percent from our array.

```js
filter(colors, (color) => color[2] * 100 > 20);
```

Next, we’ll sort the remaining colours in descending order of saturation. This will reduce the chances of any bright neutrals making their way into the top three colours we send to Hue. This too is trivial with help from lodash.

```js
sortBy(colors, (color) => -color[1]);
```

Lastly, we’ll convert the colour values back to RGB and return the top 3 items for our new and improved palette.

<PostImage src="/projects/hue-gallery/buildings.jpg" $size="large" />

<Swatches colors={['#fbc04b', '#d5752f', '#873f28']} caption="Palette after" />

5. We’ve already enlisted CSS’ `vh` units to ensure only one image is fully in the viewport at a time, but which image is it? To determine if an image is visible, let’s write an `isVisible()` function that tests an element’s location in the viewport against the window’s `innerHeight`. We’ll use the native `getBoundingClientRect()` method to return a DOMRect object for each element and a [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to pull `bottom` and `top` values out of that object.

```js
function isVisible(element) {
 const { bottom, top } = element.getBoundingClientRect();

 return bottom > 0 && top < window.innerHeight;
}
```

6. Now that we have a visibility checker, we’ll call it on each item in our `images` array as the user scrolls. We’ll use lodash’s `filter()` method to return the element that passes the `isVisible()` check.

Calling functions on the window’s raw scroll event is computationally expensive because of how frequently the scroll event is emitted. To combat this, we’ll pull in another lodash method: `throttle()`. Throttling a function call does exactly as you’d expect; it restricts the number of times `func` can be called to once per every `N` milliseconds. For our purposes, let’s make `N` 150ms.

```js
function getVisibleImage() {
 return filter(images, isVisible);
}

window.addEventListener('scroll', throttle(getVisibleImage, 150), false);
```

7. Now that the stage is set, let’s work on the Philips Hue integration. Philips doesn’t have an officially supported JavaScript SDK, so we’ll interface with the API directly using a promise-based HTTP client called [axios](https://github.com/axios/axios).

The first request we’ll make is a `get` to `meethue.com/api/nupnp` to retrieve our bridge’s IP address. If there isn’t a bridge connected to your local network, this request will return an empty array. If there is a bridge, this request will return its `id` and `internalipaddress`. Let’s store the value of `internalipaddress` in `localStorage` as `hue_ip`.

Next, we need to create a user account on our bridge so we can actually use the API. To do this, we’ll make a `post` request to `http://${ip}/api`, with a payload of `{ "devicetype": "hue-gallery#my-device" }`. This request requires the link button on the bridge to be pressed in the last 30 seconds to authorize the user creation. On success, it’ll return a random username string that we’ll store in `localStorage` as `hue_username`.

8. Once we’ve registered a user on our bridge, we can start reading and writing data. Make another `get` request to the Hue API, this time to the `/api/{username}/groups` endpoint. In the response, we’ll receive a list of groups currently registered with our bridge. From these groups, we’ll cache each `lights` array in `localStorage`, so we know which light IDs belong to which group. Next, we’ll iterate over the list of groups to construct a dropdown menu in the DOM with the same techniques we used earlier to show colour swatches.

```js
function buildRoomsDropdown(rooms) {
 const roomsList = document.createDocumentFragment();
 const container = document.getElementById('rooms-container');
 const roomsDropdown = document.createElement('select');
 roomsDropdown.setAttribute('id', 'rooms-dropdown');

 // By default we want to set first value as current room
 localStorage.setItem('hue_room', rooms[0].id);

 forEach(rooms, (room) => {
 const option = document.createElement('option');
 option.textContent = room.name;
 option.setAttribute('value', room.id);
 roomsList.appendChild(option);
 });

 roomsDropdown.appendChild(roomsList);
 container.appendChild(roomsDropdown);

 roomsDropdown.addEventListener(
 'change',
 (e) => {
 localStorage.setItem('hue_room', e.target.value);
 },
 false
 );
}
```

9. Now it’s time to put the pieces together. Start by updating the `getVisibleImage()` function we wrote earlier to lookup an image’s palette from our `colorCache`. We’ll pass the resulting array of RGB arrays to a new function called `setRoomColor()`.

`setRoomColor()` takes the array of RGB values and converts it to [CIE xy coordinates](https://en.wikipedia.org/wiki/CIE_1931_color_space), in order to communicate with the Hue API. This function also reaches into `localStorage` to determine which group is selected, and the light IDs that are associated with that group. From there, `setRoomColor()` counts the number of lights in the group and distributes the colour palette accordingly. If the group contains three lights or less, each light receives one colour in the palette. If there are more than three lights in a group, half of the lights will receive the most dominant colour in the palette, and the other half will split the remaining colours.

10. As `setRoomColor()` determines the best distribution of colours and lights, it pushes `setLightColor()` function calls into an `apiCalls` array. The Hue API doesn’t currently support changing the colour of multiple lights at once, unless you’re changing all the lights in a group the same value. We’re looking to apply a palette of colours to a group of lights, so this bit of extra work is necessary.

At the end of the `setRoomColor()` function, we batch our Hue API requests by passing the `apiCalls` array to `axios.all()`.

Each `setLightColor()` call accepts a light ID and CIE xy colour coordinates from `setRoomColor()`. The function then pulls our `hue_ip` and `hue_username` from `localStorage`, constructs a request URL, and `put`s `{on: true, xy}`. With that, like magic, the room becomes alive.

```js
function setLightColor(id, xy) {
 const ip = localStorage.getItem('hue_ip');
 const username = localStorage.getItem('hue_username');

 return axios.put(`http://${ip}/api/${username}/lights/${id}/state`, {
 on: true,
 xy,
 });
}
```

<PostImage src="/projects/hue-gallery/hero.jpg" $size="large" />

[^1]: [ZigBee](https://en.wikipedia.org/wiki/Zigbee) is a wireless protocol commonly used for mesh networks with simple data requirements. In a mesh network, nodes are interconnected and each acts as a wireless transceiver and repeater. ZigBee supports tens of thousands of nodes per network and consumes very little power, but it can only transfer simple packets of data.
[^2]: Thank you [Brandon Pierce](https://twitter.com/BrandonJPierce), [Rebekah Wolf](https://twitter.com/rebekahwolf), and Tim Hetland for their help.

Originally authored for net magazine, this article details how to create an immersive media experience with the Philips Hue API.

Hue gallery

<Note>

This article was originally published on [BPXL Craft](https://medium.com/bpxl-craft).

</Note>

Every day there’s a shiny new framework or library that seemingly everyone is talking about. While it can be tempting to adopt the flavour of the month, being too liberal with technology choices often leads to churn and frustration, the opposite of productivity. As developers, we’re constantly learning, so avoiding new technology is not the answer. But we need to approach these decisions with pragmatism.

Here are some of the tried, tested, and true language choices and frameworks that we at Black Pixel keep coming back to to get work done.

#### JavaScript

As the programming language of the web browser, JavaScript has always been popular, but it’s evolved to become really powerful too.

In 2009, Ryan Dahl coerced Chrome’s V8 JavaScript engine to run on Linux with an event loop and low-level I/O, calling it [Node.js](https://nodejs.org/). In 2010, Backbone.js and Angular.js were introduced. These two client-side MV\* frameworks pushed the limits of what was possible in JavaScript applications. In 2013, Facebook released [React.js](https://facebook.github.io/react/), a lightweight and super performant view library that powers user interfaces used by billions of people all over the world. [ES2015](http://www.ecma-international.org/ecma-262/6.0/) arrived last year as the next generation of JavaScript, which added a slew of new features in development since its last major release in 2009.

<PostVideo src="/video/writing/the-black-pixel-web-stack/dam-break.mp4" />

Suddenly the programming language once treated as a toy had proper module support, destructuring, template strings, a spread operator, arrow functions, and even classes ([but don’t use those](https://github.com/joshburgess/not-awesome-es6-classes)).

Today, modern browsers and the latest version of Node are [nearing 100-percent compatibility](http://kangax.github.io/compat-table/es6/) with this latest version of JavaScript. The language is more ubiquitous than ever before, and new use cases for it emerge every day.



<blockquote>
 
 <a href="https://twitter.com/CollinEstes">@CollinEstes</a> I heard a rumor
 that NASA uses Node.js for space-suits. I&#39;m curious, do you use the npm
 ecosystem to develop these apps?
 {' '}
 &mdash; Benjamin Coe (
 <a href="https://twitter.com/BenjaminCoe/status/738764829746286592">
 @BenjaminCoe
 </a>
 ){' '}
</blockquote>



<blockquote>
 
 <a href="https://twitter.com/BenjaminCoe">@BenjaminCoe</a> You heard
 correctly, and yes we do.
 {' '}
 &mdash; Collin Estes (
 <a href="https://twitter.com/collinestes/status/738765249407504384">
 @CollinEstes
 </a>
 )
</blockquote>

However, the rising popularity of JavaScript also brings a certain amount of “[JavaScript fatigue](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4),” especially when six years of language development land in a single release as happened with ES2015 last year. Fortunately steps are being taken to ensure [future releases of ECMAScript/JS](http://www.2ality.com/2015/11/tc39-process.html) are smaller and more frequent, and there are many [roundup-style newsletters](http://javascriptweekly.com/) and [websites](http://www.echojs.com/) that help filter signal through the noise of the bustling ecosystem that is modern-day JS development.

## Frameworks and libraries

#### React

[React](https://facebook.github.io/react/) is “a JavaScript library for building user interfaces.” Where Angular tried to solve the Model, View, and Controller components of traditional MVC application architecture, React focuses solely on the view layer. React introduced us to the virtual DOM, a tree of JavaScript objects that mimics the browser’s DOM. When state changes in a React application, it updates the virtual DOM first, then diffs the result with the browser’s DOM, and propagates these changes only to the elements that have changed instead of the entire view. This makes React super performant. And, since it only focuses on view logic, it’s easy to drop into existing applications without a complete rewrite.

#### Redux

[Redux](http://redux.js.org/) is “a predictable state container for JavaScript applications.” When React was first announced, Facebook’s engineers also announced something called Flux. Flux described a unidirectional application architecture well-suited for React apps but was more conceptual than tangible code or API. As such, many developers began working on their own Flux implementations for use with React. In June of 2015, developer Dan Abramov released Redux, a simple Flux-inspired state manager that borrows some patterns of immutability from [Elm](https://github.com/evancz/elm-architecture-tutorial). The simple API and excellent developer tooling of Redux helped it quickly become the de facto Flux implementation. While basic React applications can get by using its built-in state methods, passing state through component props gets unruly fast. That’s where a global state container like Redux saves the day.

#### Node

As mentioned above, Node marries an event-based, asynchronous API with Chrome’s super fast V8 engine, and runs on the server. Using JavaScript for server-side development with Node allows developers to tap into the largest open-source module ecosystem in the world with npm. It also reduces the amount of context switching that’s necessary when bouncing between different parts of the application stack. With the modern-day proliferation of JavaScript, many companies employ Node middleware that sits between older, monolithic application code and newer, interactive client-side experiences. Node and pure JavaScript applications are also being used in greenfield projects where few technical constraints exist. When this is the case, our team leans on application frameworks like the Sinatra-inspired [Express](http://expressjs.com/) or batteries-included [Hapi](http://hapijs.com/) to be productive right away.

#### PostCSS

[PostCSS](http://postcss.org/) takes CSS source files and creates an abstract syntax tree (AST) of the contents it exposes via API. The rich plugin ecosystem of PostCSS allows developers to do almost anything imaginable to a CSS file’s contents. One of the most common uses for PostCSS is transpiling future CSS syntax to current-day syntax, so browsers can reliably interpret features like custom properties and the `var()` function for variable support. PostCSS is often referred to as some lofty technology that is _more_ proprietary than popular preprocessors like Sass, but this is far from the truth. PostCSS allows developers to write _less_ proprietary syntax. Bypassing Sass removes an enormous amount of abstraction between style input and output, resulting in better code. PostCSS forces you to think about what plugins you’d like to use to manipulate your code, instead of giving you more than you need.

## Linting and best practices

<PostVideo src="/video/writing/the-black-pixel-web-stack/6ix-lint.mp4" />

#### JavaScript

When writing JavaScript, we follow the paradigms of [functional programming](https://drboolean.gitbooks.io/mostly-adequate-guide/content/). Functional programming is programming without [side effects](<https://en.wikipedia.org/wiki/Side_effect_(computer_science)>). It focuses on small, composable functions rather than object-oriented programming that relies heavily on classes and mutation.

To lint our JavaScript, we use [ESlint](http://eslint.org/) with an adapted version of [Airbnb’s style guide](https://github.com/airbnb/javascript). This ensures consistent formatting and code style between developers and helps check code for unused variables, typos, and mutations.

#### CSS

When writing CSS we use [atomic, immutable classes](http://csswizardry.com/2015/03/immutable-css/) and [ITCSS](https://www.youtube.com/watch?v=1OKZOV-iLj4) architecture, with [SUITCSS](https://suitcss.github.io/)-inspired naming convention and [object/utility namespaces](http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/). [UsonianCSS](https://github.com/bradcerasani/usoniancss) is a cumulation of these ideas and serves as our baseline CSS boilerplate on greenfield projects.

To lint our CSS, we use [Stylelint](http://stylelint.io/) and [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) with a [custom config for UsonianCSS](https://github.com/bradcerasani/stylelint-config-usoniancss). Stylelint is ESlint for CSS. It helps us maintain an alphabetical order of CSS properties, consistent block formatting, and naming conventions.

## Future tech

<PostVideo src="/video/writing/the-black-pixel-web-stack/future-tech.mp4" />

Facebook’s [GraphQL](http://graphql.org/docs/getting-started/) is a new way to facilitate client-server communication. It could be really interesting to use on a project where we’re building server-side support for a mobile client. Instead of having individual RESTful API endpoints, GraphQL gives you a single endpoint for specifying what data you’d like in a [syntax that resembles JSON but without property values](https://facebook.github.io/react/blog/2015/05/01/graphql-introduction.html#what-is-graphql). You request the keys you’d like, and GraphQL returns the key-value pairs.

Netflix’s [Falcor](https://netflix.github.io/falcor/) attempts to solve the same problem with a slightly different approach that could also have drastic impact on client-server data transfers.

The [upcoming Koa 2 release](https://github.com/koajs/koa/issues/533) has some really smart people working on it and makes use of newer JavaScript features like [async and await](https://zeit.co/blog/async-and-await).

We’ve also been checking out [RethinkDB](https://www.rethinkdb.com/) and [Horizon](https://horizon.io/), which show a lot of promise for building real-time web applications.

At [Black Pixel](https://blackpixel.com/), we are privileged to work with some of the best technology companies in the world. Because of this, we’re exposed to a myriad of different approaches that help us become better developers. Whether we’re prototyping internal projects for our clients or working on scalable web services that need to support millions of users, there’s no shortage of tooling and techniques to explore.

Written shortly after the formalization of Black Pixel's Web Services team, this post features our go-to tools and technologies for developing great experiences.

The Black Pixel web stack

In 2015 Ikea’s Bekant series sit/stand desk came to Canada.

I wrote a scraper that polled Ikea’s website for stock at my local store, and picked one up as soon as they were available. The desk worked fine, but the controller was very basic and didn’t have height presets, so I decided to make my own.

I assumed the Ikea legs had some sort of sync unit and limit switches within them, and that I could just either side of the three-conductor controller wire in order to make the desk go up or down. This did not end up being the case, so I opened up the Ikea controller module and found a small PCB within it.

<PostImage src="/projects/pi-desk/IMG_0809.jpg" caption="Surprise PCB" />

To interface with this PCB as non-destructively as possible, I made a replacement for the original button’s ribbon wire out of plastic, flexible adhesive, and wires that I attached to a screw terminal. The screw terminal is connected to a bank of two relays for software control, and a 3.5mm headphone jack for pluggable hardware control in the event that the software isn’t working.

<Figure $size="large">
 <Grid $gutter="calc(var(--spaceDefault) / 2)">
 <GridItem $width={{ sm: '1/3 * 100%' }}>
 <Img src="/projects/pi-desk/IMG_0814.jpg" sizes="400px" />
 </GridItem>
 <GridItem $width={{ sm: '1/3 * 100%' }}>
 <Img src="/projects/pi-desk/IMG_0824.jpg" sizes="400px" />
 </GridItem>
 <GridItem $width={{ sm: '1/3 * 100%' }}>
 <Img src="/projects/pi-desk/IMG_0877.jpg" sizes="400px" />
 </GridItem>
 </Grid>
 <Caption>Making a hacky ribbon cable replacement</Caption>
</Figure>

The relays are connected to a Raspberry Pi running basic controller software I wrote in Python and Node.js. Feedback from an ultrasonic sensor reports the desk's height, and the relays make it go up or down. Both the Pi and controller assembly are attached to the desk with neodymium magnets[^1] so they're easy to remove and debug whenever the need arises.

For software control, I made a series of Alfred[^2] shortcuts on my Mac that send requests to the desk’s API. For hardware control, I wired up a SPDT[^3] on-off-on toggle switch. The first relay is wired so that the NC side closes the common wire of the toggle switch, meaning when the relay is off, the hardware control is enabled. When the first relay is on, the hardware control is disabled, and power is passed to the second relay, where the NC[^4] state makes the desk go up, and closing NO[^5] makes it go down. This configuration ensures that no combination of simulatneous hardware and software input will result in both up and down commands being sent to the motor controller at the same time, which could cause a short.

<PostVideo
 $size="large"
 src="/video/projects/pi-desk/pi-desk-cooler.mp4"
 caption="Raising the desk with the hardware override"
/>

At one point I wrote a wrapper for the desk’s API and opened it up to the internet during a meeting with my team at Black Pixel. This allowed my coworkers to control the desk’s height using slash commands in Slack. This was not one of my better ideas, but made for a memorable meeting (for me anyway).

<PostImage $size="large" src="/projects/pi-desk/IMG_0900.jpg" />

[^1]: Ironically one of the first magnets I attached was interfering the relays (which are electromagnetic). Using smaller magnets and more careful positioning remedied this but it took some debugging to figure out why it was happening.
[^2]: [Alfred](https://www.alfredapp.com/) is a supercharged replacement for Spotlight on MacOS.
[^3]: SPDT stands for Single Pole Double Throw.
[^4]: NC stands for Normally Closed (circuit).
[^5]: NO stands Normally Open (i.e. the opposite of NC).

Hacking Ikea's sit-stand desk with a Raspberry Pi to support realtime height feedback and programatic control.

PiDesk

I worked with actor, writer, and director Anna Akana to build a new online home for a series of short films she released in 2014. The site holds details about the films, their cast and crew, and behind-the-scenes content.

The site is managed with a PHP-based CMS and Node.js service I wrote that interacts with social APIs. When a new short film is added to the CMS, the Node process fetches metadata about the film from YouTube, caches it in Redis, and transports it to the front-end via WebSocket. A cron job polls the view and like counts for each short film, and the socket connection allows these changes to be reflected in the UI in real-time.

Each short film added to the CMS has an accompanying hashtag on Instagram for behind-the-scenes content that the Node process also queries and caches for display. The same flow is utilized to surface real-time subscriber/follower counts from YouTube, Facebook, Instagram, and Twitter.

<PostImage src="/projects/anna-akana/social-stats.png" $size="large" />

The design of the short-film list utilizes cinematic 2.4:1 video previews that loop a 10-15 second clips when hovered over. The short film detail pages are themeable from the CMS, and both header and detail sections fade to 10% opacity while the film is playing to help minimize distraction.

<PostVideo
 src="/video/projects/anna-akana/anna-akana-website.mp4"
 $size="large"
/>

Anna has appeared in TV and film for Marvel/Disney, Netflix, Lionsgate, ABC, Comedy Central, YouTube Red, and others. Check out the site here: [annaakana.com](https://annaakana.com/).

Designing and building a new website for multihyphenate Anna Akana, including a custom Node.js service that pipes realtime social statistics to the UI over WebSocket.

AnnaAkana.com


In 1984 a 20 year-old philosophy student named [Rick Rubin](https://en.wikipedia.org/wiki/Rick_Rubin) and a 26 year-old hip-hop promoter named [Russell Simmons](https://en.wikipedia.org/wiki/Russell_Simmons) founded a record label called Def Jam Recordings[^1].

One of my favourite quotes comes from Simmons, whose mentality helped Def Jam become the most ubiquitous label in hip-hop history.

> Surround yourself with people who are smarter than you.

I recently came across [a post](http://blog.verneho.com/post/35460914051/invest-in-people-based-on-my-original-post) by [Verne Ho](https://twitter.com/verneho) about the importance of surrounding yourself with good people, and it reminded me of the Russell Simmons quote I’ve held closely for years. I loved Verne’s sketch notes on the subject, and they inspired my attempt to recreate them as on the web.

Check out what I came up with [here](http://bradcerasani.github.io/Invest-in-People/).

[^1]: Def Jam went on to pioneer the hip-hop revolution of the late 80’s, and today is home to artists like Frank Ocean, Kanye West, Rick Ross, and Rihanna.


Thoughts on inspiring people and recreating sketch notes on the web.

Invest in people

<Note>

This post outlines a method to 'hide' a glyph on an anchor tag using a pseudo-element in order to expand the boundaries of what :visited styles typically allow.

</Note>

In HTML, `<a>` tags have 4 CSS pseudo classes that are used to style hyperlinks in different states: `:link` `:visited` `:hover` and `:active`.

We used to be able to style these states with whatever CSS we wanted, but in early 2010 a [privacy vulnerability](http://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/) forced browsers to restrict what properties were allowed to be used with the `:visited` selector.

Here's what we're left with:

```css
a:visited {
 outline-color: ;
 border-color: ;
 background-color: ;
 color: ;
}
```

Boring, eh? Not to worry, we can work with this.

## Basic link styling

First, we'll create a link and give it some styling. Note: I'm using Sass here instead of vanilla CSS[^1].

```html

<a href="#!" class="demo">Link</a>
```

```scss
// Sass
$buttonColor: #3ba7bb;

a.demo {
 background: $buttonColor;
 border-radius: 4px;
 border: 2px solid $buttonColor;
 color: white;
 display: inline-block;
 font-weight: 500;
 line-height: 1;
 padding: 0.75rem 3rem;
 position: relative;
 text-decoration: none;
}
```

Result:

<DemoButton>Link</DemoButton>

Cool! Let's design a `:visited` style.

## CSS pseudo elements

Pseudo elements in CSS are great. [Chris Coyier](http://css-tricks.com/pseudo-element-roundup/) describes them well:

> For every element on the page, you get two more free ones that you can do just about anything another HTML element could do.

We'll use a CSS pseudo element to help style the `:visited` state of our link. While pseudo elements have the same CSS property restrictions as the `<a>` tag, with absolute positioning and some basic colour tricks we can essentially hide a `:visited` style in our link right from the start.

Let's add a check mark using the pseudo element `::after`.

```scss
$buttonColor: #3ba7bb;
$textColor: white;

a.demo {
 background-color: $buttonColor;
 border-radius: 4px;
 border: 2px solid $buttonColor;
 color: $textColor;
 display: inline-block;
 font-weight: 500;
 line-height: 1;
 padding: 0.75rem 3rem;
 position: relative;
 text-decoration: none;

 &::after {
 content: '✓';
 height: 1rem;
 position: absolute;
 right: 1.5rem;
 width: 1rem;
 }
}
```

Result:

<DemoButton $step="2">Link</DemoButton>

## Completing functionality

While we can't technically 'add' the check mark strictly to `:visited` links, we can hide it in the link's default state by changing it to the same colour as the background.

Now we can style the `:visited` state to provide some visual contrast and show off the check mark and border, both of which were disguised originally.

```scss
$buttonColor: #3ba7bb;
$textColor: white;

a.demo {
 background-color: $buttonColor;
 border-radius: 4px;
 border: 2px solid $buttonColor;
 color: $textColor;
 display: inline-block;
 font-weight: 500;
 line-height: 1;
 padding: 0.75rem 3rem;
 position: relative;
 text-decoration: none;

 &::after {
 color: $buttonColor;
 content: '✓';
 height: 1rem;
 position: absolute;
 right: 1.5rem;
 width: 1rem;
 }

 &:visited {
 background-color: #fff;
 border-color: currentColor;
 color: #333;

 &::after {
 color: #49b749;
 }
 }
}
```

Give it a try:

<DemoButton
 href="http://bit.ly/16m376q"
 target="\_blank"
 rel="noopener noreferrer"
 $step="3"
>
 Click Me
</DemoButton>

## Wrap-up

With pure CSS we've created an interesting visual style for visited links without sacrificing user privacy.

[^1]: 2020 – Sass is not required, and this could be done with [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) or some other means that wasn't available or practical in 2013. The demo link that appears inline in this article uses the same technique described but is implemented in React with [styled-components](https://styled-components.com/) and integrated into the post using [MDX](https://github.com/mdx-js/mdx).

Using CSS pseudo elements to expand on what's possible when styling visited links.

Hacky styling of :visited links

<Note>

This post describes building a lightweight Markdown-powered blog engine in Ruby. Check out this (2013) iteration of my site in the archives [here](https://2013.bradcerasani.me).

</Note>

I've never been great at keeping a blog[^1]. Any space I've made for writing in the past has been as Shedbot, the moniker I've used for my photo/design work the past few years. I would always tread lightly posting on behalf a business, even my own. When speaking on behalf of a business you're always conscious of offending that exec who perhaps would've given you that big contract if he didn't see you talking about [ManBearPig](http://www.youtube.com/watch?v=xf69EEL3WBk) that one time.

I've been wanting to write my own blogging app since seeing [this post](http://sam.roon.io/new-blog) by [Sam Soffes'](http://twitter.com/soffes) about one of his many blog iterations earlier this year. He wrote a Sinatra app that uses a GitHub repo of markdown files as posts and caches them in Redis. I really liked the idea of using static markdown files as a post archive; no messy databases or clunky web interface to get in the way of actually writing. I built something similar.

## The build

This was my first trial in server-side programming, so the build took a while. Though I had studied some Ruby previously, there's no substitute for diving in and getting your hands dirty. I found a handful of repos on Github that performed similar actions, so I cloned a handful locally and referenced them throughout the build. While Sam's blog was the original inspiration, his Redis integration was an added level of complexity that I wasn't ready for. Here's a quick overview of my my app, starting with a sample markdown file:

```yaml
# A-Dance-With-Sinatra.md

title: A Dance With Sinatra
excerpt: Adventures in programming with Ruby and Sinatra.
date: 2013-09-20
tags: general
--
Lorem ipsum dolor...
```

In the Rakefile, line 5 iterates through each of the .md files in the entries directory, and 6 splits off each post's metadata above `--`. The metadata is then ordered by reverse date and written to `_directory.yaml`.

```ruby
# Rakefile
namespace :journal do
 task :reload do
 a = []
 Dir["entries/*.md"].each do |file|
 entry = File.read(file).split("--\n")
 meta = Psych.load(entry[0])
 a.push({
 title: meta['title'],
 excerpt: meta['excerpt'],
 date: meta['date'],
 tags: meta['tags'],
 slug: "/journal/" << File.basename(file, ".md"),
 })
 puts "#{a.count} posts indexed."
 end
 File.open("views/journal/_directory.yaml", 'w') {
 |file| file.write a.sort_by{|a| a[:date]}.reverse.ya2yaml
 }
 end
end
```

Now, when the user requests a URL from /journal, Sinatra checks to see if the corresponding file exists in /entries. If so, it'll load up the entry's structure according to haml template `journal/entry.haml`, and parse the actual post content along with the metadata.

```ruby
# Application.rb
get "/journal/:entry/?" do
 file = "entries/#{params[:entry]}.md"
 if File.exist?(file)
 @entries = load_directory('journal')
 parse('/journal/entry', file)
 else
 404
 end
end

helpers do
	def parse(template, file)
 	entry = File.read(file).split("---\n")
	 @meta = Psych.load(entry[0])
 	@text = entry[1]
	 haml template.to_sym
	end
	def load_directory(dir)
	 Psych.load(File.open("views/#{dir}/_directory.yaml"))
	end
end
```

The markdown rendering is handled by [Redcarpet](https://github.com/vmg/redcarpet) with [SmartyPants](http://daringfireball.net/projects/smartypants/) enabled for smart quotes and all that good stuff. [Pygments.rb](https://github.com/tmm1/pygments.rb) is used for code highlighting.

```ruby
# Application.rb
class BetterRender < Redcarpet::Render::HTML
 include Redcarpet::Render::SmartyPants
 def block_code(code, lang)
 if lang
 Pygments.highlight(code, lexer: lang.to_sym, options: {linespans: 'line'})
 else
 "<div class='highlight ki'><pre>#{code}</pre></div>"
 end
 end
end

def redcarpet(text)
	markdown = Redcarpet::Markdown.new(BetterRender, fenced_code_blocks: true)
	markdown.render(text)
end
```

## Design & typography

The sans-serif body type is [Whitney](http://www.typography.com/fonts/whitney/overview/) and the headline slab [Sentinel](http://www.typography.com/fonts/sentinel/overview). Both typefaces are designed by HF&J and served by Cloud.typography. Typesetting follows the [modular scale](http://modularscale.com/scale/?px1=20&px2=&ra1=1.333&ra2=0).

I designed a custom pygments stylesheet to ensure code highlighting in the browser would precisely mimic my local environment in Sublime Text 3. The colour scheme is based on the [Tomorrow Night](https://github.com/chriskempson/tomorrow-theme) theme by [Chris Kempson](https://twitter.com/chriskempson). The monospace font used in the code views is [Source Code Pro](http://blogs.adobe.com/typblography/2012/09/source-code-pro.html) by Adobe.

The accent colour, #3BA7BB is the colour of Cartman's hat from South Park.

## Hosting & deployment

The app is hosted on [Heroku](https://www.heroku.com/) and deployed via Git.

In order to begin a post as quickly as possible, I wrote a helper function for [fish shell](http://fishshell.com/) that creates a markdown file with proper formatting and cd's into my app directory.

```bash
#	Blog Kickstart - Fish Shell
function blog # $title $tags
 set date (date '+%Y-%m-%d')
 set filename (echo $argv[1] | tr -s ' ' | tr ' ' '-')
 set gitdir ~/documents/Journal/
 set var_count (count $argv)
 cd $gitdir
 if test $var_count = 2
 		echo title: $argv[1]\nexcerpt: \ndate: $date\ntags: $argv[2]\n---\n\n >entries/$filename.md
 else
 		echo title: $argv[1]\nexcerpt: \ndate: $date\ntags: general\n---\n\n >entries/$filename.md
 	end
 open entries/$filename.md
end
```

## Closing

This has been a lot of fun to build, and I have a lot to do on it still. It's endearing releasing something before it's polished; I feel more inspired to continue work on it instead of feeling utterly and completely sick of it.

Let me know your thoughts on [Twitter](http://twitter.com/bradcerasani).

[^1]: 2020 update: still terrible

Writing a lightweight Markdown-based blogging engine in Ruby with Sinatra.

A dance with Sinatra

<Note>

This interview was originally conducted by [Amy Feezor](https://twitter.com/amyfeezor) for [Herman Miller](https://hermanmiller.com)'s now-defunct &ldquo;Lifework&rdquo; blog. Apartment Therapy also published the piece.

</Note>

<PostImage
 src="/writing/herman-miller-lifework/lifework-wide_3.jpg"
 $size="large"
/>

##### Tell us about yourself and your work: what you’re passionate about, what inspires you, and where you’re going.

I focus on responsive, future-friendly, front-end design and development. This means I design and code websites that flex and adapt to the device the user is viewing them on. Progressive enhancement ensures that users visiting a site from their phone on a congested mobile network aren’t forced to download the same site assets they would see on their 30″ display at the office. Future-friendly development means writing flexible, modular code structure that is mindful of what’s next in tech.

I’m inspired by quality craft, regardless of medium. It is endearing to witness a maker who is good at what he or she is making. I’m also inspired by my city and the people who call it home. Winnipeg has an incredibly rich arts and cultural scene, especially for a city of relatively small size. In the past few years our downtown has seen some really cool architectural installations, like a huge steel/LED sculpture called “[Emptyful](https://www.winnipegarchitecture.ca/emptyful/)” that’s shaped like an Erlenmeyer flask, and [OMS Stage](https://architizer.com/projects/oms-stage/), an open-air performing arts venue that looks like it’s straight out of a science-fiction movie. When the rivers freeze in the winter, we clear [the longest skating trail in the world](https://www.youtube.com/watch?v=abVtRF5BdxA&feature=emb_title) and line it with [warming huts](http://www.warminghuts.com/) designed in an annual architectural competition. I think there’s something to be said for the resilience and outward thinking this city embraces.

<PostImage
 src="/writing/herman-miller-lifework/lifework-wide_1.jpg"
 $size="large"
/>

##### Tell us about your space. What’s your aesthetic? What do you like or dislike?

My space is a bit of an audio playground, with instruments and recording gear and a life-size cardboard cutout of Raj Koothrappali from the TV show ”Big Bang Theory” (he’s camera shy). I have a flawless Fender Rhodes piano that was built in March of 1972, and will forever be the coolest thing I own.

The studio monitors on my desk sit on foam/steel wedges that isolate the speaker vibrations from my work surface. These are my go-to for listening to most music, but if I’m listening to a concert recording I’ll also bring up the mono speaker stack for a different timbre. If I’m listening to something with poor quality sound, I’ll route the audio through an old GE stereo I modded a few years ago that can plug directly into my mixer. This is kind of like the aural equivalent of taking a mediocre picture of your feet with Instagram and applying a filter to make it “better.”

The big white pillow things on my walls are broadband absorbers that help eliminate sound reflections and frequency nodes. Each panel is 4″ of rigid fiberglass insulation and an open wood frame that is wrapped in fabric and hung with picture frame wire.

My window treatment (if I can even call it that) is several layers of translucent plastic tablecloth, held in place with binder clips and magnets. It turns my basement window well into a big softbox. When rabbits hop in the garden above it’s like a shadow puppet show without the puppets.

<PostImage
 src="/writing/herman-miller-lifework/lifework-support_2.jpg"
 $size="large"
/>

I’m constantly exploring ergonomics, and love finding new ways to make working better. Currently my wrists rest on a water-damaged piece of hardboard from an old drawer. This sits atop a stack of dollar-store craft foam that raises the leading edge of my keyboard and trackpad so they parallel my desk. I think most people have increased fidelity in their fingers and thumbs with their wrists either parallel to their desks or relaxed forward, instead of pulled back as most keyboard designs imply. This is in part why pianists are trained not to drop their wrists while playing.

My display sits on a 3″ roll of black duct tape, the underside of which is covered by parchment paper. Parchment paper has a low coefficient of friction, so slides around my glass desk with ease.

<PostImage
 src="/writing/herman-miller-lifework/lifework-support_3.jpg"
 $size="large"
/>

If I could change anything about my current setup, I definitely wouldn’t be working on a black glass desk. It is an incredible pain to keep clean. I’d like to try a sit-stand desk with a wood surface and motorized legs.

##### You have both an Embody and an Aeron in your space. Why did you choose them, and how do they differ for you?

I like them both, and they are very different. I typically start the work day in the Aeron because I love its forward tilt. It arches my back and keeps my body in attentive posture, which helps me kick-start productivity if I stayed up too late writing code or playing hockey. The Embody feels more relaxed to me, and I’m most comfortable in it slightly reclined. I usually tackle less intensive tasks in the Embody, like long-form reading or answering email. The Embody’s arm rests adjust closer to my body than the Aeron’s, which I find helpful in reducing shoulder strain.

It may seem excessive to have two high-end chairs in such close proximity, but an investment in design and comfort is easily justifiable to someone who spends as much time at a desk as I do.

<PostImage
 src="/writing/herman-miller-lifework/lifework-wide_2.jpg"
 $size="large"
/>

<PostImage
 src="/writing/herman-miller-lifework/lifework-support_1.jpg"
 $size="large"
/>

An interview with Herman Miller for their Lifework blog.

Herman Miller Lifework

<Note>

This post coincided with the launch of an updated portfolio site in 2012. The site is available in the archives [here](https://2012.bradcerasani.me), where you can also view this entry in its [original context](https://2012.bradcerasani.me/blog).

</Note>

Shedbot 2.0 reflects a sharper focus on building for the web. The old website has been refined into a single page responsive layout with a small, select portfolio of web projects. The new site is lightweight, and progressively enhances for high pixel density "retina" displays with resolutions up to an absurd[^1] 5120 x 2880.

<PostImage
 src="/writing/liftoff/moon.jpg"
 alt="Alt text"
 caption='Moon over Kenora, Ontario – 10" f4.7 Newtonian telescope, Canon 7D'
 $size="large"
/>

Load weight on mobile is 316K, 375K for mobile retina, 960K at largest non-retina breakpoint, and a respectable 1511K for widescreen retina.

The blog features responsive, full width images that are dynamically downloaded in 1 of 5 sizes depending on the user's screen resolution. Type is FF Tisa Web Pro and Proxima Nova, served by Typekit.

## A retina web

There's no silver bullet approach to support a retina web, but as high pixel density displays become increasingly popular their support should be prioritized. Whenever the project allows, resources are better spent enhancing the user experience for those at the cutting edge of technology over patching fixes for non-compliant legacy browsers.

I'll outline the tools and methods I used to support high pixel density displays here in a blog post next week. In the mean time, let me know what you think of the new site.

Happy Thursday.

[^1]: The [website this post describes](https://2012.bradcerasani.me) was built shortly after high pixel density displays came to laptops for the first time. The notion of a 5120 x 2880 display seemed absurd but inevitable, so I added the assets and media queries to handle it. The 5k iMac was announced around 2 years later.

Blog post accompanying a portfolio update that included future-looking support for 5k displays 2 years before they existed.

Liftoff

Towards the end of high school and in the few years that followed, I played in a rock/funk/whatever trio called Hoist.

The band served as my introduction to design; the first thing I ever made in Photoshop was artwork for our PureVolume profile in 2006.

We played dozens of shows over the years, from backyards to theatres–even one show in a planetarium under the stars. We were the first band to sell out the Park Theatre in Winnipeg, and I suspect the first band to shatter an antique crystal wall sconce at a National Historic Site of Canada while soundchecking 808 samples. Sorry about that.

<PostImage
 src="/projects/hoist/3114.jpg"
 $size="large"
 caption="Hoist live at The Park Theatre in Winnipeg c. 2006 – photo by JT Austin"
/>

<PostImage
 src="/projects/hoist/3213.jpg"
 $size="large"
 caption="I played drums and occasionally a theremin disguised as a pink plastic pig – photo by JT Austin"
/>

Throughout most of this time, I learned about recording and mixing audio by working at a music store. I sought feedback from sales reps and session musicians while building a small home studio in my parent’s basement.

<PostImage
 src="/projects/hoist/20.jpg"
 $size="large"
 caption="Basement studio c. 2010"
/>

<PostImage
 src="/projects/hoist/10.jpg"
 $size="large"
 caption="Workstation c. 2010"
/>

The three of us wrote, recorded, mixed, and designed two full-length albums in the basement, learning about the process as we went. The only thing we didn’t do ourselves was mastering – the final step of audio post-production in which flattened mixes are levelled, equalized, and prepared for distribution. For this, we entrusted Brian Lucey at Magic Garden Mastering.

While working on our last album, Brian was also working on a project for rock duo The Black Keys. Their album, Brothers, came out a few weeks after ours, and went on to be nominated for five Grammy awards, winning two. Our album, The Professional Life Characters, was only moderately less successful, selling < 500 copies and earning a (generous) 3.5/5 stars from a local newspaper.

<PostVideo
 $size="large"
 src="/video/projects/hoist/hoist-albums.mp4"
 caption="You Can Have the Window Seat (2008) and The Professional Life Characters (2010)"
/>

Both mostly mediocre albums are streaming on [Spotify](https://open.spotify.com/artist/4x66JilCisubJIuWcIMJ8t) and [ Music](https://music.apple.com/us/artist/hoist/1503569449).

Fond memories of an intro to design and creative work.

Brad CerasaniDesign & Engineering

Elsewhere

Photos

Posts & Projects