Webstock: John Gruber, In Praise of Pac-Man

This week I’m at Webstock, a lovely conference in New Zealand. I’m doing my best to write little blog posts about the amazing presentations. Please forgive any typos, etc. If you’re here too, come write a haiku at Automattic’s booth.

John Gruber, well everyone knows who John Gruber is. If you don’t, please hand in your internet license.

Pac-Man is a maze. The maze is filled with dots. You eat all of the dots, without being eaten in turn by the monsters changing you. There are power dots in corners which turn the monsters into ghosts you can eat. Everything leads to points.

It was invented by Toru Iwatani. At the time, coin-operated video games was a nacent industry. Game operators converged at a conference every year to choose new games to buy. Pac-Man never stood out as a hit game. Until it did $1 billion in the first few years, more than Star Wars did in ticket sales.

Buckner & Garcia introduced a song in 1982 called “Pac-Man Fever.” It made it to #9 on the Billboard charts. Gruber remembers being able to play Pac-Man at the grocery store and an entire arcade of Pac-Man machines. It was the first game to reach this level of success.

Gruber ascribes Pac-Man’s success to four characteristics:

  • Fun
  • Simple
  • Obvious
  • Challenging

Mr. Do!, on the other hand, was an incredibly complex game only a few people at Webstock remember. For instance, when you eat the snack in the center of the screen, the screen changes color, some more bad guys come out that are more aggressive, and then maybe you get another life. Gruber still doesn’t know what the best technique is for winning the game.

Mr. Do! was a popular arcade game, but no one thought it was important enough to track how much money it made. Pac-Man was much more than a popular arcade game. “Everything in Pac-Man was iconic.”

The monsters in Pac-Man had their own names and unique personalities. “Blinky”, the red monster, persistently chased Pac-Man. He was the one most likely to kill you. “Clyde”, on the other hand, was a dumb oaf.

Pac-Man was popular because it rewarded obsessiveness, but Gruber argues it was financially successful because it was a game everyone could get. You didn’t have to be a gamer to know how to play it.

The original Macintosh was similarly successful. It challenged the status quo of interacting with a computer through the command line by offering an interface that was more intuitive. Gruber thinks Macintosh designers inherited many ideas from video games of the time. There was even iconography (e.g. a bomb on the restart modal) you’d expect to see in a video game, not an operating system.

iOS takes the simplicity even further. All of your apps live on your homepage. You’re either on your homepage or in an app. “Android is Mr. Do!” because there’s additional levels of complexity and conventions you need to learn.

Gruber’s advice: if you can’t describe your project in one sentence, you’re not working on a simple project. “Ten pounds of effort on one simple design element will have way more impact than one pound of effort on ten design elements.”

Webstock: Chris Coyier, The Modern Web Designer’s Workflow

This week I’m at Webstock, a lovely conference in New Zealand. I’m doing my best to write little blog posts about the amazing presentations. Please forgive any typos, etc. If you’re here too, come write a haiku at Automattic’s booth.

Chris Coyier is a humorous man. He was also a designer at Wufoo and now does CSS Tricks and CodePen. Today he’s covering:

  1. Getting started designing.
  2. Local development environment.
  3. Working on a team.
  4. Preprocessing saves happiness.
  5. Testing, testing, testing.

Chris designs in Photoshop, to the faux-horror of everyone in the room. Photoshop is more “left brainy” than a CSS editor. It affords more creativity. WebZap gives you buttons and other web patterns to use in your mockups.

The blank canvas is a challenge for every profession. In the design world, you might:

  • Toss down a texture.
  • Draw some shapes.
  • Avoid making wireframes.

As soon as you have a Minimum Viable Design in Photoshop, though, take it to the web. Making it perfect in Photoshop just means you’ll have to do the work all over again.

“Let’s change the phrase ‘designing in the browser’ to ‘deciding in the browser’.” – Some Guy I Missed

Don’t work live on a server. Just don’t.

Instead, you can and should develop in a local environment. If you’re building for WordPress, MAMP is a good option to provide everything you need to run a web server.

Two tools to demystify version control: Github for Mac and Tower.

Chris is all about the Sublime Text. In version 3, being able to jump to files is amazeballs. Emmet does all sorts of crazy HTML auto-completion.

