DevChrisDev

Slower Developments

2009-04-27T00:24:00.000-07:00

After a bit of an uncertain situation at work, I've changed groups at Microsoft. I'm now working as a Front End Developer at Farecast. They do statistical modeling to determine when it'll be the best time to buy tickets for a specific flight. Pretty freaking cool stuff.

Part of why I'm so excited is that being on the Front End team means I'll actually be writing code that goes into the user interface. We're talking JavaScript, XHTML, and CSS, baby. No more C# and XAML for me. I'll essentially be doing at work what I used to be doing for fun on my own with this site.

Unfortunately, this means that I'll potentially be less motivated to improve this site. Not out of lack of wanting, but out of a sheer desire to do stuff outside of work that doesn't closely resemble work. We'll see, it's possible the differences between the projects and my general passion for this technology will keep me avidly working on both, but we shall see if my passion runs that deep.

Feature Directions

2009-04-11T15:55:00.000-07:00

I'm not sure what I want to do with the site next. Or rather, I know of a ton of things I'd like to do with the site, but the sheer number of choices is preventing me from tackling each of them. Here's a list of ideas of things I can do.

Javascript-disabled accessibility
Server-side caching and page generation (to improve performance)
Cell phone accessibility (generic mobile and iPhone-specific)
Error message box (so I don't use the alert() anymore)
Host outbound links in floating iframes
Fill out Mafia resource
Fill out Ultimate resource

Leave me a comment if there's something you really want to see. Otherwise I'll just sort of get to these in some arbitrary order whenever I have time and feel like it. Hooray!

--Chris

IE8 Released!

2009-03-19T22:25:00.000-07:00

Internet Explorer 8 was released today, for XP and Vista. If you're testing Windows 7, you don't need to worry about upgrading. But if you're using any other prior version of IE, I implore you to upgrade. Details can be found here: http://microsoft.com/ie

Developing websites to match different standards is time and labor intensive. Keeping whatever browser you use as up-to-date as possible will encourage web developers to target the W3C web standards to have as broad a reach as possible, rather than just targeting compatibility with a single browser. It also should mean a mostly feature-complete experience across any modern web browser you choose to use for your browsing leisure.

That said, apparently rendering my site in IE8 mode causes weird things to happen. Like the top left image not showing and all of my pretty generated windows just showing up as plain text. I'll get to these issues eventually and plan to support native IE8 rendering, but for now I've just added the <meta equiv="X-UA-Compatible" content="IE-7"> tag.

So, to summarize, if you use IE, please upgrade. Otherwise, just keep on using your favorite standards-compliant browser.

bookmarkable urls!

2009-01-23T00:56:00.000-08:00

Last week I made it so you could add #tab={number} to a url and go to that tab. Tonight, I added 2 more bits onto that:

There are now support for more user-friendly words instead of zero-indexed numbers
The url now automagically updates when you navigate on the site. So you can stop doing it yourself!

The only time it'll be inaccurate is if you edit it yourself and hit enter. Editing a hash doesn't cause a page refresh, which is useful for showing state in an Ajax-page, but doesn't do so well if the user changes it and expects something to happen. I could write a timer to check and solve this problem, but I'll probably just leave it. You shouldn't be navigating the site by keywords anyway.

--Chris

Direct links to navs!

2009-01-18T23:49:00.000-08:00

I added a quick feature so I could post links to other tabs than just the main one. Adding #tab={a number} to the url will make that tab load instead of the default "Quick Feed" tab.

The plan is to round out this feature at some point, which includes watching to see if it changes and updating it whenever you navigate. But I was lazy and just wanted to get it to work so I could make a blog post, put a URL on twitter, and have folks view my blog through my site. And that's done. So there.

Now with Comments!

2008-12-25T15:44:00.000-08:00

There's now a comments link for each blog entry. This wasn't the original design, but it was the only one that came out to be technically feasible.

The original idea was to have a textbox below each blog post with a "comment" button, so you could simply type in your comment and it would automatically go to Blogger. The Blogger API has the facility to do this, but only in a very limited way:

The Javascript library (and I believe all of the REST API for creating blog comments) requires a user to be logged in. Which means that to comment, you would have to have a Google account and give my site permission to do things on your behalf (namely, create comments). But it could only create comments on blogs of the signed-in user, so I'd have to setup the service to sign me in every time. And then, even when trying that for a "this is a horrible way to do things, but let me just see it work" approach, the mere fact that I had granted my site access caused something in the google script to go into an infinite loop.

I tried giving Google's interactive Javascript API tutorial a try with this whole creating comments thing, and had the same infinite-loop experience. So I abandoned the smooth Web 2.0 style commenting. And now you have links directly to Blogger for all your commenting needs.

At some point, I'll make these links load in an iframe or something so you don't have to wait for my page to re-load when you go back to it.

And, as a bonus: Permalinks!

Javascript is easy.

2008-12-24T02:05:00.000-08:00

The website now has more content! The navigation links for twitter & both blogs now loads recent activity. It was surprisingly easy to do, considering I already had the data cached and some nice reusable functions to make windows. Anyway.

Next on the horizon: either differentiating the "help" windows in each section, or adding commenting ability to the blogs. It depends if i want to work on graphics-fu and css or on blogger api and css. Fun all around.

Sweet update!

2008-12-13T17:45:00.000-08:00

Navigation bar added! Also with contact info! This is pretty sweet because most of the cool stuff was done with CSS, and all the functional stuff was with Prototype, which really is easy to work with.

This also kinda shows where I intend to go in terms of adding content. In addition to the aggregated "Quick Feed", this will give a better look at each data source, in case you want to check it out without leaving my site. Each section starts with an about window to put the feeds in context. When I have time with an image editor, I'll give these windows a different look and make it so you can hide these about windows.

It also means I disabled the XP skin. It was a novel idea, and I'd like to bring it back, but I also feel like it'd be easier to maintain two different skins that keep the overall layout similar between them.

Enjoy!

--Chris

Next Rev is comin'

2008-12-05T01:10:00.000-08:00

My left-navigation window idea is coming along. It looks good. Most of the UI is done with CSS, which is so much more elegant than doing it in javascript. And: my custom window object was mostly reusable. Like 98% reusable!

The two bits that failed me: my window assumed it would be on the desktop, which is no longer true now that I have two regions of windows (left for navigation, right for content). Second, IE completely fails now. I haven't had time to look into why, but the images are off a bit, and the content is a fixed height of about 20 pixels. Very bad. You can see for yourself at http://downchrisdown.com/next/ but please don't use IE.

I'm going to figure out the IE7 problem, then twiddle with the javascript so that the navigation loads some static data. Once that's all figured out, I'll push it out to the main page. Awesome!

Absolutely nothing has changed

2008-09-16T22:13:00.000-07:00

No site update. Nothing. It all still works. Great. Now what?

Well, there are a few problems. The site doesn't work properly on an iPhone, because it doesn't realize it can scroll in the main window. Also most folks probably don't care about the dev blog. Not to mention the layout isn't exactly deterministic (although it is fast). There's also a certain amount of me-generated content on the internet that isn't fed into this site. I should link those things in here. And the site doesn't separate personal from professional.

So, the mind battle for my attention ensues. A multi-user melee between:

Design a splitter page for pro/personal. I'd probably have to design a different css file for professional. But I could load data in background, making the site appear pretty damn fast.
Link LinkedIn in. So easy. I just need to feel like spending some time using the OS X-equivalent of GIMP to get some image magic done.
Build Mafia reference. One of the main reasons for the site. This requires data + design, so it's actually quite a bit of work.
Build Ultimate reference. Once I do the Mafia thing, I could easily repurpose it for Ultimate knowledge. And I've been around long enough to foolishly think I know more about how to play the sport and run a team than a good number of people! Yay illusions of grandeur!
Animations. Yeah, those probably won't happen. Content + design is more fun than adding another js library that might have compat issues.

Oh and also there is this thing called my job which is like the big bully that's 2 grades ahead of the rest of my ideas. If he comes anywhere near the sandbox, all these ideas whimper, give him the shovel and pail, and go play on the swingset. And hope he doesn't follow them.

Chrome

2008-09-03T22:37:00.000-07:00

Dead Horse #153: Another reason why standards-compliant websites are awesome is that when new web browsers come out that support the standard correctly, nothing new needs to be done to make your website render properly in that browser.

My site works fine in Chrome. In fact, thanks to an awesome website called browsershots.org, I can say that my site looks perfect in at least 31 different browser/OS combinations. Which is a bonus for me since I only care about maybe 4 of them.

But that's not saying much. Chrome uses the same rendering engine that Safari does. So I'm really targeting 3 rendering engines: the latest IE, WebKit, and the latest Firefox. But they will have various javascript interpreters attached to them, making it somewhat interesting.

All in all, the comic book describing how to use Chrome was more cool than the browser itself. Detachable tabs at the top? Pretty slick, but that's about all that impressed me. Seriously, if Safari 3 can pass Acid3, then I expect that a new-fangled browser released after Safari3 to pass it too. (I'm also looking at you, IE8 beta 2). A fancy new means of compiling javascript is useless if the damn browser doesn't do what it was intended to.

