跳到主要内容

· 阅读需 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 ,被两者的学习资料搞混淆了。

· 阅读需 6 分钟
编程范儿

我的站点从搭建之日就接入了统计工具,为什么我一直很在意网站数据的统计📊?因为我确确实实把自己的网站当产品在做,我需要关注网站每天的受访情况和当前访问用户的在网页上的一些 行为来作为反馈,来验证自己的文章和作品在网上产生的关注度和影响力。

有人可能会说,你写个博客为什么要那么功利心?我觉得做凡事都要有个目的性,不达目的不罢休,这样你才能获得长久的动力。有功利心也没什么不好,至少在你成功之前,你需要通过一些手段 来证明你的能力。不要一开始就那么佛系,觉得我写了就好了,给了自己心理安慰,发布出去然后扔在那里不管了。

· 阅读需 10 分钟
编程范儿

赶在中秋国庆假期前,终于将我的网站(https://spacexcode.com/)结构定好了,如之前所说,这个网站的定位就是作为自己的前端知识沉淀。内容大致从:前端涉及的基础知识分类汇总(知识库), 实战类的代码演练(代码片段),特定技术的深度使用总结(专题),零散知识点的领悟总结(博客)这四个方面展开。还有最重要的一点就是这个网站不仅仅是给自己看的,我希望它像一个产品, 面向的是整个互联网受众,在学习上给大家一点点灵感。

· 阅读需 6 分钟
编程范儿

是不是在日常开发中经常遇到实现网格的需求,网格通常对网页中展示的元素能起到很好的定位和对齐作用。

这里介绍如何只通过 CSS 来实现这个需求?

使用背景图

这里我们的背景图使用 SVG 来创建,首先,创建绘出一个正方形,填充白色;然后通过矩形实现垂直和水平的线条,进而分别对它们进行定位居中。

<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'>
<rect width='40' height='40' fill='#fff'></rect>
<rect x='50%' width='1' height='100%' fill='rgb(203 213 225)'></rect>
<rect y='50%' width='100%' height='1' fill='rgb(203 213 225)'></rect>
</svg>

· 阅读需 3 分钟
编程范儿

今天 Docusaurus v3 的 beta 版本发布了,意味着离正式版本发布不远了。很期待!

关注 Docusaurus 也快小半年了,个人体验特别好,是我目前使用过的最好的建站工具了。会一直持续下去。

下面是官方的一些 release 信息,我也没有做特别的解读,简单翻译了下,等正式版出来,我会做个升级,然后分享详细的升级指南和新版本的特性以及功能点。

Docusaurus v3 目前已经至少被3个主要的站点使用:Docusaurus (https://docusaurus.io)、Jest (https://jestjs.io) 和 React - Native (https://reactnative.dev)。

在这个过程中,我们解决了遇到的所有小问题。

现在是时候将 v3 移至 beta 阶段了!