前端

夏天又到啦，又到了吃西瓜的季节！怎么能少了《合成大西瓜》这款又好玩又解压的小游戏呢？,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来实现各种不错的文字效果，文字则摘录古诗词中有关《兔》相关的诗词，让...

​​​ 作者丨Lena Yakimova 译者 | 朱钢 策划丨孙淑娟 【51CTO.com快译】为了满足业务需求，思想前卫的公司会将 QA 嵌入到 SDLC 中。这篇文章将带您了解应在每个开发阶段引...

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

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

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

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

一、简介 Grpc 使用了 Google 的 Protocol Buffers 作为接口定义语言（IDL），并使用 HTTP/2 作为传输协议。它支持多种编程语言，包括 C++、Java、Python...

TIOBE 2023 年 06 月份的编程语言排行榜已经公布，官方的标题是：Python 还会保持第一吗？（Will Python remain number 1?） 在过去的 5 年里，Python...

一、什么是window.screen？ window.screen 对象包含有关用户屏幕的信息。 二、窗口屏幕属性 window.screen 对象可以不用窗口window前缀书写。下面用丰富的案例讲...

前言 之前我已经写过好几篇权限认证相关的文章了，有想复习的同学可以查看【身份权限认证合集】。今天我们来聊一下登陆页面中“记住我”这个看似简单实则复杂的小功能。 如图就是博客园登陆时的“记住我”选项，在...

当我们前端切图崽网上冲浪的时候，会发现有很多技术文章都在分析vue框架，react框架，显少有分析小程序框架的。那今天就通过这篇短小精悍的文章带大家了解一下微信小程序的底层架构。（如无特殊说明，下文中...

哈喽大家好啊，我是Hydra。 在平常的工作中，OpenFeign作为微服务间的调用组件使用的非常普遍，接口配合注解的调用方式突出一个简便，让我们能无需关注内部细节就能实现服务间的接口调用。 但是工作...

帕累托法则无处不在，它说： “在大多数情况下，80%的结果来自于20%的原因。” 作为一名程序员，当代码运行速度不尽如人意时，就需要花费大量时间对代码进行相应的重构。但在许多情况下，所得到的速度提升并...

点击参加51CTO网站内容调查问卷 作者 | Mohit Pandey 编译 | 徐杰承 任何说自己很懂C++的人可能都是在夸大其词。 我想你可能已经注意到了，是的，今天的大多数程序员都在使用Pyth...

哈喽，大家好，我是了不起。 高考结束了，依然祝高考学子们取得好成绩，然后报考计算机专业，然后快点毕业，来接收哥哥姐姐们留下的代码文明。。。。 接到某城举报，某迪泄露高考题目。 最近生产环境各种问题，几...

Struct Tag 在Golang中，结构体标记（Struct Tag），也称为结构体注释（Struct Annotation），是一种对Go结构体中的字段进行元数据附加的机制。这些标记是用反引号...

本篇文章来教大家搭建一个好的PHP和Python环境，可以帮助开发和运行PHP和Python应用程序，使其更加高效和稳定。 一、 PHP环境介绍 好的开发环境无疑会大大提升编码效率，近日钻研了一下Py...

垃圾收集算法 1. 分代收集理论 1.1 分代假说 弱分代假说：绝大多数的对象存活时间很短，朝生夕灭。 强分代假说：熬过越多次的垃圾回收次数，对象越难被消灭。 跨代引用假说：跨代引用相对于同代引用而言...

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

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

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

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

软件开发涉及设计、文档编制、编程、测试和持续的软件产品维护。 在这份综合指南中，我们将探索各种软件开发步骤、方法和工具，它们对于生成高质量的软件可交付成果至关重要。通过了解这些步骤并实施最佳实践，开发...

点击参加51CTO网站内容调查问卷 作者 | Serdar Yegulalp 策划 | 云昭 Mojo很狂！它的目标非常有野心：“与Python一样易于使用，但与Rust一样强大和快速。” 新推出的M...

Visual Studio Code（VSCode）是Python开发中较受欢迎的集成开发环境（IDE）之一。它速度快且拥有丰富的功能，使开发体验变得有趣且简单。 【网址】：https://code...

WebGPU 是用于 Web 的下一代图形和计算 API。它提供对现代 GPU 的基础访问，从而在 Web 平台上实现高性能 3D 图形、图像处理和通用计算。经过多年的开发和测试，WebGPU 已经到...

前言 幂等是分布式系统中保证数据一致性和安全性的重要保障之一，尤其是在金融、支付领域，其作为资损防控的硬性指标体现在系统架构设计中。今天我们就来浅谈一下幂等相关的设计。 幂等的定义 幂等( idemp...

点击参加51CTO网站内容调查问卷 译者 | 布加迪 审校 | 重楼 React是一种知名的JavaScript库，可以用它来为用途广泛的Web应用程序开发UI。React有很强的适应性，可以将它与其...

一、 线程间通信的方式和实现 在多线程编程中，线程间通信是非常常见的需求，它指的是多个线程之间通过某种机制来交换信息，协调彼此的行为。线程间通信的方式常用的有以下几种： 共享内存：线程之间可以通过共享...

大家好，我是前端西瓜哥。这次来看看 PixiJS 的 Ticker 模块源码。 Ticker 的作用是 在下一帧绘制前调用监听器，PixiJS 使用它来不断对画面进行重绘。 使用 在我们 实例化 PI...

环境：Springboot3.0.5 错误消息格式 有如下接口： @RestController @RequestMapping("/demo") public class DemoControlle...

1. 方法区简介 JVM 的内存模型主要包括程序计数器（Program Counter Register）、虚拟机栈（VM Stack）、本地方法栈（Native Method Stack）、堆（He...

一、什么是线程池 线程池是一种优化线程管理的机制，它可以在程序启动时创建一定数量的线程，并将它们保存在一个池中。当需要执行任务时，可以从线程池中获取一个空闲的线程来执行任务，执行完毕后线程不会被销毁...

背景 我们每一个系统开发人员都希望自己的程序永远不宕机，高可用是很多系统的目标。那我们如何把自己的系统改造成高可用的系统呢？带着这个问题，本文就给大家演示下，如何自己动手，从零开始基于raft协议来改...

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

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

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

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

集成开发环境或 IDE 是构建软件项目所需的最关键部分之一。它们使开发变得简单高效。 IDE 通过缩短设置时间、加速开发任务、让开发人员了解最新的危险和最佳实践以及标准化开发过程以便任何人都可以参与来...

一、Producer 生产者创建消息。 该角色将消息发布到Kafka的topic中。broker接收到生产者发送的消息后，broker将该消息追加到 当前用于追加数据的 segment 文件中。 一般...

一、线程池的定义和优点 线程池是一种管理、维护和复用线程的机制，其主要目的在于减少线程创建和销毁所带来的性能开销，并提高应用程序的响应速度和吞吐量。C#中的线程池是一个静态类ThreadPool，它封...

背景 设计师的原稿是这样的渐变： 导出的视觉稿是这样的：（导出工具没有识别到渐变） 于是决定去找设计师沟通这个渐变”长什么样“。当然，设计师并不会像写 CSS 一样给你描述渐变，所以作为需要写出这个渐...