Yang Yang

職場生活總是會遇到各種沒碰過的事情，有些事和學生時期遇到的事情類似，但是有些事情事要親自到職場才能深刻體會的。 這裡介紹一些職場上，你需要值得留意的一些狀況，對你未來的職涯多少會有一些心理準備。 職場生活當你在工作的時候，總是會遇到讓你有成就感與失落的事情，只是情緒這種東西很複雜，擅長壓抑情緒的你，可能比較能在職場上適應，但是如果過多的壓抑，會導致情緒過度壓抑而彈性疲乏的情緒不穩，因此情緒管理對一開始步入職場的你，可能會無法馬上適應，這也是很多新鮮人剛入職場的第一年做不太住的主因之一。情緒方面，可能包含： 自己給自己的情緒 別人給你的情緒 自己給自己的情緒很多時間，情緒壓力是自己給自己的，你可能在人生道路上給自己設立一些目標需要達成，但是你會發現事情可能不會是自己所想的那樣走，因而使你更挫折。其實要做好情緒管理，除了自己要了解自己之外，也要對職場的領域有基本的認知，才有辦法為自己打預防針走更長的路。職場不難，但是未雨綢繆，不周全的規劃容易葬送自己的未來，所以一開始就業辛苦一點，未來自己也不用花太多心思在苦惱。 別人帶給你的情緒首先你必須要先認識一個詞，叫做報憂不報喜。其實這個問 ...

相信各位有不管是不是開發者，應該都會好奇打開一下傳說中的Google developer tools看看是什麼東西。新手或是沒碰過的你，可能打開來之後發現這是什麼東西！！然後就關掉了…但事實上裡面的功能並沒有想像中的那麼複雜，重點是當下的你有沒有需要用到。因此我在這裡設立情境，讓你能夠透過好奇心去了解這個功能主要是要做什麼。 Instagram相信各位有聽過Instagram吧？不知道你會不會好奇，當Instagram每次在載入網頁的時候，到底會做什麼事情？其實你可以打開chrome的developer tools查看，所以請跟我做 打開Instagram首頁 打開developer tools你可以使用Fn+F12打開 點選Network這個時候你會看到很多複雜的Name，不要急，這些並不是我想讓你看的。 點選Clear清楚所有Name 點選Instagram首頁隨便一個人的Profile頁面 查看Name的變化這個時候你會看到Network有在跑一些東西出來，你應該會看到有一個Name叫做：?__a=1，請點選他 查看Request URL以yahoo為例， ...

切板對很多新手來說是一個不易跨過的門檻，但是有時候是自己沒有找到適合自己的方法學習。這邊我們從W3schools的Website 來帶大家學習什麼是閃電邊（Ｘ）切版常見的layout。 導讀W3schools文件其實W3schools是一個很好的學習平台，介面也做得比以前更簡潔好用，但是可能有些人光是看到內容是英文就投降了。事實上以coding來說，英文並不用很厲害就可以閱讀大部分你需要用到的資訊了。但是提升英文對於survey一些技術文件是多少有加分的，可以降低不少負擔與時間成本。所以各位從現在開始，一起來閱讀W3schools的文件吧！ 什麼是閃電邊這就要從不久前的事件說起了，傳說有一名武功傳奇人物展示了一套絕世武功。原本以為他是在展示武術，但是不得了呀，原來也是在暗喻一套切版武功呀！俗話說，切版老手熟能生巧，有豐富經驗的人切版的速度可以說像是閃電般的快速呀。究竟是哪一位奇才人物最近展示了這套武功呢，讓我們來瞧瞧： 就連我們的談話性節目主持人也按耐不住想學切板閃電邊啦～ View post on imgur.com 好…這不是重點，重點是我們要有實戰性！要動作！實戰性！！ ...

