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

  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”的,请自行甄别),看评测,或看源码自行分析

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

英文字体反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">

前端SEO需知

不会?看同行怎么做。

  1. 通用
    1. 使用CDN等,提高网站访问速度
  2.  <head>
    1. 合理的title,content,description,其中
      • title在不同页面可以不同
      • description切忌堆砌关键词
  3. <body>
    1. 使用语义化的标签
    2. 代码符合W3C规范,用linter以validator来验证之
    3. 重要的内容放前面,因为搜索引擎抓取的数据长度有限制
    4. 重要内容不用JavaScript输出,Landing Page不做PWA等,做静态网页
    5. 图片必须加alt属性
    6. 有空把ARIA也做上

JavaScript面试题(36):逻辑运算符的与跟非的返回值

// 只要“||”前为falsy,返回“||”后面的值
// 只要“||”前为truthy,返回“||”前面面的值
// 只要“&&”前为falsy,返回“||”前面的值
// 只要“&&”前为truthy,返回“||”后面面的值
// “||”跟“&&”都遵从短路原则,也就是,只要确定前面的值,就可以确定返回值
// 这样处理可以节约计算资源,毕竟
// 或“||”的含义是其一为真即为真,否则为假
// 与“&&”的含义是两者为真才为真,否则为假
// 另外,
// “&&”先于“||”执行,同类运算符的话,从左到右执行
{
function stepper(stepMe){
  stepMe.forEach( item => {
    let result = eval(item)
    console.log(`${item} ===> ${result}`)
  } )
}

const OR = [
  "1 || 2"
  , "0 || 1"
  , "false || false"
  , "0 || 0"
  , "false || 0"
  , "NaN || NaN"
  , "NaN || null"
  , "null || NaN"
  , "null || null"
]

const AND = [
  "false && false"
  , "false && 0"
  , "0 && false"
  , "NaN && false"
  , "null && false"
  , "null && NaN"
  , "NaN && null"
]

stepper(OR)
stepper(AND)
}
// “&&”优先于“||”
console.log(1 || 'string' && 2)
// 上面的代码等于
// const andFirst = 'string' && 2
// console.log(1 || result)
console.log(0 || 1 || 2) // 1, 略
console.log(1 && 2 && 3) // 3, 略

via 孟坤博客via穆乙

GIF/斗图/表情包/emoji工具

流行的.gif格式:.gif格式是当前最流行的表情包格式。其实.webp等也可以,但是平台支持上不如.gif格式。

制作工具:.gif格式与.svg一样,可以通过Adobe Photoshop以及Adobe Illustrator来制作。另外,动态二维码一般也是用的.gif格式。

纯粹说.gif格式的工具没啥好说的,因此带上表情包一起说。

  1.  现成/库
    1. 站长素材 > 表情
    2. 斗图啦
    3. U表情包
  2.  在线制作
    1. 装逼神器 > 表情制作 by 随风博客
  3. 其他(非表情):
    1. 鬼畜字符生成器 by 孟坤工具箱
    2. Emoji Mosaic
    3. EmojiBuilder