娶了UI設計師的Python工程師-北歐生活

 

 
 
前端工程師開發神器Emmet,縮短你寫HTML/CSS語法的時間!
 

 
 

 

 
身為前端工程師,你聽過MySQL嗎?今天讓你對它不再陌生!
 
對於前端工程師來說，MySQL 是屬於後端工程師的技能。但是若前端工程師也略懂 MySQL 的話，無論是求職上會有莫大幫助。
因為在人力銀行網站搜尋前端工程師的職缺，會發現有些公司會把 MySQL 列為前端工程師的必備技能。通常 (非全部) 擁有 MySQL 技能的前端工程師獲得高薪的機會較大。多一項能力，調薪的籌碼就越大。
 

推薦閱讀：前端工程師的學習路線圖整理

 
我們就直接切入基礎的 MySQL教學！本篇先來簡介一下資料庫 4 大基要語句，他們分別是定義資料庫的 DDL (Data Definition Language)、操作資料庫的 DML (Data Manipulation Language)、控制資料庫的 DQL (Data Control Language) 與查詢資料用的 DCL (Data Query Language)。簡介如下：
 
資料庫定義語言 - DDL (Data Definition Language)
定義資料庫的結構，常見語句有 CREATE、DROP、ALTER。
DROP
丟棄或刪除資料庫。寫法如下：
刪除一個「已經確定存在」的資料庫：
DROP DATABASE 資料庫名稱;
範例：
DROP DATABASE xz;
刪除一個「不確定是否存在」的資料庫：
DROP DATABASE 資料庫名稱;
範例一. 在不確定名為「xz」的資料庫是否存在的狀況下，刪除 xz 資料庫：
DROP DATABASE IF EXISTS xz;

▲ 在命令提示字元使用 MySQL 的 DROP DATABASE 語法

CREATE
創建資料庫或表格。寫法為：
CREATE DATABASE 資料庫/表格名稱;
範例一、創建名為 "xz" 的資料庫：
CREATE DATABASE xz;
範例二、創建名為「FrontEndElements (網頁元素)」的表格，表格有兩個欄目，分別為「element(元素)」、「usage(用途)」；又令「element」的內容限制為 10 個字元、「usage(用途)」則為 32 字元，代碼如下所示：
CREATE TABLE FrontEndElements(`element` VARCHAR(10),`usage` VARCHAR(32));
註：MySQL 本身內建一些具有特定功能的保留字，這些保留字中包含「usage」，與我們欲建的欄目名稱同名，會令 MySQL 混淆導致無法建表 (如下圖)。

▲ 在命令提示字元使用 MySQL 創建的欄目名稱「usage」與保留字重複，而導致無法建表。

為了區分，因此加了反引號，為「`usage`」。
其實 MySQL 的保留字很多，前端工程師不可能每個都記熟。所以寧可在每次創建表格時，都在欄目名稱的左右側加上反引號。如下圖所示：

▲ 在命令提示字元使用 MySQL 創建名為「FrontEndElements (網頁元素)」的表格，表格有兩個欄目，分別為「element(元素)」、「usage(用途)」；又令「element」的內容限制為 10 個字元、「usage(用途)」則為 32 字元

資料庫操作語言 - DML (Data Manipulation Language)
INSERT
新增資料到資料表中。寫法如下：
INSERT INTO 資料表名稱 VALUE('值一','值二');
範例、今天要新增 4 個內容到上述的 "FrontEndElements" 表中，對應的欄目分別為'element'、'usage'：
INSERT INTO FrontEndElements VALUE('HTML','管理網頁的架構');
INSERT INTO FrontEndElements VALUE('CSS','管理網頁的外貌');
INSERT INTO FrontEndElements VALUE('JavaScript','管理網頁的內容以及使用者的操作行為、互動');
INSERT INTO FrontEndElements VALUE('MySQL','資料庫');

▲ 在命令提示字元使用 MySQL 創建 4 個內容，內容的值對應到兩個表格欄目「element(元素)」、「usage(用途)」。

下圖為從 MySQL 叫出表格「FrontEndElements」的所有內容。指令稍後在本文 DQL 段落會講解。

▲ 在命令提示字元使用 MySQL 觀看 FrontEndElements 表中所有內容

UPDATE
更改資料到資料表中。寫法如下：
UPDATE 資料表名稱 SET 欄位名稱='更新後的內容' WHERE 條件敘述;
範例、今天將上述的表格中，'JavaScript' 的 'usage' 修改為 '管理網頁的互動與動態內容'。如下所示：
UPDATE FrontEndElements SET `usage`='管理網頁的互動與動態內容' WHERE element='JavaScript';

