Reflections on UI Design Basics

Impossible-TeapotEveryone is a designer these days. I remember back in the 90’s when animated gifs of flames and fireworks were the real way to show that you were “in the know” when it came to webdesign.

I was a self taught/professed web designer back in the 90’s. I had grand ideas of double majoring in graphic design and computer science. My friends in the computer science department warned me against taking too many graphic design courses. And my friends in graphic design cheered me on. Either way I knew I would be indispensable if I could speak both languages: Computers and Design.

Computers require deep specialization. There’s a saying that blares in the back of my head. It yells in an irritatingly sing-song loop, “Jack of all trades. Master of none.”

10 years later and I’m happy that I chose to specialize in computers. But I don’t regret my time learning graphic design. I feel so much richer for knowing 2 disciplines versus a single one. Now a new song loops in my head, “Don’t put all your eggs in one basket.” Sure I could be further along with computers if I focused on one discipline but I wouldn’t have the liberal arts education that allows me to see things both from the visual point of view and the purely mechanical point of view. I wear 2 hats. I have 2 perspectives.

Check out my post on Programming for Visual Designers.

Computers require us to specialize. Technology keeps changing and requiring more and more of us. Not only do we have to be able to code, we need to be aware of how to present our ideas in pleasing designs. As technology advances our aesthetics are almost always called into question. As the medium changes, the visual layout requires that we change with it.

What I don’t understand is how all of these changes in design affect usability. I’ll be honest, I am tired of learning new things all of the time. I wish some things would just stay the same. Stasis in Technology? Never! I learned that at an early age. If you want to be in this racket, you need to be willing to constantly change.

Empty your mind, be formless, shapeless — like water. Now you put water in a cup, it becomes the cup; You put water into a bottle it becomes the bottle; You put it in a teapot it becomes the teapot. Now water can flow or it can crash. Be water, my friend. – Bruce Lee

I get it Bruce. But I’m tired. I miss the days of links underlined in blue. My images don’t need to parallax scroll when I read a blog post. I don’t care about the extra niceties. Give me plain HTML with no fancy in-line images and I’m very happy. Do aesthetics have to change with the times? I know technology makes old tech obsolete. But it’s sad to think that new tech also makes old aesthetics obsolete.

End of rant.

This week I worked on 3 WODs

The first WOD required me to create a simple History of Modern Browsers HTML page. I got the content from Wikipedia and laid out the page easy enough. I added some images and created some links to present options to learn more about the creators of each browser. When I had to create a table of contents for the page I got caught up on named anchors and had to look them up online.

  • Time taken on first try: 14 min 50 sec
  • Time taken on second try: 7 min 30 sec

The second WOD required me to update my History of Modern Browsers HTML page to link to a CSS page to make my boring HTML page look better with some Web 2.0 style. I do love the ability to request fonts from Google. No need to purchase fonts. No need to download a local copy to my server. I also updated the body margins and colors to personalize the page.

  • Time taken on first try: 13 min 51 sec
  • Time taken on second try: 10 min 33 sec

The third and final WOD I completed this week was the easiest. I updated my History of Modern Browsers CSS styles to format the contents into a centered page with a three column layout. This was accomplished easy enough with the same float: left tags I used to display the images inline with the paragraph text.

  • Time taken on first try: 5 min 6 sec

Reflections on Completed WODs

The first WOD was the most difficult to complete in time. What I’m learning through the process of coding in a “dumb” IDE is that I rely on code completion a lot. When I don’t have code completion to link to a relative style sheet all progress stops. I have to google “<link rel=” and it takes up serious seconds. Also, linking to fonts hosted on the Google servers is not second nature.

The second WOD presented some problems for me. Without the assistance of Dreamweaver, my web-coding IDE of choice, I had to waste precious time googling how to link to fonts on Google’s servers.

The third WOD was the easiest for me. I completed it in a little over 5 minutes. Once I had warmed up with the previous 2 WODs doing the few updates required to center the content in a div and create a three column layout was easy. I’ve been working with CSS for a little over 10 years and I feel very confident in floating a few. I should study more about relative positioning in CSS.

Reflections on Repeated WODs

