I couldn’t find a single person who had done this before, so after struggling for a day or two and finally figuring out that it does indeed work (and it turns out to be pretty simple) I thought I would share the knowledge on how to do it.

Set up the Machine Image

EC2 has ready-made Ubuntu images with Cloud-Init already installed, but for Rackspace the first thing you need to do is create a similar image. All we did was to get a stock Ubuntu image (11.04) and run `apt-get install cloud-init` on it.

That’s it. Then just save out that image to your account.

Bootstrap the Image with Fog

Note: We’re using Ruby, so we can use the awesome Fog gem as a wrapper around the Rackspace REST API, but you could also accomplish the same thing with the raw API.

A couple of notes, and then I’ll show the code:

• We are generating an SSH key-pair to initialize the server with. This is not strictly required, but if you don’t do this, you must save the password attribute of the returned server object on the initial create call. Subsequent queries against the server will not return the password for security reasons.

• The “Personality” field is the crux of this process. It allows you to send up to 5 files to be put on the server in a location of your choosing at boot time. It turns out that this can be used to “seed” cloud-init with the files it needs, mimicking the “user-data” field you would pass to EC2. Note that the path to the file you supply does not have to exist on the image. Rackspace will create the directories for you if they don’t.

• The path where you put the files is also important. In the code below the `/nocloud-net/` part of the path can be interchanged with a few others, though I’m not sure what some of them mean. Don’t quote me on this, but I believe that `/nocloud/` is supposed to mean that you’re not in the cloud, and `/nocloud-net/` is the same, except that you are guaranteed that you will have a connection to the internet when it runs (a little bit later in the boot process than `nocloud`). But we can hijack either one for our use in seeding cloud-init.

• Very important: you must supply BOTH the “user-data” and the “meta-data” files in order for cloud-init to run. In EC2, the meta-data file has a bunch of EC2-specific data in it (and some generic data, to be fair), but I found that we didn’t need any of that data and the defaults worked fine. But you still have to create that file, and an empty string doesn’t work (the file doesn’t get created), which is why we have specified a single space for the contents of the file.

• The `user-data` file can be any type of file that cloud-init normally expects, including the multi-part format, so you can include multiple files that way. The code below shows how we compiled some files from the local file system into a multipart document (each with the appropriate `#` or `#!` header). See the cloud-init documentation for more info.

# get a handle to the fog compute abstraction
compute_adapter = Fog::Compute.new({
  provider: "Rackspace",
  rackspace_api_key: "",
  rackspace_username: ""
})
 
# generate the ssh key-pair
keys = SSHKey.generate
 
# let's make a multi-part document
scripts = MIME::MultipartMedia::Mixed.new
 
# assuming `files` is an array of File objects corresponding
# to real, properly formatted cloud-init script files
files.each do |f| do
  scripts.add_entity(MIME::TextMedia.new(file, "text/plain"))
end
 
