CINXE.COM

<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="description" content="Senior front-end developer, web accessibility advocate, former rock star"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="generator" content="Astro v4.9.2"><link rel="icon" type="image/x-icon" href="favicon.ico"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Anton&family=Belgrano&display=swap" rel="stylesheet"><title>basher | front-end web developer & accessibility advocate</title><link rel="stylesheet" href="/_astro/index.C85iqM4i.css"></head> <body> <div class="page"> <header class="header" data-astro-cid-3ef6ksr2> <a href="/" class="header__logo" data-astro-cid-3ef6ksr2> <img src="/_astro/logo.D7zkvpq3_hB5zm.webp" alt="basher home" loading="eager" data-astro-cid-3ef6ksr2 width="235" height="140" decoding="async"> </a> </header> <main class="main stack stack--gutter-xl" data-astro-cid-j7pv25f6> <div class="wrapper wrapper--fullbleed skin-1" data-astro-cid-j7pv25f6> <h1 data-astro-cid-j7pv25f6> <span class="u-brand" data-astro-cid-j7pv25f6> senior front-end developer </span> and <span class="u-brand" data-astro-cid-j7pv25f6> web accessibility advocate </span> <br data-astro-cid-j7pv25f6> …and former <a href="#rockstar" data-astro-cid-j7pv25f6>rock star</a> </h1> </div> <div class="wrapper wrapper--s" data-astro-cid-j7pv25f6> <div class="prose stack" data-astro-cid-j7pv25f6> <h2 data-astro-cid-zfufvvig class="title"> <img src="/_astro/star.r2VKQomp_ZU1I5d.webp" alt="" data-astro-cid-zfufvvig width="135" height="138" loading="lazy" decoding="async"> <span data-astro-cid-zfufvvig>so who is “basher”?</span> </h2> <p data-astro-cid-j7pv25f6>I'm glad you asked.</p> <p data-astro-cid-j7pv25f6>“basher” is an old school nickname that's pretty much stuck. For many years I was an aspiring rock star, thrashing my drums on sweaty stages for many bands, but mainly for UK rockers <a href="#rockstar" data-astro-cid-j7pv25f6>bushbaby</a>.</p><p data-astro-cid-j7pv25f6></p><p data-astro-cid-j7pv25f6>As a sideline, I combined my artistic creativity and background in computers by building websites for local bands, teaching myself the fundamentals of web design, and experiencing the joys of browser testing in IE5 and Netscape!</p> <p data-astro-cid-j7pv25f6>But I've left those “hobbyist” days far behind me…</p> <h2 data-astro-cid-zfufvvig class="title"> <img src="/_astro/star.r2VKQomp_ZU1I5d.webp" alt="" data-astro-cid-zfufvvig width="135" height="138" loading="lazy" decoding="async"> <span data-astro-cid-zfufvvig>what do I do now?</span> </h2> <p data-astro-cid-j7pv25f6>I've been a full-time front-end web developer and web accessibility advocate since 2007.</p> <p data-astro-cid-j7pv25f6>I enjoy solving problems to deliver rich and performant user experiences to as many people as possible, irrespective of their ability or situation.</p> <p data-astro-cid-j7pv25f6>I'm also passionate about keeping things simple by leveraging the native web platform whenever possible, working with design systems, and building component libraries to improve code quality and overall developer experience.</p> </div> </div> <div class="wrapper wrapper--s" data-astro-cid-wkx7uqji> <h2 data-astro-cid-zfufvvig class="title"> <img src="/_astro/star.r2VKQomp_ZU1I5d.webp" alt="" data-astro-cid-zfufvvig width="135" height="138" loading="lazy" decoding="async"> <span data-astro-cid-zfufvvig>my recent work</span> </h2> </div> <div class="wrapper wrapper--fullbleed" data-astro-cid-wkx7uqji> <div class="grid" data-astro-cid-wkx7uqji> <div class="skin-1" data-astro-cid-wkx7uqji> <h3 data-astro-cid-zfufvvig class="title"> <img src="/_astro/star.r2VKQomp_ZU1I5d.webp" alt="" data-astro-cid-zfufvvig width="135" height="138" loading="lazy" decoding="async"> <span data-astro-cid-zfufvvig>projects</span> </h3> <ul class="stack" data-astro-cid-wkx7uqji> <li class="stack stack--gutter-s" data-astro-cid-wkx7uqji> <a href="https://basher.github.io/Web-UI-Boilerplate/" data-astro-cid-wkx7uqji>UI boilerplate / Storybook component library</a> <span class="meta" data-astro-cid-wkx7uqji>(Open source)</span> <span class="description" data-astro-cid-wkx7uqji>Accessible UI boilerplate for websites & webapps using vanilla HTML, CSS (Sass), JavaScript (TypeScript), Web Components and ARIA.</span> </li> </ul> </div> <div class="skin-1" data-astro-cid-wkx7uqji> <h3 data-astro-cid-zfufvvig class="title"> <img src="/_astro/star.r2VKQomp_ZU1I5d.webp" alt="" data-astro-cid-zfufvvig width="135" height="138" loading="lazy" decoding="async"> <span data-astro-cid-zfufvvig>articles</span> </h3> <ul class="stack" data-astro-cid-wkx7uqji> <li class="stack stack--gutter-s" data-astro-cid-wkx7uqji> <a href="https://css-tricks.com/html-web-components-make-progressive-enhancement-and-css-encapsulation-easier/" data-astro-cid-wkx7uqji>HTML Web Components Make Progressive Enhancement and CSS Encapsulation Easier! </a> <span class="meta" data-astro-cid-wkx7uqji>(CSS Tricks, 01 August 2024)</span> <span class="description" data-astro-cid-wkx7uqji>An extension to my previous article on LinkedIn.</span> </li><li class="stack stack--gutter-s" data-astro-cid-wkx7uqji> <a href="https://www.linkedin.com/pulse/html-web-components-progressive-enhancement-css-made-kevin-bonett-42zye/" data-astro-cid-wkx7uqji>HTML Web Components - Progressive Enhancement and CSS Encapsulation/Scope Made Easy</a> <span class="meta" data-astro-cid-wkx7uqji>(LinkedIn, 22 April 2024)</span> <span class="description" data-astro-cid-wkx7uqji>My preferred approach to leveraging native Web Components.</span> </li><li class="stack stack--gutter-s" data-astro-cid-wkx7uqji> <a href="https://css-tricks.com/expandable-sections-within-a-css-grid/" data-astro-cid-wkx7uqji>Expandable Sections Within a CSS Grid</a> <span class="meta" data-astro-cid-wkx7uqji>(CSS Tricks, 15 October 2021)</span> <span class="description" data-astro-cid-wkx7uqji>Explains how I solved a potentially tricky UX/UI problem with essentially 3 lines of CSS!</span> </li> </ul> </div> </div> </div> <div class="wrapper wrapper--fullbleed" data-astro-cid-e6knctys> <div class="stack stack--gutter-xl" data-astro-cid-e6knctys> <div class="wrapper wrapper--fit-content" data-astro-cid-e6knctys> <h2 id="rockstar" tabindex="-1" data-astro-cid-zfufvvig class="title"> <img src="/_astro/star.r2VKQomp_ZU1I5d.webp" alt="" data-astro-cid-zfufvvig width="135" height="138" loading="lazy" decoding="async"> <span data-astro-cid-zfufvvig>rock star</span> </h2> </div> <p class="u-center" data-astro-cid-e6knctys> <img src="/_astro/basher.kyHz5IbD_Z1DkehE.webp" alt="cool headshot of me on stage" data-astro-cid-e6knctys width="200" height="219" loading="lazy" decoding="async"> </p> <div class="grid" data-astro-cid-e6knctys> <figure data-astro-cid-e6knctys> <video poster="images/lipstick.webp" controls preload="none" data-astro-cid-e6knctys> <source src="media/lipstick.webm" type="video/webm" data-astro-cid-e6knctys> Sorry. Your browser does not support the WEBM video format. </video> <figcaption data-astro-cid-e6knctys>“lipstick” by bushbaby (promo video, 2004)</figcaption> </figure> <div class="stack" data-astro-cid-e6knctys> <figure data-astro-cid-e6knctys> <audio controls preload="none" data-astro-cid-e6knctys> <source src="media/tinsel_town.mp3" data-astro-cid-e6knctys> <source src="media/tinsel_town.ogv" data-astro-cid-e6knctys> </audio> <figcaption data-astro-cid-e6knctys>“tinsel town” by bushbaby (single, 2003)</figcaption> </figure> <figure data-astro-cid-e6knctys> <audio controls preload="none" data-astro-cid-e6knctys> <source src="media/skinny.mp3" data-astro-cid-e6knctys> <source src="media/skinny.ogv" data-astro-cid-e6knctys> </audio> <figcaption data-astro-cid-e6knctys>“skinny” by bushbaby (single, 2002)</figcaption> </figure> <figure data-astro-cid-e6knctys> <audio controls preload="none" data-astro-cid-e6knctys> <source src="media/platform_nine.mp3" data-astro-cid-e6knctys> <source src="media/platform_nine.ogv" data-astro-cid-e6knctys> </audio> <figcaption data-astro-cid-e6knctys>“platform nine” by bushbaby (from the album "space corps", 2001)</figcaption> </figure> <figure data-astro-cid-e6knctys> <audio controls preload="none" data-astro-cid-e6knctys> <source src="media/dreaming_day.mp3" data-astro-cid-e6knctys> <source src="media/dreaming_day.ogv" data-astro-cid-e6knctys> </audio> <figcaption data-astro-cid-e6knctys>“dreaming day” by bushbaby (from the ep "medicine", 1999)</figcaption> </figure> </div> </div> <p class="u-center" data-astro-cid-e6knctys>To listen to bushbaby's full catalog, please visit our <a href="https://www.youtube.com/@bushbaby_rocks" data-astro-cid-e6knctys>YouTube channel</a>.</p> </div> </div> </main> <aside class="stack stack--gutter-xl"> <section class="wrapper wrapper--s"> <div class="prose stack"> <h2 data-astro-cid-zfufvvig class="title"> <img src="/_astro/star.r2VKQomp_ZU1I5d.webp" alt="" data-astro-cid-zfufvvig width="135" height="138" loading="lazy" decoding="async"> <span data-astro-cid-zfufvvig>my socials</span> </h2> <ul> <li><a href="https://github.com/basher">GitHub</a></li> <li><a href="https://codepen.io/basherkev">Codepen</a></li> <li><a href="https://www.linkedin.com/in/kevbonett/">LinkedIn</a></li> <li><a href="https://www.instagram.com/basherkev/">Instagram</a> for lots of nice cars and gardens!</li> </ul> </div> </section> <section class="wrapper"> <div class="prose stack"> <h2 data-astro-cid-zfufvvig class="title"> <img src="/_astro/star.r2VKQomp_ZU1I5d.webp" alt="" data-astro-cid-zfufvvig width="135" height="138" loading="lazy" decoding="async"> <span data-astro-cid-zfufvvig>webrings</span> </h2> <p>Webrings are cool again, right? Well, I think they are, so I've joined some:</p> <div class="grid"> <div class="skin-1"> <h3 id="https://a11y-webring.club"> <a rel="external" href="https://a11y-webring.club"> a11y-webring.club </a> </h3> <nav aria-labelledby="https://a11y-webring.club"> <ul> <li> <a rel="external" referrerpolicy="strict-origin" href="https://a11y-webring.club/prev">Previous website</a> </li> <li> <a rel="external" referrerpolicy="strict-origin" href="https://a11y-webring.club/random">Random website</a> </li> <li> <a rel="external" referrerpolicy="strict-origin" href="https://a11y-webring.club/next">Next website</a> </li> </ul> </nav> </div><div class="skin-1"> <h3 id="https://cs.sjoy.lol"> <a rel="external" href="https://cs.sjoy.lol"> CSS JOY webring </a> </h3> <nav aria-labelledby="https://cs.sjoy.lol"> <ul> <li> <a rel="external" referrerpolicy="strict-origin" href="https://webri.ng/webring/cssjoy/previous?via=https://basher.biz">Previous website</a> </li> <li> <a rel="external" referrerpolicy="strict-origin" href="https://webri.ng/webring/cssjoy/random?via=https://basher.biz">Random website</a> </li> <li> <a rel="external" referrerpolicy="strict-origin" href="https://webri.ng/webring/cssjoy/next?via=https://basher.biz">Next website</a> </li> </ul> </nav> </div> </div> </div> </section> </aside> <footer class="footer wrapper wrapper--fullbleed" data-astro-cid-sz7xmlte> <small data-astro-cid-sz7xmlte> ©2024 basher. Built with vanilla HTML & CSS. Powered by <a href="https://astro.build/" data-astro-cid-sz7xmlte>Astro</a>. Hosted by <a href="https://pages.github.com/" data-astro-cid-sz7xmlte>GitHub Pages</a>. </small> </footer> </div> </body></html>