projects

html glenmaddern.com collected 2026-10-03 20:40:36 UTC 14,814 bytes, 28 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta name="google-site-verification" content="mi0d15IfruJiUDIY96yrOHRa1ThGd7zO0QrkPYwmNNM" />
7    <title>Glen Maddern: Internet Pro</title>
8

8<script async src="https://use.typekit.net/sgx8ycd.js" onload="Typekit.load({async: true})"></script>

8
9    <link rel="stylesheet" id="preloaded-styles" href="/bundle.css"/>
10  </head>
11  <body>
12    <main>
13      <div class="ð ð ð¡ ð ð ð¯" data-reactid=".1b34j95075e" data-react-checksum="448972898"><nav class="ðð ð» ð ð ð® ð± ð ð¾ ð ð ð  ð" data-reactid=".1b34j95075e.0"><h1 class="ðð ð«ð¬ ð®ð¯ ð ð³" data-reactid=".1b34j95075e.0.0"><a class="ðð ð¤ð¥ ð§ð»" href="/" data-reactid=".1b34j95075e.0.0.0">Glen Maddern</a></h1><ul class="ðð ð» ð ð ð" data-reactid=".1b34j95075e.0.1"><li class="ðð ð ð" data-reactid=".1b34j95075e.0.1.0"><a class="ðð ð¤ð¥ ð¥ð¦" href="/articles" data-reactid=".1b34j95075e.0.1.0.0">Articles</a></li><li class="ðð ð ð" data-reactid=".1b34j95075e.0.1.1"><a class="ðð ð¤ð¥ ð¥ð¦ active" href="/projects" data-reactid=".1b34j95075e.0.1.1.0">Projects</a></li><li class="ðð ð ð" data-reactid=".1b34j95075e.0.1.2"><a class="ðð ð¤ð¥ ð¥ð¦" href="/talks" data-reactid=".1b34j95075e.0.1.2.0">Talks</a></li><li class="ðð ð ð" data-reactid=".1b34j95075e.0.1.3"><a class="ðð ð¤ð¥ ð¥ð¦" href="/work" data-reactid=".1b34j95075e.0.1.3.0">Work</a></li></ul></nav><div class="ð ð ð ð ð" data-reactid=".1b34j95075e.1"><section class="ð ð ð¡ ð" data-reactid=".1b34j95075e.1.0"><h2 class="ð ð¶ ð¸ ð ð ð® ð±" data-reactid=".1b34j95075e.1.0.0">projects</h2><ol class="ð ð» ð ð ð ð ð" data-reactid=".1b34j95075e.1.0.1"><li class="ð ð«ð¬ ð¯ð° ðºð» ð ð  ð» ð¼ ð ð" data-reactid=".1b34j95075e.1.0.1.$0"><figure class="ð" data-reactid=".1b34j95075e.1.0.1.$0.0"><a class="ð ð¤ð¥ ð¥ð¦ ð¼ð½ ð ð" target="_blank" href="https://frontend.center" data-reactid=".1b34j95075e.1.0.1.$0.0.0"><div class="ð ð ð ð ðð ðð" style="background-image:url(/assets/images/front-end-center.png);" data-reactid=".1b34j95075e.1.0.1.$0.0.0.0"></div></a><figcaption class="ð ð«ð¬ ð®ð¯ ð ð ð¥" data-reactid=".1b34j95075e.1.0.1.$0.0.1"><h3 class="ð ð ð» ðµ ð ð ð" data-reactid=".1b34j95075e.1.0.1.$0.0.1.0">Front End Center</h3><h4 class="ð ð ð ð ð® ð¿ ð±" data-reactid=".1b34j95075e.1.0.1.$0.0.1.1">Screencasts for Web Professionals</h4><a class="ð ð ð¿ ð£ ð¤ð¥ ð¦ð§" target="_blank" href="https://frontend.center" data-reactid=".1b34j95075e.1.0.1.$0.0.1.2">frontend.center</a></figcaption></figure></li><li class="ð ð«ð¬ ð¯ð° ðºð» ð ð  ð» ð¼ ð ð" data-reactid=".1b34j95075e.1.0.1.$1"><figure class="ð" data-reactid=".1b34j95075e.1.0.1.$1.0"><a class="ð ð¤ð¥ ð¥ð¦ ð¼ð½ ð ð" target="_blank" href="https://styled-components.com/" data-reactid=".1b34j95075e.1.0.1.$1.0.0"><div class="ð ð ð ð ðð ðð" style="background-image:url(/assets/images/styled-components.png);" data-reactid=".1b34j95075e.1.0.1.$1.0.0.0"></div></a><figcaption class="ð ð«ð¬ ð®ð¯ ð ð ð¥" data-reactid=".1b34j95075e.1.0.1.$1.0.1"><h3 class="ð ð ð» ðµ ð ð ð" data-reactid=".1b34j95075e.1.0.1.$1.0.1.0">Styled Components</h3><h4 class="ð ð ð ð ð® ð¿ ð±" data-reactid=".1b34j95075e.1.0.1.$1.0.1.1">Visual primitives for the component age.</h4><a class="ð ð ð¿ ð£ ð¤ð¥ ð¦ð§" target="_blank" href="https://styled-components.com/" data-reactid=".1b34j95075e.1.0.1.$1.0.1.2">styled-components.com</a></figcaption></figure></li><li class="ð ð«ð¬ ð¯ð° ðºð» ð ð  ð» ð¼ ð ð" data-reactid=".1b34j95075e.1.0.1.$2"><figure class="ð" data-reactid=".1b34j95075e.1.0.1.$2.0"><a class="ð ð¤ð¥ ð¥ð¦ ð¼ð½ ð ð" target="_blank" href="http://typeslab.com" data-reactid=".1b34j95075e.1.0.1.$2.0.0"><div class="ð ð ð ð ðð ðð" style="background-image:url(/assets/images/typeslab.png);" data-reactid=".1b34j95075e.1.0.1.$2.0.0.0"></div></a><figcaption class="ð ð«ð¬ ð®ð¯ ð ð ð¥" data-reactid=".1b34j95075e.1.0.1.$2.0.1"><h3 class="ð ð ð» ðµ ð ð ð" data-reactid=".1b34j95075e.1.0.1.$2.0.1.0">TypeSlab</h3><h4 class="ð ð ð ð ð® ð¿ ð±" data-reactid=".1b34j95075e.1.0.1.$2.0.1.1">Simple, shareable typographic posters</h4><a class="ð ð ð¿ ð£ ð¤ð¥ ð¦ð§" target="_blank" href="http://typeslab.com" data-reactid=".1b34j95075e.1.0.1.$2.0.1.2">typeslab.com</a></figcaption></figure></li><li class="ð ð«ð¬ ð¯ð° ðºð» ð ð  ð» ð¼ ð ð" data-reactid=".1b34j95075e.1.0.1.$3"><figure class="ð" data-reactid=".1b34j95075e.1.0.1.$3.0"><a class="ð ð¤ð¥ ð¥ð¦ ð¼ð½ ð ð" target="_blank" href="http://geelen.github.io/x-gif" data-reactid=".1b34j95075e.1.0.1.$3.0.0"><div class="ð ð ð ð ðð ðð" style="background-image:url(/assets/images/x_gif.jpg);" data-reactid=".1b34j95075e.1.0.1.$3.0.0.0"></div></a><figcaption class="ð ð«ð¬ ð®ð¯ ð ð ð¥" data-reactid=".1b34j95075e.1.0.1.$3.0.1"><h3 class="ð ð ð» ðµ ð ð ð" data-reactid=".1b34j95075e.1.0.1.$3.0.1.0">&lt;x-gif&gt;</h3><h4 class="ð ð ð ð ð® ð¿ ð±" data-reactid=".1b34j95075e.1.0.1.$3.0.1.1">The GIF tag the internet deserves</h4><a class="ð ð ð¿ ð£ ð¤ð¥ ð¦ð§" target="_blank" href="http://geelen.github.io/x-gif" data-reactid=".1b34j95075e.1.0.1.$3.0.1.2">geelen.github.io/x-gif</a></figcaption></figure></li><li class="ð ð«ð¬ ð¯ð° ðºð» ð ð  ð» ð¼ ð ð" data-reactid=".1b34j95075e.1.0.1.$4"><figure class="ð" data-reactid=".1b34j95075e.1.0.1.$4.0"><a class="ð ð¤ð¥ ð¥ð¦ ð¼ð½ ð ð" target="_blank" href="http://dumb.domains" data-reactid=".1b34j95075e.1.0.1.$4.0.0"><div class="ð ð ð ð ðð ðð" style="background-image:url(/assets/images/dumb_domains.png);" data-reactid=".1b34j95075e.1.0.1.$4.0.0.0"></div></a><figcaption class="ð ð«ð¬ ð®ð¯ ð ð ð¥" data-reactid=".1b34j95075e.1.0.1.$4.0.1"><h3 class="ð ð ð» ðµ ð ð ð" data-reactid=".1b34j95075e.1.0.1.$4.0.1.0">dumb.domains</h3><h4 class="ð ð ð ð ð® ð¿ ð±" data-reactid=".1b34j95075e.1.0.1.$4.0.1.1">The internet is dumb and awesome again</h4><a class="ð ð ð¿ ð£ ð¤ð¥ ð¦ð§" target="_blank" href="http://dumb.domains" data-reactid=".1b34j95075e.1.0.1.$4.0.1.2">dumb.domains</a></figcaption></figure></li><li class="ð ð«ð¬ ð¯ð° ðºð» ð ð  ð» ð¼ ð ð" data-reactid=".1b34j95075e.1.0.1.$5"><figure class="ð" data-reactid=".1b34j95075e.1.0.1.$5.0"><a class="ð ð¤ð¥ ð¥ð¦ ð¼ð½ ð ð" target="_blank" href="http://geelen.github.io/x-beat" data-reactid=".1b34j95075e.1.0.1.$5.0.0"><div class="ð ð ð ð ðð ðð" style="background-image:url(/assets/images/x_beat.jpg);" data-reactid=".1b34j95075e.1.0.1.$5.0.0.0"></div></a><figcaption class="ð ð«ð¬ ð®ð¯ ð ð ð¥" data-reactid=".1b34j95075e.1.0.1.$5.0.1"><h3 class="ð ð ð» ðµ ð ð ð" data-reactid=".1b34j95075e.1.0.1.$5.0.1.0">&lt;x-beat&gt;</h3><h4 class="ð ð ð ð ð® ð¿ ð±" data-reactid=".1b34j95075e.1.0.1.$5.0.1.1">Beat-matched playback for GIFs &amp; more</h4><a class="ð ð ð¿ ð£ ð¤ð¥ ð¦ð§" target="_blank" href="http://geelen.github.io/x-beat" data-reactid=".1b34j95075e.1.0.1.$5.0.1.2">geelen.github.io/x-beat</a></figcaption></figure></li><li class="ð ð«ð¬ ð¯ð° ðºð» ð ð  ð» ð¼ ð ð" data-reactid=".1b34j95075e.1.0.1.$6"><figure class="ð" data-reactid=".1b34j95075e.1.0.1.$6.0"><a class="ð ð¤ð¥ ð¥ð¦ ð¼ð½ ð ð" target="_blank" href="https://github.com/geelen/git-smart" data-reactid=".1b34j95075e.1.0.1.$6.0.0"><div class="ð ð ð ð ðð ðð" style="background-image:url(/assets/images/git_smart.jpg);" data-reactid=".1b34j95075e.1.0.1.$6.0.0.0"></div></a><figcaption class="ð ð«ð¬ ð®ð¯ ð ð ð¥" data-reactid=".1b34j95075e.1.0.1.$6.0.1"><h3 class="ð ð ð» ðµ ð ð ð" data-reactid=".1b34j95075e.1.0.1.$6.0.1.0">git-smart</h3><h4 class="ð ð ð ð ð® ð¿ ð±" data-reactid=".1b34j95075e.1.0.1.$6.0.1.1">

