---
# System prepended metadata

title: Week 3-4
tags: [gulp, js, SCSS, tailwindcss, vite, seo, design]

---

# Week 3-4
###### tags: `SCSS`, `js` , `tailwindcss` , `vite`, `gulp` ,`design`, `seo`

---

## SEO
[Measure page quality](https://web.dev/measure/)
[網頁相對/絕對路徑&語意化標籤](https://medium.com/tsungs-blog/day28-%E7%B6%B2%E9%A0%81%E7%9B%B8%E5%B0%8D-%E7%B5%95%E5%B0%8D%E8%B7%AF%E5%BE%91-%E8%AA%9E%E6%84%8F%E5%8C%96%E6%A8%99%E7%B1%A4-7c386e8032ab)

## TW install
[ Document use Tailwind CLI ](https://tailwindcss.com/docs/installation)

```
cd /Users/chrischen/tailwind-demo(project name)

//sudo === 最高權限操作，會需要輸入PW
//sudo npm install -D tailwindcss
npm install -D tailwindcss

npx tailwindcss init

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

```
[Tailwind-客制 Button 按鈕 - CDN](https://codepen.io/chrisc0210/pen/JjLNMXz)
<!-- https://hackmd.io/HkBkCPr6QwSrDwCuVW0l9w?both -->
* [無客制btn(上週作業)](https://codepen.io/chrisc0210/pen/LYdbEjy?editors=1000)
```
//if u want to use tw on codepen(CDN)

//1. setting <head>
<script src="https://cdn.tailwindcss.com">
</script>

//2 html >> add any style here. 
//e.g. @apply, @layer ...
<style type="text/tailwindcss">
...
</style>

//3. script >>
tailwind.config = {
  theme: {
    extend: {
      colors: {
        'orangeMiu': {
        light: '#fca05e',
        DEFAULT: '#fe9b1c',
        dark: '#f88737',
      },
      }
    }
  }
};

```
## Dashboard Design
[Dashboard Design 必讀的六篇文章](https://yvonne-chiu.medium.com/%E6%96%B0%E6%89%8B%E4%B8%8A%E8%B7%AF-dashboard-design-%E5%BF%85%E8%AE%80%E7%9A%84%E5%85%AD%E7%AF%87%E6%96%87%E7%AB%A0-c2c4f8e82179)
[如何处理任务及优化流程](https://www.uisdc.com/mission-design)
[竞品分析3个阶段](https://www.uisdc.com/analysis-for-competitive-products)
[](https://yvonne-chiu.medium.com/%E6%96%B0%E6%89%8B%E4%B8%8A%E8%B7%AF-dashboard-design-%E5%BF%85%E8%AE%80%E7%9A%84%E5%85%AD%E7%AF%87%E6%96%87%E7%AB%A0-c2c4f8e82179)


---


## RWD、樣式權重
* min-width & max-width： 
 > min-width 跟 width 擇一使用，不會同時撰寫
 > min-width 值應比 max-width 小

> max-width，表示這個數字以下（包含） 的都適用。(<=)
> min-width，表示這個數字以上（包含） 的都適用。(>=)
https://ithelp.ithome.com.tw/articles/10196578


* **覆蓋樣式設定：先看權重，再看先後**
> 權重分數：
> 「*」 星號：0 分（看情況使用）
> 標籤選擇器：1 分
> 類別選擇器：10 分
> ID 選擇器：100 分（不建議設定樣式用）
> inline style：1000 分（不建議設定樣式用）
> !important：10000 分（不建議設定樣式用）

* 上週上課筆記：
```
img{
max-width: 100%;
height: auto;
}

//992px 768px
//table
@media (max-width:992px){
    .class{
      width:100%
    }
}
//mobile
@media (max-width:767px){
    .class{
      width:100%
    }
}
```
## Vite
> CORS error	script	index.html
> 編譯不成功，出現空白頁面，有成功上傳資料到github上
>在測試環境下樣式可以正常顯示出來
![](https://i.imgur.com/d8KEpLi.png)

* 解決辦法：（試過但還是無效）
https://andyzhang851120.medium.com/vue-cli-run-build-blank-page-%E8%B8%A9%E5%9D%91%E8%A8%98-452f53fdda32

* Github page 部署（有兩頁畫面不見）
https://betterprogramming.pub/create-and-deploy-a-vue-js-app-to-github-pages-706dbf7bc2c4

* Deploying Vite App to GitHub Pages
https://dev.to/shashannkbawa/deploying-vite-app-to-github-pages-3ane

* Vite + Vue-Roueter on Github Pages
https://jerry-yeh.github.io/vue-3/20210911/13819/
```
// vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    minify: true,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  base: process.env.NODE_ENV === 'production' ? '/<REPO>/' : './',
});
```
* Day_11 : 讓 Vite 來開啟你的 Vue 之 Config 常見配置 (Vite 最終篇 XD)
https://ithelp.ithome.com.tw/articles/10270465
```
//vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    base: './',
    plugins: [vue()],
    resolve: {
        alias: {
             '/images': 'src/assets/images',
        },
    },
})

```
## Gulp
[安裝教學文章](https://hackmd.io/yWpLNMPRT2yvIR4Zq_idGw?view)
* Add header, footer to ejs file
```
//use include
  <%- include('partial/header') %>
  <%- contents %>
  <%- include('partial/footer') %>
```

* [ejs 'partial is not defined'](https://stackoverflow.com/questions/11351691/ejs-partial-is-not-defined)
> 
> Now in ejs 3.1.x
> <% include('relative_filepath'); %>
> 
> Must be replaced by
> <%- include('relative_filepath'); %>
* 資料結構參考
[[實例] 使用NodeJs,Express+EJS製作靜態網站](https://medium.com/web-design-zone/%E5%AF%A6%E4%BE%8B-%E4%BD%BF%E7%94%A8nodejs-express-ejs%E8%A3%BD%E4%BD%9C%E9%9D%9C%E6%85%8B%E7%B6%B2%E7%AB%99-7f962914934)
![](https://i.imgur.com/RDZXx2D.png)

![](https://i.imgur.com/eEFwShM.png)

> 編譯時出現的問題，後來重新建立之後問題解決，可能是改到編譯的那份資料夾
> Conversion error: Jekyll::Converters::Scss encountered an error while converting

---

## week 3-4 作業
[icon](https://codepen.io/chrisc0210/pen/eYMRmvK?editors=1000)

#### iframe
[ifram RWD](https://diary.tw/archives/2267)
[Responsive Iframes with One Great CSS Trick](https://blog.theodo.com/2018/01/responsive-iframes-css-trick/)

tutorial:
1. add div outside iframe
```
<div>
    <iframe>
    your emberd code ...
    </iframe>
</div>
```


2. on iframe 
```
//aspect-ratio

iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
```

[BS4](https://getbootstrap.com/docs/4.0/utilities/embed/) v.s. [BS5](https://getbootstrap.com/docs/5.0/helpers/ratio/) 

```
//bs4
//embed-responsive embed-responsive-16by9

  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
  </div>
  
  
  
//bs5
//ratio ratio-16x9

  <div class="ratio ratio-16x9">
    <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
  </div>
```
[範例連結](https://codepen.io/chrisc0210/pen/WNzgdVZ)

>ref
>[bootstrap 5 responsive iframe keeping 16-9 ratio](https://stackoverflow.com/questions/68327933/bootstrap-5-responsive-iframe-keeping-16-9-ratio)

## Design
[REDESIGN逐步指南 / 案例分析](http://jinjin.mepopedia.com/~jinjin/ui/ui-03.html)

### name card
![](https://i.imgur.com/39TRjCu.png)
[link](https://stock.adobe.com/uk/Search?filters%5Bcontent_type%3Aphoto%5D=0&filters%5Bcontent_type%3Aillustration%5D=0&filters%5Bcontent_type%3Azip_vector%5D=0&filters%5Bcontent_type%3Avideo%5D=0&filters%5Bcontent_type%3Atemplate%5D=1&filters%5Bcontent_type%3A3d%5D=0&filters%5Bcontent_type%3Aaudio%5D=0&filters%5Btemplate_type_id%5D%5B%5D=2&filters%5Binclude_stock_enterprise%5D=0&filters%5Bis_editorial%5D=0&filters%5Bcontent_type%3Aimage%5D=0&k=name+card&order=relevance&safe_search=1&search_page=2&get_facets=0&search_type=pagination&asset_id=218389500)

### logo
[logo design](https://sproutsocial.com/insights/how-to-design-a-logo/)
[https://www.fontspace.com/](https://www.fontspace.com/)

### Others

[js-fetch](https://www.oxxostudio.tw/articles/201908/js-fetch.html)

[](https://www.uisdc.com/analysis-for-competitive-products)

[](https://www.uisdc.com/4-creative-design-methods)

[ FREE  ILLUSTRATIONS ](https://www.openillux.com/)