The Future of Jamstack

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title>The Future of Jamstack</title> <meta content="Discover #TheFutureOfJamstack: A collective journey back to the core principles of simplicity, security, and scalability. Join the movement for a transparent, community-driven vision. Share stories, participate in polls, and shape the Jamstack Manifesto. Be part of the change!" name="description"> <meta content="Eleventy v2.0.1" name="generator"> <link data-cms-original-href="/images/favicons/apple-touch-icon.png" href="/images/favicons/apple-touch-icon.png?_cchid=d62a4b61aab67cb8e2f60286b35ba323" rel="apple-touch-icon" sizes="180x180"> <link data-cms-original-href="/images/favicons/jamstack.svg" href="/images/favicons/jamstack.svg?_cchid=03dc0e63e67d84aca6ebd4567003b79b" rel="icon"> <link href="https://fonts.googleapis.com" rel="preconnect"> <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"> <link href="https://fonts.googleapis.com/css2?family=Albert+Sans&display=swap" rel="stylesheet"> <style>:root { --font-family: 'Albert Sans', sans-serif; --background-color: #000; --text-color: #fff; --text-main-nav-color: #edff98 --text-color-link: #45beff; --text-color-link-active: #5f2b48; --text-color-link-visited: #17050F; --brand-color: #f77a34; --border-color: #facb0e; } * { box-sizing: border-box; } html, body { padding: 0; margin: 0 auto; color: var(--text-color); padding-top: 1px; overscroll-behavior: none; } html { overflow-y: scroll; background-image: url(/images/bg.webp?_cchid=a0e835ae8f13bb2256f7972b5640869c); background-size: cover; background-attachment: fixed; background-color: #1c3969; } body { background: rgba(0,1,13, .2); background: linear-gradient(90deg, rgba(0,1,13,0) 0%, rgba(7, 13, 63, .7) 40%, rgba(7, 13, 63, .7) 60%, rgba(0,1,13,0) 100%); min-height: 100vh; padding-bottom: 10px; } footer { margin-top: 50px; text-align: center; font-size: .7rem; } hr { width: 61px; border-style: dotted none none; border-width: 7px; border-color: rgba(255,255,255,.6); margin-top: 67px; } .wrapper { max-width: 960px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } .avatar { margin-right: 3px; margin-left: 0; width: 1em; height: 1em; object-fit: contain; vertical-align: middle; border-radius: 0.25em; } lite-youtube { width: 270px; height: 305px; border-radius: 10px; border: 2px solid #fff; transition: all .3s ease-in-out; } lite-youtube:hover { border-color: var(--border-color); } lite-youtube > .lty-playbtn { transform: none !important; left: auto !important; top: auto !important; right: 10px !important; bottom: 10px !important; width: 47px !important; height: 33px !important; } wc-carousel-lite { display: flex; mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50px, rgba(0, 0, 0, 1) calc(100% - 50px), rgba(0, 0, 0, 0) 100%); } wc-carousel-lite lite-youtube { margin: 0 .25em; } .buttons { text-align: center; padding-top: .5em; } .buttons button { background: none; color: #fff; border: 1px solid #fff; border-radius: 200px; cursor: pointer; transition: all .3s ease; width: 2.7rem; height: 2.7rem; font-size: 1.2rem; } .buttons button:hover { background: #fff; color: #000; } .buttons .prev { margin-right: .2em; } .buttons .next { margin-left: .2em; } html, body { font-family: var(--font-family); font-size: 130%; } p { line-height: 150%; margin-top: 1.5rem; margin-bottom: 0; } ul, ol { margin-top: 1.5rem; margin-bottom: 1.5rem; } ul li, ol li { line-height: 1.5rem; } ul ul, ol ul, ul ol, ol ol { margin-top: 0; margin-bottom: 0; } blockquote { line-height: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem; } /* Headings */ h1, h2, h3, h4, h5, h6 { /* Change heading typefaces here */ font-family: 'Helvetica', 'Arial', sans-serif; margin-top: 1.5rem; margin-bottom: 0; line-height: 1.5rem; } em { color: #fffd7c; font-style: normal; } h1 { font-size: 3rem; line-height: 3rem; margin-top: 3rem; text-transform: uppercase; text-align: center; } h2 { font-size: 2rem; line-height: 2rem; margin-top: 3rem; text-align: center; } h3 { font-size: 1.414rem; margin-bottom: 1rem; text-align: center; } h4 { font-size: 0.707rem; } h5 { font-size: 0.4713333333333333rem; } h6 { font-size: 0.3535rem; } a { color: #FFB8DB; transition: all .3s ease; } a:hover { color: #fff; } .smaller-text { font-size: .8em; } input[type='submit'] { background: #facb0e; color: #000; border: 1px solid yellow; padding: 10px 20px; border-radius: 5px; cursor: pointer; text-transform: uppercase; font-weight: bold; font-size: .9rem; margin-top: 1rem; transition: all .3s; } input[type='submit']:hover { background: #cfa80b; } input[type='email'] { font-size: 1.5rem; padding: 10px; width: 100%; display: block; border-radius: 5px; background: rgba(0,0,0,.4); color: #fff; text-align: center; transition: all .3s ease-in-out; outline: 1px solid rgba(255,255,255,.5); border: 0; } input[type='email']:focus { background: rgba(0,0,0,.6); outline: 1px solid #facb0e; } input[type='email']::placeholder { color: #fff; } form { text-align: center; } .resources { list-style: none; padding: 0; margin: 2rem 0 0 0; display: flex; gap: 10px; container-type: inline-size; flex-wrap: wrap; justify-content: center; } .resources li { text-align: center; margin-bottom: 20px; width: 287px; } .resources a { display: inline-block; font-size: .8rem; text-decoration: none; color: #fff; text-align: left; width: 100%; line-height: 1rem;; } .resources a:hover .title { text-decoration: underline; } .resources a .preview { overflow: hidden; border-radius: 10px; border: 4px solid gray; line-height: 0; margin-bottom: 10px; } .resources a:hover .preview:hover { border-color: #facb0e; } .resources a .preview img { opacity: .6; transition: all .3s ease-in-out; width: 100%; height: auto; object-fit: cover; height: 161px; width: 287px; object-position: center; background: black; } .resources a:hover .preview img { opacity: 1; } lite-youtube { background-color: #000; position: relative; display: block; contain: content; background-position: center center; background-size: cover; cursor: pointer; max-width: 720px; } /* gradient */ lite-youtube::before { content: ''; display: block; position: absolute; top: 0; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==); background-position: top; background-repeat: repeat-x; height: 60px; padding-bottom: 50px; width: 100%; transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); } /* responsive iframe with a 16:9 aspect ratio thanks https://css-tricks.com/responsive-iframes/ */ lite-youtube::after { content: ""; display: block; padding-bottom: calc(100% / (16 / 9)); } lite-youtube > iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0; } /* play button */ lite-youtube > .lty-playbtn { display: block; width: 68px; height: 48px; position: absolute; cursor: pointer; transform: translate3d(-50%, -50%, 0); top: 50%; left: 50%; z-index: 1; background-color: transparent; /* YT's actual play button svg */ background-image: url(data:image/svg+xml;utf8,<svg xmlns=http://www.w3.org/2000/svg viewBox=0 0 68 48><path d=M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z fill=red/><path d=M45 24 27 14v20 fill=white/></svg>); filter: grayscale(100%); transition: filter .1s cubic-bezier(0, 0, 0.2, 1); border: none; } lite-youtube:hover > .lty-playbtn, lite-youtube .lty-playbtn:focus { filter: none; } /* Post-click styles */ lite-youtube.lyt-activated { cursor: unset; } lite-youtube.lyt-activated::before, lite-youtube.lyt-activated > .lty-playbtn { opacity: 0; pointer-events: none; } .lyt-visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }</style> </head> <body> <div class="wrapper"> <h1> <div style="max-width:400px; margin: 0 auto"> <svg fill="none" viewBox="0 0 602 173" xmlns="http://www.w3.org/2000/svg"> <g transform="matrix(1, 0, 0, 1, -0.09486100077627668, 20.377948760986328)"> <title>Layer 1</title> <path d="m196.8,89.4868l0,-35.76l-15.12,0l0,39.52c0,3.28 -0.24,7.5202 -4.56,7.5202c-3.84,0 -4.4,-3.9202 -4.56,-6.8802l-16.08,0c0,8.6402 3.52,15.6802 11.92,18.7202c2.48,0.96 5.28,1.44 8,1.44c6.32,0 12.72,-2.8 16.72,-7.76c3.68,-4.64 3.68,-11.1202 3.68,-16.8002zm55.328,23.4402l0,-44.4002l-13.28,0l0,4.72l-0.16,0c-2.64,-4.4 -8.08,-6.24 -12.96,-6.24c-13.36,0 -22.32,10.72 -22.32,23.68c0,13.2002 8.64,23.7602 22.32,23.7602c4.8,0 10.56,-1.76 12.96,-6.32l0.16,0l0,4.8l13.28,0zm-13.28,-22.2402c0,6.4 -4.64,11.3602 -11.12,11.3602c-6.24,0 -11.04,-5.0402 -11.04,-11.2002c0,-6.32 4.48,-11.44 10.96,-11.44c6.48,0 11.2,4.8 11.2,11.28zm91.128,22.2402l0,-24.2402c0,-6.8 0.24,-12.08 -4.8,-17.2c-3.12,-3.2 -7.28,-4.48 -11.68,-4.48c-6,0 -10.88,2.88 -14.08,7.92c-2.72,-5.04 -7.04,-7.92 -12.8,-7.92c-5.04,0 -9.68,1.68 -12.24,6.24l-0.16,0l0,-4.72l-12.4,0l0,44.4002l13.28,0l0,-23.6002c0,-5.2 1.36,-9.84 7.52,-9.84c5.6,0 6.64,4.72 6.64,9.28l0,24.1602l13.28,0l0,-24.2402c0,-5.04 1.44,-9.2 7.36,-9.2c6.16,0 6.8,4.96 6.8,9.84l0,23.6002l13.28,0zm42.62,-13.6002c0,-15.68 -22.32,-11.76 -22.32,-18.72c0,-2 2,-2.96 3.76,-2.96c2.32,0 4.08,0.88 4.16,3.36l13.04,0c-0.88,-9.44 -8.16,-14 -17.04,-14c-8.56,0 -17.2,5.36 -17.2,14.64c0,6.24 5.28,9.68 10.56,11.6c1.92,0.72 3.84,1.36 5.76,2c2.4,0.96 6,1.92 6,5.1202c0,2.32 -2.64,3.44 -4.64,3.44c-2.64,0 -4.64,-1.36 -5.04,-4.0802l-13.2,0c1.04,9.7602 8.8,14.7202 18.08,14.7202c9.04,0 18.08,-5.12 18.08,-15.1202zm28.962,-20.72l0,-10.08l-6.4,0l0,-14.8l-13.28,0l0,14.8l-6.56,0l0,10.08l6.56,0l0,34.3202l13.28,0l0,-34.3202l6.4,0zm51.195,34.3202l0,-44.4002l-13.28,0l0,4.72l-0.16,0c-2.64,-4.4 -8.08,-6.24 -12.96,-6.24c-13.36,0 -22.32,10.72 -22.32,23.68c0,13.2002 8.64,23.7602 22.32,23.7602c4.8,0 10.56,-1.76 12.96,-6.32l0.16,0l0,4.8l13.28,0zm-13.28,-22.2402c0,6.4 -4.64,11.3602 -11.12,11.3602c-6.24,0 -11.04,-5.0402 -11.04,-11.2002c0,-6.32 4.48,-11.44 10.96,-11.44c6.48,0 11.2,4.8 11.2,11.28zm67.848,5.36l-13.52,0c-2,3.84 -5.2,5.9202 -9.6,5.9202c-6.48,0 -10.56,-5.0402 -10.56,-11.2802c0,-6 3.84,-11.28 10.24,-11.28c4.56,0 8,2.08 9.92,6.24l13.44,0c-2.32,-11.28 -12.16,-18.64 -23.52,-18.64c-13.2,0 -23.44,10.48 -23.44,23.6c0,13.2802 10.48,23.7602 23.76,23.7602c11.2,0 20.72,-7.44 23.28,-18.3202zm48.135,-27.52l-15.76,0l-12.32,16.08l-0.16,0l0,-30.88l-13.28,0l0,59.2002l13.28,0l0,-21.3602l0.16,0l12.56,21.3602l15.04,0l-16.24,-24.8802l16.72,-19.52z" fill="white" id="svg_2"></path> <path d="m81.7,38.23c-26.8019,0 -48.4701,21.6682 -48.4701,48.4701c0,26.8019 21.6682,48.4699 48.4701,48.4699c26.802,0 48.47,-21.668 48.47,-48.4699l0,-48.4701l-48.47,0z" fill="#F0047F" id="svg_3"></path> <path d="m80.1333,88.2002l0,33.9848c-18.3939,-0.778 -33.2064,-15.591 -33.9846,-33.9848l33.9846,0z" fill="white" id="svg_4" stroke="#F0047F"></path> <path d="m83.2001,88.2666l33.9849,0c-0.779,18.3934 -15.591,33.2064 -33.9849,33.9844l0,-33.9844z" fill="white" id="svg_5" stroke="#F0047F"></path> <path d="m83.2001,85.1333l0,-34.0024l34.0029,0l0,34.0024l-34.0029,0z" fill="white" id="svg_6" stroke="#F0047F"></path> </g> <path d="M 183.32 54.915 L 183.32 43.228 L 179.882 43.228 L 179.882 39.726 L 191.645 39.726 L 191.645 43.228 L 188.132 43.228 L 188.132 54.915 Z" style="fill: rgb(255, 255, 255)"></path> <path d="M 193.435 38.415 L 198.076 38.415 L 198.076 44.914 Q 198.377 44.495 198.849 44.151 Q 199.322 43.808 199.891 43.555 Q 200.461 43.303 201.094 43.168 Q 201.728 43.034 202.362 43.034 Q 203.146 43.034 203.839 43.287 Q 204.532 43.539 205.047 44.098 Q 205.563 44.656 205.858 45.532 Q 206.154 46.407 206.154 47.643 L 206.154 54.915 L 201.513 54.915 L 201.513 48.792 Q 201.513 47.986 201.379 47.449 Q 201.245 46.912 201.03 46.584 Q 200.815 46.257 200.541 46.123 Q 200.267 45.988 199.988 45.988 Q 199.666 45.988 199.349 46.112 Q 199.032 46.235 198.769 46.461 Q 198.505 46.686 198.323 46.998 Q 198.14 47.31 198.076 47.686 L 198.076 54.915 L 193.435 54.915 Z" style="fill: rgb(255, 255, 255)"></path> <path d="M 220.13 54.453 Q 219.121 54.786 217.95 55.006 Q 216.779 55.227 215.511 55.227 Q 214.126 55.227 212.869 54.861 Q 211.612 54.496 210.656 53.723 Q 209.7 52.949 209.136 51.762 Q 208.572 50.575 208.572 48.932 Q 208.572 47.997 208.862 47.197 Q 209.152 46.396 209.651 45.741 Q 210.151 45.086 210.822 44.581 Q 211.494 44.076 212.262 43.732 Q 213.03 43.389 213.846 43.211 Q 214.663 43.034 215.447 43.034 Q 216.682 43.034 217.628 43.308 Q 218.573 43.582 219.201 44.044 Q 219.83 44.506 220.152 45.118 Q 220.474 45.73 220.474 46.418 Q 220.474 47.256 220.19 47.847 Q 219.905 48.437 219.427 48.84 Q 218.949 49.243 218.32 49.474 Q 217.692 49.705 216.994 49.829 Q 216.296 49.952 215.57 49.984 Q 214.845 50.017 214.19 50.017 Q 213.964 50.017 213.755 50.011 Q 213.546 50.006 213.341 50.006 Q 213.427 50.618 213.68 51.037 Q 213.932 51.456 214.314 51.719 Q 214.695 51.982 215.194 52.095 Q 215.694 52.208 216.263 52.208 Q 216.693 52.208 217.182 52.144 Q 217.671 52.079 218.17 51.966 Q 218.67 51.853 219.169 51.708 Q 219.669 51.563 220.13 51.402 Z M 213.245 48.352 Q 213.503 48.341 213.905 48.319 Q 214.308 48.298 214.759 48.244 Q 215.211 48.19 215.662 48.094 Q 216.113 47.997 216.478 47.847 Q 216.843 47.696 217.069 47.471 Q 217.295 47.245 217.295 46.923 Q 217.295 46.375 216.859 46.047 Q 216.424 45.72 215.651 45.72 Q 215.296 45.72 214.888 45.822 Q 214.48 45.924 214.126 46.214 Q 213.771 46.504 213.524 47.019 Q 213.277 47.535 213.245 48.352 Z" style="fill: rgb(255, 255, 255)"></path> <path d="M 236.192 54.915 L 231.551 54.915 L 231.551 46.031 L 229.704 46.031 L 229.704 43.324 L 231.53 43.324 Q 231.53 42.003 231.884 41.02 Q 232.239 40.037 232.894 39.382 Q 233.549 38.727 234.479 38.399 Q 235.408 38.071 236.568 38.071 Q 237.513 38.071 238.319 38.275 Q 239.125 38.479 239.801 38.759 L 239.458 41.519 Q 238.835 41.369 238.421 41.267 Q 238.007 41.165 237.621 41.165 Q 237.127 41.165 236.842 41.348 Q 236.557 41.53 236.412 41.831 Q 236.267 42.132 236.23 42.524 Q 236.192 42.916 236.192 43.324 L 239.436 43.324 Q 239.286 44.033 239.2 44.688 Q 239.114 45.344 239.114 46.031 L 236.192 46.031 Z" style="fill: rgb(255, 255, 255)"></path> <path d="M 254.223 54.915 L 249.593 54.915 L 249.69 54.174 Q 249.733 53.83 249.765 53.4 Q 249.797 52.971 249.819 52.509 Q 249.497 53.143 249.008 53.642 Q 248.519 54.142 247.928 54.496 Q 247.337 54.851 246.671 55.039 Q 246.005 55.227 245.329 55.227 Q 244.491 55.227 243.739 54.953 Q 242.987 54.679 242.412 54.082 Q 241.837 53.486 241.499 52.546 Q 241.161 51.606 241.161 50.274 L 241.161 43.324 L 245.801 43.324 L 245.801 49.845 Q 245.801 50.511 245.925 50.962 Q 246.048 51.413 246.263 51.692 Q 246.478 51.972 246.757 52.095 Q 247.037 52.219 247.348 52.219 Q 247.713 52.219 248.084 52.068 Q 248.455 51.918 248.761 51.66 Q 249.067 51.402 249.287 51.053 Q 249.507 50.704 249.583 50.307 L 249.583 43.324 L 254.223 43.324 Z" style="fill: rgb(255, 255, 255)"></path> <path d="M 263.344 55.227 Q 262.345 55.227 261.432 54.985 Q 260.519 54.743 259.826 54.168 Q 259.133 53.594 258.72 52.643 Q 258.306 51.692 258.306 50.274 L 258.306 45.988 L 256.169 45.988 L 256.169 45.29 L 261.228 39.79 L 262.947 39.79 L 262.947 43.324 L 266.384 43.324 Q 266.255 43.969 266.153 44.624 Q 266.051 45.279 266.041 45.988 L 262.947 45.988 L 262.947 50.231 Q 262.947 50.618 263.006 50.978 Q 263.065 51.338 263.248 51.612 Q 263.43 51.886 263.774 52.052 Q 264.118 52.219 264.687 52.219 Q 265.052 52.219 265.493 52.149 Q 265.933 52.079 266.492 51.886 L 266.75 54.668 Q 266.073 54.915 265.197 55.071 Q 264.322 55.227 263.344 55.227 Z" style="fill: rgb(255, 255, 255)"></path> <path d="M 281.833 54.915 L 277.203 54.915 L 277.299 54.174 Q 277.342 53.83 277.375 53.4 Q 277.407 52.971 277.428 52.509 Q 277.106 53.143 276.617 53.642 Q 276.129 54.142 275.538 54.496 Q 274.947 54.851 274.281 55.039 Q 273.615 55.227 272.938 55.227 Q 272.1 55.227 271.348 54.953 Q 270.596 54.679 270.022 54.082 Q 269.447 53.486 269.108 52.546 Q 268.77 51.606 268.77 50.274 L 268.77 43.324 L 273.411 43.324 L 273.411 49.845 Q 273.411 50.511 273.534 50.962 Q 273.658 51.413 273.873 51.692 Q 274.087 51.972 274.367 52.095 Q 274.646 52.219 274.958 52.219 Q 275.323 52.219 275.693 52.068 Q 276.064 51.918 276.37 51.66 Q 276.676 51.402 276.897 51.053 Q 277.117 50.704 277.192 50.307 L 277.192 43.324 L 281.833 43.324 Z" style="fill: rgb(255, 255, 255)"></path> <path d="M 285.185 43.324 L 289.6 43.324 Q 289.579 43.603 289.568 43.942 Q 289.557 44.28 289.557 44.651 Q 289.557 45.021 289.557 45.397 Q 289.557 45.773 289.557 46.117 Q 289.772 45.591 290.116 45.038 Q 290.46 44.484 290.927 44.044 Q 291.394 43.603 291.99 43.319 Q 292.587 43.034 293.328 43.034 Q 293.467 43.034 293.634 43.05 Q 293.8 43.066 293.962 43.099 Q 294.123 43.131 294.268 43.179 Q 294.413 43.228 294.509 43.292 L 294.133 47.718 Q 293.65 47.535 293.113 47.444 Q 292.576 47.353 292.178 47.353 Q 291.63 47.353 291.217 47.487 Q 290.803 47.621 290.513 47.836 Q 290.223 48.051 290.057 48.309 Q 289.89 48.566 289.826 48.813 L 289.826 54.915 L 285.185 54.915 Z" style="fill: rgb(255, 255, 255)"></path> <path d="M 307.209 54.453 Q 306.199 54.786 305.028 55.006 Q 303.857 55.227 302.589 55.227 Q 301.204 55.227 299.947 54.861 Q 298.69 54.496 297.734 53.723 Q 296.778 52.949 296.214 51.762 Q 295.65 50.575 295.65 48.932 Q 295.65 47.997 295.94 47.197 Q 296.23 46.396 296.73 45.741 Q 297.229 45.086 297.9 44.581 Q 298.572 44.076 299.34 43.732 Q 300.108 43.389 300.924 43.211 Q 301.741 43.034 302.525 43.034 Q 303.76 43.034 304.706 43.308 Q 305.651 43.582 306.279 44.044 Q 306.908 44.506 307.23 45.118 Q 307.552 45.73 307.552 46.418 Q 307.552 47.256 307.268 47.847 Q 306.983 48.437 306.505 48.84 Q 306.027 49.243 305.399 49.474 Q 304.77 49.705 304.072 49.829 Q 303.374 49.952 302.649 49.984 Q 301.923 50.017 301.268 50.017 Q 301.043 50.017 300.833 50.011 Q 300.624 50.006 300.42 50.006 Q 300.505 50.618 300.758 51.037 Q 301.01 51.456 301.392 51.719 Q 301.773 51.982 302.273 52.095 Q 302.772 52.208 303.341 52.208 Q 303.771 52.208 304.26 52.144 Q 304.749 52.079 305.248 51.966 Q 305.748 51.853 306.247 51.708 Q 306.747 51.563 307.209 51.402 Z M 300.323 48.352 Q 300.581 48.341 300.983 48.319 Q 301.386 48.298 301.837 48.244 Q 302.289 48.19 302.74 48.094 Q 303.191 47.997 303.556 47.847 Q 303.921 47.696 304.147 47.471 Q 304.373 47.245 304.373 46.923 Q 304.373 46.375 303.938 46.047 Q 303.503 45.72 302.729 45.72 Q 302.375 45.72 301.966 45.822 Q 301.558 45.924 301.204 46.214 Q 300.849 46.504 300.602 47.019 Q 300.355 47.535 300.323 48.352 Z" style="fill: rgb(255, 255, 255)"></path> <path d="M 323.939 55.227 Q 322.671 55.227 321.683 54.99 Q 320.695 54.754 319.954 54.335 Q 319.212 53.916 318.691 53.341 Q 318.171 52.767 317.848 52.09 Q 317.526 51.413 317.381 50.661 Q 317.236 49.909 317.236 49.136 Q 317.236 48.373 317.381 47.626 Q 317.526 46.88 317.848 46.198 Q 318.171 45.516 318.686 44.941 Q 319.202 44.366 319.948 43.942 Q 320.695 43.518 321.683 43.276 Q 322.671 43.034 323.939 43.034 Q 325.207 43.034 326.195 43.276 Q 327.183 43.518 327.93 43.942 Q 328.676 44.366 329.192 44.941 Q 329.708 45.516 330.03 46.198 Q 330.352 46.88 330.497 47.626 Q 330.642 48.373 330.642 49.136 Q 330.642 49.909 330.497 50.661 Q 330.352 51.413 330.03 52.09 Q 329.708 52.767 329.187 53.341 Q 328.666 53.916 327.924 54.335 Q 327.183 54.754 326.195 54.99 Q 325.207 55.227 323.939 55.227 Z M 321.877 49.136 Q 321.877 49.716 321.984 50.269 Q 322.091 50.822 322.333 51.257 Q 322.575 51.692 322.967 51.956 Q 323.359 52.219 323.939 52.219 Q 324.519 52.219 324.911 51.956 Q 325.303 51.692 325.545 51.257 Q 325.787 50.822 325.894 50.269 Q 326.002 49.716 326.002 49.136 Q 326.002 48.556 325.894 48.002 Q 325.787 47.449 325.545 47.014 Q 325.303 46.579 324.911 46.311 Q 324.519 46.042 323.939 46.042 Q 323.359 46.042 322.967 46.311 Q 322.575 46.579 322.333 47.014 Q 322.091 47.449 321.984 48.002 Q 321.877 48.556 321.877 49.136 Z" style="fill: rgb(255, 255, 255)"></path> <path d="M 338.387 54.915 L 333.747 54.915 L 333.747 46.031 L 331.899 46.031 L 331.899 43.324 L 333.725 43.324 Q 333.725 42.003 334.08 41.02 Q 334.434 40.037 335.089 39.382 Q 335.745 38.727 336.674 38.399 Q 337.603 38.071 338.763 38.071 Q 339.709 38.071 340.514 38.275 Q 341.32 38.479 341.997 38.759 L 341.653 41.519 Q 341.03 41.369 340.616 41.267 Q 340.203 41.165 339.816 41.165 Q 339.322 41.165 339.037 41.348 Q 338.753 41.53 338.608 41.831 Q 338.462 42.132 338.425 42.524 Q 338.387 42.916 338.387 43.324 L 341.631 43.324 Q 341.481 44.033 341.395 44.688 Q 341.309 45.344 341.309 46.031 L 338.387 46.031 Z" style="fill: rgb(255, 255, 255)"></path> </svg> </div> </h1> </div> <main><div class="wrapper"> <p style=" background: rgba(0,0,0,.5); border: 1px solid yellow; font-size: .8em; border-radius: 10px; padding: 1em; "> We've finished the last panel and interviews for the #TheFutureOfJamstack project. Currently, we're working on combining all of this content into a cohesive pitch for the community to review. </p> <p> Jamstack redefined building on the web. At a time when the majority of the industry built large, monolithic websites, Jamstack was a voice of simplicity, security, scalability, and performance. </p> <p> The cycle is repeating and the principles of Jamstack are relevant now more than ever. </p> <p> What if we could get back to the core of Jamstack, cherish that, and have the community steer its future course? </p> <p> <em>#TheFutureOfJamstack</em> is a shared vision we’re writing, transparently and collectively. Join the movement to hear stories of the people who live and breathe Jamstack, have your say in community polls and feedback sessions, and a Jamstack definition that gets back to the roots. All in the open. </p> <hr> </div> <div class="wrapper"> <h2>What are we discussing?</h2> </div> <div class="wrapper"> <h3>What is <em>Jamstack</em>?</h3> </div> <wc-carousel-lite class="carousel-1" init-item="12" no-touch="" transition-duration="1000"> <lite-youtube class="item" controls="0" fs="0" playlabel="Netlify" short="" videoid="EcbdkB9InGk"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Jamstack cool" short="" videoid="Gxa1jiSQJG4"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Jamstack is" short="" videoid="hvPSuhzBWd4"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Portable" short="" videoid="nicqop_iKYE"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="API Contract" short="" videoid="sx0W8SSMbC8"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Modern stack" short="" videoid="UcQHIpu7b2I"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Prerendering first" short="" videoid="MjwVKvltq5o"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Joy of creating on the web" short="" videoid="d2ijRKtV6ek"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Sliding scale" short="" videoid="AamxpxVFGNc"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Simplicity" short="" videoid="Syo2xou0M48"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Prerendering" short="" videoid="XZKokhtY9WA"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Don't do work when you don't need to do work" short="" videoid="3ZD8A_RESfg"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Mobile app" short="" videoid="i4tDJfKmy4w"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="HTML as a base" short="" videoid="sf1Ip5mjZnE"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Personal web" short="" videoid="b39Uu4Ibfo4"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Pre build sites" short="" videoid="1Bd8bS0EpWQ"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="What I wish I would have been able to use at IBM" short="" videoid="4em9BAQ_86Y"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Static First" short="" videoid="vMXdD_Z7EWM"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Anything not SSR" short="" videoid="yAQxTTqaoaM"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="I think of Jamstack as" short="" videoid="fJf9KOM45DY"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="MAJ" short="" videoid="p74nw5-iD5o"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Simplicity" short="" videoid="cBAEnJ8kRfo"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="JAM" short="" videoid="-Cmph_5VCd0"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Jamstack marketing label" short="" videoid="707FGv8sqmw"></lite-youtube> </wc-carousel-lite> <div class="buttons"> <button class="prev" onclick="document.querySelector('.carousel-1').prev()" rel="”prev”"><</button> <button class="next" onclick="document.querySelector('.carousel-1').next()" rel="next">></button> </div> <div class="wrapper"> <h3>Why is <em>Jamstack</em> important?</h3> </div> <wc-carousel-lite class="carousel-2" init-item="20.5" no-touch="" transition-duration="1000"> <lite-youtube class="item" controls="0" fs="0" playlabel="Plugins" short="" videoid="5yVphZiU5VA"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="I haven't stoped liking it" short="" videoid="K5JvtpZHvaA"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Community" short="" videoid="w0J2G5k3oJU"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Car running" short="" videoid="c1yHOFa6GEo"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="SPAs are great" short="" videoid="nT-RtS5P-Yc"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Cool and fun stuff" short="" videoid="IZ75KiGIDQI"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Serverless" short="" videoid="xFbkJCq3rEY"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Static site virtue" short="" videoid="ArIPDDgiFoI"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Losing the term" short="" videoid="A35TTyLeUWI"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Vibe" short="" videoid="zpNX5zLISQM"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Try a content model" short="" videoid="2uRtuTtZ9qA"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Static site dull" short="" videoid="xsumCxd5CFk"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Human rights issue" short="" videoid="TUMdg_OjUWk"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="First iteration of our App" short="" videoid="H_BvLqEbQXc"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Community" short="" videoid="GY9BPd_8NGM"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Quite Dynamic" short="" videoid="4omi0suT8F4"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Flat files" short="" videoid="JDHX-OKCJqY"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Environmental cost" short="" videoid="JazTOHRcCe8"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Local complexity" short="" videoid="pBMGvTl2cME"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Freedom" short="" videoid="U8OY6NljoYU"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Small jump" short="" videoid="fHDx05S-Cac"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Astro" short="" videoid="xrKeFK3KERc"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Magically" short="" videoid="NWEmPSgXaY8"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="No need to rewrite your website" short="" videoid="umN9nWjbh-U"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Static first" short="" videoid="VIBIix8JPDI"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="As lightweight as possible" short="" videoid="ilxNaV7BcNo"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Not about Netlify" short="" videoid="EoavbcicUJM"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Atomic deploys" short="" videoid="vINW-wrIYWM"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Portablity" short="" videoid="qTlhWqB_oTg"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="One approach to getting there" short="" videoid="DC5wT5k_7a8"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Static First" short="" videoid="ktAtpPrwZ_w"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Old school Jamstack" short="" videoid="Npb8WcblzgM"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Jamstack is good for experts and beginners" short="" videoid="PkNnXcJGiBw"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="International community" short="" videoid="T-Z_3A8EKnI"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Simpler" short="" videoid="Gn8SEJjRbK0"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Performance" short="" videoid="LP8lFE-lGIA"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Static first" short="" videoid="o4zCT8eD16Q"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Dark age of social media" short="" videoid="Ny1mTJrnYX0"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Hugo" short="" videoid="t4fI7RF6OXQ"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Creative" short="" videoid="YIpIT9yZfoc"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Better SEO" short="" videoid="0ew2Xdk0qa4"></lite-youtube> </wc-carousel-lite> <div class="buttons"> <button class="prev" onclick="document.querySelector('.carousel-2').prev()" rel="”prev”"><</button> <button class="next" onclick="document.querySelector('.carousel-2').next()" rel="next">></button> </div> <div class="wrapper"> <h3>How can <em>Jamstack</em> remain relevant?</h3> </div> <wc-carousel-lite class="carousel-3" init-item="14.5" no-touch="" transition-duration="1000"> <lite-youtube class="item" controls="0" fs="0" playlabel="Live on the periphery" short="" videoid="FspNRrt51vg"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Reinventing" short="" videoid="j-hOJjnjZ_M"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Not a stack" short="" videoid="tOypO6X-YGg"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Microservices" short="" videoid="VpNJyIh_5jQ"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Survives and thrives" short="" videoid="8IOCwtsd5Sg"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Organizer meetup" short="" videoid="kAV1Ra7J8wo"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Tighter definition" short="" videoid="bZU57zNJhZ4"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Future of the community" short="" videoid="jXNYKvIDPmU"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Spark" short="" videoid="CAws7K1IJ_0"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Desired outcome" short="" videoid="sG8mH7ki3zY"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Is this Jamstack" short="" videoid="OqrH9-2uHgY"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Definition" short="" videoid="_fGcldpKzGk"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Usecase" short="" videoid="39G8HdxpUDo"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Losing the value" short="" videoid="ouG4YG5TXF4"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Drawing hard lines on Jamstack" short="" videoid="pbK7_8n2gzI"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Start static" short="" videoid="tf2erRqdwqc"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="PHP" short="" videoid="qH7aTATZ6Cs"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Community" short="" videoid="_DeFYmPXM5E"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Community leadership" short="" videoid="V_iOcFcWdrI"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Least powerful" short="" videoid="PtPHeivBYw0"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Opt in" short="" videoid="sk48Cz8MMvI"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Simpler" short="" videoid="nicqop_iKYE"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Framing" short="" videoid="JGxxxvRjZlU"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Amazon.com" short="" videoid="XfKDJBZA4Iw"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Before the iphone" short="" videoid="ziOaPPH3lyE"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Conflate" short="" videoid="m10Dr8g3uw0"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Shrinking it down" short="" videoid="bLhQ86K_ZJI"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="You don't always need a framework" short="" videoid="_H8mWpIUhyA"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Community group" short="" videoid="LV5FNZQEauc"></lite-youtube> </wc-carousel-lite> <div class="buttons"> <button class="prev" onclick="document.querySelector('.carousel-3').prev()" rel="”prev”"><</button> <button class="next" onclick="document.querySelector('.carousel-3').next()" rel="next">></button> </div> <div class="wrapper"> <h3>What did <em>Jamstack</em> get wrong?</h3> </div> <wc-carousel-lite class="carousel-4" init-item="12.5" no-touch="" transition-duration="1000"> <lite-youtube class="item" controls="0" fs="0" playlabel="Gatsby" short="" videoid="6fXSuFk3dQo"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Broader" short="" videoid="y2Omj07t7GM"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Core web" short="" videoid="UrL4GrY1rPg"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Lost its meaning" short="" videoid="BI47TO4vGoM"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="JAM" short="" videoid="Yql7_oURFm8"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Enterprise" short="" videoid="C4GKq1_WHqk"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Temporary convergence" short="" videoid="Yw6b5pQxxJU"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Moving on" short="" videoid="modV9mOd9F4"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Jamstack money" short="" videoid="JSfThj_i8Xg"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Bundled" short="" videoid="N_2bT5qvDog"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Servers pushed hard" short="" videoid="oj_qBB4nztU"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="NextJs evolution" short="" videoid="qwz-dkZuubo"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Chose only the tools you need" short="" videoid="ZjN9KQzGp6M"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Confusion" short="" videoid="sqNJ-Frh-s8"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Broadening the definition of Jamstack" short="" videoid="y_4j2_xZ0mE"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Jamstack brand" short="" videoid="l4oD27z60wA"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Too many frameworks" short="" videoid="uW7ThUKjiuw"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Don't force it" short="" videoid="KJq8BPNMqSY"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Different definitions" short="" videoid="czOErAVolUA"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Decoupled" short="" videoid="nfhYS2T0c9I"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Over time getting to dynamic" short="" videoid="KBayJn6luJY"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Jamstack templates" short="" videoid="GvDyWBrBhcA"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Do not need RSC" short="" videoid="gzoCfoUy9rM"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Frameworks" short="" videoid="3X5CiRIJbTk"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Big frameworks" short="" videoid="CIAD2mYxpVM"></lite-youtube> </wc-carousel-lite> <div class="buttons"> <button class="prev" onclick="document.querySelector('.carousel-4').prev()" rel="”prev”"><</button> <button class="next" onclick="document.querySelector('.carousel-4').next()" rel="next">></button> </div> <div class="wrapper"> <h3>What should we call <em>Jamstack</em> moving forward?</h3> </div> <wc-carousel-lite class="carousel-5" init-item="7.5" no-touch="" transition-duration="1000"> <lite-youtube class="item" controls="0" fs="0" playlabel="Jamstack dead" short="" videoid="4yO1kKO_JLM"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Picking a new term" short="" videoid="KLl9KhhtuKk"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="It needs a name" short="" videoid="0FuiuUhUwLw"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Good name" short="" videoid="hhhOB-VJRfM"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Jamstack fun name" short="" videoid="Kk4iJlqRGsQ"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Build time rendering" short="" videoid="jGJ2sdRLr84"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Yay Jamstack" short="" videoid="Lj2cssLwB54"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Change it again" short="" videoid="USw57ifTZ3I"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Fan of Jamstack" short="" videoid="OKY02Dp9kqM"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Nextjs" short="" videoid="Mxxw5Nl-NS8"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Keep Jamstack" short="" videoid="7R0KINQ6Uqs"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Jamstack still useful" short="" videoid="0rnJYGViBTI"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="The idea of Jamstack" short="" videoid="P8Lzve3YDAQ"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="Retire the Jamstack term" short="" videoid="TityNmva1JM"></lite-youtube> <lite-youtube class="item" controls="0" fs="0" playlabel="I like Jamstack" short="" videoid="syVVqiFjKGg"></lite-youtube> </wc-carousel-lite> <div class="buttons"> <button class="prev" onclick="document.querySelector('.carousel-5').prev()" rel="”prev”"><</button> <button class="next" onclick="document.querySelector('.carousel-5').next()" rel="next">></button> </div> <div class="wrapper"> <hr> <h2>How can I get involved?</h2> <iframe frameborder="0" height="500" loading="lazy" marginheight="0" marginwidth="0" src="https://docs.google.com/forms/d/e/1FAIpQLSdqFZrZAsKW_LeNkLCSKPhjk0hxOHJkcsoXT5q_px0xj77GXQ/viewform?embedded=true" style="margin: 1.5rem 0 0 0;" title="Jamstack Survey" width="100%">Loading…</iframe> <hr> <h2>What's happening?</h2> <ul class="resources"> <li> <a href="https://www.youtube.com/watch?v=HeOIgsbsbcM" target="_blank"> <div class="preview"> <img alt="What's next for Jamstack #3 - Panel Discussion" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DHeOIgsbsbcM/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=HeOIgsbsbcM" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DHeOIgsbsbcM/" width="150"> <span class="title">What's next for Jamstack #3 - Panel Discussion</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=QBkIjxX98bE" target="_blank"> <div class="preview"> <img alt="The community of creatives on the web with Queen Raae - What the Jam" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DQBkIjxX98bE/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=QBkIjxX98bE" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DQBkIjxX98bE/" width="150"> <span class="title">The community of creatives on the web with Queen Raae - What the Jam</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=n1-bc6nPXfk" target="_blank"> <div class="preview"> <img alt="Framing the Jamstack community with Sean C. Davis - What the Jam" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dn1-bc6nPXfk/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=n1-bc6nPXfk" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dn1-bc6nPXfk/" width="150"> <span class="title">Framing the Jamstack community with Sean C. Davis - What the Jam</span> </span> </a> </li><li> <a href="https://youtu.be/Muto7O6q9nM" target="_blank"> <div class="preview"> <img alt="The personal web with Juhis - What the Jam" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fyoutu.be%2FMuto7O6q9nM/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://youtu.be/Muto7O6q9nM" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fyoutu.be%2FMuto7O6q9nM/" width="150"> <span class="title">The personal web with Juhis - What the Jam</span> </span> </a> </li><li> <a href="https://youtu.be/0YVCwD_Y7ts" target="_blank"> <div class="preview"> <img alt="Start with Static with Jason Lengstorf - What the Jam" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fyoutu.be%2F0YVCwD_Y7ts/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://youtu.be/0YVCwD_Y7ts" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fyoutu.be%2F0YVCwD_Y7ts/" width="150"> <span class="title">Start with Static with Jason Lengstorf - What the Jam</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=vp0osFhw6Mc" target="_blank"> <div class="preview"> <img alt="Building international communities with Henri Helvetica - What the Jam" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dvp0osFhw6Mc/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=vp0osFhw6Mc" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dvp0osFhw6Mc/" width="150"> <span class="title">Building international communities with Henri Helvetica - What the Jam</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=2Oxu4y-RLrs" target="_blank"> <div class="preview"> <img alt="The voice of simplicity with Murtuzaali Surti - What the Jam" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D2Oxu4y-RLrs/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=2Oxu4y-RLrs" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D2Oxu4y-RLrs/" width="150"> <span class="title">The voice of simplicity with Murtuzaali Surti - What the Jam</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=X7JPAtIRVUM" target="_blank"> <div class="preview"> <img alt="Using the best tool for the job with Phil Hawksworth - What the Jam" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DX7JPAtIRVUM/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=X7JPAtIRVUM" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DX7JPAtIRVUM/" width="150"> <span class="title">Using the best tool for the job with Phil Hawksworth - What the Jam</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=aa-hCQmqPqE" target="_blank"> <div class="preview"> <img alt="The role of Gatsby in Jamstack with Kyle Mathews - What The Jam" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Daa-hCQmqPqE/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=aa-hCQmqPqE" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Daa-hCQmqPqE/" width="150"> <span class="title">The role of Gatsby in Jamstack with Kyle Mathews - What The Jam</span> </span> </a> </li><li> <a href="https://youtu.be/QA4_7lkD6Xo" target="_blank"> <div class="preview"> <img alt="What's next for Jamstack #2 - Panel Discussion" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fyoutu.be%2FQA4_7lkD6Xo/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://youtu.be/QA4_7lkD6Xo" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fyoutu.be%2FQA4_7lkD6Xo/" width="150"> <span class="title">What's next for Jamstack #2 - Panel Discussion</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=ehl15mDan1w" target="_blank"> <div class="preview"> <img alt="I'm still excited about Static Site Generators with Jared White - What the Jam" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dehl15mDan1w/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=ehl15mDan1w" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dehl15mDan1w/" width="150"> <span class="title">I'm still excited about Static Site Generators with Jared White - What the Jam</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=36kMJrLGiP8" target="_blank"> <div class="preview"> <img alt="Is Jamstack just Next.js now with Brian Douglas - What the Jam" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D36kMJrLGiP8/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=36kMJrLGiP8" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D36kMJrLGiP8/" width="150"> <span class="title">Is Jamstack just Next.js now with Brian Douglas - What the Jam</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=Nn0kBdwGa78" target="_blank"> <div class="preview"> <img alt="What's next for Jamstack? - Panel Discussion" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DNn0kBdwGa78/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=Nn0kBdwGa78" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DNn0kBdwGa78/" width="150"> <span class="title">What's next for Jamstack? - Panel Discussion</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=bU8QqUqHHn0" target="_blank"> <div class="preview"> <img alt="Selling Jamstack to clients with Ana Rossetto - What the Jam" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DbU8QqUqHHn0/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=bU8QqUqHHn0" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DbU8QqUqHHn0/" width="150"> <span class="title">Selling Jamstack to clients with Ana Rossetto - What the Jam</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=MF6z8AP-R-E" target="_blank"> <div class="preview"> <img alt="Getting back to JAM with Chris Ferdinandi - What The Jam" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DMF6z8AP-R-E/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=MF6z8AP-R-E" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DMF6z8AP-R-E/" width="150"> <span class="title">Getting back to JAM with Chris Ferdinandi - What The Jam</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=VfJ5vEiBi5Q" target="_blank"> <div class="preview"> <img alt="What was the Jamstack? by Bryan Robinson" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DVfJ5vEiBi5Q/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=VfJ5vEiBi5Q" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DVfJ5vEiBi5Q/" width="150"> <span class="title">What was the Jamstack? by Bryan Robinson</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=b7ECdNV5dFQ" target="_blank"> <div class="preview"> <img alt="Treat the browser like the operating system with Cassidy Williams" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Db7ECdNV5dFQ/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=b7ECdNV5dFQ" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Db7ECdNV5dFQ/" width="150"> <span class="title">Treat the browser like the operating system with Cassidy Williams</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=j3uvh9994tc" target="_blank"> <div class="preview"> <img alt="Jamstack 2024! by Matt Biilmann" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dj3uvh9994tc/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=j3uvh9994tc" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dj3uvh9994tc/" width="150"> <span class="title">Jamstack 2024! by Matt Biilmann</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=BPKIU9Ow_ZU" target="_blank"> <div class="preview"> <img alt="Exploring the Bounds of Jamstack with Zach Leatherman - What the Jam" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DBPKIU9Ow_ZU/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=BPKIU9Ow_ZU" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DBPKIU9Ow_ZU/" width="150"> <span class="title">Exploring the Bounds of Jamstack with Zach Leatherman - What the Jam</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=Ml6753UL_QI" target="_blank"> <div class="preview"> <img alt="The full circle of Jamstack with Salma Alam-Naylor - What the Jam" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DMl6753UL_QI/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=Ml6753UL_QI" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DMl6753UL_QI/" width="150"> <span class="title">The full circle of Jamstack with Salma Alam-Naylor - What the Jam</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=UP47Lsi7zYw" target="_blank"> <div class="preview"> <img alt="From ColdFusion to 11ty with Raymond Camden - What the Jam" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DUP47Lsi7zYw/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=UP47Lsi7zYw" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DUP47Lsi7zYw/" width="150"> <span class="title">From ColdFusion to 11ty with Raymond Camden - What the Jam</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=gXdlRegRWUM" target="_blank"> <div class="preview"> <img alt="From WordPress to static sites with Miriam Schwab - What the Jam" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DgXdlRegRWUM/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=gXdlRegRWUM" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DgXdlRegRWUM/" width="150"> <span class="title">From WordPress to static sites with Miriam Schwab - What the Jam</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=Ya29icLfzXU" target="_blank"> <div class="preview"> <img alt="What the Jam: Decoding Jamstack's Evolution with Bud Parr" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DYa29icLfzXU/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=Ya29icLfzXU" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DYa29icLfzXU/" width="150"> <span class="title">What the Jam: Decoding Jamstack's Evolution with Bud Parr</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=1FsPF0oTnVs" target="_blank"> <div class="preview"> <img alt="A Deep Dive into Jamstack with Brian Rinaldi - What the Jam" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D1FsPF0oTnVs/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=1FsPF0oTnVs" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D1FsPF0oTnVs/" width="150"> <span class="title">A Deep Dive into Jamstack with Brian Rinaldi - What the Jam</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=3zPjbbAjdhY" target="_blank"> <div class="preview"> <img alt="What the Jam: Envisioning Jamstack's Future with Bryan Robinson" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D3zPjbbAjdhY/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=3zPjbbAjdhY" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D3zPjbbAjdhY/" width="150"> <span class="title">What the Jam: Envisioning Jamstack's Future with Bryan Robinson</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=QVgSuN4CQqQ" target="_blank"> <div class="preview"> <img alt="What the Jam: Defining the Future of Jamstack with Jim Finch" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DQVgSuN4CQqQ/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=QVgSuN4CQqQ" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DQVgSuN4CQqQ/" width="150"> <span class="title">What the Jam: Defining the Future of Jamstack with Jim Finch</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=Hf8lsVtOkcE" target="_blank"> <div class="preview"> <img alt="Jamming on the Jamstack with Mathias Biilmann" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DHf8lsVtOkcE/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=Hf8lsVtOkcE" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DHf8lsVtOkcE/" width="150"> <span class="title">Jamming on the Jamstack with Mathias Biilmann</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=xVmKdCi-Gpo" target="_blank"> <div class="preview"> <img alt="Jamstack ZHUZH Community Round-table Discussion" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DxVmKdCi-Gpo/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=xVmKdCi-Gpo" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DxVmKdCi-Gpo/" width="150"> <span class="title">Jamstack ZHUZH Community Round-table Discussion</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=LA_KyaEZs78" target="_blank"> <div class="preview"> <img alt="What even is the JAMStack???" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DLA_KyaEZs78/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=LA_KyaEZs78" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DLA_KyaEZs78/" width="150"> <span class="title">What even is the JAMStack???</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=B3_yz6b2ZMc" target="_blank"> <div class="preview"> <img alt="No, Seriously…What is Jamstack?" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DB3_yz6b2ZMc/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=B3_yz6b2ZMc" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DB3_yz6b2ZMc/" width="150"> <span class="title">No, Seriously…What is Jamstack?</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=Y6saGZ7GTnw" target="_blank"> <div class="preview"> <img alt="Panel Debate: What is Jamstack?" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DY6saGZ7GTnw/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=Y6saGZ7GTnw" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DY6saGZ7GTnw/" width="150"> <span class="title">Panel Debate: What is Jamstack?</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=X3lzFwH7cyo" target="_blank"> <div class="preview"> <img alt="The TRUTH about the Jamstack" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DX3lzFwH7cyo/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=X3lzFwH7cyo" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DX3lzFwH7cyo/" width="150"> <span class="title">The TRUTH about the Jamstack</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=Opye_qcRdUo" target="_blank"> <div class="preview"> <img alt="Phil Hawksworth - What is the JAMstack?" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DOpye_qcRdUo/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=Opye_qcRdUo" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DOpye_qcRdUo/" width="150"> <span class="title">Phil Hawksworth - What is the JAMstack?</span> </span> </a> </li><li> <a href="https://www.youtube.com/watch?v=1ZfMpG6ML-w" target="_blank"> <div class="preview"> <img alt="What is the JAMStack? ft Matt Biilmann" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D1ZfMpG6ML-w/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://www.youtube.com/watch?v=1ZfMpG6ML-w" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D1ZfMpG6ML-w/" width="150"> <span class="title">What is the JAMStack? ft Matt Biilmann</span> </span> </a> </li><li> <a href="https://vimeo.com/showcase/4247343/video/163522126" target="_blank"> <div class="preview"> <img alt="The New Front-end Stack. Javascript, APIs and Markup" class="og-image" decoding="async" height="211" loading="lazy" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fvimeo.com%2Fshowcase%2F4247343%2Fvideo%2F163522126/small" width="375"> </div> <span> <img alt="IndieWeb Avatar for https://vimeo.com/showcase/4247343/video/163522126" class="avatar avatar-indieweb" decoding="async" height="150" loading="lazy" src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fvimeo.com%2Fshowcase%2F4247343%2Fvideo%2F163522126/" width="150"> <span class="title">The New Front-end Stack. Javascript, APIs and Markup</span> </span> </a> </li></ul> <hr> <h2>Who is behind this?</h2> <p class="smaller-text"> <a href="https://cloudcannon.com" target="_blank">CloudCannon</a> has always been a believer in the power of static websites, even <a href="https://techcrunch.com/2013/08/02/cloud-cannon-turns-any-static-website-into-an-editable-dropbox-based-cms/" target="_blank">before Jamstack was a thing</a>. We're here to facilitate a transition to a community-led movement with a clear definition and purpose of what Jamstack is, and what it isn't. </p> <footer> 💛 Jamstack 2024 </footer> </div></main> <script type="module">/** * A lightweight youtube embed. Still should feel the same to the user, just MUCH faster to initialize and paint. * * Thx to these as the inspiration * https://storage.googleapis.com/amp-vs-non-amp/youtube-lazy.html * https://autoplay-youtube-player.glitch.me/ * * Once built it, I also found these: * https://github.com/ampproject/amphtml/blob/master/extensions/amp-youtube (👍👍) * https://github.com/Daugilas/lazyYT * https://github.com/vb/lazyframe */ class LiteYTEmbed extends HTMLElement { connectedCallback() { this.videoId = this.getAttribute('videoid'); let playBtnEl = this.querySelector('.lty-playbtn'); // A label for the button takes priority over a [playlabel] attribute on the custom-element this.playLabel = (playBtnEl && playBtnEl.textContent.trim()) || this.getAttribute('playlabel') || 'Play'; /** * Lo, the youtube placeholder image! (aka the thumbnail, poster image, etc) * * See https://github.com/paulirish/lite-youtube-embed/blob/master/youtube-thumbnail-urls.md * * TODO: Do the sddefault->hqdefault fallback * - When doing this, apply referrerpolicy (https://github.com/ampproject/amphtml/pull/3940) * TODO: Consider using webp if supported, falling back to jpg */ if (!this.style.backgroundImage) { this.style.backgroundImage = `url("https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg")`; } // Set up play button, and its visually hidden label if (!playBtnEl) { playBtnEl = document.createElement('button'); playBtnEl.type = 'button'; playBtnEl.classList.add('lty-playbtn'); this.append(playBtnEl); } if (!playBtnEl.textContent) { const playBtnLabelEl = document.createElement('span'); playBtnLabelEl.className = 'lyt-visually-hidden'; playBtnLabelEl.textContent = this.playLabel; playBtnEl.append(playBtnLabelEl); } playBtnEl.removeAttribute('href'); // On hover (or tap), warm up the TCP connections we're (likely) about to use. this.addEventListener('pointerover', LiteYTEmbed.warmConnections, {once: true}); // Once the user clicks, add the real iframe and drop our play button // TODO: In the future we could be like amp-youtube and silently swap in the iframe during idle time // We'd want to only do this for in-viewport or near-viewport ones: https://github.com/ampproject/amphtml/pull/5003 this.addEventListener('click', this.addIframe); // Chrome & Edge desktop have no problem with the basic YouTube Embed with ?autoplay=1 // However Safari desktop and most/all mobile browsers do not successfully track the user gesture of clicking through the creation/loading of the iframe, // so they don't autoplay automatically. Instead we must load an additional 2 sequential JS files (1KB + 165KB) (un-br) for the YT Player API // TODO: Try loading the the YT API in parallel with our iframe and then attaching/playing it. #82 this.needsYTApiForAutoplay = navigator.vendor.includes('Apple') || navigator.userAgent.includes('Mobi'); } /** * Add a <link rel={preload | preconnect} ...> to the head */ static addPrefetch(kind, url, as) { const linkEl = document.createElement('link'); linkEl.rel = kind; linkEl.href = url; if (as) { linkEl.as = as; } document.head.append(linkEl); } /** * Begin pre-connecting to warm up the iframe load * Since the embed's network requests load within its iframe, * preload/prefetch'ing them outside the iframe will only cause double-downloads. * So, the best we can do is warm up a few connections to origins that are in the critical path. * * Maybe `<link rel=preload as=document>` would work, but it's unsupported: http://crbug.com/593267 * But TBH, I don't think it'll happen soon with Site Isolation and split caches adding serious complexity. */ static warmConnections() { if (LiteYTEmbed.preconnected) return; // The iframe document and most of its subresources come right off youtube.com LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube-nocookie.com'); // The botguard script is fetched off from google.com LiteYTEmbed.addPrefetch('preconnect', 'https://www.google.com'); // Not certain if these ad related domains are in the critical path. Could verify with domain-specific throttling. LiteYTEmbed.addPrefetch('preconnect', 'https://googleads.g.doubleclick.net'); LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net'); LiteYTEmbed.preconnected = true; } fetchYTPlayerApi() { if (window.YT || (window.YT && window.YT.Player)) return; this.ytApiPromise = new Promise((res, rej) => { var el = document.createElement('script'); el.src = 'https://www.youtube.com/iframe_api'; el.async = true; el.onload = _ => { YT.ready(res); }; el.onerror = rej; this.append(el); }); } async addYTPlayerIframe(params) { this.fetchYTPlayerApi(); await this.ytApiPromise; const videoPlaceholderEl = document.createElement('div') this.append(videoPlaceholderEl); const paramsObj = Object.fromEntries(params.entries()); new YT.Player(videoPlaceholderEl, { width: '100%', videoId: this.videoId, playerVars: paramsObj, events: { 'onReady': event => { event.target.playVideo(); } } }); } async addIframe(){ if (this.classList.contains('lyt-activated')) return; this.classList.add('lyt-activated'); const params = new URLSearchParams(this.getAttribute('params') || []); params.append('autoplay', '1'); params.append('playsinline', '1'); if (this.needsYTApiForAutoplay) { return this.addYTPlayerIframe(params); } const iframeEl = document.createElement('iframe'); iframeEl.width = 560; iframeEl.height = 315; // No encoding necessary as [title] is safe. https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#:~:text=Safe%20HTML%20Attributes%20include iframeEl.title = this.playLabel; iframeEl.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'; iframeEl.allowFullscreen = true; // AFAIK, the encoding here isn't necessary for XSS, but we'll do it only because this is a URL // https://stackoverflow.com/q/64959723/89484 iframeEl.src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(this.videoId)}?${params.toString()}`; this.append(iframeEl); // Set focus for a11y iframeEl.focus(); } } // Register custom element customElements.define('lite-youtube', LiteYTEmbed); export class Customcarousel extends HTMLElement{constructor(){super(),this.item="item",this.initItem=0,this.transitionDuration=0,this.transitionType="ease",this.interval=1e3,this.direction="left",this.touchVelocityLimit=1.5,this.mouseVelocityLimit=3,this.t=30,this.i=null,this.s=null,this.h=[]}static get observedAttributes(){return["infinite","init-item","center-between","autoplay","interval","direction","transition-duration","transition-type","item","no-touch"]}disconnectedCallback(){for(;this.l.firstChild;)this.l.firstChild.remove();for(let t=0;t<this.o.length;t++)this.appendChild(this.o[t].cloneNode(!0));this.o=[],this.u=null,this.stop(this.autoplay),this.connected=!1}attributeChangedCallback(t,i,s){"infinite"===t?this.infinite=!0:"init-item"===t?this.initItem=parseInt(s):"center-between"===t?this.centerBetween=!0:"transition-duration"===t?this.transitionDuration=parseInt(s):"transition-type"===t?this.transitionType=s:"autoplay"===t?this.autoplay=!0:"interval"===t?this.interval=parseInt(s):"direction"===t?this.direction=s:"item"===t?this.item=s:"no-touch"===t&&(this.noTouch=!0)}connectedCallback(){setTimeout(()=>{this.m()},0),this.connected=!0}next(t=1){if(0===t&&(t=1),!this.infinite)return(!this.centerBetween&&this.p+(t-1)<this.g-1||this.centerBetween&&this.p<this.g-3)&&this.I(),t=this.v("l",t),void this._(this.p+t);parseInt(getComputedStyle(this.l).left)<0&&(this.I(),this.C(t),this._(this.p+t),this.F(t))}prev(t=1){if(0===t&&(t=1),!this.infinite)return this.p<0&&this.I(),t=this.v("r",t),void this._(this.p-t);this.l.offsetWidth+parseInt(getComputedStyle(this.l).left)>this.offsetWidth&&(this.I(),this.M(t),this._(this.p-t),this.F(-t))}I(){this.l.style.left=getComputedStyle(this.l).left}_(t){let i=this.offsetWidth/2,s=this.l.querySelectorAll("."+this.item);if(this.centerBetween&&t===s.length-1||!s[t])return;let h,e,r,l,n=0;for(h=0;h<t;h++)r=getComputedStyle(s[h]),l=parseFloat(r.marginLeft)+parseFloat(r.marginRight),n+=s[h].offsetWidth+l;e=parseFloat(getComputedStyle(s[h]).marginRight);let a=i-(n+parseFloat(getComputedStyle(s[0]).marginLeft)+(this.centerBetween?s[t].offsetWidth+e:s[t].offsetWidth/2));this.l.style.transition="left "+this.transitionDuration+"ms",this.l.style.transitionTimingFunction=this.transitionType,this.l.style.left=a+"px",this.p=t}goto(t){if(t>this.o.length-1)return;if(!this.infinite)return void this._(t);let i,s;i=t-this.S,s=t>this.S?t-this.S-this.o.length:t-this.S+this.o.length;let h=Math.abs(i)<=Math.abs(s)?i:s;h<0?this.M(Math.abs(h)):h>0&&this.C(Math.abs(h)),this._(this.p+h),this.F(h)}k(t){this.l.style.left=parseInt(this.l.style.left)+t+"px"}H(t){for(;this.l.firstChild;)this.l.firstChild.remove();let i=this.querySelectorAll("."+this.item);if(i.length>0){for(let t=0;t<i.length;t++)this.l.appendChild(i[t]);t--}for(let i=0;i<t;i++)for(let t=0;t<this.o.length;t++)this.l.appendChild(this.o[t].cloneNode(!0));this.g=this.l.querySelectorAll("."+this.item).length}L(t){let i,s;return i=getComputedStyle(t),s=parseFloat(i.marginLeft)+parseFloat(i.marginRight),t.offsetWidth+s}C(t=1){for(let i=0;i<t;i++){this.l.style.transition="";let t=this.l.querySelectorAll("."+this.item)[0];this.k(this.L(t)),this.l.appendChild(this.l.removeChild(t)),this.p--}}M(t=1){for(let i=0;i<t;i++){this.l.style.transition="";let t=[...this.l.querySelectorAll("."+this.item)].pop();this.k(-this.L(t)),this.l.insertAdjacentElement("afterbegin",this.l.removeChild(t)),this.p++}}T(){if(!this.connected)return;if(!this.infinite)return void this._(this.p);let t=parseInt(2.75*this.offsetWidth/this.A);if(this.o.length<3&&(t+=3),0===t&&t++,t%2&&t++,t!==this.u){let i;this.H(t),i=this.p?this.S:this.initItem,this._(this.o.length*(t/2)+i),this.R(),this.u=t,this.S=i}else this.goto(this.S)}R(){let t=this.g/2-this.p;0!==t&&(t<0?this.C():t>0&&this.M(),this.R())}F(t){for(let i=0;i<Math.abs(t);i++)t>0&&(this.S+1===this.o.length?this.S=0:this.S++),t<0&&(0===this.S?this.S=this.o.length-1:this.S--)}D(){this.infinite||(this.centerBetween&&this.p>=this.g-2||this.p>=this.g-1?this.direction="right":0===this.p&&(this.direction="left")),"right"===this.direction?this.prev():this.next()}stop(t=!1){clearInterval(this.i),this.i=null,this.autoplay=t}play(){null===this.i&&(this.D(),this.i=setInterval(()=>{this.D()},this.interval),this.autoplay=!0)}v(t,i){let s;return s="l"===t?this.o.length-(this.centerBetween?2:1)-this.p:this.p,s<i?s:i}B(t){if(!t)return null;let i=0;for(;null!==(t=t.previousSibling);)i++;return i}N(t){let i=t.target.closest("."+this.item);this.O=this.B(i),t.preventDefault(),t.pageX?(this.x=t.pageX,this.y=t.pageY):t.targetTouches[0].pageX&&(this.x=t.targetTouches[0].pageX,this.y=t.targetTouches[0].pageY),this.startTime=(new Date).getTime()}W(t){let i;i=t.changedTouches?document.elementFromPoint(t.changedTouches[0].clientX,t.changedTouches[0].clientY):t.target;let s,h=i.closest("."+this.item),e=this.B(h);s=Number.isInteger(this.O)&&Number.isInteger(e)?Math.abs(this.O-e):1;let r=(t.pageX?t.pageX:t.changedTouches[0].pageX)-this.x,l=(t.pageY?t.pageY:t.changedTouches[0].pageY)-this.y,n=(new Date).getTime()-this.startTime,a=Math.abs(r/n);(a>this.touchVelocityLimit&&t.changedTouches||a>this.mouseVelocityLimit)&&s++,Math.abs(r)>this.t&&Math.abs(r)>Math.abs(l)&&(t.preventDefault(),this.j=!0,r<-this.t?this.next(s):r>this.t&&this.prev(s))}q(t){this.j&&t.preventDefault(),this.j=!1,this.focus()}G(t){"ArrowRight"===t.key?this.prev():"ArrowLeft"===t.key&&this.next()}J(){if(this.h.every(t=>!0===t.complete))return clearInterval(this.s),this.K(),!0}K(){let t,i;this.A=0;for(let s=0;s<this.o.length;s++)t=getComputedStyle(this.o[s]),i=parseFloat(t.marginLeft)+parseFloat(t.marginRight),this.A+=this.o[s].offsetWidth+i;this.infinite?this.T():(this.H(1),this._(this.initItem)),this.autoplay&&this.play()}m(){if(this.P||(this.U=this.appendChild(document.createElement("div")),this.U.style.display="flex",this.U.style.overflow="hidden",this.U.style.width="100%",this.l=this.U.appendChild(document.createElement("div")),this.l.style.display="flex",this.l.style.position="relative"),this.h=Array.from(this.querySelectorAll("img")),this.o=this.querySelectorAll("."+this.item),0===this.o.length)throw"couldn't find any children with "+this.item+" class";this.initItem+1>this.o.length&&(this.initItem=0);let t,i=!0;for(let s=0;s<this.o.length;s++)if(t=getComputedStyle(this.o[s]),0===parseFloat(t.width)){i=!1;break}i?this.K():this.J()||(this.s=setInterval(()=>{this.J()},100)),this.P||(this.tabIndex=0,this.noTouch||(this.ontouchstart=this.N,this.ontouchstart=this.ontouchstart.bind(this),this.ontouchend=this.W,this.ontouchend=this.ontouchend.bind(this)),this.onmousedown=this.N,this.onmousedown=this.onmousedown.bind(this),this.onmouseup=this.W,this.onmouseup=this.onmouseup.bind(this),this.onclick=this.q,this.onclick=this.onclick.bind(this),this.onkeydown=this.G,this.onkeydown=this.onkeydown.bind(this),window.addEventListener("resize",()=>this.T())),this.P=!0}}customElements.define("wc-carousel-lite",Customcarousel);</script> </body></html>

CINXE.COM

The Future of Jamstack