Monthly Archives: December 2013

Making any font faster on websites; or preventing over-dependence on Typekit

Have you ever had a font you wished to use on a website, but found that it wasn’t on google fonts or Typekit? Then, this article should help you out a bit.

So, first things first: lets learn a bit about what we are going to be doing. We will be taking TrueType or OpenType fonts and converting them into the WOFF file format. WOFF is a compressed font file with some additional metadata.

WOFF files are in use by google fonts and Typekit, and is the standard and defined way to send fonts across the world wide web.

So lets get cracking!

We are going to use a handy conversion tool made by jkew over at mozilla. So lets get that first. You will need a C compiler, and preferably the make program (although not required).

On ubuntu you can simply execute:

sudo apt-get install build-essential

If you are running apple products, try the apple developer tools.

So lets get the code; here are two links:
source | icosadev mirror

Extract this into a directory, cd into it, then run make

If all went well you will now have two programs: sfnt2woff & woff2sfnt. We will only be using the sfnt2woff today.

So sfnt2woff is dead simple to use. Just pass a font file (TTF or OTF) to it, and it will output a WOFF file.

So lets copy a few fonts into our programs folder first, then run it. I decided to convert Raleway font family, but you can use whatever ones you want. Note that the path to fonts may be different on your machine, and also that multiple fonts is not necessary.

cp /usr/share/fonts/truetype/raleway/Raleway-Thin.ttf .
cp /usr/share/fonts/truetype/raleway/Raleway-Bold.ttf .
cp /usr/share/fonts/truetype/raleway/Raleway-ExtraLight.ttf .
cp /usr/share/fonts/truetype/raleway/Raleway-Light.ttf .
cp /usr/share/fonts/truetype/raleway/Raleway-Regular.ttf .
cp /usr/share/fonts/truetype/raleway/Raleway-ExtraBold.ttf .
cp /usr/share/fonts/truetype/raleway/Raleway-Heavy.ttf .
cp /usr/share/fonts/truetype/raleway/Raleway-Medium.ttf .
cp /usr/share/fonts/truetype/raleway/Raleway-SemiBold.ttf .

And convert them:

./sfnt2woff Raleway-Thin.ttf
./sfnt2woff Raleway-Bold.ttf
./sfnt2woff Raleway-ExtraLight.ttf
./sfnt2woff Raleway-Light.ttf
./sfnt2woff Raleway-Regular.ttf
./sfnt2woff Raleway-ExtraBold.ttf
./sfnt2woff Raleway-Heavy.ttf
./sfnt2woff Raleway-Medium.ttf
./sfnt2woff Raleway-SemiBold.ttf

After this is done, we will have nine WOFF files:

Raleway-Thin.woff
Raleway-Bold.woff
Raleway-ExtraLight.woff
Raleway-Light.woff
Raleway-Regular.woff
Raleway-ExtraBold.woff
Raleway-Heavy.woff
Raleway-Medium.woff
Raleway-SemiBold.woff

Great, we are halfway there.

At this point, you would move these files into a /css/fonts directory somewhere on your website.

That aside, lets do the styling to actually be able to use our font. We are going to be using the @font-face rule. Let’s do the regular one first.

So why did we add font-weight? Well, when we do use Raleway on a website we want to make sure we are referencing the right one, and not just any. You can also use things like font-style to differentiate between italic versions and normal versions. So, I’ve sorted the 8 files by their weight- then I reference them. Here is the full code:

It looks like a lot, but really it is just minor tweaks of the same few lines.

Raleway Thin (download woff) adds approximately 18KB of data; you should always make sure to only include the fonts you are going to use- and to strip out any others to reduce loading times.

Here is a demo:

Raleway Thin

Further reading:

Defeating spambots on contact forms; or eliminating captchas with honey

Just about anyone who has a contact form on a website has received spam through it. In fact, many people get more spam through their contact page than actual people.. how disappointing.

There have been some improvements, namely the captcha. While the captcha does work most of the time- it is burdensome to users, and almost always results in a decrease of use by legitimate users.

Not all is lost, there is a way to get the best of both worlds: and it is called a honeypot.

