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, 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 JS require() for browsers – better, faster, stronger

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 and created a web-font generator tool 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 Nice web-fonts for every browser