- 博客(93)
- 资源 (13)
- 收藏
- 关注
RSS订阅原创 Pipelines in Shell
学习 shell 脚本必须要理解 pipeline 的概念，知道 command 的输入（input）和输出（output）的概念。只有掌握了 pipeline 的机制我们才能更好的写好 shell 脚本，本章内容详细介绍 pipeline。
2022-11-26 22:14:24
1830
原创 网站开发到上线——castalia
Castaila 是一个资源导航网站，不只是设计师的灵感源泉，精选国内外优质网站， 让每个人都能找到自己需要的资源。
2022-03-15 17:30:57
766
原创 使用 vue 和 canvas 制作的游戏
游戏试玩请戳这里：https://pengfeiw.github.io/minicode/hextris源码： https://github.com/pengfeiw/vue-hextris游戏是一个复制版本，游戏玩法和设计来源于这里。十分有趣，我第一次玩这个游戏的时候，就被吸引了，因为我是一个程序员，所以就将它用 Vue.js 重写了。目前，我没有完全复制原来的版本，所以它与原版会有一点差别，但是核心玩法是一样的。喜欢的，请多支持。...
2022-03-09 17:01:36
5127
原创 使用 css 创建 3D 效果的 书籍
效果可以在 codepen 上查看效果和源代码。我整理了一篇关于学习 css 的教程，想要学习 css 或者 复习知识的，可以看一看。戳 =>>>> css 教程地址 <<<<<= 戳代码<div class="book-container"> <div class="book"> <div> <div class="title">3d book</div>
2022-02-24 17:02:28
353
原创 使用 threejs 给网站加入三维特效
一. 效果网站地址：pengfeixc.comminicode：pengfeiw.github.io/minicode二. sourcecodepixel image | github
2022-01-26 10:34:12
731
原创 threejs 绘制星空
效果online 地址：https://pengfeiw.github.io/minicode/threejs-star源码star | github
2022-01-21 22:28:51
1331
1
原创 Threejs 制作的 3D 画展
online 地址threejs-gallery 在线地址 | Minicode源码gallery - github
2022-01-16 13:11:50
1242
原创 Threejs 绘制世界地图
效果在线预览地址：threejs-worldmap ，你可以通过鼠标左键旋转，中键缩放，右键平移来操作视口。实现通过读取一张透明世界地图的图片数据，然后将图片数据，用 ThreeJs 绘制到场景中。源码https://github.com/pengfeiw/threejs-example/blob/main/worldmap.html更多内容可以关注我的个人网站：我的小站。...
2021-12-28 16:28:51
1899
原创 开源的个人博客网站
想要免费搭建一个个人博客吗？如果答案是肯定的话，那么你来对了地方。????介绍我的个人网站，是从年初建立的，已经快一年了，博客端、后台管理及服务端都是自己一行一行手撸出来的，期间技术栈和界面经历了几次更新，目前已基本稳定。所以最近，我整理了下网站前端所用到的技术，然后利用github page和github action部署了一个类似与我个人博客类似的网站：你好，线性代数，可以进去看一看。这个网站，是完全开源的，你可以fork一份到自己的仓库，然后和我一样使用github page搭建一个属于自
2021-11-29 21:47:22
2010
原创 图形学几何入门教程
最近在写一篇计算机图形几何入门的教程。目前写了两节内容。《你好，线性代数》教程名称为《你好，线性代数》，网站是自己开发的，采用github page发布，可以在线阅读，阅读地址：https://pengfeiw.github.io/hellolinearalgebra/。项目完全开源，开源地址：https://github.com/pengfeiw/hellolinearalgebra。感兴趣的可以关注一下，若发现教程有误，可以提issue或者pr，感谢任何帮助我完善教程的朋友。...
2021-11-29 21:15:00
411
原创 3D空间中的点坐标转化为屏幕二维点坐标（二）
????原文地址：3D空间中的点坐标转化为屏幕二维点坐标（二）????上一节，简单的介绍了计算机时如何将三维世界中的点转化成屏幕上的二维点坐标的，知道了透视矩阵的作用。这一节内容，就是介绍其中的数学计算的过程。坐标系与矩阵在三维计算机图形学中，那些呈现在屏幕（画布canvas）上的每个点，都是由三维的点转化的，它们组成了屏幕上的图像。在前面的文章中，我介绍了透视矩阵，透视矩阵的作用就是将三维的点转化成二维的点，展现在屏幕上，也给大家讲解了透视投影矩阵的计算，所以本节内容当然并不是再次计算透视投影矩阵
2021-11-11 15:22:23
9017
原创 3D空间中的点坐标转化为屏幕二维点坐标（一）
每个人在进入计算机图形学的世界中，都有一个同样的困惑，三维世界中的三维坐标是如何被转换成屏幕上的二维坐标的，我如何在屏幕上找到一个点（二维点）对应三维世界中的点（三维点）呢？要理解其中的过程，对学习计算机图形学是非常重要的。这里，我假设你已经了解计算机图形学中一些基本的数学知识，例如向量和矩阵，也知道矩阵在图形变换中起到的作用。如果不清楚这些概念，或者想重温一下这些数学知识，可以看看我的其他文章。三维世界中的坐标转换成二维世界中的坐标的这个转换过程，也可以看做矩阵的变换，这个变换矩阵将三维坐标转换成屏幕
2021-11-10 21:32:07
4777
1
原创 个人网站项目开源啦
原文地址：https://pengfeixc.com/blogs/website/site-opensource先看网站效果：https://www.pengfeixc.com和https://pengfeiw.github.io/hellolinearalgebra/。之前就考虑把我的个人网站开源，但是因为我的网站比较复杂，包括个客户端页面、后台页面和服务器端，所以一直没有开源。所以最近花了些时间，整理了下网站，写了一个独立的只有客户端的项目：你好，线性代数，这个项目是完全开源的，并且前端代码几乎是
2021-11-06 11:29:39
1247
原创 超酷的纯CSS悬浮特效
本文展示一些纯CSS实现的悬浮动效，附源码。原文地址：https://pengfeixc.com/blogs/css/pure-css-hover-animation，可以在线编辑代码，查看动画效果。代码：github。按钮悬浮动效卡片悬浮透视动效卡片悬浮文字平移卡片悬浮背景动效图标旋转动效菜单悬浮动效纯html、css图标动效菜单/按钮悬浮动效涨水效果更多特效参考：https://www.proglobalbusinesssolutions.com/css-h
2021-10-15 14:17:15
2706
原创 国庆假期花三天时间在家写个个人网站
个人网站国庆假期，花了三天时间，又更新了一下我的个人网站，戳这里可以查看网站。采用NextJs和Chakra UI技术栈。原来的UI用的是Antd，Chakra UI比Antd界面更加简洁，而且自带黑夜和白天模式，利用自带的黑夜和白天模式，加上我自己自定义了一套颜色切换，完成了目前网站的主题，可以通过右上角的按钮自由切换主题，这也是目前我对这次更新比较满意的一个地方。后面等我整理好后，我也会把我的前端网站项目开源，想搭建个人网站的朋友可以关注一下。...
2021-10-07 10:32:24
464
1
原创 站内搜索功能的几种实现方式
原文地址：https://pengfeixc.com/blogs/website/site-search今天花了一些时间优化了网站的搜索功能。一.简易版搜索之前的网站搜索功能实现比较简单。过程大致如下：用户在搜索框输入要搜索的关键字。浏览器根据关键字，发送搜索请求。服务器收到请求。服务器根据搜索关键字，查询数据库（根据文章标题和文章描述），将查到的文章返回给浏览器。浏览器根据请求response，渲染文章列表。由于这个搜索功能只考虑了文章的标题和描述，没有搜索文章的内容，功能很弱，无法
2021-09-27 18:22:34
25028
3
原创 在TypeScript中使用namespace封装数据，实现模块化编程
原文地址：https://pengfeixc.com/blogs/javascript/typescript-namespace。在之前的typescript module文章中，我讲解了如何通过typescript的模块系统，将程序的代码逻辑分割成不同的模块放在不同的文件中。但是模块系统有一个前提是，代码运行的环境必须支持模块系统，比如浏览器支持ES Modules，所以我们可以使用模块，通过import和export导入模块。假设我们的代码要在一个不支持任何模块系统的环境中运行，那么我们就无法使用模块
2021-09-24 15:31:23
1679
原创 深入理解TypeScript的模块系统
原文地址：深入理解TypeScript的模块系统。在ES2015出现之前，JavaScript还没有原生的模块系统（ES Module），只能借助第三方的RequireJS和SystemJS来使用模块功能。模块本质上就是一个JS/TS文件，类似一个沙盒环境，使用import语句引入其他模块的API和值，export语句暴露自己的API和值。TypeScript原生支持ES Module的语法，可以在.ts文件中使用import和export语句。默认情况下，TypeScript仅支持引入.ts和.d.
2021-09-23 22:55:34
374
原创 花两天时间完成一个个人网站
女朋友是做UI设计的，一直想要个个人网站，所以特地花了两天时间，给它做了个网站。网站传送门，请戳这里。网站是她自己设计的，我按照它的UI稿复原了，网站的后台和服务端都是用的我之前写的。所以周末两天只需要设计个前端页面就可以了。网站采用了以下技术：前端：TypeScriptNextJS后端：expressmongodb服务器用的腾讯云，部署项目使用nginx和pm2。我的个人网站地址为pengfeixc，也欢迎大家访问。如果你也想写网站，但是不知道怎么出发，可以给我留言咨询我。
2021-09-16 11:33:32
401
原创 一套完整的CSS入门教程
最近花了点时间，整理了一下之前的CSS博客文章，完成了这个CSS教程。也为我的个人网站，增加了一个教程模块。教程地址：请点击这里。该教程是一套完整的CSS入门教程，看了绝对不会吃亏，不会上当☺。我的个人网站也欢迎大家光临，你有任何问题都可以向我咨询，可以在我的文章下方留言，或者给我发邮件。...
2021-09-09 17:15:42
857
原创 我眼中的BabelJS
我眼中的BabelJS虽然我去年才正式转前端工作，但是接触前端算是比较早的，早在2013年就在学校学习了HTML、CSS和JS。那时候对编程还不够熟练，只能利用html、css、js文件完成一些比较简单的页面。那时候的前端因为不像现在这么火，所以在学校的教学重心也不在前端上面。一.问题随着前端的发展，web开发者在处理JavaScript时都面临一个难题。因为各个浏览器对ECMAScript标准的实现不统一。导致开发者在写代码的时候，必须确保他们的代码（例如一些Dom API）可以在各个主流浏览器中运
2021-08-30 17:17:31
225
原创 【css要点总结】015 阴影box-shadow
阴影文章中的demo无法实时预览，可以在这里获得更佳的阅读体验。css提供了多种方式可以为元素或者文字添加不同的阴影效果。通过本节内容，你将学会如何使用这些方式，知道它们各自的用途。一.box-shadowbox-shadow是比较常用的一个属性，可以为元素边框周围添加一层阴影效果。.ele { box-shadow: 5px 5px 20px 5px #000;}box-shadow接受的值，按照从左至右的顺序依次表示：x偏移：水平偏移，正值表示向右偏移，负值表示向左偏移。y
2021-08-20 17:15:47
1238
原创 【css要点总结】014 border
边框文章中codepen例子无法实时预览，可以点击这里获得更佳的阅读体验。边框指的是CSS元素盒子的边框。本节内容将说明如何通过css更改边框的尺寸、样式和颜色。在盒模型章节中，讲述了盒模型由四个部分组成：内容区（content box）、内边距（padding box）、边框（border box）和外边距（margin box）。可以通过border属性修改边框（border box）的样式。一.边框属性类型元素的边框可以有多种类型，例如实线、虚线、双线等等。可以通过border-styl
2021-08-19 16:32:15
293
原创 【css要点总结】013 伪元素
伪元素文章中的codepen deom无法实时预览，点击这里可以获得更好的阅读体验。伪元素的作用是在不添加任何html代码的情况下可以拥有添加额外的元素的功能，或者是指定某个目标元素。你可以在本节学习伪元素的相关知识。如果你的上司安排给你一个任务，将一篇文章的每个段落的首字母变大，你将如何实现这个功能呢？幸运的是，css恰好提供了这个功能。你可以使用::first-letter实现这个需求。p::first-letter { color: blue; float: left;
2021-08-18 15:54:44
413
原创 【css要点总结】012 css间距
css间距本节深入研究如何更好的调整元素之间的间距（margin和padding）。文章中deom无法实时预览，可以在这里获得更好的阅读体验。first，假设有三个box，从上往下堆叠在一起。现在你想在它们之前添加一个间距，你有几种方式处理这个问题呢？margin属性也许正好能满足你现在的要求，但是它可能会添加了额外的边距，超出了你的预期。例如，你如何调整边距正好处在这些元素的之间？可能gap属性更适合这种情况。调整元素的间距有很多方式，每种方式都有它们的优点和使用场景。一.HTML间距HTM
2021-08-17 14:50:39
4165
原创 【css要点总结】011 逻辑属性
css逻辑属性文章中demo无法实时预览，可以在这里获得更好的阅读体验。本节，将讨论css中的一些逻辑属性。一.块流（Block flow）**块流（Block flow）**指的是块排列的方向。例如有两个段落，块流动的方向就是从第一个块到第二个块。在英文文档中，块流动方向是从上到下。下一个段落在上一个段落的下方。二.内联流（Inline flow）内联流的方向就是一行文本的书写方向（页面渲染一行文字的方向）。在英文文档中内内联流的方向是从左至右。如果你将网页页面语言更改为Arabic（&l
2021-08-16 17:19:01
1326
原创 博客自动生成目录
博客自动生成目录本篇文章讲述为博客文章添加自动生成目录的功能。讲述功能之前，我先说下我的博客文章从编写到发布展现给读者的大致过程。我的文章都是在本地用markdown语法编写的，待文章写完后，就直接从网站管理后台上传至服务器，这时读者就可以在我的网站看到我刚发布的文章了。当读者点击某一篇文章时，浏览器会发送一个请求，请求这篇文章获得文章的信息（包括markdown内容），请求成功后，markdown会被转换成html格式（这个转换我用的是Showdown.js库完成的），有了html代码，就可以直接在
2021-08-11 13:29:08
551
原创 最全面的CSS元素居中教程
最全面的CSS元素居中教程文章中demo案例无法实时预览效果，可以在这里获得更好的阅读体验。作为一名web开发者，你应该经常会遇到居中一个元素的场景，通常你会觉得居中一个元素会很困难。为什么一个简单的居中会如此困哪呢？我认为应该是需要居中的场景可能有很多，而每种场景的居中方式也不一样，所以造成了我们面临某个居中需求时，不知道采用什么方式去解决问题。本节内容，我将各个场景细分，讨论每种场景的可用的居中方式。一.水平居中内联元素内联元素，即inline或者inline-*的元素。居中一个内联元素可以
2021-08-10 14:15:39
266
转载 【css要点总结】010 grid布局
CSS Grid 网格布局教程本文转自阮一峰老师的grid布局教程文章。文章同时发布于：个人网站作者：阮一峰日期：2019年3月25日一.概述网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex
2021-08-09 14:23:52
338
转载 【css要点总结】009 flex布局
Flex 布局教程：语法篇本文转自阮一峰老师的flex教程文章。文章同时发布于个人网站。作者：阮一峰日期：2015年7月10日网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，
2021-08-09 14:08:06
139
原创 【css要点总结】008 布局
布局文章中codepen demo无法实时预览，可以在这里获得更好的阅读体验。当你构建一个组件或者页面时，有多种布局方式可供选择，本节内容是各种布局的一个概览。假设你是一个开发者，此时一个设计专业的同事递给你一份新的网站设计稿让你开发。这份设计稿有很多有趣的布局和组件，有二维布局，也有非常灵活可流动的布局。你怎么去选择最好的css布局方式呢？CSS为我们提供了多种布局方式，有水平轴布局，垂直轴布局或者水平和竖直混合布局。选择一个正确的布局方式往往很困难，通常你需要多个布局方式去解决问题。为了解决这些
2021-08-07 13:42:15
199
原创 css filter属性详解
css filter属性详解文章中codepen例子，无法实时预览，可以在这里获得更好阅读体验。最近琢磨着把网站主题色更改一下，看到了一篇文章Dark Mode in One Line of Code，作者讲述了如何用一句代码将网站主题色更改成相反色，这样网站就可以拥有有白天模式和黑夜模式了。html { filter: invert(1);}使用上面的代码，可以很方便的将页面颜色反转，达到黑夜模式的效果。但是我并不推荐以这种方式去给网站增加黑夜模式，因为这句代码会将页面中的图片的像素颜
2021-08-06 11:03:28
1978
原创 我的个人网站更新了！！
网站更新这段时间，我花了点时间更新了下网站。主要更新了博客前端和管理中心，还抽空写了个MINICODE。个人网站最开始写这个网站用的是ReactJS，在网站上线后，内心还是比较激动的，心想自己太牛逼了，完全靠自己撸了一个网站，网站前端、后台、后端服务以及部署都是一点一点琢磨出来的。可是没过多久，当我研究seo的时候，发现ReactJs写的网站（动态页面）对SEO并不是很友好。所以我就琢磨着重写，幸运的是有一个基于React的NextJS框架，NextJs是服务端渲染的框架，相比较react，它很适合
2021-08-05 17:13:24
251
原创 【TypeScript】常用内置泛型
TypeScript中内置的泛型文章同时发布于：个人网站。TypeScript提供了一些比较实用的泛型类型，但是我们常常会忽略它们。本节我们将一起看看这些泛型。泛型Partial<Type>从一个类型，构建一个新的类型，新的类型所有的属性都来自原类型，并且新类型所有属性都是可选的。interface Todo { title: string; description: string;}type PartialTodo = Partial<Todo>;
2021-08-04 20:22:31
586
原创 正则表达式
正则表达式文章同时发布于：个人网站。本文介绍正则表达式中一些常用的语法。一.普通字符普通字符匹配即，一般文本编辑器，或者windows记事本支持的字符匹配，可以匹配单个字符，也可以匹配多个连续字符匹配。示例中斜杠中间的字符串表示需要匹配的正则表达式。上面的代码表示匹配Text字符串。使用连续字符串时，也支持空格匹配。二.特殊字符正则表达式提供了一些特殊字符：\ | ^ $ . ? * + ( ) [ {，来增强字符串匹配的功能。1.\\表示转义。如果想要匹配文本中的\ | ^ $ .
2021-08-04 10:49:02
659
CAD AutoList编程
2019-03-07
.Net CAD开发教程
2019-03-05
xml高级编程2（主页可下载其余部分）
2019-02-27
xml高级编程1（主页可下载剩余章节）
2019-02-27
C++相关书籍:C++prime, C++templates,effective C++,think in C++,Qt5,widows 程序设计。
2018-03-14
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人