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