daverupert.com

APT Features that Web Tooling Craves

Wed, 04 Jan 2017 00:00:00 -0600

Part of my switch to the Bash on Ubuntu on Windows (can we call this “Winbuntu”?) means that I’ve been using apt on a regular basis. The Advanced Packaging Tool (apt) is a package manager for installing Linux packages, not too different from web tool package managers like bundler, gem, npm, yarn, bower, etc. I’ve grown to really appreciate the design decisions that have gone into apt and I’d like to bring up a few killer features inside apt that I think web tool package managers are missing:

Update and security notifications
Package size confirmation
Autoremove notification

Update and security notifications

Every two weeks or so when I log into bash I get one of these messages:

66 packages can be updated.
37 updates are security updates.

Out of ~532 packages, 66 needed updating. More importantly 37 of those are security updates! This simple notification nudges me to keep my system updated and more secure. I wish npm or bundler had functionality like this for web projects. It would be ideal for our package management systems to encourage better security by default. There is npm outdated and bundle outdated but there are two deficiencies with web tooling: one is that in my experience wholesale update on projects rarely goes smooth and two, to my knowledge there is no way flag the difference between a regular update and a security update.

I understand features like this aren’t easy and probably exacerbates existing performance problems but this is something I’d like to see in web tooling. Maybe the interim is making sure our editors nag us about outdated dependencies like this Atom plugin.

Package size confirmation

Whenever I install a package using apt install, I get a confirmation dialog about the size of the package.

~$ apt install cowsay
Reading package lists... Done
Building dependency tree
...
After this operation, 90.1 kB of additional disk space will be used.
Do you want to continue? [Y/n]

This kind of information is valuable. 90kb just to make a cow say stuff in my command line! This would be especially useful on the web where every kilobyte matters. Not every package or gem is served to the client, but the default state of web tooling right now is ignorance. I don’t find out about the weight of dependencies until after I’ve required, preprocessed, transpiled, postprocessed, webpacked, tree-shaken, and served. It’s way harder to unearth deeply buried problems.

Every install or update inside apt reports the size of the changes on my system. I suspect this reporting occurs in part because of Linux’s tendency to run on extremely variant, low-power hardware with storage and memory constraints. Sound familiar? Those are the same constraints of the web! But the web also deals wtih hyper-flaky and latent cell phone towers mixed in. With apt, the size of the packages I’m installing is always top of mind.

Recently, Addy Osmani added Performance Budgets to Webpack and I think these types of features are invaluable. Having our tools continually monitor basic performance like filesize reduces the collective developer ignorance about what these black boxes are spitting out and we in-turn send to the client. Unfortunately, the decision was made to turn this off by default because it was too verbose.

Autoremove notification

There’s other helpful information when you apt install, it checks the state of your pages and determines which packages are no longer in use:

Reading state information... Done
The following packages were automatically installed and are no longer required:
  cpp-4.8 gcc-4.8 libasan0 libboost-iostreams1.58.0 libc-ares2 libcloog-isl4 libgcc-4.8-dev libisl10 libstdc++-4.8-dev
  libv8-3.14.5
Use 'apt autoremove' to remove them.

Using apt autoremove I can begin cleaning up my system. This maybe happens inside the miles of logbarf in my console, but it’s not clear and I’d wager the apt autoremove notification is a stronger mechanism/reminder to get people to clear out old/unused packages. Less legacy code that could sneak into the dependency graph.

Smarter defaults in software design

These three microfeatures are examples of great design decisions in software. Smart defaults like these can nudge users towards better decision making and behaviors. It’s called “Libertarian Paternalism”; give people choices, but make the defaults beneficial to the user. And if we developers have tools that help us make better products, that will translate to users of the products we’re building.

And here’s a hilarious joke a cow once told me:

 _________________________________________
/ Q: What did the cow say about your slow \
\ website? A: It's UDDERly useless.       /
 -----------------------------------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

Dave Builds a PC

Fri, 16 Dec 2016 00:00:00 -0600

While waiting for the updated specs on the laptop I said I was going to buy in the #davegoeswindows finale, I put it together that I could build a custom PC “gaming rig” with VR capabilities and buy a VR headset for considerably less money than the laptop + core combo. Once I realized this, I started getting very excited about the idea of building my own PC.

Custom building a PC for the first time

