小麥前端 blog

一個心理人跑來學前端的記錄

0%

前言

前幾天因為六角學院舉辦了徵文比賽,為了有個文章的網址可以投稿,我重新開啟了這個佈滿灰塵的 hexo 部落格。不過,因為重啟過程中,遇到了一些障礙,而且 hexo 好像已經有 hexo 5 版本了,我想說那就花點時間來升級吧。本文簡單記錄一下我為了升級處理的東西。

主要參考資料是 Ray 的 試著學 Hexo :: 第 12 屆 iT 邦幫忙鐵人賽 系列。

閱讀全文 »

前言

最近為了徵文活動,想重新啟用 hexo 部落格。結果發現使用 hexo deploy 指令時出錯了 orz。

原因

使用錯誤訊息關鍵字找了一下,好像是 hexo-cli 2.0.0 不支援 node14+ 的樣子。悲劇。

文章提供了兩個解決方案

  1. 降低 node 版本
  2. 升級到 hexo@4.2.1+

因為我的新筆電有安裝 nvm,切換 node 環境很方便,我就採用方案一,將 node 版本切換到穩定板 node 12 了。

1
nvm use 12.18.3

小結

覺得自己除錯的功力有一點進步了呢。想當初第一次用 hexo 時,完全看不懂該怎麼用,現在竟然一個指令就能解決錯誤訊息了,真是令人感慨呢(?)。

參考資料

前端面試準備 2021

前言

我目前已經以前端工程師的身份工作一年了,但我其實還沒面試過。在目前的案子結束後,預計想找個在公司上班的正職工作。以下是我規劃的前端面試準備。

一、前端生涯規劃

在深入面試細節之前,我會希望先站在高處鳥瞰全局。因此,每個面試行動,應該會是整個生涯規劃的一部分。

我自己有針對此開了一個 notion 文件,從學習面、求職面、成長面、職涯面做整理,讓自己的每一步都盡量被記錄下來。

另外也可以參考六角的這篇文章:邁向前端工程師 / 設計師之路 | 六角學院

閱讀全文 »

前言

因為剛好六角有徵文活動,想說順便整理一下這陣子以來接案的開發流程與心得。

目前參與過的專案

我從 2019 年的 10 月左右開始接案,到目前為止經手過三個案子。第一個案子是幫國外公司建立形象官網(從頭到尾參與)、第二個案子是幫一個國內公司後台畫面切板(只參與前半部)、第三個案子則是進行到一半的案子,在既有架構上幫忙增加新頁面或功能(從中間開始參與)。

閱讀全文 »

前面幾週提到,當初開發專案時,用碰到視差滾動、或是滾動到某一元素時,就啟動某一個動畫效果。這邊整理一下如何偵測滾動、或是如何偵測元素是否進到畫面。

目前我知道有兩種方式:scroll 事件與 Intersection Observer 這個 Web API。

閱讀全文 »

在先前專案開發時,遇到一個需求是,想在 banner 地方放上一個滿版的重複自動播放影片,播放時不要有聲音。因為之前沒什麼在網頁中放影片的經驗,就研究了一下。

如何達成放上影片的需求

以下是在參考一些文章後整理出的方法

  1. <video> tag 引入影片,就像是使用 <img> 引入圖片一樣
  2. <video> 添加 autoplay, muted, loop 等屬性,達到自動播放、靜音、循環播放效果
  3. 用 CSS 設定將影片滿版
1
2
3
4
5
6
7
8
9
10
11
12
13
<video autoplay muted loop id="myVideo">
<source src="rain.mp4" type="video/mp4">
</video>

<style>
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
</style>

潛在需求

當時查完資料後,沒有多久完成了符合需求的程式碼。但現在想想,覺得影片播放可能還有一些潛在需求。簡單記錄一下

  1. 流量問題。這次專案影片大小沒很大,所以直接跟網頁檔案放在一起。但感覺放在 Youtbube、vimeo、或專用伺服器可能會更好?
  2. 不同版型的影片。專案時有將影片分成桌機版和手機版影片,我是先在網頁擺兩個 <video> 分別引入桌機版和手機版影片,當使用者使用桌機時則顯示桌機版的影片,使用手機時則顯示手機版影片。不過我不確定這是不是最佳解就是了。
  3. 影片的格式。後來把網頁丟去測速時,被建議說換成 webm 格式會更好。這點可能也是要注意的地方。

