f2etw / f2e-notes Goto Github PK

http://regexper.com/

regex railroad diagrams 視覺化服務

可生成 permalink 方便討論

railroad diagrams 細節可參看：
http://regexper.com/documentation.html

visualization

http://meyerweb.com/eric/tools/dencoder/

Input a string of text and encode or decode it as you like.
Handy for turning encoded JavaScript URLs from complete gibberish into readable gibberish.
If you'd like to have the URL Decoder/Encoder for offline use, just view source and save to your hard drive.

URL Decoder/Encoder

處理 URL encode
可存檔離線使用

http://flukeout.github.io/

CSS Diner - Where we feast on CSS Selectors!

暸解自己對 CSS Selector 熟悉程度的經典小遊戲，
每一關要使用正確 CSS Selector 把關卡指定的內容物挑掉。

github: https://github.com/flukeout/restaurant

http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/

Asynchronous and deferred JavaScript execution explained

比較 <script> tag 載入方式對頁面 render block 的狀況

• raw <script> tag
• defer + <script> tag
• async + <script> tag

一圖千言

img source: http://peter.sh/wp-content/uploads/2010/09/execution2.jpg

http://james.padolsey.com/jquery/

jQuery source code viewer

可看 jquery source code 如何實作
各 function 可點擊追縱上流

作者的介紹文章： Under jQuery’s bonnet
http://james.padolsey.com/javascript/under-jquerys-bonnet/

http://jsperf.com/

jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks

JS 效能實測
可看到很多效能實測案例，藉由網友自行測試的成績評比
也可自行 fork 新版本測試效能
提供圖表看到各瀏覽器實測的效能差異

visualized chart

BrowserStack
https://www.browserstack.com/

Live, Web-Based Browser Testing
Instant access to all desktop and mobile browsers.
Say goodbye to your setup of virtual machines and devices.

線上 VM
localhost 可用

http://placehold.it/

A quick and simple image placeholder service.

假圖/佔位圖服務

options:

• format: .gif, .jpeg, .jpg, .png
• text
• color
• size

https://developers.facebook.com/tools/debug/

Enter the URL you want to scrape to see how the page's markup appears to Facebook. Enter an access token to see details about the token such as when it expires.

可呈現/更新 Facebook 快取

http://html5pattern.com/

HTML5Pattern is a source of regularly used Input-Patterns.

提供常見表單的 regex (Regular expression) 範例
方便驗證表單時直接取用、調整

• names
• passwords
• cards
• postal codes
• dates
• phones
• emails
• colors
• miscs

http://codecombat.com/

Learn programming with a multiplayer live coding strategy game for beginners. Learn Python or JavaScript as you defeat ogres, solve mazes, and level up. Open source HTML5 game!

寫指令玩遊戲！有沒有比這更快樂學習 JavaScript 的方法。
英雄會依照使用者的輸入的程式碼動作，進而破關打寶物。
支援單人跟多人。

有支援中文版，可是有些關卡還是有英文。
目前還有 open source，自己的副本自己寫～

官方介紹：http://codecombat.com/about
github：https://github.com/codecombat/codecombat

https://www.debuggex.com/

Debuggex: Online visual regex tester. JavaScript, Python, and PCRE.

線上 Regular Expression 測試服務

support:

• 視覺化的鐵道圖(railroad)
• text area for regex test
• simple (regex) cheatsheet on footer

screenshot

http://docs.emmet.io/cheat-sheet/

emmet Cheat Sheet

emmet 是強化 HTML、CSS 輸入便利性的一款外掛
支援多種 editor / IDE
官網這頁列出所有的金手指一覽表
可以認識更多更有效率的寫法、輸入方式!

screenshot

http://sizecalc.com/

A tool to calculate and convert between physical size, perceived size, and distance of an object.

視覺認知尺寸計算

screenshot

http://ixdchecklist.com/

Form a better understanding of interaction through using the IxD Checklist by Amit Jakhu and Aaron Legaspi from Myplanet.

interaction design checklist
互動設計線上自我檢測表

提供一連串的提問來確認頁面的互動設計是良好體貼的
問題後面有箭頭者，有另外附例子可輔助理解

include:

• interface
• iconography
• typography
• interaction
• navigation

http://embed.ly/

Bring engaging content to your viewers. Our embeds display whether you're on the web or mobile.

HSL色彩選擇器，比RGB picker更直覺。
http://hslpicker.com

https://developers.google.com/web/

打造優異的網路體驗
「用於打造出色網路應用程式的工具、最佳做法與 Google 服務。」

Google web 最佳實踐指南

主要有數個大章節

1. 開發
2. 交流
3. 營利
4. 打造多裝置網路應用程式
5. 打造優異的網路體驗

文件較多的是第 4. 個
資料量非常多
部份文章已有中文化，質量俱佳~

http://screensiz.es/

We built screensiz.es to help you quickly find the screen specifications of the most popular devices and monitors currently on the market.

The size data comes from Wikipedia, and for a better understanding of Pixel Density, check out this great post by Teehan+Lax.

