小编Ven*_*soh的帖子

我刚刚开始使用Grunt.js.设置起来非常困难,我正在创建一个package.json文件.

在本教程之后,它说有3种方法可以创建package.json文件.

首先是做 npm install grunt --save-dev

但这--save-dev意味着什么？我试着看,但结果徒劳无功.

我今天正在尝试一些基本的CSS,我偶然发现了一个问题.我希望有人可以帮助我.

如何将父容器垂直居中对齐到具有位置的画布:相对于它？父容器有一个子元素,其position:absolute.子元素已定位到父容器的中心.

我为此创建了一个JSFiddle. http://jsfiddle.net/exmRf/

干杯,维恩.

我正在网上制作一个无缝的CSS模式.我知道这完全是胡说八道而且不实用.但这只是为了获得乐趣.

http://codepen.io/vennsoh/pen/iFKyo

我已经创建了我的第一块瓷砖.现在我正在考虑重复它来填补整个背景的方法.

我可以通过使用HTML和CSS来完成这一壮举吗？或者我必须使用javascript来完成此操作吗？

-

以下是我的步骤,如果使用javascript,纠正我或建议更好的方法:

1. 计算当前浏览器的宽度和高度.
2. 单个图块是(150x150),我只需要创建尽可能多的div来覆盖整个屏幕.

-

我可能想要让事物四处移动,每个多边形改变颜色等等.它不会是静态的.我不是在寻找背景图像解决方案.

谢谢,维恩.

我有一个关于通过控制点弯曲公式的问题.如你所知,HTML帆布具有quadraticCurveTo(x1, y1, x2, y2)与x1 and x2作为控制点.

但是,当您尝试使用它绘制笔划时,笔划将永远不会触及控制点.

所以我们有这个公式:

x1 = xt * 2 - (x0 + x2) / 2;
y1 = yt * 2 - (y0 + y2) / 2;

(xt, yt)=你要弯曲的点.t切线,因为它在该点垂直90度.

这会重新计算控制点位置.

我从一本书中得到了这个公式,但是这本书没有解释它是如何衍生出来的.我试过谷歌但是徒劳无功.

谁知道这个公式是如何衍生出来的？

谢谢,维恩.

我正在阅读CSS Wizardry关于网页优化的文章. http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/

这是一篇很棒的文章.我建议每个人都阅读它.

文章建议CSS处于关键路径,不应通过资产域提供服务.这是因为通过子域服务将导致DNS查找,这需要时间.关键路径=请求页面然后实际看到某些内容之间的时间.

最佳实践要求您应该在子域上分割大量资产,而不是CSS.

但是,当我查看像Facebook或Apple这样的大型网站的源代码时,他们是从子域服务他们的CSS？他们为什么这样做？

<link rel="stylesheet" href="http://static.ak.fbcdn.net/rsrc.php/v2/yz/r/Hwq5_AIg0hW.css" />
<link rel="stylesheet" href="http://static.ak.fbcdn.net/rsrc.php/v2/y-/r/UgmvVXsZ1MP.css" />
<link rel="stylesheet" href="http://static.ak.fbcdn.net/rsrc.php/v2/yY/r/uHqkbF3y3Er.css" />


<link rel="stylesheet" href="http://images.apple.com/global/styles/base.css" type="text/css" />
<link rel="stylesheet" href="http://images.apple.com/v/home/p/styles/home.css" type="text/css" />
<link rel="stylesheet" href="http://images.apple.com/v/home/p/styles/billboard.css" type="text/css" />
<link rel="stylesheet" href="http://images.apple.com/home/styles/home.css" type="text/css" />

utils.parseColor = function (color, toNumber) {
  if (toNumber === true) {
    if (typeof color === 'number') {
      return (color | 0); //chop off decimal
    }
    if (typeof color === 'string' && color[0] === '#') {
      color = color.slice(1);
    }
    return window.parseInt(color, 16);
  } else {
    if (typeof color === 'number') {
      //make sure our hexadecimal number is padded out
      color = '#' + ('00000' + (color | 0).toString(16)).substr(-6);
    }

    return color;
  }
};

