2018年8月7日星期二

將DIV內的浮動貼齊區塊，父容器的高度自動撐開

一般來說正常的div，就算沒設高度，子元素也會將父元素撐開
但是當子元素是浮動的話，就撐不開父元素，這是可以理解的，那有什辦法可以讓他被撐開不用設高度呢?
把父元素設 overflow:hidden
這樣就可以父元素就可以被撐開了，這個特性神奇吧，沒遇過不會知道喔
參考:
https://www.minwt.com/webdesign-dev/css/17252.html

2018年7月2日星期一

還原uglify之後的JS

如果你有 sourcemap 的话，可以恢复（拖走
但沒人會把sourcemap放在網上給你抓所以只能還原縮排，但可以重新命名變數
http://www.jsnice.org/

2018年6月13日星期三

https://tw.saowen.com/a/12b7cbfe1c763376d0a0a8441e2b550041802ae33f876df4bf65949c63bd0c70
https://tw.saowen.com/a/ab1d6f6a50f539e2896d2465fc588579f00068406db4fd82e9f269b7e42e59ea
https://juejin.im/post/5adc18896fb9a07ab110c183?utm_source=tuicool&utm_medium=referral

1. script標籤盡量放body尾巴，且body裡面，對使用者來講才不會感受到JS檔下載的時間
2. 少用script標籤，不管內聯外聯
(下载一个 100KB 的文件比下载四个 25KB 的文件要快)
現今有打包工具可以把我們要的檔案濃縮成1個JS檔

3.用非阻塞方式延期脚本關鍵字 defer
4.用非阻塞方式动态脚本元素
5.用非阻塞方式 XHR 脚本注入
6.用非阻塞方式用第三方的庫
7.閉包函數相對來講開銷更大，注意記憶體洩漏
8.少用try catch、 with
9.不要直接改變參數的值，函數對參數操作相對高
10.物件和陣列開銷比一般變數高
11.非事先定義好的物件屬性開銷比定義好的大
var dog = {
name:OOO
}
dog.age = 10;開銷相對大
12.區域變數開銷較小，全域變數需查找開銷大
13.DOM很慢，能少掉用DomAPI就少調用(通常能在JS做的都先在JS做掉)，同時在和JS操作時(通常是事件綁定function)注意閉包
14.注意DOM節點創建、操作、複製和CSS等渲染
15.for in 比一般的for效率差
16.有關容器寬高的會觸發重排、有關顏色的會觸發重繪
17.大動畫重排會影響到整個渲染樹
18.利用事件托管比在N個元素上綁定還要有效
19.陣列、物件的查表法比switch快
20.少用遞迴，任何可用遞迴的演算法都可用迭代實現
21.定時器耗CPU建議額外包裝一個定時器，整個網頁只用這一個定時器
22.瀏覽器請求如果不考慮安全等等因素的話，get優於post，因為瀏覽器會緩存
23.避免用eval()、Function()構造函數、setTimeout() 這些可以傳字串進去執行的函數，因為他都需要在創建一個編譯器實例，很慢
24.使用字面量的方式來創建陣列和物件
25.多用CDN外聯可根據地理位置減少網路延遲
26.壓縮JS檔

快速喵過~~~
高性能javascript

2018年3月25日星期日

配置react -native環境

公司的新專案需要用到react-Native

上網找教學影片

後盾人孫老師錄的

整個過程非常順利，只遇到兩個小坑

1.我java安裝成第10版不支援，所以就補安裝了第8版
這邊教你怎設定環境變量
http://www.ituring.com.cn/article/207395
2.android SDK有條款沒接受
https://stackoverflow.com/questions/39760172/you-have-not-accepted-the-license-agreements-of-the-following-sdk-components

稍微注意的點:
3.文件路徑要轉譯一下變成\\雙斜線(影片有提)
4.安裝android SDK我是整個studio都載下來(跟影片不同)，下一步下一步這樣安裝完成

然後設置環境變量不需要重新開機，powershell重開就行了

2018年3月18日星期日

在centos7裡面安裝nginx+php+mysql

話不多說，直接先參考教學
http://www.smalljacky.com/linux/centos/centos7-install-setup-nginx-mariadb-php-phpmyadmin-lemp/
其餘遇到的問題列在下面

[root@www ~]# rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm

文章裡面的這一條會幫你建好/etc/yum.repos.d/nginx.repo這個檔案

重點是版本要對，不然會一直安裝失敗

遇到的第一個問題就是

