全棧營優惠碼 / 獎勵專用

如果你也想加入全棧營,想要較優惠的價格,歡迎使用以下推薦碼獲得人民幣 2000 元減免:

6717-11f3-6ade


用獎勵刺激分享動力,給賞請用以下 QR Code:

[分享] Global Team Online Meetup 參與方式及 zoom.us 基本操作

關於 Global Team Online Meetup

每週二、四、六的晚上 9:00(UTC+8)有固定的線上 Meetup,利用 zoom.us 連線進行。

如何加入 Online Meetup

軟件需求

  • zoom.us
    • 主要用途:Meetup 在 zoom.us 上進行。
    • 加入方式:下載 zoom.us;參與 Meetup 建議使用桌上型、筆電裝置,方便 Meetup 進行時的相關操作(詳見下方)。

社群需求

  • 微信

    • 主要用途:關注 Meetup 相關消息。每週二、四、六,文志鵬班長會事前將參與 Meetup 要用到的 zoom 連結發至群上。
    • 加入方式:請至文班長在交流論壇的 【Global Team】4月线上meetup报道贴【每周246】,掃碼加入 Global Team online meetup 微信群。
  • Slack

    • 主要用途:發問問題;Meetup 開始之前,請將問題整理、發至 Slack 的 #globalmeetup 頻道。
    • 加入方式: 開啟 Slack,搜尋 #globalmeetup,點擊 Join Channel 加入。

Online Meetup 流程

Online Meetup 開始前:

  • 將問題發至 Slack #globalmeetup,想想自己這週的進度、可以分享的內容(概念、工具、坑),帶著一顆交流分享的心(?)加入。

  • zoom 連結 & 加入

文志鵬班長在 Meetup 當天會將 zoom.us 連結,發微信 Global Team online meetup 群上。點擊連結即可開啟 zoom.us 軟件、加入 Meetup。

Online Meetup 進行中:

  • Part 1. 自我介紹
    依序輪流。簡單說介紹自己:「我是某地區的誰誰誰,目前進度在哪哪哪。」,跟大家打聲招呼,讓大家認識你。

  • Part 2. 分享「兩最一坑」
    依序輪流。跟成員們分享你的收穫(工具、概念)、你在學習過程遇到的坑。

  • Part 3. 交流、問題時間
    不論是技術性、非技術性的問題,都歡迎你提出來與同學們討論,或請教前期學員(如文班長、近期邀請的一期嘉賓)的意見。

參加 & 基本 zoom.us 操作

Step 1. Meetup 前到 Global Team online meetup 微信群,點擊文班長準備好的連結。

Step 2. 點擊連結後,會開啟瀏覽器、彈跳視窗,點擊「開啟『zoom.us』」。

Step 3. zoom 會議開啟,順利加入 Meetup!

  • 右側欄位(綠色、橘色框框處)

    • 與會者:主持人會依照與會者名單,由上至下依序點名。 [補充] 鼠標移至自己的欄位,會出現「更名」選項;使用全棧營的用戶名稱或本名,能讓大家更快認出你唷。
    • 對話:過程中有要分享連結、臨時追加問題,可以利用對話視窗。(「離開會議」後就找不回對話記錄了,過程中記得記下,或是 Meetup 結束後備份再離開。)
  • 工具列(左下方紅框框處)

    • 解除靜音:發言時,點擊此處「解除靜音」;沒有發言的時候,要記得保持靜音唷,不然鍵盤聲或周圍環境的聲音可能會影響到主持人或其他同學的發言。
    • 啟用視訊:如果不想露臉,可關閉視訊。
  • 工具列中間(中間下方淺藍框框處)

    • 對話:點擊開啟右側欄位的「對話」。
    • 與會者:點擊開啟右側欄位的「與會者列表」。
    • 共享螢幕: 點擊後選擇要分享的畫面,就可以讓 Meetup 成員們看到你的螢幕。 ​

    共享屏幕時,上方會出現一個操作選單,要結束共享時,只要點擊「停止共享」即可中止。

    [補充] 分享屏幕時,可以利用「註記」選單上的功能畫記、標示重點給同學看。

20170428 每周總結

① 本周學到的最棒概念/工具

概念:

李小旋同學:「其實我們每次雖然作不同的事情,但是情緒其實是類似的。『不自信、迷茫、害怕、焦慮』。慢慢調,每一次調整,下一次就會調整得更快。」

很謝謝同學在鼓勵我時給我分享了這麼一段成熟且有智慧的話,解決了近期心中的疑惑:「為什麼每天寫 ORID 而且有領悟,情緒還是會冒出來?是不是有哪裡錯了?」,這疑惑也伴隨著一絲無力感。但事實上,人有情緒是很正常的事,每一次的調整,都是練習並提高自己的調適能力。

工具:

實作遇到問題時,心中有「明確的疑問或目標」,參考吉米的 GitHub通常都能找到解決方法。

② 本周遇到最大的坑

大坑

很容易煩躁,陷入「修改 → 不滿意或覺得作不出來而放棄 → $ git checkout . 或 $ git stash」的循環。進度嚴重耽擱。