Most of the problems I encountered in finishing these WODs this week was that I don’t have a good handle on git branching without using IntelliJ or the GitHub application. It frustrates me to no end when I am trying to push a branch to my repo only to see the option to push it to master. I did learn that I could type in the name of the branch that I wanted to push the updates to.

After I finished my first attempt on the second WOD I reverted my changes to the master. I expected it to reload in IntelliJ but I still had my style.css file. In order to finish the WOD in a reasonable amount of time, I went in and copied the index.html file and ended up deleting the old repo and creating a new one. I pasted the index.html file in again pulled a local copy from the repo.

This method of copying files from the local repo and recreating the repo on GitHub works for these small projects. But I can see that as the projects get larger and larger I am hurting myself by not fully exploring the reasons why IntelliJ and GitHub seem hellbent on frustrating me with errors.

I made the following notes during my repeated attempts at the first WOD:

  • Had to search for named anchors.
  • Setting up a project in IntelliJ was different because it’s not a java file!
  • It’s like the tools IntelliJ and Github but they are not fucking working well together.

I made notes during my repeated attempts at the second WOD:

  • Gotta remember this bit of code: <LINK REL=StyleSheet HREF=”style.css” TYPE=”text/css” MEDIA=screen>
  • How do I do all headers instead of just h1 or h2?
  • How do I set images to be inline with text?
  • Switching back to the master branch gives me to the same style.css file. This should be gone when I switch back to the master branch.
  • Committing my push always goes to my master. I want to find out how to do it to the branch. That is where it needs to go.

And I made the following notes when I repeated the third WOD:

  • The instructions for this WOD do not specify all the necessary padding that is involved in getting these things to show up correctly. There are considerations for padding that are not addressed in the write up.
  • How do you center a div in the middle of the screen?
  • How about centering the thing vertically?
  • Also the links in the example are stylized with the rest of the text on the screen.

Suggested Reading

Programming for Visual Designers

Today I spoke to a group of advanced graphic design students in ART 467 at the University of Hawaii at Manoa. If you’re interested in having me speak at your conference/convention please contact me.

The Goal of my Talk

I am not going to explain how computers work in this talk.

You can watch a documentary on Youtube that explains how computers work. And these websites will show you how to code:

Today I want to get you excited about using computers to produce rather than consume. I want you to see that it’s not as difficult as other people would have you believe. But the most important thing is that you start today.

Are you qualified to give this talk?

I feel qualified to give this talk on Programming for visual designers because I nearly double-majored in Graphic Design and Computer Science. I took a lot of courses. I love the visual representation of ideas. Ocular input trumps all the other senses.


Video games got me into computers. Specifically the video game Doom. This was the first game with blood, insane guns, demons vs space marines, and a killer frame-rate. Some of my friends got head-aches while I got more pizza and pepsi. I recently read the book Masters of Doom: How Two Guys Created an Empire and Transformed Pop Culture. It’s a fantastic read if you grew up playing Doom.

You don’t have to be good at math to program computers. It definitely helps but it’s not necessary. The primary requirement of a programmer is the ability to sustain focus for a very long time. That and the ability to hold many details in your head all at once. This is why an interest in meditation is common among programmers.


Meditation strengthens your focus. I enjoy Zazen Meditation with emphasis on the book Zen Mind Beginner’s Mind by Suzuki Roshi.

Everything is a system. A model. A simulation. A learning experience.

Life and everything that makes it up are systems. Programming is about Systems and how they are designed. What can we learn from a simulation? How will a 3D model bridge behave in extreme weather conditions? How will our house look?

Enjoy breaking things down to their most essential parts, prioritizing that list, and getting the computer to perform that meaningful task.

If you want to talk to a computer programmer and keep their attention, focus on the following:

  • Precision
  • Efficiency
  • Forethought

This is why some of us are really into chess, or cooking, or astronomy. This is why Steve Jobs wore a black turtleneck and jeans every single day — he valued simplicity by removing the non-essential. Why waste 3 minutes picking out what you’re going to wear every single day? Systematize the regular, the mundane, and the trivial. And leave more room for Black Swans in your RAM.

MusicMaker v0.01

I’ve been coding a procedurally generated MusicMaker. Last night I booted up the program and recorded 10 tracks on my iPhone. The software works by creating a list of random notes in a musical key. Then it builds the sequence on 8 bar arrangements. The computer actually picks the notes it’s going to play.