The last PC I bought was in 1999; a Gateway 133Mhz Pentium with 16MB of RAM. I did a few upgrades, but back then the peak of customization was an ethernet card and a 32X CD writer. My new desktop computer is a water-cooled, quadcore 4GHz Core i7-6700K, 32GB RAM, an MSI Armor GTX 1070 graphics card, sitting in a matte white NZXT S340 Elite case with a large tempered glass window. It’s beautiful and fast. Though it’s a very minor piece, the chrome heatsink piping on the graphics card reminds me of a Shelby Cobra and I love it. Ugh. So nice.

Under the tutelage of my friends Zach, Danh, and countless hours of YouTube videos¹ I began wrapping my head around how to build a PC. Trying to stick to an arbitrary budget of ~$1600 I used PCPartPicker to build my PC parts list before purchasing. It wasn’t long until boxes of computer parts started stacking in my office and were ready to be assembled.

It's happening!!! pic.twitter.com/J9YdnttMDi
— Dave Rupert (@davatron5000) November 23, 2016

Assembly didn’t go perfectly smooth. Following the instruction manual I mounted the motherboard to the case before attaching the CPU and cooler. This is not how the pros do it. They attach everything before mounting. SO that meant I didn’t attach the cooling block perfectly. And I accicentally used the wrong screws and stripped the threading on the radiator. And I didn’t plug in one of the RAM sticks all the way. And every time I’ve seen someone holding a CPU, they were in a white room with a hazmat suit on, yet based on the instructions I’m supposed to use my cheetoe fingers? Am I doing this right?

But that wasn’t even the hard or confusing part. Once you get all the parts in the case it’s time to wire up all the connections. The directions here are cryptographic technobabble. There are dozens of cables and you need to consult the motherboard manual like a Rosetta Stone to decipher where to attach them. It’ll be easier next time around, but it definitely wasn’t intuitive or clear.

Eventually everything appeared to be plugged in to the correct place, I attached the beatiful glass window to the case and pushed the power button…

Powering it up for the first time

There’s an immense sense of accomplishment seeing your computer boot to BIOS for the first time. The lights come on and it beeps and boops. It comes to life! You built a computer. From there it only took a few minutes to install Windows 10 from a thumbdrive.

With Windows installed the first thing you need to do is update drivers for your motherboard and graphics card. This is great except you don’t have Wi-Fi enabled yet! Once you figure how to get on the internet to the computer, you have to guess which zip file to download from not-great websites. This isn’t fun but it’s okay. Still riding that initial high.

Over a half-hour and few reboots, I got all the drivers updated for my motherboard, GPU, and the onboard-WiFi working which meant I could move on to the next step and install games. It wasn’t long until problems started manifesting.

Problem #1: Loud Fans

Now that my computer was up and running, the fans were whirring at a loud hum. I started to worry that I wouldn’t be able to concentrate on work or podcast on this machine and that I had made a huge mistake.

My motherboard lets me control the fans but no matter what I did they kept whirring away. Upon further inspection, my case fans weren’t actually attached to my motherboard! Ah-ha, my first mistake! They were plugged into a molex connector straight into the power supply. I opened up my computer and attached the case fans to the CHA_FAN (“chassis fan”) inputs on my motherboard. Now my motherboard automatically scales up fan speeds. At idle, the only fans running are my radiator fans that cool my CPU. They produce a small whir, but it’s not offensive.

I breathed a sigh of relief.

Problem #2: Blue Screens of Death

With that solved I figured it’d be a good time to take the new graphics card out for a spin. I downloaded some games I’ve been waiting to play². I had tried some of these games on the Surface Pro 3, but they ran at ~10FPS and were unenjoyable. This system should have no problems playings games on “Ultra” settings… or so I thought…

On my maiden gaming voyage, after about 20 minutes I got an infamous Blue Screen of Death. It was a bummer, but not unheard of. So I tried re-updating drivers. More Blue Screens. After three days of somewhat random blue screens I started getting dismayed.

Like any engineer, I knew I needed to isolate the problem by finding a way to trigger the crash. Each of the components I installed could be malfunctioning. I started with the CPU, ran a few benchmarks to try and trigger a crash; nothing.

I moved on to the GPU. I downloaded 3D Mark Firestrike and ran the GPU benchmark which successfully triggered a crash after ~8 minutes. I peered through the window on my computer at the graphics card looking for answers. Looking closely I noticed one of the 2-pin connectors connected to the graphics card was ever-so-slightly poking up. I didn’t plug it in right! So I opened the case, plugged in everything again, found a couple more un-sturdy plugs, and went ahead and fixed the crooked post on my cooler mount. I turned the computer back on, re-ran Firestrike… it ran even better and didn’t crash!

