2016年9月20日

Android Studio 2.2 released ~ !


詳細的內容可以看一下裡面的資訊
https://developer.android.com/studio/releases/index.html

影片快速帶過了些資訊, 建議看一下囉



我個人覺得 find sample code 的功能, 真的很方便啊!



另外 Layout Inspector 可以 runtime time 拿到特定 UI component 的資訊, 真的太方便拉.




最後, 試用了一下 build cache , 只要在 gradle.properties 加入一行, 就會有飛快的感覺 (咻咻咻 ~)

android.enableBuildCache=true


Other resources :

新版Android Studio 2.2的新功能真佛心
http://litotom.com/2016/09/20/android-studio-2-2-overview/

2016年3月17日

Genymotion with Google Play Service


Setup steps :
1) genymotion 2.6.0
2) device emulator PREVIEW - Google Nexus 5X - 6.0.0 - API 23 - 1080x1920
3) flash Genymotion-ARM-Translation_v1.1.zip then restart.
4) flash gapps-L-4-21-15.zip
5) sign in into your google account.
6) flash benzo-gapps-M-20151011-signed-chroma-r3.zip and restart.

Please verify MD5 checksum after download those files.


ARM (Genymotion-ARM-Translation_v1.1.zip)
md5 : d385b9ded4503ec809f0e3c00f3e5247

gapps for Android 5.1 (gapps-L-4-21-15.zip)
md5 : 58a9dcf8623be07a944fcd67db0c606c

gapps for Android 6.0 (benzo-gapps-M-20151011-signed-chroma-r3.zip)
md5 : f985200c7e47cc1c5d11e9d897084ea5

2015年3月16日

About React





============================
official
============================

React official website
http://facebook.github.io/react/

============================
Quick Start
============================

React in 7 Minutes
https://egghead.io/lessons/react-react-in-7-minutes

============================
Community
============================

https://www.facebook.com/groups/reactjs.tw/
https://www.facebook.com/groups/228321510706889/

============================
Books
============================

Developing a React Edge: The JavaScript Library for User Interfaces
https://www.safaribooksonline.com/library/view/developing-a-react/9781939902122/

Awesome React Book
https://github.com/enaqx/awesome-react#books

React book
http://www.reactbook.org

============================
Slides
============================
React Architecture
https://speakerdeck.com/vjeux/oscon-react-architecture

ReactJS: Keep Simple. Everything can be a component!
https://speakerdeck.com/pedronauck/reactjs-keep-simple-everything-can-be-a-component

React/Flux in Action 實戰經驗分享
https://speakerdeck.com/coodoo/flux-in-action-shi-zhan-jing-yan-fen-xiang

React slides in speakerdeck
https://speakerdeck.com/search?utf8=%E2%9C%93&q=React

============================
react training
============================
https://egghead.io/technologies/react
https://egghead.io/series/react-flux-architecure

============================
npm packages for react
============================

react npm
https://www.npmjs.com/package/react

react components
http://react-components.com/

============================
Articles
============================

Thinking in React
http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html

Learning React.js: Getting Started and Concepts
https://scotch.io/tutorials/learning-react-getting-started-and-concepts

The Future of JavaScript MVC Frameworks
http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/

TWO react tips
https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375

Advanced Performance
http://facebook.github.io/react/docs/advanced-performance.html#immutable-js-to-the-rescue

============================
Flux
============================

What is the Flux Application Architecture?
https://medium.com/brigade-engineering/what-is-the-flux-application-architecture-b57ebca85b9e

The Flux Quick Start Guide
http://www.jackcallister.com/2015/02/26/the-flux-quick-start-guide.html

How can React and Flux help us create better Angular applications?
https://medium.com/@gilbox/how-can-react-and-flux-help-us-create-better-stronger-faster-angular-applications-639247898fb

============================
Video
============================

