Search

Pony Foo

Ramblings of a degenerate coder

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

lightning-bolt.jpg

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!

browserify.png

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.

browsersync.png

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

Building High-Quality Front-End Modules

reading time: , published

Lately I've been developing front-end modules solely based on Browserify, the latest being rome. Rome is a calendar component that has an extensive feature-set. I've compiled a list of highlights below.

  • Date and time picker
  • Fancy demo site
  • Use it on its own, or dedicated to an input
  • Concise API and sensible defaults
  • Date range just means validating two calendars against each other
  • Doesn't rely on jQuery
  • Works on IE7+

Rome wasn't conceived with all of these features out-of-the-box, though. When I released it for the first time, it was just a native date-time picker with a reasonable API, but it complete lacked IE support, date validation, and the ability to be used without an input field.

colosseum.png

Rome wasn't built in a day.

Read the full article