2012年12月27日 星期四

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

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

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

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

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

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

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



於 沒有留言:

2012年12月21日 星期五

HTML5聽演講心得@moko365

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

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

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

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

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

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





於 沒有留言:
標籤：

2012年12月18日 星期二

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，可以做個參考。
圖片來源(截圖自) : http://www.campaignmonitor.com/css/



其他連結 :






於 1 則留言:
標籤：

2012年12月16日 星期日

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(因為都是新增的檔案)


這個圖就是說...當我把我要放到repo的資料複製到local資料夾時，github也會同步那個資料夾的內容。
接下來要補一個檔案就是REAME.md
自行新增檔案就可以了，只是副檔名是md

然後寫些內容再README.md

當我又新增了README.md之後，github那邊的清單也同步了。
接下來我填寫了右邊的表單，按下commit之後

出現了這個錯誤。
這個錯誤就是說，我必須更新我的github global的設定，如果跟我一樣有遇到這個問題，就跟我往下一樣做吧。

選擇選單的tools
選擇opem a shell here

接著就會開啟git shell
重新設定我的git config --global user.name跟git config --global user.email
這部分可以看 Git 教學(1) : Git 的基本使用

設定完成之後呢，在照上上個步驟，重新填寫uncommit changes的表單按下commit之後
就會看到這個畫面了。
右邊可以看到他寫unsynced commits
主要是因為只有commit到local，我們還要publish


接著就按下publish


上傳成功之後，
publish字樣會變成in sync，而且也可以從github網站看到自己的東西已經在上面了。


github網頁上面看到的畫面:
而且可以看到網頁上README.md的內容就是剛剛自己在電腦local端打的內容。


接著再將鏡頭拉回github，當剛才的版本都上傳到local->publish之後，右邊原本應該有的表單變成了no uncommitted changes。這是因為現在你的local檔案沒有做什麼修改，與publish上面的版本一致，所以不會有那個讓你commit的表單。
所以我測試一下修改local的README.md的檔案

將README.md修改成:

修改完後，再回到github，就會看到uncommitted changes的表單又再次出現了
而且左欄區域也告訴我我修改了哪個檔案
以什麼改變等等，
按下COMMIT
接下來的步驟就跟前面差不多了

COMMIT後多了第二次的commit資料
然後剛剛的commit是unsynced commit，只要按下sync就可以了

正在sync(上方)
in sync (下方)



完成! ~
於 沒有留言:
標籤：

安裝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。
於 沒有留言:
標籤：

2012年12月15日 星期六

難以理解的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';");

成功撈到資料:
SELECT * FROM `manager` where `acc`='win' and `pwd`='admin_win';Resource id #6Array ( [id] => 2 [acc] => win [pwd] => admin_win [user_name] => WinWu [last_signin_time] => 0000-00-00 [create_date] => 2012-12-14 )

不曉得發生甚麼事情，就是一直跌跌撞撞，我記得第一種寫法我以前寫過是成功的.....
不管了，總之，完成了!~

於 6 則留言:
標籤：

2012年12月1日 星期六

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

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



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



javascript code:
function DYI_uploader(){

/*

 *real means the id/css for reak file input type

 *fake means the id/css for fake text input

 *upbtn means the button

*/ 

    var $r = $('#real_upload'),

        $f = $('#fake_file_name'),

        $f_btn = $('#upload_btn');


    $f.attr('value',$r.val());


    $f_btn.click(function(){


        $r.click();  

        //when we touch fake btn,we also need lie brow
          ser let we touch the real file input

    });
    
    
    $r.change(function(){

            $f.attr('value',$r.val());

             //console.log($f.attr+""+$r.val());

            });

            
    $('form').submit(function(){

        if($f.val()!==""){

         return true;

        }else{

        return false;

         //console.log('plz select a file to upload');

        }
    })
    

}

DYI_uploader();

此作法的缺點 :

1.僅IE不支援， 並不是javascript的問題，而是IE本身基於安全性的考慮，input file必須手動去觸發click事件。

==> 解決IE不能直行自製upload button的問題，我只有兩個結論

A : 將觸發事件寫在行內，可以在IE執行，像這樣 :
    <input type="button" id="upload_btn"  
      onclick="browse.click();file.value=browse.value;browse.disabled=true" value="Select a File">
     缺點是，只能觸發一次，第二次就無法更改file的value....

B: 捨棄在IE用自製Upload file


更好的方法我還在尋找......
希望有辦法找到更完美的解決方式。

相關資料請參考: 
Google關鍵字:自製input file,input file
收藏 input file 文件上传控件隐藏后用button触发它的click事件
[jQuery]外掛特輯11:filestyle-美化input file的好幫手
將onclick寫在行內的參考來源 :
input file的CSS设定
於 沒有留言:
標籤：
訂閱： 文章 (Atom)

Vue multiselect set autofocus and tinymce set autofocus

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