歡迎最近新註冊的用戶 @m0617ICO @JimmyOmg @wimp9487 @yamak @ablaze 歡迎在留言處簡單自介一下~ 可以說一下從哪邊發現這論壇的~最近在學什麼東西~或者是關於你的一件小趣事~ 也請大家多多回覆別人的留言,問別人小問題,或者回個「嗨嗨 👋」都很好~ **歡迎各位加入這個技術成長社群!**
https://codelove.tw/@howtomakeaturn/course/bap2xj 歡迎寫寫看作業~ 可加強 js 基本功~ 因為,學一點點後端,會讓「前端觀念更清楚」 也就是「基本功比普通前端工程師更強」 並且為更多 js 進階內容打下基礎~ --- @hung @birdie2019 @superyngo 找時間來寫寫看~
因為一直找不到工作(...汗)所以來整理作品 [成果展示](https://superyngo.github.io/to_do_list/) 基本上是參考[Let's Write](https://www.letswrite.tw/)做的[Demo](https://letswritetw.github.io/letswrite-food-check/) 在頁面下方有作品導覽以及Github連結 使用工具: 1.Github Page 2.[Google Tag Manager](https://tagmanager.google.com/#/home) 步驟: 1.申請GTM並取得GTM代碼 2.將GTM代碼插入所有專案的index.html中,並將所有專案上傳github,開啟page頁面 3.另外做一個myNavbat的github page,將所有專案連結放進去,可參考[我做的](https://github.com/superyngo/myNavbar) 4.用GTM的「自訂HTML」功能將myNavbar和github連結塞進所有專案中,參考代碼如下: ``` <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <div class="myNav"></div> <div class="github"> <a class="githubHerf"> <i class="fa fa-github" aria-hidden="true"></i> </a> </div> <script> var githubHerf=document.querySelector(".githubHerf") githubHerf.setAttribute("href","https://github.com/superyngo"+{{Page Path}}) var myNav2 = document.querySelector(".myNav"); var iframe2 = document.createElement("iframe"); iframe2.setAttribute("src", "https://superyngo.github.io/myNavbar/"); iframe2.setAttribute("width", "100%"); iframe2.setAttribute("frameborder", "0"); myNav2.appendChild(iframe2) </script> <style> body{ background-color: #fff0df; } .github { position: fixed; left: 0; bottom: 0; display: flex; width: 100px; height: 100px; cursor: pointer; z-index: 2; :hover { position: absolute; left: 10px; bottom: 5px; font-size: 3rem; color: #fff; scale: 0.9; } } .github::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 100px 0 0 100px; border-color: transparent transparent transparent #6e5494; } .github .fa { position: absolute; left: 10px; bottom: 5px; font-size: 3rem; color: #fff; } @media screen and (max-width: 600px) { :root { font-size: 12px; } .github { width: 70px; height: 70px; } .github::before { border-width: 70px 0 0 70px; } .github .fa { left: 8px; bottom: 4px; font-size: 2rem; } } </style> ``` 注意事項; 1.不知為何我GTM塞iframe一直不給過,所以用append的。 2.iframe內的超連結預設會在iframe內開啟,要避免只要在myNavbar的head裡加上<base target="_parent" />就可以了。 3當初做這些作業時完全沒考慮theme和RWD,花了一些時間但又不想花太多時間結果就勉勉強強用手機也都能開。 閒聊: 前陣子都在codeSignal上刷題,看別人解法真的很神,學很多... 有沒有北部公司缺人啊...投履歷都沒人回..中年轉行真的不行嗎...
這兩家服務好像不錯 https://vercel.com/ https://render.com/ 基本上研究服務,首先點進「Pricing」頁面看看收費,有沒有免費方案,就對了 這兩款,好像點幾下按鈕,就可以從 github 直接把專案部署了,還不錯呀
上次的(十)是純 CLI 應用 先幫大家脫離 ` js 一定是網頁、一定是 html/css 相關` 的刻板印象 接著再回來碰 backend programming 開發,銜接回來 web 領域 這樣才順暢,才不會一直搞混在一起 教材研發中,近期上線,敬請期待~
來,讓我們特別關心轉職成功、上班超過一個月的 @birdie2019 @JoeyLai 是否已掌握公司狀況? 是否變得越來越有自信? 最近有學到新東西? 隨時歡迎上來分享工作筆記 or 上來發問卡關問題~
歡迎最近新註冊的用戶 @pollochang @yydsAwA @learningGG @dyvincent @ian052199 歡迎在留言處簡單自介一下~ 可以說一下從哪邊發現這論壇的~最近在學什麼東西~或者是關於你的一件小趣事~ 也請大家多多回覆別人的留言,問別人小問題,或者回個「嗨嗨 👋」都很好~ **歡迎各位加入這個技術成長社群!**
我要做一個檢測undefined值的 代碼: data = { highscore: 0, localStorage: null, footsteps: 0, start: 0, checkin: 0, health: 6, fed: 0, birthday: Date.now(), feedCount: 0, pet_push_time: 0, old_pet_mod: false, old_pet_birthday: Date.now(), old_pet_days: -1, old_pet_pet_push_time: 0, old_pet_feedCount: 0, back_HPbox: 0, } function undefined_test(val) { if (val === undefined){ return 1 } else { return 0 } //1表示這個值未定義 } undefined_test(data.test); 他不會回傳1
收到網友提問如下: ``` 這是最近跟一個朋友聊天聊到的 朋友是寫 .net Framework 的 我剛碰Vue的時候,跟他說我看不懂Vue在背後是怎麼運作的、為什麼這樣寫會變成這樣的結果? 他跟我說,不用去在意框架背後幫你做了哪些事情 反正就是做那些制式的動作,把功能實現就好 不然工程師哪有那麼多腦力去記住程式底層都做了什麼 這樣真的是好的嗎? 工程師的等級差距並不在於是否知其所以而不知其所以然嗎? ``` 這應該是每個年輕工程師都有的疑問,寫一篇完整、公開回答跟大家分享,給類似狀況的人參考。 我先講結論:這取決於你想不想越變越強、不斷提升競爭力,還是只想混口飯吃 如果只想混口飯吃,什麼工具都是學個用法,懶得研究,然後東西做出來交差了事,那可以永遠不去管工具背後原理 不過,這種心態,職涯成長、薪水成長空間會很有限,然後在 40 多歲的時候會有「中年危機」,會很慘、壓力很大 因為屆時新工具你跟年輕人一樣不太會用,舊有的經驗又幫不上忙,因為你從來不肯學背後通用的觀念 回到問題本身,我認為有兩件事情值得分享,有兩個觀點你需要去權衡,我們先談談「抽象」 # Abstraction 抽象 軟體工程師的主要工作就是「抽象化」,把各種邏輯分不同層次「封裝為抽象」 這樣才有重用性,別人才能基於你的成果,進一步開發更豐富的東西 網路的七層架構,各種協定,程式語言,語言上面的工具、套件、框架,都是抽象 # The Law of Leaky Abstractions,抽象滲漏法則:除非無關緊要,否則所有抽象都或多或少會滲漏 這是在軟體圈知名的一個理論,稍微資深的開發者都應該要知道這篇文章 https://www.joelonsoftware.com/2002/11/11/the-law-of-leaky-abstractions/ 我簡單說明一下,抽象滲漏法則就是在說:所有抽象都一定會在某些情境下失效,此時便是滲漏。 你只要工作時間夠久就會知道,長遠來說,你還是要花時間去研究它抽象背後的東西。 你本以為只是前端隨便寫一寫交差,卻發現有一天需要認真去看 HTTP 協定、CORS 在講什麼,否則無法處理資安問題 你本以為只是後端 CRUD 隨便寫一寫交差,卻發現有一天需要認真去看 database 索引機制、記憶體管理,否則無法處理效能問題 結論:「抽象」幫助我們省下一些工作的時間,但關於技術細節的學習時間,無法省下來。 # 你的生產力要對公司商業產值有幫助 我認為工程師常常在另一個方面犯錯,就是鑽研自己喜歡的細節,不去管對於公司的商業產值與個人生產力 我曾遇過公司要求協助更換一張網頁圖片,某工程師居然兩個星期還沒更換完成 問他原因,原來是他看圖片尺寸不順眼,在研究分割、壓縮、整個網頁的整合機制,以及相關工具的導入 問題是,那個網頁跟圖片並不重要,此時專案還沒進到效能優化的階段,此功能應該盡快上線,視情況決定下一步 這完全是沒搞清楚優先順序,只顧著研究自己爽的東西,也沒跟相關人士確認任務目標 # 結論 回到原 po 的描述 ``` 不然工程師哪有那麼多腦力去記住程式底層都做了什麼 ``` 這是大錯特錯,隨便找一個優秀的資深工程師,從 Vue 到 React 到各種工具,背後原理、相關機制,都能深入淺出跟你說明 什麼 shadow DOM / virtual DOM / pure function / fiber tree / proxy / immutable 等等,就算好幾個月不碰工具,還是能輕鬆解釋,根本不是死記硬背的,這全都是經驗&融會貫通的結果 但是過猶不及,不顧公司需求,自顧自地研究技術細節也不好 該花多少時間研究背後機制?這是一個需要權衡的問題 請從公司需求的角度,以及個人長期職涯的角度,視情況判斷 以上,簡單分享
收到網友提問如下: ``` 我不知道自己想做前或後端,怎麼辦? ``` 其實很多人都是這樣,阿川建議「就先都學」! 如果急著上班賺錢,可以先側重「前端」,然後找個新手友善的職缺就先衝了 因為後端的技術有很多,一開始也不知怎麼挑選 以阿川目前觀察身邊同年紀33歲左右工程師 那些很強的前端或後端,雖然有專精的部份,但其實,同時也是「全端」工程師 同時對前後端保持興趣,有很大的好處 首先,同時學習前後端,會對網路技術生態系,有更深、更廣的了解 再來,是在求職的時候,可以應徵前端的機會,也可以應徵後端的機會 以我自己本人來說,面試上班、或者接案的時候,有時會負責前端,有時會負責後端,工作機會就多很多 最後,擁有全端技能,就算都是初階經驗,也可以在業餘時間做 side-project 甚至是跟朋友一起創業當副業 總之不用一開始就強迫自己一定要選好前端或後端 迷惘、探索、好奇的狀態,本來就是人生的常態 有時間的話,就都學吧!急著賺錢的話,可以先從前端開始~! 以上,簡單分享
歡迎最近新註冊的用戶 @lrchi1001 @a30870734 @shrdi @sos54610 @nanshiou @dfg312546 @t90920012 @Cloud200407 @tony05060165 歡迎在留言處簡單自介一下~ 可以說一下從哪邊發現這論壇的~最近在學什麼東西~或者是關於你的一件小趣事~ 也請大家多多回覆別人的留言,問別人小問題,或者回個「嗨嗨 👋」都很好~ **歡迎各位加入這個技術成長社群!**
第1課 ── 基本的函數操作、onclick 事件 https://jsfiddle.net/s1k6z280/57/ 第2課 ── 基本的變數操作、從 html 取得內容 https://jsfiddle.net/d6r4gbfp/1/ 第3課 ── 修改 html 的內容 https://jsfiddle.net/68eytsu5/5/ 第4課 ── 基本的陣列操作 https://jsfiddle.net/6mczqLeu/3/ 第5課 ── 基本的 if/else 條件流程控制 https://jsfiddle.net/n9h2mcuv/1/ 第6課 ── 認識資料型態與轉換 https://jsfiddle.net/hnxus0ym/5/ 第7課 ── 認識巢狀結構 https://jsfiddle.net/2m4g0v9t/3/
距離大學畢業已經三年,我大學主要修php 還留著PHP7 新觀念php7+MySQL+AJAX的教科書 但那時候還沒學精 想繼續鑽研PHP但我英文不好想先從中文書看 請教是要先買php新版本的PHP8還是繼續原來那本(PHP7)弄懂好? 雖然目前應該是前端JS趨勢但我仍然想先把PHP學精在學前端 可能我對PHP語法比較熟悉吧 雖然高中學過JS 但JS都遺忘了...
阿川收到網友提問如下: ``` 哈囉站長你好 我目前有在看蓬蓬的自學影片跟寫你分享的練習題 有件事想詢問一下我目前快26之前的工作經歷跟軟體一點關係都沒有 高職畢業 目前在自學一些程式語言的技能 如果未來要朝這個方向走建議我先去讀個二技相關科系補學歷嗎? 還是直接找線上課程或補習班轉職謝謝 原本的打算是想說上二技假日進修補個學歷順便幫自己打底 因為網路上看到蠻多分享是上完課後基礎理論不好 想順便詢問一下沒有學歷的話對未來的工作發展影響大嗎? 還是學歷只是初期比較看待後面看能力這樣子 ``` 寫一篇完整、公開回答跟大家分享,給類似狀況的人參考: # 不建議回學校補學歷 回學校補學歷真的太花時間了,動輒數年以上 何況入學之後還未必喜歡學校、未必喜歡寫程式 業界很多人也是「學歷普普且無經驗」自學4-9個月後,半路出家轉職成功 不論是金錢 or 時間成本來說,都應該先這樣試試看比較保險吧 # 很多人半路出家之後覺得自己底子不好 本科&非本科,基礎一定有差 但是現在網路資源、書本資源很多 寫網站不是什麼需要博士學位的「太空火箭科學」 工作上缺哪方面,就往哪方面慢慢自己補充,且戰且走也還夠用的 這行業根據職位狀況,難度可深可淺,一開始先負責較簡單的網頁工作也行 發現自己底子不好,趕快花業餘時間,大力自修一下呀 甚至先入行之後,週末再去學校進修,都比較保險吧 # 學歷對未來工作影響大嗎 學歷好看的話,當然在職場上有優勢 但如果態度不專業、工作多年還是沒什麼作品集,那也很難當工程師吧? 反過來說,學經歷不強的話 如果態度積極,作品集擺開在那邊,就算不是「超猛」的作品,也讓人知道這工程師有基本的「戰鬥力」呀 更不用說,如果積極貢獻社群、Github 專案有一堆星星,這種時候誰會管這工程師的學歷? 所以這題的答案是:學歷出色還是很吃香,但也還好啦!畢竟軟體工程這行,偏向「實力主義」,很難靠「關係」或者當「花瓶」或者「辦公室政治」就能混得出色 # 不建議直接跳進去補習班 另外我也不建議直接跑去需「全職上課」半年左右,學費十萬以上那種實體補習班 首先,班上同學程度不一,如果你稍微沒跟上進度,後面老師在講什麼就聽不懂,這樣花了大錢、時間,學習效果也不怎麼樣呀 我建議先大量找免費或便宜的教材,先吸收,多試幾份,真的卡關了,再開始挑補習班 先直接找一些作業跟專案寫寫看,從免費 -> 便宜的 -> 稍貴的,這樣一點一點花錢,風險比較小 更認識自身需求之後,再去比較市面上的各種補習班,最後再把這錢花下去,比較保險 事實上,也有很多人,最後根本沒去補習班,只靠著免費&便宜的一些資源,就直接順利轉職的呢! # 結論 這行學無止盡,就算台大畢業,工作十年經驗,還是一直在不斷自學寫程式的奇妙&精益求精 另外,我也有設計免費的 html&css 教材,還有便宜的 javascript 教材,內含「大量練習專案」,不論你最後選擇哪種學習方式,我都推薦搭配拿去學習、練習,稍有難度,但不少人全做完之後就順利面試上班了 以上,簡單分享個人看法
歡迎最近新註冊的用戶 @ymcheung @ricky0302 @yuyu15 @kose9876 @YangGuan 歡迎在留言處簡單自介一下~ 可以說一下從哪邊發現這論壇的~最近在學什麼東西~或者是關於你的一件小趣事~ 也請大家多多回覆別人的留言,問別人小問題,或者回個「嗨嗨 👋」都很好~ **歡迎各位加入這個技術成長社群!**
剛剛突然發現版上有很多垃圾文章 雖然應該是都被刪除了,但是通知那邊還殘留著 不知道有沒有辦法刪除,感謝
[Travel Maker](https://superyngo.github.io/Travel-Maker/) [原始碼](https://github.com/superyngo/Travel-Maker) 用vue+Google Maps做的旅程規劃網站 用意是把在google maps上找到想去的景點輕鬆點進行程規劃 算是以前愛出去到處亂走時想要用的東西 做出來差強人意 也還沒為手機優化 search過App Store有很完整的類似產品 就當作實作練習 寫的過程幾個心得: 1.UI建議先想好甚至可以先做,才能確認資料要怎麼配合處理 2.很多工具(pinia,vue router,vue各種用法等)都是邊做邊學,也不斷打掉重做 3.之後的side project會想要用Nuxt.JS做看看 4.寫得很髒很亂...常常頭腦發麻時乾脆心一橫把功能幹下來 5.其實還有寫一個node小工具幫忙從google maps上撈地點詳細類型的資料(例如墨西哥餐廳等),因為google maps api沒有提供...(網路上找到相關功能的請求從2017年就有了,不過就是一值沒提供)。我就用node去fetch地點的Google maps網頁就可以在meta裡找到地點詳細類型,再回傳到這個網站。不過還沒專研好node程式的部屬,就先拿掉了... 6.自學了3、4個月,要開始認真找工作了...
公司開始丟一些專案給我,主要都是修改樣式 聽起來還好,不會太困難,結果打開專案檔案是PHP檔,之前被沒有碰過PHP的部分,所以有點不習慣 專案中可能每個時期是不同人修改的,出現了CSS權種問題,加上PM時間上急需,改起來真的困難 找檔案這部分也是很困難,都翻西找用搜尋還未必能找到(公司有新舊公版和客制化的版) 問公司前輩說目前前後端分離只佔百分之五十,剛好我遇到的都是沒有分離 另外還有多人開發時git問題,一直很怕當雷隊友,把別人的檔案覆蓋過去,結果組長說我太緊張了,叫我放輕鬆不要那麼焦慮XD
感謝站長關懷~ 是的,這禮拜確實有遇到一些之前有稍微碰過卻不太熟悉的東西,也有之前沒有碰過的東西,是有些小崩潰...,但還是可以稍微跟大家分享與請教一下: 這裡有一些前期提要:公司目前的前端開發並不使用現在的主流前端框架,也沒有使用打包整合工具...(像是Webpack、Parcel這類的),JS使用JQuery,並且將JS檔案一個一個的引入網頁中。 ## 遇到的問題1 :CSS樣式問題 過去在自學的時候其開發方法是:在本機開發,然後在處理樣式與RWD時就是開啟Chrome 的 Dev Tools來做調整,但也有遇過在Chrome的Dev Tools中看起來將樣式都調整好了之後,部署到網路上之後換手機來查看頁面時卻發生了一些差異,這些差異可能包含滿版、間距等等,這部分我自己理解的差異可能會是有些手機會有瀏海的緣故以及Chrome與Safari之間的小差異.到新公司後發現在更多的裝置上,例如安卓手機,則存在的差異更多,包含顏色、日期時間選取器等等的樣式,因為型號真的太多了. ###到這裡可以跟大家分享的以及向各位請教的: 這裡我自己有想到幾個解決的方式,第一個是最懶的方法我最想用但是我有些不知道該如何整合給其他人使用的方法,例如透過Vue cli直接在npm下載PostCSS以及Autoprefixer這樣的工具來使用,一次解決主流瀏覽器的差異,但目前我不太曉得如何在公司的開發方法下,不透過整合工具來完成這個流程. 另一個我想到的方法是加入CSS Normalize來減少各個瀏覽器在不同樣式的預設值差異,過去我們可能都有寫過非常簡易CSS reset 例如: ```css= *{ padding: 0; margin:0; box-sizing:border-box; } ``` 但這樣如果把每一個樣式的預設值全部強制歸零,可能會導致有些樣式到後來要重新寫,或許Normalize可以只是單純地減少差異(也是因為網路上有人已經整理好了XD). ## 遇到的問題2 :API串接 過去我自己練習串接API的方式實在是相當簡易,我拿的是中央氣象局開放資料平台的API,所以之前很簡單的一行fetch就拿到資料了,毫無難度哈哈哈,但第一天公司需要我去切幾個版面並且串接運輸資料TDX的資料,恩...我一開始不知道要如何在JS中塞入登入資料並且拿回Token的方式.以及我要查詢的數值該如何發出. ###到這裡可以跟大家分享的以及向各位請教的: 這中間我摸索了fetch的一些選項設定,這應該也適用其他的非同步請求方法,例如ajax、axios(這兩個我還沒用過,後續應該會來摸索一下axios),包含請求方法(method),header與body中的內容設定等等. 至於API該如何塞入a頁面填入查詢參數並且跳轉到b頁面顯示查詢解果,在沒有前端框架全域狀態管理的支援下,這邊則是摸索了encodeURIComponent以及decodeURIComponent這樣的函式,將要查詢的參數在a頁面進行編碼並丟入到URL中,跳轉到b頁面後再進行解碼.並fetch我要的資料.最後是有成功的,只是覺得自己像薪水小偷哈哈哈,效率並不高. 這個方法感覺並不建議應用在需要輸入有個人資料的內容中,因為編碼的方式是雙向的,資料可以編碼也可以解碼,所以....像個資這類的內容就應該不建議塞在URL中用這種方式傳輸.至於要用什麼方法,這也是我想知道的. ## 遇到的問題3:不同裝置的問題 這個並非第一個樣式的問題,而是我目前覺得還沒有解的問題,就是我在網頁中需要獲取使用者的位置,因此用了navigator.geolocation 這個API,但神奇的是,在本機中都可以抓得到資料,打開Dev Tools檢查回傳的狀態碼與經緯度也都是沒有問題,但是在手機中雖然會顯示是否能夠取得使用者位置的提示,但按了同意後卻一直無法獲取資料,而且尷尬的是,我無法在手機中打開Dev Tools,所以我也不知道問題發生在哪....,過去有使用過navigator.geolocation 好像也沒有碰過這樣的問題 想跟各位請教的是,有什麼方式可以查看手機上的問題嗎? ## 遇到的問題4:不同的開發方式 這個是我自己很好奇的,雖然說我知道Vue是漸進式框架,但我卻不知道該如何漸進.我理解的漸進式是,有些頁面或元件可以自行選擇要不要使用Vue開發,還是這個漸進式的意思是可以自行選擇要使用多少Vue的套件工具呢(像是要不要使用Vue Router or Vuex). 會這樣問是因爲,假如現在有一份專案一共是十個頁面,我被分到了其中五頁,另外的同事則是負責另外五頁,誠如開頭所說,假如公司既定的開發方式並不使用框架與其他整合工具,我有可能使用框架進行開發並與之合作嗎?還是我這是一個很奇怪的問題,本來就應該要統一一個開發方式? --- 感謝看到這邊的各位,以上有些觀念上是我這位小菜雞自己摸索的,是可能不是正確的(例如有些函式、工具的用途或使用情境),因此歡迎大家指教與討論,這是我這禮拜可以跟大家分享的啦. 謝謝~~ --- PS:我自學八個月的時間有摸了原生JS、CSS、Vue.js、Tailwind、SCSS這樣的工具,本來我是很想要在第一份工作多了解與強化上述工具以及多人開發GitHub的部分,我了解這些終究只是工具且我自己也沒有到非常熟,只要可以完成專案目的即可,我的實力在哪裡我也知道,但以目前公司的開發模式來說,我需要考量沒有踏上趨勢的這個問題嗎?還是我多慮呢了?
我創了一個Github page,專案裡有兩個分支,我想要這兩個分支都能在Github Page上瀏覽網頁,但對於git版控都還是不熟悉,網上也沒找到相關的範例(有可能都用中文),跑去問GPT也說的不清楚,比較需要圖文並茂的方式Q。 現在的問題是只能顯示其中一個分支,另一個分支要如何也可以瀏覽出來? 或是能提示給我個關鍵字之類的QQ 謝謝! 專案:https://github.com/pchun2330/Project 網頁:https://pchun2330.github.io/Project
你的轉職路上,還缺少一份自學作業包!寫完這幾包,直接拿作品去面試上班!
本論壇另有附設一個 LINE 新手發問&交流群組!歡迎加入討論!