小姐姐都在用的25+技术站点

茶已备好,只待君来!感谢关注 前端点线面 (>‿<),本号定期推荐原创深度好文,帮助每一位在前端领域打拼的伙伴们走向前列,此外关注我获取最前沿知识点海量学习资料《前端百题斩》、大量思维导图,并进前端划水交流群

前言

收集一些有用的网站,为自己用,也分享一下,仅此而已。

前端导航[1]

前端导航网站,内容最全的前端开发地址导航。

e700fc1df1da970d42df67eb7125c493.png
image.png

ECMAScript 各个提案[2]

ES的提案一共五个阶段,从 Stage 0 到 Stage 4, 一起来看看各个阶段的提案。

  • Stage 0 Proposals[3] 潜在想法

  • Stage 1 Proposals[4]  提案

  • Stage 2 Proposals[5]  草稿

  • Stage 3 Proposals[6]  候选人

  • Stage 4 Finished Proposals[7] 完成
    除此之外,还有一个 Inactive Proposals[8], 也就是未激活的提议。

前提知道ES的各种提案,多一点了解,多一些期待,多多喜欢。

89d02bedaa049ea662a7e6c226415683.png
image.png

ECMA-262[9] ECMAScript 规范

最准确和最新的 ECMAScript 规范.
ES6的提案主要描述的是功能, 而规范,描述的是实现的过程和细节。

遇事不决,规范先学。查文献首选 MDN + ECMAScript 规范

c9f19e88a78e24d1d9375076fe939e46.png
image.png

HTML 协议标准[10]

返璞归真,王者之道。

其官方网站 https://whatwg.org/ ,我们最常用的却是  HTML 协议标准[11]

a832daccdd4750c5ee57eb72aa44c415.png
image.png

谷歌几个站点

  • developers.google.cn/web[12]谷歌web相关的技术都在这了2809d148ef5622a7031fa4771bb9b417.png

  • devtools 新特性[13]
    chrome devtools新特性我先知, 你知道没?5bfa99ef6acf3957ea889f368aefbb31.png

  • web.dev[14]
    Let's build the future of the web

CSS参考手册[15]

完美归类,爸爸妈妈再也不担心我找不到要用什么属性了,还提供 chm 格式版本电子书下载,值得您拥有。

缺点是案例不够丰富。

d00a7f78e653e44d5f5b9fe9897c7aba.png
image.png

CSS Triggers[16] CSS属性重绘重排一览表

还不清楚哪些属性的变更会引发重绘还是重排吗?没关系,给你个列表查查。5a450aaab89f49c2bb4c9f661f3dacc0.png

CSS-Tricks[17] CSS 实践

大部分都是关于怎么实现一个 css 的特效,然后有一些 css 的最佳实践,比如说响应式布局,Flexbox 属性详解,或者是实现某一个特定的组件。

f2025a462d48f25ed1a5b22032b12afa.png
image.png

TinyPng[18] 图片压缩

图片压缩效比非常不错,其有对外的API, 还延伸除了很多压缩库。

fa9e8f278db15e001f304397328ded77.png
image.png

类似的还有, 都很不错,可以自己选择选项。

  • 智图[19]

  • Squoosh[20]

caniuse[21] 兼容性检查

检查兼容性必备。查询一些 css或者 JavaScript 的特性,用列表来显示这个特性哪些浏览器支持,哪些浏览器不支持。

1c2406d3c10c0c2f8b3ad6764621ba90.png
image.png

CSS Sprites Generator[22]

在线生成 CSS Sprites,合并图片并生成样式。

2db1a20939cef5add73b9908c89e05b0.png
image.png

free-api[23]

统计了网上诸多的免费API,为您收集免费的接口服务。

7061dd4256daaab9fae0519e1d888663.png
image.png

万维网技术调查[24]

W3Techs 提供了有关 web 上各种技术使用情况的信息。

是不是很有意思,现在万维网上的网站,jQuery还是老大。4fe328ffb5dd495e939113efbfc37af0.png

现代 JavaScript 教程[25]

课程的核心内容包含 2 部分,涵盖了 JavaScript 编程语言相关知识和浏览器行为。此外还有一系列的专题文章。

121087150ab9c1493a9a25d0e1415efe.png
image.png

