George Cheng

George Cheng

115 posts
Django

Django 1.7 中 migrate 无法执行而且表不存在的解决方案

现象 执行 python manage.py migrate 时，系统提示 No migrations to apply. 但是数据库中仍然没有迁移后的表格。 解决方案 执行 python manage.py dbshell 进入 dbshell 。执行 SELECT * FROM django_migrations 发现将要执行的迁移脚本的 id 已经添加在表中了，将其删除即可。 原因 发现是之前按照某个说明执行了一次 python manage.py migrate --fake 导致的。--fake 的含义是不执行该迁移脚本但是标记该脚本已经被执行过。导致之后无法正常进行迁移。
CSS

CSS 中 inline-block 两端对齐的解决方案

CSS 中实现两端对齐效果一般是采用 Flexbox 的方式解决，但是 Flexbox 的兼容性问题使得其在目前的前端领域应用性不高，但是实现两端对齐还有一个传统的 CSS 语法是text-align: justify。当我们对inline-block块所属的容器施加text-align: justify时，效果如下： 可见text-align: justify方法可以让第一行实现两端对齐，但是不能控制第二行（最后一行）的对齐方式。 解决这个问题要用一点小技巧，就是使用父块的::after伪元素强制作为父块的最后一行。这样就可以让第二行成为非最后一行，从而成功套用justify对齐方式。 具体实现方式如下： ul::after { content: ''; display: inline-block; width: 100%; } 效果如下： Fiddle: PS. Internet Explorer 浏览器从 6 开始就有了text-align-last CSS 属性，用于控制最后一行的对齐方式，

推荐一个 gulp 插件 gulp-filter

在针对多种类型的文件进行分别构建，再一同合并的时候，传统的方法是分别建立流进行构建，再使用 streamqueue 插件对流进行合并： gulp.task 'css', -> streamqueue objectMode: true, # source gulp.src 'src/css/**/*.css' # | css gulp.src 'src/css/**/*.less' # | | less .pipe less() # | | | gulp.src 'src/css/**/*.scss' # | | | scss .pipe scss() # | | | | gulp.src 'src/css/**/*.styl' # | | | | styl .pipe
杂谈

二维单域名要过期了

差不多是一年前，朋友跟我说了个项目，大意就是写一个微信上扫个二维码就能看菜单的 HTML5 应用。我花一天时间给做了，后台 WordPress Multi-site，前端 jQuery Mobile ，还申请了域名 2vdan.com。 后来这事儿就搁浅了，东西就摆在实验室服务器上，服务器还老坏，也没宣传。一年过去了，这个东西都被其他人做烂了。域名也过期了，不打算续费了。现在挂在二级域名 2vdan.gerhut.net 上。 放两张截图：
JavaScript

在浏览器中解析任意 URL 的组成部分

浏览器的location对象拥有很多方便的属性用于获取当前URL的组成部分： location.protocol：协议名 location.username：用户名 location.password：密码 location.hostname：主机名 location.port：端口号 location.host：主机名和端口号 location.pathname：路径 location.search：查询串 location.hash：书签名 在较新（未测试，估计是支持跨域XHR之后的）浏览器中，还有 location.origin：协议名、主机名和端口号 可以使用。 可以看出location的属性是非常方便的URL解析器。但是其局限是只能解析当前URL的组成部分。如果我们要解析任意URL的组成部分，使用location是无法完成的。location的构造器Location是无法在JavaScript中手动创建的。所以如果我们要解析任意URL还需要找别的办法。
印象笔记

网页上增加“一键剪贴到印象笔记”功能

印象笔记官网上没给这个方式，Google出的答案如下： Evernote国际版地址是http://www.evernote.com/clip.action?title={{title}}&url={{url}} 印象笔记中国版地址是http://app.yinxiang.com/clip.action?title={{title}}&url={{url}} 其中两个版本的子域名不一样：前者是www后者是app。 不像分享到微博/人人，不提供弹窗自动调整大小、位置的功能。 剪贴完之后提供返回到之前页面的按钮，可以继续浏览页面内容。所以不一定非要在新窗口打开链接。
杂谈

终于调通了Ghost博客

