CSS transforms

CSS transform (in Firefox 3.5+ and Webkit-based browsers) has a whole bunch of interesting functions, such as rotation, translation, scaling and skewing. To learn more about the different functions, check out the Mozilla developer center overview of CSS transform. After playing around with chaining different transforms and seeing the effect, I found out something interesting:

transform:rotate(45deg) translate(0, -35px);

If you rotate first, and then translate (move), it will move along the rotated axis. The above code translates a block to the top-right corner (45 degrees). (the gray div is not transformed while the black one is.)

Using this, I could rotate and translate a bunch of divs to create loading spinners (though this one doesn’t spin yet!):

In this example, each div is rotated an additional 45 degrees. The first one is not rotated, the second one is rotated 45 degrees, the one after that 90 degrees, and so forth. Additionally, each div has increased opacity to make it look like most loading spinners.

Animation

Webkit supports CSS animations, but these are continuous while most loading spinners are not. On the left side is a spinner animated with CSS animation (only works in Safari and Chrome), on the right there’s one animated with a small bit of JavaScript to look like regular loading spinners:

The code for the CSS animation is fairly straightforward:

#div2 {
  -webkit-animation-name: rotateThis;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
}
@-webkit-keyframes rotateThis {
  from {-webkit-transform:scale(0.5) rotate(0deg);}
  to {-webkit-transform:scale(0.5) rotate(360deg);}
} 

While the (quick and dirty) code for the JavaScript animation is pretty easy as well:

  var count = 0;
  function rotate() {
    var elem2 = document.getElementById('div3');
    elem2.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem2.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    if (count==360) { count = 0 }
    count+=45;
    window.setTimeout(rotate, 100);
  }
  window.setTimeout(rotate, 100);

Someone else might be able to duplicate the loading spinner-style rotation with CSS animations (please let me know!), but the JavaScript solution looks better and works in Firefox too.

Going crazy with it (More examples!)

Once I had the basic ‘functionality’ working, I just decided to go crazy with it and create a whole bunch of different style loading spinners. You can find them on this page: CSS3 loading spinner examples.

Check out the source for the way to style the different spinners and let me know when you make interesting variations!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

CSS3 loading spinners without images

So, go get it at sencss.kilianvalkhof.com!

Extra, Extra!

The biggest change is that I’ve split all the class specific styles into their own file, sen.extra.css because I noticed that for most sites, cherry-picking from sen.extra.css works much better. This brings the size of sen.css down to a small 5kb. None of the styles have disappeared, so horizontal forms, message styles and typographic classes are all still there and you can include them all, or just the ones you need.

Move to Github

Pretty much all my open source work in the past year has been published on Github except for SenCSs, which up till now was located at Google Code. Github kicks Google Code’s ass in almost every way and active development is much easier this way. With SenCSs on Github, I hope to recieve patches and improvements from other people as well.

Other changes

The CSS for forms has received an update, with cleaner selectors, fixes for the display of buttons and the vertical rhythm. This release also has fixes for monospace text in webkit and various bugs in IE8.

Full change log:

• move all helper classes to an external file
• Fix vertical rhythm for certain form elements
• Remove the text-align center from message styles
• add explicit font-weight declarations to the heading elements
• clean up documentation and repository
• move fully to GitHub
• hide focus effect on buttons in firefox
• clean up form css
• add a number of IE8 fixes

I hope you enjoy this release, and I look forward to the forks and patches that can be made thanks to hosting it on GitHub!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

SenCSs 0.7 is out

Graphs

This means you get awesome graphs such as stacked area charts and sparklines, but no pie charts or bar charts with every bar a different color. There are a lot of bad charts out there, and Grafico will do it’s best to prevent you from adding charts onto that pile. ;)

Website, Documentation (might be slow on some browsers due to all the examples)

Grafico requires Raphaël 1.0+ and Prototype.js 1.6+

Each graph type has numerous API options to customize it’s look and behavior. Many examples of this can be found in the documentation. Some highlights: pop-up hovers, meanlines and watermarks. Minified, Grafico is about 30kb and available under the MIT license.

Grafico is also available on Github and includes a minification script made by Menno using the Google Closure Compiler.

History

In april 2009 I started working on new visualizations for Wakoopa. I had set it my target to provide unique and interesting graphs. One thing that particularly inspired me was the stream graph, but the math behind it scared the crap out of me. I decided to focus on stacked area graphs instead.

After doing extensive research on the available JavaScript charting libraries, and being slightly disappointed by most, Ico by Alex Young was the most promising. In the (almost ) year I worked on it, the graphs, code and API changed considerably. To avoid confusion I decided to rename my version to Grafico.

Todo

As always, there are points of improvement. The major one is speed. Grafico is very speedy on modern browsers, but of course IE lags behind. When building graphs, drawing pop-up hovers for all data points takes too much time and I have yet to find a way to improve this. The project lives on Github, so if you have improvements, fork away and I’ll gladly pull them!

