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

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

8月份存档,二千零一十六

开发者布道者/倡导者做什么?

星期一,8月29日二千零一十六
我爱它!它是什么?

今天我被要求定义开发人员的角色传福音者在我们公司的招聘活动和大学宣传活动中展示幻灯片。这是一个很好的机会,可以列出我们在这份工作中要做的所有任务,以及我们为什么要做这些任务。读一遍可能会对你们有帮助,以及一个很好的资源,当人们再次问你“但是,你还会写代码吗?”

第一件事:每当你写这个话题的时候,都会有一场关于职位的大讨论。”betway体育官方网传福音者这是多么可怕,带有宗教色彩等等。如果这是困扰你的问题,请在下面选择您想要阅读的内容,您的浏览器将相应地对其进行更改,以使您安心:



现在,什么是开发人员传福音者?作为在开发人员中定义传福音者手册:

一个开发人员 传福音者是发言人,在公司及其技术人员和外部开发人员之间进行协调和翻译。

做一个这样的人你需要知道什么?首先有必要的技能:

  • 伟大的开发技能-创造和解释软件和产品
  • 优秀的沟通技巧-这个工作是关于接触,倾听和提炼信息
  • 优秀的人际交往技巧-你应该收集联系人,让他们高兴

还有一些重要的技能需要具备:

  • 圣人的忍耐-你需要一遍又一遍地解释你的工作,并为自己没有“不写代码”而辩护
  • 强烈的独立意识-你的工作是帮助沟通你的声音。你不是做销售的。
  • 优秀的自我组织能力–你经常在路上,如果你不小心,你很快就精疲力竭了,或者被一大堆要求淹没了。

作为一名开发人员传福音者跨多个部门的角色。你的工作就是成为一个沟通者。虽然你很可能向工程部门汇报工作,你需要花很多时间让不同的部门相互沟通。因此,内部沟通技巧非常重要。你的工作也会影响其他人的工作(PR,合法的,审稿,市场营销)。要意识到这些影响,并确保在你接触他们之前与他们交流。

作为一个翻译,您需要完成出站(公司到人员)和入站(人员到公司)任务。让我们列出其中大部分:

出站的任务

成为社交媒体

提供一个询问公司或产品的个人渠道。与公司账户相比,人们对一个人的反应要好得多,与他们的互动也更多。做你自己——任何时候你都不应该成为一个公司的销售人员。做分类——给人们指出一些资源来使用,比如反馈渠道,而不是代表他们说话。不要为你的同事做决定。帮助他们,不要增加他们的工作量。

与竞争和市场保持同步

你是现场的耳朵-你的工作是知道竞争对手在做什么,是什么让人们兴奋。使用你的竞争对手的产品,看看什么对你和他们的用户有效,然后把反馈给你的团队。发现趋势并报告给你的公司。

创建公开可用的软件产品

你需要开发软件产品来跟上技术的发展,并向你的观众展示你不仅仅是在说话,而且你知道你在做什么。这些应该是公开的。在许多情况下,你的公司不能像你一样自由发布。向世界表明你是值得信任的。构建产品还允许您使用外部开发人员使用的工具,并将您的经验反馈给您的公司

参与其他产品

参与其他人的开源产品。这样你就知道了使用它们的痛苦和快乐。你的工作是可以胜任的。通过向其他产品提供有益的贡献,人们会根据您的工作和作为社区成员的行为来评价您,不是作为一个公司的人。分析其他产品的运行方式可以为您的团队提供很好的反馈。

参与公众讨论

很多讨论都发生在你公司之外,在StackOverflow这样的通道上,松弛,Facebook群组,黑客新闻等等。你应该在一定程度上监控它们,让它们可见,在讨论激烈的地方提供事实。这些都是在交流中寻找新的有影响力的人和合作伙伴的好地方。

参与其他出版物

参加你自己和公司以外的出版物可以巩固你作为思想领袖和影响者的地位。为杂志写,参加播客和访谈系列。帮助其他人使他们面向开发人员的产品起步——即使他们是你的竞争对手。

