轉行做前端的學習心得,深情交流

来源:https://www.cnblogs.com/lyy-1/archive/2020/07/03/13229976.html
-Advertisement-
Play Games

一、Why choose front-end 2012.07畢業後,進了一家游戲公司做運營策劃,寫過營銷方案、做過內容編輯、知道廣告投放和換量,還得兼職產品經理畫原型。 每天9.30-23.00以後,周末經常加班,像無頭蒼蠅一樣碰撞一年後,我沒有任何成就感,我開始思考自己每天做的是什麼,將來會做什麼 ...


一、Why choose front-end

2012.07畢業後,進了一家游戲公司做運營策劃,寫過營銷方案、做過內容編輯、知道廣告投放和換量,還得兼職產品經理畫原型。 每天9.30-23.00以後,周末經常加班,像無頭蒼蠅一樣碰撞一年後,我沒有任何成就感,我開始思考自己每天做的是什麼,將來會做什麼,做的這份工作是自己喜歡的嗎?在這個領域上將來會有所成就嗎? 1、重覆而繁雜 => No,我喜歡專心研磨一個東西,直到做好它 2、各種會議和無數遍的方案修改 => No,我做事的時候不喜歡被打擾,但這並不妨礙我是個喜歡交流的家伙 3、錶面上付出了無數心血的產品,到頭來說不出它哪些地方屬於你 => 很可悲,螺絲釘,物質和精神上都沒有得到回報 4、個人成長,想總結自己畢業一年的提升,除了滿口的流量、DAU、PV等辭彙和一套又一套的運營方法論,發現竟然都是一些很虛的東西(至少在當時的我看來是的) 5、高強度而無原則、低效率的加班

基於以上等等,從2013開始,我不斷的審視自己,我自己是個什麼樣的人,我喜歡做什麼,我適合做什麼,我會在什麼領域有所成就

1、我經常會為了研究一個東西廢寢忘食,投入而專註 => 貌似適合做技術 2、我能堅持做一件事情,不會三分鐘熱度 => 貌似適合做技術 3、我大學很喜歡搗鼓跟電腦相關的東西,從軟體PS、AI、ID到優化電腦系統到重裝系統到最後自己組裝電腦 => 貌似適合做IT 4、我的舍友是後端,在我搗鼓第三點的時候他已經在幫學校和外面的公司寫系統了,我很崇拜他,但大三大四讀了《人人都是產品經理》,崇拜歸崇拜,畢竟還是經理比較有吸引力,年少無知隨大流 5、我是985通信工程專業,好歹見過C語言,知道數據結構,上過計網 => 這不明擺著去做開發的意思麽

綜上所述,我看到面前清清楚楚的寫著三個字:程式員 再加上詢問了一些朋友和同學的意見,2013.09.01開始在家全日制脫產自學,從前端開始……

二、2013.09-2014.04(自學)

嗯,自學開始,怎麼學呢?

我並沒有一股腦就開始學

這裡得感謝第一份工作對我的鍛煉,我利用了產品思維來看待這件事 目標:4-6個月找到一份前端工作 核心技能:HTML、CSS、Javascript + 一個框架(Vue)+ 一個項目

確認好需求後,我利用思維導圖把這三個模塊進行了需求拆分和梳理,每個大需求下要學的是什麼,特別是最核心的模塊-JS 然後是尋找合理快速的學習方法,我瀏覽了很多關於如何自學前端、前端推薦書籍、前端知識體系等等方面的內容,最後總結出來我要做的事:看視頻快速入門 => 看書扎實基礎 => 大量敲代碼實踐,期間不斷積累好的博客資源,吸取前人的經驗,特別是github(懂的自然懂)

但其實,前面的我並沒有消化多少,對新手來說 《Javascript DOM編程藝術》 《Javascript面向對象編程》 這兩本書我覺得是比較合適的,其他的書都有它對應的階段,強讀不來 《Javascript高級程式設計》真是一本好書,入門後就值得不斷的翻看了

