-
-
Save Rplus/7671448 to your computer and use it in GitHub Desktop.
漸層 bgi
background-image linear-gradient
-
Ultimate CSS Gradient Generator
http://www.colorzilla.com/gradient-editor/- 可上傳圖自動擷色
- output scss
- input css
-
visual.css.tools
http://www.visualcsstools.com/- output svg(base64) + canvas
- input css
讓CSS正確顯示中文字體 http://benlibra.blogspot.tw/2011/04/css.html
escape('微軟正黑體').replace(/%u/g, '\\');
=> "\5FAE\8EDF\6B63\9ED1\9AD4"
multiline ellipsis
http://zetajames.wordpress.com/2012/02/13/text-overflow/ text-overflow: ellipsis; at multi-line
{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 6; /* 第六行要顯示點點點 */
-webkit-box-orient: vertical;
}
Learn CSS Positioning in Ten Steps (en) http://www.barelyfitz.com/screencast/html-training/css/positioning/ (zh) http://www.see-design.com.tw/i/css_position.html
- RegExp
-
debug tools
-
useful pattern
- http://stackoverflow.com/a/1159389
regexp convert uppercase/lowercase
- http://stackoverflow.com/a/1159389
-
- 偵測 mobile by js
http://detectmobilebrowsers.com/
- 轉成 base64 可以餵 data
http://www.motobit.com/util/base64-decoder-encoder.asp
-
將 gif 轉成 video 的線上服務
可大量壓縮圖檔大小!! 很讚! http://gfycat.com/about -
PNG lossless optimize
-
css selector support table
http://www.quirksmode.org/css/selectors/ -
web-browser new-tech support serach
-
查字碼 uni-code / html-code
基本上太特殊的字元在使用上還是有其風險,保險還是 custom font -
上傳字型轉成個種網頁用字型格式 (woff, svg, ttf)
http://www.fontsquirrel.com/tools/webfont-generator -
simple list
http://www.crossbrowserbook.com/Knowledge
-
http://codepen.io/beyondSimple/pen/stDzB
use keyframes to control svg path -
replace svg with #link,
ref: SVG a element<a xlink:link="//google.com" xlink:show="replace">
-
Responsive font-weight
http://useiconic.com/concepts/responsive/ -
icon font:
-
Pure CSS Parallax Scrolling
http://codepen.io/keithclark/details/JycFw
(transform + 3D ;perspective: 1px) -
Pure CSS Slider http://rawgithub.com/drygiel/csslider/master/examples/dark.html
(label + input)
文字垂直對齊的計算器
https://drewish.com/tools/vertical-rhythm/
http://topheman.github.io/parallax/
有陀螺儀定位的 parallax
https://github.com/adamlu/javascript-style-guide
JS style guide 簡中
https://github.com/tiimgreen/github-cheat-sheet
github 操作指南(密技大補帖)
簡中版本 https://github.com/tiimgreen/github-cheat-sheet/blob/master/README.zh-cn.md
gist suffix with
.pibb
後就變成 html 了耶~
方便使用 iframe 包起來~
( 試了一下 secret gist 也吃得到唷~ XDD
git show :/typo
搜尋 帶有 "typo" comment 的 commit
https://github.com/github/linguist/blob/master/lib/linguist/languages.yml
GFM(Github Favorite Markdown) 的 code 支援 syntax highlight
http://csspre.com/
CSS preprocessors 的比較文
SASS LESS Stylus
有各個的有趣用法,非常值得一讀
https://gist.github.com/jlong/2428561
將 字串 url 抽出各種 property 的小技巧 (pathname, hostname, search...)
主要是建一個 <a>
設定 href
後,這個 <a>
就能當程 location
一樣來抽出各種 property 了~
下方的回覆也有提及這方法的效率其實是比較低的
若要提高些效率,可以試試 new URL()
ref: https://developer.mozilla.org/en-US/docs/Web/API/URL.URL
效率比較: http://jsperf.com/url-parsing/25
ps: 那個 regexp 雖然高效,但基本上維護不了呀 囧
測試你的網站速度!
http://www.webpagetest.org/
http://html5pattern.com/
一堆常用 regexp 的範例
http://contrastchecker.com/
線上 對比檢測 工具
color
https://github.com/showcases
github 熱門 repo 合輯
http://ixdchecklist.com/
interaction design 互動設計線上自我檢查表
http://jquerymy.com/
jquery base 的 two-way data binding plugin
http://jex.im/regulex/
Regulex JavaScript Regular Expression Visualizer.
http://viewportsizes.com/
羅列各種裝置的 viewport 可視區長寬尺寸
http://www.mergely.com/editor
online diff tools
merge
http://devdocs.io/
api 查找工具,可離線!!
offline mod 以 indexedDB cached 處理
about link:
https://medium.com/de-correspondent/links-are-broken-these-three-alternatives-have-improved-our-readers-reading-experience-796c302c8930
這篇說說它怎麼處理連結,
即便是連結換了,還能保有部分資訊可供參考
http://arasatasaygin.github.io/is.js/
is.js
輔助判斷各種 js 的 type
css animation news & cool sample
Javascript Chart Libraries
http://blog.webkid.io/javascript-chart-libraries/
quick overview about open source javascript chart libraries (mostly D3 based)
以 Firefox 開發者工具在 GitHub 上除錯 fetch()
http://blog.mozilla.com.tw/posts/7293/devtool-github-fetch
video
未讀
http://www.oxxostudio.tw/
認真在寫前端技術文的部落格
http://www.myscriptfont.com/
客製化手寫字型服務
contenteditable detect snippet
via: http://stackoverflow.com/a/18316972/3893926
主要修正 Chrome 支援 rich-text 輸入方式
在一些需純文字區塊會有 copy & paste 卻帶有 style 的狀況
var isSupportsPlaintextEditable = (function () {
var div = document.createElement('div');
div.setAttribute('contenteditable', 'PLAINTEXT-ONLY');
return div.contentEditable === 'plaintext-only';
})();
console.log(isSupportsPlaintextEditable);
http://howtocenterincss.com/
各式 center 方式
- asda
- asdasd
http://navnav.co/
很多選單的 demo
layout
http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
非常 tricky 的定位方式
float
+margin-left
替 多行文字自動加上 ellipsis 區塊 (pure css)
自己做的 trace page
http://jsbin.com/poves/2/edit