First, I want to make sure that people visiting this site are aware that the community forum even exists. If you have any questions, comments, or concerns about something related to this project, I invite you to visit the forum. (And keep in mind that we have a pretty loose interpretation of 'related to the project' around here :).

I think you'll find the level of discussion to be a little (or a lot) better (i.e. involved, useful, supportive) than is typical. I consider community to be a critically important aspect of this project - as important as the code itself. Community means working together on some shared interest. If you're interested in learning about the web, and taking on a more active role in your own participation on the web, then that very well could include you too. The forum is not strictly a place to take your problems. It's a discussion forum for... discussion.

Second, I love this question because it allows me to show you just how simple web development can be. Now, I don't want to trivialize this. Learning to program requires a significant amount of time and effort. But if you're willing to invest a little bit of yourself, you can do it. And if you do decide to learn, the benefits far exceed the effort. With that out of the way, look at the little bit of code required to implement a very nice, customizable time fadeout using JQuery:

<script type="text/javascript">

    $(function()
    {
         setTimeout( function() {$("#fading_message_container").fadeOut(2000)}, 5000);
    });

</script>

That's it.

Read the rest of this post

• Percentage of people using the Food Bank with a university degree: 28+ percent.

  It was 28.something. I don't remember the precise number.

• Median amount of money people using the Food Bank have left over per day after paying just housing and utilities (including transportation but not entertainment): $5.67

  Think about the demands for that $5.67 other than food - e.g. medical care, clothing, activities (unless you believe that just being poor is sufficiently rewarding to justify having to struggle through life).

• Median monthly income of people who use the Food Bank: $925.00

• Median hourly pay: $11.60

Looking at that $5.67 number a little more closely: (I assume that's in Canadian dollars)

• That's $2069.55 a year

• If you spent all of it on food you'd have $175.00 a month to spend on food with nothing left over for other groceries - e.g. toilet paper, health and hygiene products.

  And again that would leave nothing for clothing or other necessities. (For example it includes nothing for insurance - health insurance, life insurance, homeowners/renters insurance.)

Read the rest of this post

Hopefully at least a couple of you have given it a try? For the rest of you, SimpleViewer is... well, it's a company (SimpleViewer Inc). It's also a software product of the same name (SimpleViewer), which is actually just one in a series of similar 'image viewers' they make.

In addition to SimpleViewer, there is also: TiltViewer, AutoViewer, PostcardViewer, and some utilities to help with putting these galleries together. There is a demo for each of these products at the SimpleViewer site. I really think you'll enjoy playing with the demos a bit. (They're that good.) So if you have a minute, go give them a try.

SimpleViewer is the general purpose tool. The others are more... niche/specific. You probably wouldn't want to use them for every gallery, but you might find yourself looking for excuses to pull them out.

The absolute best thing about the software, other than the galleries themselves, is that they all work for self-hosted sites. You can pull photos from a Flickr account too, but I like to think that the emphasis here is self-hosted photos. (If it's not, I'm just going to pretend that it is.)

But these galleries have a big problem. All of them except SimpleViewer are entirely Flash-based. A few years ago that might have been a concern but not necessarily a deal breaker. Today, it pretty much means that they shouldn't be used. Users with mobile devices are just too much a part of the web these days. And as more and more people get used to the idea of browsing without Flash, it begins to disappear from browsers even on platforms that support it. Even Adobe has conceded that HTML5, and not Flash, is where this is going. (Android supports Flash, but there are issues. Apple never has in the iOS. Windows Phone doesn't support Flash either.)

So why am I still talking about this software then? Is that the end of SimpleViewer galleries? No.

SimpleViewer (the company) started reworking SimpleViewer (the gallery software) for HTML5. If you were to download the latest version of the software and build a SimpleViewer gallery now, you would get both a flash version and an HTML5 version of the same gallery. (Note: This is true of Simpleviewer but not TiltViewer of the rest.) The HTML5 version is automatically used whenever Flash is unavailable. Great?

Well the HTML5 gallery is not anywhere near as rich and refined as the Flash version. So you get great galleries for visitors with Flash and a relatively barebones experience for mobile devices (and others without Flash). Still it's far better than nothing. The HTML5 galleries work well, just not as well. And I would still recommend SimpleViewer today.

Yeah, yeah, yeah... so what's Juicebox????

Read the rest of this post

If you're making changes to a theme or working on a brand new theme, no one will be able to see it unless they specifically request it, as long as it is not the current version of the default theme. That gives you 2 options.

1 - You can give your new theme a name other than the default (even if it will eventually be the default theme for your site).

'new_unfinished' would work fine. You could preview your new theme by specifically requesting it, like:

http://example.net/cgi-bin/ode.cgi/index.new_unfinished

All of your visitors would see your current default. Creating a new theme is as simple as copying an existing them and changing it's name.

When you're finished with the new version, give it the same name as the default theme and you're done.

Read the rest of this post

With the ShyPosts addin you could append a suffix that corresponds to a shyness rule to the end of post file names while you're writing them, something like:

'__unfinished'

For example:

'new-post__unfinished.txt'

That post will not appear on your site unless requested by name:

http://example.net/cgi-bin/ode.cgi/new-post__unfinished'

(Assuming the post is at the root of the site.)

Read the rest of this post

The ShyPosts addin allows you to specify posts that won't appear unless specifically requested. Shy posts won't volunteer themselves, but they will participate if called on by name. They're not hidden, they're shy.

