微前端系列分为 上/下 两篇，本文为 上篇 主要还是了解微前端的由来、概念、作用等，以及基于已有的微前端框架进行实践，并了解微前端的核心功能所在，而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理 中主要就是通过自定义实现一个微前端框架来加深理解。

假设我们正在开发一个可视化拖拽的搭建平台，可以拖拽生成工作台或可视化大屏，或者直接就是开发一个大屏，首先必须要考虑的一个问题就是页面如何适应屏幕，因为我们在搭建或开发时一般都会基于一个固定的宽高，但是实际的屏幕可能大小不一，接下来我们就尝试几种简...

原文很有有条理，先从 css-in-js 优点说起，再转而谈到缺点，说明了 css-in-js 这个新事物拥有明显的优点与缺点；然后从性能问题作为切入点，说明自己所在的公司为什么不得不抛弃 css-in-js；最后告诉读者目前自己的解决方案是 css-modules。

Zod 是一个以 TypeScript 为首的模式声明和验证库 ，弥补了 TypeScript 无法在运行时进行校验的问题Zod 既可以用在服务端也可以运行在客户端，以保障 Web Apps 的类型安全接下来会用十个有趣的例子，带你快速入门 Zod，体会 Zod 的强大和便利 ～ 感谢 Matt Pocock 提...

我们最近使用CSS mask属性创建花哨的边框，本文将使用CSS mask和clip-path来切元素的四个角！使用多种技巧可以从任何元素的角切割不同的形状。在本文中，我们将考虑创建独特角落形状的现代技术，同时尝试使用可重用代码，该代码允许我们仅通过调整变量即可产生不同的...

欢迎关注我的公众号：前端侦探聊一聊关于transform的一些事以及复杂属性的处理方式一、transform 很容易被占用众所周知，CSS 中的transform是一个包含很多值的属性，例如 {代码...} 但是，这并不是简写，而是就该这么写，这一点和background不一样 {代码...} 分开写...

背景某日，群友们在群里抛出这样一个问题，如何使用 CSS 实现如下的布局：在 CSS 世界中，如果只是下述这种效果，还是非常容易实现的：一旦涉及到圆角或者波浪效果，难度就会提升很多。实现这种连续平滑的曲线其实是比较麻烦的，当然，也不是完全没有办法。本文，就...

现在互联网的就业环境，大家都在感受着一股寒意。也不知道从什么时候开始，身边悲观的声音越来越多了。如果再给你一次机会，你还会选择互联网吗？回答这个问题之前，我想跟大家聊聊一个我朋友的故事。他从学渣到大厂程序员，百万粉丝博主，到换行换岗，职场受挫，又...

过去数年间，在企业数字化转型的大趋势下，云原生，凭借其敏捷、弹性、平滑的特征，不仅帮助大量企业实现降本增效，也大幅提升了开发过程中的生产力，成为当下最主流的技术发展方向之一。不过，对于开发者而言，如何借助“真正的云原生”提升效率、降低开支，充分享受...

其实不仅仅是上面的屏幕宽度媒体查询，在 CSS 中，存在大量的以 @ 符号开头的规则。称之为 @规则(at-rule)。本文就将介绍一下除去媒体查询之外，其他有意思的且在未来会越来越重要的 @规则 规则。

欢迎关注我的公众号：前端侦探介绍两个和滚动定位相关的 CSS 属性：scroll-padding和 scroll-margin在平时开发中，经常会碰到需要快速定位的问题，比如常见的锚点定位 {代码...} 这样，在点击a标签时会自动定位到与之相对应的内容上，如下但是，这种通过锚点触发的定...

CSS 节省了大量的工作；样式可以通过定义保存在外部.css 文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。

在 CSS 中，渐变（Gradient）可谓是最为强大的一个属性之一。但是，经常有同学在使用渐变的过程中会遇到渐变图形产生的锯齿问题。何为渐变锯齿？那么，什么是渐变图形产生的锯齿呢？简单的一个 DEMO： {代码...} {代码...} 效果如下：其实，锯齿感已经非常明显了，我...

欢迎关注我的公众号：前端侦探Ant-design 中有一个这样的头像组件，当字符串较长时，字体大小可以根据头像宽度自动调整，效果如下当然，这里是通过JS根据字符数量自动缩放文本实现的而现在，仅仅通过 CSS也能达到类似的效果，如下一起看看吧你也可以提前访问线上 dem...

微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

background-attachment 的作用是设置背景图像随着页面滚动的时候固定，即使一个元素有滚动机制，背景也不会随着元素的内容而滚动，它的值有以下三个：

每年的苹果新产品发布，其官网都会配套更新相应的单页滚动产品介绍页。其中的动画特效都非常有意思，今年 iPhone 14 Pro 的介绍页不例外。最近，刚好有朋友问到，其对官网的一段文字特效特别感兴趣，看适用简单却不知从何下手，我们来看看：整个动画大致是，随着页面...

随着前端业务的不断发展，前端对设计稿的还原程度也成为了影响用户对产品体验的一个关键指标，作为最靠近用户侧的研发，前端工程师通常需要和设计师同学通力配合来提升用户体验。其中，设计走查是设计同学最常见的测试前端同学是否完美还原了自己设计理念的方式，本...

大家好，我卡颂。近几年，前端领域出现了很多新框架，比如Svelte、 Solid.js、Astro、Qwik等。伴随他们出现的，还有很多高大上的新概念 —— 运行时/编译时框架、Islands架构、Selective Hydration......这些概念的本质，就是通过各种方式，让页面更快。这里的快主要包...