web前端开发

您现在的位置是:首页>学习资源

开发工具箱

这些精粹项目、源码案例与工具一定要收藏好了

admin:杨小二时间:2019-11-21 06:14:09学习资源0次
工欲善其事,必先利其器。在我们开发的过程中,一些“轮子”、工具能够帮助我们应对项目中切实的需求,提升开发的效率。所以,日常收集一些库或

工欲善其事,必先利其器。在我们开发的过程中,一些“轮子”、工具能够帮助我们应对项目中切实的需求,提升开发的效率。

所以,日常收集一些库或工具就显得尤为重要了。毕竟,遇见需求与问题的时候,能做到“家有余粮,心中不慌。”

前端

1、MXFlutter
项目地址:https://github.com/TGIF-iMatrix/MXFlutter
MXFlutter 是一款由手机 QQ 看点团队开源的基于 JS 的 Flutter 动态化框架。它支持 Dart Flutter 语法,通过编写 JavaScript 代码,来开发 Flutter 应用。
 
2.CSS Wand
项目地址:https://github.com/oliver-gomes/csswand/
CSS Wand 是一个漂亮的 CSS 样式库。你可以根据自身需求定制相应的效果,轻松复制 HTML 与 CSS 代码,十分便捷。
 
3、VvvebJs
项目地址:https://github.com/givanz/VvvebJs
VvvebJs 是一个开源的网页拖拽自动生成的 JavaScript 库。通过简单的拖拽即可生成自己需要的网页样式,并且它内置了 jQuery 和 Bootstrap 4 组件,帮助你快速的构建展示型网页。
 
4、Day.js
项目地址:https://github.com/iamkun/dayjs
Day.js 是一个轻量级处理时间和日期的 JavaScript 库,它和 Moment.js 的 API 设计保持完全一样。如果你曾使用过 Moment.js,那么你就能够分分钟玩转 Day.js.
 
5、react-smooth-range-input
项目地址:https://github.com/bluebill1049/react-smooth-range-input
这是一款基于 React 的输入范围滑动条。它具备平滑的输入范围、漂亮的交互动画,并且相当的轻量。

6、TypeLighter.js

项目地址:https://github.com/EdernClemente/TypeLighterJS

TypeLighter.js 是一款轻量级(Gzip 压缩后仅 1.04KB)的 JS 库,能够帮助你实现打字机效果。它提供了 8 个属性(写入速度、写入/删除延迟等)供你微调,更改 data 属性即可更改其值。

7、Clendar

项目地址:https://github.com/simbawus/calendar

lendar 是一款轻量级、无依赖的 JS 日历组件。它具备简洁的 API,适用于 React、Vue、Angular 等框架。

8、Lax.js

项目地址:https://github.com/alexfoxy/laxxx

 

Lax.js 是一款轻量的 Vanilla JS 插件,当页面滚动时,创建流畅、炫酷的动画效果,让你的网站“动”起来。

 

9、HIUI

项目地址:https://github.com/XiaoMi/hiui

HIUI 是由小米开源的面向中后台系统的前端组件库。它以用户体验一致性为出发点,提供类型全面的组件库和页面模板,帮助开发人员快速实现交互一致、界面美观的界面开发。

 

10、awesome-coding-js

项目地址:https://github.com/ConardLi/awesome-coding-js

这个仓库整合了大量算法和数据结构的 JavaScript 实现,涉及经典排序算法、二叉树、链表、字符串等内容,巩固基础的朋友,可以关注下。

 

11、JS-Dev-Reads

项目地址:https://github.com/twhite96/js-dev-reads

专为 JS 开发者汇总的阅读清单,涉及图书推荐、文章精选等内容。

 


后端

1、pdfcpu
项目地址:https://github.com/pdfcpu/pdfcpu
pdfcpu是一个由 Go 语言编写的 PDF 处理库。它提供了命令集,能够轻松地将 PDF 处理集成到基于 Go 的后端系统之中。
 
2、Helidon
项目地址:https://github.com/oracle/helidon
这是一个由 Oracle 开源的 Java 微服务框架,旨在运行在 Netty 内核上。它具备简单、轻量、快速等特点,支持 MicroProfile 1.1 并提供了开发者熟悉的 API,例如 JAX-RS, CDI 和 JSON-P/B.
 
3、resilience4j
项目地址:https://github.com/resilience4j/resilience4j
resilience4j 是一个受 Hystrix 启发而做的轻量级的容错库,它能够通过管理远程通信的容错性来实现一个健壮的系统。它提供了好用的 API、速率限制器、Bulkhead,并且它没有任何外部依赖。
 
4、advanced-java
项目地址:https://github.com/doocs/advanced-java
这是一个针对 Java 工程师进阶的知识仓库,内容涵盖了高并发、分布式、高可用、微服务等领域知识。目前 GitHub 上有 2.9w Star,推荐后端童鞋参考与学习。
 
5、Awesome Go
项目地址:https://github.com/yinggaozhen/awesome-go-cn
这是 Awesome-go 的中文版本,收录了丰富的 Go 框架、库和软件,帮助你快速发现优质 Go 项目。

移动端

1、BotToast
项目地址:https://github.com/MMMzq/bot_toast
BotToast 是一个纯 Flutter 实现的自定义 Toast 库。它拥有丰富的功能,支持随时调用、弹出各种自定义 Toast,以及显示通知、文本加载等类型 Toast,同时它的 API 简单易用。
 
2、30 Days of SwiftUI
项目地址:https://github.com/FradSer/30-days-of-swiftui
这是一个利用 SwiftUI 制作 APP 产品功能的项目,作者计划每隔几天利用 SwiftUI 开发出不同的功能。目前作者已经开发了 15 个功能,涉及计时器、选色器、夜间模式等功能,供大家参考与学习。
 
3、Flutter Effects
项目地址:https://github.com/HitenDev/flutter_effects
Flutter Effects 是由多个纯 Flutter 工程组成的炫酷的 UI 特效库,涵盖了差字缩放、彩虹字体、粒子爆炸、刮刮卡等特效,支持 Android 和 iOS.
 
4、Xpopup
项目地址:https://github.com/li-xiaojun/XPopup
Xpopup 是一个 UI 简洁,交互优雅的通用弹窗,它内置了十多种简洁的动画效果,支持完全的 UI、自定义动画,同时可以适配全面屏。

工具/资源

1、Editor.js
项目地址:https://github.com/codex-team/editor.js
Editor.js 是一款全新的 Block 风格编辑器。它能够通过 JSON 输出清晰的数据,并具备简单的 API、可扩展、可插拔等特性。
 
2、Awesome Stacks
项目地址:https://github.com/stackshareio/awesome-stacks
这是一个精选技术栈合集仓库,作者分享了前端、后端、移动端、全栈相关的资源、工具以及入门套件,帮助你构建不同的应用程序,或实现各类功能。
 
3、DropCSS
项目地址:https://github.com/leeoniya/dropcss
DropCSS 是一个简单、快捷清理无用 CSS 的工具。它将三个开源工具(Fast HTML Parser、CSSTree、CSS-Select)连接了起来,故具备移除 CSS 选择器、处理媒体查询,以及保留 CSS 伪类和伪元素选择器的功能。
 
4、Flutter-In-Action
项目地址:https://github.com/flutterchina/flutter-in-action
这个项目是《Flutter 实战》开源电子书项目。《Flutter 实战》是一本详解 Flutter 技术和开发流程的开源图书。作者通过大量示例、图片,还有示例源码,帮助你循序渐进的掌握 Flutter 开发。
 
5、geekdocs
网站地址:https://geekdocs.cn
geekdocs 是一个专注于程序员(前端为主)的网站导航。除了拥有简洁的网站界面,站内还收录了优质的技术博客、技术团队、教程专辑、实用工具以及常逛的技术社区,共计 194 个,可以说非常全面了。
 

设计

1、Mixkit
网站地址:https://mixkit.co
Mixkit 是一个免费视频素材网站,收录了大量的高画质影片素材,内容涉及商业科技、城市、音乐、生活等方方面面,并且支持商用和个人使用。无需注册网站,即可免费下载。
 
2、中国传统颜色在线手册
网站地址:https://works.yangerxiao.com/chinese-colors/
Chinese Color 是一个开源的中国传统颜色在线手册,帮助你快速了解中国风的颜色搭配,非常实用。
 
3、Leon Sans
网站地址:https://leon-kim.com
Leon Sans 是由 Jongmin Kim 编写的一款可动态更改字体样式的字体。因为字体是由代码构建,所以它不光能动态更改字体的粗细,还可以在 Canvas 元素中创建自定义动画与形状。
 
4、Eva
网站地址:https://eva.design
Eva Design System 是一个可高度定制的设计体系,用于满足品牌设计需求。它拥有数百种可用 Sketch 编辑的符号文件与数十种样式,并且提供了 Web(Angular) 和移动端(React Native)的 UI 组件库,以及支持 480+ SVG 通用图标。
 

源码案例

1、CSS - Frosted Glass
源码:https://codepen.io/kylewetton/pen/bGbaazX
纯 CSS 实现毛玻璃效果。
 
2、Reverse Direction Underline Hover Effect
源码:https://codepen.io/iClusterDev-The-King/pen/NWKvwwm
 CSS 实现链接加下划线悬停效果。
 
3、50+ 纯 CSS 实现的加载动画
源码:https://codepen.io/mrsahar/pen/pMxyrE
 
4、全自动滚筒洗衣机实现
源码:https://codepen.io/Arkellys/pen/YoYNve
5、jQuery + CSS Vars 创建随机数字生成器
源码:https://codepen.io/cobra_winfrey/pen/xvjbYy
 

6、纯 CSS 实现简单的波浪动画

源码:https://codepen.io/goodkatz/pen/LYPGxQz

7、纯 CSS 绘制可爱杯子动画

源码:https://codepen.io/keirafoxy/pen/JgdBVW


 

8、HTML+CSS+JS 实现《Play Hard》文字伸缩炫彩动画

源码:https://codepen.io/chrisgannon/pen/KONLar

 

9、纯 CSS 实现带有 Hover 效果的社交图标

源码:https://codepen.io/Stockin/pen/aQoQGr

今天就分享到这里,如果你觉得我今天的内容对你有帮助的话,也请你分享给你身边的小伙伴们,一起来学习。
 

平面设计