▲ 在命令提示字元使用 MySQL 將「JavaScript」的 `usage`欄目中，內容改為 '管理網頁的互動與動態內容'。

DELETE
刪除資料表中的資料。寫法如下：
DELETE FROM 資料表名稱 WHERE 條件敘述;
範例、今天將上述的表格的 'SQL' 刪掉，寫法如下所示：
DELETE FROM FrontEndElements WHERE element='SQL';

▲ 在命令提示字元使用 MySQL 將名稱為「MySQL」的 整欄刪除。

資料庫查詢語言 - DQL (Data Query Language)
查詢資料使用，不會對資料產生任何更動的語句。指令只有一種：
SELECT
撈出表中的資料，例如我們要撈出上述表格的所有內容，寫法如下：
SELECT * FROM FrontEndElements;

▲ 在命令提示字元使用 MySQL 觀看 FrontEndElements 表中所有內容

資料庫控制語言 - DCL (Data Control Language)
控制用戶權限，例如把某個電商網站的管理權、上架權等不同層級的權限，分派給不同的員工。
授予權限
REVOKE
收回權限
上述的 MySQL 語句種類，前端工程師只須看得懂 DDL、DML 與 DQL 就好。下一篇文章會講述 MySQL教學中， 中文亂碼的解決方式。請想提升技能的前端工程師多多關注我們的知識庫！
 
 
延伸閱讀：

這程式開發工程師竟只有小學畢業!他到底是上那裡的Java課程?
 


農家子弟只花六個月,從零當上Java工程師!
半年Java課程CP值竟然這麼高!看看他如何拾起多年前的技能!
Facebook 開源 Python 語言的安全與隱私工具 Pysa

人工智慧又寫歌了！這次是跟重金屬天團 Metallica 致敬

暴躁老人唱情歌、憂鬱阿嬤笑了！4個翻轉家庭的人工智慧 讓家更溫暖

人工智慧貓砂盆 - 因愛貓腎病過世 工程師研發預防性貓用醫療品
 

 
前端工程師本就應該知道CSS中的定位元素有哪些~還不知道的,看到這篇算撿到寶囉!

 
 
前端工程師CSS教學織浮動屬性,今天就教你關於它的一切!!
 
CSS 的 float (浮動) 屬性
CSS 的 float (浮動) 屬性，是前端工程師在做網頁排版時，必用的基本語法之一。使用 CSS float 浮動屬性，可將一個元素往左移或是往右移，並允許其他元素圍繞它（例如文繞圖、圖繞文等）。
 
何時使用？－float 浮動屬性的使用時機
使用 <div> 等區塊元素排版時，預設的排列方式都是由左至右、由上至下。但若想要讓多個區塊並排、或是二欄、三欄等多欄網頁前端排版時，就需要使用 float 屬性。
如下方例子，若我們使用一般的 div 區塊元素時，則所有的區塊就整齊的由左上出來，一個 <div> 區塊就佔用了一行。（溫馨提示：可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法）
See the Pen Float-example-1 by Tedutw (@Tedutw) on CodePen.
承上例，若在 CSS 中加一個「float: left;」，則結果如下（溫馨提示：可以點擊下例視窗左上方的「HTML 」與「CSS」按鈕來查看語法）：
See the Pen Float-example-2 by Tedutw (@Tedutw) on CodePen.
這是因為「float」屬性使 div 區塊元素「漂浮」起來，不再形成 div 區塊占滿整行的情況
承上例，若把由左側開始「漂浮」的「float: left;」改成由右側開始「漂浮」的「float: right;」，則所有的區塊就會由右側開始「飄」出來，結果如下（溫馨提示：可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法）：
See the Pen Float-example-3 by Tedutw (@Tedutw) on CodePen.
你知道 CSS 的浮動屬性總共有三個參數嗎？分別是：left、right 與 none。left 與 right 顧名思義，就是控制區塊由左側還是右側浮出用的拉！如上方兩個例子所示。而 none 就是不使用浮動參數的意思。
下方是另一個文繞圖排版的例子，就是文字的部分「不」設定 float 屬性，但是在 logo 圖片的部分使用浮動屬性「float:right;」，文字的部分則不使用浮動屬性。（溫馨提示：可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法）
See the Pen Float-example-4 by Tedutw (@Tedutw) on CodePen.
若前端工程師想要做出兩欄或多欄的網頁，則可以善用 float 屬性搭配寬度需要進行初步的排版。
以下範例為兩欄的排版示例。兩個欄位視為兩個區塊， float 屬性都設定為「left」，左欄寬度為 20%；右欄為 80%：
See the Pen Float-example-5 by Tedutw (@Tedutw) on CodePen.
網路上有人說：前端工程師的網頁 layout 基石除了本章介紹的浮動（float） 屬性之外，還有下一張會介紹的清除浮動（clear）。想當前端工程師的各位同學們請先把本章再複習一次，並親自使用 codepen 自己練習一次程式，才會達到最佳的學習效果！
 