创建视频教程

创建短,内容丰富、令人兴奋的视频是接触新粉丝的好机会。确保这些都是私人的——如果有关于产品的视频,帮助产品团队构建一个。说明了为什么关心一个特性。保持这些快捷简单,不超量产生。这句话的意思是“嗨,看看这个!”

参与和帮助活动

在活动中出席并举办讲习班。介绍您喜欢的活动组织者、同事或其他演示者。促进活动。在活动中帮助市场营销人员和同事使你的形象有用并产生效果。

作为内部团队的“防火墙”

从事产品开发的人应该把时间花在这上面——而不是在网上与人争论
你的工作就是接受负面反馈,并将其转化为有成效的结果
这意味着在许多情况下,在与团队一起解决问题之前,需要更详细的报告。
它还意味着管理预期。仅仅因为竞争对手有一个很酷的新事物并不意味着你的公司需要效仿。解释为什么。

帮助处理有影响力的人

如果你把工作做好,经常和别人交谈,其他人所谓的“影响者”就是你所说的朋友和联系人。向他们展示你有多在乎他们,让他们预览你要做的事情。确保公司与他们之间的沟通能够通过你,因为这样可以减少外联的尴尬。找到新的有影响力的人,和你的公司谈谈他们。

入站任务

了解最新情况并参与产品开发

没有办法成为一名开发人员传福音者对于一家公司,如果你不知道你公司的产品。你需要和产品一起工作,只有这样,你才能鼓舞人心,集中精力改进它们。开发这些产品还会教会你很多关于它们是如何创建的,这有助于从外部筛选问题。

保持产品团队和内部工程的最新状态

向你的产品团队和工程师汇报是很重要的。这包括对你自己产品的反馈,但也有正面和负面的反馈。这还包括将团队介绍给需要在新特性上进行协作的人员进行交流。

增强内部团队的消息传递

你的同事带来了很棒的内容,你的工作就是让它接触。通过广泛传播并以一种可以理解的方式向不同的听众解释来扩大他们的信息。告诉其他有影响力的人你的团队有哪些直接的信息渠道。

指导和提升内部人才

你能代表你的公司真是太好了。但有时直接在产品上工作的人的声音会产生更大的影响。指导公司员工并在社交媒体和活动中宣传他们的存在。联系会议组织者和内部人员——确保与他们的经理确认他们是否有空。帮助人们展示和准备外联材料。

报告活动和活动的成功

参加活动或开展活动应该是工作的一半。另一半是向公司里的人证明这是值得的。一定要收集你收到的问题,你学到的很棒的东西,并找到一个很好必威体育下载的方式与他们关心的团队沟通。记录那些有效的和无效的活动——这对于市场营销来说是很好的信息。

帮助组织活动

参与公司组织的活动是很重要的。试着不要被套住去参加这些活动——相反,建议去指导人们去那里。主动参与到这些活动的内容板中——你不会想被一些你不同意的大型新闻稿吓到的。利用你的影响力为你的活动寻找外部演讲者。

与公关工作,法律和市场营销

你的工作与那些部门有许多重叠。做一个好同事,帮助他们,你就可以得到更多的预算和渠道,你甚至不知道。确保你在工作中的言行不会引起任何法律问题。

向产品团队提供建设性的反馈,并得到问题的解答

你被视为一个可接近的渠道,询问有关你的产品的问题。确保通过您的请求得到迅速跟进。向你的内部团队指出沟通问题,并帮助他们解决这些问题。利用外部反馈要求改进自己的产品。当你离主题太近时,很容易忽略问题。

整理外部反馈并转化为建设性反馈

你的同事正忙着生产产品。他们不应该处理那些没有行动项目的愤怒反馈。你的工作是过滤掉咆哮和抱怨,并分析它们的原因。然后您报告根本问题,并与团队一起解决它们。

为什么要接受这份工作?

考虑到你的盘子有多满,应该提出以下问题:

你为什么想成为一名开发人员? 传福音者(或开发商律师)?

