Category Archives: Design - Page 2

Installing a modern railing on a closed box staircase

modern railing on closed box stairs

A year or two ago, suffering from terrible decor overload, I tore out the gaudy beige and gold twisted, scrolling picket staircase railing which adorned our main stairway. Since then I searched and searched for a modern replacement to take some focus away from some other design remnants left over from the previous owners (ehm, terrible tiles). The problem ended up being that there aren’t many railing options for closed box staircases, and fewer DIY modern indoor railing product. Like many industries the railing/stair manufactures don’t cater to the public, products are intended for contractors. With my wife newly pregnant it was time to kick this railing project into overdrive and get it done, after much searching and planning I found and installed a solution that worked out great.

For those of you wondering a box, or closed box, staircase is a staircase where the stringers (the support boards on either side of the stairway) enclose the stairs. In some cases stairways enclosed by walls are referred to by the same name, this is not the case here. If the one or both of the stringers do not enclose the stairs, but leave them open to extend past the stringer, the stairway is known as open, or partially open at least.

Railings on closed box staircases are, in most cases, mounted to the angled top edge of one or both stringers or affixed to the outside of the stringer. In the case of mounting the posts on the stringer the base of the pickets, or posts, can only be as wide as the width of the stringer, which can be quite restrictive.

In our case the stringer was under 2″ wide, not wide enough for most posts, and because of the 2nd floor landing spacing there was no room to affix posts to the outside of stringer. These issues left us very few options, even fewer modern design options. A modern-style steel railing needs something in the neighbourhood of a 3″ square base for each post, many require a flat surface as well, our stringer has neither. Mounting the posts on the stair tread, on the inside the stringer would result in a very awkward looking staircase and eliminate 3″ of stair width — so no help there.

The solution I came up with was to cut hardwood blocks to bolt to the inside of the stringer to add additional width to the stringer where support the posts was needed. It worked like a charm, painting the risers white along with the wood blocks gave the staircase a farm house look.

The railing hardware is from Inline Design, who offer some fantastic designs and will customize hardware to suit your needs at no extra cost — which you will need if any posts are mounted on either landing as well as the stringer since they will need to be difference heights to maintain the proper handrail (and potentially cable) angle. Thankfully, Inline Design has very reasonable shipping rates to Canada and the U.S., though some custom charges do apply. The hallelujah component from Inline Design is a pivoting base for their posts, this allows mounting the post to a stringer, or any angled surface as long as it has at least 3″ square available. All in all this project came in at about half the cost of having a contractor do it — and I’m not sure any local companies would have offered the blocking solution I ended up with. I’m almost certain I would’ve been told the entire staircase would have to be redone in order to install this type of railing.

The above step-by-step gallery should give a pretty clear picture as to how this all worked, feel free to ask questions in the comments.

New band lineup baby announcement

My wife Ester and I are expecting and since we’re both musicians we grabbed our guitars and did a fun photoshoot to announce our good news. Inspired by this creative announcement we came across.

Maker Wedding: Animated HTML / jQuery wedding site


One of the projects I took on for our wedding was our official wedding website, I registered two domains, esterandphil.com as well as philandester.com thus avoiding any confusion. Both site pointed to the same page, for the general public a simple splash with a dynamic forest animation accomplished with the help of jQuery.

We wanted to create a page that connected with our venue which was in a barn on a conservation area. I’ve always enjoyed sine path algorithms so I created a scene where silhouetted trees scroll slowly by in a parallax-esc fashion and fuzzy Will-o’-the-wisp dots float lazily upward on sine waves. Randomly the wisps will be replaced with rain and visiting the site during the day versus during the night will result in different colours and songs.

The trees are selected randomly from one of six or seven images which then have a random amount of transparency and speed applied so that some seem further in the distance. Once they disappear off of one side they are recycled, animating in from the starting side again. Similarly the wisps have random factors applied to their size, speed, sine curve and alpha. The wisps are also interspersed on the z-axis to move in front of some trees while behind others adding to the illusion of depth. The wisps are also recycled once they’ve floated out of view.

On the live site I adjust the parameters for some popular clients, such as iOS for which I disabled animation and reduced the number of trees and wisps.

Inaccessible to the public is a guest site which used the splash page concept as a background with only the a couple of wisps animating with static trees (still randomly generated).

While this exact example is probably not portable verbatim you may find the method libraries I used as well as the technique useful. I have outlined some of the initializer functions below and linked to the libraries, some of which I have modified. The final library, animate.js, is almost completely custom code for this site and thus would have to be altered to suit your needs.

Will-o’-the-wisp Initialize

window.numberOfDots = 50;

for(i=0;i<window.numberOfDots;i++)
  window.dots.push(new dot(i));

Forest Initialize

window.numberOfTrees = 15;

for(i=0;i<window.numberOfTrees;i++)
  window.trees.push(new tree(i,'http://philandester.com/'));

Rain Initialize

var raincolor = '#fff';

new Rain('canvas', {
    speed: 500,
    angle: 20,
    intensity: 5,
    size: 10,
    color: raincolor
  });

Main Loop Start

setInterval(function(){sine()}, 25);

