End of 2018 summary


Professional articles


Before, the blog system always used ghost. However, the new version of ghost encountered many problems in VPS upgrade and migration. Later, I wrote one with nodejs, based on nextjs.

translate an article

Spent a week free time translating maintainable CSS, visit http://maintainable.wtser.com/

I haven’t translated the article for a long time.


  • In the project, stylelint, twitter and other tools are used to unify the code style and improve the code quality.
  • Iterm2 plug in



    alias gs=”git status”

    alias gitclean=”git branch -vv | grep ‘ gone]’ | awk ‘{print $1}’ | xargs git branch -d”

    Fast jump

    Use the command d to list the most recently accessed directories

    Shorthand and completion of catalog name

    For example, if we want to enter ~ / workspace / SRC / dict, we just need to enter the initial of each directory, and then complete with tab key

    Repeat previous command

    Enter r to repeat the last command easily.




  • I know some knowledge about TMUX, but I lack of practice.


    TMUX user manual

Research and learning

Algorithm learning

Summary and implementation of classical sorting algorithm

Sorting algorithm of JS family

Business related

  • I gave myself an English name English name Finn
  • Participated in a spa project of the company, react, and learned about Redux state.
  • SVG use with External Source

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

    SVG `use` with 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.


    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
  • Simple running lamp
  • Using picture element to realize the response of picture

    srcset only use for mobile img


     <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
  • Overscroll behavior to solve the problem that modal scrolling drives the bottom page to scroll

    The clumsy solution is tobodyAdd tooverflow:hidden, but it may affect our operation or even your browsing of your page.

    CSSoverscroll-behavior, this property has three values:

    • auto: its default value. The scrolling of elements (containers) is propagated to their ancestors. It’s kind of like bubbling in JavaScript
    • contain: prevent scrolling links. The scrolling behavior does not propagate to its ancestor elements, but affects the local display within the node. For example, glow on Android or rebound on IOS. Users are notified when they touch the scrolling boundary. Be careful,overscroll-behavior:containstayhtmlElement to prevent navigation scrolling
    • none: andcontainSame, but it also prevents the rolling effect of the node itself
>The overscroll behavior attribute is a shorthand for overscroll-behavior-x and overscroll-behavior-y. if you only want to control the rolling behavior in one direction, you can use one of these attributes.
  • Write a custom video player


    fullscreen api



    bug in safari


    For full screen elements (if the element is iframe,: – WebKit full screen ancestor: not (iframe) {} does not take effect in Safari)


    iframe webkitIsFullScreen aways return false

    event webkitfullscreenchange e.target return document when exit fullscreen

Entertainment chapter

Film and TV series

  1. Great Buddha Plath
  2. Keep cool 1997
  3. burning
  4. Detroit I want to be an adult
  5. The last emperor
  6. Red Sea Action
  7. Western world S2
  8. Invite hot girls: network and love
  9. Journey to the West
  10. this is us s2
  11. Female cats
  12. Miracle boy
  13. Death of Stalin
  14. Beloved Van Gogh
  15. Alien: Contract
  16. Escape from Jueming town
  17. Clown’s soul
  18. Fear domination
  19. The secret of the school choir
  20. A short marriage
  21. Go to the fucking world
  22. Furnace
  23. Black mirror season 4
  24. This is us season2
  25. Move maze 2
  26. Red Sorghum
  27. Move maze 3
  28. Flee
  29. Pass with God
  30. Raytheon 3
  31. Three billboards
  32. Mysterious superstar
  33. Strange door escape
  34. Big world
  35. Right on
  36. Pathogenic factors
  37. Please call me in your name
  38. Be deeply attached to each other
  39. Chinatown detective 2
  40. Abandoned city records
  41. Chainsaw 1-7
  42. Children of rivers and lakes
  43. Beauty trap
  44. Anti corruption Storm 3
  45. Blowout
  46. upgrade
  47. Animal World
  48. Sand
  49. Li Yinhe’s 52 sex lessons
  50. It’s shameful, but it’s useful
  51. Blood Guanyin
  52. venom
  53. Special agent
  54. Li Cha’s aunt
  55. shadow
  56. A string of life


  1. Frog travel
  2. Getting Over It
  3. Chinese parents

Reading passage

  1. Worry free grocery store
  2. What if
  3. Lessons of the twentieth century

    In my opinion, elections should be like this: instead of legalising the new government, we should judge the performance of the old government – the polling day is the time for the old government to pay its report card.

  4. Atomic bomb design
  5. Come again 2

    • The way people work has changed from “synchronous” collaboration to non synchronous collaboration.
    • Distributed workforce
    • The best brain jobs for telecommuting, such as writing, programming, design, and customer support (to name just a few), have nothing to do with the brutal profit Wars (manufacturing is one of them).
    • We found that the best way to judge the quality of work is to let employees try a little before they are formally employed and assigned many jobs.
    • There are two basic ways to not be ignored at work. The first is to make a noise and make some noise. The second is to make progress in the work and hand over beautiful works. Fortunately, for remote employees, quality of work is the most important.
  6. Way of learning
  7. Alive
  8. Inferiority and Transcendence

    Focusing on the influence of parents’ education on children in infancy

  9. Your past experiences are blinding you

    Your experience will bind you

    1. Why there will be “prejudice and discrimination”

      Nothing can be achieved until you let go of your attachment.

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

      Even those masters can’t find the best way to win because what they are good at constrains their minds.

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

      It’s hard for people to get out of their comfort zone. In fear of the unknown, they tend to stay in familiar places.

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

    2. How to get rid of prejudice

      Become a beginner again

      Be a beginner again

      The beginner’s mind is full of many possibilities, but the experts are much less

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

      The idea of beginners is not to oppose experience, but to keep an open mind when we use experience to deal with new situations.

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

To be continued