前端开发者必备的20个在线工具和指南

简介:   这里和搜集了前端开发者必备的20个在线工具和指南。新的一周,你需要计划学习新的东西或者能够提升你的能力。在平常的搜索中,我碰到过很多实用的工具,应用程序和参考文档,我把它们整理在下面这个列表。相信你会在这个列表中发现对你很有用的资料。

  这里和搜集了前端开发者必备的20个在线工具和指南。新的一周,你需要计划学习新的东西或者能够提升你的能力。在平常的搜索中,我碰到过很多实用的工具,应用程序和参考文档,我把它们整理在下面这个列表。相信你会在这个列表中发现对你很有用的资料。

您可能感兴趣的相关文章

 

1. I want to use

Based on data and features listed on Can I use, this app gives you the ability to select a number of front-end development features and get a percentage readout of the number of users worldwide that will see the features you choose.

I want to use

2. Regulex

A client-side, regular expression visualizer with a precise error indicator, should you have a syntax error in your expression. Also offers an option to embed the output anywhere, using an iframe.

Regulex

3. Mastering the :nth-child

A one-page website to help you grasp how to use the various useful but often complex nth-child based selector combinations.

Mastering the :nth-child

4. HTML5 Video Events and API

“This page demonstrates the new HTML5 video element, its media API, and the media events. Play, pause, and seek in the entire video, change the volume, mute, change the playback rate (including going into negative values). See the effect on the video and on the underlying events and properties.”

HTML5 Video Events and API

5. Excess XSS

This is probably a topic that all developers should be familiar with, and this might be a great place to start. It’s a comprehensive tutorial on cross-site scripting, a description of potential types of attacks, along with solutions for preventing them.

Excess XSS

6. RSCSS

Meaning “Reasonable Standard for CSS Stylesheet Structure”, a work in progress to document some tips and techniques for writing Sass/CSS for very large projects.

RSCSS

7. CodeFightClub

“A project built by Andrew Hathaway with the aim to help fellow developers learn how to write their code in the nicest, most efficient and preferred way they can. To decide which code is the most preferred way, users can comment and vote against a fight for their favourite contender.” The site is divided into categories by programming languages, and there doesn’t seem to be a lot here yet, but you can help by adding to it and starting some “code fights”.

CodeFightClub

8. Sass Guidelines

From the Sass master himself, Hugo Giraudel, “an opinionated styleguide for writing sane, maintainable and scalable Sass.” The guide has already been translated into 6 other languages.

Sass Guidelines

9. Flexbugs

“A community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you’re building a website using flexbox and something isn’t working as you’d expect, you can find the solution here.” Definitely a must-bookmark for those starting to build new layouts with Flexbox.

Flexbugs

10. A Front End Engineer’s Manifesto

Nothing too in-depth, just a simple set of reminders of stuff that all front-end developers should consider incorporating into their development process and workflow.

A Front End Engineer's Manifesto

11. ECMAScript 6 equivalents in ES5

A nice reference for converting ES6 features to ES5-compatible code. Very useful considering ES5 has great support but ES6 doesn’t.

ECMAScript 6 equivalents in ES5

12. Flexbox Adventures

An in-depth, practical look at Flexbox, from Aussie-based developer Chris Wright. He’s also posted Using Flexbox Today, which tries to help you make the move to Flexbox in a logical, pragmatic manner.

Flexbox Adventures

13. Get BEM

A comprehensive site promoting and educating in the use of the popular BEM CSS methodology.

Get BEM

14. Sass Compatibility

“Reporting incompatibilities between different Sass engines.”

Sass Compatibility

15. HTMLelement.info

A neat, logical, easy to use guide to get information on different HTML elements from the spec.

HTMLelement.info

16. JSLint Error Explanations

If you’re like me, you probably follow a lot of JavaScript best practices, but maybe don’t understand all the reasons behind those techniques. This site aims to demystify the errors and warnings you find in the popular linting tools JSLint, JSHint, and ESLint.

JSLint Error Explanations

17. Animations — Web Fundamentals

There’s lots of good info in Google’s Web Fundamentals documentation, but this one stands out for front-end devs in particular because of the importance of applying some good practices when animating UI elements.

Animations  Web Fundamentals

18. Favicon Cheat Sheet

“A painfully obsessive cheat sheet to favicon sizes/types.” Compiled from a number of different popular articles that discussed the ins and outs of favicons across desktop and mobile.

Favicon Cheat Sheet

19. The CSS at…

If you want your fill of CSS styleguides from some of the big players, Chris Coyier has put together a table with info and links to the various posts that were sort of trending for a couple of months last year. I’m sure he’ll continue to update this as others go public with their CSS methodologies and practices.

The CSS at...

20. Dash

Finally, a native Mac or iOS app that is “an API Documentation Browser and Code Snippet Manager. Dash stores snippets of code and instantly searches offline documentation sets for 150+ APIs.” This one’s great for pretty much any kind of developer.

Dash

 

您可能感兴趣的相关文章

 

英文链接:20 Docs and Guides for Front-End Developers

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

相关文章
|
3月前
|
运维 前端开发 JavaScript
前端埋点校验工具:数据驱动的最后一道防线
数据埋点是企业决策的关键基础,但常面临覆盖率低、数据不准和故障难排查三大难题。本文深入剖析了这些问题的成因与影响,并提出“三维校验矩阵”解决方案:提升覆盖率至99.8%、降低错误率至0.3%、提速故障定位5倍。同时对比Split.io、Tealium、Sentry、板栗看板等工具优劣,为企业选型提供参考。迈向高质量数据治理,从精准埋点开始。
|
缓存 移动开发 Rust
前端构建工具 Mako 开源了
Hi,我是 sorrycc,Mako 的主要负责人之一,也是 Umi、Dva、Father 等库的作者。 很开心,Mako 终于开源了! Github 地址:https://github.com/umijs/mako/ 今天和大家正式介绍下他。
535 3
|
12月前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
9月前
|
机器学习/深度学习 人工智能 自然语言处理
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
DeepSeek Artifacts是Hugging Face推出的免费AI编程工具,基于DeepSeek V3,支持快速生成React和Tailwind CSS代码,适合快速原型开发和前端组件构建。
2100 39
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
|
7月前
|
JSON 人工智能 前端开发
前端开发中使用whistle代理工具
Whistle是一款强大的代理工具,相比Charles、Fiddler更轻量且功能丰富。它适用于前端开发中的多种场景,如接口数据Mock、接口代理、静态资源代理等。通过简单的规则配置,可将接口指向本地JSON文件,解决跨域问题,或代理静态资源以满足特定域名访问需求。此外,Whistle还支持本地端口间转发与移动端请求抓包,搭配SwitchyOmega插件使用效果更佳。需注意,使用前请确保已安装Node环境并参考官方文档完成基础配置。
|
10月前
|
人工智能 前端开发 小程序
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
308 31
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
|
8月前
|
人工智能 自然语言处理 前端开发
VSCode AI提效工具,通义灵码前端开发体验
通义灵码2.0是一款强大的VS Code插件,安装简便,图标易记。其亮点包括接入deepseek-v3/r1模型,支持智能问答、AI编程、代码优化及贴图提问;多语言和编辑器支持;个性化使用满足不同需求。个人版完全免费,节省12%开发时间。对比1.0版本,2.0在功能实现上更加完善,尤其在前端项目中表现出色,根据需求描述生成完整项目结构和详细代码,极大提升开发效率。
549 0
|
10月前
|
前端开发 JavaScript 开发者
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
562 4
|
11月前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
291 8
|
11月前
|
监控 前端开发 JavaScript
前端稳定性工具-Sentry
【11月更文挑战第9天】Sentry 是一个开源的错误和性能监控平台,支持多种编程语言和框架。它能够捕获前端应用中的各种错误和性能问题,提供详细的错误信息和用户行为关联,帮助开发团队快速定位和解决问题,优化应用性能。但需注意隐私保护、数据准确性和成本控制。
968 3