获得徽章 1
#青训营笔记创作活动#
1月26日 打卡day10
今日学习 没见过的 CSS 属性
1. position: sticky 标题在滚动的时候,会一直贴着最顶上
2. :empty 选择器 通过 :empty 选中内容为空的容器,然后通过伪元素为空容器添加提示
3. gap
4. background-clip: text 可以做一个带背景的文字效果
5. user-select 可以 禁用光标选中 ,让网页看着和移动端一样
6. :invalid 伪类 任意内容未通过验证的 input 或其他 form 元素
7. :focus-within 伪类 表示一个元素获得焦点,或该元素的后代元素获得焦点,就会匹配上
8. mix-blend-mode:difference 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
1月26日 打卡day10
今日学习 没见过的 CSS 属性
1. position: sticky 标题在滚动的时候,会一直贴着最顶上
2. :empty 选择器 通过 :empty 选中内容为空的容器,然后通过伪元素为空容器添加提示
3. gap
4. background-clip: text 可以做一个带背景的文字效果
5. user-select 可以 禁用光标选中 ,让网页看着和移动端一样
6. :invalid 伪类 任意内容未通过验证的 input 或其他 form 元素
7. :focus-within 伪类 表示一个元素获得焦点,或该元素的后代元素获得焦点,就会匹配上
8. mix-blend-mode:difference 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
展开
评论
点赞
#青训营笔记创作活动#
1月25日 打卡day9
今日学习 图片压缩 TinyPng压缩工具,压缩效果非常好,体积大幅度降低且显示效果几乎没有区别。开发一个webpack plugin是一个不错选择,在打包「生产环境」代码的时候,启用该plugin对图片进行处理。个人觉得还是拿到压缩后的图片更好,这些还是交给设计人员吧~
1月25日 打卡day9
今日学习 图片压缩 TinyPng压缩工具,压缩效果非常好,体积大幅度降低且显示效果几乎没有区别。开发一个webpack plugin是一个不错选择,在打包「生产环境」代码的时候,启用该plugin对图片进行处理。个人觉得还是拿到压缩后的图片更好,这些还是交给设计人员吧~
展开
评论
点赞
#青训营笔记创作活动#
1月24日 打卡day8
今日学习 Esbuild打包工具,在构建速度上可以快 10~100 倍。架构优势:Golang 开发、多核并行、从零造轮子、高效利用内存。目前 Esbuild 对于真实的 Web 场景还有很多能力不支持,还有一些硬伤,包括语法不支持降级到ES5,拆包不灵活、不支持 HMR,对于真正能作为 Webpack 一样的构建工具来讲还有很长的路要走。
1月24日 打卡day8
今日学习 Esbuild打包工具,在构建速度上可以快 10~100 倍。架构优势:Golang 开发、多核并行、从零造轮子、高效利用内存。目前 Esbuild 对于真实的 Web 场景还有很多能力不支持,还有一些硬伤,包括语法不支持降级到ES5,拆包不灵活、不支持 HMR,对于真正能作为 Webpack 一样的构建工具来讲还有很长的路要走。
展开
评论
点赞
#青训营笔记创作活动#
1月23日 打卡day7
今日学习 WebRTC (Web Real-Time Communications) 是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流和(或)音频流或者其他任意数据的传输。WebRTC 结合一些其他相关技术,可以实现非常多的有趣的项目,非常有意思。
1月23日 打卡day7
今日学习 WebRTC (Web Real-Time Communications) 是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流和(或)音频流或者其他任意数据的传输。WebRTC 结合一些其他相关技术,可以实现非常多的有趣的项目,非常有意思。
展开
评论
点赞
#青训营笔记创作活动#
1月20日 打卡day6
今日学习 抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作,通过抓包可以分析网络问题、业务分析、分析网络信息流通量等。作为前端开发者,通常是抓取应用层的 HTTP/HTTPS 的包。
1月20日 打卡day6
今日学习 抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作,通过抓包可以分析网络问题、业务分析、分析网络信息流通量等。作为前端开发者,通常是抓取应用层的 HTTP/HTTPS 的包。
展开
评论
点赞
#青训营笔记创作活动#
1月19日 打卡day5
学习了计算距离下次生日还有多少天、回到顶部、复制文本、防抖/节流、过滤特殊字符、常用正则判断、初始化数组、将 RGB 转换为十六进制、检测是否是一个函数、检测是否为一个安全数组、检测对象是否为一个安全对象这些常用的代码实现,收获颇丰。
1月19日 打卡day5
学习了计算距离下次生日还有多少天、回到顶部、复制文本、防抖/节流、过滤特殊字符、常用正则判断、初始化数组、将 RGB 转换为十六进制、检测是否是一个函数、检测是否为一个安全数组、检测对象是否为一个安全对象这些常用的代码实现,收获颇丰。
展开
评论
点赞
#青训营笔记创作活动#
1月18日 打卡day4
今日学习 Promise解决回调地狱问题。Promise对象有三种状态,他们分别是:pending: 等待中,或者进行中,表示还没有得到结果 ;resolved(Fulfilled): 已经完成,表示得到了我们想要的结果,可以继续往下执行 ;rejected: 也表示得到结果,但是由于结果并非我们所愿,因此拒绝执行 。这三种状态不受外界影响,而且状态只能从pending改变为resolved或者rejected,并且不可逆。在Promise对象的构造函数中,将一个函数作为第一个参数。而这个函数,就是用来处理Promise的状态变化。
1月18日 打卡day4
今日学习 Promise解决回调地狱问题。Promise对象有三种状态,他们分别是:pending: 等待中,或者进行中,表示还没有得到结果 ;resolved(Fulfilled): 已经完成,表示得到了我们想要的结果,可以继续往下执行 ;rejected: 也表示得到结果,但是由于结果并非我们所愿,因此拒绝执行 。这三种状态不受外界影响,而且状态只能从pending改变为resolved或者rejected,并且不可逆。在Promise对象的构造函数中,将一个函数作为第一个参数。而这个函数,就是用来处理Promise的状态变化。
展开
评论
点赞
#青训营笔记创作活动#
1月17日 打卡day3
今日学习 Monorepo是把多个项目放在一个仓库里面,相对立的是传统的 MultiRepo 模式,即每个项目对应一个单独的仓库来分散管理。MultiRepo普遍存在的问题,因为不同的仓库工作区的割裂,导致复用代码的成本很高,开发调试的流程繁琐,甚至在基础库频繁改动的情况下让人感到很抓狂,体验很差。
1月17日 打卡day3
今日学习 Monorepo是把多个项目放在一个仓库里面,相对立的是传统的 MultiRepo 模式,即每个项目对应一个单独的仓库来分散管理。MultiRepo普遍存在的问题,因为不同的仓库工作区的割裂,导致复用代码的成本很高,开发调试的流程繁琐,甚至在基础库频繁改动的情况下让人感到很抓狂,体验很差。
展开
评论
点赞
#青训营笔记创作活动#
1月16日 打卡day2
今日学习 推荐的16个前端必备实用工具与网站很方便,很有用,对自己的项目开发提供了很大的帮助。
1月16日 打卡day2
今日学习 推荐的16个前端必备实用工具与网站很方便,很有用,对自己的项目开发提供了很大的帮助。
评论
点赞
#青训营笔记创作活动#
1月15日 打卡day1
今日学习 拖拽效果
原理:当mousedown的时候,克隆一个绝对定位的元素,并标识下"拖拽中"的状态,接着在 mousemove 中就可以判断应该执行的具体方法,从而让元素随着鼠标移动起来。
实现步骤:基础界面--实现元素抓取--实现拖拽放大--实现放置--边界判断--优化
这篇文章使我收获颇多,学到了很多不曾涉及到的知识点。
1月15日 打卡day1
今日学习 拖拽效果
原理:当mousedown的时候,克隆一个绝对定位的元素,并标识下"拖拽中"的状态,接着在 mousemove 中就可以判断应该执行的具体方法,从而让元素随着鼠标移动起来。
实现步骤:基础界面--实现元素抓取--实现拖拽放大--实现放置--边界判断--优化
这篇文章使我收获颇多,学到了很多不曾涉及到的知识点。
展开
评论
点赞