It does make me want to hack at their source, tho.

Next Steps

2008-08-26T01:08:00.000-07:00

The site is looking pretty solid. I have loads of time to work on it now, so more is getting done bit by bit. Recent updates to the site include:

Each data source is separated into its own window
Each lists where it comes from
Photo blog posts now have the text wrap nicely around the image.

But there are some things I still need to impove, like:

Caching twitter data on the backend so I don't overload twitter's servers when testing.
Rewrite using the Adapter design pattern(?) so it'll be easier to add new data sources
Add new data sources. I'm thinking YouTube is next.
Maybe the ability to scroll back to previous entries?
Also a full list of mafia expertise. That'd be good.

Those are probably roughly in the order I will work on them in. yay for quasi planning.

Layout slightly updated

2008-08-25T15:24:00.000-07:00

Now with dynamic window generation! Fun!
Also each thing is in its own window.

Yay!

Experimenting Is Good

2008-08-24T10:22:00.000-07:00

I'm experimenting with a few different layouts. Not quite sure exactly what direction I want to go in with the site.

But in any case, here's a large amount of text to test against:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The end.

Chris

Photo test!

2008-08-20T23:34:00.000-07:00

I have no idea how the main site will look after I start posting from
my phone with photos. I imagine it can't be that good.

Hence, this test.

