月份: 2014-08

新浪微博图片缩略图规则

 新浪微博在用户上传图片后,会对图片进行处理,生成不同版本的缩小图,以适应各种客户端的需求。图片分为 large、bmiddle、small、thumbnail、square 五种尺寸,在需要相应大小图片时,只需要对图片 url 的该段进行替换即可:

/large/:

原图。

/bmiddle/:

当原图宽度>440 像素时,则按比例缩小图片使得宽度=440 像素。当原图宽小于440像素时,则直接原图。高度无关。

/small/:

规则类似 thumbnail,尺寸为 200 像素。最小断点未测试,猜测为 60 像素。

/thumbnail/:

1. 当长宽比例< 120:35.5 时,比例缩小到长和宽均不大于 120 像素,即:竖长图缩为高120像素,横长图缩为宽120像素;

2. 当比例≥ 120:35.5 时,即当按比例缩放时,一边满足 120 像素另一边尺寸小于 36 像素,则进行特殊处理;

2.1 竖向图片,缩放为宽 36 像素,然后从顶部往下截取 120 像素的部分作为 thumbnail 图;

2.2横向图片,则重新缩放,以120像素为高度,截取左边的120像素作为宽度,形成一个 120×120 的正方形 thumbnail 图。

3. 当原图片长宽均小于 120 像素,不处理。

/square/:

按比例缩小到长宽中的较小值等于 80 像素,然后再对另一边进行居中裁切,使得两边都等于 80 像素。

sinapic-size

vmware下ubuntu虚拟机与宿主机共享文件夹

0.已经安装 VMware Tools。这个不写了。

1. 在 VMware 里开启共享文件夹,指定主机的共享目录。图为 Windows 宿主机,Mac 类似。

vmware-sharefolder-host

2. 在 Ubuntu 终端下进行 mount,mount 的目标最好选择容易通过文件管理器能够到达的目录。毕竟这个共享文件夹的 mount 和光驱之类的硬件 mount 不太一样,顺手最重要。我用的是 ~/vmshare 目录。输入代码:

Ubuntu-2014-08-25-01-53-16

这时候打开文件管理器,就已经可以看见主文件夹(home)下已经有一个 vmshare 的目录了。

3. 鼠标拖动该目录到桌面,先不要放手。按住 Alt 键,光标会变成一个带问号的小手,这时再松开鼠标,会弹出一个菜单询问你的操作。选择 “链接到此处” 项,如图:

Ubuntu-2014-08-25-01-58-07

这样,共享文件夹就在桌面建立了一个快捷方式。你在 vmware 里设置宿主主机共享目录,在 Ubuntu 虚拟机下也可以方便地看到了。如果主机没设置,这个目录里就为空。

vmware-sharefolder-sync

PS:要去掉这个共享目录(虽然我想不明白为啥要去掉),使用命令:

就可以了,~/vmshare 就是你自己挑选的路径。

写了个 Mac 键盘当练习了

围观地址: https://github.com/kaikaiiiiiii/mac-keyboard  用了一些简单的 CSS,最后看起来效果还不错。

缘起是想给自己写个在 mac 下通过 alt/shift+alt 加内容键可以直接输入的符号列表,后来想想要不就做个键盘得了。最后效果就如下图了。

1. 功能键区的图标用的是 http://fontawesome.io ,不过依然有些图标找不到,暂空。F8 的图标是两个 fa 图标拼的。F1/F2 的图标比较写意,也不是完全一致。

2. 通过 :active 伪类添加了按键点下时的效果,包括:

(1) 底色变全黑 #000; (默认颜色是#333;)

(2) 位置右移 2 像素,下移 2 像素。

3. 通过 Transition 添加了“回弹”的效果。

4. 通过两个像素的 Border-bottom 效果,强调了按住 alt/shift+alt 后可以直接输出的字符。

5. Transition 在表现“回弹到原位时”,必须明确地添加 left:0px; top:0px; 以使得动画的计算有终点,否则 transition 是不起效果的。这个坑了半个多小时,遍查不到,突然自行顿悟。

6. 通过 -*-user-select: none; 让按钮在双击时,上面的字符不至于被选中。

7. css 的类还是分得很细的,键长、宽、upper、lower、keyname、altkey、shiftaltkey 等都是单独的类。当然 .space 的 width 就只能单写了这个没办法。

8. jQuery 还在学习中所以这个项目到这里就结束了。

pic

Ubuntu 安装 Oh my zsh

>>这里<< 写了如何在 Ubuntu 桌面版下安装 oh-my-zsh 的命令行,但经实验以后发现最后几步存在问题。作个笔记:

1. 首先安装必要的软件包:

2. 下载别人写好的 oh-my-zsh 安装脚本并自动执行安装

3. 更换终端 Shell 到 zsh (其实这里开始就有问题了,我这步用的别的办法,简单好用,疗效显著)

4. 重启,显然只是为了让系统保存设置。

 

问题在于,第三步时经常会出现什么 PAM 未验证之类的问题。网上查的原因五花八门,解决方法也各异,挨个试过来,有时有效,浪费时间。

