Skip to content

Instantly share code, notes, and snippets.

View yyx990803's full-sized avatar

Evan You yyx990803

View GitHub Profile
@yyx990803
yyx990803 / problem.md
Last active August 29, 2015 13:57
Array diffing + DOM manipulation problem
  • We have two arrays of objects.
  • Each object has an associated DOM element, .el.
  • The two arrays are sharing some objects, but not all of them;
  • The two arrays have different orders for the shared objects.
  • The first array's associated DOM elements are already inserted in the DOM, reflecting the owner objects' order in the array.

Now we want to replace the first array with the second one, with the following requirements:

  • Update the DOM so that the inserted elements reflect the order of objects in the second array.
  • Reuse any existing objects and DOM elements.
@yyx990803
yyx990803 / dev.json
Last active August 29, 2015 14:02
dev script
"scripts": {
"dev": "watchify -e src/main.js -o js/build.js -v & stylus -w css/style.styl && fg"
}
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="../paper-slider/paper-slider.html">
<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../paper-tabs/paper-tab.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-radio-button/paper-radio-button.html">
<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
@yyx990803
yyx990803 / vue.JSON-tmLanguage
Created October 1, 2014 20:58
Syntax highlighting / language support for Vue.js single-HTML-file components
{
"name": "Vue Component",
"uuid": "2627aff3-9590-433e-8d6a-2e2603de23f8",
"scopeName": "text.html.basic",
"fileTypes": ["vue"],
"patterns": [
{
"endCaptures": {
"1": {
"name": "punctuation.definition.tag.end.html"
@yyx990803
yyx990803 / vue.tmLanguage
Created October 2, 2014 07:40
Vue component syntax definition, which embedded highlight for Stylus, Sass, Less, Jade & CoffeeScript.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>fileTypes</key>
<array>
<string>vue</string>
</array>
<key>name</key>
<string>Vue Component</string>
var vm = new Vue({
components: {
example: {
data: function () {
return { a: 1 }
}
}
}
})
@yyx990803
yyx990803 / API options
Last active August 29, 2015 14:20
UglifyJS options for minifying Vue application
compress: {
pure_funcs: [
'_.log',
'_.warn',
'_.assertAsset',
'enableDebug'
]
}
@yyx990803
yyx990803 / bench.js
Created May 31, 2015 04:17
orderBy benchmark
// vue internals
var _ = require('../src/util')
var Path = require('../src/parsers/path')
// original implementation using native sort
var original = function (arr, sortKey, reverse) {
if (!sortKey) {
return arr
}
var order = 1
@yyx990803
yyx990803 / Material-Theme.tmTheme
Last active August 29, 2015 14:25
Material Theme color scheme modified for JavaScriptNext
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="2.4">
<dict>
<key>author</key>
<string>Mattia Astorino (http:&#x2f;&#x2f;astorinomattia.it)</string>
<key>name</key>
<string>Material Theme</string>
<key>semanticClass</key>