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的簡寫,如果你只想控制其中一個方向的滾動行爲,可以使用其中的某一個屬性。

娛樂篇

電影電視劇

  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.

未完待續...

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章