提高前端人效率的工具、网站和书籍

提高前端人效率的工具、网站和书籍

在线编译(编辑)、playground

JS 代码混淆

www.jsfuck.com/

http-::www.jsfuck.com:.jpg

嗯,优点是你可以用来给你的前端工程师好友搞恶作剧,缺点是只能用一次

SCSS 转 CSS 在线编译

www.sassmeister.com/

https-::www.sassmeister.com:.jpg

有时候写一些比较复杂的 SCSS 逻辑时,遇到不生效的问题,可能需要看一下编译出来的 CSS 代码是什么样的,以确认自己写的 SCSS 代码是不是有问题,在线编译可能是一种较为方便的方式

CSS 转 SCSS

www.sass.hk/css2sass/

https-::www.sass.hk:css2sass:.jpg

当你重构项目时,可能有用?除了转 SCSS 还能转 Less、Stylus 等,不过转换后的风格可能跟你直接写着不一致

TypeScript PlayGround

www.typescriptlang.org/play

https-::www.typescriptlang.org:play.jpg

Typescript 官方提供的 TypeScript 在线调试运行工具,如果你遇到了一些 TS 难题(或者一下 ts 代码的 demo),你可以到这个网站编写出你的代码,然后将链接(代码改动会经过编码后会被动态添加到当前 url 上)发给神通广大的网友们,或者你的好友们,请他们帮你解决问题

除了这个,它还能将你写的 ts 代码在线编译成 js.d.ts 等,更多的功能你去试一下就知道了

babel 在线编译

babeljs.io/repl

https-::babeljs.io:repl.jpg

你可以将各种版本的 js、ts 代码转换成其他低版本的 js 代码

github1s

github1s.com/

https-::github1s.com:.jpg

在 github 代码仓库的路径的 https://github 后面加个 1s,就能用编辑器模式看源码了,比直接在 github 中看方便多了

可视化在线工具/其他在线工具

在线正则表达式可视化

jex.im/regulex

https-::jex.im:regulex.jpg

遇到一个复杂的正则表达式,你多看几眼就可能会多掉几根头发,但是有了它,你就可以很好的分析出这个正则表达式的用途了

在线 Postman

需要注册哦

web.postman.co/

https-::web.postman.co:.jpg

一直在线用一直爽

当然,有已经安装的应用就不需要了

脚本之家在线工具

http://tools.jb51.net/table

提高前端人效率的工具、网站和书籍_第1张图片

Canvas 背景动画

jsrun.net/square/sear…

https-::jsrun.net:square:search.jpg

你把这个里面代码粘贴出来,放到你的项目中,就可以实现很炫酷的背景效果了!

缺点是,一般加了这个,笔记本电脑风扇就会呼啸起来

这个网站里面还有一些其他的工具,也可以试一试

在线配色

colorsinspo.com/

https-::colorsinspo.com:.jpg

如果你想搞一个自己的组件库,网站,不知道配色的就可以自己来配色

兼容性查询 Can I Use

caniuse.com/

https-::caniuse.com:.jpg

可以查询一个 js api 或者 css 属性的在各个浏览器的各个版本下的兼容性,里面还有 QQ 浏览器,UC 浏览器是最有趣的事

JSON 转 TS 代码

www.json2ts.com/

http-::www.json2ts.com:.jpg

十分有用,能提高你写TS代码的效率,特别是需要定义接口的返回类型时,用它就是复制粘贴了!

CSS 代码生成

www.cssmatic.com/gradient-ge…

https-::www.cssmatic.com:gradient-generator.jpg

可以生成四种类型的 CSS 代码,渐变,阴影等

框架/库/工具 文档

UI库

有赞 Vant

支持Vue3的Vant3:vant-contrib.gitee.io/vant/#/zh-CN

https-::vant-contrib.gitee.io:vant:::zh-CN.jpg

一款由有赞开发的移动端组件库,目前支持 Vue2、Vue3、React,微信和支付宝小程序

这款组件库一直以来都属于比较好看的类型,其中的业务组件和有赞的业务相关,也比较契合商城(购物)类移动端应用

蚂蚁集团 Ant Design

ant.design/

https-::ant.design:.jpg

这款PC端组件库文档中的设计原则写的比较完善,并且每个组件都描述了 何时使用,让你对“组件”有更深的认识

提供的设计资源更为完善

Bootstrap

Bootstrap4中文文档

https-::v4.bootcss.com:.jpg

这个 UI 库来自 Twitter 的成员,但是组件比较少,特点是提供了很多工具类;需要引入 JQuery,大部分交互还是需要自己处理

FlatUI 是基于 Bootstrap 开发的,样式更好看了

Layui

中文文档镜像站:www.layuiweb.com/

https-::www.layuiweb.com:.jpg

JQuery 时代很好的 UI 库,命令式 api,文档中有些示例没有预览

官网已经下线了,江湖再见,原官网(layui.com

https-::www.layuiweb.com.jpg

layui-github-issue.jpg

ElementUI

element.eleme.cn/#/zh-CN

element.eleme.cn.jpg

出自饿了么前端团队,支持 Vue2,也支持有 Angular 和 React 的版本,Element Plus 支持 Vue3

semi design

semi.design/zh-CN

出自字节跳动抖音前端与 UED 团队,最近刚开源不久,持续关注

Taro UI

taro-ui.jd.com/#/docs/intr…

出自京东凹凸实验室,基于 Taro,是一款跨端 UI 库

Vuetify

vuetifyjs.com/zh-Hans/int…

出自一家全职开源企业 Vuetify

WeUI

weui.io/

微信官方的 UI 库,天天用微信的你一定很熟悉

Ant Design Mobile

mobile.ant.design/

Ant Design 的手机版,旧版样式一般般,文档体验不是很好,新版样式比较好,文档更新的也好用起来了

图标库

Font Awesome 中文网

www.fontawesome.com.cn/

http-::www.fontawesome.com.cn:.jpg

IcoMoon

icomoon.io/

https-::icomoon.io:.jpg

iconfont

www.iconfont.cn/

https-::www.iconfont.cn:.jpg

IconPark

iconpark.oceanengine.com/official

https-::iconpark.oceanengine.com:official.jpg

JS 框架/库

Vue
React
Angular

angular.io/

svelte

svelte.dev/

Taro

taro-docs.jd.com/taro/docs

京东的跨端框架,支持 Vue2、Vue3、React

uni-app

uniapp.dcloud.io/README

出自 DCloud,基于 Vue 的跨端框架

Three.js
D3.js

d3js.org/

d3js.org.jpg

一款很强大的基于 SVG 的可视化图形库

Cocos

docs.cocos.com/creator/man…

使用 Typescript 的跨平台游戏引擎

其他

ECMA 官方文档

tc39.es/ecma262/

https-::tc39.es:ecma262:.jpg

VsCode 插件开发中文文档

liiked.github.io/VS-Code-Ext…

https-::liiked.github.io:VS-Code-Extension-Doc-ZH::.jpg

MDN Web中文技术文档

developer.mozilla.org/zh-CN/docs/…

Web API 接口参考

https-::developer.mozilla.org:zh-CN:docs:Web.jpg

在线书籍/文档

《ES6标准入门》阮一峰

es6.ruanyifeng.com/

https-::es6.ruanyifeng.com:.jpg

《浏览器工作原理与实践》

blog.poetries.top/browser-wor…

https-::blog.poetries.top:.jpg

《深入浅出 webpack》

webpack.wuhaolin.cn/

https-::webpack.wuhaolin.cn:.jpg

《代码随想录》

programmercarl.com/

https-::programmercarl.com:.jpg

《现代 JavaScript 教程》

zh.javascript.info/

https-::zh.javascript.info:.jpg

《前端进阶之道》

yuchengkai.cn/

https-::yuchengkai.cn:docs:frontend:.jpg

《React 技术揭秘》

react.iamkasong.com/

https-::react.iamkasong.com:.jpg

《Vue 技术揭秘》

ustbhuangyi.github.io/vue-analysi…

https-::ustbhuangyi.github.io:.jpg

《TypeScript 入门教程》

ts.xcatliu.com/

https-::ts.xcatliu.com:.jpg

《深入理解TypeScript》

jkchao.github.io/typescript-…

https-::jkchao.github.io:.jpg

《You-need-to-know-css》

lhammer.cn/You-need-to…

https-::lhammer.cn:You-need-to-know-css.jpg

《CSS Inspiration》

chokcoco.github.io/CSS-Inspira…

https-::chokcoco.github.io:CSS-Inspiration:.jpg

《Three.js教程》

www.webgl3d.cn/Three.js/

http-::www.webgl3d.cn:Three.js:.jpg

《WebGL教程》

www.webgl3d.cn/WebGL/

http-::www.webgl3d.cn:WebGL:.jpg

你可能感兴趣的:(提高前端人效率的工具、网站和书籍)