Nick’s

While looking around for data sources for a couple of web projects I kept on stumbling across Yahoo’s API set.  Some of them are fairly popular such as flickr, maps, and music but there are quite a few other useful ones that Yahoo Provides. 

• Answers - Provides access to questions by category, raw question queries, and questions by user. A good use for this would be if you have a product or FAQ page that provides general information about some product or application. 
• APT(Advertising Platform) - Helps to automate tasks of buying and selling advertising, ideal for agencies and publishers. An agency could build a custom ad manager tool for their clients through this API.
• BOSS(Build your Own Search Engine) - open search web services platform. Basically this gives you access to Yahoo’s search index on your own site, pretty nifty.  Techcrunch just implemented with Boss and they seem to like it quite a bit so far. 
• Delicious - Since delicious is now part of Yahoo this is one of their apis as well.  Delicious is very easy to integrate with since their API just uses simple HTTP requests. Could use this for displaying the most recent articles that were saved in delicious related to some topic.
• Finance - Pull stock information for companies and industries. 
• FireEagle - Access to their location based social network.  You could build an AIR application to integrate with FireEagle or integrate a part of a web site with this API.
• Flickr - duh.
• GeoPlanet - Originally launched as the “Internet Location Platform” it’s goal is to geolocate data across the web. 
• HotJobs - job creation and management with Yahoo Hot Jobs, candidate search and view as well.  Can also utilize the RSS feed to display job postings on your own site.
• Local - Provides access to local business information and user reviews as well as traffic alerts. 
• Mail - Use this to build a better interface than Yahoo’s mail interface.
• Maps - Similar to the google maps api.  Provides flash, ajax, and map image access.  Provides more location based information than Google maps such as local listings, traffic, weather, upcoming events, and flickr photos. 
• MediaPlayer - Put a link to an audio file on your site, this will turn that link into an embedded media player on your site. Very cool for dealing with sound clips and podcasts. 
• BluePrint(Yahoo Mobile Widgets) - Write your mobile app once, blueprint ensures it works across hundreds of devices from the basic to the iphone. Not sure how reliable this is but awesome concept.
• Music - Gives you access to catalog data of artists, albums, tracks, videos, and user ratings.  Can even embed a video player on your site if you want.  
• OAuth - Use OAuth through Yahoo for authentication.
• Pipes - Who could forget the short lived Yahoo Pipes?  Pretty cool concept actually.  Basically you can easily create a mashup rss feed.  For instance you could pull stories from digg, slashdot, and techcrunch with the category “mac” and that would be published in the RSS feed which you could then display on your site or put into google reader.
• SearchMonkey - Put Yahoo search on your site but customize the results to be more appealing to your application.  You have control over various meta data pieces and some of the layout of a search result.
• Travel - Lookup airfare, hotels, destinations and much more through the travel trip planner. Kayak.com is also a really good resource for this.
• Traffic - Real time traffic alerts through a feed or over the REST Api.
• Shopping - Search through the millions of products on Yahoo’s shopping site. Also has comparison shopping and user reviews available. 
• Events(from upcoming) - integrates with the popular event site ‘upcoming’ allowing you to get event information, add events, edit events, add tags, search, get groups and much more information. Very useful to pull in related events for your site such as all “merb events” and place in a sidebar. 
• Weather - Access weather data for any location for free.  Provides detailed information such as humidity, wind direction and speed, visibility, barometric pressure, etc. 

I left out a few such as the contacts API, and the Yahoo authentication API.

With the heavy use of “AJAX” and flashy javascript techniques being used on the web today, I really wanted to see who is using which javascript frameworks. This isn’t meant to be a popularity contest at all but actually to see what other major web sites are using on their high traffic production web sites.  Some sites still write all of their own custom js framework-like code for their site which has its advantages and disadvantages.  This is also meant to show you that these big name sites are using the same open source javascript frameworks that we are using on our sites.

I obtained most of the sites from off the top of my head with quite a few mixed in from the alexa top 100.

Jquery

• bestbuy.com
• ign.com
• digg.com
• typepad.com
• nbc.com
• kmart.com
• passpack.com
• amazon.com
• dell.com
• craigslist.org

Prototype

• espn.com
• fox.com
• coca-cola.com
• cnn.com
• photobucket.com
• comcast.net
• hulu.com
• nfl.com
• nytimes.com
• att.com
• nba.com
• apple.com

Mootools

• wendys.com
• about.com
• usps.com
• cnet.com

Yahoo! UI

• linkedin.com

A new site has started up that connects advertisers with content producers (online web series, movies, online persona branding). It’s free for producers to signup and an additional cost for marketers to get involved.