自从前一个自己写的基于nodejs的blog因为服务器被没收而消失以来，一直希望能有一个Ghost博客可以用。找了几个免费的云服务，国内的因为全都要求域名备案全部淘汰。nodejitsu一直装不上。N2O总是自己停掉而且不支持自定义域名，打算用之前自己的虚拟主机写一个完全镜像的PHP脚本，坑都开了，虽然最后没用N2O但是坑还是要填的，AWS之类的一年期限有点蛋疼。最后选用了TooBug巨巨推荐的Heroku。（突然感觉好多云服务的名字都有和风范。） Heroku有个限制，就是不给存静态文件。第一次提交的时候它把Ghost的webfont都过滤掉了。第二次提交提交上去了，估计过不了多久就会自动删掉。正好Ghost中文网提供了一个Ghost七牛云版。于是，上传的图片就全都转存到七牛云存储了。 下一步要做的事儿： 旧blog文章都转移过来，正好之前数据库里存的都是Markdown格式的。 如果后台的Webfont还是会被干掉的话，把Webfont转到七牛 主题改一改，把转贴到Facebook和Twitter改成从网和微博。 加个大Banner 端午节内做完前三步吧。
前端

CodeStar之《前端特工》糙解

第一章 提交中缺一个timestamp的值，补上即可。 document.getElementsByName('timestamp')[0].value = new Date().getTime(); 之后输入用户名邮箱即可进入。 第二章 左边的考察border-radius的椭圆写法 border-radius: 20px / 30px; 右边的考察三角形的CSS画法。四个边框的某一个边染色即可。 旋转中心其实是右上角。 border-color: transparent black; -webkit-transform: rotate(-60deg); -webkit-transform-origin: right top; 第三章 因为敌人AI开源，所以最简单的办法就是把敌人的AI复制一份到我方AI，多打几次就赢了。。 第四章 Array.prototype.slice是很好用的类数组拷贝函数。 Q1. Array.prototype.slice.call(arr); Q2.
算法

试用 Prolog 语言解算法题

