HTML 5 中的資料屬性

<li id="mainAccount" data-target="accountLayout">主帳號</li> JS上可以: var mainAccount = document.getElementById('mainAccount'); console.log(mainAccount.dataset.target);

css可以當作一個屬性:

{ content:attr(data-target);

}

li[data-target="accountLayout"] {

} 連結: https://pjchender.blogspot.tw/2017/01/html-5-data-attribute.html

gulp自动添加版本号

為什麼要添加版本號呢?因為用戶會暫存CSS，所以請求網址不一樣，瀏覽器就會重載，用戶才不會一直用到舊的貨
總之，因為時代變遷，但專案還是舊舊的，所以要現在比較少人用的gulp了
附上比較新的連結
https://www.qianyanqianyu.com/?p=14

ajax檔案上傳

之前有做過圖片上傳，把遇到的事情記下來

用post方式傳檔案

<input type="file" name="myfile">

我後端用PHP抓不到

$_FILES["myfile"]["name"]

換這樣

<input type="file" id="myfile">

就抓的到了

居然是吃ID(是我見鬼嗎)，這樣對嗎?



換ajax傳檔案

<input type="file" id="myfile">

我後端用PHP抓不到

$_FILES["myfile"]["name"]

換這樣

<input type="file" name="myfile">

換這樣就抓的到了

變正常吃NAME了

$("form").submit(function(e) {

e.preventDefault();

var formData = new FormData(this);

$.ajax({

url: '/123.php',

type: 'POST',

data: formData,

success: function (data) {

},

cache: false,

contentType: false,

processData: false

});

});

這樣欺負我QQajax傳檔案用formData來做

要注意:

through FormData object, but unfortunately it is not supported by all/old browsers.FormData support starts from following desktop browsers versions. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

附上ajax傳檔的連結:

http://www.jianshu.com/p/46e6e03a0d53
https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload
檔案加資料一起傳
https://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax

我常用的IDE功能

因為coding的年齡來不算太長，所以工具也不算熟用
用過
notepad++
eclipse
sublime
netbeans
visualstudiocode
我工作時間還不到兩年，所以有些只用了1個禮拜，有些用了幾個月，最長的也不到一年...
以下列visaulStudioCode，常忘記但會用到的快捷鍵，