Phew. It was fixed. I’m now enjoying games at ~70FPS on Ultra with no crashing.

The ups and downs of bespoke computing

Building a PC wasn’t instantly gratifying. I’d almost descibe it as teeth-clenching. That said, I really like my new computer. I definitely think it’s worth it to build your own PC if you’re at all interested. It has a craftsmanship feeling like woodworking or fixing your own car.

I hate myself for this comparison, but here goes. Computer manufacturers (like Apple and Dell) are like front-end development frameworks; smart defaults that serve the majority of people. That’s just fine. But as a technolgist and a software developer, I want something custom tailored to my specific needs. This balances my aethetics, my technolust, and my budget without paying a “tax” to companies to do that for me. The modular nature of the computer means I can piecemeal upgrade the components as necessary. I’m not beholden to an entire new product cycle.

The consequence of rolling-my-own system is that all the repsonsibility is on me. Most of my problems were my own damn fault for not plugging or screwing things in well. If I run into endless Blue Screens of Death, I have to solve that. There’s no genius bar to bail me out.

We’ll see where I’m at two years from now, but it’s possible I have the pieces in place for a computer that I’ll use for the next 10+ years replacing parts along the way. With a modest budget of $300~400/yr in computer parts, I could stay at the cutting edge of performance indefinitely. In fact, I already have my next $200 worth of stuff planned out (SPOILER: It’s LED lights, custom cables, and another solid state drive).

I like this new style of computing. I’ll probably pick up a new laptop to replace the Surface Pro 3 eventually, but it’ll likely be an underpowered ultralight. The failures when building a PC were deflating, but I’m happy to have picked up a new hobby, some new games, and the possibility to explore some new realities along the way.

LinusTechTips, Dave Lee, Jayz2Cents, and BitWit ↩
Firewatch, Neptune Flux, DOOM (2016), and Overwatch ↩

Addiction, the Mobile Currency

Tue, 15 Nov 2016 00:00:00 -0600

This summer I saw a video of a guy playing Pokémon Go crash his car into a police car.

#PokemonGO is not all fun and games. Here is a video of a distracted driver who struck one of our cars. #PlaySafe pic.twitter.com/kOTfbTcILo
— Baltimore Police (@BaltimorePolice) July 19, 2016

And you know what? I don’t cast shame on this guy. He knows he messed up. But the reality is: that could have been any of us. Texting, tweeting, Facebook, Pokémon, Candy Crush, whatever.

That poor bastard is like any of us; addicted to our phone. How did we get here?

Apps are rewarded by getting attention. Eyeballs. Sign ups and time on site are the important metrics. Apps are incentivized to be more “sticky”. Most of us working in digital products spend our days designing and engineering new ways to capture users’ attention. A Freakonomics episode called “Is the Internet Being Ruined?” calls this out. The greatest minds in Computer Science dedicate themselves to keeping people on Facebook for 10 more minutes. The more compelling a product, the more money we make. The more addictive, the more money we make.

Venture-backed Social Media companies gave way to Free to Play (F2P) games. F2P games prey on our addiction by offering in-app purchases when our dopamine levels begin to dip. Our industry began talking about “drug dealer models” under the moniker “gamification”. Facebook and FarmVille symbiotically depended on and profited from our addictive nature.

I think we need to ask ourselves: Do we have a social responsibility there? The rational economist would say “No, the free market is working!” The behavioral economist might say “Yes, but humans aren’t so rational.” I personally raise an eyebrow at feeding on addiction. As we were reaching a point where we could begin to ask some of these question, something unprecedented happened: Mobile.

The Dawn of Mobile

Our relationship with technology became intimate. As mobile technology improved, Social Media and F2P games then converged with the ever-present phone in our pocket. That attention model transferred to this new mobile economy. All future mobile products are measured by attention and their addictiveness. Look no further than the iOS App Store to see the price of software slashed to zero.

It seems the mobile economy is solely about how apps can profit from your boredom. I may be viewing through rose-colored glasses but the Desktop Age seemed to be about how productive software made me. I’d much prefer “Usefulness” as the metric to judge software as opposed to time, a proxy for addiction.¹