compute_adapter.servers.bootstrap({
  image_id: 39,
  flavor_id: 1,
  name: "A Name for the Server",
  personality: [
    {
      'path' => '/var/lib/cloud/seed/nocloud-net/user-data',
      'contents' => scripts.to_s
    },{
      'path' => '/var/lib/cloud/seed/nocloud-net/meta-data',
      'contents' => ' '
    }
  ],
  public_key: keys.ssh_public_key,
  private_key: keys.private_key
)

Helpful links:

• Cloud-init project with source code browser (including example files)
• Fog Documentation
• sshkey gem used to generate the proper type of keys

Because my previous post (WordPress: Sort Posts by Multiple Fields) was one of my most popular posts, and because I have realized since then that the solution it proposes is an inadequate one, I felt the need to write an update. I don’t want to be spreading bad information, and for a blog with any significant number of posts, that solution is untenable.

As progzy points out, sorting by multiple fields can be accomplished using the `posts_orderby` filter hook, which uses MySQL directly to sort the posts, instead of getting all the posts from the database into a gigantic array, and then sorting them with php code. Here’s how to do it.

Writing an orderby Function

You’ll need to write a function that returns a SQL fragment represented as a string, and then connect it to the filter hook. The SQL fragment is the `ORDER BY` segment of the SQL query that gets your posts from the database. See the MySQL Documentation on sorting for more info on this.

Here’s an example of a custom sorting function:

function order_by_multiple( $orderby) {
  return "post_date ASC, post_title DESC";
}

The above would sort the posts by date in ascending order first, and secondarily by title in descending (reverse) order.

Only Sort on a certain page

You can also make this much more complex, if you want to. One important way is by using the different “Conditional Tags” WordPress provides. Here’s an example that only applies the custom sort on the home page:

function order_by_multiple( $orderby) {
  if (!is_home()) {
    return "post_date ASC, post_title DESC";
  }
}

Hook up the sort function

Then, once you have your ordering function written, you just need to hook it into the WordPress code like this:

add_filter("posts_orderby", "order_by_multiple");

Make the second string argument there match your function name, of course (it doesn’t have to be the same name as mine, it can be anything). And you can have more than one function hook into the same hook. They will be executed in the same order they are added. In that case, the `$orderby` argument that’s coming into the function is the existing SQL fragment. So you could add to it, remove something from it, etc.

Use Debug Query to help figure out what to return

So the question is, how do you know what to put in your SQL fragment string? If you know your SQL well, you might be able to figure it out by intuition/trial-and-error. For the rest of us, there is a very helpful WordPress Plugin called Debug Queries which will print out all of the MySQL queries that are run for every page you visit (only for logged-in admins, of course. It’s just a debugging tool for use while developing).

If you install it, it will print out many queries per page. You have to look for the one that’s querying for posts. In my testing, mine looks like this:

SELECT SQL_CALC_FOUND_ROWS wp_posts.* FROM wp_posts (...)

The important part is the `FROM wp_posts`. That means you’re selecting rows from the posts table. So if you have plugins or metadata that you’re selecting on, you will see them in that query, and it may help you figure out what incantation you need to put in that `orderby` string.

If you need to sort by category, tag, custom meta-data, etc. as one of your sort values, you may need to alter your MySQL query even more, perhaps using other hooks (very similar to the `posts_orderby` hook), such as `posts_join`, `posts_where`, etc. Each of these modify different parts of the query.

Beyond that, if you still need help figuring out how to get the exact set of posts in the right order, you may need to read up on MySQL in general and learn how to manipulate the queries in more detail. Good Luck!

1) I’m learning object-oriented design, design patterns, object-oriented PHP, and object-oriented JavaScript right now. I wanted to do some experimenting with building systems using these concepts, so I came up with the idea of doing a series of “Web Experiments” where I take an idea for some kind of web application and make a demo of it, for fun and learning.

2) I think ajax is the future of the web. Somebody somewhere wrote “full page refreshes are so last year”, or something to that effect. I sometimes find myself clicking a link or a tab somewhere out there on the web, mentally crossing my fingers in hopes that it won’t send me to a new page. I think more and more people are going to expect slicker interfaces in web sites and web applications, and ajax is the way to get that accomplished.

3) I really like the comment/reply interface on Facebook. There’s a series of boxes, each with a comment, and the last box is minimized and says “Write a comment…”. When you click on it, it expands to look exactly like the other comments, with your picture there, just like it will look once it’s posted. You type your brilliant quip, and when you click the button, the comment “melts” right into the page, and the next would-be comment appears below.. I think it’s lovely.

With these three things in mind, I started building my own little “comment thread” app.

Features:

• Add, edit, and remove comments from the “thread”.
• No page refreshes – all done with ajax (jQuery)
• Comments are stored in a tab-separated text file.
• Shift-enter for a line break within a comment.

I’ve also built a class structure that I believe will help me expand the project going forward.  The planned additions/expansions are:

• MySQL Database support (will be able to switch between text file and MySQL with a single setting)
• Rewrite the JavaScript without using jQuery just for fun and practice, and to prove that I can.
• Multiple “threads” of comments
• Only load the latest 10 comments or so, and load more twitter-style.
• More to each message, like time/date of post, “last edited at…”, etc.
• Maybe a simple user system. I loathe to make people “sign up” for things though.

If you’re interested, you can download the files here.

I chose PHP Solutions: Dynamic Web Design Made Easy because I wanted to have some real-world projects to play with as I learned the language, as opposed to just the dry information.  The book delivered in that respect.  As per the name, the book focuses on specific needs and solutions for those needs using PHP and MySQL.  I got to see how PHP works with forms and databases, and how these techniques could be applied in a simple database-driven blog, for example.

However, probably the most useful part of the book for me were the tutorials on getting the Apache server, PHP and MySQL running on my local machine so that I could just jump into a code editor and start playing around.  I actually ended up skipping to these two chapters (one for Apache/PHP and one for MySQL) and then put the book down for a month or so before I picked it back up and finished reading it.

I started out by following along with the solutions and the code samples, typing them in and trying it out as I was reading, but soon realized that this was unnecessary.  I finished reading the better part of the book by simply reading and understand the code examples.  Whether this is a good thing or bad is up for debate.  It means the writing was clear, but also that the content was less challenging.

