必威体育下载克里斯蒂安·海尔曼

您当前正在浏览必威体育下载克里斯蒂安·海尔曼12月的博必威体育简介客档案,2012。

12月存档,二千零一十二

使用MediaQueries有条件地加载资源

星期三,12月19日,二千零一十二

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

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

除了@媒体样式表中的选择器也可以添加媒体属性设置为元素,并使它们依赖于查询。例如,如果我们只想在屏幕大小大于600像素时应用某个样式表,我们可以在HTML


              
              雷尔=
              “样式表” 
             
      媒体=“屏幕和(最小宽度:601px)” 
      HREF=“大CSS”>

方便吗?当我们应用MediaQuery时,我们只在需要时请求这个文件,这意味着我们甚至可以在超文本传输协议请求并不要承受通过网络(或通过3G或连接)。尤其是电影和源代码元素,这可以节省我们很多时间和流量。悲哀地,虽然,事实并非如此。

加载所有内容-即使它们不适用

让我们接受这个HTML文件:



              
              =
              “恩美国”
              >
             

              
               >
              
  
              
              字符集=
              “UTF-8”
              >
             
  
               
               类型=
               “文本/ CSS”
               >
              Body字体系列:Helvetica,Arial无衬线;P字体大小:12px;}>
  
               
               雷尔=
               “样式表”
              
        媒体=“屏幕和(最小宽度:600px)” 
        HREF=“小CSS”>
  
                
                雷尔=
                “样式表”
               
        媒体=“屏幕和(最小宽度:4000px)” 
        HREF=“大CSS”>
  
                
                 >
                包含媒体查询的CSS文件>
>

             
              >
             

             
              >
             测试媒体属性>
>
>

测试媒体属性

如果屏幕宽度小于600像素,段落大小应为12px,超过600像素,即20px(定义见小CSS)并且在超过4000像素宽的屏幕上(不太可能,对吗?)应为200px(定义见大铯

那是有效的。所以我们真的不需要加载大铯,正确的?可惜的是,我测试过的所有浏览器都是这样。这看起来很浪费,但这是基于浏览器过去的工作方式,而且——我想——已经做到了让渲染尽早发生。打开你的开发工具试试看.

chrome加载两个css文件
火狐加载两个CSS文件

更新作为伊利亚·格里戈里克在《揭穿反应》中指出CSS性能神话”这种行为是设计出来的。请务必阅读本文中的评论。然而,和我在一起吧,因为我认为我们应该能够处理按需加载所有类型的资源,稍后将显示。

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

把媒体和救援联系起来

MediaQueries不仅适用于CSS,它们也可以在javascript中使用。您甚至可以在应用事件时触发事件,这将给您一个更细粒度的控制。如果你想要一个相当于@媒体媒体属性,本文介绍媒质是个好的开始。

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

如果 窗口。媒质'屏幕和(最小宽度:600px)')){文件。)
}

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

而不是应用CSS带有链接元素的HREF这导致了我们在工具箱中挖掘的不需要的加载HTML5而是使用数据属性。任何我们想要依赖查询的东西,得到一个数据-前缀:


              
              雷尔=
              “样式表” 
              =
              “依赖MediaQuery” 
             
      数据媒体=“屏幕和(最小宽度:600px)” 
      数据HREF=“绿色CSS”>

               
               雷尔=
               “样式表” 
               =
               “依赖MediaQuery” 
              
      数据媒体=“屏幕和(最小宽度:4000px)” 
      数据HREF=“蓝色的CSS”>

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


              
              数据SRC=
              “http://placekitten.com/500/500” 
             
     数据ALT=“小猫” 
     =“依赖MediaQuery” 
     数据媒体=“屏幕和(最小宽度:600px)”>

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

功能){
  var查询=文件。查询选择单元格'.mediaquerydependent')全部的=查询。长度库尔= 无效的阿特尔= 无效的虽然全部的——) {库尔=查询[全部的]
    如果 库尔数据集.媒体 & &窗口。媒质库尔数据集.媒体).比赛) {
      对于 阿特尔在里面库尔数据集) {
        如果 阿特尔!= “媒体”) {库尔设置属性阿特尔库尔数据集[阿特尔])
        }
      }
    }
  }
}))

