前端

夏天又到啦，又到了吃西瓜的季节！怎么能少了《合成大西瓜》这款又好玩又解压的小游戏呢？,2021年，这款游戏风靡一时。,2022年，我HullQin（点开可关注我）自己写了一款《合成大西瓜》，但是加了一...

(HTML之元素、属性、标题、段落【笔记小结】),,,,,,,、 ,(HTML之元素、属性、标题、段落【笔记小结】) 1 元素 1.1 语法 示例： 开始标签 元素内容 结束标签 <p> ...

面试官：“你说说 JavaScript 中实现继承有哪几种方法？”,紧张的萌新：“额，class 中用 extends 实现继承，然后...没了...”,面试官：“...”,······,大家好，我是...

,看到封面这张图，是不是如同艺术品一般，第一次看到这张图时，是比较震惊的，迫不及待的研究其源码是如何实现的，最后更为惊奇的是只需要纯 CSS 即可实现，接下来就展开说明实现过程。,实现此效果需要了解 ...

本文将继续更新那些炫酷交互效果系列文章，今天带来的是有关 toggle 开关相关的组件。以下是本次文章涉及到的开关组件总览图，总计收集12款不同交互效果，相信总有一款适合你。 ,那些你不知道的炫酷交互...

大家好，我是CoderBin。前段时间学了 react-router5 后才知道出了6，经典白学...,所以，本文将总结 react-router6 的常用操作，以理论+代码+注释的形式教同学们入门 ...

1、面向对象 面向对象编程（OOP） 程序是干嘛的？ 程序就是对现实世界的抽象（照片就是对人的抽象） 对象是干嘛的？ 一个事物抽象到程序中后就变成了对象 在程序的世界中，一切皆对象 面向对象的编程 面...

大家好，我是 CoderBin,本文将给大家介绍 JavaScript 函数中关于尾调用优化的优点与写法，助你提升编码能力,如果文中有不对、疑惑的地方，欢迎在评论区留言指正,首先，尾调用的概念非常简单...

,如上图所示，文字随着界面的交互变化会修改文字的颜色形成反差色，让平平无奇的文字产生了眼前一亮的效果。如果你关注设计和动画效果，这样的效果肯定见过不少，在一些比较注重设计的网站都有类似的交互效果出现...

大家好，我是 CoderBin，防抖和节流函数目前已经是前端实际开发中两个非常重要的函数，也是面试经常被问到的面试题。但是很多前端开发者面对这两个函数还是有点摸不着头脑：无法区分防抖节流、可以区分却不...

作者：王威（地谦） 文章结构 项目背景 演进分析 monorepo架构演进 Webpack与Rollup 如何平滑迁移 构建优化 组件的可扩展与可插拔 演进总结 版本动态 项目背景 SREWorks是...

朋友生日了，直接画，炫技并且表示本人闲的全身疼才会去拿CSS画画，以此嘲弄对方的加班： ,既然贺卡做出来了，那就顺便介绍一下贺卡制作流程吧，其实也不是什么技术，也就是CSS 拼拼拼就可以了，简简单单...

(目录),,大家好，我是翼同学。,前几天刚学完CSS选择器，有位大佬分享了一个有关 CSS选择器用法的小游戏，共32关，如果你全都通关了，那么你的选择器算是初步入门了。,下面是游戏链接：,欢度国庆，在...

大家好，我是 CoderBin，本文总结了React中的一些常用技巧，相信看完本文的小伙伴都能从中有所收获。,创作不易，你们的点赞收藏留言就是我最大的动力,如果文中有不对、疑惑的地方，欢迎各位小伙伴们...

前言 上篇文章​​5K字 由浅入深聊聊Promise实现原理​​，中讲述了Promise内部的实现原理。今天来聊聊​​async​​与​​await​​，那么async与await到底是什么呢。都说是...

大家好，我是 CoderBin，在JavaScript中， this是一个非常重要的概念，属于进阶知识，不管是在面试还是日常开发中都是非常常用的。所以本次给大家总结了关于 this的绑定规则，来帮助大...

