Articles
I don’t write much here anymore
November 1, 2011
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
June 22, 2011
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!!
April 24, 2011
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
April 12, 2011
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
February 26, 2011
Just kidding, it’s the Wrigley Building.
Have you started using the HTML5 doctype?
February 17, 2011
Idea: JavaScript font preview widget
February 17, 2011
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
November 21, 2010
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
November 14, 2010
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.
Collection of WordPress tutorials, plugins and widgets
November 9, 2010
Tutorials
Sidebars
http://automattic.com/code/widgets/api/
http://www.studiograsshopper.ch/code-snippets/how-to-add-a-widgetised-area-in-a-wordpress-theme/
Plugins
Widgets
http://mygayborscom.ipage.com/geeklyspeaking/2010/11/top-15-wordpress-widgets/
Multiplicative file broadcasting
October 29, 2010
How could broadcasting become user-centric? What if a single camera feed hooked up to a laptop could be distributed broadly (and the load distributed across many servers) across a network of user-broadcasters? Content could be created by the users and served to the users.
Think of a hockey game. Instead of a single entity holding the rights to broadcast pro-level hockey, why not socialize the sport as a whole. You could start an organization that would not only regulate local play but also a AAAA league that would be the best players in each region. Given 50 or 75 regions, there could be an elite league, a second league and so on made up entirely of players who would be guaranteed a share of their level’s profits.
Why stuff the pockets of owners when you could stuff the pockets of the players and pass the rest of the savings onto users, etc.?
Play would be more competitive and bad teams would be sent down to the lower league. Good teams in lower leagues would be promoted to the better league.
And the revenue stream and popularity of the system would be determined by the new populist system the cut out the fat.
Other people’s brushes make design fun again
October 7, 2010
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
September 29, 2010
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
September 27, 2010
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
August 29, 2010
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
August 26, 2010
“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.?)
August 19, 2010
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!
CLOSED COURSE DO NOT ATTEMPT
August 3, 2010
I just flipped on Letterman and saw a Dairy Queen commercial where a family of four were eating ice cream in a car with the front seats leaning all the way back. They were not driving. Let me repeat, they were parked and not driving. They were traveling exactly 0 mph. And on the bottom of the screen in fine print it read, “CLOSED COURSE DO NOT ATTEMPT.”
It really did.
To clients: Take the time to blog
August 2, 2010
An effective website needs good content to meet its goals. Blogging is one of the easiest ways to build content on your website.
What can you achieve by blogging? First, you show off your expertise. If you write about what’s going in your industry, things you’ve observed, projects, you’ve completed, etc. your website visitors will be able to see things from your perspective, and you build trust. Teaching is the cheapest and most effective form of marketing. If there is something you can share with potential customers, not only will they come back for more — they’ll like you and want to spend their money with you.
“It’s not about being different or difficult. It’s about being memorable”
July 22, 2010
--John Fogerty on Merle Haggard