HTTP/1.1 200 OK
Server: nginx/1.8.0
Date: Fri, 17 Mar 2017 17:52:02 GMT
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
X-Frame-Options: deny
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
Vary: Accept-Encoding
Cache-Control: max-age=86400
Expires: Sat, 18 Mar 2017 17:49:31 GMT
X-Varnish: 1508696 2851346
Age: 151
Via: 1.1 varnish-v4
X-Cache: HIT
Accept-Ranges: bytes

<!DOCTYPE html>
<html lang="en-gb" dir="ltr" prefix="og: http://ogp.me/ns#" class="no-js">
  <head>
    <script>
      document.documentElement.className = document.documentElement.className.replace('no-js', 'has-js');

      function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "/assets/scripts/app.js?_=46";
        document.body.appendChild(element);
        document.body.dataset.menuExpanded = 'false';

        var element = document.createElement("script");
        element.src = "/_inc/stats.js";
        document.body.appendChild(element);
      }

      window.addEventListener("load", downloadJSAtOnload, false);
    </script>

    <link rel="dns-prefetch" href="//fonts.googleapis.com"/>
    <link rel="dns-prefetch" href="//themes.googleusercontent.com"/>
    <link rel="dns-prefetch" href="//cloud.24ways.org"/>
    <link rel="dns-prefetch" href="//media.24ways.org"/>
    <link rel="shortcut icon" href="/assets/icons/icon.ico" type="image/ico"/>
    <link rel="apple-touch-icon" href="/assets/icons/icon.png" type="image/png"/>
    <link rel="mask-icon" href="/assets/icons/icon.svg" color="#f04"/>
    <link rel="author" href="/humans.txt"/>
    <link rel="manifest" href="/manifest.json"/>
    <link rel="alternate" href="https://feeds.feedburner.com/24ways" type="application/rss+xml"/>
    <link rel="stylesheet" href="/assets/styles/app.css?_=46"/>

    <meta charset="utf-8"/>
    <meta name="referrer" content="origin"/>
    <meta name="robots" content="index, follow"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta property="og:url" name="twitter:url" content=""/>
    <meta property="og:title" name="twitter:title" content="Web design and development articles and tutorials for advent"/>
    <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."/>
    <meta property="og:image" name="twitter:image" content=""/>
    <meta property="og:type" content="article"/>
    <meta property="article:author" content="https://www.facebook.com/24ways"/>
    <meta name="twitter:site" content="@24ways"/>
    <meta name="twitter:creator" content="@24ways"/>
    <meta name="twitter:card" content="summary"/>
    <meta name="format-detection" content="telephone=no"/>

    <style>
      :root {
        --color-year: hsl(304, 100%, 16%);
        --color-year--dark: hsl(304, 100%, 8%);
        --color-year--dark-alpha: hsla(304, 100%, 8%, 0.8);
            }
    </style>

    <title>Web design and development articles and tutorials for advent &#9670; 24 ways</title>
  </head>
  <body>
<header class="c-banner" id="top">
  <h1 class="c-banner__title">
    <a class="c-banner__home" href="/" rel="home">24 ways <span>to impress your friends</span></a>
  </h1>
</header><a class="c-menu" href="#navigation">
  <svg class="c-menu__icon" width="20" height="20" viewBox="0 0 200 200" role="img">
	  <rect class="c-menu__line" width="120" height="10" x="40" y="45"/>
	  <rect class="c-menu__line" width="120" height="10" x="40" y="70"/>
	  <rect class="c-menu__line" width="120" height="10" x="40" y="95"/>
	  <rect class="c-menu__line" width="120" height="10" x="40" y="95"/>
	  <rect class="c-menu__line" width="120" height="10" x="40" y="120"/>
	  <rect class="c-menu__line" width="120" height="10" x="40" y="145"/>
	</svg>
  <span class="u-hidden">Jump to menu</span>
