公众号：程序员白特，*********在 23 年的 CSS 新特性中，有一个非常重要的功能更新 -- 相对颜色。简单而言，相对颜色的功能，让我们在 CSS 中，对颜色有了更为强大的掌控能力。其核心功能就是，让我们能够基于一个现有颜色 A，通过一定的转换规则，快速生成我们想要的颜色 B。其功能能够涵盖：精简[1]调暗[2]饱和度[3]降低饱和度[4]色度增强[5]调整不透明度[6]反转[7]补充[8]转换[9]对比度[10]调色板[11]完整的教程，你可以看这里 -- Chrome for Developers- CSS 相对颜色语法[12]当然，今天我们不会一个一个去过这些功能，更多的时候，...

公众号：程序员白特，********* 工作中发现了一个下拉框打开的数据比较慢，并且打开弹框的时候会有相当长一段时间的延迟，下拉的弹框不是使用组件库的，而是自己封装的一个组件，怀疑存在数据量过大影响的情况，所以借助性能分析工具来找出具体的原因。 如何优化不是本文的关键，本文主要和大家一起学习如何使用performance面板来进行性能瓶颈的定位，学习面板的使用，找到性能瓶颈源码并解决问题。 问题出现 点击按钮后下拉框(封装的组件)出现的时间特别长 chrome性能分析工具 Chrome 浏览器提供了强大的性能分析工具，可以帮助分析网页的性能问题。以下是一些步骤，可以更好地理解和使用 Ch...

公众号：程序员白特，*********这篇博客的草稿是17年10月15号创建的了，每次写了些东西打算发布的时候，总觉得还差了什么。现在写了四五年代码了，经手了很多项目，有简单的活动页面，也有很复杂的业务逻辑，是时候反思一下我写过的烂代码了。下面是正文。每次回头看前一两个月的代码，却总觉得烂的不行。起初我以为是我没有掌握高效率编程的姿势，比如单元测试、断点调试等技术。最近看了一些书，静下来想了想：要避免写烂代码这个问题，不在于你掌握了多少编程技术，不在于你了解多少语言特性，一切都应该从“你怎么看待写代码这项工作”开始。参考：编程的智慧-王垠state-of-the-art-shitcode，垃圾...

公众号：程序员白特，*********并发性是我们在 React 18 发布后获得的重大成就之一。由于此功能是完全选择加入的，并且 React 18 向后兼容以前的版本，因此您甚至可能没有注意到新功能。那么并发性是什么、它是如何工作的以及它如何改进您的应用程序的呢？什么是并发并发是一种执行模型，其中程序的不同部分可以无序执行，而不会影响最终结果。您可能听说过不同风格的并发性多线程或多处理。由于浏览器中的 JavaScript 只能访问一个线程（worker 在单独的线程中运行，但它们与 React 并不真正相关），因此我们不能使用多线程来并行我们的一些计算。为了确保资源的最佳使用和页面的响应能...

公众号：程序员白特，*********如何用20行JavaScript代码编写一个简单屏幕录像机呢？我是白特，让我们一起来学习下吧。文章前言假设您厌倦了屏幕录像机的付费墙和限制状态，并希望继续自己编写代码 - 事实证明，您已经可以在几行代码中拥有基本功能。分步实践首先，我们可以要求浏览器使用屏幕捕获 API为我们获取捕获的视频流，但出于安全原因，我们必须确保用户手势触发捕获，例如单击按钮： const button = document.createElement("button"); button.innerHTML = "capture"; docu...

公众号：程序员白特，*********Chrome 120 于近日发布，在这个版本中，我们获得了用于脚本支持的 CSS 媒体查询。简单地说，此媒体查询允许我们测试脚本语言是否可用，并根据支持定制页面内容和样式。我是白特，让我们一起来学习下吧。媒体查询语法媒体查询有三个值可供选择：none、initial-only和enabled。none：该值表示用户代理不会运行当前文档的脚本，因为它不支持它，或者支持脚本未激活。initial-only：该值表示脚本在初始页面加载期间可用，但在之后不可用。enabled：该值表示当前文档和文档的“生存期”支持脚本并处于活动状态。代码示例CSS 媒体查询意味着...

公众号：程序员白特，*********2024 年前端的前景如何？自从我们打破了前后端不分离的局面以来，The New Stack 与来自 React、Next.js、Angular 和 Solid 的创建者和维护者讨论了他们 2024 年的计划。以下是前端开发人员在未来一年可以期待的概述。React：2024 年预览 Meta 的 React 工程经理 Eli White 表示，React 团队预计在新的一年里会有更多的框架采用 React Server Components。“对于大多数人来说，RSC 对他们所认为的 React 的范围来说是一个重大变化，从只是一个 UI 层到对你构建应用...

