[譯] 學習 CSS clip-path 屬性

整體來說網頁主要是由矩形所構成的,另一方面印刷品則具備相對多樣性。造成這樣差異的原因有很多,不過其中一個即是缺少合適的工具。
這篇文章主要會介紹 clip-path 這個 css 的樣式規則可以讓我們遮掉元素的局部,就是不顯示出來。達成這項功能背後的原理就是我們可以透過它去定義可視區,類似於遮色片的概念。我們將從基礎開始然後涵蓋語法,進一步理解進階的概念。

繼續閱讀

Vue 實作簡易驗證機制 App

為了顯示出 Vue.js 強大的能力 ,本文將會逐步指導建置一個簡單的前端應用程式。搭配 Node 所建置的後端程式範例。前後端兩個程式是完全分離的,後端使用 RESTful API 的方式負責取得資料與驗證。本文旨在說明如何替 Vue.js 程式加上驗證機制,過程中我們會使用 vue-router, vue-resource 實作 LoginSignup 元件展示如何檢索和儲存使用者的 jwt token,最後執行驗證機制取得那些需要授權的資料。

繼續閱讀

[譯] 美化無法載入的圖片 <img>

當網頁中無法載入圖片(通常是圖片連結失效或錯誤)時,瀏覽器預設會幫我們顯示一個小小的圖示告知我們連結失效了。

這些預設圖片每一個瀏覽器都不太一樣,通常也不太好看。這篇文章主要介紹的內容就是我們可以透過 css 來美化這個預設行為。

繼續閱讀

Node 實作 jwt 驗證 API

基於 token 的驗證機制

在今天,我們應該常常能看到大量使用 token 來處理驗證的服務,由於大部分的網站服務開始大量使用 API,於是 token 就成了處理驗證使用者最好的方式。
我們的應用程式選擇使用 token 驗證機制有些非常重要的原因,最主要是因為:

  • 對於伺服器來說它具備 stateless(無狀態), scalable(擴展性)
  • 移動裝置也能一併使用
  • 可將驗證結果導向其他應用程式
  • 更安全
繼續閱讀

[譯] scroll-behavior 滑順的捲動效果

眾所皆知 HTML 錨點(anchor link)透過給定標籤 id 屬性跳到頁面上特定位置的功能。不過這個效果感覺上就像是閃一下就切換到該位置。
為了使用體驗上的感覺有時候網站會設計一種平滑捲動到該位置的效果。

在過去這樣的效果通常會透過 jQuery 來達成,但有時候一些簡單的頁面為了達成這個功能就需要載入一堆函式庫或框架這未免有點矯枉過正。
最新的 Javascript 提供了一個更有效率,加強原生 window.scrollTo 的方式。

繼續閱讀

requestAnimationFrame 筆記

在 Javascript 我們曾經只有一種方式來處理跟特定時間有關的循環事件: setInterval()。簡單說就是當你需要重複某些任務時(依據時間)。
您就會用到這個方法。對於動畫來說需要每秒 60 個 frames 人類才會覺得是順暢平滑的,因此我們可能會寫出像下面這樣的程式碼

繼續閱讀

CSS Grid 介紹

當我們要建置複雜的網站時 Grids 是非常重要的。其重要性我們可以從大量的 CSS 框架中窺知ㄧ二,因為幾乎所有的框架都有提供網格(Grids)系統來加速開發。
隨著 CSS Grid 規範的出現,將來我們將不需要額外的樣式就可以使用網格。另外的好處就是我們將不需要再依賴 inlinefloat 來完成那些佈局需求
在這篇文章我們將要介紹一些網格基本的用法,然後透過實作一個基本的部落格佈局來理解其用法。

繼續閱讀

[譯] Houdini: 你還沒聽說!這可能是 CSS 開發中最令人興奮的事!

其實…我想說這可能是最令我感到興奮..但又害怕頭痛的功能… - 原文連結

你曾經想要使用某個 CSS 的新功能,但是最後卻因為這個功能瀏覽器還未全面支援而放棄了嗎?甚至更糟糕的狀況,瀏覽器已經支援了但卻充滿問題。我敢打賭這些情況你肯定遇過了。如果上面這種情形你曾經遇過,那麼你是應該關心一下 Houdini

繼續閱讀

Cache 筆記

  • 瀏覽器 cache 是一種機制,透過特定狀態告知瀏覽器不需要重新下載檔案
  • cache 最早使用 Expires 和 Pragma,現今主要使用 Cache-Control 來控制
  • cache 大略流程,在實際下載檔案之前發生:
    1. cache 的實際處理機制存在瀏覽器中,也就是我們需要透過指令(cache-directives)告訴瀏覽器該怎麼處理
    2. 瀏覽器設定為不提供 cache ,完全忽略下面步驟直接請求資源
    3. 瀏覽器發送請求,此時可包含 cache-request-directive 這部分的資訊主要是拿來和 server 協商比對用的
    4. 伺服器判斷是否有更新並回傳通知 cache-response-directive
繼續閱讀