ctrl+k+[
摺疊，可以幫我把所有的function摺起來
ctrl+u
游標回到上一個位置
shift+alt+f
格式化code
shift+alt+滑鼠左鍵
多游標操作
shift+alt+↓
複製上一行
ctrl+tab
切換到上個頁籤
ctrl+shift+\
游標跳到對應的括號
上頁下頁  alt +←    alt +→


內建貼心功能
/**    在function上方打，就會出現format好的註釋，非常方便


外掛功能
Align   ctrl+alt+a   將code像表格般對齊

在 vscode 1.8 版本增加了如下两个快捷键配置
自定义快捷键配置中 keybindings.json 增加如下代码即可

    {
        "key": "ctrl+shift+u",
        "command": "editor.action.transformToUppercase",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+shift+l",
        "command": "editor.action.transformToLowercase",
        "when": "editorTextFocus"
    }

https://www.zhihu.com/question/48779613/answer/146510029


http://qingbob.com/visual-studio-code-tips/

https://www.zhihu.com/question/37623310

快捷键大全
http://blog.csdn.net/crper/article/details/54099319

javascript動態改變樣式

我們都知道添加CSS的方法有3+1種

行內套用 (Inline)
嵌入套用 (Embed)
外部連接套用 (External Link)
匯入套用 (Import)
https://www.1keydata.com/css-tutorial/tw/apply.php#link



但是要動態改變css該怎麼做呢?

1.改變行內套用(最基本的)
2.改變外部連結套用
通过改变外嵌CSS样式文件即时改变网页样式
http://blog.csdn.net/johnsuna/article/details/4346258

3.改變嵌入套用
YUI中使用了一个很好的办法：style.appendChild(document.createTextNode(styles));采用createTextNode将样式字符串添加到<style>标签内
http://www.css88.com/archives/4426


https://stackoverflow.com/questions/4232557/jquery-css-write-into-the-style-tag

css3反轉HTML順序

https://stackoverflow.com/questions/25695000/how-to-display-a-reverse-ordered-list-in-html

1.You could rotate the parent element 180deg and then rotate the children elements -180deg.
2.Alternatively, you could use flex boxes along with the order property.
3.you could also use counter-increment along with a psuedo element.(this isn't technically reversing)
4.It allows you to reverse the order with the flex-directionproperty.
5.<ol reversed>(this isn't technically reversing)


有的時候因為有太多的板，HTML順序不會因為要改個皮而重新排版，此時就很考驗美術的想像力了QQ

取出form表單的參數，用來放進ajax傳送

記一下...關於JQuery 的 serialize / serializeArray / parrm :

1. serialize()方法也是作用于一个JQuery对象，它能够将DOM元素内容序列化为字符串，serializeArray()方法不是返回字符串，而是将DOM元素序列化后，返回JSON格式的数据

2.在JQuery中还有一个与serialize()类似的方法--serializeArray()，该方法不是返回字符串，而是将DOM元素序列化后，返回JSON格式的数据。

3.$.param()方法是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化 https://stackoverflow.com/questions/9267072/jquery-serialize-an-object

http://blog.csdn.net/baidu_31333625/article/details/72628418

https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery

跨域的請求會請求兩次?

為什打開F12我的請求會有兩次，爾且第二次才有回應?


In CORS, a preflight request with the OPTIONS method is sent, so that the server can respond whether it is acceptable to send the request with these parameters

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS





原來是因為ajax異步的關係

https://forums.asp.net/t/2068723.aspx?AJAX+called+twice+and+success+event+runs+second+time+

我跳槽javascript的經過

說是跳槽也不算啦，因為老闆是同一個，只是做的東西不同。

事情是這樣的：
就在今年的3/6我在台北開始了我的第二份寫程式工作，工作內容跟我第一份非常相似，薪水也是我在中部可以領到的薪水，就在試用期兩個月的時候，說要提早轉正，這樣我有端午禮金，但是試用期過後我薪水沒有漲.....因為面試時我填的預期薪水就是試用薪水，我心裡想你早說我就不會來這家了........
人事問我說:你怎麼轉正看起來沒有開心的感覺
我怎可能開心得起來QQ
原本預計的薪水試用期過後會多三千，結果沒有!!!
基於繳完房租繳完押金我怕找工作時間會活不下去，我就跟人事說，滿半年後我會再提加薪一次(心裡想說，在不加就走人)

所以差不多在8月份的時候我跟同事聊到想加薪，因緣際會之下老闆知道我想加薪.....，
跟我說
"他知道我來台北是想要學東西，前半年讓我在這間是磨練，如果要加薪的話，可能要到他另一家公司，因為這間是他和別人合夥的，不能說加就加"
於是我當然好，雖然目前這家很爽，雖然過去特休要重計，雖然過去比較責任制，雖然過去每天上班40分下班40分的車程，雖然過去要交通費，但是這邊薪水真的太少(沒辦法我有租房又要給家用)，爾且終於跟面試的時候講得比較像了   "想學東西跟我學就好"  面試時老闆霸氣拋下這句話，我至今沒有忘...。


於是8/11號就到了現在這一家

終於要碰新東西了，我在這間變成純前端，當然偶爾還是要還是要幫忙PHP專案，但是就不用像之前這樣兩邊都碰都不精了，現在薪水扣掉交通費還有1000多，希望試用期過後有加薪喔(不然就要哭回中部了)

之後再來寫這3個月在新公司的歷程.....

依賴管理工具

PHP有composer
javascript 有npm

兩種東西大同小異，只是語言不同
另外有個東西叫做yarn因為npm不好用而出現的，
你可以用npm下載yarn之後拿它來取代npm  XD


阿然後
javascript因為有分前後端，前端有些專案也很多包
前端所以有了
bower
之後因為JS進步速度實在太快，又是時代的眼淚
bower沒人用了改用Browserify  或Webpack

是不是覺得js煩
是說npm也一直在進步，之後當然是以npm能夠包全部為主，就有點像CSS和SCSS的感覺，有可能學這麼多，進步趨緩之后，只剩下npm??



JS更新太快，改來學python好了??


從零開始: 使用NPM套件
https://medium.com/html-test/%E5%BE%9E%E9%9B%B6%E9%96%8B%E5%A7%8B-%E4%BD%BF%E7%94%A8npm%E5%A5%97%E4%BB%B6-317beefdf182



javascript 依賴管理  講的歷史脈絡清楚
http://bearcatjs.org/%E5%8D%9A%E5%AE%A2/index.html

http://cyj.me/why-seajs/requirejs/

datatable的thead 會跑掉

在建立dataTable時，發現如果設定
scrollY:'420px',
爾且又將table包進
boostrap 的 tab-pane裡面時
thead 會跑掉
相關文章
https://datatables.net/forums/discussion/14342/column-header-not-aligned-with-column-data-with-horizontal-scrolling/p2
thead縮成一塊
https://datatables.net/forums/discussion/2148/header-width-issue

我是將
scrollY:'420px'刪掉即解決

Column width issues with Bootstrap tabs
https://www.gyrocode.com/articles/jquery-datatables-column-width-issues-with-bootstrap-tabs/

用composer 裝東西

composer require 套件名:版本號
composer  global require 套件名

上面兩個命令不同的地方在於

第一個是加入composer資料夾到當前路徑，像是twig這種模板引擎，生成之後我們只要require autoload.php就行了

第二個是加入到composer主程式的目錄下，目的在於像是laravel 這種有出一個laravel.bat這種安裝程式的，這樣將C:\Users\stanley\AppData\Roaming\Composer\vendor\bin加到環境變數之後
在cmd 輸入 laravel new 專案名

composer remove 套件名 (不用加版本號)
這樣就能完美移除不需要的套件

參考至:
https://henry255164.gitbooks.io/laravel_reviews/content/article1-1.html

關於那個被淘汰的iframe

IFRAME就像是新開了一個瀏覽器視窗，我遇到的困難有，它吃不到父頁的CSS，所以你IFRAME裡面也要有樣式，不然就只是HTAML的話會很醜

投機的方法:
iframe 怎么继承父页面的 css 和 js
https://zhidao.baidu.com/question/1431345202657576579.html?si=2&qbpn=1_2&tx=&wtp=wk&word=iframe+%E6%80%8E%E4%B9%88%E7%BB%A7%E6%89%BF%E7%88%B6%E9%A1%B5%E9%9D%A2%E7%9A%84+css+%E5%92%8C+js&fr=solved&from=qb&ssid=&uid=bd_1470676649_773&pu=sz%40224_240%2Cos%40&step=2&bd_page_type=1&init=middle

題外話?上面有人另外提到PJAX
那麼你聽過PJAX嗎?





詳述了IFRAME的強大應用
https://segmentfault.com/a/1190000004502619


理解簡單又強大的IFRAME之後
如何不用iframe做到隔离js和css？
不能。本来上个世纪早就可以了，但是大家都不肯使用IE5.0提出的Html Component。过了20年，别人终于把这个东西重新改了个名字要添加进标准了。题主再等几年吧。
https://www.zhihu.com/question/50482611

autocomplete失效

It appears that Chrome now ignores autocomplete="off" unless it is on the <form autocomplete="off"> tag since v34.

話不多說，附上連結:
https://stackoverflow.com/questions/31612867/autocomplete-off-not-working-in-chrome

寫CSS

 Sass, LESS, Stylus
這三種CSS的預處理器，可以讓我們輕鬆寫CSS，不必一直複製貼上
https://www.keycdn.com/blog/sass-vs-less/

寫完之後，懶惰的你如果不想用npm安裝東安裝西，這裡有個UI介面的軟體可以幫你編譯

歡迎無尾熊!!!!!!
https://www.minwt.com/webdesign-dev/html/12059.html

是說看看下面這篇!!!!!
SASS, LESS 退散，原生 CSS 可以使用變數啦！
時代的眼淚阿，WEB的進步飛速，我都想哭喔
http://muki.tw/tech/native-css-variables/

開發手機用網站

大概從高中畢業以後開始有了智慧型手機，大學3年級時，手機開始普及，身為原始人的我，則是到當完兵才開始用智慧型手機，總之大學畢業已經五年了，這段期間WEB方面又有了多少改變，想一想有點感傷QQ

手機有瀏覽器，手機用的網站一個網址，電腦用的網站一個網址，前端偵測完之後轉跳，兩個網站CODE也不同，但這樣維護起來超麻煩，


RWD
同個網站，依照視窗大小來呈現畫面，所以CSS幫了不少忙

AWD
我server判斷你是哪種用戶，吐出不同程式碼給你，蝦?不是改CSS就好嗎?幹嘛改後端的程式?


AWD還是有必要的，舉個例子來說，你的javascript要載jQuery，對手機來講負荷太大了，你想要換載jQuery Mobile ，總不是又兩個不同的網頁吧，後端判斷裝置再來改相對應的資源就好

像是大陸偏遠地區連到不同國家的網站，有些網速會特別慢，載那大的庫會哭出來喔..........


講到這個就要來講一下

『手机浏览器同时响应请求为4个请求』这个说法来自于哪里？

安卓浏览器为例，最大并发连接数是4，并不代表打开一个网站时，只能同时开4个连接，而是对同一个主机（主机名和域名相同）只能开4个连接。
參考至:
https://www.zhihu.com/question/47019814

跨域請求

基於安全性的考量，當你發出的請求跟你現在網站頁面的網域不一樣時，瀏覽器是不會允許的，是為了客端使用者的安全


如果你是開發人員，在本地端你可以這樣做:
chrome设置--disable-web-security解决跨域


但是你不能要求使用者也跟你這樣做:

所以你可以在server 上面做設定
https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Access_control_CORS


在不然身為開發人員的你，主機也不是你管的，但CODE是你管的:

可以用jsonp來做





https://segmentfault.com/a/1190000004682473

PUT/DELETE 被擋

新站點換新SERVER，此時有些路由被擋了，請網管關掉囉~~~


PUT/DELETE方法从语义上来讲，对资源是有破坏性的，PUT更改现有的资源，而DELETE摧毁一个资源，带有破坏性质的方法有时候会被防火墙或者IT管理人员特别关注


參考至:
http://www.bijishequ.com/detail/163617?p=56-50

PHP 匹配中文的正規表達式

php中utf-8编码下用正则表达式匹配汉字的最终正确表达式——/^[\x{4e00}-\x{9fa5}]+$/u

參考至:
http://www.thinkphp.cn/code/642.html

安裝多個XAMPP

http://webdevzoom.com/install-run-multiple-xampp-windows/

改PORT就行囉

PHP實作websocket

http://zxaustin.blogspot.tw/2016/08/php-xampp-websocket.html

跟著上面做就成功啦，主要是因為前端要對接server走WEBsocket，server那邊是JAVA啦，但總覺得PHP有應該自己也要架一個來試試看

xdebug安裝

https://xdebug.org/wizard.php

之前要裝Xdebug都不知道要載哪一版，官網有提供分析工具，只要將phpinfo();的內容複製貼上，該頁面就會提供載點^^

PHP圖片上傳功能

來工作了那久，第一次有機會做到圖片(專案內容是證件照、銀行卡..)上傳功能，想想上傳功能要注意的點有哪些

1.權限(你的圖片不想給別人看)
2.安全性(用戶如果上傳病毒阿我要怎辦)



權限的部分:
系統管理者那些要看當初權限怎麼設計的，我們是資料庫、session、router相互配合。
不希望用戶登出的時候還能存取圖片，那這樣就要靠PHP來輸出圖片了。
https://blog.allenchou.cc/php-img/
判斷是否為圖片檔的三個方法
http://kuanghy.github.io/2015/11/25/php-isimg
圖片簡單壓縮
http://www.15jb.net/php%E5%AF%A6%E7%8F%BE%E5%9C%96%E7%89%87%E5%A3%93%E7%B8%AE%E7%9A%84%E5%85%A9%E5%89%87%E5%AF%A6%E4%BE%8B


儲存部分:
資料夾位置，盡量不要放在網站目錄下，因為萬一沒設定好，怕透過URL直接存取，像存取你首頁的圖片一樣簡單。
我會把用戶資料夾的"相對路徑"放到資料庫，讓用戶可以讀得到自己的圖片，相對路徑是因為資料夾可能會移位，不希望一動資料庫的欄位都要改

安全性的部分:
server端可以設定該目錄底下為"可讀"  "不可執行"
這樣如果上傳病毒SERVER也不用怕，客戶端就自求多福
https://technet.microsoft.com/zh-tw/dd632964.aspx
http://www.blueshop.com.tw/board/FUM20041006152627A9N/BRD20110515232653FL6.html

6個”檔案上傳”功能的資訊安全風險與防護
http://www.qa-knowhow.com/?p=1472

前端拖曳上傳功能，是說前端有套件可用喔..
http://code-beginner.logdown.com/posts/313821



因為若由 php 去讀取檔案內容並輸出 , 若流量大其實對系統也是個負擔
所以可以用一些 web server 特異功能
可以去Google 查一下 "lighttpd sendfile" 或 "apache sendfile"
可以用一串 header() 丟給 web server 去傳輸指定檔案 , 效能會快很多
https://twpug.net/discussion/5662/%E9%97%9C%E6%96%BC%E5%A6%82%E4%BD%95%E4%BF%9D%E8%AD%B7%E5%9C%96%E7%89%87%E8%88%87%E5%AD%98%E5%8F%96%E6%AC%8A%E9%99%90



以上為蒐集的資料~~~

怎麼傳JSON格式到后端PHP

會有這樣的想法是因為，jquery的ajax 用法裡面，可以直接傳JSON格式過去的，那就好奇到底要怎麼取這個JSON呢?



用這個啦
file_get_contents('php://input');

這就可以取出你傳來的所有INPUT囉
不用特別用
$_POST
$_GET
$_REQUEST
來取會取不到


參考至:
https://stackoverflow.com/questions/19004783/reading-json-post-using-php

php slim 框架設定的router沒作用

工作的時候用slim 來做RESTful專案，然後就因為更新的XAMPP之後設定的路由就失聯啦，


結果是因為.....
Apache 从2.2升级到 Apache2.4.x 后配置文件 httpd.conf 的设置方法有了大变化

我在自己的httpd-vhosts.conf改這樣就OK囉

AllowOverride All

Require all granted

參考至:

https://oceandlnu.github.io/2016/08/25/Apache2.4%E6%9C%8D%E5%8A%A1%E5%99%A8%E6%9D%83%E9%99%90%E8%AE%BE%E7%BD%AE%E9%97%AE%E9%A2%98/


https://blog.longwin.com.tw/2014/03/apache-22-24-upgrade-conf-2014/


https://stackoverflow.com/questions/12343466/always-get-404-error-in-slim-framework-when-omitting-index-php-in-url





這篇主要是講加上meber.php/add/1像這樣路由就成功，實際上這樣加上附檔名我也成功但是不是原本路由功能阿....好醜
https://stackoverflow.com/questions/9747640/slim-framework-always-return-404-error

chrome 開發者模式滑鼠不見的情況

工作中常會遇到一些莫名其妙的事，導致工作時間的拉長.....


上網查可能是因為顯卡，一些雜七雜八的原因
解決方法


沒有根治，只是換個做法

打勾以後，按F12滑鼠就不會不見囉



參考至:
https://www.zhihu.com/question/48587059

這篇說的嘗試失敗.....
https://www.mobile01.com/topicdetail.php?f=743&t=4462465

新工作新環境

2017/03/06到了新公司上班，開始安裝環境
1.裝php7
2.裝nginx
3.裝laravel


在上面幾個任務之中，需要注意的有幾項

Q:安裝完之後，進入網址列打上網址，nginx不認得.php檔
A:因為nginx透過fast-cgi溝通，所以需要啟動fast-cgi(詳情參考網址)

Q:nginx -t出現bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions)
A:可能是skype衝到，進skype設定換掉80port

Q:nginx和fast-cgi想要開機就執行怎辦
A:關鍵字→runhiddenconsole(詳情參考網址)

Q:安裝laravel 讀不到laravel這命令?
A:環境變數沒設好(詳情參考網址)

Q:需要在本機架多個站點，設定完卻出現No input file specified
A:因為nginx虛擬主機設定檔沒設定好(詳情參考網址)

參考自:
http://abcg5.pixnet.net/blog/post/114727133-windows-server%E4%B8%8A,%E5%9F%B7%E8%A1%8Cnginx-%2B-php-7

http://it-life.wyx-ccy.com/2016/05/laravel-windows.html

http://xiahongyuan.blog.51cto.com/906214/852424

http://blog.openlg.net/index.php/archives/266