博客 / 詳情

返回

回首2017: 你其實是一個收集貝殼的孩子

我不知道世上的人對我怎樣評價。我卻這樣認為:我好像是在海上玩耍,時而發現了一個光滑的石子兒,時而發現一個美麗的貝殼而為之高興的孩子。儘管如此,那真理的海洋還神秘地展現在我們面前。—— 牛頓

github也像是一片海海,2017年,我大約從這篇海中撿了200多個彩色的貝殼。在年底之前,挑一些精緻美麗的貝殼,分享出來。

1 docsify:想讓你的文檔擁有Vue官方文檔一樣的顏值嗎?

我喜歡Vue的原因是Vue官方文檔顏值很高 by me, 那麼你想來一份嗎?

  • 高顏值
  • 非常簡單
  • 無需構建,寫完文檔直接發佈
  • 容易使用並且輕量 (~18kB gzipped)
  • 智能的全文搜索
  • 提供多套主題
  • 豐富的 API
  • 支持 Emoji
  • 兼容 IE10+
  • 支持 SSR (example)

2 JavaScript Standard Style:一千個開發者只有一個風格

還在為要不要分號爭吵嗎? 還在為兩個空格和四個空格猶豫嗎? 還在為各種格式檢查的配置文件苦惱嗎?

其實,你需要的只是JavaScript Standard Style罷了,無數大牛公司在用,你還在猶豫什麼?

好多編輯器支持JavaScript Standard Style,安裝過後,ctrl + s一下,哪怕shi一樣的代碼,也會瞬間華麗變身成維多利亞的秘密。

帥的人已經用了,不帥的還在猶豫

  • 無須配置。 史上最便捷的統一代碼風格的方式,輕鬆擁有。
  • 自動代碼格式化。 只需運行 standard --fix - 從此和髒亂差的代碼説再見。
  • 提前發現風格及程序問題。 - 減少代碼審查過程中反反覆覆的修改過程,節約時間。
  • 使用兩個空格 – 進行縮進
  • 無分號 – 這沒什麼不好。不騙你!
  • 查看更多 – 為何不試試 standard 規範呢!

3 mitt: 納米級別的事件訂閲系統

如果你看了mitt的源碼,你應該會驚呼:WTF,人家接近50行代碼也能獲得2000多顆星!!!!

  • 納米級別: 小於200B
  • 相當有用: 用"*"可以去訂閲所有事件
  • 非常熟悉: 類似於Node's EventEmitter
  • 函數式: 方法不依賴this

4 faker.js: 最優雅的假數據生成器

  • Supports all Faker API Methods
  • Full-Featured Microservice
  • Hosted by hook.io
var randomName = faker.name.findName(); // Caitlyn Kerluke
var randomEmail = faker.internet.email(); // Rusty@arne.info
var randomCard = faker.helpers.createCard(); // random contact card containing many properties

5 superstruct: 精準詳細的runtime 數據驗證工具

  • 給出的錯誤提示很詳細,非常容易定位bug
  • 幫你做好那些數據驗證的髒活累活
const { superstruct, struct } = window.Superstruct

const User = struct({
  id: 'number',
  name: 'string',
})

const data = {
  id: 'invalid',
  name: 'Jane Smith',
}

try {
  const user = User(data)
  log('valid', user)
} catch (e) {
  const { message, path, data, type, value } = e
  log('invalid', { message, path, data, type, value })
}

function log(type, data) {
  document.body.className = type
  document.body.textContent = JSON.stringify(data, null, 2)
}

可以看一下她輸出的錯誤信息

{
  "message": "Expected a value of type `number` for `id` but received `\"invalid\"`.",
  "path": [
    "id"
  ],
  "data": {
    "id": "invalid",
    "name": "Jane Smith"
  },
  "type": "number",
  "value": "invalid"
}

6 uppy: 下一代開源文件上傳插件

Uppy是一款時尚,模塊化的文件上傳器,可以與任何應用程序無縫集成。這是快速,易於使用,讓您擔心比建立一個文件上傳更重要的問題。

  • 從本地磁盤,Google雲端硬盤,Dropbox,Instagram獲取文件,或使用相機捕捉和記錄自拍;
  • 用一個漂亮的界面預覽和編輯元數據;
  • 上傳到最終目的地,可選擇進行處理/編碼

7 Inquirer.js: 在命令行裏做問卷調查

'use strict'
var inquirer = require('inquirer')

var questions = [
  {
    type: 'input',
    name: 'name',
    message: '請輸入你的名字'
  },
  {
    type: 'input',
    name: 'age',
    message: '請輸入你的年齡',
    default: function () {
      return '10'
    }
  },
  {
    type: 'list',
    name: 'sex',
    message: '請選擇你的性別',
    choices: ['男', '女']
  }
]

inquirer.prompt(questions).then(answers => {
  console.log(JSON.stringify(answers, null, '  '))
})
➜  src git:(master) ✗ node query.js
? 請輸入你的名字 wdd
? 請輸入你的年齡 23
? 請選擇你的性別 男
{
  "name": "wdd",
  "age": "23",
  "sex": "男"
}
user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.