• The Architecture of Open Source Applications 一些系统的架构介绍

• sindresorhus/awesome 比较清晰
  • bayandin/awesome-awesomeness 比较混乱
• cjbarber/ToolsOfTheTrade 服务/工具
• sindresorhus/awesome-nodejs 好
• sorrycc/awesome-javascript 好
• dypsilon/frontend-dev-bookmarks 有些乱
• davidsonfellipe/awesome-wpo Web Performance Optimization

• 指定文字在线预览各种字体 艺术字体在线生成器 艺术字转换器
• Graphemica - For people who ♥ letters, numbers, punctuation, &c 一个能看某汉字（符号）各种编码表示的网站，看到一串不明白的码时，可以用此查
  • 李 | Chinese, Japanese, Korean (cjk) unified ideograph (U+674E) @ Graphemica
• mrmrs/colors 让 css 的 blue/green 等默认颜色更好看
• Midnight.js - Switch fixed headers on the fly
• carlsednaoui/ouibounce 用户鼠标第一次向上移出网页（到地址栏、标签栏）时，弹出一个 modal（挽留用户）
• benpickles/peity 让 3,5,1,6,2 直接变成 inline 的 <svg> 小图表
• 中文排版
  • zenozeng/Free-Chinese-Fonts免费中文字体
  • sofish/typo.css，中文网页重设与排版：一致化浏览器排版效果，构建最适合中文阅读的网页排版
  • lepture/yue.css，A typography stylesheet for readable content，详细介绍：適合閱讀的中文字體 — Just lepture
  • zenozeng/fonts.css，跨平台 CSS 中文字体解决方案。不是 web font，而是讲如何使用各 OS 的最优字体
  • sparanoid/chinese-copywriting-guidelines，Chinese Copywriting Guidelines：中文文案排版指北（非 css）
  • 中文排版所需遵循的标准和规范
  • 中文 webfont 字体选择_有字库
  • aui/font-spider 中文字体自动化压缩工具
• 响应式设计 responsive
  • CSS 原生方法：CSS media queries - Web developer guide | MDN
  • HTML meta：Dev.Opera — An Introduction to Meta Viewport and @viewport
    <meta name=“viewport” content=“width=device-width”>
  • layout
    • Masonry，免费，只有一种 “masonry” layouts (pinterest 式)
    • Isotope，商业，does bin-packing layouts, which allow it to be used for draggable interactions.
    • Packery，商业，does sorting and filtering. Isotope uses masonry layouts, as well as other layouts.
  • davatron5000/FitText.js: FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
  • jxnblk/fitter-happier-text: Performant, fully fluid headings 让字体大小更响应
• 字体 Web Typography
  • davatron5000/Lettering.js: A lightweight, easy to use Javascript <span> injector for radical Web Typography
  • Lining.js 增加 nth-line 的 css 选择器。用途可看 demo
• 在页面上给“页面加载”加个进度条：HubSpot/pace
• 给 web app 增加是否连接到服务器（是否在线）的提示：HubSpot/offline
• js style guide
  • bevacqua/js
• 爬虫
  • ruipgil/scraperjs, A complete and versatile¹⁾ web scraper.
• PC 个性化
  • FGRibreau/dot-clipboard, monitors your clipboard and runs scripts based on its content, 一些例子如下
    • automatically load scripts located inside ~/.clipboard
    • automatically reload scripts when changed/renamed
    • customizable concurrency per script
    • fully-asynchronous scripts : each clipboard change events are duplicated for each script, queued, and then consumed asynchronously
• github 相关
  • RepoRanker, 登录后可以 Rearrange your GitHub repository rankings
• 一些 boilerplate
  • sahat/hackathon-starter, A boilerplate for Node.js web applications，集成各种（国外）api，为 hackathon 设计
• js 检查变量作用域：Constellation/escope
  • 主项目：Esprima，ECMAScript parsing infrastructure for multipurpose analysis
• ecomfe/echarts, 百度 Enterprise Charts 商业产品图表库
  • ECharts · Home
  • Why ECharts，一些例子
  • taiyun/recharts，R 语言中使用 echarts
• audreyr/favicon-cheat-sheet, favicon 的 best practice
• jonom/jquery-focuspoint，手动设置一个焦点后，'responsive cropping' without cutting out the image's subject.
• Cross-Domain AJAX Request CORS
  • 没有现成的通用的方便的库
  • oyvindkinsey/easyXDM 不要看这个，这个只适用于自己写的 server，provider/consumer 都需加载这个库才能用，不适于 3rd party
  • CORS (Cross-Origin Resource Sharing)，a W3C recommendation，需要浏览器和 Server 共同支持
    • Browser Request 添加 Header: Origin: http://jquery-howto.blogspot.com
    • Server Response 添加 Header: Access-Control-Allow-Origin: http://jquery-howto.blogspot.com
      
  • JSONP (JSON Padding) 需 Server 支持，仅用 GET
    • 使用原生 JS 方法的 JSONP 例子

      <script>
      function myCallback(dataWeGotViaJsonp){
          var text = '';
          var len = dataWeGotViaJsonp.length;
          for(var i=0;i<len;i++){
              twitterEntry = dataWeGotViaJsonp[i];
              text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
          }
          document.getElementById('twitterFeed').innerHTML = text;
      }
      </script>
      <script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>

    • 使用 jQuery 的 JSONP 例子（jQuery 隐藏了 <script src=“http://cross.domain”> 的细节）

      <script>
      $(document).ready(function(){
          $.ajax({
              url: 'http://twitter.com/status/user_timeline/padraicb.json?count=10',
              dataType: 'jsonp',
              success: function(dataWeGotViaJsonp){
                  var text = '';
                  var len = dataWeGotViaJsonp.length;
                  for(var i=0;i<len;i++){
                      twitterEntry = dataWeGotViaJsonp[i];
                      text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
                  }
                  $('#twitterFeed').html(text);
              }
          });
      })
      </script>

    • express 是支持 jsonp 的

      res.jsonp(null)
      // => null
       
      res.jsonp({ user: 'tobi' })
      // => { "user": "tobi" }
       
      res.status(500).jsonp({ error: 'message' })
      // => { "error": "message" }
       
      // ?callback=foo
      res.jsonp({ user: 'tobi' })
      // => foo({ "user": "tobi" })
       
      app.set('jsonp callback name', 'cb');
       
      // ?cb=foo
      res.status(500).jsonp({ error: 'message' })
      // => foo({ "error": "message" })

• PouchDB, the JavaScript Database that Syncs! was written to help web developers build applications that work offline as well as they do online. Applications save data locally, so the user can use all the features of an app even when they're offline. Plus, the data is synchronized between clients, so the user has up-to-date data wherever they go.
• vivus.js - svg animation 把 svg 一笔一笔画出来
• Regulex：JavaScript Regular Expression Visualizer. regexp 正则表达式 可视化（但没有测试匹配功能）
• PhotoSwipe: JavaScript Image Gallery
• dashboard
  • Dashboards by Keen IO
  • Flakes • An Admin UI & Template Framework
• alvarotrigo/fullPage.js Create full screen pages fast and simple
• react A JavaScript library for building user interfaces
  • Just the UI
  • component
  • jsx，减少用 js 写 dom 的复杂度
  • Virtual DOM，浏览器、后端都能做 render
  • Data flow，不是双向数据绑定
  • DOM Diff，DOM 替换时性能高
  • 资料汇总：React.js 概览 - SegmentFault
  • 使用 React 的一些经验 - SegmentFault
  • 示例

    var TodoList = React.createClass({
      render: function() {
        var createItem = function(itemText) {
          return <li>{itemText}</li>;
        };
        return <ul>{this.props.items.map(createItem)}</ul>;
      }
    });
    var TodoApp = React.createClass({
      getInitialState: function() {
        return {items: [], text: ''};
      },
      onChange: function(e) {
        this.setState({text: e.target.value});
      },
      handleSubmit: function(e) {
        e.preventDefault();
        var nextItems = this.state.items.concat([this.state.text]);
        var nextText = '';
        this.setState({items: nextItems, text: nextText});
      },
      render: function() {
        return (
          <div>
            <h3>TODO</h3>
            <TodoList items={this.state.items} />
            <form onSubmit={this.handleSubmit}>
              <input onChange={this.onChange} value={this.state.text} />
              <button>{'Add #' + (this.state.items.length + 1)}</button>
            </form>
          </div>
        );
      }
    });
     
    React.render(<TodoApp />, mountNode);

• 动画
  • greensock/GreenSock-JS
  • alvarotrigo/fullPage.js
  • julianshapiro/velocity
  • rstacruz/jquery.transit
• 滚动动画
  • ihatetomatoes 在 The Guide to Scrolling Animation Libraries 中对比了几种滚动动画的库，在该作者的另一篇文章 Skrollr vs ScrollMagic | Comparison of scrolling animation plugins 中最推荐 scrollmagic
  • 简单、基础
    • julianlloyd/scrollReveal.js Easily reveal elements as they enter the viewport.
    • matthieua/WOW Reveal CSS animation as you scroll down a page
  • 中等
    • Prinzhorn/skrollr
      • Skrollr Cheatsheet - Skrollr data-attributes simpliified
  • 高级
    • janpaepke/ScrollMagic
      • 一些例子：Bunt Spenden
• 对网站增加使用介绍、教程
  • Intro.js | Better introductions for websites and features with a step-by-step guide for your projects.，不需 jquery，每步介绍直接写在 tag 的 attr 里，star 数最多，但样式有些难看
  • Shepherd — Guide your users through a tour of your app.，效果好，依赖 Tether（同公司的一个元素定位库），需要额外写 guide 的代码，而非 attr 式。实际使用中 z-index 会有问题，未解决
  • Chardin.js 效果我最喜欢，没有步骤，只是 modal + 各区域的注释（通过 attr 设置），但依赖 jquery
• oliver-moran/jimp An image processing library written entirely in JavaScript for Node, with zero external or native dependencies.
  • jwagner/smartcrop.js Content aware image cropping 智能找图重点的缩略图工具

• jakubroztocil/httpie is a command line HTTP client, a user-friendly cURL replacement. (POST/PUT/DELETE)
• mitsuhiko/unp 一个命令解各种压缩包
• Xfennec/cv Linux tool to show progress for cp, rm, dd, …
• Run SQL directly on CSV files | Text as Data | q

  $ q "SELECT COUNT(*) FROM ./clicks_file.csv WHERE c3 > 32.3"
  $ ps -ef | q -H "SELECT UID,COUNT(*) cnt FROM - GROUP BY UID ORDER BY cnt DESC LIMIT 3"

• SBoudrias/Inquirer.js A collection of common interactive command line user interfaces for Node.js

• irungentoo/toxcore, 自搭建的文字、语音、视频聊天服务

• mailchimp 要求员工的书写规范（做邮件服务的公司当然要注重书写） Welcome to the MailChimp Content Style Guide | MailChimp Content Style Guide
  • This style guide is primarily for MailChimp employees, but we hope it’s helpful to other organizations as well.
  • mailchimp/content-style-guide
• Mastering Markdown · GitHub Guides
• Markdown Table Generator
• markdown 生成 pdf 的工具（如 alanshaw/markdown-pdf）都丑死，不要用！
• 用 mixu/markdown-styles markdown 生成 html 再浏览器打印。
  • 最适合打印 pdf 的样式是 generate-md --layout jasonm23-markdown --output . --input
  • 最适合网页打开的样式是 generate-md --layout mixu-book --output . --input
    • mixu-book 有目录，但目录没有 h2/h3/… 层级
• Web Sequence Diagrams，类似的有
  • PlantUML
  • knsv/mermaid
• sparanoid/chinese-copywriting-guidelines，中文文案排版指北
  1. 空格
     1. 中英文之间需要增加空格
     2. 中文与数字之间需要增加空格
     3. 数字与单位之间需要增加空格
     4. 全角标点与其他字符之间不加空格
  2. 标点符号
     1. 不重複使用标点符号
  3. 全角和半角
     1. 使用全角中文标点
     2. 数字使用半角字符
     3. 遇到完整的英文整句、特殊名词，其内容使用半角标点
  4. 大小写
     1. 专有名词使用正确的大小写
  5. 争议
     1. 中文链接之间增加空格
     2. 简体中文使用直角引号
• vinta/paranoid-auto-spacing 自動在網頁中所有的中文和半形的英文、數字、符號之間插入空白。
• GitHub 的 MD 导出成 PDF、HTML 的方法：
  • 在线方法，将 github 上的 .md 文件做精简，以便打印、导出 pdf：http://stackoverflow.com/a/11240990
  • 命令行方法，将本地的符合 github 的 md 的文件渲染、导出成 html、pdf：https://github.com/joeyespo/grip

• dbcli/mycli：A Terminal Client for MySQL with AutoCompletion and Syntax Highlighting.
• dnsmasq ²⁾。平时做 dns 千万不要用 bind9，用 dnsmasq
  • 启动 dnsmasq 服务后
  • dnsmasq first looks it up in your /etc/hosts file
  • If not found, it forwards it through the DNS servers configured on /etc/resolv.conf
• 比较新的 配置管理 工具
  • saltstack/salt
  • ansible/ansible
    • 不需服务器安装服务
    • 客户端使用 ssh 连接服务器做控制
    • ansible 有 module（类似 puppet 的 resource）和 role（类似 puppet 的 module）
    • module 一般不会自定义，而 role 有 Ansible Galaxy to find, reuse, and share the best Ansible content
  • MissingM - Ansible and Salt: A detailed comparison 更倾向 Ansible
  • Moving away from puppet: SaltStack or Ansible? | Ryan D Lane 更倾向 Salt
• 多个地点Ping服务器 - 站长工具
• GoAccess - real-time Visual Web Log Analyzer, 实时在 terminal 分析 web server access log
• lebinh/ngxtop，Real-time metrics for nginx server
• fastmonkeys/stellar, Fast database snapshot and restore tool for development, PostgreSQL and MySQL are supported.
• github/backup-utils, GitHub Enterprise Backup Utilities

  $ ghe-backup
  Starting backup of github.example.com in snapshot 20140727T224148
  Connect github.example.com OK (v11.10.343)
  Backing up GitHub settings ...
  Backing up SSH authorized keys ...
  Backing up SSH host keys ...
  Backing up MySQL database ...
  Backing up Redis database ...
  Backing up Git repositories ...
  Backing up GitHub Pages ...
  Backing up Elasticsearch indices ...
  Completed backup of github.example.com in snapshot 20140727T224148 at 23:01:58

• 日志远程记录和查看
  • logstash - open source log management + Elasticsearch.org Kibana
• Mosh: the mobile shell. Mosh is a replacement for SSH. It's more robust and responsive, especially over Wi-Fi, cellular, and long-distance links.
• Russell91/sshrc, bring your .bashrc, .vimrc, etc. with you when you ssh
• serverspec/serverspec 一个安装在主机（checker）上的 ruby gem，通过 SSH 检查其他机器的 server spec 的工具
• twitter/twemproxy A fast, light-weight proxy for memcached and redis 不明，觉厉
• apt/dpkg 和 yum/rpm 的对照：SwitchingToUbuntu/FromLinux/RedHatEnterpriseLinuxAndFedora
• sstephenson/bats Bash Automated Testing System
• draios/sysdig a system exploration and troubleshooting tool
• brendangregg/perf-tools Performance analysis tools based on Linux perf_events (aka perf) and ftrace
• camme/webhook-deployer Deployer server app triggered by (github) webhooks
• Supervisor/supervisor 用来挂起进程，以前可能需要对每个自开发的 daemon 写 upstart，但多数情况用 supervisor 的最简化配置就行。另外，docker 由于有只能启一个进程的限制，也会用此。

  • $ vi /etc/supervisor/conf.d/webhook-deployer.conf
    [program:webhook-deployer]
    command=/bin/su -l -c "/usr/local/bin/webhook-deployer -c /home/xp/webhook-deployer.json" xp

• mininet/mininet Emulator for rapid prototyping of Software Defined Networks http://mininet.org
• apenwarr/sshuttle 项目已经不再维护，mac 10.10 以上已不能用

• POP - Prototyping on Paper | Mobile App Prototyping Made Easy
  • 类似（更有名）的有：Free Web & Mobile Prototyping (Web, iOS, Android) and UI Mockup Tool | InVision
• Pttrns - Mobile User Interface Patterns
• icon font
  • icon font 部分设备显示不正常可能是设备有默认字体
    • 为什么天猫首页的 webfont / iconfont 显示异常？ - 桑行的回答 - 知乎
    • CSS: Font ICON 在部分设备中不显示 · Issue #193 · amazeui/amazeui
  • Fontello - icon fonts generator，从多个 icon fonts 中选任意个 icon 组成一个文件，并且有从 web 拖 svg 直接制作 icon font 的功能
    • 下载后，包中有 config.json，是该包的“存档”，可将此文件拖到 fontello.com 中以此为基础修改
    • 在 fontello.com 点扳手图标，有高级选项
  • Font Custom，svg → icon fonts 的命令行工具
  • IcoMoon, svg → icon font （可能是比较老的工具）
    • Building Ionicons, Our Open Source Icon Font, ionic 对 icomoon 的用法说明
• fonts
  • 一些值得推荐的中文字体，每一款字体都是一首诗（多图）
  • 首页-方正字库-淘宝网
    • 个人使用，字体 2 元一个
    • 淘宝店使用，100 元一个
    • 没有网站/设计使用的说明，需上官网查 (nk ~ 1w/年) 方正字体_方正字库官方网站
    • 可以买/看 方正字库产品手册
• feeds
  • Line25 Web Design Blog
• 配色
  • 配色讲道理！Thinkful网站配色完全学习指南(上)
  • 配色讲道理！Thinkful网站配色完全学习指南(下)
• 产品
  • 产品经理从零到一技术进阶：不懂代码也能愉快地与开发人员相处 | 36氪
  • 墨刀 - 免费的移动应用原型与线框图工具
  • POP - Prototyping on Paper | Mobile App Prototyping Made Easy

像素 像素风格 pixel 8bit 8比特

• 用 ps 做 isometric（无透视三维的，等轴）像素小人 Create an Isometric Pixel Art Character in Adobe Photoshop
• 接上文，给小人穿万圣节衣服 Dress Up for Halloween With Isometric Pixel Art in Adobe Photoshop
• 用 ps 做像素小车 How to Create an Isometric Pixel Art Vehicle in Adobe Photoshop
• 房子 Create an Isometric Pixel Art House in Adobe Photoshop

• 2014 年度最佳教程！7招教你写出互联网顶尖文案！

• Full Page Background Image
  • CSS3: background-size: cover;
  • 教程: Perfect Full Page Background Image | CSS-Tricks ( Published November 20, 2010 by Chris Coyier )
  • jaysalvat/vegas, Fullscreen Backgrounds and Slideshows with jQuery
  • e.g. GOTOCHINA (使用 absolute 定位)
• Fixed Background Scrolling Layout
  • CSS1: background-attachment: fixed;
  • Alternate Fixed And Scroll Backgrounds
  • Blueprint: Fixed Background Scrolling Layout
• 最新的别放过！30个尽显创意的视差滚动网站设计

• Transactional Email API Service for Developers - Mailgun
  • 每月 10000 条免费
• Firebase - Build Realtime Apps，实时同步的 JSON 数据库
  • A powerful API to store and sync data in realtime.
  • 使用者包括 Nest
  • 国内类似的有 LeanCloud
• Pingdom - Website Monitoring，网站监控
  • Uptime and performance monitoring made easy. Everything you need to monitor your website
  • With Pingdom’s website monitoring you’ll be the first to know when your website is down, and you’ll stay on top of your website’s performance. Monitoring your websites and servers is a smart decision.
  • 使用者包括 Firebase
• Free Beautiful Online Survey & Form Builder | Typeform
  • 制作网上调查
  • 官网很漂亮，背景是使用介绍视频
• WebSequenceDiagrams.com - Draw and Edit Sequence Diagrams in seconds
  • wsd 大概是参考 PlantUML
• Waffle.io 使用 github 的 issues API 做了一个类似 trello 的项目管理界面
• portfolio
  • Format，适合摄影师，白色背景（摄影师不是设计师，背景简单更适合展示作品），不同模板主要区别是照片的展示方式
  • Typify，卡片式

• OpenSCAD 编程制图的工具

  module example001()
  {
  	function r_from_dia(d) = d / 2;
  
  	module rotcy(rot, r, h) {
  		rotate(90, rot)
  			cylinder(r = r, h = h, center = true);
  	}
  
  	difference() {
  		sphere(r = r_from_dia(size));
  		rotcy([0, 0, 0], cy_r, cy_h);
  		rotcy([1, 0, 0], cy_r, cy_h);
  		rotcy([0, 1, 0], cy_r, cy_h);
  	}
  
  	size = 50;
  	hole = 25;
  
  	cy_r = r_from_dia(hole);
  	cy_h = r_from_dia(size * 2.5);
  }
  
  example001();

• Swift for JavaScript developers · Mirco Zeiss

• nothings/stb: stb single-file public domain libraries for C/C++

• Jack's works and projects

• 白送（比如红包、体验金受益不设门槛就能提现）就是喂薅羊毛💩

• vinta/pangu.js: 為什麼你們就是不能加個空格呢？
• 文曲星模拟器
• hacker-scripts - Based on a true story
• 在大众尾气造假后，有人写了 auchenberg/volkswagen，detects when your tests are being run in a CI server, and makes them pass.
• avinassh/rockstar 填满 github profile steak
• DanielGorlo/ISIS.js - injects islamic motivation into the console, removes the <head> tag, and blames america.
• contra/are-you-a-cop - Blocks cops from visiting your site. If they are they have to tell you.
• zhenyi/Staring - A look of disapproval that’ll keep your Mac from sleep.
• 人#权验证码
• 3030 Game: Don't touch the trees! (Thanks, Chrome dev team!) https://github.com/szhu/3030
• ottomao/bugfreejs - 自动在JS头部加上 “佛祖保佑，永无bug”，默认支持utf8和GBK编码的js文件。
  • 更多 ASCII 画：ASCII Art Farts

 
                                 _oo8oo_
                                o8888888o
                                88" . "88
                                (| -_- |)
                                0\  =  /0
                              ___/'==='\___
                            .' \\|     |// '.
                           / \\|||  :  |||// \
                          / _||||| -:- |||||_ \
                         |   | \\\  -  /// |   |
                         | \_|  ''\---/''  |_/ |
                         \  .-\__  '-'  __/-.  /
                       ___'. .'  /--.--\  '. .'___
                    ."" '<  '.___\_<|>_/___.'  >' "".
                   | | :  `- \`.:`\ _ /`:.`/ -`  : | |
                   \  \ `-.   \_ __\ /__ _/   .-` /  /
               =====`-.____`.___ \_____/ ___.`____.-`=====
                                 `=---=`
 
 
              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

                         佛祖保佑         永无bug                  

• 宇宙囧片王