# 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/)