到現在工作一年了,我的桌面上常備《Javascript高級程式設計》+《You don’t know JS》系列,閑來無事就翻一翻,個人覺得進階必備

大學折騰過科學上wang,看得懂hello world的英文水平(大學過完六級後就扔了)……在牆外發現了一些新世界:Google、Medium、Youtube、Twitter

四個月後的我,能寫靜態網站、JS基礎能隨口胡扯一點、會Vue的基礎使用(對,爛大街的仿餓了麽Web App)、用github page給自己做了個線上簡歷

這段時間留下來的積累是30多張知識腦圖+50篇博客(不是現在github上的)

花了一個月去面試,此次省略一萬心酸字,最終入職一家理想的互聯網公司,產品技術驅動、最新技術棧、leader和同事是985大牛、技術氛圍很nice、效率至上965 回想起來當初的自己真滴是渣渣,肚子里那點東西一眼忘穿秋水,換做現在我是面試官,說不定自己都會搖搖頭 面試時得到的反饋:能學到的東西叫技能,花時間就能學會,我們要的是有自學能力和技術熱情的人。 很感恩現在公司的CEO和前端老大,或許因為中大華工一家親?

三、2014.7.01-2015.07.01(工作一年)

6.1兒童節當天正式入職,對我來說,還有個特殊的意義:在前端路上,我只是個兒童,剛剛開始蹣跚學步,未來路很長……

剛開始是內部管理系統的開發,vue對新手小白真的非常友好,過度平緩 然後寫了兩個星期的微信小程式,妥妥的練了一把手 緊接著就上了公司的react-native大船開發App(公司核心產品),一開始真的是一無所知,幸得leader炒雞耐心,簡直手把手有木有,在react的路上越走越遠…… 加入RN-App項目後,我花費了大量的時間去熟悉項目 加上我很喜歡從大局看問題,想掌控一個項目,所以不斷的嘗試如何從零搭建項目、移動端打包測試、項目部署、App Store提審等等流程,全部自己跑了一遍,有時候不懂的就直接拉著leader教自己,在此過程順便瞭解了下gulp、webpack、Xcode相關操作 從添加小功能 => 負責獨立模塊 => 巨集觀掌握App => 參與重構 很快我就對react技術棧的使用得心應手,但並不滿足於此,開始研究數據流、項目性能優化、總結踩坑,開始去瞭解virtual Dom和diff演算法,順遍入了閱讀react源碼的坑(路漫漫其修遠兮,吾將上下而求索),結果發現redux的源碼更簡單一點…… JS基礎和框架刷累了,又跑去寵幸一下網路相關,HTTP、緩存、瀏覽器等張口就來,滿口性能優化卻又無從實踐,不幸還發現了事件迴圈這個東西,又趕緊跑去系統擼了一遍非同步

大半年後,公司前端方面的業務都已經得心應手,功能開發和維護什麼的都已經不成問題,這個時候的自己其實有點小竊喜了,感覺自己在前端方面有點無所不能的感覺,貌似只要有後端的介面,什麼頁面都能開發 幸好本人一直保持著一顆敬畏的心和危機感,馬上意識到自己處於舒適圈了,必須得想辦法打破它,給自己敲一個警鐘

趕緊對自己進行總結:其實自己僅僅滿足於獲取數據渲染頁面,就已經開始自我陶醉了

在面向內部人員的管理後臺上,不太考慮性能優化、相容性(只用chrome)、美觀等,那麼是否應該在開發複雜應用功能、優化許可權系統、提高開發效率上下功夫呢? 在面向用戶的App和web頁面上,性能優化、相容性又成為了核心要素

這時候很想試一下react同構和伺服器端渲染,聽說能解決白屏,大大提升首屏載入速度,但遲遲未和後端同事找到機會試,這時候就對後端的知識蠢蠢欲動,想自己動手

其實前端就夠自己吃一壺了,加上node帶來的各種工具,還有數據結構與演算法、服務端、資料庫等等,有點貪心不足蛇吞象,草草刷了一遍node擼了幾個express的demo妄圖通吃後端,卻沒練過實際項目,花了兩天學完了python語法,卻不知所措……

