Screencast: Im Browser „In-Place“ Editieren

In-Place Editing bezeichnet die Möglichkeit im Browser direkt Bereiche zu bearbeiten. Diese Funktion wird gerne CMS Systemen verwendet um den Anwender eine einfache Möglichkeit zu bieten um Inhalte ohne Umwege zu verändern und/oder zu erstellen. Ryan zeigt in diesem Screencast wie dies umgesetzt werden kann.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

Gemfile

[ruby]
gem ‚best_in_place‘
[/ruby]

app/assets/javascripts/application.js

[javascript]
//= require jquery.purr
//= require best_in_place
[/javascript]

app/assets/javascripts/users.js.coffee

[javascript]
jQuery ->
$(‚.best_in_place‘).best_in_place()
[/javascript]

users/show.html.erb

[html]
<p>
<b>Name:</b>
<%= best_in_place @user, :name %>
</p>
<p>
<b>Email:</b>
<%= best_in_place @user, :email %>
</p>
<p>
<b>Gender:</b>
<%= best_in_place @user, :gender, type: :select, collection: [["Male", "Male"], ["Female", "Female"], ["", "Unspecified"]] %>
</p>
<p>
<b>Public profile:</b>
<%= best_in_place @user, :public_profile, type: :checkbox, collection: %w[No Yes] %>
</p>
<p>
<%= best_in_place @user, :bio, type: :textarea %>
</p>
[/html]

users_controller.rb

[ruby]
respond_to :html, :json
def update
@user = User.find(params[:id])
@user.update_attributes(params[:user])
respond_with @user
end
[/ruby]

app/assets/stylesheets/users.css.scss

[css]
.purr {
position: fixed;
top: 30px;
right: 100px;
width: 250px;
padding: 20px;
background-color: #FCC;
border: solid 2px #C66;
&:first-letter { text-transform: uppercase; }
}
[/css]

Screencast: Etwas zu Open-Source beitragen

Open-Source Projekte leben vom Beitrag von Freiwilligen. Github vereinfacht die Möglichkeit einen Teil, seien es auch nur kleine Verbesserungen, zur Verfügung zu stellen. An dem Beispiel von VCR zeigt Ryan diese Woche wie es funktioniert.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

bash

[bash]
git clone git@github.com:ryanb/vcr.git
cd vcr
git branch -r
bundle install
bundle exec rake
git submodule init
git submodule update
git status
git checkout .
git checkout -b readme-contributing-link
git diff
git commit -a -m "adding contributing link to readme"
git push origin readme-contributing-link
[/bash]

Gemfile

[ruby]
gem ‚rb-fsevent‘, ‚0.9.0.pre4‘
[/ruby]

Screencast: Spree – Einstieg in Ecommerce mit Rails

Spree ist eine open-source e-Commerce-Lösung auf Basis von Rails und wurde von Sean Schofield entwickelt. Inzwischen wird es von einer Community gepflegt ist aktuell die meistgenutzte Shop-Lösung im Rails-Umfeld. Ryan bietet diese Woche einen Einstieg in das Framework.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

bash

[bash]
brew install imagemagick
rails new store
bundle
rails g spree:site
rake db:bootstrap
[/bash]

Gemfile

[ruby]
gem ’spree‘, ‚0.70.1‘
gem ’spree_blue_theme‘, :git => ‚git://github.com/spree/spree_blue_theme.git‘
[/ruby]

config/initializers/spree_config.rb

[ruby]
Spree::Config.set(logo: "store/rails.png")
[/ruby]

overrides/logo.rb

[ruby]
Deface::Override.new(:virtual_path => "layouts/spree_application",
:name => "logo",
:replace_contents => "#logo",
:text => "Store")
[/ruby]

app/assets/stylesheets/store/all.css

[css]
/*
*= require store/screen
* …
*/
[/css]

app/assets/stylesheets/store/layout.css.scss

[css]
#logo {
font-size: 32px;
color: #FFF;
}
[/css]

Screencast: Mercury Online Editor

Mercury ist ein auf HTML5 basierender Web-Editor mit dem Inhalte direkt im Browser bearbeitet werden können. In dem folgenden Screencast zeigt Ryan wie es in eigenen Applikationen eingebunden und benutzt werden kann.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

Gemfile

[ruby]
gem ‚mercury-rails‘, git: ‚https://github.com/jejacks0n/mercury.git‘, ref: ‚a2b16bcdc9‘
[/ruby]

bash

[bash]
bundle
rails g mercury:install
rake mercury_engine:install:migrations
rake db:migrate
[/bash]

pages/show.html.erb

[html]
<h1><span id="page_name" class="mercury-region" data-type="editable"><%= raw @page.name %></span></h1>

<div id="page_content" class="mercury-region" data-type="editable">
<%= raw @page.content %>
</div>
<p><%= link_to "Edit Page", "/editor" + request.path, id: "edit_link", data: {save_url: mercury_update_page_path(@page)} %></p>
[/html]

config/routes.rb

[ruby]
resources :pages do
member { post :mercury_update }
end
[/ruby]

pages_controller.rb

[ruby]
def mercury_update
page = Page.find(params[:id])
page.name = params[:content][:page_name][:value]
page.content = params[:content][:page_content][:value]
page.save!
render text: ""
end
[/ruby]

app/assets/javascripts/mercury.js

[javascript]
$(window).bind(‚mercury:ready‘, function() {
var link = $(‚#mercury_iframe‘).contents().find(‚#edit_link‘);
Mercury.saveURL = link.data(’save-url‘);
link.hide();
});

$(window).bind(‚mercury:saved‘, function() {
window.location = window.location.href.replace(//editor//i, ‚/‘);
});
[/javascript]

views/layouts/mercury.html.erb

[html]

saveStyle: ‚form‘,

[/html]