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

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

回顾这一年，我的成长是显著的。如今，我已经能够专门负责前端大屏低代码模块的工作。从最初的迷茫新人，到现在能够独立承担责任，这个过程中我经历了许多，也学习了许多，成长了许多。

我的2024年度总结：工作的第一年

通过本文，我们学习如何实现一个具有拖拽、缩放和定位功能的简易画布。

实现一个简易的可拖拽缩放画布

Signal 机制的核心是使用函数而非直接返回值来管理数据，通过 read 和 set 函数分别获取和设置值，并维护订阅者列表以实现数据变更时的自动更新。 这需要将读取函数设计为函数而非直接返回信号值，以便追踪和管理订阅者，从而实现高效的UI更新。

理解 Signal 是如何工作的

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

通过这篇文章，主要了解两个方面：
• Solid 的组件编译
• Solid 是如何实现 Signal 的插入和细颗粒度更新的？

Solid 之旅 —— 组件编译 & 如何实现细颗粒度更新的

今天我们来聊一聊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

Daily

English

Tools

Life

Algorithms

DevOps

Project

Photography

Cycling

Travel

Tour

Thinking

Vlog

Comments

Planning

Monthly

Summary

Year

Vite

React

JavaScript

TypeScript

Created

Name

password

icon

date

type

Edited

slug

status

title

summary

表格

Gallery view

这部剧讲的东西就是一些生活的琐碎，但是又那么深入人心，我是打心底沉进去了

JinSo

交流频道

加入我们的社群讨论分享