延伸閱讀看這裡：

關於前端工程師的CSS必勝技能-定位元素

前端工程師入門教學看這裡!(22)數學物件


想成為前端工程師,後端和全端也不能陌生呀!
AI人工智慧救地球！Google：AI 保護環境還比人類快 3000 倍


CSS教學-display與visible屬性介紹


用Python寫出唐鳳「番茄鐘工作法」程式，讓AI幫你集中注意力!
AI機器狗Aibo成最新愛寵 真狗會被取代嗎？

 
網頁前端的CSS排版屬性怎能一問三不知?今天來介紹兩個必備屬性:display和visible屬性~
 
 
本篇介紹網頁前端排版的兩個 CSS 屬性：display 屬性與 visibility 屬性。
CSS：display 屬性
display:block
 
對於 CSS 語法來說，網頁前端的每個元素都是一個矩形盒（rectangular box）模型。而使用「display」屬性，便可以決定「盒（box）」的呈現方式。
又「區塊元素（block element）」則會佔用可用寬度的最大值，前後有換行符。
以下範例分別顯示了是否有將<span>元素顯示為區塊元素（block element）的結果。
在下方的顯示視窗中，按「CSS」，就可以觀看 CSS 的語法如何設定了！
See the Pen display: block by Tedutw (@Tedutw) on CodePen.
上述範例的網頁前端 CSS 語法設定如下：
span.block{
display:block;
}
display:inline
inline 元素只佔用可用寬度的最大值，並不強制換行。
將上一段範例的<span>元素，CSS 換成「display: inline」的結果如下。跟上一個範例一樣，在下方的顯示視窗中，按「CSS」可以觀看 CSS 的語法如何設定。
See the Pen display: block by Tedutw (@Tedutw) on CodePen.
上述範例的 CSS 語法設定如下：
span{
display:inline;
}
display:none
「display:none」用來將元素隱藏使用，當元素隱藏後，就不佔用任何空間了，且在網頁前端頁面顯示時也不會被展現出來，就好像該元素不存在一樣。
 
在以下範例中，我們將第 2、4 段設為「display:none」，其他設為「display:block」。
See the Pen display: none by Tedutw (@Tedutw) on CodePen.
上述介紹的「block」、「inline」、「none」都是最常碰到的的 display 參數。display 當然還有很多其他次常用的參數值，如 list-item、table、table-cell、table-column、grid 等，將會在往後的章節中一一介紹
 
CSS：visibility 屬性
visibility 屬性用於指定元素是可見的還是隱藏的。最常見的值是 visible 和 hidden
當我們想要隱藏園素食，有兩個方法：一是上一段介紹的，將「display」屬性設為「 none」參數；二是將「visibility」屬性設置為「hidden」來隱藏元素。
注意：以上兩個方法雖然都能將元素隱藏，但都呈現出不同的結果：
被「display:none」隱藏後的元素，就不會佔用任何的空間，就好像它從來都不存在一樣；而被「visibility:hidden」隱藏後的元素，雖然在網頁前端不會顯示，但仍佔用了對應的空間（就是被隱藏的元素有多大，網頁上空出來的空間就有多大），所以仍會影響排版。範例如下：
我們準備要將以下的例子，第一個<p>元素設為「visibility:hidden」、第二個<p>元素設為「display: none」。
See the Pen visible:hidden-before by Tedutw (@Tedutw) on CodePen.
將以上的第一個<p>元素設為「visibility:hidden」、第二個<p>元素設為「display: none」的結果如下：
See the Pen visible:hidden-after by Tedutw (@Tedutw) on CodePen.
由以上例子我們可知，同樣都是將元素隱藏，第一個<p>元素雖然被「visibility:hidden」隱藏了，但是仍遺留下空間；第二個被「display: none」隱藏的<p>元素則是完完整整的「被消失」，連原本的位置都不見了。
下一張我們將介紹網頁前端排版的另一個 CSS 屬性：Positioning Elements。
 
