The 26 grunt plugins we use at qrator.com

There has recently been renowned interest in javascript build tools and task runners, with grunt.js being the most popular one and gulp and brocolli the new kids in town!

At qrator.com, we have been using grunt to manage the worklflow for our emberjs application. Our Gruntfile.js was originally created with the yeoman emberjs generator but has since grown to 633 lines of code. We are now using many grunt plugins for the several different aspects of the app and here’s a list of the most important ones:

  • matchdep: This contains helpers to filter the dependecies of a project. It enables loading all other grunt plugins with the following line of code require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks)

  • grunt-contrib-connect: Starts a connect web server. This just serves our app.

  • grunt-contrib-livereload: Reloads browser when changes occur in the source files (js, html, css).

  • grunt-open: This just open urls and files – it’s used to start the browser with our app.

  • grunt-contrib-jshint: Lints js code. We’ve set this up to be triggered as a pre-commit hook.

  • grunt-jsbeautifier: Helps with beautifying and keeping a consistent syntax in your javascript files. We’ve also set this up to be triggered as a pre-commit hook.

  • grunt-mocha: Runs our client-side mocha specs.

  • grunt-contrib-coffee: Compiles coffeescript files.

  • grunt-contrib-compass: Compiles sass files using the compass ruby project. Latest versions can generate sourcemaps which are quite handy while developing.

  • connect-url-rewrite: Rewrites urls. This is useful in our case for making css/js sourcemaps work.

  • grunt-preprocess: Preprocesses files using a syntax based on conditional comments. We use this to generate different versions for testing, development and deployment of our index.html file.

  • grunt-rev: Does static file asset revisioning through content hashing. We use this plugin for versioning our final js and css files and are planning to use it for images.

  • grunt-usemin and grunt-useminPrepare: Used in conjuction with grunt-rev, this plugin replaces references to non-optimized scripts or stylesheets (or any file) into a set of HTML files (or any templates/views).

  • grunt-contrib-imagemin: Compresses images without affecting their quality.

  • grunt-contrib-cssmin: Compresses css.

  • grunt-contrib-uglify: Compresses js.

  • grunt-concurrent: Runs tasks concurrently.

  • grunt-ember-templates: Precompiles Handlebars templates for Ember.js.

  • grunt-neuter: Concatenates files in the order they are required. This is used to break up the application in multiple folders and js files. Ideally this will eventually be replaced by a pure js solution like require.js or converting to ES6 modules and using the grunt-es6-module-transpiler.

  • grunt-ssh: This is used to sftp the packaged app to production or staging servers.

  • grunt-contrib-compress: Compresses files and folders. Useful for email delivery.

  • grunt-shell: Runs shell commands. This is used to integrate several useful shell scripts into the grunt workflow.

  • grunt-conventional-changelog: Generates a changelog using git metadata. Useful to know what has changed between releases.

  • grunt-bump: Bumps package version (in package.json), creating the appropriate tags and optionally commiting/pushing the changes. We use it in conjuction with grunt-conventional-changelog.

  • grunt-phantomas: A phantomJS-based web performance metrics collector and monitoring tool. Useful to see how your app performs in several different key metrics.

  • There’s an internal plugin that allows local overrides to the Gruntfile.js. This is useful in order to disable specific behavior in certain environments (for instance, image minification is not totally reliable in windows environments, and same goes for compass’s sourcemaps). One can achieve something similar with grunt-local-settings.

And as a final piece of emberjs related advice, if you’re currently bootstraping your emberjs application, it’s best to forgo yeoman (i don’t believe the ember generator is maintained any more) and use Ember App Kit. Additionally, if you’re going to bootstrap in a few weeks, you should definitely check out Ember CLI

Charles Proxy for iOS development – simulating 3g

Charles Proxy is a great tool for web developers and it can help you in mobile apps too.

Here’s what you’d need to set it up:

  1. Run charles on your pc / mac, go to Proxy -> Proxy Settings and note the proxy port
  2. In your device network settings, enable http proxy and enter its ip and port (see below for ios)
  3.  Back to charles, click on Proxy -> Throttling Settings and enable throttling while choosing the 3G Throttle Preset. In the example below i’ve created another preset where i’ve lowered the in/out bandwidth even further

That’s it – now go use your app and watch in the charles screen the requests.

For extra credits, you can introduce packet loss/reordering by running

tc qdisc change dev eth0 root netem delay 10ms reorder 25% 50%

in your box – see netem for more

The type initializer for ‘Nested’ threw an exception

If you get “The type initializer for ‘Nested’ threw an exception” when updating nhibernate,
then it might be related to Reference to Castle Proxy removed from NH-CORE.

Just add

<property name='proxyfactory.factory_class'>NHibernate.ByteCode.Castle.ProxyFactoryFactory, NHibernate.ByteCode.Castle</property>

