發表文章

目前顯示的是 2012的文章

時間就是不夠用之快過年了

這個月把好多時間放在看一些書籍以及關注是否有哪些演講上,沒有好好的學JavaScript......,所以也沒有甚麼技術或是心得筆記,關於技術這回事,學不完,而且最近也有點疲憊,我有一種不曉得該怎麼樣才有辦法繼續精進能力的心情與動力...,所以選擇先停下腳步做一點其他的事情。

看的書最印象深刻的就是 松本行弘的程式世界:成為一流程式設計師的14種思考術以及 人月神話 這兩本書,不過說實話,兩本我都沒有吸收得很好,松本行弘那本對我來說頗深,不過激起了我的Ruby的興趣倒是真的,看完沒幾章節就上codecamedy學基礎Ruby,裡面講了他為何想要開發Ruby,以及它融入了不錯的功能在Ruby,我想這應該是要學過不少程式語言的人才做得出來的偉大工程吧! 。

人月神話呢,這本經典書籍怎能不看呢,好不容易預約到了。
但因為我不是PM,也不是RD,只是當出社會的半年年資小前端,但是真的是吸收了不少很棒的知識,前人的經驗告訴了我們那些錯誤還是不要犯錯比較好,對於一個專案真正寫程式的時間應該要只佔1/6,因此專案的事前規劃非常重要 ; 有些事也是急不得,一個程式可能本來就需要花相當的時間去完成,多找幾個新手來寫也是一樣,這個比喻就好像生一個小孩需要9~10個月,多找幾個人來幫忙,也是需要等9~10月是差不多的道理,而且在一個已經delay的專案增加人力只會使專案更加拖延。

不過上面兩本都有提到類似的想法就是,不管花多少時間寫程式,寫出來的行數會是差不多的,因此,如果使用比較高階的語言開發,生產力可以提升好幾倍。這也是為甚麼有人會使用Perl, Ruby等語言做開發,因為同樣的時間寫出差不多的程式碼,那麼選擇開發較快速的語言,就能夠提升相當的生產力。

另外一本,史帝夫.賈伯斯vs 比爾.蓋茲:兩大天才CEO的事業領導能力 ,這本也是很不錯,很快就看完了,不過這兩位領導人的故事從小看到大,不便再說什麼心得了xd,只是說....看完這本只會更擔憂台灣資訊產業的前途,我沒想到這本書最影響我的竟然是推薦序,推薦序提到,台灣近年來走代工已經走到茅山道士(意思就是毛利3%~4%),台灣若不再做出一些創新或整合,的確很堪憂阿...,我好喜歡這篇推薦序~,台灣加油啊!我不想失業...。

先這樣吧,2012就這樣快要過去了,希望明年可以持續在台北這個異鄉,學到東西!



HTML5聽演講心得@moko365

圖片
(又是一篇聽演講文了....)
講座資料 : HTML5 應用開發第一課:多屏 UI 技術與標籤
日期: 2012/12/19

這次為了聽這個演講還送了一張特休假單出去,還好,內容都是講到我想聽的部分,我覺得很幸運,這是來台北工作讓我感到高興的事,就是可以聽到很多專注於某方面的研討或是講座,雖然常常也會因為擁有很多機會跟資源,但卻沒有很多時間可以吸收,這方面就只能靠時間來累積了....。

這次活動的主講是Jollen老師,主講者在表達一件事情的邏輯非常清楚,尤其對於javascript的講解非常精闢,(對不起我不是在打廣告,但是聽了之後真的有種被敲醒的感覺),看來我必須多努力一點了xd。

自從這幾個月來聽了一兩次的演講,我發現那些闡述一件事情非常清楚的人,是因為他們真的非常透徹的了解一件事情,而且念書也是很有方法,所以才能一針見血的講出一件事的重點是甚麼,也能指出為甚麼你沒辦法學好那些事的原因是甚麼,所以多了解別人的學習脈絡&方法,也是很重要的事情。

聽演講附送精美講義,後面還附有node.js的介紹,真是太吊人胃口了,我原本很期待可以聽到後半段的node.js,可惜時間看來不夠。

有興趣的人,可以期待之後的第二堂課!





HTML製作edm的技巧與問題

圖片
不管是系統通知信/電子報,還是會員註冊成功的信,總之只要是寄到他人信箱的信,
都要注意很多地方。之前UI曾經給我的畫面是,他希望使用者收到的edm之後,裡面還要有hover行為,真是嚇死我了(收信的mail system會有過濾的機制,機於郵件安全性的考量,所有JavaScript會被過濾掉,包含所有的監聽事件)

光是要兼容大部分的信箱可以看到幾乎一樣的畫面就已經不是ㄧ件簡單的事情了...
最後找出來的原則就是 :

