当使用sudo命令来运行一个linux命令时，我们希望这个linux命令能以root身份运行，但有时候都会遇到“permission denied”的错误，结果发现是linux命令中只有部分语句是按root用户运行的。

只是想练练手，看看能不能实现在页面上放置一个能无限循环滚动的图片横幅。事实证明，这并不是很难。

:focus-within 是一个新的CSS伪类( pseudo-class)，它跟 :focus 、 :hover 很相似。这个伪类的作用在使用了 :focus-within 的元素成为焦点或它的子元素成为焦点时显现。

pattern属性是HTML5里出现的新属性，它适用于type类型为text, search, tel, url, email, 和 password等的input元素上，配合:valid伪类，就能实现JavaScript里的正则表达式等效的校验算法。

在2018里，对于聪明的开发者们可以去熟悉的东西， Brown 给出了他对 JavaScript 生态系统中各个方面最前沿，至少也是很有用的预测。有两点需要说明的是： 首先，他基于所有 JavaScript于 标准的这些变化中，指出了一些好的可以去了解的，尽管里面所罗列的一些东西可能不是你所关注的。

从在过去的12个月里所从事的不同 JavaScript 相关项目中，我发现有 5 个 ES6 特性是不可或缺的，因为它们真正简化了 JavaScript 普通任务的完成方式。你心中的前 5 名可能和我的不一样，如果是的话，我希望你能在结尾的评论区分享它们。

iPhone X 配备一个覆盖整个手机的全面屏，顶部的“刘海”为相机和其他组件留出了空间。然而结果就是会出现一些尴尬的情景：网站被限制在一个“安全区域”，在两侧边缘会出现白条儿。移除这个白条儿也不难，给 body 设置一个 background-color 就可以搞定。或者，可以添加 viewport-fit=cover meta 标签，将整个网站扩展到整个屏幕。

初看起来，好像觉得这个效果实现很难，实际上，CSS3里面针对这种特定形状环绕的效果已经支持很久了，CSS3 Shapes和CSS3 Regions都是可以实现的，本文就将展示如何使用CSS3 Shapes实现元素内容在滚动的时候自动环绕iPhone X的齐刘海的效果。

简单点可以这么说： js是单线程的，是基于事件循环的。setTimeout函数是异步的，异步的事件会加入一个队列，当同步的任务执行完之后，才会执行。

这里我们针对JavaScript初学者给出一些技巧和列出一些陷阱。如果你已经是一个砖家，也可以读一读。

ES6为一些已有的功能提供了非破坏性更新，这类更新中的大部分我们可以理解为语法糖，称之为语法糖，意味着，这类新语法能做的事情其实用ES5也可以做，只是会稍微复杂一些。本章我们将着重讨论这些语法糖，看完之后，可能你会对一些你很熟悉的ES6新语法有不一样的理解。

箭头函数的确与传统函数有不同之处，但仍存在共同的特点。

这篇文章将会向大家简要的介绍JavaScript里关于数组的最重要的5个方法，这5个方法是每个想要高效的进行JavaScript编程的程序员必须知道的。

这一点，我昨天在查资料写这篇文章—最全面的元素水平垂直居中方法汇总的时候就发现有个大牛也理解错了—-CSS布局奇淫技巧之–各种居中里面的第八点。

这里报错的原因是 querySelectorAll 所需的执行上下文必需是 document，而我们赋值到 $ 调用后上下文变成了全局 window。明白了这个道理后，我们再花不到四分之一柱香的时间，就改写了之前的版本，释出了正确的版本，这个版本里面，我们用正确的姿势去 alias。

Flexbox布局模式给网页布局提供了极大的方便，它更grid布局一样都是新出现的新型布局模式，为了让web开发者更容易的理解这种布局，本页内容提供了一个学习实验flexbox布局的场所，让大家更快更容易的了解flexbox布局的语法、用法和使用场景

我发现一个有趣的事情，竟然能在浏览器console里显示SVG图片和SVG动画！我迫不及待的要把这写出来，我想知道是否还有其他人之前也发现了这个用法。同时也为这个功能感到兴奋。我是在经过一系列的错误debug、测试和研究中偶然发现了可以在console里显示SVG图片，不仅仅能显示，而能够运行SVG动画。下面是一个动画效果截图：

