發表文章

目前顯示的是有「工程師」標籤的文章

除了Python,今天來盤點連工程師也不一定念對的單字!

-
圖片
Python到底是念"派森"還是"派桑"?該不會是"批森"!?哈!別擔心!今天終於能知道它的正確發音了! 為何我們會想寫這篇文章? 最近 達內教育 有結業的學員，本來專精英文，現在在業界任職程式設計師。他反應常常看見工程師將英文單字的發音發錯，且錯的單字發音幾乎一樣,像是 R&D 唸成 RD 等。因此筆者就蒐集「常被唸錯的英文單字」資料，並寫了這篇文章，發現無論是職場上的工程師、或是還在學習的學生、甚至是其他岡位上的人員經常把這些跟程式設計有關的英文單字唸錯。因此將這些單字整理如來如下：   Spam 請唸成[spæm] 無論是垃圾郵件，或是垃圾信都可以稱做 Spam, 有些人會看到中間的 a 就發「啊」的音，於是就變成了「斯棒」。其實這個字要唸成 [spæm]。同理，人名 Pam 不要唸成「胖」、交通堵塞 traffic jam 的「jam」與人名 Sam，中間的 a 都要以「[æ]」來發音喔！ R&D 請唸成「R and D」而不是「RD」 R&D 是 research and development(研究與開發)的縮寫，就是研發人員。請不要唸成「RD」，「RD」可是「路(road)」的縮寫，天差地遠啊！ Safari 請唸成[sə'farɪ] 重音在第二音節的 Safari 是蘋果電腦的網頁瀏覽器。他原本的意思是指在非洲大草原上，觀賞動物或打獵的旅行。許多台灣人會唸成重音第一音節，這是錯誤的。 feature phone 請唸成「feature[fitʃɚ]」 phone 而不要誤唸成「future[ˋfjutʃɚ]」 phone 雖然目前智慧型手機當道，但其實純粹只能用來打電話及收發簡訊的「feature phone(功能型手機)」仍然有它的市場。台灣也有幾間公司在代工這類型手機的，只是無意之間常聽到裡面的工程師誤把「feature phone(功能型手機)」， 誤唸成「future phone(未來手機)」。 parameter 請唸成[pəˋræmətɚ] parameter 是「參數」、「向量」的意思，重音是在第二音節。請不要再把重音放在第一...
閱讀完整內容

看過這篇,你還敢說零基礎踏入前端工程師界很困難嗎?

-
圖片
想成為前端工程師嗎?今天即使選擇自學,看完這篇你將不再是手無寸鐵! 今天小編要跟大家分享的文章是關於零基礎如何自學成 前端工程師 。目前網路發展迅速，前端也成了很重要的崗位之一，前端開發是很簡單的程式設計，甚至都不能叫做程式設計，因為它真的很簡單，很多想要轉行進入 IT 行業的新手會選擇 前端工程師 。那要怎麼自學?下面就來和小編一起來看一看文章吧~首先我們學習前端，要知道前端的三個大內容， HTML 、 CSS 、 JavaScript ，其中 HTML 和 CSS 是相互結合著學習，掌握了這兩個了以後我們就算真正入門了，然後再深入學習 JavaScript 等等。   一、首先我們要理解 HTML 、 CSS 、 JavaScript 分別是什麼？ 用這種觀點來看，其實就很好理解了： HTML 就相當於一個人， CSS 相當於一個人穿著的衣服， JavaScrip t 相當於讓這個人做什麼動作，而這個人就是網站，需要有 header 頭，body 身體，footer 腳……。而網站所呈現給我們各種各樣的樣子，就是我們寫的 CSS 樣式，網站裡的動態效果，都是我們用  JavaScript 去實現的。   二、零基礎學 前端工程師 難學嗎? 想知道 前端工程師 技術，自學的話難不難的新手，可以跟著下面的步驟一起來設計製造一個專屬的網頁！相信你就會知道。我們用到的軟件呢，對於入門級來說，我們一般推薦大家用 DreamWeaver，當你新建一個 HTML 後，出現的界面是這樣的： 下面我們開始輸入原始碼，我們可以看到這裡有這樣的原始碼<body></body>，這個就是我們網頁的身體，我們接下來要輸入的內容都是在這中間輸入的，這個括號表示的標籤，標籤都是一前一後的，成對兒出現的，除了一些特殊的標籤，隨後我們再一一給大家講解。現在我們輸入點內容，看看效果。 我們輸入一個標籤<div><div>，點擊右上角的地球瀏覽一下，會發現彈出了一個空網頁，什麼也沒有，那是因為我們現在只書寫了 HTML ，還沒有寫 CSS ，簡單來說就是，我們創建了一個東西在頁面裡，但是還沒有設置這個東西長什麼樣子，現在我們在設置它的樣子 ...
閱讀完整內容

前端工程師必備神器Emmet(四)快速設定顯示文字與自訂屬性值

-
圖片
這篇當然也要替前端工程師好好介紹Emmet的功能!這次要介紹如何快速設定顯示文字和自訂屬性值,用過的都說讚! 前端工程師 必備「Emmet」基礎教學目錄： 如何使用 Emmet 快速產生 HTML 標籤名稱 如何使用 Emmet 快速產生 階層 如何使用 Emmet 複製元素與設定流水編號 如何使用 Emmet 快速設定顯示文字與自訂屬性值 顯示文字 使用 Emmet 能讓 前端工程師 快速展開各種 HTML 元素，但如果能在撰寫的時候就能產生內文，而不需等到元素展開後才補上內文，這樣不就更方便了嗎！別擔心，這個功能，萬能的Emmet 也有！不塊是 前端工程師 的省時神器呀！ 如果想要產生元素中的文字時，可以透過加上 {} 大括號並在其中寫上文字，如我們想要輸入名為「標題」的 h1 標籤、名為「副標題」的 h2 標籤，以及內容為 「內文」 的 p 標籤，就輸入「h1{標題}+h2{副標題}+p{內文}」後按下 Ctrl+E。 } 自訂屬性值 Emmet 除了可以讓 前端工程師 快速展開標籤與文字之外，對於像是 a href、img 等需要設定屬性的標籤，也可以在寫的時候就產生。 如果想要產生元素中的屬性時，可以透過加上 [] 中括號並在其中寫上屬性與值的內容，值需要用雙引號或是單引號包起來。例如我們今天要產生一個連結到網站「https://www.tedu.tw」的 a 元素，就輸入「a[href="https://www.tedu.tw"]」後按下 Ctrl+E。   若想要增加顯示文字，則在 [] 中括號後方加上{} 大括號並在其中寫上文字即可。承上例，我們可加上「達內教育」文字，就輸入「[a[href="https://www.tedu.tw"]{達內教育}」後按下 Ctrl+E。 若想要在 HTML 中，多增加一些屬性值，只要在同一個 [] 中括號中，將每個屬性值用空格隔開就可以了。如在上個例子中，想要設定網站在新分頁開啟，我們就輸入輸入「[a[href="https://www.tedu.tw" target="blank...
閱讀完整內容

