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

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

4月份存档,二千零一十五

“开放”的新挑战

星期二,4月28日,二千零一十五

这是我在他即将举行的主题演讲的笔记Oscal会议在地拉那,阿尔巴尼亚。

今天我想谈谈“开放”的新挑战。开源的,创意公地,过去的许多想法现在已经成为主流。敞开心扉很酷,很多公司都这么做是有道理的。问题是,就像任何时尚和令人兴奋的事情一样,如果没有正确的调子,人们是不会跳上潮流的。这是我们面临的一大挑战。

在我们开始之前,不过,让我们回顾一下开放工作带来的影响。

在开放的环境中创造是一种赋权和恐惧的体验。好处很明显:

  • 你分担负担-人们可以帮助你反馈,为你做研究,翻译你的作品,为您构建到其他环境的适配器。
  • 你很有可能在没有你的情况下继续工作——正如你所分享的,当你转向其他挑战时,其他人可以在你的工作上做文章;或者被公共汽车碾过。
  • 分享的感觉很好——这是一种不花你一分钱的利他主义,你会看到直接的效果。
  • 你会成为更大事物的一部分——人们会以你可能从未想过的方式使用你的工作,从来没想过。看到这一切真是令人兴奋。

公开工作的缺点是基于反馈和人与人之间的互动。

  • 你一直处于监视之下——当你公开分享你正在进行的工作时,你无法隐藏事情。这可能是一个好处,因为这意味着,当你不断受到审查时,你的产品质量更高。它可以,然而,同时也要让自己感到压抑,因为你更担心别人对你的工作的看法,而不是工作的结果。
  • 你必须很好地分配你的时间——反馈将是24/7的,在很多情况下,不是以一种令人愉快的格式,或者——在某些情况下——甚至是易懂的形式。
  • 你必须选择你的战斗——人们会提出各种各样的要求,很容易迷失在取悦观众的过程中,而不是完成你的产品。
  • 您必须为必须遵守现有的流程做好准备——多年的开源工作产生了许多最佳实践,而且非常坦率的人很快就会要求您遵守这些流程,或者远离草坪。

嘿酷孩子们,我们在做公开的事!

公开的一个主要问题是人们并不真正了解它的工作量。将产品作为开放源码发布是非常流行的。但是,在许多情况下,这意味着将代码放在GitHub上,并希望有一群神奇的用户来帮助您解决问题。这不是开源如何繁荣。

开放源码和相关的工作方式并不意味着你可以免费的把你的工作交出来,然后就这样做了。它意味着你让它可用,你培养它,你愿意为了大众的智慧而放弃控制。这是双向的,三方,通过多种方式交换数据和信息。你给了我一些东西,但你也会得到很多回报,两者都值得同样的关注和尊重。

我发现越来越多的公司和个人认为公开采购不是一种工作方式,但作为广告和招聘活动。产品公开发布,但没有基础设施或人员来处理开销,这意味着。它已经成为一个丝带附加到您的产品-“也可在GitHub”。

我们以前也经历过这种情况——mashup web和开放api向我们的开发人员承诺,我们可以构建伟大的应用程序,通过使用网络的力量扩展和奇妙的产品。我们选择内容提供者并将其与开放式API混合,并在这些数据之上构建接口。这真的很快就消失了,今天我们玩的大多数API要么被关闭要么成为付费游戏。

其他公司把“开放”看作是一种让那些不再受支持的事物保持活力的手段。这就像一个神话般的农场,家里的狗去了,当孩子们问你带他去哪里,当他老了,病了。“别担心,产品不再符合我们公司的核心业务,但它将继续存在,因为它现在是开源的。它几乎是一个无用的东西。我们需要得到支持的产品,维护和使用。简单地免费分发东西并不意味着这会发生在那个产品上,因为这对维护人员来说意味着很多工作。在许多情况下,关闭产品是更诚实的事情。

如果你想开诚布公,那就按我们的方式去做

开放的另一个问题是——具有讽刺意味的是——开放的社区可以被看作是不具吸引力和侵略性的。我们是一群充满激情的人,关心我们的工作。这会让我们显得过于防御和好斗。许多长期开放的社区都有适当的方法论,以确保第一眼看到的质量是令人望而生畏和令人不快的。

