A few months ago we decided to set up our own Flowy Apps network in our coworking space, since we had no chance to apply any configurations to the official WiFi. Luckily I still had an old router we could use, but we also needed a bridge from our network to the official WiFi. Until now we’ve used an old barebone for that, but I always thought that this solution was a bit oversized.
That was probably the reason why I came up with the idea to use a BeagleBone as a router when it crossed my way during some hardware testing we did for a new Flowy Apps project. The BeagleBone seemed like a perfect fit: It is small but powerful and has all connectors we need (if we use an USB WiFi dongle). Unfortunately the way to a perfect router was not as straight as I thought in the first place, but in the end everything worked out. Continue reading Building a BeagleBone router
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 How to create perfect web-fonts in 3 steps
- 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
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 Nice web-fonts for every browser
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 more 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 Attention iPhone, free Shapes ahead!
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.
#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 Node.js require() for your browser
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 This CSS layout grid is no Holy Grail
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 AJAX cross domain requests with CORS
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 Teach your XMLHttpRequest some JSON
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 Easy SSH tunnelling for the Mac