這是繼上一篇一年多前在六角學院畢業(?)後分享 我的前端學習之路 的續集,一年多來發生了好多事,這條路沒有想像的順遂,但也不至於到很差,工作環境很棒、每個月聚餐看電影、被公仔包圍、離家超近走路上班、同事很有趣,也在做自己喜歡的工作,無形的收穫還是很多。

工作環境(直立螢幕真的好用)

不知道從什麼時候開始就很不喜歡在 Facebook 或 Instagram 上分享生活點滴,所以希望像之前那篇一樣來記錄學習/工作歷程,順便也可以讓周遭朋友知道我大概在幹嘛。主要著重在前端工程師的工作上,公司的辛酸血淚史和職場文化實在是太精彩刺激了就不多提,有時間再另外寫一篇吧。

我加入了新創團隊,就是一般大家認知的那種新創,每個人胸懷大志,大家都認為自己可以透過產品的開發,在一年內有突破性的成長、認為產品能夠成功、同時能夠扮演著產品研發的關鍵角色,這大概是願意加入團隊的所有人抱持的共同夢想

公司產品還在醞釀,團隊很新,包括公司官網在內大概接了三四個中小型官網專案來練功,其中WordPress 的案子就有一兩個,但對前端工程師來說,100% 客製前後台才有成就感嘛!不過現實為了顧及成本,能使用 WordPress 快速完成專案就不可能等工程師們自刻網站了。公司是要你來幫他賺錢的,沒時間等你慢慢刻呀。

除此之外,其他網站是純前端就可以完成的,不要求兼容、不要求 SEO, 所以我一股腦兒全部使用 Vue CLI 開發,但後面越做越不安,感覺自己被綁架:「脫離了 CLI 是不是什麼都不會了」於是開始恐慌,到 YOTTA 買了Webpack 課程,上完自己練習寫一次 Webpack 後 ,果斷放棄,投回 Vue CLI 懷抱...


前陣子在 nuxt 練習專案使用 transition 要做轉場時踩了一個小雷卡了兩三天,就是一個不詳細看文件導致的結果。

先講結果:

当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们,【否则 Vue 为了效率只会替换相同标签内部的内容】。即使在技术上没有必要,给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。

When toggling between elements that have the same tag name, you must tell Vue that they are distinct elements by giving them unique key attributes. Otherwise, Vue’s …


下載 Visual Studio Code

官方載點
到官網之後別急著下載,如果你是 Windows 作業系統,按一下箭頭點選 Other downloads

接著選取Windows下方的 System Installer,選擇系統類型,大多數應該是 64bit 版本。

我的電腦按右鍵–>內容 ,應該就可叫出系統資訊看自己是64bit或32bit,至於他們有甚麼差別我就沒特別研究。


分享新手前端工程師上路的第一天都在做什麼。每個團隊、每個公司肯定不一樣,在此分享自己的第一天。

我們先把時間往前推一點。

這段時間差不多有兩週左右。
在10月中,我一邊面試一邊持續在做一個小作品 — 樂透小遊戲,源自於 Alex 的直播主題。得到 offer 後,我決定把這個小遊戲繼續完成,順便複習 Vue。除此之外,簡單認識了 Webpack ,打算直接在工作上現學現賣。最後,也很重要的,複習了Git 的一些基本操作。而前輩也丟了一個 Selenium 一個對我來說完全陌生的東西,希望我有空能先了解,並表示前端自動化測試在未來團隊開發上會佔很重要一部分。

其實在得到 offer 一直到正式上班的這段期間大約有兩個禮拜的時間,我發覺自己好像真的有點混,可是又不知道自己在混什麼,時間就這麼悄悄地流逝。

報到前一天,六角學院 廖洧傑 校長在社團PO了一篇給「 找到第一份前端工作的學員」的文章(由於社團沒有公開可能也不方便分享)裡面提到許多前端未來可以的專精方向。

總之在這略為迷茫的時間點,恰巧地又幫我點了一盞明燈。

而且我有預感在我投入前端工作後,下班可能會連電腦都不想打開,所以我給自己訂了一個小小目標: (有空就做、沒事就做、不給自己壓力的目標,一樣每個單元看完後再重新整理成一篇筆記。)

「JavaScript 全攻略:克服 JS 的奇怪部分」

