- 博客(119)
- 收藏
- 关注
RSS订阅原创 技术博客的内容形式发展趋势
你平时都在什么平台写博客？你写博客时的编辑器是什么？依我观察，现在的博客形式无外乎以下几种：本地编辑器书写，Hexo、Hugo、Vitepress 等部署Notion、语雀和飞书等工具记录和发布WordPress 等开源网站程序搭建，在线书写和发布Github 仓库或 Page掘金、知乎、CSDN等在线平台记录不管平台或工具是什么？它们或是因为有良好的撰写体验，或是易于在线发布和传播，抑或对搜索引...
2024-05-31 08:02:04
755
原创 程序员的底层思维与能力培养
封面图由工具 https://spacexcode.com/coverview 生成在程序员这个行业跌跌撞撞也已经快十年了，越来越觉得要想在程序员这条路上走的更远更久，以下的这几种能力不能忽视，需要保持持久的恒心与毅力着重地培养起来。英文能力算法设计与审美创作为什么是这几种能力，我们深知越重要且对我们影响越深远的东西都非一日之功，它们有的是习惯，有的是思维，都在潜移默化地不断改变着我们。而往往这也...
2024-03-11 08:30:38
416
原创 如何使用数据可视化库 D3 绘制折线统计图
如题，如何使用数据可视化库 D3 绘制折线统计图？这篇文章将通过实例来讲解如何一步一步绘制下面这样一个折线统计图，并带有鼠标悬浮移动的文字显示效果。首先，我们来看下什么是 d3？移步官网：https://d3js.orgD3（或D3.js）是一个用于可视化数据的免费开源JavaScript库。其基于web标准的低级别方法在创作动态、数据驱动的图形方面提供了无与伦比的灵活性。十多年来，D3为开创性...
2024-03-02 21:13:14
923
原创 Docusaurus 文档侧边栏增加 New 标识
在使用 Docusaurus 搭建文档站点的时候，我们经常要给某个侧边栏菜单增加一些醒目的标识，比如针对新创建的文档给它一个 New 的标识，以提醒过来看文档的用户这是一个新增加项或者新特性（阅读的时候不要遗漏）。然而这个功能是 Docusaurus 本身没有的，但是它向我们提供了定制改造的支持。就是这个 Swizzling 特性。有人可能还不太认识这个单词，看下它的翻译：说白了它的作用就是支持...
2024-01-30 23:00:00
1029
原创 网站接入 Giscus 评论功能，显示评论数
纯静态网站或博客，由于没有数据存储功能，经常借助第三方的评论系统以插件的方式集成进来，而又以 Github 的 Discussions[1]和 Issues[2] 功能实现的居多。giscus[3] - 可借助组件库[4]在 React、Vue 和 Svelte 中使用，支持多种语言gitalk[5] - 基于 Github Issue 和 Preact 开发的评论插件utterances[6] ...
2024-01-22 08:03:06
1069
原创 一周时间，开发了一款封面图生成工具
介绍这是一款封面图的制作工具，根据简单的配置即可生成一张好看的封面图，目前已有七款主题可以选择。做这个工具的初衷来自平时写文章，都为封面图发愁，去图片 网站上搜索很难找到满意的，而且当你要的图如果要搭配上文章的标题，使用 Photoshop 等软件操作成本太大。为此突然来了灵感，何不自己开发一个在线的工具直接生成。开发前期构思一款工具型的软件，界面一定要简洁，操作方面。所以在布局上没有必要占满整个...
2024-01-20 10:04:20
1013
原创 爆改 Docusaurus，给博客文章页面增加了几个功能
一直认为 Docusaurus[1] 默认的博客文章页面太过单调，可能对于只是在网上找一地方单纯记录文字的人来说已经够了。但是我是把它打造成一个用户体验很棒的知识分享产品来打造。首先我们来看看一个好的博客或者也可以扩大点范围叫 Web 信息资讯类产品都有哪些功能？社交平台转发分享点赞，鼓励评论互动快速复制文章链接二维码扫描手机端阅读还有一个我觉得很好的最近几年才在各大产品频繁出现的文字的收听功能，...
2024-01-11 08:02:00
964
原创 CSS 实现风吹动树叶的动画
如题，要实现树叶在风中摇摆的动画，首先准备主体：树叶。这里准备了两张矢量的高清版 SVG 格式的不同种类的树叶。首先我们使用img标签来在网页中显示树叶，然后给它一个名为leaf的类，好给它附加样式。<imgclass="leaf"src="/blog/virtual_safari_leaf.svg"alt="Leaf"/>接下来就是编写 CSS 动画代码，这里利用了...
2024-01-09 10:15:42
805
原创 2023年度总结 - 职业生涯第一个十年
2023年只剩下最后一周，又到了一年一度该做年末总结的时候了。回想起去年，还有人专门建立了一个关于年度总结文章汇总的仓库。读了很多篇别人写的，给了我很多的触动和感想。这里的每篇文章都是关于某个人这一整年的生活和工作的轨迹啊。即使你这一年过的再平凡，也能从别人的视角窥见一种完全不一样的生活图景。仓库的地址：https://github.com/saveweb/review-2022，该仓库接受投稿。...
2024-01-08 09:20:20
882
原创 关于文字渐变的几种效果
文字渐变色 对于色彩比较丰富的一些网站，经常会出现文字渐变的效果，比如 Vue 官网 “渐进式 JavaScript 框架” 中的 “渐进式”，就是使用了如下的渐变效果。以上网格背景实现参考：CSS 实现网格背景[1]它的实现很简单，基本就三步：设置文字颜色透明然后设置背景颜色为线性渐变最后设置背景被裁剪成文字的前景色 background-clip.gradient-text{colo...
2024-01-07 14:32:56
505
原创 Windows 平台好用的截图软件 FastStone Capture
FastStone Capture 可以毫不夸张地说是 Windows 平台最好用的屏幕截图软件。与其说是截图软件，不如说是囊括屏幕录制、滚动截图、高清长图、图片编辑、图片转 PDF 格式、视频转 Gif、屏幕取色等功能的图片处理软件界的瑞士军刀。中文网站[1]下载地址[2]下载安装后试用版免费试用30天，需要购买注册码，我就是通过网上别人分享的。打开软件，出现如下缩小的简洁的悬浮窗口这里来说说我...
2024-01-05 20:23:02
472
原创 探讨便当网格布局
当你在浏览网页的时候，您可能经常会遇到这样一种类型的布局。它被称为便当网格布局，这种布局的灵感来源于日本的传统便当盒子 ????。英文名为 Bento ，所以又叫 Bento Grid。Bento 网格用途广泛，非常适合显示图像、文本、混合媒体等各种内容。它们以紧凑且有组织的方式展示大量内容，使您的网页或应用程序界面看起来干净清爽且能快速抓住人的眼球。这种设计的趋势被认为可能最早来源于 Windows ...
2023-12-11 08:06:52
222
原创 能力提升
思维模式纠正反馈循环纠正反馈循环是一种思维方法，指的是在做任何事情的过程中，不断地检查自己的行为和结果，发现问题并及时改正，从而提高效率和质量。纠正反馈循环的要点有以下几个：明确目标和标准，知道自己想要达到什么样的效果。实施行动计划，按照预定的步骤去执行。评估结果和反馈，检查自己的行为是否符合目标和标准，收集别人对自己的评价和建议。处理问题和改进，根据评估和反馈，找出自己的不足和错误，制定改进措施...
2023-11-30 10:23:07
480
原创 用纯 CSS 实现网格背景
是不是在日常开发中经常遇到实现网格的需求，网格通常对网页中展示的元素能起到很好的定位和对齐作用。这里介绍如何只通过 CSS 来实现这个需求？使用背景图这里我们的背景图使用 SVG 来创建，首先，创建绘出一个正方形，填充白色；然后通过矩形实现垂直和水平的线条，进而分别对它们进行定位居中。<svgxmlns='http://www.w3.org/2000/svg'width='40'hei...
2023-11-29 08:04:04
1158
原创 别找了！前端那些好用的网站都在这里了！
一、渐变神器 GradientGradient by ShapeFactory | Chromatic Gradient Generator[1]Gradient 是一款网页渐变设计工具，可以帮助用户轻松创建漂亮的渐变颜色样式，并将其应用到网页、APP 等设计项目中。二、两款阴影工具在线网站1、lingdaima 在线阴影创建：在线创建可视化 CSS阴影效果神器[2]lingdaima 是一款在线...
2023-11-13 08:02:54
161
原创 当 Next.js 遇到 Wordpress 会发生什么？
Wordpress 作为一款小型的内容管理系统，受到很多站长的欢迎，特别是作为个人博客，丰富的插件和主题提供了更多的定制和自由度。自从前后端分离的开发模式兴起之后，Wordpress 又被作为数据存储的后端服务提供接口给第三方的前端页面使用，得益于自身提供的 REST API 功能，在后台设置中可自行开启。还有开发者通过插件的形式进行了更多功能的拓展，开发了博客小程序、商城小程序、社区小程序等。花...
2023-11-04 10:29:25
244
原创 作为十年前端开发的我都用了哪些工具？
好的工具可以让你工作的效率翻倍，同时开发中优先使用已有的开源方案会让你的项目运行的更稳定。在这里一定能找到令你满意的一款工具。????开发工具1. RunJSJavaScript 运行器的桌面端工具，支持 Windows、macOS、Linux 等主流平台。一边写代码一边看运行效果。还可以导入已发布的包。官网：https://runjs.app2. Javascript Playground网页版在线 ...
2023-11-02 09:43:29
113
原创 Next、Nuxt、Nest 这些名称你分得清吗
前端的技术框架层出不穷，各种生态衍生的库更是多到让人眼花缭乱，光是看着这些名字就一时让人分不清谁是干什么的。这与 JavaScript 这门语言的广泛的应用有关，由它衍生出的运行时环境就有 Node.js 和各种浏览器的内核例如：Chrome V8，然后随着各种运行时环境中发展出来的应用场景衍生出来的技术框架。有专门应用于服务端的和客户端的技术，同时也有支持服务端渲染的。基本上前端框架就是围绕着...
2023-11-01 10:15:10
832
原创 学会用数据说话，我的网站统计
我的站点从搭建之日就接入了统计工具，为什么我一直很在意网站数据的统计????？因为我确确实实把自己的网站当产品在做，我需要关注网站每天的受访情况和当前访问用户的在网页上的一些 行为来作为反馈，来验证自己的文章和作品在网上产生的关注度和影响力。有人可能会说，你写个博客为什么要那么功利心？我觉得做凡事都要有个目的性，不达目的不罢休，这样你才能获得长久的动力。有功利心也没什么不好，至少在你成功之前，你需要通过...
2023-10-25 08:22:31
58
原创 Docusaurus 搭建站点不完全指南
介绍它是什么？Docusaurus 是一个基于 React 构建的帮助快速生成静态网站的工具，支持将 MDX 格式编写的文档生成静态 HTML 文件，同时还支持在 Markdown 中嵌入 React 组件。什么情况下你能用到它？使用 markdown 语法书写静态博客；构建一个文档类的站点；一个带有新闻功能和静态页面为主的官方网站；建立一个实时代码演示效果的教程类的网站；集成搜索的个人知识库。如...
2023-10-24 08:13:06
437
原创 【小程序】实现一个定制的音乐播放器
应用地址：https://spacexcode.com/player 介绍 这是为自己制作的一个在线 Web 版的音乐播放器。众所周知，现在市面上的所有的音乐平台都是会员制。而免费的资源却分散在网络上的各个角落，为此，我收集了自己喜欢的音乐，放到自己的服务器上，并制作了这样一个专属歌单的简单的音乐播放器。 实现讲解 该播放器虽然简单，但也是五脏俱全，该有的功能一个都没少。比如常见的音乐播放器，我...
2023-10-20 11:00:24
625
原创 A 标签有趣的样式
在网上看到很多对 <a> 标签样式的设计，觉得很有趣，做了个实现原理和 demo 的整理收集。浏览器默认，Hover 状态有下划线实现原理A 标签在浏览器默认样式下是有下划线的，可以通过 text-decoration 属性进行设置，当值为 none 时隐藏。常见网站的处理都是隐藏它，但为了突出它是一个超链接，会给它一个区别其它文本的颜色。样式代码a{color:#383c...
2023-10-19 10:47:25
679
原创 漂亮的弧形分隔线原来是这样实现的
应用地址：https://spacexcode.com/shapedivider[1]介绍在网页设计师的眼里不应该只有直线，那网页看起来实在太糟糕了！当我们要在区块之间增加一条有弧度的曲线分隔线的时候，我们能想到的实现方式是什么？上面的案例为我们提供了一个灵感，通过绘制一定路径的 SVG 并且设置背景色再重合在某个网页元素上而形成一个整体。实现详解就是下面的这样一个 SVG 图片，通过设置 wid...
2023-10-18 10:40:32
92
原创 如何实现这样一款代码图片生成器
这篇文章我来讲解下如何实现下面这样一个代码编辑器导出图片的工具。应用地址：https://spacexcode.com/codeimage[1] 介绍 要学好一门技术，最好的方式就是实践。上面这样一个代码图片生成器，就是当初为了学习 React 技术开发，特地找的一个功能不是很复杂，但是涉及的技术点又不至于太单一，于是找了这样一个工具型的项目（UI 参照 ray.so[2]），代码从零开始实现来...
2023-10-16 08:58:00
558
原创 双节前把我的网站重构了一遍
赶在中秋国庆假期前，终于将我的网站（https://spacexcode.com/[1]）结构定好了，如之前所说，这个网站的定位就是作为自己的前端知识沉淀。内容大致从：前端涉及的基础知识分类汇总（知识库），实战类的代码演练（代码片段），特定技术的深度使用总结（专题），零散知识点的领悟总结（博客）这四个方面展开。还有最重要的一点就是这个网站不仅仅是给自己看的，我希望它像一个产品，面向的是整个互联...
2023-10-14 10:32:14
476
原创 Github 上很火的开源网页图标
Deviconhttps://devicon.dev一系列关于编程语言、设计和开发工具的图标，提供了字体格式和 SVG 代码可以直接应用在你的项目中VSCode Iconshttps://github.com/microsoft/vscode-icons#readme收藏了 Visual Studio Code 软件上的所有的图标Weather Iconshttps://github.com/er...
2023-09-23 23:35:20
1034
原创 最近在干什么
不知不觉这个月要过去一大半了，说好的一个月更新一两篇博客又要食言了。就来随便聊聊最近在干的事吧。以图说话，作为程序员还有什么比 Git 提交记录更好说明你最近工作状态的呢。当然这里所有的提交记录仅仅来自一个 Repository (库) ，就是我的另一个编程方面的知识总结站点 https://spacexcode.com/。前面就说过，今年的主要经历会放在这个站点上。这个站点是用 Meta 公司开...
2023-08-24 08:00:18
92
原创 创造者的奢侈
这篇标题的由来是今天看到 MacTalk 公众号的写的关于 Vim 文本编辑器作者 Bram Moolenaar 因病离世的文章。里面讲到 Bram Moolenaar 是一个对技术纯粹热爱并且特别善良的一个人。为了将自己所有的精力 All in 在工作和自己创造的开源软件上，他直到去世都是一个人而没有选择另一半组建家庭。而他的善良体现在用自己的开源软件（Vim）募集捐款捐赠给乌干达的贫困儿童帮...
2023-08-09 17:29:28
63
原创 最近做了两款小工具
最近连着上线了两款在线小工具，乘着热度（是学习的热度，当然最近的温度也是很高，南方到了一年最难熬的湿热天气）抓紧熟练 React 开发，巩固学习的知识点。同时也是为了不断丰富站点的内容，把网站的流量搞上去，早点通过 Google Ads 广告的申请。下面就来介绍下这两款工具： 优雅的分隔线生成器 地址[1]网页中的信息区块之间为了避免单调的直线分隔或者空白间距，设计师经常会设计一些过度效果，而波...
2023-07-10 08:01:05
76
原创 要做一个知识分享站，放到别人收藏夹的那种
最近一有时间就更新“spacexcode.com”站点，这么多年做前端下来，沉淀的有质量的输出不多。想了很久，真正下定了决心，要做一个前端的知识分享站点，能放到别人收藏夹的那种（可不是吃灰哦）。目前是这样规划的，因为站点是采用 Docusaurus 搭建的，主要功能形态有文档、博客、页面三种，文档专注某一类的知识点的串联与汇总，博客分享一些小的知识点有深度的见解与分析。页面则开发一些含功能性的演示...
2023-07-04 08:00:06
64
原创 如何让自己的前端知识更全面？
我们很熟悉在 template 模板中使用自定义指令的方式，直接通过v-指令名，而 Vue 提供了和两个接口，前者可以获取到自定义的指令添加到第二个接口的回调参数中我们如何在 Vue 应用中自定义在 html 中可以使用的元素，可以分三步完成：第一步：通过 Vue 提供的接口import {第三步：在 HTML 结构中直接使用该自定义元素
2023-06-15 11:47:46
466
原创 那些可以当源码学习的优质开源项目分享
本篇收集的是自己平时逛 Github 发现的一些优质的开源项目，为什么收集它？借助优质的开源项目，我们不仅可以拿来二次开发快速实现想要的功能，而且还可以学习里面优秀的代码，提高我们的编程能力。读（拆解）源码一直都是被各程序员大佬极力推荐的一种编程的学习方式。PicXPicX 是一款基于 GitHub API 开发的图床工具，提供图片上传托管、生成图片链接和常用图片工具箱服务。仓库地址：https:...
2023-06-15 08:01:06
269
原创 关于 Vue 的使用中的一些注意事项和技巧
我们很熟悉在 template 模板中使用自定义指令的方式，直接通过v-指令名，而 Vue 提供了和两个接口，前者可以获取到自定义的指令添加到第二个接口的回调参数中我们如何在 Vue 应用中自定义在 html 中可以使用的元素，可以分三步完成：第一步：通过 Vue 提供的接口import {第三步：在 HTML 结构中直接使用该自定义元素
2023-04-14 10:07:09
354
原创 从原理讲解如何实现文章中图片的放大缩小
在开发中经常遇到需要将文章详情中的图片做放大预览处理，如上动图所示。这里以 Vue 框架为例，讲解下简单的实现过程。注意：为了视觉效果，当鼠标移动到图片上的时候显示放大效果，对文章中的 IMG 标签设置。组件作为放大图片的呈现载体。将图片设置撑满整个弹窗的内容区。首先我们从接口获取到文章的详情数据，将文章的主题内容（一段富文本）以。添加点击事件，目的是点击放大的图片后再次隐藏。，然后将图片的路径存储在变量中，用于放大显示。放大镜效果，对放大后的图片标签设置相反的。点击事件，然后捕获到点击目标元素是否是。
2023-04-14 10:06:34
176
原创 如何发布自己的 npm 包？
按照提示打开这个网址，输入第2步配置的邮箱，然后登录邮箱点击邮件进行验证即可。后面如果我们需要升级包，改了包的代码，同步更新到包管理平台 npm，需要修改。执行命令后依次输入用户名、密码、邮箱，最终输出如下内容表示登录成功。：包的入口文件，默认根目录的index.js。我们可以登录官网自己账号下查看发布的包是否成功。要唯一，不能和已发布的包重名，你可以到官网（然后我们在包目录中创建示例代码。：版本号，以后更新也要用到。在本地创建包目录，名为。，进入到目录下面执行。中的版本号，还是执行。
2023-04-14 10:05:02
709
原创 彻底了解 npm、cnpm、yarn、pnpm 几种包管理器
随着前端工程化的应用越来越广，插件和包的管理也逐渐衍生出很多的管理器，常见的几种包管理器如：npm、cnpm、yarn、pnpm，那你知道这些管理器之间有哪些区别吗？
2023-04-14 10:03:39
1038
原创 前端 UI 组件库有哪些选择
Vue 3 Element Plus基于 Vue 3，面向设计师和开发者的组件库 。创作者：饿了么团队文档地址：https://element-plus.gitee.io/zh-CN/Ant Design Vueant-design-vue 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践。创作者：开源社区文档地址：https://antdv.com/c...
2023-02-12 10:23:59
169
原创 如何防止水印被恶意删除或者隐藏？
继上篇Vue3 实现网页背景水印功能我们了解了常见的网页水印功能是如何实现的，懂原理的都知道水印是通过在网页中添加代码绘制 DOM 元素覆盖在原有的网页上而来的，一旦你打开浏览器中的元素审查，可以通过删除元素或者在元素的样式上操作属性值，就可以用来临时屏蔽水印。为了防止作弊，我们可以利用接口 MutationObserver 对DOM元素进行监听。如果你对监听的元素进行样式属性的设置，或者...
2022-10-31 08:30:23
1171
原创 关于 SSR、CSR、SSG 网页渲染技术的解关于 SSR、CSR、SSG 网页渲染技术的解读
之前只听过 SSR 和 CSR 这两个概念，分别指网页是由服务端渲染还是客户端渲染后由浏览器生成相应页面的技术。最原始的网页一直是客户端通过 JavaScript 请求数据并操作 DOM 元素后生成最终的 DOM 树再由浏览器的渲染进程进行绘制，后来为了优化网页的加载速度，将生成页面元素的过程由服务端进行，从而减轻客户端的工作负荷。我们先来回顾下网页的渲染详细过程：浏览器通过请求得到一个 HTML...
2022-10-26 23:13:17
1356
原创 使用 Element 组件搭建在线学习的课程卡片设计
假如我们要做一个在线课程学习的系统，其中我们需要做的一个功能就是课程信息流的一个展示，以等高卡片列表或者瀑布流的方式呈现。首先我们来罗列下这个卡片内应该包括哪些信息点：课程名称课程简介分类信息课程评分等级课程文件课时观看学习人次学习进度这是我们能想到的一些关键信息，考虑到必要性，剔除了一些其它的非必要的信息，需要用户点击进入详情页才能看到。作为一个前端程序员，在没有产品和设计的情况下，如何通过我们...
2022-08-16 16:20:19
545
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人