Announcing 'Features', a BDD Tool

Features is a BDD collaboration tool bringing technical and non-technical people together to work on Scenarios.

The problem? Feature files are hidden away in your VCS. Non-technical people such as testers and BAs are unable to access and collaborate on Scenarios.

The solution: a web interface which is synced with your VCS. Scenarios are easy to browse and view with Gherkin colour highlighting.

Technologies

  • React 15.x - Declarative, componentised, and bootstrapped using create-react-app
  • Redux - Flux-inspired state management, easy to reason about
  • WebSockets - Real time app updates
  • React Router v3 - App routing. Looking to move to the new declarative v4 soon
  • Semantic UI - Neat, reusable UI components
  • Axios - Promise based http client. Works in the browser and node.js (perfect for server side rendering in the future)
  • Formsy React - Declarative form building

Server-side

Features

  • Auto import of feature files from Git (SSH or https)
  • View feature files with auto Gherkin colour highlighting
  • Multiple project support per user

Screenshots

Auto import

Auto import screenshot

Gherkin highlighting

Gherkin highlighting screenshot

Github link: https://github.com/ademuk/features

Thinking Isomorphically

It has always got to me, the inherit SEO problem with SPAs. This of course comes down to the fact our web servers render little more than an empty div, without a trace of hypertext. With this in mind I would add more importantly, that we are “breaking the web”.

There have been a number of workarounds. The arduous task of pre-rendering your client-side app using the likes of PhantomJS, relying on search engine crawlers running Javascript engines, or adhering to unorthodoxed shebang conventions; none of which feel right. if I need SEO I revert back to a traditional server rendered MVC app.

Enter Isomorphism, Isomorphic Javascript. A buzz word first coined by Charlie Robbins in 2011. “Iso” Latin for equal, Morph “form”. Code of equal form that runs both on the client and server. Proposals have also been made to call it Universal Javascript, similar to Apple’s universal apps.

Sharing view logic with the server allows for server-side rendering. After this the same code on the client-side picks up from there, adding behaviour and SPA qualities. This server rendered markup restores the hypertext we had long forgotten, including links to other resources which are also capable of being rendered server side. The same routing logic which is used in the client code is shared with the server.

Another benefit of this is performance gains and improved UX. Pages are rendered immediately upon being downloaded, instead of having to wait for script downloads, XHR requests, and DOM manipulation to take place. Of course we won’t have any behavioural functionality until these occur, but it’s the perception of speed which is introduced, and the fact the user sees content earlier. This reminds me of iOS’s technique of displaying a screenshot of the app which was taken just before it was closed, while it is starting up. Automatic “Progressive Enhancement” so to speak.

Code maintainability and less code duplication are often cited as benefits. This might be true in the case that you’re building you’re app from the ground up with full-stack Javascript. In reality your web apps are more likely to have existing web services written in other languages. In this case we aren’t actually removing any duplicate code between the client and server. Instead simply sharing our existing client view logic with the server.

In summary, if the 2 benefits are an app which likes hypertext/improves SEO and enhances UX, then I’ll take it, whatever it’s called.

Using AngularJS and Django Rest Framework

AngularJS and Django are the perfect couple, particulary when you introduce Restangular and Django REST Framework.

I’m open-sourcing a project which harnesses this stack, my RC flight logging app. It’s in its infancy, but I have some good ideas for it which I will soon share.

flyguy - AngularJS Javascript client. Uses Restangular to handle REST resources. Routed using Angular UI router. JWT (JSON Web Tokens) for authentication. Jasmine test suite. Bootstrap styling. Currently deployed to Github pages.

flyguy-service - Django Rest API service. Uses Django REST Framework. Currently running an instance via Dokku with a Postgresql database.

See app below, new user registration coming soon. http://ademuk.github.io/flyguy


Update 26th August

New user registration is now implemented and live.

Building a Mini Quad

(A.K.A. Drone/Quadcopter/Multirotor/ZMR250)