Some advantages to using a preprocessor like Sass:

  • DRY awesomeness.
  • Mixins allow you to define named functions, and use those functions elsewhere in your Sass. Everyone screws up CSS3 vendor prefixes. Mixins allow you to only screw up (and fix) in one place.

Sass plus Compass gives you an amazing number predefined mixins.

Editor’s note: All of this frontend hotness is blowing my mind. I didn’t even know.

Preprocessing also greatly simplifies media queries. And it makes writing CSS fun again.

CodeKit is a Mac app that automagically preprocesses all of your shiz. It will inject style changes into your browser while you edit. Great for when you might need to style web apps with various states. It can also losslessly compress any image assets used in your site.

The easiest way to make a website faster is to load less stuff. If you can’t remove it entirely, you can concatenate and minimize.

Testing is a big PITA. BrowserStack lets you test in a variety of browsers from the comfort of your own home.

Webstock: Miranda Mulligan, Your Survival is Designed

This week I’m at Webstock, a lovely conference in New Zealand. I’m doing my best to write little blog posts about the amazing presentations. Please forgive any typos, etc. If you’re here too, come write a haiku at Automattic’s booth.

Miranda Mulligan (hey, I know her!) helped take the Boston Globe through a responsive redesign, and now is Director at the Knight Media Lab at Northwestern. She’s the first in five generations of women to not make clothing for a living. Clothing matters; what you wear is an indicator of what you value.

“Journalism needs to be a more thoughtful dresser.” Some large news organizations have very good UX designers, and many more have very good editorial designers. But news design has stagnated, and the news industry needs more design-thinkers.

When Miranda talks with publishers, they’re fascinated by responsive web design. They don’t have many designers in their organization though, and design comes at the end of the project workflow.

“Technologists are winning at media innovation.” Twitter is reinventing breaking news situations. The Evening Edition gives you a summary of what’s happening at the end of every day. Narrative Science turns big data into readable stories. Why aren’t media companies inventing these new products?

Webstock: Aza Raskin, Design is the Beauty of Turning Constraints Into Advantages

This week I’m at Webstock, a lovely conference in New Zealand. I’m doing my best to write little blog posts about the amazing presentations. Please forgive any typos, etc. If you’re here too, come write a haiku at Automattic’s booth.

For the last couple of years, Aza Raskin (@aza) has been working on helping bring design to solving health challenges. Solving difficult problems happens by changing how you ask the question. The big meta problem of design is figuring out how to ask the right question.

In 1959, Henry Kramer had a dream that people should be able to fly under their own power. He put up a challenge of 50k pounds to anyone who could build a device for flying a couple meters above the ground between two points. Double the award for someone who flew across the English Channel. No one could solve it.

Paul Maccready in 1977 said that most participants were trying to solve the wrong problem. The real question was “how can you build an airplane to fly under human power that can be repaired in hours?” Other participants would build an airplane in 12 or 18 months, try to fly it once, and it would break. Paul was able to solve the challenge in 8 months by reframing the question.

“Science is in the business of embracing failure because it’s only through failure that we learn.”

It’s not about thinking outside the box, because that means there are no constraints. Instead, it’s about figuring out which box to think inside. “Constraints give you permission to think about something smaller.” Architecture provides perfect examples of thinking inside the box because you often have to deal with specific physical requirements:

The origin of the 140 character limit for text messages is also one of constraints. The person who made the determination wrote out everything you might communicate with a typewriter. Then he measured each line.

Creativity comes from constraint, and asking the right question is the most important part of design. Two more important ideas:

  • Perceptual scope – How do you see things (to what degree do you see the forest vs. the trees)
  • Conceptual scope – How you classify what you see (e.g. of a list, which items are furniture)

On the science of this, you’d look at how obstacles change someone’s perceptual and conceptual scopes. Generally, thinking of challenges as obstacles to overcome makes people think broader and more creatively.

If you encounter a detour on your drive home from work, you’re more likely to pick something new to eat for dinner. Getting out of your habits is very important. Adding an obstacle changes your perceptual scope.

Webstock: Jason Kottke, I Built a Web App (And You Can Too)

