Neil's Note

課程分為 hackPad :  https://hackpad.com/ZWVGk6BFDfn 現代化網頁開發技術三要素 SASS & RWD 前端版型架構規劃 Modern FrontEnd Devops - 104兒童美術館 (cicisasa.com)自動部署上線分享 前端網頁資料視覺化 網頁設計效能優化 現代網頁設計趨勢觀察

這篇是在Javascript.tw社團上有人發問的問題 原理可以參考保哥的 文章 簡單來說就是 保哥 ： 任何物件無論做數值運算或字串相加，所有物件都會先執行 valueOf()，物件如果沒有實作 valueOf() 就會跑去執行 toString() 有更詳細的範例可以直接參考保哥的文章囉

AngularJS 純前端的Framework 適合 UI CRUD SPA (Single Page Application like Shoppingcarts...) 不適合 大量操縱DOM like CKEditor Webgame Why AngularJS? 如果用innerHtml的話瀏覽器還需要重新編譯 關注點分離,單純只看MVC Angular是直接修改ＤＯＭ 免除大量的callback 特色 filter是可以一直串下去的,一樣用 | 串起來 Reference http://ngmodules.org/ https://docs.angularjs.org/api http://www.nganimate.org/ model 存在記憶體的某個變數 從頭到尾掃整個view有套用他的地方,並將改變的值寫回去 dirty check - 頻繁的全部掃描 假設輸入匡內輸入12345,但是可能會觸發controller,所以 至少 會掃5*2次 controller 控制所在宣告的ＤＯＭ的範圍 初始化會先跑一次,透過scope,scope就是model form 內建的FormController DI 相依性注入 JS的數值運算都是用浮點數運算 (0.1 + 0.2) === 0.3 ---->false //2015-12-17 ng-bind-html="item.Description_L" --> 把model的值變成html 不然預設都會做escape ng-change="function/expression" --> 當input值改變時去呼叫function或是expression 感覺好像只有$scope的function才可以被執行(? 用1.4.X版的是這樣 angularJS內建jQuery angular.element('#element').css('height', '100px');

原文引用 http://stackoverflow.com/questions/10024866/remove-object-from-array-using-javascript splice https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice Array.splice(index, delete_count);  //1 someArray . shift (); // first element removed //2 someArray = someArray . slice ( 1 ); // first element removed //3 someArray . splice ( 0 , 1 ); // first element removed //4 someArray . pop (); // last element removed someArray = [{ name : "Kristian" , lines : "2,5,10" }, { name : "John" , lines : "1,19,26,96" }, { name : "Brian" , lines : "3,9,62,36" }] johnRemoved = someArray . filter ( function ( el ) { return el . name !== "John" ; }); // johnRemoved = [{name:"Kristian", lines:"2,5,10"},{name:"Brian",lines:"3,9,62,36" }]

最近因專案需求需要某些資料 但那些資料如果都讓人為來做實在是太可憐了

var arr = [ { key : 'foo' , val : 'bar' }, { key : 'hello' , val : 'world' } ]; var result = arr . reduce ( function ( map , obj ) { map [ obj . key ] = obj . val ; return map ; }, {}); console . log ( result ); // { foo: 'bar', hello: 'world' } Note:   Array.prototype.reduce()  is IE9+, so if you need to support older browsers you will need to polyfill it. from  http://stackoverflow.com/questions/26264956/convert-object-array-to-hash-map-indexed-by-an-attribute-value-of-the-object from  https://lodash.com/docs#indexBy var keyData = [   { 'dir' : 'left' , 'code' : 97 } ,   { 'dir' : 'right' , 'code' : 100 } ] ; _. indexBy ( keyData , 'dir' ) ; // → { 'left': { 'dir': 'left', 'code': 97 }, 'right': { 'dir': 'right', 'code': 100 } } _. ind...

