From my web design portfolio:
Websites & identity that tell your story: web design, development, content, strategy, SEO // See what I do »
The Caravelle Resort (www.thecaravelle.com)
The Slater Company (www.theslatercompany.com)
GoCashiers (www.gocashiers.com)
Southern Tide College Ambassador Program (ambassador.southerntide.com)
ShootoutGoals.com (www.shootoutgoals.com)
Lowcountry Roller Hockey Organization // Local sports organization
Chucktown Deals (www.chucktowndeals.com)
Case IH Be Ready WordPress blog (beready.caseih.com)
For your reading pleasure
I don’t write much here anymore
My site is long overdue for a redesign. I’m thinking I’ll still have a blog on the new site, but it won’t be the focus. I mean, why focus on something that you’re going to let get stale and old? The realities are realities, and this blog isn’t much more than a spam magnet. So here’s one last post over here as a reminder to reinvent my site. I have a lot of recent work to share, but I’m going to save it for a fresh, clean seanmccambridge.com until I post it here.
Re-rendering Facebook, Twitter and ShareThis social buttons when adding new content via AJAX
I was working on a WordPress site today with social buttons for each post on archive pages. The site also has AJAX pagination that appends posts to the page when you click ‘view more’. The issue I ran into was when new content came in via AJAX, the social buttons in HTML and XFBML weren’t rendering their iframes or complete content. They were just the placeholders specified in the source.
So here are three snippets to remember for Facebook, Twitter and ShareThis buttons:
Facebook is simple. It’s just a call to its XFBML parser.
FB.XFBML.parse();
ShareThis
Share this is also simple.
stButtons.locateElements();
Twitter had a similar method in the past, but in new versions of their code the method was dropped. So now you just have to reload the Twitter JS. Not graceful, but it works.
(function(){
var twitterWidgets = document.createElement(’script’);
twitterWidgets.type = ‘text/javascript’;
twitterWidgets.async = true;
twitterWidgets.src = ‘http://platform.twitter.com/widgets.js’;
document.getElementsByTagName(’head’)[0].appendChild(twitterWidgets);
})();
I know I’m going to use these again. So here they are. Hopefully, this cures someone else’s headache in the future.
I just saved up to $120 roundtrip!!
WTF, Southwest?
If I had a Save Me from the Hell of Modern Advertising Bill of Rights, the phrase “up to” would be banned. Violators would have “MY IQ IS AS LITTLE AS 50” tattooed to their foreheads.
I just bought a plane ticket on Southwest. I already bought it when they shoved this graphic in my face. I didn’t really get a great deal. I paid a little over $200 for a one-way flight from Chicago, IL to Charleston, SC. It wasn’t a bad deal, but it was nothing to light fireworks over.
Then, on the post-transaction confirmation page, I get, “You just saved up to $120 roundtrip.”
First of all, isn’t their shopping cart software smart enough to know I bought a one-way ticket? Let’s say I saved up to $60 one-way, taking the average. So I might have paid $260 total for a one-way ticket instead of $200?
Secondly, if you squint really hard and read the fine print, you’ll see that this cute graphic is telling me that Southwest doesn’t charge baggage fees, and if i was high-maintenance enough to check a bunch of bags, then I would have saved $120 r/t.
Big effing deal --- last time I flew to Europe I paid $500 round trip, and I checked a bag. That would be something to make a graphic about.
Enough hype. Just tell me my credit card was approved.
I have no excuse
I am a slacker writer. It can be a challenge keeping up with a blog. Since I started working full-time again, I have been immersed in building websites. I’m learning a lot but writing little.
But if you want to keep up with my annoying neighbors, you can read my blog about being surrounded by people who skateboard and play soccer on the hardwood floors above and torment me with loud hipster music below.
Big Ben in Chicago
Just kidding, it’s the Wrigley Building.
Have you started using the HTML5 doctype?
Idea: JavaScript font preview widget
Web fonts are all the rage. I’ve been playing with both Typekit and the Google Fonts API recently, and one of the big drawbacks I’ve seen so far is the inability to test the fonts without a lot of pain. If you’re used to making comps, how will you design with a given font if it isn’t installed on your machine? If you’re a developer, aren’t you hungry for something more efficient than configuring options on the font archive’s site, calling the script in your header and then adding it to your CSS?
So far I haven’t seen a smooth, simple way to flip through various fonts in the same way you might in a graphic design program.
There should be a way. It wouldn’t be hard to write some JavaScript that you only have to place once in your page header that would allow you to preview many fonts in your site. Imaging being able to specify a class or tag — or even just click on an element — and choose from drop-down boxes full of fonts, sizes and styles.
Normally, I would keep this idea to myself, scheme about it for eons and maybe, just maybe, bring it to light. Instead, I’m going to discuss it here so somebody builds it — maybe me, maybe you — but it seems like a good enough idea that it must be done. Maybe it already is and I don’t know about it.
jQuery tubular, a YouTube JavaScript video background jQuery plugin
Just released tubular on the jQuery plugins site and on Google Code. The plugin uses a single line of JavaScript to add a YouTube video in the background of your page. I think it’s pretty sweet. It’s my first jQuery plugin.
Check out the demo: http://www.seanmccambridge.com/tubular
on Jquery: http://plugins.jquery.com/project/tubular
on Google Code: http://code.google.com/p/jquery-tubular/
YouTube videos as background video using CSS and JavaScript
I’ve been seeing more and more use of video as a background on the web. Sometimes, the results are cheesy; sometimes the results are dramatic. Take a look at Design Kitchen’s portfolio, which is dominated by video. You can’t help but watch the show as a human hand reaches in and throws the page around. (Really, you can’t help it. I’ve seen the site a few times already and still paused when I ran over to double check their link.)
Meanwhile, all kinds of web services are opening up their APIs for anyone to take advantage of rich content like video, social media, maps, etc. I read a tutorial on working with the YouTube API and had to take a stab.
The result is a microsite for the Lowcountry Roller Hockey Association, a group of roller hockey players I am a part of. I took some video of us playing a pick-up game recently when my skate broke—my choices were to go home or grab my Zi8. I got behind the goal and filmed the scene. Naturally, I put the video up on YouTube so the guys could see. (Yeah, I like Vimeo, too, but YouTube is way more visible—it’s the #2 search engine in the world, after all!)
So with a little jQuery, plain ol’ JavaScript and some calls to the YT API, I was able to build a site that stuck a YouTube video behind some normal HTML content using basic CSS positioning and some rudimentary geometry.
Never forget proportions and cross-multiplication. You know, when x/y = a/b and you know x/y and one of a or b? Let’s say you’re solving for b. You multiply y * z and divide by x. Google it if you don’t follow. It should be a part of every web designer’s day.
Anyway, here’s the end result:
Check out the site. It’s not live yet but it will be at charlestonrolleryhockey.com one of these days.
I’m planning on turning this into a jQuery plugin that I’m quite sure would make a lot of people unhappy, if it became popular.
Other people’s brushes make design fun again
I downloaded some Photoshop brushes from Brusheezy.com today. Of course, I had to play around with them to see what they could do. These are a small sample of them. I wish I could link to each brush creator, but I didn’t realize I was going to do this when I started hunting them down. Wait, I found the ones I used here:
- Stamps from Hungary brushes
- Architectural ornaments brushes
- Beyond the mist brushes
- Vatio brushes
- WG watercolor brushes vol. 1
I’m not a graphic designer, and I don’t claim to be a Photoshop ninja. But I can make the program work, and I have fun using it.
Left, right, left, right: Keeping CSS layouts as simple as possible with paired floats
After a while, CSS becomes intuitive. You find your standard practices that just *work*. All of the maddening annoyances of CSS bugs, margin collapsing and cross-browser compatibility melt away into that part of your brain you save for really special tortures. You probably even have your own HTML/CSS/JavaScript boilerplate by now.
I was puzzling over a box-model diagram today and realized that where I formerly used margins and paddings, I simply use floats and widths to control my columns and gutters. No longer will I ever have more that two floating DIVs in a single parent DIV. Instead, every layout DIV is either a left float or a right float within its parent.
I wish someone would have showed me this approach when I was learning floats. It’s simple and straightfoward, but most of all it’s predictable. Here’s how it works.
Gem mysql2 fix when installing Rails 3.0 and Ruby 1.9.2 on Windows 7
If you are trying to install Rails 3 on Windows 7, you might have run into a few problems. Now, I’m a total Rails n00b, but I’ll share my fix for getting the server to run without barking. Until the mysql2 gem is updated to work on Windows 7, you can use the older mysql gem in these simple steps:
- Install Rails 3.0 under Ruby 1.9.2 (be sure you already have MySQL installed, or else Google installation instructions and make it happen)
- Update your gems and make sure to install mysql.
- Create a Rails project and open your Gemfile.
- Comment out gem mysql2 like this:
#gem 'mysql2'
and addgem 'mysql'
- Now copy the file libmysql.dll (mine was in C:\wamp\bin\mysql\mysql5.1.36\bin) to your Ruby bin directory (should be C:\Ruby192\bin)
- You should be good to go. Try running
rails server
from your app directory.
Works for me! Hopefully, us unfortunate Windows users will be able to use the newer mysql2 gem soon.
Don’t make people log in to comment
After reading some great posts on blogs this morning, I was ready to comment — to say thanks, good post, great video, etc. But each time I read, “You must be logged in to comment.”
This is one method of avoiding comment spam. After all, spambots and even manual spammers aren’t going through the extra complication of registering, confirming their email, etc. But neither are non-spammers.
Getting a dialog going is one of the most important ways of making your website more effective and useful to readers. If you put up a bunch of roadblocks, it just isn’t going to happen.
There are other ways of preventing spam. Open your site up, and you’ll be rewarded.
Develop a point of view
“Develop a point of view. Think about what experiences you have that many others do not. Then, think of what experiences you have that almost everyone else has. Then, mix those two things and try to make someone cry or laugh or feel understood.” —F. Chimero
25 minutes of driving in Charleston at 5x speed (so … 300 m.p.h.?)
Just bought a suction cup camera mount. First real use today when I drove into town. Just playing around. I ended up taking 25 min. of video so it made sense to speed it up and bring it down to a shorter length to keep your interest. It was a fun little experiment. Some funky, hectic electronic music helps create an intense—almost nervous—viewer experience. Come along for the ride!
See all entries
Random Links
The Developer’s Code, a book by Chicago-based Ka Wai Cheung | Ka Wai Cheung / We Are Mammoth
How to find a Facebook RSS feed | Jens Ahrengot Boddum / ahrengot.com
Chicago street sweeping schedule and map | City of Chicago / cityofchicago.org
Save big 24-bit PNG files with alpha transparency as 8-bit PNG files | Simon Madine / 8bitalpha.com
Facebook API throttling | various / Stack Overflow
Google Plus One button generator | Google / google.com
Add a customized RSS feed to your WordPress theme | Zack Katz / katzwebservices
Basic customization of ShareThis widget without API | ShareThis / sharethis.com
30 PHP tips for programmers | Glen Stansberry / Nettuts+
How to make traditional fenders for your boat out of scrap rope | Barbara Merry / Duckworks
Chicago-area marine forecast | NWS / NOAA
Google Chrome music video using HTML5, WebGL and all kinds of awesomeness | Chris Milk / ro.me
Lighting 101 | David Hobby / Strobist
Picup, an iPhone app that enables Mobile Safari to “upload” video | William Lindmeier / picupapp.com
Steal like an artist (and other autobiographical advice) | Austin Kleon / blog
Setting up vsftpd on Ubuntu | Bobby Allen / ubuntuforums
no such file to load—zlib | installing rvm in Ubuntu | JasonOng / Stack Overflow
JavaScript people worth your attention | Siddharth / net.tutsplus.com
On jQuery mobile events | Todd Parker, et al / jQuery forums
Mobile emulators for testing mobile sites | Paul Andrew / Speckboy
Another interesting sticky footer solution | Ryan Fait / his website
Classic Jason Fried talk about marketing yourself by sharing [video] | Jason Fried / YouTube
Public domain postage stamp images | various / Wikipedia
So cool: geeks will love these very modern musical instruments | Zachary Sniderman / Mashable
Things to do in Chicago in the winter | Chicago Magazine / chicagomag.com
Beautiful horizontal-sliding wine website | Nicholas Macias / jaxvineyards.com
Learn these Gmail search operators | Google / Google
Most useful use of JavaScript ever! | Erik Rothoff Andersson / GitHub
JavaScript effects that will blow your mind … dude | various / Queness
Great intro to web app security | Philip Tellis / Smashing Magazine
60 Inspiring clean and minimal websites | Giselle Mueller / Web Design Ledger
Simple jQuery plugin tutorial | Kevin Liew / Queness
Super cool jQuery hover magnifier | Martin Angelov / Tutorialzine
Lots and lots of WordPress contact form plugins. | anonymous / blueblots.com
Some very interesting facts about power usage | Mr. Electricity / MichaelBlueJay
Editing Kodak Zi8 and Flip video in Adobe Premiere | David K. Helmy / YouTube
XSL tutorial | Ethan Gardner / ethanandjamie.com
Land yourself a dream client | Speider Schneider / Smashing Magazine
Funny and useful article on freelance contracts | Speider Schneider / WordPress
iphoneography: a self-published magazine of iPhone photos | Claire Sambrook / MagCloud
Great infographic about news site popularity (with free antiacid) | MIke Pilarz / posterous
Please invite me to Dribbble… | Davy Kestens / pleaseinvitemetodribbble.com
Delete a Symfony application | gmchenry / tech-recipes
Guide to YouTube embed code with lots of great parameter info | Ann Smarty / Blue Glass
Really smart website grid generator | Stuntbox / Gridulator.com
Getting started with Rails 3.0 | various / RailsGuides
Embedded JavaScript tutorial | Jupiter / EJS
Lettering.js | Advancing web typography on the web | Dave Rupert / daverupert.com/GItHub
How to change the background of your login screen on Windows 7 | Sandip Dedhia / Blogsdna
Some good ideas on grid design | Sean Hodge / Smashing Magazine
Cameron Moll at LessConf2010 | Cameron Moll / b.lesseverything.com
Innovation in surfing: Meyerhoffer surfboard | Thomas Meyerhoffer / Global Surf Industries
Biggest contraction of thermosphere in 43 years | Derrick Ho / CNN.com
Backyard Kayaking | freeski151 / YouTube
I hate you bike thief! | IHATEYOUBIKETHIEF / Blogger
The chicken came first | British Scientists / MSNBC
Basic bread recipe | S. John Ross / io.com
Best client ever (Mick Jagger / Rolling Stones 1969) | Mick Jagger / www.nosotroshq.com/blog
Franklin Gothic: Too literal | Julia Segal (I think) / www.nosotroshq.com/blog
My friend Emily is giving away an octopus on her fashion blog! | Emily D. Crews / sartoriography
VERY cool HTML5 (canvas)/JavaScript 3D tetris tower game | Ben Joffe / benjoffe.com/code
The League of Moveable Type’s manifesto | Carolina and Micah / We Are a Good Company
10 elements every company blog should have | Mack Collier / Marketing Profs
Great design and instructions for building a user-friendly picnic table | Rod Nussbaumer / shaw.ca
Better user experience with storytelling | Francisco Inchauste / Smashing Magazine
Beat Wal Mart bloody with a blog in 5 steps | Michael Martine / remarkablogger
Mad-Men yourself -The end of productivity as we know it | Emily Crews / Sartoriography
The best execution of a horizontally-scrolled website I’ve seen to date | Eric Johansson / ericj.se
Single bluefin tuna nabs $177,000 | Shino Yuasa / AP/Yahoo
Branding Yourself and sharpening your image | Alastaire Allday / allday.cc
Inspiration for restaurant websites | Jack Herbert / inspirationti.me
Wild claims by politicians in 2009 | Bill Adair / PolitiFact.com
Dolphin intelligence | Jonathan Leake / Times Online (UK)
The Design Police are watching you | unknown / Design Police
A plethora of SEO resources | unknown / SEOmoz
Invoice like a pro: examples and best practices for designers | Kat Neville / Smashing Magazine
25 Ways to promote your website or blog | anonymous / YouTheDesigner
5 free ways to promote your website | anonymous / MakeUseOf.com
Recommended cameras | Ken Rockwell / KenRockwell.com
Amazing Berlin giants street theater (photo montage) | various / Boston.com
Myth of the “fold” in web design | Joe Leech / cx partners
How to promote your Facebook fan page | Mari Smith / Why Facebook?
Design Charts | various / Toxic Design
Video: RSS feeds in plain English | Lee LeFever / Common Craft
How to get free books to review on your blog | Nick Evans / Problogger/Macheesmo
The Principles of Successful Freelancing | Miles Burke / Sitepoint
Project Honeypot | Fighting spam and comment spam / Unspam Technologies
Pure Imagination: An interview with stop-motion filmmaker PES | Marc Ostrick / eGuiders
Build your own social home | Chris Coyier / CSS Tricks
Facebook faces furor over content rights | Carolina McCarthy / CNN/CNET
10 Harsh Truths About Corporate Websites | Paul Boag / Smashing Magazine
How to use Twitter as a Twool [Flash presentation] | Guy Kawasaki / VizEdu
Perfection is pointless: Tips to help the creative perfectionist | Matt / Spoonfed Design
Interesting article about coworking for freelancers | Alex Hillman / Mashable
Dogs on the job: corporate canines | Career Hell / www.careerhell.com
Obesessions - €2500 in pennies | Sagmeister / ministryoftype.co.uk
Innovate or die | Randy McClain / The Tennessean
Retro web design examples | various / Smashing Magazine
Around the world in 42 days and $5,312 | Strange Maps / Wordpress
Rothkography - abstract photography contest | Bryan Bedell / Coudal Partners
Logo mashups | Mario Amaya / Different Thinker
Gotta love eduardo recife’s work | Recife / misprintedtype.com
Six new directors who are making music video cool again | Jake Swearingen / Wired
When did modern art begin? | Jonathan Jones / The Guardian, UK
Russian Poster Set | various / Flickr
25 beautiful macro photography shots | various / Smashing Magazine
Contact Me
Twitter: @mccambridge
A LOT OF PEOPLE HAVE ASKED about the background photo on this site. It was taken on the beach by Fort Moultrie on the harbor side of Sullivan's Island, SC. The old, wooden sea wall has been there as long as I've lived in Charleston. The beach is a great place to watch the ships and shrimpers come in and has one of the best views of downtown Charleston.