四年一度的世界杯正在火热进行中，有没有熬夜看你喜欢的队伍比赛呢。在这欢庆的氛围中，我决定用代码参与一把世界杯，擦边参与，那就是用CSS画一个足球场，正常的用CSS布局肯定是非常easy的，所以决定只用...

针对上文第一个场景，我们更常见的做法是，搜索「URL解析」，然后找到网上免费的工具，输入URL，能把参数都告诉我，还能帮我decode参数，非常方便。,但是这是存在问题的：,当然，这种小工具，肯定也有...

今天分享一个炫酷的文本过渡动画效果，如下面GIF所示，曾经是否有见过这种动画呢，想想是不是感觉挺复杂呢，通常这个过渡效果通过较为复杂的可用WebGl实现，本文通过另一种方式实现，文章尾部有神奇的代码...

今日分享一篇积累和收集了很久的JS utils工具函数，文章代码量较多，建议收藏起来慢慢看，当哪一天需要用到的时候，打开你尘封已久的收藏夹，相信能让你的业务代码开发事半功倍。 汇集了时间相关，DOM相...

今日是农历六月初一。不知不觉地又是一年夏天来临了，面对烈日炎炎，夏天要吃的水果那是必不可少，今天就用CSS来给大家带来一个水果拼盘，提前给大家解解暑~,,以上15种水果你能看出都是什么水果吗？相对不够...

大家好，我是 CoderBin，本次总结了JavaScript中DOM的一些常用操作，希望对大家有所帮助，谢谢！如果文中有不对、疑惑的地方，欢迎在评论区留言指正,文档对象模型 (DOM) 是 HTM...

给元素设置伪元素的时候，必须设置其 content属性，浏览器才会将这些元素插入到选择的元素中。该值可以设置为空字符串： content: ""。,::before 表示在原始元素的实际内容之前表示一...

传送门：Vue中 子组件向父组件传值 及 .sync 修饰符 详解传送门：Vue中 状态管理器（vuex）详解及应用场景传送门：Vue中 事件总线（eventBus）详解及使用传送门：Vue中 pro...

@[toc] 1 Axios简介 1.1 什么是Axios? Axios 是一个基于 ​​promise​​​ 网络请求库，作用于​​node.js​​ 和浏览器中。 它是 ​​isomorphic​...

大家好，我是 CoderBin，本次对前端跨页面通信方案进行总结分析，希望对大家有所帮助。 感谢大家的留言点赞收藏 ,在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的...

文章目录 组件间通信的概念 组件间通信解决了什么？ 组件间通信的分类 组件间通信的方案 props传递数据 $emit 触发自定义事件 ref EventBus $parent 或 $root $at...

面试官：“说说你对Set、Map的理解”,紧张的萌新：“Set类似集合，Map是映射？...”,面试官：“...”,······,大家好，我是 CoderBin，又来到了面试官系列，本次总结了Java...

之前我们提到了斗地主的最优秀的交互方案：《斗地主的手牌，如何布局？看25万粉游戏区UP主怎么说》。,具体交互如下：,PC端：,移动端：,今天，我们聊一下，如何用JS开发实现这种对用户体验友好的交互...

基于上次发布的 那些你不知道的炫酷按钮交互效果 反馈比较好，后续将继续收集那些炫酷的交互效果，希望可以给你的项目添砖加瓦，更上一层楼。,那些你不知道的炫酷交互效果系列：,本文带来的炫酷的导航交互效果...

今天才想起来端午这回事，没办法就急急忙忙的赶工一下，接下来我就画一下这个海报试试手了：,,先给整个网页制作一个布局吧，直接 flex 搞定，并且使其居中 justify-content、align-i...

https://sanic.dev/zh/ https://github.com/sanic-org/sanic,,,在我们开始之前，请确保您使用的是 Python3.7 或更高版本。目前已知可以使用...

