PWA 學習

[教學] 將網頁變成Progressive Web Application (PWA) ,漸進式的網頁應用程式 | 梅問題.教學網 (minwt.com)

PWA 實戰經驗分享 (techbridge.cc)

漸進式網絡應用程式 | MDN (mozilla.org)

PWA學習筆記-1:cache、workbox基本使用 – PWA – Let’s Write

Vue PWA: Building A Progressive Web App w/ Nuxt (demo + tutorial) – Snipcart

https://pwa.nuxtjs.org/

https://segmentfault.com/a/1190000012353473

https://ithelp.ithome.com.tw/users/20071512/ironman/1222

https://blog.csdn.net/yelin042/article/details/79837745

Google 設計指南(中文)


https://medium.com/@hizai/the-guide-to-design-introduction-528cc36ddb76

第一章
https://medium.com/@hizai/the-guide-to-design-chapter-1-why-design-why-now-574791742c9f

第二章
https://medium.com/@hizai/the-guide-to-design-chapter-2-industry-overview-ccb3863c9df9

第三章
https://medium.com/@hizai/the-guide-to-design-chapter-3-design-with-capital-d-c64c00d678dd

第四章
https://medium.com/@hizai/purpose-and-community-design-techniques-e77535dec209

https://medium.com/@hizai/purpose-and-community-beyond-design-27af8792a736


第五章
https://medium.com/@hizai/the-architecture-of-information-01-4f174e348e4c
https://hellojasminelin.medium.com/the-architecture-of-information-02-9e0f203cd5a0

第六章:與使用者對話
https://hellojasminelin.medium.com/the-guide-to-design-user-research-4b6002aa8637

設計指南第七章:在形式與功能之間找到平衡
https://hellojasminelin.medium.com/the-guide-to-design-chapter-7-form-and-function-b206fa3fee24

無障礙相關工具

Drag and Drop this link: ANDI into your browser’s favorites/bookmark bar
在要檢測的網頁,點擊此書籤,會檢測無障礙

輸入網址後,觀看色盲模式下的畫面
https://www.toptal.com/designers/colorfilter
https://wave.webaim.org/
https://achecker.ca/checker/index.php
https://a11ygator.chialab.io/

色盲
https://colororacle.org/index.html

NCC
https://www.handicap-free.nat.gov.tw/

顏色、對比、大小、色盲等服務都有
https://getstark.co/

單一顏色對比工具,可調整細部數值
https://colorable.jxnblk.com/
https://webaim.org/resources/contrastchecker/

多個顏色比對工具
https://contrast-checker.glitch.me/

多個顏色比對工具
https://toolness.github.io/accessible-color-matrix/

顏色對比、且可用滴管工具
https://contrasteapp.com/

顏色對比:輸入色碼
https://hexnaw.com/

對比色範例
http://clrs.cc/a11y/

顏色對比:輸入色碼
https://contrastchecker.com/?c=ffffff&b=2C977A

SEO 網路文章

瞭解 JavaScript 搜尋引擎最佳化 (SEO) 基礎知識
https://developers.google.com/search/docs/guides/javascript-seo-basics

如何加強網站的SEO – 基礎篇
https://blog.yyisyou.tw/5ac95a76/

SEO CHEAT SHEET
https://9elements.com/seo-cheat-sheet/

9月流量恐失血!Google搜尋排名改採「行動優先索引」,SEO該怎麼因應?
https://www.bnext.com.tw/article/56878/google-mobile-first-indexing

KOL網紅必學–內容行銷入門與SEO優化行銷7個技巧與工具推薦!
https://pvd-plus.com/articles/kol-seo/

搜尋引擎最佳化
https://zh.wikipedia.org/wiki/%E6%90%9C%E5%B0%8B%E5%BC%95%E6%93%8E%E6%9C%80%E4%BD%B3%E5%8C%96#%E5%BD%93%E4%BB%A3%E6%90%9C%E5%B0%8B%E5%BC%95%E6%93%8E

SEO Tutorial For Beginners in 2020
https://www.hobo-web.co.uk/seo-tutorial/

On-Page SEO: Anatomy of a Perfectly Optimized Page (2019 Update)
https://backlinko.com/on-page-seo

結構化資料 SEO 與 meta 標籤
https://www.oxxostudio.tw/articles/201406/social-meta.html

01. Nuxt.js 小跑起步 (使用Vue時,為了SEO需要用到Nuxt)
https://ithelp.ithome.com.tw/articles/10201762

阿里前端工程師總結HTML5:meta標籤。網友:「666」!
https://kknews.cc/zh-tw/code/a3ey48g.html