Major Limitations of the browser

Im currently building a web application that works more like an application on your computer than it does one on the web.

We all know that everything is going there, but there are currently a lot of major limitations in the browser that are holding it back from coming quicker than it could.

First: I know a lot of this poses security problems, but ignore that for a second.

Id like to be able to:

1. • Ask the user if they would like to save before closing the window (and even allow them to cancel)
2. • Add menu items, or control the file menu.
3. • Customize the contextual menu system
4. • remove the address (and others) bar to control the look of the entire page.

But maybe, just maybe, I need to stop making an application on the web, and go back to making a web application.

Sometimes I question, but alway reassured

error: failed to push some refs to 'git@github.com:ameyer/MooIndent.git'
To prevent you from losing history, non-fast-forward updates were rejected
Merge the remote changes before pushing again.  See the 'non-fast forward'
section of 'git push --help' for details.

Wordprocessing on the web

I realized it had been awhile since I updated. I think most of my posts are starting this way it seems. But i have been working hard on a few things, one of which is all about wordprocessing on the web.

I have been working on bildr code a whole lot more than I care to say. I actually found a HUGE fundamental flaw in how the versions are created. Essentially I thought it was working because I wasn’t properly testing it. Every edit was being tracked, then one time I did a new edit and all my files disappeared. Long story short, the fact that it worked before was dumb luck. But all is fixed.

But on the productive side, I have been enabling bildrCode to allow users to evoke typical commands used by coders. One of them enabling tabs. Tabs are HUGE in code. You tab to indent your code for better communication, but some languages actually require this. So tabs, being so important, I worked long and hard to make them work.

Hitting the Tab will make a tab as it should.

I know that tabs are used to cycle through fields on a website. BUT you need to stop thinking of this as a website and start seeing that they are just applications that live on the web.

So tabs… Well you can now select a bunch of text, and hit tab, and all of the lines will shift over. Or you can hit shift-tab and they will shift back. The whole process is way complicated to get it working correctly, but to the user, it just works.

——————————————RANT——————————————

I have to make a plug here for webkit, specifically safari. I develop in safari. It’s fast. Maybe too fast. I move over to firefox and im annoyed with how slow its javascript performance is. Also you can see some fundamental flaws in the way the developers felt it should work.

Holding a button down only fires one event, but the computer knows to enter that key over and over until they let go. WHAT???? Like this aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <– I just held down the a key down. Well safari knows that there are like 20 As there, so it fires a new event for each. But firefox feels this should just be the one, so the first a sends an event, but then the rest get no love.

Small update

Hadn’t posted in awhile so I figured Id do a short one.

Things at work have been really busy. We finished our beta product, and sent it off to our first customers. You never remember all the things that need to be done to make this happen. Everything from shipping and boxes to serial numbers and systems in place to make that happen.

The software that I head up  is really shaping up. There are so many little things that need to come together to make this happen well, and you get so jaded when you start on it because you can plow through so much so quickly. But soon it comes down to the nitty gritty and things move at the same pace, but look much slower. But as my good friend Zack Kamen said “Applying the varnish can be 90% of the work” – And from what I have experienced, the varnish is what changes “so-so” software into great software.

I started looking at my bildr code database, and started seeing redundant information due to adding things on to it. But I didnt know how much until I took it into a visual editor and was able to see all the tables and all the fields at once. The schema helped me completely redo it into something that I hope will work much better.

Videos Videos Videos

So a few days ago I promised video(s). And I have them now. But I had them on Thursday too. I uploaded the videos, and nothing happened. They never finished doing their thing on Vimeo.

I went to NYC for the weekend and got to hang out with my friends / cousins.  - AND for the first time in as long as I remember, I left my computer at home. Yeah, I can’t believe it either.

So I just put them back up.

