week - 2016-09-11 ~ 2016-09-17

[Rplus]

收集：09-23
票選：09-23 ~ 09-25

week-26

[Rplus]

power#	likes	comments	shares
# 1	250	42	12

• fb permalink @ 2016-09-15T05:43:53+0000
• who: 林罡北
  
• intro:

中秋節到了~~
身為一個前端開發者
用css畫一隻兔子在月亮上搗藥
其實也是非常正常的一件事情啦

看過的人有什麼想法歡迎給我Feedback喔:-)
https://github.com/NorthBei/MoonFestival/tree/gh-pages

做完這隻兔子我覺得我學到如何妥善運用boder-radius了哈哈哈

: 玉兔搗藥 - Jade Rabbit pounding medicine
中秋節就是要賞月阿 不然要幹嘛???

[Rplus]

power#	likes	comments	shares
# 2	316	2	0

• fb permalink @ 2016-09-11T14:00:43+0000
• who: 張凱迪
  
• intro:

F2E.TW 的朋友大家好！

最近利用零碎時間整理了一本完整介紹 React 生態系正體中文入門書《從零開始學 ReactJS》，希望對於想入門 React 的朋友會有幫助～：）

🌱  完整介紹 ReactJS 生態系（Flux, Redux, React Router, ImmutableJS, Isomorphic JavaScript, Webpack, Babel, React Native、React 測試、GraphQL/Relay 等），讓你見樹又見林，學習現代化網頁開發方法

🌱  範例皆使用 ES6+（ES2015+），讓你學習最新 JavaScript 語法，成為更好的 Web 開發者，未來也將不定期更新內容和範例程式

🌱  閱讀完後將對於 React 生態系有系統性的認識，擁有自學能力，更可以使用 React + React Router + Redux + ImmutableJS + NodeJS（Isomorphic JavaScript）開發具備會員登入和分享食譜功能的食譜分享網站

https://github.com/kdchang/reactjs101

初稿和範例程式碼秉持著取之於社群回饋於社群的想法先放在 Github ，之後會陸續整理成更好閱讀和學習的方式（因為我的 Gitbook 編輯器有點難用...），也希望之後能轉成紙本方式出版。若是你覺得對你有幫助歡迎給顆 star，也歡迎分享給有需要的朋友。我也還在努力學習中，若有任何問題都歡迎跟我說或是發 issue，當然 PR is welcome :)

也歡迎大家投稿到我們的 TechBridge 技術共筆部落格，我們會努力提供更多優質的正體中文技術內容：） 
http://blog.techbridge.cc/

[Rplus]

power#	likes	comments	shares
# 3	168	7	17

• fb permalink @ 2016-09-17T14:08:51+0000
• who: Wu Che Yu
  
• intro:

[漫畫跟動態網點效果]

前幾天看到漸層的特殊使用方法，就拿來延伸了
把背景圖指定成漸層(linear-gradient)之後，
漸層開始/結束位置給一樣%數就會變色塊
將尺寸縮到小小的(5px之類的)

讓他們在背景自動重複，就會像拼馬賽克磁磚一樣，
可以排列成不同尺寸、形式的網點超好玩XD
而且可以使用background-position移動，製造不間斷的效果
練習的檔案:
http://codepen.io/frank890417/pen/jrAKbO?editors=0100

: i.giphy.com

[Rplus]

power#	likes	comments	shares
# 4	161	14	14

• fb permalink @ 2016-09-12T13:37:49+0000
• who: 林立秦
  
• intro:

嗨大家好，這幾天颱風來了在家沒事做嗎？
最近三天看了有關 google progressive web app 
相關的文章，搭配了今天準備要來的颱風
做出了下面這個 web app:
http://quote-b781f.firebaseapp.com/

如果在手機上看了想知道我的一些心得歡迎看看
https://lichin.me/blog/2016/09/12/mrtyphoon-progressive-web-app
--
這次的網頁 如果加入到手機主畫面
就會很神奇的變成一個 mobile app了！！
還支援離線顯示！！

--
好奇的話可以到 github 上看整個 parser、 Firebase、web app 的 code
https://github.com/lichin-lin/typhoonPWA
要是覺得專案不錯 也歡迎給我star⭐️⭐️⭐️

--
注意 這個只是網頁練習
真正的颱風動向需要多方考證新聞、媒體。

[Rplus]

power#	likes	comments	shares
# 5	137	3	24

• fb permalink @ 2016-09-15T15:36:57+0000
• who: Daniel Tseng
  
• intro:

Babel 擁有許多相關的套件，
個人在接觸初期常常不懂這些名詞，
因此整理了常見的 babel 套件，
在此分享能多少幫助一些開發者～

: babel 相關名詞簡介
babel 是現代前端工程師都不陌生的工具，它可以將 ES6(+) 的語法轉換為 ES5 甚至是更低的版本，利用 babel 可以讓開發者即刻享受到 ES6 語法所帶來的便利性。然而許多 babel 相關的名詞卻常常困擾想要入門的新手們，因此利用這篇文章簡介那些與 babel 相關的名詞，以 babel 6 為主。 本篇將會會介紹到： .babelrc babel-cli (with babe

[Rplus]

power#	likes	comments	shares
# 6	90	8	22

• fb permalink @ 2016-09-13T06:40:14+0000
• who: James Liang
  
• intro:

秒懂 Canvas, Flash 掰掰

: [主角日常] 1小時學會 Canvas 精要，看完影片我可以做出很屌的東西了 ～ 1&/6
Canvas 超簡單，主角日常超佛心乾貨等你拿。看懂影片需要 html, css, javascript, jQuery 的基本技能喔～

[Rplus]

power#	likes	comments	shares
# 7	78	28	10

• fb permalink @ 2016-09-17T13:27:43+0000
• who: 陳怡安
  
• intro:

【圓弧進度條效果】

(學習前端幾個月的新手，請大家鞭小力點)

使用CSS做出圓形進度條的效果。
網路上找不到只用CSS作出的圓條，所以花2小時研究作法

【CODEPEN】http://codepen.io/ianchen0419/pen/JRKbPy
【教學網誌】https://ianchen.thisistap.com/percentage-circle/

: percentage-circle
...

[Rplus]

power#	likes	comments	shares
# 8	92	0	19

• fb permalink @ 2016-09-15T00:04:18+0000
• who: Rplus Chen
  
• intro:

這是上週五在活動裡用的舊簡報
主要是分享 CSS 3D animation 的切割方式
步驟標題的藍色數字是 jsbin 的連結
有需要對照看 code 的可以瞧瞧

CSS ANIMATION 入門

: CSS ANIMATION 入門 - HackMD

[Rplus]

power#	likes	comments	shares
# 9	3	49	0

• fb permalink @ 2016-09-13T09:58:04+0000
• who: Mimi Fish
  
• intro:

各位前輩好，想請教一個問題：

http://www.taipeibiennial.org/2016/#Presentation

以上是小妹做的網站，不過遇到一個很障礙的情況，就是設定跟版本完全相同，但是不同電腦的Chrome，有些電腦看見的中文字體，卻是細明體，有些是正常的思源體。

chrome版本、chrome設定中的所有內容，都對照過了，完全一模一樣....

本來想說，該不會是因為windows版本，不過測試後也不是，網路找了好久，也沒查到相關文章，有點不知道該怎麼辦了，所以前來請教各位前輩。

（網站做得很倉促，所以還有一些問題未調整完，不好的地方麻煩就先當沒看見吧...囧）

: 2016台北雙年展 TAIPEI BIENNIAL
「台北雙年展」藉由國際性的展覽平台積極地從深度、廣度兩方面回應當代藝術之趨勢與潮流，創造雙向溝通的對話機制。 Taipei Biennial has introduced new artistic ideas from around the world that act as a driver of dialogue between Taiwan and other cultures, becoming a primary symbol of Taiwan's contemporary art development and international artistic exchange.

[Rplus]

power#	likes	comments	shares
# 10	50	13	3

• fb permalink @ 2016-09-13T07:57:22+0000
• who: Chris Chang
  
• intro:

好像壞掉了
抓不到資料 檢查中
16:50 修好了XD (吧?)

因為有點懶(X)所以弄了這東西
天然災害停止上班地圖
第一個無用的作品
http://mis.cat/typhoon/

基本上紅色就是放假
藍色就是上班
顏色深的就是明天的狀況
顏色淺就是今天的狀況

資料從人事行政總處每5分鐘更新一次
台灣地區行政圖是參考「視覺化實戰 － D3.js 地理區塊視覺化」這篇
http://blog.infographics.tw/2015/04/visualize-geographics-with-d3js/

補充個抓資料的部分
主要就是用phpquery去抓資料啦
原本的
table:last-child
改成
table:not(:first-child)
就好了.....根本見鬼....

: 天然災害停止上班地圖

[Rplus]

power#	likes	comments	shares
# 11	4	44	0

• fb permalink @ 2016-09-13T01:23:29+0000
• who: Kannie Chen
  
• intro:

var email = $("#txtEmail").val();
    if (email !== null || email !== "undefined" || email !== '') {
        alert(email);
    }
小弟覺得很納悶  為什麼  這個判斷式  【他空值】還是會跑來alert  有什麼好的寫法嗎???

[Rplus]

power#	likes	comments	shares
# 12	36	3	5

• fb permalink @ 2016-09-14T06:58:57+0000
• who: 馬志瑋
  
• intro:

hello，大家
九月的設計活動來囉，這次是再9/29 (四)
今晚12點開放報名~

: F2E&RGBA 設計 Meetup 九月號
主題：F2E&RGBA 設計 Meetup 九月號 人數：25人 地點：台北市信義區松山路132號3樓 日期：9/29(四) PM 7:00 =============================

[Rplus]

power#	likes	comments	shares
# 13	32	0	9

• fb permalink @ 2016-09-12T18:37:01+0000
• who: James Liang
  
• intro:

恭喜前端工程師多加一個技能，學會桌面應用程式開發只差一步
應觀眾寫信要求多做了 windows 版教學，
https://www.youtube.com/watch?v=8zNeaqDAAL4 (win版)
https://www.youtube.com/watch?v=CR10JLnVEd0 (mac版)
任何問題可在 Youtube 下方留言

: [主角日常 網頁開發變成桌面程式開發只差一步你不知道的 nw.js](https://www.youtube.com/watch?v=8zNeaqDAAL4)
前端網頁開發人員真是爽到無極限， nw.js 提供網頁開發變成桌面應用程式開發的捷徑，真是太方便了。趁這個機會大家也可以把 Node.js 學一學杯 ～ 突然覺得自己什麼都能辦到大家是不是這樣想呢？以前最愛的 FLASH 可以 Say Good Bye 了 !!! mac 版本教學請看 https://youtu...

[Rplus]

power#	likes	comments	shares
# 14	26	0	4

• fb permalink @ 2016-09-14T08:40:42+0000
• who: Ivy Kuo
  
• intro:

[工商服務] 嗨~ 我們目前部門正在招募
網站前端工程師 / Front-End Developer 
職缺細節請參考連結，歡迎有興趣的朋友一起加入我們囉~
有任何問題，也可以丟訊息給我。

** 年薪約70~120萬 (公司依個人能力、學經歷不同)，其他福利待遇也請參考以下連結囉~
謝謝~

: RD2090 網站前端工程師 Front-End Developer, F2E (數位行銷)_華碩電腦股份有限公司 - 104人力銀行
1.網站前端建置、改版及維護 2.將PSD轉換成前端頁面製作，與動態效果呈現 3.與後端API串接擬定規範及細項 4.協助修正網頁語法、版面問題 5.網站功能及樣式的規範化及模組化 6.優化網站前端架構，在體驗、流量、維護面間取得平衡 7.優化手機版效能及體驗 8.評估並運用新技術，優化工作流程或開發模式，確保程式品質、執行效率及可維護性 9.規範類文件擬定

[Rplus]

power#	likes	comments	shares
# 15	24	0	4

• fb permalink @ 2016-09-14T13:07:01+0000
• who: James Liang
  
• intro:

發佈 HTML Mobile APP for iOS & android 的簡單操作新選擇

: [主角日常] 超簡單發佈 iOS 與 android HTML 手機網頁 APP 方法
主角日常精心為你挑選最簡單的手機網頁 App 開發方式，免費的開發軟體選擇，簡易的介面操作介紹，不懂 xcode, android studio 也沒關係，希望你會喜歡～

[Rplus]

power#	likes	comments	shares
# 16	3	18	0

• fb permalink @ 2016-09-16T04:18:46+0000
• who: Ryan Tseng
  
• intro:

各位前輩好，目前手邊的專案遇到一個問題
.
想請教各位有什麼關鍵字或是解法可以提示給小弟
.
===
目前手邊有個網站，登入的區塊是滑鼠移動到一個區塊內
登入選單會自動跳出來，當然在一般的情況底下
使用起來沒有什麼問題，只是現在瀏覽器都會自動記錄輸入過的帳號，當他們在選擇帳號的時候，這個登入選單就會收折回去
看起來的原因就是因為瀏覽器自動記錄帳號的這個選單沒有被辨識為登入區塊的一部分，所以滑鼠指到選帳號的選單之後就馬上收折回去了
===

想請教一下大家有沒有解決的方法呢
或是..乾脆不讓那個選單跳出來(關閉自動完成)
又或是，選單改成用點選的才會出現

附圖是依照專案內的html結構和jQuery的寫法節錄出來的說明
.
.
在此先感謝大家!!!

[Rplus]

power#	likes	comments	shares
# 17	25	0	0

• fb permalink @ 2016-09-17T13:19:40+0000
• who: 林立秦
  
• intro:

大家好～～惱人的颱風已經要離開了
希望大家都可以度過一個平安的中秋
---

https://lichin.me/blog/2016/09/17/mrtyphoon-progressive-web-app
繼上篇的Mr.typhoon 小小PWA心得(上篇)之後
我又發了一篇小小設計心得(下篇)
---

主要是在學習 Progressive Web App 同時
看到了兩篇 UI/UX 的學習文章
https://medium.com/@zonble/翻譯-如何修正壞-ui-2f972da15d5b#.o7um9ls42
http://blog.akanelee.me/posts/384307-sixth-state-of-the-page-maximum-state/

試著在製作 Web App 時加入良好的UI
對於使用上有困擾的話歡迎討論
希望大家的建議也可以變成
日後我設計時考量的要點
---

最後也付上 Behance 上面的作品
望各路設計大大提點: 
https://www.behance.net/gallery/42925577/Mrtyphoon

[Rplus]

power#	likes	comments	shares
# 18	17	0	3

• fb permalink @ 2016-09-17T15:26:54+0000
• who: Wang Ba
  
• intro:

Hacker News 上正在吵 Google 的 HTML Style Guide 裡建議省略不必要的標籤這一項
https://google.github.io/styleguide/htmlcssguide.xml?showone=Optional_Tags#Optional_Tags

Hacker News: 
https://news.ycombinator.com/item?id=12520674

: google.github.io
Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document.

[Rplus]

power#	likes	comments	shares
# 19	20	0	0

• fb permalink @ 2016-09-13T02:15:47+0000
• who: Ching Yi Chan
  
• intro:

各位前端大神們早安，今年在 JCConf 有個 Ionic 2 介紹的場次呦。對於 Mobile Web App 主題有興趣的朋友快來捧場一下 :D

#JCConf #TypeScript #Angular2 #Ionic2

講者 Jiayun 是資深的 Java 開發者，目前主要從事 backend server 端 Java 程式開發工作。

Ionic 是知名的 Mobile Web Framework，目前開發團隊正在為全新的 Ionic 2 正式發佈準備中，今年初時，它還在 Alpha 版本，在 8 月初時，已進入了 beta 11。Ionic 2 重新規劃了專案的組織架構，並採用 Angular 2.0 為主要的前端 Framework，並加入 TypeScript 的整合，讓開發者可以透過 TypeScript 撰寫較易維護的邏輯。

在《Ionic 2》的場次，Jiayun 將介紹以 Ionic 2, TypeScript 和 Angular 2 開發跨平台 Mobile App。

#Ionic2 #MobileWeb #Angular2 #TypeScript

http://jcconf.tw/2016/speaker/jiayun.html

[Rplus]

power#	likes	comments	shares
# 20	17	0	1

• fb permalink @ 2016-09-16T04:40:51+0000
• who: Kyle Shen
  
• intro:

各位中秋佳節愉快，9/24(六) 我們在台中逢甲大學有兩場前端課程，分別是Vue.js及Codeception.js，歡迎來交流交流 :)

台中前端一直是很熱門項目，九月份我們請Kuro及Caesar 兩位大神為我們分享Vue.js 及Codeception.js測試工具!

http://study4-tw.kktix.cc/events/sep-2016-taichung-13145b