I'm Mike!
I'm a web developer in the Boston area. I enjoy outdoor adventures including rock climbing, sailing, skiing, and scuba diving. When I'm not doing those things, I keep busy with various web projects. Check them out below!
https://github.com/lax4mike/

My friend, Nick, 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". Nick 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 be able to tweak and 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 of these would start off blinking out of sync, but 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 shown 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 benefits of being able to pause time, and to 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



Technologies used: Javascript (React, Redux, D3), HTML, CSS, Gulp

I gave a presentation on React and spoke about the benefits of the library. I also wanted to briefly go over some examples to demonstrate some of the concepts and show how simple it is. To do this, I created this "React Playground" web application.

The application consists of the code panels and the output panel. React uses JSX which needs to be compiled down to plain javascript. To demonstrate that JSX just an HTML-like syntax that compiles to javascript, I added a 2nd code panel that displays the compiled code. This is updated on the fly as the user types by running the code through Babel.

There are some examples that can be loaded into the application. Each example focuses on an idea in React and demonstrates it by creating a small React component which is shown in the output panel.

The panels are toggle-able and resizable. To build this, I used a Functional Reactive library called Kefir. I originally started exploring FRP after watching this excellent presentation by Philip Roberts. Modeling your data as asynchronous streams and declaratively transforming that data in a functional manor is a pretty powerful concept. (The standard body for ECMAScript has a proposal for making observables (streams) part of an upcoming version of javascript, which is pretty exciting.)

Re-using this code, I created 2 other "playgrounds". I created http://mikelambert.me/es6 when es6 was first released to promote using the new features of Javascript to my co-workers. I also created http://mikelambert.me/javascript-fun which is preloaded with some javascript tasks that can be used when interviewing javascript developers. Another feature is that the code panel is serialized into the url, so code samples can be easily shared (like a pared down version of codepen, jsbin, etc). Like this: http://mikelambert.me/javascript-fun/#S87PK87PSdXLyU/XUMpIzcnJ11Eozy/KSVFU0rQGAA==



Technologies used: Javascript (Kefir, CodeMirror, Babel, jQuery), HTML, CSS, Gulp

Spy Prayer

http://spyprayer.com
2015

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.



Technologies used: Javascript (React, jQuery), SVG, HTML, CSS, Gulp

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.



Technologies used: Javascript (React, D3, Backbone), HTML, CSS, Gulp

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.



Technologies used: Javascript (jQuery, Backbone), HTML, CSS, SVG, Gulp

Grocery list

http://mikelambert.me/grocery
2014

I needed a simple grocery list application that I could use on my phone while at the grocery store. It was a perfect opportunity for me to investigate some new technologies.

In this project, I used backbone as the front end framework. When I finished the basic functionality, the interaction was dull, so I used CSS3 transisions to spruce up the experience by animating the adding/hiding/deleting of the grocery items.

I wanted two people to be able to use this app at the same time while in the grocery store so I powered the backend with socket.io to make the app respond in real time without the need to refresh the page. If I check off an item on my phone, it automatically reflects that status to anyone else looking at the grocery list.

I also used a build tool called gulp. It runs on Node.js and allows you to automate many tedious tasks related to building a javascript application, including compiling stylus, minifiying javascript, optimizing images, and creating a live reload server that automatically reloads when an asset (css, js, html) file changes. Very handy!



Technologies used: Javascript (Backbone), HTML, Stylus, Socket.io, Node.js, MongoDB, Gulp

MIT Climbing Gym

http://scripts.mit.edu/~mitoc/wall/
2009

I am an active climber and spend a lot of time at the MIT climbing gym. The 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.



Technologies used: Javascript (Mootools), HTML, CSS, PHP, MySQL, Adobe Illustrator

MIT Climbing Gym - Mobile site

http://scripts.mit.edu/~mitoc/wall/ (on mobile device)
2009

In order to simplify the view on a mobile device but still maintain continuity for the user, the upcoming hours are presented the same as the past hours on the regular site. The view combines overlapping hours into one block for readability, which is subtle but visually intuitive.

There is a mobile friendly page for most of the full website, including the about page with links to walking directions and a full searchable staff list that lets mobile users easily find the phone numbers of staff.

Staff can also add hours with a unique time picker widget, that I designed, that is easy to use on a mobile device.



Technologies used: Javascript (Mootools), HTML, CSS, PHP, MySQL, Adobe Illustrator

Web Scraper

code on github
As a gift from my cousin, I received a USB stick that was preloaded with the first 2 seasons of Radiolab. I started to enjoy the show and soon needed the rest of the 12 seasons. I noticed you could download the shows for free on Radiolab's website, but quickly got frustrated because I had to download them one at a time and the download links were on separate pages. I thought, I could probably write a scaper that would download all of these for me. So I did! I used jsoup as the HTML parser and wrote a script that downloaded all 12 season, named appropriately and organized.

Update 2016: I just reused this to get season 13 and 14!



Technologies used: Java (jsoup), HTML, CSS

Resume

Download as .pdf | close
Michael C. Lambert
| (602) 451-0571
Work Experience
2014 - present
Velir
Senior Front-end Web Developer
  • Develop rich web applications with a focus on data visualization using D3 and React.
  • Write modular and reusable javascript components.
  • Leverage state of the art front-end tools and techniques to process css, javascript, images, and svgs for development and production.
2011 - 2014
One Pica
Web Developer / Solutions Architect
  • Develop public facing e-commerce websites using Magento (an MVC PHP framework) and front-end web technologies.
  • Work as team lead in an agile development environment with frequent releases and deadlines.
  • Write tech specs, interact with clients, and organize tasks.
2007 - 2011
Empirix - IP Communications
Software Engineer
  • Developed a tool to export a "ladder diagram" (a graphic diagram that shows packet traffic) from a java product to an interactive, e-mailable .html file.
  • Wrote a javascript graphing library with HTML5 canvas for the ladder diagram.
  • Designed and developed a "network map" web application using HTML5 canvas and wrote a custom physics engine to automatically layout the network nodes.
  • Facilitated the technical merger of an acquired VoIP product.
  • Java Development: layout/UI, DB data retrieval/writing, custom components.
Education
2002 - 2007
Northeastern University | Boston, MA
  • Bachelor of Science in Computer Sciences and Multimedia (Dual-Major)
  • Relevant Courses: Capstone, Hypermedia, Human-Computer Interaction
  • Worked two 6-month interships for MIT and Harvard
  • GPA 3.265
Skills
JavaScript (Node.js, Frontend libraries/frameworks), HTML, CSS (Sass), PHP (Magento), Java, Regex, JSON, SVN, GIT, Gulp, Adobe (Illustrator, Photoshop), Apache, Nginx, MySQL, Mongo Db, Unix
I enjoy rock climbing, sailing, skiing, scuba diving, guitar, coding and UX design.