work-tip

工作上小技巧

面試相關

• https://github.com/yangshun/front-end-interview-handbook/blob/master/Translations/Chinese/questions/javascript-questions.md
• https://dev.to/lydiahallie/interactive-javascript-quiz-2-4pi1?fbclid=IwAR2oe2achGzTqjUk8RhRdWYjfP_qZGeAVyjHwn6ZP0IM7olbylX1mKEENWM
• https://github.com/lydiahallie/javascript-questions

看過的 Source Code

• IntersectionObserver/polyfill/intersection-observer.js
• vue/src/core/util/env.js

需要做筆記

• JavaScript 疲劳终极指南：我们行业的真相
• CSS技巧之'text-justify'
• 去其糟粕，取其精华——我如何重拾对 JavaScript 的爱 -
  • functional javascript
  • replace for loop, break, switch
• 八段代码彻底掌握Promise
• JavaScript核心概念归纳整理

演算法

0. 演算法 - 每日練習
1. 演算法
2. https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-TW.md

Javascript

ECMAScript

• ECMA-262-3 in detail

ES6 example

• es6-features

從瀏覽器多進程到JS單線程，JS運行機制最全面的一次梳理

• 從瀏覽器多進程到JS單線程，JS運行機制最全面的一次梳理

Prototype

• 原型基礎物件導向
• Javascript 原型中的哲学思想
• JavaScript 的 constructor 、 prototype 和 proto 屬性
• js中__proto__和prototype的区别和关系？
• 該來理解 JavaScript 的原型鍊了

Other

• By value vs by reference 前往
• Javascript分号，加还是不加？前往

s = function(x){return x}
(1 + 2).toString()
// parse to 
s = function(x){return x}(1 + 2).toString()
// so we can to 
s = function(x){return x}
;(1 + 2).toString()
// we often to see 
;(function(){
// ...
})();
// 在 function 的前面加了一个分号，目的就是为了防止整个函数的返回值作为参数送入上一条语句之中。

Js Api

• Date 前往

• Fullscreen

  • fullscreen api
  • Display fullscreen website using javascript (Internet Explorer/Safari/Chrome/Firefox)

• Animatie 前往

• js 常用api背诵

• 常用API合集

Vanilla

• The Basics of DOM Manipulation in Vanilla JavaScript (No jQuery)
• 不可错过的javascript迷你库

Promise

• 透彻掌握 Promise 的使用，读这篇就够了
• 從Promise開始的JavaScript異步生活
• 八段代码彻底掌握Promise

Async Await