box-shadow box-shadow表示盒阴影，可以给元素设置阴影效果，如果我们设置向下的阴影效果: .wrapper { position: fixed; left: 0; top: 0, b...

大家好，我是 CoderBin,面试官：“你说说var、let、const三者的区别”,紧张的萌新：“var没有块级作用域，let有......”,面试官：“...”,······,本次又来到了面试官...

我常常需要处理二进制数据，每次面对一堆二进制数据，需要自己逐个字节转换为二进制、十六进制，去阅读和理解，去排查问题。,举个例子：有一个场景是我的《我做了个《联机桌游合集: UNO+斗地主+五子棋》无需...

今日介绍前端异常监控利器Sentry平台中用户行为记录的源码实现过程，为什么使用Sentry，可以看以前的文章【 前端异常监控平台对比】。,在日常排查问题过程中，用户的行为操作记录能给到我们很大的参考...

大家好，我是 CoderBin，本次总结了JavaScript中关于数组的一些常用操作，想学习其他方法或者深入学习这些方法的可点击前往 MDN-Array。,希望对大家有所帮助，谢谢！如果文中有不对...

大家好，我是 CoderBin，最近在做一个Vue项目，其中涉及到了头像图片上传。由于之前没做过图片上传功能，所以在实现这个功能时着实遇到了不少坑。本次打算将实现过程以博文的形式分享给大家。,实现过程...

大家好，我是CoderBin,本文将给大家带来redux和react-redux的快速使用，以理论+代码+案例的形式教大家如何在react中去使用状态管理，以实现数据的高效通信,如果本文有不对、疑惑的...

我们最近使用 CSS mask属性创建花哨的边框，本文将使用 CSS mask和 clip-path来切元素的四个角！使用多种技巧可以从任何元素的角切割不同的形状。在本文中，我们将考虑创建独特角落形状...

上篇文章《用177行代码写个体验超好的五子棋》，我们一起用177行代码实现了一个本地对战的五子棋游戏。,现在，如果我们要做一个联机五子棋，怎么办呢？,首先，我们需要一个后端服务。2个不同的玩家，一起连...

官网地址： https://nodejs.org/,Node.js 是一个开源和跨平台的 JavaScript 运行时环境。它是几乎任何类型的项目的流行工具！ Node.js 在浏览器之外运行 Goo...

大家好，我是CoderBin，本次将深入解析JavaScript中ES6的Generator生成器，希望对大家有所帮助，谢谢。 如果文中有不对、疑惑的地方，欢迎在评论区留言指正,Generator 函...

在这互联网高速发展的时代，人们对于网页打开的速度要求越来越高。加载时间过长，兼容处理不够全面等很容易造成用户流失。作为一名前端开发，优化用户体验是一件永无止境的事情，没有最优，只有更优。前端性能优化方...

https://cn.ubuntu.com/download/desktop Ubuntu是一个以桌面应用为主的Linux操作系统，其名称来自非洲南部祖鲁语或豪萨语的“ubuntu"一词。 ,http...

微信小程序中很早就支持了蓝牙能力，看过不少的文档，知道大概的流程和能实现的效果，但是由于一直没有像样的实战项目导致也没有正经的开发上线过，本次缘于接到了一个外包项目，那就顺道记录一下开发的过程及遇到的...

大家好，我是 CoderBin,在介绍BFC之前，需要先给大家介绍一下文档流。,我们常说的文档流其实分为 定位流、 浮动流、 普通流三种。,如果元素的属性 position 为 absolute ...

通过CSS制作的时钟大家肯定看到的多了，但是像下面这样的时钟是不是很少见，整个时钟是有很多个小的时钟组合而成，每秒通过多个时钟的动画来切换时间，不得不说这个设计是非常的炫酷且有特色。 ,看到这个动画效...

大家好，我是 CoderBin,面试官：“说说你对Node中的Stream的理解”,紧张的萌新：“好像是一种流？...”,面试官：“...”,······,又来到了面试官系列，本次讲解的是node中关...

(目录),上面的代码，就是最典型的例子。 其中 style 标签的内容，就是一个 CSS的代码。,,,,,CSS 是不区分大小写，但是我们开发时统一使用小写。,,这个类选择器，可以说是我们最常使用的一...

前言 在计算机程序的开发过程中，随着程序代码越写越多，在一个文件里代码就会越来越长，越来越不容易维护。 为了编写可维护的代码，我们把很多函数分组，分别放到不同的文件里，这样，每个文件包含的代码就相对较...

1. 回调函数 回调（callback）是一个函数被作为一个参数传递到另一个函数里，在那个函数执行完后再执行。 假定有两个函数f1和f2，f2等待f1的执行结果，f1()–>f2()；如果f1很...

大家好，我是 CoderBin，本次整理了我学习react过程中的各部分的知识点，看完文本你将会学到,如果文中有不对、疑惑的地方，欢迎在评论区留言指正,想深入学习的可以点击前往 --> Reac...

基于CSS自定义网格已发布第一部分和第二部分，本文将开始第三部分探讨更多的奇特自定义形状，与之前的文章一样，核心还是基于CSS grid，clip 和 mask来自定义网格形状布局。,三部分文章不一定...

提及噪点效果，首先想到的就是以前的旧电视机信号不稳定时或者画面不稳定时的效果。如果你没有看过那种旧电视，可以看下面的gif动图，真实的情况噪点的变化速度会快很多，这里为了gif的大小，截取的时间较短供...

目前我们的函数只能过滤出数组中age属性小于18的对象， 我们希望过滤更加灵活： 比如：过滤数组中age大于18的对象 age大于60的对象 age大于n的对象 过滤数组中name为xxx的对象 过滤...

12、节点的复制 使用 cloneNode() 方法对节点进行复制时，它会复制节点的所有特点包括各种属性 这个方法默认只会复制当前节点，而不会复制节点的子节点 可以传递一个true作为参数，这样该方法...

裁剪图片，一个超级常用的功能！,我个人非常喜欢Windows的「画图」工具。这款工具我小学二年级时非常喜欢玩。长大后，也对它爱不释手。因为「画图」占用内存非常小，可以放大8倍，方便像素级别调整细节，裁...

不知不觉已经迈入2023年，今年是兔年，想到兔子就会联想到玉兔，中秋，胡萝卜，兔子不吃窝边草，这就越扯越远了，今天的主题是用纯CSS来实现各种不错的文字效果，文字则摘录古诗词中有关《兔》相关的诗词，让...

此篇为图文结合搞懂MySQL日志的最后一篇，MySQL中共有八大日志，其中数据定义语句日志不是给用户查看的，在此篇尾部简单介绍，接下来图文结合系列还会继续推出新文章！ 二进制日志(Binary log...

什么是核心 Web 指标，它包含哪些指标？ 什么是 FID，它是做什么的？ 什么是 INP，它又是做什么的，它为什么会替代 FID？ 如何优化 INP 指标？ INP 有什么局限？ 在进入正文前，先来...

这听起来是不是很耳熟：你想写一个小型脚本，不管是为页面、命令行工具，还是其他什么类型。你从JavaScript开始，直到你想起写代码时没有类型是多么痛苦。所以你把文件从.js重命名为.ts。然后意识到...

背景 渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能...

在计算机科学领域，数据压缩是一种将数据编码为更小的形式以便于存储和传输的技术。在许多应用程序中，如网络通信、大规模数据存储等场景下，数据压缩都具有重要的应用价值。Python 提供了多种数据压缩和解压...

项目介绍 日志脱敏是常见的安全需求。普通的基于工具类方法的方式，对代码的入侵性太强，编写起来又特别麻烦。 sensitive[1] 提供了基于注解的方式，并且内置了常见的脱敏方式，便于开发。 日志脱敏...

前言 我们平时在写代码的过程中，好像很少需要自己手动进行垃圾回收，那么V8是如何来减少内存占用，从而避免内存溢出而导致程序崩溃的情况的。为了更高效地回收垃圾，V8引入了两个垃圾回收器，它们分别针对不同...

大家好，我卡颂。 虽然主流前端框架都遵循： 状态驱动视图 单向数据流 理论上并不存在某一框架可以实现，其他框架无法实现的特性。 但是，确实存在某些框架（比如Vue、Qwik）可以，但React无法解决...

一、前言 JVM的关闭方式可以分为三种： 1.正常关闭：当最后一个非守护线程结束、或者调用了System.exit、或者通过其他特定平台的方法关闭（发送SIGINT，SIGTERM信号等） 2.强制关...

这个问题本身并不困难，但对于新手来说确实容易产生困惑，今天就来回答一下。 首先来看看它的底层结构： type stringStruct struct { str unsafe.Pointer len ...

2013 年 5 月 29 日，React 正式开源，至今已过去了十年！自发布以来，React 已经成为前端开发领域中最受欢迎的技术之一，其生态系统越来越丰富，Github 累计获得了 208k St...

简介 在多线程编程中，使用线程安全的集合是非常重要的，它可以保证多个线程同时访问同一个集合时，不会出现数据不一致的情况。 Java 中提供了多种线程安全的集合实现，本文将详细介绍这些集合的特点、原理和...

1 介绍 在当今数据驱动的世界中，通过编程方式处理Excel文件至关重要。Java提供了强大的库，能够轻松读取、写入和验证XLSX文件。在本文中，我们将使用Java代码示例探讨这种简化的方法来执行这些...

sync.WaitGroup sync.WaitGroup作用是等待一组goroutine执行完成，当使用多个goroutine处理任务的时候，如果要等待所有的goroutine都执行完成后再执行下一...

一旦你使用了这些插件，就再也离不开它们了。 很多Java程序员都会使用IntelliJ Idea来编写代码，Idea提供了丰富和强大的功能，如自动代码补全、编辑和导航、强大的搜索功能等等。使用Inte...

实际生产中同一项目的不同版本可能依赖不同的环境，这时需要在系统中安装多个版本的Python。若直接在物理环境中进行配置，多个版本的软件之间会产生干扰。为了避免这种情况，应使用virtualenv命令创...

前面的文章了不起给大家介绍了 LangChain 的一些基本知识，没看过的小伙伴可以点击这里去看下，今天了不起给大家介绍一下 LangChain 的第一个很重要的组件提示词 Prompt。 什么提示词...

在 Node.js 中，Async hooks 是一个非常有意思且强大的模块（虽然性能上存在一些问题），在 APM 中，我们可以借助这个模块做很多事情。本文介绍两个有趣的用法。 AsyncLocalS...

前言 考大家一道题目，下面的类执行结果是什么？？？ public class DispatcherClient { public static void main(String[] args) { A...

Python中的循环语句是我们编写程序时经常使用的工具之一，它可以帮助我们对数据进行迭代、过滤和操作。但是，在某些情况下，使用循环语句可能会导致代码变得复杂、难以维护或运行速度缓慢。所幸，Python...

上篇文章中主要介绍了Solid JS的基本语法，分阶段粗略地介绍了一些原理（响应式原理、编译原理和运行时原理）。 接下来的几篇文章里我会详细介绍每个阶段的详细实现原理，希望可以给你的学习带来帮助。 写...

在 JavaScript 中，对象是语言的基本组成部分，广泛用于表示数据结构。对象由保存值的属性组成。为了访问这些属性，JavaScript 提供了多种方法。在本文中，我们将探索5种不同的方式来访问 ...

Web3 作为区块链技术的重要组成部分，正在快速发展，并被越来越多的开发者和用户所关注。本文将推荐 15 个优秀的 Web3 开源项目，以更好地了解和掌握 Web3 技术！ 全文概览： Lenster...

在当今快节奏的数字世界中，网站性能在决定任何在线企业的成功方面起着至关重要的作用。 一个快速、响应迅速且用户友好的网站不仅可以吸引和留住访问者，还有助于提高搜索引擎排名、提高转化率和改善用户体验 (U...

有时候我看到有人会使用 ReadProcessMemory 这个 API 来实现进程间通信，老实说吧，我觉得这不是一个明智的选择，原因有如下几条。 首先，你不能使用 ReadProcessMemory...

一、锁机制的概念和作用 在多线程编程中，多个线程同时访问共享资源时会引发数据竞争问题，导致程序出现错误。为了避免这种情况发生，我们使用锁机制来保护共享资源，确保同一时间只有一个线程可以访问它。锁机制就...

中间件可以算是一种前端中常用的”设计模式“了，有的时候甚至可以说，整个应用的架构都是使用中间件为基础搭建的。那么中间件有哪些利弊?什么才是中间件正确的使用姿势?本文将分享作者在实际使用中的一些想法，欢...

提到 popover，相信大家都很熟悉，没错，就是组件库里经常见到的悬浮层（或者叫“气泡卡片”），比如 Ant Design。 现在，这个好用的特性终于要在Chrome 114上正式支持了~下面花几分...

每一个JavaScript对象有一个原型，prototype也是一个对象。所有的JavaScript对象继承的属性和方法从它们的prototype。 一、JavaScript 原型 使用对象字面量创建...

1 介绍 如果我们想根据特定的模式表示一组字符串，那么我们应该使用正则表达式。 例如，我们可以编写一个正则表达式来表示所有有效的电子邮件地址，或者我们可以编写一个正则表达式来验证有效的电话号码等。 使...

大多数大型语言模型(LLM)都无法在消费者硬件上进行微调。例如，650亿个参数模型需要超过780 Gb的GPU内存。这相当于10个A100 80gb的gpu。就算我们使用云服务器，花费的开销也不是所有...

之前看到coco[1]的这样一篇文章：纯 CSS 实现波浪效果！[2]，非常巧妙，通过改变border-radius和不断旋转实现的波浪效果，有兴趣的可以去研究一下。 这次尝试一下使用 CSS 渐变来...

在今天的文章中，我们将一起来学习如何用 HTML 和 CSS 制作响应式导航栏效果。 这篇文章主要是面向初学者的，如果你是有经验的开发者，请直接跳过或者忽略。 在这篇文章中，我们将一起来实现一个响应式...

之前的Java是这样： Java 21会是这样： 看到这个消息，我最大的感受是： 卧槽，怎么就Java 21了？！我还在用Java 8 呢！ 实际上，从Java 8 到Java 21，中间也就是Ja...

点击参加51CTO网站内容调查问卷 译者 | 崔皓 审校 | 重楼 摘要 文章介绍了QLoRa（Quantized LLMs with Low-Rank Adapters），一种在消费者级别的硬件上微...

一 引发性能问题原因? 引发性能问题的原因通常不是单方面缘由，特别是大型系统迭代多年后，长期积劳成疾造成，所以我们要必要分析找到症结所在，并按瓶颈优先级逐个击破，拿我们项目为例，大概分几个方面： 1 ...

哈喽，大家好，我是了不起。Java注解可以说是我们编码过程中最常用的。本篇文章将给大家介绍Java注解的概念、作用以及如何使用注解来提升代码的可读性和灵活性，并介绍如何通过注解来优化我们的Java代码...

大家好，我卡颂。 请思考一个问题：如果有一个HTML标签，React围绕他专门出了2个hook，那这个标签对React未来的发展一定非常重要，这没毛病吧？ 这个标签就是 —— form。 React围...

若要使用PyCharm工具开发Flask程序，既可以另行创建新的虚拟环境，也可以使用创建好的虚拟环境进行开发。接下来，在PyCharm工具中新建一个项目，并为该项目配置虚拟环境flask_env。 首...

JavaScript 是一种非常强大的编程语言，它通过提供构建动态和交互式网站的方法在 Web 开发中找到了自己的位置。它在开发人员和 Web 设计人员中的流行程度如此之高，以至于不断出现旨在进一步增...

为什么要升级？ PyTorch 2.x更快，更符合Python语言习惯，仍然具有动态性。 弃用CUDA 11.6和Python 3.7支持。 升级目标 升级之后，使Python、CUDA、CUDNN...