[分享] flash 提示訊息 — 顯示位置問題解決辦法(圖解)

我們在 Rails 101 以及 Job Listing 兩個專案開始就把「flash 提示訊息」給裝上了,然而這個訊息,在有了美美的 Landing Page 之後,看起來竟是如此不堪入目 —每當登入、登出等提示訊息出現,便搞出一個大空隙。這篇分享文提供一個簡單的解決辦法供有需要的同學參考,如果覺得這篇教程有用、想給予鼓勵支持,歡迎至:我的作品頁面 點下「支持TA」。

  • 修改前的提示訊息,硬是插在導航欄跟首頁圖中間:

為什麼只要提示訊息出現就會有這個縫隙?讓我們回想一下,我們當初是把 flash 安插在哪。

  • app/views/layouts/application.html.erb
<!-- 前面代碼省略... -->

<body>
    <div class="container-fluid">
        <!-- 導航欄 -->
        <div class="row">
            <%= render "common/navbar" %>
        </div>

        <!-- flash 提示訊息 -->
        <%= render "common/flashes" %>

        <!-- 載入網頁內容 -->
        <%= yield %>
    </div>
  
        <!-- footer -->
    <%= render "common/footer" %>
</body>

<!-- 後面代碼省略... -->

是的,在設定網站的通用版面時,我們把「flash 提示訊息」放在「導航欄」跟「網頁內容」之間,也因此,只要一有提示訊息,自然從兩者中間冒出來。

如果你也看這個空隙不順眼,可以照著下方步驟作作看。(以下示範使用全棧營「Rails 實戰:招聘網站」的章節:「13 - 招聘网站 PK 魔改大赛」。)

Step 1. 解決礙眼的空隙

刪除 application.html.erb 中的 <%= render "common/flashes" %>

  • app/views/layouts/application.html.erb
<body>
    <div class="container-fluid">
        <!-- 導航欄 -->
        <div class="row">
            <%= render "common/navbar" %>
        </div>
                
        <!-- 載入網頁內容 -->
        <%= yield %>
    </div>
            
        <!-- footer -->
    <%= render "common/footer" %>
</body>

接著,我們改把 <%= render "common/flashes" %> 改放在首頁(welcome/index.html.erb)試試看。

  • app/views/welcome/index.html.erb
<div class="jumbotron">
    <!-- 提示訊息放這 -->
    <%= render "common/flashes" %>
      
    <!-- Landing Page 首頁圖的標題、宣傳語、按鈕 -->
    <h1 class="title">18K Offer</h1>
    <p class="slogan">18K Offer 是一个提供18K薪水工作机会的求职网站。
    <br>
    我们希望藉由这个网站,能让大家找到且应征上高薪且优质的工作。
    <br>
    凭借自己的努力和天份也会变 Winner
    </p>
    <p class="lead"><a class="btn btn-lg btn-danger" href="/jobs">马上应征</a></p>
</div>

存檔後刷新。

位置雖然不太理想,但至少我們把空隙給解決了!現在 flash 提示訊息會蓋在首頁圖上,而不是把圖擠開。

Step 2. 移動 flash 提示訊息的位置

我們可以幫提示訊息新添一個屬性(class)來移動提示訊息的位置。具體作法是,先在剛剛的 index.html.erb 中,用 class 把 <%= render "common/flashes" %> 包起來。

  • app/views/welcome/index.html.erb
<div class="customed-flash" >
    <%= render "common/flashes" %>
</div>

最後,只要在 application.scss 檔中設定 margin。把 margin-top 設為負值(例如範例代碼設 -50px),便能將訊息向上移。

  • app/assets/stylesheets/application.scss
.customed-flash {
  margin: -50px 0px 21px 0px; // 會將 flash 訊息往上移。
}

刷新頁面,看看結果如何。

不但沒有白白一大塊空隙,訊息也貼著 navbar 顯示。完成!完成。

當然,目前這樣還有非常大的優化空間,同學可以再透過調整 class、修改 Bootstrap 樣式(例如到 吉米瑞杏 介紹的 Bootwatch 下載簡單的 Bootstrap 模板),讓你的提示訊息變得更好看!

  • 運用在作品中便可以達到以下效果:

本次大賽我的網站主題是:Quick Hunt。作品持續優化中,歡迎投票或留言給予反饋。

目前進行中 & 過往 Logdown 分享:

[分享] 幫網站實現多國語系支援(圖解)

「切換多國語系」這個功能嚴格來說不是 MUST HAVE 的功能,但因為好奇心驅使,就還是忍不住先查找 Rails 實戰聖經 實現這個功能。實裝方式依照目前的需求消化成以下幾步,供有需要的同學參考。如果覺得這篇教程有用、想給予鼓勵支持,歡迎至:我的作品頁面 點下「支持TA」。

Step 1. 準備好語系的 yml 檔

現階段我們可以先把 yml 檔理解成「特定語系的翻譯檔」,用來放置該語系的字串。

Rails 在 config/locales 中原先就有一個 en.yml,算是預設的語系檔("en" = "English")。en.yml 檔長得像下圖這樣,yml 檔一定要有:「開頭定義 locale 名稱」,後面接翻譯的字串。

我們先加入簡體中文、繁中中文兩種語系的翻譯檔吧。在終端機執行:

  • touch config/locales/zh-TW.yml
  • touch config/locales/zh-CN.yml

並在檔案中加點東西進去,還記得剛剛看到的 en.yml 裡有 hello: "Hello World" 嗎?我們先照著 en.yml 依樣畫葫蘆,在簡中跟繁中的檔案中分別填入:

  • config/locales/zh-TW.yml
  zh-TW:
    hello: "嗨嗨,向世界說聲嗨!"
  • config/locales/zh-CN.yml
  zh-CN:
    hello: "哈啰,你好!"

But,注意!要特別小心的是:「yml 檔只讀空格」,請使用「兩個空格」,不要使用 tab;假如你在 yml 檔中,縮排時用 tab,會出現錯誤唷。所以複製貼上時請千萬要注意。

Step 2. 修改 views,讓網頁改讀 yml 檔中的字串。

但網站要怎麼讀不同語系 yml 檔的字串?我們在 views 中作一些修改。

原本的:

<h1>Hello World</h1>

改寫成這樣:

<h1><%= t :hello %></h1>

<!-- 注意。要讓 view 改讀 yml 表,要改寫成 <%= t('key名稱') %> -->

Step 3. 安裝 Gem

在 Gemfile 中加上 gem rails-i18n

  • app/Gemfile
# gems for internationalization

gem 'i18n'
gem 'rails-i18n'

加好之後存檔,到終端機中執行 bundle install,執行完好請重開 rails server。準備就緒後,我們就可以來玩玩看效果了!

Step 3. 設定預設語系

  • config/application.rb
  config.i18n.default_locale = "zh-CN"

加上這一行,就可以幫網站決定預設的語系。接著存檔、重開 rails server,再到瀏覽器刷新 localhost:3000 頁面。

Amazing...

這樣表示我們有成功讀取到 zh-CN.yml 中的 hello: "哈啰,你好!" !但別忘了我們的終極目標是「讓使用者自行切換語系」

Step 4 讓使用者自行切換語系

1. 修改 application_controller

  • app/controllers/application_controller.erb
class ApplicationController < ActionController::Base
#要加這一行

before_action :set_locale

#設定多國語系

  def set_locale
    if params[:locale] && I18n.available_locales.include?( params[:locale].to_sym )
    session[:locale] = params[:locale]
    end

    I18n.locale = session[:locale] || I18n.default_locale
  end
  
#其餘代碼略...


end

2. 新增「切換語系按鈕」

接著我們還需要在介面上提供用戶可以切換的按鈕。這邊提供給大家簡單的下拉式選單的代碼:

<!-- 下拉式選單 --> 
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><%= t('language_switch') %><span class="caret"></span></a>
<ul class="dropdown-menu">

    <!-- 語系選項 -->       
<li><%= link_to "簡中版", :controller => controller_name, :action => action_name, :locale => "zh-CN" %></li>  
<li><%= link_to "繁中版", :controller => controller_name, :action => action_name, :locale => "zh-TW" %></li>
<li><%= link_to "English", :controller => controller_name, :action => action_name, :locale => "en" %></li>

</ul>

  • 大功告成,來玩玩看吧!

  • 實際運用在作品中可以達到以下效果:

這樣就可以很貪心的作各種語系的版本了!



本次大賽我的網站主題是:Quick Hunt。作品持續優化中,歡迎投票或留言給予反饋。

目前進行中 & 過往 Logdown 分享:

[分享] Font Awesome 還可以這樣用

招聘教程、魔改教程與加餐,或甚至是 Bootsnip 上的模板資源,處處可見 Font Awesome 的蹤影,跟大家分享幾個開發上用到的豆知識。


1. Brand Icons — 讓你一口氣備齊國際大牌 icon

