坚信万物皆可切的切图仔

网站切换主题色已经是非常常见的功能了，提供浅色和暗色两种色调可以满足用户的使用习惯，帮助这些用户获得更好的访问体验。但是只能用户手动切换主题。那如果用户已经将系统切换到了深色模式，当他们打开我们网站的时候，网站自动切换到深色模式，第一感觉就不会那么扎眼，是不是会有更好的第一印象，提高留存。

为什么你觉得偶尔看浏览器的工作原理，但总是忘呢😵‍💫，因为你没有形成一个完整的知识网络，你的记忆是碎片化的。正如人的神经网络，只有当你的记忆相互依赖，相互链接，才能形成长期稳定的记忆

为什么你觉得偶尔看浏览器的工作原理，但总是忘呢😵‍💫，因为你没有形成一个完整的知识网络，你的记忆是碎片化的。正如人的神经网络，只有当你的记忆相互依赖，相互链接，才能形成长期稳定的记忆

时隔许久，终于再次上线了创意投稿大赛，又到了我最喜欢的环节。龙年伊始，我给各位设计了一款原创的小游戏，话不多说，直接进入正题，只求各位一个小赞👍灵感来源于一个成语“望子成龙”，我把它具象化，把成语的意思字面化。即看到孩子变成龙，从而我联想到如果看到孩子变成龙，即闯关成功，如果看到孩子变成了其他动物，则闯关失败。顺藤摸瓜，据此思路我想到了1，2，3木头人这款游戏，类似的规则进行二创，最终想到了我这款小游戏。具体游戏介绍可以看游戏首页简介。背景故事：有一天你被一条恶龙捉回了老巢，你发现它守着几颗蛋，盼望着它

作为一个前端开发人员，DevTools 是我们最熟悉不过的伙伴。无论是dom检查、调试bug，断点调试、性能检测等一系列操作都离不开它的帮助。 大家经常使用的 DevTools 功能大差不差，

一起猜 最近看到一个很有意思的题，直接来看，下面这段代码的打印结果是什么？ 猜猜看，你的答案是什么，打在评论区。 我的答案是 undefined，正如我的英文名 为什么呢？因为我第一眼看到题目，只想到

如果项目中有一个非常重要的下单页面，经过长期的功能迭代重构，核心逻辑可能没变，但是新增了很多新功能，也修改了部分旧功能，已经是一个非常重要的屎山页面。这时候要你接手这个页面做一些调整，你能保证捋清并且

很多同学在开发中看到一些特殊的图形就发愁，都找设计出图怕显得自己水平低，百度查找解决方案又会浪费很多时间。而且最终通过copy实现效果，往往自己并没有学会，下次遇到还得靠百度。

他说：优弧是个200来斤的胖子，他说：优弧是个漂亮的小姐姐。 而我说：优弧其实是汉子和妹子叠加的二重性存在，根据薛定谔定律，当你不知

最近掘金出来一个中秋创意活动，我准备参加一下。作品方向选择用纯css做一个中秋贺卡，其中有一些中秋的元素和一些简单的动画，而贺卡背景的实现就是本文要讲的内容。

纯CSS原创中秋贺卡，无图无JS，要素很多，观赏性也不错，欢迎大家点评提出宝贵建议～提前祝大家生活美满万年长，阖家幸福永平安！

为了向大家介绍 CSS 新特性【scroll-timeline】的强大效果，我特意破解了钉钉首页的动效，莫辜负！

在 JavaScript 中键入 CSS 值以及填充或发明新的 CSS 而不会影响性能终于成为可能。Houdini具有增强网络创造力的潜力。

在6.30日的稀土开发者大会中，有位讲师分享内容是`Quark c`跨框架、跨端组件构建工具。底层基于浏览器原生 API: `Web components`。之前我没有听过这个概念，第一次听到瞬间眼前

本文通过和vue语法逐一对比的方式，可以让熟悉vue的同学快速上手svelte~虽然现在国内`svelte`不温不火，除了它自身存在的一些问题，主要还是生态不够完善。但是它在国外是非常火的，说不定哪

不久前我利用周末搭建了个 万能导航网站，本来我以为不会有太大的访问量，主要是方便自己用。没想到用的人还不少，所以打算用nuxt3重构下，踩了不少坑，写文章记录下，希望能帮助到有静态部署ssg需求的同学

都2023了，很多同胞还不知道伪元素content里可以用css函数，本文将为你带来几个它超实用的场景，欢迎阅读点赞支持！

css3的animation想必大家都知道吧，那steps逐帧动画你知道吗？对于我来说，实际工作及练习中也很少用到这种跳跃式变化的动画，而它start和end的解释又比较“不说人话”，以前用到steps动画的时候，常常是靠调试，来回设置start和end，主打的就是瞎猫碰上死耗子。虽然之前也看过关于他们区别的文章，但都是半知半解，过两天就剩零知零解了。最近忙里偷闲，我终于打算一探究竟了，我倒要看看start和end到底有什么区别！😠😠😠顺便写几个小demo造福一方～

往期文章# 我给自己搭建的前端导航网站，你们都别用🤪# 浅谈 强制缓存/协商缓存 怎么用？# 2023 前端性能优化清单。

前段时间在工作的时候，因为遇到了一些之前没了解过的知识，所以化身百度cv工程师，上网冲浪寻找灵感（找源码copy🐶）。但是网上有好多重复或者低质量的文章，严重影响了我的cv效率。

在搭建的过程中，一定要注意因为修改了项目根目录（root）所带来的问题，利用将路径重置到相对于项目根的位置！关于如何使用这个多页面脚手架，可以看 README.md 文件。github地址。

