歸檔: 2017/4

0

html meta基本語法

傳說中meta只要能夠使用的好,可以帶來許多意想不到的效果,甚至是連用了都不知道有什麼功能...。 參考文章:http://www.cnblogs.com/sniper007/p/3258389.html 延伸閱讀:http://code.lancepollard.com/complete-list-of-html-meta-tags/

0

Sass HSL function

sass在顏色的處理有許多function可以用,如果多善用這些function可以讓網頁有更多的變化,並且提高網頁的一致性。

0

CSS3 文字陰影範例

本篇會介紹許多CSS3文字陰影範例,而text-shadow在瀏覽器的支援度還算高,有興趣的朋友都可以試試。 來源參考:http://www.w3cplus.com/blog/52.html

0

Sass 基礎教學-為何要學Sass

Sass官網 看不到簡報請點此連結http://www.slideshare.net/slideshow/embed_code/11639772 上面這個簡報介紹了的很清楚,在經過一段時間的使用,發現已經回不去了(相信用過的都有這種感覺!)。為何要用Sass ?這用說的都是說不清楚,看範例比較清楚~。

0

Web Font的基本設定

Web Font的基本用法不會很難,如果是要用本機的方式,首先就是要先找個資料夾放字型檔,接下來參考@font-face的作法即可。

0

開始使用fire.app

上一篇介紹ruby的安裝並使用它來編譯sass,本篇就要介紹如何開始使用fire.app。 官方網站 : http://fireapp.handlino.com/

0

CSS transition 各種速率

今天要介紹的是CSS transition中的timing-function,transition語法在CSS3動態中是相當容易被使用,如果再改變他的timing-function,可以獲得更豐富的效果。

0

網頁設計 技能樹!

每天分享一篇文章,到今天差不多一個月了。剛好,明天開始是IT邦的鐵人賽,而這邊我會希望和鐵人賽的文章同步,不只整理過去的文章,並且以更細膩的文字去描述CSS的語法。

0

CSS的小箭頭

常常在很多網站會看到小三角形箭頭,當期都是使用圖片去製作,而時代的改變,就是要用寫的比較潮,為了趕上流行,所以在這分享小箭頭的製作方法。

0

Sass 開始前的問與答

sass官方網站 : http://sass-lang.com/ 如何開始使用sass呢? 在開始前,還是先認識一下這是怎樣的東西。

0

安裝ruby以及sass環境

使用sass前的準備分為兩個部分: 文字編輯器 編譯環境 文字編輯器對於視覺設計師有Dreamweaver,而對於程式設計師則有vim、Visual studio等,除了以上之外這邊還會推薦使用sublime text,但本篇主要會先介紹編譯環境,所以在此不多敘述。 編譯環境是踏入sass最困難的一步,先前有提過sass是透過ruby所編譯的,所以在編譯前還需要有ruby,本篇會從如何建立ruby環境到sass的安裝。 說實在,本篇範例不建議使用,編譯sass並沒有這麼困難,但會讓大家了解ruby是怎樣的東西,這安裝流程是怎麼樣的,這有助於更了解sass,後面會介紹其他編譯sass的方式。

0

CSS沒有極限 - Sass 與 Compass(2)

承上篇,上一篇主要是介紹Sass和Compass是什麼,而本篇會介紹Sass和Compass究竟對CSS的撰寫有什麼樣的影響,讓許多工程師及設計師都說已經回不去了(回不去CSS),現在就讓大家瞧瞧,它是多麼的強大吧(本篇介紹主要語法將會以Sass為主,並非使用Scss)。

0

立體字風格

今天在Fb上看到justfont發了一篇文,就是他們官網上的字可以做立體的風格,我看到這個立體字,突然想到和之前long-shadow有一點點像,所以我決定來試試看sass版本的立體字。

0

CSS沒有極限 - CSS 的改變

本篇內容同步發表於http://ashareaday.wcc.tw/#2013-09-17 (建議使用Chrome瀏覽器) CSS是用來決定網頁的顏色、字型、排版等顯示的特性,現在除了以上功能外,CSS3增加了更多的效果,不僅可以增加網頁的閱讀性,還可以吸引使用者的目光。而許多的改變,正在影響著CSS的進化。

0

CSS沒有極限 - CSS3的色彩

在過去我們只要使用色碼來表示顏色,色碼是用三組十六進制數位表示,每位元組從00到FF,相當十進位數位從0到255...,而現在我們有了新的屬性alpha(透明度)。

0

CSS沒有極限 - Sass 與 Compass(1)

在先前的幾篇,有提過好幾次的Sass以及Compass、Fire.app等工具,在這邊就來釐清這些是什麼樣的工具。 Sass官方網站:http://sass-lang.com/

0

CSS沒有極限 - 瀏覽器的戰爭

承上篇,瀏覽器的數量越來越多,有許多需要克服。如老不死的IE瀏覽器、各式各樣的瀏覽器前輟詞、各種CSS語法的支援程度,都是需要去注意的。

0

CSS沒有極限 - CSS的新"文字"及"尺寸"單位

CSS3 新的文字單位 大多數網站在文字的單位都是使用px,尤其在台灣多數使用者都是用windows系統,不管是什麼瀏覽器,在windows下都是以單數px是較為清楚的,如13xp.15px等,而px在建立網站時也是較為方便及準確的,但他的彈性是比較差的。

0

CSS沒有極限 - CSS藏頭詩 Selection

這是一個很簡單的技術,就是可以改變文字反選後的樣式,而支援的樣式並不多,目前僅有Color、background、background-color、text-shadow在內。

0

CSS沒有極限 - CSS3的漸層

本篇介紹CSS3的漸層,而就漸層這功能聽起來,似乎沒有什麼樣的變化,但其實透過復合式的背景可以堆疊出相當多的變化。

0

CSS的運算

今天來介紹CSS最犯規的function calc,通常會用來做數值的運算,尤其是針對於長寬等等,而他最特別的是運算的數值"不需要"相同單位。

0

用sass 做long shadow

網頁設計的趨勢從擬物轉換為扁平化,而扁平化顧名思義就是較扁、較平,去除了真實化實體,扁平化也延伸出許多的視覺風格,而long shadow就是其中一種,讓扁平的世界裡,增添一些的立體感。

0

CSS沒有極限 - CSS transform 概觀

接下來要介紹CSS transform,CSS3許多新功能中,我認為transform和animation是相當有難度的,但也是最有趣的,尤其在兩者搭配後,能夠展現出類似過去flash的動態效果,但卻能保持html原有的互動性。 而在接下來的四至五天會分享transform相關的屬性運用。

0

CSS沒有極限 - Checkbox的妙用

CSS3 新增了:checked的偽元素,它可以判斷目前的checkbox 及 radio 是否有被選核,這樣html就能夠做出基本的點擊功能;並且結合label標籤,label標籤能夠讓樣式的套用更為自由,藉此增加畫面的豐富性。

0

自己做web fonts icons

承上一篇,本篇會介紹自己做web fonts icons,讓會手癢的設計師可以自行設計web font icon。

0

CSS沒有極限 - CSS transform-origin

本篇介紹transform的起始點,一般來說變形的起始點都在物件的中心點,但如果需要像時鐘的分秒針一樣,中心點並不再物件的中心,就需要靠transform-origin去設定物件變形的起始點。

0

CSS沒有極限 - CSS transform-3D的透視(perspective)

本篇介紹的transform 3D的透視,如果沒有設定透視(perspective),transform 3D就會像平面一樣呈現。所以在3D的物件上,一定要設定好"適合"的透視,怎樣是適合,來看看以下範例就能夠了解。

0

CSS沒有極限 - 鐵人賽不是開始,也不是結束

在鐵人賽前一個月,我在進行一個計劃,就是挑戰100天發文,內容以前端為主,雖然每天都有新的文章,但我都不會特別去核對文章的內容。而鐵人賽開始後,將主題調整為CSS為主,內容也不是只將demo貼上後隨便貼個原始碼就結束了,許多內容都必須去尋找相關的資料,讓主題及內容更加可看性,這過程中也讓CSS的基礎更上一層樓...。

0

Animation 的各項設定值

和其他屬性一樣,animation有許多屬性可以設定,當然也可以用一個animation涵蓋全部,以下會分別介紹以下屬性的用途。 來源:http://css.doyoe.com/ [ animation-name ]:設置物件所應用的動畫名稱(必填) [ animation-duration ]:檢索或設置對象動畫的持續時間(必填) [ animation-timing-function ]:檢索或設置物件動畫的過渡類型 [ animation-delay ]:檢索或設置對象動畫延遲的時間 [ animation-iteration-count ]:檢索或設置物件動畫的迴圈次數 [ animation-direction ]:檢索或設置物件動畫在迴圈中是否反向運動

0

CSS3 垂直文字書寫

html最早都是應用於拉丁文上,而拉丁文主要是水平由左到右的書寫方式,而到了其他的語系國家,文字也只能用水平由左到右的書寫方式;而漢字是屬於垂直書寫由右到左的書寫方式,現在也能透過CSS的writing-mode改變,就來看一下範例吧。

0

CSS沒有極限 - CSS transform 軸線的謊言

從小上數學課,都會知道X軸是左右,Y軸是垂直,看起來就是這麼容易,但是一到了CSS上卻是常常分不清楚,而其中最大的陷阱就是旋轉(rotate)。這篇會用簡單的動態效果,讓大家了解旋轉與軸線之間的關係(本篇都是使用sass)。

0

CSS3 Flex的排版方式

flex是用來排版的CSS屬性,在本章就用所了解的flex來排版看看,並且在介紹幾個flex屬性。

0

CSS3 Flex的對齊

今天參加了MOPCON,所以來介紹簡單一點的。承前篇,Flex是為了改善過去的CSS2排版模式所衍生出的新語法,本章則要介紹他的對齊方式。 大量參考:http://www.w3.org/html/ig/zh/wiki/Css3-flexbox

0

Transform3D 翻牌效果

再經過一連串的CSS3苦練之後...,發現我對CSS transform3D挺有興趣的,但是一個3D的Demo都要花很多的時間才做得出來...,如果不嫌棄就先看一些以前做的吧~。

0

CSS3 display:flex

display: box及display: flex,兩者是類似的伸縮排版語法但現在已經改成display: flex。 display: box; is a version of 2009. display: flexbox; is a version of 2011. display: flex; is the actual version. display: box是存在的版本,但是它是過去的,現在使用的是display: flex。 目前compass的核心也還是使用display: box

0

Animation 和 keyframe

CSS的Animation分為兩個部分,一個是決定動畫該如何跑的Keyframe,另一個是將動畫載入元素的Animation。簡單來說,就是先製作一個keyframe來決定動畫的影格動作,在將動作載入元素,而這兩個都是必要的。

0

試試看Json

之前寫了很久的CSS,很久都沒機會碰js,原本就沒多厲害的js又變得更生疏了...,最近正在學json就來稍微介紹一下吧。

0

CSS - pure CSS 星球公轉(3D)

有些時候技術光學習還不夠,必須想一些作品來實作,而這邊我要展示一個星球公轉效果,接下來介紹一些這當中所遇到的問題。

0

利用json取得公開資料

之前寫了很久的CSS,很久都沒機會碰js,原本就沒多厲害的js又變得更生疏了...,最近正在學json就來稍微介紹一下吧。 今天就來試試看抓政府的公開資料吧。

0

jQuery step by step 教學

不久前在高雄前端社群有介紹jquery教學,我的部分盡量做成一個步驟一個步驟,且就算沒有人教,也可以看著講義做下去。

0

利用json取得公開資料(3) 並繪製圖表

上次已經把資料放進表格內,接下來我們可以透過一些圖表功能來視覺化這些資料,這邊可以透過一些線上資源來繪製圖表。 圖表plugin:http://www.open-open.com/ajax/ajax20090708091447.htm

0

Just Another Beginner~

告別了一百多天的aShareaDay,在這裡即將有新的開始。在結束aShareaDay前一直在思考要用什麼樣的平台繼續寫文章,其中的選項有: 目前超夯的logdown 自由簡單的wordpress 以及jekyll 當然,看到我這網站的位置,就是使用Jekyll in Github page,本篇就是要說明我用jekyll的原因。

0

前端軟體-Prepos介紹

情境當在進行前端設計的時候,如果想要分享Html給夥伴看看,有哪些方式呢? 叫他過來看 截圖之後,傳line給他看 上傳到空間,丟網址給他看 今天介紹一個更快的方式,利用prepos免上傳,直接傳網址給他看。

0

font-family要怎麼玩

在平面設計中,字型的運用是一門高深的學問,而網頁設計中雖然大多使用內建的字體,但如果沒有的仔細的去調整,就像是word直接用內建的字型一樣,會產生不協調感。 參考 Just Font

0

aShare使用技術

上一篇簡單介紹了本站為什麼選擇jekyll,但是這其中並不是只有這一項技術就可以達成,其中除了我已經很熟悉的html、css、sass外,必須要了解Git、Liquid、Markdown等等的技術,當然其中會有許多困難,但是不斷的突破困境是進步最快的方式。 本站所使用的技術如下 Jekyll Liquid github github page Markdown Sass compass fire.app

0

Emmet Live Style 加減用啦~

livereload for Windows因為是測試版,經常性的有問題,有時候還會不能使用,這時候可以試試Emmet LiveStyle,他主要會針對CSS的部分直接reload。來看看官方的影片吧。

0

純 "CSS" Banner animation教學

在座這網站的時候,上方有保留一塊區域打算放banner,一般來說banner都會用jquery跑馬燈的方式去做,但是對我來說那要做好幾張圖…好麻煩,所以我就做一張連續圖片(左右可以相連的圖片),讓他不斷的向右移動。

0

簡易CSS transform 視差效果

在先前範例中可以得知,CSS transform 來做視覺特效,效能會比原始的CSS2還要好,所以本篇就利用css transform 以及hover來簡單做一個互動的效果吧!

0

GitHub Page

這一篇先介紹Github Page,這一個空間是每一個GitHub使用者都可以了解的地方,如果需要做一些DEMO給其他人看,可以試試看這方式,速度快,而且免費!

0

效能更好的banner animation

之前有一篇介紹利用background-position製作動態的banner,不久後就接到效能不好的問題,所以我就重新用另一種方式製作,發現效能有明顯的提升,也很有成就感,本篇就介紹不同的動態banner作法。

0

利用Jekyll Bootstrap 快速建立Blog

Bootstrap是一套好用的framework,而jekyll就利用bootstrap的便利建立一套jekyll framework,稱作為Jekyll Bootstrap。除了版型外,還另外增加許多實用的模組,如Disqus、google analytic等等,本篇就來介紹如何在github上建立jekyll bootstrap。

0

Jekyll 介紹

本篇開始會重頭介紹Jekyll,如果對jekyll有興趣的開發者,請先必備以下的技能。 熟悉 Git (至少要會git push) 熟悉 Html (修改 template 及 寫文章用)

0

從CSS到Sass 學習分享

本身是視覺設計系所畢業,在學期間雖然有做過網站,但其實Html及CSS可以算沒有寫過,連html需要結尾都不知道。兩年前,進路職場還是相當依賴Dreavweaver,所以更別說Sublime text這麼潮的工具,我是根本連聽都沒聽過。 但到了現在,對於CSS及Sass已經可以和人侃侃而談,閒暇之餘還去參加鐵人賽分享一下CSS3的研究心得;而這當中,我覺得最重要的就是”開始”的行為,不論是從基礎的CSS,或者是利用Sass開發,只要跨出了第一步,剩下就容易許多了。

0

在Jekyll設定自己的留言板

寫blog的作者,都會希望每篇文章都能有些回覆,所以一個留言機制是必要的,但是jekyll本身是屬於靜態網頁,並沒有資料庫,所以必須透過其他服務來做。在jekyll bootstrap內已經有包含disqus的留言板,而且設定容易,使用者也相當多,非常建議用disqus服務。

0

Amazon book 書籍封面展示效果 (CSS 3D)

自從學了CSS 3D後,就一直想嘗試使用在網頁上,但除了形象網頁外,使用CSS 3D的網站似乎不是很多,畢竟這不是必要的效果。而最近在Amazon Books的購物商城上,發現他們有用CSS 3D在展示書籍的正反面。 Amazon books

0

做網頁如果缺Icons怎麼辦

最近很多人跟我討論到的網站上icon的問題,如果要畫icon要花多久時間、使用的方法等等。而以我來說,較傾向使用免費icons或者是付費的向量icon,不建議自己畫這些icon,因為要畫一個icon所花的時間成本,都可以買一套200枚的icons了= =。 而今天要推薦的是ico moon,這在之前就有推薦過,而這次的教學,要針對於要直接使用他的icons在網頁上。 http://icomoon.io/

0

在Winodws上運作jekyll

Jekyll是在Ruby環境下運行,而Windows對於Ruby的支援性較差,所以在安裝時較為麻煩(Mac OS使用者可以直接參考官方網站),並且會有些問題,有興趣的Windows user就來參考我這篇吧~(我至少從頭裝了5次!)。

0

在Jekyll中調整屬於自己的Template

會用jekyll有一部分是想要自己設計版型,我所擅長的是視覺設計、HTML、CSS,我就用這幾個技能設計自己的版型,當然這並不是那麼的一兩篇就可以介紹完。所以這篇會說明一個範例,介紹Jekyll中的版型運作邏輯,有興趣的使用者可以依據這概念設計屬於自己的blog。

0

Sass 模組開發

最近社群上有人分享了一個連結,是關於sass模組製作的教學,大致看了一下,發現和我的方式頗為接近,所以就在這介紹我的Sass模組開發方式。 http://www.sitepoint.com/sass-component-10-minutes/

0

大陸面試題 如何反轉元素內容

最近大陸網路上有篇問題文,問題:看到一道面試題:ul有10000 個li子元素,如何將這10000 個li顛倒順序。而其中有一個神回復,真的是活用CSS3的特色,所以在這邊分享給大家看看(本篇以150個為例)。 來源:http://v2ex.com/t/100982

0

CSS設定中英文不同的字體

Just font中的字型學文章都相當有意思,而有一篇是關於中英文字搭配的問題;這篇雖然是以windows word為例,但裡面的概念在網頁上也是很有幫助,而其中一段”以 Windows 內建的三種字型為例,表現最好的是微軟正黑體,英文部分採用了微軟的 Segoe UI,粗細與中文較一致“,在目前web中當然也可以有這樣的設定,只要用CSS3的unicode-range,就能夠在中文字中套用”微軟正黑體”,英文套用”Segoe UI”。

0

SVG 矩形、圓形、橢圓

SVG是屬於向量的圖形,所以他有許多的繪圖概念與Illustrator,所以這次就來了解他的一些常用的基本圖形。

0

Spriting with Compass

因為最近剛轉換工作,所以一段時間沒寫文章,沒寫文章的時間雖然不至於會退步,但會感覺到進步遲緩…。 這次來介紹利用Compass製作sprites,sprites 就像是的Google icons,他把許多的icons集合在同一張的png,這樣可以減少用戶對於伺服器的請求數。而這次會有兩篇sprites文章,本篇是介紹基本的sprites,下次介紹retina版sprites。 Compass sprites來源:http://compass-style.org/help/tutorials/spriting/

0

Sprites for Retina

上禮拜教召,讓這篇已經準備好的文章又拖了一個禮拜…,然後現在打開卻有點忘記怎麼做…。 Compass sprites for retina來源:https://speakerdeck.com/hlb/maintainable-css-with-sass-and-compass Hlb的簡報有介紹,本篇也是參考此簡報做的。

0

SVG 線段

這次要練習的是SVG的line、polyline、polygon,這三個都有點類似,但是Polyline和Polygon兩者之間卻有線與塊之間的差異。

0

SVG 簡介

好久沒寫文章了,這段時間工作還是經常的會翻這Blog的資料,裡面很多很多的技術雖然很基礎,但是就是很實用。 所以呢!現在要挑戰”基礎”SVG!

0

Sass 3.3

Sass3.3出一段時間了,而Fire.app目前還是3.2的版本,據說是因為在等Compass 1.0正式版,而如果用Ruby的Compass確實也只能用3.2 版的sass。 不過新東西就是想用看看,上網查了一下並不複雜,所以這次就來試試看Sass 3.3 + Compass 1.0.alpha吧。

0

SVG Group

上一篇有簡單介紹一下SVG的元素,雖然沒有介紹很詳細,但是很多部分都和Canvas很相近,所以就不詳細介紹了。 而這篇要介紹svg <g>這個標簽,它的用途是群組化元素,而被群組後的元素就可以一起被控制,甚至是一起設定樣式。

0

玩玩看Rails

對Rails有些興趣,而線上剛好有Step by step教學,不如就試試看(本篇只是個操作記錄,並不是教學)。

0

CSS + SVG stroke 動態描繪

SVG有很多有趣的效果,尤其是stroke,它有許多不同的屬性參數,套用上css animation就有意想不到的效果,雖然不能達到豐富的互動,但至少可以在視覺上令人為之一亮。 這篇要利用stroke的dash特性,做出圖形描繪的動態效果。

0

CSS + html 冷知識

CSS及HTML已經學了有段時間,但還有許多不清楚的點都會在(偶然)的情況下發現,而有些只是有趣,但有些發現,或許是以前忽略的,但在卻是那麼的實用…。

0

純CSS Drop Menu

CSS 有很多技巧,都很值得去開發,最近發現了一個很簡單的技術,就是純CSS下拉式選單,這讓我避免使用Jquery去做slider的效果,重點是…超簡單!

0

Sass 3.3 Source Maps

Sass 3.3 除了上次提到的$Map外,還有另一個很有特色的功能就是Source Maps,這功能主要是配合開發者工具,直接就可以看Sass原始碼在哪一個檔甚至是哪一段,而這篇會配合Chrome 開發者工具來介紹Source Maps。

0

Rails 環境建設

最近要學的技術有兩個,一個是D3.js,另一個是Rails,目前是參考Xdite所提供的Rails 101,安裝過程中有發生些小問題,所以特別記錄起來,以免之後要在裝的時候忘記…。 Rails不是要打算精通後端,而是希望了解,以便往後再配合後端時能更有效率的處理問題。

0

SVG 漸層沒想到是這樣的做法

最近在研究SVG,在做專案的時候就會想用一些相關的技術,當時想在stroke上使用漸層色,所以就研究了SVG的漸層做法。 SVG的漸層做法,和我想像有些落差,原本以為會是類似CSS的寫法,但結果卻…。

0

Gem Github pages

最近聽說github pages有更新,那我也稍微看一下(真的只是稍微),之前都是用純Jekyll寫Blog,現在發現有github pages的gem(其實已經存在很久了),似乎可以方便很多。 這篇主要就是記錄安裝過程以及簡易使用。 https://github.com/github/pages-gem

0

安裝Gitbook

利用Gitbook製作電子書是相當容易的,作者只要熟悉markdown語法以及簡易的安裝,就可以快速編寫屬於自己的書籍,它有著以下幾點特色。 利用git 版本控制 用git就可以發佈新版本 利用markdown語法編寫 包含手機版 這邊就簡單介紹如何安裝gitbook server在自己本機上,以利於快速與他人合作。 注意:本文不會提到git操作,在使用gitbook前,請先熟悉git。

0

Gulp 環境安裝

鐵人賽我有準備一些文章,如網頁視覺設計(技巧、grid system)、前端設計工具的文章,比較偏向視覺設計以及前端工程的混和,但是鐵人賽我決定要換主題,所以文章就直接放出來(都寫了別浪費…)。 這一篇是Gulp的安裝,後來還有一系列的Gulp文章。 Gulp 可以做什麼Gulp 是一個前端任務管理工具,它可以做到如Fire.app、Prepros、Grunt等等所能做的事情,如果這樣還不是很了解,那就列表給大家看看。 編譯 SASS、Coffeescript 壓縮 .CSS, .JS, 甚至圖檔 web server with Livereload 享受自己動手做Task工具的快感 others.. 雖然很多工具,都能做到類似的功能,但是如果需求不足的時候,就要開另一個工具來幫忙,如另外許多專案已經在執行中,或者是老專案,有些工具過於強大,就會顯得沒那麼合適,那麼就可以用gulp客製化屬於該專案使用的工具。

0

翻譯Material Design心得

距離上次的文章也將近一個月…,這段時間主要是在翻譯Google Design,所以有一段時間沒有發新的文章。然而翻譯Google Material Design的原因,也是想要讓中文化後的更多人閱讀,進而引起大家的討論。 整體翻譯的時間從6月27日到7月23日將近一個月的時間,特別感謝從一開始就協助翻譯的Tillonter Hsu、Helen兩位,到最後都還在翻譯;也很感謝Peter、Frances的加入,讓整體進度突飛猛進,還有社群其他的好友Charlene、Mkdodos、陳聖博、Xuan沒有大家的幫忙,這是沒有辦法再這麼快的速度完成的,當然研究所的朋友Xunyi,感謝一起入坑幫忙。 https://www.gitbook.io/book/wcc723/google_design_translate

0

2014 鐵人賽慢慢開始跑

去年參加了鐵人賽,主題是CSS,這過程中讓我獲得很多,重點並不是在於得獎,而是在每天追求的過程中,必須在有限的時間內不斷地追求知識,也不斷的挖掘有什麼是可以分享的。

0

Gulp Task and Gulp Pipe

Gulp主要有四個指令,用這些指令就可以完成大部份工作。 gulp.task(name, fn) 定義一個任務名稱,接下來指定任務的工作內容 gulp.run(task) 運行指定的任務 gulp.src(glob) 檔案來源 gulp.dest(folder) 檔案的存檔路徑 而在上回的範例裡,已經呈現了主要的三個。 123456789//gulpfile.jsvar gulp = require('gulp'), coffee = require('gulp-coffee');gulp.task('coffee', function() { //'coffee'是排程名稱,可自定 gulp.src('./app/coffeescripts/*.coffee') //來源檔案 .pipe(coffee()) //編譯 .pipe(gulp.dest('./app/assets/js')) //輸出位置}); 而這篇會介紹如何用gulp將一個任務串接,並且監視它。

0

D3 Js 介紹

之前有提到最近要學的技能是Rails以及D3.js,這也是我今年的計劃,剛好也趁最近Diablo III手氣不好,一直打不到華戒,就抽空來都學學吧。 最近的文章,都不算是什麼教學文,算是學習記錄。

0

SVG 超硬派了解 path Arcs

這次來到Path的最後一個屬性A,A是所謂的弧形,和先前不同的是,弧形一個屬性可以比上一章全部的難度…。這次看看能不能用硬派的方式來學習Arcs弧形…。 本篇建議使用超過720px裝置觀看

0

SVG Defs 以及 CSS

SVG內還有一個相當有趣的標簽<def>,用途是先定義一些圖形、漸層、形狀等等,甚至可以把它們群組起來,等待使用,如果用Illustrator 來介紹的話,就像是圖樣工具。

0

SVG 簡介

這部分會持續幾篇,主要是我先前Blog整理出來的,不會相當的深入,是為了解SVG的使用方式。另外這次鐵人賽也有高手是介紹SVG,如果有興趣也可以參考其他高手的文章。 SVG(Scalable Vector Graphics),中文直譯就是”可縮放向量圖形 “,它是以XML格式儲存,而在瀏覽器上是從IE9後才開始支援SVG。也因為是XML格式,所以D3對它特別容易進行操作。

0

D3js 將資料投影到SVG上

先前介紹SVG那麼多的篇幅,結果上一篇居然用Div了事,這樣怎麼說得過去…,所以這篇要用SVG把”資料”畫出來。

0

SVG 超硬派了解 line, polygon, polyline, path (手工繪製)

這部分會持續幾篇,主要是我先前Blog整理出來的,不會相當的深入,是為了解SVG的使用方式。另外這次鐵人賽也有高手是介紹SVG,如果有興趣也可以參考其他高手的文章。 今天要介紹的是線段系列,可以想像成Illustrator的鋼筆工具(也不知道為什麼要翻譯鋼筆工具,據說是設計師不會懂貝茲曲線…),分為line、polygon、polyline、path,而其中我認為最難的是path…,希望今天能夠突破他。我將用非天才型的硬派學習法! 本篇建議使用超過720px裝置觀看

0

D3js 前置作業,製作簡易Server

部分情況下,直接點兩下index.html就可以打開網頁,而且js都可以正常運行,但某些瀏覽器會限制js載入本地端的檔案,主要是安全性考量,這也可能影響到d3js嘗試載入任何外部檔案(CSV、Json等等),為了避免往後的範例有這樣的問題,所以必須要有個簡易的伺服器。

0

D3.js Scale 尺度

上一篇其實就已經介紹了D3.js相當重要的data()以及enter(),今天要介紹的也是很重要,就是(Scale)尺度。

0

D3.js 國慶日在家裡畫長條圖

上一篇的重點相當重要,可以運用在各種圖表上,而其實在之前介紹的用div繪製直條圖,在SVG上當然也是行得通,而且相當容易,今天是國慶日,當然就要來點簡易好吸收的主題。

0

D3.js 讀取CSV資料並繪製成長條圖

有了Excel的資料,也可以用d3.js去轉換成json,再結合前幾篇所做的長條圖,不就可以輕易的完成資訊圖表了!?是的,這次就來完成這個圖表吧。

0

SVG Stroke , Marker 以及 CSS

今天是假日,就來個簡單的收尾,來介紹這幾天的混合用法,當然,我不會想在假日看到<Path>…。 會先介紹之前Blog所提到的stroke animation,在介紹marker,marker是製作一個圖形,套用在line、path、polygon等等的線段上,可以定義在起始點、終點、以及轉折點上。

0

初入D3.js

先前的練習差不多了,接下來要開始實作,不過要先聲明本文是學習過程的記錄,所以很多範例是參考網頁互動式資料視覺化: 使用D3,當然到了後面也會有很多不同的運用,並不會重頭到尾都是這本書的內容,就像上一篇一樣,還可以玩玩柯P的API。

0

D3.js 利用Excel建立資料(CSV)

做了那麼多,資料都是隨機產生的,雖然每次打開都不一樣,但是還是假的資料,這次來試試看讀取Excel的資料吧。

0

D3.js 究竟搭不搭捷運與死亡率有沒有關係?(1)

D3js最終還是需要與資料串接,在玩了一段時間基本的功能後,就會想找點東西試試看,於是就到處搜尋可以用的資料(希望與時事結合),雖然取得資料方法相當多,但是能夠派上用場而且又要會使用,就沒有那麼容易。 因為我的jsonp,或者json能力並不是挺好,所以在找資料前,有先研究怎麼與Google Drive做介接,所以這幾篇還會介紹怎麼從Google試算表取得資料。

0

D3.js 究竟搭不搭捷運與死亡率有沒有關係?(2) - Google 試算表

上一篇提到資料是放在Google 試算表上,然後再透過web 前端去接資料,當初會想這麼做的原因有以下幾點: 資料路徑穩定,不易掛點 技術上只要成功一次,以後都沒問題 資料建立簡單,大部份的人都可以參與 可以多人協作 對我來說,資料怎麼接一直是很大的問題,也在想如果沒有後端技術,要處理資料是不是比較複雜,還好有Google Drive,不僅解決了資料處理以及介接的問題,還有許多的優點可以去活用。

0

D3.js 軸線(Axis)

到上一次為止,其實就可以畫出簡單的資料圖表,現在開始就要讓資料圖表更為豐富且好閱讀。 今天要介紹的軸線(Axis),讓圖表上多一個可以閱讀的尺標,D3.js正好有提供這樣的函式,可以輕鬆的產出軸線。

0

D3.js 圈圈小效果

D3js除了繪製圖表外,還有許多開發者拿來作為視覺或者互動效果,假日的文章,就來介紹一些網路上所找到的效果。

0

D3.js Transition動態效果

先前的資料,都是固定的,沒有任何變化,這次要介紹的是利用資料的轉變以及transition的效果。

0

像jQuery 一樣的D3.js,柯P野生官網API

D3.js其實最重要的還是資料,恰巧有一位候選人做了Open data,他的API格式相當優良,如果對於找不到合適資料,但需要做些練習,不如試試看柯文哲野生官網吧! http://unlimited.kptaipei.tw/

0

D3.js 資料數量增減

資料很多時候需要比較、切換,所以可能會同時加入多筆資料,前一篇文章所介紹的是相同數量的資料,這次要做隨機的資料量。

0

D3.js 折線圖(Line Chart)

在開始有題到網頁互動式資料視覺化:使用D3這本書,整本大致上都看完了,但是裡面居然沒有折線圖!雖然這本書主要教的是觀念,不過折線圖還是很重要,所以還是另外找了折線圖的範例來仔細學習一下。

0

D3.js 也可以像音樂一樣動吃動吃動(2)

上一篇介紹了資料的來源以及動機,這篇就來介紹執行的層面吧。 在原本的範例中,是只有一個圓在跳動,但是音樂所能擷取的資料是一段很長的陣列,我就思考著是不是有辦法做成折線圖,並且讓他有躍動的感覺。

0

D3.js 也可以像音樂一樣動吃動吃動(1)

學習D3之後會常思考有什麼樣的資料可以圖形化,除了Open data外,還想到一個就是音樂,以前使用Media Player,有許許多多的音樂視覺化的效果,都是透過聲音大小變化,所以如果有聲音大小變化的資訊,似乎就可以達到這樣的效果。

0

PDF轉CSV,利用Tabula

D3.js最重要的就是資料,所以需要有許多不同的資料轉換方式。PDF是常見的檔案格式,因為製作方便,又可以跨裝置,所以PDF也是經常取得的檔案格式之一,相信大家都使用過PDF格式,它很適合閱讀,但至於轉成資料格式呢?似乎就沒有那麼容易。 這篇就來介紹Tabula將PDF轉換成CSV作為D3.js所需要的資料格式

0

d3.js 再看更多layout前,先來轉換json結構

上次提到d3.js有包含許多的layout,但是每種layout都有些結構上的限制,就比如說 Tree Map,這樣的layout就需要巢狀結構的json才可以製作,D3js也有提供巢狀結構的轉換,這邊就來介紹最常用的轉換方式。

0

高雄前端社群 - d3js

上週在高雄前端社群介紹的D3.js,忘記放到Blog上,這次介紹的內容,和之前在鐵人賽有許多不同的點,範例很多都是全新的喲。

0

D3.js 鐵人賽的結束

這次參加鐵人賽,我也猶豫了很久,在開始前我已經準備好了近十篇另一個主題(視覺前端與前端技術),但是牙一咬就報名了另一個主題d3.js,用意是想學d3.js。學習的過程中挫折也是挺大的,因為我對於資料處理並不擅長,光在json的處理就費盡心思,還好在學習的過程中有許多人可以讓我詢問該怎麼做,不然真知道怎撐到最後。

0

Gulp RUN ruby-compass

最後一篇,來介紹gulp-compass,這一篇的內容較短,但是要特別注意系統是否可以運作ruby以及ruby compass(由於compass有更新),所以和前一篇的差別會是多了ruby。

0

前端設計師的設計與執行

圖片來源 google material design 看到 嫁給RD的 UI Designer 的這篇文章有感,想說也寫一下我對於這個主題的想法,在工作的流程中,每個人所佔的崗位不同,都會有不同的觀點,她的這一篇所在的角色是UI,我的看法是設計師與前端之間的角色。 從學設計到現在轉職成前端,因為設計背景的關係,所以大部份在執行時都是從設計到切版都是我做,這在執行上並一定是好的流程,只是不同崗位,有不同的觀點,同時橫跨兩個崗位,就會掌握不同的面向,但畢竟是一個人,無法面面俱到,所以這邊會提出一些我的看法及解決辦法。

0

試試看Canvas

這篇也是前一個Blog的文章,最近在整理就一起拿出來。 Canvas挺有趣的,在一年前試過,而網路上也有相當多的library,但是在使用lib前還是先簡單了解一下canvas的運作吧。 參考:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage

0

視覺前端 - 按鈕的使用情境

視覺規範沒有一定的標準,究竟是美醜優先,還是使用者體驗優先,這都沒有一個準則,當然在最理想的情況下,是能同時符合兩者。所以在按鈕的使用上,我嘗試找出一些規則,來讓畫面不至於凌亂,並且讓使用者可以感受到舒適。 而按鈕本身有著不同的個性,所以在畫面的使用上,也會依據需求的不同,來使用不同個性的按鈕。就算是同一個Framework所提供的按鈕,也會有相當多樣的選擇供開發者使用,但是選擇一多,往往也會造成困擾。 “目前的情況下該用哪種按鈕?” 上面的問題,我也思考很久,所以整理了幾種可能的性給大家參考參考。

0

Jquery 重複點擊判斷

這篇是舊文重貼,原本是在aShareaDay上的文章,可能因為太短…,所以我沒放到這新的Blog上,但最近有人在詢問(感謝貴人提醒),範例也相當實用,就再重新放上來。

0

Webkit 自定義Scroll Bar外觀

Webkit 可以利用CSS修改Scoll bar的外觀,有試過其他瀏覽器是不行的,而有時候在使用局部範圍的overflow: auto,會需要較為纖細的scroll bar,如果不在意webkit以外的瀏覽器,可以試試看這個方法。

0

專輯封面顏色作為背景色(平均色)

現在有些音樂專輯選單做得很豐富,其中一種背景色會隨著專輯色改變,我剛好想到以前有做一個CSS專輯選單,如果結合Canvas似乎就能達到差不多的效果,所以就來試試看。

0

參與開源專案

最近有參與高雄的開源社群Code for Kaohsiung,除了人到場以外,也想盡份心力,所以試著來提出一個構想,花了些許時間建立了模型,並且拿到社群介紹這個構想。這個構想源自於之前所研究的D3.js,在後期的學習,會思考怎樣可以簡易的建立資料,並且運用圖表分享。

0

試試看Canvas (2),調整Canvas圖片色調

這篇也是前一個Blog的文章,最近在整理就一起拿出來。 Canvas挺有趣的,在一年前試過,而網路上也有相當多的library,但是在使用lib前還是先簡單了解一下canvas的運作吧。 參考:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage 這篇主要是介紹Canvas中調整RGB的值,藉此改變顏色色調。

0

視覺前端 - 按鈕的個性

在參加完鐵人賽以後,會想要再精進UI設計的部分,所以想試著寫設計得文章,接下來會連續幾篇UI設計的文章,有些是在鐵人賽前就準備好的,最近在重新整理PO出來,希望大家會感興趣。 網路上有許多開源的Framework,通常我都會參考他們的按鈕以及表單設計,因為這是最能夠表達Framework特色的元件。按鈕與表單,按鈕更能表達一個Framework的個性,如圓角、顏色填充的方式、預設的色彩變化、單位計算方式(em or px)等等,當然表單也有,但許多為了實用性,表單會將設計簡化。

0

試試看Canvas (3),Canvas 小畫家

這篇也是前一個Blog的文章,最近在整理就一起拿出來。 翻翻一年之前做的,才發現原來有很多很酷的東西,還好有寫成簡易的文章,讓現在再重新看可以很快瞭解,這篇是介紹用Canvas做小畫家,並且還可以下載下來的功能,有分為好幾段,這邊全部合併成一篇。

0

Middleman 超級快上手

之前長時間都是使用Fire.app(到目前也有在用),因為少許原因,所以一直有在嘗試其他工具,而之前有介紹過Gulp,他可以透過Node.js做出類似Fire.app的工具。而最近,有人和我介紹了Middleman,嘗試了一小段時間後,比想像中更容易,更貼近Fire.app,比Gulp更好設定,有興趣的就來安裝看看吧~。

0

CSS 5種垂直置中方法

說到垂直置中一直是網頁設計師的痛,早期解決方法沒有那麼多,最常見到的就是height = line-height這種方式,可是這方式彈性很低,如果遇到多行文字就無法使用。 然而隨著CSS的演進,越來越多種垂直置中的方法,這邊就介紹幾種實用性高的垂直置中方法。

0

CSS 冷知識

前幾天參加了Happy designer + RGBA的活動,這次不僅僅是兩個社群的合作,還是以CSS為主題作為介紹。這次活動不只介紹了CSS架構,還介紹了許多CSS的奇妙解法,想到很久以前也寫過類似的文章(CSS 冷知識),個人認為這類冷僻解法相當有趣…,有機會應該定期發表CSS冷知識。

0

Sass map get

去年有介紹sass模組的開發方式連結,sass 3.3 釋出以後有更好的方式去執行,這篇來介紹快速且好管理的模組製作方法。

0

投資自己、投資資產

之前就有打算Blog的內容不全部都是技術文,最近看了不同領域的資料,有很多不一樣的看法,其中有一本書對我的看法有很大的改變,富爸爸告訴你,為什麼A咖學生當員工,C咖學生當老闆!,這本書是屬於理財方面的書籍,之前理財完全沒有概念,想說閱讀看看,說不定有幫助,看完之後想法改變非常多…。

0

Zeplin, 跨越工程師與設計師的鴻溝

從去年開始,做網頁設計時都開始使用Sketch,一方面是對於Web來說,Sketch相當的合適,另一方面則是Sketch有相當多的擴增工具,讓在執行上可以方便不少。 這次就來介紹Sketch的擴增工具Zeplin,設計師可以透過這套工具,快速的傳達設計的內容,包含顏色、間距、字型等等,而工程師不會因為色弱,老是用錯顏色,且工程師不需要安裝Sketch就可以使用,Zeplin甚至提供Web版來快速上手。

0

2014年度回顧

2014年在學習上是豐收的一年…,踩著過往的基礎,學習速度越來越快;但還有許多地方經歷不足,對於許多事情也相當任性,除了能力的上升以外,對於人生也要多學習啊~。

0

Reactjs JSX格式轉換

剛接觸React.js通常遇到一個問題,就是開發環境怎麼配置,原因在於JSX的格式需要轉換。JSX讓javascript內可以插入html tag,雖然是可以選擇使用,但官方也建議使用JSX格式來進行開發,如果對於React.js有興趣的,不妨參考一下這篇JSX格式轉換吧。

0

開始學習 React js

最近開始來學react,相關的文章不會寫得非常細,主要是要寫學習過程。 參考文章:http://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/

0

Javascript 閉包

一直以來我都不太敢寫純 Javascript的文章,主要原因是底子不夠深,害怕寫了之後錯誤太多,但最近想學看看React.js,如果說一直不敢寫的話,那麼就無法進步。 這篇是要介紹Javascript閉包,參考的是這篇文章,這篇寫得不錯,從頭到尾看到有感受到閉包的用法,但或許有錯誤,也在這邊重頭到尾表達一次,在詢問大家是否有需要糾正的。

0

Middleman + Reactjs

上一篇是使用gulp來轉換jsx,這篇是介紹用middleman 結合 React.js。

0

關於學習

在學習上和以前看法有很大的不同,以前讀書是為了分數,但我本來功課就不好,也對分數沒什麼追求,只要勉強及格就好,記得在復興商工(復興美工)的時候,每年祈禱不要留級就好…。 現在學習比以前更有成就感,認真學習可以效率更高、拿到更好的薪水、甚至認識更多的高手。不過就這幾年來的心得,學習並不是短時間所達到的,是長時間的累積,所以通常我會採取以下作法:

0

用CSS呈現影像比對效果

http://lea.verou.me/這位工程師的CSS能力非常優異,他的blog有很多意想不到的效果(而且是個正妹),這邊來分享他的其中一個效果。

0

Hotjar 網站熱圖

Hotjar 是監視網站使用者資訊的工具,提供 Heatmap、Recording、Funnels、Forms 四種監測服務,透過這四種服務可以分析使用者行為,判斷使用者操作是否符合預期。

0

SVG 客製化 checkbox

先前有看到酷炫的checkbox效果,一直想要做看看,最近在整理資料的時候發現還沒做(因為坑還很多),這次就來介紹這樣的效果要怎麼完成。

0

隨意玩玩的 nw.js

之前就有聽說 web可以上桌面應用程式,也找到相關的工具,這次就是把實驗的成果記錄下來。

0

動手玩 CSS,快速學會Flex

上次製作了CSS column的範例,對於學習CSS column可以快速地瞭解(但實際運用相信坑非常多),這次用angular製作了flex的範例,讓大家透過動手玩來快速瞭解這是怎樣的坑。

0

CSS column 教學

CSS column對於文字排版有很大的幫助,就類似Adobe indesign在文字排版時,只要指定文字欄數,再將文字全部匯入即可。這樣在文字編排時則會以內容為優先,並非受限於html規則。

0

將 Sketch icons 轉成 web icon fonts

在之前轉web font icons 通常是使用Icomoon,他提供不錯的介面以及大量的icons供開發者使用,但有些時候Icomoon並不符合我們的需求,例如: 公司專案,不宜上傳到第三方空間 有版本控管需求時 設計師控制慾很強時(? 而萬能的Sketch及Gulp再合體之後,就有了Sketch to icon fonts 的功能,只要轉一次,同時提供了: icon fonts 字型檔 寫好的css檔 還有HTML使用範本 對於前端以及設計師簡直接就是一大福音。

0

更棒的 Jekyll 編寫工具

這個Blog也維持很長一段時間了,曾經會想要放棄維護轉到其它平台,主要原因是Jekyll上稿有些麻煩的地方,其中一項最痛的就是上圖…。在上圖之前,都必須先將圖片放到/images,接下來再手動寫相對位置,如果圖片要換,就必須再打開/images資料夾,一來一往必須花很多時間。 最近發現了Atom編輯器有套件可以自動把圖片搬移到該資料夾,並且還有許多Jekyll的輔助功能,讓我可以更專注於Blog的文章內容。 如果您跟我一樣是 Jekyll 的使用者,相信你會很喜歡這編輯工具。 圖片來自於 Atom 官網

0

過去的學習 每天一分享

很多人會問我設計師怎麼轉工程師,主要的方式當然是每天練啊! (故事回到了2013…)當時會的不多,基本的CSS(還有一些些sass)、簡單的jquery,不會任何框架,所有的技術都很基本,那時給自己的目標是連續一百天發文…。

0

被討厭的勇氣

你過得快樂嗎?如果不快樂,代表你不夠在乎你自己。 “被討厭的勇氣”是我今年看過最值得閱讀的一本書,書中的引言有許多人提到為何沒有早一點看到這本書,在我讀完以後也會有這樣的感覺,可見內容之精彩。 本書的內容是以故事性的方式呈現,大綱是一位哲學家與具有反社會心態的年輕人對話,在不同的夜裡年輕人不斷挑戰哲學家的阿德勒學說,在這一正一反的對話內容,更能凸顯出本書的內容以及古代哲學對話與辯論的精神。 在這書中有幾個段落對我啟發很深: 心理創傷並不存在 屬於別人的課題 尋找自己的歸屬感 認真地活在當下,人生的價值就在於此

0

Compass 替代方案(1) - 更快速的 Sass

Compass 是一套非常優秀的 Sass 擴充套件,從剛開始學 Sass 就一直用到現在,許多優點是一般 CSS 或 Sass 較難達到的,如: CSS Sprites:可以將圖片轉成Sprite,並提供 CSS class。 CSS3 mixin:prefix 啊~ Vertical Rhythm:CSS 文字排版的救星。 image-url, image-size:圖片路徑的取代以及取得圖片的尺寸。 但現在有些問題讓我考慮放棄使用 Compass 如: 很久沒更新,距離上次更新已將近一年 基於ruby sass,效能較差,編譯速度慢 因為久沒更新,很多 css3 @mixin 已不符合現在規範 CSS Sprites 沒有 SVG 版本 接下來會連續幾篇開始介紹透過 Node sass 取代 Compass 的相關技術研究,當然 Compass 不會馬上被取代,但也要準備好替代方案,畢竟工具只是要增加產能使用,並非一定要追最新的才行。 如果還在使用Compass的使用者可以當作參考就好,工具還是要用得上手比較重要~

0

客製化屬於你的 Bootstrap 4

Bootstrap 是目前最流行的CSS Framework,第四版也釋出了開發版本,無論第幾版對於工程師來說 Bootstrap 就是那麼的容易上手,但扯上設計就要多多配合了,不同身份看待 Bootstrap 也有不同看法,例如: 設計師:Bootstrap 很醜誒,你看那個濁濁的顏色 (當然每個設計師觀點不同啦…)。 前端:Bootstrap 要配合設計師的稿,似乎有點麻煩…(看著對不上的Grid system)。 後端:不是都長一樣嗎? 其實Bootstrap的設定檔就有許多細節可以調整,不需要 Overwite,載入前就可以先調整,而且並不是一定要全部元件載入,可以只使用部分的元件,靈活的使用框架,才能發揮更大的價值。

0

壓縮css的終極必殺技

CSS 再怎麼開起開壓縮,頂多縮個幾十k,uncss可以搜尋html內所用的class、id,再將.css內的多餘class or id移除,達到最佳化的壓縮。

0

跟 Javascript 相比,CSS 還是友善多了 @@

本週參加了高雄 Javascript 讀書會,所選擇的書籍是 JavaScript設計模式與開發實踐,這本雖然原本是簡體書,但內容真的不錯(不過我只有看一兩章似乎沒什麼說服力 >O<),也多虧這次的讀書會,讓我對於技術有更深層的看法。 JavaScript 什麼的太難了…,直接請人教比較快 了解設計模式對於大部分 JavaScript 的了解很有幫助 (如 Angular 的 Service 本身就具有 Closure 的觀念) 參加讀書會這樣的活動,對於技術的學習相當迅速,等於是直接吸別人的經驗值 工作上雖然會寫 Javascript,但這次讀書會光是 this 就可以玩死我 Orz,更別說 Closure、ES6 等等…,雖然最後還是有學到一兩招,但真的很累…。

0

第二次 CSS 讀書會 - Sass 環境建置

這次是第二次的 CSS 讀書會,目標是要教大家 Sass 的環境建立,也算是比較大的挑戰,因為要在線上及現場教大家怎麼運行 Sass 的編譯環境,且主要的目標族群包含了設計師、網頁設計師,甚至是沒有碰過 command line 的開發者…。

0

第一次 CSS 讀書會

這次在高雄舉辦了 CSS 讀書會 (Grid syetem),主要是之前參加了 javascript 讀書會,認為CSS 也能辦相同的聚會,在第一次試辦時有許多測試水溫的方式: 想先瞭解受眾類型 估計參與人數 直播的方式是否可行 未來讀書會的方向

0

動手玩 CSS 3d

一開始接觸 CSS3 時,常常會不了解每個 CSS 屬性的意思,就需要花些時間去查詢及嘗試,就算到了現在,對於不熟悉的語法,我還是經常回我的 Blog 查詢,如先前的 動手玩 CSS,快速學會Flex,我就經常會回去查 Flex 的使用方法 Orz…,這次趁寒流來襲,不想出門的時間在家裡做簡單的 CSS 3d 範例。

0

響應式網站設計實作坊 - 高雄前端社群

本篇拖了很久很久才寫,主要原因是因為最近實在很忙,加上一直想跳到 Wordpress 平台上去寫作…(Server 都準備好了),但 Wordpress的 Server 可能還會被我拿去做其他用途,所以又回來寫了,哈哈哈哈。 這是高雄前端社群久久難得一次的 Responsive 課程,也很難得出現秒級的時間內票券完售 (當然可能是免費的關係啦 :))。

0

Compass 替代方案(2) - 透過 PostCSS,停止加入不必要的 prefix

承上篇,因為 compass 很久沒維護,所以在找替代方案。而這篇是要介紹很火紅的 post-css,主要是要解決 css3 prefix 的問題,post-css和 sass 不同的是,在 prefix 的方法不需要先定義成 @mixin ,可以在事後再決定是否加入 prefix,這讓不斷在更新改變的 prefix 流程簡化很多,並且可以有效減少 css 的檔案大小 (prefix 是很肥大的)。 Prefix 的減少速度也是相當快速,像是 box-shadow 的 Prefix 可能消失超過一年, transform 也大約一年左右不需要 Prefix,如果不想要明年慢慢的移除自己所種的 Prefix,或許可以參考看看 post-css的 autoprefixer 工具。 如果還在使用Compass的使用者可以當作參考就好,工具還是要用得上手比較重要~

0

Compass 替代方案(3) - 加入 SVG Sprites

Compass 的 CSS Sprites 是非常好用的工具,在以前有介紹過 compass 的 Sprites 作法,只要把圖片丟一丟就可以完成,而且也可以做 for Retina 版本,但是使用SVG 製作 Sprites 就沒有辦法。一直以來我都是以向量工具做設計,如果不能轉 SVG 這樣高品質的圖檔,對我來說也是挺困擾的。 這篇就要介紹如何使用 Gulp 來製作 SVG Sprites,並且同時產生一般 png 版本來相容於舊版的瀏覽器。 先前的 Sprites 介紹文章 Spriting with Compass Sprites for Retina

0

讓使用者愛上你的表單,提升客戶轉換率

不知道你們在使用手機填寫表單的時候,會發現這樣的狀況,填寫地址跳出中文、填寫 E-mail 表單跳出中文、填寫電話也是跳出中文,甚至是日期欄位也是跳出中文,這樣其實對於使用者來說是很不便利的。如果這個狀況發生在結帳前,很高的機率導致使用者失去耐心,甚至離開網站,如果在表單上多花點小心思,就可以讓使用者快速地填完表單,讓雙方都滿意這次的交易。

0

轉行工程師必須克服的三大痛點

本篇是以設計師轉工程師為主要觀點 在研究所那年,我投入大量的時間學程式,由於當時的 Flash 相當火紅,所以決定從 Actionscript 3.0 開始入手,那時也遇到相當多的挫折,印象很深的是在床上看著短短的程式碼 (手打沒問題,重點是我想了解原理,才會在床上看書…),那段寫著什麼是 “變數”,就現在看來這是很簡單的觀念,但我也是花了好幾天才能理解是什麼意思。 現在有機會從事教育推廣,從與許多設計師想轉行工程師中的對談中,認為有以下三個原因阻擾著設計師,如果可以克服,在學習上會更為順利:

0

Sass 基礎教學 - CSS 讀書會

先前的讀書會難度都有點過高,所以有時候聽的人會有點母煞煞,所以這次決定先介紹基礎的部分,以後再來介紹延伸的內容。

0

CSS 失控的 Margin top

失控的 margin-top 是指在使用 margin 時常出現的問題,內元素的 margin 被外層所吸收,導致無法正確的顯示,這我們稱為 Collapsing margins,本篇來教大家怎麼應對這個問題。

0

鐵人賽 1 - 前言,CSS 最重要的事?

鐵人賽系列文又開始囉,這次的主題是 CSS 你覺得 CSS 最重要的是什麼勒? 如果換個方式思考,寫 CSS 最 痛苦 的事情是什麼呢? 載入速度緩慢 遇到不會解的問題 接別人寫的 CSS 接別人寫的 CSS,然後還看不懂在寫什麼 兩個月後維護自己寫的 CSS ,然後還看不懂在寫什麼 稍有資歷的工程師,其實最後幾點也遇過不少次 🙈。

0

Yarn - Node.js 的套件管理工具

NPM 每次在安裝的時候,都會安裝很久很久,就算是好幾個類似的專案,每次在執行 npm install 時都需要花費大量的時間,而且在網路不穩定的環境下還可能造成中斷。Yarn 可以讓這些問題好轉些,在實測時,安裝一次以上的套件時間將只需要原本的 20% 時間(甚至更短),將大幅減少逛 FB 的機會。

0

鐵人賽 2 - OOCSS 結構與樣式、容器與內容

以前剛進入這行,掌握了 CSS2 的大部分關鍵之後,對於製作網頁非常有成就感,因為當時寫一個站不需要太多時間(整個網站約落在 800 ~ 1200 行 CSS),而且 CSS2 語法數量也不多,查找時間也不需要太長,自然覺得世界美好(!?) 這樣快速入門時會有一些難以發現的問題,網站是否易於維護、CSS 可複用性是否夠高、命名是否一致,當時也會思考這些問題,但在沒有統整性的觀念引導下,許多嘗試都是不斷的在碰壁。

0

鐵人賽 3 - OOCSS 結構與樣式、容器與內容(實際範例)

結構與樣式在執行的概念上就是這樣的白話,目標即是將這兩者分離,上一篇我們用建築物的結構與外觀樣式做分離,再依不同的需求去做組合。 CSS 上也是相同的道理,比如說我們可以做這樣的分類: 結構:margin、padding、display、vertical-align 樣式: 色彩樣式:color、background-color、border-color 尺寸樣式:font-size、height

0

鐵人賽 4 - OOCSS 容器與內容分離 (最佳實踐)

結構與樣式分離,對於網頁的樣式設計是一種解放,所有元件的樣式組合搭配及擴增變得更自由。 這篇要介紹的是容器與內容分離,簡單來說我們可以把元件分為兩大類型: 容器型元件:如 grid、card、form 內容型元件:如 button、input、progress-bar 而不同類型的元件設計上應當分離,避免混寫限制元件的搭配。

0

鐵人賽 7 - CSS 框架架構參考 PURE CSS

在瞭解完 OOCSS 後,可以看看主流框架是不是有帶入其中之概念,接下來會介紹兩篇 PureCSS 與 Bootstrap,這兩者的簡單架構概念讓大家參考參考。 Pure CSS 算是很老牌的 CSS 框架,到目前使用者已少了許多,但架構到現在都很是非常直得學習,不需倚靠太多的工具,就能夠將 CSS 可用性發揮到最高,如果有朋友說要參考 CSS 的架構,相當值得學習的就是 PureCSS 及 Bootstrap。

0

鐵人賽 11 - Gulp - 透過 PostCSS 加入 CSS Prefix

說到 CSS prefix 相信大家都不是很清楚當下主流版本的 prefix 有哪些是必要?又有哪些是不必要的? 以往都是使用 Sass 的 Compass 來加入 prefix,這種增加方式就是無差別的加入,但其實現在的 CSS 有 9 成以上的 prefix 都沒有加入的必要,相信在短期內除了測試的 CSS 以外,都不需要再加入 prefix。

0

鐵人賽 9 - CSS 實戰心法 搶到決定權,開發環境自己來

前端工程師一般來說只要搞定 HTML、CSS、Javascript 就可以了,所以後端的環境上不用太在意,但在這幾年的體悟下,這是一個不負責任的想法。 我用過的前端自動化開發環境有: Fireapp:這用了有兩年之久,算是一個超級入門 GUI 自動化工具,但在 compass 不維護以後 Fireapp 也不再維護了。 Prepros:當時 GUI 的自動化工具另一個選擇,到現在還有持續在更新,但一直有些小問題所以沒有想用在專案上,但對於入門來說是個不錯的選擇 Middleman:為了與 Ruby on Rails 專案做整合,算是不錯的 Command line 工具,也是使用很長的一段時間,現在懶得自己開環境還是會使用。 *gulp:相當推薦的自動化工具,易學且可以與任何環境結合,缺點是肥了點。 *webpack:很潮的自動化工具,但與 gulp 觀念差異很大,適合製作 SPA(sigle page application) 的網站。

0

鐵人賽 5 - CSS 的命名技巧

程式語言的命名一直是個麻煩課題,除了要有良好邏輯外,還必須有大量的英文詞彙能力。CSS 雖然不需要有太深的邏輯,但由於上手容易,團隊合作的命名就容易被其他小夥伴所影響。 本篇透過圖文及小故事來介紹 CSS 命名概念,讓你與小夥伴的命名協作能力更順暢。

0

鐵人賽 10 - Gulp 與 Sass 開發環境

Gulp 是我目前最使用的自動化工具,在先前一篇也有介紹有哪些自動化工具,這篇開始會介紹 Gulp 自動化工具如何使用、有哪些推薦的工具以及一些經驗上的分享。而本次系列文都是著重在 CSS 的開發,所以不會介紹 Javascript 的自動化工具。

0

鐵人賽 6 - CSS 的元件狀態

CSS 元件狀態重點可以分為兩部分,一個是原生的 CSS 偽類(Pseudo-classes),另一則是配合 Javascript 所提供的 Class,在這部分相當在元件的初始時,就同時完成兩個部分。

0

鐵人賽 12 - Gulp - 定義預設開發環境

今天的進度來做個小調整,讓大家在使用 Gulp 時就能相容於目前的環境,目前使用的主要套件有:gulp-sass、gulp-postcss,這次調整後會有一個主要的前端專案資料夾,可以配合各個後端語言做調整,大家也可用相同的概念加入習慣的開發環境。

0

鐵人賽 8 - CSS 框架架構參考 Bootstrap

Bootstrap 是目前我最喜歡的 CSS 框架。 雖說如此,我以往可是很討厭 Bootstrap 的,身為一名設計師希望能夠有更多自己發揮的空間,所以早期一直在避免使用 Bootstrap 這樣的框架,總認為這些框架做出來的設計都很像,還因此自己寫一個 CSS 框架。 經歷過了一段自幹的歷程,從新再研究了 Bootstrap 的框架才發現自己很多觀念上的不足如: 過度的 sass @extend (良好的 CSS 架構,不太需要使用 @extend) OOCSS 觀念不夠強 (結構與樣式並未良好的分離) 框架可用套件不足 (自幹的怎會有套件 @_@) Bug 發現慢 (多人開發的框架 bug 自然少)

0

鐵人賽 14 - Gulp - Webserver

Gulp 很適合搭配任何其他的前後端結構,就先前介紹的幾個章節,只要略為修改輸入及輸出的路徑即可;除了搭配其他後端結構外,Gulp 也有適合直接開發的方法,本章會在介紹 Gulp Webserver,這樣就能夠直接在 Gulp 中開啟 Webserver。

0

鐵人賽 15 - 為什麼 Boostrap

Bootstrap 是目前主流的 CSS 框架,先前也有提到,在起初我是很不喜歡 Bootstrap 的框架,認為他搶走我大部分的工作且缺乏特色,但在研究後會發現他並非我想的那麼缺乏特色,完全看開發者的使用及熟練度。 我們也可以看到網路上有相當多的 HTML Template 都做的非常美,但其實底層都是 Bootstrap,有些已經調整得相當不像是原有的 Bootstrap 樣式。所以在熟練的情況下,Bootstrap 也是能做出超乎水平的網頁版型。

0

鐵人賽 19 - Bootstrap 一次看懂元件的使用組合

Bootstrap 的官方文件有完整的說明以及範例,就算是如此,還是會有許多朋友希望有快速入門的介紹,本篇就來介紹絕大部分 Bootstrap 元件的組合手法,搞懂一次後就能快速運用到其他模組上,甚至 Bootstrap 4 也是用相同的概念就能夠運用唷。

0

鐵人賽 21 - Bootstrap 透過 Sass 新增自定義元件

許多人在使用 Bootstrap 時,如果有需要新增、調整,都是寫在 CSS 的後方或是另開一個新檔透過 “覆蓋” 的特性來新增、調整。先前的文章已經介紹了如何調整 Bootstrap 的 CSS,透過變數的方式,我們可以調整整體的樣式設定,而 “新增” 我們也應該用相同的方法來製作,這樣的方法更有一致性,且能夠調用 Bootstrap 原有的變數及 @mixin。

0

鐵人賽 23 - 實戰心法 - 常見的垂直置中手法

上一章節介紹了各種 Utilities ,唯獨垂直置中不介紹,因為在製作、使用垂直置中時要先思考 “支援的瀏覽器”,就算現在全部 IE 的使用率低於 2% 的情況下,還是會有很多小兄弟會希望網站優先支援 IE。 本篇會介紹幾種垂直置中手法(不包含舊瀏覽器),每一種手法的寫法都不大一樣,所以使用時要特別注意使用規則。

0

鐵人賽 13 - Gulp - 在本地端製作 Icon Fonts

網頁設計都會需要大量的小 icon,現在的 icon 都傾向使用 web fonts 來處理,因為 web font 所製作的 icon 有以下的好處: 載入容易,HTML 只要載入一隻 CSS 就搞定 套用容易,只要透過 Class 就能套用 可自由調整大小、色彩

0

鐵人賽 17 - Bootstrap 自定義樣式超簡單

在導入框架至網站時,還要考慮框架是否符合網站風格以及往後的維護性。Bootstrap 雖然設計上是要給開發者直接運用的,但實際上他所設計的彈性非常之高,也很適合做客製化,甚至 fork 作為公司團體的 Style Guide。

0

鐵人賽 20 - Sass 資料夾結構

對於 Bootstrap 有一定了解後,我們即將要開始新增元件,不過在新增前我在分享一下 Sass 開發時的資料結構。 Sass 資料夾結構相信大家也聽說 SMACSS 等,不過我們我們已經加入了 Bootstrap ,在開發時也要思考如何結合不同的開發概念 (自己的元件與 Bootstrap 元件的結合),並且還有往後的 Bootstrap 框架更新、專案的樣式更新等問題。

0

鐵人賽 24 - 實戰心法 - 自幹 Grid System

自己本身是不常自幹 Grid,但透過自幹會了解更細的運作原理,grid system 和其他元件不太一樣,他是屬於外容器型的元件,一層包覆著一層變化性相當高,如果不熟悉的情況下會容易造成跑版。

0

鐵人賽 25 - 實戰心法 - Sass Map 快出產出大量樣式

上一篇介紹了很短的程式碼產生一整組 Grid System,然後還提供變數讓 Grid 還有額外的參數可以設定,手寫的 CSS 如果要重新計算 12 組以上的計算也太苦了 T_T,這也就是 Sass 的魅力所在。 Sass 的運用上手法非常多,這次來介紹透過簡單的變數,即可大量產生相似的模組。

0

鐵人賽 26 - 實戰心法 - 應避免的 Sass @extend

Sass 的 @extend 可以將相同的樣式整理再一起,在其他語言來說是非常帥氣的技法,但在 CSS 中請警慎使用。 就如同本篇鐵人賽一開始所介紹到的 OOCSS 概念,在撰寫 CSS 時要盡可能符合兩個原則,結構與樣式分離、容器與內容分離,所以到這邊為止還是要貫徹這個概念,當使用 @extend 時如果會造成這個缺陷時,請避免使用。

0

鐵人賽 22 - 實戰心法 - 經常使用,但卻容易被忽視的 CSS

Bootstrap 3 載入以後其實就有包含大部分的元件,原本的設計概念上是希望透過一套框架就能滿足大多的需求,但實際在專案運作時有許多客製化需要微調,而很多微調的項目如下: 左邊一點、右邊一點、間格大一點 文字色彩 背景色 對齊方法 垂直置中方法 CSS 屬性:顯示屬性、背景屬性、Position … 這些雜七雜八的,通常會運用在每個元件上,但每個元件都補上重複性又高,這一個部分我們通常會用另一個元件 _utilities.scss 來管理。

0

VSCode 快速推坑介紹文

用過的 Editor 很多,常常出現新款的 Editor 都會嘗試一下,雖然主流的不一定會喜歡,但多嘗試也不是壞事,這邊稍微列出個人主觀的意見供大家參考參考: Dreamweaver這是早期在使用的 Editor,特色是所見即所得,但這個也成為 Dreamweaver 的致命傷,畢竟做網頁精準的還是瀏覽器上的呈現,過度依賴所見即所得對於學習會有所限制,後來開始精進 CSS 後就不太使用這個工具。

0

鐵人賽 30 - CSS 鐵人賽的結束與接下來的研究

相較於 Javascript 來說,CSS 的演進速度算是非常緩慢的,主要原因當然是瀏覽器的相容性,瀏覽器不太能因為新的特色加入而毀了以前所建置的網站。 在這個相對穩定的程式語言,精通一個的手法就可以活用的相當久,像是 Sass 來說,到目前為止他還是相當流行的前置語言。

0

鐵人賽 29 - CSS 實戰小技巧 - 不使用 important 的高優先值技巧

在維護舊的專案很多必須放下自尊,用一些手段來維持成果的運作,但有些作法如果過於殘暴可能會影響到未來的維護,CSS !important 就是一個很好用的手段,他可以直接將 CSS 的優先值拉到最高,並且超過標籤的 style 屬性樣式,那麼在未來就變成要修正這一段樣式無法再用 style 的方式覆蓋。 這邊介紹一招只需要用 className 就能夠大幅提升優先值的手法,讓想快速結束這回合,但又怕傷了未來萌新的善良人參考。

0

CSS Grid 屬性介紹

CSS gird 在最近 Chrome 更新已經慢慢開始支援 (就是還很久才會完全支援的意思),開始之前還是來介紹一些語法。 與 CSS Flex 一樣,CSS Grid 用兩個部分來看比較快,一個是屬於外部容器的屬性,另一個是屬於內部容器的屬性;從外開始向內看可以加快理解的速度。

0

CSS3 Grid Layout

CSS gird layout 在最近 Chrome 更新已經慢慢開始支援 (就是還很久才會完全支援的意思),這和 Bootstrap 或是 960 Grid 沒有任何關係,而是新的 CSS 語法。

0

Javascript Promise 範例

Promise 現在已經被大部分瀏覽器所支援 (IE 以外),在處理非同步的操作是一大助力,最近在寫 Node.js 也不需要再仰賴其它套件就能夠直接處理非同步問題,以下就提供一個範例來介紹簡單的 Promise 的操作過程。

0

JavaScript ES6 Promise

Promise 一直都是 JavaScript 夢寐以求的功能,非同步的處理如果沒有使用 Promise 經常導致函式或資料無法正常的運作。本篇避開許多深度的詞彙,直接透過範例來瞭解怎麼運行。 簡單的 Promise 範例: 123456789101112131415161718192021222324// 宣告 promise 建構式let newPromise = new Promise((r

0

圖解:CSS Flex 屬性一點也不難

前幾篇有介紹過 CSS Grid Layout 的使用方法,當我們學習排版類型的 CSS 時,最好的方式是先作分類,以 Flex 與 Grid Layout 來說都有共同的特徵,就是他們有分為外容器屬性與內元件屬性。

0

從設計轉職工程師的原因及過程

跟很多人說過過去是 “設計師” 而現在轉職成前端工程師,這個轉換過程有兩個問題很多人長問到: 為什麼會想做工程師 設計師是怎麼轉成工程師的 先前都會一一的回答,但相關的故事其實挺多的,所以整理成一篇給大家參考囉。