search

f2etw / weekly-collection

weekly collection of fb.com/groups/f2etw
http://f2etw.github.io/weekly-collection/
MIT License
46 stars 8 forks source link

week - 2016-07-31 ~ 2016-08-06 #100

Closed Rplus closed 8 years ago

Rplus commented 8 years ago

收集：08-11 票選：08-?? ~ 08-??

Rplus commented 8 years ago
power# likes comments shares
# 1 352 47 78 
手法很簡單，開 developer tools 應該都看得出來，創意滿分!!!

: 全聯中元祭 你看見了嗎？ 農曆7月，有一群朋友需要幫助，按下RIP鍵，你也能看得見。

Rplus commented 8 years ago
power# likes comments shares
# 2 325 6 61 
真不好意思，其實我今天是來做課程宣傳的 (欸

: 前端框架大亂鬥之我為什麼選擇 Vue.js F2E.tw 201608 @ Mozilla Taiwan

Rplus commented 8 years ago
power# likes comments shares
# 3 259 16 48 
Hi 大家
來拋磚引玉地分享一下前端工程師找工作的心得，
不過可能不會根據公司和職缺一個一個來，
主要想分享一下整個「找工作的流程」和「想法」，
中間也會穿插一下對於徵才者的一些看法。
（根據自己一點點面試和被面試的經驗。）
希望讓求職或徵才的人，
都能更了解要怎麽對待或成為前端工程師 XD

: [心得] 前端找工作之道 Hi 大家， 關於找工作或職涯發展的東西我都是看這個版，

Rplus commented 8 years ago
power# likes comments shares
# 4 171 12 44 
各位碰到資料量很大、格式可能很醜、資料長度又很難預估的 Data Table 會怎麼處理呢？
.
我自己的經驗不多，頂多就是用 Foo Table 這種套件套一套，不過真的在做產品，尤其是統計報表、電商系統後台、ERP 等時，隨便用一用往往會造成用戶往後很多不便。
.
電商系統 Shopify 的 UX Team 在 Medium 上分享了一篇如何處理 Data Table 的 Mobile Friendly 文章，他們採取的做法是「把最左邊那欄凍結，其他欄則可以往凍結的那欄方向滑動，視覺效果類似滑進底端」，然而視覺上完成了但卻有很多針對閱讀器的使用者可能不便，進而延伸的改進細節，重點節錄如下：
.
第一課：不要太過於依賴 Prototype

有時候很快就能在 codepen 上做好一個 prototype，但由於並非 semantic 所以在 VoiceOver 上幾乎完全失效，而且為了要能夠滑動所以只能把 cell 包在 column 內，這導致無法透過鍵盤方向鍵在 cell 之間移動。
.
第二課：不要小看 CSS 對螢幕閱讀器的影響

針對凍結欄的 CSS，採用 WebAIM 建議的 Position Content Off-screen 讓內容在視覺上隱藏但仍能夠被 VoiceOver 念出。
.
第三課：注意細節

VoiceOver 無法唸出 hyphen 連結號，所以所有採用連結號的負數數字對 VoiceOver 是無效的，最後解法是把連結後通通改成 Unicode 的 Minus Sign (U+2212)。
.
第四課：重視 HTML 語意結構

要讓網頁能夠支援 Screen Reader 或 VoiceOver 這種無障礙的作法，最好就是堅持採用 HTML 語意結構。

在本專案中，最後發現的最佳解竟然是把兩個 Table 用 position: absolute 疊在一起。上面的表格只顯示被凍結的最左欄，並且使用 aria-hidden: true 的屬性讓 Screen Reader 不會讀到它，而底端的表格則是作為滑動的效果。

: Lessons from building mobile-friendly, accessible data tables — Shopify UX This is the fifth post in a series on accessibility from Shopify’s UX team. We’re publishing posts every two weeks. You can check out the…

Rplus commented 8 years ago
power# likes comments shares
# 5 197 11 3 
分享一下～很努力刻完的皮卡丘 -
https://codepen.io/shiningjason1989/details/NALzYQ/

(｡•`ω´•｡) pika pika！

: Pikachu Inspired from 1. http://codepen.io/kevinjannis/pen/GyCgn 2. https://dribbble.com/shots/2565803-Pika...

Rplus commented 8 years ago
power# likes comments shares
# 6 217 1 0 
今晚的簡報，希望能讓大家一窺前端 TDD 的世界。
Rplus commented 8 years ago
power# likes comments shares
# 7 141 3 10 
高雄前端下次聚會時間出爐哩，
禮拜五中午 12:00 準時報名！

另外這次我們也會嘗試使用「線上直播」，
是打算把這流程建立起來，
讓往後各地的開發者們都能夠一同參與。

希望透過這次聚會，
讓大家更加了解 F2E 與 UI 的工作流程 :D

: 高雄前端社群#25 - 前端與 UI 真心合作的不二法門 高雄前端社群年度熱門主題：前端與 UI 真心合作的不二法門，就在 8/28 熱烈展開。除了專業的 UI 設計分享設計流程外，我們特別請到 "六位" 相關領域的專家現場大 PK !!!!

Rplus commented 8 years ago
power# likes comments shares
# 8 111 12 7 
【求職】 

雖然 job repo 當初是心血來潮開的
但還是很開心看到板上現在有很多的前端徵才文~
也很高興有些單位與朋友透過這方式媒合了

不過有個 label 一直都沒人用過
也正好小弟我放假放得有點久了 XDD
寫了一些個人簡介來求職
希望有志同道合的公司願意撥個時間聊聊~
也希望這個 「求職」label 可以有更多人來響應~ 🙏

https://github.com/f2etw/jobs/issues/110

求職 issue label #頭香 XDD

: 「求職」Rplus：Front-end Web Developer · Issue #110 · f2etw&/jobs 簡介 我是 Rplus Chen, 朋友間常用 R+ 稱呼 喜歡在社群分享及討論前端資訊 [1] [2] 之前從 KKTIX 與 PIXNET 畢業後，目前放長假中 個性偏網路宅，不過天氣好時會出門玩玩 POI 能力 Rplus on GitHub：可以直接在個人的 GitHub 上看到所有程式碼內容及撰寫風格 我喜歡語義化結構良好的 HTML 但有些細節並沒那麼熟，所以滿喜...

自薦文

Rplus commented 8 years ago
power# likes comments shares
# 9 112 18 0 
「徵才」
貝殼放大工程部徵人囉，誠摯邀請您來職缺頁面認識我們公司及部門><!!!
誠心覺得是一間非常好的公司，從老闆到主管到同事，每個都是以人為本真心相待，尤其是我們 CTO ，特別帥；環境更是不在話下，公司正妹特多就不加贅述，盼得厲害的前端大大來帶領小弟我！
　
---------------------------------------------
　
薪資福利
-年薪最少 50 以上
-每季 KPI 激勵獎金與業績獎金
-年度獎金
　
跟玩有關
-每月公司家庭日
-一年兩次的員工旅遊
-迎新／送舊／慶祝／部門聚餐（全額或定額補助）
　
跟健康有關
-自動補充的零食、飲料、現磨咖啡、書
-固定體育課程（每週一次，平日晚上）
-年度健康檢查
　
跟個人有關
-每月不扣薪特休 16 小時（累積上限 80 小時）
-每月不扣薪特休 16 小時（累積上限 80 小時）!!
-每月不扣薪特休 16 小時（累積上限 80 小時）!!!
-每年進修課程定額補助（往上可與主管討論）
　
若有不符合版規之處，通知將立即改善><!!!

【貝殼徵才：為了你，我們架了一個網站！】

我們是貝殼放大工程部，由近 10 位夥伴組成的工程團隊，專長從前端到後端、從使用者體驗到工具串接、大數據，身為集資顧問公司的技術團隊，我們致力於讓每一位提案人可以得到更完整的服務，主要的發展方向有三：獨立集資工具（FinTech）、大數據與 Marketing。

■ 我們開發的產品 ■ 在貝殼成立近兩年間，我們開發出了 Backman 內部系統、Backme 亞洲唯一獨立集資工具以及將推出的 CrowdTrail 集資大數據架構，產品的開發過程是非常辛苦的，但同時我們也非常幸運，能和一群來自不同文化、專業思維的貝殼人一同工作，在介面操作體驗、功能開發上都能有更好的提升。

■ 我們在找的就是你！ ■ ★招兵買馬的職缺：前端工程師、後端工程師、技術專案經理、產品經理助理以及「隱藏職缺」。 為了這次的徵才，我們用心地寫了一個網站，這是只有我們工程部才有的浪漫，如果你有興趣、或知道身邊有非常適合的人選，請務必造訪我們的徵才網站，或是幫我們分享！

貝殼放大 官方網站☛http://www.backer-founder.com 貝殼放大 工程部徵才網站☛https://it-wanted.backer-founder.com/ 貝殼 CTO 個人網站☛https://blog.hothero.org/about-ronald/

徵才文

Rplus commented 8 years ago
power# likes comments shares
# 10 90 11 0

主要整理些可以來避免 loading 中空白畫面的各種技巧

via: codrops 232 ( 其實是先在 frontend-front 看到的， ( 擺著沒看就被收進 codrops 了… src: https://t.co/8iwJb7XjRv tw: https://twitter.com/RplusTW/status/760873477251346432

========== twitter 複製貼上中… ===========

這篇講到的技巧大多不是他原創的， 所以我才會說是「整理」的

第一個是 skeleton screen，

Facebook & Slack 都有做的 component 預載畫面 作者在文中以「Placeholder layouts」稱呼之~

第二個是圖片的預載背景

有可能是圖片或是主顏色 對於降低閃爍感是滿不錯的技巧

第三個是區塊的預載位置

盡量讓晚載入的資源可以先把位置預留好 這樣一來在載入完畢時， 瀏覽器 re-layout 後才不會造成畫面內容的跳動 通常就用很常見的等比技巧處理就可以了~

第四個是網路字型載入過程中

造成的 FOIT 狀況 作者也是比較建議採用 FOUT 的方式邊處理~ 那這個前不久有篇大文章是在介紹一拖拉庫的 web font loading 策略

那最後是他的套用實作 skeleton screen

Card awaiting content a pen by Kenan Yusuf http://codepen.io/KenanYusuf/pen/JKkpWv/

　跟舊文一樣， 　可以看到很趣味地用 &:empty 在處理樣式~

Fake it 'til you Make it CSS by Kenan Yusuf 2016-07-29 https://kyusuf.com/post/fake-it-til-you-make-it-css

f2etw

Rplus commented 8 years ago
power# likes comments shares
# 11 91 10 0

睡醒看到 Codepen 上這個精奇的 CSS 技巧 ✨ 作者用純 CSS 來做到捲動位置的提示 很天才的想法！😜

看 code 應該就能理解這也算是一種多圖層相疊的應用方法 非常有趣~ 大家也可以想想有什麼地方可以延伸應用~ <3

CSS only scroll indicator a pen by Mike Riethmuller 2016-08-01 http://codepen.io/MadeByMike/details/ZOrEmr

f2etw

via: twitter 精選 src: https://t.co/htgObQ2Hbl tw: https://m.twitter.com/RplusTW/status/761449492268802052

Rplus commented 8 years ago
power# likes comments shares
# 12 57 7 0 
at vue.js 佈道大會
場地棒棒的～

今晚的分享者：(按分享序)
* Kuro Hsu：前端框架大亂鬥之我為什麼選擇 Vue.js
* Jace Ju：一頭栽入 Vue.js TDD 的世界

:

活動紀錄

Rplus commented 8 years ago
power# likes comments shares
# 13 49 5 5 
【徵才】
小弟生平第一次發徵才文，如果有哪裡不合規定請告訴我，
會立刻修正 : )

: 【徵才】正法寶藏工作室誠徵技術學徒 · Issue #111 · f2etw&/jobs 正法寶藏工作室徵才 職務分類: 程式技術學徒 工作地點: 新北市板橋區文化路一段 137 號 7 樓，能獨立作業者可遠端工作 薪資範圍: 正職月薪 NT$ 30,000 起，依能力經驗面議 「正法寶藏工作室」是一個非營利組織。 致力推動西藏文化之經典、古籍研究及保存，提升西藏文化之知識教育，促進國際西藏文化學術之交流。 目標： 一、 西藏經典、古籍的現代化，以符合現代閱讀習慣，方便更多...

徵才文

Rplus commented 8 years ago
power# likes comments shares
# 14 32 14 3 
CSS復刻小綠人，有人有各式舞蹈或招式可以提供嗎？

: Green Man Is Walking A Striding Xiaolüren....

Rplus commented 8 years ago
power# likes comments shares
# 15 20 4 1 
點Logo會404 xDD 呵呵

: 跨國黑客競賽 「亞洲跨國黑客交流座談會」針對主題，邀請臺灣、泰國、印尼3大領域專家進行跨國座談，

Rplus commented 8 years ago
power# likes comments shares
# 16 20 0 4 
小小的分享一下實作的過程

: webdriver.io - 前端測試入門筆記... « tedshd's DevNote webdriver.io - 前端測試入門筆記... 前端測試工具很多種 我這裡的需求是要做自動化測試 不知為何就選了這套 webdriver.io 可能就只是單純名字很炫(誤 當然一開...

Rplus commented 8 years ago
power# likes comments shares
# 17 19 1 2 
大家好，和大家分享一個前端開發者做的直播視頻

: React, Redux and Material-UI Welcome to my channel, I'm front-end developer, I'm write in React+Redux and let me show you a little bit of magic....

Rplus commented 8 years ago
power# likes comments shares
# 18 16 3 1 
有時候我們會把自行開發的npm package，放在另一個目錄，可能會叫做libraries。
在react時，可以使用babel-plugin-module-alias
在react native有個小功能
@providesModule NAMEOFYOURMODULE

挺有趣的xDD

: [babel] custom plugin not called with invalid module path · Issue #6118 · facebook&/react-native Hi, I'm the author of the babel plugin module-alias, allowing users use aliases for the import/require path to their files. I tried to use it in a React Native application, but it doesn't work. Fr...

Rplus commented 8 years ago
power# likes comments shares
# 19 0 8 1 
在業界上有推薦的 front-end framework 嗎？
Rplus commented 8 years ago
power# likes comments shares
# 20 10 0 1 
愛點科技(www.iclick.com.tw)尋人(之前貼過，這次有薪資範圍):
目標：
與以HTML、Javascript、CSS設計出客戶需求的網頁內容，以提供更好的前端使用者體驗。
研究包括行動裝置、平板等跨平台的前端解決方案。

Skill (照優先順序):
1.與UI/UX Designers(或視覺設計師)、後端工程師協作，開發網頁前端互動程式
2.網站前台程式設計與開發(jQuery、AJAX、json)
3.熟悉任一JavaScript MVC框架(Angular.js、React..)
4.懂HTML5、CSS3前端畫面切版工作，研究新的互動應用技術及瀏覽器可顯示之動態效果
5.了解任一RWD Frameworks(FOUNDATION、BOOTSTRAP) 
6.若懂google map api加分。目前產品是www.viewtaiwan.com，希望在環景面板內新增一個可以以Cardboard觀看環景的功能，因此需要研究Google Map API。
7.若涉獵Krpano加分。因離線環景需求，須研究Krpano，將讓環景Cardboard功能應用在部分專案需求內。
8.以上不是通通要很強，會因專案與產品開發流程漸漸接觸，以全職受雇為主；我們接受短期先外包發案方式，中長期希望成為員工，持續維護並開發產品，歡迎有興趣者來聊聊。

酬勞範圍:
45K-60K(NT)

聯絡:
1.可以訊息聯繫我，
2.02-23587566#25 Web Manager 薛永祥 Roger。
3.rogerxue@iclick.com.tw

版主若規則不符見諒，煩請指示不符合處 !

: iclick - Welcome to iclick 不用到場，身歷其境，我們提供的不只是街景，是體驗，快打02-2358-7566。 即刻申請 建立客戶想要的信任感 挑選合適的餐廳、咖啡店或飯店，往往是個複雜的決策過程。利用第三方製作的高品質虛擬導覽，讓使用者在抵達前能先體驗實景，建立他們對您的信任感。這類引人入勝的虛擬體驗，能讓潛在客戶和老主顧對您的商家更有信心。 虛擬導覽讓商家資訊的吸引力加倍 如果使用者看到的商家資訊提供虛擬導覽，預訂的意願會提升兩倍之多。特別是 18 到 34 歲這個年齡層的潛在客戶，如果能看到虛擬導覽，下單的可能性會提高 130%。 三分之二的使用者希望有更多虛擬導覽 受訪者當中，有 67% 希望有更多商家資訊提供虛擬...

徵才文