Algorithms | Brain Teaser

Earlier this year I decided to get a mentor. Someone who works in a robust codebase on a daily basis but is new enough to the industry to understand those challenges that come along with ramping up on data structure and algorithms. We meet weekly and he walks me through white-boarding algorithms. This is one that I learned last week. This is my second time running through the exercise. 

“You have a five-quart jug, a three quart jug and an unlimited supply of water (but no measuring cups). How would you come up with exactly four quarts of water? Note that the jugs are oddly shaped, such that filling up exactly ‘half’ of the jug would be impossible.”

— Cracking the Coding Interview, Gayle Laakmann McDowell

Let's walk through this problem. You start by filling the five-quart jug with water and pour off three into the other jug. This leaves you with two quarts of water in the five-quart jug. Then, pour out the water in the three-quart jug and fill it with the remaining two quarts from the five-quart jug. Now, the five-quart jug is empty and the three-quart jug has only two quarts. Fill up the five-quart jug with water and top up the three-quart jug with one more quart of water to fill it to the brim. The five-quart jug is left with four quarts of water. The end.

Whiteboarding on a post it

Coding Challenge | Button + Modal

Whenever I come across an interesting coding challenge, I love writing a blog post about it because it provides me an opportunity to document these milestones and its a retrospective on the code itself -- what I liked and what I could have improved. For this challenge, the user clicks a button and a modal appears.

Button

Modal

So, as with most front-end problems, there is the structure (html), the style (css) and the behavior (javascript). The structure of this challenge is very straightforward with two elements: the button and the modal (see figures above). For the target element, I used a <button> tag and for the modal, I created a wrapper <div>  and inside that, placed the modal content which includes the text and close button.

<button id="modalBtn">Open Me</button>

<div id="wrapperEl">
  <div class="modalEl">
    <span class="closeBtn">x</span>
    <p>I am a pretty modal</p>
  </div>
</div>

Now, let's look at the first element. It's located at the top left corner of our browser window. The goal is to horizontally center the button in the window. In order for this button to behave the way that I have sketched,  it needs to be a block-level element.

#modalBtn {
  display: block;
  margin: auto;
}

The wrapper for the modal is an overlay that spans the width and height of the browser window. The content modal is a smaller rectangle that I've decided to let take up 25% of the browser window and given a fixed height of 200px. 

