CSS

[12th 鐵人賽] Flexbox 的使用姿勢 Part 4, Day 10

各種對齊方式 前幾天都有約略提到了關於對齊的事情。今天就把最後一些關於對齊的東西一次都補上,最後來一點大補貼。 justify-content 水平方向的對齊控制。 align-items 垂直方向的對齊控制,需要有 height 設定才看得出效果。 getBoundingClientRect() 拿到子元件的 所有座標點都不是你想的那個樣子。 元件的 margin 會算入自身尺寸, 不會出現 像是一般區塊元件 margin 會互相交疊的情況。 無論哪個方向所產生的間距(gap)都是瀏覽器運算結果,無法人為控制。 子元件若為區塊元件(Block Box),當中若有大於子元件的內容,會干擾子元件尺寸。 子元件若為 Flex 元件(

  • Hina Chen
    Hina Chen
4 min read
CSS

[12th 鐵人賽] Flexbox 的使用姿勢 Part 2, Day 8

流 當我們定義好一個 flex 的容器時,昨天有說過了,預設會使用 row 這個設定來定義容器的流向。所以,在容器定義好的當下,我們把基本的容器設定展開來看,另外,我們賦予他 wrap 的設定,避免當中的元件被切掉, .flexbox { display: flex; flex-direction: row; flex-wrap: wrap; /* 以上等同於 */ /* flex-flow: row wrap; */ width: 100%; } 關於容器內容的流向、邊界、對齊等等,我們可以簡單的說明如下,

  • Hina Chen
    Hina Chen
5 min read
CSS

[12th 鐵人賽] Flexbox 的使用姿勢 Part 1, Day 7

簡單介紹 雖然說 Flexbox 已經推出好一段時間了,但說實在話我自己好像沒有特別著墨。當然,我覺得如果可以的話,去看一下 Amos 的課程,一定比看我在這邊講幹話來得實際! 首先,我們先理解一下 flex 的作法, .flexbox { display: flex; } 首先是把一個 DOM 元件定義成 flex,這樣接下來的設計才會生效。這個 flex 元件預設會使用 row 這個維度來顯示資料。換句話說,你若什麼都不寫的話,他的 flex-flow 預設就會是

  • Hina Chen
    Hina Chen
7 min read
CSS

[12th 鐵人賽] 從內容開始看格線系統 Day 5

內容為王 如果以現在的趨勢來看,應該叫「廣告為王」。 當然我不會設計,所以也就不會設計廣告。網站主要的目的,是要傳達內容,所以關於文件流、斷點、區塊設計這些事情,在整個版面上才會這麼重要。至於你說那些內容農場,基本上都屬於廣告為王的範疇,我就不討論了。如果對於文件設計很有經驗的人,基本上可以跳過這一天沒有關係。 那麼,由於設計我不會,那這邊還是有幾件事情可以跟各位前端工程師分享。主要的前置作業,我們還是會回到前幾天所說的,與 viewport, @media 跟基本格線系統有關。 viewport 能不能改? @media 怎麼設計? 那個 rem 單位設計。

  • Hina Chen
    Hina Chen
10 min read
2020

[12th 鐵人賽] 我是誰,我在哪裡 Day 3

回到未來 網頁在很久很久以前,是使用 HTML 來製作的,約莫過了 20 幾個年頭,現在的網頁還是 HTML 製作的。只是版本號的推演進度比較慢,目前來到 HTML5,約莫也有 6 年的發展痕跡。 胡說!網頁明明就是 FrontPage 製作的。 工具的大鳴大放大概真的是從 FrontPage 開始,然後 Dreamwaver,然後 Photoshop 也可以匯出,到現在 Sketch 的外掛工具也能幫你做好這些事情。不過,

  • Hina Chen
    Hina Chen
10 min read
ITHome

[12th 鐵人賽] 那個網頁設計 Day 2

網頁有什麼 粗略上來看,目前市面上瀏覽器打開的那個「畫面」,就屬於我們俗稱的「網頁」或是「網站」。而且不難發現每次去到各種網站,最常見的大概就是廣告。上方廣告橫幅、下方廣告橫幅、蓋版廣告、文章內容背景捲動廣告、看影片先看 10 秒廣告、Download 本身是廣告(下載按鈕在下面用小字)、點站外連結先幫你檢查(看)是(一)否(下)是(聯)惡(播)意(網)連(

  • Hina Chen
    Hina Chen
6 min read
ITHome

[12th 鐵人賽] 我說那個手機版 Day 1

說在最前面 網頁這種萬年老埂應該是沒什麼人會看,會想要撰寫這種偏冷門的東西,純粹是個人比較邊緣的關係。目前市面上各種關於網頁製作、切版的工具五花八門,真的會想手動自己來的應該屬於抖 M 屬性(吧)。總之,如果對於網頁製作有興趣,或者是想看看到底在做些什麼東西的人,可以繼續看下去。 至於是不是要看滿 30 天,如果我寫得完的話應該可以考慮按一下追蹤之類的。 大概會說些什麼 網頁「設計」在「設計」什麼? 給「人類」看的,給「機器」看的有什麼差別? 區塊、內文、文件流要流去哪裡?

  • Hina Chen
    Hina Chen
2 min read
VueJS

[IT 鐵人賽] 在 Vue 之後的事情,還會有什麼? Day 30

結束了鐵人賽 30 天的過程,其實說真的我也沒有講太多 Vue 的事情,多半都是圍繞在一些奇怪的應用上。後續的 Vue 發展會是什麼樣子,其實身為一個在前端打滾的工程師來說,我個人其實也沒有那種強烈的慾望,說他一定要發展到什麼樣的程度。 起碼,這樣的工具對現在的應用上來說,還算是充裕的就夠了。 Vue 框架 其實 Vue 的崛起算是相當快,背後雖然不像 React, Angular 那樣有個強力的老爸撐腰,但說起來團隊也還算相對活躍。也許這會讓人多少有點憂心,萬一團隊不更新了怎麼辦?或是這個框架以後不維護了怎麼辦? 說真的,比起擔心什麼框架不維護,為何不先擔心你自己不去學新的東西? 就像是我以前把玩的

  • Hina Chen
    Hina Chen
4 min read
VueJS

[IT 鐵人賽] 下一個 VueJS 3.0 Day 29

前幾天都沒再持續提到 Vue,今天來聊一下關於 Vue 3.0 與其後續發展狀況。雖然目前還是 RFC 的階段,不過,大致上走向應該已經確定了。 推薦閱讀 Kuro 的 初探 Vue 3.0 Function-based API Function based API 如果有比較大量在 Vue 裡面寫 Mixin 的人,對於這個改變應該會比較容易接受。主要的概念就是將該在一起的東西放在一起,避免一些奇奇怪怪的狀況。而且目前官方的說法,

  • Hina Chen
    Hina Chen
4 min read
VueJS

[IT 鐵人賽] Vanilla JS 與 Vue 的生命週期 Day 28

最後幾天來聊一下關於生命週期的事情,這裡提到的生命週期並不限於 Vue 所屬的區域,也包含了一些原生 JavaScript 那種無關 Bug 而是一種 Feature 的那些 生命週期 的事情。 沒有被 JS 婊過就不算寫過 JS 你說是吧( 並沒有這種說法好嗎 ) 關於封裝與執行 我之前犯過幾個低級錯誤,舉個例子給大家看個笑話: <template> <section class="hello"> <

  • Hina Chen
    Hina Chen
5 min read
VueJS

[IT 鐵人賽] 大型資料載入實例與狀況 Deep watch Day 27

昨天看了一些關於大量 DOM 的事情,今天來聊一下關於深度監看的事情。其實在 Vue 裡面,預設的監看並不會看太多,也就是不會看很深。為了效能考量,所以基本上各家前端框架在這件事情上面,或多或少都會留一點餘地。 然後這些餘地有時候會讓人覺得很困擾。 怎麼監看? 實際上 JavaScript 是可以透過 Proxy, Reflect 來實作一個簡易的監看方法。 const onChange = (objToWatch, callback) => { const handler = { get(target, property, receiver) { callback(); const

  • Hina Chen
    Hina Chen
3 min read
VueJS

[IT 鐵人賽] 大型資料載入實例與狀況 Large of DOMs Day 26

昨天提到大量資料的事件綁定,今天再來聊一下關於 DOM 這件事情。不知道大家對於 Google Chrome DevTools 熟不熟悉,我們除了用他來看人家原始碼以外,也會使用他來觀察畫面的效能。 推薦大家可以追一下 Paul Irish 的推特。 關於效能問題 Advanced performance tooling in Chrome DevTools - Paul Irish @ Velocity 2014 Chrome Perf Tooling How to Use

  • Hina Chen
    Hina Chen
3 min read
VueJS

[IT 鐵人賽] 大型資料載入實例與狀況 Event Binding Day 25

今天跟大家聊一下關於大型資料的一些例子。先說在最前面的,這種案例其實不多,屬於 八奇 系列。 一般來說,我們在 API 能拿到的 JSON 你覺得該有多大? 大量資料的渲染問題 實際上我拿過最大的 JSON 大概是 20MB,這是什麼概念呢?想像一下你需要在前端一口氣渲染超過 2000 個 DOM 元件,在這種情況下,如果你的前端裝置效能不好的話,那麼你可能就會卡在畫面上等了好久才會有東西出現。 對於 JavaScript 來說,單純的使用 for 迴圈,從

  • Hina Chen
    Hina Chen
4 min read
VueJS

[IT 鐵人賽] 動態載入 CSS Style Day 23

其實樣式這件事情,是不是有動態載入好像不是那麼重要。除非你像是 AMP 那樣嚴格規範你的樣式使用範圍,不然通常我們都是全部打一包丟上去。然後就大家都用那一包了,你看看精美的 Bootstrap ,你會因為沒有使用到什麼設定而把他拿掉嗎?通常不會。 或者是你可以做一個客製化的 Bootstrap ,然後拿去偽裝成 bootstrap.min.css ,你這樣試試看後續接手的人會不會叫你出來,然後保證不打死你? 樣式區塊 我們在 Vue 裡面其實有支援 CSS Modules 的作法: Vue.js 與 CSS Modules CSS Modules

  • Hina Chen
    Hina Chen
7 min read
VueJS

[IT 鐵人賽] 動態載入 Vue App Day 22

昨天又再次說到動態載入元件,今天則來聊一下 Vue App 是不是也能做這種事情。我們之前在 第七天 的時候有稍微提了一下。基本上就是 90% 以上的人不會做這種事 ,然後我大概就是那個 10% 會做這種蠢事的人。 我說過了,如果是兩組 App 想要綁定在不同的地方,溝通上會是個問題。根據昨天我尚未釋出的 Webpack 的結構來說,也不是一件不能做到的事情。至於什麼時候會釋出,大概就是等 Day 24 我聊到 Webpack 設定的時候吧( 奸詐 )。 Hybrid 加上多個

  • Hina Chen
    Hina Chen
6 min read
VueJS

[IT 鐵人賽] 動態載入 Components Day 21

我們又回到動態載入系列了,如果覺得我很煩的話可以先行離席沒關係。由於我昨天整理 Dockfile 的時候有點過於厭世,所以今天我這邊一樣會帶入一些昨天的結構,至於說 Dockfile 的話還沒好,如果想要先看結構的,可以先去我的 Github 上面看。 ITHome Ironman 2019 Hybrid App 混合模式的動態載入 其實我比較偷懶,上面的例子我直接掃全部的資料夾,然後將檔案加入樣版中。不過這個將來一定會 壞調 壞掉,所以小朋友不要亂學。 $jsFiles = ['main.js']; foreach (new \DirectoryIterator(ROOT

  • Hina Chen
    Hina Chen
6 min read
VueJS

[IT 鐵人賽] 簡易的後端輸出與 Hybrid 模式 Day 20

昨天提到了後端與前端的混和( Hybrid )模式,我們今天就會提出比較完整的例子,來說明一下我自己目前比較喜歡的方式。由於 Phalcon 實在有點冷門,所以我今天會用一個更冷門的 Slim PHP Framework 來介紹( 你是故意的嗎 )。 對了,今天也會有 Docker 會分享給各位,方便大家不用處理環境問題。 後端的設計 我們昨天有提到後端的作法,今天我們來實作一些關於後端的操作方式。首先,我們需要準備一些需要的工具: PHP 7.3 with PHP-FPM Nginx Slim PHP Framework

  • Hina Chen
    Hina Chen
5 min read
VueJS

[IT 鐵人賽] 後端的 Template Layout Day 19

我們昨天看完了 SSR 的部分,有沒有覺得 我好興奮!我好興奮啊!(並沒有好嗎)。聊了那麼多前端的事情,我們今天來聊一下關於後端的部分。我之所以沒有採用 SSR,最主要還是因為我不太會寫 JavaScript,所以我還是繼續使用 PHP 比較妥當(欸)。 接下來的後端我大概都會用 PHP 當例子,當然你要換成其他的也可以。但是,如果你要用 NodeJS 的話,那你還是回去 SSR 好了(慢走不送)。 index.xxx 樣版 現在我們知道

  • Hina Chen
    Hina Chen
8 min read
VueJS

[IT 鐵人賽] 為何我不用 SSR? Day 18

昨天提到了關於 SEO 的狀況,那麼,我們是不是使用 SSR 就能解決那些問題?關於這件事情我還是持保留態度。我們今天會帶大家來看一下 Vue 的 SSR 是怎麼運作的。 至於為何我沒有採用,沒有為什麼,因為我不會用啊(啊哈哈哈哈) SSR 要如何開始? SSR 的全名為 Server Side Render,顧名思義,就是先在伺服器端渲染的意思。那麼,跟原本使用 JavaScript 前端渲染,到底為何又要牽扯到後端?最主要的目的還是為了解決 SEO

  • Hina Chen
    Hina Chen
19 min read
VueJS

[IT 鐵人賽] SEO 的問題 Day 17

現在的 JavaScript 框架面對搜尋引擎,普遍的問題大概都會圍繞著 SEO 打轉,這是以往在伺服器渲染的前端頁面下所沒有的。然後,對於這樣的狀況,多數也是有相對應的解決方案,只是是否合乎你的使用情境,就見仁見智了。 我們今天會提到一些關於 SEO 與其工具的介紹,就讓我們繼續看下去。 前端渲染 不僅僅是 Vue 這個框架,另外兩家若僅僅只是前端渲染的話,多少會遇到 SEO 的問題。而撇除掉網頁的內容( content ),我們還要處理關於 <meta> 的事情,中文說法有很多:元資料、

  • Hina Chen
    Hina Chen
7 min read