MaisonBisson.com » web development

Yelp: A Poster Child For Semantic Markup

Casey Bisson — Wed, 14 Oct 2009 16:48:24 +0000

Yelp…is…essentially a poster-child for semantic markup. This spring, Google’s introduction of rich snippets has allowed Yelp’s listings in the SERPs to stand out more, attracting consumers to click more due to the “bling” decorating the listings in the form of the star ratings.

There are now some very good reasons why sites with ratings and reviews should be adopting microformats, and it’s not that hard to do! For a more detailed explanation, read my recap on the subject, Why Use Microformats?

Martin Belam’s Advice To Hackers At The Guardian’s July 2009 Hack Day

Casey Bisson — Thu, 06 Aug 2009 14:44:15 +0000

An amusing hacks-conference lightning talk-turned-blog post on web development: “Graceful Hacks” – UX, IA and interaction design tips for hack days. Martin Belam’s talk at The Guardian’s July 2009 Hack Day must have been both funny and useful:

Funny: “However, I am given to understand that this is now deprecated and has gone out of fashion.”
Useful: “the Yahoo! Design Pattern Library is your friend.”

SIMILE Timeline For, Um, Timelines

Casey Bisson — Tue, 09 Dec 2008 19:33:20 +0000

Timeline is a SIMILE project that uses Exhibit JSON (which you can create with Babel).

Another Approach To Web Forms

Casey Bisson — Tue, 09 Dec 2008 17:16:17 +0000

Just saw a cool demo of XForms and Orbeon Forms.

WordPress For Zach’s Web Programming Class

Casey Bisson — Mon, 08 Dec 2008 19:30:34 +0000

Zach is apparently too lazy to prep his own lectures for the last few days of his intro to web programming class. After bringing his students from zero to database-backed web-apps, he asked Matt do JavaScript and me to introduce WordPress as an application platform.

The WordPress API makes it easy to write plugins that modify WordPress’ behavior with filters and action hooks. Additionally, shortcodes allow you to put small bbcode-like tokens in your WordPress posts and pages that are replaced with by functionality defined in your plugins. Finally, the Widgets API allows you to make tiny applications/gadgets that users can configure and position on their site.

Understanding WordPress means understanding its hooks and filters; however, tracing those hooks and filters isn’t as easy as cross-referencing function calls. Mark Jaquith and Adam Brown each offer databases to help explain the hooks and filters. Brown’s is a little more up to date and includes code references, Jaquith’s includes some detailed descriptions to explain a handful of the hooks. And once you make sense of those hooks and filters, you have to realize that WordPress uses them internally for its default behavior, and just as you can register a hook of your own, you can unregister the default hooks (and filters).

I’ve already deleted my code examples, so the above intro is pretty much all I can offer as a take away.

Mobile Safari Advanced Features

Casey Bisson — Tue, 02 Dec 2008 21:10:14 +0000

If you’re already building web apps, you might wonder why you should bother to build an iPhone native app. The short answer is that you might not need to, but you should still optimize the app for iPhones.

Native-looking chrome

Set these in the head:

// set a custom icon for when a user bookmarks the app to the home screen
 
// hide the browser chrome
 
//set the phone status bar style; can be grey, black, or black translucent

Caveats:

Only works for web pages that have been saved to the home screen and opened from there.
Portrait mode only.
Any link will open in new browser tab. Use ajax to keep application to single page, see dashcode templates for examples.

Query this state via js:

window.navigator.standalone

Detect orientation:

Touchable

Touch Events
They’re different from mouse events, so we’ve gotta code differently for them. The sequence works like this:
touchstart -> touchmove -> touchend (or, if a user hits home button touchcancel)

What you get when from that:

event.touches //all
event.targetTouches //this one
event.changedTouches //um...

Touch events track every finger on the screen. Gestures are a higher-level interface to that data.

Scale and rotation properties of that gesture are available. I’m not sure if other gestures, such as page flicking, are handled as gestures or touches.

Visually sophisticated

Apple decided that HTML was seriously deficient in the areas of object transformations, transitions, and keyframe animations.

Why render multiple rotated and resized versions of the images you use throughout your app/web page? Loading a single large version of the image may perform better than having to load multiple versions of the image at various sizes, rotations, or skews.

Here are a few options (see previous):

.transformed {
	-webkit-transform: rotate(20deg);
	-webkit-transform-origin: top left;
}

And it can animate transitions between these styles. Specify the transition duration if you like.

#myFlower {
	-webkit-transform: rotate(0deg);
	-webkit-transform: scale(1.0);
	-webkit-transition-duration: 2s;
}
document.getElementById('myFlower').style.webkitTransform = 'rotate(360dev) scale(0.5)'

Other useful properties that you can set:

-webkit-transition-timing-function
-webkit-transition-delay

It gets a lot more exciting with key framed animation. First, define one or more animations:

@-webkit-keyframes 'fall' {
	from{ -webkit-transform: translateY(-50px); }
	to{ -webkit-transform: translateY(600px); }
}
@-webkit-keyframes 'fade' {
	0% { opacity: 100%; }
	75% { opacity: 100%; }
	100% { opacity: 100%; }
}

Then apply those animations to an object or class:

.leaf {
	-webkit-animation-name: 'fall', 'fade';
	-webkit-animation-duration: 10s, 10s;
	-webkit-animation-iteration-count: infinite, infinite;
	-webkit-animation-timing-function: linear, ease-in;
}

Responsive

Mobile safari supports local database storage as defined in HTML5. Using it improves responsiveness and battery performance.

New Plugin: wpSMS Supports Sending SMS Messages

Casey Bisson — Mon, 10 Nov 2008 16:21:46 +0000

wpSMS enables the sending of SMS messages as easily as sending email (more easily, perhaps). An implementation of it can be seen at my University’s library, where they’ve used both Scriblio and wpSMS to allow visitors to text information about a book to their cellies.

Installation

Simply download the plugin, place the entire folder in your WordPress /plugins/ folder, and activate.

Usage

It currently uses Clickatell’s gateway services, though more could be supported in the future. Once you get login credentials to Clickatell’s http gateway you can start sending messages easily.

Simply instantiate the class with your credentials:

$mysms = new wpSMS( $API_ID, $USERNAME, $PASSWORD );

Then send your message:

$mysms->send( $YOUR_MESSAGE, $TO_PHONE_NUMBER );

How you create the message or get the destination phone number is up to you.

Screenshots

You’ve found an interesting book in our library, but who wants to write down the location and call number when you can text it to yourself?
Clicking the “text this to me” link takes you to a screen where you preview the message and enter your mobile number.
The received message includes all the details you need to find the book on the shelf.

Scaling PHP

Casey Bisson — Mon, 22 Sep 2008 13:28:50 +0000

This two year old post about Rasmus Lerdorf’s PHP scaling tips (slides) is interesting in the context of what we’ve learned since then. APC now seems common, and it’s supposedly built-in to PHP6. Still, I’d be interested in seeing an update. Are MySQL prepared statements still slow?

And that’s where Rasmus’ latest presentation comes in. We don’t learn anything about MySQL prepared statements, but we do learn how to find choke points in our applications using callgrind and other tools. In his examples, he can do a little over 600 transactions per second with both static HTML and simple PHP, but various frameworks — with many inclusions and function calls — can slow that to under 50 transactions per second (I suppose they’d explain that in a TPS report).

Web Form Validation With jQuery

Casey — Thu, 11 Sep 2008 14:26:19 +0000

Josh Bush’s Masked Input Plugin and Paulo P. Marinas’ AlphaNumeric are both jQuery plugins to prevent input of invalid data in web forms.

Browser-Based JSON Editors

Casey — Wed, 10 Sep 2008 11:49:22 +0000

JSONLint, a JSON validator, was the tool I needed a while ago to be able to play with JSON as format for exchanging data in some APIs I was working on a while ago. And now I like JSON well enough that I’m thinking of using it as an internal data format in one of my applications, especially because it’s relatively easy to work with in JavaScript. Or, at least that’s the promise.

What I’ll need is an easy way to manipulate the contents of a simple array, and these JSON editors may give me a start.

The Braincast JSON editor was the first I found, but it doesn’t allow creation/expansion of the JSON. Katamari’s JSON editor seems to work and has a lot of features and a post 2005-looking interface, but that doesn’t make it simple. Worse, I don’t think it’s available for me to re-use, modify, or extend in my projects. Thomas Frank’s JSON editor, on the other hand, does have the features I need and a GPL license. That’s the place to start.

Extra: a JSON diff.

More Web Performance Tips From Steve Souders

Casey Bisson — Mon, 25 Aug 2008 16:10:28 +0000

Hearing Steve Souders at WordCamp last week got me thinking about website performance, so I went looking for more. The slides from his WordCamp talk are online, but he gave a similar talk at Google I/O which got videotaped and posted richer detail than his slides alone will ever reveal.

Also on his blog: Use the Google AJAX Libraries API when you don’t have a CDN, and a post that asks why make users wait to download all your javascript before they see the page if you’re only going to use 25% of it at first?

Parse HTML And Traverse DOM In PHP?

Casey Bisson — Tue, 04 Mar 2008 01:11:40 +0000

I love how easily I can traverse an HTML document with jQuery, and I’d love to be able to do it in PHP. There are a few classes, but the PHP binding for Tidy seems to be where it’s at. The Zend dev pages make it look that way, anyway.

Apache, MySQL, and PHP on MacOS X

Casey Bisson — Thu, 24 Jan 2008 17:07:04 +0000