If you watch any of them. Watch the one on Tags. The others are things you have seen before – on other sites that is. The Tags one (#3), I doubt you have. Im pretty sure Im on to something with this. – Seems to work really well.

The only thing holding me back is me.

Seriously, I need an entourage. Just some people who can answer questions, or at least point me in the right direction. Actually I need a mySQL cookbook. (quick search on amazon – found one MySQL Cookbook)

Reasoning? I have a ton of ideas, and I want to create usable proofs so I can prove their worth. But sometimes, the longest part of building it is finding out some small part needed to make it happen.

I haven’t posted in 7 days, but do not think that is because I haven’t been working. On the contrary. I haven’t posted because I have too much to talk about. A few things I have been thinking about, other that I though about a long time ago, and other that I have been working on. So what I want to tell you about,  but will hold off for more time are:

• ajax comment system I made
• Hands, do we really need them? (web usability)
• How to really help people with their papers about fiction writing
• My bread crumb system
• Libraries of the 21st century, and how to get around the licensing issue.
• Nice tag system Im working on.

So, I know it is a lot, and we shall see what I actual talk about in the future. But… Ill post a video on at least one of them in the next few days.

77 in 365

Today is the one year anniversary of my development blog, and my 77th post.

It is so strange that it has only been a year because I have done so much.

In the past year I:

• Redesigned Wikipedia
• Came up the idea for bildr
• built an SVN like system called bildrCode
• Closed RISDpedia
• Got married
• Graduated from RISD
• Got a Job
• Interviewed with FaceBook
• Went to Palo Alto – thanks facebook
• Bought a car
• Relearned to drive
• Designed Foode
• Met Bill Buxton
• Read a lot of books
• Read my first fiction novel in like 10 years
• Went to Europe for my first time
• Meet my niece
• Built and Prototyped a dimmer for Zack
• Learned to make some pretty nice infoGraphics
• Perfected the letterpress look
• Designed my wedding invitations with ben
• Moved to a new bigger apartment
• Started selling off my art collection – pay of loans
• Learned the arduino system and language
• Spent too much at SparkFun
• Learned Mootools pretty well
• Used a ton of sensors
• Built a wireless RFID reader
• Applied to Grad School
• Got Denied from Grad School
• Built a new website for my portfolio
• Started this blog
• Made a ton of videos
• Learned to do some pretty good voice overs
• Taught actionScript basics to a class in just 4 hours
• Built new collection system for my Art forum
• Learned a lot more SQL
• Made a pretty nifty flickr viewer
• Redesigned Tellart’s Website
• Made a game for kids that measured their speed
• Built an RFID radio jukebox
• Went to the presidential Inauguration
• Got the Flu – Type A
• Worked a lot on a multitouch system
• Worked a ton with high-power LEDs
• Learned to SMD solder
• Worked with more than a few touch sensors

Wow… good year

From flash to Moo

As many of you know,  Matt Cottam of  Tellart was my mentor while at RISD. I worked with Matt for over a year and a half on may projects. And he was nice enough to hire me for an inter position one summer… The same summer I was learning actionScript for my multi-touch table. That Summer Tellart + Zango worked to design a beautiful new site for tellart. After all the design was done they allowed me to work on the programming of it in flash. I actually did quite a bit of it, but then had to leave to go back to school before it was finished. After I left, I think they noticed how bad some of the code was, and redid most of. Though I did see some of my code in there latter (very little). – That was summer of 2008.

Fast forward to spring 2009. Im reading the Mootools Documentation and found a class I thought I could have used to re-create the site in JavaScript. It worked. In about 50 lines of code I had made a mock-up that functioned very similer to original. It only took me a few hours. I sent it over to the guys at tellart to show them it could be done if they ever wanted it to. But why?

<rant>

So here is my flash rant. I love flash and ActionScript. But not for making web pages. 90% of the time flash is used on a site, it could have been done with out it. But many who say “Who cares?”. I do. And you should too.

Flash ruines page searchability, navigation, SEO, and a lot more. Not to mention that poorly done it is a CPU HOG!

</rant>

Then, just a few months ago, Matt asks me if I still had that code, and if I would be interested in completing it for their site. When am I not interested in more javaScript work?

So the deal was. The site needed to work on the iPhone, retain all the movies/slideshows, have all the portions be bookmarkable, and make it easier to add more content.

I did it. And my code is now in use on their site.

I kept all the flash for the videos and slideShows, and I used mootools to check for flash. If it was not there, replace all the flash, with jpg images.

I made all the elements on the page dynamically generated in PHP. Using some simple arrays, they can now add a new project with a single line of code. And it will resize everything, and create all the parts needed for it to work without modification.

I enabled bookmarking. This is a lot harder than it sounds. There is one page. One. So what do you bookmark? Well there are 7 projects and an info page with a lot of info. Each project position is boorkmarkable. So if you go to the link, the page will load, and it will auto scroll to that project. If you bookmark a person on the info page. It will auto scroll to the info slide, and do a nice ajax call to grab the info on the right person.

Another part was … if a user is watching a video on a slide 0r slideshow, and moves to a different slide, we needed to stop the current slide, and return to the teaser frame. Because the moving part is all javaScript, there a language problem. How do you talk to a flash movie from JS? With mootools. It’s Swiff class is wonderful (though incorrectly documented). I just had to render all the flash to include the JS connect. Worked really well.

It took a full weekend to do (I had thought less) but it came out really nicely. And on a javaScript friendly browser, it is actually a bit faster than the flash version.

… is so five minutes ago

As I talked about in my last post, humans do not think of time the same way computers do. A database will hold a time stamp like 2009-10-27 12:00:00, but humans like to think of time is imperfect.

John Maeda based a clock on this Idea years ago, but I think it is important to hash over it again.

So last night I was thinking about how vimeo and other sites (as well as what I made in the last post) works like this:

• Under a minute list amount of seconds
• Over a minute but less than an hour, list minutes
• Over an hour/ less than a day, hours
• Over a day/ less than a month list days,
• And anything over a month, list months.

This all seems pretty nice, just as humans, our care for precision becomes less and less with greater numbers. (think about an event. Saying it was a week ago when it was only yesterday – Saying it was a month ago when it was 36 days)

So this seems to work. But consider this. This says it is 1 month ago when it is 2 months minus 1 day. Humans don’t do this. At that point we would say 2 months. Or if you knew exactly, you would say almost 2months. Or 2months tomorrow.

Sadly, the computer can only do what we tell it to, and it still likes its time down to the second. So how can we make this sec,min.hour,day,month thing even more human like? Well without getting way too complicated do something like:

• a few (unit) ago
• almost (number) (units) ago
• just over (number) (units) ago
• just about (number) (units) ago
• about (number) (units) ago
• amost (number) (units) ago
• almost exactly  (number) (units)ago
• a couple of (units) ago
• yesterday
• yesterday night
• yesterday morning
• last month
• last (month name)
• this past (month name)
• a month ago
• last (season)
• and so on…

It’s a little come complicated to work out, but it would just be a long if statement.

If you want more personality, you can have ones that are similar in an array, and randomly choose one so that it wont always say “almost a month ago”

But sometimes you need to know exact time right? This wouldn’t work too well in critical situations. You can have it both ways. Vimeo does it. On some labels you can hover over them to see an actual time stamp. Or if it is a link, you could have the title have the timestamp so when a user hovers over it, it will popup.

Although I wonder how people would respond to 2.9 months ago? A little un-human, but maybe this would work as well?

The wildfire that is the web

This may look like a repeat post. But it is not. Something happened. Since I posted things with bildr got out of hand. Someone at Make Magazine posted the video on their front page, then tweeted about. From that others picked up on it and 2,800 views later… here I am.

Over 70 people emaild me about the project, and I responded to every one. I was so sick of email at the end of the day, I couldn’t come here to post anyting about it.

So there is a crud ton of pressure to get this off the ground. And luckily most of the 870 people contacted about helping out. Some wanted to make money, or hock their products. But most loved the idea and felt compelled to help out.

So now I have a ton of work to do, and Im feeling the pressure. I think I just need to take a deep breath and get to work.

So you know on your favorite social site, the time posted is always like 2 seconds ago, 3months ago. I really like this because it is friendly and less mechanical feeling. It is also nice because no math is needed, and it really is the way people talk about time. “I got married about 2 weeks ago”

So I wanted to make a function that did just this really quickly. So without further ado…
I used SQL to do the calc because… (see below)

function funTime($timeStamp){

	$sql = 'SELECT TIME_TO_SEC(TIMEDIFF(NOW(), "'.$timeStamp.'")) AS ago';
	$query = mysql_query($sql);
	$return = mysql_fetch_assoc($query);

	$timeDiff = $return['ago'];

	if($timeDiff < 60){
		return $timeDiff.' seconds ago';
	}else if($timeDiff < 3600){
		return floor($timeDiff / 60).' minutes ago';
	}else if($timeDiff < 86400){
		return floor($timeDiff / 3600).' hours ago';
	}else if($timeDiff < 2635200){
		return floor($timeDiff / 86400).' days ago';
	}else{
		return floor($timeDiff / 2635200).' months ago';
	}

}

You can do this easily outside of a function by just replacing timestamp with a time record in the database. like so…

SELECT TIME_TO_SEC(TIMEDIFF(NOW(), timeStamp)) AS ago FROM table WHERE table.record_id=1