标签：前端

本文分享了 10 个使用纯 CSS 实现的加载（loading）效果，比如：波纹加载效果、电池加载效果、进度条加载效果、虚线加载效果、斑马线加载效果等，同时提供了效果预览和对应的 CSS 代码，可直接在项目中使用。

一提到前端构建工具，大家一定首先想到 Webpack，它确实是前端构建的老大哥，功能全面、生态繁荣，但还有其他一些前端构建工具，也值得关注。本文将为您简要介绍目前前端主要的构建工具：Parcel、Rollup、Snowpack、Esbuild、SWC 和 Vitejs，这些工具都有其适合的应用场景，让我们一起来看看。

在前端 CSS 中，使用颜色的场景非常多，例如，它们可以作为文字、背景、阴影、表格、边框、链接等属性。我们在 CSS 中使用的大多数颜色都是 Hex 和 RGB，除了这 2 种颜色表示方法外，在 CSS 中，还有很多颜色表示法，本文将详细讲解有关 CSS 中的颜色体系！

本文将为你介绍打印 HTML 页面时用到的相关 CSS 知识和一些重要属性，如 page-break-before、page-break-after、page-break-inside 以及 @page 指令。这些属性可放心使用，它们均得到现代浏览器的支持。

图片，是前端开发中经常接触的对象，也是重要的信息传递方式。如何更好、更灵活地展示图片，是前端开发需要重点考虑的。本文讨论了 picture 和 img 标签之间的区别，以及 picture 标签比 img 标签更好用的原因所在。

在过去，与大多数工程师一样，我认为前端代码的设计水平大多与工程师的能力有直接关系。但随着接手了几个多人协作的大型前端项目，我开始意识到，这种认知对短生命周期的小型项目可能适用，但对真正的大型项目，仅靠提升工程师质量有时并不能直接提升代码的质量。

拖放（drap & drop）在我们平时的工作中，经常遇到。它表示：抓取对象以后拖放到另一个位置。目前，它是 HTML5 标准的一部分。本文将从几个方面学习并实践这个功能。

vue 单文件模板中一般含有三个部分，template，script 和 style。但是在编译后的 js 文件中，我们却没法在代码中直接找到这三部分，这是因为 vue 并非直接使用 template 进行渲染，而是需要把 template 编译成渲染函数，才能渲染。

本文从路由、生命周期、代码解耦、数据层级、HTML 代码、样式、图片等几大方面详细介绍了使用 Vue 开发时应注意的代码规范。本代码规范并非强制要求，而是提供了一种参考，让团队统一代码风格、提升代码可阅读性，降低维护成本。

说起自动化，无论是公司项目还是个人项目，都会用到或者编写一些工具来帮助我们去处理琐碎重复的工作，以节约时间、提升效率。随着前端工程化越来越明显，做前端开发会涉及诸如构建、部署、单元测试等这些开发工作流中重复的事项，本篇文章将介绍如何利用 GitHub 官方提供的 Actions 来完成前端的自动化发布。