標籤: library

Vanilla JS 史上最輕量級的 Framework

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

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

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

好站：Iconoir 免費 SVG Icon Library

網頁製作常常會使用到很多 小Icon，這邊有上千個免費的 Icon 可以使用，而且都是 SVG (Open Source)，想要怎麼放大縮小，或者直接寫入 HTML 皆可。

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

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

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

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

Python PIP 使用 requirements.txt 管理套件相依性

Python 常常會使用 PIP / PIP3 安裝很多套件(Library)，但是要移植到其它機器或者要做環境 freeze (避免升級造成程式問題)，很常見的作法就是使用 requirements.txt 來限定套件與版本 。

  • 註：requirements.txt 只是習慣的檔名

閱讀全文〈Python PIP 使用 requirements.txt 管理套件相依性〉

JavaScript 各種檢查的函式庫：is.js

JavaScript 要做各種檢查，例如：Email、URL、信用卡、日期 ... 非常多，每次都是自己寫個 regex 檢查，這邊有個 Open Source 的套件(函式庫)，有整理各種情況所需要的檢查與判斷。

is.js 使用很簡單，範例也都很清楚，這邊隨意列幾種可以參考看看：

Facebook 定義新的時間單位 Flicks

Facebook 針對電影、音樂等頻率，定義新的時間單位 - Flicks。

Flick (frame-tick) 主要是要解決 24hz、60hz、90hz ..(如下述) 都可以使用整數的 Flicks 表示。

  • single frame duration for 24 Hz, 25 Hz, 30 Hz, 48 Hz, 50 Hz, 60 Hz, 90 Hz, 100 Hz, 120 Hz, and also 1/1000 divisions of each
  • single sample duration for 8 kHz, 16 kHz, 22.05 kHz, 24 kHz, 32 kHz, 44.1 kHz, 48 kHz, 88.2 kHz, 96 kHz, and 192kHz
  • NTSC frame durations for 24 * (1000/1001) Hz, 30 * (1000/1001) Hz, 60 * (1000/1001) Hz, and 120 * (1000/1001) Hz

閱讀全文〈Facebook 定義新的時間單位 Flicks〉

FB Graph 登入 API Error 需要確認 redirect_uri 的問題修復 (v2.10)

Facebook 的 API v2.4 於 2017/10/9 就不支援了，需要升級上去，要升級就乾脆升級到最新的 v2.10，但是卻遇到下述錯誤：(使用 PHP SDK：php-graph-sdk)

Graph returned an error: Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request,

註：於測試環境都正常，但是上線後卻都無法登入成功

閱讀全文〈FB Graph 登入 API Error 需要確認 redirect_uri 的問題修復 (v2.10)〉

PHP Markdown Parser 函式庫

將 Markdown 語法 轉譯成 HTML 的 PHP Library

詳細可見：

用法範例

<?php
include('Parsedown.php');

$Parsedown = new Parsedown();

echo $Parsedown->text('Hello _Parsedown_!'); # prints: <p>Hello <em>Parsedown</em>!</p>
?>

教學文件、影片

Google 新版 Captcha 系統 - NoCAPTCHA reCAPTCHA

Google 買了 reCatpcha 後, 就大量將 Captcha 用在各種地方來避免 Spam 干擾, 但是 reCaptcha 有些圖和文字實在都難到只有機器人看得懂, 不過以省事來說, 只好犧牲點使用者體驗, 換取工程師的時間.

前陣子有看到 Google 服務出現 "我不是機器人" 可以勾選的 reCAPTCHA, 只要勾選 "我不是機器人", 就不需要輸入驗證碼了~ 於是在找都沒找到哪邊可以公開呼叫使用, 現在總算發佈囉~

介紹

使用範例

閱讀全文〈Google 新版 Captcha 系統 - NoCAPTCHA reCAPTCHA〉