Now, there’s a lot of discussion to be had over whether or not Umbraco 5 is ready for prime-time, the lack of documentation, speed, and bugs give us hesitance about using it for larger projects. That said, it’s clearly the future and we are excited to see it evolve.

One of the initial challenges with any CMS is determining the best way to spit out a list of pages. Rather it’s for navigation, or a site map, you need a way to generate page lists. In Umbraco 4 we used a XSLT Macro that we slowly built and refined over several years, this allowed for a huge variety of navigation support.

With our recent dive into Umbraco 5 it makes sense to rebuild the base of this functionality using Razor. The initial goal: build a one-level navigation that spits out children of the current page, or — if specified, a target page.

The first thing to do is create a new macro and link it to a macro partial file. As always you can do this from the Developer section. Once that’s done add a parameter of “pageAlias” to the Macro and allow it to be input as a textstring. At this point you’ll also need a global document type property called “pageAlias”, this way we can target specific pages in the system without hardcoding a Document Type Alias or Source ID. Both of which aren’t as reusable as we want.

Insert the Macro call into a view as follows:

@Umbraco.RenderMacro("navigation", new { pageAlias = "home" }

Specify pageAlias if you want to target a set page, otherwise it will just output the current children.

Now, let’s look at the macro code to generate the list, it’s heavily commented so you can follow:

@inherits PartialViewMacroPage
@using Umbraco.Cms.Web
@using Umbraco.Cms.Web.Macros
@using Umbraco.Framework

@{
  //Marco Parameters
  //Define the page alias we're looking for
  var pageAlias = Model.MacroParameters.pageAlias;
  //Set the navigation root to the current page
  var navigationRoot = DynamicModel;

  //If there is a page alias specified change the navigationRoot to be that page instead
  if (false == string.IsNullOrEmpty(pageAlias))
  {
    navigationRoot = DynamicModel.AncestorsOrSelf.Where("pageAlias == @0", @pageAlias).FirstOrDefault();
  }

  //Prep the loop
  int i = 0;
}

@foreach(var item in navigationRoot.Children)
{
   //Set classes for first, last, and active in the list.
  var firstClass = (i == 0 ? "first " : "");
  var lastClass = (i == navigationRoot.Children.Count()-1 ? "last " : "");
  var activeClass = (DynamicModel.Id == item.Id ? "active " : "");
  //Output the HTML
  if(item.umbracoNaviHide != "True") {
    <li class="@activeClass@firstClass@lastClass"><a href="@item.Url" title="@item.Name">@item.Name</a></li>
  }

  i++;
}

Hopefully the above code is fairly easy to follow. It will output a group of LI’s one-level deep from the parent, each of these LI’s will show as the first in the list, last in the list, or currently active page.

Next Steps:

• Allow for multi-level support via a parameter (i.e. show only 3 levels)
• Make sure if you’re on a page underneath the active page that ‘active’ still shows.
• Allow for a limit on the amount of pages to be displayed (i.e. show top 3)

A few words about SublimeVideo

SublimeVideo is not video hosting platform like Wistia, Vimeo, or Ooyala, instead it’s just a javascript player that makes populating already-hosted videos incredibly easy. On most sites you simply include the javascript snippet provided by SublimeVideo and add a class to your video elements that calls the script, like so:

<video class="sublime zoom" width="1026" height="572" ⌉
preload="none">
	<source src="http://site.com/video.mp4"/>
	<source src="http://site.com/video.ogg"/>
</video>

This will immediately replace all of the video elements with a beautiful HTML5 player and Flash fallback for browsers that either, don’t support HTML5 video, or don’t support that particular video format. For most day-to-day scenarios this is perfect and is by far the easiest solution I’ve seen.

The Catch

SublimeVideo’s script works by looking at the source once loaded, grabbing all of the video elements, and then applying the player to those elements. However, with the Stacks lightbox solution the video elements are being loaded only after the lightbox gets ajaxed, therefore they aren’t available via the initial DOM load. This means that playing videos within the generated HTML won’t work. It also means the sublimevideo video lightbox won’t work either.

Basically SublimeVideo has two object states. First, when the script is loaded without video being detected and is waiting to be called. Second, once the object has been told there is video on the page to work with. See the states below:

The Solution

In order to get the sublime video object to run we need to load it under a document.ready function, SublimeVideo supposedly has a sublimevideo.ready function that is more accurate than document.ready but it doesn’t seem to work. Instead, use the following method to load up the sublime object when no video lives on the page:

<script src="/link/to/sublimevideo.js"></script>
<script>
	$(document).ready(function() {
		sublimevideo.load();
	});
</script>

Then, when the lightbox (or generated HTML) appears you’ll need to associate each video with the sublimevideo object (remember, it doesn’t know these new video calls even exist):

<script>
	$('video.sublime').each(function(){
	    sublimevideo.prepare($(this).el);
	});
</script>

The above method will grab all the video elements with a class of ’sublime’ and push them to the sublimevideo object for preparation. That’s it, now the generated HTML will re-associate all videos and work with the player properly.

Over the past two years this app was vaporware — at one point Andy Kim, the developer of THL, posted a screenshot on Flickr of the interface, only to vanish from the the earth another year. Finally, yesterday (July 6th 2011 at 10:23a.m.) he appeared on THL Google Group to notify users that THL iPhone would be launching on the app store within a few hours. So, finally, THL has arrived.

I’ve purchased the app and signed up for the year long sync service, so far, things are beautiful. Syncing works like a charm, I dare say on the same level as Simplenote. The interface is jaw dropping, and the speed of the app is on par with other top-tier iPhone apps.

I will give a full review when I’ve gotten my whole life switched back into THL, but until then I wanted to let people know the new iPhone version seems like a winner and might actually have been worth the wait.

My personal choice between the two services is AddThis as the setup and integration is easy. Now, while AddThis provides great out-of-the box support for single page social posts a listing of posts each with they’re own unique AddThis button is a bit harder to do. Here’s a quick example of the situation.

You have a page of 10 blog posts, each one needs its own AddThis button and when clicked that button needs to provide the unique Title and URL of that specific post. Therefore, you have to add a bit of hullabaloo to the AddThis div.

Instead of the standard code after each post:
<div class="addthis_toolbox addthis_default_style ">

You need this:
<div class="addthis_toolbox addthis_default_style " addthis:title="THE TITLE HERE" addthis:url="http://URLHERE.com">

After adding this each will have the ability to target a dedicated Title and URL even if there are multiple instances of AddThis code on a page.

The tricky part comes when you need to put this code into an XSLT script. For example, XSLT is Umbraco’s main source of generating macros and in this instance we’ll use it to output the above code (with a unique Title and URL) for each blog post. In most languages this wouldn’t be an issue but because of XSLT’s strict interpretation it won’t allow the usage of addthis:title and addthis:url.

The answer is fairly simple but not immediately obvious (at least not to me, or people answering this question when I googled it). We simply need to parse out the bulk of the AddThis code as standard XSLT text, leaving only the variables Title and URL as true XSLT:

<xsl:text disable-output-escaping="yes"><![CDATA[
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style" addthis:title="]]></xsl:text>
    <xsl:value-of select="@nodeName"/>
<xsl:text disable-output-escaping="yes"><![CDATA[" addthis:url="http://solidfire.com]]></xsl:text>
    <xsl:value-of select="umbraco.library:NiceUrl(@id)"/>
<xsl:text disable-output-escaping="yes"><![CDATA[">
<a href="http://www.addthis.com/bookmark.php?v=#####" class="addthis_button_compact">Share</a>
</div>
<!-- AddThis Button END -->
]]></xsl:text>

In the above example you could remove the <xslt:value-of select="@nodeName"/> and replace it with whatever XSLT call you need to pull the unique title of that post. The example provided is simply the usage that works with Umbraco 4.5+

First, the bumper for the most part is a great little case. It’s hard to emphasize, but having external buttons on the side really make the whole thing feel like it’s a part of the phone. Unlike other cases I’ve used where you have to pinch your fingers into a hole to reach the buttons. Notice in the picture below how the volume buttons are actually on top of the bumper case, not wedged into a small carved out spot.

Okay, so the case for the most part is a nice addition to the phone. The “for the most part” is because of a few small issues. First, the headphone jack is a bit tight with the case, if you’re planning on plugging in a large headphone jack plug it’s not going to fit. Take a look at the default iPhone earbuds, if the plug is more than a few millimeters larger it won’t fit. Second, if you use 3rd party charging cord or car plugs you might not be able to plug into the bottom of the phone with the bumper on. I noticed this on older iPod plugs that have the two side pinchers. See image below:

Last, when I first got my bumper it felt a tiny bit loose. To be fair, I’m pretty picky and it’s possible others aren’t bugged by this. The fact is that the bumper, while fairly snug had a little bit of give on the sides (IE :I could slide it up and down slightly, maybe a few millimeters) and same with the top. After some reading I found information suggesting that heat might shrink the rubber and plastic just a bit. I briefly considered boiling my bumper, but decided against that. The second option was leaving it in my hot car for a few hours. So, the next day I took off the bumper and left it on my dashboard for four hours, it was about 90 degrees out. Low and behold when placed back on my phone the bumper was snug. Problem solved.

Now that bumpers are going to be given out for free I think this trick could come in handy for others. Let me know your results if you give it a shot.

Further, we called the new 4.0.1 phone from the office landline and took a video. You can see the call is fine for a few seconds, then we apply pressure to the death spots and by 30 seconds in the call is dropped. Even though the phone never shows “no service” it still drops the call. Apple stated this update was just a reception formula fix, still, it shows that even with 1 bar of 3g being reported the call will still drop if those spots are covered.

Laying the Ground Rules

As the lead UI designer behind our group task solution Stacks I can be a pretty harsh critic on things that don’t feel or work right. Also along this same line, I understand the difficulty of developing a product and trying to meet feature requests. It’s impossible to keep everyone happy, not to mention build features with time and care. For some of these apps the features I want might be coming, for others they aren’t part of the ballgame and never will be. I get that, but let’s still “talk it out”.

Required vs. Nice to Have

Must have:

• Well designed interface
• Quick task entry
• Repeating tasks
• Time based notifications/reminders
• Access to tasks at all times (ideally: mobile, desktop, ipad, and web)
• Cloud syncing

Nice to have:

• Categorization of tasks (long term, work, personal, etc.)
• Notes or sub-tasks
• File attachments
• An API
• Great keyboard shortcuts

Alright, let’s jump into the four selected contenders and see what they’ve brought to the table.

Simplenote

Done Well:

phenomenal cloud syncing, quick task entry, access to tasks at all times, notes/subtasks, an API

Lacking:

repeating tasks, reminders, categorization, great keybaord shortcuts

At first I felt a little bad including Simplenote as a task management app. The truth is that Simplenote was never meant to soley manage tasks. That said, it’s just too good at what it does to not have it on this list. First off, Simplenote is bar none the best cloud syncing application I’ve ever used. It’s never once lost my changes or updates and I’m using it on my computer, iPad, and iPhone. Also, in a pinch it has a web interface (that doesn’t suck) as well. On top of this it has an API (although it’s not fully public yet) which has allowed developers to tackle the interface in unique ways. For instance, Just Notes and Notational Velocity are independent apps that work great with the Simplenote API.

There are a few big hurdles you have to be willing to accept with Simplenote. First, it won’t be able to send you reminders in any way shape or form. This means you have to remember to check it to see what’s due. This became a deal breaker for me after a few months, but if you’re the type of person who’s disciplined, this may not be an issue. Second, Simplenote has no way to repeat tasks, so all those CC bills and monthly reminders need to be created every month.

If all you’re looking for a is a small To Do app that also has great note taking capabilities Simplenote is probably your best bet. Beautiful Helvtica type, a super clean and fast interface, and very proactive developers. If you need more than just a few lines of text, like me, then it’s onward to the next app.

Things

Done Well:

quick task entry, categorization/tagging, nice interface, access on multiple devices

Lacking:

Repeating tasks are terrible, badge only notifications, no cloud syncing

Things is perhaps the most well known Mac and iPhone task management solution. Culture Code, the creator of Things, has been featured on Apple’s developer site and has done well in a number of reviews. From the surface Things looks like a winner. Beautiful icon and interface, multiple device support, plus tagging and categorization. Yes it is expensive, $50 desktop + $10 iPhone + $20 iPad, but that’s sometimes worth it for a great experience. The problem is that Things felt off the whole time I used it. It’s not that it doesn’t have a few great features (ie: quick task entry via hotkey on the desktop version) but rather that the deep features trail off. The features that should be most thought out don’t seem to be at all. For instance, let’s look at creating a scheduled repeating task:

First off, the entire due field is uneditable so why does it even allow typing? Second, the wording is just ridiculous, ‘copies are due’ could just be ‘this task is due’. Further, why at the bottom do I have to say each copy has a due date, didn’t I just specify that up above when I said the day it’s due? Granted, maybe there is someone out there who needs to randomly assign tasks every month, on a given date, and doesn’t actually have a date that task is due. But really?! Even so, Culture Code should spend some time wording this better, as it is now it’s just insanity. Check out some better solutions that other developers created:

Second, Things doesn’t have cloud syncing. For an application that is meant to exist on three different devices it is extremely weird that there is no cloud connection. Instead, you have to have each device’s wifi on and then let them sync over a home/business wifi network. This, in my opinion, is a recipe for disaster. Router and wifi questions aside, what if I add 7 tasks on my laptop but am connected via ethernet, then take just my phone out of town for the weekend? My data is completely inaccessible. For a $50+ dollar set of apps I expect cloud syncing, even for a yearly cost.

Third, Things isn’t very good at reminding you about tasks. It shows you a badge of how many tasks you have but beyond that you have to go in and look at your tasks on a daily basis. Maybe some people do this but I don’t. Let me specify a time to be reminded and then show me an alert on my phone, simple enough?

End game, Things just doesn’t stack up for the price. If Culture Code works on usability and wording, allows cloud syncing, and gives a discount to users that own all the apps I’ll consider it again.

NotifyMe 2

Done Well:

beautiful mobile interface, push reminders, categorization, task notes, price

Lacking:

web interface might as well not exist, no desktop version, no API

NotifyMe 2 is the most recent application that I’ve been using. While it lacks a desktop client (which is a huge downfall) the mobile client is extremely good. The biggest and strongest pitch for NotifyMe is exactly what it’s name says: notifications. NotifyMe syncs your tasks to the cloud and then sends a push reminder to your phone when the task needs to be done. At that point you can either snooze it and be reminded later (at an interval you set) or check it off. Additionally, repeating tasks on NotifyMe are better than any other interface I’ve seen – especially considering it’s a mobile interface. You set the date and time the task is due, then how often it should repeat, you can do alternate weekdays, weeks, months, or years. Or, something like remind me every 45th day. The best part about this is the ease with which it works. You can tell the crew at PoweryBase sat down and really went through the steps.

Among the other nice things in NotifyMe are task notes and task sharing. Task notes are placed nicely within each task, a small icon appears next to tasks that have notes letting you know additional information exists. This seems small but the ability to add a few notes into a task is huge. For instance, I add a task to set up a doctor appointment easily, but remembering to bring my new insurance card and the new office address could be just as important. The ability to have notes fixes this problem. Additionally the app also has a sharing and friends feature. I haven’t tried it enough to know how well it works, but if it works as advertised (and I assume it does based on the rest of the app) then it should be a hit for married couples or families. The ability to assign notifications to others on the fly could be extremely useful.

The biggest knock against NotifyMe has to be their application web interface, webapp.notifymecloud.com. In fact, let’s be honest, it doesn’t even deserve to be called a web interface. It’s more like a pile of trash sitting online that is meant to somehow duplicate functionality of the mobile app. And, while technically it has the functionality, the feel and care of the mobile app is 100% absent. The icons are gross, the corners of the containers are rough and thrown together. The task fields are unstyled and unorganized. It’s literally like someone went into Dreamweaver and inserted a bunch of default text fields, added some terrible icons, and said “that’s good, I’m done”. The fact this application is so bad makes me terrified that PoweryBase doesn’t take their design seriously. If they are willing to put out something this bad on the web who’s to say the app might some day slip into the same void. Terrifying.

In conclusion, NotifyMe 2, from a mobile perspective, is the best task manager I’ve seen. This is big because if there is any place to have a great app it’s on the device that’s always with you. Sadly, the web app is not worthy of discussion. It’s unusable and beyond in a pinch circumstances, worthless. Let’s hope this gets addressed so I can give NotifyMe 2 the clear victory in the To Do application space.

The Hit List

Done Well:

best desktop experience of any app I have ever used, great keyboard shortcuts, tagging/categorization, extremely fast task creation, repeating tasks

Lacking:

vaporware iPhone version, an API

I’ve never been as excited about a program as I was about The Hit List. It’s beautiful, fast, easy to learn, and incredibly well thought out. Sadly two years into the product life cycle the announced iPhone app has never been released and the desktop version has never come out of beta. The developer has dropped off the face of the earth. While the desktop version is truly a marvel to be seen (even in beta), the lack of syncing, API access, or a mobile version render this app a dinosaur. Some people have gotten it to work with the 2Do via calendar syncing, but I’m just not willing to use some hack method for important tasks in my life.

Because I’m such a fan of The Hit List I believe it belongs in this showdown. For someone that only needs a desktop application there is nothing better on the table. Just check out this quick video I whipped up:

If The Hit List gets an iPhone app I will jump on it no matter what the cost. Though I’m a realist and therefore betting this app, sadly, won’t see the light of day.

The Final Conclusion

Considering it’s mid 2010 I’m astonished that someone hasn’t solved the GTD personal task solution in a way that meets the few goals I provided above. There is a lot of potential in the market but no superstar. I’d love to hear other people’s solutions to the GTD problem, maybe something’s out there that I don’t know about. Until then I’ll keep hoping for a better desktop or web version of NotifyMe2. Or, even better, the mystical unicorn Hit List iPhone application from Andy Kim.

Here are the additional links that got mentioned during the meetup.

• The League of Movable Type
• Font Squirrel @fontface typefaces
• Hot Shoo imagery
• Border Radius quick grab site
• CSS 3 generator / quick code creation
• HTML5 for Web Designers — A logic and semantic based review of HTML5

This should be everything that was covered, however, if you find something missing feel free to add a comment with a link. We’ll jump on it ASAP.

Updates: A few more HTML5 resources in the list.

…Panic software (the makers of Transmit FTP) have released a new “all in one” web site management application called Coda. The basic goal of this app is to take a bunch of things needed to build websites and place them all together in one application. Now, pardon my skepticism and negativity, but the best part about using an operating system, particularly one like Mac OS X, is that I can easily use multiple simple or complex applications in a quick fashion to complete projects. And to put it in short, I just don’t get the point of putting everything together in one app, even if it is developed by some of the best software makers around.

In fact, the whole idea seems to go against all the benefits of running OS X, much less running multiple applications targeted to exactly what I need. Granted, some apps get a little intense and do more than I may need. For example, I can’t say I use scripting in many apps that support it, but that’s because I don’t have to. An application like TextMate gives me the opportunity to pick and choose exactly what I want from a text editor. It isn’t trying to do too much, particularly because if it did it would interrupt the way I work. The things I don’t use don’t get in my way, and the things I do use are easy to get to. Sure, there are applications out there .. iTunes .. hut…hum.. that do handle tons of tasks all under one umbrella. But guess what, advanced music creators probably don’t use iTunes to do the majority of their composing, editing, and refining. Even though it may have the capability to do some of these tasks. This is why Apple created iWeb for novice web builders, because it allows them to do what they need without getting drug into the depths of web development. The problem is, Coda is iWeb for pros, which is a paradox in and of itself.

Here’s the gist of what I am getting at — the ideal application should be great at handling everything you need to do and shouldn’t get in the way if you don’t use every feature it offers.

Coda, to me, doesn’t seem to follow this line of logic. Rather, it forces the developer to use everything it provides and it doesn’t give much leeway in one direction or the other. For instance, Coda comes with Transmit FTP built in. Which sounds great until you want to connect to a client’s site to update one tiny PDF file. Suddenly you find yourself launching the entire client web project just to make one tiny update, an update that won’t even require 80% of the tools that Coda brings up. It’s like using photoshop to casually view pictures, no one wants to do it! Having an application that does too much is like having a beautiful piece of jewelry that weighs too much to wear. It may look great but dealing with it first hand just seems like a waste of time and comfort.

A clean and easy way to take down and synchronize notes.

In my book a notes app only needs three things:

1. A nice simple mobile interface (this includes a nice typeface, ie: Helvetica.)
2. An easy way to access the app from any computer or device.
3. Easy and instant synching between mobile devices, computers, and the web. It’s only text after all!

In essence, let me write and access notes from anywhere without getting in my way.

For a while I tried to use Apple’s default Notes application. And, to be frank, it was one of the worst experiences I have ever had using an Apple product. For one, the Notes application is absolutely hideous. Second, it requires me using Mail App to manage notes from my computer. Now, I don’t know if you have ever used Mail App to do anything, but it sucks. It’s slow, clunky, and especially frustrating to use if you aren’t working with basic email.

Beyond just the default Notes app I also dabbled with EverNote. Now, to be fair, EverNote seems like a good application for certain uses. The problem I have with it is that it tries to do too much. I don’t need photos, voice notes, text transcribing, or any other of the other options it offers. The more options provided the more things to get in my way.

A Simpler Way

About a month and half ago I decided to start using Simplenote, a small, extremely simple, note taking application for the iPhone.

On top of a wonderfully simple interface Simplenote also has API access for third-party developers. This means there are several options for desktop based note applications. My personal choice is JustNotes, although I’ve also installed and used Notational Velocity and it’s a great choice as well. If you’re a dashboard fan you can try out DashNote.

The final benefit of Simplenote is website access your notes. In essence, allowing you to gain access to your notes from any computer on the web. While I don’t use this often (I always have my iPhone) I like the peace of mind it provides.

Over the last month and half simple note has drastically changed the way I record and access quick bits of information. It’s managed to squeak itself onto my iPhone’s home screen and even has a global shortcut on my Mac. I couldn’t be happier with the implementation.