2016年7月31日

[心得] 我的第一堂付費簡報課 — 精準設計簡報實戰技巧

精準設計簡報實戰技巧


在台灣,有越來越多「老師」、「教練」或者是工作坊都是以教學簡報製作和講演技巧為核心出發,而且這類的演講或工作坊大多都非常昂貴(用昂貴來形容真的不誇張...),也因為這些課程常常不是我所能夠負擔的,因此大部分在學習的時候我都是透過網路資源自己吸收學習。在看過了這麼多教學文章、教學影片之後,到目前為止我最推薦的絕對是「簡報藝術烘焙坊」的 Bill 彭毅弘。

為什麼我這麼喜歡簡報藝術烘焙坊


我幾乎把他放在網路上的所有教學文章(部落格)和教學影片(10分鐘學簡報系列)都看過了,為什麼我這麼喜歡他推出的課程呢?

很重要的一點是 Bill 的教學不打高空,而且說明的很有架構,操作步驟的講解很清楚。有些簡報老師可能花會很多時間在講「心法」,講的都比較概念性或原則性,聽來聽去你大概知道個概念,可是實際上往往還是不會做或無法應用,但是 Bill 的教學(至少我看到的線上教學)常常是概念和實際的技術都會一起說明,他會說明原則性的內容,讓你可以把這樣的概念延伸到其他投影片加以應用,同時也會實際以簡報軟體操作教學。

以下圖為例,這是 Bill 在課程中常用到的圖。他會告訴我們修改投影片可以從顏色和形狀這兩個角度加以切入,以達到減少雜訊,清楚呈現重點的目的,接著他就會以實際的範例說明如何達到這樣的效果。

圖片來源:簡報藝術烘焙坊

因此,當我在 hahow 中發現 Bill 有開設這堂「精準設計簡報實戰技巧」,而且課程售價只要$700時(預購只要$500),就給它報名下去了,因為實在是比外面的工作坊便宜上超多倍啊!這不只是我第一個付費的簡報課,同時也是我第一堂在 hahow 開課的課程。

課程內容


課程內容維持 Bill 老師一貫的風格 — 簡潔、連貫、清楚。上完整堂課,我最想問老師的是(說不定很多人也想問) — 教學課程到底是怎麼錄的,怎麼可以這麼一氣呵成!因為影片中同時錄了人像、投影片、還有螢幕操作,可是這幾個影片間幾乎讓你看不出來有剪接的感覺,整個轉場的效果會讓你上課的時候覺得是一體成形。也因為如此,我就這樣一集接一集的看下去,一不小心...就看完了(還剩下尚未上線的部分)。

在這堂課程中,不會從最最最基礎的 PowerPoint 開始上起,而是從很多實用的部分直接開始說明,讓你很快就可以套用到自己的簡報製作當中,其中基礎的像是自訂快速存取工具列、投影片的母片設定、格式的複製設定、快速進行對齊和均分。


另外,對於投影片中常用的遮罩效果也做了非常清楚的說明,從最基本的遮罩的製作,一直到用進階「合併圖案」中減去或交集的方式都講解的非常清楚:
課程片段截圖:利用遮罩可以達到的三個目的。

如果你是對於扁平化圖片的簡報設計有興趣,課程中也提供 Noun Project Icon 的使用方式;或者也可以透過簡單的幾何圖形,搭配「合併圖案」中聯集的技巧,達到自製 ICON 的成果:

課程片段截圖:利用合併圖案自製ICON。

另外,連 Office365 中最新的轉化功能,也做了相當清楚的解釋和實際案例示範,看得過程中,真的是讓人對於這個轉化功能的效果感到驚呼連連:

課程片段截圖:透過office365最新轉化功能可達到的目的。

總結


總體來說,我覺得這是一堂CP值相當高的課程,可以學到很多實用的觀念和技巧,同時價格又很划算,非常推薦想要提升簡報設計能力的人學習。

最開心的是,據 Bill 老師所說:「上架只是里程碑而已,未來我們更會持續更新課程」,就讓我們一起期待未來更多老師分享的課程上架吧!


2016年7月22日

[筆記] 親手打造屬於你自己的 JavaScript Framework/Library(中)




在上一篇 [筆記] 親手打造屬於你自己的 JavaScript Framework/Library(上),我們開始建立了自己的 framework ,並且可以成功運用它來建立物件,但在這個物件裡面還沒有方法,因此在這篇筆記中,我們就要繼續往下做嘍。

在 framework 中建立變數


在開始建立方法(method)前,我想要先建立一些變數是我之後可以在方法中使用,但這些變數又不會和外層的 global environment 有所衝突,我們可以在哪裡建立這些變數呢?
我們可以直接將變數建立在這個 IIFEs 裡面就可以了,我們不用放在 prototype 或 function constructors 裡面,這樣會佔據額外的記憶體位置,但是,當我們需要使用時,透過 closure的概念 我們依然可以提取到這些變數。透過這種方法,我們可以讓使用 framework 的人沒有辦法去改這些變數的值,但是在使用 method 的時候,仍然可以提用到這些變數。


因此,就讓我們繼續寫下去啦。

於是我們的程式碼現在長這樣子,多了第8-23行,我分別建立了變數 supportedLangs, greeting, formalGreetings 和 logMessages 這四個變數。


  (function(global, $){
  
    var Greetr = function(firstname, lastname, language){
      return new Greetr.init(firstname, lastname, language);
    }
  
    var supportedLangs = ['en','zh-tw'];
  
    var greetings = {
      en = 'Hello',
      zh-tw = '你好'
    };
  
    var formalGreetings = {
      en = 'Greetings',
      zh-tw = '歡迎您'
    };
  
    var logMessages = {
      en = 'Logged in',
      zh-tw = '登入'
    };
  
    Greetr.prototype = {}
  
    Greetr.init = function(firstname, lastname, language){
  
      var self = this;
      self.firstname = firstname || '';
      self.lastname = lastname || '';
      self.language = language || 'zh-tw';
  
    }
  
    Greetr.init.prototype = Greetr.prototype;
  
    global.Greetr = global.G$ = Greetr;
  
  })(window, jQuery)



建立方法(method)


有兩個地方可以放置我們想要的方法,分別是如下圖的第 1 部分和第 2 部分。但是我們知道,如果放在這個 function constructor 中(第 2 部分)變成每一個所建立的物件都會直接帶有這個方法,如此會佔據相當多的記憶體空間;所以,比較好的方式是利用原型的概念,把根據這個 function constructor 所建立的物件,都可以使用到的方法,放到第 1 部分的 prototype 當中



接著,我們要來在 prototype 中開始建立一些 framework 裡面可以使用的方法。

我們先來看一下建立完方法後完整的程式碼長什麼樣子,這些程式碼都是放在Greetr.prototype{ } 內,接著我們再來分別一一解釋每個方法的意義:


  Greetr.prototype = {
    fullName: function(){
      return this.firstname + ' ' + this.lastname;
    },

    validate: function(){
      if(supportedLangs.indexOf(this.language) === -1 ){
        throw "Invalid language";
      }
    },

    greeting: function(){
      return greetings[this.language] + ' ' + this.firstname + '!';
    },

    formalGreeting: function(){
      return formalGreetings[this.language] + ' ' + this.fullName();
    },

    greet: function(formal){
      var msg;

      //  if undefined or null, it will be coerced to 'false'
      if(formal){
        msg = this.formalGreeting();
      }else{
        msg = this.greeting();
      };

      if(console){
        console.log(msg);
      };

      // 'this' refers to the calling object at execution time
      // makes the method chainable
      return this;
    },
    log: function(){
      if(console){
        console.log(logMessages[this.language] + ' ' + this.fullName());
      }

      return this;
    },

    setLang: function(lang){
      this.language = lang;

      this.validate();

      return this;
    }

  }


fullName(第3行 - 第5行):這個 method 很簡單,只是讓我們可以得到使用者的全名。

validate(第7行 - 第11行):這個 method 主要是用來檢測使用者所輸入的語言我們有沒有支援。記得我們剛剛在最上有建立了一個陣列是 supportedLangs ,裡面含有兩個元素,分別是 en 和 zh_tw,如果使用者在參數當中所輸入的語言並不屬於這兩種時,我們使用 indexOf 這個函式時,就無法在 supportedLangs 的陣列中找到,於是就會回傳 -1 的結果。此時,我們就要拋出錯誤訊息。

greeting(第13行 - 第15行)、formalGreeting(第17行 - 第19行):這兩個 method 都是讓我們跟使用者打招戶用的,其中函式裡面的 greetings 和 formalGreetings 其實是我們在前面所建立的物件,這裡我們透過括號 [ ] 的方式,來取得該物件的屬性值(因為 [ ] 內才可以放變數)。
另一個可以注意到的地方是,在 formalGreeting 這個函式的最後是使用 this.fullName( ),也就是直接呼叫並執行了前面第3行 - 第5行的這個 method。

greet(第21行 - 第38行):這個 method 稍微比較長一些。透過 greet 這個方法,我可以直接控制我要使用的是greeting 或 formalGreeting ,而不用打出這兩個方法。我們利用強制轉換的概念(coercion),如果我們給予的參數 formal 是 true 的話,那麼請幫我們使用 formalGreeting,否則使用 greeting。
為了避免有些IE版本不支援 console 這個物件,我們用 if(console) 這樣的方法,意思是如果有 console 這個物件的話,在幫我輸出。
再來很重要的一個是第37行的 return this ,記得我們前面提到的方法鍊(method chaining)嗎?透過方法鍊我們可以讓一個方法接著一個方法接下去使用。
log(第39行 - 第45行):透過這個 method 我們可以回傳登入的訊息,這同樣有使用到方法鍊的技巧。

setLang(第47行 - 第53行):透過這個 method,我們可以改變我們當初在參數中所建立的語言,同時為了驗證這個語言是不是我們所支援的,我們在這個 method 中加入了 this.validate( )來驗證,validate( )是我們在第7行 - 第11行所寫的 method 。這也同樣有使用到方法鍊的技巧。




寫到這裡,我們就差不多把我們 framework 當中要建立的方法給建立完畢啦,接著就讓我們來看看怎麼使用了!

測試所建立的 framework


接著在 app.js 中,我們可以試著來測試一下所建立的 framework 拉。

假設我輸入:


var g = G$('PJ', 'CHEN'); //  language的預設是zh-tw
g.greet().setLang('en').greet(true);


我就可以得到以下的結果。因為我們有使用了方法鍊的技巧,所以我可以一個接著一個方法的使用,當中我又用了 setLang 這個方法,把預設的語言改成英文:


接著,假設我輸入:

var g = G$('PJ', 'CHEN'); //  language的預設是zh-tw
g.log().setLang('zh_cn').greet(true);

首先,會回傳登入的訊息,接著因為我把語言設成 "zh_cn" 但實際上,我們並不支援這樣的語言,所以回拋出錯誤的訊息給我們。大家可以自己測試自己所寫的 framework 來測試玩玩看。


程式範例


(function(global, $){

  var Greetr = function(firstname, lastname, language){
    return new Greetr.init(firstname, lastname, language);
  }

  var supportedLangs = ['en','zh_tw'];

  var greetings = {
    en: 'Hello',
    zh_tw: '你好'
  };

  var formalGreetings = {
    en: 'Greetings',
    zh_tw: '歡迎您'
  };

  var logMessages = {
    en: 'Logged in',
    zh_tw: '登入'
  };

  Greetr.prototype = {
    fullName: function(){
      return this.firstname + ' ' + this.lastname;
    },

    validate: function(){
      if(supportedLangs.indexOf(this.language) === -1 ){
        throw "Invalid language";
      }
    },

    greeting: function(){
      return greetings[this.language] + ' ' + this.firstname + '!';
    },

    formalGreeting: function(){
      return formalGreetings[this.language] + ' ' + this.fullName();
    },

    greet: function(formal){
      var msg;

      //  if undefined or null, it will be coerced to 'false'
      if(formal){
        msg = this.formalGreeting();
      }else{
        msg = this.greeting();
      };

      if(console){
        console.log(msg);
      };

      // 'this' refers to the calling object at execution time
      // makes the method chainable
      return this;
    },
    log: function(){
      if(console){
        console.log(logMessages[this.language] + ' ' + this.fullName());
      }

      return this;
    },

    setLang: function(lang){
      this.language = lang;

      this.validate();

      return this;
    }

  }

  Greetr.init = function(firstname, lastname, language){

    var self = this;
    self.firstname = firstname || '';
    self.lastname = lastname || '';
    self.language = language || 'zh_tw';

  }

  Greetr.init.prototype = Greetr.prototype;

  global.Greetr = global.G$ = Greetr;

})(window, jQuery)




→回到此系列文章目錄



2016年7月19日

[筆記] 親手打造屬於你自己的 JavaScript Framework/Library(上)




在上一篇[筆記] 跟著JQuery原始碼一起學習程式設計中,我們從 jQuery 的原始碼中,學到了一些建立 framework 的概念和技巧,在這篇筆記中,我們就要來試著打造我們自己的 framework 啦。

Requirement


當我們在打造一個 framework 時,事先規劃好這個 framework 要具備哪些功能是很重要的,而不是一股腦的就打開程式編輯器開始寫,所以我們來規劃一些這個 framework 要具備哪些功能吧!

在這系列的課程,我們大部分都是用 greeting(打招呼) 來當作程式撰寫的例子,在這堂課中也不例外,我們要來打造一個和 greeting 有關的 framework ,我們把它稱做 "greetr"。

我們的需求是這樣的:

  1. 當我們告訴它我們的姓(lastname)名(firstname)還有選擇的語言(language)時,它可以用正式(formal)和非正式(informal)的方式和我們打招呼。
  2. 支援英文(English)和繁體中文(zh_tw)兩種語言。
  3. 是一個可重複使用的 library/framework,也就是說,每一個安裝此 framework 的人可以直接使用,不會和它原本程式碼有所衝突。
  4. 和 jQuery 只需要輸入 "$( )" 一樣,我們可以使用 "G$( )" 來建立物件。
  5. 支援 jQuery ,可以把 greetr 產生的訊息直接顯示於HTML中。

HTML部分


在HTML中,我們總共會匯入三支js檔,第一支是 jQuery,因為在我們的 framework 中會使用到一些 jQuery 的功能;第二支是 greetr.js 這支就是我們寫 framework 的地方;最後一支是 app.js ,這一支則是我們用來應用我們所寫的 framework 的地方。


  <!doctype html>
  <html>
  <head>
      <meta charset="UTF-8">
      <title>Untitled Document</title>
  </head>
  <body>
    <script src="jquery-3.0.0.js"></script>
    <script src="greetr.js"></script>
    <script src="app.js"></script>
  </body>
  </html>



讓程式碼位於安全的位置

現在,我們可以開始在 greetr.js 中開始編輯我們的 library 了。

首先,為了避免我們所寫的 framework 被外層的變數所影響,我們要善用 IIFEs ,也就是將我們所寫的 library 放到 IIFEs 裡面。
同時,因為我們要讓我們的 framework 能夠影響到 global 的內容,同時還要支援 jQuery ,因此在參數的地方,我們會帶入 global 和 $ 。



不需要使用 new 就可以建立物件


在上堂筆記中看過 jQuery 的架構後,我們希望可以將學到的東西應用到我們的 framework 中,也就是說,我們希望可以輸入 var g = G$(firstname, lastname, language) 如此就能建立出一個新的物件而不用用到 new 這個關鍵字,我們可以怎麼做呢?
從上一堂課的筆記中,我們知道我們可以利用 return 一個 function constructor 的方式來達到這樣的效果,如圖中第 1 部分所示,而圖中的第 2 部分,才是我們真正建立函式的地方。

第 1 部分之所以可以寫在第 2 部分前面,是因為第 1 部份要在我們執行 Greetr 時,才會真的加以執行


建立函式裡面的預設值


接著,我們要在函式裡面為 firstname, lastname和 language 來建立預設值,還記得我們可以怎麼做嗎?

首先,因為我們這是一個 function constructor ,為了避免 this 可能在後面使用時碰到一些問題,所以在第 1 部分的地方,我們用 var self = this 這樣的方法,來避免 this 在後續操作上可能會碰到的問題;在第 2 部分的地方,我們則是透過 JavaScript 中強制轉換(coercion)的特性,使用 OR operator  || 的方式來達到預設值的效果。


建立建構子的原型(prototype)


接著,我們要來建立這個函式建構子(function construct)的原型了,還記得原型(prototype)嗎?
為了程式容易閱讀,我想要將這個建構子的原型,用 Greetr.prototype 來表示,於是就如下圖第 1 部分所示。

可是,我們知道,我們現在函式建構子的名稱是 Greetr.init ,所以這個建構子的原型名稱其實是 Greetr.init.prototype 才對,因此,如同 jQuery 中所使用的方式,我們可以在第 2 部分的地方寫上 Greetr.inti.prototype = Greetr.prototype ,如此,我們就可以直接在 Greetr.prototype 中撰寫程式碼了。


使用 G$( ) 即可建立物件


就像在 jQuery 中,我們可以使用 jQuery( ) 或 $( ) 來建立物件,在這裡,我們希望我們可以使用 Greetr( ) 或 G$( ) 這兩種方式都可以建立物件,記得在 jQuery 中是怎麼做到的嗎?

我們只需要加上這一行,就可以達到這樣的效果了。


到目前為止...


到目前為止,我們的框架 greetr.js 長這樣子,而且它已經可以簡單使用了。


  (function(global, $){
  
    var Greetr = function(firstname, lastname, language){
      return new Greetr.init(firstname, lastname, language);
    }
  
    Greetr.prototype = {}
  
    Greetr.init = function(firstname, lastname, language){
  
      var self = this;
      self.firstname = firstname || '';
      self.lastname = lastname || '';
      self.language = language || 'zh_tw';
  
    }
  
    Greetr.init.prototype = Greetr.prototype;
  
    global.Greetr = global.G$ = Greetr;
  
  })(window, jQuery)


如果我們在 app.js 當中,輸入以下內容:


var g = G$('PJ', 'CHEN');
console.log(g);


已經可以成功獲得一個物件了!






→回到此系列文章目錄



2016年7月16日

[筆記] 跟著JQuery原始碼一起學習程式設計


在這篇筆記中,我們會要進入jQuery的原始碼中。

雖然這堂課老師一直希望我們可以自己多透過這些開源的程式碼來學習程式設計,但是說真的,直接進入原始碼的時候,還真的是看不太懂阿...,好險有老師一步一步點出重點來,就讓我們從中發掘一些可以學習或應用的部分,趕快看下去吧!

看一下JQuery這個物件


我們可以先輸入以下的HTML架構:

  <nav>
    <ul class = 'people'>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>


然後我們可以在js檔中,輸入以下jQuery語法:

  var q = $("ul.people li");
  console.log(q);


如此,我們就可以檢視看看jQuery物件的樣子。在console視窗中我們可以看到它是一個array-like的東西,名稱是 jQuery.fn.init ,先稍微對這個名稱有個印象,等等我們在去原始碼中看看這個東西:


另外,我們可以在 __proto__ 裡面,看到一大堆的jQuery方法:


接著,就讓我們正式進入jQuery原始碼啦!

說實話,要我自己看這個原始碼,還真的不知道要從何看起...,不過透過老師的引導,幾乎是把這堂課所學到的重要內容再次複習了一次。

IIFEs的使用


一打開jQuery原始碼,我們就會看到一個IIFEs,記得我們有提過在IIFEs中所建立的變數,都不會影響到Global Execution Context所建立的變數,也就是說,透過IIFEs,它避免了我們的變數間可能會互相干擾覆蓋的情況 ,而jQuery同樣是使用了IIFEs的方式來撰寫這個library。

IIFEs開頭
接著,我們可以往下看到IIFEs的結尾,其中有一串是 typeof window !== "undefiend" ? window : this ,這個意思是如果window的類型不是undefiend的話,則global object就是window,否則是this(根據當時的環境所決定)。

IIFEs結尾


為什麼在jQuery中不需要輸入 new 來建立物件


我們知道在jQuery中,我們只需要寫 $( )jQuery( ) 就可以建立jQuery的物件了,而不需要使用關鍵字 new ,為什麼可以這樣呢?

原因在於它用了 return new ... 這樣的用法,等於當我輸入jQuery時,它就會直接幫我帶入 new 這個關鍵字,讓我們不用每次用new這個關鍵字。

從這裡,我們也可以知道 jQuery.fn.init 是一個function constructor,我們應該可以在後面的地方找到它。


在jQuery中為什麼可以使用方法鍊(method chaining)?


在jQuery中,我們可以在一個方法之後直接接著另一個方法使用,像是這樣:

  var q = $("nav ul.people").addClass("newClass").removeClass("people");
  console.log(q);


我們可以直接針對ul這個元素,去添加class,同時直接在後面移除class,而不用重複打兩次。這種一個方法接著一個方法,而且每個方法都可以影響到父層物件的情形,我們就稱為方法鍊(method chaining)

這是一個很有趣的情形,因為我們知道第一個 addClass 因為接在 jQuery 物件之後,所以它會是 jQuery 物件裡面的一個方法,同時可以對 jQuery 物件產生影響;但是,對於 removeClass 這個方法來說,它是放在另一個方法後面,為什麼可以找到這個方法,而且仍可對我們的 jQuery 物件有作用呢?

為了要解答這樣的問題,我們要進入到 jQuery 原始碼中一探究竟。

搜尋 addClass 這個方法的地方,我們會發現到,這個方法的最後有一個關鍵,也就是它 return this ,而這裡的 this 指的也就是我們的 jQuery 物件,因此透過這個 return this,它可以先針對物件進行欲要進行的方法後,最後再次將它回傳成一個物件,於是,它就可以繼續在接著下一個方法,形成一個方法鍊的作法。

也就是說,addClass 這個方法執行完後,會回傳原本的 jQuery 物件,因此變得就像這樣子:

  var q = $("nav ul.people").removeClass("people")



在原始碼中,我們可以看到,在 removeClass 或其他許多的方法中,最後都會加上 return this 。


為什麼在jQuery中可以使用 $ 或者 jQuery 來建立物件?


接下來我們想要來看,為什麼在jQuery中,我可以透過 $( ) 或者 jQuery( )這兩種方式來建立物件都不會有問題呢?

我們在程式最下方的地方可以看到這個,而這也就說明了,為什麼我們可以使用 jQuery 或 $ 的方式來建立物件,因為他最後都是指稱到 IIFEs 裡面的這個 jQuery 函式。





→回到此系列文章目錄



2016年7月6日

[筆記] JavaScript 中利用 typeof 檢驗運算元所代表的型別


在這篇筆記中,我們會說明如何利用 typeof 這個內建的關鍵字來正確地檢驗運算元的型別。

讓我們來看一下 type of 的使用還有它回傳的結果:


  var a = 3;
  console.log(typeof a);  //  number
  
  var b = "Hello";
  console.log(typeof b);  //  string
  
  var c = {};
  console.log(typeof c);  //  object
  
  var d = [];
  console.log(typeof d);  //  object
  
  var e = false;
  console.log(typeof e);  //  boolean


這裡,我們可以看到大部分的型別都能正確回傳,除了陣列它一樣會回傳成Object。

為了避免這個問題,如果我們想要檢測該物件是否為一陣列的時候,我們可以用如下的語法:


  var d = [];
  console.log(typeof d);  //  object
  console.log(Object.prototype.toString.call(d)); //  [object Array]


如此,它將會回傳 [Object Array] ,讓我們知道它是個陣列。

讓我們再來看一下其他的資料型別:


  function Person(name){
    this.name = name;
  }

  console.log(typeof Person); //  function

  var f = new Person("Jane");
  console.log(typeof f);  //  object
  
  console.log(typeof undefined);  //  undefined
  console.log(typeof null); //  object


從這裡,我們可以看到function的話,能夠正確回傳function;而如果是用funtion當作建構子所建立出來的物件,則是物件沒錯;如果是undefined回傳一樣是屬於undefined型別;最後一個比較奇怪的是,如果是null,會傳成object,這個則是比較需要留意的地方。

在MDN的網站列了typeof的可能回傳值:

圖片來源:MDN - typeof

程式範例

var a = 3;
console.log(typeof a);  //  number

var b = "Hello";
console.log(typeof b);  //  string

var c = {};
console.log(typeof c);  //  object

var d = [];
console.log(typeof d);  //  object
console.log(Object.prototype.toString.call(d)); //  [object Array]

var e = false;
console.log(typeof e);  //  boolean

function Person(name){
  this.name = name;
}

console.log(typeof Person); //  function

var f = new Person("Jane");
console.log(typeof f);  //  object

console.log(typeof undefined);  //  undefined
console.log(typeof null); //  object


→回到此系列文章目錄



2016年7月4日

[技術分享] Emmet簡易教學 - 快速上手包


還不知道什麼是EMMET?
或者聽過可是沒時間是學習?
在這個快速上手包中,讓你利用短短幾分鐘,快速上手EMMET




EMMET是一個支援眾多程式編輯器的外掛,支援的編輯器不只這裡列的這些,有興趣的話可以進一步到這個EMMET網站查詢:http://emmet.io/download/




透過EMMET,最重要的是它可以讓你不需要再死記HTML或CSS關鍵字,減少不必要的coding錯誤,加速整個網頁開發的工作流程,另外還可以讓你的小拇指獲得適當的休息(打角括號<>時要常常按Shift),而且EMMET的寫法和CSS選擇器相似,學習上非常容易!

------
Icon credit By Kirill Zorenkov, RU




EMMET支援很多不同的編輯器,在這裡我們以ATOM為例,如果你用的不是ATOM可以參考以下網址教學:
Bracket:https://www.youtube.com/watch?v=eCxfHvijCQk
Sublime Text:https://www.udemy.com/sublime-text-3/
Notepad++:https://teddysun.com/254.html
或到EMMET官網查看:http://emmet.io/download/

----
Icon credit:By Alex Fuller, US




因為Atom有package的control center,所以插件的安裝上相當簡單。




如果你還在考慮要不要安裝,想先試試看是不是真的有這麼好用,可以先用JSBIN這套線上編輯器跟著後面的說明試著操作看看。
JSBIN線上編輯器網站:http://jsbin.com/




EMMET和其他插件最不一樣的地方在於它的語法是有”邏輯的”,而且它的寫法和CSS的選擇器非常類似。

----
Code Search Icon Credit By Stefan Parnarov, BG




EMMET的使用非常簡單,只要輸入EMMET的關鍵字後,按下TAB鍵,即可產生相對應的語法。
但要注意的是,關鍵字之間不能為了整潔或其他目的而使用空格。













如果你想得到這樣的結構,可以輸入 div+div>p>span+em 。










如果你想得到這樣的結構,可以輸入 nav>ul>li*4^^article 。







接下來我們說明如何利用EMMET
在HTML結構中添加屬性

----
Properties Icon  Credit By Alex Auda Samora, UA










如果你想得到這樣的結構,可以輸入 form[name="test" method="post"]>(input[type='text'].text)*2。













如果你想得到這樣的結構,可以輸入 article#article>p>a[href="test.html"]{A link}。




恭喜你!
你已經掌握了EMMET的核心
最後來看看它如何透過強大
的縮寫功能在CSS上發揮

----
Minimize Icon Credit By Creative Stall, PK




在CSS的檔案或中,一樣可以直接套用這些關鍵字。




想帶出HTML結構可以使用 ! 或 html:5 均可




其實EMMET的核心還是在於最前面所提的邏輯概念和快速建立HTML架構,這些縮寫主要是幫自己減少打字的時間和避免手誤,如果真的記不起來,也不用硬背,常用的屬性你可以到Cheat Sheet查找用法,不常用的就直接手打就好(反正也不常用)!
EMMET Cheat Sheet:http://docs.emmet.io/cheat-sheet/




如果你對於EMMET還想要有更深入的了解,一定不能錯過
---
EMMET官方網站:http://docs.emmet.io/css-abbreviations/
既然是官方網站,對於EMMET的運作有最詳細的說明和解釋,另外也有說明如何客製化你的EMMET。

EMMET Cheat Sheat:
http://docs.emmet.io/cheat-sheet/
---
一小時上手Sublime Text:https://www.udemy.com/sublime-text-3/
這個Udemy課程是免費的,雖然主要是說明Sublime Text的用法,但是裡面有一堂課是在說明EMMET的使用





如果你喜歡我們的內容,歡迎到我們的粉絲團PJCHENder網頁前端資源站按讚!

1. 如果喜歡的話,也可以設定為搶先看。
2. 透過留言鼓勵我們或與我們一同討論。
3. 於文章下方標註有興趣的朋友。
4. 透過分享,讓更多人看到我們的內容。

此篇文章同步發佈於PJCHENder網頁前端資源站