New update rolled out

2008-08-20T22:44:00.000-07:00

Main page now shows 1 Twitter feed + 2 blogger feeds: My dev blog & my personal blog. Turns out the Safari rendering issue was just how each browser handled having 2 functions attached to the DOM loaded event. Apparently, Safari only fires the first one. Who knew?

It now only calls one function, which is what I meant to do anyway.

IE7 worked fine, once I took out the debuggerific "console.log" statements. However, there is a new, subtle problem in IE7. Specifically, some parts of the blogger feed have a captial 'A' with a dot above it or something that appears after some words. This suggests that I've got some text encoding flaw somewhere, or that IE7 really thinks the capital letter 'A's foreign counterpart doesn't get enough attention on the internet.

Either way, IE7 users: deal with it.

So close and yet so far

2008-08-19T23:27:00.000-07:00

More restructuring. Had an interesting problem with scheduling asynchronous events. Here's how the sequence currently works:

DOM loads, event tells Google library to load gdata.
gdata throws an event when it's loaded, triggering my loadAllData() function
LoadAllData kicks off all AJAX requests to get Blogger & Twitter data, and store it in the local cache.
When each AJAX request comes back, it fires off a custom event that triggers the DataFunnel
DataFunnel looks at the cache, and only if all AJAX requests have returned does it begin to populate the page with actual data.

I realize the DataFunnel half-defeats the purpose of asynchronous data retrieval, as there is a chunk of time where I have data to display, but chose not to. This more closely aligns with how I want the page to render in the future, and I figure once I get there, I'll be able to take asynchronous bits out and make the overall perf better.

But this isn't published yet. Because apparently it only works in Firefox.

Cross-browser libraries my ass.

More slick javascript

2008-08-19T00:19:00.000-07:00

It's not public yet, but today I did some work to make my data management more extensible. In literally 30 lines of javascript I made a local cache of the entire data objects sent back from Twitter & Blogger. And by 'extensible' I mean once I figure out how to get data from Livejournal or whathaveyou, I can load it just as easily on page load.

