2013年6月28日 星期五

版主近況報告

希望我自己的部分能力可以提升
版主最近進修中...
(說自己是板主有點好笑xd,但也真的是)
不過還是繼續往前端的方向努力

但是我應該不算菜鳥了,也工作一年了。
希望以後可以給大家帶來更多的分享&希望大家不嫌棄。

無論如何,要快快樂樂的當一個工作人








2013年6月27日 星期四

PHP v.s JavaScript 計算年齡

PHP計算年齡這種功能自己寫真是太辛苦了,
所以我第一個反應是完全不考慮自己刻,上網找一下馬上有一個很不錯的範例:

http://stackoverflow.com/questions/3776682/php-calculate-age
下方有個答案得到51票的計算方式
只要丟入日期格式(yyyy/mm/dd),最後可以得到$age ,就是年齡的計算結果。


之所以沒有用JavaScript來做,是因為我使用了jQuery Validation Engine,沒有官方計算年齡的api,自己寫custom又必須符合regex的形式,找不到regex,只好折返往ajax跟php要計算結果的方式去走。(或自行擴充核心xd)

會寫純粹判斷的歲數的js很好寫,code會很長,但是很少寫
可是regex,很難寫,但是code很短,
我還沒有找到regex的寫法,若有找到會再分享出來。

補充:
Calculate age of person from date of birth using JavaScript
JavaScript: Form Validation: Date and Time

2013年6月23日 星期日

C/C++程式設計基礎-上課筆記(0622~0623)

最近假日開始偷偷去進修了,恩..嚴格來講也不算偷偷啦..,挺光明正大的~
基礎的部分大概會上到七月底吧。
不過上課步調蠻快的,回家後還是要找習題來弄。

然後這裡有些參考資料:

然後這是之前朋友推薦的課後練習可以去的地方:

2013年6月15日 星期六

cloud computing雜記

cloud computing最早由Eric Schmidt提出,
雲端運算 => 分散式運算(distrubuted computing) + 網格運算(Grid computing)

很多server組成的虛擬化系統並透過Terminal連上虛擬化系統,在這個服務之下進行資料處理跟運算。


其衍生的服務分成三大面向:
  •  SaaS (Software as a service)
  •  PaaS (Platform as a service)
  •  IaaS (Infrastructure as a service)

計費方式:
  • SaaS(雲端軟體及服務) : 以使用者人數方式計費
  • PaaS(雲端平台及服務) : 以服務時間分級計費
  • IaaS(雲端基礎設施及服務) : 以儲存空間多寡計費

舉例:
  • SaaS: facebook, Youtube
  • PaaS: Amazon EC2,windows Azure, google App Engine
  • IaaS: Amazon EC2

 
  • MapReduce:蒐集大量的資料快速分析,這個概念為google所提出,用於大規模的數據運算。Map: 映射,Reduce: 簡化。
  • DHFS : 是一種分散式的檔案系統,用機率的觀點出發,把資料平均分散在不同的datanode,提高資料的存取效率。
  • Amazon EC2所採用的虛擬服務的技術為Xen Hypervisior


2013年6月11日 星期二

留言板之練習用mockup


先簡單準備個mockup
畫這個是用來做練習用的
想要用node.js的express做一個留言板
不過我好像畫得太複雜了><
如果成功做完的話我會再把link貼上來的(如果...)



可能圖片畫得很複雜,其實就只是按了button可以留言(新增)



然後顯示在列表上


滑過去某筆資料的時候,底色改變,顯示刪除(X)以及set as important的按鈕
可以為訊息做分類




當然還有很多細節,只是再寫下去就變大學的時候那種企畫書了XDD
先這樣啦,晚安地球人!

2013年6月9日 星期日

node.js 之學習 Express 的筆記(3)-搭起資料庫的橋樑(使用MySQL)

恩! 睽違已久的第三篇,終於出現了!!
最近不是偷懶,是太忙(><),
關於前面的幾集,還麻煩大家多多關照&指教。

