1<!DOCTYPE html> 2<html lang="en-gb" dir="ltr" prefix="og: http://ogp.me/ns#" class="no-js"> 3 <head> 4 <meta charset="utf-8"/> 5 <link rel="dns-prefetch" href="https://fonts.gstatic.com"/> 6 <link rel="dns-prefetch" href="https://cloud.24ways.org"/> 7 <link rel="dns-prefetch" href="https://media.24ways.org"/> 8 9 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro%7CSource+Sans+Pro:400,700%7CSource+Serif+Pro:400"/> 10 <link rel="stylesheet" href="assets/styles/app-55.css"/> 11 12 <link rel="shortcut icon" href="assets/icons/icon.ico" type="image/ico"/> 13 <link rel="apple-touch-icon" href="assets/icons/icon.png" type="image/png"/> 14 <link rel="mask-icon" href="assets/icons/icon.svg" color="#f04"/> 15 <link rel="manifest" href="app.webmanifest"/> 16 <link rel="alternate" href="https://feeds.feedburner.com/24ways" type="application/rss+xml"/> 17 <link rel="author" href="humans.txt"/> 18 19
19<script> 20 var docEl = document.documentElement; 21 docEl.className = docEl.className.replace('no-js', 'has-js'); 22 </script>
22 23 24
24<script src="assets/scripts/app-55.js" defer></script>
24 25
25<script src="assets/scripts/stats.js" defer></script>
25 26 27 <meta name="referrer" content="origin"/> 28 <meta name="robots" content="index, follow"/> 29 <meta name="viewport" content="width=device-width, initial-scale=1"/> 30 <meta property="og:url" name="twitter:url" content=""/> 31 <meta property="og:title" name="twitter:title" content="Web design and development articles and tutorials for advent"/> 32 <meta property="og:description" name="twitter:description" content="24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer."/> 33 <meta property="og:image" name="twitter:image" content=""/> 34 <meta property="og:type" content="article"/> 35 <meta property="fb:app_id" content="1506442732766250"/> 36 <meta name="twitter:site" content="@24ways"/> 37 <meta name="twitter:creator" content="@24ways"/> 38 <meta name="twitter:card" content="summary_large_image"/> 39 <meta name="format-detection" content="telephone=no"/> 40 <meta name="theme-color" content="#302"/> 41 <meta name="msapplication-TileColor" content="#302"/> 42 43 <style> 44 :root { 45 --color-year: hsl(292, 100%, 16%); 46 --color-year--dark: hsl(292, 100%, 8%); 47 --color-year--dark-alpha: hsla(292, 100%, 8%, 0.8); 48 --color-day: hsl(199, 80%, 60%); 49 --color-day--light: hsl(199, 60%, 98%); 50 --color-day--dark: hsl(199, 100%, 24%); 51 --color-day--dark-alpha: hsla(199, 100%, 24%, 0.33); 52 } 53 </style> 54 55 <title>Web design and development articles and tutorials for advent ◆ 24 ways</title> 56 </head> 57 <body> 58<header class="c-banner" id="top"> 59 <a class="c-banner__skip" href="./#main">Skip to content</a> 60 <p class="c-banner__title"> 61 <a class="c-banner__home" href="./" rel="home">24 ways <span>to impress your friends</span></a> 62 </p> 63</header><div class="c-menu no-transition"> 64 <button class="c-menu__button" id="menu__button" aria-controls="menu__drawer" aria-expanded="true" aria-label="Menu"> 65 <svg class="c-menu__icon" width="20" height="20" viewBox="0 0 200 200" focusable="false" aria-hidden="true"> 66 <rect class="c-menu__line" width="120" height="10" x="40" y="45"/> 67 <rect class="c-menu__line" width="120" height="10" x="40" y="70"/> 68 <rect class="c-menu__line" width="120" height="10" x="40" y="95"/> 69 <rect class="c-menu__line" width="120" height="10" x="40" y="95"/> 70 <rect class="c-menu__line" width="120" height="10" x="40" y="120"/> 71 <rect class="c-menu__line" width="120" height="10" x="40" y="145"/> 72 </svg> 73 </button> 74 <div class="c-menu__drawer" id="menu__drawer" role="region" aria-label="Menu"> 75 <form class="c-search" role="search" id="search" action="https://www.google.com/search" method="get" onsubmit="var q=document.getElementById('q');if(q&&q.value.trim()){window.location='https://www.google.com/search?q='+encodeURIComponent('site:24ways.org '+q.value.trim());}return false;"> 76 <fieldset class="c-field"> 77 <legend class="u-hidden">Search 24 ways</legend> 78 <label class="u-hidden" for="q">Keywords</label> 79 <input class="c-field__input" type="search" id="q" name="q" placeholder="e.g. CSS, Design, Research…"/> 80 <button class="c-field__button" type="submit"><svg class="c-field__icon" width="20" height="20" viewBox="0 0 200 200" focusable="false" role="img" aria-label="Search"> 81 <path role="presentation" d="M129 121C136 113 140 102 140 90c0-28-22-50-50-50S40 63 40 90s22 50 50 50c12 0 24-4 32-12L158 164l7-7-36-36zM90 130c-22 0-40-18-40-40s18-40 40-40 40 18 40 40-18 40-40 40z"/> 82</svg> 83</button> 84 </fieldset> 85 </form> 86 87<nav class="c-topics-nav" aria-label="Topics"> 88 <ul class="c-topics-nav__items"> 89 90 <li class="c-topics-nav__item"> 91 <a class="c-topics-nav__label" href="topics/business/"> 92 <svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true"> 93 <path d="M20 220c-11 0-20-9-20-20V70c0-11 9-20 20-20h60V35c0-10 5-15 15-15h50c10 0 15 5 15 15v15h60c11 0 20 9 20 20v130c0 11-9 20-20 20H20zm0-160c-5.5 0-10 4.5-10 10v130c0 5.5 4.5 10 10 10h200c5.5 0 10-4.5 10-10V70c0-5.5-4.5-10-10-10H20zm130-10V35c0-3-2-5-5-5H95c-3 0-5 2-5 5v15h60zM30 100V90h180v10H30zm0 40v-10h180v10H30zm0 40v-10h180v10H30z"/> 94</svg> 95 96 Business 97 </a> 98 </li> 99 100 <li class="c-topics-nav__item"> 101 <a class="c-topics-nav__label" href="topics/code/">
102 <svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true"> 103 <path transform="rotate(45 120 120)" d="M115 100H70.5C63 85 47.5 75 30 75 8.5 75-9.5 90-14 110h29l10 10-10 10h-29c4.5 20 22.5 35 44 35 17.5 0 33-10 40.5-25h99.5c7.5 15 22.5 25 40.5 25 21.5 0 39.5-15 44-35h-29l-10-10 10-10h29c-4.5-20-22.5-35-44-35-17.5 0-33 10-40.5 25H125V30h10v-50h-30v50h10v70zm123.5 40c-6.5 9-17 15-28.5 15-16 0-29-10.5-33.5-25H63.5C59 144.5 46 155 30 155c-12 0-22.5-6-28.5-15H20l20-20-20-20H1.5C7.5 91 18 85 30 85c16 0 29 10.5 33.5 25h113c4.5-14.5 17.5-25 33.5-25 12 0 23 6 29 15h-19l-20 20 20 20h19zM115-10h10v30h-10v-30zM99.5 240v-50h-10v-10h25v-40h10v40h25v10H140v50c0 10-7.5 20-20 20-12.5 0-20-10-20.5-20zm11 0c0 7.5 5 10 10 10s10-2.5 10-10v-50h-20v50z"/> 104</svg> 105 106 Code 107 </a> 108 </li> 109 110 <li class="c-topics-nav__item"> 111 <a class="c-topics-nav__label" href="topics/content/"> 112 <svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true"> 113 <path d="M102.5 240l-1.5-2c-2.5-3.5-61-88-61-128s40.5-64 42.5-65L50 0h140l-32.5 45S200 70 200 110s-58.5 124.5-61 128l-1.5 2h-35zm30-10c9-13 57.5-85.5 57.5-120 0-33-35-56-41.5-60H91.5C85 54 50 77 50 110c0 34.5 48.5 106.5 57.5 120h25zM115 129.5c-11.5-2-20-12.5-20-24.5 0-14 11-25 25-25s25 11 25 25c0 12-8.5 22-20 24.5V230h-10V129.5zm5-39.5c-8 0-15 6.5-15 15s6.5 15 15 15 15-6.5 15-15-6.5-15-15-15zM92.5 40h55L170 10H70l22.5 30z"/> 114</svg> 115 116 Content 117 </a> 118 </li> 119 120 <li class="c-topics-nav__item"> 121 <a class="c-topics-nav__label" href="topics/design/"> 122 <svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true"> 123 <path fill-rule="evenodd" d="M140 0h80v240h-80V0zm70 10h-60v30h20v10h-20V70h20v10h-20v20h20v10h-20v20h20v10h-20v20h20v10h-20v20h20v10h-20V230h60V10zM45 230c-14 0-25-11-25-25V60c0-1 35-55 35-55s35 54 35 55v145c0 14-11 25-25 25H45zm-15-25c0 8 7 15 15 15h20c8 0 15-7 15-15v-5H30v5zm0-25v10h50v-10H30zm0-106c0-2 2-4 4-4h2c2 0 4 2 4 4v96H30V74zm20 0c0-2 2-4 4-4h2c2 0 4 2 4 4v96H50V74zm20 0c0-2 2-4 4-4h2c2 0 4 2 4 4v96H70V74zM30.5 60.5S39 58 45 63.5c6-4.5 14-4.5 20 0 6-5.5 14.5-3 14.5-3L69 45H41L30.5 60.5zm24.5-38L47.5 35h15L55 22.5z"/> 124</svg> 125 126 Design 127 </a> 128 </li> 129 130 <li class="c-topics-nav__item"> 131 <a class="c-topics-nav__label" href="topics/process/"> 132 <svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true"> 133 <path d="M210 116v4c0 49.5-40.5 90-90 90-29 0-55-14-71.5-35l7-7c14.5 19.5 38 32 64.5 32 44 0 80-36 80-80v-3.5l-15.5 16-7.5-7.5 28.5-28.5L234 125l-7.5 7.5L210 116zm-180 8v-4c0-49.5 40.5-90 90-90 29 0 54.5 13.5 71 35l-7 7C169 52.5 146 40 120 40c-44 0-80 36-80 80v5l17-17 7 7-28.5 28.5L7 115l7-7 16 16z"/> 134</svg> 135 136 Process 137 </a> 138 </li> 139 140 <li class="c-topics-nav__item"> 141 <a class="c-topics-nav__label" href="topics/ux/"> 142 <svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true"> 143 <path d="M220 240H20c-11 0-20-9-20-20V20C0 9 9 0 20 0h200c11 0 20 9 20 20v200c0 11-9 20-20 20zM20 10c-5 0-10 4-10 10v200c0 5 4 10 10 10h200c5 0 10-4 10-10V20c0-5-4-10-10-10H20zm150 200c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm-50 30c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm-50 30c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm45-30V80h10v70h-10zm0-100V30h10v20h-10zM65 80V30h10v50H65zm0 70v-40h10v40H65zm100 0v-20h10v20h-10zm0-50V30h10v70h-10zM50 110V80h40v30H50zm10-10h20V90H60v10zm90 30v-30h40v30h-40zm-50-50V50h40v30h-40zm10-10h20V60h-20v10zm50 50h20v-10h-20v10z"/> 144</svg> 145 146 UX 147 </a> 148 </li> 149 150 </ul> 151</nav> 152 <nav class="c-site-nav" aria-label="Explore 24 ways"> 153 <ul class="c-site-nav__items"> 154 <li class="c-site-nav__item"> 155 <a class="c-site-nav__label" href="archives/">Archives</a> 156 </li> 157 <li class="c-site-nav__item"> 158 <a class="c-site-nav__label" href="authors/">Authors</a> 159 </li> 160 <li class="c-site-nav__item"> 161 <a class="c-site-nav__label" href="about/" aria-label="About this website">About</a> 162 </li> 163 </ul> 164 </nav> 165 </div> 166
166<script class="c-menu__onload"> 167 document.getElementById('menu__drawer').style.display = 'none'; 168 </script>
168 169</div> 170<main class="c-main" id="main"> 171 <section> 172 <header class="c-preface"> 173 <h1 class="c-preface__title">2019</h1> 174 <div class="c-preface__main"> 175 <div class="s-prose"> 176 <p class="lede"><cite>24 ways</cite> is the advent calendar for web geeks. For twenty-four days each December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer. <a href="about/">Learn more</a></p> 177 </div> 178 </div> 179 </header> 180 181 182 <ol class="c-listing c-listing--summaries c-listing--inset" reversed> 183 184 185 <li> 186 187 <article class="c-summary c-summary--countdown h-entry day-24"> 188 <header class="c-summary__header"> 189 <h3 class="c-summary__title p-name"> 190 <a class="u-url" rel="bookmark" href="2019/the-accidental-side-project/">The Accidental Side Project</a> 191 </h3> 192 <p class="c-summary__author p-author h-card"> 193 194 <a class="c-summary__author-url u-url" href="authors/drewmclellan/" tabindex="-1"><picture> 195 <source srcset="https://cloud.24ways.org/authors/drewmclellan72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/drewmclellan72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Drew McLellan</span></a> 196 197 </p> 198 </header> 199 <div class="c-summary__main"> 200 <p class="p-summary"><strong>Drew McLellan</strong> puts the chairs up on the tables, sweeps the floor, and closes off our season, and indeed the entire 24 ways project with a look back at what itâs meant to run this site as a site project, and what impact side projects can have on the work we do. Will the last one out turn off Christmas the lights?</p> 201 </div> 202 <footer class="c-summary__footer"> 203 <p class="c-summary__meta"> 204 <time class="dt-published" datetime="2019-12-24T00:00:00+00:00"> 205 24 <span>Dec 2019</span> 206 </time> 207 208 </p> 209 </footer> 210 </article> 211 </li> 212 213 214 215 <li> 216 217 <article class="c-summary c-summary--countdown h-entry day-23"> 218 <header class="c-summary__header"> 219 <h3 class="c-summary__title p-name"> 220 <a class="u-url" rel="bookmark" href="2019/four-ways-design-systems-can-promote-accessibility/">Four Ways Design Systems Can Promote Accessibility â and What They Canât Do</a> 221 </h3> 222 <p class="c-summary__author p-author h-card"> 223 224 <a class="c-summary__author-url u-url" href="authors/amyhupe/" tabindex="-1"><picture> 225 <source srcset="https://cloud.24ways.org/authors/amyhupe72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/amyhupe72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Amy Hupe</span></a> 226 227 </p> 228 </header> 229 <div class="c-summary__main"> 230 <p class="p-summary"><strong>Amy Hupe</strong> prepares a four bird roast of tasty treats so we can learn how the needs of many different types of users can be served through careful implementation of components within a design system.</p> 231 </div> 232 <footer class="c-summary__footer"> 233 <p class="c-summary__meta"> 234 <time class="dt-published" datetime="2019-12-23T00:00:00+00:00"> 235 23 <span>Dec 2019</span> 236 </time> 237 238 </p> 239 </footer> 240 </article> 241 </li> 242 243 244 245 <li> 246 247 <article class="c-summary c-summary--countdown h-entry day-22"> 248 <header class="c-summary__header"> 249 <h3 class="c-summary__title p-name"> 250 <a class="u-url" rel="bookmark" href="2019/usability-and-security-better-together/">Usability and Security; Better Together</a> 251 </h3> 252 <p class="c-summary__author p-author h-card"> 253 254 <a class="c-summary__author-url u-url" href="authors/divyasasidharan/" tabindex="-1"><picture> 255 <source srcset="https://cloud.24ways.org/authors/divyasasidharan72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/divyasasidharan72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Divya Sasidharan</span></a> 256 257 </p> 258 </header> 259 <div class="c-summary__main"> 260 <p class="p-summary"><strong>Divya Sasidharan</strong> calls into question the trade-offs often made between security and usability. Does a secure interface by necessity need to be hard to use? Or is it the choice we make based on years of habit? Snow has fallen, snow on snow.</p> 261 </div> 262 <footer class="c-summary__footer"> 263 <p class="c-summary__meta"> 264 <time class="dt-published" datetime="2019-12-22T00:00:00+00:00"> 265 22 <span>Dec 2019</span> 266 </time> 267 268 </p> 269 </footer> 270 </article> 271 </li> 272 273 274 275 <li> 276 277 <article class="c-summary c-summary--countdown h-entry day-21"> 278 <header class="c-summary__header"> 279 <h3 class="c-summary__title p-name"> 280 <a class="u-url" rel="bookmark" href="2019/flexible-captioned-slanted-images/">Flexible Captioned Slanted Images</a> 281 </h3> 282 <p class="c-summary__author p-author h-card"> 283 284 <a class="c-summary__author-url u-url" href="authors/ericmeyer/" tabindex="-1"><picture> 285 <source srcset="https://cloud.24ways.org/authors/ericmeyer72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/ericmeyer72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Eric Meyer</span></a> 286 287 </p> 288 </header> 289 <div class="c-summary__main"> 290 <p class="p-summary"><strong>Eric Meyer</strong> gift wraps the most awkwardly shaped of boxes using nothing but CSS, HTML and a little curl of ribbon. No matter how well you plan and how much paper you have at your disposal, sometimes you just need to slant the gift to the side.</p> 291 </div> 292 <footer class="c-summary__footer"> 293 <p class="c-summary__meta"> 294 <time class="dt-published" datetime="2019-12-21T00:00:00+00:00"> 295 21 <span>Dec 2019</span> 296 </time> 297 298 </p> 299 </footer> 300 </article> 301 </li> 302 303 304 305 <li> 306 307 <article class="c-summary c-summary--countdown h-entry day-20"> 308 <header class="c-summary__header"> 309 <h3 class="c-summary__title p-name"> 310 <a class="u-url" rel="bookmark" href="2019/there-is-no-design-system/">There Is No Design System</a> 311 </h3> 312 <p class="c-summary__author p-author h-card"> 313 314 <a class="c-summary__author-url u-url" href="authors/jina/" tabindex="-1"><picture> 315 <source srcset="https://cloud.24ways.org/authors/jina72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/jina72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Jina Anne</span></a> 316 317 </p> 318 </header> 319 <div class="c-summary__main"> 320 <p class="p-summary"><strong>Jina Anne</strong> silences the night to talk about how we talk about Design Systems. Can the language we use impact the effectiveness of the solution? Fear not, if mighty dread has seized your troubled mind. Design systems of great joy we bring to you and all mankind.</p> 321 </div> 322 <footer class="c-summary__footer"> 323 <p class="c-summary__meta"> 324 <time class="dt-published" datetime="2019-12-20T00:00:00+00:00"> 325 20 <span>Dec 2019</span> 326 </time> 327 328 </p> 329 </footer> 330 </article> 331 </li> 332 333 334 335 <li> 336 337 <article class="c-summary c-summary--countdown h-entry day-19"> 338 <header class="c-summary__header"> 339 <h3 class="c-summary__title p-name"> 340 <a class="u-url" rel="bookmark" href="2019/a-modern-typographic-scale/">A Modern Typographic Scale</a> 341 </h3> 342 <p class="c-summary__author p-author h-card"> 343 344 <a class="c-summary__author-url u-url" href="authors/robweychert/" tabindex="-1"><picture> 345 <source srcset="https://cloud.24ways.org/authors/robweychert72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/robweychert72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Rob Weychert</span></a> 346 347 </p> 348 </header> 349 <div class="c-summary__main"> 350 <p class="p-summary"><strong>Rob Weychert</strong> reaches for the top notes to sing us a song of typographic scale. A little attention to scale and to the mathematics will help you to hit a high note with your designs this Christmas and beyond.</p> 351 </div> 352 <footer class="c-summary__footer"> 353 <p class="c-summary__meta"> 354 <time class="dt-published" datetime="2019-12-19T00:00:00+00:00"> 355 19 <span>Dec 2019</span> 356 </time> 357 358 </p> 359 </footer> 360 </article> 361 </li> 362 363 364 365 <li> 366 367 <article class="c-summary c-summary--countdown h-entry day-18"> 368 <header class="c-summary__header"> 369 <h3 class="c-summary__title p-name"> 370 <a class="u-url" rel="bookmark" href="2019/five-interesting-ways-to-use-array-reduce/">Five Interesting Ways to Use Array.reduce() (And One Boring Way)</a> 371 </h3> 372 <p class="c-summary__author p-author h-card"> 373 374 <a class="c-summary__author-url u-url" href="authors/chrisferdinandi/" tabindex="-1"><picture> 375 <source srcset="https://cloud.24ways.org/authors/chrisferdinandi72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/chrisferdinandi72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Chris Ferdinandi</span></a> 376 377 </p> 378 </header> 379 <div class="c-summary__main"> 380 <p class="p-summary"><strong>Chris Ferdinandi</strong> turns the heat down low and lets the sauce reduce while we take a look at how to add spice to our source with a sprinkling of Array.reduce(). Just a little ingenuity with the humblest of functions.</p> 381 </div> 382 <footer class="c-summary__footer"> 383 <p class="c-summary__meta"> 384 <time class="dt-published" datetime="2019-12-18T00:00:00+00:00"> 385 18 <span>Dec 2019</span> 386 </time> 387 388 </p> 389 </footer> 390 </article> 391 </li> 392 393 394 395 <li> 396 397 <article class="c-summary c-summary--countdown h-entry day-17"> 398 <header class="c-summary__header"> 399 <h3 class="c-summary__title p-name"> 400 <a class="u-url" rel="bookmark" href="2019/building-a-dictaphone-using-media-recorder-and-getusermedia/">Building a Dictaphone Using Media Recorder and getUserMedia</a> 401 </h3> 402 <p class="c-summary__author p-author h-card"> 403 404 <a class="c-summary__author-url u-url" href="authors/chrismills/" tabindex="-1"><picture> 405 <source srcset="https://cloud.24ways.org/authors/chrismills72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/chrismills72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Chris Mills</span></a> 406 407 </p> 408 </header> 409 <div class="c-summary__main"> 410 <p class="p-summary"><strong>Chris Mills</strong>
410 brushes up his shorthand and shows how the MediaStream Recording API in modern browsers can be used to capture audio directly from the userâs device. Inching ever closer to the capabilities of native software, it truly is an exciting time to be a web developer.</p> 411 </div> 412 <footer class="c-summary__footer"> 413 <p class="c-summary__meta"> 414 <time class="dt-published" datetime="2019-12-17T00:00:00+00:00"> 415 17 <span>Dec 2019</span> 416 </time> 417 418 </p> 419 </footer> 420 </article> 421 </li> 422 423 424 425 <li> 426 427 <article class="c-summary c-summary--countdown h-entry day-16"> 428 <header class="c-summary__header"> 429 <h3 class="c-summary__title p-name"> 430 <a class="u-url" rel="bookmark" href="2019/a-history-of-css-through-15-years-of-24-ways/">A History of CSS Through Fifteen Years of 24 ways</a> 431 </h3> 432 <p class="c-summary__author p-author h-card"> 433 434 <a class="c-summary__author-url u-url" href="authors/rachelandrew/" tabindex="-1"><picture> 435 <source srcset="https://cloud.24ways.org/authors/rachelandrew72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/rachelandrew72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Rachel Andrew</span></a> 436 437 </p> 438 </header> 439 <div class="c-summary__main"> 440 <p class="p-summary"><strong>Rachel Andrew</strong> guides us through a tour of the last fifteen years in CSS layout, as manifested in articles here on 24 ways. From the days when Internet Explorer 6 was de rigueur, right up to the modern age of evergreen browsers, the only thing you can be sure of is that the web never stands still for long.</p> 441 </div> 442 <footer class="c-summary__footer"> 443 <p class="c-summary__meta"> 444 <time class="dt-published" datetime="2019-12-16T00:00:00+00:00"> 445 16 <span>Dec 2019</span> 446 </time> 447 448 </p> 449 </footer> 450 </article> 451 </li> 452 453 454 455 <li> 456 457 <article class="c-summary c-summary--countdown h-entry day-15"> 458 <header class="c-summary__header"> 459 <h3 class="c-summary__title p-name"> 460 <a class="u-url" rel="bookmark" href="2019/microbrowsers-are-everywhere/">Microbrowsers are Everywhere</a> 461 </h3> 462 <p class="c-summary__author p-author h-card"> 463 464 <a class="c-summary__author-url u-url" href="authors/colinbendell/" tabindex="-1"><picture> 465 <source srcset="https://cloud.24ways.org/authors/colinbendell72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/colinbendell72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Colin Bendell</span></a> 466 467 </p> 468 </header> 469 <div class="c-summary__main"> 470 <p class="p-summary"><strong>Colin Bendell</strong> gets into the minutia of microbrowsers - the small previews of your site that are pervasive all around the web and through social media apps and search engines whenever an item of content on your site is referenced.</p> 471 </div> 472 <footer class="c-summary__footer"> 473 <p class="c-summary__meta"> 474 <time class="dt-published" datetime="2019-12-15T00:00:00+00:00"> 475 15 <span>Dec 2019</span> 476 </time> 477 478 </p> 479 </footer> 480 </article> 481 </li> 482 483 484 485 <li> 486 487 <article class="c-summary c-summary--countdown h-entry day-14"> 488 <header class="c-summary__header"> 489 <h3 class="c-summary__title p-name"> 490 <a class="u-url" rel="bookmark" href="2019/design-tokens-and-component-based-design/">Design Tokens and Component Based Design</a> 491 </h3> 492 <p class="c-summary__author p-author h-card"> 493 494 <a class="c-summary__author-url u-url" href="authors/stuartrobson/" tabindex="-1"><picture> 495 <source srcset="https://cloud.24ways.org/authors/stuartrobson72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/stuartrobson72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Stuart Robson</span></a> 496 497 </p> 498 </header> 499 <div class="c-summary__main"> 500 <p class="p-summary"><strong>Stuart Robson</strong>
500 rolls up his sleeves and begins to piece together the jigsaw puzzle that is design tokens and component based design. Starting with the corners, and working around the edges, Stu helps us to piece together a full picture of a modern design system.</p> 501 </div> 502 <footer class="c-summary__footer"> 503 <p class="c-summary__meta"> 504 <time class="dt-published" datetime="2019-12-14T00:00:00+00:00"> 505 14 <span>Dec 2019</span> 506 </time> 507 508 </p> 509 </footer> 510 </article> 511 </li> 512 513 514 515 <li> 516 517 <article class="c-summary c-summary--countdown h-entry day-13"> 518 <header class="c-summary__header"> 519 <h3 class="c-summary__title p-name"> 520 <a class="u-url" rel="bookmark" href="2019/art-direction-and-the-new-wordpress-editor/">Art Direction and the New WordPress Editor</a> 521 </h3> 522 <p class="c-summary__author p-author h-card"> 523 524 <a class="c-summary__author-url u-url" href="authors/melchoyce/" tabindex="-1"><picture> 525 <source srcset="https://cloud.24ways.org/authors/melchoyce72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/melchoyce72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Mel Choyce</span></a> 526 527 </p> 528 </header> 529 <div class="c-summary__main"> 530 <p class="p-summary"><strong>Mel Choyce</strong> explores how the new WordPress editor (also know as Gutenberg) can be used to create more carefully art directed posts. Like gifts carefully arranged beneath the Christmas tree, itâs the contents that matters but the presentation that sells.</p> 531 </div> 532 <footer class="c-summary__footer"> 533 <p class="c-summary__meta"> 534 <time class="dt-published" datetime="2019-12-13T00:00:00+00:00"> 535 13 <span>Dec 2019</span> 536 </time> 537 538 </p> 539 </footer> 540 </article> 541 </li> 542 543 544 545 <li> 546 547 <article class="c-summary c-summary--countdown h-entry day-12"> 548 <header class="c-summary__header"> 549 <h3 class="c-summary__title p-name"> 550 <a class="u-url" rel="bookmark" href="2019/making-distributed-working-work/">Making Distributed Working Work</a> 551 </h3> 552 <p class="c-summary__author p-author h-card"> 553 554 <a class="c-summary__author-url u-url" href="authors/annadebenham/" tabindex="-1"><picture> 555 <source srcset="https://cloud.24ways.org/authors/annadebenham72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/annadebenham72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Anna Debenham</span></a> 556 557 </p> 558 </header> 559 <div class="c-summary__main"> 560 <p class="p-summary"><strong>Anna Debenham</strong> harnesses up the huskies and puts them to work to figure out how teams distributed across multiple locations can work effectively to all pull in the same direction. With modern workforces distributed from north pole to south, can they all be kept running in step?</p> 561 </div> 562 <footer class="c-summary__footer"> 563 <p class="c-summary__meta"> 564 <time class="dt-published" datetime="2019-12-12T00:00:00+00:00"> 565 12 <span>Dec 2019</span> 566 </time> 567 568 </p> 569 </footer> 570 </article> 571 </li> 572 573 574 575 <li> 576 577 <article class="c-summary c-summary--countdown h-entry day-11"> 578 <header class="c-summary__header"> 579 <h3 class="c-summary__title p-name"> 580 <a class="u-url" rel="bookmark" href="2019/gift-giving-to-the-world-wide-web/">Gift Giving to the World (Wide Web)</a> 581 </h3> 582 <p class="c-summary__author p-author h-card"> 583 584 <a class="c-summary__author-url u-url" href="authors/francesberriman/" tabindex="-1"><picture> 585 <source srcset="https://cloud.24ways.org/authors/francesberriman72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/francesberriman72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Frances Berriman</span></a> 586 587 </p> 588 </header> 589 <div class="c-summary__main"> 590 <p class="p-summary"><strong>Frances Berriman</strong> asks us to give the gift of consideration to those who are using the web on constricted devices such as low-end smart phones or feature phones. Christmas is a time of good will to all, and as Bugsy Malone reminds us, you give a little love and it all c
590omes back to you.</p> 591 </div> 592 <footer class="c-summary__footer"> 593 <p class="c-summary__meta"> 594 <time class="dt-published" datetime="2019-12-11T00:00:00+00:00"> 595 11 <span>Dec 2019</span> 596 </time> 597 598 </p> 599 </footer> 600 </article> 601 </li> 602 603 604 605 <li> 606 607 <article class="c-summary c-summary--countdown h-entry day-10"> 608 <header class="c-summary__header"> 609 <h3 class="c-summary__title p-name"> 610 <a class="u-url" rel="bookmark" href="2019/zs-still-not-dead-baby-zs-still-not-dead/">Zâs Still Not Dead Baby, Zâs Still Not Dead</a> 611 </h3> 612 <p class="c-summary__author p-author h-card"> 613 614 <a class="c-summary__author-url u-url" href="authors/andyclarke/" tabindex="-1"><picture> 615 <source srcset="https://cloud.24ways.org/authors/andyclarke72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/andyclarke72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Andy Clarke</span></a> 616 617 </p> 618 </header> 619 <div class="c-summary__main"> 620 <p class="p-summary"><strong>Andy Clarke</strong> digs deep into snow to find ways flat design can be brought back to life in CSS with the use of techniques to create a sense of depth. Like spring after an everlasting winter, perhaps itâs time to let a different style of design flourish. What a relief.</p> 621 </div> 622 <footer class="c-summary__footer"> 623 <p class="c-summary__meta"> 624 <time class="dt-published" datetime="2019-12-10T00:00:00+00:00"> 625 10 <span>Dec 2019</span> 626 </time> 627 628 </p> 629 </footer> 630 </article> 631 </li> 632 633 634 635 <li> 636 637 <article class="c-summary c-summary--countdown h-entry day-09"> 638 <header class="c-summary__header"> 639 <h3 class="c-summary__title p-name"> 640 <a class="u-url" rel="bookmark" href="2019/its-time-to-get-personal/">Itâs Time to Get Personal</a> 641 </h3> 642 <p class="c-summary__author p-author h-card"> 643 644 <a class="c-summary__author-url u-url" href="authors/laurakalbag/" tabindex="-1"><picture> 645 <source srcset="https://cloud.24ways.org/authors/laurakalbag72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/laurakalbag72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Laura Kalbag</span></a> 646 647 </p> 648 </header> 649 <div class="c-summary__main"> 650 <p class="p-summary"><strong>Laura Kalbag</strong> discusses the gift of personal data we give to Big Tech when we share information on its platforms, and how reviving ye olde personal website can be one way to stay in control of the content we share and the data we leak. Christmas is a time for giving, but know what youâre giving to whom.</p> 651 </div> 652 <footer class="c-summary__footer"> 653 <p class="c-summary__meta"> 654 <time class="dt-published" datetime="2019-12-09T00:00:00+00:00"> 655 9 <span>Dec 2019</span> 656 </time> 657 658 </p> 659 </footer> 660 </article> 661 </li> 662 663 664 665 <li> 666 667 <article class="c-summary c-summary--countdown h-entry day-08"> 668 <header class="c-summary__header"> 669 <h3 class="c-summary__title p-name"> 670 <a class="u-url" rel="bookmark" href="2019/it-all-starts-with-a-humble-textarea/">It All Starts with a Humble <textarea></a> 671 </h3> 672 <p class="c-summary__author p-author h-card"> 673 674 <a class="c-summary__author-url u-url" href="authors/andybell/" tabindex="-1"><picture> 675 <source srcset="https://cloud.24ways.org/authors/andybell72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/andybell72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Andy Bell</span></a> 676 677 </p> 678 </header> 679 <div class="c-summary__main"> 680 <p class="p-summary"><strong>Andy Bell</strong> rings out a fresh call in support of the timeless concept of progressive enhancement. What does it mean to build a modern JavaScript-focussed web experience that still works well if part of the stack isnât supported or fails? Andy shows us how that might be done.</p> 681 </div> 682 <footer class="c-summary__footer"> 683 <p class="c-summary__meta"> 684 <time class="dt-published" datetime="2019-12-08T00:00:00+00:00"> 685 8 <span>Dec 2019</span> 686 </time> 687 688 </p> 689 </footer> 690 </article> 691 </li> 692 693 694 695 <li> 696 697 <article class="c-summary c-summary--countdown h-entry day-07"> 698 <header class="c-summary__header"> 699 <h3 class="c-summary__title p-name"> 700 <a class="u-url" rel="bookmark" href="2019/iconography-of-security/">Iconography of Security</a> 701 </h3> 702 <p class="c-summary__author p-author h-card"> 703 704 <a class="c-summary__author-url u-url" href="authors/wilsonwagner/" tabindex="-1"><picture> 705 <source srcset="https://cloud.24ways.org/authors/wilsonwagner72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/wilsonwagner72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Molly Wilson & Eileen Wagner</span></a> 706 707 </p> 708 </header> 709 <div class="c-summary__main"> 710 <p class="p-summary"><strong>Molly Wilson</strong> and <strong>Eileen Wagner</strong> battle the age old Christmas issues of right and wrong, good and evil, and how the messages we send through iconography design can impact the decisions users make around important issues of security. Are you icons wise men, or are they actually King Herod?</p> 711 </div> 712 <footer class="c-summary__footer"> 713 <p class="c-summary__meta"> 714 <time class="dt-published" datetime="2019-12-07T00:00:00+00:00"> 715 7 <span>Dec 2019</span> 716 </time> 717 718 </p> 719 </footer> 720 </article> 721 </li> 722 723 724 725 <li> 726 727 <article class="c-summary c-summary--countdown h-entry day-06"> 728 <header class="c-summary__header"> 729 <h3 class="c-summary__title p-name"> 730 <a class="u-url" rel="bookmark" href="2019/beautiful-scrolling-experiences-without-libraries/">Beautiful Scrolling Experiences â Without Libraries</a> 731 </h3> 732 <p class="c-summary__author p-author h-card"> 733 734 <a class="c-summary__author-url u-url" href="authors/michellebarker/" tabindex="-1"><picture> 735 <source srcset="https://cloud.24ways.org/authors/michellebarker72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/michellebarker72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Michelle Barker</span></a> 736 737 </p> 738 </header> 739 <div class="c-summary__main"> 740 <p class="p-summary"><strong>Michelle Barker</strong> appears as one of a heavenly host, coming forth with scroll in hand to pronounce an end to janky scrolljacking! Unto us a new specification is born, in the city of TimBL, and its name shall be called Scroll Snap.</p> 741 </div> 742 <footer class="c-summary__footer"> 743 <p class="c-summary__meta"> 744 <time class="dt-published" datetime="2019-12-06T00:00:00+00:00"> 745 6 <span>Dec 2019</span> 746 </time> 747 748 </p> 749 </footer> 750 </article> 751 </li> 752 753 754 755 <li> 756 757 <article class="c-summary c-summary--countdown h-entry day-05"> 758 <header class="c-summary__header"> 759 <h3 class="c-summary__title p-name"> 760 <a class="u-url" rel="bookmark" href="2019/interactivity-and-animation-with-variable-fonts/">Interactivity and Animation with Variable Fonts</a> 761 </h3> 762 <p class="c-summary__author p-author h-card"> 763 764 <a class="c-summary__author-url u-url" href="authors/mandymichael/" tabindex="-1"><picture> 765 <source srcset="https://cloud.24ways.org/authors/mandymichael72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/mandymichael72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Mandy Michael</span></a> 766 767 </p> 768 </header> 769 <div class="c-summary__main"> 770 <p class="p-summary"><strong>Mandy Michael</strong> turns the corner on our variable font adventure and stumbles into a grotto of wonder and amazement. Not forgetting the need for a proper performance budget, Mandy shows how variable fonts can free your creativity from bygone technical constraints.</p> 771 </div> 772 <footer class="c-summary__footer"> 773 <p class="c-summary__meta"> 774 <time class="dt-published" datetime="2019-12-05T00:00:00+00:00"> 775 5 <span>Dec 2019</span> 776 </time> 777 778 </p> 779 </footer> 780 </article> 781 </li> 782 783 784 785 <li> 786 787 <article class="c-summary c-summary--countdown h-entry day-04"> 788 <header class="c-summary__header"> 789 <h3 class="c-summary__title p-name"> 790 <a class="u-url" rel="bookmark" href="2019/an-introduction-to-variable-fonts/">An Introduction to Variable Fonts</a> 791 </h3> 792 <p class="c-summary__author p-author h-card"> 793 794 <a class="c-summary__author-url u-url" href="authors/jasonpamental/" tabindex="-1"><picture> 795 <source srcset="https://cloud.24ways.org/authors/jasonpamental72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/jasonpamental72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Jason Pamental</span></a> 796 797 </p> 798 </header> 799 <div class="c-summary__main"> 800 <p class="p-summary"><strong>Jason Pamental</strong> forges a path through the freshly laid snowy landscape of variable fonts. Like a brave explorer in a strange new typography to
800pology let Jason show you the route to some fantastic font feats. Everything you thought you knew has changed.</p> 801 </div> 802 <footer class="c-summary__footer"> 803 <p class="c-summary__meta"> 804 <time class="dt-published" datetime="2019-12-04T00:00:00+00:00"> 805 4 <span>Dec 2019</span> 806 </time> 807 808 </p> 809 </footer> 810 </article> 811 </li> 812 813 814 815 <li> 816 817 <article class="c-summary c-summary--countdown h-entry day-03"> 818 <header class="c-summary__header"> 819 <h3 class="c-summary__title p-name"> 820 <a class="u-url" rel="bookmark" href="2019/future-accessibility-guidelines/">Future Accessibility Guidelinesâfor People Who Canât Wait to Read Them</a> 821 </h3> 822 <p class="c-summary__author p-author h-card"> 823 824 <a class="c-summary__author-url u-url" href="authors/alandalton/" tabindex="-1"><picture> 825 <source srcset="https://cloud.24ways.org/authors/alandalton72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/alandalton72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Alan Dalton</span></a> 826 827 </p> 828 </header> 829 <div class="c-summary__main"> 830 <p class="p-summary"><strong>Alan Dalton</strong> uses this, the International Day of Persons with Disabilities, to look back at where weâve come from, to evaluate where we are, and to look forward to whatâs coming next in the future of accessibility guidelines.</p> 831 </div> 832 <footer class="c-summary__footer"> 833 <p class="c-summary__meta"> 834 <time class="dt-published" datetime="2019-12-03T00:00:00+00:00"> 835 3 <span>Dec 2019</span> 836 </time> 837 838 </p> 839 </footer> 840 </article> 841 </li> 842 843 844 845 <li> 846 847 <article class="c-summary c-summary--countdown h-entry day-02"> 848 <header class="c-summary__header"> 849 <h3 class="c-summary__title p-name"> 850 <a class="u-url" rel="bookmark" href="2019/twelve-days-of-front-end-testing/">Twelve Days of Front End Testing</a> 851 </h3> 852 <p class="c-summary__author p-author h-card"> 853 854 <a class="c-summary__author-url u-url" href="authors/amykapernick/" tabindex="-1"><picture> 855 <source srcset="https://cloud.24ways.org/authors/amykapernick72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/amykapernick72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Amy Kapernick</span></a> 856 857 </p> 858 </header> 859 <div class="c-summary__main"> 860 <p class="p-summary"><strong>Amy Kapernick</strong> sings us through numerous ways of improving the robustness and reliability of our front end code with a comprehensive rundown of ideas, tools, and resources. The girls and boys wonât get any toys until all the tests are passing.</p> 861 </div> 862 <footer class="c-summary__footer"> 863 <p class="c-summary__meta"> 864 <time class="dt-published" datetime="2019-12-02T00:00:00+00:00"> 865 2 <span>Dec 2019</span> 866 </time> 867 868 </p> 869 </footer> 870 </article> 871 </li> 872 873 874 875 <li> 876 877 <article class="c-summary c-summary--countdown h-entry day-01"> 878 <header class="c-summary__header"> 879 <h3 class="c-summary__title p-name"> 880 <a class="u-url" rel="bookmark" href="2019/making-a-better-custom-select-element/">Making a Better Custom Select Element</a> 881 </h3> 882 <p class="c-summary__author p-author h-card"> 883 884 <a class="c-summary__author-url u-url" href="authors/juliegrundy/" tabindex="-1"><picture> 885 <source srcset="https://cloud.24ways.org/authors/juliegrundy72.webp" type="image/webp" /><img class="u-photo" src="https://cloud.24ways.org/authors/juliegrundy72.jpg" width="72" height="72" alt="" /></picture><span class="p-name">Julie Grundy</span></a> 886 887 </p> 888 </header> 889 <div class="c-summary__main"> 890 <p class="p-summary"><strong>Julie Grundy</strong> kicks off this, our fifteenth year, by diving headlong into the snowy issue of customising form inputs. Nothing makes a more special gift at Christmas that something youâve designed and customised yourself. But can it be done while staying accessible to every user?</p> 891 </div> 892 <footer class="c-summary__footer"> 893 <p class="c-summary__meta"> 894 <time class="dt-published" datetime="2019-12-01T00:00:00+00:00"> 895 1 <span>Dec 2019</span> 896 </time> 897 898 </p> 899 </footer> 900 </article> 901 </li> 902 903 904 </ol> 905 </section> 906</main> 907 <footer class="c-contentinfo"> 908 <p class="c-contentinfo__social"> 909 <a href="https://feeds.feedburner.com/24ways" rel="alternate">Grab our RSS feed</a> 910 <a href="https://twitter.com/24ways" rel="me">Follow us on Twitter</a> 911 <a href="https://github.com/24ways" rel="me">Contribute on GitHub</a> 912 </p> 913 <p class="c-contentinfo__copyright"> 914 <small>© 2005-2026 24 ways and our authors</small> 915 </p> 916</footer></body> 917</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.