Looking back, this doesn't seem too impressive. But it really only took me about 20 minutes to do. And, it means that it'll make it easier for me to do awesome things later. With all the data in the cache, I should be able to do some pretty quick UI things without the slowdown of waiting for a HTTP roundtrip.

Next on the agenda: Change how I render the main window. It's currently 7 lines of static XHTML. The order I load things in does make it hard to have more than one window. So the new agenda is: load the cache, then generate the window prepopulated with data. And I can do this N times too.

I'm excited.

IE7. Great with CSS. Javascript? Not so much.

2008-08-17T22:55:00.000-07:00

I did some code restructuring. You know, the kind of thing where if I do it right it will simply appear to you that nothing has happened? Yeah, that kind. I made the main window more modular, so I can create more than one of them while having them all fit the same css style. Turns out I also had some redundant html I took out. So the code for the entire window is a tiny little snippet. Which I think is flippin amazing.

I developed it in Firefox, checked it in Safari, and then (because I do like to check it now and again) I fired up a VM and looked at it in IE. And it looked fine! Amazing! Well a few minor things were improperly placed, but hey, it was manageable.

Then I went to re-enable all the javascript code all my DOM changes had broken. And I did the same test cycle. Firefox to debug it. Safari, man, it always just works once I've fixed my code. IE?

IE sucks. It was choking deep within the prototype library. Twitter & Blogger integration had gone to shit, and the page was loading with essentially no data. Twitter integration was a simple fix -- i used a variable without declaring it a var. Whatever. When I narrowed down the blogger failure with a clunky IE script debugger, the problematic call was prototype's Element.update() method. But not all calls to that method. just the second.

What the crap!? You totally just executed some code nearly identical to this, IE. You're just making a paragraph element instead of a h2 element. Maybe it's discriminating which code it will execute based on what DOM element i'm touching. That's just racist, IE, and I won't stand for it.

Anyways. Workaround was to use Element.update(). The code looks worse, but it works in all modern browsers. And it's not browser-specific.

So all in all updates to the website this weekend:

Fixed, and re-fixed Twitter integration.
Added/fixed Blogger integration
Crafted new XP theme.
Learned iPhone email posts throw in crappy <br> tags.

DevPhoneDev

2008-08-17T14:42:00.001-07:00

Apparently it's not that hard to blog from my phone, so I as curious
how a phone blog post would look on my newly-integrated-with-blogger
website. So i'm giving it a shot.

Sent from my iPhone

So many updates!

2008-08-16T18:17:00.000-07:00

Today I just went to town on my website. Apparently, Twitter integration wasn't working. That's fixed. Also I figured out how to properly access my Blogger feed using javascript, so my homepage will be updated whenever I blog. Now, I've just got to blog more often.

I also did some css cleanup & added a new layout. You can toggle between the layouts by clicking on my icon.

Next on the list: LiveJournal integration? YouTube integration? Facebook, LinkedIn? Maybe Scriptabulous animations? We'll see.

woohoo progress

2008-06-30T17:35:00.000-07:00

The latest wave of "i haven't touched the website in a while" guilt crept up on me. Well, honestly, it was either that or cleaning the apartment. So I chose website. Go me.

I had some fun figuring out the Twitter API. Next task: Blogger API. Although it looks like Google might provide a javascript wrapper around the HTTP calls so I can just load a library and call a function to get my blogger data to show on my homepage. Madness!

I plan to get loads of the more boring parts working before spiffifying it up with scriptaculous magic. Blogger data is the last hurdle before that.

Public pre-alpha

2008-05-07T00:20:00.000-07:00

When you think about it, the website I want to have shouldn't be that hard to make. I've got a decent design idea, and a lot of incremental cool tweaks that can happen one at a time. So why don't I have a decent website yet?

Well, like anything else, making a website takes time. And, like all my other creative ventures, my approach has been "it's going to be awesome, but it's not ready yet, so wait". That approach is great for publishing things that can't be taken back. Like a book going out to the presses. Or a robot army programmed to dominate the world and serve it to you on a silver platter.

But this is the internet. And despite what some people think, the internet is always changing. Everything is reinvented. Everything is in a state of perpetual beta. So throwing up whatever half-working crap i'm in the middle of right now will fit in just fine. And it will probably look better than most of what's on MySpace.