Error: Package: nginx-1.12.2-1.el6.ngx.x86_64 (nginx)

Requires: libpcre.so.0()(64bit)
所以安裝失敗

解決方法參考至:

This happened to me. I updated my EPEL repository with

yum update epel-release

yum install nginx

https://serverfault.com/questions/620684/cant-install-nginx-using-epel-repo-on-centos-7-64bit
--> Finished Dependency Resolution

然後就成功了
遇到的第二個問題是

systemctl start nginx

Job for nginx.service failed because the control process exited with error code. See "systemctl status nginx.service" and "journalctl -xe" f

因為port號被用走了

nginx: [emerg] bind() to 0.0.0.0:8843 failed (98: Address already in use)

解決方法參考至:

https://serverfault.com/questions/565339/nginx-fails-to-stop-and-nginx-pid-is-missing 之後80port就正常啟動了遇到的第三個問題
改了設定檔要換port重啟的時候

[emerg] bind() to 0.0.0.0:8843 failed (13: Permission denied)

此時就開始關心是不是防火牆的關係了，就開始到處找文章
iptables -I INPUT -p tcp --dport 8843 -j ACCEPT
然後就不小心開錯port了，要怎刪掉?

列出所有規則，前面加上行號

iptables -L INPUT -n --line-numbers

要刪除某一行的規則

iptables -D INPUT 1 # 若只有上述那行，那就是 1
iptables -D INPUT 3 # 若有多行，只要刪除第三行

參考至:https://blog.longwin.com.tw/2016/07/iptables-delete-rule-by-line-2016/
然後開了還是不行，結果是selinux 的問題，要關掉....
或者加port進去該軟體
http://n.sfs.tw/mymedia/index/10393
解決方法參考至:
http://blog.51cto.com/liuqh/1839889
最後終於正常重啟了QQ

第4個問題mariadb安裝完之後，改port號
同樣參考至:http://n.sfs.tw/mymedia/index/10393

第5個問題
改完port號之後遠端不能登入

mysql> GRANT ALL PRIVILEGES ON *.* TO 'USERNAME'@'%' IDENTIFIED BY 'PASSWORD' WITH GRANT OPTION

參考至:
https://stackoverflow.com/questions/25777943/failed-to-connect-to-mysql-at-127-0-0-13306-with-user-root-access-denied-for-us
https://stackoverflow.com/questions/8348506/grant-remote-access-of-mysql-database-from-any-ip-address

再來又遇到 /var/run/php-fpm/php-fpm.sock failed (2: No such file or directory)
重開服務，解決
systemctl restart php-fpm

2018年3月14日星期三

遠端編輯VSC

因為內測環境要連遠端，不是建置在本機上面，原因其實我也不是很清楚，大概是為了省電吧(平常下班要自己電腦要關機)，共用的不用關，也可能是遠端機子比較好，環境跟正式的一樣，我本機也不用那麻煩再安裝一次laravel，大概是諸如此類的原因，我需要對遠端的程式碼進行coding

於是找到
http://www.cnblogs.com/learn21cn/p/6189023.html
https://spin.atomicobject.com/2017/12/18/remote-vscode-file-editing/

以下linux作業系統就是我的遠端
在linux上裝rmate
在vsc上裝Remote VSCode擴展
自訂一下ssh config
就可以直接在命令列上打入
C:\Users\xin02> ssh kestanley
root@10.10.10.32's password:****
來登入linux
然後
rmate my.text 就可以在VSC打開囉

但是!!!
這種方法不是我想要的那種，這一次只能開一個檔案，我希望他跟平常一樣在旁邊的explorer列出所有的文件阿~~~

於是乎放棄上面這種方法
改用
https://github.com/liximomo/vscode-sftp
SFTP這個擴展就大功告成了，繞了好大一圈阿

{

    "protocol": "sftp",

    "context":"D:\\remote",

    "host": "10.10.10.32",

    "port":22,

    "username": "root",

    "password":"****",

    "ignore": [

        ".vscode",

        ".git",

        ".DS_Store",

        ".svn"

      ],

    "uploadOnSave": true,

    "remotePath": "/usr/share/nginx/html/"

}

2018年3月13日星期二

vsc裝 php intelliSense擴展

https://github.com/Microsoft/vscode/issues/13356

Added in Settings:

{
    "php.executablePath": "C:\\PHP_7\\php.exe",
    "php.validate.executablePath": "C:\\PHP_7\\php.exe",
    ...
}

