特色

前端开发工具大全（Web Front End Awesome）【不断更新，与时俱进】

前言

回顾 4、5 年前开始，我在 Github 上整理过一个 Repo 叫《web-frontend-awesome》当时的想法是把自己在日常工作中会常用到的前端相关的东西记录下来，方便查阅与使用。4、5 年前，那应该还算是一个 jQuery 一招鲜的年代，使用 require.js / sea.js + jQuery / zepto.js、开源的 jQuery 插件、自己扩展一些 jQuery 插件，基本可以解决一切的问题；但随着前端 MVC 的框架 backbone.js 已经被广泛应用，虽然 backbone.js 还是基于 jQuery 来实现。前端 MV+ 框架的思想已经开始逐渐深入人心，紧接着就是 AngularJS、React、Vue.js 的兴起，再到前端实现多端 / hybrid APP 广泛应用（React Native，Weex，phoneGap，Ionic，Electron / nw.js，Flutter）；往后再有 微前端 / 低代码前端 / 前端机器学习 TensorFlow.js 的出现解决越发复杂的多前端应用耦合问题。当时开始整理的内容还是以 jQuery 的思路为主，现下面重新整理一下，逐渐增加一些新的东西吧 继续阅读“前端开发工具大全（Web Front End Awesome）【不断更新，与时俱进】”

关于 Learnopengl 中用 Geometry Shader 实现机器人爆炸【Opengl – 图形学 – C/C++ 系列】【寅虎】

前言

上一回合《Opengl – 图形学 – C/C++ 每天进步一点点【丑牛】》讲到了画三角形、四边形，但 3D 的世界肯定更加精彩，这里我来聊聊在 web 世界的 Webgl / Webgpu 中没有玩过的东西 – Geometry Shader，废话不多说，让各种 aigc 科普下。

一言说：Geometry Shader 是一种可选的着色器，它开始被引入在 Driect3D 10 和 OpenGL 3.2 中，然后在 OpenGL 2.0+ 中被作为扩展使用，在 OpenGL3.x 中它也成为了核心。Geometry Shader 主要的输入是点、线和三角形，输出是点、线带和三角形带。Geometry Shader 的处理阶段处于流水线的栅格化之前，也在视锥体裁剪和裁剪空间坐标归一化之前。另外，Geometry Shader 程序是在 Vertex Shader 程序执行完之后才执行的 继续阅读“关于 Learnopengl 中用 Geometry Shader 实现机器人爆炸【Opengl – 图形学 – C/C++ 系列】【寅虎】”

Opengl – 图形学 – C/C++ 每天进步一点点【丑牛】

前言

上一回合讲到 C/C++ 开发环境的搭建，基础搞好了，这里终于可以进入正题了，废话不多话，先找 gpt 帮忙开个头，it goes like this:)
PROMPT：介绍一下GLFW和GLAD
ANSWER：GLFW和GLAD是两个常用的库，用于在现代OpenGL应用程序中进行窗口管理和加载OpenGL函数。
1、 GLFW（OpenGL Framework）是一个轻量级的开源库，用于创建和管理窗口、处理用户输入（如键盘、鼠标、游戏手柄等），以及获取时间间隔。它提供了一个简单的接口，方便开发者快速搭建OpenGL应用程序的窗口环境。GLFW跨平台，可以在Windows、MacOS和Linux等操作系统上使用。
2、 GLAD（OpenGL Loading Library）是一个开源的库，用于加载OpenGL函数。在早期版本的OpenGL中，需要手动查找和加载函数指针才能使用OpenGL的功能。而GLAD简化了这个过程，它自动生成了跨平台的OpenGL加载器代码，可以自动获取系统支持的OpenGL版本和扩展，并将相关函数指针加载到程序中，方便开发者使用OpenGL的各种功能。
glfw和glad常常被一起使用。开发者可以使用GLFW创建窗口、处理用户输入，然后使用GLAD加载特定OpenGL版本的函数，并在GLFW创建的窗口环境中使用这些函数实现图形渲染以及其他OpenGL相关的操作。这样，开发者能够更方便地进行现代OpenGL应用程序的开发 继续阅读“Opengl – 图形学 – C/C++ 每天进步一点点【丑牛】”

Opengl – 图形学 – C/C++ 每天进步一点点【子鼠】

前言

