week - 2016-09-04 ~ 2016-09-10

Rplus commented 8 years ago

收集：09-19 票選：09-19 ~ 09-21

week-25

Rplus commented 8 years ago

power#	likes	comments	shares
# 1	367	27	0

fb permalink @ 2016-09-04T15:48:24+0000
who: Pei-Chi Wu
intro:

大家好，第一次在這裡發文，
如果內文有任何不妥煩請告知，謝謝 :D

昨天心血來潮刻了自家寵物-白頭翁
(身為前端就應該要用網頁刻一下愛鳥啊!)
http://codepen.io/thisis577/full/BzZYJN/
(建議使用 Chrome 瀏覽，我沒有做相容性測試><)

用的只是簡單的 border-radius 跟一點點小動畫拼湊出來的，跟版上的大神們相比技術門檻應該算是很低XD 
因為刻得很隨意，沒有把它最佳化（看那一大堆重複的 js 就知道了XD）這部分就請不要鞭我了(跪

在刻的過程有遇到兩個問題想請教：

1. 如果一個元素本身有 transform: rotate(10deg)，在將它套上會運用到 transform 的 animtation 時，只能在 keyframes 內覆寫一次 rotate(10deg) 後面再加上我希望做出的動畫效果嗎？
ex. transform: rotate(10deg) translate(10%, 20%) 
有沒有其他可以不需要覆寫又能保留原本 rotate 效果的方法呢？(每次複製貼上都覺得好笨阿...)

2. 大量運用 position: absolute 會造成效能低落嗎？(我沒有用在 animation, 就只是單純很多部位不好排我就直接用上這個屬性)

先謝謝各位了！（鞠躬
---
如果對這個作品的一點點技術心得有興趣的話可以看一下我的 blog:
https://thisis577.github.io/2016/09/04/CSS-chinese-bulbul/

Rplus commented 8 years ago

power#	likes	comments	shares
# 2	117	7	22

fb permalink @ 2016-09-09T02:08:38+0000
who: Po-Jung Chen
intro:

多一個空格、少一個空格、多一個逗號，都會導致版面發生不同的變化，一起來看多重選擇器的差異吧！

【CSS選擇器-傻傻分不清楚】很多人在初學 CSS 的時候，看到多重選擇器就霧煞煞。　　你知道當我們同時選擇兩個 class 名稱時，中間有空格、沒空格，或者使用逗號都代表不同的意義嗎？　　一起來打通 CSS3 選擇器的任督二脈，搞懂這之間的差異吧！

Rplus commented 8 years ago

power#	likes	comments	shares
# 3	114	9	5

fb permalink @ 2016-09-05T03:33:06+0000
who: Kuro Hsu
intro:

[活動宣傳] 本月底小弟會在此活動與另一位專精於 React.js 的講師分享各自在 Vue.js 與 React.js 的開發經驗。無論你對哪套前端框架有興趣，或仍舉棋不定該如何挑選適合的 solution ，都歡迎你帶著問題或心得前來交流。 
預計中午開放報名。 :)

: 前端東（React）西（Vue）軍，今晚要點哪一道？-Accupass 活動通 Vue.js 和 React.js 是近年火紅的兩大 Javascript 前端渲染方案，這次由五倍紅寶石邀請了 Kuro 和 Taian 一起對談，讓大家更了解兩種技術方案的差異以及使用場景。

Rplus commented 8 years ago

power#	likes	comments	shares
# 4	90	16	6

fb permalink @ 2016-09-05T12:02:46+0000
who: 莊宗憲
intro:

分享 Google PageSpeed 有趣小發現
建議項目出現 「禁止轉譯 CSS 資源」

爬文看到建議，頁面開啟只載入最核心
使用者第一眼看到會用到的CSS
然後再用 Ajax 動態載入剩餘的CSS檔案
就能再加快頁面開啟的速度

不過另一個建議比較方便
直接把次重要的 CSS link 放在 </html> 後面
這樣瀏覽器就會在頁面載入完成後
再載入</html> 後面，次重要的CSS檔案

這樣就能不用Ajax 達到同樣效果
原以為標準是將 css link 放在 head 裡..
如果觀念有誤請糾正，感恩！

