This is replacing the Friendfeed blog+twitter entries that appeared previously because:

1. I love playing with new APIs. The T one will be my third personal API integration. Did FF and Flickr prior.
2. I’ll tweet the better blog entries, so I don’t need a merged blog+twitter feed. Just Twitter is fine.
3. FF is a second-hand tweet, why not get it first-hand?
4. FF has great features, but I feel closer to T.  When I had FF on a bunch of different social services it was more worthwhile for the merging of the feed.  But I’ve since whittled it way down.

My PHP cron job is aided by TwitterLibPHP by Justin Poliey.

I recently decided to make Flickr the primary place I upload personal photos. Facebook used to be the primary place to upload, but frankly, I’d rather have people going to my website than Facebook for my activity, and I’m not interested in being in front of people constantly, if much at all.  Where better to not be noticed than on your own site.

One day I got a wild hair to start a picture-a-day project on Flickr called “365″. That restarted my interest in showing the pictures on my site.  And I just enjoy playing with API’s.  Especially well-done ones like Flickr’s.

To get the pics showing, a cron job runs every night that uses the Flickr API to build a javascript file that my homepage calls whenever people visit. The response from the API takes too long to tie it directly to my website; best to have a little static file just ready to go whenever. So there’s a javascript data file made every night, then a javascript controller and CSS for the web page that puts it all together. And the jQuery library eases the javascript code as usual.

I’d imagine this is the most sensible approach. If you have a better way, please tell me in the comments here.

It would be nice to incorporate a “Set” selector someday.  Good enough for now.

The client said make it darker. Probably not a bad move. What do you think? Is there an optical illusion that the header is shorter?

If I always have a camera (phone) and an internet connection (3G or Wifi), how is this going to be difficult? Maybe it’s the discipline of remembering. Every day.

But there are lots of things I do every day. Like get out of bed. Get back in. And so on.

I’ll set an alarm at the end of each day. Worst case, I take a picture of the ceiling. And there are bound to be days like that.

But not a lot. Follow along! Let’s see if I can do it!

And on Facebook.

It has a fresh new look and lots more content flexibility thanks to a new custom CMS.

The most obvious new feature is the powerful and prominent search field. It delivers immediate on-page results as the user types and is integrated into every page. To speed up the browsing experience, the results sidebar stays open as the user clicks thru the results. When the best result is found, the results sidebar can be closed so visitors can focus on what they came for.

The main menu has been simplified to only seven items. The previous sub menu links now appear in the sidebar when visiting one of the primary pages.

Does your site need a slick design and new features every now and then? Contact the pro: SuperWebGuy.

The last design had/has (still transitioning as of 6/7) some problems.

First was inconsistency.  Homepage, blog and inside pages all looked different.

Second was my fat mug was getting old, even for me.  My profile pics are adding up and it is time to narrow down, find a new, normal-looking profile pic.  Decided to take the picture during my new pastime; both the picture of my head and the landscape shot are from a bike ride this weekend.

Third, the technical implementation of the buttons wasn’t right.  I figured out a more right way, thanks to cssvault, and look I forward to using this method of mouseovers on all foreseeable projects.  Nice blend of real links, unordered lists, image sprites, and popular CSS.  This was the biggest reward of the project.

Forth, I need to keep pushing towards a “Web 2.0 feeling” site.  Even though some would say Web 3 is upon us, better late than never.  Play with the new navigation.  That’s a big part of this attempt.  There is a big orange drop down when you hover over “web design”.  Somewhat reminiscent of vimeo I guess, or one of these.

Fifth, I need to hone my cross-promotion of superwebguy.com.  There was a definite style divergence on the homepage that I wasn’t happy with.  Now the homepage has its own feel and doesn’t try to feel half like SWG.

What I ended up, while perhaps not as in-your-face and a little text-heavy, is solving the above issues.  Like?

Photo credit

Instructions:

1 – Go to “wikipedia.” Hit “random… Read More”
or click http://en.wikipedia.org/wiki/Special:Random
The first random wikipedia article you get is the name of your band.

2 – Go to “Random quotations”
or click http://www.quotationspage.com/random.php3
The last four or five words of the very last quote of the page is the title of your first album.

3 – Go to flickr and click on “explore the last seven days”
or click http://www.flickr.com/explore/interesting/7days
Third picture, no matter what it is, will be your album cover.

4 – Use photoshop or similar to put it all together.

5 – Post it to FB with this text in the “caption” and TAG the friends you want to join in. (you can untag yourself if you don’t want this photo up)

New

Old

What better way to pass the day and practice chops than to redesign your blog again?

Nothing new in terms of features, just less crappy looking then the last version. I think the blog really needed it. 74% increase in rounded corners.

