YolkPie

浅析rem布局方案Rem和em em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN 比起到处写死的px值，em似乎更有张力，改动父元素的字体大小，子元素会等比例变化，这一变化似乎预示了无限可能 一个小测验 123456789101112131415161718<div class="p1"> <div class="s1">1</div> <div class="s2">1</div></div><div class="p2"> <div class="s5">1</div> <div class="s6">1</div></div><style> .p1 {font-size: 16px; line-height ...

碎碎念之前我在whistle使用实践（实例篇）中的 mock 数据一节中说过使用 file 或者 tpl 就能满足大部分的工作需要，但是想 mock 的数据有更大的灵活性或者数据项中间有逻辑关系，可以使用whistle.vase。因为 vase 官网已经说的很详细了，而且我在工作中一般都手动改 json 文件，也没用上过 vase，本来不打算写这篇的。但是最近部门的测试同学遇到了在页面回退时需要变更 mock 数据的情况，来找我问解决方案，这让我想起了自己之前手动改 json 文件的繁琐，因此就以此为契机，记录下 whistle.vase 来 mock 数据的方式，仅供大家参考。 这篇文章依然从实用性出发，只是介绍了对于前端人员最易上手的方式，如果想要了解更多，依然推荐去 whistle.vase 官网。 whistle.vasewhistle.vase 是 whsitle 的一个插件，内置了 default、doT、dust、ejs、handlebars、jade、mock、mustache、nunjucks、swig、vm 以及用于解析自定义脚本的 script 渲染引擎，通过该 ...

.md文件是markdown的一种标记语言，和html比较起来，更简单快捷，主要体现在：标记符的数量和书写上。 标记符的数量：html文档要用N多个标记符加上css来控制样式； 而markdown文档只用到4个基本的标记符号。标记符的书写：HTML文档需要<开始>和<结束>标识一个网页，而markdown文档只要在开始位置标记即可# 这是一个md文档。 下面看看前端是如何实现.md文件转换成.html文件。 方式一：使用i5ting_toc插件需要先安装npm（安装node.js后会自带npm），然后才能安装i5ting插件： 1npm install i5ting_toc -g 执行命令行生成html文件，在输入前要进入到对应根目录下： 1i5ting_toc -f **.md 需要注意的是：写md文档的特殊符号时记得添加空格。 方式二：使用gitbook同样先需要安装node，然后运行 1npm i gitbook gitbook-cli -g 生成md文件,这个命令会生成相应的md的文件，然后在相应的文件里写你的内容即可: 1gitbook init ...

Nginx 学习手册什么是Nginx 简单说： Nginx 是个神奇的 Web 服务器专业说：Nginx 是一个采用主从架构的 Web 服务器，可用于反向代理、负载均衡器、邮件代理和 HTTP 缓存。 Nginx 是一个高性能的 HTTP 和反向代理服务器，特点是占用内存少，并发能力强，事实上 Nginx 的并发能力确实在同类型的网页服务器中表现较好。Nginx 专为性能优化而开发，性能是其最重要的要求，十分注重效率，有报告 Nginx 能支持高达 50000 个并发连接数。 Nginx 知识网结构图 Nginx专业术语Nginx 的基本特性是代理，所以你一定要明白什么是代理和反向代理。 正向代理与反向代理正向代理局域网中的电脑用户想要直接访问网络是不可行的，只能通过代理服务器来访问，这种代理服务就被称为正向代理。 通俗讲：client1 和 client2 通过代理服务器向服务器发送请求 request1 和 request2，此时后端服务器不知道 request1 是由 client1 发送的还是 client2 发送的，但会执行（响应）操作。服务器不知道请求谁发起的 反 ...

前言当下UI设计师工作中多多少少都会涉及到动效的制作，如交互动效，icon动效，运营类的微动效等，从设计制动效到交付开发的过程中，总有一个不起眼的环节会占用我大量时间，这个环节就是将完成的动效导出gif，在自己查阅了大量资料，咨询了很多人以及自己实践了n多次后，得到了很多种解决办法，在此，提炼了一些常用到，效果较好的方法分享出来。本篇文章只分享GIF图的导出方法，不包含动效转Lottie。 方式一：视频导入PS再导出GIF图 在AE中选择合成-添加到渲染队列渲染视频，选择“QuickTime”格式（渲染速度快），得到一个.mov的视频文件； 接着我们将该视频导入到ps中，将视频转换成帧动画，再选择文件-导出为web所用格式，选择GIF格式就可以成功导出GIF图了。 方法二：png序列导出GIF图 在AE中Ctrl+M打开渲染队列，点“输出模块”打开设置，将“格式”改为[Png序列]，“通道”改为“RGB+Alpha”，设置完成后点击“渲染”，得到一套完整的png序列图； 加载序列图：打开PS，点“文件-脚本-将文件载入堆栈”，浏览并选择全部序列图点击“确定”； 然后创 ...

Web前端就是当用户在浏览器地址栏中输入一行字母看到的页面结果。然而，从输入字母到看到页面中都发生了什么，数据是怎么得到的？这些都离不开HTTP/HTTPS。 HTTP与HTTPS有什么联系？它们的端口号是多少？HTTP通常承载于TCP之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。HTTP默认的端口号为80，Https默认的端口号为443。 为什么 HTTPS更安全？在网络请求中，需要有很多服务器、路由器的转发。其中的节点都可能篡改信息，而如果使用HTTPS，密钥在终点站才有。HTTPS之所以比HTTP安全，是因为它利用 SSL/TLS协议传输。它包含证书、卸载、流量转发、负载均衡、页面适配、浏览器适配、 refer传递等技术，保障了传输过程的安全性。 关于HTTP/2你知道多少？HTTP/2引入了“服务器端推送”（server push）的概念，它允许服务器端在客户端需要数据之前主动将数据发送到客户端缓存中，从而提高性能。HTTP/2提供更多的加密支持。HTTP2使用多路技术，允许多个消息在一个连接上同时交差。它增加了头压缩 ...

传统的实现方式三角形 12345678910<div class="div"></div>.div { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid red;} 使用透明的border模拟出三角形 切角 1234567891011<div class="div"></div>.div { width: 40px; height: 40px; padding: 40px; background: linear-gradient(135deg, transparent 15px, red 0) top left; background-size: 50% 50%; background-repeat: no-re ...

前言页面加载速度优化是提升用户体验、提高用户访问率和留存率的关键，因此，加载速度优化是前端开发必须掌握的技能。通常，我们会使用监控平台提供的 js 进行各种数据的上报，并依靠这些监控平台提供的各项数据来评估我们的页面，但对于这些数据的上报节点以及哪些资源或者操作会影响这些数据，我们却常常是不求甚解的。所以经常会出现这种情况，随着需求的累积，页面加载越来越慢。这篇文章的目的很简单，就是弄清楚我们使用的监控平台的性能数据对应的时间节点是什么，在这些节点上，页面的加载状态是什么样子的。 sgm-web 的统计指标目前，我们的页面使用的是 sgm-web 平台来进行页面性能的监控，这个平台提供了白屏时间、页面加载完成时间和 HTML 加载完成时间这三个数据项作为衡量页面加载速度的依据。为了弄清楚这些数据项是按照什么方式统计的，我新建了一个 sgm 的应用，并且通过在 sgm.js 中打断点的方式，获取到了上报时的数据，如下： 12345678910111213141516cct: 0cot: 0dnt: 0dot: 492fbe: 15fpt: 16ldt: 1522rdc: 0rdt: 0 ...

什么是表达式？表达式是AE内部基于Javascript编程语言开发的编辑工具。使用表达式的最主要好处是自动化，简化和增强复杂性。交换表达式的关键帧会生成具有干净和准确结果的数据。 学习表达式之前需要了解这两点：1.所有的表达式只可以添加在AE里面的可编辑动画关建帧的属性上； 在AE里面表达式只可以输入在可编辑关键帧的属性上，比如位置，旋转，缩放等，所以我们使用表达式的目的是对一些动画属性进行控制，从而提高我们的工作效率或者制作出更棒的动画效果！ 2.并不是所有地方都需要表达式，我们要根据需求选择使用关键帧或者表达式； 在AE里面并不是任何时候使用表达式都比关键帧要方便，有的时候关键帧的效果或者效率反而比表达式更好更快。所以要根据不同的效果选择打关键帧或者表达式，或者两者的结合。我们最终的目的还是完美的呈现动效效果。 如何添加表达式？我们只需要按住键盘上的ALT键+鼠标左键点击关键帧前的小码表，就可以调出对应属性的表达式输入框。我们需要做的就是在输入框内输入表达式即可。 表达式工具： 1.表达式关闭开启工具 2.表达式图表工具 3.表达式关联器 4.表达式语言菜单 语言菜单： ...

学习AE的必要性UI是基于静态页面来设计的，页面之间通过跳转切换。但是在设计过程中，设计师很重视单页的视觉效果，却经常忽略了对页面间跳转的处理。页面增加动效可以增强产品的趣味性和氛围。 动效的重要性： 功能性：动效能够在一定层面上解决用户的需求，比如优化用户对界面的感知，引起用户注意，提供用户操作后的视觉反馈可以帮助用户为下一步操作做准备； 物理性：让UI符合空间逻辑并根据物理定律制作动画，定义屏幕和UI设计元件之间的空间相对关系。当设计时考虑到重力、惯性、速度和刚性等因素，动效就会显得相对真实； 趣味性：在页面中加入一些有趣的动画，能够让用户眼前一亮，印象深刻。 认识After Effects大多数时候，当设计师在接触一款新的设计软件时，最重要的就是先了解软件的基础面板和常用的命令模块。AE面板界面主要包括菜单栏、顶部工具栏面板、项目面板、视图窗口区(动画展示区域)、图层编辑区、时间轴、视窗信息展示面板区、预览播放面板、效果面板。接下来我们就详细了解一下AE的各个面板。 熟悉各个面板和对应的命令模块，可以提高我们的操作效率，于此同时，大家可以根据自己的爱好和习惯自由安排面板布局，面板 ...