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

   你聽過 前端工程師 開發神器Emmet嗎?認識它你就開始省時啦!     目錄 快速產生標籤名稱 （Tag Name） 快速產生 className 與 id 父子兄弟階層、群組、上一層 父子元素一次輸入 兄弟階層一次輸入 將元素設為同一階層的群組 上一層 複製元素 編號 設定起始編號 顯示文字 自訂屬性值 身為一個 前端工程師 ，一定要裝一個「省時神器」 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 的話，只要把它們用半形的句號隔開，接在一起就可以了。例如今天我們要產生 C...

  AWD難道真比 RWD 難用?繼續往下看說不定會推翻你的理解呢!       目錄 該選擇 RWD 還是 AWD ? 先看看自己的需求吧！ 評估現有的資源人力 對網頁設計畫面要求較嚴謹的狀況下，就使用 AWD 吧！ AWD 要怎麼做才能對 SEO 無痛? 該選擇 RWD 還是 AWD ? 先看看自己的需求吧！ 當下  RWD  正夯，但並不代表所有的網頁都適用 RWD 技術。決策者必須先檢視網站的規模、內容、專案的需求以及人力，再決定使用  AWD  還是 RWD。至於哪一類的網站適合 RWD、哪一種的網站適合 AWD，簡單整理如下表所示 ：   RWD AWD 人力需求 較少，因為只有一套  CSS 較多 (因為需要多套 CSS)， 需要網頁人才與尚需 前端 工程師撰寫判斷裝置後自動匯入相應的 CSS 的程式 維護成本 較少，因為只有一套 CSS 較多，因為有多套  CSS  以及程式 適用內容 網站內容較單純時適用。 如簡單的企業形象網站、一頁式網站等等。 網站內容較多、較複雜時適用。 如博克來、MOMO 購物網、蝦皮拍賣等。 適用排版 較簡潔的畫面與排版 較多元化、複雜的畫面與排版 SEO  支援 SEO  優化、維護較容易 同左，但前提是不能直接把網站分成桌機版跟手機版兩個網站再進行轉址，導致流量分散。 工程師必須要在同一個 URL 下寫出對應裝置的網站架構並指定適用的 CSS 可支援的裝置 各裝置都適用 各裝置都適用 以上分析建議仔細看過。 以下再作補充說明： 評估現有的資源人力 只需要寫一套  CSS ...

  RWD 和AWD的差別到底在哪?還搞不清楚?今天你得要好好看完這篇啊!   目錄 RWD 和 AWD 的差異與優缺點 RWD、AWD 的異同之處 共同之處 不同之處 RWD AWD RWD 的優點與缺點 優點 缺點 AWD 的優點與缺點 優點 缺點 該選擇 RWD 還是 AWD ? 先看看自己的需求吧！ AWD  跟  RWD  的目的一致，都是希望能針對桌機、平板、手機等不同尺寸的裝置，而顯示出易於瀏覽的網站畫面。 在規劃網站時，相信有不少的 PM 在與 前端 工程師或是 網頁前端設計師 在溝通上遇到瓶頸，像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過 網頁設計 、或是無任何技術背景的網頁規劃者為角度，講解 RWD 與 AWD 網站的差異，以及如何規劃與選擇。 RWD 和 AWD 的差異與優缺點   在網頁上， RWD  是「Responsive Web Design (響應式 網頁設計 )」的縮寫；而 AWD 則是 「Adaptive Web Design (自適應式 網頁設計 )」的縮寫。RWD 與 AWD 是為現今大多數人們習慣使用手機、平板等行動裝置上網而生的  CSS  寫法，讓 網頁設計 無論在桌機螢幕上、或是尺寸較小的行動裝置上，都能清楚的呈現，讓使用者能更舒服的瀏覽網頁。 RWD 與 AWD 的差異，簡單的來說，前者是無論行動裝置或是桌機，都使用同一套 CSS；而後者是針對各種裝置撰寫對應的 CSS，可以有多套  CSS ，例如桌機有桌機的一套 CSS，手機有自己的一套 CSS。 RWD  與 AWD 的差異，簡單的來說，就是前者只有一套 CSS 檔案、後者卻有多套 CSS 檔案。詳述如下： RWD 會把所有裝置的樣式都寫在同一套  CSS  中，因此無論行動裝置或是桌機，都是使用同一套 CSS 。當使用者打開了網頁，就能即時透過網頁的寬度，決定要套用...

  這次更新的 Google 影片SEO,有關它的重點這篇繼續分享給你   目錄 允許 Google 擷取影片內容檔案 6. 以支援的檔案格式提供 7. 避免阻擋搜尋機器人 8. 確認頻寬 9. 建立固定 URL 啟用 Google 特定的影片搜尋功能 10. 影片預覽 11. 重要時刻 12.  直播標記 被判定成敏感內容怎麼辦？！ 13. 移除影片的搜尋結果： 14. 依使用者的位置不同，顯示不同的影片搜尋結果： 15. 若有成人內容，最好針對安全搜尋進行設定： 上篇 介紹了幾項影片搜尋  SEO  的方法，這次我們將繼續介紹如何讓影片搜尋最佳化！   允許 Google 擷取影片內容檔案 允許 Google 擷取影片檔案本身十分重要，因為若沒有事先設定好，即使將影片編入索引中，還是無法讓「影片預覽」或「重要時刻」等功能顯示在搜尋結果中。想要允許 Google 擷取影片可以參考以下作法： 6. 以支援的檔案格式提供 例如：MOV、MP4、MPEG、WMV……等等。 7. 避免阻擋搜尋機器人 避免使用 noindex 標記或  robots.txt  檔案等方式封鎖影片內容網址或網域，這會讓 Google 無法擷取影片的檔案。 8. 確認頻寬 確認所選擇的網站主機代管​以及實際處理影片的伺服器擁有實際的頻寬，才不會在  Google  嘗試讀取影片時超過負荷。 9. 建立固定 URL 為影片與縮圖建立穩定的網址，免得因為網址過期、更動或失連而導致無法順利查找。   啟用 Google 特定的影片搜尋功能 上一篇我們提過幾個名詞，如「影片預覽」、「重要時刻」等，這些都是 Google 為搜尋使用者提供的「摘要」，能讓人對影片有個基本認識、預先了解是否有自己想要的資訊等，和沒有摘要的影片比起來，這樣更能夠讓人想點開影片。 這些功能各有什麼效果呢？要如何才能有效顯示？ 10. 影片預覽 為了讓使用者對影片有初...

   聽說Google有新的影片 SEO ,來看看這篇幫你整理的重點~   目錄 協助 Google 找到您的影片 1. 公開影片： 2. 為影片加上適當的 HTML 標籤： 3. 提交影片 Sitemap： 我是採用第三方內嵌播放器，怎麼辦？ 確保影片能編入索引 4. 提供高畫質的縮圖： 5. 提供結構化資料：   SEO （Search Engine Optimization），意指根據搜尋引擎的規則運作、無須付費買廣告就能自然排序在搜尋結果最前位，增加能見度的方法。當使用者主動搜尋關鍵字，通常也就代表著感興趣，而人們往往只點擊前幾項搜尋結果，因此搜尋結果第一名可以說是兵家必爭之地 每日，都有上億的網友搜尋各種與新聞、美食、娛樂等等主題的相關內容，且越來越多人喜歡透過影片來接收資訊。 比起一篇文章，影片給人的感覺更有溫度、娛樂性更高、接收訊息的門檻也更低，因此除了網站排名之外，「影片」類  SEO  的重要性可說是與日俱增。 如果希望你的影片獲得更多的聲量與關注，就需時時掌握如  Google  等主要搜尋引擎的脈動，若搜尋引擎的演算法則有更新，就會使原本的搜尋結果排名發生變化，對流量的影響不容忽視。掌握 Google 搜尋排序背後的「潛規則」，才能讓影片被演算法則所青睞！ Google 的新影片  SEO  多了哪些重點呢？我們將分成上下篇，為大家詳細介紹。 協助 Google 找到您的影片 首先最重要的就是影片本身要讓使用者好找，也要讓  Google  好找！ 1. 公開影片： 確保影片位於公開的網頁，而且使用者不需要經過複雜的操作，即可載入影片，這樣除了方便 Google 找到之外，也能讓使用者更簡單的觀看影片。 2. 為影片加上適當的 HTML 標籤： 一份 HTML 文件中會有許多標籤 （tag），不同的標籤表示不同語意（semantic）內容的區塊， 如果加入如 <video>、<embed>、<iframe>...

    人工智慧 來解救你的手了!讓你沒有手也能打程式! 人工智慧 開發語音coding工具　不用雙手照樣寫程式！ 對於「語音輸入法」大家想必都不陌生，現在的手機通常都會內建語音輸入，方便在無法使用雙手打字時有另一輸入文字的方式。 即使市面上已有許多語音轉文本技術，但能「輸入程式碼」的語音輸入法，過去卻還沒有人成功研發出系統化的應用程式。直到日前，有位資深美國工程師 Matt Wiethoff 成功用 人工智慧 （AI) 開發出一款可以「邊說邊寫程式」的工具！ ▲ 使用語音輸入程式碼的 AI 工具「Serenade」介紹影片   運用機器學習技術 AI 讓你用「說」的也可以寫程式   ▲ 長期寫程式容易手酸，美國工程師開發能輔助語音 coding 的 人工智慧 （source：Danial RiCaRoS on Unsplash/示意圖本文無關）   對工程師們來說可謂是「雙手萬能」，彈指之間能編寫出千變萬化、各有所能的程式軟體；但相對而言，若突然某日不便使用、甚至無法使用雙手該怎麼呢？ 知名美國知識問答網站 Quora 的開發人員 Matt Wiethoff 就是雙手遭遇變故。他的手部因嚴重「重複性壓力傷害」所苦──這類傷害多因在日常工作中不間斷地反覆運動固定的部位所導致，嚴重的話可能對身體部位造成永久性損傷。 Matt 因此無法再使用雙手敲打鍵盤，但身為一個工程師，無法 coding 怎麼行？在職業生涯可能畫下句點的壓力之下，Matt 卻沒有灰心喪志，宛如勵志電影般，在人生遭遇重大打擊時不但沒有被搏倒，反另外開闢出一條蹊徑：開發不需雙手可以寫程式的工具。 Matt 和 Tommy MacWilliam 共同創立了新創公司 Serenade ，用 人工智慧 開發出一款可以將語音轉化為程式碼、用口頭發聲就能寫程式的工具。   支援 Java 、 Python 等多語言　Serenade 獲 210 萬美元投資   ▲ Serenade 操作示意圖（source：Serenade 官網）     該公司的第一款商業化產品「Serenade Pro」已經發表，現在已經可以從官網將 ...