iPhone X 的凹槽 和 iOS 11 中一些相关 CSS 属性

苹果的 iPhone X 配备了一个覆盖整个手机的全屏幕,但是顶部保留了一个“凹槽”,为相机和其他各种组件腾出空间。结果是屏幕设计时有一些尴尬局面,例如将网站限制在“安全区域”,那么边缘会有白色空白条。想要移除这个白色空白条虽然不难,在 body 设置一个 background-color 就可以搞定。或者,你可以 viewport-fit=cover 添加到 meta viewport 标签上,以使网页填充满整个屏幕。

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 

然后,你要考虑到任何重叠的情况,通常是由安全区域处理的。有一些新的CSS可以帮助你适应这种情况。查看 Stephen Radford 的文档继续阅读

[教程] 用 CSS3 Animations(动画) 和 Keyframes(关键帧) 创建简单的网页动画 – CSS3 实现弹跳球动画

通过这个有趣的教程学习 CSS Animations(动画) 和 Keyframes(关键帧)。

我们要做什么?

下面是最终代码,也就是我们将要最终实现的演示:

See the Pen Bouncing Ball – Correct Timing by brandon (@bmorelli25) on CodePen.0

基础准备

对于这个实现,我们需要一个简单的 div ,并且样式类名为 ball继续阅读

Visual Studio Code 最好的功能、插件和设置

Visual Studio Code 是由 Microsoft(微软) 发布的一个免费的,开源的跨平台文本编辑器。他们基于在线编辑 Visual Studio Online (代号为 “Monaco”),并结合 GitHub 的 Electron 实现的一个跨平台编辑器。他们在为程序员创建一个快速且高效工作环境方面取得巨大进步。

  • 提供智能补全功能的智能感知
  • 编辑器内置代码 调试工具
  • 侧边栏内置 Git 命令
  • 处理多实例能力的 集成终端
  • 通过扩展和主题定制能力
  • 下载 VS Code Insiders,可以获取 每天构建的最新版本

继续阅读

JavaScript ECMAScript 2015 (ES6) 和 ECMAScript 2016 (ES7) 新特性速查

上图为 ES6 新特性速览

ES6 给 JavaScript 带来了很深刻的变化。 它完全改变了我们使用 JavaScript 的方式。 ES7是在ES6之上的一个微小更新。 让我们看看 ES6 更新中带来的变化。本文起初是我的学习笔记,现在我和大家分享一下。

支持UNICODE标准版本8

它将允许使用笑脸,一个可以使用 unicode 声明为转义字符的变量。 继续阅读

[回归基础] JavaScript 函数中默认参数

了解 JavaScript 中的默认参数以及如何使用它们。

默认参数定义

默认参数允许你设置参数的默认值。

默认情况下,JavaScript 函数的所有参数都是 undefined (未定义的)。默认参数允许你设置不同的默认值。

请考虑以下示例:


function logFirst(data){
  console.log(data[0]);
}

上面的例子是说,我们有一个简单的函数,打印数组中的第一个元素。该函数需要一个参数,data ,我们期望它是一个 Array 数组。但是如果没有数据传入,会发生什么? 继续阅读

使用 Chrome DevTools 调试 JavaScript

彻底地摒弃 console.log 调试!了解如何在Chrome开发者工具中使用断点来调试代码。

作为一名新开发人员,查找和修复 bug 可能非常困难。 你可能会随机使用 console.log(),试图查看代码的工作工作情况。 那么我现在告诉你,你不需要这么麻烦。

这篇文章是关于调试的正确方法!你将学习如何使用 Chrome 开发人员工具来设置断点,并逐步调试代码。这个工作流通常是在查找和修复代码中的 bug 时更有效的方法。

本教程将向你展示如何调试一个特定问题,但你所学习的一般工作流程有助于调试所有类型的 JavaScript bug。 继续阅读

JavaScript 中不可变数据结构(Immutable structures)和克隆(clone)

对象克隆是一个棘手的问题,它有很多边缘情况。原因很简单。对象维持内部状态有很多技巧及衍生品,但是很容易被滥用。

克隆对象是你应用程序正在发展的指示器,并且你有一个复杂的对象,你想要作为一个不变的值,即在保持先前状态的同时进行操作。

如果这个对象在你的控制范围之内,那么你很幸运。如果要进行一些重构,可能会让你重新考虑对象的结构和行为来完全避免问题。 继续阅读

密码强度正则表达式 – 必须包含大写字母,小写字母和数字,至少8个字符等

需要一个密码强度正则表达式在用户注册时校验用户密码强度:密码至少8个字符,包括1个大写字母,1个小写字母和1个数字或特殊字符,例如#?!。网上搜索了一些解决方案分享给大家。

继续阅读

Visual Studio Code 必备插件,主题及语法提示

Visual Studio Code 是由微软开发的一款免费的,跨平台文本编辑器。由于其出色的性能表现和丰富的功能,它很快成为了开发者的最爱。

与大多数 IDE 一样,VSCode 也有一个扩展市场,包含数千个具有不同功能的插件。为了帮助您挑选值得下载的东西,我们收集了这些最有用和最有趣的扩展。
继续阅读

2017年最新的 <head> 元素指南

整理了一份关于可以写入到HTML 标签中的内容清单-2017年最新的 <head> 元素指南,主要内容来自 <head> cheatsheet ,让大家了解每个标签及相应属性的意义,写出满足自己需求的 <head> 头部标签,可以很有效的增强页面的可用性。

你也可以查看移动前端不得不了解的HTML5 head 头标签 继续阅读