參考資料

套件

視差滾動示意圖

在專案開始前,覺得有可能會碰到視差滾動的需求,就先複習了一下。後來雖然有用到一下,但因為需求變更,後來在專案中就把視差滾動效果拿掉了。這邊記錄一下視差滾動的東西。

視差滾動是什麼、它的用處?

視差滾動就是,讓平面的疊加影像,產生出有層次的移動速率不同的感覺。以現實生活的情境為例,當我們坐在火車上看窗外時,會覺得遠方的景物移動的較慢,近方的景物移動的較快。

視差滾動有什麼好處呢?許多的網頁資訊,都是像貼紙一樣直接擺在畫面上。採用視差滾動效果後,除了會讓人有新鮮的感覺,有時也能突顯出背景與前景的差異。

在網頁實現視差滾動

前述提到,視差滾動原理其實就是讓背景和前景的移動速度不同。當時做研究時,大概整理出兩種用原生 CSS、JavaScript 做視差滾動的方式:

一、純 CSS 方案

要簡單快速的實現視差滾動效果,可以用這個純 CSS 方案嚐鮮。

在 CSS 中,有一個屬性是 background-attachment,這屬性用來設定,背景圖片的是要固定在 viewport (視圖,瀏覽器視窗畫面)上,還是背景圖片的 containing block (父層容器)上。

當裝著背景圖的容器元素添加了 background-attachment: fixed; 設定後,背景圖會被固定在 viewport 上。也就是說,當使用者滾動網頁時,背景的移動速度會是零,前景(網頁內容)的移動速度是一般的滾動速度,因此達到視差滾動的效果。

二、混合 JavaScript 方案

雖然前面提到的 CSS 方案可以實現簡單視差滾動效果,但當畫面由多個背景圖疊加,想產生多層次感的視差滾動時,純 CSS 方案就不夠用了。例如,有一個畫面由高山、矮山、人物組成。網頁設計師希望讓使用者滾動網頁時,看到遠景的高山移動很慢、中景的矮山移動稍快,近景的人物移動較快。

而原生 JavaScript 實現視差滾動的觀念是

  1. 抓取需要在視差滾動時移動的圖片元素、並得知目前它們在網頁上 Y 軸方向的座標
  2. 監測到使用者讓網頁滾動時,執行一些事情
  • 遠景圖片讓他移動距離增加少一點
  • 中景圖片移動距離普通
  • 近景圖片移動距離多一點

抓取元素在網頁上的座標有一些 JavaScript API 可以用

  1. getBoundingClientRectgetClientRects 系列
  2. offsetTopscrollTopclientTop 系列做運算

當圖片位置進入到瀏覽器視窗畫面中時,有這些 JavaScript API 能讓圖片開始移動。不過我只試過第一種,第二種還沒試過。第一種寫法雖比較簡單,但會消耗性能,因為每次使用者滾動時都會觸發這個函式。

  1. onScroll
  2. IntersectionObserver

其他好像還有不少種方式,但先前我研究比較通用的方式就是這兩種了。

相關資料

在接專案時遇到了不少動畫的需求,其中一個比較抽象,是關於文字出現時的動畫效果。我用兩種方式比喻。(一)就像是打字時文字慢慢出現,但不是突然地,而是平滑地由左往右浮現(二)就像是拿橡皮擦由右往左擦時文字消失,然後把這段影像往回播放的樣子

閱讀全文 »

先前專案在開發移動版時,本來是用推移的方式展開 navbar 選單,後來客戶希望用覆蓋全畫面的方式來打開選單。

本來想說要不要用 Bootstrap 提供的現有工具解決。移動版 navbar 點擊後跳出的覆蓋視窗,其實概念類似於 BS 提供的 modal,即強制彈出一個新畫面,脫離原先瀏覽網頁內容的情境。

最後我還是想嘗試用 CSS 土法煉鋼的方式,將 pop window 展開到全畫面以達成需求。

結果出現了一個問題:pop window 覆蓋全畫面時,右邊滾軸竟然還在,而且可以被滾動

閱讀全文 »