2018年3月12日星期一

程式著作權相關

請問在程式前的著作權和授權宣告要怎麼寫
https://www.openfoundry.org/tw/forum?func=view&catid=10&id=345

想寫出造福世界的程式？你得先通過著作權這關！
https://buzzorange.com/techorange/2013/07/31/what-coders-should-know-about-copyright-licensing/

關於程式碼的著作權
https://tw.answers.yahoo.com/question/index?qid=20110603000010KK03315

授權流言終結者#3：jQuery 授權的分析與探討
https://www.openfoundry.org/enterprise-application/8680

小數點運算誤差

電腦對於小數點運算組是有誤差

浮点运算结果出现误差原因分析及解决方案
http://www.cnblogs.com/xiongpq/archive/2010/05/17/1737747.html
使用浮點數最最基本的觀念
http://blog.dcview.com/article.php?a=VmhQNVY%2BCzo%3D
php踩過的那些坑
https://kknews.cc/zh-tw/finance/y86vrrj.html

2018年2月22日星期四

好用小工具

截圖軟體 Screenpresso API測試軟體 postman 壓力測試工具 jmeter 專案管理工具 redmine 對接linux工具MobaXterm
或者WinSCP

2018年1月7日星期日

chrome 新sessionID

沒切SESSION的BUG

chrome浏览器每次请求产生一个新session

https://www.v2ex.com/t/56219
http://ask.csdn.net/questions/388739
http://yilinliu.blogspot.tw/2013/03/aspnet-chromefaviconicosession.html
所以我的問題跟下面那些人都沒關係

結果是因為我勾到這個，可惡!!!!!!

切SESSION方法
https://dotblogs.com.tw/jimmyyu/archive/2009/11/21/12097.aspx
https://zhidao.baidu.com/question/1238058978868049619.html

延伸閱讀:
禁用cookie，session還能用嗎
https://www.zhihu.com/question/35307626

讓我們來談談CSRF

https://blog.techbridge.cc/2017/02/25/csrf-introduction/

2017年12月6日星期三

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

2017年12月4日星期一

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

2017年12月3日星期日

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

2017年11月23日星期四

取出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

2017年11月22日星期三

跨域的請求會請求兩次?

為什打開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+

2017年11月16日星期四

我跳槽javascript的經過

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

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

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

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

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

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

訂閱：文章 (Atom)

開發成長日誌

2018年8月7日星期二

將DIV內的浮動貼齊區塊，父容器的高度自動撐開

2018年7月2日星期一

還原uglify之後的JS

2018年6月13日星期三

JS效能

2018年3月25日星期日

配置react -native環境

2018年3月18日星期日

在centos7裡面安裝nginx+php+mysql

2018年3月14日星期三

遠端編輯VSC

2018年3月13日星期二

vsc裝 php intelliSense擴展

2018年3月12日星期一

程式著作權相關

小數點運算誤差

2018年2月22日星期四

好用小工具

2018年1月7日星期日

chrome 新sessionID

chrome浏览器每次请求产生一个新session

讓我們來談談CSRF

2017年12月6日星期三

HTML 5 中的資料屬性

gulp自动添加版本号

ajax檔案上傳

我常用的IDE功能

2017年12月4日星期一

javascript動態改變樣式

2017年12月3日星期日

css3反轉HTML順序

2017年11月23日星期四

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

2017年11月22日星期三

跨域的請求會請求兩次?

2017年11月16日星期四

我跳槽javascript的經過

2018年8月7日 星期二

2018年7月2日 星期一

2018年6月13日 星期三

2018年3月25日 星期日

2018年3月18日 星期日

2018年3月14日 星期三

2018年3月13日 星期二

2018年3月12日 星期一

2018年2月22日 星期四

2018年1月7日 星期日

chrome浏览器每次请求产生一个新session

2017年12月6日 星期三

2017年12月4日 星期一

2017年12月3日 星期日

2017年11月23日 星期四

2017年11月22日 星期三

2017年11月16日 星期四

2018年8月7日星期二

2018年7月2日星期一

2018年6月13日星期三

2018年3月25日星期日

2018年3月18日星期日

2018年3月14日星期三

2018年3月13日星期二

2018年3月12日星期一

2018年2月22日星期四

2018年1月7日星期日

2017年12月6日星期三

2017年12月4日星期一

2017年12月3日星期日

2017年11月23日星期四

2017年11月22日星期三

2017年11月16日星期四