davidbgk
/
larlet-fr-david-cache
关注 1
点赞 0
派生 0
代码 版本发布 0 动态
A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
169 提交
1 分支
目录树: df9a5c5108
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 'df9a5c5108'
${ noResults }
larlet-fr-david-cache/cache/ba6ef65c13ffa3b92e95fb486cf.../index.html

index.html 31KB
原始文件 Blame 文件历史

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Progressive enhancement with handlers and enhancers (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://hiddedevries.nl/en/blog/2015-04-03-progressive-enhancement-with-handlers-and-enhancers">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Progressive enhancement with handlers and enhancers (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://hiddedevries.nl/en/blog/2015-04-03-progressive-enhancement-with-handlers-and-enhancers">Source originale du contenu</a></h3>

  463.     <p class="intro">Recently I adopted a different way to manage bits of JavaScript in websites I was building. It exercises progressive enhancement (PE) by declaring handler and enhancer functions on <span class="caps">HTML</span> elements.</p>

  464. 

  465. <p><strong>TL;DR</strong>: When JavaScript is used to handle user interactions like clicks, or enhance the page by manipulating the <span class="caps">DOM</span>, traditionally you&#8217;d have JavaScript find that <span class="caps">HTML</span> element in your page, and hook some code into it. But what if you&#8217;d switch that around, and have the <span class="caps">HTML</span> element “tell” JavaScript what function to execute?</p>

  466. 

  467. <p>How? I declare JavaScript functions on <span class="caps">HTML</span> elements. Separating them to functions that happen on click and those that happen on page load, I use two attributes (<code>data-handler</code> and <code>data-enhancer</code>) that both get space-separated function names as their values. Then, with a little bit of JavaScript, I make sure the functions execute when they need to.</p>

  468. 

  469. <p>Note that this works best for websites for which the mark-up is rendered on the server, to which JavaScript is added as an extra layer. Websites that rely on JavaScript for rendering content will probably have options to do the same within the framework they are built with.</p>

  470. 

  471. <h2>Separating to handlers and enhancers</h2>

  472. 

  473. <p>On many small to medium sized websites, the required JavaScript can be drilled down to two types of usage: </p>

  474. 

  475. <ol>

  476.     <li>things that need to happen on a click</li>

  477.     <li>enhancements after the inital page load</li>

  478. </ol>

  479. 

  480. <p>Surely, there are often other events we want to use for triggering JavaScript (scroll, anyone?), but let&#8217;s focus on these two types first.</p>

  481. 

  482. <p>Many simple websites will have both types of script in a single <code>scripts.js</code> file, which is also used to query the nodes interactions need to happen on, and to add click handlers to those nodes.</p>

  483. 

  484. <p>This year, <a href="http://krijnhoetmer.nl">Krijn</a> and <a href="http://brinkhu.is">Matijs</a> introduced me to a new way to go about this. It has proven to be a very powerful pattern in some of my recent projects, which is why I’d like to share it here. Credits for the pattern, and for the initialisation functions I will discuss later, go to them.</p>

  485. 

  486. <h2>Including JavaScript functions to the declarative model</h2>

  487. 

  488. <p>The pattern starts from the idea that web pages have three layers to them: structure (<span class="caps">HTML</span>), lay-out (<span class="caps">CSS</span>) and enhancement (JavaScript). <span class="caps">HTML</span> is a declarative language: as an author, you declare what you’d like something to be, and that is what it will be. </p>

  489. 

  490. <blockquote class="in-content">

  491.     <p class="in-content">Let this be a header, let this be a list item, let this be a block quote.</p>

  492. </blockquote>

  493. 

  494. <p>This is great, browsers can now know that ‘this’ is a list item, and treat it as such. Screenreaders may announce it as a list, your <span class="caps">RSS</span> reader or mobile Safari “reader view” can view it as a list, et cetera.</p>

  495. 

  496. <p>With <span class="caps">CSS</span> we declare what things look like:</p>

  497. 

  498. <blockquote class="in-content">

  499.     <p class="in-content">Let headers be dark blue, let list items have blue bullets and let block quotes render in slightly smaller type.</p>

  500. </blockquote>

  501. 

  502. <p>This works rather well for us, because now we don’t need to think about what will happen if we add another list item. It being a list item, it will have the <span class="caps">CSS</span> applied to it, so it will have blue bullets.  </p>

  503. 

  504. <p>The idea I’d like to share here, is that of making JavaScript functions part of this declarative model. If we can declare what something looks like in <span class="caps">HTML</span>, why not declare what its behaviour is, too?</p>

  505. 

  506. <h2 id="handlers">Handlers: things that happen on a click</h2>

  507. 

  508. <p>The idea is simple: we introduce a <code>data-handler</code> attribute to all elements that need to trigger function execution. As their value, we add one or more functions name(s) that need(s) to execute on click. </p>

  509. 

  510. <p>For example, here’s a link:</p>

  511. 

  512. <pre class="language-markup"><code>&lt;a href=&quot;#punk-ipa&quot;&gt;More about Punk IPA&lt;/a&gt;</code></pre>

  513. 

  514. <p>This is an in-page link to a section that explains more about Punk <span class="caps">IPA</span>. It will work regardless of JavaScript, but can be improved with it.</p>

  515. 

  516. <p>Cooler than linking to a section about Punk <span class="caps">IPA</span>, is to have some sort of overlay open, with or without a fancy animation. We add a <code>data-handler</code> attribute:</p>

  517. 

  518. <pre class="language-markup"><code>&lt;a href=&quot;#punk-ipa&quot; data-handler=&quot;overlay&quot;&gt;More about Punk IPA&lt;/a&gt; </code></pre>

  519. 

  520. <p>In the data-handler, the value holds a function name, in this case ‘overlay’. The idea is that the overlay function executes when the link is clicked. Naturally, you would be able to add more than one function name, and separate function names by spaces. This works just like <code>class=&quot;foo bar&quot;</code>.</p>

  521. 

  522. <p>Within the function declaration, we will know which element was clicked, so we can access attributes. We can access the <code>href</code> or any data attribute. With that, it can grab the content that’s being linked to, append it into some sort of overlay, and smoothly transition the overlay into the page.</p>

  523. 

  524. <p>Note that this is similar to doing <code>&lt;a onclick=&quot;overlayfunction(); anotherfunction();&quot;&gt;</code>, but with the added benefit that a <code>data-handler</code> only gets meaning once JavaScript is active and running, and that it contains strings like <span class="caps">CSS</span> classes, instead of actual JavaScript code. This way, the scripting is separated in the same way as the style rules are.</p>

  525. 

  526. <p>Also note that is best practice to only add handlers to <span class="caps">HTML</span> elements that are made for click behaviour, like <code>&lt;button&gt;</code>s and <code>&lt;a&gt;</code>.</p>

  527. 

  528. <h3>Adding function definitions</h3>

  529. 

  530. <p>In our JavaScript (e.g. an included <code>scripts.js</code> file), we add all functions for click behaviour to one object: </p>

  531. 

  532. <pre class="language-javascript"><code>var handlers = {

  533.     &#039;function-name&#039; : function(e) {

  534.          // This function is executed on click of any element with 

  535.          // &#039;function-name&#039; in its data-handler attribute.

  536.          // The click event is in &#039;e&#039;, $(this).attr(&#039;data-foo&#039;) holds the

  537.          // value of data-foo of the element the user clicked on 

  538.     },

  539.     &#039;another-function-name&#039; : function(e) {}

  540. };</code></pre>

  541. 

  542. <p>Those working in teams could consider making the handler object global. That way functions can have their own files, making collaboration through version control easier.</p>

  543. 

  544. <h3>Adding click handling: one handler to rule them all</h3>

  545. 

  546. <p>If we set all our click-requiring functionality up within <code>data-handler</code> attributes, we only need to attach one click handler to our document. <a href="http://davidwalsh.name/event-delegate">Event delegation</a> can then be used to do stuff to the actual element that is clicked on, even when that actual element did not exist on page load (i.e. was loaded in with <span class="caps">AJAX</span>).</p>

  547. 

  548. <p>This function (jQuery) can be used to handle clicks, then search through the handler functions and apply the ones specified in the data-handler function:</p>

  549. 

  550. <pre class="language-javascript"><code>$(function() {

  551.     &#039;use strict&#039;;

  552.     // generic click handler

  553.     $(document).on(&#039;click&#039;, &#039;[data-handler]&#039;, function(event) {

  554.         var handler = this.getAttribute(&#039;data-handler&#039;);

  555.         // honour default behaviour when using modifier keys when clicking

  556.         // for example:

  557.         // cmd + click / ctrl + click opens a link in a new tab

  558.         // shift + click opens a link in a new window

  559.         if (this.tagName === &#039;A&#039; &amp;&amp; (event.metaKey || event.ctrlKey || event.shiftKey)) {

  560.             return;

  561.         }

  562.         if (handlers &amp;&amp; typeof handlers[handler] === &#039;function&#039;) {

  563.             handlers[handler].call(this, event);

  564.         }

  565.         else {

  566.             if (window.console &amp;&amp; typeof console.log === &#039;function&#039;) {

  567.                 console.log(&#039;Non-existing handler: &quot;%s&quot; on %o&#039;, handler, this);

  568.             }

  569.         }

  570.     });

  571. });</code></pre>

  572. 

  573. <p>(<a href="https://gist.github.com/matijs/5b2d6675265ec440bcba">Source</a>; see also <a href="https://gist.github.com/matijs/9bb314a9a184b53952e2">its vanilla JavaScript version</a>)</p>

  574. 

  575. <h2 id="enhancers">Enhancers: things that happen after page load</h2>

  576. 

  577. <p>We can run functions to enhance elements in a similar way, by adding their function names to a <code>data-enhancer</code> attribute. The corresponding functions go into a <code>enhancers</code> object, just like the <code>handlers</code> object above.</p>

  578. 

  579. <p>For example, a page element that needs to display tweets. Again, here&#8217;s a link:</p>

  580. 

  581. <pre class="language-markup"><code>&lt;a href=&quot;https://twitter.com/bbc&quot;&gt;Tweets of the BBC&lt;/a&gt;</code></pre>

  582. 

  583. <p>To enhance this link to the <span class="caps">BBC</span>&#8217;s tweets, we may want to load a widget that displays actual tweets. The function to do that may add some container <code>&lt;div&gt;</code>s, and run some calls to the Twitter <span class="caps">API</span> to grab tweets. To trigger this function:</p>

  584. 

  585. <pre class="language-markup"><code>&lt;a href=&quot;https://twitter.com/bbc&quot; data-enhancer=&quot;twitter-widget&quot;&gt;

  586. Tweets of the BBC&lt;/a&gt;</code></pre>

  587. 

  588. <p>To find out whose Twitter widget to display, our function could analyse the <span class="caps">URL</span> in the <code>href</code> attribute, or we can add an extra attribute:</p>

  589. 

  590. <pre class="language-markup"><code>&lt;a href=&quot;https://twitter.com/bbc&quot; data-enhancer=&quot;twitter-widget&quot; 

  591. data-twitter-user=&quot;bbc&quot;&gt;Tweets of the BBC&lt;/a&gt;</code></pre>

  592. 

  593. <p>Another example: of a large amount of text, we want to hide all but the first paragraph, then add a “Show all” button to show the remainder. The <span class="caps">HTML</span> will contain all of the content, and we will hide the remainder with JavaScript.</p>

  594. 

  595. <pre class="language-markup"><code>&lt;section&gt;

  596.     &lt;p&gt;Some text&lt;/p&gt;

  597.     &lt;p&gt;Some more text&lt;/p&gt;

  598.     &lt;p&gt;Some more text&lt;/p&gt;

  599. &lt;/section&gt;</code></pre>

  600. 

  601. <p>To the block of text we add a data-enhancer function that makes sure everything but the first paragraph is hidden, and a “Show all” button is added.</p>

  602. 

  603. <pre class="language-markup"><code>&lt;section data-enhancer=&quot;only-show-first-paragraph&quot;&gt;

  604.     &lt;p&gt;Some text&lt;/p&gt;

  605.     &lt;p&gt;Some more text&lt;/p&gt;

  606.     &lt;p&gt;Some more text&lt;/p&gt;

  607. &lt;/section&gt;</code></pre>

  608. 

  609. <p>A function named ‘only-show-first-paragraph’ could then take care of removing the content, and adding a button that reveals it (this button could have a <code>data-handler</code> for that behaviour).</p>

  610. 

  611. <h3>Running all enhancements</h3>

  612. 

  613. <p>Assuming all our <code>enhancer</code> functions are in one <code>enhancer</code> object, we can run all <code>enhancers</code> on a page with one function. The function looks for all elements with a <code>data-enhancer</code> attribute, and calls the appropriate functions.</p>

  614. 

  615. <pre class="language-javascript"><code>$(function() {

  616.     &#039;use strict&#039;;

  617.     // kick off js enhancements

  618.     $(&#039;[data-enhancer]&#039;).each(function() {

  619.         var enhancer = this.getAttribute(&#039;data-enhancer&#039;);

  620.         if (enhancers &amp;&amp; typeof enhancers[enhancer] === &#039;function&#039;) {

  621.             enhancers[enhancer].call(this);

  622.         }

  623.         else {

  624.             if (window.console &amp;&amp; typeof console.log === &#039;function&#039;) {

  625.                 console.log(&#039;Non-existing enhancer: &quot;%s&quot; on %o&#039;, enhancer, this);

  626.             }

  627.         }

  628.     });

  629. });</code></pre>

  630. 

  631. <h2>Wrap-up</h2>

  632. 

  633. <p>So the basic idea is: functions for click behaviour are handlers, and those that happen on page load are enhancers. They are stored in a <code>handlers</code> and <code>enhancers</code> object respectively, and triggered from <span class="caps">HTML</span> elements that have <code>data-handler</code> and <code>data-enhancer</code> attributes on them, to declare which functions they need.</p>

  634. 

  635. <p>In summary: </p>

  636. 

  637. <ol>

  638.     <li>All functions that need to execute on click (or touch or pointer events), are declared on the <span class="caps">HTML</span> element that should trigger the click, in a <code>data-handler</code> attribute</li>

  639.     <li>All functions that need to change/enhance stuff on the <span class="caps">DOM</span>, are declared on the <span class="caps">HTML</span> element they need to change, in a <code>data-enhancer</code> attribute</li>

  640.     <li>Two JavaScript functions run through <code>data-handler</code> and <code>data-enhancer</code> attributes respectively, and execute all functions when they are required</li>

  641. </ol>

  642. 

  643. <h2>Thoughts?</h2>

  644. 

  645. <p>This pattern is not new, similar things have been done by others. Rik Schennink wrote about <a href="http://rikschennink.nl/thoughts/controlling-behaviour/">controlling behaviour</a> before, and his <a href="http://conditionerjs.com">conditioner.js</a> deserves special mention. It is a library that not only manages modules of JavaScript, it also activates them based on responsive breakpoints, something the pattern described here does not do out of the box (it could).</p>

  646. 

  647. <p>For me and teams I worked in, the above has proven to be a useful way to declare actions and enhancements within pages. It adds maintainability, because it helps keeping functions organised. It also promotes reusability: although new functions can be added for each use, multiple elements can make use of the same function. </p>

  648. 

  649. <p>The method is not perfect for every project, and it can definitely be improved upon. For example, we could add the function that triggers all <code>data-handler</code> functions to an enhancer (<code>&lt;html data-enhancer=&quot;add-handlers&quot;&gt;</code>), as it is an enhancement (of the page) by itself. In big projects with many people working on the same codebase, it may be useful to have all functions in separate files and have a globally available handlers object.</p>

  650. 

  651. <p><em>Update 07/04/2015</em>: I have opened comments, would love to hear any feedback</p>

  652.   </article>

  653. </section>

  654. 

  655. 

  656. <nav id="jumpto">

  657.   <p>

  658.     <a href="/david/blog/">Accueil du blog</a> |

  659.     <a href="https://hiddedevries.nl/en/blog/2015-04-03-progressive-enhancement-with-handlers-and-enhancers">Source originale</a> |

  660.     <a href="/david/stream/2019/">Accueil du flux</a>

  661.   </p>

  662. </nav>

  663. 

  664. <footer>

  665.   <div>

  666.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  667.     <p>

  668.       Bonjour/Hi!

  669.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  670.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  671.     </p>

  672.     <p>

  673.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  674.     </p>

  675.     

  676.     <p>

  677.       Voici quelques articles choisis :

  678.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  679.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  680.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  681.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  682.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  683.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  684.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  685.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  686.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  687.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  688.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  689.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  690.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  691.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  692.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  693.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  694.     </p>

  695.     <p>

  696.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  697.     </p>

  698.     <p>

  699.       Je ne traque pas ta navigation mais mon

  700.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  701.       conserve des logs d’accès.

  702.     </p>

  703.   </div>

  704. </footer>

  705. <script type="text/javascript">

  706.   ;(_ => {

  707.     const jumper = document.getElementById('jumper')

  708.     jumper.addEventListener('click', e => {

  709.       e.preventDefault()

  710.       const anchor = e.target.getAttribute('href')

  711.       const targetEl = document.getElementById(anchor.substring(1))

  712.       targetEl.scrollIntoView({behavior: 'smooth'})

  713.     })

  714.   })()

  715. </script>