前端工程師必備神器Emmet(三)快速複製元素與設定流水編號

-
圖片
關於前端工程師必備的神器Emmet,今天要帶給你的是它"快速複製元素和設定流水編號"的超方便功能! 前端工程師 必備「Emmet」基礎教學目錄： 如何使用 Emmet 快速產生 HTML 標籤名稱 如何使用 Emmet 快速產生 階層 如何使用 Emmet 複製元素與設定流水編號 如何使用 Emmet 快速設定顯示文字與自訂屬性值 複製元素 當 前端工程師 要產生 ol 或是 ul 清單標籤時，都會包含一拖拉庫的 li 元素。如果要一個一個手動輸入的話，就算是使用 Emmet 的「+」快捷輸入法，還是會花上不少時間。 然而，幸好 Emmet 有複製的快捷輸入法：「*」。 用法是：若在編寫 HTML 時，想要一次產生 5 個相同的元素的話，就在原宿後方輸入「*5」。以此類推，產生 7 個就是「*7」。假使我們今天要建立一個 ul 清單標籤，包含 5 個 li 元素，語法就可以這樣寫「ul>li*5」之後再按 ctrl+E 即可。 再假設我們要在一個 .news 中放置 5 個 .block，然後每個 .block 中都有 1 個 h2 標題及 3 個 p 段落，每個 p 段落中又放置兩張圖片，則輸入「.news>(.block>h2+(p>img*2)*2)*5」 編號 有時 前端工程師 在 HTML 裡輸入 li 標籤時，會給這些 li 一個共用的 .className 以及流水編號。若搭配 Emmet 的「$」時，就可以快速的產生。例如，今天我們要輸入五個 li 標籤，標籤的 class name 分別為 list-1、list-2、list-3、list-4、list-5，則輸入「li.list-$*5」 若要在這些流水編號前面加個「零」，例如 01、001，只要補上相對數量的 $ 即可。像是 01 就是 $$、001 就是 $$$。承上例，我們輸入「li.list-$$*5」以及「li.list-$$$*5」 設定起始編號 $的用法，預設數字是從 1 開始累加。有時 前端工程師 會需要指定起始的數字，這時則在 $ 後面多補上一個 @ 並加上指定的起始數...
閱讀完整內容

