Skip to content

Instantly share code, notes, and snippets.

View amowu's full-sized avatar
🧑‍💻

Amo Wu amowu

🧑‍💻
View GitHub Profile
@amowu
amowu / data-binding.js
Created October 5, 2016 04:16
How to Implement DOM Data Binding in Pure JavaScript
// http://stackoverflow.com/a/16484266/754377
function DataBind(element, data) {
this.data = data;
this.element = element;
element.value = data;
element.addEventListener("change", this, false);
}
DataBind.prototype.handleEvent = function(event) {
switch (event.type) {
@amowu
amowu / external-link.css
Created October 2, 2016 06:36
Add external link icon after link tag
@amowu
amowu / restful.module.js
Created September 4, 2016 05:29 — forked from seyDoggy/restful.module.js
An AngularJS RESTful Constructor
/**
* @ngdoc module
* @name Restful
* @description
*
* Restful is a base class from which to extend and create more CRUD services
* without the need to repeat the same CRUD operations and implementation
* with each additional service.
*
* The Restful factory takes one argument, a configuration object.
@amowu
amowu / svgfixer.js
Created August 17, 2016 03:27 — forked from leonderijke/svgfixer.js
Fixes references to inline SVG elements when the <base> tag is in use.
/**
* SVG Fixer
*
* Fixes references to inline SVG elements when the <base> tag is in use.
* Firefox won't display SVG icons referenced with
* `<svg><use xlink:href="#id-of-icon-def"></use></svg>` when the <base> tag is on the page.
*
* More info:
* - http://stackoverflow.com/a/18265336/796152
* - http://www.w3.org/TR/SVG/linking.html
@amowu
amowu / find-sub-str-in-arr.js
Created August 12, 2016 05:02
Find a Substring in a JavaScript Array
// The bitwise NOT (~) operator inverts the -1 to 0, and the !! operator coerces that value to false when the string is not in the array.
var arr = ['foo', 'bar'];
var str = 'baz';
var isTrue = !!~arr.indexOf(str); // return false
str = 'foo';
isTrue = !!~arr.indexOf(str); // return true
// Which is essentially a one-liner for this:
var isTrue = true;
if (arr.indexOf(str) === -1) {
@amowu
amowu / es6_tricks.md
Created July 22, 2016 06:47
Six nifty ES6 tricks

forEach

const arr = ['a', 'b', 'c'];
// arr.forEach(function (elem, idx) {
//   console.log('index = ' + idx + ', element = ' + elem);
// });
for (const [idx, elem] of err.entries()) {
  console.log(`index = ${idx}, element = ${elem}`);
}
@amowu
amowu / lodash_to_es6.md
Last active May 28, 2018 11:46
Lodash to ES6

at

// var object = { 'a': [{ 'b': { 'c': 3 } }, 4] };
// _.at(object, ['a[0].b.c', 'a[1]');
// output: [3, 4]
[
  object => object.a.[0].b.c,
  object => object.a[1]
].map(path => path(object));
@amowu
amowu / lang.css
Created July 3, 2016 08:18
一個國際化的站點應該如何設置多語種的字體呢?其先後順序如何設定?這裏強烈推薦 Airbnb 作爲參考。
[lang="ja"] body{
font-family:"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"MS Pゴシック","MS PGothic","MS Gothic”,
"MS ゴシック","Helvetica Neue”,Helvetica,Arial,
sans-serif !important
}
[lang="ko"] body{
font-family:"나눔 고딕","Nanum Gothic","맑은 고딕","Malgun Gothic”,
"Apple Gothic","돋움",Dotum,"Helvetica Neue”,Helvetica,
Arial,sans-serif !important
}
@amowu
amowu / js-tips.md
Created June 5, 2016 09:39
JS Tips

在陣列最後加入新的元素:

var arr = [1, 2, 3, 4, 5];

arr[arr.length] = 6;

效能較 arr.push(6) 好。

@amowu
amowu / tooltip.md
Created June 4, 2016 08:28
You Don't Need JavaScript for That!
<span class="tooltip-toggle" data-tooltip="Sample text for your tooltip!">
  Label for your tooltip
</span>
.tooltip-toggle {
  cursor: pointer;
  position: relative;