fbpx
Javascript工程思維

跟著 YDKJS 作者 Kyle Simpson 打造全新 JavaScript Mindset : 序 (一)

Photo by Hitesh Choudhary on Unsplash 前言 這是一系列我參加完鐵人賽的整理, 最近也透過 火箭隊軟體工程師培訓計畫(高雄) 的場地, 舉辦一系列實體的讀書會導讀, 已經進展到一半了,每次約 3 小時,一週一次已經連續約一個月左右。 透過實際寫過文章、實際講過 YDKJS 這個系列, 這次回顧,把一些真正重要的「大綱」整理出來。 這部分主要會分享一些「自己」的看法, 如果想知道 YDKJS 作者 Kyle Simpson 對於 JS 的想法, 可以參考我的鐵人文章。 鐵人賽…
學程式助教
March 14, 2020
Python工程思維

手把手打造「哄女友神器」,木頭男也超適合!

哄女朋友最高的境界是什麼? 除了用心之外,每天不重複的年言蜜語必然是少不了的。雖然國文老師上學的時候也教了一些東西,但是日子長了必然「江郎才盡」。 大家都是混科技圈的,借助自動化的手段能不能一次性的解決問題呢? 稱霸 GitHub 熱門榜數天的「哄女友神器」 嗯,顯然是可以的。Github  作為全球最大的同性交友網站,工程師們不僅可以在上面交流寫程式的技巧,還能學到如何開發一個自動哄女友神器。 先附上 GitHub  地址:(傳送門) 這個自動給女友發送微信暖心話的項目,已經連續霸榜 Github  趨勢榜好幾天了。作者用 Python3  和 Itchat  微信介面開發了一款小工具,可以定時給朋友發送每日天氣、提醒、每日一句。通過圖靈機器人,也可以智慧自動回覆信息。 操作簡單且容易上手,即使是新手,只要配置好了 Python  環境,安裝好必要的 Python  數據庫,下載程式碼之後,只要 CMD  一下即可實現。 首先,我定的時間是 22:20,一到時間文摘菌的帳號就收到了發送的信息,包括英文和中文情話。北京的天氣以及在一起的多少天。 調整圖靈機器人之後,兩個帳號便可以對話,圖靈機器人還算強大,當我發送:這是個測試之後,圖靈機器人回覆:你不放心我嗎? 備註:工具項目中的天氣信息來自 SOJSON API  介面,暖心情話來自金山詞霸上面的每日一句,還有英文版。圖靈機器人使用需要申請密鑰,每天免費數量只有 100  條。如果使用超過了,可使用青雲客智慧聊天機器人,這個不限制次數。 手把手教學示範 首先,把 Python  安裝好,並配置好環境,個人建議新手安裝 anaconda,具體安裝教程,可自行 Google 搜尋。 然後安裝必要的 Python  數據庫,環境配置好的同學可以直接用 pip install+ 數據庫名 進行安裝。必須安裝的數據庫為:requests、beautifulsoup4、itchat、apscheduler、pyyaml、lxml、simplejson。記住了,一個數據庫都不能少。 然後進入 Github  地址下載項目的全部文件,解壓縮過後,找到 _config.yaml  用 Python IDE 打開。然後進行一系列的配置。 就是這個文件 第一步:配置自動回覆機器人…
學程式助教
March 14, 2020
Python工程思維

不想起身關燈?那就用 Python 寫出能辨識動作的神經網路吧!

常用 Python 的你,真的了解他嗎? 一位來自義大利的工程師顛覆網友們對 Python 的想像! 他不做常見的爬蟲、資料分析與視覺化,他做出能辨識動作的神經網路!真的太強大啦! 打造舞步來控制電源 在今天的文章裡,我將教大家訓練一個神經網路模型,可用來識別鏡頭錄下的「舞步」,並用這些「舞步」控制燈的開關。 我們將在已有的 OpenPose 深度學習模型上建立我們的模型來識別身體位置,然後我們會建立一些樣本來代表身體的各種麼樣。 當我們建立好舞步和其他姿勢的樣本後,我們會清理數據集,然後利用這些樣本來訓練我們製作出的神經網路。 當神經網路訓練好之後,我們會用它來控制燈光。 今天的文章包括很多步驟,不過,所有的程式碼都在 Github 上,上面還包括了我已經蒐集到的原始數據樣例。 使用數據集建立自己的神經網路 首先就是大量的數據。 我們即將採用的神經網路模型,過去卡內基梅隆大學團隊也曾經使用過,他們用自己的全景數據集來訓練模型。 該數據集包括五個半小時的影片,包含了 1,500,000 個手動添加的代表骨骼位置標籤。 整個工作室的圓屋頂上裝有 500…
學程式助教
March 14, 2020
Javascript工程思維網頁前端

