Kaminari provides easy pagination in a rails app. It's great to use. We'll make it better by adding a little function to your controllers to provide useful pagination headers.Pagination from KaminariInstallation is easy with an addition to your Gemfile:gem 'kaminari'and an install:bundle installNow,...

react-router provides great route handling with route params and query params. Flux provides a pattern for building React apps, including a pattern from providing data to your components. Here's a straightforward way to make route changes trigger data changes in your components.Note: Code here refle...

D3 has operations for class name manipulation that you're used to from jQuery. These include addClass, removeClass, hasClass, and toggleClass. They just go by different names.selection.classedThe magic all comes in the form of the selection.classed method from d3. It is going to be the api that is u...

The default serialization of error states in Rails might not be what you want for your app. In that case, it'd be worth knowing how to write a custom serialization format for your needs. In my case, I am trying to match the JSON API format for errors. Here's a potential implementation...JSON API Err...

As soon as we begin to write a test for our code, it is natural for us to think that we are doing a good thing, and often, we are. Yet, I believe there are times that we’re writing tests when we’re hurting more than helping — and, of course, this is not on purpose. To clarify, I’m an advocate for te...

For APIs, it seems more and more data is making its way into the HTTP headers. Recently, whilst adding a Link header, for paging data, into the HTTP response, I realized that my browser code couldn't see it. Who was the culprit? CORS, of course.Headers in BrowserIt was just another day, and I was de...

In React, you're always making components. Sometimes components are standalone. Other times, you'll have components that can nest children components. Sometimes you'll want to send properties to the children components from the parent as often as a doting parent wants to send packages to a child mis...

In React, you can setup components that fetch their own data and set their own state with that data. Because of the async nature of data fetching, you’ll have to make sure to keep things cleaned up to avoid the error of trying to set state in an unmounted component.Updated for React 0.13. See belowR...

Make broccoli compile your emblem templates so they're ready for your ember app.The LibrariesBroccoli builds your assets quickly. It makes heavy use of caching so it only has to rebuild affected subtrees when files change. Emblem is a significant whitespace version of Handlebars templates, similar i...

When you specify dependencies for you app via Bower, some of the packages might rely on different versions of the same library. You will have to resolve what version of libraries your app actually wants. In other words, you break the tie. But you don't want to break it every time, so save your choic...

Broccoli.js is good at building assets. But now that they're built, how does one use them on a webpage?Broccoli ServeBroccoli has a great feature of having assets cached at every step in a list of transforms. This makes it quite fast. It can selectively reprocess only the subset of assets that have ...

In a long-running app such as you might build in Ember, it can be useful to detect when the window is closing. This is easily detected with JavaScript, and there are easy places to put the code in your Ember app.beforeunloadThe window event that you want to listen for is beforeunload. You might bind...

There are a few changes required to convert your Ember app from using EmberFire to Fireplace. Here are a few that I found to be required. There are probably more.Your OptionsEmberFire and Fireplace both provide an API for you to integrate your Ember app with a Firebase backend. You don't need either...

Express-validator is a middleware for Express on Node.js that can help you validate user input. It's a lovely library. Here's a pattern for testing code that uses it.InstallTo get express-validator in your project, install with npm:npm install express-validator --savePlug in the MiddlewareTo use the...

Rails 4 introduced the pattern of strong parameters at the controller layer. As a best practice, you will explicitly list the parameters that an endpoint should accept in payloads. Arrays are specified just slightly different.Strong ParametersYou don't want those blackhats to update any field they w...

Exercism.io has a great set of JavaScript exercises. They could be made better by a better test setup and runner. I've created a small grunt-init template to help in that setup.Exercism.ioFor those unfamiliar, Excercism.io is a great tool that helps coders and potential coders learn and expand their...

Once upon a time, I could setup DNS super easily on Heroku using their Zerigo DNS addon. Lately, I tried again using the same pattern and failed. Here's an updated step-by-step guide.Back in the DayIt used to be that all you had to do was setup the nameservers on your domain registrar, add the Zerig...

In Ruby, it's common to see new methods defined dynamically or on the fly for your class. And who doesn't want to have a piece of that metaprogramming?An ExampleFor example, I just finished an exercism code exercise where I felt like there was a fair bit of code duplication. I had a bunch of conveni...

I love Ruby's syntax for method calls. The syntax for calling dynamic methods is pretty nice, and it's easily mastered.send methodThe send method is one of the best and most basic ways to call a method dynamically on your object. Let's say we have an object with multiple methods like this:class Fezz...

Exercism.io is a fantastic site and tool that provides a wealth of daily code exercises. If you want to learn to be better in a language, it's a great resource to do exercises and receive feedback.OriginExercism.io was introduced to me by Franklin Webber of gSchool and JumpStart Labs fame. He and hi...

Have you ever wished you could save a gem to your Gemfile straight from the command line? I wish Rubygems had this built in, but it's easy to add. After all, there's a gem for that.From npmComing from Node/Npm previous to Ruby/Rubygems, I wished I could do something like this:npm install express --s...

Interactive debugging can sometimes be faster and more effective in helping you code than a puts statement. It's easy to get interactive debugging in Ruby or on Rails with the help of a nice gem.No IDE RequiredThere are Ruby IDEs that provide interactive debugging capabilities. My favorite is RubyMi...

When you change routes in Angular, the page title doesn't change automatically, but this can be done rather simply.Servers and ClientsClient-side routers are pretty awesome. A new url is pushed into the browser's history to represent the particular resource that pure client code has produced and dis...

When building a chart such as a bar chart in d3, you'll want an evenly divided space on your x axis. You could divide the space up with your own manual calculations, accounting for space available, bar width, and inner and outer padding. Or, you could have d3 do the calculation for you via a rangeBa...

Starting tends to be one of the biggest hurdles that we must jump in order to find out what awesome we really have inside of us and let it shine. In the book Start by Jon Acuff, he gives great motivation and tactical steps for starting to find our awesome. It's a hilarious, inspiring, and practical ...

If you want to make a gauge chart in S3, you'll need a needle on your gauge. It's not hard to draw a triangle, but here's the extra work to rotate it.The Gauge ChartI'm not sure what you call this kind of chart, but I call it a gauge. It pretty much looks like a speedometer or a pressure gauge. I'm ...

Rails asset pipeline allows you to use erb helpers in your CoffeeScript. You'll still need to bring get these files into Karma runner. It's really easy. You just need to get to know your Karma config options.erb in JavaScriptsWhy in the world would you want to use erb helpers inside your script file...

JavaScript makes mixins inherently easy. Mixins are a native feature of the language without calling it that. Here are a few methods for making this happen.Attach a PropertyYou can attach a property to a Javascript object at any time. You don't need to monkey patch it. It doesn't need to be packaged...

Bower is a client-side or browser package manager. It will handle your 3rd-party packages that are registered with the service. To make it more useful, you can package up some of your own code and create a component to install with Bower.Prepare your PackageTo prepare your code to be a Bower package...

Directives with isolate scope do not inherit their scope from their parent. Thus, the pattern to test them is slightly different.When testing a directive, you'll often want to setup some fixture element to attach your directive to. This will act as the DOM that you will compile with scope. At that p...