Using Vue Components in your Express app

VueJS is awesome. Creating self contained components and compose them together in your pages makes so much sense, and therefore I’ve been using it extensively in my latest projects. However, sometimes you want (or need) to create a traditional app, and can’t use the SPA workflow development with hot reloading and .vue files. Or can you? 🤔 TL;DR: I’ve prepared a repo with the full example code in case you want to dive right in at Github

Exploring the wonderous world of image processing

I’ve always been intrigued by image processing. Especially by programs that can actually detect objects in images. However, I’ve never done anything serious with this except for the odd API calls to various Cloud based services like Google Vision, Watson or Clarifai. I always wanted to toy around with a library that makes these services tick, such as OpenCV, but it requires installing some OS specific tools and the whole thing always feels daunting so I never really got anywhere with this.

Getting started with the PanResponder in React Native

Inside React Native you can use the PanResponder to recognise multi-touch gestures as well as swipes and other touches that make native apps feel snappy and intuitive. But getting it up and running can feel daunting and borderline black magic. In this post I’ll try and guide you through the process, hopefully demystifying it a bit and get you on track to awesomeness. What we will be making Obviously we’ll be wanting to focus on the PanResponder itself so UI wise this will be pretty barebones.

Writing Browserify modules for your Angular app

Following up on my previous Let’s Build an angular app with Browserify post I got a few questions on how to create modules for your app. Let me show you. -- If you haven’t already, make sure you’ve read the walkthrough on how to set up the environment to work with Browserify and Gulp, so you can follow along. Basically, what you do when you require() a module, is looking for what the script you require exposes to the outside world through module.

Recording a website with PhantomJS and FFMpeg

When I realised you could easily generate screenshots from a site with PhantomJS I just needed to know if I could take it one step further, and record a video. The goal What I wanted was to record 10 seconds of video from a random website and output it as a .mp4. For this short demo I decided we should go with one of the fun examples on Pixi.JS as they’re interesting to capture.

Let's build: An AngularJS app with Browserify and Gulp

Today I want to show a generic workflow and setup I have used a lot lately when working on building apps with Angular. It uses Gulp as a CI system and Browserify to minimize code clutter and maximize awesomeness. So let’s jump in. Update 21 october 2014 - Frickle As with most things, boilerplates evolve. I decided to expand the boilerplate we’re building below with a backend for the API side, as well as cleaning up some things based on new findings and updated modules.

Blogging with CabinJS and Grunt

I just want to mention CabinJS. It took me all of 10 minutes to set it up, and another 10 to get the automatic deployment to Github Pages working. The other 4 hours this sunday I spent on layouting, designing and tweaking the blog you’re reading now. And that’s pretty sweet. There’s quite a few static site generators on the market today, of which Jekyll probably is the most famous, but CabinJS elevates a minimalistic setup combined with Grunt tasks to a new level of awesomeness.

Blogging with Octopress

As some of you may know, even though I don’t blog all that often, I do mess about with it a lot. Mostly on what makes it run. Switching between Croogo, a custom built CakePHP site, Wordpress .. and back again. For some reason none of them really seemed what I wanted. Croogo is cool enough, but actually adding posts is a hassle, and theming the thing was more of a puzle.

Spotify Boilerplate App

A while ago we were proud to be releasing 2 of the very first Spotify Apps in the Netherlands at NoProtocol. For a long time since I’ve been planning on creating a Boilerplate in which we could put all the best practices and redo some stuff in hindsight. And finally, it’s here! You can grab it at For a bit more in-depth information, read on .. The Boilerplate project aims to provide a foundation upon which you can start building Spotify Apps.

Format associative JSON to work with Knockout.js

I recently started creating a RESTful API in CakePHP to work with a Knockout.js frontend. While Knockout.js is a lot of fun, it does expect your JSON to be in a certain format. Take the following response from a simple find action: "Projects": [ { "Project": { "id": "151", "title": "Een ander project", "slug": "een-ander-project", "description": "dsfdsfs", "tasks_count": "2", "tasks_backlog": "2", "tasks_open": "0", "tasks_closed": "0", "duedate": "2012-04-09", "created": "2012-04-09 13:52:19", "modified": "2012-04-09 13:52:19" }, "Task": [ ] }, { "Project": { "id": "152", "title": "Een ander project", "slug": "een-ander-project-1", "description": "dsfdsfs", "tasks_count": null, "tasks_backlog": null, "tasks_open": null, "tasks_closed": null, "duedate": "2012-04-09", "created": "2012-04-09 13:55:30", "modified": "2012-04-09 13:55:30" }, "Task": [ ] }, This is fine to work with in your typical View, but Knockout rather has a nested format, and doesn’t like the leading Project nodes.