<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xml:base="https://bryn.codes/" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Bryn Newell | Creative Developer</title>
    <link>https://bryn.codes/</link>
    <atom:link href="https://bryn.codes/feed.xml" rel="self" type="application/rss+xml" />
    <description>The personal portfolio site of Creative Developer Bryn Newell</description>
    <language>en</language>
    <item>
      <title>Finding the Joy in Alt Text</title>
      <link>https://bryn.codes/writing/the-joy-in-alt-text/</link>
      <description>&lt;p&gt;Bluesky has one of my favorite settings I&#39;ve seen on a website in a long while ~ you can require alt text on an image before posting. It&#39;s such a beautiful little form of self governance, to show you care about accessibility, while acknowledging that, hey, sometimes we all forget to add it when we get excited about Good Content™️ for the internet.&lt;/p&gt;
&lt;p&gt;Now I could go in depth about the reasons why alt text should always be provided. It&#39;s a required &lt;a href=&quot;https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html&quot;&gt;WCAG criterion&lt;/a&gt;, accessibility is important, you’ve heard this rant (maybe even from me) before etc. That’s not what this post is about. I’ve noticed that many folks think about alt text only in cases of screen readers and sight-limited users. However we often forget that there are many other uses for alt text, especially cases where images simply can’t be loaded. Low speed internet connection, limited data usage, plane wifi. And that’s still not what this post is about!!&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;My belief is that we should begin to care a little more deeply about alt text, not because it is mandatory or useful, but because it is a joyful little creation of the internet in its own right.&lt;/strong&gt;&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;My dear friend &lt;a href=&quot;https://henry.codes/&quot;&gt;Henry&lt;/a&gt; has always been walking this walk. He’s hilarious and quite witty, especially on &lt;a href=&quot;https://bsky.app/profile/strange.website&quot;&gt;Bluesky&lt;/a&gt;, but every once in a while I don&#39;t get the joke. Luckily for me he posts really thorough content in his &lt;a href=&quot;https://bsky.app/profile/strange.website/post/3lefinli7zs2u&quot;&gt;alt text&lt;/a&gt;, and every time it gives me the context I need to enter the inner circle of The Bit. Sometimes the alt text itself holds something even more clever (in my opinion) and I get a bigger kick out of it than the main image or post itself. This is exactly what I want more of us to strive for. It’s fun and it’s funny and it broadens the possibility of getting your joke across.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://bryn.codes/assets/articles/bsky.jpg&quot; alt=&quot;a post on bluesky from henry (@strange.website) that reads &amp;quot;i gotta hand it to you boys this is absolutey devious work. it includes a screenshot of the Discord UI where it shows how many voice slots are filled, and as henry will later mention in his alt text, the &amp;quot;15&amp;quot; indicator is egregiously unbalanced in its container&amp;quot;&quot;&gt;&lt;/p&gt;
&lt;figure&gt;
&lt;img src=&quot;https://bryn.codes/assets/articles/bsky-2.jpg&quot; alt=&quot;a screenshot of the alt text included in henry&#39;s post that reads &#39;A Discord UI showing how many voice slots are filled of the available 15 slots for each channel. The &#39;15&#39; indicator is egregiously unbalanced in its container. Forehead slappingly unbalanced bro.&#39;&quot;&gt;
&lt;figcaption&gt;&lt;a href=&quot;https://bsky.app/profile/strange.website/post/3ln4n4isr7s2a&quot;&gt;https://bsky.app/profile/strange.website/post/3ln4n4isr7s2a&lt;/a&gt;&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;hr&gt;
&lt;p&gt;One of my favorite experiences with alt text in an unusual shape came whilst on an across-the-world flight. As you may know, many airlines provide free internet connection for messaging only, and because I am cheap and travel a lot, I refuse to pay for anything more than that. While on this lengthy flight, a group chat I was in really got going ~ shots were being fired in all directions, jokes slinging, and names (lovingly) being called. And then the cavalry (memes) started rolling in too. I however stopped being able to participate since the images wouldn’t download (or send) over this limited wifi. Desperate to not be left out of the shenanigans whilst extremely bored and ignoring my upside down paperback on the tray table however, I demanded that all my friends describe for me in a secondary follow up text exactly which meme or gif they had sent. We all eventually got so into it that we stopped sending the images entirely and sent only the descriptive messages back and forth in a little game of “can you figure out which meme I’m referring to”. Guess what? This is alt text!! It was such a pure and delightful form of it, because it helped me stay included in a limited situation and became a fun show of rapport between us all.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Back when the Clock App (Tiktok) was at risk of being shut down completely in the US, many had the valid concern wondering how these cultural moments were to be saved for posterity. A friend of a friend had the inspiration to create a &lt;a href=&quot;https://www.amazon.com/Small-Book-TikToks-collection-important/dp/B0DSL6MKRR&quot;&gt;book of TikToks&lt;/a&gt;. He decided to go through a handful of the most viral TikToks of all time, write them down in paragraph form (of course) and publish it as a book. It’s absolutely hilarious to flip through and try to figure out which video each page is referring to. And whether you know the original video or not, the joke, or at least the enjoyment of some goofy internet content comes across. Joyful and unique alt text strikes once again!&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;A few weeks ago I was at &lt;a href=&quot;https://heypresents.com/&quot;&gt;All Day Hey&lt;/a&gt; and &lt;a href=&quot;https://lolaslab.co/&quot;&gt;Lola Odelola&lt;/a&gt; gave a fantastic talk on “Alt Text as Artistic Medium”. I had started this post on the flight over to the conference and it felt like beautiful serendipity to hear her beliefs and advice. The conversations between friends after the conference and the &lt;a href=&quot;https://bsky.app/profile/darn.es/post/3loavnmc7h22y&quot;&gt;alt text selfie thread&lt;/a&gt; that followed were even more fuel for this thought process. Why not allow alt text to exist not only as a “fallback” to an image, but something creative and poetic in its own right. Lola reminded us that we can use it to describe meaning, not just literal descriptions.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;So the next time you’re struggling to writing alt text or a description for a video, instead of just hitting the basic criterion, ask yourself -&lt;/p&gt;
&lt;p&gt;How would I describe this to a friend over the phone?&lt;/p&gt;
&lt;p&gt;My friend hasn&#39;t seen the video I&#39;m trying to reference and I can&#39;t pull it up while operating a motor vehicle, how do I articulate it so that they still get the joke?&lt;/p&gt;
&lt;p&gt;If this were hanging in a museum in front of me and I asked the person across from me to close their eyes, how would I depict the way this piece of art makes me feel?&lt;/p&gt;
&lt;p&gt;Alt text can and should be whimsy. It can be fun to create and fun to read. Not only do your users that can’t access your images, for whatever reason, deserve to be considered, they deserve to be included. And users who don’t “need” the alt text deserve to consider why it might expand their enjoyment or understanding of your content too.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://bryn.codes/assets/articles/bsky-3.png&quot; alt=&quot;Robb&#39;s (@robbowen.digital on Bluesky) alt text selfie which reads &amp;quot;Robb sits in a room painted in shades of disrupted sleep and red velvet. He is amongst friends, drifting between the embers of his second coffee and the spark of a third&amp;quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://bryn.codes/assets/articles/bsky-4.png&quot; alt=&quot;Salma&#39;s (@whitep4nth3r.com on Bluesky) alt text selfie which reads &amp;quot;an extroverted introvert sits contentedly in between friends; friends who were once a figment of her imagination but are now real; she wore her best aging emo dress in order to fit in with the crowd, but here it transpires she didn’t need to try so hard; she is loved in this group, and she feels it&amp;quot;&quot;&gt;&lt;/p&gt;
&lt;p class=&quot;center&quot;&gt;♡&lt;/p&gt;
</description>
      <pubDate>Tue, 13 May 2025 00:00:00 GMT</pubDate>
      <dc:creator>Bryn Newell</dc:creator>
      <guid>https://bryn.codes/writing/the-joy-in-alt-text/</guid>
    </item>
    <item>
      <title>a musing</title>
      <link>https://bryn.codes/writing/musing-1/</link>
      <description>&lt;p&gt;i don’t want to follow the the intangible numbers of economics. i want to twist my fingers up in blades of grass and feel the way the clouds change the shadows and luminance of the sun as they move behind my closed eyelids&lt;/p&gt;