以table排版Inline styles are still king with email=>任何CSS都要寫在行內margin如果沒有作用,高度用<br>替代,寬度用border-left:20px solid transparent(用透明顏色產生一個假的寬度)圖檔勿過大所有的文字或是有超連結的文字,要設定css的color,因為在某些信箱會把顏色跳成很一般的藍色跟紫色
這篇文章提供了非常仔細的描述EDM郵件製作規範完整版 (2011-08-21 14:54:44)
我想我寫再多也不會超過他,如果我還有機會碰到製作EDM,有什麼怪異的點我會再把他記起來。

如果寫行內樣式還是無法解的問題,可以參考這個網站 :
裡面有哪些信箱系統支援/不支援哪些css,可以做個參考。



其他連結 :

Outlook 2007, inline styles, and linksOutlook 2007 losing font-family declaration (如果你在Outlook有設定css字型的困難)




PHP-登入登出功能的練習

圖片
該是時候好好地複習我的PHP了.... ,說起來有好一陣子沒碰它了(退步了不少....),差不多....也要半年了吧(埃,說來話長),我好怕我就這樣不小心忘記最基礎的事情,即便我覺得現在有很多現成的MVC可以用(而且我也不太會用,哈哈,我常常覺得進入到MVC又是另一個PHP的等級了,而且有時候明明照著MVC的規則走,雖然那些規則不是100%都要完全聽信,但還是要看團隊是怎麼規劃該案子的MVC,免得被誤認為沒學好MVC-->我就是其一受害者xd)

但是我還是習慣自己把邏輯繞出來一下....所以我決定第一步先做登入登出的功能
說實在我之前也沒練習過登入登出的功能,因為這個很基本的東西一進去公司人家都寫好了

目前的流程是這樣 : (希望沒畫錯)


資料面 :
建立一個db_win的資料庫
建立一個manager的資料表

畫面說明: php檔案的規畫採拆檔然後用include的方式匯入其他區塊: 將<body>以上的內容拆至top.php將</body>以下的內容拆至footer.php將上方menu內容拆至header.php 這個是首頁畫面(index.php),也就是登入畫面,採用bootstrap(:P 因為剛好在官網看到可以做登入畫面的example),就拿來用一下了,都裝潢好了。


如果輸入錯誤訊息則出現alert區塊。

成功登入的畫面,(登出就如同未登入畫面)

以上所有的動作都在index.php進行,以$_GET/ $_POST/ $_SESSION等去做操控。
原始檔路徑  https://github.com/winwu/my_cms_login   (用剛才練習的github放上去了xd)
包含sql檔也在裏頭,這樣也可以達到讓我不管在哪裡用電腦只要下載下來都可以繼續編輯的好處。

容易出錯點 :
1)忘記加session_start()
2)session_start()的位置與unset session下在哪邊
3)忘記加ob_start()




用github for Windows建立一個新的Repository

圖片
其實我是個外行人,很少用github(因為這東西,感覺應該是要多人開發才會用到,我一個人要開發甚麼呢!?),不過就是稍微紀錄一下步驟而已,以免下次忘記。
跑過一次用github for Windows建立一個新的Repository之後,我發現比我之前用PC時用git Bash,少下很多指令(不過我覺得兩種應該都要會比較好xd)。
好吧,以下記錄我的沿路截圖,前前後後總共截了25張圖,我到底是在幹什麼~(遮臉) :

步驟一,開啟git hub

然後,目前可以看的出來,我沒有任何的repositories在我的local
(local這個觀念有點有趣xd,關於local , branch, commit, publish甚麼的,我都覺得超特別的)
按下右上 +add,表示你要建立一個新的repo
接下來就是填一些基本資料 寫你的repo的名子(我的是 my_cms_login) 然後寫下描述 第三個路徑的部分,在你邊填repo的名子的後就幫你產生了 記住這個路徑,因為你要publish的東西都會放在那個資料夾 我的(local)資料是放在C:\Users\win\Documents\GitHub\my_cms_login 接著按下下方的create


建立完之後呢,會回到初始畫面的地方,可以看到我的local已經有這個repo了
然後右邊的文字是提醒你,這個repo還沒有readme的檔案,這個稍後會補上。
接著點擊open this repo,就可以看到這個資料夾有甚麼檔案了
然後因為my_cms_login是新建的檔案,所以所有的檔案對於commit來說,都是新增檔案,所以每個檔案右邊才會有綠色的new字樣。
另外.gitattributes跟.giitignore是預設就會有的檔案,並不是我自己加的。

