Skip to content

Instantly share code, notes, and snippets.

View yyx990803's full-sized avatar

Evan You yyx990803

View GitHub Profile
@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>
@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 / async.js
Created August 8, 2014 19:03
Simple helper for async tests in Jasmine 1.3 that mimics 2.0 and Mocha
/**
* Jasmine 1.3 async helper
*/
function async (run) {
return function () {
var done = false
waitsFor(function () { return done })
run(function () { done = true })
}
@yyx990803
yyx990803 / vue-element.html
Last active October 15, 2017 11:50
Vue custom element draft
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue.js custom element example</title>
<script src="../dist/vue.js"></script>
</head>
<body>
<my-element msg="custom message">original content</my-element>
<script>
<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 / 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"
}
@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 / umd.js
Created January 27, 2014 16:40
umd
;(function(){
// module content
if (typeof exports == "object") {
module.exports = require("{{configName}}");
} else if (typeof define == "function" && define.amd) {
define(function(){ return require("{{configName}}"); });
} else {
this["{{standaloneName}}"] = require("{{configName}}");