前端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

JavaScript的非主流平台

除了浏览器,Node.js这些主流JavaScript平台,我们还有:

好玩的前端(3):TamperMonkey(JavaScript本地注入)

官方表示没有很谦虚:

Tampermonkey is the most popular userscript manager, with over 10 million users. It’s available for Chrome, Microsoft Edge, Safari, Opera Next, and Firefox.

TamperMonkey有正经的社区,还有不正经的社区,如Sleazy Fork(一个专门分享成人网站脚本的社区)。

如果你之前没有想过给网站注入JavaScript,那么TamperMonkey会给你打开一道新世界的大门。如果你不满足于TamperMonkey,不妨看看Chrome Extension,它将给你更多的浏览器APIs。

我的JavaScript最初就是在给网站写脚本的时候学的

好玩的前端(2):Stylish(CSS本地注入)

官方说明很好

Customize any website to your color scheme in 1 click, thousands of user styles with beautiful themes, skins & free backgrounds.

比起其他玩具,Stylish强大之处在于:
1)hackable:你可以用Stylish来给Stylish写样式,Cool
2)sociable:Stylish有强大的社区,你可以下载别人的样式表
3)ad-blockable:通过Stylish(display: none !important)来去广告的方法没有网站去屏蔽

我的CSS最初就是通过Stylish学的

 

好玩的前端(1):Bookmarklet / 小书签 / 书签小程序

维基百科讲解得很好:

小书签(bookmarklet),又叫书签小程序,是一种小型的程序(Applet),以网址(URL)的形式被存为浏览器中的书签,也可以是网页上的一个链接。小书签的英文名,Bookmarklet是由Bookmark和Applet组合而来。无论小书签如何以什么形式储存,它们都是用来对浏览器或是网页添加一些特定功能的。点击时,小书签会执行这些操作,包括执行搜索,导出数据等等。小书签一般是JavaScript应用程序。

例如debugCSSdiagnostic.cssrevenge.cssVisual ARIAHTML_CodeSniffer。再如:

data:text/html, <html contenteditable>

 

前端Chrome扩展(Extensions)

不要依赖于工具。:-)

  1. 审计
    1. Web Developer
    2. Web Developer Checklist
    3. WAVE Evaluation Tool
  2. 审计:ARIA
    1. Accessibility Developer Tools
    2. Chrome Accessibility Collection
    3. aXe
    4. tenon.io(非插件)
  3.  网络
    1. 代理管理:SwitchyOmega
    2. UA欺诈:User-Agent Switcher for Chrome
    3. 本地API:Postman
    4. 请求头欺诈:Referer Control
  4. 渗透
    1. 技术栈分析:whatruns || Wappalyzer
    2. 地理位置等:Shodan
  5. 注入(非渗透)
    1. JavaScript:TamperMonkey || Violentmonkey
    2. CSS:Stylish
  6. 其他:
    1. 代码美化:JavaScript and CSS Code Beautifier
    2. URL简化:Bitly
    3. 图片转Data URI:Image to Data URI
    4. QR Code读取:right-click QRcode reader
    5. 字体查询(基于图片):WhatFontis.com right click shortcut
    6. 字体查询:WhatFont
    7. 标签静音:Mute Tab Shortcuts
    8. Cookies管理:Swap My Cookies
  7. 框架:
    1. Vue.js devtools
    2. React Developer Tools