FrontEnd 基本

前端工程師基本概念筆記 EX:html、JS...等

●一些前端的codeStyle

參考出處: http://pixnet.github.io/frontend-guideline/
參考出處: https://github.com/rwaldron/idiomatic.js/blob/master/translations/zh_TW/readme.md

1.有開始標籤，就一定要有結束標籤
2.每行須縮排(4個空格)，在任何環境render結果一致
3.屬性不要用單引號，使用雙引號
4.HTML5 doctype頁面開頭，啟用標準模式，讓遊覽器render結果一致
5.語言屬性EX:寫出來，有助於語言合成工具判定要使用的發音以及翻譯工具判斷使用規則(以下網址深入lang屬性)
http://w3c.github.io/html/semantics.html#the-html-element
6.字元編碼必要，快速確保內容render正確 EX:
7.引用css、js無須指定type，因預設便是text/css 和 text/javascript
8.屬性順序，讓程式碼有易讀性
  * class => 重用元素而生
* id、name =>id是唯一產生，但盡量避免少用(可用於頁內書籤)
* data-
* src, for, type, href, value
* itle, alt
* aria-, role
9.簡化Markup避免多餘父元素，讓HTML寫的少且不需要反覆重寫與重構

<!-- Not so great -->
<div class="nogood">
    <img src="...">
</div>

<!-- Better -->
<img class="nogood" src="...">

10.避免再JavaScript寫Markup，讓性能更差、難找更難編輯

●RWD小小觀念

可到六角HTML、CSS最後一章觀看

●CSS Hack

https://blog.miniasp.com/post/2012/05/02/Building-Website-is-not-that-easy-CSS-Hacks-and-IE-Conditional-Comments

●ngrx 相關學習

http://oomusou.io/angular/ngrx/
https://github.com/fezaoduke/TranslationInstitute/blob/master/%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E4%BD%A0%E7%94%A8ngrx%E7%AE%A1%E7%90%86Angular%E7%8A%B6%E6%80%81.md
https://blog.kevinyang.net/2017/02/05/angular-ngrx-store/
https://juejin.im/post/58ed71f5a0bb9f006a4aeb9b
https://dotblogs.com.tw/kinanson/2017/03/30/114819
https://ithelp.ithome.com.tw/articles/10196784?sc=iThelpR

●其他延伸學習

SEO與meta tag的效益
https://molecular-service-science.com/2015/06/13/seo-meta-tag-introduction-and-best-practice/

程序員的後花園
https://com-it.tech/archives/category/前端開發

相對路徑 和 絕對路徑
https://dotblogs.com.tw/im_sqz777/2017/07/26/220713
https://www.jianshu.com/p/cf740c7960c3

ECMAScript 6 入门
阮一峰. 相關基本語法介紹 與set map....等介紹
http://es6.ruanyifeng.com/#docs/set-map

loadsh
http://lodash.think2011.net/uniqBy

angular5 update angular6
https://www.udemy.com/angular-zero/learn/v4/announcements?ids=1633416

google瀏覽器切換國家步驟

1. 先去更改語言設定chrome://settings/?search=%E8%AA%9E%E8%A8%80
2. 把要的語言移到最頂端後（ex:我想測試英文，就把英文移到最頂端）
3. 然後重開chrome 再去網頁看就會更新現在瀏覽器所設定的語言

●常用工具教學

★網頁關鍵字速記表
可到六角HTML、CSS最後一章下載ㄒ

★網頁關鍵字搜尋技巧
可到六角HTML、CSS最後一章觀看

★tinypng壓縮圖片(壓縮圖片大小)
https://tinypng.com/

★工程師與設計師溝通
https://www.sketch.com/
https://zeplin.io/

★Chrome Dev Tools
https://developers.google.com/web/tools/chrome-devtools/
https://www.codeschool.com/courses/discover-devtools
https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading?hl=zh-tw

★Chrome 擴充工具(前端常用)
https://ithelp.ithome.com.tw/articles/10207116

★codepen(small side Project)
https://codepen.io/dashboard/

★圖片上傳
https://imgur.com/
https://upload.cc/