使用JavaScript和HTML5技术绘制具有动态效果(流水、下雨、飘雾、飞雪等)，而且还要伴音，水声、雨声、风声，栩栩如生。

之所以将word-break、overflow-wrap(word-wrap)和white-space这三个属性放在一起比较，是因为它们都有一个共同的作用，就是控制文本的换行。因为有三个，所以就容易混淆。这个三个属性有时候选任何一个都能实现我们的目标，但有时候只有某个特定的属性能实现我们的要求，这也就是我们今天要比较它们的原因，有相同点，也有不同点。

CSS变量，很像任何其它一种编程语言里的变量，可以让我们对一个值进行反复的引用。始自2017年4月，所有的现代浏览器都支持了这个功能，使得我们能编写出更紧凑、更清晰的CSS样式。

所谓”粘性侧边栏(Sticky Sidebar)”，是指页面上侧边栏(Sidebar)的一种滚动方式，正常情况下，侧边栏是跟整个页面是一体的，当页面滚动时，侧边栏跟着一起滚动，而很多页面侧边栏内容的高度很短，很快侧边栏就会滚出浏览器可视窗口，于是，侧边栏的位置变成了空白。这个空白实际上是一种资源浪费，而”粘性侧边栏(Sticky Sidebar)”的特点是，侧边栏的位置不会形成空白，

will-change 属性这种现象跟元素层叠顺序(类似z-index)混乱有关，但是因为要使用 will-change 属性，就必须要接受这种混乱的现实。

我想，这些浏览器开发商和规范制定者会说：“你想要更好的性能。而这些是我全部能做的了。有些事情我们做不了，但你们知道怎么做。这些之外的事情我们会尽力做好，剩下的事情你们来告诉我如何能做的更好。”

如果你开发的页面非常复杂，那么，这个CSS的contain技术可以帮助你优化页面的性能。而对于第三方的小饰件，始终使用contain: strict;是很好的习惯，它可以保护你的页面不受它们的干扰而出现性能问题。

然而，千万不要过度使用will-change属性，否则，事与愿违，页面的执行效率会降低，推荐的做法是当一个元素或属性发生变化时打开will-change，变化完成之后关闭它。

在浏览器中也可以使用JavaScript modules(模块功能)了。目前支持这一特性的浏览器包括： Safari 10.1. 谷歌浏览器(Canary 60) Firefox 54 – Edge 15 –

今年三月，微软宣布 Edge 浏览器将支持 CSS 变量。这个重要的 CSS 新功能，所有主要浏览器已经都支持了。本文全面介绍如何使用它，你会发现原生 CSS 从此变得异常强大。

一个flex父容器元素能给它的子元素建立一种新型的flex内容布局。这种布局其实是和将元素设定为display:block是很相似的，只是在flex布局里block换成了flex。float属性不好影响flex布局，flex父容器的margin不会和其子元素的margin有重叠效果。Flex父容器元素所形成的block容器特性跟普通的block容器元素所表现的特征完全一样。

这是一个实验演示如何控制(伪造)用户的鼠标指针，达到鼠标指针不听用户使唤的效果

这篇文章里，我将介绍如何修改修改手机浏览器地址栏和手机系统状态栏的主题颜色，让它跟你的网站的颜色相匹配。

11种调用一个函数的方法

在这篇文章里，我们将讨论如何构造一个高性能的视差效果，当然同样重要的是还得跨浏览器。

之前的文章里我介绍了如何在安卓手机上安装Linux，下面我将介绍如何在这个安装了Linux的手机上安装Lighttpd + php + sqlite3组合。

在PHP里系统命令可以放在反单引号(`)里执行。如果你要是使用nodejs，你需要调用引用child_process模块：

除了vm和vh两种单位外，还有两种类似的单位：vmin——取vw和vh中较小的一个为基准，和vmax——取vw和vh中较大的一个为基准。它们同样是一个单位数值，跟px、em、%的用法类似。