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-05-29 ~ 2016-06-04 #76

Closed Rplus closed 8 years ago

Rplus commented 8 years ago

收集：06-10 票選：06-10 ~ 06-12

Rplus commented 8 years ago
power# likes comments shares
# 1 258 6 72 
Real-time網站的新選擇～

: 顛覆傳統資料庫，強打主動推送更新的資料庫RethinkDB正式登場 RethinkDB內建主動推送資料更新功能，給予多人協作或是串流等前後端資料更新密集的應用更好的支援。

非前端

Rplus commented 8 years ago
power# likes comments shares
# 2 161 22 24 
如果你跟我一樣（倒楣）要用HTML5 CANVAS API跟AUDIO API開發一些在Android 與iOS 上執行的網頁遊戲／互動，我這正好有批好便宜（爆肝）的牛肉（地雷）...懇求您別來跟我聯絡 XD
ps.文略長，慢看，若有寫錯的也請指教。我的專案是用CreateJS 系列作為底層的Lib，若你用的是不同的就請自己想像，有些東西應該只有語法不同，但底層實作應該不會差太多。
.
觀念釐清：
手持裝置上的瀏覽器，算是有三種，一種是出廠內建的Native Browser （幾乎等於另一種 - UIWebView），一種是使用者自行安裝的任意瀏覽器。
在Android 上除非原廠支援作業系統版本升級，否則Native Browser （UIWebView）的核心不會更新。
而在iOS 上由於偉大的蘋果公司仍提供各類產品持續的系統更新，因此一些上古等級的裝置到今日仍能支援（有地雷）各種新鮮的玩意兒。
至於所謂的Native Browser （UIWebView）之於這兩大作業系統，iOS 上就是Safari，Android 則是所謂的Mobile Safari（有的也是寫Chrome）。
在你碰到地雷要除錯前，請先搞清楚你的網頁遊戲是跑在前述的三個瀏覽器的哪一個上面，尤其你要知道若你的網頁遊戲是在APP 內被開啟時，它其實是用UIWebView 開啟，而且當下所持有的系統資源，可能低於Native Browser 直接開啟的狀態。
.
若是Android；
1.在5.0 以下音效的API 請用Javascript New Audio。
2.反之則請用Audio Tag 或document.createElement('AUDIO'); 搭配Ajax 預載聲音檔案。
3.在5.0 以下＂可能會＂不允許複數音軌同時播放，音軌的管理切換請注意。（註1）
4.在5.0 以下＂可能會＂只允許由使用者［直接觸發］的事件進行音軌播放。（註2）
5.在5.0 以下呼叫Audio API 的函數請盡量放在Event Handler 內呼叫，且避免寫在任何setTimeout/setInterval 內或之後。
.
若是在iOS；
1.建議檢查裝置是否有retina disply，沒有的或許需要降低畫面更新率（FPS/Interval），否則閃退機會不低。
2.在9.0以下，8.0 以上，處理2208*1536 以上圖檔時請多檢查，CreateJS-EaselJS 的cache() 可能會導致影像遺失。
.
Android與iOS 兩者；
1.建議偵測一下作業系統去微調一些FPS/Interval 的參數，原則上若是iOS 9.0 （有retina disply）以上Android 5.0 以上的兩台機器相比，前者效能較好。
2.請善用Event Broadcasting 管理流程，除錯會簡單一點。
3.避免開發在兩個系統平台上的載入後自動撥放音軌的效果，可能會做不到。
4.與其追求記憶體釋放，不如謹慎的考慮如何讓CPU 每個瞬間能少作多少事情。
5.當下用不到的東西，避免draw 到Canvas 內。無法避免的時候，在該物進入可視範圍前，可將alpha 設為0 或visible 設為false（以CreateJS 而言）。
6.如果希望開發的痛苦不要太多，建議跟客戶切豬肉；設定版本相容條件為iOS 9.0 與Android 5.0 以上。
.
備註；
註1：Asus PadFone Infinity / Android 4.1.2 允許間接觸發事件播放聲音，但一次只能撥一軌，預設狀態中後播的會讓前一個強制進入暫停狀態。
註2：Acer Iconia One 8 / Android 4.4.2 只允許直接觸發事件播放聲音，但一次可撥複數個音軌。
直接觸發事件 / 使用者直接碰觸畫面時產生的事件及其監聽（Click/Touch...）
間接觸發事件 / 例如透過setInterval 移動的物件，在達成某個目標座標時if 內的陳述式
.
附錄；
我專案的環境與條件：
條件：iOS 8.0 以上，Android 4.3 以上。
環境：網頁遊戲於APP 內的UIWebView開啟。
.
寫在最後，這些地雷只是我從四個月前到今天碰到的，不保證只有這些 Orz...
Rplus commented 8 years ago
power# likes comments shares
# 3 121 15 19 
http://lauraluo.github.io/particleDemo/dist/
看完three.js cookbook 之後，組合學到的東西
順便確認自已真的有搞懂
程式碼沒整理請無視
向量的算法還不夠自然
離操作流暢且美觀的動畫還有段距離
如果有誰有興趣可以一起研究
我本身沒有3D繪圖跟物理數學的背景
所以光啃基本知識就佔了大部份的時間
如果有組織肯收留就更好了

