Pony Foo

Ramblings of a degenerate coder

Free sample: JavaScript Application Design

reading time: , published

My first book, JavaScript Application Design is in the final stretch and due to come out very soon! The code samples are finalized and publicly available on GitHub. Here's some free content in anticipation for the book launch.

You can take a look at the first chapter for free which discusses the Build First approach at a high level, and sets the stage for the rest of the book. You can also get Appendix D for free, although Manning will ask for your email address in exchange. If anything, you must take a look at the code samples on GitHub. There's tons of them, and they cover a wild variety of topics!

JavaScript Application Design: A Build First Approach

Read the full article

Critical Path Performance Optimization at Pony Foo

reading time: , published

This article aims to cover the performance gains I've attained in the redesign of Pony Foo, deployed last week to production. I'll be covering a few different topics throughout the article. I'll explain what each optimization entails, the reasoning behind these choices, how to implement the solution, and the observed improvements. We'll cover the approaches listed below. Note that these are sorted in terms of potential gains.

  • Moving away from client-side rendering
  • Backing your application front-end servers with nginx
  • Optimizing images
  • Deferring non-critical asset loading
  • Inlining critical assets
  • Ditching large libraries and frameworks


If this article feels too "out of the blue" to you, maybe you'd like to read the introductory email that was sent out to subscribers a few days ago.

Are blazing fast web applications of interest to you? Read on!

Read the full article

The Conventional Front-End

reading time: , published

Conventions are a great thing. Frameworks such as Ruby on Rails and ASP.NET MVC are good examples of conventional MVC implementations. Conventions are essentially sensible defaults. For example, when you call return View() without any arguments in ASP.NET MVC, the framework does the reasonable thing: render the default view that maps to the controller action. This type of behavior can be observed throughout the framework.

When it comes to the front-end, conventions aren't as popular as I'd like. In this article we'll take a look at measly, a conventional layer on top of XMLHttpRequest you can use to get started in the conventional world.

Read the full article

A Gentle Browserify Walkthrough

reading time: , published

Building modules for the front-end has become an increasingly easy problem to solve. Back in the nineties we had our Java applets, our <MARQUEE> and <BLINK> tag combinations, and those beloved <CENTER> tags. Oh and we were mostly developing on Front Page. Anyways, time to wean off the nostalgia. Let's focus.

This time around I want to focus on Browserify, a lean build step you can take to obtain CommonJS modules in your browser today. You have no idea what CommonJS modules are or why you need them? Keep on reading!


CommonJS is a module format for JavaScript, widely adopted by the Node.js community and popularized by npm, the package manager that's bundled with Node. In this article you'll learn about CommonJS and how you can bring those same modules to your client-side code, using Browserify and maybe a build tool to automate your processes.

Browserify is one of those tools that the open-source community almost takes for granted, whereas it's overlooked by the vast majority of companies, hardly making its way into projects in a professional setting. Not all is lost, sometimes big companies do the right thing and use it to develop their open-source projects.

If you're still stuck with AMD modules and their sheet-piles of documentation at work, then maybe you should consider Browserify for a change.

Read the full article

JavaScript Quality Guide

reading time: , published

I've recently created a JavaScript Quality Guide, and I wanted to share it on Pony Foo as well. The latest version can be found on GitHub. As all-things-style-guides go, it's super opinionated so take it with a pinch of salt.

Read the full article

A BrowserSync Primer

reading time: , published

BrowserSync is a browser testing tool, similar to LiveReload. It also synchronizes across browsers and is going to provide HTML injection in the very near future, alongside with the CSS and JavaScript injection it already features.


This tool enables rapid continuous development by saving you the trouble of refreshing the view you are debugging whenever you make changes to the JavaScript or CSS code.

You won't really be able to grasp how valuable this is until you give it a try for yourself. This primer aims to encourage you to do just that!

In this article I'll show you how to use it with your favorite tools. Grunt, Gulp, npm run and nodemon.

Read the full article