源自於 Udemy 上的課程 JavaScript 全攻略:克服 JS 的奇怪部分,我在很早就買了這堂課程,他介紹了大量的「我們平常不會發現的問題」並詳細解說JavaScript 的底層概念。重點:他有中文字幕。(喜

進入正題:新手上路第一天(我們是一個新創團隊,有機會再詳細介紹。)

今天有三個新人一起報到,我(前端工程師)、視覺設計師、Android 工程師。Offer 上是提到9:30報到,但我在樓下7-11買了中熱拿和麵包後就先上樓報到了。

我們是新創團隊,所以人資也是新來的,但她跟我們這種幾乎沒什麼工作經驗的年輕人不一樣,是有豐富經歷的人資專員,從她在介紹公司制度(建構中,也希望我們可以一起提出、一起建立)以及勞工權益方面的知識看的出來她有豐富的經驗,也再次介紹了公司的發展方向。

我們資訊團隊,以我目前所知道的會有五位:全端(iOS)、全端(Android)、Android、前端(我)、好像還有一位後端(面試中)

是的,只有一位前端(抖

資訊團隊的 Leader (雖然我們幾乎是同輩,但以下就先簡稱主管吧),給了我和另外一位 Android 工程師一張便利貼,寫下希望未來在團隊中獲得什麼(技術成長/或生活方面),或者目標。同時簡單解釋一下這些目標的內容,以及簡單的目標計畫排程。透過這樣的方式簡單介紹未來團隊會使用的開發模式 Scrum 。

午餐時間沒有硬性規定,基本上一至一個半小時自己分配,不要太誇張即可。但今天跟大家一起出去覓食,認識了一下周邊環境。我們一起買回辦公室,差不多13:00左右,老闆(他不要我們叫他老闆)和兩位同事(企劃部)出差回來,加入我們的飯局,跟我們分享了一些企業間的八卦就超過兩點了(聽說常常會這樣)。

延續中午前,主管說明近期我們要進行的任務(專案),算是一個訓練團隊默契的打怪練功任務,介紹了未來開發團隊可能會使用的一些實用工具和學習資源。

此外,制定了一些學習目標,讓我們有一個學習的方向。主管希望我除了Web前端外,能去認識 Android App 的基礎開發(真是一大挑戰)。可能輪不到我來開發,但希望我的 Web前端的設計能力能夠協助未來的 App 開發(UI 設計部分),所以要了解一下基本知識。

最後,有一個公部門專案正在進行,資深的設計師主動與我和主管討論畫面的可行性,確認畫面要求在前後端實作上是否可行。然而專案似乎與業主那邊討論的非常不愉快(公部門超難搞大家應該都知道),因此在設計稿與內容還沒做好之前我似乎還不需要上戰場。

由於是上班第一天,導致我昨晚有點失眠並且得了小感冒,我真的是很容易緊張,可是又帶點興奮...。

所以整天下來精神其實不太好,到了這個時間已經有點恍神了,我也不知道我在幹嘛。總之,如果有剩下的時間,基本上就是自我管理,做自己的事,整理今天的工作內容、自我進修,然後等下班(逃。

以上就是菜鳥工程師報到的第一天。(擤鼻涕


全域環境

我們已經知道,不論何時執行 JavaScript 程式,他都是在執行環境 (Execution Context) 裡面執行。所以當我們打開一個空白的 JavaScript 程式時,畫面上是空白的沒有錯,但現在我們看到的是他背後的整個執行環境被建立和執行。

而這一個基礎的執行環境 (Base execution context) 或稱為全域執行環境 (Global execution context),是程式一開始執行時的最初的環境,當我們稱它為全域 (Global) 時,表示我們可以在任何地方取用他。

全域執行環境在一開始就創造了兩個東西:Global Object 和 this 變數。


A name which maps to a unique value.
一個名稱會對應到唯一的值。

在任何一個執行環境中,一段正在執行的程式碼,同樣的名稱只會有一個,而一個名稱只能被一個直定義。而這個值也可能是一個「名稱/值配對」(就是接下來要介紹的物件)。

Adderss = '真新鎮大木路100號' //一個名稱配一個值。

A collection of name value pairs.
物件,就是名稱/值配對的組合。

在其他語言裡面物件可能有更複雜的概念,但在 JavaScript 裡,物件就是這樣而已。

Address: {
Street: '大木路',
Number: '100',
Apartment: {
Floor: 4,
Number: 123,
}
}
整理這一系列文章的目的最主要是幫助自己能更深入了解 JavaScript 掌握核心概念。文章內容皆源自於 JavaScript 全攻略:克服 JS 的奇怪部分 此一線上課程。若內容有錯誤敬請不吝指正。

來自「JavaScript 全攻略:克服 JS 的奇怪部分」的整理

本篇主題主要介紹在「 JavaScript 全攻略:克服 JS 的奇怪部分 」會遇到的幾個專有名詞解釋:語法解析器、執行環境、詞彙環境。

A program that reads your code and determines what is dose and if its grammar is valid.
一個程式,能夠閱讀你的程式碼並決定如何動作,如果你的語法是有效的。

當我們在寫 JavaScript 時,你的程式碼並不會神奇的直接告訴電腦該做什麼,而是有人寫了一個程式,這個程式會一個字一個字的讀你的程式碼,並且判斷語法是否有效,最後轉換你的 JavaScript 成為電腦看得懂的東西,這些程式稱為編譯器 (Compilers)。

圖片來源:JavaScript 全攻略:克服 JS 的奇怪部分

也就是說,直接給電腦執行的不是你的程式碼,而是被轉換過的,所以這些編譯器在編譯時,其實可以做一些事情 (Extra Stuff) ,這對於了解 JavaScript 是很重要的,我們之後會再看到他。

Where something sits physically in the code you write.
程式碼在程式中實際所在的位置。

在此討論的是你寫的程式碼,它的語法、它的單字。詞彙環境存在於一些程式語言中,這些程式語言認為程式碼寫在哪裡是很重要的。(不是每個程式語言都這樣)因為它幫助語法解析器 ( Syntax Parser ) 做決定,當我們談到程式碼的詞彙環境( Lexical Environment )時,其實就是在討論:他被寫在哪裡?他的周圍環境是什麼?

A wrapper to help mange the code that is running.
一個包裹,幫助管理正在執行之程式。

我們有許多的詞彙環境,程式碼實際上所在的位置,但哪個才是正在執行的?就是被執行環境所管理。執行環境包含了你寫的程式碼,正在執行的程式碼,但它包含的不只有你所寫的程式碼,記得,你寫的程式碼正在被編譯器所轉換,因此他在執行你的程式碼時,還能夠做別的事情,這就是在 JavaScript 裡面所發生的,很快的我們就會在後面的單元看到。

我們說當 JS 開始執行的時候,程式碼必須被執行在下面三種環境之一。
1. 全域 Global:預設當您程式開始執行時的環境。
2. 函式:當我們進入一個函式 function 時的環境,也就是開始跑函式內部程式碼的時候。
3. Eval:把一串字串,當作指令來執行時的環境。
資料來源

整理這一系列文章的目的最主要是幫助自己能更深入了解 JavaScript 掌握核心概念。文章內容皆源自於 JavaScript 全攻略:克服 JS 的奇怪部分 此一線上課程。若內容有錯誤敬請不吝指正。


有鑑於常常迷失於javascript和jQuery中取視窗、元素的寬高、位置等
所以自己整理了各種取寬高位置的方法。

以下是原生js用法

  • clientWidth 取得元素的寬度(含padding 不含 border)較少用
  • clientHeight 取得元素的高度(含padding 不含 border)較少用
  • offsetWidth 取得元素的寬度(包含 padding 和 border)
  • offsetHeight 取得元素的高度(包含 padding 和 border)

Element.scrollHeight 是衡量元素包含因為 overflow 而沒顯示在螢幕上的內容高度的唯讀屬性。

  • scrollWidth 取得整個沒被擋住的寬
  • scrollHeight 取得整個沒被擋住的高

詳細介紹,圖解更容易懂


Demo

我們在 day11 有練習過客製化的影音播放器,上次我們是用內建的<input type=range>控制 bar(範例已修改好樣式),這次則是用自製的range bar來操作。

所有事件圍都繞在對象.speedmousemove事件上


連結:facebook for developers

  1. 直接進到facebook for developers頁面後,右上角「我的應用程式」中選擇「新增應用程式」。
  2. 建立新的應用程式。替應用程式取個名稱,例如:「臉書登入測試」。並輸入聯絡子郵件。
  3. 新增產品。來到應用程式的管理頁面,選擇「Facebook 登入」右下角的「設定」。
  4. 選擇應用程式要使用的平台,在此我們當然選擇「網站」。

接下來會自動進入到臉書預設的快速入門帶你設定。

舉例:頁面在 https://www.example.com 下的test資料夾的index.html,我們只需要輸入 https://www.example.com/test 即可
備註:似乎只能使用在https網域下,不能使用在http網域下。

我們可以依照開發人員介面的教學內容依序完 …

Nick Wu

問題解決不了的時候就解決提出問題的人。

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store