既然node.js可以是一種使用JavaScript來做前端跟後端的事,那麼讓人開始思考如何使用Express跟資料庫做連結,昨天開始我起手做這件事情,沒想到接二連三的碰壁,這篇會介紹到基本的CURD的操作(是說...難的我也不會,我對SQL並沒有很熟)。 哦!對了,很多網路上的文章是使用MongoDB,不過因為我還是node.js新手,目前還是先選擇使用自己曾經用過的MySQL。




環境背景:


linux環境下(使用上週申請的MiCloud的smartOS作為練習用途的環境)
node.js Express + mysql(記得裝完Express之後要npm install mysql)
然後我的Express資料夾目錄名為miblog (只是個名稱)...

2013年6月6日 星期四

MiCloud-SmartOS測試免費30天體驗

今天申請了一個虛擬主機的服務XD
申請的是MiCloud的SmartOS的服務,現在有免費的一個月體驗期
所以就進去官網按下註冊鍵了
網站連結 : MiCloud




第一步是註冊頁,現在也提供了Sing Up With Google的功能。




註冊成功後,會請你信箱收信,按下信中的啟動帳號連結。

2013年6月5日 星期三

[閒聊] 回憶去年的我,是怎麼當上前端的...

如題,只是閒聊一下而已...
由於最近,又開始找房間租了,讓我想到去年這時的我,找工作的心情真是七上八下。

我想每個想要找工作的新鮮人,心情都是緊張的,既期待又怕受傷害不是嗎?
每個人畢業就像一張白紙,已經清楚自己要走什麼路的人,都會希望找到心儀的工作,

曾經我還以為大四那年在新一代的時候可以藉由畢業展得到一些工作機會,
現在回想起來覺得自己真傻,這個社會沒這麼單純:P
與其等工作機會,不如就直接出去面試吧,是的...,
我就是利用新一代那幾天自己沒有排班的時間溜出去面試工作的,呵呵。

當時我的背景 :


  • 某國立大學剛畢業,有大約一年科技公司工讀經歷,當過一個學期多的網頁設計課助教。
  • 念的是傳統工藝。
  • 大三開始接觸網頁,所以也是從大三開始努力榨乾圖書館所有跟css/html/js/PHP有關的資源,看多少算多少。
  • 大學的時候實習過很多2~3個地方,最後確定自己最喜歡的是web,喜歡什麼試過就知道了。
  • 有曾經想要跨修資管或資工的課,可惜的是想修都跟自己系上的必修課衝突
  • 對於畢業的起薪沒有任何概念,(這件事情有好有壞),因為我不是本科,所以我沒有預設,只希望求得相關工作。
  • 大四心無旁鶩,沒有打算準備研究所,只想做好畢業製作然後順利畢業,工讀等等。
  • 五月準備履歷,開104跟518,五月中前接到的面試通知大約有8~9間,但有興趣的公司只有兩間,因此就只面試兩間(都在台北)
  • 兩間面試都很緊張,因為很少面試經驗...
  • 兩間面試後都在隔2~3天後拿到offer,後來選擇了某家。
  • 畢業後一周馬上就要報到,找房子找的很急...
  • 我非常愛看工具書,這點我到是還蠻推薦的,畢竟課堂上學到的東西有限,有時候借幾本PHP回家看看也好,重點是不要發懶,該動手實作的時候就是要,如果說前面幾章節那種基本的事情都不願意做了,後面我想應該也很難看下去了吧?! 除非是已經很熟悉了。