Our “popularity” guesstimates are derived from annualized monthly Google queries (from AdWords traffic estimator), and some fuzzy math. It’s not scientific, but it’s better than nothing.

提供各機型螢幕 解析度/寬高比 的參考資料列表
包含 mobile phone / desktop monitor / tablet

http://www.colorzilla.com/gradient-editor/

A powerful Photoshop-like CSS gradient editor from ColorZilla.

漸層產生器
便利生成 CSS3 用的 background-image gradient (linear, radial)

browser support 至 IE6 ( fallback with filter & data-url svg )

可切換為 SCSS syntax (需 compass mixin )

http://www.jsnice.org/

statistical renaming, type inference and deobfuscation

JS 自動化命名服務

把 JS source code 貼進去
它會分析 function 做的事來重新命名 function

可協助理解一些被 minified 過的 JS
或是懶得命名時也可以試試好手氣

http://fakeimg.pl/

When designing websites, you may not have the images you need at first. But you already know the sizes and inserting some placeholders can help you better seeing the layout. Don’t waste your time making dummy images for your mockup or wireframe. Fakeimg.pl is a little tool that generates images with an URL. Choose the size, the colors, even the text. It’s free and open-source.

github: https://github.com/Rydgel/Fake-images-please

假圖服務

options:

• size
• color
• font
• text
• retina

http://csstriggers.com/

A GAME OF LAYOUT, PAINT, AND COMPOSITE.

修改 CSS 屬性會造成瀏覽器做些什麼動作的對照表（Layout, Paint, Composite）
至於，每個動作會照成的效能上問題可以參考 Udacity 免費效能課程：
https://www.udacity.com/course/browser-rendering-optimization--ud860

Adam 在 2015 的 Modern Web 也有精彩介紹：
http://www.slideshare.net/adamp3wang/pinkoi

http://cubic-bezier.com/

介紹文章：
A better tool for cubic-bezier() easing
http://lea.verou.me/2011/09/a-better-tool-for-cubic-bezier-easing/

Made by Lea Verou
github repo: https://github.com/LeaVerou/cubic-bezier

css 中與時間特性有關的 animation-time-funtion, transition-time-function
都可利用 cubic-bezier 自訂時間曲線

可即時預覽動畫執行狀況
也有提供 permalink

但目前 Chrome devtool 已有內建 cubic-bezier 的即時預覽/自訂功能

https://kraken.io/web-interface

We optimize your images and accelerate your websites.

Kraken is a robust, ultra-fast image optimizer and compressor with best-in-class algorithms.
We'll save you bandwidth and storage space and will dramatically improve your website’s load times.

圖像壓縮線上工具
image optimize, online tool

lossless, lossy, resize, progressive
PNG, jpg, gif, WebP

http://caniuse.com/

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

可以找到大部份的 modern web-tech 瀏覽器支援範圍
(HTML5, CSS3, ECMAScript6)

另外提供一些小精靈在下方：

• Notes: 使用需知
• Known issues: 已知雷區
• Resources: 相關資料

http://devdocs.io/

DevDocs combines multiple API documentations in a fast, organized, and searchable interface. Here's what you should know before you start:

快速查找各語言的 API, Doc

可離線存取，需下載至瀏覽器內

view on offline with indexedDB

http://tympanus.net/codrops/css_reference/

An extensive CSS reference with all the important properties and info to learn CSS from the basics

CSS reference

Codrops 出品，CSS 介紹大全
搭配美美的範例，非常推薦起手式

從基礎到庭院深深各種階段都相當適合

http://type-scale.com/

Type Scale - A Visual Calculator

字級比例預算
用更理學的方式呈現各 header title 字級大小
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>

screenshot

http://www.quirksmode.org/css/selectors/

Here are almost all CSS2 and 3 selectors, and the CSS3 UI selectors (mostly structural pseudo-classes).

CSS selector 支援度列表 for descktop
IE5.5+

另一個 selectors table for mobile browser 的列表頁：
http://www.quirksmode.org/css/selectors/mobile.html
IE9+, Android2+

Here are almost all CSS2 and 3 selectors, and the CSS3 UI selectors (mostly structural pseudo-classes).

其它列表可參見
有另外很多種 CSS property support table-list

http://www.quirksmode.org/css/
This is the index page of all my CSS tests.

http://keycod.es/

Press a key, get a keyCode!

github: https://github.com/ilikescience/keyCodes

keycode 查找，
可找到鍵盤各鍵位對應的 JS keycode

Javascript Char Codes

http://goatslacker.github.io/fixmyjs.com/

自動修復JavaScript

http://osteele.com/tools/rework/
線上 Regular Expression 測試服務（支援JavaScript、PHP、Python、Ruby）

http://www.gridlover.net/app/

The tool to establish a typographic system with modular scale and vertical rhythm.

The default css output is for <body>, <p> and <h1> - <h4> headings, but you can of course apply your adjusted values to any element by editing the css later.

vertical rhythm tool
typography

輔助生成勻稱的垂直間距

http://www.gridlover.net/

screenshot

http://fontello.com/