13Add some smarts to your git workflow</h4><a class="ð ð ð¿ ð£ ð¤ð¥ ð¦ð§" target="_blank" href="https://github.com/geelen/git-smart" data-reactid=".1b34j95075e.1.0.1.$6.0.1.2">github.com/geelen/git-smart</a></figcaption></figure></li></ol></section></div><footer class="ðð ð ð¡ ð ð ð ð¶ ð· ð ð® ð±" data-reactid=".1b34j95075e.2"><figure class="ðð ð ð ð» ð ð" data-reactid=".1b34j95075e.2.0"><img class="ðð ð«ð¬ ð¬ð ðð ðð ðð ðð ð°ð² ð ðº" src="/assets/images/me_160.jpg" data-reactid=".1b34j95075e.2.0.0"><figcaption class="ðð  ð ð¾ ð ð" data-reactid=".1b34j95075e.2.0.1"><span class="ð ð¡ ð ð³" data-reactid=".1b34j95075e.2.0.1.0">Glen Maddern</span><span data-reactid=".1b34j95075e.2.0.1.1"> is an independent web developer from Melbourne, Australia. You should </span><span class="t-type--semibold" data-reactid=".1b34j95075e.2.0.1.2">get in touch</span><span data-reactid=".1b34j95075e.2.0.1.3"> using one of the following useful internet services:</span><div class="ð¡ð¢ ð» ð ð ð ð" data-reactid=".1b34j95075e.2.0.1.4"><a class="ð¢ð£ ð¤ð¥ ð¦ð§ ð ð" href="https://twitter.com/glenmaddern" data-reactid=".1b34j95075e.2.0.1.4.0"><svg class="ð£ð¤ ðð ðð ð ð ð¹" version="1.1" viewBox="0 0 512 512" data-reactid=".1b34j95075e.2.0.1.4.0.0"><path style="opacity:1;fill:currentColor;" d="M512,97.209c-18.838,8.354-39.082,14.001-60.33,16.54c21.687-13,38.343-33.585,46.187-58.115 c-20.299,12.039-42.778,20.78-66.705,25.49c-19.16-20.415-46.461-33.17-76.674-33.17c-58.011,0-105.043,47.029-105.043,105.039 c0,8.233,0.929,16.25,2.72,23.939c-87.3-4.382-164.701-46.2-216.509-109.753c-9.042,15.514-14.223,33.558-14.223,52.809 c0,36.444,18.544,68.596,46.73,87.433c-17.219-0.546-33.416-5.271-47.577-13.139c-0.01,0.438-0.01,0.878-0.01,1.321 c0,50.894,36.209,93.348,84.261,103c-8.813,2.399-18.094,3.686-27.674,3.686c-6.769,0-13.349-0.66-19.764-1.887 c13.368,41.73,52.16,72.104,98.126,72.949c-35.95,28.175-81.243,44.967-130.458,44.967c-8.479,0-16.84-0.497-25.058-1.471 c46.486,29.806,101.701,47.197,161.021,47.197c193.211,0,298.868-160.062,298.868-298.872c0-4.554-0.103-9.084-0.305-13.59 C480.11,136.773,497.918,118.273,512,97.209z" data-reactid=".1b34j95075e.2.0.1.4.0.0.0"></path></svg></a><a class="ð¢ð£ ð¤ð¥ ð¦ð§ ð ð" href="https://github.com/geelen" data-reactid=".1b34j95075e.2.0.1.4.1"><svg class="ð£ð¤ ðð ðð ð ð ð¹" version="1.1" viewBox="0 0 512 512" data-reactid=".1b34j95075e.2.0.1.4.1.0"><path style="opacity:1;fill:currentColor;" d="M256,0C114.615,0,0,114.615,0,256s114.615,256,256,256s256-114.615,256-256S397.385,0,256,0z M408.028,408.028 c-19.76,19.758-42.756,35.266-68.354,46.093c-6.503,2.75-13.106,5.164-19.8,7.246V423c0-20.167-6.917-35-20.75-44.5 c8.667-0.833,16.625-2,23.875-3.5s14.917-3.667,23-6.5s15.333-6.208,21.75-10.125s12.583-9,18.5-15.25s10.875-13.333,14.875-21.25 s7.167-17.417,9.5-28.5s3.5-23.292,3.5-36.625c0-25.833-8.417-47.833-25.25-66c7.667-20,6.833-41.75-2.5-65.25l-6.25-0.75 c-4.333-0.5-12.125,1.333-23.375,5.5s-23.875,11-37.875,20.5c-19.833-5.5-40.417-8.25-61.75-8.25c-21.5,0-42,2.75-61.5,8.25 c-8.833-6-17.208-10.958-25.125-14.875s-14.25-6.583-19-8s-9.167-2.292-13.25-2.625s-6.708-0.417-7.875-0.25s-2,0.333-2.5,0.5 c-9.333,23.667-10.167,45.417-2.5,65.25c-16.833,18.167-25.25,40.167-25.25,66c0,13.333,1.167,25.542,3.5,36.625 s5.5,20.583,9.5,28.5s8.958,15,14.875,21.25s12.083,11.333,18.5,15.25s13.667,7.292,21.75,10.125s15.75,5,23,6.5 s15.208,2.667,23.875,3.5c-13.667,9.333-20.5,24.167-20.5,44.5v39.115c-7.549-2.247-14.99-4.902-22.3-7.994 c-25.597-10.827-48.594-26.335-68.353-46.093c-19.758-19.759-35.267-42.757-46.093-68.354C46.679,313.195,41,285.043,41,256 s5.679-57.195,16.879-83.675c10.827-25.597,26.335-48.594,46.093-68.353c19.758-19.759,42.756-35.267,68.353-46.093 C198.805,46.679,226.957,41,256,41s57.195,5.679,83.675,16.879c25.599,10.827,48.595,26.335,68.354,46.093 c19.758,19.758,35.266,42.756,46.093,68.353C465.321,198.805,471,226.957,471,256s-5.679,57.195-16.879,83.675 C443.294,365.271,427.786,388.27,408.028,408.028z" data-reactid=".1b34j95075e.2.0.1.4.1.0.0"></path></svg></a><a class="ð¢ð£ ð¤ð¥ ð¦ð§ ð ð" href="/cdn-cgi/l/email-protection#56313a333816313a33383b3732323324387835393b" data-reactid=".1b34j95075e.2.0.1.4.2"><svg class="ð£ð¤ ðð ðð ð ð ð¹" version="1.1" viewBox="0 0 512 512" data-reactid=".1b34j95075e.2.0.1.4.2.0"><path style="opacity:1;fill:currentColor;" d="M464,64H48C21.6,64,0,85.6,0,112v320c0,26.4,21.6,48,48,48h416c26.4,0,48-21.6,48-48V112C512,85.6,490.4,64,464,64z  M199.37,275.186L64,380.632V129.811L199.37,275.186z M88.19,128h335.62L256,254L88.19,128z M204.644,280.85L256,336l51.355-55.15 L412.632,416H99.368L204.644,280.85z M312.63,275.186L448,129.811v250.821L312.63,275.186z" data-reactid=".1b34j95075e.2.0.1.4.2.0.0"></path></svg></a></div></figcaption></figure></footer></div>
14    </main>

vendor: 114 bytes, lines 14-16

14
15
16    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>

16<script>

vendor: 362 bytes, lines 16-21

16
17      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
18      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
19      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
20      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
21          ga('create', '

21UA-32408977-4

vendor: 46 bytes, lines 21-23

21', 'auto');
22      ga('send', 'pageview');
23

23</script>

23
24
25

25<script src='/bundle.js'></script>

25
26

26<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"96f1ae19e813484c9b4f1ecd499fed07","r":1,"spa":2}' crossorigin="anonymous"></script>

26
27</body>
28</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.