提示框组件的实现给我带来的思考和探索

Tooltips大家很多时候也将其称为提示框,另外还有一个视觉上长得和Tooltips的组件,常常称为Popovers(又名弹窗)。很多时候他们在视觉上长得非常类似,但是共交互上却有明显性的差异,特别是在PC端上:Tooltips一般是通过鼠标的悬浮来触发;Popovers一般是通过点击来触,但在移动端上两者都是通过点击来触发,因为移动端上悬浮的交互行为基本是不存在的。不过我们今天要聊的不是他们的交互行为,而是来看看如何以最好的方式来还原他们的视觉效果,并且能适用各种不同的UI风格。

学一点Webpack配置:Webpack的优化

上一篇中花了14小节主要和大家一起探讨了Webpack 4.x的一些基本配置,比如初始化项目,添加各种Loader、React、Typescript、Sass、PostCSS、CSS Modules等配置、图片加载、字体加载以及各种代码检测的能力,比如ESLint的配置、Prettier的配置和StyleLint的配置。在接下来这个部分,主要和大家一起来探讨Webpack 4.x中的一些优化方面的配置。比如开发环境的优化、Webpack自身的优化、文件压缩和依赖监控以及应用分析相关的配置。如果感兴趣的话,欢迎继续往下阅读。

Web技巧(15)

上一期咱们围绕着Web动画展开,其中有的动画对部分用户群体会造成不良的反应,会引起癫痫。为此,为了避免这种现象出现,可以使用条件CSS@media中的prefers-reduced-motion条件来做处理。除此之外,prefers-reduced-motion<picture>元素中还有一些小技巧,可以帮我们做一些其他有意义的事情。这一期,就从这个特性开始讲起。

Web技巧(14)

前段时间在微信群聊了一个动效的话题: 鼠标悬浮的时候,三个区块依次显示;鼠标移开时,三个区块反向依次消失。如果使用CSS的triansition是否可以实现?借此话题,在这一期中就围绕着Web的动效来展开。Web动效不管是从设计到实现都有很多的话题可聊,比如,动画的设计、交互、实现等等。甚至是实现的技术方案或工具。

聊聊CSS的::marker

CSS的::marker是一个伪元素,最早接触时间应该是在四年前。四年前在《试探列表中的::marker》一文中就提到过CSS的::marker伪元素,只不过在当时,该伪元素只是大家探索性的在聊该属性,而时至今日却不同,Firefox 68已经追随Safari11.1对该伪元素支持了。也就是说,该伪元素离我们越来越近了,以后我们可以使用::marker帮我们做更多的处理。简而言之,使用::marker伪元素,可以对列表做一些有趣的事情,在本文中,我们将深入的聊聊该伪元素。

Web技巧(13)

任何一门语言都有自己的小技巧和新特性,比如Web的三大基石HTML、CSS和JavaScript,在各自的社区中总是有同学在不同的时候梳理一些相关的新特性和小技巧。让这些特性更好的服务于社区,尽量的让大家更好的理解和掌握。另外一个目的是,让更多的同学能把这些新特性运用于自己的项目中。在这一期中,将围绕着JavaScript的一些新特性来展开。希望对大家有所帮助。

学一点Webpack配置:基本配置

作为现代Web开发者就需要对Webpack有所了解,哪怕掌握的不够深入,略知皮毛也对我们自己的工作或学习都是有所帮助的。比如说吧,前段时间折腾React环境下的CSS Modules,就是因为自己对Webpack不了解,有些坑踩了无法立刻解决,就算借助互联网,解的也是知半解(而且现在技术更新太快,网上有些教程根本走不通,不踩不知道,一踩只有泪)。正因为这个原因,促使自己去了解Webpack更多的知识。接下来的内容是一些基础,主要会介绍怎么用Webpack来构建自己的开发环境,感兴趣的请继续往下阅读。

Web技巧(12)

这一期中我们将围绕着Web中的font来展开。在现代Web中除了能使用font-family属性给Web应用指定字体之外,还有其他一些用于字体的特性,比如@font-face可以加载非系统的字体,字体变体属性font-variation-*让Web上排版和印刷上排版之间的差距在逐渐拉小,font-display属性来决定非系统方面字体的加载策略,提高性性能,font-palette用来选择字体配色,@font-palette-values自定义字体配色等。如果你感兴趣的话,请继续往下阅读。

React是什么?

React是什么呢?从React的官网我们可以获知:React是用于构建用户界面的JavaScript库。React使创建交互UI变得轻而易举,为Web应用的每个状态设计简洁的视图,当数据改变时React能有效地更新并正确地渲染组件。这仅是对React的总结性的描述,对于想学习React的同学(或初次接触React的同学)还是希望能更深层的了解React是什么?React中包含了些什么?又是什么使得React变得那么特别?那么这篇文章将会简单的介绍一些React中的一些术语,并探索React的一些特色。最后希望这篇文章能帮助你能先熟悉一些概念,从而不至于在后面的学习过程中感到绝望。而且会慢慢喜欢上并掌握好React。

深入了解JSX

最近开始学着使用React写东西。在写代码时会使用JSX,不了解JSX的相关知识写起代码的效率还是蛮低的。为了能更好的进入状态,打算先把JSX相关的知识和细节了解一下。在这篇文章中我们主要就是来学习一下JSX的相关知识。希望对于像我这样的初学React(或初次接触JSX)的同学有所帮助。

页面

返回顶部