I decided to start a Fuck Yeah blog because I, perhaps immaturely, think that putting “Fuck yeah” in front of stuff makes it at least twice as cool. A day later someone on twitter said I should’ve named it “FLIck Yeah Keming” and have a double keming, which would’ve been even better if it wasn’t slightly confusing. Still, a missed opportunity.

Anyway, as I hadn’t announced it on my own blog yet, here is a copy of the introduction post I made on the blog:

Welcorne!

Hey all! After seeing a horrible kerned image of type for the umpteenth time, I decided to do something about it! And in true internet style, I of course make a Fuck yeah Blog. You’re watching it right now!

Keming is a term coined by Ironic Sans. I am not associated with them, but they have an awesome shirt available.

The writer of this blog is Kilian Valkhof, A web developer/designer from the Netherlands. Suggestions welcome via the suggest button up top, or by sending a message to me via twitter: @kilianvalkhof.

Kem on!

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

Fuck yeah Keming!

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

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

It used to be so easy. Every screen was 72DPI, so you were quite certain in how large or small something would display on a monitor. Nowadays, websites are viewed on all sorts of devices with all sorts of DPI. Most screens have 72 or 92DPI, some have 120DPI. An iPhone has 160DPI and regular cellphones have around 100 to 200DPI

That means that your 400px wide image will look very different on a range of monitors, and that the pixel will become less and less the “solid” measure most Front end developers regard them as. This isn’t new, Roger Johansson blogged about it two years ago.

One thing the article mentions is that a CSS pixel is not always equal to a device pixel (otherwise zooming would be impossible, for instance). Unfortunately, as you can read in the same article, this doesn’t mean you can go merrily about your ways, because it will still look different on a screen with higher or lower DPI.

what now?

I think that in the future, pixel based designs will not be a viable option for web design any more. Technologies such as SVG and CANVAS, coupled with relative sizing (relative to the base size of browsers), or even the CSS gradients, repetition and stretching background options CSS3 and the Webkit team bring us, will be used in favour of jpg’s, gif’s and png’s. For most website designs, SVG etc. would be easier to use and maintain than pixel based formats. But alas, not all browsers support it yet.

However, this doesn’t completely solve the problem, because there are plenty of photographs used in web design. What about those? The current idea is to give higher resolution images to screens with a higher DPI and lower resolution images to screens with lower DPI. I am uncertain if this will work, as it essentially doubles the work of a web designer.

Well, will they become obsolete?

I certainly hope so! It might not be in the next couple of years, but in a decade or so, I think web developers won’t be thinking in pixels any more.

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

When will pixels become obsolete?

Design wise

This is actually the first design I made on a Linux machine (nerd), and the first design that went directly from sketch to html. My sketches were more detailed because of this, and I might add them to the article later, when I have a good camera at hand. In any case it means I didn’t buy fancy pencils for nothing :) Most of the typography was actually sketched out, instead of added as an afterthought. The header is set in Asturias.

Besides that, the whole website adheres to a vertical rhythm of 18px (even my form elements!), largely the cause of the awesome SenCSs. There is a pretty strict grid as well. It might seem quite small if you have a fancy 24″ monitor, but since I have an Asus EEE, I wanted it to work on there as well. I can create 1, 2, 3 or 4 columns within my style, with space to the right of the design where I can put extra stuff. I might experiment with that in time.

I’m using my Context Hover javascript trick as well, I think it works very nice on this site.

I liked the idea of having as little administrative cruft available as possible, and initially didn’t have a search form at all. This is functionality I wanted to offer though, so I settled for what you currently see. It’s in the top right corner with position:fixed, more part of the browser window (right below your google search bar) than my website. Huzzah! I also removed the sharing options, and made the meta information as small and invisible as possible.

Oh, and about the tagline, it’s still there for those who look :)

Code Wise

Yep, I used SenCSs for this design, and that took away about 50% of the styling needs. I’m so happy with developing it :) There are probably some things here and there that I’m going to change in SenCSs 0.4.7, or, if I can finish the form part, they’ll go straight into 0.5 :) (0.5 being the first version to include form styling).

HTML-wise it’s quite boring. xhtml strict, nothing spectacular. I went down a scale in headings in articles. (So what was h2 with the old design will be h3 in the new design.) Will be interesting to see what Google thinks of that…

I’m also happy to tell you that this site is made with a screw IE attitude. I can do this, because IE users are only about 15% of my visitors. Most of the site will work for them, the fancy stuff won’t. What fancy stuff, you ask? Well, That would be fancy CSS selectors such as these:

h2 + p:first-line
.first-post > p:first-line
.comment-form .left ~ button
li:not([class=pingback]) .comment-content p:first-child:first-letter

I’m using the similar posts plugin to display related posts at the bottom of my articles, which works pretty well and I find myself browsing through my backlog, so I hope you will, too. :)

On the homepage I have the three most popular posts. Anyone that has searched for a plugin to take care of that and works with WordPress 2.6 probably found out there isn’t one. So I had to make my own little snippet* that uses the post options plugin. I’ll post an article with the code in the next couple of days. *my WordPress-fu isn’t good enough to develop plugins yet

