Screencast: Copycopter

Copycopter ist eine Plugin um Texte in Rails auf einfache Weise zu bearbeiten. Erst kürzlich wurde es von Thoughtbot als OpenSource freigegeben und steht nun somit allen Interessierten zur Verfügung. Ryan zeigt diese Woche wie es installiert und in eigenen Applikationen benutzt werden kann.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

terminal

[bash]
heroku login
git clone git://github.com/copycopter/copycopter-server.git
cd copycopter-server
heroku create –stack cedar
bundle install –without=test # if heroku command fails
git push heroku master
heroku run rake db:migrate
heroku restart
heroku run rake copycopter:project NAME=Store USERNAME=ryanb PASSWORD=secret
heroku open
[/bash]

Gemfile

[ruby]
gem ‚copycopter_client‘, ‚2.0.0‘
[/ruby]

config/initializers/copycopter.rb

[ruby]
CopycopterClient.configure do |config|
config.api_key = ‚8df4bc164dd6bc5574eb1efd0499ddcb‘
config.host = ’strong-dawn-1901.herokuapp.com‘
end
[/ruby]

app/views/products/index.html.erb

[html]
<h1><%= t "products.headline", default: "Browse Products" %></h1>
<em><%= t ".tagline", default: "We have what you need at a great low price." %></em>
[/html]

Screencast: Compass & CSS Sprites

Compass ist eine Ergänzung zu SASS indem es viele Benutzte Elemente noch weiter vereinfacht. Es werden z.B. vorgefertigte Mixin-Ins, Funktionen und mehr zur Verfügung gestellt. In diesem Screencast zeigt Ryan wie es verwendet wird und zusätzlich wie Compass für CSS-Sprites genutzt werden kann.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

Gemfile

[ruby]
group :assets do
gem ‚compass-rails‘
end
[/ruby]

app/assets/stylesheets/application.css.scss

[css]
@import "compass";
@import "compass/reset";
@import "layout";
[/css]

app/assets/stylesheets/layout.css.scss

[css]
h1 {
font-size: 28px;
font-weight: bold;
margin: 18px 0;
}

ul.horizontal {
@include horizontal-list;
}

@import "icons/*.png";
@include all-icons-sprites;

