家常 - 咖哩麻婆豆腐

原食譜來自於
MASAの料理ABC
但以下作法是有我個人的調整, 又更簡單一點:

備料:
絞肉
咖哩塊
豆腐
青蔥
蒜頭


作法:

小記:
MASA說 這道菜雖然叫麻婆豆腐
但其實只是取麻婆豆腐的勾芡跟下飯

食材方面, 我用咖哩塊取代咖哩粉,
原本只是因為主一般咖哩常會剩下零星小塊的咖哩塊
卻發現咖哩塊已經夠濃稠,
用咖哩塊來做就能省去勾芡的步驟了!

實際做了之後 覺得比正常煮日式咖哩的方式還要簡單方便很多!
簡單就能入味 又不用一次煮好大一鍋咖哩拿去冰又分裝
很適合小家庭! 直接納入家常菜XD

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);}
}