本章節主要是給稍微了解vue,或是有寫過其他框架,會跑基本迴圈與判斷v-if , v-for等概念的人,可以進一步了解vue的特殊實用部分。主要會介紹

  1. Vue 3 CreateApp: 了解vue是如何產生並附著在html的基本概念
  2. Vue App註冊component
  3. Vue children: <slot>
  4. 特殊tag <keep-alive> <teleport>

Vue 3 CreateApp()

使用框架或套件,我們常常看了教學影片或文章,套用的過程中發現有畫面、資料就直接開發下去了。團隊中通常也有人已經把開發環境建好,我們只要直接開發即可。也因此我們忽略了框架的原則原理,沒有基本的原理認知,很多時候畫面出不來時debug自然時間就會拖很長。今天主要介紹vue app是如何讓web運作的

不可或缺的兩個檔案

  • public/index. …


2020-0306 Lion教育訓練,之前寫到一半,遲遲沒有publish,因為上半年專案與需求一個接一個。現在剛好正是時候重新整理與大家分享。

▲React入門教育訓練

前言

2020 LionF2E 開始一系列的教育訓練課程,本課程為React入門及使用Typescript開發。由於短短兩個小時的時間非常有限,因此只能把課程濃縮再濃縮,課程步調相對比較快,建議有寫過基本React的人會比較好吸收。同時也會把一些使用react上遇到的問題與地雷與大家解說。前面基本的部分我會輕描淡寫帶過,主要著重在react Class Component的生命週期與常見地雷。

專案與環境設置

  1. 專案下載路徑: https://github.com/cwchang93/react-ts
  2. 啟動專案: npm run storybook / yarn storybook
  3. 投影片網址: https://reurl.cc/E78W8a

執行以上步驟前,必須先下載NodeJS


最近學資料庫,無意間發現以前母校有資料庫課程。假如大學時候就有這些課程,那我一定會去修,不過當時還沒有巨資學院,這些程式、資料庫相關的課程相對少,巨資學院在我剛畢業時才剛成立,這讓人有種生不逢時的感覺。此筆記整理自東吳大學黃福銘老師的數位課程,覺得教得觀念很清楚。

A. 資料庫定義:

廣義:資料庫是儲存資料的地方

狹義:資料庫是一群相關資料的集合體

儲存、新增、修改、刪除、查詢

優點:降低資料重複性、達成資料一致性、共享性、獨立性、完成性、安全性、避免紙張與空間浪費、達成資料安全性。

B. 資料庫系統(DBS)

資料庫(DB)、資料庫管理系統(DBMS)、資料庫系統(DBS = DB + DBMS)、資料庫管理師(DBA)

C. 資料庫管理系統功能

  1. 資料的定義 (Data Define)
  2. 資料的操作 (Data Manipulation)
  3. 重複性的控制 (Redundancy Control)
  4. 複雜關係的表示 (Multi-Relationship)
  5. 實施完整性限制 (Integrity Constrain)
  6. 備份 (Backup)
  7. 回復 (Restore)

D. 關聯式資料庫元素的階層( 小 => 大 )

位元(Bit) => 字元(Byte) => 資料欄(Field) => 資料錄(Record) => 資料表 (Table) => 資料庫 (Data Base)

E. 資料庫設計程序(階段)

  1. 資料庫需求收集 & 分析
  2. 資料庫概念設計
  3. 選擇資料庫系統
  4. 資料庫邏輯設計:

ERD實體關係圖、概念資料模型。

資料庫模型:階層式、網路式、關聯式、物件式、非關聯式

5. 資料庫實體設計

F. 資料庫系統架構分類

  1. 單機架構(Standalone)
  2. 主從式架構(Client-Server)
  3. 三層式架構(3-Tier)
  4. 分散式架構(Distributed)

G. ER關係圖(Entity Relationship Diagram / Model)

  1. 定義:用來描述實體與實體間關係圖的工具

2. 實體:用以描述真實世界的物件,可含有多個屬性來描述該實體,在關聯式資料庫用資料表欄位來表示屬性。 e.g. 學生、課程、老師、員工、產品、服務。

2–1. 強實體:不需要依附其他實體而存在的實體 e.g.會員、課堂

2–2. 弱實體:需要依附其他實體而存在的實體 e.g. 會員年齡、課堂參加名單

3. 關係:用來表示一實體與另一個時間關聯的方式。e.g. 一對一、一對多、多對多。

