工程思維

用Vue.js框架實作自己的Blog – CH1 新的開端

接觸前端到現在也差不多快一年半了,過去在開發前端的時後,都是使用原生javascript與jQuery以及php進行開發,雖然隨著時間推移接觸到的東西越來越多,開始有了有系統性開發與後續維護的需求,剛開始頂多就是將JS與php物件化,但還是無法完全解決頁面控制以及資料、事件、渲染、樣式控制等不同任務間的分離,所以開始接觸Vue.js框架來增加開發效率並且將原本幾乎純手刻的這個Glovecoding blog進行翻新,順便寫篇系列紀錄一下~ Beginner of Vue 在約莫半年前的時候其實就有試著自學Vue框架的想法了,但當時自己的背景知識量還不大夠,包括AJAX的運作以及同步異步的線程阻塞問題等,在當時都是我無法掌握的技術,最近把這些東西補齊並且看了根webpack相關的技術之後,才回頭撿起這個框架慢慢開始啃。Vue的框架有一個非常大的優點,尤其是對於英文較不熟練的開發者而言,因為開發Vue框架的工程師是來自中國的,所以他本身官網的技術文件都支援簡體中文,如果不習慣閱讀簡中的朋友也可以利用Chrome 的功能把它翻成繁中XD,在進入實作之前還是得先來了解一下這個框架本身的特性。 Components 組件的概念 在使用Vue框架的時候會不斷地使用到Components來進行網站頁面的組裝,依照不同的頁面需求,引入不同的components 到根(Root) 或是常見的App頁面,在這個框架中,其實整個網站結構很像一個葡萄串,從最上面的Root 到下面的頁面(View) 與組件(Component) 不斷的往下串,最終變成一個不斷串連組裝的網站結構,像我的Blog 結構大概長這樣: 整個部落格主要分為首頁、分類、關於、文章、404Notfound 五個頁面,這五個頁面會附著於#APP這個根上,而每一個頁面各自會使用到不一樣的組件進行組裝,這些組件的方便之處就在於:像是首頁與分類頁面都會使用到卡片作為文章的顯示方式,在一般的情況我們需要把相同的版型寫在不同的頁面,這就會造成在維護上的麻煩,尤其又是使用PHP生成內容的時候,只會使頁面變得越來越複雜,然而在Vue框架中,我們可以把這些會重複使用到的版型部分化做組件(Component) 他是一個獨立的模板,在需要使用到這個模板的時候,我們只需要引入這個版型即可,像blog首頁的卡片式文章顯示就是利用上圖中的紅色組件 -…

5 years ago

盤點10個超多人使用的前端動畫庫!

在網頁設計上,你可能固定使用某幾個動畫庫,但你知道 GitHub 上面其實有超多超夯的前端動畫庫嗎? 前端動畫不僅能代表該網頁製作者與單位的用心,同時也能增加使用者好的體驗, 這篇文章幫喜愛網頁互動動畫的你整理了10個超多人推薦的前端動畫庫! 我們趕快往下看吧! 1. jQuery.countdown 創立者:hilios GitHub 人氣:2.2K stars GitHub 傳送門:https://github.com/hilios/jQuery.countdown 2. aniJS 創立者:anijs GitHub 人氣:3.6K stars…

5 years ago

初學者也能上手版控的基本指南

本篇大綱: 何謂版本控制? 版本控制的類型和用途 Git介紹和使用者 Git vs Github vs Gitlab 何謂版本控制? 版本控制系統是一種軟件工程的開發技巧,可以通過這個系統讓每位成員的軟件版本可以方便同步和維護管理 (不然要用電子郵件或其他工具傳送和管理十分麻煩,尤其是程序又常常會有不同版本修改的問題!) 在沒有版本控制系統時,我們常會在編輯檔案前複製一個備份,或者在更新檔案後產生許多重複檔案,非常不便且難以維護。 因此,使用版本控制系統的需求就這樣產生啦! 版本系統類型和用途 舉例來說:A&B共同開發專案,有兩種版本控制方法: 1.中央式: 伺服器維護一個最新版本的專案,當要修改專案的時候,就從伺服器上下載專案,改完再上傳。 為了保證伺服器上永遠是最新的,就需要一直保持網路暢通;一旦中央伺服器壞了,一切都將結束。 CVS是最初的版本控制系統,SVN是當前最流行的集中式版本控制系統。上述兩個都是開源,免費的。…

5 years ago

Pandas 第7講:Python資料處理套件Pandas數值處理與基礎統計量

