今天我们来聊一聊HTML中一个较少被提及的标签：<template>。虽然它在页面加载时不可见，但在现代Web框架中却扮演着重要的角色，比如Vue、Svelte和Solid等。

探索HTML中的<template>标签

Cursor 是一款集成了 AI 技术的代码编辑器，作为广受欢迎的 VS Code 的一个衍生版本，它不仅继承了 VS Code 的强大功能，还全面融入了 AI 功能，从而极大地简化了开发工作流。

为什么 Cursor 这么受欢迎？说说我这几个月的使用感受

月度摄影 — 2024年10月 ~慢慢拍照，静静生活~

这篇文章将主要深入解析组件内部props的原理，为什么结构后会导致响应式丢失？

Solid 之旅 —— 为什么 props 被解构后会导致响应式丢失

百度地图的基本使用，简单介绍一下一些基本内容，本文着重关于在 Marker 标注和点聚合这一块。

百度地图的使用（Mark、Cluster…）

月度摄影 — 2024年9月 ~慢慢拍照，静静生活~

对于 React Scheduler，它通过将任务切片并异步执行，避免了阻塞浏览器的主线程。
很多人其实都看到过类似的文章了，甚至说去手写调度器，都写的很不错，所以本文将从一个新的角度探讨 React Scheduler，揭示它是如何利用几个简单的 API 实现这一壮举的。

解析 React Scheduler 原理，Solid 竟也在使用！

想法与思考 — 2024.09.17

月度摄影 — 2024年8月 ~慢慢拍照，静静生活~

想法与思考 — 2024.08.28

在本文中，我将通过三个案例来深入到 Solid 源码中解析 Signal 响应式的原理，并通过图例的方式展示给大家。

Solid 之旅 —— Signal 响应式原理

pnpm monorepo 联调方案

在本文中，我们将深入探讨如何有效地利用 sourcemap 进行 Solid 源码的调试，并探索一些通用的调试技巧，这些技巧同样适用于其他现代 JavaScript 框架。

Solid 之旅 —— 调试源码篇（其他框架也适用）

月度摄影 — 2024年7月 ~慢慢拍照，静静生活~

Solid 框架巧妙地融合了 React 和 Vue 的优点，为开发者提供了一个强大而灵活的工具集，以构建高性能和高度响应的前端应用。

Solid 之旅

月度摄影 — 2024年6月 ~慢慢拍照，静静生活~每日一张

想法与思考 — 2024.06.28

想法与思考 — 2024.06.25

日常摄影 — 2024.06.04

日常摄影 — 2024.06.03

Vlog — 骑行 ”淀山湖“ 🤡

日常摄影 — 2024.06.02

日常摄影 — 2024.06.01

月度摄影 — 2024年5月 ~慢慢拍照，静静生活~每日一张

想法与思考 — 2024.05.31

日常摄影 — 2024.05.31

日常摄影 — 2024.05.30

日常摄影 — 2024.05.29

想法与思考 — 2024.05.28

日常摄影 — 2024.05.28

日常摄影 — 2024.05.27

日常摄影 — 2024.05.26

日常摄影 — 2024.05.25

日常摄影 — 2024.05.24

日常摄影 — 2024.05.23

日常摄影 — 2024.05.22

日常摄影 — 2024.05.21

日常摄影 — 2024.05.20

日常摄影 — 2024.05.19

日常摄影 — 2024.05.18

想法与思考 — 2024.05.17

日常摄影 — 2024.05.17

想法与思考 — 2024.05.16

日常摄影 — 2024.05.16

想法与思考 — 2024.05.15

日常摄影 — 2024.05.15

日常摄影 — 2024.05.14

日常摄影 — 2024.05.13

日常摄影 — 2024.05.12

日常摄影 — 2024.05.11

泰安之旅

青岛之旅

每日摄影 — 2024.04.18

技巧摄影 — 双重曝光

骑行 出发 → 苏州

东平国家森林公园

骑行 出发 → 崇明岛

💙张杰演唱会💙 ^_^

人生第一辆公路车 — 来自大佬的馈赠

使用 Monaco 编辑器的一些总结

日常摄影 —— 2024.03.07

日常摄影 —— 2024.03.06

Array.prototype.with(index, value) 方法会返回对其调用的数组的副本，并将 index 设置为您提供的新 value

使用 Array.prototype.with 更新不可变数组

通过三个星期的学习，大致已经对低代码有了初步的了解了
从一开始的未知，到后面了解学习到的一些概念，如materials、setter、setting、canvas、vm等等内容

TurboLC-Web 小小部署一波

在 Monorepo 中对代码进行规范，使用的工具包括 husky、lint-staged、biome，通过专门建立一个lint包来实现此功能

在 Monorepo 中对代码进行规范(husky + lint-staged)

总结一下最近在公司做需求遇到的一些问题

前端实现PDF预览的几种选择（pdfjs-dist、react-pdf、pdf-viewer）

ECharts — 通过ColorPicker控制ECharts图表的渐变色

ECharts — 柱状图相关功能点（柱状样式、顶部装饰、提示框及动画） ^_^

美图一张 ^_^

ECharts — 饼图相关功能点（内环、外环、环形间隔、环形文字、轮播动画）

CheatSheet 一款可以实时显示当前应用的所有快捷键，非常好用！只需要在应用里按一次快捷键(默认 F2)，它就会弹出一个窗口，列出当前应用的所有快捷键列表，包括快捷键组合使用方法等等。这给我使用快捷键带来了极大的便利，可以随时查看忘记的快捷键，不需要频繁搜索查询了。