If every company is a media company, as people like Gary Vaynerchuck suggest, then the currency of the Mobile Age is already attention. I believe this has repercussions.

Repercussions of an Attention-based Economy

Like I said, I believe attention as a primary metric has negative repercussions that we as consumers and builders should be conscious of and address.

False Valuations. Individuals with a high number of followers have the perception of being more valuable. This creates black markets for bot followers. Celebrities and politicians do this all the time. Why doesn’t Twitter police this? Because Wall Street incentivizes Twitter to have growing user base, more eyeballs, quarter after quarter. The incentives align to create a false economy that manipulates our trust. It promotes untrustworthy sources into positions of influence.
Balkanization and Radicalism. If Facebook learns I like racist shit, they’ll start feeding me more racist shit I might click on to keep me on the site. Mention Trump in a tweet, Twitter recommends known Klu Klux Klan leader David Duke. Successful KPIs have resulted in a more insulated world with less balance of opinions and facts. This creates the polarized social climate we’re all experiencing today. We can see this illustrated on the “Blue Feed, Red Feed” app from the Wall Street Journal. Social media algorithmically nudges people down the path to radicalized world views. The algorithm betrays us.
Pollution and Saturation. We see this with any modern publication like HuffPo or Buzzfeed, increasing supply to generate demand. Quantity overtakes quality. Newsrooms and blogs are shipping 40-60 pieces of content each day to increase hits and time on site in order to please advertisers. To meet the numbers, scrutiny is lowered. The well is polluted.
Lies, Damned Lies. Spewing out a non-fact that goes viral gets way more eyeballs than the correction. Issuing a correction might even undermine your personal brand. In an attention-based market, you grow your audience by posting first and playing to your followers’ confirmation biases (for instant retweets). This happened last week when Eric Tucker mistweeted about professional protesters arriving to Austin, TX in buses… this did not happen. Tucker issued a correction, but even President-elect Trump couldn’t resist the confirmation bias and jumped to his Twitter account lend credence to that lie.

In her talk “Agent of Change” (text), Mandy Brown illuminates this new era in publishing where “fixed text” is now instantly disseminated to every screen in the world at the speed of light. “This is not neutral technology,” Mandy reminds us. As consumers of hypertext we must always keep in mind lies spread faster than truth.

In the wake of recent events I’d encourage those of us who build hypertext to have discussions about how you measure success. Are all of your KPIs attention-based? Are you driving addiction? Are you comfortable with the repercussions?

On a personal level, I’d encourage you to vote with your dollars and help create alternatives for attention- and addiction-based models of monetization. Subscribe to a newspaper. Fund a Patreon. Seek trustworthy sources.

Maybe the great reward for becoming more productive in the Desktop Age is that we have more time to waste in the Mobile Age. ↩

The Shitlord in the Forum Problem

Fri, 11 Nov 2016 00:00:00 -0600

There is a problem that I think every online community inevitably must face. One with potential to destroy the community from the inside; the Shitlord.

For better or for worse, online communities are born out of like-mindedness. That’s different than our geographical-based communities. These communites grow and people on the fringe of this like-mindedness will no doubt arrive. The guiding principle begins to fall apart. This state is ideal for diversity of opinion, but it is only a matter of time until the Shitlord appears.

The Shitlord has a singular societal function: to provoke. Crass language and jokes, hostile opinions, contrarianism for controversy’s sake, even rape and death threats. They squelch the peacekeepers and embolden the extremists. Unmanaged, dissidence grows and grows. The traditional advice to “ignore the trolls” doesn’t work here. I say this from experience, it’s not easy to fix.

The Shitlord has a single superpower… they don’t care. They are immune to criticism. They don’t feel empathy or reprocussions for their words and actions. This makes people who do care extremely vulnerable. The only way to win on the Internet is to never care.

I think communities are defined by how they respond to this inevitable problem of abusive behavior. Both in action and inaction.

When I was much younger I ran a forum. One day a new member joined and began posting hostile remarks about everything. People started getting frustrated. The pot boiled over when this person started being an asshole about grammar. For the good of the community I banned them. I don’t know for sure who this person was, but I’m fairly certain it was my own uncle.

In May of this year I left a Slack community of web professionals because I repeatedly found myself discouraging sexist remarks in #general. I exhausted myself telling grown-ass men why dickjokes are inappropriate in a professional setting. There was no Code of Conduct to back up my assertion. I don’t speak at conferences without a Code of Conduct in place, so I departed based on principle. Since my departure I’ve heard about conversations in backchannels between men (whom I used to respect) suggesting fellow women in the community were on their menstrual cycle. Recently the community shut its doors due to unmanageable in-fighting.