Hacker Way: Rethinking Web App Development at Facebook
https://www.youtube.com/watch?v=nYkdrAPrdcw&list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v

React.js Conf 2015 - Making your app fast with high-performance components
https://www.youtube.com/watch?v=KYzlpRvWZ6c#t=1326

React.js Conf 2015
https://www.youtube.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr

Community Round-up #24
http://facebook.github.io/react/blog/2014/11/25/community-roundup-24.html

react js 2014 keynote
https://code.facebook.com/videos/786462671439502/react-js-conf-2015-keynote-introducing-react-native-/

============================
Addition resource
============================

http://www.reddit.com/r/reactjs/

============================
conference
============================
react 2014
http://reactconf.com/

react.js conf
http://conf.reactjs.com/

============================
Example
============================

Sample mobile application with react and cordova
http://coenraets.org/blog/2014/12/sample-mobile-application-with-react-and-cordova/

flux
https://github.com/facebook/flux/tree/master/examples

example for ebook (awesome react)
https://github.com/enaqx/awesome-react/tree/master/examples

============================
Developer tools
============================

React Developer Tools
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
https://www.youtube.com/watch?v=Cey7BS6dE0M&list=PLAq3rthfTjp7mY6bNsLds5_FA4JVfRXpl&index=3

sublime with react pulugin
http://www.nitinh.com/2015/02/setting-sublime-text-react-jsx-development/

react sinpplet
https://github.com/reactjs/sublime-react



Updated @2015.03.23


2014年8月23日

Useful CSS cheat sheets




HTML CSS Cheat Sheet HTML CSS Cheat Sheet
http://lucas221.files.wordpress.com/2012/09/html-css-cheat-sheet-color.pdf

CSS Shorthand Cheat Sheet
http://www.kobzarev.com/wp-content/uploads/cheatsheets/css/css-cheat-sheet.pdf

CSS Positioning Cheat Sheet
http://thewc.co/storage/goodies/codagogy_css_positioning_cheat_sheet.pdf

CSS Cheat Sheet
http://www.hippyusa.org/memanage/pdf/css-cheatsheet-portrait.pdf

2013年11月28日

有關 Closures

(Purpose)Stackoverflow 上面有人問Closures 的目的
  •   Data Encapsulation
  •   The purpose is persistence of local scope