越學卻越發心生焦慮,學的越多,發現自己越無知

學啊學的,某天終於悟出了一點道理:百藝通不如一藝精 天天聽別人全棧全棧,這學一點那沾一下,太浮躁了 還不如在前端這個領域往下深耕,扎實基礎,T型縱向深入,等時機成熟了,一點點去擴展服務端的知識,橫向面的寬度很重要,但急不來,只有把目前所做的東西給擼清楚了,留下自己的思考和沉澱,才能為長足發展打下厚實的基礎。

如果大家對於學習前端有任何問題,學習方法,學習路線,如何學習有效率的問題,可以隨時來咨詢我,或者缺少系統學習資料的,我做這行年頭比較久,
自認為還是比較有經驗的,可以幫助大家提出建設性建議,這是我的web前端交流qq群851231348,有任何問題可以隨時來咨詢我。

  

再加上跟一些群里的大牛虛心請教,給自己確認了一些打基礎的方向,也是接下來的長期方向

作為前端

  • 把目前業務中用的框架用明白,總結坑,寫文章(react性能、RN坑)
  • 讀源碼,寫文章
  • 演算法(從位運算開始)

作為程式員

  • 學英語(每天Anki背單詞、聽podcast、看英文文章和文檔、無字幕看美劇和電影)
  • 補基礎(操作系統、編譯原理)
  • 學 C++(看情況,這個有點遠)

以上幾點都需要沉下心來,一點一點去積累,急功近利不得。

總結起來,這一年裡有幾個關鍵詞:勤奮、養生、學英語、輸出、雜學

1、勤奮

這一年裡,在本職工作之外,我貌似活成了一個很“正能量”的人 公司九點半上班,我八點就到公司開始看書學習(家裡離公司單程地鐵一個小時,沒錯,我每天6點多起床),下班後或者周末,不是在家裡就是在公司學東西

2、養生

每天六點多早起了,那自然是得早睡,11:00-11:30睡覺,最晚不敢超過12:00,對於一個程式員來說,是否有點unbelievable 晚上下班回家後會去健身房或者家裡旁邊的籃球場練球 周末的話,雷打不動至少有一個下午打籃球,堅持了10年的籃球 身體是革命的本錢,尤其程式員這種物種 另外,我幾乎不吃外賣。

3、學英語

不知從哪個時間段起,發現經常要讀英文文檔,google和stackoverflow都是英文的,很多好的文章和博客都是英文的

決心把自己的英語撿回來,然後開始每天記單詞、閱讀英文文章、嘗試無字幕看美劇或者電影

推薦一個叫Anki的軟體,對於記憶內容非常有幫助,建議入手嘗試一下

4、輸出

輸出很好理解,就是寫博客,堅持寫 我充分利用了bear、MindNode、Axure、github這幾個工具 把自己所學所想所思的內容都沉澱了下來。

5、雜學

對於雜學這個詞,我想了很久,其實這個詞不好,有點類似上面說的,啥都學一下,啥都不會

其實我真正想表達的是:我擁有對新技術的好奇心和熱情,會主動關註最新技術趨勢。對知識擁有饑渴感,以前端為中心發散開來的技術領域,我都會保持關註,但不僅限於前端,給自己的定位應該是解決實際問題的工程師,前端只是我目前的一個職業。

四、next to learn

對於接下來要學什麼,上面籠統的寫了個大方向

作為前端

  • 把目前業務中用的框架用明白,總結坑,寫文章(react性能、RN坑)
  • 讀源碼,寫文章
  • 演算法(從位運算開始)

作為程式員

  • 學英語(每天Anki背單詞、聽podcast、看英文文章和文檔、無字幕看美劇和電影)
  • 補基礎(操作系統、編譯原理)
  • 學 Java(看情況,這個有點遠)

