必威体育下载基督教Heilmann

您当前正在浏览的是必威体育下载基督教Heilmann12月的博必威体育简介客档案,2012.

为12月,存档2012

使用MediaQueries有条件地加载资源

周三,12月19日,2012

下面是一个关于让MediaQueries不仅根据满足的特定条件应用样式的快速想法,还可以根据需要加载所需的资源。你可以检查快速而肮脏的放映带着这个想法或者继续读下去。

Mediaqueries非常,非常有用的东西。它们允许我们对屏幕大小、方向甚至显示应用程序和站点的设备的分辨率做出反应。这本身并不是什么新鲜事——在过去,我们只是使用javascript来读取属性,比如window.innerWidth并做出相应的反应,但通过MediaQueries,我们可以轻松地完成所有这些工作。CSS并且可以在一个样式表中添加多个条件。

除了@media我们还可以在样式表中添加选择器媒体属性,并使其依赖于查询。例如,如果我们想应用一个特定的样式表只有当屏幕尺寸大于600像素时我们才能这样做HTML:


              
              rel=
              “样式表” 
             
      媒体=“屏幕和(最小宽度:601px)” 
      href=“large.css”>

方便吗?当我们应用mediaquery时我们只在需要时请求这个文件这意味着我们甚至保存在HTTP请求,不要遭受通过网络(或3G或边缘连接)。特别是对于电影和源元素,这可以节省我们大量的时间和流量。悲哀地,虽然,事实并非如此。

加载所有东西——即使它们不适用

让我们把这HTML文档:



              
              =
              “en - us”
              >
             

              
               >
              
  
              
              字符集=
              “utf - 8”
              >
             
  
               
               类型=
               “文本/ css”
               >
              body {font-family: Helvetica,Arial,无衬线;} p{字体大小:12px;}>
  
               
               rel=
               “样式表”
              
        媒体=“屏幕和(最小宽度:600px)” 
        href=“小CSS”>
  
                
                rel=
                “样式表”
               
        媒体=“屏幕和(最小宽度:4000px)” 
        href=“big.css”>
  
                
                 >
                CSS文件与媒体查询>
>

             
              >
             

             
              >
             测试媒体属性>
>
>

测试媒体属性

