2019 Dare Mighty Things Hackathon

Ulta’s first Hackathon

This year Ulta teamed up with the Google Cloud Chicago team to create a fun challenge for our first-ever hackathon! The hackathon was part of the Dare Mighty Things conference, if you’re unfamiliar with this great Chicago conference, check out http://daremightythings.co. McDonald’s co-sponsored the event and graciously hosted the hackathon at their Chicago headquarters – my dream of having unfeathered access to their fountain drink machines came to fruition!

We supplied the participants with multiple sample data files, representing our complete product catalog, store inventory, and store details and challenged them to create a voice-powered experience. The winners would receive up to 5 Google Stadia Founder’s Edition package.

Of the 53 teams involved, 15 chose to work on our challenge and we were delighted with the results. Some of the entries included: Google Assitant for Ulta, Product Recommendation for Ulta, Speech Analysis Platform to make Conversation Smarter.

There were also some pretty interesting team names: “Big Brother is Watching,” “I Like Chicken,” “Nuggets,” “Hopper”, “Ultrasist,” “Sushi Sahworma,” “Serving Looks,” “@therealDMI2019,” “ISU Seniors,” “Team Van,” and “Kangaroos”.


Joe Rago kicking things off!
The quick site we threw together to host data files and info

Dynamic images with Scene7 (Adobe Marketing Cloud / Experience Manager)

https://images.ulta.com/is/image?layer=0&size=800,800&color=ffffff&opac=0&layer=1&src=Ulta/2552761&size=656,656&layer=2&src=Ulta/push_banner_pdp_lowstock_V4&size=800,800

Using query params we can instruct Scene7 to construct a dynamic image for us. The above example creates a single composition from two images. You can see things like background color, opacity, image source, and size.

In the above example I’m making the middle layer slight smaller to maintain a safe area/margin. Scene7 will scale from center, but there is also an anchor point option if needed.

Kato HO Metra with LokSound 5 Select Direct and Custom Sounds

A hobby project I’ve been working on recently. This project involved:

  • soldering small electronic components
  • using a multimeter (to measure current, resistance, amperage)
  • understanding and installing resistors and LEDs
  • painting/spray painting plastic and installing small plastic pieces to the body shell
  • knowledge of DC
  • removing the old light board and installing a new LokSound DCC Select Direct board
  • using LokProgrammer to configure the board and install custom sounds
  • creating custom station and announcement sounds to use within LokProgrammer
  • creating a custom sound schedule with logic for station and route sounds

Photos of the train with the shell off:

Wiring

Adobe Photoshop CC Extension – Panel (HTML/JavaScript)

Video overview of a Photoshop extension I built to help with some common workflows for our photo studio folks at work. Built entirely in HTML/JavaScript using any code editor of your choice (e.g. not using eclipse and that adobe provided tooling)

Use the resource below to get started. Some key callouts I learned in development:

  • add a debug refresh button to reload your extension’s content when updating html/js file
  • when making changes to the .jsx file, disable/enable the extension to see changes reflected
  • use defaults write com.adobe.CSXS.8 PlayerDebugMode 1 to side load an unsigned extension (make sure you restart/log out/or kill process for changes to take effect)
  • put your extension dir in /Users/$user/Library/Application Support/Adobe/CEP/extensions/ – if this path doesn’t exist you can create it
  • watch out for ruler units – ensure your logic considers the user’s ruler units before doing arithmetic. Some sample code I’ve seen and have used suggest doing:
    1. origRulerUnitPrefs = app.preferences.rulerUnits; //save original
    2. app.preferences.rulerUnits = Units.PIXELS; //set
    3. //do logic
    4. app.preferences.rulerUnits = origRulerUnitPrefs; //restore original

Resources:

https://github.com/Adobe-CEP/Getting-Started-guides/tree/master/Client-side%20Debugging

https://www.adobe.com/content/dam/acom/en/devnet/photoshop/scripting/photoshop-cc-scripting-guide.pdf

Wildflowers in epoxy resin with NFC

I’ve been wanting to experiment with epoxy resin for awhile and I finally found some wildflowers from the local forest Preserve that I run in frequently. They made the perfect subject to create a balanced and visually stunning composition.

I also wanted to add a technical touch, so I embedded in the bottom layer of the epoxy a NFC chip. See the video below!

NFC in action. Most Android phone / iPhone XS and later support background tag reading.

Process:

Resources:

https://www.artnglow.com/blogs/news/7-steps-to-a-bubble-free-and-flawless-cure

Products used:

Porsche kiosk POC, iPad app developed in Swift

Related Post

Fresh off of building PTSExplorer.com I had some inquires about building an adaption for a kiosk or exhibition. I was excited by the challenge and below is what I built in a night to show my vision of what that could look like.

The iPad app uses the didConnectNotification from UIScreen to detect when a secondary screen is connected, via HDMI or AirPlay. Once a second screen is detected at runtime I programmatically create another window with a root view controller from a storyboard.

Misc Projects over the past few years.

SnapChat Filter for my daughter’s first birthday.
Coffee mug I designed to commiserate the release of a major Android app at Walgreens. Illustrations on the back were done by the amazing Enrique Sanchez.
Animation I was working on for More cupcake app, never finished but always loved it.

Model train crossing/bridge controller using an Arduino Mega using C/C++

One of my favorite things about the model train hobby is getting to experiment with my love for hardware and code. One day I was playing with a crossing system I bought from a big retailer and quickly became frustrated with its shortcomings, I literally had an “ah hah” moment when I realized I could create my own, pretty easily.

The video below describes in detail why I decided to build my own, and how I went about doing it. I go over different “activation methods” and why I chose to go with sonar over voltage or light.

One additional thing I did was add a BLE chip so I could control the whole system with my smart phone (luckily I know a good iOS developer to build the app).

Grossing Gates, Turnout, and Signal Bridge

Components used:

  • Arduino Mega
  • Sonic sensors (HC-SR04)
  • NJI Crossing Gates (NJI 1164) & NJI dwarf
  • Adafruit Bluefruit LE UART Friend – Bluetooth Low Energy (BLE)
  • Innovative Train Technology Products HQ-300 (Sound module)
  • Tolako 5v Relay Module for Arduino (Works with Official Arduino Boards)
  • SMAKN® 5V Active Low 2 Channel Relay Shield Module for Arduino UNO 2560 1280 ARM PIC AVR STM32 Raspberry Pi
  • BLMA 3 track modern signal bridge
  • Circuitron 6000 Tortoise Switch Machine
  • Misc. servos (crossing gate and car stopping mechanism)
  • Rare earth magnets (interrupts the reed switch in Faller car)
  • Faller – Car System Start-Set MB Sprinter
  • Adafruit Speaker – 3″ Diameter – 8 Ohm 1 Watt [ADA1313]

Faller car system

Sketch plugin to automatically update image layers using JavaScript

One day a few of my peers on the creative team came to me with a request/challenge – could I build a Sketch plugin that streamlines keeping image assets up-to-date in their comps? After a few iterations, I believe I settled on a solution for them, see the [narrated] video below for details.

  • assign local/remote URLs to image layers
  • data is saved at the document level and persists (see sketch file format for more info about this)
  • upon menu item click, or document open, grab layer object via saved layer ids and update image data with associated URL
  • no need to iterate through layer hierarchies (slow/wasteful), no need to rename layers, no need to keep directories in a specific structure
  • Document Settings – for saving data
  • Actions – for listening for document open, etc.
  • From Native – for getting document from action context

If you have any further questions about this, please reach out!

More info – https://developer.sketch.com

Another plug-in: