Chrome Extension 開發與實作 02

官網導讀:快速打造一個chrome extension

快速的建立我們第一個 Chrome extension,這裡我們將了解一個extension最基本構成及其操作。

簡單的定義什麼是 Chrome extension

Chrome extension,允許工程師使用前端領域裡早已熟悉的javascript + css + html 三大元素,來操作Chrome的核心功能。

閱讀全文 »

Chrome Extension 開發與實作 01

開始之前

2016的結尾,我決定挑戰自已,參加2017年度的IT邦幫忙鐵人賽,同時希望籍由技術文章的撰寫來提升自已的時間規劃以及口語表達的能力。

目標

  • 首先假定你已經熟悉Web開發所需的基礎知識。
  • 接下來我們會了解Chrome Extension是什麼,熟悉他的組成零件及架構。
  • 進一步,我們會比較詳細的探討Chrome提供給Extension開發者的功能以及限制(API)。
  • 最後我們會開發,並且正式發佈一個Chrome Extension。
閱讀全文 »

Web Animation (一) 基本既念

前言

對於Web Anmiation我還不敢說自己很熟悉,最近因為工作需要加上自己的興趣,開始對這塊領域產生興趣
在介紹動畫前先了解一下開發環境跟相關技術

閱讀全文 »

RWD響應式網頁專案開發心得(一)

前言

本篇非概念文章,分享一些我們在實際專案中遇到的障礙跟心得, 此文章適合閱讀的對象

  • 用過Bootstrap3
  • 用過Less/Scss這類的樣式編譯器
  • 用過 Grids System
  • 擁有RWD所有所需相關知識
  • 被專案逼瘋(?)的人
閱讀全文 »

HTML語意化及前端架構 About HTML semantics and front-end architecture

About HTML semantics and front-end architecture

About HTML semantics and front-end architecture原文

一篇有點歷史的文章,作者有在Twitter工作過,沒錯!馬上該想到有名的Bootstrap(不過不知道作者有沒有參與)。不算完全翻譯,這是一遍蠻深奧的文章,所以翻譯中除了原作者提供的之外,有加入我找到的相關資料以及我的看法。雖然英文不是很好,但我儘量表達到位。那我們開始吧。


集合了一些想法、經驗、我喜歡的概念,還有最近這些年我已經在嘗試的概念,包括了HTML的語意化、元件、前端架構的設計方法,類別的命名方式、HTTP壓縮。

We shall not cease from exploration
And the end of all our exploring
Will be to arrive where we started
And know the place for the first time.
T.S. Eliot – “Little Gidding”

我們不會停止探索
而一切探索的終點
將會是我們下一次探索的開始
T.S. Eliot – “Little Gidding”

閱讀全文 »

使用Skrollr.js實作視差滾動-(一)入門

Parallax Scrolling又名視差滾動,在江湖上已經流傳了這麼久,雖然是老梗但用在網頁上的效果一直很不錯,作前端工程師應該總會遇過設計或是需求用閃亮期待的眼神問你作不作得到。我們會在接下來的章節中利用工具實作視差滾動的的效果。

我們將假設你會以下技術,否則在接下來的介紹裡,你可能會感覺有點吃力。

  • Css3:動畫實作經驗
  • JQuery 或 Javascript
  • SASS 或 SCSS
閱讀全文 »

印度日-自制咖哩跟烤餅

天氣非常好,大家都知道我們家那隻非常喜歡下廚,昨天看了Gordon.Ramsays去印度學作菜的節目於是非常的想吃印度咖哩,我們家那隻馬上行動達成我的願望,為了表達感謝,我決定幫忙制作印度烤餅,原因是他全程都可以用機器,哈哈哈哈哈。

閱讀全文 »