★screensize載具寬度
http://screensiz.es/

★Markdown
http://markdown.tw/

★github 架設自己的網站(靜態)
https://medium.com/@NorthBei/%E4%B8%8D%E7%94%A8%E6%87%82git%E4%B9%9F%E8%83%BD%E7%94%A8github-pages%E6%9E%B6%E8%A8%AD%E9%9D%9C%E6%85%8B%E7%B6%B2%E7%AB%99%E4%B8%A6%E7%B6%81%E5%AE%9A%E7%B6%B2%E5%9F%9F-c60c02bc470c
https://pages.github.com/

●30天學習網站

*rxjs
https://ithelp.ithome.com.tw/users/20103367/ironman/1199
*ngrx
https://ithelp.ithome.com.tw/users/20103574/ironman/1519
*angular material
https://ithelp.ithome.com.tw/users/20020617/ironman/1263
*angular2
https://ithelp.ithome.com.tw/users/20103745/ironman/1160?page=1
*angular大師之路2019
https://ithelp.ithome.com.tw/articles/10202454
*sass教學
https://ithelp.ithome.com.tw/users/20040221/ironman/562
*切版教學
https://ithelp.ithome.com.tw/users/20092794/ironman/1277

●網頁素材

https://www.pexels.com/

●色碼表

https://www.toodoo.com/db/color.html
https://www.ifreesite.com/color/

●免費下載icon

https://www.iconfinder.com/

●unsplash、Flickr免費解析圖庫下載

free: https://unsplash.com/
有些有版權注意: https://www.flickr.com/

●github learn

https://gitbook.tw/chapters/github/push-to-github.html

●vscode 推薦extension

https://zhuanlan.zhihu.com/p/36020180
*angular 7 and typescript
*angular v7 snippets
*angular 2 switcher
*Auto import
*Beautify
*chinese
*Chinese Translation
*Debbuger for Chrome
*Document This
*EditorCongig for Vs Code
*File peek
*Html class suggestions
*Html snippets
*javascript Es6 code ...
*Move TS
*Path interllisense
*Power Mode
*vscode-icon
*gitlens
*tslint

●vscode 快捷鍵

Command + p 查找此專案的檔案
code 指令
https://ephrain.net/vscode-%E5%BE%9E%E5%91%BD%E4%BB%A4%E5%88%97%E7%94%A8-vscode-%E9%96%8B%E5%95%9F%E6%AA%94%E6%A1%88%E6%88%96%E7%9B%AE%E9%8C%84/

CSS 基本

●使用CSS3 :nth-child(n) 選取器教學
http://csscoke.com/2013/09/21/%E4%BD%BF%E7%94%A8css3-nth-childn-%E9%81%B8%E5%8F%96%E5%99%A8%E8%A9%B3%E8%A7%A3/

●Css遊戲學習
http://flexboxfroggy.com/
http://cssgridgarden.com/
https://flukeout.github.io/

●Css專用學習網（Ｗ3School太舊，不要看！）
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
＊小觀念
Test.test1 .會全部跑
Test>test1 確保要再下一層 （>比.還快）
Test* *全部

●Button click 效果
https://stackoverflow.com/questions/44263892/how-to-style-a-clicked-button-in-css

●fontawesome 只要是fa=>第四版，fas第5版

---

●大師論壇與網站

https://twitter.com/will_huang

保哥ppt
https://www.slideshare.net/WillHuangTW?utm_campaign=profiletracking&utm_medium=sssite&utm_source=ssslideview

●git基本教學

https://www.jianshu.com/p/e25c763b9816
https://gogojimmy.net/2012/01/17/how-to-use-git-1-git-basic/
https://blog.techbridge.cc/2018/01/17/learning-programming-and-coding-with-python-git-and-github-tutorial/
https://stackoverflow.com/questions/3212459/is-there-a-command-to-undo-git-init
解决package-lock.json中定义的依赖项中的潜在安全漏洞的正确方法？
https://cloud.tencent.com/developer/ask/128169

---

●command line基本教學

https://gitbook.tw/chapters/command-line/command-line.html
https://gitbook.tw/chapters/github/fail-to-push.html