JS正則表達式 (Regular Expression) 好文匯集

原文出處: https://pjchender.github.io/2017/09/26/js-%E6%AD%A3%E5%89%87%E8%A1%A8%E9%81%94%E5%BC%8F-regular-expression-regex/

• Regular Expression @ MDN - JavaScript Guides
• Regular Expression @ MDN - Reference
• I hate regex: 可以找到許多常用的 regex 範例
• 常用正規表達式

使用正規式

在 JavaScript 中可以使用正規式的函式包含

• RegExp.prototype.test()：搜尋字串中是否有符合的部分，回傳 true/false。
• RegExp.prototype.exec()：以陣列回傳字串中匹配到的部分，否則回傳 null。
• String.prototype.match()：以陣列回傳字串中匹配到的部分，否則回傳 null。
• String.prototype.replace()：尋找字串中匹配的部分，並取代之。
• String.prototype.search()：尋找字串中是否有符合的部分，有的話回傳 index，否則回傳 -1。
• String.prototype.split()：在字串根據匹配到的項目拆成陣列。

簡單來說，當你想要看字串是否包含某 pattern 時，使用 test 或 search；想要更多的資訊（花較多耗效能），則使用 exec 或 match。

injected stylesheet 的問題解法

突然發現頁面跑版,

查code發現是遠本的visible:hidden 被強制改成display: none所導致,

這個display: none的來源是injected stylesheet

一查發現是Chrome中的擴充功能所導致

果然刪掉最近安裝的那一個就恢復正常了

自製chrome extension入門心得筆記

最近發現chrome extension  比想像中簡單許多
來筆記一些心得
其實一個資料夾 裝1支設定檔 + 1支html + 1個icon
就可以做出靜態的Hello world出來了
設定檔基本上照抄小改就好
所以放上去可以說是神速!
點出來的視窗就可以算是web的感覺

只是真的開始加東西就會發現有蠻多限制的
比如說不給綁onclick在html
必須在js中對DOM做操作
這件事對於用慣js框架的我來說很不習慣

有看到有人還是有引入jQuery.min
但會覺得這小小的extension似乎沒有必要
所以呼api的部分是使用fetch
看起來有正常拿到東西不會被CORS擋

只是對物件進行操作現在有點卡住
跟純js還是有些不同
而且debug的方式也比較微妙

不過看他可以做的事情可不只跳出新視窗
就很躍躍欲試呢!

常用CSS筆記 - flex

因常用的屬性常常忘記要去查
乾脆自己記著

Flex 屬性

display : flex | inline-flex;

flex-direction: row | row-reverse | colomn | column-reverse;

flex-wrap: nowrap | wrap | wrap-reserve;

flex-flow: 'flex-direction' || 'flex-wrap';

justify-content: flex-start | flex-end | center | space-between | space-around

垂直設定

align-item:  flex-start | flex-end | center | stretch | baseline;

align-content:  flex-start | flex-end | center | space-between | space-around | stretch

特別設定
align-self
order

有很多數學哲學議題的blog

https://drstanford.blogspot.com/

純CSS的讀取轉圈 loading spinner with pure css

可在這裡看跑起來的樣子
https://codepen.io/yujochia/pen/KKpRaOe

html:
<div class="loading"><div class='loading-indicator'><i></i></div>

CSS:
.loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    width: 50px;
    height: 50px;
   animation: spin 0.6s infinite;
  animation-timing-function:linear;
}
.loading-indicator:before {
    content: "";
    display: block;
    width: 50px;
    height: 25px;
    padding-bottom: 0;
    box-sizing: border-box;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    background: -webkit-linear-gradient(0deg, #999, #bbb);
}

.loading-indicator:after {
    content: "";
    display: block;
    width: 50px;
    height: 25px;
    padding-top: 0;
    box-sizing: border-box;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    background: -webkit-linear-gradient(0deg, #eee, #bbb);
}

.loading-indicator>i {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    background: white;  // middle color
    top: 5px;
    left: 5px;
    border-radius: 90%;

}
@keyframes spin{
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}

離線安裝forever server

把之前的筆記搬到blogger來

1.到C->使用者(User)->目前使用者名稱

, 上方勾選顯示"隱藏的項目"

2.將forever資料夾放在

C:\Users\目前使用者名稱\AppData\Roaming\npm\node_modules

3.開啟 '命令提示字元'

執行  npm config get prefix  

如果顯示/usr/local/node,則npm的默認全局安裝目錄是/usr/local/node/lib/node_modules/

在默認全局目錄下找到 forever

cd /usr/local/node/lib/node_modules/  

執行 npm build forever -g 

常用CSS筆記 - 隱藏元素兩種方法的不同 visibility: hidden vs. display: none

「visibility: hidden」和「display: none」不同。

visibility: hidden 會隱藏元素，

但這個元素仍會佔據版面配置中的相應空間 (其實就是一個空白方塊)；

display: none 會直接從轉譯樹狀結構中徹底移除元素，

該元素不僅會消失，而且也不再屬於版面配置的一部分。

15個優化sql Query的方式

http://blog.davidou.org/archives/609

弱點掃描網站

弱點掃描網站
https://www.qualys.com/

CSS的大於(>)、加號(+)、波浪符(~)

原文章出處

https://www.webdesigns.com.tw/CSS-webdesign-170811.asp

大於(>)就是選取底下直接的子元素。

以大於符號(.box > p)和空格(.box p)來做比較，先看以下例子：

CSS

使用空格的情況 影響底下的所有元素

.box p{ font-size:20px; color:#216AAD;}

使用大於符號的情況下

.box > p{font-size:20px; color: #216AAD; }

由上可知.box p會影響到box這個div底下所有的p元素，而因為「>」只會影響到直接的子元素，所以例子中box底下直接接觸到的p元素只有001跟004，所以只有這兩者會改變。

加號符號(+)則是會影響到後方同層級的第一個元素

範例：

html

CSS

div + p{ font-size:20px; color:#216AAD;}

由於跟div同層級又直接位於div後方的只有003，所以只有003改變。

而取代符號(~)是影響到後方同層級的全部元素，因此除了003以外004也會改變。

div ~ p{ font-size:20px; color:#216AAD;}

雖然只是CSS撰寫上的小技巧，但是若能夠善加使用這些符號的話，將可以很好地規避每個CSS之間的影響，想必將更有利於撰寫CSS和減少class的數量唷！

常用CSS筆記 - 奇數行變色

tr:nth-child(odd){
  background: white;
}

tr:nth-child(even){
  background: grey;
}

圓形進度條 circular process bar with levels using CSS

這個進度條構成都是CSS
因此很小 不占空間
可以依據進度傳百分比的變數進去


Code放在這  https://jsfiddle.net/chia3120/r5gLf9bc/5/

moment 常用的操作整理

https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/122725/

Vue 學習筆記 - 1.安裝按啟動

因為原本是個Angular開發者
所以會想連Vue-Cli 一起安裝來使用
我已經有安裝過node. npm. webpack
我就直接用npm來安裝

npm install vue
npm install -g @vue-cli

透過 Vue-CLI 來建立新專案: 專案名稱就叫vue-demo 

vue init webpack vue-demo
接著回答一連串的基本設定就可以了

跑下面這指令就能將vue跑起來了

蠻方便的


npm run dev
開啟瀏覽器 http://localhost:8080/

就能看到專案了

會有Vue logo的畫面出來

就是開好Vue專案了

Angular React 線上編輯器

線上編輯器(Angular / React)
https://stackblitz.com/

Angular 跨選單拖拉功能

code放在這邊 https://stackblitz.com/edit/angular-dw2kag 

目前cdk的drag and drop的範例但只有一個選單上下拖拉
user卻覺得選單太長時 想把多的部分換行

這時第一個想法是用flex 讓list自動換行就好
但會發現如果是同一個list多行多列的時候
在drop時會cdk有算錯位置的情況
應該是因為他設計時並沒有包含有多行多列的排序情形

所以我的解法是切割成多個選單
在每一次拖拉觸發drop時,
如果是跨選單就重新切割資料,
讓選單都保持在設定好的固定的長度
來實現選單不想無限長, 多的地方想換行的需求

之前放在論壇 自己的文章自己收一份

棉花糖-向晚的迷途指南

https://www.youtube.com/watch?v=nuLJ-aT0Zx4

對人生迷惘
對未來迷惘
不滿於現況的那個時候的我
聽了這首歌很觸動我的歌

「當自己的英雄吧!」 這是聽完這首歌的心得

然後勇敢的新嘗試 付出很多努力
後來得到了自己滿意的開心生活

挑選羽絨外套

前陣子要找新的羽絨外套
因為羽絨外套幾乎都差不多醜
所以不想特意找有品牌的, 然後預算抓在3000以下
羽絨要盡量高 希望找到90%以上的
但百貨公司隨便看都超過6000
爬了文 要夠溫暖但不貴, 似乎蠻多推NET的
雖然最後在NET找到的喜歡的是長版80%羽絨
但有在預算內, 也蠻好看 而且穿去雪地也覺得很OK
覺得很不錯!

日文老師分享的自學語言方法

上次上了真人線上的日文
老師是一個在美國讀資料科學的留學生
他分享他學習語言會跟自己對話
想像那樣的情境會說怎麼接話
想接的話怎麼講要去查
然後要把這段錄下來
自己聽過要聽得懂才是真的學會了
如果連自己都聽不懂 就要從錄音中找出來改進
語音是溝通的
教課書上的對話 不會出現在生活中的!

2020技能方向

過年後在找要往哪個方向發展,
我一直在Ruby, Python這兩個語言猶豫很久, 原因如下:

 - Ruby : 公司的後端語言, 雖然跟著基本的教學起了步, 但一直沒真的應用得很好.
          優 -> 可以協助後端, 可以運用在side project, 社群很優,
          缺 -> 公司的Ruby有些歷史共業, 導致環境跟DB都很複雜, 甚至很多workaround在裡面,
                    可能會導致用在公司和Side project之間會有所混亂. 需要linus或mac的環境較佳

 - Python : 目前最熱門的語言, 語法很好懂, 之前有玩過可以控制電燈的模型
          優 -> 應用的面向很廣且都很活躍, 聽說易學, 很多非本行的都聽過這個語言
          缺 -> 效能比較慢, 跑資料比較慢, 我目前對物聯網好像比較沒興趣

然而就在我找資料的時候, 發現有個新語言Julia,
他有幾點非常喜引我:
 - Julia :
       1. 較優的表現於AI和數據分析,包含 機器學習. 圖像運算. 財務計算..等等
       2. 他不是OOP, 他是FP, 而我正好想試試 functional programming的語言, 因為在寫Angular處理observable的資料時, rxjs有帶給我functional programming的實用情景, 我覺得很有趣!
       3. 他很新而我對這三種語言起步算是差不多, 我覺得選Julia 會比較吃香.
所以我接下來有時間的話, 就要來研究Julia了!

話雖如此 , 2月份還有1/4的電繪課, 以及還要撥時間練練英文口說, 然後關注看看什麼時候來取消月底泰國的行程, 預定3月初花蓮玩的房間和租車

想做的事情太多了, 覺得時間好不夠用呀!



Reference: https://medium.com/@rick.huang1609/julia-language-%E8%B3%87%E6%96%99%E7%A7%91%E5%AD%B8%E7%9A%84%E6%96%B0%E5%AF%B5%E7%89%A9-f780fa9fe851

從今開始 & 啟蒙blog

2020新年開始之後
一直在思考接下來要往哪個方面點技能
所以到處蒐集可以參考的資訊
看到了這個小狐狸事務所, 作者跟我一樣興趣多元
但他都把各式各樣的想法記錄下來,
還有各式分類, 甚至持續了10年 讓我也想這麼做!
http://yhhuang1966.blogspot.com/
這篇就會是我的開始!

一直不太會用痞客幫, 也不想自己設站
這裡好簡單明瞭, 正合我意!