Besides the setup chapters mentioned above, the other most useful takeaway I had from this book was all the little things about the language that I mentioned above.  Things like “the truth according to PHP” (“false” evaluates to true because of type coercion), how the $_POST and $_GET superglobal arrays work, and other little things that really help put it all together in my head.

Another very useful aspect to the way the solutions in the book are constructed is the focus on security and thoroughness.  Some books leave out details, only hinting at it with phrases like “in a real application, we’d check this or that”, but in this book we are treated to some very useful (and usually very simple) techniques to make sure the code we’re building is secure and bulletproof.

All in all, I’m glad I now have the information I gained from this book, but I’m not sure it was exactly what I was looking for.  As with other introductory-level books, I found myself a bit annoyed by the “if that last part made your head explode, don’t worry, just copy the code and know that it works” -type attitude.  My head didn’t explode – on the contrary, that was one part where my brain actually felt that tingle of a concept falling into place.  Most of the book was spent thinking to myself, “yeah, I get it.  OK.  What’s next?”  I think I would recommend this book to others, but only if you’re newer to programming in general, and have very little or no PHP experience.  For me, with quite a bit of general programming, and some hands-on PHP experience from working with WordPress themes, it just felt a little bit too slow, but it did fill in some crucial gaps in my knowledge.

Javascript

Javascript is a programming language.  It comes standard with most modern web browsers.  It is also the same language that is used in Flash (where it’s called ActionScript), and can be used to write scripts in Photoshop, Illustrator, etc.  In the context of a web browser, it is often used to manipulate the DOM (see below).

jQuery

jQuery is a Javascript library, meaning that it is essentially a collection of functions written in Javascript that can be used to make the programmer’s job easier.  Common tasks that take more lines of code with traditional Javascript can be executed with calls to the jQuery functions.  There are several other Javascript libraries out there that fill the same need.  For one reason or another, jQuery seems to be the most popular library of the day.

The DOM

The Document Object Model (DOM), is just that – a model for representing and interacting with an XML, XHTML, or HTML document.  Our HTML documents are created by typing tags in plain text, and the DOM is a way to access the tags and the structure of the “tag tree”.  For example, instead of using regular expressions to find the text that represents a tag with a specific ID attribute, we can ask the DOM which of its tags has that ID.  Javascript is not part of the DOM or vice-versa, but Javascript in the browser does include some intelligence about the DOM – for example, the getElementById() function.  One of the main advantages of jQuery is the extra intelligence it has regarding the DOM.  With it, you access and create DOM elements (tags) by using the many selectors and traversing operations it offers.

I’m going to show you how (and why) I did NOT use that feature to create my customized home page.

Here’s what I wanted:

1. A unique page for the home page, including a few of the latest posts (displayed differently than on the main blog page)
2. The main blog page to be located at “url.com/blog”, showing the default latest posts (assuming permalinks are turned on)
3. All other dynamic archive pages shown by month, tag, category, etc., should be shown using the same template as the main blog page, without creating any duplicate files

Here’s how I did it:

home.php

Instead of using the admin interface to designate a specific file for your home page, you can use WordPress’s built-in template hierarchy.  This method has the advantage that if you’re building this theme for the public, it will automatically behave how you want it to, instead of having to instruct the user to alter their settings.

To do this simply design your home page’s php/html/css, and name it home.php.  That’s it –  “home.php” takes precedence over “index.php”.

Custom loop

WordPress shows blog posts in what they call “The Loop”.  The Loop works by doing the following:

1. The query — gets a set of posts based on what page we’re viewing.  Usually this is automatic, using the URL (e.g. “?p=138″ or “/category/news”).
2. “if(have_posts()):” — just like it looks, it makes sure the query got at least one post.
3. “while(have_posts()):” — keep doing the loop until we don’t have any more posts.
4. “the_post();” — this basically “loads up” the current post in the loop so that all the template tags associated with the post will reference this specific post from this specific query.
5. Then comes the markup output for each post.
6. “endwhile; endif;” — the end of the loop.

So, in order to customize the Loop, there are two main things we can do.  One is to make a unique query, and the other is to create a unique layout structure inside the loop.

For my home page, I wanted only the 2 most recent posts rather than the number set in the admin panel that would be used for the main blog page.  I added a simple counter and put this code in the appropriate spot in home.php:

1
2
3
4
5

$i = 0;
if(have_posts()) : while(have_posts() && $i<2) : the_post();
   // html output, template tags, etc go here
   $i++;
endwhile; endif;

index.php

In the aforementioned template hierarchy, index.php is the default template for all blog pages, and in the absence of home.php it would be the home page as well.  So I used index.php to put my main, default loop.  But how do we get index.php to show up at “url.com/blog”?

