(个人)常用开源证书备忘

  1. WTFPL(What The Fuck Public License),什么鬼证书,公有
  2. (GNU) GPL(GNU General Public License),引用我库的产品需要使用GPL开源
  3. MIT(Massachusetts Institute of Technology),麻省理工学院证书,引用我库的产品的证书里面需加上我的名字
  4. CC系列(Creative Common):
    1. CC0,公有
    2. 其他参见creativecommon.org

选择开源前端框架的那些事

  1. 确认自己的需求
  2. 不要听意见
  3. 参考数据
    1. 流行程度:github星数
      1. 注意:
        1. 中国程序员人数技术大,他们偏好对github影响很大
        2. 一个框架的github星数跟(你工作地区对它的)市场需求量没有必然联系。一般来说,生产中经常会用比较成熟的技术,但不一定是github上流行的技术,比如jQuery
    2. 人力市场需求:到招聘平台上以你考虑的框架的名字作为关键词,看该框架被提及的次数
    3. 项目资金来源:比如React是Facebook的,Angular是Google的,Vue.js是赞助商的
      1. 注意:资金稳定只能肯定项目会存在,但是流不流行,好不好用,性能好不好,与之无直接联系
    4. API的稳定性:Angular 1.0与2.0变化较大
    5. Docs的条理性:自己去看吧
    6. 社区的活跃度:新插件的数量,插件的github星数,社区里问题有没有得到解答
    7. 框架的性能:看benchmark(比如“rawgit.com”的,请自行甄别),看评测,或看源码自行分析

本人选框架的方法很简单,项目官网是否符合我的审美。:)

网购那些事

我喜欢跟别人说,我是一个淘宝一切的人。其实不然,我不过是知道网购往往效率更高,也经常网购而已。

  1.  二手网购(如闲鱼)平台的常见的
    1.  恶劣买家套路
      • 货到就刀:买家收到货物后挑刺,要求降价(刀),但是拒绝退货。如果卖家不肯降价(接刀),买家就故意损坏货物或调包
      • 知假买假:淘宝/闲鱼等禁止售假的平台,在货物确实为假货的情况下,平台会同意买家的“仅退款”的请求。更有甚者,会买假货调包
      • 引导错发:买家会直接拍,然后跟卖家搞好关系,得到卖家非交易平台官方的联系方式,然后通过这些联系方式让卖家直接发货到非订单地址,然而系统上的订单地址没有变。交易平台看来,卖家没有发货到约定的地址,卖家可能是骗子
    2. 恶劣卖家套路
      • (网上)直接交易:卖家以系统问题等为由,引导买家到平台外交易,一般是发货前求要求全额付款(前100% T/T)。
      • 当面交易(又称,面交):卖家开出诱人的价格并引导买家当面交易,当面交易时,通过人势来恐吓买家,强买强卖。或在(电子)产品里做猫腻,后续联系卖家加费

via 什么值得买

亲爱的,周末干嘛(32-36)

32. 做阿猫阿狗的表情包
用自己家或者朋友家的猫狗等宠物做素材,做一套反应你与你伴侣现状(如缺点与痛点等)自己共同的理想生活状态的表情包。或者上Youtube等看funnest cat  vides,funny shiba inu(柴犬,也就是doge)取材。

33. 扔掉家里的旧东西,买点贵的更符合两个人审美的替代品

比如,衣架,桌子,拖鞋,雨伞,牙刷,垃圾桶。

34. 让家里天花飞满氦气球

一罐氦气可能还不够。省心一点,气球都买同一种颜色的好了。飘满套套好像也是挺好玩的。

35. 一起练习书法

买一张很大的水写布写。建议用医用酒精代替水,挥发快一点。

36. 去二人的故乡各种一棵果树

英文字体反FOUT的策略

由于(英文)字体下载需要一定的时间,主流浏览器会先用本地的字体来渲染文字,等到指定的字体下载好之后再渲染一次字体。用户会看到FOUT(Flash Of Unstyled Text)现象,影响体验。

个人认为最佳的解决方案是:1)首次访问用户,字体内联化并缓存字体;2)二次访问用户,调用缓存

@font-face {
  font-family: 'CustomFont';
  src: url(data:font/woff;charset=utf-8;base64,<base64 string>) format('woff');
  font-weight: 400;
  font-style: normal;
}

Windows 10自带base64编码解码命令行工具。

$ base64 --help

另外,相关的CSS规则font-display 浏览器支持得还不太好(2017.10)。

中文字体的好世代还没有到。

 

via CSS font-display: The Future of Font Rendering on the Web && Inline Web Font to Avoid FOUT

JavaScript知识拾遗(1-2):MouseEvent、isArray()

  1. MouseEvent的mouseover/mouseout(前者)与mouseenter/mouseleave(后者)的对比
    • 前者兼容性更好
    • 前者会冒泡而且会捕获子元素的事件,后者不
  2. isArray()
    if(Array.isArray([true])){
      // doing nothing
    }else{
      Array.prototype.isArray = function(obj){
        if(typeof obj === 'object'){
          return Object.prototype.toString.call(obj) === '[object Array]'
        }else return false
      }
    }

HTML知识拾遗(9-10):全局属性(Global attributes)之translate、tabindex,HTTP请求方法

  1. 全局属性
    <!-- translate -->
    <!-- yes表示该元素以及其子元素的innerText在本地化
      的时候需要被翻译,no反之 -->
    <p translate="yes">中文很美</p>
    <p translate="no">你也很美</p>
    <!-- tabindex -->
    <!-- 看MDN吧 -->
  2. HTTP请求方法
    OPTIONS,客户端要求服务器告知它所支持的请求方法
    GET,客户端要求服务器返回指定的数据(含响应头与数据主体)
    HEAD,客户端要求服务器仅返回响应头
    POST,客户端发送数据给服务器
    TRACE,网络诊断用,略
    PUT,客户端要求服务器写入/覆盖指定的数据
    DELETE,客户端要求服务器删除指定的数据

HTML知识拾遗(8):全局属性(Global attributes)之accesskey、contenteditable以及lang等

只涵盖部分,详见MDN

<!-- accesskey -->
<!-- 做大app的时候可能会用到,不同浏览器对accesskey的处理很不一样 -->
<a 
  href="http://www.foo.bar"
  accesskey="m"
>
 Try Pressing Alt and KeyM on Chrome
</a>
<!-- conteneditable -->
<!-- 下面是开发者常见的用法 -->
<data:text/html, <html contenteditable>
<!-- 网页内的用法 -->
<p contenteditable="true">
  Edit Me
</p>
<!-- dir -->
<!-- text direction,文本的方向,中文网页不怎么用的到吧 -->
<p dir="rtl">for Arabic</p>
<!-- spellcheck -->
<p spellcheck="true">chek for mistakes</p>
<!-- lang -->
<!-- 
  不妨参考清风轩的文章,或者上知乎。
  很多网友讨论得很学究。
  但是,W3C如何规定,跟搜索引擎怎么排名没有必然联系。
  (据说,)谷歌是不管lang属性的,百度估计也一样。
  但是,保守起见,抄你行业内的龙头老大的做法吧。
  另外,有些读屏软件会用到这个属性。
  最后,有的网站会在html上写lang属性,
  有的会在一个<meta>上写。
  PS,网上有不少过期信息,比如W3Schools
-->

<!-- 360的用例,这个是最认真的了 -->
<!Doctype html>
<!--[if lt IE 7 ]><html class=ie6 lang="zh-cn"><![endif]-->
<!--[if IE 7 ]><html class=ie7 lang="zh-cn"><![endif]-->
<!--[if IE 8 ]><html class=ie8 lang="zh-cn"><![endif]-->
<!--[if IE 9 ]><html class=ie9 lang="zh-cn"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="modern" lang="zh-cmn-Hans"><!--<![endif]-->
 
<!-- 豆瓣 -->
<html lang="zh-cmn-Hans">
 
<!-- 维基百科中文版、淘宝、QQ.com的用例 -->
<html lang="zh-CN">
 
<!-- 百度、百度百科、京东、搜狐、新浪、网易、优酷、天猫的用例 -->
<!-- 我们没用啊 -->
 
<!-- 知乎、纽约时报中文网的用例 -->
<html lang="zh">
 
<!-- 注意,谷歌香港/台湾切换语言后,
  lang的值会变,不一一列举 
-->
<!-- 谷歌台湾 -->
<html lang="zh-TW">
<!-- 谷歌香港,繁体 -->
<html lang="zh-HK">
<!-- 谷歌香港、谷歌中文、FT中文网,简体 -->
<html lang="zh-CN">
 
<!-- 支付宝用例,好像搞错了吧, “en”? -->
<html lang="en">