如果你的屏幕宽度小于600像素,段落大小应该是12px,超过600像素是20px(定义在small.css)和屏幕上超过4000像素宽(不太可能,应该是200px(定义为big.css)。

这工作。所以我们真的不需要加载big.css,对吧?遗憾的是,我测试的所有浏览器都是如此。这看起来很浪费,但这是基于浏览器在过去的工作方式,而且——我想——是为了让渲染尽早发生。打开你的开发工具试试看.

Chrome加载两个CSS文件
火狐加载两个CSS文件

更新:伊利亚·格里高丽克(Ilya Grigorik)在《解密回应》(Debunking Responsive)一书中指出CSS表现神话”这种行为是故意的。请务必阅读这篇文章的评论。然而,请听我说,我认为我们应该能够按需加载各种资源,稍后会展示。

我很确定CSS预处理器等萨斯可以帮助你,但是我想知道我们如何扩展这个想法。如何不仅将样式应用于匹配某个查询的元素,但是,只有在应用了它们时,才能加载它们?答案——一如既往——是JavaScript。

火柴盒前来救援

Mediaqueries不仅适用于CSS,它们也可以在JavaScript中使用。您甚至可以在应用事件时触发事件,这将给您一个更细粒度的控制。如果你想要一个好的JavaScript等价的概述@media或者是媒体属性,本文介绍matchmedia是一个好的开始。

使用matchmedia只有在满足某个mediaquery条件时,才能执行JavaScript块。这意味着你可以写出CSS当且如果查询为真:

如果 (窗口。matchMedia('屏幕和(最小宽度:600px)')){文档。();
}

当然,那会让你成为一个可怕的人,作为document.write()。是已知的杀死可爱的小猫从20英尺的距离。让我们更聪明一点。betway体育官方网

而不是应用CSS的链接元素href是什么原因导致我们在工具箱中挖掘了不希望的加载HTML5而是使用数据属性。任何我们想要依赖查询的东西,获得一个数据-前缀:


              
              rel=
              “样式表” 
              =
              “mediaquerydependent” 
             
      数据媒体=“屏幕和(最小宽度:600px)” 
      data-href=“绿色CSS”>

               
               rel=
               “样式表” 
               =
               “mediaquerydependent” 
              
      数据媒体=“屏幕和(最小宽度:4000px)” 
      data-href=“blue.css”>

我们还添加了一个类mediaquerydependent给我们一个钩子让JavaScript发挥它的魔力。因为我想更进一步,不仅仅是加载CSS但是任何指向资源的东西,我们可以对图像做同样的处理,例如:


              
              data-src=
              “http://placekitten.com/500/500” 
             
     数据ALT=“小猫” 
     =“mediaquerydependent” 
     数据媒体=“屏幕和(最小宽度:600px)”>

现在缺少的是一个小JavaScript来循环我们想要更改的所有元素,评估他们的MediaQueries并更改数据-前缀属性返回真实属性。这就是脚本:

(函数(){
  var查询=文档。querySelectorAll(“.mediaquerydependent”),所有=查询。长度,坏蛋= ,attr= ;(所有——) {坏蛋=查询(所有];
    如果 (坏蛋。数据集.媒体 & &窗口。matchMedia(坏蛋。数据集.媒体).匹配) {
       (attr坏蛋。数据集) {
        如果 (attr!= “媒体”) {坏蛋。设置属性(attr,坏蛋。数据集(attr]);
        }
      }
    }
  }
}());

它是这样做的:

  1. 我们使用querySelectorAll要获取所有需要mediaquery检查的元素并对其进行循环(使用反向while循环)。
  2. 我们测试元素是否有a数据媒体属性,如果其中定义的查询为真
  3. 然后我们循环遍历所有数据-添加带前缀的属性并添加一个带值的非前缀属性(省略媒体属性)

换句话说,如果满足最小宽度600像素的条件,我们的图像示例将变成:


              
              data-src=
              “http://placekitten.com/500/500” 
             
     数据ALT=“小猫” 
     =“mediaquerydependent” 
     数据媒体=“屏幕和(最小宽度:600px)”>src = " http://placekitten.com/500/500 " alt = "小猫" >

这将使浏览器加载图像并应用替代文本。

但是,如果JavaScript不可用呢?

当JavaScript不可用时,也没有问题。既然你已经置身于仙境,只要让一个游荡在独角兽上的魔术师帮你就行了。

认真想想,当然,您可以提供脚本失败时可用的预置。只是添加href一个总是在需要时加载和替换的回退。


              
              rel=
              “样式表” 
              =
              “mediaquerydependent” 
             
      href=“standard.css”
      数据媒体=“屏幕和(最小宽度:600px)” 
      data-href=“绿色CSS”>

这将载入standard.css无论如何,把它替换成绿铯当屏幕宽度超过600像素时。

现在,此脚本仅在页面第一次加载时运行,但是你可以很容易地在窗口大小调整中运行它,了。是说,甚至有事件被matchmedia触发,但根据原始文章,在等待测试iOS中仍然有问题,所以我想保护它的安全。毕竟mediaqueries的存在是为了给用户提供他们可以在特定设备上使用的东西——调整窗口大小以查看更改的用例更多的是开发人员的事情。

这可以用于有条件地加载高分辨率图像,不能吗?你可以在GitHub上获取代码在这里看到它的作用.

关于Sencha的Fastbook“HTML5技术演示”

周一,12月17日,2012

你可能已经看到Sencha今天带着他们的Fastbook登陆了HTML5演示了如何使用HTML5,你可以用CSS和JavaScript做一个响应式的Facebook。你可以请参见Vimeo上的演示:

所有的细节都在他们的岗位上。”Fastbook - an的制作HTML5的爱情故事”。我看到这个然后说,天哪,这是棒极了”。作为一个Android用户,当我试图滚动浏览大量数据(也在Twitter上)时,我曾多次看到本机应用程序崩溃。所以这可能是三星的一个实现问题)和HTML5演示非常流畅和引人注目。

当然,我内心的开发者认为这一定是出了什么问题——它太平滑了,betway体育官方网这太“销售演示”了。当然我有备份,在博客上的评论提出,这不是运行在web视图,其中的很多性能问题会和Mozilla内部邮件已经抱怨演示不支持任何其他比webkit -没有火狐浏览器,没有歌剧,也没有窗户。互联网!有人打错电话了HTML5不支持一切。

然后我停了下来。和反映。想一下我们在这里做什么。工程师们似乎有一种巨大的巴甫洛夫反应,想要找出某件事的缺陷,而不是看它的好处。

pavlovs狗
非常棒的漫画墨守成规的

