How to create perfect web-fonts in 3 steps

Web-fonts are a hassle. Once you think that you’ve finally nailed it, whoops there comes another special case where all fonts are totally  [insert swearword of your choice here]. Same happened to me after my last post on how to create nice web-fonts for every browser. The font I created following this howto worked in all of my test-cases, but soon after I had published the post several comments popped up that told me different. Some of these were only small glitches I could either ignore or fix easily, but in the end I had to admit that my proposed solution is at least incomplete. So I again went on a quest to find the best way to create perfect webfonts.

This took me on a long an dangerous journey, but you might want to take the shortcut and use Fontie, the magic web-font generator, instead. However, since you’re still reading I assume you want to know everything! So here my young fellows is my story on how to create webfonts that look good on any operations system and browser. Continue reading

JS require() for browsers – better, faster, stronger

Unlike in Node.js for example, JavaScript in browsers doesn’t come with a require function to load modules dynamically. There are some implementations which try to fill this hole, but as I’ve pointed out in my previous require() post none of them really fit my needs. What I want is a lightweight solution with full CommonJS compatibility and easy handling.

I was using my first require() version only in smaller contexts last year, so I was happy even though some things were missing, but now I’m working on a more complex JavaScript framework for my current project Flowy Tasks, which gave me the impulse to improve my old code to a full featured version:

  • 100% CommonJS modules 1.0 compliant (all unit-tests passed)
  • 99% CommonJS modules 1.1.1 compliant (didn’t find any tests to verify)
  • improved security (but I’m sure it’s still not bullet proof)
  • correct relative path handling (the old version was buggy)
  • support for module bundles (I love this ^^)

I tried to improve security a bit by preventing modules from accessing the internals of the require function and by making require a read only property of window. I’m pretty sure this makes require() a bit safer, but I didn’t spent to much time on this topic to be sure.

Instead I spent several iterations on a feature I really wanted to have for the new require: Bundles (not packages). A bundle is a single file, which represents a directory with multiple modules. Hence multiple modules can be loaded with one HTTP request, which can reduce the network traffic significantly. But more on this later… Continue reading

Nice web-fonts for every browser

Update: This article is obsolete. After some more research I’ve found an even better way to create perfect web-fonts in 3 steps. Over at Flowy Apps there’s even a magic web-font generator called Fontie, which does all the work for you…

I’m using web-fonts for quite a while now, and I really love them – somehow. On the one hand web-fonts finally give us designers the ability to create really individual websites, but on the other hand this freedom doesn’t come for free. The cost is the quite complex handling of web-fonts. Starting with the different formats (woff, etf, ttf, svg) different browsers expect for the font-data, continuing with the CSS needed to include fonts into your styles and not really ending with the mess you could get into when trying to find a legal font you could use on a website.

I was lucky enough to find FontSquirrel a few years ago, which offers tons of free high-quality fonts and a @font-face generator, which converts a TTF- or OTF-file into the several web-font formats and generates the CSS to include the font into your page. Quite handy – and until a few days ago I thought this is all you need to know about web-fonts… Continue reading

Attention iPhone, free Shapes ahead!

Update: Unfortunately you can’t download Shapes at the moment. My Apple Developer membership expired and I’m not planning to update it right now, since I want to concentrate on some other, not iOS based projects at the moment.

While reorganizing my online accounts and websites I realized, that I had neglected the page I once created for the my first iPhone app. Therefore I decided to give Shapes: Puzzle ‘em up – yap, that’s the name of the game – a new home here at Pixels|Bytes. After some thoughts I also decided that I can bear the few coins I gain from selling it, so you can get Shapes for free from the Apple App Store from now on!

Read on if you want to get some more information about the game and the ideas and concepts behind it. Continue reading

Node.js require() for your browser

Important: Require got even better! Check out my post “JS require() for browsers – better, faster, stronger” for an improved version, which is CommonJS compliant, more secure, handles relative paths correctly and supports module bundles. The require function described here is obsolete.