We will apply a hashing function to our form fields, add additional form fields, and then decode them in our mailing function. I’ve decided to use md5 as it is quite fast, and we don’t need cryptographic security.

Here is the base honeypot class we will be building off of:

We append date('z') (day) to the name in order to have our hashes change every single day. At worst a dumb targeted attack will work for one day before the hashes / fields are changed.

So, lets use this:

So, by doing this we end up with:

That isn’t too bad. Seems unlikely a bot will be able to mean that actually is a name field.

So, about decoding? We just call the field by encoding name again…

This will grab our name field back out. Very good. But even with a setup like this the bot only has to add random data in.. we have no real honeypot.

So what do we have now? Well, we create a handful of randomly named fields, we have a function called spew() that will echo these to your page, and a function verify() that checks that these fields haven’t been touched by a bot.

Lets see it in action:

So that will end up creating something that looks somewhat like this:

Ok, that looks confusing as hell. What matters is that it is confusing enough.

Here is what we would use to process that:

We now have a essentially invisible captcha, only users fill out the form pieces they can see- and they are oblivious to the tricks behind the scene.

This solution is far from perfect- and in X years it will likely be overtaken. For now though, it works and it is invisible. Perfect!

Use it as a starting point in developing your own honeypot.

Download the source code here

Ellipse deformation with noise; or creating 2d planets in five minutes

What makes earth cool? A lot of things, but it would be boring if it was a perfect circle. Today, in five minutes you will see how to use procedural generation to create a near infinite amount of worlds just by tweaking a few parameters. I’ll be using processing.js to create these. Lets start with a building a simple, circular, boring world and run through the basics of what the code does so we are all on the same page:

The code is fairly self explanatory; here is what we have:

Ok. Boring circle. So what we want to do is apply a modification to the points, make it seem more like a real planet. Real planets have hills and valleys; they don’t squiggle or just have randomly placed edges- they have structure.

This is where the fun happens. We are going to use Ken Perlin’s noise function (which is built into processing) in order to deform the ellipse into a more organic looking shape.

So lets write it:

Ok, so what we did was add two new parameters to our generateEllipse method. These control the amount of bumpiness and the strength of bumpiness.

Now drag your mouse over the planet to alter these parameters:

There, about 40 lines of code to create a basic procedurally generated planet. If this doesn’t get you excited, procedural generation is not just limited to game development. Below we will use procedural generation to create a dynamic art piece- with a little work this could easily be integrated into an animation or used in a design.

Mouse over this:

As you can see, very straightforward. Noise is very useful to keep in your toolkit, whether you are a game developer or work in print; there are a lot of potential applications.

Further reading:

Object oriented css; or how to make reusable structures for basic components

For our first blog post, I’ve decided to delve into object oriented CSS. Why? OO-CSS allows for less code duplication, quicker editing, and overall less errors. Sounds good right?

Let’s design a triangle class. This is going to be the base for all triangles we have in the future, so we just include what is needed.

We set the size of everything to 0, but why add a border? We will be using the “border trick” to create our triangles- and black is a fine default. We will come back to overriding the color and size later on.

So lets see what we have so far:

Not much of a triangle, eh? Lets add some classes to complement our triangle, we will have ones for each cardinal direction.

Ok, that looks like something. So what is going on here? Take a look at .triangle.up. This creates an upward facing triangle. We remove the visibility of the left and right edges, and completely eliminate the top edge. This, due to how browsers render borders will create a real triangle. Take a look:

Beautiful. We are able to take a base class, apply transformations to it, then get a different result. Look at the varying classes, do you spot a pattern with them? The main point of this is the ease of writing. Just think if we were to make a .triangle-up class instead. We would end up writing much more code to display the different angles of view.

We can improve on this, although it requires better support from browsers to be used currently. Lets do the same thing, but just applying transform properties on the subclasses. transform allows us to do 2d rotations, so we can keep the initial shape and just spin it.

Do you see how we just implemented what was in .triangle.up into the base class, then used further classes to rotate it? This will end up a slightly different result, as positioning is not taken into consideration when rotating. Save this idea for about a year down the road, CSS3 greatly improves the speed of development.

