国外大佬的 4 个项目 yyds

推荐一位国外全栈开发者大神:Alyssa,在 Github 上有 5.34K 的关注者。她是一名全栈开发者、Sonuum 公司的创始人。

被 Maker Mag 评为 2018 最佳女性 Maker,并两次入围 Product Hunt Maker of the Year 决赛。

注:Product Hunt 是国外的一个寻找好产品的网站,开发者或者开发团队可以把自己开发的产品发布到网站,与社区的用户一起讨论。本文中推荐 4 个有趣的开源项目,都是由开发者 Alyssa 完成。

59251a2350b54ab40cbdd501f4fa0fb9.png

本期推荐开源项目目录:

1. 适用于 Chrome 的屏幕录制工具

2. 强大的浏览器插件

3. 实时协作的地图工具

4. 创建漂亮的流程图


01

适用于 Chrome 的屏幕录制工具

适用于 Chrome 的最强大的屏幕录像机和注释工具,使用该插件你可以录制你的屏幕和并且在屏幕任意位置进行绘画、添加文本、添加箭头,同时还可以录制你的电脑音频。

录制完成,你可以对录制的视频片段进行修剪,导出为 MP4、Gif 并且一键保存到谷歌云盘。该开源项目的地址和使用的库的地址都放在了下面。

编程语言:Javascript

开源地址:https://github.com/alyssaxuu/screenity

相关开源组件地址:

用于交互式文本和箭头:https://github.com/fabricjs/fabric.js
下拉菜单的开源组件:https://github.com/hernansartorio/jquery-nice-select
用于修剪/删除录音部分的范围组件:https://github.com/leongersen/noUiSlider
颜色选择块:https://github.com/Simonwep/pickr
用于在录制时异步保存视频:https://github.com/jimmywarting/StreamSaver.js
使下载的视频可搜索的开源组件:https://github.com/yusitnikov/fix-webm-duration

da550c33357b5686d25c648be8a76227.gif

02

强大的浏览器插件

使用开源项目 Omni 可以帮助你更专业的管理你的浏览器, Omni 提供了一个简单界面,在界面中你只需要使用简单的命令就能管理选项卡、书签、浏览器历史记录、执行各种操作等等。

你可以方便的搜索、浏览管理标签、快速搜索浏览历史记录、与 Notion、Figma、稳定集成,同时好包含更多高级设置。

编程语言:JavaScript

开源地址:https://github.com/alyssaxuu/omni

546b200e8daffdc3b4cebb24648fc0fb.png

b87a053caf0cc7ba64cb375e5523f0a6.png

c4f3a7824a7879bb97e1b2d1caf9a6a0.png

03

实时协作的地图工具

Mapus 是一种在地图上协作探索和注释的工具,开源一年获得了近 3K 的 Star。使用该开源项目你可以在地图上绘制、标记、画出区域等等,想当于在普通的地图上增加了实时协作的功能。

通过实时协作,你可以与其他用户同步计划和行程;你能使用画笔或者箭头在地图上标记和注释;还可以创建一些标记,方便快速定位标注地图上的位置,同样可以把地图数据导出。

编程语言:JavaScript、CSS、HTML

开源地址:https://github.com/alyssaxuu/mapus

9cea66bbc8ba4597c27df46c1597a8c6.png

be98f2fcd873a09de0dc9c97b7db2360.png

cd9b1ef1f1226233ee67a10574082077.png

04

创建漂亮的流程图

这是一个轻量级的 JavaScript 库 近1W人 Star,通过该 Flowy 你能在你的应用中创建漂亮的流程图,使用步骤如下:

/* 在你的 Web 项目引入 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 类就能创建可拖动的 block   */
<div class="create-flowy">The block to be dragged</div>
<div id="canvas"></div>

更详细的教程可以参考该项目的 Readme 文件:

8b6d22bbe626fef3ee29d126890ee7c5.png

开源地址:https://github.com/alyssaxuu/flowy

318c02291769f507d312ca947cc44d09.gif

历史盘点

逛逛 GitHub 每天推荐一个好玩有趣的开源项目。历史推荐的开源项目已经收录到 GitHub 项目,欢迎 Star:

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

01e44a25912f706355edacaf21ba07a5.png


 
 

bfebb98d952a9979be8c03777ccdc1f5.png

你好,我是厂长谭庆波,就读于哈工大,计算机系学生,点击蓝字查看我的成长之路

同时,我也是知乎博主:谭庆波,日常分享高质量程序员认知,学习资料、技术干货等,欢迎围观。

 
 
最后说一件重要的事,我最近建了一个【晋级的程序员】社群,旨在帮助新手小白快速上手找到编程的乐趣,里面沉淀了大量编程相关经验教程以及学习资料,目前社群人数已经超过2500人,欢迎大家加入:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值