// Johan

Being the Child of the Shoemaker

Ida talks about why web developers have poor sites and how to remedy the situation.

Toka Koka Bitches

The post that got us hits from people searching for ”Swedish bitches” :/.

What Role Will Domain Names Play in the Future of the Web?

Simon raises an interesting debate weather domain names will play an important role in our future or not.

Escaping From Encoding Hell

The ultimate guide for when you’re stuck in encoding hell

We are Craftsmen

I take up the similarities between two, on the surface, very different professions.

A big up for project 52. Without them many of these posts would still just be unborn ideas locked inside our heads.

Well, actually. It changes almost nothing. It was royalty free for end users before this anouncemeant, it has just been extended until always. The people implementing H.264 codec still needs to pay up.

This will probably not change the minds of the people at Mozilla since they’d have to cough up millions every year to pay for the codec.

The announcement is not bad news and it’s not good news. It’s almost no news at all. There is a longer blog post about web codecs if you want more on the subject.

Have a week!
// Johan

Since you are a reader of this blog you probably have a blog, portfolio or something yourself. You can use that domain as user name. All it takes is a couple of link tags in your header.

<link rel="openid.server"
href="http://www.myopenid.com/server" />
<link rel="openid.delegate"
href=http://username.myopenid.com/ />

This way you can change OpenID provider without changing your log in name

You may have an OpenID without knowing it. Look here if you’re unsure.

Take care!
// Johan

The Ajax “load more” buttons are more or less standard these days. It’s not rocket science to make your own “load more” button but in Umbraco it can be a bit tricky to get everything to work without compromising the “semanticness”, “dynamicness” and the overall quality of the code. This is the end result and this is how I have solved it:

Creative Website Starter

I’m going to base the examples off of Warren Buckleys “Creative Website Starter”. You can find that in the package repository. The section that we are going to “impaginate” (Yes, I just made that word up) is “News and Events”. I added some more events so we have something to work with.
This is what we’ve got so far:

XSLT Pager!

For the sake of this example we’ll make a pager that lists 3 events/new items per page. Why are we making a pager you may ask? There are many reasons. Read more about those reasons here.

Go to “Developer” -> “XSLT Files” -> “ListNewsEvents.xslt” or open it up in your IDE. Nibble have written a paging XSLT that I have been peaking at. So, time to inject some of Nibbles XSLT into ListNewsEvents.xslt.
I copied the variables and altered them a bit (we only want 3 records per page for example).

pageNumber gets its value from the query string and numberOfRecords is pretty self-explanatory. Now we need to actually limit the records (Events/News items) to the value we have given the recordPerPage value. To do that we add an if-statement encapsulating everything in the currentPage loop. The statement stolen from Nibbles paging.xslt.

And so is the following code that we add at the very end of “ListNewsEvents.xslt”.

I wrapped the paging links in a div with the class “pageNavigation” and added a “page” variable on the querystrings on the links. So that these links <a href="{umbraco.library:NiceUrl($currentPage/@id)}/{$i}"> looks like this <a href="{umbraco.library:NiceUrl($currentPage/@id)}/?page={$i}">

Now, if we try this out it should work both with and without javascript.

Time for Some Umbraco Magic

A cool thing in Umbraco is that you can you use alternate templates. This means that we can get different content depending on which template we choose. You can read more about alternate templates here.

First thing first though. Go into “Developer” -> “XSLT Files” and create a clean xslt file with macro. I called it ListNewsEventsAjax. Go to “Settings” -> “Templates” and create the alternate template. I named the template “News and Events Ajax” and the alias “newsAndEventsAjax”. Press “Insert Macro” and insert the macro we just created.

We are going to call the alternate template with Ajax so the XSLT needs to return the Events/News that we request. The ListNewsEvents.xslt has almost everything we need for the alternate template already so copy the code from ListNewsEvents.xslt over to ListNewsEventsAjax.xslt. We don’t need all the code so let’s start deleting. First, remove the newsList div (not the content of the div though). Delete the whole “pageNavigation” div (we don’t need the pager). Remove the “for.loop” template because that template is only called from within the pager. Where the pager was we now want a “load more” button. But only if there is more content, so surround the button with an if-statement like this:

Let’s Spice it with Some JavaScript and AJAX

Download a good looking “loading gif” from ajaxload.info or something. I took this one:

And add it to the css/img folder.

Since CWS come preloaded with JQuery (and some other sweet stuff) you can start coding away at once. CWS should have added script.js in the “scripts” folder. Open that up. At the very top, add the variable “loadCount”. Since the first set of “records” we want is from the second page (we already have the first set of “records”) we give it the value “2”.

Create a function called initLoadMore() and call it from the $(document).ready() function that is already created in the file. Add the following chunk of code to the function (I have thrown in some comments).

If we try to press the “Load more” text now we’ll hopefully get the following result:

Finishing Polish

We’re almost done. It obviously needs some styling. Go into the css file CWS added (css/Styles.css) and the following chunk off CSS where it’s appropriate (somewhere under the “NEWS LIST” header).

