Category Archives: {Code}

Let’s say you’re sending a button from a parent to a child using render props.  How do you properly render and place the returned button?

As it turns out, its quite easy.

Let’s say that this is your component which uses render props to return both the toggle state and the toggle button.

To use the above provider, you may be tempted (because of patterns) to do this.

However, because the parent has already rendered the button, the child needs only to place the rendered component as if it were any other variable.

That’s it.


I was recently adding Flow typing to a HoC and ran into a specific use case.  The HoC injected its own function into the child component while also using of the of child props in the injected method.  So here's how to properly flow type it so that consumer of the HoC will enforce the typing of the child.

First, add the type for the prop you will be injecting into the child Second, add the type for the prop you need to use from the child Last, update the HoC wrapper as follows  

Here's what each of those lines is doing:

This is ensuring that for the calling of this HoC, we enforce the typing of the child and add the requirement for our own props. This simply passes along the typing of the child component. This declares that we will return the prop types of the child, minus the injected props we will provide. Putting it all together, here is our final flowtyped HoC.

For a weekend project I built a backlight array for my TV which gives off ambient lighting according to what colors are being shown across the edges of the screen. Powered by a microduino and Abalight software for Mac.

According to the experts, backlights offset the brightness of the screen by lighting up the entire wall, while also giving the impression that the movie is bigger than just the screen.  I just say “woot.”


I recently had an issue with a server hosted at   One Saturday, it completely failed to boot and there was no SSH access.  After a little pleading with OVH to fix the server(since I had no access) , I was flatly told “No” several times. This was a dedicated server and as such, I was responsible for all aspects of its software.  “But your physical disks are failing to mount!” No help.  Grrr, ok I can solve this.

Here’s the only problem, I don’t even know what the error is on boot! I can’t see any of the boot screen, so I don’t know where its failing.

OVH has a convenient feature know as Rescue Mode which allows you to boot to an alternative  OS, so you can mount and correct any issues on the primary drive.  Utilizing this feature I got access to the disks and RAID array.  Everything seemed fine, but I ran through all the checks to be sure.

  • Hard Disks – No errors
  • Raid Array – Needed to be resynced, but does not fix boot
  • FileSystem – OK
  • Boot Logs – No help
  • Partitions – Disks are out of order, but does not fix boot

At this point, I’m out of ideas, so I call OVH one more time and ask them to look at the boot screen and tell me where its stuck.  They agree and tell me it boots to GRUB> prompt and stops.  Ok, this is good information.

I log back into rescue and scour the internet for a way to fix this.  The answer is found in an obscure ubuntu forum, which perfectly describes a way to reset the grub loader on each disk in the array, when utilizing a rescue mode.

$ sudo fdisk -l (From this you need to find the device name of your physical drive that won't boot, something like “/dev/sdxy″ - where x is the drive and y is the root partition. Since I was using a software RAID, root (/) was on md1)
$ sudo mount /dev/sdxy /mnt (Mount the root partition)
$ sudo mount --bind /dev /mnt/dev
$ sudo mount --bind /proc /mnt/proc
$ sudo mount --bind /sys /mnt/sys
$ sudo chroot /mnt  (This will change the root of executables to your your drive that won't boot)
$ grub-mkconfig -o /boot/grub/grub.cfg (insure that there are NO error messages)
$ grub-install /dev/sdx (NOTE that this is the drive and not the partition. try grub-install --recheck /dev/sdxy if it fails)
Ctrl+D (to exit out of chroot)
$ sudo umount /mnt/dev
$ sudo umount /mnt/proc
$ sudo umount /mnt/sys
$ sudo umount /mnt


Hopefully this will save someone some agony in the future and give you a few hours of your life back.


I recently need to set up caching for a very slow API service I was working with.  However the app I was working with forced a query param of “timestamp” on all requests.  This effectively killed the cache because all api requests were flowing through a single endpoint, and only the query params differentiated the requests.  So here’s how to set up caching and strip out query params with nginx.

I’ve been learning a lot of Reactive Extensions (Rx) lately, and in the spirit of learning I decided to share some 984368initial thoughts on the concepts and give a very light overview.  Rx is very deep, but hopefully this article gives you an initial understanding and examples to solidify the knowledge.

If you haven’t heard of Rx before, I highly recommend reading Erik Meijer’s blog post in which he describes an alternate way of thinking about events.  In short, he describes events (mouse clicks, keyboard events) as a stream of data.  Think of an array where you have a list of items but with the added element of time in between each item.  For example, as your mouse moves it creates a stream of coordinates. (The dots represent time passing)

mouseMoves = [….{x: 45, y: 45}…….{x: 45, y: 50}…..{x: 50, y: 50}…]

See, mouseMoves is just an array with time between the items.  This is what is known as an Observable.

Once we have an observable, we can do all kinds of things to the stream of data.  We can filter it for certain items, we can map over each data item and transform it to something else, we can merge it with another Observable to create a new data stream.   The documentation for the javascript implementation, gives you just a taste of what you can do.

A Practical Example – Mouse Moves

Let’s say that we want to add a listener to our page that detects whenever the mouse hovers over an image tag.  In addition, while we want to know whenever the mouse is hovering over the image, we also want to throttle the number events actually occurring.  The following Rx code accomplishes this in just a few lines of code.

Let’s take this line by line to see just what is happening.

After querying the page for a list of image tags, we create two new Observables by attaching them to the images DOM list.  These observables are now listening to all mouseover and mouseout events.

Now that we are listening to events, we want to filter these events to only return every 300ms (as opposed to very fast which it would do right now) and only while we are still hovered over an image.  Here’s how this code works. We loop over the list of mouseover events streaming in using ‘map’. For each event we occur, we create a new Observable that is delayed by 300ms.  And lastly, we filter that nested observable with the ‘takeUntil‘ operator so that we only return a valid event if the mouse has not left the image.  At this point, the event is then returned to the outer ‘map‘ result for the final operator, ‘switchLatest.’ Switch latest takes in a stream of events and returns only the most recent event. This operator is especially useful for ajax calls, where you may have made a few requests, but only care about the data from the most recent request made.  Likewise, this returns the most recent mouseover event that was valid.

Now that we’ve created our observable with its propers filers, we simply ‘forEach‘ or ‘subscribe’ over the stream as if it were an array.

That’s it!  We can now listen for mouseover events on images like an array.

This is just scratching the surface of Rx and we haven’t even touched on how Observables automatically unsubscribe themselves from events or handle errors.  If you’d like to learn and play more with observables, I highly recommend giving Jafar Husain’s interactive tutorial a try.