Telsa's Blog: 2016

2016年12月30日星期五

Ruby Koans - Hashes

  def test_default_value_is_the_same_object
    hash = Hash.new([])

    hash[:one] << "uno"
    hash[:two] << "dos"

    assert_equal ["uno","dos"], hash[:one]
    assert_equal ["uno","dos"], hash[:two]
    assert_equal ["uno","dos"], hash[:three]

    assert_equal true, hash[:one].object_id == hash[:two].object_id
  end

這次是做這題的時候卡住了,我本來以為<<是會把值加到hash裡面去,但是其實
hash根本沒有<<,array才有
因為第一行預設了hash的值是空陣列,所以這邊才不會跳error
兩行<<其實都是把值丟到一開始預設的空陣列裡面
所以不管是hash[:one]還是hash[:two]都會得到一樣的東西
反過來說,如果一開始只是下面這樣,就會error
NoMethodError: undefined method `<<’ for nil:NilClass

hash = {}
hash[:one] << "uno"

CodingGame - Horse-racing Duals(easy)

就是給你一串數字,然後找出相差最小的差是多少
如果知道each_cons就很快可以解決

pi_array = []
min = 99999999999999999
@n = gets.to_i
@n.times do
    pi = gets.to_i
    pi_array << pi
end
new_pi = pi_array.sort

new_pi.each_cons(2) do |a,b|
    if min > (b-a)
        min = (b-a)
    end

end
puts min

2016年12月29日星期四

Ruby Koans - Array

  def test_slicing_arrays
    array = [:peanut, :butter, :and, :jelly]

    assert_equal [:peanut], array[0,1]
    assert_equal [:peanut, :butter], array[0,2]
    assert_equal [:and, :jelly], array[2,2]
    assert_equal [:and, :jelly], array[2,20]
    assert_equal [], array[4,0]
    assert_equal [], array[4,100]
    assert_equal nil, array[5,0]

做這題的時候碰到了一些問題,我本來以為後面三個都會是nil,因為沒有array[4]可以抓,但是結果卻是要到[5]才會變成nil
http://stackoverflow.com/questions/3568222/array-slicing-in-ruby-looking-for-explanation-for-illogical-behaviour-taken-fr
依照上面解釋的,slicing和indexing本身就是不一樣的
slice第一個變數定義的是元素之間的space,像下面這樣,4還是有在裡面的

  :peanut   :butter   :and   :jelly
0         1         2      3        4

2016年12月28日星期三

CodingGame - Mime Type(easy)

https://www.codingame.com/ide/puzzle/mime-type
最大的卡住是在有一題他會給你”“.mp3.”
我本來以為用split(‘.’)他會拆成

["", "mp3", ""]

結果是這樣

["", "mp3"]

要在後面加-1才會變成我心目中以為的樣子
http://ruby-doc.org/core-2.3.1/String.html#method-i-split

fname.split('.', -1)

@n = gets.to_i # Number of elements which make up the association table.
@q = gets.to_i # Number Q of file names to be analyzed.
list = {}
@n.times do
    # ext: file extension
    # mt: MIME type.
    ext, mt = gets.split(" ")
    list[ext.downcase] = mt
end
# STDERR.puts ext2, mt2
STDERR.puts list

@q.times do |i|
    fname = gets.chomp # One file name per line.
    fname_ext = fname.split('.', -1)[-1].downcase
    STDERR.puts "fname " + fname
    if fname.split('.').size != 1

        if list.has_key?(fname_ext)
            puts list[fname_ext]
        else

            puts "UNKNOWN"
        end
    else
        puts "UNKNOWN"
    end
end

上面是我的解答,就很普通的那種XD
後來看別人寫的

@q.times do
    puts @map[File.extname("x#{gets.chomp}").gsub('.', '').downcase]
end

原來有extname可以直接抓副檔名阿…………
https://ruby-doc.org/core-2.2.0/File.html

kindle

http://booklog.jp/users/telsaiori

kindle買來一年多了,當初很擔心會不會用了1,2個月就被我丟到一邊了,畢竟沒有繁體中文的書可以買,還好用了一年多到現在還是很愛

出來工作以後我看的書比學生的時候少了很多很多,但本質上我算是喜歡閱讀的人
一開始也是想說英文書很多,可以方便買來練一下英文,但結果英文書還是看得不多XD

畢竟很快我就累了冏(如果看言情小說的話是很輕鬆,但是每一本故事都差不多,很快就膩了)
最後實質上還是日文看最多,簡中的也從中國amazon買過幾本,他們電子書賣超便宜的

電腦相關的工具書也買過一些,結論上來說這類型的還是實體書才棒棒

英文的買過一些Cambridge English Readers系列的來看,有分級所以很容易找到適合自己英文程度的書來看,但是故事本身就普普,沒有很吸引我的

日文書的話買過不少

女装して、一年間暮らしてみました

這本書蠻有趣的,雖然有些人聽到女裝可能臉就先歪一半(畢竟很多人心中還是很堅持男生要有男生的樣子,女生要有女生的樣子)

首先這個作者,不管生理還是心理都是男的,並且已婚,就算女裝一年他也沒有愛上男人,他只是單純好奇男女之間到底真正的差別是甚麼,還有把男女綁住的東西是從哪來的,內容並沒有任何和誰好誰壞有關的內容,這只是他自己的實驗過程記錄,以一個完全異性戀的男人來寫這類型的書應該很少見

另外就是貴志祐介的來自新世界,這本外面也有賣中文翻譯本,超超超超超超超超超超超超超超推薦,當初看下去完全不想停,雖然在第一本的前半部覺得普普,但之後真的不想停

最後我在中國kindle買了一系列斯維拉娜‧亞歷塞維奇的書,

都蠻好看的

不過還是偶爾會碰到有我想要的書,但是英日簡中都買不到電子書,或者是他有英文版,但超出我能理解的英文等級,比方說一些推理小說,因為要注意到的細節很多,以我的英文程度去看可能會東漏西漏的,或者是依些比較篇研究的類型也不太適合我

後悔當媽媽

這本是最近在等電子書,網頁上已經有了,但kindle版還在預購中

2016年12月16日星期五

Update CSS Variables with JS

demo:
https://telsaiori.github.io/Update-CSS-Variables-with-JS/index.html
javascript30:
https://javascript30.com
先在root裡面命名變數,變數開頭一定要是”–”,且會分辨大小寫為不同變數

:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}

要使用時像下面這樣,就會按照變數去設定了

img {
padding: var(--spacing);
background: : var(--base);
filter: var(--blur);
}

http://codepen.io/mukiwu/pen/PNZzbd
也可以在其他selector裡面定義變數,讓不同的地方套用不一樣的顏色
接下來需要抓三個input的value

function handleUpdate(){
console.log(this.value);
}

inputs.forEach(input => input.addEventListener('change', handleUpdate));

像上面那樣雖然可以順利抓到值,但要在滑鼠放開的時候才會觸發,滑鼠移動的時候不會有功用,所以要再加入偵測滑鼠移動event

inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

但因為spacing和blur的設定是數字+px,照上面的寫法只抓得到數字,沒辦法直接拿來用,所以這個案例在input後面加了data來定義他們的單位

<input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

<label for="blur">Blur:</label>
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

我們可以使用dataset來抓取所有的data內容

const suffix = this.dataset;

最後完成的function如下

function handleUpdate(){
// console.log(this.value);
const suffix = this.dataset.sizing || '';
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}

suffix是用來抓data的值,因為base沒有設定data,所以多了or去判斷

2016年12月15日星期四

hanaso心得

之前第一次上課覺得還不錯的老師上第二次之後覺得還是換一個
環境噪音真的有點大,這樣子聽三十分鐘有點痛苦

這禮拜有一次有選到一個native的老師,腔調當然不用說,但我覺得除非你已經是真的很會講,只是想要讓自己更靠近native的人才比較有需要特別選native
不然挑個腔調自己可以接受的菲師也很ok,hanaso裡面還蠻多可以找的我覺得

這禮拜也第一次選了topic talk,之前都是上英文會話,就是照著它們的教材上,壓力比較小,比較沒有硬要擠出字的必要,畢竟就是念教材上的字,但覺得對於訓練會話的幫助就還好而已
但也沒有好到可以選free talk(正確地說就算是中文我也不是那種可以隨便和人聊天聊三十分鐘的人),所以選了topic talk

有幾個主題可以讓你自由選擇,也是有一點點教材會教你一些單字和句子,但老師問你的問題都是沒有正確解答必須要自己想,對於硬逼自己訓練比較有用
當然也有一些主題看起來就很難聊的,記得有看到一個主題是"君主制"

2016年12月12日星期一

CSS + JS Clock(javascript30)

#
CSS + JS Clock
demo:
https://telsaiori.github.io/javascript_css_clock/index.html
javascript30:
https://javascript30.com
在最一開的時候如果直接用

transform: rotate(260deg)

transform-origin

來旋轉時針的話,會得不到我們想要的效果,因為我們需要的是他以時鐘的正中心為中心點為準來旋轉,所以必須使用transform-origin設定中心軸

.hand {
width:50%;
height:6px;
background:black;
position: absolute;
top:50%;
transform-origin: 100%;
transform: rotate(90deg);
}

然後為了讓指針能夠很滑順的轉動,也需要設定轉場的時間

transition: all 0.5s;

transition-timing-function

因會想要營造出指針再走的時候的抖動（？）感加入了

transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);

setInterval

為了要讓時鐘會自動跑,我們先用console.log來看看她會不會自動顯出訊息

function setDate(){
console.log('hi');

}

setInterval(setDate, 1000)

這時候重新整理網頁會看到console裡面的hi一直在增加
setInterval和setTimeout
差別在前者會依指定的秒數重複去執行程式,而後者只會跑一次

取得秒數 &轉換成指針該轉的角度

使用getseconds來取得現在的秒數

const secondHand = document.querySelector('.second-hand');
const hourHand = document.querySelector('.hour-hand');
const minHand = document.querySelector('.min-hand');
function setDate(){
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360 + 90);
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
const hours = now.getHours();
const hoursDegrees = ((hours / 12) * 360 + 90);
hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360 + 90);
minHand.style.transform = `rotate(${minsDegrees}deg)`;
}

setInterval(setDate, 1000)

旋轉角度需要+90是因為一開始我們設定預設是停在90度

2016年12月10日星期六

javascript drum kit( javascript30)

#
Javascript drum kit
完成品
https://telsaiori.github.io/javascript_drum_kit/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Drum Kit</title>
<link rel="stylesheet" href="style.css">
</head>
<body>


<div class="keys">
<div data-key="65" class="key">
<kbd>A</kbd>
<span class="sound">clap</span>
</div>
<div data-key="83" class="key">
<kbd>S</kbd>
<span class="sound">hihat</span>
</div>
<div data-key="68" class="key">
<kbd>D</kbd>
<span class="sound">kick</span>
</div>
<div data-key="70" class="key">
<kbd>F</kbd>
<span class="sound">openhat</span>
</div>
<div data-key="71" class="key">
<kbd>G</kbd>
<span class="sound">boom</span>
</div>
<div data-key="72" class="key">
<kbd>H</kbd>
<span class="sound">ride</span>
</div>
<div data-key="74" class="key">
<kbd>J</kbd>
<span class="sound">snare</span>
</div>
<div data-key="75" class="key">
<kbd>K</kbd>
<span class="sound">tom</span>
</div>
<div data-key="76" class="key">
<kbd>L</kbd>
<span class="sound">tink</span>
</div>
</div>

<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>
<audio data-key="70" src="sounds/openhat.wav"></audio>
<audio data-key="71" src="sounds/boom.wav"></audio>
<audio data-key="72" src="sounds/ride.wav"></audio>
<audio data-key="74" src="sounds/snare.wav"></audio>
<audio data-key="75" src="sounds/tom.wav"></audio>
<audio data-key="76" src="sounds/tink.wav"></audio>

<script>


function playSound(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
if (!audio) return; // stop the fucntion from running all together
audio.currentTime = 0; // rewind to the start
audio.play();
key.classList.add('playing');
}
function removeTransition(e) {
console.log(e);
if (e.propertyName !== 'transform') return; // skip it if it's not a transform
this.classList.remove('playing');
}

const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound);

</script>

</body>
</html>

首先要先可以抓到現在使用者按了哪一個key,和相對應的聲音是什麼
所以使用addEventListener來偵測按下key的動作
playSound裡面用了querySelector來抓出相對應的key和聲音

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);

這時候如果用console.log(e);的話發現e會代表現在發生的keyboard事件,可以用她抓到keycode得知使用者按了哪個鍵
而上面的html本來各個按鍵和聲音的data就是照著真實的keycode去寫的,因此可以對照在一起

if (!audio) return;

上面這行code是用來判斷如果使用者按了不支援的字母的時候直接中斷function,既然找不到audio也等於不支援

audio.currentTime = 0;

如果不加上面這行的話,如果你想連打某個key讓他連續發出聲音是做不到的,因為他會等現在的聲音播完然後再繼續
currentTime可以指定audio/video播放的當前位置,靠著每次都把它從頭開始播,就不會等到播完了才繼續
然後因為我們會再相對應字母的地方新增playing class,並改變他的樣式,所以必須要寫程式讓他會自動變回來本來的樣子

.key {
...
transition:all .07s;
...
}

.playing {
transform:scale(1.1);
border-color:#ffc600;
box-shadow: 0 0 10px #ffc600;
}

(key有砍掉其他css)
key設定了transition來指定改變外觀需要花多少時間,而playing設定了transform:scale讓元素放大

const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removeTransition));

上面keys先抓出所有key class,然後再用forEach一個一個去偵測他有沒有transitionend的event
想當然如果這時候在removeTransition去印出e的話,得到的就是所有正在轉場的event,全部會列出6個

transform:scale(1.1); //一個
border-color:#ffc600; //上下左右各一個
box-shadow: 0 0 10px #ffc600; //一個

最後用this（在這邊會是觸發事件的那個key class)來remove掉playing class
就完成了

2016年12月9日星期五

Javascript drum kit

javascript30
demo

2016年12月8日星期四

rails tutorials一周目結束

雖然算起來這是第三次了
但前兩次都會卡住看不下去,所以這一次是第一次完整的作完整個sample app(測試以外）
也記了一些memo在gitbook
https://www.gitbook.com/book/telsaiori/rails-tutorial-memo/details

2016年12月5日星期一

validate / validates

剛在看rails tutorial的時候碰到了一個錯誤訊息
You need to supply at least one validation
錯誤是指向

validates :picture_size

google一下發現因為我不應該用validates,應該要用沒有s的validate
正確完整的code如下

#Listing 13.65: Adding validations to images.
class Micropost < ApplicationRecord
  belongs_to :user
  default_scope -> { order(created_at: :desc) }
  mount_uploader :picture, PictureUploader
  validates :user_id, presence: true
  validates :content, presence: true, length: { maximum: 140 }
  validate  :picture_size

  private

    # Validates the size of an uploaded picture.
    def picture_size
      if picture.size > 5.megabytes
        errors.add(:picture, "should be less than 5MB")
      end
    end
end

validates是用在預設的validation,但是因為picture_size是自定的,所以要用validate
validate會去找有沒有和你給他的parameter一樣的method

validate  :picture_size

他會去找有沒有

def picture_size
end

增加model error message

一般在model validation沒過的時候,可以從erros去取得錯誤訊息
比方說用full_messages去取得完整錯誤訊息

@user.erros.full_messages

但也可以自行增加錯誤訊息

# from rails tutorial chapter 13
    def picture_size
      if picture.size > 5.megabytes
        errors.add(:picture, "should be less than 5MB")
      end
    end

像上面這樣就可以在圖片大於5MB的時候塞一個錯誤訊息進去

為什麼選ruby on rails

這應該是這幾天我最常回答的問題
很多人聽到我是又回頭開始重新學程式幾乎都會這樣問我
其實理由很單純,
因為lang8
因為lang8
因為lang8

(但結果這樣問我的人沒有半個聽過這網站冏)
lang8和hi native對要學外語的人來說很好用的,特別是日文(個人覺得改日文的人比改英文的多)

我沒辦法像其他摸程式摸很久的人一樣是喜歡ruby的某些特性才學ruby
因為我沒有比較的語言,所以感覺不出來甚麼優雅不優雅
頂多就是覺得沒有一堆{()};好棒棒啊(但也有人不喜歡靠縮排)
但其實我大學的時候對{{((}}));;; 也沒有障礙啦
(但因為現在學了ruby, 寫javascript的時候反而有障礙= =)
單純只是因為想要學和自己常用的網站一樣的技術
而且因為有follow lang8老闆的twitter,所以常常看到他在貼徵rails工程師的資訊
看久了也自然會覺得"rails?那是甚麼?可以吃嗎?"
對放棄程式很久的我來說,ruby on rails我只知道on是甚麼意思而已(?)
然後就會有一個很標準的菜鳥問題"所以ruby和rails是一樣的嗎?"

但我身邊寫程式的沒有半個寫ruby的
以前大學同學和我說可以去上五倍紅寶石的課
因為我很擔心課不知道是不是初學者也可以上,所以事前先寄了信問了講師(現在看看時間已經快要一年前了)
說初學者ok我就去上課了,最後我上了兩輪
最最最一開始其實我根本不懂params從哪來的(天上掉下來的??)
還有hash的寫法,不是我在說,有點多種
兩次的中間還隔了udacity的ruby nanodegree
外加一次五倍的免費課程-開開心心學ruby
(雖然我個人比較喜歡ex" JAVA,從開始到放棄" 之類的名稱XD)
第二次我才聽懂很多當初第一次我不懂的東西

之後才又去看javascript之類的,只是進步程度和rails比起來很慢,畢竟我還是主要都在練習ruby on rails,要我一次兩種東西有同等程度的進步,有點困難,畢竟我一開始是標準的"痾.........這一段到底是javascript的語法還是其實是jquery都分不清楚的人"
正確地說我一開始連div是幹嘛的都不知道
HTML早就忘了啦啦啦~~
到現在好不容易覺得自己總算比當初更進入狀況了點
然後就半年多過去了............

http://lang-8.com/telsa/journals/127663289408109021075360132506066210512
日文版XD

2016年12月4日星期日

2016 Ruby Conf Taiwan

生平第一次參加了ruby conf,基本上也是第一次參加任何的conf
其實不太符合我的個性XD因為我是個會想太多的人,比方說
反正我應該很多聽不懂吧
嗚嗚~一個人參加好孤單
嗚嗚~我來錯地方了
嗚~現在沒錢
之類的..............反正不管甚麼事我都是會很負面想太多的人
但,這次我還是參加了
畢竟既然我認真想走這條路,一個人閉門造車也不好吧

Beware of Alpha Syndrome
The overnight failure
Value And Pain to Keep Rails Applications Alive
Using database to pull your applications weight
It's More Fun to Compute
How I made a pure-Ruby word2vec program more than 3x faster
To Code Is Human
ActionCable and ReactJS tie the knot
Ruby, facing the change of world-wide server-class microprocessors
從零開始的爬蟲之旅
Buidling HUGE web apps: Rails at 1,000,000 Lines of Code
Solving your onboarding problems with Ruby
Ruby, HTTP/2 and You
What is the Rack Hijacking API
Large scale Rails applications
How we replaced salary negotiations with a Sinatra app

上面這些是我這次有聽的主題,只是免不了的,像我這種菜鳥,太技術的主題會滿頭問號

或者因為我沒碰過,所以沒有感覺

所以最後最喜歡的主題是How we replaced salary negotiations with a Sinatra app 或是To Code Is Human還有Solving your onboarding problems with Ruby之類的 XD

後者特別是因為吃飯的時候我聽到有人說他對新人問題問太多不耐煩(不過沒看到實際狀況其實沒辦法判斷是新人本身問題,還是指導的人本來就沒耐性)

中間時間也有去和有來擺攤的公司聊了一下,雖然,嗯........要我和其他與會者搭訕聊天還是有點困難冏我連人太多的早餐店都會不知道該怎麼插入阿阿阿阿阿
不過這幾天我講了好幾次為什麼我當初會選學ruby on rails,這個之後另外寫一篇好了(簡略版: 因為lang8)

這次還有Unconference,我自己對icook的一個實習生的主題很有興趣(其實我投過他們家履歷無回應,已哭),講的是他們想要算出每份料理的熱量,雖然我好像找不到簡報

這其實是我很想做的東西,畢竟雖然身為資管系畢業,但我最有印象的是當初選修的某個選修課,上課的是個營養師,從此我就一直記得每7700卡就會多一kg,還有脂肪細胞成年之後數量就固定了,所以小時候胖不是胖是錯的,課堂裡面當然也算過熱量要設計菜單之類的。(其實我根本讀錯系??!!)

只是我現在還沒能力做,畢竟大家的用語都不一樣,我覺得相比別的語言,比方說英文日文,中文常常一樣東西有更多種寫法,好比"milk",我可以寫鮮奶/牛奶/牛乳或者有些人直接用英文,那我程式要怎麼辦@@?或者新鮮草莓,但草莓就是草莓,我愛用冷凍的其實也不會影響到熱量,但是要自動算出程式考慮到那些字就會變得很麻煩
或者考慮到算出的精準度,食譜可能只寫"巧克力",但哪一種??大波露?meji?熱量就不會一樣了(雖然,本來這種東西就是只能算出大概的準確度,而且個人覺得誤差應該不小)
還有常見的"適量",雖然講真的誰做菜會知道自己到底量放多少,但,這樣就算不出來冏
等我哪天夠強,我是真的很想用個相關功能的網站(握拳)

還有五倍的蒼時弦也講的turbolinks入門, 雖然我目前我都還是把它關掉XD

最後.....要是明年可以去ruby kaigi就好了

還有就是........如開頭所講,我很容易負面想太多,所以當初我學ruby on rails的時候,因為當年大學同班的人沒人是寫這個的,就被我自己擴大成

"嗚嗚嗚...我覺得整個真理都找不到寫ruby on rails的"

對不起我是笨蛋(跪)

其實n年前對於女神轉生我就想過一樣的事了

之後我會相信凡事都有希望的XD

2016年12月1日星期四

html: { multipart: true }

rails tutorial裡面再講圖片上傳的時候說form_for一定要加html: { multipart: true }這個參數
不過rails4開始form_for會自動加,form_tag才需要手動家的樣子

http://guides.rubyonrails.org/form_helpers.html#uploading-files

If you use form_for, this is done automatically. If you use form_tag, you must set it yourself

2016年11月30日星期三

線上英文會話 hanaso/talxfun

因為年末第一個月半價很便宜,所以試聽了一下
https://www.hanaso.jp/students/teacher_profile.php?tutorid=2489
選的是上面這個老師,發音不錯,當然聽得出來不是native,但是我只是要能夠開口講英文,老師口音只要可以接受就好,也不會只是照書上唸,該糾正的地方也都有糾正你
加上特價的價錢,感覺可以加入

這兩家雖然是同一家,但不一定所有老師日本和台灣的網站都會出現,像今天我選的老師台灣網站上是搜尋不到的

缺點就是因為老師可能是在家上課,不同人可能周圍的聲音狀況會不一樣,像今天的老師雖然聲音聽得很清楚,但風聲有點大

engoo雖然主打單價最便宜,可是前提是一天上三堂,但這實在有點困難,而且他們所有方案都是每天上,如果沒辦法每天上課,他們家就沒有真的比較便宜,所以我也沒試聽

這幾個月的無限循環

這是什麼？→好像懂了又好像不懂→我先繼續用下去吧→阿這好像是之前看過的東西→再回去看→好像多看懂了一點→繼續用下去（無限循環）
這幾個月一直是這種狀態....
但是終於完全看懂以後也都忘記當初為什麼看不懂了

limit v.s take

一直以來我想要從db抓六筆資料出來的時候都是用limit

 User.limit(6)

最近才看到用take也可以

User.take(6)

差別是limit是回傳ActiveRecord Relation
take是回傳array給你

2016年11月28日星期一

問問題的藝術

最近看到某討論串,是個新手看了教學問了不少問題的討論串
其實版主人很好,都有回他,只是也表明了問題可能問的太早,或是該給的東西沒有給,這樣很難回答

雖然就算是我這種小弱弱也看得出來問問題的人的確很多東西問的方法不好,只是,如果是真的第一次接觸的全新手的話,好像也不是不能理解他的處境

恩～來學個新東西吧～這個教學好像不錯～先照做吧
↓
阿阿有ＥＲＲＯＲ怎麼辦看也看不懂,先上網問吧
↓
等等,回答的人好像說了一堆我不知道是啥的東西
↓

我在查一下～好像是這樣吧～我再問一下

↓

好像還是給不對東西囧,他們到底在說什麼,我果然沒天份嗎

大概像上面這樣吧,有時候是真的不知道到底該給什麼東西,對完全新手來說其實問問題抓不到重點應該也是很常見的事,雖然那可能是無心的,因為全部不懂,所以分不出來

但是老手會因為這些問題耐性用光其實也是理所當然

每次問問題都讓我很害怕囧,除非是像udacity那種本來就是老師和學生的關係(之前udacity的課作業有問題上去討論區問的時候,如果發現很多人都卡在一樣的問題,會有一種原來我沒有特別笨的安心感......)

2016年11月26日星期六

render partial

  <ul class="users">
    <% @users.each do |user| %>
       <%= render user %>
    <% end %>
  </ul>

render user這種寫法rails會自動去找有沒有和user的class同名的partial,
因為上面本來名稱就取叫user容易分不清楚差別,但比方說改成下面這樣

  <% @users.each do |abc| %>
    <%= render abc %>
  <% end %>

他還是會去找_user這個partial,因為他看的是abc是哪一個class的

2016年11月23日星期三

誰ガ為のアルケミスト / 為了誰的鍊金術師

https://al.fg-games.co.jp/

一直很喜歡玩戰棋類的遊戲,比方說像以前的天使帝國2,當時超愛,但手機上不太多,有些太過簡單玩起來沒fu,或者畫面風格不喜歡,這款是到目前為止我最喜歡的一款戰棋手遊

之前有玩過一下下這家公司的另一個遊戲,殺戮魅影,但抽卡實在太坑,玩起來不太有動力,而且全女角的設定對我來說反而會扣分,加上在手機上覺得螢幕不夠大就放棄了

後來看到同家公司又出同類型遊戲,就馬上下來玩了,但不知道怎樣....................這家公司總是一開始把轉蛋率用的超坑,碎片系統也超坑,加上主角第一場戰鬥被弓手一箭射死,我就崩潰了,於是又反安裝了

一直到今年九月,看看play上的評價好了很多,才又重新下來玩,第一個感覺系統上人性了很多,除了轉蛋機率變高,送的石頭也變多,常駐腳色的碎片一般關卡也會掉,除了無課金注定要花更長時間鍊角以外,其實也還算是個對無課友善的遊戲

戰鬥系統本身有高低差設定,也有角色方向的設定(就是從背後被打會比較痛),當然也有幾乎每個遊戲都有的屬性設定,還有一卡車的職業,系統上算是蠻複雜的,如果是沒玩過類似遊戲的人可能會覺得東西有點多,而且這遊戲是會打到自己人的,比方像是法師的魔法,槍手之類的都有可能打到自己人,法師施法也有設定詠唱時間,但甚麼時候會放出來老實說............有點謎,我很希望這遊戲哪天可以明確指出到底我現在詠唱下去要多久,不然法師在這遊戲應該會一直弱勢下去

當然身為手遊還是有一些需要重複刷的要素,比方說曜日關阿,碎片阿,但因為有auto功能所以還好,(希望哪天曜日關可以開放用skip卷)
現在幾乎每個遊戲都有的協力當然它也有,活動的高難度關和曜日關可以協力通關,只是這並不是一個靠大腿就可以過高難度關的遊戲,自己沒一定強度是打不贏的

劇情可能有點老套,但設定還蠻用心的,每一章打完還會有片尾,而且不像很多遊戲女角比男角強太多,這遊戲裡是很平衡的
經過多次更新改版後,我認為他已經是一個好遊戲了,推薦給喜歡SRPG的人
如果哪天出單機版我一定支持

這是一開始的主角之一,人稱黑毛/阿斯蘭的ディオス,第三章變超帥,貼出來只是想講這個XD

2016年11月21日星期一

querySelector() / querySelectorAll()

今天看treehouse新學到的

querySelector() / querySelectorAll()

什麼都可以吃,兩者差別只是前者指回傳第一個符合的,後者是回傳集合

document.querySelectorAll(".example");

挫折

其實已經有一陣子都害怕坐在mac前面,但一直不知道原因,最近突然覺得,可能在我心裡mac就等於程式,但其實挫折感好大,不管是學習過程,還是找工作的過程

這幾個月一直都在覺得自己好笨,什麼都做不好,雖然知道自己有進步,但是一直覺得好慢,
花了一堆時間在用,但卻講不出來自己到底做了什麼,都覺得我做的東西在很多人眼中都是一下就用得出來的東西吧,所以講不出口

做不知道會不會成功的目標好沒安全感,但是我真的不願意回去做和以前一樣的事

2016年11月15日星期二

account kit

account kit

也是之前幫忙的時候碰過的東西,結論上來說我覺得不好用

雖然不用密碼,沒有密碼外洩的可能性,但是一直在靠email或手機簡訊登入服務其實很麻煩

就像line在新電腦登入的時候也會要你輸入手機訊息裡的密碼,但如果每次都要這樣,誰受得了

不過如果是用在手機上或許很方便,在手機操作起來會比在電腦上有連貫性

當初是用gem來做的,主要是他有AccountKit.access_token和AccountKit.me這兩個方法可以用

方便取得access_token和user輸入的email或電話號碼

2016年11月13日星期日

第一次碰到實際上開發的案子的心情 part4 ajax

其實我本來以為應該不太會碰到javascript的
為什麼當時會那麼天真呢XD

但是比起ruby更讓我撞牆的其實是javascript,因為完全沒有概念,所以不知道要從哪看起
而且其實............哪個是javascript原有的東西,哪些是jquery都搞不清楚,全部摻在一起做撒尿牛丸那樣

這次因為要處理私訊頁面的東西,已讀未讀要讓使用者可以分得出來
那時候一開始是用了jquery.appear 來判斷畫面捲到哪然後把新訊息的符號用掉
你就寫一個ajax request就好啦by前輩
其實那時候我的內心在吶喊

我不會阿阿阿阿阿嗚阿阿阿阿

要做的事是以下這樣

1.要把曾經顯示在畫面上的訊息把她從未讀變成已讀狀態,這只要改一下class就可以
2.當然也要在資料庫裏面把is_read的值改掉,所以才需要ajax

只是改view上面的顯示狀態的話很簡單,照jquery.appear 上面的範例用就可以,但是ajax...............................對我來說根本google也看不懂
總之先看別人的範例依樣畫葫蘆吧

    $.ajax
      type: 
      url: 
      data: 
        id: 
      statusCode: 204: (data, status, xhr) ->

可是我裡面該填甚麼好?_?,每個都要填嗎?_?

當然現在我知道該給他甚麼值( treehouse ajax筆記 )

因為我是要去update資料庫裡的資料,所以controller寫好了update的code,

所以type是"PATCH",URL就是update的網址,這樣就會和routes的設定配合

然後就會跑去執行controller裡的update,最後再用jquery讓他更改view就好了

現在看一切都很理所當然,但當時我不知道那些東西的意義,所以牆撞了好久

2016年11月12日星期六

第一次碰到實際上開發的案子的心情 part3

第三次是如果再留言的地方有@+人名的話要自動轉成link的功能,不過我做的比較簡單,不用像現在很多SNS一樣,只要你打一個@就會跳出下拉選單讓你選朋友,我寫得要靠自己把朋友名稱打對

比方留言可能是這樣" @telsa UCCU"
一開始我是先想說~恩要先把@+username的地方抓出來,然後把@後面username的取出來去搜尋有沒有這個使用者
這倒是沒啥問題只要

1.split把他們切開
2.在select出有@的地方
3.再把@切掉

2,3是不是覺得有點矛盾?為啥要找出來又把他切掉,其實我當初也這樣想的,但那時是想說我要靠@才有辦法判斷哪一段才是需要轉成link的地方,然後因為要靠他去搜尋看User有沒有這個人

想當然這樣在非菜鳥都會覺得,何不用正規表示式?
於是最後就變成這樣了
/\@([\w\-\.\_]+)\s/

最後要把 @telsa UCCU"(請想像@telsa已經變成link)輸出到view上就好了
..............
但菜鳥般的話當時不太能理解HTML逸出,當然我知道這是為了安全性,不過腦袋卡住就是卡住了,好不容易其他地方搞定了,又卡在別的地方了冏,是很痛苦的心情冏
結果google後我用到了錯誤的東西

html_safe

他是可以做到我希望的效果,但是因為是會用在讓使用者自行輸入的欄位裡,不可以用這種會全部允許的方法(同saw)
rails有提供sanitize,只有讓一些安全的tag可以不要逸出

還有一件事,就是真的要好好看有沒有哪些功能其實別人已經做好helper之類的
不然會浪費自己的時間,雖然helper那麼多有時候真的會沒發現,但是這點蠻重要的

第一次碰到實際上開發的案子的心情 part2

第二個被分到的問題其實也很簡單
也是放到該放到的地方就好了,這次是沒甚麼問題了
但我發現我一直誤會了render partial
之前我知道她可以讓我的view某一塊顯示別的html的內容,但是我一直沒有意識到,那partial會顯示在哪裡?

因為之前通常是編輯&新增畫面的表格因為長相是一樣的,所以會使用partial,而且都是幾乎除了標題以外,整頁其實都是partial

但一直到這兩個問題我才發現,我把它render在哪裡,是會影響到他出現在哪裡的
雖然這真的很理所當然
但是對我一個真的全部從頭學的人來說,我真的一開始沒有意識到這件事
比方說如果在某個div裡面render partial那當然html就會長在那個div裡

現在想起來也覺得當初怎麼連這個都搞不清楚
只能想說這就是學習Orz
比方說我現在也不懂為什麼我當初國小數學也不及格...........................

第一次碰到實際上開發的案子的心情

以前曾經有一次有一個月的時間在五倍紅寶石幫忙案子
那時候大概是連史萊姆都可以把我打死的程度吧(還是DQ的史萊姆真的打不死人???)
雖然說是幫忙,但對我來說其實學東西的意義比較大,畢竟難的我都幫不上冏
當初只有上過課,碰過真的很簡單的案例而已(ex最常見的簡易blog)
通常課本或教學上的sample都很單純,你不會有太多的table,view也超單純,頂多有些會重複的view會render partial(比方說新增&編輯的form)

於是如此小嫩嫩的我,打開code之後的第一個感想是
靠夭這是甚麼
靠夭這是甚麼
靠夭這是甚麼
然後開始擔心自己的這一個月要怎麼活=.=
它們說這個案子本來就比較複雜,但對我這個菜鳥來說,衝擊好大

首先對於slim我沒有碰過,更精確一點的講法是,當初我html等級比現在更低,更不用說slim,那是甚麼可以吃嗎???

然後好多content_for,還有partial,想當初因為教學用的範例通常一個畫面你看的到的東西,大概一個html就包了,頂多一小部分有partial,然後現在一個首頁裡面就一堆東西都分散在不同的地方,想找個code在哪有時候都會找不到,有著想哭的心情
寫不出來就算了,連想找他在哪都找不到阿阿阿阿(已崩潰)
阿對了,其實當下我不知道content_for的用法.........................

被分到的一個問題其實很簡單,我只要把一個已經刻好的html放到正確的位置讓他可以顯示就好了
然後我用了一天

首先它是一個要放到header裡的東西,基本上所有頁面都會用到,所以要放到layout裡
理論上這是很基本的事情,但因為頭腦太混亂我忘了,我忘了我把他丟到哪去了冏(反正丟錯了)
很害怕地問了人之後,才想起來這個很基本的事實

好~這下我知道要把它放到layout裡去的,但怎麼可能像教學範例依樣只有一個layout
一看感覺有可能的有三個呢^^你們誰是誰啊,於是我還是先丟到定翻的application.html.slim裡面,但想當然layout不是用他的就會GG了
之後我才知道雖然大部分都是繼承application controller,所以view預設會是application,但有些controller是繼承別的,比方說PlaceController好了,預設會去layout找叫place的檔名

我不知道其他真正的新手是怎樣,總之我第一天就已經沒信心了XD

2016年11月11日星期五

更新fork過來的repository

一個剛fork完並且clone到本機的更新fork來的repository
執行git remote只會有origin
只要幫他git remote add [任意remote name] [repository link]
之後再跑

git pull [剛剛取的remote name] [master]

這樣就可以把remote的master拉進來了就可以了

2016年11月9日星期三

html form label

雖然可能有點後知後覺,

但我現在才知道如果

<label for="name">有對到相對應input的id的話,你點label游標會自動focus在input.....

(因為從來沒有想要點labelXD)

2016年11月8日星期二

movie search網站

source
demo網站

其實這是treehouse techdegree的project,我沒有加入,因為覺得太貴,而且不能跳過你已經知道的部分,比方說你要交project5的時候,如果你沒有完成之前的課程,你是沒辦法進行的,但是怎樣叫完成呢?就是所有的影片和問題你都已經看過了,我不太喜歡這樣,雖然它們應該是要確保每個人都已經有相關知識了,但我覺得如果我可以做出project,不就代表我已經知道該知道的了嗎?
而且因為是月費,要去看那些你已經知道的內容的相關影片會浪費時間&金錢

所以我就沒加入techdegree了,但反正project內容github上找一找一定有,照著練習也可以,這就是其中之一。

要用網頁還是不能不會這些阿,因為我是畢業n年後才又回頭碰程式,大概只比白紙不白一點點而已（~~泛黃的紙？？？~~）,不然一個現代的網頁完全沒有javascript的話..........能看嗎冏
誰能忍受facebook按個讚你整個網頁就要重load一次

這個project就是要你用 omdbapi.com 的api做一個電影搜尋的網站,並且點了凸可以顯示詳細介紹,和連到imdb的網站去,因為是ajax的題目,所以html只有一個index.html
然後配合keyup的event在你輸入的同時就會自動去搜尋電影,不用真的按enter(當然按了也是會執行搜尋)

不過其實有個小問題,因為我modal的網頁其實在搜尋完成的時候就已經先長在網頁下面了,試點了圖片之後才又去update裡面的資料(因為api的關係,一開始輸入字的時候用的方法不會回傳電影介紹,試點了圖片之後才又丟一次request)結果就變成剛點進去的時候看到的可能還是沒更新前的資訊，但是過一下下就會自己更新了,其實感覺沒有很好

native camp 免費體驗

native camp

一直張望很久不知道該不該加入的線上英文會話(日本)

特徵是可以無限次數上課,月費4950羊

算起來C/P值很高,講師是菲律賓人

不過有一點在註冊結束之後覺得很貼心的地方,雖然很多線上教學都有提供免費試用的期間,但直接把你到哪一天為止是無料,而且把幾點幾分都寫給你看的公司我目前加入過的這是唯一一家,也有直接寫明在哪一天之前取消的話不會發生任何費用,這點我覺得還蠻貼心的

月額利用料4,950円のところ、7日間無料でお使いいただけます。

本日ご登録の場合、2016年11月14日 23:59(日本時間）までが無料期間となります。

継続利用をご希望でない場合は、無料期間終了日(2016年11月14日)までに退会処理をしていただければ月額利用料、その他費用は一切発生いたしません。

2016年11月4日星期五

Persona5 破關

花了109.05小時破關

老實說最後的劇情真的很驚人,但我玩這遊戲最遺憾的地方是特別震驚的地方我都先被雷到了一部分..........但是上網找攻略很難完全不雷到。

最後攻略隊伍

主人公persona: トランペッター / サンダルフォン

トランペッター真的很好用阿,沒有弱點,無效或吸收或反射的屬性又多,而且有可以降低敵方全能力的技能,超讚的,打最後boss之前的前面四個中boss也都是用他

是說那四個中boss.............只能說persona畢竟還是女神轉生系列XD,還好它們沒有長相變的很噁(?)

サンダルフォン基本上只是拿來用メギドラオン而已，當初是想說反正都最後了,錢就給他用下去吧~(因為我是越級合成),不過有個可以全體攻擊的萬能屬性魔法可以用還不錯
而且我一直很喜歡大天使系列。

然後其他人是
真: 覺得比貓還適合當補師,而且會放防禦上升的魔法,有空也可以幫打,比貓多功能(外加外型喜歡,他的persona是我看過最帥的了)

春: 打完發現其實不選他也沒關希啦XD,但不會被攻擊到弱點就是了

龍司: 可以幫放攻擊上升的魔法很好用阿,這也是為什麼後期愛用他的原因

結果persona有超覺醒的兩個都沒上場XD

其實最後boss沒有很難打,也可能是因為我卯起來降低他的能力&卯起來提升我方的防禦和攻擊,所以沒甚麼危急的時候,但就打很久而已。

這次主角status度胸和魅力沒有滿,社群去掉一定會滿的以外,也只有滿了四個人,所以我打算繼續玩二周目

二周目會把你的錢繼承,但...不是你上一次玩賺到的所有錢,而是你最後破關的時候身上有多少錢,我因為最後買錯東西買太多,又越級合成了サンダルフォン,導致我的二周目一開始身上只有四萬八..................................................
毫無二周末可以自由揮霍金錢的fu....不過因為裝備也會繼承,所以在不用買裝備的情況下錢應該很好賺回來

另外要特別介紹一下雖然最後之戰沒出場,但後期我很愛的personaノルン(請忽略下方的洗臉機)

因為有ギリメカラ的血統,繼承了它的物理反射,又沒有弱點,一整個超好用的阿阿阿阿,輔助魔法又多,有空的時候幫回血或是攻擊一下超讚的啦
打從soul hackers的時候就一直很喜歡他,這次有一種好久不見的感覺

玩過前幾代的對這代第一個驚訝的地方應該都會是イゴール的配音員換人了,不過本來那位2010年已經去世了,新的其實聽久也就習慣了。

2016年11月3日星期四

Persona5 badend2

兩個bad end都已經看過了
終於可以往正常結局去了

Pseudo-Classes

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
雖然是蠻基本的東西,但我一職不知道它的名稱
是用來控制某些狀態下元素的css,比方說游標移到上面的時候,或是link點過&點過後的CSS

a:link {color: slategray;}
.foo:hover { background: gold; }

訂閱：文章 (Atom)

2016年12月30日 星期五

2016年12月29日 星期四

2016年12月28日 星期三

2016年12月16日 星期五

Update CSS Variables with JS

2016年12月15日 星期四

2016年12月12日 星期一

transform-origin

transition-timing-function

setInterval

取得秒數 &轉換成指針該轉的角度

2016年12月10日 星期六

2016年12月9日 星期五

2016年12月8日 星期四

2016年12月5日 星期一

增加model error message

2016年12月4日 星期日

2016年12月1日 星期四

2016年11月30日 星期三

2016年11月28日 星期一

2016年11月26日 星期六

2016年11月23日 星期三

2016年11月21日 星期一

今天看treehouse新學到的

querySelector() / querySelectorAll()

2016年11月15日 星期二

2016年11月13日 星期日

2016年11月12日 星期六

2016年11月11日 星期五

更新fork過來的repository

2016年11月9日 星期三

2016年11月8日 星期二

2016年11月4日 星期五

2016年11月3日 星期四

Pseudo-Classes

2016年12月30日星期五

2016年12月29日星期四

2016年12月28日星期三

2016年12月16日星期五

2016年12月15日星期四

2016年12月12日星期一

2016年12月10日星期六

2016年12月9日星期五

2016年12月8日星期四

2016年12月5日星期一

2016年12月4日星期日

2016年12月1日星期四

2016年11月30日星期三

2016年11月28日星期一

2016年11月26日星期六

2016年11月23日星期三

2016年11月21日星期一

2016年11月15日星期二

2016年11月13日星期日

2016年11月12日星期六

2016年11月11日星期五

2016年11月9日星期三

2016年11月8日星期二

2016年11月4日星期五

2016年11月3日星期四