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-01 ~ 2016-05-07 #49

Closed Rplus closed 8 years ago

Rplus commented 8 years ago

收集:05-12 票選:05-12 ~ 05-14

Rplus commented 8 years ago
power# likes comments shares
# 1 505 35 76
最近常遇到求職者想找前端工作但被徵才內容嚇到不敢應徵,
或是徵才廠商不曉得要如何寫職缺需求才不會引起誤會,
所以分享一下個人的經驗:
 
【熟悉 JS Framework,jQuery、Vue、Angular、React尤佳】
有些廠商可能剛接觸前端職業,
不了解目前 JavaScript 趨勢,
所以就熱門的全寫上,
這樣很容易造成求職者的惶恐,
就連我自己也只能說對 JQ、NG 算稍微精通,
其他也頂多算是玩到建立個 todolist、寫些玩具的程度,
根本還沒成熟到敢用在專案上。
 
web 廠商要前端會 JavaScript Framework,
主要也是希望會下面兩項技能:
1.設計網頁互動性動畫效果
2.串接 Ajax、Restful API,具系統性地規劃前端架構
 
那就建議廠商寫明工作任務,
再從履歷、面試來去評斷他是否勝任就好,
現在前端框架多到爆炸,
我也認識不少純用 Native、冷門框架但強到爆炸,
要記住框架只是工具,你就算有關刀,但不會耍也是白搭
 
【工程師、設計師職稱傻傻分不清楚】
我在輔導學生就業前端的時候,
常常遇到職稱寫「前端工程師」,
但去面試時卻要求需設計畫面(Mockup),
這真的是比 HR 要找 JAVA 但卻找 JavaScript 工程師還要更雷!
所以每次高雄前端社群聚會要結束時,
我都會不厭其煩播這個影片:https://goo.gl/dnh1S5
主要希望讓會眾了解前端設計師、前端工程師的差異。
 
所以這裡建議廠商,
如果工作項目需要設計畫面,
我自己是建議職稱加上「設計」,
例如「網頁設計師」、「前端設計師」。
 
如果完全不用設計畫面,那就加個「工程」,
例如「網頁工程師」、「前端工程師」。
至少能讓求職者有個基本判斷,點閱轉換率也比較高。
 
至於有些朋友提說如果只單純切版,
不會接 Ajax、SPA 的職稱要叫什麼,
我個人覺得叫「前端工程師」也沒什麼不妥,
也有在104看過「網頁切版工程師」、「切版工程師」也OK的。
 
【懂後端 Framework 尤佳】
有幾次幫前端朋友討論職缺的時候,
常發現對方濾掉些我認為他們可以勝任且薪水也給到位的公司,
細問後才得知他們會對工作項目裡面有寫到「懂某某後端語言尤佳」的條件而卻步,
儘管那是加分條件而不是必備條件。
我問了幾次徵才廠商,實際狀況只是:
(1)擔心與公司後端工程師合作不順 (佔80%)
(2)只是現階段大案需要,未來「有可能」需要負責後端(佔20%)
 
老實講如果你是一個:
1.已經會 Template Language(jade、slim、ejs),了解 partial、Layout的觀念
2.曾經有跟後端工程師合作經驗
 
那其實就已經可以跟全部的後端工程師合作了,
很多都是大同小異的,
每次我跟不同後端工程師合作,
只要了解 View 放在哪裡,
CSS、JS 的路徑在哪就直接上工改 Code了。
 
不過會建議徵才廠商要和面試者主動表達要找的對象是哪種,
有些廠商會希望先騙進來,等前端需求沒那麼高再誘導轉後端,
不過為了建立長久關係,建議還是事先說清楚會比較好。
 
【懂 UI/UX 尤佳】
老實說除非是 UI Designer轉前端,
或者本身對這塊領域有興趣,
否則真的是有點強人所難。
 
但經由我和許多徵才廠商詢問過後,
他們要的大多是「能夠與美術、後端合作,提出可操作性的前端介面建議」,
其實這才是徵才廠商為什麼要找前端工程師的最主要原因。
 
每當 UI Designer設計 Mockup 出來後,
我都會提出四、五種可行性操作流程,
同時瀏覽器兼容性也相當成熟的建議,
彼此再激盪出更佳的使用者介面,
所以 UI/UX 並非是 UI Designer的工作,
我個人認為是全部團隊都該參與的事項,包含PM與後端,
 
如果你看到徵才內容條件有「懂 UI/UX 尤佳」,
我建議就自己腦補成「能夠與美術、後端合作,提出可操作性的前端介面建議」就好了哈哈。
 
--
 
其實還有相當多可以寫,
但把大問題寫出來後面其實問題就比較小了,
歡迎大家一起補充
Rplus commented 8 years ago
power# likes comments shares
# 2 128 59 2
已額滿~

大家好~我想挑戰 100days UI/UX project
大家有誰有興趣一起挑戰呢~也可以增進一些前端網頁技術XDD
或者創一個LINE群組 可以討論前端方面的知識:)

網路上有很多人做好的UI跟UX 我希望是可以從他們的專案去模仿(或者有任何的idea可自由發揮) ,但專案希望不要一模一樣XD 之後互相交流做了哪些UI/UX並發表在"LINE"上or "codepen",目標就是寧願做一些東西出來也不要什麼都沒做 ~coding過程中如果有問題也可以發表出來 ~ 或者有什麼IDEA可以提出~~
Rplus commented 8 years ago
power# likes comments shares
# 3 111 4 18
Framework 只是工具,適不適合才是重點。jQuery 表示...

: 不要只因為性能考量而選擇 React.js React 的軟肋:大量的 Real DOM 操作。 TL;DR 先說結論:如果大量的 Real DOM 操作無法避免,那麼 React 效能可能會令你非常失望。 為什麼會有 React.js 很快的錯覺? 原因是因為在現今複雜的網路環境底下,我們很少有完全用純 Javascript 寫的 Web App,而既然用了框架,難免會引入額外的 Overhead,而跟其他的框架比起來,在 DOM 的數量不多、改動又少的情況下,React.js 勝出的可能性極高;加上官網上不斷地強調了 Virtual DOM...

Rplus commented 8 years ago
power# likes comments shares
# 4 97 1 20
這篇 CSS 工具文主要介紹的是
如何搭配 PostCSS 來提高 CSS 的品質

文中列舉了五款作者推薦的 PostCSS plugin
* Stylelint
* Do I Use
* Immutable CSS
* CSS stats
* list-selectors
各 plugin 都有簡介效果與目的

對於 CSS 自動化的開發流程及分析非常有幫助