領悟&脫坑方案

4/27 星期四聽完直播後,情緒很鎮定,想說趁這個時候來簡單試試看實作「用戶收藏工作 / 用戶取消收藏工作」功能。看著 db/schema.rb,在紙上寫下現有的 models,玩了一下連連看,想到這其實就是 Rails101 中的「用戶加入群組 / 用戶退出群組」。

最後回歸最基本的教材,作出來後,跟自己需求不一樣的地方,或有不滿意的地方,就再去學霸吉米的 GitHub 找答案。在短短的 1 - 2 小時內把拖延了很久的功能實現了,也更有信心往下作。

我的領悟 & 脫坑方案是:

  • 問題的根源是「一口氣想作太多 / 太大的東西」。
  • 開工前用動動手(寫下目標或作法)確實能平穩心情。
  • 很多功能其實都是 Rails101 的遷移。不要自己跟需求硬碰硬,會很容易受挫退縮;回歸基礎教材,有安全感也能確保進度。
  • 先不急著一次作到位,基本的(例如教材)作完,再靠參考別人的代碼或自己改,慢慢優化細節。

20170428 全棧營ORID

Objective

  • 最後一天上班,與同事們道別、晚上聚餐。
  • 利用下班前把本周總結完成。
  • 回到家已經筋疲力盡,但還是硬撐著,延續昨天的「收藏 / 取消」功能,把後台瀏覽已收藏工作的頁面弄出來。

Reflective

  • 高點: 得到主管、同事、公司內其他認識的良師的各種體諒、鼓勵,心裡充滿感激。
  • 低點: 數度想哭,也好幾次真的哭了。

Interpretive

  • 無法思考,領悟很少。
  • 無法辨明今天一整天是什麼情緒,遺憾、傷感、不安等等,彷彿都混雜在一起了。也分不清楚具體是因為哪位人、哪件事而產生情緒。

Decisional

  • 今天一整天充斥無法辨明的情緒、說不上為什麼的眼淚,感覺自己很陌生。
  • 好好睡上一覺,把情緒給睡掉,醒來就能重整心情了。

20170427 全棧營ORID

Objective

  • 今天又一次洗三觀,「千萬不要碎片化學習。要變聰明是你要主動去解問題,產生新的神經突觸。」
  • Global Team Online Meetup 代班主持,今天分享昨天跟謝育初說的「先找 GitHub 檔案再找 commit 的方式。」
  • 謝育初今天在 Online Meetup 為 Bo Hu 同學作很了好的 git 示範,對 branch 的理解相當透徹。「先切出一個 test 分支,完成後到主線 merge 回去。」,之後要試試。
  • Xdite 老師直播,自己吸收的幾個重點:

    • 你無法控制情緒,只能控制情緒的「起因」跟「時機」。有情緒是因為大腦的能量在爆衝。如果要專心,必須要讓大腦慢下來。利用身體其他輸出元件(手、腳)幫助自己專心。
    • 比賽期間的情緒根源通常是出在:「挫折」、「一口氣想作太多事情」。
    • 情緒亂衝的時候:
      • 拿出紙、筆「寫下」你的目標
      • 轉換成有數字的實際目標
      • 找出達到這個實際目標的方法
    • 換一個說法去描述你的目標。例: Xdite 老師現在要「減肥」,但與其想著「減肥」,不如換個說法,說自己的目標是「連續三週早睡早起」。
    • 你不是在比賽,你是在作一個實際的網站。要記得自己在作什麼事情!
  • Nic 助教:「你不會一輩子都在比賽。」,不要因為對比賽無用,就不去學習或了解特定知識。

  • Meetup 結束後,異常平靜。回歸 Rails101 教材,把「收藏(Star/Unstar)」功能實現了。

主要是看 Rails101 章節 7,後來有困惑、不滿意的地方,又去參考了一下吉米怎麼寫。學到:

(太久沒寫字,寫起字整個走樣了...好慘...)

Reflective

  • 高點: Meetup 結束後,完成了一部份的「收藏」功能實現,過程順利。在吉米的代碼中尋找優化方法時,也學到新東西,很興奮!
  • 低點: 週期作祟,腰特別痠痛,一整天的情緒低氣壓。

Interpretive

  • Xdite 老師的直播有點出目前自己的混亂狀態的主因:「一口氣想作太多事情」。
  • 很喜歡「換一個說法去描述你的目標」這個概念。

Decisional

  • 因為週期作祟,身心狀況都不好的一天。
  • 挑一、兩個可以作得好的功能作為本週的目標。費助教在四海群發了:「我們的目標是全棧,想當然爾,後端的東西也不要忘記喔。」講到心虛之處了,這兩個目標要有能練習到後台的部分。

[分享] 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 分享:

20170426 全棧營ORID