I would like to thank the MAMP project for being able to easily run and test on my local machine, and the Firebug plugin for drilling through some chaotic Wordpress CSS, keeping me from pulling my hair out.

Leave a comment if part of it is jacked or if you think it’s awesome.

This is a transition from wordpress.com to wordpress.org’s blog software.  This allows me to use my home page’s theme for free, further consolidating my domains.

This is my first step into wordpress theme work.  I downloaded a theme and just started editing it until it looked like davidvanvickle.com.  Wordpress has made using their software a pleasure.  Nice work guys!

Why care about working with objects?

Object oriented programming helps keep web page code neatly encapsulated and reusable. You can define a bunch of variables inside an object instead of the ambiguity of exposing variables open in the document and having naming conflicts. Plus encapsulation code makes it easier to read.

There are a couple different approaches to building Javascript objects. Which approach we use largely depends whether the object is one of a kind, or whether there should be multiple instance of a kind of object.

Singleton

First let’s look at the “one of a kind”, or “singleton”, type. It’s a generic Object-type object. It’s easy to make. Just set a variable equal to a set of braces. The show transcript has examples of what I’m talking about.
[sourcecode language='jscript']var myObject = {}; // short form of “ var myObject = new Object();”[/sourcecode]
An object can be made up of properties of any object type. So my dog object has a “ageInDogYears” that’s a number, and a “name” that’s a string, and a “favoriteToys” that’s an array. We add these properties using the property name-colon-value, comma, property name-colon-value format.
[sourcecode language='jscript']var myObject = {width:”1024px”, height:”768px”};[/sourcecode]
As I mentioned, properties can have any type and types not only include Strings and Numbers, but also Functions and Arrays. You can make an array quickly by putting two brackets together, just like you can make an object quickly by putting two curly braces together.
[sourcecode language='jscript']var myObject = {};
var myArray = [];[/sourcecode]
Javascipt Object Notation, or JSON, uses a combination of object and array notation to define data packets sent between a web browser and a server. Here we have an object which contains an array of objects. Each object in the array is like a record of data, or a row in a spreadsheet.
[sourcecode language='jscript']var myObject = { data:[{guid:”month-1”, month:”January”} , {guid:”month-2”, month:”February”}] };
alert(myObject.data[0].month); // “January”[/sourcecode]
Functions are also object types, and as such, can be defined within our objects. So our dog object can bark by adding a “bark” function.

This is how we would add a Function object type property to an object.
[sourcecode language='jscript']var myObject = {
dimensions:[“768px”, “1024px”],
alertDimensions: function () {
alert(“Height=”+dimensions[0]+”, Width=”+dimensions[1]);
}
};
myObject.alertDimensions();[/sourcecode]
Custom Objects

Now let’s look at custom object types. Conceptually, an example of a object type would be “Dog”, and an instance of a “Dog” would be “Rover” and “Spot”. “Rover” and “Spot” are instances of a Dog. Objects are instances of an object type. We use this approach when our objects are not “one-offs”, if we need multiple instances of a type of object,… or we’re dog lovers. We make an object from the object type, and then use it like any other object. To make an object type, just make a function, except inside the function use the “this” keyword before property names.
[sourcecode language='jscript']function Dog (n) {
this.name = n;
}[/sourcecode]
We can define functions for our object types. Remember how are dog learned to bark? Just use the “prototype” keyword after the name of the function, then the function name set equal to a function definition. And remember to use the “this” keyword before the property name.
[sourcecode language='jscript']Dog.prototype.bark = function () {
alert(“Roof! My name is ”+ this.name + “.”);
};[/sourcecode]
Instantiate the object type like any other using the “new” keyword.

var myDog = new Dog(“Spot”);

And to access object type functions, just use the usual method, separating the object name from the function name with a period, with parenthesis after the function name.
[sourcecode language='jscript']myDog.bark();[/sourcecode]
Rich Internet Applications (RIA)

Object oriented client side programming is in heavy use in web 2.0 sites. A page has become an opportunity for RIA’s, or rich internet applications. All different kinds of Javascript objects interact to handle page events, data requests, and user interface animation and rendering.

Various object oriented Javascript methodologies, libraries and frameworks have popped us such as JSON, AJAX, jQuery, Prototype, Scriptaculous, Spry, and SproutCore. These obscure the long standing browser implementation discrepancies that have given client-side programming a bad name. Javascript programmers can focus more on using the libraries and less on browser differences. The show transcript has links to these projects.

• JSON
• AJAX
• jQuery
• Prototype
• Scriptaculous
• Spry
• SproutCore (framework for Apple’s MobileMe)

