Forever we've been looking toward text editors to do the heavy lifting of our heavy lifting for us, at least if you weren't around since the infancy of GNU. One task that comes to mind is replaces occurances through a file. For me it's when I'm migrating a SQL production / staging database to my localhost for testing or when jumping into a project for the first time.

The treacherous tast of finding the domain and replacing it with my local path always becomes an endless task. Regardless if sublime text is the only program running, it still seems to bog down on a 15MB+ .sql backup. Mind you, this is the case on systems with ram varying from 4GB to 12GB, and still... pinwheel central.

Having the task of administering servers where I work, Vim and I are no longer aquaintances. We've made our everyday encounter into a friendship. With a friendship, you tend to rely on said friend more and more. Whether it's a minute task of removing one line from a local file or creating a virtual host file on a virtual private server, you choose or have no choice to ditch sublime text because Vim is either more efficent or the only option.

Recently I have found how lightning fast Vim actually is. With much less resources to load, it's performaces gains leaps and bounds. Normally, you find yourself doing something like this:

Sublime Find and Replace

Don't bother with that anymore, especially if we're in the same boat and your sublime text takes a century to process the request. Instead, call upon your aquaintance, friend, best friend, or lover: Vim. Vim is fully capable of doing this. How capable you may ask? This capable:



What Does This Do?



Go ahead, test it out. It's literally instant. At the bottom where you run your Vim commands, you'll notice that it will output the occurances and lines which it found and replaced. Much like sublime text, just more handy, and much faster.


Structuring a front end application is seamless when following an MVC pattern such an Angular's. But there's even a way, such as with backbone, to namespace your applications so that they're clear, concise, and meanwhile preventing a cluttered global scope.

Declare Your Application



What we first do is declare a variable, F1 which will be our namespace. We also name our module the same name as our variable for internal angular namespacing. Within this module, we pass an array containing 3 dependencies of our main application module. Each dependency aside from ngRoute is a property of our application variable, F1.

The API



Here we declare a property of F1 called api that we will set to an angular factory. We call the factory API since it's an interface for the free, public, and key-less API, Ergast. An API which provides a multitude of F1 racing information in XML or JSON.

This factory accepts the $http service which angular facilitates communication with JavaScript's XMLHttpRequest and JSONP. We will utilize this factory to return a static class which will in turn interface with Ergast's API.

Our first method getDrivers will get a collection of drivers from the 2014 season and their respective statistics.

Our second method getDriverDetails will get an object of details related to a driver's ID number.

Our third method getDriverRaces will get a collection of races of a driver by a driver's ID number.

The Controllers

For our controllers we have one for all drivers and one for a single driver. We'll start with the drivers controller.

Drivers:



For our drivers, we will create a property called controllers which will then have an angular controller added to it using the method. This, like most angular patterns accepts a name and a function which will contain the controller's logic. For the name, we go with a conventional name, driversController. For the function, we pass $scope and our API factory. $scope is a local object to each individual controller which we can dump all relevant data into.

Inside our controller, we declare a few variables. nameFilter, drivers, and searchFilter.

The nameFilter will be an angular model that we will use to filter driver's names.

drivers will be the object of drivers from the API call.

To utilize our nameFilter model, we declare the function searchFilter which will check the nameFilter model against a regular rexpression using the driver's first and last name.

Finally we utilize our API factory's method getDrivers. Upon success of the ajax call, we access the driver's collection within the data received and set it to our $scope property drivers.

Driver:



For our last custom dependency, we have our driverController. This controller has three local $scope properties, id, races, and driver. The function accepts $scope, $routeParams from our ngRoute dependency, and our API factory.

We utilize the angular router to grab the url parameter, id and set it to id.

For races we declare an empty array which will accept a collection of races from the API.

Our driver is set to null and eventually set using our API factory.

The first factory method, getDriverDetails, has the id from the url passed to it. Upon success we set the driver property to the data within the returned object.

The second and last factory method, getDriverRaces, also accepts the route parameter id and upon success populates races with the races within the returned data.

As you can see, angular is quite easy as it uses great JavaScript methodologies of factories, modules, and dependency injection. Not only is it easy and built well, we can utilize the JavaScript that we already know to organize our modules into a readable and structured applications. You can always check out the sample app on github.


Welcome to my thoughts. I've never had a blog aside from a tumblr, so I thought I would use it as practice to build a static one :). You can find rants, tutorials, or maybe even news here, or maybe you won't, who knows... Only time will tell and it's on our side, mostly.

In any event, comments will be here one day. Patience is a virtue, my friend.


Vim - Faster Find and Replace

Modular Angular.js

Hello World