week - 2016-05-22 ~ 2016-05-28

Rplus commented 8 years ago

收集：06-02 票選：06-02 ~ 06-04

Rplus commented 8 years ago

power#	likes	comments	shares
# 1	248	7	49

fb permalink @ 2016-05-24T09:51:18+0000
who: Arthur Liao
intro:

這是我兩星期前寫的一篇文章，跟大家分享。

說真的，我覺得 front-end code 要寫得好，比 backend code 更困難。語言的異質性（JavaScript、CSS、HTML、server 端的語言...）加上有很多層 layer，一不小心就變成 spaghetti code 了。

: 程式員求生指南：關於寫程式的二三事我是一個熱愛寫程式的傢伙。我的第一台電腦，是13歲時買的Apple II，在那之前，我已經開始到同學家用「小教授二號」學寫程式了。高中時我當電腦社社長...

Rplus commented 8 years ago

power#	likes	comments	shares
# 2	239	25	11

fb permalink @ 2016-05-24T18:43:15+0000
who: Arthur Liao
intro:

以下回應比較長，所以我重新貼一段文。

前端的code不會比較難寫，但是經常比後端的code難維護。我舉一個幾年前在Yahoo工作時碰到的維護CSS的例子。當時Yahoo網站的前端程式架構，為了讓各個國家及property（property指的是新聞、運動、娛樂等不同網站）可以有自己的版面風格，所以各國家及property都可以有自己的CSS overwrite，這些CSS overwrite再按照一定的順序載入。你知道CSS長到幾千行的時候，就會變得很難讀懂，而不同國家及property的工程師為了達成PM/designer的要求，有時會為達目的不擇手段，所以經常可以看到「!important」出現在CSS原始碼裡，因為第一次用「!important」的人可以不用管整團CSS是怎麼攪和在一起的。如果你是在下游，用這種X招是可以work，但在中上游的人就慘了。我發現只要我動一下CSS，下游property的網頁就壞了，要改就必須把那一堆「!important」和各種奇奇怪怪的CSS overwrite rule都理順修好。有些我勉強改完了，有些實在沒辦法，只能跟PM和designer說抱歉。

前端開發是個叢林世界，光是一個CSS的coding style就很難統一，何況還有前端的各種不同framework、design pattern（或no pattern）及開發風格。不同的工程師有不同做法，簡直是八仙過海，各顯神通。我覺得前端的code要寫到可讀、易維護，比起後端更難。前端的工程師們，大家辛苦了！（此時腦海浮現「啊，福氣啦！」及周潤發廣告的畫面）

Rplus commented 8 years ago

power#	likes	comments	shares
# 3	157	8	14

fb permalink @ 2016-05-26T09:22:35+0000
who: Arthur Liao
intro:

大家好，我在7月會開一門「JavaScript程式設計進階」課程，講授JavaScript的進階技巧。我只開自己有把握的課，相信不會讓來上課的人失望！以下是課程大綱：

- JavaScript caveats (var scope/hoisting, closure, this, strict mode, ===/!==, etc.)
- Functional programming in JavaScript
- Object-oriented programming in JavaScript (ES6)
- Promises
- Generators (ES6)
- Important ES6 features (const/let, string interpolation, module import/export, etc.)
- Server-side JavaScript: Node.js
- JavaScript development: npm, unit test, Babel, ESLint, Flow
（本課程包含許多程式實作及演練，學員可自行攜帶Windows或Mac筆記電腦，亦可使用電腦教室提供的Windows電腦）

#f2etw 社團團友專屬優惠折扣碼：67GP3Q
說明：
1. 請於報名表「備註」欄註明此優惠折扣碼，可折抵報名費用1000元。
2. 此優惠折扣碼限單獨使用，不得與其它折扣、優惠並用。
3. 此優惠折扣碼僅適用於2016年7月課程，其它課程無效。

: [ACW 2016-07] JavaScript程式設計進階課程名稱：JavaScript程式設計進階 / 適合對象：具備基礎至中等JavaScript能力，欲學習進階JavaScript技巧的開發人員（本課程不適合JavaScript初學者）...

Rplus commented 8 years ago

power#	likes	comments	shares
# 4	122	1	8

fb permalink @ 2016-05-22T08:01:19+0000
who: 莊景隆
intro:

忘了多久之前有人分享這本書似乎是已經開發一段時間的設計師可以參考的書籍，因為買其他書的時候剛好有看到特價，到6/1 前79折後還可以再88折，分享給各位。

: 忍者：JavaScript開發技巧探秘忍者：JavaScript開發技巧探秘 - JAVA, John Resig、Bear Bibeault, 9789864340767

Rplus commented 8 years ago

power#	likes	comments	shares
# 5	51	20	14