Twitter is maybe the prime example of the Shitlord in the Forum Problem. They are experiencing the consequence of their inaction as their stock price slips and they look for a buy out. The world’s second largest social network –where you can tweet about your breakfast or topple an oppressive foreign regime– is unable to find a buyer. The rampant harassment is being cited as a primary issue. It’s clear Twitter valued new user signups over a healthy community. Short-term stock market gain over long-term peace.

Lastly, it appears America has chosen to let the Shitlords run the board. For most, it’s frightening to watch this play out in the political forum. Lives, families, and well-being are at stake. This is not the first time in history this has happened. This has consequences. Namely, “Truth” and “Justice” are now irrelvant in our post-fact world.

In some ways, the great failure of the Web is that it has balkanized us into opposing factions with stronger, more skewed, and more radicalized views. The cursed invention that tied the world together also drives us apart. Our echo chambers amplify. In this new reality the uncaring Shitlord, the one with the most radical views, the one most immune to criticism, is King.

Desktop is Lava

Wed, 26 Oct 2016 00:00:00 -0500

My good friend, colleague, D&D party member, and fellow dad, Lon Ingram and I got into a good discussion the other night about Native Apps vs. Mobile Web vs. Desktop Web. In part, it was sparked by Google’s decision to fork their search index into mobile and desktop. It’s a curious decision but I assume it’s to prioritize fast (cough AMP cough) mobile sites. Lon elegantly summed up our collective thoughts on this new search algorithm and other data points we’ve seen:

“Desktop is lava.”

I couldn’t agree more. The Google Search announcement might as well have been “We’re forking the index into Modern and Legacy.” Paired with a sandwhich-board-style soundbyte from Google Chrome’s Alex Russel:

"Mobile is about to be all of computing" –@slightlylate (@google) https://t.co/gEyaP8x86g
— Dave MINIONpert (@davatron5000) October 19, 2016

You probably need to watch that talk. It explains some of the limitations of not just mobile websites, but mobile hardware and computing in general.

There are a lot of data and signals that spell this out. The next billion users of the Web will use sub-$200 phones. Doubleclick found your site needs to load in 3s on 3G. Interactive in less than a second. That changes everything; how we design, build, and continuously iterate on our products (hint: less javascript). Here are some of data points Lon and I shared to build a picture of the state of the Mobile Web:

🔑 Social networks, search engines, publications, and retailers have already hit the tipping point and are seeing majority mobile traffic. This is probably where your traffic comes from.
🔑 The native app market is tightening. Most people don’t download apps.
👍 Mobile Web traffic is 3x native app traffic.
👍 Mobile Web audiences are growing 2x as fast as app audiences.
👎 Mobile Web engagement (time on site) is 20x less than apps.
👎 Mobile Web engagement is steadily decreasing.
🔑 The Chrome Developers team has been single-mindedly focused on mobile performance lately. This is a huge foreshadowing signal.

Most of these data points are found in the comScore 2016 U.S. Mobile App Report. The only data point I can find in defense of the Desktop Web is from Mary Meeker’s Internet Trends 2016 report:

👍 Desktop Web browsing hasn’t been cannibalized by mobile…
👎 But it has stagnated. comScore reports a 16pt drop in Desktop usage over the last 3 years.

To think that the number of Desktop Web users has stalled and will never grow from this point forward is eye-opening. If the number of mobile users is doubling each year, then it’s clear that the classical view of website as a desktop layout needs to be deprecated.

A side note: Lon and I didn’t agree on all the details. To oversimplify some nuanced opinions, Lon sides with Google Search’s dichotomy. Mobile and Desktop are inherently different. He thinks mobile apps and mobile web should have parity. I feel like the mobile web and desktop web should maintain parity. The web should have a consistent user experience and apps can tailor to whatever platform-specific design language necessary. To me, Desktop Web is a bonus provided by a mobile-first responsive design. But alas, not all responsive designs are truly mobile-first and ship the bloat and heavy pages down to tiny phones.

While Lon and I disagreed on these details, it was an in-house disagreement like Presbyterians and Lutherans disagreeing about which flavor of Calvinism is the best. I think there needs to be room for discussion. The unifying belief that Lon and I share is that Desktop is lava and should be deprioritized… like soon.