我用的办法很简单。

终端 – 菜单 – 编辑 – 配置文件首选项 – 标题和命令 – 运行自定义命令而不是 Shell(N) – 自定义命令:zsh

如图:

Ubuntu-2014-08-25-00-54-44

补充:

开始使用服务器后,这种方法就无效了。如果 sudo chsh 依然无效的话,可以 vim /etc/passwd,然后搜索 bash,并替换为 zsh,算是暴力解决方案。

补充:禁用升级提示

You have to add DISABLE_AUTO_UPDATE="true" on your .zshrc before the source $ZSH/oh-my-zsh.sh line. By doing so, oh-my-zsh will just skip the update checking script.

编辑 /etc/motd 添加 SSH 登录留言

Linux 奇技淫巧

编辑 /etc/motd 可以为 SSH 登录添加留言。任何用户通过 SSH 登录时都会看到这个留言。

motd-SSH留言文本

理论上是支持任何语言,因为能否正常显示完全取决于终端,而非系统自身。比如 Ubuntu 本机登录就会显示乱码:

motd 乱码

而在 Ubuntu-desktop 环境下,由于加载了中文支持,终端就又能正常显示中文了。

Ubuntu-2014-08-25-02-18-37

网页布局设计脑图

点击查看原图。

网页布局设计简列脑图

自己写 UI 的几点总结:

自己写 UI 的几点总结:

  1. CSS2.x 很简单,更接近于图像处理软件的设计思路。CSS3 引入不少逻辑化与动画式的表达,想来会逐步考验设计人员的技术功底。CSS 3D……算了不提。
  2. HTML5 则进化/退化到“语义标签”了,相应的样式控制越来越少。不过语义定义逻辑还不是很完善。
  3. 如果一个html标签完全没有和外观相关的属性,八成是个HTML5新增标签。
  4. JQuery很好用,能不用就不用。这句话不是病句。
  5. 懒惰是人类进步的原动力,所以学 less 代替 CSS,用 Emmet 写 html,找各种代码补全和片段插件。
  6. 事前规划很重要,但下笔成章更多出现在胸有成竹的大牛身上。我这种需要的效果还要现查的新手,只能靠着自动刷新一点点慢慢调。
  7. 尽管只能慢慢调,还是得事前规划,事后重构。所以新手写代码要写两遍,一遍实现,一遍重构。重构才是程序员的良心。
  8. 好的前端,必须是又能抠腚,又能抠图。
  9. Axure、UIDesigner、Mockup、Sketch、Photoshop、Illustrator、CorelDraw、Briefs、BluePrint、Flinto、OmniGraffle、XMind……以上这些一个没用到。工具只是工具,用哪个只取决于习惯与熟练。
  10. 自己设计自己实现,纸笔最趁手,不服来决斗。
  11. 好书值得付费购买,好软件也是。
  12. 95% 以上的时间在查找和学习实现办法,实际生产时间不到 5%。所以大牛和新手的薪资差 20 倍只是起步价。
  13. 时间和质量永远是难以平衡的矛盾。
  14. 大屏显示器比笔记本小屏提升 20% 效率,双屏提升 50% 效率,如果桌子够大就放三屏,左屏查资料,中屏写代码,右屏实时预览。四屏就再加一屏资料,五屏就再加一屏资料,六屏就再加一屏资料……想想都醉了。
  15. 快捷键提升效率,固态硬盘提升效率、Everything 提升效率、关掉不用的窗口提升效率,其实每样都只提升几秒钟,关键是不再打断思路。
  16. gitk 是个好东西。
  17. 践行 U Can U Up, No Can Learn Up,多学点东西,转头忘也没关系。反正不 Up 也是躺尸床上玩手机。
  18. 想不出来的时候打两盘星际虐虐疯狂电脑,二十来分钟。打完就可以睡觉了,反正还是想不出来。
  19. “做出来”这个过程还是很爽的,根本停不下来。
  20. 我恨 IE。

黑板报第七期:约瑟夫斯环

前东家任研究院 PM 期间做的一些黑板报,主要目的是普及基础数学概念。离职了,只出了短短五期,第六期写到一半,回头把已经成文的也贴上来。

作者一气成文,一字未改。

第七期:约瑟夫斯环(2.8MB)

第七期:约瑟夫斯环

黑板报第五期:无穷

前东家任研究院 PM 期间做的一些黑板报,主要目的是普及基础数学概念。离职了,只出了短短五期,第六期写到一半,回头把已经成文的也贴上来。

作者写了 A C 两部分,B、D 及小黑板报是我写的。

第五期:无穷(3.0MB)

第五期:无穷

第五期:无穷

黑板报第三期:递归

前东家任研究院 PM 期间做的一些黑板报,主要目的是普及基础数学概念。离职了,只出了短短五期,第六期写到一半,回头把已经成文的也贴上来。

作者提供了述事题材,内容全部重写。小黑板报自己写的。

第三期:递归(3.0MB)

第三期:递归

第三期:递归