ER Model 優點

  1. 圖形化表示方式
  2. 容易被非技術人員了解
  3. 設計者與使用者溝通的橋樑

ER圖物件符號

  1. 實體(Entity): 用以描述真實世界的物件。
  2. 屬性(Attribute): 用來描述實體的性質。
  3. 鍵值(Key): 用來辨認某一實體集合中的每一個實體的唯一性。
  4. 關係(Relationship): 用來表示一個實體與另一個實體關聯的方式。
圖一、ER圖範例()

以上是前面幾堂課的內容。

後續會再繼續學習資料庫架構與SQL語法

參考資料:

  1. 資料庫導論(數位課程) — 東吳大學黃福銘老師

最近在建置讀書會專案,從中學習SQL語法是最快的方式。像是讀書會很多課堂需要篩選,這時候用SQL篩選資料比起用php或js 把資料引入後再篩選快得多。

但會牽涉到很多SQL指令,這篇會著重在篩選,以及把有用到的指令記下來。

MYSQL

  1. 選取整張table的內容,並加入篩選條件
SELECT * from <table> where <columnName> = <columnValue>;SELECT * from classes where date_s=`2020–07–07 23:00:00`;

2. 篩選出欄位中包含某些字元(LIKE %<str>%)

SELECT * from <table> where <columnName> LIKE '%<str>%';
SELECT * from classes where date_s LIKE `%2020-07%`;
▲選取七月的資料

3. 清空資料表中所有資料

DELETE from <tableName> where <condition>;DELETE from classes where date_s LIKE '%2020-07%';  這邊特別注意like是用''  不是`` 

4. 修改欄位的屬性

有時候會碰到原本設計的欄位長度太短,需要改更長或是修改屬性。


2020/09/15剛辦完讀書會的歡送會,回到家中還是太興奮睡不著覺,夜深人靜,腦海裡浮現讀書會剛開始創辦到現在的種種經過,一幕幕出現在我腦海裡,有感而發,覺得要分享完我才能睡得著覺。

很感恩大家在忙碌的生活中還撥空來參加讀書會,令人感動的是,好多特地搭高鐵客運特地從中南部上來參加聚會!覺得讀書會的大家,雖然平常只是線上聊天,都沒見過面,但有著人與人之間緊密的連結,真的很棒👍

今天大家玩得都很開心,而且今年要出國的大大們竟然都不約而同還沒出國且今晚剛好都有空,這簡直是巧妙且難得的緣份🙌。其中比較令我印象深刻的是Angela分享很感謝之前讀書會給他的一個啟發,當時我分享”Try Something New for 30 days” 用30天的時間督促自己培養一個習慣,並且可以上傳到IG限時動態中,連續30天! 他說這個啟發到他,讓他也想做一個project並突破自己,也跟我們分享他開始在podcast上錄鬼故事(不眠書店),聽完覺得也太酷了,也覺得讀書會的交流,分享的過程會發現原來無形中已經有幫到別人了。

祝福準備要出國的7位大大們(🇬🇧Iris, Irene, David, Wilson, Loly, 🇳🇱Leonie, 🇸🇬Rivers)一路順風~ 也希望後續大家持續保持聯繫😃

▲Farewell Party

回想讀書會歷史:

其實從讀書會開始到現在已經兩年半左右的時間了,從2018年3月底,那時候剛辭去國外業務的工作,準備轉行的過程中創立的,會創立的原因是因為2015年留學回來為了維持英文口說能力,參加很多讀書會,但往往讀書會都撐不久,其中有個還不錯的讀書會,規定很嚴格,但後來因為沒人管理,那個讀書會也解散了,覺得很可惜,因此那時候決定重新創辦一個。也問了之前在其他讀書會認識的成員Doris是否一同重新開始讀書會,從2個人開始,慢慢尋找有興趣一起練習的人,於是就開啟了創辦及認識各領域朋友的奇幻旅程。

起初,讀書會只有小貓兩三隻,為了鼓勵大家早起,我們每天早上7點就開始一個小時的全英文討論了,最初的名字取名叫“Early Bird English Study Group”,且每週至少參加3次(我現在想起來都覺得也太嚴格了😂)。

後來隨著人數愈來愈多到達20多人,我們新增了晚上的場次,每天晚上10點開始討論會,逐漸變成每天都能夠講到英文,早晚各一場,後續改名叫M&E English Talking Lab (英會製造所/早晚英會社),由我們Iris大大想出來的👍