如何在主流 JavaScript 框架中做選擇?横向對比 Vue, React, AngularJS, and Angular2

本文原文撰寫於2017年,部分資料可能因時空背景而有不同。 如果你不曉得該如何為你的產品選擇一個合適的前端框架,這篇文章也許可以給你一些啟發。 一個有趣的事實是:IBM 發表的 2017 年最值得學習編程語言名單中,JavaScript 榜上有名。 正是這位 IT 巨頭指出,JS 在網站中驚人地達到 94.4% 的使用率,而且「不太可能降低」。 JavaScript 能確保「對用戶非常友好的網頁,因為它負責整個 web 界面,包括動畫和交互」。 不管你怎麼看,JavaScript 很重要。 這也指明了潛在 Web 開發人員的方向:如果你深入前端,你不得不在某些時刻面對 JavaScript。並且 正確的開發指南 可能有助於此。 讓我們假設你知道 JavaScript 基礎知識,不是一無所知的那種,如果假設是正確的,…
學程式助教
March 11, 2020
Javascript工程思維網頁前端

用Vue.js框架實作自己的Blog – CH3 Vue實例

上回這裡成功的建置環境後,進入下個環節的討論。就是在接觸框架之前,其實並不是非常明白所謂的架構,就會常常出現各種功能混在一起的情況,像是一個Js事件需要同時處理「資料變動」、「樣式修改」或是「資料處理」以及「後端互動」,雖說在開發時都算順利,但過了幾天後回來開發,或是後來要針對網站進行改動維護,卻完全不知該從何下手,而這也就是框架最大的價值,他讓我們在開發時,每一段Code可以專注處理某一個部分的任務,結構分明,在維護上也能更加輕鬆。   開始使用Vue.js   在Vue的官網其實有明確指出「建議不熟悉Vue或是node.js環境使用的開發者先不要使用Vue-Cli」,所以建議一開始接觸Vue.js框架可以先從CDN開始熟悉,基本上只需要在HTML檔的 <head> 中引入CDN即可使用: //開發者模式版本 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> //產品開發使用的穩定版本 <script src="https://cdn.jsdelivr.net/npm/vue"></script>   創建Vue實例 在引入CDN之後,要讓網頁能夠成功顯示需要有兩個要件,分別是模板 (Template)與實例 (Vue Instance),模板可以直接建立在HTML檔中,而實例則是Vue的Javascript物件實例,首先我們先從實例開始說起。 Vue的實例主要是關注資料面的操作,他會負責控管資料以及處理資料,而在Vue的實例中,物件的屬性與方法是有既定寫法的,最核心的屬性設定有 el 以及 data ,el 是指Vue實際掛載在DOM的哪一個節點,通常這個屬性會設定為 "#app" ,這個「掛載」的觀念會在後面的章節中做解釋,這邊可以先把他理解為Vue實際能在DOM中的作用範圍,如果超出這個節點,Vue就無法控制了;接著 data 則是這個頁面會使用到的資料,寫法就是 Object ,key是在模板使用的資料名稱,Value是資料的實際內容,像下方的範例就是我們在Vue中建立了一筆資料,資料的變數名稱叫作 text ,而資料內容是 "Hello World!": var vm = new Vue({ el:…
學程式助教
March 11, 2020
Javascript工程思維網頁前端

用Vue.js框架實作自己的Blog – CH2 環境建置