How I'd Save Windows Phone

Tue, 25 Oct 2016 00:00:00 -0500

The Verge says “Windows Phone is Dead” every six weeks or so. Whenever a claim like that is made, I can’t help but think about it and how to begin to fix such a giant problem. How do you resurrect a mobile platform?

After many ~~beers with friends~~hours of consumer research here’s how I, Dave Rupert, would save the Windows Phone platform:

Step 1: Call it Surface Phone

Surface has been such a successful brand this is a no brainer. As a user, I don’t care about the “Nokia Lumia” brand. I still think of chubby, blue, plastic sarcophaguses that ring in movie theaters. Call it “Surface”, however, and I’m a little intrigued. Surfaces are good. Surface Phones would get the attention of Microsoft brand loyalists.

Step 2: Put Halo on it

Microsoft owns Halo, one of THE most successful First Person Shooter franchises there ever has been. If you wanted to make a statement about mobile gaming, putting the original Halo on a phone would be it. The original Halo is probably “just enough retro” right now. Angry Birds and one-thumb Mario is cool, but here’s Halo.

Mix in some Xbox mirroring, and this move would get the attention of gaming nerds.

Step 3: 3D Camera

Using the Windows Hello technology inside the Surface line today, add a camera with Kinect-style 3D depth sensing. With 3D depth sensing, people could in theory scan anything in their house and capture a 3D model. From there, plug it in a 3D printer to clone the item. Or drop the asset in a video game you’re working on.

This could usher a new wave of technology (and copyright law). Anything is now reproducible! I think this would get the attention of 3D modeling, VR, game developer, and maker communities.

Step 4: Tor Network

Security and privacy are a big deal right now. What if your phone offered that with the flip of a switch. Why not put a toggle that connects your device to the Tor network?

Suddenly, you have the attention of infosec and journalist communities (hint: journalists might write about your product).

Step 5: Progressive Web Apps

Finally, the Achilles’ Heel of the Windows Phone platform has been a lack of apps. What if any webpage could be turned into an app? Well, that’s possible today using Web App Manifests and Progressive Web Apps.

Great news is Edge has already pledged support for PWAs, but the implementation isn’t quite here yet. They’re also considering a system where they preload the Windows Store with PWAs they found crawling the Web.

Being the second mobile platform to support PWAs would get the attention of the Web Development community.

All said…

There’s a Windows event tomorrow, I don’t know if Microsoft will announce a new phone but I’m curious if they do. Google had such a great showing this fall. That Pixel phone is right up my alley, I want Daydream VR… except Google’s updated privacy policy bothers me. My conscious is re-affirmed that I’m not sure I want an advertising company to make my mobile operating system…

…Your move Microsoft. #davegoeswindowsphone?

Super Mario 64 - 1996 Developer Interviews

Fri, 30 Sep 2016 00:00:00 -0500

How do you design and build a new paradigm for gaming while simultaneously designing and building the hardware that will enable this paradigm? This is an interesting question! Thankfully the Shmuplations blog has dug up 1996 Japanese language strategy guide interviews with Shigeru Miyamoto and the developers who created Super Mario 64, a new archetype for 3D games.

So how did they go about making this revolution in gaming? If you’ve heard any of my talks over the last couple years, you won’t be surprised when I tell you: The answer is prototypes.

Miyamoto: […] That’s how we make games at Nintendo, though: we get the fundamentals solid first, then do as much with that core concept as our time and ambition will allow.

Before committing to an overly ambitious design, they enhance and extend those core concepts once they are nailed down. Miyamoto and Hajime Yajima explain this a little further in the interview:

Miyamoto: […] We spent about half our time and energy designing the basic [movement, animation, and physics] system that we talked about. As for the courses and enemies, those actually came at the very end. They were done in a single burst of energy, just thrown together, almost.

Yajime: […] It gave us, as designers, a chance to play around with Mario in a diorama world, in a very free way. We could do a lot of experimenting—like, we’d make a ghost house course, and then drop Mario in there and see how it felt to move him around there. It was very fun.

“Fun”. At the end of a project that’s rarely a phrase you hear from developers. Create a Low-Fi prototype, drop a character in and see if it’s fun or interesting. The interview goes on to say they didn’t even model out the worlds, they just started with “sketches” and “brief notes/memos”.

