译文

滚动的特性

一些(网站)滚动的效果是如此令人着迷但你却不知该如何实现,本文将为你揭开它们的神秘面纱。我们将基于最新的技术与规范为你介绍最新的 JavaScript 与 CSS 特性,将使你的页面滚动更平滑、美观且性能更好。大多数Web页面不适合单屏显示,所以Web页面出现滚动条被所有用户认为是理所当然的。对于前端开发人员和视觉设计来说,跨浏览器提供良好的滚动体验,同时符合设计,无疑是一个挑战。尽管 Web 标准的发展速度远超从前,但代码的实现往往是落后的。下文将为你介绍一些常见的关于滚动的案例,检查一下你所用的解决方案是否被更优雅的方案所代替。

CSS中最全的换行处理方式

在Web页面上常常可以看到某个元素内部有一个很长的单词,元素的宽度不足以容纳它。一个常见的现象就是有一个很长的URL。这会发生什么呢?这取决于CSS,那么CSS如何控制布局,以及CSS如何让文本更合理的方式展示。

如何使用简单的三角函数创建Loading效果

在这篇文章中,将使用三角函数的基本概念,重新创建一个更平滑的Loading效果。我知道这听起来很奇怪,但请相信我,这里一定会很有趣。你会惊讶地发现,要编写的代码很少。当然,你可能会担心三角函数相关的知识,事实上是你不需要知道三角学或数学你能理解这篇文章。我将会解释这里的每个圆相关的事情。

在Vue中如何用数据来驱动用户界面

虽然我们通常知道在应用程序中构建大多数视图(View)时需要哪些组件(Component),但很多时候我们并不知道这些组件在运行时是什么。这意味着我们需要基于应用程序状态、用户首选项或API的响应来构建一个页面。一个常见的情况是构建动态表单,其中需要整清楚的是:组件是由JSON对象配置的,还是基于用户的答案而更改的字段来构建。所有现代JavaScript框架(比如我们熟悉的Vue、React等)都有处理动态组件的方法。这篇文章将向您展示如何在Vue中实现它。JavaScript为上述场景提供了一个非常优雅和简单的解决方案。

使用 Intersection Observer 实现图片延迟加载

如果你还没有机会看过,@Paul Lewis 发布了一个精彩的视频系列,演示了如何构建一个媒体播放器以及渐进式 Web 应用(Progressive Web App)的一些重要功能。在 YouTube 上的这一系列视频 包括了他在建立网站时的各个部分。观看开发者展示他们工作的视频绝对是我最喜欢的学习新事物的方式!

现代浏览器支持的不同类型的观察者

观察者(Observer)是一个观察或注意事物的程序。观察者可以观察浏览器中发生的某些活动并做出相应的响应。观察者类似于狗,观察某些活动,并提醒我们发生了一些不寻常的事情。一旦我们为某些活动获取到狗发出的警告时,我们有责任采取相应的行动。现代浏览器支持的四种不同类型的观察者。

Vue中的方法,属性计算和观察者

我喜欢使用Vue的原因之一是,Vue中的methodscomputedwatchers的使用是多么的有用。如果没有彻底的理解它们之间的区别,就很难充分利用Vue的功能。尽管如此,我看到的大多数人对这个框架感到困惑,他们也会其中的差异感到困惑,所以我们很有必要的去了解一下这方面的知。

一个HTML元素和五个CSS属性的魔力

假设我告诉你,我可以使用一个HTML元素和五个CSS属性实现下图的效果。而且这个效果没有使用任何一行SVG代码,也没有使用图像(只是在html元素上使用了background设置了一个背景图片,只是为了表明这个元素有一些透明的部分),同样也没有使用JavaScript代码。你一定会觉得很神奇,对吧!有好奇之心,对于我们做前端的同学而言,应该一直都有,只有这样才能做出很多我们一直以为实现不了的效果,比如接下来要介绍的内容。

理解JavaScript中null、undefined和NaN

当您开始学习JavaScript时,首先需要学习的是数据类型。只要我们讨论NumberStringBooleanObject时,一旦涉及到nullundefined出现时,作为初学者要理解清楚他们就可能会有点混乱。

CSS Grid Layout一些有趣的事情(2)

去年,我做了一个研讨会之后收集了一些关于CSS Grid布局有趣的东西。今天年,我在另一个工作室工作,我学到了一些更令人兴奋的事情,那就是我们都喜欢布局规范。当然,我不会把这些有趣的东西独享。我很高兴能和大家一起分享这些有趣的东西。

页面

返回顶部