在上回這裡對Vue有了基礎概念後,在開寫Vue之前肯定需要經歷一番環境建置的陣痛期啦~不過其實在建置Vue.js的環境我個人覺得還算友善,不像某Tensor開頭的機器學習框架,要建立GPU計算的環境真的是弄到懷疑人生......,今天就來跟大家分享一下小弟在建置Vue.js環境時遇到的過程以及遇到的狀況   首先,那個Node.js與NVM (Node Version Manager)   因為在學習Vue之前我主要都是利用SFTP auto save上傳到Host然後再看改動的方式開發,基本上沒有接觸過本地端的開發方式,所以也沒有使用過Node.js的經驗,所以在安裝Vue之前必須先進行Node.js的環境安裝,基本上這也是在所以過程中最讓我印象深刻的地方。   安裝Node.js有幾種方式,第一種就是直接上Node.js的官方網站下載直接安裝,我一開始也是直接利用這種方法,但後來後悔了;第二種是利用Node的版本控制工具 - NVM進行安裝,這是我蠻推薦的作法,畢竟在開發或維護不同的專案時,每個專案開發時的Node版本可能不盡相同,所以這時候NVM的優勢就是可以讓我們直接快速地進行Node.js的版本切換,不用再刪除重裝之類的。   要安裝NVM的方法基本上非常簡單,只需要使用他們官方的Github上說明的指令,即可在Terminal進行安裝: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash 在下載完NVM之後可以嘗試在Terminal執行 nvm --version 如果他有回應相應的版本號,就代表NVM安裝成功了,接著就可以進一步利用NVM安裝Node.js。   利用NVM安裝Node.js…
學程式助教
March 11, 2020
Javascript工程思維網頁前端

用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首頁的卡片式文章顯示就是利用上圖中的紅色組件 - CardUi 所架構,而組件的運作方式在之後的文章中,我會在獨立介紹他。 資料驅動一切 在Vue框架當中,有另一項特色就在於它是利用資料驅動所有變化的,當資料發生變化時,Vue會根據我們設定的情況做出相應的改變,首先在這個架構中,資料與模板是獨立分離的,在一開始寫網頁時,我們會直接將內容寫在HTML的標籤當中,或是透過PHP在預處理階段時生成,但在Vue框架中,資料會獨立存取在Vue物件的Data中,然後在物件被實例化的Creat階段時渲染(Render) 進模板當中,像是這樣:…
學程式助教
March 11, 2020
HTMLJavascript工程思維技術問題網頁前端資源整理

盤點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 GitHub 傳送門:https://github.com/anijs/anijs 3. matter-js 創立者:liabru…
學程式助教
March 4, 2020
Python初學程式

【線上課程心得】用一個假日進行 Python 資料分析視覺化實戰 By Blueboy0937

第一節由老師解析python基礎功能並利用練習題先來思考如何呈現再來熟悉各項指令,這是相當不錯的進入到python的第一步,但我會希望print可以提早幾的單元,因為print 功能是相當常用的功能,安排在99乘法表的作業後較無沒有什麼作用。 第二節利用pandas了解資料視覺化的前處理,資料處理數據呈現的重要,在之前學習會常常想把已有的資料數據就想要做出圖表卻無法呈現,原因就是資料需要做處理並篩選,在這課程中老師有在這部分給了很多方法,將各式不同來源資料用適合的處理的方式,先將數據列出以便後續圖的繪製。 第三節Maplotlib 與 Seaborn 已經是python常見視覺話套件,在本次課程讓我更了解這兩個套件更多套件搭配不只有折線、柱狀這兩樣還有點狀、箱圖、小提琴情圖….還有KDE在統計上的輔助使用。 套件指令由老師解析後,如何使用並發揮視覺化功能,也能夠多加嘗試有助於更多面向的資料型態出現不同的樣貌,可以在分析上能以不同角度來評估。 希望能夠加入視覺化中文顯示範例 因課程上都以英文呈現table但在目前的工作環境上還是會希望以中文介面呈現,網路上雖爬文也找得到中文顯示方式,若能夠直接在本課堂教學一次打包更讓人為之一亮。   Udemy 線上課程:【增加職場技能】用一個假日進行 Python 資料分析視覺化實戰 成為快樂學習員:為推廣與提升學習 Python 資料分析之環境,提供學習員鼓勵計畫。分享本篇文章做推薦學習至臉書動態牆並來訊「快樂學程式」粉專分享你學習該堂課的動機與該貼文連結,學程式提供八折優惠折扣。被分享數有達10個以上進行申請(oh!你的學習意願有目共睹,必須給你拍拍手),更提供你六折優惠!讓快樂學程式幫助你快樂學習,提升職場競爭力:)   心得出處[email protected]
學程式助教
February 29, 2020
Python初學程式

【線上課程心得】用一個假日進行 Python 資料分析視覺化實戰 By Sayokagain

