开源软件名称(OpenSource Name): nieweidong/fetool开源软件地址(OpenSource Url): https://github.com/nieweidong/fetool开源编程语言(OpenSource Language): 开源软件介绍(OpenSource Introduction): 大前端工具集
这个项目的定位是 大前端程序猿的百宝箱 。主要针对 前端方向和 Node 方向;主要内容是国内外优秀的 库
、工具
、套路
、设计
、交互
,或关注的 技术博客
、技术组织
、技术公众号
等等,反正用 瑞士军刀 来总结这篇文章再合适不过了。
对于列在这里的几乎所有项目,我都有去实践与了解,所以我会尽量给出中肯的建议和理解,也希望大家能多关注我的评语:)
感谢和期待大家的 PR,我会及时回复的~
目录
正文
技术博客/技术组织
虽混过俩家外企,但劳资技能树中“英文”这项还是灰色的...所以俺关注和收藏的站点主要以中文为主。
分享一下最近自己的体会:学习是最能缓解焦虑的。by 20180610_16:46:18
极客时间 - 知识付费。较热门的方向都有非常干货的课程,目前大多数的课程不太适合小白,但是非常适合有经验的程序员进阶。对我个人帮忙比较大的两个大专栏:技术领导力 300讲
、左耳听风
;除此之外我还比较关注 微服务相关
、区块链相关
的专栏。
MDN - 无数的资源再等着你探索,追标准和新特性肯定得重点关注的网站。PS:偶尔需要翻墙。
Awesomes.cn - 国人维护的前端资源库,深度对接到 Github
,分类和展现清晰,值得收藏
如何跟上前端开发的最新前沿 - RT,不解释
慕课 - 大量的在线计算机课程。 虽然初、中级居多,但是不乏有巨作值得细细品尝
美团技术团队 - 新美大的技术口碑这些年做的挺好,尤其在 高可用 方面,推荐关注。
阮一峰 - 关注多年,拜读其 ES6 系列。虽网传靠写书进鸟阿里,但博客内容确实够丰富
W3Cplus - 大漠(《图解 CSS3》作者)在国内的影响力杠杠的,Sass
专家级
淘宝前端团队 - 内容涵盖 Web
和 Node
,要深度有深度,要广度有广度
奇舞团博客 - 坚持是最宝贵的,别人的奇舞周刊早已经过百期了
大搜车前端 - 前端网红 小芋头君 所在的团队,文章质量高,尤其是 Node 方向的
百度 FEX - 代表作 FIS
、UEditor
、WebUploader
、KityMinder
腾讯全端 AlloyTeam - 腾讯 Web 前端团队,博客真的有点丑...
粉丝日志 for 张丹 - 大爱作者写的 Node
系列
张鑫旭 - 成名多年的、高产的前端大湿,CSS
猛人
技术公众号
博客搭建
Hexo - 快速、简洁且高效的博客框架,照着文档分分钟就可以在本地跑起来。Github
地址:Hexo
Jekyll - 将纯文本转化为静态网站和博客。由于环境依赖的问题,所以安装起来可能稍费劲那么一点。Github
地址:Jekyll
GithubPages - 免费的静态站点。配合着 Hexo
或 Jekyll
的模板,分分搭建出一套炫酷的个人博客
Tumblr - 轻博客的祖师爷,各种各样的主题感觉不错
Wordpress - 这玩意古老到都不想介绍
使用 Hexo/Jekyll + GitPage
,前端搭建静态博客那是相当 easy。用 Markdown
写文章做记录,再 push
到 Github
上,分分钟高大上有木有
再推荐几款视觉效果极佳的 Hexo
主题,且在 Github
上的 star
都很不错:
不能偏心,所以也推荐几款 Jekyll
的好主题:
HTML
纯 HTML
相关其实没有好玩的项目,所以这儿展示的内容主要都是一些模板,而且以下列出来的都是免费的,方便拿取搭架后台或者博客
HEAD - 最全的 <head>
列表,真心佩服这种偏执的整理能力
blur-admin - 视觉冲击极强的管理后台,各种动画效果。PS:因为团队有ant-design 的使用经验,感觉使用起来不是很顺畅,这套后台又是基于AngularJS
,所以再三权限之后还是没实际使用,劳资还是别给团队添乱了,囧...
AdminLTE - 很小清新的后台模板,每次看preview 页面都觉得很有视觉冲击
gentelella - 刚用这个搭建了我司内部用的的数据平台,效果喜人。模板实现的功能比较全,比如登录、注册甚至各种 widget
,所以最终交付的时候,自己几乎没写几行CSS。
material-design-lite - Star
数超过2W的开源模板项目,包含了多套简洁的 templates
,可以用于博客、后台或者企业首页。
CSS
浏览端 JS
Swiper/PhotoSwipe/fullPage
有这仨库,微信里常见的 H5 页完全不是问题哒
Project Build
Gulp + Webpack 的使用__套路__参考: learning-gulp
Gulp 资料收集:use-gulp
推荐篇与 Webpack 相关的文章《CSS Modules 》
Webpack 用起来吼吼:webpack-howto
Node Package
作为一名大前端甚至是多端,Node
绝逼是必备的一块
有关 Node
的学习资料,请访问 Node 学习资料
这里介绍些有特色且前端有必要知道的包
anywhere - 随时随地将你的当前目录变成一个静态文件服务器的根目录
supervisor - 监控 Node 代码,自动重启。 A supervisor program for running nodejs programs
nodemon - 监控 Node 代码,自动重启。 Nodemon is a utility that will monitor for any changes in your source and automatically restart your server.
pm2 - 是一个带有负载均衡功能的 Node 应用的进程管理器; 是 Forever 的进阶库,想了解的可以看这篇文章《拥抱PM2》
cz-cli - 刚用上的一个 git ci
工具,让我们的项目提交代码更规范、更有套路。打算写篇文章分享下,文章正在准备中,写完后会补地址。
async - 一个流程控制工具包,提供直接而强大的异步功能
optimist - 当需要处理 CLI
中的 argv
时(即命令行传参),用它就行了
lodash - JS 工具库 Underscore.js
的一个 fork 发展而来
socket.io - 预计 Node 的实时框架 聊天室、页游等对实时性有高要求的较适用
Inquirer.js - 实现的效果比 Commander 简单、有趣,贴个 GIF供大家参考:loc
Commander - 用 Commander.js 可以方便的创建基于 Node 的命令行工具,比如 vue-cli 这类,瞬间觉得自己又高大上了呢~
Mongoose - 让 NodeJS 更容易操作 Mongodb 数据库; 附上一篇Mongoose 学习参考文档
CNPM - 淘宝 NPM 镜像,提供了 NPM 同步的服务 当然可不仅仅这样,利用 CNPM 可以打造__企业/个人__私有的 NPM 服务 推荐篇搭建私有NPM的文章:《CNPM搭建私有的NPM服务》
koa - 玩 Node 都知道 express,但使用 koa 的就少很多,门槛比 Ex 稍高 通过 generator 避免繁琐的回调函数嵌套,强烈推崇 官方的文章教程
Shipit - 一个强大的自动化部署工具。 shipit 很多地方非常类似 gulp,他们的核心都是任务系统。
node-inspector - Node 调试工具,使用起来跟 Chrome 的 JS 调试器很相似
winston - Node 服务最流行的日志库之一
co - 用 generator 写法让异步代码同步
thenify-all - 把异步的方法变成 Promise 的 Promisifies all the selected functions in an object
PhantomJS - 一般用来做抓取截图和无界面测试 也可以用来操作 DOM 和网络监测,很好玩的库 Quick Start
ava - 偶是应TJ大神推荐而得之的 ava
未来的测试运行器
Mocha - Node 里最常用的测试框架; 它支持多种 Node 的 Assert libs; 同时支持异步和同步的测试,同时支持多种方式导出结果; 也支持直接在 browser 上跑 JS 代码测试。
koa-validate - koa
的校验库 可以非常方便的对 queryString
或 postBody
的信息进行验证
line-reader - 基于steam
的按行读文件,偶处理日志时用哒 要不实现一个按行读文件,又得 steam
、 又得 chunk
,还是比较麻烦的
binary 作者是大神 substack ,对应的处理 PHP/Python
中的 unpack
方法。英文解释:Unpack multibyte binary values from buffers and streams.
everyauth - OAuth 的集成解决方案
shelljs - 写 Node 时难免需要用 shell 去操作些神马 shelljs 是基于 Node 的 shell 工具,API 及其简单
hashids - 看名称就懂,给 userid 加解密用的
node-pool - 让 Node
有连接池的概念
colors - 花俏的小工具 让打印console.log
时有更好的展示样式
n - 控制Node的版本,想升级一行代码搞定
supervisor
和 nodemon
这俩都是监控 Node 代码,使得每次修改代码后会,开发 Node 程序必备
以上库俺都有使用过,甚至有不少都是项目开发中、各种特定场景下必用的,有任何使用问题欢迎沟通哈:)
Node Project
暂无
精选阅读
前端技术
Node 学习资料
前端面试
笔试面试知识整理 - 打开其 Gitbook 上的地址我都惊呆了。虽然有部分内容待完善,但是光浏览目录都是享受。
在 LinkedIn 做面试官的故事 - 非面试题,介绍 LinkedIn 的面试过程 文章有很多中肯的建议和想法,推荐阅读
大漠:写给前端面试者 - 这篇文章不涉及任何的面试题 大漠与大家聊聊面试者与被面者之间的感受...
前端面试题 - Git 上非常火的前端面试题,start17k+
前端面经 - 主要内容是些前端面试笔试题和面试套路,值得阅读
其他技术
工具/软件
Web
百度脑图 - 非常方便的思维导图工具。功能强、样式佳、无广告,算百度出的良心产品之一。除了 Evernote,脑图是我非常依赖的记录工具
CanIuse - 前端必备 ;查看浏览器对各种新特性的兼容情况
overapi - 最全的开发人员在线速查手册
ProcessOn - 和百度脑图的功能类似,脑图工具。但是还有社交、通讯的功能,提倡 协作绘图 的理念。感觉网页跳转的时候有点慢,模板样式比百度脑图好看(个人观点),而且团队协作的功能真的相当好用。
Slides - 一个所见即所得的 WebPPT 编辑器。虽然装X效果一般,但是比较推荐,因为无论懂不懂 UI,做出来的效果不会太难看
faviconer.co - 一个所见即所得的icon生成器,很好用
smallpdf - 提供各种格式和 PDF 互相转换
Cmd Markdown - 好用的 Web 版 Markdown 编辑器
VimAwesome - Vim 插件集合,Vim 党必备
Tower - 小而美的多人协同工具。 不光只有 Web 版,还有 iPhone、iPad、Android、微信版。
StackEdit - 又是一款 Web 版 Markdown 编辑器
墨刀 - 一个在线移动应用原型制作工具。 旨在帮助产品经理快速制作可在手机端展示的移动应用原型。
htm2pdf - HTML to PDF
Speaker Deck - 在线的演讲稿展示平台
RunJS - 在线编辑、展示、分享、交流你的 JavaScript
代码
Bootswatch - Bootstrap
的免费模板
AdminLTE - 又是一个 Bootstrap
的免费管理后台
carbon - 能够帮助你分享漂亮的示例代码
MDBootstrap - 世界上最受欢迎的框架,用于构建响应迅速,移动优先的网站和应用程序
APP
以下列表中的 APP 都是不区分系统平台的
印象笔记 - 免费账号完全够用,跨平台跨终端的记录软件
365日历 - 首先肯定比系统自带的日历强大,要不推荐个蛋蛋 俺一般用来搞目标管理,比如学习计划和工作计划 生活中会订阅演唱会、电影首映的信息
多看阅读 - kindle 确实好,但是懒得随身带着 多看还算不错,书较多且偶尔有特价比较爽
Surge - 非免费 牛逼的网络开发与调试工具,前端必备
Monkey - Monkey 是 iPhone 上一个 GitHub 第三方客户端。 展示 GitHub 上的开发者的排名,以及仓库的排名
Mac 软件篇
对于美好事务的追求无论何时都不算晚。
Mac 下的软件那么多,又是免费又是付费,应该怎么选呢?我来分享下我的推荐列表,推荐的优先级老规矩,从上往下依次降低。
Alfred - 免费 ,绝对的推荐Top1,很提效率,高级版 Powerpack
售价 £17
。除了能快速搜索和打开应用程序之外,查找文本文件、全文检索、调起浏览器搜索和计数器都是俺经常使用的功能。如果想知道具体咋用,推荐阅读老池(池建强)的文章:《神兵利器—Alfred》
iTerm2 - 免费 。Mac
终端功能少又不好看,iTerm2
可以解救你~ 推荐篇文章:《让你的命令行丰富多彩》
HyperDock - 售价 ¥68
,感觉还是很值的(特么我还想说,Windows
数年前就自带的功能,在 Mac
上还收费,略忧伤)。预览和快速切换窗口太有必要了,能用快捷键控制窗口,能让拖拽到边缘的窗口自动调整大小(window早就有的功能),真心能提高效率。推荐篇中文的文章:让Mac的窗口飞
ATOM - 免费 。2015/7 之前,在桌面环境下偶最喜欢的编辑器是 Sublime
,但之后就是 ATOM
,俺也专门为它写了篇 《使用纪要》
Surge - $49.99
。关注 IOS
开发或者常备梯子的同学,肯定都知道这大名鼎鼎的软件。价钱从 ¥68
涨到 $99
也让偶咋舌,背后的故事就不细说了,感兴趣可自行去谷歌百度一下。PS:翻墙软件 小飞机ShadowsocksX 也非常棒,同样推荐:“轻量级科学上网姿势,改变您的生活体验!”
ngrok - 一条命令解决的外网访问内网问题,无需任何配置,下载客户端之后直接一条命令让外网访问内网不再是距离.
1Password - 免费 试用一个月,售价不便宜 $64.99
。如果觉得对各种账号的密码管理心累,那么推荐你使用,这个钱肯定值,Mac
和 iPhone
通用,爽歪歪。如果账号密码都是那种一、俩个套路,而且被盗也随意,那么用不用就无所谓啦
Go2Shell - 一款适合程序员的神器。可以快速在当前目录打开 Shell 的工具,比如直接在 Finder 里打开 ITerm2。
Sequel Pro - 免费 。好用的 Mysql工具
OmniPlan - 免费 试用 14天。甘特图工具,项目 Leader必备。
Manico - 免费 版已经很好用了,全功能版售价 ¥25
。快捷启动和切换 APP
的工具,高效的第一步
Moom - 售价 $10 ,有试用版。个人觉得这钱花的值,设置快捷键之后可以方便的调整每个窗口的位置。我不管在家还是公司都是开双屏,外接屏幕三分之一 iTerm
,三分之二 ATOM
,日常使用时各种全屏、居中、靠左、靠右等用快捷键来回着换,辛福感满满的。
CheatSheet - 免费 。能够显示当前程序的快捷键列表,默认的快捷键是长按 ⌘
奇妙清单 - 免费 漂亮的任务清单管理工具。有简中和繁中版,操作和样式都比较简洁,推荐有 TODO需求的人士使用。最关键的是其支持所有设备而且免费。
马克鳗 - 免费 版已经够用啦,收费版是 60/年
。英文名 MarkMan
,非常强大好用的标注、测量工具,强烈推荐
BrowseShot - 免费 。偶正在使用的网页截图工具,强烈推荐
Wireshark - 免费 。说实话,Mac
下木有 Fiddler
挺不习惯,不过在有更强大的替代品,虽然有点复杂...还好后来下载到便宜(¥68
)的 Surge
做替代品
LICEcap - 免费 。屏幕录制工具,支持导出 GIF 动画图片格式 轻量级、使用简单,录制过程中可以改变录屏范围
Bartender 2 - 售价 $20.97
,但是可 免费 试用四周。Mac右上角菜单的管理工具,试用之后右上角的菜单瞬间清爽了,反正试用下也不花钱:)
BeyondCompare - 免费 。在Windows下就开始用了 比对文件和文件夹杠杠好使,Merge必备工具
SourceTree - 免费 。属于大名鼎鼎的 Atlassian
,一款好用的的 Git
客户端工具,重点是 支持中文 ,哈哈:)
focus booster - 免费 已经够用,当然还有更高级的 INDIVIDUAL/PROFESSIONAL
,售价分别是 $3/$5
。因为比较在意时间管理,所以当工作压力较大时,这软件是俺的必备之物
WebTorrent - 免费 。直接播放种子,你懂得。年轻的斯坦福大神 Feross 开发,Git上的开源项目哦。
WebStorm - $129 ,可试用一个月。功能超强的前端 IDE
,谁用谁知道 PS:貌似俺插件装多了,用着卡卡的,风扇呼呼转...然后俺就卸载装了,装了 ATOM
...
MindNode - 售价 $29.99 ,有免费试用版。这是款漂亮的思维导图工具。其实 百度脑图 这类 Web 上的工具绝对够用了,不太推荐...
Mou - 我曾使用过的 Markdown 编辑器,不推荐使用。原本已经准备去掉,但是偶还是想让大家了解下这个有意思的事情:《一年了,那个闻名遐迩的 Mou 你还记得吗?》
Fliqlo - 视觉控会喜欢的屏保软件。纯深色界面上铺满着大大的时间,非常好的简约效果。
以上列出来的都是偶觉得比较有意思、有特点的软件。当然,类似 Docker
、Polarr(泼辣修图)
等这类都太小众;有道翻译
、Evernote
、Foxmail
等这类又太大众;然后有些软件买了觉得有点“亏”,比如刚出手买入的 Final Cut Pro
,其实机器自带的 iMovie
就挺好了(完美诠释《Final从入手到放弃》)。所以,这几类就不一一往这列举啦~
Linux
作为一名程序员兼工具控,我期待自己无比高效
首先,都是免费哒;然后,所列项目都是针对 CLI(命令行界面)
哒;最后,探索无止境
oh-my-zsh - 终端党 必备,好处太多太多,比如炫酷的外观,超强的易用性...推荐大家阅读知乎的问题:《为什么说 zsh 是 shell 中的极品?》
spf13-vim - 对于 Vim 偶之前做了好多文档和记录,但是自从了解有这个套路,那些记录都可以丢掉了。不过建议想了解的去看看 .vimrc 中的 Plugin,确实足够大而全。PS:如果遇见 neocomplete does not work
之类的错误,可以参考 Problems with Vim and lua?
Vundle - Vim 党必备。用于管理各种 Vim 插件,有 Git 就可以安装 $ git clone https://github.com/gmarik/vundle.git ~/.vim/bundle/vundle
tree - linux 以树状图逐级列出目录的内容,装逼效果和实用功能都不错
cloc - 可用来计算 文件夹中各种语言的代码占比情况。展示内容非常直观,如某目录下 JavaScript
有多少个文件,共多少空格行数、注释行数、代码行数,就这些简单粗暴的内容。常见的安装方式可通过 npm
来进行安装。
oneapm - 强大的运维工具,提供多种监控客户端; 有采集、分析、展示等一套功能; PS:我这用了服务器监控(免费哦)
httpie - 一个 CLI 中的 HTTP 客户端,用法简单,非常适合用来搞调试、测试
ESLint - 前端大神Nicholas C. Zakas 创建。JavaScript 辅助编码的规范工具,有效控制偶们的代码质量
Lucario 暗色系主题,支持 Vim, Atom, Sublime Text, TextMate, Terminal.app, iTerm, Xcode and XTerm
cmatrix - 作用就是装逼,可以在屏幕上显示经典的黑客帝国的数码雨效果(看官方文档上也有其他效果,俺就不往细研究了)。在 Mac 下安装非常简单,一步搞定:$ brew install cmatrix
Mac
请发表评论