Skip to content

Instantly share code, notes, and snippets.

Avatar

Evan You yyx990803

View GitHub Profile
@yyx990803
yyx990803 / problem.md
Last active Aug 29, 2015
Array diffing + DOM manipulation problem
View problem.md
  • 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 Aug 29, 2015
dev script
View dev.json
"scripts": {
"dev": "watchify -e src/main.js -o js/build.js -v & stylus -w css/style.styl && fg"
}
View designer.html
<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 Oct 1, 2014
Syntax highlighting / language support for Vue.js single-HTML-file components
View vue.JSON-tmLanguage
{
"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 Oct 2, 2014
Vue component syntax definition, which embedded highlight for Stylus, Sass, Less, Jade & CoffeeScript.
View vue.tmLanguage
<?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>
View example.js
var vm = new Vue({
components: {
example: {
data: function () {
return { a: 1 }
}
}
}
})
@yyx990803
yyx990803 / API options
Last active Aug 29, 2015
UglifyJS options for minifying Vue application
View API options
compress: {
pure_funcs: [
'_.log',
'_.warn',
'_.assertAsset',
'enableDebug'
]
}
@yyx990803
yyx990803 / bench.js
Created May 31, 2015
orderBy benchmark
View bench.js
// 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 Aug 29, 2015
Material Theme color scheme modified for JavaScriptNext
View Material-Theme.tmTheme
<?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>