If you would like to contribute to this project, please check out MusicMaker on GitHub.

Computers are like the microwave in Back to the Future 2. And they’re 1,000,000 times faster.

Life ticks by Microseconds

Our concept of time has been evolving since the invention of mechanized time in 1657.

If life feels like it’s speeding up it’s because it really is. Life doesn’t just tick by seconds anymore. There are new hands on the clock. Now, life ticks by microseconds.

A microsecond is an SI unit of time equal to one millionth (0.000001 or 10−6 or 1/1,000,000) of a second.Wikipedia


Computers are getting faster and faster.

Back in 1979, the first Apple computer used an Intel 8088 chip that maxed out at 0.75 Million Instructions Per Second at 10 MHz.

Now, the Intel Core i7 5960x processor in this futuristic-looking metal block is capable of doing 298,190 Million Instructions Per Second at 3.0 GHz.

Pro-tip for getting your ideas out of your head


Notepad + Tab = Invincible

Tabbed Systems modeling is a deceptively simple process that allows us to decouple, delineate, and decompose complex ideas into actionable items.

  1. Start with your problem.
  2. Write it out.
  3. Press return and insert a tab.
  4. List out the things you need to do to get this accomplished.
  5. For each of those items, break them down into simpler steps.
  6. Re-prioritize the list.
  7. Repeat ad nauseum.
  8. Get started on the top task.

Keep doing this and your problem will bend to your will. You’ll know what you need to do first. And that’s always the most important part. for Visual Designers

The Processing programming language is a subset of Java. You can download the entire programming tool from Batteries are included. There is no need to install anything else. You now have everything you need to create and run an interactive project.

Here’s the code to create a spaceship like the one in Asteroids. Just copy and paste it into your Processing project and run it.

