Code Monkey home page Code Monkey logo

daily's People

Contributors

dependabot[bot] avatar xiaweiss avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

daily's Issues

ndb 断点调试

安装 ndb
npm install -g ndb

在项目启动命令前加 上 ndb,如果提示权限问题,加上 sudo
例如 sudo ndb npm run dev

启动后,在左侧找文件打断点,或者在 代码中插入 debugger 断点

image

色值转换 hex 转 rgb

/**
 * 色值转换 hex 转 rgb
 * @see https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
 */
export const hexToRgba = (hex: string, alpha: number = 1) => {
  const color = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b)
    .substring(1)
    .match(/.{2}/g)
    ?.map(x => parseInt(x, 16)) || [255,255,255]

  return `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${alpha})`
}

// console.log(hexToRgb("#0033ff")); // "51";
// console.log(hexToRgb("#03f")); // "51";

通过 model 判断 iOS 设备型号

iOS 原生库可以取到设置的 model 编号,例如 iPhone XR,可以获得 iPhone11,8
可以通过编号来判断 iOS 设备型号,而不需要通过屏幕像素来判断

const iphoneXModel = [
  '10.3', '10.6', // iphone X
  '11.8', // iphone XR
  '11.2', // iPhone XS
  '11.6', '11.4', // iPhone XS Max
]

资料来源
https://stackoverflow.com/questions/14372906/to-detect-ios-device-type

iOS 中检测设备型号的依赖库
https://github.com/fahrulazmi/UIDeviceHardware

iOS 设备型号、清单
https://www.theiphonewiki.com/wiki/Models

修改浏览器 User Agent

搜索 Chrome 插件:User Agent Switcher, 黄色盾牌图标的,安装后使用即可

如需自定义,点击右键设置

解决 create-react-app IE 兼容性问题

开发环境 index.html 里加入

<script>
  (function(){
    var isIE = /MSIE|Edge|Trident/i.test(navigator.userAgent)
    if(isIE) {
      var srcList = [ 'es5-shim', 'es5-sham', 'es6-shim', 'es6-sham' ];
      for (var i = 0; i < srcList.length; i+=1) {
        var s = document.createElement('script');
        s.src = 'https://xiaweiss.com/foo/' + srcList[i] + '.js';
        document.head.appendChild(s);
      }
    }
  })()
</script>

入口 index.js 里加入

// These must be the first lines in src/index.js
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

原文:https://segmentfault.com/a/1190000017957529

FireShot Capture 010 - 解决 create-react-app IE 兼容性问题 - 言十八 - SegmentFault 思否 - segmentfault com

vscode 配置相对路径

https://code.visualstudio.com/docs/editor/variables-reference

例如 ${workspaceFolder}

Predefined variables examples
Supposing that you have the following requirements:

A file located at /home/your-username/your-project/folder/file.ext opened in your editor;
The directory /home/your-username/your-project opened as your root workspace.
So you will have the following values for each variable:

${workspaceFolder} - /home/your-username/your-project
${workspaceFolderBasename} - your-project
${file} - /home/your-username/your-project/folder/file.ext
${relativeFile} - folder/file.ext
${relativeFileDirname} - folder
${fileBasename} - file.ext
${fileBasenameNoExtension} - file
${fileDirname} - /home/your-username/your-project/folder
${fileExtname} - .ext
${lineNumber} - line number of the cursor
${selectedText} - text selected in your code editor
${execPath} - location of Code.exe

用正则表达式分析 URL

https://harttle.land/2016/02/23/javascript-regular-expressions.html

function parseUrl (url) {
  const fieldList = ['url', 'scheme', 'slash', 'host', 'port', 'path', 'query', 'hash']
  const regexp = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/
  const result = regexp.exec(url)
  const resultObject = Object.create(null)
  if (result) {
    fieldList.forEach((field, i) => {
      resultObject[field] = result[i]
    });
  }
  return resultObject;
}
// vue-router
encode (str) {
  const encodeReserveRE = /[!'()*]/g
  const encodeReserveReplacer = function (c) { return '%' + c.charCodeAt(0).toString(16) }
  const commaRE = /%2C/g
  return encodeURIComponent(str)
    .replace(encodeReserveRE, encodeReserveReplacer)
    .replace(commaRE, ',')
},
decode (str) {
  decodeURIComponent(str)
},
parseQuery (query) {
  const res = {}

  query = query.trim().replace(/^(\?|#|&)/, '')
  if (!query) {
    return res
  }

  query.split('&').forEach(function (param) {
    const parts = param.replace(/\+/g, ' ').split('=')
    const key = this.decode(parts.shift())
    const val = parts.length > 0
      ? this.decode(parts.join('='))
      : null

    if (res[key] === undefined) {
      res[key] = val
    } else if (Array.isArray(res[key])) {
      res[key].push(val)
    } else {
      res[key] = [res[key], val]
    }
  })

  return res
},
stringifyQuery (obj) {
  const { encode } = this
  const res = obj ? Object.keys(obj).map(function (key) {
    const val = obj[key]

    if (val === undefined) {
      return ''
    }

    if (val === null) {
      return this.encode(key)
    }

    if (Array.isArray(val)) {
      const result = []
      val.forEach(function (val2) {
        if (val2 === undefined) {
          return
        }
        if (val2 === null) {
          result.push(encode(key))
        } else {
          result.push(encode(key) + '=' + encode(val2))
        }
      })
      return result.join('&')
    }

    return encode(key) + '=' + encode(val)
  }).filter(function (x) {
    return x.length > 0
  }).join('&') : null
  return res ? ('?' + res) : ''
}

单词换行

https://www.cnblogs.com/qiao20/p/8607963.html
1.
word-break 当行尾放不下一个单词时,决定单词内部该怎么摆放。

break-all: 强行上,挤不下的话剩下的就换下一行显示呗。霸道型。

keep-all: 放不下我了,那我就另起一行展示,再放不下,我也不退缩。傲骄型。

word-wrap 当行尾放不下时,决定单词内是否允许换行

normal: 单词太长,换行显示,再超过一行就溢出显示。

break-word: 当单词太长时,先尝试换行,换行后还是太长,单词内还可以换行。

兼容 IE11

  1. 不支持 position: sticky
position: relative;
position: sticky;
  1. flex:1 时,IE 下的 flex-basis 为 0 需要再设置下
flex: 1;
flex-basis: auto;
  1. 绝对定位两个方向都需要声明

  2. flex 布局中,子元素不能有 padding,可以再加一层 wrap

  3. flex 布局中,子元素宽度需要设置,可以设为100%让它被压窄

  4. flex 布局中,如果用了 space-between,含绝对定位元素时。需要把绝对定位元素放中间
    排序为 左边元素、绝对定位元素、右边元素

  5. flex 布局中,子元素不要使用 margin: 0 auto

vscode 调试客户端配置

在 .vscode/launch.json 里加入配置,然后点击左侧工具栏小虫子,执行就好

{
    "version": "0.0.1",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://dev.qunar.com:7001/foo    // 启动的网址,填项目的首页
            "webRoot": "${workspaceFolder}/ssr"  // 项目根目录
        },
}

网页保存文件的实现

https://github.com/eligrey/FileSaver.js/wiki/Saving-a-remote-file#using-http-header

请求资源时,可以通过设置头统一返回文件,不指明具体类型。浏览器会直接下载处理
Content-Type: application/octet-stream
Content-Disposition: attachment; filename="filename.jpg"; filename*="filename.jpg"

相关库

https://github.com/jimmywarting/StreamSaver.js
https://stuk.github.io/jszip/

中文资料
https://www.zhangxinxu.com/wordpress/2019/08/js-zip-download/

vim 跳行查看日志

https://www.cnblogs.com/julygift/p/10939624.html

VIM 跳跃行号

一、显示行号

在命令模式下输入

:set nu 或者 :set number

即可显示行号

二、跳跃行号

在编辑模式下输入
ngg 或者 nG 【n为指定的行数(如25)】

25gg或者25G 跳转到第25行.

在命令模式下输入行号n

: n

如果想打开文件即跳转

vim +n filename

查看当前光标所在的行

Ctrl+g

跳到最后 G【shift+g】

移动端适配缩放字体大小

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 200 * (clientWidth / 750) + 'px';
        };
    recalc();
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
})(document, window);

前端优化动画,注意事项

  1. getAttribute 和 setArrtibute 分开
  2. 3D 加速,注意层爆炸
  3. 获取宽高,取1次,不要重复获取
  4. onScroll 时,尽量不要改 opcity

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.