Update! (16 Feb 2010)

Jan Paul Posma wrote the code to implement the aforementioned stream graphs into Grafico. Which is awesome. I have updated the links in this article accordingly.

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Grafico: Javascript charting library

Vectors

You see, SVG and Canvas are based on vectors. This means that they don’t really care about the pixels they get drawn on, their graphic implementation takes care of that. And thats a problem. This is the code to draw a 1px line in canvas:

var canvas1, context1;
    canvas1 = document.getElementById("canvas1");
    canvas1.height = 20;
    canvas1.width = 560;
    context1 = canvas1.getContext("2d");
    context1.strokeStyle = '#000000';

    // draw
    context1.moveTo(1,10);
    context1.lineTo(200,10);
    context1.stroke();

As you can see, that line is blurry. I don’t want my lines to be blurry. Luckily there is an easy fix:

context1.moveTo(1,10.5);
context1.lineTo(200,10.5);
context1.stroke();

Just offset with half a pixel, and it’ll render nice and sharp. This works, because in SVG and in Canvas, pixels aren’t seen as an indivisible unit. You can draw on a part of a pixel.

When you code a line to start at a certain pixel, you are actually starting the line in the top-left corner of that pixel. When that line is 1px wide, half a the line gets drawn on one pixel, and the other half on the one next to it, resulting in a blurry line.

As I said, this is’t really SVG or Canvas’ fault. SVG and Canvas should not care about pixels, because they work in vectors. The lines are blurry by design. However, the last thing a canvas or SVG developer should want is code littered with +0.5 and currently, this is exactly what happens.

What I want

I don’t want to have to write +0.5 all throughout my canvas or SVG generating code. I want the canvas or SVG implementation to be smart enough to know when that line is going to be unintentionally blurry, and make sure it’s not. Now, an implementation might not be able to determine this, I don’t know.

At the very least, give developers a global option to switch between the two “modes” (one being theoretically correct, the other giving sharp lines). Call it alignToRaster (a boolean, as a property of the canvas, defaults to false) and if set to true, silently add the 0.5px for me.

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

The problem with SVG and Canvas

Typeselect

Let’s take a look at the new kid on the block. Typeselect is based on version 0.12 of Typeface.js, and defines it’s goal boldly in a custom, text-selectable font on it’s homepage:

You shouldn’t have to compromise the design or the user’s experience to have selectable text.

Amen!

Typeselect acts as a layer above Typeface.js. You should take this as literal as possible, since the way Typeselect works is by adding transparent text on top of your replaced text. Script-wise, added to Typeface.js are jQuery 1.3.2 and their own js file, typeselect.js that takes care of the actual selection of text.

Including Typeselect in your website

<head>
…
  <script type="text/javascript" src="js/typeface-custom.js"></script>
  <script type="text/javascript" src="fonts/nilland_regular.typeface.js"></script>
  <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="js/typeselect.js"></script>
…
</head>

While it takes two more javascript files when compared to Typeface.js and Cufón, chances are that you already use jQuery and you can always choose to combine multiple javascript files. When we move on though, actually changing the font is pretty easy. By adding the class select to the elements you want to replace, and adding your typeface.js converted font to the css, the font will be replaced!

<div class="myclass select">
…
h1,  h2 {
  font-family:nilland, Georgia, Serif;
  font-style:italic;
}

Future?

It seems that Typeselect aims to be a layer above typeface.js and Cufón to provide selectable text for both. Apart from that, better rendering of the fonts is on the roadmap as well as a host of other things. Only… Typeface.js currently has it’s own, very similar, implementation of selectable text built right in. Actually, as far as I can see, it’s identical. So without Cufón support, I’m not sure if Typeselect is the best choice you can make.

Typeface.js

Typeface.js added text selection in version 0.13 in the same way as Typeselect: selectable text is implemented by overlaying real, transparent text on top of the rendered text. Pretty smart! AS you can see on Typeface.js’ download page, it works really well.

However, by doing this, performance goes down a bit. Not enough to really notice it, but if you want to disable it, there’s an app option for that. By adding the following to your <head> in a script element, selecting text gets disabled:

_typeface_js.configure({ disableSelection: true })

Cufón?

So, where does that leave Cufón? Well, text selection is planned in version 1.2. Right now Cufón is at version 1.08, so we’ll have to wait a little longer.

Conclusion

For now, Typeface.js is pretty much the best way to use good looking fonts while also allowing selectable text, cross-browser. However, with some work, @font-face can be made working in Firefox 3.5, Safari 3.1+, Opera 9+, Internet explorer 4+ and Chrome 0.3+. So, basically every browser. However, it is a lot of work compared to using Typeface.js, Cufón or Typeselect.

