
設計人工智慧的工程師大推好用的音樂究竟多好用?不僅放鬆心情還能提高工作效率!
使用說明:
1. 進入網站 http://musicforprogramming.net/ ,你會發現網頁的設計採 Geek 風格,是模擬工程師們編寫原始碼時的的畫面。如下圖中紅框內所示,目前網站內有 55 張音樂專輯可選 (且還在陸續新增中)。你先在你想要聽的專輯按滑鼠左鍵兩下。


推薦文章:
令人遺憾!人工智慧傳奇Nils Nilsson逝世,享年86歲!
1. 進入網站 http://musicforprogramming.net/ ,你會發現網頁的設計採 Geek 風格,是模擬工程師們編寫原始碼時的的畫面。如下圖中紅框內所示,目前網站內有 55 張音樂專輯可選 (且還在陸續新增中)。你先在你想要聽的專輯按滑鼠左鍵兩下。
推薦文章:
令人遺憾!人工智慧傳奇Nils Nilsson逝世,享年86歲!
為何我們會想寫這篇文章?
最近達內教育有結業的學員,本來專精英文,現在在業界任職程式設計師。他反應常常看見工程師將英文單字的發音發錯,且錯的單字發音幾乎一樣,像是 R&D 唸成 RD 等。因此筆者就蒐集「常被唸錯的英文單字」資料,並寫了這篇文章,發現無論是職場上的工程師、或是還在學習的學生、甚至是其他岡位上的人員經常把這些跟程式設計有關的英文單字唸錯。因此將這些單字整理如來如下:
請唸成[spæm]
不管是垃圾郵件還是垃圾信都可以稱做 Spam, 有些人會看到中間的 a 就發「啊」的音,於是就變成了「斯棒」。其實這個字要唸成 [spæm],同理,人名 Pam 不要唸成「胖」、交通堵塞 traffic jam 的「jam」與人名 Sam,中間的 a 都要以「[æ]」來發音哦。
請唸成「R and D」而不是「RD」
R&D 是 research and development(研究與開發)的縮寫,就是研發人員的意思。請不要唸成「RD」,「RD」是「路(road)」的縮寫。
請唸成[sə’farɪ]
重音在第二音節的 Safari 是蘋果電腦的網頁瀏覽器。它原本的意思是指在非洲大草原上,觀賞動物或打獵的旅行。許多台灣人會唸成重音第一音節,是錯誤的。
請唸成「feature[fitʃɚ]」 phone 而不要誤唸成「future[ˋfjutʃɚ]」 phone
雖然目前智慧型手機當道,但是純粹只能用來打電話及收發簡訊的「feature phone(功能型手機)」仍然有它的市場。台灣也有幾間公司在代工這類型的手機,只是無意之間常聽到裡面的工程師誤把「feature phone(功能型手機)」 誤唸成「future phone(未來手機)」。
請唸成[pəˋræmətɚ]
parameter 是「參數」、「向量」的意思,重音在第二音節。請不要再把重音放在第一音節唸囉。
請唸成[‘pradəkt]
這是大家都熟悉的一個單字,是「產品」的意思,但是後面的 ct 的氣音請別忽略掉,否則聽起來就像「Prada」
請唸成[ˈæməzɑːn]、[ˈæməzən]
亞馬遜公司的美式發音比較相近「A-me攢」,重音第一音節,許多台灣人都誤唸成「阿嬤zone」或是「阿妹zone」。
請唸成[skaip]、[æp]
Skype 字尾的「E」不發音,請別誤唸成「死該~痞」了!而 App 要唸成[æp]才到位。
請唸成[si͵ɛn’ɛn]而不是[‘si’ən’ən]
這個字的重音在第三音節。這類組合字母的縮寫,重音都要放在最後一個字母,同理 HBO 的重音也在 O。
請唸成[p’ɑɪθɑn](美式)或是[p’ɑɪθən]
Python 可說是 AI 人工智慧產業的必備語言,網路上也經常有關於 Python 正確發音到底是「派桑」還是「派森」的爭論。其實這兩種發音都正確,只是「派桑[p’ɑɪθɑn]」偏向美式、而「派森[p’ɑɪθən]」是英式發音。
推薦文章:
選對很重要!程式語言選Python的8大理由(上)
今天小編要跟大家分享的文章是關於零基礎如何自學成前端工程師。目前網路發展迅速,前端也成為很重要的崗位之一,前端開發是屬於很簡單的程式設計,甚至都不能叫做程式設計,因為它真的很簡單,有很多想要轉行進入 IT 行業的新手會選擇當前端工程師。那該怎麼自學?以下就來和小編一起來看一看文章吧~首先我們學習前端,得要知道前端的三個大內容,HTML、CSS、JavaScript,其中 HTML5 和 CSS 是相互結合著學習,掌握了這兩個了以後我們就算真正入門了,然後再深入學習 JavaScript 等等。
HTML 就相當於一個人,CSS 相當於一個人穿著的衣服,JavaScript相當於讓這個人做什麼動作,這樣一形容呢,我們就很好理解了,這個人就是網站,需要有 header 頭,body 身體,footer 腳……而網站所呈現給我們各種各樣的樣子就是我們寫的 CSS 樣式,網站裡的動態效果就都是我們的 JavaScript 去實現的。
想知道前端工程師技術難不難學的新手可以跟著下面的步驟一起來設計製造一個專屬的網頁,相信你就會知道。我們用到的軟件呢,對於入門級來說我們一般推薦大家用 DreamWeaver,新建一個 HTML 後,出現的界面是這樣的,
2、在<head></head>裡寫入這樣一組標籤<style></style>這個style的意思就是CSS,我們整個網站要加的所有樣式都是寫在這個中間的。
3、我們在style裡寫樣式,電腦首先要知道我們給誰加樣式,所有我們寫個.aaa 這個.(點)的意思是我要給aaa加樣式,電腦會自動把.(點)後面的名字,跟下面body裡的名字做一個匹配,這樣電腦就知道,哦~原來你是要給這個div加樣式呀,
4、然後我們把要給這個div加的樣式寫在大括號裡,Width:100px; 意思是這個div的寬是100像素,height:100px; 意思是高是100像素,background-color:#FF0000;意思是背景顏色是#FF0000這個顏色,
注意:
(1)這裡我要給大家解釋一下,大家別看這麼多原始碼,這麼多專有名詞,其實軟件有提示,像下面這樣,直接輸入第一個字母後面的專有名詞就出現了,直接選中就行了,連專有名詞都不用背,前端真的很簡單,
下面我們繼續設置好了以後,我們就可以在 Dreamweaver 狀態列中按一下「即時預覽」。若你看到了紅色正方形的畫面,那恭喜你,你成功了!
推薦文章:
SEO無痛該怎麼做?資深前端工程師教你對的方法!
前端工程師必備「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。
推薦文章:
成為專業前端工程師前,先搞定CSS背景位置設定!
暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~
前端工程師必備「Emmet」基礎教學目錄:
當前端工程師要產生 ol 或是 ul 清單標籤時,都會包含一拖拉庫的 li 元素。假設要一個一個手動輸入的話,就算是使用 Emmet 的「+」快捷輸入法,還是會花不少時間的。幸好 Emmet 有複製的快捷輸入法:「*」。用法是:若想要一次產生 5 個相同的元素的話,就在原宿後方輸入「*5」。由此類推,產生 7 個就是「*7」。假使我們今天要建立一個 ul 清單標籤,包含 5 個 li 元素,語法就可以這樣寫「ul>li*5」之後再按 ctrl+E 即可。
有時前端工程師會在HTML輸入 li 標籤時,會給這些 li 一個共用的 .className 以及流水編號。若搭配 Emmet 的「$」時,就可以快速的產生。例如,今天我們要輸入五個 li 標籤,標籤的 class name 分別為 list-1、list-2、list-3、list-4、list-5,則輸入「li.list-$*5」
$的用法,預設數字是從 1 開始累加。有時前端工程師會需要指定起始數字,這時則在 $ 後面多補上一個 @ 並加上指定的起始數字,承接上例,我們要設定起始數字為 5 就輸入「[email protected]*5」
推薦文章:
資深前端工程師之Emmet教學(4)-設定顯示文字與屬性值
前端工程師必備「Emmet」基礎教學目錄:
這一篇有簡略說到父子階層(父元素與子元素)之間的關係。想成為前端工程師的同學們未來在處理網頁時,一定會遇到父子元素、兄弟元素等。本文就簡單列出各種階層關係的 Emmet 縮寫方式:
前端工程師在使用 Emment 在設定HTML的子元素時非常方便,只要在父子元素間加入這個” > “符號即可。如下方的動態圖所示:假設我們要在 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 即可。
承上面「群組 Grouping」的範例,若前端工程師想在兩個互為兄弟階層的 h2+p 群組後方,新增一個 div 父元素(class name 名為「news_p」以及 id 名為「paragraph2」),就可以在元素間加入 ^ 符號即可。所以語法就可以這樣寫「.news_p#paragraph1>(h2+p>ol>li)+(h2+p>ol>li)^.news_p#paragraph2」之後再按 ctrl+E 即可。
如果你想成為專業的前端工程師,這些快速鍵可要記得多練習幾次,熟練後就能在編寫 HTML 時更有效率啦!
推薦文章:
資深前端工程師之Emmet教學(3)快速複製元素與設定編號
今天一起揪出來-那些偷偷藏著Python和Java的電影(上)
前端工程師必備「Emmet」基礎教學目錄:
身為一個前端工程師,一定要裝一個「省時神器」 Emmet 外掛,這不僅可以大大節省前端工程師在編寫 HTML 及 CSS 的時間,還可以省下的時間可以讓你去體驗人生各種美好的事物,如玩玩喵星人、上上健身房運動等等。
Emmet 支援的網頁編輯器如下圖:
前端工程師在寫網頁的第一步,就是在網頁編輯器中開出新的頁面,並產生標準的 HTML 樣板。透過 Emmet,我們可以先在編輯器中輸入「!」或是「html:5」後,再按下 Ctrl+E 鍵即可。
我們也可以在產生元素時,直接加上指定的 Class Name。寫法是元素名稱與 Class Name 名稱中間用英文句點隔開。例如今天我們要產生 Class Name 為「title」的 h1 標籤,則輸入「h1.title」後按 Ctrl+E
推薦文章:
資深前端工程師之Emmet教學(2)階層如何快速區分?
前端工程師建議如果要畫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.
<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.
推薦閱讀:
資深前端工程師淺談Box model(上集)
從達內教育評價事件來看GEEGO(奇科?)IT培訓評論的謬誤
前端工程師常常會使用 <animate> 元素來繪製 SVG 動畫。
今天我們先來學如何繪製一個方形,並且將動作設定在三秒鐘內往右移動,然後會重複相同的動作 3 次。HTML5 原始碼與結果呈現如以下所示:
See the Pen SVG 基本圖形動畫 by Tedutw (@Tedutw) on CodePen.
以上所有的 HTML5 標籤分析如下:
推薦文章:
前進前端工程師之HTML5入門課程-SVG 路徑動畫
在以往網頁設計常使用的圖片檔如 jpg、png、gif 等都是以點陣圖模式呈現,但是目前時下最流行的 RWD 響應式網頁是可以隨著螢幕調整網頁布局,點陣圖隨著螢幕大小縮放就會有模糊失真的疑慮,因此HTML5的向量的 SVG 是不錯的解決方法。
SVG(Scalable Vector Graphics,可縮放向量圖形)是 W3C 制定的開放性網路標準之一,此圖片格式再網頁中能以向量格式呈現圖片。網頁設計師可先在 Adobe Illusrator 中畫好向量圖形並存成 SVG 檔,在放在網頁中。運用方式其實就跟 .jpg、.png、.gif 等圖片檔一樣,但不同的是 SVG 檔不會因尺寸的改變而失真,日後要修改時也可直接開啟檔案修改,相當方便。
如同 .jpg、.png、.gif 的方式,SVG 圖檔使用 img 標籤被置入到 HTML5 檔中,如下方所示:
<img src="image.svg" alt="" height="300" />
要用 SVG 畫出簡單的圖形,首先前端工程師要使用 SVG 標籤製作「畫布」。要賦予其畫布的長寬 (width、height) 屬性,如下例所示:
<svg width="1000" height="1000"></svg>
在此我們先舉「畫圓形」為例子,如下所示:
<svg width="2000" height="2000"> <circle cx="80" cy="80" r="50" fill="magenta" /> </svg>
結果如下所示:
See the Pen svg circle by Tedutw (@Tedutw) on CodePen.
同理, SVG 也可以用來「畫方形」。標籤中的「circle」要改成「rect」,半徑與圓心的屬性都要換成長與寬,原始碼與結果如下所示:
See the Pen svg rect by Tedutw (@Tedutw) on CodePen.
同理可證, SVG 標籤改成「line」,x1 與 y1 定義第一點的座標、x2 與 y2 定義第二點的座標,原始碼與結果如下所示:
See the Pen svg line by Tedutw (@Tedutw) on CodePen.
三邊以上的摺線,前端 工程師可用 SVG 「polyline」(多點折線)標籤,並為五點定義座標分別為 10 10, 60 60, 110 10,160 60 與 210 10 原始碼與結果如下所示:
See the Pen svg polyline by Tedutw (@Tedutw) on CodePen.
SVG 繪製橢圓形 (ellipse) ,標籤屬性的下法與上述的「circle」類似,差別在於水平與垂直的半徑可以分別使用「rx」與「ry」來定義,原始碼與結果如下所示:
See the Pen svg ellipse by Tedutw (@Tedutw) on CodePen.
三邊以上的形狀,用 SVG 繪製多邊形 (polygon) 的原始碼與結果如下所示::
See the Pen svg polygon by Tedutw (@Tedutw) on CodePen.