diff --git a/live/index.html b/live/index.html index d902ed0..618635f 100644 --- a/live/index.html +++ b/live/index.html @@ -26,10 +26,10 @@ <h1>Bleeding Edge Web</h1> <img src="../images/live.svg" class="live-icon-lg" alt="live"> <br><br> <p> - Next meetup is Thurs, June 27th at 7pm CT. + Next meetup is Thurs, July 25th at 7pm CT. </p> <p> - <a href="https://expedia.zoom.us/j/91517465047?pwd=md1YZtbGCzr0C5abwX0k3qD7eYz9UI.1" target="_blank">Join + <a href="https://expedia.zoom.us/j/96852930841?pwd=aoKwpnNd4uoL5UFKyn0E3MauVghbOc.1" target="_blank">Join live</a> once the meetup has begun. </p> </section> diff --git a/slides/2024/05-may/index.html b/slides/2024/05-may/index.html index 30c049c..909a5cc 100644 --- a/slides/2024/05-may/index.html +++ b/slides/2024/05-may/index.html @@ -125,7 +125,7 @@ <h2>Other notable releases</h2> <section data-background-color="#661f34" class="center main-title"> <h2 style="color:white;">Baseline News</h2> - <p class="small"><a href="https://web.dev/baseline">https://web.dev/baseline</a></p> + <p class="x-small"><a href="https://web.dev/baseline">https://web.dev/baseline</a></p> </section> <section> diff --git a/slides/2024/06-june/index.html b/slides/2024/06-june/index.html index 137eff7..a291373 100644 --- a/slides/2024/06-june/index.html +++ b/slides/2024/06-june/index.html @@ -131,7 +131,7 @@ <h2>Other notable releases</h2> <section data-background-color="#661f34" class="center main-title"> <h2 style="color:white;">Baseline News</h2> - <p class="small"><a href="https://web.dev/baseline">https://web.dev/baseline</a></p> + <p class="x-small"><a href="https://web.dev/baseline">https://web.dev/baseline</a></p> </section> <section> diff --git a/slides/2024/07-july/batman-comics/batman-comic.css b/slides/2024/07-july/batman-comics/batman-comic.css new file mode 100644 index 0000000..d9d89e1 --- /dev/null +++ b/slides/2024/07-july/batman-comics/batman-comic.css @@ -0,0 +1,697 @@ +/** + ** Batman-Comic.CSS + ** Copyright 2024 Alvaro Montoro (alvaromontoro@gmail.com) + **/ + +@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700'); + +:where(.batman-comic) { + /*-- removed for BEW slide presentation purposes: */ + /*--size: 1vmin;*/ + + font-size: var(--size); + position: relative; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1vmin; + width: 98vmin; + margin-bottom: 1em; + + &.four-panels { + font-size: calc(var(--size) * 0.8); + width: 98vmin; + grid-template-columns: repeat(4, 1fr); + + & > section { + border: 0.4em solid; + } + } + + & > .panel, + & > section { + position: relative; + border: 0.5em solid; + border-radius: 0.5em; + height: 32em; + box-sizing: border-box; + background: linear-gradient(#c9c6, #c9c0 80%); + overflow: hidden; + + &.two { + grid-column-end: span 2; + } + + &.three { + grid-column-end: span 3; + } + + &.four { + grid-column-end: span 4; + } + + & *, + & *::before, + & *::after { + position: absolute; + box-sizing: border-box; + } + } + + .bubble { + transform: translateX(-50%); + font-size: 1.6em; + font-family: 'Comic Neue', 'Comic Sans', 'Comic Sans MS', Helvetica, Arial, sans-serif; + text-align: center; + text-wrap: balance; + + &::before { + --pos: 50%; + content: ""; + width: 2em; + height: 3em; + border-radius: 0 0 100% 0; + border: 0.15em solid; + border-top: 0; + clip-path: polygon(0.2em 0.2em, 100% 0.2em, 100% 100%, 0.2em 100%); + transform: translate(-50%, -0.2em); + left: var(--pos); + top: 100%; + } + + &.short { + &::before { + height: 2em; + } + } + + &.tall { + &::before { + height: 4em; + } + } + + &.left { + &::before { + transform: translate(-50%) scaleX(-1); + } + } + + &.off-panel { + &::before { + width: 100%; + transform: translate(-100%); + } + + &.left { + &::before { + transform: translate(0%) scaleX(-1); + } + } + } + } + + .batman { + /* colors */ + --skin-color: #fca; + --mouth-color: #700; + --suit-color: #333; + --suit-color-dark: #222; + --logo-color: #ff5; + --logo-color-dark: #dd2; + --eye-color: #fff; + /* others */ + --mouth: radial-gradient(farthest-side at 50% 0, var(--mouth-color) 99%, #0000) 50% 90% / 13% 8% no-repeat; + --mouth-position: 50%; + --mouth-direction: linear-gradient(#0000 0 0); + --arms-position: 50%; + --arms-width: 54%; + --arms-height: 115%; + --eye1-size: 8%; + --eye2-size: 8%; + --eyelids: linear-gradient(#0000 0 0); + --extra: linear-gradient(#0000 0 0); + --extra-under-mask: linear-gradient(#0000 0 0); + --ears: + radial-gradient(150% 150% at 10% 36%, var(--suit-color-dark) 5%, #0000 5.25%), + radial-gradient(150% 150% at 90% 36%, var(--suit-color-dark) 5%, #0000 5.25%) + ; + /* modifiers */ + --rotation: 0deg; + width: 19em; + height: 22em; + background: + /* ears */ + var(--ears), + /* cuello */ + radial-gradient(var(--suit-color-dark) 20%, #0000 21%), + /* logo */ + linear-gradient(to top right, var(--suit-color) 50%, #0000 0) 50.5% 74% / 4% 4% no-repeat, + linear-gradient(to top left, var(--suit-color) 50%, #0000 0) 49.5% 74% / 4% 4% no-repeat, + conic-gradient(from 340deg, var(--suit-color) 40deg, #0000 41deg) 50% 80% / 10% 7% no-repeat, + conic-gradient(from 340deg, var(--suit-color) 40deg, #0000 41deg) 47.5% 79% / 10% 5% no-repeat, + conic-gradient(from 340deg, var(--suit-color) 40deg, #0000 41deg) 52.5% 79% / 10% 5% no-repeat, + radial-gradient(14% 5% at 50% 75%, var(--logo-color) 36% 49%, #0000 50%) 50% 69% / 60% 60% no-repeat, + radial-gradient(14% 5% at 50% 75%, var(--logo-color) 36% 49%, #0000 50%) 50% 81.1% / 60% 60% no-repeat, + radial-gradient(20% 10% at 50% 75%, var(--suit-color) 35%, var(--logo-color) 36% 49%, #0000 50%), + /* cuerpo */ + linear-gradient(var(--logo-color-dark) 0 0) 50% 100% / 8% 6% no-repeat, + linear-gradient(var(--logo-color-dark) 0 0) 37% 100% / 3% 6% no-repeat, + linear-gradient(var(--logo-color-dark) 0 0) 63% 100% / 3% 6% no-repeat, + linear-gradient(var(--logo-color) 0 0) 50% 100% / 40% 5% no-repeat, + conic-gradient(at 50% -20%, #0000 170deg, var(--suit-color) 170.33deg 189.66deg, #0000 190deg) 50% 100% / 80% 80% no-repeat, + /* brazos */ + radial-gradient(var(--arms-width) 115% at var(--arms-position) 118%, var(--suit-color-dark) 55%, #0000 55.2%); + bottom: 0; + left: 50%; + transform: translate(-50%, 0) rotate(var(--rotation)); + transform-origin: 50% 100%; + box-shadow: + 0 10em 0 -5.5em var(--suit-color), + 0 10em 0 -4.1em var(--suit-color-dark); + + &::before { + content: ""; + --rotation: 0deg; + width: 17em; + height: 12em; + background: + var(--extra), + /* eyes */ + var(--eyelids), + radial-gradient(circle at 35% 53%, var(--eye-color) var(--eye1-size), #0000 calc(var(--eye1-size) + 0.6%)), + radial-gradient(circle at 65% 53%, var(--eye-color) var(--eye2-size), #0000 calc(var(--eye2-size) + 0.6%)), + /* mask */ + linear-gradient(100deg, var(--suit-color) 30%, #0000 30.25%), + linear-gradient(-100deg, var(--suit-color) 30%, #0000 30.25%), + linear-gradient(-181deg, var(--suit-color) 69%, #0000 69.25%), + conic-gradient(from -50deg at 50% 76%, #0000, var(--suit-color) 1deg 99deg, #0000 100deg), + /* extra under mask */ + var(--extra-under-mask), + /* mouth */ + var(--mouth-direction), + var(--mouth), + var(--skin-color); + border-radius: 50% / 20%; + top: 5%; + left: 50%; + transform: translateX(-50%) rotate(var(--rotation)); + transform-origin: 50% 100%; + clip-path: polygon(10% 0, 90% 0, 100% 80%, 100% 100%, 0 100%, 0 80%) + } + + &::after { + --rotation: 0deg; + content: ""; + width: 17em; + height: 25%; + left: 50%; + top: -8%; + transform: translateX(-50%) rotate(var(--rotation)); + transform-origin: 50% 100%; + background: + /* linear-gradient(-120deg, #0000 87%, var(--gray) 88%), + linear-gradient(120deg, #0000 87%, var(--gray) 88%), */ + conic-gradient(from 160deg at 11% 0, var(--suit-color) 26deg, #0000 27deg) no-repeat, + conic-gradient(from 174deg at 89% 0, #0000, var(--suit-color) 1deg 26deg, #0000 27deg) no-repeat + ; + } + + &.rotate-head-right { + --ears: + radial-gradient(150% 150% at 16% 32%, var(--suit-color-dark) 5%, #0000 5.25%), + radial-gradient(150% 150% at 92.5% 43%, var(--suit-color-dark) 5%, #0000 5.25%) + ; + + &::before { + --rotation: 10deg; + top: 7%; + } + + &::after { + --rotation: 10deg; + left: 59%; + top: -6%; + } + } + + &.rotate-head-left { + --ears: + radial-gradient(150% 150% at 7.5% 45%, var(--suit-color-dark) 5%, #0000 5.25%), + radial-gradient(150% 150% at 83% 33%, var(--suit-color-dark) 5%, #0000 5.25%) + ; + + &::before { + --rotation: -10deg; + top: 7%; + } + + &::after { + --rotation: -10deg; + left: 41.5%; + top: -6%; + } + } + + /* general cara */ + &.blush { + --extra-under-mask: + radial-gradient(40% 40% at 30% 50%, #f006, #0000), + radial-gradient(40% 40% at 70% 50%, #f006, #0000); + } + &.scare { + --extra-under-mask: + radial-gradient(40% 40% at 30% 50%, #00f3, #0000), + radial-gradient(40% 40% at 70% 50%, #00f3, #0000); + } + &.shame { + --extra-under-mask: + radial-gradient(40% 40% at 30% 50%, #f006, #0000), + radial-gradient(40% 40% at 70% 50%, #f006, #0000); + } + + /* boca */ + &.mouth-no { + --mouth: linear-gradient(#0000 0 0); + } + + &.mouth-angry, + &.mouth-sad { + --mouth: radial-gradient(farthest-side at 50% 100%, var(--mouth-color) 99%, #0000) var(--mouth-position) 90% / 13% 8% no-repeat; + } + + &.mouth-talk { + --mouth: radial-gradient(farthest-side at 50% 100%, var(--mouth-color) 99%, #0000) var(--mouth-position) 88% / 15% 5% no-repeat; + } + + &.mouth-round { + --mouth: radial-gradient(circle at var(--mouth-position) 86%, var(--mouth-color) 3%, #0000 4%); + } + + &.mouth-whisper { + --mouth: radial-gradient(55% 100% at var(--mouth-position) 86%, var(--mouth-color) 3%, #0000 4%); + } + + &.mouth-to-right { + --mouth-direction: linear-gradient(186deg, #0000 86%, var(--skin-color) 86.5%) var(--mouth-position) 50% / 30% 100% no-repeat; + } + + &.mouth-to-left { + --mouth-direction: linear-gradient(174deg, #0000 86%, var(--skin-color) 86.5%) var(--mouth-position) 50% / 30% 100% no-repeat; + } + + &.mouth-left { + --mouth-position: 45%; + } + + &.mouth-right { + --mouth-position: 55%; + } + + + /* eyes */ + &.eyes-no { + --eye-color: #0000; + } + + &.eyes-think { + --eyelids: linear-gradient(var(--suit-color) 48%, #0000 0); + } + + &.eyes-doubt { + --eyelids: linear-gradient(var(--suit-color) 47%, #0000 0 60%, var(--suit-color) 0 70%, #0000 0); + } + + &.eyes-sad { + --eyelids: conic-gradient(at 50% 45%, var(--suit-color) 105deg, #0000 0 255deg, var(--suit-color) 0); + } + + &.eyes-angry { + --eyelids: conic-gradient(at 50% 55%, var(--suit-color) 80deg, #0000 0 280deg, var(--suit-color) 0); + } + + &.eyes-suspicious { + --eyelids: conic-gradient(at 52% 55%, var(--suit-color) 83deg, #0000 0 285deg, var(--suit-color) 0); + } + + &.eyes-surprise { + --eye1-size: 12%; + --eye2-size: 12%; + } + + &.eyes-shock { + --eye1-size: 9%; + --eye2-size: 11%; + } + } + + + + .robin { + /* colores */ + --skin-color: #fca; + --skin-color-dark: #da8; + --mouth-color: #fff; + --suit-color: #f00; + --shirt-color: #080; + --cape-color: #ff5; + --logo-color: #ff5; + --logo-color-dark: #000; + --eye-color: #fff; + --mask-color: #000; + --hair-color: #000; + /* otros */ + --mouth: + radial-gradient(100% 140% at 50% 0%, var(--mouth-color) 30%, #0000 30.5%) 50% 100% / 30% 22% no-repeat; + --mouth-position: 50%; + --mouth-direction: linear-gradient(#0000 0 0); + --arms-position: 50%; + --arms-width: 54%; + --arms-height: 115%; + --eye1-size: 8%; + --eye2-size: 8%; + --eyelids: linear-gradient(#0000 0 0); + --extra: linear-gradient(#0000 0 0); + --extra-under-mask: linear-gradient(#0000 0 0); + --ears: + radial-gradient(circle at 6% 35%, var(--skin-color-dark) 5%, #0000 5.25%), + radial-gradient(circle at 94% 35%, var(--skin-color-dark) 5%, #0000 5.25%); + /* modifiers */ + --rotation: 0deg; + --dir: 50%; + width: 19em; + height: 20em; + background: + /* ears */ + var(--ears), + /* cuello */ + conic-gradient(at 50% 100%, var(--skin-color-dark) 40deg, #0000 42deg 318deg, var(--skin-color-dark) 320deg) var(--dir) 55% / 80% 20% no-repeat, + radial-gradient(var(--cape-color) 21%, #0000 21.5%), + /* botones */ + linear-gradient(90deg, #0000 47%, var(--cape-color) 0 53%, #0000 0) var(--dir) 75% / 80% 2% no-repeat, + linear-gradient(90deg, #0000 47%, var(--cape-color) 0 53%, #0000 0) var(--dir) 85% / 80% 2% no-repeat, + linear-gradient(90deg, #0000 47%, var(--cape-color) 0 53%, #0000 0) var(--dir) 95% / 80% 2% no-repeat, + /* robin logo */ + linear-gradient(var(--logo-color) 0 0) 56.75% 77% / 1.5% 7% no-repeat, + radial-gradient(farthest-side at 0 50%, #0000 70%, var(--logo-color) 72% 98%, #0000 99.9%) 59.75% 74.75% / 4% 4.5% no-repeat, + linear-gradient(45deg, #0000 45%, var(--logo-color) 47% 68%, #0000 70%) 60% 78% / 3% 3% no-repeat, + radial-gradient(circle at 58% 75%, var(--logo-color-dark) 4%, #0000 4.5%), + /* cuerpo */ + conic-gradient(at 50% -20%, #0000 170deg, var(--suit-color) 170.33deg 189.66deg, #0000 190deg) 50% 100% / 80% 80% no-repeat, + /* mangas y brazos */ + conic-gradient(at 50% 5%, #0000 155deg, var(--shirt-color) 155.5deg 204.75deg, #0000 205deg) 50% 60% / 80% 50% no-repeat, + radial-gradient(50% 50% at 50.125% 0, var(--shirt-color) 99%, #0000 99%) 50% 84% / 45% 5% no-repeat, + conic-gradient(at 55% -250%, #0000 170deg, var(--skin-color-dark) 170.25deg 193.75deg, #0000 194deg) 50% 100% / 70% 30% no-repeat + ; + bottom: 0; + left: 50%; + transform: translate(-50%, 0) rotate(var(--rotation)); + transform-origin: 50% 100%; + box-shadow: + 0 7em 0 -6.2em var(--suit-color), + 0 10em 0 -6.2em var(--suit-color), + 0 10em 0 -5em var(--skin-color-dark); + + &::before { + --rotation: 0deg; + content: ""; + width: 16em; + height: 11em; + border-radius: 50% / 20%; + top: 5%; + left: 50%; + transform: translateX(-50%) rotate(var(--rotation)); + background: + var(--extra), + /* eyes + mascara */ + var(--eyelids), + radial-gradient(circle at 35% 47%, var(--eye-color) var(--eye1-size), #0000 calc(var(--eye1-size) + 0.5%)), + radial-gradient(circle at 65% 47%, var(--eye-color) var(--eye2-size), #0000 calc(var(--eye2-size) + 0.5%)), + radial-gradient(75% 70% at 30% 45%, var(--mask-color) 30%, #0000 31%), + radial-gradient(75% 70% at 70% 45%, var(--mask-color) 30%, #0000 31%), + /* nariz */ + conic-gradient(at 50% 100%, var(--skin-color-dark) 34deg, #0000 36deg 324deg, var(--skin-color-dark) 326deg) 50% 65% / 20% 20% no-repeat, + /* boca */ + var(--mouth-direction), + var(--mouth), + /* base */ + var(--extra-under-mask), + var(--skin-color); + } + + &::after { + --rotation: 0deg; + content: ""; + width: 80%; + height: 20%; + left: 50%; + top: 0.4%; + transform: translate(-50%, -50%) rotate(var(--rotation)); + background: + conic-gradient(at 50% 20%, #0000 100deg, var(--hair-color) 101deg 140deg, #0000 142deg), + radial-gradient(100% 100% at 60% 100%, var(--hair-color) 45%, #0000 46%) + ; + border-radius: 100%; + box-shadow: inset -5em -0.5em var(--hair-color); + } + + &.rotate-head-right { + --ears: + radial-gradient(circle at 12% 25%, var(--skin-color-dark) 5%, #0000 5.25%), + radial-gradient(circle at 94.5% 41%, var(--skin-color-dark) 5%, #0000 5.25%); + + &::before { + --rotation: 10deg; + top: 4%; + left: 55%; + } + + &::after { + --rotation: 10deg; + left: 59%; + top: 0%; + } + } + + &.rotate-head-left { + --ears: + radial-gradient(150% 150% at 8% 40%, var(--skin-color-dark) 5%, #0000 5.25%), + radial-gradient(150% 150% at 91% 26%, var(--skin-color-dark) 5%, #0000 5.25%) + ; + + &::before { + --rotation: -10deg; + top: 4%; + } + + &::after { + --rotation: -10deg; + left: 49%; + top: -2%; + } + } + + /* general cara */ + &.blush { + --extra-under-mask: + radial-gradient(40% 40% at 30% 60%, #f002, #f000), + radial-gradient(40% 40% at 70% 60%, #f002, #f000); + } + + &.scare { + --extra-under-mask: + linear-gradient(#00f3, #f000 40%); + } + + &.shame { + --extra-under-mask: + radial-gradient(40% 40% at 30% 50%, #f003, #0000), + radial-gradient(40% 40% at 70% 50%, #f006, #0000); + } + + /* boca */ + &.mouth-no { + --mouth: linear-gradient(#0000 0 0); + } + + &.mouth-angry, + &.mouth-sad { + --mouth: radial-gradient(farthest-side at 50% 100%, var(--mouth-color) 99%, #0000) var(--mouth-position) 87% / 13% 8% no-repeat; + } + + &.mouth-talk { + --mouth: radial-gradient(farthest-side at 50% 100%, var(--mouth-color) 99%, #0000) var(--mouth-position) 86% / 14% 6% no-repeat; + } + + &.mouth-round { + --mouth: radial-gradient(circle at var(--mouth-position) 85%, var(--mouth-color) 3%, #0000 4%); + } + + &.mouth-whisper { + --mouth: radial-gradient(55% 100% at var(--mouth-position) 84%, var(--mouth-color) 3%, #0000 4%); + } + + &.mouth-to-right { + --mouth-direction: linear-gradient(186deg, #0000 83%, var(--skin-color) 83.5%) var(--mouth-position) 50% / 30% 100% no-repeat; + } + + &.mouth-to-left { + --mouth-direction: linear-gradient(174deg, #0000 83%, var(--skin-color) 83.5%) var(--mouth-position) 100% / 30% 90% no-repeat; + } + + &.mouth-left { + --mouth-position: 45%; + } + + &.mouth-right { + --mouth-position: 55%; + } + + + /* eyes */ + &.eyes-no { + --eye-color: #0000; + } + + &.eyes-think { + --eyelids: linear-gradient(var(--mask-color) 48%, #0000 0) 50% 45% / 50% 15% no-repeat; + } + + &.eyes-doubt { + --eyelids: + linear-gradient(var(--mask-color) 25%, #0000 0 60%, var(--mask-color) 0 70%, #0000 0) 30% 50% / 25% 35% no-repeat, + linear-gradient(var(--mask-color) 25%, #0000 0 60%, var(--mask-color) 0 70%, #0000 0) 70% 50% / 25% 35% no-repeat; + } + + &.eyes-sad { + --eyelids: + linear-gradient(170deg, var(--mask-color) 35%, #0000 36%) 30% 50% / 25% 35% no-repeat, + linear-gradient(190deg, var(--mask-color) 35%, #0000 36%) 70% 50% / 25% 35% no-repeat; + } + + &.eyes-angry { + --eyelids: + linear-gradient(190deg, var(--mask-color) 35%, #0000 36%) 30% 50% / 25% 35% no-repeat, + linear-gradient(170deg, var(--mask-color) 35%, #0000 36%) 70% 50% / 25% 35% no-repeat; + } + + &.eyes-suspicious { + --eyelids: + linear-gradient(185deg, var(--mask-color) 38%, #0000 39%) 30% 50% / 25% 35% no-repeat, + linear-gradient(165deg, var(--mask-color) 32%, #0000 33%) 70% 50% / 25% 35% no-repeat; + } + + &.eyes-surprise { + --eye1-size: 12%; + --eye2-size: 12%; + } + + &.eyes-shock { + --eye1-size: 9%; + --eye2-size: 11%; + } + } + + + /* posiciones personajes */ + .pos-x-0 { left: 0%; } + .pos-x-5 { left: 5%; } + .pos-x-10 { left: 10%; } + .pos-x-15 { left: 15%; } + .pos-x-20 { left: 20%; } + .pos-x-25 { left: 25%; } + .pos-x-30 { left: 30%; } + .pos-x-35 { left: 35%; } + .pos-x-40 { left: 40%; } + .pos-x-45 { left: 45%; } + .pos-x-50 { left: 50%; } + .pos-x-55 { left: 55%; } + .pos-x-60 { left: 60%; } + .pos-x-65 { left: 65%; } + .pos-x-70 { left: 70%; } + .pos-x-75 { left: 75%; } + .pos-x-80 { left: 80%; } + .pos-x-85 { left: 85%; } + .pos-x-90 { left: 90%; } + .pos-x-95 { left: 95%; } + .pos-x-100 { left: 100%; } + + .pos-line-0 { &::before { left: 0%; } } + .pos-line-5 { &::before { left: 5%; } } + .pos-line-10 { &::before { left: 10%; } } + .pos-line-15 { &::before { left: 15%; } } + .pos-line-20 { &::before { left: 20%; } } + .pos-line-25 { &::before { left: 25%; } } + .pos-line-30 { &::before { left: 30%; } } + .pos-line-35 { &::before { left: 35%; } } + .pos-line-40 { &::before { left: 40%; } } + .pos-line-45 { &::before { left: 45%; } } + .pos-line-50 { &::before { left: 50%; } } + .pos-line-55 { &::before { left: 55%; } } + .pos-line-60 { &::before { left: 60%; } } + .pos-line-65 { &::before { left: 65%; } } + .pos-line-70 { &::before { left: 70%; } } + .pos-line-75 { &::before { left: 75%; } } + .pos-line-80 { &::before { left: 80%; } } + .pos-line-85 { &::before { left: 85%; } } + .pos-line-90 { &::before { left: 90%; } } + .pos-line-95 { &::before { left: 95%; } } + .pos-line-100 { &::before { left: 100%; } } + + .pos-y-0 { top: 0%; } + .pos-y-5 { top: 5%; } + .pos-y-10 { top: 10%; } + .pos-y-15 { top: 15%; } + .pos-y-20 { top: 20%; } + .pos-y-25 { top: 25%; } + .pos-y-30 { top: 30%; } + .pos-y-35 { top: 35%; } + .pos-y-40 { top: 40%; } + .pos-y-45 { top: 45%; } + .pos-y-50 { top: 50%; } + .pos-y-55 { top: 55%; } + .pos-y-60 { top: 60%; } + .pos-y-65 { top: 65%; } + .pos-y-70 { top: 70%; } + .pos-y-75 { top: 75%; } + .pos-y-80 { top: 80%; } + .pos-y-85 { top: 85%; } + .pos-y-90 { top: 90%; } + .pos-y-95 { top: 95%; } + .pos-y-100 { top: 100%; } + + .width-0 { width: 0%; } + .width-5 { width: 5%; } + .width-10 { width: 10%; } + .width-15 { width: 15%; } + .width-20 { width: 20%; } + .width-25 { width: 25%; } + .width-30 { width: 30%; } + .width-35 { width: 35%; } + .width-40 { width: 40%; } + .width-45 { width: 45%; } + .width-50 { width: 50%; } + .width-55 { width: 55%; } + .width-60 { width: 60%; } + .width-65 { width: 65%; } + .width-70 { width: 70%; } + .width-75 { width: 75%; } + .width-80 { width: 80%; } + .width-85 { width: 85%; } + .width-90 { width: 90%; } + .width-95 { width: 95%; } + .width-100 { width: 100%; } + + .rotate-0 { --rotation: 0deg; } + .rotate-5 { --rotation: 5deg; } + .rotate-10 { --rotation: 10deg; } + .rotate-15 { --rotation: 15deg; } + .rotate-20 { --rotation: 20deg; } + .rotate-25 { --rotation: 25deg; } + .rotate-30 { --rotation: 30deg; } + .rotate--5 { --rotation: -5deg; } + .rotate--10 { --rotation: -10deg; } + .rotate--15 { --rotation: -15deg; } + .rotate--20 { --rotation: -20deg; } + .rotate--25 { --rotation: -25deg; } + .rotate--30 { --rotation: -30deg; } +} \ No newline at end of file diff --git a/slides/2024/07-july/batman-comics/index.html b/slides/2024/07-july/batman-comics/index.html new file mode 100644 index 0000000..39eec7f --- /dev/null +++ b/slides/2024/07-july/batman-comics/index.html @@ -0,0 +1,60 @@ +<html> +<head> + <link rel="stylesheet" href="batman-comic.css"> + <style> + body { + background: #000000; + margin: 30px 50px; + font-family: "Source Sans Pro", Helvetica, sans-serif; + } + h1 { + font-size: 2.5em; + color: #E91E63; + } + a, a:visited { + color: #42affa; + text-decoration: underline dotted #1c4968; + text-decoration-thickness: 2px; + text-underline-offset: 5px; + } + a:hover { + text-decoration-style: solid; + text-decoration-color: #E91E63; + } + section { + background: linear-gradient(#ffffff, #769db3 100%); + border-color: #777777; + font-weight: bold; + } + p.ref { + color: #ffffff; + font-size: 1.3em; + margin-top: 30px; + } + </style> +</head> +<body> + <h1>Batman-Comic.css Demo</h1> + + <article class="batman-comic"> + <section style="width: 400px;"> + <div class="bubble pos-x-60 pos-y-5 width-70 short"> + Greetings, Bleeding Edge Web! + </div> + <div class="batman"></div> + </section> + + <section style="width: 400px;"> + <div class="bubble pos-x-60 pos-y-5 width-70"> + I'm Batman. + </div> + <div class="batman eyes-angry mouth-angry rotate-head-right"></div> + </section> + </article> + + <p class="ref"> + Source: <a href="https://alvaromontoro.com/sansjs/demos/batman-comic-css/" target="_blank" + >https://alvaromontoro.com/sansjs/demos/batman-comic-css/</a> + </p> +</body> +</html> \ No newline at end of file diff --git a/slides/2024/07-july/images/batman.png b/slides/2024/07-july/images/batman.png new file mode 100644 index 0000000..04a9c62 Binary files /dev/null and b/slides/2024/07-july/images/batman.png differ diff --git a/slides/2024/07-july/images/sliderland.png b/slides/2024/07-july/images/sliderland.png new file mode 100644 index 0000000..9c4ae0b Binary files /dev/null and b/slides/2024/07-july/images/sliderland.png differ diff --git a/slides/2024/07-july/index.html b/slides/2024/07-july/index.html new file mode 100644 index 0000000..f1b596f --- /dev/null +++ b/slides/2024/07-july/index.html @@ -0,0 +1,313 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> + <title>Bleeding Edge Web: July 2024</title> + + <link rel="stylesheet" href="../../shared/reveal.js/dist/reset.css"> + <link rel="stylesheet" href="../../shared/reveal.js/dist/reveal.css"> + <link rel="stylesheet" href="../../shared/reveal.js/dist/theme/black-contrast.css"> + <link rel="stylesheet" href="../../shared/reveal.js/dist/theme/bew-overrides.css"> + <link rel="stylesheet" href="../../shared/reveal.js/plugin/highlight/monokai.css"> +</head> +<body> +<div class="reveal"> + <div class="slides"> + + <!---------------------- Intro ----------------------> + + <section class="center"> + <h1>Bleeding Edge Web</h1> + <h2><a href="https://twitter.com/edgeatx">@edgeATX</a></h2> + <h2><a href="https://www.edgeatx.org/">EdgeATX.org</a></h2> + </section> + + <section class="speaker-list"> + <h2>July 2024</h2> + <h3 class="lightning">News From the Bleeding Edge</h3> + <p class="small">— Brian Moeskau (<a href="https://twitter.com/bmoeskau">@bmoeskau</a>)</p> + <h3 class="lightning">Speed Vector Indexing</h3> + <p class="small">— Ted Patrick (<a href="https://twitter.com/__ted__">@__ted__</a>)</p> + <h3 class="star">RAG in Bedrock</h3> + <p class="small">— Zeb Evans (<a href="https://www.clientpoint.me/cp/zebulon.evans">clientpoint.com</a>)</p> + <h3 class="star">Turbo Charge Your Stack with AI</h3> + <p class="small">— Ryan Vice (<a href="https://vicesoftware.com/">vicesoftware.com</a>) + </p> + </section> + + <!---------------------- Housekeeping ----------------------> + + <section> + <h2>Housekeeping</h2> + <ul> + <li class="fragment">Join us on <a + href="https://join.slack.com/t/edgeatx/shared_invite/zt-1onzae2c4-0JBegV3EvF5VV4R_MDQsUA">Slack</a> + </li> + <li class="fragment">Speakers and sponsors <strong class="highlight">always wanted</strong> + <ul class=""> + <li><a href="https://www.edgeatx.org/speak.html">edgeatx.org / speak.html</a></li> + <li><a href="https://www.edgeatx.org/sponsorship.html">edgeatx.org / sponsorship.html</a></li> + </ul> + </li> + </ul> + </section> + + <!---------------------- Sponsors ----------------------> + + <section> + <h2>Thanks to Our Host!</h2> + <div style="background-color: #fff;padding: 25px 0 0 40px;border-radius: 15px;"> + <a href="https://www.expedia.com/" target="_blank"><img + src="../../shared/resources/images/sponsors/expedia-logo.jpg" alt="Expedia"> + </a> + </div> + </section> + + <!---------------------- Libs & Frameworks ----------------------> + + <section data-background-color="#661f34" class="center main-title"> + <h2 style="color:white;">Libraries & Frameworks</h2> + </section> + + <section> + <h2>es-toolkit 1.0</h2> + <p class="subhead"><a href="https://es-toolkit.slash.page/intro.html">Released</a> May 31st</p> + <blockquote>A state-of-the-art, high-performance JS utility library with a small bundle size and strong type annotations.</blockquote> + <ul> + <li class="fragment">Basically an upgraded / modern lodash</li> + <li class="fragment">Built in Typescript with 100% test coverage</li> + </ul> + </section> + + <section> + <h2>Other notable releases</h2> + <ul class="date-list"> + <li><span class="date">June 29</span> <a href="http://fabricjs.com/">Fabric.js 6.0</a></li> + <li><span class="date">July 5</span> <a href="https://tinybase.org/guides/releases/#v5-0">Tinybase 5.0</a></li> + <li><span class="date">July 8</span> <a href="https://github.com/vitest-dev/vitest/releases/tag/v2.0.0">Vitest 2.0</a></li> + <li><span class="date">July 16</span> <a href="https://forums.meteor.com/t/its-official-meteor-3-0-official-release-is-out/61860">Meteor 3.0</a></li> + <li><span class="date">July 17</span> <a href="https://nodejs.org/en/blog/release/v22.5.0">Node.js 22.5</a></li> + </ul> + </section> + + <!---------------------- Baseline Updates ----------------------> + + <section data-background-color="#661f34" class="center main-title"> + <h2 style="color:white;">Baseline News</h2> + <p class="x-small"><a href="https://web.dev/baseline" style="color: white;">https://web.dev/baseline</a></p> + </section> + + <section> + <h2>July browser releases</h2> + <p>Stable version releases:</p> + <ul class="date-list"> + <li><span class="date">July 9</span> <a + href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/128">Firefox 128</a> + </li> + <li><span class="date">July 23</span> <a + href="https://developer.chrome.com/release-notes/127">Chrome 127</a> + </li> + </ul> + </section> + + <section> + <h2>@property</h2> + <blockquote>Extends CSS by providing meaning and context to CSS variables.</blockquote> + <p>Default custom properties are simple strings:</p> + <pre><code data-trim data-noescape> + :root { + --myColor: hotpink; + } + </code></pre> + </section> + + <section> + <h2>@property</h2> + <p>Use <code><a + href="https://developer.mozilla.org/en-US/docs/Web/CSS/@property">@property</a></code> + to provide a detailed style definition: + </p> + <pre><code data-trim data-noescape> + @property --myColor { + syntax: '<color>'; + inherits: false; + initial-value: hotpink; + } + </code></pre> + <ul> + <li class="fragment">Provides type info</li> + <li class="fragment">Control over style inheritance</li> + <li class="fragment">Ability to define a default / fallback value</li> + </ul> + </section> + + <section> + <h2>font-size-adjust</h2> + <blockquote>Control lowercase letter size relative to uppercase letters.</blockquote> + <div class="fragment"> + <p>Verdana vs Times at <code>font-size: 40px</code>:</p> + <ul style="font-size: 40px;"> + <li><span style="font-family: Verdana, sans-serif">This is Verdana.</span></li> + <li><span style="font-family: Times, serif;">This is Times.</span></li> + </ul> + </div> + </section> + + <section> + <h2>font-size-adjust</h2> + <blockquote>Control lowercase letter size relative to uppercase letters.</blockquote> + <p>Times with <code>font-size-adjust: 0.54</code>:</p> + <ul style="font-size: 40px;"> + <li><span style="font-family: Verdana, sans-serif">This is Verdana.</span></li> + <li><span style="font-family: Times, serif; font-size-adjust: 0.54;">This is Times.</span></li> + </ul> + </section> + + <!---------------------- Web Standards Spotlight ----------------------> + + <!---------------------- Security & Privacy ----------------------> + + <section data-background-color="#661f34" class="center main-title"> + <h2 style="color:white;">Security & Privacy</h2> + </section> + + <section> + <h2>Polyfill.io Supply Chain Attack</h2> + <p class="subhead"><a href="https://sansec.io/research/polyfill-supply-chain-attack">Reported</a> June 25th</p> + <p>A shady Chinese company bought the domain + repo</p> + <ul> + <li class="fragment"><code>cdn.polyfill.io</code> started injecting malware</li> + <li class="fragment">Same with <code>bootcdn.net</code> and several other CDNs</li> + <li class="fragment">Google, Cloudflare and others blocked it quickly</li> + <li class="fragment">Cloudflare has a <a href="https://cdnjs.cloudflare.com/polyfill">polyfill.io + mirror</a> <span class="x-small">(but you don't need it)</span></li> + </ul> + </section> + + <section> + <h2>Privacy Sandbox</h2> + <p>Google announced <a href="https://privacysandbox.com/intl/en_us/">Privacy Sandbox</a> 4+ years ago.</p> + <p class="fragment">That was to include phasing out third-party cookies.</p> + <div class="fragment"> + <p>They just announced a + "<a href="https://privacysandbox.com/news/privacy-sandbox-update/">new path</a>" forward: + </p> + <blockquote> + Instead of deprecating third-party cookies, we would introduce a new experience in Chrome that + lets people make an informed choice that applies across their web browsing, and they’d be able + to adjust that choice at any time. We're discussing this new path with regulators, and will + engage with the industry as we roll this out. + </blockquote> + </div> + </section> + + <section> + <h2>Private Browsing 2.0</h2> + <p>Apple OTOH is <a href="https://webkit.org/blog/15697/private-browsing-2-0/">cracking down</a> + further in Safari 17.</p> + <p>New private browsing defaults:</p> + <ul> + <li class="fragment">Link tracking and fingerprinting protection</li> + <li class="fragment">Blocking known / cloaked network trackers</li> + <li class="fragment">Disabled extensions with history access</li> + </ul> + <p class="fragment">Plus, additional safeguards in ALL browsing modes</p> + </section> + + <!---------------------- Industry News ----------------------> + + <section data-background-color="#661f34" class="center main-title"> + <h2 style="color:white;">Industry News</h2> + </section> + + <section> + <h2>Ladybird Browser Initiative</h2> + <p class="subhead"><a href="https://ladybird.org/posts/announcement/">Announced</a> Jul1 1st</p> + <blockquote>A brand-new browser from scratch, backed by a non-profit.</blockquote> + <ul> + <li class="fragment">Open source, web standards-first</li> + <li class="fragment">No user monetization, "ever"</li> + <li class="fragment">Backed by Andreas Kling and Chris Wanstrath</li> + </ul> + <p class="fragment">Targeting "early adopter" alpha in... 2026</p> + </section> + + <section> + <h2>CrowdStrike Outage</h2> + <p class="subhead"><a href="https://www.crowdstrike.com/falcon-content-update-remediation-and-guidance-hub/">Occurred</a> July 18th</p> + <p>Faulty config sent to ~1% of all Windows machines</p> + <ul> + <li class="fragment">Led to a BSOD + reboot loop</li> + <li class="fragment">Cause: "a bug in the content-validation system"</li> + <li class="fragment">Took down airlines, banks, TV stations, hospitals</li> + <li class="fragment">Delta <a href="https://www.cnn.com/2024/07/23/business/delta-flight-cancellations/index.html">still</a> + hasn't recovered as of today!</li> + </ul> + </section> + + <!---------------------- Events ----------------------> + + <!---------------------- ICYMI ----------------------> + + <!---------------------- Just For Fun ----------------------> + + <section data-background-color="#661f34" class="center main-title"> + <h2 style="color:white;">Just For Fun</h2> + </section> + + <section> + <h2>Sliderland</h2> + <blockquote>A minimalist coding playground (using sliders)</blockquote> + <div class="center"> + <img src="images/sliderland.png" alt="Sliderland" style="width:500px;"> + </div> + <p><a href="https://sliderland.blinry.org/">Demos</a></p> + </section> + + <section> + <h2>Batman-comic.css</h2> + <blockquote>Easily create comics with Batman and Robin.</blockquote> + <pre><code data-trim data-noescape> + <article class="batman-comic"> + <section> + <div class="batman"></div> + </section> + </article> + </code></pre> + <a href="batman-comics/">Demo</a> + <div class="center"> + <img src="images/batman.png" style="width: 250px;" alt="Batman"> + </div> + </section> + + <!---------------------- Fin! ----------------------> + + <section> + <h2>Thanks!</h2> + <p>Brian Moeskau</p> + <ul> + <li><a href="https://www.moeskau.com/">moeskau.com</a></li> + <li><a href="https://www.edgeatx.org/slides/">edgeATX.org / slides</a></li> + </ul> + </section> + </div> +</div> + +<script src="../../shared/reveal.js/dist/reveal.js"></script> +<script src="../../shared/reveal.js/plugin/notes/notes.js"></script> +<script src="../../shared/reveal.js/plugin/markdown/markdown.js"></script> +<script src="../../shared/reveal.js/plugin/highlight/highlight.js"></script> +<script> + Reveal.initialize({ + hash: true, + transition: 'fade', + plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ] + }); + document.querySelectorAll('a').forEach((el) => { + el.setAttribute('target', '_blank'); + el.setAttribute('rel', 'noopener'); + }); +</script> +</body> +</html> diff --git a/slides/index.html b/slides/index.html index aded702..e0759b8 100644 --- a/slides/index.html +++ b/slides/index.html @@ -80,7 +80,14 @@ <h2>Slides</h2> <h3>2024</h3> - <h4>June</h4> + <h4>July</h4> + <ul> + <li><a href="2024/07-july/">News from the Bleeding Edge</a></li> + <li>Turbo Charge Your Stack with AI</li> + <li><strong class="sponsor">Sponsor: <a href="https://www.edgeatx.org/sponsorship.html">Bleeding Edge Web</a></strong></li> + </ul> + + <h4>June — <a href="https://www.youtube.com/watch?v=0PsWVR0K9z0" target="_blank">video</a></h4> <ul> <li><a href="2024/06-june/">News from the Bleeding Edge</a></li> <li>The Root of All (Web) Evils</li> @@ -94,14 +101,14 @@ <h4>May</h4> <li><strong class="sponsor">Sponsor: <a href="https://jam.dev">Jam.dev</a></strong></li> </ul> - <h4>April — <a href="https://www.youtube.com/watch?v=4i-RJl8lr1c">video</a></h4> + <h4>April — <a href="https://www.youtube.com/watch?v=4i-RJl8lr1c" target="_blank">video</a></h4> <ul> <li><a href="2024/04-apr/">News from the Bleeding Edge</a></li> <li><a href="https://noti.st/davatron5000/k6N2LP/html-with-superpowers">HTML with Superpowers</a></li> <li><strong class="sponsor">Sponsor: <a href="https://www.edgeatx.org/sponsorship.html">Bleeding Edge Web</a></strong></li> </ul> - <h4>March — <a href="https://www.youtube.com/watch?v=4-fkYNv7qog">video</a></h4> + <h4>March — <a href="https://www.youtube.com/watch?v=4-fkYNv7qog" target="_blank">video</a></h4> <ul> <li><a href="2024/03-mar/">News from the Bleeding Edge</a></li> <li><a href="https://fpliger.pyscriptapps.com/talks-bleeding-edge-web-2024/latest/">PyScript @@ -109,7 +116,7 @@ <h4>March — <a href="https://www.youtube.com/watch?v=4-fkYNv7qog">video</a <li><strong class="sponsor">Sponsor: <a href="https://teamtopia.com/">Team Topia</a></strong></li> </ul> - <h4>February — <a href="https://www.youtube.com/watch?v=0XCvYxn1M9M">video</a></h4> + <h4>February — <a href="https://www.youtube.com/watch?v=0XCvYxn1M9M" target="_blank">video</a></h4> <ul> <li><a href="2024/02-feb/">News from the Bleeding Edge</a></li> <li><a href="https://github.com/tedpatrick/htmx-talk">Modern Web Applications with HTMX</a></li> @@ -141,7 +148,7 @@ <h4>February</h4> <li><strong class="sponsor">Sponsor: <a href="https://events.indeed.com/hiringevents/">Indeed Hiring Events</a></strong></li> </ul> - <h4>January — <a href="https://www.youtube.com/watch?v=VZTBpnL-58I">video</a></h4> + <h4>January — <a href="https://www.youtube.com/watch?v=VZTBpnL-58I" target="_blank">video</a></h4> <ul> <li><a href="2020/01-jan">News from the Bleeding Edge</a></li> <li><a href="https://slides.com/kmurgic/react-concurrent-mode/">React Concurrent Mode</a></li> @@ -153,7 +160,7 @@ <h3>2019</h3> <h4>October–December</h4> <p><em>Holiday break</em></p> - <h4>September — <a href="https://youtu.be/DSn3L1cOE7o?t=34">video</a></h4> + <h4>September — <a href="https://youtu.be/DSn3L1cOE7o?t=34" target="_blank">video</a></h4> <ul> <li><a href="2019/09-sep">News from the Bleeding Edge</a></li> <li><a href="https://docs.google.com/presentation/d/1rE_FqpZT8rFB2AswF_glLIoghZ7ZJsi3PtZTgCQxkos/edit?ts=5d84138e#slide=id.g5f38f9700d_1_485">Analytics & Data for Developers</a></li> @@ -162,7 +169,7 @@ <h4>September — <a href="https://youtu.be/DSn3L1cOE7o?t=34">video</a></h4> <li><strong class="sponsor">Sponsor: <a href="https://fauna.com/">Fauna</a></strong></li> </ul> - <h4>August — <a href="https://www.youtube.com/watch?v=aUNfi4n5lTM&t=278">video</a></h4> + <h4>August — <a href="https://www.youtube.com/watch?v=aUNfi4n5lTM&t=278" target="_blank">video</a></h4> <ul> <li><a href="2019/08-aug">News from the Bleeding Edge</a></li> <li><a href="2019/08-aug/files/open-source.pdf">Everyone Can Do Open Source</a></li> @@ -170,7 +177,7 @@ <h4>August — <a href="https://www.youtube.com/watch?v=aUNfi4n5lTM&t=278">v <li><strong class="sponsor">Sponsor: <a href="https://company.auntbertha.com/">Aunt Bertha</a></strong></li> </ul> - <h4>July — <a href="https://www.youtube.com/watch?v=heR6iswSeQw">video</a></h4> + <h4>July — <a href="https://www.youtube.com/watch?v=heR6iswSeQw" target="_blank">video</a></h4> <ul> <li><a href="2019/07-jul">News from the Bleeding Edge</a></li> <li>Building Telecom Apps with Node.js</li> @@ -178,14 +185,14 @@ <h4>July — <a href="https://www.youtube.com/watch?v=heR6iswSeQw">video</a> <li><strong class="sponsor">Sponsor: <a href="https://company.auntbertha.com/">Aunt Bertha</a></strong></li> </ul> - <h4>June — <a href="https://www.youtube.com/watch?v=h7s63ZhDMD4&feature=youtu.be&t=508">video</a></h4> + <h4>June — <a href="https://www.youtube.com/watch?v=h7s63ZhDMD4&feature=youtu.be&t=508" target="_blank">video</a></h4> <ul> <li><a href="2019/06-jun">News from the Bleeding Edge</a></li> <li>Real User Measurements and the Development Lifecycle</li> <li><strong class="sponsor">Sponsor: <a href="https://www.edgeatx.org/sponsorship.html">Bleeding Edge Web</a></strong></li> </ul> - <h4>May — <a href="https://www.youtube.com/watch?v=l_kF6YPfECk">video</a></h4> + <h4>May — <a href="https://www.youtube.com/watch?v=l_kF6YPfECk" target="_blank">video</a></h4> <ul> <li><a href="2019/05-may">News from the Bleeding Edge</a></li> <li><a href="adhoc/remodeling">How I Used CSS & JS to Remodel a Condo</a></li> @@ -193,14 +200,14 @@ <h4>May — <a href="https://www.youtube.com/watch?v=l_kF6YPfECk">video</a>< <li><strong class="sponsor">Sponsor: <a href="https://theguild.co/aboutus">The Guild</a></strong></li> </ul> - <h4>April — <a href="https://www.youtube.com/watch?v=iLIalQdl3d4&feature=youtu.be&t=600">video</a></h4> + <h4>April — <a href="https://www.youtube.com/watch?v=iLIalQdl3d4&feature=youtu.be&t=600" target="_blank">video</a></h4> <ul> <li><a href="2019/04-apr">News from the Bleeding Edge</a></li> <li><a href="https://www.vicesoftware.com/react-redux-boilerplate-with-authentication-authorization-and-architecture-best-practices/">Production React Redux Architecture, Patterns, and Infrastructure Components</a></li> <li><strong class="sponsor">Sponsor: <a href="https://cloudflare.com">CloudFlare</a></strong></li> </ul> - <h4>March — <a href="https://www.youtube.com/watch?v=HUG4l2CK68Y">video</a></h4> + <h4>March — <a href="https://www.youtube.com/watch?v=HUG4l2CK68Y" target="_blank">video</a></h4> <ul> <li><a href="2019/03-mar">News from the Bleeding Edge</a></li> <li><a href="https://docs.google.com/presentation/d/1CXa2qyxXwXN9-5O2-CgUm9Xk2QOhJ_dcFgIihm1mTsk/edit?usp=sharing">Visual Regression Testing with Percy.io</a></li> @@ -209,14 +216,14 @@ <h4>March — <a href="https://www.youtube.com/watch?v=HUG4l2CK68Y">video</a <li><strong class="sponsor">Sponsor: <a href="https://duo.com/">Duo Security</a></strong></li> </ul> - <h4>February — <a href="https://www.youtube.com/watch?v=4FSc__j1QX0">video</a></h4> + <h4>February — <a href="https://www.youtube.com/watch?v=4FSc__j1QX0" target="_blank">video</a></h4> <ul> <li><a href="2019/02-feb">News from the Bleeding Edge</a></li> <li>HomeAway's Multi-Cloud Traffic Director (no slides)</li> <li><strong class="sponsor">Sponsor: <a href="https://homeaway.com/">HomeAway</a></strong></li> </ul> - <h4>January — <a href="https://www.youtube.com/watch?v=4_pLo8YrqwU">video</a></h4> + <h4>January — <a href="https://www.youtube.com/watch?v=4_pLo8YrqwU" target="_blank">video</a></h4> <ul> <li><a href="2019/01-jan">News from the Bleeding Edge</a></li> <li><a href="https://github.com/tedpatrick/async-await-talk">Async/Await Demo</a></li> @@ -229,14 +236,14 @@ <h3>2018</h3> <h4>November / December</h4> <p><em>Holiday break</em></p> - <h4>October — <a href="https://www.youtube.com/watch?v=JAXU6MgKiik&t=710s">video</a></h4> + <h4>October — <a href="https://www.youtube.com/watch?v=JAXU6MgKiik&t=710s" target="_blank">video</a></h4> <ul> <li><a href="2018/10-oct">News from the Bleeding Edge</a></li> <li><a href="https://speakerdeck.com/cowboyd/state-of-enjoyment">State of Enjoyment</a></li> <li><strong class="sponsor">Sponsor: <a href="https://www.cloudflare.com/">Cloudflare</a></strong></li> </ul> - <h4>September — <a href="https://youtu.be/1u6eL_BEqHo?t=448">video</a></h4> + <h4>September — <a href="https://youtu.be/1u6eL_BEqHo?t=448" target="_blank">video</a></h4> <ul> <li><a href="2018/09-sep">News from the Bleeding Edge</a></li> <li><a href="https://speakerdeck.com/robdel12/testing-big-in-javascript-bleeding-edge-web">Testing Big in JavaScript</a></li> @@ -250,7 +257,7 @@ <h4>August</h4> <li><strong class="sponsor">Sponsor: <a href="https://www.cloudflare.com/">Cloudflare</a></strong></li> </ul> - <h4>July — <a href="https://www.youtube.com/watch?v=owzf7aaQ_WQ&t=665s">video</a></h4> + <h4>July — <a href="https://www.youtube.com/watch?v=owzf7aaQ_WQ&t=665s" target="_blank">video</a></h4> <ul> <li><a href="2018/07-jul">News from the Bleeding Edge</a></li> <li><a href="https://docs.google.com/presentation/d/1c5wU3whpGbhvpKdW-PPDazolUeKjI5Idnc1xFJwv3jc/edit?usp=sharing" target="_blank">Symmetric and Asymmetric Cryptography and RSA Deep Dive</a></li> @@ -310,7 +317,7 @@ <h3>2017</h3> <a href="2017/10-oct">Bleeding Edge Web</a> / <a href="https://docs.google.com/presentation/d/1SZ_DSWphXBksHrylrSPKSVcfLN-O1Ba_BD9ONGDpuVY/edit?usp=sharing">An Introduction To Alexa and Alexa Skills</a> </li> - <li>September (<a href="https://www.youtube.com/watch?v=jJSApOHv3tQ">video</a> — + <li>September (<a href="https://www.youtube.com/watch?v=jJSApOHv3tQ" target="_blank">video</a> — <a href="2017/09-sep">Bleeding Edge Web</a> / <a href="https://drive.google.com/file/d/0ByfYIhtzqBvPZ2pIMnFDWjcxUTQ/view?usp=sharing">Live to Code, Don't Code to Live</a> </li> diff --git a/slides/shared/reveal.js/dist/theme/bew-overrides.css b/slides/shared/reveal.js/dist/theme/bew-overrides.css index 7929693..e5b18c3 100644 --- a/slides/shared/reveal.js/dist/theme/bew-overrides.css +++ b/slides/shared/reveal.js/dist/theme/bew-overrides.css @@ -34,6 +34,24 @@ font-size: 65%; } +.reveal a { + text-decoration: underline dotted #1c4968; + text-decoration-thickness: 2px; + text-underline-offset: 5px; +} +.reveal a:hover { + text-decoration-style: solid; + text-decoration-color: #E91E63; +} + +.reveal ::selection { + background: #222222; /* WebKit/Blink */ + color: inherit; +} +.reveal ::-moz-selection { + background: #ffb7b7; /* Gecko */ +} + .reveal blockquote { margin: 0; width: 90%; diff --git a/sponsorship.html b/sponsorship.html index 3e82ad4..5f8652f 100644 --- a/sponsorship.html +++ b/sponsorship.html @@ -25,7 +25,7 @@ <h2>Sponsorship Opportunities</h2> <p>To sponsor a meetup, or if you have any questions about sponsoring, please <a href="mailto:bleedingedgeatx@gmail.com?subject=Sponsorship%20Inquiry">email us</a>. - <p>We ask <strong>$300</strong> to sponsor a meetup session, which covers the cost + <p>We ask <strong>$200</strong> to sponsor a meetup session, which covers the cost of food and drinks (we typically feed 50+ attendees). We handle all of the logistics. Remaining money, if any, is used to offset the recurring costs of running the meetup (e.g. website hosting, meetup.com fees, swag, etc).</p>