: WebGL 2D圖片轉粒子 desc

Rplus commented 8 years ago
power# likes comments shares
# 4 135 0 21 
React 的 ajax 選擇～

: React AJAX Best Practices Four good ways to use AJAX with React.

Rplus commented 8 years ago
power# likes comments shares
# 5 50 74 7 
求戰....不對  是求各位大大給小弟一點意見!!

最近我工作經驗不是很好 我知道這八成是台灣的常態
但是我想確認這是不是正常人可能達成的-.-
甚至認為長期處在這種環境底下我會變成四不象..一事無成

主要問題是在我的職責
現在我要會 切圖 排版 瀏覽器相容 js動畫 跟
串接自家人用php寫的 api 接金流等..相關的第三方 處理暫存 log紀錄 寫sql開發個小系統諸如 代辦清單 聊天室(web socket or long polling )
甚至是解分散運算 多執行緒 演算法 手機原生瀏覽器...等的問題

我覺得 是個 「正常」 的網頁開發人員
都不太可能同時掌握上面這些東西吧?????????

我指的掌握是 可以持續接受該領域的新資訊 並且從中過濾挑出
對現在系統有用可以改進的東西 並帶回公司

如同 本來可能是用 mvc + smarty 去處理每一個案件
然後因為某個專案性質不同 如類似fb的聊天
可以替公司引入改用 redis,nodejs 等...不同技術去因應需求

或是 出現一個多國語系x多國版面的網站可以有相對應的解決方是 而不是把 一個語系對上一個版面 當成一個網站在維護

