README.md

title	date	tags
Web	2018-06-22 08:02:07 -0700	web javascript html html5 css css3

WEB

JavaScript

• sosh - web share js library

CSS

object-fit

[0, 2] 3*0  0 = index / 3
//[3, 5] 3*1  1 = index / 3
[6, 8] 3*2. 2 = index / 3
//[9, 11]
[12, 14]

6*Math.floor(index/6) <= index <= 2 + 6*Math.floor(index/6)

• AliOSS

  1. 微信小程序中图片上传阿里云 OSS

  2. 小程序图片上传阿里 OSS 使用方法

  3. JavaScript 客户端签名直传（官方）

  4. AliOSS 图片压缩

     imgurl?x-oss-process=image/resize,w_100,h_100/quality,Q_80
     

     AliOSS 图片处理文档

• IntersectionObserver

  使用此 API 实现了当 A 元素出现时隐藏 B 元素的效果

  MDN - Intersection Observer API

  IntersectionObserver Polyfill

• window.scrollTo() smooth

  锚点平滑滚动

  html {
    scroll-behavior: smooth;
  }
  
  @media (prefers-reduce-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  new Router({
    ...
    scrollBehavior: (to, from, savedPosition) => {
      if (to.hash) {
        return window.scrollTo({
          top: 0,
          behavior: "smooth",
        })
      } else {
        return {
          x: 0,
          y: 0,
        }
      }
    }
  })

  Smooth scroll behavior polyfill

• Vue 单页应用 SEO

  处理 Vue 单页面 SEO 的另一种思路