18新利官方网站克里斯蒂安·海尔曼 https://18新利官方网站christianheilmann.com网站 为了一个更好的网络和更专业的工作-可以说话,将要旅行 周一,2019年2月18日13:31:05+0000 en美国 每小时 https://wordpress.org/?V=5.0.3 交互式排版作弊单 https://18新利官方网站christianheilmann.com/2019/02/18/interactive-typography-cashtsheet/ https://18新利官方网站christianheilmann.com/2019/02/18/interactive typography-cashtsheet/回复 周一,2019年2月18日13:31:05+0000 克里斯海尔曼 概述 https://18新利官方网站christianheilmann.com/?P=5932 几周前我偶然发现了一个很好的资源,一份印刷术备忘单,解释字母各部分的正确名称。我想把它变成一个互动的备忘表会很有趣,我想知道会涉及到多少。原来,没那么多,这里是[…] <p>几周前我偶然发现了一个很好的资源,一份印刷术备忘单,解释字母各部分的正确名称。我想把它变成一个互动的备忘表会很有趣,我想知道会涉及到多少。原来,没那么多,所以这里是一个<a href=“https://codepo8.github.io/typography-craitsheet/”title=“”>交互式排版作弊表</a>for you.<p><iframe width=“560”height=“315”src=“https://www.youtube.com/embed/lwntcew2jzq”frameborder=“0”allow=“accessmeter;自动播放;加密媒体;陀螺仪;picture in picture“allowfullscreen><iframe><p>the<a href=“https://github.com/codepo8/typography-craitsheet”title>code is available on github<a>and i'd love to see contributions and improvement requests.<p><p>one quick note on quality and resources:<p><p>i was impressed how easy this was to do as the<a href=“https://www.deviantart.com/martin silvertant/art/typography-series-01-atomy-of-typography-329617642“title>原始创建者Martin silvertant提供的资源</a>was not only a<span class=“caps”>pdf<span>or<span class=“caps”>JPG<span>,但是一个组织清晰的人工智能文件。我的搭档帮我把它保存为一个<span class=“caps”>svg,我去参加比赛了。导出的SVG<span class=“caps”>SVG很大,但很容易发现哪些部分不需要。我所做的只是使用浏览器开发人员工具,通过单击源代码视图中的<span class=“caps”>svg中的路径并在呈现的<span class=“caps”>svg中突出显示路径来查看是什么。我为每个元素添加了一个ID,并在javascript中创建了一个映射,以定义单击每个元素时要显示的标签。<p><pre lang=“javascript”><br/>const information=<br/>e1':'title',<br/>'e2':'shoulder',<br/>'e3':'aperture',<br/>'e4':'stem',<p>/*and so on until*/<p>'e49':'head serif'<br/></p><p><p>The rest of the javascript is a pretty directly event delegation example.在<span class=“caps”>css中使用轻微过渡是平滑过渡的原因。<p><p>Things I'd Love to See:<p><ul><li>Pull Requests with Localized Versions(I have no ideas what these Things are called in other languages)and I will write a contribution guide.<li><ul><p>Things I am Planning to do:<p><ul><li>turn this进入测验/游戏</li>><img src=“//www.4989f.com/~r/chrisheilmann/~4/axnz0yhzqf8”height=“1”width=“1”alt=“/> https://18新利官方网站christianheilmann.com/2019/02/18/interactive-typography-craitsheet/feed/ 0 不去任何地方的链接应该是按钮 https://18新利官方网站christianheilmann.com/2019/02/05/links-that-dont-go-anywhere-should-be-buttons/ 星期二,2019年2月5日11:34:49+0000 克里斯海尔曼 概述 https://18新利官方网站christianheilmann.com/?P=5921 今天早上,我在tweet上发了一篇关于回到基础知识的博客文章:javascript处理的非导航链接,引起了枪手的愤怒,指出了文章的缺陷。本质上,本文询问以下五个示例中,哪一个是创建调用某些JavaScript功能的链接的正确示例:[…] <p>今天早上,我在tweet上发了一篇关于<a href=“https://weblog.west-wind.com/posts/2019/jan/21/non navigating-links-for-javascript-handling”title=“”返回到basics:non navigating links for javascript handling</a>的博客文章,并正确引发了枪手的愤怒找出文章的缺陷。<p>本质上,文章询问以下五个示例中的哪一个是正确的,以创建调用某些JavaScript功能的链接:<p><p><p><p<pre lang=“XML”><a a a href>><p><p><p><p><p><p><p><p><p><p><a a a href=\\\\\\\\\\35五个示例中的哪一个是正确的,以创建链接,从而调用某些JavaScriptjavascript功能性的链接的链接的正确的正确的正确的一个是正确的五个实例是正确的一个正确的一个是正确的,文章问问问问以下五个以下五个以下五个示例中正确的答案是<STRONG>无</STRONG>。这不是锚的作用。锚定元素应该具有指向有效的<span class=“caps”>url的href属性。换句话说:<p><blockquote>You use an anchor if you want to create an interactive element in the your site or app that takes you to an other web resource.不使用anchor元素触发脚本功能。这就是button元素的用途。.<blockquote><p>两者都很容易使用,并且附带了大量的可访问性优势,与浏览器中的键盘访问和本机状态指示器类似。<p><h2>when to use an anchor/link.<h2><p>You use an anchor element when you link to a<span class=“caps”>url<span>or an<span class=“caps”>api<span>endpoint:<p><p><pre lang=“xml”><a href=“https://www.w3.org/tr/html52/interactive elements.html”>interactive elements in<span class=“caps”>html</span><a><p><a href=“/inbox”>inbox</a><pre><p>or when you link to a destination in the same document:<p><p><pre lang=“xml”><a href=“terms”>our terms and conditions for you to ignore</a><p><p>..<span class=“caps”>html的卡车运输然后,您可以使用javascript截取链接并覆盖其默认行为来保持用户在页面上。如果javascript由于某种原因失败,用户将重新加载整个用户界面,并仍会转到他们需要去的地方。在这个W3C网站的示例中,应用程序的/inbox endpoint ui或terms<span class=“caps”>div<span>。他们也可以打开其他选项卡中的任何一个。我经常在WordPress中这样做。这很好,固体,使用户保持控制的设计。然而,当没有<span class=“caps”>url时,或在要转到的页面目标中,你给了一个你不遵守的承诺。<p><h2>when to use buttons.<h2><p>if,您的应用程序没有不同状态的url<span class=“caps”>endpoints,所有处理都以javascript进行,没有必要用一个无处可去且不会在另一个选项卡中打开任何内容的链接来混淆您的用户。使用一个按钮,您将不会承诺您不具备的任何功能。<p><p><pre lang=“xml”><button>inbox.<button><p><p>this<span class=“caps”>html</span>element is custom made exactly for that purpose and works fine–even t with a keyboard.<p>buttons even t work without javascript.如果将它们放入表单元素中,按下它们将把表单数据发送到服务器,您可以对后端中按下的按钮做出反应。当然,您也可以覆盖此功能并在脚本中执行所有操作–您只需要希望它可以工作。<p><h2>Don't combing users.<h2><p>This is specifically important when it comes to accessibility concerns.屏幕阅读器用户,例如,可以以各种方式导航文档。其中之一是获取文档中所有链接的列表。这就避免了他们必须聆听整个文档才能找到其中的某一部分。如果你创建了很多毫无意义的链接,你用胡说八道填这张单子。如果创建按钮并相应地标记它们,即使那些看不到你的用户界面的人也能浏览它。<p><h2>为什么这仍然是一个问题?<h2><p>Fans of Markup and a Simple Web know this for ages and we keep having to repeat it every years.然而,链接一直被用于Web或文档中任何地方都无法使用的功能。<p><p>原因主要是浏览器做错事情的历史和货物崇拜恐怖故事。过去的浏览器在按钮方面有一些问题。很难覆盖他们的浏览器风格。旧版本的Internet Explorer有一个bug,表单数据中只包含第一个按钮,不是被按下的那个。<p><p>Styling很可能仍然是人们错误使用链接的主要原因,其中应该使用按钮。按钮是比链接复杂得多的交互元素,它们有更多的附加样式。链接是文本渲染器的一部分,按钮传统上是表单的一部分,而且更复杂。因此,如果有人不喜欢<span class=“caps”>css,并且担心“事情看起来不对劲”,使用链接很有诱惑力,因为它更易于设计样式。那个,然而,是产品项目管理出现问题的指示器。最终用户不应该得到错误的交互模型,因为必须设计产品风格的人不知道如何或想要。<p>最后一个原因可能是它起作用了,我们已经看到其他人这样做了。这是一个有资格和懒惰的理由。浏览器必须宽容显示的内容,以避免最终用户获得失败的体验。然而,不是每个人都有相同的设置,我们的能力和想法是一个多么伟大的界面。通过为正确的工作使用正确的元素,我们有责任为浏览器和操作系统创建一个工作界面,而不是自己去做。仅仅因为链接不会为我们断开并不意味着当一个按钮更坚固时,它们不会为其他人断开,自定义解决方案。.<p><p>The issues with buttons in older browsers have been fixed now.这些天没有理由不使用按钮,特别是当考虑到免费获得多少可访问性好处时。<p><img src=“//www.4989f.com/~r/chrisheilmann/~4/w7pozlov2yw”height=“1”width=“1”alt=“/> 我在芬兰Techdays 2019年的主题演讲简介 https://18新利官方网站christianheilmann.com/2019/02/04/introduction-to-my-keynote-at-techdays-finland-2019/ 周一,2019年2月4日13:57:30+0000 克里斯海尔曼 概述 https://18新利官方网站christianheilmann.com/?P=5917 技术日芬兰的人们要求我录制一个关于我在今年活动上的演讲的快速视频。2月28日见! <p>techdays芬兰的<a href=“https://techdaysfi.com”title>techdays要求我在今年的活动上录制关于我的演讲的快速视频。<p><iframe width=“500”height=“281”src=“https://www.youtube.com/embed/7zzytx7buz4?feature=oEmbed“frameborder=”0“allow=”加速计;自动播放;加密媒体;陀螺仪;picture in picture“allowfullscreen><iframe><p>see you 28th of february!<img src=“//www.4989f.com/~r/chrisheilmann/~4/rivw2ctny4”height=“1”width=“1”alt=“/> [webfinds]可访问的应用程序,钥匙进入魔术和失败,在你的电脑口哨 https://18新利官方网站christianheilmann.com/2019/02/01/webfinds-accessible-apps-key-access-magic-and-fails-and-whistling-at-your-computer/ 周五,2019年2月1日14:52:50+0000 克里斯海尔曼 概述 https://18新利官方网站christianheilmann.com/?P=5912 人们抱怨我在Twitter上发布了太多的链接(这是我的意识流——正如我发现的那样,我张贴它)我现在开始每隔几天发布一次这些链接列表。希望有帮助。开发可访问Web应用程序的可访问性工具和策略是一个演示如何[…] <p>人们抱怨我在Twitter上发布了太多的链接(这是我的意识流——正如我发现的那样,我张贴它)我现在开始每隔几天发布一次这些链接列表。希望这能有所帮助。<p><img src=“https://christianheilman18新利官方网站n.com/wp-content/uploads/2019/02/dialup-sound-explained-1024x533.jpg”alt=“dialup sound”width=“100%”><p><h2>accessibility<h2><ul><li><a href=“https://accessible-a p p.com/”title=“”tools&strategies for developing accessible web apps<a>is<br/>a showcase how to build inclusive web不同javascript框架中的应用程序/spa/pwa,目前正在研究VueJS部分。.<li><li><a href=“https://twitter.com/vasilis”title=“”vasilis van gemert</a>写了他的硕士论文,试图找到问题的答案<a href=“https://exclusive-design.vasilis.nl/”title=“”>如果我们专门为残疾人设计网站怎么办?<a><li><a href=“https://blog.jim-nielsen.com/2019/building-a-渐进式-enhanced-site/”title=“”>building a渐进式增强的site</a>is a step-by-step explanation.<li><a href=“https://twitter.com aardrian”title>>@aardrian</a>on what can be learned of the accessibility issues of rolling out wordpress'new editor.18新利官方网站<a href=“http://adrianroselli.com/2018/12/lessons-from-gutenberg.html”title=“”lessons-from-gutenberg<a><li><ul><h2>javascript<h2><ul><li><a href=“https://medium.com/p/15-utility-javascript-examples-of-map-reduce-and-filter-74cbb5e0a1f”title=“”15个有用的javascript示例.map,.reduce and.filter</a>by alex permayakov has some very有趣的例子。<li><li><a href=“https://twitter.com/loige”title>Luciano Mammino<a>explains<a href=“https://loige.co/javascript-iterator-patterns/”title>javascript iterator patterns<a><li><ul><h2>The web is broken<h2><ul><li>everything is可怕(but more so inside a<a href=“https://miketaylr.com/posts/2019/01/everythings-is-糟糕的keypress edition.html“title”>keypress事件处理程序</a>)–Mike Taylor解释如何使keypress跨浏览器工作并不像我们认为的那样简单。<li><li><a href=“http://thecodebarrian.com/convert-a-string-to-a-number-in-javascript.html”title>将字符串转换为javascript中的数字</a><br/>有很多不同之处在number()和parsefloat()中;<li><li><a href=“https://voices.basedesign.com/beyond-the-interface-6ab9dd725c5d”title>beyond the interface<a>–Why do all apps look the same noday?为什么所有网站看起来都一样?<li>><ul>><h2>geek<h2>><ul>><li>><a href=“https://script-8.github.io/”title=“”><span class=“caps”>script<span>-8 is a fantasy computer</a>for making,分享,玩一些复古的小游戏(称为磁带)。它是免费的,基于浏览器,以及开源。磁带是用javascript编写的。<li><li><a href=“https://www.bram.us/2019/01/26/the-modem-dialup-sound-analyzed/”title=“”>The modem dialup sound</a>,analyzed<li>><ul>><h2>tools<h2>><ul>><li>><a href=“https://en.archivarix.com/”title>archivarix<a>is a wayback machine online downloader with<span class=“caps”>cms.<span><br/>restore a fully functional copy of the site–200 files for free!<li><li><a href=“https://github.com/github/hotkey”title>Trigger a action on element when keyboard hotkey is pressed.<a><br/>可爱的实现by github,只需添加数据热键属性</li><ul><p><pre lang=“xml”><a href=“/new”data hotkey=“n”>new issue<a><pre><p><img src=“//www.4989f.com/~r/chrisheilmann/~4/qfykzff5nvc”height=“1”width=“1”alt=“/> [webfinds]对着你的屏幕大喊大叫,预习一些文字艺术 https://18新利官方网站christianheilmann.com/2019/01/29/webfinds-waking-at-your-screen-to-prefetch-some-word-art/ 星期二,2019年1月29日13:28:55+0000 克里斯海尔曼 概述 https://18新利官方网站christianheilmann.com/?P=5907 人们抱怨我在Twitter上发布了太多的链接(这是我的意识流——正如我发现的那样,我张贴它)我现在开始每隔几天发布一次这些链接列表。希望有帮助。Doug Sillars告诉我们不是所有的基地都属于我们 <p>人们抱怨我在Twitter上发布了太多的链接(这是我的意识流——正如我发现的那样,我张贴它)我现在开始每隔几天发布一次这些链接列表。希望这能有所帮助。<p><img src=“https://christianheilman18新利官方网站n.com/wp-content/uploads/2019/01/mathematical-sobbing.jpg”alt=“spock sobbing mathematically”width=“100%”><p><h2>performance.<h2><ul><li><a href=“https://twitter.com/doug sillars”title=“”doug sillars</a>telling us that not all your base ownerse to us in<a href=“https://calendar.perfplanet.com/2018/performance-anti-patterns-base64-encoding/“title>performance-anti-patterns:base64 encoding<a><li><a href=“https://twitter.com/katie hempenius”title>katie hempenius<a>gives in-depth information on when to use and when not in<a href=“https://calendar.perfplanet.com/2018/all-about-prefetching/”title>all about prefetching/”title>正在获取</a>><li>><a href=“https://twitter.com/jordinarabor”title=“”jordan irabor=>a>has some good insight into<a href=“https://scotch.io/tutorials/browser-rendering-optimizations-for-frontend-development”title=“”browser rendering optimizations for frontend development.<a>><li>><h2>algorithms.<h2>><ul>><li>><a href=“https://gregoryszorc.com/blog/2019/01/17/on algorithms and interviewing/“title”>on algorithms and interviewing</a>Talks about the pault experience of interviews not matching with your job</li><li>on the other hand<a href=“https://twitter.com/worldclassdev”title>obosi philip</a>gives us a<a href=“https://scotch.io/courses/the-ultimate-guide-to-javas-algorithms/a-柔和-introduction-to-algorithms-and-data-structures“title>柔和介绍algorithms and data structures</a><li><ul><h2>cool demos:<h2><ul><li><a href=“https://anvaka.github.io/pm//gaxy/?_ k=1a19mn“title”>“Software Galaxies”,可视化了最流行的软件包管理器之间的依赖关系。此可视化中的每一颗星都代表一个包。<li><li><a href=“https://twitter.com/petebarr”title=“”peter barr</a>给您一个很好的理由在您的屏幕上大喊大叫,与<a href=“https://codepen.io/petebarr/full/ygemxr”title=“”variable font by volume demo</a><li><li>don't you miss the beauty of wordart?<a href=“https://twitter.com/kato-katherine”title>Katherine Kato</a>is here to help with her<a href=“https://codepen.io/kathykato/full/omxpap”title><span class=“caps”>css</span>word art generator</a><li><img src=“//www.4989f.com/~r/chrisheilmann/~4/prajezd70q0”height=“1”width=“1”alt=“/>