必威体育下载基督教Heilmann

您当前正在浏览必威体育下载基督教Heilmann八月的博客必威体育简介档案,2016。

8月份存档,2016

开发人员宣传者/倡导者做什么?

周一,8月29日,2016
我爱它!它是什么?

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

重要的事情先做:每当你写这个话题的时候,都会有大量关于职位名称的讨论。betway体育官方网传福音者这是多么可怕,带有宗教色彩等等。如果这是困扰你的问题,请选择以下你想要阅读的内容,你的浏览器会相应更改,让你安心:



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

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

你需要知道什么才能成为其中一员?首先是必要的技能:

  • 良好的发展技能–创建和解释软件和产品
  • 优秀的沟通能力-这个工作是关于接触,倾听和提炼信息
  • 出色的网络技能-你应该收集联系人,让他们高兴

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

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

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

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

出站任务

在社交媒体上露面

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

与竞争和市场保持同步

你是当机立断的人——你的工作就是知道竞争是什么,什么让人们兴奋。利用你的竞争对手的产品,看看什么对你和他们的用户有效,并向你的团队提供反馈。发现趋势并向公司报告。

创建公开可用的软件产品

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

参与其他产品

参与其他人的开源产品。这样你就知道使用它们的痛苦和快乐。你的工作就是随时待命。通过为其他产品提供有用的贡献,人们通过你的工作和你作为社区成员的行为来评价你,不是公司的人。分析其他产品如何运行可以为您的团队提供很好的反馈。

参与公众讨论

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

参与其他出版物

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

创建视频教程

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

参与和帮助活动

在活动中展示和举办研讨会。介绍你喜欢的活动组织者、同事或其他主持人。促进活动。在活动中帮助市场营销人员和同事使您的存在变得有用并产生结果。

充当内部团队的“防火墙”

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

帮助处理有影响力的人

如果你把工作做好,经常和别人交谈,其他人所谓的“影响者”就是你所说的朋友和联系人。向他们展示你有多在乎他们,让他们预览你要做的事情。确保你的公司和他们之间的沟通是通过你进行的,因为这会让你的拓展不那么尴尬。寻找新的有影响力的人,和你的公司谈谈他们。

入站的任务

了解最新信息并参与产品开发

没有办法成为一名开发人员传福音者对于一个公司来说,如果你不了解你的公司的产品。你需要和产品一起工作,只有这样,你才能激励自己,集中精力提高自己。开发这些产品还会教会你很多关于它们是如何创建的,这有助于从外部筛选问题。

保持产品团队和内部工程的更新

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

强化内部团队的信息传递

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

培训和提升内部人才

很高兴你能代表你的公司,但有时候,直接参与产品开发的人的声音会产生更大的影响。指导公司的员工,在社交媒体和活动中宣传他们的存在。将会议组织者和内部人员联系起来——确保与他们的经理联系,让他们随时待命。帮助人们展示和准备外联材料。

报告活动和活动的成功

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

帮助组织活动

参与公司组织的活动是很重要的。试着不要被说服去做演讲——相反,你可以提供指导让人们去做演讲。主动加入这些活动的内容板——你不想惊讶于某个巨大的新闻发布说了一些你不同意的话。使用您的触角为您的活动找到外部扬声器。

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

你的工作与那些部门有很多重叠。做一个好同事,帮助他们,这样你就能获得更多你甚至不知道的预算和渠道。确保你在工作中所说或所做的不会引起任何法律问题。

向产品团队提供建设性反馈并回答问题

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

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

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

为什么要接受这份工作?

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

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

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

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

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

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

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

SongSearch–使用ServiceWorker在浏览器中轻松搜索4 MB的csv

星期五,8月26日,2016

几天前,我收到一封电子邮件,内容是关于我的一个旧项目YQLCSV进入“web服务”界面。向我求助的人是一名卡拉ok DJ,他想把自己的歌曲变成一个搜索界面。数据集的维护在Excel中进行,所以所需要的只是一种在笔记本电脑上显示的方法。

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

正在运行的songsearch界面

我是这样做的:

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

正如你所看到的,第一批货物得到了整批货物,但随后的应用程序重新加载几乎是即时的,因为所有数据都是由ServiceWorker缓存的。

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

这不是火箭科学,它并不漂亮,但这是我的工作,我让别人很高兴。看一看,也许里面有些东西能激励你,了。我特别为这个标志感到骄傲,这在主题演讲中根本没有完成。)

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

周二,8月23日,2016

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

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

一切都是从我找到Dan Klammers开始的Bytesize图标-如果你的屏幕足够宽,可以在顶部的导航栏中看到这些图标。我喜欢它们的简单,我可以嵌入它们,因此,有一个不需要任何额外的视觉菜单HTTP开销。所以我复制粘贴,在线条上涂上颜色,就是这样。

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

接下来是创建菜单。为此,我使用了flexbox的强大功能和单一的媒体查询来确保我的徽标保持不变,但文本链接会在它旁边换行。你可以打开代码杰斯宾

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

其余的则调整了一些字体大小和颜色,并添加了一些增强功能,比如跳过链接来跳过导航。当你切换到文档时,这些都是可见的,这似乎是一个很好的解决方案,因为我们没有一个巨大的导航,因为它是。

其他小补丁:

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

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

以下是关于不同设备(由chrome devtools提供)的博客视图:

iPad:
博客在iPad上

iPhone 5:
iPhone 5博客

iPhone 6:
iPhone 6博客

联系5:
Nexus 5博客

希望你喜欢。

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