This week I’m at Webstock, a lovely conference in New Zealand. I’m doing my best to write little blog posts about the amazing presentations. Please forgive any typos, etc. If you’re here too, come write a haiku at Automattic’s booth.

Jason Kottke is a blogger and a web developer. Kottke.org is a blog he’s been publishing since 1998. Today he’s talking about something else.

1. How do you decide to do something?

When one of his kids was born, lots of friends and family took pictures for tweeting, Flickr’ing, and generally posting on the web. Most interactions with those images came in the form:

  • Facebook: Like
  • Twitter: Favorite (with a star) and Retweet
  • Flickr: Favorite (with a star)
  • Vimeo: Like (with a heart)
  • Tumblr: Like (with a heart)

Three years ago, when Kottke started thinking about this, most companies just tucked the data away. It was/is hard to access again by users. “If you’re favoriting things to save important family memories, this is a problem.”

According to Stephen Johnson, good ideas come in the form of a “slow hunch.” One example: Tim Berners-Lee’s invention of the World Wide Web. After college in 1980, Tim coded a hyperlinked tool for academics to share knowledge. It didn’t really take on. In 1989, he hatched a plan to build a more ambitious version of the first tool. He took a vague notion and iterated on it, over and over.

Kottke’s first slow hunch: blogging software. He started Kottke.org by editing static HTML files. Since the time he switched to MT in 2002, he’s thought about writing his own blogging app.

The second slow hunch: streams. When the web first began, the NCSA logged everything that was new on the web. People would email the NCSA anytime they changed something with their website. And the NCSA would post the newest stuff at the top, and bump the older stuff down.

“It’s weird that we read backwards in time on the web, and forwards in time everywhere else.”

2. Stellar, something he decided to make

Stellar is a web app that collects all of your social media favorites in one place, and follow your friends’ favorites. At this point, 15k users have signed up. 2-3k are active users.

Kottke thinks of it as a lightweight blogging app. Every time you favorite something, it gets blogged to the stream. What’s surprising to him is how useful it is as a tool for finding things you didn’t know you’d be interested in. “The delicious cream off the social media churn.”

Stellar is hosted on two EC2 instances with RDS as the database. Software: Ubuntu Linux, PHP, Memcached, CodeIgniter, jQuery, Typekit, Mercurial, and MySQL (RDS). Everything is free, or very cheap, and way easier than it was five years ago.

3. What he’s learned, and the current status of Stellar

Another important stack: the meat stack. There are plenty of articles on how to get the most out of yourself and collaborators on HackerNews, Stack Overflow, etc. Kottke’s advice:

  • You can do it. When he started, there were many things he didn’t know: how to use an MVC framework, how to memcache, etc. Kottke started making Stellar, and learned along the way.
  • Sit in the chair and do it. Making something involves actually making something.

Design turned out to be harder than programming. One sign of success: if he got sidetracked by some new content while working on a feature, then he must be doing something right.

After two and a half years with 25-30 hours / week towards it, Kottke thinks Stellar is about 20% done. Some work to do:

  • Convert to Twitter’s new API request requirements.
  • There are almost 18 million favorited items in Stellar’s database, which is not insignificant. Database server needs to be upgraded or rethunk and it will be costly.

“How can I build a business on the shifting demands of corporate APIs?” Kottke hasn’t committed to Stellar since July 31st, 2012 because he’s been stuck. He was that guy, super stoked about what he was building, until about eight months ago. Only time will tell what will happen with Stellar.

Webstock: Clay Johnson, Industrialized Ignorance

This week I’m at Webstock, a lovely conference in New Zealand. I’m doing my best to write little blog posts about the amazing presentations. Please forgive any typos, etc. If you’re here too, come write a haiku at Automattic’s booth.

Clay Johnson (@cjoh) started out with a comparison of knowledge. Most of the room knew the name of at least one Kardashian, but most didn’t know the child poverty rate in NZ. How can we build better communities if we don’t know these things?

In 2011, the obesity rates in America are so bad that they had to adjust the map for comparing states.

“Pizza tastes better than broccoli.” We tend to eat more of what tastes good to us, as opposed to what’s good for us. Evolution hasn’t caught up to agriculture, let alone industrial agriculture.