This is the part that I have never seen anywhere else, and what prompted me to write this post.  What I did was use index.php for its special status in the template hierarchy, and ALSO used the same file as a Page Template.  To use index.php as a template, just add the magic keyword/comment at the top, like this:

1
2
3

<?php /*
Template Name: blog
 */

Now, create a blank Page in the admin panel titled Blog, and assign the ‘blog’ page template to it.  The title will still be used to display the title on the page, and assigning the ‘blog’ template to it makes it use index.php as the page template.

Custom query

So now the url for the blog is right, but it’s displaying the blank page created in the admin instead of the default loop of latest blog posts.  To remedy that, we put a conditional test at the top, and if this is the blog page, we “reset” the query so that it contains all the posts.

1
2
3

if(is_page('blog')) {
   query_posts("");
}

The “query_posts” function creates the query, as mentioned above.  Passing an empty string as the argument makes sure we get all the posts.  We put this above the start of the Loop, to override the automatic query that is just returning the one ‘post’, in this case being the blank Blog page.

Fixing the pagination

There’s one other quirky problem we have to deal with now.  The flaw is in the empty query.  It works, but when you get to multiple pages worth of posts, the paging will not work right.  When we click the “next page” or “page 2″ link, the page number we’re going gets passed to the database as part of the query.  When we override the query with a blank one, we also override the page information, so we always end up on page 1.  To fix this, we have to find add a little test to find out the proper page, and add that in to our custom query.  After adding the paging fix, our custom query looks like this:

1
2
3
4
5
6

if(is_page('blog')) {
   if (get_query_var('paged'))
      $paged = get_query_var('paged');
   else $paged = 1;
   query_posts("paged=$paged");
}

“get_query_var(‘paged’)” gets the paging information from the original query that we’re about to override.  If it’s there, we use it, and if not, we assume we’re on page one.  Now you can write a spiffy Loop below this and it will be used for all blog post listings, including the default one at “/blog”

I hope this was helpful to someone!

I’ve decided to concentrate on WordPress development for several reasons:

• WordPress is one of the most popular blogging and CMS systems out there today.
• In the hands of an expert, WP can be extremely flexible.
• WP is easy to get started with, but difficult to master.  Inexperienced users often require expert assistance in customization.
• I’m already using it for this site, and have at least one more site in development using it.
• The skills used in creating wordpress themes (XHTML, CSS, PHP) are all applicable to generic web design uses – I’m not boxing myself in.

The plan for now is to keep practicing with custom wordpress themes.  First up is a redesign of this site.  Yep, it’s only a couple of weeks old and it’s already on the chopping block.  What can I say?  Sometimes I’m a perfectionist.

Basically what this means is working for free.  Investors speculate on whether their investments will increase or decrease in value.  In the design profession, the objection to spec work can be put this way: you’re speculating with a large risk for a very small reward. You volunteer your valuable time working on your craft, all for the chance of being awarded the contract.  An investment banker would never take that bet.  The client in this case gets a lot of free design work, and the “winning” designer is probably most often the one willing to do the most for the least pay.  This is one reason why many respected designers, the AIGA, and other organizations like NO!SPEC strongly advise all designers against this type of work.  And it’s not just about the individual instance of the free work, but it also encourages the lead/client and indeed the general public to see this type of business practice as the “norm”.

But there’s another major disadvantage to working on spec, from the both the designer’s AND the client’s perspective.  The fact is that a good design, that meets the client’s needs, involves the PROCESS as much or more than the execution of the design itself.  With this kind of work, the “design brief” is often something like “I’ll know it when I see it.”  A professional designer who’s good at his/her job will engage the client to find their specific needs, the intended emotional impact of the work, research the intended market and competition if any, etcetera etcetera.  When there is simply a prompt of “make a design for my company, and if I like it I’ll buy it”, there’s virtually no way for either party to guarantee that the design will match the intention.

Now, why am I writing about this?  Well… um… I did some spec work yesterday, and I have a sick feeling in my stomach as a result.  The results of the “contest” are still to be decided, and there’s still a chance I’ll be selected for the work.  Regardless, it feels bad for two reasons.  (1) It feels like grovelling, offering my services for free; and (2) I feel like I could do a much better job if I invested more time in communicating with the client, doing mockups and revisions, and generally carrying out the transaction in a more professional way.  The problem with that is that it’s a catch 22 — either I invest a lot more time to make a better end product that still might not win, or I stick with the simple mockups I did in a few hours which I know could be better.