The way the site works is very similar to the way commission sites work but on a more exclusive basis.

• Marketers create account with product they would like to promote. Promotion can be through any way they specify such as movie placement, web series placement, free shirts to wear during a show, official sponsor of your site etc
• Producer creates account and provides information about themselves.
• Both marketers and producers peruse through the opportunities finding projects/people they are interested in.  When one party wants to make a deal they connect to one another and once both parties agree then a deal is settled.

For an additional fee you can connect to the site’s ProjectStream and stay updated on new category-specific opportunities via email, very similar to google alerts but for PlaceVine listings.

Very exciting stuff and an easy way to find product sponsorship for various opportunities.

The site launched this week, go get some sponsorship deals!

PlaceVine - The Brand Integration Service

I’m a big fan of Haml and Sass, they basically spring clean your views. I always use a global clear in my main CSS file and went ahead and transferred the regular CSS code over to Sass. Only took 5 minutes but comes in handy for future uses so that you can have everything in one file.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del,
dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub,
sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
  :margin 0
  :padding 0
  :border 0
  :outline 0
  :font-weight inherit
  :font-style inherit
  :font-size 100%
  :font-family inherit
  :vertical-align baseline
  :background transparent

Git is a much better choice but not all shared hosts have git yet. For now we will use SVN.

Since we want the actual web site to be the repository for files we need to create the repository there. With our hosting server housing the repository it allows multiple people to work on the files. First shell into your box and create the repository. You can name the repository whatever you want, I decided to name it ‘repo’.

$[remote] svnadmin create repo

Get your working directory with…
$[remote] pwd
/home/nick/nickhammond.com

Next, lets upload the files for your site.  Use your favorite archive format or just upload the folders over ftp, whichever you prefer. After your files have been uploaded we need to notify the repository of the files we want in there and it will also copy them in there at the same time. My files now exist at…
/home/nick/nickhammond.com/site

Importing files…
$[remote] svn import site file:///home/nick/nickhammond.com/repo/site -m “Initial import of my site into svn”

Using the -m trigger lets you make a comment about your action, svn requires you to make a comment with a text editor or inline like demonstrated above.

Most people also recommend that you import your project into the trunk directory.  This allows for better coordination later with branching and such.

Now all of our files are in the svn repository ‘repo’, but not really easily visible, it’s in svn land.  I don’t want to go into that for this tutorial but basically you can list your repos in there with the list or look command.

Our ’site’ directory still exists but it isn’t a working svn folder, SVN wouldn’t know how to update the folder since it isn’t a ‘checkout’ from the repository. The import command doesn’t touch this folder, it leaves it as is.  We want this to be a working copy of our repository though so we might as well delete it and pull out a copy from our repository.
$[remote] svn checkout file:///home/nick/nickhammond.com/repo/site

Now view the contents of your current directory.  Sweet, it created the directory you just deleted.  If you look inside it though it has a hidden .svn directory which means it is now a working copy from your repository.  But you say you want to work locally on it and just push updates to the server?
$[local] svn checkout svn+ssh://some_shell_user@nickhammond.com/home/nick/nickhammond.com/repo/site

There you go, now you have a working local copy.  Now everytime you go to work on your working local copy just make sure that you run ’svn update’ to get the latest version pulled down to your local copy.  This ensures that you pull in new versions that could have been created by someone else.

After you are finished editing files locally and want to publish your changes to the remote repo just run ’svn commit -m “I updated the readme file and added in a couple css styles”‘

Then ssh back into your site and cd into your ’site’ directory and run ’svn update’ since the previous commit command just updated the repository, not the working copy on the server, this copies over all of the changes.

Sweet, now everything is in sync and we don’t have to worry about which files we modified to fix that bug we were working on, svn does it for us.

It is also worth noting that you should never have your repo public facing or accessible by anyone on the web. not safe.

I recently had to style textboxes on a site and didn’t want to use anything that involved a hack or workaround.  What I ended up with is a pretty simple solution, you just have to wrap every textbox in the background image you would like. This could technically work for all of your other form elements as well, the process would be very similar.

First you need to apply a CSS global clear.  If you aren’t already using something like this then you are causing yourself way to many headaches with trying to get your site to work in all browsers.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: arial;
    vertical-align: baseline;
    background: transparent;
}
:focus {
    outline: 0;
}

Then add the style that displays the background image for the textbox

.background{background: url(/images/layout/text-field.jpg) no-repeat;}

Then add the class for textboxes.

.text{
	margin:0px 0px 0px 8px;
	width: 145px;
	height: 17px;
border: none;
	background:transparent;
	color: #666;
}

adjust your styles as needed.

