What?

Ok, it’s HTML5. And yea, it’s the new buzz word. And yup, this book is about that cool new thing. So let me tell you what you’ll find in this book. You will find out a bit about the history behind HTML5. You will learn a bit about what’s included. And what’s not included. No CSS3. Of course. Yes, I know CSS3 is cool too but you need to pick up another book for that. CSS3 and HTML have never and probably never will be the same thing.

Who should read?

Look at the title again. See that word? Designers. Exactly. If you are a web designer trying to improve your knowledge in frontend and get the hang on what’s new and exciting this book is for you. I would also dare to say that this book is not unfit for anyone working with the web. Really. The language is smart and not hard on you. Good words and the tone is delightful. (Always wanted to use that word.)

Who shouldn’t read?

If you have closely followed what’s been happening on the web during the last six years I would say that this book got no news for you. The same goes for people who have read every article in HTML5doctor, diveintoHTML5 and have feasted on the specs of WHATWG and W3C. This book didn’t gave me any revolutionary news. I guess I’m too geeky with my feeds. (If this did sound like I’m a cool enlighted web dev that’s on top things… well… well… then you can think of me as a cool enlighted web dev who is on top of things. ) Even so this book is enjoyable. If not for mere reason than boosting the ego and feeling like you actually know something.

Aight. Me be out.
Not feeling comfortable about boosting my ego in public.

/Ida

Ps. If you don’t care to read/buy this book you might enjoy this talk by the author Jeremy Keith

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

Why this a11y stuff?

”Did you test this design?” That’s a question I want to ask sometimes when I get a psd-file for a new web site. Sometimes I do ask. Sometimes I go ahead and make some tests myself. What tests? Well there are many tests you can do to make sure that your design is right. I felt like I couldn’t cover them all in one post. So instead I decided to make an article series. This post is the first one and it’s all about contrast.

Why is contrast important?

First of all, not everyone have your falcon eyes. Yes really. People do have bad eyes, color blindness or other impairments.
Second, not everyone is sitting on your 27” iMac. They might be on a crappy old screen and no, it’s no ok to tell them to get a Mac.

How do I test for contrast?

According to WCAG 2.0: “The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)”

Well what’s that ratio stuff? I’m not good with calculating myself so I will not try to go into any deep explanations. But there are some good tools out there to help us.

1. Color Contrast Analyser – A program that you install on your computer. Both Windows and Mac. (YSlow legend Steve Faulkner was involved in this one. Just saying…)
2. Color Contrast Check – A tool made and hosed by designer and developer Jonathan Snooks (quite famous guy as well…)
3. Contrast Checker – Another web based checker.

Do you test for contrast? Do you know other tools?
Let me know!

This was a11y* for designers numero uno and I’m out.

/Ida

*a11y is an abbreviation of the word accessibility where 11 is the number of letters that was left out of the complete word

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 great start

I think most of us, and I say us as in us people who spend more time in front of computers than in front of real people, remember when it all started. The big awesome presentation at Google I/O . I heard rumors about people crying and celebrating with cookies and ice cream. It was an epic moment.
I saw the whole presentation myself and yes, it was awesome. I know I rushed to sign up for a test account and then I waited and waited and well… waited. Got frustrated and starting tweeting things like ”Ey! Gimme a wave-invite! *getting desperate*” Not that Google would listen but you never know.
After some time I got my wave-invite. Late. I started using it. I forced other people to use it. I quickly found a plugin that would give me notifications of updates on my waves. I noticed other people starting to use it. Then I noticed how they stopped using it. How it was forgotten. And now Google stopped development.

Was it a failure?

People say that Google will loose credibilty. People say that Google gave out invites too late. People say that it was a poorly designed overengineerd application ahead of it’s time. Well, yea. That’s what people say. Personally I would like to thank Google. I got motivated. I think a lot of other people also got motivated. And I think that is what most people who put judgement of Google (and predict the death of Buzz) have missed. Google inspires people. Noone knows to what extent.

No, it shouldn’t have been undone

I don’t regret the Wave thing. Doesn’t matter that it didn’t replace email. Doesn’t matter that millions of people didn’t get addicted to it. I think it was a great Google moment. Sure, people can argue and all but I, as a web developer, was proud when they gave that presentation. To speak frankly it actually is people working with web development that moves the web forward. That keeps improving the web. If nothing else I think Google inspired these people in a positive way to make greater things. I will always think of Google Wave as a great application.

/Ida

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 old days

It was on these forums that the experts hung out. I was always amazed over the amount of answers I got there and one day I wanted to be a person who gave answers as well. I always tried to see if there was some small question that I could maybe help out with but usually I hardly understood the problem good enough to even give a hint to a possible solution.
Times changed. I went to school to become a pro in the area and when activity got low I stopped hanging out on the forums. Instead I started to go to friends or colleagues for feedback.

A new place for the cool people

A couple of months back I heard of something called Forrst. My rss-feeds were buzzing about it and appearantly it seemed to be a very cool place to hang out on for developers and designers. That is if you were cool as well. It was invitation only. I filled out the application form but thought that since I’m not Chris Coyier on CSS-tricks or Ryan Carson from Carsonified my chances were zero. I was simply not cool enough. Dang it!
I gave up. No invite was coming. Then I started to follow the buzz on Twitter. Turns out people were having invites to give away to us less fortunate. (I still thought it was all about coolness…) I started to answering these people and after a while I got the following tweet:
“@kolombiken I like your portfolio, send me your email address and I’ll give you an invite.”
Do I need to tell you I was happy?

You should apply

Forrst was, is, exactly as I imagined it to be and more. So many talented and passionate people all in one place. You are able to upload snaps of your design or code. Ask questions, share links and the best part: get lots of feedback! It was just like in the old days on my forums but with a much better interface.
So let me just tell you this: If you are a designer or developer or both and you have a true passion for the web. Forrst’s the place to be! Fill out their application form today.

Uhm yea, right, sending in applications doesn’t work? Well, turns out I was wrong on that one. Some weeks after I was invited I got an email in my inbox. It was an official invite to join Forrst.

/Ida

Ps. For you Forrsters I’m kolombiken.

So this is my recommendation if you want a book to read this summer! And yes, there’s a ’second edition’ of the book and that’s the one you should go for.

Have a really nice summer everyone!

Best regards,
Simon

“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!”

So what’s this post about? Well, just telling you what’s going on.
It would be super-cool if some of our readers could give us some input on this.
Is there something that’s frustrating here? Something that could be better? Something missing? Any suggestions on things that you think we should work on are greatly appreciated.

In short: feedback bitte!

*Tilted head with puppy-eyes begging for comments*

/Ida

Ps. The header image is revealing a tiny bit on what’s up…