開發ruby on rails 好用工具

• tmux
• zsh      
• sideup (操控視窗介面)
• wget (下載用好工具)

• tmuxinator
• tmux-color-solarized (程式編碼配色)
• 
  
• 
  

      debug

• pry 

     test

• zeus   ( preload rails environment )
• spring
• capybara
• rspec-rails

       持續新增...

overflow:hidden屬性

來源
http://www.superpay.com.tw/2009arts/article/c/212.html



overflow:hidden這個CSS樣式是大家常用到的CSS樣式，但是大多數人對這個樣式的理解僅僅局限於隱藏溢出，而對於清除浮動這個含義不是很瞭解。

　　一提到清除浮動，我們就會想到另外一個CSS樣式：clear:both，我相信對於這個屬性的理解大家都不成問題的。但是對於“浮動”這個詞到底包含什麼樣的含義呢?我們下面來詳細的闡述一下。

<div id="wai">
 <div id="nei"></div>
</div>

         這是一個常用的div寫法，下面我們來書寫樣式。大家可以在DMX中自己做試驗

#wai{ width:500px;  background:#000; height:500px;}

#nei { float:left; width:600px; height:600px; background:red;}

　　可以看到，我給nei這個id加了一個浮動，我們常規的理解是，我們允許nei這個id的div的右邊出現其他的內容，只要它的寬度不超過wai這個div和nei這個div的剩餘值。

　　如果div wai中還包含其他的div，我不允許它出現在nei的右側，我們則用樣式clear:both指定這個div，不允許它浮動在nei右側。

　　這些在ie6裏面是正確的。但是在火狐或者其他流覽器裏面，我們發現問題並非如此簡單。我們發現，當nei這個div的寬度和高度都大於wai這個div的時候，wai並沒有被內撐開而是依舊顯示為我們指定的寬高。在我的例子中，都是500。

　　這個時候我不理解了，我搜索了很多的資料，但是都沒能理解這是為什麼，直到看到別人在類似的情況下給wai這個div加了一個overflow:hidden這個屬性解決了這個問題。

　　我們直到overflow:hidden這個屬性的作用是隱藏溢出，給wai加上這個屬性後，我們的nei的寬高自動的被隱藏掉了。另外，我們再做一個試驗，將wai這個div的高度值刪除後，我們發現，wai的高度自動的被nei這個div的高度值給撐開了。

　　說到這裏，我們再來理解一下“浮動”這個詞的含義。我們原先的理解是，在一個平面上的浮動，但是通過這個試驗，我們發現，這不僅僅是一個平面上的浮動，而是一個立體的浮動!

　　也就是說，當nei這個div加上浮動這個屬性的時候，在顯示器的側面，它已經脫離了wai這個div，也就是說，此時的nei的寬高是多少，對於已經脫離了的wai來說，都是不起作用的。打個形象的比喻就是當JJ脫離BB的時候，JJ的大小對於BB是沒有撐開的作用的(有點少兒不宜的感覺-_-|||)

　　OK，當我們全面的理解了浮動這個詞的含義的時候，我們就理解overflow:hidden這個屬性中的解釋，清除浮動是什麼意思了。也就是說，當我們給wai這個div加上overflow:hidden這個屬性的時候，其中的nei等等帶浮動屬性的div的在這個立體的浮動已經被清除了，就好比JJ又進入了BB內，JJ的大小自然又會影響到BB的大小。

　　這就是overflow:hidden這個屬性清除浮動的準確含義。

　　當我們沒有給wai這個div設置高度的時候，nei這個div的高度，就會撐開wai這個div，而在另一個方面，我們要注意到的是，當我們給wai這個div加上一個高度值，那麼無論nei這個div的高度是多少，wai這個高度都是我們設定的值。而當nei的高度超過wai的高度的時候，超出的部分就會被隱藏。這就是隱藏溢出的含義!

　　我相信，通過我的這些文字，大家對overflow:hidden這個屬性有了全新的認識。希望大家和我一樣，在div+css學習中能夠不斷的進步!

hello 2014

