In Ember, your state is separated from the UI inside models. But, often you want the state of your models to be represented visually in the UI via dynamic class names. Make it happen with Ember.Views.Use an Ember.ViewA view will function as the translation layer between the state of your models and ...

File input fields are notoriously painful to style. Here are a few quick tips to that will save you some dead ends.The Problem with File InputsFile inputs are inconsistent to start with. They differ even in their native form across all browsers. They also have internal elements that are not individu...

"So Good They Can't Ignore You" is written by Cal Newport. He rejects the idea of following your passion in order to find the work you love. Instead, he suggests the accumulation of career capital.What follows are the main sections or rules of the book with a few of my takeaways each. The man is obv...

Usually attributes of your Angular controllers are not namespaced. But you can namespace them. But you might not want to.Angular Controllers Usually Attach Attributes to ScopeUsually attributes in an Angular controller, such as functions and variables, are attached to the $scope object. That looks l...

Ember Views are used for event handling and creating reusable web components. To make them useful and interesting, model data needs to make it into and out of the view. Here is an example of how this works.Define Your ViewIn our example, I'm making a simple dice rolling game. I want to use a view to...

In CoffeeScript there are two different types of arrows for defining functions: arrow (->) and fat arrow or hash rocket (=>). Usually, you'll use the regular arrow. But sometimes you'll want the special behavior of the fat arrow.Function BindingIn JavaScript, the keyword this within a function refer...

Angularjs has some sweet built-in directives. Sometimes it can be confusing when to use the curly braces around expressions in directive attributes and when not to. Here are a couple rules.CurliesBy "curlies", I mean curly braces. The difference of when to use or not use them looks like the followin...

Did you know that Mobile Safari and other mobile browsers are delaying your click events? If you've been testing your mobile site, and it feels sluggish in Mobile Safari, this could be one of the reasons. Disable the click delay and rejoice at a bit more snappy response.Sandbagging?Why would a brows...

ngStyle is the directive used to set inline style attributes with AngularJs. Most of the time, it's straightforward to use. background css attributes can be just slightly trickier.ngStyle ObjectsThe ngStyle directive requires an object for input. The object key is the css attribute name. The resulta...

Mongoose is an object modeler for MongoDb. It has a particularly great feature, called population. Population allows you to include other objects in a specified object. It makes the process a lot easier and more automatic.Document DesignDocument databases provide a lot of flexibility in how data is ...

When making software, sometimes we want everything we can imagine at once. We want the software to be perfect -- then we'll ship it. Learn to procrastintate. You might ship more, and you might like the the eventual outcome better.Worthless SoftwareSoftware that sits inside of your git repo, unreleas...

Setting text elements on a page to be a specific height is usually straight forward. Here are the specs for a couple textual situations you'll encounter.Note: Experiments were done in Chrome 27, but this should be pretty consistent over browsersText in a DivText is likely most common just plastered ...

Ember's convention of template hierarchy is very specific. Learn it once, and you'll know it every time.Note: Code examples use Emblem templates and CoffeeScript. Vanilla Handlebars and JavaScript would work just as well.OutletsEmber templates make use of a special helper called outlet. You can have...

Ember is very specific about what version of Handlebars it requires. This is probably good, but it's also a pain to work with as different versions of the two libraries are released independently. There are a few good tools to help us out.Released IndependentlyIn a prime example, recently there was ...

Ember makes use of the wonderful Handlebars templates. These templates, in order to be performant, must be precompiled. Based on the Ember docs, it's not abundantly clear how this is to happen. Here's a solution that works well.Ember Docs for PrecompilationEvery official Ember doc will put templates...

Code that utilizes setTimeout or setInterval becomes asynchronous. Jasmine has some nice helpers to make your test synchronous again.Code Using setTimeoutAny Javascript code that wants to delay certain actions or give intervals between actions will use setTimeout or setInterval respectively. There a...

Yeoman is great developer tool that will help you generate a project format that is easy to get up and running quickly. Out of the box, Yeoman only generates static sites. But, with a few small tweaks, you can get it running on an app server, Nodejs, and up on Heroku.New Project With YeomanTo instal...

LiveReload is a wonderful tool/strategy for being able to develop websites more quickly. You can make a change and see it immediately shown in the browser without requiring you to manually refresh. To do this in NodeJs with Express, you'll need just a few packages.LiveReload ExpressIf you're doing a...

Xip.io is a DNS wildcard domain that was initially created for use on Ruby projects. But its application is desirable across platforms. Recently, I wanted to use Xip.io on a NodeJs project. It was easy to make happen.Update: "Proxying"After having a handful of problems with these home-grown proxies,...

There are a couple ways to make cross domain requests from a client browser. One method is called Jsonp or Json with padding. The AngularJs library makes this really simple.Web Server SupportFirst of all, your Jsonp request will be worth nothing if the server you're requesting data from does not sup...

You enjoy your work more when you're having fun, right? I wouuld think that much would be obvious to us all. And yet, we need reminded now and again what really makes us tick. Whether our endeavor is serious or purely for entertainment; Whether the cause means a lot to us or we are just trying to pa...

When your app requires users to be using the https protocol to make requests and get responses, it's helpful to have an automatic redirect so the user is always in the right place. Here's how to do that for a Node Express app on Heroku.Secure Express RequestsThe Express request object has a bunch of...

By default, Sinatra knows how to serve up a rendered html page. With a slight tweak, we can make it spit out Json too!Data Format of the WebJson is my favorite data format for web applications. Really, who wouldn't want their webservice to expose Json? It's mucho useful.First, add a line to the Gemf...

There are simple mechanisms for passing data from your web page to AngularJs. One directive is called ngInit. You may well need it.The Use CasesThe use cases don't make a ton of sense without a concrete example. There are several ways to implement even the most simple example. If the solution doesn'...

Finding an element in context means that I can select a node from the dom within a certain range -- specifically either a node or any of its children nodes. Is there an "Angular way" to do this?Angular's Element() APIAngular provides jqLite for doing basic CSS selections. As far as I can tell, it do...

Sinatra is nice because it's super lightweight. This will allow you to make it do exactly what you want, nothing more. This is the opposite of Ruby on Rail's convention. Likewise, it takes just a bit more configuration to make Sinatra serve CoffeeScript as compared to Rails.Sinatra and CoffeeScriptS...

Jumpstart Lab offers a Ruby training. I recently attended. I had a great experience and learned a lot in my first real introduction to Ruby and Ruby on Rails. I would highly recommend the course. Here are a few more details on my experience.FormatLengthJumpstart sent a great instructor, Franklin Web...

Sintra is a light web server that's easy to start writing Ruby on. Coming from Node/Express, I feel quite at home there. Slim also feels like another JavaScript-world templating language, Jade, that I've had good experiences with. Slim makes for quick templating and feels quite nice compared to ERB ...

When you setup a new Rails project, you'll have a single layout file which has a single default yield block. This will soon be inadequate, and you'll want another. Here's how to setup multiple yield blocks per ERB template.Layout FileBy default, Rails will create a file at:app/views/layouts/applicat...

Rails provides a powerful mechanism for preparing your site's static assets for the web. It's called the asset pipeline. True to Rails, it has sensible defaults. Also true to form, it's not immediately clear what's required to change from the defaults.Multiple CompilersThe asset pipeline has the abi...