Continue Reading Post…

SOPA and PIPA are terrible bills in the US Congress, and on January 18 the web is going went dark to protest.

Copyright theft is already illegal. Why is Congress wasting our time with this? If passed into law, these bills will lead to censorship without due process of law. They protect the rights of multi-billion-dollar corporations, but they don't protect the rights of the average web publisher. Join the fight!

Why Did I Make This Template?

When I heard about how the web was going dark (including sites like Reddit and Wikipedia!), I felt inspired to make an interactive blackout template that played off the theme of "going dark." It was a way for me to channel my frustration with these bills creatively. Some artists paint. I guess I write code. (I actually repurposed one of my old demos for this.)

I made the code public domain and put it up on Github so people could fork it and improve it. You are welcome to use it, and I require no attribution. [Technical note: Check out this post about 503 HTTP headers.]

And Then What Happened? (Going Viral)

I submitted my template to BoingBoing in the middle of the night on Sat, Jan 14 right after putting it together, and Corey Doctorow wrote me back with some good ideas for adding more information to the design so that people would be better informed about the issue. He posted my template on Sunday. It then got picked up by YCombinator News, showing up in their Twitter feed and front page. It started to pick up some buzz on Twitter. On Tuesday, I talked on the phone with a really kind writer for Fast Company. Mashable wrote about it, too.

I thought the response to my template was totally crazy and unbelievable at this point. I had over 50,000 people come to view it from Sunday to Tuesday. And there is nothing quite like that many people coming to see your downloadable template to make you second guess your code! Sorry if you had any problems! I thought there would be quite a few sites using my template during the black out on Wednesday, but I really had no idea just how much my template would resonate with people...

What Has Been the Impact? (Holy Crap!)

At midnight Tuesday night/Wednesday morning I suddenly realized...

Continue Reading Post…

1. Bug With CSS Translated Form Fields

In this bug, giving keyboard focus (such as via JavaScript) to a form input that is translated off screen with CSS transforms causes the page content to shift position and the text input caret to render in the wrong place.

Check out my test case.

2. Inconvenient Behavior with Fixed Positioned Header Bars and Form Fields

Many of you may begin using iOS 5's new CSS position: fixed; support to add fixed nav or header bars to the top of the screen. If you have any form fields in your content that are given fixed positioning (such as a search field in your header bar), you must anticipate that your fixed positioned content will come unglued when those form fields are given keyboard focus.

See my example, including a suggested design fix.

3. Fixed Position Content May Become Un-Clickable or Invisible

This is a particularly pernicious bug. If you add content to your mobile web site / app via AJAX, or reveal hidden content to the user, and this new content scrolls off screen -- if a user reloads your site while scrolled to the bottom of this content, it may make your fixed positioned content (such as a top nav bar) either disappear or become temporarily un-clickable upon reload.

Read my test case for more information, and for a bug fix.

That's it for now. I hope this is helpful to you.

Continue Reading Post…

This game is featuring music created by Christopher Winter. He really deserves a lot of major kudos, because he put together music for me in less than a day! (Totally my fault for ignoring music for my game until the last minute!) The game would not be the same without his efforts. Thank you, Chris! Thank you thank you thank you!

Well, this is it for now. I'm interested in doing a proper postmortem, because I learned a lot about my own personal game making process I'd like to share. I also have some thoughts on Akihabara vs. Impact.js. However, this will all have to wait for another blog post on another night, because I'm tired!

Continue Reading Post…

The demo uses HTML5 Canvas to draw the falling streaks of #b1000d. In Safari/Chrome, I'm also able to fill the inside of the letters themselves with a shower of #b1000d. To accomplish this I use an off-screen canvas and the special CSS3 rule background: -webkit-canvas(mycanvas); to set the background behind the text to the canvas animation I'm doing in JavaScript. Then, I use another CSS3 rule -webkit-background-clip: text; to clip the canvas to only show the parts of the canvas that are underneath the text. Finally I make the text see-through with color: transparent; so we can see that clipped background. Go ahead and view source of the demo if you want to see more.

Before you go, I have another announcement, too. I'm working hard trying to complete my new game by Halloween. (I'm both making a game and keeping up with my client work, so wish me luck! heh) It will be a new chapter in the world of Equip > Pants. I hope that you'll like it.

Continue Reading Post…

I don't want to spend a ton of time on getting started with node.js or learning Socket.IO. But you should know that I'm just talking about a default, easy to replicate install of node and io. All I basically did is brew install node, curl http://npmjs.org/install.sh | sh, npm install socket.io and I'm off writing realtime code.

Hello World Has Surprise Lessons

The first thing I noticed is that it is a bit surprising — even alarming — how little you need to get a hello world example working. Let me show you the example and then explain the alarming part.

Continue Reading Post…

"If you can't fix a bug with Firebug, blow it up with Firebomb!"

Firebomb started out as a tongue-in-cheek parody of Firebug that I originally did for the 10K Apart Contest in 2010. Quality stress relief! Firebomb has since evolved from the original gag and developed a life of its own.

Get Firebomb for Firefox and Other Browsers

My Firebomb plugin for Firefox 4 and 5 was developed with the new Mozilla Add-on SDK that hit its 1.0 release in June 2011. Originally called JetPack, the Add-on SDK allowed me to build out a true plugin for Firefox using a smart JavaScript API. This was a really quick and fairly painless process. I definitely recommend the SDK for web developers looking to do a Firefox plugin. I also made Firebomb Lite as a browser bookmarklet so you could have the joy of firebombing Internet Explorer... I know you want to!

