学习
实践
活动
专区
工具
TVP
写文章

设计师碎片时间学习前端,这些网站和实用工具总有一款适合你……

有温度·有思想

在这次的工具列表当中,有用来生成虚拟数据的 JavaScript库,有用于在本地网络当中共享文件的工具,以及允许你将终端记录直接转化为 SVG 动画的工具。

它们是不是听起来都挺酷的?如果你是一个对新鲜有趣的前端素材感兴趣的人,那么不要错过今天的推荐。

Pushbar.js

网址:https://github.com/oncebot/pushbar.js

Pushbar.js 是一个用来创建滑动抽屉效果的 JavaScript 库,滑动抽屉效果常常会用到网站的导航当中,用来展示二级导航以及其他内容,但是在网站的其他地方使用,也没有任何问题。Pushbar.js 是完全可定制的,不具备依赖性,不需要 jQuery。

Carbon Now CLI

网址:https://github.com/mixn/carbon-now-cli

Faker.js

网址:https://github.com/Marak/faker.js

这是一个用来创建虚拟数据的 JavaScript 库,它支持生成大量数据,包括姓名、地址、公司名称、电话、日期等不同的字段。这些数据用来测试 Web应用和网站是非常有用的。

TermToSVG

网址:https://github.com/nbedos/termtosvg

TermToSVG 是一款 Linux 终端记录工具,可以将命令行对话呈现为 SVG 动画。对于开发人员而言,它是编写教程非常有用的工具。

Database Backup Manager

网址:https://github.com/backup-manager/backup-manager

这是一个 PHP 的库,它的名字已经很清楚地反映了它的功能:数据库备份管理。它能够提供数据库的备份和恢复的服务,支持从中提取和备份各种服务,包括 Dropbox、Amazon S3、FTP、SFTP 以及 Rackloud Cloud。

React Bits

网址:https://github.com/vasanthk/react-bits

这是一个搜集了大量 React.js 的技术、提示和技巧的合集,涵盖了常见的设计模式、样式、性能的使用技巧,是非常好用的资源,可以提升你的 React.js 的技能。

DSS Language

网址:https://dss-lang.com/

DSS 的全称是 Deterministic Style Sheets,是一种全新的 CSS 创建工具。它是如何运作的?又是如何应用到日常工作当中的?目前,它还有很多可供挖掘的空间,作为一个有前景的新兴事物,可以关注一下。

PurgeCSS

网址:https://www.purgecss.com

PurgeCSS 是一个 NPM 包,允许通过删除未使用的 CSS 来优化 Web应用,这款工具内置了很多支持模块,包括 Gulp、Grunt、Webpack 以及 PostCSS,所以,你可以将它集成到你的项目当中去。

RFS

网址:https://github.com/project-rfs/rfs

RFS 是「响应式字体尺寸」的缩写,这是一个非常有趣的项目,可以解决网页上最麻烦的事儿,也就是字体大小随着屏幕尺寸变化而响应,与设备更好的匹配。RFS 可以作为 NPM 来使用。

SimpleBar

网址:http://grsmto.github.io/simplebar/

这是一个用来创建自定义滚动条的 JavaScript 库,SimpleBar 能够让你像其他的 HTML 元素一样使用 CSS 来控制滚动条的样式。在过去,由于平台和浏览器的显示,浏览器的滚动条样式很复杂,但是 SimpleBar 让这一点变得简单。

Larastan

网址:https://github.com/nunomaduro/larastan

Larastan 是一款为 Laravel 而包装的 PHPStan。PHPStan 是一个用来检测代码潜在错误的工具,检测过程中无需编写单元测试。它能够检测的东西很多,包括调用的方法和函数,分配的属性类型,给类构造函数的数量和类型,还能验证 phpDocs。

PWMetrics

网址:https://github.com/paulirish/pwmetrics

PWMetrics 是一款由 Paul Irish 所开发的的工具,它能够通过命令行界面来收集 Progressive Web App 的相关指标。这款工具是由 Lighthouse 提供支持,可以作为 NPM包使用。

Pax

网址:https://pax.js.org/

Pax 是一款 JavaScript 捆绑器,用来将 JavaScript 模块编译为浏览器可用的文件。Pax 承诺,它将为开发者提供足够快的速度。相比于其他同类的捆绑包,Pax 编译得更快,完全支持 ES6 的导入导出语法,以及 CommonJS sytax 的导入。

SustyWP

网址:https://sustywp.com

SustyWP 是一款非常精简的 WordPress 主题,它通过尽可能小的尺寸来节省空间资源。在浏览器加载的时候,这个主题仅有7kb,速度快,量级轻,你可以在这篇文章当中看到 Jack Lenox 为它所撰写的主题故事。

The Doodle Library

网址:https://www.thedoodlelibrary.com

The Doodle Library 是一个涂鸦库,其中包含大量的涂鸦图纸,并且按照不同的属性分门别类。这些图纸都是使用的 SVG格式,方便使用。这些素材是按照 Creative Common Attributions 4.0 来分发的。

Tilt.js

网址:https://gijsroge.github.io/tilt.js/

Tilt.js 是一个 jQuery 插件,用来创建类似于我们在 Apple TV 上能看到的各种预览缩略图,并且带有非常漂亮的渐变效果。它不需要额外的 CSS 就能实现。这个工具的页面当中提供了一些实现的实例,上手非常简单。

Fileroom

网址:https://fileroom.io/

Fiileroom 是一款在同一网络内进行 P2P文件共享的工具,无论你使用什么操作系统,都可以顺畅地进行分享。

Coolhue

网址:https://webkul.github.io/coolhue/

Coolhue 为你提供一系列精心挑选的渐变色,让你可以直接抓取配色方案用于 Photoshop 和 Sketch 等工具,也能借助 bower 或者 npm 直接用于你的相关开发项目。这可以为你进行网站设计开发节省不少时间。

Reef

网址:https://github.com/cferdinandi/reef

Reef 是一款用来创建 UI 的简单的 JS库,它没有诸如 React.js 和 Vue.js 这样的大型库当中花哨的组成部分,如果你只需要渲染 UI,那么你使用 Reef 就可以了。另外,Reef 非常小,仅有2kb。

Evergreen

网址:https://evergreen.surge.sh/

Evergreen 是一个来自 Segment.io 的 UI组件合集,其中包含的组件各不相同,除了按钮,图标,文本输入框等常见的组件之外,还包含有 Evergreen 所独有的内容,比如 Toaster,Side Sheet 以及 Comer Dialog 等组件。

END

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180926A1E3CC00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券