Integrating Bower packages with Middleman

Using bower packages in Middleman is simple because of Sprockets. We only need to setup Sprockets to lookup the bower_packages folder along with the defaults.

To do this add the following to config.rb

after_configuration do
  sprockets.append_path File.join "#{root}", "bower_components"
end

After that you should be able to require or import any stylesheet or javascript from bower_packages.

Integrating Bower packages in rails

Now that we know what Bower is, we are going to use it for managing front-end packages in Rails applications. We will do this in two steps.

First, you have to change where Bower downloads it packages to vendor/assets. To do this add a .bowerrc file to the application directory as:

{
    "directory": "vendor/assets/bower_components"
}

The second step is to tell Rails Assets Pipeline to add the vendor/assets folder to it’s lookup directories. To do this change config/application.rb to contain this line:

config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')

Finally you are able to require Bower packages in Sprockets manifest files. For example for foundation it would look like this:

//= require foundation

Enjoy.

Bower Primer – A simple up and running tutorial

Bower is a package manager for the web, developed by Twitter. It is to HTML/CSS/JS what bundler is to Ruby. Let’s take a look at how we can use it.

The easiest way to install Bower is using NPM running in the terminal: npm install -g bower

The basic workflow is simple, create a bower.json file in the root application directory. Next set a key with the application name and a dependencies key which lists all the packages to install. Example file could look like this:


{
    "name": "example",
    "dependencies": {
        "normalize-css": "*"
    }
}

Run bower install

By default Bower downloads all packages to bower_components in the main directory. If you want to add another you should edit bower.json, add another package and run bower install again.

The second most used command is bower update which updates packages to the one specified in bower.json. Using * will update the package to the latest version available.

Last but not least bower search. Like it’s name suggests it finds packages in the Bower Registry. you can also browse the whole registry from the web index.

Hello again

OK, this is something i’ve been planning to do for some time on, take on blogging again, rebuild my personal brand, get a refresh from my old site.

Long ago, I had this domain name, but was focused on other things and let it expire, and now, I wanted to have it back and it was available. It only means that I am the one and only Wilbur Himself and this domain belongs to me.

I will try to use this site as my go-to for writing about anything. I am a developer and thus my writing has been focused on that, but I have a lot of other things to write, work to showcase, pictures to show that don’t fit in a developer oriented blog. I plan to post frequently and in english.

So this is it.