推薦一位國(guó)外全棧開(kāi)發(fā)者大神：Alyssa，在 Github 上有 5.34K 的關(guān)注者。她是一名全棧開(kāi)發(fā)者、Sonuum 公司的創(chuàng)始人。

被 Maker Mag 評(píng)為 2018 最佳女性 Maker，并兩次入圍 Product Hunt Maker of the Year 決賽。

注：Product Hunt 是國(guó)外的一個(gè)尋找好產(chǎn)品的網(wǎng)站，開(kāi)發(fā)者或者開(kāi)發(fā)團(tuán)隊(duì)可以把自己開(kāi)發(fā)的產(chǎn)品發(fā)布到網(wǎng)站，與社區(qū)的用戶一起討論。本文中推薦 4 個(gè)有趣的開(kāi)源項(xiàng)目，都是由開(kāi)發(fā)者 Alyssa 完成。

本期推薦開(kāi)源項(xiàng)目目錄：

1. 適用于 Chrome 的屏幕錄制工具

2. 強(qiáng)大的瀏覽器插件

3. 實(shí)時(shí)協(xié)作的地圖工具

4. 創(chuàng)建漂亮的流程圖

---

01

適用于 Chrome 的屏幕錄制工具

適用于 Chrome 的最強(qiáng)大的屏幕錄像機(jī)和注釋工具，使用該插件你可以錄制你的屏幕和并且在屏幕任意位置進(jìn)行繪畫(huà)、添加文本、添加箭頭，同時(shí)還可以錄制你的電腦音頻。

錄制完成，你可以對(duì)錄制的視頻片段進(jìn)行修剪，導(dǎo)出為 MP4、Gif 并且一鍵保存到谷歌云盤(pán)。該開(kāi)源項(xiàng)目的地址和使用的庫(kù)的地址都放在了下面。

編程語(yǔ)言：Javascript

開(kāi)源地址：https://github.com/alyssaxuu/screenity

相關(guān)開(kāi)源組件地址：

用于交互式文本和箭頭：https://github.com/fabricjs/fabric.js
下拉菜單的開(kāi)源組件：https://github.com/hernansartorio/jquery-nice-select
用于修剪/刪除錄音部分的范圍組件：https://github.com/leongersen/noUiSlider
顏色選擇塊：https://github.com/Simonwep/pickr
用于在錄制時(shí)異步保存視頻：https://github.com/jimmywarting/StreamSaver.js
使下載的視頻可搜索的開(kāi)源組件：https://github.com/yusitnikov/fix-webm-duration

02

強(qiáng)大的瀏覽器插件

使用開(kāi)源項(xiàng)目 Omni 可以幫助你更專(zhuān)業(yè)的管理你的瀏覽器， Omni 提供了一個(gè)簡(jiǎn)單界面，在界面中你只需要使用簡(jiǎn)單的命令就能管理選項(xiàng)卡、書(shū)簽、瀏覽器歷史記錄、執(zhí)行各種操作等等。

你可以方便的搜索、瀏覽管理標(biāo)簽、快速搜索瀏覽歷史記錄、與 Notion、Figma、穩(wěn)定集成，同時(shí)好包含更多高級(jí)設(shè)置。

編程語(yǔ)言：JavaScript

開(kāi)源地址：https://github.com/alyssaxuu/omni

03

實(shí)時(shí)協(xié)作的地圖工具

Mapus 是一種在地圖上協(xié)作探索和注釋的工具，開(kāi)源一年獲得了近 3K 的 Star。使用該開(kāi)源項(xiàng)目你可以在地圖上繪制、標(biāo)記、畫(huà)出區(qū)域等等，想當(dāng)于在普通的地圖上增加了實(shí)時(shí)協(xié)作的功能。

通過(guò)實(shí)時(shí)協(xié)作，你可以與其他用戶同步計(jì)劃和行程；你能使用畫(huà)筆或者箭頭在地圖上標(biāo)記和注釋；還可以創(chuàng)建一些標(biāo)記，方便快速定位標(biāo)注地圖上的位置，同樣可以把地圖數(shù)據(jù)導(dǎo)出。

編程語(yǔ)言：JavaScript、CSS、HTML

開(kāi)源地址：https://github.com/alyssaxuu/mapus

04

創(chuàng)建漂亮的流程圖

這是一個(gè)輕量級(jí)的 JavaScript 庫(kù) 近1W人 Star，通過(guò)該 Flowy 你能在你的應(yīng)用中創(chuàng)建漂亮的流程圖，使用步驟如下：

/* 在你的 Web 項(xiàng)目引入 flowy.min.js 和 flow.min.css ?*/ <link?rel="stylesheet"?href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css">? <script?src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script>/* 引入?create-flowy 類(lèi)就能創(chuàng)建可拖動(dòng)的 block ? */ <div?class="create-flowy">The block to be dragged</div> <div?id="canvas"></div>

更詳細(xì)的教程可以參考該項(xiàng)目的 Readme 文件：

開(kāi)源地址：https://github.com/alyssaxuu/flowy

歷史盤(pán)點(diǎn)

逛逛 GitHub 每天推薦一個(gè)好玩有趣的開(kāi)源項(xiàng)目。歷史推薦的開(kāi)源項(xiàng)目已經(jīng)收錄到 GitHub 項(xiàng)目，歡迎 Star：

https://github.com/Wechat-ggGitHub/Awesome-GitHub-Repo

---

推薦閱讀

1.?GitHub 上有什么好玩的項(xiàng)目？

2.?推薦一款高顏值網(wǎng)易云播放器

3.?基于 Spring Boot 的百度云高仿項(xiàng)目

4.?盤(pán)點(diǎn)百度 4 個(gè)牛逼哄哄的開(kāi)源項(xiàng)目

總結(jié)

以上是生活随笔為你收集整理的国外大佬的 4 个项目 yyds的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。