The tools and websites frequently used in advanced FED here

Updated on November 07, 2023 View Times: 1478

Share on Twitter

Front-end information

  1. Github Stats: Github Stats: Displays a person's github information card.
  2. Javascript Weekly: JS Weekly, which provides the latest front-end technology news。
  3. Nuggets Hot: You can view all the popular articles on Nuggets in the last 3 days, one week, and more。
  4. CSS Tricks: CSS dynamic information。
  5. smashingmagazine: An online magazine for professional web designers and developers
  6. Top Trends on Github: TypeScript Version
  7. Top Trends on Github: JavaScript Version

CSS Tools

  1. aicolors: Create cool and unique color palettes with an AI-powered palette generator. Browse, edit, and visualize your color palette to find the perfect combination
  2. colorhunt: Discover Color Hunt's newest handpicked palette. Get color inspiration for your design and art projects.
  3. WebGradients: 180 beautiful linear gradients in CSS3, Photoshop, and Sketch. The collection is curated by top designers and is completely free.
  4. colordrop: Explore thousands of color palettes or create your own. Perfect for designers and artists looking for inspiration.
  5. coolors: Generate or browse beautiful color combinations for your designs.
  6. brandcolors: A list of the color schemes of various well-known brands.
  7. flatuicolors: 13 designers worldwide collaboration, a total of 280 colors are available for your command for copy/paste for your next project, design, presentation.
  8. uigradients: linear gradients
  9. colorleap: The color scheme of well-known works
  10. happyhues: Happy Hues is a palette-inspired website that serves as a real-world example of how color can be used in your design projects.
  11. trianglify: Trianglify.io is a tool for generating low-poly triangle patterns that can be used as wallpapers and website assets.

Design tools

  1. blobmaker: Make a spherical shape and export SVG.
  2. animista: Animating
  3. tabbied: Multi-modal generator
  4. getwaves: Make waves
  5. identicon: hash avatar icon

markdown editor

  1. markdownlivepreview: Lightweight and fast MD editor
  2. lyic: LYIC: MD editor for WeChat official accounts

API feature checks

  1. caniuse: "Can I use" provides the most up-to-date browser support matrix to support front-end web technologies on desktop and mobile web browsers
  2. caniemail: Query the support of the Email (EDM) syntax on different platforms.
  3. caniuse.email: The compatibility table for CSS support in HTML emails.

Code checking

  1. JSHint: JSHint is a JavaScript code quality checker that checks code quality and finds potential code defects
  2. eslint: Eslint checks the code online

JavaScript Format

  1. minify-js: MinifyJS is an online tool that allows you to reduce the size of your JavaScript code by up to 80%. The minify js tool uses a compatible Terser utility
  2. JSCompress: JSCompress is an online JavaScript compressor that allows you to compress and minify all your JS files to 80% of their original size
  3. beautifier: This little beautifier will reformat and reindent bookmarks, ugly JavaScript, decompress scripts packaged by Dean Edward's popular packager, and some deobfuscated scripts handled by the npm package javascript-obfuscator.

Playground

  1. playcode: This free IDE is more suitable for front-end enthusiasts like me. You can run JavaScript or TypeScript code online and see the results as you type. It's easy to do some front-end experiments and share them with others
  2. CodeSandbox: CodeSandbox is an online code editor that is primarily used to create web app projects
  3. CodePen: CodePen is an online HTML, CSS, and JavaScript code editor that allows you to write code and preview it instantly, allowing you to build and share code. CodePen supports writing CSS using Less, Sass, PostCSS, and more
  4. JSFiddle: JSFiddle is an online code editor that allows users to edit and run HTML, JavaScript, and CSS code on a single page. JSFiddle is built using CodeMirror, which provides multi-cursor, syntax highlighting, syntax validation (linter), brace matching, auto-indents, auto-complete, code/text folding, search, and replace to assist developers. JSFiddle is widely used to share simple tests and demos
  5. JS Bin: JS Bin is an open-source collaborative web development debugging tool. Code snippets that are primarily used to help test JavaScript and CSS, and function similarly to jsFiddle. You can share what you type in your JS Bin in real-time, and you can view the output of your JS Bin on any device, on any platform, and it's updated in real time
  6. Stackblitz: Stackblitz is very similar to VSCode, and is easy to use to create projects like React, Vue, Vanilla, RxJS, TypeScript, Angular, and more with just one click.
  7. juejin: Nuggets on Code is a platform that provides developers with online playgrounds for code, with the characteristics of lightweight, simple, easy to use, modern standards, modularity, real-time editing, and WYSIWYG. ES Modules support is built-in, and popular front-end frameworks such as React and Vue are supported.

Online compilation

  1. Babel Transform: The compiler for the next generation of JavaScript
  2. Typescript To JavaScript: ts to js
  3. run Typescript online: Run TS code online
  4. run JavaScript online: JavaScript Online Compiler
  5. run javascript online: Write, run, and share Javascript code online
  6. online run code: Run JavaScript, C++, Python, Java online: the Scalers online JavaScript compiler is more than just a tool. It shows how we're changing the way we think about coding. For those who love JavaScript, this compiler opens up many new opportunities

CDN

  1. jsdelivr: The most widely used CDN, except for the acceleration of static libraries
  2. cdnjs: Provides a very complete JavaScript library, whether popular or unpopular
  3. bytedance: ByteDance static resource library, CDN nodes are also very numerous, it is worth recommending domestic sites, backed by ByteDance, and the quality is relatively guaranteed
  4. bootcdn: There are many domestic nodes, BootCDN is a free CDN service for front-end open source projects jointly supported and maintained by Maoyun and Bootstrap Chinese Network, and is committed to providing stable and fast free CDN acceleration services for excellent front-end open source projects like Bootstrap, jQuery, React, and Vue.js. The open source projects included in BootCDN are mainly synchronized with the cdnjs open source project repository.
  5. cdnjs.net: Free and open source front-end public library, synchronized cdnjs resources, CDN is the use of Cloudflare cache, the speed is average.
  6. 75cdn: Homophonic to Qi Dance, is an open source project free CDN service supported and maintained by 360 Front-end Dance Troupe, which supports HTTPS and HTTP/2, and includes thousands of front-end resource libraries and Google font libraries. And it's the first CDN service to support HTTP/2, with a total of 4,275 open source projects, all synchronized with cdnjs!
  7. UNPKG: UNPKG is a fast global content delivery network for all content in npm. By using it, you can quickly and easily load any file from any package using a URL like the one below!
  8. Staticfile CDN: This website is CDN accelerated by Qiniu Cloud and supported by the technical community Nuggets.

Algorithmic learning

  1. javascript-algorithms: This repository contains JavaScript-based examples of many popular algorithms and data structures.
  2. LeetCode: Brushing questions online.
  3. LeetCode VsCode plugin: Brush questions and submit solutions directly in the VsCode editor.
Share on Twitter
Catogery:DveTools