Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.
video::webkit-media-controls-timeline {
background-color: lime;
}
video /deep/ input[type=range] {
##Scala eXchange 2014 slides
collected by Adam Warski
Feel free to complete the list!
The Binary Compatibility Challenge by Martin Odersky
A Skeptic's Look at scalaz' "Gateway Drugs”: A Practical Exploration by Brendand McAdams
| // array utils | |
| // ================================================================================================= | |
| const combine = (...arrays) => [].concat(...arrays); | |
| const compact = arr => arr.filter(Boolean); | |
| const contains = (() => Array.prototype.includes | |
| ? (arr, value) => arr.includes(value) | |
| : (arr, value) => arr.some(el => el === value) |
안녕하세요. 사원사업부의 마루야마@h13i32maru입니다. 최근의 Web 프론트엔드의 변화는 매우 격렬해서, 조금 눈을 땐 사이에 점점 새로운 것이 나오고 있더라구요. 그런 격렬한 변화중 하나가 ES6이라는 차세대 JavaScript의 사양입니다. 이 ES6는 현재 재정중으로 집필시점에서는 Draft Rev31이 공개되어있습니다.
JavaScript는 ECMAScript(ECMA262)라는 사양을 기반으로 구현되어있습니다. 현재 모던한 Web 브라우저는 ECMAScript 5.1th Edition을 기반으로 한 JavaScript실행 엔진을 탑재하고 있습니다. 그리고 다음 버전인 ECMAScript 6th Edition이 현재 재정중으로, 약칭으로 ES6이라는 명칭이 사용되고 있습니다.
| { | |
| // http://eslint.org/docs/rules/ | |
| "ecmaFeatures": { | |
| "binaryLiterals": false, // enable binary literals | |
| "blockBindings": false, // enable let and const (aka block bindings) | |
| "defaultParams": false, // enable default function parameters | |
| "forOf": false, // enable for-of loops | |
| "generators": false, // enable generators | |
| "objectLiteralComputedProperties": false, // enable computed object literal property names |
| function* zip(...iterables) { | |
| let iterators = iterables.map(i => i[Symbol.iterator]()); | |
| while (true) { | |
| let entries = iterators.map(i => i.next()); | |
| let done = entries.some(entry => entry.done); | |
| if (done) break; | |
| yield entries.map(e => e.value); | |
| } | |
| } |
After publishing my article on ECMAScript 6, some have reached out to ask how I exactly I make it all work.
I refrained from including these details on the original post because they're subject to immiment obsoletion. These tools are changing and evolving quickly, and some of these instructions are likely to become outdated in the coming months or even weeks.
When evaluating the available transpilers, I decided to use 6to5, which has recently been renamed to Babel. I chose it based on:
| /* bling.js */ | |
| window.$ = document.querySelector.bind(document); | |
| window.$$ = document.querySelectorAll.bind(document); | |
| Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); }; | |
| NodeList.prototype.__proto__ = Array.prototype; | |
| NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); }; |