上一篇文章主要介紹如何利用pandas處理字串資料,而這章節的會著重於數值的資料處理以及顯示基礎統計量的方法。在資料分析中,數值資料是非常常見的,而且對於後續的深入分析而言,數值資料能夠讓我們進一步利用推論統計檢定許多因素與目標的關聯性,幫助我們能夠利用檢定結果進行決策,或是發現夠深入的趨勢。   這次我們會使MLB美國職棒大聯盟的各隊歷年統計數據(mlb_team.csv)的公開資料,其中記錄了美國職棒大聯盟從西元1871年至今的各球隊數據,因為最近正好碰到需要分析棒球的運動相關數據,且這份資料大部分的欄位都是數值欄位,正好適合這篇文章主題。 讀取資料: import pandas as pd mlb_teams = pd.read_csv("mlb_team.csv",encode="UTF-8") mlb_teams.head()     向量處理 Vectorize Operations 之前的文章中有提到Pandas是利用向量處理的方式進行資料處理的,所以我們在進行數值運算的時候都是針對單一個欄位將欄位中的所有數值進行相同的運算,如果要針對特定條件的數值進行運算,則需要先進行資料篩選再進行數值處理。 基本上在利用Pandas進行數值運算時,跟我們一般在寫Python計算一樣,只是平常用於運算的變數變成了 DataFrame 物件或是 Series 物件,所以所有Python中的數學運算符,在Pandas都可以直接使用: s…

5 years ago

如何用蒙地卡羅模擬股價?

上回我們使用最基本的亂數模擬器方法成功模擬出Mike Trout的上壘率,當抽取出來的亂數小於上壘率時,認定為上壘,而亂數大於上壘率時,則認定為出局,用簡單的大於和小於就可模擬出來的模型,股價模型就稍微複雜些了,基本款的股價路徑模型最少具有二種參數與機率分配假設,背後的數學推導與原理就請大家自行去看財務工程相關的書籍了,我們先列出一個股價過程的理論式如下: 有了最基本的理論公式後,首先,我們必須定義出參數,參數可以描述這個股票的特性,例如新興市場股票與成熟市場股票的報酬率與波動度都不一樣,電信與生技公司的股價也會相當不一樣,所以我們必須要利用過去的資料去推估參數的區間範圍。 mu = 0.1 #資產年化報酬率為10% Std = 0.2 #資產年化波動率為20% dt = 1/252. #模擬路徑為每天,每天經過252分之一年 Copy   第一步:先將理論式轉換為Python的計算語言,記得括號設對位置,再用相對應的科學計算函數帶入公式內 S1 =…

5 years ago

機器人理財(Robo-Advisor)真的能幫助到我們嗎?

近兩年機器人理財(Robo-Advisor)這個詞大量出現在金融市場中,也有多家國內外金融機構在推銷這種型態的商品,並大量以智能與人工智慧(AI)來作為行銷的關鍵字,今天就要來仔細的分析幾類我所認識的理財機器人系統。 馬可維茲(Morkowitz)的投資組合理論(Portfolio Theory) 馬可維茲於1952年提出了投資組合理論,將金融市場中的各種資產簡化定義成預期報酬率、標準差與相關係數,在假設以上參數均為已知的狀況下,可以進行規劃求解得出「最小風險投資組合(Minimum Variance Portfolio)」與「最適投資組合(Optimal Portfolio)」,大部分的機器人理財業者均是以此種模型進行操作,除了有諾貝爾經濟學獎的加持外,對於現有的程式撰寫有相當的方便,許多程式均有規劃求解的套件可供使用。 馬可維茲的投資組合理論利用數學嚴謹的證明,資產配置對於投資組合波動度與報酬率有顯著的影響,將多種相關係數低的資產配置在一起,能夠降低投資組合波動度與提高預期的報酬率,例如債券與股票呈現負相關時,能夠配置出風險調整後報酬較高的組合,相對於單一股票或債券。 利用馬可維茲現代投資組合理論的機器人理財平台,通常會利用風險問卷來進行投資人分類,例如年齡、投資期間與風險承受度等,透過背後的評分邏輯將使用者分為三至四個風險屬性,假設情況如下: 投資人屬性 可承受年化波動率 積極型投資人 25%以上 穩健型投資人 15%~25% 保守型投資人 15%以下 利用過去各資產類別的走勢去計算報酬率、波動度與相關係數,作為投資組合評估的相關參數,由使用者作答的風險問卷來對應出可承受年化波動度,再以程式進行目標為「固定風險下的最佳報酬率」的最佳化,就可以得到最佳的權重組合。 Smart Beta…

5 years ago

想嚐嚐Javascript,Python,Ruby的味道嗎:工程師必喝的「程式語言咖啡」

  每天打程式的你,有想過程式語言變成咖啡,會是什麼味道嗎? 現在日本推出了一款超爆紅的程式語言咖啡豆「CODE COFFEE」,由日本工程師們挑選出來的! 總共有 C、Java、Perl、Ruby、Python、JavaScript、Go、Swift 八種口味, 如果你是這幾種程式語言的支持者,一定要來試試看XD 最後還可以在 Github 跟其他工程師交流你的飲後感想唷! https://www.youtube.com/watch?v=ftSjvrKB3XU&feature=youtu.be 我們來看看這八種程式語言吧! C語言咖啡豆   「一切的來源--基本語言咖啡」 由咖啡的來源巴西・哥倫比亞,來調配出一切程式語言的基礎–C語言的滋味。 [商品詳情] 語言特徵:SIMPLE 咖啡特長:來源…