在做專案時很常會碰到要有個功能叫做 "瀏覽過的商品" 在我們系統是使用Log來做 使用Shopper_Id去Log中找出對應的商品ID，然後order by Timestamp desc 因為商品ID在Log中很容易重覆，所以可以使用distinct/group by來處理 但問題來了，明明有使用order by Timestamp desc，但順序卻不是我要的? 這是因為order by的欄位並不在我們的group by/distinct中 該如何解決? 使用order by MAX(Timestamp) desc就可以了 意思大概就是在我們Log中找Timestamp最大的來比對 更詳細的可以看國外高手的文章囉 So what is a workaround for this problem – in other words, how can we be more specific to get what we really want? Well, let’s rephrase the problem – what if we say we want to retrieve each salesperson ID sorted by their respective highest dollar amount value ( and only have each salesperson_id returned just once )? This is different than just saying that we want each distinct salesperson ID sorted by their Amount, because we are being more specific by saying that we want to sort by  their respective highest dollar amount value . Hopefully you see the difference. From: http://www.programmerinterview.com/index.php/database-sql/sql-select-distinct-a...

最近再做專案時有遇到使用window.location時被cancel (透過Chrome console的Network看的) 解法目前是看到用setTimeout..如果有人有更好的方式歡迎跟小弟說一下<(_ _)> 如果有能人懂原理也歡迎告知<(_ _)> setTimeout(function(){ window.location="XXX" }, 3000); http://stackoverflow.com/questions/8566222/javascript-window-redirect-doesnt-work-in-chrome-canceled-status

因為最近在協助設計改一些效果有用到 需求是希望在 <ul class="page_nav-"> <li> <a href="/C28_sofachair.html">客廳沙發座椅</a> <div class="pagemega" style="display: none;"> <ul> <li><a href="/S35_sofa.html">皮沙發</a></li> <li><a href="/S36_sofa.html">布沙發</a></li> <li><a href="/S37_sofa.html">L型沙發/沙發組</a></li> </ul> </div> </li> <li id="except-li"> <a href="/C31_bedroom.html">臥室床組</a> <div class=""> <ul class="funlist"> <li><a href="/S54_zzzz.html" class="pagemega-seleted">單人床組/架</a></li> <li><a href="/S55_xxxxx.html" class="">雙人床組/架</a></li> <li><...

來源 :  http://emn178.pixnet.net/blog/post/95064604-%E8%A7%A3%E6%B1%BAtable-'.-dbname-tablename'-is-marked-as-crashed-and-sh 當遇到 Table './dbname/tablename' is marked as crashed and should be repaired when using LOCK TABLES 原因： 資料表的相關檔案由於不明原因發生損壞，而無法正常存取。 解決方案： 可以使用以下兩種方式嘗試修復資料表： 使用SQL語句 REPAIR TABLE tablename 使用myisamchk 使用命令列進入資料表所在目錄，例如 cd /var/lib/mysql/dbname 執行 myisamchk -r tablename 執行過程中可能會遇到以下錯誤 myisamchk: error: myisam_sort_buffer_size is too small 這是修復過程中所需記憶體空間超過預設的空間，可以利用--sort_buffer_size參數指派更大的記憶體，例如： myisamchk -r tablename --sort_buffer_size=2G

source :  http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery $("#select_id").append($("<option></option>").attr("value","option_value").text("text_value")); 清除select中所有value !=0的option $ ( '#select_id option[value!="0"]' ). remove (); 雖然網路上都有，不過還是筆記一下比較方便囉

想做的功能為對<table>內的<td>中的文字做出編輯的功能 為了方便,藉由點擊2下來觸發dblclick()來去處理

來源 :  http://superuser.com/questions/318420/formatting-a-comma-delimited-csv-to-force-excel-to-interpret-value-as-a-string "= ""Data Here"" " 這樣就可以強迫把欄位全部都轉成字串囉

最近處理匯入CSV時才發現有個更方便的函式 fgetcsv 以前都是單純用  fgets  一行一行處理，但有同事給我csv資料中有欄位有包含\r\n.. 造成用  fgets  會整個大爆炸，所以才意外發現這個 ! 但讀取檔案時發現中文會部分消失，仔細google後才發現原來跟本地設定有關 所以只要再加入一行 setlocale(LC_ALL, "zh_TW.UTF-8"); 就可以解決了 ! 範例: setlocale(LC_ALL, "zh_TW.UTF-8"); $filePath = '/var/www/html/aaa.csv'; $file = fopen($filePath , "r"); while (!feof($file)) { $data = fgetcsv($file); // data為array }

mb_convert_encoding string mb_convert_encoding ( string $str , string $to_encoding [, mixed $from_encoding = mb_internal_encoding() ] ) $str，要轉換編碼文字 $to_encoding ，要轉成的編碼，如utf-8,big5，大小寫均可 $from，原始讀出來的編碼，如UTF-8,BIG5，大小寫均可 mb_convert_encoding($str, "UTF-8"); //編碼轉換為utf-8 mb_convert_encoding($str, "UTF-8", "BIG5"); //原始編碼為BIG5轉UTF-8 mb_convert_encoding($str, "UTF-8", "auto"); //原始編碼不明，通過auto自動檢測，轉換UTF-8

在有著data-keyword_id屬性的<a>標籤上綁定事件 $("a[data-keyword_id]").bind("click",function(){ // do things }); http://stackoverflow.com/questions/8172322/how-to-bind-to-a-elements-data-attribute

原文參考  http://stackoverflow.com/a/17078097/4985012 $ ( window ). scroll ( function () { if ( $ ( window ). scrollTop () == $ ( document ). height () - $ ( window ). height ()) { // ajax call get data from server and append to the div } }); 原文參考 http://stackoverflow.com/questions/3596089/how-to-remove-specifc-value-from-array-using-jquery var y = [ 1 , 2 , 2 , 3 , 2 ] var removeItem = 2 ; y = jQuery . grep ( y , function ( value ) { return value != removeItem ; }); Result: [ 1 , 3 ]

ckeditor的編輯器大小可以在config.js設定 config.width = '100%'; 要來判定上傳的是不是圖片可以使用  getimagesize  這個function 當上傳的並非是圖片時會  return false  上傳成功後會回傳一個array index 0 : 圖片width index 1 : 圖片height 剩下的請參考 官方manual 附上ckeditor內上傳圖片相關code 首先必須將text area的id給取得,之後再該text area上蓋一層div $(document).ready(function(){ CKEDITOR.replace('Store_Info', { filebrowserImageUploadUrl: '上傳圖片的php-code'}); for (var i in CKEDITOR.instances) { CKEDITOR.instances[i].on('focus', function() { if (!is_beforeunload) { is_beforeunload = true; $(window).bind('beforeunload', function (e) { return '資料尚未存檔，確定是否要離開？'; }); } }); } }); 其中Store_Info為textarea的id filebrowserImageUploadUrl則是server-side code處理上傳圖片用 /* * 新增供應商詳細說明圖片的上傳controller * */ public function upload_supplier_detail_pic(){ // ckeditor回傳的參數 $CKEditorFuncNum = $this->input->get('CKEditorFuncNum', true); // 檔案存放路徑 $file_path = I_DOC."/store_supplie...

資料來源 : http://boray06.blogspot.tw/2010/11/php-cache-no-cache.html //php code // Always modified header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); // HTTP/1.1 header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); // HTTP/1.0 header("Pragma: no-cache");

來源網址: http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide

由於公司有需要用到利用FB分享，故來筆記一下 用FB分享連結有三種方式

工作上有遇到必須使用Page Access token取得粉絲團的資訊 特別整理一下 根據 Facebook Developer 上的文件 使用登入的Dialog去讓Page的擁有者去登入/同意使用你的APP(要要求manage_pages的權限) Page擁有者同意後會取得User Access Token 使用User Access Token跟Graph API的 GET /{ user - id }/ accounts 取得short-lived access token 使用short-lived access token從server上去取得long-lived access token (Page Access token)

LOAD DATA LOCAL INFILE 'G:\articles.csv' INTO TABLE database.table_name FIELDS TERMINATED BY ',' ENCLOSED BY '"' LINES TERMINATED BY '\n'; http://stackoverflow.com/questions/11429827/how-to-import-a-csv-file-into-mysql-workbench