废话不多话，先找 gpt 帮忙开个头，it goes like this:)
在过去的四、五年里，学习 Web3D 一直是我不断探索和学习的一个领域。从一开始学习的时候，我就深深地迷上了这种技术所带来的无限可能性和创新性。在这个过程中，我不断地在探索和学习，不断地克服着困难和挑战。今天，回顾这些年来的收获和经验，我深深感谢自己的坚持和努力，也深深感谢这个领域里的各位前辈和同行，他们的经验和技术为我的学习之路提供了巨大的支持和帮助。然而，最近我开始关注更加深入和高级的图形编程技术，因此我决定开始学习 C / C++ 和 OpenGL，并将 Web3D 技术与之相结合。这不仅可以使我更好地理解和掌握计算机图形学的基本原理，也可以让我更好地实现自己的项目和构建更加高效和复杂的3D场景。在这篇文章中，我将不定期分享我从 Web3D 技术转向 C++ 和 OpenGL 图形编程的经历和心得，包括遇到的挑战和克服困难的过程，并希望以此鼓励更多的人不断探索、学习和学以致用 继续阅读“Opengl – 图形学 – C/C++ 每天进步一点点【子鼠】”

A Simple Introduction to Ray Algorithms

Ray

What is Ray? Ray is known as casting a ray line from a point (Ray Origin) in space to a point or to a certain direction (Ray Direction) in space. Literally, a ray is a line segment that starts at a point and extends in a direction. We can use two values to define a ray: the origin and the direction. What ever dimension space the ray is in, we can use the origin and direction to define a ray. Ok, so how to define a ray origin and direction? Commonly, we can use vectors to define the origin and direction. When it comes to vectors, Wow! 继续阅读“A Simple Introduction to Ray Algorithms”

How To Optimize The Page Loading Time In Your Create-react-app Project?

Recently, I have been working on optimizing the page loading time of a complex low-code application. Previously, I have done some similar optimization work in other projects, but they are not react projects. As it’s based on Webpack, in order to reduce the page loading time, I have to try to optimize the webpack bundle size or the chunk size of the application, 继续阅读“How To Optimize The Page Loading Time In Your Create-react-app Project?”

Something About Computer Graphics

忽然就想用英语来写写技术系列之二 – 浅谈计算机图形学。接着上一篇我之前写的《Web 图形学从入门到 “放弃” 指南》的文章，我再来畅谈一下计算机图形学的皮毛。

In last few years, I have been learning computer graphics from 2d Canvas, 2D Svg, Webgl, Three.js, Webgpu and Glsl
shader programs.

As the saying goes, “There are three romantic areas in programming: 1. Operating System 2. Compiler 3. Computer
Graphics”. 继续阅读“Something About Computer Graphics”

Something About Design Pattern In Javascript

忽然，就想用英语来写写技术相关的东西哈：），水平有限，不过还得硬写（模仿老外也行），不写口语铁定退化。

The article is divided into several sections:
1.The Factory Design Pattern in Javascript
2.Editor’s Commands
3.Protect Your Class’s Properties or Methods
4.How To Use Super in Javascript / Typescript
5.In a Class, How To Add a Clone Method without using “New” keyword
6.How To Use static in Javascript / Typescript
继续阅读“Something About Design Pattern In Javascript”

再次遇见 React 找回初恋的感觉

背景

脱离了 Vue，最近几个月一直接在使用新版 React 来搞低代码平台，那真是找到了初恋的感觉。由于代码平台的超高复杂度及 React 其完备的生态，使用 React 的技术栈应该算是最佳选择。上一次使用 React 已经是 4 年前的事了（转到我四年前写的一个 Repo《https://github.com/nelsonkuang/ant-admin》），那其实只是我当前的无心插柳之作，居然吸到了不少粉。话说回来，新版的 React 变化确实有点大，但感觉有种万变不离其中的感觉 继续阅读“再次遇见 React 找回初恋的感觉”

一次对复杂的古董问卷系统项目的前端优化之旅

背景

年前接盘了一个项目的优化任务，这是一套类似“问卷网 / 问卷星”之类的，集问卷拖拉创建、预览、发布、数据收集、数据可视化报表等非常齐全的复杂的古董问卷系统，由于产物是出生于 jQuery 一招先，jQuery 称王称霸的年代。实现的逻辑当然是 Dom 操作为王的思路。加之、先前的开发作者是偏后端的全栈开发， 继续阅读“一次对复杂的古董问卷系统项目的前端优化之旅”

Vue 中 使用 json 定义生成表单（支持 ElementUi / iview / Ant Design Vue）

背景

之前已经在项目中实现过类似的功能，就是要通过后端接口返回的 json 动态输出相应的表单。但之前的实现方式是通过条件判断来根据 json 定义的类型输出相应的组件组成表单。本次遇到类似的需求，实现方式想通过 Vue 中的 component :is 的方式 继续阅读“Vue 中 使用 json 定义生成表单（支持 ElementUi / iview / Ant Design Vue）”