2014 農曆年 假期的最後一天

想想今年要幹什麼事

希望可以更熟悉的技能

• ruby/rails 

許願

• 吉他-兩個月一首指談,一個月一首彈唱（4指彈/4彈唱）
• 英文-口說不再害怕
• 家人一起旅遊

rspec

git
https://github.com/rspec/rspec-rails

ihower book
http://ihower.tw/rails3/testing.html

ihower slide
http://www.slideshare.net/ihower/rspec-7394497

rails 讓使用者可以訂閱 RSS

使用者可以訂閱 RSS http://stackoverflow.com/questions/3951235/how-do-i-make-an-rss-atom-feed-in-rails-3

http://techoctave.com/c7/posts/32-create-an-rss-feed-in-rails

1.在LinksController 

def feed

  @links = Link.all(:select => "title, url, id, description, updated_at", :order                  => "updated_at DESC", :limit => 20) 



  respond_to do |format|

     format.html

     format.rss { render :layout => false }

  end

end

2.新增app/view/links/feed.rss.builder

xml.instruct! :xml, :version => "1.0" 

xml.rss :version => "2.0" do

  xml.channel do

    xml.title "learn rails"

    xml.description "study"

    xml.link links_url



    for link in @links

      xml.item do

        xml.id link.id

        xml.title link.title

        xml.description link.description

        xml.pubDate link.updated_at.to_s(:rfc822)

        xml.link link.url

      end

    end

  end

end

3.html連結

<%= link_to("rss" , feed_links_path(rss))%>

如此 即可產生一可讓使用者訂閱之rss

acts_as_commentable 在每則網址下面留言

使用者可以在每則網址下面留言 https://github.com/jackdempsey/acts_as_commentable

gem 'acts_as_commentable'

rails g comment

rake db:migrate

1.新增 CommentsController

class CommentsController < ApplicationController



 def create

  @link = Link.find(params[:link_id])

  comment = Comment.new( :title => "", :comment => params[:comment][:comment])

  if current_user != nil

   comment.user_id = current_user.id

  end

  logger << params[:comment]

  @link.add_comment comment



  redirect_to root_path

 end

end

:comment => params[:comment][:comment])  這邊這樣用是因為 view 用simple_form_for 後來帶過來的是 comment={comment={msg}}                                  之後再研究看看正常寫法 

2. view

<%= simple_form_for(@comment, :url => comments_path(@comment, :link_id => link )) do |f| %>

 <div>

   <%= f.input :comment , :label => "--" %>

   <%= f.button :submit , :class => "btn btn-info"%>

 </div>

<% end %>

embedly- 使用者填入網址，網站自動抓標題和簡介

使用者可以填入網址，網站自動抓標題和簡介 http://embed.ly/docs/tutorials/jquery_preview

參考解法
Xdite 解法
由後端抓


1. 安裝 embedly  https://github.com/embedly/embedly-ruby

gem install embedly




2.修改LinksController
   產生時要先有url , 後續再修改model 

def create
  @link = current_user.links.build(link_params)
  @link.save

  redirect_to root_path
 end


 private 
 def link_params
  params.require(:link).permit(:url,:user_id)
 end

3. 修改link model
   用after_create , 再來update由embedly抓回來的資料

class Link < ActiveRecord::Base

 belongs_to :user
 after_create :update_from_embedly

   def update_from_embedly

     link = self

     embedly_api = Embedly::API.new(:key => Setting.embedly_key)
     embedly_objs = embedly_api.oembed :url => link.url
     embedly_obj = embedly_objs[0]

     response_data = embedly_obj.marshal_dump

     link.title             =  response_data[:title]
     link.link_type         =  response_data[:type]
     link.provider_name     =  response_data[:provider_name]
     link.provider_url      =  response_data[:provider_url]
     link.description       =  response_data[:description]
     link.thumbnail_url     =  response_data[:thumbnail_url]
     link.thumbnail_width   =  response_data[:thumbnail_width]
     link.thumbnail_height  =  response_data[:thumbnail_height]

     link.save
   end

end