Creating a Zooltool feed widget in less than 20 lines of javascript…

So you use Zootool to catalog your design inspiration but it would be cool to place them on your site, right?

Well you’re in luck. Zootool has nice little JSON api which allows you to query your account and pull your feed in JSON (you can do a ton of other things too) and in less than 20 lines of code I can show you how to do it.

Here is an example:

This code requires jQuery, mainly because I like how jQuery makes it easy to create elements and iterate through JSON but if you know javascript, you can totally do this without it… and you need to sign up for a developer account on zootool.com.

Once you have a dev account and your apikey, you are ready to go.

Here is the code:

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<!-- This is where your feed images will go -->
<div class="zooToolList"></div>

<!-- Create JSON request and attach to the top of the document -->
<script>
var script = document.createElement('script');
script.src = 'http://zootool.com/api/users/items/?apikey=yourApiKey& amp;username=yourUserNam&limit=10&callback=zooRsp';
script.type = 'text/javascript';
var head = document.getElementsByTagName('head').item(0);
head.appendChild(script);

<!-- Callback function -->
function zooRsp (data) {
$.each(data, function(item) {
$("<a/>").attr({
href : this.permalink,
target : '_blank'
}).append(
$("<img/>").attr({
src : this.thumbnail,
'class' : 'zooThumb'
})
).appendTo(".zooToolList");
});
}
</script>

just replace yourApiKey with your api key and yourUserName with your username.

Here is a stand alone version that you can copy and paste the code out of…

How it works:
Basically this code appends your API request to the top of your HTML file, which fires the query, and the returned object is a JSON object with all of your data with a callback function attached to it called zooRsp. The zooRsp function takes the JSON object and just loops through it and creates the elements based on the data and plunks them in the zooToolList div…

all you have to do is style up the resulting links and images to your liking and you are done…

Ever wish you had more font options for your web designs?

Well your wish has been answered… well, kind of… A couple months ago I came across the Google Font Directory and the Google Font API. A collection of free open source fonts that Google hosts and an API that easily allows you to include these fonts in your sites… So what does that mean?… well it means you can use these fonts (See the egregious use of the font called Lobster on this site) on your sites by easily adding a link to the font API and then just including the font in your CSS files.

Check out how easy it is to include the font Lobster…

Linking to the Google Font API asking for the Lobster font family:

<link href="//fonts.googleapis.com/css?family=Lobster:regular" rel="stylesheet" type="text/css" >

Now in your CSS you can just do:

.coolLobsterBlock { font-family:'Lobster'; }

Cool, eh?

Currently the list is pretty small but I can see this set becoming an awesome resource for web designer/developers everywhere. They also have a pretty cool tool for viewing the fonts and variants…

Here is the current list of available fonts:

Cantarell, Cardo, Crimson Text, Droid Sans, Droid Sans Mono, Droid Serif, IM Fell, Iconsolata, Josefin Sans Std Light, Lobster, Molengo, Neuton, Nobile, OFL Sorts Mill Goudy TT, Old Standard TT, Reenie Beanie, Tangerine, Volkorn, Yanone Kaffeesatz

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

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

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.

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…

This is a little JSON flickr photo search script I wrote for my wedding website…thought I’d share…

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.

I know what you are thinking…hey this is the same Yelp Grub Finder app sans the Yelp…yea, sorry everyone…no more Yelp branding except for their required logos…as per Yelp…anyways, for those who are not familiar with my old Yelp Grub Finder, “Grub! on the go…” is an iPhone app that lets you search for food, beer whatever while you are on the go…it also provides review snippets and ratings from Yelp users to help you make your decisions…I also moved the home of my app to http://www.grubonthego.com

I will keep the old link location on bodesigns.com for those who have my app added to your home screens on your iPhones, but the look and name will change to “Grub! on the go…”

I got a call today from the head of BD at Yelp…

I thought it was a call to discuss purchasing my Yelp Grub Finder app being that it is featured on Apple as a staff favorite, and have had 50K + traffic in a few short weeks, but it was quite the opposite. To my surprise, they want me to change it…bummer… Even though I am using their name properly as per their terms of service, they think that it still looks too much like an app they have created…i don’t know about that, i think it looks a lot better than any app they would create … anyways, I will be changing the name and styling for the Yelp Grub Finder…All of the functionality is still going to be the same, the only difference will be the name and colors…Stay tuned for the change…