Personally I think that in most browsers, using the javascript replacement results in better looking text, and it’s definitely easier to implement. In terms of forward compatibility, @font-face is a better choice. It’s up to you!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

The state of selectable text-replacement

Canvas

…is pretty easy. There are good guides available, not the least the one from Dive into HTML5, Let’s Call It A Draw(ing Surface). You need them, because there are a couple of gotcha’s. For example, to get different colored lines, you need to explicitly start new paths (but you don’t have to explicitly end them, just draw them on the canvas before starting another line). Once you get the way this works, it’s pretty much straightforward from there.

Another example is that in canvas, pixels are seen as small squares (yes, really.) When you draw a line from a pixel, it actually draws the line centered in the top-left corner of the pixel. When it renders, that means that the line gets blurred because it’s actually drawn on two pixels. This means that in order to correctly draw a 1px wide line, on a single pixel, you actually need to position it 0.5 pixel further. (so it’s in the ‘middle’ of the pixel). It turns out, that sort of fails in Firefox (but not in Safari) because of a rounding error. If I used +0.5, Some lines just wouldn’t appear! However, if you just subtract 0.5, then everything works as expected.

Download and demo

The whole project is hosted at github as well: gridBuilder.js on Github. gridBuilder.js is 4kb unpacked, uses jQuery and works in real browsers*. It’s dual licensed under the GPL and MIT licenses.

*A real browser here is defined as one that supports both canvas and data-url’s. The latter is being used to set the canvas as a background image for your element.

Code

Since it’s a jQuery plugin, gridBuilder.js works for any jquery element. gridBuilder.js offers 5 customizable settings, a primary and secondary color for gridlines and secondary gridlines (positioned in the middle between two gridlines), a height for the vertical rhythm, a width for the horizontal strokes and a gutter (spacing) for between the strokes.

Entering false for any of the options will disable that particular option, so you can for example just have a vertical rhythm and no horizontal strokes, or disable the secondary gridlines. The default settings are shown below.

$(document).ready(function(){
  $("body").gridBuilder({
    color:          '#eee',    // color of the primary gridlines
    secondaryColor: '#f9f9f9', // color of the secondary gridlines
    vertical:       18,        // height of the vertical rhythm
    horizontal:     140,       // width of horizontal strokes
    gutter:         40,        // width of the gutter between strokes
  });
});

While this is a plugin you’d primarily use while building a website, should you want to remove it via javascript, you can call this function:

$("body").destroyGrid();

Future improvements

I would like to add a floating panel where you can enter all options and have the grid regenerate on the fly, as well as giving you the javascript code to invoke that particular grid. This would make it easier to tweak your grid, since you wouldn’t have to edit your file, save it and then refresh.

It’s hosted on Github, so feel free to fork it and do with it whatever you like :)

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

gridBuilder.js, background grid generator in canvas

So I decided some action needed to be taken. I got the domainname websitesthatdontworkwithoutwww.com, installed Chyrp, got a Thumbalizr API key and started making a list. Name ‘em and shame ‘em!. If any of the websites fix their non-www version, the without thumbnail will automatically update and I’ll add a link to their site :)

Input time

The site is there, and it has a couple of websites on it, but now I need your input to start adding more and more! If you encounter sites that don’t work without www., please send them to submit@websitesthatdontworkwithoutwww.com. You can also @reply the twitter account: @wtdwww. (and better yet, follow it!)

The Firefox thing

During development I got a couple of remarks that “well, site X just works you know”, to which I could wittily (*ahem*) reply “Nope, it doesn’t. I bet you use Firefox 3.5!”. That’s because Firefox 3.5 automatically adds www. in front of domain names if they don’t work without. While this is awesome for end users, it just hides the fact that a lot of hosting providers/webmasters are incompetent at doing their jobs. In that regard it’s a shame.

Since I don’t want to just point and laught, fun as that is, I’ve also added a help page, where some explanation of how to fix the non-www website will be placed. I’m still working on that, if you want you can help (just shoot me an e-mail!)

This was a fun little project I made in a couple of evenings. I still have to soften up some of the edges and tweak parts of the “site”, but overall I’m pretty happy with how easy it was to set up.

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Websites that don’t work without www

LaTeX

There was of course no way I was going through the hell of managing a 30-or-so page Word document. I decided to learn LaTeX (and BibTeX) which has powerful layout capabilities, and easy ways to keep track of all the references I use (within the document, and to other sources).

As it turns out, if you know HTML, LaTeX is really, really easy.

If you are a front-end developer that has to write documents every now and then, I’d definitively recommend you to start using it. It took me less then a day to get comfortable with it, and that included trying out a bunch of different editors.

Source Control

Because I use LaTeX, which is just plain text, it was a logical idea to just throw everything into a git repository.