So knowing all this, why did I do it?  Mostly for the same reason the apologists often cite as the one example where it might make sense.  Aspiring designers without much of a reputation or portfolio to speak of.  See, I’m already in that classic of all catch 22s where I need experience in order to get experience.  So I did some work for free, and hey, I might just convert those mockups into demo WordPress themes anyway, just for the portfolio material.  But I think the bottom line here is that you’ll be treated how you expect to be treated.  Fake it ’till you make it, right?  Act like a professional, and you are one.

If anyone happens to read this, I’d be interested to hear opinions in the comments.

The first time I touched any CSS code it was out of necessity.  Being used to the old-school style of HTML, using tables and attributes for layout and color, I was trying in vain to alter a Joomla template I was working with by just editing the HTML.  (Part of the problem, in retrospect, was that the template in question was a weird hybrid of table-based layout and CSS-based colors and images – but I digress.)  Eventually I realized it was the .css file that I had to play with, and after several hours of experimenting and tweaking, I had sort-of figured out how descendant selectors and classes and ids worked.  Sort of.  I got the results I wanted, but not in the most graceful way possible by far, and without a complete understanding of how I did it.

So when I recently decided to take my career towards web design as a profession, I knew I had to brush up my knowledge in certain key areas, starting with XHTML and CSS.

Enter CSS: The Missing Manual by David Sawyer McFarland.  The book starts out with a short review of (X)HTML, explaining how and why modern HTML is different than it used to be.  More than just a list of changes, this opening section is a mini-treatise on the modern concept of separating the structure “layer” of a web document from the presentation “layer”.

From there, the book goes on to explain in a very readable manner the basics of internal and external stylesheets, and inline style declarations and why they’re usually best avoided.  Also extremely helpful is the explanation of “the cascade” and how it works.  This information, while it may seem boring and bookish in other presentations of the same material, is essential in understanding why sometimes you write a style that should work but nothing happens.  This is often caused by precedence rules according to the cascade.

The meat of the book follows, and of course it entails thorough treatments of every HTML element you’d ever want or need to style, ending with a substantial section of the book devoted to page layout techniques.

But the best part of the book has to be the inclusion of the tutorials.  As I said above, I learn best by doing, and this book is set up for just that.  There’s a set of files you can download from the book’s website to work with as you go through the books tutorials.  Each chapter has two parts: first, an introduction to the topic; and second, a tutorial where you can follow along and see the concepts in action.  It’s a great way to get used to typing the code so that the syntax becomes second-nature.  And, if you’re anything like me, you’ll find yourself continuing to tweak and add and subtract the styles after the tutorial’s over, just to see what happens and deepen the understanding.

Overall, highly recommended.  The book lives up to its name.  In fact, I enjoyed it so much (and felt I learned so much from it) that I bought the Javascript book in the same series, which focuses on immediately applicable Javascript techniques using the popular jQuery library.  I can’t wait to get started.

My point will be made more easily with an example:  I wanted to show the links on my “Links” page in boxes, with linked title and images, and a short description, all controlled by CSS classes.

WordPress offers a “template tag” (that is, PHP function) for theme creators to display the list of links added via the admin panel.  You can put it anywhere in your templates (for example, in the sidebar) and it will automatically keep the list up-to-date:

1

wp_list_bookmarks();

That function generates an unordered list of link categories, with sub-lists of each link, complete with CSS styles assigned so that you can add a custom style.  But, say you (like me) don’t want the categories, just the links please.  And can I have it show the images associated with the links as well?

To this end, the WordPress developers have included a large range of optional arguments for the function above, so you can include or exclude categories, decide whether to format the list as an unordered list (<ul>) or other custom HTML tag, whether to show the images and descriptions, etc:

1

wp_list_bookmarks('categorize=0&title_li=&show_images=1&show_description=1');

Pretty good, but what if I want even more control (I usually do )?  The next-deepest level of under-the-hood-ness allows you to get the list of links, store it in an array, and then loop through the array using a simple PHP foreach loop that outputs the link data in whatever custom format you need.  It’s easier than it sounds.  Here’s the final code I used for my links page:

1
2
3
4
5
6
7
8
9
10

<?php
$myLinks = get_bookmarks();
foreach($myLinks as $myLink) {
?>
   <div class="linkBox">
      <a href="<?php echo($myLink->link_url); ?>"><img src="<?php echo($myLink->link_image); ?>" /></a>
      <h3><a href="<?php echo($myLink->link_url); ?>"><?php echo($myLink->link_name); ?></a></h3>
      <p><?php echo($myLink->link_description); ?></p>
   </div>
<?php } ?>

And of course, if needed there are more levels below this one.  You could do a loop within a loop, for example, to format each category of links with its own category heading, different colors or styles, etc.

Ahhh, the power!