發表文章

目前顯示的是 六月, 2016的文章

React Native Redux 學習筆記

其實朋友們可以跳過這篇文章,我寫得很碎片式,只是寫給我自己看的。(如果有寫錯的地方 也麻煩留個言給我 導正我一下,目前,我還沒試出一個簡單架構出來...,也許 最近會開始嘗試吧,資料太多,暫時無法一次到位)
[粗人見解] 學習 redux 我建議去上網找一個簡單的 sample,跟著做。

Vue 用 porps 把父層的資料傳給 child component

圖片
just an example,
HTML:
<!--準備 CardComponent 的 Template--> <script type="x-template" id="cards-tmp"> <div id="cards-tmp"> <div class="card" v-for="card in cards"> <h2>{{ card.title }}</h2> <p>{{ card.description }}</p> <a href="#" v-on:click.prevent="openModal(card.id)">read more</a> </div> </script> <div id="app"> <h1>Vue App Example</h1> <div> <card-comp :cards="cardOriginal"></card-comp> </div> </div>
JS
// make an component var cardComponent = Vue.extend({ // 指定是哪個 Element template: '#cards-tmp', // what props you want to accept. props: ['cards'], methods: { openModal: function(id){ alert(id); } } }); new Vue({ el: '#app', components: { // register name is card-comp …

Vue Avatar 解決了我覺得大頭照那個位置一直很空洞的問題

圖片
Avatar 是大頭照的意思。其實之前在用 PHP 就發現有類似的 package (以 Laravel 來說,就有像是 laravolt/avatar),可以爬出一段使用者的名稱,回傳文字的簡寫。然後隨意找找還真的讓我找到 vue 也有好心的開發者作出產出 avatar 的 component。

Git Repo Demo 連結: https://eliep.github.io/vue-avatar/
Git Repo: https://github.com/eliep/vue-avatar

不過我還是用 ES5 的方式在使用,步驟如同官方說明。