更好的键盘导航与渐进增强

周一,8月15日2016
键盘

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

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

几乎所有的键盘都可以使用粗纱制表符索引技术,但既然有,何必费心HTML能做到这一点的要素?

使其可视化

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

用最明显的HTML工作的元素和一些CSS为了确保不仅定义了悬停状态,还定义了焦点状态,我们可以通过在项目列表中进行选择,方便用户浏览项目列表。Shift-Tab允许你后退。你可以尝试在这里HTML非常直接。


             
              >
             
  
             
              >
             
            
             >
            1>>
  
             
              >
             
            
             >
            2>>
  
             
              >
             
            
             >
            3.>>
             
              >
             
            
             >
            二十>>
>

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

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

ul{
  保证金 ;
  衬垫 ;
  列表样式 没有一个;
}
按钮 {
  边境 没有一个;
  显示 ;
  背景 秋麒麟草属植物;
  颜色 白色;
  宽度 90%;
  高度 30 px;  
  保证金 5%;
  转型 规模(0.8;
  过渡 300毫秒;
}
按钮悬停 按钮焦点 {
  转型 规模(1;
  概述 没有一个;
  背景 浅蓝色;
  颜色 # 333;
}{
  浮动 ;
}/* grid magic作者:@heydonworks https://codepen.io/heydon/pen/bcdrl*/{
  宽度 (100%/4;
}nth-child(4 n+1nth-last-child(1 {
  宽度 100%;
}nth-child(4 n+1nth-last-child(1~锂{
  宽度 100%;
}nth-child(4 n+1nth-last-child(2 {
  宽度 50%;
}nth-child(4 n+1nth-last-child(2~锂{
  宽度 50%;
}nth-child(4 n+1nth-last-child(3. {
  宽度 (100%/4;
}nth-child(4 n+1nth-last-child(3.~锂{
  宽度 (100%/4;
}

结果看起来很高档很明显,我们在这个清单的旅程中所处的位置。

逐项浏览网格项

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

然而,如果我在网格中,如果我可以用键盘朝两个方向移动不是更好吗?

使用一点JavaScript进行渐进式增强,我们得到这样的效果并可以导航网格,无论是与光标键或使用WASD

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

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

我把它打包在一个小的开放源码中,香草,无依赖JavaScript调用gridnav你可以在Github上下载。您所需要做的就是调用脚本,并为它提供一个选择器来访问元素列表。


              
              身份证件=
              “链接” 
              数据量=
              “5” 
              数据元素=
              “A”
              >
             
  
              
               >
              
              
              href=
              “阿”
              >
             1>>
  
             
              >
             
             
             href=
             “阿”
             >
            2>>
             
              >
             
             
             href=
             “阿”
             >
            25>>
>
              
              src=
              “Gravav.js”
              >
              >
             

             
              >
             var linklist =新建Gridnav('#links');>

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

它是如何工作的?

当我开始思考怎么做的时候,我像任何开发人员一样开始:尝试处理最复杂的方法。我想我需要导航DOM大量使用父节点和兄弟节点,大量比较定位和使用getBoundingClientRect

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

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

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

在网格中移动与沿轴移动相同

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

网格中的导航图

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

(函数({
  var列表=文档。查询选择器(“UL”;
  var项目=列表。查询选择单元格(“按钮”;
  var= 数学地板上(列表。offsetWidth /列表。firstElementChildoffsetWidth
      ;
  var代码= {
    38 -
    40 
    39 1
    37 -1
  };
   (var= ;<项目。长度;++ {项目(]指数 =;
  }
  函数手把钥匙(电动汽车 {
    var键码=EV。键码;
    如果 (代码(键码] {
      vart=EV。目标;
      如果 (T指数 = = ! 未定义的 {
        如果 (项目(T指数 +代码(键码]] {项目(T指数 +代码(键码]]焦点(;
        }
      }
    }
  }列表。addEventListener(“弹起”手把钥匙;
}(;

这是怎么回事?

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

  var列表=文档。查询选择器(“UL”;
  var项目=列表。查询选择单元格(“按钮”;

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

  var= 数学地板上(列表。offsetWidth /列表。firstElementChildoffsetWidth
      ;

不是创建switch语句或大量if语句来进行键盘处理,我更喜欢定义一个查询表。在这种情况下,这叫做密码。上面的键码是38,40,39是右的,37是左的。如果我们现在得到代码[37],我们得到-1,列表中要移动的元素数量

  var代码= {
    38 -
    40 
    39 1
    37 -1
  };

我们可以使用event.target获取列表中按下的按钮,但我们不知道它在名单上的位置。为了避免每次击键时都要循环遍历列表,将所有按钮循环一次,并将它们的索引存储在按钮本身的索引属性中,这样做更有意义。

   (var= ;<项目。长度;++ {项目(]指数 =;
  }

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

  函数手把钥匙(电动汽车 {
    var键码=EV。键码;
    如果 (代码(键码] {
      vart=EV。目标;
      如果 (T指数 = = ! 未定义的 {
        如果 (项目(T指数 +代码(键码]] {项目(T指数 +代码(键码]]焦点(;
        }
      }
    }
  }

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

列表。addEventListener(“弹起”手把钥匙;

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

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

安上

周三,8月3日,2016

随着昨天关于谷歌手机搜索排名的更多传言的报道安培版本高于正常HTML一个(边缘Nieman实验室我认为是时候仔细看看了安培

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

这有什么了不起的?betway体育官方网我没有别的事可做,只有利用WordPress插件(它的源代码也可以在GitHub上找到)。

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