延伸閱讀看這裡：

用Python寫出唐鳳「番茄鐘工作法」程式，讓AI幫你集中注意力!


AI機器狗Aibo成最新愛寵 真狗會被取代嗎？
今年10月即將入手的新身分證，它的UI設計有啥亮點？

你是我的眼！Google AI 眼鏡助視障朋友「看見」世界


學習網頁前端開發技術為何一定要懂JavaScript?


零基礎的人想學網站前端,看這裡就對啦!
前端工程師也能成功入門全端和後端!


 
 

 
 
想知道前端工程師必學的MATH物件屬性嗎?今天這篇讓你小試身手一下~
 
Math物件的屬性
Math 是 JavaScript 的原生物件，可進行多種數學運算。該物件不是用函式建構式來生成，所有的屬性和方法都必須在 Math 物件上呼叫。
Math 物件包含多種屬性，列舉如下表：
 
以上 Math 物件的屬性，範例如下：
See the Pen The Math object by Tedutw (@Tedutw) on CodePen.
 
Math物件的方法
Math 物件除了有許多屬性外，也有許多方法，列表如下：
 
以上 Math 物件的方法，範例如下（不包含三角函數）：
See the Pen The Math object-method by Tedutw (@Tedutw) on CodePen.
 
除了給前端工程師，其他人也可以嘗試的綜合練習！
讓我們來撰寫一個 JavaScript 程式：首先彈出一個視窗，要求使用者輸入數字。使用者輸入數字後，即會出現警示視窗，顯示著該數字的平方根。
var x = prompt("請輸入一個數字","");
var answer = Math.sqrt(x);
alert(x+" 的平方根是 "+ answer);
執行結果如下：
 
 
此時我們輸入「64」，則會有以下結果：
JavaScript 的數學物件就介紹到此。若前端工程師能在HTML中善用數學物件，則可減省時間，根本不必自己寫函數啦！
下一章我們將介紹另一個 JavaScript 的原生物件——日期物件。
 
延伸閱讀看這裡：

JavaScript初學者該知道的事(21)陣列的方法與屬性


通往Java的康莊大道~(1)先來了解它身世之謎!
還不曉得JavaScript有多強大?看完這篇馬上被說服!

人生是自己的, 達內教育評價要靠自己來體驗!


痛失英才！台灣人工智慧學校執行長陳昇瑋辭世

用Python寫出唐鳳「番茄鐘工作法」程式，讓AI幫你集中注意力!

達內教育評價:別再抱怨不景氣了!高中生靠SEM接案創業每月額外收入7萬

 
關於前端工程師要知道的JavaScript變數命名規範,今天整理給你看!

 
今天的文章要講久違的前端工程師!但除了他,再跟你分析前端工程師和後端及全端工程師的差別!
 
業界對於網站開發工程師的需求，一直沒有停止過，也吸引很多非本科系出身的同學想轉職到網站開發工程師。
但是常常聽到網站開發工程師還有分成「前端工程師」、「後端工程師」，還有綜合上述的「全站（full-stack）工程師」。
今天就來解惑：這三種聽起來超像的職位到底差在哪？我又該選哪種學習比較好上手？由於真的太多人有類似的問題，因此本篇文章會幫助你先了解網站開發的分工定義、技能需求，如此一來，才能幫助你找到適合自己的目標、讓你更有效率學習，更快達成轉職網站開發工程師的願望！
前端工程師
網站的「前端」是與用戶直接交互的部分，包括你在瀏覽網頁時接觸的所有視覺內容--從字體到顏色，以及下拉菜單和側邊欄。這些視覺內容，都是由瀏覽器解析、處理、渲染相關HTML、CSS、Javascript 文件後呈現而來。
技能與工具
前端開發，就是要創造上面提到的網站面向用戶的部分背後的代碼，並通過建立框架，構建沉浸性的用戶體驗。為了實現這個目標，開發需要熟練運用下列語言、框架、工具庫——三大語言：HTML，CSS，和Javascript。
此外，掌握jQuery 和LESS 等工具庫也很重要，它們能幫助開發者以更高效的方式編碼；很多前端開發崗也要求Ajax 方法的使用經驗，它可以幫助你使用Javascript 在後台從服務器拉取數據，協助實現頁面的動態加載。
打個比方，前端工程師的工作專注於「房屋」裝修，而蓋房子的工作由後端開發者負責。通過一些專門的工具，前端開發者與設計師/用戶體驗分析師密切合作，幫助構建原型或是線框圖，參與產品開發到發布的全過程。
一些前端工程師甚至能準確定位影響用戶體驗的特定問題，並給出建議或是代碼解決方案，對產品設計帶來積極影響。在專業能力外，與其它團隊協作，以理解特定目標、需求、機遇，以及高效的執行力也非常重要。
這聽起來工作內容很多，但也回報豐厚。「我是一名技術人員，也是一名設計者，在數字平台上使用標記語言和代碼修改視覺元素並與之互動是很自然而有趣的體驗，」有八年前端開發經驗的Mikey Ilagan 說「這讓我能夠直接影響到用戶體驗，操縱應用和網站裡用戶所見並直接與之交互的元素，這非常棒！」
總之，前端開發者要為後端開發者搭建的「房屋」進行內部設計和裝修工作。裝潢風格由房屋所有者指定。Apptix 的產品市場負責人Greg Matranga 表示：「前端開發者有時更容易為他們的工作感到振奮，因為他們有更廣闊的空間發揮自己的創造力。」
 