載入 vue 以及 vue avater 的 js 檔案
<script src="/assets/js/vue.min.js"></script> <script src="/assets/js/vue-avatar.min.js"></script>
除了基本的載入 vue-avatar.min.js 之外,還要在 vue 初始化一個 instance 的地方加上 components 的設定,例如:
new Vue({ el: '#app', components: { 'avatar': Avatar.Avatar }, // 來一點示範的資料 data: { username1: 'Win.Wu 吳穎穎', username2: 'YIYING WU', username: "hello world", }, ....
在 HTML 的地方:
<avatar :username="username1" :size="40"></avatar> <avatar :username="username2" :size="40"></avatar> <avatar :username="username" :size="40&q…

看眼科記

最近一直覺得看東西容易失焦,會酸,用力瞇一下還會流眼淚。
今天就去東區諾貝爾眼科診所掛號,給醫生檢查一下,還好只是乾眼症,眼睛疲勞 (這對工程師來說,很難避免吧 Orz) 再加上我最近又很常看書,可能真的有用眼過勞。

Anyway 檢查一下比較心安,希望大家用心工作之後,也要多注意自己的健康,我最近是很走養生路線,下班盡量不看程式,而且我還刷了一年的健身房...

最後還是要撈叨一下,
公司不是自己的,但身體是自己的。
Scrum 是假的,但瀑布是真的。
不能改變別人是困難的,但改變自己的是可能的。
(硬要來一段這種詭異的結尾 XD)

Vue Instance Lifecycle Hooks 實例生命週期

一個簡單的 sample,主要我是在看整個 vue  的生命週期,對 vue 有些瞭解了。

var vm = new Vue({ el: '#app', data: { name: 'winwu', width: 900, height: 500, barColor: 'red', barHeight: 30, barXOffset: 10, dataset: [30, 20, 45, 12, 21] }, // https://vuejs.org/api/#Options-Lifecycle-Hooks init: function() { // init 這時候還沒有觀察到 data observation, event, watcher... console.log('init: my name is ' + this.name); }, created: function() { /* data observation, * computed properties, * methods, * watch/event callbacks. * 在這個階段完成 * 但,$el 這時候還沒有好,(DOM 的解析還沒開始) */ console.log('creadted: my name is ' + this.name); }, beforeCompile: function() { // 我也不曉得什麼時候會呼叫到這裡 console.log('beforeCompile: my name is ' + this.name); }, compiled: function() { console.log('compiled: my name is ' + this.name); }, ready: function() { // 在 vm.$el 插入 DOM 時呼叫。 console.log('ready:…

使用 Vue-cli 快速建立 Vue 專案樣板

圖片
Vue 官方提供了一個 vue-cli 工具可以快速建立 vue 的專案,首先你需要以下:
Node.js 環境Npm

Vue.js 改變分隔符的符號 Change Custom Delimiters

在使用 vue.js 重構舊有的專案時,發現 {{ variable }} 這樣的 expression 竟然怎麼樣都不顯示在畫面上,原來是因為我的 view 是 hbs (handlebarsjs) (因為是 express 的專案...),所以這 {{ }} 這個分隔符號會先被 handlebarsjs 吃掉,以至於我的變數反而沒被 vue 辨識。

Vue.js 學習資源

我堅持今天一定要寫點什麼東西 (別問我在堅持什麼 XD),所以先來談談 vue.js 這個 Library (暫時我還不知道,該定義它是 Library 還是 Framework,就目前的感覺,我覺得較像 Library )。

React Native: CameraRoll.getPhotos(tag, success, error) is deprecated. Use the returned Promise instead

在實作 <React Native 學習手冊> 第六章時,有個 cameraRoll 的功能,cameraRoll 很白話了吧?! 就跟相片有關係的 component,其中用 getPhotos 可以取得相簿的照片。

React Native 取得地理位置 navigator.geolocation 得到 location request timed out

我的測試手機是 samsung edge plus 6.
使用 react native 版本為: ^0.26.1
在抓取 location 一直拿不到,反而一直出現 error "location request timed out".

Vue.js select 下拉選單示範

這裡是示範一個下拉選單,其中的關係包含被選擇的項目,以及關聯的下一層選單。簡單練習而已,一定還是有更好的寫法。

Vue.js v-on:click get target Example ( click 事件取得自己 )

在重構工作上的一段小程式,轉而使用 Vue 寫一點小功能。

讀《使用者故事對照》與生活閒聊

圖片
其實我要講的有一半是來自於使用者故事對照這本書的讀書心得。上週,有次小主管帶我去聽演講 (Epoch-MIT ILP 專題演講),其中一場是 PicCollage founder John Fan 為主講人,他就問台下觀眾,什麼是 MVP,當時還聽的不是很清楚,回家也有忘了。接著週末,我就拿起這本書開始讀,結果我發現 User Story Mapping 提到 MVP 還有一些 Lean Startup,與我那天聽到演講的內容很有相關性。

MVP 也就是 "Minimum Viable Product" 最小可行產品。

為什麼需要 MVP 呢?! 我在猜想某部分原因是因為當我們在策劃一個解決問題的產品的時候,大部分情況是我們在“猜想”使用者會遇到什麼問題,所以當我們想出了一個 solution 時,(也許我們要想非常多個 solution),我們要做出一個 MVP 跟使用者互動,驗證我們是不是在對的方向,也用來驗證我們的猜測是不是越來越接近需求。所以會一直維持一種循環『build->measure->learn』 (看圖片)  不斷的試驗,不斷的學習,這樣的 iteration (循環),能夠越快越好,能夠越接近使用者的想要的產品,iteration 也不要太久,差不多一次的 sprint 衝刺時間約兩周,這樣一個月可以 iteration 兩次(sprint 的週期主要還是看公司的步調是什麼狀況...)。

實現想法不急著產出設計稿
其實 wireframe 我研究不多,但那天聽演講覺得要點就幾個:


討論快速修改也快速去除任何顏色,單純線稿,單色色塊表現 (因為顏色會影響判斷能力,也會增加很多考慮易用性的變因)

User Story Mapping
這些列的是我看書的學習心得 :P, 也許對看文章的你沒什麼很直接的幫助,我建議你可以直接買書,會比較好理解,因為有些細節要搭配照片看比較了解。或是看 YouTube,這裡有這本書的作者的演講: User Story Mapping with Jeff Patton

Story Mapping 幫助開發時聚焦在 user 跟使用經驗上,促成更好的流程(討論出來的)。故事對照 Mapping 是很容易的一件事情,基本上我們只需要準備便利貼(如果你不嫌貴的話,公司又願意花錢買便利貼...),由左而右的排序,寫…