在线PSD[26]

PSD太大,偶尔需要用,来个在线的,666。当然功能不是特别全,还能凑合用。

6a0051b98a52e1364b300bbcf3c84edb.png
image.png

在线babel[27]

在线Babel,转换器,通过设置targets,可以生成不同版本的代码。

f7f1dd4553d60a46b597f7eaf54fa11a.png
image.png

MDN[28]  Web开发者文档

全名 Mozilla Developer Network。

查看基本资料的首选,什么 w3school, csdn, 哪怕是掘金等等,都不妥。而且最好是英文版本。
有好多关于 web 开发的文档,还有后端的 node.js 和 express 开发。文档都很权威,全面,还很新。

fd87a8448887bd131fa1469c58323ef2.png
image.png

ES6 入门教程

软大神的ES6手册,免费,一个字爽!

挂链接审核不过,亲自行百度搜索。

198c034f86c8d99524b4f564e9a3d4af.png
image.png

维基百科-中文[29]

查询一些术语,百度百科显然是苍白无力的。维基百科替你解忧,英文不好,中文来凑。

dffd840d2668ef860a729d84540cfb1b.png
image.png

stack overflow[30] 错误排查

查询问题的好去处。

a35fd3c3d3978dfdc6d25a39dd51f008.png
image.png

github Trending[31]

gitHub当前最流行的仓库。8aeadbfd0127b2d8caaf1eab5d33e70c.png

在线工具集[32]

里面有很多很有意思的小工具。当然如今的chrome插件也有很多小公举, FEHelper就非常不错,油猴脚本就无敌了。

b1bb2e7833a028e4fb6a3fd8ca0b182d.png
image.png

icon font[33] 矢量图标库

内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。

1e801076b389fb15eee92b718e2546c4.png
image.png

codepen.io[34]

在线代码编辑, 写博客,代码示例利器。包括MDN都在使用。

类似的还有

  • jsbin.com[35]

  • Stackblitz[36]

npm stat[37] 个人npm包下载量统计

统计个人发布的包的下载量,有两个维度,用户维度和包维度。

aef2faaa9daca14e6a6bb058eb1185e6.png
image.png

World to HTML[38]

把world文件转为html,666的。

d5549b72ee3593e8ac66b16773c9ddb4.png
image.png

当然还有另外一个 在线Word转HTML[39]

AST Explorer[40] 在线转换AST

7129f1b3d35f786d42406329d8470f69.png
image.png

还有一个类似的 Esprima: Parser[41]

Carbon[42] 代码生成漂亮图片

源代码生成漂亮图片。

1e8fcfe7ee56dae6da937647302ff438.png
image.png

Coderbyte[43]  编程挑战

挑战自己的编码和面试更好。

看云[44]

看云专注于文档的在线创作、协作、分享和托管服务,致力于提供最佳的在线创作和阅读体验,让企业和个人可以更方便地发布和管理自己的文档。

个人就在上线做笔记和写写小东西,很方便。

e861a3df201ff79d5227e50de3fb3db1.png
image.png

javascript.fun[45]

显示流行排行可以轻松的找到想要最新的代码插件、工具、脚手架、博客等等。

1660c98311b00a4fd41d87bcb39594b3.png
image.png

其他

  • W3.org[46]
    W3C是World Wide Web Consortium(万维网联盟),HTML、XHTML、CSS、XML的标准。

  • 前端里[47]
    质量不错

  • WEB安全色[48]
    216 Web安全色

  • egghead.io[49]
    比较潮的框架或者库或者知识。

写在最后

你的一赞一评就是我前行的最大动力。

················ 执鸢者简介 ·················

大家好,我是执鸢者,毕业于华中科技大学,新时代农民工,现在是百度前端研发工程师,著有《前端百题斩》、数十篇学习思维导图(go、React、Redux、Vue、Vuex、操作系统、Linux、设计模式、js、webpack、nginx)以及大量前端进阶文章,大量同学已通过号主的系列内容获取心仪的offer,关注我获取海量资料、交流工作心得并进卧虎藏龙交流群。

b1a345cead8b61c5283bfc36cfbbd8e4.png

识别方二维码加我微信、拉你进交流

302d8fb9e8de9965e1d05c07533c249e.png

[1] 五万字前端面试宝典——前端百题斩(上)新鲜出炉

[2] 纯CSS实现beautiful按钮

[3] 一张思维导图入门React

[4] 一文搞定Diff算法

[5] 16张图入门Nginx——(前端够用,运维入门)

[6] 好记性不如烂笔头——Vue3.0篇

[7] 好记性不如烂笔头——Vuex篇

[8] 好记性不如烂笔头——Linux篇

[9]好记性不如烂笔头——React篇

[10] 好记性不如烂笔头——Redux篇

引用

87个前端必备开发网站[50]
11个前端工程师必备的网站[51]
分享二十个web前端开发日常必备网站[52]

参考资料

[1]

前端导航: https://webjike.com/web.html

[2]

ECMAScript 各个提案: https://github.com/tc39/ecma262

[3]

Stage 0 Proposals: https://github.com/tc39/proposals/blob/master/stage-0-proposals.md

[4]

Stage 1 Proposals: https://github.com/tc39/proposals/blob/master/stage-1-proposals.md

[5]

Stage 2 Proposals: https://github.com/tc39/proposals#stage-2

[6]

Stage 3 Proposals: https://github.com/tc39/proposals#stage-3

[7]

Stage 4 Finished Proposals: https://github.com/tc39/proposals/blob/master/finished-proposals.md

[8]

Inactive Proposals: https://github.com/tc39/proposals/blob/master/inactive-proposals.md

[9]

ECMA-262: https://tc39.es/ecma262/

[10]

HTML 协议标准: https://html.spec.whatwg.org/

[11]

HTML 协议标准: https://html.spec.whatwg.org/

[12]

developers.google.cn/web: https://developers.google.cn/web

[13]

devtools 新特性: https://developer.chrome.com/tags/new-in-devtools/

[14]

web.dev: https://web.dev/

[15]

CSS参考手册: http://css.doyoe.com/

[16]

CSS Triggers: https://csstriggers.com/

[17]

https://css-tricks.com/: https://link.juejin.cn/?target=https%3A%2F%2Fcss-tricks.com%2F

[18]

TinyPng: https://tinypng.com/

[19]

智图: https://zhitu.isux.us/

[20]

Squoosh: https://squoosh.app/

[21]

caniuse: https://caniuse.com/

[22]

CSS Sprites Generator: https://www.toptal.com/developers/css/sprite-generator

[23]

free-api: https://github.com/fangzesheng/free-api

[24]

万维网技术调查: https://w3techs.com/

[25]

现代 JavaScript 教程: https://zh.javascript.info/

[26]

在线PSD: https://www.uupoop.com/#/old

[27]

在线babel: https://babeljs.io/

[28]

MDN: https://developer.mozilla.org/

[29]

维基百科-中文: https://zh.wikipedia.org/

[30]

stack overflow: https://stackoverflow.com/

[31]

github Trending: https://github.com/trending/javascript?since=daily

[32]

在线工具集: https://tool.lu/

[33]

icon font: https://www.iconfont.cn/

[34]

codepen.io: https://codepen.io/

[35]

jsbin.com: https://jsbin.com/?html,output

[36]

Stackblitz: https://stackblitz.com/

[37]

npm stat: https://npm-stat.com/

[38]

World to HTML: https://wordhtml.com/

[39]

在线Word转HTML: http://www.docpe.com/word/word-to-html.aspx

[40]

AST Explorer: https://astexplorer.net/

[41]

Esprima: Parser: https://esprima.org/demo/parse.html

[42]

Carbon: https://carbon.now.sh/

[43]

Coderbyte: https://coderbyte.com/

[44]

看云: https://www.kancloud.cn/

[45]

javascript.fun: https://www.javascript.fun/

[46]

W3.org: https://link.zhihu.com/?target=http%3A//W3.org

[47]

前端里: http://www.yyyweb.com/front

[48]

WEB安全色: https://www.bootcss.com/p/websafecolors

[49]

egghead.io: https://egghead.io/

[50]

87个前端必备开发网站: https://zhuanlan.zhihu.com/p/86777413

[51]

11个前端工程师必备的网站: https://juejin.cn/post/6844904079378890760

[52]

分享二十个web前端开发日常必备网站: https://juejin.cn/post/7018811730209800222

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值