還是給自己一個一年內的目標吧 1、繼續react源碼學習(學有餘力就把vue的源碼也學了) 2、學Node,並用Node+react(vue)寫一個完整的前後端項目 3、把《演算法》第4版啃完

時隔一年,多虧自己有寫東西的習慣,還能勉強寫個總結 新的一年,希望自己能更上一層樓 雖然自己起步晚,但有句話:種一棵樹最好的時間,一個是十年前,一個是今天,不要被這個事情影響 另外,堅持是制勝法寶

五、一點學習心得

有人會覺得,大神們才有資格寫學習心得,你算個什麼東西,你的資歷呢,請先show出阿裡騰訊的5年經驗!

個人初衷,寫這一part是把自己這一階段的學習態度、方法、心得記錄下來,可能哪天自己回頭審視的時候,發現這個階段其實有點學習方法是錯誤的,那麼也能及時更正自己。重點:這是我自己的學習方法 另外一方面,目前的確還有很多小白還苦惱於如何學習,希望能有幸對這一群體有點點幫助,那我也是做了好事,算回饋社會了吧。 所以,大神們請繞道啦

一、合理利用時間

請充分利用好下班時間

1、上班時長

如果你是996,加上通勤就沒有自己的時間了,完全沒有下班時間給自己充電,我建議還是儘快換一家公司

大部分情況下(除了項目上線+短期內敏捷開發),這些加班都是無謂的消磨時間,試想一下,六點半,感覺下班了,點個外賣或者出去吃飯,這裡起碼得消耗一個小時吧,七點半到了,吃完飯休息一下,這時候大部分人的心理是想著反正還要加班,吃完飯休息一會,找個娛樂活動,看會抖音、頭條、鬥魚、動漫,就半個鐘……八點到了,進入工作狀態,離9點就剩一個小時,即使全程投入,有效加班時間也就一個小時,反正我是不相信白天的八個小時內無法通過提高效率和專註力來彌補這一個小時。 如果你說常態要加班到十一點之後,那麼復出的就是身體的代價了,還有前途。工作時間的業務驅動,每個人都會有,你想比別人更有優勢,就要利用工作之外的時間。 程式員是靠技術吃飯的,如果沒有工作之外的時間來增長技術,還要賠上大量時間,你很快就廢掉了。

請利用好下班後的那一兩個小時,日積月累,你會看到不一樣的自己,一萬個小時理論。

as for me,除了利用下班時間,我還有早上的一個多小時可以靜靜看書,不受任何人影響。還有一個隱形的優勢,吃的健康睡得早,我每天都精力充沛,所以我能保證白天的工作效率。

2、上班效率

1、列好todo list,分好優先順序,做完一個劃掉一個,比如這樣

  • App **bug修複
  • H5 頁面開發
  • 管理後臺添加功能

2、工作一段時間起來休息一下,這是為了確保你下一個工作時間段更有精力,番茄工作法瞭解一下

二、補基礎+看文檔

電腦、軟工的科班好學生可以忽略,我是轉行的,所以我需要大量補基礎 不單單是JS基礎,還有網路、演算法、服務端等等等

如果是學習新框架或者其他工具,請第一時間看文檔,有代碼的地方就對著實踐一遍,別人的博客最起碼也都是第二手資料了 官方文檔作者是最瞭解這個東西的人,你不問他問誰? 遇到問題,也請第一時間查看官方文檔,再看其他

三、會查資料+學好英語

普通程式員+google = 超級程式員 國外真的有不少好的資料,Medium、Youtube、Twitter請瞭解一下,github上也大部分是英文的 國內大部分資料都是二手的,除了慢,還有翻譯是否準確的問題

想要吸收國外的精華,學好英語相信是毋庸置疑的

還有,不會英文你可能連報錯都看不懂,還有google+stackoverflow的超級組合咧

學英語其實比學編程簡單多了,而且產出比非常高,你可以從裝翻譯插件開始 你只需要堅持背背單詞+強迫看一段時間的英文文章,技術辭彙就那麼點,很快你就能看得懂了。

這一點上,請相信我好嗎,你不會後悔的。

