五倍紅寶石- JavaScript & jQuery 前端開發入門實戰 (Kuro老師）

https://5xruby.tw/talks/JS-jQuery-2017-7

這門課程將透過 jQuery 這套跨瀏覽器的 JavaScript 函式庫來簡化 HTML 與 JavaScript 之間的操作，即使學員在不熟悉 JavaScript 這門程式語言時，也能打造實用的互動效果，進一步認識 JavaScript 與前端開發的眉眉角角。

---

其實我很害怕任何JavaScript相關的東西,因為有很挫折的經驗囧
雖然在那之後自己有多看一下相關的東西，不過有點支離破碎
趁這次正好好好重頭有系統的研究一次
不然想當年那個搞不清楚東南西北,然後哪個是JavaScript哪個是jquery都搞不清楚的時候真的很撞牆
或是從最基本一開始上課就有講到的，如果不透過var去宣告變數會讓他變成全域變數，成為window成員屬性之一 （嗯～想當年的我就是連這個都不知道）
第一堂課先從JavaScript最基本的語法講起，然後再講到DOM,也講到了要如何用jquery和JavaScript選到自己想要元素，也有出練習題目讓大家可以實作回答問題．
最後也有講到一些JavaScript讓我覺得很謎的部分，比方說是數字又不是數字的NaN
你明明就Not a Number但是卻又是數字

typeof NaN ==> "Number"

又或者是為 JS 隱含 動轉換型別的特性,比較數值時, 建議 採 === 取代 ==
JavaScript 是個事件驅動 ( Event-driven ) 的語言
這是上課後期講的東西，這其實也是讓我對js覺得困惑的東西，以前常常我以為他應該要被驅動了，結果一點反應都沒有．
preventDefault什麼的對我來說也和浮雲一樣

---

下面這東西也是原本我搞不清楚的用法，為什麼有時候大家要直接指定到要做操作的元素，有時候卻要指定到上一層去接收
這點課程裡面有特別介紹，因為在網頁載入完成後才產生的元素,先前綁定的事件是無法被觸發的。
所以必須要利用js 事件會向上傳遞的特性,先綁定到 元素上,再由 元素將事件指定給新 成的元素。

$(".del").on('click', function() {
  $(".wrap").remove();
});

$(".wrap").on('click', '.del' ,  function() {
  $(".wrap").remove();
});

---

當然也有講到實作上常用到的ajax，一開始先從簡單的範例開始，帶著我們練習了從randomuser.me上抓資料回來更新自己的網站
課程的最後更是帶大家做了一個配合google map和data.taipei上的YouBike資料實作了一個可以顯示哪邊還有車可以借的網站

---

課程的最最後有講到一些js更謎的部分
js裡面可以允許變數先使用在被宣告,函式宣告與變數宣告都會被提升,但函式的優先序會比
Immediately Invoked Function Expression,匿名且立即被呼叫的 function
為 延長外部變數的生命週期，在 function 中定義的 function,內部的 function 可以存取外部 function 定義的變數, 這樣叫做 Closure

---

我覺得我上過這一輪之後比之前更了解我在寫js的時候我到底在幹嘛，而不是只是貼上別人說這樣子ok的程式碼，我很希望課程可以再多幾堂聽到更多東西XD

五倍紅寶石- 深入淺出立即上手的HTML網頁設計(Amos老師)

雖然我是資管系畢業的，但是因為畢業之後就沒有再碰相關科系的東西，所以連最基本的HTML都差不多忘光了，更不用說是CSS……
都不太想提自己是資管了囧

而且其實我是很害怕前端的，以前專題的時候常常實際的外觀和我希望的外觀不一樣，我只是想要移個位置為什麼那麼難QQ
常常都在想要是我可以伸手去移動網頁上的東西就好了（想太多）

外加以前常常是自己亂用亂用，碰到問題上網google把大家寫的解法都試一下看哪一個有用就用哪一個，但是因為不了解那些css真正的意義，
所以很容易之後繼續又犯一樣的錯誤
老師上課的時候強調了好幾次我們要去理解它背後的邏輯，這樣之後自然就會通了
我覺得這部分是線上教學網頁比較少解說的部分

特別是對於float或是position，這兩個老實說我沒有真的搞清楚他到底是怎樣運作的，一直以來我腦中都是像下面這樣
float? 你是要飄去哪啊
position? 一個路痴哪會知道什麼position(?!)
特別是position,對我來說真的太謎了,但配合老師的講解，加上課堂上的練習，總算沒有之前那麼搞不清楚頭緒，下面是我上課的時候寫的memo

---

position

absolute

• absolute
• fixed
• relative
  會先從資料流當中抽離出來獨立一層
  
  1. 先找父層有沒有上面三種定位設定任何一種
  2. 有找到任何一種定位設定就靠在該層上
  3. 若所有父層都沒有設定就設在視窗上

relative

因為不會抽離出來獨立一層，如果只設定position: relative;然後沒有設定任何位置的話不會有任何作用．
設定位置後會跑到別的地方，但本來原有的位置依舊是繼續佔著

      position: absolute;
      left: 0;
      top: 16;

fixed

直接找視窗位置

---

還有一個其實很基本，但我一直忽略他的事實，就是…..網頁上的元素其實都有分成是block還是inline兩種

顧名思義可以和大家排在一起的就是inline(ex: span/ a /img ),一個人就佔掉整行的是block(ex: p/div)
inline預設沒辦法設定寬度/ padding上下/margin上下,可以想成只有長度沒有厚度的東西
但傻傻的我，以前常常想要去設定inline元素的寬度之類的(遠目)
這就是看到什麼就用什麼，但沒想過這些東西的本質的後果orz
當然搞清楚之後對於css的display設定成block/inline/inline-block會影響到什麼東西也更理解了

當然老師有說，切版是很吃經驗值的東西，而且很多東西還是要多用才會熟悉，才不會忘掉，因此之後的練習是很重要的

最後，html/css雖然不用一開始就面對讓人痛苦的環境設定問題，但是一個用的順手的編輯器是很重要的
自己編輯器是用sublime,老師有投影片介紹一些可以讓寫html/css更方便的功能
https://www.slideshare.net/banPrint/sublime-text-51689543
覺得ctrl+w可以幫我把tag外面再包一層tag非常方便，不然以前都要自己加然後再整理一下縮排,很麻煩

devise3新增欄位

    devise_parameter_sanitizer.for(:sign_up) { |user_params| user_params.permit(:email, :password, :password_confirmation, :name, :school) }

devise_parameter_sanitizer.for(:sign_up) << :name

只是靠北一下自己之前只會加一個欄位進去但是不知道怎樣加一個以上進去orz

Written with StackEdit.

假裝看不見的capybara

昨天被水豚君搞到快崩潰QQ
只不過想要讓他幫我選個下拉選單怎麼覺得人生好難
就是下面這個樣子的select，但是卻一直跳error說找不到

 Capybara::ElementNotFound: Unable to find select box "court_observer_school"

上網google一下感覺問的人還蠻多的,不過有回說有找到答案的好像沒有很多？可能大家狀況都不一樣

• 別人的狀況：
  option裡面的值是model裡面撈出來的，但是rails裡面test的model是分開來的，所以抓不到東西
  但我的不是啊啊啊啊啊，所以這不是我要的答案
• 別人的狀況2:
  其實你html裡面真的沒有那個東西吧?!
  不過我有確定我測試在跑的時候html真的有把select生出來,可是水豚君就是當他不存在QQ

最後聖杯君（？！）幫我找到了原因
先說結論:

• 我搜尋的select court_observer_school是個display: none的東西，水豚君預設是看不到他的
• 我在網頁上看到的select其實是js產生的,所以如果你把developer
  tool打開來的話，選下拉選單會看到有東西閃一下（就是下面那個div.chosen-container的部分),不過水豚君是管不到他的