Following that, I decided to place it on Github as well. This means I can work on it from any place that I want, that it’s securely backed-up, and that it’s really easy for others to read and suggest changes. Alper went as far as submitting a patch, Very Cool.

You can find my entire graduation project here: Kilian/Graduation on GitHub. I plan to make use of the issue tracker as well, and as you can see Issue #1 is: Graduate ;)

While my entire graduation project will be done in Dutch, I will release an English article listing quick-wins and tips for increasing participation on social networks through usability at the end of the project as well.

So, wish me luck and we’ll see what comes out of it at the end of those 16 weeks! :)

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Graduation (almost)

The presentation

Or watch it here, if full screen is more of your thing: CSS frameworks by Kilian Valkhof. It’s in Dutch.

The presentation is a general overview of the current CSS frameworks, both client side and server side. It gives a rundown of the way they work, what their (dis)advantages are and which one you should use. Just kidding ;)

I managed to keep SenCSs out of the presentation, for its larger part. The most fun discovery was that very little people knew about the server-side options like sass and cssscaffold. They provide a powerful way to manage your CSS and allow you to write smarter css, faster. It’s where the cool stuff will be happening :)

Prezi was interesting to work with, even though their sloppy coding prohibited me from making my presentation on my normal pc, a 64bit Ubuntu installation. It worked nicely in a 32bit VM though. Prezi, if you want a horde of smart, creative early adopters to use your product, pay me and I’ll fix your code ;)

The Meeting

Thanks to Martin for hosting the May meeting, Mirabeau in Eindhoven has an awesome looking office. It was our most southern meeting yet, and there were more people than I expected, so that was all good.

Besides my presentation, Arjan Eising gave a talk about WAI-ARIA. It was very interesting and he had some nice code examples, though I had hoped to hear a little bit more about the juxaposition between it and HTML5.

I also got rid of about 60 more stickers, which have been going like hot buns ever since they got the Zeldman seal of approval.

If you want to host a Fronteers meeting in the future, don’t hesitate to contact us!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Slides of my Fronteers talk

If you’re not familiar with Cufón, check out my previous article: Cufon vs. Typeface.js, which one is better? or this article: Exploring Cufón, a sIFR alternative for font embedding by Cameron Moll.

Not just @font-face…

Now, @font-face isn’t the only way to display custom fonts. What if the visitor already has the font installed? It’ll display automatically then, again leaving us with no reason to use load Cufón. These are the three options you have when you want to display custom fonts, in order of speed:

• The font is already installed on the users computer
• The font get’s downloaded and displayed with the use of @font-face
• The font gets replaced by Cufón

I will not go into @font-face in this post, for more on web fonts, read these articles: CSS at ten and @font-face in IE: making web fonts work (Which not only explains how to use @font-face in browsers that support it, but also in IE using their proprietary DRM-ed .eot ’standard’.)

The trick

The effect of an installed font and using @font-face are the same: The font is rendered and displayed natively by the browser. This means that you only have to check if the font is available, and can forgo checking if @font-face is at all an option. A very smart solution to do this is the jQuery fontAvailable plugin. The implementation looks like this:

$(document).ready(function() {
    if($.fontAvailable('Optimer')) {
        // code here
    }
});

The plugin works in a most ingenious way: On document load, it created an element with the alphabet in it, and sets the font-family to a non-existent font to apply the default font. It then replaces the font-family with the font you've specified, and checks if the width has changed. If the width has changed, that means the font was applied and is available.

Update: Eneko Alonso ported the plugin to mootools: moo-fontavailable. Cool no?

So, all you have to do to make this work, is make sure that the font-name you define in your @font-face declaration is the same as the real font name, and it will automatically work for both already installed fonts, and fonts loaded in with @font-face!

And then Cufón

So, with an @font-face declaration in your CSS, and a bit of JavaScript telling you if the font is available, all you have to do is add in @cufón when $.fontAvailable returns false! (Note the added ! in the example code, so Cufón gets executed if the font is not available)

$(document).ready(function() {
    if(!$.fontAvailable('Optimer')) {
      Cufon.replace('h1');
    }
});

Unfortunately it's not quite that easy. Because IE can show a FOUC with Cufón, you have to add Cufon.now(); at the end of the page. If we use Cufón from within $(document).ready();, that would make Cufon.now(); ineffective because it would actually be parsed before the document is ready, and thus before the initial Cufon.replace(); function.

It will still work, but IE users might see the font getting changed while the page is loaded. Over at the Google group, they are already working on a solution to this, so it shouldn't be long before you won't need Cufon.now(); at all anymore.

That's all there is to it

All in all, it's quite simple. Check if the font is available, either through already being installed or through @font-face, and if it isn't, we'll let Cufón display it. This offers you the best of both worlds, because browsers that support @font-face will have their native text, and browsers without @font-face support will still get custom fonts.

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Combining Cufón and @font-face