先講優點,我覺得老師口齒非常清晰,而且對課程編排的方式別具匠心.這個課程設計內容跟外面比起來的最大不同點在於,是以實戰方式為導向,將所有實戰資料分析時最常用的知識與技巧,做為課程內容設計.因此,不會像一般的教學那樣多到包山包海,反而只有最濃縮的重點精華,而且每一項舉例幾乎都是實際處理資料分析時需要用到的小技巧(不論是一開始程式語法教學或者第二章Pandas都是),所以學起來會感覺東西特別少又特別好學,因為我之前看過其他書籍的教學,很多Python語法或範例都是資料分析不常用的,但這份影片內容的教學卻很有親切感,且非常實際. 我對這份課程的一些建議如下: 1.老師示範時是使用Mac系統,但我實際是使用Windows系統,因此一開始操作時就會遇到很多不一樣的狀況,我建議路課程前可以用Windows系統實際操作一次每個步驟看看,因為有很多狀況可能都不同.(我一開始是連jupyter notebook都進不了,但我自己解決了Path問題,可是一般不懂Dos的學生應該就會放棄了),又或者某些套件是否已經預設安裝,好像Mac跟Windows系統也會有落差,這個可能也需要測過才知道. 2.好像沒有教到左取字串跟右取字串的方法(或者從字串某個字取到某個字),另外,關於那個join的用法,不知道老師是否能順便教自訂函數(或方法),因為很多學過其它程式語言的人可能都會犯跟老師影片示範中一樣的錯誤(一般join陣列會把陣列放前面,join內放用來合併元素的字元).想知道有辦法透過自訂函數將語法改為像老師誤打得那樣嗎?還有,從第二單元開始影片的聲音就變超小聲! 3.我有實際將老師的每一行指令打過一次(我並不是純粹看影片而以),但我發現過程中遇到好多障礙,第一個好像是那個範例檔我找不到(因為資源沒有擺在正確的課程單元位置),接著是下載後的範例檔要擺放的位置(影片中並沒有教jupyter notebook的預設目錄在哪,所以學生下載後不一定知道要如何打開),然後某個CSV檔打開時我發現竟然是UTF-8,但照理應該要是ANSI才是(而且這段影片教得跟我在範例檔內看到的並不相同),還有我試過老師教的某些參數,好比index_col,好像只能用在read_excel,用在read_csv就會掛,一些奇奇怪怪的小錯誤讓我自己跟打時花了好多時間除錯. 4.我覺得這份教材對學生的定位是混亂的,感覺好像想針對初學者,但是又不是完全的初學者.像前一點所提到的問題,如果是純初學者,應該會採坑採到死,但若不是針對完全初學者,前面教安裝與基礎語法那段,感覺好像也有一點太過基礎.又比如資料分析有一段,教到使用統計的平均數減標準差算z值,這個好像已經假定了學生是懂統計,如果是對初學者,應該會完全聽不懂才對(尤其一般學程式的統計學通常不會太好甚至沒學過) 其實我沒有來得及看完,我只看到第二章,我最後一件想說的就是,如果真的乖乖看影片,並且把每個單元都實做過,另外還乖乖記錄下所有錯誤更正,可能還需要更多時間.我剛好這兩周周末比較忙,平日晚上也不是都每天有空,所以只能盡量看盡量測,大概到2/28連假才有辦法全部看完吧,如果有可能,以同樣內容長度的東西,希望下次測試時間可以再多一些(抱歉,我知道截止時間是今天中午,我已經超過時間交了,但我想我應該是有很認真幫你們寫回饋的,如果需要,第三章的部分我可以之後補給你們,也謝謝給我機會試看這份教材) Udemy 線上課程:【增加職場技能】用一個假日進行 Python 資料分析視覺化實戰 成為快樂學習員:為推廣與提升學習 Python 資料分析之環境,提供學習員鼓勵計畫。分享本篇文章做推薦學習至臉書動態牆並來訊「快樂學程式」粉專分享你學習該堂課的動機與該貼文連結,學程式提供八折優惠折扣。被分享數有達10個以上進行申請(oh!你的學習意願有目共睹,必須給你拍拍手),更提供你六折優惠!讓快樂學程式幫助你快樂學習,提升職場競爭力:) 心得出處[email protected]
學程式助教
February 25, 2020