解決方法,加下面這行讓他看得到隱藏起來的東西

Capybara.ignore_hidden_elements = false

不過因為這是把預設值改掉,用完要記得改回來
不過因為這是把預設值改掉,用完要記得改回來
不過因為這是把預設值改掉,用完要記得改回來
（很重要所以講三次)
總之就是一個因為不熟水豚君&沒發現選單是js產生造成的悲劇………

<div class="form-group select optional court_observer_school">
    <select class="select optional form-control" name="court_observer[school]" id="court_observer_school" style="display: none;">
        <option value="">目前就讀學校（選填）</option>
        <option value="A學校">A學校</option>
        <option value="B學校">B學校</option>
        <option value="C學校">C學校</option>
    </select>

    <div class="chosen-container chosen-container-single chosen-container-active" style="width: 296px;" title="" id="court_observer_school_chosen">
        <a class="chosen-single">
            <span>C學校</span>
            <div>
                <b></b>
            </div>
        </a>
        <div class="chosen-drop">
            <div class="chosen-search">
                <input type="text" autocomplete="off">
            </div>
            <ul class="chosen-results">
                <li class="active-result" data-option-array-index="0">目前就讀學校（選填）</li>
                <li class="active-result result-selected" data-option-array-index="1">A學校</li>
                <li class="active-result" data-option-array-index="2">B學校</li>
                <li class="active-result result-selected" data-option-array-index="3">C學校</li>
            </ul>
        </div>
    </div>
    <label class="select optional control-label control-label" for="court_observer_school">學校
    </label>
</div>

Written with StackEdit.

rspec- assigns

    it "assigns the requested contact to @contact" do 
      contact = create(:contact)
      get :show, id: contact
      expect(assigns(:contact)).to eq contact
    end

    def set_contact
      @contact = Contact.find(params[:id])
    end

可以用來檢查controller裡面的實體變數，上面那個的話就會檢查show裡面的@contact是不是等於我們傳給他的contact
然後我常常忘了後面有s…

Written with StackEdit.