很多公司都明白开放的价值,但正因为如此,他们对开放自己的产品犹豫不决。开放社区给人的印象是非常苛刻的。当你公开发布一些东西时,你很容易得到大量不好的反馈,但是你不能在所有的框中打勾。这是一家大公司里任何试图释放一些封闭的东西的人的毒药。你必须向公司的业务人员证明你的工作是正当的。如果你所要展示的只是铺天盖地的负面反馈和消极攻击“哦,看,Evilcorp正试图表现出很好的“评论,他们不会满意你的。

我们不是在与技术竞争,而是在与市场营销和技术宣传竞争。

我看到的最大问题是它已经成为一种工具。许多本质上是开放网络替代品的封闭环境都是由开放技术驱动的。这正是他们所擅长的。水管网是敞开的。我们是一个有用的齿轮,公平地说,许多封闭的公司也支持和回馈这些产品。

另一方面,当你谈论一个完全开放的产品并试图把它带给最终用户时,你们面临着一场艰苦的战斗。几乎每一个开放的替代品都会在封闭(或部分开放的系统)的斗争中,或者——如果我们对自己诚实的话——失败。火狐操作系统并没有让世界陷入困境,它为急需它的人提供了连接。作为替代方案,Ubuntu手机并没有引起轰动。埃尔洛和流亡海外的人们并没有影响到这个世界的脸谱和Twitter。Ouya游戏机很快就负债了,现在正寻求买断。

原因是我们在愚弄自己,当涉及到目前的市场和它如何使用技术。

长寿已死

我们热爱科技。我们喜欢网络。我们喜欢它如何让我们成为我们自己,我们庆祝我们为保持它的开放而战斗。我们为选择的自由而战,我们为数据保留和数据所有权而战,我们担心数据的去向,如果它将来可用或发生了什么。

但我们不是我们的观众。我们的观众是数字本地人。看到电脑的人,智能手机和互联网。有些人甚至不知道离线意味着什么,而且,谁看了大量的流媒体电视节目,而没有一种恐惧的感觉,有多少成本,如果它将工作。如果它停止工作,谁在乎?我们做点别的吧。如果我们的电话或电脑坏了,好吧,我们换一个。或者去商店帮我们修理。如果手机对于下一版本的操作系统来说速度太慢,好的。显然我们需要买一个更好的。

互联网和技术已经成为一种商品,比如自来水和电。当然,世界各地的情况并非如此,在许多情况下,也不是当你在合同国以外旅行时。但是,对于那些从未经历过的人,没什么好担心的。一点一点地,网络已经成为新的电视。人们在不知道它是如何工作或真正参与其中的情况下消费的东西。

在英国,我住的地方,如果没有一些数字电视交易作为套餐的一部分,几乎不可能实现互联网连接。互联网接入是我们用来消费那些卖给我们CD的人提供给我们的内容,DVD,和模糊。而那些通过互联网消费的人也会用这些源材料中的内容来填充它。网上真正的创造力,写作和出版正在走出困境。当某物总是可用时,你不再关心它了。它只是一个给定。

被设计,关闭自然消耗品

这真让我害怕。这意味着那些总是与开放网络和软件的自由性质作斗争的人们已经赢得了胜利。不是通过更好的解决方案或更多的选择。但提供便利。我们允许市场营销比我们强的公司接管并告诉人们,通过留在他们的世界,一切都很容易,而且神奇地工作。人们为了方便而放弃选择和拥有信息的自由。这是很难击败的。当一切正常的时候,为什么要付出努力?

这是应用程序的最初形式。让软件成为可消费产品是一个天才的想法,易腐产品。很久以前,我们从桌面应用转向了基于网络的应用。电子邮件,日历,即使是文档处理也已经做到了这一点,谷歌也展示了如何做到这一点。

随着智能手机的革命和领先平台对开放技术的缺乏支持,该应用程序重新诞生:一个定制的软件,以封闭的格式为单一平台编写,需要操作系统特定的技能和工具来创建。对于终端用户,它是一个图标。它运作良好,它看起来很棒,而且与操作系统完美结合。这并不奇怪,因为它是专门为它写的。

消耗品,易腐产品更容易销售。这就是为什么市场很快就抓住了这一点,并将其定义为新的,创建软件的现代方式。

更糟糕的是,而不是指出智能设备的操作系统缺乏对可互操作和标准化技术的支持,科技媒体指责说,这些技术没有像本土同行那样对它们进行研究。

发展人民生活

这种封闭式的、良好的业务和开放式的、尚未准备好的、难以做到的不断强化已经成为发展世界的一件事。现在大多数产品都不是为网络创建的,独立于操作系统或平台。第一个调用端口是iOS,一旦成功了,也许Android。但只是在抱怨了碎片化使其无法工作之后。在开放世界中,分裂一直是既定的。