</a>
<main class="c-main" role="main">
    <section>
        <header class="c-preface">
            <h1 class="c-preface__title">2016</h1>
            <div class="c-preface__main">
                <div class="s-prose">
                    <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>
                </div>
            </div>
        </header>


        <ol class="l-grid" reversed>


	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-24">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/taking-device-orientation-for-a-spin/">Taking Device Orientation for a Spin</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/drewmclellan/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/drewmclellan72.jpg" width="72" height="72" alt="" /><span class="p-name">Drew McLellan</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="https://allinthehead.com/">Drew McLellan</a> wraps up our 2016 season with a look at the HTML5 Device Orientation API and how an annoying physical interaction can become an annoying virtual one. Like the silver sixpence in your figgy pudding, there’s treasure to be found in our browsers, so dig in.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-24T00:00:00+00:00">
    						24 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/taking-device-orientation-for-a-spin/#comments">No comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-23">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/css-writing-modes/">CSS Writing Modes</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/jensimmons/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/jensimmons72.jpg" width="72" height="72" alt="" /><span class="p-name">Jen Simmons</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="http://jensimmons.com/">Jen Simmons</a> points us in the direction of a useful but less well known CSS feature that becomes increasingly important when designing page layouts for a global audience. Like the wise men following the Star of Bethlehem, sometimes the best direction is given to us, not chosen.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-23T00:00:00+00:00">
    						23 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/css-writing-modes/#comments">3 comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-22">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/preparing-to-be-badass-next-year/">Preparing to Be Badass Next Year</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/meriwilliams/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/meriwilliams72.jpg" width="72" height="72" alt="" /><span class="p-name">Meri Williams</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="http://blog.geekmanager.co.uk/">Meri Williams</a> sets her sights on self improvement in 2017 with a guide to personal development. Like a good Christmas dinner, you can set a beautiful table, but unless you get the turkey prepared and into the oven, it’s never going to be ready to serve.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-22T00:00:00+00:00">
    						22 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/preparing-to-be-badass-next-year/#comments">4 comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-21">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/stretching-time/">Stretching Time</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/christophermurphy/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/christophermurphy72.jpg" width="72" height="72" alt="" /><span class="p-name">Christopher Murphy</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="http://christophermurphy.org/">Christopher Murphy</a> puts distractions to one side to discuss the issue of time management and procrastination. Whether you’re trying to finish up projects for Christmas, or are yet to buy your final gifts before the holidays, this could prove some well timed advice to take you into the New Year.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-21T00:00:00+00:00">
    						21 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/stretching-time/#comments">No comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-20">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/my-first-18-months-as-a-dev/">Five Lessons From My First 18 Months as a Dev</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/amysimmons/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/amysimmons72.jpg" width="72" height="72" alt="" /><span class="p-name">Amy Simmons</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="http://amysimmons.github.io/">Amy Simmons</a> conducts us in five lessons but sadly no carols, sharing the experiences gained in coming to a dev role from a background in journalism. Like seeing Christmas through a child’s eyes, sometimes the best lessons are learned from newcomers, not just the old-timers.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-20T00:00:00+00:00">
    						20 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/my-first-18-months-as-a-dev/#comments">2 comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-19">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/fairytale-of-new-promise/">Fairytale of new Promise</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/matmarquis/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/matmarquis72.jpg" width="72" height="72" alt="" /><span class="p-name">Mat Marquis</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="https://abookapart.com/products/javascript-for-web-designers">Mat Marquis</a> puts on some festive tunes before recounting the tale of asynchronous JavaScript. Promises offer a robust way of structuring your code to avoid event-driven disasters of visitor-vexing jankiness. Don’t be stuck in queues this Christmas. You might miss the main event.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-19T00:00:00+00:00">
    						19 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/fairytale-of-new-promise/#comments">2 comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-18">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/new-tricks-for-an-old-dog/">New Tricks for an Old Dog</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/tomashworth/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/tomashworth72.jpg" width="72" height="72" alt="" /><span class="p-name">Tom Ashworth</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="https://phuu.net">Tom Ashworth</a> pops a few mince pies in the oven to warm through as he shares with us experiences learned when on-boarding new front-enders into his team. From frameworks to refactoring, code reviews to componentisation, it’s got everything bar the brandy butter.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-18T00:00:00+00:00">
    						18 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/new-tricks-for-an-old-dog/#comments">No comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-17">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/front-end-developers-are-information-architects-too/">Front-End Developers Are Information Architects Too</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/francisstorr/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/francisstorr72.jpg" width="72" height="72" alt="" /><span class="p-name">Francis Storr</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="https://twitter.com/fstorr">Francis Storr</a> delves deep into our HTML and considers if the choice and application of semantics in front-end code contributes in a meaningful way to the information architecture of our sites. Perhaps the true meaning of Christmas lies in the markup.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-17T00:00:00+00:00">
    						17 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/front-end-developers-are-information-architects-too/#comments">5 comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-16">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/animation-in-design-systems/">Animation in Design Systems</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/sarahdrasner/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/sarahdrasner72.jpg" width="72" height="72" alt="" /><span class="p-name">Sarah Drasner</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="http://sarahdrasnerdesign.com/">Sarah Drasner</a> drops down on the sofa, turns on the TV and puts on some Christmas classics. Yes, it’s time to talk animation, and not just any animation, but how you prescribe and document animation in your design systems. Perhaps you’ll be moved to make some changes.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-16T00:00:00+00:00">
    						16 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/animation-in-design-systems/#comments">2 comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-15">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/http2-server-push-and-service-workers/">HTTP/2 Server Push and Service Workers: The Perfect Partnership</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/deanhume/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/deanhume72.jpg" width="72" height="72" alt="" /><span class="p-name">Dean Hume</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="https://deanhume.com/">Dean Hume</a> pops on his gown and slippers and opens up his Christmas stocking to discover the high performance gifts of Server Push and Service Workers. It’s the gift that keeps on giving.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-15T00:00:00+00:00">
    						15 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/http2-server-push-and-service-workers/#comments">3 comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-14">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/information-literacy-is-a-design-problem/">Information Literacy Is a Design Problem</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/lisamariamartin/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/lisamariamartin72.jpg" width="72" height="72" alt="" /><span class="p-name">Lisa Maria Martin</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="http://thefutureislikepie.com">Lisa Maria Martin</a> harnesses the huskies of information to the sled of knowledge and takes us on a ride through the snowy peaks and valleys of information design. Plan your route carefully and make your intentions clear, for in the wintery wastelands there are no go-arounds.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-14T00:00:00+00:00">
    						14 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/information-literacy-is-a-design-problem/#comments">2 comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-13">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/designing-imaginative-style-guides/">Designing Imaginative Style Guides</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/andyclarke/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/andyclarke72.jpg" width="72" height="72" alt="" /><span class="p-name">Andy Clarke</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="https://stuffandnonsense.co.uk">Andy Clarke</a> unpacks his tinsel and untangles the Christmas illuminations to add some brilliance to the subject of style guides. Whether you choose a boxed pre-decorated tree, or lovingly choose each adornment to your Norwegian spruce, just remember to switch the lights on.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-13T00:00:00+00:00">
    						13 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/designing-imaginative-style-guides/#comments">No comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-12">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/what-next-for-css-grid-layout/">What next for CSS Grid Layout?</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/rachelandrew/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/rachelandrew72.jpg" width="72" height="72" alt="" /><span class="p-name">Rachel Andrew</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="https://rachelandrew.co.uk/">Rachel Andrew</a> opens the door on next generation CSS to bring us tidings of Grid joy. But rest not on your laurels, we must look to what comes next for the specification. Gold may be just around the corner, but whence will the frankincense and myrrh appear?</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-12T00:00:00+00:00">
    						12 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/what-next-for-css-grid-layout/#comments">No comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-11">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/first-steps-in-vr/">First Steps in VR</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/shanehudson/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/shanehudson72.jpg" width="72" height="72" alt="" /><span class="p-name">Shane Hudson</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="http://shanehudson.net/">Shane Hudson</a> dusts the snow from his jacket and helps us take our first tentative steps into the gloomy world of virtual reality. So mark his footsteps good my page, tread thou in them boldly. Thou shalt find the virtual world spin thy head less coldly.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-11T00:00:00+00:00">
    						11 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/first-steps-in-vr/#comments">2 comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-10">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/watch-your-language/">Watch Your Language!</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/annieclaudecote/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/annieclaudecote72.jpg" width="72" height="72" alt="" /><span class="p-name">Annie-Claude Côté</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="http://annie.codes">Annie-Claude Côté</a> gathers us round the hearth to tell a tale of many languages. Like choosing the right Christmas sweater to wear while building a snowman, we must choose the language we code in wisely. Make a poor choice and risk getting left out in the cold as the darkness draws in.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-10T00:00:00+00:00">
    						10 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/watch-your-language/#comments">3 comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-09">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/responsive-display-text/">Get the Balance Right: Responsive Display Text</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/richardrutter/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/richardrutter72.jpg" width="72" height="72" alt="" /><span class="p-name">Richard Rutter</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="http://clagnut.com/">Richard Rutter</a> shepherds a tea towel onto our collective heads and describes a technique for responsively scaling display text to maintain a consistent feel in both landscape and portrait screen orientations. That should put things back into proportion.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-09T00:00:00+00:00">
    						9 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/responsive-display-text/#comments">3 comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-08">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/how-to-make-a-chrome-extension/">How to Make a Chrome Extension to Delight (or Troll) Your Friends</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/lesliezacharkow/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/lesliezacharkow72.jpg" width="72" height="72" alt="" /><span class="p-name">Leslie Zacharkow</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="http://lesliez.com">Leslie Zacharkow</a> presents the purrfect solution for anyone who’s ever dreamt of creating their own Chrome browser extension. So kick back, and while your chestnuts roast on an open fire, roast your friends and colleagues in an open tab.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-08T00:00:00+00:00">
    						8 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/how-to-make-a-chrome-extension/#comments">3 comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-07">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/what-the-heck-is-inclusive-design/">What the Heck Is Inclusive Design?</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/heydonpickering/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/heydonpickering72.jpg" width="72" height="72" alt="" /><span class="p-name">Heydon Pickering</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="http://www.heydonworks.com">Heydon Pickering</a> questions whether accessibility is really the name of the game, and asks if perhaps inclusivity might be a more broadly acceptable term for the valuable design work we do. Would a cinnamon spiced latte by any other name smell as sweet? Someone has to call it.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-07T00:00:00+00:00">
    						7 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/what-the-heck-is-inclusive-design/#comments">6 comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-06">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/public-speaking-with-a-buddy/">Public Speaking with a Buddy</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/larahogan/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/larahogan72.jpg" width="72" height="72" alt="" /><span class="p-name">Lara Hogan</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="http://larahogan.me">Lara Hogan</a> stands up and goes it alone to expound on the benefits of presenting on stage with a buddy. Preparing and delivering a presentation to a room full of people can be a daunting task, and sometimes two heads are better that one. Not even Rudolph could pull that sleigh alone.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-06T00:00:00+00:00">
    						6 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/public-speaking-with-a-buddy/#comments">No comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-05">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/we-need-to-talk-about-technical-debt/">We Need to Talk About Technical Debt</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/harryroberts/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/harryroberts72.jpg" width="72" height="72" alt="" /><span class="p-name">Harry Roberts</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="http://csswizardry.com">Harry Roberts</a> addresses the hastily-coded elephant in the room and helps us to identify what is technical debt, and what is just bad code. Hark the herald Harry sings, time for some refactoring.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-05T00:00:00+00:00">
    						5 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/we-need-to-talk-about-technical-debt/#comments">6 comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-04">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/flexible-project-management/">Flexible Project Management in Inflexible Environments</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/gilliansibthorpe/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/gilliansibthorpe72.jpg" width="72" height="72" alt="" /><span class="p-name">Gillian Sibthorpe</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="http://gilliansibthorpe.com/">Gillian Sibthorpe</a> rearranges the doors on our advent calendar by looking at how to manage those tougher projects. Like a game of limbo at the office holiday party, it pays to remain flexible in the face of adversity.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-04T00:00:00+00:00">
    						4 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/flexible-project-management/#comments">No comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-03">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/a-favor-for-your-future-self/">A Favor for Your Future Self</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/aliciasedlock/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/aliciasedlock72.jpg" width="72" height="72" alt="" /><span class="p-name">Alicia Sedlock</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="http://aliciasedlock.github.io/">Alicia Sedlock</a> embodies the Ghost of Code Reviews Yet-to-Come with a call to start testing. Do you know your unit from your integration, your acceptance from your visual regression? And will you pass the ultimate Christmas test; are you naughty or nice?</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-03T00:00:00+00:00">
    						3 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/a-favor-for-your-future-self/#comments">4 comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-02">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/creating-a-weekly-research-cadence/">Creating a Weekly Research Cadence</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/wrenlanier/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/wrenlanier72.jpg" width="72" height="72" alt="" /><span class="p-name">Wren Lanier</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="http://wrenlanier.com/">Wren Lanier</a> sets aside time to explore the benefits of a regular schedule for user research. Santa’s elves quickly discovered the benefits of working to a fixed schedule, which is of course why we don’t get presents at Easter.</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-02T00:00:00+00:00">
    						2 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/creating-a-weekly-research-cadence/#comments">No comments</a>
                    </p>
                </footer>
            </article>
	        </li>



	        <li class="l-grid__item">
				
			<article class="c-summary c-summary--countdown h-entry day-01">
                <header class="c-summary__header">
                    <h1 class="c-summary__title  p-name">
                        <a class="u-url" rel="bookmark" href="/2016/internet-of-stranger-things/">Internet of Stranger Things</a>
                    </h1>
                    <p class="c-summary__author  p-author h-card">
                    
                        <a class="u-url" href="/authors/sebleedelisle/" tabindex="-1"><img class="u-photo" src="//cloud.24ways.org/authors/sebleedelisle72.jpg" width="72" height="72" alt="" /><span class="p-name">Seb Lee-Delisle</span></a>
                    
                    </p>
                </header>
                <div class="c-summary__main">
                    <p class="p-summary"><a href="http://seb.ly">Seb Lee-Delisle</a> lights up our 2016 advent series with an illuminating guide to making your own <em>Stranger Things</em> style fairy lights to pick up messages from the upside-down (also known as the Internet).</p>
                </div>
                <footer class="c-summary__footer">
                    <p class="c-summary__meta">
                        <time class="dt-published" datetime="2016-12-01T00:00:00+00:00">
    						1 <span>Dec 2016</span>
  						</time>
                        <a class="c-summary__comments" href="/2016/internet-of-stranger-things/#comments">11 comments</a>
                    </p>
                </footer>
            </article>
	        </li>


        </ol>
    </section>