To use the addin, you create a shyness rules file (plain text) containing a list of patterns. These rules are matched against the full path to your posts. If ANY PORTION of the rule matches the path to the post (including the post filename) then that post will be considered shy. All posts and subdirectories of a shy directory are shy.

Rules are interpreted as regular expressions (by default). So there is a lot of flexibility in specifying exactly which posts are shy.

Read the rest of this post

This screenshot does a better job describing what I'm talking about than I could in words.

Click the image and hold to zoom

The image shows Coda, connected to ode-is-simple.com (this site). You can see the file browser over there on the left, and all 4 posts open in tabs (across the top).

The tab that's open is Part 3 (colorbox-howto-part3.txt), the longest of the posts. To make it easier to work with the post, the window is split horizontally so that I can see and edit two sections of the post at the same time. I could just as easily have the stylesheet and a post split like that so that I can compare the rules in the CSS file to the markup in the post file.

And the hosted publishing platform you're using can't do that! (It's funny because it's true. :p)

• A Colorbox how-to: Part 1 -- What is Colorbox and why do I like it
• A Colorbox how-to: Part 2 -- Using Colorbox (Short and sweet)
• A Colorbox how-to: Part 3 -- Using Colorbox (a detailed guide)

Enjoy. (And I'd love to see your first Colorbox gallery.)

Update: Forgot to actually install the script on this site so the gallery in Part 1 was broken. Ha. Fixed.

You can believe me that it takes just a couple minutes to install Colorbox (because that's about as long as it just took me. But I've read my how-to. ;)

Colorbox is "a lightweight customizable lightbox plugin for jQuery."

What does that mean? Let's break that question down into a couple of parts.

Colorbox is a JQuery plugin

JQuery is a very popular Javascript library. It builds on top of what Javascript can do on it's own, adding functionality or reimplementing features of the language so that they are easier to use, more concise, and compatible with a wider range of web browsers, in addition to other benefits.

From JQuery website:

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

For our purposes here, it means that in addition to ColorBox itself, we'll need to link to JQuery (because Colorbox assumes that JQuery will be available). As you'll see, including JQuery is as easy as copying and pasting a short code snippet.

As a JQuery plugin, colorbox() adds to what JQuery can do on it's own. More specifically, it adds a .colorbox() method to JQuery DOM objects that we can use to create photo galleries. You'll see exactly how this works later on in this how-to.

Colorbox is a lightbox

What is a lightbox?

Whether you can define it or not, you're probably familiar with this kind of thing. A lightbox script is a way to present photos and photo galleries (as well as types of content), so that the content appears to float in front of the current webpage.

Typically an inline photo included as part of the page content serves as a placeholder for the gallery. When the gallery is run, by clicking on the link to the lightbox gallery (again an image, button, text link, etc.), the page seems to fade into the background while the first photo in the gallery appears front and center on top of the original page.

Visitors can then click through the photos, and when finished dismiss the gallery and return to the original page. (Usually by by clicking a close button, pressing the 'esc' key on the keyboard, or clicking on a portion of the page still visible 'behind' the the gallery.)

Here's an example of a lightbox style photo gallery that uses Colorbox.

The photos aren't especially interesting. These are just some pictures I took recently in and around Boston, MA USA (which is where I live).

Lightbox style galleries are just one type of photo gallery. And Colorbox is just one example of a lightbox style gallery.

Read the rest of this post

If you don't need anything more than a bunch of code snippets and short description of where they go then this may be enough. If you'd like to have a explanation of what all of these bits and pieces do, how they fit together, and exactly how it all works, then you'll want to read Part 3. Everything I say here is also covered in the longer post.

I should say you that you can find all of the information required to use Colorbox at the official Colorbox website. (After all, that's where I got it from.)

In addition to demos and other info about features, etc., the Colorbox site includes the following resources you may find especially useful:

• A Beginner's Guide

  Colorbox is a JQuery plugin. If you are familiar working with JQuery plugins then you may want to skip the beginner's guide in favor of looking through the source on the demos page, as is recommended on the beginner's guide page. Otherwise the beginner's guide is a good place to start. Alternatively you can keep reading this post.

• The complete list of recognized settings

  Before or after you get Colorbox working, you'll want to look here to familiarize yourself with the options available. There are quite a few useful options. I'd bet you'll find something you want to modify.

• An FAQ

  It's not a bad idea to quickly glance through a FAQ even before you've had a chance to come up with questions of your own. Frequently asked questions are asked frequently because the associated issues tend to come up a lot.

  It's probably a safe bet something mentioned in the FAQ will be useful to you. (If not now, then soon.)

Part 1: Installation and Setup (Preparing to use Colorbox)

Step 1: Get all of the Colorbox related files to your server.

1.1 - Download colorbox from the project website.

1.2 - Go through the example galleries included as part of the Colorbox distribution and pick a style that you'd like to use as a starting point for your own galleries.

1.3 - Upload the minified version of the colorbox script ('jquery.colorbox-min.js') included with the Colorbox distribution, and both the 'colorbox.css' file and the 'images/' directory (and it's contents) from the example gallery you've chosen.

I recommend placing all of these in the same folder on the server.

For example:

/resources/

    scripts/

        colorbox/

            jquery.colorbox-min.js
            colorbox.css
            images/

Step 2: Include JQuery and Colorbox in your theme

Link to the JQuery script in the head section of your page._ theme file.

<!-- JQuery script (hosted by Google), 1.7.2 current as of 2012/0428 -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>;

Read the rest of this post