(Long Description)網路上種種描述啥咪是 Closures
  •   A closure is a function defined within another scope that has access to all the variables within the outer scope.
  •   A closure is an inner function that has access to the outer (enclosing) function’s variables scope chain.
  •   A closure is the local variables for a function - kept alive after the function has returned, or
  •   A closure is a stack-frame which is not deallocated when the function returns. (as if a 'stack-frame' were malloc'ed instead of being on the stack!)


(Master says) 大師是這麼說的
Crockford says, is simply:
* An inner function always has access to the vars and parameters of its outer function, even after the outer function has returned…

這概念

簡單的說,就是 Javascript 的 private member,讓外面的function可以拿到 function 內部的local variable.也是就物件導向裡面封裝的概念

稍微複雜一點的來說,由於Javascript variable scope 的特性, 在每一個 function scope 裡面的variable,只會活在 function 內部,如果單存使用 getter(), setter() 去讀取跟寫入一個private member, 怎麼讓原本只會活在 function 內部的 local variable,讓外面的世界可以存取.

專業的說法,請參考下列的文章,有些要看到範例才會有感覺.



下面有一些參考資訊,可以由上而下來閱讀(個人覺得由簡單到困難)

其中,簡體中文的那個參考,由於個人的簡體閱讀障礙,閱讀的過程有些難以理解某些名詞

所以放在最後


Reference :

Understand JavaScript Closures With Ease

Why use "closure"?

javascript closure advantages?

Identifier Resolution and Closures in the JavaScript Scope Chain

Private Members in JavaScript

深入理解JavaScript闭包(closure)

2013年9月11日

身為一個新手,需要了解GIT的概念,而非指令




企圖了解GIT指令,其實只是想把SVN那一套,找到mapping的指令對照表,
不過看起來一整個不適用,概念上的落差,熟悉指令無效 XD

整理了一些零零碎碎的 git 概念,希望路過的人看完有幫助

===============================
1.你應該要知道每一個 commit 是一個snapshot,代表一個狀態

2. 了解Staging area 的概念

3.了解檔案的四種狀態

4. 了解commit裡面的資料結構

5. 你應該知道 git branch 跟 svn branch 是不同的東西 
透過圖文並茂的解說,好像有更加了解一些.
http://gitolite.com/gcs/ (本文最重要的核心,就是看這個連結的內容
===============================

[Reference]
免費的電子書,非常實用


脫離SVN的思維,才有辦法了解啥咪是 git .

* 目前還是新手一枚.



2013年8月9日

FireBug - Command Line API 簡易入門



身為一個初學者,看到別人用firebug的時候,都會有意外的驚喜
例如,你不確定 element 的狀態,經過JS處理過之後,現在到底詳細的內容是啥咪

直接就在Firefox的Console裡面去把他給列出來

以google的頁面為例,直接在在console打入下方的指令,會列出所有該 element 的屬性,
-------------------------------------------------------------
dir(document.getElementById("topstuff"));
-------------------------------------------------------------

dir 是 Command Line API 的指令
document.getElementById("topstuff") 則是去拿頁面上去找特定的element



(身為一個初學者,看到這個方法真的覺有厲害到)


除了 dir 以外,還有其他的API可以用,請參考
另外,在 Mac 可以直接輸入熱鍵 (⌘ + Shift + L),直接focus到command line,更多的熱鍵,請參考


======================
More resources about Firebug
======================

10 Tips to Master the Firebug Console
http://www.jquery4u.com/utilities/firebug-console-tips/

Firebug Document
https://getfirebug.com/wiki/index.php/Main_Page

Firebug CheatSheet
http://www.virusthailab.com/user/download/Cheat-Docs/web-browsers/DZone-Getting-Started-with-Firebug-1.5.pdf

2013年5月3日

[Mac OS X Lion] How to set hotkey to go previous & next on screen




I have some problem after I change Mac to navigate screen, I solve it and note as below. 


1. Set left & right on screen

bindkey \033[5D prev # ctrl + left , move to previous window
bindkey \033[5C next # ctrl+ right , move to next window


2. Deal with hotkey conflict

System Preferences > Keyboard > Keyboard shortcut > Mission control

uncheck below hot key
    . Move left a space
    . Move right a space


3. Reload .screenrc

reload your screen setting as below command, you can read reference to know more detail 
Ctrl-a : source $HOME/.screenrc 




[Reference]

第一次使用 MacBook

How to reload screenrc without restarting screen?

2013年4月26日

前端工程師的新手之路



//////////////////////////////////////////////////
[前端工程開發實務 - 蔣定宇]
//////////////////////////////////////////////////
網站: http://f2eclass.com/    
投影片: http://www.slideshare.net/josephj/presentations  
原始碼 : https://github.com/josephj/f2e-class/tree/master/slide  


//////////////////////////////////////////////////
[JavaScript book]
//////////////////////////////////////////////////
JavaScript: The Good Parts
http://shop.oreilly.com/product/9780596517748.do 


//////////////////////////////////////////////////
[JavaScript OO]
//////////////////////////////////////////////////
Prototype-based programming
//////////////////////////////////////////////////
https://www.facebook.com/groups/javascript.tw/ 
https://www.facebook.com/groups/htmlfive/ 
https://www.facebook.com/groups/node.js.tw/ 


//////////////////////////////////////////////////
[Conference]
//////////////////////////////////////////////////
JSDC http://jsdc.tw/ 


//////////////////////////////////////////////////
[RSS]
//////////////////////////////////////////////////