</main>
<nav class="c-navigation" id="navigation">
  <h1 class="u-hidden" id="navigation__title">Browse 24 ways</h1>
 
  <div class="c-navigation__drawer" id="navigation__drawer">
    <form class="c-search" role="search" id="search" action="/search/">
	  <fieldset class="c-field">
	    <legend class="u-hidden">Search 24 ways</legend>
	    <label class="u-hidden" for="q">Keywords</label>
	    <input class="c-field__input" type="search" id="q" name="q" placeholder="e.g. CSS, Design, Research&#8230;"/>
	    <button class="c-field__button" type="submit"><svg class="c-field__icon" width="20" height="20" viewBox="0 0 200 200" role="img" aria-labelledby="c-field__icon--search">
  <title id="c-field__icon--search">Search</title>
  <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"/>
</svg>
</button>
	  </fieldset>
	</form>
    
<ul class="c-topics-nav">

  <li class="c-topics-nav__item">
    <a class="c-topics-nav__label" href="/topics/business/">
      <svg width="24" height="24" viewBox="0 0 240 240" role="img">
  <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"/>
</svg>

      Business
    </a>
  </li>







  <li class="c-topics-nav__item">
    <a class="c-topics-nav__label" href="/topics/code/">
      <svg width="24" height="24" viewBox="0 0 240 240" role="img">
  <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"/>
