2018 年终总结

职业篇

博客

之前博客系统一直用的 Ghost,然而 Ghost 的新版在vps上升级迁移遇到很多问题,后来索性自己用 nodejs 写了一个,基于 nextjs。

翻译文章

花了一周的闲余时间,翻译了 maintainable css,访问地址 http://maintainablecss.wtser.com/

真的是好久没翻译文章了。

生产力

研究与学习

算法学习

经典排序算法总结与实现

JS家的排序算法

业务相关

  • 给自己取了一个英文名 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:containhtml元素上使用,可以阻止导航滚动操作
    • 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 完)
    • 多个项目的时间管理安排
      • 尽量避免多个项目穿插进行
      • 人员调配

娱乐篇

电影电视剧

  1. 大佛普拉斯
  2. 有话好好说 Keep Cool 1997
  3. 燃烧
  4. 底特律 我欲成人
  5. 末代皇帝
  6. 红海行动
  7. 西部世界 S2
  8. 诚邀辣妹:网络性与爱
  9. 西游记女儿国
  10. this is us s2
  11. 雌猫们
  12. 奇迹男孩
  13. 斯大林之死
  14. 挚爱梵高
  15. 异形:契约
  16. 逃出绝命镇
  17. 小丑回魂
  18. 恐惧支配
  19. 校合唱团的秘密
  20. 短暂的婚姻
  21. 去他妈的世界
  22. 熔炉
  23. 黑镜 第四季
  24. This is us season2
  25. 移动迷宫2
  26. 红高粱
  27. 移动迷宫3
  28. 逃离
  29. 与神通行
  30. 雷神3
  31. 三块广告牌
  32. 神秘巨星
  33. 奇门遁甲
  34. 大世界
  35. 好极了
  36. 中邪
  37. 请以你的名字呼唤我
  38. 相亲相爱
  39. 唐人街探案2
  40. 废城记
  41. 电锯惊魂1-7
  42. 江湖儿女
  43. 美人计
  44. 反贪风暴3
  45. 爆裂无声
  46. 升级
  47. 动物世界
  48. 沙海
  49. 李银河的52堂性学课
  50. 逃避可耻但有用
  51. 血观音
  52. 毒液
  53. 特工
  54. 李茶的姑妈
  55. 人生一串

游戏

  1. 青蛙旅行
  2. Getting Over It
  3. 中国式父母

阅读篇

  1. 解忧杂货店
  2. What if
  3. 二十世纪的教训

    根据我的看法,选举应该是这么回事:我们不是让新政府合法化,而是评判旧政府的表现如何——投票日那天是旧政府缴成绩单的时间。

  4. 原子弹设计
  5. 重来2
    • 人们的工作方式从“同步”协作变成了无须同步的协作。
    • 分布式员工团队(distributed workforce)
    • 最适合远程办公的脑力工作,比如写作、编程、设计、客户支持(先列举这几样),跟残酷的利润大战都没什么关系(制造业就属于这种)。
    • 我们发现,判断工作质量的最好方法,就是在正式雇用员工、给他们分配许多工作之前,先让他们试做一点。
    • 想要在工作中不被人忽略,有两种最基本的方法。第一个就是吵吵闹闹,弄出点动静来。第二个就是在工作中取得进展,交出漂亮作品。幸运的是,对于远程员工来说,工作质量最重要。
  6. 学习之道
  7. 活着
  8. 自卑与超越

    侧重讲述婴幼儿时期父母教育对孩子的影响

  9. Your past experiences are blinding you

    你的经验会束缚你

    1. 为啥会有 『偏见与歧视』

      只有放下执着才能去实现任何事情。

      It’s only after we’ve lost everything that we’re free to do anything.

      即便是那些大师级的人也无法找到最好的方式来取胜,因为他们擅长的地方束缚了他们的思想。

      Even these masters couldn’t see the best way to win because the one they knew so well colonised their mind.

      人们很难脱离自己的舒适区。处于对未知的恐惧,他们倾向于呆在自己熟悉的地方。

      People have a hard time letting go of their suffering. Out of a fear of the unknown, they prefer suffering that is familiar”

    2. 如何摆脱偏见

      再次成为一个初学者

      Be a beginner again

      初学者的思想充满了许多的可能性,但是专家就少了许多

      In the beginner’s mind there are many possibilities, but in the expert’s there are few”

      初学者思想不是说要反对经验,而是在我们用经验应对新状况时应保持的一种开放的思想。

      Beginner’s Mind doesn’t mean negating experience; it means keeping an open mind on how to apply our experience to each new circumstance.