MacKuba

🍎 Kuba Suder's blog on Mac & iOS development

Psionides Blog: Sinatra Edition

Categories: Frontend, JavaScript, Ruby/Rails Comments: 0 comments

I started this blog almost 3 years ago. It was a bit of an experiment, as I wasn’t sure if that actually made sense, if I would want to keep writing it a few months later – so I put it on Jogger (Polish Jabber-based blog service) and I used the classic Kubrick design.

Since I’m rather happy with how this experiment ended up, it was time for a change. The new version is hosted on Linode (definitely the best hosting I have used), and uses a custom-made engine based on Sinatra. Hopefully with this new design I’ll have a bit more motivation to write, because I just couldn’t look at the old one anymore…

If I find some more time, later this year I’m planning to learn some NodeJS and rewrite the engine using it (e.g. with Express).


There’s a few things that I’ve learned while working on the redesign:

  • Head.js is pretty cool, it lets you load non-essential scripts asynchronously in a way that doesn’t keep the page in a loading state. It also adds an IE HTML5 shiv for you automatically.

  • HSL is so much better for picking colors than RGB – you can adjust the hue, saturation and light one at a time instead of trying to balance red, green and blue all at once to keep the hue similar. And LESS converts it automatically to RGB for you, so you don’t have to worry about browser support.

  • HTML5 form validation can already be used today. I use required, type="email", type="url" and pattern="..." in the new comment form, and it works in latest Firefox and Chrome. It doesn’t work in IE (even 9), but who cares… It’s not an essential feature because there’s still a server-side validation. In short, JS validation libraries have just gone obsolete.

  • Yahoo’s YQL is very useful for caching requests to APIs like Twitter or Github. It can cache any request for you for as long as you want, and loading a cached file from YQL is much faster than going to Twitter directly.

    Things to watch out for: if you want caching, you need to disable the AJAX cache busting done by jQuery (cache: false) and randomized JSONP callback names (jsonpCallback: 'something'), and also override the max-age time with some sensible value because APIs usually don’t set it (_maxage=n in the YQL query params).

  • At this point jQuery is so popular that nothing will be able to replace it easily. For some time I followed the development of RightJS, which is a really well designed lib, inspired by Python and Ruby. I even made a tooltip plugin for it. But in the end I switched back to jQuery – there’s no point in swimming against the current if everyone else is using it and most plugins on the net depend on it.

  • I couldn’t figure out at first how to get logs from Sinatra deployed on Nginx/Passenger. Most people recommend this trick:

    log = File.new("sinatra.log", "a")
    STDOUT.reopen(log)
    STDERR.reopen(log)
    

    It didn’t seem to work though; neither did setting error_log in Nginx config, which should redirect all output to that file. In the end, I found out that:

    • Passenger does redirect Sinatra’s logs to Nginx’s error_log, but for some reason they end up in the global error_log file, not the one I set up for my virtual host.
    • If you redirect stdlog/stderr to a file, you need to add one more line:

      log.sync = true
      
  • Free JS CDNs are useful for offloading traffic from your site – I’m using jQuery from Google’s CDN and Underscore.js and Head.js from CDNJS.

  • The choice of hosting a site on this or that side of the Atlantic does make a difference; I tried Duostack first, but it’s hosted in the US, and the connection to Linode’s London datacenter is much faster.

  • There are probably hundreds of jQuery lightbox plugins (just look at this list), but I didn’t like most of them for some reason. The one I chose in the end is Fancybox.

  • jQuery Noisy is useful for generating a “noise” texture in the background (although it’s probably a better idea to take a screenshot and use it as a background image than to add the lib itself to the page and generate the noise each time…).

  • IconFinder is very useful for finding icons.

  • SyntaxHighlighter is the best code highlighting lib I have found (and one of very few that support ObjC).

And finally, big thanks to Stefano Mazzocchi who wrote the article “Why Programmers Suck at CSS Design”. Without it, this blog would probably look much worse… :)


Leave a comment

*

*
This will only be used to display your Gravatar image.

*

What JS method would you use to find all checkboxes on a page? (just the method name)

*