float shipX;//initial location
float shipY;//initial location
float shipAngle;
float direction;//ships's direction
PVector location;//ships's location
PVector velocity;//ship's speeds
PVector accel;//ship acceleration
void setup() {
  size(500, 500);
  location = new PVector(width/2, height/2, 0);
  velocity = new PVector();
  accel = new PVector();
  shipX = width/2;
  shipY = height/2;
  shipAngle = 0.0;
void draw() {
  accel.set(0, 0, 0);
  if (velocity.mag() != 0) velocity.mult(0.99);
  //wrap function
  if (location.x&amp;amp;amp;lt;0) {
    location.x = location.x+width;
   if (location.x&amp;amp;amp;gt;width) {
      location.x = 0;
    if (location.y&amp;amp;amp;lt;0) {
      location.y = location.y+height;
    if (location.y&amp;amp;amp;gt;height) {
      location.y = 0;
  void drawShip() {
    // Translate ship origin
    translate(location.x, location.y);
    // Rotate ship
    // Display the ship
    triangle(-10, 20, 10, 20, 0, -20);
    // if the ship is accelerating draw a thruster
    if (accel.mag() != 0) {
    float thrusterCol = random(0,255);//thuster feature that appears behind the ship when accelerating
    fill(thrusterCol, thrusterCol/2, 0);
    triangle(-5, 22, 5, 22, 0, 40);
//moving the ship
void checkKeys() {
   if (keyPressed &amp;amp;amp;amp;&amp;amp;amp;amp; key == CODED) {
    if (keyCode == LEFT) {
    else if (keyCode == RIGHT) {
    else if (keyCode == UP) {
      float totalAccel = 0.2;                 // how much ship accelerates
      accel.x = totalAccel * sin(direction);  // total accel
      accel.y = -totalAccel * cos(direction); // total accel
cited code source

Global Game Jam

You could learn to code by watching other people code. Of you could attend the Global Game Jam and meet other people who are interested in making things. Share your favorites. And meet new programmer friends. Check out my blog post on the Global Game Jam to learn more.

Ready for Coffee and Code?

I’d like to help you get started. If you want to learn more about programming for visual designers contact me and let’s set up a coffee meeting. Aloha! Happy Processing!

Reflections on Testing with JUnit

junitLogoI’ve been coding a screensaver for the past 4 months. I honestly thought the project would be finished and out on the market two weeks after the main implementation of the code was finished.

Development was finished a month ago. But I can’t release it. I’m still reluctantly discovering new ways the screensaver could potentially crash on users’ computers.

I noticed that my screensaver would crash for any number of reasons:

  • The input images had been relocated.
  • The incorrect file format was used as input.
  • The user updated user preferences that broke the program’s execution.

I fixed those three bugs but there could be many many more.

Prior to writing this post I had only heard of Unit Testing. I had never applied unit testing to my projects. This week I had the opportunity to implement JUnit testing on a few programs.

“The ideal testing tool should give us confidence in our program exactly proportional to the confidence it deserves, so that we neither pass on a program containing errors nor continue probing a program which is error-free.

The Psychology of Computer Programming

Black box testing

JUnit allows programmers to specify tests on individual methods in their code. This week I applied JUnit tests to two Project Euler programming problems:

  • Summing multiples of 3 and 5.
  • Summing a sequence of Fibonacci numbers.

Completed WODs

Applying the JUnit code via IntelliJ’s built-in unit testing was very easy. The first time I attempted to clone a repo, create a testing branch, apply tests with JUnit, and push the changes I did it in 14 minutes and 28 seconds. Then I repeated the first WOD 2 times and managed to get my time down to 10 minutes.

I completed the second WOD in 10 minutes and 41 seconds. I did this WOD twice to exercise my ability to run the test configuration. The first time I ran this WOD I had trouble getting the test code to run. Every time I ran the code I would run the code execution. After doing some research online I found the keyboard shortcut to select which configuration to run. My second run of the second WOD was completed in 10 minutes.

This slideshow requires JavaScript.

Insights gained from WODs

After completing the WODs a few times I had the following insights:

  • Always run the edit configuration in Intellij with the keyboard shortcut: Ctrl+Option+R
  • All methods to be tested must be public or protected.
  • Always add to the tests folder.
  • Always run Inspect code on the test code.

Reflections on Hawaii’s 2015 Global Game Jam

GGJ_round_logoI turned my phone off as soon as I finished work on Friday at 4:30pm. My entire weekend was booked solid. I would be helping to facilitate  the Global Game Jam in Hawaii at The Sullivan Center at I’olani School from January 23-25, 2015.

I was inaccessible. I was busy. I was at the Global Game Jam.

The Global Game Jam is the largest game jam in the world.

The Global Game Jam (GGJ) is the world’s largest game jam event (game creation) taking place around the world at physical locations. Think of it as a hackathon focused on game development.

It is the growth of an idea that in today’s heavily connected world, we could come together, be creative, share experiences and express ourselves in a multitude of ways using video games – it is very universal. The weekend stirs a global creative buzz in games, while at the same time exploring the process of development, be it programming, iterative design, narrative exploration or artistic expression.

It is all condensed into a 48 hour development cycle. The GGJ encourages people with all kinds of backgrounds to participate and contribute to this global spread of game development and creativity.


All photos were taken by Gabriel Yanagihara

Lessons Learned

Video games are the quickest, most satisfying, hands-on way to learn how to code.

Video games give you instant feedback. There is no need to parse the output. It either does what you want it to do or it does not. You can see it if you programmed visuals. You can hear it if you’ve added sound. It’s an animal that comes to life like Frankenstein. The game’s not sure of its conception. But it’ll be damned if it will not tell you it’s arrived.


After work, I biked down to the Sullivan Center at Iolani School and was surprised by how many people were there. Last year we had about 12 participants. It was an older crowd. This year we had around 30. The group was a mixture of middle school, high school, college students, and adults there to complete.

Great ideas floated around the room. There was a buzz that wasn’t there last year. Most of the participants knew how to use Git!

The theme of this year’s jam was “Now what?”

At the beginning, the most important thing in game development is just showing up. Here are a few lessons I learned on my journey as an independent game developer:

  • Start from where you are.
  • Always do the shitty first drafts fast.
  • Compile, play, test, iterate.
  • Everything is built little by little.


No one needed help with their code. So I watched How to Draw a Bunny a film about Andy Warhol’s lesser known contemporary, Ray Johnson. I loved his obsession. Everything is a performance. Ray Johnson’s life became his collage. He remixed everything. There was no line between art and life.

I looked around and realized I was in the middle of a million Ray Johnsons. Everyone at the GGJ was remixing. Remixing code. Remixing visuals. Remixing ideas. It was beautiful. There is power in making video games.


We announced, “One more hour!” Then, “10 minutes!” And soon it was over.

Everyone uploaded their games to the Global Game Jam server and we gathered in the presentation room. Each team had 5 minutes to present their games. Some teams has finished and some learned that they had been too ambitious. A lot of people said it was their first game jam. Everyone was smiling.

I got to announce the winners.

I had the participants drum on the tables to build up the excitement. I shook hands and congratulated the teams on successfully creating their playable games in 3 short days. I teared up a bit as I handed out the mini 3D printed joystick trophies.

2015 Global Game Jam – Hawaii Winners

  1. Best Overall#Awkward
  2. Best TechnicalDoc2Game
  3. Best VisualsLil’ Gitz’ Lootin
  4. Most CompleteJigDraw

Are you interested in participating next year?

Contact me and I’ll email you a reminder to register next year.

Reflections on Coding Standards

strongly-typed-300x210Last night I had drinks with my friend. His wife is pregnant and I wanted to celebrate the good news over a few beers.

We talked about the unknowns of impending fatherhood. And the conversation quickly transitioned to fitness and staying in shape.

My friend is hardcore. He runs multiple marathons a year.

He’s found his drug and he wants to share it with me. I’ve been resistant for a long time. But I started working out. I like swimming. The solitude is bliss.

I thought he’d be happy to hear that I’d taken up an exercise that I enjoyed. Turns out, working out 3 times a week is not enough. He said, “Dave, exercising is great and all but you need to be training toward something.”

The best way to keep your workout steady is to commit to a big event in the future.

“You gotta have a goal. Because everyone gets sick. But when you sign up for an event, a challenge, a marathon you either show up and compete or you get a DNF.”

The dreaded DNF.

“Your friends will say, what happened? They’ll shame you publicly for committing and not coming through on your promise. They’ll say, ‘What happened? Did you get injured?'”

I stopped him mid-sentence and said, “Have you heard of Athletic Software engineering? I never want to get a DNF.”

Coding standards

Coding standards promote readability. Coding standards are the rules that programmers agree to so their code can be shared and understood quicker and easier. Coding standards exist to enforce style consistency.

IntelliJ automates style consistency

IntelliJ IDEA does everything. “It slices, it dices, it splices your multimedia!”

Not only does IntelliJ support configuration management, it formats your code for you.

My favorite add-on for Firefox is called DownloadThemAll! It’s a add-on that allows users to use the computer’s regular expressions to parse a web page and download the content they want from the site their on. IntelliJ automates tedious behaviors like DownloadThemAll automates downloads.

Strongly typed Java will save you

Java has a lot of interdependencies. I used to think that was a bad thing. Not only does strong typing prevent me from mixing up my datatypes and calling the wrong methods on the wrong class, strong typing gives the IDE the ability to run checks on my code automatically.

Because of strong typing my IDE knows when I am running potentially risky code and prompts me to surround the code in a try/catch block and it gives me to exceptions that the code could potentially run into.

Java has strict typing allows for features like CheckStyle to go through my code and base things off of types. This way I can not only ensure that I won’t run into any errors at compile time, it also saves my code from exceptions that may be thrown by code that does not maintain its state so well.

The ability for the Java compiler to check all of the options that might be thrown is a godsend. Static typing allows me to write code that can have try / catch methods. This saves me at runtime. A Java method that may preform some behavior  that I do not want can be prevented because Java has me covered. This array accessor may be out of bounds. No worries. I have an ArrayIndexOutOfBoundsException.

Reflections on WODs finished

This week I forked a repository, ran it through CheckStyle and pushed it to GitHub.

This first run through took over 18 minutes.

I am still getting stuck on the menuing system in IntelliJ IDEA. I came up with a list of lingering questions and lessons learned from this experience.

Lingering Questions:

  • What does “can be package local” mean?
  • Using ctrl+space to find the package with this feature is great.
  • I am not certain what I am meant to write after a @param or a @return.
  • What is the keyboard shortcut to run “Inspect Code?”
  • How do you know it wants an @Override annotation?
  • What is the keyboard shortcut to remove a whole line?
  • How do I save my master password to github inside of IntelliJ. I don’t want to have to put it in every single time.

Lessons learned:

  • Cmd + /  to remove the one line comments.
  • Code > Optimize Imports to convert wildcard imports into fully qualified import statements.
  • I want to learn how to select code and have it get surrounded with multi-line comment tags.
  • Shift + F6 allows me to refactor and rename variables.
  • Start doing a new Java Doc comment and it will fill out all of the @params and @returns for you.

Reflections on WODs done multiple times

I managed to shave 6 minutes off of my initial time.

I am learning that I can import projects directly into IntelliJ IDEA from the project panel that shows when IntelliJ starts up. I also used some of the keyboard shortcuts this time. I believe I saved some significant time by using the Refactor>Rename shortcut Shift+F6.

I also saved significant time letting IntelliJ create my Java Docs for me. Instead of trying to update the existing Java Docs, I created a new set right above the method and IntelliJ did it for me.

Major lesson learned

Don’t fight the IDE. Dance with it.

This slideshow requires JavaScript.

Reflections on Java Coding

strongmanSecond nature Software Development

My dad was in the Navy. I asked him to tell me the single most important thing he learned. He said, “I learned how to fold my socks the right way.”

In the Navy there is only one way to fold your socks. Any other way, and it’s wrong. I believe they folded their socks this way so that there could be no other way.

Being forced to fold his socks this way simplified the process, removed the alternatives, and made him fast. He still folds his socks the same way to this day.

Why do we drill?

We run the drill so the process becomes second nature.

Soldiers run drills to take their guns apart, clean them, and put them back together again. The process needs to become second nature. Second nature means automatic. Automatic means you can do it without looking at the keyboard. Automatic means you can do it in your sleep.

Athletic Software Development

Practicing the right way takes it off the table. Practicing the right way removes it from the equation. Setting up a repository on GitHub, cloning it to the Desktop, committing the changes, and pushing the repository to GitHub should take mere seconds.

My first time took 45 minutes.

Once the process has become muscle memory, the process fades away and programmers can focus all of their energy on  their code. They no longer think about the set up. They just do it and move on.

This slideshow requires JavaScript.

What I learned about IntelliJ IDEA

IntelliJ IDEA has tons of keyboard shortcuts. My favorite shortcuts are “psvm” and “sout.”

  • pvsm – creates a public static void main method
  • sout – creates a System.out.println method

What I learned about Java

I have been programming in Objective C and PHP for too long without switching languages. It pays to switch languages often to get accustomed to quickly switching between ways of thinking. I am planning to make a list of the ways to incorporate Java Collections into my programming repertoire.

What I learned about Athletic Software Engineering

CrossFit has the concept of a “Workout of the Day” (WOD), which is a short duration, high intensity set of exercises.  In this class, I adapt this concept to software engineering education.  My hope is that by focusing on the speed with which you implement high quality solutions to short development problems, you will:

  1. Gain fluency with your tools and technologies.
  2. Gain the ability to focus and enter the “flow state” during software development.
  3. Become more productive and useful in “bursty” development environments like startup weekends.

I believe that athletic software engineering is essential to simplifying/eliminating the process of collaborative software development from the process of actually writing working code. Some kind of code management is essential these days. Why not take advantage of it? The real problems come up when the tools get in the way of the output.

I believe that by practicing athletic software engineering more time can be spent tackling complex algorithms. Less time can be spent struggling with the configuration management tools.

Reflections on Completed WODs

  • WODs that can be completed in record time have little teaching value.
  • WODs that can be completed in record time reflect that the skills that have been mastered.

Reflections on WODs I did not finish

  • WODs that cannot be finished pinpoint weaknesses.
  • WODs that cannot be finished highlight areas of improvement.

Reflections on process of doing WODs repeatedly

I’ve been reading Ryan Holiday’s book “The Obstacle is the Way.” Holiday retells stories of historical figures that turned their obstacles into strategies for improvement. WODs turn obstacles into opportunities. I plan to continue working on the WODs I could not complete to pinpoint my weaknesses.

“The impediment to action advances action. What stands in the way becomes the way.” – Marcus Aurelius