嘿伙计们,我遇到这段代码.它是JavaScript中的实用程序函数,可以在数字和字符串之间来回转换颜色.有两部分我不太确定,

首先,什么return (color|0);意思？什么是|？在JavaScript？ …

是不是说Arial不支持汉字？

有一些中文网站使用font-family:Arial.然而,这并不意味着汉字在Arial中.英文字符将以Arial显示,中文字符将忽略Arial,并在PC上使用默认的中文字符Simsun.

我对吗？

对Arial进行快速字符映射检查也不会在字体中显示中文字符.

背景

我正在使用Yeoman webapp来支撑我的前端.在gruntfile中,他们使用grunt-rev和grunt-usemin

Grunt-rev将"重新启动"我的资产,grunt-usemin将更新资产路径.

问题

我有一个我正在使用的webfont.我将fonts文件夹放在我的样式目录中,如gruntfile.js('styles/fonts /{,/}.*')中所述.Grunt服务正在显示我的字体,但在我构建文件后,它不再有效,因为font filename以一些奇怪的乱码字符作为前缀.例如:63b122ab.fontname.ttf而不是fontname.ttf

这是用于缓存清除.但是我的.css文件没有更新拾取它的路径.

在我的gruntfile.js中的usemin块中

我该怎么办？我现在有这个,但它不起作用.

usemin: {
  options: {
    assetsDirs: ['<%= config.dist %>', '<%= config.dist %>/images', '<%= config.dist %>/styles/fonts']
  },
  html: ['<%= config.dist %>/{,/}.html'],
  css: ['<%= config.dist %>/styles/{,/}.css']
},

它正在拾取其他所有内容,但不是字体.我手动创建了fonts文件夹.所以我猜测必须更新gruntfile.js以反映更改.

我是一名设计师，试图为移动应用程序设计排版。我有一个关于“可访问性”如何影响字体大小的问题。

与在 Android 中一样，您可以将字体大小比例从微小更改为巨大。默认情况下它是“小”。

当我调整字体大小时，在我看来，应用程序中的某些字体大小会改变，而有些则不会。如何判断哪些字体会受到可访问性的影响，哪些不会？

与 iOS 类似，可访问性对字体大小的影响如何？

我试图找出你如何使用这个快捷方式,但我遇到了麻烦."Ctrl K,l"是什么意思？

我尝试了各种组合但是徒劳无功.

我的页面上有3个div元素,每个元素都有一个相同的CSS类".shape"

在我的JS中,我想要定位当前单击".shape",以便使用jQuery slideDown过渡将一些额外的html插入到".shape"的底部.

当你再次点击".shape"时,额外的html将会滑动.

我该如何轻松地做到这一点？是)我有的:

$(".shape").click(function() {
    var id = $(this).attr("id");
    var selected = id + "-reveal";
});

在我的HTML中,

<div class="shape" id="shape1">Content</div>
<div class="hidden" id="shape1-reveal">Content</div>

<div class="shape" id="shape2">Content</div>
<div class="hidden" id="shape2-reveal">Content</div>

<div class="shape" id="shape3">Content</div>
<div class="hidden" id="shape3-reveal">Content</div>

我也不知道如何添加切换+滑动效果.

编辑:解决方案 http://codepen.io/vennsoh/pen/rVjeQy

不确定我编写JS的方式是否是最优雅的方法.

如果我要使用flexbox在屏幕中间放置一个元素,这个代码最优雅吗？

http://codepen.io/vennsoh/pen/wEAmz

HTML

<div class='btn'></div>

CSS

body{
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
}

.btn{
  width: 10rem;
  height: 10rem;
  background-color: #033649;
  margin: auto;
}

似乎我必须使用position:absolute和height + weight 100%来实现这一点.

2个简单的问题

1. 如何使用for ... of？访问数组中的索引位置？
2. 如何使用for ... in访问数组中的值？

伪代码

var arr = [3, 5, 7];
var pos, value;

for (pos in arr) {
   console.log(pos); // logs "0", "1", "2"
}

for (value of arr) {
   console.log(value); // logs "3", "5", "7"
}