它的作用是:

  1. 我们使用查询选择单元格要获取所有需要MediaQuery的元素,请检查并循环它们(使用reverse while循环)。
  2. 我们测试元素是否具有数据媒体属性,如果其中定义的查询为真
  3. 然后我们循环通过所有数据-带前缀的属性,并添加带值的无前缀属性(省略媒体属性)

换言之,如果满足最小宽度为600像素的条件,我们的图像示例将变为:


              
              数据SRC=
              “http://placekitten.com/500/500” 
             
     数据ALT=“小猫” 
     =“依赖MediaQuery” 
     数据媒体=“屏幕和(最小宽度:600px)”>src=“http://placekitten.com/500/500”alt=“kitten”>

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

但是,如果javascript不可用怎么办?

当javascript不可用时,您也没有问题。既然你已经进入了一个仙境,就请一个骑着独角兽的流浪魔术师来帮你。

不过说真的,当然,如果脚本失败,您可以提供可用的预设。只需添加HREF只有在需要时才加载和替换的回退。


              
              雷尔=
              “样式表” 
              =
              “依赖MediaQuery” 
             
      HREF=“标准CSS”
      数据媒体=“屏幕和(最小宽度:600px)” 
      数据HREF=“绿色CSS”>

这将载入标准化CSS无论如何,用绿铯当屏幕宽度超过600像素时。

马上,此脚本仅在页面的第一次加载时运行,但是你可以很容易地在调整窗口大小时运行它,也是。如上所述,甚至还有一些事件会被MatchMedia解雇,但根据原始文章的测试,这在iOS中仍然是失败的,所以我想保证它的安全。在所有MediaQueries都提供给用户在某个设备上可以消费的东西之后——调整窗口大小以查看更改的用例更多的是开发人员的事情。

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

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

星期一,12月17日,二千零一十二

你也许看到过塞查今天带着他们的速记本降落的巨大水花。HTML5演示如何使用HTML5,CSS和javascript你可以制作一个响应速度惊人的Facebook版本。你可以查看Vimeo上的演示

所有的细节都在他们的岗位上。”FastBook的制作HTML5爱情故事“。我看到了,就说“该死的,太棒了”。作为一个Android用户,当我试图滚动浏览大量数据(也在Twitter上)时,我曾多次看到本机应用程序崩溃。所以这可能是三星的一个实现问题)和HTML5演示非常顺利,令人信服。

当然,我的开发人员认为这肯定有问题——太顺利了,betway体育官方网这太“销售演示”。当然,我得到了备份——博客上的评论指出,这不是在一个Web视图中运行的,在这个视图中会出现很多性能问题,Mozilla内部邮件已经抱怨演示不支持WebKit以外的任何其他浏览器——没有火狐浏览器,没有歌剧,也没有窗户。去互联网!有人打错电话了HTML5没有任何支持。

然后我停了下来。并反映出来。想了想我们在这里做什么。工程师们似乎有如此大规模的巴甫洛夫式反应,他们希望找到某些东西的缺陷,而不是着眼于利益。

巴甫洛夫犬
恐怖漫画车辙

对,这只适用于WebKit,哪一个是坏的HTML5不仅仅是WebKit。Sencha也错误地宣称这是在向HTML5不接受自然HTML5作为浏览器不可知平台。但这是营销战。这是一个演示,展示了当你投入精力的时候事情可以工作。这是对扎克伯格在99%的案例中错误引用的声明的直接回应。HTML5当时不是Facebook的正确选择。但我仍然发泄我的失望

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

当然,推特上的推特流是由人们告诉Sencha离开和许多想看的人组成的。HTML5失败(尽管这对他们的生活没有任何影响)喋喋不休地抱怨HTML5以及浏览器不一致的祸根——每次你说的另一个巴甫洛夫式的反应HTML5.

踢球员来了,不过。Sencha的很多人都同意并解释说这是一个快速的技术演示,因此只在WebKit中工作。Jared Nicholls他们的高级软件架构师保持简洁

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

所以,我不是在挥动我的手指,抱怨那些本来可以但没想到的事情,而是在试图让对话变得更有效。让我们看看这是怎么回事。

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