Then to get your textbox to appear it needs to be like this…

<div class="background">
<input id="name" class="text" name="name" type="text" /></div>

which should output this… (might need to adjust the margin for the input box)

Ezra’s Keynote - Talks about the original pastie of Merb and what it is now.  Goes through the core pieces of Merb and the reason why everything is separated.  Modularity is one of the key features of Merb, remove what you don’t need, add in what you do.  This philosophy helps to keep merb fast and get out of your way, no code is faster than no code. Also talks about how competition is good, but it’s not about saying “my framework can kick your framework’s ass”. Merb 1.0RC is also going to be dropping tomorrow and once any of the bugs are worked out the full release will be pushed. Merb-stack is going to be a more rails approach to merb.  The merb-stack will include things like jquery and datamapper with it.  I believe it is still in the works but this should be a good  jump start for noobs to merb. Nanite is a new project that Ezra is working on that looks like it is going to be really promising, basically it helps balance the load between the frontend processes and the running applications which will help with scaling.

Merb plumbing (routes) - Saw some really cool routing examples, very excited about this. A couple key points.

• You can have optional parameters
• You can do lookups in your route and then direct to an action such as login without even hitting the controller.  Saves overhead.
• Added a way to define routes for subdomains
• Lots of nesting and blocks

MerbSlices - This is going to be amazing. Basically it is a mini merb app within an application.  For instance with a CMS you could throw in a slice for your Press Room that handles everything specific to that.  We should be able to get to the point where we can have our main application and then throw in 10 slices to complete our application.  The main app will coordinate everything between the different slices.  With slices you can clone over the assets(images/javascript/css) and define routes for any slice so if you have a slice for your press room then you could define a route that is /press and the slice would actually exists in /merb.root/slices/press_slice

Testing Merb Apps - Katz talked about how we need to be doing testing based on what the url in question should return.  Not  through a certain helper or controller but more based on if we ping /users/do_login we should get back a User object.

MerbAuth - This is going to be a very much used slice.  Basically with this slice in place it integrates all of the login functionality you would normally have to program for each application. Once it is put in place you can do things like session.authenticated?, session.abandon, and session.authenticate

I’ll post more links from within each talk when I get a chance. back to more merbcamp.

If your merb version doesn’t generate a sample database.yml file you can do it manually by running the following rake command.

rake dm:db:database_yaml

Merb has some handy generators via merb-gen and I wanted to provide further clarification on a couple of them, merb-gen resource, merb-gen resource_controller, and merb-gen layout.

• Resource Controller - Generates a controller, empty helper file, and associated views. The controller comes with the standard actions index, show, new, edit, delete, create, update, destroy with just the render command in each action.
• Resource - Does the same as the resource controller but adds the model into the equation.
• Layout - With Merb you can generate layout files, the nice thing is that it generates all of the standard html you need such as the doctype declaration, the html frame and catch_content.  The merb-gen layout also takes a look at which templating system you are using.  For instance if you are using haml, which I highly recommend it will generate the layout in haml instead of erb or regular html.

For resource and resource controller if you have your ORM specified it will fill in all of the regular code that goes along with the typical methods.  So for the new action Merb will go ahead and write out everything that is needed for a basic approach to that method.  This is a great starting point for your typical controllers but when you need something more custom you might as well go with your standard controller generator.

To destroy any of your generations just rerun the command that you used to generate it and add the -d trigger to the end of your command.  This is the mirror of script/generate destroy.

Best web gallery has a great list of some cutting edge site designs.  Looking for inspiration? That would be a good place to start.

Macrabbit(creators of CSSEdit) is currently working on their latest product Espresso, a more sensible solution to web development.

If you haven’t tried out CSSEdit, you should. If CSSEdit is any indication of their ability to build excellent applications there should be quite a buzz about Espresso.  From the screenshots and features of Espresso on their site it already looks very promising.

Release date is supposed to be sometime in November, currently they are looking for beta testers for espresso.

After watching the debate tonight and hearing the term Maverick from Palin all night I figured I would take a look and see what information I could dig up about Mavericks.

• Poker.com - Queen and Jack in the pocket, suited or otherwise.
• Wikipedia - Academy Award nominated western movie
• Mega Man - A character from Mega Man X
• Wiktionary - an unbranded range animal. One who does not abide by the rules.

hmmm none of those look too good. How about dictionary.com.

• an unbranded cow.
• guided air-to-ground tactical missile for destroying tanks
• a lone dissenter taking an independent stand (she must be shooting for this one :))

Sarah Palin - A term that she will never live down.

How about we work on keeping the Mavericks out of office.

• Google Maps Voter Info
• Obama iPhone Application