傻瓜的差事

好像是开着丢了。它有,在某种程度上。但已经有迹象表明,目前的情况不会持续下去。人们已经厌倦了应用程序,并不断被提醒为他们做些事情。人们厌倦了把内容放在一个不能让他们保持兴奋的系统中,几乎每个月都要从一个产品跳到另一个产品。几乎所有平台都在向轻量级消息系统而非生命流的方向发展,这一重大举措表明,它们正竭力保持人们的兴趣。

人们瞄准的大市场是青少年。他们有很多时间,他们创造了很多互动,如果他们唠叨的时间够长,他们有父母的钱可以花。

这里的谬论是许多公司认为现在的青少年将来会成为他们产品的用户。当我回忆起我十几岁时的样子,这种情况发生的可能性很小。

我们处在一个泡沫中,它几乎就要破裂了。当尘埃落定,人们开始纳闷,怎么会有人会愚蠢到把数十亿美元花在承诺利润的公司上,而每隔几个月就会转投一次,当这些钱不来的时候,我们仍然会在那里。就像我们在第一次互联网繁荣时期一样。

我们是来帮忙的!

这就是我想要接近的。现在对于开放式网络和开放式技术来说,它看起来很可怕。是的,发生了很多事情,但很多都是口头服务,许多“开放解决方案”都是特洛伊木马试图将人们锁定到特定的服务基础设施中。

这就是我需要你的地方。开源和开放的一般爱好者。我们现在的工作是证明我们所做的是有效的。我们所做的很重要。我们所做的不仅仅是现在,而且是在将来。

我们通过开放来做到这一点。帮助人们从封闭走向开放。让我们做一名指导老师,当有东西没有完全打开时,让我们轻轻地推,而不是站起来。让我们展示一下,开放意味着你为现在和未来的用户和创造者而构建——不管什么是时尚的或闪亮的。

我们必须像其他人一样随着计算机的发展而发展。我们通过与封闭的不是试图替换它。这失败了,将来也会失败。我们不是来制造消耗品的。我们来这里是为了确保他们是由伟大的,可持续和健康的部分。

保持简单:对传送带进行编码

星期三,4月8日,二千零一十五

在我们这个“现代发展”的世界里,有一件事让我抓狂,那就是我们对过于复杂事物的迷恋。我们构建的解决方案,然后,为了“使它们更容易维护”,我们添加了一层又一层的复杂性。在许多情况下,这是一个愚蠢的任务,因为复杂的层次和必要的文档使人们不使用我们的解决方案。相反,在许多情况下,人们建造自己的,简单,同一事物的版本,并称之为高级。直到这个解决方案引起争议,整个舞蹈再次发生。

在本文中,我想以不同的方式来处理转盘的创建:尽可能简单,同时不破坏向后兼容性或具有任何依赖性。网络上发生了一些事情。JavaScript可能不加载,CSS功能因浏览器而异。我们不能告诉访问者要使用什么浏览器。作为优秀的开发人员,我们不应该创建看起来交互的界面,但是单击它们时什么也不做。

所以,让我们来尝试构建一个非常简单的旋转木马,它可以跨浏览器工作,而不会超出范围。你可以看到结果在Github上获取代码

这个HTML旋转木马的结构

让我们从一个非常简单的开始:传送带本质上是HTML。因此,基本HTML是这样的:


              
              =
              “CalouSbox”
              >
             
  
               
               =
               “内容”
               >
              
    
               
                >
               >
    
             
              >
             >
    
             
              >
             3.>
    
             
              >
             4>
  >
>
  1. 3.
  2. 4

使用此,还有一点CSS我们有一些很好用的东西。这是我们的出发点。

基本CSS

这个CSS这里使用很简单,但这也暗示了我们以后所依赖的一些功能:

.carouselbox {
  字体族海尔维蒂卡无衬线
  字体大小 14PX
  宽度 100px
  位置 相对的
  边缘 1EM
  边境 1PX 固体 C·CCC
  箱形阴影 2 px 2 px 10px C·CCC
  溢流 隐藏的
}
内容 {
  边缘 
  填充 
}
内容{
  字体大小 100px
  边缘 
  填充 
  宽度 100%
  列表样式 没有人
  text-align 中心
}