如何阅读绩效文章

星期一,12月17日,二千零一十二

总结:性能文章非常好,值得一提,但是它们在时间上是非常固定的,而且它们的发现的保质期可能非常短。这会导致伟大的思想和技术过早地被丢弃,而不是改进或修复它们的实现。小心操作。

每隔几个月,我就会看到一些文章,介绍有人是如何喜欢我们的一些新功能的。HTML5使用起来有多简单。毫无疑问,性能专家将发布一篇后续文章,警告每个人使用这些技术的速度都很慢。

表演很性感,而且表演非常重要.我们的最终用户不应该遭受我们的错误。毫无疑问。毫无疑问,那简单美国石油学会而且,一个建立在现有开发实践之上的系统将被不止一个更加模糊但性能更好的系统所使用。

这就是我们陷入的困境。本地存储非常简单,但能表现得很好,使用websql或indexdb要困难得多,但性能更好,但在浏览器中不受一致支持。上的数据属性HTML元素是将额外信息添加到HTML保持它们易于维护,但患有阅读和写作DOM总是很慢。

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

另一方面,那些只想使用技术的设计人员会写一些文章,说明并非所有的事情都是糟糕的,因为他们从来没有达到这些测试用例用来想出一个明智的样本来以这种或那种方式做出一个声明的强大测试量。

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

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

图书馆热爱实施者

图书馆,另一方面,识别问题并在内部解决。几乎您看到的每个jquery脚本都与DOM在迭代中读写,在引发回流之前无法进行缓存或连接,如果在纯JavaScript中实现,这将是一个绝对的噩梦。图书馆的创建者学会了这一点,并必威体育下载吞下了药丸——实施者喜欢使用DOM,他们只是不喜欢DOM API.在属性中存储一些东西可以很容易地进行更改,这意味着人们不会弄乱您的代码。这就是为什么库使用缓存机制和延迟写入以及DOMFacade允许开发人员使用和滥用DOM没有执行惩罚(在许多情况下,当然不是全部)。

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

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

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

小心阅读

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

  • 技术的使用会导致问题–如果存储大量大型视频会减慢本地存储速度,这并不意味着将其用于几个小字符串,这将使其成为“不使用技术”。
  • 性能问题的影响是什么–如果所做的操作将页面加载延迟10秒,这是个问题,如果问题只存在于某些浏览器和特定类型的数据中,少那么
  • 有解决办法吗—实施者可以做些什么来继续使用该技术,收获它的回报,但不会引发问题?
  • 催化剂是什么–很多时候,只有过度使用性能问题才会真正显示出来。DOM例如,当缓存不是问题时,当你不断读写相同的值时,虽然是

当然,性能专家会告诉你这是一个给定的。人们应该用一点盐来计算这些数字,并根据自己的实现对其进行测试。好,这不是出版工作的方式,这当然不是在140个字符的媒体中引用的方式。

当前示例

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

斯托扬·斯特凡诺夫的有效的HTML5数据-属性“谈论HTML5数据属性的速度很慢。我们有图表作为证据,我们有一个交互式测试要在浏览器中运行。当然,Twitter上充斥着“数据属性缓慢且糟糕”。这篇文章的有趣部分对我来说,然而,在最后两段:

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

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

这个,对我来说,错过的机会在这里吗?现在,数据属性在连接到DOM节点,这意味着您对DOM每次读取数据集属性时。这没什么意义——为什么你需要额外的美国石油学会那么呢?

斯托扬所写的虚构的数据实用程序是本文应该从什么开始的。当然,我可以看到他的计划,让人们开始玩这个想法,从而深入到主题。这太好了,但这意味着读者需要这样做,或者检查评论或后续行动以找到解决方案。这些天的文章的保质期比过去短得多——展示一个解决问题的方案比展示一个解决问题的蓝图更有意义。这不是车间。

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


              
              身份证件=
              “福” 
              数据X=
              “200” 
              数据Y=
              “300”
              >
              >
             

同样,您也不能用这样一个性能更好的脚本来替换它:

数据。设置div {X 二百Y 三百})