Objective

  • 覺得自己最近養份吸收的不是很足,所以看了一下交流論壇的【4月Meetup聚会分享帖】

    • 概念類
      • 劉華佼同學:「要學東西臉皮就要厚。」
      • 「時時勤拂拭,勿使惹塵埃」
    • 工具類
      • Atom 插件 pigment:顏色代碼輸入後,會顯示該色碼的顏色。
      • Atom 插件 emmet :快速輸入 html的開頭跟結尾標籤。
  • 微信群上有同學分享了伯凡日知錄的文章 < 4.25丨学习的本质之一:认清伪学习 >:

    • 「『知識囤積』不是學習。」
    • 「我們已囤積、準備,造成一種獲取了的假象,讓自己繼續滯留在舒適區,而不肯跨進學習區。因為只要跨入學習區,就會面對反饋,就會面對自己的不堪。」
  • 今天的一些幫忙與分享:

    • 在微信幫 Chris 同學解決 admin 的錯誤
    • 秀蓮的 layouts/application.html.erb 問題
    • 與謝育初分享「如何看 GitHub 上個別文檔的歷程,再往回推、找 commit」;拍了一個簡單的示範 .gif 影片:
  • 今晚進度:

    • 套用 Bootstrap theme: Flaty 美化 Bootstrap 元件
    • 優化 flash 提示訊息呈現方式
    • 優化搜尋結果頁面(「沒有符合搜尋結果的資料」、「有搜尋結果」兩種)
    • 統一換頁元件樣式
  • 完成一篇簡單的分享草稿,明天找時間分享。

Reflective

  • 高點:
    • 昨天把在腦中積了很久的分享文 幫網站實現多國語系支援(圖解)發出去後,心情輕鬆了許多。也比較能冷靜下來審視接下來的代辦事項。
    • 全棧營程序媛的同學們給了很多鼓勵與肯定,心裡很感激。作品頁看到學霸吉米跟優秀同學的留言跟支持時,又是一陣激動,意義非凡阿!
  • 低點:
    • 看到很有特色的主題就會覺得我的作品怎麼就這麼無趣。當初心裡想了:NeverAlone(線上線下Meetup召集)、RoR Fair(針對特定族群招聘)等等,但自己把自己侷限住了,懶惰、沒有勇氣跨出「招聘網站」。回想起來特別懊惱。
    • 最近幾天偶爾會有沒來由的情緒化,特別容易泛淚。

Interpretive

  • 不管是在處理出國的事情(機票跟住宿)或是魔改大賽,最近的體悟是:有得失心,或總想著要去計較些什麼,只會讓自己動彈不得。

  • 就算自己挑錯主題又何仿?就把目前的作品盡可能作迭代,多抄跟多寫一些功能,優化頁面。對作品負責。

    Xdite 老師:「用大賽驗收學習成果。不要怕會『輸』或是作出來的東西『醜』;參加大賽是為了調動目前所學的技能、逼出潛能!比賽就是一個大寶箱,要『厚著臉皮參加』。」

  • 全棧營還有下一次 JD Store 魔改大賽,跟未來的隊友一定可以產生新的火花。更何況,往後人生還怕沒有新的想法或創意嗎?

  • 情緒化估計是賀爾蒙作祟,淡定以對。

Decisional

  • 周四仍然會有 Xdite 老師的 Q&A 時間為大家補雞血,在那之前先不跟情緒硬碰硬,等待建議。
  • 對今晚的進度不滿意,明天計劃把暫代的工作內容換掉,讓工作列表看起來更像回事。

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

「切換多國語系」這個功能嚴格來說不是 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. 設定預設語系

  • app/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>
  • 大功告成,來玩玩看吧!

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

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



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

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

20170425 全棧營ORID

Objective

  • 鼓起勇氣把招聘網站的作品貼給同事看,給程式們看的壓力尤其大阿!
  • 完成一篇分享: <[分享] 幫網站實現多國語系支援(圖解)>
  • 晚上代班 Global Team Online Meetup,技術方面仍由鄭智學長支援。
  • 11 點後才開始改招聘網站,進度不多。

Reflective

  • 高點:

  • 自己覺得很無關痛養的切換語系功能(純粹是出於好奇心去研究的)意外得到一些關注跟票數,蠻驚喜的。對於照著教程作、還特地給我意見的同學,心裡感謝。

  • 給同事看的時候心裡不敢奢望會得到什麼反饋或支持(以過去在 Facebook 觀察到的例子,通常問券或幫忙投票一類的發文通常都會冷場作收),沒想到大家非常熱心,尤其關心網站功能,甚至還很捧場幫忙投票。

  • 低點:對作品的主題越想越不滿意,很想打掉重練,但又明白那可能是推自己進深坑,好煩惱。

Interpretive

  • 完成度還不夠這點果然是藏不住,在剩下不到兩周的時間內,要好好優化,目前的狀態距離「完整作品」還非常遙遠。
  • 承上,從這樣的反饋,還是可以發現,大家真正看重的還是網站功能跟作品的完整度。繼續迭代吧!

Decisional

  • 就跟週一一樣,不管是上班時間還是下班後,都閒不下來。情緒一直是很緊張的緊繃狀態。
  • 忘記今天是週二要主持 Global Team Online Meetup 了,明天要多趕一點路。

Comments