探索用户界面UI元素，在线CSS/HTML/Tailwind实例
汇聚大量开发者和设计师分享的前瞻技术与设计经验。
项目初期的技术选型 说实话，最开始接到这个项目的时候我也没想到会用 Vuido。客户的需求很简单：开发一个桌面端的轻量级日志查看工具，支持 Windows 和 macOS，界面不用太 fancy，但要...
横竖屏切换，这破事又来了 上周上线前最后一天，测试甩给我一个bug：iPhone上横屏的时候页面布局炸了。输入框被键盘顶上去之后，收起键盘页面回不来了，留了一大片空白，按钮点不了。我第一反应是“不会吧...
先上代码，我每次都这么写 每次做新项目，只要涉及到社交分享，第一件事就是把 Open Graph 标签给加上。不是为了多高级的功能，就是为了避免别人转发你链接的时候，封面图裂了、标题乱码、描述变成页面...
先看代码，再聊别的 我最近在搞一个 H5 项目，移动端调试真是一言难尽。页面在安卓机上点不动，在 iOS 上又莫名其妙卡住。最后还是靠日志输出才定位到问题。今天就来聊聊我在移动端做日志输出的一些实战经...
又踩坑了，循环绑定事件拿不到正确的索引值 这破事卡了我快两个小时，最后发现还是闭包的老问题。简单说就是我在一个 for 循环里给一堆按钮绑定 click 事件，每个按钮应该弹出对应的索引 i，结果不管...
我的写法，亲测靠谱 我一般在项目里用 preconnect 的时候，直接写在 <head> 里，简单粗暴但有效。先上代码： <link rel="preconnect&qu...
Workflow工作流，我到底该用哪个？ 上周项目上线前两天，我们团队在重构一个内容发布的流程，原本是靠人工点点点完成的多步骤操作，这次想搞成自动化工作流。结果光选技术方案就吵了半小时——有人推Nod...
先上代码，直接能跑的示例 我最近在搞一个项目，需要动态加载一些第三方功能模块，比如用户行为埋点、热力图分析，还有个支付 SDK 要按需引入。一开始是直接 import 全家桶，结果首屏加载慢得不行，b...
先说结论：StyleLint + SCSS 是我团队的标配 别整那些花里胡哨的，我们项目现在统一用 StyleLint 配合 SCSS 做样式校验，配合 Prettier 格式化，跑在 pre-com...
优化前：卡得不行 项目上线前做性能压测，发现一个问题：本地开发环境一切正常，但一到 CI 构建部署后，CSS 构建时间直接飙到 30 秒以上。整个构建流程卡在 postcss 阶段不动，日志停在 Au...
先上代码，再聊细节 最近在搞一个文件管理器的前端功能，其中有个核心交互是“拖拽选择”——就是按住鼠标画个框，把里面的项目都选中。一开始我以为这种功能得靠第三方库，比如 Interact.js 或者 D...
我的写法，亲测靠谱 前端处理敏感信息这事儿，说白了就是别把不该暴露的东西扔到浏览器里。我之前做过一个后台管理系统，登录后用户的权限列表、个人信息全在前端存着，当时图省事直接挂在 window.user...
说在前面：Volar这玩意儿我真折腾够了 先直说结论吧：我现在新项目一律上 Volar + <script setup>，老项目能升就升。不是因为它多完美，而是踩过一圈坑之后发现，它比 V...
先来一发最常用的场景：把图片转成Base64内嵌 我最近在搞一个移动端的H5项目，首页有个小logo，特别小，就几KB。每次请求都走网络，感觉划不来，还可能有闪白。于是我就直接把它转成Base64，塞...
先上代码，直接能跑 做后台管理系统或者内容列表页，分页这玩意儿几乎是逃不掉的。我之前一直用 UI 框架自带的 Pagination 组件，比如 Ant Design 或者 Element Plus 的...
项目初期的技术选型 这个项目是个内部工具库，要打包成一个轻量级的 JS SDK，供其他团队通过 npm 引入。一开始我们用 Webpack，配置写了一堆，结果打包出来的文件太大，还带了一堆 runti...
又踩坑了，下拉加载卡成PPT 今天上线前最后测一遍列表页，手一滑往下一拽——好家伙，整个页面直接卡住两秒，手指都僵了。这哪是下拉刷新，这是给我上刑呢。 项目是个移动端的资讯流，用 Vue 3 + Va...
项目初期的技术选型 上个月接手了个老项目重构，前端这块原本是用一堆全局变量加 jQuery 撸出来的，环境配置全写在 HTML 里，不同环境靠手动改 script 标签引入的 config.js。每次...
直接说结论：我一般用 CSP 配合 HSTS，简单粗暴 先说结论吧。关于 mixed content 的问题，也就是 HTTPS 页面里偷偷加载了 HTTP 资源，我一直觉得这玩意儿挺危险的——比如你...
先上代码，看完你就懂了 做前端这些年，最烦的不是写样式，是那种“看着简单，一做就崩”的交互。比如列表排序——用户拖一下就能重新排，看起来不就是个 drag & drop？可真动手的时候，你会发...
Hi~欢迎来到 JZTHEME 即刻开启你的创意之旅
