最近發現chrome extension 比想像中簡單許多
來筆記一些心得
其實一個資料夾 裝1支設定檔 + 1支html + 1個icon
就可以做出靜態的Hello world出來了
設定檔基本上照抄小改就好
所以放上去可以說是神速!
點出來的視窗就可以算是web的感覺
只是真的開始加東西就會發現有蠻多限制的
比如說不給綁onclick在html
必須在js中對DOM做操作
這件事對於用慣js框架的我來說很不習慣
有看到有人還是有引入jQuery.min
但會覺得這小小的extension似乎沒有必要
所以呼api的部分是使用fetch
看起來有正常拿到東西不會被CORS擋
只是對物件進行操作現在有點卡住
跟純js還是有些不同
而且debug的方式也比較微妙
不過看他可以做的事情可不只跳出新視窗
就很躍躍欲試呢!
2020年3月17日 星期二
常用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
乾脆自己記著
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
2020年3月15日 星期日
純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);}
}
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
2020年3月13日 星期五
常用CSS筆記 - 隱藏元素兩種方法的不同 visibility: hidden vs. display: none
「visibility: hidden」和「display: none」不同。
visibility: hidden 會隱藏元素，
但這個元素仍會佔據版面配置中的相應空間 (其實就是一個空白方塊)；
display: none 會直接從轉譯樹狀結構中徹底移除元素，
該元素不僅會消失，而且也不再屬於版面配置的一部分。
CSS的大於(>)、加號(+)、波浪符(~)
以大於符號(.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的數量唷！
2020年3月11日 星期三
2020年3月2日 星期一
Vue 學習筆記 - 1.安裝按啟動
因為原本是個Angular開發者
所以會想連Vue-Cli 一起安裝來使用
我已經有安裝過node. npm. webpack
我就直接用npm來安裝
所以會想連Vue-Cli 一起安裝來使用
我已經有安裝過node. npm. webpack
我就直接用npm來安裝
npm install vue透過 Vue-CLI 來建立新專案: 專案名稱就叫vue-demo
npm install -g @vue-cli
接著回答一連串的基本設定就可以了 跑下面這指令就能將vue跑起來了 蠻方便的vue init webpack vue-demonpm run dev開啟瀏覽器http://localhost:8080/就能看到專案了 會有Vue logo的畫面出來 就是開好Vue專案了
訂閱：
文章 (Atom)