michaeltimbang.com & timbangphoto.com

Designed and built these twin wordpress backed sites for a local photographer Michael Timbang. This custom slideshow theme uses JQueryTools, JScrollpane, CSS and some of my own custom scripting for the interactions. The goal with the design was to make it visually powerful and super minimal for the end user and super simple for Mike to upload photos and maintain his site without really needing to know how to use wordpress.

foodiemob.com redesign

Spent last weekend restyling foodiemob to make it easier to find recipes. I also revamped the grid, logo, look, tone and feel… It is still a work in progress… should have a mobile version of the site available soon….

libertiphoto.com

A couple months back I designed and implemented a custom WordPress theme for a local photographer – Dan Liberti.

It is designed to leverage the CMS and category tagging aspects of WordPress to make it super easy for him to add photos and have the flexibility to display them wherever he needs them.

The front end queries the DB filtering by category tags which correspond to the different sections of his site. Adding a new category will create a new tab on the top linking to a slideshow which displays all the photo posts that have that category tag. This allows him to easily share photo collections across sections by giving photo posts multiple tags. This also allows him to still have a blog section by tagging the post with a blog category tag.

For the UI, I am using jQuery to create a light weight slideshow for users to either scroll through the images or if you look closely click on the little play button on the bottom right corner to run through the slideshow automatically (This feature was added specifically for Dan to show off his site to potential clients which is why it is more of a discoverable feature).

Blinklab.com is live…

Actually it went live a couple months ago… just haven’t had a chance to share…

Blinklab is a digital retouch studio based in San Francisco and they hired me last year to build their site. The site was built using resourcespace an opensource php digital asset management system. I extended the system to include a templateing system for the front end so that they can both use the system as a cloud based storage and cataloging system and a consumer facing website. Design was done by them and I did all coding – PHP/HTML/CSS. I also set up their in house server and deployed their site.

Fun with jQuery

So I am feeling a little behind in the trends when it comes to Javascript toolkits right now.

In the last few days I have been asked like 5 times if I am familiar with jQuery and I had to say no. I’m not sure why I haven’t taken some time out to check out the likes of JQuery, MooTools, etc….Probably because I have used a small handfull of toolkits over the last few years and I have come to realize that even though most frameworks have good and bad parts, their general approach to creating nice convenient cross browser coding solutions are pretty similar.

But not to be out of touch, I took it upon myself to read up on jQuery over the weekend. It took me a couple minutes to digest what jQuery was doing, but once it sunk in, it hit me like a ton of bricks. No wonder everyone is using jQuery!

What makes it so different is they take a query approach to writing JS. They have one utility function that does all the heavy lifting of finding and objects in the dom, and then wrapping them in functionality. They call it the jQuery function. With this one function, you can specify dom elements, element id’s, classes, even css type selection, to be wrapped in functionality.

For example. If you want to grab every p element on the page and change it’s font size, you can do:

$("p").css("font-size", "160%");

The $() by the way is the jQuery function.

Now compare that to the regular JS way of doing it:


var pHolder = document.getElementsByTagName("p");
for (var i=0; i<pHolder.length; i++) {
pHolder[i].style.fontSize = "120%";
}

Yea, id rather write that tiny piece of jQuery code too.

So not only does jQuery reduce the amount of coding needed, it has a tiny footprint and it’s UI widget ad-ons are pretty slick and all modular, so you can include only the pieces of functionality you want.

I guess it is good I looked into jQuery, because I am sure it will quickly become my toolkit of choice.

Here is an example of what 6 lines or so of code can do in jQuery… use the slider to change the font size in the p elements…
Font Slider Demo
screen-capture-62.png

OH Dat’s Nice: Sweetcron

screen-capture-108.png

I ran accross Sweetcron the other day while kicking around the internet and it is really cool. It is a online life streaming software that allows you to aggregate your own personal web content in one place. So if you have a blog, use twitter or any other online service that generates a feed, you can feed it into your Sweetcron site to create an up to date time line of all of your online activities.

I took the opportunity today to try it out and install it on http://www.ohdatsnice.com. Instillation was super simple and themeing the content for a personalized took no time at all…I currently only have it hooked up to my blog, but their api makes it super simple to customize the interface and the content. It does take a little knowledge of PHP/HTML/CSS but if you are a web designer or dev guy, you will see that it is cake to set up and get going and to tell you the truth they make it really easy for the weekend warrior blogger to figure it out too.

Out of the box it pulls your entire feed content but in my example you see that I pulled out all the content and only left the title of the post and the posting date, with the blocks linking back to my articles…so you could use this software to suplement your current blogs etc…

All in all, I would recommend Sweetcron to anyone looking to keep all of their online activity in one place and I really think that this concept of lifestreaming is really going to take off…

