Bulletproof solutions for the savvy developer.

Protected: How to create a complete web app in Foundation for Apps

This content is password protected. To view it please enter your password below:

Foundation for Apps – The Undocumented Process for a Dynamic Web App

Foundation for Apps is a new web app framework built around AngularJS that is meant to make creating web apps or prototypes to be simple, quick, and easy for a broader audience than a self-built framework. It succeeds in many respects, but its documentation is missing vital information about the specific changes Foundation makes to AngularJS. Many of the basics of Angular don’t work in Foundation out of the box, but the functionality can be replicated if you know the undocumented features of Foundation for Apps. This article is meant to make those features much more obvious & better-understood.

Getting Started

First, follow the thorough install process on the readme here: https://github.com/zurb/foundation-apps /client/assets/ is where your images, SCSS files, webfonts, and other assets will go, but that does not include anything you add with bower and include in your gulp file to be added to the compiled site, such as angular modules.

Open client/assets/js/app.js – this is your most important file. Controllers, directives, modules…
Set html5Mode parameters enabled & requireBase to true /client/index.html is the overall template for your app. It should include anything that persists on all pages, such as a main menu. /client/templates/ is where you’ll be defining each of your pages with one .html file each.

To add partials (view code that may be present on multiple pages but not all, such as a sidebar), create a folder in /client/ called partials and make a new .html file for each partial you need.
To include a partial in your site, use ng-include:

/gulpfile.js is where your gulp tasks are defined. These include build, & server, but each sub-step is defined as well.

If you ever have an error in your app.js during complilation & minification, npm start ceases to continue updating your app.js file in the main application when you continue saving it. When this happens, you’ll have to cancel (ctrl+c) your terminal task and restart it with npm start

Adding Dependencies

Find line 4 of app.js:

angular.module('application', [

This is where you define your dependencies; you can add any angular module you need. In this instance, let’s install nvd3 Chart Directives so we can easily make charts later on.

Make sure the last of the ‘foundation’ entries ends in a comma, then add a line and enter your module’s name in single quotes, which should be in its documentation:


To add your dependency’s files, make sure your terminal is in your app’s base folder, and use bower like this:

bower install nvd3ChartDirectives

Then, depending on what files from that module you need, add references to the module’s files in your gulpfile.js :
Add JS files to a new line before the 'app.js' entry in line 39, in the same format but ending with a comma:


Add CSS files to the gulp 'copy' task in the same format as the existing entries:

// nvd3 CSS

Using this method, you’ll also need to add a link in your /client/index.html head to the newly placed CSS file.

<link href="/assets/css/nv.d3.min.css" rel="stylesheet" type="text/css">

Adding a custom controller

To add a controller for one of your pages, in app.js after your dependencies, add a standard AngularJS controller line, with these specific variables included:

.controller('CategoryCtrl', function($scope, $log, $state){
// Controller code here

$scope enables you to pass data to your page – for instance, this code lets you use the greeting variable in your view.

$scope.greeting = 'hello';

$log enables you to log information to the console in standard AngularJS fashion, as seen in the docs https://docs.angularjs.org/api/ng/service/$log $state is a variable special to Foundation for Apps, and it allows you to access URL parameters. This is very important and currently impossible to find in the documentation.

In your controller, you can add data and methods to the page which it controls.

To set a page to use the controller that you created, rather than the default empty one that Foundation for Apps creates for you, add the name of the controller in your definition area of the page’s template html file:

name: categories
url: /categories
controller: CategoriesCtrl

Miscellaneous Notes

Within an ng-repeat loop, you can access the loop’s key with $index.

Regex to match all _gaq.push function call instances

Potential usage: grep search/replace for a site full of Google Analytics to migrate to Universal Google Analytics.

Matching Regex for all instances of _gaq.push

/_gaq\.push\(\['_[^']*'(,? ?[^,(\]\);)]*){0,4}?]\);/g

Play with it here: regexr.com/38pp5

FFMPEG encoding settings for web video

Choice settings for web video in 3 formats (fallbacks for various browsers)


ffmpeg -i [path-to-video] -vcodec libx264 -preset slow -profile main -crf 25 -acodec libfdk_aac -ab 64k [new-video-name].mp4

Adjust the crf and ab settings to suit your quality/size needs. crf is inversely related to the quality (0 is best).


ffmpeg -i [path-to-video] -codec:v libvpx -quality good -cpu-used 0 -b:v 500k -qmin 10 -qmax 42 -maxrate 500k -bufsize 1000k -threads 4 -vf scale=-1:480 -codec:a libvorbis -b:a 128k [new-video-name].webm

Adjust quality to suit your needs: best, good or realtime.


ffmpeg -i [path-to-video] -vcodec libtheora -qscale 5 -acodec libvorbis -ab 128k [new-video-name].ogv

Adjust Qscale to suit your needs – 10 is highest quality, 0 is lowest.

Equalize heights of elements with jQuery

jQuery function to equalize heights of a set of elements.
HTML structure for example call: div.equalize>div*4

Little List of Best Hex-Code Words (6 Letters)

Preload an array of images by data attribute

Interview for upcoming book

Here’s a transcript of my interview with Lance Redgrave for his upcoming book, Cunningly Clever Business Online.

Engineering for the web – why is it important?

What are the most important factors that should be considered when engineering a website/platform?

First you need to determine the balance between features and budget. Maintainability, extensibility, performance, and polish are all factors that are easy to forget without proper planning. After you set a plan taking all variables into account, the most important factor is in controlling the scope of the project. It’s easy to acquiesce to a client’s suggestions if you’re not accustomed to being the “expert” in the relationship.

If performance is a factor, how can you engineer for this?

From a technical standpoint, caching, minification of files, optimization of images, and making sure your server environment is sufficient are the most important considerations. It’s also vital to engineer the application to make as few queries as possible, to use few and small images, and consolidate your files so as to avoid making a lot of requests.

If reliability and stability are factors, how can you engineer for this?

Beyond having a good server, reliability and stability can only be guaranteed through extensive testing: testing under load, going through all actions a user will take, and testing edge-cases, to name a few.

What are the most common traps a web developer can fall into when building a website/web platform?

Not adequately defining a project beforehand is the top mistake by a long shot. Scope creep, new requirements, ending up with something the client doesn’t even want, and excessive stress for all people involved are a few consequences of imprecise scoping. Beyond that, a trap many fall into is focusing on less urgent, less important things when there are better things to be done at the moment. Following that line of thinking, projects can end up with great-looking buttons but a process that doesn’t convert users well.

What methods or techniques will you avoid, that others may not?

Crafting great HTML/CSS/JS takes a lot of forethought and knowledge beyond the basics. SMACSS, for instance is a great way to organize styling information, but most front-end coders tend to create style rules haphazardly. Using a tool like SASS enables you to keep styling for each functional element separate and quick to update.

What advice would you offer to a client, who was seeking to build a high performance website, but who had little knowledge on the subject?

Minimize image usage, compile all resources into as few files as possible, make few requests per page, utilize caching, minify files, and only use resources that you really need. Furthermore, the client may wish to utilize a content delivery network (CDN) to effectively decrease latency between distant users and the server.

Any others comment or advice?

Thinking and planning are indisputably the most important parts of a project, and often clients and agencies don’t make sure to consider all the angles as much as possible before beginning. Progress updates are essential if there’s any doubt about the end product or certain features, and it’s immensely important with any money-making or lead-generating website to continue with improvements over time. There’s a lot more potential in any website than simply creating a one-time website and never making updates, improvements, or additions.

Disallow File Uploads over 2Mb (or any size)

A quick and easy jQuery snippet to find all file upload inputs & make sure users don’t upload files that are too large.

Just include in your $(function(){ }); function