跳到主要内容

· 阅读需 12 分钟
编程范儿

一直认为 Docusaurus 默认的博客文章页面太过单调,可能对于只是在网上找一地方单纯记录文字的人来说已经够了。但是我是把它打造成一个用户体验很棒的知识分享产品来打造。

首先我们来看看一个好的博客或者也可以扩大点范围叫 Web 信息资讯类产品都有哪些功能?

  • 社交平台转发分享
  • 点赞,鼓励
  • 评论互动
  • 快速复制文章链接
  • 二维码扫描手机端阅读

还有一个我觉得很好的最近几年才在各大产品频繁出现的文字的收听功能,比如微信公众号的“听全文”,国外的 Medium 也有播放音频。好处很多,对于很多不愿意或者不方便看文字的人来说他可以通过另外一条途径 来了解你分享的东西。

· 阅读需 14 分钟
编程范儿

2024 年度进度显示

00 天 00 时 00 分 00 秒

2023年只剩下最后一周,又到了一年一度该做年末总结的时候了。

回想起去年,还有人专门建立了一个关于年度总结文章汇总的仓库。读了很多篇别人写的,给了我很多的触动和感想。这里的每篇文章都是关于某个人这一整年的生活和工作的轨迹啊。 即使你这一年过的再平凡,也能从别人的视角窥见一种完全不一样的生活图景。

仓库的地址:https://github.com/saveweb/review-2022,该仓库接受投稿。

所以想想今年还是下笔了~

· 阅读需 6 分钟
编程范儿

当你在浏览网页的时候,您可能经常会遇到这样一种类型的布局。它被称为便当网格布局,这种布局的灵感来源于日本的传统便当盒子 🍱。英文名为 Bento ,所以又叫 Bento Grid

Bento 网格用途广泛,非常适合显示图像、文本、混合媒体等各种内容。它们以紧凑且有组织的方式展示大量内容,使您的网页或应用程序界面看起来干净清爽且能快速抓住人的眼球。

这种设计的趋势被认为可能最早来源于 Windows 8 和 Metro Design 设计风格。

· 阅读需 3 分钟
编程范儿

文字渐变色

对于色彩比较丰富的一些网站,经常会出现文字渐变的效果,比如 Vue 官网 “渐进式 JavaScript 框架” 中的 “渐进式”,就是使用了如下的渐变效果。

Sample Text

· 阅读需 4 分钟
编程范儿

box-shadowdrop-shadow 都是用于给元素创建阴影的 CSS 属性,但它们之间存在一些区别。

box-shadow 用于在元素的边界框(包括内容、内边距和边框)周围创建阴影效果。可以设置阴影的颜色、模糊半径、水平和垂直偏移量等参数。阴影受到元素的边界框限制, 即使元素的内容或边框超出边界框,阴影也不会超出。以下是一个示例:

box-shadow
box-shadow: 2px 2px 5px #888888;

· 阅读需 4 分钟
编程范儿

现在我的网站代码发布的流程是这样的:

从持续集成的自动化角度看,目前还远远不是最优方案,但是经过慢慢探索,尽量减少开发到发布过程中人为参与的部分,就很满意了。

今天突然想把手动执行 shell 脚本这一步也干掉,我采用的是通过定时任务每隔半小时执行一次脚本,虽然还不能做到精准的推送代码到远程分支就立马触发线上发布,但对于自己的 个人网站项目目前自动化程度也还是可以接受的,没必要搞一大堆高大上的工具来辅助。

· 阅读需 4 分钟
编程范儿

前端的技术框架层出不穷,各种生态衍生的库更是多到让人眼花缭乱,光是看着这些名字就一时让人分不清谁是干什么的。

这与 JavaScript 这门语言的广泛的应用有关,由它衍生出的运行时环境就有 Node.js 和各种浏览器的内核例如:Chrome V8,然后随着各种运行时环境中发展出来的应用场景 衍生出来的技术框架。有专门应用于服务端的和客户端的技术,同时也有支持服务端渲染的。

基本上前端框架就是围绕着 Vue 和 React 两大生态,它们两者互相借鉴,又各具特色和优势。

这不最近我就错把 Nest 当做 Next ,被两者的学习资料搞混淆了。