2023年大年初一
今天是大年初一，2023年的第一天。早上起床后老婆做了汤圆和水饺，我们和父亲一人一碗汤圆，然后一大盘干水饺大家当菜分着吃。简单吃完早饭后，我们带父亲去附近的傅雷中学看了下，然后绕路绿地缤纷广场去了周浦万达。在万达，带父亲去吃了莎莉亚。
CSS
我们需要一份更自由的收入来源
当我们承认自己是个普通人时，工作并不能带给我们足够的安全感。经济危机、行业下行、疫情冲击、企业融资失败，等等各种原因都可能导致我们丢掉手里的工作。如果你能力不错，对工资要求又不高，你会比较好找工作，但是这一般不会是常态，因为很少有人会愿意长期接受一份低于市场行情的薪资待遇——当你本可以拿更多的钱时你就会不满足于现状。
wordpress接入七牛云存储和CDN加速
由于博客使用了较多的图片，对首页等页面的加载速度影响较大，对用户体验有一定影响。图片我都会在tinypng等网站上压缩一下再使用。但是对于一些颜色丰富的图片，压缩后大小也比较大。由于个人服务器的带宽有限，访问量一多起来就有点捉襟见肘了。于是，最近两天用上了七牛的存储服务和CDN服务。
记博客访问速度异常慢的优化
感觉是远程开发时在服务器上装软件占用硬盘或者软件资深占用运存过多导致的，或者是迁移数据库造成的，但是同时也会觉得阿里云数据库应该不至于这么慢，不然也太拉胯了。今天看了下宝塔面板，发现硬盘空间已经不多了，猜测最近博客访问慢可能主要是由此导致的（并不是）。
网站内容改版中...
如题
读书笔记：我与科学基金
最近看了一本由国家自然科学基金委员会出版的书——《我与科学基金》。这是我在豆瓣上标记已读的第164本书。大部分内容是在地铁通勤的路上看的，也有一小部分内容是在公司午休时间段里和家里看的。
Volta非官方安装指南
一、Volta是干什么的 类似nvm，但是不只是管理node的版本，还可以管理其他一些前端的命令行工具的版本。具体内容可以直接看官网：https://volta.sh/。下面是官网介绍页的一个截图。 二、Volta官方安装方法 就这样： c...
前端入门非典型指南
程序员是一个很宽泛的群体，就软件领域而言，又有web后端开发、web前端/APP开发等不同的细分领域。因为本人对前端开发比较熟悉，这里就前端的入门给一个简单的指南。一名程序员，如果要保持足够的竞争力，是需要学习者本身具有一定的自主学习能力的。所以并本文不打算涉及到很细的东西，只是引出一些点，帮助大家在学习的路上进行摸索。
Vite项目在Centos 7环境下报错Error: spawn xdg-open ENOENT
在IDEA连服务器远程编码时，发现vite项目在执行vite命令会报错。 node:events:504 throw er; // Unhandled 'error' event ^ Error: spawn xdg-open ENOENT...
nvm is not compatible with the npm config "prefix" option
I use Mac. I installed node, and then one day I use nvm. Everything is well when I am using IntelliJ IDEA. But when I us...
CSS @supports特性查询
一、基本介绍 @supports可以指定依赖于浏览器中的一个或多个特定的CSS功能的支持声明。这被称为特性查询。该规则可以放在代码的顶层，也可以嵌套在任何其他条件组规则中。 示例： @supports (display: grid) { d...
CSS calc函数的介绍和使用
一、介绍 calc()这个CSS函数允许在声明CSS属性值时执行一些计算。 /* property: calc(expression) */ width: calc(100% - 80px); 此 calc()函数用一个表达式作为它的参数，...
CSS实现钟表效果
问题：写一段HTML+CSS，实现一个钟，里面有时针、分针、秒针在旋转。
W3C标准盒模型及IE盒模型
如果html文件头部没有有效地声明文件类型的话，IE6、7、8下的盒模型解析情况会跟W3C标准盒模型不一致，我们称之为IE盒模型。由于现在我们写html页面时都会在头部加上html5文档类型声明（<!DOCTYPE html>），所以并不用担心这个问题，知道有这么回事就可以了。 一个元素的IE盒模型也是由margin、border、padding、content四个区块构成的。在IE盒模型里，元素的宽度、高度是content、padding、border三者的合计值。
CSS自定义属性（变量）
:root在html文档里对应的就是html标签选择器，:root伪类和html标签选择器这两个的区别基本上就是前者的优先级更高一些。但是，那些--color是什么东西？ 根据文档https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables，这个叫CSS自定义属性（CSS变量），是具有继承性质的，在:root中定义CSS变量的话，等于是在定义全局变量，在其他具体的选择器（如上述代码中的.u-category-windows）里定义CSS变量等于是在该选择器及其后台选择器这个范围内定义了一个局部变量。
CSS性能：重排、重绘、重组
一、重排和重绘 当HTML树和CSS样式规则拼合成渲染树时，这颗渲染树上的节点已经包含了样式规则（比如宽度、高度、是行内元素还是块级元素等），于是就能计算出他们在页面上的位置，将这些元素根据其位置排列到页面中的过程称之为“排布”。当元素排布...
rem-移动端响应式适配方案
借助rem单位，我们可以实现移动端网页内元素随着屏幕宽度的改变而正相关地改变大小。假设美工提供的设计稿宽度为750px。那么你需要用类似下面这样的代码去动态修改html元素的font-size值，进而影响那些使用rem为单位的元素的大小。
1px像素解决方案
让边框的颜色靠近背景色（通常可以这么做，或者你也可以到打开下面这个地址，设置midpoints中点数为一个大于1的值，点击blend混合按钮后从palette调色板中选取你比较细喜欢的颜色：http://meyerweb.com/eric/tools/color-blend/#FF33FF:::hex），这样人眼看过去就会觉得比较细。但有时候边框颜色和附近的背景色在设计稿上已经定下来了而且二者可能差别还挺大的，这样也没事，你可以用rgba(r, g, b, a)来稍微给边框颜色加一点透明度，一般这点小改动是可以被接受的。
-webkit-overflow-scrolling让iOS下页面滚动如丝般顺滑
现象描述：给html元素设定了overflow: auto;后，当元素内部内容较多时会出现滚动条，这个滚动条在安卓机里滚动很正常，但是在iOS机里就显得很不丝滑了，滑哪停哪（iOS软件内嵌页面和iOS微信客户端内都存在这个现象）。经测试，在该html元素对应样式的overflow: auto;的下面加一句-webkit-overflow-scrolling: touch;即可解决问题。
CSS浮动的清除与块级格式化上下文
一、浮动元素的清除 清除浮动使用clear: left/right/both。业界常用的.clearfix也是这么做的，只不过是把该样式写进了父元素的:after伪元素中，并加了opacity: 0; display: block; hei...
