- 博客(10)
- 收藏
- 关注
RSS订阅
原创 大白话说Web图片开发——像素到响应式
你是否遇到过这些Web图片的开发问题:这些就是本文要解决的问题,本文会涉及到一点点像素相关的概念但是绝不会深究这些概念以免搞乱~同样,本文也不会深究浏览器如何读取图片数据元以及渲染它为一个一个到像素点等这些浏览器底层问题~本文想要说明的: 图片的尺寸响应式和分辨率切换问题!好了,现在让我们开始吧!注: 请仔细观察图片的宽高变化,这对理解他们的关系很重要!我们如何把一个图片URL或者图像数据展示在浏览器中?浏览器提供给了我们img标签和对应的接口,我们通常只需要:很神奇,这样我们就可以直接在浏览器中看到我们
2024-10-11 17:23:01
983
原创 你不知道的web component系列——服务端渲染SSR方案
SEO优化, 我们希望爬虫在抓取页面的时候也可以获取到我们完整的网页信息,如果在用户禁用js的情况下, 我们的网页应该也可以正常运行网页页面性能LCP等核心网页指标优化';这样的操作只能在CSR(client side rendering)中使用, 这样会导致我们的页面会有一定时间的白屏以及可能的抖动,这些web components存在的痛点都是我们要引入新的声明式命令的原因——declarative-shadow-dom。
2024-09-04 14:31:24
1039
原创 你不知道的web component系列——改造Vite模版了解shadowDom和插槽
我们的组件在引入shadow root后似乎无法完成一些嵌套, 比如vite-app如果是一个父组件时,我们向其直接添加别的内容, 它并不能被展示,如何解决?如何在不同的场景下应用,目前我们编写的vite-app组件是只能运行在CSR条件下的,如果我们的网页有着很强的SEO要求,如何实现它的SSR尼(后续我们会介绍declarative shadow dom来实现)?状态可以说是前端最重要的东西, 我们的组件如何处理状态的变化, 有什么方法可以使用,它的优缺点是什么(后续文章会提到…)?
2024-09-02 17:24:24
749
原创 你不知道的web component系列——改造Vite模版实现一个自定义元素
一个页面中不同的公用组件之间样式的侵扰,经常在我们需要开发一个页面新功能时,却被别的样式影响导致我们需要反复的修改和覆盖.页面中其它元素绑定的事件会影响到我要开发的功能,我们需要去调查究竟是哪一点影响到了,十分影响开发进度和体验.当不使用开发框架开发时, 我们所要考虑的问题复杂度急剧升高, 开发不规范问题会导致代码新功能的添加、错误的排查等等难度陡然升高.对web component的更深入的理解,真正理解web component的三大技术核心——自定义元素。
2024-08-29 13:28:43
720
原创 浏览器DevTools系列-通过分析ChatGPT官网了解网络活动工具的使用
本文希望通过对ChatGPT官网的网络活动进行分析, 以此来了解如何使用Chrome devTools的网络栏如何使用?同时, 会结合我们经常会用到的一些调试技巧, 让我们更快速的定位问题.
2024-08-21 16:32:10
399
原创 浏览器DevTools-源代码(Source)
本节我们将会介绍4种你可能不知道的开发者工具栏中的source的使用方法, 看完本节, 你讲会大大的的提高代码调试能力, 也不用自己mock数据或者请求了, 直接在浏览器中搞定.
2024-08-20 15:16:19
630
原创 浏览器DevTools-元素调试
是的, devTools的使用处于我们已经开发了一个网站/页面 我们想要让它变的更好, 更出色, 因而被Goole Chrome内置出来的一个Web开发者工具.本文也将会从如何对页面中元素和CSS进行调试讲起, 看看除了一些基本简单的调试, 有没有一些我们没有注意到, 但是可以提升我们开发效率的“骚操作尼”?CSS相关的调试技巧可以帮助我们快速的对我们开发的元素的状态进行一个定位, 确认或者是修改元素达到我们想要的效果。右键元素后,进入控制台中, 选择右键选中的元素然后选择。直接右键需要检查的元素。
2024-08-13 16:21:07
426
原创 在使用https协议的网站里能否使用http
那么这里会涉及到一个重要概念，什么是，为什么会被blocked？那么接下来我们会围绕着这些概念，看看浏览器为了保证我们的安全到底做了什么，以及如何去避免这些报错。关于什么是mixed content，理解它关键在于这个mix，译为混合。那么好了，也就是说产生mix的条件也就是我们在一个安全的网站上使用到了不安全requestresponse又或者是通过不安全的download等等这些都被成为是mixed content。比较不安全，可以升级的：Upgradeable Content。
2024-03-19 23:19:39
1548
原创 如何解决使用vscode时, git提交warning：***LF will be replaced by CRLF the next time Git touches it
当我们使用不同系统时，默认的换行符是不同的，为了防止用不同系统提交代码时的冲突，我们会在提交时有检查，以及在git提交时会给我们警告，那么这个时候我们该怎么办？
2024-01-18 16:13:49
661
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人