做这个角色是有好处的。大多数情况下,对于希望从交付角色转移到能够对公司产生更大影响的角色的开发人员来说,这是一个自然的过程。

  • 它架起了沟通的桥梁–在沟通方面,开发人员名声不好。对我们的市场来说,展示技术人员能够帮助彼此理解是一个很好的举措。
  • 它有助于避免沮丧–不需要大量的工程设计,但基于错误的假设或错误的“我想用这个”。好的传福音能帮助我们建立所需要的,不是很酷。
  • 它弥合了时代和文化的鸿沟-如果你对激烈的工程竞争不感兴趣,你有机会发挥你的才能。

在你抓住机会之前,有一些非常重要的要点需要记住:

  • 开发商关系不是一个起点——大多数开发人员传福音者S毕业于同一家公司的开发人员。你需要知道疼痛来帮助预防它。
  • 不过也有兼职的机会-工程师或在公司学习的人可以帮助Devrel必威体育下载更早地适应工作。
  • 时刻准备好证明你的价值-衡量开发人员的影响传福音者是艰苦的,你需要确保在记录你的成功时你是有条理的。

这是一个多才多艺,变形和演变的角色。对我来说,这真的让人兴奋。

Songsearch -使用ServiceWorker可以在浏览器中轻松搜索4mb CSV

星期五,8月26日,二千零一十六

几天前我收到一封关于我的一个旧项目的电子邮件钇铝石榴石转弯猪瘟病毒进入“web服务”界面。向我寻求帮助的人是一个卡拉OK DJ,他想把他现有的歌曲变成一个搜索界面。数据集的维护在Excel中进行,所以所需要的就是在笔记本电脑上显示它的方法。

这个人有一个需求,想要一个简单的解决方案。他可以做一些HTMLCSS,但在任何与数据库或服务器端相关的东西上,我都感觉很茫然。是的,最好的解决方案是关系数据库,因为它还可以大大加快搜索速度。我不知道还要多久钇铝石榴石可靠的可用,我想利用这个机会,利用ServiceWorker把它变成一个离线的应用程序,用客户端JavaScript完成所有的工作。输入SongSearch——与源代码可在GitHub上找到

正在运行的songsearch界面

我是这样做的:

  • 第一步是解析a猪瘟病毒JavaScript中的数组。这已经讨论过很多次了,我发现StackOverflow的这个解决方案足以满足我的需要。
  • 我首先将文件加载进来,并用一条加载消息覆盖接口。这不漂亮,如果我有我自己的方式和更多的时间,我可能会寻找溪流代替。
  • 我加载猪瘟病毒阿贾克斯然后分析一下。从那时起,它就是我的记忆。
  • 其中一件有趣的事情是如何在组中获得当前选中的单选按钮。这是一个循环。现在完全可以使用document.queryselector('input[type=“radio”][name=“what”]:checked').value,其中name是广播组的名称:)
  • 我发现的一件事是,搜索可能会很慢——尤其是当您只输入一个字符而返回整个数据集时。因此,我想显示一条搜索消息。这在主线程中是不可能的,因为它在计算期间被阻塞了。解决方法是使用网络系统。启动工人之前显示搜索消息,一旦它回消息,就把它隐藏起来。我做的一件有趣的事是把网络系统代码作为页面中的资源,为了避免我重复搜索歌曲的方法。
  • 最后一部分是添加aServiceWorker使其脱机工作并缓存所有资源。后者甚至可以使用AppCache完成,但这可能很快就会遭到反对。

如你所见,第一次加载得到了整个批处理,但是,由于所有数据都由ServiceWorker缓存,因此应用程序的后续重新加载几乎是即时的。

在ServiceWorker缓存内容之前和之后加载

这不是火箭科学,它不漂亮,但它确实奏效了,我让一些人非常高兴。看一看,也许里面有什么东西能激励你,了。我特别为这个标志感到骄傲,这在Keynote中根本没有做到:)

新的博客设计-我让浏览器做大部分的工作…

星期二,8月23日,二千零一十六