More than a weblog

I like the idea of this just being a weblog, but I am also a freelancer, and wouldn’t mind showcasing that on my site a bit more. So the projects page will include both open source and client work. I got some cool things lined up for release. On the homepage I’m displaying a list of projects I developed or am involved with. Currently that’s just SenCSs, but expect that to fill up in the near future.

Your Thoughts?

I’m quite interested in your thoughts on the design and the website in general, let me know in the comments and if you’re browser is hot enough, I’ll give you a sweet :first-letter and first-line effect! ;)

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

My first design is finally done

Fluxility design is currently taking a break (well… we really try to, anyway) to work on more personal projects. This free time gives for some introspection about our brand, our image and the past three years of fluxilliness.

Reinvention

Just like how you need a new hairdo once every few years*, It’s my believe that young companies need to constantly re-evaluate their image and brand and change whenever it’s needed.

While I can keep my haircut for a fair while longer, for each day that your clients interact with your “old” brand, the harder it will be to successfully change it later on. Release early, release often is a mantra that, I think, also fits well with the evolution of a company brand within it’s first couple of years.

*currently overdue for one

Fluxility in 2005

As a 16 year old kid in 2005 I didn’t have any experience with typography design. I’m ashamed to admit, but the choice of our first logo font went like this:

1. look for “fluxility” on dafont.com (no results)
2. look for “flu” on dafont.com (1 result)

That one hit was a font called Fluoxetine, a grungy, font-melting-out-of-it’s-borders type of font. I loved it. The difference between the rigid shapes and the molten, fluid, flexible inner of the font represented both how we were still adapting to our roles and how we were also “breaking the mould”.

However, this font also had some downsides. For one it was a bit childish. It also looked really muddy in small font sizes. While it fit us well in the first year when we were trying to find our own way, it eventually had to change.

2006: Greyscale Basic

At the end of 2006 we set out to change our website (and general image) and decided that Fluoxetine no longer fit what we were trying to tell people about us. We were a lean, modern and approachable company. We weren’t trying to fit into anybody’s mould any more. (That sounds way more dramatic than intended)

So in December 2006 we chose Greyscale Basic as our new, updated logo font. It’s a modern, almost futuristic font with very clean shapes.

Besides having very clean shapes, it’s also quite thin. This thinness to me expressed a form of sophistication that we wanted to show with Fluxility. In those years our prospects had quite some skepticism because of our age and relative inexperience with the business side of things. The sophisticated feel of this font had to counter some of that.

Does this font have downsides? Well, a small one. It feels quite technical in part because of the rigid corners. This, in my eyes, actually created some distance as it lacks a bit of humanity and softness. In a comic book, this font would be used for robots, not for humans.

2007: Montag

When, in September 2007, I stumbled upon Montag, I immediately fell in love. It had everything Greyscale had in terms of sophistication, it felt modern and had clean shapes. But unlike Greyscale Basic, it’s rounded ends and gentle curves made it feel more likeable, more approachable and more human.

Right now we use Montag light for our logo, and I’m really, really happy with it. It’s the only pay-for font of the three, So the chance of bumping into it somewhere else is much lower. (A small benefit.)

I can see us keeping this font for a long time to come.

How about you?

Now that I’ve shared the rationale behind Fluxility’s logo fonts I’m interested to hear about yours. It’s worth noting that, when we set out in 2005, We didn’t plan on iterating our brand like this. It’s worked out very well though, and I’m glad we were comfortable enough about our brand to change parts of it.

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

Fluxility’s logo font evolution

Text-shadow is a neat little CSS3 (actually, CSS2) property that allows you to display a shadow behind your text. The only downfall is that it doesn’t work in Firefox and Internet Explorer. I decided to fix that problem. Well, half of it. I made it work in…

Internet explorer!

Bet you didn’t see that one coming, did you? Internet Explorer has a neat thing called “filters” which are basically filthy javascript implementations in CSS. They have a whole slew of them, including shadow. But we’re not using that because it’s very ugly:

h1 {filter:progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=45);}

See, you don’t want that in your page, you want something looking good like this text-shadow in safari 3:

h1 {text-shadow:#000 0px 0px 3px;}

This, of course, looks much much better.

Exit shadow, enter glow and blur

When you look at the text-shadow effect in Safari or Opera 9.5, you can see that the shadow is basically a blurry version of the text that fades away at the edges. So we have to find a way to emulate that in Internet explorer. Thanks to two filters we can emulate it: Glow takes care of expanding beyond the text but is a bit crude on its own, so we add a slight blur to it to soften it up a bit.

filter:
	progid:DXImageTransform.Microsoft.Glow(Color=#bbbbbb,Strength=2)
	progid:DXImageTransform.Microsoft.blur(pixelradius=5, enabled='true')
;

When we add these filters to some text it looks nice and shadow-y, but we lose the the text itself.

It gets ugly here

In order for it to work, we need to find some way to place the same text over the blurred text. For that to happen I added an additional span inside the element.

When we keep the filters on the element, the span inside the element gets blurred as well, with no way of turning that off. So we have to switch it around: we place the filters on the span.

From here on some creativity is needed: We need to place the span directly under the original text. We do this by absolute positioning, a negative z-index and a bit of guesswork regarding the placement.

The Result

From there on I just cleaned it all up, hid the extra span for all other browsers using conditional comments, added a knock-out version and the end result looks like this:

Check out the example (in Internet Explorer), the CSS is fully commented for your dissection and understanding.

Discussion

There are some points of discussion of course.

The Firefox problem

If you’ve gotten till here, you might wonder why Firefox is missing from this article. That’s because it currently doesn’t support text-shadow. There is an extention available, though.

Semantics and all that

The span’s, while nicely hidden using conditional comments, would probably be better off added with javascript, just for cleanliness. The same goes for all the proprietary CSS, add it in a special CSS stylesheet and include it using conditional comments to keep your main stylesheet valid and not bother smarter browsers with invalid CSS.

That’s it, have fun with this bit of code! (My way of saying: code in public domain)

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

(Almost) Cross browser text-shadow

The great discussion

What was going to be on the stickers was easily decided on: 45 of our logo on a green and 45 of our logo on a blue background with a stickerbook for us both. But then: there are 6 colours to choose from. Six! This led to discussion as to who would pick which colour, and why. I was especially partial to purple, and my colleague to orange but neither colour was especially Fluxy. (Well the purple was, once, but we’ve been reducing our purple-ness for some time now. ) When Wouter decided he wanted the green one, I opted for the blue one.

Done’s done

I ordered the same set for both colour stickerbooks, and waited till they came in the mail. A very confused girl delivered them to my house, Royal mail doesn’t use the official Dutch postage company for post I guess. Mine came 2 days earlier than my colleague (ha!) and I’ve had them for about three weeks now. The stickerbook is absolutely awesome, Moo always puts a lot of effort into the packaging. The stickers themselves are really thick and durable, with a nice coating. Our logo looks awesome on them:

There is one problem though:

I haven’t dared to put a sticker anywhere yet. I’m always a bit scared of placing stickers anywhere, afraid to “lose” the sticker and afraid that I’ll get bored with some thing with a sticker on it, making the placement of a sticker a waste. Though I have 90, and the vinyl will come off easily, I still haven’t dared to place them anywhere. I’m going to stick one on my new duct tape wallet though, promise. (the old one is falling apart, so I need a new one.)

Anyone have another nice place to stick them on? (Electronics and furniture are out of question.)

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

Moo stickers!

Checkerboard patterns

To make these you have to make an image with at least 4 blocks, and then repeat that. What if you could control the space between each repeating image, in the x and y direction? Lets assume we use a 20px by 20px black image:

.foo {
	background-color: #ffffff;
	background-image: url("one-block.gif");
	background-position: 0 0;

	background-repeat: 20px/20px repeat
}

background repeat would take this form: background-repeat: direction x-spacing/y-spacing. So the above would position the image in the top left corner, skip 20px in both directions, and repeat it again. Effectively creating a nice checkerboard pattern. (Black and white, in this case.)

What happens with a repetition in one direction?

When you have a repetition in one direction (repeat-x or repeat-y) then you would also need only one spacing value. Lets assume we’re going for a stripy blue/light blue background here:

.bar {
	background-color: #ddddff;
	background-image: url("slightly-darker-blue.gif");
	background-position: 0 0;

	background-repeat: 20px repeat-y
}

This would create horizontal stripes, each 20px apart vertically. This code would work with a fixed-width container and an image with the same width. But by using both spacing options, we can make it width independent:

.bar {
	background-color: #ddddff;
	background-image: url("slightly-darker-blue-but-smaller.gif");
	background-position: 0 0;

	background-repeat: 0/20px repeat
}

This time, the image repeats in all directions. Horizontally without spacing, and vertically with 20px apart.

Shorthand

most people use the background: shorthand property, so it would have to work nicely with the shorthand too. And it does:

background:#ddf url("slighlty-darker-blue-but-smaller.gif") 0/20px repeat 0 0;

Doesn’t take away anything from the readability, does it? Of course, the default repeat spacing would be 0/0.

Even more interesting

With the multiple background possibility in CSS3, this would get even more interesting:

.foo {
	background:#ddf url("red.gif") 20px/20px repeat 0 0,
		url("green.gif") 20px/20px repeat 10px 10px,
		url("blue.gif") 20px/20px repeat  20px 20px;
}

I’m sorry that you have to imagine a background like that (I truly am), but it serves the general idea perfectly. The code above creates a red/green/blue checkerboard pattern, and allows you to be even more flexible with your backgrounds. Just think of combining this with alpha-transparent png’s. Diagonal stripes just got easier :)

Discussion

Would this make your life as a CSS developer easier? Please share your thoughts in the comments.

Other CSS thoughts
If you enjoyed this article, please consider reading any of my previous CSS thought articles:

• Solving equal height columns
• Background-z-index
• Math in CSS

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

Random CSS Thought: Advanced background repeat options