正式上工前的學習日記們


Posted by Powerfultraveling 's Blog on 2021-12-21

前言

在學程式的過程中發現到寫日記非常的有幫助,所以開了一個頁面用來裝這兩周的日記。

模板

## 2021.12.
### 今天要做的事
### 中場紀錄
### 一日總結

日記

2021.12.21

今天主要學習了理財知識、Vue 基本的 API 以及基礎的 Tailwind。

1. Vue:

今天學了很多 API, inject、 provide、 dynamic component、v-model with component、mixins、ref、composition component、vue lifecycle。基本上,最基礎的 API 都已經摸過一遍了。整體來說,使用起來沒什麼問題,這幾天想寫幾個小 app 來熟習這些 api 的使用。

老實講,我覺得比起 React,Vue 的學習取線似乎更高,時不時就要去查一下 API 文件,看看 Vue 專有的 syntax 是甚麼,不像 React 可以直接用 JS 寫。再來,vue 的 structure 有時候也會讓我有點混亂感,照我現在這樣的寫法,以後維護上會有問題,等到熟悉之後,再來研究如何讓 vue 有結構一點吧 !

2. Tailwind

一個類似愈 Bootstrap 的 css 庫,不一樣的是,比起提供 UI 元件的寫法,他更像提供一個已經寫好的 css 資料庫。

使用 Tailwind 的好處在於更好規範專案中各個尺寸、顏色,我們也不需要再花時間為一些很功能性的 class 取名子。另外 Tailwind 的 class 都是可以重複使用的,可以有效減少 css 膨脹的狀況。

3. 理財知識

我是超級菜雞,所以選了一本很入門的書,寫了書摘在 medium。

2021.12.22

今天要做的事:

  1. 用 Vue 開發一個簡易的文章瀏覽 App,主要是用來練習前幾天學到的技術。
  2. 試看看用 Tailwind
  3. postcss 初探

中場紀錄:

早上成功用 vue 開發了一個簡單的文章瀏覽 App,不用 route 的方式創造了分頁的效果,並且使用了 Pagination,狀況算是蠻讓人滿意的。接下來下午的工作大概長這樣:

  1. 幫 vue App 加上 skeleton loading 的效果 + 學習基本的 css animation
  2. 初探 Tailwind

一日總結:

Vue 專案

今天用 Vue 完成了一個文章閱讀列表的小專案,運用了 pagination、skeleton loading、turn page without router 這些功能。這些功能其實都已經有寫好的模組了,之所以沒有使用是因為想要利用這個機會熟悉 Vue。在完成今天這些任務之後,接下來的主要任務是:

  1. 研究怎麼讓 Vue 更好維護,現在寫出來的程式碼長得很亂。但也有可能跟自己不這麼熟悉 Vue 有關。
  2. 將 PostCss、TailWind 融入這個專案,以後工作需要。
tailswind

剛剛稍微摸了一下 tailswind,目前還不太熟悉環境設定,所以有些問題,而最大的問題是每次寫完新的 class 上去 html,似乎都要重新跑一次 build 才能顯現在頁面上。

這個行為跟我預想的不一樣,首先我看的教學與文章,似乎都沒有這個步驟,再來,我原本在腦中預設 postcss 的運作模式是:

拉 Libary 下來 > HTML 檔案可以 access 這些 class > 直接適用

但目前來看似非如此,明天再研究吧 !

明日目標:

  1. 研究 rem 的使用
  2. 研究 media query
  3. Postcss tailswind









Related Posts

Flex-grow / Flex-shrink / Flex-basis

Flex-grow / Flex-shrink / Flex-basis

Graph  [1] 七橋問題

Graph [1] 七橋問題

Codewars Kyu 4 Python 3

Codewars Kyu 4 Python 3


Comments