Firebomb for Firefox and the Firebomb Lite bookmarklet are both free and available for download today! Use them whenever you need more firepower than Firebug alone!

Buy Firebomb AR for iOS - Blow Stuff Up in Augmented Reality

Continue Reading Post…

This CSS3 moving poem shows how you can use just a little CSS3 magic to create some refracting water ripples that run right through a page's HTML content. Raindrops and ripples are created with border-radius, box-shadow, and CSS3 scale transforms -- and they are animated with CSS3 animations! Firefox 5 lets us refract not just an image but actual page DOM content via smart use of -moz-element. This YouTube video explains it a bit more.

Please click the Like button on the Mozilla Demo Studio! Thanks!

Continue Reading Post…

Update: Now with 100% more video. I start about 44 minutes in.

Continue Reading Post…

The theme for the competition was from Zelda and internet Kitten meme fame: "It's dangerous to go alone! Take this." I made an old school, top-down puzzle game for this theme. After the 48 hour competition ended, I polished my game a bit and also re-submitted to the 72 hour Jam.

You should play both versions of my game!

I've also written a postmortem for the Ludum Dare site, that I invite you to read.

Continue Reading Post…

I present to you "Commander Clone 0.2 - Training Mission" — you should play it right now!

If you don't like something about it, please tell me! If you really love something about it, please invite your friends to play.

There are still some bugs, and this training mission level doesn't have a ton of content... but it has been fun to draw the sprites and modify Akihabara. I also like to think the level has a certain charms. ;)

Continue Reading Post…

It can be really nice to keep a programming log. Especially at the task level. I like to have notes about how long things take and what bugs/challenges I encounter along the way. In fact, that's part of the reason why I created ShortJournal (although I've come to use SJ much more as a bucket for code snippets, ideas, and bookmarks).

I think the biggest hurdle I trip on when I get lazy about detailed journaling while coding is the distraction factor. I don't want to have to switch windows to do it, or even worse, take my hands off the keyboard and mouse to pick up pen and paper. I was chatting with Paul about this problem and about how it might be kind of nice to have something pop up every 30 minutes and ask me what I'm doing, and then just log it with a timestamp to a file. Super simple. He was instantly interested.

First, the Prototype

Within about 15 minutes I'd figured out how to make a prototype in Apple's Automator tool. It was simple enough to pop up a single line text input prompt with the question "Whatchya dooooin?" and then log the answer to a time stamped file. I saved the workflow as an App, and hooked it up to a crontab, and started using it. I really liked it, and Paul liked the prototype, too.

You can download the Mac App and the Automator Workflow here:

• WhatYaDoin.workflow.zip (64KB Zipped Automator Workflow)
• WhatYaDoin.app.zip (225KB Zipped Mac App)

The Automator workflow writes the log to ~/doin.log in your home folder. Here's instructions to get it running every 30 minutes via a crontab:

# Run the following command in Terminal

crontab -e

# Add the following line to the file you will be editing

*/30 * * * * open ~/Documents/WhatYaDoin.app

# Note:
# ~/Documents/WhatYaDoin.app is the path to your Automator app
# */30 means every 30 minutes... you could tweak that

# Save and quit the editor, and that's it!

Then, the Open Source Native App Version on GitHub

Like I said, Paul liked the idea. He suggested it become an open source Watermelon Sauce project, and that sounded like a great idea. Within just three hours of work he'd built the Native Mac App in Xcode and put WhatYaDoin on GitHub. Check it out! It currently lives in the toolbar and handles popping up every 30 minutes itself.

We've both been using it today, and it is very interesting! Next big question is going to be what to do with all the little journal snippets! I think it could be very useful for blogging or doing estimates.

Continue Reading Post…

I'm sorry to have recorded you such a long video, I didn't have time to record a shorter one. ;)

Continue Reading Post…

But better late than never, I'd like to do a review of 2010 while it is still somewhat fresh in memory. This timeline is mostly for my benefit so that when I look back at 2010 it seems like an actual year of my life went by. I find it comforting to feel like last January was in fact 12 months ago, and didn't just happen last week.

I got pretty bad about posting to my blog in 2010 because of the chaos. A lot of my projects ended up going direct to @zacharyjohnson on Twitter. So there could be some things below that may be new to you:

I'd say 2010 was a really great year for me, but even more so it was a fantastic year for the web. I made the resolution at the beginning of 2010 to spend more time on interactive development and games. I think I definitely accomplished this, thanks in no small part to the fact that all the major browser players now have a very, very fast canvas implementation.

I also resolved to dig into the mobile web, and I had a ton of fun playing with the continuous stream of new functionality appearing in Mobile Safari on iOS. But Android has a Webkit-based browser, too. The new job I started in March in particular gave me many opportunities to explore and exploit the multitouch web environment on Android and iOS. I'm truly excited for what 2011 will bring to the mobile web space, and I also look forward to the role that Mobile Safari will play in my upcoming iOS app development. It's an amazingly rapid and versatile tool.

I think I met more people and had more opportunities to collaborate in 2010 than I have in a really long time. Maybe ever. I found that to be tremendously valuable and rewarding. I look forward to continuing that trend in 2011. You all do some really amazing things, and the web community now surprises and thrills me at a daily pace. Have a great 2011! It's going to be elevenz.

Continue Reading Post…

As an example I have some spinning HTML content. You can click the content to increase its scale while it continues to spin.

Read the full post to see the example and download the patch.

Continue Reading Post…