Raphael 1.5.2 – JavaScript Vector Library, MIT License (http://raphaeljs.com/)
http://philandester.com/rain.js

Andrew J. Peterson, NDP Software, MIT License (http://blog.ndpsoftware.com/)
http://philandester.com/colorfactory.js

Custom JavaScript Animation Library
http://philandester.com/animate.js

DIY reclaimed lumber hanging Edison bulb chandelier

This DIY reclaimed lumber chandelier with hanging Edison bulbs is easy and quite self-explanatory, though I will explain somewhat. Here’s what you’ll need,

Parts for Fixture

  • piece of lumber
  • 2x lengths of chain
  • 4x open/close chain links, to affix the chain to the eyelets you’ll screw to the board
  • 4x screw eyelets, to secure the chain to the lumber
  • 2x screw hooks, to hook the chain to the ceiling *screwed into solid wood joists
  • one or more junction boxes depending on the size of the wood
  • one or more hanging lights, cord, socket, bulb (see below)
  • a cover for the ceiling junction box plastic or otherwise, you may have to cut a notch for the power cable

Parts for Lights

Once you’ve selected your lumber, drill a hole for each light cord. I started with a spacious zig-zag pattern but it’s whatever you like really. Affix junction boxes to the top-side of the lumber and wire the lights into them. Screw an eyelet into each corner of the top-side of the lumber, at least an inch in from any side.

If the lumber is extra heavy you could consider another length of chain and place two more eyelets to support a chain in the center. If ceiling joist placements allows you could also use four lengths of chain straight up to four hooks instead of the swing system I employed.

Screw the hooks firmly into ceiling joists, hang the fixture and wire whichever junction box is closest into the ceiling electrical. If possible the power cable would be less noticeable if it snaked to the ceiling along one of the support chains.

Once hung you can adjust the heights of the hanging bulbs and coil the extra cable on top, it’s not coiled very neatly in some of these pictures but I have since remedied that. There you have it.

If you’re interested in other Edison-style lighting ideas check out DIY steampunk-style iron pipe Edison fixture and the reason I have so many Edison bulbs kicking around, Maker Wedding: Rustic Edison-style hanging light fixtures.

DIY steampunk-style iron pipe Edison fixture

I’ve been seeing these types of steampunk black malleable iron on the net for years; it was only a matter of time before I went and made one. The texture of the iron combined with the warm vacuum-tube glow is quite an amazing effect, and they certainly look easy to make. Previous trips to the hardware store had only resulted in the question of what socket will fit into these types of pipes? I found myself with some spare time this past Saturday, so I went to the local hardware store and laid out 15 or 20 iron gas pipe fittings in the aisle and designed a 4-bulb fixture — roughly designed that is.

While designing the fixture be careful not to screw the fittings together too tightly as they can bind, also keep in mind these fittings will turn your hands black and the sharp threads can easily shred your hands if you slip. This being my first attempt I kept it relatively simple, keep in mind that you will have to thread wiring through all the bends and turns at some point.

I used the largest malleable iron piping I found, which had an inner diameter of 1 inch on the female threaded sections. I then purchased some basic keyless (no switch) brass sockets. These did not fit in the pipes, though I didn’t mind the look of the brass sockets extending from the fixture so I started with that.

The rounded base of the sockets became a problem as when they were wired and threaded into the fixture they lolled this way or that rather than extending straight from the fitting. I tried bulking up the base of the sockets with electrical tape, but they still slipped. I then tried removing the rounded bottom section yet the upper brass part was still too large in diameter to fit in the pipe.

Then I discarded everything but the bare socket with its bakelite base, the middle portion in the exploded image below (not the exact socket, but very similar). These almost fit, I had to crack/shave/cut off some protrusions from the bakelite base. Discarding the brass and cardboard meant that the socket had no protection or isolation for the wiring leads, for this reason I wrapped the hot lead with some electrical tape to isolate it and then ran one wrap of electrical tape around the entire socket. This extra bulk meant I had to twist and fiddle but they still fit in the pipe. If you fiddle so much that you think the electrical tape may have shredded, take it out, replace the tape and start again. It’s better to be safe.

Even though the sockets had no ground lead it was important when wiring be sure to wire all sockets in the same fashion and keep track of which wire is hot as they will all be combined at some point and you don’t want to short the wrong lead to the iron fixture structure.

While threading wire through the fixture you can unscrew fittings but be careful not to twist the wiring too much inside around elbows.

With the sockets wired and the wiring threaded through the fixture the next step was mounting it to the ceiling or wall. The wall mount fitting, pictured right, is not large enough to cover a junction box. For this reason I used a white plastic cover, however screwing the wall mount fitting to the plastic cover would not be strong enough to support the fixture (iron is heavy).

Another problem was that the wall mount fitting’s screw holes would block the plastic cover’s screw holes. I decided to use a steel junction box cover on top of the plastic cover to support the fixture. I drilled a center hole in both covers, two holes to line up with two of the iron mount’s screw holes and ensured that one of the remaining two screw holes in the iron mount fitting lined up with one of the plastic cover’s screw holes. This meant that the iron fitting would not be centered on the plastic cover, but it did allow access to both of the plastic cover’s screws even after the iron fitting was secured.

In this manner the iron fitting could be bolted to the steel cover, through the plastic cover and still allow access to the plastic cover’s screw holes in order to affix the entire assembly to the junction box.

The photo above shows the steel cover which has been drilled, in this photo the white plastic cover has not had the center hole drilled for the wires yet. I’m confident this system would have worked with a full sized junction box, however once I removed the old fixture I realized my desired location had an old-style smaller junction box and this system wasn’t going to work.

As it turns out, mounting to an old-style smaller junction box is even easier as the two junction box mounting bolts do line up with the iron fitting and therefore there wasn’t a need for the steel plate after-all. I put bolts right through the iron mount fitting, the white plastic cover and into the junction box, which allowed the junction box to directly support the weight of the fixture.

If you’re confident wiring fixtures, outlets, sockets and such this should be right in your comfort zone — if not perhaps enlist a friend who is to help out.

If you’re interested in other Edison-style lighting ideas check out DIY reclaimed lumber hanging Edison bulb chandelier and the reason I have so many Edison bulbs kicking around, Maker Wedding: Rustic Edison-style hanging light fixtures.