General

Posts about my day to day life and encounters

Getting started with HTML5 and iOS

I have been doing a lot of work for the past 8 months or so creating content/applications/etc for the iPad using HTML5, and I have ran into a lot of frustrating/annoying things along the way. I started not knowing Javascript, so there was that. Beyond that it was really hard to find iOS-specific information (or even webkit) when I started, so I began to compile a list of useful links when I found them. Here is the list so far, so that anyone who is starting out won’t have to make brutal mistakes or look for hours like I had to :) This is mostly a webkit-centric list, but Mozilla Developer Center is also a great place to check out. If anyone else knows good links feel free to suggest them and I’ll add them.


General
———————————————————————-

Dive into HTML5
http://diveintohtml5.org/
Free web book with a great overview of all HTML5 features.

Appe HTML5 Showcase
http://www.apple.com/html5/
Great showcase of HTML capabilities from apple. Source code is a bit proprietary and hard to understand.

W3 Schools
http://www.w3schools.com/html5/
De-facto resource for all things web, their documentation of HTML5 standards. Usually useful although sometimes incorrect.

Surfin’ Safari
http://www.webkit.org/blog/

The blog for the Webkit project (HTML5 backend of regular and mobile versions of Chrome, Safari, etc.) Great examples of CSS3 features.

Mir.aculo.us
http://mir.aculo.us/
HTML5 expert Thomas Fuchs’s blog. Amazing amount of info. Updated frequently, and offers a number of HTML5 classes.



Fonts
———————————————————————-
Font Squirrel @font-face Generator
http://www.fontsquirrel.com/fontface/generator

Awesome @font-face generator that gives you the font files, CSS and examples for (almost) any font you throw at it.



Mobile/iPad
———————————————————————-

Making an iPad HTML App Really Fast
http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/

Post on Mir.aculo.us that walks through the basics of creating an HTML5 iPad app and optimizing it. Great overview.

Touching and Gesturing on the iPhone
http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

Great overview of touch events.

Offline HTML5
http://diveintohtml5.org/offline.html

Overview of creating offline apps, which is the basis for HTML5 web apps that work without internet connection.

Creating an HTML5 Web App
http://sixrevisions.com/web-development/html5-iphone-app/

Shows how to create a web-app and a lot of grew things to consider. Aimed at iPhone but translates pretty much exactly to iPad.

iPad + HTML5 + Javascript Memory Management
http://www.vargatron.com/2010/08/ipad-html5-js-memory-management/

Article I wrote as an overview of how memory management works on the iPad and how to deal with it.



Frameworks
———————————————————————-
Raphael.js
http://raphaeljs.com/

Framework for dealing with SVG based graphics.

Processing.js
http://processingjs.org/

HTML5 Canvas based port of the extremely popular Processing language. Great for creating interactive canvas based applications.

jQuery
http://jquery.com/

The leading Javascript general library out there. Good for basic effects in websites, but not so much for web-based apps.

jQTouch
http://jqtouch.com/

JQuery-based mobile framework, great for create simple UI based apps, still a bit under development. Not so great for custom apps

Sencha
http://www.sencha.com/products/touch/

Probably the best all-inclusive solution for creating cross-platform mobile apps. Based on the Ext.js framework, Sencha uses an extremely different system for creating apps. Similar to jQtouch (although more complete/powerful) in that it is easy to make simple UI based applications, but not great for custom apps.

MooTools (My Object Oriented Tools)
http://mootools.net/

My favorite (and in my opinion the best) general framework for creating custom HTML5 apps. Supports full object-oriented programming (classes, constructors, extending and implementing classes, etc). Not as large of a user base as jQuery, but a lot more serious/experienced users. Great comparison between MooTools and jQuery (by the creatore of MooTools) at http://jqueryvsmootools.com/

Continue reading » No comments

Pennant HATED on :)

I just came across this extremely detailed post about why Pennant is terrible.

Pennant App: Disappointing Data Design

First of all I’d like to say that while I am proud of Pennant, it is in no way complete and I’ve had an enormous amount of extremely useful constructive criticism from users. I have responded to each user thanking them and have a long list of improvements planned to make the app even better. This kind of back and forth between developers and users that the app store provides is amazing and I can’t wait to start improving things.

That being said, the post above is just ridiculous to me. I have tried posting a response but the comment form does not seem to work . I thought I would respond here since I have my own forum and can post the full argument. My comments work so feel free to respond. I am completely open to a civil discussion/debate.

My Response:
I think the entire context of this article is unfair and incorrect. You are not considering the audience and purpose of this app, but are looking at it from an ivory tower full of tufte books. This application is for entertainment. This is not made for baseball statisticians. If it were it would look extremely different. The entire point of this application is provide an entertaining look at baseball in a way that a normal person would enjoy navigating.