书接上回，上一篇更文我介绍了bom对象navigator的一些属性 API传送门，那么本文就继续来介绍一下它的一些“神奇”的方法 API。人总是对自己不了解的东西心生恐惧😱对于大部分前端仔来说，其实只要知道有这么个东西即可。大部分刁钻的需求，其实最难的是我们想不到实现方式，而不会不会用那都是后话了（不会可以百度cv 🐶）

写本文的起因是最近做了一个共享屏幕在线演示ppt的需求，发现了navigator的新大陆。原来web端开启屏幕共享是如此的简单，在接触之前还以为是多么高大上的功能,需求评审时内心还有些慌张。人总是对自己不了解的东西心生恐惧😱因为在此之前，虽说我知道navigator记录了一些用户代理的信息，常用的也就是利用判断下当前浏览器所处的环境（好多前端仔都是这样吧～哈哈哈，如果你也是，评论区扣1，如果你深入了解过，评论区扣眼珠子）。而对它的其他API的了解少之又少。

2023年2月16日，晴，今天没有工作，一直在掘金摸鱼，摸的我好累。不行！我得找点有意义的事情做！此时间，我发的一条沸点竟然有小黑子给我评论，\我看到之后气不打一处来，哥哥这么努力，还有这么多人黑我家哥哥,作为工作时间一坤年的，我要尽我的绵薄之力还原哥哥的舞姿！让你们臣服！

去年主要工作就是混合开发，写app内嵌的h5。在开发期间多多少少遇到些兼容性问题，最近工作比较清闲，整理下方便以后查阅，也希望能帮助到一些同学。并且本文会持续补充内容，欢迎关注我，另外我会更新一些前端方面的其他一些知识。

SEO是Search Engine Optimization的缩写，直译过来就是“搜索引擎优化”的意识。故名意思，SEO是一种优化（提高）网站在搜索引擎内的自然排名的行为的统称。\当里个当，当里个当，闲言碎语不要讲，下面我就表一表seo的几种常见手段，啊真香～

从自己网站的一个页面指向另外一个页面。通过内链让网站内部形成网状结构，让蜘蛛的广度和深度达到最大化。：在别的网站导入自己网站的链接。通过外链提升网站权重，提高网站流量。一般来说，内链和外链都能提升网站排名，在搜索引擎优化领域，还有的说法。

大文件上传下载一直以来是前端常用且常考的热门话题。本文将分别介绍大文件上传下载的思路和前端实现代码。

你在使用flex布局的时候有遇到过这种情况吗？每行固定元素个数每行元素都是的效果（两端对齐，项目之间的间隔相等，即剩余空间等分成间隙）最后一行元素需要靠左对齐方法1: 使用js补齐元素，例如，每行展示3个元素，现在一共有5个元素，那么我们就可以在最后补一个同宽度的透明元素。方法2:设置为实现两端对齐效果，最后一行再特殊处理：思路为选中最后一个元素，设置其右边距，挤到只能容纳最后一行元素的宽度。jcode方法3:设置为flex-start,先将全部元素左对齐，然后计算出每个元素的间距，通过gap。

前端监控的目的？提升用户体验更快的发现发现异常、定位异常、解决异常了解业务数据，指导产品升级——数据驱动的思想它指的是通过一定的手段来获取用户行为以及跟踪产品在用户端的使用情况，并以监控数据为基础，为产品优化指明方向，为用户提供更加精确、完善的服务。前端监控的方向？数据监控（监控用户行为）性能监控（监控网页性能）异常监控（监控代码异常）前端监控的流程？采集数据>>上报数据>>分析数据>>报警（异常监控时）

async await函数是generator函数的语法糖，可以看作是以同步的语法执行异步语句，解决了连续调用promise导致的回调地狱问题。一般工作中，我们往往在需要连续请求接口时使用async await语法糖。但是如果第二个要调用的接口需要延迟执行呢，很多同学就不知道怎么办了，甚至只能被迫改回.then嵌套的格式。

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据。目前各浏览器都已支持，兼容性很好。

域名收敛，域名分散，为什么主页面和静态资源要置于不同的域名下？

中级前端面试题

keep-alive的原理其实很简单

都2022年了，不会还有前端攻城狮不会转tree数据吧

前言有道是，万物皆对象。我们在平常的开发过程中肯定是要使用到对象的，我们创建一个对象的时候，最常用的当然是用最简单直接的字面量创建，例如let a = {}.但是，想必大家都知道，js创建对象还有可以用new操作符或者是Object.create()方法总结：创建对象的三种方法：1. 字面量创建 ：var obj1 = {};2. new操作符创建：new Object();3. Object.create()创建：Object.create(null);那么，他们之间有什么

前言相信很多小伙伴看到 [1,7,3,10].sort() 这一道题，首先想到的结果绝对是 [1,3,7,10]。很不辛，你答错了，正确答案是[1,10,3,7]。如果你答错了，显然你还没了解过字典序。看完下文了解完字段序你就明白了~本期博客参与了【新星计划】，还请大家三连支持一下🌟🌟🌟感谢感谢💓💓💓字典序简介在数学中，字典或词典顺序（也称为词汇顺序，字典顺序，字母顺序或词典顺序）是基于字母顺序排列的单词按字母顺序排列的方法。 这种泛化主要在于定义有序完全有序集合（通常称为字母表）的元

很多手写题文章的总结都是代码密密麻麻，罗列一堆实现代码，很多人都看不懂，对于一些api或者语法都不知道，所以我给大家整理了一下很重要的手写题，以及其实现思路和用到的大家可能不了解的知识！

看看proxy和reflect的相通点和不同点，你会更加透彻！