工欲善其事必先利其器,在技術快速更新的時代,我們不要閉門造車,要借助的現有的資源提高我們的效率,以下是我整理出來比較實用的網址,會持續更新......
學習的網站
- 納米學習[http://1nami.com/]
工具網址
- GTmetrix,輸入任何你想測評的網址,就可以得到優化建議了。[https://gtmetrix.com/ ]
- 圖片壓縮[https://tinypng.com/ ]
- 加私有前綴[ https://autoprefixer.github.io/ ]
- 快速生成柵格化 [ http://grid.guide/ ]
- code pen [ https://codepen.io/ ]
- 阿里巴巴矢量圖標 [ http://www.iconfont.cn/ ]
- 有字庫 [https://www.youziku.com/ ]
- 字體下載 [https://www.fontke.com/font/10728033/ ]
- ico轉換工具 [http://www.bitbug.net/ ]
- 查詢兼容的網站 [ http://caniuse.com/ ]
- 升級各大瀏覽器的網站 [ https://browsehappy.com/ ]
- 富文本 [http://www.wangeditor.com/index.html ]
- 大前端 [http://www.daqianduan.com/nav ]
- Javascript ES2015 特性 [https://segmentfault.com/a/1190000011867361 ] [ http://overapi.com/javascript ]
- Javascript 正則表達式 [https://www.debuggex.com/cheatsheet/regex/javascript ]
-React[ https://devhints.io/react ] - Vuejs [https://vuejs-tips.github.io/cheatsheet/ ]
- Vuex [ https://vuejs-tips.github.io/vuex-cheatsheet/]
- Angular 4 [ https://angular.io/guide/cheatsheet ]
- Flexbox [ https://yoksel.github.io/flex-cheatsheet/ ]
- SCSS [ https://devhints.io/sass ]
- 好用神器網址 [ http://www.lxweimin.com/p/058671d37f4d ]
- h5大綱查詢 http://h5o.github.io/
- 驗證會html結構是否書寫規范 https://validator.w3.org/
- css重置樣式1 https://meyerweb.com/eric/tools/css/reset/
- css重置樣式2 http://necolas.github.io/normalize.css/
- 騰訊瀏覽器服務 http://x5.tencent.com/tbs/guide.html
- ui框架 http://www.lxweimin.com/p/7df8ca2f8846
- 圖表 http://echarts.baidu.com/index.html
- 圖片轉換工具 https://jinaconvert.com/cn/
- 前端工具導航 http://www.daqianduan.com/nav
- git學習網站 https://learngitbranching.js.org/
- 有趣的js和css庫 https://mp.weixin.qq.com/s/pktKzPJWQ1gtdFXxnGHMtQ
- 移動工具箱 http://www.nicetool.net/
- gitbook https://gitbook.cn/
- h5視頻 http://chimee.org/#demo
- sgv+vue+ts https://github.com/seanyujc/sgv-cli
動效網站
- loading加載動畫[ https://loading.io/ ]
- 按鈕動畫[ http://www.17sucai.com/pins/demoshow/25581]
- 白鷺時代[https://www.egret.com ]
- canvas-echart圖表[http://echarts.baidu.com/ ]
- jquery 插件 [http://www.unheap.com/ ]
- 有關動畫網站 [ https://www.awwwards.com/web-animation-infographics-a-map-of-the-best-animation-libraries-for-javascript-and-css3-plus-performance-tips.html ]
插件
- pcikadate 響應式的時間插件
- Magnific-Popup
- 彈幕插件 http://yaseng.org/jquery.barrager.js/
插件工具
- 谷歌瀏覽器的幾款插件
1、JSONview插件,將json數據美化;
2、Wappalyzer插件,查看網站用了那些技術;
3、Vue Devtools插件,可以查看vue整體的結構;
設計網站
- website [ http://reeoo.com/ ]
- seeseed [https://www.seeseed.com/ ]
- bwg [ https://bestwebsite.gallery/ ]
- 天空之城 [ https://www.skypixel.com/ ]
- 500px [https://500px.com/popular ]
- 國外優秀的UI設計資源庫 [http://www.w3cplus.com/source/ui-design.html ]
- 20個免費下載PSD設計網站 [ http://www.w3cplus.com/source/20-great-websites-to-download-free-psd-files.html ]
- https://www.iloveimg.com/ 壓縮圖片
- 設計素材導航 http://hao.shejidaren.com/
設計神器
- logo、背景圖快速生成 https://shapefactory.co/
- 炫光生成器 http://weavesilk.com/
- 萬箭啟發 https://wangyasai.github.io/Stars-Emmision/
書籍
- 《JavaScript DOM編程藝術》
- 《JavaScript權威指南》
- 《javaScript DOM高級程序設計》
- 《JavaScript設計模式》
- 《鋒利的jquery》
國外的
- 解決方案 https://stackoverflow.com/
- 可以買賣代碼的 http://codecanyon.net
其他
- GitHub最全的前端資源匯總倉庫(包括前端學習、開發資源、求職面試等)[https://github.com/helloqingfeng/Awsome-Front-End-learning-resource ]
- 關于js的學習方法 [ https://www.sitepoint.com/projects-can-sometimes-be-the-worst-way-to-learn-javascript/ ]
- 9 個常見錯誤阻礙你進步 [ https://juejin.im/post/59bb4a7c6fb9a00a53274cd7 ]
- 如何優雅的編寫 JavaScript 代碼 [ https://zhuanlan.zhihu.com/p/28910636 ]
- 12個免費學編程的網站[ http://www.csdn.net/article/2015-09-09/2825663 ]
- 源碼分享網站 [ http://www.zuidaima.com/]
- 編程中國 [ https://www.bccn.net/ ]
- js收藏夾[ https://www.zhihu.com/collection/174332512 ]
- 納米學習 [http://1nami.com/]
- 打造全滿分網站 [ https://segmentfault.com/a/1190000011867361]
- 10 個獨特的 CSS 背景視覺效果 [ http://svgtrick.com/tricks/dc4f73cd7193fff5f61dfdb1d36a4b6c]
- git的使用 https://www.imooc.com/article/35753
- js代碼常見技巧 https://www.imooc.com/article/35552
- web學習路線 https://www.imooc.com/article/261756
你們的支持,是讓我保持更新的動力......
git下載地址 [ https://github.com/galyean-gong/note.git ],記得打星哦!