待讀

[Rplus]

[Rplus]

SVG Accessibility API Mappings

W3C Working Draft 19 November 2015 http://vote.ly.g0v.tw/legislator/voter_sp/1747/8/

via: https://twitter.com/AmeliasBrain/status/667413546871861248

[Rplus]

https://saucelabs.com/ saucelabs:

Automated testing service

常看到不少熱門 repo 有放這個測試報告

[Rplus]

http://reactcheatsheet.com/ reactcheatsheet

[Rplus]

http://freshinbox.com/resources/css.php

Kinetic Email CSS Support

email css support lookup list

[Rplus]

http://oreillymedia.github.io/HTMLBook/

HTMLBook 要把 HTML 拿來當書的一些細節：semantic markup & tip

[Rplus]

http://kpdecker.github.io/six-speed/

js / es6 / babel / es5 的速度 這個感覺要注意一下測試方式~ 瞭解一下哪種寫法比較好

[Rplus]

https://github.com/legomushroom/mojs http://mojs.io/

motion graphics library for the web

威猛的動畫 library

教學： Easing / Path Easing http://mojs.io/tutorials/easing/path-easing/

[Rplus]

http://www.smashingmagazine.com/2015/12/reimagining-single-page-applications-progressive-enhancement/

Reimagining Single-Page Applications With Progressive Enhancement By Heydon Pickering December 21st, 2015

以更原始的方式來處理 SPA 的 route 先以 CSS 處理 :target 的狀態 再進一步使用 hashchange 的 event 來調整各個 routes 的狀態變化

底下的討論也蠻熱烈的 f2etw 裡也有些 討論

[Rplus]

Expressive CSS http://johnpolacek.github.io/expressive-css/

An approach to writing lightweight, scalable CSS using utility classes that are easy to write and understand. github: https://github.com/johnpolacek/expressive-css/

這篇文主要在介紹如何創造一個輕量級且具擴充性的 css system

透過 utility class 來設定共用的基礎樣式 以簡化繁雜的 css 覆蓋問題 比如 .sr-only 之類的輔助 class

實踐部份可參看另一篇 Expressive CSS style guildeline http://johnpolacek.github.io/expressive-css/styleguide/

或是參考比較常見的 basecss (( basecss 的 padding, margin 部份覺得很受用！

[Rplus]

Blending Modes Demystified http://alistapart.com/article/blending-modes-demystified

應用方向

• Transparency
• Texturing
• Colorization

數理：

• multiply: x = a × b
• screen: x = 1 − (1 − a) × (1 − b)

三個主要應用的 property:

• background-blend-mode
• mix-blend-mode
• isolation

想要簡單的與背景色混合目前做不到 要靠 background-image: linear-gradient 輔助

background-blend-mode 可多重設定， 所以可以使用 multi bgi 來疊加

mix-blend-mode (與 opacity 一樣)會向下繼承， 可適時使用額外的背景層來分離效果

瀏覽器支援請見 http://caniuse.com/#feat=css-backgroundblendmode

permalink: https://twitter.com/RplusTW/status/684555016774926336

[Rplus]

http://www.smashingmagazine.com/2015/12/getting-started-css-calc-techniques/ Getting Started With CSS calc() By Ana Tudor , December 2nd, 2015

[Rplus]

CSS Feature Detection: Modernizr or Feature Queries? by George Martsoukos, 27 Feb 2015 http://webdesign.tutsplus.com/tutorials/css-feature-detection-modernizr-or-feature-queries--cms-23508

Modernizr

• css selector with html.classList
• js width Modernizr.cssproperty

feature queries

1. by CSS

@supports(test condition) {
    /* apply rules */
}

@supports not(test condition) {
    /* apply rules */
}

1. by native JS

CSS.supports(propertyName, propertyValue)

CSS.supports(test condition)

[Rplus]

SVG icons are easy but the fallbacks aren't 14 December 2015 by @i_like_robots http://maketea.co.uk/2015/12/14/svg-icons-are-easy-but-the-fallbacks-arent.html

關於 SVG fallback 的血與淚 XDDD

不過這作者使用的方式是 css sprite + background-image (svg) 而且他用的方式很奇耙 XDD 是用 position absolute 去定位的 好處是可以動態調整大小 ( 但其實如果只是為了動態，可以不用這樣搞 ( 他這樣用 pseudo 放大的原因是為了後面的 fallback

而標題裡重點的 fallback，他這邊用了一個非 w2c 標準的 css property zoom 利用 pseudo + zoom(old IE only) 強制縮放來達到他要的 fallback 效果~

https://twitter.com/RplusTW/status/685503112442810368 https://www.facebook.com/rplus.tw/posts/1038342139566902

[Rplus]

layered animation Moving along a curved path in CSS with layered animation by Tobias Ahlin, 07 JAN 2016 http://tobiasahlin.com/blog/curved-path-animations-in-css/

以第二個軸向(axis)的運動來製作更為複雜的動畫路徑軌跡 https://media.giphy.com/media/XpmlpSGzGFTfa/giphy.gif

https://www.facebook.com/rplus.tw/posts/1041149849286131 https://twitter.com/RplusTW/status/686984475704623104

[Rplus]

http://www.creativebloq.com/web-design/supercharge-svg-animations-gsap-11618683

[Rplus]

[Rplus]

setting of sublime emmet + jsx http://stackoverflow.com/a/31767887

{ "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context":
    [
        { "operand": "source.js", "operator": "equal", "match_all": true, "key": "selector" },
        { "match_all": true, "key": "selection_empty" },
        { "operator": "equal", "operand": false, "match_all": true, "key": "has_next_field" },
        { "operand": false, "operator": "equal", "match_all": true, "key": "auto_complete_visible" },
        { "match_all": true, "key": "is_abbreviation" }
    ]
}

[Rplus]

The Hack is Back! by Paul , 25 JAN 2016 https://aerotwist.com/blog/the-hack-is-back/

介紹他如何使用 createImageBitmap 來讓大型圖片脫離 main thread

offthread-image https://github.com/googlechrome/offthread-image

requestIdleCallback 這東西還蠻趣味的 會在休息時觸發 目前只有 Chrome 有支援 https://developers.google.com/web/updates/2015/08/using-requestidlecallback https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback

裡頭也有個小技巧是關於 <img> 隱藏後的 accessibility

圖片在設定 display: none; 後就會被移出 accessibility tree 了 所以這邊他用了個偏方，改用 <canvas role="img" aria-label="This would be the alt text."></canvas> 來維持 accessibility

[Rplus]

Getting Started With CSS calc() By Ana Tudor December 2nd, 2015 https://www.smashingmagazine.com/2015/12/getting-started-css-calc-techniques/