flex-shrink 的壓縮計算

flex-shrink 是當設定 flex 的情況之下,子元素的總寬度大於父元素的寬度時,就會依比例的減去子元素的寬度空間。

XD Plugin - Selection 與 Scenegraph 運用

XD 中提供了一些可以調用的 API,可以透握 require() 引入模塊來使用。

XD Plugin 入門 - 建立與 UI 介面篇

上禮拜公司的設計師和我說,他想要有一個可以拖曳 icon 的 XD 插件,然後說 XD 文件上說只要會 HTML, CSS 和 JS 就可以做了,最後烙下一句狠話:『這個你不會做的話,那還說你是前端工程師?』聽到這句話,燃起我的熊熊鬥志,趁著清明連假、防疫之餘,就找個時間研究一下~

HTML img 也能有 bg-image 的 cover 效果

一說到讓不同寬高的圖片都可以填充在一區塊裡,大多數人應該都是先想到使用 background-image + background-size: cover。

TypeScript - Classes

本篇的主旨:

  • Class 的運用
  • Class + Interface 的運用

TypeScript - Interfaces

Interfaces + Classes = TS 提高程式碼複用性。
這一篇主要是介紹與了解 Interfaces 的作用,並會在下一篇文章介紹 Classes 與兩者併用的技巧與好處。

TypeScript - 資料型別 和 Type Annotations

你是否有打開過某一個專案,發現裡面的變數名稱是 a, b, c 等,完全無法透過變數直接了解其作用?此時若是使用 TypeScript,就可以透過型別的註釋,加速了解正在傳遞的數據類型,進而提高程式碼的可讀性。

快速入門 - TypeScript 的 What? Why? How?

What is TypeScript?

1
TypeScript = JavaScript + A type System

HTML img 下方有不明空隙?!

之前在回覆問題時,不少人都會發現這個有點奇怪的現象 - 圖片下方有一個莫名的間距
這一篇就來說明一下原理以及解決方法吧!

用範例理解 JS Promise

Promise 的好用之處在於,可以確保事件完成後再執行後面的行為,也解決了傳統 callback 波動拳的問題。它用 resolve, reject 來傳遞函式執行後為成功或是失敗的訊息,再用 then 與 catch 來做對應處理。這一篇就用範例快速了解一下 Promise 怎麼用吧!

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×