对,这只适用于Webkit,这很糟糕HTML5不仅仅是WebKit。Sencha声称这是对爱的表达也是错误的HTML5没有拥抱自然HTML5browser-agnostic平台。但这是一场营销战。这是在做一个演示,展示当你努力的时候,事情是可以工作的。这是对99%错误引用扎克伯格声明的直接回应HTML5这在当时并不是Facebook的正确选择。但我仍然发泄我的失望:

失望,@Sencha HTML5爱情故事就是WebKit的爱情故事。不,移动版Firefox,火狐没有操作系统,没有歌剧,没有窗户。:(((

当然,推特上有很多人在对Sencha说三道四,也有很多人想看看HTML5失败(尽管这对他们的生活没有任何影响),喋喋不休地谈论糟糕的状态HTML5浏览器不一致性的祸根——每次你说的时候都是另一种巴甫洛夫式的反应HTML5.

这是关键,虽然。不少Sencha的人同意并解释说这是一个快速的技术演示,因此只在Webkit中工作。贾里德·尼科尔斯,他们的高级软件架构师保持简洁:

@codepo8同意并可修复。一天只有24小时。

所以,与其挥舞我的手指抱怨那些本可以但没想到会发生的事情,我还不如试着让对话变得更有意义。让我们看看这是怎么回事。

有时候,正确的做法是不去倾听内心愤怒的人的话,看看怎样才能做得更好。Sencha的演示是一个非常好的营销活动,而且确实做得很好。所以,与其把它击落,不如一起工作。

如何阅读表演文章

周一,12月17日,2012

总结:性能文章很好的说明了这一点,但是它们的时间非常固定,而且它们的发现的保质期可能非常短。这可能导致优秀的思想和技术被过早地抛弃,而不是改进或修复它们的实现。谨慎行事。

每隔几个月,我就会看到一些文章,介绍人们如何喜欢我们提供的一些很棒的新特性HTML5它们的使用是多么的简单。没有失败,性能专家将在后续文章中警告所有人不要使用这些技术,因为它们的速度很慢。

性能是性感,而且表演非常重要.我们的最终用户不应该为我们的错误所苦。毫无疑问。毫无疑问,一个简单的API在现有开发实践的基础上构建的开发实践将会比那些更加晦涩但性能更好的开发实践使用得更多。

这就是我们陷入的困境。LocalStorage非常简单,但是表现很糟糕,使用WebSQL或IndexDB要困难得多,但性能更好,但不支持跨浏览器的一致性。上的数据属性HTML元素是一种非常聪明的添加额外信息的方法HTML让它们易于维护,但在阅读和写作方面DOM它总是很慢。

而不是找到一个中间地带,然而,我们写文章,就我们最喜欢的观点发表演讲或帖子。表演类文章以大量的数字自夸,图表和交互式测试允许人们在多个浏览器上运行一点脚本,并绘制一幅厄运和黑暗的画面。

另一方面,那些只想使用技术的设计人员写的文章表明,并不是所有的事情都是糟糕的,因为他们从来没有进行过大量的测试,这些测试用例使用一个合理的样本以这样或那样的方式进行陈述。

我厌倦了这个,我认为我们在浪费时间。需要做的是,性能测试和实现应该导致我们真正需要的:改进了浏览器,修复了导致延迟的问题.在bug跟踪系统中,许多性能文章最好作为注释,因为在那里,他们被那些能够解决问题的人阅读。我们需要从实现者那里得到更多的反馈,为什么他们不喜欢使用性能更高效的技术,以及可以做些什么来让他们喜欢它。

现在,我们两极分化的写作导致了最坏的结果:人们害怕使用技术,而浏览器供应商也因此没有看到修复它们的意义。

爱库实现者

库,另一方面,识别问题并在内部解决。几乎您看到的每个jQuery脚本都与DOM对迭代进行读写,在导致回流之前不能进行缓存或连接,如果用纯JavaScript实现,这将是一个绝对的噩梦。库的制造者了解了这一点并吞下了必威体育下载那粒药丸——实现者喜欢使用DOM,他们只是不喜欢DOM API.将某些内容存储在属性中使其易于更改,并意味着人们不会干扰您的代码。这就是库使用缓存机制和延迟写入的原因DOM允许开发人员使用和滥用facadeDOM没有表现惩罚(在很多情况下,当然不是全部)。

浏览器和标准也需要这样做。有些事情进展缓慢并不是新闻。我们生活在一个浏览器和技术不断变化的世界。AS杰克·阿奇博尔德说:

@codepo8同意了。也,大多数“x比y快”的建议保质期都很短

许多技术的性能问题是基于它们是如何定义的,或者缺乏定义,以及浏览器以不同的方式实现它们。这些是最难修复的。但是我们只能在人们使用它们的时候修复它们。如果不使用浏览器,没有哪家浏览器供应商会愿意花时间和精力来解决这些问题——毕竟没有人会抱怨,可能是可以的。

小心阅读

所以当阅读任何与网络相关的性能时,我认为考虑一些事情很重要。我也认为写得好的帖子,书籍和文章应该提到这些,而不是展示一个图表,并宣称“xyz被认为是有害的”:

  • 什么技术的使用导致了问题-如果存储大量的大型视频会降低本地存储的速度,这并不意味着只对少量的字符串使用本地存储,就意味着“不使用技术”
  • 性能问题的影响是什么-如果你所做的延迟页面加载10秒,这是个问题,如果问题只存在于特定的浏览器和特定类型的数据中,那么
  • 有解决方法-实现者如何继续使用该技术,收获了回报却没有引起问题?
  • 什么是催化剂–很多时候,只有过度使用性能问题才会真正显示出来。DOM例如,当缓存不是问题时,当你一直读和写同样的价值观,这是尽管

当然,性能专家会告诉您这是一个给定条件。人们应该对这些数字有所保留,并根据自己的实现对其进行测试。好吧,这不是出版的工作方式,这当然也不是引用140个字符的媒体的工作方式。

一个当前的例子

让我们举个简单的例子:betway体育官方网

斯托亚诺夫的“非常高效。HTML5数据——属性的表现HTML5数据属性的速度很慢。我们有图表作为证据,我们在浏览器中运行一个交互式测试。当然,Twitter上充斥着“数据属性很慢,很糟糕”。这篇文章有趣的地方是,然而,在最后两段:

使用数据属性很方便,但是如果你经常阅读和写作,应用程序的性能将受到影响。在这种情况下,最好使用JavaScript创建一个小实用程序来存储和关联特定的数据 DOM节点。

在这篇文章中,您看到了一个非常简单的数据实用程序。你可以一直做得更好。例如,为了方便,您仍然可以使用数据属性生成标记,并且在第一次使用data .get()或data .set()时,您可以从DOM到数据对象,然后从此使用数据对象。

这一点,对我来说,错过的机会在这里吗?当前,数据属性在连接到的时候执行得非常糟糕DOM节点,表示对属性进行读写操作DOM每次读取数据集属性时。这没有多大意义——你为什么需要额外的呢API那么呢?

Stoyan所写的神话般的数据实用程序是本文的起点。当然,我可以看到他的计划,让人们开始玩这个想法,从而深入到主题。这太好了,但这意味着读者需要这样做,或者检查该解决方案的评论或后续内容。与过去一样,现在的文章的货架期要短得多——展示解决问题的解决方案比描绘解决方案的蓝图更有意义。这不是一个研讨会。

这里的神奇时刻并不是说,如果您使用dataset或get属性,那么以下内容的读写速度会很慢:


              
              id=
              “foo” 
              数据x=
              “200” 
              数据Y=
              “300”
              >
              >
             

也不是说你可以用一个更好的脚本来替代它:

数据。(div, {x: 200,y: 300});

他们一点也不一样。前者更容易维护,并将所有数据保存在相同的位置。后者将信息传播到两个文档和两种语言中,这与数据属性的整体概念大相径庭。

具有此标题的文章应该已经展示了一个解决方案HTML解决方案变成一个执行的解决方案,例如,将文档循环一次,并将信息存储在数据对象中进行查找。

我不是说这篇文章不好——我认为最后两段让它更加客观。但我想说的是,它被错误地引用,并导致真理,阻碍了根本问题的解决。

性能改进发生在几个方面。影响最大的是通过修复引擎盖下的问题和方便人们开发,使浏览器更快。我们向开发者承诺了很多HTML5标准——这些东西应该在不需要实现者构建自己的工作区的情况下执行。这是我们从jQuery的成功中学到的主要经验。必威体育下载

所以,如果你读到"xyz被认为是有害的"仔细阅读,考虑实现参数,不要仅仅因为看到一些看起来很糟糕的数字就放弃一个非常有用的工具。技术的变化比我们想象的要快,我们需要用用例来度量,实验室测试。

(值得一看)独立游戏-电影

星期五,12月14日,2012

我们可能会迟到,但昨天我们花了10美元去下载和观看。独立游戏-电影直接来自制造者。

独立游戏电影

这部定价很好的电影有许多高质量的数字版权管理免费下载格式,包括字幕,字幕和创作者的音轨,这是一个很好的例子,电影发行应该在几乎2013年完成,而不是告诉我我不在正确的国家。

你可以看预告片在这里:

就像任何了不起的事情一样,詹姆斯·斯威斯基和莉莎娜·帕约特的这部电影起源于加拿大,讲述了几位独立游戏开发者在接受采访时的故事:埃德蒙·麦克米伦和汤米·瑞芬的《建筑与运输》“超级肉球小子,Phil Fish试图完成并获得释放的权利费斯Jonathan Blow创造了编织.

图像和电影制作技术令人惊叹,制作精美,电影是一部非常有趣的纪录片,讲述了独立游戏开发商必须处理的问题:出版问题,法律义务,公众的反馈,尤其是个人问题和社会焦虑。在这里,你很难找到一个在传统社会意义上“正常”的人。

我特别被采访时看到的是那些处理在线反馈的制造商,要求游戏出来,讨厌的邮件,奇怪的评论,但也都对积极的反馈反应很差。作为一个在网上发布很多东西并且免费传播我所做的任何事情的人,我可以与这些部分产生很大的联系。

总之,对于任何想要在我们的市场上发行游戏的人来说,这都是一个必须关注的问题。但真正的东西。你不会得到汽车追逐和枪战,但它仍然是一个非常值得你的电影。

快速回顾:手机图书粉碎杂志

周三,12月12日2012

我只是花了些时间把自己读到“移动图书”杂志上,下面是我的第一印象。

3D灰质

这本书,总的来说,成功地收集了大量已知的“了解”所有移动事物的作者,每个人都根据自己的主题撰写了一章。在细节,我们有以下几点:

  • 移动领域发生了什么?由彼得·保罗·科赫
  • 斯蒂芬妮·里格的《移动的未来》
  • Trent Walton的响应式设计策略
  • Brad Frost的响应式设计模式
  • 戴夫·奥尔森的手机优化
  • 丹尼斯·卡迪斯手把手设计的手机
  • 乔希·克拉克为触摸设计

电子书版还有额外的章节:

  • 移动用户体验Greg Nudelman和Rian van der Merwe设计的图案
  • Nathan Barry为iOS开发和设计
  • 开发和调试HTML5Remy Sharp的app
  • Sebastiaan de With《理解Android平台
  • 由Arturo Toledo设计的Windows Phone

这本书总体上感觉非常全面,在涵盖移动开发的所有方面都做得很好。所有的外观和感觉,目标观众和其他信息都被一个可爱的移动书籍生产资料如果你对此感兴趣的话,请向媒体报道。我在Macbook Air和安卓(Android)设备上阅读了我想读的章节,这两本书都做得很好,很容易理解。

布局预览等等

我尤其喜欢这本书在整体意义上涵盖了移动,让我们对市场有一个大致的了解PPK的章节以及详细章节中所需的不同技能。我也喜欢它是平台无关的,这意味着你所学到的适用于所有领域。必威体育下载太多的出版物或多或少地掩盖了“这是如何为iOS做手机”的说明,这些说明最多在半年后就会过时。这里的信息写得很巧妙,虽然它只是当前情况的一个快照,但它以一种解释什么可以在以后使用,什么可能只是现在的问题,不值得我们破坏我们的大脑的方式来写。

我还没读过额外的章节,哪一件事像我一样带有偏见HTML5-我希望Remy的章节能成为这本书的一部分。我很喜欢安卓系统,iOS和Windows的特定数据,但是一个真正的HTML5这一章本来是不错的。

也就是说,戴夫·奥尔森的那一章对我来说是一个很大的启示——它的标题没有给它足够的信任。里面的信息可以让你在优化你的网络产品的过程中一蹴而就,它给你留下了可以让你忙上几个月的链接和文章。它塞得有点多,可以是一本书,但是值得你花时间。

总的来说,我认为这本书是一个公司或机构图书馆的一个很好的补充。作为一个专家,它可能会给你留下一些远远超出你能力范围的章节,可能会给你留下危险的“知识”,但一个团队阅读了适用的章节,然后汇集他们的知识和学习,可以使用这本书进入移动未来踢和尖叫。必威体育下载和踢屁股。