场景: PNG图片在TinyPng上在线压缩后上传到公司的图床上,结果最终图片的质量从压缩后的50K变成了114K。 分析: 各个工具对PNG图片的压缩算法不一样,二次压缩时由于原始图片信息被修改,导致存在图片质量变大的情况。 维基百科:https://en.wikipedia.org/wiki/Portable_Network_Graphics
Chrome 66 版本出现 Uncaught DOMException: Failed to execute ‘insertRule’ on ‘CSSStyleSheet’: Cannot access StyleSheet to insertRule 同样的页面在 Firefox 下是可以运行的。 经排查,最新版的 Chrome 对于 insertRule 的方式做了限制。 页面使用场景:JS 创建了一个 iframe 然后监听 iframe 的 DOMContentLoaded 事件,在回调函数里面去使用 document.styleSheets[0].insertRule。 Chrome 出于安全考虑对此作了隔离,取代方法:手动创建 style 标签插入 var css = ‘body::-webkit-scrollbar-track-piece { background-color:#f5f5f5; } ‘ + ‘body::-webkit-scrollbar { width:3px; }…
朋友圈假冒红包转发
为什么要写指令? directive 和 component 的区别是什么? 指令适合处理简单的数据和对DOM的一些操作,v-focus,v-touch这种行为的一些操作适合用指令去实现。 涉及到复杂的行为,尤其是要接受各种选项的,那么就适合在 component 中去实现 https://github.com/vuejs/vue/issues/862 全局指令 // 注册一个全局自定义指令 `v-focus` Vue.directive(‘focus’, { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }) 局部指令 组件中设置一个 directives 的选项 directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } } 全局指令插件写法 !function ()…
官方文档上 Runtime transform Externalise references to helpers and builtins, automatically polyfilling your code without polluting globals 从最终的行为来解释就是说babel引入了helper工具函数自动来执行polyfill并且不污染全局作用于,采用require的方式。 This plugin is recommended in a library/tool. 推荐在工具库中使用。 NOTE: Instance methods such as “foobar”.includes(“foo”) will not work since that would require modification of existing built-ins (Use babel-polyfill for that). 同时该插件并不会转换诸如数组的includes方法 polyfill This will…
1. Local Overrides(本地覆盖加载)2. New accessibility tools(可访问性工具)3. The Changes tab(代码对比功能)4. New SEO and performance audits(SEO和性能审计功能)5. Multiple recordings in the Performance panel(性能面板多个录制)6. Reliable code stepping with workers and asynchronous code(支持异步和worker中代码的调试) Local Overrides 开启了 Local Overrides 之后,你修改的 css 文件就会被保存在本地的一个副本中,即便刷新网页改动依旧存在。 如何开启 Local Overrides 点击 Sources —-> Overrides —-> Select folder for overrides , 此时chrome顶部会出现提问询问是否允许读取本地文件,选择是。另外在 Source…
根据维基百科上的解释,YIQ是用在彩色电视机上的颜色体系,其中Y就代表了明度,这个是原始公式,进过变形,在W3C标准中使用下面的计算方式就可以得出你的颜色是暗还是亮。结果值越大代表越亮,结果值越小,说明越暗。 ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
最新配置:vscode 19 年更新了版本后就支持了文件树缩进的功能,Mac 下使用 Command + , 唤出设置面板,设置具体的数字就可以看到缩进效果了。 Visual Studio Code 左侧的文件数对其实在是看的太不方便了,就连外国友人都开 issue 在吐槽 https://github.com/Microsoft/vscode/issues/17777 官方的缩进简直反人类,更别提项目复杂后要找一个文件很不方便,即便有快捷键可以定位到具体文件,但还是肉眼找文件的情况多。 https://gist.github.com/jakewtaylor/e92acd697409e53a73ebf8e0145d4c28 这个 Read.me 上面就介绍了如何自定义 css 来更改样式,Mac 上的文件修改路径为: Applications/Visual Studio Code 右键 show package contents 进入文件夹 Resources/app/out/vs/workbench/workbench.main.css 直接打开该文件,将上述的 css 样式黏贴进去,重启就可以看到变化了。 推荐的方式是采用 Custom CSS and JS 配置导入一个单独的css文件来覆盖
目前阅读进度 40%,书很赞,建议购入! 今天碰到的问题就是 box-sizing 乱用的情况。 带来不必要的性能消耗 影响 element-ui datepicker 组件的 样式 错误代码 *,:after,:before{box-sizing:border-box} 根据书中记录,box-sizing: border-box 发明的初衷是为了解决替换元素宽度自适应问题。 合理的使用: input, textarea, img, video, object { box-sizing: border-box; } normalize.css就没这么写。
使用RequestAnimationFrame,核心部分就是利用transformX实现位移 Js 逻辑写的比较挫,还要想想怎么改进,或者有更好的思路。 marquee的要求是两段文字的间隔能人为的控制,所以用了两个重复的p标签。 然后就是如何计算第一个p标签和第二个p标签移出了可视区域,可视区域不一定是屏幕宽度,可能是一个div设置了width和overflow实现的。 另外就是从左往右以及从右往左的区别。 从右往左 一开始p标签的位置是 position:absolute; left: 0,也就是在‘可视区域’的左边,从右往左就是移动负值。 如何判断移出‘可视区域’? 利用倍数来计算, 实际文字的宽度 / 可视区域的宽度得到3、3.5、4之类的一个倍数,用这个倍数和 目前正在变化时拿到的translateX的值 / 可视区域的宽度 假设是3倍,那么第二步计算出的值如果正好是3,说明文字的末尾已经出现在‘可视区域’,此时➕一个系数x,就可以实现两段文字的间隔(x按照实际想要的间隔自行设置)。 此时第一段文字+间隔 已经全部出现在可视区域了,接下来就要让第二段文字开始移动。第二段文字的起始位置就是‘可视区域’的宽度。 然后判断文字全部移出‘可视区域’判断 第二步骤的 倍数 – 第一步的倍数 < 一个允许范围的误差值即可。 从左往右 同样的思路,从左往右,刚开始第一个p标签也是位于 left: 0 的位置。 从左往右比较简单,translateX 移动位置 >= ‘可视区域宽度’ 即为移出可视区域,然后将第一个p标签的 translateX 设置为 -自身宽度即成为了从左边出来的元素。 两个p标签间隔多少就看,第一个p标签开始移动多少距离后让第二个p标签开始移动,这个值就可以直接设定了。 export default { data() { return {…