前端工程師必備神器Emmet(二)快速產生階層

-
圖片
前端工程師的必備品Emmet可是有很多超好用的功能的!一定要耐心看到最後呀! 前端工程師 必備「Emmet」基礎教學目錄： 如何使用 Emmet 快速產生 HTML 標籤名稱 如何使用 Emmet 快速產生 階層 如何使用 Emmet 複製元素與設定流水編號 如何使用 Emmet 快速設定顯示文字與自訂屬性值   父子兄弟階層、群組、上一層 這一篇 有簡略說到父子階層（父元素與子元素）之間的關係。想成為 前端工程師 的同學們看過來啊！未來你們在處理網頁時，一定會遇到父子元素、兄弟元素等，而本文就簡單列出各種階層關係的 Emmet 縮寫方式：   父子元素一次輸入 前端工程師 在編寫 HTML 時，一定會知道：使用 Emment 在設定子元素時非常方便！只要在父子元素間加入 > 符號即可。如下方的動態圖所示：假設我們要在 class name 名為「news_p」以及 id 名為「paragraph1」的 div 父元素中放置 子元素 p，並在 p 中在加上孫元素 ol 與 li 等動作，只要輸入「.news_p#paragraph1>p>ol>li」後按下 ctrl+E 就可一次寫完！ 兄弟階層一次輸入 承上面「父子元素一次輸入」的範例，若想在 p 的上方放置 h2 標題，但是 h2 標題不屬於 p 的父元素，位階是跟 p 同等的，則 h2 與 p 互為兄弟元素。 上方提到：元素間互為父子關係則用 > 隔開；若為兄弟元素，就用「+」隔開。因此此例為輸入「.news_p#paragraph1>h2+p>ol>li」 將元素設為同一階層的群組 承上面「兄弟階層一次輸入」的範例，若 前端工程師 想在互為兄弟階層的 h2+p 的階層下，再多放一組一模一樣且位階相同的 h2+p 的階層的話該如何做？那就把 h2+p 視為一個群組，用 () 括號的方式包起來，把用括號起來元素視為同一階層來看即可，所以我們的語法就可以這樣寫「.news_p#paragraph1>(h2+p>ol>li)+(h2+p>ol>li)」之後再按 ctrl+E 即可。 ...
閱讀完整內容

前端工程師入門HTML5就靠這些撇步!(11下)SVG路徑動畫

-
圖片
HTML5裡的SVG動畫繪製技巧傳授可還沒結束!今天要教你另一項:路徑動畫,讓你學好學滿! 前端工程師 必備技能：SVG 路徑動畫 我們可以使用 HTML5 中的 <path> 元素來定義路徑。 SVG Path 基本指令列表 See the Pen SVG Path 基本指令-L by Tedutw ( @Tedutw ) on CodePen . See the Pen SVG Path 基本指令-H by Tedutw ( @Tedutw ) on CodePen . See the Pen SVG Path 基本指令-Y by Tedutw ( @Tedutw ) on CodePen . See the Pen SVG Path 基本指令-C by Tedutw ( @Tedutw ) on CodePen . (圖片取自：iT邦幫忙) <path D="M0 0 C40 40,60 40,100,0 S150 -40, 200 0" stroke="black" fill="none"/> See the Pen SVG Path 基本指令-Q by Tedutw ( @Tedutw ) on CodePen . See the Pen SVG Path 基本指令-T by Tedutw ( @Tedutw ) on CodePen . See the Pen SVG Path 基本指令-Z by Tedutw ( @Tedutw ) on CodePen . - M 起始點的 x,y 座標 (move to) - L 從「目前的點」的座標畫直線，到指定點的 x,y 座標 (line to) - H 從「目前的點」的座標畫水平線，到指定的 x 座標 (horizontal line to) -V 從「目前的點」的座標畫垂直線，到指定的 y 軸座標 (vertical line to) -C 從「目前的點」的座標，畫條貝茲曲線，到指定點的 x,y 座標。如下圖的曲線，C 的部分會有三組 x,y 座標：其中第一組以及第二組 x,y 座標為控制曲...
閱讀完整內容

