发芽网开发记录 | 半瓶墨水

分类：'发芽网开发记录' 的所有文章

代码发芽网重新支持临时代码

(上上周做的了，直到今天才有时间写）

代码发芽网改版以后，把临时高亮代码的支持去掉了，也就是说，不管你有没有登录，所有的代码都会发布，别人也看得到

当时考虑的情况是：保不保存都没关系，因为用来高亮的代码都是要贴到网上的，给出了“高亮不保存”按钮反而添乱。

然后有朋友在贴了代码以后，写信给我要求删除；如是者三，我也纳闷，跟其中一位朋友聊聊为啥，才知道有时候贴代码是在本地用的，并不想公开。

想了又想，决定还是尊重用户的选择；为了区分，我加上了一个“临时自用，请不要保存”的选项。

十一月 12th, 2009 | 分类: 发芽网开发记录 | 5 条评论

一道老面试题 - 为什么镜子可以颠倒左右却不能颠倒上下？

题目描述如下：

题酷发芽网#155：想象你在镜子前，请问，为什么镜子中的影像可以颠倒左右，却不能颠倒上下？

这道题目其实有很大的迷惑性，面试官是在考察你的逻辑思维能力

有两种答案如下：
1. 因为人的眼睛是左右对称的，而不是上下对称得（这个是有问题的，闭上一只眼，还是同样的结果）
2. 因为镜子里面人的左右是反的，上下是正的（等于把题目重复了一遍）

事实上我也想不到一个很好的回答，只把一条条的想法列在下面，欢迎讨论

镜子里的影像的“左右”，如果相对于站在镜子前的人来说，根本没有变化，左还是左，右还是右。所以所谓颠倒的左右，是指镜子里的人的左右跟现实中的人的左右相反
只要镜子放置的位置，能够对于某个参考坐标系“取反”就会产生“颠倒”的效果
所以我觉得是参照物的不同，上下的参照物是地心，左右的参照物是人的中心
对于站在镜子前的情况，地心并未被取反（因为地心跟镜子在同一个平面上）。题目还是有限制的“你在镜子前”，否则如果你站在镜子上，或者把镜子顶在头上，镜子就能颠倒上下
实际上，严格来说，只要镜子稍微偏离一点点，使得地心跟镜子不在同一平面，镜子就能颠倒上下，站在镜子上和头顶着镜子只是一个人能够清楚感受这一点的特例
但是由于“左旋”跟“右旋”始终是镜像关系，所以左右始终是能颠倒的，不论怎么摆放

十一月 11th, 2009 | 分类: 发芽网开发记录 | 5 条评论

网站图标在线生成工具 - Ever the best online favicon creator(Beta)

最近几天搞装修，七拼八凑买到了一个不到五十平的蜗居，暂时先用着吧
等老子有钱了，哼哼…买它两个五十平的，一个留着住，一个拆着玩儿

资金不足的情况下，只能够自己张罗装修得大部分，一个字：忙！

所以这个工具写好一周了，直到今天才有时间把它介绍给大家

下面请我们以隆重的掌声欢迎这份给祖国大妈六十周年庆典的献礼。。。啪啦啪啦
（路人甲：这也能献礼，这不是欺负人家不能拒绝嘛。。。）

这是一个工具
这是一个制作图标的工具
这是一个制作网站图标favicon的工具
这是一个专门制作网站图标favicon的免费在线工具

好吧，废话不多说，关门，放图片：

列一下这个网站图标(favicon)在线工具的功能：

1. 支持铅笔、刷子、直线、方框、填充、魔棒填充（不大容易介绍，自己研究一下就行了）等工具
2. 可以移动整个图片，还有方便的吸管工具
3. 随时可以清除重来，还可以无限回退所有改动操作
4. 支持透明色（就是背后是那种棋格图案的地方）
5. 支持所有主流浏览器：IE/Firefox/Chrome/Safari

实际上，由于功能实在太过于简单，直接去试试就行了，只要记得工具栏最右边的图标是保存并下载就行

后续开发计划
准备这一个月有时间的话，看一下flash和AS3，用它来实现一些图片处理的功能

后续的功能主要有：

1. 从图片导入图标：上除图片或者打开web图片，图片放缩成16×16，然后开始
2. 从已有的网站图标开始创作：输入网址，导入其favicon
3. 生成的图标可以在线共享，在发芽网上永久保留
4. 从已有的图片导入调色板
5. 更大更好更全：支持创建32×32的icon，支持渐变色，支持创建光标文件(.cur)，支持创建动态光标。。。

我很清楚，这些计划里面的大多数都会泡汤，兴趣的转移总是很快的

还没有失去兴趣之前，能做多少做多少吧

实现细节
好了，王婆自夸结束，说一下实现细节：
1. 前端就不说了，就是js+css
2. 后端使用python做的一个array to ico的工具，代码共享在代码发芽网上了，有兴趣的自己去看看

关于浏览器的不兼容，前面已经抱怨过了，这次忍不住又出来抱怨一下：

先说说IE: 速度慢，贼慢，现在还没有时间调performance，不知道到底是啥原因。
另外，它支持设置css的background-position属性，但是不支持获取这个属性。
要想获取的时候，必须先要得到background-position-x，再得到background-position-y，然后组合起来。。。

相关讨论参见：Fix for background-position in IE

再说说Firefox: 速度适中，但是不能直接设置和获取background-position-x/y。
写多了web页面的人都知道css sprite是怎么回事吧，不能用直接设置、获取-x/y，意味着你先要获取background-position，然后通过字符串解析出x和y，然后改变其中一个值，再组合起来设置回去。。。

相关讨论参见：Background-position-y, firefox-fails!

最后说说Chrome: 速度飞快，流畅的就像本地程序一样，支持background-position，也支持单独的-x/y。似乎一切都很完美。

但是当我把鼠标光标变成自定义光标(cursor属性)的时候，比如油漆桶工具，鼠标就得用个油漆桶样式的，鼠标的焦点(hotspot)就在油漆桶下面的尖尖上，但是这个hotspot的设置在chrome下是没有用的，它会固执的认为(0,0)才是真正的hotspot！

而且，不同于前面说的IE和Firefox的bug，没有办法可以绕过。

对于方框和划线工具来说，这是很不爽的-鼠标点击了的某个格子，实际却作用在了左上角的格子上…
无奈之下，只好写了一段代码判断浏览器，对于Chrome进行特殊处理，用系统的cursor来代替。。。

简单的应用，居然引出这么多的浏览器bug，说明准守w3c css3的标准是多么重要啊…日！

十月 16th, 2009 | 分类: 发芽网开发记录, 思维像发情的猴子 | 1 条评论

在题库发芽网上试用了Google Ajax Search API

题酷发芽网在每个题目页面的右侧边栏底端都可以看到相关题目，这是最近对Google Ajax Search API的一次尝试。

插播一条广告：

欢迎订阅题酷发芽网的两个RSS：最新题目 & 最新回答

关于Google Ajax Search API，不多说，自己看链接里面的内容，或者简单理解为：让你的网站都可以拥有Google那样快的搜索速度！

当然，前提是：Google索引了你网站的内容，而且是最新的，这个好办，做个sitemap就行了，有了这个，Googlebot抓的很勤劳的，Django自带了一个sitemap组件，很好用

另外，在题库发芽网的首页上，你可以看到右上方有个小小的搜索框，在里面输入“球”然后回车，你就来到了题酷搜索结果页面里面，上面啥也没有，但是在右侧边栏最下面，你可以看到许多结果。

你还可以试试在那个Google搜索框里输入想搜索的内容，呵呵实时相应的哦。

另外：如果你在题库发芽网上发过帖子的话，可能会注意到那里也有Ajax应用 - 比如你可以输入“二叉树”，然后按Tab把焦点挪到内容输入框，就会出现已经存在的相关问题列表，主要用来防止重复发文。

这个也是仿Stackoverflow的功能，Stackoverflow针对的是英文内容，只要mysql端支持full text search就可以做到，但是对于中文内容来说，还需要分词以及mysql中文匹配插件，做起来很费劲，就暂时用Google Ajax API替代了。

最后，关门，放代码：

JavaScript语言: 打算用在题库发芽网中的：基于Google API搜索同类内容

/*
*  How to load jQuery and then use the Search API with it.
*/
 google.load("jquery", "1");
 // on page load complete, fire off a jQuery json-p query
 // against Google web search
 function OnLoad(){
   var url = "http://ajax.googleapis.com/ajax/services/search/web?q=华容道游戏%20site:fayaa.com/code/view/&v=1.0&rsz=large&callback=?";
   $.getJSON(url, function (data) {
     if (data.responseData.results &&
         data.responseData.results.length > 0) {
       var results = data.responseData.results;
       var html = "";
       for (var i=0; i<results.length;i++) {
         var r = results[i];
         html += '<a href="' + r.url + '" title="' + r.content.replace(/(<([^>]+)>)/ig,"") + '">' + r.title + "</a><br/>";
       }
       $('#content').html(html);
     }
   });
 }
 google.setOnLoadCallback(OnLoad);