Anyhow, moving onwards. We can create triangles pointing in different directions by just adding a subclass to triangle.

NICE! Now, what is the right way to change the color? What is the usage of our triangles? We should not concern ourselves with minutia, we want triangles to be able to be used for menu’s, for indicators, for breaks in text. Whatever we want. Therefore, we will create subclasses to alter our triangle again. There is something to note here; CSS overwrites all previous declarations whenever it is found, and a more advanced feature: specificity aka the CSS point system. I’ll talk a little about the latter as it is slightly more complex, but generally you will get the feel of it without busting out your calculator. Both of these things are really one in the same, but I tend to view them as separate features.. to each their own! In a nutshell, the more specific a selector, the more preference it will be given when it comes to conflicting styles.

I’ll list the point system in case you are curious, don’t concern yourself too much with it.. but it is good to know!

  • ID selectors are highest; think of 100
  • class selector are next; think of 10
  • HTML selector are lowest; think of 1

Add this together, and you get CSS points. These vary across implementations so there is not a cut and dry number. Try not to get a high score. A good rule of thumb is to minimize selectors as much as possible, but not so much that it impedes you. A fine line.

So using this knowledge we will subclass out triangle to deal with “notice” triangles. Perhaps they could be used to draw attention to something, just as the name implies.

Notice the positioning of where .triangle.notice is placed. We could put it directly under .triangle, but we cannot put it under .triangle.[up,left,right,down]. Why? It will overwrite all of their styles, making your triangles… weak!

Cascading turns the above into:

Great! Lets take a look at our triangle now:

I’ll leave further modification for you to play around with. Try playing with width and height a bit to understand why they are 0- you can make new shapes.

Circles are cooler

Lets move on to circles, and explore a different type of subclassing.

For this we will be using/exploiting the border-radius property. border-radius is used to add nice rounded corners. We set it to 100% to make.. completely rounded corners, and alas- a circle.

Notice how width, height and background-color are set. On a website you likely wouldn’t have these properties set as the base of your circle class, but rather- as subclasses designating out various shapes, colors, and sizes. For this example, for brevity we will keep it at that.

Handsome. We can apply oop techniques to make a variety of circles from this. Lets do a raindrop one.

So, we apply a radial gradient starting very blue and getting lighter outwards. A simple shadowing of blue surrounds it as well. We keep background-color in case someone is using a browser that doesn’t support radial gradients yet. Always make sure that even if they cannot see exactly what you envisioned, they can see something close! This is important in all of design as well, not just html. People who have trouble seeing should not be excluded!

Not the best looking, but it works. We can easily create a ton of variations of a circle based off of this one class. And that is the point, we can make fiery circles, or grassy circles. All without having to redefine a circle each time!

So, lets turn it into something useful (and new). Lets make it a growing circle. This will only work with newer browsers, but if done carefully can be used to add function while not excluding others. It can be used to signal this circle is clickable for example. You should always do browser testing, and if the browser cannot handle this consider using a different background color or similar to appease them. Foundation framework deals with this nicely by having ie classes based on versions on the html element.

Lets do it!

So, we’ve added a grower class. This will allow us to change the size of the element when a pseudo-element is applied: such as :hover, or :active. And a clickable class, this combined with grower allows for a smooth transition to a larger size.. or if that is not available- a quick move to 120 by 120.

Lets see our raindrop in action:

Move your mouse over it? Nice! With an icon we could have a nice circle button that grows.

What is cool about composing classes this way, or “not so tight coupling” is that we could apply grower and clickable to other objects if we so please, creating a interface rather than random assortment of code. Much cleaner, much more maintainable, and much less error prone.

To finish up, lets apply these ideas to triangles:

Ok cool, same basic idea. Do you see how we had to rewrite .triangle.grower from .circle.grower though? There is an optimization to be made.

We now just have grower determine that we transition all changed elements it can. Neat. You can and should subclass grower to perhaps have a different amount of time for triangles rather than circles, but that is up to you.

Lets see a final product:






Here is the full code in case you want to use it; feel free:

That wraps our first post. Hope you enjoyed it!

Further reading: