设计

Touching Comments-走心评论，正式发布到Wordpress官方插件平台。通过此插件，可以将那些让你感动的评论标记出来，整理成精选评论。有时候一句不经意的话给当下你一丝温暖和感触，希望能通过这个插件，将那些让你触动的评论选出来，整理成独立页面，方便以后访问时可以让你重拾当时的心境与温暖。

有时候别人一句评论可能会给当下的你带来一些感触与思考，将这些评论整理出来，时不时的看看或许会有新的感悟，于是制作了基于WordPress完成走心评论。

WordPress响应式博客主题，自适应PC端和手机端，没有花哨的界面，同样也没有复杂的操作与设置，经典耐看，上手非常简单，适合安心写文章的博友。

最近给博客启用了WebP格式图片，如果有WebP格式的图片就展示WebP图片，没有就展示原来的图片。经过比较，最后选择了Images to WebP来实现这个功能。WebP是一种由 Google 开发的现代图像格式，与 PNG 和 JPEG 相比，图像格式能够将文件大小减少30%左右。目前webp可以通过PhotoShop或者Imagine来转换。

WordPress升级到5.9版，在页面head里面被添加了id='global-styles-inline-css'，里面定义了一大段颜色和字体大小样式，看着好像是WordPress的Gutenberg编辑器或者默认主题相关，我自己两个都不用，索性把那大段的样式去掉。

新年快到了，想在博客上面添加一些福字的喜庆元素，同让这些元素能动起来。于是想到了波纹效果，现在使用css3能够轻松实现波纹扩散的动画特效，使用到了CSS动画中的keyframes关键帧。同时配合放大、旋转、翻转等动作让整体效果更加丰富。

最近将博客上面的小图标都换成了阿里的iconfont字体图标，在替换字体图标的时候我主要体验了Font Awesome和iconfont。本来想使用Font Awesome，它的免费版中有些我想要的图标没有，Pro版虽然多了很多，但是还不全，远没有使用iconfont来的随意，不过Font Awesome搭配了CSS框架，可以更加方便的使用一些css效果，比如：动画、旋转与翻转、组合使用等。总的来说Font Awesome适合快速使用，iconfont适合DIY。

有朋友问我，我博客的logo“威”怎么做的。当然是PhotoShop做的，不过不同的地方使用时用的大小不一样，如果都用PhotoShop去做的话效率有点低，那么使用矢量图进行伸缩同时有能保持清晰度。那么就需要将PS图层转换为AI矢量图。

在我们搭建网站的时候，有时候页面主内容比较长，导致侧边栏显示空白，这个时候，一个智能且流畅的固定侧边栏能够提升用户体验，使用户在浏览长页面时始终保持关键信息的可见性。当用户滚动页面时，侧边栏可以固定在屏幕的一侧，显示如导航菜单、目录、广告或者相关文章等重要信息，同时可以获得更高的点击率。

懒加载或者延迟加载是我们优化前端页面展示常用的手段，网上有很多关于懒加载的js代码，或多或少都不是那么完美，其实从chrome 76之后，支持原生懒加载特性，使用 loading="lazy" 语法就可以实现。

Gravatar头像被墙或者打开缓慢已经是一个老问题了，网上也有很多方法去解决这个问题。通过之前替换secure.gravatar.com的方式使得头像扩大了一倍。从WordPress4.2版开始，引入了scrset，但是原来代码没有考虑这个问题导致的。srcset属性允许作者根据不同分辨率或不同的视窗尺寸提多个不同分辨图像。

在网页设计过程中经常会有一些容易被我们忽略的细节，大部分主流的浏览器会为我们提供一些形如自动完成、自动更正、自动大写、拼写检查、语音输入等人性化特性，但是并不是任何场景下我们都需要这些特性，比如对于电子邮件地址的输入，我们就不需要自动更正、自动大写、拼写检查等特性，而对于用户登录表单，为安全考虑则不希望自动完成的特性存在，今天要介绍的就是这些特性以及如何禁止这些特性的存在。