Here is another example of a Sweetcron based site: http://www.yongfook.com

heroku.com has some promise

screen-capture-93.png

Looking for easy ways to deploy a rails app today, I came across heroku.com. They are currently in a private invite only beta phase but they allow you to get on a waiting list to start using their system. I applied for a beta account today and was surprised that I was issued an invite in about 4 hours.

Poking around, it looks like these guys have some promise. You can build and deploy a rails app you create on their site either by using their browser based coding environment or you can create a Rails app independently and upload a tar ball or use git to sync and deploy your files.

It looks like all of your files get hosted by heroku.com, and they have flexible dns options so you can choose a domain name like awesomeshit.heroku.com for your app, or if you own awesomeshit.com, you update your dns server to point to them, so you can have your rails app at pretty much any domain name you own. They also let you create multiple apps too.

Now at some point this service is probably going to shift to a monthly hosting or service fee, but for what they promise, I wouldn’t mind paying for not having to worry about deployment and configuration of my rails apps because right now, it is a freaking pain in the ass to build and deploy a rails app through my hosting service.

IE6 hasLayout div fix

If you are not familiar with the hasLayout property in Internet Explorer you are probably familiar with it’s effects on your layouts in IE6 especially if you build your layouts with divs.

The breakdown: All elements rendered in IE6 and 7 have a layout property which is not directly settable with Javascript or CSS and when you try to create a layout with elements that do not have a layout set, the result is all sorts of horrible display bugs…my favorite of which is elements inheriting margins and padding of its parent elements causing crazy offsets that get worse and worse as your elements get nested on the page…

Now IE 7 isn’t as bad as IE6 mainly because Microsoft decided to give all appropriate layout elements in IE7 like divs a layout, so when you build a layout with divs, you don’t get haslayout problems….but divs in IE6 do not have layouts by default, so if you do not give your divs the appropriate CSS properties to force them to have a layout, your resulting layout would be full of layout bugs.

Now this isn’t the cure all for haslayout problems in IE6 but this should fix most of them. What I do when building a site that has to support IE6 and above is that I force all divs in IE6 to have layout. There are a handful of CSS properties that will set an elements layout in IE6, but I like to use height because you can set a divs layout by giving it a height of 1%, and you can remove it, by setting the height to auto….this becomes important later…

So I wrap:

div {height:1%;}

in an IE6 only conditional statement, so this CSS is only applied to IE6 browsers.

This sets all divs on your site to having a layout which will automatically solves pretty much all of your div based haslayout problems, but note this fix will cause problems when you want to float divs or set them to be absolute …. So in those divs all you have to do is set the height of them to auto, which will remove haslayout and display them correctly.

This fixes IE6’s ass backward approach to divs by giving all divs a layout by default, which means when you want to set a div to be floated or positioned absolute, just turn off layout along with setting the float or position property of that div…

Sproutcore…the little guys MVC framework?…

Sproutcore Logo

I am one of those people that loves creating new projects and trying out new technologies and ideas, but when it comes to deploying these projects into the wild I always get derailed by the fact that my server is shared and I don’t have the infrastructure and bandwidth to support back end heavy projects utilizing Java, Rails, PHP, or Python. So most of my projects get through the development phase, but stops short of deploying mainly because getting my project out there will either be too hard to deploy and maintain, or it will be way to expensive for me to maintain if people actually start using it.

But then I came across Sproutcore. I think it was in a Techcrunch article explaining the technology behind Apple’s new Mobile Me web service. It said that they were using this new Javascript MVC framework called Sproutcore. I was thinking, Huh? Javascript MVC?…that doesn’t sound right. So I follow the link over to the Sproutcore project home page and I read some of their docs and quickly realized why Apple chose to use this framework to build their Mobile Me platform. Basically, after you develop your app using a combo of HTML, Javascript, and Ruby, your final project is easily packaged into a platform independent project of pure HTML and Javacript, that when loaded up runs in a users browser. This means very little server browser interaction (You still need to ping your server for database backed processes, but for most smaller projects, that still is not very heavy at all). It also uses helpers to quickly create the scaffold of your projects, you can easily create localization of your projects much like in a Coca app, and it is easy to use any back end technology (RoR, PHP, Java, etc) to hook it up to your database…pretty sweet huh?

Sproutcore is built with Ruby and uses some of the same conventions that Ruby on Rails uses to build projects. It only takes minutes to create an app, models, views, and controllers using their command line tools. The models and controllers are written in Javascript, and the views are (for you RoR guys) erb files that use a combo of custom ruby view tags for creating things like buttons, inputs, etc, and also to create actions like drag and drop, etc and HTML.

If you are a developer looking for an MVC platform that is easy to set up and get deployed, id check out Sproutcore.