Haven’t updated this blog in a while. Most my blogging needs have been filled by twitter, and more recently my two tumblrs colinaut.tumblr.com for random web finds and djcolinaut.tumblr.com for my music blogging. That said, this blog is still a great place for more long-form thought and discussions on design and development.

Relately, I’ve been on a autodidatic learning binge lately with mobile first responsive design. I’m also currently developing a new front end framework and boilerplate for my webdev work that incorporates the new best practices of mobile responsive design and uses Less CSS (or SASS) as it’s basis. There are of course tons of frameworks out there but I find most are bogged down with unnecessary crud which is hell for page weight — an issue that has become important again in this mobile web era.

Over the next few months, I will likely be writing about and responsive design tips and tricks. Also, expect this site is going to get a huge overhaul soon.

I’ll leave you with this…

The best fix I have figured out for the annoying iOS zoom orientation bug: https://github.com/catcubed/ios-zoom-bug-fix

Noticed an odd and annoying bug in IE9 beta 64-bit (version 9.0.7930.16406). Images placed in the background using css with background-attachment fixed do this odd up & down jiggle dance when scrolling. It primarily happens when using the scroll wheel or when using the arrow buttons on the scroll bar. if you scroll by dragging the scroll bar it doesn’t seem to happen. To see it yourself point IE9 to this background image fixed test page I made. I’ve already sent feedback to Microsoft, let’s hope they fix it.

I recently composed a layman’s description of Firesheep and the dangers it brings for my coworkers. Here is for those of you who also need to explain it to others who are low on the geek quotient:

This is an important security announcement for anyone who uses your laptop/iPad at coffee shops and other places with open wifi networks to surf the web.

If you are on an open wifi network and use a website that does not use https your login can be easily hijacked by anyone on the same wifi network.

What this means:

If you sit down at a coffee shop and use Facebook, Facebook sends a cookie (a bit of info identifying you as you). A nefarious person at the same coffee shop can snatch this cookie using a new hacker tool called Firesheep and immediately hijack your session pretending to be you on Facebook. Once they have access to your Facebook they can easily get the password, which is why it is recommended not to use the same password for all websites. Firesheep also works for any website that does not use https for login like Twitter, Amazon, yahoo, etc.

• Wifi Networks that are NOT secure: any open wifi that does not use a password, this includes networks that only use a browser password like many coffee shop wifi networks
• Wifi Networks that are secure: any WEP/WPA encrypted network.
• Sites that are NOT secure: any site that uses only http can be hijacked (Facebook, Twitter, Myspace, Flickr, Amazon, Yahoo, Yelp, Windows Live, NY Times, CNET, etc.)
• Sites that are secure: sites that use https encryption for everything are safe from being hijacked (bank and credit card sites, paypal, gmail*, ebay).

*Gmail may not be secure even with HTTPS. I’ve been told that it leaks the cookies possibly due to chat.

Open wifi networks have always been unsecure in this way but there hasn’t been a tool this easy to use before. The new tool Firesheep is so simple an 8 year old can hack your account. It should be noted that even WEP/WPA networks are not truly secure but they are at least secure from Firesheep (WPA2 Enterprise is a better solution).

How to be safe from being hijacked:

Obviously avoiding open wifi networks protects from all this, but if you are on a open wifi there are other ways:

1. The best solution is to use VPN. Firesheep cannot hijack your session if you are using VPN! This creates a secure tunnel to the web which goes through the UCSF network and works regardless of what browser you are using. It also protects all your traffic including email/etc.
2. Another solution is to force https encryption on sites using a browser plugin: this only works for Chrome and Firefox and while effective this breaks aspects of some sites such as Facebook’s chat, and Google maps. Also it is not always secure either as Facebook sends a lot of stuff unsecurely even if you force https.
   1. Chrome browser plugin KB SSL Enforcer download here
   2. Firefox browser plugin HTTPS Everywhere https-everywhere
3. Another solution is to use a SOCKS Proxy and SSH tunnel, which  is too geektastically complicated to go into here.

Reference:

