小名开开

在春天的光影里喘息

1、用火电的力度大点,声音偏暖;用水电的声底偏冷,但解析力很高。 水电中,以葛州坝的电音色最好;火电中,以北仑电厂的电音质最好(因为烧的无烟煤的比例最高)

2、同一套器材,晚上8点到10点的时候音色就感觉有点偏冷,晚上11点之后声音明显偏暖。 后来才发现高峰电用的是外省的水电,低谷电以本地火电为主,铁证如山!

3、风力发的电层次感很差,听感朦胧,听柴可夫斯基的A大调B小调,音场明显收缩,小提琴部都混在一起。

4、风力发电的单机功率在500w以下的音色都偏薄。

5、电是三相和两相和音色关系不大,关键是平衡感。 三相电播放大编制的交响乐阵脚明显比两相的要稳!核电适合播放《终结者》之类的大片伴音。 但遗憾水、火、风、核电都并在了国家电网上了,所以放什么声音都是混论一片。

6、有位烧友为此从上海搬家到广州,声音好很多。 因为南方电网以大亚湾核电和两广水电为主,音响既有力度,又比较清澈。 最近准备投资建设独立不并网的雅鲁藏布江水电站,高山雪原的天水将使音响脱胎换骨,但科研报告遭到印度的反对。

7、太阳能发电有何不同?声音偏向温暖,不冷,但是有点薄。

8、不久前,我一位朋友,国内最资深的耳机发烧友,一日试听铁三角AT-HA25D耳放配AD2000耳机,听着听着突然摘下耳机说今天没法听了,一定是水电站的水位又涨了,令在场其他烧友目瞪口呆!第二天果然报道山洪爆发,小丰满水电站水库水位暴涨,达到1953年来的最高水位,要知道辽宁电网只有1%的电力来自小丰满!

四座皆惊,以为神耳!

今天搞定了如下形式的 Zen Coding:

1
2
3
4
5
6
7
<div>
<p><a href="">Goodbye my lover</a></p>
<p><a href="">You are Beautiful</a></p>
<p><a href="">Stay the Night</a></p>
<p><a href="">No Tears</a></p>
<p><a href="">If time is All I have</a></p>
</div>

即之前文章中提出的,当时搞不定的基于指定内容,而非基于通配符 “$” 的多重扩写。

Lesson 7:

在 Sublime Text 2 下,由于其 Koan 输入框只输入一行,貌似必须先写好对应需要的文字内容,按行写: ——是的,我这里用了“貌似”两字。

然后全选文字:

在全选文字的基础上,Ctrl+Alt+Enter 写入 Zen Code:

注意那个乘法,后面并没有跟上数量。因为数量是由所需内容的行数决定的。

这节课我们学习了:

  • 一个称之为 缩写包裹 的技巧,用以解决特定内容下的多行代码生成。
  • 与 $ 生成的编号共存的方法。

至此,差不多 Zen Coding 的内容就完成了,剩下的时间翻翻 CheatSheet 就可以应付绝大部分需求。毕竟 Zen Coding 只是一种快速完成常规工作的方式,对于复杂内容,还是需要工程师借助更强大的软件完成。

总结一下知识图:

Over。

博客使用了 Crayon Syntax Highlighter 插件实现代码框的一些高级功能,不光光是 Highlight。这个插件提供了不少自定义功能和数个预置配色方案,如果还不满意,就自己调整源码 css 和 js。

这也是目前唯一启用的插件。

关于 Zen Coding:

其实还有很多没有解决的 Zen Coding 写作问题,比如:

使用 a:link 可以生成<a href=”http://”></a>,虽然感觉上这个应该可以比较简单地实现,但目前能想到的唯一办法也还是 a[href=”http://kaikai.men/\]。

  • 如何快速生成包含多个不同内容且不能用 $ 通配的形式

比如:

1
2
3
4
5
6
7
8
9
10
11
<table>
<tr>
<td>周一</td>
</tr>
<tr>
<td>周二</td>
</tr>
<tr>
<td>周三</td>
</tr>
</table

目前实现的 ZC 代码是 table>tr>td{周一}+td{周二}+td{周三},尝试使用 table>tr>td*3{周一}{周二}{周三} 和 table>tr>td{周一}{周二}{周三}*3 均无法获得想要的效果,不知道还有没有其它的好办法。

读了一遍 Zen Coding 相关内容,写个教程当作给自己的回顾。

使用的是 Sublime Text 2,安装了 Package Installer 插件与 Zen Coding 插件。Windows/MAC 下均使用 Ctrl+Alt+Enter 调出 Koan(即 Zen Coding 的专用输入框)输入需要的内容。有兴趣的还可以去查一下 Koan 的意思,挺有内涵。

先看下面这段代码:

1
html>body[FONT-SIZE=12px]>((table[border=1 cellSpacing=0 cellPadding=2]>tbody>(tr>td[rowspan=8]+(td>str)*3)+(tr>td*3)*7)+br)*2+table[border=1 cellSpacing=0 cellPadding=2]>tbody>tr>td*2

这段代码等于下面这段代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<html>
<body FONT-SIZE="12px">
<table border="1" cellSpacing="0" cellPadding="2">
<tbody>
<tr>
<td rowspan="8"></td>
<td><strong></strong></td>
<td><strong></strong></td>
<td><strong></strong></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<br>
<table border="1" cellSpacing="0" cellPadding="2">
<tbody>
<tr>
<td rowspan="8"></td>
<td><strong></strong></td>
<td><strong></strong></td>
<td><strong></strong></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<br>
<table border="1" cellSpacing="0" cellPadding="2">
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

Let’s begin.

Lesson 1:

首先是一个网页文件的最基本结构: <html>、<head> 和 <body> 标签:

这节课我们学了:

  • 元素会自动扩充为对应的两个 html 标签
  • > 代表下级结构
    • 代表同级结构

Lesson 2:

我们继续扩充结构,在 <body> 下添加了两个 <div> 块,分别放进了一定数量的段落。

这节课我们学到了:

  • 复习 + > 的作用
  • 学习了括号的作用。

Lesson 3:

我们继续添加内容:

这节课我们学习到了:

  • # 设置该元素的 id,用于 css 表
  • . 设置该元素的 class,用于 css 表
  • * n 可以用来代替 n 个重复元素 +++ 的操作

Lesson 4:

我们重新来一遍,这次插入了表格,充分玩了一次花活,还加了点新东西:

这一课我们学到了:

  • 充分利用多层括号和乘法来快速生成大量代码
  • {} 代表往该元素内填充可见内容
  • $ 作为数字通配,一个 $ 代表一位数字

Lesson 5:

我们发现,表格的边框很不好看,我们需要加一些 Style:

这节课我们学到了:

  • [] 添加元素属性,可以加很多属性哦

Lesson 6:

重复代码太多了,我们应该用 css 精简代码,用页内 css 吧,然后我们还要把 html 再规范一下:

这节课我们学到了:

  • 对于部分元素(style),代码扩充会参照给定的特殊规则
  • : 用来选择部分元素的分支,比如 html:4t、html:xml 等
  • {}、[] 等都可以嵌套多层,最外层为 Zen Coding 功能符,里面的均为普通字符,所以你可以直接插入 {}、[] 到生成的 html 代码里

六分钟六课时,到此结束~~~

更多内容,参见 Zen Coding Cheat Sheet

======================= 我是困死了的分割线=============================

最后,Zen Coding 实际上对于需要填充内容的 HTML 文档的语法还不是很完善,比如我希望填入 “周一” 到 “周日” 的序列,就必须通过写七次 “td>str>{内容}” 完成。当然,作为练习 Zen Coding 的技巧而言,一切都是可以接受的。下面,其实也就是文章抬头 Zen Code 的更完整版,是我每周要写的工作周报的 html 源代码,你能写成 Zen Coding 格式么?(正确答案翻到底即可)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<html>
<head>
<style type="text/css">table {border-collapse: collapse; width: 800 px; font-size: 12 px;} table td {border: 1 px solid;}</style>
</head>
<body>
<table>
<tbody>
<tr>
<td rowspan="8">本周工作</td>
<td><strong>日期</strong></td>
<td><strong>工作内容</strong></td>
<td><strong>完成情况</strong></td>
</tr>
<tr>
<td>周一</td>
<td></td>
<td>完成</td>
</tr>
<tr>
<td>周二</td>
<td></td>
<td>完成</td>
</tr>
<tr>
<td>周三</td>
<td></td>
<td>完成</td>
</tr>
<tr>
<td>周四</td>
<td></td>
<td>完成</td>
</tr>
<tr>
<td>周五</td>
<td></td>
<td>完成</td>
</tr>
<tr>
<td>周六</td>
<td></td>
<td>完成</td>
</tr>
<tr>
<td>周日</td>
<td></td>
<td>完成</td>
</tr>
</tbody>
</table>
<br>
<table>
<tbody>
<tr>
<td rowspan="7"></td>
<td><strong>计划工作</strong></td>
<td><strong>优先级</strong></td>
<td><strong>预计耗时</strong></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<br>
<table>
<tbody>
<tr>
<td>产品心得</td>
<td></td>
</tr>
</tbody>
</table>
<br>
<table>
<tbody>
<tr>
<td>小卖部</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

正确答案:

1
html>(head>style{table {border-collapse: collapse; width: 800 px; font-size: 12 px;} table td {border: 1 px solid;}})+body>(((table>tbody>(tr>td[rowspan=8]{本周工作}+(td>str{日期})+(td>str{工作内容})+(td>str{完成情况}))+(tr>(td{周一}+td+td{完成}))+(tr>(td{周二}+td+td{完成}))+(tr>(td{周三}+td+td{完成}))+(tr>(td{周四}+td+td{完成}))+(tr>(td{周五}+td+td{完成}))+(tr>(td{周六}+td+td{完成}))+(tr>(td{周日}+td+td{完成})))+br+(table>tbody>(tr>td[rowspan=7]+(td>str{计划工作})+(td>str{优先级})+(td>str{预计耗时}))+(tr>td*3)*6)+br+(table>tbody>tr>td{产品心得}+td)+br+(table>tbody>tr>td{小卖部}+td)

今天,我学会了如何用 <div> 配合 <iframe> 剽窃别人网站上的内容并且只显示所需,隐藏掉不需要的内容=。=

引用方法更新,请到 <这里> 查看。

对于提供了引用代码的网站来说,无论想把所需的内容引用到微博、校内甚至自己博客上都是非常容易的。之前写的 Warcraft 历代视频那篇博客也作了尝试,非常简单。

但对于没有提供这一功能,且页面功能比一般视听类网站复杂些的网站内容来说,要想引用就显得有点困难了。比如 Bilibili.tv。

Q: 如何把 Bilibili.tv 的视频引用到自己的博客上,且保持弹幕特色完整?

尝试一:显然是找站点自身的对外分享功能了,结果似乎证明他们的 PM 就是不想提供这样的功能……

尝试二:通过关键词找到 KnH 曾经做过一个 KnDanmakuWP v1.0-BETA 的 WP 插件,兴冲冲地下载安装完按说明,在文章中插入吉原哀歌视频的引用代码,结果……失败。再仔细一看,发现该插件自 2011 年 8 月 5 日出道以后就再没有更新过,估计是 bilibili 网站的代码已经更新而插件没有跟上。

尝试三:考虑到插件还有另外一种方式,即引用 B 站弹幕功能同时引用新浪视频,即文字内容和视频内容分开引用的方式。这一方式要求用户自行解析出 B 站视频源的真实地址,于是问题又化归到查看 B 站网页端源代码上了。经搜索后……又失败了。网页代码中标示视频的 cid 无法还原成真实 id,网上有的老教程也都只解释了针对 bid、uid、ykid 等的反演算。显然,B 站为了保持自己的竞争特色(弹幕字幕评论系统),走了一条与通常视听类网站相反的方式,并不追求共享,反而力图通过加密等方式把用户聚到自己的网站下,绝不为他人做嫁衣装。

尝试四:直接 Copy B 站网页源代码。定位播放器代码段以后,把整个 <div>……</div> 内的所有内容直接复制到了博客文章的源代码下。结果……还是失败。原因任何一个前端工程师甚至只要对代码有点理解的小朋友可能都很明白,但以我的这点知识,真的不知道为啥。

尝试五:于是祭出大杀器 —— <iframe>

部分引用不行,那我就把整个网页都搬过来就行了!思路是:

1
<iframe style="width: 569px; height: 440px;" scrolling="no" src="http://www.bilibili.tv/video/av337840/" position = x: 460 px; y : 0 px>

—— iframe 引用整个页面,设置成指定大小,并定位到所需的位置。 当然最后一段 position 那个是假的,因为第五次失败的原因就出在这里。iframe 是没有办法定义内部引用页面的显示位置的。不过到这里,离胜利已经很接近了,因为思路是正确的。

尝试六:(内事问百度,外事翻墙也要问 Google)果然在 Google 上找到了答案。代码如下:

1
<div style="width: 569px; height: 440px; overflow: hidden; position: relative;"><iframe style="position: absolute; top: -460px; left: 0px;" src="http://www.bilibili.tv/video/av337840/" scrolling="no" width = "1000 px" height = "1000 px"></iframe></div>

简单地说,既然 iframe 无法定位内部位置,就让它全部展现(我设置了 1000*1000 px),然后再在外面套上一个指定长宽的 <div>,然后设置遮盖方式,最后再调整 iframe 与 div 之间的相对位置,使得需要显示的部分恰好位于 <div> 之下,如图。当然,中间还涉及一些像素级的长宽位置调整,有个像素尺软件会好很多。

至此,剽窃成功,大功告成回家吃饭。

非常有感的一首歌。吉原是日本最古老的红灯区,调调定的就是柳永般的红粉哀歌,MV 首段黑屏文字也提示歌词有性描写……所以,你懂的!

不过,作为一个外骚内纯的文艺青年,显然我是不会把一曲艳歌挂博客的(放硬盘就可以了),之所以放上来,是觉得,你若能听完,至少也会把它归在“好听的歌”那一类里。而在我这里,这是能归到“洗脑循环反复听”级别的。

于是来兴趣去查了一下:

这首歌是 UTAU 制作的电子音乐,如果你知道 Vocaloid初音未来 曾红极一时的江南 Style 甩葱歌,你就知道这歌也是类似的电音合成人声歌曲了。Vocaloid 本就设计为代替人类演唱,以降低音乐制作成本,这为那些无名新人的音乐制作人提供了极大的方便。事实上,在 iTunes 日本商店里,就能购买到原版电子音乐合成唱声版,只要 150 円哦。

iTunes 链接:https://itunes.apple.com/jp/album/yoshiwara-lamento-single/id570906509

与甩葱歌不同,这首歌是原创歌曲,作者在 MV 里也露了个名:亚绘。而另一位在 MV 里写为小山乃舞世的,则是一位非常技术宅的少女,活跃于动漫网站,至今也只有 19 岁。她一手包办了 MV 的绘画、动画,包办了 UTAU 的电音制作,(事实上 UTAU 的配音也是她……)最后才有了这个神级的 MV。自始至终,两人而已。

于是万般皆备,唯缺唱腔。相比于漂亮的旋律,唯美的 MV,机器发声的歌词就显得非常单薄了。不过,要知道优秀的东西永远不会被埋没,自从这个 MV 被公布到 niconico 上,便立刻引发了各大牌小牌的翻唱风,终于让它近乎完美。巧合的是,公认最好版本的翻唱者 96 猫,也是个 19 岁少女。

96 猫 翻唱版

众头牌混音合唱版( 2 分 45 秒你懂的!)

上歌词:

阴郁天空下 吉原的店家
白色提灯点亮 夜幕垂下
端坐镜前梳妆 红唇描画
有求必应 逆来顺受
那朵闪亮 橙红光芒的花
我曾如此憧憬 渴望着她
不知不觉变成 青蓝的花
即便如此 我也并不廉价

[其实我本想要做一朵 只为你一人独自绽放的花]
[然而 命运却夺取了我的自由]
[它的车轮将我无情地碾压]

明知是充满虚假的恋爱
你也要拥抱着我吗
逢场作戏的哀伤呀
今夜吉原 雨在下
这位大人您喜欢的话
可否就这样将我买下
屋檐外朵朵盛放伞花
湿透的我心中 雨在下

车水马龙行人 各自嬉笑怒骂
姐妹互相安慰 轻舔伤疤
其实我的心中 只有一个想法
有谁能够带我 离开这鸟笼吗

其实 我早已失去了可以回去的家
在这鸟笼里 看到的风景
不知何时却成了 我心里唯一的慰藉

即便这恋爱充满了虚假
也一定要这样买下我吗
在我身上盛开的花朵啊
露珠滴落 如雨下
大人请你与我沉醉在
这仅限一夜的云雨吧
伤痕一道一道刻下
心中一曲哀歌 无处洒
染上忧郁颜色的花渴望着 枯萎了

[欢迎光临]

玩着恋人游戏的那些夜
喘息着「啊啊」做回答
逢场作戏的哀伤呀
今夜吉原 雨在下

明知是充满虚假的恋爱
你也要拥抱着我吗
逢场作戏的哀伤呀
今夜吉原 雨在下

这位大人您喜欢的话
就请这样将我买下吧
屋檐外朵朵盛放伞花
湿透的我心中 雨在下

The Route of Kaikai’s Free-Skating,2012-09-28,全程 17.5 km,总时略小于 2 小时,包含一段 3km 的折返跑(跑错方向了……),大量闲逛拍照和休息时间。——没有体力一次直接跑完全程。

减肥良方,体重至少减 1.5kg,到家还累得吃不下东西直接洗洗睡了……不吃就不会反弹,你懂的。

天安门

天安门广场

On the Road

晚上八九点交通还挺忙,路口等了好一会

快到家了,央视大裤衩

最默认的设置,没玩什么花。

一分钟完成,这次没有遇到任何意外。

一般都认为,考虑到最大的兼容性,favicon.ico 最好使用 16×16 分辨率,以最大程度地提供兼容性。但实际上即使在 IE6 下,使用 32×32 图标也没有任何问题。在需要小图标场合的时候会自动调整大小。而放在桌面上等情况也会自动使用相应大小,我甚至在想是不是要用 256×256,或者更考究点的多层图标……

.ico 并非是个统一标准的格式,多种实际不同的格式定义都被命名为.ico,跟平台有关。这点与 .jpg、.png、.gif 之流不一样。不过实际使用时问题不大,通常不会直接对 .ico 文件进行编辑,都是 .bmp 编辑完成以后再通过特定平台下的工具转成所需的 .ico 文件。以前需要知道转换可能会造成颜色失真,因为当时 Win 下的图标文件最多只支持 256 色,如果从漂亮的真彩色图片直接转过去很可能贼难看。不过现在图标也支持真彩色了,所以连这个问题也不存在了,更新一下转换软件就放心用吧。Win 7 还支持使用 PNG 作为文件夹图标。

Mac OSX 和 iOS 下也一样,App 们已经直接使用 .png 作为图标,更不存在这个问题。

浏览器也可以通过代码定义特定图片为图标,Firefox 甚至还支持定义 Gif 动画图标。

理论上随便玩。

So,问题出来了,当时为何要用专门格式?我猜应该是性能方面的原因吧,不作考证了。

小时候,每当过生日那天,就打理得干干净净,然后去一个影楼照一张周岁纪念照。按年分,开开一周岁,开开两周岁,开开三周岁,开开四周岁,开开五周岁……

后来,这影楼倒闭了……

所以没有六周岁的了……

======================

小时候,是像女孩子一样留长头发的,因为素不喜欢楼下的理发店,手劲特别大,大人不觉得什么,可我孩子一个,总是疼得被弄哭。大人们老是以为我是不喜欢理发,于是也就由着我。

只有当过生日时,会去一家国营大理发店理发。而且也总是同一个老大爷理发师给我理发,粗着嗓门,特别和善。把我从一个小女孩弄回小男孩。然后开开心心去照生日照。

在孩子的世界里,全世界只有两家理发店,那家是地狱,这家便是天堂。

后来天堂倒闭了……

当然,地狱后来也倒闭了……

======================

然后长大一些了,喜欢看书。那时有一家“孔乙己書屋”,特别合我的口味,本本书都是我爱看的。我现在家中一成的书,都是那里买来的。因为志趣相投,还和老板成了朋友,于是就有了免费看书的机会。每天早早起来,就跑去看书,直到中午老爹来找我。如此過了很幸福的一段時光。

后来书店倒闭了……

都叫孔乙己了,能不倒闭么……

======================

再后来,喜欢上了游戏机房与网吧,为避免各种内鬼告密、校方查抄,基本都是在全市的各种居民区黑网吧黑机房打游击。各点还有专门暗号,只有经过加 V 认证的小伙伴才会获准由“老手”带他们去的资格,很不幸,我就是那个制定加 V 方案的小兔崽子。靠着这种实名 SNS 方案,几个核心小伙伴过了很长一段时间无法无天的逍遥岁月。

后来,全国都在闹电子海洛因的事,我们去的几十家,统统倒闭了……

直接一个行业就毁灭了……

======================

(未完待续,待续即是不续)

======================

所以,现在我做着一份还算喜欢有所成长的工作,领着还能养活自己和捡来的流浪小猫买来的长不大小鼠的工资,可是心里总是很忐忑……

0%