5 years ago

JS 學資料結構與演算法 (排序篇) — 合併排序法 Merge Sort

合併排序法 Merge Sort合併排序法定義合併演算法與上一篇介紹的快速排序法一樣,都運用了 Devide and Conquer 的概念,基本上分為兩個步驟:分割與整合。首先利用遞迴把原先未排序的陣列平均分割成兩半,直到各邊都只剩下一個元素(上圖紫色方塊),接著排序後再一一整合起來,最後會合併成一個排序後的陣列(上圖綠色區塊)。分割 (紫色區塊)把大陣列分一半成為兩個小陣列把從上一步驟切好的兩個小陣列再各自分一半重複步驟 2 直到每個小陣列都只剩一個元素整合 (綠色區塊)排序兩個只剩一個元素的小陣列並將其合併把上一步驟排序好的小陣列合併並排序成一個陣列重複步驟二直到所有小陣列都合併成一個大陣列讀者比較有疑問的也許會是這個部分: Q: [2,3,7,16] 跟 [4,9,11,24] 這兩個陣列是如何合併成最終的已排序陣列呢?A: 因為這兩個陣列在合併前就已經各自完成排序了,因此只要比較各自最左邊的元素的大小,將比較小的元素放進新陣列中,最後就能完成排序囉!其實從一開始只有一個元素要進行合併時就是運用這個方法喔(只有一個元素的陣列視為已排序)!時間複雜度最佳:O(n log n)最差:O(n log n)平均:O(n…

5 years ago

用 Chatbot 打造超有趣線上 RPG :把同事變成 NPC !

完整架完95個模組,尿都變紅色的。 哈囉大家~新年快樂🎉🎉 在被期末考荼毒的同時我又來寫寫工具文了! 每次寫文章都會先列出架構,但還是會花費我蠻多時間,大約1至1.5小時,眼看期末要讀不完了我還在這裡寫案例 ㄏㄏ。 這次主題是《用 Chatbot 打造超有趣線上 RPG :把同事變成 NPC !》 最初分享《老闆惹怒工程師可以激起多大的社群效應:Chatbot 新手基礎操作案例》時,雖然自己分享了失敗的案例,但是出於分享的心情還是感到很興奮。 後來又發佈了《【教學】老闆惹怒工程師可以激起多大的社群效應: Chatbot 新手基礎操作案例》,因為我發現前一篇在操作面實在描述太少,原本是抱著「如果有新手想操作類似案例,操作面可以去看 BotBonnie 的教學」的心情,但是如果這樣依步驟拆解,讓人看案例的同時或是閱讀後可以上手,好像也是深層分享的一種方式。 教學版本的老闆惹怒工程師我還沒有上傳到Medium跟Blink,過幾天考完試再發佈。…

5 years ago

Python財金應用:Black-Scholes選擇權訂價模型(1)

經典的量化金融案例,也是每天在交易室會碰到無數次的內容,推導Black-Scholes formula就不是本篇的重點,有興趣我會在文章最底下附上推薦書單。 選擇權(Options)就是在未來某個時點可用某個價格買進或賣出標的資產的權利,投資人可以買進當作避險或樂透賭博,選擇權槓桿倍數相當大,如果將Gamma效果考慮進去,槓桿可以至百倍,而行情看錯則頂多失去權利金而已,Black-Scholes就是利用未來標的資產進入價內的機率去計算出選擇權權利金的。 有了這個評價公式後,我們可以衡量在設定波動度下的選擇權理論價值,也可以利用市場報價來反推選擇權的波動率,一般稱為隱含波動率(Implied Volatility)。 上圖就是選擇權的報價畫面,可以看到某個日期到期的選擇權鏈(Options Chain)的各履約價報價,並從中反推各種參數。 用Python撰寫Black-Scholes評價公式其實很輕鬆,按照公式的寫法轉換為套件的函數而已,同步還可學會函數的應用。 以上就是一個簡單的選擇權評價範例,給定五個參數數值後,就直接開始計算d1與d2,大家可以對照一下公式,就會發現其實很簡單,下面將每個區塊拆解並解釋。 1. 引入套件(numpy, scipy) 由於Black-Scholes需要用到指數(Exponential)與常態累積分配(Normal distribution c.d.f.)的科學運算 現有預設的Python是沒有這類函數的,則需要引用大量擁有科學運算函數的numpy與scipy。 2. 給定Black-Scholes參數 先行預設標的資產價格(S)、履約價格(K)、無風險利率(r)、具到期日(t)與波動率(Sigma),在整數位後幾乎都有加上小數點,就是為了將變數設定為浮點位,以確保運算正確。 (Python不用另行宣告變數型態)…

5 years ago