标签: 前端开发

  • iztro-开源轻量级紫微斗数排盘JS开源库

    iztro 紫微斗数排盘库界面预览

    项目简介

    iztro是一套支持多语言的轻量级紫微斗数排盘JavaScript开源库。用户只需传入出生日期、时间、性别,即可输出完整的紫微斗数星盘信息。

    核心功能

    • 🔮 星盘排盘:输入出生信息,自动生成紫微斗数星盘
    • 📊 运限查询:获取大限、小限、流年、流月、流日、流时数据
    • ✨ 流耀计算:获取大限和流年的动态星耀信息
    • 🌐 多语言支持:支持多语言混合输入,输出指定语言数据
    • ⚡ 轻量高效:纯JavaScript实现,依赖少,加载快

    相关链接

    • 📦 仓库地址:GitHub - SylarLong/iztro
    • 📖 文档地址:https://ziwei.pro
    • 🧪 在线演示:https://ziwei.pub

    适用人群

    iztro适合对紫微斗数感兴趣的研究者、开发者以及需要集成紫微斗数功能的应用程序开发者使用。纯开源免费,欢迎学习和研究。

  • Yesicon - 免费开源矢量图标库 18万+图标支持SVG/PNG下载

    网站介绍

    Yesicon是一个免费开源的高质量矢量图标下载网站,致力于为开发者和设计师提供优质的图标资源。网站收录了全球157个图标集,累计收录超过18万+矢量图标,为用户提供了丰富的选择空间。

    Yesicon图标库界面预览

    主要功能

    多格式支持

    支持直接复制、下载SVG/PNG等多种格式的图标,满足不同开发需求

    在线定制

    支持快速定制图标颜色、大小和代码风格,可实时预览效果

    一键复制

    提供便捷的一键复制功能,代码可直接用于项目开发

    多语言支持

    网站支持中英文等多种语言,方便全球用户使用

    智能搜索

    支持关键词搜索,快速定位所需图标

    收藏管理

    支持收藏常用图标,方便后续快速查找使用

    Yesicon图标搜索功能

    图标分类

    网站收录了涵盖多个类别的矢量图标,满足不同项目的设计需求:

    • 常用图标:箭头、文件、文件夹等基础图标
    • 社交媒体图标:Twitter、Facebook、Instagram等平台图标
    • 技术开发图标:代码、终端、数据库等开发相关图标
    • 界面元素图标:按钮、导航、表单控件等UI组件
    • 品牌图标:知名厂商Logo等品牌标识

    使用场景

    Web开发

    前端项目图标集成

    移动应用设计

    APP界面图标素材

    UI/UX设计

    界面视觉设计资源

    前端开发

    React、Vue等框架组件图标

    无论是个人项目还是商业项目,都可以免费使用这些开源图标资源。

    Yesicon图标应用场景

    使用指南

    搜索图标

    在搜索框中输入关键词(如"home"、"settings"等),即可快速找到相关图标。支持中英文关键词搜索。

    下载图标

    点击目标图标后,可选择SVG或PNG格式下载。

    • SVG格式:支持无损缩放,适合各种屏幕尺寸
    • PNG格式:适合直接使用的场景

    自定义图标

    在图标详情页,可在线调整:

    • 颜色(支持HEX、RGB格式)
    • 尺寸大小
    • 代码风格(React、Vue、HTML等)

    总结

    Yesicon作为一款免费开源的矢量图标库,凭借其丰富的图标资源、便捷的下载方式和强大的自定义功能,已成为开发者和设计师获取图标资源的优质选择。无论是前端开发、移动应用设计还是UI/UX设计,Yesicon都能提供高效的支持。

  • Vditor - 易于使用的 Markdown 编辑器,支持所见即所得

    Vditor 是一款功能强大的浏览器端 Markdown 编辑器,采用 TypeScript 开发,原生支持 JavaScript,同时完美兼容 Vue、React、Angular 等主流前端框架,并提供桌面版本。它融合了三种编辑模式,为用户带来灵活的创作体验。

    核心特性

    🎨 三种编辑模式

    • 所见即所得(WYSIWYG):富文本编辑方式,所见即所得,无需记忆复杂语法
    • 即时渲染(IR):类似 Typora 的即时渲染体验,边写边看效果
    • 分屏预览(SV):左侧编辑、右侧预览的经典模式,适合传统用户

    📝 丰富的内容支持

    • 大纲导航,快速定位文档结构
    • 数学公式(LaTeX)支持,学术写作必备
    • 脑图、图表、流程图、甘特图、时序图
    • 五线谱等专业功能
    • 多媒体嵌入支持

    🔧 多媒体与增强功能

    • 语音阅读,辅助内容理解
    • 标题锚点,方便文档导航
    • 代码高亮及一键复制功能
    • Graphviz 和 PlantUML 渲染支持
    • 任务列表管理

    🛡️ 安全与便捷

    • 内置安全过滤机制
    • 图片懒加载优化性能
    • 多平台预览支持
    • 多主题切换(黑白绿三套主题)
    • 自动保存内容,防止意外丢失

    🚀 协作与上传

    • 一键复制到微信公众号/知乎
    • 粘贴 HTML 自动转换为 Markdown
    • 拖拽、剪切板粘贴上传
    • 显示实时上传进度
    • 支持 CORS 跨域上传

    🌐 多语言与可定制性

    • 内置中、英、韩三种语言界面
    • 36+ 项工具栏操作自定义
    • 支持自定义快捷键、图标、提示等

    技术规范

    Vditor 完全实现 CommonMarkGFM(GitHub Flavored Markdown)规范,支持 Markdown 格式化与语法树查看,提供 10+ 项配置选项。编辑器支持主流浏览器,对移动端友好,兼容性好。

    官网与资源

    • 官方网站:https://b3log.org/vditor/
    • GitHub 仓库:https://github.com/vanessa219/vditor
  • Any Rule - 开发者必备常用正则表达式工具,支持多平台使用

    Any Rule 是一款功能强大的常用正则表达式工具,支持 Web、VS Code、Idea、Alfred Workflow 等多个平台,帮助开发者快速查找和复制各类常用正则规则。

    📋 主要功能

    Any Rule 内置丰富的正则表达式规则库,覆盖日常开发中的各类验证场景:

    • 🚂 火车车次号 - 正则验证规则
    • 📱 手机机身码(IMEI) - 格式校验
    • 🔗 网址(URL) - 匹配规则
    • 🏢 统一社会信用代码 - 验证规则
    • 💳 常见格式 - 身份证、银行卡、邮箱、手机号等
    • 🔄 跨平台同步 - 多设备无缝使用

    💻 平台支持

    Any Rule 提供多种使用方式,满足不同开发环境需求:

    平台 说明
    🌐 Web版 在线访问,即开即用
    📝 VS Code插件 IDE内直接调用,高效编码
    ☕ Idea插件 Java开发者首选
    ⚡ Alfred Workflow Mac效率工具集成

    🎯 使用场景

    Any Rule 适用于多种开发场景:

    • 🖥️ 前端开发 - 表单验证、输入校验
    • 🖥️ 后端验证 - API参数校验、数据过滤
    • 📊 数据清洗 - 批量文本处理
    • 📝 文本处理 - 日志分析、内容提取

    规则库持续更新,覆盖日常开发中的绝大多数需求。

    🔗 相关链接

    • 🌐 在线使用:https://any-rule.vercel.app/
    • 💻 GitHub开源:https://github.com/any86/any-rule
  • Website Downloader - 免费网站源码下载器 | 一键下载任意网站完整源代码

    Website Downloader是一款完全免费的在线网站源码下载器,能够帮助用户下载任何网站的完整源代码,包括 JavaScript、样式表(CSS)、图像资源、Node.js 文件等各类网站资源。

    ✨ 核心功能

    • 完整源码下载:支持下载网站的全部源代码文件
    • 多资源类型支持:涵盖 HTML、CSS、JavaScript、图片、视频、字体等各类资源
    • 智能递归抓取:自动递归构建完整目录结构,保留原始网站层级
    • 操作简单便捷:只需粘贴网址,一键即可开始下载
    • 本地离线浏览:将网站内容完整下载到本地,支持离线查看

    📖 使用教程

    Website Downloader 操作界面示例

    1. 访问 Website Downloader 官网
    2. 在输入框中粘贴需要下载的网站 URL
    3. 点击下载按钮,系统自动开始抓取网站资源
    4. 等待下载完成,获取包含完整源码的压缩包

    🎯 应用场景

    • 学习参考:研究优秀网站的前端架构和代码实现
    • 备份存档:对重要网站进行本地备份存档
    • 离线浏览:将网页内容下载到本地进行离线阅读
    • 前端开发:参考学习网页布局、CSS 样式和交互效果

    ⚠️ 注意事项

    请确保下载行为符合目标网站的使用条款和版权规定,本工具仅供学习交流使用。

  • v0 by Vercel - AI用户界面生成工具 | 代码直接复制使用

    v0 是由知名前端部署平台 Vercel 推出的 AI 用户界面生成工具。它利用先进的 AI 模型,能够根据简单的文本描述快速生成高质量的用户界面和代码。生成的代码不仅可以直接复制使用,还支持根据项目需求进行深度定制和优化。

    核心特点

    • 基于成熟技术栈:v0 基于 shadcn/ui 和 Tailwind CSS 构建,确保生成的代码符合现代前端开发最佳实践,组件风格统一、设计规范
    • React 代码输出:生成复制粘贴友好的 React 代码,组件化程度高,开箱即用,减少从零开发的时间成本
    • 简单文本提示:通过自然语言描述即可生成复杂的用户界面,无需掌握专业的设计或编程技能
    • 可自定义:生成的代码完全开放,支持深度定制、二次开发和团队协作
    • 实时预览:支持界面实时预览,所见即所得,方便快速迭代调整
    • 多场景支持:可生成按钮、表单、卡片、导航栏、数据展示等多种常见 UI 组件

    使用方法

    v0 目前处于测试阶段,需要加入等候名单才能体验完整功能。使用步骤如下:

    1. 访问 v0 官网 https://v0.dev/
    2. 使用邮箱或 GitHub 账号注册并登录
    3. 提交加入等候名单的申请
    4. 等待官方发送邀请邮件
    5. 收到邀请后即可开始使用 AI 生成界面功能

    适用人群

    • 前端开发者:快速生成 UI 组件和页面原型,加速开发流程
    • 产品经理:快速可视化产品构思,制作交互原型
    • 设计师:快速将设计稿转化为可运行的代码
    • 创业者:快速搭建 MVP 产品界面,验证商业想法
    • 编程学习者:参考学习现代 React 组件的最佳实践

    注意事项

    • v0 目前处于测试阶段,功能可能持续更新迭代
    • 生成的代码基于开源技术栈,建议根据具体开源协议确认使用范围
    • 建议结合项目实际需求对生成代码进行审核和优化

    网站地址

    https://v0.dev/

  • 国外技术博客网站集合大全_热门开发者博客资源汇总

    在技术学习和开发过程中,阅读优质的技术博客是提升技能的重要途径。本文为大家整理了一份实用的国外技术博客网站集合,涵盖了多个技术领域,适合不同层次的开发者和技术爱好者参考学习。

    📚 为什么要关注国外技术博客?

    国外技术博客通常具有以下优势:

    • 内容质量高:许多知名技术博客由行业专家撰写,文章深度和实用性较强
    • 技术前沿:能够第一时间获取最新的技术动态和行业趋势
    • 英文资源丰富:大部分优质技术文档和教程以英文为主
    • 社区活跃:评论区往往有高质量的技术讨论和经验分享
    技术博客学习示意图

    💻 Web开发类博客

    • CSS-Tricks:专注于CSS、前端开发和用户体验设计,内容实用且更新频繁
    • Smashing Magazine:老牌Web开发技术博客,涵盖设计、前端、后端等多个方向
    • SitePoint:提供Web开发、设计、编程等领域的教程和文章
    • Codrops:创意前端实验和UI设计灵感来源,技术与艺术结合
    • MDN Web Docs:Mozilla官方Web技术文档,是前端开发者的必备参考

    👥 开发者社区与资讯

    • Dev.to:全球最大的开发者社区之一,文章覆盖各个技术领域
    • Hacker Noon:科技与创业主题的技术博客,文章质量较高
    • Medium (技术专栏):众多技术大咖的博客聚集地,内容丰富多样
    • Hacker News:Y Combinator旗下的科技新闻聚合平台
    • Reddit (r/programming):程序员社区讨论,技术话题广泛
    开发者社区平台

    📖 学习与教程类

    • freeCodeCamp:免费编程学习平台,教程系统且实践性强
    • Treehouse Blog:编程学习资源博客,提供各类技术教程
    • Stack Overflow Blog:程序员问答社区的技术博客

    🏢 大厂技术博客

    • GitHub Blog:开源项目和技术动态的第一手资讯
    • Google Developers Blog:Google技术更新和开发工具介绍
    • Microsoft Developer Blog:微软技术栈和开发平台最新动态
    • AWS Blog:亚马逊云服务技术教程和最佳实践
    • Apple Developer Blog:iOS和macOS开发技术更新
    大厂技术博客

    🎯 主要技术领域覆盖

    本集合涵盖了以下技术方向的优质博客资源:

    • 🔹 Web开发(前端、后端、全栈)
    • 🔹 移动端开发(iOS、Android)
    • 🔹 数据分析与机器学习
    • 🔹 DevOps与云计算
    • 🔹 开源项目与技术社区

    💡 使用建议

    建议收藏本文中推荐的博客网站,定期浏览以保持对技术发展的敏感度。可以根据个人技术方向重点关注相关领域的博客,同时适当拓展其他领域的知识面。建议配合RSS阅读器使用,方便追踪感兴趣的博客更新。

    • 📌 使用RSS阅读器统一管理博客更新
    • 📌 根据技术方向重点关注相关领域
    • 📌 定期阅读,保持技术敏感度
    • 📌 参与社区讨论,提升学习效果

    这些技术博客资源会持续更新,欢迎有需要的开发者收藏学习。

  • Windows 12 网页版 - 在线体验 Windows12

    Windows 12 网页版界面预览

    Windows 12 网页版是一个在线开源项目,由一位初三学生使用前端开发三件套(HTML+CSS+JavaScript)实现。该项目灵感来源于 Windows 12 概念版(Powered by PowerPoint),用户可以直接打开网页在线体验 Windows 12。

    功能特点

    UI设计 动画效果

    • 精美 UI 设计:界面高度还原 Windows 12 概念版,采用现代化设计语言
    • 流畅动画效果:丰富的交互动画,体验丝滑顺畅
    • 高级功能模拟:支持多种 Windows 12 特色功能模拟(相较于传统网页版)
    • 即开即用:无需下载安装,打开浏览器即可使用
    • 完全开源:代码托管于 GitHub,可自由学习和二次开发

    支持的平台

    Windows 12 网页版支持多种设备和浏览器访问:

    • 桌面端:Chrome、Firefox、Edge、Safari 等主流浏览器
    • 移动端:iOS Safari、Android Chrome 等移动浏览器
    • 推荐:使用电脑浏览器访问以获得最佳体验效果

    注意事项

    ⚠️ 网页版内容可能与 Windows 12 正式版本不一致,该项目仅供体验预览,正式版本请以微软官方发布为准。

    快速体验

    快速体验

    在线体验:https://tjy-gitnub.github.io/win12/desktop.html

    开源项目:https://github.com/tjy-gitnub/win12

  • GitHub前端面试题库 | Front-end Web Development Interview Question收藏

    Front-end Web Development Interview Question 是一个专注于前端开发面试题的开源 GitHub 仓库,由开发者 paddingme 创建并持续维护。该项目收集了作者在实际面试中遇到的前端面试笔试题,并提供详细的解答思路和参考答案。

    项目特色

    • 实战面试题:收录真实面试中遇到的前端面试题目
    • 详细解答:每道题目都配有详细的解答和分析
    • 持续更新:项目保持活跃更新,不断添加新的面试题
    • 求职经验:分享前端找工作方面的实用经验和技巧

    内容涵盖

    该仓库涵盖的前端知识点包括但不限于:

    • HTML/CSS 基础与进阶
    • JavaScript 核心概念
    • 前端框架(React、Vue 等)
    • 浏览器原理与网络协议
    • 性能优化策略
    • 前端工程化

    网站地址

    • 官网:https://fe.padding.me/
    • GitHub 地址:https://github.com/paddingme/Front-end-Web-Development-Interview-Question

    适用人群

    • 准备前端面试的求职者
    • 想要巩固前端基础知识的开发者
    • 希望了解前端面试趋势的从业者