最近因為公司需求，除了需要學習React之外，也要隨時預備一些舊產品重構成Vue的準備，像是最近公司的讀書會主題都以Vue為主了，雖然主題換成Vue，但是基本上有React的觀念，Vue的概念幾乎是一點就通了，可以說是更簡單容易懂。 這幾天有看到workshop的活動是以Vue為主題，剛好抓到機會可以趁機好好學一下Vue，那麼以下就來介紹專案一下。 專案介紹詳細的介紹我都打在GitHub上了，有興趣的人可以到這邊去看一下。下面的介紹我主要以Vue為主要介紹，並且假設各位已經建立好基本的Vue了。 leaflet介紹 相信各位都很常用Google map找地點，但是你一定會有一個疑問，為什麼那些開發者都不直接使用Google map開發？因為＄＄呀！！ 還記得年初的時候，有一個開發者開發了一個口罩地圖給大家使用，但是一瞬間就燒了好幾十萬。 也因為考量到實用性，所以open map成為一個折衷的選擇，很多公司有用到地圖的產品，通常也會這麼做。 詳細介紹可以參考官方網站，裡面的資料寫得很豐富。 leaflet使用方式雖然官方講得很詳細，但是有時候挖資料就像是在走迷宮一樣，因此我這邊來幫 ...

密碼學看似一個無聊的學科，但是卻也不斷充滿著我們的生活中。無論是比特幣或是區塊鏈，密碼學都是扮演著相當重要的角色。以下將會先介紹密碼學最經典的Hash是什麼。 Why 密碼學？密碼學簡單來說，就是一個藉由數學與邏輯進行加解密的一種學科，其實在無形之中，你已經在生活中用到了各種加解密了。生活上，我們會用到暗號，可以視為雙方都有共通的解讀方式。網路上，無論是登入登出, 信用卡消費, 貨幣交易……，都會用到。密碼學是一個要學的廣簡單，學得深很難的學科，但是也因為在生活應用上非常常用到，所以近日才會逐漸推廣全民學資安。事實上我蠻推薦任何背景的人去了解密碼學，儘管只是學個表面知識，對生活上的應用上，還是有一定的幫助的。 Hash 通常台灣比較會唸成雜湊，對岸則是翻譯成哈希。 Hash事實上是透過Hash function產生的。 無論輸入的長度為多少，經過Hash function執行之後，都會產生固定長度的hash值。 事實上雜湊又稱為one-way function，一旦翻譯成hash，即無法逆向翻譯成原先的值。 Hash 小整理 輸入的長度不管長短，產生的Hash值長度都是固定的。 ...

由於我在公司開發的新產品有加強SEO的需求，剛好任務分配到我身上，因此這次也順便整理一下加強網站SEO的內容。 SEO全系列文章📌 如何加強網站的SEO - 基礎篇📌 如何加強網站的SEO - 進階篇📌 如何加強網站的SEO - SSR與CSR篇📌 如何加強網站的SEO - 同構篇📌 如何加強網站的SEO - 框架篇📌 如何加強網站的SEO - 資安篇 為什麼需要加強SEO我們設計一個上線的網站，最重要的當然就是曝光自己的網站，並且把流量拉起來提高客群。一般使用者都會透過搜尋引擎，如Google, Yahoo…輸入關鍵字來搜尋類似的網站。因此我們需要曝光搜尋，甚至是提升搜尋名次，當然首要的就是提升SEO。 Single Page Application的SEO傳統的網頁渲染都是Server Side Rendering（a.k.a. SSR），從伺服器端渲染好網頁程式，再送到客戶端用瀏覽器打開網頁。但是現今的網頁開發框架，如：React, Vue…，皆屬於Single Page Application，搜尋引擎爬到的網頁內容都是未渲染好的HTML。因此Single P ...