1. [Javascript ES7 Async Await 聖經
2. JavaScript 好用的 async 異步函數！
3. JavaScript async/await 的奇淫技巧
4. Callback Promise Generator Async-Await 和异常处理的演进

非同步

• 非同步

1. 剩余参数
2. 扩展语句

String

1. replace
2. search

Angularjs

1. directive 區別 $eval, $parse 和 $observe

• 參考 angular-infinite-scroll

Vue

• VueCheatSheet

  • vuex-cheatsheet
  • vue-cheatsheet

• Vue 插件開發

• Vue.js 组件编码规范

• 提高 webpack 构建 Vue 项目的速度

• 如何写一手漂亮的 Vue Axios

  • Axios 入門配置
  • Axios 源碼解析
  • Axios源码深度剖析 - AJAX新王者

• Vuejs-tips

  • Always declare your data before use it
  • Reactive dynamic properties - use $set
  • vue中的$set
  • Vue2.0 源码阅读：模板渲染
  • Vue2.0 原始碼簡析：
  • delete index

Js Api

• 个迷你vue库，虽然小但功能全面，可以作为想了解vue背后思想以及想学习vue源码而又不知如何入手的入门学习资料。

• 入門 vuex

Highcharts

1. Highcharts API 文档 v5.0.7

Public API

1. Public APIs

Css

• 基礎觀念

square

• 纯 CSS 实现自适应正方形

Cursor

• Cursor Style

Layout

• CSS Grid VS Flexbox: A Practical Comparison

Grid

• Grid Garden is a game for learning CSS grid layout
• A Complete Guide to Grid
• auto-fit vs auto-fill

Flexbox

• Flexboxdefense
• Flex 基礎文章
• Flex 比較深入的文章
• Flexbox 佈局

css variables

• CSS 变量教程

css bugs

• CSS keylogger：攻擊與防禦

SVG

• A Guide to SVG Animations (SMIL)

RVM

• How can I remove RVM (Ruby Version Manager) from my system?

Laravel

• Laravel

zsh

• zsh环境变量失效问题 - 編輯~/.zshrc文件，在開頭添加一下配置

export PATH=$HOME/bin:/usr/local/bin:$PATH
source $HOME/.bashrc
source $HOME/.bash_profile

Tip

1. css-protips
2. Let’s Look at 50+ Interesting CSS Properties & Values

Unix

1. 7个你可能不认识的CSS单位

Webpack

CommonsChunkPlugin

1. CommonsChunkPlugin
2. HTML-WEBPACK-TEMPLATE 參數設定
3. 看清楚真正的 Webpack 插件

Prettier

• Prettier

Git

• git-tips - Git的奇技淫巧

mobile 坑

1. 移动端上遇到的各种坑与相对解决方案
2. 腾讯2016公司代码报告总结 - 主要看 video 播放的部分

ESLint

1. 详解 ESLint 规则，规范你的代码

緩存

1. 九种浏览器端缓存机制知多少

bash

1. bash-guide

• set variable for output
  • 來源1
  • 來源2

OUTPUT="$(ls -1)"
echo OUTPUT

AppleScript

AppleScript Basic AppleScript Loop

• iterate list

set usergroup to {user1:{name:"Darth Vader", role:"leader"}, user2:{name:"Yoda", role:"instructor"}}
repeat with member in (usergroup as list) -- the member variable contains a record
    display dialog (name of member)
    --display dialog (role of member)
end repeat

DevTool

• DevTips
• Chrome DevTools: A Modern Front-End Workflow - video and slides available for my Render Conf talk

1. Setting > General > Show rulers 下可以啟用尺規，當滑鼠停留在控制台顯示的某個元素上或者選中一個元素的時候，會顯示出來。
2. Select element > Break on > subtree modification ​ ​ ​ attribute modification ​ ​ ​ node removal 代表監聽底下所限定的條件，非常好用。

• inspect animations
• Memory problems

Ruby on Rails

0. 為你自己學 Ruby on Rails

MatterJs

0. Matter.js 2D 物理引擎试玩报告

React

0. 大型高性能React PWA如何消除各类性能瓶颈？

javascript es6

0. 深入理解ES6中的解构

Nginx

• 了解 Nginx 的基本概念

Architecture Scenarios

• Architecture Scenarios

WebGL && Three.js

• 图解WebGL&Three.js工作原理

UX

• uxdesign.cc
• design-better-data-tables

Cheatsheet

• Terminal Cheatsheet for Mac (Basics)

Rails

• Rails 命令列

Service-workers

• Understanding Service Workers

HTTP

• HTTP1.0、HTTP1.1和HTTP2.0的区别

Google Tag Manager

• Bind UserId Data to GA

npm additional shorthand

• npm i --save pkg => npm i -S pkg
• npm i --save-dev pkg => npm i -D pkg
• npm test => npm t
• npm ls --depth 0 (list installed packages)
• npm ls -g --depth 0 (list installed global packages)
• ./node_modules/.bin/ (execute local mode_module path)
• npm repo
• npm home
• npm docs
• npm version
• npm search
• npm info/view version

Frontend-Cheat-Sheets - Sheets

Notification

• 利用 JavaScript 實作瀏覽器推播通知

Opensearch

• Opensearch

Robots.txt

• [SEO優化 解決Googlebot 無法存取網站上的CSS和JS檔案

Android

• 用 ConstraintLayout 解決鍵盤擋住輸入框及按鈕

MessageChannel

• 理解 MessageChannel

Koa

• koa-router

postgresql

• 官方文件
• How to use PostgreSQL in Nodejs

面試

• 80% 应聘者都不及格的 JS 面试题

Apple Developer Update

• What's New in Safari

Http-cache

• 循序漸進理解 HTTP Cache 機制
• HTTP-Caching