Hipster Dev Stack

csscss

piraterob — Tue, 09 Apr 2013 07:51:11 +0100

There’s nothing we like better than turning up our noses at inefficient CSS and here’s a tool that can help us keep the edge. CSSCSS analyzes CSS or SASS (we like to kick it old skool ourselves but, whatever) finds duplicate rules and, like, shows you where they are.

js2coffee

piraterob — Fri, 15 Feb 2013 15:04:03 +0000

js2coffee:

Ever wanted to turn legacy JavaScript into CoffeeScript? Now you can, either online or via the terminal

npm install -g js2coffee

You should totally set this up as a git post commit hook to definitively win the war with that one guy on your team who insists on still using JavaScript.

Six

piraterob — Wed, 16 Jan 2013 09:56:13 +0000

Six:

CoffeeScript? That’s so 2012. We’re already porting our stuff to Six the ECMAScript 6 pre-processor. I guess you wouldn’t have heard of it yet but you will soon because we’ll be making sure everyone can overhear us affecting blasé detachment whilst discussing it in the latest pop-up dirty food joint.

FRP? Yeah, we were doing that in 2012

froots101 — Thu, 03 Jan 2013 10:40:55 +0000

FRP? Yeah, we were doing that in 2012:

Surely everyone knows by now that 2013 will be the year of Functional reactive programming (FRP) on the client-side? We totally ditched all those irksome callback functions ages ago, and we even re-wrote the Node.js core libraries for FRP, something which the Node.js dudes flagrantly copied with streams. If you want to buy into this particular bandwagon, you could do worse than take a look at Bacon.js. As a strict vegan I had to roll my own implementation of FRP of course, which I’m calling celeriac.js.

Test 'Em

piraterob — Wed, 21 Nov 2012 13:30:10 +0000

Test 'Em:

Obviously we use Chrome Canary as our primary desktop browser but if we sell out and our startup goes mainstream there’s the disturbing possibility that we might start attracting visitors using things like Safari, or even shudder IE.

Test ‘em is the slickest solution I’ve seen for running various flavors of JavaScript test in multiple browsers.

It can pre-process CoffeeScript, run tests automatically as files change, produces Tap compatible output and most importantly has a lo-fi tabbed command line interface.

Bower

froots101 — Mon, 10 Sep 2012 09:33:13 +0100

I’m the kind of sharp guy who likes to roll my own everything: cigarettes, fresh pasta, nori. So, you know, I don’t really need a package manager to handle my handcrafted artisanal JavaScript and CSS. I’m a vanilla JS user, and hey, just because my last project took a lot longer than I said it would, it’s because that shit is handcrafted. With love. So yeah.

If you were the sort of lame-o that still uses third-party libraries (if you are still using jQuery why are you even reading this site?), then I guess you could use Bower, which is some kind of package manager for client-side code. It was made by some guys at Twitter, though, so I can’t use it anyway because I’m boycotting everything they do until they un-ban my ‘fixietoot’ Mac client - the one that forces you to type exactly 140 characters for every tweet.

Neat vs Semantic GS

piraterob — Wed, 05 Sep 2012 13:47:32 +0100

Yesterday saw the release of Neat, a new responsive grid system. Its aim is to not pollute your beautiful semantic markup with grid_n type classes but instead to use SASS mixins extended from Bourbon. I approve of the name (although although mine’s an Old Fashioned).

Does Neat offer anything other than a snappier name over The Semantic Grid System? Semantic GS has been available for a while and gives you the holy-war avoiding choice of LESS, SCSS or Stylus flavors. I’ve used Semantic GS on my own portfolio site & been very pleased with how easy & unobtrusive it is.

Webspecter

piraterob — Fri, 24 Aug 2012 09:30:00 +0100

Webspecter:

Since CasperJS has sold out by producing some really nice documentation & a Homebrew formula scenesters like us desperately need a new end-to-end testing tool that people in the flyover states haven’t heard of yet…

¡Hola, Webspecter!

Like Casper it’s based on PhantomJS & supports Coffeescript but the focus is squarely on testing rather than general browser automation. The syntax is BDD derived - based on Mocha and Chai. Best of all it has a nice looking helper extension mechanism that could be the starting point for a robust page abstraction.

Rivets.js

piraterob — Sat, 07 Jul 2012 18:00:00 +0100

Rivets.js:

Declarative data binding is what all the cool kids are doing right now. If you want the indie coffee house to the Starbucks of Angular.js then check out Rivets.js.

Unlike the absurdly powerful capabilities of Angular we’re talking one-way binding from model to view only. That said it’s small, simple, configurable, uses standard data- attributes and provides an adapter API so it’s simple to hook up to whatever you’re using to manage your data model whether it’s backbone, spine or your own artisanal, locally sourced framework.

