Skip to content

Instantly share code, notes, and snippets.

yyx990803 /
Last active Aug 29, 2015
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 / 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 / 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 / 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" "">
<plist version="1.0">
<string>Vue Component</string>
View example.js
var vm = new Vue({
components: {
example: {
data: function () {
return { a: 1 }
yyx990803 / API options
Last active Aug 29, 2015
UglifyJS options for minifying Vue application
View API options
compress: {
pure_funcs: [
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 / 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" "">
<plist version="2.4">
<string>Mattia Astorino (http:&#x2f;&#x2f;</string>
<string>Material Theme</string>