</svg>

      Code
    </a>
  </li>







  <li class="c-topics-nav__item">
    <a class="c-topics-nav__label" href="/topics/content/">
      <svg width="24" height="24" viewBox="0 0 240 240" role="img">
  <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"/>
</svg>

      Content
    </a>
  </li>







  <li class="c-topics-nav__item">
    <a class="c-topics-nav__label" href="/topics/design/">
      <svg width="24" height="24" viewBox="0 0 240 240" role="img">
  <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"/>
</svg>

      Design
    </a>
  </li>







  <li class="c-topics-nav__item">
    <a class="c-topics-nav__label" href="/topics/process/">
      <svg width="24" height="24" viewBox="0 0 240 240" role="img">
  <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"/>
</svg>

      Process
    </a>
  </li>







  <li class="c-topics-nav__item">
    <a class="c-topics-nav__label" href="/topics/ux/">
      <svg width="24" height="24" viewBox="0 0 240 240" role="img">
  <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"/>
</svg>

      UX
    </a>
  </li>

</ul><!--/.nav-topics-->






    <ul class="c-site-nav">
        <li class="c-site-nav__item"><a class="c-site-nav__label" href="/archives/">Archives</a></li>
        <li class="c-site-nav__item"><a class="c-site-nav__label" href="/authors/">Authors</a></li>
        <li class="c-site-nav__item"><a class="c-site-nav__label" href="/about/">About <span class="u-hidden">24 ways</span></a></li>
    </ul>
  </div>
</nav><footer class="c-contentinfo">
    <p class="c-contentinfo__social">
        <a href="https://feeds.feedburner.com/24ways" rel="alternate">Grab our RSS feed</a>
        <a href="https://twitter.com/24ways" rel="me">Follow us on Twitter</a>
        <a href="https://github.com/24ways" rel="me">Contribute on GitHub</a>
    </p>
    <p class="c-contentinfo__copyright">
        <small>&#169; 2005-2017 24 ways and our authors</small>
    </p>
</footer></body>
</html>