三、搜索+提問

個人搜索問題三大步驟,請放棄百度,擁抱google,查看順序 1、官方文檔+github 2、Stack Overflow 3、國內答案、博客、其他

搜索不出來後,可以求助於同事或者朋友,請準確描述問題 不要沒搜索過就問人,反正我就會很反感這樣的人咯,別人的時間也很寶貴的

四、總結、反思、歸納

這一個,更多的是一個思維習慣 也是提升自己最關鍵的一個步驟

具體怎麼做呢? 如果初中高中有做過錯題本、喜歡做筆記的同學,特別是理科生,可能會比較容易理解這一塊

最笨的方法,先從記錄bug、寫博客開始,得先有一部分的實踐與素材才能開始整理歸納 然後慢慢歸納同一類問題,同一類優化方案 至於更高層次的舉一反三,就要看個人積累與沉澱了

其實這一步也不難,對嗎,也就是多寫寫,記錄記錄而已

另外就是,看了別人的博客文章,也可以記錄下來,作為自己的經驗所用 踩在別人的肩膀上,你會看得更遠 如果踩的是巨人,那就更好了

最後

如果你覺得這篇文章不錯,請別忘記點個關註哦~


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 新的一天又開始了,今天學習了三個內容 一、表格標簽 table 在各個網頁中我們會發現許多商品頁面,展示是用什麼來展示的呢,表格無疑是一種不錯的選擇看下圖。 一張常見的簡歷就是有表格標簽來編寫的 創建表格: <!-- 表格由基本標簽table tr td組成其中tr代表表格的行 td代表表格的列,行 ...
  • 一、什麼是 Promise 1.1 Promise 的前世今生 Promise 最早出現在 1988 年,由 Barbara Liskov、Liuba Shrira 首創(論文:Promises: Linguistic Support for Efficient Asynchronous Proce ...
  • JavaScript中數組去重的幾種方法 正常情況下,數據去重的工作一般都是由後端同事來完成的,但是前端也要掌握好處理數據的能力,萬一去重的工作交給我們大前端處理,我們也不能慫呀。現在我總結了一些去重的方法,希望對大家有點幫助。 方法一:new Set()實現數組去重 ES6 提供了新的數據結構 S ...
  • CSS實現居中對齊的幾種方式 頁面佈局中,居中對齊是我們經常遇到的場景,現在總結幾個常用的方式供大家參考。 場景一:按鈕文字居中對齊,line-height + text-align html代碼: <div class="btn">Hello World</div> CSS代碼: .btn{ wi ...
  • 做一個簡易計算器,效果圖片 c表示清空,為一個空字元串 +/-表示該值為正還是負 %表示當前值/100 ←表示退格,往前刪除一個值 eval 函數是能夠計算出字元串表達式或者語句的結果,把結果求出來。 代碼如下 <!DOCTYPE html> <html> <head> <meta charset= ...
  • 我第一次直播寫代碼是在去年七月份。我想要直播一下我在業餘時間內為開源項目領域所做的工作,儘管在youtube上的大部分直播都是關於游戲的。我比較擅長於NodeJS的硬體庫方面的工作(儘管大部分項目都是自己的)。並且我在youtube上曾經開啟過一個房間了,那為什麼我不繼續做下去?我的欄目可以叫做:基 ...
  • 現在,Safari(技術預覽版106)和Firefox(版本78)的預覽版均支持新的CSS :is() 和 :where() 偽類。 Chrome的實施仍然落後。 使用 :is() 減少重覆 你可以使用 :is() 偽類來刪除選擇器列表中的重覆項。 /* BEFORE */ .embed .save ...
  • 接下來就好好介紹一下這七個開發調試工具,用起來是真的爽啊。建議收藏使用哦! Web瀏覽器中的開發工具 任何現代的 Web 瀏覽器都配有功能強大的工具來調試應用程式。 如使用控制台語句cconsole.log(),使用alert()的彈出視窗,還可以使用debugger語句暫停代碼執行,這些對於我們的 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...