演變至今到現在已經有近50位成員了。一開始成立的最初目的是想要練習英文,因為台灣這個環境,常常找不到人練習。從創立到現在,自己作為參與者而言,不僅僅只是英文口說程度的提升,更重要的是分享自己所學的領域,對同樣的議題,分享不同觀點,以及幫助他人。

參加讀書會的意外收穫

1. 優質的人會聚在一起-找到同好及朋友

在這個讀書會,不得不說制度真的滿嚴格的。早期流動率非常高!如果沒有良好的自制能力與學習動機是撐不久的。經營到現在,留下來的都是認同讀書會價值的人,且可以發現留下來的人都有強而有力的上進心,不難發現多數成員的學歷都是前幾志願甚至是有許多海外留學經驗的成員。

許多人找到同好,甚至遇到以前10年不見的高中同學,彼此相認了。也有很多人因為有了這個讀書會平台而更了解其他領域的相關知識,並能以更宏觀的角度去思考同一個議題,甚至彼此提出不同的見解。

2. 資訊分享與傳遞

最近有位成員分享自己準備要開發越南市場,但對當地開發沒有什麼概念,當時我就想到另一位前讀書會成員,於是就介紹他們認識,後來也幫助到他了。

3. 更多機會

也有許多人因此得到更多的就業機會與交流。其中一位成員同樣是做網頁開發的成員,在某一次的討論中聊到他想換工作,當時公司有在徵前端,因此就問他對蔽司有沒有興趣,我可以向主管推薦看看,後來就變成同事了。當時我的第一個想法是我們還滿有緣的,從一個線上讀書會的網友變成了同事。同時也覺得能夠透過平台,分享更多的機會與資訊,真的很棒。體會到

出社會後『學歷是銅牌,能力是銀牌,“人脈”是金牌。』


好幾年前看了這部短短3分鐘”Try Something New for 30 days”的TED影片。當下非常有感覺,覺得持續做一件對自己好的事情,一定能夠有所改變。然而,“覺得”畢竟只是“覺得”,知識或想法沒有拿來應用,都只是空想。最近讀書會忽然想到這個主題,於是就跟成員討論,同時也覺得要付諸實踐,親自實驗看看才行。

多數人常常有目標,但沒有付諸實踐

其實回想從以前到現在一定會有許多目標,短期、中期、長期。像是以前常會說「我每天要背10個單字,但一週過後、一個月過後。」(請問你後來被了幾個單字?) 「痾…我只記得abandon」😂

其實我們生活當中都一定會有很多想要精進或是養成的習慣,像是閱讀、運動、瘦身等。但後續為何多數人沒有達成?因為持續力不夠。

然後不難發現那些會成功減重、改變等其實除了自己的意志力夠強,我覺得另一個方面就是生活中可能遭遇到某些推力,導致他不得不做出改變,像是身材被嫌、被酸講話沒內容等,因此因為夠苦,讓他不得不下定決心改變,當然這部分之後有機會可以分享。今天主要和大家分享30天持續力的方式。

30 Days Project 分為幾個面向

  1. 選定目標

目標可以由很多種,看你缺甚麼。我自己是選跑步,因為自己住在山上,覺得要多親近山林,同時也督促自己早睡早起。

2. 設定每天達成目標

一開始先以能夠持續的量開始,因為如果一次太大量的話,做不到三天保證就會想放棄了。因此我當初是給自己設定每天早起跑步10分鐘/或2.5km。如果你是閱讀的話,可以設定至少讀1–2頁或是10分鐘

3. 每天記錄並找方法督促

當時突發奇想,想到現在IG限時動態可以讓大家都看到。那我們何不利用這個工具來改變自己? 當想要偷懶的時候,一想到沒每天PO IG會有壓力的情況下就會好好督促自己乖乖去做了。

以下分享自己每天PO在 IG的限時動態(7/27–8/25),btw前面兩天因為一開始不會用限時動態就傻傻的把它刪掉了…覺得有點可惜

每天拍下晨跑的時間當天完成的量,如此一來持續30天。相信你跟你身邊朋友會看到不可思議的改變的!

▲running for 30 days

一、前言:

最近重新更新了自己的個人網站,需要重新部署。回顧之前在前東家有幫大家上過NextJS網頁專案部署,趁這個機會來回顧及統整。如果大家對Next有興趣也可以看看Lion欣傳組大神FM大大寫的NextJS完美出擊

此次課程投影片大家也不妨從前面review一次,相信大家會有很多收穫的。

