Total 18 Posts
PixiJS定义鼠标样式
canvasPixiJS
定义以PixiJS开发的游戏、图形编辑器等应用中的鼠标样式,实现鼠标样式个性化,增强人机交互的直观性、趣味性,提升游戏、编辑器中鼠标交互操作的用户体验。
常用GIT操作命令
gitbash
收集并整理日常工作中频繁用到的一些git操作命令。
Next.js 中使用 UnoCSS 及其图标样式方案
nextjsunocss
Next.js 中使用 UnoCSS 原子 css 解决方案,并使用 UnoCSS icons 纯 css 图标方案替代传统 svg 图标,实现样式与 html 的分离。
Next.js(v13+) 使用 Contentlayer 创建 MDX 博客
nextjsmarkdownmdx
Next.js(v13+) 使用 contentlayer 创建 MDX 博客应用,Contentlayer 是一个内容SDK,可验证您的内容并将其转换为类型安全的 JSON 数据,您可以轻松地import将其添加到应用程序的页面中,其具有重量轻,易于使用、 出色的开发体验以及快速的构建能力和高性能页面的优点的。
Next.js(v13+) 创建 MDX 博客
nextjsmarkdownmdx
Next.js(v13+) 使用 @next/mdx、next-mdx-remote 创建 MDX 博客应用。本文中主要描述使用 next-mdx-remote 加载远端 markdown 文章内容的处理过程,以及过程中的一些优化及异常处理。
时间格式化在SSR下的偏差
nextjsssr
在进行SSR服务端渲染时,因服务器与客户端所在地时区的不同,造成应用在服务器端渲染时,格式化后的时间结果与实际结果出现偏差。偏差大小取决于服务器时区与客户端时区差值。
CSS实现渐变圆角边框
cssgradient
利用 css 的属性 mask、mask-composite,实现带有圆角、渐变、且内容背景透明的边框。解决高度个性化网站应用中大量使用图片问题,减少图片请求提升网站整体性能。
使用Docker快速实现Nginx服务
jsnginxdocker
使用docker-compose为不熟练Docker,但又不太想在本地物理机上安装各种复杂的开发环境的同学,提供一个简单便利的基于docker的Nginx环境配置流程。
基于dnd-kit实现Antd Table组件拖拽排序
reactantd
拖拽组件库dnd-kit介绍,及其在ant-design中与Table集成实现表格行拖拽排序。
E2E测试之Playwright身份验证
testplaywrightjs
E2E测试中,使用Playwright测试工具测试网页时对具有需要鉴权的页面进行身份验证,在此过程中所产生的问题以及对应的解决方案介绍。
CSS之宽高比例布局
css
在响应式网站中涉及视频播放、可视化图表、图片等一些高宽需要固定的比例时,同时满足布局在不同尺寸下自动适应,这里我们需要利用CSS的一些属性如:padding-top/bottom、视窗单位、aspect-ratio来实现宽高比例(纵横比)布局。
CSS元素居中布局
css
几种常用的纯CSS实现元素居中展示方案,包含了水平居中、垂直居中、水平垂直居中。不同方案适用于不同场景,可根据具体场景选择合适的方案,主要用到flex、position、transform等css属性。
React 组件生命周期
reactjs
React组件各生命周期介绍,您可以将此生命周期图用作备忘单,以便忘记时查询,该生命周期介绍仅适用于react 15.x 版本。
文本域光标定位
js
解决工作中对文本域输入操作,添加元素时的光标在文本域光中的定位。
CSS自定义表单元素复选框与单选框样式
css
借助该CSS3伪类:checked实现表单元素复选框与单选框的样式自定义,依照UI设计稿高度还原表单元素于HTML中,解决默认表单元素复选框与单选框在不同操作系统、不同浏览器中的表现差异,提升视觉效果与用户体验。
CSS自主义浏览器滚动条
cssjs
CSS3新特性定义浏览器滚动条样式,彻底丢弃传统js添加html元素定义方式,简化自定义滚动条配置流程,统一各平台滚动条在浏览器中的表现形式,提升用户体验。
CSS选择器之nth-child
css
通过几个简单示例介绍CSS3新的子选择器nth-child,实现一些比较惊艳的效果。
正则表达式
regexpjs
收录工作中常用的用户名、密码、邮箱、URL、IP、时间、数字等JS正则表达式,以及正则表达式知识介绍和工具推荐,提升工作开发中的效率。