That being said I also don’t agree with many of the points you made about the visualization.
Several points:

Cards/Coverflow:
Perhaps you should mention that the second button allows you to view all teams in a grid, completely avoiding the coverflow.

Subsequent views provide information about the season (wins/losses and percentages for seasons, scores for games).

Also, perhaps you aren’t a baseball fan? The point you make about the colors being arbitrary is beyond absurd, these are the colors of each team which mean a lot to fans. A jersey? That would be great if MLB didn’t have complete licensing over that. I am an independent developer trying to get my project off the ground, if I could afford things like that I would be happy to add them to the app.

Map View:
Again, how is this useless given the audience? Did you know that most non-baseball fans assume that there is a team for every state in the continental US? Is it not interesting/informative to see the distribution of teams throughout the US? Your point about the angels/multiple teams is valid and something I’m looking to improve upon/fix.

Radar View:
Again, you fail to mention that if you hit the third button on the bottom you can SEE IT IN BAR CHARTS with the totals clearly printed. This is extremely unfair to exclude this view. The center visualizations are experimental, and the last views are more traditional and statistical. You are showing what you don’t like and acting like this is the only option. Maybe you haven’t pressed the third button? Otherwise this is pretty ridiculous to exclude.

Bubble View:
I agree with you that this is somewhat pointless now, it was an experiment and I think it needs more information. Also, again, if you press the third button you can see all of the rankings in a normal format. Several users have indicated that they would love to see the actual records of each club here and I plan on adding this information as well.

Bottom Lines:
Your review of this section (except for the game wins/losses) is pretty ridiculous. The entire design of this means that you don’t have to look at the bar graph as you move your finger (which I’m sorry isn’t hitting 3 things at once because it isn’t possible the way the code works), meaning that you move your finger along the bottom and watch the top indicate what season/game you are on. Totals for the game view are provided in the previous view of seasons, however I will say that it might be nice to have them here.

Game Vis:
The view is circular because it allows a full view of the game as a whole, regardless of inning, but also allows the user to visually go around the circle in a time-based manner. What is the difference between a homerun in the 9th that wins 1-0 or a homerun in the 1st that wins 1-0. If you just want to see which team performed better you can look overall and get a general sense of who has longer lines. If you want to follow play-by-play you can go around the circle with your eyes and see how it unfolded. Putting the game in a linear, horizontal layout (which I am doing in the third view, although you again ignore this…) limits the viewer to a left-to-right time based view due to the length. It is much harder to view the game as a whole when it goes across the screen.

How is it weirder when you play the game back? If anything you should like this view since the game is laid out horizontally. If you think this view is weird you are clearly not a baseball fan or the audience for this app. IMO this is the most exciting part of the app, being able to replay a game from history and relive it.

Lastly, your Tufte example drives my point home. This is great. It is very informative. If I need data, I’m going straight for this style graph. Does the average fan want to look at this? Is it a pleasure to use? Do I feel like I’m enjoying myself like I do when looking at baseball cards or watching a game? Nope. Feels like work honestly. There are a ton of great usable stat-based resources for baseball. This is meant to entertain the average fan and maybe get them into stats so that they start looking for stuff like the tufte chart.

If you want Tufte-esque down to the details tools for baseball stats, check out everything they are doing at Bloomberg Sports. They are making amazing things that are meant as tools for hardcore stats/fantasy people.

Continue reading » 6 Comments

New Site is UP!

Man,

That took way too long. Finally got a few spare moments to get my new website up and running. Hopefully will be pushing out updates and blog posts regularly now since I am no longer ashamed of my own site. Funny how hard it is to do something for yourself, I guess that is a good sign though since I have been so busy.

Many updates coming soon, including a full post (and accompanying website) for Pennant, my MFA thesis project and the current main focus of my efforts.

Several other fun projects coming soon as well!

For now, check this out:
http://techcrunch.com/2010/05/23/future-mario-twitter-demographics-and-worst-phone-ever-win-the-tcdisrupt-hackathon/

I was invited to work with Zach Lieberman,Takayuki Ito and Lucas Werthein as part of a team in the Techcrunch hackathon competition. It was an AWESOME event . Great food, great people and a lot of fun. Crazy nerd projects all over the place, really inspiring to see some of the projects that came out of it.

Our hack “Future Mario” won an award and we will be presenting it at the Techcrunch Disrupt event this coming week. Basically we are controlling Super Mario Bros using vocal pitch detection, eye tracking, head tracking and blink detection. Its a bit of a rough hack but its tons of fun and has a lot of potential.