除非你正在读RSS饲料或AMP这个博客的版本,你会发现这里有些变化。上周,我花了一个小时重新设计了scrarch的这个博客。不,我没有移动到另一个平台(到目前为止,WordPress为我做了这项工作)。但是我解决了一些困扰我的问题。

所以现在这个博客是完全响应的,没有依赖关系吗CSS框架或脚本,应该在我的许多读者所在的移动设备上呈现得更好。

一切都是从我找到丹·克拉默斯开始的复制图标–如果屏幕足够宽,现在可以在导航顶部看到的图标。我喜欢它们的简单,我可以嵌入它们,因此,有一个不需要任何额外的视觉菜单超文本传输协议开销。所以我复制粘贴,用线条上色,就是这样。

下一件令我难以置信的事情是在文档主体上使用1em + 1vw字体大小的技巧,以确保无论分辨率如何,文本都是可读的。这是海登·皮克林店里的好东西之一写更少该死的代码职位。他把这归因于Vasilis谁当然是太好了,告诉了整个归因故事本身

接下来是创建菜单。为此,我使用了flex xbox的强大功能和一个单一的媒体查询功能,以确保我的徽标不会消失,但文本链接会在它旁边的几行文字中出现。你可以在上面玩代码JSBin

这个完整的CSS博客的现在大约有340行代码,不依赖于任何库或框架。除了广告,没有JavaScript。

剩下的就是调整字体大小和颜色,并添加一些增强功能,比如跳过链接来跳过导航。当您在文档中添加制表符时,这些内容是可见的,这似乎是一个很好的解决方案,因为我们没有一个巨大的导航。

其他小修复:

  • 旧贴子上的代码显示现在修正了。我以前用过一个与当前插件不兼容的旧插件。修复方法是编写另一个插件来取消旧插件所需的功能,并为其提供适当的HTML结构。
  • 我把广告换成了回应性的,所以破坏布局应该没有问题。继续,对其进行测试,点击几百次,对它进行彻底的测试。
  • 我已经停止固定图像尺寸很长一段时间了,并使用100%作为宽度。有了这个新的布局,我也给了他们一个最大的宽度,以避免浪费空间和大规模模糊。
  • 对于视频,我现在开始使用嵌入感动地也不要破坏布局。

总之,这是一个小时的工作,生活在我的浏览器,没有任何阶段。这是一个博客,它在这里是为了文字,不要做代码的惊人壮举。

以下是博客在不同设备上的一些观点(由Chrome Devtools提供):

iPad:
博客在iPad上

iPhone 5:
iPhone 5上的博客

iPhone 6:
iPhone 6博客

Nexus 5:
Nexus 5博客

希望你喜欢。

总之,这些天我喜欢在网上工作。我们的CSS玩具非常强大,浏览器要可靠得多,您在开发人员工具中获得的见解和调整是惊人的。当我回想2006年我在这里做第一次布局的时候,我现在可能不会经历这些痛苦。创造一些好东西,你需要多少就做多少。

更好的键盘导航和渐进式增强

星期一,8月15日,二千零一十六
键盘

在构建接口时,同样重要的是要考虑那些只能使用键盘来使用你的产品的人。这是一个基本的可访问性需求,在大多数情况下,允许基本的键盘访问并不困难。这意味着首先使用键盘可访问的元素进行交互:

  • 如果希望用户前往某个地方,则使用有效的href属性进行锚定
  • 按钮,当您希望执行自己的代码并停留在文档中

您可以使用流动标签索引技术,但是如果有HTML能做同样事情的元素?

这使得视觉

不过,使用正确的元素还不够;您还需要使键盘用户在元素集合中的位置变得明显。浏览器通过在活动元素周围放置一个大纲来实现这一点。虽然这是非常有用的,但这一直是那些想要控制任何交互的整个视觉显示的人的眼中钉。您可以通过设置CSS轮廓属性为零,哪一个是一个很大的可访问性除非您也提供了替代方案。

