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

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

4月份存档,2015

“开放”的新挑战

周二,4月28日,2015

这些是我即将在he上发表的主题演讲的笔记欧安组织会议在地拉那,阿尔巴尼亚。

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

在我们开始之前,虽然,让我们用我们的工作来概括一下公开的影响。

在公开的环境中创作是一种充满力量和恐惧的体验。好处很明显:

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

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

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

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

open的一个主要问题是人们并没有真正意识到它的工作量。以开源方式发布产品是非常流行的。但是,在许多情况下,这意味着要把代码放到Github上,并希望有一个神奇的受众来帮助您并解决您的问题。这不是开源的繁荣之路。

开源和相关的工作方式并不意味着你可以免费提供你的工作,然后就此打住。这意味着你可以利用它,你培养它,并且为了群众的智慧,你愿意放弃控制。这是双向的,三方,数据和信息的多种交换方式。你付出一些东西,但你也会得到很多回报,两者都值得同样的关注和尊重。

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

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

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

如果你想对它敞开心扉,就按我们的方式去做。

具有讽刺意味的是,开放的另一个问题是,开放的社区可能给人一种不受欢迎和咄咄逼人的印象。我们是一群充满激情的人,非常关心我们所做的。这会让我们显得过于防御性和侵略性。许多长期存在的开放社区都有适当的方法来确保质量,这些方法乍一看可能是令人畏惧和反感的。

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

我们不是在与技术竞争——我们是在与营销和技术宣传竞争

我认为open最大的问题是它已经成为一种工具。许多本质上可以替代开放web的封闭环境都由开放技术提供支持。这就是它们的伟大之处。水管网是敞开的。我们是一个有用的齿轮,公平地说,许多封闭的公司也支持并回馈这些产品。

另一方面,当你谈论一个完全开放的产品并试图把它带给最终用户时,你正面临着一场艰苦的战斗。几乎每一个开放的替代封闭(或部分开放的系统)的斗争,或者——如果我们对自己诚实的话——都失败了。火狐操作系统并没有让世界陷入困境,它为急需它的人提供了连接。Ubuntu手机并没有引起太大的轰动。Ello和Diaspora并没有在这个世界的facebook和twitter上留下印记。欧雅游戏机很快就负债累累,现在正寻求被收购。

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

长寿已死

我们热爱技术。我们喜欢网络。我们喜欢它让我们成为什么样的人,我们庆祝我们为之奋斗的胜利。我们为选择的自由而战,我们为数据保留和数据所有权而战我们担心我们的数据去了哪里,如果它在未来可用或者会发生什么。

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

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

在英国,我住的地方,如果没有数字电视协议,几乎不可能上网。我们使用互联网来消费cd销售者提供给我们的内容,DVD,和蓝光。而那些在网上消费的人也会从这些原始资料中获取内容。真正的网络创意,写作和出版正在走下坡路。当某样东西总是可用时,你不再关心它。它只是一个给定。

按设计关闭,可消费的天性

这真让我害怕。这意味着那些一直与开放网络和软件的自由本质作斗争的人们已经胜利了。不是通过更好的解决方案或更多的选择。而是提供便利。我们允许比我们有更好的市场营销的公司接管并告诉人们,通过留在他们的世界里,每件事都很简单,而且很神奇。人们为了方便而放弃选择和拥有信息的自由。这是很难克服的。一切就绪后,就可以为什么要努力?

这款应用程序的格式就是这样开始的。让软件成为可消费产品是一个天才的想法,易腐产品。我们很久以前就从桌面应用程序转向基于web的应用程序。电子邮件,日历,甚至文档处理也是这样,谷歌展示了如何做到这一点。

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

可消费的,易腐产品更容易销售。这就是为什么市场很快抓住了这个机会并将其定义为新的,创建软件的现代方法。

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

在人多的地方发展

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

徒劳的

它似乎已经输了。它有,在某种程度上。但已经有迹象表明,目前的情况不会持续下去。人们已经厌倦了应用程序,经常被它们提醒要为它们做事。人们厌倦了把内容放在一个不能让他们保持兴奋的系统中,几乎每个月都要从一个产品跳到另一个产品。几乎每一个平台都朝着轻量级的消息传递系统而不是生命流的方向发展,这表明有一种不顾一切的努力来保持人们的兴趣。

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

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

我们正处在泡沫之中,它几乎要破裂了。当一切尘埃落定,人们开始怀疑,怎么会有人愚蠢到把数十亿美元花在那些承诺盈利、每隔几个月就调整战略的公司身上。就像我们在第一次互联网繁荣时期一样。

我们是来帮忙的!

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

这就是我需要你的地方。开放源码和广大开放爱好者。我们现在的工作是证明我们所做的是有效的。我们所做的很重要。我们所做的不仅仅是现在,但也在未来。

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

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

保持简单:编写一个旋转木马

周三,4月8日,2015

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

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

所以,让我们尝试构建一个非常简单的旋转木马,它可以跨浏览器工作而不会太过复杂。你可以看到结果在GitHub上获取代码.

HTML旋转木马的结构

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


              
              =
              “carouselbox”
              >
             
  
               
               =
               “内容”
               >
              
    
               
                >
               >
    
             
              >
             2>
    
             
              >
             3.>
    
             
              >
             >
  >
