自定义li的css样式

li的默认样式有几种,我们想要自定义li的样式,例如定义颜色或者显示的图标,以下是操作的两种方法。

方法一:

修改的原理,取消list默认的style,并通过伪元素before来设置新的样式。

1
2
3
4
5
6
7
ul {list-style: none}

li::before {
content: "•"; color: red;
display: inline-block; width: 1em;
margin-left: -1em
}

特殊符号的一些输入可使用Unicode编码:• = “\2022”, ◦ = \25E6” and ▪ = “\25AA”

方法二:

修改的原理,通过自定义的class来区分标点和文字的颜色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.listStyle {
color: red;
}

.listStyle p {
color: black;
}

<ul class="listStyle">
<li>
<p><strong>View :</strong> blah blah.</p>
</li>
<li>
<p><strong>View :</strong> blah blah.</p>
</li>
</ul>

参考:

开源协议系列之GPL

这个系列文章会收集和翻译一些常用的开源协议,方便对开源代码使用的考虑因素,本文为GPL协议。

阅读更多

开源协议系列之Mozila

这个系列文章会收集和翻译一些常用的开源协议,方便对开源代码使用的考虑因素,本文为Mozila协议。

阅读更多

开源协议系列之Apache

这个系列文章会收集和翻译一些常用的开源协议,方便对开源代码使用的考虑因素,本文为Apache 2.0协议。

阅读更多

开源协议系列之BSD

这个系列文章会收集和翻译一些常用的开源协议,方便对开源代码使用的考虑因素,本文为BSD协议。

英文版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
* Copyright (c) 1998, Regents of the University of California
* All rights reserved.
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
*
* * Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* * Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
* * Neither the name of the University of California, Berkeley nor the
* names of its contributors may be used to endorse or promote products
* derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE REGENTS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
* DISCLAIMED. IN NO EVENT SHALL THE REGENTS AND CONTRIBUTORS BE LIABLE FOR ANY
* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

中文版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
* Copyright (c) 1998 著作权由加州大学董事会所有。著作权人保留一切权利。
*
* 这份授权条款,在使用者符合以下三条件的情形下,授予使用者使用及再散播本
* 软件包装原始码及二进位可执行形式的权利,无论此包装是否经改作皆然:
*
* * 对于本软件源代码的再散播,必须保留上述的版权宣告、此三条件表列,以
* 及下述的免责声明。
* * 对于本套件二进位可执行形式的再散播,必须连带以文件以及/或者其他附
* 于散播包装中的媒介方式,重制上述之版权宣告、此三条件表列,以及下述
* 的免责声明。
* * 未获事前取得书面许可,不得使用柏克莱加州大学或本软件贡献者之名称,
* 来为本软件之衍生物做任何表示支持、认可或推广、促销之行为。
*
* 免责声明:本软件是由加州大学董事会及本软件之贡献者以现状提供,
* 本软件包装不负任何明示或默示之担保责任,包括但不限于就适售性以及特定目
* 的的适用性为默示性担保。加州大学董事会及本软件之贡献者,无论任何条件、
* 无论成因或任何责任主义、无论此责任为因合约关系、无过失责任主义或因非违
* 约之侵权(包括过失或其他原因等)而起,对于任何因使用本软件包装所产生的
* 任何直接性、间接性、偶发性、特殊性、惩罚性或任何结果的损害(包括但不限
* 于替代商品或劳务之购用、使用损失、资料损失、利益损失、业务中断等等),
* 不负任何责任,即在该种使用已获事前告知可能会造成此类损害的情形下亦然。

参考

开源协议系列之MIT

这个系列文章会收集和翻译一些常用的开源协议,方便对开源代码使用的考虑因素,本文为MIT协议。

英文原版:

The MIT License (MIT)

Copyright (c)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

中文译文:

MIT 开源许可协议

版权所有 (c) <年份> <版权持有者>

特此向任何得到本软件副本或相关文档的人授权:被授权人有权使用、复制、修改、 合并、出版、发布、散布、再授权和/或贩售软件及软件的副本,及授予被供应人 同等权利,只需服从以下义务:

在软件和软件的所有副本中都必须包含以上版权声明和本许可声明。

该软件是”按原样”提供的,没有任何形式的明示或暗示,包括但不限于为特定目的和 不侵权的适销性和适用性的保证担保。在任何情况下,作者或版权持有人,都无权要求 任何索赔,或有关损害赔偿的其他责任。无论在本软件的使用上或其他买卖交易中, 是否涉及合同,侵权或其他行为。

参考

JavaScript国际化方案i18next的入门使用

JavaScript中实现国际化的方案有不少,从github上star数较多的选择角度,选择了i18Next库,生态比较全。

i18next的官方教程文档不够明了,记录一下入门使用,主要是加载自定义的多语言json文件。

拷贝官方的实例

1
https://github.com/i18next/jquery-i18next/blob/master/example/sample.html

将官方的实例放入Web服务器上,通过浏览器可直接访问。

此时的文字内容是通过js代码直接定义的,若是要添加其他的语言,直接在resources中添加即可。

增加对多语言json文件的支持

引入插件xhr backend

增加xhr配置项:

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
{
// path where resources get loaded from, or a function
// returning a path:
// function(lngs, namespaces) { return customPath; }
// the returned path will interpolate lng, ns if provided like giving a static path
loadPath: '/locales/{{lng}}/{{ns}}.json',

// path to post missing resources
addPath: 'locales/add/{{lng}}/{{ns}}',

// your backend server supports multiloading
// /locales/resources.json?lng=de+en&ns=ns1+ns2
allowMultiLoading: false,

// parse data after it has been fetched
// in example use https://www.npmjs.com/package/json5
// here it removes the letter a from the json (bad idea)
parse: function(data) { return data.replace(/a/g, ''); },

// allow cross domain requests
crossDomain: false,

// allow credentials on cross domain requests
withCredentials: false,

// define a custom xhr function
// can be used to support XDomainRequest in IE 8 and 9
ajax: function (url, options, callback, data) {}

// adds parameters to resource URL. 'example.com' -> 'example.com?v=1.3.5'
queryStringParams: { v: '1.3.5' }
}

使用xhr:

1
2
3
4
5
6
import i18next from 'i18next';
import XHR from 'i18next-xhr-backend';

i18next
.use(XHR)
.init(i18nextOptions);

增加json文件

增加json翻译文件:

1
2
3
locales/en/translation.json
locales/zh/translation.json
locales/dev/translation.json

切换语言

切换多语言,切换之后需要再调用localize函数。

1
2
3
4
5
6
var lan = i18next.language;
i18next.changeLanguage(lan == 'zh' ? "en" : "zh", (err, t) => {
// resources have been loaded
console.log("changeLanguage success: " + i18next.language);
$('.translation').localize();
});

缓存的问题

v1.4.1版本增加查询参数,可以控制浏览器的缓存。

使用方法:在配置项中增加以下的版本配置。

1
queryStringParams: { v: '1.3.5' }

【全文完】

–update 2017.5.14
增加v1.4.1版本的查询参数配置说明

2017年阅读清单

技术类
[x] 《CSS实战手册》
[x] 《JavaScript DOM编程艺术》
[x] 《JavaScript高级程序设计》
[x] 《Vue权威指南》
[x] 《HTML & CSS: Design and Build Website》
[ ] 《HTML5实战手册》
[ ] 《HTTP权威指南》
[ ] 《Linux: 鸟哥的私房菜》
[ ] 《计算机的构造与解释》

人文历史类
林语堂系列
[x] 《说话的艺术》
[ ] 《京华烟云》
[x] 《武则天正传》
[x] 《老子的智慧》
[x] 《从异教徒到基督教》
[x] 《笑傲江湖》

经济类
[x] 《财务自由之路》-波多 舍费尔
[x] 《投资中最简单的事》

其他
[x] 《人生目标清单》
[x] 《一生的计划》
[x] 《一万小时天才理论》
[x] 《疯狂的站长》
[ ] 《网站致富》
[ ] 《编程人生》
[x] 《断舍离》
[x] 《怀孕圣经》
[x] 《爱的艺术》
[x] 《深度工作》
[x] 《The Power Of Less》

感悟:
今年一年读了不少书,有一部分是精读,有一部分是略读;读书的场所,前半年主要在
地铁上居多;读书的媒体,kindle居多,其次是纸质,再次为电脑。
相对于年初计划的书单,增加了几本和技术无关的书籍。

今年读过比较推荐的几本书:
1、《CSS实战手册》,讲了很多CSS的实战技巧,可以学到很多东西。
2、《JavaScript高级程序设计》,前端js基础,准备18年继续刷一遍前6章。
3、《老子的智慧》,浓缩了林语堂老先生对道教老庄思想的总结。
4、《从异教徒到基督教》,林语堂老先生对各个宗教信仰的对比。
5、《断舍离》、《深度工作》、《The Power Of Less》,主要讲工作效率和方法的。

不推荐的书:
1、《Vue权威指南》,水分比较多,内容主要来自于官网的文档。

【全文完】
2017.12.24更新

收集一些好用的BT站点

收集一些好用的BT站点,方便平时的学习和交流:)

  • Mininova 网址 http://www.mininova.org/
    特点:东西比较多资格比较老,地球人都知道资格老的总能排第一位。
    种子数量较少。

  • The Pirate Bay 网址 http://thepiratebay.org/
    特点:东西比较多而且有中文,找东西方便,可惜速度有点慢。(最近官司不断,希望海盗湾能坚持下去!)

  • SumoTorrent 网址 http://www.sumotorrent.com/
    特点:速度比较快,可惜更新稍微慢一点。

  • SeedPeer 网址 http://www.seedpeer.com/
    特点:分类比较清晰,种子比较一般。

  • VeryCD共享 网址 http://www.verycd.com/
    特点:这虽然不是BT站点,不过考虑到Bitcomet现在已经可以支持电驴种子了,中国的P2P站点应该没有比它的资源更加丰富了吧,可惜驴子跑的太慢,不如叫电马好了,马应该跑得比驴快,呵呵。

  • 圣城家园 网址 http://www.dream2008.cn/
    特点:游戏种子比较多,喜欢游戏的可以到这里下载。

后续有遇到好的站点,再更新。。。

【全文完】