用最明显的HTML工作的要素和一些CSS为了确保不仅定义了悬停状态,还定义了焦点状态,我们可以通过选项卡轻松地为用户导航项目列表。“移位”选项卡允许您向后移动。你可以尝试在这里HTML非常直接。


             
              >
             
  
             
              >
             
            
             >
            1>>
  
             
              >
             
            
             >
            >>
  
             
              >
             
            
             >
            3.>>
             
              >
             
            
             >
            20.>>
>

示例如何按tab键遍历按钮列表

使用列表可以为元素提供一个层次结构和一种使用普通浏览器不具备的可访问技术进行导航的方法。它也给了我们很多HTML要应用样式的元素。有几种风格,我们可以把它变成一个网格,使用更少的垂直空间,允许在一个小空间中包含更多内容。

UL,{
  边缘: 0
  填充: 0
  list-style: 没有一个
}
按钮 {
  边境: 没有一个
  显示: 
  背景: 秋麒麟草属植物
  颜色: 白色的
  宽度: 90%
  高度: 30px  
  边缘: 5%
  变换: 规模(0.8)
  过渡: 300毫秒
}
按钮:徘徊, 按钮:焦点 {
  变换: 规模(1)
  大纲: 没有一个
  背景: 粉蓝
  颜色: α333
}{
  浮动: 
}/*grid magic by@heydonworks https://codepen.io/heydon/pen/bcdrl*/{
  宽度: calc(100%/4)
}:第n个孩子(4N+1):最后一个孩子(1) {
  宽度: 100%
}:第n个孩子(4N+1):最后一个孩子(1)李~{
  宽度: 100%
}:第n个孩子(4N+1):最后一个孩子() {
  宽度: 50%
}:第n个孩子(4N+1):最后一个孩子()李~{
  宽度: 50%
}:第n个孩子(4N+1):最后一个孩子(3.) {
  宽度: calc(100%/4)
}:第n个孩子(4N+1):最后一个孩子(3.)李~{
  宽度: calc(100%/4)
}

结果看起来很花哨很明显我们在这个列表中所处的位置。

逐项在网格中切换

增强键盘访问-提供快捷方式

然而,如果我在网格中,如果我能用键盘向两个方向移动,那会更好吗?

使用一点JavaScript进行渐进式增强,我们得到这个效果并且可以使用光标键或WASD:

使用向上的光标键在元素网格中导航,下来,左右

记住这一点很重要增强。我们的列表仍然可以通过选项卡完全访问,如果JavaScript因为各种原因而失败,我们失去了一些便利,而不是完全没有接口。

我把它打包成一个小的开源软件,香草,调用了无依赖性的javascriptgridnav你可以上GitHub。您所需要做的就是调用脚本,并为它提供一个选择器来访问元素列表。


              
              id=
              “链接” 
              数据量=
              “5” 
              数据元素=
              “一个”
              >
             
  
              
               >
              
              
              HREF=
              “#”
              >
             1>>
  
             
              >
             
             
             HREF=
             “#”
             >
            >>
             
              >
             
             
             HREF=
             “#”
             >
            二十五>>
>
              
              SRC=
              “gridnav.js”
              >
              >
             

             
              >
             var linklist=new gridnav('links');>

您将每行中的元素数量和键盘可访问元素定义为列表元素上的数据属性。这些都是可选的,但是要使脚本更快,更少出错。有一个广泛的自述解释如何使用脚本。

它是如何工作的?

当我开始思考怎么做的时候,我像其他开发人员一样开始:尝试处理最复杂的方法。我想我需要导航DOM大量使用父节点和兄弟节点,并对定位和使用进行了大量比较获取绑定客户端矩形

然后我后退一步,意识到如何显示列表并不重要。最后,它只是一个列表,我们需要导航这个列表。我们甚至不需要在DOM,我们所做的就是从按钮或锚定集合中的一个元素转到另一个元素。我们所要做的就是:

  1. 找到我们所在的元素(事件目标给我们)。
  2. 拿到按下的钥匙
  3. 取决于键移动到下一个,以前的,或者跳过一些元素,进入下一行

像这样(你可以在这里试试):

