CINXE.COM
Lyza.com: About Lyza
<!doctype html> <html lang="en"> <head> <title>Lyza.com: About Lyza</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" /> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display+SC:ital,wght@0,400;0,900;1,400&family=Playfair+Display:ital,wght@0,900;1,400&display=swap" rel="stylesheet" /> <link href="/styles.css" rel="stylesheet" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" integrity="sha512-mIs9kKbaw6JZFfSuo+MovjU+Ntggfoj8RwAmJbVXQ5mkAX5LlgETQEweFPI18humSPHymTb5iikEOKWF7I8ncQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <meta name="robots" content="noimageai" /> <meta name="robots" content="noai" /> <meta name="author" content="Lyza Danger Gardner" /> <meta name="robots" content="index,follow" /> <meta property="article:author" content="Lyza Danger Gardner" /> <meta property="og:type" content="article" /> <meta property="og:title" content="About Lyza" /> <meta property="og:url" content="https://www.lyza.com/" /> <meta property="og:image" content="https://res.cloudinary.com/dfsssdwbu/image/fetch/w_1200,h_630,q_100/co_rgb:000,l_text:Playfair%20Display_72_900:Lyza/fl_layer_apply,g_north_west,x_50,y_40/co_rgb:000,l_text:Playfair%20Display_72_900:Gardner/fl_layer_apply,g_north_west,x_50,y_135/co_rgb:e60a62,l_text:Playfair%20Display_72_900:Danger/fl_layer_apply,g_north_west,x_70,y_92/l_fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGZzc3Nkd2J1L2ltYWdlL3VwbG9hZC92MTcwOTIyNjEyOC9seXphX2loNnJray5naWY=/fl_layer_apply,g_south_east/co_rgb:e60a62,l_text:Playfair%20Display%20SC_36_bold:Lyza.Com/fl_layer_apply,g_south_east,x_220,y_15/co_rgb:44403c,l_text:Playfair%20Display_72_400_italic_line_spacing_-15:About%20Lyza,c_fit,w_900/fl_layer_apply,g_north,y_240/https://res.cloudinary.com/dfsssdwbu/image/upload/v1709226095/white_ldpjpk.jpg" /> <meta property="og:description" content="Lyza Danger Gardner is a web developer and human, forest dweller of Vermont and steward of the web platform for over 25 years. " /> <link rel="me" href="mailto:lyza@lyza.com" /> <link rel="canonical" href="https://www.lyza.com/" /> <link rel="alternate" type="application/rss+xml" href="/feeds/rss.rss" title="Lyza.com: All Posts" /> <link rel="alternate" type="application/rss+xml" href="/feeds/tech.rss" title="Lyza.com: Work and Tech Posts" /> <link rel="alternate" type="application/rss+xml" href="/feeds/life.rss" title="Lyza.com: Life (Non-tech) Posts" /> </head> <body class="mx-4 font-body"> <a href="#skip" class="sr-only">Skip to main content</a> <div class="mx-auto flex min-h-[100vh] max-w-5xl flex-col space-y-6 py-2 md:space-y-8 md:py-8" ><header role="banner" class=" grid grid-cols-3 items-center gap-x-8 border-b-2 border-t border-grey-900" > <div class="col-span-3 grid grid-cols-2 border-b-3 border-b-grey-900 md:grid-cols-3" > <div class="col-span-1 self-center pl-4 md:col-span-2"> <a href="/"> <div class="flex items-center gap-x-1 font-display text-lg italic sm:text-xl md:text-2xl" > <div class="sr-only md:not-sr-only">Web Builder</div> <div class="md:sr-only">Dev</div> <div class="flex h-6 w-6 items-center justify-center rounded-full bg-pank text-white md:h-10 md:w-10 md:text-4xl" > & </div> <div>Person</div> </div> </a> </div> <div class="col-span-1 justify-self-end pr-4"> <nav class="print:hidden"> <ul class="flex flex-row gap-4 justify-self-stretch sm:gap-6"> <li class="border-pank border-b-10 pt-2.5" > <a href="/" aria-current="page" class="italic font-smallcaps text-lg font-light text-grey-700 transition-colors hover:text-pank" >About</a > </li> <li class="border-transparent border-b-10 pt-2.5" > <a href="/blog" class=" font-smallcaps text-lg font-light text-grey-700 transition-colors hover:text-pank" >Blog</a > </li> </ul> </nav> </div> </div> <div class="col-span-1 self-stretch sm:self-center"> <a href="/"> <h1 class="font-display text-2xl sm:text-5xl lg:text-6xl"> <div class="relative z-10 md:-mt-2">Lyza</div> <div class="relative z-0 -mt-4 ml-3 text-pank">Danger</div> <div class="relative -mt-4 ml-1">Gardner</div> </h1> </a> </div> <div class="relative col-span-2 flex self-stretch border-l border-grey-900"> <div class="grid sm:grid-cols-2"> <div class="col-span-1"> <img src="/images/lyza.gif" class="absolute bottom-0 right-full h-[110px] w-[100px] sm:right-auto sm:h-[170px] sm:w-[155px] sm:scale-x-[-1] lg:h-auto lg:w-auto print:h-[155px] print:w-[140px]" alt="Lyza" /> </div> <div class="col-span-1 self-center p-2 text-grey-800"> <div class="sm:-ml-8 sm:leading-tight md:-ml-12 md:leading-normal lg:-ml-4" > <span class="mr-2 font-display text-lg md:text-2xl"> Hi! I鈥檓 Lyza! </span> <span class="italic text-grey-600 lg:block lg:pt-1"> I am a developer and human, forest dweller of Vermont and steward of the web platform for over 25 years. </span> </div> </div> </div> </div> </header> <div class="grid flex-grow grid-cols-12 gap-x-4 gap-y-6 md:gap-y-12 lg:gap-y-16" > <div class="col-span-12 md:col-span-2 md:border-r md:pr-4 md:text-right lg:col-span-2" > <a id="about"> <h2 class="text-center font-display text-2xl sm:text-left md:text-right md:text-base lg:text-2xl" > About Lyza </h2> </a> </div> <main class="prose prose-stone col-span-12 lg:prose-lg sm:col-span-8 md:col-span-6 lg:col-span-7 lg:text-justify" id="skip" > <p>Hi, I'm Lyza Danger Gardner. I have over 25 years of experience building on the open Web platform. I came from Portland, Ore., where was a co-founder of聽<a href="http://www.cloudfour.com/">Cloud Four</a>. I鈥檓 a generalist with an abiding love for the Web.</p> <p>I like figuring things out and building web applications and sites. I <em>especially</em> like writing, speaking, and teaching about web technology, bringing people together and helping to be a good steward of the web and its standards.</p> <p>I鈥檝e written a couple of <a href="#books">books</a>, written a whole lot of <a href="#publications">other content</a>, and spoken at dozens of <a href="#conferences">conferences</a>. <a href="#what-i-do">I know how</a> web fundamentals work, am reasonably decent at JavaScript/TypeScript, and have spent a lot of time doing front-end and full-stack development.</p> </main> <div class="col-span-12 flex flex-col gap-y-4 sm:col-span-4 md:col-span-4 md:gap-y-0 lg:col-span-3" > <h2 class="border-b pb-2 font-display text-lg sm:text-base lg:text-lg"> Find me out there </h2> <ul class="space-y-4 px-2 text-xl md:space-y-3 md:p-4"> <li> <div class="group font-light leading-none" style="font-variant-caps:all-small-caps" > <a href="https://github.com/lyzadanger" > <div class="flex items-center gap-x-[0.4em] md:gap-x-[0.5em]"> <div class="h-[0.8em] w-[0.8em] text-grey-700 transition-colors group-hover:text-pank" > <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" > <title>GitHub</title> <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" /> </svg> </div> <div class="-mt-[0.1em] text-pank transition-colors group-hover:underline" > GitHub </div> </div> </a> </div> </li> <li> <div class="group font-light leading-none" style="font-variant-caps:all-small-caps" > <a href="https://www.instagram.com/lyzadanger/" > <div class="flex items-center gap-x-[0.4em] md:gap-x-[0.5em]"> <div class="h-[0.8em] w-[0.8em] text-grey-700 transition-colors group-hover:text-pank" > <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" > <title>Instagram</title> <path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077" /> </svg> </div> <div class="-mt-[0.1em] text-pank transition-colors group-hover:underline" > Instagram </div> </div> </a> </div> </li> <li> <div class="group font-light leading-none" style="font-variant-caps:all-small-caps" > <a href="https://indieweb.social/@lyzadanger" > <div class="flex items-center gap-x-[0.4em] md:gap-x-[0.5em]"> <div class="h-[0.8em] w-[0.8em] text-grey-700 transition-colors group-hover:text-pank" > <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" > <title>Mastodon</title> <path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z" /> </svg> </div> <div class="-mt-[0.1em] text-pank transition-colors group-hover:underline" > Mastodon </div> </div> </a> </div> </li> <li> <div class="group font-light leading-none" style="font-variant-caps:all-small-caps" > <a href="mailto:lyza@lyza.com" > <div class="flex items-center gap-x-[0.4em] md:gap-x-[0.5em]"> <div class="h-[0.8em] w-[0.8em] text-grey-700 transition-colors group-hover:text-pank" > <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" > <g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" ></g> <g id="SVGRepo_iconCarrier"> <path d="M4 7.00005L10.2 11.65C11.2667 12.45 12.7333 12.45 13.8 11.65L20 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ></path> <rect x="3" y="5" width="18" height="14" rx="2" stroke-width="2" stroke-linecap="round" ></rect> </g> </svg> </div> <div class="-mt-[0.1em] text-pank transition-colors group-hover:underline" > Email </div> </div> </a> </div> </li> </ul> <h2 class="border-b pb-2 font-display text-lg sm:text-base lg:text-lg"> Follow my work (and play) </h2> <ul class="space-y-4 px-2 text-xl md:space-y-3 md:p-4"> <div class="group font-light leading-none" style="font-variant-caps:all-small-caps" > <a href="/feeds/rss.rss" > <div class="flex items-center gap-x-[0.4em] md:gap-x-[0.5em]"> <div class="h-[0.8em] w-[0.8em] text-grey-700 transition-colors group-hover:text-pank" > <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" fill="currentColor" > <g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" ></g> <g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4 5C4 4.44772 4.44772 4 5 4C13.2843 4 20 10.7157 20 19C20 19.5523 19.5523 20 19 20C18.4477 20 18 19.5523 18 19C18 11.8203 12.1797 6 5 6C4.44772 6 4 5.55228 4 5ZM4 10C4 9.44772 4.44772 9 5 9C10.5228 9 15 13.4772 15 19C15 19.5523 14.5523 20 14 20C13.4477 20 13 19.5523 13 19C13 14.5817 9.41828 11 5 11C4.44772 11 4 10.5523 4 10ZM6.5 20C7.88071 20 9 18.8807 9 17.5C9 16.1193 7.88071 15 6.5 15C5.11929 15 4 16.1193 4 17.5C4 18.8807 5.11929 20 6.5 20Z" fill="currentColor" ></path> </g> </svg> </div> <div class="-mt-[0.1em] text-pank transition-colors group-hover:underline" > RSS: Everything </div> </div> </a> </div> <div class="group font-light leading-none" style="font-variant-caps:all-small-caps" > <a href="/feeds/tech.rss" > <div class="flex items-center gap-x-[0.4em] md:gap-x-[0.5em]"> <div class="h-[0.8em] w-[0.8em] text-grey-700 transition-colors group-hover:text-pank" > <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" fill="currentColor" > <g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" ></g> <g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4 5C4 4.44772 4.44772 4 5 4C13.2843 4 20 10.7157 20 19C20 19.5523 19.5523 20 19 20C18.4477 20 18 19.5523 18 19C18 11.8203 12.1797 6 5 6C4.44772 6 4 5.55228 4 5ZM4 10C4 9.44772 4.44772 9 5 9C10.5228 9 15 13.4772 15 19C15 19.5523 14.5523 20 14 20C13.4477 20 13 19.5523 13 19C13 14.5817 9.41828 11 5 11C4.44772 11 4 10.5523 4 10ZM6.5 20C7.88071 20 9 18.8807 9 17.5C9 16.1193 7.88071 15 6.5 15C5.11929 15 4 16.1193 4 17.5C4 18.8807 5.11929 20 6.5 20Z" fill="currentColor" ></path> </g> </svg> </div> <div class="-mt-[0.1em] text-pank transition-colors group-hover:underline" > RSS: Tech stuff </div> </div> </a> </div> <div class="group font-light leading-none" style="font-variant-caps:all-small-caps" > <a href="/feeds/life.rss" > <div class="flex items-center gap-x-[0.4em] md:gap-x-[0.5em]"> <div class="h-[0.8em] w-[0.8em] text-grey-700 transition-colors group-hover:text-pank" > <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" fill="currentColor" > <g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" ></g> <g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4 5C4 4.44772 4.44772 4 5 4C13.2843 4 20 10.7157 20 19C20 19.5523 19.5523 20 19 20C18.4477 20 18 19.5523 18 19C18 11.8203 12.1797 6 5 6C4.44772 6 4 5.55228 4 5ZM4 10C4 9.44772 4.44772 9 5 9C10.5228 9 15 13.4772 15 19C15 19.5523 14.5523 20 14 20C13.4477 20 13 19.5523 13 19C13 14.5817 9.41828 11 5 11C4.44772 11 4 10.5523 4 10ZM6.5 20C7.88071 20 9 18.8807 9 17.5C9 16.1193 7.88071 15 6.5 15C5.11929 15 4 16.1193 4 17.5C4 18.8807 5.11929 20 6.5 20Z" fill="currentColor" ></path> </g> </svg> </div> <div class="-mt-[0.1em] text-pank transition-colors group-hover:underline" > RSS: Non-tech stuff </div> </div> </a> </div> </ul> </div> <div class="col-span-12 grid items-center gap-4 border-l border-l-8 border-pank bg-grey-100 p-3 md:grid-cols-12" > <h2 class="font-display text-xl md:col-span-3 md:pr-8 md:text-right md:text-2xl lg:col-span-2" > The latest </h2> <div class="space-y-2 md:col-span-9 lg:col-span-10"> <div class="border-b"> <h3 class="font-display md:text-lg"> <a href="/series/lyza-dot-com-history" class="transition-colors hover:text-pank hover:underline" >27 Years of Lyza.com: A series</a > </h3> </div> <div class="prose prose-sm prose-stone md:prose-base"> <p>I started writing a series of historical blog posts about the 27-year history of my domain, Lyza.com. I thought it was going to be a chance to trot out technical milestones and document how my website echoed the evolution of the web platform. But it has headed somewhere else entirely.</p> </div> <div> <a class="text-blue-800 underline transition-colors hover:text-pank" href="/series/lyza-dot-com-history" >Read more...</a > | <a href="/blog" class="text-blue-800 underline transition-colors hover:text-pank" >All blog posts</a > </div> </div> </div> <div class="col-span-12"> <img src="https://res.cloudinary.com/dfsssdwbu/image/upload/v1706555956/lyza-working_bdrz2p.jpg" alt="Lyza Working" class="max-h-[200px] w-full object-cover object-top lg:max-h-[280px]" /> </div> <div class="col-span-12 md:col-span-2 md:border-r md:pr-4 md:text-right lg:col-span-2" > <a id="books"> <h2 class="text-center font-display text-2xl sm:text-left md:text-right md:text-base lg:text-2xl" > Books </h2> </a> </div> <div class="col-span-12 grid grid-cols-2 gap-4 md:col-span-9 lg:col-span-10 lg:px-16" > <div class="group row-span-2 grid max-w-[18rem] grid-rows-subgrid gap-2"> <div class="border-b border-t-3 border-grey-800 py-2"> <h3 class="text-center font-display text-blue-800"> <a href="https://www.manning.com/books/javascript-on-things" class="transition-colors group-hover:text-pank group-hover:underline" > <i>JavaScript on Things: Hacking Hardware for Web Developers</i> </a> </h3> </div> <div class="self-center justify-self-center p-4"> <a href="https://www.manning.com/books/javascript-on-things"> <img src="https://res.cloudinary.com/dfsssdwbu/image/upload/v1706288827/jsot_gh01nu.jpg" alt="JavaScript on Things: Hacking Hardware for Web Developers" class="drop-shadow-lg group-hover:outline group-hover:outline-grey-600 group-hover:drop-shadow-xl" /> </a> </div> </div> <div class="group row-span-2 grid max-w-[18rem] grid-rows-subgrid gap-2"> <div class="border-b border-t-3 border-grey-800 py-2"> <h3 class="text-center font-display text-blue-800"> <a href="https://www.oreilly.com/library/view/head-first-mobile/9781449324773/" class="transition-colors group-hover:text-pank group-hover:underline" > <i>Head First Mobile Web</i> </a> </h3> </div> <div class="self-center justify-self-center p-4"> <a href="https://www.oreilly.com/library/view/head-first-mobile/9781449324773/"> <img src="https://res.cloudinary.com/dfsssdwbu/image/upload/v1706288818/hfmw_wh6za6.jpg" alt="Head First Mobile Web" class="drop-shadow-lg group-hover:outline group-hover:outline-grey-600 group-hover:drop-shadow-xl" /> </a> </div> </div> </div> <div class="col-span-12 md:col-span-2 md:border-r md:pr-4 md:text-right lg:col-span-2" > <a id="conferences"> <h2 class="text-center font-display text-2xl sm:text-left md:text-right md:text-base lg:text-2xl" > Selected Conferences </h2> </a> </div> <div class="col-span-12 md:col-span-9 lg:col-span-10"> <ul class="grid grid-cols-3 items-center justify-items-center gap-6 sm:grid-cols-4 lg:grid-cols-6 lg:gap-6" > <li><img src="https://res.cloudinary.com/dfsssdwbu/image/upload/c_thumb,h_70/v1706283377/btconf.png" alt="Beyond Tellerand" /></li> <li><img src="https://res.cloudinary.com/dfsssdwbu/image/upload/c_thumb,h_70/v1706283406/jsconf_gd33ek.png" alt="JS Conf" /></li> <li><img src="https://res.cloudinary.com/dfsssdwbu/image/upload/v1706557053/smashing-logo_vhdizo.png" alt="Smashing Conference" /></li> <li><img src="https://res.cloudinary.com/dfsssdwbu/image/upload/c_thumb,h_70/v1706284325/holyjs_eypd7k.png" alt="Holy JS" /></li> <li><img src="https://res.cloudinary.com/dfsssdwbu/image/upload/c_thumb,h_70/v1706284233/responsive-field-day_osu9x0.png" alt="Responsive Field Day" /></li> <li><img src="https://res.cloudinary.com/dfsssdwbu/image/upload/c_thumb,h_70/v1706284218/web-expo_tzfip3.png" alt="Web Expo" /></li> <li><img src="https://res.cloudinary.com/dfsssdwbu/image/upload/c_thumb,h_70/v1706284229/velocity_cfrzi6.png" alt="O'Reilly Velocity" /></li> <li><img src="https://res.cloudinary.com/dfsssdwbu/image/upload/c_thumb,h_70/v1706284542/bdconf_vbatqo.webp" alt="Breaking Development" /></li> <li><img src="https://res.cloudinary.com/dfsssdwbu/image/upload/c_thumb,h_70/v1706284781/over-the-air_nc0cst.png" alt="Over the Air" /></li> <li><img src="https://res.cloudinary.com/dfsssdwbu/image/upload/c_thumb,h_70/v1706284781/edge-conf-5_iotzba.png" alt="Edge Conf 5" /></li> <li><img src="https://res.cloudinary.com/dfsssdwbu/image/upload/c_thumb,h_70/v1706284781/responsive-day-out_fdile2.png" alt="Responsive Day Out" /></li> <li><img src="https://res.cloudinary.com/dfsssdwbu/image/upload/c_thumb,h_70/v1706284918/logo_funka_oouzwu.svg" alt="Funka Accessibility Days" /></li> </ul> </div> <div class="col-span-12 md:col-span-2 md:border-r md:pr-4 md:text-right lg:col-span-2" > <a id="what-i-do"> <h2 class="text-center font-display text-2xl sm:text-left md:text-right md:text-base lg:text-2xl" > What I Do </h2> </a> </div> <div class="col-span-12 grid sm:grid-cols-2 md:col-span-9 lg:col-span-10 lg:grid-cols-3" > <div class="row-span-2 grid grid-rows-subgrid border-t-3 border-grey-900"> <h3 class="p-1 font-display text-xl font-bold italic text-pank sm:text-lg lg:text-xl" > web development and fundamentals </h3> <ul class="border-t bg-grey-100 p-2 pb-4"> <li class="text-lg" style="font-variant-caps: all-small-caps"> HTML </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> JavaScript </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> CSS </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> Open web standards </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> Web APIs </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> accessibility </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> performance </li> </ul> </div> <div class="row-span-2 grid grid-rows-subgrid border-t-3 border-grey-900"> <h3 class="p-1 font-display text-xl font-bold italic text-pank sm:text-lg lg:text-xl" > exquisite written and spoken communication </h3> <ul class="border-t bg-grey-100 p-2 pb-4"> <li class="text-lg" style="font-variant-caps: all-small-caps"> books </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> articles </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> conferences </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> tutorials </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> workshops </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> code reviews </li> </ul> </div> <div class="row-span-2 grid grid-rows-subgrid border-t-3 border-grey-900"> <h3 class="p-1 font-display text-xl font-bold italic text-pank sm:text-lg lg:text-xl" > empathic, values-based technical leadership </h3> <ul class="border-t bg-grey-100 p-2 pb-4"> <li class="text-lg" style="font-variant-caps: all-small-caps"> team leadership </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> project management </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> standards stewardship </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> process management </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> OSS contributor </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> mentorship </li> </ul> </div> <div class="row-span-2 grid grid-rows-subgrid border-t-3 border-grey-900"> <h3 class="p-1 font-display text-xl font-bold italic text-pank sm:text-lg lg:text-xl" > full-stack web application development </h3> <ul class="border-t bg-grey-100 p-2 pb-4"> <li class="text-lg" style="font-variant-caps: all-small-caps"> Frontend and Backend </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> Node.js </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> TypeScript </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> python </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> PHP </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> React, or </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> JS framework du jour </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> tailwindcss, or </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> CSS thingy du jour </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> API design </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> SQL </li> </ul> </div> <div class="row-span-2 grid grid-rows-subgrid border-t-3 border-grey-900"> <h3 class="p-1 font-display text-xl font-bold italic text-pank sm:text-lg lg:text-xl" > software development methodology </h3> <ul class="border-t bg-grey-100 p-2 pb-4"> <li class="text-lg" style="font-variant-caps: all-small-caps"> project architecture </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> product development </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> design patterns </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> version control / git </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> testing </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> teamwork </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> CI / CD </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> workflows </li> </ul> </div> <div class="row-span-2 grid grid-rows-subgrid border-t-3 border-grey-900"> <h3 class="p-1 font-display text-xl font-bold italic text-pank sm:text-lg lg:text-xl" > design thinking and technical humanity </h3> <ul class="border-t bg-grey-100 p-2 pb-4"> <li class="text-lg" style="font-variant-caps: all-small-caps"> design systems </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> responsive design </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> accessibility </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> WAI-ARIA </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> User Experience (UX) </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> User Interface (UI) </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> feature design </li> <li class="text-lg" style="font-variant-caps: all-small-caps"> always learning </li> </ul> </div> </div> <div class="col-span-12 md:col-span-2 md:border-r md:pr-4 md:text-right lg:col-span-2" > <a id="publications"> <h2 class="text-center font-display text-2xl sm:text-left md:text-right md:text-base lg:text-2xl" > Publications, Interviews and More </h2> </a> </div> <div class="col-span-12 grid gap-y-4 sm:grid-cols-2 sm:gap-x-4 sm:gap-y-8 md:col-span-9 lg:col-span-10 lg:grid-cols-3 lg:gap-y-12" > <div class="relative row-span-4 grid grid-rows-subgrid gap-2 border-t-3 border-t-grey-800" > <div class="flex h-full flex-col border-b border-b-grey-800"> <h2 class="flex-grow font-display text-lg leading-snug"> <a href="https://www.creativebloq.com/web-design/lyza-gardner-keeping-pace-web-technologies-61620829" class="transition-colors hover:text-pank hover:underline" > Lyza Gardner on keeping pace with web technologies </a> </h2> <div class="justify-self-end"> <div class="float-end pb-2 pr-1 font-smallcaps leading-none text-pank md:absolute md:bottom-full md:right-0 md:float-none" > interview </div> </div> </div> <div class="self-center border-b-grey-800 py-2"> <a href="https://www.creativebloq.com/web-design/lyza-gardner-keeping-pace-web-technologies-61620829"> <img src="https://res.cloudinary.com/dfsssdwbu/image/upload/v1706630597/lyza-net-interview_bsmpdr.webp" class="max-h-[150px] w-full object-contain" alt="Lyza Gardner on keeping pace with web technologies" /> </a> </div> <div> <div class="prose prose-stone flex-grow leading-normal"> <p>I talk about keeping up with what's going on in this in-depth featured interview in net magazine.</p> </div> </div> </div> <div class="relative row-span-4 grid grid-rows-subgrid gap-2 border-t-3 border-t-grey-800" > <div class="flex h-full flex-col border-b border-b-grey-800"> <h2 class="flex-grow font-display text-lg leading-snug"> <a href="https://www.smashingmagazine.com/2016/02/making-a-service-worker/" class="transition-colors hover:text-pank hover:underline" > Making a Service Worker: a Case Study </a> </h2> <div class="justify-self-end"> <div class="float-end pb-2 pr-1 font-smallcaps leading-none text-pank md:absolute md:bottom-full md:right-0 md:float-none" > article </div> </div> </div> <div class="self-center border-b-grey-800 py-2"> <a href="https://www.smashingmagazine.com/2016/02/making-a-service-worker/"> <img src="https://res.cloudinary.com/dfsssdwbu/image/upload/v1706727333/smashing-cat_j6rkz8.png" class="max-h-[150px] w-full object-contain" alt="Making a Service Worker: a Case Study" /> </a> </div> <div> <div class="prose prose-stone flex-grow leading-normal"> <p>In this article, I explain what a service worker is and how to put together your own by registering, installing, and activating it without any hassle.</p> </div> </div> </div> <div class="relative row-span-4 grid grid-rows-subgrid gap-2 border-t-3 border-t-grey-800" > <div class="flex h-full flex-col border-b border-b-grey-800"> <h2 class="flex-grow font-display text-lg leading-snug"> <a href="http://www.futureisnext.com/" class="transition-colors hover:text-pank hover:underline" > What Comes Next is the Future </a> </h2> <div class="justify-self-end"> <div class="float-end pb-2 pr-1 font-smallcaps leading-none text-pank md:absolute md:bottom-full md:right-0 md:float-none" > interview </div> </div> </div> <div class="self-center border-b-grey-800 py-2"> <a href="http://www.futureisnext.com/"> <img src="https://res.cloudinary.com/dfsssdwbu/image/upload/v1706630394/future-is-next_y90tvn.png" class="max-h-[150px] w-full object-contain" alt="What Comes Next is the Future" /> </a> </div> <div> <div class="prose prose-stone flex-grow leading-normal"> <p>I am interviewed in Matt Griffin's feature-length documentary about the genesis of the world-wide web (and so is Sir Tim Berners-Lee!).</p> </div> </div> </div> <div class="relative row-span-4 grid grid-rows-subgrid gap-2 border-t-3 border-t-grey-800" > <div class="flex h-full flex-col border-b border-b-grey-800"> <h2 class="flex-grow font-display text-lg leading-snug"> <a href="https://alistapart.com/column/never-heard-of-it/" class="transition-colors hover:text-pank hover:underline" > Column: Never Heard of It </a> </h2> <div class="justify-self-end"> <div class="float-end pb-2 pr-1 font-smallcaps leading-none text-pank md:absolute md:bottom-full md:right-0 md:float-none" > article </div> </div> </div> <div class="self-center border-b-grey-800 py-2"> <a href="https://alistapart.com/column/never-heard-of-it/"> <img src="https://res.cloudinary.com/dfsssdwbu/image/upload/v1706626207/ala-logo_zu6mfm.png" class="max-h-[150px] w-full object-contain" alt="Column: Never Heard of It" /> </a> </div> <div> <div class="prose prose-stone flex-grow leading-normal"> <p>This article required bravery to write, but was <em>A List Apart</em>'s most-read article, ever, when published. I was a regular columnist at ALA when I wrote this.</p> </div> </div> </div> <div class="relative row-span-4 grid grid-rows-subgrid gap-2 border-t-3 border-t-grey-800" > <div class="flex h-full flex-col border-b border-b-grey-800"> <h2 class="flex-grow font-display text-lg leading-snug"> <a href="https://www.oreilly.com/library/view/make-javascript-robotics/9781457186943" class="transition-colors hover:text-pank hover:underline" > How to Build Your Own Indoor Sundial </a> </h2> <div class="justify-self-end"> <div class="float-end pb-2 pr-1 font-smallcaps leading-none text-pank md:absolute md:bottom-full md:right-0 md:float-none" > chapter </div> </div> </div> <div class="self-center border-b-grey-800 py-2"> <a href="https://www.oreilly.com/library/view/make-javascript-robotics/9781457186943"> <img src="https://res.cloudinary.com/dfsssdwbu/image/upload/v1706630478/make-js-robots_ameacu.jpg" class="max-h-[150px] w-full object-contain" alt="How to Build Your Own Indoor Sundial" /> </a> </div> <div> <div class="prose prose-stone flex-grow leading-normal"> <p>In an absurd chapter for <em>Make: JavaScript Robots</em>, I demonstrate how to construct an indoor sundial using embedded electronics and the Johnny-Five open-source JavaScript IoT framework.</p> </div> </div> </div> <div class="relative row-span-4 grid grid-rows-subgrid gap-2 border-t-3 border-t-grey-800" > <div class="flex h-full flex-col border-b border-b-grey-800"> <h2 class="flex-grow font-display text-lg leading-snug"> <a href="https://www.hanselminutes.com/521/march-is-for-makers-arduinos-javascript-and-johnny-five-with-lyza-danger-gardner" class="transition-colors hover:text-pank hover:underline" > March is for Makers: Arduinos, JavaScript, and Johnny-Five with Lyza Danger Gardner </a> </h2> <div class="justify-self-end"> <div class="float-end pb-2 pr-1 font-smallcaps leading-none text-pank md:absolute md:bottom-full md:right-0 md:float-none" > podcast </div> </div> </div> <div class="self-center border-b-grey-800 py-2"> <a href="https://www.hanselminutes.com/521/march-is-for-makers-arduinos-javascript-and-johnny-five-with-lyza-danger-gardner"> <img src="https://res.cloudinary.com/dfsssdwbu/image/upload/v1706640892/hanselminutes_jjnklr.png" class="max-h-[150px] w-full object-contain" alt="March is for Makers: Arduinos, JavaScript, and Johnny-Five with Lyza Danger Gardner" /> </a> </div> <div> <div class="prose prose-stone flex-grow leading-normal"> <p>Scott chats with me about explorations into hardware using the Johnny-Five Framework: you can control Arduinos and more with JavaScript!</p> </div> </div> </div> </div> </div> <footer class="flex justify-center border-t-2 py-4 text-center font-smallcaps print:hidden" > <div class="flex gap-x-2 px-2"> <div> Built by Lyza with <a href="https://www.11ty.dev/" class="text-pank transition-colors hover:underline" >Eleventy</a > </div> </div> <div class="group flex items-center gap-x-2 border-l px-2"> <a href="https://github.com/lyzadanger/lyza-dot-11ty" class="transition-colors group-hover:text-pank group-hover:underline" >Source</a > <div class="mt-px h-4 w-4"> <a href="https://github.com/lyzadanger/lyza-dot-11ty" class="text-grey-700 transition-colors group-hover:text-pank" ><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" > <title>GitHub</title> <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" /> </svg> </a> </div> </div> </footer> </div> </body> </html>