- Topics:
- apps
- css
- games
- javascript
- mobile
- node
- php
- speaking
- tehcl
- textmate
- tools
- video
- webgl
- published:
- 2012.01.17
- topics:
- css
- javascript
- tools
CISPA Blackout? https://github.com/zachstronaut/cispa-blackout
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...
- published:
- 2012.01.08
As every new year has passed since I've started this blog, I've done an annual timeline of events that were important to me over the previous year. I really like being able to look back. It helps me realize that I got a lot done, even if there's so much more yet to do! Here are some things from 2011 that I'd like to share:
January
February
Was in Vancouver and Berlin doing user experience research interviews and testing
Cobblestones 1, Zach's Foot 0
Touch Screen Directory project gets 4th Place at U of M Quality Fair
March
April
May
June
Launched the Firebomb plugin for Firefox, made with Add-ons SDK
Created the Firebomb site, too, with exploding logo (click it!)
Exploited browser features to make CSS3 rain ripples
Worked on SQLite integration in NimbleKit for a client's iOS app
Visited Northampton, MA
July
August
September
October
November
December
Turns out 2011 was an incredibly significant year for me. Beginning to work for myself full-time was a huge change, and one I had been pondering for quite awhile. I'm already going to be busy with work well past that one year anniversary. I feel very fortunate. I look forward to all sorts of exciting client work and creative collaborations in 2012.
Of course, the main reason I started working for myself was the flexibility. I wanted to be able to try out more ideas, and be free for more projects. I did manage to release my own iPhone App in 2011, as well as three of my own video games. And I collaborated with friends on one really neat multiplayer node.js game! I hope to learn more about myself as an artist in 2012, and release some app and videogame work in 2012 that is even more personally meaningful.
I made some wonderful new connections in 2011, including all the folks at the IGDA-TC community and at JavascriptMN. I will have all sorts of fun with all these people in 2012, and I'm sure I'll make lots of new friends, too.
I'd say 2011 was a year about mobile, iOS and Android, as much as it was a year about JavaScript. I have zero doubt that mobile and JavaScript (and thus "HTML5") will be front-and-center in 2012. I view mobile as kind of a given now. Saying that mobile is a big deal is kind of like saying the web is a big deal... "no duh!" JavaScript is really going to keep growing in a major way in 2012. WebGL is huge. Realtime multiplayer/multiuser via WebSockets is huge. JavaScript on the server with node.js is really interesting.
I wish you a wonderful 2012.
- published:
- 2011.12.04
- topics:
- mobile
I've run into two bugs and a third bit of tricky behavior with Mobile Safari on iOS 5. I thought I'd share what I found in order to hopefully save somebody from pulling out their hair.
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.
- published:
- 2011.11.01
- topics:
- games
- javascript
Original Post:
I'm very happy to announce my new short adventure/RPG game, The Legend of Equip > Pants: Chapter 1. It's got a spooky vibe. Hopefully you follow me on Twitter and you caught news of my game release on Halloween! I made my deadline goal. I didn't get every last detail in, but I did finish! Hooray!
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!
- published:
- 2011.10.27
- topics:
- css
- javascript
Boo! Halloween is my favorite holiday, and it is only just around the corner. Here's a spooky web demo I made earlier this month, and I wanted to share it with you. Write your own scary message in #b1000d!
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.