Fontello - icon font scissors
Fontello is a tool to quickly pack vector images into webfonts. Consider it like Twitter Bootstrap, but for images. It builds everything necessary to include graphics into your web pages. Also, fontello has a big built-in collection of open source artworks.

form: https://github.com/fontello/fontello/wiki/Introduction

線上 icon font 產生器

• open source, Github: https://github.com/fontello/fontello
• custom font: import svg image
• free

https://javascriptobfuscator.com/Javascript-Obfuscator.aspx
防君子不防小人...

http://youmightnotneedjquery.com/

you might not need jquery

不使用 jQuery 的原生 JS 替代寫法

可調整支援的 IE 版本
ps: 向下相容愈多，就需要更多的 feature detection

http://character-code.com/

Character-Code.com

HTML Code, Hexadecimal Code and HTML Entity for ASCII characters. This list is ordered in an alphabetical kind of way. Don't strain your face by using the other ascii table reference sites.

字元沒那麼多的列表
但屬於比較安全的範圍
還有幫忙做了一些大分類，找起來會比較順手

有各式各樣的箭頭
http://character-code.com/arrows-html-codes.php

不過沒提供搜尋功能就是

http://unicode-table.com/

Unicode character table

特殊符號檢索表
可搜尋各式奇妙符號

網站需要用到一些開發者相關的標準icon時，可以來這裡翻翻，想得到的幾乎都有。
github: https://github.com/konpa/devicon/

http://crossbrowsertesting.com/

Test your sites on the same browsers and devices your customers use.

線上 VM

localhost 可

http://sassmeister.com/

SASS playground: sass/scss 2 css

可方便測試 SASS 語法

• 可便利切換各版本 sass core
• 有眾多 SASS extensions (ex: compass, susy, bourbon ...etc)
• Github 登入後可將程式碼備份至 gist
• 有簡易的 HTML panel with livereload result

http://sassme.arc90.com/

Visualize SASS color functions in real-time without compiling.
github: https://github.com/arc90/sass-color-picker

依基本的 SASS color function 調整顏色

• lighten
• adjust_hue
• saturate
• darken

完整 SASS color function 請見官網 document
http://sass-lang.com/documentation/Sass/Script/Functions.html#rgb_functions

http://csspre.com/

CSS PRE is a project that aims to collect as much information about the popular CSS Preprocessors as possible, in order to serve as a one-stop reference.

Github: https://github.com/futekov/csspre

這網站整理熱門的 css preprocessor 的語法對照、編譯環境、互轉方案、還有各種線上轉換服務
可快速比較哪套 preprocessor 較為適合
( Less, SASS, Stylus )

blog page

提供同功能的各種寫法
方便學習另一套的語法，也可當作失憶時的救星 XD

compare page

提供各 preprocessor 的功能較列表，
看一看會覺得 preprocessor 好多東西都沒玩過...

compile page

編譯為 CSS 的 client, online 軟體列表，
各 OS 平台、付費與否

用 command-line 就不用煩惱啦~ XDD

convert page

各 css preprocessor 的互轉方式

http://browserhacks.com/

Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs. Press the first letter of a browser to jump to the according section, like F for Firefox.

令人又愛又恨的瀏覽器 hacks 查找
有 CSS & JS

Reminder!
Please keep in mind using a hack is not always the perfect solution. It can be useful to fix some weird browser specific bug, but in most cases you should fix your CSS/JS or use feature detection.

IE 專區
http://browserhacks.com/#ie

http://contrastchecker.com/

This tool is built for designers and developers to test color contrast compliance with the Web Content Accessibility Guidelines (WCAG) as set forth by the World Wide Web Consortium (W3C). These calculations are based on the formulas specified by the W3C.

以 W3C 的色彩對比驗證公式來檢查顏色對比度
輔助驗證頁面上文字配色是否清晰

screenshot

http://fontastic.me/

Add Vector Icons to Your Website
Create your icon fonts in seconds. Make your website faster. Over 9,000 icons available.
New. Now you can publish your icons as SVG Sprites.

線上 icon font 產生器

• 可自行匯入 svg 圖檔
• multi-project
• 線上 export 到 amazon s3，不用自己 host icon fonts
• 支援 SVG sprite，還幫忙處理了 ajax inject/loading
• 價錢：
  • free: 5,000 page views/month, unlimited icon fonts
  • $4.99/ month: 1,000,000, page views/month, unlimited icon fonts

http://gfycat.com/about

Gfycat is gif hosting, with three unique advantages:

• Speed - Average is 8 times faster.
• Unlimited size - No need to use inferior hosts. Have that 25mb gif you want to share? No problem!
• Nifty features - Play in reverse, slo mo, speed up, or pause and analyze frame by frame.

幫你把 GIF 轉成 video (mp4, webm)
可大幅減小 GIF 動畫體積的線上服務

http://jsbeautifier.org/

Beautify, unpack or deobfuscate JavaScript and HTML, make JSON/JSONP readable, etc.

Code formater: JS, html, json

http://patorjk.com/software/taag

Text to ASCII Art Generator (TAAG)

ASCII 風格文字產生器

附張圖比較快