.wrapperEl {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.modalEl {
  background-color: #F2F2F2;
  width: 25%;
  height: 200px;
  margin: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 20px;
}

The elements inside the modal element include a close button and some paragraph text. I've floated this close button to the right and changed its properties using a :hover pseudo-class.

.closeBtn {
  float: right;
  font-size: 1.5em;
}

.closeBtn:hover,
.closeBtn:focus {
  color: #00B16A;
  font-weignt: 700;
}

.modalEl p {
  text-align: center;
  text-transform: uppercase;
  font-size: 35px;
}

Closing out the behavior part of this problem, I use vanilla javascript to grab the button and the close button, then tell it to show/hide the modal when I click the button. I also grab the modal so the program knows what it needs to show or hide.

var btn = document.getElementById('modalBtn');
var modal = document.querySelector('.wrapperEl');
var span = document.querySelector('.closeBtn');

btn.addEventListener('click', function(e){
  e.preventDefault();
  
  modal.style.display = "block";
});

span.addEventListener('click', function(e){
  e.preventDefault();
  
  modal.style.display = "none";
});

So there we have it, we've successfully grabbed all the elements (button tag, span tag, and wrapper element) and added event listeners to the button which will be 'clicked' to show the modal as well as the close button, which has a hover state and hides the modal when clicked.

Aligning Elements on a Page | Vertically & Horizontally

Before aligning an element on a page, you should be clear about one thing: is it an inline or block level element. This will determine how the element will behave. Some examples of block-level elements include: div, aside, section, footer, h1 - h6, form and nav; there are many more. These elements take up the full width of space available (sometimes that is the full width of the screen).

In the following example, the div is positioned in relation to the container element it is housed within. The top of the element is then pushed halfway down the page, from the top of the container element (so the entire div sits just below the center horizontal line). translateY changes the position of an element along the Y-axis. In this case, it pulls the div halfway back up  (hence the negative number) .

div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

To center the div horizontally on the page, again make sure you're manipulating a block level element. Give it a width; this can be a hard pixel number or percentage of the overall width. Set the left and right margins to auto. The div will take up the space you've determined and split the remaining white space evenly between the two margins.

div {
  width: 25%;
  margin: auto;
}

There you have it, now you can simply, and with very little code position elements exactly where you'd like them on the web page. 

Space Program

This Fall, Tom Sachs Space Program: Europa will take over the Yerba Buena Center for the Arts (full disclosure: I work there).  Last week, we had an intimate lunch time viewing of his documentary/installation video that simulates a mission to Mars - inside the Park Avenue Armory.

The astronauts' space suits, the spaceship and the control room is constructed from a variety of 'found materials' - plywood, Tyvek (the same material used to make FedEx packages and in home construction) and metal - with NASA-like detail.

I'm looking forward to witnessing this Fall's latest mission - to Jupiter.

Temperature Converter in Vanilla JavaScript

As far as simple projects go, this one is right up there with the nest of them. I took the idea of a temperature converter and applied some visual interest. At it's core, the project is made up of two basic functions -- one to convert the temperature in each direction and the other to change the color of each temperatures' background. I wrote this project several months ago, when I was just diving into front end using vanilla javascript. I'm sure that if I were to refactor this code today, it would look much cleaner.

If you'd like to play with the actual project, check it out here.

Shadowing by Chomko & Rosier

A couple weeks ago, I came across an interactive light installation called Shadowing. The project uses infrared tracking so that when you walk under the light, it plays the shadow of the person who previously walked under it. Creepy? Genius! The project debuted in Bristol, UK (2014) and was most recently in Tokyo. The project is designed and implemented by Chomko & Rosier, a studio focused on non-screen-based interactive projects. I hope it keeps traveling around so that I can get to play with it.

If a visitor stepped out of the light to watch for awhile, the lamp would begin to 'dream', recalling a procession of shadows from earlier visitors. -- Jonathan Chomko

Winner of Watershed's 2014 Playable City Award, Shadowing gave memory to Bristol's city lights, enabling them to record and play back the shadows of those who passed underneath. Shadowing offers an exploration of the disconnectedness that technology can create between strangers, the role of light in creating a city's character, and the unseen data layers and surveillance culture that pervades our contemporary urban spaces.

Playing with p5

Last week, I enrolled in a two-day p5.js workshop at the Gray Area Foundation. The workshop was taught by Chelley Sherman, a new media artist and interaction designer out of LA. She encouraged us to experiment with what we learned as soon as possible and push ourselves to build things that we're interested in.

Objects & Loops

I started playing with p5 last year and thought a workshop would give me a little shove once I was exposed to the possibilities of what it can do. The bonus was that I'd get to meet a few people who are into creative coding too.

This small project was super simple. I started by building an object - the bubble. It has properties - an ellipse that moves. I then made 20 of them, looped through them and displayed them on the canvas. I used a conditional to generate a continuous flow of bubbles. Maybe I should try to make them look more like bubbles and less like circles on a flat background.

Chuck Close

A couple months ago, I traveled down to Los Angeles to the Museum and the Web Conference at the Millenium Biltmore Hotel in DTLA. My last night at the conference I attended a party at The Broad. Unable and unwilling to spend time trying to score tickets to the 'Infinity Room', I strolled through the galleries and came upon a Chuck Close painting.

I was first introduced to his life and work while watching the PBS documentary 'Chuck Close: A Portrait in Progress'. At the time, I lived in New York and rushed over to the Museum of Modern Art (MoMA) to see one of these pieces in person. 

Anyway, last week I strolled across the street to the recently reopened SFMOMA - working at an arts organization has its perks - because I heard there were a few of his pieces in the collection. I mean I couldn't resist. What I did not expect was to see an 8-foot tall collage made out of paper pulp. Phyllis, took my breath away - twice. He also painted her portrait in ink with fingerprints.

Phyllis, Chuck Close

Arts x Tech Job Board

This weekend, in anticipation of attending the Museum and the Web Conference in Los Angeles next week, I decided to build a job board to collect all the interesting jobs I come across that fall at the intersection of arts/culture and technology. I was in spired to create this post after reading Rik Lumas' Medium article, 'How to Create a Simple Jobs Board in Ruby on Rails.'

Arts x Tech Job Board

After 24 hours, the site is a work in progress with minimal design implemented and a short feature list that is set to go live this week - custom domain name and all. Once the site is launched, I'll post an in depth explanation about my process and the gems/libraries used.

Life as a Front End Teaching Assistant

A couple months ago, I started as a teaching assistant to the part-time front end web development (FEWD) course at General Assembly. Wednesday was the final class where we had each student give a short 7 minute presentation about their projects to the class - challenges, proudest moments, and takeaways. I was blown away by how far each student had come in only ten weeks and look forward to my next class starting this weekend. I was most touched by this gift from our producer which all the students signed with thoughtful notes.