We’ve created huge multinationals produce cheap, tasty calories for us. The power of industry means that complex food items (e.g. Pizza Hut with a variety of crazy toppings) are more easily accessible than simple ones.

“Who wants to hear the truth when they can hear they’re right?” We’ve also created media companies that affirm what we know, as opposed to informing us of what we need to know.

Politics and media is A/B testing and optimizing for reader clicks. “Opinion tastes better than news.” How do inform a society when everything is optimized for business needs? The AOL Way is a classic example of doing it wrong. Editorial integrity is last on the list.

Something strange is going on in America, and Clay thinks it’s because of the media. Up until 1996, the voting distribution across America was mostly purple (e.g. red and blue mixed). Since 1996, voting distribution has become increasingly polarized. Some areas are bright red and others are bright blue. Clay argues that it correlates with the rise of television networks. Similarly, Google search results affirm what question you’re asking (e.g. “democrats are socialist”).

Our definition of ignorance has changed. Ignorance now can be caused just as much by the consumption of information as lack thereof.

“We need to manage our information intakes like we manage our food intakes.” Some ways you can manage your information diet:

  • Be a conscious consumer. Clay uses Rescue Time to track which websites he’s viewing. At the end of the week, review what you’ve been looking at and consciously think about whether it’s how you actually want to spend your time.
  • Schedule regular tasks like email, Facebook, and browsing the news.
  • Go local. Pay more attention to what’s going on in your neighborhood instead of what’s happening nationally. You probably aren’t going to have an impact on the international child poverty rate, but you can definitely have an impact on local child poverty.
  • Be a producer instead of a consumer. Stop using your iPhone as an alarm clock. The moment you check your email in the morning is the moment you start reacting to things. Clay has a goal of writing 500 words before 8 am.

We as a community need to get closer to the source material. We need to demand of journalists that they show their work. Data is what enables us to create a more honest media.

Most importantly, work on stuff that matters. Every moment in history there’s been a hyper-literate class. Computer illiteracy will be like book illiteracy in ten years, and there will be a lot of people left behind. Lawyers are transferring their power to developers. When Mark Zuckerberg creates a new feature on Facebook, he’s wiring society. Features, like laws, dictate how we operate.

#techrakingcir: The Future of the CMS

Today, I’m down at Google in Mountain View at Techraking, a gathering of technologists and investigative journalists. It’s been super inspiring because of the fresh to me perspectives — I’d love to help Portland media outlets with projects like those I’ve heard about.

At lunch, I learnt I was to lead a small group breakout on “the future of the CMS.” To keep the discussion going, we started out by brainstorming the things we liked and want to improve our respective software, and then did a roundtable to identify our six month personal goals.

Some things people like about their CMS:

  • Drupal done well is easy to use; there are a ton of modules
  • Affordability, open source is cheap
  • Community to work with
  • Many different homepage templates to choose from depending on the stories of the day

What people would like to improve (lots of conversation, as expected):

  • Data portability
  • More headless; produce output other than HTML
  • Scalability, faster when many people are working in the admin
  • Less steps for completing common, simple tasks
  • Integration with story budgeting, calendaring; API for story flow
  • Magical WYSIWYG editor; auto-save that works; track changes
  • Support structured data / semantic markup
  • Customization for story layout
  • Small pieces loosely joined; better integration with other services

Given the short notice, I thought the breakout session went quite well. About twenty people showed up. In terms of what worked:

  • Small group discussion; knew enough backgrounds to call out different people to talk
  • Noted salient points on the whiteboard as a way of plotting direction
  • I enjoyed the “what are you going to work on in the next six months” takeaways at the end

Next time, we should:

  • Figure out the location ahead of time so we don’t waste time finding it
  • Have people introduce themselves if they haven’t spoken yet
  • Every fifteen minutes, have something for everyone to participate in so people don’t check out

Upcoming talks: WordCamp Phoenix, PDXWP, and CMA NYC

Over the next couple of months, I’m looking forward to speaking at a few different events.

At WordCamp Phoenix on February 25th, I’m presenting “Mastering WordPress Development.” The title lends itself to a number of discussion topics, possibly including coding standards, how to perform migrations, writing bin scripts to manipulate lots of data, participating in open source projects, how to review your code, common mistakes we see at WordPress.com VIP, etc. If you have opinions as to what I should cover, I’d love to hear them in the comments.