▲NextJS + 雲端部署教育訓練課程

在開始之前還是要再分享一下自己對部署這塊的心得。其實我剛進公司寫前端時,一開始對環境架設、前後端串接邏輯、部署等名詞都是一片空白。也發現很多人都滿怕自己被指派到環境設定或是需要webpack打包、部署專案等工作項目,不要害怕,只要有嘗試的心,用心學習一定可以學會的。

雖然在公司多數的人不會碰到這部分,基本上每個team只要有人會設定環境以及放到server上就可以了。但個人認為,開發專案一定要學會怎麼部署,如此一來成 …


前言:

昨天心血來潮,決定要來更新一下macOS作業系統-Catalina,一開始其實還是會有疑慮會不會系統太雷,因此而無法使用。但因為最近蘋果股價漲很兇,想說就相信他一次,所以也沒有另外爬文,一時的衝動就更新了。沒想到更新完後惱人的蟲子跑出來了,我的html中文失效,且完全變成亂碼。

▲更新完的版本

HTML中文變成亂碼?

講到這邊,你可能會問,變成亂碼是什麼情況?頁面呈現又是如何?如下圖(一) 你可以看到變成很奇怪的符號,但畫面卻是正常的。此時我立馬想加中文,看看會發生什麼事。沒想到,中文讀不到了。


前言:

鍵盤是大部分上班族工作的必需品,特別是對整天需要面對電腦及寫各種報告的人。

以前剛轉行當工程師時,還沒有辦法體會到一把好的鍵盤真的那麼重要,入行1年多後逐漸體會,盲打是必備,好的鍵盤也會讓你想要繼續工作下去,且愈打愈有存在感。

PS:先前舊版的MacBook Pro鍵盤真的是有夠難打,打出來都會覺得自己程式中充滿了bug QAQ

如何有效清理機械鍵盤?

在分享之前想先介紹一下跟我一起奮鬥將近兩年的bro還有介紹一下自己對於鍵盤還有工作效率的看法

Ducky One 打字紅軸 PBT2

一開始看外觀其實不曉得是什麼軸,剛開始還猜是黑軸。實際試打覺得是茶軸或紅軸,實際拆開鍵帽才發現原來紅軸。

Ducky One PBT2

有些同事朋友常說:「你鍵盤也太難用,都沒注音符號。」當時我很納悶,覺得小時候有打game的人應該都不用看鍵盤了吧,尤其是注音符號lol,即使沒打game,也寫過很多報告,應該也具備盲打能夠。後來才發現,還滿多工程師打字雖然快,但還是沒辦法盲打。

關於盲打

其實對於盲打這件事情,在我轉行之前很多工程師朋友就已經建議,要當產值高的工程師,一定要會盲打,效率才會高,產值才會多!

我自己非常贊同工程師一定要會盲打,不僅是做工程師,只要你每天會需要用電腦打字,那盲打是必須的。

這個時候你可能會有個疑問,就是我每天都用電腦打字,但是還是沒辦法盲打。那問題出在哪呢?

我自己的觀察是沒有用對方法,即使每天寫了很多扣(code),但因為還是用那其中幾根手指頭在打,自然而然沒辦法突破!

這也讓我想到一句話『走同樣的路,到不了新的地方。』

一開始用錯方法沒關係,但要願意修正,願意調整,調整過程中一定會有陣痛期,調整過後,日後一定能夠突破的。

A. 用具準備

1. 拔鍵器

2. 牙刷

3. 毛巾

4. 洗碗精

5. 小盆子

6. 棉花棒


你是否也有想學程式或課程找不到資源的狀況呢?在此推薦Coursera平台,能夠免費上國內外大學的課程,打好程式基礎。

▲coursera (ImageSource)

以下介紹申請Coursera獎學金的方式只要簡單3步驟即可上課!

申請獎學金,與付費上課的差別就在於等待期(15天)。其他權益基本上都一樣,完成課程後可以把證書秀在LinkedIn上面。作業繳交與課程討論都與付費內容完全一樣!

Note: 若申請旁聽,則無法繳交作業與獲得學分與證書。

1. 先到Coursera官網註冊帳號

2. 搜尋想學的課程(e.g. ReactJS)

Jinwei Chang

Web Develop X Investor X Traveller 經濟系畢業。誤打誤撞開始從事網頁開發,熱愛分享學習知識及生活啟發。 關於我:https://chun-wei.com 聯絡信箱:jinwei@chun-wei.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store