前端面試準備 2021

前言

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

一、前端生涯規劃

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

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

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

前言

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

目前參與過的專案

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

J 個是 Big Three，不是 Big Five

最近幫忙做了一份簡版的心理測驗，想說來做個介紹

先發布出來佔個坑，之後慢慢補上文章內容

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

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

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

如何達成放上影片的需求

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

1. 用 <video> tag 引入影片，就像是使用 <img> 引入圖片一樣
2. 在 <video> 添加 autoplay, muted, loop 等屬性，達到自動播放、靜音、循環播放效果
3. 用 CSS 設定將影片滿版

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

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

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

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

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

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

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

• 互動視窗 (Modal)・Bootstrap 4 繁體中文手冊 [六角學院譯]

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

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

類似效果的示意圖

前言

在專案開發期間，有要求網站的上方要有 navbar。不過需求有更改過幾次：一開始是會隨著瀏覽器捲動而消失，後來要求下滾時消失上滾時出現，最後則改成 navbar 在頂端時背景透明、下滾後背景白色。

除了置頂、偵測滾動外，在這個需求也遇上了跨平台問題（通常都是跟 Safari 相關 QQ）。偵測滾動之後的再獨立一篇出來，這邊先談 navbar 置頂與跨平台的問題。

前言

在 2019 年接案時，曾接到一個需求是，當網頁處在往下滾動狀態時，header是隱藏起來的；而在網頁往上滾動、或網頁已經在最頂端時，header 才會顯示出來。之所以想完成這個效果，可能是想節省空間。因為 header 是讓使用者跳轉到其他頁面的導覽列，而當使用者做出向下滾動網頁的動作時，代表他們需要的是瀏覽後續的網頁。如果在往下滾動時隱藏 header，就能留給使用者更多的螢幕空間去看內容，體驗會更好。

以下是我當時的解法：headroom.js