On February 27th, Mike Bijon and I will be taking the Portland WordPress Users Group through using Git (and SVN) for version control and working within a team.

At CMA NYC March 18th through 20th, I’ll be leading three sessions (one per day):

  • “I Want To Learn WordPress – An Introduction To Key Concepts” – All of the basics you need to get started, including the WordPress interface and key concepts like themes, plugins, PHP and MySQL, and how to choose a good web host and design for your site.
  • “Hacking WordPress In The Newsroom” – How to take your WordPress development to the next level. We’ll review version control, coding standards, performance and optimization, debugging, and other best practices.
  • “Making The Switch To WordPress” – Everything you need to know about switching to WordPress from CMS X. Well, most everything.

Shaun, Erica, and I will also be hosting a mini-Happiness Bar for a few hours on Monday to help attendees with all of their WordPress questions.


Notes from livecoding the ONA11 website

This is a quick post I’ve been meaning to do about the work we did this year on the ONA11 conference website.

Background: last year, I was late on getting a conference pass and ended up volunteering for an entire day in the student newsroom. ONA’s student newsroom produces stories, video, and other coverage related to the conference. I had so much fun that I volunteered to do it again this year. I planned to work on it over the summer, but 90% of the work ended up being done in the last week.

The goals for the website varied depending on the context:

  • Before the conference, the focus was convincing journalists to purchase tickets and attend.
  • During the conference, there are two audiences: those who are physically at the sessions and those who want to participate virtually. The former probably want a backchannel for conversation and capturing the highlights, whereas the latter probably want to participate in realtime as much as they can.
  • After the conference, everyone wants to access a historical archive of the content presented in sessions, either to catch those they missed or find the link they heard referenced.

With this in mind, we worked on making the website dynamically reflect these needs. It was helpful, although somewhat distracting from the experience, that I was working on the website during the entire conference.

What worked this time:

  • Session pages as a custom post type. This gave us a structured database of all sessions and allowed us to easily build a session listing, etc.
  • Using Posts 2 Posts to associate posts and presenters with session pages. Our realtime curation crew could easily publish content from the WordPress admin, associate it with a session, and have it automatically pulled into the session page. Furthermore, every presenter had a dedicated profile page and their information could automatically be pulled into other contexts on the website.
  • Auto-showing the livestream player on an individual session page based on timestamp. Every session was associated with a track and I had a bit of logic to pull in the correct livestream based on current time, session start, and session end.
  • Showing the session updates in reverse chronological order during the event (because the user is most likely refreshing the page and wants the most recent updates at the top) and then flipping to chronological order 15 minutes after the event.
  • Leveraging the Zoninator on the homepage for featured stories and events. Editorial loved that they could have full control over which stories were highlighted. WordPress normally lists headlines in reverse chronological order, and developers hack this with “featured” categories, etc.
  • Post formats presented content exactly as it was intended to be presented. I was particularly proud of my gallery implementation, even if there weren’t the visuals to go with it.

Next time I’d like to:

  • Get started earlier so these features are actually fleshed out before the day of.
  • Build an interface for posting updates from the session page so it’s brain dead simple to update (no associating with session post, choosing post type, writing a title if you don’t need to, etc.)
  • Allow for “featured” session updates a la NY Times Editors’ Picks for commenting.
  • Guest session update submissions with a moderation queue.
  • Live update the session page so it’s essentially liveblogging with rich media.
  • Show the bylines/avatars for people covering the event, so you know how well it’s going to be covered (e.g. one person versus five people participating)
  • On the all sessions page, show the number of updates an event has, whether it’s currently live/being livestreamed, etc.
  • Order content on the single session page based when it was published (e.g. you can assume everything 30 minutes after the session is coverage of it, whereas during the event is realtime updates on it).

Lastly, I have one more idea I’d like to pitch: a way of indicating who you want to meet at the conference. Every attendee that registers get access to a page on the website listing every other attendee. Then, they can go through and indicate whom they want to meet at the conference. It’s a double win; you get to notify who you want to meet that you want to meet them, and you get to see in advance who wants to meet you.

For archival purposes, I’ve captured a gallery of screengrabs from the website too.