到這個步驟最讓我疑惑的地方是怎麼新增我要新增的檔案到這個repo,後來發現只要把你要放到這個repo的檔案複製到local的那個資料夾就可以了。
然後我就複製過去我github的local的資料夾(C:\Users\win\Documents\GitHub\my_cms_login),
所以現在起來資料夾的東西滿滿滿。

當你local資料夾有新增資料時,github的畫面就會將你local資料夾的內容全部顯示出來。
而且都是new(因為都是新增的檔案)


這個圖就…

安裝github for Windows

圖片
因為我的桌電壞了,然後原本想要繼續研究github 突然發現官網有出github for Windows,就乾脆來安裝在我的64位元的筆電看看!~
進到首頁後就直接選擇download鍵了,其實也沒甚麼其他的選擇
竟然還支援到XP~
下載後就按執行鍵,一如往常的安裝步驟


等待安裝完成之後,不需要做什麼事情,裝完後桌面就會出現GitHub的icon了

然後我點了GitHub之後又出現另一個Git Shell的icon了
(這個Git shell的作用跟CMD/gitBash是差不多的意思,
只是他好像會預設以為你是要使用Git Shell)
 點了GitHub之後就會跳出視窗,請登入(LOG IN)github

LOG IN成功後,可以設定你的global gitconfig,輸入full name跟email之後按下CONTINUE

 完成了。



接下來就是要研究怎麼把東西放上去你的repositories
另外當你完成安裝後,會在信箱收到一封這樣的信
[GitHub] A new public key was added to your account會給你一組SSH key。

難以理解的SQL語法錯誤

今天在家複習php時,在做登入的功能 : (*acc是account的縮写)
明明是挺簡單的SQL語法結果一直出錯 ,太傻眼了@@,我都想搥牆了...

第一次下的SQL語法 :
$sql =sprintf("SELECT * FROM manager WHERE acc=$acc AND pwd=$pwd");
(把整句$sql語法echo出來)
得到的結果卻是 :
SELECT * FROM manager WHERE acc=win AND pwd=You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 1 結論 : 語法有問題。

第二次下的SQL語法 :
$sql =
sprintf("SELECT * FROM `manager` WHERE `acc`='".$acc."' AND `pwd`=admin_win LIMIT 1;"); (把整句$sql語法echo出來)
得到的結果卻是 :
SELECT * FROM `manager` WHERE `acc`='win' AND `pwd`=admin_win LIMIT 1;Unknown column 'admin_win' in 'where clause' 甚麼是 Unknown column 'admin_win' in 'where clause' ???
上網找了一下好像也沒什麼特別的解答,但簡單來說撈不到資料應該都是sql語法下錯
果然將整句SQL語法都echo出來就抓到問題了....
看一看才發現原來是admin_win少了 一對單引號把它刮起來

