XSS Cheatsheet - 2021

以前有整理過各種 XSS 和安全性的文章,詳可見:

XSS 的防範要做完太難了,來看看 2021 又有哪些新要注意的地方~

閱讀全文〈XSS Cheatsheet - 2021〉

前端 Tooltip 一步一步教學的工具套件

網頁、App 常常都會有頁面介紹,會將頁面區塊框一個框框,然後旁邊秀出說明或者教學。

這些通常會在 HTML 元素旁邊,使用 tooltip 的方式秀出來,這次介紹的套件,就是秀出來外,加上循環順序的設定,就可以做出一步一步的教學等效果。

閱讀全文〈前端 Tooltip 一步一步教學的工具套件〉

好站:CSS Grid Layout 產生器

網頁的 CSS 部份,通常最麻煩的就是 Grid 的架構部份,以前常常會需要靠 float,現在 CSS 有很多新的語法可以用,主要是靠 display 的屬性來達成。

此網站提供 CSS Grid 的界面產生器,可以在頁面上點選,最後就可以生成需要 Grid 格式的 CSS、HTML 語法。

簡易的 jQuery CSS Selector 替代寫法

在 DK 的 Blog  看到此技巧:簡易的 jQuery CSS Selector 替代品

jQuery 的寫法 $(...) 簡短也好記,JavaScript 原生想要用類似的寫法,只需要一行即可達成。

const $ = document.querySelector.bind(document);

註:上述方式並非 fluent interface,無法像 jQuery 持續串接下去

範例

const $ = document.querySelector.bind(document);
$('ul').style.color = "red";

取自

將圖片轉換成 CSS 的線上服務

這個服務做的很有趣,拖拉任何圖片上去,都可以幫你轉換成 CSS Code,然後直接將此圖片畫在頁面上。

  • 詳見:img2css - This is a tool that can convert any image into a pure css image

註:測試建議丟小張點的圖片,此服務看來是依照每個 px 的色碼分析後,全部照著寫出來,圖片太大張的話,產生出來的文字會很驚人。