这款跨平台快捷键显示软件，我用起来超顺手！

GitFlow 工作流（GitFlow Workflow） 是一个 Git 工作流程，可帮助持续进行软件开发和实施 DevOps 实践。它最初由 Vincent Driessen 在 nive 上发行并广受欢迎。Gitflow 工作流定义了围绕项目发行版设计的严格分支模型。这为管理较大的项目提供了一个强大的框架。

Git Flow 的简单使用

在 Deno 中 使用 npm 包

实现物体的关键帧动画和骨骼动画

ThreeJS — KeyFrameAnimation & Bone

ThreeJS — 通过 Ray & Label  来做一个点击物体高亮并提示信息

ThreeJS — Sprite & EffectComposer

ThreeJS — Shadow

对于简单的立方体、球体等模型，你可以通过three.js的几何体相关API快速实现，不过复杂的模型，比如一辆轿车、一栋房子、一个仓库，一般需要通过3D建模软件来实现。

ThreeJS — 外部模型

BR材质，所谓PBR就是，基于物理的渲染(physically-based rendering)

ThreeJS — PBR

网格模型Mesh其实就一个一个三角形(面)拼接构成。使用网格模型Mesh渲染几何体geometry，就是几何体所有顶点坐标三个为一组，构成一个三角形，多组顶点构成多个三角形，就可以用来模拟表示物体的表面。

ThreeJS — BufferGeometry

Three.js是一款基于原生WebGL封装通用Web 3D引擎，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。

ThreeJS — 入门

通过React Native体验一遍从环境搭建到开发，到最后的打包运行

React Native 从0到1

Electron 从0到1

实现一个小型打包工具

常见面试手写题

一个基于 WebRTC 实现的视频会议的全栈开发项目，支持音频，视频，共享屏幕，消息发送的方式来进行交互。同时项目是基于TypeScript的全栈开发，并使用 pnpm monorepo 进行项目管理

TurboMeet：一个基于WebRTC实现的视频会议全栈开发项目

Mediasoup 由应用层和数据处理层组成。应用层是通过 Node.js 实现的；数据处理层由 C++ 语言实现，包括 DTLS 协议实现、ICE 协议实现、SRTP/SRTCP 协议实现、路由转发等。

Mediasoup 的使用

关于流媒体的一些知识点的总结

流媒体相关知识

WebRTC 简单功能使用

该项目主要是一个仿 Mac 的系统，全部使用的 TypeScript 书写，使用
了一些前端的新技术，实现的功能包括顶部状态栏，App 的使用，如 Terminal、
TurboChat 等其他应用

TurboMac 项目

使用cluster集群并采用Round-Robin负载均衡策略来调度多进程

Node Cluster 集群

跟着极客兔兔做7Days的framework练习 https://geektutu.com/post/gee.html

Go-Framework by geektutu

• 当页面滚动时，懒加载图片或其他内容。
• 实现“可无限滚动”网站，也就是当用户滚动网页时直接加载更多内容，无需翻页。
• 对某些元素进行埋点曝光
• 滚动到相应区域来执行相应动画或其他任务。

图片懒加载 — IntersectionObserver

• 学会如何制作 https 的自签名证书
• 学会使用 socket.io 来实现客户端与信令服务器的通信
• 了解并实现一个 WebRTC + 信令服务器自动建立连接的音视频实时通话

WebRTC 实时音视频 1v1

粘贴图片到网页

p-limit 用于实现并发控制，限制同时进行的异步操作数量。通常用于处理前端代码中的异步逻辑，可以控制并发的数量，避免一次性进行太多的异步操作导致性能问题。

手写 p-limit —— 实现并发控制

第一优势：跨平台，由于 Docker 的镜像能够提供除了系统内核之外完成的运行环境，所以能在任何系统中都能提供一致的运行环境，这样就不需要考虑不同系统中间兼容性的问题，也就不存在虚拟机在各系统中间的配置不同的情况。
第二优势：就是借助于跨平台的特性，Docker 可以将很多配置复杂的服务端中间件打包成基础镜像提供给开发使用。这样无疑能够大大降低配置成本，开发只需要知道常规的 Docker 相关的命令或者直接运行提供的容器编排脚本就可以搭建出需要使用的服务端环境。同时公共的镜像仓库上已经有很多这种基础镜像，例如 Mysql、Redis、Node 等等，按需提取即可。
第三优势：这点对于运维同学比较好操作，Docker 能提供快速迁移以及配合 k8s，能够快速的伸缩副本，减少运维的工作成本与负担。

Docker 基本使用

依赖项注入、装饰器、异常过滤器、管道、保护和拦截器，都同样适用于微服务。Nest 会尽可能地抽象化实现细节，以便相同的组件可以跨基于 HTTP 的平台，WebSocket 和微服务运行。本节特别讨论 Nest 的微服务方面。 在 Nest 中，微服务基本上是一个使用与 HTTP 不同的传输层的应用程序。

NestJS 学习 —— 微服务 Microservice

本文档中其他地方讨论的大多数概念，如依赖注入、装饰器、异常过滤器、管道、守卫和拦截器，都同样适用于网关。只要有可能，Nest将抽象实现细节，以便相同的组件可以跨基于 http 的平台、WebSockets 和微服务运行。本节将介绍 WebSockets 在 Nest 中的应用。

NestJS 学习 —— 网关 Gateway

了解Nest的基本概念
- Controller
- Provider
- Module
- Middleware
- Exception & Filter
- Pipe
- Guard
- Intercept

JinSo

交流频道

加入我们的社群讨论分享