我可以認同每一個網頁開發者都應該大致知道每一層架構的溝通方式 或是 大概原理...(不然你改的css 可能因為快取永遠都不會生效 然後我還不知道為什麼 甚至覺得只是ftp壞了?

所以我想徵求各位大大跟我說 是不是我真的太廢材了???????

我覺得我光追怎麼把css寫好 寫出架構 sass less scss..等然後挑一個該用的框架 ng,react,backbone...然後追追各種新的思想 跟ps出個首頁logo 配個色系 ..我就沒什麼時間睡覺了

甚至我覺得 排切板 跟 美術設計本來就不太有辦法是同一個人

怎麼有美國時間去看哪一種DB在斷電的時候 資料會損毀救不回
哪些比較適合存放不重要的資料 寫入根讀取速度比較 之類的....-.-

求大力的鞭....我是不是不適合當程序猿-.-

另外非常感謝版上各位在我有發問時都很熱心回答!!
我也從這邊吸收很多新知 雖然大多時候都還來不太及消化...
Rplus commented 8 years ago
power# likes comments shares
# 6 122 7 12 
嗨嗨~ 大家好，
很高興今天終於能分享篇自己寫的文章 XD

主題是網路檔案傳輸的耗時優化手法的理解方式
文裡試著用「吃披薩」的行為來介紹「網站傳輸檔案的時間優化方式」~
希望大家能多多指教與補充
甘溫~ <( _ _ )>

[POST] 生活化 response time
https://github.com/Rplus/rplus.github.io/issues/34
by Rplus 2016-05-30
#f2etw

: [POST] 生活化 response time · Issue #34 · Rplus/rplus.github.io 這篇要聊的主題是網路檔案傳輸的耗時， 以及如何用較生活化的方式來理解/記憶 通常， 網頁中傳輸檔案(assets) 若能讓使用者愈快拿到是愈好 就像肚子餓訂披薩當然會希望愈早吃到愈好 === 所以，接下來會用外送披薩來作比喻 === 披薩店：server 顧客：client 披薩：assets 使用者希望的是「等著吃披薩的時間要短」 那就得先來看看有哪些變因會影響「時間」...

Rplus commented 8 years ago
power# likes comments shares
# 7 80 4 26 
分享兩篇 free codecamp 上的前端導讀文章
作者 Jonathan Z. White 在文中分享
學習過程中覺得不錯的資源以及感想

如果在初學階段有些迷茫，
不妨好好閱讀一下這兩篇入門文章
也跟著裡頭的 Experiment 實作加強認知~

文章分兩部份
[HTML & CSS] 介面 以及
[Javascript] & frameworks

From Zero to Front-end Hero (Part 1) — Free Code Camp
by Jonathan Z. White 2016-05-17
https://medium.freecodecamp.com/from-zero-to-front-end-hero-part-1-7d4f7f0bff02

From Zero to Front-end Hero (Part 2) — Free Code Camp
by Jonathan Z. White 2016-05-24
https://medium.freecodecamp.com/from-zero-to-front-end-hero-part-2-adfa4824da9b

#f2etw

: From Zero to Front-end Hero (Part 1) — Free Code Camp A complete guide to learning front-end developmentI remember when I first started learning front-end development. I encountered so many articles, and was s…

Rplus commented 8 years ago
power# likes comments shares
# 8 60 0 12 
這本書對Web前端測試自動化應該有幫助, 作者是Spotify軟體開發顧問

: The Way of the Web Tester Automate Your Tests, Reduce Bugs, Increase Quality 本書為需…

Rplus commented 8 years ago
power# likes comments shares
# 9 6 45 2 
大家好，來詢問一個問題，想知道做法有哪幾種^^

現在有一個 DOM 加上 .anim 的時候會進行向右滑動的動畫，

第二步驟想要他向左滑回去，我會加上 .anim-reverse，讓他在跑一次反向的動畫，

但是這樣我要寫兩個 @keyframes，並且用到兩個 class，

請問有其他的作法嗎? 因為我的 animition 沒有很熟練，但是覺得應該有其他方法。

第二個 class 加上去以後，我還要用到 setTimeout 把兩個 class remove 掉，感覺很蠢。

附上 codepen.io 範例~

: Daily UI #011 - Flash Message ...

Rplus commented 8 years ago
power# likes comments shares
# 10 16 34 4 
大家好，小弟的朋友最近在工作上遇到瓶頸，有一些問題想要請教大家，但又不想被老闆看到，所以請我代 PO 文。希望能夠得到大家的建議，謝謝。

最近在工作上遇到一些覺得不合邏輯，但又好像正常的事情，想請教一下版上大大。
我認為接案流程應該為 業務跟客戶討論需求 -> 業務討論完後跟ＲＤ討論wireframe -> 設計根據wireframe設計版面 -> 跟客戶確認設計以及流程 -> 執行程式。
中間流程可能可以稍微變動。
但是現在公司流程是，業務接了案子，需求不明，要求設計出圖，設計憑空出圖後，接著同時進入 程式以及客戶確認，客戶要求修改畫面，功能，變更需求，回來重出設計，程式修改（這修改常常做白工，或是為了保留某部分功能，反而比砍掉重練還麻煩）然後一直loop ， 而且不會限制客戶修改次數以及內容。  目前覺得這樣的流程有點問題，去跟上面的人反應討論。 卻只表示「這時程很趕，只好如此。 你去別間公司也都是這樣。」

業界公司真的都是這樣嗎？我自己私下跟別人接案，都會把需求確認完，訂契約限制修改次數...等等
而且我認為因為很趕的專案，才需要確認完在執行啊...
還是該逃了？
Rplus commented 8 years ago
power# likes comments shares
# 11 48 0 3 
工作用到的程式，整裡了一下和大家分享。 之後會再分享如何canvg用render png、用jspdf輸出pdf，以及如何用jszip包成zip，並用FileSaver.js將zip存下來的一些程式範例。

: Export SVG file using XMLSerializer Scenario I was considering how I can export SVG as a file using client JavaScript. The way I found on the Internet uses XMLSerializer and create a element for download. Let’s see how it goes.…

Rplus commented 8 years ago
power# likes comments shares
# 12 33 10 1 
[bug report] 出貨訊息 modal z-index

之前有反應給客服，但卻收到罐頭回覆
希望社團內的博客來FE可以領一下這張 ticket

http://i.giphy.com/3oEjI6EniuL18Nvq36.gif

*罐頭回覆*
> 感謝您的來函，很抱歉由於您提供的資料不足，故無法為您查詢，還煩請您再進一步詳述您欲反映的事宜，以利博客來為您服務，對此造成您的不便及困擾，尚請您海涵見諒。並期盼您未來能繼續支持我們，謝謝您。

: i.giphy.com

Rplus commented 8 years ago
power# likes comments shares
# 13 36 0 7 
google新出針對手機網站為主的測試站。不過有不少人批評還不是很準確就是了。

: Mobile Website Speed Testing Tool - Google I just got my website’s mobile-friendliness score. #TestYourSite to see how mobile visitors experience your website.

Rplus commented 8 years ago
power# likes comments shares
# 14 16 9 10 
不好意思想請問這個網頁的呈現該如何實現，記得之前有高手們分享過但是沒有筆記下來，很不好意思，還請指點

: Serio Verify Integrate traffic sources, apply state of the art data cleansing algorithms, and automate manual processes. Serio Verify creates measurable and improved ROI on all your lead-to-call center activities.

Rplus commented 8 years ago
power# likes comments shares
# 15 34 0 7 
關於React生態圈
http://airjd.com/view/iow64jnc000zrpj

演講影片：
http://www.infoq.com/cn/presentations/explore-react-ecosystem

大家有人使用過GraphQL了嗎？跟PHP的結合如何？

: 探索React生态圈 by 郭达峰@Strikingly - AirJD 焦点

Rplus commented 8 years ago
power# likes comments shares
# 16 15 17 0 
請教一個 sublime text 3 theme 的改造問題...
我要如何把這個 tab_label 跟右邊的叉叉對齊呢？
Rplus commented 8 years ago
power# likes comments shares
# 17 22 2 4 
使用Blender + SpriteSpin
簡單的互動，感覺舒服就好~

: i.imgur.com

Rplus commented 8 years ago
power# likes comments shares
# 18 21 0 5 
一位印鈔機品質顧問朋友，想要用d3.js做一個類似heat map的圖，用來做品質觀測。 因此做了一個template給這位朋友參考用法，分享給大家。

: Quality Map using D3.js Scenario Draw a heat-map-like graphic using D3.js and bind click-event on radios using jQuery. This followings are the features. A dropdown list to switch in several years (2014, 2015, 2016). Each …

Rplus commented 8 years ago
power# likes comments shares
# 19 20 2 2 
剛才看到一篇Mashable報導，Facebook的產品設計主管宣稱「打造網站」這門生意已經開始走下坡路了。這件事情若成真，對前端開發者可不是個好消息呀...

: Facebook's director of product design on why websites may be a dying business Facebook的產品設計主管在接受Mashable記者採訪時，大膽宣稱「打造網站」這門生意已經開始走下坡路了。他說平台才是未來的主流，例如Facebook這樣的平台。Mashable記者問...

Rplus commented 8 years ago
power# likes comments shares
# 20 17 0 3 
倒數第二彈，昨天分享export PNG，今天來分享如何利用jspdf來export PDF。 明天再來分享如何使用jszip。

: Export SVG as PDF using canvg.js, Canvas, and jspdf Scenario Why I have to export as PDF is that the laser printer is used by the factory doesn’t support PNG and SVG. We just need to import jspdf after we’ve done exporting SVG as PNG. …