Everyone who has worked a bit with JavaScript will sooner or later wish for an easy way to load a script directly from another script (similar to #include in C or require() in PHP). Over time frameworks like RequireJS and some other code snippets bubbled up to the surface, but they all have some drawbacks: They either require quite a lot of extra code, only allow asynchronous loading (this is not always a good idea) or don’t separate the module from the rest of the code, which makes porting kinda difficult.

Then came Node.js with its easy to use module concept, which needs nothing more than a simple function call to load a JavaScript file into its own namespace. When I started to use Node.js this concept felt a bit odd at first, but once I got used to it I loved it an started to look for a way to bring Node.js’ require() to the browser. I stumbled upon broserify pretty fast, but didn’t take a closer look, since it simply looked like a bit too much for my use-case and all this command-line stuff just didn’t feel right.

In the end I started to implement my own require function for browsers, which resembles most of the features implemented in Node.js and also allows asynchronous loading. For the lack of creativity I simply called the project Require(). However, I’m sure it lacks some features of the bigger frameworks, but it’s just a small script (ZIP archive) and pretty easy to use as you can see on the example page, so I think it’s worth a try. Continue reading

This CSS layout grid is no Holy Grail

Remember the good old days, when we used tables for almost every layout problem we had to face? Those were rebellious days, where no one ever cared about semantics and clean code *sig* I’m getting nostalgic…

Today things are different, but fortunately the W3C gave us some neat CSS properties to make normal HTML elements behave like tables. However, they live a hidden life, while designers still use floats and negative margins to find what is considered to be the Holy Grail of Webdesign (aka fluid multi-column layout). Floats were used for a good reason, since IE6 & 7 weren’t able to render CSS tables, but IE8 was released almost three years ago, so I guess it’s time to abandon floats in favour of CSS tables and approach to a more modern kind of Holy Grail.

So, if you can’t go with graceful degradation when it comes to IE7 and below, you probably should stop reading here, but everyone else who wants to know how to achieve a flexible layout grid, including full height columns and a sticky footer, that works in IE8+, Firefox 2+, Safari 4+, Opera 8+ and Chrome 10+ (probably even more), should download the examples and read on. Continue reading

AJAX cross domain requests with CORS

A lot of people (including me a few weeks ago) still think that the same-origin policy of the XMLHttpRequest object makes it impossible to send an AJAX request to a foreign domain, but luckily this isn’t true anymore. Ways like JSONP, Flash bridges or some weird iframe calls (it’s fun – spent a whole night on that aproach ;P) have been found to tackle this issue somehow, but there’s a nice draft from the W3C called Cross-Origin Resource Sharing or short CORS, which solves this problem in a very elegant way and is supported by all major browsers.

The good thing is you don’t need to make any changes on the client side, everything will work like you’re expecting it from a usual XMLHttpRequest, all you’ve got do is to make the server send some “magic” HTTP headers and cross domain requests won’t be a problem no more. And that’s the bad thing as well: Sending the headers shouldn’t be a problem, but it implies that you have server-side access. However, let’s just assume you have access to the server and take a look on a simple example including some PHP and Node.js code snippets. Continue reading

Teach your XMLHttpRequest some JSON

I recently started to use JSON for the data exchange between websites and servers (Yeah, I know I’m late ;)) and was looking for a lightweight solution to send HTTP requests carrying JSON encoded data via JavaScript. The best idea I’ve found was the JSONRequest proposal on json.org, but this has two essential flaws: browser support is not really existent and it doesn’t allow RESTful communication.

So I stuck with the native XMLHttpRequest object and extended it’s functionality. The compressed code is just 822 Bytes and XMLHttpRequest compatible. You’re even able to send cross-domain-requests with a bit extra code (see my AJAX cross domain requests with CORS post for more). The code is reported to work with IE9, FF7, Chrome 16, Safari 5.1 and Opera 11.60 beta, but I’m pretty sure every browser with JSON and XMLHttpRequest support should work (tell me whether it works with your browser or not).

You might want to visit my little example page to test the whole thing right away, but I suggest to read a least the section about how to use the JSONHttpRequest object, before you download the code to use it in your page. Continue reading

Easy SSH tunnelling for the Mac

Yes, I know I fit the cliche here, but I like to work outside my office in a coffee shop or another public location. It’s a good feeling to have some people around instead of seeing the same faces all day long – or even no faces when you’re a lonesome freelancer like me ;) However, there are two drawbacks I was never happy with: First almost all public WLAN hotspots are unencrypted, which is quite a security problem, and second some networks don’t allow the use of certain services (e.g. the network at my university doesn’t allow me to send emails via secure SMTP). Luckily the solution to this problem is quite simple: We need a local SOCKS5 proxy that routes all internet traffic through a secure SSH tunnel.

All you need is a working Mac OS X, my WiFiTunnel script (Installer or ZIP archive) and a SSH Server outside of your local network. No idea where to get such a server? Well, there are some public SSH servers out there, but almost all virtual server packages offer SSH, so just try to connect to a server that hosts one of your websites. All necessary  details are explained during the script installation, but you should read on if you want to get the whole story. Continue reading

Sticky CSS footers: The flexible way

Update: I’ve developed the idea of this article a bit further to a simple CSS based layout grid, which also includes flexible columns and some other improvements. However, this article is still worth reading to get a basic idea of how the flexible footer works.

A CSS sticky footer is an area, that stays at the window bottom if there is not enough content to fill the complete window height, but stays below the content if its height exceeds the window height. There are several ways how to achieve this circulating in the web, but they all have some flaws: Most of them (e.g. CSSStickyFooter) require a fixed height footer and the only flexible solution I’ve found needs jQuery. However, here is an easy and plain CSS solution for sticky footers with fluid height that works perfectly with IE8+, FF2+, Chrome9+, Safari3+ and Opera 8+ (probably more) and returns acceptable results in IE7 and IE6.

For those of you, who don’t care about big explanations, I’ve made a simple example page and a bit more complex one to show you how it will look like. You can check out the code (it’s quite simple) in your browser or download everything as an ZIP archive or read on, if you want to know all the details. Continue reading