coded

My brother recently purchased a kayak tour guiding company, and the inherited website was created around the turn of the century. It was in dire need of updating, so I offered to create a website for him. Incorporating elements from his new logo, I designed the entire User Experience (UX) and Information Architecture (IA), wrote the code, and deployed the website to AWS.

The site content doesn't change often, so I opted to use Gatsby, a static site generator. This website powers all of my brother's sales during the summer seasons by integrating with the booking service, Peek Pro.

I had the opportunity to work on a really cool interactive storytelling data visualization—a "scrollytelling" page—for workshift.us, an organization supported by the Rockefeller Foundation which championed shift workers across America. The project raised awareness of the hardships these shift workers face and brought into perspective just how many people in America are shift workers.

In order to convey the large number of people, we created a representative 3d cloud of faces. As the user scrolls and the story unfolds, the face cloud changes, pans, and zooms to support the narrative. We used three.js to set up the 3d space for the cloud and scrollmagic to initiate changes as the user scrolls. We followed some best practices and took care in the the overall user interaction to make sure that it was smooth and engaging.

Unfortunatly, http://workshift.us isn't up anymore, but I have a copy of the project on http://mikelambert.me/workshift/.

I am a functional programming enthusiast and felt that many of the developers at my company would benefit from learning to program in a functional manner. I recruited my functional enthusiast coworker, and we put together 2 half day presentation and workshop sessions. I led day 1 with the basics of functional programming using Ramda: pure functions, partial application, and function composition. My coworker led day 2 with additional function programming concepts like Functors and Monads.

For the workshop component, we developed a code editor and designed challenges that allowed the participants to apply the functional concepts from the presentation. I built in an assertion UI that would display a green checkmark when the participant got the correct answer.

The code editor uses web workers to execute the user code which isolates any runtime errors and prevents the webpage from crashing.

A great feature of the code editor is that it keeps the state in the url. This means that you can copy and paste the url at any time to get the editor back to the same state. I still use this code editor today to mess around with small isolated problems that I encounter. It's also useful to be able to share a permalink when collaborating with coworkers.

Sarah and I got married in 2018, and being a web developer, there's no way I was going to accept using a cookie cutter wedding website service. It's a single page with a unique fixed navigation.

Sarah and I worked on the User Experience (UX) and Information Architecture (IA) together to create the website. I even taught her how to use GIT so she could make edits!

In 2017, my friend was leading a project to bring to Burning Man. He had visions of a beautiful gazebo-like structure with 2,750 LEDs. The LEDs would be controlled by the participants inside the structure.

Myself and a team of friends were tasked with programming the LEDs to move and change color in cool ways. I created a web based simulation that emulated the hardware components so that we could develop the software in parallel with the hardware development. To visualize the simulation, I used the LED positions from the 3D CAD model to render the structure in 3D using Three.js.

My simulator interfaced with the LED control code, which was written in Python and communicated with the LEDs using the OPC format. My simulator read this same OPC format, which allowed us to test and visualize our software before the physical structure was complete.

My friend was awarded funding from Firefly arts collective to create a project which he named Emergence. The inspiration behind the project came from actual fireflies in certain parts of the world that somehow all blink in sync with each other, despite the fact that each firefly can only see when it's immediate neighbor blinks.

The funding was used to buy 120 mini arduinos that would power each independent "firefly". My friend designed and fabricated a hockey puck like housing that held the electronics and battery, etc. He also designed a custom electronics board to facilitate communication between the ardunio and the other components (an LED, a light sensor, and wires to transmit and receive electo-magnetic pulses).

I was immediately intrigued when he explained what he wanted to build, and I decided to help him out by creating a simulation of these fireflies so we could tune the timing of the firefly blinks. I did some research and found some academic papers on the subject.

The algorithm we programmed in each firefly is as follows: Every 2 seconds, the firefly blinks an LED and emits an electro-magnetic pulse. During the 2 seconds before the next blink, the firefly can detect the pulses of other nearby fireflies. If it detects a pulse, it will alter it's period to blink a little before the scheduled 2 seconds. With this programming in each firefly, a group would eventually synchronize, just like the real fireflies.

To make this project more interactive, there is a light sensor on each firefly. When a flashlight is shone on the firefly, it will immediately turn off and not blink until the the light is removed. If all the fireflies are blinking in sync, you can use a flash light to scramble them up again.

I created a simulation of all of this using React and Redux. I decided to implement the algorithm as a function of time (rather than using timeouts) which afforded me the ability to both pause time and run the algorithm faster than real time. ie. 10 seconds of the calculations could take only one real second as you're watching it.

The most valuable part of this simulation is the ability to tweak the independent variables of the algorithm so we could get the timing just right. This was invaluable, because it took about 20 seconds to reprogram a single firefly, so we didn't have the luxury of tweaking the timing with the real bugs. The final product behaved pretty much the same as my simulation: https://youtu.be/mhtLOctSluE

My co-workers introduced me to a game called The Resistance: Avalon. It's a hidden identity game in which player's characters are not known to certain other players. At the beginning of the game, everyone closes their eyes and a script is read to reveal some characters. I like to call this the "spy prayer".

The script is different depending on how many players and what characters are being used. This presented a good opportunity to automate the reading of the script. I created some logic to construct the script and used the speech synthesis API to read the script to the user.

Another interesting aspect of this program is that certain characters require other characters to be in the game. For example, if you play with Percival, you must also play with Merlin. I wrote some recursive algorithms to automatically select or deselect the required characters depending on what the user selects. For example, if the user selects Percival, then Merlin will be selected automatically. Similarly, if the user de-selects Merlin, then Percival will be de-selected.

Boggle is a fun game and I thought it would be fun to build the game as a web application.

I wrote a recursive algorithm to search the board for the word that the user types in. The algorithm finds each instance of the word on the board if there is more than one.

I used D3 to draw the SVG lines to show the paths of the selected word. The lines are partially transparent so if there are multiple instances of the word on the board, the lines will be darker when they overlap.

The user can either type the words in the query box, or use the mouse or touch to click on the dice to complete the word. A list of the found words is kept and the score is shown for each word and tallied for the total.

Set is a fun pattern matching card game that I like to play. The goal of the game is to find 3 cards that complete a "set" (see the rules here). I thought it would be fun to build this game as a web application that I can use when I don't have the cards with me.

I implemented an N choose K algorithm to find each combination of 3 cards so I could efficiently find all the sets. I used this information to add a "hint" button below the cards that tells the user how many sets are present (I programmed it to ensure there will always be at least 1!).

I used SVGs for the shapes so I didn't need to have different images for each shape/color/shade combo. This also allowed me to easily tweak the colors and size of the shapes.

In the future, I would like to learn about image processing so the user would be able to take a picture of the real set cards on the table and feed it to the application. It could then populate the grid in the application with the same cards. When you play Set for real, sometimes there isn't a set. Having this feature would allow the user to verify that fact before re-dealing.

I am an active climber and spend a lot of time at the climbing gym. The MIT gym's old website needed an overhaul, so I decided to rebuild the website from scratch as a side project.

The primary purpose of the site is to display the gym's upcoming and past hours of operation. A staff member logs in and is able to post hours of when they will be at the wall. The hours are shown in a timeline view that clearly shows when the wall is open and for how long. The view is especially clear when there are multiple overlapping hours.

Great Marsh Kayak Tours

Shiftworkers by the numbers

Functional Fun

Our wedding website

House of Enlightenment

Emergence

Spy Prayer

Boggle

Set

MIT Climbing Gym