fb permalink @ 2016-05-24T06:34:26+0000
who: Rplus Chen
intro:

你是不是也常在 CSS 除錯中搞得一頭霧水呢？
作者 Ben Frain 在文章中分享了他除錯的各個階段以及過程中的思路

* Evaluation & quick fixes
* Reduction & replication
* Cause & fix

這三個主要步驟中
第一項主要看的是經驗
第二項「replication」必須學著自己先將問題範圍縮小，
尤其適合應用在提問技巧上

話說… 大家平時都怎麼 debug 的呢？

Debugging CSS
by Ben Frain 2016-05-17
https://benfrain.com/debugging-css/
#f2etw

: Debugging CSS – Ben Frain Debugging CSS Published: May 17, 2016(Last updated: May 21, 2016) 2 comments 0Days 0 days since this post was last revised. All content should be accurate. I’ve done a lot of CSS debugging. Others code and my own. Mobile platforms and standard desktop browsers. Everything from old versions of Intern...

Rplus commented 8 years ago

power#	likes	comments	shares
# 6	68	0	6

fb permalink @ 2016-05-28T16:05:25+0000
who: Yang Li-Yi
intro:

幫分享

javascript 談論它、使用它的人多，但真正了解它的人少
長年待在英國的開發者兼 BLOC.io 前端課程 mentor - Jeff Lau 
希望針對這個議題來與業界朋友們相互交流認識
特別找來：ALPHA Camp、台灣大學資訊系統訓練班、飛肯.... 等(持續增加中)，有在教授該主題之業界大大
藉由導師的交流與分享，更進一步知道 javascript 的趨勢與現況
時間為：6/4 下午14:00 
名額有限，有興趣參加的朋友，請趁早報名！
https://dojo.alphacamp.co/events/front-end-meeting

個人和 Jeff 聊過幾次，從平面設計師轉為前端開發者，他除了熟悉 ReactJS、AngularJS 等框架，最近也在嘗試 React Native，是個喜歡鑽研技術也樂於分享的人，有興趣開始深入接觸 Javascript 或想分享交流的業界朋友，都歡迎參加！

: 新創產業導師聚會 | ALPHA Camp

Rplus commented 8 years ago

power#	likes	comments	shares
# 7	43	8	0

fb permalink @ 2016-05-26T10:48:07+0000
who: 吳逸文
intro:

推薦大家一個... 無限期支持 IE8 的反諷角色扮演粉絲頁 XD
https://www.facebook.com/ie8forever/

: 無限期支持 IE8 台灣政府機關、懷舊企業主最愛瀏覽器。

Rplus commented 8 years ago

power#	likes	comments	shares
# 8	42	1	0

fb permalink @ 2016-05-25T06:26:42+0000
who: 林佑安

燒燙燙深入精神時光屋報導 XD
https://medium.com/@c9s/%E5%B0%8F%E7%B7%A8%E5%B9%AB%E4%BD%A0%E8%B8%A9%E5%9C%B0%E9%9B%B7%E7%B3%BB%E5%88%97-typescript-%E9%81%A9%E5%90%88%E6%88%91%E5%97%8E-e15b5a0607d7

小編幫你踩地雷系列: TypeScript 適合我嗎

Rplus commented 8 years ago

power#	likes	comments	shares
# 9	4	19	1

fb permalink @ 2016-05-26T09:32:58+0000
who: 吳智楷
intro:

http://s.codepen.io/flymaple/debug/rLBJrR

打擾了，想問一下在手機 Chrome 上檢視時，按鈕沒辦法垂直置中，但是 chrome dev tools 模擬是有置中的，使用的方法是 :before + inline-block + middle，請問各位是用什麼方式處理垂直置中呢??

參考的 UI Design: https://dribbble.com/shots/2626003-Daily-Ui-004-Calculator

: CodePen - Daily UI #004 - Calculator

Rplus commented 8 years ago

power#	likes	comments	shares
# 10	9	17	0

fb permalink @ 2016-05-24T06:52:48+0000
who: Chander Shiu
intro:

img 的 object-fit 不支援 IE
所以可用 background-size 達到這效果(支持 IE 9+)
這小小的 function 可以處理動態要出圖片時有像 object-fit 的效果, 純 js

: tedshd/img_object_fit img_object_fit - Use background size handle img object-fit to support IE9+

Rplus commented 8 years ago

power#	likes	comments	shares
# 11	30	0	0

fb permalink @ 2016-05-26T12:38:31+0000
who: Kaiching Chang
intro:

新書上架 Google Play ，有關 CSS 的基礎教學，最後有 CSS 3 動畫的簡單範例。

My Chinese new e-book is on Google Play now. Please visit the following link to see the detail.

Rplus commented 8 years ago