一、定义 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够。 优点 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点 仅适用布局、信息、框架并不复杂的部门类型网站 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况 自适应布局是指通过JS及CSS的控制，借助rem、百分比等相对度量单位，在不同大小的设备上呈现相同的网页。 响应式布...

大家好，我是小庄。 今天来梳理一下ES6中的继承。 顺带记录一下其中比较容易遗忘的知识点。 1、extends关键字 实际上，继承的关键是extends： class myClass{ } class children extends myClass{ } 分析：上面通过extends 继承了myClass的所有属性和方法。 2、super关键字 super关键字在类中有两种完全不同的表现形式： 1、代表函数时使用 ES6 要求，子类的构造函数必须执行一次super函数。代表父类的构造函数。作为函数时，super()只能用在子类的构造函数之中，用在其他地方就会报错。 class A {} cl...

公众号：程序员白特，********* 大家好，我是白特。 学习优秀的前端项目有助于我们成长，同时积累编码经验。 今天就来分享下 Github 上面 8 个很棒的 Vue 项目！ 一、项目汇总 Marktext： 笔记应用 YesPlayMusic： 第三方网易云播放器 PicGo： 图片上传应用 PPTist： 在线PPT应用 vue2-elm： 仿饿了么 vue-element-admin： 后台管理系统 Cider： Apple Music 播放器 newbee-mall-vue3-app： 商城及后台管理系统 二、具体项目 1. Marktext Marktext 是一个简单而优...

Hi，大家好，我是小庄。 今天打卡的算法题是 —— 力扣 3. 无重复字符的最长子串 该题是校招+社招中，考查频率排名第二的算法题，考察频率排名第一的是反转链表，详细解法请看公众号中的上一篇文章。 该题将采用「哈希表 + 滑动窗口」实现，话不多说，一起来学习吧～ 一、具体题目 1、题目地址 点击查看题目 2、具体题目 二、实现代码 1、思路：哈希表 + 滑动窗口 （1）具体代码 /** * @param {string} s * @return {number} */ // 哈希表 + 滑动窗口 // 时间复杂度: O(n),n为字符串s的长度 // 空间复杂度: O(n), n为...

#给校招生的一句忠告# 及时同步校招信息，提前准备，抓住每一轮校招的机会，不要畏惧，多复习，多准备，多尝试面试（建议拿不想去的公司练手，或者去牛客的面试间锻炼），积累经验，在面试中成长，祝师弟师妹都可以早日上岸，拿到心仪的offer~@河老师 @国家一级废话选手

注：本文中的城市和公司排名不分先后，部分数据来源于某乎、某脉、牛客网。 （如有遗漏，欢迎留言补充） 深圳 腾讯、字节跳动、阿里巴巴、百度、快手、Shopee、京东、富途证券、顺丰、华为、中兴、OPPO、vivo、大疆、一加、柔宇、XMind、珍爱网、广发证券、魅族科技、随手记、本地宝、菜鸟网络、丰巢科技、乐信、土巴兔、互联在线、shein深信服、有赞、迅雷、金蝶、中国平安、招银网络、微众银行、商汤科技、小鹅通、货拉拉、编程猫、知识星球 广州 腾讯、阿里巴巴、字节跳动、网易、携程、唯品会、欢聚时代、荔枝FM、UC、爱范儿、4399、Bigo、Shein、多益网络、汇量科技、中兴、映客直播、For...

Hi，大家好，我是小庄。 目前2023届秋招提前批已经陆续开始了，考虑到一些校招的同学可能是第一次接触面试（该文章适用于校招、社招），所以这篇文章就是为了记录一些面试技巧，希望可以为同学们的面试助力，早日拿到心仪的offer~ 话不多说，一起来学习吧～ 整个面试可以分为面试前、面试中、和面试后三个阶段，每个阶段都有每个阶段的套路。 【面试前】 一、简历 好的简历是获取更多面试机会的前提。简历通常有这⼏部分构成：基本资料、教育背景、专业技能、⼯作经历、项⽬经历。 1、简历中的重要部分 你目前掌握的技能，每个技能点是了解、熟悉、熟练使用、还是精通。 注意：不要自己仅仅是熟悉某项技能，就过分...