Skip to content

Instantly share code, notes, and snippets.

@watert
watert / create-qrcode.js
Last active October 24, 2022 02:18
适用于小程序的通用化的 QRCode 生成器
/**
create-qrcode.js
================
基于 qr.js 进行包装, 适用于小程序的通用化的 QRCode JS 生成器
qr.js 是已经比较成熟的二维码生成相关的 JS 移植,然而其内部的渲染机制需要浏览器相关特性的支持,使得在小程序端无法直接使用。
小程序中也无法使用 SVG 直接渲染,而如果使用 DOM 结构渲染或者 Canvas 渲染的话,需要的开发和接入成本也会上升。
因此这里使用的方案是: SVG 字符串生成后,转化为 dataURL 字符串,可以直接作为小程序中的 image 标签的 src 属性直接使用。
因为是 SVG 矢量图, 因此可以渲染为任意尺寸。
### INSTALLATION 安装:
@watert
watert / object-get-set.js
Created September 30, 2019 07:36
nested object set and get // extract from lodash
/*
path access: object util get/set with path access
get(obj, path) => value of obj at path:
expect(get({ a: 0 }, 'b[1].c')).toBe(null);
expect(get({ b: [0, { c: 'CCC' }] }, 'b[1].c')).toBe('CCC');
set(obj, path, value) => new object updates object value at path
expect(set({a: 0}, 'b.c', 1)).toMatchObject({ a:0, b: {c: 1} });
expect(set({a: 0}, 'b.c', 2, (v) => v * 10).b.c).toBe(20);
@watert
watert / grid.less
Created March 17, 2016 03:53
LESS grid system
.desktop(@rules){
@media (min-width: 769px) { @rules(); }
}
.pad(@rules) {
@media (max-width: 769px) { @rules(); }
}
.phone(@rules){
@media (max-width: 420px) { @rules(); }
}
.clearfix(){
@watert
watert / gulpfile.js
Created November 18, 2015 03:05
gulp requirejs example
var gulp = require("gulp");
gulp.task("rjs",function(cb){
var rjs = require("requirejs");
var config = {
baseUrl:"../scripts",
name:"main",
// optimize: "none",
mainConfigFile:"../scripts/require-config.js",
out:"../res/bundle.js",
@watert
watert / jquery.postfileform.coffee
Created March 12, 2015 15:38
upload file with modern browser way with coffeescript and jquery
$.postFileForm = (url,form,callback)->
data = new FormData(form[0] or form)
return $.ajax
url: url
data:data
type:"POST"
cache: false
contentType: false
processData: false
@watert
watert / jquery.pullBounce.coffee
Created March 8, 2015 17:27
jquery.pullBounce.coffee
$.fn.pullBounce = ()-> $(this).each ->
$dom = $(this)
isPulling = no
start = 0
top = ()-> $dom.scrollTop()
touchTop = (e)->
oEv = e.originalEvent
(oEv.touches[0] or oEv.changedTouches[0]).pageY
@watert
watert / text.md
Created February 17, 2015 10:53
前端五年,看山不是山

回首码农生涯,我个人大致的学习路线其实算是可考的:

  • 07年高中毕业开始,由潭浩强的《C语言》开始入门。回首而观之,这本不见得是什么好的入门书,如果现在看回来,大概《C++ Primer》与《UNIX编程艺术》算是后台入门圣经,而零基础入门编程大概以《Learn Python the hard way》为上。但其实这些都不算WEB或UX方向。
  • 09年看《CSS禅意花园》及《WEB高级标准解决方案》算是入门WEB前端。做学生会网站,主要是研究Wordpress主题及插件开发。
  • 11年毕业工作,主事数据平台前端开发,此时前端方面主要使用jQuery及其UI,工作内容上前后端依然耦合,所以依然看很多PHP的东西。前端方面嘛,其实没啥书好看,都主要看各种工具的官方文档与各类论坛博客。
  • 13年开始前后端逐渐分离,主要使用 jQuery, BackboneJS, Bootstrap。Nodejs, Expressjs, MongoDB等JS的后端应用开始尝试,但其实缺乏大量实践的情况下还是比较处于观望状态。PHP受制于工作环境的5.2版本的限制,基本已经不再钻研。学习的资料内容依然是官方文档和论坛博客。
  • 14年则开始接触Hybrid开发,SPA的开发,以及Grunt, Bower等基于node的工具使用。开始大面积使用LESSCSS与Coffee-Script。

我想这份资历在前端界应该也算是小资深了,毕竟这个领域是如此年轻。

@watert
watert / bsmodalview.coffee
Created January 23, 2015 13:19
a common backbone view class for bootstrap modal
###
a common backbone view class for bootstrap modal
# install:
just import backbone,jquery,bootstrap and this script then use it
# usage:
@watert
watert / $.transition.utils.coffee
Created January 16, 2015 08:33
transition utils
domAnimateTo = ($dom, to)->
$dom.css(cssTransition("all ease-in-out .2s")).css(to)
.on "-webkit-transitionEnd transitionend", ()-> $dom.css(cssTransition(""))
domAnimate = ($dom, from, to)->
$dom.css(from)
setTimeout ( -> domAnimateTo($dom, to) ), 33
cssTransition = (val)->
"-webkit-transition": "-webkit-"+val
"transition": val
cssTranslate = (val)->
@watert
watert / mocha.tv4.base.coffee
Created November 21, 2014 16:05
mocha.tv4.base.coffee
{assert} = chai
do ->
parseSchema = (schema)->
if schema?.properties
_schema = schema
else
properties = schema
_schema =
"type": "object"
"properties":schema