这里最重要的是相对地定位旋转木马盒,允许我们将列表项完全放在其中。这就是我们如何达到效果的方法。隐藏的溢出确保以后只显示传送带的当前项目。由于旋转木马上没有设置高度,而且物品还没有定位,我们现在看到了所有的物品。

所有转盘项目可见

旋转木马的视觉效果CSS

你可以找到很多旋转木马脚本,它们将循环遍历所有项目,或者期望每个类都有相应的类。然后,它们隐藏所有内容,并在每次交互时显示当前的内容。这似乎太过分了,如果你仔细想想。我们只需要两个课程:

  • 我们需要一个关于容器元素的类,它可以触发传送带的功能显示。这个应用于JavaScript,因为这意味着只有当浏览器能够显示效果时,外观和感觉才会发生变化。
  • 我们需要一个关于当前可见的carousel元素的类。这是最奇怪的一个。其他人都不需要上课。

我们现在可以硬编码:

           
  1. 3.
  2. 4
  1. 3.
  2. 4

我们只需要显示和隐藏不同的传送带项目,就可以更改传送带容器的高度,并将除当前高度以外的所有项目放置在此高度之外:

.active {
  高度 130px
}
.active{
  位置 绝对的
  顶部 200 PX
}
.active电流 {
  顶部 30px
}

你可以在这里看到它的作用。使用浏览器开发人员工具将“当前”类从一个项目移动到另一个项目,以显示不同的项目。

转盘更改项目

与javascript交互

为了让旋转木马工作,我们需要控制。我们还需要一些javascript。每当您需要一个控件来触发仅在执行javascript时才起作用的功能时,按钮就是要用的东西。这些神奇的东西正是为这个用例设计的,它们是键盘,鼠标,触摸并可使用笔。人人都赢。

在这种情况下,我在我们的HTML


              
              =
              “CalouSbox”
              >
             
  
               
               =
               “纽扣”
               >
              
    
                
                =
                “普雷夫”
                >
               
                 
                 =
                 “幕后”
                 >
                以前的>
    >
    
                
                =
                “下一个”
                >
               
      
                 
                 =
                 “幕后”
                 >
                下一个>>
  >
  
               
               =
               “内容”
               >
              
    
               
                >
               >
    
             
              >
             >
    
             
              >
             3.>
    
             
              >
             4>
  >
>
  1. 3.
  2. 4

现在,下面是语义标记的硬派可以插嘴的地方,并指责我写作。HTML这取决于javascript,而不是创建HTML使用javascript。他们这样做是正确的。没有什么能阻止我包装这一块HTML在一个DOM调用或内层html注销。然而,因为按钮是用来触发JS功能的,我觉得把它放在HTML这样我们就可以用更少的麻烦来设计它们。作为安全预防措施,我们将它们隐藏在非活动状态,并在应用“活动”类时显示它们:

.active 按钮 {
  填充 5PX 
  背景 γEE
  text-align 中心
  Z指数 10
  位置 相对的
}
.carouselbox 按钮 {
  边境 没有人
  显示 没有人
}
.active 按钮 {
  显示 
} 
屏幕外 {
  位置 绝对的
   -2000 PX
}

屏幕外的部分可以解释这些按钮的真正含义,因为三角形对某些人来说还不够。

剩下的就是JavaScript了。这是:

旋转木马= 功能{
  var盒子=文件。查询选择器“CalouSbox”
  var下一个=盒子。查询选择器“下一个”
  var普雷夫=盒子。查询选择器“.prev”
  var项目=盒子。查询选择单元格“容里”
  var柜台= 
  var数量=物品。长度
  var当前的=项目[]盒子。班级名册添加“活跃”
  功能导航方向 {电流。班级名册去除“电流”柜台=柜台+方向
    如果 方向= = = - & &柜台<  {柜台=数量-  
    }
    如果 方向= = =  & & 
        项目[柜台] {柜台= 
    }当前的=项目[柜台]电流。班级名册添加“电流”
  }下一步。添加事件侦听器点击 功能电动汽车 {导航
  }上一页。添加事件侦听器点击 功能电动汽车 {导航-
  }导航
}