#nav_bar {
// …
@include background-image(linear-gradient(#5c5c5c, #111111));
}
[/css]

app/views/layouts/application.html.erb

[html]
<li><a class="icons-itunes" href="/itunes"></a></li>
<li><a class="icons-twitter" href="/twitter"></a></li>
<li><a class="icons-facebook" href="/facebook"></a></li>
<li><a class="icons-rss" href="/rss"></a></li>
[/html]

Screencast: Einführung in das Refinery CMS

Refinery ist ein CMS auf Basis von Rails und ermöglicht innerhalb kürzester Zeit ein lauffähiges System aufzusetzen. Wer schnell ein einfach bedienbares SMS aufsetzen möchte sollte sich dieses hier anschauen. Ryan führ in dieser Woche in Refinery ein und zeigt wie man damit einen Auftritt erstellt.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

terminal

[bash]
brew install imagemagick
gem install refinerycms
refinerycms piano_plus
cd piano_plus
rails s
[/bash]

config/initializers/refinery/core.rb

[ruby]
config.site_name = "Piano Plus"
[/ruby]

config/initializers/refinery/pages.rb

[ruby]
config.new_page_parts = true
[/ruby]

rails console

[ruby]
Refinery::Page.first.parts.create! title: "Banner"
[/ruby]

Screencast: Besseres Sass mit Bourbon

Bourbon ist ein Sass Mixin und stellt zahlreiche Funktionen für die Erstellung von Design-Elementen zur Verfügung. Dabei werden für die verschiedenen Browser auch die teilweise noch nötigen Prefixe verwendet. Ryan zeigt diese Woche wie es mit Rails zusammen verwendet werden kann.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

Gemfile

[ruby]
gem ‚bourbon‘
[/ruby]

app/assets/stylesheets/application.css.scss

[css]
@import "bourbon";
@import "layout";
@import "projects";
[/css]

app/assets/stylesheets/layout.css.scss

[css]
body {
margin: 0;
padding: 0;
background-color: #FFF;
font-size: 14px;
font-family: $verdana;
}

#header {
color: #FFF;
padding: 15px 100px;
font-size: 30px;
font-weight: bold;
@include linear-gradient(#777, #444);
@include box-shadow(0 0 6px 3px #000);
}

#container {
margin: 0 100px;
}

a {
color: #2D6DD2;
}
[/css]

app/assets/stylesheets/projects.css.scss

[css]
.project {
border: solid 1px #AAA;
margin: 20px 0;
padding: 7px 12px;
@include border-radius(6px);
@include transition(all, 500ms, ease-in-out);

&:hover { background-color: #F8FCCF; }

h2 {
margin: 0;
a { text-decoration: none; }
}
}

.new_project {
@include button(simple, #3FB344);
text-decoration: none;
font-size: 16px;
}
[/css]

Screencast: Einführung in Twitter Bootstrap

Twitter Bootstrap bietet ein Toolkit für die Erstellung von Webseiten, welches verschiedenste Elemente mitbringt und somit die Basisarbeiten vereinfachen soll. Es kann selbstverständlich auch in Rails-Applikationen eingesetzt werden und mit den entsprechenden Plugins wird auch hier dem Entwickler arbeit abgenommen. Ryan führ in diesem Screencast vor wie die Integration in Rails erfolgen und wie es verwendet werden kann.

 

Downloads in verschiedenen Formaten:

mp4
mp4
webm
ogg

 

Resourcen:

terminal

[bash]
rails new store
rails g scaffold product name price:decimal –skip-stylesheets
rake db:migrate
rails g bootstrap:install
rails g bootstrap:themed products -f
[/bash]

Gemfile

[ruby]
group :assets do
gem ‚twitter-bootstrap-rails‘
end
[/ruby]

layouts/application.html.erb

[html]
<!DOCTYPE html>
<html>
<head>
<title>Store</title>
<!–[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]–>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Some Store</a>
<div class="nav-collapse">
<ul class="nav">
<li><%= link_to "Browse Products", products_path %></li>
<li><%= link_to "Price List" %></li>
<li><%= link_to "Contact Us" %></li>
<li><%= link_to "Cart" %></li>
</ul>
</div>
</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="span9"><%= yield %></div>
<div class="span3">
<h2>About Us</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</body>
</html>
[/html]

app/assets/stylesheets/bootstrap_and_override.css.less

[css]
@import "twitter/bootstrap/bootstrap";

body { padding-top: 60px; }

@import "twitter/bootstrap/responsive";
[/css]

Screencast: ActiveAttr in eigenen Klassen verwenden

Die Entwickler von ActiveAttr sagen, dass ihr Plugin die Dinge zur Verfügung stellt, welche nicht von ActiveModel geliefert werden. Das Plugin bietet wirklich einige interessante Ansätze und erleichtert die Arbeit mit selbst-erstellen Modelen um einiges. Ryan zeigt in diesem Screencast wie es zum Beispiel in Modelen ohne zugehörige Datenbank-Tabelle eingesetzt werden kann.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

Gemfile

[ruby]
gem ‚active_attr‘
[/ruby]

models/message.rb

[ruby]
class Message
include ActiveAttr::Model

attribute :name
attribute :email
attribute :content
attribute :priority # type: Integer, default: 0

attr_accessible :name, :email, :content
validates_presence_of :name
validates_format_of :email, :with => /^[-a-z0-9_+.]+@([-a-z0-9]+.)+[a-z0-9]{2,4}$/i
validates_length_of :content, :maximum => 500
end
[/ruby]

rails console

[ruby]
m = Message.new(priority: 1)
m.priority
m.priority = 1
m.priority?
[/ruby]

controllers/messages_controller.rb

[ruby]
def new
@message = Message.new
end

def create
@message = Message.new(params[:message])
if @message.valid?
# TODO send message here
redirect_to root_url, notice: "Message sent! Thank you for contacting us."
else
render "new"
end
end
[/ruby]

Screencast: RABL – Ruby API Builder Language

RABL ist ein Templating-System für die Frameworks Ruby on Rails und Padrino. Es soll den Entwickler bei der Erstellung von JSON und Generierung von Documenten mittels ActiceRecords „to_json“ unterstützen. Besonders bei komplexen JSON Dokumenten bietet einige Helfer welche die Arbeit erleichtern sollen. In diesem Screencast erfahrt ihr wie die RABL DSL eingesetzt werden kann, um JSON und XML Responses in Rub-Applikationen zu estellen.

 

Downloads in verschiedenen Formaten:

mp4
mp4
webm
ogg

 

Resourcen:

Gemfile

[ruby]
gem ‚rabl‘
[/ruby]

config/initializers/rabl_config.rb

[ruby]
Rabl.configure do |config| config.include_json_root = false end
[/ruby]

app/views/articles/show.json.rabl

[javascript]
object @article
attributes :id, :name, :published_at

if current_user.admin?
node(:edit_url) { |article| edit_article_url(article) }
end

child :author do
attributes :id, :name
node(:url) { |author| author_url(author) }
end

child :comments do
attributes :id, :name, :content
end
[/javascript]

app/views/articles/index.json.rabl

[javascript]
collection @articles

extends "articles/show"
[/javascript]

app/views/articles/index.html.erb

[html]
<div id="articles" data-articles="<%= render(template: "articles/index.json.rabl") %>">
[/html]

Screencast: JSON Dokumente mit Jbuilder erstellen

Jbuilder (nicht zu verwechseln mit der Java IDE der Firma CodeGear, früher Borland) ist ein Gem zum Erstellen von JSON Dokumenten. Hierzu stellt Jbuilder eine DSL und Template Engines zur Verfügung, mit der auch komplexe Rückgabe-Dokumente erstellt werden können. Ryan zeigt in dieser Woche wie es installiert, integriert und verwendet wird.

 

Downloads in verschiedenen Formaten:

mp4
mp4
webm
ogg

 

Resourcen:

Gemfile

[ruby]
gem ‚jbuilder‘
[/ruby]

views/articles/show.json.builder

[ruby]
json.(@article, :id, :name, :published_at)
json.edit_url edit_article_url(@article) if current_user.admin?

json.author @article.author, :id, :name
# or
json.author do |json|
json.(@article.author, :id, :name)
json.url author_url(@article.author)
end

json.comments @article.comments, :id, :name, :content
# or
json.comments @article.comments do |json, comment|
json.partial! comment
end
[/ruby]

views/comments/_comment.json.jbuilder

[ruby]
json.(comment, :id, :name, :content)
[/ruby]

Screencast: Upgrade auf Rails 3.2

Letzte Woche erschien Rails 3.2 und bringt, wie wir schon berichtet haben, ein paar neue Features mit. Wie diese verwendet werden und wie ein Upgrade durchgeführt werden kann, zeigt Ryan in dieser Woche in seinem Screencast.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

Gemfile

[ruby]
gem ‚rails‘, ‚3.2.0‘
group :assets do
gem ’sass-rails‘, " ~> 3.2.3"
gem ‚coffee-rails‘, "~> 3.2.1"
gem ‚uglifier‘, ‚>= 1.0.3‘
end
[/ruby]

terminal

[bash]
bundle update
rails g model product_variation product_id:integer:index name ‚price:decimal{7,2}‘
rails g migration add_properties_to_product_variations properties:text
rake db:migrate
echo -d postgresql -T > ~/.railsrc
[/bash]

rails console

[ruby]
puts Product.order(:name).explain
ActiveRecord::Base.silence_auto_explain { Product.order(:name) }
Product.pluck(:name)
Product.pluck(:id)
Product.select(:name).uniq
Product.where(name: "Foo").first_or_create!
Product.where(name: "Foo").first_or_create!(price: 5)
"Product".safe_constantize
p = ProductVariation.new(color: ‚blue‘, size: 3)
p.color
p.size
p.properties[:color]
[/ruby]

config/development.rb

[ruby]
# Raise exception on mass assignment protection for Active Record models
config.active_record.mass_assignment_sanitizer = :strict

# Log the query plan for queries taking more than this (works
# with SQLite, MySQL, and PostgreSQL)
config.active_record.auto_explain_threshold_in_seconds = 0.5

config.log_tags = [:uuid, :remote_ip]
[/ruby]

config/test.rb

[ruby]
# Raise exception on mass assignment protection for Active Record models
config.active_record.mass_assignment_sanitizer = :strict
[/ruby]

models/product_variation.rb

[ruby]
store :properties, accessors: [:color, :size]
[/ruby]

Screencast: Private Pub für Realtime-Events

Privat Pub ist ein Gem mit dem Echtzeit-Events auf sehr einfach Weise erstellt und genutzt werden können. In diesem Screencast erfahrt ihr wie es in Kombination mit Rails verwendet werden kann.

 

Downloads in verschiedenen Formaten:

mp4
mp4
webm
ogg

 

Resourcen:

Gemfile

[ruby]
gem ‚private_pub‘
[/ruby]

terminal

[bash]
bundle
rails g private_pub:install
rackup private_pub.ru -s thin -E production
[/bash]

messages/index.html.erb

[html]
<%= subscribe_to "/messages/new" %>
[/html]

messages/create.js.erb

[javascript]
<% publish_to "/messages/new" do %>
$("#chat").append("<%= j render(@message) %>");
<% end %>
[/javascript]

messages_controller.rb

[ruby]
PrivatePub.publish_to("/messages/new", message: @message)
[/ruby]

app/assets/javascripts/messages.js.coffee

[javascript]
PrivatePub.subscribe "/messages/new", (data, channel) ->
alert data.message.content
[/javascript]