power#	likes	comments	shares
# 12	21	2	0

fb permalink @ 2016-05-24T14:35:08+0000
who: 林佑安

TypeScript + #Webpack + #Babel ...

https://github.com/c9s/ts-webpack

克隆下來就可以直接用了.. 好了明天要換話題了 XD

電台友收割系列 #退出前線報導

Rplus commented 8 years ago

power#	likes	comments	shares
# 13	13	2	4

fb permalink @ 2016-05-26T11:20:24+0000
who: Rplus Chen
intro:

Addy Osmani 在上週 Google I/O 裡分享 Progressive Web Apps 的議程錄影
裡頭有提到一些使用 service worker 的技術
讓部份資源可以有更易管理的 cache
在某些情況也能完成部份的 offline mode 需求
對於在製作快速反應的 web app 是蠻值得嘗試的方案

Progressive Web Apps across all frameworks - Google I/O 2016
by Addy Osmani
https://www.youtube.com/watch?v=srdKq0DckXQ
#f2etw

: Progressive Web Apps across all frameworks - Google I/O 2016 Addy Osmani on Progressive Web Apps across all frameworks. Progressive Web Apps can be built using any JavaScript library or framework, whether it's React, A...

Rplus commented 8 years ago

power#	likes	comments	shares
# 14	16	0	3

fb permalink @ 2016-05-22T11:37:48+0000
who: Amobiz Chen
intro:

http://martinfowler.com/articles/refactoring-video-store-js/

: Refactoring a javascript video store Implementing my 1999 video store refactoring example in Javascript, with four different ways to compose the small functions.

Rplus commented 8 years ago

power#	likes	comments	shares
# 15	2	7	0

fb permalink @ 2016-05-22T01:21:00+0000
who: Jimmy Chang
intro:

想請問一下，CodePen上有沒有什麼方法搜尋到很多follower的作者呢?
 找了一下在介面上似乎沒看到這個功能

目前瀏覽方式
如果沒有特定需求
都是從首頁的Picked Pens隨意瀏覽

想找一些被許多人loved, forked or followed的好像就比較隨機
(或是它的設計就是希望能讓每個作品
都有更平均的機會被瀏覽到XD)

Rplus commented 8 years ago

power#	likes	comments	shares
# 16	12	0	0

fb permalink @ 2016-05-23T22:49:52+0000
who: Jane S.
intro:

2016年AngelHack 終於要在台北舉辦囉！
這次我們不但找到Women Who Code的CEO Alaina Percival 到現場擔任開幕嘉賓及評審，國際知名的dating app-Coffee Meets Bagel也會贊助賽後的Happy Hour. 

帶著你的駭客DNA 6月11-12日，跟一群有創意、熱血、瘋狂、愛挑戰的開發者、設計師、創業家參加全球性的駭客松！ 一起駭點子，駭團隊，駭態度，駭瘋狂的24小時馬拉松式把想法變真實，在台北把你的點子在24小時內跨領域的討論、嘗試、調整、精進、發表出來！

最後替自己贏得代表台灣的機會，讓IDEA駭到世界去！

無論你/妳是哪個領域，趕快報名，一起參與這場駭客盛宴！

在現場，我們會根據每個人的角色組隊，讓你擁有跨界的資源，互相激盪與討論想法。
之後每個團隊需要一起完成雛形，將想法利用程式 (無限制任何形式)呈現。最後站上舞台，與所有人分享。
我們也將在AngelHack台北場選出一個團隊，代表台灣與其他城市至美國舊金山接受全球Demo Day!

————
AngelHack是目前全球最大的黑客松非營利組織。今年在六十個城市舉辦，各城市的第一名可以進入他們12周的加速計劃(Hackaccelerator)，與其他城市在計畫結束前遴選15隊到舊金山接受訓練參加全球Demo Day與天使投資人，創投公司見面募資。除此之外也有很多其他的獎項，一般報名及詳細內容請洽官網 (內容更新中) http://angelhack.com/angelhack-taipei-2016/

Girls in Tech members can join the hackathon for FREE!
Girls in Tech 與 AngelHack因為在四月底成為全球夥伴，Girls in Tech的會員 (女生限定)，可以免費入場 (現省參賽費每人$325)。

請在以下網址註冊加入活動，我們會在活動開始前寄發確認信讓妳免費入場。http://www.wetogether.co/#/activity/1463017500956

Facebook event page:
https://m.facebook.com/events/800646443400149?acontext=%7B%22ref%22%3A5%2C%22action_history%22%3A%22[%7B%5C%22surface%5C%22%3A%5C%22page%5C%22%2C%5C%22mechanism%5C%22%3A%5C%22main_list%5C%22%2C%5C%22extra_data%5C%22%3A[]%7D]%22%7D&aref=5

