2018 年终总结

职业篇

博客

翻译文章

生产力

• 在项目中使用了 stylelint ，peritter 等工具，统一代码风格，提高代码质量。

• iterm2 插件
https://xiaozhou.net/learn-the-command-line-iterm-and-zsh-2017-06-23.html
alias
alias gs="git status”
alias gitclean="git branch -vv | grep ' gone]’ | awk ‘{print $1}’ | xargs git branch -d”
快速跳转
使用 d 这个命令，列出最近访问过的各个目录
目录名简写与补全
比如我们要进入到 ~/workspace/src/dict，我们只需要输入每个目录的首字母就行，然后再 TAB 键补全
重复上一条命令
输入 r ，可以很便捷的重复执行上一条命令。
zsh-autosuggestions
https://github.com/zsh-users/zsh-syntax-highlighting
https://github.com/zsh-users/zsh-autosuggestions

• 了解了一些 tmux 相关的知识点，但是缺少实践。
http://harttle.com/2015/11/06/tmux-startup.html http://kumu-linux.github.io/blog/2013/08/06/tmux/ http://cenalulu.github.io/linux/tmux/ http://wdxtub.com/2016/03/30/tmux-guide/
Tmux 使用手册

研究与学习

业务相关

• 给自己取了一个英文名 English name Finn

• 参与公司的一个 SPA 项目，react，学习了 redux state 相关的知识。

• SVG use with External Source

  <svg viewBox="0 0 100 100"> <use xlink:href="defs.svg#icon-1"></use>
  </svg>

https://css-tricks.com/svg-use-external-source/
But, the external resource way doesn’t work in any version (up to 11 tested) of Internet Explorer. Even the ones that do support inline SVG: 9, 10, 11.
https://github.com/jonathantneal/svg4everybody
It works like this:
1. If the browser is IE 9, 10, or 11 (User Agent sniff, but that’s the whole point here).
2. Ajax for the SVG file referenced
3. Find the needed bit, based on the ID referenced (e.g. #icon-1)
4. Inject that into the <svg> on the page

• 简单的跑马灯

• 使用 picture 元素实现 图片的 response
srcset only use for mobile img
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

  <picture>
   <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
   <img src="mdn-logo-narrow.png" alt="MDN">
  </picture>

• overscroll-behavior 解决 modal 滚动带动底下页面滚动问题
比较拙的解决方案就是给body添加overflow:hidden，但这有可能会影响我们的操作，甚至影响你浏览你的页面。
CSS 的overscroll-behavior，这个属性有三个可取值：
• auto：其默认值。元素（容器）的滚动会传播给其祖先元素。有点类似 JavaScript 中的冒泡行为一样
• contain：阻止滚动链接。滚动行为不会传播给其祖先元素，但会影响节点内的局部显示。例如，Android 上的光辉效果或 iOS 上的回弹效果。当用户触摸滚动边界时会通知用户。注意，overscroll-behavior:contain在html元素上使用，可以阻止导航滚动操作
• none：和contain一样，但它也可以防止节点本身的滚动效果

overscroll-behavior 属性是 overscroll-behavior-x 和 overscroll-behavior-y 的简写，如果你只想控制其中一个方向的滚动行为，可以使用其中的某一个属性。

• 编写自定义视频播放器
https://www.w3.org/2010/05/video/mediaevents.html
fullscreen api
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
https://github.com/sindresorhus/screenfull.js
bug in safari

element:fullscreen{
  }

针对被全屏的元素 (如果 element 是 iframe，:-webkit-full-screen-ancestor:not(iframe) {} 在 safari 不生效)
safari
iframe webkitIsFullScreen aways return false
event webkitfullscreenchange e.target return document when exit fullscreen

• 一点开发的体验感受和想法
• 需求 基本来自客户 （需求评审）
• 功能点评审估时
• 后端的功能需求基本是清楚的
• 前端还存在很多需要细化的地方【例如响应式】）（前端评审 2+个前端）
• 尽量避免前后端在同一分支开发
• 建立分支用 feature-frontend
• 避免了冲突 总是需要 git pull —rebase 问题 （就我一个人开发 还时不时被 push reject）
• （不理解分支都懒得建的想法）
• 功能还未完善就去测试了
• （信息不对称） 测试不知道这个功能是否已达到测试标准？PM？
• （信息不充分）有些功能或样式是产品那边未定义，技术未做实现或者做了简单的处理，QA 主观感觉是 bug，直接 assign 给开发。
• 没有定义，界面没有混乱，无法明确界定是 bug 的，仅仅是主观感受不爽，应该先 assign PM
• pm 应该在 QA 测试之前进行 review
• 若依然遇到被 assign 此类问题直接 assign PM
• issue 修复后，再次测试 速度不够理想，基本来回个 2-3 天 （能否做到在第一 1 天修复 issue，第二天 review 完）
• 多个项目的时间管理安排
• 尽量避免多个项目穿插进行
• 人员调配