最後一次下的SQL語法 :
$sql =sprintf("SELECT * FROM `manager` where `acc`='".$acc."' and `pwd`='admin_win…

假上傳檔案欄位[input file]製作心得

圖片
這幾天在我心中爭議許久的問題,就是在瀏覽器,做一個另外設計過的input file
但是,html的<input type="file">,並無法去改變它的UI,即便可以,各家瀏覽器顯示<input type="file">的方式也不一樣。

demo檔案做在這裡 : http://winsystem.zymichost.com/my_btn_tes2/

起初,我的製作想法很單純,就只是參考網路上的做法->
這種事情,我能懂個原理就很了不起了,看還要看各家瀏覽器們給不給面子....
製作一個真的存在的<input type="file" name="browse" id="real_upload">,然後將他透明度設為0,或者偏移他,讓他的position設在使用者看不到的位置,(不能將這個input type="file"的display設為none,在opera跟safari 他們會當作不存在,所以無法觸發以下要做的事情 )再來製作一個<input type="text" name="file" id="fake_file_name">(一個單純的input type="text") 跟 <input type="button" id="upload_btn"  value="Select a File"> (一個單純的button)再來,使用JavaScript去控制,當使用者按下名為Select a File的 button 之後,也去觸發真正的那個input type="file"(雖然我們故意隱藏他),然後再將真正的file的值帶到假的input欄位。


javascript code:
functionDYI_uploader(){ /* *real means the id/css for reak file input type *fake means the id/css for fake text i…

MongoDB學習資源列表

解決IE邊框閃爍有時出現 有時未出現的問題

解決ie邊框閃爍有時出現 有時未出現的問題
在Table外在加一個div
{width:913px;border: 1px solid #F1D03D;min-height:97px}

不要將border設定給table
把border移出來 給外面的div去顯示

這樣講實在很抽象,但我一時也不曉得該怎麼取得到範例跟截下圖片說到我遇到的這個奇怪現象,網路上有些類似情況,請參考 :
IE中奇怪的左右border断线现象_Div+CSS教程
IE加浮动(float)后,滚动时边框(border)消失解决办法
在IE下拖动滚动条时border消失的解决方法

2013 WebConf Taiwan

圖片
活動網址 : http://www.webconf.tw/index.html

WebConf Taiwan
專為網站開發者舉辦的大型研討會


預計12月初開放報名,
才來北部生活不到半年,就可以遇到這樣的活動,太幸運了
講師群實在太驚人了,希望到時候能報名成功。

[個人資料蒐集] 2012-11月份前端工程師所需技能統計

圖片
我不知道為什麼我心血來潮做了這件事情(是不是有點無聊!?),但是也該做,這本來就是我未來想要做的工作,本來就該了解,自從看了掏寶UED的網站之後,我打算有機會也要統計一下對岸的前端技能要求是如何,不能只看台灣,要看世界。

下面的表格我從人力銀行搜到有的前端工程師,以及front-end職缺的公司,以及該職缺所必須有具有的技能,恩...目前, 有稍微打個馬賽克(對不起...我知道這樣看有點不舒服...),不太好意思直接公布,感覺不太恰當><

並不是台灣所有有前端的公司都在這裡,只是碰巧人力銀行有刊登職缺,才被我搜到,若沒公布職缺的公司,其實我沒刻意去找有哪些。
當然啦,有些公司的前端的技能需求有點偏差甚至是太誇張,根本不像前端再做的事,那一兩家我就沒有算在我的統計選項之一了。

統計數量總共22間 (點圖可放大)




上面的圖比較不重要,直接看圓餅圖 (或雷達圖):




前端技能最大的三個part剛好是 HTML + CSS + Javascript ,恩..不意外,很正常,如果不是這三個我可能會嚇到...xd。  



























說實話我還是第一次仔細統計過這件事情,不過很特別的事情是
HTML 跟 Javascript 兩者都是完全100%的必須技能,(恩,好像也沒甚麼好特別的,本來就要會)
但CSS卻不是每家都要這個技能,不知道是忘記寫還是覺得那是基本,所以沒寫,不然就是...我..我看到眼花了@@。

有一家公司很直接的寫需要會MVC,其他家到是挺含蓄的寫如果具有server-side的語言會更好(其中又以php最多),看在我的眼裡,只要包含 "最好" , "加分項目",其實都是必須.....。

然後也越來越多公司需要你具有使用 Facebook API 這樣的技能,恩..這個..我還不太會(淚奔)

Ajax是第四名

版本控制Git , svn..等,看起來有慢慢浮出在技能所需的'加分'條件裡了

下次關注這些職缺的時候可能是
明年 年前年後的時後,如果有甚麼特別的發現,會再做紀錄。

安裝JDK+window7下設定Java環境+學著用yui

圖片
會想要設定java環境主要是想要跑yui compressor。 從安裝jdk在設定環境變數再跑yui的過程非常多步驟,再扣掉失敗又失敗的時間,2hr  只能說非常需要耐心阿。。
首先,先安裝JDK
因為我還是Win7 32位元的電腦所以我選x86
下載完畢後按執行
接下來就有如所有安裝過程一樣...我接受...我同意...下一步.這樣的步驟...






安裝好了後先確認版本 , 在系統管理員輸入java -version


接下來,設定window下的java環境,因為我要跑yui :P 點選電腦按右鍵-->選擇 "內容 "
接著點選左選單 "系統保護"

選擇"進階" 頁籤--->點選 "環境變數"

先到c:\找到剛才安裝JDK的路徑,並且複製路徑

接下來繼續回到設定環境變數的地方,選擇"新增"

新增一個使用者變數,變數值貼上剛才的jdk路徑 ,接著按確定
接下來複製jdk\bin的路徑 
選擇系統變數的path-->點選編輯

在path的變數值最後面加上;再貼上路徑 (中間不能有空白)
接著按確定-->再按確定

測試java,打開CMD, 鍵入javac  若正確執行,表示完成初步的java環境設定
再來,下載yui compressor

下載後,解壓縮,這裡我自己是解壓縮到H:\槽 然後可以在\builder\componebtbuild\lib\yuicompressor這個目錄下,看到.jar的執行檔
然後實驗, 我想壓縮H:\waterfull\style.css的檔案 就可以這樣打 C:\Users\Administrator>java -jarH:\builder\componentbuild\lib\yuicompressor\yui compressor-2.4.2.jarH:\waterfull\style.css -o H:\waterfull\style-min.css --char set urf-8 --type css

指令的部分我是參考:http://blog.longwin.com.tw/2009/10/use-yui-compress-css-js-2009/ 我命名解壓縮後的檔名為style-min.css …