>
  1. 2
  2. 3.

使用这个,还有一点CSS我们有一些很好用的东西.这是我们的起点。

的基本CSS

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

.carouselbox {
  字体类型:海维提卡,无衬线;
  字体大小: 14像素;
  宽度: 100 px;
  位置: 相对;
  边缘: 1EM;
  边境: 1 px 固体 # ccc;
  不必: 2 px 2 px 10px # ccc;
  溢流: 隐藏的;
}
.content {
  边缘: 0;
  衬垫: 0;
}
.content{
  字体大小: 100 px;
  边缘: 0;
  衬垫: 0;
  宽度: 100%;
  list-style: 没有人;
  text-align: 中心;
}

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

所有旋转木马项目可见

旋转木马的视觉效果CSS

你会发现很多carousel脚本会遍历所有项,或者期望每个类都有相应的类。然后,它们隐藏所有内容,并在每次交互时显示当前的内容。这似乎过分了,如果你仔细想想。我们只需要两个类:

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

我们现在可以硬编码:

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

所有我们需要显示和隐藏不同的旋转木马项目是改变高度的旋转木马容器和位置,除了当前的一个以外,在这个高度:

主动的 {
  高度: 130 px;
}
主动的{
  位置: 绝对;
  : 200 px;
}
主动的电流 {
  : 30 px;
}

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

旋转木马改变项目

与JavaScript交互

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

在这种情况下,我在我们的控件中添加了以下控件HTML:


              
              =
              “carouselbox”
              >
             
  
               
               =
               “按钮”
               >
              
    
                
                =
                “上一页”
                >
               γ
                 
                 =
                 “幕后”
                 >
                以前的>
    >
    
                
                =
                “下一个”
                >
               
      
                 
                 =
                 “幕后”
                 >
                接下来>γ>
  >
  
               
               =
               “内容”
               >
              
    
               
                >
               >
    
             
              >
             2>
    
             
              >
             3.>
    
             
              >
             >
  >
>
  1. 2
  2. 3.

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

主动的 .buttons {
  衬垫: 5 px 0;
  背景: # eee;
  text-align: 中心;
  z - index: ;
  位置: 相对;
}
.carouselbox 按钮 {
  边境: 没有人;
  显示: 没有人;
}
主动的 按钮 {
  显示: ;
} 
屏幕外 {
  位置: 绝对;
  : -2000 px;
}

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

只剩下JavaScript就可以让转盘工作了。这是:

旋转木马= 函数){
  var盒子=文件。querySelector“.carouselbox”);
  var下一个=盒子。querySelector“第二”);
  var上一页=盒子。querySelector“.prev”);
  var项目=盒子。querySelectorAll'内容li');
  var柜台= 0;
  var数量=物品。长度;
  var当前的=项目(0];盒子。分类表.添加“活跃”);
  函数导航方向) {电流。分类表.去除“当前”);柜台=柜台+方向;
    如果 方向= = = - - - - - - & &柜台< 0) {柜台=数量- - - - - - ; 
    }
    如果 方向= = =  & & 
        !项目(柜台]) {柜台= 0;
    }当前的=项目(柜台];电流。分类表.添加“当前”);
  }下一个。添加事件侦听器“点击”, 函数电动汽车) {导航);
  });前级添加事件侦听器“点击”, 函数电动汽车) {导航- - - - - -);
  });导航0);
}));

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

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

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

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

简单的旋转木马在行动

获得幻想

通过将项目放置在具有溢出隐藏的容器中来显示和隐藏这些项目,这在当今使用的任何浏览器中都应该是可行的——即使是那些应该退役的浏览器。我们所做的就是添加和移除CSS类,现在我们可以利用浏览器现在拥有的漂亮特性。使用过渡,不透明度和转换,我们可以添加一个漂亮的效果只有几行CSS:

Fancier旋转木马

主动的{
  位置: 绝对;
  : 130 px;不透明性: 0;
  变换: 规模0);
  过渡: 1s;
}
主动的电流 {
  : 30 px;不透明性: ;
  变换: 规模);
  过渡: 1s;
}

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

我们的JavaScript防弹

当使用中的浏览器不支持我们使用的某些javascript功能时,事情变得棘手。我们得到一个错误,东西坏了。因此,对我们使用的东西进行测试,只有在得到支持的情况下才继续前进,这是有意义的。在这段代码中,我们依赖于classList和querySelector,我们来看看这个:

如果 !文件。querySelector | | 
  !“班级名单” 在里面文件。身体)) {
返回 ;
}

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

奖励回合:叠加CSS

最后要提到的一个技巧是,如果您要直观地堆叠传送带的所有元素,并且只使用不透明度来混合它们,那么链接就有问题。你总是会得到第一项的链接,不管是哪一个。

解决这个问题的诀窍是在您的CSS:

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

你可以在这里看到这个工作区的运作.

现在去哪里?

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

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

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

周三,4月1日,2015

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

Redact.js徽标

redact.js允许您在设备之间、桌面和移动设备上拥有非常快速的JS应用程序。该框架只有几个字节,并使用gulp来缩小和准备使用。

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

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

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