: AngelHack Taipei 2016 AngelHack is coming to Taipei!

AngelHack is the world's largest developer ecosystem, spanning over 60+ cities running hackathons and connecting communities of over 90,000+ developers & hackers. This year, we are bringing it to Taipei with supports from our sponsors- @[730189497078671:274:Taiwan Startup Stadium 台灣新創競技場]; @[1652919208291234:274:三創育成 - 新星火箭 Star Rocket]; @[760549017302070:274:Grycan Taiwan] and @[189485787800916:274:Coffee Meets Bagel]

The Grand Prize is an exclusive invite to AngelHack's HACKcelerator- A 12-week Curriculum to turn your hackathon idea into a startup reality A diverse network of both local and global mentors Weekly guest speakers A chance to fly to Silicon Valley for our Annual Global Demo Day and participate in a week of extensive pitch training!

Register Now: http://angelhack.com/angelhack-taipei-2016/

AngelHack是目前全球最大的黑客松非營利組織。今年在六十個城市舉辦，各城市的第一名可以進入他們12周的加速計畫（Hackaccelerator)，與其他城市在計畫結束前遴選15隊到舊金山接受訓練參加全球Demo Day與天使投資人，創投公司見面募資。除此之外也有很多其他的獎項，詳細內容請洽官網（內容不斷更新中）http://angelhack.com/angelhack-taipei-2016/

Girls in Tech members can join the hackathon for FREE! Girls in Tech 與 AngelHack因為在四月底成為全球夥伴，Girls in Tech的會員（女生限定），可以免費入場（現省比賽參加費每人$325)。請在以下網址註冊加入活動，我們會在活動開始前寄發確認信讓妳免費入場。http://www.wetogether.co/#/activity/1463017500956

Register for your Free Pass: http://www.wetogether.co/#/activity/1463017500956 This is a registration link for Girls in Tech members to get free pass to attend AngelHack Taipei 2016. Once you are registered/joined, we'll send out an invitation email a few days before the hackathon.

If you have any questions, please contact taiwanchapter@girlsintech.org

Rplus commented 8 years ago

power#	likes	comments	shares
# 17	12	0	0

fb permalink @ 2016-05-23T02:40:05+0000
who: 王宥傑
intro:

由台灣joomla名師 Aj Lin 在騰訊總部進行演講 ，請各位前端人多多支持

: 国际开源社区带着世界来见你-Joomla Day China 2016 "IT,互联网,分享会,交流,社交"活动"国际开源社区带着世界来见你-Joomla Day China 2016"开始结束时间、地址、活动地图、票价、票务说明、报名参加、主办方、照片、讨论、活动海报等

Rplus commented 8 years ago

power#	likes	comments	shares
# 18	9	0	1

fb permalink @ 2016-05-26T04:37:32+0000
who: YuTin Liu
intro:

A robot have 160 followers, this is a fun human-computer interaction, and it is so cute.

: facebook-github-bot (Facebook Community Bot) Follow facebook-github-bot on GitHub and watch them build beautiful projects.

Rplus commented 8 years ago

power#	likes	comments	shares
# 19	0	5	0

fb permalink @ 2016-05-27T08:28:33+0000
who: Chino Lin
intro:

遇到一個問題 不知道有沒有人遇過
RWD要搬移位置使用append及detach處理
$(".aaa").append($(".bbb").detach());
但是搬過去的資料裡面的有表單 
在android手機測試時
點輸入框input後馬上又離焦跳開(虛擬鍵盤立即消失)
變成無法輸入的情況
select下拉選單倒是正常

Rplus commented 8 years ago

power#	likes	comments	shares
# 20	0	5	0

fb permalink @ 2016-05-27T01:58:37+0000
who: Healworld Wang
intro:

大家好，小弟最近被這問題困擾好幾天都想不出解法，想請教各位大大~
是這樣的，我想要串FB的信用卡付費，於是透過FB的https://developers.facebook.com/docs/games_payments/takingpayments這份文件串接，但每次我執行時總是出現應用程式無回應，錯誤代碼1383008的訊息，不過當我修改FBui.({ method: 'pay',  action: 'purchaseitem', product: 'url'})中product的網址(B產品的meta)卻可以順利執行，就算我的meta data改的跟B產品一樣也都沒有用，一旦用我的網址就會出現上面的失敗訊息，已確定我的網址是可以正常顯現的，且所有meta都跟B產品一樣，不知道各位覺得這可能會是甚麼原因呢?

: Page Not Found - Facebook for Developers

f2etw / weekly-collection

week - 2016-05-22 ~ 2016-05-28 #66

TypeScript + #Webpack + #Babel ...

電台友收割系列 #退出前線報導