• firesheep-will-permanently-scare-you-from-hotspots
• even-forced-ssl-is-broken-for-facebook-google-twitter
• new_tool_automates_webmail (this news article says it works on gmail. This is wrong.)
• firesheep-in-wolves-clothing
• five-ways-to-shear-firesheep
• how-to-guard-yourself-and-your-mac-from-firesheep

I’m going to Wordcamp on Saturday. Maybe I’ll see some of you there. I”m mostly interested in track 2 of their schedule. Contemplating bringing CatCubed papercraft printouts to hand anyone who asks for a business card.

So I’ve done a bit of cross-browser testing for my new CatCubed design:

• Safari, Chrome (i.e., Webkit): works perfect
• iPhone Mobile Safari (i.e., Webkit): works but any fixed attachment is ignored (this is due to how the iphone browser works)
• Firefox, Camino (i.e., Gecko): works except for multiple background images
• Internet Explorer 8: Works (after a small fix) but is ugly due to lack of CSS3 support
• Internet Explorer 7: fails dramatically because of IE float bugs
• Internet Explorer 6: fails dramatically because of IE float bugs and lack of CSS2 support
• Opera 10: fails somewhat due to a bug in how Opera handles floats. Also is ugly due to lack of CSS3 support

Also, thanks to Jason I found (and fixed) a bug that only occured on large monitors (24″  or more).

As I mentioned, I added a small fix for IE so it’s readable, but I’m not bothering to fix the IE6 or IE7 massive fails and I added a very basic stylesheet for IE6/7 so they could at least read the content. Also, I added a “why don’t you try another browser” warning to the site for IE users.

Just thought I’d mention that this redesign is meant as a means for me to experiment with new techniques and do so quickly, which is why I am no longer fully supporting IE with this site. There are workarounds for many of the techniques that I am using on this site, but it would take me at least twice as long to implement. All my real work projects will continue to be built with a graceful degradation / progressive enhancement process in mind.

I’ve been inspired… and I have a long weekend, which means that I’ve spent the last couple days buried in my laptop. My back aches, my eyes are screen burned, but nothing stops the freight train called inspiration.

I give you the new and improved CatCubed.com! Also, I’m releasing Mr. Cube the Cat as an adorable papercraft doll that you can make yourself! Like the new version of the site, he’s still in beta but he’s stable and I’m releasing him into the world anyway!

Download the Cube the Cat, papercraft PDF (version 0.6 beta).

Yep, I’ve gone and scratched that designer itch that has been bugging me for a while. I’ve decided to use CatCubed as a means to experiment with new web techniques. Besides the cute little paper Cube the Cat, the new site includes:

• HTML5 semantic structural elements – minimizing the use of divs except where appropriate. I’m still not perfectly happy with the semantic structure of the HTML. Some limitations were due to the layout particulars and the wordpress CMS. I will revisit this at a later point so that it is more in line with proper HTML5 semantics.
• Extensive use of new CSS3 styles – multiple background images, rounded corners, rgba, box shadows, etc.
• CSS built using SASS
• Simplified navigation – Got rid of the sidebar modules clutter. Also, post categories have been reorganized with a focus on the three main things I write about art, code, design.
• Coming Soon – more robust art, code, and design sections with highlights of my various projects. Mobile version of the site (it’s a image heavy site now, so I think a mobile version is in order.)

The site works best in webkit browsers (e.g., Safari, Chrome, or Internet Explorer with Chrome Frame). If you are on a gecko browser (Firefox, Camino) everything works but you are missing a few design elements due to lack of Firefox’s ability to use multiple background images (this is supposed to be added in Firefox 3.6). I have not tested the site in Opera, but Opera is decent so it should work (except for some of the CSS3 styles). I also haven’t tested in any version of Internet Explorer, and I don’t plan on it. I’ve added the HTML5  shiv so that IE will recognize the HTML5 elements, but considering the fancy things I’m doing with floats, it likely fails pretty bad.

I’ve kicked this whole thing out fairly quickly and I’m experimenting with a few things so there are likely a few issues here or there. If you are running webkit (Safari, Chrome) or gecko (Firefox) and run across any bugs let me know.

I have a few additional things I want to do to this site over the coming weeks and months. So expect to see more changes.