Carrie's Blog

Appearance

On this page

Sep. 2022 ​

15 th ​

套件 ​

函式庫 ​

  • Lodash

    提供模組化、擁有優秀效能的函式庫。 適用於遍歷 array、object 和 string，對值進行操作和檢測或創建符合功能的函数。

手刻簡易版幻燈片 ​

  • 將圖片使用 flex 排成一橫排，容器只留下一張圖片的大小，利用 overflow: hidden; 隱藏其他非當前圖片，再利用 transform 去移動 x 位置切換當前顯示圖片（transition 可加上過度動畫）
  • 容器 padding-top 的百分比是參照容器的 width

    利用 padding-top 按照長寬比撐出圖片的大小並設為 relative，再放入 div 設為 absolute 去撐滿父容器的空間以放置圖片。

  • setInterval 要記得在 onBeforeUnmount 清除

    若沒有在元件移除前將 setInterval 清除的話，當元件移除後 setInterval 仍會繼續運作，而找不到元件時便會產生錯誤。

adadad

範例圖片來源：https://www.sanriogiftgate.com.tw/

16 th ​

Vitepress ​

現代 SSG (Static Site Generation) 框架。
基於 Vite、Vue3 的靜態網站產生器。

配置 ​

  • App Configs

    配置網站的基本功能，例如：設置網站的標題、客製化 markdown 解析器的工作方式。

  • Theme Configs

    配置網站的主題，例如：添加側邊欄、添加「在 GitHub 上編輯此頁面」的連結等功能。

17 th ​

套件 ​

  • day.js

    用來解析、驗證、操作和顯示現代瀏覽器的日期和時間，具有很大程度上與 Moment.js 兼容的 API。

資源 ​

19 th ​

問題 ​

  • Vitepress 在 Build 時出現錯誤

    使用到 setInterval 時要用 if(typeof window !== "undefiend") 或 onMounted。

    ⋯ Reference

  • 幻燈片在 Firefox 上面會使 Flex 的效果會將所有幻燈片圖片壓縮在容器內

    將所有圖片加上 flex-shrink: 0; 強制讓它不要被壓縮。

20 th ​

前端框架 ​

  • solid.js
    1. 直接使用瀏覽器的 DOM，没有虛擬 DOM。
    2. 提前編譯，依需求打包（Solid 須預編譯，將 jsx 部分程式碼轉換成原生語法）。
    3. 響應式原理，精準更新對應的值。

    ⋯ Reference
    ⋯ Reference

GUI 框架 ​

  • Tauri

    Tauri 的後端核心使用 Rust 構建。
    使用 Node.js 上的 CLI 使 Tauri 成為一種真正的多語言方法來創建和維護出色的應用程序。
    可以創建體積更小、運行更快、更加安全的跨平台桌面應用 。

  • Electron

    使用 JavaScript、HTML 和 CSS 構建桌面應用程式的框架。
    嵌入 Chromium 和 Node.js 到 Electron 允許維護 JavaScript 程式庫。
    可創建在 Windows、macOS 和 Linux 上運行的跨平台應用程式（不需要本地開發經驗）。

22 nd ​

CSS ​

  • rem 不會隨著視窗大小有所變化，% 才會
  • 寬高可以使用 calc(100% - ?rem) 去做計算
  • 寬高有剩餘的空間時 margin: auto; 就會有作用

    高度需要是 position: absolute; 的情況下才有效。

工具 ​

  • Lerna

    JS package 管理工具、使用 monorepo 的概念。
    針對使用 git 和 npm 管理多軟體包程式碼倉庫的工作流程進行優化。

    1. 自動解決 packages 之間的依賴關係
    2. 透過 git 檢測文件更動、自動發布
    3. 根據 git commit 紀錄，自動生成 CHANGELOG

23 rd ​

工具 ​

  • Amplication

    助於開發高品質的 Node.js applications，不需花費時間在重複的 coding tasks。
    定義數據模型、角色和權限，Amplication 將生成一個 TypeScript Node.js applications。

資源 ​

26 th ​

函式庫 ​

CSS ​

  • CSS Media

    max-width：表示這個數字以下（包含）的都適用。(<=)
    min-width：表示這個數字以上（包含）的都適用。(>=)

29 th ​

CSS ​

  • absolute 垂直水平置中
    CSS
    .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

    translate(-50%, -50%)：讓物件的 X、Y 軸移動 -50%（物件本身的寬度是 100%）。
    大概意思是將物件的對齊點改到物件的正中間。

30 th ​

框架 ​

  • Quasar Framework

    建構高性能 VueJS 用戶界面：responsive Single Page Apps, SSR Apps, PWAs, Browser extensions, Hybrid Mobile Apps and Electron Apps.

    PWA (Progressive Web App)

    將你做好的網頁直接安裝在手機上，能夠離線瀏覽、離線發文、推送手機通知。

    工具 ​

    • shields

      用於製作徽章（小圖示），一般配有相關文字進行輔助說明。
      常出現於 github 專案主頁，凡是能夠表現圖片的地方都可以出現徽章。
      本質上是一種 svg 格式的向量圖示。

      • 範例：