它们不是一样的——从长远来看。前者更易于维护,并将所有数据保持在同一位置。后者将信息传播到两个文档和两种语言中,这与数据属性的整体概念大相径庭。

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

我不是说这篇文章不好——我认为最后两段让它更加客观。不过,我要说的是,它已经准备好被错误地引用,并导致阻碍基本问题解决的真理。

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

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

[值得一看]独立游戏-电影

星期五,12月14日,二千零一十二

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

独立游戏电影

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

你可以看拖车在这里

就像任何了不起的事情一样,这部由詹姆斯·斯威斯基和莉莎妮·帕乔特执导的电影起源于加拿大,在接受采访时,它跟随了一些独立游戏开发商:埃德蒙·麦克米伦和汤米·雷芬斯《建筑与航运》。超级肉食男孩,菲尔费什试图完成并获得释放权非斯还有乔纳森·布洛辫子.

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

我特别被采访时看到的是那些处理在线反馈的制造商,对比赛结果的要求,憎恨邮件,奇怪的评论,但也都对积极的反馈反应很差。作为一个在网上发布很多东西并且免费传播我所做的任何事情的人,我可以非常了解这些部分。

总之,这是任何想在我们的市场上发表文章的人都必须注意的——不仅仅是游戏,但真的。你不会得到汽车追逐和射击,但它仍然是一个非常值得你的电影。

快速回顾:粉碎杂志的移动图书

星期三,12月12日,二千零一十二

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

三维中的灰色物质

这本书,总体而言,设法收集了大量被称为“无所不知”的作家,每个人都根据他们的主题发表了一篇文章。详细地说,我们有以下内容:

  • 手机里发生了什么?彼得·保罗·科赫
  • Stephanie Rieger的移动未来
  • Trent Walton的响应式设计策略
  • Brad Frost的响应式设计模式
  • 戴夫·奥尔森的手机优化
  • Dennis Kardys的手机动手设计
  • 乔希·克拉克为触摸设计

电子书版本还附带了额外的章节:

  • 手机用户体验Greg Nudelman和Rian van der Merwe设计的图案
  • Nathan Barry为iOS开发和设计
  • 开发和调试HTML5Remy Sharp的应用程序
  • 了解Sebastiaan de的Android平台
  • Arturo Toledo为Windows Phone设计

这本书总体上感觉非常全面,在涵盖移动开发的所有方面都做得很好。所有的外观和感觉,目标观众和其他信息都被一个可爱的移动书籍生产资料如果你对此感兴趣的话,请向媒体报道。我在我的MacBookAir和我的Android设备上阅读了我想要的章节,在这两种情况下,它们都做得很漂亮,很容易接受。

布局预览和内容

我特别喜欢这本书从整体的角度涵盖了移动设备,让我们对市场有一个很好的了解PPK的章节以及详细章节中所需的不同技能。我也喜欢平台不可知论,也就是说,你从中学到的东西是全面适用的。必威体育下载太多的出版物或多或少都被蒙蔽了“这是如何为iOS做移动”的说明,这些说明将在半年内过时。这里的信息写得很巧妙,虽然它是当前情况的快照,但它的书写方式可以解释什么可以在以后使用,什么可能只是暂时的问题,不值得我们去破坏我们的大脑。

我还没读过额外的章节,这是一种耻辱,就像我对它的偏见一样HTML5-我很想把雷米的那一章作为主要书籍的一部分。我很喜欢安卓系统,iOS和Windows特有的数据是很好的,但真正的HTML5这一章本来是不错的。

这就是说,戴夫·奥尔森的这一章对我来说是一个很大的启示——它的标题并没有给它足够的荣誉。其中有一些信息可以让你在优化你的网络产品的过程中立于不败之地,它会给你留下链接和文章,让你忙上几个月。它有点像一本书,但这很值得你花时间。

总的来说,我认为这本书是公司或代理图书馆的一个很好的补充。作为一名专家,它可以给你留下一些你无法触及的章节,也可以给你留下危险的“知识”,但是一个团队阅读适用的章节,然后汇集他们的知识和学习,可以使用这本书进入未来的移动踢腿和尖叫。必威体育下载踢屁股。