後端工程師
是什麼給網站前端提供支持？數據存放在哪裡？這就涉及後端內容了。網站後端包括服務器、應用還有數據庫。後端開發者構建並維護這些組件，為網站提供多方面支持。
由上圖可以看出，UDN 的讀者來源，大部分來自 Search （搜尋引擎）輸入特定關鍵字後，進到 UDN 的網頁；而東森新聞雲的讀者最多都是從 Facebook 等 Social 社群網站的連結進來。
技能與工具
為了讓服務器、應用、數據庫能夠彼此交互，後端工程師需要具有如下技能：
用於應用構建的服務器端語言：PHP, Ruby, Python, Java, .Net 等；
數據相關工具：My SQL , Oracle, SQL Server等；
PHP框架：Zend, Symfony, CakePHP等；
版本控制工具：SVN, CVS , Git 等；
還要熟練使用Linux 作為開發和部署環境。
後端開發者使用這些工具編寫乾淨、可移植、具有良好文檔支持的代碼來創建或更新 Web 應用。但在寫代碼之前，他們需要與客戶溝通，了解其實際需求並轉化為技術目標，制定最有效且精簡的方案來進行實現。
「我熱愛後端開發因為我喜歡操縱數據」，資深後端開發者就職於 Wildbit 的 JP Toto 說。「現在共有和私有 API 已變成移動設備、網站以及其它互聯繫統交換數據的必備通道。創建對大家有用的API 是我工作裡非常鼓舞人心的部分」。
 
全端工程師
全端工程師，最初是 6 年多以前由 Facebook 帶動的概念。全棧的核心，是指這批開發者能夠承擔包括前端、後端在內的所有功能開發任務，他們擁有一個技能全家桶。
「能夠同時承擔服務器端和客戶端工作會為你帶來更多機會，」 Grovo 的全端工程師 Federico Ulfo 說「當然這也就意味著更多的挑戰。以廚藝作類比，掌握烹飪和烘焙都需要時間與經驗積累，同時掌握兩者要花費更多精力。照著菜譜做誰都可以，我此處所說的是做出真正美味東西的能力。」
技能與工具
全端工程師也通常在服務器端進行編程工作，但他們熟練前端語言，能夠操縱網站面向用戶的部分。基本上可以形容他們是百事通。
全端工程師需要對 Web 架構的每一個層次都有足夠的了解：搭建和配置Linux 服務器，編寫服務器端API，利用客戶端Javascript 代碼驅動應用，將設計層面的東西轉化到實際的CSS 代碼。掌握並使用大量工具的同時，全端工程師需要敏捷地分配服務器端和客戶端任務，提供解決方案並對比不同方案的優劣。
 
 延伸閱讀看這裡：


網頁顏色代碼為何總是散亂!?為了前端工程師,這裡幫你整理啦~


說到字體,又是個前端工程師不能不懂的常識-絕對單位篇


CSS多重名稱之中小小的差別,前端工程師今天教你分辨! 


網路行銷課程第八課- 靠KISS讓全世界愛上你?


阿娘威啊!機器人在跟你搶工作?再不來上Python課程就來不及啦!


暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？