Creating Reality Hack – Paint-Mate

Spent Monday-Thursday this week (March 12-15) at the Creating Reality Hackathon.  My first hackathon in fact.  Met lots of cool folks, got some free swag, got lots of ideas for future projects, and unexpectedly walked away with a prize!

As my first hackathon, I came in with an open mind ready to help bring somebody else’s idea to fruition, after mulling over a few projects and roaming the different category areas, jumped on to create the PaintMate team.

Paint Mate:

Inspired by the copius amounts of paint wasted in industry and home use (estimated up to 1/6 of all paint produced), we hoped to harness the power of the Hololens AR Headset to help humans quickly and accurately scan and estimate the amount of paint needed on a project.




Will add in a bit more about my lessons during the experienced.  Of which there were many, which I hope to bring to my personal proejcts and the next hackathon.



Bootstrap Modal Lightbox – Display Clicked Item

Last weekend I decided to revamp with Bootstrap to 1) test my profiency and 2) improve mobile access on the site.

I created a modal lightbox, just like the original site (and after some testing figured out the simple and elegant solution to a responsive images that always fit in the window, desktop or mobile).  The standard Bootstrap Carousel has one issue: it sets the first slide as active by statically adding the ‘active’ class to the div, and therefore doesn’t display the clicked image using ” data-toggle=”modal” data-target=”#myModal” “.

My immedate thought was “apply the ‘active’ class through a javascript function, and remove it likewise when closing the window”.   This turned out to be the perfect solution, and I was able to hack out the following design:

Each gallery thumbnail/image has the follow onclick, index adjusted accordingly (can use simple methods whether html or php).

<div …. onclick=”setActive(1)”>

<div …. onclick=”setActive(2)”>

what is setActive?  It’s my function for adding the “active class” to the corresponding lightbox.

// add to nth div in div.carousel-inner

function setActive(num) {

var c = document.getElementById(“carouselin”)

var d = c.children[num];

d.className += ” active”;


The carousel items have a ” data-dismiss=”modal” ” and the following snippet for removing class items I found on Stack Overflow (link).



php gallery & a an alternative utilizing python

I revised to automatically load gallery images via php, replacing the hardcoded image links used as placeholder for this type of design.  This followed my standard workflow of:

  1. Create Minimum Viable Product
  2. Style the model
  3. review and improve on earlier design
  4. repeat step 3 until it satisfies mine/user’s

While I was happy with result, I was not happy at requiring an otherwise static web design to use php, and increase the requirements.  While I have the tools and skills to run web applications on php-enabled servers, my tendencies towards minimalism led me to find a simpler solution: a python script for automatically generating all gallery .html files based on folders and images in “photos” directory.

Generating Gallery pages with PHP




Generating Gallery pages with Python

Python snippet:

galleryList = os.listdir("photos")
for i in range(len(galleryList)):
    newGallery = open(galleryList[i]+".html","w+") newGallery = open(galleryList[i]+".html","w+")
    photoList = os.listdir("photos/"+galleryList[i]); # print photoList; newGallery = open(galleryList[i]+".html","w+") 
    newGallery.write(' [MISCELLANEOUS STYLING] ');
    for j in range(len(photoList)): 
        newGallery.write('<li><img src="photos/'+galleryList[i]+'/'+photoList[j]+'" onclick="openModal();currentSlide('+str(j+1)+')" class="hover-shadow cursor"></li>\n');

This snippet is the ‘summary’ of my change.  The ‘listdir’ command produces a list of directories, as shown:

>>galleryList = os.listdir(“photos”)

>print galleryList

[‘Actor’, ‘Business’, ‘Dance’, ‘Personal’, ‘Theater’, ‘Travel’]

We then iterate through each respective folder, creating a “Actor.html”, “Business.html”, etc for each gallery folder.

For each gallery folder, I use:

#Creates new file ending in .html from the galleryList list object, with write permissions

newGallery = open(galleryList[i]+”.html”,”w+”)

And iterate through photoList in the same way as galleryList, producing a div and img html object for every image in the folder.

photoList = os.listdir(“photos/”+galleryList[i]); photoList = os.listdir(“photos/”+galleryList[i])

newGallery.write( [other html code] )

for j in range(len(photoList)): for j in range(len(photoList)): newGallery.write(‘<li><img src=”photos/’+galleryList[i]+’/’+photoList[j]+'” onclick=”openModal();currentSlide(‘+str(j+1)+’)” class=”hover-shadow cursor”></li>\n’);










And it works!

sam_website_margin_and_aligned - Copy.png



I created a gallery.php file that used GET_ID to select a folder to display all folders from. (Example: “” ).

Wanting to examine a static solution that requires no server-side processing:

    I used python to automatically generate and update Actor.html, Business.html, and any other galleries

Checkout these and other projects at:

Find That Email: Email Address Generator


Summary: Development of a simple Email Permutator Chrome Web Extension.



I had the concept of “Minimum Viable Product” drilled into my head during my coursework at USC, and as iterative design has become the standard through SCRUM, AGILE, and all those trendy methodologies.   This unstyled prototype uses html inputs, a preset number of domains.  The Generate Emails button uses a JS Event Listener to trigger the generate_emails() JS function



Prototype 2:


My next TODO was to clean up interface by making number of domains variable and ignore blank domains in generate function.  The appendChild function took care of the first job:


And the answer to this handy stackoverflow post detailed that JS ‘if’ checks for ‘truthiness’ of variables, evaulating to false if value is null, undefined, NaN, emptystring(“”), 0, or false.

In the end, my collaborator recommened our users would only need to use one domain at a time, so this work was scrapped, but it was a useful lesson.

Prototype 3:


Iteration on way to stylizing buttons with CSS.

First release Version:


We determined users only needed to generate emails for one domain.  And that removing the Generate Emails button in favor of a dynamic automated interface.  The onblur Event Object was an easy solution.

Where to Go From Here:

Integration with InboxSDK to automatically detect open emails and fill the inbox, replacing (or adding to) earlier permutations.

Checkout these and other projects at: