花哨呀i
在下花哨
获得徽章 10
- #青训营笔记创作活动#
2月10日 打卡day17
:hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果
:active配合transition延时、transitionend监听可以实现长按触发效果
CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果
可以直接通过:hover来控制台动画的暂停和播放展开评论1 - #青训营笔记创作活动#
1月24日 打卡day7
什么是 WebRTC
WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。
WebRTC 的应用场景
直播
游戏
视频会议/在线教育
屏幕共享/远程控制
等等等
可玩性很强，可以做很多有趣的事情。
在网速与硬件越来越好的趋势下，WebRTC 它有无限可能。
媒体流
要想了解 WebRTC，首先要了解媒体流，媒体流可以是来自本地设备的，也可以是来自远程设备的。媒体流可以是实时的，也可以是非实时的。上述的应用场景中，我们都需要使用到媒体流，我们可以通过摄像头，麦克风，屏幕共享等方式获取到媒体流，然后通过 WebRTC 技术将媒体流传输到远端实现实时通讯。展开评论1 - #青训营笔记创作活动#
1月23日 打卡day6
2. 抓包的原理
2.1 什么是抓包？
抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，通过抓包可以：
分析网络问题
业务分析
分析网络信息流通量
网络大数据金融风险控制
探测企图入侵网络的攻击
探测由内部和外部的用户滥用网络资源
探测网络入侵后的影响
监测链接互联网宽频流量
监测网络使用流量（包括内部用户，外部用户和系统）
监测互联网和用户电脑的安全状态
渗透与欺骗
...
回顾下计算机网络知识，数据在网络上是以很小的帧的单位传输的，帧通过特定的称为网络驱动程序的程序进行成型，然后通过网卡发送到网线上，通过网线到达目的机器，在目的机器的一端执行相反的过程。接收端机器的以太网捕获到这些帧，并告诉操作系统帧已到达，然后对其进行存储。在这个传输和接收的过程，就可以使用抓包工具（Sniffers）进行抓包，作为前端开发者，通常是抓取应用层的 HTTP/HTTPS 的包。展开评论1 - #青训营笔记创作活动#
1月20日 打卡day5
计算距离下次生日还有多少天
注意这里借助 moment 实现
getBirthdayFun(){
// 首先要获取到今年的生日
let birthdayTime = moment().format('YYYY-') + '12-19'
// 通过时间戳 去判断当前的时间戳是否大于今年生日的时间戳
if (moment().unix() >= moment(birthdayTime).unix()) {
// 如果大于的话，那么就在今年的生日上再添加一年，已达到获取下次生日的时间
birthdayTime = moment(birthdayTime).add(1, 'y').format('YYYY-MM-DD')
}
// 这个直接通过计算 （下次生日的时间戳 - 当前日期的时间戳) / (60 * 60 * 24) 最后求出来的就是 XX 天
return parseInt(
(moment(birthdayTime).unix() - moment().unix()) / (60 * 60 * 24)
)
}
展开评论1 - #青训营笔记创作活动#
1月19日 打卡day4
promise、async、await有什么用呢，怎么理解？
都是为了解决异步回调产生的。
Promise的字面意思是“承诺”，即承诺会执行。Promise好比容器，里面存放着一些未来才会执行完毕的事件的结果，而这些结果一旦生成是无法改变的。
async和await遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。
二、Promise的作用？底层代码是怎样的？
promise的精髓是状态的传递，方法的封装者并不需要关心异步方法的执行结果，方法的封装者通过状态传递拿到执行结果书写自己的逻辑，使得封装者与使用者的真正解耦。
这种状态传递有种发布订阅的味道，回调地狱并非书写上的地狱而诟病，promise 的链式调用也会有地狱之感，而回调地狱真正为之诟病的是没有真正解耦。async 是 promise 的语法糖。展开评论1 - #青训营笔记创作活动#
1月18日 打卡day3
随着前端工程日益复杂，某些业务或者工具库通常涉及到很多个仓库，那么时间一长，多个仓库开发弊端日益显露，由此出现了一种新的项目管理方式——Monorepo。本文主要以 Monorepo 的概念、MultiRepo的弊端、Monorepo 的收益以及Monorepo 的落地这几个角度来认识和学习一下 Monorepo
什么是 Monorepo?
Monorepo 其实不是一个新的概念，在软件工程领域，它已经有着十多年的历史了。概念上很好理解，就是把多个项目放在一个仓库里面，相对立的是传统的 MultiRepo 模式，即每个项目对应一个单独的仓库来分散管理。展开评论1 - #青训营笔记创作活动#
1月17日 打卡day2
1.git可视化工具
desktop.github.com
2.tinypng 是一个完全免费并且高压缩率的在线压缩图片网站，一般能满足日常大部分压缩图片的需求，如果你需要压缩大于5M的图片，可以考虑用 squoosh ，这个网站支持大图片压缩和图片压缩质量自定义
3.在线代码编辑codepen.io
4.json格式化工具 Json.cn
5.代码生成图片 carbon 可以生成酷炫的代码片段，并且支持导出图片
6. 表情符号www.emojiall.com这个网站有很多颜文字，并且可以直接cv，国内外很多博客用的都是这上面的表情符号
7. 矢量图标-iconfont阿里阿巴巴推出的字体图标库，可以找到大部分的图标，并且可以结合项目去自定义自己项目的字体图标库
8. css3动画，我们在日常开发中，会遇到一些css动画的需求，可是有时候为了一两个动画引入一些库感觉得不偿失，css3-animation 包含了一些常见的动画效果，并且包含片段代码，直接cv就可以了
9. 封面模板-canva 我们在写文章或者有时候要自己制作一些封面图片，canva上面有很多免费的素材和模板，用起来很方便
10. 高清图片-UnSplash国外的一个高清图片下载网站，里面有很多的4k高清图片免费下载，再也不用到处找高清图片了
展开评论1 - #青训营笔记创作活动#
1月16日 打卡day1
拖拽（Drag/Drop）是一个很普遍、很常用的操作，即抓取一个对象后，放到想要放的地方。
在H5中，拖拽是一个标准操作，任何元素都可以拖拽！！
H5中拖拽属性：
draggable： auto | true | false
注意：链接和图片默认是可拖动的，则不需要 draggable 属性。
- Drag（在拖拽目标时触发事件）
dragstart - 元素开始拖动时触发此事件
drag - 元素正在拖动时触发此事件
dragend - 元素拖动结束后触发此事件
- Drop（在目标区域释放时触发事件）
dragenter - 当被拖动的元素进入目标区域内时触发此事件
dragover - 当被拖动的元素在目标区域内拖动时触发此事件
dragleave - 当被拖动的元素离开目标区域时触发此事件
drop - 当被拖动的元素在目标区域被放下时触发此事件
我们需要知道鼠标的三个事件，分别是 mousedown，mousemove，mouseup ，当点击按下的时候，克隆一个绝对定位的元素，并标识下"拖拽中"的状态，接着在 mousemove 中就可以判断应该执行的具体方法，从而让元素随着鼠标移动起来。
在监听事件的 event 对象中，有几个参数是比较重要的：clientX，clientY 标识的鼠标当前横坐标和纵坐标，offsetX 和 offsetY 表示相对偏移量，可以在 mousedown 鼠标按下时记录初始坐标，在 mouseup 鼠标抬起时判断是否在目标区域中，如果是则用鼠标获取到的当前的偏移量 - 初始坐标得到元素实际在目标区域中的位置。
展开评论1
desktop.github.com