I also just finished a training course in "agile development" which reiterates this concept of being focused on the smaller tasks, getting them done to quality, and pushing them out. Seems fairly well suited for this kind of thing. It also means you can tell me my site is crap sooner and I can fix it. Or not, depending on if you're right or not.

In any case, enjoy.

Live Mail in Yahoo Mail?

2008-02-21T17:42:00.000-08:00

Microsoft's recent proposal to buy Yahoo got me thinking. As was put forward in the press release, combining these two internet powerhouses could save a load of money in operating costs alone. Resolving 2 data centers into one, 2 search indexes into 1, etc. Of course, the more important question to users is "What does this mean to me?"

Suppose the buyout goes through. As a minimal yahoo user, I use Yahoo Mail, Chat, and (unfortunately) Groups. While these are only a tiny subset of Yahoo's tools, they're the most common and, in my experience, the most useful. They're also ones for which Microsoft has a perfectly well-matched alternative that I also use (Hotmail, Messenger, Spaces). All other issues aside, my main concern is simply what happens to these Yahoo services?

There's the Borg option, where those Yahoo services simply become enveloped and redirect users to Microsoft's online services. While simple, this forces users into an entirely new interface they are completely unfamiliar with, probably against their will. Not only that, but Microsoft loses the nice yodeling-friendly name that many customers have come to trust, which is also part of what Microsoft is paying for.

Or perhaps things will go the Partner route, where all of Yahoo's services stay exactly the way they are. While this is going on, top engineers from both teams can collaborate on a way to add the benefits of each others' technology into their own. This can be done over time to a point where both backends are practically identical, and they can perhaps be merged into one. While very user-friendly, this approach imparts a huge operating cost to Microsoft that this kind of acquisition would normally avoid. Not only that, but realistically there will be some technical challenges that will likely be either impossible or financially irresponsible to overcome.

What if there was a third option? What if both data backends could be implemented to use an additional interface that could be common to both web clients? What if, a few months of development after the merger, you could be able to seamlessly switch between web clients without needing to move your data?

This is where I admit that my solution doesn't make much sense, as it would probably still have a large overhead, what with running 2 data centers and all. But my longwinded point is simply that
this independence of data from the UI is uber powerful. And it's simply a rehashed version of the data portability concept, which I had only passed off as a nice idea until now.

OK I go now.

There's always caching in the bannana stand. Kc Kc

2007-04-29T23:15:00.000-07:00

That weird IE problem I was talking about yesterday? Where I could log out as an admin, log in as a normal user, and it thought I was still the admin? Apparently every browser but Firefox had this problem. And it was all because everyone was caching the old page for better performance.

Is there a good reference on how to use HTTP 1.1 headers in python somewhere? I found the Cache-Control header fairly quickly but it was buried among lots of articles on how it's supposed to be the best way to prevent caching, but also include Pragma and Expires in meta tags for all the browsers.

Anyways. I had some trouble setting it up, but it works now. I also got the new user code up and running, so you can sign up right on the website. fun fun fun!

-Chris

document.write("hello, world!")

2007-04-28T23:14:00.000-07:00

DevChrisDev, the official blog for DownChrisDown.com, is now official.

My name is Chris Downie. I'm a web developer who's an about-to-be Electrical Engineering and Computer Science alumni from UC Berkeley. The internet is what first got me into programming, and like any other technobabble fairly tale, it's where I've finally ended up.

But enough about me. This blog is about developing.

My current major project is codenamed SportSpot, an online sports team management website. In short, it's designed to help organize small-to-medium-sized sports teams that don't have tons of money to have a paid staff to make sure the team runs smoothly. It's primary purpose is to serve ultimate frisbee teams, which run mostly on the dedication of certain individuals within the team.

The login system is mostly working, and it's even got a bit of security in there with hashed logins and some extra precautions to avoid sql injections. The only known issue is that repeated logins on IE6 don't work. By "repeated" i mean you log in, log out, and then try to log in again. I took a stab at this, and have put this on the back burner for now. It's really hard to support IE6.

A little more AJAX work to make a signup page, and the bare bones of SportSpot will be good to go.

--Chris