前端开发 - 在线工具

zobor
202 阅读6分钟

前端信息

  1. Github Stats：显示某个人的github信息卡片。

  2. Javascript Weekly：JS周刊，提供最新前端技术动态。

  3. 掘金热门：可以查看掘金上最近3天、一周、全部的热门文章。

  4. CSS Tricks：CSS动态信息。

  5. smashingmagazine：专业的网页设计师和开发人员的在线杂志

  6. Github热门趋势：TypeScript版本

  7. Github热门趋势：JavaScript版本

CSS工具

  1. aicolors：使用 AI 驱动的调色板生成器创建酷炫而独特的调色板。浏览、编辑和可视化您的调色板，以找到完美的组合

  2. colorhunt：发现 Color Hunt 最新精心挑选的调色板。为您的设计和艺术项目获取色彩灵感。

  3. WebGradients：CSS3、Photoshop 和 Sketch 中的 180 个漂亮的线性渐变。该系列由顶级设计师策划，完全免费。

  4. colordrop：探索数以千计的调色板或创建自己的调色板。非常适合寻求灵感的设计师和艺术家。

  5. coolors：为您的设计生成或浏览美丽的颜色组合。

  6. brandcolors：罗列了各个知名品牌的配色方案。

  7. flatuicolors：全球 13 位设计师合作，共有 280 种颜色可供您命令，用于您的下一个项目、设计、演示的复制/粘贴。

  8. uigradients：线性渐变

  9. colorleap：知名作品颜色配色方案

  10. happyhues：Happy Hues 是一个调色板灵感网站，可作为如何在您的设计项目中使用颜色的真实示例。

  11. trianglify：Trianglify.io 是一种用于生成可用作壁纸和网站资产的低多边形三角形图案的工具。

设计工具

  1. blobmaker：制作一个球状形状，支持导出svg。

  2. animista：制作动画

  3. tabbied：多模式生成器

  4. getwaves：制作波浪

  5. identicon：hash头像

MarkDown编辑器

  1. markdownlivepreview：轻便快捷的md编辑器

  2. lyic：针对微信公众号的md编辑器

API 特性检查

  1. caniuse："Can I use"提供最新的浏览器支持表，以支持桌面和移动 Web 浏览器上的前端 Web 技术。

  2. caniemail：查询在不同平台上Email(EDM)语法的支持程度。

  3. caniuse.email：HTML 电子邮件中 CSS 支持的兼容性表。

代码检查

  1. JSHint：JSHint 是一个JavaScript 的代码质量检查工具，主要用来检查代码质量以及找出一些潜在的代码缺陷

  2. eslint：在线eslint检查代码

JavaScript Format

  1. minify-js：MinifyJS是一个在线工具，可让您将 JavaScript 代码的大小减少多达 80%。minify js 工具使用兼容的 Terser 实用程序

  2. JSCompress：是一个在线 JavaScript 压缩器，可让您将所有 JS 文件压缩和缩小到其原始大小的 80%

  3. beautifier：这个小小的美化器将重新格式化和重新缩进书签、丑陋的 JavaScript、解压缩由 Dean Edward 的流行打包器打包的脚本，以及由 npm 包 javascript-obfuscator 处理的部分反混淆脚本。

Playground

  1. playcode：这个免费的 IDE 更适合像我这样的前端爱好者。 你可以在线运行 JavaScript 或 TypeScript 代码，并在键入时查看结果。 很容易做一些前端实验并与他人分享

  2. CodeSandbox：CodeSandbox 是一个在线代码编辑器，主要用于创建 Web 应用项目

  3. CodePen：CodePen 是一个在线的HTML、CSS 和 JavaScript 代码编辑器，能够编写代码并即时预览效果，可以利用它来构建和分享代码。CodePen 支持使用 Less、Sass、PostCSS 等来编写CSS

  4. JSFiddle：JSFiddle 是一个在线代码编辑器，允许用户在单个页面上编辑和运行 HTML、JavaScript 和 CSS 代码。JSFiddle 使用 CodeMirror 构建，其提供了多游标、语法高亮、语法验证（linter）、大括号匹配、自动缩进、自动完成、代码/文本折叠、搜索和替换以协助开发人员的操作。JSFiddle 被广泛用于共享简单的测试和演示

  5. JS Bin：JS Bin 是一个开源的协同 web 开发调试工具。主要用于帮助测试 JavaScript 和 CSS 的代码片段，功能与 jsFiddle 类似。可以实时分享在 JS Bin 中输入的内容，在任何平台上的任何设备上查看 JS Bin 的输出，都是实时更新的

  6. Stackblitz：Stackblitz 和 VSCode 非常像，使用简单可以一键创建 React、Vue、Vanilla、RxJS、TypeScript、Angular 等项目。

  7. 码上掘金：码上掘金是一个为广大开发者提供代码在线 Playground 的平台，具备轻量简单、易使用、现代标准、模块化、实时编辑，所见即所得等特性。内置了 ES Modules 支持，并且支持 React、Vue 等流行前端框架。

在线编译

  1. Babel Transform：下一代 JavaScript 的编译器

  2. Typescript To JavaScript：ts转js

  3. Typescript在线运行：在线运行TS代码

  4. JavaScript在线运行：JavaScript 在线编译器

  5. 在线运行JavaScript代码：在线编写、运行和共享 Javascript 代码

  6. 在线运行JavaScript、C++、Python、Java：Scalers 在线 JavaScript 编译器不仅仅是一个工具。它展示了我们如何改变我们对编码的思考方式。对于那些喜欢 JavaScript 的人来说，这个编译器开辟了许多新的机会

CDN

  1. jsdelivr：使用最为广泛的CDN了，除了有静态库的加速

  2. cdnjs：提供非常完整的 JavaScript 库，无论是热门或是冷门的一应俱全

  3. bytedance： 字节跳动静态资源库，CDN节点也非常多，值得推荐的国内站点，背靠字节跳动，质量也比较有保障。

  4. bootcdn：国内节点众多，BootCDN 是猫云联合 Bootstrap 中文网 共同支持并维护的前端开源项目免费 CDN 服务，致力于为 Bootstrap、jQuery、React、Vue.js 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。BootCDN 所收录的开源项目主要同步于 cdnjs 开源项目仓库。

  5. cdnjs.net：免费开源前端公共库，同步的cdnjs的资源，CDN是使用的Cloudflare缓存，速度一般。

  6. 75cdn：谐音于奇舞，是由 360 前端奇舞团支持并维护的开源项目免费 CDN 服务，支持 HTTPS 和 HTTP/2，囊括了上千个前端资源库和 Google 字体库。而且是首个支持 HTTP/2 的 CDN 服务，共收录了 4275 个开源项目，均同步于 cdnjs！

  7. UNPKG：unpkg 是一个快速的全球内容交付网络，适用于 npm 中的所有内容。通过使用它，能够使用以下类似的 URL 就能快速轻松地从任何包加载任何文件！

  8. Staticfile CDN：该网站由七牛云提供 CDN 加速，由技术社区掘金支持。

算法学习

  1. javascript-algorithms：该存储库包含许多流行算法和数据结构的基于 JavaScript 的示例。

  2. LeetCode：在线刷题。

  3. LeetCode VsCode插件：直接在VsCode编辑器中刷题，提交解答。

avatar
文章
阅读
粉丝