Nick’s

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 type="text" class="text" name="name" id="name" /></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

Timbuk2 has an awesome build your own laptop bag application.  When building your bag you can choose multiple styles such as a regular messenger bag, laptop messenger bag, lex pack, and a few more.  The next few steps let you customize items on the bag such as the inner liner and design on the outside.  Bags start out at around $150 which is kind of steep but for a pretty cool custom bag I think it’s worth it. 

Besides the custom bag builder you can also browse through some of their already created designs and pick up one of those instead. 

Has anyone purchased one of these? How’s the quality?