20 posts about webdev
I was never super into Alan Cooper (of Inmates are Running the Asylum fame) until I read this hilarious argument with Kent Beck, the godfather of Agile programming. ... it's pretty depressing that this doesn't exist anywhere except for the zombieweb.)
Here's a couple of the best bits.
Oh, and it's all about Agile programming and Interaction Design. If you don't care about such things then this is all really boring probably.
It might be boring regardless.
When an architect begins to define a building, he or she works very closely with the people who are buying the building to understand what the requirements are, and translate those requirements into a sketch of a solution. Then there's a lot of give-and-take between the occupants of the building and the architect in coming up with a viable solution. Usually, the architect at the sketch level will know enough not to design something that's an engineering problem.
And if the architect does detect that there might be problems, he or she will consult with an engineer to make sure that he or she is not painting himself into a corner, technically speaking. At a certain point, the architect and the customer are going to achieve common ground. At that point, the architect turns those sketches into detailed drawings. Now, during the detailed-drawing phase, there's a lot more intense interaction between the architect and the engineer. The architect, you know, draws a span and calls in the engineer and says, how big a girder do I need to support this span? And there's a lot of detailed interaction between the two. This is precisely what happens in the world of good interaction design.
I think XP has some really deep, deep tacit assumptions going on, and I think the deepest tacit assumption is that we have a significant organizational problem, but we can't fix the organization. Essentially, the crap rolls downhill and ends up rolling right into the programmer's lap. When the product or the program turns out to be unsatisfactory, the fingers point to the programmer. XP is very well-intentioned; it's the software-development community beginning to say, "Hey, this is not only unfair to us, but it's not productive as a discipline and we can do a lot better."
"I applaud that sentiment and I agree with that sentiment, but then XP says, "OK, so, I can't change the organizational failings, so, I'm going to build my own internal defenses." I suppose this is probably better than nothing, but I'm interested in changing the way organizations are constructed. I believe that in order to create quality software, you have to change the organization. We can change the organization, and it strikes me that the assumption underlying XP is that the organization's structure is a given."
Building software isn't like slapping a shack together; it's more like building a 50-story office building or a giant dam.
Beck: I think it's nothing like those. If you build a skyscraper 50 stories high, you can't decide at that point, oh, we need another 50 stories and go jack it all up and put in a bigger foundation.
Cooper: That's precisely my point.
Beck: But in the software world, that's daily business.
Cooper: That's pissing money away and leaving scar tissue.
I make websites, and I manage a few web servers. Making sure that pages load quickly is a pretty fundamental part of my job.
Lately I have been thinking a lot about how much more important this concern is for people who are in low-bandwidth environments (my house in rural NC), and especially in what you might call "ultra-low bandwith" places, where issues like cost or a lack of reliable power compound the issue by an order of magnitudes.
I am thinking about how web developers can become more invested in the ultra-low-bandwidth user experience.
When it comes to bandwidth, international bloggers are talking about something totally different compared the "optimization" issues that web developers are fussing over.
For example, the Yahoo User Experience blog has just posted a really interesting analysis of page load time optimization techniques. But it occurs to me that the audience that they are writing for is largely the elite of the internet — they are trying to save a few tenths of a second. They are tuning a product, not really thinking about ultra-low-bandwidth situations. Which is fine, that's why they exist I guess.
I mean, It's web development 101 that you need to make you pages small. Load time is the number one element in usability. Even with that fancy DSL line, you appreciate pages that function in 1/10ths of a second instead of 2 or 3 seconds. I'll take it. And I am glad that they Yahoo folks are doing this great research.
For example, the a November post made me think about my techniques a bit differently — they pointed out that having a low-weight page is nice, but the speed experience is much more greatly affected by the number of elements on the page. An understanding of latency vs. bandwith makes this point even clearer, once you consider it.
Today they published an even more interesting look at the browser, focusing on the fact that browser caching appears to only be utilized in about 20% of browsers! As a developer there is no way to force a user's browser to cache data, which could easily reduce page load times by about 3x, depending on the content being served, mostly because of the point above: you save the most time by reducing the number of http requests altogether.
For me this immediately made me think that this is a technique that should be built into any browser that gets used in a low-bandwidth environment ... but I bet that there are innumerable browsers installed in that do not take advantage of this feature, even where connections are extremely slow. Hopefully the browsers that ship with the $100 laptop (and its kind) with be caching as much as possible. ...
Softwarewise I really am overdue to give appreciation to my favorite independent software artists:
- Iridesco, creators of Harvest
- Panic, Creators of Transmit (ftp) and Unison (yes, usenet still exists)
- Ranchero, makers of NetNewsWire
- FlyingMeat, maker of VoodooPad, in which I have hundreds of scribbled notes.
- and of course Macromates, who make the most fantastic text editor ever (after you get over the lack of FTP integration and your BBedit muscle memory. Takes two weeks.)
I think Textmate is the best software I have ever used: as an external blogging client, it makes blogging a freaking joy. If you are serious about a text editor, at least check out some of those demo videos on their site.
If you are interested in keeping up with the best practices of mime types, content types, character encoding and doctypes ....
A very nice survey of document types from the best developers on the web:
I recently posted about my need for a simpler RSS aggregator.
I worked through the massive list of existing RSS aggregators at wikipedia and couldn't reallly find something that did exactly what I wanted and worked.
I needed something that was simple, cached hourly, displayed various encodings well and worked with RSS and Atom formats. Most importantly, I wanted something I could install on my own server, and it needed to be community oriented (not designed for a single reader).
Most of the existing solutions on the web are hosted by a third party, and are limited in the number of feeds that they can aggregate.
The best hosted solution I found was Gregarius, which has a lovely community. I think that gregarious will take the cake sometime this year as aggregating catches on. For now, however, the plugins are pretty limited — you are locked into a personal reader with "Read/Unread" tagging. (Which makes Gregarious a great replacement for a newsreader like Bloglines, but it's not good for a community aggregator where lots of people visit.)
If I were a better person I'd just write a Gregarius plugin, but instead I've just reworked some of Feed2JS's code (which is in turn dependent on the Magpie RSS parser.)
You can download it here.
Otherwise edit the php file with the rss or atom feeds you want to include. It will probably need a little CSS to spice things up. You can send comments or questions about the script to chris(at)nonprofitdesign.org. I'll release another version sometime soon with better documentation and a prettier front end.
An example of the styled script in action is here (at the Piedmont Biofuels website).
UPDATE: That page now uses simplepie, which kicks ass.
This is where it's at folks: free programming and web design books. Make your computer do impossible feats of inhuman strength with this collection of languages and techniques, from old-school Fortran to Web 2.0 hipster-standards AJAX or Ruby.
I'm loving this collection and (hopefully by mid spring) I'm going to gather all of my favorite tutorials for use as a singe "Intro to web design" document. (Round of applause for the Creative Commons license, please.) So far I have been using Google's wonderful new "Search by license type" feature on their advance search page, but this yields mostly just very specific tutorials. This page just turned me on to a whole lot of their helpful resource, even if I can't redistribute materials from the big publishers.
Most of the books here are just distributed online for free because they are older editions. They aren't using an Open license, except in the case of the many online tutorials that are linked here (which are typically carefully chosen, I found).
This collection contains a lot of really great books (many from O'Reilly) that just happen to be a little out of date. I tend to get real excited when I find these things in the basement of my local thrift store, so this is real exciting. I'm noodling around this afternoon with a 2002 edition of "Mastering Regular Expressions," which is the perfect book to find used becuase you don't want to memorize all of it and it just doesn't change very fast. In general I find that computer books are still really useful until about 6 years (or, for web design books, pre-IE6).
A couple of golden links for the basics:
The 2000 (O'Reilly) Definitive Guide to CSS (I use this one at home. Totally comprehensive, excellent in spite of the age, and written by the CSS demigod Eric Meyer. It never has been — and never will be — a great reference for browser support, which adds it's timelessness.)
The Definitive Guide to HTML and XHTML (I use a hard copy of this one too. Great for looking up all those form and table tags you forget about. Written shortly after the standardization of XHTML 1.0, there's no reason I can see to use a later version for now.)
Didn't think I would find these for less than the $0.50 I paid for mine at the thrift store.
Last night I was trying to do something that I thought would be pretty simple: display a bunch of recent weblog posts on one page.
There is a great online community of folks in the biofuels blogosphere, and this page would give a quick summary of their myriad, nerdy, wonderful events and research.
I'd had experience with building this type of page last year, when I just wanted to have an "aggregator" page of all my most loved online reading. I ended up just slapping things around with Magpie RSS (an excellent open source PHP class), and it worked fine. Not slick, but fine.
So forget all that, because this isn't just a wonky personal project — it will hopefully end up being part of the excellent Piedmont Biofuels website — so it needs to be quick and hosted on the server.
So last night I opened up the latest installation of MagpieRSS and installed it on my server, created all of the necessary php for each of the blogs, and I ended up with a decent document. The major problems with this first version (using just the Magpie class) is the inconsistent treatment of the posts — some appear and some don't — and the improper encoding of the blogs. (I went 'round and 'round with the encoding. It's a common problem, but I couldn't get those damn posts clean.) Probably a few days in the Magpie listserv archives at Sourceforge would clear all of this up ... but the archives are exceptionally annoying, the Magpie blog is down, and the first version was still surprisingly slow anyway, even with the cache working.
(Actually, while I'm writing all this out, I should bother to mention that there are a hell of a lot of 3rd-party RSS splicers/combiners ... but, again, they're all third party, and they seem to go extinct quickly: e.g. the defunct rollup.org. Most of these also have ads, are not free, or have limitations on the number of feeds, like feed digest. I was surprised and disappointed that I couldn't find something to install on the server that would take care of this — somebody please let me know if there's something reliable out there. This would allow me to combine all the posts and just run the JS once.)
So, from a programmer's view, this is a little inelegant, but the result is really consistent, and it still comes in at 8.5 seconds on 56K. The (minimally styled) latest version is here.
Mike Davidson has been working lately on an innovative (I said innovative, not trendy) online news company, Newsvine, that provides articles from mainstream media outlets. The Newsvine team is a well-respected web group, most of them formerly of Starwave, a studious anti-hype third-wave (i.e. late 1990s, post-bubble) internet company. (Here's Starwave's startup profile from a 1996 Fast Company article.) Davidson's also a major contributor to SiFR, which typophiles (that's typography, not typos) and web developers everywhere love.
The trick of Newsvine is that it comes in a really well designed interface and allows community input, both by linking and commenting. Here's an extract from a larger rundown at Solutionwatch:
One of the main frustrations of reading normal news sites for me is how they all have cluttered sites with advertisements everywhere, news mixed around, and when I find a story of interest, I can't even comment about it. Newsvine is the complete opposite and I immediately felt at home with their beautiful interface that allowed me to easily find and read what I am interested in. The design consists of a style that I feel has the unique style of its founder, Mike Davidson. The main page gives a clear overview of all the news submitted from the Associated Press and the Newsvine users, along with buttons to vote and comment on stories (more on this below). "The Wire" being news from sources like the Associated Press, ESPN, and other services. "The Vine" being user submitted content.
Personally, I'm very excited to see companies that understand my Sysiphean-Kafkaesque nightmare of flashy, obtrusive, cluttered websites like Yahoo! and all the major news outlets (see image). And of course I'm excited to see (another) community-building website that allows for the development of local folksonomies and scalable collaboration.
I would very much like to start using Newsvine in order to tag and collect news items that are relevant to my organization(s). Considering Newsvine's focus on usability and design, I think it would be a serious alternative to using something like del.ico.us to share links. Del.icio.us just has such an uber-geeky interface that is seriously off-putting to most warm-blooded nonprofit people. And of course, there are a number of other "social news sites" that are doing something similar to newsvine, including:
Digg.com, in my experience, is the best of these and has the largest user base (there are even rumors on the Digital Divide listserv from Phil Shapiro that it will soon be larger than geeky heavyweight slashdot.com. As Phil says: "Community editing of news. Community. Editing." It's a huge thing indeed.)
For an example of Newsvine's potential, look non further than this map (see image), created by Fraser Mills today. In the "tradition" of the best web applications, developers will soon have a Newsvine API (a kind of cookbook for developers, saving lots of time) into which all kinds of fun can be had, and Fraser is just a little ahead of the curve. His map represents news items according to their location. You can click on each country and get a rundown of the news in that area. I imagine that you will soon be able to sort and filter to create some impressive maps of information.
Most impressively, Davidson has written today that an API is in the works and that: "Once true location data like this makes its way into posts, wire articles, and seeds, the map will be even more useful. You'll be able to zoom in on Seattle, for instance, and get stories down to the micro-local level."
Now that would be useful.
Newsvine is still in beta and registration is limited. But based on Mike Davidson's previous work and the projects promising future for collaboration, I'm eagerly anticipating my invitation.
[This post was edited 2/7 to reflect the correction as indicated in the comments section below. Pictr.org regrets the error, as they say. I did get the invite last week. We'll see how it goes.]
Great advice on crafting a home page from A List Apart. In short: build it last, and work first on the details (the smallest, ubiquitous elements of your site). A great homepage with poor search results or product page will only lead to disappointment. So if your site is shallow and ugly on the inside, make sure your homepage is too. Also:
If a first time visitor to your site's home page does not understand what it is within three seconds, you've failed goal number one, so feel free to skip the rest. The only people who will use the site are the people who already know what it does. Or, ya know, masochists.
While I'm in a website-improvement mood, there is also a handy post today from Alt Tags, summarizing the Five Steps to a Better Website in the New Year (via the ever-useful 456 Bera St.). In short:
- Give Your Content Some Attention
- Validate Your Website's Relevance
- Think About Your Customers
- Review Your Site Navigation
- Identify Accessibility Problems
R. Johansson says it best. This is the single most important tool any web developer can have.
Web Developer Extension 1.0
for Firefox, Flock, and Mozilla has been released. There are many new features and bug fixes, so upgrading is highly recommended. The Web Developer Extension is a definite must have for any web professional, so if for some reason you don't already have it, download it now.
For more info and comments, visit Chris Pederick's blog post Web Developer 1.0.
Not that I have followed any of this advice yet, but here's a thoughtful article about preparing websites for an international audience from Molly Holzschlag:
Despite the fact that the Web has been international in scope from its inception, the predominant mass of Web sites are written in English or another left-to-right language. Sites are typically designed visually for Western culture, and rely on an enormous body of practices for usability, information architecture and interaction design that are by and large centric to the Western world.
There are certainly many reasons this is true, but as more and more Web sites realize the benefits of bringing their products and services to diverse, global markets, the more demand there will be on Web designers and developers to understand how to put the World into World Wide Web.
The entire article:
24 ways: Putting the World into "World Wide Web"
Web Designers everywhere are taking a break.
Sometime about 5 years ago people began to realize the frustrating limits of web development because the existing standards were so poorly followed by existing browsers. It was something like what Frost said about "poetry without rhyme is like playing tennis without a net."
Which is to say, no fun at all. Online communication has progressed steadily since then, and now we have wonderful fruits like "AJAXy goodness" and other Web 2.0 technologies to reap. So take a break from griping about Netscape vs. Internet Explorer.
But Google Maps (etc.) being accomplished, we're looking for ever greater technologies. The next frontier of web development is the mobile browser — the web in a cell phone.
The concept of the mobile web has been huge this year, and it is now taken as a fact that most internet users in the next 5 years will be getting online for the first time through their cell phones.
And so, with that in mind, here's a great series of articles from designer Cameron Moll that looks at the background of the mobile web and explores the specifics of developing +designing reliable, readable sites for really, really small screens.
How do we designers and code slingers cope with the current state? What slings and what doesn'? This article attempts to present technical advice on a superficial level.
Mobile Web Design: Tips & Techniques ~ Authentic Boredom
A Major O'Reilly Open Source Convention next week in Portland (OR) is hosting a panel of women developers (Update- It's even worse; women's representation in IT generally has gone down 20% since 1994.)
This post from Tech Soup is a good, brief introduction to the use of databases in your organization.
The author of this article (a nice techie from ONE/Northwest) finds that you should really call in the professional to get things set up — I would agree, but don't let that keep you from learning how to use it.
A database is an investment of time that can really pay off, especially if you have been managing your donor lists, inventory, etc. by hand. But that means you need to know how to use it.
Make sure to check the entire selection of articles about nonprofit databases at Tech Soup.
Here's a bit from the overview:
While it's no simple task, developing a basic Web site made up of pages of text and images is usually a job that can be taken on by the staff of a nonprofit organization, hopefully with a little help from a professional designer who can aid in the development of the site's look and feel. Implementing advanced features on your site, however, will most likely require a level of expertise that doesn't make sense for your organization to internalize. The goal of this article is to explain the benefits of database-driven Web pages as well as the possibilities and vocabulary involved to help you make informed decisions.
From Digital Web Magazine (a reliable regular read), this article discusses the thought process behind designing a website. Written from the perspective of the web developer, it's also a good introduction for clients.
This is a good article for nonprofit-type folks who are thinking about getting a website.
Here's a bit:
"Interestingly enough, most of the sites I work on don't have the goal of making lots of money. Most of my sites are communication sites, so the goals become a little more complicated. I try to take what the client wants to do and put it in a few sentences of goals, like "cut down on phone calls about the posted schedules, let users know how to get a personal trainer, and present a sophisticated portfolio."
Read the article: Digital Web Magazine - Creating a Site Design Plan
I recently picked up a copy of the "for Dummies" CSS tutorial book and was disappointed to find the following in a section about using named vs. hex color values (like cornflowerblue instead of #6495ED):
"... my advice is to just assume that pretty much everyone who'll see your web page uses IE [Internet Explorer]. Why? Because most everyone does use IE." p. 79 CSS Web Design For Dummies, 2005
Thankfully, our dear author is misinformed, or simply addled. Unfortunately, the sentiment that "only Internet Explorer matters" is a popular one still. New webmasters please be 'ware: there are alternatives to Microsoft IE, most notably Firefox which has more than 25 million downloads and is now reported by the W3C to have nearly 20% usage on the internet. That's a lot of people who will be seeing a screwed up page if you only test your work in IE.
Apparently, people want to test and develop in IE because it simplifies life. "Your job is much easier," writes the Dummies author, if you only design for IE6. Indeed, browser conflicts are tough to deal with as a web developer. But let's get things straight: Internet Explorer doesn't follow standard CSS rules, which makes everyone's life much more complicated. Read all about the problems (and yes, the necessary workarounds) at www.positioniseverything.net.
There's always a lot of curiosity about online fundraising among organizations that are new to the web. Rightly so. Having a "donate now" link could be, by itself, a reason to have a nonprofit website. You can give out the address of your site with all correspondence and know that you're getting the plate passed at the same time, for much less money than a direct mailing or phone solicitation.
But what's the best way to do it? You could take credit cards on your site, but generally the trend for mid-to-small organizations is to outsource the process entirely. By far it appears the most common technique is to register with a service such as groundspring.org or networkforgood.org, which take the security issue of processing credit cards out of your hands. Either of these sites provide simple setp-by-step directions and are quite reliable in our judgment. But they take at least a 3% cut of a few percent for each donation. Groundspring take 3% plus a set up fee and a recurring bill of about $15 - $30 month. Groundspring's fees come with added services: a "tell a friend" button for donators, the ability to give rewards for certain levels of giving, extra security and automated chariable giving receipts.
I'd stick with one of those unless your organization is very large, recieves a large amount of funding through online donations, or has a savvy techie on staff with plenty of time. It's a good way to make sure your donations are handled accountably, which is important to donors of all stripes.
The "donate now" button is but one of the many ways to use the internet for fundraising. Regarding the wider spectrum of online fundraising, of the best articles on the subject is published by Groundspring: the Online Fundraising Handbook. It's about 100 pages and isn't shy about referring you to their "competitors."
On a related note, if you just need to sell something (like T-Shirts or something), use Paypal's "merchant tools."
If you need to easily display slideshows online, there are a couple of options that I have recently run across. The simplest, though not as sophisticated, process is to use a site called Flickr, which was recently acquired by Yahoo! and can be a lot of fun. You just upload your pictures and folks can link to them to form online picture-sharing communities. The best feature is that it can export to your blog or website, though the format is not as customizable as I'd like.
This type of slideshow would be good for nonprofits that need a way to showcase their activities on the web. There are other, more expensive solutions, but they are often overdesigned (with noises and animations at every click of the mouse).
If you or your nonprofit is concerned about your pages being readable to people with limited sight or non-graphical browsers, you should check out this classic book on accessibility. Building Accessible Websites explains in clear, detailed steps how to get your site up to speed. And it doesn't have to mean a major foray into tangled html. Just add some alt tags and title tags, and you've cleared the first hurdle. From Chapter 6:
The importance of making absolutely all the images on your Website accessible cannot be underestimated. This simple action alone gets you more than halfway toward an accessible site. You have to do it correctly, but even if you skip every other accessibility step, your sites immediately become fundamentally accessible.
Unfortunately, hundreds of major sites have not caught on to this and persist in using images for navigation without providing alt text or title text. It's obviously not good business to turn away disabled customers, and in some cases (as in web sites made by the government) it may be illegal. And besides, it is always good for search engines to have your images described in the text.
Well, this is perhaps not a definitive guide, but a good one nonetheless. I like his method of including the CSS link in the commented rule, and I appreciate his concern that IE7 (the next release of IE) will have bugs resolved — making the hacks a problem.
The summary of our latest project client-side development brought to conclusion that there‚"are are really just a few essential Internet Explorer hacks. By careful structure planning, I managed to stripe down all hackery to a much less additional rules. Since they are promising IE7 some time soon, more and more I think about secure CSS hacking. We surely don't want our sites to be a mess in IE7 for it's quite possibly half-repaired CSS support.
maratz.com archive Essentials of CSS Hacking For Internet Explorer