Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/tumars/fe-record

记录前端的各种知识，不定期增减
https://github.com/tumars/fe-record
Last synced: about 2 months ago
JSON representation
记录前端的各种知识，不定期增减
Host: GitHub
URL: https://github.com/tumars/fe-record
Owner: tumars
Created: 2016-05-10T08:40:26.000Z (over 8 years ago)
Default Branch: master
Last Pushed: 2018-03-30T08:47:36.000Z (over 6 years ago)
Last Synced: 2023-03-21T09:32:28.094Z (almost 2 years ago)
Language: JavaScript
Size: 21.5 KB
Stars: 64
Watchers: 6
Forks: 10
Open Issues: 0
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

README

        # 前端记录

 > 本文主要简单记录一些个人学习过程中的一些觉得不错的内容跟工具，大部分是前端开发的相关内容。

 > 受限于个人涉猎、喜好，很多内容都没涉及到。

 > 本文还有一个网页版，请访问 [http://www.ferecord.com/nav](http://www.ferecord.com/ "前端记录") 查看

#### 您可以通过以下方式联系到我：

 - 邮箱 [email protected]

 - 博客 [ferecord.com](http://www.ferecord.com/ "前端记录 ")

 - Twitter [@Tumars](https://twitter.com/Tumars)

 **若转载本文请注明来源**

---

## 目录

 - [前端综合资源](#resource)

 - [前端博客](#blog)

 - [技术网站](#site)

 - [设计](#design)

 - 前端框架

	- [react](#react)

 - [组件库](#component)

 - [CSS 相关](#css)

	- [post-css](#post-css)

 - [JS 相关](#JS)

 - [构建工具](#buildTool)

 - [语言](#language)

 - [GitHub](#GitHub)

 - [sublime text](#sublime)

 - 软件/工具 推荐

 	- [Windows](#windows)

 	- [Mac](#mac)

 - [杂七杂八](#other)

 - [小结](#summary)

---

前端综合资源


 > 与本篇文章类似的一些前端资源导航

 名称 | 备注/说明 

 ----- | ----- 

[前端瑞士军刀](https://github.com/nieweidong/fetool) | 相当全面的一篇资源总结，不止包括前端

[QQ前端群交流群规](https://github.com/jsfront/src/blob/master/qq.md) | 看了让你跪的前端交流群群规，下方有大量资源 

前端博客


  > 一些不错的团队或个人博客，部分是英文博客，建议加进 RSS 订阅。这篇[《front-end-collect》](https://github.com/foru17/front-end-collect)总结的更全面，包括了各种前端组织、博客、微博、期刊、书籍等。

  > 我这里只写一些个人订阅的常看的博客。

 名称 | 备注/说明 

 ----- | ----- 

[CSS-Tricks](https://css-tricks.com/) | 大名鼎鼎，更新量很大，每日必看

[codrops](http://tympanus.net/codrops/) | 设计的很漂亮的高质量前端博客

[smashingmagazine](https://www.smashingmagazine.com/) | 涉及到很多设计内容的前端博客

[腾讯 AlloyTeam](http://www.alloyteam.com/) | 腾讯前端团队

[百度 FEX](http://fex.baidu.com/) | 百度前端团队

[淘宝 FED](http://taobaofed.org/) | 淘宝前端团队

[奇舞团](http://www.75team.com/) | 360 前端团队

[前端乱炖](http://www.html-js.com/) | 前端社区太多，乱炖还算做的不错的

[前端外刊评论 - 知乎专栏](https://zhuanlan.zhihu.com/FrontendMagazine) | 知乎作为一个初期几乎全是程序员的网站，也是有相当多的前端开发

[WEB前端开发](http://www.css88.com/) | 很多人都知道的 css88，收集了很多类库的中文文档

[W3Cplus](http://www.w3cplus.com/) | 大漠(《图解 CSS3》作者)在国内的影响力杠杠 css 专家级

[阮一峰](http://www.ruanyifeng.com/blog/) | 其文章简洁易懂深入浅出，关注多年，著作[《ECMAScript 6标准入门》](http://es6.ruanyifeng.com/)

[张鑫旭](http://www.zhangxinxu.com/wordpress/) | 成名多年的、高产的前端大湿

[聂微东](http://www.fefork.com/) | 本篇记录就是借鉴了聂老师的文章，文章更新不多，但都是精品

[轩枫阁](http://www.xuanfengge.com/) | 设计跟内容做的很好的博客，博主是个2014级的毕业生（感觉比 13 年毕业的我厉害好多）（手动泪目）

网站


 名称 | 备注/说明 

 ----- | ----- 

[stackoverflow](https://stackoverflow.com/) | 技术问答

[medium](https://medium.com/) | 技术文章分享订阅

[quora](https://www.quora.com/) | 问答平台

[segmentfault](https://segmentfault.com/) | 国内技术问答

[掘金](https://juejin.im/timeline) | 国内技术文章分享订阅

[知乎](https://www.zhihu.com/) | 国内问答平台

[v2ex](https://www.v2ex.com/) | 国内程序员聊天扯淡论坛

设计


 名称 | 备注/说明 

 ----- | ----- 

[dribbble](https://dribbble.com/) | 知名设计网站，没有灵感了就上去看看

[优设](http://www.uisdc.com/) | 设计师学习平台

[ui 中国](http://www.ui.cn/) | ui 中国

### 前端框架

 名称 | 备注/说明 

 ----- | ----- 

[React](http://reactjs.org/) | facebook 出品的前端框架

[Angular](https://angularjs.org/.org/) | Google 出品的前端框架

[Vue](https://vuejs.org.cn/) | 阿里（尤雨溪）出品的前端框架

react


  > Facebook 旗下 js 框架， learn one，write anywhere

 名称 | 备注/说明 

 ----- | ----- 

[react官方文档](https://facebook.github.io/react/docs/) | 官方文档，看看 api 挺好，这里有其中文网[汉化文档](http://reactjs.cn/react/docs/getting-started.html)

[Redux](http://redux.js.org/) | 跟 react 配合的最好的状态容器，解决了 react 的 props 不能跨 components 传递的问题，这里有其[汉化版文档](https://camsong.github.io/redux-in-chinese/index.html)

[React-Native学习指南](https://github.com/ele828/react-native-guide) |learn once，write anywhere

[React 编程规范](https://github.com/dwqs/react-style-guide) | React 编程的各种基本规则

[react-boilerplate](https://github.com/mxstbr/react-boilerplate) | 非常全面的 react 项目构建模板

组件库


 名称 | 备注/说明 

 ----- | ----- 

[ANTD](https://ant.design/index-cn) | 蚂蚁出品的 react 组件库

[element-UI](https://eleme.github.io/element-react/#/zh-CN/quick-start) | 饿了么出品的组件库

[bootstrap](http://www.bootcss.com/) | twitter 出品的前端 UI 框架

[Material-UI](http://www.material-ui.com/) | Google Material 风格的前端 UI 框架

[Amaze UI](http://amazeui.org/) | 有名的开源 HTML5 跨屏前端框架	

CSS 相关


  > CSS 的发展相对遍地开花的 JavaScript 慢了很多，前几年只能从 bootstrap ，purecss 等类库上做文章，之后less、sass等预处理器，PostCSS 及基于它的插件，CSS 模块化，让 CSS 开发繁荣了起来

 名称 | 备注/说明 

 ----- | ----- 

[Less](http://lesscss.org/) | css 预处理器，入门简单，功能强大

[Sass](http://sass-lang.com/) | css 预处理器，比 less 更强大

[anicollection](http://anicollection.github.io/#/) | CSS3 动画库，收集了常用的 CSS3 进入、退出、闪动等动画

[CSS3 loading](http://www.yunrui.co/26261.html) | 文章收集了很多 css loading 动画

[css & svg loading](https://codegeekz.com/best-css-svg-loaders-and-spinners/) | 也很全面 css & svg 动画

[css3-icons](http://www.uiplayground.in/css3-icons/) | 使用 css3 做的各种小图标

[css3gen](http://css3gen.com/) | css3 工具，调整一些细致的 css3 动画、3D效果、滤镜、阴影时可以使用这个

[字蛛 font-spider](http://font-spider.org/) | 腾讯出品的中文字体压缩器，把需要的文字从字体文件里挑出来，大幅压缩字体文件

post-css


 名称 | 备注/说明 

 ----- | ----- 

[PostCSS](https://github.com/postcss/postcss) | 请看[《PostCSS深入学习》](http://www.w3cplus.com/PostCSS/postcss-deep-dive-what-you-need-to-know.html),以及[ IBM 的这篇文章](https://www.ibm.com/developerworks/cn/web/1604-postcss-css/)

[css-modules](https://github.com/css-modules/css-modules) | css 模块化解决方案

[Autoprefixer](https://github.com/postcss/autoprefixer) | 自动生成 css 的浏览器前缀

[cssnano](http://cssnano.co/) | 样式级别的 css 压缩工具

[postcss-sprites](https://github.com/2createStudio/postcss-sprites) | 雪碧图生成工具，可生成各种类雪碧图

[stylelint](https://github.com/stylelint/stylelint) | css 检测纠错工具

JS 相关


  > 一些 js 的框架、类库、工具

 名称 | 备注/说明 

 ----- | ----- 

[Lodash](http://lodashjs.com/) | 具有一致接口、模块化、高性能等特性的JavaScript 工具库

[Threejs](http://threejs.org/) | 知名的js 3D库，封装了底层的WebGL图形接口，提供简化、高效的三维图形程序开发

[create.js](http://createjs.cc/) | 强大且轻量的动画游戏框架，包括 easeljs、preloadjs、tweenjs、soundjs

[GSAP](http://greensock.com/) | 强劲流畅的动效库，官方宣称比 jquery 动画快 20 倍

[parallax](http://matthew.wagerfield.com/parallax/) | 一个视差效果引擎，效果不错

[textillate.js](http://textillate.js.org/) | 文字动画效果的库

[ECharts](http://echarts.baidu.com/) | 百度出品的图表、可视化库，简单好用功能强大，之前更多人选择的是 [Heightcharts](http:/www.hcharts.cn/)

[AlloyFinger](https://github.com/AlloyTeam/AlloyFinger) | 腾讯出品的移动端手势操作库，含无依赖版跟 react 版。同类型的还有 [hammer.js](http://hammerjs.github.io/),以及百度出品的 [Touch.js](http://touch.code.baidu.com/) 

[Swipper](http://www.swiper.com.cn/) | 开源、免费、强大的移动端触摸滑动插件，微信里的多数滑动类的 H5 都是用这个 

[FullPage](http://alvarotrigo.com/fullPage/#firstPage) | 另一款强大的滑动插件

[PhotoSwipe](http://photoswipe.com/) | 另一款强大的滑动插件

[Pace](http://github.hubspot.com/pace/docs/welcome/) | 加载进度条的插件，通过请求量判断页面加载进度，可以自定义进度条样式

[watch.js](https://github.com/melanke/Watch.JS/) | 监控对象属性变化的小库，“每当对象属性改变的时候，执行你的函数”

[artTemplate](http://aui.github.io/artTemplate/) | 超快的前端模板引擎，而且支持预编译

[CountUp.js](https://inorganik.github.io/countUp.js/) | 让数字由大到小或小到大递进变化

[RandomColor](https://randomcolor.llllll.li/) | 可以随机各种颜色的 js，很有意思

[smoothscroll](https://github.com/iamdustan/smoothscroll) | 使网页平滑滚动到指定位置，小巧，无任何依赖

构建工具


 > 开发、优化、调试、部署 一条龙服务

 名称 | 备注/说明 

 ----- | ----- 

[Gulp](http://www.gulpjs.com.cn/) | 强大的前端自动化构建工具

[WebPack](http://tympanus.net/codrops/) | 强大的打包构建工具

[Yeoman](http://yeoman.io/) | 强大的前端综合构建工具，包含了 npm、gulp 及一些常用插件

[FIS](http://fex-team.github.io/fis3/) | 百度出品的前端工程构建工具，本土出品，更易使用

[weflow](https://weflow.io/) | 腾讯出品的高效、强大、跨平台的前端开发工作流工具

[eruda](https://github.com/liriliri/eruda) | 移动端调试工具

[AlloyLever](https://github.com/AlloyTeam/AlloyLever) | 腾讯出品的移动端调试工具

语言


 > 前端需要掌握的各种语言

 名称 | 备注/说明 

 ----- | ----- 

[Node](https://nodejs.org/en/) | 一个开放源代码、跨平台的、可用于伺服器端和网络应用的运行环境

[Python](http://tympanus.net/codrops/) | 一种面向对象的，直译式的电脑语言

[Ruby](https://www.ruby-lang.org/zh_cn/) | 一门开源的动态编程语言，注重简洁和效率。Ruby 的句法优雅，读起来自然，写起来舒适。

[markdown](http://www.appinn.com/markdown/) | 非常流行的标记语言

GitHub


 > 全球最大的同性交友平台

 名称 | 备注/说明 

 ----- | ----- 

[Git 教程-廖雪峰](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000) |  全面易懂的Git教程

[Git 学习资料整理](https://github.com/xirong/my-git) | 内容包括很多 Git 的相关资料，star 1200+

[Travis CI](https://travis-ci.org/) | 主流的持续集成工具

[Circle CI](https://circleci.com/) | 另一款主流的持续集成工具

[Coveralls](http://coveralls.io/) | 它可以帮你生成一个展示代码覆盖率的徽章

[SauceLabs](https://saucelabs.com/) | 跨浏览器集成测试 ,提供了多重浏览器环境，帮助你在多个浏览器中自动运行脚本

编辑器


 名称 | 备注/说明 

 ----- | ----- 

[Sublime Text下载、使用教程、插件推荐说明、全套快捷键](http://www.ferecord.com/sublimetext3.html) | 我自己的博客文章，当时总结的很详细

[VScode](https://code.visualstudio.com/) | 微软出品的编辑器，一夫当关万夫莫开，看正规军如何吊打散户

### 软件/工具 推荐

> 善用佳软，节省时间、提高效率，我们可以拿省下的时间发发呆喝喝茶享受人生

Windows


 名称 | 备注/说明 

 ----- | ----- 

[Evernote](https://www.yinxiang.com/?returning) | 配合 chrome 浏览器的 剪藏 插件，把网上看到的文章分类收藏

[Ditto](https://xbeta.info/ditto.htm) | Ditto 是最好的免费剪贴板增强软件，是提高效率的首选方案

[Total Commander](https://xbeta.info/studytc/) | TC 是善用佳软唯一大力推广的非免费软件 (第二力推广的软件是 Vim)，个人认为是全宇宙最好用的资源管理软件

[Listary](https://xbeta.info/listary4.htm) | 极优秀的工具！它让Windows的静态列表，变作了动态交互；它让原始的视觉定位，变成了即输即搜的实时过滤。

[IrfanView](https://xbeta.info/irfanview-v441.htm) | 顶级免费看图软件，功能跟速度上完爆其他同类软件

[XMind](https://xbeta.info/xmind.htm) | 顶级商业品质的思维导图（mindmap）和头脑风暴（brainstorm）软件，“国产而国际化发展；商业化而兼有开源版本；功能丰富且美观”，也有 mac 版

[LICEcap](屏幕录制工具) | 简单好用，录制屏幕，导出 gif，也有 mac 版

[马克鳗](http://www.getmarkman.com/) | 高效好用的设计稿标注、测量工具，设计师、产品经理应该必备，也有 mac 版

Mac


 名称 | 备注/说明 

 ----- | ----- 

[Alfred](http://sspai.com/27900/) | mac 上著名效率软件，称为神兵利器也不为过，有快速启动、剪贴板增强、词典、计算器、构建工作流等等功能，非常强大

[CheatSheet](https://www.mediaatelier.com/CheatSheet/) | 快速提示快捷键工具，在任意界面长按 command 键会显示当前支持的所有快捷键列表

[iTerm2](https://www.iterm2.com/) | mac 上替代自带终端的软件，有自动变色、只能选中、自动完成、常用快捷键等等功能，被称为 mac 上最好用的终端

[oh my zsh](https://github.com/robbyrussell/oh-my-zsh) | zsh 被称为 unix 系统中最强大的 shell，但 zsh 的默认配置及其复杂繁琐，oh-my-zsh这个开源项目，让zsh配置降到0门槛

[Homebrew](http://brew.sh/index_zh-cn.html) | mac 上的包管理工具，安装后可以使用 brew 来快速安装、管理各种软件、解释器、编译器，省心省力

[Go2Shell](http://zipzapmac.com/go2shell) | 一个可以快速在 Finder 当前目录打开 Shell 的工具，小巧，非常好用，可以将默认终端设成 iTerm2

[CRAX Commander](http://crax.soft4u2.com/) | mac 上的一款文件管理软件，mac 上没有 Total Commander 是个很大的遗憾，这个软件可以实现 TC 约 60% 的功能，已经比 Finder 好用很多

[MPV](https://github.com/mpv-player/mpv) | mpv 以 ffmpeg 为解码器，可以调用 OS X 平台的硬件加速解码，支持 ass 字幕，有高级 OpenGL scale 算法，还支持 lua 扩展脚本，总之是 mac 上好用的全能播放器

[IINA](https://lhc70000.github.io/iina/zh-cn/) |  美观、性能强大且能通吃所有视频的播放器

[CleanMyMac3](http://www.mycleanmymac.com/) | 目前mac最强大的系统清理工具，可以清除mac系统多余的语言包、系统缓存、应用程序、PowerPc软件运行库等，是个硬盘瘦身的好工具

[Little Snitch](https://www.obdev.at/products/littlesnitch/index.html) | 能防止应用程序在你不知道的情况下自动访问网络，你可以定义不允许访问。比如你安装破解了 adobe 的软件后需要禁止一切 adobe 相关的网络连接，除了修改 host 外还可以用这个

[SSH Tunnel](https://itunes.apple.com/cn/app/ssh-tunnel/id734418810?mt=12) | 带 GUI 的 shh 隧道工具，爬墙必备，使用 shh 穿透时就不必使用命令行了

[Xcode](https://itunes.apple.com/cn/app/xcode/id497799835?mt=12) |  苹果软件开发工具，mac 跟 ios 开发必备，而且 Mac 下如果不安装 Xcode，部分常用的指令都不支持

[Surge](https://itunes.apple.com/us/app/surge-web-developer-tool-proxy/id1040100637) | 网络调试工具，可以理解为高级版的适用 ios 手机的 Fiddler，还可以作为翻墙工具

[Mac 开发配置手册](https://aaaaaashu.gitbooks.io/mac-dev-setup/content/index.html) | 手册内容为「如何让一部全新的 MacBook 快速完成开发环境配置」，主要面向 Web 开发者，内容简单基础

[awesome-mac](https://github.com/jaywcjlove/awesome-mac) | 大而全的 mac 工具合集

杂七杂八


 > 一些跟前端相关的未分类收集

 名称 | 备注/说明 

 ----- | ----- 

[A collection of HTML head elements](https://github.com/joshbuchea/HEAD) | 详细介绍了HEAD中的各元素

小结


#### 背景

网上的前端导航类的总结非常多，文头提到的 [前端瑞士军刀](https://github.com/nieweidong/fetool) 就是此类文章中集大成者。

Evernote、浏览器书签里收藏了很多前端相关的文章跟知识点，一直想梳理下做个总结，就把部分内容总结到这篇文章上，希望以此为契机逐步完善。

#### 目标

希望这个资源总结能做的比较精简。

但其实不太确定哪些该删。

总之按个人喜好来吧，逐步添加完善。

#### 待添加

- [ ] node.js

- [x] 框架

	- [ ] vue.js

- [x] 软件/工具推荐

	- [ ] app

	- [ ] chrome 插件