在网格中移动和沿着轴移动是一样的

我们需要跳过的元素数量是由一行中的元素数量定义的。向上是n个元素向后,向下是n个元素向前。

网格中的导航图

如果你使用一些技巧,完整的代码是相当短的:

(功能(){
  var列表=文件。querySelector(“ul”)
  var项目=名单。querySelectorAll(“纽扣”)
  var= 数学地板上(名单。偏移宽度 /名单。firstElementChild偏移宽度
      )
  var代码= {
    38: -,
    四十:, 
    三十九: 1,
    37: -1
  }
   (var= 0<物品。长度+ +) {项目(]指数 =
  }
  功能handlekeys(电动汽车) {
    var键码=电动汽车。键码
    如果 (代码(键码]) {
      vart=电动汽车。目标
      如果 (t。指数 = = ! 未定义的) {
        如果 (项目(t。指数 +代码(键码]]) {项目(t。指数 +代码(键码]]焦点()
        }
      }
    }
  }名单。addEventListener(“弹起”,handlekeys)
})()

这是怎么回事?

我们获得列表的句柄并缓存所有可通过键盘访问的元素

  var列表=文件。querySelector(“ul”)
  var项目=名单。querySelectorAll(“纽扣”)

当上下移动时,我们通过将列表元素的宽度除以第一个子元素an的宽度来计算要跳过的元素的数量HTML元素(在本例中为LI)

  var= 数学地板上(名单。偏移宽度 /名单。firstElementChild偏移宽度
      )

而不是创建一个开关语句或许多if语句键盘处理,我更喜欢定义一个查询表。在这种情况下,它叫做代码。他们的密码是38,40,39是右37是左。例如,如果我们现在得到代码[37]我们得到1,列表中要移动的元素的数量是多少

  var代码= {
    38: -,
    四十:, 
    三十九: 1,
    37: -1
  }

我们可以使用event.target获取列表中按下的按钮,但是我们不知道它在列表的什么地方。为了避免每次按键时都要循环浏览列表,循环一次所有按钮并将它们的索引存储在按钮本身的索引属性中的列表中会更有意义。

   (var= 0<物品。长度+ +) {项目(]指数 =
  }

handlekeys()函数完成其余工作。我们读取按下的键的代码,并将其与代码查找表进行比较。这也意味着我们只对函数中的箭头键做出反应。然后,我们得到按下键的当前元素,并检查它是否具有索引属性。如果它有一个,我们检查集合中是否存在我们想要移动的方向的元素。为此,我们将当前元素的索引添加到查找表返回的值中。如果元素存在,我们专注于它。

  功能handlekeys(电动汽车) {
    var键码=电动汽车。键码
    如果 (代码(键码]) {
      vart=电动汽车。目标
      如果 (t。指数 = = ! 未定义的) {
        如果 (项目(t。指数 +代码(键码]]) {项目(t。指数 +代码(键码]]焦点()
        }
      }
    }
  }

我们将一个keyup事件监听器应用到列表中,就完成了:)

名单。addEventListener(“弹起”,handlekeys)

如果你想跟随这段视频,这是一个快速的视频教程,我解释所有的比特和鲍勃

这个视频在最终代码中有一个小错误,因为我没有将count属性与undefined进行比较,这意味着键盘功能在第一个项目上不起作用(因为0是错误的)。

变得兴奋

星期三,8月3日,二千零一十六

随着昨天更多关于谷歌手机搜索将排名的谣言的报道AMP版本高于正常值HTML(科技博客Nieman实验室报道)我想是时候仔细看看了AMP

我将会跟进更详细的信息,我正在和谷歌的团队聊这个项目,betway体育官方网但这里有一个简单的消息:这个博客现在也是AMP启用,你可以得到AMP的版本中添加“/amp”URL

这有什么了不起的?betway体育官方网我没有别的事可做,只有利用WordPress插件(the其来源也可在Github上获得)。

AMP的另一种表示形式HTML内容及其子集,这很简单。坦率地说,我喜欢它在桌面上的样子:)。