一、前言
up主2019年畢業，找了一份前端工作，一直幹到現在。2019年末出現疫情，三年的時間，也差不多與我的職業生涯完全重合了。剛過去的2022年，我也沒有避開陽的命運（這病毒是真的強），就12月這一個月時間，幾乎全公司都淪陷了。而就在我臥病等待陽康的日子裡，新聞上不斷播放著某某30歲年輕人死於新冠，某某醫生死於新冠等噩耗。我有點慌了，不是以前那種感慨一下就拋擲腦後的感覺，而是真的開始想象自己哪天會不會突然被這病毒乾死。
至此，我帶著些許惶恐開始回憶這一年我做的事情，工作上的、生活上的、感情上的。這一年我確實選擇了做更多自己感興趣的事，但結果有好有壞。生活似乎真的就像無情的怪獸，它總會見縫插針地奪走一些你珍視的東西。但也會像聖誕老人一樣，帶給你一些意想不到的禮物。
二、擁抱開源
前端人一定是對開源最重視的人群之一。整個前端的生產力基本上都被開源專案包攬了。作為一個前端，可能超過一半的時間都是在用或者研究別人的庫和框架。也就是說，你職業生涯可能花了一大半的時間在別人的開源專案上。
值得一提的是，2022年我參與了一些自認為比較有意義的開源專案，並且也幫助了一些人。
MDN
MDN可以說是前端工程師的百科全書了，我自己也經常在裡面去查一些知識點和API。
機緣巧合，在一次使用CSS屬性backdrop-filter的時候，我發現元素竟然出現了層級不對的情況。通俗點說就是明明感覺應該是A元素在上面，B元素在下面，但卻是A被B覆蓋了。於是想不明白的我就去MDN查資料，主要就是層疊上下文的知識點。而在MDN列出的屬性中，並沒有說明backdrop-filter會形成層疊上下文。於是我只好去W3C查backdrop-filter屬性的內容，找到了如下一句話:
A computed value of other than none results in the creation of both a stacking context [CSS21] and a Containing Block for absolute and fixed position descendants, unless the element it applies to is a document root element in the current browsing context.
Note: This rule works in the same way as for the filter property.
意思就是這個屬性同filter一樣，會建立層疊上下文。OK，至此應該就破案了，MDN並沒有把這個屬性列出來。為了驗證這個說法是否真的是正確的，於是我又開啟了Edge的3D View功能，裡面可以清楚地看到當前頁面所有元素的層疊情況。果然不出我所料，同W3C描述一致。
於是我就給MDN提了一個issue，告訴了他們我的想法，然後提了Pr提交了修正的內容。
官方人員回覆如下:
內容是說他們也親自測試了一遍，確實如我所說，感謝我能發現並fix這個問題。
雖然並不是非常大的貢獻，但我相信很多和我一樣遇到這個問題的人，再次去查MDN的時候，他們就能瞭解其原因並解決他們的問題了。
Parcel
parcel應該也有不少小夥伴用過或者聽過，是一個非常簡潔和快速的前端構建工具，用途和Webpack、Vite差不多。我是在開發瀏覽器外掛的時候，開始使用這個構建工具進行開發的。
在開發外掛的過程中，我發現一個小問題，就是parcel打包出來的檔案總是會帶上hash值，並且還是無法去掉的。官方的解釋是為了更好的最佳化和瀏覽器快取策略。但是開發過外掛的小夥伴應該都知道，在manifest.json檔案中，我們需要給一個固定的檔名稱，所以如果檔名中會帶上隨時變化的hash值，顯然是不可行的。於是我去翻閱了下parcel的文件，發現支援自己編寫parcel外掛，可以自行處理檔名稱。為了避免重複造輪子，我想應該有別人寫好的外掛了吧，但是我翻了一圈沒找到有用的。想了想幹脆自己寫一個吧。於是寫了一個外掛叫parcel-namer-hashless，並且釋出到了NPM上。我也為此寫了一篇文章講解如何去掉parcel檔案的hash值
利用外掛去掉Parcel2打包檔案的hash值
果然有人和我遇到相同的問題，慢慢開始有其他人開始使用這個外掛，現在github上已經有28個倉庫在使用這個外掛。用的基本上都是老外，國內用parcel的人還是很少的。
這個過程中還發生了一件有趣的事，我在parcel官網搜尋外掛的時候，發現有天官網進不去頁面了。進去就報錯，於是我去提了個issue，並且把parcel官網的程式碼拉了下來，發現是一個請求的引數錯誤導致頁面報錯，無法渲染。然後提了Pr，順理成章成了Parcel官網的貢獻者。
這兩個是我認為最值得分享的參與開源專案的經歷，也是比較有意義的。
如果思否也算開源的一部分的話，2022獲得了第三季度的TopWriter也是我認為比較有意義的一件事。傷心的是思否寄給我的紀念品被被人偷走了。
三、開始創造
前端們一定都很羨慕尤雨溪這種程式設計師吧，準確的說是創造者。他們創造新的東西，打造自己的產品和聲望，同時還能掙不少的錢。
其實我一直很羨慕那些獨立開發者，他們不僅有技術，有執行力，更有別人不具備的想法和創造力。我是隻有一點技術，也有一點想法和創造力，但執行力一般般，綜合起來就覺得自己可能並不能成為一個獨立開發者。但是也不能一棒子打死自己吧..
2022年4月，我將自己寫的瀏覽器外掛釋出到了Chrome Web Store上，名叫Video Roll。
本來這只是我自己看影片用來解決一些影片體驗問題的外掛，而且本身功能就很小眾，應該是個需求量非常小的功能。但是我還是想著邁出第一步，把它作為一個產品來打造。想法就是開源+釋出到外掛市場。於是我找來好朋友兼同事，幫我設計了一個比較漂亮的logo。然後我開始打磨這個小外掛。從UI配色、互動，到單元測試、官網，我都一人做完。成功釋出後的一個月內，基本上沒什麼人用，這也在我的預料之中，畢竟功能這麼小眾。接著到了7月份左右，開始每個月有200個左右的使用者增長了。到了年底，已經有了2000多個使用者。我開始也覺得2000個也不多啊，但是直到我去檢視了Chrome的官方統計，使用者超過1000的外掛數竟然不到10%時，我就有點開心了。並且外掛還收穫了非常多的好評，谷歌5分的滿分，我的使用者讓我一直維持在4.9左右。然後在10月份，獲得了Chrome官方認證的精選外掛, 還進入過幾次“效率”類外掛的推薦頁。說實話，從最開始對這個小產品的預期來說，這波確實已經出乎了我的意料。雖然開源過後github star並不多，但作為一個瀏覽器外掛，周活使用者已經足夠說明它是個有意義的產品了。我也寫過一篇文章介紹它：
Video Roll升級，一款小眾瀏覽器外掛最佳化你看影片的體驗
我還給它做了一個年終總結
這個經歷也讓我更加堅定了自己做產品的決心，2023年我會打造一個從大學開始就很想做的東西，是個與音樂影片相關的東東，也希望能幫助更多的人。這個過程中如果能掙點外快當然是更好的，到時候再來思否和大家分享。
這裡和大家分享一句B站遊戲UP主描述《我的世界》中說的話“如果創造比競技更有趣，那為何創造不能成為遊戲的主體？”
四、看開工作
2022之前的我，經常會為了幾個bug搞得心煩意亂，滿腦子都是任務期限、需求、問題單等等。工作在無形之中給了我一些壓力，讓我覺得本來挺感興趣的職業，有時候竟然這麼煩人。但是2022之後，我慢慢開始調整了心態，不再去糾結於那些零零散散的bug，不再去糾結於任務排期，不再去糾結於頻繁變更的需求。這讓我慢慢從工作的泥潭中掙脫了出來，把它當作工作和職業，工作中你就是打工者，你是來掙錢的，所以就要按照別人的要求來。想通了這點，工作中遇到的任何問題都不是問題了，能解決的就解決，實在無力解決的，換個地方即可。
五、享受生活
大學畢業後就幾乎沒怎麼玩過遊戲的我，在陽了之後，竟然在Steam上花了幾大百買了遊戲。嗯，空閒時間我開始玩遊戲了。當我再次進入遊戲世界的時候，才發現原來我已經快兩年沒有這樣一個人如此認真地玩遊戲了。那種心無旁騖、毫無雜念，只想做任務通關的感覺，像極了剛開始做前端，願意花一個通宵來調CSS樣式的感覺。那種做完任務後，立刻想開始探索下一個關卡的感覺。
這是工作很難帶來的感覺，是隻有去玩遊戲、去運動、去旅遊、去看電影，才能有的興奮和幸福感。當我們處在這個保持健康都成為問題的社會中時，讓自己開心才應該是生活的主旋律。希望看到這篇文章的朋友們也能保持健康，多多享受生活。
本文參與了 SegmentFault 思否年度徵文「一名技術人的 2022」，歡迎正在閱讀的你也加入。