Tapestry gets a face lift

Tapestry, the definite java component web framework, just got a nice face lift. The new website that was in the works for some months is now online.

In it, you will find the updated Tapestry Tutorial, the new and detailed FAQ, a quick reference to commonly used annotations within Tapestry 5 and much more documentation.

The Tapestry home page is also full of exciting new reasons of why you’d be interested in using Tapestry, so if this is the first time you’ve heard of this component based framework or if it’s been a while since you last reviewed it, then I gladly welcome you to take a look.

Goal 4D

Goal4D was the name of a java 3d engine i created a long long (long) time ago [2001-2003].
The code was never open-sourced and even though most of its features are obsolete now i don’t think it’d hurt anyone if i post it on my github account (i’d have to find the source code first).
Anyway, here’s a presentation i once did about Goal4D… enjoy!

Goal4d
View more presentations from andyhot.

On losing my primary HDD

On losing my primary HDD

Well, it just happened – i was aware of the ‘clicking’ sounds for the last few days but i didn’t bother to check what it was… it was the hard drive, stupid!
But why? And why now? Well, it turns out the power supply fan was not functioning and I guess the high temperature made matters deteriorate fast! BIOS isn’t recognizing the drive and there’s nothing i can do through software means – the HDD containing my home folder was history…
But anyway, my first thoughts were to quickly send the disk for recovery and here are some service i’ve found out (through web search) that can handle such a task here in Athens / Greece:

I didn’t contact any of them but it looks like the price for the recovery can start from 300€ but will most likely end up to 1000-1500€. So, why didn’t i contact any of those? Well, after the first few hours had passed, i had calmed down and had booted to the second HDD’s – that one’s still alive – Windows Server 2003 for the first time in the last 2 years. Then, and while installing those 2 years’ worth of updates, I tried hard to think what i had lost.

So, i’m happy to say that i haven’t lost much! Passwords are recoverable + in laptop’s browser as well. Bookmarks in delicious and in laptop. Important documents & emails in gmail (and laptop). Pictures & videos in laptop & wife’s laptop & windows HDD (hmmm… perhaps that still says something about linux device support : P). Private keys were once copied to windows for use with putty. In fact, i’m currently aware of only the following loses: some uncommitted changes to a few projects and loss of a git repo for a week old project (chesstu.be) for which i at least got the latest code from the deployment server! And that’s all for now… perhaps i’ve lost more and perhaps i’ll find that out soon but still i think i was just lucky, esp. considering i had no “formal” backups
Update: Forgot to mention I’ve definitely lost thousands of 1 0 bullet chess games played on FICS … but those are either reproducible, or just crappy!

ESC 2010

ESC 2010

Rooting for Ukraine this year

Partial review of last year – php comeback?

Partial review of last year – php comeback?

In 2009 I did several php projects. The decision to use php was a pragmatic one – very cheap, available everywhere, easy to google for and I had a lot of experience with it in (its and … mine) early years. I even used to teach it at SPHY.
So anyway, up till last year, thinking of php would always bring back memories of spaghetti-code (though I hasten to add, the worst spaghetti-like project i’ve had to work on was in Java/jsp and that was back in 2001/2002 – copy/paste was the emperor and reuse was an unknown word). But all those memories have since changed – php 5 can do OOP and apart from a few gotchas, it’s not that much different to Java… and you do get instant productivity gains (due to save-reload workflow)
After doing a short review of the php web frameworks & libraries, I chose to use Kohana (ver.2) in my projects. Kohana has proven to be a very elegant and clean MVC implementation and its new version (ver.3) now implements HMVC (hierarchical MVC) which is awfully close to what component-based web frameworks are offering but with less magic and thus less complexity
( i’ll need another post -or posts- to explain this further)
Of course, when you’re back to the PHP land, it’s worthwhile to take a look at some of the best (and most used) apps that are written with that, namely wordpress, drupal and joomla (FlatPress is also great if you can’t afford a DB). I took a close look at the source code of wordpress and drupal and their architecture and found both straightforward – code is understandable, authoring plugins and extending default functionality is both easy and fun! And this makes you think… perhaps I can use any of those platforms as a base for my projects. Perhaps YOU should!
Anyway, i’ll expand my thoughts in the following days. I’ll close with screenshots of 3 greek blogs i was involved with this winter (onlybeauty.gr, ufoerotiseis.gr, grease.gr):
onlybeauty.gr
ufoerotiseis.gr
grease.gr

A new and wonderful Tapestry 5 blog

Igor Drobiazko (a Tapestry committer) has recently started blogging on Tapestry 5 and his entries are very interesting and informative… Take a look:

Having Fun. PS3′s here

Having Fun. PS3′s here
Well, that’s just another kick-ass gift from Emi!

Here’s what i’m currently playing: