首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

2020年你应该关注这50款前端热门工具,JavaScript插件篇(一)

github star 2.6k ,该插件能够很方便的集成到你的项目中,使用起来简单易用,此插件主要有以下特点: 原生javaScript脚本 零依赖 简单易用 体积小,压缩版仅6KB 功能丰富 定制...2、indigo-player 官网地址:https://github.com/matvp91/indigo-player 高度扩展的现代JavaScript视频播放器,一款现代感十足的 javaScript...jQuery依赖的图片幻灯插件,简单易用,功能强大,支持全屏展示,除了可以展示图片,还可以添加文字和视频,并支持缩略图片,同时方便集成到现有项目中,比如react、vue项目。...这款插件很方便与现有项目集成,支持原生项目集成、React、 Preact、 Angular、 Vue、 Svelte等前端框架集成。...同时方便你和现有项目进行集成,比如原生项目、reactreact hooks、vue、ember。

2.4K30

2020年你应该关注这50款前端热门工具,JavaScript插件篇(一)

github star 2.6k ,该插件能够很方便的集成到你的项目中,使用起来简单易用,此插件主要有以下特点: 原生javaScript脚本 零依赖 简单易用 体积小,压缩版仅6KB 功能丰富 定制...2、indigo-player 官网地址:https://github.com/matvp91/indigo-player 高度扩展的现代JavaScript视频播放器,一款现代感十足的 javaScript...jQuery依赖的图片幻灯插件,简单易用,功能强大,支持全屏展示,除了可以展示图片,还可以添加文字和视频,并支持缩略图片,同时方便集成到现有项目中,比如react、vue项目。...这款插件很方便与现有项目集成,支持原生项目集成、React、 Preact、 Angular、 Vue、 Svelte等前端框架集成。...同时方便你和现有项目进行集成,比如原生项目、reactreact hooks、vue、ember。

1.5K20
您找到你想要的搜索结果了吗?
是的
没有找到

Android 手表应用开发设计规范 【译】

全屏应用: •二维选择:二维选择允许用户从给定的一组元素中选择某个元素,比如在音乐应用中选择歌手、选择专辑等。...二维选择   二维选择很适合展现一个系列的选项。比如 Google 搜索结果页就是一个很好的范例。 ? 这种样式可被用于展现单一纵向列表,或“一维选项” ?...状态指示显示在屏幕的几个固定位置。采用较高提示时,状态指示应显示在屏幕上方或居中区域。如果你将状态指示或语音热词置于屏幕底部时,系统会强制使用高度较小的提示卡片。...为了优化点击体验,一次最多显示 7 9 个点击对象。 点击区域   你可以设定不同的点击区域来触发不同的表盘变化。...标准界面可以满足大多数情况需要,但在该基础上也探索其他创新方向。   手表端的设置界面应仅限使用开关及滚动列表控件。手机端设置界面包含其他较为复杂的设置项目。

3.9K70

Mac下提升工作效率的方式

将应用全屏最大的好处在于避免注意力被其他的信息分散掉。当然全屏之后要切换出当前的工作环境就需要其他工具的辅助。 应用切换神器Snap 上面提到dock栏一般被我隐藏,但dock上有我最常用的app。...Automatic模式,直接将dock栏上的应用从左右一直映射到以下快捷键: cmd+1, cmd+2, cmd+3, … cmd+0。...被忽视的触摸板 不少人都会觉得macbook的触摸板非常灵敏好用,单指轻触就可以完成鼠标的单击效果,双指轻触右半部分显示菜单,双指上下滑动可以完成页面的上下滚动,双指从右侧滑动呼出通知中心,四指朝外扩散可以显示桌面...双指双击阅读区域,可以将阅读区域放大屏幕大小,在做大文字量阅读的时候很有用。再次双击恢复原样。 三指单击英文单词,完成取词翻译。...这是我迄今能找到的最完美的取词翻译体验,而且只有Mac原生应用才支持,Firefox,Chrome都不行,效果如下图: ? 完美同步到iPhone,iPad。

1.3K30

一个Mac系统,能让程序员编程效率提升30%

将应用全屏最大的好处在于避免注意力被其他的信息分散掉。当然全屏之后要切换出当前的工作环境就需要其他工具的辅助。 应用切换神器Snap 上面提到dock栏一般被我隐藏,但dock上有我最常用的app。...Automatic模式,直接将dock栏上的应用从左右一直映射到以下快捷键: cmd+1, cmd+2, cmd+3, … cmd+0。...被忽视的触摸板 不少人都会觉得macbook的触摸板非常灵敏好用,单指轻触就可以完成鼠标的单击效果,双指轻触右半部分显示菜单,双指上下滑动可以完成页面的上下滚动,双指从右侧滑动呼出通知中心,四指朝外扩散可以显示桌面...双指双击阅读区域,可以将阅读区域放大屏幕大小,在做大文字量阅读的时候很有用。再次双击恢复原样。 三指单击英文单词,完成取词翻译。...这是我迄今能找到的最完美的取词翻译体验,而且只有Mac原生应用才支持,Firefox,Chrome都不行,效果如下图: ? 完美同步到iPhone,iPad。

2.1K20

​年终盘点: 复盘20+基于React的开源管理后台&插件

几秒钟内撤消更新和删除 支持任何身份验证提供者(RESTAPI,OAuth,BasicAuth等) 功能齐全的数据(排序,分页,过滤器) 支持键入筛选 支持任何表单布局(简单、选项等) 自定义操作用于各种数据类型...可以提供安全、扩展且具有成本效益的闪电般快速的网站 为用户提供最前沿和最独特的主题。...12.Mantis React Mantis 是一个免费开源的 React Redux 仪表板模板,使用 MUI React 组件库制作,旨在实现灵活性和更好的定制性。...,也适用于学习React时进行参考或练手的项目。...Mock 数据方案 用户管理:登录、登出演示、账号管理 权限管理:路由权限(动态路由)、组件权限(按钮) 多代理配置:开发环境(development)配置多个本地代理 其他内置功能:伸缩侧边栏、面包屑、全屏

51110

【周末水文】我的iPhone7升级到了iOS14后,又可以再战两年了

经常视频聊天、玩游戏、看直播等都会有很严重的发热,导致CPU降频顿。...下面我们来说说iOS14有哪些新增功能 个性化的小组件 如上图,iOS14支持在桌面添加小组件了,目前大部分组件是原生app的小组件,少数第三方应用也支持。第三幅图中我用的就是第三方小组件了。...隐藏主屏幕 如上图,微信App那一页被我隐藏掉了,如果你担心家里的熊孩子或者你的女票使用某个App,可以用这个功能进行隐藏哦。...1525379300969988098&format_id=10002&support_redirect=0&mmversion=false 其他人性化的功能 当然iOS14还有很多人性化的改良,比如: 来电电话,和Siri可以设置为不用全屏了...短信可以使用语音了(虽然我们早已不用短信而是用微信了) 轻触 iPhone 背面可以实现截图、录音、唤出Siri等功能(貌似只有iPhone X以后才有的功能) 可以更改默认浏览器 语音备忘录可以优化背景噪声

93810

经验之谈-关于实际项目微前端优化

但是当业务量不断扩展,从开发到用户会有各种影响(当然分多个项目也没问题,但是用户需要记住N个链接) ?...独立部署: 每一个模块单独部署 技术选型灵活: 在同一项目下可以使用如今市面上所有前端技术栈,也包括未来的前端技术栈。 容错: 单个模块发生错误,不影响全局。...扩展: 每一个服务可以独立横向扩展以满足业务伸缩性,与资源的不必要消耗; 希望改造成这样 对外,看上去是一个系统。对内又可以分多个web项目 ? ?...,相比第三方框架,原生组件简单直接,符合直觉,不用加载任何外部模块,代码量小(现在流行的React,Vue都是组件框架) 每个子应用需要使用 Web Components 技术编写组件或者使用框架生成...,即子项目调用基层的全屏的弹窗) 基层架构与子项目之间的数据交流 ?

1.4K50

小程序的当下和未来可能 | 崔红保在GMTC 深圳站演讲内容整理

在这套方案的保障下,终于解决了之前的各种难题:让 JS 应用功能体验达到原生,并且即点即用、直达二级页面。...视图层就是上图右上角这块,用户可见的UI效果、触发的交互事件在视图层完成,视图层包含web组件、原生组件两种,也就是小程序是原生+web混合渲染的模式,这块后面会详细讲。...其实,通讯阻塞是业界普遍存在的一个问题,不止小程序,react native、weex等同样存在通讯阻塞的问题。只不过react native、weex的视图层是原生渲染,而小程序是web渲染。...所对应的键盘,原生弹出键盘是自定义按钮(如上图中下一步、send按钮)的。...Android 端的同层渲染基于 加 chromium 内核扩展来实现,大致流程如下: 原生层创建一个原生组件(如video) WebView 创建一个 节点并指定其类型为

1K30

当前端框架聊性能,聊的是同一个性能么?

我们先截取最前面两行,分别是「页面加载后创建1000行表格所需时间」以及「替换1000行列表所需时间」: 从左到右性能依次降低,其中第一列vanillajs指「原生JS」,这也是众多框架毕生在追寻的目标...在上表有一行指标,红色特别多(代表性能低),这行度量的是「点击列表某一行使其高亮所需时间」: 这行的跑分结果:SolidJS > Svelte > Vue3.2 > inferno > ... > React...React有这么不堪么? 那么基于「细粒度更新」的框架有什么缺点,React又有什么性能优点呢? 答案是:「持续的交互时间」(consistently interactive)。...与其相对的是右边红字Long Tasks,指向的都是耗时很长的JS任务,此时浏览器更容易顿。...React没有这部分开销,同时借由基于「虚拟DOM」的「时间切片」,React能进一步降低「持续的交互时间」。

75920

革命性web前端框架Flutter详细介绍和学习路径

据称Dart语言可以编译成原生代码,直接跟原生通信。 ? Flutter将UI组件和渲染器从平台移动到应用程序中,这使得它们可以自定义和扩展。...Flutter 和 React Native 底层架构的比较 React-Native、Weex 核心是通过 Javascript 开发,执行时需要 Javascript 解释器,UI 是通过原生控件渲染...React Native存在将RN控件转换为对应平台原生控件的过程,存在一定的差异(如之前在调研里提到过的Button在iOS和Android下面显示效果不一样)。...基于ListView实现水平和垂直方式滚动的列表 基于ExpansionTile实现展开的列表 基于GridView实现网格列表 高级功能列表下拉刷新与上拉加载更多功能实现 Flutter进阶提升...进阶拓展:开发包和插件开发指南 Flutter插件开发流程与步骤(LoadingContainer) Flutte插件开发与发布 Flutter进阶拓展:全面屏、折叠屏适配与兼容问题 Flutter 全屏

3.7K40

总结100+前端优质库,让你成为前端百事通

、Vue、Angular 项目中使用 「Scroll Reveal」 零依赖,为 web 和移动浏览器提供了简单的滚动动画,以动画的方式显示滚动中的内容 「Kute.js」 一个强大高性能且扩展原生...JavaScript 动画引擎,具有跨浏览器动画的基本功能 「Typed.js」 一个轻松实现打字效果的 js 插件 「fullPage.js」 一个轻易创建全屏滚动网站的 js 滚动动画库, 兼容性无可替代...Thunk Redux 的异步处理中间件 MobX 通过函数响应式编程使得状态管理变得简单和扩展 Dva 一个基于 redux 和 redux-saga 的数据流方案 工具类 React Virtualized...一个能渲染大型列表和表格的 React 解决方案 react-file-viewer React 在线 PDF 预览插件 react-copy-to-clipboard 基于 React 的复制到剪切板组件...和 D3 构建的自定义的图表库 Viser 支持多种主流框架的可视化库 拖拽/排序 react-beautiful-dnd 漂亮,可移植性 列表拖拽库 react-dnd 帮助我们构建复杂的拖放界面

3.1K20

Progressive Web Apps

因为断网而)瞬间回到远古时代 可靠指的是离线缓存,断网状态走缓存,保证离线场景仍然可用,service worker配合cache API建立缓存-代理机制 快速:迅速以丝滑的动画作为交互反馈,而不存在掉帧顿的滚动...快速,只是强调交互反馈“感觉快”,与推崇的Material Design有关,并没有真正的速度优势(至少首屏没有) 另外,得益于缓存-代理机制,再次访问时走本地缓存会相当快 类native:像设备原生...App一样,具有沉浸式的用户体验(即全屏) 除了全屏外,还有主屏图标(让Web App在主屏幕有一席之地)和系统通知(“拉活”的能力),通过Web App Manifest配置来实现,依赖用户环境支持...launcher=true" } P.S.安装banner是指一个类似于获取权限的弹出面板,用户可以选择添加主屏幕或取消,满足一定条件的话,Chrome会自动弹出安装banner,具体见Web App...另外,Angular,React,Vue等主流框架都提供了PWA脚手架,具体请查看The Ultimate Guide to Progressive Web Applications 参考资料 The

1.1K40

「首席架构师推荐」React生态系统大集合

图像 模型库 数据管理 地图 图表 React原生 React本机常规资源 React原生社区 React原生教程 React原生开发工具 React原生样本应用程序 React Native Boilerplates...Awesome 5组件库 Reakit - React访问,可组合和自定义的组件 React很棒的组件 Awesome的React Components列表 react-select - 选择React...组件 react-dnd - 拖放React react-grid-layout - 具有响应断点的拖动和可调整大小的网格布局 react-table - React的轻量级,快速且扩展的数据网格...riotjs - 一个类似React的3.5KB用户界面库 Maple.js - 将Web组件的概念引入React react-i13n - 一种高性能,扩展插拔的方法,用于检测React应用程序...简单,扩展的状态管理 Qaf - 作为商店的组件。

12.3K30

Web前端性能优化思路

而耗时的增加会导致页面响应慢,顿,影响用户体验。 针对上述两种耗时的情况,常见的优化方向有: 缩短请求耗时; 减少重排重绘; 改善JS性能。...常用工具: react-window react-loadable JS原生,如IntersectionObserver 框架提供,如React.lazy、react-intersection-observer...常用方法: 虚拟列表:只渲染可见区; 惰性加载:无限滚动; 按需加载:页面只在切换过去时才加载。...以虚拟列表举例,以下是使用react-window库,仅仅渲染了可见区的数据: 2.2 减少渲染次数 总体思路:避免重复的渲染。...---- - 相关阅读 - WEB前端安全自查和加固 前端不止:Web性能优化 - 关键渲染路径以及优化策略 点击【阅读原文】洞见网站查看原文&加粗字体部分的相关链接。

1.5K20

React组件库封装初探--Modal

// 内容层高度自定义 //...内容层 position: fixed定位(modal-warp层) warp层的布局大小考虑 全屏:如果warp层实现全屏,由于和mask层为兄弟组件,导致warp层位于mask层之上,...后面对mask层单击关闭功能易出现单击不到,因为被全屏的warp层遮挡(可考虑使用事件委托,将单击事件绑定第一个父组件,通过判断去除modal层的单击,虽然单击的还是warp层); 大小跟随modal...body')) : null ) } 组件采用函数无状态编程,Modal的显隐由外部控制,内部不控制; 组件的挂载使用ReactDOM.createPortal(child,container)挂载body...基本使用形式 import React,{ PureComponent } from 'react'; import { Modal,Button } from 'lwh_react'; export

5K10

TDesign 更新周报(2022年7月第2周)

组件库Vue2 for Web 发布 0.43.3 FeaturesCascader: 基于 select-input 重构, 文本过长省略使用原生 title 展示全文本,不再使用 tooltip 组件增加...修复阻止冒泡导致 popup 无法正常关闭Drawer: 修复头部渲染异常问题Input: 修复 Input 组件 切换 type 后不生效的问题全局配置: 修复 useConfig computed 属性计算导致列表渲染顿问题详情见...TimePicker: 支持毫秒使用场景Tree: tree 支持拖拽 Bug FixesSpace: 通过FOR循环的内容 没有实现间隔效果DatePicker: 修复日期格式化问题TimePicker: 优化输入模式的使用体验...ChangesDropdownMenu: 属性 overlay 更名为 showOverlay,存在不兼容更新Popup: 移除 transitionProps 属性,存在不兼容更新 Bug FixesTabs: 修复选项不存在时滑动报错问题...for Mobile 发布 0.9.1 FeaturesToast: 新增 overlayProps 属性透传 overlay 组件,新增 showOverlay 属性控制遮罩层显示Button:

2.2K10
领券