Web Development Links and Resources

All sorts of links that we have found useful over the years. From form layouts to icon sets, from AdSense tips to databases and backup strategies. If we've needed it, we've linked it.

How The Huffington Post uses real-time testing to write better headlines (#)

Having a good bit of traffic allows The Huffington Post to a/b test article headlines for 5 minutes in order to pick the winner with the most click-thrus. We have done this on client sites by testing copy in different content modules but the tests run for a much longer period. It would certainly be fun to be on the data side of these tests and to see what works best. Anyways, there are some good links in the article to some other a/b test cases.

SlickMap CSS (#)

Here's a cool implementation of CSS for turning hierarchical lists into easier to understand site maps.

The general idea of SlickMap CSS is to streamline the web design process by automating the illustration of sitemaps while at the same time allowing for the predevelopment of functional HTML navigation.

Custom events in jQuery open doors to complex behaviors (#)

Rebecca Murphey provides a look at using custom events in jQuery. While she doesn't really get to the why until the end of the article, the benefits are certainly something worth having in your code:

  1. Well-organized code that consolidates the behavior widgets in a few bind() statements, rather than scattering those behaviors across the elements that initiate them
  2. Added flexibility as it’s any element can initiate a behavior, or a behavior can be triggered across multiple widgets at once
  3. Use of a control element which captures a click event and translates it into an event to be triggered on the widget.
  4. Better organization of your code, abstraction and increased ability to reuse code

I'm no JavaScript wizard and I am looking forward to implementing some of this logic in the near future to consolidate some of the jQuery we use in a few client sites.

Sphinx - free open-source SQL full-text search engine (#)

This is being bookmarked for future reference. From the website:

Generally, it's a standalone search engine, meant to provide fast, size-efficient and relevant fulltext search functions to other applications. Sphinx was specially designed to integrate well with SQL databases and scripting languages. Currently built-in data sources support fetching data either via direct connection to MySQL or PostgreSQL, or using XML pipe mechanism (a pipe to indexer in special XML-based format which Sphinx recognizes).

Also see: Build a custom search engine with PHP and Implementing Search.

Evolution of a Header (#)

Garrett Dimon wrote up some details about the evolution of the header area on a couple of screens for his webapp Sifter. It provides a very nice overview of the stages of development (with sketches and images) and we get to see how the decisions were made. I find these articles a good way to bring some focus back to what they are discussing, and in this case I feel compelled to examine how I handle meta data in our CMS and on my websites like 5411.

100% Google AdSense: Tools, Tips and Resources (#)

A fantastic post covering heaps of tools and articles focused on helping you get the most from the ads on your site or network. If you are not familiar with the links in this article, put some time aside and get to know them and implement or use some of them and hopefully you will notice the difference in your AdSense revenue!

jQuery Rich Text Editor (#)

We use jQuery for most things in our CMS but for the moment use Cameron Adams' widgEditor as a lightweight RTE. Here we have a fork off of Batiste Bieler's jQuery Lightweight Rich Text Editor that looks like it could be a decent jQuery option in our next release, which is targeted at using nothing but jQuery for behaviour.

Functionality is what you would expect from a lightweight RTE, down to the small footprint of the source code which should be easy to customize for your own work. It has a GPL license and is tested and fully compatible with Firefox, Opera, Safari, IE6, and IE7.

Quarkbase - Everything about a Website (#)

A pretty useful tool for getting some quick data about a website, from social popularity on the usual social sites to spotlight "In the blogs" covering blog mentions of a site down to its nameservers and hosting company. Having just had to look up some nameservers today, this was useful. I have to say I really like the name.

Google's New Search Engine Rankings Place Heavy Emphasis on Branding (#)

I hesitate to post these types of links because of their ephemeral nature, but the historical aspect of this post makes it worthwhile. Aaron Wall provides an update on Google's latest ranking methods after giving a brief rundown on things since the Florida update. Worth the read; the User Browsing Graph and his anecdotal evidence was a surprise to me.

iconPot - totally free icons (#)

iconPot has a nice collection of free to use icons for person and commercial use. There's a variety of styles and themes available. Do check the licenses of the icon sets when you download them as iconPot does not keep up to date on the individual licenses.

Raphaël JavaScript Library (#)

Raphaël JavaScript Library is not just another JS library; it creates a canvas object on which to draw, and draw it does! Check out the demos and the documentation.

jQuery Sparklines (#)

Here's a great little jQuery Sparklines plugin that will draw a whole assortment of chart types as sparklines. Play with the Try It Out section to get a feel of how it works and then dive into the source code and examples. What is cool, if you view one of the example pages with JS disabled, you can see the underlying data rather then the chart. I could see this being relevant for use in some cases (for example stock market reporting covering the close on the cac-40 for the last week) and how this plugin works to accomplish what unobtrusive JavaScript should do: enhance the user experience not create the user experience.

jQuery Accessible Tabs (#)

More often then not jQuery tabs have the format of using a <ul> above the content to hold what becomes the tabs. This is cool if you are happy with the non-javascript result. You can see what I mean by viewing this version of jQuery tabs with your javascript off. Contrast with this version of jQuery tabs. See the difference?

They really are two different situations and for the time when you simply want to turn a semantically happy piece of text into tabs without having to add a <ul> of links above, this looks to be the answer.

Charts with PHP and Google Charts API (#)

I haven't spent any time looking at the Google Charts API, however this little class - which aims to provide a simple and lite charting solution in PHP - looks like a good place to start before diving into the whole API. While I haven't looked at the code, the result allows you to quickly build simple charts and pop them into your site or application. Very nice if you are in need of a quick solution.

Best practices when moving your site (#)

The Official Google Webmaster Central Blog provides their list of things to do when moving a site to a new domain. If you ever have to take this up and are worried about How do you do it without hurting your site's performance in Google search results?, then be sure to bookmark this link.

Ideally, you should contact the webmaster of each site that links to yours and ask them to update the links to point to the page on your new domain. If this isn't practical, make sure that all pages with incoming links are redirected to your new site.

Not sure if that first part would ever be practical...

Check out the Resource categories for older content

The latest from my personal website,
Mike Papageorge.com

SiteUptime Web Site Monitoring Service

Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:

The Principles Of Successful Freelancing

I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.

The Art & Science Of JavaScript

The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.

The PHP Anthology: 101 Essential Tips, Tricks & Hacks

Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..