It was Christmas 2014 when it all began, the conception of my Multirotor fascination and subsequent obsession. I’d eyed up a £30 micro quadcopter earlier on in the year but sensibly (or foolishly) avoided it. However it wasn’t long before in the usual last minute Christmas rush I found the quad for £16 from ebuyer. I ordered 3 Hubsan Q4 Nanos for Christmas presents. The fun we had flying these later led us to the larger Hubsan X4 with HD Camera.

Once I’d mastered the toys, it was time to move onto something bigger and better. I decided to avoid the out of the box RTF (Ready to Fly) models such as the Phantom, that all seemed to easy. I wanted to go deeper into the hobby and build my own.

After crawling the Internet I discovered a lot of people talking about the ZMR250. A seemingly decent clone of the way more expensive “Blackout” frame. Shiny Black, Carbon fibre, space to hold all sorts of fancy tech, £13.00? I was sold.

The Build

Components

FPV

Working on the Mini Quad.

Soldering ESCs. This was tricky as the solder pads were staggered, so all 3 motor wires needed to be just the right length. The weight loss through not using bullet connectors is certainly worth it though.

Bringing the circuitry all together via the Simple PDB.

The Taranis X9D was my choice of TX. This shot also included the FPV (First Person View) gear.

Nice Fringe.

Until next time...

Next up:

  • Installation of the long awaited Overcraft PDB Batch 4.
  • GPS antenna for PH (Position hold), and RTL (Return to Launch).
  • Contribute to Cleanflight (waypoints?).
  • Build a web app to log flights.

Some video footage

Flying FPV in Cornwall and on Hampstead Heath.

Common Dokku Pitfalls

Dokku is a Docker powered Heroku clone which you can install on your own hardware. I’ve been using it for over a year now and have recently moved all of my sites over to run on it. It doesn’t come without its quirks, see below for more.

1. Insufficient physical memory

runtime: panic before malloc heap initialized
fatal error: runtime: cannot allocate heap metadata

Solution: Configure virtual memory (swap file).

dd if=/dev/zero of=/swapfile bs=1M count=512
mkswap /swapfile
chmod 600 /swapfile

Then add the following to /etc/fstab:

/swapfile         none            swap    sw                0       0

Then run the following to persist it.

swapon -a

2. Python/Ruby app incorrectly detected as Node app

This is down to the presence of a package.json file in your app root.

-----> Building node-js-app ...
Node.js app detected

Solution 1: Set your build pack explicitly to Python (see below). Then install Node.js via dokku-nodejs.

Solution 2: Use heroku-buildpack-multi to set both buildpacks (I haven’t tested this solution).

This way your app will be correctly built as well as your package.json dependencies installed.

3. TLS/SSL config + custom domain plugin incompatibilities

Using plugins such as dokku-domains-plugin or dokku-custom-domains, in combination with Dokku’s TLS support can result in unexpected TLS behaviour (i.e. Some certificates not being applied).

Solution: Use the dokku-nginx-hostname plugin which is compatible with Dokku’s TLS/SSL.

4. BUILDPACK_URL env var not recognised by build

Solution: Create file .env in the root of your app.

Add your build pack to it:

echo "export BUILDPACK_URL=https://github.com/heroku/heroku-buildpack-python" > .env

NOTE: This has been fixed in Dokku >=0.3.9.

5. Cannot deploy static app

buildpack-nginx doesn’t support Dokku >0.3 (Ubuntu 14.04).

Err http://archive.ubuntu.com quantal/main amd64 Packages
  404  Not Found [IP: 91.189.91.15 80]
Err http://archive.ubuntu.com quantal/restricted amd64 Packages
  404  Not Found [IP: 91.189.91.15 80]

W: Failed to fetch http://security.ubuntu.com/ubuntu/dists/quantal-security/main/binary-amd64/Packages  404  Not Found [IP: 91.189.91.15 80]

Solution: Use the following build pack https://github.com/ademuk/buildpack-nginx

See above on how to apply it.