前端清单
regex在线友好
Object.freeze()
First Demo
<!DOCTYPE html>
<html>
<head>
<script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>
加 * 不会绑定 {{* message }}
</p>
<p>
双向绑定 {{ message }}
</p>
<p>
反转 {{ message.split('').reverse().join('') }}
</p>
<p>
自定义过滤: {{ message|reverse|uppercase }}
</p>
<input v-model="message">
</div>
<div>
<ul id="personIds">
<li v-for='person in persons'>
for 循环: {{ candidates }}-{{ person.name+','+person.age }}-{{ $index }}
</li>
</ul>
<div id="vif">
if-else:
<div v-if="Math.random() > 0.5">
<h1> ok </h1>
</div>
<div v-else>
<h1> no </h>
</div>
</div>
</div>
<script>
Vue.filter('reverse', function(value){
return value.split('').reverse().join('');
});
new Vue({
'el':'#app',
'data':{
'message':'hello world!'
}
});
new Vue({
'el':'#personIds',
'data':{
'candidates':'候选人',
'persons':[{'name':'Frank', 'age':18},{'name':'May', 'age':16}]
}
});
new Vue({
'el':'#vif'
});
</script>
</body>
</html>
前言
本文列出了很多与前端有关的常见网站、博客、工具等，整体来看比较权威。有些东西已经过时了，我就不列出来了。
学是一方面，也是最主要的方面；但还有一个作用，比如，“这个前端框架你都不知道啊”、“这个前端大牛你都没听说过啊” ，此时，这份清单就能起到作用了。如果你能把清单里列出的内容都了解下，逼格也会高很多。
技术社区
GitHub：https://github.com/
高质量的内容创作和分享平台。
请记住，作为一个码农，GitHub 代表了你的名片。
stackoverflow：https://stackoverflow.com/
遇到技术问题请先Google，很多答案都能在 stackoverflow 上找到。
技术博客
掘金：https://juejin.im/
掘金已经被前端同学攻陷了。目前来看，国内的很多优质前端文章，都在掘金上。
如果你刚开始写前端博客，可以考虑在掘金上发文章。当然，文章最好在掘金、博客园、知乎上做同步。
博客园：https://www.cnblogs.com/
一个很纯粹的技术博客平台。
知乎：https://www.zhihu.com/
很多做技术的同学也开始玩知乎了，阿里的不少前端大牛在知乎上就非常活跃。
CSDN：https://www.csdn.net/
广告太多，但奈何你这么老牌。
segmentfault：https://segmentfault.com/
比较低调的技术博客平台。
GitHub 排名统计
GitHub 中国区排名：https://githuber.cn/search?language=JavaScript
这个网站虽然比较小众，但排名还是相对比较准的。
GitHub 中国区排名：http://githubrank.com/
这个排名很久没更新了，早就不准了。
GitHub 全球排名：https://gitstar-ranking.com/
GitHub trending（官网推荐—）：https://github.com/trending
你的项目要是能上 GitHub trending，绝对火得一塌糊涂。
资讯
虎嗅网：https://www.huxiu.com/
36氪：https://36kr.com/
利器：https://liqi.io/
采访优秀的创造者，邀请他们来分享工作时所使用的工具。
湾区日报：https://wanqu.co/
每天推送 5 篇优质英文文章。
Solidot：https://www.solidot.org/
品玩：https://www.pingwest.com/
极客公园：http://www.geekpark.net/
框架
Vue.js：https://cn.vuejs.org/
React：https://reactjs.org/
Angular：https://angular.cn/
AngularJS：https://angularjs.org/
Koa：https://koa.bootcss.com/
基于 Node.js 平台的下一代 Web 开发框架。
Express：http://www.expressjs.com.cn/
基于 Node.js 平台，快速、开放、极简的 Web 开发框架。
Egg：https://eggjs.org/zh-cn/
Egg 继承于 Koa。
Koa 是一个非常优秀的框架，然而对于企业级应用来说，它还比较基础。而 Egg 选择了 Koa 作为其基础框架，在它的模型基础上，进一步对它进行了一些增强。
Electron：https://www.electronjs.cn/
Electron（原名为Atom Shell）是GitHub开发的一个开源js框架。 它允许使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的开发。
也就是说，我们可以用 js 语言开发客户端软件了。其实呢，VS Code 这个客户端软件就是用 js 语言写的。
Redux：https://www.redux.org.cn/
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。
ReactNative：https://reactnative.cn/
使用JavaScript编写原生移动应用。
mpvue：http://mpvue.com/
基于 Vue.js 的小程序开发框架。
UI框架
Bootstrap：http://www.bootcss.com/
ElementUI：http://element-cn.eleme.io/
基于 Vue.js 的组件库。
iView：https://www.iviewui.com/
一套基于 Vue.js 的高质量 UI 组件库。
Ant Design：https://ant.design
基于 React 的 UI 组件库，主要用于研发企业级中后台产品。官网推出了 Ant Design pro 作为示例，可以看看。
Ant Design Mobile：https://mobile.ant.design/
一个基于 Preact / React / React Native 的 移动端 UI 组件库。
Ant Design of Vue：https://vue.ant.design/docs/vue/introduce-cn/
Ant Design 的 Vue 实现，开发和服务于企业级后台产品。
类库
jQuery：http://jquery.com/
Zepto.js：https://zeptojs.com/
可以理解成是移动端的 jQuery。
ECharts：https://echarts.baidu.com/
使用 JavaScript 实现的开源可视化库。
CSS
Sass：https://sass-lang.com/
Sass 是成熟、稳定、强大的 CSS 扩展语言。入门文档可以看：http://sass.bootcss.com/
Less：http://lesscss.org/
给 CSS 加点料。入门文档可以看：https://less.bootcss.com/
Stylus：http://stylus-lang.com/
构建
NPM：https://www.npmjs.com/
Yarn：https://yarnpkg.com/zh-Hans/
Webpack：https://webpack.js.org/
Gulp：https://www.gulpjs.com.cn/
Babel：https://babeljs.io/
ESLint：https://cn.eslint.org/
可组装的JavaScript和JSX检查工具。
PostCSS：https://www.postcss.com.cn/
用 JavaScript 工具和插件转换 CSS 代码的工具
调试抓包
whistle：https://wproxy.org/whistle/
代理抓包工具，很好很强大。
Fiddler：https://www.telerik.com/fiddler
代理抓包工具。
Mock数据
Easy Mock：https://www.easy-mock.com
编辑器 && IDE
VS Code：https://code.visualstudio.com/
Sublime Text：https://www.sublimetext.com/
WebStorm：https://www.jetbrains.com/webstorm/
Atom：https://atom.io/
编码规范
Bootstrap编码规范：https://codeguide.bootcss.com/
es6编程风格：http://es6.ruanyifeng.com/#docs/style
Airbnb Javascript Style Guide：https://github.com/airbnb/javascript
静态站点搭建工具
Hexo：https://hexo.io/zh-cn/
VuePress：https://www.vuepress.cn/
GitBook：https://www.gitbook.com/
图标
Font Awesome：http://www.fontawesome.com.cn/
Iconfont：https://www.iconfont.cn/
icomoon：https://icomoon.io/
EasyIcon：https://www.easyicon.net/
icons8：https://icons8.cn/
IconStore：https://iconstore.co/
iconninja：http://www.iconninja.com/
原型设计工具
墨刀：https://modao.cc/
工具
CanIUse：https://caniuse.com/
浏览器兼容性查询。前端同学必须要知道。
国家企业信用信息公示系统：http://www.gsxt.gov.cn
通过这个网站，我们可以查到任何一家公司的基本信息（成立时间、法定代表人等）。如果你在这个网站上没有找到某公司的信息，放心吧，这个公司一定是个骗子。
ProcessOn：https://www.processon.com/
在线制作流程图。推荐。
幕布：https://mubu.com
极简大纲笔记、一键生成思维导图。非常好用。
JSON格式化：http://www.bejson.com/
草料二维码：https://cli.im/
短链生成：http://www.dh6.ink/
GitHub短网址：https://git.io/
图片压缩：https://www.yasuotu.com/
在线PS：https://www.photopea.com/
图片在线裁剪：https://www.asqql.com/gifc/
多数据源IP地址查询：https://haoip.cn/
Gif添加字幕：http://www.yingjingtu.com/
Photoshop的投影参数转换为 CSS代码：https://psd2css.mezw.com/
将Photoshop设计文件图层中的混合选项参数快速转换为CSS3代码，以节省前端开发人员的时间和精力。
Get Emoji：https://emoji.svend.cc/
图片转Ascii：http://picascii.com/
视频转GIF：https://github.com/vvo/gifify
OCR文字识别：https://app.xunjiepdf.com/ocr
团队
腾讯AlloyTeam：http://www.alloyteam.com/
腾讯社交用户体验ISUX：https://isux.tencent.com/
淘宝FED | 淘宝前端团队：http://taobaofed.org/
阿里巴巴国际UED：http://www.aliued.com/
京东 | 凹凸实验室：https://aotu.io/
饿了么前端:https://zhuanlan.zhihu.com/ElemeFE
百度前端研发部FEX：http://fex.baidu.com/
360 | 奇舞团：https://75team.com/
知道创宇FED：https://knownsec-fed.com/
前端大牛
阮一峰（蚂蚁金服）
GitHub：https://github.com/ruanyf
博客：http://www.ruanyifeng.com/blog/
尤雨溪
GitHub：https://github.com/yyx990803
博客：http://blog.evanyou.me/
知乎：https://www.zhihu.com/people/evanyou
玉伯
GitHub：https://github.com/lifesinger
博客：https://github.com/lifesinger/blog
知乎：https://www.zhihu.com/people/lifesinger
司徒正美（去哪儿）
GitHub：https://github.com/RubyLouvre
博客：http://www.cnblogs.com/rubylouvre/
知乎：https://www.zhihu.com/people/si-tu-zheng-mei
张鑫旭（腾讯）
GitHub：https://github.com/zhangxinxu
博客：https://www.zhangxinxu.com/
知乎：https://www.zhihu.com/people/iamzhangxinxu
迷渡
GitHub：https://github.com/justjavac
知乎：https://www.zhihu.com/people/justjavac.com
羡辙 | Ovilia
GitHub：https://github.com/Ovilia
知乎：https://www.zhihu.com/people/ovilia
云谦（陈成）
GitHub：https://github.com/sorrycc
博客：https://sorrycc.com/
云谦装了啥：https://github.com/sorrycc/awesome-tools
偏右
GitHub：https://github.com/afc163
知乎：https://www.zhihu.com/people/afc163
黄峰达/Phodal Huang（ThoughtWorks）
GitHub：https://github.com/phodal
博客：https://www.phodal.com/
知乎：https://www.zhihu.com/people/phodal
贺师俊/Hax（百姓网）
GitHub：https://github.com/hax
博客：http://johnhax.net/
知乎：https://www.zhihu.com/people/he-shi-jun
EGOIST
博客：https://egoist.sh/
GitHub：https://github.com/egoist
冴羽
GitHub：https://github.com/mqyqingfeng
博客：https://github.com/mqyqingfeng/Blog
知乎：https://www.zhihu.com/people/qing-feng-yi-yang
小爝
GitHub：https://github.com/xiaojue
知乎：https://www.zhihu.com/people/xiao-jue-83/
李靖/小胡子哥（淘宝网）
GitHub：https://github.com/barretlee
博客：https://www.barretlee.com/
知乎：https://www.zhihu.com/people/barretlee/
cangdu
GitHub：https://github.com/bailicangdu
Jackson Tian
GitHub：https://github.com/JacksonTian
博客：http://jacksontian.org/
题叶（饿了么、前 Teambition）
GitHub：https://github.com/jiyinyiyong
博客：http://tiye.me/
杨健（今日头条）
GitHub：https://github.com/hardfist
知乎：https://www.zhihu.com/people/hardfist
流形
（阿里巴巴数据技术与产品部前端团队负责人）
知乎：https://www.zhihu.com/people/arcthur/
总结
如果你有发现新的内容，欢迎在 GitHub 上提交 issues。
有意思的
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>拂髯客測試</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: black;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="ad" height="608" width="1366"></canvas>
<script>
function show(id, word){
var ad = document.getElementById(id);
var ctx = ad.getContext("2d");
ad.height = window.innerHeight;
ad.width = window.innerWidth;
var chinese = word;
chinese = chinese.split("");
var font_size = 10;
var columns = ad.width / font_size;
var drops = [];
for (var x = 0; x < columns; x++)
drops[x] = 1;
function draw() {
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
ctx.fillRect(0, 0, ad.width, ad.height);
ctx.fillStyle = "#0F0";
ctx.font = font_size + "px arial";
for (var i = 0; i < drops.length; i++) {
var text = chinese[Math.floor(Math.random() * chinese.length)];
ctx.fillText(text, i * font_size, drops[i] * font_size);
if (drops[i] * font_size > ad.height && Math.random() > 0.975)
drops[i] = 0; drops[i]++;
}
}
setInterval(draw, 50);
}
show("ad", "frank");
</script>
<div class="wrap">
<!--部署内外层图片-->
<div class="cube">
<!--前面图片 -->
<div class="out_front">
<img src="https://images.cnblogs.com/cnblogs_com/Frank99/1215494/o_%E8%83%8C%E6%99%AF5.gif" class="pic">
</div>
<!--后面图片 -->
<div class="out_back">
<img src="https://images.cnblogs.com/cnblogs_com/Frank99/1215494/t_%E8%83%8C%E6%99%AF3.jpg?a=1607928422679" class="pic">
</div>
<!--左面图片 -->
<div class="out_left">
<img src="https://images.cnblogs.com/cnblogs_com/Frank99/1215494/t_%E8%83%8C%E6%99%AF20.jpg?a=1607928422679" class="pic">
</div>
<!--右面图片 -->
<div class="out_right">
<img src="https://images.cnblogs.com/cnblogs_com/Frank99/1215494/t_%E8%83%8C%E6%99%AF7.jpg?a=1607928422679" class="pic">
</div>
<!--上面图片 -->
<div class="out_top">
<img src="https://images.cnblogs.com/cnblogs_com/Frank99/1215494/t_%E8%83%8C%E6%99%AF4.jpg?a=1607928422679" class="pic">
</div>
<!--下面图片 -->
<div class="out_bottom">
<img src="https://images.cnblogs.com/cnblogs_com/Frank99/1215494/t_%E8%83%8C%E6%99%AF21.jpg?a=1607928422679" class="pic">
</div>
<!--小正方体 -->
<span class="in_front">
<img src="https://images.cnblogs.com/cnblogs_com/Frank99/1215494/t_%E8%83%8C%E6%99%AF1.jpg?a=1607928422679" class="in_pic">
</span>
<span class="in_back">
<img src="https://images.cnblogs.com/cnblogs_com/Frank99/1215494/t_50.gif?a=1607928422679" class="in_pic">
</span>
<span class="in_left">
<img src="https://images.cnblogs.com/cnblogs_com/Frank99/1215494/t_014d4b5541f677000001714ae406e6.jpg@2o.jpg?a=1607928422679" class="in_pic">
</span>
<span class="in_right">
<img src="https://images.cnblogs.com/cnblogs_com/Frank99/1215494/t_%E8%83%8C%E6%99%AF2.jpg?a=1607928422679" class="in_pic">
</span>
<span class="in_top">
<img src="https://images.cnblogs.com/cnblogs_com/Frank99/1215494/t_%E8%83%8C%E6%99%AF4.jpg?a=1607928422679" class="in_pic">
</span>
<span class="in_bottom">
<img src="https://images.cnblogs.com/cnblogs_com/Frank99/1215494/t_%E8%83%8C%E6%99%AF8.jpg?a=1607928422679" class="in_pic">
</span>
</div>
<style>
/*最外层容器样式*/
.wrap {
100px;
height: 100px;
margin: 150px;
position: relative;
}
/*得到立方体效果*/
.cube {
50px;
height: 50px;
margin: 0 auto;
transform-style: preserve-3d;
/*设置动画播放样式:动画对象 播放速度 时间 播放次数*/
animation: rotate linear 20s infinite;
}
/*动画旋转的方式*/
/*得到动画效果*/
@-moz-keyframes rotate { /*firefox*/
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate { /*sofari chrome*/
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
@-o-keyframes rotate { /*opera*/
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
/*每张图片的样式*/
.cube div {
position: absolute;
200px;
height: 200px;
opacity: 0.8;
/*过渡效果*/
transition: all .4s;
}
/*定义所有图片样式*/
.pic {
200px;
height: 200px;
}
.cube .out_front {
transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back {
transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left {
transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_right {
transform: rotateY(90deg) translateZ(100px);
}
.cube .out_top {
transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom {
transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式*/
.cube span {
display: block;
100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
}
.cube .in_pic {
100px;
height: 100px;
}
.cube .in_front {
transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back {
transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left {
transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_right {
transform: rotateY(90deg) translateZ(50px);
}
.cube .in_top {
transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom {
transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front {
transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back {
transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left {
transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_right {
transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_top {
transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom {
transform: rotateX(-90deg) translateZ(200px);
}
</style>
</div>
</body>
</html>
<div id="page_end_html">
<script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!--<script type="text/javascript" src="https://files.cnblogs.com/files/DarrenChan/mycnblogs.js">-->
<script language="javascript" type="text/javascript">
// 生成目录索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
function GenerateContentList()
{
var mainContent = $('#cnblogs_post_body');
var h2_list = $('#cnblogs_post_body h1');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
if(mainContent.length < 1)
return;
if(h2_list.length>0)
{
var content = '<a name="_labelTop"></a>';
content += '<div id="navCategory">';
content += '<p style="font-size:28px"><b>目录</b></p>';
content += '<ul>';
for(var i=0; i<h2_list.length; i++)
{
var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
$(h2_list[i]).before(go_to_top);
var h3_list = $(h2_list[i]).nextAll("h3");
var li3_content = '';
for(var j=0; j<h3_list.length; j++)
{
var tmp = $(h3_list[j]).prevAll('h1').first();
if(!tmp.is(h2_list[i]))
break;
var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
$(h3_list[j]).before(li3_anchor);
li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
}
var li2_content = '';
if(li3_content.length > 0)
li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
else
li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
content += li2_content;
}
content += '</ul>';
content += '</div><p> </p>';
content += '<p style="font-size:28px"><b>正文</b></p>';
if($('#cnblogs_post_body').length != 0 )
{
$($('#cnblogs_post_body')[0]).prepend(content);
}
}
var qqinfo = '<a style="color:black;font-size:15px;font-family:Arial;" target="_blank" href="https://www.zhihu.com/people/chen-chi-40-92/activities">我的知乎：DarrenChan陈驰</a>';
$(mainContent[0]).prepend(qqinfo);
}
GenerateContentList();
</script>
<!--PageEndHtml Block Begin-->
<!--<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/ECJTUACM-873284962/flat-ui.min.css"/>-->
<title>Live2D</title>
<link rel="stylesheet" type="text/css" href="/static/css/waifu.css">
<script src="/static/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/waifu.css">
<div class="waifu" id="waifu">
<div class="waifu-tips" style="opacity: 1;">比起有一百个朋友，不如有个比一百人还要重要的真心朋友。</div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="waifu-tool">
<span class="fui-home"></span>
<span class="fui-chat"></span>
<span class="fui-eye"></span>
<span class="fui-user"></span>
<span class="fui-photo"></span>
<span class="fui-info-circle"></span>
<span class="fui-cross"></span>
</div>
</div>
<script src="/static/js/live2d.js"></script>
<script src="/static/js/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
<!--PageEndHtml Block End-->
</div>