Vanilla JS 史上最輕量級的 Framework

這個名詞在 2015年就已經出現,當時對這些 Framework 沒什麼興趣(差不多就是將 jQuery 轉換成 Pure JavaScript (原生JS) 的時間點),就沒有繼續深入了。

今天看到 Vanilla JS 是世界上最輕量級的框架(沒有之一),就稍微看了一下,才發現驚為天人,除了輕量外,速度也跟原生的 JS 一樣快,這到底是什麼 Framework 呢?

閱讀全文〈Vanilla JS 史上最輕量級的 Framework〉

XSS Cheatsheet - 2021

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

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

閱讀全文〈XSS Cheatsheet - 2021〉

JavaScript 唯讀的欄位 要怎麼傳值

HTML 的 Select、Input 可以設定資料不可修改(唯讀),屬性值如下:

  • Select:disabled
  • Input:readonly

但是會遇到 form 要傳送資料時,Input 能收到資料,但是 Select 收不到資料的問題,要怎麼解決呢?

閱讀全文〈JavaScript 唯讀的欄位 要怎麼傳值〉

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

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

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

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

使用 flat 來將 JavaScript Array 快速攤平

JavaScript 的 Array 裡面有很多層級(多維陣列),想要全部都攤平成一個一維陣列(flatten),可以怎麼做呢?

  • 註:此篇使用到的 flat(),IE 不支援。

閱讀全文〈使用 flat 來將 JavaScript Array 快速攤平〉

使用 Brython 來操作網頁的 DOM

一般都使用 JavaScript 來操作網頁的 DOM,不過喜歡寫 Python 的人,總會想要 Python Everywhere。

只要載入 brython.js,就可以在網頁使用 <script type="text/python"> 來操作 DOM 囉~

閱讀全文〈使用 Brython 來操作網頁的 DOM〉

PHP 如何為 json_encode 移除 Array Index

PHP 與 JavaScript 串接經常回傳 JSON 格式,但是會遇到 PHP 的 Array 預設 Index (Assoc array key reference index) 都會有 1、2、3 ...,要怎麼移除這 Index 在傳給 JavaScript 呢?

閱讀全文〈PHP 如何為 json_encode 移除 Array Index〉

Googlebot 將使用新版 Chromium 引擎來執行 JavaScript

Googlebot 以前都使用 Chrome 41.0 的引擎來 Rendering (解析) JavaScript,預計要更新成 Chromium 最新的版本 (74.0+)。

由 access.log 可以看到下述:

"Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"

不過,雖然宣佈了,目前暫時還沒看到新版的 Bot 來的跡象~

閱讀全文〈Googlebot 將使用新版 Chromium 引擎來執行 JavaScript〉