乐趣区

关于前端:2020-2021-年-Web-前端最新导航

jiezi

国庆这几天，我收集了大量能够显著晋升开发效率的前端导航链接。

这些导航链接对我很有帮忙，心愿对你也是如此。

这些好用的导航链接都曾经部署到上面的网站上了，在那里食用更美味哦。

Web 前端最新导航 https://www.kwgg2020.com/

笔者博客地址：https://github.com/biaochenxu…

JavaScript

  • JavaScript 教程
  • ES6 入门教程
  • JavaScript 30 应用原生 JavaScript 在 30 天内实现 30 个我的项目
  • Codewars 和其他人一起实现实在的代码挑战，晋升你的技术
  • JavaScript 教程 古代 JavaScript 教程
  • 优良的 JS 代码标准
  • 开发的宝藏我的项目
  • TypeScript 教程：https://github.com/xcatliu/typescript-tutorial
  • Node.js 学习 https://blog.poetries.top/node-learning-notes/

CSS

  • css 的各种成果实现 css 的各种成果实现（尤其是动画成果）
  • CSS Inspiration 在这里找到写 CSS 的灵感
  • CSS 罕用款式 总结一些罕用的 CSS 款式
  • Animate.css 开箱即用的跨浏览器 CSS 动画成果
  • animista 按需定制 CSS 动画成果
  • SpinKit 会集了实现各种加载成果的 CSS 代码片段
  • CSS Minifier 在线 CSS 代码极简化 / 压缩工具
  • https://sass.bootcss.com/docu… Sass 是成熟、稳固、弱小的 CSS 扩大语言
  • https://less.bootcss.com/ 一种将 css 赋予了动静语言个性的动静款式语言
  • https://stylus-lang.com/ 富裕表现力、动静、强壮的 CSS

算法

  • JavaScript 算法与数据结构：https://github.com/trekhleb/javascript-algorithms
  • leetcode 解题之路：https://github.com/azl397985856/leetcode
  • 五分钟学算法：https://github.com/MisterBooo/LeetCodeAnimation
  • LeetCode 题目的思路 https://github.com/MisterBooo/LeetCodeAnimation 用动画的模式出现解 LeetCode 题目的思路。
  • 极客工夫 App 的《数据结构与算法之美》
  • GitHub 上 170K+ Star 的前端学习的数据结构与算法我的项目 https://github.com/biaochenxu…
  • JavaScript 数据结构与算法之美 – 十大经典排序汇总: https://github.com/biaochenxuying/blog/issues/42
  • 算法可视化工具 https://github.com/algorithm-visualizer/algorithm-visualizer 算法可视化工具是一个交互式的在线平台，能够从代码中可视化算法。
  • 算法可视化起源 https://visualgo.net/en
  • 察看算法的工作形式 https://github.com/skidding/illustrated-algorithms 变量和操作的可视化示意加强了控制流和理论源代码。

前端面试

  • 前端面试常考问题整顿，按模块知识点分类：https://blog.poetries.top/FE-Interview-Questions/
  • 前端开发面试题: https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions
  • web 前端面试宝典：https://github.com/h5bp/Front-end-Developer-Interview-Questions/
  • 掘金前端面试题合集：https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md
  • 前端面试图谱：https://yuchengkai.cn/docs/zh/
  • GitHub 上 100K+ Star 的前端面试开源我的项目汇总 https://github.com/biaochenxu…

技术社区

  • GitHub：https://github.com/ 高质量的内容创作和分享平台
  • stackoverflow：https://stackoverflow.com/ 一个答复技术问题的网站
  • 掘金：https://juejin.im/ 目前来看，国内的很多优质前端文章，都在掘金上。
  • 博客园：https://www.cnblogs.com/ 一个很纯正的技术博客平台。
  • 知乎：https://www.zhihu.com/ 很多做技术的同学也开始玩知乎了，阿里的不少前端大牛在知乎上就十分沉闷。
  • CSDN：https://www.csdn.net/ 广告太多，但奈何你这么老牌。
  • segmentfault：https://segmentfault.com/ 比拟低调的技术博客平台。
  • v2ex：https://www.v2ex.com/ 一个对于分享和摸索的中央
  • http://cnodejs.org/ Node.js 业余中文社区
  • https://www.smashingmagazine…. 一个 web 技术类的博客杂志站点
  • https://www.jstips.co/ 每天推出一个 JS 技巧的网站
  • W3cplus：https://www.w3cplus.com/ 是一个致力于推广国内前端行业的技术博客
  • 印记中文 – https://docschina.org/ 印记中文是最权威是技术中文文档社区
  • 收集优质的中文前端博客：https://github.com/FrankFang/best-chinese-front-end-blogs

博客团队

  • 腾讯 AlloyTeam：http://www.alloyteam.com/
  • 腾讯社交用户体验 ISUX：https://isux.tencent.com/
  • 淘宝 FED | 淘宝前端团队：http://taobaofed.org/
  • 阿里巴巴国内 UED：http://www.aliued.com/
  • 京东 | 凹凸实验室：https://aotu.io/
  • 饿了么前端:https://zhuanlan.zhihu.com/ElemeFE
  • 百度前端研发部 FEX：http://fex.baidu.com/
  • 360 | 奇舞团：https://75team.com/
  • 美团技术团队: https://tech.meituan.com/

GitHub 统计

  • GitHub 中文排行榜、高分优良中文我的项目：https://github.com/kon9chunkit/GitHub-Chinese-Top-Charts
  • GitHub 全球排名：https://gitstar-ranking.com/ 这个排名很权威。如果你的我的项目超过 10k star，就能上榜，跻身寰球 GitHub 我的项目前 1000 名。

构建

  • NPM：https://www.npmjs.com/
  • Yarn：https://yarnpkg.com/zh-Hans/
  • Webpack：https://webpack.js.org/
  • Gulp：https://www.gulpjs.com.cn/
  • Babel：https://babeljs.io/
  • ESLint：https://cn.eslint.org/ 可组装的 JavaScript 和 JSX 查看工具。
  • PostCSS：https://www.postcss.com.cn/ 用 JavaScript 工具和插件转换 CSS 代码的工具

部署

  • GitHub Pages GitHub 提供的收费动态网站托管服务
  • Netlify 30 秒内部署你的网站
  • Vercel 疾速部署你的网站
  • Surge 只需一个命令就能够公布你的网站
  • Heroku 在云端构建、运行你的利用

动态站点搭建工具

  • Hexo：https://hexo.io/zh-cn/
  • VuePress：https://www.vuepress.cn/
  • GitBook：https://www.gitbook.com/

前端代码标准 

  • 腾讯的 http://tgideas.qq.com/doc/index.html
  • 京东的 https://guide.aotu.io/index.html
  • Bootstrap 编码标准：https://codeguide.bootcss.com/
  • es6 编程格调：http://es6.ruanyifeng.com/#docs/style
  • Airbnb Javascript Style Guide：https://github.com/airbnb/javascript
  • ESLint 检测、修改 JavaScript 代码的问题
  • Prettier 格式化 JavaScript 代码

调试抓包

  • whistle：https://wproxy.org/whistle/ 代理抓包工具，很好很弱小。
  • Fiddler：https://www.telerik.com/fiddler 代理抓包工具。
  • Easy Mock：https://www.easy-mock.com

开发工具

  • VS Code：https://code.visualstudio.com/
  • Sublime Text：https://www.sublimetext.com/
  • WebStorm：https://www.jetbrains.com/webstorm/
  • Atom：https://atom.io/

在线工具

    • CodePen – https://codepen.io/ 在线代码测试工具
    • Can I use – https://caniuse.com/ Web 前端兼容性列表
    • TinyPNG – https://tinypng.com/ PNG/JPG 图片在线压缩利器
    • CNZZ 站点统计 – https://www.umeng.com/ 国内罕用的站点统计工具

    前端大会

    • Vue.js 开发者大会 https://fequan.com/ Vue.js 开发者大会中国
    • 中国 JS 开发者大会 https://jsconfchina.com/ 一场专一于 JavaScript 和 Node.js 技术的国际性大会
    • 中国 CSS 开发者大会 https://css.w3ctech.com/ 进步 css 开发姿态的大会
    • D2 前端技术论坛 http://d2forum.alibaba-inc.com/ 阿里巴巴举办，分享技术的乐趣，探讨行业的倒退

    图标

    • Font Awesome：http://www.fontawesome.com.cn/ 网站开发最风行的图标集
    • Feather 简洁好看的开源图标
    • Ionicons 精心绘制的开源图标
    • Simple Icons 常见品牌的 SVG 图标
    • Material Design Icons 轻快、精美的符号图标，包含常见操作和事项
    • Tabler Icons 681 枚可定制的开源 SVG 图标

    色调

    • Material Design Colors Material Design 色调
    • Flat UI Colors 2 14 组配色、280 种颜色
    • Color Hunt 分享色调搭配的自在开放平台，包含成千上万人工选取的配色，能够从中获取配色的灵感
    • Color Space 配色计划、CSS 色彩突变生成工具
    • uiGradients 好看的色彩突变
    • Colors and Fonts 色调和字体工具
    • Coolors 配色计划生成工具

    插画

    • Undraw 继续更新的精美的 SVG 插画集
    • manypixels 收费插画集
    • IRA Design 通过调配渐变色、搭配手绘组件定制插画
    • Free Illustrations by Lukasz Adam 收费 SVG 插画
    • Blobmaker 在线 SVG 形态生成器
    • Get Waves 在线 SVG 波形生成器

    图片

    • Unsplash 可供收费应用的图片
    • Pexels 精美的收费图片和视频
    • Burst 收费高分辨率图片，可用于网站和商业用途
    • ISO Republic 应用 CC0 许可的收费高分辨率图片和视频
    • Pixabay 令人惊叹的收费（公共畛域）图片和视频站点
    • StockSnap.io 精美的收费图片，同样应用 CC0 许可
    • Photopea 在线图片编辑工具，反对大量高级性能
    • Online Image Compressor 在线图片压缩工具，一次能够压缩多达 20 张图片
    • Bulk Resize Photos 最快的在线图片缩放工具（图片缩放和压缩在本地实现，无需上传到服务器）

    其余

    • 单元测试：https://github.com/goldbergyoni/javascript-testing-best-practices
    • web.dev 评测网站性能（基于 Lighthouse）
    • Shape Divider 定制各种形态的网站分区 SVG 的工具
    • GTmetrix 网页性能剖析工具
    • Can I Use 前端技术的浏览器反对状况
    • Carbon 代码转图片工具
    • Wappalyzer 检测某个网站应用的技术栈

    设计工具

    • 墨刀 ：原型设计工具。网址：https://modao.cc/
    • 蓝湖 ：一款产品文档和设计图的在线合作平台。网址：https://lanhuapp.com
    • PxCook（像素大厨）：高效易用的主动标注工具。软件下载链接：https://www.fancynode.com.cn/pxcook

    前端导航网站地址：https://www.kwgg2020.com

    笔者博客地址：https://github.com/biaochenxu…

    举荐浏览：

    • 通过 10 个实例小练习，疾速入门纯熟 Vue3 外围新个性

    反对一下下????

    退出移动版