想要在網站上羅列知名企業,相較於一個個找圖、還要煩惱圖的品質和大小,直接使用 Font Awesome 所提供的 brand icons 相當省時省心。

  • 你可以在 Font AwesomeBrand Icons 區塊找到琳琅滿目的全球知名企業或品牌:

  • 點圖可以看到代碼示範:

    <i class="fa fa-weibo" aria-hidden="true"></i>
    

​有注意到 class = fa fa-<企業或品牌名稱> 這個相當直覺的使用方式嗎?所以你甚至不需要點圖進去看代碼,直接替換成品牌或企業名稱即可。


2. Font Awesome Size — 讓 icon 縮放自如

教程中我們把小小的 icon 用在同樣小小的按鈕上,但我們可以讓它縮放自如;只要在 icon 的代碼後面加上 fa-lg (lg = large,增大 33%)或是: fa-2xfa-3xfa-4xfa-5x,就能放大我們所用的 icon。

  • 範例代碼:
    <i class="fa fa-google fa-5x"  aria-hidden="true"></i> 
    <i class="fa fa-apple fa-5x"  aria-hidden="true"></i> 
    <i class="fa fa-weixin fa-5x"  aria-hidden="true"></i>
    
  • 實際運用在作品中可以達到以下效果:


3. 別讓 Font Awesome 亂了你的排版

在製作招聘網站時,為了美觀,我們把 (Hide) 跟 (Public) 兩種狀態改用 Font Awesome 的圖示呈現,一個鎖,一個地球。

然而,因為地球跟鎖的「圖示寬度」不同,所以在不同狀態下,文字排版會不一致。當我們執行 Publish / Hide 時,甚至會覺得表格裡的字左右移動。像這樣:



既然我們觀察到原因出在「圖示寬度」,我們就對症下藥,用 Font Awesome Examples 所提供的解決方式:在 class="fa fa-unlock" 以及 class="fa fa-globe" 中加入 fa-fw 固定圖示寬度。

<% if job.is_hidden %>
    <%= link_to publish_admin_job_path(job), :method => :post, class: "btn btn-xs btn-success" do %>
      <i class="fa fa-unlock fa-fw"></i> 
    <% end %>
<% else %>
    <%= link_to hide_admin_job_path(job), :method => :post, class: "btn btn-xs btn-warning" do %>
        <i class="fa fa-lock fa-fw"></i>
    <% end %>
<% end %>

短短五字,輕鬆解決!點擊 Publish / Hide 按鈕的瞬間,就不會再因為地球跟鎖的「圖示寬度」而有排版移動的感覺。


4. Font Awesome Examples — 簡單易懂的各式範例

Font Awesome Examples:提供官方範例。裡面有很多很棒的 Font Awesome 圖示使用、代碼示範,失誤率極低,非常推薦利用!




本次大賽我的網站主題是:Quick Hunt。作品持續優化中,歡迎投票或留言給予反饋。

目前進行中 & 過往 Logdown 分享:

Job Listing 第二期魔改大賽 - 歷程紀錄(5/3)

前言

從趕工到開放上傳、上線後 24 小時內,已經在大大小小的情緒坑摔落又爬起了數次,所以決定另開一篇專門紀錄第一次參加魔改大賽的心路歷程。比賽結束後,又或是幾個月、幾年回頭,銳變後的自己不知道會有什麼想法?想到這便覺得有意思極了。

作品


2017/05/05

開發過程:

情緒的大起與大落都在昨天走過一遭了,今天平靜了許多,只是魔改有點乏力了,硬撐著把剩下幾個醜頁面美化一下。

  • 表格的欄寬利用 <th width="30"> </th> 的方式固定,不要讓文字內容的長短讓欄寬忽胖忽窄。另外就是按鈕改使用 Font Awesome 圖示。

  • 「新增 / 編輯工作」、「新增 / 編輯合作企業」都是用登入的表單樣式去改。

  • 幾乎是純 HTML 的工作資訊頁面,先求個清爽、資訊完整,週末有餘力再作裝飾。


2017/05/04

開發過程:

近乎為 0 的開發進度。推上了 Heroku 後才發現要實現「圖片上傳並顯示」,必須要接連到其他雲端(七牛、AWS),偏偏這兩個一時之間都無法搞定,相當煩躁。

情緒坑:

又一頭撞進各種情緒坑。

  • 覺得自己平日的分享跟付出很沒價值,好像收不到任何回報。即便一直以來都有得到一些同學的正面反饋,但這樣的滿足感,馬上就會因為一些不領情的案例而煙消雲散。
  • 承上,反思自己的心態,總覺得這種「期待回報」的想法很要不得。
  • 從一開始的吊車尾,一路積累到現在,真的擠入前段班反而無所適從。該死的「得失心」又強勢回歸了。

情緒脫坑 & 領悟:

一個人身陷情緒坑時,很容易越跌越深,鼓起勇氣找前輩或同學求助,往往都能尋得良藥。

  • 學霸跟文班長分享的其實都是同一個道理:「把『分享』的價值多方面去想」;「分享」是最好的提取練習,當我們在幫助別人或是寫文章分享時,那個當下其實就已經有回報了:整理腦內的知識、想法、練習寫作及口語表達。思緒至此,對方是不是以「投票」來回報,便有點微不足道了。
  • 不用因為「看似不好的念頭」而自責,每個人多多少少都有類似的想法。
  • 「看種比賽名次是好的,但我會覺得,你名次在前面獲得的,比獎品多太多了。老師、助教、同學的關注,會讓你認識更多厲害的人。」

2017/05/03