The JavaScript plugin for Gradle looks like it’s shaping...

piraterob — Fri, 06 Jul 2012 12:57:20 +0100

The JavaScript plugin for Gradle looks like it’s shaping up nicely. Does Yeoman have some competition?

Yeoman

piraterob — Fri, 29 Jun 2012 13:30:54 +0100

Yeoman:

It hasn’t been released yet and has a Twitter account that has yet to tweet but already has 930 followers so right now is definitely the time to start making a lot of noise about Yeoman. If you wait until next week when people have actually started using it you’re going to look pretty wack.

What is it, you ask? Oh, right… Well it looks like it’s going to be a command line tool for bootstrapping and managing web apps. Want to bootstrap an app with a single command? Want to install jQuery into your app by just typing yeoman install jquery?* Want to have your Coffeescript and SASS files compiled and your images optimized with a single step? Want to run your unit tests with Phantom right from the terminal?

Looks pretty cool to me.

* Ha! Trick question… jQuery is waaay too mainstream.

Iced Coffeescript

piraterob — Tue, 05 Jun 2012 12:40:58 +0100

Iced Coffeescript:

Whether you’re dealing with any asynchronous programming or just want an opportunity to drop a nonchalant “oh, you’re using traditional Coffeescript?” into conversations then Iced Coffeescript could be for you.

It adds await and defer keywords to the language to let you cleanly manage joining after asynchronous callbacks. Reading the documentation you start out all “whatever” as the first example doesn’t seem to offer a great advantage but as the examples get more complex & the vanilla Coffeescript (see, that gave me a nice elitist glow inside) required grows more & more convoluted the Iced syntax starts to shine.

I guess the big questions are; how well maintained it will be as Coffeescript itself matures? is there any chance of this stuff getting ported back? and is it going to cause any undue hassles such as generating hellishly difficult to debug JavaScript?

fixie.js

piraterob — Wed, 30 May 2012 23:27:00 +0100

fixie.js:

With a name like that we can hardly ignore it… Fixie saves you the trouble of copy ‘n pasting from hipster ipsum by automatically injecting classy ethical 8bit locavore filler text into your site.

I like the way different length content is generated for article, p, a & img elements and can merge with ‘real’ content.

Pro-tip: use placekitten for images by adding this:

fixie.setImagePlaceholder('http://placekitten.com/g/${w}/${h}').init();

Lo-Dash

froots101 — Wed, 30 May 2012 17:17:57 +0100

Lo-Dash:

You! Yes, you! You’re the kind of hipster that still thinks Williamsburg or Dalston are cool, aren’t you? You’re still using Underscore.js aren’t you? LOSER!

Stop it immediately. You’ll get at least 10 milliseconds page load performance if you use Lo-Dash, a drop-in replacement for Underscore.js with a few added features. I’m almost reluctant to tell you about it in case you tell your Pabst-drinking loser friends about it.

lodash.com

Casper JS

piraterob — Mon, 21 May 2012 14:56:52 +0100

Casper JS:

End-to-end testing web apps can be trickier than doing trackstands on your fixie without spilling your flat white. Tools are often a pain to get running, test suites awkward to organise. Do you test in-browser with JS or using something like Selenium? Ugh, total drag.

Casper JS on the other hand is crazy simple to set up and use. It sits on top of Phantom JS (oh, you really haven’t heard of that? It’s a pretty cool headless WebKit implementation). Casper provides a friendly API layer in much the way that Geb complements Selenium.

Casper can run individual Java/Coffeescript files or directory trees, interact with the file system to upload or save, can output JUnit-compatible reports & grab screenshots.

It will be interesting to try to work up a complex page object model & really put it through its paces with richer interactions but the simple stuff I’ve tried so far has been promising.

Grunt

froots101 — Mon, 21 May 2012 09:51:54 +0100

I know at least one other person using this, and it’s already at version 0.3.9, and has good documentation, so this is seriously in danger of becoming unpleasantly mainstream. It’s practically enterprise already. If it were an early-90s Portland indie-music café we’d have a riot, charge no money for entry and get it shut down on purpose.

Having said that, if you want a really simple set of build tools for your JavaScript project, then Grunt is for you.

I’m using it to compile my Haskell source files to pure JavaScript byte-code. Yeah.

Angular JS

piraterob — Sun, 20 May 2012 15:01:00 +0100

Angular JS:

Some nice ideas in Angular; plain objects for models, automated event handling & extensible HTML for building components.

I was initially put off by the non-standard ng-* attributes but apparently those of us who are pedantic enough to care about HTML validity can use data-ng-* instead.

As Mex puts it:

Finally a front-end tech from Google that doesn’t suck.