參考網址
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

Rplus commented 8 years ago

power#	likes	comments	shares
# 5	88	2	16

fb permalink @ 2016-09-10T16:38:10+0000
who: James Liang
intro:

恭喜前端工程師多加一個技能，學會桌面應用程式開發只差一步

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

Rplus commented 8 years ago

power#	likes	comments	shares
# 6	55	5	8

fb permalink @ 2016-09-10T00:18:59+0000
who: Fred Lin
intro:

AFrame 0.3 出了, 基於 three.js , 支援 WebVR 1.0, HTC Vive, 還附帶 debug 工具A-Frame Inspector https://aframe.io/blog/aframe-v0.3.0/ 用這個做寶可夢go應該比全自幹容易吧?

: A-Frame Building Blocks for the VR Web

Rplus commented 8 years ago

power#	likes	comments	shares
# 7	56	0	7

fb permalink @ 2016-09-09T00:10:35+0000
who: 廖洧杰
intro:

以前沒用 RSS 時追蹤技術文章都很費力，
直到使用 feedly 才完全解決我的困擾，
讓我在下班搭捷運去學校教課的空檔，
使用手機得知天下事 XD
　
所以在這向大家推薦這個服務，
也釋出我訂閱的內容讓大家參考，
個人的比重是前端8成、UI 2成，
內容不乏是國內外的前端、UI 部落客與官方網站。
線上分享：http://feedly.com/gonsakon
載點下載：https://goo.gl/YXru6s
--
另外也向大家推薦國內的技術週刊，
除了相當用心經營外，技術含金量也非常高哩！
　
碼天狗週刊：http://goo.gl/TQ8WIv
TechBridge：http://goo.gl/fnVGA7
Weekly Collection @F2ETW：http://goo.gl/IgWcJ2

六角學院校長特別釋出私藏已久的前端工程師必訂閱100個 RSS 訂閱內容，大家快來挖寶唷!!! 參觀校長私藏：http://feedly.com/gonsakon 校長私藏載點：https://goo.gl/YXru6s feedly 官網：http://www.feedly.com/ 　 PS：私藏載點可到 feedly 註冊後，瀏覽左側的 Organize sources，點選下方 import OPML 就可以在自己的 feedly 載入訂閱內容唷　 ---- 我是分隔線 ---- 　今天要來訴說個不為人知的故事，六角校長有個蓋世本領，就是足不出戶能知天下事，長篇大論最新的前端技術，或新穎的流行專業用語每次聽心裡都在想：奇怪！這傢伙不是每天都坐在我前面嗎？怎麼搞得"上通天文下知地理學貫古今中外知書達禮內外兼備"？本人天不怕地不怕就怕沒靈感和素材，明明很努力在爬文，為什麼還是比慢一步得知新資訊咧？你當真以為每天都有這麼多話好說嗎？(擦淚　那天偷偷從他座位後面繞過，看到了這令人震懾的畫面！原來他每天來學校第一步就是開啟 "feedly" ，配著起司蛋餅和奶茶由於事跡敗露(？) 決定公佈養成校長蓋世本領的「功臣」!!!!

Rplus commented 8 years ago

power#	likes	comments	shares
# 8	34	7	9

fb permalink @ 2016-09-06T15:37:53+0000
who: 鍾維聖
intro:

分享朋友收到的分享的分享 (?
似乎是日本武蔵野美術大学學生的畢業製作
http://foxcodex.html.xdomain.jp/index.html

好像有點帥

: Motion Periodic Table | モーショングラフィックスの周期表モーショングラフィックスの要素を元素周期表に見立てて配置。エフェクトの周期表で動きのデザインを研究する。Motiongraphics & Periodic Table. Learning Motion design improve your skills

Rplus commented 8 years ago

power#	likes	comments	shares
# 9	39	1	6

fb permalink @ 2016-09-07T00:28:08+0000
who: Rplus Chen

對 3D CSS 有興趣者可以觀摩一下這個有趣的 codepen 唷~ 作者利用巧妙的角度實現了著名的視覺錯覺：Impossible Staircase

他在這看似不可能的樓梯中加入了一道便橋並以旋轉視角將便橋隱藏

很有趣的視錯覺 3D visual illusion 視覺處理地很棒！

Impossible Staircase by Jon Kantner 2016-08-31 http://codepen.io/jkantner/pen/vXBPLV

f2etw

src: https://t.co/zi9xEaOtqS tw: https://twitter.com/RplusTW/status/773308741617713152

Rplus commented 8 years ago

power#	likes	comments	shares
# 10	44	4	1

fb permalink @ 2016-09-07T09:22:28+0000
who: 吳政賢
intro:

今天的筆記，利用 Google 試算表來存資料，並且產生出 API url，如此一來大家可以利用 Ajax 的 GET 來取得試算表的資料！剛剛試了一下，我利用 jQuery 的 $.get 可以順利的取得資料，沒有跨網域的問題！

先前我有使用這個方法來取得 GPS 路徑(http://www.haotien.org.tw/GPS/HaotienGPS.html)，跑了一兩天下來算是頗穩定的！也在多國語系的靜態網頁上，利用這個方法實作(新增兩張工作表(中、英)，再利用 JavaScript 來回填網頁內容)。

另外，我記得試算表也可以利用 POST 去存資料，不過就是要利用表單來實作，下次再來寫一篇筆記分想，若是心急想知道的人可以參考此篇：http://www.kamira.co.vu/2012/11/jquery-google-spreadsheet.html

以上，若有問題歡迎留言討論：）
--

Rplus commented 8 years ago

power#	likes	comments	shares
# 11	34	2	6

fb permalink @ 2016-09-08T14:55:18+0000
who: YuTin Liu
intro:

ReactNative仰望星空工作坊Run1
真的非常抱歉，講者白目遲到 Orz
影片：https://youtu.be/31DYK9jbGtA

下一次工作坊
日期暫定：9/22 7pm
主題：CodePush

習慣用 Redux 的朋友，有參與者推薦 native-starter-kit
PS. 週五晚上有F2E Meetup九月號

: ReactNative仰望星空工作坊 Run Flex Layout StyleSheet Platform *Navigators / Modal

Rplus commented 8 years ago

power#	likes	comments	shares
# 12	17	19	1

fb permalink @ 2016-09-07T10:16:48+0000
who: Yves Liou
intro:

想請問有沒有人也做過 Web push
我是參考 http://tinyurl.com/jhp8vkj 這個網頁做的

不過我想在取得 endpoint 之後把它送到我的 PHP 後端，不直接用網頁提供的 node.js 解決方案

但在執行 curl 後會遇到 error
錯誤訊息是 http://tinyurl.com/jff7kvw 裡面的 errno 110 - Invalid crypto keys specified
有人知道問題可能出在哪嗎？

:

Rplus commented 8 years ago

power#	likes	comments	shares
# 13	1	24	0

fb permalink @ 2016-09-08T13:45:13+0000
who: 林建良
intro:

前輩們請教一下他的圖形驗證碼事用FLASH 播放讓視障者可以輸入圖形驗證碼..........問題是我看了他的原碼還是沒有頭緒，想請版上大大門指點

: 高雄市立圖書館全球資訊網-讀者服務-讀者意見

Rplus commented 8 years ago

power#	likes	comments	shares
# 14	2	19	0

fb permalink @ 2016-09-09T02:08:49+0000
who: 廖某允
intro:

又來問個簡單的問題，請問一般在寫
<meta property="og:type" content="website"/>
這時候尾端的 "/>" ，"斜線/ " 在HTML5是正規的寫法呢?還是其實移除斜線才算?

Rplus commented 8 years ago

power#	likes	comments	shares
# 15	1	17	0

fb permalink @ 2016-09-08T04:24:32+0000
who: Wan Ting Chen
intro:

想詢問一下WEBPACK的相關問題(我是超菜鳥)，我在JS裡面REQUIRE CSS的檔案，build的時候並沒有出現什麼錯誤，可是CSS的樣式並沒有被載入，不曉得有沒有那個大大知道是為什麼？ 
(我的步驟大概是這樣子)
1. 安裝css-loader
2. 在webpack.config.js設定module loader
3. 在js檔裡面，require('css!./css/main')  << 檔案應該有吃到 (沒吃到會出錯)
4. css檔裡面，只設定body的background-color樣式

-------------------
預計開啟網頁的時候，背景會變色才對，不曉得為什麼樣式沒有進去，大概知道狀況的大大們，可以告訴小妹大概的原因嗎？謝謝 > " <

Rplus commented 8 years ago

power#	likes	comments	shares
# 16	6	13	0

fb permalink @ 2016-09-08T05:38:48+0000
who: 王康文
intro:

http://www.apple.com/tw/mac/ 

我在chrome看的時候選單有奇怪的陰影效果，其他人有發現嗎？其他瀏覽器正常

後記：
CSS backdrop-filter造成的，還在測試階段的屬性竟然直接放到線上版耶

: Mac 一探究竟 Mac 的世界，看看全新 MacBook、iMac、Mac Pro 以及更多機種，前往 Apple 網站了解、購買及取得支援服務。

Rplus commented 8 years ago

power#	likes	comments	shares
# 17	8	5	2

fb permalink @ 2016-09-09T00:16:38+0000
who: James Liang
intro:

前端開發的程式設計師們，告訴你們視覺設計師好夥伴，設計網頁特殊字型圖片、網頁SVG文字應用、Banner、EDM、或其他視覺文宣品時，字體設計缺字缺靈感解決好辦法(影片操作方法沒有問題，請確定文字是否能使用在商業用途)

: [主角日常] 根本作弊，用不完的平面視覺設計向量字型生成方法想要設計DM、海報但字型不夠用怎麼辦，教你怎麼生成想要的向量字型。要有 illustrator 基礎喔～當然本頻道介紹的字型生成器只是茫茫大海其中一個網站而已，可以到其他字型網站找找看想要的文字喔～

Rplus commented 8 years ago

power#	likes	comments	shares
# 18	18	0	0

fb permalink @ 2016-09-09T07:00:37+0000
who: 賴俊銘
intro:

我在招募前端工程師。月薪50k起跳。保障年薪14個月。工作地點在台北。
有興趣的朋友請和我聯絡。

淘購網招募前端工程師

月薪50K起跳，保障年薪14個月，工作地點:台北市

工作內容

將PSD轉換成前端頁面製作

網站的前端建置,改版及維護

協助解決網頁語法問題及版面問題

開發前端模組應用

技能條件 1.二年以上網頁開發經驗 2.熟練的 CSS撰寫能力，div/tableless HTML layout 3.熟練的 JavaScript 撰寫能力，並熟悉至少一種 JS framework e.g. jQuery 4.熟悉各式瀏覽器及其開發者工具，並對於不同瀏覽器相容性差異及 bug 進行修正 5.對於網頁效能優化有一定程度的理解 6.有獨立作業的能力，也能和視覺設計師及後端工程師協同合作

104人力銀行職務連結 http://goo.gl/hoI7Sb

履歷請投遞 thank_lai@taogo.com.tw

Rplus commented 8 years ago

power#	likes	comments	shares
# 19	12	1	2

fb permalink @ 2016-09-09T20:03:14+0000
who: James Liang
intro:

HTML5 Canvas2D Z-Mapping 技術教學預告

: [主角日常] 傳說中超任遊戲地圖用到的的 z-mapping 技術 PV html canvas 是不錯玩的東西，在實作 z-mapping 前我會先把遊戲框架寫出來，讓大家製作 canvas 遊戲也能輕鬆上手，敬請期待～難用的createJS 就拋一邊吧 XD~

Rplus commented 8 years ago

power#	likes	comments	shares
# 20	3	8	0

fb permalink @ 2016-09-07T05:25:08+0000
who: 徐光輝
intro:

請教各位前輩, 想詢問幾個RWD的觀念問題,

問題1: viewport meta 標籤中 content 屬性內的width為 CSS像素(邏輯像素) or 設備像素(物理像素) ?

問題2: 承接上個問題, 定義的 viewport content width 是否就是 目前 body 的 width ?

問題3: 關於像素密度(DPI), 在網頁設計中有哪些地方能夠使用到這個單位 ?

謝謝解答 ^_^

f2etw / weekly-collection

week - 2016-09-04 ~ 2016-09-10 #111

f2etw