前端工程師入門HTML5就靠這些撇步!(11上)SVG圖形動

-
圖片
HTML5課程從不讓你失望啊!關於SVG,還有動畫篇要教你呢!那麼,就先教你如何畫出圖形動畫吧! 前端工程師 必備技能：SVG 基本圖形動畫 我們可以使用 <animate> 元素來繪製 SVG 動畫。 今天，我們先來繪製一個方形，並且將動作設定在三秒鐘內往右移動，然後會重複相同的動作 3 次。 HTML5 原始碼與結果如下所示： See the Pen SVG 基本圖形動畫 by Tedutw ( @Tedutw ) on CodePen . 以上所有 前端工程師 會使用到的 HTML5 標籤說明如下： -  <attributeName> 屬性名稱，就是當你指定了這個屬性，就會以這個屬性去做動作。在本例中指定紫色方塊要水平位移，水平移動的座標為 x，所以該例中 attributeName 為 x。若為垂直移動的話，attributeName 則為 y。 - <from>  動畫開始時的屬性值。 - <to> 結束動畫時的屬性值。 -  <dur> 動畫持續時間。 -  <repeatCount> 動畫重複次數。在本例中重複 3 次所以 repeatCount 設為 3；若要動畫無限重複的話， repeatCount 則設為 indefinite。 -  <fill (freeze | remove)> 這裡的 fill 不代表填色，而是指定動畫結束時的屬性，屬性可選 freeze 或是 remove，remove 是預設值，也就是動畫結束之後，圖形返回原本的狀態，而 freeze 則是在動畫結束後，固定在結束的狀態 相關文章： 前端工程師入門HTML5就靠這些撇步!(11下)SVG路徑動畫 前端工程師入門HTML5就靠這些撇步!(9)地理位置定位 前端工程師入門HTML5就靠這些撇步!(10)SVG向量圖 SEO圖片優化八大招式之(1)-圖檔命名與alt文字密技 暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~ 哈利波特續集作者不是JK羅琳?是Python課程!? ...
閱讀完整內容

前端工程師必備神器Emmet(一)快速產生標籤名稱

-
圖片
久違的前端工程師課程,老師上到了我從來沒聽過的Emmet!原來是我太遜了,每個前端工程師都早知道啦! 前端工程師 必備「Emmet」基礎教學目錄： 如何使用 Emmet 快速產生 HTML 標籤名稱 如何使用 Emmet 快速產生 階層 如何使用 Emmet 複製元素與設定流水編號 如何使用 Emmet 快速設定顯示文字與自訂屬性值 身為一個 前端工程師 ，一定要裝一個「省時神器」 Emmet 外掛，它可是可以大大節省前端工程師編寫 HTML 及 CSS 的時間啊！省下的時間還可以讓你去體驗人生各種美好的事物，像是：玩玩喵星人、上上健身房運動等等～ Emmet 支援的網頁編輯器如下圖：   安裝的方式因各網頁的編輯器而異，且在網路上都可以查到，故此省略。以下就是小編先介紹基本的使用方式： 快速產生標籤名稱 （Tag Name） 前端工程師 在寫網頁的第一步，就是在網頁編輯器中開出新的頁面，並產生標準的 HTML5 樣板。而透過 Emmet，我們可以先在編輯器中輸入「!」或是「html:5」後，再按下 Ctrl+E 鍵即可。 假設我們要產生一個 p 元素，那麼我們只要直接輸入 p 後，再按下 Ctrl+E 鍵，就能自動產生起始元素及結束元素。如下所示： 只要是 HTML 所定義的元素，如 h1-h6、center、title 等等，都能使用上述方示，快速產生出相對應的語法如下： 有些元素還會帶入跟該元素有關的屬性，例如：iframe、a 或是 img 等 快速產生 className 與 id 我們也可以在產生元素時，直接加上指定的 Class Name。寫法是元素名稱與 Class Name 名稱中間用英文句點隔開。例如今天我們要產生 Class Name 為「title」的 h1 標籤，則輸入「h1.title」後按 Ctrl+E 若是要針對單一元素要加上多個 class name 的話，只要把它們用半形的句號隔開，接在一起就可以了。例如今天我們要產生 Class Name 為「news_p c1」的 div 標籤，則輸入「div.news_p.c1...
閱讀完整內容