正如你所看到的,依靠CSS它的内在爬行DOM,不需要任何循环。下面是这个脚本的内容:

  • 我们抓住一切HTML使用queryselector需要的元素。
  • 我们将计数器设置为0——这是跟踪当前显示的旋转木马的哪个项的变量
  • 我们读取传送带中的项目数量并将其存储在变量中——这允许我们循环传送带
  • 我们将当前项目设置为传送带中的第一个项目。当前变量将包含对当前可见元素的引用。当carousel状态发生变化时,我们所要做的就是删除CSS从中分类并将其转移到另一个
  • 我们将“active”类添加到容器元素中,以更改其样式并触发CSS功能如前所述。
  • 导航方法接受一个名为direction的参数,该参数定义了在旋转木马中是向后(负值)还是向前。它首先从当前的carousel项中删除“current”类,因此隐藏它。然后我们修改计数器,确保它不会超出可用项目的数量或低于0。在每一种情况下,我们都走向另一个极端,从而使转盘成为一个无休止的旋转转盘。我们定义新的当前项并添加类来显示它。
  • 我们将事件处理程序应用于按钮以向前和向后导航
  • 我们通过调用以0为值的navigation来显示第一个carousel项。

很简单,不是吗?通过允许CSS做它擅长的事,我们的javascript或多或少只是关于保持状态和转移类。

你可以在这里看到基本的旋转木马。。没什么花哨的,但它起到了作用。

简单的旋转木马

得到的

通过将项目放置在一个隐藏溢出的容器中来显示和隐藏项目,应该可以在当前使用的任何浏览器中工作——甚至是那些应该退休的浏览器。我们所做的就是添加和删除CSS类,我们现在可以利用浏览器现在拥有的漂亮功能。使用过渡,不透明度和变换,我们可以增加一个不错的效果有几行CSS

更漂亮的旋转木马

.active{
  位置 绝对的
  顶部 130px不透明性 
  转型 规模
  过渡 1s
}
.active电流 {
  顶部 30px不透明性 
  转型 规模
  过渡 1s
}

这样做的好处是性能处理,时间(如果你点击太快)由浏览器为我们处理。不需要计算FPS或者玩游戏超时。作为CSS是一种一次性的状态,这也意味着不支持这些特性的浏览器不显示这些特性,而是抛出一个错误。

防弹我们的javascript

当使用的浏览器不支持我们使用的JavaScript特性时,事情变得更加棘手。我们出错了,事情就坏了。因此,测试我们使用的东西是有意义的,只有在有人支持的情况下才能继续前进。在这段代码中,我们依靠类列表和查询选择器,我们来看看这个:

如果 文件。查询选择器 || 
  “班级名单” 在里面文件。身体 {
返回 
}

我们可以变得更加偏执,并确保DOM在继续之前,元素是可用的,但这是多余的。如果维护人员忘记将“carouselbox”类添加到主元素中,抛出的错误非常明显。

奖励回合:叠加CSS

最后要提到的一个技巧是,如果您要可视化地堆叠旋转木马的所有元素,并且只使用不透明度来混合它们,那么链接就会出现问题。你总是会得到第一项的链接,不管显示的是哪一个。

解决这个问题的诀窍是在您的系统中使用用户“指针事件:none”CSS

.主动li{位置:绝对;top: 130px;指针事件:无;透明度:0;变换:比例(0);转换:1s;.active li.current top:30px;指针事件:auto;不透明度:1;变换:比例(1);过渡:1s;

您可以在这里看到这个解决方案的实际应用

现在去哪里?

作为开发人员,现在最自然的动力就是增强这一点,以允许用户这样做定义要显示的不同的起始元素,要定义许多可以使用数据属性选择的预设效果,允许非循环的旋转木马,并定义美国石油学会允许页面上的其他组件与传送带交互。和一个美国石油学会创建、删除和洗牌旋转木马的项。而且,所有这些都是很好的练习,但让我们问问自己:我们这样做是为了谁?

我们现在在网络平台中内置了如此惊人的功能。也许是时候停止编写完美的通用可重用小部件了,继续使用简单的东西,让人们在需要时扩展它们了?谁知道呢,不为他们工作,人们可能会学会自己成为更好必威体育下载的编码员。

Redact.js–使设备之间的每秒60帧变得简单

星期三,4月1日,二千零一十五

现在很多人都在发布惊人的框架,所以我想我应该去研究一个固执己见的微观框架,了。

JS标志

JS允许你在设备上,桌面和移动设备上快速运行JS应用。框架只有几个字节,并使用gulp来缩小和准备使用。

主要的诀窍是避免HTML在用户与其交互之前进行渲染。在许多情况下,这是错误的,因为一些JS没有加载。我想,然而,为什么不抓住这个机会?

阅读更多有关Github上的Redact.js下载源文件在你自己的解决方案中使用它。

在伦敦用爱建造,英国现在是4月1日00:27。