现有一列随机的正整数，算他有2^n个吧，然后两两结合生成一个二叉树，节点是上一级两个数的和，合成的cost是上一级两个数的乘积。 而整个树的cost由总cost最高的那个branch决定，求用什么方法排列这一列数使生成的树cost最低。 例如，1，2，3，4这四个数 C=21+12=33 % 将一个树分成等长的左子树和右子树 bisect(List, Left, Right) :- append(Left, Right, List), length(Left, LeftLength), length(Right, RightLength), LeftLength = RightLength. % 计算节点Cost = 左子树数字和 * 右子树数字和 element_cost(List, Cost) :- bisect(
Io

Io 语言运算符重载 bug

Io语言的addAssignOperator在使用文件执行的时候会出现添加不进去的bug， 同时addOperator添加进来的运算符全都是单目运算符。（也许也是添加不进去的表现，待研究。） 在七天七语言的Io章Day3练习3中，为了绕过这两个bug，我的代码如下： Builder := Object clone Builder indent := 0 Builder forward := method( write(" " repeated(self indent * 2)) write("<", call message name) arguments := call message arguments if (arguments first name == "curlyBrackets", doMessage(arguments removeFirst)
HTML5

HTML5 PNG 解码测试

基于这篇文章的研究结果，做了一个小实现。 测试入口 不支持IE。。。 几点经验吧： escape和unescape采用Unicode编码，encodeURI(Component)和decodeURI(Component)采用UTF-8编码。 Opera不支持HTML5原生拖拽（？） 一旦在源HTML里设置图像宽度，无论是width，还是内置css还是style标签，更新innerHTML之后都会乱码，原因不明。 forEach虽然好用，但是只支持数组，nodeList之流还是乖乖for循环。。。 Chrome存不了拖拽dataTransfer的setData，刚set完get就没有，而且直接看对象也是只存了key没存value，原因不明。 effectAllowed里面，move跟移动文件的光标一样，copy跟复制文件的光标一样，link跟创建快捷方式的光标一样。 如果在dataTransfer里面set了text/plain的data，drop时firefox会自动打开搜索页。就跟选中一段文本拖动是一个感觉。Chrome没有估计是因为5的原因。要防止的话preventDefault可能不是万能的，drop时clearData才是万全之策。 Safari的宽度计算有问题？四宫格视图里面，总宽度500，其他浏览器只要每个宽度250就可以放下，Safari必须248，然后拖动一下之后250居然又可以放下了。目测BUG。 其实主要还是想练Python。 头回写Python，

快速切换代码与注释的技巧

本文适合各种同时支持//与/* */注释的语言。 在调试的时候有时要在代码中反复注释与取消注释一段代码，在没有碉堡的IDE的Ctrl+/的帮助下，每次添加与删除/和/是一件十分浪费时间的事情。于是总结出了一些可以提高注释与取消注释效率的技巧。 例1，要反复注释与取消注释一段代码的情况： /* foo(); bar(); //*/ 是为注释状态 //* foo(); bar(); //*/ 是为取消注释状态，代价是输入与删除第一个斜杠。 例2，要反复切换两段代码的注释与取消注释状态的的情况： //* foo(); bar(); /*/ foo2(); bar2(); //*/ 是为第一段代码有效状态 /* foo1(); bar1(); /*/ foo2(); bar2(); //*/ 是为第二段代码有效状态，代价同样是输入与删除第一个斜杠。 例3，要反复切换许多段代码的注释与取消注释的情况。 //* foo1(); bar1(); /*/ foo2(); bar2(); /*/ foo3(); bar3(); /*/ foo4(); bar4(); /*/ foo5(); bar5(
C

计算机是蛋疼人类的好朋友系列（

实验室有个玩具，不知道是谁手欠买来的。是这样的一个东西： 据说它原来是个3x3x3的正方体，不知道又是谁手欠给展开了。 由于智商很宝贵的原因，我拿手里摆弄了好几天都没给它恢复成一个正方体。 怒，写个搜索算法。 #include <stdio.h> #define sbyte signed char // sbyte: (-128 to +127) #define SIZE 3 // Size of cube. #define AREA (SIZE * SIZE) // Area of a face of cube. #define VOLUME (SIZE * SIZE * SIZE) // Volume
jQuery

jQuery 中监视背景图像（列表图像）加载完成的一种 hack 。

在jQuery环境下，一般HTML元素的load事件无法监听到背景图像的加载。 当我们需要监听到背景图像的加载时，可以利用浏览器的缓存机制，创建一个空Image对象同时进行加载，此时该Image对象的load事件即为源图像加载完成的事件。于是在jQuery中我们可以利用此函数 function imageListener(url, handler) { $("<img />").attr("src", url).load(handler); return url; } 来监听背景图像的加载，用法如下： $("body").css("background-image", "url(" + imageListener("background.png", backgroundImageLoadedHandler) + "
HTML

HTML 中对于固定表格布局且首行合并时单独控制列宽的方案

对于设置了table-layout为fixed的表格，其每一列的宽度都由第一行的单元格的宽度确定，与第二行以后的单元格宽度及内容无关。所以可以大幅度提高表格解析的性能，当表格的第一行解析完成后，用户即可看到整个表格。 当表格的第一行有合并的单元格的时候，被合并的每一列的单独宽度均无法直接调整。举一个例子： <style> table { background-color: black; border-spacing: 5px; table-layout: fixed; width: 200px; height: 100px; } td { background-color: white; padding: 0px; } </style> <table> <tbody> <tr> <td colspan="
iOS

部分 iOS 程序闪退的一种解决方案

直接上解决方案： 将iOS设备连接到iTunes上。 确保iTunes上的登录AppleID与iOS设备的Apple ID相同。凑点字，具体方法如下： 在iTunes上点击“Store(S)”，观察倒数第二项的内容。 如果倒数第二项是“显示我的帐户（XXX）中的内容(V)…”，记录括号内的XXX的内容，并转到第6步。 否则转到第9步。 在iOS设备上点击“设置”->“Store”。 比较“Apple ID:”后面的内容与第4步记录的内容是否相同，若相同直接转到第11步，若不同则记录“Apple ID:”后面的内容。 在iTunes上点击“Store(S)”->“注销(O)”。 在iTunes上点击“Store(S)”->
ActionScript3

终于战胜了 ByteArray 的 AMF 写入读取，总结几个要点。

复制整个ByteArray可以使用newBytes.writeBytes(oldBytes)方法。用readBytes似乎也可以，有时间把它理解清楚了。此外这个方法执行后，两个ByteArray的指针都在EOF处，即BytesAvailable都是0。注意重复利用的时候调整position属性。 要使对象支持AMF序列化，必须使用全局函数registerClassAlias对类进行注册别名的操作。别名唯一即可，一般可采用完整含包路径的类名称。 序列化的类必须__只能__有__无参数的__构造方法。因为Action Script不支持方法重载，而是使用默认参数的方式进行多种参数形式的声明，而设计支持AMF序列化的类其构造函数必须是无参数的，换句话说，即使所有参数都有默认值也不行。 序列化的类必须为public，参与序列化的属性也必须是public，使用其他命名空间均不能参与序列化，即使在作用域内拥有访问权限。 AMF序列化习作：PaintingRecord
ActionScript3

仿 jQuery 的 once 方法，在 ActionScript 中指定一个只触发一次的监听器。

package net.gerhut.eventUtils { import flash.events.EventDispatcher; public class OnceEventDispatcher { public static function add(eventDispatcher:EventDispatcher, type:String, listener:Function, useCapture:Boolean=false, priority:int=0, useWeakReference:Boolean=false):void { var onceListener:OnceListener = new OnceListener(eventDispatcher, type, listener, useCapture); eventDispatcher.addEventListener(type, onceListener.