p0ps Harlow tweeted something about trying to get an AMP environment running on his Mac. Conversation followed, and eventually I sent along an email that look sorta like this:

If you’re running 10.4 (I doubt it, but it’s worth mentioning because I’m most familiar with it), here’s how I’ve setup dozens of machines for web development and WordPress:

Install MySQL
http://dev.mysql.com/downloads/mysql/5.0.html#macosx-dmg

Install Marc Liyanage’s PHP 5 package
http://www.entropy.ch/software/macosx/php/

From there all you have to do is install WordPress.

10.5 changed lots of this (as you probably already know). The good news is that it includes current versions of the AMP suite. The bad news is that the PHP doesn’t include a number of useful components. Still, it will run WordPress and I’ve got it working on my laptop. These directions look like pretty much what I had to do:

http://stringfoo.com/2007/11/05/server_setup_on_leopard/
http://remysharp.com/2007/10/27/lamp-in-leopard-osx-105-php5-and-apache-22

It’s likely none of that will be helpful, in which case you will have discovered why I’m no longer a sysadmin.

Marc Liyanage’s builds of PHP for Mac are probably the easiest to use and they include most all the extensions a person could want, but he hadn’t released a package for Leopard at the time (he’s got a release in beta now). As it turned out, p0ps actually was running 10.4, and he got things going in a jiffy.

Usability experts are from Mars, graphic designers are from Venus

Casey Bisson — Thu, 24 Jan 2008 14:00:50 +0000

This an old one, but it just caught my atention. In A List Apart tells us Usability experts are from Mars, graphic designers are from Venus. Is this still true? Haven’t the last several years been about the triumph of good design in both the usability and graphic senses? Or are rounded corners not actually useful?

Fancy Up Your Website With Web Clip Icons

Casey Bisson — Thu, 17 Jan 2008 09:29:44 +0000

Aaron Schmidt alerted me to this how to sweetening up your site with fancy iPhone web clip icons.

Language Translation Icon

Casey Bisson — Thu, 13 Dec 2007 17:41:53 +0000

We all need a recognized icon to represent “translate this.” We’ve got one for feeds and social bookmarking, but where’s our translate icon? A lot of folks simply use flags, but that’s a bad idea because they’re “nationalistic, and represent ideals, boundaries, and political beliefs, but do not represent a language.”

Joe Lee has developed a few icons for use in the OLPC project, and they look good. The only problem I have with them is in trying to make them work at 16×16 pixels. I developed the icon above (and the 16×16 version) to support the new Bookmark Share (& Translate) feature in bSuite (see it at work). It’s simply a mashup of Joe’s work (this) with the feed icon (there’s an Adobe Illustrator version in the developer pack).

This particular icon has a few problems (it could easily be confused with “reload”), and I’d love to see something better. Any suggestions (that fit a 16 x 16 square)?

Compress CSS & JavaScript Using PHP Minify

Casey Bisson — Wed, 05 Dec 2007 12:50:13 +0000

It was part of a long thread among WordPress hackers over the summer and fall, but this post at VulgarisOverIP just reminded of it: minify promises to be an easy way to compress external CSS and JavaScript without adding extra steps to your develop/deploy process. No, really, look at the usage instructions. (To be clear, the Vulgaris and Google Code versions are different, one derived from the other and backported to PHP4 compatible. Still, the concept is the same.)

Vulgaris reports a nearly 300% decrease in time to download, definitely worth the effort.

Developing and Testing Mobile Content

Casey Bisson — Fri, 21 Sep 2007 02:31:33 +0000

Read: A List Apart: Articles: Put Your Content in My Pocket and Part II.

Test/simulate: Opera Mini, Lynx, a variety of mobile phones, Internet Explorer (because even with Parallels, who really wants to infect their machine with windows?), and iPhone.

mobi, mobile, web development, mobile web, browser testing

Google Gears

Casey Bisson — Tue, 19 Jun 2007 19:54:41 +0000

Google Gears: create web apps that work offline

google, offline ajax, web development, ajax, offline, google gears

PHP5 + XML = LOVE

Casey Bisson — Fri, 21 Oct 2005 09:11:55 +0000

The Zend overview of the new XML features in PHP 5 has re-energized me for building XML Server Applications at my library.

xml, php, web development

A List Apart Updated

Casey Bisson — Tue, 23 Aug 2005 16:35:31 +0000

A List Apart, has been revamped and they’re proud of it. They should be, it’s beautiful and functional. It’s one of the few early web development resources that’s still with us, and there’s a reason.

tags: a list apart, ala, redesign, web development, web development resources

Sweet Cheat Sheets

Casey Bisson — Tue, 02 Aug 2005 16:25:24 +0000

Colin over at Command-Tab alerted me to some great cheat sheets, including this one for JavaScript at ILoveJackDaniels.com.

tags: cheat sheet, cheat sheets, javascript, programming, web, web development