心得:
  • 達到夢想的感覺簡直像做夢,開心的不得了! 要感謝公司願意給我機會
  • 當時找工作完全不考慮南部,個人是覺得台北的機會多,願意給新人的機會也多,聚會多,資源多,conference多,當時的前端職缺也是北部大於南部。
  • 我想兩間的面試會過有很大的原因是剛畢業的我有相關的工讀經驗,其中一家有看大學成績,兩間的筆試應該都沒有太差吧?!(可是我都不知道成績xd),考的都是基本的網頁設計概念題,以及基本的程式邏輯; 另外有可能是因為我的志向很堅定吧?! 我不會為了找到工作而把自己的履歷寫的我什麼都會。
  • 新鮮人的履歷寫起來真的很複雜,因為大學什麼都教,不過還是要取捨,不然就是要分好幾份履歷寫?!。
  • 大學所學跟社會要的,的確很有差別,所以能夠想辦法在大學實習的時候就實習吧,我是從實習當中,發現自己最喜歡A,然後也會恍然大悟,原來我沒有這麼喜歡B之類的感覺。
  • 老實講大三大四我過得還蠻辛苦的,當時很緊張地想要把程式的基礎學起來,更希望自己有實戰經驗...,還有自己課內的事情要處理,不過也是能學多少算多少,最糟的情況也不過就是失業幾個月好好找工作之類的,但是該學的還是要學,當時是希望自己可以達到資管系的水準...。
  • 學歷跟科系,的確有點影響,因為有些前端職缺我根本沒辦法丟,已經標榜要資訊相關科系了,這點至今仍然是吃虧的Orz..,老實說,籌碼太少了,當時學歷不高也沒經歷。
  • 不要捨不得花錢,該投資自己的時候,就是該花錢...

(以上僅供參考...)

每個人要的不同,很多事情,不能一下子就想要得到,還沒學會好好走路的時候,別想著飛,到現在我還有很多地方要學,我有時候也覺得很受挫,並不是找到工作了就輕鬆了,還是要一步一步來..。


本文純粹心情抒發,><

2013年6月3日 星期一

建立github.io專頁

最近看到好多人都有這樣的網址:

Http://[username].github.io/[repo name]

上網搜了一下,原來這是github提供的一種功能,如果你的Repositories有html頁面,可以利用github.io,轉換成html頁面,至於怎麼轉換,其實就是另開一個叫做gh-pages的branch,而不只是在github上看code。恩..不過它到底能做多少事情,我並沒有仔細研究。

P.S:自從會了這個東西我對git的敬畏程度又大加分了!><


  • 情境二: 為了開github.io而開新的Repository

    這種方法就是官網help頁面上面寫的Automatic Generator,也就是自動幫你產生好html頁面,走情境二方法的民眾可以看看這一頁(Creating Pages with the automatic generator)

    我只需要做:
    1. 在自己的github頁面,開新的repo,並且設定該repo的setting為Automatic Generator,接下來就是ㄧ連串奇妙的事情...
    2. 選樣版(Layouts)
    3. publish 發佈他...
    4. 我是發佈之後,在git clone下來修改html,然後再git push。

    Ex: http://winwu.github.io/resume/ 
    (<--這個UI很明顯的我是用github上面有的樣板來套用xd)

2013年6月2日 星期日

[小嘗試] 畫組織圖..

最近我看到一些網站,很多地方都是字,唯獨組織圖是用"圖",然後就在放大/縮小頁面之間,顯得很不協調,因為字太清楚,而圖卻模糊了,而且這代表著,如果人事有改變,就要有人負責去maintain那張圖,重繪,然後上傳到網站嗎?,然後我心裡就想說,試試看用html去畫組織圖,於是就做了這件事情xd

只是想嘗試一下而已,至於有沒有人這樣做過,我想應該是一定有..,只是我就想要自己來試一下:P,然後感覺起來還不錯,至少字很清晰的,我比較習慣於看的清楚的畫面xd

Check out this Pen!
不過一開始我沒有自己畫mock-up(很久沒碰photoshop..), 就直接開notepad寫了><
這個Demo畫面,都是寫hard code,刻ul>ol的格式,
然後困難度的部分,我想要畫到很複雜的組織圖,會需要很多時間研究,
如果想要從後端接資料來顯示,
那個json的格式,很容易走到一個誇張的境界,應該沒有這麼簡單(我猜的


Demo圖:若有個人詳細資料時,hover時會出現



Demo圖:hover到整個department時,框線改變


其實是蠻有趣的,值得花時間研究更多方法,呵呵

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...