图片优化

    
    lazy
延迟加载图像，直到它和视口接近到一个计算得到的距离，由浏览器定义。

可以直接在img mdn 中查看

滑动注册动态

https://dev.to/haycuoilennao19/22-sliding-form-for-website-3m8k

angular.js 想用vue,react怎么办

https://github.com/ngVue/ngVue
https://github.com/ngReact/ngReact

代码片段

* Codepen
* Codesandbox
* CSS-Tricks
* Hakim .se
* Code My UI
* CreativesFeed
* Bootsnipp
* 30 seconds of code
* 30 Seconds of CSS
* Stackoverflow
* Code to go
* Tweetsnippet
* GitHub
* W3 Schools
* EnjoyCSS
* Web Code Tool

30s

位置分组

[ [1, 2], [2, 3], [4, 5]]
转化
[[1,2,4],[2,3,5]] 并且求和
操作
fn=(a,b,c)=>a+b+c

案例

let arr = [[1, 2], [2, 3], [4, 5]];
let fn = (a, b, c) => a + b + c
let b = Array.from(
    {length: Math.max(...arr.map(v => v.length))},
    (_, i) => fn(...arr.map(v => v[i])));

解析 Array.from 的妙用
Array.from(
    {length: 2},
    (_,i)=>arr.map(v=>v[i])
);
// [ [ 1, 2, 4 ], [ 2, 3, 5 ] ]
其实解析的结果类似
for (let i = 0; i < 2; i++) {
    for (let j = 0; j < arr.length; j++) {
        console.log(i);
    }
}
// 0 0 0 1 1 1

fn(...[1,2,3])
等于 
fn(1,2,3)

前一天

setDate() 指定一个日期对象的天数。
getDate() 查询天数

let d = new Date();
d.setDate(d.getDate()-1);
console.log(d.toISOString().split('T')[0]);
// 2021-02-16

truncateString

格式化JSON

console.log(JSON.stringify({name:'xxx',age:3},null,'\t'))

tap 事件出现的bug

        touch-action: none;
// throttle 是节流事件
 clickMore: throttle(function(){
      this.stop = !this.stop;
      
    },1000)

ios fixed兼容性问题

 html,body{
         scroll-behavior: smooth;
         margin:0;
         padding:0;
         width: 100%;
         height: 100%;
         overflow: scroll;
     }

arguments

剩余参数、默认参数和解构赋值参数的存在不会改变 arguments对象的行为

function func(a = 55) {
  a = 99; // updating a does not also update arguments[0]
  console.log(arguments[0]);
}
func(10); // 10

自执行函数

// var a = 1;
(function a () {
    a = 2;
    console.log(a);
})();
// 只执行函数,如果函数名和全局变量冲突,应该打印自身函数

function add(){
    add=10
    console.log(add);
}
add()
//我们发现这种情况打印的是10

函数表达式

var funcName = function abc() {}; 
console.log(funcName); // 打印函数体function abc(){}
console.log(abc); // 报错(abc is not defined)

在这个函数表达式中，函数名称为abc，其实上，这个名称abc变成了函数内部的一个局部变量，并且指代函数对象本身，在abc函数内部打印abc的打印结果是abc函数体本身。

var funcName = function abc() {
    console.log(abc); // 打印结果是function abc() {console.log(abc)}
}; 

匿名函数表达式顾名思义就是没有名字的函数表达式，一般情况下，我们所说函数表达式就指匿名函数表达式，因为函数表达式会忽略函数的名称，会变成匿名函数表达式，不如直接写成匿名函数表达式。

Firefox

https://www.mozilla.org/en-US/firefox/developer/

Firefox 有更好的css 开发工具,其他的功能还是Chrome比较好

max-content

内容撑开宽度

 .content{
        max-width: max-content;
        margin:0 auto;
        background-color: khaki;
    }


  
1ddddsdssdsdd
  
2dddd
  
3dddd

git-tip

https://github.com/git-tips/tips

input

.wide {
 .header-menu,
 .header-profile {
  display: none;
 }
  .search-bar {
      max-width: 600px;
      margin: auto;
      transition: 0.4s;
      box-shadow: 0 0 0 1px var(--border-color);
      padding-left: 0;
 }
}    

当获取焦点的时间我们把其他dom隐藏,然后过渡过去,失去焦点再添加,我觉得这种设计挺好的

scss

.aaa{
    //.add-l  其实可以这样写,让我们省去了前缀
    &-l{
        
    }
}

选中切换的

参考

https://codepen.io/JavaScriptJunkie/pen/YzzNGeR

播放的样式