Chad Things

I just completed one of the best tech conferences i’ve ever been to – Fluent javascript conference in SF. O’Reilly did a great job of providing many opportunities to learn more about various facets of the javascript world. These include business, mobile, gaming, tech stacks, detailed in the very useful fluent schedule. There was also tons of buzz around web apps (code shared on client and server), backbone.js, node.js, among other things. It was well organized, with usually about 5 parallel sessions, and enough breaks to consolidate notes, meet other attendees, explore the exhibit hall, or just catchup with email. There was also a few organic meetups at night, but I did not make it to any of those.

I was happy to see discussion around business side of javascript, mainly due to the rise of web apps and HTML5. Even though javascript has been around for 17 years, only in the last few years has there been an explosion of js frameworks and libraries. This is partially attributed to mobile explosion, apple not supporting flash, and a really great dev community (yay github). With all these new tools available, companies can focus more on the bits they care about, allowing them to get new apps, features, and fixes in front of their users faster than ever. Web apps were a very popular discussion area, from the business and develpment side. Specifically two sessions highlighted this. First was how business are “Investing in Javascript” (pdf presentation by Keith Fahlgren from Safari Books. The other was by Andrew Betts from labs.ft.com, discussing the financial time’s web app which allows users to view content offline. Most people know that traditional newspapers are dying, but I liked how Andrew points out “newspaper companies make money selling *content*, not paper”. Also Ben Galbraith and Dion Almaer from Walmart had a fun-to-watch Web vs Apps presentation (yes, its true, tech isn’t always DRY). The main takeway from them (which was echoed throughout the conference) was that web apps are better than native apps in most ways except one – native can sometimes provide a better user experience (but not always). Of course you may still want to build a native app using html5 and javascript, and there are 2 great ways that people do this, using Appcelerartor’s Titanium or phoneGap (now Cordova, apache open-source version). One of the coolest web apps I saw at the conference was from clipboard.com – Watch Gary Flake’s presentation (better look out, pinterest).

For the uber techies out there, there were lots of insights on how companies successfully used various js libraries and frameworks (in other words, whats your technology stack). This is important to pay attention to, since not all the latest and greatest code is worthy to be used in production environments. You should think about stability, growth, documentation, and community involvement. Here’s a few bits I found interesting

• Trello (which supports IE9+ only): Coffeescript, LESS, mustache templates, jquery/underscore/backbone
• just.me: jquery, less, node.js
• new soundcloud: infrastructure: node.js, uglify, requreJS, almondJS .. served using nginx. Runtime: backbone, Handlebars
• twitter: less, jquery, node.js, more twitter tech stack
• clipboard.com: Riak, Redis, NGINX, jQuery, Node.js, node.js modules
• pubnub: custom c process faster than memcached and redis
• picplum tech stack: coffeescript, backbone.js, rails 3.2.3, unicorn + resque, heroku postgres, heroku (nginx), AWS couldfront & S3
• stackmob: uses backbone, mongoDB, Joyent and EC2, Scala and Lift, Netty and Jetty

Finally, here are a few other cool tech-related tidbits from the conference. There was soo much good stuff, this is not a complete list, but just a few highlights from my notes

• Paul Irish – js/web dev workflow 2013– grunt, livereload, adobe shadow, codekit, brunch, recompiler webstorm
• Chris Power’s sharing code between client and server (older presentation)
• Elliott Sprehn’s talk on rendering screenshots in js for google feedback (whoa),
• Sha Hwang from Trulia.com talking about displaying data beautifully on maps (crime heat map)
• Tom Hughes-Croucher (Jetpacks for Dinosaurs) Writing robust Node.js applications
• Nicholas Zakas – Maintable Javascript
• Tidbits: twitter: Mixins by Angus Croll
• document.elementFromPoint() – awesome – give coords, tells you which element is under, including iframes and z-index
• If you haven’t yet, subscribe to Javascript Weekly.

After 3.5 years with the iPhone, last September I decided to give the Android a go. Apple was good to me in the beginning, offering a major life improvement when i switched from a standard cell phone. I loved having maps, my personal calendar, email, and music with me all the time. Huge improvement. But ever since my wife got the HTC Incredible (an android phone) in the summer of 2010 I was jealous. Her phone was faster in most ways compared to mine, which had poor reception at home and work, where i spent most of my time. The wife would consistantly leave me in the dust on roadtrips as well.  She also had Verizon, and I had AT&T, so I was eager to switch carriers. Last fall after losing my iPhone i looked into the android options and decided it was time.

At first the main reason I wanted Android was control. I love Apple, they design better than anyone, but at the end of the day I was tired of always doing things the apple way – I wanted more control on how to manage things that are as personal as your mobile device. In other words, I don’t care how awesome your hammer is, everything is not a nail. I prefer a swiss army knife.

After about 9 months, I have mixed feelings on the switch, so I’d thought I’d list my pro’s and cons

Droid Bionic Pros:

• Bionic
  • 4.3 inch screen is bigger than 3.5 of iPhone.  I prefer bigger screen when using the touchscreen or watching videos/pics.  It still slides easily into my pocket, too.
  • Supposedly faster with Dual Core.  Having a dual core means if some app messes up, even if its in the background, it won’t bring your phone to a grinding halt. In practice it doesn’t seem faster, and several times a week it is dramatically slower (unlocking can take several seconds, oh the horror).
• Android Hardware
  • I love having a back button.  I hate that Apple doesn’t have that – only has the “home” button.
  • I also love the menu button.  Apps take advantage of that better providing a better and faster way to get what i need.
• Android Software
  • Notifications bar.  New email, text, voicemail, app msg, whatever.  You’re always 2 secs away from getting what you need.
  • I have not rooted my phone yet, but plan to.  That opens up even more possibilities.  Not so much on Apple.
• Pro – Google.
  • I am more like google than apple.  That is, I rather have more data and more features available to me then have that one button positioned just right.
  • Google Account integration.  If you’re a google user, with gmail, google docs, maps, etc, then this is for you.  Integration is so natural it blows me away.  Especially contacts – facebook and gmail merged is so sweet.
• Syncing
  • I love that i can sync my mac with my bionic without using wires.  However, i’m still not excited about the delay it takes to go from my computer to google then to my phone.
• Camera
  • Although both iPhone and Bionic suck when your photo needs a flash, The droid has 8 MP and a nice video camera – a step up from iPhone.
• Storage
  • More storage. Bionic has internal card and removable SD card.

Droid Bionic Cons:

• Bionic has Bugs
  • Sometimes I must reboot to get data connection to work over phone network (when not on wifi).  This is better than it used to be, but still buggy.
  • Google calendar interface is jumpy – When looking at agenda view, it will jump backwards a week or more.  Just annoying.
  • Freezes for a few secs sometimes, while i’m typing (which screws up your flow) or during a transition or animation (like unlocking phone).  This happened alot on iPhone, too.
• No screen capture by default
  • On iPhone, you can take a photo of any screen by pushing power and home button.  Nothing like that for Android, making it hard to share cool stuff with friends or debug.
  • Note: The maxthon browser lets you capture the screen of a webpage with this addon.
• Video Player not good
  • Stock video player doesn’t play all types of video.  Try switching to MX video player or arcMedia.
• I miss Apple’s Music/iTunes sync
  • I got used to iTunes, and once i setup sync with my iPhone, I loved just plugging in my iPhone and having things just sync. I could easily organize music and podcasts (i get news and stuff daily) on my computer, then in a few mins my updated playlists are sync’d.
• I miss Apple’s intuitive interface.
  • Basic things apple does really well, like size of buttons, how much info to display on a page,

Summer is finally here in Chicago. I woke up this morning and it was already 71 degrees out, giving me (and everyone else) a thirst for summer.  And one of the best things about summer in Chicago is all the street festivals.  In the past I added my favorite ones to my calendar.  This year I decided to go a bit further and I created a Google calendar called “Chad’s Chicago: Summer Festivals and More”.

The calendar includes every major summer festival in the Chicago area.  And as I say on the calendar subtitle, this is “Events Chad would do if he had the time: Summer Festivals, Burningman art and music, beer, outdoors, gardening, etc.”  Currently there are about 100 events listed for this summer – and I’m adding more every day. Great for people who want to explore different neighborhoods on different weekends, or people who want to hit more than one event in the same neighborhood on the same day, etc.

If you just want to look at the events, use the Chad’s Chicago – web browsing link. If you use google calendar already, you can subscribe to the calendar using this Chad’s Chicago – iCalendar link .  If you’ve never done that or forgot how, read the google help on subscribing to calendars.

The main reason I made this calendar was to see all the Festivals on a map.  We all know Chicagoland is a big place, and sometimes you just want to know about events in your neighborhood.  Well, now you can.  My GCM project (Google Calendar Map) puts all events from a google calendar on a google map. Whoa.  Tricky, eh?  Check it out for yourself – GCM: Chad’s Chicago on a map.

Just a quick announcement for the geeks and developers out there regarding my GCM project:

I cleaned up some of the GCM code and put it on github as the mapfilter project, my first project on github. Hurray. I also updated the working GCM prototype with this updated. Most of the changes are under the hood, the biggest of which is that the core javascript functionality is now in its own file, cnMapFilter.js.

UI has not changed at all (I know, sad but true). However, one thing to note is that if you have firebug open and are poking around, you can now add a “debuglevel” parameter to the URL to dump tons of info to the console. Examples

• debuglevel=0 – dumps nothing
• debuglevel=3 – minimal data
• debuglevel=9 – everything

That’s all for now!

Just a quick update to announce that I updated GCM, my Google Calendar Map project.  New things

1. New GCM Homepage
2. Old GCM prototype moved to gcm2009
3. New features of GCM prototype (yes, still prototype)
   • New Date sliders
   • New “Warning” link to quickly fix problematic addresses
   • Reskinned to keep content a bit more tight (still needs work)

Please post any comments about GCM on the GCM Homepage.  Thanks!!

Well, new-ish job.  Back in March I decided to enter the world of full-time employment again.  This is my first full-time job since I left yahoo in 2006.  Immediately after yahoo, I enjoyed time with friends and family for several months. In 2007 I traveled around the world.  Then in 2008 I decided to follow my girlf.. ahem, fiancee, the lovely miss shayna, to chicago where she began grad school.  Since I’ve been in Chicago I’ve pursued various opportunities in technology and business.  I spent most of 2009 doing entrepreneurial ventures with midventures, some successful, some not.  I met a lot of interesting people and learned that Chicago startup tech scene is quite different than San Francisco (aka silicon valley) in many ways.  Then, looking for something a little different (as I often do), I did some contract work in the agency world, working with BBDO and Whittman Hart, then landing at my current position with Critical Mass.

Critical Mass is great. No, I am not talking about the bike ride, although that is great, too.  My Critical Mass (aka CM) is a digital advertising agency. That means they primarily build websites and mobile apps, but operate more like an advertising agency than a technology shop. That means lots of client handholding, helping with strategy, extra creative power, and generally going above and beyond the call of duty. CM likes to say they create extraordinary experiences.  Their clients include big names such as Budweiser, Nissan/Infinity, USAA, Autotrader and United Airlines.  The last one, United, was and is where I spend most of my time. United Mileage Plus (UMP), which is actually a separate business unit from United Airlines, just launched a new version of MileagePlus.com designed by CM.   That made for a very busy month of June for me, Mr. Chad.

My role within the company is somewhat unique.  My title is Senior Developer, but I do more client management than i do technical work.  I also manage other CM developers working on United, and engage with the technical people on the client side.  As somebody who’s had experience in various roles and technologies, I am a good fit for this position. I enjoy the diversity it offers – I interact with a really talented and great team of people at CM, I get some freedom to manage my time and career, and the chicago office in general is a fun and creative group.  I hope the challenges keep coming !!

If you know anyone looking for a job, Critical mass is hiring.  Email me and I’ll put in a good word.

2011-9-15 Update – see below

Firefox 3.5 officially came out a few weeks ago, and I decided its time to try it out.  However, google gears does not yet work on 3.5, and I need my gears to have offline access to gmail and google docs.  Time to revisit the question I’ve had many times before –

Can i run different versions of firefox at the same time?  or different instances of the same version?  … Yes.

The solution involves Firefox Profiles.  Profiles are separate from the application itself – it’s where all your customized data is stored, like homepage, history, saved form info, settings, plugins, etc.  In order to run 2 firefoxes at the same time, you need 2 different profiles.  It doesn’t matter which version of firefox is running a profile. For example, you could have 4 profiles like me:

• Firefox3.0 – google gears in here – use this for offline gmail access
• Firefox3.0_heavy – firebug and other add-ons in here
• Firefox3.5 – surf the web from here
• Firefox3.5_Guest – clean empty profile with no history, used in business meetings

Firefox has good instructions on creating profiles, so I’m going to skip that.  Next step is to figure out a way to easily launch your profiles – here is where it gets into MAC only mode, but not much different for Windows.  If you only have one profile for each version of firefox, you can edit the files inside the firefox app directly, like Devon did. (Another way is to create an application bundle). So what happens if you want to run 2 instances of the same firefox version?  Well, expanding on Devon’s way, just create a script (executable text file) in your /Applications folder that calls the firefox version and profile you want.

However, neither Devon’s solution nor the application bundle is perfect – there are still some dock issues.  First, with both solutions, there will be an icon that launches firefox with your favorite profile, and when you click on it, it creates another firefox icon on the doc.  Ideally it should act like finder or any other mac app – the icon you click on the dock is the one that should bounce and start up.  It should also be the one to right click and “Quit”.   Its confusing enough already when there’s 2 firefox apps running, i don’t need extra icons.  Second, I’m also a big fan of switching between my running applications using Command-Tab (like Alt-Tab in Windows), and when I do that I want the names of the different firefoxes to match to profiles and versions if possible.

So my solution is to have a one-to-one mapping of application name to profile name.  For example, given the 4 profiles above, I have 4 copies of firefox in my applications folder

• /Applications/Firefox3.0.app
• /Applications/Firefox3.0_Heavy.app
• /Applications/Firefox3.5.app
• /Applications/Firefox3.5_Guest.app

Each one of these I edited the Contents/MacOS directory, renaming firefox-bin to firefox-bin1 and creating a firefox-bin script (like Devon did).  Each script is uses its own directory and profile. For example, here’s the contents of my /Applications/Firefox3.5.app/Contents/MacOS/firefox-bin file:

/Applications/Firefox3.5.app/Contents/MacOS/firefox-bin1 -P Firefox3.5 &

The last thing I do to make it easy on myself is to create a bookmark on the toolbar, all the way left on each of the 4, where the name of the bookmark is the name of that profile.  That way I can look at the window and know which firefox profile i’m using.

The downside to this is that you waste some disk space (its about 50MB for each firefox installation).  The other thing that kinda sux is that if you rely on firefox to remember password forms, you must remember to always use the same profile/app, but that isn’t hard if you do my bookmark trick.

Update 11/2: Here’s how I handle firefox updates (like from 3.5.3 to 3.5.4).

Basically i reinstall my fix after update.  That is, rename firefox-bin to firefox-bin1, then create firefox-bin script.

However, This used to work but today it no longer does.  Basically if i call firefox-bin1 -P Firefox3.5 from cmd-line, it works.  But the app uses the default profile instead.   My workaround is to create and use “application bundle” method linked above. still testing …

Others attempts (but no mention of my dock issue)

• http://67central.com/bc/2009/02/07/single-purpose-web-dev-browser/
• http://stackoverflow.com/questions/730748/how-to-change-the-executable-in-an-os-x-application-bundle
• http://weblogs.mozillazine.org/asa/archives/2008/08/shortcut_to_lau.html

2011-9-15 Update – New method

With firefox 4, 5, 6 … Firefox is clearly updating more and more frequently.  My new method is to make it easy to update the main app to the latest Firefox version, yet still keep the profiles separate (cookies, add-ons, etc).

Therefore I create 2 types of apps.  The first is just the app downloaded from firefox, copied from the .dmg file.  I rename this to something like Firefox6.app.  The second type of app is one made for the dock, which will launch Firefox6 with a specific profile.  I call this FF6.app and create it using Applescript.  If you don’t know applescript, there are many sites that explain it, here’s one the talks about creating applescript and saving as an app (more).

Here’s what my applescript code looks like for FF6.app

on run {input, parameters} 
do shell script "/Applications/chad/Firefox6.app/Contents/MacOS/firefox-bin -P firefox6 &> /dev/null &"
return input 
end run

Note on changing the icon – Open finder, right click on an application or document, and “Get Info”. By selecting the icon in the “Get Info” window, with a mouse left-click, it will cause a blue border to appear. Using the keyboard combination of [Apple Key ] + C (the standard copy text command) you can “copy” the icon. Then, by opening another Get Info window and highlighting the icon in the same way, you can use the standard paste text command, [Apple Key ] + V, to paste the icon for the other one.

UPDATE 2010-9-12 Updated Prototype and New GCM Homepage – Leave new comments there!

As previously mentioned in my google maps mashup post, I love maps.  Due to the clean APIs and very fast response, many people have built  cool mashups using the maps API.  I even got paid to do one for landmarkfinder.  But recently I’ve been using google calendar alot, and with all the summer action here in Chicago I wanted an easier way to know where and when to go places.

Enter my new Google Calendar Maps Mashup. Basically it takes a google calendar and plots all the events on a map.  Well, at least all events that have a valid map address.  The mashup works with any google calendar, as long as its public. Basically you provide the URL of a google calendar XML Feed, my javascript code eats it up and spits out markers on the map and lists them on the right side.  The list is really a table, with sortable columns (sort by day, event name, address). The map acts like a filter – you only see events that occur on the map canvas.  For example, if the map is zoomed in to show downtown Chicago, you might only see events in grant park.  But if you zoom way out you will see events in north chicago or suburbs, too.  This is great when there is a calendar with tons of events going on all over the place.  If you only have a couple events or all the events are the same location, its not too exciting.    Check it out.

I got to know jquery and javascript a little better during this project  – I’m even planning on releasing my code as plugin.  Expect that in a week or two after i’ve cleaned it up and solidified the features and UI.

UPDATE 2010-9-12 Updated Prototype and New GCM Homepage – Leave new comments there!

Last week a book I made and printed using blurb.com arrived.  It’s one of many photo books I’ve made (see qoop books), but my first using blurb.   I liked the control i had when making it – There’s an app for the mac that lets you pick a template for each page and add pictures and text accordingly. It took me a while to figure out what pictures to put in there, plus write text for each one.

I ordered a 7×7 book, 200 pages, Hardcover with image wrap (no dust jacket). It was $48 + $8 shipping. see more blurb prices.

I am quite satisfied, the quality is close to that of regular books. My only complaint is that a couple of my pages didnt’ print – the inside flap – I assume its because i opted for no dust jacket. Sigh. Compare cover to blurb preview, also compare to Qoop Books.

I love my macbook pro, as most mac owners do, but if you develop web sites you need a good way to test IE, since 2/3 of the internet uses it (browser stats).  Since IE doesn’t run on MAC, you’ll need one of the following solutions:

• VMWare Fusion 2 vs Parallels 4
  • Pros: IE running on a real Windows OS (2000, XP, Vista), fast and easy to use IE alongside mac apps (once setup – parallel note).
  • Differences: Both are very similar, Parallels 15% faster than Fusion (src), Fusion better (src2, src3)
  • Cons: Both around $80 (30 days free), You’ll need 2GB+ disk space to install a vmware OS
• VirtualBox 2.2
  • Pros: Free version of VMWare Fusion and Parallels, from trusty Sun.  With “Guest Additions” Installed (instructions in user manual), works almost as well as Fusion 2.
  • Cons: Longer setup, flew glitches (src).
• Bootcamp
  
  • Pros: Restart computer, booting into a real Windows install
  • Cons: must restart computer to test IE
• Xenocode
  • Pros: run different instances of a program (ie6, ie7, and ie8)
  • Cons: only runs on windows, need fusion, parallels, or virtualBox
• ie4osx
  • Pros: free
  • Cons: only intel mac, a little buggy, requires darwine and X11,
• Other
  • Browsershots.org – get snapshots of your website in tons of browsers
  • Alkaline and litmus – get snapshots of your website in tons of browsers
  • TinyXP – optimized version of windows XP, (TinyXP and VirtualBox)

I ended up using VMWare Fusion 2, since I had a copy of XP and liked using vmware in the past. Man, do i love it! Fustion 2 is much better than the older version – Installation was super easy. And once installed, you can run it 2 ways – all windows apps (IE7, Firefox, etc) running in one vmware-windows-xp mac application window, or switch to unity mode which lets windows apps (IE7, firefox) run on their own mac application window. I prefer the Unity way – the first time I ran IE the logo appeared on my mac dock and I chose to “keep on dock” to quickly launch and test in IE. Awesome.

In order to test IE6, IE7, and IE8, you can either create 3 vmware virtual machines (XP only likes one version of IE), or better yet, create one XP virtual machine with one version of IE and launch the other IE versions thru xenocode spoon.net (must download/install spoon plugin, only runs on IE).  Overall IE on the mac this way is kinda slow, but so incredibly easy it makes up for it.

UPDATE: Virtualbox is working smoothly .. not as good as vmware, but good enough to not buy vmware once my free 30 days are finished.

UPDATE 2: Figured out a good way to debug javascript in IE – use Microsoft Visual Web Developer. Setup Instructions: http://axonflux.com/how-to-get-internet-explorer-j – more options: http://notetodogself.blogspot.com/2008/08/debug-javascript-in-ie.html

Happy Testing!