I think this has a lot of lessons on how to build and design products. With the fundamentals built, sketches and notes should be enough to communicate intent. Then it’s a matter of nudging and improving as “time and ambition will allow”.

What if the plan had failed? Miyamoto saying the courses and enemies came at the very end actually makes me sweat a bit. However the prototyping and planning meant that they already knew what worked, they just had to build it. And build it they did! Super Mario 64 has 15 levels with 7 stars (challenges) each and 11 bonus levels. But I think the most valuable thing learned through playtesting it with children is that even though something is difficult, it can still be fun.

Miyamoto: Up to now, I think there’s been this image with games that if you can’t beat it, it’s not a fun or good game, right? That’s a philosophy we’ve stuck to at Nintendo, too, but I figured that if a game was this fun to play even if you weren’t getting anywhere, well, it must be alright. Until this game, I was very skeptical about something like this being fun.

Fun doesn’t just mean “easy”. I think that’s something I need to remind myself when relentlessly simplifying.

From a technical perspective, I think this era of video games correlates pretty strongly to Virtual Reality, especially WebVR. It’s new, the hardware isn’t quite there yet, no one really knows how it works, what’s good, or what VR on the Web is finally going to look like. Lots of people, myself included, are starting to poke around with WebVR and see finding new tools and concepts that work in this new paradigm. I look forward every week to seeing new little prototypes that push the Web’s capabilities forward.

The Shock of the New: Trouble in Utopia

Thu, 29 Sep 2016 00:00:00 -0500

Thanks to Paul Robert Lloyd for introducing me to this video at Smashing Conf. It’s a segment from a 1980 BBC programme called “The Shock of the New” presented by Robert Hughes that discusses art and architecture in a new era of technological modernity. This particular segment is a harsh critique on the architectural design of the city of Brasília.

In the 1950s, Brazil decided to move their capitol from the coastal city Rio de Janeiro to forge a brand new city, Brasília. It was planned and developed by Lúcio Costa and Oscar Niemeyer. By all accounts, it’s an amazingly logical, aspriational, and beautiful plan to organize a city by “sectors” with a public lawn in the middle leading up to the Capitol. The architecture bears repeating themes of big swooping arches and ramps, unifying the overall look and feel. A champion of modern design.

However, as Robert Hughes points out, while well designed… the city is actually terrible for people. It’s a city designed for the automobile. The story of Brasília is also covered in the 2011 Gary Hustwit documentary Urbanized. Human-centered architect Jan Gehl has this to say:

“Brasília was the ultimate modernistic city built on all the ideas of the modernistic manifests. It looks fantastic from the airplane, but if you are down at eye level on your feet going from one place to another, Brasília is a disaster. Every distance is too wide. Things are not connected.”

Harry Brignull of ClearLeft in his 90 Percent of Everything blog applies Jan Gehl’s user-level view to Web Design. In his talk, Paul Robert Lloyd made the connection from Brasília to the current trend of Styleguides and Design Systems. I love this connection. A lot of us are in the business of large-scale design system architecture. However, our tools, our marketing strategy, our architecture, our design, our code is a failure if it doesn’t work at the user level.

The risk can go both ways. Focus too small, like on optimizing a button or page, you sacrifice the consistency of the network of content. As Robert Hughes put it, you “design for single not multiple meanings”. Focus too wide, like on the 10,000 foot level, you don’t see people just structure.

Thinking about all this, how to maintain a user-centered design and architecture, I’m reminded of the philosophy built into design of the World Wide Web:

Consider users over authors over implementors over specifiers over theoretical purity

… Aahhh… that’s it.

The Web Is Ruined and I ruined it

Wed, 28 Sep 2016 00:00:00 -0500

“The Web Is Ruined and I Ruined It” by David Siegel is a remarkable piece in the history of Web Design. For those unfamiliar with David Siegal, he’s the Father of Web Design. He literally invented the spacer.gif technique for styling websites using tables. That hack earned him the (self-proclaimed) title of “HTML Terrorist”.

Admist the high-level of snark in this article, something monumental happened here. Siegal, the Father of Web Design, renounces Web Design. In exchange for doing heinous things in markup to achieve a visual effect, as the HTML purists had admonished, Siegal embraces a very primitive form of CSS (being pioneered by none other than Microsoft).

The terminology in this 1997 article is dated, but when you transpose some of the terms to modern day equivalents, it reads like it could have been written today. “XML” could be React or Web Components, “Flash” would be SVG, “Netscape” could be popular corporation-backed JavaScript frameworks, “Marc Andreessen” could be Marc Andreessen. 😜

