Author: Peter Knight

Is WordPress Falling Behind? Don’t Believe the Hype

WordPress is the leading CMS on the web today, powering 1 in every 5 websites on the web according to some sources. It has become the incumbent and with that comes a truckload of daily criticism. Outsiders mock the code, or the alleged lack of security, the performance, how it is a terrible choice for anything other than a blog or how it has become bloated as a blog platform. Meanwhile, new, hip looking platforms pop up right and left, some of them outright claiming to be modern WordPress replacements. Meanwhile, one business owner with the largest WordPress community of customers outside of ThemeForest claims to be nervous about how slowly WordPress seems to innovate.

Most of these criticisms or negative viewpoints around WordPress are, to my mind, just the noise generated that come with the territory of by being a comparatively mature platform with a dominant position in the market. Sometimes we find big corporations with monopolies fall behind and crumble at the mercy of small new innovative start-ups because innovation is not embraced. One of the reasons might be because the bigger you get, the slower you can transform. Is WordPress like that?

Yes, a little, but mostly NO.

The negativity around WordPress in some circles is simply overhyped. People quickly forget or fail to understand what makes WordPress so powerful. It’s more than just the code, it’s the community and the ecosystem that has evolved out of it. More importantly, it’s the open source foundation its based on: a vision of making publishing on the web easy and inclusive to all, building something beautiful on free software principles. In a single concept, it’s about freedom.

When people demonstrate some other product that is supposed to compete with WordPress, they typically gloss over what actually WordPress provides. They say: “see this new platform, it’s more minimalist, it’s simpler and more beautiful to use! It’s so much better than WordPress.” Forget that it’s only good for simple sites that require only minimal functionality, the bigger point is that it’s a fools errand to make comparisons based on one or two features while blanking out on the enormously rich ecosystem and ethos around WordPress.

Or they say how much better the code is because it uses a trendier language, compared to the much maligned PHP. Except the trendier language is not as widely available as PHP, making the barrier to entry higher. Except the fact that PHP abundantly has proved to work despite its shortcomings. And overlooking the fact that virtually all platforms, WordPress included, are becoming more Javascript centric anyway.

It’s relatively easy to start a new, lean product that does a handful of features well and starts out with a nice looking interface and fresh code base. But when that product matures over the years, the code base will grow, features will be added (or not) and after a while, people will be lamenting how bloated it has become, or how it doesn’t adopt certain principles, or how it has lost its vision, or how it can no longer make radical changes without upsetting all its users. And that is if it gets any lasting traction. The majority of new software initiatives simply fail and wither before they even reach that stage.

WordPress is one of the biggest success stories of Open Source software. What are the odds of any open source project growing into something so large? Pretty small. That is one reason alone to not buy into the hype of any young product that is aiming to out-innovate WordPress. So many things need to align for something to grow so successfully.

Is WordPress innovating fast enough?

Let’s be real, of course WordPress needs to keep innovating or it will fall behind. But its pace of innovating is probably perfectly fine.

There will always be an urge to have a knee-jerk reaction when some other platform accomplishes some feature in a ‘sexy’ way. If anything, the desire to integrate a similar feature over too quickly leads to bad decision making. A case could be made that the efforts to integrate a new post formats UI (something Tumblr does well) has been a frustrating affair because not enough vision was applied to how it fits in with WordPress and its vast user base.

Some of the exciting developments in WordPress don’t really pop out to most end-users just by reading the feature lists. WordPress as a tool is getting better. There are tens of thousands of hours going into WordPress from developers all around the world. That’s some seriously valuable work that you get to play with when you develop on top of WordPress.

Some of the coolest developments to me involve the api improvements. These open up new possibilities that you just couldn’t easily and robustly do in the past. In the near future WordPress will integrate a new JSON api (now available as a plugin), making the creation of rich client side functionality even easier than before. The better the tool gets, the more developers can do with it. And it’s what people do with the tool that impacts innovation more than anything. What awesomely innovative things can you do with Medium? Tumblr? Ghost? Any fill-in-the-blank static site generator? Or one of the many generic click and point site builders? It doesn’t compare to what you can do with WordPress. Not even close.

There are innovation pains

It would be false to say there aren’t any issues with innovating the WordPress code base. The burden of backward compatibility does make an impact. Integrating real big changes into WordPress can take many releases. Considering that releases tend to take their time, some of the more exciting things can take a long time to materialize. Things like an api for custom comment types, a better infrastructure and api for making relationships between different types of data in the WordPress database, a less cluttered back-end experience, better front-end controls. All of these things take a long time to do properly. Take the widgets API – now being addressed as a feature as a plugin – it will not be radically improved in WordPress 3.8. Instead it will get some smaller UI improvements. A big do over for a component that is used by millions can’t be rushed. This is something all successful products have to contend with.

Another measure of innovation

While WordPress core may move slowly for some, this is not the only way to measure innovation. With every new release developers are able to do more with WordPress. Some older products that were built on top of WordPress had to work really hard to get certain functionality into WordPress. Now those kinds of functions have become much easier to implement (forums, memberships sites, ecommerce functionality). Whether it’s because the API has become better or things have gotten easier to setup, the ability to innovate on top of WordPress just grows. End-users just care about results and there is a huge user base for developers to build innovating products for, leveraging all that WordPress provides.

Let’s put this in a different way. If you are complaining about the lack of innovation in WordPress, build something more innovative. The choice is this, either start from scratch and burden yourself with the need to code up all kinds of basic functionality needed for a platform, or get a multi-million dollars worth head start with WordPress that also happens to have the biggest user base of all CMS-es. I know what platform I’m using and I’m certainly not worried about WordPress falling behind. If something radically better surfaces, would I consider using it? Frankly, the odds of that happening right now are small and it won’t happen overnight. It takes a long time to make something truly great.

Exceptional Javascript Learning Resources

Mastering Javascript is something I’ve set out to do. Truth be told, it’s a weird language. When I encounter a resource that elucidates in an exemplary fashion, I feel great gratitude. I’m compiling a list of articles and resources here that do an extraordinary job at explaining Javascript programming topics.

Understanding scope

This is the clearest tutorial on scope, contexts and the this variable that I have read.
Binding Scope in Javascript

Learning Regex

Regular expressions are used in many languages and mastering it is incredibly useful. When I first started, it was very confusing to me. This site is fantastic at helping one understand regex.
Regex 101

Javascript/jQuery Design Patterns

Learning Javascript Design Patterns is a book by Addy Osmani, who produces outstanding learning materials. The unbelievable part is that the book can be had free.

Learning Javascript Design Patterns

Javascript Video Resources

A fantastic curated list of the best video presentations on Javascript

Must Watch Javascript Videos

Webbased Book Writing & Book Publishing Tools

* This post is being regularly updated as I try different services and spot new ones. Information may be incomplete *

This is a list of tools I’ve encountered that let you write and (self) publish books. I’m paying special interest to tools that may offer collaborative editing, can export to various formats and offer an easy road to book distribution.

While the internet revolution has taken place, the tools available for creating books are not quite up to their full potential. I’ve struggled to find a solution that:

  1. Comes with great collaboration tools and workflow
  2. Has author friendly pricing
  3. Works online and offline
  4. Exports to all the popular formats, such as pdf, epub etc,
  5. Offers an easy way to manage distribution to popular platforms
  6. Give a great web based book experience
  7. Makes it incredibly easy for (proof)readers and editors to submit and suggest improvements in the text, with minimal hoops to jump through.

Also, I’m a big fan of Open Source and self hosted solutions. Not all the tools and services listed here meet all criteria, but I hope it’s a good overview of what’s available today.

[table id=1 /]

Honourable mentions

Services not included above if only for not being specifically tailored to book creation:
Poetica, editorially, Quip (famous ex-googlers are on this team), Authorea (for research papers, academic writing).

Some very interesting collaborative/commenting solutions that work with WordPress are CommentPress and Digress.it.

Readium, Sigil are EPUB oriented solutions worth checking out.

Collaborative book writing platform http://www.volpen.com/ has an interesting model.

This group called Assignmint seem to be about connecting writers with editors and other professionals involved with the publishing process.

Webook appears to focus in on writers getting cultivated and found on their social network platform, but doesn’t emphasize whatever writing tools they may have.

Thoughts

Let’s say you are an author with a limited budget. You want to tap into the wisdom of the crowd and let your readers, friends, peers improve your book. It better be supereasy for them to contribute. Right now, no tool or service makes it supereasy. Would-be proofreaders, reviewers and editors that you manage to attract do no want to learn Markdown language (f$$$ that! Let it go programmers!), they do no want to learn how to navigate complex tools and they do not want to spend their time figuring out how to sign up and juggle passwords. And please give them an easy way to go through the book without having to click through a flat hierarchy of loose documents that is meant to represent a book, make it easy to work through.

The tricky thing about replacing instances of jQuery’s live() with the on() method

There are a number of ways to bind event handlers to elements with jQuery, a popular one called live() is deprecated since version 1.7 so people are advised to replace this in their code. The live() method was great for committing event handlers to elements that were dynamically inserted after page load. Now the right method to use is on() which is relatively new and its benefits have been discussed at length. Just like live(), on() is able to attach event handlers to newly inserted elements, perfect right? But there’s a bit of a gotcha.

Converting instances of live() to on() is going to be straightforward most of the time (see how), but you still may run into trouble. A potential issue has to do with how event delegation is dealt with. Event delegation is important to take advantage of because it replaces the need to add a multitude event handlers attached to separate elements by applying one event handler to a single parent element. When assigning event handlers in this way – say, because you want to add some click hanlders to buttons inside the rows of a table – you usually pick the most efficient parent element. The broader the parent element, the less efficient and less robust things become, so it is important to make the parent element as near as possible.

If you are adding event handlers inside a table, the obvious choice might be the table element.

$('table').on("click", "a.addrow", function(){
  // do stuff
});

That will work fine if this table element was present on page load. But what if the table was added dynamically? And this is where you might get confused (I certainly did). The thing is, it won’t work if your parent element was dynamically added. It has to be an element that was present on page load.

The problem:
When setting the parent element with the on() method, this element must be present on the page, elements added later are ignored.

Solutions

Applying event delegation to a broader parent element

One easy solution is to set a broader parent element that you know for sure exists after page load has finished. There can be some drawbacks to this which are mostly relevant in situations where you do not control all the elements on the page to start with. In these case you might be tempted to append the event handler to something like the body element, because you can be certain this element will be on the page. But the broader the element, the more likely it is that something else could prevent your event handler firing. If the environment has a lot of other scripts running, the chances increase that a conflict might occur. This is especially true if you are coding something like a WordPress plugin and have to contend with dozens of other scripts you can’t control.

In the best case scenario, you pick an element with a specific ID that is one level higher up the dom. This is going to be more efficient than say, a class name or something higher up the DOM.

<div id="tablewrap">
 // table would later be inserted here
</div>
$('#tablewrap').on("click", "table a.addrow", function(){
  // do stuff
});

Attaching event handlers when elements are inserted

The second solution involves setting the event handlers when the relevant elements are inserted. There are a couple of possible scenarios that may apply and a few ways to implement this. I’ll cover one or two to illustrate the general idea.

So let’s say groups of elements are being inserted into the page with jQuery’s .clone() method and you want the new clone to have the same event handlers. If this is your own code doing so, you can easily opt to do a deep clone and copy all of the event handlers. This way all the event handlers that apply to the element that is being cloned will apply to the clone. This is as easy as setting a few parameters:

instead of using .clone() without parameters set, use .clone(true, true) and all your event handlers will apply to the new clone!

When you can’t edit the code of the script that is inserting elements

Maybe you can’t change the code (for example, to add the parameters to the clone method) because it belongs to a script you can’t edit. In this case you will have to figure out another way to bind the event handlers on insertion. The best thing is to inspect what the code looks like and see where you can hook in. Often a custom event is triggered when elements are being inserted. If this is the case, you can piggy back on that custom event.

// the addTable event triggers when a new table is inserted into the DOM
$('#interface').on("addTable", function(){
   // now we can add our event handler
   $("table").on("click", "a.delete-table", function(){
     // do stuff
     $(this).closest('table').remove();
   }
});

An even better variation of this is when the triggered event passes the element as an argument. That way you can target that element and append your event handlers without the extra legwork.

// demo link here http://codepen.io/PeterKnight/pen/oknre

$("#interface").on("click", ".add-table", function(){
    var $el = $('<table></table>');
  $el.insertAfter('button')
      .append('New table!<a href="#" class="delete-table">DELETE THIS TABLE, DO IT NOW!</a>')
      .trigger("addTable", $el);
});

$("#interface").on("addTable", function(e, el){
   $(el).on("click", "a.delete-table", function(){
     // do stuff
     e.preventDefault();
     $(this).closest('table').remove();
   });
});

Execute a function or method that binds the event handler after the element has been inserted

This solution is really simple a straightforward. Basically you write a function or method that appends the event handlers to the desired element and you execute this function or method after the element has been inserted into the page. A very rudimentary example (not copy paste worthy!):

// function or code that inserts element
someFunctionThatInsertsAnElement();
// function that appends event handlers
someFunctionThatAppendsEventHandlers(element);

// above function could look a bit like this
function someFunctionThatAppendsEventHandlers(element){
   jQuery(element).on("click", "a.addRow", function(){
// add a row etc.
});
}

A Ninja CSS Trick

There is a very clever and effective way of detecting a newly inserted element with the help of CSS animations. This technique doesn’t require jquery but it only works in browsers that support keyframe, which all modern browsers do…of course IE6-9 aren’t party to that. The neat thing about this method is that it is great in situations where you don’t how your script is going to be used, while you can still reliably and efficiently can set a suitable parent element to use with on().

I have created a blunt demo that demonstrates the technique on codepen, be sure to read the original article linked above though!

Detecting Removed Element After Confirm Dialog Is Used [jquery]

While building an add-on for a WordPress plugin, I ran into a little javascript puzzle. I needed to perform an action straight after a table row was removed by a user. At first I tried binding an event handler to the button that deletes the row using the click event. This would normally work just fine, except the plugin was calling a confirmation dialog. When the javascript functions alert or confirm are called, it brings up a dialog box. At this point a user can choose to cancel the action. If you attach an event handler to the click event of the delete button, it will fire, but it won’t know if the user confirmed or not. In other words, this method was not going to work.

As the plugin was using jQuery’s remove() function to remove the table row, it’s possible to watch for the ‘remove’ event. This event handler isn’t widely documented yet at the time of writing. It should trigger when the selected element is removed from the DOM using jQuery’s remove() method. At first I tried to apply the event handler to table row using On() method with the ‘remove’ event. For some reason this wasn’t triggering after deleting a table row. So, the next method I tried was to bind a ‘remove’ event handler using the bind() method whenever the delete button for the row gets pressed. This does work, but you’ll need to use a recent jQuery version with jQuery UI 1.9+, specifically the jQuery UI widgets component.

And here’s an example:
DEMO @ codepen.io

A Personal Note as WordPress Celebrates 10 Years

WordPress is ten years old. It’s been wildly successful and that’s putting it mildly. To celebrate, MarketPress released an interesting infographic. I think the most amazing figure mentioned here is the amount of code that has gone into WordPress. It’s over 200 thousand lines, which they estimate to equate to about 52 years worth of programming. Fifty-two years. Not only is that a testament to the sheer power of open source collaboration, it underlines just how valuable WordPress is as a tool. When you install a free copy of WordPress, you are using software worth millions and millions. I think that’s awesome.

In ten years, WordPress has come a long way. I think one of the most exciting things for me was the increased support for custom post types and taxonomies (strangely omitted from the infographic). I remember when I started my first blog in 2007 on WP 2.1 and was trying to integrate it with a forum software. That’s a 1 minute job these days and I spent weeks trying to figure that one out at the time. It was fun though and getting my hands dirty with code kindled my passion for WordPress and website development. It’s like building with Lego and I love it. With my 6 and a half years’ worth of experience, WordPress still feels fresh to me and I still love learning new things about it.

I expect great things from WordPress going forward, I can only see it growing forward. Future looks bright.

Differences between using get_post() and WP_Query()

WordPress gives developers a number of ways to grab post content from the database. A lot has been written about the differences between using query_posts(), get_posts() and WP_Query, with WP_query being generally favored in most situations. But there is another method called get_post() which can fetch content for a single post, page or custom post object. If you want to output content from a single post object, you could technically use any 4 of these methods.

The question is, where does get_post() fit in with these other methods and what is the best way fetch the content of a single content object in the posts table?

The answer depends on your use case. Let’s say you want to show an excerpt of a specific post in your sidebar, what are the considerations? The get_post() function seems tailor made from grabbing a singular content object, which would make it a pretty obvious choice, but the other methods could also be used. When do you use what?

Ruling out get_posts() and query_posts()

If you’re just polling one object, be it a post, custom post, attachment or page and you know the post id, slug or post title of the object, we can easily rule out query_posts() as it is not a good fit. It wasn’t designed for this purpose and really is about showing multiple posts in a loop.

The difference between get_posts() and get_post() is larger than it seems. The main under-the-hood difference here is that get_posts actually uses WP_query and get_post() does not. So while we can use get_posts just fine for picking a single object, it’s not going to be as efficient as get_post() or as powerful as a custom WP_query. For that reason, let’s talk about the differences between those two.

WP_query vs get_post()

Let’s first look at a simple code example that will give you the same exact output using either method. Following along the lines of our use case example, we are grabbing a post with id 5 and displaying a title and an excerpt to that post.

<?php
// suppose we want to display an excerpt from a post with a post id of 5

// with WP_query

$args = array(
    'p' => 5
);
$custom_query = new WP_query( $args );

if( $custom_query->have_posts() ) {
   $custom_query->the_post();
   the_title();
   the_excerpt();
   wp_reset_postdata();
}
wp_reset_query();

// With get_post()

$get_content = get_post( 5 );
setup_postdata( $get_content );
the_title();
the_excerpt();
wp_reset_postdata();

One of the first things that you might notice is that the WP_Query example uses a loop and the get_post() example does not. The second thing you might notice is that get_post has a simpler way of specifying the post id. Let’s dig deeper into these two visually apparent differences.

On selecting the post object: get_post() vs WP_query

With WP_query you have to take into consideration what post type the object is that you are fetching. It is not enough to supply the ID or name of the post object. For example if it’s a post, you pass a parameter ‘p’ with the value of the post id, or ‘name’ with the name of the post. If it’s a page, you have to supply the parameter ‘pageid’ or ‘pagename’ respectively*. If it’s a custom post type, you have to pass along the post type of the object as a parameter, along with the parameters ‘p’ or ‘name’. With get_post() on the other hand, it’s suffices to supply the ID, name or slug of the post object: it doesn’t matter what post type the object is.

All in all, get_post is simpler that way. If you are coding functionality that lets a user supply any kind of post type, you have add some logic to build your query arguments correctly for WP_query.

Loop vs Non-Loop

With the WP_query example, we are using a loop, with get_post we are not. Why would it matter? Loops are a fundamental part of how typical WordPress themes render content, it’s handy to know a little more about their inner workings. Using a loop comes with some perks, such as the ability to use conditional tags that relate to the post being shown. Various functions provided by WordPress, the theme or a plugin might only work inside a loop and this is something to keep in mind.

If all you want to do is show some basic content from a post object, you might not need the loop and it will be simpler and more efficient to not use a loop.

Under the hood

There is a big difference in the way get_post() and WP_Query fetch content. When using WP_Query, we are running 4 queries to the database by default. One query fetches the data from the posts table, another fetches the custom fields from the meta table, a third query grabs author data from the user table and a fourth query gets data on comments relating to the post object from the comments table. While it is fairly efficient, you may not need all of the extra data and so those calls to the database might be a bit of an unnecessary waste.

With get_post() on the other hand, only one database query is made. You’ll note in the example above though that I’m using the setup_postdata() function (which enables the use of template tags such as the_title() ), which actually makes a database query of its own to grab info about the author. If you want to display author info, custom fields and/or comment data, you might favour WP_Query as it grabs this info for you in one swoop.

If you want to limit database queries to an absolute minimum and you’re only showing content contained in the posts table, there’s another way of writing the above get_post() implementation.

// accessing and rendering raw post data with get_post
$get_content = get_post( 5 );
echo apply_filters( 'the_title', $get_content->post_title ); 
if( $get_content->post_excerpt ) {
   echo apply_filters( 'the_excerpt', $get_content->post_excerpt );
} else {
   echo apply_filters( 'the_excerpt', $get_content->post_content );
}

This example should produce the same result as the previous examples, but it gives you a bit more control over what is going on.

Decision time

So when it comes to picking get_post() or WP_Query for displaying data from a specific post object, here’s a summary of considerations to keep in mind:

  • What data do you need to display? If you want to show comment counts, author data and custom fields, might as well use WP_Query. If you just need the data from the posts table, go with get_post(). You can save database queries with a get_post implementation.
  • Do you need a loop? If you need loop-specific functionality (conditional tags or certain plugin functionality that only works inside a loop), go with WP_Query. If you specifically want to avoid conditional tags working in relation to the post being grabbed, you should go with get_post().
  • UI consideration: Need to let users pick multiple kinds of post type in your user interface? It will be easier to code with get_post as passing parameters with WP_query is a bit more involved (you need to pass the post type as an argument). You’ll get slightly leaner, more elegant code with get_post().

Lastly – especially if you are going with WP_Query – and are concerned about performance you could consider a caching method to improve performance. This is pretty useful if, say, you want to show a certain post snippet in the sidebar on every page.

* With WP_Query you can also use the ‘p’ post id parameter to query a page providing you also set the ‘post_type’ parameter to page.

DesktopServer Review

If you do any kind of development on WordPress, you probably are using localhost to develop on your local machine. It’s noticeably faster than working with a live server, especially while working in the Admin screens of WordPress. For this reason, many people will be familiar with the oh so fun process of setting up local sites and moving sites to live servers. Well in this post I’m going to cover a product that makes local development a much more productive and efficient experience.

The process of setting up a local site for development and moving changes up to an online server is a tedious, painful, needlessly time consuming process. Just setting up a fresh WordPress site on your amp stack is annoying as it involves having to create a database manually, making changes to some configuration files, updating the hosts file and then running the WordPress installation. I was pleased to find a tool that automates all these tasks and it happened to be a tool that is perfect for WordPress development.

Enter DesktopServer

DesktopServer is a brilliant piece of software that is essentially a regular server stack that you will be used to if you have used WAMP, LAMP, XAMPP, MAMP or Uniserver. It actually is packaged with XAMPP Lite, the lite version of XAMPP. The real magic however comes from the logic they’ve included to work with XAMPP Lite. It comes with some powerful automation tools that make it very easy to create, import and export sites and do development on WordPress sites using popular tools.

Turning 10 minutes into less than a 1 minute

Setting up a locally hosted WordPress site in a snapSetting up a locally hosted WordPress site in a snapNow manually setting up a local site on your own machine isn’t terribly difficult once you know all the different steps, but it is a pain. If you’re used to something like Cpanel, which makes installing WordPress really easy, it feels even more annoying to have to manually create a database, configure a virtual host, adjust your hosts file and run through the installer. It can take a good 5-10 minutes if you know exactly what you are doing.

With DesktopServer you can painlessly create a new local site through a simple UI in a matter of seconds. It does all the configuration for you. That in itself is worth jumping for joy, but that’s only a start.

Quickly installing a preconfigured WordPress setup

DesktopServer uses a blueprint model for creating WordPress installations. In that blueprint you can preconfigure WordPress to install with certain plugins and themes. You can even auto-import settings. This is just awesome stuff and saves so much time having to install sets of plugins manually.

Quick Deploy a local site to a live server

A recently improved feature in DesktopServer Premium called quick deploy lets you upload a WordPress site complete with files and database directly to any server that supports Filesystem Direct (supported by many hosts). The resulting magic is facilitated through a plugin that you install on the destination site (you need to have WordPress pre-installed, a fresh install is fine). This is a really nice feature that cuts out a bunch of steps you would otherwise have to perform.

Migrating or moving a site is not a fun task and can be quite challenging. This built in solution let’s you do things at the push of a button while taking advantage of DesktopServer’s automatic scrubbing, so you don’t need to worry about fixing URLs after moving a site online.
Mobile Development options

Another great feature provided by DesktopServer solves the tricky issue of testing local sites on mobile devices. Through Lan sharing (which makes use of the computers IP address on the network), you can make a local site accessible on your mobile phones and tablets. The only caveat here seems to be that you can only share a single site at a time. While I haven’t given it a test turn yet, it also looks like you can make a site available to the web so that people outside your network can view your development site. This feature also uses an IP address which viewers will have to know to access the site. (Side note: I’ve previously covered some other ways to share local sites)

My concerns, squashed

I had a number of concerns prior to trying DesktopServer Premium and I figured I’d write it up in Q&A form.

I want to run a local site that has an extension other than .dev, is that possible?

No problem as it turns out. As you’re really running XAMPP lite, you can manage your own virtual host mappings as you see fit along side any .dev site DesktopServer creates. Setting up non .dev sites can be done manually like you would normally on any AMP setup. I use pagekite to host a private site straight from my computer and I was able to do so without any conflicts. Perfect! The only downer is that DesktopServer only manages and installs .dev sites through its GUI as far as I can tell.

Will it mess with my custom hosts file?

Got a hosts file that you’ve customized with a certain configuration? You won’t have to worry about DesktopServer overwriting anything. It’s smart enough to manage it’s own additions within the file without touching any pre-existing mappings in the file.

Does it automatically adjust hardcoded site urls when migrating?

One of the beautiful things about DesktopServer is that you don’t have to run any kind of find and replace scripts  when you move a site to a different domain. It will do it for you and it even will search your php, css and js files so you’re covered all around.

Minor Niggles

My first month of using DesktopServer was largely positive, I did note a few minor things I’d love to see work their way into an upcoming release.

Live Deploy Progress Indicator

This is what happened when my hosting server failed during quick deploy. My Starcraft honed APM came in good hand closing all these alert boxes.
This is what happened when my hosting server failed during quick deploy. My Starcraft honed APM came in good hand closing all these alert boxes.

The live deploy feature is missing an informative progress indicator. As deploying can take a long time and it is co-dependent on whatever hosting you are using, it would be great to know what it is actually doing or where it is slowing down. Deploying to a live site can be unnerving experience. In my tests I did notice things do take quite long to transfer, but this is very much dependent on the hosting provider and the server’s upload speeds. If you happen to run into a problem during the transfer process, you might have a bit of a problem on your hands.

During one of my tests my (shared) hosting happened to crash, which left me with an incomplete install and a white screen. Of course, no matter what method you use, any migration process won’t fare well under those conditions, but it’s useful to have some kind of indication in case the connection does go wrong. If you’re uploading up a large site, it’s even more important.

One PHP version

DesktopServer ships with the most common PHP/Mysql configuration seen in the wild. If you want to test different versions of PHP, you’re out of luck as DesktopServer doesn’t let you do this out of the box. That would be a fantastic feature to add in the future.

Unmentioned goodness

DesktopServer plays very nicely with a host of other common developers tools, such as Dreamweaver, Xdebug, Coda 2, PHP Storm and popular backup utilities such as Backup Buddy, Duplicator and Infinite WP. So far I have only tested Duplicator, a fantastic free backup plugin and that worked very smoothly indeed.

It’s also worth noting that DesktopServer is not just for WordPress stuff. You can use DesktopServer to create non-WordPress sites for all your other site development and testing purposes

Bottom Line

If you are building WordPress themes/plugins or developing entire sites or applications on WordPress, this software should be part of your tool kit. It’s amazing to me how long this product has been around and I hadn’t really discovered it until recently. More people should be spreading the word.

* Note *
This review was written after using DesktopServer version 3.5 for about a month (I managed to get a review copy). I wasn’t paid to do this review and I do not have any financial ties to Virtuosoft, the company behind of DesktopServer.

Backbone.js And WordPress Resources

Backbone is a very popular lightweight javascript framework which greatly simplifies and structures complex javascript in websites and especially (web) applications. A lot of high performance websites now rely on backbone.js and underscore.js (a dependency of Backbone), from single page web apps to websites that have a lot of client side functionality. WordPress is becoming increasingly javascript-centric so it’s only natural that WordPress developers are starting to look at backbone to make developing rich javascript functionality in their WordPress projects easier. Since 3.5 WordPress ships with backbone and underscore so the presence of backbone in WordPress projects is bound to grow.

At the time of writing backbone and WordPress are a pretty new combination and there aren’t a whole lot of resources to be had yet. Backbone takes some getting used to, especially if you only have only used javascript and jquery for lightweight functionality in projects. As I’m only digging into backbone myself, I decided to start aggregate the best resources so I can speed up my own learning. I hope you find it useful too.

General Backbone Resources

Connected to the Backbone (Video Tutorial by Jeffrey Way at Tutsplus)
(Full tutorial requires Tutsplus premium at 18$/month)

Anatomy of Backbone.js – course on Codeschool
(codeschool offers its courses for a subscription of 25$/month)

Learn Backbone.js Completely (free)
Extensive resource, which takes about 30 hours to run through fully

Developing Backbone.js Applications
This is Addy Osmani’s book (available in print too)

A Curated List of Backbone.js resources
Provided by Mike Schinkel

Hello Backbone.js
An easy introductionary step by step tutorial to backbone.js (v 1.1.0) by Artur Adib

Building Backbone Plugins
A go-to book for intermediary and advanced developers using Backbone.js.

Full Stack Web Development with Backbone.js
A freshly published book on Backbone.js which, unlike some of the other books, covers the newer version of Backbone (1.1+).

WordPress & Backbone Tutorials

Tutorials by Shane Osbourne on WP Tuts

Using Backbone within the Admin (frontend)

Using Backbone within the Admin (backend)

Alex Bachuck shares a concise backbone.js tutorial:

Displaying recent posts with backbone.js in WordPress

Theme Foundry shares how they implemented Backbone.js in their Collections theme:

Backbone.js and Collections: Structure

Backbone.js and Collections: Routers

Backbone.js and Collections: Plugin compatibility

Rakhitha Nimesh Ratnayake wrote a book that has a chapter on Backbone.js:

WordPress Web Application Development

Alan Greenblatt of Adobe fame published a 3 part post series about Web apps involving backbone.js and also shared a webcast about this too:

Modern Web App Design with WordPress

Building a REST interface with WordPress

Building Data-Driven Web Applications with WordPress

Video (1hr 4min): Building Data Driven Single Page Web Applications with WordPress

Write a backbone.js powered shortcode

How to make a TinyMCE view in WordPress

Video (1hr 53min) WordPress Theming with Backbone.js with Zack Tollman

Study these examples in the wild

PostListr – an example of what you can do with backbone.js and WP api’s by K.Adam White

The WordPress Media Uploader utilizes backbone since version 3.5

The notifcations system on WordPress.com

WP Posts to Posts plugin by Scribu

WP Ultimate Search, a backbone.js powered plugin

WisP: a Backbone.js client for the Thermal WordPress Api

Current Comments: Example plugin for using Backbone.js with WordPress

Collections – A Backbone Powered theme by Theme Foundry

o2, a WordPress app/theme/plugin evolving out of the p2 theme
(interesting details: slides and presentation about o2 by Lebens)

Use Case: A Project Management System using WordPress & Backbone
(not a lot of technical/code details)

Editr – the first themeforest theme using backbone.js? (link to demo page via affiliate link or normal link )

Backboned v2 is a backbone.js powered WP theme available on github created by the German front end dev Emanuel Kluge

EngineThemes have developed 3 commercial WordPress apps/themes called JobEngine, ForumEngine and ClassifiedsEngine that leverage backbone.js

Talks about WordPress and Backbone.js

Building Apps with Backbone.js and WordPress (WordCamp Chicago 28-30 June 2013)

From Adam White’s presentation

Developer: WordPress Loves Backbone JS (Portland WordPress meetup on 10 June 2013)

Evolving your JavaScript with BackBone.js(slides) . (also by Adam White from WordCamp Providence 2013), video available now on WordPress.tv.

WP Sessions: WordPress and Backbone.js is a (purchasable) webcast lead by K. Adam White, Carl Danley and Zack Tollman that aired 25 January 2014.

WordPress Applicaties met Backbone.js (dutch) [slides (nl)]There was a session on backbone.js apps in a dutch WordCamp in May 2014, given in dutch.

WordPress and BackBone – The Dawn of Web Apps. An introductionary type talk giving a window into the possibilities of using backbone and WP for web apps.

Tools for Backbone.js powered WordPress projects

A starting point for single page apps on WordPress using backbone and the json api plugin: WordPressSinglePage

Backbone Debugger – a chrome extension that let’s you see your views, models, collections and routers in realtime using Chrome Dev tools.

JSON api for WordPress – a plugin providing a full JSON Api for WordPress that will eventually merge with WordPress core.

WP-JS-Hooks – A very useful events manager similar to WordPress’ internal hooks and filters on the php side of things. May land in core!

AppPresser – Build iOS/Android Apps using WordPress. This new set of tools let’s you easily leverage PhoneGap’s power and turns any WordPress installation into a application that can tap into native mobile features such as a geolocation, microphone and camera.

_s_backbone – Backbone.js meets underscores, a starter theme that takes advantage of the JSON rest api (core included WP 4.0+).

Other learning

It’s worth going through some other courses before digging into Backbone, especially if your javascript skills are light. Underscore.js is worth learning in depth before going head first into backbone. Getting up to scratch with general javascript and jquery is highly recommended too.

Updates

I’ll be updating this page as more WordPress specific resources become available. If you sign up through this link I’ll send an email when the page is updated.

UPDATES 27 March 2013:

Over at WordPress.org a thread was started about creating new documentation for using Backbone.js and Underscore.js in WordPress projects. Official documentation should thus be on its way, that is great news!

UPDATES 17 April 2013:

Added WP Ultimate Search to the plugin examples and WordPressSinglePage which is a starting point for single page apps built on WordPress.

UPDATES 6 June 2013:

Added a few talks: There’s an upcoming WordCamp presentation at WordCamp Chicago about building Backbone.js apps with WordPress and a Portland meetup presentation with a few Automattic guys.
Added two plugins; an example backbone.js WordPress plugin and a client for the Thermal Api (a cool json api for WordPress)

UPDATES 3 July:

Added Adam White’s presentation slides and github example from WordCamp Chicago

UPDATES 15 July:

Added Mike Schinkel’s curated list of backbone.js resources
Added Backbone Debugger Chrome Extension

UPDATES 6 August:

Added Theme Foundry’s Backbone powered WordPress Theme called Collections. Looks really good btw.

UPDATES 13 September:

Added Theme Foundry backbone.js blog series
Added JSON REST api plugin by Ryan McCue
Added link to the forthcoming o2 theme (backbone.js powered evolution of the p2 theme)

UDPATES 22 November

Added new video presentation links to Adam White’s backbone presentations
Added Postlistr repo link
Added link to Editr, the first commercial theme on themeforest that is using backbone.js
Added a link to wp-js-hooks, a lightweight, js based filter/hooks library similar to the php based on in WP.
Added a use case write up about a project management system using backbone.js and WordPress

UPDATES 22 December

Added new tutorials from Theme Foundry with interesting details about their backbone.js powered theme
Added a link to AppPresser, a new tool for creating mobile Apps using WordPress.
Added a link to a book called ‘WordPress Web Application Development’

UPDATES 17 Januari 2014

Added tutorials by Alan Greenblatt
Added link to a WordPress session covering Backbone.js and WordPressAdded link to EngineThemes’s backbone.js powered app themes
Added link to Backboned v2, a free backbone.js oriented theme on github

UPDATES 18 April 2014

Added example plugin showing how to create a backbone.js powered shortcode for TinyMCE
Added hello backbone.js which is a simple tutorial for backbone that uses backbone 1.1.0 (A lot of other tutorials and links cover older versions of backbone)
Added link to an upcoming WordCamp session (takes place in May in the Netherlands)

UPDATES 19 June 2014

Added a great session (video) by Zack Tollman called WordPress Themeing with Backbone.js
Added an introductionary talk about WordPres, Backbone and Web Apps by Jesper Bylund
Added slides to a dutch talk by Luc Princen, called “WordPress Applicaties”

UPDATES 11 July 2014

Added two new books to the general backbone resources section

UPDATES 19 August 2014

Added _s_backbone, a starter theme that utilizes backbone.js

Excerpt Confusion: Making Sense Of WordPress Excerpt Display

WordPress offers a number of ways to show an introduction to a post that then links to the full post. They are commonly used on the home page of a site, or in category archive pages when you don’t want to list the full post content. Because there are different ways of accomplishing this, it can be a bit confusing as to how each method works.

To understand how WordPress deals with these post introductions, you have to know the distinction between manual excerpts, auto-generated excerpts, and posts that utilize the

<!--more-->

tag.

The More Tag

The more tag let’s you define the part of the content that forms an introduction to the full post. To use it, you can either type in

<!--more-->

(while in HTML mode) or use the more button inside the post editor. You have to place this tag in the right position in your content (effectively splitting the content). Now the interesting part is how the display is done. The more tag is only respected if the page it’s being displayed isn’t a singular post, page or custom post page. This makes sense in so far that if you are on the actual page of your post, you would want to show the full post. That’s great.

But what if you are on a different singular page and you want to display the teaser of a different post with a link to the full post? If your theme is using

the_content()

to display this content it will show a full post regardless. That’s something to keep in mind.

Another interesting thing about using the more tag and having it displayed with the_content() is that you can specify a ‘more link text’.

the_content( 'continue reading...' );

This function also gives you the option to hide the introduction of the post when it is displayed on the actual post page.

the_content( 'continue reading...', true ); // default is false

That way you can write a custom teaser that will only show on your home page, but the teaser text isn’t repeated on the full post page.

If you don’t hide the teaser, the read more link will send the reader straight through to the section after the introduction. In the actual markup of the actual post page, a span element is inserted that has an id that is used to target that section directly from the link. Some people do choose to remove this default behavior however.

Automatic Excerpts

So apart from

the_content()

, another function exists for displaying a post excerpt, which is appropriately called

the_excerpt()

.You could use the above mentioned technique for creating a post excerpt for your home page, but the_excerpt() is another way to show a post introduction. It’s conceptually different compared to using the more tag. When the_excerpt() is used, it will look to see if a manual excerpt has been set and if there is none, it generates an excerpt automatically. The automatic excerpt generator will grab the first x amount of words from the post content and render that content with plain formatting (ignoring images, headings and stylings that were applied to the post text). That’s a big difference compared to using the_content() with a more tag defined in the post, which will respect the original markup of the post.

You can customize the appearance of the rendering of the_excerpt by adding your own ‘read more’ link or altering the amount of words it uses to generate the excerpt. But really, the usefulness of automatically generated excerpts pales in comparison to using the more tag or using manual excerpts.

Manual Excerpts

A lot of WordPress users don’t even know it exists, but you can set manual excerpts from the post editing screen. It may appear hidden if your screen settings are set to hide the excerpt meta box. That is easily remedied though. While manual excerpts are (by default) only activated for normal posts, you can add support for excerpts to any other post type (such as pages) with a line of code.

Manual excerpts give you full control over the excerpt and so they give you a means to define what is shown when the theme is using the_excerpt() to display content. Manual excerpts are also sometimes used for supplying summaries, or for descriptions of the page that appear in the head section of the page (not visible to users, but used by search engines and apps). Those are entirely different functions compared to the aim of providing an enticing introduction for a post. Because the manual excerpt also runs through the_excerpt, the output format is pure text (no images, special styles etc).

Making Sense Of Excerpts

The three built-in ways of displaying excerpts each have their pros and cons. It’s easy to get a little confused when you are trying to make the excerpts on your site display as you want them to. Context matters, you really have to understand what you are trying to achieve with the excerpt so you can use the most appropriate method.

The more tag approach is best for showing a teaser, a few lines that make visitors click through to the full page. You then have the power to hide the teaser from the full page, making the teaser purely function as a means to invite people to read the page. The downside to the more tag is that it requires an author to remember to manually insert the tag. If you don’t supply a more tag, the full post may be rendered and you also have the limitation of not being able to show just the teaser on pages that have a dedicated permalink.

Automatic excerpts are a crude means to provide introductions, because they are pure text and consist of a fixed amount of words with no regard for sentences and special formatting. They also make for lousy summaries unless the first sentences of a post are formulated in a favorable way.

Manual excerpts give a user a lot of flexibility. You can utilize them as summaries of a post and they don’t have to repeat a post’s content verbatim. By default, the formatting is bare bones, just like the automatically generated excerpt is. The downside to these manual excerpts is that user’s often don’t understand the benefits and it is an extra thing to remember while writing a post.

If you are setting manual excerpts as well as using the more tag to create teasers, know that

the_excerpt()

will show the manual excerpt and

the_content()

will show the teaser as specified by the more tag placement.

Your Own Excerpt Display Functions

Given the limitations of each of the discussed methods, you may find that you need something custom. I’ve previously written about how to make an rss feed show teasers set by the more tag placement here. You may want show an excerpt with certain formatting preserved from the original post. You might want to set a character limit for the excerpt for tighter control. You can even write a function that automatically inserts a more tag if none is specified to have auto-generated teasers.