(( 大家可以多討論一下目前團隊所採用的 CSS 管理有哪些唷~ 

Improving the Quality of Your CSS with PostCSS
by Pavels Jelisejevs 2016-04-26
http://www.sitepoint.com/improving-the-quality-of-your-css-with-postcss/

: Improving the Quality of Your CSS with PostCSS Pavels explores how PostCSS can help improve and maintain your CSS quality with code linting and analysis.

Rplus commented 8 years ago
power# likes comments shares
# 5 71 4 20
理解css3中的matrix

: 理解CSS3 transform中的Matrix(矩阵) « 张鑫旭-鑫空间-鑫生活 张鑫旭的个人博客_web前端技术文章_理解CSS3 transform中的Matrix(矩阵)

Rplus commented 8 years ago
power# likes comments shares
# 6 74 14 0
https://codepen.io/lichin-lin/full/QNZegb/

這是我這個禮拜做的一個post-list小練習
header的地方放上Skew的效果
不知道大家是用哪種方式
去做出這個效果

content裡頭我用了flex來呈獻
desktop、mobile兩種排版

另外也加入一些animation讓資訊
可以用不一樣的方式呈現
--
希望大家給我一些排版上
以及整體架構上的建議
Rplus commented 8 years ago
power# likes comments shares
# 7 42 4 10
Smashing Magazine 上的這篇文章
羅列了各種 CSS Pseudo-Class(:) 跟 Pseudo-Element(::)

作者 Ricardo Zea 很用心地為較特別的選擇器都寫了一個 codepen 範例
裡頭當然有些是還未確立規格的選擇器
不過也可以趁機看看有什麽有趣的 selector~

((( 裡面有好多奇妙的 selector~ 大家用過哪些呢~

An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements
by Ricardo Zea 2016-05-03
https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/

#F2ETW

: An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements – Smashing Magazine Hola a todos! (Hello, everyone!) In my early days of web design, I had to learn things the hard way: trial and error. There was no Smashing Magazine, Can I Use, CodePen or any of the other amazing tools at our disposal today. Having someone show me the ropes of web design, especially on the CSS fron...

Rplus commented 8 years ago
power# likes comments shares
# 8 48 5 0
「討論」重新檢視目前課程內容資料,正在調整大綱,將會把此次課程內容作為之後訓練新進人員必讀科目,題目為『對於前端測試』。
.
前提:開發人員必須先具備基本 JavaScript 概念,同時也瞭解 jQuery 特性,瞭解 DOM 的概念。
.
首先會採用 jQuery ,並非採用其他 framework ,主要是直覺上透過 jQuery 會比直接導入任何一套 front end framework 還要單純直接,才能夠專注於在解釋『測試』的精神上,甚至後續可以延伸到許多不同框架的測試概念。
.
對於前端測試先行,對於初階入門者首先提到的範圍有,
.
1. 前端開發的思維概論
2. 舊有程式進行整合前端測試
3. 如何透過瀏覽器進行前端單元測試 - chai test flow
4. 產生測試結果報表
5. 執行測試先行流程 - 以 jQuery 實做為例
6. 測試先行元件化流程 - 以 jQuery plugin 為例
.
以上為個人覺得如果要導入前端測試,至少要先瞭解的部分。但不一定正確,還希望提出來跟各位進行討論,覺得有哪些項目是可以加入,或者對於『前端測試』是希望瞭解的,也歡迎提出
Rplus commented 8 years ago
power# likes comments shares
# 9 36 6 4
https://github.com/babydragoner/SimpleRWD/blob/master/README.zh-tw.md

原本是想我個人網站是用 wordpress 來做的,後來網站掛了,免費的就是這樣,也沒幫忙備份,就整各不見了。
只好要重建網站,當下,我也想說來練習一下,來寫 RWD 的網站,於是就有了這個,在花點時間,把我個人網站在用的碼,整理一下分享出來給大家,歡迎使用

老實說 我個人是覺得 練習 就是要 重無到有 你才會比較能清楚認知原理,使用一堆框架,也許是很好用,但是這樣,感覺也只是用的好而已,還是不知道原理。所以 就花點時間來自己寫自己的網站。

時間不多,所以寫得很簡單,不過我想 麻雀雖小還是該有都有了,想擴充也是很容易。

其中 最麻煩的還是 CSS 了,大家如果有應用本專案,產生了一些不錯的 CSS 也歡迎跟我說,我在把它放上去。

: babydragoner/SimpleRWD Contribute to SimpleRWD development by creating an account on GitHub.

Rplus commented 8 years ago
power# likes comments shares
# 10 34 0 3
嗨大家,小弟最近用 React+Redux 做了一些專案。對於 Redux 的 middleware 覺得優雅又有趣。所以寫了一篇文章從 source code 切入來討論它,和大家分享 :D

: Redux middleware Functional Programming « mz026's Blog 前言 最近做了一些跟 React Redux 有關的 projects。Redux 的設計有加入了很多 functional programming 的概念在裡面,其中我覺得最優雅的是 midd...

Rplus commented 8 years ago
power# likes comments shares
# 11 15 12 3
在看 plugin 的時後通常都會建議有一個獨立的 function scope 去實做,請問一下我的觀念是正確的嘛??

若是錯誤,希望能說明這兩種的差異與需注意的地方,謝謝各位^^

:

Rplus commented 8 years ago
power# likes comments shares
# 12 6 5 1
來請問一下,紅牛的這個網站,中央那個可以隨著視窗大小縮放的格狀區塊,是用什麼套件作的??
印象中在gogoro 的網站好像也有看過,但偷看source code 一輪沒找到特定的套件名稱...Orz

: Red Bull Gives You Wings 給你一對翅膀 - RedBull.tw 來自Red Bull世界及其他豐富的媒體資訊中,搜尋最新要聞報導,盛事、實況轉播、影片及照片集等,內容包括賽車運動、單車運動、衝浪、文化創意及更多

Rplus commented 8 years ago
power# likes comments shares
# 13 6 6 0
請問一下 如果有一個串金流的問題想要問 不知道哪個版是比較適合發問的? 

目前遇到的的問題是我們金流使用stripe Stripe有支援alipay 但是實際上測試起來我的支付寶還是不能使用

已經看了documentation 跟詢問過stripe的人 但是都沒得到很好的解答 想要問看看有沒人有類似經驗的? 感恩

非前端

Rplus commented 8 years ago
power# likes comments shares
# 14 1 7 0
請問使用 compass watch 來編譯 .scss 能否排除某些檔案不要編譯?目前我一啟動 watch,目錄內未加底線的 .scss 都會被編譯。
Rplus commented 8 years ago
power# likes comments shares
# 15 8 2 0
幾乎沒有軟體系統不追求模組化的。模組化地好,各模組間的定義有清楚的介面。一個模組內的改變只影響到它下游的模組;下游模組的改變不會回過頭來影響上游底層模組的實作。

有些系統容易作到模組化,但使用者介面的模組化卻不容易。為了讓使用者享用精巧的操作介面,系統常常會出現複雜的資訊流。如果為了模組化的結構,造出了過多的中介層,系統的反應速度可能會大打折扣。但中介層不足的話,又作不到模組化,使系統很難維護。

Jenny Liang 會在 5/20 的 Jobspace 分享她使用 React 模組化開發的經驗。React 是一個相對新的前端程式庫。雖然不是說用了就會模組化,但它的運作模式挺有意思的,也得到許多好評。歡迎同好報名聚會,參與討論: http://jobspace.kktix.cc/events/2016-frontend-react 。

: Jobspace Meetup: 前端模組化開發 - React 注意,請務必至 KKTIX 系統繳費,方可完成報名: http://jobspace.kktix.cc/events/2016-frontend-react

主題:前端模組化開發 -- React

模組化 (modularization) 向來是軟體系統成熟度的指標。不同的系統對模組 (module) 有不同的定義。但總的來說,愈模組化的設計,愈容易讓系統的部件重複被使用。模組化不單透過重用性 (reusability) 影響生產力,也為系統的複雜度設立屏障。缺乏模組化設計,不能限制複雜度蔓延的系統,都會遭遇可維護性 (maintainability) 降低的難題。

網頁前端設計也追求模組化。但作為使用者介面 (UI),網頁前端一般不會單獨存在,而必然有一個非同步、分散式的後端系統互相配合。相對於一般的使用者介面軟體,網頁前端的模組化是更加大的題目。React 是 Facebook 所開發的 JavaScript 前端使用者介面程式庫,引起了許多人的注意。它雖不是萬靈丹,但對前端開發的模組化確有獨到之處。歡迎大家一起來了解、討論。

講員:@[1116802743:2048:Jenny Liang]

Jenny 是一位鍾情於網頁與前端技術的工程師,目前任職於 Appier。除了寫程式之外,她也熱心於技術社群活動;不但參加聚會,也投入研討會籌備,包括 COSCUP 和 PyConTW。基於工作和興趣,Jenny 緊緊跟隨著最新技術的發展。除了花時間整理所學,報告給同好之外,也希望大家給予指教、互相研討。

Rplus commented 8 years ago
power# likes comments shares
# 16 0 7 0
請問在rails可以讓haml指定layout樣板,那麼轉到gulp有類似的方法嗎?感謝
Rplus commented 8 years ago
power# likes comments shares
# 17 9 0 0
這裡有人用Drupal嗎?  資深前端開發工程師@John Albin Wilkins 終於將  Drupal 8, Zen 8.x-7.0-alpha2 版型開發出來囉! 

https://t.co/9RV3xqs9Vd #drupal #drupal8 #zentheme #theming #front-enddevelopment

: Zen | Drupal.org Zen is a powerful, yet simple, HTML5 starting theme with a responsive, mobile-first grid design. If you are building your own standards-compliant theme, you will find it much easier to start with Zen than to start with Garland or Stark. This theme has fantastic online documentation and tons of helpf…

Rplus commented 8 years ago
power# likes comments shares
# 18 1 2 0
Hi 大家好 :D
 
想請教大家react fetch 的 polyfill相關問題..
 
最近的進度開始了解react 在 ajax上的方法
除了query 可以很方便的使用promise, async等方法
但是想要學習官方提到的『Fetch』
但我應該怎麼做才能讓android瀏覽器能夠支援呢??
 
目前我嘗試使用的Polyfill有以下:
es6-promise,
isomorphic-fetch,
node-fetch,
whatwg-fetch
 
以下版本的瀏覽器好像不理會我的 Fetch
(可是react render出來的view是沒問題的)
 
不知道有沒有版友之前有處理過類似的情況
Rplus commented 8 years ago
power# likes comments shares
# 19 2 1 0
分享一個DI的元件
專案中參考DICF.dll後

。在Global內
---------C#--------------
using static DICF.DIControllerFactory;
--------------------------

。然後將MVC的ControllFactory指向元件中Factory(參數分別是AssemblyName,controller的namespace)

---------C#--------------
 ControllerBuilder.Current.SetControllerFactory(new ControllerFactory("MVC_DI", "MVC_DI.Controllers"));
--------------------------

。接著註冊interface及implement的對應
---------C#--------------
    DIContainer.RegistType<IProfile, RickyProfile>();
    DIContainer.RegistType<IDAOProfile, DAOTimmyProfile>();
--------------------------

最後在開發過程中,只要將interface宣告為public
就會自動IoC上面有註冊過的Implement

這一個元件有設計遞迴
會多層的IoC下去..

例:
Controller 使用 InterfaceA IoC ImplementA
ImplementA 內使用InterfaceB IoC ImplementB
Imxxxxxx.......

不好意思,沒有backend的社團,所以分享在這...

: Ricky0708/MVC_DI MVC_DI - DIControllerFactory

Rplus commented 8 years ago
power# likes comments shares
# 20 3 0 0
[物聯網相關應用案例分享]
物聯網時代的來臨,改變了傳統建築、工廠以及零售業的生產流程,而物聯網技術又是如何大幅提升產業的效能呢? 快來看看吧! 

P.S. 每週三下午兩點物聯網開發者論壇線上問答活動,立即註冊留言即有機會獲得價值約五百美金的WISE-PaaS軟體授權碼喔! 
立即登入: http://goo.gl/gmzieR