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
- 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
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
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
Important: The require function described here is obsolete. 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.
#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.
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
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
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
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
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
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