This is how the end result looks like and if you want to download the files you can do that here. I’m very sorry that the code is in image form, it is a total pain in the membrane to write code on Swedish Fika right now. A new version of SF, that make this and other problems die, is on the way. Give me a comment if anything is unclear.

/Johan

Sources

Alternative templates – http://www.nibble.be/?p=42
XSLT Paging Example – http://www.nibble.be/?p=11
Creative Web Starter – http://umbracocws.codeplex.com/

“The clarity, even genius, of REWORK actually brought me to near-tears on several occasions.”
-Tom Peters, New York Times bestselling author of IN SEARCH OF EXCELLENCE

The only reason my tears were pouring was because i was allergic to the inc (honestly!). But then again, the book wasn’t really written for my target audience (i still think that Tom Peters guy is a softy though). Rework is, just as i like it, a quick read. Those 280 pages has a lot of white space and art work and an average chapter is about 1.5 pages.

If you are a reader of 37Signals blog ”Signal vs Noise” or have heard any of Jasons talks, then you’re probably familiar with the concepts presented in this book. And even if you are familiar with Jasons and Davids concepts I still think Rework is a good buy. It’s nice to have their thoughts distilled down and gathered in one place.

So, are their ideas that radical? No! Not at all. Most of them are in my opinion pretty obvious. But do companies really work in this way? Do they encourage their employees not to work overtime? Do they trust their employees enough that they can make independent dessisions? Do they recommend their competitors if they feel their products is not a perfect fit for the customer? I think most of them probably don’t. And if you work on a place like that, you should plant this book on his desk or bathroom. Or maybe if you work on a place where your boss micro manage every move you make and have his own bathroom you should get out of there and start something on your own.

If you are an entrepreneur, or a “starter” as Jason like to call it, then this book is a must. But remember to, as I’ve said before, read it with your critical eye. It’s easy to just swallow everything as absolute truths. Especially when they write in such confidence. As they themselves put it “get inspired, don’t copy!”

“Sometimes you need to leave behind the best things to embrace something new. That is what I want to do with Boagworld and I would encourage you to do the same.” -Paul Boag

This is not the last we hear from Paul though. He points out that he will be experimenting with other formats throughout the rest of the year. So hopefully, next year, Paul and Marcus are back but in a new format. I’m hoping for a TV show!

To fill the Boagworld void you can head on over to 5by5 where Jeffrey Zeldman and Dan Benjamin recently started a new podcast called The Big Web show.

// Johan

What about Apple and Microsoft?

Safari indirectly supports VP8 through the quicktime plugin. It will be hard for Apple to admit that VP8 is a better choice than H.264 considering Steve declaring his love for it in his open letter.

Microsoft said in a blog post that the only codec they natively will support is H.264. But this was before Google bought ON2 and open sourced VP8. Microsoft has announced that IE9 will support VP8 if the codec is installed in windows. This is also not optimal but it is much better than nothing. And bear in mind that IE9 will not be shipped until 2011, a lot of stuff can happen until then.

Whats wrong with h.264?

Nothing. H264 is actually (according to these sources) slightly better than VP8. But H.261 is not open source. It has over a thousand patents owned by a total of 26 companies (Apple included). H.264 is not very expensive to use but just the fact that it is not open source makes companies as Mozilla and Opera not support it, out of principle.

Supporting VP8 is Apples chance to gain back the developers trust. Pretty please Apple, do it!

// Johan

Apple evicts flash way too early. I’m all for a web where plugins as flash is not required. Unfortunately HTML5 doesn’t cover everything flash covers right now. There isn’t even good tools to make HTML5 canvas applications. Right now I see flash as the spackling paste that fill all the holes that HTML, CSS or JavaScript leaves exposed. Some of those holes right now is live streaming, webcam access and multi-touch. In 10 years the browser coverage of HTML5 may be as good as flash and there will be some sweet tools to work with but right now we unfortunately need flash. And in 10 years flash has probably (and hopefully) evolved into something else covering up some other gaps.

In Steve’s letter he urges Adobe to make HTML5 tools. And as a matter of fact, they are working on it. Some time ago they demonstrated this. Unfortunetly it didn’t make it into CS5 but in the Web 2.0 Expo 2010 Adobes CTO Kevin Lynch said the following:
“We’re going to make great tooling for HTML5. We’re going to make the best tools in the world for HTML5.”

Jobs also talks about how stuff should be open like H.264. This is as Ida would’ve put it, “tossing beavers in a log house” and just plain wrong. H.264 is proprietary and costs money. That is as closed as flash. And that’s the reason open web browsers like Firefox doesn’t support it. And it seems a bit hypocritical to praise H.264, openness and the death of closed plugins like flash and at the same time use the equally closed quicktime format on the movie clips on the apple web site.

The codec question is not a simple issue, Robert Nyman has written a good article on the subject.

Take care peoples!
// Johan