SproutCore

The past few weeks a new Javascript framework came to a lot of people’s attention. It’s called Sproutcore. At Apple’s World Wide Developer Conference they presented some of their handywork. Turns out the existing .Mac Web Gallery’s were written with it. Although I hear there have been a bunch of optimizations of it since then. I’m a fan of the .Mac Web Gallery, but it is a little slow. Fortunately they’ve sped some things up for the upcoming MobileMe package that’s going to replace .Mac. Anyway, Sproutcore is really something. A developer with Ruby installed can install the framework with a single line of code on the command line.

sudo gem install sproutcore

That’s it. Installed.

I’ve read a little bit about Ruby on Rails but I haven’t had a chance to use Ruby so I’m still figuring that out. Lucky for people like me, Sproutcore only uses Ruby for building the HTML, Javascript and CSS files for deployment. The server can be anything. Apache with PHP, IIS with .Net, RoR, whatever. Database, doesn’t matter. Ruby and Sproutcore are all about the developer experience, Sproutcore’s final deployment is server agnostic. It’s all just HTML and Javascript and CSS files. Of any server can serve those.

So I’ve been a Javascript guy for quite a while, and I’m all for well done Javascript code. Sproutcore takes it to a whole other level. We’re talking about a framework that makes you use common design patterns like model-view-controller (or MVC). It outputs a browser independent UI with it’s own cool buttons and list views.

In terms of the model layer, it keeps track of the data such that you can imagine being able to build an app that doesn’t need an internet connection. Sure you would at first, but the data is stored locally and the server refreshes it, but it’s not a dumb system that is just the controller. It’s the whole model-view-controller pattern, deployed. The model could be stored someday similar to what Google Gears does where it stores web data locally on your system if you let it.

I’m really fascinated by this project. Check out the people who made it at Sproutit.com. Sproutcore is at Sproutcore.com. Sproutit and Sproutcore were started in order to create a web based email system. Then I guess Apple came and started contributing. Soon it will be open source.

There is a google group at

http://groups.google.com/group/sproutcore

and a wiki where people are posting tutorials.

http://github.com/sproutit/sproutcore/wikis

There is a version control repository in case you feel like lending a hacking hand to the project. The repository also has the samples that you can download with the easy Subversion checkout command.

svn co http://sproutcore.googlecode.com/svn/trunk/samples

On a Mac the code goes into a directory where all the Ruby helper code is there to check out.

/Library/Ruby/Gems/1.8/gems/sproutcore-0.9.11

And you may actually need to get into the source code because there isn’t much in the way of documentation or examples yet. It’s very young, as documentation goes. And it seems people are hungry for tutorials. The Sproutcore folks are posting those as fast as they can. If this project plays it’s cards right, which it seems to have done so far, someone will make some money selling books. I’d buy one. I’m digging like crazy through the code trying to figure out how to make stuff work. And I’m not getting very far. That’s a big part of the reason for the late podcast. I’ve been studying it to say something worthwhile about it.

They’ve posted a “hello world” example and I can get that going – no problem – but I’m a little hung up on getting data back and forth from the server and binding some of the views to my data. Anyway, I’ll figure that out. When I do, you’ll know.

I’ve put a snippet of code taken the “hello world” example and put them in the show transcript at PodTurtle.com. Check it out. Or better, check out Sproutcore.com and help me figure this project out.

# sproutcore hello_world
# cd hello_world
# sc-server
# sc-gen model hello_world/my_model
# sc-gen controller hello_world/my_controller
[Edit english.lproj/body.rhtml]
# sc-build

The command “sproutcore” makes a folder with a bunch of files to start editing. You “cd” in that new project folder and run “sc-server” to fire up the server. At that point just point your browser to

http://localhost:4020/hello_world

and you’re looking at the browser output. Make a change to

english.lproj/body.rhtml

and refresh the browser. You’ll see the change right away. The Ruby commands inside of the RHTML file are only view helpers. They do the work of building the HTML for you.

Technically it’s using Ruby to compile the HTML, but in the end you run the command “sc-build” to covert the RHTML files into HTML files and upload all that output to any server. Again you only need Ruby for building; the final product is just straight HTML which can run on any web server.

Sproutcore is about to go open source, about to go version 1.0. The current version is 0.9.11. So far so good. I’ll be following this and adding it to my arsenal. Very exciting.

Conclusion

So to wrap it up, to make powerful and compatible client side apps somewhat quickly, it is good idea to follow these projects that have gained traction, and become familiar with object oriented Javascript programming. Client side scripting has rich potential for the web developer, so expect future entries along these lines.

Sketch and final of a bird-man creature in action with a basketball.