開發過程:

  • 早上聽到鄭笑飛同學說她在參考我的工作列表 HTML/CSS 代碼(恰好是最亂、但還沒能夠整理的代碼),趕緊先動手整理。推上 GitHub 後看起來還是不太滿意,但至少縮排、tag 閉合都有整理過了。

  • 另外跟笑飛分享了自己的 HTML/CSS 抄法:利用 id 的方式把複製過來的代碼先包起來,比較能看出代碼的效果,同時可以避免 CSS 的 class 們互相衝突。


  • 今天實作了企業專區:

    • 利用一期學長的教程:< 购物网站-一步一步学会如何添加产品分类-非常详细 > 來實作「合作企業」。建立 Company 這個 Model 後(欄位有:titleimagelocation),把原本 Job 的 company 欄位移除掉,改利用 company_id 來連結合作企業。
    • 「管理員」可以在「後台」新增和編輯「合作企業」,所以在建立 controller 時,要把 company 設在 admin 的下面:rails g controller admin/companies。routes.rb 檔同理,要放在 namespace admin do 下,這樣之後路徑才會是:admin/companies 的形式。
    • controller 加入 CRUD,並建立相對應的 views 文件。
    • 接著利用最新的購物商店教程實作圖片上傳(安裝兩個 Gem:gem 'carrierwave'gem 'mini_magick),讓管理員身份的用戶可以在新增、編輯合作企業時,上傳企業標誌。
    • 添加 CSS 的 class 來美化企業標誌的樣式:圓形、尺寸調小。
  • 編輯 seed 檔案,上傳圖片也可以利用 seed 檔來辦到,但僅限本地端。Heroku 的話要另外找解法,目前看起來都還有點耗時,就先不研究。

Company.create!([
    title: 'Twitter',
    image: Rails.root.join('app/assets/images/twitter.png').open, #上傳圖片

    location: '1355 Market St, San Francisco, CA 94103, USA'
    ])

2017/05/02

開發過程:

Intercom 客服系統,無難度,就是照著步驟貼代碼。

情緒坑:

感覺寫的東西、作的東西都無法引起太多共鳴。雖然自己作的過程很開心,但正面的反饋、回報不足,總覺得挺灰心,時間久了就變得有點力不從心。

情緒脫坑 & 領悟:

跟學霸聊了,知道學霸也是會有「玻璃心」、在意有沒有人看,心裡比較安慰一點。


2017/05/01

開發過程:

沒有進度的一天,只有把前一晚完成的新功能寫成分享文,作提取練習。
[分享] 讓網站支援 Google Map 顯示(圖解)


2017/04/30

開發過程:

  • 實作「依照工作地點生成 Google Map」的功能。
  • 新功能拓荒成功太過癮了,進入心流模式停不下來,又把 seed 檔的生成內容換了一版比較正式的。
  • 想到公司 Logo 一直是都用 Facebook 先暫時替代,趁著動力巔峰把這一塊也一起改了。在 views 中添加判斷,依照 job.company 來顯示公司 Logo。(方法有點笨,塞在 index.html.erb 裡也很難看,之後要看看怎麼優化代碼。)

2017/04/29

開發過程:

  • 實作「使用者可以瀏覽應聘歷程」功能。

2017/04/28

開發過程:

  • 接續昨天的「收藏 / 取消收藏」功能,新增頁面讓使用者可以觀看自己的收藏;同樣先以 Rails101 教材起步:

    • 終端機輸入指令,創建頁面所需的相關文檔。因為每位登入的使用者(無分權限),所以不放在 admin 的路徑下,而是用 account/jobs
    • config/routes.rb 設置 account/jobs 路徑。
    • 在 account/jobs_controller 中加入要操作的 action,例如顯示工作列表及工作細節用的 def indexdef show
    • 利用終端機指令,在 views/account/jobs 中加入相對應的 index.html.erb 和 show.html.erb。
    • 使用者要透過下拉式選單進入「我的收藏」瀏覽。到 views/common/_navbar.html.erb 幫下拉式選單多加一個選項,連到 acaccount/jobs 。
  • 後續優化:使用者可以在「我的收藏」頁面進行「取消收藏」的操作。

    • account/jobs_controller 中加入要操作的 action:def stardef unstarjob_params
    • 到 account/jobs/index.html.erb 修改列表樣式,把「收藏 / 取消收藏」的星星按鈕也放進去。
  • 後續優化:使用者可以在「我的收藏」頁面進行「一鍵投遞」的操作。

    • 再次到 account/jobs/index.html.erb 修改列表樣式,把「一鍵投遞」的按鈕加入列表。
  • 後續優化:讓頁面樣式統一,利用 layouts/admin.html.erb,把「我的收藏頁面」改成像「後台管理」一樣。

情緒坑:

情緒混沌無解的一天,精力在白天就被耗損完了。

情緒脫坑 & 領悟:

ORID 也還是也很多想不透的情緒,思緒混雜、精神差,先睡上一覺再說。


2017/04/27

開發過程:

  • 回歸 Rails101 教材 去實現「收藏功能」。
  • 教材中只有在 groups/show.html.erb 放「加入 / 退出」按鈕,所以執行完後的頁面跳轉也比較單純,就是 redirect_to group_path(@group)。然而,我想讓用戶可以在 jobs/index.html.erb 以及 jobs/show.html.erb 都進行「收藏 / 取消收藏」的操作,一時之間想不到辦法。又跑去看吉米的代碼,看到 redirect_to :back 恍然大悟!
  # star & unstar

  def star
    @job = Job.find(params[:id])

    if !current_user.is_follower_of?(@job)
      current_user.star!(@job)
    end

    redirect_to :back
  end

  def unstar
    @job = Job.find(params[:id])

    if current_user.is_follower_of?(@job)
      current_user.unstar!(@job)
    end

    redirect_to :back
  end
  • <%= link_to("", unstar_job_path(job), method: :post, class: "fa fa-star") %> 的寫法,會導致收藏圖示有底線,看起來是很粗糙的連結。
    參考吉米的寫法,改成:
<%= link_to unstar_job_path(job), method: :post do %>
    <sapn class="fa fa-star"></sapn>
<% end %>

情緒坑:

收看直播前情緒很亂,應該就是老師所說的「大腦的能量在爆衝」,反覆改了清空、改了清空。

情緒脫坑 & 領悟:

看完直播、主持完 Global Team Online Meetup,隨意在草稿紙上寫下現在 job、user、resume 三個 models,跟連連看想要實現的關聯。慢慢心情就平靜下來了,印證「如果要專心,必須要讓大腦慢下來。利用身體其他輸出元件(手、腳)幫助自己專心。」的道理。

接著回歸最基本的教材,沒有太多波折就實現了。其實並不難嘛!記住這樣的感覺繼續往下進行。


2017/04/26

開發過程:

  • 今晚進度:
    • 套用 Bootstrap theme: Flaty 美化 Bootstrap 元件。
    • 優化 flash 提示訊息呈現方式
    • 統一換頁元件樣式
    • 優化搜尋結果頁面(「沒有符合搜尋結果的資料」、「有搜尋結果」兩種)


情緒坑:

趁著 Xdite 老師在程序媛群問大家的情緒困擾,把最近的兩個煩惱給問了:
1. 自己的作品和主題越看越不滿意,雖然明白「砍掉重練」無疑是推自己入大坑,但心裡總還是非常糾結。
2. 老師會建議大家徹底放下得失心或競爭意識嗎?之前視比賽如浮雲,但後來反省自己會不會其實是在逃避,逃避「行銷自己」或是害怕被否定。

情緒脫坑 & 領悟:

厚著臉皮把問題拋出去了,先暫時把這兩個情緒擺一旁,等明晚直播再來想。

家姐:「你最該學的是『平常心』,還有讓自己『學會不需要依賴別人的肯定』。」,這話也很有道理,快點把那個處處不自信的表現型人格甩得遠遠的吧!


2017/04/25

開發過程:

情緒坑:

時間、體力都有限,但要優化的東西還有一籮筐。有點不知道接下來 12 天要怎麼辦。

情緒脫坑 & 領悟:

先爭取把現有的,明擺著就是「未完成」的屍體給修復,最後能作多少算多少。


2017/04/24

開發過程:

  • 在下班離開公司前把文案簡單翻譯了一下,回到家把繁中跟簡中的版本給實裝上了。
  • 修改了幾處地方:昨天發現的首頁空隙、搜尋相關字串翻譯、搜尋結果頁面與工作列表的樣式統一。
  • 後來發現登入、登出、註冊的提示句,是讀 devise.en.yml 裡的字串。嘗試了一下,發現只要照著原本 devise.en.yml 裡的格式依樣畫葫蘆,就能讓網頁讀自己設的 yml 檔。
  • 凌晨 00:30 時,完全把「夜半三更不推 Heroku」的原則給忘了,然後就又崩潰了一小段時間。最後是用 Google 到的 force push 方式,解決是解決了,但 git 跟 Heroku 還是讓人腦子糊成一團。
$ git push origin master --force
$ git push -f heroku step14:master

情緒坑:

  • 吃完飯後聽直播,從直播開始就有點使不上力,筆記記到一半也沒記了。

情緒脫坑 & 領悟:

  • 可能又到了每個月的巨大低潮時間點,如果是的話,那今天晚上的無力就解釋得通了。先冷靜面對,睡一覺把情緒給睡掉。

2017/04/23

開發過程:

  • 參考同學分享的教程,新增搜尋功能。
  • 參考吉米的教程跟 GitHub 把看了很痛苦的使用者相關介面給改了,先暫時使用同樣的版面,之後要自己擺弄看看。
  • 把原本連到工作資訊頁面的 Apply Now 替換成 Quick Apply,點了後可以直接進到投遞履歷的介面。其實就只是把導向的連結替換成:new_job_resume_path(job)
  • 投遞履歷的介面先暫時給為上半部用 jobs/show.html.erb,下半部則還是原本的訊息框、上傳檔案按鈕、遞交鈕。算是非常偷懶的暫時方案。
  • 晚上遇到 Heroku 跟 GitHub 無法上傳的問題,Heroku 後來重新上傳一次有成功,GitHub 則是用 yammy 救援:

    • 切回有問題的分支硬上 git push -f origin <branch>
    • 看到 "This repository moved. Please use the new location",才知道可能是上傳路徑問題(開中中的確有換過專案名稱)。 輸入:$ git remote -v 檢查當前的專案路徑,確實不一致。
    • 輸入:$ git remote remove origin 移除當前路徑。
    • 輸入:$ git remote add origin <location url>,之後再$ git push --all origin`。
  • 一籮筐的頁面怎麼看怎麼煩,但決定接下來還是先優先實現功能,然後作到一個段落再來優化細節。免得又花太多時間在 HTML/CSS 上,然後反倒功能都荒廢。

情緒坑:

  • 今天在微信群犯了一個很丟臉的錯誤,想幫群上同學回答問題,但回答過程一直被中斷,最後甚至還發了標記錯的說明圖給他,
  • 就像本日 ORID 中提到的:有認真的形象,卻沒有優秀的表現。
  • 雖然在下午在台北 Meetup 衝了一些進度,但一到晚上又開始有點焦躁了。

情緒脫坑 & 領悟:

  • 無法脫身時量力而為,盡量不要再分心去幫別人解決問題,簡直是幫倒忙。而且糗斃了!如果因此浪費到別人的時間,就更是過意不去。
  • 分析了一下負面情緒的來源:焦躁除了魔改大賽本身之外,另外的壓力來源則是各種瑣事跟約定,瑣事像是在 UM 的住宿、機票問題,約定則是答應別人寫的申請心得文。表示這只是一個暫時的狀態,手腳快一點、心態積極一點,一件件完成自然也就不煩了。
  • Xdite 老師的一句話:「你參加的是高品質的 MBA。要去和其他人交流否則浪費自己的機會,要抓住機會啊!」。
  • 表現不好又能怎麼辦呢,每個人條件跟資質各有不同,誰能保證一分努力就等於是一分收穫?更何況,自己真的有毫無保留地「全力以赴」嗎?
  • 「有時間難受,還不如做點事呢。」。至少現在有非常多好的學習榜樣,而風度絕佳的學霸甚至鼓勵從「模仿」作起。何其幸運。

2017/04/22

開發過程:

  • 參考 LayoutIt 的 HTML 代碼修改工作列表的排列方式。對我來說最有用的是 Grid SYstem,所以用 LayoutIt 排一個方向,細節再自己填入好了。
  • Footer 微調(把 hr 的用法改掉、參考魔改加餐 2.1 比照 navbar 作成全屏。)
  • 工作資訊可以再放多一點細節,目前空蕩蕩的。
  • 修改 jobs/show 時,對 id 的運用有比較熟練一點了。
  • 看吉米王的 GitHub 學到非常多!先前一直在想分類該怎麼作,甚至還想到 Rails101 的方式,讓 category 跟 jobs 變成像 groups 跟 post 一樣有關聯。但看了吉米的寫法,才知道根本不需要這麼麻煩!直接在 jobs_controller.erb 中改 def index,利用 @jobs = Job.where(:is_hidden => false, :category => @category) 去篩選就好。
  • 分類作了跟想試的排版先弄了,但 10 點後沒有勁找圖,所以現在還是暫代圖的半裸狀態。

情緒坑:

  • 今天沒有掉什麼坑,只是 10 點過後後繼無力,時間流失掉有點可惜。

情緒脫坑 & 領悟:

  • 每天的進度還不夠多,應該要立定更確實一點的目標;例如:

    明天整天的目標:

    • 搜尋功能。
    • resumes/new.html.erb 美化。
    • 今天在作分類功能時先把 jobs_controller.erb 裡的排序拿掉了,這也要記得補。

2017/04/21

開發過程:

  • gem 'will_paginate' 先把切換頁功能加上,暖身。
  • 加入招聘公司和工作類型的排序。
  • 翻找了幾個 GitHub 都沒看到一塊塊的列表,藉此機會自己動手試試看!然後一折騰就是三小時過去。

    嘗試過程很傻逼:一直沒辦法把單一個工作資訊包起來,後來是回想起 Landing Page,客戶反饋有三個方格區塊,就想到先把這區塊的 HTML 跟 CSS 代碼拿來用。刪掉兩個不就是一個方塊了嗎?先包住資訊,之後再慢慢調(然後就崩潰了)。

    之後用 <div class="col-sm-3"><div class="col-sm-5"><div class="col-sm-2 pull-right"> 將招聘企業圖示、資訊、應聘鍵隔成三區塊。

  • 今天有用上 Nic 助教教的「快速捨棄不要的修改,倒回原狀。」,也很順手!

    • 將全部有修改到的檔案復原回前一次 commit 的狀態: $ git checkout .
    • 只復原單一檔案: $ git checkout --<檔案路徑>
  • 前幾天想把肥大的 application.scss 拆分出來,但一直失敗,今天在找資料時發現可以用 @import <檔案名> 的方法搞定。不再是大雜燴,把代碼區分清楚的感覺真美好。

@import "jobs.scss";

情緒坑:

事情很多,而且週五固定要寫 ORID 跟每週總結,再加上要持續魔改。騰不出手的感覺讓人格外煩悶。

情緒脫坑 & 領悟:

其實也就還是兩句話:

  • 「用行動填滿時間。」
  • 「有時間難受,還不如做點事呢。」

2017/04/20

開發過程:

  • 整天時間被占滿,只好趁著空檔細細思考一次招聘網站主題跟特色,問自己「Quick Hunt 到底快在哪?」、「Quick Hun 能提供給使用者什麼服務?」等功能建置完後,陸續編修文案跟圖片,為網站灌注靈魂。目前草擬:
    • 急速送交
    • 嚴選企業
    • 專業諮詢
  • 10 點多回到家,把白天在 Slack 上的紀錄跟筆記整理成 ORID 跟分享文: Font Awesome 豆知識分享文
  • 因為全棧營的新作業是投票給同學,所以還是解禁上了比賽頁面,看到潘助教的「navbar 跟 footer 背景顏色統一一下是不是比較好呢?」的建議。想說只是改 navbar 色碼,就打開 Atom 順手改了。
  • 開了 Atom 後就停不下來了,接著作作明天的進度。
  • 幫 Job 加入新欄位:「招聘公司、類型、城市」,修改相關的 views。

    要作之前腦中先想了一次流程,出手前大概掃了一下學長姊的 GitHub,確認方向沒錯才執行。

    • $ rails g migration 建立用來修改欄位的 migration 檔案。
    • → 修改 migration 內容,利用 add_column 把欄位加入
    • $ rake db:migrare
    • → 改 view → jobs_controll.rb 跟 admin/jobs_controller.rb 都要加進 def job_params
    • → en.yml 加字串。
  • 因為 Job 欄位改動,重新把 seed 檔中資料內容給改了。同樣是自己先想過並修改,再參考別人的寫法:前期學長陳俊鴻的 seed 檔
    - 在終端機執行以下指令,就可以用 seed 檔快速生成資料;

    • 在本機測試的話:$ rake db:seed
    • 在 Heroku 的話:$ heroku run rake db:seed
  • 修正教材中找到的小問題:「訪客以網址進入 admin/jobs 出現錯誤」

  • 凌晨 2 點要把更新推上 Heroku 時出現麻煩:首頁正常,但點頁面進去都是 "We're sorry, but something went wrong"。最後是以 $ git checkout -b tempobranch 創一個新的分支,然後在新的分支 push 上 Heroku。不明白這其中玄機。

情緒坑:

  • 對於「分享與否」感到糾結,在一個問題上困惑了老半天;「我現在進度還不夠,夠資格分享嗎?『分享』究竟是 MUST HAVE 亦或是行有餘力才作的 NICE TO HAVE?」。
  • 經歷數不清的嘗試,弄了半小時後,整個 Heroku 砍掉,一想到此時此刻網站是徹底掛掉的狀態、半夜又無人求助,情緒很崩潰。

情緒脫坑 & 領悟:

  • 看了兩位學長的文章,類似的坑跟昨晚的領悟其實前輩們也經歷並且歸結了。不關注得票、只在乎自身的成長,盡己所能。

  • AM2:00 - 3:00 這段時間幾乎是倉亂 Google,看到什麼解法就套什麼。心情亂了,作事方式也跟著亂了步伐;面對再大的問題還是要先冷靜,並且要記錄試錯歷程。


2017/04/19

開發過程:

完整代碼請見 GitHub 分支 step9 中的 commits,跟 GitHub 尚不熟的同學可參考這篇筆記:[筆記生肉][圖解] 如何參加魔改大賽(主講:Nic)

  • 完美主義症狀發作,反覆 $ git stash$ git stash clear 砍掉重練再砍掉。
  • 決定回歸教材,從基本的 navbar 跟 cover 改起。
  • 新增 Landing Page 的合作公司區塊,利用:

    例如:<i class="fa fa-camera-retro fa-5x"></i>

  • 有點東西,心裡比較踏實後繼續作客戶評價,參考:

    • 文志鵬學長的代碼,沒有修改太多。CSS 代碼的安排方式,很有啟發:利用 id 的方式(# testimony { })包住該區塊的 class。
    • 按鈕點了回最上方的設置方式:<a href="#"></a>
  • Footer 用模板套了一下,加上了挺酷的效果。

    • Bootsnipp:挑好樣式,點擊頁籤(HTML、CSS、JS)可以查看模版原始碼;選好套用的用,代碼太複雜或稍嫌亂的都果斷放棄。
    • 不適用的圖示用 Font Awesome 改掉,並調整圓圈效果的顏色。
    • 設置連結,參考 Rails101 的 Footer,連結後方加入 target=_new讓網頁在新分頁開啟。寫成這樣:<a href="http://anndo-blog.logdown.com/" target=_new>
  • 各種細節調整:navbar、網站名稱及圖示、表格樣式。

    • Flaticon:很豐富的免費圖示素材庫,還可以選擇顏色和檔案格式。
  • 推上 GitHub 跟 Heroku,先急忙發一版上去全棧營。當時還有一塊是 Nic 助教的模版,網站內容也是暫代的資料,羞愧死。

  • 太羞愧,急忙修改首頁網站特色的區塊,先用教材的樣式跟替換圖片頂著用。

  • 利用 yammy 學長的 seed 教程(文檔、終端機該下什麼指令,通通有。)匆匆替換 Heroku 上的資料。

  • 使用 en.yml 檔放置所有字串的價值這時候體現出來了,找字串、修改文案毫不費力。

情緒坑:

  • 今天(4/19)一早就跌了一個情緒大坑。睡覺雖然緩解了前一晚的憂慮,但招聘網站功能跟視覺上的需求是不會睡完一覺就消失。即便知道要按部就班從 MUST DO 跟 SHOULD DO 作起,但情緒還是一個「煩」字。
  • 作完物理治療回到家才發現比賽已經開打,著實被各路好手的優秀作品給嚇著了,腦袋一片空白,心理急死了!在這種狀態下打開 Atom,甚至不知道自己要改啥,無法正常運作。
  • 厚著臉皮先發上群組求關注,發完就後悔了:現在作品是這付樣貌,我憑什麼期待別人投給我或追蹤?就算多了幾票,真能證明什麼嗎?

情緒脫坑 & 領悟:

  • 早上心浮氣躁的情緒,在動手貼教材代碼後,就慢慢消散了。這個經驗讓我想到之前 ORID 記下的:李笑來 <問答01 | 提高成長率就是要有建設性>

    • 「用行動填滿時間。」
    • 「覺得自己做得不好就直接不作了。這之所以是個大坑,就是因為絕大多數人是『表現型』選手,害怕自己的不好、不熟練、不優秀被別人看到,於是,用這種方法避免『露餡』。」
    • 「有時間難受,還不如做點事呢。」
  • 比賽無預警開打後的狀態儼然就是笑來老師所說的人生三坑:「心急火燎地隨大流。」,瞬間收穫眾多票的吉米同學花了一週的時間,機會,是留給準備好的人。在瞎湊熱鬧跟四處拜票前,我該作的是先把自己的作品打理好,每日仍是照表操課:ORID 不能少。

  • 過多的虛榮心跟競爭意識會讓腦袋無法正常運轉,思路不清晰的情況下成不了事。下了決心,非修改需求,不去關注自己的票數。比賽結束後再看票數檢討。


2017/04/18

開發過程:

  • 4/18 日晚上開始用 Job Listing 的基本框架去修改,這個階段尚未開始裝修,反倒是花了一些時間在「字串整理至 config/locales/en.yml

    對於要不要作這件事情其實掙扎了一下:

    • 網頁上顯示沒有差別,還不如作 Landing Page,效益更高。
    • 教材中用到的字串不多,但要通通改到 en.yml 還是需要時間。

    後來還是狠心投注時間去作,原因:

    • 現在不改,未來要處理的字串會更多,技術債越滾越大。現在先花一點時間打底是值得的。
    • 字串集中在 en.yml,未來要修改文案,就不用再 views 的各個檔案遊走、耗眼力。
    • 新學到的方式,好玩。
  • 用之前的專案,嘗試 Nic 助教的模板。

情緒坑:

不想拿魔改作品實驗,所以魔改作品的 Landing Page 的進度 = 0,帶著焦慮的情緒入睡。

情緒脫坑 & 領悟:

心裡焦急的主因是忘記了 MVP 直播中 Xdite 老師耳提面命的「拆解並找到『最小的解決問題』。一口氣作大東西會失敗,要知道大東西是演化出來的!」。因此,不要妄想把所有前端資源一口全吞下,按步就班吸收。

[筆記生肉][圖解] 如何參加魔改大賽(主講:Nic)

直播資訊

主講人:Nic 老師
時間:4月17日 20:00
時長:本次直播總時長預計 30 分鐘。
概要:魔改大賽前哨戰,Nic 老師將在這次直播,說明提取練習的重要性。以及教你如何只花三十分鐘就能參加比賽的小套路。

直播筆紀

提取練習的重要性

從不斷地「學」,進階到:「教」才是最好的「學」。你可以透過以下方式實踐「教」:

  • 回答同學問題
  • 分享筆記到交流論壇
  • Meetup
  • Slack 上的問題

魔改大賽前端基礎實戰

Nic 助教在 GitHub 提供示範網頁的原始代碼,照著 STEP 1 - STEP 4 就能將你的 Landing Page 變得和 Nic 助教直播所展示的網頁一樣。

  • [怎麼照著 Nic 助教的專案作?]

    • 照著專案中的 Commits 一步步作。
    • 貼代碼的兩種方式:
      • 方法一:連同 + 符號直接貼到 Atom,按Command + F開啟搜尋與取代工具列。在 Find in current buffer 欄位輸入 +,Replace in current Buffer 留空,然後點 Replace all,就能把 + 通通移除掉 。
      • 方法二:點擊 View 按鈕可以瀏覽該檔案的代碼,就可以複製沒有包含+ 號代碼。
    • 圖片要怎麼放到專案目錄?
      • 終端機輸入 open .
      • 把圖片放到 app/assets/images


  • Nic 助教分享小訣竅
    • 切換終端機分頁的快捷鍵:Command + 左鍵Command + 右鍵
    • 代碼縮排 / 退後:Command + [Command + ]
    • Google Chrome 可以把圖片直接拉到資料夾。


  • Nic 助教小提醒
    • 「輸入什麼會得到什麼」才是學習的重點,有過多的糾結會絆倒自己唷
    • 不需要背 HTML/CSS 代碼。在尚未變成資深程序員之前,只要專注在「(代碼)貼了會動、貼了會動」就好。
    • 專案裡的文件代碼要排得乾乾淨淨!
    • 修改前要看一下網頁長什麼樣子,才知道貼代碼後會有什麼效果。



  • 關於 Job Listing 參賽
    • Job Listing 作完就有修改的資格了,照著步驟就可以輕鬆作出屬於自己的頁面。
    • 有參加才會有進步!


  • Nic 助教給 Job Listing 還沒作完的同學的建議:

    • 請看解答,利用 Rails101 的練習方式實踐

      • 第一遍:複製粘粘。
      • 第二遍:對照教材手打。
      • 第三遍:都可以,試著了解每一個步驟的結果。

      一定要有一次是「手打」,然後記錄錯誤。

    • 學習要有成就感,先有成就感再去作提取練習。

Q&A

  • Q. Slack 熱點問題
    A. 利用搜尋欄。

  • Q. 課程要學習到什麼程度才算合格?
    A. 每個人的自我肯定、要求不同,助教無法回答你。

  • Q. 這一次比賽是否要限制使用學過的教程範圍?
    A. 第二期學員擁有第一期學長姐留下的資源,這是一期學員所沒有的。比賽比的是創意、拉票,以及你用不用心,不需要糾結於「公平」。

  • Q. 要不要全職學習全棧營?
    A. 如果沒有經濟壓力的話,可以賭一把;就算發現自己其實並不喜歡全棧,至少你從人生之中剔除了一個選項。總之,先評估,再作決定。

  • Q. Rails 可以作報表嗎?
    A. 搜尋,找看看作報表的 Gem。

  • Q. 排版問題。
    A. 搜尋一下論壇資源。

  • Q. view 的畫面還要手打嗎?
    A. 打個一、兩次,觀察跑版會是什麼狀況。

  • Q. 老師對排版有什麼標準嗎?
    A. 以 tab 為單位縮進。

  • Q. 怎麼將 footer 置底?
    A. 問 Google,針對需求研究。

  • Q. 是不是一定要作招聘網站?
    A. 是,作完才知道怎麼改。

  • Q. 有沒有「排名前面」的套路?
    A. 努力作、認真作,還要不斷提取、作分享。

  • Q. 一定要作完三遍嗎?
    A. 作完三遍最好!

  • Q. 什麼是惡意刷票?
    A. 就是灌票。

  • Q. Atom 代碼對齊的插件是什麼?
    A. 把搜尋關鍵字 "ruby beauty atom" 餵 Google 大神。

  • Q. 要不要再練一次 Rails101?
    A. 往前走,練 job listing。觀察代碼造成的變化跟嘗試手打。

[分享] 如何解決教材中「訪客以網址進入 admin/jobs 出現錯誤」

狀況描述

照著招聘網站教材完整作完,有一個小彩蛋(bug):「未登入的訪客,如果想要以網址進入查看後台的列表,出現錯誤訊息:NoMethodError in Admin::JobsController#index」,假如已經上傳到 Heroku,則會看到:"We're sorry, but something went wrong."

你可以參考此張動圖試試看:在未登入的情況下,利用網址列:localhost:3000/admin/jobs 嘗試進入後台的工作列表。

錯誤原因

之所以會有這個 bug,我們可以先來看一下 admin 相關的代碼找原因:

  1. app/controllers/admin/jobs_controller.rb

在使用者作任何 admin/jobs_controller.rb 定義的任何動作之前,都要先過 before_action :require_is_admin 這關,也就是,使用者必須要是 admin。

  1. app/controllers/application_controller.rb

在 application_controller.rb,def require_is_admin 中的 if 判斷式判斷的是 if !current_user.admin?,也就是判斷:「當前已登入的使用者(current_user)」是不是 admin。

​ 這樣我們就找到問題在哪了!未登入的使用者,並不適用於 current_user.admin? 這個判斷。要排除這個小問題,以下提供兩種解決方案。

解決方案一:

代碼:

app/controllers/application_controller.rb

if 判斷式改成:if !current_user || !current_user.admin?
如此一來 def require_is_admin 會判斷:

  • 「未登入的使用者( !current_user )」
  • 「登入,但非管理員的使用者( !current_user_admin )」

只要滿足任一條件,就會擋住使用者。

class ApplicationController < ActionController::Base
    def require_is_admin
      if !current_user || !current_user.admin? #多加一個 OR 判斷條件「未登入的使用者」

        flash[:alert] = "You are not an admin."
        redirect_to jobs_path
      end
    end
end

結果:

使用者在未登入的狀況下嘗試進入 http://localhost:3000/admin/jobs,會看到 "You are not an admin.",並被導回首頁的工作列表。

解決方案二:

代碼:

app/controllers/admin/jobs_controller.rb

修改 before_action :authenticate_user!,在檢查 require_is_admin 之前,我們就先確認使用者是否有登入。這個解決方案背後的邏輯是:如果沒有登入的話,自然不可能是 admin 管理員。

class Admin::JobsController < ApplicationController
  before_action :authenticate_user! #改成這樣,表示在所有動作之前,都要檢查使用者的登入狀態。

  before_action :require_is_admin

結果:

修改後,admin/jobs_controller 在使用 before_action require_is_admin 檢查權限之前,會先判斷使用者有沒有登入。所以,使用者在未登入的狀況下嘗試進入 http://localhost:3000/admin/jobs ,會看到 "You need to sign in or sign up before continuing." 並被導到登入介面。

[筆記生肉] MVP 與 PMF(主講:Xdite)

直播資訊

主講人:Xdite
時間:4月10日 20:00
時長:本次直播總時長42分鐘,其中答疑22分鐘。
概要:Xdite 講解 MVP 與 PMF。

直播筆記

關於 MVP(Minimum Viable Product)

  • 產品要以最小可實現的產品為目標,也就是:MVP(Minimum Viable Product)。

  • 招聘網站其實只是 Rails101 的翻版,所以不需要感到恐慌。通常各種創業點子,都能用 Job Listing 和 JD Store 的框架去實現。

MVP(Minimum Viable Product)要如何練成?

  • 點子落地
    招聘網站第一周練習用便條紙拆解動作,並分門別類(Must Have/Should Have/Could Have/Nice to Have),其實就是在練習如何決定優先順序。

  • 如何進一步強化練習?

    • Step 1:腦中有點子
    • Step 2:2 張 16 格紙,想 32 個功能。(之所以要用格子,是因為格子會限制思緒的範圍,讓你不會走偏)
    • Step 3:Nice to Have 通通劃掉。
    • Step 4:接著刪到剩 8 格,這 8 個功能就是第一階段就作這些東西。(一般來說,真正重要,值得去作的只會有 1/4。)
    • Step 5:寫下 User Story。
  • 開發過程
    不要想著要等學會全部的 Ruby on Rails 知識才動手,不可能全部看完的!發揮目前所學,並放心地依賴 Google 大神,遇到問題或不會的地方再 Google 查解法。

    • 原型 –> 骨幹 –> Onbording –> 靈魂。 拆解並找到「最小的解決問題」。一口氣作大東西會失敗,要知道大東西是演化出來的!
    • 練習解決最小需求。例如思考:「目前學的基礎 Rails101 的架構可以運用在什麼地方?」
    • 「小」意味著「好控制」,容易 Debug、控制範圍。
  • Xdite 老師的 MVP 舉例:

    • 評估點子甚至不用寫程式,Xdite 老師先創微信群來評估「極速讀書」的需求,確定需求後才作開發。成品極速讀書會其實就是 Job Listing 的框架實現。
    • 全棧營赤裸裸的原型只是一個交作業系統,慢慢演化變成了現在的全棧營。

其他重點

  • 最好的學習方式是:「用且踐行」。把現在當作盡頭;設一個小範圍,直接去用。

  • 接下來的大賽(4/17 - 5/4)建議:

    • 解決最小需求!
    • 裝潢!裝潢!再裝潢!
    • 作是最好的學。
    • 訣竅及應有心態:
      • 尋找「剛需」。
      • 幫助別人解決一件小事情。
      • 把這件小事情作好。
      • 目的不是與其他人競爭,而是讓自己有一個完成的作品。
      • 大賽是「脫胎換骨」的第一步。
      • 幫助別人可以「實際變現」。
  • 怎麼當大神:

    • 勇於踐行,你就可以超越 90% 只說不作的人。
    • 完成一個完整作品,成為人中 1%。

    所以才要參加比賽,利用比賽走過成為大神的過程。過程中,還要寫教程教別人。

  • 普通人銷售時間多份的最快方法:

    • 把解決方法產品化。
    • 脫離重複勞動。
    • 解決日常小壓力。

Q&A

  • Q:參考 Rails101 發現 Job Listing 作不下去。解答很多地方跟 101 有點不一樣。該怎麼學習?
    A:多作 Job Listing,用 16 格去觀察順序。

  • Q:對臉皮薄的同學有什麼建議?
    A:把臉皮弄厚,別人又不知道你是誰。不要害怕丟臉!(大不了換一個 Slack 群)問是很快的前進方式。

  • Q:要打字速度嗎?
    A:用作業練就好。

  • Q:Job Listing 需要作很多遍嗎?
    A:多去思考 User Story,不要糾結語法。

  • Q:以現在的程度,感覺參加大賽有點心虛。
    A:沒參加才是大錯特錯!比賽就是大補帖,而且跟牛不牛無關,跟你有多想去幫助別人有關。

  • Q:MVP 要選自己擅長的事情,MVP 是否適用不怎麼擅長的事?
    A:不擅長的事情根本不該當創業項目。

  • Q:能講講作業優秀的標準嗎?比如做一遍job-listing和rails101的最好最快完成時間大概是多長?能給我們一個標準參考一下嗎?
    A:沒有什麼「最好最快」,你聽到真實的標準會崩潰!

  • Q:给我们一个方向,不知道方向,我觉得自己的学习是盲人摸象,不成体系,最终不知道自己到底是学到了还是没学到。
    A:看看上一期編程大賽的學員作品吧!不要把注意力放在「你多不會」;「如果你一直端著自己的短板,你就會覺得自己是全世界最廢的人。」;而是要去想:最終你想變成什麼樣的人?脫離什麼?讓自己往目標逼近。

  • Q:線下班學員用全部的時間學習,都還那麼艱難,我們線上的效果相當於線下效果的幾成?
    A:學習成果跟線上、線下無關,跟你的熱情還有投入的努力有關。

  • Q:為什麼速讀要限制 30分鐘?
    A:30 分鐘是人類能專注的最長時間,時間再拉長就沒用了。請你放下你的「傲慢」!老師是以「普通人的最低標準」設計的,不要自己擅自亂改規格。

  • Q:一想到現實中的那些無能為力,我的腦袋就會停止運轉,什麼都不能學習不能思考了,包括不去想它們都做不到。
    A:睡覺變幸運理論。心情沮喪 = 不幸運,用睡覺把「不幸」給睡掉。

  • Q:老師你平時都怎麼安排時間,我想參考一下。我是那種 不到最後關頭都絲毫不會急著要做完的類型。
    A:「你是拿學費開玩笑嗎?」

  • Q:如何進入學習的心流?
    A:

    • 要保持專注並進入心流,最好有降噪耳機(Bose QC35),便宜點的方式就是鴨舌帽反著戴,藉由限制行動跟視線範圍讓注意力集中在前方。
    • 讓大腦輸入速度 = 輸出速度。要怎麼樣達到呢?先想想「專心」是什麼樣的感覺。運動就是個好例子,當我們在動的時候,會很專心,反倒是坐著會容易分心。「動」就是為了「讓腦袋慢下來」。所以筆記要用手寫,最好有格子,讓注意力集中。

其他 Q&A

  • 做一個關心他人需求的人,在幫助的過程中就能尋覓到「剛需」。
  • 要不斷想「最小可以實現的單元」
  • 速讀跟李笑來的「隻字不差」沒有衝突!「隻字不差」是指重點看三遍,弄清楚上下文。
  • 筆記 16 格就是 16 格,不要自己亂加格子!
  • 作業不要想辦法加速,踏踏實實地作完。
  • 不用背下整個作業內容,只要背 CRUD!
  • 前端就是一直吃屎、一直吃屎,吃到最後就會發現挺好吃的。

[筆記生肉] 基礎知識補充與開發技巧(主講:Nic)

直播資訊

主講人:Nic 老師
時間:4月13日 20:00
時長:總時長預計42分鐘。
概要:Nic 老師教你如何在小白程序員時期避開不必要的糾結,讓你獲得更多的基礎知識補充還有開發工具實用小技巧。

直播筆紀

放下你的糾結:練習不夠多的時候,不用去在乎太多細節。新手時期:

  • 不要嘗試搞懂過多的「為什麼」。
  • 不要了解一個需要花上超過一天的問題,或至少設一個停損點。 不然容易「注意力」分散。

指令下錯如何自救

  • pwd:當前路徑
  • ls
  • cd:輸入到一半用 tab 鍵自動生成文件名稱
  • rails g model <名稱> <欄位>:<型別> <欄位>:<型別> 如果打錯字;用 rails d model 刪除後重建。
  • control + a:可以讓光標快速跳到最左(開頭)。
  • control + e:可以讓光標快速跳到最右(尾端)。

Atom

  • 快速開啟檔案:Command + P 複製路徑 → Command + P → 貼上 → Enter。快速找到目錄底下的檔案並開啟。
  • 存擋:command + S
  • 全選:command + A
  • 復原:command + Z
  • 搜尋:command + F

開發必須「有始有終」

重要的打字習慣:
- 例:defend 一起打,再打裡面內容。

  • 例:<%= %> 先打 <%=%>
  • 例:doend

終端強化,除了美觀,更要實用。

  • Bash vs Zsh? Zsh 是強化版的 Bash。可以在終端機利用 echo $0 確認自己是 Bash 還是 Zsh。
  • Zsh 小技巧:ls 後,用 tab 鍵選擇資料夾。
  • 如何安裝:參考幫助文檔,在終端機輸入chsh -s /bin/zsh就能更換為 Zsh。

Git 基礎知識

  • . :選所有檔案
  • git log:git 歷程
  • git status:目前的修改狀況
  • git diff:比較差異

Heroku 是什麼?

  • 為什麼數據和本地不一樣? 因為本機測試時的數據不會隨 App 一起部署到 Heroku。
  • 如何刪除 Heroku App? 至 Heroku 網站,選擇要刪的 App 後至設定中刪除。

Q&A

  • Job-listing 要作到什麼程度才能參加大賽?

    • 完成、稍微了解就可參加了。
  • 為什麼有時候是 rails g、有時候是 touch

    • rails g = rails generate,會生成 rails 特別的模板。
    • touch 是(電腦)系統自帶的方法。
  • 如何使用 git 時光機?

    • git reset --heard Head~1
  • 想把生成的檔案清空?

    • git add .
    • git stash:暫存
    • git stash clear:砍掉暫存

[分享] 我們該如何想像 HTML/CSS?用生動比喻、滿滿範例帶你入門

我們要怎麼樣去想像 HTML/CSS?

既然人腦「無法用未知去解釋未知」,我們不仿先暫時把 HTML 語法想像成是一個「工廠」,而我們可以利用這個工廠,也就是 HTML 語法,去決定生產特定形狀的零件。這些零件組合起來,就是一我們要的「網頁的結構」

  • 在這座工廠裡,我們需要「標籤(tag)」才能下指示,告訴廠長要生產什麼型號的零件。像是給他 <h1> 的標籤,廠長就知道要生產的是:大標題(Heading 1)。

  • 只指定樣式是不夠的,萬一廠長把工廠裡所有素材都作成特大標題就慘了,對吧?所以我們要講清楚、說明白,明確定義:從哪裡開始作、到何處停止。這也是為什麼 在 HTML 中有「開始標籤(start tag)」「結束標籤(end tag)」

那 CSS 是什麼角色?要區別 HTML 跟 CSS,我們再來想像一下:HTML 工廠很懂生產,但設計能力近乎於零。因此,想要零件漂漂亮亮的話,我們就得向外聘請名為 CSS 的「設計團隊」,讓這個團隊去專門負責「網頁視覺」。也就是,讓 CSS 設計師們去決定「樣貌」,再交給 HTML 工廠,讓工廠拿去套用在零件上。

div 與 span 的不同

「塊級元素」和「行內元素」聽起來還是很抽象,不如我們這樣想:工廠生產出一大堆零件:大大小小的標題、段落、按鈕,接下來要怎麼組裝跟加工?我們需要兩種方式:

<div> </div>:塊級元素。
<span> </span>:行內元素。

假如目標是製造一架機器人(EVA 初號機),當工廠把零件都搞定了,我們接下來就可以把零件整理成幾個大區塊:手臂、腳、身軀、頭,然後各個區塊可能會有一定上色或是拼接方式,就可以針對該區塊一次加工!這就是 <div> </div> 的功用。

既然 <div> </div> 是處理大區塊,自然需要較大的工作空間,也因此帶有「換行特性」。在顯示上會前後多空一行。

那麼,如果我們只想針對一個小細節去作加工,我們要怎麼處理呢?殺雞焉用牛刀,我們不需要用到 <div> </div> ,而且 <div> </div> 後,前後會多一個空行,這樣也未免太突兀了。<span> </span> 恰恰好符合我們的需求,讓我們可以鎖定一個小範圍作調整,而且不會讓排版因為這個調整而亂掉。

class 與 id 的不同

如同開頭提到的:讓 CSS 設計團隊去設計樣式,再交給 HTML 工廠套用。那麼,當同樣的設計樣式要用很多次、用在很多不同地方,最方便的方法把這個樣式建成一個「模子」,未來要用到時,用模子產出就快多了!而這也就是「屬性(class)」的概念。以下圖為例, 我們把名為 .so_green 的 class 交給 HTML 工廠,HTML 會把它套用在區塊跟行內元素上。

注意:我們交給工廠的是一個模子,至於這塊模外觀長什麼模樣,就要仰賴 CSS 團隊的設計了。同樣以下圖為例,CSS 定義了:字要擺中間、綠的背景跟白的字、從字算起留 2px 的空白間距。

我們也可以再把 class 定義得更詳細一點,像是只能給區塊元素(<div> </div>)使用的 class,或是(<span> </span>)專用。

既然有了 class 可以作模,那我們為什麼還需要 id?

網路上搜尋到這麼一段解釋:

「相信應該有不少人曾經重覆使用 ID 來套版吧!畫面一樣套的美美的,哪會有什麼問題,對,若只單單拿來套版的話,不會因為重復使用 ID 而使得此樣式無法使用的狀況,但今天若使用 Javascript 或 ASP.NET 時,當 ID 重覆時,程式則無法正確的判斷出,誰才是正身。」

如果今天我們要請不只一個設計團隊,我們還想另請 Javascript 呢?假設這兩個團隊設計不同的東西,但在命名上偷懶,不約而同取名為「樣式 A」,那工廠是不是就會傻傻分不清楚了?所以我們會需要 id,讓樣式有唯一性。

p 與 br 的不同

換行、連續換行、連續空格,在 HTML 中都會被視為是「一個空格」。如下圖:

不管我們空了幾行或是幾個空格,因為沒有標籤,工廠通通當作一個空格處理。因此,當我們要幫文字排版,斷行、空一行、段落等等,我們會需要專門的標籤,也就是:

<p> </p>:定義段落
<br/>:插入換行

如何使用 table 排版

當有若干筆資料要排版成「表格(table)」,以下圖的表格為例,我們可以照著以下步驟作:

  1. <table> </table> 標籤定義「表格」。
  2. 依序插入表格的第 1、2、3 行。HTML 中,「行」是由 <tr> </tr> 定義("tr" 為 "table row" 的縮寫)。
  3. 每一行由若干筆「資料」組成,一筆資料為一「格」,所以我們要在每一行(也就是 <tr></tr> 之間)依序放入資料。每一格資料使用<td> </td> 定義("td" 表示 "table data")。

[筆記生肉] 開學第一周直播(主講:Xdite)

直播資訊

主講人:Xdite老師
時間:2017年4月5日 20:00
時長:主講時長約20分鐘;答疑環節時長約45分鐘。
概要:

  1. 課程運作模式
  2. 學習方法
  3. 互動答疑 Q&A

直播筆記

全棧營內容:主修(2個月,Idea、協作)、選修(1個月,自己或與別人協作作項目 / 作全職開發)

  1. 你可以收獲:

    • 編程能力(相當於 18 個月的自學)
    • 創業作產品(從如何開發到如何行銷)
    • 協作能力
    • 全新的你
  2. 背景跟學習成果沒有正相關,學不好的兩個原因:

    • 傲慢,因為稍微有一點基礎就偷吃步,沒有乖乖照著教材苦練。
    • 同時學多門學問,分心。「人類注意力、體力有限」。

    每天請至少要留 1 ~ 2 小時給全棧營。

  3. 不要擔心落後,學習速度會急起直追。相信自己可以進步!

    • 用 ORID 體察自己的潛力跟進步
    • 參與 Meetup,把作業帶去補進度、讓其他人現場幫你脫坑。不要在家裡埋著頭猛力地追!千萬不要趕,用自己的步調完成練習。
  4. 用大賽驗收學習成果。不要怕會「輸」或是作出來的東西「醜」;參加大賽是為了調動目前所學的技能、逼出潛能!比賽就是一個大寶箱,「厚著臉皮參加」。

Q&A

  • Q:上班族如何安排時間?最少多少時間?
    A:10 hr/week,一個晚上、一個全天。參與 Meetup 一起寫,加速進度。

  • Q:為什麼不能用思維導圖學習?
    A:思維導圖是發散的。現在的學習是在學動作(模塊),應該專注在如何組合。無法用未知解釋未知,而且要學的東西太多,不斷延展、無窮無盡,最後會像助教一樣腦袋爆炸了!

  • Q:要不要練盲打?
    A:不用練盲打,練習作業自然就會變快了;有需求、高頻率就能練成,就像英文也不用刻意練習。

  • Q:後面會有語法講解嗎?要不要自己先學。
    A:後面會講解部分語法。先練習再教才有用,千萬不要反過來!

  • Q:如何評量反覆練習的學習成效?
    A:初學者:寫出 CRUD 即可。現在大家都是天才,要對自己有信心!

  • Q:老師推薦學員多用小工作嗎?
    A:小工具是為了加快效率,但不用為了效率硬跟著載。跟著自己的進度,快樂學習!

  • Q:Ruby 就業前景?
    A:名列前茅不用擔心就業問題,而且會有內推;起薪:10K UP。全棧營的水準比業界還高,重點是:你有沒有對得起自己的良心和學費、比賽!
    全棧營的訓練:培養你的程序員素養。
    參加大賽:學習如何讓點子落地、協作、裝潢。

  • Q:如何自我約束?

    A:放鬆是人之常情,但作業要作。

  • Q:第一名的陳同學初期素質比較好,我們要如何鍛鍊學習方法和意志品質?

    A:臉皮厚、樂於助人才是關鍵!致勝秘訣就是寫教程、努力幫別人(提取)。

  • Xdite 對優秀程序員的定義:

    • 自我成長
    • 幫助夥伴共同成長
    • 懂得協作 非表現型人格,樂於作團隊的協調者、觀察團隊需求。優秀的程序員,到頭來都會變全棧程序員,因為會為了解決各式需求而到處找解答。

    寫程序可以讓你從「低品質勤奮」解放。

其他 Q&A

  • CRUD 就照基礎的樣式背,過很多天就寫錯是不行的。
  • 加分題(電影)是為了讓大家遷移、變形,Job listing 也是。
  • 要有「拿得出手的技能」。
  • 沒做完 Rails101*3 不要打開新課程!
  • 學習編程要時時刻刻覺得自己是天才!
  • Rails101 要一天內作完!不要斷斷續續地作,成效差很多。
  • 不要為了全棧營特地去報一個英文課,會兩頭空。
  • 作業可以遲交,但時限前一定要交。
  • 用的時候就會變天才了,學 html / css 只看教程會矇逼。
  • CRUD 要背、CRUD 要背、CRUD 要背!
  • 全職學習的同學自我要求要比較高(瑣碎時間多看一些幫網站穿衣服的訣竅)不要低標準!
  • 如果覺得教材太簡單,應該要提高自己的標準。
  • Ruby on Rails:網站 / API、生態圈成熟,用來訓練新手相當適合。(美國的全棧營都是以 Rails 為基礎,因為 Rails 程序員稀缺。)
  • 你永遠都跟得上!
  • 加油,對自己信心高一點全職學習的人請立刻自願成為主持人!
  • 不用看明白「幫助文檔」,有個印象就好。
  • 全棧營不會教如何寫小程序。
  • 台灣就業情況,就業是跟 motivation 相關。全棧營的訓練就是為了要把你培養成一個賣相好的人,沒動力、標準低自然難就業。
  • 再忙、再累,ORID 至少寫一句話,隔天再展開成三句話。

[圖解] Slack 筆記術

紙筆、工具軟體,有千千百百種記筆記的方式,用 Slack 上的 Post 有什麼好處?

主要好處:

  1. Slack 的 Post 支援 Markdown 語法(而且會迅速將原始碼轉換,所見即所得),可以快速作出條理分明的筆記;如果你還沒熟悉 Markdown 語法,Slack 也有便捷的小工具列供你使用。
  2. 完成後可立即分享給個別同學或特定頻道,也可以允許讓其他成員編輯。
  3. 「新增 / 保存 / 發表」的步驟與 Logdown 新增文章或另外再開其他工具相比,步驟較簡單、快速。另外 Slack 的 Post 會自動存檔,相當省心。

其他心得:

  1. 全棧營大部分的活動與交流都集中在 Slack 上(發問、各地區頻道),讓筆記也在 Slack 上進行,避免頻繁切換工具,也能讓與全棧營有關的資源集中,保護注意力、節省時間。
  2. Slack 已經成為主流企業或新創團隊的協作工具了,充分探索 Slack 利大於弊。

[步驟 1] 左側欄 DIRECT MESSAGES 選自己的帳號,開啟自己與自己的訊息畫面

[步驟 2] 點 [ + ] 圖示,在選單中點擊 [Post] 新增文件

[步驟 3] 編輯 Post 內容

步驟 2 點擊 Post 後,Slack 會跳出編輯視窗讓你編輯 Post 的內容,就可以開始記筆記囉!

  • 標題:建議標題加入一些分類關鍵字,未來要搜尋時會比較容易找到。例如:「Meetup」、「元學習」、「Q&A」等等。
  • 內文:可以使用 Markdown 語法,或用 Slack 的快捷工具列作一些簡單的排版,如:標題、條列項目、引用等等。

尚未分享(Share)的 Post 可以在 Your Files 找到。

[步驟 4] 完成後,點擊右上角 [Share]

[步驟 5] 在 [Share with] 設定分享對象為自己後,點擊右下 [Share] 分享出去

你也可以將 Post 分享給其他人,或分享至特定頻道。

把 [Let others edit this post] 勾起來,就可以讓分享的對象對 Post 進行編輯了。如果你是在分享到特定頻道的情況下開放編輯權限,則該頻道內的成員都有權限編輯 Post。

完成。日後你仍然可以對 Post 進行修改 & 分享!

分享給自己後,Post 就會出現在自己的訊息中。之後你可以再編輯 Post,添加補充或連結、補充想法,就會是一篇有模有樣的心得文/ORID 了!

[圖解] 使用 Google Analytics 追蹤你的 Logdown 流量

Logdown 自身的後台沒有提供網站流量的相關資訊,例如:

  • 瀏覽人數
  • 訪客來自那一個國家、使用的語系
  • 瀏覽量

,但我們可以利用 Google Analytics 作到這件事。

[步驟 1] 開啟 Google Analytics & 登入你的 Google 帳戶

開啟 Google Analytics 網頁,點擊右上角的 [登入] 按鈕。


登入你的 Google 帳戶。

[步驟 2] 點擊註冊

如果你是初次使用 Google Analytics 的服務,會看到這個頁面;直接點擊 [註冊]。

[步驟 3] 填寫新帳戶所需要的資訊(帳戶名稱、網站名稱、網址)

帳戶名稱、網站名稱就依個人習慣跟喜好命名。
網址:填入你的 Logdown 網址。

[步驟 4] 填寫完後拉到頁面最下方,點擊 [取得追蹤編號]

[步驟 5] 同意 Google Analytics 條款

[步驟 6] 成功新增,複製「追蹤編號」

複製「追蹤編號(Tracking ID)」,下一步會用到。

[步驟 7] 回到你的 Logdown 後台 [Blog 設定],填入追蹤編號。

Logdown 後台 → [Blog 設定] → 找到 [Google Analytics ID] 欄位;
這裡所說的「ID」就是我們在上一步複製的追蹤編號,直接貼上。

[步驟 8] 填妥後,記得點擊 [Submit] 提交。

完成,日後就可以利用 Google Analytics 檢視你的 Logdown 流量囉!

註:Google Analytics 設定好後,24 小時內資訊不完整是正常的,莫急莫慌。

[金句整理] 電影 <Dangal> / 萬維鋼菁英日課 / 新生大學文章

金句整理

  • 電影 <Dangal>(台譯:<我和我的冠軍女兒>)

    • 「在比賽之前,要先戰勝恐懼,至少我女兒已經戰勝恐懼。」
    • 「爸爸不是每次都能來救妳。妳得要憑自己力量戰鬥,盡全力...救妳自己!」

  • 萬維鋼專欄 <日課 158|高手修煉手冊4:風險投資人的養成>

    • 薩卡面對壓力的方法是反覆對自己說一句話:『今天晚上我還是會回到我的床上。不管這一天有多難,不管當天的事有多棘手,晚上我就可以獲得安靜』
    • 任何時候都要真誠,不要模仿任何人,永遠作最真實的自己 — 而且你不必為此道歉。
    • 你一定得有一個強烈的觀點,然後你還得有放棄這個觀點的勇氣。有強烈的觀點,你才能下水去做這件事。可是一旦現實告訴你這個強烈的觀點是錯的,你還得能馬上調整,而不是固執己見。
  • 新生大學文章 <笑來老師交給我的 59 件事> ,通篇受用。

Comments