bower 101

Bower v.s. Gulp v.s. Grunt

Gulp and Grunt : automate things like mimify CSS, minify HTML. ( ref : https://dsin.wordpress.com/2015/10/28/gulp/ )

Bower : managing the client-side libraries in your projects.

Example : install latest version of Bootstrap. If a library depends on other libraries (Bootstrap’s JS relies on jQuery, for instance), Bower helps manage that tree.

ref : http://stackoverflow.com/questions/34287542/what-are-the-differences-between-grunt-gulp-js-and-bower-why-when-to-use-the

installation

$ npm install -g bower

create bower.json

 $ bower init
? name test
? description test
? main file test
? keywords test
? authors Phongsathorn Eakamongul <phongsathorn.eakamongul@rockyou.com>
? license MIT
? homepage
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being ac? would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes

{
name: 'test',
authors: [
'Phongsathorn Eakamongul <phong.ek@gmail.com>'
],
description: 'test',
main: 'test',
keywords: [
'test'
],
license: 'MIT',
homepage: '',
private: true,
ignore: [
'**/.*',
'node_modules',
'bower_components',
'test',
'tests'
]
}

update bower.json

bower install PACKAGE --save

install from bower.json

bower install

dependencies v.s. devDependencies

devDependencies = dependencies that are only needed for development of the package, e.g., test framework or building documentation

default installation path

bower_components/

change the installation path

.bowerrc

{

"directory": "whatever/subdirectory/it_is"

}

Normally, it is

{

"directory": "vendor/assets/bower_components"

}

Changing assets path in the config/application.rb

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

ref : https://bower.io/docs/config/

bower.json references

https://github.com/bower/spec/blob/master/json.md

Example bower packages

https://github.com/jquery/jquery

https://github.com/rails/jquery-ujs

https://github.com/angular/bower-angular

https://github.com/angular/bower-angular-resource

https://github.com/angular/bower-angular-sanitize.git

https://github.com/angular/bower-angular-messages.git

https://github.com/angular-ui/angular-ui-router-bower

https://github.com/picardy/angular-fontawesome

https://github.com/oblador/angular-scroll

https://github.com/pitr/angular-rails-templates

https://github.com/danielcrisp/angular-rangeslider

Advertisements

[ rails ] sprockets

Overview

Ruby library for compiling and serving web assets. It features declarative dependency management for JavaScript and CSS assets, as well as a powerful preprocessor pipeline that allows you to write assets in languages like CoffeeScript, Sass and SCSS.

Usage

app/assets/javascripts/application.js

//= require jquery

//= require angular

//= require_tree ./shared/analytics

DirectiveProcessor preprocessors reading the above sprockets directives.

require_tree path works like require_directory, but operates recursively to require all files in all subdirectories of the directory specified by path.

 

app/assets/stylesheets/admin/admin.scss

@import 'whatever/whatever';

 

ref : https://github.com/rails/sprockets,

https://github.com/rails/sprockets/blob/master/guides/end_user_asset_generation.md

[ ActiveModel ] errors.full_message

class Person
validates_presence_of :name, :address, :email
validates_length_of :name, in: 5..30
end

person = Person.create(address: '123 First St.')
person.errors.full_messages
# => ["Name is too short (minimum is 5 characters)", "Name can't be blank", "Email can't be blank"]

Adding your own error messages

errors.add(:name, "cannot be nil")

ref : http://apidock.com/rails/ActiveModel/Errors/full_messages,

http://apidock.com/rails/ActiveModel/Errors

[ rails ] lib files

config/applications.rb

config.autoload_paths +=&nbsp;[Rails.root.join('lib')]

lib/whatever.rb

class Whatever
end

lib/whatever/whatever2.rb

class Whatever::Whatever2
def initialize(var1, var2)
end
def callmethod1
end
end

USAGE

Whatever::Whatever2.new(var1, var2)
.callmethod1

ref : http://stackoverflow.com/questions/19098663/auto-loading-lib-files-in-rails-4

[ ActiveRecord ] includes

overview

Eager loading and Lazy loading

 

declaration

Client model has the relation has_many :address
Address model has the relation belongs_to :client

1 + N queries ( eager loading ) 

clients = Client.limit(10)

clients.each do |client|
puts client.address.postcode
end

The above code executes 1 (to find 10 clients) + 10 (one per each client to load the address) = 11 queries in total.

Solution to reduce to 2 queries ( lazy loading )

clients = Client.includes(:address).limit(10)

clients.each do |client|
puts client.address.postcode
end
SELECT * FROM clients LIMIT 10
SELECT addresses.* FROM addresses
WHERE (addresses.client_id IN (1,2,3,4,5,6,7,8,9,10))

ref : http://guides.rubyonrails.org/active_record_querying.html#eager-loading-associations,

https://www.spritle.com/blogs/2011/03/17/eager-loading-and-lazy-loading-in-rails-activerecord/

[ Pundit ] policy_scope

def index
@posts = policy_scope(Post)
end

is equals to

@posts = PostPolicy::Scope.new(current_user, Post).resolve

declaraction

/app/policies/post_policy.rb

class PostPolicy
def index?
false
end

def create?
user.admin?
end
class Scope

def initialize(user, scope)
fail Pundit::NotAuthorizedError, 'must log in' unless user

@user = user

@scope = scope

end

def resolve

scope

end

end

end

NOTE : that the @post will be returned to the controller, so we can do something like

@posts = policy_scope(Post).reorder(created_at: :desc)

ref : https://github.com/elabs/pundit