之前分享過兩篇跟軟實力和硬實力有關的文章，分別是職涯與學術環境小記與認識程式語言-從程式解題開始這篇文章算是紀念我就職滿一週年的分享，如果你有想聽的內容，歡迎讓我知道。也歡迎你在右上角的Link分享你的網誌連結，讓我們一起成為交流夥伴。 工程師的軟實力工程師要培養軟實力是一件蠻大的門檻，儘管你已經在一定的程度上具有軟實力的mindset，你的同事也不一定擁有一定的知識量。工程師是一個很神奇的生物，我時常這麼形容。每個人都有自己的邏輯與想法，有時候彼此也很難對上頻。有時候和同學聚餐，時常聽到一句話：某同事說很難跟我對上頻率。我覺得這個問題不光只是新鮮人，甚至連資深工程師也會有這樣的問題，一個很簡單的問題可以講得很複雜，甚至表達含糊。所以公司在最近有開設溝通技巧想解決這樣的問題。 溝通的方法溝通有很多方式，可能是文字上，可能是言語上，每個人擅長的地方不同。我認為溝通最直接的就是站在對方的角度去思考如何解釋，比較能夠講出貼近對方的話。但是有時候人是很難互相的，自己站在對方的角度去思考，對方可能又不會這麼做。當你認為對方不善於溝通時，請思考一下，是思考角度的問題，還是對方擅長的溝通方式不同？大 ...

從以前剛升上大學，到成為TA，到現在進入職場回頭看以前的學術狀況，不禁有點想在此記錄一下。也許以前在大學的時候，講這些看法給身邊的同學，有些人聽了會覺得有點可笑。但是直到進入職場，還有參加研討會, 技術小聚等…，我更肯定我的觀念是正確的。 高中的考試問題台灣的高中學術環境，以廣義來講的話，其實太偏袒某幾個學科了，主要原因就是考試，進而倒是考試商業化。考試是為了講求公平性，但是環境本身就是一件不公平的事情。隨便舉例： 12沒資源又沒錢的人，遇到不好的老師 = 考試別想了有資源又沒錢的人，不會善用資源 = 考試別想了 有資源和有錢，你至少還有權力可以做選擇，如果你都沒有，當然你就必須要付出更大的代價去換取。可能是時間，可能是勞力……。可是憑什麼大家一生出來就這麼的不公平？沒辦法，這就是社會 在高中培養成勝利組有些人可能不知道，尤其是長輩們，覺得只要把孩子送到名校升學率高的學校即可。但是事實上要考慮到的層面不光是這樣這麼簡單，學校的學習風氣也是考慮之一。有些公私立學校會打著漂亮榜單招生，但是卻不會介紹裡面的學術氛圍如何。為什麼大家會這麼想要進縣市的第一志願？因為學術風氣好。但是學術風氣指的 ...

今天我要來介紹JavaScript時常被拿來討論的非同步問題，首先我們要來先討論，為什麼我們需要在JavaScript處理非同步問題。 為什麼需要處理非同步問題在開發專案的時候，當你設計好一個Http request時，你可能會遇到神奇的狀況。例如： JSON server的資料未更新 後端未收到資料衍生的error 後端收到的資料，是未經過處理 已經寫了修改資料的程式，卻沒有任何動靜 舉例這些舉例的問題，通常是初學時常碰到的，明明邏輯都沒問題，卻依然無法讓程式順利進行。如果你未經歷過，無法共鳴上述的情境的話，以下再提供一段程式讓各位品嚐。你覺得以下程式碼會執行出什麼樣的結果？： 12345678910function doSomething() { const getUser = () => { setTimeout(() => { return { name: 'yy' } }, 2000) } const ...

最近在開發分頁式網頁時，初次把SPA專案部署到GitHub上使用。但是發現當使用者在分頁reload時，會產生404的問題。以下就來介紹為什麼會有這種狀況發生。 404的狀況例如使用者的情境為： 進入test.io/ 打開test.io/form 重新整理test.io/form response 404 http status 你可能會覺得很疑惑，其他網站就可以為什麼這個就不行？原因其實也很容易理解，GitHub pages只支援靜態網頁的，網址對應到的也是真實路徑。以上面的例子來說，造訪test.io/就相當於是造訪 / 的路徑，也就是對應 /index.html。當你造訪test.io/form時，對GitHib pages而言，/form/index.html 是不存在的，當然會拋出404 status。 SPA的路徑所以這跟SPA有什麼關係？請注意，SPA顧名思義就是單頁式網頁，就表示他是“不換頁”的網頁，只是看起來像換頁而已。也就是瀏覽分頁都是在同一個頁面上，所以只要重新整理，又會回到原本的分頁了。我們通常會搭配，例如： router-dom之類的套件來達到分頁效果。 ...