Thats it for now its late and I’m spent, but I can finally rest knowing I can tell people my URL again :)

Continue reading » No comments

And I'm BACK!

IDK if anyone actually reads this blog on a regular basis of any kind or subscribes to my rss…but just wanted to say I’ve been posting everything this summer to another blog (thesis.vargatron.com) but I felt like I was ignoring this one (I was) and got sick of it. So I imported all my posts and I’m now back to using this blog exclusively. I feel like I’ve built this blog up pretty nicely and its better to just keep it going, plus I didn’t feel like making ANOTHER wordpress theme. Ugh.

So what have I done all summer? Thesis research, traveled to China for a month, worked on things for developing nations in Africa, taught an introductory graduate course, and worked with Zachary Lieberman on a number of projects (one of which is redesigning his site so that its not insanely crazy and hard to update…thats coming soon).

Other than that I just started school again so expect (hopefully) a lot of updates on everything.

Continue reading » 1 Comment

Awful Client Insurance via PHP!

Having done a fair amount of freelance work, I have a lot of experience with different types of clients. Some are easy to work with, some difficult. Some pay you on time, some argue over money but pay you in a timely manner, some take a bit to pay you but just cause they’re lazy and you get the money eventually. Then there are the deadbeats. You do a site for them, you put it up in good will, and they don’t pay you. You send them an email asking for payment, they side step you and still don’t pay. What do you do to protect yourself against this?

You could say “I’m gonna take the site down within 10 days if I don’t receive payment.” This is all well and good, but what if the client decides that they’re gonna change their FTP password and lock you out? You’re screwed.

Since I am currently dealing with a deadbeat client, I thought of how I could negotiate this. Then I realized….PHP!

PHP can change (and delete!) directories on a server. So by hiding a simple PHP script on the clients site, one which only you would know how to get to, you can put a little insurance in there that will let you delete the entire site by simply going to a URL.

Here’s a link to the code that I am using (thanks to Kunal Patel for the link :) )

Recursive Directory Delete with PHP

Continue reading » 1 Comment

IMAP SSL with MAMP

Tags:

OK…super nerd warning on this post….

I am currently attempting to use PHP as a gateway for retrieving my IMAP mail for my Speak to Me/Breathe project, and I hit a MAJOR snag last night. It seems that the version of PHP 5 that currently comes with MAMP is totally not compiled with support for IMAP SSL (secure email connection). I think this is one of the key differences between MAMP and MAMP Pro which costs $70. This is a major bummer for anyone who wants to grab gMail, since they basically require that you use a SSL connection. After about 4 hours of wrestling with my file structure and recompiling both PHP 5 and the IMAP extension about 20 times, I finally figured out how to create a version of the IMAP extension through Terminal (something I’ve never done…). Since I went through all this pain and suffering, I figured I’d share it with everyone so that they don’t have to.

Basically all you need to do is download the attached “imap.so” file and drop it into the following directory:
Applications/MAMP/bin/php5/lib/php/extensions/no-debug-non-zts-20050922

Thats all there is to it. If you’d rather figure this out on your own I recommend reading the following instruction site, but keep in mind that I had to do a couple different things to get this to work, namely manually creating the “/usr/local/include/” directory in my local Apache PHP directory. You then need to follow comment #5 and copy the compiled files from the OS X Apache directory into MAMPs php extension directory (the one I mentioned above).

Thats all…hope someone can find this useful and avoid the pain I had to go through….

Click Here to Download IMAP SSL extension

Continue reading » 18 Comments

Really Inspiring TED talks

Tags: , , , , ,

Here are a couple TED Conference talks that we watched for computation that I thought were extremely interesting.

David Merrill discussing Siftables…an new,insane, completely modular interface

Caleb Chung discussing his life’s work and Pleo

Continue reading » No comments

Space Ice Cream

Tags: , , ,

I’m at the Franklin Institute in Philly waiting for the Dark Knight to start on IMAX, go in the gift shop and i see this…SPACE ICE CREAM…freeze dried ice cream for astronauts…why is this only available in museums, is so damn delicious!

Continue reading » No comments

Crazy ping pong ball mechanics

Tags: , , ,

This is a crazy 3D animation using ping-pong balls to create music…obviously not possible in real life but makes me wonder how something much simpler could be created….
and here is a real life example that was shown to us by one of the creators (Dan Paluska) last year in Algo, created by several artists from MIT for Absolut Vodka

Definitely awesome to think of creating sound through mechanics…I hope I can apply this to something in the near future using servos/solenoids/etc.

Continue reading » 2 Comments

Air Max Skyline

These are so fucking hot. God I wish I wasn’t poor these would be bought in a second.

Continue reading » No comments