&lt;p class=&quot;center&quot;&gt;☼&lt;/p&gt;</description>
      <pubDate>Wed, 05 Mar 2025 00:00:00 GMT</pubDate>
      <dc:creator>Bryn Newell</dc:creator>
      <guid>https://bryn.codes/writing/musing-1/</guid>
    </item>
    <item>
      <title>Swapping from Vue to Eleventy</title>
      <link>https://bryn.codes/writing/vue-to-11ty/</link>
      <description>&lt;p class=&quot;note&quot;&gt;* a heads up - I have a bit of a sailor’s mouth (by corporate standards) and have opted to not censor myself anymore. &lt;span class=&quot;censor-sentence&quot;&gt;If you’d like the censored version you can &lt;/span&gt;&lt;button class=&quot;link rosegold&quot; id=&quot;censorship-button&quot;&gt;click here.&lt;/button&gt;&lt;/p&gt;
&lt;p&gt;“Oh no it’s time to redesign my website again isn’t it?” The running joke that every technologist knows the plague of well, especially when anyone in your circle starts posting about their re-launch. This thought had just started to infect me when I realized, wait, I actually still really love the general design of my site and I don’t want to throw it all away. Was there something else I could work on instead? I originally built my site in 2019, surely there must be a new iteration.&lt;/p&gt;
&lt;p&gt;And then it dawned on me that I was using Vue for a single page static site.&lt;/p&gt;
&lt;p&gt;I’m embarrassed to admit this, so thanks for not jumping to Bluesky to publicly shame me for it right away. Over the years I’ve realized this is one of my biggest qualms about the tech industry in general - we &lt;span class=&quot;swear&quot;&gt;fuckin&lt;/span&gt; lovveeee over-engineering &lt;span class=&quot;swear&quot;&gt;shit&lt;/span&gt;. Why did I use an entire gigantic framework, ready to invoke state management, handle reactivity, and componentize things into the ground, for literally one page of HTML and CSS? Because it was what I knew. React-titude (that’s OC, ya like it?) is a plague. I know big frameworks have a time and a place. I’ve worked on nothing but React, React Native, and Vue in the entirety of my professional career. And I stand by my choice of Vue over React at least. But I’m just begging us, now, to remember and to teach that it doesn’t have to be the only way.&lt;/p&gt;
&lt;p&gt;Remember good ol’ HTML? Vanilla CSS? It handles SO MUCH of the heavy lifting for you when you just… learn it and use it well. They are languages of their own right that have come so far, especially in the last handful of years. If you haven’t followed along I highly encourage you to &lt;a href=&quot;https://www.w3.org/TR/2025/NOTE-css-2024-20250225/&quot;&gt;check the specs&lt;/a&gt; and learn about the many capabilities that have been added to the baseline in recent times.&lt;/p&gt;
&lt;p&gt;The goal of the project became: revamp the website by simplifying everything. Return to the core tools and core developing principles. Vanilla languages are good languages.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;6+ years in this field and I still don’t &lt;em&gt;really&lt;/em&gt; understand what goes on under the hood of compiling and literally deploying a website. So, I still needed something to handle the goofy ish for me: enter &lt;a href=&quot;https://www.11ty.dev/&quot;&gt;Eleventy&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Following their docs I whipped up a new project (which took like 2 seconds because it’s so lightweight weeee!) and sat there for a moment wondering - huh - how on earth do I approach rebuilding this whole thing? I ended up not coming up with a plan at all and decided to just wing it. But now, dear reader, if you ever find yourself in this situation, hopefully you won’t have to “just wing it” and can learn from what I did.&lt;/p&gt;
&lt;p&gt;I started by copy pasting the first main section of my Vue project over to the &lt;code&gt;index.html&lt;/code&gt; - yes manually - but thankfully vue is &lt;em&gt;mostly&lt;/em&gt; plain html, especially when you’re not using any complex logic. I had to edit a few lines of code, mostly removing a lot of &lt;code&gt;:&lt;/code&gt; s before things like the &lt;code&gt;src&lt;/code&gt; attribute, and again all by hand, but this is a small project. I copied the assets folder over. Ran  &lt;code&gt;npx @11ty/eleventy --serve&lt;/code&gt; to take a look at it on localhost anddddddd saw there were no images rendering.&lt;/p&gt;
&lt;p&gt;Eleventy has a lot of “default” knowledge. It compiles your index.html and any other .html files into other pages directly into the &lt;code&gt;_site&lt;/code&gt; directory, but it doesn’t necessarily “automatically” know about anything else you throw in the project. This is where &lt;a href=&quot;https://www.11ty.dev/docs/copy/&quot;&gt;addPassthroughCopy&lt;/a&gt; comes in. Adding this nice quick little one liner to &lt;code&gt;eleventy.config.js&lt;/code&gt; is all it took for my images to magically start working!&lt;/p&gt;
&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;  eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addPassthroughCopy&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;./assets&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;small&gt;eleventy.config.js&lt;/small&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Debugging tip: if you’re not seeing something locally that you’re expecting to see - crack open the &lt;code&gt;_site&lt;/code&gt; directory and see if you can find whatever is missing in there. More often than not, I was missing a config rule or a &lt;code&gt;/&lt;/code&gt; in a folder name, and my missing item was never even being noticed by 11ty.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;My strategy here was to get one bite sized piece of the page fully up and running. Images, styles and all looking exactly like it does on my shipped site. So the next step was to get styles added in! Now Bryn, you &lt;em&gt;just&lt;/em&gt; ranted about vanilla everything - why are you using Sass when CSS has come so far over the years?? First of all reader, &lt;span class=&quot;swear&quot;&gt;mind your business&lt;/span&gt;, but mostly because I’m so ingrained in and still love it. The in depth explanation deserves its own blog that I might eventually write, but for now just know that to me Sass handles more overhead, while still writing pure CSS declarations. So it counts okay?  I was using Sass in my previous project too, so I copied over the entire &lt;code&gt;/styles&lt;/code&gt; folder into the new project and installed it as a dependency in this one.&lt;/p&gt;
&lt;p&gt;Now I also don’t need 11ty to know or care that I’m using Sass. In my index.html inside the &lt;code&gt;head&lt;/code&gt; I’ll include a link to a stylesheet. So I just need one css file in the built files. In my case called &lt;code&gt;_site/css/main.css&lt;/code&gt;&lt;/p&gt;
&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;link&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;rel&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;stylesheet&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/css/main.css&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;small&gt;index.html&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;We can allow Sass to compile all its own stuff into that &lt;code&gt;main.css&lt;/code&gt; file as well as make things look pretty for us locally with a little bit of configuration magic again. This time we’ll create a new script in our &lt;code&gt;package.json&lt;/code&gt; so that in the future we can just run the command &lt;code&gt;npm start&lt;/code&gt; without having to think about anything. We’ll also need to install concurrently to make this magic happen… well… concurrently.&lt;/p&gt;
&lt;pre class=&quot;language-json&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token property&quot;&gt;&quot;start&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;concurrently &#39;sass --watch styles:_site/css&#39; &#39;npx @11ty/eleventy --serve&#39;&quot;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;small&gt;package.json&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;Once I saw it was compiling to the right place I added another eleventy config rule so I would keep hot reloading with any style changes as well.&lt;/p&gt;
&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addWatchTarget&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;./styles/&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;small&gt;eleventy.config.js&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;Fonts weren’t working quite right though, and this was a matter of double checking all of my import paths. I was using Vue’s silly little shorthand everywhere. So a full once over of all &lt;code&gt;url()&lt;/code&gt;s and &lt;code&gt;import()&lt;/code&gt;s to use absolute paths was in order. From here everything looked 1:1 with the header on my original site - so now it was time to begin bringing the rest of the project over!&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;I pretty much just copy pasta-ed each component section over into the index.html followed by its CSS style block into its own new &lt;code&gt;.scss&lt;/code&gt; file. Each sass file got a new line to use those sweet sweet variables. And I double checked there weren’t any lingering Vue template colons  &lt;code&gt;:&lt;/code&gt;  hanging out.&lt;/p&gt;
&lt;pre class=&quot;language-scss&quot;&gt;&lt;code class=&quot;language-scss&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;@use&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;variables&#39;&lt;/span&gt; &lt;span class=&quot;token module-modifier keyword&quot;&gt;as&lt;/span&gt; *&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;small&gt;{sectionName}.scss&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;Now I do have a few pieces of work ✨componentized✨ and using some JS - namely the projects section and my social media links. So here’s where I had to figure out templating and learn some 11ty techniques. 11ty has a concept of &lt;a href=&quot;https://www.11ty.dev/docs/data-global/&quot;&gt;global data&lt;/a&gt;, so I decided to move my “projects” data array into a json object. It lives in &lt;code&gt;_data/projects.json&lt;/code&gt;. 11ty has very few opinions about almost anything, which is one of the things that makes it so flexible and great, but when you’re used to something as strongly opinionated as React like I was, it can also be a little confusing. The direction I decided to go with was Nunjucks. I wasn’t familiar with it before this project, but I know it’s incredibly widely used and supported, and all of the &lt;a href=&quot;https://www.11ty.dev/docs/languages/nunjucks/&quot;&gt;11ty docs&lt;/a&gt; have Nunjucks examples, so it seemed a safe bet.&lt;/p&gt;
&lt;p&gt;To begin using it, I simply renamed the &lt;code&gt;index.html&lt;/code&gt; to &lt;code&gt;index.njk&lt;/code&gt;. It too is incredibly lightweight so you only have to use as much of it as you want. Where I previously had a &lt;code&gt;v-for&lt;/code&gt; to loop over my projects array, I now added one line to access that projects json and loop through it, and one line to tell the loop when to end.&lt;/p&gt;
&lt;pre class=&quot;language-liquid&quot;&gt;&lt;code class=&quot;language-liquid&quot;&gt;	&lt;span class=&quot;token liquid language-liquid&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;{%&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;for&lt;/span&gt; project &lt;span class=&quot;token keyword&quot;&gt;in&lt;/span&gt; projects &lt;span class=&quot;token delimiter punctuation&quot;&gt;%}&lt;/span&gt;&lt;/span&gt;
	  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; {... project html here} &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
	&lt;span class=&quot;token liquid language-liquid&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;{%&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;endfor&lt;/span&gt; &lt;span class=&quot;token delimiter punctuation&quot;&gt;%}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;small&gt;index.njk&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;Here’s where I started to get a big confused again (thanks &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;https://bryn.codes/writing/vue-to-11ty/#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt; React Brain) because how do I actually make a component now?? Well there’s sort of two ways to go about this with 11ty. In the case of my social media links, a little chunk of styled HTML I’m including in multiple places and don’t want to have to rewrite/duplicate the code for we’re going to use an &lt;a href=&quot;https://www.11ty.dev/docs/config/#directory-for-includes&quot;&gt;includes&lt;/a&gt; folder. Creating this folder in 11ty does something similar to the data folder. Any files inside of it are, well, included in the project and can therefore be referenced anywhere else. They too, like the data folder, don’t get compiled directly to the &lt;code&gt;_site&lt;/code&gt; folder, but what is referenced will be magically compiled where it is referenced. So I created a &lt;code&gt;socialLinks.html&lt;/code&gt; inside of the folder and on the appropriate line of my index.njk added&lt;/p&gt;
&lt;pre class=&quot;language-liquid&quot;&gt;&lt;code class=&quot;language-liquid&quot;&gt;&lt;span class=&quot;token liquid language-liquid&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;{%&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;include&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;socialLinks.html&#39;&lt;/span&gt; &lt;span class=&quot;token delimiter punctuation&quot;&gt;%}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;small&gt;index.njk&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;Another option to handle components is to use 11ty’s concept of a &lt;a href=&quot;https://www.11ty.dev/docs/layouts/&quot;&gt;layout&lt;/a&gt;. This makes a lot more sense for a parent component, or perhaps a wrapper with the same style/logic containing multiple elements. I’m jumping a little out of order here, but when I added in the new functionality of hosting my own articles, layouts came in really handy. I can have one layout that every article page uses, so they’ll all have the same header, nav, footer, and styling.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;At this point I was feeling pretty proud scrolling through the site and feeling like I might be done with the basic swap. Until I caught a CSS bug. It was at this moment, I realized I had &lt;span class=&quot;swear&quot;&gt;fucked&lt;/span&gt; up. I forgot that Vue automatically scopes all styles. And while I may preach until my throat is dry about using &lt;a href=&quot;https://getbem.com/&quot;&gt;BEM&lt;/a&gt; or now &lt;a href=&quot;https://piccalil.li/blog/cube-css/&quot;&gt;CUBE&lt;/a&gt; (shout out to &lt;a href=&quot;https://bsky.app/profile/bell.bz&quot;&gt;Andy&lt;/a&gt;), I hadn’t actually done that on this project and I had overlapping styles out the wazoo.&lt;/p&gt;
&lt;p&gt;I also, for whatever reason in my early career, hadn’t written my styles mobile first. So seeing this opportunity, even though I’d just copied everything over, I lovingly threw all of my styles away. Seriously. &lt;kbd&gt;ctrl&lt;/kbd&gt; &lt;kbd&gt;a&lt;/kbd&gt; &lt;kbd&gt;delete&lt;/kbd&gt; on every &lt;code&gt;.scss&lt;/code&gt; file. My skills have grown, I wanted to code it the most right way I know how at this point. Sometimes the easiest way to do that is to just write it from scratch. I gave everything new class names, went section by section, all mobile first this time, and eventually we got back to looking 1:1 (if not a little cleaner) to the live site.&lt;/p&gt;
&lt;p&gt;Before I called it done, I wanted to create a new /writing page and host all of my own blogs and musings. When I started working on the writing and individual article pages I realized I wanted some navigation and breadcrumbs to be shared across all of the inner pages. Where the links route back to, would need to be different depending on what page you were currently on. This left me with the quandary of - how do I do the breadcrumbs programmatically? My head started spinning a little bit, and although at work that would have felt like an easy peasy problem to solve with setting some state, I didn’t know the “right” way to do it in such a vanilla environment. Until I realized “wait &lt;span class=&quot;swear&quot;&gt;fuck&lt;/span&gt; that. I don’t want to do it programmatically.” What I actually wanted was to write HTML. I know what page it needs to go back to in every instance. So I allowed myself a little not-so-DRY code, included the &lt;code&gt;nav&lt;/code&gt; with a specific &lt;code&gt;href&lt;/code&gt; wherever it was needed, and used CSS to create the shared styles that I wouldn’t have to rewrite over and over again, like it’s so very good at doing. (Almost like someone created it for this???) This was breaking away from the pattern of solutioning I’ve known for so long in this industry, and it’s been really nice to ask myself often along this project - “wait why?” and “do I &lt;em&gt;want&lt;/em&gt; to do it that way still?” Most of the time I found the answer was no, for this little site, the “programmatic” way feels incredibly over-engineered.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;My favorite embarrassing moment  of this project came on the writing page, and I wanted to make sure the article cards were accessible following &lt;a href=&quot;https://inclusive-components.design/cards/&quot;&gt;Inclusive Design&lt;/a&gt;. I needed to add some JavaScript to the project - by way of adding an event listener to the document. And suddenly my head began to spin once more. How on earth do I get JS into the project?? Reader when I tell you - that all these years of React had me utterly and completely forgetting about &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt;  tags. To say I was embarrassed is an understatement.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;https://bryn.codes/writing/vue-to-11ty/#fn2&quot; id=&quot;fnref2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt; It is my dearest hope that this saves one of you. I created a new folder called &lt;code&gt;js&lt;/code&gt; and a file &lt;code&gt;clickableCards.js&lt;/code&gt; with my &lt;code&gt;addEventListener&lt;/code&gt; logic etc. I also invoked that function on &lt;code&gt;DOMContentLoaded&lt;/code&gt; in the same file because it seemed the easiest place to keep the logic together and clean. Then I added another addPassthroughCopy and addWatchTarget in the &lt;code&gt;eleventy.config.js&lt;/code&gt;. And finally in the &lt;code&gt;index.njk&lt;/code&gt; (or &lt;code&gt;layout.njk&lt;/code&gt; if you end up using those like I eventually did) added a script tag to use that JS file.&lt;/p&gt;
&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;script&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/js/clickableCard.js&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token script&quot;&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;small&gt;layout.njk&lt;/small&gt;&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;This was the real point where I felt I could “soft launch” the Vue to Eleventy swapped site. But of course, development is never that simple. I had an idea for a cute animation to add in… I wanted to add a /now page… I thought I might rewrite some content and change the designs up… And so the to-do list that was almost done of “simplifying my site” started growing again instead. As a developer is wont to do. Though at least the tech stack, really is simpler this time.&lt;/p&gt;
&lt;p&gt;But the best part about having your own personal website? If I want to keep changing it and adding to it and taking away from what I no longer like - I simply can :) One of the best parts of this industry is iteration. We should never have to flinch away from change or updates in this world. And while you’re reading this on what is, now, the launched revamp of my site supported by Eleventy, the next time you come back it could be a little different again. That’s what is so beautiful about the simplicity of the web, my friend. It can be an ever-changing &lt;a href=&quot;https://maggieappleton.com/garden-history/&quot;&gt;little garden&lt;/a&gt; online.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;I would be remiss if I didn’t end this article with an especially big thank you to &lt;a href=&quot;https://bsky.app/profile/strange.website&quot;&gt;Henry Desroches&lt;/a&gt;. He was the one that put the worm in my ear about a redesign (as well as designed the original site back in 2019), but he also introduced me to Eleventy, shared code snippets and tips, answered a million &lt;s&gt;stupid&lt;/s&gt; questions when I got confused, and kept wonderful company over many hours and many a coffee shop ensuring I had an empathetic listening ear when I lost motivation or got stuck. He’s an invaluable resource, expert in this industry, and mostly I’m just grateful to call him my friend.&lt;/p&gt;
&lt;p&gt;Thanks so much for following along my little uplift journey and feel free to take a look &lt;a href=&quot;https://github.com/bryn-newell/vanilla-portfolio-revamp&quot;&gt;at the code&lt;/a&gt; itself. If there’s any corrections or questions you’d like to pose, please feel free to bang my line via &lt;a href=&quot;https://bsky.app/profile/bryn.codes&quot;&gt;Bluesky&lt;/a&gt; or &lt;a href=&quot;mailto:bryn.codes@gmail.com&quot;&gt;email&lt;/a&gt;!&lt;/p&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;please note this thank you is ironic &lt;a href=&quot;https://bryn.codes/writing/vue-to-11ty/#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn2&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;Henry didn’t even laugh at me when he reminded me how to do this over a literal phone call. &lt;a href=&quot;https://bryn.codes/writing/vue-to-11ty/#fnref2&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</description>
      <pubDate>Sat, 01 Mar 2025 00:00:00 GMT</pubDate>
      <dc:creator>Bryn Newell</dc:creator>
      <guid>https://bryn.codes/writing/vue-to-11ty/</guid>
    </item>
    <item>
      <title>on trying to appreciate winter</title>
      <link>https://bryn.codes/writing/on-trying-to-appreciate-winter/</link>
      <description>&lt;h2 class=&quot;leMurmure center&quot;&gt;I&lt;/h2&gt;
&lt;p&gt;today I realized not everything is brown.&lt;br&gt;
if you look&lt;br&gt;
not glance&lt;br&gt;
the foothills are sage&lt;br&gt;
just the kind that’s still being kept a secret&lt;/p&gt;
&lt;br&gt;
&lt;h2 class=&quot;leMurmure center&quot;&gt;II&lt;/h2&gt;
&lt;p&gt;&amp;quot;everything is dead,&lt;br&gt;
it’s nothing but a sheet of grey&amp;quot;&lt;br&gt;
but that’s not strictly true is it?&lt;br&gt;
the scrub brush is whispering about the undertones of moss&lt;br&gt;
and their cerulean veins are waiting to be scratched free&lt;br&gt;
of its warm, dusty bark&lt;/p&gt;
&lt;br&gt;
&lt;h2 class=&quot;leMurmure center&quot;&gt;III&lt;/h2&gt;
&lt;p&gt;one of the best parts about living in colorado is that conifer trees never lose their leaves&lt;br&gt;
those evergreen forests holding their name sake and keeping us company through the cold months&lt;br&gt;
but the day after it snows when the sky clears&lt;br&gt;
and before the sun comes back to melt it all off&lt;br&gt;
the tiny little alpine needles become illustrious&lt;br&gt;
a color that doesn’t exist on its own,&lt;br&gt;
tiny little drops of magic winking in the light&lt;br&gt;
the combination of elements&lt;br&gt;
alchemy&lt;/p&gt;
&lt;br&gt;
&lt;h2 class=&quot;leMurmure center&quot;&gt;IV&lt;/h2&gt;
&lt;p&gt;snow on the flatirons is a different kind of gift&lt;br&gt;
it shifts our far fetched auburn vistas into a different climate&lt;br&gt;
we somehow leave the high desert and travel into a wonderland&lt;br&gt;
perhaps one where yule festivals are held year round&lt;br&gt;
where the tinkling of bells and 12 point stags trapse through the woods&lt;br&gt;
suddenly we have that life giving moisture&lt;br&gt;
ready to melt its way into our streams and springs as the sun warms it away.&lt;br&gt;
the way the landscape reaches for new paints, a new palette&lt;br&gt;
matching the temperature of the sky&lt;br&gt;
refreshes me&lt;br&gt;
makes it feel like this place is new.&lt;br&gt;
and being somewhere new means i’m not taking it for granted again&lt;br&gt;
i can stay&lt;br&gt;
just a little longer&lt;/p&gt;
</description>
      <pubDate>Sat, 22 Feb 2025 00:00:00 GMT</pubDate>
      <dc:creator>Bryn Newell</dc:creator>
      <guid>https://bryn.codes/writing/on-trying-to-appreciate-winter/</guid>
    </item>
    <item>
      <title>on heading west</title>
      <link>https://bryn.codes/writing/on-heading-west/</link>
      <description>&lt;h2 class=&quot;leMurmure center&quot;&gt;I&lt;/h2&gt;
&lt;p&gt;I didn’t come up with heading west&lt;br&gt;
it doesn’t belong to me just like the colorado state lines certainly don’t belong to us.&lt;br&gt;
lines that were made up and land that was squandered when realizing how precious it is.&lt;br&gt;
doubling a population with a tuberculosis diagnosis.&lt;br&gt;
but I don’t think it’s the lungs the mountain air cures,&lt;br&gt;
I think it’s the mind.&lt;/p&gt;
&lt;br&gt;
&lt;h2 class=&quot;leMurmure center&quot;&gt;II&lt;/h2&gt;
&lt;p&gt;my mind is a slide show, moving too fast to pick out a single image.&lt;br&gt;
heading west it becomes the minutes that feel like hours, admiring every brush stroke of one of the water lillies in a gallery&lt;/p&gt;
&lt;p&gt;in town it’s so hot outdoor time doesn’t start until 8pm or else your shirt is damp with sweat in minutes.&lt;br&gt;
heading west is fingers starting to chill and a bandana to keep the hair tame while refusing to roll up the windows from the cool breeze&lt;/p&gt;
&lt;p&gt;a destination is usually a fixed point on a map.&lt;br&gt;
heading west makes “we have arrived” an active verb that means dirt being kicked up under lazy mountain tries&lt;/p&gt;
&lt;p&gt;heading west is pulling over because I thought I saw something pretty&lt;/p&gt;
&lt;p&gt;heading west is&lt;br&gt;
  “do you hear that?”&lt;br&gt;
  “what?”&lt;br&gt;
  “nothing.”&lt;/p&gt;
&lt;p&gt;heading west is bringing two camp chairs&lt;br&gt;
just in case there’s company to be found around the campfire&lt;/p&gt;
&lt;p&gt;“I haven’t done this since I was a kid”&lt;br&gt;
heading west is remembering the joy of nature still belongs to you&lt;/p&gt;
&lt;p&gt;heading west is realizing She has always been right there waiting for you to remember that you’re a part of her&lt;/p&gt;
&lt;p&gt;heading west is “don’t forget your raincoat”,&lt;br&gt;
a forecast of nothing but blue skies,&lt;br&gt;
and thunder to lull you to sleep anyway&lt;/p&gt;
&lt;p&gt;heading west is sitting in a hammock for so long the aspen trunks change from white to pale cream to a subdues tan painted over a base of green as the sun jogs across the sky&lt;/p&gt;
&lt;p&gt;heading west is	“are you going to bed?”&lt;br&gt;
  “well it’s dark out”&lt;br&gt;
and&lt;br&gt;
  “we’re awake so early”&lt;br&gt;
  “well the sun is up”&lt;/p&gt;
&lt;p&gt;heading west is&lt;br&gt;
  shorts&lt;br&gt;
  pants on&lt;br&gt;
  sweater on&lt;br&gt;
  sweater off&lt;br&gt;
  sweater on&lt;br&gt;
  socks on&lt;br&gt;
  back to barefoot&lt;br&gt;
  back to shorts&lt;br&gt;
  sweater off&lt;br&gt;
  sweater on&lt;br&gt;
  pants on&lt;br&gt;
  socks on&lt;br&gt;
  boots on&lt;br&gt;
  raincoat on&lt;br&gt;
  everything off&lt;/p&gt;
&lt;p&gt;heading west is smiling and waving at the few souls you do pass,&lt;br&gt;
because clearly a common spirit lives in us both&lt;/p&gt;
</description>
      <pubDate>Thu, 25 Jul 2024 00:00:00 GMT</pubDate>
      <dc:creator>Bryn Newell</dc:creator>
      <guid>https://bryn.codes/writing/on-heading-west/</guid>
    </item>
    <item>
      <title>A Request to Stop Saying “Accessibility Is Hard”</title>
      <link>https://bryn.codes/writing/accessibility/</link>
      <description>&lt;p&gt;It’s not. Just learn it. The end.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Just kidding. That’s not very empathetic of me...&lt;/p&gt;
&lt;p&gt;But seriously, this is a request to please give accessibility like 5% more of your attention. I know you care about other people and you care about your content reaching as many others as possible. On top of that, I truly believe this is a part of your job, whatever type of web related work you do, so let’s learn how to tackle it well together!&lt;/p&gt;
&lt;p&gt;First off, if you’re struggling initially with caring about implementing accessibility into your work, may I first suggest a brief shift in mentality? I believe it will make your teams’, your clients’, and your users&#39; lives better!&lt;/p&gt;
&lt;p&gt;What if I told you there were a few simple ways to gain some free advertising, improve SEO, and build your client base?&lt;/p&gt;
&lt;p&gt;Or save time and resources on development and post-launch bug fixes to allocate them to more important or more exciting new projects?&lt;/p&gt;
&lt;p&gt;What about saving your company money and preventing bad PR from a future lawsuit?&lt;/p&gt;
&lt;p&gt;How, you might ask?&lt;/p&gt;
&lt;p&gt;Accessibility!!&lt;/p&gt;
&lt;p&gt;Alright Bryn, I hear you, you’re clearly very heated about this subject and you’ve been throwing that word around a lot now - but what does it even actually mean? And how do I make it not suck?&lt;/p&gt;
&lt;p&gt;Well I’m gonna let the experts explain it best -&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;“Accessibility is the practice of making your websites usable by as many people as possible. We traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;You might also think of accessibility as treating everyone the same, and giving them equal opportunities, no matter what their ability or circumstances. Just as it is wrong to exclude someone from a physical building because they are in a wheelchair (modern public buildings generally have wheelchair ramps or elevators), it is also not right to exclude someone from a website because they have a visual impairment. We are all different, but we are all human, and therefore have the same human rights.” - &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/What_is_accessibility&quot;&gt;Mozilla Developer Network&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;So you get it, right? It’s basically making sure that anyone, in any circumstance, disability or not, permanent or temporary, can get the same information from and interact with your stuff in an equivalent manner. It’s not going to be exactly the same experience, just making sure that everyone has access to the beautiful product that you have produced!&lt;/p&gt;
&lt;p&gt;Sounds pretty great right?&lt;/p&gt;
&lt;p&gt;But I get it. Maybe you’ve had an experience with an old site needing to be completely uplifted and overhauled to meet AA standards. And maybe it wasn’t even your project or your company’s application to begin with. I hear you. That IS tough! It takes a lot of trial and error and tweaking and frustration. But I promise you it’s not without its rewards. And - do you know how we can prevent these annoyances in the future?&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Build new projects the right way, the first time, with accessibility in mind.&lt;/strong&gt;&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;So what are these standards we have to meet anyway? Well it depends on where you live, where the users that your project is serving live, and what kind of work it is. There’s different laws existing already or coming very soon all over the world. But in general, &lt;a href=&quot;https://www.w3.org/WAI/standards-guidelines/wcag/&quot;&gt;WCAG&lt;/a&gt; (The Web Content Accessibility Guidelines) created by W3C (The World Wide Web Consortium) is the way to go. At time of writing this article there are two WCAG Standards to follow as a ‘ruleset’, &lt;a href=&quot;https://www.w3.org/TR/WCAG20/&quot;&gt;2.0&lt;/a&gt; and &lt;a href=&quot;https://www.w3.org/TR/WCAG21/&quot;&gt;2.1&lt;/a&gt;. There are also testable success criteria for each guideline they set out at three levels, A, AA, AAA. In my experience AA is what’s commonly sought after as “a pass”.&lt;/p&gt;
&lt;p&gt;The great news is that HTML 5, when used semantically, does like 90% of the work for you. Start there. When you need a button, use &lt;code&gt;&amp;lt;button&amp;gt;&lt;/code&gt;, not &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt;, and style it accordingly (rant about CSS for another time…) Use the elements like &lt;code&gt;&amp;lt;footer&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;aside&amp;gt;&lt;/code&gt;, and &lt;code&gt;&amp;lt;nav&amp;gt;&lt;/code&gt; that HTML 5 was kind enough to add.&lt;/p&gt;
&lt;p&gt;What about unique content Bryn? Like modals, carousels, and select dropdowns that need to look nicer than browser implemented styles? Good question, reader! For that I direct you to &lt;a href=&quot;https://www.w3.org/WAI/standards-guidelines/aria/&quot;&gt;WAI-ARIA&lt;/a&gt;! The Accessible Rich Internet Applications (ARIA) suite of web standards, that came out of the Web Accessibility Initiative (WAI… lots of acronyms I know…) It’s basically a bunch of helpful roles and properties and such that help with “dynamic content and advanced user interface controls” - aka your fun custom stuff!&lt;/p&gt;
&lt;p&gt;And here, I even got you &lt;a href=&quot;https://www.w3.org/WAI/standards-guidelines/aria/&quot;&gt;this cheat sheet&lt;/a&gt;, from WAI-ARIA themselves, to help you accessibly build a handful of the most common components.&lt;/p&gt;
&lt;p&gt;There are so many tools out there - such as pre-built accessible UI libraries, for whatever your favorite framework may be, and browser extensions to help you audit your site and learn what needs to be updated. I’ll put a list of a handful of my favorites in the notes below.&lt;/p&gt;
&lt;p&gt;So you got this! I believe in you. Let’s make the internet a more accessible place. Let’s boost your user base, lower your bounce rate, and provide a better experience to your users overall. I hope I’ve provided a little extra motivation for you and some context on where to begin.&lt;/p&gt;
&lt;p&gt;Feel free to get in touch if you have any favorite tool suggestions to add to this list or if you have questions on where to begin!&lt;/p&gt;
&lt;hr&gt;
&lt;h2&gt;Tools &amp;amp; Resources:&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://www.deque.com/axe/beta/&quot;&gt;axe Beta&lt;/a&gt; - my new favorite addition to the accessibility tool world
&lt;a href=&quot;https://developer.chrome.com/docs/lighthouse/overview&quot;&gt;Lighthouse&lt;/a&gt; - automated audits for performance, accessibility, progressive web apps, SEO, and more
&lt;a href=&quot;https://www.a11yproject.com/&quot;&gt;The a11y project&lt;/a&gt;
&lt;a href=&quot;https://wave.webaim.org/&quot;&gt;WAVE&lt;/a&gt;
&lt;a href=&quot;https://www.tpgi.com/arc-platform/arc-toolkit/&quot;&gt;ARC toolkit&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;Sources:&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility&quot;&gt;https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.w3.org/WAI/standards-guidelines/wcag/&quot;&gt;https://www.w3.org/WAI/standards-guidelines/wcag/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://a11yproject.com/&quot;&gt;https://a11yproject.com/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.ada.gov/pcatoolkit/chap5toolkit.htm&quot;&gt;https://www.ada.gov/pcatoolkit/chap5toolkit.htm&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.huntonlaborblog.com/2019/01/articles/public-accommodations/muddy-waters-ada-website-compliance-may-become-less-murky-2019/&quot;&gt;https://www.huntonlaborblog.com/2019/01/articles/public-accommodations/muddy-waters-ada-website-compliance-may-become-less-murky-2019/&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;Notes:&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/What_is_accessibility&quot;&gt;From MDN -&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&amp;quot;Building accessible sites benefit everyone:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Semantic HTML, which improves accessibility, also improves SEO, making your site more findable.&lt;/li&gt;
&lt;li&gt;Caring about accessibility demonstrates good ethics and morals, which improves your public image.&lt;/li&gt;
&lt;li&gt;Other good practices that improve accessibility also make your site more usable by other groups, such as mobile phone users or those on low network speed. In fact, everyone can benefit from many such improvements.&lt;/li&gt;
&lt;li&gt;Did we mention it is also the law in some places?&amp;quot;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://www.a11yproject.com/about/&quot;&gt;From the a11y project&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&amp;quot;Why accessibility is important:&lt;/p&gt;
&lt;p&gt;Blind and visually impaired makeup 285,000,000 people according to the World Health Organization (June 2012) with 39,000,000 categorized as legally blind and the remaining 246,000,000 visually impaired. Deaf and hearing impaired makeup 275,000,000 (2004) in the moderate-to-profound hearing impairment category.&lt;/p&gt;
&lt;p&gt;To put these in perspective, the population of the United States of America is 315,000,000 (January 2013).
Disabilities can also be conditional. A broken arm, a loud restaurant, harsh glare, not speaking the local language—all are examples where someone may benefit from accessible practices.&amp;quot;&lt;/p&gt;
</description>
      <pubDate>Wed, 24 Jun 2020 00:00:00 GMT</pubDate>
      <dc:creator>Bryn Newell</dc:creator>
      <guid>https://bryn.codes/writing/accessibility/</guid>
    </item>
    <item>
      <title>From One Non-Expert to Another — Learning What I Didn’t Know I Didn’t Know</title>
      <link>https://bryn.codes/writing/non-expert/</link>
      <description>&lt;p&gt;My story is one you may have heard a few times — I went to school to study one thing, started doing that thing, stopped doing that thing, became motivated to learn how to code, stopped doing the first thing, and then went searching for a place that could teach me how to do the new thing (coding) instead. Now here I am in the midst of it all, still learning and starting out my shiny new career path as a software developer!&lt;/p&gt;
&lt;p&gt;Near the end of 2018, I was accepted to the Techtonic Apprenticeship program and my love for coding quickly took off. However, starting a career in software development still seemed miles away. I have a handful of close friends in the tech industry who have been “doing the thing” for quite a bit longer than me. Looking at their work, I often found (and still find) myself intimidated and believe them to be absolute geniuses when it comes to code. They produce the kind of side-projects and warm-up challenges that I (initially) couldn’t even dream of doing. These friends, that I am so grateful for, encourage and motivate me to be better, to learn faster, and challenge me to do things I didn’t think I could do. The community I’ve surrounded myself with, whether they know it or not, has made me a smarter, stronger developer. I can feel myself becoming more confident in my work and in my quality of code because of them.&lt;/p&gt;
&lt;p&gt;I’m still very new to this world of software development. I’ve been coding for about ten months now — that is not a long time. And this is a MASSIVE field. Even the most brilliant developers who create the frameworks and languages we all work in every day, &lt;a href=&quot;https://overreacted.io/things-i-dont-know-as-of-2018/&quot;&gt;don’t know everything about code&lt;/a&gt;. It’s impossible. There is just too much knowledge out there. But between the community I’ve surrounded myself with and the incredible companies I’ve had the opportunity to work for — I think I’ve picked up a few pieces of valuable information. So with all that in mind…&lt;/p&gt;
&lt;p&gt;I would love to share with you my two cents for learning (the sometimes very intimidating field of) software development from the ground up when you completely 180° your life and career :)&lt;/p&gt;
&lt;hr&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;Start with one language/theory of development. (JavaScript/OOP is where I began). Take a serious amount of time and dedicate yourself to truly understanding the basics. There’s no need to rush in the beginning. The more time you spend practicing and really soaking yourself in the core concepts of your first language, the more success you will have when you try to broaden your skills.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Pair program on something challenging with a friend, or have a peer who might know a little bit more than you review your code. Even if your code runs, there may be a better way to do things. Learning best practices or even just ways to make life easier is one of the biggest things I’ve learned from my mentors. If you don’t have anyone in your immediate physical vicinity that can help you with this, the internet is a magical place with &lt;a href=&quot;https://learntocodewith.me/posts/coding-mentor/&quot;&gt;tons of opportunity to find a mentor&lt;/a&gt;.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Explain your code to someone who knows nothing about programming. Trying to explain to my mother what the hell I was doing all day and how a couple lines of nonsense put my name and face on a basic html portfolio site was one of the best ways I solidified my understanding of how stuff works under the hood.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Take a break. There’s a massive (toxic, in my opinion) culture of “the side hustle” and “work overtime on your hobbies and passions” attitude going around society right now. Let me tell you something — if you work an 8-hour day staring at a computer, then go home and try to do a personal project, and then try to take an extra online course on the weekend, you WILL get burnt out. Learning takes time. A LOT of time. Now don’t get me wrong, absolutely dedicate as much time as you can learning this new thing. And, yes, do fun side projects in your free time if you want. But your brain needs time to rest and absorb everything you’re learning. You need a break to see your friends and get some sunlight. I have solved some of my most difficult coding problems by walking away from my desk and going outside to take a lap around the building. I’ve woken up more times than I can count with a perfectly clear idea of how to get around a challenge I spent hours on the day before just banging my head against the wall. This stuff is hard. Your brain needs to rest.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Find a way to make it fun! &lt;a href=&quot;https://codepen.io/challenges&quot;&gt;Codepen challenges&lt;/a&gt;, code golf, or building the most annoying website I can possibly think of are some of the best ways to cure burnout and rekindle your love for coding again. This doesn’t have to be your dream job or even your ~passion~. But I do hope that you can find the little joys in your day and enjoy pieces of content that make doing this as your job even more enjoyable and exciting.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Find a program or an apprenticeship or a Bootcamp or whatever it is that works for YOU! I spent so many years worrying about whether or not I was following the “correct” path or if I was “adulting the right way”. I’m gonna tell you a little secret. There’s no such thing !!! Those friends who are crazy talented that I mentioned earlier — not a single one of us took even a vaguely similar path to get where we are today. We have different learning styles, different personalities, and different financial resources and needs. Everyone has a different and unique story, and while something may have worked for them, it may not work for you. That’s perfectly okay. In fact, it’s great. That kind of diversity and difference of backgrounds and journeys is what makes tech a stronger and more inclusive community&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;hr&gt;
&lt;p&gt;So wherever you are along this journey of learning how to code, I thank you for being a part of it. This community can be so welcoming and motivating to those of us just starting out. I encourage you to at all times keep a growth mindset. And remember, there is ALWAYS more to learn and more ways to grow.&lt;/p&gt;
&lt;p&gt;Thanks for reading and feel free to reach out anytime! I would love to hear about your experiences, favorite resources, or just connect with you in general. You can find me on twitter and join me in creating a supportive, fun, and driven community of people who want to learn and grow together! We got this :)&lt;/p&gt;
</description>
      <pubDate>Sat, 19 Oct 2019 00:00:00 GMT</pubDate>
      <dc:creator>Bryn Newell</dc:creator>
      <guid>https://bryn.codes/writing/non-expert/</guid>
    </item>
  </channel>
</rss>