# questionlist

**Repository Path**: furhacker/questionlist

## Basic Information

- **Project Name**: questionlist
- **Description**: No description available
- **Primary Language**: PHP
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2018-03-28
- **Last Updated**: 2022-03-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

工作常用技术笔记
===============

[![PHP Version](https://img.shields.io/badge/php-%3E%3D5.6-8892BF.svg)](http://www.php.net/)
 > 本文主要简单记录一些个人学习过程中的一些技术内容。

#### 您可以通过以下方式联系到我：
 - 邮箱 furhacker@163.com
 - 博客 <a href="http://www.furhacker.cn/" target="_blank">青石渔者 furhacker.cn</a>
---

## 目录
 - [前端综合资源](#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)


---
<h3 id="resource">前端综合资源</h3>

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

 名称 | 备注/说明 
 ----- | ----- 
[前端瑞士军刀](https://github.com/nieweidong/fetool) | 相当全面的一篇资源总结，不止包括前端
[QQ前端群交流群规](https://github.com/jsfront/src/blob/master/qq.md) | 看了让你跪的前端交流群群规，下方有大量资源 



<h3 id="blog">前端博客</h3>

  > 一些不错的团队或个人博客，部分是英文博客，建议加进 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 年毕业的我厉害好多）（手动泪目）



<h3 id="site">网站</h3>

 名称 | 备注/说明 
 ----- | ----- 
[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/) | 国内程序员聊天扯淡论坛


<h3 id="design">设计</h3>

 名称 | 备注/说明 
 ----- | ----- 
[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/) | 阿里（尤雨溪）出品的前端框架


<h4 id="react">react</h4>

  > 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 项目构建模板


<h3 id="conponent">组件库</h3>

 名称 | 备注/说明 
 ----- | ----- 
[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 跨屏前端框架	




<h3 id="css">CSS 相关</h3>

  > 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/) | 腾讯出品的中文字体压缩器，把需要的文字从字体文件里挑出来，大幅压缩字体文件



<h4 id="post-css">post-css</h4>

 名称 | 备注/说明 
 ----- | ----- 
[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 检测纠错工具



<h3 id="JS">JS 相关</h3>

  > 一些 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) | 使网页平滑滚动到指定位置，小巧，无任何依赖



<h3 id="buildTool">构建工具</h3>

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

 名称 | 备注/说明 
 ----- | ----- 
[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) | 腾讯出品的移动端调试工具



<h3 id="langeage">语言</h3>

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

 名称 | 备注/说明 
 ----- | ----- 
[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/) | 非常流行的标记语言



<h3 id="Github">GitHub</h3>

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

 名称 | 备注/说明 
 ----- | ----- 
[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/) | 跨浏览器集成测试 ,提供了多重浏览器环境，帮助你在多个浏览器中自动运行脚本



<h3 id="editor">编辑器</h3>


 名称 | 备注/说明 
 ----- | ----- 
[Sublime Text下载、使用教程、插件推荐说明、全套快捷键](http://www.ferecord.com/sublimetext3.html) | 我自己的博客文章，当时总结的很详细
[VScode](https://code.visualstudio.com/) | 微软出品的编辑器，一夫当关万夫莫开，看正规军如何吊打散户

<!-- [package control](https://packagecontrol.io/) | sublime 的插件网站，所有的插件、主题等都在上面了，善用插件会让编辑器变得强大无比，节省生命，增加开发愉悦感 -->
<!-- [emmet 快捷键文档](http://docs.emmet.io/cheat-sheet/) | emmet 的快捷键文档，极大提升敲代码速度  -->
<!-- [Sublime Text 3 搭建 React.js 开发环境](https://segmentfault.com/a/1190000003698071) | 开发 react 项目时必装的几个ST插件 -->



### 软件/工具 推荐

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

<h4 id="windows">Windows</h4>

 名称 | 备注/说明 
 ----- | ----- 
[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 版

<h4 id="mac">Mac</h4>

 名称 | 备注/说明 
 ----- | ----- 
[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 工具合集



<h3 id="other">杂七杂八</h3>

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

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





<h3 id="summary">小结</h3>

#### 背景

网上的前端导航类的总结非常多，文头提到的 [前端瑞士军刀](https://github.com/nieweidong/fetool) 就是此类文章中集大成者。
Evernote、浏览器书签里收藏了很多前端相关的文章跟知识点，一直想梳理下做个总结，就把部分内容总结到这篇文章上，希望以此为契机逐步完善。


#### 目标

希望这个资源总结能做的比较精简。
但其实不太确定哪些该删。
总之按个人喜好来吧，逐步添加完善。