Web设计开发资源分享

从08年开始创业以来，世界变了很多，但是有一个观点我一直坚信不疑：软件吞噬一切，而Web吞噬软件。

我看好Web的原因很简单：技术开发成本很低、代码和UI设计相对独立的架构、跨平台兼容性更好、迭代更新速度更快，完全符合未来的发展趋势。我相信未来Web会成为大部分软件应用的一部分，甚至是主要部分，而其他技术很有可能会沦为Web的一个外壳或者管道而已。这种关系，就好像是微信和运营商，最开始移动联通主宰了我们的通讯方式，而现在它们沦落为了微信的一个数据管道。

基于这样的判断，过去几年我一直都把我全部的投资都放在了Web领域。

你会问，既然Web技术那么优秀，为什么现在大部分的web应用还只是低技术含量的网站而已，而赚钱最多、最流行的却是非web的桌面软件和手机app呢？

其实这是一个社会问题，就好像IE6那么烂，但几十年来市场占有率一直稳居第一，但是从趋势上看，你会发现IE6的份额一直在降，业界也是怨声载道，退出历史舞台只是时间问题。软件行业也是如此，如Java，C，Perl之类的古老语言，几十年来几乎没有什么变化，稳定的躺在教科书里，学的人也很多，社会必须要消化掉这么多程序员，所以必须有这么多相应的开发岗位和产品。但是从趋势上看，你会发现这些古老语言的份额逐年下滑，而新的语言如Go，Node JS，Swift，Ruby等则会逐步成为新的主宰。

另外一方面，Web技术在2010年之前整体上还是很落后的，只能拿来做做普通网站而已；最近几年突然开始迅猛成长，出现了一大批优秀的新技术和框架，用途也变得越来越广泛，真正开始显示了其吞噬一切的潜力，这个速度到底有多迅猛呢？ 举个例子，你现在去书店里买任何一本Web方面的教科书，都会发现它已经是严重过时了，即使是最新出版的，从出版那天起就已经过时了。这样的发展速度，并不是我们这个世界可以承受的了的，至少需要几年来学习和消化，才能产生足够的人才积累和成熟的解决方案，去把这些技术大规模带入工业界，让我们拭目以待吧。

作为一个非科班出身的Web开发者和伪设计师，我最擅长的事情之一，就是找到这个行业最实用的开发和设计工具，用简单、高效的工作环境为自己的项目提供服务。

每次当我发现了某个靠谱的工具或产品，就会有冲动公开出来分享给更多人，尤其是跟我一样非科班出生的Web创业者，所以才有了这篇文章，本文会不定期更新。

自学编程/代码：

小白自学各种编程（入门）：http://www.codecademy.com/
小白自学各种编程（进阶）：http://teamtreehouse.com/ 和 http://code.tutsplus.com/
小白自学Html+CSS：http://www.codecademy.com/en/tracks/web
最适合初学者的两种web后台脚本语言：
PHP：http://wulijun.github.io/php-the-right-way/
Ruby：http://rubyonrails.org/
最适合产品工匠们的PHP框架：http://laravel.com/ （也是2014年和2015年美国最受欢迎的php框架调查双料第一），最新的版本是5。如果你对PHP不是特别熟，可以下载4.2的版本，更容易学习
在Mac系统下安装任意版本的PHP（及其插件）的最简单办法：http://phpbrew.github.io/phpbrew/
如果Laravel太庞大，可以找一些Micro Framework，比如：
Lumen：http://lumen.laravel.com/
Slim：http://www.slimframework.com/
PHP语言的常用库管理：http://getcomposer.org/
代码编辑器：
这款适合所有人：http://www.sublimetext.com/
这款是PHP工匠专用：https://www.jetbrains.com/phpstorm/
每天值得一读的Web开发优质信息：
http://www.sitepoint.com/
http://sixrevisions.com/
遇到无法解决的技术问题，去这里提问：http://stackoverflow.com/
产品+设计：

必备硬件：http://store.apple.com/cn/mac
同事之间互传文件：Mac OS系统自带的Air Drop
矢量/图标/UI设计软件：http://bohemiancoding.com/sketch/
照片/位图处理软件：http://www.adobe.com/content/dotcom/cn/products/photoshop.html
各类设计灵感：http://designspiration.net/
设计大牛的聚集地（适合招人）：https://dribbble.com
UI素材的购买下载：
http://pixelbuddha.net
https://creativemarket.com/
http://market.envato.com/
https://ui8.net/
APP UI汇合：http://www.pttrns.com/
做产品的建议起床后翻一翻：http://www.smashingmagazine.com
prototype设计必备的高清图片库：https://unsplash.com/
更新率较高的一些国外设计资源：
http://theneodesign.com
http://speckyboy.com
http://www.webdesignerdepot.com
Web前端/CSS/JS：

使用最广泛的JS框架：http://jquery.com/
jQuery功能齐全但是体积庞大，一些轻量级的替代方案：
http://zeptojs.com/
https://github.com/lelandrichardson/dolla
https://github.com/remy/min.js
https://github.com/bendc/sprint
使用最广泛的响应式CSS+JS框架： http://getbootstrap.com
在线测试响应式设计的结果：http://resizr.co/
更加轻量级的响应式CSS框架：
https://www.qinco.net/humancss (注：这是我自己写的一个框架，也是我自己认为最实用的一个）
http://getskeleton.com
http://eiskis.net/layers/
http://rwdgrid.com
https://www.qinco.net/humancss

如果你是Mac系统，又得测试IE，可以装这个虚拟机：http://dev.modern.ie/tools/vms/
测试其他浏览器的工具：
http://browserstack.com/
https://saucelabs.com
http://netrenderer.com
Web设计全屏截图工具：https://derailer.org/paparazzi/
最佳WYSIWYG编辑器：http://imperavi.com/redactor/
最佳CSS博客：https://css-tricks.com
字体大小/em/rem/px：https://css-tricks.com/rems-ems/
SVG格式的图片：https://css-tricks.com/using-svg/
把图标文字化（font icons）工具：https://icomoon.io/app/
Retina屏幕下的图片自适应：
http://alistapart.com/article/responsive-images-in-practice
http://imulus.github.io/retinajs/
实用的前端代码片段：http://tympanus.net/codrops/
压缩CSS文件：http://cssminifier.com
压缩JS文件：http://skalman.github.io/UglifyJS-online/
文件上传框架：http://plupload.com/
压缩web图片体积：https://imageoptim.com/
JS代码加密：https://jscrambler.com
JS图表化插件：http://www.chartjs.org/
基于JS的2D物理引擎 ：http://brm.io/matter-js-demo/
一些常用的JS或CSS库：
常用的HTML特殊字符：http://www.typewolf.com/cheatsheet
顶部菜单自动隐藏：http://wicky.nillia.ms/headroom.js/
照片集浏览：http://brutaldesign.github.io/swipebox/
日期选择：http://amsul.ca/pickadate.js/
Lightbox #1: http://osvaldas.info/image-lightbox-responsive-touch-friendly
Lightbox #2: http://brutaldesign.github.io/swipebox/
JS动态图表：http://www.highcharts.com
Auto-Complete: http://leaverou.github.io/awesomplete/
全屏页面插件：http://alvarotrigo.com/pagePiling/
图片轮播1：http://kenwheeler.github.io/slick/
图片轮播2：http://meandmax.github.io/lory/
侧边菜单：https://mango.github.io/slideout/
基于Web的Hybrid App：

入门版框架：http://www.ionic.io/ 目前使用最广泛的框架之一，本质是用WebView嵌套一个手机版网站
进阶版框架：利用JS调用更加底层的硬件API，实现真正Native的体验：
http://facebook.github.io/react-native/
http://www.telerik.com/nativescript
https://muut.com/riotjs/
一些跟App相关的工具：
内测版分发测试：
以色列公司：http://www.testfairy.com/
中国公司：http://fir.im/
截屏自动化：https://launchkit.io/screenshots
App评论管理：https://launchkit.io/reviews
Web后端/服务器：

最常用的服务器系统之一：http://www.centos.org/
这几年最受欢迎的服务器软件非Nginx莫属：http://wiki.nginx.org/
针对个人免费的SSL认证CA机构：https://www.startssl.com/
在Nginx下如何安装SSL证书：https://www.linode.com/docs/websites/nginx/startssl-wth-latest-nginx-debian-7
实时监控服务器CPU/内存/性能：推荐Linode提供的Longview服务
PHP性能分析工具：https://blackfire.io/
图表化的服务器压力/负载测试服务：http://blitz.io
适合自己DIY的服务器压力/负载测试工具：https://www.joedog.org/siege-home/
实时监控网站是否宕机：
国内：http://www.jiankongbao.com/
国外：https://updown.io
服务器端的图片处理：http://imagemagick.org/
基于PHP和Imagemagick的图片处理库：http://image.intervention.io/
服务器端的文件同步：http://linux.die.net/man/1/rsync
网站安全漏洞测试：http://ce.wooyun.org
域名/主机/CDN：

域名注册：http://www.godaddy.com
除了.com，.net等主流后缀外，还有上千种后缀可以选：https://www.godaddy.com/tlds/gtld.aspx
国外最具性价比的高性能VPS：http://www.linode.com
国内做的最好的VPS之一：http://www.ucloud.cn
国内网站的首选DNS托管：http://www.dnspod.cn
国外常用的CDN服务：
http://aws.amazon.com/cloudfront/
https://www.cloudflare.com/
国内最好的CDN服务：
http://www.qiniu.com/
https://www.upyun.com/
防御DDOS攻击/流量清洗服务：
国内：http://anquanbao.com
国外：https://www.cloudflare.com
邮件/短信/支付等第三方服务：

在线支付，首选支付宝的即时到账接口
在线支付API的一站式服务：https://pingplusplus.com/
邮件托管的最佳选择，没有之一：http://mail.google.com/a (设置需翻墙)
重要提醒：千万不要用腾讯企业邮，因为各种莫名其妙的限制会让你的email发不出去
简单好用的邮件发送服务： http://mailgun.com/
API做得最好的国内短信服务：http://luosimao.com
网站整体评估：http://nibbler.silktide.com/
插一条广告：HTML5响应式网站定制+租用：http://www.qinco.net/
项目管理：

代码的版本管理工具，最好且唯一的选择：git
入门教程：https://codewords.recurse.com/issues/two/git-from-the-inside-out
进阶教程：https://progit.org/
常见git问题整理：http://ricardofilipe.com/projects/firstaidgit/#/
基于Git的代码托管服务商：http://github.com/
工作日志记录：http://teamcola.com/
团队项目协作工具：
https://www.teambition.com/
https://tower.im/
给设计师用的协作平台：http://www.invisionapp.com/
看看其他网站在用什么技术方案：http://stackshare.io/stacks