Allow me to make some liberal substitutions based on statements from my Twitter feed today:

Sure, we still have to use [FLOATS] to lay out our pages, but in a year or so, we hope to give that up, too. Say goodbye to the [FLEXBOX]! Use it only when necessary! Ban the kluges–learn to use [CSS GRID SPEC] today!

It’s also worth noting that some of Seigal’s critiques of CSS and its cascade are still valid and even relevant today…

One of the central questions surrounding the use of style sheets is: Who gets the final say over the look of a document? A small percentage of the readership is colorblind, another group prefers larger type, and others have special viewing requirements. Then there are alternative surfing environments like Web phones, WebTV, and Web dishwashers. Each has its own special browser and its own limitations.

How does a website with a single stylesheet work and be accessible on the multi-device Web? Gosh, that sounds like a familiar problem!

I like to revisit this post from time-to-time because it feels valuable to be reminded how the Web was the Wild West. Browsers and webmasters were trying to shoehorn their priorities into the primordial Web Platform. We were all doing heinous stuff to move the needle on “ugly gray sites”. It’s not hard to think of modern day facsimiles.

Learning that the Father of Web Design renounced Web Design changed my world view a bit. Maybe I need to perodically re-examine my definition of Web Design. Is my COOL EFFECT™ terrible for Users? Am I being an overly staunch arbiter of outdated (or new shiney!) things? Most of all, am I doing things that are not only bad for the User, but bad for the Web as a whole?

Some day, the purists and I will see eye-to-eye, while Marc and company keep on tagging, with lame excuses like: “Our customers demand interim, tag-based solutions.” Hogwash.

Windows Shutdown Crapfest

Tue, 27 Sep 2016 00:00:00 -0500

Having just switched back to Windows after 13 years on Mac, this bit of #oldgold from 2006 feels highly relevant. As a response to a Joel on Software post about UI design gone bad, Moishe Lettvin shares a behind the scenes look at how Windows Vista ended up with all of the following options for logging out and shutting down your computer: Switch User, Log Off, Lock, Restart, Sleep, Hibernate, and Shut Down.

While it’s commonplace to shit on Windows and say “LOL look how dumb they is”, I think this post better serves as a harrowing tale about large software projects, cross-departmental features, and stakeholder burden.

Good User Experience expects consistency. And because UX sits on the upper crust (the interactive visual layer) of software, any time you seek to improve consistency and User Experience on a large website or piece of software, you inevitably start stepping ~~on the toes of~~ into other teams’ projects. Going cross-department is where things get tricky.

In order to roll out a new Shutdown menu, Lettvin’s Windows Mobile PC User Experience team of ~8 people had to talk with the Windows Shell team of ~8 people who had to involve the Windows Kernel team of ~8 people. Those cross-departmental meetings meant you needed to get managers involved, and their managers’ managers, and their managers’ managers’ managers. The stakeholder burden begins piling up.

43 total people with a voice in this feature. Twenty-four of them were connected sorta closely to the code, and of those twenty four there were exactly zero with final say in how the feature worked. Somewhere in those other 19 was somebody who did have final say but who that was I have no idea…

According to Brook’s Law that’s 903 nodes of communcation! I think anyone who has worked on a large team or cross-departmental project like a Design System or Styleguide knows this pain well. Meetings end with “I can’t make that call”, so you spend the next week tracking down the person who can make that call. Or you uncover one person who will be very upset if you remove one tiny unused link or tracking script. Or some other unknown department was working on the same thing and has ahem different ahem opinions.

The weird possessive nature of developers regarding their code seeps out. Layers of management and stakeholders disconnected from the code heap down decisions and requirements without understanding the underlying quality and capabilities. And to top it all off, it could be weeks until you see or hear about what others are doing…

So in addition to the above problems with decision-making, each team had no idea what the other team was actually doing until it had been done for weeks.

As I read this, consensus-driven software makes people happy but risks sub-par results. But at its core, large software projects are the product of humans working together. Some say they even inherit our biases.

Since this is a human problem, not a software problem, it seems effective communication and transparent sharing could go a long way in solving some of these issues. It’s an interseting problem though. I think as I’ve gotten older, I’ve become more interested in the people problems of Web Design. These tend to be harder, more gory, and more complex than the technical problems.