<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
	<title>Home of Todd Libby</title>
	<subtitle>Occasional writings with a splash of tech.</subtitle>
	<link href="https://toddl.dev/feed/feed.xml" rel="self"/>
	<link href="https://toddl.dev/"/>
	<updated>Thu Jan 22 2026 00:00:00 GMT+0000 (Coordinated Universal Time)</updated>
	<id>https://toddl.dev/</id>
	<author>
		<name>Todd Libby</name>
		<email>toddlibby@protonmail.com</email>
	</author>
	
	<entry>
		<title>An Event Apart 2008 - Wrap-up Edition</title>
		<link href="https://toddl.dev/posts/an-event-apart-boston-2008/"/>
		<updated>Thu, 01 May 2008 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/an-event-apart-boston-2008/</id>
		<content type="html">&lt;h3 id=&quot;preface&quot; tabindex=&quot;-1&quot;&gt;Preface&lt;/h3&gt;
&lt;p&gt;This is a super fanboy-ish post, but it is (100%) in its original entirety.&lt;/p&gt;
&lt;h3 id=&quot;an-event-apart-2008%2C-boston%2C-ma&quot; tabindex=&quot;-1&quot;&gt;An Event Apart 2008, Boston, MA&lt;/h3&gt;
&lt;p&gt;I’m going to take the time now to really sit down and write a comprehensive post on my experience at An Event Apart that took place this past Monday and Tuesday in Boston. I had been at the ready, saving what I could in time for the event and barely made it out of there with some pocket change. So be forewarned, don’t be frugal like me with little, and remember to bring your credit card and don’t leave home without it. (Where have I heard that before?)&lt;/p&gt;
&lt;p&gt;I started writing this yesterday and have given this more attention again today. I wanted to write a very in-depth post about my experience and maybe “twist an arm” and if someone out there, even if it is one person reads this, goes to an AEA event and then writes back and says it was worth it, then it really was worth taking the extra couple days to write this.&lt;/p&gt;
&lt;h3 id=&quot;off-for-an-adventure&quot; tabindex=&quot;-1&quot;&gt;Off for an adventure&lt;/h3&gt;
&lt;p&gt;I got out of my “9-5” job at 7:30 in the morning, went home, wanted to catch an hour or so of sleep. I caught 30 minutes. So I proceeded to go get ready and left for Boston. Now mind you, I don’t trek out very much with the price of gas and because a third shift job just sucks the will to live and the life force out of you. I did on this day, as I was looking forward to this event.&lt;/p&gt;
&lt;p&gt;So skipping over to when I got to the Marriott (after getting lost in Roxbury and all that good stuff that usually happens when I venture down to Boston) I forget the credit card and start to freak. Calming down the solution was found, all was good, but not after my first impression with Jeffrey Zeldman was probably one of psychotic insanity (if there is such a term.)&lt;/p&gt;
&lt;p&gt;My apologies to Jeffrey Zeldman and the folks at An Event Apart for having a complete and utter meltdown as I had the biggest anxiety attack to date.&lt;/p&gt;
&lt;p&gt;I finally (after 2-3 hours of calls and instructions to fax over information so I could use the credit card) got to relax in the room, on the 34th floor. Big huge bed. BAM! Out like a prizefighter.&lt;/p&gt;
&lt;h3 id=&quot;day-one.-meeting-%26-mingling&quot; tabindex=&quot;-1&quot;&gt;Day One. Meeting &amp;amp; Mingling&lt;/h3&gt;
&lt;p&gt;I meet Jeffrey again, we chat and had lunch together it was great. I got to talk to Bruce Lawson and Eric Meyer for a bit as well during breakfast, things were &lt;strong&gt;A LOT&lt;/strong&gt; better. Went in and sat through the presentations, immersed in them all, mingled during breaks, took photos, had photos taken with speakers.&lt;/p&gt;
&lt;p&gt;One thing. I went up to my room to relax for a few minutes before the Opening Night party… I made the mistake of laying down on the big, huge comfy bed I had… out like a light. Damn.&lt;/p&gt;
&lt;h3 id=&quot;day-two.-more-mingling-%26-me-being-me&quot; tabindex=&quot;-1&quot;&gt;Day Two. More Mingling &amp;amp; Me Being Me&lt;/h3&gt;
&lt;p&gt;Mingling, eating, listening. Asked questions, got a book from Kimberly Blessing, tried to win a copy of Adobe CS3 if I got picked for a website critique from Jeffrey… unfortunately, that didn’t happen and 5 out of 6 of the people were Mac users… Scott Fegette, I will &lt;strong&gt;(GLADLY)&lt;/strong&gt; take a copy of the PC version if you feel the need to get rid of some!&lt;/p&gt;
&lt;p&gt;Of who I met. Everyone was great. I probably came off as a nervous tool, with nothing better to say and with a look like a 16-year-old rock band groupie, wide-eyed and drooling.&lt;/p&gt;
&lt;p&gt;Jeffrey Zeldman, Marci Eversole… made me feel welcomed and hopefully forgot about the fact I was acting like a raving lunatic on Sunday. EDIT: He did not, haha.&lt;/p&gt;
&lt;p&gt;Jeffrey was very accommodating and I had the chance of a lifetime to sit down and have lunch with him and talk and he actually liked the site. Handed me some useful information that I will be working on shortly as well. Autographed his book that I bought for me and we chatted and I kinda stalked him… no, I did. Sorry, Jeffrey!&lt;/p&gt;
&lt;p&gt;Eric Meyer. What can I say? Awed in the presence of another guru I have followed for a long time. very friendly and witty. When I told Bruce Lawson he saved my life with conditional comments, they both joked about how it was so proprietary. After the two kicks in the gut(j/k) I laughed, it was funny and yes, it was a stupid thing to say. I should have gone with, “FIRE!” Yes, Eric, I’d rather have your name in my book rather than oh, let’s say “Julio Iglesias” as your signing.&lt;/p&gt;
&lt;p&gt;Bruce Lawson, friendly chap. Small guy. Him and Jeffrey, both small… or am I just tall (more on that later)? He and I chatted a bit, nice guy, all around. Saved my life with conditional comments, but as Eric Meyer put it, it was proprietary… so I don’t know if that was a good thing to say? Bruce is a friendly guy though, and his site states he prefers Guinness, so any guy who likes Guinness is alright in my book (as it is my preferred beverage in alcoholic nature of choice).&lt;/p&gt;
&lt;h3 id=&quot;the-speakers&quot; tabindex=&quot;-1&quot;&gt;The speakers&lt;/h3&gt;
&lt;p&gt;AAll great and accessible. Although I didn’t ask a lot of questions, I did let the ones I have followed know that I have been a sort of “fan” for a long time. I figured they already had to field all the questions from 500 +/- other attendees. my favorites? All.&lt;/p&gt;
&lt;p&gt;Kimberly Blessing gave me something to shoot for. A Standards Manager job. I also won a book from her and Christopher Schmitt (among other writers)!&lt;/p&gt;
&lt;p&gt;Ethan Marcotte gave me a refreshing way to make sure to communicate between coder and designer (a chore in itself for most of us).&lt;/p&gt;
&lt;p&gt;Jason Santa Maria gave me a new thought on design and presentation. Jason also stirred up the passion I have for typography and his site is amazing!&lt;/p&gt;
&lt;p&gt;Jeffrey Veen made me think of data visualization. Made me re-live 1974 all over again, and how to incorporate users into the user experience. I would have loved to have sat down with him at the bar and had a beer, but I had to leave Boston that night, as I had to get back to my “reality” that is my full-time job. Jeffrey is 6´6˝, taller than me (one of two (Christopher Schmitt being the other) I really got to chat with) I felt short for a change… a very nice guy.&lt;/p&gt;
&lt;p&gt;Jared Spool gave me a new perspective on navigation and the need for clear and conciseness when it comes to users finding their way around a site. He’s also one hell of a speaker and is super hilarious.&lt;/p&gt;
&lt;p&gt;Christopher Fahey gave me insight on style and art direction when it comes to interactive design and to think about form and function.&lt;/p&gt;
&lt;p&gt;Andy Budd opened my mind on user experience. I never thought about using everyday trips to a store or restaurant for example, as a gauge for user experience. Like my trip to an eatery, which I will describe later. One of the people I have looked to and read his books, he’s one of those that have helped me understand CSS a lot better.&lt;/p&gt;
&lt;p&gt;Doug Bowman make me think about scaling. Will a site reach 10 people or 10 million? Is it ready, willing and capable? He also made me think of i18n (A numeronym for Internationalization. 18 letters between ‘i’ and ‘n’). make sure your site is ready for such a throng of an audience.&lt;/p&gt;
&lt;p&gt;Luke Wroblewski made me understand the user experience a lot better. Opened my eyes to what UX and UI is and gave me a peaked curiosity into UX/UI design.&lt;/p&gt;
&lt;p&gt;PPK made me realize that yes, Javascript really is simple and unobtrusive. Explaining it clearly, very clearly.&lt;/p&gt;
&lt;p&gt;Eric Meyer just gave me new ideas on creating my own CSS framework and a reset stylesheet and a better understanding of browser behaviors. He also was very approachable and friendly, taking the time to talk to me just as if we had known each other for a while. One of the people I have followed, it was an honor to be able to just “hang out” and talk. He even signed his own name to the AEA book that we got as a guide to follow.&lt;/p&gt;
&lt;p&gt;and Jeffrey Zeldman gave me the experience of a lifetime. A figure I have been following and admiring for years, not only did he make me feel welcome and having lunch with him was the ultimate honor. Jeffrey showed me that it is alright to let people know what you do and to let you do it. That indeed, the web is not print and that people (some people) need to realize that, that it is alright to say, “This is what I do, let me do it and you will be pleased by the results.”&lt;/p&gt;
&lt;p&gt;I met others like Christopher Schmitt, whom, I had talked to at lunch on Day One. Totally being the space cadet that I am and not realizing it was him who wrote the CSS Cookbook from O’Reilly. I was able to win a copy of “Adapting to Web Standards” so when I get some time I am going to sit down and read it.&lt;/p&gt;
&lt;p&gt;So my experience with meeting people in my chosen career path, my “Yoda’s” if you will. People I have followed and people I will follow and learn from hopefully. Everyone I spoke to that I just listed was absolutely nice, approachable, friendly, and has had or made a huge impact on what I do and will do in web.&lt;/p&gt;
&lt;p&gt;I can’t thank them all enough for what they have done, what they have taught me and for opening my eyes and mind to what they spoke about. Two days of just “talking shop” really has made a difference and gave my batteries a much-needed recharge. I feel like there is so much to do and can be done, hopefully, I can apply what I have learned and make good.&lt;/p&gt;
&lt;p&gt;To anyone thinking of going, even if it is a trip from your area, I suggest you do it. There is no other experience (to date) that I have had that has made such an impact on me personally. I’m not really one for the huge venues, with throngs of people numbering the thousands, but 500 people or so there, it felt more personable and you actually had access to pick the minds and mingle socially with the speakers.&lt;/p&gt;
&lt;p&gt;This is something I will never forget. So thank you all who spoke and were involved in the planning and organizing.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>An Event Apart 2017 - Wrap-Up Edition</title>
		<link href="https://toddl.dev/posts/an-event-apart-boston-2017/"/>
		<updated>Sat, 20 May 2017 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/an-event-apart-boston-2017/</id>
		<content type="html">&lt;h3 id=&quot;an-event-apart-boston-2017%2C-boston%2C-ma&quot; tabindex=&quot;-1&quot;&gt;An Event Apart Boston 2017, Boston, MA&lt;/h3&gt;
&lt;p&gt;Well, I finally have some free time to sit down and collect my thoughts about the past couple of weeks that have been a whirlwind of activity. Here, however, is the wrap-up for An Event Apart that took place this past Monday through Wednesday.&lt;/p&gt;
&lt;p&gt;So without going into painfully long and exhaustingly minute detail, here’s the quick rundown, or as quick as I can relay the conference to any readers out there.&lt;/p&gt;
&lt;h3 id=&quot;day-one.-kickoff&quot; tabindex=&quot;-1&quot;&gt;Day One. Kickoff&lt;/h3&gt;
&lt;p&gt;Jeffrey Zeldman leads the conference off with “From Research to Redesign: An Unexpected Journey”. Talking about how design begins with the product, in the example he chose, was engagement rings. In my case, at my work, it is a web application that our clients use for automatic payroll deduction.&lt;/p&gt;
&lt;p&gt;Data, people, patterns, how to use your site to convey to visitors what your product is and how to do it clearly. Similarities to his talk and what I am undertaking at my work were strikingly parallel to each other.&lt;/p&gt;
&lt;p&gt;Jaimee Newberry followed with The Art &amp;amp; Soul of Selling. This talk helped me in many crucial ways. I was glad to have been there for this one. Her 12 “Check Yourself Checkpoints” were fantastic. She touched on emails, word choices, and speaking with confidence that I had struggled to do in my entire professional career.&lt;/p&gt;
&lt;p&gt;“Be Specific Immediately”, “Don’t Be A Jerk”, “Follow Up”. Some of the points she touched on. Especially the being specific immediately and word choices. Now I can take these, shorten my lengthy emails, with clear and concise emails that get the point across to our clients immediately.&lt;/p&gt;
&lt;p&gt;Instead of “Well, I can look into this issue, but I’m not sure what the issue could be, it may consist of a number of things that I would have to look at.” I can now shorten that to, “I will look into this.” Simple as that.&lt;/p&gt;
&lt;p&gt;Brad Frost then came up to the podium and spoke about the collaboration with others when working in teams. Mission statements and company values. I work with others, so this came in handy.&lt;/p&gt;
&lt;p&gt;What was touched on next, I found more intriguing and very useful. Brand style guides, code style guides, voice and tone style guides. Creating a design system at work. These are so very invaluable to me. More on research and priorities. Design principles.&lt;/p&gt;
&lt;p&gt;I joked around when I thanked Brad for his talk, I told him he, “helped me exponentially broaden my bookmarks about 100X with all the great links to tools and examples, as well as things he has been working on.” There was a ton of information, notes, links and ideas I took away from Brad’s talk.&lt;/p&gt;
&lt;p&gt;I’ll leave out the bees, I went Twitter happy with that gif I think. Nah, unleash the bees!&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/an-event-apart-boston-2017/Brad%20Frost&quot; class=&quot;twitter-tweet&quot;&gt;This was still the best from Day One from &lt;a href=&quot;https://twitter.com/brad_frost?ref_src=twsrc%5Etfw&quot;&gt;@brad_frost&lt;/a&gt; &lt;a href=&quot;https://twitter.com/hashtag/aeabos?src=hash&amp;amp;ref_src=twsrc%5Etfw&quot;&gt;#aeabos&lt;/a&gt; &lt;a href=&quot;https://t.co/tcOxG1lmAn&quot;&gt;pic.twitter.com/tcOxG1lmAn&lt;/a&gt;&lt;p&gt;&lt;/p&gt;&amp;mdash; Todd (@toddlibby) &lt;a href=&quot;https://twitter.com/toddlibby/status/864309047226503172?ref_src=twsrc%5Etfw&quot;&gt;May 16, 2017&lt;/a&gt;&lt;/blockquote&gt;
&lt;p&gt;Dan Mall came on after Brad to discuss Gantt charts. No, actually it was about strategy with the design and development process. Collaboration, Should designers code? Should developers design? If they don’t, then it’s okay.&lt;/p&gt;
&lt;p&gt;He spoke about CSS briefly, did a quick, “how-to” for folks that did not know CSS or how to code it, talked about tools, the 8-point grid and a host of other small topics that I found useful.&lt;/p&gt;
&lt;p&gt;I think I may have asked a question very much way off-topic to what he had spoken about regarding clients/bosses and their penchants for “this is not the same color I see on my phone as it is here on your computer” when you copied the hex code as it was… I guess my question had to do with the process, so I may have not been as far off as I thought.&lt;/p&gt;
&lt;p&gt;First-time speaker Laura Martini was next and gave a great talk about “Designing the Right Thing”. Designing needs for the business, the user and yourself. The HEART framework (Happiness, Engagement, Adoption, Retention, and Task Success).&lt;/p&gt;
&lt;p&gt;Laura dove into the NPS, CSAT, and CES scoring systems, do’s and don’t(s), tools and research. She gave a great talk for her first at An Event Apart and it helped me out and gave me some invaluable information.&lt;/p&gt;
&lt;p&gt;Chris Coyier, the guy (or one of the people) behind CodePen and CSS-Tricks finished off the first day with a talk on SVG. Something I have been reading about, looking into, and trying to adopt for what seems like ages. Of course, I spaced at the fact I sat and had lunch at his table one afternoon. That&#39;s where my head was…&lt;/p&gt;
&lt;p&gt;I’m basically going to leave this at, why wasn’t I using SVG more often on the projects I had done Chris wrapped up the day nicely and I had a ton of notes to take with me, go over and bring back some great ideas to work. The day was a long one, but the information up to this point from all the speakers was phenomenal.&lt;/p&gt;
&lt;h3 id=&quot;day-two.-the-code-block&quot; tabindex=&quot;-1&quot;&gt;Day Two. The Code Block&lt;/h3&gt;
&lt;p&gt;Val Head spoke about “Animation in Design Systems and Process”. Communication, storyboards, and sketches. Motion comps, interactive prototypes. Tools to use when you’re creating things of the animated nature!&lt;/p&gt;
&lt;p&gt;Defining your brand. Brand &amp;amp; Experience Pillars, Voice &amp;amp; Tone, building animation guidelines. Documenting your decisions, durations, easing values and a host of other tidbits in the animation design and documentation process that really gave me ideas for the redesign of the company site I work for. Thanks for the time to chat with you Val!&lt;/p&gt;
&lt;p&gt;Rachel Andrew and Jen Simmons followed. What they both spoke about, the CSS Grid Layout, was the meat and potatoes of what I went to the conference for. Rachel spoke about the browser history briefly, how Firefox, Chrome, Safari, and Opera all adopted the CSS Grid support in their respective browsers. IE had yet to support it fully.&lt;/p&gt;
&lt;p&gt;Rachel spoke about the Grid layout and showed some code examples, a great example was a magazine layout she built in front of all us attendees. Rachel also touched on Media Objects, auto as &lt;code&gt;flex-basis&lt;/code&gt; and &lt;code&gt;minmax()&lt;/code&gt; as well as Feature Queries to name a few. An eye-opening look into what I had been questioning myself for since I was hired at the company I work for. An incredible talk that was.&lt;/p&gt;
&lt;p&gt;Jen followed touching on the web when it first came out to the public, table-based layouts, and the evolution up to all the different sized mobile devices used these days.&lt;/p&gt;
&lt;p&gt;Grid systems, frameworks, all the different tools we see to help us build magazine style-layouts and column framework systems. Then unleashing the best thing I heard yet that day… CSS Grid also uses &lt;strong&gt;rows&lt;/strong&gt; as well as columns!&lt;/p&gt;
&lt;p&gt;Needless to say… things happened in my head… Mind Blown!&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;img class=&quot;content__image&quot; src=&quot;https://media.giphy.com/media/xT0xeJpnrWC4XWblEk/giphy.gif&quot; alt=&quot;Tim &amp; Eric mind blown gif&quot; /&gt;
&lt;/div&gt;
&lt;p&gt;Jen went into a little about CSS Grid layouts (which I will get to soon. If you have read this far… you’re a trooper) but the meat and potatoes of this was in the third day, A Day Apart. Touched on tracks not having to be the same size, content sized by the size of a track, tracks sized by the content, the viewport, storyboards, overlap, framing, white space, verticality, flexibility and creativity.&lt;/p&gt;
&lt;p&gt;Eric Meyer stepped up and spoke about “Design for Real Life”.&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/an-event-apart-boston-2017/Eric%20Meyer&quot;&gt;When you design for interaction, you’re creating abstract rules to take unknown content and organize it in an unknown medium for presentation to unknown people who have largely unknown personal contexts.&lt;/blockquote&gt;
&lt;p&gt;The example Eric used, was Facebook. Facebook and their “On This Day” to be exact. People have things that happen in their lives that they really want to leave behind in the grieving process, Well, “On This Day” does not allow for that to happen. OTD brings up painful memories for people. Eric &amp;amp; myself included.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1585002454/images/onthisday_ablvla.jpg&quot; data-src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1585002454/images/onthisday_ablvla.jpg&quot; alt=&quot;Example of Facebook filter for On This Day&quot; /&gt;
    &lt;figcaption&gt;Now Facebook allows users to go in and filter people or dates.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;It brought me back to when I remember reading his book, “&lt;em&gt;CSS: The Definitive Guide&lt;/em&gt;”, following him closely as I could in the CSS Working Group and wherever I could as he was (and still is) one of the most influential people in my life that brought me to my career path.&lt;/p&gt;
&lt;p&gt;I remember when I read the In Memoriam page, wanting to say something, not sure if he would read it, not sure if there was anything I could say that hadn’t been said already.&lt;/p&gt;
&lt;p&gt;I follow him because of the work he does in the field that I love. I was fortunate to be able to sit with Eric during lunches and the last day for a bit. Though not a huge talker, not wanting to interrupt anyone, not wanting to feel like a nuisance.&lt;/p&gt;
&lt;p&gt;The first time I saw, met and heard Eric was in Boston in 2008. It was like catching up with a friend. I enjoyed the time he gave me and appreciated it. Through his rough time, I saw a man who kept going in his professional life. This led me to not give up, this led me to keep fighting the fight daily. His strength during one of the worst times a parent could ever live through made me realize my small, luxury problems were just that, insignificant and petty. Eric is a power of example to me.&lt;/p&gt;
&lt;p&gt;Anyway, the other examples were of Pokemon Go. When people were walking in front of cars, on private property, crossing the border into Canada… warning modals stating that users need to be careful and stay alert when playing the game.&lt;/p&gt;
&lt;p&gt;Instances where A tweet by Juliana Hatfield with a track on it was flagged by Twitter for having her track in it, the “Cheatin’uh?” error that was (and still is?) on WordPress and had a seven (yes, SEVEN) year support thread going.&lt;/p&gt;
&lt;p&gt;Jason Grigsby then came on and spoke on “The Case for Progressive Web Apps”. Some of his points he touched on were the case between mobile web versus native apps, what is a PWA? and much more.&lt;/p&gt;
&lt;p&gt;Not every customer or potential customer will install your native app, how people just stop using apps after a day, a week, or a month. You should provide a secure site or app for your web customers. Providing a fast experience for your users just to name a few.&lt;/p&gt;
&lt;p&gt;So if my company decides to roll out an app (which is highly doubtful at this time) then I have this to fall back on and use. “Not all users will add your web app to their home screen”. Our dependence on a mobile app is probably nil, but we do have a web app accessible through a browser.&lt;/p&gt;
&lt;p&gt;I take this info and store it so I can access it and at some point, there may be a mobile app of some sort?&lt;/p&gt;
&lt;p&gt;To wrap the second day up, Josh Clark, who in my opinion, gave me a lot to think about, which is okay. I could use the challenge!&lt;/p&gt;
&lt;p&gt;Josh touched upon machine learning, pattern processing, personal data, image recognition, language and speech recognition. Artificial Intelligence (AI). Some of which made me think, especially the fact that if you type something to post on Facebook, that for instance, may be angry, and erase it because you don’t want people to think you’re going to go out on a murder spree… Facebook retains that data and you don’t even know it!&lt;/p&gt;
&lt;p&gt;I was taken back by that little revelation.&lt;/p&gt;
&lt;p&gt;Alexa ordering dollhouses when people that watched a newscast and had their Amazon Echo on, when the newscaster said, “Alexa, order me a dollhouse”.&lt;/p&gt;
&lt;p&gt;The invasive Burger King ad that triggered Google Home devices and a parrot that placed an order on an Amazon Echo because the Echo cannot tell if it is a parrot or human talking.&lt;/p&gt;
&lt;p&gt;Google’s “Featured” snippets. Josh touched on accuracy over speed, allow for ambiguity, adding human judgment, embracing multiple systems, make it easy to contribute data and some other topics.&lt;/p&gt;
&lt;p&gt;Some shocking examples. I don’t remember the gentlman’s name, but he is of Asian heritage, and his photo did not meet the criteria of a site because it stated… “Subject eyes are closed”.&lt;/p&gt;
&lt;p&gt;Google tagging blacks as “Gorillas”, Microsoft’s failed “Tay” who went from excitable teen to white supremacist in 0.4 seconds. Or possibly the worst case of machine bias was this…&lt;/p&gt;
&lt;p&gt;The talk from Josh was incredibly eye-opening and valuable as I look at data differently now. Carefully thinking of how we, at my work, present our data. He ended Day Two in stellar fashion.&lt;/p&gt;
&lt;h3 id=&quot;day-three.-a-day-apart&quot; tabindex=&quot;-1&quot;&gt;Day Three. A Day Apart&lt;/h3&gt;
&lt;p&gt;Jen Simmons. CSS Grid Layouts. Five or so hours of going over layouts, writing modes, alignment, logical properties, and a little Flexbox. Mostly though it was an introduction to the CSS Grid Layout. Nothing really in-depth, because in the words of Eric Meyer, whom which I was seated next to this day, “It would take three days to go through everything.”&lt;/p&gt;
&lt;p&gt;A phenomenal(yes, again) and fantastic glimpse into the CSS Grid layout. With examples and questions from the audience, and a quote that I really liked, from another person I had met in 2008 at the same event, Bruce Lawson, she put up on a slide to make a point about writing modes;&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/an-event-apart-boston-2017/Bruce%20Lawson&quot;&gt;It’s the World Wide Web, not the Wealthy Western Web.&lt;/blockquote&gt;
&lt;p&gt;&lt;a href=&quot;https://www.brucelawson.co.uk/2008/an-event-apart-boston/&quot;&gt;Funny story related to that encounter but that’s for another day.&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Overall, I recommend this event to everyone in the creative field. A must-go, a must-attend.&lt;/p&gt;
&lt;p&gt;Lastly. I arrived in Boston looking forward to seeing Jeffrey Zeldman again and did so. Like with Eric Meyer, it felt like I was catching up with a friend. Jeffrey is one of the two (again, along with Eric) that shaped the way I thought about the web and helped me stay the course.&lt;/p&gt;
&lt;p&gt;He was gracious in allowing me to hang around and during a break, we spoke in great length with Claudia Snell and we spoke of things we had in common. It was nice not to feel alone in this crazy world, that there were others that have had similar issues and have walked through hell and kept on walking.&lt;/p&gt;
&lt;p&gt;For that, I am very grateful. I was probably (again) like a groupie or roadie hanging around backstage at a concert. AEA was my concert. I enjoy connecting with people in this field, I enjoy talking to and following the people that speak. I try not to intrude too deeply, keep a distance as to not seem like I’m some character like Jim Carrey’s character Chip Douglas in The Cable Guy.&lt;/p&gt;
&lt;p&gt;Simply put, I felt like I was in a room filled with people I follow and enjoy reading their books, speaking to, corresponding with and following online to see how they are professionally doing, and in real life. Many don’t know me, but they work they do, has helped me, helped shape me, and helped me be the professional I am today.&lt;/p&gt;
&lt;p&gt;Even going back to 2008 when I met Jeff Veen, Doug Bowman, Jason Santa Maria, Andy Budd, and listened to the keynotes from Kimberly Blessing, Peter-Paul Koch, Ethan Marcotte, Jared Spool, Christopher Fahey, and Luke Wroblewski to the folks I met that I named previously. I can’t even begin to describe the gratitude that I have still, and now, for what they have done to help me in my career.&lt;/p&gt;
&lt;p&gt;Even the folks at other AEA events that I did not see but always said, “I’ll be down next year!” to which I never was. People like Jeremy Keith, Andy Clarke, Dan Cederholm, Mark Boulton, Karen McGrane, Lea Verou, Mike Monteiro, Sarah Parmenter, Kristina Halvorson, Paul Irish, Jon Hicks, and Cameron Moll.&lt;/p&gt;
&lt;p&gt;In 2008, I took back information and used it to do the job I was hired to do then. 2017, I intend to do the same with the plethora of information I brought home with me. It took me 9 years and a lot of blood, sweat, and tears to get back to where I am today and get back to see these professionals speak. It was well worth it.&lt;/p&gt;
&lt;p&gt;If you are a speaker that I have misquoted or misconstrued the information somehow, please feel free to drop me a line or comment, to make a correction. I appreciate your time, thank you, and want to convey the information correctly to anyone interested in reading this novel.&lt;/p&gt;
&lt;p&gt;And with that, I finally end this post. My apologies to all if you suffered through this, thank you for reading this if you got this far.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Maine Lobster Run 2017</title>
		<link href="https://toddl.dev/posts/maine-lobster-run-2017/"/>
		<updated>Mon, 04 Sep 2017 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/maine-lobster-run-2017/</id>
		<content type="html">&lt;p&gt;The trip entailed a five-day jaunt up the Maine coast starting in Kittery, Maine at Bob&#39;s Clam Hut who has one of the best lobster rolls in southern Maine.&lt;/p&gt;
&lt;h3 id=&quot;i&#39;ve-only-met-two-lobster-rolls-i-didn&#39;t-like&quot; tabindex=&quot;-1&quot;&gt;I&#39;ve Only Met Two Lobster Rolls I Didn&#39;t Like&lt;/h3&gt;
&lt;p&gt;But they weren&#39;t at any place on the coast. They were at places that were inland, which is why I go to very few places inland to get a delicious lobster roll.&lt;/p&gt;
&lt;p&gt;I ended up at these two places:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://www.redseatsmaine.com/&quot;&gt;Red&#39;s Eats&lt;/a&gt;&lt;br /&gt;
&lt;a href=&quot;https://www.mainelobsterfestival.com/&quot;&gt;Maine Lobster Festival&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Red&#39;s. Best lobster roll in Maine. Bar none.&lt;/p&gt;
&lt;p&gt;Along the way up Route 1 I stopped into Ken&#39;s Restaurant, The Lobster Shack at Two Lights, and Red&#39;s Eats. The goal was reaching the Maine Lobster Festival for three days of seafood. I was already more than full, I was bursting at the seams, but I made it to Rockland, Maine safely. Now the fun begins.&lt;/p&gt;
&lt;p&gt;Not only is there seafood that is fresh and great, but there is fair food, Amato&#39;s Real Italians (A Maine thing), and more fair food!&lt;/p&gt;
&lt;h3 id=&quot;that&#39;s-a-lot-of-lobster!&quot; tabindex=&quot;-1&quot;&gt;That&#39;s a lot of lobster!&lt;/h3&gt;
&lt;p&gt;Yes, yes it is. But for me it was well worth it. And I will do it again!&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>An Event Apart 2018 - Wrap-Up Edition</title>
		<link href="https://toddl.dev/posts/an-event-apart-boston-2018/"/>
		<updated>Mon, 28 May 2018 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/an-event-apart-boston-2018/</id>
		<content type="html">&lt;h3 id=&quot;an-event-apart-boston-2018%2C-boston%2C-ma&quot; tabindex=&quot;-1&quot;&gt;An Event Apart Boston 2018, Boston, MA&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;&lt;em&gt;Originally posted on my old site in installments, this has been compiled into one post.&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Today started off, three days of design and web at the Renaissance Boston. So running on no sleep for the past 40 hours, I toughed out a fantastic first day of speakers at An Event Apart.&lt;/p&gt;
&lt;p&gt;As with every AEA, it was kicked off by Jeffrey Zeldman, speaking first about Engagement and the Content Performance Quotient.&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/an-event-apart-boston-2018/Jeffrey%20Zeldman&quot;&gt;If a customer spends 30 minutes on our site, was she engaged&amp;hellip; or frustrated?&lt;/blockquote&gt;
&lt;p&gt;Speed of Usefulness, how quickly can you get the right content to your customer? How quickly can you solve their problem? What is the shortest distance between the problem and the solution?&lt;/p&gt;
&lt;p&gt;Content Performance Quotient (CPQ). The time it takes your customer to get the information she came for. The time it takes for a specific customer to find, receive, and absorb your most important content.&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/an-event-apart-boston-2018/Jeffrey%20Zeldman&quot;&gt;FAQs are the junk drawer of content.&lt;/blockquote&gt;
&lt;p&gt;Jeffrey always kicks off AEA with relevant and thought-provoking talks. It made me think about the site for the company I work for and the “FAQ”-t, we have one item on the FAQ. The fact that the site is “pretty garbage”.&lt;/p&gt;
&lt;p&gt;Once again, Jeffery delivered.&lt;/p&gt;
&lt;p&gt;Next up, was Yesenia Perez-Cruz who spoke about Scenario-Driven Design Systems.&lt;/p&gt;
&lt;p&gt;A unified design system is essential to building better and faster; better because a cohesive experience is more easily understood by our users, and faster because it gives us a common language to work with.&lt;/p&gt;
&lt;p&gt;A good design system feels cohesive, unified and connected.&lt;/p&gt;
&lt;p&gt;Successful design patterns don’t exist in a vacuum. Successful design systems start with content and people.&lt;/p&gt;
&lt;p&gt;The differences between a successful design system and telling the story of her experience at Vox Media. The best way I saw her talk put…&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/an-event-apart-boston-2018/Jeffrey%20Zeldman&quot; class=&quot;twitter-tweet&quot;&gt;.&lt;a href=&quot;https://twitter.com/yeseniaa?ref_src=twsrc%5Etfw&quot;&gt;@yeseniaa&lt;/a&gt; killed it at &lt;a href=&quot;https://twitter.com/hashtag/aeabos?src=hash&amp;amp;ref_src=twsrc%5Etfw&quot;&gt;#aeabos&lt;/a&gt;. &amp;mdash; zeldman (@zeldman) &lt;a href=&quot;https://twitter.com/zeldman/status/1011270559697645568?ref_src=twsrc%5Etfw&quot;&gt;June 25, 2018&lt;/a&gt;&lt;/blockquote&gt;
&lt;p&gt;Yes, she did. what I took away from her talk was to let your user&#39;s needs define the building blocks you will need for your design system (if you even need one… more on that shortly). I can carry this to the table when I get back to the office and weigh heavily if we do indeed need a design system or not.&lt;/p&gt;
&lt;p&gt;Next up was Una Kravets, who spoke on “Why Design Systems Fail”.&lt;/p&gt;
&lt;p&gt;A Design System can be a style guide or visual pattern library. It can also be design tooling, a component library, voice and tone guidelines, design usage documentation and more.&lt;/p&gt;
&lt;p&gt;I’ve been contemplating a design system and pattern library since I saw Brad Frost speak last year. We may be too small to do so, I have a lot of research to do, but a lot was clarified by Una today.&lt;/p&gt;
&lt;p&gt;What is a design system? (Something I had a little insight into from last year’s talk and now this one), Why Design Systems fail, what are some characteristics of a happy design system. communication between devs and design, solid architecture, buy-in. The list goes on and on.&lt;/p&gt;
&lt;p&gt;She showed some examples of design systems, voice and tone, MailChimp, DigitalOcean, Carbon, Solid, etc.&lt;/p&gt;
&lt;p&gt;A successful design system is like a successful exercise program. Once you stop using it, you lose all your progress.&lt;/p&gt;
&lt;p&gt;I’ve never had a successful diet, so I will shoot for a successful design system.&lt;/p&gt;
&lt;p&gt;So much to soak in after the first half of the first day today, and then after a quick lunch, a surprise (to me, I wasn’t expecting this part) Mike Essl who had designed the website, many moons ago for They Might Be Giants. A site I used to visit daily and I loved the look!&lt;/p&gt;
&lt;p&gt;Mike spoke about Cooper Union, the school he attended and all the rich history of people that attended and the things they had contributed to the world was staggering, to say the least! That school has had some rich history and very prolific people walk through their halls, indeed.&lt;/p&gt;
&lt;p&gt;Same Bat-Time! Same Bat-Channel! His love for Batman and the massive resume Mike has is absolutely stunning and impressive some of the work that he has done or contributed to.&lt;/p&gt;
&lt;p&gt;The began the second half to the day and the part of the day I was waiting for, some more light shed on CSS Grids and the new direction of web design and CSS by the next three speakers, Rachel Andrew, Eric Meyer, and Jen Simmons.&lt;/p&gt;
&lt;p&gt;Rachel started with “Graduating to Grid”. Telling the audience to understand CSS, you don’t have to memorize everything, just have a great understanding of it. Understanding the cascade, of Cascading Style Sheets, inheritance, specificity. You don’t need a grid-based solution to everything, build your own framework, and Rachel even spoke about Bootstrap! &lt;strong&gt;&lt;em&gt;GASP!&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/an-event-apart-boston-2018/Rachel%20Andrew&quot;&gt;Don’t be afraid of the future of CSS Grids, be excited!&lt;/blockquote&gt;
&lt;p&gt;Then Eric Meyer took the stage to discuss Feature Queries. What are the pros and cons? Where are the strengths and weaknesses?&lt;/p&gt;
&lt;p&gt;Feature Queries examples.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;  &lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@supports&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;prop&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; val&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;/* CSS goes here */&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; 
    &lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@supports&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;--css&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; variables&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; 
      &lt;span class=&quot;token selector&quot;&gt;html&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;token property&quot;&gt;--color1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; navy&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; 
        &lt;span class=&quot;token property&quot;&gt;--color2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; red&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; 
      &lt;span class=&quot;token selector&quot;&gt;html.help&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;token property&quot;&gt;--color1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; teal&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        &lt;span class=&quot;token property&quot;&gt;--color2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; maroon&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color1&lt;span class=&quot;token punctuation&quot;&gt;)&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;span class=&quot;token selector&quot;&gt;.highlight&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color2&lt;span class=&quot;token punctuation&quot;&gt;)&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;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;  &lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@supports&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;prop&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; val&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token comment&quot;&gt;/* CSS goes here */&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  
  &lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@supports&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;--css&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; variables&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token selector&quot;&gt;html&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;--color1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; navy&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;--color2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; red&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token selector&quot;&gt;html.help&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;--color1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; teal&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;--color2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; maroon&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color1&lt;span class=&quot;token punctuation&quot;&gt;)&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;span class=&quot;token selector&quot;&gt;.highlight&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color2&lt;span class=&quot;token punctuation&quot;&gt;)&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;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;How to put all these new CSS features to work for you right away? I’m going to do a lot of experimentation with these features soon, I hope. Another great talk by Eric.&lt;/p&gt;
&lt;p&gt;And the day ended with Jen Simmons discussing the phases of the web that we have seen throughout the history of the web. From simple HTML to Responsive Web Design (RWD), Jen has brought forth the term Intrinsic Web Design to the forefront.&lt;/p&gt;
&lt;p&gt;The truncation joke was a good one as well.&lt;/p&gt;
&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1585002461/images/truncation_wnesil.jpg&quot; data-src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1585002461/images/truncation_wnesil.jpg&quot; class=&quot;lazy&quot; alt=&quot;A slide from Jen Simmons talk on Intrinsic Web Design at An Event Apart Boston 2018&quot; /&gt;
&lt;p&gt;There is so much that can be done with web layout these days and it is exciting, Jen touched on some key points on ways to contract and expand space, new possibilities for flexibility, columns and units, change in how we use the viewport, and programming to all four edges of the viewport.&lt;/p&gt;
&lt;p&gt;Rachel and Jen both have been the catalyst for changing the way we look at the web today, and I am very grateful and fortunate to have seen them both speak for two years running now. They have both shed light on CSS Grid and I understand a lot better now than I did when I went into AEA last year by miles.&lt;/p&gt;
&lt;p&gt;…and I cannot forget to mention that I got to see my friend Claudia Snell again!&lt;/p&gt;
&lt;p&gt;If you are a speaker and happen to see this, and if there is anything I missed upon, key points perhaps, then please reach out and I can certainly add those.&lt;/p&gt;
&lt;h3 id=&quot;day-two&quot; tabindex=&quot;-1&quot;&gt;Day Two&lt;/h3&gt;
&lt;p&gt;Well, it is finished and as usual the second day of speakers was as good as the first!&lt;/p&gt;
&lt;p&gt;Jeremy Keith kicked the day off with his talk and what a talk it was! The way the web is changing it can be overwhelming and exhausting. What tools should you learn and use and how long will those tools be around?&lt;/p&gt;
&lt;p&gt;Jeremy brought everyone in attendance back in time, discussed the present state and walked us on a tour of the future in working on the web. From HTML/CSS/JS to frameworks and libraries and all the way to Progressive Web Apps, Jeremy taught us if we learn from the past, we can make sensible choices in the future regarding our work on the web.&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/an-event-apart-boston-2018/Todd%20Libby&quot; class=&quot;twitter-tweet&quot;&gt;Internet Pace Layers with &lt;a href=&quot;https://twitter.com/adactio?ref_src=twsrc%5Etfw&quot;&gt;@adactio&lt;/a&gt; &lt;a href=&quot;https://twitter.com/hashtag/aeabos?src=hash&amp;amp;ref_src=twsrc%5Etfw&quot;&gt;#aeabos&lt;/a&gt; &lt;a href=&quot;https://t.co/3U1C6ETHEz&quot;&gt;pic.twitter.com/3U1C6ETHEz&lt;/a&gt; &amp;mdash; Todd (@toddlibby) &lt;a href=&quot;https://twitter.com/toddlibby/status/1011602011048038402?ref_src=twsrc%5Etfw&quot;&gt;June 26, 2018&lt;/a&gt;&lt;/blockquote&gt;
&lt;p&gt;Then on to Donna Lichaw, who taught us on how to convey a story to your customers/clients. The better the story, the more likely you will want to use a product, pay for a product, tell others about the product. A “story first” approach to building websites, apps, and more that draw customers in, get them excited and keep them engaged for a long time.&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/an-event-apart-boston-2018/Donna%20Lichaw&quot; class=&quot;twitter-tweet&quot;&gt;The better the STORY behind your product, the more likely folks are to try it, continue to use it, pay to use it, and recommend it to others. &lt;a href=&quot;https://twitter.com/dlichaw?ref_src=twsrc%5Etfw&quot;&gt;@dlichaw&lt;/a&gt; &lt;a href=&quot;https://twitter.com/hashtag/aeabos?src=hash&amp;amp;ref_src=twsrc%5Etfw&quot;&gt;#aeabos&lt;/a&gt;&amp;mdash; zeldman (@zeldman) &lt;a href=&quot;https://twitter.com/zeldman/status/1011620432028545024?ref_src=twsrc%5Etfw&quot;&gt;June 26, 2018&lt;/a&gt;&lt;/blockquote&gt;
&lt;p&gt;Make things that go &lt;strong&gt;BOOM!&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Then on to Val Head who brought to the table this year, Building More Expressive Products. Using animation and sound, you can bring a whole new level to the sites you create or the projects you are working on and Val showed us a little bit of how to harness the design details from motion and sound to build overarching themes.&lt;/p&gt;
&lt;p&gt;Using examples from TunnelBear, Authentic Weather and MailChimp, and the way they use animation to express their brand with personality. How we style for animation and what feelings do we aim for. Calm? Strong? Energetic? Animation on the web can bring a website or brand to a whole new level of personality.&lt;/p&gt;
&lt;p&gt;After lunch, the panel opened up with Rachel Andrew and Jeremy Keith. Discussing the positives (as well as the negatives) of working with CSS Grid Layout and how we can begin leveling up our Grid skills.&lt;/p&gt;
&lt;p&gt;Trent Walton followed up the lunch hour with his talk on third-party scripts, how many we have loading on our sites, ways to check the speed of our sites with all the stuff we have loading on them and to be honest (when I ran a check) I nearly fell over in my chair on how much it takes and how fast it is to load my old site.&lt;/p&gt;
&lt;p&gt;Trent also shared ways to include third-party scripts and services on our sites. Benefits and concerns about those third-party scripts. Using your ad blocker versus not and seeing the difference with the preferred browser inspector of your choice. A great talk and his first time speaking at AEA. Job well done!&lt;/p&gt;
&lt;p&gt;Delivering a performant, accessible, responsive, scalable website isn’t enough: I also need to consider the impact of third-party scripts.&lt;/p&gt;
&lt;p&gt;Derek Featherstone followed with his talk on Inclusive UX. His slides and talk had Star Wars integrated into it, so I was hooked at the start.&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/an-event-apart-boston-2018/Derek%20Featherstone&quot;&gt;Accessibility is an outcome. Inclusive design is a process.&lt;/blockquote&gt;
&lt;p&gt;Inclusive UX Design is “the intentional facilitation and crafting of the interactions within an ecosystem that incorporates inclusion as a core value.”&lt;/p&gt;
&lt;p&gt;Speaking about communication with all involved early in the process can make things a lot easier through the rest of the process. Reverse engineering a site, basically breaking it down in pieces to see where things are not right or went wrong. A great example was a site that had some pretty sketchy colors and a flyout menu that went three-wide and covered a lot of content area.&lt;/p&gt;
&lt;p&gt;Color palettes that are good and bad for accessibility, design intention, CSS class name reviews, high contrast tweaks… a lot of stuff regarding accessibility to soak in, well worth the price of admission!&lt;/p&gt;
&lt;p&gt;And to wrap up Day Two was Gerry McGovern who brought the house down with a great, humorous talk about Intuitive Navigation, and do I mean bringing the house down with laughter!&lt;/p&gt;
&lt;p&gt;Discussing sites that it seems like it takes an eternity to finally get to the point of what the navigation was for. In a couple cases, the Gatwick Airport and Brussels Airport just to get online at these airports took 5 or more steps through a process to connect! And the right way to do it, Dublin Airport. Click once and you’re connected.&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/an-event-apart-boston-2018/Gerry%20McGovern&quot; class=&quot;twitter-tweet&quot;&gt;Designing an intuitive navigation - Gerry McGovern&amp;#39;s presentation at An Event Apart 2018 &lt;a href=&quot;https://twitter.com/hashtag/customerexperience?src=hash&amp;amp;ref_src=twsrc%5Etfw&quot;&gt;#customerexperience&lt;/a&gt; &lt;a href=&quot;https://twitter.com/hashtag/informationarchitecture?src=hash&amp;amp;ref_src=twsrc%5Etfw&quot;&gt;#informationarchitecture&lt;/a&gt; &lt;a href=&quot;https://t.co/e4ySp0WLjl&quot;&gt;https://t.co/e4ySp0WLjl&lt;/a&gt; &lt;a href=&quot;https://twitter.com/hashtag/aeabos?src=hash&amp;amp;ref_src=twsrc%5Etfw&quot;&gt;#aeabos&lt;/a&gt; &lt;a href=&quot;https://twitter.com/hashtag/aeaboston?src=hash&amp;amp;ref_src=twsrc%5Etfw&quot;&gt;#aeaboston&lt;/a&gt;&amp;mdash; Gerry McGovern (@gerrymcgovern) &lt;a href=&quot;https://twitter.com/gerrymcgovern/status/1011675900482596865?ref_src=twsrc%5Etfw&quot;&gt;June 26, 2018&lt;/a&gt;&lt;/blockquote&gt;
&lt;p&gt;It was a humorous trip through the navigations of some example sites that had me in stitches, as well as the entire crowd. Icons for navigation, “Most Popular” navigation blocks, labeled versus unlabeled icons, hidden versus unhidden menu systems that result in huge losses in daily engagement.&lt;/p&gt;
&lt;p&gt;Even why and how to avoid (or even kill) the hamburger menu (something I am guilty of implementing on a few sites).&lt;/p&gt;
&lt;p&gt;I learned to reduce confusion and increase speed and simplicity for our customers at the company I work for, and had a lot of hearty laughter while learning.&lt;/p&gt;
&lt;p&gt;That wrapped up Day Two. As much as I would like to add more quotes, pictures and details, I have got to get some sleep. Tomorrow will be a very long day. I’ll have a wrap-up on the entire day tomorrow late. Tomorrow consists of A Day Apart, with Eric Meyer. “Navigating the CSS Renaissance”. I look forward to it.&lt;/p&gt;
&lt;p&gt;Until next time, that is all.&lt;/p&gt;
&lt;h3 id=&quot;a-day-apart-with-eric-meyer&quot; tabindex=&quot;-1&quot;&gt;A Day Apart with Eric Meyer&lt;/h3&gt;
&lt;p&gt;Today was sadly enough, the last day of the conference. A Day Apart with Eric Meyer. A full day with Eric capped it off in style… literally.&lt;/p&gt;
&lt;p&gt;We went through some examples of Grid, flexbox, production features that are ready to roll and we can use now. Writing modes, the fact that now, we actually can use the web like we did and do with print.&lt;/p&gt;
&lt;p&gt;Feature and media queries. Positioning of objects and making them fit in the viewport, shadows, borders, auto margins, shaping content and so much more! definitely worth the extra day!&lt;/p&gt;
&lt;p&gt;All-in-all, it was a fantastic three days of design and code. Phenomenal speakers, a great crowd, a great venue. It surpassed my expectations. It was in a new venue, new location, so I wasn’t so sure, but now that it has come and gone, it was well worth it.&lt;/p&gt;
&lt;p&gt;I got up the courage to talk and mingle with most of the speakers. Got to meet Jeremy Keith, after all these years. I went in 2008, I believe Jeremy came back in 2010, I wasn’t able to and did not attend until last year. So it was a thrill for me, fanboy moment. First site I linked to was Jeremy’s and I have 4 of his books. (&lt;em&gt;HTML5 For Web Designers&lt;/em&gt;, &lt;em&gt;Bulletproof Ajax&lt;/em&gt;, &lt;em&gt;DOM Scripting&lt;/em&gt;, and &lt;em&gt;Going Offline&lt;/em&gt;).&lt;/p&gt;
&lt;p&gt;I tend to ramble, so I think I did a little bit when talking, but the amount of great information, from great speakers, that are very friendly.&lt;/p&gt;
&lt;p&gt;I highly recommend anyone thinking of going, go. Get your company to let you go, get them to send you there, make your pitch and sell them on it to advance your knowledge. You will be sure to leave there feeling like you have gained a lifetime of knowledge.&lt;/p&gt;
&lt;p&gt;I got to see Jeffrey and Eric again and fanboy out like I always do, talk with them, they were so very gracious and put up with my fawning over the event like I always do and just have fun for three days.&lt;/p&gt;
&lt;p&gt;Thank you to all the speakers. I apologize for my over-enthusiastic fanboy-ing, fawning and swooning like I do each year beacause this is the best conference by far for front-end fossils like myself. Tremendous jobs from all! Thank you to those behind the scenes, that set it up and make it happen.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>UX Burlington 2019</title>
		<link href="https://toddl.dev/posts/ux-burlington-2019/"/>
		<updated>Fri, 03 May 2019 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/ux-burlington-2019/</id>
		<content type="html">&lt;h3 id=&quot;ux-burlington-2019---burlington%2C-vt&quot; tabindex=&quot;-1&quot;&gt;UX Burlington 2019 - Burlington, VT&lt;/h3&gt;
&lt;h4 id=&quot;my-first-ux-burlington&quot; tabindex=&quot;-1&quot;&gt;My First UX Burlington&lt;/h4&gt;
&lt;p&gt;While scanning the countryside for conferences in the New England area, I was drawn to UX Burlington. So I snagged a ticket. Best decision I made that week. More on the food that I had there on Church Street as well.&lt;/p&gt;
&lt;h4 id=&quot;morning-keynote&quot; tabindex=&quot;-1&quot;&gt;Morning Keynote&lt;/h4&gt;
&lt;p&gt;Victor Yocco gave the morning keynote. “Designing For Short Attention Spans”. A great way to kick off the conference. Filled with humor, light-heartedness and information, I was glad I had attended because this keynote made me think about a lot of UX things I&#39;ve been dealing with at work.&lt;/p&gt;
&lt;p&gt;Three main points of the talk were:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;What&#39;s an Attention Span?&lt;/li&gt;
&lt;li&gt;Decision Making Heuristics&lt;/li&gt;
&lt;li&gt;Tactical Design Elements&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;We all have an attention span that is less than that of a goldfish. Designers need to care about their users&#39; attention though. Victor touched upon the questions we have to be asking not only our team and stakeholders, but for our users as well.&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/ux-burlington-2019/Victor%20Yocco&quot;&gt;Designing to gain people&#39;s attention comes with great responsibility. Why do you want that, what are you doing that&#39;s contributing to making their lives better if they&#39;re going to give you their attention?&lt;/blockquote&gt;
&lt;p&gt;A lot of tech giants need to start asking themselves that very question.&lt;/p&gt;
&lt;p&gt;Some of the many points touched on in the fantastic morning keynote were;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;We need to capture users&#39; attention.&lt;/li&gt;
&lt;li&gt;We need to understand why we want and deserve users&#39; attention.&lt;/li&gt;
&lt;li&gt;We must navigate ethical decisions and issues when we design for attention.&lt;/li&gt;
&lt;li&gt;We need to conduct research with users.&lt;/li&gt;
&lt;li&gt;Users can&#39;t pay close attention to each decision.&lt;/li&gt;
&lt;li&gt;Heuristics are mental shortcutsfor making decisions.&lt;/li&gt;
&lt;li&gt;Accounting for heuristics may increase user adoption and decrease mental load.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Some key points on the Tactical Design Elements were;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Clear the clutter.&lt;/li&gt;
&lt;li&gt;Remove distractions.&lt;/li&gt;
&lt;li&gt;Animation. What is the goal of it?&lt;/li&gt;
&lt;li&gt;Give users something to do.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;There was so much to Victor&#39;s talk, it would take me a day to just relay the vast amount of information that was crammed into a 48-minute video. I had three pages of notes myself, so I&#39;ll just suggest people watch the video of the keynote. The link to &lt;a href=&quot;https://youtu.be/6WBS6YYMAcE&quot;&gt;the video for Victor&#39;s keynote can be found here&lt;/a&gt; on the UX Burlington YouTube account.&lt;/p&gt;
&lt;h4 id=&quot;fr%C3%A9d%C3%A9ric-harper&quot; tabindex=&quot;-1&quot;&gt;Frédéric Harper&lt;/h4&gt;
&lt;p&gt;The first speaker that I saw on the developer track was Frédéric Harper, “Building Web Apps That Don’t Suck”. Frédéric spoke about tips and tricks to help you optimize your applications. Create a great experience for your users that is fast and with quality. It was a great way to kick off the developer track for sure.&lt;/p&gt;
&lt;p&gt;Frédéric touched upon mobile first, engagement with mobile apps. Why are you using the application? Keep your users engaged with a great UI.&lt;/p&gt;
&lt;p&gt;Think about content, think about the comfort zone of the screen and what users ahve to do to navigate your app and he even broke into a little condensed version of Fitt&#39;s Law. Fitt&#39;s Law, for those who don&#39;t know, is a predictive model of human movement primarily used in human–computer interaction and ergonomics. Basically, the law predicts that the time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target.&lt;/p&gt;
&lt;p&gt;Minimizing large files, file requests, HTTP requests, using a CDN, running the audit on Webhint, don&#39;t make users think about the interface, insulate them from the complexities and make our goals easier and faster. There was an awful lot of information packed into the hour and I&#39;ll point you to &lt;a href=&quot;https://youtu.be/DWd5cL3ViTY&quot;&gt;Frédéric&#39;s video on the UX Burlington YouTube page&lt;/a&gt;. I highly suggest watching.&lt;/p&gt;
&lt;h4 id=&quot;henri-helvetica&quot; tabindex=&quot;-1&quot;&gt;Henri Helvetica&lt;/h4&gt;
&lt;p&gt;The next speaker was Henri Helvetica, “Planet of the APIs: A Tale of Performance and UX”. The beginning of Henri&#39;s talk was about the good old days of Mosaic, data and web origins such as in November of 2016 (not so long ago) when mobile and tablet internet usage surpassed desktop internet usage.&lt;/p&gt;
&lt;p&gt;How the US was 2nd in the world with selling the low end/low spec phones &amp;amp; devices, performance on mobile, and how 53% of visitors will abandon a page after 3 seconds and 77% of pages load in 10 seconds or more with the average page loading in 19 seconds. Want to know exactly how long 19 seconds is? If Henri doesn&#39;t mind, I&#39;ll borrow this example that he used. Buckle up.&lt;/p&gt;
&lt;iframe class=&quot;yt&quot; width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/GWbP8eC-SIw?start=20&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen=&quot;&quot; title=&quot;&quot;&gt;&lt;/iframe&gt;
&lt;p&gt;Don&#39;t say I did not warn you!&lt;/p&gt;
&lt;p&gt;Here is a quote from Henri I loved.&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/ux-burlington-2019/Henri%20Helvetica&quot;&gt;Resource loading is a delicate dance that can be delightful, but also destructivedue to device damper and limitations.&lt;/blockquote&gt;
&lt;p&gt;I won&#39;t (and possibly have not a chance to explain these as well as Henri did) go into the API&#39;s in-depth, but I will give you and overview of what they are and &lt;a href=&quot;https://youtu.be/DLvSPYklE4U&quot;&gt;point you to the video on the UX Burlington YouTube page&lt;/a&gt;.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Paint Timing API&lt;/li&gt;
&lt;li&gt;Intersection Observer API&lt;/li&gt;
&lt;li&gt;Media Capabilities API&lt;/li&gt;
&lt;li&gt;Network Information API&lt;/li&gt;
&lt;li&gt;Cache API&lt;/li&gt;
&lt;li&gt;Battery Status API&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;I&#39;ll go back to another quote from Henri;&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/ux-burlington-2019/Henri%20Helvetica&quot;&gt;You can&#39;t improve what you don&#39;t measure.&lt;/blockquote&gt; 
&lt;p&gt;I had written down a lot of notes, what mobile browsers these are all good in and not implemented in yet, but again, I&#39;ll direct and suggest that &lt;a href=&quot;https://youtu.be/DLvSPYklE4U&quot;&gt;folks go to the UX Burlington YouTube page and view his talk there&lt;/a&gt;. Henri articulated everything so well, I don&#39;t want to butcher it.&lt;/p&gt;
&lt;h4 id=&quot;chris-demars&quot; tabindex=&quot;-1&quot;&gt;Chris DeMars&lt;/h4&gt;
&lt;p&gt;Chris DeMars was the last speaker for the day with “Focusing on Focus”. He nailed it. I had corresponded with Chris (@saltnburnem) on Twitter so it was a treat to see and hear his talk on Focusing on Focus.&lt;/p&gt;
&lt;p&gt;It started with this after Chris&#39; introduction;&lt;/p&gt;
&lt;iframe class=&quot;yt&quot; width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/XB4cjbYywqg&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen=&quot;&quot; title=&quot;&quot;&gt;&lt;/iframe&gt;
&lt;p&gt;and a quote that I hope Chris doesn&#39;t mind me borrowing.&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/ux-burlington-2019/Chris%20DeMars&quot;&gt;If now, you were on the fence about accessibility because it was always an afterthought it&#39;s never thought of from the beginning. I hope, (after the talk) you can go back and reflect on what your why is. And at some point you&#39;ll understand &amp;lsquo;Wow, I need to do this not just for myself.&amp;rsquo;&lt;/blockquote&gt;
&lt;p&gt;According to the World Heath Organization, 20% of the people on Earth have a disability(impairment). The W3C states;&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/ux-burlington-2019/W3C&quot;&gt;Web accessibility means that people with disabilities &lt;em&gt;can&lt;/em&gt; use the web.&lt;/blockquote&gt;
&lt;p&gt;Chris thinks (and I am in total agreement) it &lt;em&gt;should&lt;/em&gt; read;&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/ux-burlington-2019/Chris%20DeMars&quot;&gt;Web accessibility means that &lt;em&gt;EVERYONE&lt;/em&gt; can use the web.&lt;/blockquote&gt;
&lt;p&gt;&lt;a href=&quot;https://youtu.be/gUK0ieCJkRI&quot;&gt;Go to the UX Burlington page on YouTube and see the video in its entirety.&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Chris also walked people through &lt;span class=&quot;pre&quot;&gt;:focus&lt;/span&gt; &lt;span class=&quot;pre&quot;&gt;:focus-visible&lt;/span&gt; &amp;amp; &lt;span class=&quot;pre&quot;&gt;:focus-within&lt;/span&gt; with some pretty cool, yet simple pens over at his CodePen account. &lt;a href=&quot;https://codepen.io/chrisdemars/pen/OvrbLr&quot;&gt;&lt;span class=&quot;pre&quot;&gt;:focus&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;https://codepen.io/chrisdemars/pen/PRXbpg&quot;&gt;&lt;span class=&quot;pre&quot;&gt;:focus-within&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;https://codepen.io/chrisdemars/pen/ejbZYv&quot;&gt;&lt;span class=&quot;pre&quot;&gt;and focus styles&lt;/span&gt;&lt;/a&gt; so go check those out!&lt;/p&gt;
&lt;p&gt;Top notch accessibility talk from Chris, so I was extra glad I got the ticket I got.&lt;/p&gt;
&lt;h4 id=&quot;dr.-robert-moore&quot; tabindex=&quot;-1&quot;&gt;Dr. Robert Moore&lt;/h4&gt;
&lt;p&gt;Witht the closing keynote on a great one-day conference was Dr. Robert Moore and “Conversational UX”.&lt;/p&gt;
&lt;p&gt;Without going into it, &lt;a href=&quot;https://youtu.be/ZcKB2ns8I1g&quot;&gt;go watch the video&lt;/a&gt;. I couldn&#39;t even possibly begin to articulate a fraction of good as Dr. Moore does. I&#39;ll give it the Reader&#39;s Digest version as well as I can.&lt;/p&gt;
&lt;p&gt;Conversational UX. When dealing with the technologies we have out there, chatbots and voice assistants, there is a lack of conversational feel to them and Dr. Moore tells you how there is (and has been) work going on in the field of conversational science.&lt;/p&gt;
&lt;p&gt;Dr. Moore shows you a little bit about what they are doing at IBM and the interaction patterns they are working on and with to make conversational patterns and UX better.&lt;/p&gt;
&lt;h3 id=&quot;but-what-about-the-food%3F&quot; tabindex=&quot;-1&quot;&gt;But what about the Food?&lt;/h3&gt;
&lt;p&gt;So I decided to go out for dinner after I got into Burlington the day before the conference. I decided upon the Asiana Noodle Shop and oh my, was I glad I did. Located on Chruch Street in the heart of the Church Street Marketplace, it is a well-hidden place, so you have to look hard for it or you&#39;ll miss it. At least I had to. I am oblivious some times.&lt;/p&gt;
&lt;p&gt;I enjoyed (understatement) the Korean BBQ short ribs and bibimbap. Along with a terrific wonton soup. Nice cozy little place located downstairs, busy place, but the food is out of this world. That&#39;s a must-do if you&#39;re looking for good eats in the area.&lt;/p&gt;
&lt;p&gt;That&#39;s just a little recommendation.&lt;/p&gt;
&lt;h3 id=&quot;yeah%2C-but-the-conference!&quot; tabindex=&quot;-1&quot;&gt;Yeah, but the conference!&lt;/h3&gt;
&lt;p&gt;The conference, for a one-day event, is terrific! Well put together, fantastic speakers (check out the past speakers and videos on YouTube), great food (poke bowls were phenomenal) and a great crowd.&lt;/p&gt;
&lt;p&gt;If you are debating on going, debate no more. Go. It&#39;s well worth it.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>An Event Apart 2019 - Wrap-Up Edition</title>
		<link href="https://toddl.dev/posts/an-event-apart-boston-2019/"/>
		<updated>Thu, 09 May 2019 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/an-event-apart-boston-2019/</id>
		<content type="html">&lt;h3 id=&quot;an-event-apart-boston-2019%2C-boston%2C-ma&quot; tabindex=&quot;-1&quot;&gt;An Event Apart Boston 2019, Boston, MA&lt;/h3&gt;
&lt;h3 id=&quot;day-one&quot; tabindex=&quot;-1&quot;&gt;Day One&lt;/h3&gt;
&lt;p&gt;It was terrific. Jeffrey started it off with his talk about slow design. There is too much going on, on websites that distract and stresses users. Designers should help users by slowing down so they can make informed decisions. &lt;span class=&quot;italic&quot;&gt;“Readability transcends legibility”&lt;/span&gt;, &lt;span class=&quot;italic&quot;&gt;“Absorption, not conversion&lt;/span&gt;.” Where you read from, lying down? Sitting in a chair tablet on your knees? At the breakfast table with the tablet proped up a foot away from you?&lt;/p&gt;
&lt;p&gt;Minamalism and whitespace (macro and micro) for focus and being less busy, big typography for readability and hierarchy for accessibility were among the many points Jeffrey touched upon in his fantastic talk that kicked off another phenomenal conference.&lt;/p&gt;
&lt;p&gt;Mina Markham followed up with a phenomenal talk about art direction and inclusiveness. Mina also spoke about progressive enhancement and how we have to make sure users have an experience on their own terms that is the experience they want. A great one.&lt;/p&gt;
&lt;p&gt;Localization was brought to my attention and the fact that not everyone is from North America (United States) and reading what I create. Localization is important, let&#39;s make it so. Though at work we are not used outside of the United States, we probably wouldn&#39;t use localization but should anyhow. Mina talked about adjusting design, illustration and photos to a different country or culture by using the examples of her work at Slack.&lt;/p&gt;
&lt;p&gt;Val Head followed with making motion inclusive. I always enjoy the animation parts of the conference, especially when Val speaks. The energy and enthusiasm are contagious. Her talking points being we shouldn&#39;t be using unnecessary animations, subtilty in animation (opacity, colors, movement), triggering motion in GIFs and video, and using &lt;code&gt;prefers-reduced-motion&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Val spoke about which types of motion can be triggers for people with disabilities. Now I haven&#39;t used motion much in the projects I have worked on, but intend to and this talk was just what I needed. I suffer from migraines, so when I am on the computer and must be (whether working at the office or otherwise) some animation can be hard on the eyes, so I had to take that into consideration for persons with more than just a migraine.&lt;/p&gt;
&lt;p&gt;Eric Meyer then spoke about CSS generated content. This was one of my cringe moments, but more on that later. I called this block the &lt;span class=&quot;bolder&quot;&gt;“Technical Triad of Terrific”&lt;/span&gt; because the next three speakers I follow closely and anything they share or write up on CSS, Grid Layout, and web.&lt;/p&gt;
&lt;p&gt;Eric talked about the possibilities when using the pseudo-elements &lt;code&gt;::before&lt;/code&gt; and &lt;code&gt;::after&lt;/code&gt; for styling and minimalising the clutter in your HTML markup. Then how pull quotes are “mismanaged” and that&#39;s when I had my cringe moment. I thought I had borrowed a cool pull quote design in a blockquote from a site then tailored it even better but nay. I say nay.&lt;/p&gt;
&lt;p&gt;I will also say, as I get older, and as I go to these conferences, I get tired easily which is why I like to get up during the intermissions and walk around and mingle. I dozed off during Eric&#39;s talk for an embarrassing amount of time. Something that I still feel horrible about because his technical talks are some of the best I have heard no matter what the topic. So I suffer from embarrassment and remorse over that. A good reminder to get more sleep during conferences.&lt;/p&gt;
&lt;p&gt;Rachel Andrew crushed it with her talk on redefining the technical possibilities of CSS Grid layout and CSS Subgrid (now available at this writing in Firefox Nightly)and how to make things better. Rachel is one of my favorite developers, her work has got me to experiment with Grid and now Subgrid and CSS as a whole.&lt;/p&gt;
&lt;p&gt;I have even purchased Perch for a site that I have (dormant but in development) her work, as well as husband Drew McLellan has always been inspiring. Everyone also got to see an appearance by Pixel the Cat as well!&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://bugs.chromium.org/p/chromium/issues/detail?id=762679&quot;&gt;Pushing for Subgrid in Chrome&lt;/a&gt; (go ahead, sign in and star it!), &lt;a href=&quot;https://noti.st/rachelandrew/aSEj0y/making-things-better-redefining-the-technical-possibilities-of-css#sRqusUa&quot;&gt;many technical aspects that you can see in Rachel&#39;s slides&lt;/a&gt; and many examples &lt;a href=&quot;https://gridbyexample.com/&quot;&gt;on Rachel&#39;s site&lt;/a&gt; but the best takeaway I found was Rachel&#39;s ending where she stated, “More than ever the web needs &lt;span class=&quot;bolder&quot;&gt;diversity of thought&lt;/span&gt;.”&lt;/p&gt;
&lt;p&gt;Jen Simmons wrapped the day up with her talk on designing intrinsic layouts, solving layout designs, and even did a live coding walkthrough. Her work, along with Rachel&#39;s in regards to CSS Grid Layout, is the best. I point anyone who asks me where they can learn about Grid to those two wonderful people. Although you can do things the old fashioned way, and I still do from time-to-time, I like the direction that Grid and Flexbox are taking the web.&lt;/p&gt;
&lt;p&gt;Jen also mentioned that everything doesn&#39;t have to be done in Flexbox or Grid, that “good old fashioned stuff is still good.” I was fortunate enough to get a few minutes talking to Jen &lt;span class=&quot;italic&quot;&gt;(Thank you so very much!)&lt;/span&gt; about a few questions I had and as with all the speakers I spoke to and had questions with, she was so very gracious with her time.&lt;/p&gt;
&lt;p&gt;Overall, as to how it was the last two years, Day One was stellar. I had a great time absorbing all the information, putting it into my logbook for future use and how I may do things at work going forward.&lt;/p&gt;
&lt;h3 id=&quot;day-two&quot; tabindex=&quot;-1&quot;&gt;Day Two&lt;/h3&gt;
&lt;p&gt;Kate O&#39;Neill kicked off Day Two with her great talk about the “Design of Meaning for the Future of Humanity”. About building our best tech, which hit home with me at my job. Our app can and needs to do a lot better. I took a lot from her talk for sure. Our app is what I call “Get in and get done”, so tedious at times so I can imagine what the customers and users think, which is a huge part of what Gerry McGovern spoke about on Day Three, but more on that later.&lt;/p&gt;
&lt;p&gt;Meaningful design experiences is something I never had cross my mind and Kate certainly opened my mind up to that by using the Amazon Go Stores as an example. While a fantastic use of technology, you can go in, do your shopping, checkout and go (no pun intended), there is something you don&#39;t see in a Go store that you see in a regualr old supermarket. Taking an item off a shelf to help another person should they need it.&lt;/p&gt;
&lt;p&gt;Due to my height (6´3˝), I have had elderly people ask me to reach something on the top shelf for them and I was able to help with no problem or issue. I guess you can&#39;t do that in an Amazon Go store as it wont be registered correctly. So is this a meaningful experience? Dare I say, nay.&lt;/p&gt;
&lt;p&gt;A talk I was itching to hear, &lt;a href=&quot;https://rwt.io/&quot;&gt;Jason Pamental&lt;/a&gt; followed up with his talk on Dynamic Typographic Systems and Variable Fonts. Something I want to inject and use in both personal and work projects. This is and can be the now and the future!&lt;/p&gt;
&lt;p&gt;Jason explained so succinctly on how you can have one font to rule them all (so to speak). One font file for one font family. You dont need one file for each font and it improves dramatically on the site performance exponentially, offering more styling options, decreasing load times, HTTP requests, and site font file sizes. Jason served up many examples of fonts, sites for variable fonts, &lt;a href=&quot;https://fontofthemonth.club/&quot;&gt;fontofthemonth.club&lt;/a&gt;, and was so very gracious in answering a few questions for me and offering up some help which I can use when it comes time to implement variable fonts on my site.&lt;/p&gt;
&lt;p&gt;Sara Soueidan is someone I have been wishing to hear speak and I was jubilant in hearing Sara was going to be speaking in Boston this year and Sara followed up with a phenomenal talk on SVG Filters. A topic I have been looking more and more into. Her talk was fantastic! She has a ton of great content on SVG!&lt;/p&gt;
&lt;p&gt;The technical aspects are a lot to go into here, but I would suggest following Sara for any and all information she shares regarding SVG&#39;s. I was blown away and left wanting more! Even the parts that were above my comprehension, I just wanted to hear and learn more! &lt;a href=&quot;https://www.sarasoueidan.com/&quot;&gt;Be sure to read up on her site for a lot of great articles and information&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Sarah Parmenter followed the lunch break with her talk on “Designing for Personalities”. Every year Sarah had been at AEA Boston, I had missed her talks due to life happening. This year, I was so very grateful and fortunate to finally hear and see her speak and it was fantastic. A word (along with phenomenal) which I will probably use &lt;strong&gt;a lot&lt;/strong&gt;. It made me think of how my work can adjust our app and website to meet the needs and wishes of our customers.&lt;/p&gt;
&lt;p&gt;Sarah&#39;s examples, especally the Bloom &amp;amp; Wild example were perfect examples of customers to opt-out of newsletters and emails, Sarah&#39;s feedback was the catalyst for change when it came to opting out of emails on Mother&#39;s Day when someone had suffered a loss or tragedy. This talk brought me back to Eric&#39;s talk (and his book with Sara Wachter-Boettcher “&lt;em&gt;Designing for Real Life&lt;/em&gt;”) on Design for Real Life. This was widely acclaimed on social media and even in the British press.&lt;/p&gt;
&lt;p&gt;Brad Frost followed with the technical side of design systems and again this year, did not disappoint. Brad, along with Dan Mall, the one-two punch for design systems, provided a great hour of if you got the product then you have the need for a design system. Which we do at work. The need for one that we do not have one at all for our app.&lt;/p&gt;
&lt;p&gt;Dan followed with how my role with the design system can be the most efficient it could be. I talked with both of them about how to get started and how I can make a design system from nothing that will do the job it needs to do for the company I work for.&lt;/p&gt;
&lt;p&gt;Both Brad and Dan were, and are, great to talk to about this topic. They provided me with answers to my questions. They touched on how you don&#39;t have to go guns-a-blazing and try to do everything in a design syste at once. Start off small, meet the needs and boundaries of what you&#39;re doing and go from there. Run your design system and it&#39;s evolution in tandem witht he project you or you and your team are currently working on. I even won a prize during &lt;strong&gt;“Name That Design System!”&lt;/strong&gt; (A small victory).&lt;/p&gt;
&lt;p&gt;That wrapped up a busy Day Two in which my head was overflowing with ideas and information. Then it was onward to…&lt;/p&gt;
&lt;h3 id=&quot;day-three&quot; tabindex=&quot;-1&quot;&gt;Day Three&lt;/h3&gt;
&lt;p&gt;The accessibility rock block! Starting off with Michael Austin Sui discussing how (most passionately as well as eloquently) we&#39;re not designing in ways that are accessible to all. That even the smallest things are being overlooked. Something that really sticks with me and will continue to do so for as long as I am designing.&lt;/p&gt;
&lt;p&gt;Michael discussed AirBNB&#39;s approach to inclusive design. The best quote from Michael was “Design systems are your leverage to do better.” and that “Colors project differently on different devices.” couldn&#39;t have rang more true. When shown a slide of four different devices with the same hex code and four different shades of that hex color. I had a lot to take back to the office just in Michael&#39;s talk (a.k.a. Safari Dude) alone!&lt;/p&gt;
&lt;p&gt;Marcy Sutton followed with her talk about CSS techniques and what they mean for accessibility and browser support. How some techniques can impact accessibility in ways that are unexpected, such as the &lt;code&gt;:focus&lt;/code&gt; pseudo class.&lt;/p&gt;
&lt;p&gt;Markup order versus visual order of elements when using layouts such as Flexbox and CSS Grid, for example. A surprising example is that the Space Jam website, that is &lt;strong&gt;still&lt;/strong&gt; online, is more accessible than the Captain Marvel site tht is online from only this year. Amazing.&lt;/p&gt;
&lt;p&gt;Taking care when using Flexbox to change the UI presentation of the tab order of your elements, the first rule of ARIA is not to use it, and a plethora of other tidbits I took with me to better my CSS techniques!&lt;/p&gt;
&lt;p&gt;Derek Featherstone talked about inclusive design, a topic that is important to me. The main question I got out of Derek&#39;s talk was, “Are my design decisions and processes inclusive enough?” and my answer was a resounding “No”. I must do better during the projects I work on to make sure that I am being as inclusive as I can be and then take that ten giant steps further.&lt;/p&gt;
&lt;p&gt;Is what we are doing as a design and development community as a whole, doing an effective enough job to include persons with impairments. We played a game, we had to create an inclusive game of Twister. It was thought provoking to say the least. I came up with an idea to include someone with an impairment, yet failed to figure out a solution for the spinner which goes to show I have a long way and a lot to learn so as to be more inclusive with my methods and designs.&lt;/p&gt;
&lt;p&gt;How do we go about making our tools and methods for collaborating acceptable for people with different types of impairments. The example of the Xbox Adaptive Controller was a fantastic example of how it is done. From the packaging right down to the controller itself.&lt;/p&gt;
&lt;p&gt;Jason Grigsby then took the stage to talk about web forms and “touched” (pardon the bad pun) on Face and Touch ID, password managers (I use LastPass and have used Dashlane and KeePass). Performed some “slight of hand” and stunned the crowd with his digital prestidigitation.&lt;/p&gt;
&lt;p&gt;Jason spoke about Autofill and WebAuthn and also talked about the Payment Request and Credential Management API&#39;s and alluded to the fact we need to offer more than just passwords as a solution to the problem of more than half (51%) of users have a go to password, a favorite if you will, and an astounding 65% of passwords users use are used on more than one site.&lt;/p&gt;
&lt;p&gt;The code example of the &lt;code&gt;ui-mask&lt;/code&gt; and &lt;code&gt;maxlength&lt;/code&gt; and how, for instance, a year field takes only 2 numbers, but should take 4 numbers for the whole year, was enlightening. It was a great look into something that perhaps my company needs to (this will meet with MUCH resistance, this I know) implement.&lt;/p&gt;
&lt;p&gt;Gerry McGovern closed out yet another great conference. Gerry always puts on a great and highly entertaining talk. This and last years conference were a testament to that. Gerry spoke about focusing on your users, taking your users feedback and going to task on adjusting your design to their feedback as to work with them and design with them for your product. Know your users!&lt;/p&gt;
&lt;p&gt;Google, the UK government, and AirBNB were some examples of gradual design that improved. Something yet again my company should look into but might be met with much resistance. In the three plus years at my company, I feel we do not take enough (if any) feedback from our users. Which is a huge mistake. I am pitching hard that we start to do this better. Gerry&#39;s talk just reinforced my feelings on user feedback to better the design of our system.&lt;/p&gt;
&lt;h3 id=&quot;the-summary&quot; tabindex=&quot;-1&quot;&gt;The Summary&lt;/h3&gt;
&lt;p&gt;Personally, this year was a year I was going to try and be a lot more social. I still have a ways to go, all-in-all I was able to shed my insecurities and I was able to mingle, ask a lot of questions, and get over my anxiety over approaching people and talking to them. I got to see a lot of folks I met in 2018 and say hello.&lt;/p&gt;
&lt;p&gt;I met some nice people, talked with a few, had breakfast and lunch with speakers and attendees alike that were and are very nice and pleasant folks who like myself, come to learn from the best and I hope to see them next year as well.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Typetura</title>
		<link href="https://toddl.dev/posts/typetura/"/>
		<updated>Sat, 15 Jun 2019 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/typetura/</id>
		<content type="html">&lt;p&gt;I found this nice tool on Twitter (exactly where escapes me) and I had tinkered around with it and found it very useful. I haven&#39;t used it in production or development when it comes to my projects, but I know that someone could make great use of it somewhere, which is why I am posting this.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://typetura.com/&quot;&gt;Typetura&lt;/a&gt; is (taken from the website) a fluid typesetting tool. Select a breakpoint and then use the style panel to add style to your page. Simple as that.&lt;/p&gt;
&lt;p&gt;You can edit, add text (paragraphs, headings, lists and blockquotes), and tinker with the fonts with many CSS font properties. Take it for a spin, it&#39;s still in beta and the creators, Scott Kellum and Sal Hernandez, are still adding features and killing bugs. They&#39;re also taking questions and feedback. The info for that is right on the website.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>An Introduction to the Cascade</title>
		<link href="https://toddl.dev/posts/an-introduction-to-the-cascade/"/>
		<updated>Sun, 16 Jun 2019 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/an-introduction-to-the-cascade/</id>
		<content type="html">&lt;p&gt;This is just an introduction in a condensed form. Just a minor basic level overview of the cascade.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.w3.org/TR/css-cascade-4/#cascading&quot;&gt;The CSS Cascade Level 4 Spec states&lt;/a&gt;;&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/an-introduction-to-the-cascade/CSS%20Cascade%20Level%204%20Spec&quot;&gt;The cascade takes a unordered list of declared values for a given property on a given element, sorts them by their declaration’s precedence, and outputs a single cascaded value.&lt;/blockquote&gt;
&lt;p&gt;There is an order in which selectors are prioritized. Importance, scope, specificity, and order. Let&#39;s go over each priority starting with importance. You don&#39;t have to take it all in at once. Break down each part until you understand it and then move on to the next section. I have provided code examples along the way.&lt;/p&gt;
&lt;h3 id=&quot;importance&quot; tabindex=&quot;-1&quot;&gt;Importance&lt;/h3&gt;
&lt;p&gt;An &lt;code&gt;!important&lt;/code&gt; declaration takes precedence over a normal declaration. Such as when the star selector is used for site-wide styling, take for instance &lt;code&gt;box-sizing: border-box;&lt;/code&gt; and then the same property (in this case below, &lt;code&gt;background-color&lt;/code&gt;) is using it in the case of the &lt;code&gt;body&lt;/code&gt; selector. So &lt;code&gt;background-color: red !important;&lt;/code&gt; will overrule the &lt;code&gt;background-color: white;&lt;/code&gt;.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;
&lt;span class=&quot;token selector&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; white&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; red &lt;span class=&quot;token important&quot;&gt;!important&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;ul&gt;
&lt;li&gt;
&lt;p&gt;Transition declarations &lt;code&gt;transition-timing-function: steps(6, end);&lt;/code&gt; or &lt;code&gt;transition: all .25s ease-in-out;&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Important user agent declarations&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;
&lt;span class=&quot;token selector&quot;&gt;input, textarea, keygen, select, button, meter, progress&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;-webkit-writing-mode&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; horizontal-tb &lt;span class=&quot;token important&quot;&gt;!important&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;ul&gt;
&lt;li&gt;
&lt;p&gt;Important user declarations &lt;code&gt;p { text-indent: 1em !important; }&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Important author declarations &lt;code&gt;p { text-indent: 1.5em !important; }&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Animation declarations&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@keyframes&lt;/span&gt; slide-right&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token selector&quot;&gt;50%&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;margin-left&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 110px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;opacity&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0.9&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

  &lt;span class=&quot;token selector&quot;&gt;to&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;margin-left&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 200px&lt;span class=&quot;token punctuation&quot;&gt;;&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;ul&gt;
&lt;li&gt;
&lt;p&gt;Normal author declarations &lt;code&gt;p { text-indent: 1.5em; }&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Normal user declarations &lt;code&gt;p { text-indent: 1em; }&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Normal user agent declarations &lt;code&gt;keygen, select { border-radius: 5px; }&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Read more about &lt;a href=&quot;https://www.w3.org/TR/css-cascade-4/#biblio-css-transitions-1&quot;&gt;Transition declarations&lt;/a&gt; here.&lt;br /&gt;
Read more about &lt;a href=&quot;https://www.w3.org/TR/css-cascade-4/#biblio-css-animations-1&quot;&gt;Animation declarations&lt;/a&gt; here.&lt;/p&gt;
&lt;h3 id=&quot;scope&quot; tabindex=&quot;-1&quot;&gt;Scope&lt;/h3&gt;
&lt;p&gt;A declaration can be scoped to a subtree so that it only affects its scoping element and that element’s descendants. An example is &lt;code&gt;html&lt;/code&gt; to &lt;code&gt;body&lt;/code&gt;.&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/an-introduction-to-the-cascade/CSS%20Cascading%20and%20Inheritance%20Level%204&quot;&gt;If the scoping elements of two declarations have an ancestor/descendant relationship, then for normal rules the declaration whose scoping element is the descendant wins, and for important rules the declaration whose scoping element is the ancestor wins.&lt;/blockquote&gt;
&lt;p&gt;So in other words, for normal declarations the inner scope&#39;s declarations override but for the &lt;code&gt;!important&lt;/code&gt; rule the outer scope&#39;s declarations override. Later wins over earlier.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;
&lt;span class=&quot;token selector&quot;&gt;h1&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; red&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;/* This one wins */&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;h1&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; green&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;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;
&lt;span class=&quot;token comment&quot;&gt;/* This one wins due to specificity */&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;.title__heading&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;font-size&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 2em&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token selector&quot;&gt;h1&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;font-size&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 2.8em&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;blockquote cite=&quot;https://toddl.dev/posts/an-introduction-to-the-cascade/MDN%20Web%20Docs&quot;&gt;One thing you should bear in mind when considering all this cascade theory, and what styles get applied over other styles, is that all this happens at the property level — properties override other properties, but you don&#39;t get entire rules overriding other rules. When several CSS rules match the same element, they are all applied to that element. Only after that are any conflicting properties evaluated to see which individual styles will win over others.&lt;/blockquote&gt;
&lt;p&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#A_note_on_rule_mixing&quot;&gt;A not on rule mixing&lt;/a&gt;&lt;/p&gt;
&lt;h3 id=&quot;specificty&quot; tabindex=&quot;-1&quot;&gt;Specificty&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Inline styles (anything between &lt;code&gt;&amp;lt;style&amp;gt;&amp;lt;/style&amp;gt;&lt;/code&gt; tags)&lt;/li&gt;
&lt;li&gt;ID selectors&lt;/li&gt;
&lt;li&gt;Classes / pseudo-selectors&lt;/li&gt;
&lt;li&gt;Type selectors (for example, &lt;code&gt;h1&lt;/code&gt;) &amp;amp; pseudo-elements (&lt;code&gt;::before&lt;/code&gt;)&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;order&quot; tabindex=&quot;-1&quot;&gt;Order&lt;/h3&gt;
&lt;p&gt;The last declaration in document order wins. The order in which you load your stylesheets actually matters. If you’ve got two stylesheets linked in the head of your HTML document, the second stylesheet will override rules in the first stylesheet. This is why resets and &lt;code&gt;@imports&lt;/code&gt; are loaded before anything else in the main stylesheet you are using.&lt;/p&gt;
&lt;h3 id=&quot;summary&quot; tabindex=&quot;-1&quot;&gt;Summary&lt;/h3&gt;
&lt;p&gt;I have seen a lot of folks frustrated that they don&#39;t understand CSS. Some of animosity towards learning it, some disdain towards it. Knowing the cascade benefits the developer. The fundamental knowing of the cascade and how the cascade works will benefit you in the long run. I offer you some suggestions.&lt;/p&gt;
&lt;p&gt;The spec may look daunting and the language may look foreign, but when it comes down to it, it really isn&#39;t. If I can get it, from reading the spec then anyone can get it. There are some brilliant folks out there who knows JavaScript like the back of their hand. When it comes to CSS and the cascade, they say that it is a concept they cannot fully grasp.&lt;/p&gt;
&lt;p&gt;I learn best by breaking things down to their core. Piece by piece. Breaking the cascade down to bits and pieces (just think of Atomic Design - Atoms, Molecules, Organisms) and dissecting those until I fully grasp the concept(s).&lt;/p&gt;
&lt;p&gt;If you have stumbled across this article and have any questions, feel free to use the contact page form and send me a question. I hope this article shed a little bit of light on the cascade for at least one person.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Carbon</title>
		<link href="https://toddl.dev/posts/carbon/"/>
		<updated>Sun, 16 Jun 2019 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/carbon/</id>
		<content type="html">&lt;p&gt;I came across Carbon on Twitter (exactly where escapes me. Again.) when I came across a tweet where there was code shared via Carbon. I thought it was pretty cool and a great way to share code.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://carbon.now.sh/&quot;&gt;Carbon&lt;/a&gt; is (taken from the website) where you can “create and share beautiful images of your source code.”&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/carbon/Carbon&quot;&gt;You know all of those code screenshots you see on Twitter? Although the code&#39;s usually impressive, we saw room for improvement in the aesthetic department. Carbon is the easiest way to create beautiful images of your source code. So what are you waiting for? Go impress all of your followers with your newfound design prowess.&lt;/blockquote&gt;
&lt;p&gt;Plain and simple.&lt;/p&gt;
&lt;p&gt;You can set the color scheme of the image where it uses themes from zsh and terminal color themes, the language you want to use (CSS, Clojure, Twig, Vue, etc.) and wish to share, there are different presets and you can customize the image, with options to tweet it or export it using some different settings.&lt;/p&gt;
&lt;p&gt;If you want an easy way to share code snippets, this is the way!&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Why Your Site Must Be Accessible</title>
		<link href="https://toddl.dev/posts/why-your-site-must-be-accessible/"/>
		<updated>Tue, 18 Jun 2019 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/why-your-site-must-be-accessible/</id>
		<content type="html">&lt;p&gt;Accessibility: &lt;em&gt;adj. that can be used, entered, reached, etc.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Some of us all too often forget how easy it is for us able-bodied persons to access the web. We don&#39;t need screen readers, assistive software, optical character recognition (OCR), adaptive or on-screen keyboards, magnification software. I could go on and on but you probably get the point.&lt;/p&gt;
&lt;p&gt;We able-bodied people are fortunate. As of 2010, 56.7 million people in the United States had a disability of some kind and around 38.3 million people had a severe disability. That&#39;s 95 million people out of (as of 2010) around 309 million people. That&#39;s over a quarter of the entire populace, 30.7% to be precise.&lt;/p&gt;
&lt;h3 id=&quot;what-does-that-have-to-do-with-me%3F&quot; tabindex=&quot;-1&quot;&gt;What does that have to do with me?&lt;/h3&gt;
&lt;p&gt;A: Everything.&lt;/p&gt;
&lt;p&gt;As designers and even developers, we &lt;strong&gt;must&lt;/strong&gt; take into consideration that 30.7% of the population, there shouldn&#39;t be &lt;em&gt;any&lt;/em&gt; argument about it. It&#39;s 2019 folks, time to get inclusive!&lt;/p&gt;
&lt;h4 id=&quot;there&#39;s-that-word-%22inclusive%22&quot; tabindex=&quot;-1&quot;&gt;There&#39;s that word &amp;quot;inclusive&amp;quot;&lt;/h4&gt;
&lt;p&gt;Yes, and it&#39;s here to stay. As of 2016, it was the UN that declared;&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/why-your-site-must-be-accessible/UN%20Universal%20Declaration%20of%20Human%20Rights,%20Article%2019&quot;&gt;Everyone has the right to freedom of opinion and expression; this right includes freedom to hold opinions without interference and to seek, receive and impart information and ideas through any media and regardless of frontiers.&lt;/blockquote&gt;
&lt;p&gt;So we must be inclusive. The UN also added;&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/why-your-site-must-be-accessible/UN%20Universal%20Declaration%20of%20Human%20Rights,%20Section%2032&quot;&gt;The promotion, protection and enjoyment of human rights on the Internet&lt;/blockquote&gt;
&lt;p&gt;So to not make a site accessible, is denying someone of their basic human right. A site that is slow and takes forever to load on a device that is 10 years old but still functions on a 2G/3G network is denying someone of their basic human right. You&#39;ll be surprized how many people access the internet from places you couldn&#39;t and don&#39;t even think of.&lt;/p&gt;
&lt;p&gt;Accessibility is part of the fabric now, it is part of an inclusive experience for those that deserve it. The keyword there is &lt;em&gt;deserve&lt;/em&gt;. Don&#39;t get me wrong, the web is for everyone regardless of age, sex, religion, preferences, gender, color, or creed. I find that some folks just blow off disabled persons. Even if the disability is just a temporary one. Broken arm. Eye surgery. Child on your lap. Yes, those are temporary, situational or conditional disabilities.&lt;/p&gt;
&lt;h3 id=&quot;what-do-i-need-to-do%3F&quot; tabindex=&quot;-1&quot;&gt;What Do I Need To Do?&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;The use of descriptive alt tags.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Just having an alt tag of a boat that says “boat” isn&#39;t good enough. How about “Picture of a boat, a lobster boat coming into dock with a full haul from a day of hauling traps off the Maine coast.”&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Keyboard navigation and Focus&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Check your site to see if you can navigate with the keyboard. All form fields, navigation items, links, buttons and modal dialogues/lightboxes should be accessible without using the mouse. There is some extra steps users with Macs have to take when enabling keyboard navigation in OSX.&lt;/p&gt;
&lt;p&gt;Also enhance &lt;code&gt;:focus&lt;/code&gt; indicators and make them stand out and distinctive.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Form fields&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Make sure form fields have &lt;code&gt;aria-required=&amp;quot;true&amp;quot;&lt;/code&gt; so they are read by screen readers as required.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Closed captioning&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Make sure all videos are closed captioned.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Basic ARIA landmarks&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Use &lt;code&gt;role&lt;/code&gt; properly.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Table tags&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Markup all tables, cells, headers, and captions appropriately.&lt;/p&gt;
&lt;p&gt;These just aren&#39;t it, there is a lot more you can do to make your site accessible that I won&#39;t be covering here but you can go through these links and read on.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://soap.stanford.edu/getting-started/basic-checks&quot;&gt;Stanford - Online Accessibility Program&lt;/a&gt;&lt;br /&gt;
&lt;a href=&quot;https://karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do&quot;&gt;Karl Groves - The 6 Simplest Web Accessibility Tests Anyone Can Do&lt;/a&gt;&lt;br /&gt;
&lt;a href=&quot;https://webaim.org/blog/10-easy-accessibility-tips/&quot;&gt;WebAIM - 10 Easy Accessibility Tips Anyone Can Use&lt;/a&gt;&lt;br /&gt;
&lt;a href=&quot;https://www.w3.org/WAI/test-evaluate/preliminary/&quot;&gt;W3C - Easy Checks - A First Review of Web Accessibility&lt;/a&gt;&lt;br /&gt;
&lt;a href=&quot;https://developer.paciellogroup.com/resources/&quot;&gt;Resources - The Paciello Group&lt;/a&gt;&lt;/p&gt;
&lt;h3 id=&quot;summary&quot; tabindex=&quot;-1&quot;&gt;Summary&lt;/h3&gt;
&lt;p&gt;There is a lot you can do. Do it. Educate yourself, read up on articles, attend conferences, workshops, talk to the speakers there. Soak in all you can about accessibility. You will gain a vast amount of information and in my case, education about accessibility.&lt;/p&gt;
&lt;p&gt;If you are at a job where it is an uphill battle to get your company to recognize and practice accessibility, fight for it. Diplomatically. Push hard, but not too hard. Know your limits. I&#39;ll share from my experience.&lt;/p&gt;
&lt;p&gt;&amp;quot;We don&#39;t need to have accessibility as a priority.&amp;quot; said my boss. All I had to say is, &amp;quot;Yes we do.&amp;quot; I presented one story about why accessibility is important to someone who is focused on company. &amp;quot;Did you hear about Target being sued for their website not being accessible according to the ADA?&amp;quot;&lt;/p&gt;
&lt;p&gt;Attitudes change when you tell suits how they can save money by not paying extra. &amp;quot;If the company gets sued for not adhereing to the ADA, it could cost a few thousand to a million or more to have a company come in and do an audit. I can make sure this doesn&#39;t happen while building the website.&amp;quot;&lt;/p&gt;
&lt;p&gt;It&#39;s funny when you present suits that information how fast they give the green light and the go ahead to &amp;quot;do what you need to do. Make it happen.&amp;quot;&lt;/p&gt;
&lt;p&gt;Be inclusive with your websites, your apps, your designs and remember those who aren&#39;t like you when you design and build great things.&lt;/p&gt;
&lt;p&gt;You got this.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Fear and Accessibility</title>
		<link href="https://toddl.dev/posts/fear-and-accessibility/"/>
		<updated>Fri, 23 Aug 2019 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/fear-and-accessibility/</id>
		<content type="html">&lt;h3 id=&quot;fear-of-the-unknown&quot; tabindex=&quot;-1&quot;&gt;Fear of the Unknown&lt;/h3&gt;
&lt;p&gt;With the recent court appeal to the US Supreme Court with a certain pizza conglomerate, “Dom Inos” I’ll call them, against blind persons, I have been thinking of what could drive a corporation to do something so egregious that it brings about the need for me to voice my opinion.&lt;/p&gt;
&lt;p&gt;What causes people and companies, to forego accessibility for greed and because “it is not necessary”. What could it be? Fear. In my opinion.&lt;/p&gt;
&lt;p&gt;What company hires people to pump out sites that are dependency-laden, framework-driven, and plastered with all the new-fangled, shiny new technologies of the month? 85-95% is my guess. Those companies in turn set deadlines.&lt;/p&gt;
&lt;p&gt;Those deadlines are hard deadlines that need to be met, or else. Those deadlines are met, but sacrificing things such as accessibility audits, accessibility checks, color contrast checks, motion checks if the site is animated more than a Looney Tunes cartoon.&lt;/p&gt;
&lt;p&gt;Companies fear having to go back and spend money to fix what isn’t compliant. Even if it is a pithy percentage of what their yearly revenue is. In the case of “Dom Inos”, it’s less than 0.000000001%. A drop in the bucket. Why fight it? Fear. (Greed also). They don’t want to be the company that sets a precedent legally and their brand tanks.&lt;/p&gt;
&lt;p&gt;CEO’s with absolutely ZERO technical skills, backgrounds, and minimal technical abilities. (I can use Outlook is not a technical skill). “Someone else will handle that, I won’t get my hands dirty if something bad happens. I can pass the buck off and act like I had no idea.”&lt;/p&gt;
&lt;h3 id=&quot;what-about-%E2%80%A6%3F&quot; tabindex=&quot;-1&quot;&gt;What about …?&lt;/h3&gt;
&lt;p&gt;Yes, fear. “Conner doesn’t know WCAG AA accessibility guidelines. We don’t have the time to have him learn because we push this out tomorrow.” is the line I’ve heard while at three different places where I was doing front end development. (All names are not insinuating anyone with the names I have used as examples).&lt;/p&gt;
&lt;p&gt;“What is a contrast checker? Why do we need to check the color contrast of this website? This is going to eat up precious dev time!” or the best one, “Tanner is our CTO and he says that we don’t have disabled people coming to the site.”&lt;/p&gt;
&lt;p&gt;Or the brogrammers who exclaim accessibility is a “nice-to-have” but not necessary. Or some who say not even necessary at all! The CSS-in-JS home boys that stack a color: red; in a quagmire of div tags as far as the eye can see!&lt;/p&gt;
&lt;p&gt;Well, accessibility by all is a right, not a convenience for individuals, companies, or corporations to ignore. The web is a human right, so says the United Nations. (No, really, look it up Chad!).&lt;/p&gt;
&lt;p&gt;Fear of not knowing. Fear of having to spend money. Fear of having to ask for help when doing. Fear of losing precious development time playing in the JS framework playground to hammer out a sparkly new cool feature or wicked awesome animation for the site when a user scrolls.&lt;/p&gt;
&lt;p&gt;800 companies were sued in 2017 and Tanner’s company could be next. Fear needs to be in that developers need to be held accountable. Bottom line. If you don’t make it accessible, then there are ramifications. It looks like those numbers will be met in 2019, if not exceeded.&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/fear-and-accessibility/Bruce%20Lawson&quot; class=&quot;twitter-tweet&quot; data-lang=&quot;en&quot;&gt;&amp;quot;The rate of lawsuits filed in federal courts related to website and app accessibility has now hit a rate of one-an-hour, that’s 8 a day, 40 per week and set to be on pace for over 2,000 lawsuits again this year.&amp;quot; &lt;a href=&quot;https://t.co/eNwUpsFQtH&quot;&gt;https://t.co/eNwUpsFQtH&lt;/a&gt;&amp;mdash; Bruce Lawson (@brucel) &lt;a href=&quot;https://twitter.com/brucel/status/1164829479010590720?ref_src=twsrc%5Etfw&quot;&gt;August 23, 2019&lt;/a&gt;&lt;/blockquote&gt;
&lt;h3 id=&quot;where-do-we-go-from-here%3F&quot; tabindex=&quot;-1&quot;&gt;Where do we go from here?&lt;/h3&gt;
&lt;p&gt;It’s not difficult. If I can do it… if I can convince companies I have worked with and firms, and individuals… learning how to do it is one of the most simple (and for me, solely speaking, easiest) thing developers can do!&lt;/p&gt;
&lt;p&gt;The problem is will the lazy web do it? Or will we just keep rolling out more inaccessible sites or applications keeping people off a platform that they deserve every right to be able to access. Hence the term “accessibility”.&lt;/p&gt;
&lt;p&gt;It’s not rocket science folks, it’s a right. Let’s make it so the web is all-inclusive, not a resort for the privileged brogrammers who are white males, no impairments or disabilities, who are ordering pizzas off the “Dom Inos” app and playing fantasy football on their favorite sports website in their man caves.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>CORS, CodePen &amp; Me</title>
		<link href="https://toddl.dev/posts/cors-codepen-and-me/"/>
		<updated>Fri, 06 Sep 2019 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/cors-codepen-and-me/</id>
		<content type="html">&lt;h3 id=&quot;cors%2C-codepen-and-me&quot; tabindex=&quot;-1&quot;&gt;CORS, CodePen and Me&lt;/h3&gt;
&lt;p&gt;I have been experimenting and leaning about Variable Fonts ever since &lt;a href=&quot;https://rwt.io/&quot;&gt;Jason Pamental&lt;/a&gt; spoke at An Event Apart this past May in Boston. I had been following Jason as well as Mandy Michael and Scott Kellum’s works/tweets/articles/talks as well. All great stuff.&lt;/p&gt;
&lt;p&gt;I was (and still am very much so) intrigued, as I am with most everything spoken about at conferences, in using variable fonts for not only my site but for work projects as well. When &lt;a href=&quot;https://ethanmarcotte.com/&quot;&gt;Ethan Marcotte&lt;/a&gt; coined “responsive web design” I wondered shortly afterwards, “I wonder if fonts and typography will be soon to follow?” Well, much to my delight it did!&lt;/p&gt;
&lt;p&gt;On a pen on my CodePen account, the heading was not showing for me but forked pen by Jason had it coming in quite nicely. I had tried to get the pens to render the variable fonts I had tried to use for over a month with no success because I did not know about the CORS issue.&lt;/p&gt;
&lt;p&gt;CORS, or Cross-Origin Resource Sharing, is, according to &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS&quot;&gt;MDN&lt;/a&gt; (Mozilla Developer Network);&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/cors-codepen-and-me/MDN&quot;&gt;a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) than its own origin.&lt;/blockquote&gt;
&lt;p&gt;So, unbeknownst to me, browsers restrict cross-origin HTTP requests initiated from within scripts. &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS&quot;&gt;To quote from MDN again&lt;/a&gt;;&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/cors-codepen-and-me/MDN&quot;&gt;This means that a web application using those APIs can only request HTTP resources from the same origin the application was loaded from, unless the response from the other origin includes the right CORS headers.&lt;/blockquote&gt;
&lt;p&gt;I had tweeted out to Jason if he could take a peek and see what the issue was because I was still unaware of the CORS issue until Scott Kellum (@ScottKellum) tweeted at me about it. So I went right to the search engine (DuckDuckGo for this guy) and did a search which came up with some good stuff.&lt;/p&gt;
&lt;h3 id=&quot;how-did-i-solve-it%3F&quot; tabindex=&quot;-1&quot;&gt;How did I solve it?&lt;/h3&gt;
&lt;p&gt;The best (and easiest) solution I found came from here &lt;a href=&quot;http://bit.ly/2U2DV5s&quot;&gt;http://bit.ly/2U2DV5s&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;So, in the netlify.toml file, I just implemented these headers;&lt;/p&gt;
&lt;pre class=&quot;language-markdown&quot;&gt;&lt;code class=&quot;language-markdown&quot;&gt;[[headers]]
for = &quot;/&lt;span class=&quot;token italic&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;*&lt;/span&gt;&lt;span class=&quot;token content&quot;&gt;.woff&quot;
[headers.values]
Access-Control-Allow-Origin = &quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;*&lt;/span&gt;&lt;/span&gt;&quot;
Content-Type = &quot;application/font-woff&quot;&lt;/code&gt;&lt;/pre&gt;
&lt;pre class=&quot;language-markdown&quot;&gt;&lt;code class=&quot;language-markdown&quot;&gt;[[headers]]
for = &quot;/&lt;span class=&quot;token italic&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;*&lt;/span&gt;&lt;span class=&quot;token content&quot;&gt;.woff2&quot;
[headers.values]
Access-Control-Allow-Origin = &quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;*&lt;/span&gt;&lt;/span&gt;&quot;
Content-Type = &quot;application/font-woff2&quot;&lt;/code&gt;&lt;/pre&gt;
&lt;pre class=&quot;language-markdown&quot;&gt;&lt;code class=&quot;language-markdown&quot;&gt;[[headers]]
for = &quot;/&lt;span class=&quot;token italic&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;*&lt;/span&gt;&lt;span class=&quot;token content&quot;&gt;.ttf&quot;
[headers.values]
Access-Control-Allow-Origin = &quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;*&lt;/span&gt;&lt;/span&gt;&quot;
Content-Type = &quot;application/font-ttf&quot;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;And went to test and they worked! It took about 15 minutes of searching and reading and only less than 5 minutes of placing the appropriate code in and pushing it live!&lt;/p&gt;
&lt;p&gt;If there is a better, or easier way to implement this, I would be very interested in knowing and learning. The other ways involved a little bit of in-depth command line work and I’m not knocking those methods (nor would I be scared to do them) but this one just seemed a lot easier for what I was trying to accomplish was for me to be able to see the variable font I was calling off my site in CodePen.&lt;/p&gt;
&lt;h3 id=&quot;special-thanks&quot; tabindex=&quot;-1&quot;&gt;Special Thanks&lt;/h3&gt;
&lt;p&gt;Thanks to &lt;a href=&quot;https://twitter.com/@jpamental&quot;&gt;Jason Pamental - @jpamental&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/@ScottKellum&quot;&gt;Scott Kellum - @ScottKellum&lt;/a&gt; and &lt;a href=&quot;https://twitter.com/@sarah_edo&quot;&gt;Sarah Drasner - @sarah_edo&lt;/a&gt; for their guidance and assistance!&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Open House</title>
		<link href="https://toddl.dev/posts/open-house/"/>
		<updated>Fri, 18 Oct 2019 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/open-house/</id>
		<content type="html">&lt;p&gt;I finally am getting around to writing again after not having written for some time. This is about my adventure down to &lt;a href=&quot;https://djr.com/&quot;&gt;David Jonathan Ross&lt;/a&gt;&#39;s home in Conway, Massachusetts for an open house. It was a great weekend full of adventure and meeting people I normally wouldn&#39;t have, talking typography and fonts, and watching some very cool and extremely awesome rpesentations.&lt;/p&gt;
&lt;p&gt;The tour around town was nice. Conway is a quaint little town in Western Massachusetts. A night of fun and discussion followed on the first night there. A tour of the historical society looking at all the pieces there was very interesting, and the pizza at the local bar was excellent.&lt;/p&gt;
&lt;p&gt;All the presentations were great on the second day. As well as the early morning apple picking and tour around the immediate area. Some maple flavored soft serve ice cream at Hager&#39;s Farm Stand, driving around the area and looking at the very beautiful scenery, some excellent apples at Apex Orchards and getting to know some folks there a little was what the doctor ordered for the beginnings of burnout that I was experiencing.&lt;/p&gt;
&lt;p&gt;It was made even better by meeting Scott Kellum, Sal Hernandez and Ana Monroe from &lt;a href=&quot;https://typetura.com/&quot;&gt;Typetura&lt;/a&gt; of whom have created one of the best typographical resources on the web today with Typetura. The site looks great as well and I wish them all the luck going forward and much success.&lt;/p&gt;
&lt;p&gt;Talking a bit with DJR was a pleasure. Since I started getting into learning about variable fonts, I was suggested to visit his site for fonts all of which are so finely crafted. His studio is amazing as well as his work. A welcoming host and extremely gracious one at that. It was a pleasure being able to go down and be out of my element for a weekend.&lt;/p&gt;
&lt;p&gt;A pleasant surprise was getting to catch up with &lt;a href=&quot;https://rwt.io/&quot;&gt;Jason Pamental&lt;/a&gt; again before another get together in &lt;a href=&quot;https://aneventapart.com/event/denver-2019&quot;&gt;Denver at An Event Apart&lt;/a&gt;. I was also taken aback by a very generous invite which I won&#39;t reveal until after the conference and I get back, decompress and write about the week. Suffice it to say, it is something that I am absolutely gobsmacked that I am able to do, and even though I never thought it would ever happen, I can put it on my bucket list and cross it off. I am forever indebtted and grateful to know Jason and call him a friend.&lt;/p&gt;
&lt;p&gt;Back to the weekend. A great breakfast, some great conversation and as much as I would have loved to stay and taken a walk around town for the fair that was going on where we were, I had to drive four hours and the crowd of about thirty people were starting to disperse. I was able to get a picture with DJR and Jason, I was hoping to get Scott, Ana, and Sal for a group photo as well, but they had a long way to travel 8-9 hours back to Washington D.C.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;img src=&quot;https://toddl.dev/img/breakfastphotoop.jpg&quot; alt=&quot;From left to right, Jason Pamental, Todd Libby, and David Jonathan Ross at breakfast Sunday morning&quot; class=&quot;content__image&quot; /&gt;
&lt;/div&gt;
&lt;figcaption&gt;An early morning breakfast photo op, fanboy moment. (L to R - Jason Pamental, myself, David Jonathan Ross)&lt;/figcaption&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;img src=&quot;https://toddl.dev/img/group-photo.jpg&quot; alt=&quot;A group photo at the attendees at David Jonathan Ross&#39;s open house. Photo taken at Apex Orchards, courtesy of Matthew Rechs&quot; class=&quot;content__image&quot; /&gt;
&lt;/div&gt;
&lt;figcaption&gt;and here is the group photo, courtesy of Matthew Rechs, taken at Apex Orchards&lt;/figcaption&gt;
&lt;h3 id=&quot;summary&quot; tabindex=&quot;-1&quot;&gt;Summary&lt;/h3&gt;
&lt;p&gt;Overall. I had a blast. I don&#39;t get out much and do thing like this. It is rare. It was great meeting people and getting to talk to folks outside the programming world (there were a few programmers there as well). For someone that feels like he is alone in a room full of people sometimes, I can say it helped my hesitation to do social things like this.&lt;/p&gt;
&lt;p&gt;To DJR. Thank you for hosting a wonderful event and I hope to do it again at some point! I&#39;m grateful to have met you, talked with you, and your kindness was greatly appreciated.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>An Event Apart 2019 - Denver Wrap-Up Edition, Part One</title>
		<link href="https://toddl.dev/posts/an-event-apart-denver-2019-part-one/"/>
		<updated>Mon, 28 Oct 2019 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/an-event-apart-denver-2019-part-one/</id>
		<content type="html">&lt;h3 id=&quot;an-event-apart-denver-2019%2C-denver%2C-co&quot; tabindex=&quot;-1&quot;&gt;An Event Apart Denver 2019, Denver, CO&lt;/h3&gt;
&lt;h4 id=&quot;the-day-before&quot; tabindex=&quot;-1&quot;&gt;The Day Before&lt;/h4&gt;
&lt;p&gt;I got into Denver after seven hours of travel, and it had been thirty-two years since I had been here. It was snowing, which I could have waited on but still I was traveling again. I got to do something I never thought I would ever do and that was attend the speaker meeting prior to the conference.&lt;/p&gt;
&lt;p&gt;I got a huge bear hug from my new friend Jason Ogle, the man behind the &lt;a href=&quot;https://userdefenders.com/&quot;&gt;User Defenders Podcast&lt;/a&gt;. One of my favorites, I highly suggest folks subscribe, listen, join the User Defenders community and &lt;a href=&quot;https://patreon.com/userdefenders&quot;&gt;become a patron on Patreon&lt;/a&gt;.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/jasono-todd.jpg&quot; alt=&quot;Jason Ogle and Todd Libby&quot; /&gt;
    &lt;figcaption&gt;(L to R: Myself and Jason Ogle, creator of the User Defenders Podcast)The main reason why I traveled to Denver. This guy and the User Defenders Podcast.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;I got to meet &lt;a href=&quot;https://miriam.codes/&quot;&gt;Miriam Suzanne&lt;/a&gt;, whom has been doing videos for Mozilla Developers, along with Jen Simmons on YouTube for some time now and it was a plesant surprise to see her there!&lt;/p&gt;
&lt;p&gt;I got to meet Sarah Drasner, and Phil Hawksworth whom work for Netlify. Which was also another pleasant surprise. I knew Sarah was a speaker there, but I did not know Netlify (as a sponsor) and Phil would be there. So I got some more laptop stickers and schwag from the Netlify table. Also a really nice Netlify t-shirt!&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/sd-ph-tl.jpg&quot; alt=&quot;Sarah Drasner, Phil Hawksworth and Todd Libby at the Netlify table at An Event Apart Denver&quot; /&gt;
    &lt;figcaption&gt;(L to R: Sarah Drasner, Myself and Phil Hawksworth, at the Netlify table in Denver at An Event Apart Denver.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;Probably one of, if not the most awesome experiences of the trip was the speaker dinner. Now if you do not know, the speakers usually set aside the night before for dinner for the group. Something I thought I&#39;d never experience because I am not a speaker. Well, that all changed due, in part to Jason Pamental adding me as a +1 and I could not be more grateful to know Jason. An experience I will never forget and I had a phenomenal time. Talking with folks on the walk to the restaurant was the highlight of the day. Weary with travel, but excited being able to attend this event. Forever grateful.&lt;/p&gt;
&lt;h4 id=&quot;day-one&quot; tabindex=&quot;-1&quot;&gt;Day One&lt;/h4&gt;
&lt;p&gt;&lt;a href=&quot;https://zeldman.com/&quot;&gt;Jeffrey Zeldman&lt;/a&gt; kicked it off with his talk on Slow Design for an Anxious World. I could listen to this talk over and over and over. Slowing the design down makes it more comprehensive for the reader. Slowing the design down so that readers can comprehend web pages and make better decisions. Learn to make layouts that help the user relax, sit back and enjoy the design, comprehension and engagement on a much less stressful level when web pages are either too slow or too fast.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/jz.jpg&quot; alt=&quot;Jeffrey Zeldman on stage at An Event Apart Denver&quot; /&gt;
    &lt;figcaption&gt;Jeffrey Zeldman on stage at An Event Apart Denver talking about Slow Design for an Anxious World.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/jp.jpg&quot; alt=&quot;Jason Pamental on stage at An Event Apart Denver&quot; /&gt;
    &lt;figcaption&gt;Jason Pamental on stage at An Event Apart Denver speaking about Dynamic Typographic Systems and Variable Fonts.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;&lt;a href=&quot;https://rwt.io/&quot;&gt;Jason Pamental&lt;/a&gt; navigated the land of Variable Fonts and Typography and as always, a super treat, Tristan and Tillie, his collies, are in his slides. Love the dog pictures and tweets! His talk included how developments in the field of typography and variable fonts make it easier to create robust, scalable typographic systems on the web. Fantastic stuff, phenomenal talk by someone I am grateful to call a friend. You should, if you love typography, or even if you don&#39;t and want to learn about typography and variable fonts, &lt;a href=&quot;https://rwt.io/newsletter&quot;&gt;subscribe to Jason&#39;s fantastic newsletter&lt;/a&gt;. It&#39;s well worth it!&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://trentwalton.com/&quot;&gt;Trent Walton&lt;/a&gt; spoke about the repercussions of using third parties when it comes to integrating such things as a commenting system or online fonts. How much can a website weigh without you knowing it and who is tracking us? Trent also took us through tools he uses and methods to see what a site is doing behind the scenes and reasons why to use apps like Ghostery. This always made me think a lot more when I first heard Trent&#39;s talk in Boston about all the bloat that comes with different third-party systems. Great refresher and the artwork from Trent&#39;s son was top notch!&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/tw.jpg&quot; alt=&quot;Trent Walton on stage at An Event Apart Denver&quot; /&gt;
    &lt;figcaption&gt;JTrent Walton discussing third-party scripts and services and the impact they can have on site performance.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;Even Trent&#39;s son, Charlie helped out with some of the slides. Of which were excellently done!&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/tw-art.jpg&quot; alt=&quot;Trent Walton&#39;s son Charlie and his art, helped his dad out in his slides&quot; /&gt;
    &lt;figcaption&gt;Trent&#39;s son Charlie helped out with the slide presentation and produced some excellent art for dad to show the crowd at An Event Apart&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;&lt;a href=&quot;https://meyerweb.com/&quot;&gt;Eric Meyer&lt;/a&gt; came up after lunch and talked about generated content. Pullquotes, blockquotes, gradients, &lt;code&gt;::before&lt;/code&gt; and &lt;code&gt;::after&lt;/code&gt;. Lots of great stuff, some M*A*S*H theme music, and lots of CSS! Even an Under Construction redux using CSS. Those need to come back into style. Literally. Eric also spoke about what is good generated content, what can we do with it? How far can we push it? So much to think about when dealing with generated content.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/em.jpg&quot; alt=&quot;Eric Meyer on stage at An Event Apart Denver&quot; /&gt;
    &lt;figcaption&gt;Eric Meyer spoke about generated content, how it is good, what we can do with it and how far can we push it to create creative generted content and use it as a tool for everyday use.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;&lt;a href=&quot;https://rachelandrew.co.uk/&quot;&gt;Rachel Andrew&lt;/a&gt; followed with her &amp;quot;Making Things Better: Redefining the Technical Possibilities of CSS&amp;quot; talk. Flexbox, CSS Grid, Subgrid, some great looks at some of the current and future technical possibilities for developers and designers for creating things on the web. Multicol, Scroll snap, Subgrid. All things I am excited to implement. Page Layout was even mentioned and I didn&#39;t even remember that from her Boston talk. Rachel is one of a few when it comes to CSS and Grid Layout, who I consider the gold standards from learning from the other being the next speaker I&#39;ll be talking about below. Jen Simmons.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/ra.jpg&quot; alt=&quot;Rachel Andrew on stage at An Event Apart Denver&quot; /&gt;
    &lt;figcaption&gt;Rachel Andrew talked about what is coming to browsers soon, the technical aspects of what&#39;s coming down the road and what that means for CSS.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/js.jpg&quot; alt=&quot;Jen Simmons on stage at An Event Apart Denver&quot; /&gt;
    &lt;figcaption&gt;Jen Simmons spoke to the crowd in Denver about creating accessible and reusable page and component layouts and how to create something we thought we could never do before.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;&lt;a href=&quot;https://jensimmons.com/&quot;&gt;Jen Simmons&lt;/a&gt; wrapped up the day of speakers with her phenomenal talk about Designing Intrinsic Layouts. Creating accessible, reusable and component layouts. The art of graphic design and how we can now do things on the web we only could dream about years prior. How to do a header real easy and simple in Grid and Flex. Jen always brings the good stuff with so many creative examples of her experiments on her own site as well. Jen&#39;s examples of layouts that are done in comparison to some of the things found in graphic arts posters and magazines is simply amazing.&lt;/p&gt;
&lt;h4 id=&quot;the-user-defenders-podcast&quot; tabindex=&quot;-1&quot;&gt;The User Defenders Podcast&lt;/h4&gt;
&lt;p&gt;Jason Ogle came to the stage with three speakers to do a live show of his User Defenders podcast. Joined by Mina Markham, Farai Madzima, and Derek Featherstone, they traversed many subjects in the hour such as inclusion, accessibility, and ethics. It was a pleasure and privilege to be there and to have helped out in a small way by recording video of the podcast. Terrific episode!&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/udp.png&quot; alt=&quot;User Defenders Podcast live on stage at An Event Apart Denver. From Left to right, Derek Featherstone, Farai Madzima, Mina Markham and Jason Ogle sitting on stage on stools with a blue curtain backdrop. Photo courtesy of Jeffrey Zeldman&quot; /&gt;
    &lt;figcaption&gt;From Left to right, Derek Featherstone, Farai Madzima, Mina Markham and Jason Ogle sitting on stage on stools with a blue curtain backdrop talking during the live podcast of User Defenders hosted by Jason Ogle. Photo courtesy of Jeffrey Zeldman.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;I was able to help out and film video with my new iPhone 11 Pro Max in 4k, so I am anxious to see the video after all the editing is done and see how it came out. I was more than happy to have been able to help out Jason, who I consider now a good friend. If you&#39;re not subscribed to the User Defenders podcast, you are missing out! &lt;a href=&quot;https://userdefenders.com/subscribe/&quot;&gt;Go subscribe today&lt;/a&gt;!&lt;/p&gt;
&lt;p&gt;The dinner after with Jason Ogle, Jason Pamental, Derek Featherstone and Eric Meyer was at a place that was referred to me by a friend, the name of the place, iRamen+Fish. It was terrific. A lot of good food and great conversation. I had a great time. A definite highlight of the trip as well. I was glad they all came along for dinner with me.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/dinner.jpg&quot; alt=&quot;From Left to right, Jason Pamental, Eric Meyer, Todd Libby, Jason Ogle, and Derek Featherstone sitting at a table at dinner in Denver, Colorado. Photo courtesy of Jason Ogle&quot; /&gt;
    &lt;figcaption&gt;Dinner at iFish+Ramen with this terrific group of people that came out to dinner with me. Photo courtesy of Jason Ogle.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;A fantastic kickoff to the conference! I don&#39;t think it could have gotten any better than this. Dinner with some of the best people I have had the privilege to meet and get to know over the years. Every time I am at a conference with these folks I learn something new and have a good time doing so.&lt;/p&gt;
&lt;p&gt;That was the end of Day One. A day of learning, of friendship and of good food. &lt;a href=&quot;https://toddl.dev/posts/an-event-apart-denver-2019-part-two/&quot;&gt;On to Day Two&lt;/a&gt;!&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>An Event Apart 2019 - Denver Wrap-Up Edition, Part Two</title>
		<link href="https://toddl.dev/posts/an-event-apart-denver-2019-part-two/"/>
		<updated>Tue, 29 Oct 2019 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/an-event-apart-denver-2019-part-two/</id>
		<content type="html">&lt;h3 id=&quot;an-event-apart-denver-2019%2C-denver%2C-co&quot; tabindex=&quot;-1&quot;&gt;An Event Apart Denver 2019, Denver, CO&lt;/h3&gt;
&lt;h4 id=&quot;day-two&quot; tabindex=&quot;-1&quot;&gt;Day Two&lt;/h4&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/jc.jpg&quot; alt=&quot;Josh Clark on stage at An Event Apart Denver&quot; /&gt;
    &lt;figcaption&gt;Josh Clark speaking on stage at An Event Apart Denver on machine learning and what it can do for humans.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;&lt;a href=&quot;https://bigmedium.com/&quot;&gt;Josh Clark&lt;/a&gt;, the Eleventh Strongest Man in Maine, started the day off talking about machines. Automation.&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/an-event-apart-denver-2019-part-two/Josh%20Clark&quot;&gt;How can we use technology in a way that adds meaning?&quot;&lt;/blockquote&gt;
&lt;p&gt;What is it to have machine learning as a design material. What can machine learning do for us? How can we act on patterns we detect in machine learning and bringing them into the products we design and use. Slack, predictive keyboards, forms, survey tools. We can get cozy with casual uses of machine learning. I&#39;m also gunning for that tenth spot on the list Josh!&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/jc-tl.jpg&quot; alt=&quot;Josh Clark and Todd Libby at An Event Apart Denver in the hallway posing for a photo.&quot; /&gt;
    &lt;figcaption&gt;Josh Clark on the left and Todd Libby on the right posing for a photo in the hallway at the Hilton Denver City Center at An Event Apart Denver 2019.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/bd.jpg&quot; alt=&quot;Beth Dean on stage at An Event Apart Denver.&quot; /&gt;
    &lt;figcaption&gt;Beth Dean speaking at An Event Apart Denver on the impact technology and design has on social aspects of society and technology.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;&lt;a href=&quot;http://www.thebethdean.com/&quot;&gt;Beth Dean&lt;/a&gt; was next, speaking about Unsolved Problems. Talking about the impact of technology and the social impact it has. Design and the effects it has on people, places and things. Taking us through a walk through different places in the world and the designs done that help the social impact that benefits people and economies. Architectural designs that impact certain aspects of environments and places, what happens when designs are good and what happens when designs go bad.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/fm.jpg&quot; alt=&quot;farai Madzima at An Event Apart Denver speaking on diversity and inclusion.&quot; /&gt;
    &lt;figcaption&gt;Farai Madzima at An Event Apart Denver speaking about inclusion and diversity and how to make design teams work together and make successful products. (Photo courtsey of Jason Ogle)&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;&lt;a href=&quot;https://faraimadzima.com/&quot;&gt;Farai Madzima&lt;/a&gt; spoke next about how design teams can  work well together to make products that make the company profitable and make the world a better place. How can we make our teams more diverse? How can we keep those people that are lost when the environments they are in aren&#39;t safe and they leave?&lt;/p&gt;
&lt;p&gt;How can we make this industry more diverse and inclusive? All are fantastic questions and the answers are there in the future, but we&#39;re working on them now. Farai’s talk captured me, entranced me, and make me think. I need to stop and assist in the need for tech to make change. A phenomenal talk that I am super glad to have seen.&lt;/p&gt;
&lt;p&gt;It was a pleasure and I am grateful to have met Farai, had a great disscussion with him at lunch and was able to be there for his talk.a11y&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/fm-tl.jpg&quot; alt=&quot;Farai Madzima and Todd Libby at An Event Apart Denver posing for a photo.&quot; /&gt;
    &lt;figcaption&gt;Farai Madzima on the left and Todd Libby on the right posing for a photo in the dining room at the Hilton Denver City Center at An Event Apart Denver 2019.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;After the lunch break, &lt;a href=&quot;https://www.lukew.com/&quot;&gt;Luke Wroblewski&lt;/a&gt; came to the stage and showed us how people use devices today and how design needs to adapt. people spend three hours a day on mobile app and there are four billion mobile devices out there. How conversion rates increased with certain companies when removing things that were bothersome or not needed when it came to mobile devices.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/lw.jpg&quot; alt=&quot;Luke Wroblewski on stage at An Event Apart Denver&quot; /&gt;
    &lt;figcaption&gt;Luke Wroblewski on stage discussing how people use devices todya, mainly mobile devices and how design needs to adapt to the number of mobile devices used.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;Remove all friction that distracts the user from experiencing the product value, don&#39;t be afraid to educate contextually when it comes to successful onboarding. Get people to product value as soon as possible, but not faster. Edit distractions and teach in the moment.&lt;/p&gt;
&lt;p&gt;It was great to hear and see Luke again. The last time I had heard him speak was in Boston in 2008, it was also great to have been at the speaker dinner and had some great and hilarious conversation with him as well.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/mm.jpg&quot; alt=&quot;Mina Markham on stage at An Event Apart Denver&quot; /&gt;
    &lt;figcaption&gt;Mina Markham on stage discussing lots of great topics including progressive enhancement, design, accessibility, localization, and most importantly, inclusion.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;&lt;a href=&quot;http://mina.codes/&quot;&gt;Mina Markham&lt;/a&gt; then took the stage for Full-Featured Art Direction for the Web, creator of the Pantsuit UI Pattern Library for the Hilary Clinton campaign in 2016, Mina took us through progressive enhancement and little design changes that make for huge payoffs in the end design-wise. Localization is important.&lt;/p&gt;
&lt;p&gt;Mina talked about localization on Slack and how it was rough at the beginning when the team was translating but not localizing. Inclusion and how art direction is inclusive. Very important to many, including myself and for crying out loud Beyonce! HIRE MINA MARKHAM! Mina also reminds us that not only is color contrast important for art and design, but for accessibility sake.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/mm-tl.jpg&quot; alt=&quot;Mina Markham and Todd Libby sitting on stage at An Event Apart Denver posing for the photo.&quot; /&gt;
    &lt;figcaption&gt;Mina Markham and Todd Libby posing for a photo sitting on stage at An Event Apart Denver after Mina&#39;s great talk.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;Then we all took this photo op, seeing is I had the shirt (one of many colors) and Jen had the idea of taking this photo. Unfortunately Rachel wasn&#39;t feeling well and was unable to join us, but I hope one day to wear this with all five women and have that picture taken. That would be epic.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/ms-tl-mm-js.jpg&quot; alt=&quot;Miriam Suzanne, Todd Libby, Mina Markham, and Jen Simmons standing in the conference hall at An Event Apart Denver. Todd has his red Andrew&amp; Simmons&amp; Markham&amp; Soueidan&amp; Jina shirt on.&quot; /&gt;
    &lt;figcaption&gt;Miriam Suzanne, Todd Libby, Mina Markham, and Jen Simmons posing for a photo  at An Event Apart Denver.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;To finish off Day Two was &lt;a href=&quot;https://danmall.me/&quot;&gt;Dan Mall&lt;/a&gt; talking about Putting the &#39;Design&#39; in Design Systems. A deep dive into design systems, again playing the &lt;em&gt;&amp;quot;Name That Design System&amp;quot;&lt;/em&gt; game show (which I &#39;won&#39; at Boston and did not participate in). I could listen to this talk again and again, as well as listen to Dan again and again.&lt;/p&gt;
&lt;p&gt;Dan explains it&#39;s not the components, it&#39;s about how they relate to each other. How to make your design system distinct, there are multiple design principles you can use, universal principles &lt;em&gt;&amp;quot;accessible&amp;quot;&lt;/em&gt; and &lt;em&gt;&amp;quot;simple&amp;quot;&lt;/em&gt;.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/dm.jpg&quot; alt=&quot;Dan Mall at An Event Apart Denver talking about Design Systems.&quot; /&gt;
    &lt;figcaption&gt;Dan Mall on stage discussing design systems at An Event Apart Denver.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;Dan takes us through some of the most well-known design systems and how many components they have in our search for a comprehensive design system. They why&#39;s on why there are certain components with certain design systems. A great way to cap off another phenomenal day at An Event Apart.&lt;/p&gt;
&lt;p&gt;Farai&#39;s talk was the highlight of Day Two and the entire conference, in my opinion. That ws the enlightenment I had needed in my professional life, most definitely. Now... &lt;a href=&quot;https://toddl.dev/posts/an-event-apart-denver-2019-part-three/&quot;&gt;on to Day Three. The final day!&lt;/a&gt;&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>An Event Apart 2019 - Denver Wrap-Up Edition, Part Three</title>
		<link href="https://toddl.dev/posts/an-event-apart-denver-2019-part-three/"/>
		<updated>Thu, 31 Oct 2019 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/an-event-apart-denver-2019-part-three/</id>
		<content type="html">&lt;h3 id=&quot;an-event-apart-denver-2019%2C-denver%2C-co&quot; tabindex=&quot;-1&quot;&gt;An Event Apart Denver 2019, Denver, CO&lt;/h3&gt;
&lt;h4 id=&quot;day-three---the-final-chapter&quot; tabindex=&quot;-1&quot;&gt;Day Three - The Final Chapter&lt;/h4&gt;
&lt;p&gt;I never look forward to the final day because it’s the final day. With all good things however, they must come to an end.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/ko.jpg&quot; alt=&quot;Kate O&#39;Neill at An Event Apart Denver speaking on human experience in technology.&quot; /&gt;
    &lt;figcaption&gt;Kate O&#39;Neill on stage discussing human experience in tech at An Event Apart Denver.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;Kate O&#39;Neill kicked off Day Three with human experiences in technology. Kate went into business objectives and what humans are trying to accomplish through those experiences. Building our best tech, grow our best businesses, and become our best selves. Kate touched on meaning and innovation as she spoke about things like Augmented Reality (AR), machine work, and technological capabilities. I was in Boston when Kate gave this talk and it was a good reminder to hear it again. Especially when she touched upon the Amazon Go store. People can&#39;t help other people get things off the shelf at an Amazon Go store, which takes the humanity out of the shopping experience creating a poor experience.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/sd.jpg&quot; alt=&quot;Sarah Drasner at An Event Apart Denver talking about Animation on the Web.&quot; /&gt;
    &lt;figcaption&gt;Sarah Drasner on stage discussing Animation on the Web at An Event Apart Denver.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;Sarah Drasner took the stage after with &amp;quot;Animation on the Bleeding Edge&amp;quot;. Sarah spoke about emotions and how &amp;quot;the web is first and foremost about communicating&amp;quot;. She then showed everyone Nuxt and it is impeccable timing for me to be here as I am going to be (and I already am when I can) learning Vue.js. Showing animations in Vue 2 using GreenSock. This looks like something I could really enjoy learning for sure. Different types of animations and their responsive qualities, but then Sarah took us through responsiveness in 3D! This part of her talk was terrific. Some terrific, mind-blowing demos from Sarah making me want to learn Vue and Nuxt now. This was the first time I have seen and heard Sarah speak and it was truly as phenomenal as her slides of her artwork were.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/sd-code.jpg&quot; alt=&quot;Code snippets from Sarah Drasner&#39;s talk at An Event Apart Denver&quot; /&gt;
    &lt;figcaption&gt;Code snippets from Sarah Drasner&#39;s talk at An Event Apart Denver.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;Val Head came up with &amp;quot;Making Motion Inclusive&amp;quot; and started off with motion. Referring to the WCAG, Val took us through the guidelines. Flashing items, movement and animation within content that may be harmful (seizure inducing triggers) on the WCAG 2.0 AA &amp;amp; AAA levels. Val went into animation that affects folks with vestibular orders such as motion sickness and migraines. How those animations and things like parallax can physically make someone with a vestibular order (like myself) sick. Val then went into talking about &lt;code&gt;prefers-reduced-motion&lt;/code&gt;. Another talk I saw in Boston (that you can also read about in the archives) and another talk I was glad to hear again for sure.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/vh.jpg&quot; alt=&quot;Val Head at An Event Apart Denver talking about Motion on the Web.&quot; /&gt;
    &lt;figcaption&gt;Val Head discussing motion on the web and making motion and animation accessible at An Event Apart Denver.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;So for lunch I decided to go out for lunch and meet up with my friend Chris DeMars. I asked if Jason Pamental wanted to go and he agreed and we met Chris at La Loma. Lunch was phenomenal. Not much time to spent, but time well spent indeed and good food, good conversation. Chris and I were supposed to go over to the General Assembly building and hear Eric Meyer talk on Tuesday night but the weather was not good at all and the event was cancelled, which was a bummer, but I got to hear a lot of great stuff this week. I was also bummed I wasn&#39;t able to hang out with Chris a bit longer than just lunch. Chris is also another excellent speaker, a guy that knows his stuff and is a champion for accessibility. His talk at UX Burlington got me fixated in a11y and the need to focus a lot more on that and keep that skill in my arsenal.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/cd-tl-jp.jpg&quot; alt=&quot;(From left to right, Chris DeMars, Todd Libby, and Jason pamental at La Loma in Denver at lunch posing for a photo.&quot; /&gt;
    &lt;figcaption&gt;(From L to R) Chris DeMars, Todd Libby, and Jason pamental at lunch at La Loma in Denver inbetween breaks at lunch having a great time catching up during a great lunch.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;Back at the conference, Derek Featherstone kicked off the last half of the final day with &amp;quot;Inclusive, by Design&amp;quot;. We need to think in more diverse ways with regards to accessibility and to think of these things by default. Derek walked us through case studies and inclusion on the web and with web apps. If we include people with disabilities in the process, things will be much better. &amp;quot;Acknowledge your privilege, and your power, and your position in the design process.&amp;quot; says Derek. &amp;quot;Ask &#39;How can we make sure that we include more people with disabilities earlier and more meaningfully in the process?&amp;quot; Derek had a lot of questions that we need to ask ourselves to be more inclusive in designs and the design process, and to include people with disabilities in that process. This is another talk I have heard, again in Boston. Well worth hearing and seeing it again.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/df.jpg&quot; alt=&quot;Derek Featherstone at An Event Apart Denver discussion Inclusive Design and Accessiblity.&quot; /&gt;
    &lt;figcaption&gt;Derek Featherstone discussing Inclusive Design and Accessibility on stage at An Event Apart Denver.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/gm.jpg&quot; alt=&quot;Gerry McGovern wrapping up the conference at An Event Apart Denver discussing Delivering Products. Pointing at the screen with a slide from a Google Search and how ridiculous it can be.&quot; /&gt;
    &lt;figcaption&gt;Gerry McGovern wrapping up the conference at An Event Apart Denver discussing Delivering Products. Don&#39;t miss a talk from Gerry, they&#39;re not only informative, but very entertaining!&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;and as with the last few AEA events I have attended, Gerry McGovern ended the conference with his stellar (and very humorous) talk, &amp;quot;Delivering Product 67&amp;quot;. I just finished Gerry&#39;s book &amp;quot;Top Tasks&amp;quot; and it was brilliant. I have applied things in that book to the company I work for to better our product. Humility, Agility, and Simplicity. Gerry shows us how to enhance those qualities to support our company&#39;s business and advance our careers. Master the metrics of customer simplicity. I had the pleasure and privilege to have a couple of great conversations over breakfast with Gerry and he is a delight to speak with. All the speakers are! (More on that later). How to keep the garbage off of our pages, stopping the customer from doing what they really need to do. There is too much garbage on the web. Gerry points this out with the many iterations of the Google homepage.&lt;/p&gt;
&lt;p&gt;And with that, the conference was over.&lt;/p&gt;
&lt;h4 id=&quot;the-after-conference&quot; tabindex=&quot;-1&quot;&gt;The After-Conference&lt;/h4&gt;
&lt;p&gt;I consider myself fortunate, lucky, and pretty damn grateful. With that said, I got to hang out with Jason Pamental and Miriam Suzanne and a new conference friend for some time, eating Indian cuisine at a local place Miriam took us too nearby, then hanging out at the restaurant at the hotel and talking for hours. During the way, I had met TJ Pitre and we got to talking as well. This is why I enjoy the conferences I go to. I meet a mix of people far and wide. I don&#39;t want to meet the same people over and over and over who are like me. Which is why I strongly advocate for diversity and inclusion. Which is why Farai&#39;s talk hit me at the very core.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/denver.jpg&quot; alt=&quot;A view of downtown Denver on 16th Street with all the tall buildings and people walking around on a cold day after three days of snow.&quot; /&gt;
    &lt;figcaption&gt;A view of downtown Denver on 16th Street.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;After some lengthy conversation I retired to my room and then prepared to rest for the long trek back home. I really don&#39;t like the end process after the conferences because I meet so many great people and talk to some very smart folks in the course of three days (even more because I get there a day early and stay a day late).&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/hotel.jpg&quot; alt=&quot;A view of the hotel from an area in the lobby that folks can relax and do remote work from in a small meeting area on the main lobby floor showing a cup of Starbucks coffee next to my MacBook Pro looking out at the street from the hotel into downtown Denver.&quot; /&gt;
    &lt;figcaption&gt;A view of my workstation setup in the meeting area on the main floor of the Denver City Center Hilton looking out towards the street to downtown.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;If you are a designer or developer, or in web of any kind, you MUST go to An Event Apart. Whether it is in your city or whether you have to travel. It is well worth it. A conference that is diverse and inclusive, no egos, and all the learning and camraderie you can find all in one place. To get your boss(es) to pay for you and/or your team to go, &lt;a href=&quot;https://aneventapart.com/why-attend&quot;&gt;go here and read about all the things said&lt;/a&gt; and don&#39;t forget that towards the end of the page are links for some great pointers to persuade your boss to send you!&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>User Defenders Live Podcast at An Event Apart Denver</title>
		<link href="https://toddl.dev/posts/user-defenders-live-at-an-event-apart-denver/"/>
		<updated>Thu, 05 Dec 2019 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/user-defenders-live-at-an-event-apart-denver/</id>
		<content type="html">&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/i9mTeKl3NVQ&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen=&quot;&quot; title=&quot;&quot;&gt;&lt;/iframe&gt;
&lt;p&gt;&lt;a href=&quot;https://twitter.com/toddlibby/&quot;&gt;If you follow me on Twitter&lt;/a&gt; then you know I was at An Event Apart in October out in Denver, Colorado. I was asked to video this panel of wonderful people for the &lt;a href=&quot;https://userdefenders.com/&quot;&gt;User Defenders&lt;/a&gt; Live Podcast by Jason Ogle.&lt;/p&gt;
&lt;p&gt;I happily accepted and shot this all on my iPhone 11 Max Pro. I&#39;m glad the video came out as well as it did and I am glad I was there to see this podcast live.&lt;/p&gt;
&lt;p&gt;When hiring and seeking out talent that is diverse for your teams, try keeping that diverse talent and retaining those people. Why do so many folks leave design and business when they have brought in a wealth of knowledge and expertise?&lt;/p&gt;
&lt;p&gt;Hear the panel that consists of &lt;a href=&quot;https://twitter.com/MinaMarkham/&quot;&gt;Mina Markham&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/farai_uxguy/&quot;&gt;Farai Madzima&lt;/a&gt;, and &lt;a href=&quot;https://twitter.com/feather/&quot;&gt;Derek Featherstone&lt;/a&gt; as they answer questions and provide thoughtful and useful answers to questions like how do we keep diverse talent and other topics covered in just under an hour at An Event Apart Denver. Moderated by &lt;a href=&quot;https://twitter.com/jasonogle/&quot;&gt;Jason Ogle&lt;/a&gt;, who runs a terrific podcast and I suggest people in UX subscribe, become a patron, and support &lt;a href=&quot;https://twitter.com/UserDefenders/&quot;&gt;User Defenders&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;The entire event was great to be able to attend, but this was one of the reasons why I took the trip to Denver and attend An Event Apart. Besides all the speakers and the three days of great content and great people, I wanted to be here live for this event.&lt;/p&gt;
&lt;p&gt;The panel was made up of three people that know their stuff in the industry and were a pleasure to meet and talk with. They had a alot of great things to say, a lot of great points were made, and the hour was a pleasure to have been able to have been there for.&lt;/p&gt;
&lt;p&gt;Watch the video, soak it all in, hear what everyone had to say, take the information with you, and make your workplace a better one for everyone! I learned so much just by being in the fornt row and listening intently.&lt;/p&gt;
&lt;p&gt;Well worth the travel, well worth the trip, well worth it all. I cannot express how fun this event was, how great the people were and how terrific the venue was as well.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>User Defenders Book Club</title>
		<link href="https://toddl.dev/posts/user-defenders-book-club/"/>
		<updated>Sun, 02 Feb 2020 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/user-defenders-book-club/</id>
		<content type="html">&lt;p&gt;It was a pleasure being a part of this discussion about a book I really liked. Mike Monteiro&#39;s &lt;em&gt;Ruined By Design&lt;/em&gt;. Have a look at the video below and join User Defenders for more community events and more book club discussions!&lt;/p&gt;
&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/OfxEJvJ5GsQ&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen=&quot;&quot; title=&quot;&quot;&gt;&lt;/iframe&gt;
&lt;p&gt;This took place in November of 2019, I was just getting around to posting this after the holidays, new year, busy times and lots of stuff going on in life. My book club companions for the discussion are Jason Ogle and Ross Beitzel.&lt;/p&gt;
&lt;p&gt;I joined in a bit late, I had just gotten back into the office after my afternoon workout , which explains my disheveled look.&lt;/p&gt;
&lt;p&gt;This was my first ever foray into being online in this capacity, so please forgive the looking up at absolutely nothing, I have the worst habit in the world of doing that when I am trying to find things to say and thinking of words to use. Enjoy the video and become a patron today!&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Deceptive Patterns In Programs We Trust</title>
		<link href="https://toddl.dev/posts/deceptive-patterns-in-programs-we-trust/"/>
		<updated>Mon, 24 Feb 2020 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/deceptive-patterns-in-programs-we-trust/</id>
		<content type="html">&lt;p&gt;Don&#39;t look now but you&#39;re probably installing something else other than what you downloaded.&lt;/p&gt;
&lt;p&gt;When I was doing computer work for people (installing, networking, tutoring, etc.) I would install software for people that they could afford. Whether it was open source, or whether it was paid software. Usually, open source or freeware.&lt;/p&gt;
&lt;p&gt;Then in the past decade I noticed a huge increase in a deceptive pattern which at the time I thought was just something to click by and not give too much thought to. The “Download Google Chrome” epidemic.&lt;/p&gt;
&lt;p&gt;Yes, I said epidemic because it is everywhere it seems. Software companies are in bed with Google (or Alphabet, if you prefer) and they are cashing in, in ways you couldn’t even imagine. Your data.&lt;/p&gt;
&lt;p&gt;Then I started to get calls about how &lt;em&gt;“Chrome is on my computer and I don’t know what it is.”&lt;/em&gt; or &lt;em&gt;“I need you to come fix this for me. It’s telling me to update the program.”&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;These people (mainly older folks) do not know what to do with software the majority of the time I have found. Or they just don’t care. They want to click through and get things done.&lt;/p&gt;
&lt;p&gt;Why is this company putting this deceptive pattern in their software? I decided to do a bit of research into why. I couldn’t find &lt;strong&gt;anything&lt;/strong&gt; about the topic, but I figured there was only one reason why. Money. The thing that makes big tech run rampant.&lt;/p&gt;
&lt;p&gt;I did a few searches for these deceptive patterns and how they are being addressed and I could find absolutely nothing. No mention of these little shady checkboxes and these little tucked away “Here, we suggest you to download Chrome!” content areas. Nothing at all.&lt;/p&gt;
&lt;p&gt;I found several instances of &lt;em&gt;“Reasons Why Google Chrome Is Bad”&lt;/em&gt; or &lt;em&gt;“Top 10 Reasons Not To Download Chrome”&lt;/em&gt; I already know these reasons because I am a little tech savvy. My customers are not.&lt;/p&gt;
&lt;p&gt;I have an 80-year-old man that keeps up with family on Facebook and checks e-mail online and that’s it and he’s had programs he and his wife needs and they all had the Download Google Chrome fever. This man does not need Chrome, hasn’t heard of Chrome, and will never use Chrome.&lt;/p&gt;
&lt;h2 id=&quot;applications&quot; tabindex=&quot;-1&quot;&gt;Applications&lt;/h2&gt;
&lt;p&gt;Take for instance Piriform, the makers of CCleaner. An app that cleans out extraneous crap out of your hard drive and does a number of other things to help the performance fo your computer.&lt;/p&gt;
&lt;p&gt;Mac and Windows have versions and both have their little differences (Windows versions cleans your registry for instance). When installing the program, you reach a screen that looks something similar to this;&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/ccleaner.png&quot; alt=&quot;CCleaner by Piriform installation screen.&quot; /&gt;
    &lt;figcaption&gt;The CCleaner installer asks you to install the program. Fine. That’s what you want to do. But if you look in the lower left hand corner, you can see where _&amp;ldquo;Piriform recommends Google Chrome&amp;rdquo;_. Why?&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;Why does someone need to download a “recommendation” when they may be completely satisfied with the browser they have already? Or, in the case of many of my customers, they don’t even know what a browser is.&lt;/p&gt;
&lt;p&gt;Yet, they skip over it because they either click through wanting to install the product and do not want to see all these modal windows and dialogue boxes, or they just do not see the small little checkbox in the lower left-hand corner.&lt;/p&gt;
&lt;p&gt;Some folks do not! Your &lt;strong&gt;“recommendation”&lt;/strong&gt; may not be wanted, needed, or even cared about. I know none of my customers wants Google Chrome and if they already have it, they don’t need this extra, unnecessary step.&lt;/p&gt;
&lt;p&gt;The worst part about this is, that it is probably one of the worst pieces of surveillance software there is out there that is available to consumers. Here is yet another example of this deceptive pattern in action.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/avgfree.jpg&quot; alt=&quot;AVG Anti-Virus program installation screen.&quot; /&gt;
    &lt;figcaption&gt;As you can see, the checkbox is checked. They are 100% of the time when I deal with software that uses this deceptive pattern through deception.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;Is Chrome going to give you faster access to your favorite sites? Will your searches be easier with Google built into the address bar? Is the browser really stable and secure? Do my customers really care about ANY of that? I’ve asked many of my customers, and they have all said the same thing. No.&lt;/p&gt;
&lt;p&gt;100% of my customers, that’s 27 customers whom I do computer work for and teach them how to use things all have said the same thing. &lt;em&gt;“I don’t care what I use for a browser I just want to check Facebook, look at my grandkids photos and check my e-mail.”&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;That is all my customers who are older want to do. Nothing else. They’re not doing development, graphic design or anything other than playing games, Facebook, e-mail, and _maybe_video chat.&lt;/p&gt;
&lt;p&gt;With people being very trusting, one could say even naive, they expect the products they use, the products I am installing, to be free of anything intrusive so they don’t have to call me wondering what Google Chrome is or wondering why they have Google Chrome on their computers.&lt;/p&gt;
&lt;h2 id=&quot;emails&quot; tabindex=&quot;-1&quot;&gt;Emails&lt;/h2&gt;
&lt;p&gt;Another instance of deceptive patterns in UX brought me to the NBA and email. I voted for the All-Star Game and thought, _“well… that’s that. Back to work.”_and lo and behold that was not that. That was only the beginning of the onslaught of emails from the NBA and &lt;a href=&quot;http://nba.com/&quot;&gt;NBA.com&lt;/a&gt;.&lt;/p&gt;
&lt;div class=&quot;content__placeholder&quot;&gt;
  &lt;figure&gt;
    &lt;img class=&quot;content__image&quot; src=&quot;https://toddl.dev/img/nbaemail.png&quot; alt=&quot;An email from NBA.com.&quot; /&gt;
    &lt;figcaption&gt;No unsubscribe link on the bottom of the email where they usually are, tucked way down on the bottom, in 10-11 pixel font, clustered in a deep paragraph of legal mumble-ese.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;
&lt;p&gt;Where is the unsubscribe link? I voted for players for the All-Star Game and when I finished I got bombarded with emails so I had to refer to another email that I had been inundated with to find an unsubscribe link to actually unsubscribe.&lt;/p&gt;
&lt;p&gt;Even then, it was going to take 24-48 hours for that to happen! Some I have even seen take fourteen (yes, 14!) business days to unsubscribe! What?! Two business weeks to unsubscribe?! Are you kidding me?!&lt;/p&gt;
&lt;h2 id=&quot;deceptive-patterns&quot; tabindex=&quot;-1&quot;&gt;Deceptive Patterns&lt;/h2&gt;
&lt;p&gt;In this video, The User Story gives you information on UX deceptive patterns below, talks about some of the ways deceptive patterns work.&lt;/p&gt;
&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/Lri1pn2_mnY?si=TCiojvo0c4Nh61vW&quot; title=&quot;YouTube video player&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&quot; allowfullscreen=&quot;&quot;&gt;&lt;/iframe&gt;
&lt;p&gt;The “Google Chrome Download” uses trust and perceived value. Trust that you need to download Chrome. The perceived value that Chrome is the right browser for you to use. It’s almost as if Piriform is saying, “Piriform uses Google Chrome and since you use our software, you should use what we use!”&lt;/p&gt;
&lt;p&gt;Hiding this little checkbox and blurb in the bottom left corner of a dialog box is a deceptive pattern Don’t let anyone fool you. More than likely (and in about 9 out of 10 cases I have seen first hand) people are going to click through and not pay any attention to that step. They want to download the software and use it.&lt;/p&gt;
&lt;p&gt;It’s a pattern that I even skip when I am installing programs. I consider myself a bit savvy when it comes to tech, so those times where I am clicking through because I want to install the program, this step can be skipped very easily. So what do we do about it?&lt;/p&gt;
&lt;h3 id=&quot;so-what-can-we-do-about-this%3F&quot; tabindex=&quot;-1&quot;&gt;So What Can We Do About This?&lt;/h3&gt;
&lt;p&gt;Well, I reached out to Piriform on Twitter. I tweeted that it is a bad thing for them to do since I install their product on my customers computers and they don’t need the extra garbage that their product cleans out in the first place.&lt;/p&gt;
&lt;p&gt;They did respond (which I did not expect) with they were working on bettering their product (which remains to be seen) and they were listening to their customers.&lt;/p&gt;
&lt;p&gt;Well, if they are listening to their customers, they will take the screen and that option to download Chrome off their products (they also have a paid version of CCleaner (CCleaner Pro).&lt;/p&gt;
&lt;p&gt;We need to be vigilant. I have to be more vigilant.&lt;/p&gt;
&lt;p&gt;With the latest in the saga that is Avast and their problems with data, I am not going to be installing their products (Avast or AVG Anti Virus) on computers any longer (Windows Defender and Malwarebytes are enough protection in my opinion).&lt;/p&gt;
&lt;p&gt;Calling out these companies, calling out these deceptive patterns and making sure they are not being used to mislead or misdirect people, especially older folks like my customers is the key to at least slowing down this practice.&lt;/p&gt;
&lt;p&gt;Until consumers start pressuring these companies to stop this practice, it will keep going on until they start losing money. Let’s start getting on these companies and get them to stop these deceptive patterns in programs we trust.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Coronavirus, Quarantine, and Chats</title>
		<link href="https://toddl.dev/posts/coronavirus-quarantine-and-chats/"/>
		<updated>Sun, 22 Mar 2020 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/coronavirus-quarantine-and-chats/</id>
		<content type="html">&lt;p&gt;For the past couple of weeks I have been holding some Zoom chats for whomever wanted to come in and just talk to someone. It didn’t have to be on anything gin particular and could be about whatever the person wanted to talk about.&lt;/p&gt;
&lt;p&gt;I had a few calls with some great people from around the world and it reminded me of the dial-up days when I &lt;strong&gt;really&lt;/strong&gt; thought it was fascinating that I was talking to someone in a chat room from half a world today. That feeling I got when I had amazement at the wonders of technology. I relived that each time I talk to someone in far off places like Nepal, Saudi Arabia, India, Israel, and even the west coast of the U.S.&lt;/p&gt;
&lt;p&gt;While I have been out a few times in order to seek essentials, I have played it safe and stayed indoors for the most part keeping that social distancing practice going. Will I admit to perfect adherence? No. I can’t. Matter of fact I went to the gym a couple times and I was one of maybe four people there. That practice has ceased as of last week.&lt;/p&gt;
&lt;p&gt;After reflecting on how one careless person, if sick, does not wipe down the machinery they are using (it happens a lot from what I have seen and heard) I didn’t want to take that risk, especially when dealing with members of my family (mother, father, and sister).&lt;/p&gt;
&lt;p&gt;The chats have been great. Talking about programming and hobbies, people asking me all sorts of questions about where I live and who I am, what I do, and even some questions about American life and politics (asking about the current occupant in Washington D.C. which I answer as best I can from my point of view but that’s an opinion of what I see).&lt;/p&gt;
&lt;p&gt;I only had one instance of a call with someone from Israel where someone came into the chat and tried to be a troll. There is a fine art to being a troll, I should know. I used to be one. The attempt was pathetic and just sad to be honest. They should have probably stuck with their day job to say the least.&lt;/p&gt;
&lt;p&gt;I won&#39;t go into specifics, but it was a horrible troll job. It was an even worse job if saying what the female said to me in the chat was trying to hurt me or my feelings in some way because it didn&#39;t work at all. That kind of childish thing only solicited an eye roll and a quick scoff and soon I was focus on one of many things I have preoccupying my time.&lt;/p&gt;
&lt;p&gt;I’ll keep holding these chats but I am going to think of muring up the experience a little bit and I am used to this kind of thing happening. Back in the days of dial-up and chat rooms it happened with more frequency and the trolls back then were far more superior than the feeble attempt by the one I ran into last night.&lt;/p&gt;
&lt;p&gt;I’ve been invited to a lot of places and learned a lot of things with these chats. I hope that through this crisis worldwide (now state-side here in the US) more people jump in and just talk about things like programming and hobbies, things people would talk about face-to-face in a café or diner. Just everyday things, anything that was on their minds.&lt;/p&gt;
&lt;p&gt;If there is one thing positive about this whole ordeal many of us are going through with this pandemic it’s that all people want to do is reach out, have a chat with another human being, and learn. Those things I have been doing and the learning has been the best part.&lt;/p&gt;
&lt;p&gt;Learning about other people’s cultures and where they live.Learning about their work. I hope it has brought them a little bit of positive in an otherwise gloomy world we have been dealing with since the pandemic broke.&lt;/p&gt;
&lt;p&gt;We’re all in this together. Nature has shown us that it is sick and tired of dealing with our egocentric minds. Let’s be kinder to the Earth and definitely let’s reach out and be kinder to our fellow human beings as well.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>RWD Turns Ten</title>
		<link href="https://toddl.dev/posts/rwd-turns-10/"/>
		<updated>Mon, 25 May 2020 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/rwd-turns-10/</id>
		<content type="html">&lt;p&gt;There are some things I always will remember like it was yesterday that I have learned or read that have helped me along in my web career. Whether it was remembering my od friend the Mosaic browser, when I switched to using Macromedia Fireworks as my vector image tool, the times when I bought such career-altering books such as Laura Lemay&#39;s &lt;em&gt;SAMS Tech Yourself Web Publishing with HTML and XHTML in 21 Days&lt;/em&gt; or Jeffrey Zeldmans &lt;em&gt;Designing With Web Standards&lt;/em&gt; or Eric Meyer&#39;s &lt;em&gt;CSS: The Definitive Guide&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;These are some of the things that will stick with me until I leave this earth, and in the meantime, I have something that is added to that list.Something that I think has changed the landscape of the entire web industry and for every developer and designer alike. That is when Ethan Marcotte coined the term, &lt;em&gt;«Responsive Web Design»&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Thank you, Ethan Marcotte.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://responsivedesign.is/&quot;&gt;Responsive Web Design is&lt;/a&gt; « ...the combination of flexible grids, flexible images, and media queries. We help take the complexity out of responsive design with details on Design, Development and Strategy. (Taken directly from the website) » and you can learn more about it there and many more places such as at &lt;a href=&quot;https://alistapart.com/article/responsive-web-design/&quot;&gt;A List Apart&lt;/a&gt; and &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design&quot;&gt;MDN&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;There used to be a podcast about Responsive Web Design named (yes, you guessed it!) The Responsive Web Design Podcast, which I miss terribly. Why? Guests were great in sharing what they were working on and talking about responsive web design. Plus, Ethan Marcotte and Karen McGrane are two people in the industry I admire, respect (among many), and follow.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://abookapart.com/products/responsive-web-design&quot;&gt;There is even a book&lt;/a&gt;, if you did not know this. It should be a part of your library. Really. It should.&lt;/p&gt;
&lt;p&gt;Learning Responsive Web Design has been one of the best things that I have had the undertaking of doing. I picked apart that example from A List Apart like a surgeon finely does surgery. When others moved to RWD, I picked apart their layouts as well in order to learn it. The I was able to implement it which in turn I was able to craft websites for my clients using RWD.&lt;/p&gt;
&lt;p&gt;Ethan wrote in the ALA article;&lt;/p&gt;
&lt;blockquote cite=&quot;https://toddl.dev/posts/rwd-turns-10/Ethan%20Marcotte&quot;&gt;Our work is defined by its transience, often refined or replaced within a year or two. Inconsistent window widths, screen resolutions, user preferences, and our users’ installed fonts are but a few of the intangibles we negotiate when we publish our work, and over the years, we’ve become incredibly adept at doing so.&lt;/blockquote&gt;
&lt;p&gt;We&#39;ve come into the age of CSS Grid Layout and Flex Layout, and soon(?) Masonry Layout. The future certainly does change rapidly in tech, and we have to be adept to embrace and implement those changes when they come. Ethan only started the journey for me to be this adept when he coined that term in 2010.&lt;/p&gt;
&lt;p&gt;Not only is it wonderful to know follow your phenomenal work and monumental contributions to the web over the years, it is a pleasure and I am grateful to know you and to have been able to be a part of this wonderful thing we call web design.&lt;/p&gt;
&lt;p&gt;Happy 10th birthday, Responsive Web Design.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Tech Interviews and Anxiety</title>
		<link href="https://toddl.dev/posts/tech-interviews-and-anxiety/"/>
		<updated>Thu, 29 Oct 2020 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/tech-interviews-and-anxiety/</id>
		<content type="html">&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1605623948/images/anxiety.jpg&quot; alt=&quot;A woman clutching at the neck line of her shirt with eyes closed in contemplation with the photo having a red overlay.&quot; title=&quot;Photo by Chaozzy Lin on Unsplash.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;I recently went through the interview phase for a job and it was the furthest I have got in an interview phase in 5 years. I did not end up getting the job. I feel the deciding factor was the fact that I do no interview well.&lt;/p&gt;
&lt;p&gt;I am a visual person. I can see things better and visualize things best when I am working. I have being doing web design and development for over twenty-one years. I did not fare well and there were questions I should have been able to answer but couldn’t.&lt;/p&gt;
&lt;p&gt;I get anxiety-ridden and when I am thrown a curve ball in the Q&amp;amp;A period of any interview that I cannot answer, I lock up and immediately it is the flight part of the “flight or fight” phenomenon.&lt;/p&gt;
&lt;p&gt;I am no longer working and would like to move into a team-oriented role somewhere, but in the twenty years I have been keeping records, I have been hired a total of two times in the span of 2,147 resumes sent, with about three-quarters actually getting back to me. Half of those were automated rejection emails, the other half were emails or calls and one phone interview and that was that.&lt;/p&gt;
&lt;p&gt;I see younger people all the time, “I got a new role at &lt;strong&gt;COMPANY&lt;/strong&gt; after two years at &lt;strong&gt;FORMER COMPANY&lt;/strong&gt;!” I don’t understand this phenomenon. I do understand the ageism that is rampant and still exists in tech and tech hiring. I have accepted and surrendered to that very fact. This also is far from being &#39;sour grapes&#39; over the entire process. Frustration, yes.&lt;/p&gt;
&lt;p&gt;The every three years skipping to a new role has me shaking my head. Maybe it’s just the fact I find that loyalty and being loyal are part of a code of ethics that I like to adhere to these days. I give my 100% and more to a company that invests in me and my skills. So when you bring me on, you bring me on for 5, 10, 15+ years. The long haul.&lt;/p&gt;
&lt;p&gt;I’ll be 50 in January. I’ve applied to places I have familiarity with the product and because I am not some twenty-something kid with plenty of time to spend hours upon hours in front of a computer reading and soaking everything in, I am disposable to young millennial tech. Not needed. Not wanted.&lt;/p&gt;
&lt;p&gt;My skills are just not wanted at all. I believe this to be fact. I believe this to be truth. Not only an opinion. There is &lt;strong&gt;always&lt;/strong&gt; an element of some sort of framework knowledge that “needs” to be a “requirement” in a front-end position which makes me think of the articles written by Chris Coyier about just this thing here: &lt;a href=&quot;https://css-tricks.com/the-widening-responsibility-for-front-end-developers/&quot;&gt;The Widening Responsibility for Front-End Developers&lt;/a&gt; and here &lt;a href=&quot;https://css-tricks.com/the-great-divide/&quot;&gt;The Great Divide&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;I am down but not out and I have 10–15 years left in me and no one in tech is going to tell me when I am out. I am going to dictate when that happens. I have a thirst for knowledge and a desire to learn and I learn by doing. That’s how I have rolled for 21+ years. The window of opportunity closes little by little, day-by-day.&lt;/p&gt;
&lt;p&gt;So, without attracting every recruiter and headhunter in the entire world, who wants to take a chance on a web developer/designer that has 21+ years under his belt? Few places have shown interest. Fewer places have inquired. I still have the skills and desire to keep learning that I did 21+ years ago, you’re getting more than just a warm seat for 3–4 years.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Contrasting Accessibility with Color Contrast</title>
		<link href="https://toddl.dev/posts/contrasting-accessibility-with-color-contrast/"/>
		<updated>Sat, 21 Nov 2020 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/contrasting-accessibility-with-color-contrast/</id>
		<content type="html">&lt;p&gt;I came across a website that had some significant visual issues pertaining to color contrast. These visual issues made it difficult, if not impossible, to read the website’s content. This led me to wonder how people with visual impairments and/or use assistive technology might navigate these issues.&lt;/p&gt;
&lt;p&gt;How do we make it better as a community of designers and developers? We must think about these folks and this is where the need for accessibility in the process comes in. While accessibility encompasses a lot of different aspects of design and development, I am focusing right now solely on color contrast in this article.&lt;/p&gt;
&lt;p&gt;How do we make it better as a community of designers and developers? We must think about these folks and this is where the need for accessibility in the process comes in. While accessibility encompasses a lot of different aspects of design and development, I am focusing right now solely on color contrast in this article.&lt;/p&gt;
&lt;p&gt;How do we improve accessibility for the visually impaired? According to the World Health Organization (WHO); [1]&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Globally, at least 2.2 billion people have a vision impairment or blindness, of whom at least 1 billion have a vision impairment that could have been prevented or has yet to be addressed.&lt;/li&gt;
&lt;li&gt;Of these 1 billion people, this includes those with moderate or severe distance vision impairment or blindness due to unaddressed refractive error, as well as near vision impairment caused by unaddressed presbyopia.&lt;/li&gt;
&lt;li&gt;Globally, the leading causes of vision impairment are uncorrected refractive errors and cataracts.&lt;/li&gt;
&lt;li&gt;The majority of people with vision impairment are over the age of 50 years.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;If your website&#39;s target viewers are under age 50, please do not assume that visual impairments do not apply, or that accessibility is not important for all of your viewers. Imagine, visually impaired or not, trying to navigate something like this:&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1585002459/images/si1_spgbxn.png&quot; alt=&quot;A blue form to submit a subscription to an email newsletter&quot; /&gt;&lt;/p&gt;
&lt;p&gt;Color contrast is defined as;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;noun&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;the change in the appearance of a colour surrounded by another colour; for example, grey looks bluish if surrounded by yellow.&lt;/li&gt;
&lt;/ol&gt;
&lt;blockquote&gt;
&lt;p&gt;“Contrasting colors, also known as complementary colors, are colors from opposing segments of the color &amp;gt; wheel. Colors that are directly across from one another on a basic color wheel provide maximum contrast.” [2]&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;There are at least 2.2 billion people who suffer from a vision impairment or some form of color blindness and I&#39;ll share with you some of those types of color blindness and vision impairments below.&lt;/p&gt;
&lt;h3 id=&quot;types-of-color-blindness&quot; tabindex=&quot;-1&quot;&gt;TYPES OF COLOR BLINDNESS&lt;/h3&gt;
&lt;p&gt;There are seven total types of color blindness including monochromacy (the absence of color perception).&lt;/p&gt;
&lt;h4 id=&quot;red-green-color-blindness&quot; tabindex=&quot;-1&quot;&gt;Red-green color blindness&lt;/h4&gt;
&lt;p&gt;The most common type of color blindness makes it difficult to tell the difference between red and green. There are four types of red-green color blindness;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Deuteranomaly:&lt;/em&gt; This is the most common type of red-green color blindness. This type is mild and usually does not hinder normal viewing or activities. It makes green look more red.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Protoanomaly:&lt;/em&gt; This makes red look more green and less bright. This is also mild as well.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Protonopia&lt;/em&gt; and &lt;em&gt;deutueranopia:&lt;/em&gt; Both of these make it so that you cannot tell the difference between red and green at all.&lt;/p&gt;
&lt;h4 id=&quot;blue-yellow-color-blindness&quot; tabindex=&quot;-1&quot;&gt;Blue-yellow color blindness&lt;/h4&gt;
&lt;p&gt;This less-common type of color blindness makes it difficult for people to tell the difference between blue and green, and red and yellow. There are two types of blue-yellow color blindness;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Tritananomaly:&lt;/em&gt; Which makes it hard to tell the difference between blue and green, and red and yellow.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Tritanopia:&lt;/em&gt; Is when you are unable to tell the difference between blue and green, purple and red, and pink and yellow. Colors also look a lot less bright.&lt;/p&gt;
&lt;h4 id=&quot;complete-color-blindness&quot; tabindex=&quot;-1&quot;&gt;Complete Color Blindness&lt;/h4&gt;
&lt;p&gt;&lt;em&gt;Monochromacy&lt;/em&gt;: Is also known as Complete Color Blindness. Where you cannot see colors at all. This does not mean a person is entirely blind, it means they cannot see colors.&lt;/p&gt;
&lt;p&gt;Men have a much higher risk than women for color blindness. You’re also more likely to have color blindness if you: [3]&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Have a family history of color blindness.&lt;/li&gt;
&lt;li&gt;Have certain eye diseases, like glaucoma or age-related macular degeneration(AMD).&lt;/li&gt;
&lt;li&gt;Have certain health problems, like diabetes, Alzheimer’s disease, or multiple sclerosis(MS).&lt;/li&gt;
&lt;li&gt;Take certain medicines.&lt;/li&gt;
&lt;li&gt;Are white.&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 id=&quot;stargardt&#39;s&quot; tabindex=&quot;-1&quot;&gt;Stargardt&#39;s&lt;/h4&gt;
&lt;p&gt;Stargardt&#39;s, a type of macular degeneration that means people who have it, lose vision in the center of the retina. It is an inherited disorder of the retina. A disease which causes vision loss during childhood or adolescence, although it may not be noticed until adulthood. &lt;a href=&quot;https://twoblindbrothers.com/pages/reveal&quot;&gt;Here is an example of a site&lt;/a&gt; that allows visitors to see through the eyes of the founders, and what they see when they navigate the internet.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Accessibility should be a top priority for all users. Designers and developers can use color contrast checkers.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id=&quot;the-tools&quot; tabindex=&quot;-1&quot;&gt;THE TOOLS&lt;/h3&gt;
&lt;p&gt;Color contrast checkers. There are many. I mean &lt;em&gt;a lot&lt;/em&gt;. There is one I use to make sure what I am doing uses the correct level of color contrasting, it is &lt;a href=&quot;https://contrast-ratio.com/&quot;&gt;Lea Verou’s Color Contrast Checker&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1605994825/images/verou-cc.png&quot; alt=&quot;Lea Verou&#39;s Constrast Ratio website for color contrast checking&quot; /&gt;&lt;/p&gt;
&lt;p&gt;Lea’s color contrast checker can take inputs using CSS Named Colors: red, blue, green, yellow, rebeccapurple, etc. RGBa colors: (255, 111, 43, 0.75) HSLa colors: (177, 54%, 17%, 0.37) or CSS Hex Values: (#108535).&lt;/p&gt;
&lt;p&gt;Alpha, the opacity or transparency of a color, will impact contrast. Alpha is presented as a number between 0 (100% transparent) and 1 (100% opaque). Decreasing the alpha for text will typically reduce the contrast because you are allowing an underlying color to bleed through.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://whocanuse.com/&quot;&gt;Who Can Use&lt;/a&gt; is another fantastic contrast checker that is a staple in my accessibility testing most definitely. It gives you a look at the different contrasts and how they stack up versus the many different kinds of visual impairments.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://contrastchecker.com/&quot;&gt;The WCAG Contrast Checker&lt;/a&gt; is another option.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1585002465/images/wcagcc_g30ecf.png&quot; alt=&quot;The WCAG Contrast Checker&quot; /&gt;&lt;/p&gt;
&lt;p&gt;Along with the WebAIM Color Contrast Checker.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1585002466/images/webaimcc_xmujlm.png&quot; alt=&quot;WebAIM Contrast Checker&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://wave.webaim.org/extension/&quot;&gt;The WAVE Web Extension&lt;/a&gt; and the &lt;a href=&quot;https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd&quot;&gt;Axe Web Accessibility Extension&lt;/a&gt; are a couple of browser extensions/add-on&#39;s I use among other color contrast checking sites and tools.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://wave.webaim.org/&quot;&gt;WAVE&lt;/a&gt; and &lt;a href=&quot;https://www.deque.com/tools/&quot;&gt;Deque&lt;/a&gt; have great accessibility testing tools that not only check for color contrast issues, but all accessibility issues as well. Chrome and Firefox have add-on&#39;s for their respective browsers when it comes to color contrast checkers.&lt;/p&gt;
&lt;p&gt;Color contrast checking is very important. Users want to be able to easily access text fields for forms and easily be able to read text against backgrounds.&lt;/p&gt;
&lt;p&gt;Relaying information to the user is crucial. If you are not effectively relaying information to the user, then that is not good UX, nor is it good accessibility.&lt;/p&gt;
&lt;p&gt;Some colors look good to some people (designers, I&#39;m looking at you) but will they look good to people that have deuteranomaly? What about people with tritanopia? How is that information getting to them with your color scheme?&lt;/p&gt;
&lt;h3 id=&quot;wcag-aa-%26-aaa-definitions&quot; tabindex=&quot;-1&quot;&gt;WCAG AA &amp;amp; AAA DEFINITIONS&lt;/h3&gt;
&lt;blockquote&gt;
&lt;p&gt;&amp;quot;So what is an acceptable level of color contrast?&amp;quot;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;A minimum color contrast ratio recommended by ISO-9241-3 and ANSI-HFES-100-1988 is 3:1 for standard text and vision. The 4.5:1 ratio takes into account color deficiencies, low visual acuities, or loss of contrast sensitivity. 4.5:1 is also the chosen level for WCAG AA standards because;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;“it compensated for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/40 vision.” [4]&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;The minimum level for WCAG AAA is 7:1 and the reason for that is;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;“because it compensated for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/80 vision. People with more than this degree of vision loss usually use assistive technologies to access their content (and the assistive technologies usually have contrast enhancing, as well as magnification capability built into them).” [4]&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;These calculations are made for the size of body text and a relaxed contrast ratio is provided for larger text, such as headings or any other text which is larger than the body copy. Remember to make link text stand out and underlined as well!&lt;/p&gt;
&lt;p&gt;While these are the minimum and suggested ratios for each level (AA &amp;amp; AAA), interface components do not have the same color contrast ratios. While text is 4.5:1 in WCAG AA, interface components are 3:1.&lt;/p&gt;
&lt;p&gt;Text requires a higher contrast because people need to read it. Interface components do not and therefore have a lower standard.&lt;/p&gt;
&lt;h3 id=&quot;forms&quot; tabindex=&quot;-1&quot;&gt;FORMS&lt;/h3&gt;
&lt;p&gt;Confirmation messages are important. They confirm that the information requested was submitted; and provide other pertinent information or other instructions. Contrast in forms is crucial to relay that information to users. For example;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;“Please check your inbox to confirm your subscription.”&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;or…&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;“Your confirmation number will be sent to &lt;a href=&quot;mailto:user@address.com&quot;&gt;user@address.com&lt;/a&gt;”&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;or…&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;“Your ticket number is 98765. Check your inbox to confirm receipt.”&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1585002437/images/ewww_xczuk2.png&quot; alt=&quot;A form submission message in white font on a neon yellow background&quot; /&gt;&lt;/p&gt;
&lt;h3 id=&quot;what-we-can-do&quot; tabindex=&quot;-1&quot;&gt;WHAT WE CAN DO&lt;/h3&gt;
&lt;p&gt;We as designers and developers need to do better, to have a system of checks to make sure that color contrast is an integral part of the design process. We have learned through many mistakes we have seen over the last few years that accessibility reaches a far scope that sometimes is ignored by the masses, myself included.&lt;/p&gt;
&lt;p&gt;How can we make sure we’re paying attention to color contrast when we design and develop websites?&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Test with persons with vision impairments.&lt;/strong&gt; If we can ask on Twitter for users of a specific demographic, then we can ask for persons to test with vision impairments. Invite persons with visual impairments to test the accessibility of your website.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Make accessibility inclusive in the design and development process.&lt;/strong&gt; If we are including time to make sure what we are doing right from the start is accessible, then we are halfway there.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Be sensible with colors.&lt;/strong&gt; Ask yourself, “Would this color scheme work for others with vision impairments?” Use color schemes and palettes that work and that make sense. Pastels are okay, if the color they are on works well with the color of the text. And...&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Use the tools!&lt;/strong&gt; Color contrast checkers and accessibility tools. Use them, that&#39;s why they are there! They will inform you of any issues before you push to production or go live, saving you (or your company) time and money.&lt;/p&gt;
&lt;h3 id=&quot;summary&quot; tabindex=&quot;-1&quot;&gt;SUMMARY&lt;/h3&gt;
&lt;p&gt;There is a lot of talk about accessibility and we have taken tremendous strides to making the web more accessible but we’re a long way from it being all-inclusive. So let&#39;s make the web more inclusive, but also remember how and why.&lt;/p&gt;
&lt;p&gt;There is a broad spectrum of vision deficiencies and impairments we need to address during the design phase of the process. Making this process more inclusive by taking the time to make sure color contrast is at levels where it passes WCAG 2.0 AA (or even AAA) guidelines is very important.&lt;/p&gt;
&lt;p&gt;Let’s remind ourselves of the fact everyone doesn’t have ‘perfect’ or good vision. Embrace the process of color contrast, avoid illegible parts of websites that are created and unreadable like in the examples I provided.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.zeldman.com/2019/12/01/bluebeanieday2019/&quot;&gt;Jeffrey Zeldman summarized it&lt;/a&gt; in his post on Blue Beanie Day (November 30th) when he wrote;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;“...our industry as a whole thinks less and less about accessibility (not that we ever had an A game on the subject), and talks less and less about progressive enhancement, preferring to chase the ephemeral goal posts of over-engineered solutions to non-problems.”[5]&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;We as architects and craftspersons of the web community must keep everyone in mind when it comes to color contrast with websites, apps, fonts, and colors.&lt;/p&gt;
&lt;p&gt;Clear color contrast is just the beginning, but it’s one of the ways to start building, creating, and handcrafting great, inclusive, accessible sites for all.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href=&quot;https://toddl.dev/posts/contrasting-accessibility-with-color-contrast/www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment&quot;&gt;World Health Organization&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Vasquez, Rachel R., Lane, Emily, &lt;a href=&quot;https://toddl.dev/posts/contrasting-accessibility-with-color-contrast/a11yproject.com/posts/what-is-color-contrast/&quot;&gt;What is Color Contrast?&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://toddl.dev/posts/contrasting-accessibility-with-color-contrast/www.nei.nih.go/learn-about-eye-health/eye-conditions-and-diseases/color-blindness/types-color-blindness&quot;&gt;National Eye Institute, Types of Color Blindness&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;W3C, Contrast (Minimum): &lt;a href=&quot;https://toddl.dev/posts/contrasting-accessibility-with-color-contrast/www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html&quot;&gt;Understanding SC 1.4.3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Zeldman, Jeffrey, &lt;a href=&quot;https://toddl.dev/posts/contrasting-accessibility-with-color-contrast/www.zeldman.com/2019/12/01/bluebeanieday2019/&quot;&gt;Another Blue Beanie Day&lt;/a&gt;, 1 December, 2019,&lt;/li&gt;
&lt;/ol&gt;
</content>
	</entry>
	
	<entry>
		<title>Fourth Quarter 2021</title>
		<link href="https://toddl.dev/posts/fourth-quarter-2021/"/>
		<updated>Tue, 24 Nov 2020 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/fourth-quarter-2021/</id>
		<content type="html">&lt;h2 id=&quot;it&#39;s-been-a-long-fourth-quarter&quot; tabindex=&quot;-1&quot;&gt;It&#39;s been a long fourth quarter&lt;/h2&gt;
&lt;p&gt;I had not been writing for quite some time. Time was at a premium. Between working, then changing jobs from Knowbility to the great team over at WebstaurantStore, to W3C participation, to writing articles and speaking at virtual conferences, it was all a lot over the past two months.&lt;/p&gt;
&lt;p&gt;Perhaps a bit too much. Or, let&#39;s face it, it was far too much.&lt;/p&gt;
&lt;p&gt;Over that span of the last month and a half, the virtual conferences took its toll. While I had a terrific time and learned so much over the four conferences in October that I was attending (which were Clarity Conference and TPAC) and the two that I pre-recorded talks for (#A11yTOConf and Web Directions AAA), it was a lot. A lot that was too much in a short time.&lt;/p&gt;
&lt;p&gt;Then came the burnout. that same familiar feeling I have felt over a career that has spanned over twenty years and probably a dozen times that I have burnt myself out due to an incredibly large workload.&lt;/p&gt;
&lt;p&gt;Now usually when I can feel the burnout coming on, I take a break. Whether it is a weekend, which will cure the burnout sometimes, to a week off, I do it and it is done. Then I can come back and feel rested and ready to work again. But that was not the case this time.&lt;/p&gt;
&lt;p&gt;I didn&#39;t take any time off in the transition of jobs from Knowbility to WebstaurantStore, and that may have, well okay, it was a mistake. A week off would have been great. The complacency though is something I can&#39;t sit with.&lt;/p&gt;
&lt;h2 id=&quot;the-start-of-the-pandemic&quot; tabindex=&quot;-1&quot;&gt;The start of the pandemic&lt;/h2&gt;
&lt;p&gt;I started the pandemic, having spent the majority of my time getting immersed in the W3C, side projects, and trying to find a job in the accessibility space. It was a difficult time persoanlly with things going on behind the scenes, but needless to say, I was not in a good place when the pandemic started.&lt;/p&gt;
&lt;p&gt;To stay out of my own head and out of my own way, I decided to take on a lot more than I usually would have. I literally kicked off a new brand with the whole lobster thing, I started doing anything anyoen had suggested.&lt;/p&gt;
&lt;p&gt;A podcast, a zine, all sorts of things to fill the time in and keep myself from sitting in my own head where that is a dangerous place for a guy like me.&lt;/p&gt;
&lt;h2 id=&quot;lots-of-things&quot; tabindex=&quot;-1&quot;&gt;Lots of things&lt;/h2&gt;
&lt;p&gt;As I mentioned before, I had a lot of things that were revolving around in my head that I was putting to task. Putting myself to work an immersing myself into community, writing, speaking, and anything I could do to pass the time away I thought would be good for me. Little did I know.&lt;/p&gt;
&lt;p&gt;So as the days have gone on, I have managed to &lt;em&gt;very slowly&lt;/em&gt; get things done and finalized. I&#39;ve begin the process of cutting down on the groups and subgroups I belong to in the W3C, I haven&#39;t streamed in well over a year and maty or may not get back into that.&lt;/p&gt;
&lt;p&gt;I have cut the little side projects until I can get free enough to maybe do one every now and again such as the zines.&lt;/p&gt;
&lt;p&gt;Taking too much on is something I do constantly and I think developers and tech folks have done a lot as well. I see a growing wave of people that can keep their revolving projects under wraps and constrained to a few.&lt;/p&gt;
&lt;p&gt;I download all these apps to list project ideas and remiind me of them and I siimply am just horrible at using those apps, nevermind start them up to even use them.&lt;/p&gt;
&lt;p&gt;Lots of things can keep me out of my head, which is a good thing. Lots of things can be a bad thing, it tires a person out real quick. I havn&#39;t yet concluded the moral of this story, but I sure am tired.&lt;/p&gt;
&lt;h2 id=&quot;changes&quot; tabindex=&quot;-1&quot;&gt;Changes&lt;/h2&gt;
&lt;p&gt;Changes have been a lot over the past two years. I was looking for work for most of the year even though I had been employed up until May at a job I had held for five years, I got a new job in April that I left in October and transferred over to another position that month (October), I had two surgeries in August, I moved from Maine to Arizona, and in this timeframe, I kept attending and speaking at conferences, and learning.&lt;/p&gt;
&lt;p&gt;It has taken its toll though. Towards the end, after the surgeries and the time taken to recover from them, I have agained all the weight back I had lost and more. I have been working non-stop without a break. Working constantly whether it was for a company I work(ed) for, W3C work, learning, reading, writing, prepping for a conference talk.&lt;/p&gt;
&lt;p&gt;I threw all of myself into 2021 because I wanted to get myself out there and do conference talks, write articles, and I have done those things. If I could change one thing, I would take more time to do these things and I would have taken a little bit of time off here and there in between so as to not burn out.&lt;/p&gt;
&lt;h2 id=&quot;present-day&quot; tabindex=&quot;-1&quot;&gt;Present Day&lt;/h2&gt;
&lt;p&gt;Things have died down a lot, thankfully. I feel like I have time to breathe. Work, W#C meetings, and some writing take up my time but other than that I am taking time for myself to rest, relax, re-energize, and get back into shape. Self-care is super important and paramount to me making it through to the final years that I have left in the web/tech industry.&lt;/p&gt;
&lt;p&gt;Looking down the road, I don&#39;t regreat the path I took, but I don&#39;t recommend it either. Take time for yourself so that you can be there for your family, your friends, and for others.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Label in Name in WCAG 2.1</title>
		<link href="https://toddl.dev/posts/label-in-name-in-wcag-21/"/>
		<updated>Tue, 15 Dec 2020 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/label-in-name-in-wcag-21/</id>
		<content type="html">&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1605616284/images/accessibility.jpg&quot; alt=&quot;A user sitting in front of a computer using a Braille reader.&quot; title=&quot;Photo by Sigmund on Unsplash.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.w3.org/TR/WCAG21/&quot;&gt;WCAG 2.1 Recommendations rolled out in 2018&lt;/a&gt;. It’s been a couple years now and there are some new Success Criterion. In this article, I will discuss &lt;a href=&quot;https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html&quot;&gt;Label in Name&lt;/a&gt;, which is how we visually label components. We’ll take a look at what some failure states look like, how to fix them, and examples of how to do them correctly.&lt;/p&gt;
&lt;h2 id=&quot;you-lost-me-at-success-criterion%E2%80%A6&quot; tabindex=&quot;-1&quot;&gt;You lost me at Success Criterion…&lt;/h2&gt;
&lt;p&gt;Success Criterion are testable statements that aren’t technology-specific. They’re the baseline from which we determine whether our work is “accessible.” In this case, “Label in Name” is the thing being evaluated, which is among a whole slew of other criterion. WCAG 2.1 is the current version of the spec and “Label in Name” is item 2.5.3, indicating it is in the second category (“Operable”) of criterion, under the fifth section (“Input Modalities”) of that category, marked as the third item in the section.&lt;/p&gt;
&lt;p&gt;WCAG 2.1 is backwards-compatible with WCAG 2.0, meaning it’s an extension of WCAG 2.0. Further, the releases of WCAG 2.1 and 2.2 are in conjunction with each other and they all work together.&lt;/p&gt;
&lt;h2 id=&quot;label-in-name&quot; tabindex=&quot;-1&quot;&gt;Label in Name&lt;/h2&gt;
&lt;p&gt;So, getting back to things, &lt;a href=&quot;https://www.w3.org/TR/WCAG21/#label-in-name&quot;&gt;2.5.3 Label in Name&lt;/a&gt; (Level A) is new and defined in the WCAG 2.1 Success Criterion. Here’s how it’s described:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;For user interface components with labels that include text or images of text, the name contains the text that is presented visually.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;The intent of this Success Criterion (SC) is to ensure &lt;strong&gt;the words which a label has visually on the component are also included in the words that are associated with the component programatically&lt;/strong&gt;. This helps ensure that anyone — whether it’s someone using voice recognition software or someone who is visually abled — can rely on labels to describe the intent of a component, or how to interact with it. The visual text label and the &lt;strong&gt;programmatic name&lt;/strong&gt; do not have to be exact, mind you, but they should contain a common work that associates them (e.g., “Submit” with “Submit Now”).&lt;/p&gt;
&lt;p&gt;The point is that there isn’t confusion, because of a discrepancy, between what is read and what is seen.&lt;/p&gt;
&lt;h2 id=&quot;assistive-technology-in-action&quot; tabindex=&quot;-1&quot;&gt;Assistive technology in action&lt;/h2&gt;
&lt;p&gt;Let’s use the example of an HTML contact form. A user may use voice recognition software to fill out a form and come to the end where the form is submitted and the form is sent.&lt;/p&gt;
&lt;p&gt;Say the label of the button and the visual text in the button are inconsistent:&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;form&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    Message:
    &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;textarea&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&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;message&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 tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;textarea&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;button&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-label&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;Submit&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;Send&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;button&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;form&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;In the above example, &lt;strong&gt;the button doesn’t function properly for assistive technology&lt;/strong&gt;. The button contains the text “Send” but its &lt;code&gt;aria-label&lt;/code&gt; is “Submit.” This is where the failure lies. The visual label (“Send”) is inconsistent with the programmatic name (“Submit”), providing no association between the two.&lt;/p&gt;
&lt;p&gt;When these match or have a common term, users of speech recognition software can navigate by speaking the visible text labels of components such as links, buttons, and menus. In this case, we could fix it by matching the label and the text. But since the &lt;code&gt;aria-label&lt;/code&gt; adds no value, removing it altogether is a better fix:&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;form&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    Message:
    &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;textarea&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&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;message&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 tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;textarea&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;button&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Send&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;button&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;form&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;Sighted users that use screen readers will also have a better experience if the text they hear is the text that’s similar to the text they see on the screen.&lt;/p&gt;
&lt;p&gt;When the label and visual text don’t match, speech-input users attempting to use the visible text label as a means of navigation (e.g. “move to First Name”) or selection will get stuck because the visible label spoken by the user does not match or is not part of the accessible name that is enabled as part of the speech-input command.&lt;/p&gt;
&lt;p&gt;Also, when the accessible name is different from the visible label, it may function as a hidden command that can be activated &lt;em&gt;accidentally&lt;/em&gt; by speech-input users. SC does not apply where a visible text label does not exist for a component.&lt;/p&gt;
&lt;h2 id=&quot;code-in-action&quot; tabindex=&quot;-1&quot;&gt;Code in action&lt;/h2&gt;
&lt;p&gt;Here are three different failure states.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://codepen.io/colabottles/pen/QWKWmEK&quot;&gt;A problematic &lt;code&gt;&amp;lt;button&amp;gt;&lt;/code&gt; element&lt;/a&gt; where the spoken label and visual label have no association.&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://codepen.io/colabottles/pen/poEoLPP&quot;&gt;A label mismatch&lt;/a&gt; where the spoken text reads more content than the visual label does because of an “accessibly hidden” span.&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://codepen.io/colabottles/pen/MWjWVXr&quot;&gt;An input with a spoken label&lt;/a&gt; via &lt;code&gt;aria-labelledby&lt;/code&gt;, which fails to establish a correlation between the spoken and visual label.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Again, these are all examples of poor practices, according to the 2.5.3 Label in Name SC.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;In 2020 the WebAIM Million project evaluated 4.2 million form inputs and found that 55% were improperly unlabeled, either via &lt;code&gt;&amp;lt;label&amp;gt;&lt;/code&gt;, &lt;code&gt;aria-label&lt;/code&gt;, or &lt;code&gt;aria-labelledby&lt;/code&gt;.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;When working with forms, most of us are pretty used to pairing a &lt;code&gt;&amp;lt;label&amp;gt;&lt;/code&gt; with an &lt;code&gt;&amp;lt;input&amp;gt;&lt;/code&gt; or some other form control. That’s awesome and a great way to indicate what the control does, but there’s also the control’s &lt;strong&gt;programmatic name&lt;/strong&gt;, which is also known as the “accessible name” using an &lt;code&gt;aria-label&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;We get a better user experience when the name of the &lt;code&gt;&amp;lt;label&amp;gt;&lt;/code&gt; can be associated with the programmatic (or accessible) name in the &lt;code&gt;aria-label&lt;/code&gt;. For example, if we’re using “First Name” for an input’s &lt;code&gt;&amp;lt;label&amp;gt;&lt;/code&gt;, then we probably want our &lt;code&gt;aria-label&lt;/code&gt; to be “First Name” or something to that effect as well. &lt;strong&gt;A failure to draw a connection between programmatic names and visible labels can be more of a challenge for users with cognitive challenges&lt;/strong&gt;. It requires additional cognitive load for speech-input users who must remember to say a speech command that is different from the visible label they see on a control. Extra cognitive load is also created when a text-to-speech user needs to absorb and understand speech output that can’t be connected to the visible label. These forms will submit, but it comes at a cost to accessibility and disabled users.&lt;/p&gt;
&lt;p&gt;Here are those three examples from above fixed up!&lt;/p&gt;
&lt;p class=&quot;codepen&quot; data-height=&quot;265&quot; data-theme-id=&quot;dark&quot; data-default-tab=&quot;css,result&quot; data-user=&quot;colabottles&quot; data-slug-hash=&quot;OJRPGYO&quot; style=&quot;height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot; data-pen-title=&quot;Label in Name: Ex 4 - Correct Usage of Label in Name&quot;&gt;
  &lt;span&gt;See the Pen &lt;a href=&quot;https://codepen.io/colabottles/pen/OJRPGYO&quot;&gt;
  Label in Name: Ex 4 - Correct Usage of Label in Name&lt;/a&gt; by Todd Libby (&lt;a href=&quot;https://codepen.io/colabottles&quot;&gt;@colabottles&lt;/a&gt;)
  on &lt;a href=&quot;https://codepen.io/&quot;&gt;CodePen&lt;/a&gt;.&lt;/span&gt;
&lt;/p&gt;
&lt;script async=&quot;&quot; src=&quot;https://cpwebassets.codepen.io/assets/embed/ei.js&quot;&gt;&lt;/script&gt;
&lt;h2 id=&quot;text-in-label-specifics&quot; tabindex=&quot;-1&quot;&gt;Text in Label specifics&lt;/h2&gt;
&lt;p&gt;Per the WCAG SC, text should not be considered a visible label if it is used in a symbolic manner instead of expressing it directly in human language. A rich text editor is a good example of this because an editor might use images as text (which is included in &lt;a href=&quot;https://www.w3.org/WAI/WCAG21/Understanding/images-of-text&quot;&gt;1.4.5 Images of Text&lt;/a&gt;).&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1608072283/images/rte.webp&quot; alt=&quot;A rich-text editor taken from the GitHub website.&quot; title=&quot;GitHub&#39;s Rich-text editor&quot; /&gt;&lt;/p&gt;
&lt;p&gt;To match the label text and accessible name with one another, it is important to determine &lt;em&gt;which&lt;/em&gt; text should be considered the label for any component for any given control. There are often &lt;em&gt;multiple&lt;/em&gt; text strings in a user interface that may be relevant to a control. &lt;a href=&quot;https://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160105/G162&quot;&gt;There are reasons&lt;/a&gt; why the label in close proximity should be considered the text label. It’s about establishing a pattern of predictability for users interacting with a component. Those reason suggest that visible labels should be positioned:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;immediately to the left of text inputs, dropdown boxes, and other widgets or components.&lt;/li&gt;
&lt;li&gt;immediately to the right of checkboxes and radio buttons.&lt;/li&gt;
&lt;li&gt;inside buttons or tabs or immediately below icons serving as buttons.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1608078060/images/Group-6a.jpg&quot; alt=&quot;Labels to the left of inputs and dropdown select menus&quot; /&gt;&lt;strong&gt;&lt;em&gt;Labels to the left of inputs and dropdown select menus&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1608078060/images/Group-7a.jpg&quot; alt=&quot;Labels to the right of checkbox and radio buttons&quot; /&gt;&lt;strong&gt;&lt;em&gt;Labels to the right of checkbox and radio buttons&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1608078060/images/Group-8a.jpg&quot; alt=&quot;Labels inside or below a button, depending on the symbol&quot; /&gt;&lt;strong&gt;&lt;em&gt;Labels inside or below a button, depending on the symbol&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Punctuation and capitalization may also be considered optional if used in a symbolic manner. For example, “First Name” is just fine instead of “First Name:” and “Next” is okay instead of “Next…” and so on.&lt;/p&gt;
&lt;p&gt;Another thing to consider: components without a visual label are not considered by the WCAG SC.&lt;/p&gt;
&lt;h2 id=&quot;proper-labeling-has-its-perks&quot; tabindex=&quot;-1&quot;&gt;Proper labeling has its perks&lt;/h2&gt;
&lt;p&gt;The core benefit of matching a component’s labels with its corresponding accessible name is that it gives speech-input users the ability to activate controls on a page without having to change focus or make guesses between two different terms.&lt;/p&gt;
&lt;p&gt;In the end, using clear, consistent terminology between what is seen and what is spoken provides a more enjoyable user experience — for everyone — because the labels that get read by assistive technologies match the visible labels that can also be seen and read. This is what we talk about with inclusive design — everyone wins and no one is left out.&lt;/p&gt;
&lt;h2 id=&quot;summary&quot; tabindex=&quot;-1&quot;&gt;Summary&lt;/h2&gt;
&lt;p&gt;We just broke down some of the finer points of the WCAG 2.5.3 Success Criterion for labels in names. It sounds like a simple thing to follow. But as we’ve seen, there are situations where it’s not so clear-cut.&lt;/p&gt;
&lt;p&gt;The goal of adhering to this criterion is, of course, to make our work accessible and inclusive for all people. The WCAG helps us know if we’re successful not only by providing guidelines, but by settings grades of compliance (A, AA, AAA, where AAA is the highest). Text in Label falls into the A grade, meaning it’s a base level of compliance. To earn the grade, the WCAG is &lt;a href=&quot;https://www.w3.org/TR/WCAG21/#label-in-name&quot;&gt;looking for&lt;/a&gt;:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;[…] &lt;a href=&quot;https://www.w3.org/TR/WCAG21/#dfn-user-interface-components&quot;&gt;user interface components&lt;/a&gt; with &lt;a href=&quot;https://www.w3.org/TR/WCAG21/#dfn-labels&quot;&gt;labels&lt;/a&gt; that include &lt;a href=&quot;https://www.w3.org/TR/WCAG21/#dfn-text&quot;&gt;text&lt;/a&gt; or &lt;a href=&quot;https://www.w3.org/TR/WCAG21/#dfn-images-of-text&quot;&gt;images of text&lt;/a&gt;, the &lt;a href=&quot;https://www.w3.org/TR/WCAG21/#dfn-name&quot;&gt;name&lt;/a&gt; contains the text that is presented visually.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;We can test and make certain that our code is complete and correct by looking at the source code of the site, using a browser’s DevTools, such as Chrome or Firefox, or running an accessibility audit using such tools as the &lt;a href=&quot;https://wave.webaim.org/extension/&quot;&gt;WAVE browser extension&lt;/a&gt; (Chrome and Firefox) and &lt;a href=&quot;https://www.deque.com/axe/browser-extensions/&quot;&gt;Axe from Deque Systems&lt;/a&gt; (Chrome).&lt;/p&gt;
&lt;p&gt;In short, there are real people on the other side of the glass and there are things we can do in our code and designs to help them enjoy interacting with the components we make. Text in Label is just one of many criterion outlined in the WCAG and, while it may seem like a small detail, adhering to it can make a big impact on our users.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Goodbye 2020</title>
		<link href="https://toddl.dev/posts/goodbye-2020/"/>
		<updated>Thu, 31 Dec 2020 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/goodbye-2020/</id>
		<content type="html">&lt;p&gt;What can be said that already hasn&#39;t been said about this year?&lt;/p&gt;
&lt;p&gt;2020 was supposed to be something. It was to be a year where people all over kicked ass and took names and succeeded in everything they did. A kind of, “new hope” so to speak.&lt;/p&gt;
&lt;p&gt;Yet here we are…&lt;/p&gt;
&lt;p&gt;I can&#39;t think of a year where so much was taken from everyone. Ever. I have seen a lot of wins though from people. It&#39;s those small wins that add up to make the blow that is 2020 a lot more bearable.&lt;/p&gt;
&lt;p&gt;So as I say good bye to a horrible year (not my worst ever but pretty damn close) and leave a sliver of hope that 2021 is going to be somewhat better (yet it seems like 2021 is the sequel to 2020) I am going to leave 2020 defiantly as only I know how with some gratitude.&lt;/p&gt;
&lt;p&gt;So here are some of the things I am grateful for in 2020 that happened along the way.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Spoke at BarCamp Philly.&lt;/li&gt;
&lt;li&gt;Wrote an article for CSS-Tricks.&lt;/li&gt;
&lt;li&gt;Self-published a zine.&lt;/li&gt;
&lt;li&gt;Started writing an autobiography.&lt;/li&gt;
&lt;li&gt;Joined the W3C&lt;/li&gt;
&lt;li&gt;Started a podcast.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Those were just some of the things I am grateful about that happened during 2020. I am grateful for the support of friends, especially those on Twitter, and for the support when things were at their low regarding the miserable job hunt I was on.&lt;/p&gt;
&lt;p&gt;I&#39;ve since stopped the job hunt for the most part. I had a few resumes out there but for the most part, I decided to focus my time and energy on things other than looking for a job. The tech hiring process (the few times I had gone through it) is exhaustive. The amount of ghosting and no-contacts is appalling. The amount of rejection emails shortly after (an hour tops) was frighteningly fast and stupid.&lt;/p&gt;
&lt;p&gt;What will 2021 bring us? I&#39;m thinking more of the same every time I read the news unfortunately. Things arent going to change once the clock strikes midnight and certainly things in the US will not change because half the population can&#39;t seem to grasp the importance of nailing down this pandemic and getting back to restoring life in the US so we can walk among the outdoors without fear of dying.&lt;/p&gt;
&lt;p&gt;I digress. 2021 I look to for hope. I look to 2021 hopeful that some way, humankind will rebound and bounce back better and a little smarter, but the past has dictated we&#39;re not going to reach that goal in my lifetime.&lt;/p&gt;
&lt;p&gt;I will continue to support all my friends, old and new, take care of myself in ways I have never done before by taking time and stepping back from the computer, self-care, I will keep writing articles that hopefully will be published, speaking at events to get out on the circuit once we can resume travel that is far safer than what we have now, and look to keep on doing what I always have. Learn and grow.&lt;/p&gt;
&lt;p&gt;May your 2021 be the best it can be with happiness and safety in these times.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Staycation 2021</title>
		<link href="https://toddl.dev/posts/staycation-2021/"/>
		<updated>Mon, 25 Jan 2021 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/staycation-2021/</id>
		<content type="html">&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1611591059/images/staycation.jpg&quot; alt=&quot;A person sitting on a bed or couch and holding a coffee mug in one hand and reading a book an dturning a page with the other hand.&quot; title=&quot;Photo by Nathan Dumlao on Unsplash.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;I recently took over a month off from work. That meant not doing any work. At all. I did keep some commitments I had, but for the most part, very little code was touched. I recommend you take a month off every year, and here is why.&lt;/p&gt;
&lt;p&gt;When you have been plugging away at code for so long through the year and you have been fed a steady diet of work, work, and work, you develop blinders (or at least I do) and you push through everything and anything to get as much work done as possible.&lt;/p&gt;
&lt;p&gt;The means losing sleep and not taking care of yourself. It could mean just doing things that are not condusive to the health and wellbeing of a developer or designer. Especially, the mental health part. Stress, pushing to get things wrapped up towards a deadline. Those things can break someone in tech.&lt;/p&gt;
&lt;p&gt;I have experienced this many times and in multiple cases during the course of a year back when I could push 18-20 hours days wile raising two kids part-time and working a third shift job while also having a few money-making opportunities inbeween.&lt;/p&gt;
&lt;p&gt;Skip to 2020. Good grief! I usually take the entire month of August off, it has always been a yearly thing so I can get in the car and drive up the coast of Maine, eating lobster rolls and enjoying the summer and ocean. Now, since I don&#39;t want to chance anything, I stayed home and decided January, my birth month, would be a great present to myself.&lt;/p&gt;
&lt;h2 id=&quot;so-what%3F-why-should-i-care%3F&quot; tabindex=&quot;-1&quot;&gt;So What? Why should I care?&lt;/h2&gt;
&lt;p&gt;I&#39;ve been burnt out &lt;strong&gt;multiple&lt;/strong&gt; times. You don&#39;t want to go down the same path if you haven&#39;t already. If you have already, then you know full well what I am talking about. A designer or developer is only good to themselves and their company if they are at their best. That means a few aspects.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Mental Health&lt;/strong&gt;: This is tantamount. In order for you to be your best and be as sharp and laser-focused on the task at hand, your mental health is key. The key of keys. &amp;quot;The One Ring&amp;quot; so to speak. You rmental health is so important that any damage has a ripple effect as I like to call it. If you&#39;re not at your best, then that affects other people that you deal with on a daily basis.&lt;/p&gt;
&lt;p&gt;This could be co-workers, family, friends, anyone. Your actions affect others.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Physical Health&lt;/strong&gt;: I don&#39;t know how many times I &amp;quot;burnt the candle at both ends.&amp;quot; Meaning 16, 18, 20 hour days. Whether that was all coding or whether that was other jobs, family life, coding, etc. Lack of sufficient sleep and rest hurts you. It hurts your brain. It hurts your work.&lt;/p&gt;
&lt;p&gt;I scrapped sleep for the almighty dollar and it cost me time with my kids when they were young, two TIA&#39;s (mini-strokes), premature grey hair, stress, worry, anxiety. Nothing I&#39;d wish on anyone. It made me some money, but it cost me in the long run.&lt;/p&gt;
&lt;h2 id=&quot;i-can&#39;t-afford-to!-so-i-won&#39;t&quot; tabindex=&quot;-1&quot;&gt;I can&#39;t afford to! So I won&#39;t&lt;/h2&gt;
&lt;p&gt;Yes you can. You certainly can. I can and did. Here is how.&lt;/p&gt;
&lt;p&gt;You save up a chunk of your earnings and set that into an account or a place where you forget about it for a time. You save up two months worth of money and you use that (three in times where there isn&#39;t a pandemic and we are free to travel and do our thing without fear) to pay for your vacation.&lt;/p&gt;
&lt;p&gt;Granted, I kept a few of my commitments that I had previously scheduled, I also attended W3C meetings and that was pretty much it. I barely touched any code. I wrote, I read, I relaxed. Towards the end, I could feel myself itching to do some coding, but instead, I used that time to binge some Hulu or Netflix. Something other than code.&lt;/p&gt;
&lt;p&gt;You have that extra money, and in other circumstance, use it. Treat yourself. In these times where we have to be careful, do things like read, write, blog, watch movies or TV, &lt;em&gt;spend time with your family&lt;/em&gt;! I cannot stress that last one enough. Kids grow up fast. Make sure you&#39;re there when they do and not nose in the screen and head down and coding. Commit a block of your day to your family.&lt;/p&gt;
&lt;h2 id=&quot;my-company-won&#39;t-let-me-have-pto&quot; tabindex=&quot;-1&quot;&gt;My company won&#39;t let me have PTO&lt;/h2&gt;
&lt;p&gt;Well, I wouldn&#39;t work for a company that doesn&#39;t promote good health standards for their employees, first off. Secondly, take unpaid leave. Remember that money you saved up from part of that nice salary you make? Use it. Take it off. Especially these days where we might be stuck inside &lt;em&gt;all the time&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;No, tech does not usually commit to keeping their employees mental and physical health a priority. Sure, you have a gym at the office, but if we&#39;re remote, we&#39;re not there. I&#39;m not going into a gym under these extreme times we are living in. Are you? I hope not.&lt;/p&gt;
&lt;p&gt;So be good to yourself, be good to your families. Be good to the people around you because that &amp;quot;ripple effect&amp;quot; I spoke of earlier? It reaches far and wide. Have you ever tossed a stone into a lake or a pond? The ripples keep going and going, on and on for a long time and spread far and wide.&lt;/p&gt;
&lt;p&gt;That stone is you, the ripples are the effect you can have on others.&lt;/p&gt;
&lt;p&gt;Coding isn&#39;t the most important thing in the world. You are.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Don&#39;t Ever Give Up</title>
		<link href="https://toddl.dev/posts/dont-ever-give-up/"/>
		<updated>Wed, 31 Mar 2021 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/dont-ever-give-up/</id>
		<content type="html">&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1617229521/images/employed.jpg&quot; alt=&quot;The symbol for a handicapped parking space with the blue square and white figure sitting in a wheelchair.&quot; title=&quot;Photo by AbsolutVision on Unsplash&quot; /&gt;&lt;/p&gt;
&lt;h3 id=&quot;the-more-you-persist&quot; tabindex=&quot;-1&quot;&gt;The More You Persist&lt;/h3&gt;
&lt;p&gt;It has been a very trying year. Pandemic and employment-wise. The fact we have all made it this far is a testament to all of us. Jobs or no jobs. If you have found a job, congratulations. Keep it. Especially going out (hopefully) of this pandemic.&lt;/p&gt;
&lt;p&gt;If you don&#39;t have a job in tech and you&#39;re still looking, even through all the bullshit and the strife. The rejections and the ghosting. I have a few thoughts and words of advice. Don&#39;t stop. Don&#39;t ever give up.&lt;/p&gt;
&lt;p&gt;I have quit more than a thousand times. I have &amp;quot;given up&amp;quot; thousands of times. I am fifty years old and thought that I would never get an opportunity to do what I do best and what I love to do. Advocate and work in accessibility.&lt;/p&gt;
&lt;p&gt;Well, dear reader, that all has changed. Much, to my shock, surprise, and delight, I have accepted an offer to go to work for &lt;a href=&quot;https://knowbility.org/&quot;&gt;Knowbility&lt;/a&gt; and I couldn&#39;t be any more happier. The company is a great company, the people who work there are a bunch of talented and terrific folks, and it is in the space that I am now devoting the rest of my professional time in. Accessibility.&lt;/p&gt;
&lt;p&gt;I am keeping all my commitments to not only the W3C groups and subgroups I am a part of, but I am also keeping the commitments to the people that I have paired with doing coding.&lt;/p&gt;
&lt;h3 id=&quot;it&#39;s-over&quot; tabindex=&quot;-1&quot;&gt;It&#39;s Over&lt;/h3&gt;
&lt;p&gt;The job search is over.&lt;/p&gt;
&lt;p&gt;I have found the job that I want to close my career out at. I have another 10-20 years left in the tank. I am renewed, I am re-energized. I plan to crush this and put the rubber to the road.&lt;/p&gt;
&lt;h3 id=&quot;that&#39;s-great.-i&#39;m-still-jobless&quot; tabindex=&quot;-1&quot;&gt;That&#39;s Great. I&#39;m Still Jobless&lt;/h3&gt;
&lt;p&gt;Through the thousands (literally) of resumes, and emails and rejections and ghosting that I endured. Through the amount of times when I thought:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Am I good enough? Am I too old? Should I just give up? Should I just quit?&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;I kept going and finding the things I was good at. I applied to the jobs even if I didn&#39;t have all the qualifications. I was so numbed to the:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;We liked your resume and it was impressive but you&#39;re not the right fit.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;I kept going. Kept the bar low as low can be. I don&#39;t know how and I don&#39;t know why, but I kept going and I finally got my Holy Grail.&lt;/p&gt;
&lt;p&gt;I used to tweet the literal numbers, 2 for 2,126. That was the last one I knew of in my count though I stopped tweeting the numbers, I kept record for the last twenty years of applying. Now I can gladly say, 3 for 2,157 and that&#39;s alright by me.&lt;/p&gt;
&lt;p&gt;You can succeed and you can achieve your goal, it is a monumental mountain to climb, more so others than myself because I am a mediocre white man in tech. It was difficult to say the least still, however. Age made a huge difference, but not anymore.&lt;/p&gt;
&lt;p&gt;I want you to ask yourselves if you really love what you do on the web or in tech, is it worth throwing it all away? No matter if it is people teeling you that you cannot do it, undervaluing you, doubting, demeaning, ghosting you. Is it worth letting that rent space in your head.&lt;/p&gt;
&lt;p&gt;You can do it. I know it is easy for me, a mediocre, white man of privilege to say all this, but I say to you the reader, or if you&#39;re a friend of mine that isn&#39;t white like me, KEEP GOING!&lt;/p&gt;
&lt;p&gt;DON&#39;T EVER GIVE UP!&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>AccessiBe Is Not Your Friend</title>
		<link href="https://toddl.dev/posts/accessibe-is-not-your-friend/"/>
		<updated>Thu, 15 Jul 2021 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/accessibe-is-not-your-friend/</id>
		<content type="html">&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1626382025/images/snakeoil.jpg&quot; alt=&quot;A snake oil salesman on his wagon where he sells snake oil that has the AccessiBe logo Photoshopped on the side of the wagon.&quot; title=&quot;A snake oil salesman on his wagon where he sells snake oil that has the AccessiBe logo Photoshopped on the side of the wagon.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;The following view does not represent my employer, or any other entity I am involved with. The views expressed here are strictly my own.&lt;/p&gt;
&lt;h3 id=&quot;the-shot&quot; tabindex=&quot;-1&quot;&gt;The Shot&lt;/h3&gt;
&lt;p&gt;A recent thread on Twitter caught my eye and it was probably the most ridiculous thing I have read in a very long time.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1626382345/images/shot.png&quot; alt=&quot;A Twitter thread by a group that uses AccessiBe and a troll account tweeting disparaging remarks about Karl Groves, a long time accessibility professional.&quot; title=&quot;A Twitter thread by a group that uses AccessiBe and a troll account tweeting disparaging remarks about Karl Groves, a long time accessibility professional.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;There is a bit to unpack here.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;One. This account was created to troll an accessibility professional of many years and much experience.&lt;/li&gt;
&lt;li&gt;Two. It&#39;s a sock puppet account. If it&#39;s a real guy, then its a middle school attempt at being a troll on Twitter.&lt;/li&gt;
&lt;li&gt;Three. It&#39;s probably the only account I have seen come to the defense of a snake oil sales company.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1626383178/images/sock_puppet.png&quot; alt=&quot;&#39;Sheldon&#39; just joined Twitter today to throw shade. His picture may be from This Person Does Not Exist.&quot; title=&quot;&#39;Sheldon&#39; just joined Twitter today to throw shade. His picture may be from This Person Does Not Exist.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;“Sheldon” looks like he just joined today to throw shade at Karl. I smell something rotten and suspect an &amp;quot;executive&amp;quot; with the mindset of a child went and created an account, got an AI generated profile photo, then decided to play with the accessibility community.&lt;/p&gt;
&lt;p&gt;I asked for a list of the &amp;quot;professionals&amp;quot; that support AccessiBe. No list has been made public yet. A lot of &amp;quot;pot meet kettle&amp;quot; especially when others have come to the conclusion that AccessiBe needs the benefit of the doubt.&lt;/p&gt;
&lt;p&gt;They had that benefit of the doubt moment and they squandered it. Personal attacks, fear-based attacks, attacks against professionals in the industry with decades of experience and knowledge. Even going as far as this schoolyard bully behavior. What&#39;s next? I think the attacks get worse.&lt;/p&gt;
&lt;p&gt;AccessiBe execs get defensive real quick when there is any opposition to their product and they hunch down like a trapped cat in a corner and they hiss and arch their backs, spewing bile and venom at those who oppose them. Which indicates they know their prodcut is bullshit, yet the money they get from telling corporations and organizations that they can make their sites work even though they don&#39;t. Their product is a modern-day Ponzi scheme.&lt;/p&gt;
&lt;h3 id=&quot;the-chaser&quot; tabindex=&quot;-1&quot;&gt;The Chaser&lt;/h3&gt;
&lt;p&gt;Few have sung the praise of the snake oil, yet when time and time again, accessibility professional after accessibility professional has come forward with &lt;strong&gt;evidence&lt;/strong&gt; that the overlay &lt;em&gt;does not work&lt;/em&gt;, they slither their way to ramping up ads or their propaganda against the accessibility community and the professionals that have helped the disabled/accessibility community for &lt;em&gt;decades&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1626383910/images/chaser.png&quot; alt=&quot;The chaser. Proof from Eric Eggert that AccessiBe&#39;s overlay does not work as the company claims.&quot; title=&quot;The chaser. Proof from Eric Eggert that AccessiBe&#39;s overlay does not work as the company claims.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;The overlay (and &lt;strong&gt;any&lt;/strong&gt; overlay or aid that is plastered onto a site) does not work. The proof is in the pudding and the proof has been &lt;a href=&quot;https://adrianroselli.com/2020/06/accessibe-will-get-you-sued.html&quot;&gt;well-researched&lt;/a&gt;, &lt;a href=&quot;https://overlayfactsheet.com/&quot;&gt;well-documented&lt;/a&gt;, and presented by many. So many that &lt;a href=&quot;https://www.forbes.com/sites/gusalexiou/2021/06/26/largest-us-blind-advocacy-group-bans-web-accessibility-overlay-giant-accessibe/?sh=379fd3bf5a15&quot;&gt;it has been in the news&lt;/a&gt;, it has been &lt;a href=&quot;https://www.nbcnews.com/tech/innovation/blind-people-advocates-slam-company-claiming-make-websites-ada-compliant-n1266720&quot;&gt;featured nationally&lt;/a&gt;, and even the lies AccessiBe has perpetrated have been &lt;a href=&quot;https://wptavern.com/wordpress-org-removes-fake-reviews-for-acessibe-plugin&quot;&gt;uncovered and exposed them&lt;/a&gt; as the frauds they are.&lt;/p&gt;
&lt;h3 id=&quot;how-low-can-you-go%3F&quot; tabindex=&quot;-1&quot;&gt;How Low Can You Go?&lt;/h3&gt;
&lt;p&gt;Well, as evidenced by the attack on Karl Groves today (as of this writing), you can plainly see that they will stoop to no level and the bar should be set very low for any dealing with or support for this wolf in sheeps clothing.&lt;/p&gt;
&lt;p&gt;Let&#39;s revisit some of those, shall we?&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Lies about reviews, those reviews removed because they were fake about the WordPress plugin they offer (which still doesn&#39;t make you rsite 100% accessible).&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://adrianroselli.com/2020/06/accessibe-will-get-you-sued.html#Update05&quot;&gt;Being ableist&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Attacking accessibility professionals in the accessibility space.&lt;/li&gt;
&lt;li&gt;Fake Twitter accounts (?)&lt;/li&gt;
&lt;li&gt;Lies about other assistive technologies.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;and those are just a few.&lt;/p&gt;
&lt;p&gt;I will be calling for the W3C to remove and ban AccessiBe for their behavior for life for what they have done as it does not represent the W3C, it&#39;s people, past, present, and future. It certainly does not carry itself in the manner that an organization would being a W3C member. That said, my next move is to research and find out what channels to go through to get this done.&lt;/p&gt;
&lt;h3 id=&quot;bottom-line&quot; tabindex=&quot;-1&quot;&gt;Bottom Line&lt;/h3&gt;
&lt;p&gt;The bottom line here, if I may, is to not deal with or believe anything AccessiBe has to offer. Sites cannot be 100% accessible all the time. It is nearly impossible (unless you have a small blog and never update it after making it &amp;quot;100% accessible&amp;quot;) to make a site that changes and evolves, &amp;quot;totally accessible&amp;quot;.&lt;/p&gt;
&lt;p&gt;The evolution of a site does not allow for that and things break and accessibility changes and things become inaccessible until fixed by a human. Can AccessiBe&#39;s snake oil do that?&lt;/p&gt;
&lt;p&gt;Take it from the people that are in the disabled community that have experience with the barriers that this and any other overlay says it offers, yet just creates more barriers to accessibility. An overlay does not work. You want compliance? Get &lt;a href=&quot;https://knowbility.org/&quot;&gt;a hold of a company&lt;/a&gt; that does auditing and has a staff that employs professionals that have worked in the accessibility space that know how to make your site accessible.&lt;/p&gt;
&lt;p&gt;Don&#39;t take the easy way out. Companies that like to spend money just to throw it at a company that says they can do one thing, yet it prodcues another are just not educated enough. &lt;a href=&quot;https://www.smashingmagazine.com/2021/07/strong-case-for-accessibility/&quot;&gt;I wrote an article that touched upon how to get stakeholder and managerial buy-in at your organization&lt;/a&gt; it even stresses the importance of getting peers and colleagues in on accessibility as well.&lt;/p&gt;
&lt;p&gt;Don&#39;t believe the hype. Overlays, no matter who they are from, and there are many companies out there selling the snake oil these days, do not work. It has been proven they don&#39;t. Consult a professional or a company that is reputable in the accessibility space. There are plenty of those companies out there looking out for you as well.&lt;/p&gt;
&lt;h2 id=&quot;correction-(28-july%2C-2021)&quot; tabindex=&quot;-1&quot;&gt;CORRECTION (28 July, 2021)&lt;/h2&gt;
&lt;p&gt;After some research when seeing a tweet, I looked up Sheldon, who is in fact real. And a person with a disability. Don&#39;t come at me with &amp;quot;You&#39;re attacking a disabled person.&amp;quot; I&#39;m not, I&#39;m questioning professional ethics and confirmation bias. However, the irony remains.&lt;/p&gt;
&lt;p&gt;Sheldon is real. Sheldon is also a person with a disability. Yet, Sheldon created a Twitter account to disparage remarks made by Karl. The account was created in July. Had one follower. Which reeks of new.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1627483084/images/sheldon.png&quot; alt=&quot;Sheldon is real and Sheldon has a great LinkedIn profile.&quot; title=&quot;Sheldon is real and Sheldon has a great LinkedIn profile.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;There are lots of people in the disabled community that are on the side of AccessiBe, and that&#39;s their choice, of course. But for a manager to make an account just for the sole fact of leaning into a conversation and throwing hasoline on an already out of control tire fire is beyond me.&lt;/p&gt;
&lt;p&gt;Two things that are apparent in the accessibility community:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Karl has decades experience.&lt;/li&gt;
&lt;li&gt;Karl does not &amp;quot;own his own manual coding business&amp;quot;.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Which brings me this last point.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1627482525/images/sheldon2.png&quot; alt=&quot;Sheldon has goals and aspirations yet joins in the divide that AccessiBe hammers between people in the disabled and accessibility communities.&quot; title=&quot;Sheldon has goals and aspirations yet joins in the divide that AccessiBe hammers between people in the disabled and accessibility communities.&quot; /&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;We are on a mission to make the internet accessible to all by 2025&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Hard to achieve that dream when the company you stump for doesn&#39;t make the web accessible.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;The current state of the internet where only 2% of websites are accessible to people with disabilities is unjust and together with the use of technology we can bridge the ever-growing digital divide.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;There is a lot to unpack there. First, that 2 percent is probably higher due to AccessiBe being implemented by entities that do not know how the product affects users. So it may even be 99%+.&lt;/p&gt;
&lt;p&gt;It is unjust, but AccessiBe contributes to that unjust.&lt;/p&gt;
&lt;p&gt;Technology has shown (as has the people that create it) that ML, AI, cannot be trusted to solve all the problems. It doesn&#39;t bridge, is creates barriers.&lt;/p&gt;
&lt;p&gt;For someone that preaches bridging the ever-growing digital divide, it strikes me as ironic that Sheldon would create a Twitter account, tweet a disparaging tweet, deactivate the account, and contribute to a company that is well-known for guerilla-style attacks on people with decades in the accessibility community.&lt;/p&gt;
&lt;p&gt;By the by, Sheldon is back and still pedaling the same farcical, muck.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1627486307/images/sheldon3.png&quot; alt=&quot;Guess who&#39;s back, back again. Sheldon&#39;s back, tell a friend.&quot; title=&quot;Guess who&#39;s back, back again. Sheldon&#39;s back, tell a friend.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;It just doesn&#39;t end. That&#39;s the real problem, and with a boat load of money behind them, and the company reaching out to unaware entities and asking them if they need a solution just to sell uneducated stakeholders and managers snake oil, is the biggest problem.&lt;/p&gt;
&lt;p&gt;Sheldon just exacerbates it.&lt;/p&gt;
&lt;p&gt;Sheldon may be a very nice human being, I&#39;m not saying Sheldon isn&#39;t. However, what I am saying is Sheldon is part of the problem. What woks in your browser doesn&#39;t work in everyone else&#39;s.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Looking at WCAG 2.5.5 for Better Target Sizes</title>
		<link href="https://toddl.dev/posts/looking-at-wcag-255-for-better-target-sizes/"/>
		<updated>Thu, 29 Jul 2021 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/looking-at-wcag-255-for-better-target-sizes/</id>
		<content type="html">&lt;p&gt;Have you ever experienced the frustration of trying to tap a button on a mobile device only to have it do nothing because the target size is just not large enough **and it’s not picking up on your press? Maybe you have larger fingers, like I do, or maybe it’s due to limited dexterity. This is because the sadly ever-decreasing target area of elements we, the users, have to interact with.&lt;/p&gt;
&lt;p&gt;Let’s talk about target size and how to make it large enough for users to easily interact with an element. This is an especially big deal if a user is accessing content on a small hand-held touch screen device where real estate is much tighter.&lt;/p&gt;
&lt;h3 id=&quot;success-criterion-revisited&quot; tabindex=&quot;-1&quot;&gt;Success criterion revisited&lt;/h3&gt;
&lt;p&gt;I touched (no pun intended) on Success Criterion in &lt;a href=&quot;https://css-tricks.com/whats-new-in-wcag-2-1-label-in-name/#you-lost-me-at-success-criterion&quot;&gt;a previous article&lt;/a&gt; covering the WCAG 2.1 criterion, Label in Name. In short, the WCAG criteria is the baseline from which we determine whether our work is “accessible.”&lt;/p&gt;
&lt;p&gt;If you’re wondering whether there’s a criterion for target size, the answers is yes. It’s WCAG 2.5.5. Pulling straight from the guidelines. passing &lt;a href=&quot;https://www.w3.org/TR/WCAG21/#target-size&quot;&gt;WCAG 2.5.5&lt;/a&gt; with a AAA grade requires “the size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Equivalent: The target is available through an equivalent link or control on the same page that is at least 44×44 CSS pixels;&lt;/li&gt;
&lt;li&gt;Inline: The target is in a sentence or block of text;&lt;/li&gt;
&lt;li&gt;User Agent Control: The size of the target is determined by the user agent and is not modified by the author;&lt;/li&gt;
&lt;li&gt;Essential: A particular presentation of the target is essential to the information being conveyed.”&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;what-could-possibly-go-wrong%3F&quot; tabindex=&quot;-1&quot;&gt;What could possibly go wrong?&lt;/h3&gt;
&lt;p&gt;It’s just a size, right? Easy peasy. Nothing can possibly go awry.&lt;/p&gt;
&lt;p&gt;Or can it?&lt;/p&gt;
&lt;p&gt;Small target sizes can cause accessibility hurdles for many people. Have you ever been traveling in a vehicle on a bumpy road and you’re trying to interact with an app on your mobile can not press on an element? That is an accessibility hurdle. Those with motor skill or cognitive impairments will have a much harder time because it is much harder for them if the target size is too small and does not meet WCAG requirements.&lt;/p&gt;
&lt;p&gt;I don’t mean to pick on Twitter here, but it’s the first notable example I found while hunting for examples of small targets.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1627617619/images/timeline.webp&quot; alt=&quot;A timeline from Twitter with some really small target area to close out topics if you don&#39;t want to see them and plus icons if you want to add them.&quot; /&gt;&lt;/p&gt;
&lt;figcaption&gt;There are some good examples of small targets in here, from the tiny contextual menu to the actions in the footer of a tweet, and even the small icons to add topics to a timeline. And notice that even with a properly sized target, like the floating button to compose a tweet, it overlaps with another target, obstructing access to it.&lt;/figcaption&gt;
&lt;p&gt;Another favorite example I see quite often? Ads. Have you ever struggled to click the minuscule “X” button to close them?&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1627864886/images/cookie.webp&quot; alt=&quot;Cookie policy modal with a very small target area and difficult way to close the ad.&quot; /&gt;&lt;/p&gt;
&lt;figcaption&gt;You’re not alone if you’ve ever struggled to click, let alone even locate, the close button.&lt;/figcaption&gt;
&lt;p&gt;Having no motor skill or cognitive disabilities personally, I find myself fumbling around and taking multiple times to hit some target areas. The fact that someone who needs to use something like a pen or stylus on a target size that is not a minimum of 44×44 pixels can be a difficult task. These targets shouldn’t need multiple attempts to activate when the target size doesn’t meet recommended guidelines.&lt;/p&gt;
&lt;h3 id=&quot;target-size-considerations&quot; tabindex=&quot;-1&quot;&gt;Target size considerations&lt;/h3&gt;
&lt;p&gt;WCAG 2.5.5 goes into specific detail to help us account for these things by defining the four types of controls we just saw: equivalent, inline, User Agent, and essential.&lt;/p&gt;
&lt;p&gt;We’re going to look at different considerations for determining target sizes and hold them up next to the WCAG guidelines to help steer us toward making good, accessible design decisions.&lt;/p&gt;
&lt;h4 id=&quot;consider-the-difference-between-%E2%80%9Cclick%E2%80%9D-and-%E2%80%9Ctap%E2%80%9D&quot; tabindex=&quot;-1&quot;&gt;Consider the difference between “click” and “tap”&lt;/h4&gt;
&lt;p&gt;This success criteria ensures that target sizes are large enough for users to easily activate targets, even if the user is accessing these targets on handheld devices. We typically associate small screens with “taps” instead of “clicks” when it comes to activating targets. And that’s something we need to consider in our target sizing.&lt;/p&gt;
&lt;p&gt;Mice and similar input devices use a pointer on the screen, which is considered “fine” precision because it allows a user to access an element on the screen with exact precision. Fine precision makes it easier to access smaller target sizes in theory. The trouble is, that sort of input device can be tough for some users, whether it’s with gripping the device, or some other cognitive or motor skill. So, even with fine precision, having a clear target is still a benefit.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1627620899/images/mobile1.webp&quot; alt=&quot;A comparison of mobile screens side-by-side comparing targets of links as opposed to buttons.&quot; /&gt;&lt;/p&gt;
&lt;figcaption&gt;A Tale of Two Targets: Combining padding and color can help increase the size of a tap target while making it visually clear.&lt;/figcaption&gt;
&lt;p&gt;Touch, on the other hand, can be problematic as it is an input mechanism with very “coarse” precision. Users can lack a level of fine control when using a mouse or stylus, for example. A finger, which is larger than a mouse pointer, generally obstructs a user’s view of the exact location on the screen that is being activated or touched. Hence, “coarse” precision.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1627621013/images/mobile2.webp&quot; alt=&quot;A mobile device with two sections, the bottom section with a thumb shown clicking the target area as opposed to the upper half using a pointer.&quot; /&gt;&lt;/p&gt;
&lt;figcaption&gt;A smaller pointer offers more precision than a larger thumb when it comes to interacting with an element.&lt;/figcaption&gt;
&lt;p&gt;This issue is exacerbated in responsive design, which needs to accommodate for numerous types of fine and coarse inputs. Both input types must be supported for a site that can be accessed by a desktop or laptop with a mouse, as well as a mobile device or tablet with a touch screen.&lt;/p&gt;
&lt;p&gt;That makes the actual size we use for a target a pretty important detail. Depending on who is using a control, what that control does, how often it’s used, and where it’s located, we ought to consider using larger, clearer targets to prevent things like unintended actions.&lt;/p&gt;
&lt;p&gt;But with all this said, &lt;a href=&quot;https://www.w3.org/TR/mediaqueries-4/#pointer&quot;&gt;we do actually have a CSS media query&lt;/a&gt; that can detect a pointer device so we can target certain styles to either fine or coarse input interactions, &lt;a href=&quot;https://caniuse.com/css-media-interaction&quot;&gt;and it’s well-supported&lt;/a&gt;. Here’s an example pulled right out of the spec:&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;  &lt;span class=&quot;token comment&quot;&gt;/* Make radio buttons and check boxes larger if we have an inaccurate primary pointing device */&lt;/span&gt;
    &lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;pointer&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; coarse&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token selector&quot;&gt;input[type=&quot;checkbox&quot;], input[type=&quot;radio&quot;]&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;token property&quot;&gt;min-width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 30px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        &lt;span class=&quot;token property&quot;&gt;min-height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 40px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        &lt;span class=&quot;token property&quot;&gt;background&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; transparent&lt;span class=&quot;token punctuation&quot;&gt;;&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;But wait. While this is great and all, Patrick H. Lauke offers a word of caution about this interaction media query and &lt;a href=&quot;https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/&quot;&gt;it’s potential for making incorrect assumptions&lt;/a&gt;.&lt;/p&gt;
&lt;h4 id=&quot;consider-that-different-platforms-have-different-requirements&quot; tabindex=&quot;-1&quot;&gt;Consider that different platforms have different requirements&lt;/h4&gt;
&lt;p&gt;When WCAG specifies exact values, it’s worth paying attention. Notice that we’re advised to make target sizes at least 44×44 pixels, which is mentioned no fewer than 18 times in the &lt;a href=&quot;https://www.w3.org/WAI/WCAG21/Understanding/target-size.html&quot;&gt;WCAG 2.5.5 explainer&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;However, you may have also seen similar requirements with different guidance from the likes of Apple’s “Human Interface Guidelines” for iOS, and Google’s “Material Design” in their platform design requirements.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1627666743/images/apple1.webp&quot; alt=&quot;Side by side iPhones showing target size dimensions on two different devices.&quot; /&gt;&lt;/p&gt;
&lt;figcaption&gt;“Try to maintain a minimum tappable area of 44pt x 44pt for all controls.” (Apple, [“Human Interface Guidelines”](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/))&lt;/figcaption&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1627666769/images/android1.webp&quot; alt=&quot;Material Design target sizes.&quot; /&gt;&lt;/p&gt;
&lt;figcaption&gt;“Consider making pointer targets at least 44 x 44 dp.”
(Material Design, [“Accessibility”](https://www.material.io/design/usability/accessibility.html#layout-and-typography))&lt;/figcaption&gt;
&lt;h4 id=&quot;consider-the-%E2%80%9Ctappable-area%E2%80%9D-of-a-target&quot; tabindex=&quot;-1&quot;&gt;Consider the “tappable area” of a target&lt;/h4&gt;
&lt;p&gt;Notice that Apple’s platform requirements refer to a “tappable area” when describing the ideal target size. That means that we’re talking about space as much as we are about the appearance of a target. For example, Google’s Material Design suggests at least a 48×48 dp (density-independent pixels) target size for interactive elements. But what if your design requirements call for a 24×24 dp icon? It’s totally legit to use padding in our favor to create more interactive space around the icon, comprising the 48×48 dp target size. Or, &lt;a href=&quot;https://www.material.io/design/usability/accessibility.html#layout-and-typography&quot;&gt;as it’s documented&lt;/a&gt; in Material Design:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Touch targets are the parts of the screen that respond to user input. They extend beyond the visual bounds of an element. For example, an icon may appear to be 24×24 dp, but the padding surrounding it comprises the full 48×48 dp touch target.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p class=&quot;codepen&quot; data-height=&quot;300&quot; data-default-tab=&quot;html,result&quot; data-slug-hash=&quot;zYZWzZm&quot; data-user=&quot;css-tricks&quot; style=&quot;height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot;&gt;
  &lt;span&gt;See the Pen &lt;a href=&quot;https://codepen.io/team/css-tricks/pen/zYZWzZm&quot;&gt;
  &lt;/a&gt; by CSS-Tricks (&lt;a href=&quot;https://codepen.io/team/css-tricks&quot;&gt;@css-tricks&lt;/a&gt;)
  on &lt;a href=&quot;https://codepen.io/&quot;&gt;CodePen&lt;/a&gt;.&lt;/span&gt;
&lt;/p&gt;
&lt;script async=&quot;&quot; src=&quot;https://cpwebassets.codepen.io/assets/embed/ei.js&quot;&gt;&lt;/script&gt;
&lt;h4 id=&quot;consider-responsive-layout-behavior&quot; tabindex=&quot;-1&quot;&gt;Consider responsive layout behavior&lt;/h4&gt;
&lt;p&gt;That’s right, we’ve gotta consider how things shift and move around in a design that’s meant to respond to different viewport sizes. One example might be buttons that stack on small screens but are inline on larger screen. We want to make sure that transition accounts for the placement of surrounding elements in order to prevent overlapping elements or targets.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1627859821/images/target-size-button-inline.webp&quot; alt=&quot;Two mobile devices showing inline button styles and their repective target areas.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;Speaking of inline, there’s a particular piece of the WCAG’s exception for inline targets that’s worth highlighting:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Inline: Content displayed can often be reflowed based on the screen width available (responsive design). In reflowed content, the targets can appear anywhere on a line and can change position based on the width of the available screen. Since targets can appear anywhere on the line, the size cannot be larger than the available text and spacing between the sentences or paragraphs, otherwise the targets could overlap. It is for this reason targets which are contained within one or more sentences are excluded from the target size requirements. (Emphasis mine)&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Now, we’re not necessarily talking about buttons that are side-by-side here. We can links within text and that text might break the target’s placement, possibly into two lines.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1627860493/images/target-size-inline-links.webp&quot; alt=&quot;A mobile device showing inline links and their target sizes&quot; /&gt;&lt;/p&gt;
&lt;figcaption&gt;While it might be difficult to tap one target without inadvertently tapping the other, the WCAG makes an exception for inline targets, like links within paragraphs.&lt;/figcaption&gt;
&lt;h4 id=&quot;consider-the-target%E2%80%99s-relationship-to-its-surroundings&quot; tabindex=&quot;-1&quot;&gt;Consider the target’s relationship to its surroundings&lt;/h4&gt;
&lt;p&gt;We just saw how inline links within a block of text are exempt from the 44×44 rule. There are similar exceptions depending on the target’s relationship to the elements around it.&lt;/p&gt;
&lt;p&gt;Let’s take the example that the WCAG explainer provides, again, in it’s description of inline target exceptions:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;If the target is the full sentence and the sentence is not in a block of text, then the target needs to be at least 44 by 44 CSS pixels.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;That’s a good one. We ought to consider whether the target is its own block or part of a larger block of text. If the target is its own block, then it needs to abide by the rules, whether it’s a button with a short label, or a complete sentence that’s linked up. On the flip side, a complete sentence that’s linked up inside another block of text doesn’t have to meet the target size requirements.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1627860568/images/target-size-relation.webp&quot; alt=&quot;Target size relation between two mobile devices one showing buttons and theother showing links in an article for each respectively.&quot; /&gt;&lt;/p&gt;
&lt;figcaption&gt;If the target is its own block of text (left), then it needs to adhere to the WCAG criterion. Otherwise, it is exempt (right).&lt;/figcaption&gt;
&lt;p&gt;You might think that something like a linked icon at the end of a sentence or paragraph would need to play by the rules, but the WCAG is clear that these targets are exempt:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;A footnote or an icon within or at the end of a sentence is considered to be part of a sentence and therefore are excluded from the minimum target size.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p class=&quot;codepen&quot; data-height=&quot;300&quot; data-default-tab=&quot;html,result&quot; data-slug-hash=&quot;rNydzOE&quot; data-user=&quot;css-tricks&quot; style=&quot;height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot;&gt;
  &lt;span&gt;See the Pen &lt;a href=&quot;https://codepen.io/team/css-tricks/pen/rNydzOE&quot;&gt;
  WCAG 2.5.5: Icons at the end of a sentence are exempt&lt;/a&gt; by CSS-Tricks (&lt;a href=&quot;https://codepen.io/team/css-tricks&quot;&gt;@css-tricks&lt;/a&gt;)
  on &lt;a href=&quot;https://codepen.io/&quot;&gt;CodePen&lt;/a&gt;.&lt;/span&gt;
&lt;/p&gt;
&lt;script async=&quot;&quot; src=&quot;https://cpwebassets.codepen.io/assets/embed/ei.js&quot;&gt;&lt;/script&gt;
&lt;p&gt;And that makes sense. Imagine content with a line height of, say 32 pixels and an icon at the end that’s all padded up to be 44×44 pixels and how easy it would be to inadvertently activate the icon.&lt;/p&gt;
&lt;h4 id=&quot;consider-whether-the-target-is-styled-by-the-user-agent&quot; tabindex=&quot;-1&quot;&gt;Consider whether the target is styled by the User Agent&lt;/h4&gt;
&lt;p&gt;If the target is completely un-styled — in the sense that you’ve added no CSS to it — and instead takes on the default styles provided by the browser, then there’s no need to stress the 44×44 rule. That makes sense. The User Agent is like system-level UI so changing it superficially with our own styles would be overriding an entire system which could lead to inconsistencies in that UI.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1627861573/images/form-input-submit.webp&quot; alt=&quot;A submit button.&quot; /&gt;&lt;/p&gt;
&lt;figcaption&gt;You’re fine just as you are, little button.&lt;/figcaption&gt;
&lt;p&gt;So, yeah, if you’re rockin’ a default &lt;code&gt;&amp;lt;button&amp;gt;&lt;/code&gt; or the like, and there are no other styles or sizing applied to it, then it’s good to go. But lots of us use resets to normalize UI elements across browsers, so watch for that in your codebase because that’s going to affect the User Agent styles of your target.&lt;/p&gt;
&lt;h4 id=&quot;consider-if-there-are-other-ways-to-activate-the-functionality&quot; tabindex=&quot;-1&quot;&gt;Consider if there are other ways to activate the functionality&lt;/h4&gt;
&lt;p&gt;We’ve all used in-page anchor links, right? Heck, CSS-Tricks often has a table of contents at the top of an article that’s merely a list of anchor links.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1627861624/images/toc.webp&quot; alt=&quot;A table of contents.&quot; /&gt;&lt;/p&gt;
&lt;figcaption&gt;Should these be at least 44×44 pixels?&lt;/figcaption&gt;
&lt;p&gt;WCAG actually uses anchor links as an example of something that’s off the hook as far as meeting the target size requirements. Why? Because it’s just as possible to manually scroll down to a specific location on a page as it is to click a link to jump there. There are two ways to accomplish the same thing, and one of those ways is built right into the browser.&lt;/p&gt;
&lt;p&gt;But we still ought to use care when working with something like a table of contents. I’m not entirely clear here, but given that a table of contents is list of links, each link may very well constitute its own block of text that’s not part of a larger block of a text, like a paragraph. So, in this sort of case, maybe a little extra space between list items is still a good idea. There’s less change of accidentally clipping or tapping two or more targets at once.&lt;/p&gt;
&lt;h3 id=&quot;wrapping-up&quot; tabindex=&quot;-1&quot;&gt;Wrapping up&lt;/h3&gt;
&lt;p&gt;WCAG 2.5.5 criterion provides guidance for applying target sizes that are clear, unobstructed, and easy to activate. As we saw, there are plenty of cases where the size of a target can make all the difference in the world when it comes to completing an action.&lt;/p&gt;
&lt;p&gt;The interesting thing about the target size guidelines is what is exempted from them. While we didn’t cover each specific exemption on its own, we did look at a bunch situations that require careful consideration for sizing a target, from the type of input device that’s in use to the relationship of the target to its surrounding elements, and plenty of things between.&lt;/p&gt;
&lt;p&gt;The key to accessible target sizing isn’t necessary about using less styling on a target (although we did see that default User Agent styles are exempt), but rather having context and styling accordingly. There are probably dozens more situations we could have covered here and examined how styles come into play — so if you have some, share!&lt;/p&gt;
&lt;p&gt;And as far as styling goes, CSS specifications have specific features, like the interation media query for pointer, to make target sizing even better for people. Used well, it could be a great way to detect if a visitor is using a fine or coarse input device. That way, we can tailor things to make their experience better than if we treated those differences the same.&lt;/p&gt;
&lt;p&gt;So, yes, target sizes are an easy thing to brush off and ignore. But hopefully now you’re like me and have a genuine appreciation for targets that are correctly sized now that you have the information to make correctly sized targets of your own.&lt;/p&gt;
&lt;h3 id=&quot;edit%3A-30-july%2C-2021&quot; tabindex=&quot;-1&quot;&gt;EDIT: 30 July, 2021&lt;/h3&gt;
&lt;p&gt;Adrian Roselli added:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;There is a &lt;a href=&quot;https://codepen.io/aardrian/pen/eYZWNyv&quot;&gt;bookmarklet to test 2.5.5&lt;/a&gt; that Jared Smith made last year and which I modified to allow you to dismiss on Esc.&lt;br /&gt;
There is plenty of evidence beyond Apple and Material Design (the latter being easy to dismiss for usability failures). &lt;a href=&quot;https://www.nngroup.com/articles/touch-target-size/&quot;&gt;Nielsen Norman Group writes about&lt;/a&gt; a 1cm × 1cm (0.4in × 0.4in) tap area, &lt;a href=&quot;https://www.bbc.co.uk/gel/guidelines/how-to-design-for-touch&quot;&gt;BBC GEL recommends&lt;/a&gt; 7mm, &lt;a href=&quot;https://docs.microsoft.com/en-us/windows/uwp/design/input/guidelines-for-targeting#target-size&quot;&gt;Microsoft’s Fluent recommends&lt;/a&gt; 40 × 40 effective pixels.&lt;br /&gt;
Hopefully the coming &lt;a href=&quot;https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html&quot;&gt;2.5.8 Target Size (Minimum) SC&lt;/a&gt; at Level AA will cover the gap that 2.5.5 at Level AAA left.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Patrick H. Lauke added:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;If you must use a &lt;code&gt;pointer&lt;/code&gt; query, strongly suggest using &lt;code&gt;any-pointer:coarse&lt;/code&gt; to detect the presence of &lt;em&gt;any&lt;/em&gt; coarse (generally, touch) pointer input (not just going by whatever the UA believes to be the primary).&lt;/p&gt;
&lt;/blockquote&gt;
</content>
	</entry>
	
	<entry>
		<title>Making A Strong Case For Accessibility</title>
		<link href="https://toddl.dev/posts/making-a-strong-case-for-accessibility/"/>
		<updated>Fri, 30 Jul 2021 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/making-a-strong-case-for-accessibility/</id>
		<content type="html">&lt;p&gt;(Originally posted on &lt;a href=&quot;https://www.smashingmagazine.com/2021/07/strong-case-for-accessibility/&quot;&gt;Smashing Magazine&lt;/a&gt; on 9 July, 2021)&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Accessibility is often overlooked or bolted on to the end of a project from the experiences in my career in web development and design. The case for accessibility is something we as people who create and build things for the web should be implementing and advocating for from the inception of a project to the release or handoff and beyond.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Imagine yourself as someone with a visual disability. Cataracts, or totally blind even. A site is not accessible because of many factors, willing and unwillingly. Accessibility may have been attended to at the end of the project or not in the budget, or maybe they just didn’t practice it. You can’t access the vital information on the site because it’s not accessible to people with visual disabilities.&lt;/p&gt;
&lt;p&gt;Perhaps a person has arthritis, Multiple Sclerosis, or another form of motor skill disorder and there is a part of the site that you cannot access because there is an issue that prevents you from obtaining that information you wish to on a site that you want to buy something on.&lt;/p&gt;
&lt;p&gt;These are just a couple of &lt;strong&gt;examples of what disabled users face daily&lt;/strong&gt; when they try and access a website that is inaccessible. The case for accessibility is this; we as stakeholders, managers, teams, designers and developers need to do better in not only practicing accessibility but advocating for it as well.&lt;/p&gt;
&lt;p&gt;If you have ever read the &lt;a href=&quot;https://webaim.org/projects/million/&quot;&gt;WebAIM Million&lt;/a&gt; report, you can see where the breakdown is, and until 2021, there hasn’t been much in the way of improvement. Of the 1 million home pages that were tested, over 51 million errors were detected averaging 51.4 errors per page. While the number of errors decreased, home page complexity increased regarding the number of page elements that had detectable accessibility errors.&lt;/p&gt;
&lt;p&gt;Inclusive design is a way of &lt;strong&gt;creating digital products that are accessible to a wide range of people&lt;/strong&gt; regardless of who they are, disabled or not, where they are, and encapsulates a diverse spectrum of people. &lt;a href=&quot;https://shop.bsigroup.com/upload/Download/30317424.pdf&quot;&gt;The British Standards Institution (2005) defines inclusive design as&lt;/a&gt;(PDF):&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;“The design of mainstream products and/or services that are accessible to, and usable by, as many people as reasonably possible ... without the need for special adaptation or specialized design.”&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Practicing accessibility in your workflows and methodologies ensures people — disabled or not — that they can access your product, your website, and your brands. Inclusive design and accessibility go hand-in-hand. Let’s look at some examples of accessibility.&lt;/p&gt;
&lt;h3 id=&quot;examples-of-practical-digital-accessibility&quot; tabindex=&quot;-1&quot;&gt;Examples Of Practical Digital Accessibility&lt;/h3&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;Your site has a color scheme that looks great after the designers are done with the mock-ups or the color scheme your brand uses is “perfect” in the eyes of people that do not have a visual disability. For people that have a visual disability like glaucoma, cataracts, or tritanopia (the deficiency of blue in one’s vision) they cannot make out that particular color and it does not meet &lt;a href=&quot;https://shop.bsigroup.com/upload/Download/30317424.pdf&quot;&gt;WCAG standards&lt;/a&gt;.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;If your light blue font color on a darker blue background did not meet those guidelines set in WCAG, then it would be inaccessible. If you switched to a lighter blue or white font within the &lt;a href=&quot;https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html&quot;&gt;4.5 to 1 ratio guideline&lt;/a&gt; that you can read about in &lt;a href=&quot;https://www.w3.org/TR/WCAG21/#contrast-minimum&quot;&gt;(Success Criterion 1.4.3: Contrast (Minimum))&lt;/a&gt;, then it would meet the standard and be accessible to more people. &lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1627868024/images/font-contrasts.webp&quot; alt=&quot;Different font colors and their respective WCAG color contrast ratios for text on a light blue background for a use case.&quot; /&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;You have a site that does not traverse well (or at all) when disabled users use assistive technologies such as a screen reader, keyboard, or voice recognition to navigate around the site because they lack the motor skills or dexterity to do so. An accessible site makes sure there is a way for those users to navigate through the site with no issues. Examples of keyboard navigation &lt;a href=&quot;https://youtu.be/FvpUNiB-2T0&quot;&gt;can be seen in this video&lt;/a&gt; and in &lt;a href=&quot;https://youtu.be/7RHG_XiQ0ck&quot;&gt;this short video about voice recognition&lt;/a&gt;.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;An accordion component with information that creates content that is not scrollable. It is inaccessible to people that use the keyboard for navigation. Make sure that the content is accessible by keyboard in that instance.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Using alternative text to describe the information in a picture for Blind users. &lt;a href=&quot;https://www.smashingmagazine.com/2021/06/img-alt-attribute-alternate-description-decorative/&quot;&gt;Images that do not have alternative text that describes to screen reader users what the picture conveys&lt;/a&gt; are a barrier to blind people. e.g. &lt;code&gt;&amp;lt;img src=“” alt=“This is my favorite kind of animal, a Maine Coon cat.”&amp;gt;&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Users of newer technologies, people that live in metropolitan areas, or people that can afford to buy the latest tech, for example, have fewer barriers to break through than people that cannot afford a new phone or tablet, or are in very remote or rural areas.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;The glare of the sun on your mobile device as you’re on the beach on a sunny day. You’re shielding the screen or squinting to see the screen to read what restaurant to go to after you’re day at the beach is done. That is a situational impairment.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;A fussy child on your lap moving around while you are trying to read an email or an injured arm as you try to answer an email, hindering your ability to type as you normally would is a situational impairment.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;There are a lot more examples of accessibility I could mention but that would take a very long time to write, so these are just a few examples.&lt;/p&gt;
&lt;h3 id=&quot;actionable-steps-to-get-buy-in&quot; tabindex=&quot;-1&quot;&gt;Actionable Steps To Get Buy-In&lt;/h3&gt;
&lt;p&gt;Two of the most widely used reasons I hear as to why people or companies aren’t practicing accessibility are:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;“The client has no budget for it.”&lt;br /&gt;
“My manager said we’ll get to it after launch.”&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id=&quot;buy-in-and-support-from-executives%2Fstakeholders&quot; tabindex=&quot;-1&quot;&gt;Buy-In And Support From Executives/Stakeholders&lt;/h3&gt;
&lt;p&gt;From the outset, advocating for accessibility starts at the top. Once you have stakeholder support, then you may see support trickle down to managers, then teams, and then individuals. It all starts with you first. Buy-in and support from executives will continuously be successful across the organization.&lt;/p&gt;
&lt;p&gt;When the ethical approach doesn’t work, the approach I will take is the financial approach:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;“You’ll be saving the company a lot of money when you do this from the start. When maintenance is needed, it won’t take the team as long to maintain the code because of accessibility and clean code.”&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;When, or if that fails, I’ll go for the legal ramifications and cite instances from the lawsuits that have been won against Target, Bank of America, Domino’s Pizza, and others. It’s amazing to see how fast executives and stakeholders do not want to get sued.&lt;/p&gt;
&lt;p&gt;Keeping executives engaged and meeting with them regularly will ensure success with your accessibility initiatives, but will also provide support for when new accessibility initiatives need to be implemented or when there are disagreements among teams on the implementation or prioritization, you have the support of executives.&lt;/p&gt;
&lt;p&gt;Being accessible is a good way for a company to differentiate itself from other companies, when you make a quality product, then the company buy-in becomes greater in some instances. Teams that push for accessibility usually lead the way to getting buy-in from other departments and executives. If the product is high quality and makes the company money, that’s when the company is swayed to adopt the practice.&lt;/p&gt;
&lt;p&gt;Demonstrations of &lt;strong&gt;live testing with disabled users&lt;/strong&gt; are also another way to get buy-in across the board. To humanize the decision-making process and get executives and colleagues on board by showing them when design choices do not meet user needs on a daily basis by disabled users using inaccessible products. Or one that I have used in the past, don’t ask, just do it.&lt;/p&gt;
&lt;p&gt;Most of the time, however, it is how the practice of accessibility can make the company money or the legal consequences that a company can face, that sways an executive to adopt the practice. Then, in those instances, is when an executive or stakeholder starts learning about accessibility if they want to invest in that time.&lt;/p&gt;
&lt;p&gt;Coordinating efforts across departments may be difficult and time-consuming at first so that support from the top will help alleviate the pressures and burnout that can happen when taking on the task of creating and implementing an accessibility strategy.&lt;/p&gt;
&lt;h3 id=&quot;have-a-team-or-individual-who-is-your-accessibility-advocate(s)&quot; tabindex=&quot;-1&quot;&gt;Have A Team Or Individual Who Is Your Accessibility Advocate(s)&lt;/h3&gt;
&lt;p&gt;Once you have buy-in from executives or stakeholders, having a person throughout each department or a team focused on accessibility. Throughout each department have an individual who is the liaison regarding accessibility.&lt;/p&gt;
&lt;p&gt;Have someone that can answer questions and work with others to practice the guidelines and work with others to make accessible products. Help set up documentation and tooling, serve as an intermediary between departments.&lt;/p&gt;
&lt;h3 id=&quot;assess-the-product-and-proficiency-within-the-company&quot; tabindex=&quot;-1&quot;&gt;Assess the Product and Proficiency Within the Company&lt;/h3&gt;
&lt;p&gt;Gauging the point where the product(s) are as far as how inclusive and accessible they are is a key priority. This ensures the team or individual that their efforts to make the product better and accessible are happening. What is the current state of the product? What is the current state of the website or mobile application?&lt;/p&gt;
&lt;p&gt;Getting the general idea of the level of knowledge that teams and people in the company currently have is important going forward. How versed are they in accessibility guidelines and practices? Do they know anything about the Web Content Accessibility Guidelines (WCAG)? How much training do you have and will you need?&lt;/p&gt;
&lt;p&gt;Maintaining a &lt;strong&gt;written record of all accessibility training done&lt;/strong&gt; to meet the requirements that apply to your organization is a great way to keep data on all the training done within the organization. Recording the training and who and when it was completed. If there is no inter-organizational accessibility training available your organization can look into different methods of training like the kind &lt;a href=&quot;https://webaim.org/services/training/&quot;&gt;WebAIM&lt;/a&gt;, &lt;a href=&quot;https://www.adaanniversary.org/training&quot;&gt;the ADA&lt;/a&gt;, or &lt;a href=&quot;https://knowbility.org/services/training&quot;&gt;Knowbility&lt;/a&gt; has to offer.&lt;/p&gt;
&lt;h3 id=&quot;establish-guidelines-for-the-company&quot; tabindex=&quot;-1&quot;&gt;Establish Guidelines For The Company&lt;/h3&gt;
&lt;p&gt;Consistent implementation of the product greatly benefits the organization. It reduces the amount of work, which in turn can reduce the number of stress teams are under. &lt;strong&gt;Design systems&lt;/strong&gt; should be used not only to ensure branding and consistency, but accessibility, inclusivity, and understanding of code better.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/&quot;&gt;Accessible components&lt;/a&gt; help for obvious reasons and reduces the time it takes to implement, rather than start from nothing and try to re-invent something that has already been done. Testing procedures should be implemented so that departments do their jobs well and do them efficiently, especially QA and developers.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Documenting guidelines&lt;/strong&gt; for your organization is as simple as creating a set of accessibility guidelines. You could internally document them in a collaborative software such as Notion or Dynalist; or an online documentation like Google Docs or Dropbox Paper. Somewhere that has a collaborative aspect where people can add to the documentation that the organization has.&lt;/p&gt;
&lt;h3 id=&quot;getting-fellow-colleagues-to-buy-in&quot; tabindex=&quot;-1&quot;&gt;Getting Fellow Colleagues To Buy-In&lt;/h3&gt;
&lt;p&gt;In this landscape of frameworks and libraries, “going fast and breaking things”, and overlooking and undervaluing accessibility, people need to be educated and that also needs to happen at the team level. The people that do not have voices, the “people on the other side of the glass” need &lt;strong&gt;YOU&lt;/strong&gt; to be their voice.&lt;/p&gt;
&lt;p&gt;As a freelancer, setting up meetings or training sessions to onboard organization members that you may be working with can be beneficial to all. Holding a workshop or webinar is also an option to training colleagues to buy-in as well.&lt;/p&gt;
&lt;p&gt;Getting a team onboard because training brings the team together and people &lt;strong&gt;know the importance of accessibility&lt;/strong&gt;, and they want to produce a quality product that people can use regardless of disability.&lt;/p&gt;
&lt;p&gt;Pitching to those who do not or may not know that accessibility means less time spent working on what they work on, less stress and headaches, can sway a developer very fast from my experience.&lt;/p&gt;
&lt;h3 id=&quot;sharing-the-importance-of-the-rules&quot; tabindex=&quot;-1&quot;&gt;Sharing The Importance Of The Rules&lt;/h3&gt;
&lt;p&gt;Whether you live in the EU, the UK, Canada, or the United States, most countries have rules regarding standards for accessibility. Familiarity with those rules and guidelines only ensures compliance on another level.&lt;/p&gt;
&lt;p&gt;Whether it is the &lt;a href=&quot;https://www.dol.gov/general/topic/disability/ada&quot;&gt;ADA (American Disabilities Act)&lt;/a&gt; or &lt;a href=&quot;https://section508.gov/&quot;&gt;Section 508 (Government compliance)&lt;/a&gt; in the U.S., the &lt;a href=&quot;https://laws-lois.justice.gc.ca/eng/acts/A-0.6/page-1.html&quot;&gt;ACT (Accessible Canada Act)&lt;/a&gt; in Canada, or &lt;a href=&quot;https://www.etsi.org/deliver/etsi_EN/301500_301599/301549/02.01.02_60/en_301549v020102p.pdf&quot;&gt;EN 301 549&lt;/a&gt;(PDF) in the EU, sharing the importance of the guidelines can be crucial to getting departments, executives, and the organization as a whole on board.&lt;/p&gt;
&lt;h3 id=&quot;pick-examples-from-the-outside-world-as-use-cases&quot; tabindex=&quot;-1&quot;&gt;Pick Examples From The Outside World As Use Cases&lt;/h3&gt;
&lt;p&gt;Test and record cases where a disabled user is trying to use the product, website, or mobile app. Showing colleagues and executives these tests and use cases will bolster the argument you have for implementing accessibility at your organization.&lt;/p&gt;
&lt;p&gt;From there, you could get a source outside the organization that specializes in accessibility testing with disabled users, such as &lt;a href=&quot;https://www.applause.com/&quot;&gt;Applause&lt;/a&gt;, for instance. The organization and people within may turn around and embrace accessibility at the company and in the workflow.&lt;/p&gt;
&lt;h3 id=&quot;hire-disabled-people&quot; tabindex=&quot;-1&quot;&gt;Hire Disabled People&lt;/h3&gt;
&lt;p&gt;Whether it is internally or on a contract basis with an outside firm like Applause, there are the people with the lived experiences. They can benefit you and your company and team by having them aboard. These folks bring value to you and the organization.&lt;/p&gt;
&lt;p&gt;Get executives and hiring managers on board to bring on people with disabilities to not only help with accessibility, but also teach and advocate for accessibility and inclusivity within the organization.&lt;/p&gt;
&lt;h3 id=&quot;best-practices-for-maintaining-accessibility&quot; tabindex=&quot;-1&quot;&gt;Best Practices For Maintaining Accessibility&lt;/h3&gt;
&lt;p&gt;Accessibility does not end at handoff or when the project is “finished” as is with the web, accessibility is ever-evolving and needs periodic checking when new features are implemented or changes are made to see if accessibility is still be practiced and adhered to.&lt;/p&gt;
&lt;p&gt;Vigilance of the accessibility of the product(s) ensures a standard of accessibility. Automated testing of the product wherever possible that fits the strategy of the departments when it comes time to release new features or changes.&lt;/p&gt;
&lt;p&gt;Any barriers that may arise (and they will) will be addressed and they can be handled in a manner that expedites the process and rolls out fixes for those barriers that take them down and makes the product accessible for those who need it.&lt;/p&gt;
&lt;p&gt;Performing &lt;strong&gt;screen reader analysis&lt;/strong&gt; before every release to ensure that users of screen readers and other assistive technologies can use the website or mobile app.&lt;/p&gt;
&lt;p&gt;Annual audits and user testing is always important whether made internally by a team, or a third-party that specializes in accessibility auditing, especially with user testing by disabled users. What does that audit entail?&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;An executive summary for stakeholders that details the needs of the product so that it can become compliant as well as addressing the current state of affairs as well. A developer report that details every possible path that can be taken through the website, mobile app, and product that addresses concerns and needs that will be encountered along the way.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id=&quot;summary&quot; tabindex=&quot;-1&quot;&gt;Summary&lt;/h3&gt;
&lt;p&gt;Accessibility matters. It matters to those who are getting shut out on a daily basis from some form of digital creation they encounter. Whether it is by design or not, the fact that accessibility is an afterthought in most cases is a critical oversight we all have to correct.&lt;/p&gt;
&lt;p&gt;Accessibility and accessible sites and apps make the web better, they make everyone feel included no matter what situation or disability. &lt;strong&gt;Inclusion and accessibility remove barriers&lt;/strong&gt; for disabled people and accessibility and performance also make the web accessible for those that aren’t equipped with the latest and greatest phones or devices.&lt;/p&gt;
&lt;p&gt;Getting on board with accessibility is something we should all do. Let’s remember the people on the other side of the glass. Accessibility is a right, not a privilege. Let’s make accessibility a priority.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>ConnectTech 2021</title>
		<link href="https://toddl.dev/posts/connecttech-2021/"/>
		<updated>Sun, 14 Nov 2021 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/connecttech-2021/</id>
		<content type="html">&lt;h2 id=&quot;connect.tech&quot; tabindex=&quot;-1&quot;&gt;Connect.Tech&lt;/h2&gt;
&lt;p&gt;So I got a ticket to Connect.Tech in Atlanta and was looking forward to getting out and testing the waters by going to an in-person conference in 2021.&lt;/p&gt;
&lt;p&gt;After the end of 2019, and all of 2020, there were no conferences and the virtual conference/event landscape boomed. Fortunately for most of us in the developer/design communities, we were able to attend a lot of conferences that we wouldn&#39;t have been able to before for whatever reason. Albeit price or venue, we could just flip Zoom on or some other platform and attend from the comfort of our own home.&lt;/p&gt;
&lt;p&gt;Unfortunately, Zoom fatigue exists. At the end of October, I was exhausted. I had just attended TPAC and Clarity Conference. I presented at WebDirections and A11yTOConf. It was a lot. A lot of information, a lot of having to sit in one place for hours. I don&#39;t want to do another virtual event again, following some people I know that don&#39;t want to do another virtual event either.&lt;/p&gt;
&lt;p&gt;Not because of the event, but because of the fatigue.&lt;/p&gt;
&lt;p&gt;Enter Connect.Tech and traveling. It had been since An Event Apart in Denver, in 2019, that I had traveled and attended a conference in-person. I had a little bit of trepidation, but decided to give it a shot and I was glad I did.&lt;/p&gt;
&lt;p&gt;The event was handled responsibly by the organizers, Pritik patel and Vincent Mayers. Meals were good, breakfasts and lunches were okay. Lots of speakers and some workshops on Monday, prior to the event kicking off witht eh talks on Tuesday and Wednesday.&lt;/p&gt;
&lt;p&gt;I got to see a few people from Twitter that I know. Chris DeMars, Homer Gaines, Sia Karamalegos, Kayla Sween, Mark Noonan, Patricio Vargas, and got to meet a ton of other Twitter/online people I knew and people that I have heard fo but not really interacted with. I was talking with Vincent and we talked about the &amp;quot;hallway track&amp;quot;, where I think I get the most out of a conference, chatting with folks in the hallway and where the conference really takes place.&lt;/p&gt;
&lt;p&gt;Then I got asked if I wanted to speak. Now I am at an in-person event, and I had &lt;strong&gt;never&lt;/strong&gt; done an in-person talk before. I said, &amp;quot;Yes.&amp;quot; with no hesitation though. Whether it was spontaneous or not, I had gone all-in. Now I had to do the talk.&lt;/p&gt;
&lt;p&gt;I decided to do the talk on my Smashing Magazine article, &lt;a href=&quot;https://www.smashingmagazine.com/2021/07/strong-case-for-accessibility/&quot;&gt;&amp;quot;Making A Strong Case For Accessibility&amp;quot;&lt;/a&gt; and between working through the conference and attending as many talks as I could, went back to the hotel room and worked on a presentation, adding a few more things towards the end of the talk that I wanted to to give this a test run and stretch the talk out some so that it ran the alloted 50 minutes or so.&lt;/p&gt;
&lt;p&gt;Did not have a huge crowd, but I think that the crowd I had was great and that it was large enough that I could feel as comfortable as I could up on stage.&lt;/p&gt;
&lt;p&gt;Regardless, I think it did well, I know areas I could improve on, and I will be working to iron out the rough edges and hopefully make this a talk I can give in the future.&lt;/p&gt;
&lt;p&gt;I highly recommend going to Conenct.Tech, it is a great event, and I look forward to attending in 2022.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Give Us Some Space!</title>
		<link href="https://toddl.dev/posts/give-us-some-space/"/>
		<updated>Fri, 25 Mar 2022 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/give-us-some-space/</id>
		<content type="html">&lt;h2 id=&quot;there&#39;s-a-better-way&quot; tabindex=&quot;-1&quot;&gt;There&#39;s A Better Way&lt;/h2&gt;
&lt;p&gt;There is nothing more that I like than going to ao conference and speaking. Even more so, when my speaker family is there and giving a talk, I love to attend and show my support.&lt;/p&gt;
&lt;p&gt;To be there in the audience and hopefully be a show of strength and a cheering section. Because there is nothing I&#39;d rather do than to see them knock it out of the park and give the greatest conference talk ever recorded in the annals of human history!&lt;/p&gt;
&lt;p&gt;But most of the time, it isn&#39;t that easy or it just does not happen. There&#39;s a better way to do this organizers!&lt;/p&gt;
&lt;h2 id=&quot;a-better-way-to-do-what%3F!&quot; tabindex=&quot;-1&quot;&gt;A Better Way To Do What?!&lt;/h2&gt;
&lt;p&gt;Scheduling. Most of the time, my accessibility colleagues and I are discussing why our talks are overlapping. Stop doing it! Also, stop scheduling us at the end of the conference! You know? Late in the day, second-to-last or last talk of the day when everyone is tired and wants to get the hell out of there. Stop it!&lt;/p&gt;
&lt;p&gt;Spread us out evenly throughout your event. Let us have our talks and then the rest of the time to support our colleagues! A morning accessibility talk, one before lunch, one after lunch but when everyone isn&#39;t in a food coma. Or a very hard-hitting talk that you can schedule last. What about a keynote?!&lt;/p&gt;
&lt;h2 id=&quot;stop-saying-you-have-a-diverse-range-of-topics&quot; tabindex=&quot;-1&quot;&gt;Stop Saying You Have A Diverse Range Of Topics&lt;/h2&gt;
&lt;p&gt;If you&#39;re going to pass up accessibility talks, and other talks that you turn down because it &amp;quot;might not fit in&amp;quot; or &amp;quot;it doesn&#39;t match what the conference is about&amp;quot;. Then stop saying you have a diversified field of topics. Accessibility is one of those topics that should be discussed about every day and there should be at least two talks at your conference that deals with accessibility.&lt;/p&gt;
&lt;h2 id=&quot;some-suggestions&quot; tabindex=&quot;-1&quot;&gt;Some Suggestions&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;Space out the accessibility talks in your multi-track event. Please don&#39;t stack us against each other. We want to educate as much of the masses as possible.&lt;/li&gt;
&lt;li&gt;If you tout a diverse field of topics at your event, have at least 4 accessibility talks. 2-3 if you have a smaller event.&lt;/li&gt;
&lt;li&gt;If your events has a common theme to it (React, Vue, DataViz, etc.) then look for us. We are out there! We would love to talk at your event!&lt;/li&gt;
&lt;li&gt;Look for the topics that may or may not be covered with your event and find a way to get those talks in your event. Widen your horizons, if you can. (please do!).&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id=&quot;summary&quot; tabindex=&quot;-1&quot;&gt;Summary&lt;/h2&gt;
&lt;p&gt;Event organizers, please give us some space with your scheduling. I know it is a difficult job, to schedule all these talks in a very limited time frame but I know you can do it. Especially the accessibility practitioners and professionals. You probably have your fifteen React talks, your DevOps talks, your multiple speakers with multiple talks on going off the grid or automating your office to make your coffee before you get to your computer in the morning.&lt;/p&gt;
&lt;p&gt;Let us be spaced out so everyone that is interested can enjoy &lt;strong&gt;all&lt;/strong&gt; of the accessibility talks, or all the talks that you stack on each other. Also, if you could, let&#39;s get some more women speakers, more underrepresented speakers, more trans, LGBTQ+ speakers please! Even if it means I am going to be cast to the wayside. I&#39;m willing to take the hit for those groups of people.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>It Has Been A Minute</title>
		<link href="https://toddl.dev/posts/it-has-been-a-minute/"/>
		<updated>Fri, 07 Oct 2022 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/it-has-been-a-minute/</id>
		<content type="html">&lt;h3 id=&quot;it-has-been-a-hot-minute&quot; tabindex=&quot;-1&quot;&gt;It Has Been A Hot Minute&lt;/h3&gt;
&lt;p&gt;After a lot of travel speaking at conferences and getting myself out there and advocating for the accessibility community, I finally got to clearning my schedule in between moving to a new home and all the work I have been doing in the W3C and at work to write something.&lt;/p&gt;
&lt;p&gt;I&#39;ll be writing more. This is just something to add to the site until I can sit down and complete the three or four articles drafts I have sitting in my repo that are prime for the publishing.&lt;/p&gt;
&lt;p&gt;I have decided though to shift left and try my hand at Developer Adovcate. My DevRel friends have told me I am halfway to becoming a full DevRel, so I figured, &amp;quot;why not?!&amp;quot; I cna do it, I have been doing it to some extent. I just haven&#39;t been dealing with developers and being a brand ambassador. Something I can do if I can get a company to give me a chance to do so. I think I could do it and it is the next step in my career I believe.&lt;/p&gt;
&lt;p&gt;Other than that, I am going to continue my W3C work, but at the beginning of 2023, it will be at a much lesser capacity. I am glad I got to work on WCAG 2.2 as little as I did and sit in and learn from all the great folks I have been a member of groups and subgroups with and I look forward to the work on WCAG 3, but I have to get my spoons back.&lt;/p&gt;
&lt;p&gt;I think DevRel will be an exciting change and a chance to get back into coding and something I have been missing for the past two years now. Front and backend development work. Now just to enjoy my upcoming two week vacation next week, then get back to pecking at the keyboard and up-to-speed on a bunch of exciting stuff.&lt;/p&gt;
&lt;p&gt;Until next time, that is all.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Conferences and Alcohol</title>
		<link href="https://toddl.dev/posts/conferences-and-alcohol/"/>
		<updated>Wed, 19 Oct 2022 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/conferences-and-alcohol/</id>
		<content type="html">&lt;h3 id=&quot;hello%2C-i&#39;m-todd&quot; tabindex=&quot;-1&quot;&gt;Hello, I&#39;m Todd&lt;/h3&gt;
&lt;p&gt;and I am a recovering alcoholic.&lt;/p&gt;
&lt;p&gt;I have been sober for over nine years. During that time, I have wanted to crawl out of my skin, wanted to drink, been in places I have no right to be in, tested my limits, and much, much more. So why am I telling you all this, person who is reading this?&lt;/p&gt;
&lt;p&gt;I&#39;ve been putting myself out there in the public eye for over a year now. Close to two years. I needed things to do to keep me busy during the pandemic. Which is still going on, if we haven&#39;t noticed. I can tell you that it is the toughest thing I have ever had to do. Getting sober. Staying sober. It has gotten easier over the last couple of years. I have put in a lot of work doing it, but lately, I have been slipping back into old habits.&lt;/p&gt;
&lt;p&gt;By &amp;quot;lately&amp;quot; I mean, the past year. I was (and to some people still am) a horrible person. The worst of the worst short of doing time in a prison or jail or committing any heinous crimes or doing anything that would be considered &amp;quot;evil&amp;quot; (again, some may protest that).&lt;/p&gt;
&lt;p&gt;When I go to conferences, I see the culture of alcohol. Something I have lost the right to partake in. I have no right being in a pub or tavern. No right being in a bar or saloon. I have no right being in a place where I have booze flowing freely around me. I cannot put myself in these places. This puts me in a group of few or even by myself sometimes.&lt;/p&gt;
&lt;p&gt;It&#39;s a lonely place when you go off to a dinner by yourself while everyone is at an after party. I don&#39;t mind, but it does affect me. I don&#39;t want to push my agenda (sobriety) on anyone. Religion does that, and I&#39;m not a religious man. I don&#39;t ask conferences to make it a booze-free event. I don&#39;t wish to dictate that to any one or event. That&#39;s not my place. I have the choice to leave.&lt;/p&gt;
&lt;h3 id=&quot;what-is-this-all-about&quot; tabindex=&quot;-1&quot;&gt;What is this all about&lt;/h3&gt;
&lt;p&gt;I wish events would have something alcohol-free. I have spoken to a few organizers, they have been very gracious and open to discussing that. I have been to a couple conferences where they had an option for me, which I appreciate. I have been approached by a couple organizers who wanted to discuss how they could help me enjoy the event without the booze. Something I am grateful for and very thankful for.&lt;/p&gt;
&lt;p&gt;I want a bottled water, but I don&#39;t have a ticket. The bartender says I need a ticket. For a water. That&#39;s not inclusive or accessible. I&#39;m not asking for a free water, I&#39;ll gladly pay you for it and tip you a couple bucks. But if I need a ticket for a water, that&#39;s pretty lousy in the rules department.&lt;/p&gt;
&lt;h3 id=&quot;i-really-want-to-speak-at-your-event&quot; tabindex=&quot;-1&quot;&gt;I really want to speak at your event&lt;/h3&gt;
&lt;p&gt;I do my accessibility talks and plan to keep doing more, but I want to do events I normally wouldn&#39;t. Two in particular that I just cannot attend because of the frat party environment. Sure, I could just avoid it all like the plague, but what fun is that? I don&#39;t get to mingle and chat with my peers, I don&#39;t get to enjoy a night out and have fun with said people.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&amp;quot;Well, you could always go somewhere else or go back to your room.&amp;quot;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Why?&lt;/p&gt;
&lt;p&gt;I could go back to my room and be miserable or go off somewhere else. I have actually tweeted out that I am doing booze-free activities or dinners and I have gotten to meet the greatest people and been able to have a great time at the events that have a focus on alcohol after the conference day. I&#39;m grateful to those that have gone out of their way and joined me, I am grateful for the support fo my friends that have foregone the drink to enjoy a lunch or dinner with me. More than they know.&lt;/p&gt;
&lt;p&gt;I think I met one or two folks that are in the same boat as me and are recovering alcoholics. It&#39;s time we started to ask these organizers and these events for an alcohol-free alternative. If they have one, great! If they do not, then we can make one. That&#39;s the easy part.&lt;/p&gt;
&lt;p&gt;The hardest part is though, the wanting to be heard and to fit in and feel valued. I want to feel like I&#39;m wanted at an event and that not everyone drinks until they&#39;re falling over drunk. Those days have passed me by. Those days of me going far beyond my limits and creating a shit show of colossal proportions are long gone (thankfully, so far).&lt;/p&gt;
&lt;p&gt;Conference organizers. Please… just remember not everyone drinks. Please provide an inclusive and accessible alternative at your conferences to have alcohol-free events.&lt;/p&gt;
&lt;p&gt;To those of you who have joined me at booze-free lunches and dinners and shown your support, thank you. I &lt;em&gt;really&lt;/em&gt; am grateful for you.&lt;/p&gt;
&lt;p&gt;To you, reader. Thanks for reading.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Bias and Overlooking People</title>
		<link href="https://toddl.dev/posts/bias-and-overlooking-people/"/>
		<updated>Thu, 03 Nov 2022 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/bias-and-overlooking-people/</id>
		<content type="html">&lt;h2 id=&quot;a-lot-of-thinking-was-done-today&quot; tabindex=&quot;-1&quot;&gt;A Lot of Thinking Was Done Today&lt;/h2&gt;
&lt;p&gt;I was thinking today about hiring practices that use software to weed out applicants based on a word or term, an event that holds its kick-off at a bar or pub, someone choosing someone else because of an acronym after their name, or some event or decision that excludes someone based on bias.&lt;/p&gt;
&lt;p&gt;At some point, some great person, some great applicant, some possible positive addition to a team, or some eloquent speaker is overlooked because of a bias. It is exclusionary, no matter how I looked at it.&lt;/p&gt;
&lt;p&gt;The people that aren&#39;t given a chance are the ones that could possibly bring value somewhere. Am I at an event and not talking to someone because they choose not to be at a social mixer at a bar or pub? Is your organization missing out on top-tier talent because of software? Is your event missing out on a speaker that could be giving an excellent talk?&lt;/p&gt;
&lt;h2 id=&quot;why-do-we-insist-on-staying-the-course%3F&quot; tabindex=&quot;-1&quot;&gt;Why Do We Insist On Staying the Course?&lt;/h2&gt;
&lt;p&gt;The exclusion was what was on my mind and the bias that keeps people from obtaining a position or a chance to do something they may want to do. Or it may be keeping someone from networking with others in their field because they cannot be in a setting they are uncomfortable in.&lt;/p&gt;
&lt;p&gt;My opportunities this year have been many and that comes from a place of privilege. That I cannot deny and need to acknowledge. I have seen people that were passed up for many opportunities that deserve the chance, mainly in the employment area. I have seen people that were passed up for talks.&lt;/p&gt;
&lt;p&gt;I see a lot of people doing two, three, or four talks at a conference. I see too many events at the bar or pub or nightclub when a small group would feel safer and more included at a bowling alley or some other place free of the alcohol factor. I see people passed up for a job and ghosted, or not even given a chance to speak to a human because of software.&lt;/p&gt;
&lt;h2 id=&quot;what-does-paper-have-to-do-with-it%3F&quot; tabindex=&quot;-1&quot;&gt;What Does Paper Have to Do with It?&lt;/h2&gt;
&lt;p&gt;People passed up because certifications look better to clients or employers. A piece of paper does not make a person. I say this a lot. It is time to exorcise the perception that the more pieces of paper a person has, the more qualified a person is. Acronyms do not make a person look good, but is it a gauge of the person. You could have many acronyms next to your name, but you might be difficult to work with or work for.&lt;/p&gt;
&lt;h2 id=&quot;let&#39;s-change-the-course&quot; tabindex=&quot;-1&quot;&gt;Let&#39;s Change the Course&lt;/h2&gt;
&lt;p&gt;It&#39;s time to tilt the bias of tech. Without going into an in-depth definition and explanation, tech is political. Business is political. Many good people and great minds are excluded because of bias. Intentional or not, that bias needs to be erased.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>An Open Challenge</title>
		<link href="https://toddl.dev/posts/an-open-challenge/"/>
		<updated>Thu, 10 Nov 2022 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/an-open-challenge/</id>
		<content type="html">&lt;h3 id=&quot;to-tech-event-organizers&quot; tabindex=&quot;-1&quot;&gt;To Tech Event Organizers&lt;/h3&gt;
&lt;p&gt;I have an open challenge to you if your event(s) are very heavily focused on alcohol.&lt;/p&gt;
&lt;p&gt;Leave it for after the day ends.&lt;/p&gt;
&lt;p&gt;Why does there have to be an element of booze at your event? Why can&#39;t the event be alcohol-free for the day? Then after that, you can go get your drink on.&lt;/p&gt;
&lt;p&gt;Why do events have to have an element of alcohol in them?&lt;/p&gt;
&lt;p&gt;Booths with code and beer, bottles of booze, I just don&#39;t understand. I&#39;m not saying you need to or have to abstain and getting up on a pulpit to preach a alcohol-free gospel.&lt;/p&gt;
&lt;h3 id=&quot;why%3F&quot; tabindex=&quot;-1&quot;&gt;Why?&lt;/h3&gt;
&lt;p&gt;Why do I challenge you? Simple. Can you keep the event alcohol-free for people who may have faith and cultural beliefs and do not partake? Recovering alcoholics that are not as open about it as I am?&lt;/p&gt;
&lt;p&gt;What about people who just get tired of seeing people act like complete asses in a public venue when they are liquored up way past their point of handling booze?&lt;/p&gt;
&lt;p&gt;Do you have problems that &lt;strong&gt;YOU&lt;/strong&gt; need alcohol becaue you are dependent on it? Look inward and ask yourselves are you partaking too much? Of course you&#39;ll say no, but if you&#39;re feeling like shit the day after or even days later or even a week later when you&#39;re not in the environment, you may want to talk to someone.&lt;/p&gt;
&lt;p&gt;I want organizers to read this part &lt;em&gt;very&lt;/em&gt; closely.&lt;/p&gt;
&lt;p&gt;What if someone attending your event is struggling to stay away from the alcohol? Is the after party worth it when it could jeopardize someone&#39;s mental health, sobriety, physical health, or more? Is the party crowd and the drinking culture really worth it?&lt;/p&gt;
&lt;p&gt;Will it take someone getting taken to a hospital or worse to get organizers to wake the fuck up? &lt;strong&gt;THINK&lt;/strong&gt; about that. Has it happened? I don&#39;t know. i haven&#39;t heard of any such situation at an event, but it doesn&#39;t mean it &lt;em&gt;can&#39;t&lt;/em&gt; happen. Because it can.&lt;/p&gt;
&lt;h3 id=&quot;sit-down-and-shut-up!&quot; tabindex=&quot;-1&quot;&gt;Sit Down and Shut Up!&lt;/h3&gt;
&lt;blockquote&gt;
&lt;p&gt;Go have your foofy mocktail and shut up, Buzz Killington!&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Is that what you&#39;re thinking dear reader? Or maybe you&#39;re agreeing? If you&#39;re agreeing, what reasons do you have? Do you let organizers know?&lt;/p&gt;
&lt;p&gt;I was at a place last night (as of this writing) that had all sorts of fancy bottles, different shapes, different colors that sparkled in the night club air... it looks glamorous, I know.&lt;/p&gt;
&lt;p&gt;I can walk away. I have the tools to help me get out of a situation I feel uncomfortable in. There may be someone who doesn&#39;t posess those tools and doesn&#39;t know what to do. Then what? They might feel excluded. They may feel uncomfortable. You may have lost someone who doesn&#39;t want to attend your event anymore.&lt;/p&gt;
&lt;h3 id=&quot;does-it-matter%3F&quot; tabindex=&quot;-1&quot;&gt;Does It Matter?&lt;/h3&gt;
&lt;p&gt;Sure it does! Do you really want to make anyone that attends your event feel excluded or unwanted or uncomfortable? I don&#39;t think any organizaer does. Or at least most organizers.&lt;/p&gt;
&lt;p&gt;The attendees make your event because without them, without ticket sales, you have nothing.&lt;/p&gt;
&lt;p&gt;Sponsors drive the event. Attendees &lt;strong&gt;make&lt;/strong&gt; the event. So why do you want to exclude a certain percentage of your attendee population? You don&#39;t.&lt;/p&gt;
&lt;p&gt;So I challenge you to keep the booze out. Save it for after. Give the attendees an option or, like I, we will do it ourselves. We shouldn&#39;t have to, but we will.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Modern Frontends</title>
		<link href="https://toddl.dev/posts/modern-frontends/"/>
		<updated>Sat, 19 Nov 2022 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/modern-frontends/</id>
		<content type="html">&lt;h2 id=&quot;no-filter&quot; tabindex=&quot;-1&quot;&gt;No Filter&lt;/h2&gt;
&lt;p&gt;That&#39;s gone out the window with the word that the organizer contacted a CEO to try and have someone in trouble for posting a blog post about their experience.&lt;/p&gt;
&lt;h2 id=&quot;little-things&quot; tabindex=&quot;-1&quot;&gt;Little Things&lt;/h2&gt;
&lt;p&gt;My photo of me eating a lobster roll hasn&#39;t bothered anyone from any conference. Until MFL. I was asked to provide a different one. Why? Wait, I won&#39;t &amp;quot;pile on&amp;quot;.&lt;/p&gt;
&lt;p&gt;&amp;quot;Can you handle your own room and travel?&amp;quot; Sure. I&#39;m privileged I can do that. The room and travel fiasco is just that.&lt;/p&gt;
&lt;p&gt;I too was DM&#39;ed. Now in my haste to get off the bird app because the new owner decided to let an old account back on, I did not get the screen shots of the DMs, &lt;a href=&quot;https://www.cassie.codes/posts/modern-frontends/&quot;&gt;but they are similar to Cassie Evans&#39; DMs&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&amp;quot;Don&#39;t pile on&amp;quot;, &amp;quot;You&#39;re adding pressure&amp;quot;, something something team member blah blah excuses, excuses. Were there &lt;em&gt;any&lt;/em&gt; team members?&lt;/p&gt;
&lt;h2 id=&quot;what-i-saw&quot; tabindex=&quot;-1&quot;&gt;What I Saw&lt;/h2&gt;
&lt;p&gt;A speaker dinner on a huge yacht? Talk about allocating money into the wrong thing and for the food we ate, as a former executive head chef, it was shit. This was a buttering up of speakers I&#39;ve not seen before. Epic overkill.&lt;/p&gt;
&lt;p&gt;After getting into the &lt;strong&gt;elevator&lt;/strong&gt; and going up to the third level, you entered a scene reminiscent of the movie, &amp;quot;Titanic&amp;quot; when you saw the staircase. This staircase was gold, not wood.&lt;/p&gt;
&lt;p&gt;Hype all the &amp;quot;big names&amp;quot; on social media. The new speakers, the people having not spoken long got shafted. We all know the marquee names were going to be there. We didn&#39;t need to see it a week straight (embellishment there but not far from the truth) on LinkedIn, Twitter, and elsewhere.&lt;/p&gt;
&lt;p&gt;I see a woman politicking and schmoozing in the speaker lounge and not caring to her speakers needs, her attendees, or having &lt;strong&gt;ANY&lt;/strong&gt; video equipment available for livestream or for recording like they promised. Lies on top of more lies.&lt;/p&gt;
&lt;p&gt;It looked more like a social cotillion rather than a organizer running around tending to a conference they had put on. Any other conference I have been to I see loads of staff, I see the organizer(s) working hard to keep everyone happy. Not lounging around and yucking it up in the speaker lounge for a good 75-85% of the two days of talks.&lt;/p&gt;
&lt;h2 id=&quot;more-lies-and-failures&quot; tabindex=&quot;-1&quot;&gt;More Lies and Failures&lt;/h2&gt;
&lt;p&gt;This was not the venue.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1668912966/images/venue.webp&quot; alt=&quot;A large venue with thousands of attendees and speakers on the stage like they were speaking to a very large audience on a fancy stage.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;This was not the truth.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1668913191/images/numbers.png&quot; alt=&quot;A list of statistics to a conference that did not have the numbers they were indicating.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;There were less workshops, less speakers, no video or livestreaming, and there wasn&#39;t even 300 people there. This was oversold, overhyped, overdone, and underwhelming.&lt;/p&gt;
&lt;p&gt;I sat in the speaker lounge and watched a speaker ask some pretty valid questions and get absolutely ran through by the organizer with attitude, with such toxicity. Attitude like that towards a well-known, well-respected, and international speaker gets you on my bad side.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1668913351/images/code_conduct.png&quot; alt=&quot;If you are being harassed, notice that someone else is being harassed, or have any other concerns, please contact a member of conference staff immediately. Conference staff can be identified as they&#39;ll be wearing branded clothing or badges.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;I did not see branded clothing, badges for staff, or &lt;strong&gt;any&lt;/strong&gt; staff. And &lt;em&gt;who&lt;/em&gt; exactly was I supposed to report anything to?!&lt;/p&gt;
&lt;h2 id=&quot;i-have-words&quot; tabindex=&quot;-1&quot;&gt;I Have Words&lt;/h2&gt;
&lt;p&gt;You want to fund your extravagant lifestyle, work for it. Don&#39;t skim off the top of the pot and take from attendees, speakers, and sponsors. You&#39;re nothing special and you&#39;re certainly not running a great show (or shows for that matter). Get a steady paycheck then spend your money on the lifestyle you want to live.&lt;/p&gt;
&lt;p&gt;You cheated people out of a great experience.&lt;/p&gt;
&lt;h2 id=&quot;my-talk&quot; tabindex=&quot;-1&quot;&gt;My Talk&lt;/h2&gt;
&lt;p&gt;I had &lt;strong&gt;ZERO&lt;/strong&gt; people at my talk at 17:30pm (5:30pm) &lt;strong&gt;ON A FRIDAY NIGHT!&lt;/strong&gt; What kind of a screw-up do you have to be to schedule a talk on the last night of a conference and at &lt;em&gt;five thirty&lt;/em&gt;?! A colossal one, that&#39;s what.&lt;/p&gt;
&lt;p&gt;Barely anyone there, folks had gone home or back to the hotel or out to dinner. Thanks to Mike Hartington for getting some people in the room. I would have been crushed, and even though I was thrown off, I did the talk and got good feedback.&lt;/p&gt;
&lt;p&gt;Granted, I did have some people filter in at the very last second before I was going to shut it down. Whether they came because they wanted to or because they were ushered to, I don&#39;t know. I am grateful to those who did attend.&lt;/p&gt;
&lt;p&gt;I was not there for a week long holiday. I was there to give a talk.&lt;/p&gt;
&lt;p&gt;Five talks at the end, no final keynote to bring the crowd back together before leaving and closing the conference. Nothing. What a cluster of exceptional proportions.&lt;/p&gt;
&lt;h2 id=&quot;summary&quot; tabindex=&quot;-1&quot;&gt;Summary&lt;/h2&gt;
&lt;p&gt;I feel bad for those who attended and did not get the best experience. I feel bad for those that had video issues and couldn&#39;t catch a promised livestream. I feel bad for sponsors that shelled out major dollars or pounds just to pay for whatever the money went to.&lt;/p&gt;
&lt;p&gt;I feel bad for speakers that didn&#39;t have the audiences they should have and were promised.&lt;/p&gt;
&lt;p&gt;It was a cavalcade of &lt;a href=&quot;https://hidde.blog/modern-frontends-live/&quot;&gt;lies and deceit as explained by Hidde&lt;/a&gt;, and just plain bitchy behavior. Bitchy that was &lt;a href=&quot;https://dev.to/thisisjofrank/my-experience-of-modern-frontends-conference-1cgg&quot;&gt;documented in Jo Franchetti&#39;s blog post&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Get out of the racket of conning people and sponsors. The gig is up. The speaker community is on to you.&lt;/p&gt;
&lt;hr /&gt;
&lt;p&gt;If you have any experience you want to share, please reach out and let me know.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://dev.to/thisisjofrank/my-experience-of-modern-frontends-conference-1cgg&quot;&gt;Jo&#39;s Blog&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://www.cassie.codes/posts/modern-frontends/&quot;&gt;Cassie&#39;s Blog&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://hidde.blog/modern-frontends-live/&quot;&gt;Hidde&#39;s Blog&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://mhartington.io/post/modern-frontends-live/&quot;&gt;Mike&#39;s Blog&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://jdhillen.com/blog/my-experience-at-modern-frontends-live&quot;&gt;JD&#39;s Blog&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://dev.to/niamhmccoo/my-experience-at-modern-frontends-live-1lcn&quot;&gt;Niamh&#39;s Blog&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://kentcdodds.com/blog/my-modern-frontends-live-experience&quot;&gt;Kent&#39;s Blog&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://twitter.com/pattyneta/status/1595495394557022208&quot;&gt;Patty&#39;s Tweet Thread&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://dylanbeattie.net/2022/11/22/modern-frontends-2022.html&quot;&gt;Dylan&#39;s Blog&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://christopherallanperry.github.io/blog/2022/11/20/modern_frontends-an_attendees_perspective.html&quot;&gt;Chris&#39;s Blog&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://nielsleenheer.com/articles/2022/red-flag-speakers-having-to-cover-their-own-travel/&quot;&gt;Niels&#39;s Blog&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://youtu.be/CHJrO8TvNjI&quot;&gt;James&#39;s Video&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</content>
	</entry>
	
	<entry>
		<title>Two Weeks</title>
		<link href="https://toddl.dev/posts/two-weeks/"/>
		<updated>Tue, 22 Nov 2022 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/two-weeks/</id>
		<content type="html">&lt;h2 id=&quot;firstly&quot; tabindex=&quot;-1&quot;&gt;Firstly&lt;/h2&gt;
&lt;p&gt;With all the criticism out and people voicing their experiences with &lt;a href=&quot;https://toddl.dev/posts/modern-frontends.md&quot;&gt;last week&#39;s fiasco in London&lt;/a&gt; it is time for me to pivot and write about the many positive experiences that occurred over the last two weeks.&lt;/p&gt;
&lt;h2 id=&quot;atlanta-%26-connect.tech&quot; tabindex=&quot;-1&quot;&gt;Atlanta &amp;amp; Connect.tech&lt;/h2&gt;
&lt;p&gt;I arrive at conferences early just to decompress from the travel and everything to do with the travel process so I usually spend day alone and try to sleep. I always get this feeling of anticipation to see everyone at Connect.tech(CT) like a kid on Christmas Eve.&lt;/p&gt;
&lt;p&gt;The usual suspects are always there and it is always good to see them all. I get to meet new people every year and the amount of friends keeps growing with each year I attend/speak. Pratik and Vincent, the organizers, not only do I enjoy seeing them and talking with them, they put on a show.&lt;/p&gt;
&lt;p&gt;It is a beautifully choreographed masterclass in how to hold, run, and work an event from a organizers perpsective. From an attendee/speaker perspective? They know how to treat their people. Speakers get swag and a speaker dinner, after-parties, events inbetween and even after the day of speaking is over! They treat their sponsors like gold. I never see a sad face, a mad face, or an unhappy face from a sponsor.&lt;/p&gt;
&lt;p&gt;Giveaways after the final keynote and just plain fucking fun. I can&#39;t say enough about Pratik and Vincent. They work hard, they know how to run an event.&lt;/p&gt;
&lt;p&gt;I have had the fortunate opportunity to speak at CT the past two years about accessibility and this year, the work I am doing in the W3C. These two actually gave me my first live speaking opportunity at CT &#39;21! I can never express my gratitude to them and for giving a 50-year-old guy a platform to share my experience and work.&lt;/p&gt;
&lt;p&gt;CT is always a great week to catch up with my family. Jeremy, DeMars, Nerando, Homer (Hank), Mike, JD, Val, Cecelia, and scores of other wonderful people. It&#39;s become a family for me, a family that every time I think about it (like now, writing this) I tear up a bit because they support me in my quest to stay sober.&lt;/p&gt;
&lt;p&gt;I cannot express how much that means to me. When I&#39;m doing great and in a good headspace or when I am not in a good headspace and thoughts creep in, someone is asking me how I am doing and checking in. &lt;strong&gt;That&lt;/strong&gt; means the world to me. These people I&#39;d jump in front of a moving bus for.&lt;/p&gt;
&lt;p&gt;New friends, many new friends and hopefully to see them again. Always finding a commonality when talking. I can never get enough of the friends made at CT.&lt;/p&gt;
&lt;hr /&gt;
&lt;h2 id=&quot;london&quot; tabindex=&quot;-1&quot;&gt;London&lt;/h2&gt;
&lt;p&gt;this was my first international trip in over thirty years. Everything, naturally has changed a lot. Lots of construction but it all seemed so brand new which was part of the excitement of getting back over to England and seeing the city.&lt;/p&gt;
&lt;p&gt;I arrived very early. Flew from Atlanta, and got in on Saturday. No one was there for the first couple days and Monday was my day I wanted to head down to Brighton.&lt;/p&gt;
&lt;p&gt;I went down with Austin Gil and we met up with Cassie Evans and had a good walkabout Brighton, had lunch at a nice little place along the seaside, and chatted for awhile. Cassie is an absolute delight and showed us around Brighton, we walked around The Lanes and all the interesting shops and places in the area. It was very cool and a terrific experience led by a terrific tour guide.&lt;/p&gt;
&lt;p&gt;It was a wonderful time, I enjoyed the banter and the lunch (fish and chips) and Cassie went off to do some work so Austin and I went to of all places, an American diner. Ironic, but they had wifi I could connect to. I needed a lemonade (I can safely say I love the fizzy lemoande they serve over there).&lt;/p&gt;
&lt;p&gt;At the diner (and they did a spot-on job with the American diner vibe) had a little snack and sat and I had a meeting I had to hop in on. A couple of folks from the Boagworld Slack, Tristan and Paul, came over to meet up and see me.&lt;/p&gt;
&lt;p&gt;Austin left to go back to his hotel so I sat a bit and the three of us talked for a bit, then had another walkabout Brighton. It was great to meet up with some of the BW folks. I was a bit sad I didn&#39;t get to meet up with others, but some day there will be another visit.&lt;/p&gt;
&lt;h2 id=&quot;more-fun&quot; tabindex=&quot;-1&quot;&gt;More Fun&lt;/h2&gt;
&lt;p&gt;As soon as everyone started to filter into the area, we met up and we went out to eat, and as always, had fin, great chats, and fun like we always do. Although I have only known most of these people for a couple or three years, it feels like I have known them for a lifetime.&lt;/p&gt;
&lt;p&gt;I never before in my life since I was in my twenties, had never had that feeling of friendship and family. It&#39;s been a long time, it&#39;s still a little new to me, but these folks are special people, good people. I think DeMars is the one I&#39;ve known the longest and that is around 2019. Damn... someone is cutting up onions in this motherfucker.&lt;/p&gt;
&lt;p&gt;Again, I meet up with new people at the speaker dinner and in the speaker lounge during the event. Scott, Daniel, Mark &amp;quot;The Mayor&amp;quot;, Hidde, Liran, and a score of others. New friends are always welcome to the people I call &amp;quot;the speaker family&amp;quot;. That family is on display as we form in solidarity after the event and we had to voice our opinions.&lt;/p&gt;
&lt;h2 id=&quot;clutch&quot; tabindex=&quot;-1&quot;&gt;Clutch&lt;/h2&gt;
&lt;p&gt;JD and I have come to the conclusion that we should have skipped the speaker dinner and go see Clutch in Brighton. I kick myself a little still. I&#39;ll see the band again live soon. Phoenix does not have a venue where I can sit and enjoy the show though. Or at least they haaven&#39;t played at a venue that is very accessible.&lt;/p&gt;
&lt;h2 id=&quot;london-proper&quot; tabindex=&quot;-1&quot;&gt;London Proper&lt;/h2&gt;
&lt;p&gt;After walking around the city, after going by places I haven&#39;t seen in over thirty years it brought back a little bit of memories. If you know me, or are a guy like me that has a thirty year span of very hazy memories due to excessive and problematic drinking? Then you&#39;ll know that I had to soak it all in with pictures and memories.&lt;/p&gt;
&lt;p&gt;It was a lot of cognitive overload, but getting back to the hotel to process allowed me to handle it all.&lt;/p&gt;
&lt;p&gt;From walking to Buckingham Palace to riding the Tube and Overground, to gazing up at Big Ben, I soaked in as much as I could because I don&#39;t know when I&#39;ll be back, but, I hope to be back soon. I loved London. The people were so nice, welcoming, and wonderful wonderful people both in London and in Brighton made this enjoyable.&lt;/p&gt;
&lt;h2 id=&quot;wrapping-it-up&quot; tabindex=&quot;-1&quot;&gt;Wrapping It Up&lt;/h2&gt;
&lt;p&gt;I&#39;ve been stewing in the problems that the speaker family has been talking about for the last week and I decided it was time to write the positive. Because there was so much more.&lt;/p&gt;
&lt;p&gt;We were there with our friends, our speaker family, our new friends. That&#39;s something that always gets a little lost with me after experiencing something bad. Something I have to remember, not to let dictate the time spent in the positive.&lt;/p&gt;
&lt;p&gt;The people I met that I am connected with, if you are reading this and we didn&#39;t get a chance to chat a lot, just know that I cannot wait to see you at another event hopefully and that I hope we chat soon again. I had a blast, regardless of the negative, and just had to write about the positive.&lt;/p&gt;
&lt;p&gt;I hope you got some positive out of this post, our meeting if we met up, and hope you&#39;ll share your positive experience at both or either event as well. If so please let me know so I can link it up and let&#39;s start a chain of positive blog posts!&lt;/p&gt;
&lt;p&gt;Thanks for reading.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Writing and Feelings</title>
		<link href="https://toddl.dev/posts/writing-and-feelings/"/>
		<updated>Wed, 23 Nov 2022 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/writing-and-feelings/</id>
		<content type="html">&lt;h2 id=&quot;a-little-backstory&quot; tabindex=&quot;-1&quot;&gt;A Little Backstory&lt;/h2&gt;
&lt;p&gt;For those who read this and do not know, I am a recovering alcoholic. For years, I stuffed feelings deep down inside me, never wanting to feel them or face them. It is bad enough being a male and brought up to not cry or not feel or not show feelings, &amp;quot;be tough&amp;quot; or &amp;quot;toughen up&amp;quot;. You learn to be real good at stuffing any feelings deep down in you.&lt;/p&gt;
&lt;p&gt;Sobriety has taught me that I will feel feelings. That said, my recovery is a whole different ballgame than others. I &lt;em&gt;want&lt;/em&gt; to feel things so that I don&#39;t have those feelings surprise me all of a sudden and I &lt;em&gt;have&lt;/em&gt; to feel those feelings in order to comprehend what they are when they arise.&lt;/p&gt;
&lt;p&gt;So when I get into something, such as this fiasco called Modern Frontends, I am going to draw from what I feel and put it down digitally. So you get me in the rawest of forms. This is why many people don&#39;t like me. Well, it doesn&#39;t matter what people think of me, it&#39;s none of my business.&lt;/p&gt;
&lt;h2 id=&quot;why-am-i-writing-this%3F&quot; tabindex=&quot;-1&quot;&gt;Why Am I Writing This?&lt;/h2&gt;
&lt;p&gt;When I have something to write, I need to get it out. I need to have the people that already know me, know me a little better. Anyone that doesn&#39;t know me, they can get to know me. Anyone that doesn&#39;t care for me, I know I&#39;m not everyone&#39;s cup of tea because I &amp;quot;curse&amp;quot;.&lt;/p&gt;
&lt;p&gt;&amp;quot;Cursing&amp;quot; is just words. Words that someone (more than likely some goon from a church) was so offended by, it lit up their robes when they were walking around barefoot and clutching their pearls. It&#39;s just words, and just because you&#39;re offended doesn&#39;t mean you&#39;re right.&lt;/p&gt;
&lt;p&gt;So I am writing this for me. First and foremost. For my friends, secondly. For others, should they choose to read. It&#39;s my version of therapy. The need to feel as I write and feel &lt;strong&gt;everything&lt;/strong&gt;.&lt;/p&gt;
&lt;h2 id=&quot;why-so-mad%3F&quot; tabindex=&quot;-1&quot;&gt;Why So Mad?&lt;/h2&gt;
&lt;p&gt;Not mad. There is a difference between mad, angry, furious and passionate. I wrote a thread on Twitter after seeing a gif from the organizer whom many have had an issue with the past week plus. &lt;strong&gt;That&lt;/strong&gt;, was anger. That was furious, mad, rage.&lt;/p&gt;
&lt;p&gt;When someone blatantly slaps an entire communityt of people in the face, they deserve not only to feel the brunt of people&#39;s feelings, but deserve to get dragged to the ends of the Earth.&lt;/p&gt;
&lt;h2 id=&quot;theraputic-feeling&quot; tabindex=&quot;-1&quot;&gt;Theraputic Feeling&lt;/h2&gt;
&lt;p&gt;This is what I call it when I get wrapped up in a topic, conversation, or debate. I want to feel the feeling that flows through me. That feeling of anger, in the case of the gif. Let&#39;s discuss that.&lt;/p&gt;
&lt;p&gt;When I write something and I let fingers type what the brain wants, with no filter in between, that is theraputic. Some call it being an asshole. Some call it &amp;quot;taking it too far&amp;quot;. But as I continue to speak at conferences and at those conferences I see the folks I see as well as new folks that are in my &amp;quot;speaker family&amp;quot;, I&#39;ll take a bullet for them all.&lt;/p&gt;
&lt;p&gt;So I&#39;ve been approached about the tweet storm. Not going to say by who or what was said, but the fact that numerous people were taken advantage of, it frosts my ass. I may include a lot of snark and venom (&amp;quot;soiree of shame&amp;quot; for instance), You bet your designer boots I will say what comes to mind and not give a fuck about it. Drag me. Go for it. I have absolutely nothing to lose. Here&#39;s why.&lt;/p&gt;
&lt;h2 id=&quot;lose-it-all%3F-you&#39;re-going-to-get-me%3F&quot; tabindex=&quot;-1&quot;&gt;Lose It All? You&#39;re Going To Get Me?&lt;/h2&gt;
&lt;p&gt;I have had &lt;em&gt;nothing&lt;/em&gt; a lot during my life. I have been at the very bottom. I&#39;ve been at the lowest of lows. Without getting too personal here, let&#39;s just say that if someone wants to go to a CEO and try to railroad someone, the person running to the CEO, is straight up trash.&lt;/p&gt;
&lt;p&gt;I&#39;m my own CEO. Hes a bigger asshole than I. Feel free to leave a comment in the suggestion box. You can try to take everything away from me, but the only one that can lose it all is me. I have nothing to lose. I can leave the tech industry and go back to cooking or any number of other things I have done in the past or even retire. Or, maybe one of the projects I have going on outside of tech.&lt;/p&gt;
&lt;p&gt;You cannot hurt me if that what you wanted to try. Only I can hurt myself at this point in life. I took back what alcohol took away.&lt;/p&gt;
&lt;h2 id=&quot;i-can-feel-it&quot; tabindex=&quot;-1&quot;&gt;I Can Feel It&lt;/h2&gt;
&lt;p&gt;Even now I can feel the desire to speak freely and just let it pour out. Which is what I need for my own self-therapy. So I swear, I curse, I make analogies, I am a fucking smart-ass. You get that way when you see people you respect, admire, love, and consider family, who are treated with disrespect.&lt;/p&gt;
&lt;p&gt;So I may be the asshole. I may be the dickhead and not someone&#39;s cup of tea.&lt;/p&gt;
&lt;p&gt;Not everyone likes tea. Not everyone likes me. I&#39;m okay with that now. I&#39;m no longer a people pleaser.&lt;/p&gt;
&lt;p&gt;Just remember though, you make your bed and you lie in it. If I have an issue, I&#39;ll rip it hard and lay right into you, no minced words. I don&#39;t write things to explain myself to others. I don&#39;t owe anyone an explanation unless I &lt;strong&gt;really&lt;/strong&gt; fuck up.&lt;/p&gt;
&lt;p&gt;When I do, I&#39;ll make that apology and I won&#39;t explain. I&#39;ll own up to it. Something a conference organizer seems devoid of doing because it is the right thing to do. With me, it&#39;s too late at this point. That ship has sailed.&lt;/p&gt;
&lt;p&gt;Again however...&lt;/p&gt;
&lt;p&gt;Not everyone likes tea.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Ionic and Vue, Part One</title>
		<link href="https://toddl.dev/posts/ionic-and-vue-part-one/"/>
		<updated>Thu, 01 Dec 2022 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/ionic-and-vue-part-one/</id>
		<content type="html">&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1670038063/images/vue-ionic-logos.png&quot; alt=&quot;The Ionic Framework logo, a blue circle enclosed in a thick blue, incomplete line with a small blue ball rotating around the center circle, next to the Vue JS logo, a V-shaped logo with a light green V and a slate grey blue smaller V sitting inside the large V-shape.&quot; /&gt;&lt;/p&gt;
&lt;h2 id=&quot;well%2C-here-i-go!&quot; tabindex=&quot;-1&quot;&gt;Well, Here I Go!&lt;/h2&gt;
&lt;p&gt;I&#39;ve been looking to start coding again after doing accessibility auditing for two solid years and also have had an idea that&#39;s been swirling around in my head for a long time now. This brought me to the idea of an app, which finds the best lobster roll shacks in your area (yes, IYKYK).&lt;/p&gt;
&lt;p&gt;I like the &lt;a href=&quot;https://vuejs.org/&quot;&gt;Vue framework&lt;/a&gt;, I liked how it was accessible. Still do even though in &lt;a href=&quot;https://webaim.org/projects/million/#frameworks&quot;&gt;the last WebAIM Million Report&lt;/a&gt;, the average number of homepages using Vue increased from 18,358 home pages to 22,349 homepages while the number of errors has gone down from 67.3 on each homepage to 63.4 per homepage.&lt;/p&gt;
&lt;p&gt;That can be attributed to the knowledge and the education of accessibility, I am fairly certain. Or perhaps some organizations just do not value accessibility. Not a question, a fact. Some organizations do not value or even know about accessibility.&lt;/p&gt;
&lt;p&gt;That&#39;s not why I&#39;m writing this though. Not the main reason, but accessibility is a big factor in what I do. How accessible is your framework? How does your team value accessibility? It will show in the product.&lt;/p&gt;
&lt;p&gt;So Vue it is. I also just like the feeling I get when writing it. If you&#39;re a developer, and you prefer a certain language or framework and you just feel comfortable in that language or framework, then you&#39;ll understand what I mean.&lt;/p&gt;
&lt;p&gt;Sure there is Flutter or React Native, but I just had a good feeling about using Vue and Ionic.&lt;/p&gt;
&lt;h2 id=&quot;a-mobile-ui-toolkit&quot; tabindex=&quot;-1&quot;&gt;A Mobile UI Toolkit&lt;/h2&gt;
&lt;p&gt;I don&#39;t need anything fancy or something that I am going to need a PhD to learn and understand. That may have been a little over-the-top, but I really wanted to hit the ground running. &lt;a href=&quot;https://ionicframework.com/&quot;&gt;That&#39;s when I found Ionic&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;It works with Angular, React, Vue. It is cross-platform. Performant and interoperable. I also like the attention to accessibility. I don&#39;t know if anyone has touched upon the accessibility of the framework, but I like what I have read, heard, &lt;a href=&quot;https://youtu.be/p3AN3igqiRc?t=72&quot;&gt;and seen&lt;/a&gt;. Though the video does reference Web Standards, so that is a giant plus as far as I am concerned.&lt;/p&gt;
&lt;p&gt;You can use one stylesheet and you can ship the framework using one JavaScript file. Now that everything is shipped as web components, you can use one &lt;code&gt;.html&lt;/code&gt; file with no build process. I kind of like that.&lt;/p&gt;
&lt;p&gt;So I&#39;m going to go over my experience with the Ionic framework.&lt;/p&gt;
&lt;h2 id=&quot;installation&quot; tabindex=&quot;-1&quot;&gt;Installation&lt;/h2&gt;
&lt;p&gt;Node.js is necessary to install, no problem, I already have it running on my machine. Next is getting Ionic CLI installed to execute the commands. So I just followed the docs and type in:&lt;/p&gt;
&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;npm install &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;g @ionic&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;cli&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;I made a pre-made template to start. Just to get the feel of doing a quickstart of sorts by running:&lt;/p&gt;
&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;ionic start&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;or I could have typed in:&lt;/p&gt;
&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;ionic start lobstah&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;roll tabs&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;I&#39;m then given the choice to pick between Angular, React, and Vue JavaScript frameworks from a list of choices. I chose Vue, of course. I am then asked if I want to integrate my new app with &lt;a href=&quot;https://capacitorjs.com/docs/v2/&quot;&gt;Capacitor&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;It then runs and does its thing, then I get a list of next steps to follow:&lt;/p&gt;
&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt; Go to your &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;project&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;cd ./test-ionic&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt; Run &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;ionic serve&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt; within the app directory to see your app &lt;span class=&quot;token keyword&quot;&gt;in&lt;/span&gt; the browser
&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt; Run &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;ionic capacitor add&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt; to add a native iOS or Android project using Capacitor
&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt; Generate your app icon and splash screens using &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;cordova-res --skip-config --copy&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt; Explore the Ionic docs &lt;span class=&quot;token keyword&quot;&gt;for&lt;/span&gt; components&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; tutorials&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; and more&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; https&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;ion&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;link&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;docs
&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt; Building an enterprise app&lt;span class=&quot;token operator&quot;&gt;?&lt;/span&gt; Ionic has Enterprise Support and Features&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; https&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;ion&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;link&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;enterprise&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;edition&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;I followed the steps and I was good to go.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://toddl.dev/posts/ionic-and-vue-part-two.md&quot;&gt;Part two of the series is here if you want to read on&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&quot;next-steps&quot; tabindex=&quot;-1&quot;&gt;Next Steps&lt;/h2&gt;
&lt;p&gt;It&#39;s time to start getting things underway, which will come in part two of this series. I am doing these posts in short little chunks that I can parse easily. I have so much on my plate, this is how I&#39;m doing it. So if you want to leave a comment, &lt;a href=&quot;https://toddl.dev/contact/&quot;&gt;go to the contact page&lt;/a&gt; and contact me there! And if you don&#39;t have anything nice to say, then just find somewhere else to go and complain. Like &lt;a href=&quot;https://youtube.com/&quot;&gt;YouTube&lt;/a&gt;.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>The Writings of a Privileged Mediocre White Man</title>
		<link href="https://toddl.dev/posts/the-writings-of-a-privileged-mediocre-white-man/"/>
		<updated>Fri, 02 Dec 2022 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/the-writings-of-a-privileged-mediocre-white-man/</id>
		<content type="html">&lt;h2 id=&quot;my-position-in-tech&quot; tabindex=&quot;-1&quot;&gt;My Position in Tech&lt;/h2&gt;
&lt;p&gt;I may not be a high-profile figure in tech, but I am still in a position of immense privilege. Which recently has seemed to have been a barrier to a position I had interviewed for.&lt;/p&gt;
&lt;p&gt;I decided to speak publicly about this to clear up any myths surrounding me or my writing and assure that there is a reason why at 51 years of age, I can differentiate between keeping my mouth shut or voicing my displeasure in a back channel and letting my thoughts fly publicly.&lt;/p&gt;
&lt;p&gt;I have benefitted in my entire career from my being white. Make no mistake about it, I recognize this well into my 23+ years in Web/tech. When a situation like the situation that happened in London, now two weeks ago and talking to a company that may be a partner of a company I work for or potentially work for.&lt;/p&gt;
&lt;p&gt;So let&#39;s break this down.&lt;/p&gt;
&lt;h2 id=&quot;the-wrongdoings-of-a-shady-enterprise&quot; tabindex=&quot;-1&quot;&gt;The Wrongdoings of a Shady Enterprise&lt;/h2&gt;
&lt;p&gt;There is a time and a place for me, no matter how vocal and how blunt (or any similar adjective you want to use about my vocalization here) I get, to make sure a situation like this is put out there for the public to warn them against something like this.&lt;/p&gt;
&lt;p&gt;This situation I am not going to go into great lengths in an interview, when the interview is about me and my qualifications for a position I am &lt;em&gt;and was&lt;/em&gt; well-qualified for. This is my privilege because I have a platform and I do have an audience.&lt;/p&gt;
&lt;p&gt;So I cannot sit idly by like most white men and let something happen to the community that affects new speakers and people giving their first live talks ever. That&#39;s not how I roll. No apologies there.&lt;/p&gt;
&lt;p&gt;I was fired up and you can bet the farm that I won&#39;t let something like this deter me if opportunities present themselves elsewhere. This was something that needed to be said. Especially when people in the developer and speaker community were being harmed. I cannot fathom what it was doing to people in underrepresented groups and the fact that many people stepped up, that were not afraid of an organizer who was going after people, and let the public know &lt;strong&gt;NOT&lt;/strong&gt; to deal with this kind of shady character makes my decision to do so, valid in my mind. I did the right thing in my mind and I hoped it helped even if it helped one person.&lt;/p&gt;
&lt;p&gt;My privilege needs to be acknowledged by me and that&#39;s when I start to pay back to the community. The many communities I belong to. If it means you not hiring me because I spoke the truth, that&#39;s your decision, your loss, and your mistake.&lt;/p&gt;
&lt;p&gt;Not only that, but spending the money out of pocket that I did? And hearing about what other people spent and was &lt;em&gt;not&lt;/em&gt; reimbursed for? and then the slap in the face because of a tweet that the organizer made about being so tired when they did not even lift a finger and spent more time schmoozing in &lt;strong&gt;the speaker lounge&lt;/strong&gt;? You bet I was incensed.&lt;/p&gt;
&lt;h2 id=&quot;partner-companies-or-entities&quot; tabindex=&quot;-1&quot;&gt;Partner Companies or Entities&lt;/h2&gt;
&lt;p&gt;An organization that deals with partnerships and has mutual dealings with other entities does not have to worry about me flying off the proverbial handle. There is athing called &lt;em&gt;judgment&lt;/em&gt; and my judgment over the last nine-plus years has gotten infinitely better. So when I make the call on whether to sound off on my blog, I will. If I decide that doing so will affect a partnership and potentially my job, well then I will go through the correct channels. That&#39;s &lt;em&gt;judgment&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;So if I were to hire someone, one thing I look for is judgment. Because if their judgment outside the office is whatever they feel is right and proper, then that is on them. That does not reflect the views of the company I run. I&#39;d rather have someone that can differentiate between things, right and wrong, when to take the high road and when to let it loose rather than someone that is a &amp;quot;yes man&amp;quot;.&lt;/p&gt;
&lt;p&gt;What you find in the Web and tech landscape are a far-reaching field of &amp;quot;yes men&amp;quot;. I&#39;m not one of those people.&lt;/p&gt;
&lt;h2 id=&quot;why-the-blog-post%3F&quot; tabindex=&quot;-1&quot;&gt;Why the Blog Post?&lt;/h2&gt;
&lt;p&gt;If a company passes on me for speaking the truth about something they have a 2-minute high-level overview synopsis of is on them. I, after this post will move on but I think this kind of instance should be brought forth because a &lt;strong&gt;lot&lt;/strong&gt; of companies do this. I may have been passed over a thousand times because I let thought flow to blog post. That&#39;s a form of censorship. You don&#39;t want me discussing something that could potentially save your company the explanation to a partner as to why an employee discussed something in a blog post when it had &lt;em&gt;absolutely nothing&lt;/em&gt; to do with anything remotely related to any company involved.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&amp;quot;Well, we don&#39;t want to have to explain…&amp;quot;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;You don&#39;t have to. That is the beautiful part about the internet. If I worked for Company A, and I wrote a blog post about a conference that went super sour and it had nothing to do with nobody Company A deals with, it is a moot point!&lt;/p&gt;
&lt;p&gt;Now if I rambled on about Company A&#39;s partner Company Z, and their product because I thought it was lousy and &lt;em&gt;that&lt;/em&gt; affected Company A&#39;s standing with Company Z, you bet your bottom dollar I&#39;d understand totally!&lt;/p&gt;
&lt;p&gt;If I did have a problem with Company Z&#39;s overlay for instance that Company A was using, I&#39;d go straight to the decision-makers and let them know my displeasure, for instance. See? &lt;strong&gt;Judgment&lt;/strong&gt;!&lt;/p&gt;
&lt;p&gt;I&#39;d also rather have a person that tells me what they think about something rather than a group full of &amp;quot;yes men&amp;quot;.&lt;/p&gt;
&lt;p&gt;The point I am trying to make is this:&lt;/p&gt;
&lt;p&gt;When I see a wrongdoing, I&#39;ll call it out. Especially when it deals with members of a community I belong to being harmed. Full stop. When it comes to business acumen, I deal with the correct channels. If there ever was or is a time where I have taken the wrong channel, pointing that out to me gets corrected &lt;em&gt;real fast&lt;/em&gt;. That&#39;s part of learning and judgment. Because I always need to do better than I did yesterday, and if I can take the lesson from yesterday and apply it to today, I&#39;m winning.&lt;/p&gt;
&lt;p&gt;Overlooking me because of a blog post that came to the defense of those harmed and to point out a problematic organizer? That&#39;s you losing. Losing someone absolutely qualified for the position I applied for. Will the other candidate flourish? I hope so and I wish you all well.&lt;/p&gt;
&lt;p&gt;and with that… I have moved onward and upward.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Snake Oil and Smoke Screens</title>
		<link href="https://toddl.dev/posts/snake-oil-and-smoke-screens/"/>
		<updated>Fri, 23 Dec 2022 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/snake-oil-and-smoke-screens/</id>
		<content type="html">&lt;h2 id=&quot;where-it-began&quot; tabindex=&quot;-1&quot;&gt;Where It Began&lt;/h2&gt;
&lt;p&gt;It all started with a food show on the Cooking Channel and a trip to their menu. From there, it was all downhill from that point.&lt;/p&gt;
&lt;p&gt;For me, a guy from Portland, Maine, whenever I see Portland (the original one) on a food show, I know there is going to be lobster and lobster rolls. It&#39;s a given. So when I was watching this show (which was Delicious Destinations w/Andrew Zimmern) I knew one of the places I used to frequent would be on the show. Sure enough, it was to be.&lt;/p&gt;
&lt;p&gt;DiMillo&#39;s Restaurant has been a mainstay in Portland for 57 years, it is now a &amp;quot;floating&amp;quot; restaurant, as it sits in Casco Bay. Great food. Some of the best in Portland. The surf and turf was what I was watching on Delicious Destinations and I was asked what the price of the item was. Not sure, I went to the website to find out.&lt;/p&gt;
&lt;h2 id=&quot;what-the-f%40%24k%3F!&quot; tabindex=&quot;-1&quot;&gt;What The F@$k?!&lt;/h2&gt;
&lt;p&gt;On page load, on mobile, there is that icon. staring me in the face. In its usual place, indicating that the site has an overlay.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1671844426/images/a11y_logo.png&quot; alt=&quot;The universal access icon for accessibility&quot; /&gt;&lt;/p&gt;
&lt;p&gt;Usually, default goes to accessiBe. This one, is just as nauseating to see (as they all are) from UserWay. Just as bad as any other overlay company. Just as deceptive as any other overlay company. Just as stomach-turning as any other logo like that I see plastered up on a site because the people involved in the decision-making behind it just don&#39;t know.&lt;/p&gt;
&lt;p&gt;I hate overlays. Make no mistake about it, I hate them. They do nothing for the disabled user but make the experience worse. So I am staring this down and once again, that feeling of dread.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1671842087/images/dimillos_home.png&quot; alt=&quot;The universal access icon for accessibility&quot; /&gt;&lt;/p&gt;
&lt;p&gt;I check the accessibility statements of these sites and they are just the same old cookie-cutter accessibility statemtns that are copied and pasted into pages over and over and over again by companies that do not know any better, have no clue, or simply do not care about the exclusion of people with disabilities.&lt;/p&gt;
&lt;p&gt;You can go to a number of sites like &lt;a href=&quot;https://www.myridgegateapartments.com/accessibility&quot;&gt;this one and read the accessibility statement&lt;/a&gt; and it will be the same as &lt;a href=&quot;https://www.s29apartments.com/accessibility&quot;&gt;the one that you found before that&lt;/a&gt;. Some use (or have used) an overlay. &lt;a href=&quot;https://northeastwhitewater.com/accessibility-disclaimer/&quot;&gt;Or this statement&lt;/a&gt; and then &lt;a href=&quot;https://www.downtownwestbrook.com/accessibility-disclaimer/&quot;&gt;go to this site and see this statement&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&quot;who-is-doing-this%3F&quot; tabindex=&quot;-1&quot;&gt;Who Is Doing This?&lt;/h2&gt;
&lt;p&gt;Well... in the case of what I stumbled upon that I am writing about, it is the &lt;a href=&quot;https://www.websiteportland.com/&quot;&gt;Portland Website Company&lt;/a&gt;. A marketing firm, naturally. What really gets under my skin about these firm that tout an accessible website are:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Their own site is not accessible.&lt;/li&gt;
&lt;li&gt;They shy away from taking any responsibility of the accessibility of a web site they build.&lt;/li&gt;
&lt;li&gt;They refer to the &lt;a href=&quot;http://ada.gov/&quot;&gt;ADA.gov&lt;/a&gt; accessible when the ADA does not cover websites! The ADA does not explicitly address online compliance!&lt;/li&gt;
&lt;li&gt;They &amp;quot;strive&amp;quot; for Section 508 standards but I don&#39;t see a federal government site or entity in their portfolio that would be covered by Section 508 at all.&lt;/li&gt;
&lt;li&gt;Nothing changes as far as accessiblity goes on their website when turning the overlay on and off.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Pure bull. That&#39;s what overlays are and that&#39;s what marketing firms are that hawk them. A straight up fallacy saying a site is made more accessible.&lt;/p&gt;
&lt;p&gt;This leads me to a number of observations.&lt;/p&gt;
&lt;h2 id=&quot;what-is-lacking%3F&quot; tabindex=&quot;-1&quot;&gt;What Is Lacking?&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;Morals&lt;/li&gt;
&lt;li&gt;Knowledge and Educated Information&lt;/li&gt;
&lt;li&gt;An Accessibility Specialist and or Accessibility team.&lt;/li&gt;
&lt;li&gt;Inclusion&lt;/li&gt;
&lt;li&gt;Knowledge&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;There is no way, with anyone that is in tech or especially web, that you&#39;re not going to know about the current climate of the accessibility community and the battle against the overlay vendors. You lack education, you lack knowledge, but had you done your homework, you would have known. Therefore I call the lack of morals when you exclude 20-30% of the population of the world or 15-25% of the population of the United States.&lt;/p&gt;
&lt;h2 id=&quot;summary&quot; tabindex=&quot;-1&quot;&gt;Summary&lt;/h2&gt;
&lt;p&gt;Like &lt;a href=&quot;https://karlgroves.com/&quot;&gt;Karl&lt;/a&gt; said:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Overlays are here to stay. So are “male enhancement pills”.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;They pop up like bad acne, cold sores, and groundhogs every February 2nd.&lt;/p&gt;
&lt;p&gt;They are a grift, they are snake oil sold by people that have no scruples, and they are a smoke screen as to people that are too lazy to put in the work to make things accessible for everyone. There is no excuse in the world in my mind that can possibly cover the fact that these overlays are being hawked like this, with an accessibility statement such as &lt;a href=&quot;https://www.websiteportland.com/accessibility-disclaimer/&quot;&gt;the one on the Portland Website Company website&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;When your website accessibility disclaimer includes the fact &lt;strong&gt;YOU&lt;/strong&gt; are not responsible for the accessibility of a website &lt;strong&gt;YOU&lt;/strong&gt; build, &lt;strong&gt;YOU&lt;/strong&gt; obviously do not care who you are excluding. There is enough of that in web today and we do not need anymore of it. Disabled people of way past the point of being sick of it and fed up and treated like second-rate citizens, they are way past the point of sick of being excluded.&lt;/p&gt;
&lt;p&gt;The accessibility community is sick of it. We&#39;re tired of ahving a battle every decade with something that builds barriers instead of removing them. We explain over and over and over about a multitude of things decade after decade after decade of how methoids can be used to make things more accessible and it falls on billions of closed minds and closed ears.&lt;/p&gt;
&lt;p&gt;When you run from the responsibility, you&#39;re the problem along with the overlays you peddle that are the bigger problem.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>An Event Apart</title>
		<link href="https://toddl.dev/posts/an-event-apart/"/>
		<updated>Tue, 27 Dec 2022 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/an-event-apart/</id>
		<content type="html">&lt;h2 id=&quot;shocked&quot; tabindex=&quot;-1&quot;&gt;Shocked&lt;/h2&gt;
&lt;p&gt;The words fail me. &lt;a href=&quot;https://www.aneventapart.com/&quot;&gt;An Event Apart is no more&lt;/a&gt;. I&#39;ve taken a couple days to process this. It comes as a bit of a surprise to me.&lt;/p&gt;
&lt;p&gt;From the first time I heard about the conference, to the first conference I attended and had an anxiety attack of epic proportions that Jeffrey Zeldman witnessed, to the scores of wonderful people I met, the fantastic speakers I went to see and learn from, to the people I connected with. I will truly miss it.&lt;/p&gt;
&lt;h2 id=&quot;pandemic-times&quot; tabindex=&quot;-1&quot;&gt;Pandemic Times&lt;/h2&gt;
&lt;p&gt;Without going into pandemic or endemic gobbeldygook, the pandemic has done this to conferences as is with other spaces pre-COVID times. With a heavy heart, I respect the decision and I am sad I did not get to go to the San Francisco event this month. I&#39;ll miss seeing faces and people I was seeing yearly when going like Eric and Jeffrey, Marci and all the other crew setting up and working hard to put on one the best shows a conference can possibly put on.&lt;/p&gt;
&lt;p&gt;AEA Denver in 2019 was my last AEA. It was a great one. I met so many wonderful people, have a bunch of photos to chronicle the time there, and had a blast. Little did I know at the time it would be my last An Event Apart. So I just want to say, from the bottom of my heart to all the speakers. Thank you, for all your educating and wisdom. Your talks contributed to my growth as a professional.&lt;/p&gt;
&lt;p&gt;To &lt;a href=&quot;https://zeldman.com/&quot;&gt;Jeffrey&lt;/a&gt; and &lt;a href=&quot;https://meyerweb.com/&quot;&gt;Eric&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Thank you.&lt;/p&gt;
&lt;p&gt;Thank you for creating this and making it what it was with a wonderful team of people that made it the premier event to attend in UX. It will be strange to not go to another AEA again, but with changing times, comes changing gears. I got the opportunity to meet a ton of wonderful people and I will always remember that, the talks, the fun. I espcially enjoyed seeing the both of you each year and having a chat.&lt;/p&gt;
&lt;p&gt;Thank you Team AEA. I&#39;ll miss you all.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Goodbye 2022</title>
		<link href="https://toddl.dev/posts/goodbye-2022/"/>
		<updated>Wed, 28 Dec 2022 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/goodbye-2022/</id>
		<content type="html">&lt;h2 id=&quot;hey-2022&quot; tabindex=&quot;-1&quot;&gt;Hey 2022&lt;/h2&gt;
&lt;p&gt;It wasn&#39;t fun. The pandemic is still here, it is gearing up to be worse, and still I got through you.&lt;/p&gt;
&lt;h2 id=&quot;lowlights&quot; tabindex=&quot;-1&quot;&gt;Lowlights&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;I got COVID in April. I was vaxxed 3 times, but the three days that it hit me hard were the worst out of the two weeks I felt like garbage.&lt;/li&gt;
&lt;li&gt;I went to a fiasco in London that &lt;em&gt;almost&lt;/em&gt; resulted in me talking to a room full of no one but myself.&lt;/li&gt;
&lt;li&gt;People died from COVID. It still is something I find horribly wrong with this world that we could have prevented this or it could have been a lot less than it was, but we had a shit President who did nothing.&lt;/li&gt;
&lt;li&gt;The pandemic still is a thing. I know a lot of people that got sick, know people who passed away.&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id=&quot;highlights&quot; tabindex=&quot;-1&quot;&gt;Highlights&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;I spoke at eight conferences (it felt like more), attended Smashing Conference in San Francisco and some virtuals.&lt;/li&gt;
&lt;li&gt;I did not get COVID again.&lt;/li&gt;
&lt;li&gt;I met a ton of great people at conferences. Too many to mention but they know who they are.&lt;/li&gt;
&lt;li&gt;I went to London for the first time in over thirty years.&lt;/li&gt;
&lt;li&gt;I bought a house&lt;/li&gt;
&lt;li&gt;We got a cat.&lt;/li&gt;
&lt;li&gt;I spent another year sober.&lt;/li&gt;
&lt;li&gt;I had an amazing support system when I&#39;m on the road that I am grateful to have.&lt;/li&gt;
&lt;li&gt;I will continue to wear a mask not only to prevent me from getting sick, but to ensure I don&#39;t get anyone sick if I happen to be sick.&lt;/li&gt;
&lt;li&gt;I got a great co-host for the podcast.&lt;/li&gt;
&lt;li&gt;I ended season two of the podcast and we&#39;re heading into season three.&lt;/li&gt;
&lt;li&gt;I spent time in six states, two continents and two countries during my travel in which I got to see a lot, eat great food, and spend time with phenomenal friends.&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id=&quot;looking-ahead&quot; tabindex=&quot;-1&quot;&gt;Looking Ahead&lt;/h2&gt;
&lt;p&gt;I don&#39;t like to look too far ahead but the one thing I do look forward to is this:&lt;/p&gt;
&lt;p&gt;Speaking at conferences, meeting new friends and reconnecting with old friends. Moving out of accessibility by the end of the year and transitioning into a DevRel role somewhere. Traveling to more places and being sober so that I can enjoy it.&lt;/p&gt;
&lt;p&gt;I hope everyone stays safe and you have a better 2023. Hope that things keep moving forward instead of backwards, that we can progress and not regress. Hope that my friends and the people I have met over the course of the time I have been in tech can enjoy some peace and some well-being during these times. Hope that humans can wake up and realize what we&#39;re doing isn&#39;t working, that maybe we need to change drastically before there is no Earth left.&lt;/p&gt;
&lt;p&gt;See you in 2023.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Enough with &quot;Dark Patterns&quot; Already!</title>
		<link href="https://toddl.dev/posts/enough-with-dark-patterns-already/"/>
		<updated>Sun, 01 Jan 2023 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/enough-with-dark-patterns-already/</id>
		<content type="html">&lt;h2 id=&quot;this-isn&#39;t-going-to-go-over-well&quot; tabindex=&quot;-1&quot;&gt;This Isn&#39;t Going To Go Over Well&lt;/h2&gt;
&lt;p&gt;and I couldn&#39;t be any more invested in wanting to have a contentious debate about it. If you disagree, you disagree. Think long about it before contacting me. Just because it doesn&#39;t directly affect you doesn&#39;t mean it doesn&#39;t affect someone else. That goes for anything in this world.&lt;/p&gt;
&lt;h2 id=&quot;your-naming-conventions-are-suspect&quot; tabindex=&quot;-1&quot;&gt;Your Naming Conventions Are Suspect&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;&amp;quot;The colors black and white have long carried opposite connotations. Black has connoted evil and disgrace, while white has connoted decency and purity.&amp;quot;&lt;br /&gt;
Longshore, D. (1979). Color Connotations and Racial Attitudes. Journal of Black Studies, 10(2), 183–197. &lt;a href=&quot;http://www.jstor.org/stable/2784327&quot;&gt;http://www.jstor.org/stable/2784327&lt;/a&gt; *&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;The history of the term &amp;quot;dark patterns&amp;quot; as far as I can tell goes back to 2010 when Harry Brignull, a UX designer set up &lt;a href=&quot;http://darkpatterns.org/&quot;&gt;darkpatterns.org&lt;/a&gt;, a resource to highlight patterns and anti-patterns on the web.&lt;/p&gt;
&lt;p&gt;Brignull since then has rebranded his site to deceptive.design in an attempt to use a more inclusive term for the practice of deception and deceiving users.&lt;/p&gt;
&lt;p&gt;Many articles can be found if you search for the term &amp;quot;dark Pattern&amp;quot; and some even highlight Brignull and his steering away from a term that is exclusionary and harmful. These articles want to &lt;em&gt;&amp;quot;stick to calling them dark patterns&amp;quot;&lt;/em&gt; because &lt;em&gt;&amp;quot;the term dark pattern has more traction&amp;quot;&lt;/em&gt; &lt;a href=&quot;https://www.comparitech.com/blog/information-security/dark-patterns/&quot;&gt;to quote one article&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;To quote Kim Crayton, &lt;em&gt;&amp;quot;Tech is not neutral.&amp;quot;&lt;/em&gt; and &lt;em&gt;&amp;quot;Unremarkably mediocre white dudes&amp;quot;&lt;/em&gt; it sure isn&#39;t and I am one of those unremarkably mediocre white dudes.&lt;/p&gt;
&lt;h2 id=&quot;then-why-are-you-writing-this-article%3F&quot; tabindex=&quot;-1&quot;&gt;Then Why Are YOU Writing This Article?&lt;/h2&gt;
&lt;p&gt;White guys doing white guy things, since tech was built by white guys and is white guy majority in the spots where all the decisions are made and how things are run, it&#39;s not surprising that white guys want to still carry this torch (not a tiki torch, although it might as well be) to the end. I mean, look at the numbers from a poll in the 2020 StackOverflow Developer Survey. The numbers don&#39;t lie, friend:&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1672586775/images/sounds-about-white.webp&quot; alt=&quot;A StackOverflow poll showing 68.3% of developers that responded to the survey were of white or European descent while the remaining were 10.4% South Asian, 7.6% Hispanic or Latino/a/x, 4.9% Middle Eastern, 4.6% East Asian, 4.5% Black or African descent and the same for Southeast Asian, 1.7% multiracial, 1.2% biracial, and 0.8% Indigenous such as Native American, Pacific Islander, or Indigenous Australian.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;I&#39;m writing it to maybe, perhaps, get at least one person to change and if one changes because of this article or the work that I am doing, then I&#39;ve done my job but I won&#39;t rest with that as the accepted result. &amp;quot;Dark pattern&amp;quot; is problematic.&lt;/p&gt;
&lt;p&gt;Tech is not neutral and it is political. So if you have lasted this long let&#39;s get into why this thinking is problematic and what I propose we do as a community of &amp;quot;professionals&amp;quot; on the web (I sometimes read the bird site and wonder how some people can be called &amp;quot;professionals&amp;quot;).&lt;/p&gt;
&lt;p&gt;It is 2023 and we are still, in most places with most people, using the word &amp;quot;dark&amp;quot; when it comes to anti-patterns on the Web. Why? Is it because some white dudes just do not want to embrace change, as they always carry themselves to do?&lt;/p&gt;
&lt;p&gt;Is it because we, as a white society, or a society as a whole, we do not wish to embrace the change of a language that has the worst of meaning, origin, and racism?&lt;/p&gt;
&lt;p&gt;Your naming conventions are highly suspect.&lt;/p&gt;
&lt;p&gt;Racists are usually uncomfortable talking about racism. They immediately curl up like a cat cornered in a bathroom thinking you are going to throw it into the tub full of water. So when I see white dudes in my travels online, especially in the Twitterspace, they are usually recoiling in self-defense when the issue of race or racism is involved in the conversation.&lt;/p&gt;
&lt;p&gt;Sorry to burst your little tech bubbles kids, but the Web is political. Programming is political. Accessibility is political. Your job is political. Tech is political.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&amp;quot;Why do we have to bring politics into this?&amp;quot;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Oh, you didn&#39;t know?! Tech is political. Therefore, the impetus of me writing this article is to address one of those little corners of our world. User Experience (UX) and the use of the term, &amp;quot;dark patterns&amp;quot;. You can agree to disagree and move on with your day, I know I will with people who disagree.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&amp;quot;This has nothing to do with master/main&amp;quot;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;They sure as hell do.&lt;/p&gt;
&lt;p&gt;Change came around from the usage of the word &lt;em&gt;&amp;quot;master&amp;quot;&lt;/em&gt; and GitHub made the change. &lt;em&gt;&amp;quot;Slave&amp;quot;&lt;/em&gt; is another term that has been mentioned. There are a lot of problematic terms associated with tech because tech was founded by a group of unremarkably mediocre white men.&lt;/p&gt;
&lt;p&gt;Dark isn&#39;t &lt;em&gt;just a word&lt;/em&gt; in the dictionary, oh no. It is also been known to have designated racial groups since the days when this country was &lt;em&gt;&amp;quot;founded&amp;quot;&lt;/em&gt;. Along with black, dark and black was the norm and their connotations may well reinforce social norms pertaining to those groups(*).&lt;/p&gt;
&lt;p&gt;The reasoning behind the usage of the term can be anywhere from, &lt;em&gt;&amp;quot;What does it matter? I don&#39;t see anything wrong with it.&amp;quot;&lt;/em&gt; to &lt;em&gt;&amp;quot;Why do people overreact to everything these days? Why can&#39;t people not look into everything with a microscope?&amp;quot;&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;White dudes automatically go on the defensive letting people know about the discomfort they are feeling and they look to others cut from the same cloth for comfort. For validation and for support. That&#39;s a huge part of the problem.&lt;/p&gt;
&lt;p&gt;Why stray from the norm? Why change something that has been &lt;em&gt;&amp;quot;industry standard&amp;quot;&lt;/em&gt; since they started their web careers? Fear. Fear of change and fear of being inclusive. So the reasons don&#39;t matter, just as long as their discomfort gets them what they want.&lt;/p&gt;
&lt;p&gt;There are reasons. The history of the United States, the history of Black people and other people that are underrepresented on and in the Web. The words that have negative connotation towards a select group of people. It doesn&#39;t have to be &lt;em&gt;&amp;quot;every&amp;quot;&lt;/em&gt; single group of marginalized and underrepresented folks.&lt;/p&gt;
&lt;p&gt;We have all heard about it. We all have our biases and opinions, and yet we still, as an industry, clutch to our stringed pearls when someone wants to change something for the betterment of good and inclusion and accessibility.&lt;/p&gt;
&lt;h2 id=&quot;deceptive.-it&#39;s-okay-to-use-the-word.-honest!&quot; tabindex=&quot;-1&quot;&gt;Deceptive. It&#39;s Okay To Use The Word. Honest!&lt;/h2&gt;
&lt;p&gt;I&#39;m a child of the seventies. I grew up with people that would tell me to suck it up and get used to it. That&#39;s the kind of attitude I see permeate through tech to this very day. Especially with the white guys. It&#39;s the entitlement. It&#39;s the air of ego and of that they are the &amp;quot;alpha male&amp;quot;.&lt;/p&gt;
&lt;p&gt;Whether they want to admit it or not, I had to. I had to look inward at myself and the way I conducted myself and the things I said and wrote. It&#39;s been a twenty year process. It has been all about change.&lt;/p&gt;
&lt;p&gt;Change the words, change the attitudes, change the ego, swallow your pride or drown. It&#39;s okay to use the word &lt;em&gt;&amp;quot;deceptive&amp;quot;&lt;/em&gt;, it really is.&lt;/p&gt;
&lt;p&gt;I&#39;ve seen and heard the term thrown around loosely. Loosely as in here and there around Twitter and other places and writings. But never really seeing it take hold in the mainstream. Why? It&#39;s time to sunset the old &lt;em&gt;&amp;quot;dark&amp;quot;&lt;/em&gt; term and use something that does not invoke negative connotations, words, thoughts, inflections. Period.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://twitter.com/andyvitale/status/1262403859286315010?s=20&amp;amp;t=JqI3CFSxTdHDds71LVwWvg&quot;&gt;Andy Vitale brought up the subject in 2020&lt;/a&gt; and this made me pause then think. There needed to be some kind of change. I agreed with Andy in his tweet, I even think we briefly discussed it but cannot find the tweets (maybe in a DM?).&lt;/p&gt;
&lt;h2 id=&quot;it&#39;s-moved-into-the-mainstream&quot; tabindex=&quot;-1&quot;&gt;It&#39;s Moved Into The Mainstream&lt;/h2&gt;
&lt;p&gt;Media outlets online pick up on articles and the terminology fast and they write and publish articels at the same rate. &amp;quot;Dark&amp;quot; has permeated the search engines and we need to change this.&lt;/p&gt;
&lt;p&gt;I can see many articles that specifically use &amp;quot;dark&amp;quot; in its headline. &lt;a href=&quot;https://www.ftc.gov/news-events/news/press-releases/2022/09/ftc-report-shows-rise-sophisticated-dark-patterns-designed-trick-trap-consumers&quot;&gt;&amp;quot;FTC Report Shows Rise In Sophisticated Dark Patterns Designed to Trick and Trap Consumers&amp;quot;&lt;/a&gt; for one. Even &lt;a href=&quot;https://en.wikipedia.org/wiki/Dark_pattern&quot;&gt;Wikipedia has an entry for this&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;It&#39;s time to get rid of the language. Whether it is &lt;em&gt;&amp;quot;deceptive design patterns&amp;quot;&lt;/em&gt;, &lt;em&gt;&amp;quot;deceptive patterns&amp;quot;&lt;/em&gt;, &lt;em&gt;&amp;quot;Anti-patterns&amp;quot;&lt;/em&gt; or something else. We need to remove &amp;quot;dark&amp;quot; from the terminology. It doesn&#39;t make sense to begin with. &amp;quot;Dark&amp;quot; may be because of &amp;quot;perception&amp;quot; to some people, but perception is only a small fraction of what a UX pattern that either harms with intent or without intent really is.&lt;/p&gt;
&lt;p&gt;Patterns that harm people, whether it is neurodivergent folks, people with cognitive issues, people with lack of quality education or who have a learning disability are anti-patterns with those patterns that are without intent, deceptive patterns with intent behind them.&lt;/p&gt;
&lt;h2 id=&quot;definition-is-everything&quot; tabindex=&quot;-1&quot;&gt;Definition Is Everything&lt;/h2&gt;
&lt;p&gt;According to &lt;a href=&quot;https://www.dictionary.com/browse/dark&quot;&gt;Dictionary.com, dark is&lt;/a&gt;:&lt;/p&gt;
&lt;p&gt;adjective, &lt;strong&gt;dark·er&lt;/strong&gt;, &lt;strong&gt;dark·est&lt;/strong&gt;.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;having very little or no light: &lt;em&gt;a dark room&lt;/em&gt;.&lt;/li&gt;
&lt;li&gt;radiating, admitting, or reflecting little light: &lt;em&gt;a dark color&lt;/em&gt;.&lt;/li&gt;
&lt;li&gt;approaching black in hue: &lt;em&gt;a dark brown&lt;/em&gt;.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;noun&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;the absence of light; darkness: &lt;em&gt;I can&#39;t see well in the dark&lt;/em&gt;.&lt;/li&gt;
&lt;li&gt;night; nightfall: &lt;em&gt;Please come home before dark&lt;/em&gt;.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;verb (used with object)&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;to make dark; darken.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;verb (used without object)&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Obsolete. to grow dark; darken.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Why are we using &amp;quot;dark&amp;quot;?! There is no sense to it whatsoever. A &lt;em&gt;&amp;quot;deceptive pattern&amp;quot;&lt;/em&gt; or an anti-pattern designed to trick users, whether it is with or without intent, is &lt;strong&gt;deceptive&lt;/strong&gt;. It is a deceptive practice.&lt;/p&gt;
&lt;p&gt;Not &amp;quot;dark&amp;quot; like Halloween spooky or scary, not without light, not due to color or light. None of those. None!&lt;/p&gt;
&lt;h2 id=&quot;my-current-work-behind-deceptive-patterns&quot; tabindex=&quot;-1&quot;&gt;My Current Work Behind Deceptive Patterns&lt;/h2&gt;
&lt;p&gt;Leaving the social and political debates aside, I have brought the term to the W3C in our quest to recognize spots in WCAG that need to be filled. Enter &lt;a href=&quot;https://raw.githack.com/w3c/fast/restructure-functional-and-user-needs/index.html&quot;&gt;the Framework for Accessibile Specification of Technologies (FAST)&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Those patterns or anti-patterns that are used to trick users. Those patterns and anti-patterns that cause harm whether with or without intent. Because it happens in this day and age whether we want to acknowledge it or not. It is there.&lt;/p&gt;
&lt;p&gt;The challenge here is filling those gaps because there could be a thousand different use cases to fill a gap. It&#39;s work, a lot of work. It&#39;s work that I am willing to do though. User needs and functional needs are being carefully looked at and thought about. The group working on this has worked hard to get to the point where we have gotten to and there is more work to be done.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;blacklist/whitelist&lt;/li&gt;
&lt;li&gt;master/slave&lt;/li&gt;
&lt;li&gt;native feature/built-in feature&lt;/li&gt;
&lt;li&gt;dummy/sample&lt;/li&gt;
&lt;li&gt;man hours/engineer hours&lt;/li&gt;
&lt;li&gt;Black Hat/White Hat&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://www.britannica.com/topic/grandfather-clause&quot;&gt;Grandfather Clause&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These terms have been looked at for needing to be changed and &lt;a href=&quot;https://www.zotero.org/groups/2554430/ach_inclusive_technology/items/K6BFUBHB/item-details&quot;&gt;there are a lot of articles that can be found here&lt;/a&gt; if you&#39;re not convinced like I am after doing my research.&lt;/p&gt;
&lt;h2 id=&quot;just-stop-already&quot; tabindex=&quot;-1&quot;&gt;Just Stop Already&lt;/h2&gt;
&lt;p&gt;Stop using &amp;quot;dark&amp;quot;. It&#39;s easy to do. Maybe it is not easy for those that are still using &amp;quot;master&amp;quot; in their git repos or those that cling to the Indigenous mascots that &amp;quot;aren&#39;t hurting anyone&amp;quot; in sports/schools, or those that do the tomahawk chop in Atlanta or at Florida State University, or in Kansas City. If you&#39;re resistant to change, because &amp;quot;words is words&amp;quot; than quit reading this and go on with your day. If it&#39;s made you think a little, I challenge you to think more and think harder.&lt;/p&gt;
&lt;p&gt;People can do this. We are capable of adaptating and change. We&#39;re in a world that is so divided but the fact of the matter is we all have to be here until we are not. So why not make it a lot more inclsuive and a lot more accessible for everyone instead of being a remarkably mediocre white dudes game? For anyone else who isn&#39;t white, how easy is it for you just to adopt a new term that reflects a change?&lt;/p&gt;
&lt;h2 id=&quot;disagree.-that&#39;s-your-right&quot; tabindex=&quot;-1&quot;&gt;Disagree. That&#39;s Your Right&lt;/h2&gt;
&lt;p&gt;You can read this article and say to yourself, &lt;em&gt;&amp;quot;What a load of bullshit. This guy has no idea of what he&#39;s talking about.&amp;quot;&lt;/em&gt; That&#39;s your right and that&#39;s your opinion and you&#39;re &lt;strong&gt;entitled&lt;/strong&gt; to that opinion. Notice I bolded the word &amp;quot;entitled&amp;quot;. I did that for a reason. What may not affect you, may affect others. So before you go sounding off on your soapbox on a tangent about how it is not racist (nor do I ever mention it &lt;strong&gt;is&lt;/strong&gt; racist, I mention the connotation of racism).&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://medium.com/@shaundmorris/to-change-scrum-master-or-not-to-change-scrum-master-that-is-the-question-8b503cd43e89&quot;&gt;A great article here by Shaun Morris mentions at the end&lt;/a&gt;:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Ironically many opposing changing the terms have the same mindset as those who oppose Agile: resistance to change. “This is how it has always been”. In fact the Agile Manifesto asks us to be “Responsive to Change over following the Plan.” Isn’t systemic racism after 400 years a plan worth changing? In the National Football League, many people did not understand why Colin Kaepernick took a knee during the National Anthem. Today, many are beginning to understand him. Many technologists are looking at changing the terminology and subsequently the culture. Similar to Kaepernick’s situation, many people do not understand why they would want to change technical terminology. Instead there will be outrage at the suggestion. “Imagine the amount of work will take”. “We are going way too far with this”. “People are too sensitive”. Before you rush into judgment I ask you to consider why people are asking for changes. Some will affectively end the conversation and dismiss the core issue outright. Remember underrepresented people do not get the choice to dismiss the core issue of bigotry and systemic racism. It comes when we are out on a casual walk (Elijah McClain) or on a jog (Ahmaud Arbery). It comes when we are sitting in a car (George Floyd). It comes in the dead of night while we are a sleep (Breonna Taylor). It is no respecter of our location. It does not discriminate in favor of our time or convenience. Underrepresented people do not have the choice to dismiss this core issue and go back to work or coding. This type of change gives framework leaders the opportunity to clearly articulate that they support zero tolerance for racism and bigotry.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;So you can still disagree, or you can do your research. I did. Inclusivity and accessibility means everyone can be welcome and feel like they belong, not just a select few.&lt;/p&gt;
&lt;p&gt;And as the NCSC&#39;s Technical Director Ian Levy says &lt;a href=&quot;https://www.ncsc.gov.uk/blog-post/terminology-its-not-black-and-white&quot;&gt;in this article&lt;/a&gt;:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&amp;quot;If you’re thinking about getting in touch saying this is political correctness gone mad, don’t bother.&amp;quot;&lt;/p&gt;
&lt;/blockquote&gt;
</content>
	</entry>
	
	<entry>
		<title>What I Have Learned With Ionic</title>
		<link href="https://toddl.dev/posts/what-i-have-learned-with-ionic/"/>
		<updated>Fri, 17 Mar 2023 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/what-i-have-learned-with-ionic/</id>
		<content type="html">&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1679077487/ionic_logotype_blue_jde7di.png&quot; alt=&quot;The Ionic logo in blue&quot; /&gt;&lt;/p&gt;
&lt;p&gt;So for the past three-plus months, I have been diving into Ionic and Vue, but namely, getting a good grasp of Ionic and what the company has to offer developers. It is amazing.&lt;/p&gt;
&lt;h2 id=&quot;a-little-history&quot; tabindex=&quot;-1&quot;&gt;A Little History&lt;/h2&gt;
&lt;p&gt;When I decided to write my own application for mobile, I looked at a few solutions that are readily available out there. React Native, Flutter, and some others but I had to take into consideration that I have to learn (and in some cases re-learn) some languages and frameworks.&lt;/p&gt;
&lt;p&gt;My development skills took a hit over the past three years of continuous accessibility work and audits and I got really rusty. My real development chops left off at such languages as PHP, MySQL, and around the time I got around to brushing up on the latest, React was in the early stages of version 16 (16.3.whatever).&lt;/p&gt;
&lt;p&gt;I had also toyed with 1.X versions of Angular but stopped after v4 and I didn&#39;t get to Vue until v2 (2.4 or 2.5-ish) and stopped before v3. So I didn&#39;t quite get familiar with any of the &amp;quot;big 3&amp;quot;.&lt;/p&gt;
&lt;p&gt;So I chose Ionic because I could craft PWAs, hybrid and cross-platform mobile apps and it could also (and does) create iOS and Android apps that seamlessly work together. Ionic also lets you employ various UI elements in the application framework (filtration, navigation, inputs, etc.) and I could use Ionic with Angular, Vue, or React which seemed like a bonus.&lt;/p&gt;
&lt;h2 id=&quot;ionic-makes-me-think-back&quot; tabindex=&quot;-1&quot;&gt;Ionic Makes Me Think Back&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://toddl.dev/posts/ionic-and-vue-part-one/&quot;&gt;I started tinkering around with Ionic&lt;/a&gt; and of course, I have yet to follow up with an article on my progress (coming soon!) but it reminds me a lot of &lt;a href=&quot;https://coldfusion.adobe.com/&quot;&gt;ColdFusion&lt;/a&gt; and it is because of the custom tags. ColdFusion with their tags:&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;cfset&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;firstName&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;Todd&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 tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;cfif&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;firstName&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;eq&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;&quot;Todd&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    I don&#39;t care for lobster rolls at all.
  &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;cfif&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;and Ionic with their tags:&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;ion-header&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;ion-toolbar&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;ion-title&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
        Contact Form
      &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;ion-title&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;ion-toolbar&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;ion-header&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;ion-content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;ion-item&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;*ngIf&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;isLoggedIn; else login&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 tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;ion-label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Welcome, !&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;ion-label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;ion-item&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;ng-template&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;#login&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;ion-item&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;ion-label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Please log in to continue.&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;ion-label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;ion-item&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;ng-template&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;ion-content&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;A lot different that I know of so far, but the custom tags are what make me think of CFML (ColdFusion Markup Language). I stopped developing in ColdFusion at version 6 (MX 6 as it was called which was associated with the Macromedia branding). After that, CF and Windows development I felt wasn&#39;t for me and I went back to PHP.&lt;/p&gt;
&lt;h2 id=&quot;ionic-makes-learning-and-mobile-development-fun&quot; tabindex=&quot;-1&quot;&gt;Ionic Makes Learning and Mobile Development Fun&lt;/h2&gt;
&lt;p&gt;I went with Vue and Ionic. Vue had a good reputation for accessibility and Ionic takes accessibility seriously. That&#39;s what drew me to the both of these. &lt;a href=&quot;https://webaim.org/projects/million/#frameworks&quot;&gt;Vue has slipped a bit in the accessibility area according to the WebAIM Million Report&lt;/a&gt; so that&#39;s of a concern for me while React and Angular have improved and I may make the decision to move to one of those after this little experiment.&lt;/p&gt;
&lt;p&gt;But the learning has been fun. &lt;a href=&quot;https://ionic.io/docs&quot;&gt;Ionic&#39;s docs are great&lt;/a&gt; there is a lot I am familiarizing myself with like Capacitor, Appflow, Portals, etc. I even contributed a little bit to the accessibility guide. Learning something I thought I&#39;d never get into has been the best part.&lt;/p&gt;
&lt;h2 id=&quot;what-is-ionic%3F&quot; tabindex=&quot;-1&quot;&gt;What is Ionic?&lt;/h2&gt;
&lt;p&gt;Ionic is a cross-platform mobile SDK which lets developers create mobile applications, micro applications, and even custom component libraries using open web technologies and everyday, well-known and widely used tools, languages, and frameworks (React, Angular, and Vue).&lt;/p&gt;
&lt;h2 id=&quot;why-i-am-learning-and-using-ionic&quot; tabindex=&quot;-1&quot;&gt;Why I Am Learning And Using Ionic&lt;/h2&gt;
&lt;p&gt;Accessibility. Ionic puts their best foot forward with accessibility. I won&#39;t speculate how the other technologies go about accessibility but Ionic does it right. I mean, &lt;a href=&quot;https://ionic.io/docs/accessibility&quot;&gt;look at their accessibility guide&lt;/a&gt; for great insight how they treat accessibility. This is the major reason behind my decision.&lt;/p&gt;
&lt;p&gt;Performance. The SDK is used by companies to build highly performant apps. Target, Panda Express, InstantPot to name a few (apps I use). I haven&#39;t checked metrics or seen the numbers against other mobile frameworks, I only have what I have gone off of. Usage. Those apps I named above seem to run much faster than some, if not most of my other apps I use.&lt;/p&gt;
&lt;p&gt;Other factors. I know there is a focus on app delivery (Appflow) and security which is super-important as well. I like the focus on all these as a company.&lt;/p&gt;
&lt;p&gt;Community. I have joined the Discord server and been to some of the webinars and live events. The community is welcoming and super helpful. A strong and kind community is something that was also critical in my search.&lt;/p&gt;
&lt;p&gt;Development. I can do my thing in HTML and CSS I can learn how to implement Ionic with Angular or Vue, and even React if I choose. I have choices. I like that aspect, I get to learn while doing which is how I learn best.&lt;/p&gt;
&lt;h2 id=&quot;wait.-appflow%3F-capacitor%3F-portals%3F&quot; tabindex=&quot;-1&quot;&gt;Wait. Appflow? Capacitor? Portals?&lt;/h2&gt;
&lt;p&gt;So in my extensive reading of everything I could pour over, here is what I understand of each of these technologies:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://capacitorjs.com/&quot;&gt;Capacitor&lt;/a&gt; is a mobile cross-platform runtime (designed to work in multiple platforms) which uses modern web tools designed to run on iOS, Android, and others that creates Web Native apps. The thing I like (that I really like) is that Capacitor stays close to web standards as possible.&lt;/p&gt;
&lt;p&gt;If it works in a browser, it works on mobile while using Capacitor. Capacitor does not require the Ionic framework to work with it. Ionic UI components may improve the app that is being built. I had to do a little history lesson when researching which turned out this.&lt;/p&gt;
&lt;p&gt;Adobe had PhoneGap, which bridged web apps with native capability. PhoneGap was donated to the Apache Foundation and renamed it Cordova. Capacitor is an alternative to Cordova. There are some similarities, but that is as much as I know.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://stenciljs.com/&quot;&gt;Stencil&lt;/a&gt; allows you to build reusable design systems. Since I&#39;ve been helping organizations make their design systems accessible, this intrigues me. You can generate performant web components with Stencil that can run everywhere and are framework agnostic. Which is pretty awesome.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://ionic.io/appflow&quot;&gt;Appflow&lt;/a&gt; is an easy way to build and deploy your apps. It automates a lot of the process and you can build, deploy, and ship faster through Appflow. It is a cloud platform and you can build apps with Cordova, Capacitor, and React Native with Appflow.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://ionic.io/portals&quot;&gt;Portals&lt;/a&gt; lets developers add web-based experiences to native mobile apps. There is also mention of better collaboration, and safe web experiences but that is as much as I know. I wasn&#39;t able to read too far into that but that is definitely on my list.&lt;/p&gt;
&lt;p&gt;Ionic also has a CI/CD service, an auth service for SSO (Single Sign-On), Trapeze which I haven&#39;t read into, along with Ionicons (handcrafted icons for Ionic apps and apps in general), and I could have sworn there was one other project they announced (they being Ionic) but I am drawing a blank at the time of this writing.&lt;/p&gt;
&lt;h2 id=&quot;what-i-am-building%3F&quot; tabindex=&quot;-1&quot;&gt;What I Am Building?&lt;/h2&gt;
&lt;p&gt;I can&#39;t say other than it is an app and it has to do with lobster rolls. That&#39;s all I&#39;ll say. You didn&#39;t expect anything less or me to actually spill, did you?&lt;/p&gt;
&lt;p&gt;Though as I write this article, I really am thinking of switching to the more accessible Angular or React. Leaning heavily to Angular. That I will have to think about.&lt;/p&gt;
&lt;p&gt;You&#39;ll be able to find some of the best in Maine... that&#39;s all I&#39;ll say for now.&lt;/p&gt;
&lt;h2 id=&quot;what-else%3F&quot; tabindex=&quot;-1&quot;&gt;What Else?&lt;/h2&gt;
&lt;p&gt;Well, I&#39;d like to get into DevRel (Developer Relations) once I transition out of accessibility. I&#39;ll always advocate for accessibility, but as someone that has spent the past two years going to conferences and speaking to people about the importance of accessibility, I think that is something I would love to do for a company.&lt;/p&gt;
&lt;p&gt;My main goal. Get hired by a company that will allow me to travel to and speak at conferences on the importance of accessibility or making mobile apps accessible or whatever. Just being there and educating at this point in my career. I&#39;ll even be more than happy to do booth duty and talk with people.&lt;/p&gt;
&lt;p&gt;Maybe for Ionic? Maybe for another company? Maybe it may be time for me to hang up the whole tech career? I don&#39;t know yet. I do know that I am having fun learning and getting back to my roots of development and coding. Ionic brought out the Todd from the early days that &lt;strong&gt;LOVED&lt;/strong&gt; to code and learn.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Stepping Out</title>
		<link href="https://toddl.dev/posts/stepping-out/"/>
		<updated>Wed, 12 Apr 2023 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/stepping-out/</id>
		<content type="html">&lt;h2 id=&quot;it&#39;s-a-great-song!&quot; tabindex=&quot;-1&quot;&gt;It&#39;s a great song!&lt;/h2&gt;
&lt;p&gt;Joe Jackson has a timeless catchy tune with that one. That&#39;s not what this is about though. This is about me and stepping out of the accessibility space and time for a change.&lt;/p&gt;
&lt;p&gt;It&#39;s been a bit. I&#39;ve been thinking about this and where I want to go moving forward in the next few months, that&#39;s not in the direction that I am currently in. It&#39;s a total &amp;quot;back to square one&amp;quot; type thing. Back to where I was over forty years ago when I first sat in front of a Commodore PET 2001 Series computer and wondered how this screen was taking information from a cassette tape and making a game appear on the screen.&lt;/p&gt;
&lt;p&gt;The last couple of days has solidified that I am making the right call. I want that nine year old kid I used to be back. The passion, the fire, the curiosity. I &lt;strong&gt;need&lt;/strong&gt; that. I &lt;strong&gt;want&lt;/strong&gt; that.&lt;/p&gt;
&lt;h2 id=&quot;burn-out&quot; tabindex=&quot;-1&quot;&gt;Burn Out&lt;/h2&gt;
&lt;p&gt;It is also about burn out. I am trying to get out of that hole currently and it seems every time I make progress, something or someone comes out of the weeds and throws a wrench into the works. It&#39;s time for change. Which means it is time for me to leave accessibility. Not advocacy, but the work. I can&#39;t do it anymore. It&#39;s Sisyphean at this point for me. no matter how much time I take off.&lt;/p&gt;
&lt;p&gt;I&#39;m no longer interested in auditing or remediation. I have done too much of it the past decade, too much of it, and I am out of gas. I am beyond exhausted.&lt;/p&gt;
&lt;h2 id=&quot;now-what%3F&quot; tabindex=&quot;-1&quot;&gt;Now What?&lt;/h2&gt;
&lt;p&gt;I have some irons in the fire. Make it known I am set on getting a job in Developer Relations or Developer Experience. I have my goal set on one company that I have been engrossed in their documentation for a few months now. I have my resume out and some interviews have been had, but my goal.&lt;/p&gt;
&lt;p&gt;That goal is where I want to be in a few months. Because I know that I can excel at it, I know I&#39;d be good at it, and I know the 12 year old Todd who would pull all-nighters and study code and read computer books, manuals, magazines, take apart computers and put them back together again, I know that kid would be back and the curiosity will return which drove the fire under me.&lt;/p&gt;
&lt;p&gt;It isn&#39;t up to me to decide, that&#39;s not in my control. My control lies in how I get there and present myself.&lt;/p&gt;
&lt;p&gt;I want to be able to read minds, but at this point, I need to not overthink it. The way I am made up though, I overthink as good as the best of the rest.&lt;/p&gt;
&lt;h2 id=&quot;fin&quot; tabindex=&quot;-1&quot;&gt;Fin&lt;/h2&gt;
&lt;p&gt;I hope to have a better picture in July as to where I am and what I am doing because right now, I&#39;m a bit lost. I can admit it. I don&#39;t feel like I have a home. I have a speaker family and I have a great group of friends that support me, but I am a bit cut off from where I want to be.&lt;/p&gt;
&lt;p&gt;I hope to get there and report back soon. Send some positive vibes this way, I could sure use them.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Ionic and Vue, Part Two</title>
		<link href="https://toddl.dev/posts/ionic-and-vue-part-two/"/>
		<updated>Wed, 26 Apr 2023 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/ionic-and-vue-part-two/</id>
		<content type="html">&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1670038063/images/vue-ionic-logos.png&quot; alt=&quot;The Ionic Framework logo, a blue circle enclosed in a thick blue, incomplete line with a small blue ball rotating around the center circle, next to the Vue JS logo, a V-shaped logo with a light green V and a slate grey blue smaller V sitting inside the large V-shape.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;It has been a bit, but following up on the &lt;a href=&quot;https://toddl.dev/posts/ionic-and-vue-part-one/&quot;&gt;first part&lt;/a&gt; of this series, I&#39;m going to be diving into file structure, so pitter patter, let&#39;s get at &#39;er!&lt;/p&gt;
&lt;h2 id=&quot;file-structure&quot; tabindex=&quot;-1&quot;&gt;File Structure&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;NOTE: This is an introductory overview and this section is from the generated files and folders from running the ionic start command. There are more folders and more comprehensive ways to set things up. This is my experience through the Ionic CLI.&lt;/p&gt;
&lt;p&gt;This also takes into consideration you have familiarity with the node_modules folder and test folder if you&#39;re testing with Jest and/or Cypress. I will be going over the testing stuff later on in this series.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id=&quot;src&quot; tabindex=&quot;-1&quot;&gt;src&lt;/h2&gt;
&lt;p&gt;This folder is where the bulk of the work will be done to create your application. This folder is where much of the work, and frankly nearly all of the work will be done in.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1682433572/vue-example.png&quot; alt=&quot;The file structure shown for a Vue and Ionic template showing files in the src folder.&quot; /&gt;&lt;/p&gt;
&lt;h2 id=&quot;router&quot; tabindex=&quot;-1&quot;&gt;router&lt;/h2&gt;
&lt;p&gt;The &lt;code&gt;router&lt;/code&gt; folder is where all the routes are kept, added, and each route has its View component with route name. So the &lt;code&gt;index.ts&lt;/code&gt; file will point to the &lt;code&gt;HomePage.vue&lt;/code&gt; file. The route points to the HomePage view.&lt;/p&gt;
&lt;p&gt;The &lt;code&gt;Home&lt;/code&gt; route is defined as the default path.&lt;/p&gt;
&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; HomePage &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;../views/HomePage.vue&#39;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id=&quot;theme&quot; tabindex=&quot;-1&quot;&gt;theme&lt;/h2&gt;
&lt;p&gt;This is the folder that holds the stylesheets for your project. You can &lt;a href=&quot;https://ionicframework.com/docs/theming/basics&quot;&gt;find out more about theming&lt;/a&gt; from the Ionic docs here.&lt;/p&gt;
&lt;p&gt;Global theming for the project can be defined here, Ionic has such names as &lt;code&gt;success&lt;/code&gt;, &lt;code&gt;danger&lt;/code&gt;, &lt;code&gt;warning&lt;/code&gt;, and more for colors for different elements in the UI.&lt;/p&gt;
&lt;h2 id=&quot;views&quot; tabindex=&quot;-1&quot;&gt;views&lt;/h2&gt;
&lt;p&gt;The &lt;code&gt;views&lt;/code&gt; folder is what is render for what page. &lt;code&gt;HomePage.vue&lt;/code&gt; is rendered when the &lt;code&gt;Home&lt;/code&gt; route is defined in the &lt;code&gt;index.ts&lt;/code&gt; file. The same would be for &lt;code&gt;ContactPage.vue&lt;/code&gt;, &lt;code&gt;AboutPage.vue&lt;/code&gt;, and others.&lt;/p&gt;
&lt;p&gt;The home page code looks something like this:&lt;/p&gt;
&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;template&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;ion&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;page&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;ion&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;header &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;translucent&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;true&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;ion&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;toolbar&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
        &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;ion&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;title&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;Blank&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;ion&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;title&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;ion&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;toolbar&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;ion&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;header&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;

    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;ion&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;content &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;fullscreen&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;true&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;ion&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;header collapse&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;condense&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
        &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;ion&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;toolbar&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
          &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;ion&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;title size&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;large&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;Blank&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;ion&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;title&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
        &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;ion&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;toolbar&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;ion&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;header&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;

      &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;div id&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;container&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
        &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;strong&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;Ready to create an app&lt;span class=&quot;token operator&quot;&gt;?&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;strong&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
        &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;Start &lt;span class=&quot;token keyword&quot;&gt;with&lt;/span&gt; Ionic
          &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;a
          target&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;_blank&quot;&lt;/span&gt;
          rel&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;noopener noreferrer&quot;&lt;/span&gt;
          href&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;https://ionicframework.com/docs/components&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
          &lt;span class=&quot;token constant&quot;&gt;UI&lt;/span&gt; Components
          &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;a&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
        &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;p&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;div&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;ion&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;content&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;ion&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;page&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;template&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;

&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;script setup lang&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;ts&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; IonContent&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; IonHeader&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; IonPage&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; IonTitle&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; IonToolbar &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;@ionic/vue&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;script&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;

&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;style scoped&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
#container &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  text&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;align&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; center&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token literal-property property&quot;&gt;position&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; absolute&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token literal-property property&quot;&gt;left&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token literal-property property&quot;&gt;right&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token literal-property property&quot;&gt;top&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;50&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;%&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token literal-property property&quot;&gt;transform&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;translateY&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;50&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;%&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;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

#container strong &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  font&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;size&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; 20px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  line&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;height&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; 26px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

#container p &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  font&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;size&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; 16px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  line&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;height&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; 22px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token literal-property property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; #8c8c8c&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token literal-property property&quot;&gt;margin&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&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;

#container a &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  text&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;decoration&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; none&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;style&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;I won&#39;t go into the specifics here until another installment of this series, but it won&#39;t be too long before I dive into that part.&lt;/p&gt;
&lt;h2 id=&quot;next-steps&quot; tabindex=&quot;-1&quot;&gt;Next Steps&lt;/h2&gt;
&lt;p&gt;Again, this was a very high-level overview of the file structure of the Ionic/Vue application and the major parts of the folder structure.&lt;/p&gt;
&lt;p&gt;I&#39;ll get more into the deeper parts of the template files, router, and more later in the series.&lt;/p&gt;
&lt;!-- [Part three of the series is here if you want to read on](https://toddl.dev/posts/ionic-and-vue-part-three.md) --&gt;
</content>
	</entry>
	
	<entry>
		<title>The Perpetual Circle of Accessibility</title>
		<link href="https://toddl.dev/posts/the-perpetual-circle-of-accessibility/"/>
		<updated>Tue, 05 Sep 2023 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/the-perpetual-circle-of-accessibility/</id>
		<content type="html">&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1693938299/frustration.jpg&quot; alt=&quot;A man holding his glasses in his hands while rubbing the bridge of his nose in frustration.&quot; /&gt;&lt;/p&gt;
&lt;h2 id=&quot;the-history&quot; tabindex=&quot;-1&quot;&gt;The History&lt;/h2&gt;
&lt;p&gt;In the time I have been practicing accessibility, whether it was behind-the-scenes in a not-so-public way of putting myself out there like I did for most of my career or whether it is like it is now with me. Writing articles, giving conference talks, appearances on podcasts and streams.&lt;/p&gt;
&lt;p&gt;The fact of the matter is this. I have had to repeat myself it seems a million times over. And over. And over it seems year after year after year since 1999. That&#39;s 24 years if you&#39;re keeping score.&lt;/p&gt;
&lt;p&gt;It is the same items of order. Low contrast of text, alternative text of images, empty buttons or input labels. Empty links and missing document language attributes.&lt;/p&gt;
&lt;p&gt;Sound familiar? Well if it does, then you know. If it does not, then &lt;a href=&quot;https://webaim.org/projects/million/&quot;&gt;I shall point you to the WebAIM Million Report&lt;/a&gt; which only goes back the past five years. I can tell you with conviction that I have been harping these things over and over for longer than that. Ten-plus years at least.&lt;/p&gt;
&lt;h2 id=&quot;the-question&quot; tabindex=&quot;-1&quot;&gt;The Question&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;Why do accessibility professionals scream at us when we…&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;I am not going to speak for the accessibility community as a whole, but if my colleagues and accessibility professionals agree, then you can bank on it.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;We have told you over and over again. Time after time, year after year. Most of you do not listen or care enough to listen.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Or when you see something we post, like &lt;em&gt;&amp;quot;Hey, if you&#39;re doing this, please don&#39;t. Please do that.&amp;quot;&lt;/em&gt; and then you post:&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1693929327/a11y.jpg&quot; alt=&quot;A post about accessibility professionals not telling developers what to do when something is not done to their understanding&quot; /&gt;&lt;/p&gt;
&lt;p&gt;As you see in my reply, I have told you. I have posted on my blogs, on other sites, on message boards and in social media circles about what to do but you do not listen or you do not care enough to listen. Maybe you do?!&lt;/p&gt;
&lt;p&gt;Maybe, you care enough to actually see it, but you do not retain the information, and then when you see another post, you ask me again (yes, this happens!).&lt;/p&gt;
&lt;p&gt;I have told you. I have seen the suggestions, the tutorials, the guides on how to make something accessible without mucking it up and yet, 95-99% of the internet is &lt;em&gt;still&lt;/em&gt; inaccessible (I lean towards 99%).&lt;/p&gt;
&lt;p&gt;The reasons are your own, but when you snap back at me with &amp;quot;Why do you scream at us, tell us what we&#39;re doing wrong!&amp;quot; I have. I mean, &lt;strong&gt;I have&lt;/strong&gt;.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&amp;lt;button&gt;This is a cool button&amp;lt;/button&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;is more accessible and easier to implement than:&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&amp;lt;div
  role=&lt;span class=&quot;token string&quot;&gt;&quot;button&quot;&lt;/span&gt;
  aria-label=&lt;span class=&quot;token string&quot;&gt;&quot;A button as a CTA&quot;&lt;/span&gt;
  aria-labelledby=&lt;span class=&quot;token string&quot;&gt;&quot;IdOfSomethingUnrelated&quot;&lt;/span&gt;
  onClick=&lt;span class=&quot;token string&quot;&gt;&quot;Do something JavaScripty()&quot;&lt;/span&gt;
&gt;
    This is a div disguised as a button
&amp;lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;A div has no semantic meaning. More often, you see a &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; as a &amp;quot;wrapper&amp;quot; in the times since HTML5. That one container to rule them all. Then you get into your HTML5 landmark elements (e.g., &lt;code&gt;&amp;lt;main&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;nav&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;footer&amp;gt;&lt;/code&gt;, etc.). But I &lt;strong&gt;have&lt;/strong&gt; told you.&lt;/p&gt;
&lt;h2 id=&quot;the-examples&quot; tabindex=&quot;-1&quot;&gt;The Examples&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;Please put alternative text on the image you posted on Twitter.&lt;/p&gt;
&lt;p&gt;Please use better contrast for the text on this because I cannot read it.&lt;/p&gt;
&lt;p&gt;Screen reader technology will not read a label because you have forgotten it.&lt;/p&gt;
&lt;p&gt;You are not shipping your machine. A screen reader will skip over all this.&lt;/p&gt;
&lt;p&gt;Who do you want to exclude when you make this inaccessible?&lt;/p&gt;
&lt;p&gt;Please use the button element. It is more accessible than a div.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;One example: Flashing video content on the former Twitter. I asked the original poster (OP), &lt;em&gt;&amp;quot;Please add a content warning for people that are prone to epileptic seizures and other vestibular issues, thank you.&amp;quot;&lt;/em&gt; Just to have some clown reply with &lt;em&gt;&amp;quot;Well then don&#39;t watch the video.&amp;quot;&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Well, it is easy for someone that is abled to say that and dismiss the disabled community with their ableism and ignorance. They do it every day online. Developers and designers included. More in the developer space than the designer space. Because &lt;em&gt;&amp;quot;move fast and break things&amp;quot;&lt;/em&gt; or &lt;em&gt;&amp;quot;coding is my life, here are ten reasons why you should do what I list here on Twitter.&amp;quot;&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;If you&#39;re going to blatantly dismiss the disabled community and exclude them, then prepare for that backlash. Because it is deserve and justified. Since the internet became public and more and more disabled people try to gain access, &lt;strong&gt;you&lt;/strong&gt; are the barrier.&lt;/p&gt;
&lt;p&gt;and there are many more examples. You don&#39;t have to look too far to find them on Twitter.&lt;/p&gt;
&lt;h2 id=&quot;the-burnout&quot; tabindex=&quot;-1&quot;&gt;The Burnout&lt;/h2&gt;
&lt;p&gt;Developers will experience burnout if they are not cognizant of the amount of work they are doing. It is inevitable. Well, accessibility professionals do too. Tenfold.&lt;/p&gt;
&lt;p&gt;I&#39;m tired. I&#39;m burnt out. I&#39;m sad, depressed, struggling, tired, tired, tired. I am the parent, developers and designers, and everyone at the organization(s) that I have to tell over and over again, are the child.&lt;/p&gt;
&lt;p&gt;I have scolded you, I&#39;ve finger-wagged, I&#39;ve publicly shamed, I have educated, I have suggested, I have done everything in my power until I am blue in the face and angry,  exhausted, and exasperated to try and get it through to you that accessibility for disabled people matters. You, most of you. The majority of you, have not listened. You don&#39;t care.&lt;/p&gt;
&lt;p&gt;I am burnt out. I&#39;m the beyond tired parent with all the children running around wreaking havoc. I need a vacation from you but I cannot because I have got to look over you and make sure you&#39;re not burning the house down. Yet, I don&#39;t know about the small fires that have already been set around the house. Only the small fires I can see in the room I&#39;m in.&lt;/p&gt;
&lt;h2 id=&quot;the-education&quot; tabindex=&quot;-1&quot;&gt;The Education&lt;/h2&gt;
&lt;p&gt;There are those that are happy to help and answer questions because they are passionate about accessibility and want a more accessible Web and a level playing field for people with disabilities. I&#39;m always happy to say, &amp;quot;Here is why this isn&#39;t an accessible solution…&amp;quot;&lt;/p&gt;
&lt;p&gt;There are those that will virtually spat at you and block you or admonish you, or scold you, or tell you to &lt;em&gt;&amp;quot;fuck off&amp;quot;&lt;/em&gt; (Yes, this has happened to me). Whatever their personal issues, leaving those aside, they are fed up way beyond what anyone can comprehend. Because they have been repeating themselves over and over and over again.&lt;/p&gt;
&lt;p&gt;The one&#39;s that help, the helpers? Just send me a DM, or a post and ask. Or do an internet search (search engines still exist. Fewer now than when I went online, but they are there!) for the solution! If you question that, please ask!&lt;/p&gt;
&lt;h2 id=&quot;the-solution&quot; tabindex=&quot;-1&quot;&gt;The Solution&lt;/h2&gt;
&lt;p&gt;Ask. Simply stated. Ask.&lt;/p&gt;
&lt;h2 id=&quot;the-takeaway&quot; tabindex=&quot;-1&quot;&gt;The Takeaway&lt;/h2&gt;
&lt;p&gt;There is a group of people that need a fair and equal Web, the disabled community. For decades, they have been fighting on and off the Web for equal access. Hardly anyone listens. If anyone does listen, how many of them act on that? A few.&lt;/p&gt;
&lt;p&gt;You see a post, it suggests something but doesn&#39;t explain why, but you don&#39;t use the back channels to ask. That is on &lt;strong&gt;you&lt;/strong&gt; that is not on the person that posted the suggestion without a solution. Just because you cannot see it does not mean that it is not there. It is.&lt;/p&gt;
&lt;p&gt;It is a never-ending perpetual circle of grief and pain for me that I have to look at something online and pass it by because I have said it a billion times, &lt;em&gt;&amp;quot;Use alternative text for your images for people who use screen reader technologies or assistive tech, please&amp;quot;&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;It&#39;s the constant merry-go-round that you get spinning so fast, you jump on and spin for an hour and you feel ill and like you are going to throw up.&lt;/p&gt;
&lt;p&gt;That is the current state of accessibility. Every time someone ignores a suggestion, I get ill. Because that person doesn&#39;t care. Accessibility is a right, &lt;strong&gt;NOT&lt;/strong&gt; a privilege.&lt;/p&gt;
&lt;p&gt;That said, you wonder why we shout it out on socials? Read this article again.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Dear Molly</title>
		<link href="https://toddl.dev/posts/dear-molly/"/>
		<updated>Wed, 06 Sep 2023 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/dear-molly/</id>
		<content type="html">&lt;h2 id=&quot;cw%3A-death&quot; tabindex=&quot;-1&quot;&gt;CW: Death&lt;/h2&gt;
&lt;p&gt;Molly Holzschlag passed away yesterday at age 60 in Tucson, Arizona. As I sit and type and get choked up, I cannot even begin to tell you about how someone I looked to and who helped me become who I am today, meant to me, especially after corresponding with Molly the last three years. Two, with me in Arizona.&lt;/p&gt;
&lt;p&gt;I learned of Molly&#39;s passing through social media yesterday and for some reason, although we had talked and chatted since at least 2004, it has hit me harder than most passings I have been through.&lt;/p&gt;
&lt;p&gt;We had always chatted about the Web, I had interviewed Molly for the podcast, and we chatted and were friends on Facebook where we exchanged messages.&lt;/p&gt;
&lt;p&gt;I had always said to Molly, &lt;em&gt;&amp;quot;When I can I want to come out to Arizona and meet you and just talk about the good old days of the Web.&amp;quot;&lt;/em&gt; and in Molly fashion we went into a dive into the good and the bad of the Web.&lt;/p&gt;
&lt;p&gt;Those were our conversations. Then I moved to Phoenix in 2021. I had got in touch and had tried unsuccessfully a few times to see Molly, but either she wasn&#39;t feeling well, it wasn&#39;t a good time for her, I respected the fact she was going through what she went through and we had cancelled a few times.&lt;/p&gt;
&lt;p&gt;When we did exchange telephone numbers and speak on the phone, I could hear the pain and said, &lt;em&gt;&amp;quot;It is okay. There will be another day.&amp;quot;&lt;/em&gt; Well, there will not be another day and this makes me incredibly sad.&lt;/p&gt;
&lt;p&gt;When we had our chat for the podcast, before and after we talked about the people that she blazed the trail with. Dave Shea, Eric Meyer, Jeffrey Zeldman, and the list goes on and on. &lt;a href=&quot;https://twitter.com/mholzschlag/status/1528580765675450374?s=20&quot;&gt;The face-to-face showdowns with Bill Gates numerous times about Internet Explorer&lt;/a&gt;, calling her &amp;quot;the annoying web standards girl&amp;quot;, the conferences and speaking, and owning the stage.&lt;/p&gt;
&lt;p&gt;We discussed behind the scenes with Aaron Gustafson about reviving the Web Standards Project and wanted to do something(time permitting) starting near the end of the year or next year.&lt;/p&gt;
&lt;p&gt;If you knew Molly and knew her well, I envy you. She was a bright light and a magnum opus all her own. If you did not know Molly, or are new to the game of the Web, familiarize yourself with what Molly was able to accomplish in her lifetime that would take others countless lifetimes. We would not be here if it was not for the tour de force Molly was.&lt;/p&gt;
&lt;p&gt;Molly has been described as &lt;em&gt;&amp;quot;a force of nature&amp;quot;&lt;/em&gt; and I have to say, nature doesn&#39;t have anything on what and who Molly was and forever will be. She leaves an indelible mark on the Web.&lt;/p&gt;
&lt;p&gt;Molly was one of the first few I got the courage to converse with via comments on her site and although I never got to attend a conference she spoke at, I followed her with the fervor she had when she advocated for web standards. She taught me from far away as much as she taught me the last two years in the same state mere hours away.&lt;/p&gt;
&lt;p&gt;The world is a little less brighter, the world has lost a force never seen before and maybe never will. Molly is looking from beyond and still telling us to get our shit together. She looked death in the face and laughed. She is finally with her Ray now.&lt;/p&gt;
&lt;p&gt;Rest easy, dear Molly. Rest peacefully. ♥&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Whataboutism</title>
		<link href="https://toddl.dev/posts/whataboutism/"/>
		<updated>Fri, 15 Sep 2023 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/whataboutism/</id>
		<content type="html">&lt;blockquote&gt;
&lt;p&gt;What about it? This doesn’t need accessibility.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;The amount of ego doesn’t surprise me when the conversation of accessible code arises. Code, in any stage, from alpha all the way to production needs to be, should be, and can be made accessible. But a subset of the developer community, a rather large subset seems to think otherwise.&lt;/p&gt;
&lt;p&gt;Thinking that there is no such thing as a disabled developer is on par with thinking we are the only living organism in the entire universe. That level of ego makes part of the reason why the Web and digital world is inaccessible. Those people would rather go to the grave thinking they are right, rather than be wrong.&lt;/p&gt;
&lt;p&gt;We don’t talk about it much these days.&lt;/p&gt;
&lt;p&gt;“This product uses AI and it will ship production-ready code!” but when challenged, they (the developer subset with egoism at the forefront) come out of the woodwork to attack people and argue with people that are pointing out the fact  that is in fact a falsity.&lt;/p&gt;
&lt;p&gt;That’s just one example of why without education and research, the Web is doomed to be inaccessible even more than it already is.&lt;/p&gt;
&lt;p&gt;If those who egos aren’t checked at the door had their way, they’d ship their own computers and call it a day because, “It works on my machine!”. Hey Blaine, we’re not shipping &lt;strong&gt;YOUR&lt;/strong&gt; machine.&lt;/p&gt;
&lt;p&gt;If there were less ego from those that would rather die on the cross they make for themselves then maybe, just perhaps there would be a little more accessibility in the digital world. Yet, here we are and here I am writing what I can imagine will ignite some kind of firestorm in some ecosystem of keyboard wunderkind who can’t see beyond their own screens.&lt;/p&gt;
&lt;p&gt;“Oh, I agree there needs to be accessibility but…” You ended the hate with the key word in that sentence. “But”. A “but” is an underlying statement to prove to yourselves you are correct. The reassurance that you are right and the other side of the argument is wrong no matter what the facts are or what the data is.&lt;/p&gt;
&lt;p&gt;So when an accessibility professional says, “Hey, I just wanted to bring to your attention there are issues here. Accessibility concerns you want to address before making a a statement such as…” Stop going into a defensive posture and on the attack immediately.&lt;/p&gt;
&lt;p&gt;That’s not an attack, it is someone telling you there are issues that need to be fixed to make your product, your brand, your app, your site, accessible to people with disabilities.&lt;/p&gt;
&lt;p&gt;You created something more likely to make you money. That’s how tech works isn’t it? Then why would you shut out a subset of the population for whatever reasons because you didn’t want to make it accessible? Do a search for “disposable income of disabled persons”. You’d be surprised.&lt;/p&gt;
&lt;p&gt;And to devs that wonder why it matters so. Think of these times when and if you ever become disabled because it could happen at any time to any of us.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>AI and Accessibility, Transforming Digital Access for People with Disabilities</title>
		<link href="https://toddl.dev/posts/ai-and-accessibility/"/>
		<updated>Thu, 12 Oct 2023 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/ai-and-accessibility/</id>
		<content type="html">&lt;h2 id=&quot;the-promise-of-ai-powered-accessibility&quot; tabindex=&quot;-1&quot;&gt;The Promise of AI-Powered Accessibility&lt;/h2&gt;
&lt;p&gt;AI has fundamentally changed what&#39;s possible in assistive technology. Machine learning models can now perform tasks that once required human intervention or were simply impossible. Screen readers have become more sophisticated, accurately interpreting complex web layouts and dynamically generated content. Image recognition allows blind users to understand visual content in real-time through their smartphones. Speech recognition has reached accuracy levels that make voice control a viable alternative to traditional input methods for people with motor disabilities.&lt;/p&gt;
&lt;p&gt;The adaptive nature of AI represents perhaps its greatest strength. These systems learn from individual users, adjusting to speech patterns, writing styles, and interaction preferences. A person with atypical speech can train voice recognition to understand them specifically. Someone with cognitive disabilities can receive content simplified to their comprehension level. The technology molds itself to the person rather than forcing the person to adapt to rigid systems.&lt;/p&gt;
&lt;p&gt;Real-time processing capabilities have opened new doors. Live captioning powered by AI makes spontaneous conversations, video calls, and streaming content accessible to deaf and hard-of-hearing individuals in ways that were previously limited to scripted, pre-captioned content. Predictive text and autocomplete features help people with dyslexia, motor impairments, or cognitive disabilities communicate more efficiently.&lt;/p&gt;
&lt;h2 id=&quot;the-concerns-and-limitations&quot; tabindex=&quot;-1&quot;&gt;The Concerns and Limitations&lt;/h2&gt;
&lt;p&gt;However, AI accessibility tools carry significant drawbacks that cannot be ignored. Accuracy remains inconsistent, particularly for users from marginalized groups. Voice recognition systems frequently misunderstand accents, dialects, and non-standard speech patterns. Image description algorithms often misidentify objects or miss crucial context, potentially providing misleading information to blind users who rely on these descriptions to understand their environment.&lt;/p&gt;
&lt;p&gt;The bias embedded in AI systems poses serious equity concerns. Training data often underrepresents disabled people, people of color, women, and other marginalized groups. This results in systems that work better for some users than others, effectively creating a two-tiered accessibility experience. A voice assistant that struggles to understand a person with cerebral palsy or someone speaking with a strong regional accent fails at its fundamental purpose.&lt;/p&gt;
&lt;p&gt;Privacy concerns loom large. Many AI accessibility tools require constant data collection to function effectively, continuously listening, watching, or tracking user behavior. For disabled people who may have no alternative way to access certain services, this creates a coercive dynamic where privacy must be sacrificed for basic access. The data collected could reveal sensitive information about a person&#39;s disability, health conditions, or daily activities.&lt;/p&gt;
&lt;p&gt;Cost and infrastructure present additional barriers. Advanced AI tools often require expensive devices, high-speed internet connections, and ongoing subscription fees. This excludes disabled people who face higher rates of poverty and unemployment. The digital divide within the disabled community risks widening as AI-powered accessibility becomes the standard expectation.&lt;/p&gt;
&lt;p&gt;Overreliance on AI can also lead to the neglect of fundamental accessibility principles. Companies may treat AI as a silver bullet, using it to patch inaccessible designs rather than building accessibility into products from the ground up. Automated image descriptions, for example, should supplement rather than replace proper alt text written by content creators who understand context.&lt;/p&gt;
&lt;h2 id=&quot;long-standing-ai-accessibility-tools&quot; tabindex=&quot;-1&quot;&gt;Long-Standing AI Accessibility Tools&lt;/h2&gt;
&lt;p&gt;Several AI-powered accessibility tools have maintained presence for years now, demonstrating both longevity and continued evolution. &lt;a href=&quot;https://www.android.com/accessibility/live-transcribe/&quot;&gt;Google&#39;s Live Transcribe&lt;/a&gt;, launched in 2019, uses speech recognition to provide real-time captioning on Android devices. &lt;a href=&quot;https://www.microsoft.com/en-us/garage/wall-of-fame/seeing-ai/&quot;&gt;Microsoft&#39;s Seeing AI&lt;/a&gt;, also released in 2017, narrates the visual world for blind and low-vision users through their smartphone cameras, identifying objects, reading text, and describing scenes.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://developer.apple.com/documentation/accessibility/voiceover/&quot;&gt;Apple&#39;s VoiceOver&lt;/a&gt; screen reader has incorporated machine learning elements since at least 2019, using AI to improve image recognition and provide better descriptions of on-screen content. &lt;a href=&quot;https://www.nuance.com/dragon.html&quot;&gt;Dragon NaturallySpeaking&lt;/a&gt;, now &lt;em&gt;Dragon Professional&lt;/em&gt;, has used various forms of AI and machine learning for speech recognition since well before 2020, continuously improving its accuracy and adaptability.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://otter.ai/&quot;&gt;Otter.ai&lt;/a&gt;, launched in 2016, provides AI-powered transcription services used by deaf and hard-of-hearing students and professionals. While primarily a transcription tool, its accessibility applications have made it valuable in educational and workplace settings. Windows&#39; built-in voice typing and dictation features have incorporated increasingly sophisticated AI since their introduction in Windows 10.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.bemyeyes.com/&quot;&gt;Be My Eyes&lt;/a&gt; represents a particularly innovative approach to AI accessibility. Originally launched in 2015 as a platform connecting blind and low-vision users with sighted volunteers through video calls, the service evolved significantly with the introduction of its Virtual Volunteer feature in 2023. This AI-powered assistant uses advanced vision models to analyze images captured by users and answer questions about their surroundings, read labels, provide navigation guidance, and assist with countless daily tasks.&lt;/p&gt;
&lt;p&gt;The integration of AI hasn&#39;t replaced the human volunteer network but rather complements it, offering immediate assistance when volunteers aren&#39;t available or for quick queries that don&#39;t require human judgment. This hybrid model demonstrates how AI can enhance rather than eliminate human connection in accessibility services, providing both technological efficiency and the warmth of community support.&lt;/p&gt;
&lt;h2 id=&quot;impact-on-the-disabled-community&quot; tabindex=&quot;-1&quot;&gt;Impact on the Disabled Community&lt;/h2&gt;
&lt;p&gt;The impact of AI on disabled people&#39;s lives has been profound and multifaceted. For many, these tools have enabled independence that was previously difficult or impossible. A blind person can now identify currency, read handwritten notes, or navigate unfamiliar spaces with smartphone apps. Someone with severe motor impairments can control their entire digital environment through voice commands.&lt;br /&gt;
Educational access has improved dramatically. Students who struggle with traditional note-taking can use AI transcription. Those with reading disabilities benefit from text-to-speech that sounds natural rather than robotic. Language translation powered by AI helps deaf individuals who use sign language access content in spoken languages.&lt;/p&gt;
&lt;p&gt;Employment opportunities have expanded as AI tools enable disabled people to perform tasks that were once barriers to certain careers. Voice recognition allows those who cannot type to work in writing-intensive fields. Screen readers with better AI understanding enable blind programmers to navigate complex codebases more efficiently.&lt;/p&gt;
&lt;p&gt;However, the community remains divided on the net impact. Some disability advocates worry that AI perpetuates a &amp;quot;medical model&amp;quot; approach, trying to &amp;quot;fix&amp;quot; disabled people rather than addressing societal barriers. Others note that AI accessibility often focuses on individual solutions rather than pushing for universal design that benefits everyone.&lt;/p&gt;
&lt;p&gt;The rapid pace of AI development has created anxiety about being left behind. Disabled people and advocacy organizations often lack the resources to evaluate new tools, provide feedback, or influence development priorities. When AI systems are deployed without adequate testing with disabled users, the results can be frustrating or even dangerous.&lt;/p&gt;
&lt;h2 id=&quot;looking-forward&quot; tabindex=&quot;-1&quot;&gt;Looking Forward&lt;/h2&gt;
&lt;p&gt;The future of AI in accessibility will likely depend on how well the technology industry addresses current shortcomings. Meaningful involvement of disabled people in design and testing processes remains essential. Training data must become more representative. Privacy protections need strengthening. Business models should ensure that cost doesn&#39;t become a barrier to access.&lt;/p&gt;
&lt;p&gt;AI holds genuine potential to create a more accessible world, but only if deployed thoughtfully and ethically. The goal should not be to replace human-created accessibility or fundamental design principles, but to augment them. AI works best as one tool among many in a comprehensive approach to accessibility that centers the needs, preferences, and expertise of disabled people themselves.&lt;/p&gt;
&lt;p&gt;The conversation about AI and accessibility must continue to include the voices of those most affected. Their lived experiences provide insights that no algorithm can replicate, and their perspectives are essential for ensuring that technological progress truly serves everyone.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>&lt;section&gt; is the new &lt;div&gt;</title>
		<link href="https://toddl.dev/posts/section-is-the-new-div/"/>
		<updated>Thu, 12 Oct 2023 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/section-is-the-new-div/</id>
		<content type="html">&lt;p&gt;Note that there are times and places to use the &lt;code&gt;div&lt;/code&gt; and &lt;code&gt;section&lt;/code&gt; elements. This article addresses the need for more accessible solutions and fixes as well as the need to stop over-engineering things.&lt;/p&gt;
&lt;p&gt;There will be cases when repetition is necessary. But with the over-engineering I see when I do accessibility audits, and the rendered HTML I see that is choked with unnecessary containers and wrappers and elements that take up space and bytes, this is what this article addresses.&lt;/p&gt;
&lt;h2 id=&quot;remember-when%E2%80%A6&quot; tabindex=&quot;-1&quot;&gt;Remember when…&lt;/h2&gt;
&lt;p&gt;We used to have tables for layouts? Then we had the trusty &lt;code&gt;div&lt;/code&gt; element and it took off like a rocket! you see div soup as far as the eyes can see.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://media.giphy.com/media/i4JiDqwoV3A0ZO9d23/giphy.gif&quot; alt=&quot;A man with a blue shirt scanning the distance for something.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;So since this craze started taking hold, many developers are grabbing the reins and sowing the seeds in the fields of web pages with divs. Planting and nurturing them until their web site blooms fully. A garden of divs for everyone to see.&lt;/p&gt;
&lt;p&gt;Then the accessibility people said, &amp;quot;Wait a minute. Try not to use so many divs. They hold no semantic meaning and use semantic HTML elements like &lt;code&gt;section&lt;/code&gt; it is much better for accessibility.&amp;quot; Then the gardeners that are the developers started using the section element, and planting those seeds. And planting them. And planting them.&lt;/p&gt;
&lt;p&gt;Now we have a garden, not only overflowing with &lt;code&gt;div&lt;/code&gt; elements, but that same garden we call the Web is not choking with the overplanting of &lt;code&gt;section&lt;/code&gt; elements.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Well how do we achieve this?&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id=&quot;know-when-to-hold-&#39;em&quot; tabindex=&quot;-1&quot;&gt;Know When To Hold &#39;Em&lt;/h2&gt;
&lt;p&gt;As with the &lt;code&gt;div&lt;/code&gt; element, moderation is the key. You should know when to hold &#39;em. For example:&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&amp;lt;div class=&lt;span class=&quot;token string&quot;&gt;&quot;wrapper&quot;&lt;/span&gt;&gt;
  &amp;lt;div&gt;
    &amp;lt;div class=&lt;span class=&quot;token string&quot;&gt;&quot;menu&quot;&lt;/span&gt;&gt;
      &amp;lt;div id=&lt;span class=&quot;token string&quot;&gt;&quot;header&quot;&lt;/span&gt; role=&lt;span class=&quot;token string&quot;&gt;&quot;banner&quot;&lt;/span&gt;&gt;
      &amp;lt;div id=&lt;span class=&quot;token string&quot;&gt;&quot;search&quot;&lt;/span&gt;&gt;&amp;lt;/div&gt;
        &amp;lt;h1&gt;Title&amp;lt;/h1&gt;
        &amp;lt;nav role=&lt;span class=&quot;token string&quot;&gt;&quot;list&quot;&lt;/span&gt;&gt;
          &amp;lt;a href=&lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&gt;/page&amp;lt;/a&gt;
          &amp;lt;a href=&lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&gt;/page&amp;lt;/a&gt;
          &amp;lt;a href=&lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&gt;/page&amp;lt;/a&gt;
        &amp;lt;/nav&gt;
        &amp;lt;div id=&lt;span class=&quot;token string&quot;&gt;&quot;main&quot;&lt;/span&gt;&gt;
        &amp;lt;h2&gt;Subtitle&amp;lt;/h2&gt;
          &amp;lt;div class=&lt;span class=&quot;token string&quot;&gt;&quot;section&quot;&lt;/span&gt;&gt;
            &amp;lt;section class=&lt;span class=&quot;token string&quot;&gt;&quot;grid-box&quot;&lt;/span&gt;&gt;
              &amp;lt;h4&gt;Styled to look like an h3&amp;lt;/h4&gt;
              &amp;lt;p&gt;Stuff...&amp;lt;/p&gt;
            &amp;lt;/section&gt;
            &amp;lt;section class=&lt;span class=&quot;token string&quot;&gt;&quot;grid-box&quot;&lt;/span&gt;&gt;
              &amp;lt;h4&gt;Styled to look like an h3&amp;lt;/h4&gt;
              &amp;lt;p&gt;Stuff...&amp;lt;/p&gt;
            &amp;lt;/section&gt;
            &amp;lt;section class=&lt;span class=&quot;token string&quot;&gt;&quot;grid-box&quot;&lt;/span&gt;&gt;
              &amp;lt;aside&gt;
                &amp;lt;h3&gt;Sectional heading&amp;lt;/h3&gt;
                &amp;lt;p&gt;Stuff...&amp;lt;/p&gt;
              &amp;lt;/aside&gt;
            &amp;lt;/section&gt;
          &amp;lt;/div&gt;
        &amp;lt;/div&gt;
        &amp;lt;div id=&lt;span class=&quot;token string&quot;&gt;&quot;footer&quot;&lt;/span&gt;&gt;&amp;lt;/div&gt;
      &amp;lt;/div&gt;
    &amp;lt;/div&gt;
  &amp;lt;/div&gt;
&amp;lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;You have a mix in the code above. You still have a lot of divs, a lot of needless divs, and other questionable practices. A div with a class of section and then sections.&lt;/p&gt;
&lt;p&gt;At some point, this will need to be refactored. Which costs time and money. Also, stress. I&#39;ll explain.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&amp;lt;div class=&lt;span class=&quot;token string&quot;&gt;&quot;wrapper&quot;&lt;/span&gt;&gt;
  &amp;lt;div id=&lt;span class=&quot;token string&quot;&gt;&quot;header&quot;&lt;/span&gt;&gt;
  &amp;lt;div id=&lt;span class=&quot;token string&quot;&gt;&quot;search&quot;&lt;/span&gt;&gt;&amp;lt;/div&gt;
    &amp;lt;h1&gt;Title&amp;lt;/h1&gt;
    &amp;lt;nav role=&lt;span class=&quot;token string&quot;&gt;&quot;list&quot;&lt;/span&gt;&gt;
      &amp;lt;a href=&lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&gt;/page&amp;lt;/a&gt;
      &amp;lt;a href=&lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&gt;/page&amp;lt;/a&gt;
      &amp;lt;a href=&lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&gt;/page&amp;lt;/a&gt;
    &amp;lt;/nav&gt;
  &amp;lt;/div&gt;
  &amp;lt;div id=&lt;span class=&quot;token string&quot;&gt;&quot;main&quot;&lt;/span&gt;&gt;
    &amp;lt;h2&gt;Subtitle&amp;lt;/h2&gt;
      &amp;lt;section class=&lt;span class=&quot;token string&quot;&gt;&quot;grid-box&quot;&lt;/span&gt;&gt;
        &amp;lt;h3&gt;Styled to look like an h3&amp;lt;/h3&gt;
          &amp;lt;p&gt;Stuff...&amp;lt;/p&gt;
      &amp;lt;/section&gt;
      &amp;lt;section class=&lt;span class=&quot;token string&quot;&gt;&quot;grid-box&quot;&lt;/span&gt;&gt;
        &amp;lt;h3&gt;Styled to look like an h3&amp;lt;/h3&gt;
        &amp;lt;p&gt;Stuff...&amp;lt;/p&gt;
      &amp;lt;/section&gt;
      &amp;lt;section class=&lt;span class=&quot;token string&quot;&gt;&quot;grid-box&quot;&lt;/span&gt;&gt;
        &amp;lt;aside&gt;
          &amp;lt;h4&gt;Sectional heading&amp;lt;/h4&gt;
            &amp;lt;p&gt;Stuff...&amp;lt;/p&gt;
        &amp;lt;/aside&gt;
      &amp;lt;/section&gt;
  &amp;lt;/div&gt;
  &amp;lt;div id=&lt;span class=&quot;token string&quot;&gt;&quot;footer&quot;&lt;/span&gt;&gt;&amp;lt;/div&gt;
&amp;lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Now this being a very rough example, you may need to go back and change some stuff, but for the most part, you&#39;re spending less time backtracking. Saves the company time (piling up hours refactoring code), saves headaches and stress (dev has to go back in and change things again and deadlines, and all the things!), it saves the company money.&lt;/p&gt;
&lt;p&gt;No need to set five hours to pay a dev to backtrack and refactor yet again when they can be getting paid for a project that is moving forward and not spinning its wheels. You got that time to put them on a project that is gaining steam.&lt;/p&gt;
&lt;p&gt;If you do use the &lt;code&gt;section&lt;/code&gt; element when grouping things genrically, please take a read through Scott O&#39;Hara&#39;s article on his blog about &lt;a href=&quot;https://www.scottohara.me/blog/2021/07/16/section.html&quot;&gt;the accessibility of the section element&lt;/a&gt;.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Use the &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; element as semantically appropriate. Semantic markup, regardless of whether it is always exposed to assistive technologies is meaningful. At the very least the element can be used for other programmatic purposes. And its use can help other developers more quickly understand the structure of a web page, rather than having to rely on a bunch of &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt;s and classes to hopefully understand the intended structure.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id=&quot;know-when-to-fold-&#39;em&quot; tabindex=&quot;-1&quot;&gt;Know when to fold &#39;Em&lt;/h2&gt;
&lt;p&gt;So why do I see a lot of empty &lt;code&gt;div&lt;/code&gt; elements? Over-engineering. Whether it is with or without intent. Whether it is in a framework or the result of a dev who hand codes something but doesn&#39;t know about the accessibility implications.&lt;/p&gt;
&lt;p&gt;Look at the rendered code on X (formerly Twitter). It&#39;s a thick, creamy div chowder. Divs as far as the eyes can see.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1697122400/x-twitter-code.png&quot; alt=&quot;Code from the X (formerly Twitter) interface showing all the div elements used&quot; /&gt;&lt;/p&gt;
&lt;p&gt;There is a world of options with less code. Especially with the advancements of CSS.Even more now with &lt;code&gt;subgrid&lt;/code&gt; gaining support in the modern browsers. If the opportunity is there, seize it!&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&amp;lt;div id=&lt;span class=&quot;token string&quot;&gt;&quot;wrapper&quot;&lt;/span&gt;&gt;
  &amp;lt;header&gt;...&amp;lt;/header&gt;
  &amp;lt;main&gt;
    ...
      &amp;lt;section&gt;
      ...
        &amp;lt;aside&gt;
          ...
        &amp;lt;/aside&gt;
      &amp;lt;/section&gt;
  &amp;lt;/main&gt;
  &amp;lt;footer&gt;...&amp;lt;/footer&gt;
&amp;lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;If you&#39;re a dev that is stretched thin because of the inordinate amount of work you have in front of you and you feel like you are rolling a boulder uphill in an ice storm, you are not alone.&lt;/p&gt;
&lt;p&gt;Why make it harder ? Why subject yourself to the stress? Is the extra five hours on that issue worth the four-hundred bucks you may take home?&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;I don&#39;t have any support.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Then you need to be the catalyst. There are a lot of resources as to how to do that. A few links to read are below, the last links has links to other articles as well.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.smashingmagazine.com/2023/02/keys-accessibility-mindset&quot;&gt;Keys To An Accessibility Mindset&lt;/a&gt;&lt;br /&gt;
&lt;a href=&quot;https://www.smashingmagazine.com/2022/08/organization-improved-web-accessibility-case-study/&quot;&gt;How Our Organization Improved Web Accessibility (Case Study)&lt;/a&gt;&lt;br /&gt;
&lt;a href=&quot;https://www.smashingmagazine.com/2021/07/strong-case-for-accessibility/&quot;&gt;Making A Strong Case For Accessibility&lt;/a&gt;&lt;br /&gt;
&lt;a href=&quot;https://smart-interface-design-patterns.com/articles/accessibility-strong-case/&quot;&gt;How To Make A Strong Case For Accessibility&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Try learning semantic and accessible HTML and CSS, put as much into that as you do learning every new shiny toy that comes out monthly and you&#39;ll understand the foundations of the Web better than you ever have before. I guarantee it.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>2024</title>
		<link href="https://toddl.dev/posts/twenty-twenty-four/"/>
		<updated>Thu, 11 Jan 2024 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/twenty-twenty-four/</id>
		<content type="html">&lt;h2 id=&quot;new-year%2C-different-me&quot; tabindex=&quot;-1&quot;&gt;New Year, Different Me&lt;/h2&gt;
&lt;p&gt;Over the course of 2023, I applied to many conferences hoping to get accepted to new conferences and travel more. That never came to be, though I did get to a few new ones while revisiting some familiar places like Jackson, Mississippi for MagnoliaJS and Atlanta for ConnectTech and DevNexus.&lt;/p&gt;
&lt;p&gt;Currently, I am at CodeMash in Sandusky, Ohio and I volunteered to be on the speaker committee. Something I enjoyed doing to see the process from the inside. The conference is one of those that I suggest speakers submit their abstracts to and people to attend because it is one of those multi-track conferences that is fun.&lt;/p&gt;
&lt;p&gt;Last night, when I got back to my room after dinner with friends, I had a good think. &amp;quot;Where am I going in 2024&amp;quot;?&lt;/p&gt;
&lt;p&gt;I don&#39;t think it is going to be very far, to be honest. I don&#39;t think I will get back to finding a new job somewhere doing frontend work or Developer Relations as I had hoped last year. Putting aside all the greedy tech companies and CEOs, the awful hiring practices and the horrible people that I hear about and see that are in some form of management role that they stumbled stupidly backwards into. I&#39;m almost 53. That&#39;s ancient in tech these days.&lt;/p&gt;
&lt;p&gt;Ageism in tech sure does exist and don&#39;t let anyone tell you different.&lt;/p&gt;
&lt;p&gt;2023 ended good for me, so I cannot complain. I had a huge accessibility audit for a company I can&#39;t quite name yet (I won&#39;t for ethical reasons until everything is signed off for) and I got to remodel my office at home the way I had envisioned.&lt;/p&gt;
&lt;h2 id=&quot;i-have-seen-things&quot; tabindex=&quot;-1&quot;&gt;I Have Seen Things&lt;/h2&gt;
&lt;p&gt;As you may know all too well, layoffs were abundant during 2023. Every month it seemed a mass layoff was happening. It affected friends, colleagues, many people in tech. I look at the landscape and I am saying to myself &amp;quot;where is the place for me once this trend stops (hopefully) and who is going to take a chance on me?&amp;quot;&lt;/p&gt;
&lt;p&gt;My last job did not end well for many reasons but the cherry on top was the PIP that they wanted me to sing. Absolutely not. A PIP is something a company wants to use to hang over your head so you incriminate yourself. Then they can take that and dangle it like a carrot in front of a horse until they get rid of you. So I walked. No regrets.&lt;/p&gt;
&lt;p&gt;My mental health improved vastly. I was not in a horrible mood and unbearable to live with anymore, I could relax. I was burnt out. Accessibility had burnt me out. Which is why I no longer want to do auditing. I did do the audit at the end of 2023 because it was something I could not pass up.&lt;/p&gt;
&lt;p&gt;The people though. I have seen layoffs affect many people in many different ways. So I had a good think about what I have seen last night.&lt;/p&gt;
&lt;h2 id=&quot;i-am-done&quot; tabindex=&quot;-1&quot;&gt;I Am Done&lt;/h2&gt;
&lt;p&gt;The time has come to finally address that I can see the writing on the wall. I know that there are times I can be one of the worst people someone could possibly deal with. That comes with reasons that may or may not be justified, at least a few are justified for me and when I feel strongly about something, I am all in.&lt;/p&gt;
&lt;p&gt;I can be opinionated, gruff, stubborn, hard to work with, combative, moody, obstinate. However, when things are inaccessible I have no excuse and I go into parental mode. Finger-wagging and scolding. I do not apologize and I will fight and debate and advocate for accessibility though tooth and nail.&lt;/p&gt;
&lt;p&gt;Companies do like that in an employee. They do not like an employee that speaks up, speaks the truth, fights for what is right. Companies want to run people down, run them into the ground, and do as little as they can for those people that are actually doing the work while the people in their corner offices reap the benefits and rewards.&lt;/p&gt;
&lt;p&gt;I&#39;m reading the room, I am seeing the writing on the wall, and all the other cliches that are similar. I am done with tech. It has been a good run. It has afforded me a lot, but even within the last 5 years, it has given me the platform to advocate and speak to people on a level I never thought I could attain.&lt;/p&gt;
&lt;p&gt;I have met a host of great people, made great friends, made a lot of great memories. It is time for me to move on and where that may be, I have no idea. I like the idea of that though.&lt;/p&gt;
&lt;p&gt;It has been fun for years up until the last two years. Now it is just tedious. I&#39;m not going to be burnt out again and I protect my sobriety first and foremost. The last place almost broke me but I would not allow it. Ten years later, I am still sober.&lt;/p&gt;
&lt;p&gt;I think I will go enjoy another venture in another arena somewhere.&lt;/p&gt;
&lt;p&gt;I will finish 2024 and the current conferences I have been accepted to (and ones that may accept me as well), I will give a few more resumes time to see if it leads to anything but for the most part, I have a foot and a half out the door. I am looking at streaming content on Twitch in the gaming arena, but that is an unknown as of now. I am just going to walk away before I feel I have been ceremoniously discarded by tech.&lt;/p&gt;
&lt;p&gt;Peace.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>The Decision to Leave Tech</title>
		<link href="https://toddl.dev/posts/the-decision-to-leave-tech/"/>
		<updated>Mon, 05 Feb 2024 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/the-decision-to-leave-tech/</id>
		<content type="html">&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1707139800/todd-halfstack.jpg&quot; alt=&quot;Todd speaking at HalfStack Phoenix about leaving tech.&quot; /&gt;&lt;/p&gt;
&lt;h2 id=&quot;done&quot; tabindex=&quot;-1&quot;&gt;Done&lt;/h2&gt;
&lt;p&gt;When you can stand in front of a crowd and tell them with the utmost confidence that you are done with tech. You are done with tech. Or in this case, I am done with tech.&lt;/p&gt;
&lt;p&gt;Something I have loved to do over the past 44 years as a person, the past 25 professionally. Something I thought I&#39;d love to do forever. That old saying comes to mind.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;All good things must come to an end.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;I&#39;m leaving on my terms, not anyone else&#39;s. I&#39;m leaving with my head held high. Have I always been the easiest to deal with? No. Have I always been a model of anything? No. Have I always been a power of example? No.&lt;/p&gt;
&lt;p&gt;I&#39;ve thought about it, I have written about it a hundred thousand times before but this feels different, it feels final. It is final.&lt;/p&gt;
&lt;p&gt;I&#39;ve worked with a lot of great people, kind people, compassionate, empathetic, wonderful, intelligent people. I&#39;ve met the same amount of the same people at conferences and events.&lt;/p&gt;
&lt;h2 id=&quot;next&quot; tabindex=&quot;-1&quot;&gt;Next&lt;/h2&gt;
&lt;p&gt;What the future holds is unknown. I gave myself until the middle of this year to find work full-time, something, but that something isn&#39;t to be found. Outside of the tech, things have not worked out, so there are a couple of ideas I have an after that, who knows?&lt;/p&gt;
&lt;h2 id=&quot;accessibility&quot; tabindex=&quot;-1&quot;&gt;Accessibility&lt;/h2&gt;
&lt;p&gt;A space I have been passionate about for over two decades. A lot of me trying to help enact a culture of change everywhere. Like a former colleague says, &lt;a href=&quot;https://yatil.net/blog/hope-kills-you&quot;&gt;&amp;quot;It&#39;s the hope that kills you&amp;quot;&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Hope kills me daily with each site I see with an overlay. It is just a sign to me that the web is doomed as we trod further and further into the world of artificial intelligence (AI). I am not a huge fan of AI, I do not think AI is where it will ever need to be because of humans. But I do have hope that will change. I want no part of it though.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.forbes.com/sites/stevenaquino/2024/01/31/new-audioeye-chief-accessibility-officer-mike-paciello-talks-his-career-new-role-more-in-interview/?sh=74db7f741996&quot;&gt;When respected accessibility people become overlay salesmen&lt;/a&gt;, it sticks a dagger in your back and you feel like you just got slapped in the face. Especially since an accessibility professional was sued and faced a SLAPP lawsuit from the very same company. You can congratulate the man, but can you congratulate and respect the decision? Or &lt;a href=&quot;https://www.businesswire.com/news/home/20231230727471/en/Level-Access-Agrees-to-Acquire-UserWay/&quot;&gt;when accessibility companies buy overlay companies&lt;/a&gt; in the continual monetization of accessibility.&lt;/p&gt;
&lt;p&gt;The accessibility space is toxic. Not all of the accessibility is toxic, there are highly intelligent and wonderful people in the space I have worked with and learned from over the years. There is a segment of good in a sea of bad.&lt;/p&gt;
&lt;p&gt;The overlay companies. Those who pander to the overlay companies. Those who bend knee to the overlay companies. Those who sell out the disabled community all in the name of change (which will never happen when you are rolling a boulder up a mountain).&lt;/p&gt;
&lt;p&gt;The toxicity against the disabled community. The toxicity of the people that talk down to people and act holier than thou. The conferences that do not protect the very people they are having a conference around.&lt;/p&gt;
&lt;p&gt;The perpetually bitter and angry crowd that tells you that &amp;quot;you are not wanted, nor are you needed and you can fuck off&amp;quot; (true story, DM on the former bird site). The people that rail for equality becoming a lesson in irony with their anger, spite, rage, and bitterness.&lt;/p&gt;
&lt;p&gt;I spoke for the voices that could not speak for themselves. Family, friends. I did not speak for all. Especially the aforementioned people above. It has made me indifferent to the advocacy of accessibility. I&#39;m finished rolling that boulder up that mountain.&lt;/p&gt;
&lt;h2 id=&quot;i-tried&quot; tabindex=&quot;-1&quot;&gt;I Tried&lt;/h2&gt;
&lt;p&gt;I have tried over the years to become gainfully employed in the accessibility space with the &amp;quot;big three&amp;quot;. I have to say that apparently, my experience, although extensive, definitely not all-knowing, was not good enough. At any level.&lt;/p&gt;
&lt;p&gt;Almost as if the jobs were inaccessible to me. SO I stayed on course and consulted. It gave me the chance to do the work and not have to answer to anyone but myself and my clients. Those are the people I am grateful for putting their trust in me to do the job they hired me to do.&lt;/p&gt;
&lt;p&gt;So it hasn&#39;t been a complete loss, but it is a shame that I see companies and the abysmal hiring that they do pass on a lot of people I know that are brilliant people all over tech.&lt;/p&gt;
&lt;p&gt;I tried though. I&#39;m tired boss.&lt;/p&gt;
&lt;h2 id=&quot;burnout&quot; tabindex=&quot;-1&quot;&gt;Burnout&lt;/h2&gt;
&lt;p&gt;Four plus years of straight auditing burnt me out. I thought I had been out of the weeds lately but I was wrong. I am burnt out and there is no replacing this. There is no rest period that will ever bring back the passion. Ever.&lt;/p&gt;
&lt;p&gt;I can feel the burnout just writing this. It even seriously makes me think twice about my part in the W3C. Do I really want to do this anymore? Do I want to continue?&lt;/p&gt;
&lt;p&gt;No. I don&#39;t.&lt;/p&gt;
&lt;p&gt;My coding suffered, my ability to do development with fire, passion, love, and pleasure. Wiped out. Gone. I am indifferent to that now. I&#39;m still tired, boss. Even more, just plain tired.&lt;/p&gt;
&lt;h2 id=&quot;2024&quot; tabindex=&quot;-1&quot;&gt;2024&lt;/h2&gt;
&lt;p&gt;I am going to fulfill all events and appearances this year. Anything I may have submitted to as well. 2024 is the last year of conferences and travel. Podcasts and other streams as well.&lt;/p&gt;
&lt;h2 id=&quot;farewell&quot; tabindex=&quot;-1&quot;&gt;Farewell&lt;/h2&gt;
&lt;p&gt;It is time for me to go. It isn&#39;t see you later or good bye for now. It is farewell.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Thank You</title>
		<link href="https://toddl.dev/posts/thank-you/"/>
		<updated>Wed, 07 Feb 2024 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/thank-you/</id>
		<content type="html">&lt;p&gt;I would like to take the time to address everyone who reached out to me and who left messages on the socials I inhabit:&lt;/p&gt;
&lt;p&gt;Thank you all.&lt;/p&gt;
&lt;p&gt;I thank you all for your support and your kindness. The decision wasn’t an easy one and to be honest, I have fought the urge for many, many years.&lt;/p&gt;
&lt;p&gt;The positive messages and the kind words, a lot of you have had have moved me. I did not know a guy like me, who put himself out there very late in life got so lucky to have such a great network of people he met, knows, admires, and respects highly.&lt;/p&gt;
&lt;p&gt;Keeping this as short as possible, I have seen the messages and I just want to say to those of you who have reached out, thank you. It means the world to me as well as each and every one of you.&lt;/p&gt;
&lt;p&gt;♥&lt;/p&gt;
&lt;p&gt;For context you can &lt;a href=&quot;https://toddl.dev/posts/the-decision-to-leave-tech/&quot;&gt;interact with this link to read up&lt;/a&gt; on what this means.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Devnexus 2024</title>
		<link href="https://toddl.dev/posts/devnexus-2024/"/>
		<updated>Fri, 12 Apr 2024 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/devnexus-2024/</id>
		<content type="html">&lt;h2 id=&quot;why-a-java-conference%3F&quot; tabindex=&quot;-1&quot;&gt;Why a Java Conference?&lt;/h2&gt;
&lt;p&gt;I have been asked about why I take to conferences that are not accessibility-centered and the answer is simple. I would be preaching to the choir.&lt;/p&gt;
&lt;p&gt;Having me at an accessibility conference speaking in front of a crowd of people that either already know and are well-versed in accessibility, is not productive in my opinion. Accessibility people, for the lack of a better term, are judgy. We have to be. Not that I am afraid of criticism and critique, I just feel that if I am talking to folks who are doing the work, than it is counter-productive.&lt;/p&gt;
&lt;p&gt;Now they may not be up to speed in what I might be talking about by some slim chance, I am aware of that, I may be missing out on maybe a piece of something that may educate them.&lt;/p&gt;
&lt;p&gt;Then there are the folks who are new and just learning. Yes, this is something I am missing and probably should, but that was what articles and writing about accessibility was all about. I recognize that fact.&lt;/p&gt;
&lt;h2 id=&quot;reasons&quot; tabindex=&quot;-1&quot;&gt;Reasons&lt;/h2&gt;
&lt;p&gt;Take the accessibility advocacy to the places you&#39;re not going to hear much, if anything at all at. Java conferences, .net conferences, DevOps, DevRel, etc. Open the curtains and let the light in. It is something to get a few people educated. There is a lot of education online now thankfully from great people like Marcy Sutton and Sara Soueidan, and many more.&lt;/p&gt;
&lt;p&gt;Lots of resources I always link to in my slides and in my articles in the past.&lt;/p&gt;
&lt;p&gt;However, seeing those faces when I present something to developers in much different spaces is the types of reactions I loved (and still love) to see. Raising awareness, bring light into a rather dark corner of development where accessibility may not be practiced much, if at all.&lt;/p&gt;
&lt;p&gt;That is why.&lt;/p&gt;
&lt;h2 id=&quot;the-conference&quot; tabindex=&quot;-1&quot;&gt;The Conference&lt;/h2&gt;
&lt;p&gt;It has been a privilege and I am grateful to have had the chance to speak at Devnexus for the past few years. The event is one of the best that Pratik and Vince put on each year and one I highly recommend to people. Even if it is not a talk that is Java-centric, speak here, or at least attend and learn from the many talks by lots of great speakers who are the greatest of people.&lt;/p&gt;
&lt;p&gt;Lots of sponsors and lots of learning. Iw as able to duck into some talks for a bit and see some great talks. Plan your days around what talks you want to see. Visit sponsors to learn what they are offering. Pick up some cool swag!&lt;/p&gt;
&lt;p&gt;Networking at Devnexus is probably one of the best things you can do while here. I have met a ton of great people from all over the world. Some of the smartest, brightest, and hardest working people who do good things.&lt;/p&gt;
&lt;p&gt;The talks I was able to see from folks were great learning experiences. Well worth the price of admission. You are getting your money&#39;s worth and more.&lt;/p&gt;
&lt;h2 id=&quot;the-week-in-review.-the-tl%3Bdr&quot; tabindex=&quot;-1&quot;&gt;The Week in Review. The TL;DR&lt;/h2&gt;
&lt;p&gt;With the passing of my aunt on Monday, My heart was heavy and my mind was full. Which I feel stuck with me through the week. As I write this, I can feel that weight. I felt this weight during my talk too. I think that affected the talk.&lt;/p&gt;
&lt;p&gt;I had to refer to notes, I had messed up an answer which was on a slide which I have never done. But I gave myself the grace that maybe it wasn&#39;t a great talk but I had a pretty full room. Little things that are broken shoelaces that I tend to still blow way out of proportion.&lt;/p&gt;
&lt;p&gt;I got through, it felt like it was a good talk and it was well received. I may be wrong. I may be right. I don&#39;t know. My heart still feels heavy though.&lt;/p&gt;
&lt;h2 id=&quot;friends&quot; tabindex=&quot;-1&quot;&gt;Friends&lt;/h2&gt;
&lt;p&gt;It is always good to see the friends that I have made over the years and that is what makes the conference circuit (for me) worth the flying, the travel, the hotels, the time away from home. Seeing those faces a guy like me loves to see.&lt;/p&gt;
&lt;h2 id=&quot;details%2C-please%3F&quot; tabindex=&quot;-1&quot;&gt;Details, Please?&lt;/h2&gt;
&lt;p&gt;I know this is a high-level overview, with not much context. I kept my talk at a high-level, this time has been different as I draw my speaking engagements to a close. Emotionally, mentally, I am exhausted. Physically the walking, while great exercise, takes its toll on my body.&lt;/p&gt;
&lt;p&gt;Let me just say this and trust me when I say this.&lt;/p&gt;
&lt;p&gt;Devnexus is a conference you want to speak at, a conference you want to attend. A conference that you want to get an experience at for the hallway tracks, the talks, the education, the networking.&lt;/p&gt;
&lt;p&gt;Get yourself to a Devnexus soon and tell me you did not have a good time. I would be shocked if you didn&#39;t.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>That Was Short-Lived</title>
		<link href="https://toddl.dev/posts/that-was-short-lived/"/>
		<updated>Fri, 02 Aug 2024 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/that-was-short-lived/</id>
		<content type="html">&lt;h2 id=&quot;well-now&quot; tabindex=&quot;-1&quot;&gt;Well now&lt;/h2&gt;
&lt;p&gt;I was all set to disappear like Homer Simpson into the bushes and call it a career but life likes to throw curveballs and nasty sliders. So here I am, back again. Writing.&lt;/p&gt;
&lt;p&gt;I decided that retirement was the only option back a few months ago. January, I believe. I had wrapped up a huge project and I was not feeling it when it came to being hired. Still don&#39;t, but I&#39;ll address that shortly.&lt;/p&gt;
&lt;p&gt;I had been doing accessibility auditing and remediation for five years solid. Professionally, nothing diverting myself to stay fresh and avoid burnout. It was just audit after audit after audit. I burnt out. Throw a few more things professionally and in real life on top of that and I was burnt to a crisp.&lt;/p&gt;
&lt;h2 id=&quot;life-happens&quot; tabindex=&quot;-1&quot;&gt;Life happens&lt;/h2&gt;
&lt;p&gt;Life has a funny (and sometimes messed up) way of throwing things at you when you aren&#39;t looking. So with that said, circumstances notwithstanding, I am back. I have been for a couple months now. The time off has given me a lot of clarity that I hadn&#39;t had before. That being more self-worth, self-awareness, and not selling myself short any longer.&lt;/p&gt;
&lt;p&gt;Things happen which bring us to back track and I have had to back track. Not without some really garbage things happening though.&lt;/p&gt;
&lt;p&gt;Tech hiring. The worst. Ghostings, robo-rejections, the same old, same old we see from a broken system.&lt;/p&gt;
&lt;p&gt;The world burning around us. Not an interest in the negative that is all over the internet.&lt;/p&gt;
&lt;p&gt;Health. Physical, mental, and trying to juggle real life in between taking care of myself and others.&lt;/p&gt;
&lt;p&gt;My time. While it has opened up a lot from me clearing my plate off and only taking part in some W3C activities, my time is wrapped up in trying to find work so I can support the household.&lt;/p&gt;
&lt;h2 id=&quot;the-options&quot; tabindex=&quot;-1&quot;&gt;The options&lt;/h2&gt;
&lt;p&gt;I&#39;m a little shunned in the accessibility community because of my vocal opposition to people being bullies that are supposed to be experts and whom should guide people and not emasculate or eviscerate others for the things they say, write, or do when it comes to accessibility. That part is fine, it just reinforces my stance that the accessibility community, while for the most part, being inclusive and welcoming and helpful, has a subset of a few people that just want to be standoffish pricks.&lt;/p&gt;
&lt;p&gt;That got unfollows and gasps from the crowd but I got into accessibility to be the voice of people in my family and close knit circle of friends that did not have a voice. Those people were and are the reasons I have for doing what I did. Whether or not people like me is none of my business and I prefer it that way. I don&#39;t think about it, them, or how to win friends and influence people.&lt;/p&gt;
&lt;p&gt;So accessibility for me is just advocacy. No more auditing. I deserve better and after 25 years and learning from the best people, I deserve more. I doubt I&#39;ll ever be presented with anything at this point in life. 53 years old and searching for a lead role or higher is not in my sights.&lt;/p&gt;
&lt;p&gt;So I made a move.&lt;/p&gt;
&lt;h2 id=&quot;java-you-say&quot; tabindex=&quot;-1&quot;&gt;Java you say&lt;/h2&gt;
&lt;p&gt;Yes, Java.&lt;/p&gt;
&lt;p&gt;I am re-learning Java and having fun doing it. I am having a great time reading and coding. Actually going back to my roots in programming and getting it done. I am rusty. Very rusty, but the fact that I have learned multiple programming languages in the past only makes me realize I can still do it and still learn on the fly. That is someething I will talk about in another post later.&lt;/p&gt;
&lt;p&gt;Java was something I had a love/hate relationship with in the past but now, it is just fun. I look forward to learning now. I look forward to doing it all again.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;I’m having fun again. I look forward to opening an editor again and following courses. I enjoy sitting down and doing this again. There’s always the light at the end of the tunnel, sometimes it takes a long time to see it. 🦞 Todd (@toddlibby) — &lt;a href=&quot;https://twitter.com/toddlibby/status/1819417252783182036&quot;&gt;August 2, 2024&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Now I&#39;m just glad I am doing it and seeing the light at the end of the tunnel. It is a long tunnel and the road to getting out of burnout is almost at the intersection of burnt out and back to feeling good. Regardless though, it has been a lot of work I had to do and even spawned &lt;a href=&quot;https://noti.st/colabottles/DsfnOY/from-code-to-calm-combating-burnout-in-tech&quot;&gt;a conference talk that went great at KCDC&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;now-what&quot; tabindex=&quot;-1&quot;&gt;Now what&lt;/h2&gt;
&lt;p&gt;That&#39;s up to the people that hire. I am looking for engineering/programming/lead role work. I hope to find something fast.&lt;/p&gt;
&lt;p&gt;For now, I am just going to keep on writing.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Tech and Restaurants</title>
		<link href="https://toddl.dev/posts/tech-and-restaurants/"/>
		<updated>Mon, 05 Aug 2024 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/tech-and-restaurants/</id>
		<content type="html">&lt;h2 id=&quot;mirror-images&quot; tabindex=&quot;-1&quot;&gt;Mirror images&lt;/h2&gt;
&lt;p&gt;There are a ton of similarities between the tech industry and working as an engineer or manager/lead and working in a professional kitchen as an executive head chef/head chef, sous chef, or even a chef de partie. I have been wanting to write this article for a while as it has been swimming around in my head for quite some time now.&lt;/p&gt;
&lt;p&gt;Never, in my time of interviews and going through the rigamarole of the whole hiring process has anyone at any level asked me, &amp;quot;have you ever led a team and if so, blah blah blah?&amp;quot; Something I&#39;d be asking applicants looking for the jobs I have applied for. That is neither here nor there however.&lt;/p&gt;
&lt;p&gt;There are a lot of similarities, of which I have placed into five categories:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Knowledge. How educated are you in your craft?&lt;/li&gt;
&lt;li&gt;Education. What knowledge do you possess and where have you learned from?&lt;/li&gt;
&lt;li&gt;Onboarding/Staging. Onboarding and Staging &lt;em&gt;(STAH-zhing)&lt;/em&gt; are almost the same, you&#39;re learning the craft.&lt;/li&gt;
&lt;li&gt;Ethic and Style. How well do you work alone? In a team? How do you handle pressure?&lt;/li&gt;
&lt;li&gt;Management. How well do you lead a team? Can you perform the functions of a management role?&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;I worked many years in food/professional kitchens and for the most part, the same time working in development. For many people, with many people. Some I got along with great. Some I did not. Some people do not like me as a teammate and that carries over to the real world. I have worked with people that while it was just an &amp;quot;okay&amp;quot; experience, I have worked with people with zero support (which goes against everything I look for in strong leadership).&lt;/p&gt;
&lt;p&gt;So let&#39;s get to the meat and potatoes of this article. I&#39;ll break it up into Tech and Chef categories.&lt;/p&gt;
&lt;h2 id=&quot;knowledge&quot; tabindex=&quot;-1&quot;&gt;Knowledge&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;Tech:&lt;/strong&gt; You go to school, you get a CS degree. You have been an intern (paid or unpaid and please, never do unpaid work these days), you have attended a bootcamp. You learn (and as much as I abhor it, accessibility is not often taught in higher learning, but is getting recognized and a little better) your craft through lessons and homework and projects. You are constantly learning as you go, you learn new methods and ways to simplify code or workflows, learn coding languages you may not have known before. You have tools at your disposal to help you learn and create things.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Chef:&lt;/strong&gt; You attend a culinary school, or more than one for some folks. You stage &lt;em&gt;(staj)&lt;/em&gt; which is &#39;traditionally&#39; been unpaid for the longest time, but there are paid staging opportunities. You learn by doing, creating, working, cooking. While you learn in the kitchen, you are learning many new techniques, ways to cook, or methods of cooking you did not know. Your tools are what help you create beautiful dishes and delicious food. Those tools are at your disposal to create great things.&lt;/p&gt;
&lt;p&gt;Regardless of which field you are in, your knowledge grows when you are in a healthy environment to learn. If, such as the kitchen culture was and still can be today with high pressure and yelling an screaming, the work environment may be a very high energy, high stress, high expectations kind of environment. Which tech is also. Either way, you accumulate knowledge through watching, listening, and doing.&lt;/p&gt;
&lt;h2 id=&quot;education&quot; tabindex=&quot;-1&quot;&gt;Education&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;Tech:&lt;/strong&gt; Again, higher learning, bootcamps, online course, MOOCs, etc. You get your education at a trusted source. You learn, you take X amount of time to learn how to design, develop, work with tools, grow as an engineer. Putting all that time learning (and the learning should never stop) your craft to create things digitally. You learn to learn to code, you learn to write tests, you learn how to deploy, debug, make things accessible, learn to work well with your team.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Chef:&lt;/strong&gt; Culinary school, staging, learn on the fly. That is how you learn in the culinary field. You hone your skills as you work, you become more efficient as you work, you get faster and hopefully more skilled as you work. Learning how to balance flavors, run an efficient team, lead by example, control food costs, learn the science/chemistry side of food. The more you learn, the more you grow, the further you progress in the field.&lt;/p&gt;
&lt;h2 id=&quot;onboarding%2Fstaging&quot; tabindex=&quot;-1&quot;&gt;Onboarding/Staging&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;Tech:&lt;/strong&gt; In tech the onboarding process, the new employee is welcomed, emails, paperwork, checklists, read the handbook, say hello to the team, add member to projects, meetings with manager and a team member perhaps weekly as a somewhat informal mentor/mentee relationship. There is a lot of moving parts. Same with traditional blue-collar jobs as well with lots of paperwork and manuals or handbooks, meet the team, work with someone by your side, etc.&lt;/p&gt;
&lt;p&gt;The onboarding process is an assimilation to the new job to get one comfortable and working as soon as possible.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Chef:&lt;/strong&gt; You stage in traditional circles for free. Usually a month, depending on the chef. I would do one month stages then evaluate and if they did a good job or better, usually write a recommendation or even hire them to work on the line. If you can show a work ethic and an attention to detail, then I wanted to see how you fared in my kitchen.&lt;/p&gt;
&lt;p&gt;Most of the time, you get someone that hasn&#39;t staged. So they immediately get thrown to the lions and you are in it to win it. Are you going to perform the duties and handle the position and the station you are working?&lt;/p&gt;
&lt;p&gt;Staging will lead to opportunities either where you stage, or some place else. The restaurant industry is a close-knit community and chefs always talk to each other about people that have worked for them to other chefs. Good, bad, or indifferent. Usually a kitchen will then hire the cook and then the paperwork and all that fun stuff will follow.&lt;/p&gt;
&lt;p&gt;Both roles really need an attention to detail and organization on some level. When you run an efficient team, or an efficient kitchen, you are going to win big.&lt;/p&gt;
&lt;h2 id=&quot;ethic-%26-style&quot; tabindex=&quot;-1&quot;&gt;Ethic &amp;amp; Style&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;Tech:&lt;/strong&gt; Your work ethic keeps you in your seat. Bottom line. Any fluctuation in that is scrutinized and placed under a microscope with most places. You do great and are a steady employee that shows up and does their job and goes a little above and beyond then you get praise. And maybe one more pizza for the staff party. Or a $10 DoorDash gift card. You do poorly and are under-performing and you get a trip to the principal&#39;s office and a sit down with management and HR, you get the finger wag and possibly the worst thing ever created, the Performance Improvement Plan (PIP). &lt;a href=&quot;https://eggcellentwork.com/never-sign-a-pip/&quot;&gt;Don&#39;t ever sign a PIP&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;You may have monthly reviews, quarterly reviews, but whatever the case may be, you are under heavy pressure to perform. Most folks can do it. Some go even further and do phenomenal work that gets them raises and promotions, or they hone their skills for when they move on to another role, with another company, in a higher position or maybe the same position.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Chef:&lt;/strong&gt; You over-perform or perform to what the job entails, you have your spot on the line. You are one of the brigade. You work that station or stations like a boss and you&#39;re going to advance and go places in the culinary world. As I stated perviously, you work like a fiend, you perform and go above and beyond, you make a name for yourself and chefs start discussing your name in outside circles, you&#39;re going to advance and go far.&lt;/p&gt;
&lt;p&gt;Your review is while you work. As informal as that is, that is the barometer. A formal review with a sit down with the executive head chef (EHC) or Head Chef, Sous Chef, partner/owner will be where the details are discussed. Did you work good enough to stay? If not, more than likely, until you can be replaced, you&#39;ll work that station and hear it from others on the brigade. The line is the worst place to be if you are under-performing.&lt;/p&gt;
&lt;h2 id=&quot;management&quot; tabindex=&quot;-1&quot;&gt;Management&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;Tech:&lt;/strong&gt; When you become a manager or team leader then the leadership skills come out. How well do you support your team? Do you regularly have 1:1s with the people that work under you? Are you checking in on how things are going with your team and what, if any concerns or comments there are? Are you driving the team to make quality work and code?&lt;/p&gt;
&lt;p&gt;Of course, there is a lot more to it then that, but those are just a few things. You work with many different people across the organization, you plan and coordinate with your team, you&#39;ll apply best practices (and hopefully accessibility practices!) and design, test, develop and verify methods for product QA, to develop scalable and user-friendly products.&lt;/p&gt;
&lt;p&gt;A lot of moving parts.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Chef:&lt;/strong&gt; A chef also has a lot of moving parts to the job. Which was the parallels I could see when thinking of this article.&lt;/p&gt;
&lt;p&gt;A head chef, or executive head chef will have the following duties:&lt;/p&gt;
&lt;p&gt;Planning and directing food preparation in the kitchen, creation of the menu and coordinating with the restaurant owner or manager. Managing kitchen staff and delegation of tasks performed by the staff, ensuring quality (acting like QA) and taste of food.&lt;/p&gt;
&lt;p&gt;Head chefs and EHCs also take responsibility (in most cases) of the kitchen&#39;s financial performance like budgeting and cost control so food costs stay as low as they can be. They oversee the safety and the cleanliness standards of the kitchen, and then there is inventory management and supplies for the kitchen.&lt;/p&gt;
&lt;p&gt;Knowledge, business-wise and culinary knowledge along with being able to manage and handle immense pressure (in larger or more fine dining kitchens) crucial. There is also one other component to the job of a chef. Communication. A kitchen needs to have constant communication in order to run efficiently. Communication skills when dealing with patrons, staff, management, and vendors.&lt;/p&gt;
&lt;h2 id=&quot;summary&quot; tabindex=&quot;-1&quot;&gt;Summary&lt;/h2&gt;
&lt;p&gt;Why did I write this?&lt;/p&gt;
&lt;p&gt;I think skills crucial to the position (when applying for tech jobs) that are learned and gained in other fields can be a plus for a company.&lt;/p&gt;
&lt;p&gt;You take these two fields and you compare them (and a lot of folks I have talked to have at one point or another worked in a restaurant, or even in fast food) and the systems are very similar. When I was looking for people to assist me on a project when I was doing freelance I wanted to see their work history and the number of different jobs they had held. Not a to judge, bu tto see how people could shift left so to speak and start something new. To adapt to something entirely different but mutually the same maybe.&lt;/p&gt;
&lt;p&gt;As much as you want to learn someone&#39;s background before hiring them, and being that personal questions aren&#39;t allowed by law in any interview, I think that putting your time on a resume in a restaurant you worked in is a good thing. Especially the higher up in the food chain as it were, that you were. Adapting is important in tech when trying to handle a bunch of different tasks, just like the kitchen.&lt;/p&gt;
&lt;p&gt;Just some random thoughts I wanted to put up here. That is all.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>An Update on Things</title>
		<link href="https://toddl.dev/posts/update/"/>
		<updated>Mon, 07 Oct 2024 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/update/</id>
		<content type="html">&lt;p&gt;I know I have written a lot about quitting, retiring, stepping back, etc. and all I can say is that is from a place where desperation and exasperation reigned supreme. This time however, it is different. My gut is not screaming at me to &amp;quot;stay in the game&amp;quot;.&lt;/p&gt;
&lt;p&gt;You can only fill a glass up to the rim before you start spilling liquid all over the place. I am all over the place.&lt;/p&gt;
&lt;p&gt;I have been afforded a few minutes to post today. No pain, no extra-curricular messes, no interruptions.&lt;/p&gt;
&lt;h2 id=&quot;the-now&quot; tabindex=&quot;-1&quot;&gt;The Now&lt;/h2&gt;
&lt;p&gt;My soul is tired. My mind is tired. My body aches. My medical situation is at a critical point, but not at a catastrophic fail point. My ambition erodes after each rejection. My confidnce wanes after each &amp;quot;You&#39;re not qualified.&amp;quot;&lt;/p&gt;
&lt;p&gt;My heart is heavy, my confidence is empty, my tank is near empty, all of me is weary.&lt;/p&gt;
&lt;p&gt;Taking care of someone who is cognitively declining rapidly is a task. I have not risen to the occasion. A good portion of my day is trying to navigate the whitewaters and I have not done a great job at it. Stress of being able to do something while the stress of wondering if it is good enough compounded with the stress of wondering if you can hold it together until you and others can find a viable solution to all of it to make all pieces in the puzzle happy.&lt;/p&gt;
&lt;p&gt;A potentially dire situation, medically speaking, concerning my signficant other and trying to not only be there when needed, but support and try to be the best version of myself and feeling very underwhelmed at my results so far. Trying to maintain a balance between not worrying at the moment so much and trying to be there when I am called upon and preparing myself for the worst case scenario and feeling like I am not going to be able to keep face and composure is nerve-wracking.&lt;/p&gt;
&lt;p&gt;Finding employment because as much as I wish I could retire for good, I cannot. Finding that my experience in the tech space so far has garnered zero interest and I am considered in many cases as &amp;quot;not qualified&amp;quot; including accessibility roles I don&#39;t want to apply for.&lt;/p&gt;
&lt;p&gt;I am the toughest critic I know and I expect nothing less than what my mind tells me. Making it clear in my own mind I deserve more than the positions I have held in the past 10 years.&lt;/p&gt;
&lt;p&gt;Supporting others as I love to do even when that support is either not there or lost in the shuffle for whatever reason.&lt;/p&gt;
&lt;h2 id=&quot;the-then&quot; tabindex=&quot;-1&quot;&gt;The Then&lt;/h2&gt;
&lt;p&gt;The past is the past and that will never change. Whether it was the &amp;quot;get off my lawn you kids&amp;quot; kinds of posts to opinionated diatribes from a pulpit of chaos, the past is the past. Mistakes are chances to learn. The thing I go by is whatever anyone thinks of me is none of my business. Especially when I can get the work done. Chemistry matters, don&#39;t get me wrong! But no matter how anyone looks at me, learning is how I grow and growing is how I succeed.&lt;/p&gt;
&lt;p&gt;The past burnout taught me some very valuable lessons. That from the ashes of burnout come a great explosion of creativity.&lt;/p&gt;
&lt;p&gt;Past occupations in and out of tech have taught me that I can adapt. I have that skill.&lt;/p&gt;
&lt;h2 id=&quot;the-future&quot; tabindex=&quot;-1&quot;&gt;The Future&lt;/h2&gt;
&lt;p&gt;I have set a very important goal. by December 31, 2024, if not employed, I am going to call it. I am tired and it has been a road frought with many obstacles and barriers. My soul is tired and when my soul is tired, it is time to not only change, but step back and make choices I may not want to make or accept.&lt;/p&gt;
&lt;p&gt;This means pulling accounts off the web and closing them. I&#39;ve tried to make comeback after comeback and when I thought I was out, something has made me jump back in or drawn me in. This time, the future of where I live, bills I pay, food I eat, places I go, health I try to maintain depend upon my decisions.&lt;/p&gt;
&lt;p&gt;What this future is, I have no idea. I have a few years left in me, this I know. What the future contains, I know a little bit.&lt;/p&gt;
&lt;p&gt;I can&#39;t support vocally or electronically one way. It is a two-way street. Show me your support and you&#39;ll have mine. Silnce speaks volumes and I may need to become silent at times. Not because I am trying to prove a point, be mean, or whatever one&#39;s mind could think of, it is out of principle. Why would I take a bottle of poison and drink it? Even more, why would I take a bottle of poison, drink it, wait a few minutes, then drink more?&lt;/p&gt;
&lt;p&gt;What serves me in action, not inaction. This has gotten to a level of selfishness, either this selfishness brigns me to where I need to be or it brings me to the end, meaning the Irish Goodbye. Leaving the Web entirely. Radio silence, if you will.&lt;/p&gt;
&lt;p&gt;I see good people, great people, intelligent and wonderful people being discarded or forced to leave toxicity almost daily. You may be one of those people if you are reading this right now. I don&#39;t know why the landscape of tech has become this way for no other means other than greed and selfishness.&lt;/p&gt;
&lt;p&gt;Maybe I need to take the selfishness and leave the rest? Or maybe, just maybe... I should just leave?&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Another Update on Things</title>
		<link href="https://toddl.dev/posts/update-again/"/>
		<updated>Thu, 17 Oct 2024 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/update-again/</id>
		<content type="html">&lt;p&gt;I have gotten word that the doctor is now the source of the hold up with finding out test results or even testing and what is going on with my significant other. This in itself is a weight on the mind and I can&#39;t imagine the weight she is dealing with herself.&lt;/p&gt;
&lt;p&gt;Medically, I am coming out of the other side of the woods and things are, for now, calm. So there is some progress there.&lt;/p&gt;
&lt;p&gt;The care for someone elderly and lsing cognitive faculties is exhausting and I do not wish this on anyone. Growing old is hard enough, dealing with things like dementia or Parkinson&#39;s is worse. I have a lot of empathy for those who are going through it as well.&lt;/p&gt;
&lt;p&gt;It has been ten days since the last update and I want to thank those of you who reached out with kind words and thoughts, it means an awful lot to me and I am greatful to have those and your time writing to me.&lt;/p&gt;
&lt;p&gt;Hopefully, I have a couple of developer relation roles I hope to get the interview process underway and see where those lead. On the development front, I have not been so lucky.&lt;/p&gt;
&lt;p&gt;Things have leveled out somewhat, so I have some time to be able to jump back into the W3C meetings and continue working to get the deceptive patterns work published in the WCAG 3 documents.&lt;/p&gt;
&lt;p&gt;Until then, enjoy the holidays that are rapidly approaching with your families and enjoy the rest of 2024 while it lasts!&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Bluesky</title>
		<link href="https://toddl.dev/posts/bluesky/"/>
		<updated>Mon, 11 Nov 2024 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/bluesky/</id>
		<content type="html">&lt;h2 id=&quot;regrets%2C-i-have-a-few&quot; tabindex=&quot;-1&quot;&gt;Regrets, I Have A Few&lt;/h2&gt;
&lt;p&gt;There are some decisions in life I would like to change, some I would not change for anything. Leaving Bluesky might be one of those I wish I could take back.&lt;/p&gt;
&lt;p&gt;So I re-joined the crowd over at Bluesky again. After the beta testing and all the other testing they were doing before they opened it up and even after they opened it up more and more it was just lifeless it seemed. Forgotten or just ignored.&lt;/p&gt;
&lt;p&gt;It has been infinitely better this time around, find familiar faces, meeting new ones, enjoying how social media was 10-20 years ago, if not longer. No bullshit.&lt;/p&gt;
&lt;p&gt;I shall see how it shapes up in the near future, but right now I&#39;m riding the wave of a decent and happy social scene.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Test</title>
		<link href="https://toddl.dev/posts/test/"/>
		<updated>Tue, 12 Nov 2024 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/test/</id>
		<content type="html">&lt;h2 id=&quot;this-is-a-test-post&quot; tabindex=&quot;-1&quot;&gt;This is a test post&lt;/h2&gt;
&lt;p&gt;This is a test post with some lorem ipsum.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Accessibility Misinformation</title>
		<link href="https://toddl.dev/posts/accessibility-misinformation/"/>
		<updated>Wed, 13 Nov 2024 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/accessibility-misinformation/</id>
		<content type="html">&lt;h2 id=&quot;don&#39;t-believe-everything-you-read&quot; tabindex=&quot;-1&quot;&gt;Don&#39;t Believe Everything You Read&lt;/h2&gt;
&lt;p&gt;Misinformation is quite the thing these days. It has been for at least a decade which is as far as I can think back to the first time I saw misinformation or disinformation. It probably (and undoubtedly) has existed since the &amp;quot;modern&amp;quot; internet came about (let&#39;s call it Web 2.0 for the lack of a better term).&lt;/p&gt;
&lt;p&gt;I&#39;ll share what I posted on LinkedIn a few weeks back.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Stumbled upon more misinformation about WCAG 3 and I can tell you with 100% certainty, the same goes with APCA, that they are both exploratory and public beta respectively. Not at all close to being standard.&lt;/p&gt;
&lt;p&gt;With regard to WCAG 3: “Status: Exploratory Draft. The May 2024 WCAG 3 Working Draft includes potential outcomes that we are exploring. The final set of outcomes in WCAG 3 will be different from this draft. Outcomes will be edited, added, combined, and removed.”&lt;/p&gt;
&lt;p&gt;The key words there being “exploratory draft”. Until such time it is a “W3C Recommendation” and until such time you go to read it and it states in the “Status of this document” section, “W3C recommends the wide deployment of this specification as a standard for the Web.” Then it will have been approved for publication and use.&lt;/p&gt;
&lt;p&gt;With regard to APCA: “APCA W3 is in public beta” and on the GitHub repo page, under the disclaimer, it is even stated:&lt;/p&gt;
&lt;p&gt;“APCA is being evaluated as a replacement for WCAG 2 contrast math for future standards and guidelines, however, standards that will be incorporating APCA are still developmental.”&lt;/p&gt;
&lt;p&gt;The key word there is “developmental “. Meaning “in development”, not ready for broader public use.&lt;/p&gt;
&lt;p&gt;The current recommendations are the WCAG 2.2 guidelines and the current WCAG color-contrast scoring method.&lt;/p&gt;
&lt;p&gt;There is work being done by lots of great people in the W3C to develop WCAG 3 and APCA but they aren&#39;t at all close to published work, unanimous approval, or recommendation status.&lt;/p&gt;
&lt;p&gt;So, anyone telling you or posting and proclaiming that WCAG 3 and APCA are the standard, are ready for use, are accepted at any official level, are being used by governments at any level (local through federal) are not well-informed, not knowing or reading any of the documentation, or just flat out serving up misinformation and aren&#39;t aware of the confusion they are causing.&lt;/p&gt;
&lt;p&gt;TL;DR: WCAG 3 and APCA are not approved standards and won&#39;t be for many, many years.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Note: WCAG (Web Content Accessibility Guidelines) and APCA (Accessible Perceptual Contrast Algorithm)&lt;/p&gt;
&lt;p&gt;After that, I figured I may not see anything else for a little while, but I always prove myself wrong. Today in my online travels I once again found more misinformation. I urge you or anyone to call this out and educate people that are unknowingly spreading this around (or maybe knowingly, you never know) and correct it before it becomes a huge problem like most of the issues we see today with the spreading of mis and disinformation.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>You Down With DID?</title>
		<link href="https://toddl.dev/posts/you-down-with-did/"/>
		<updated>Thu, 14 Nov 2024 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/you-down-with-did/</id>
		<content type="html">&lt;h2 id=&quot;yeah-you-know-me!&quot; tabindex=&quot;-1&quot;&gt;Yeah You Know Me!&lt;/h2&gt;
&lt;p&gt;I had been having a hell of a time getting my domain name to be my handle for quite a while on Bluesky. When I tried to change my handle to my domain name, all I got was this:&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1731640373/settings.png&quot; alt=&quot;Settings in Bluesky to change your handle to a custom domain.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;and to no avail for weeks I had not been able to get the new DID to work. It appeared to be that Bluesky, somewhere along the line was holding the old DID and nothing was changing. So I &lt;em&gt;did&lt;/em&gt; (pun intended) to some research. A lot of research and here is what I know and the steps I took to fix it.&lt;/p&gt;
&lt;h2 id=&quot;spill-the-beans-man!&quot; tabindex=&quot;-1&quot;&gt;Spill The Beans Man!&lt;/h2&gt;
&lt;p&gt;I started with a lot of misses as far as what steps to take at the beginning of my search. A few questions on Stack Overflow, some articles written and general chatter that led to a dead end each time. Then I found the &lt;img src=&quot;https://bsky-debug.app/&quot; alt=&quot;Bluesky Debug Page&quot; /&gt; on one of my rounds of searching for clues and answers.&lt;/p&gt;
&lt;p&gt;From there I clicked the &amp;quot;Handles&amp;quot; tab and searched for &lt;code&gt;toddl.dev&lt;/code&gt; and it brought up this information:&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1731640855/debug.jpg&quot; alt=&quot;The Bluesky Debug page showing the information for DNS and HTTP authorization for the domain.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;Then I went to my host and domain provider (Netlify, in my case) and I went into the Domain Management section. I had removed the old DID a while back and put the new one in during my all over the place debugging, so I added the old back in and got the image above. Then I deleted the old record, then I got the DNS error but the HTTP authorization  went all green. Great!&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1731640855/dnspoo.jpg&quot; alt=&quot;The Bluesky Debug page showing everything passing for DNS and HTTP verification.&quot; /&gt;&lt;/p&gt;
&lt;h2 id=&quot;the-part-that-gets-tricky&quot; tabindex=&quot;-1&quot;&gt;The Part That Gets Tricky&lt;/h2&gt;
&lt;p&gt;Now I have a feeling this had absolutely nothing to do with anything, but I did a DNS flush from my Windows machine, just in case.&lt;/p&gt;
&lt;p&gt;&lt;code&gt;ipconfig /flushdns&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;ipconfig /renew&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;Then I could not get the next command to work even running Powershell as an admin (go figure). Went on the Mac and ran:&lt;/p&gt;
&lt;p&gt;&lt;code&gt;ipconfig /registerdns&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;Meanwhile, I popped open another terminal tab and &lt;code&gt;dig toddl.dev&lt;/code&gt; got that info, checked everything out. Things on the HTTP side were still good. Perfect. Things on the DNS side were not still.&lt;/p&gt;
&lt;p&gt;I added the Bluesky Custom Domain extension in Netlify in the Extensions part of the admin for the domain, followed those steps not using the DNS option but the .well-known option. I still have the &lt;code&gt;atproto-did&lt;/code&gt; file as well. I will be leaving it and sitting on my hands.&lt;/p&gt;
&lt;h2 id=&quot;that-sounds-like-a-ton-of-work&quot; tabindex=&quot;-1&quot;&gt;That Sounds Like A Ton of Work&lt;/h2&gt;
&lt;p&gt;Well it was, and I figure, it couldn&#39;t hurt. Then I found this gem, which I believe is the bread and butter of the whole thing. I went through prior to this final fix and ran into some issues. Namely:&lt;/p&gt;
&lt;pre class=&quot;language-java&quot;&gt;&lt;code class=&quot;language-java&quot;&gt;curl&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;6&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Could&lt;/span&gt; not resolve host&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; xrpc
curl&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;URL&lt;/span&gt; rejected&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Bad&lt;/span&gt; hostname
curl&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;URL&lt;/span&gt; rejected&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Bad&lt;/span&gt; hostname
curl&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;URL&lt;/span&gt; rejected&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Bad&lt;/span&gt; hostname&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;So I did my due diligence (and being as stubborn as I can be, not giving up tonight) and looked up ways to remedy that situation, which is why I ran the &lt;code&gt;ipconfig&lt;/code&gt; commands. Then I went off in another direction when I &lt;a href=&quot;http://pxtl.ca/2023/12/13/bluesky-api/&quot;&gt;found this page&lt;/a&gt;. I figured if the extension in Netlify wasn&#39;t working and the settings through Bluesky weren&#39;t working, give this a try.&lt;/p&gt;
&lt;p&gt;Again, I tried it once and failed due to some bad typing on my part. So I repeated the steps, triple-checked my work, and ran the commands again (all one line and spaces between the hyphens at the beginning e.g., Invoke-RestMethod -Method POST):&lt;/p&gt;
&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;$sessionResponse &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; Invoke&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;RestMethod 
&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;Method &lt;span class=&quot;token constant&quot;&gt;POST&lt;/span&gt; 
&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;Uri https&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;bsky&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;social&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;xrpc&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;com&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;atproto&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;server&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;createSession &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt; 
-body (@{identifier = &#39;email@example.com&#39;; password =&#39;PASSWORDGOESHERE&#39;} | ConvertTo-Json) &lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt; 
&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;ContentType &lt;span class=&quot;token string&quot;&gt;&#39;application/json&#39;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Replace your email in the &lt;code&gt;identifier&lt;/code&gt; part of the above code and use your password in the &lt;code&gt;password&lt;/code&gt; part naturally.&lt;/p&gt;
&lt;p&gt;As soon as that ran with no issues, I ran a &lt;code&gt;$sessionResponse&lt;/code&gt; command, had no issues there, then proceeded to doing a &lt;code&gt;$sessionresponse.did&lt;/code&gt;. This turned out to reveal no errors. So whatever I did with the DNS, whether it was the flush and all that or if it was something else I did, it worked. I can press on.&lt;/p&gt;
&lt;p&gt;I made sure to run the &lt;code&gt;Resolve-DnsName _atproto.toddl.dev&lt;/code&gt; command and that came back clean.&lt;/p&gt;
&lt;pre class=&quot;language-php&quot;&gt;&lt;code class=&quot;language-php&quot;&gt;Name                        Type &lt;span class=&quot;token constant&quot;&gt;TTL&lt;/span&gt;   Section    PrimaryServer               NameAdministrator
&lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;                        &lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;   &lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;    &lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;               &lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;
toddl&lt;span class=&quot;token operator&quot;&gt;.&lt;/span&gt;dev                   &lt;span class=&quot;token constant&quot;&gt;SOA&lt;/span&gt;  &lt;span class=&quot;token number&quot;&gt;3600&lt;/span&gt;  Authority  dns1&lt;span class=&quot;token operator&quot;&gt;.&lt;/span&gt;wha&lt;span class=&quot;token operator&quot;&gt;.&lt;/span&gt;tevr&lt;span class=&quot;token operator&quot;&gt;.&lt;/span&gt;itis          hostmaster&lt;span class=&quot;token operator&quot;&gt;.&lt;/span&gt;your&lt;span class=&quot;token operator&quot;&gt;.&lt;/span&gt;com&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Awesome! Let&#39;s move on. I then ran (again, all one line and spaces between the hyphens at the beginning e.g., Invoke-RestMethod ` -Method POST ...):&lt;/p&gt;
&lt;pre class=&quot;language-php&quot;&gt;&lt;code class=&quot;language-php&quot;&gt;Invoke&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;RestMethod &lt;span class=&quot;token string backtick-quoted-string&quot;&gt;` 
-Method POST `&lt;/span&gt; 
&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;Uri https&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token comment&quot;&gt;//bsky.social/xrpc/com.atproto.identity.updateHandle ` &lt;/span&gt;
&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;Headers @&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;Authorization &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string double-quoted-string&quot;&gt;&quot;Bearer $(&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token variable&quot;&gt;$sessionResponse&lt;/span&gt;&lt;/span&gt;.accessJwt)&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token string backtick-quoted-string&quot;&gt;` 
-Body (@{ = &#39;toddl.dev&#39;} | ConvertTo-Json) `&lt;/span&gt; 
&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;ContentType &lt;span class=&quot;token string single-quoted-string&quot;&gt;&#39;application/json&#39;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Nothing happened, no errors. let&#39;s go back to the Settings panel in Bluesky and let&#39;s try this again. Looks like resetting the bearer worked!&lt;/p&gt;
&lt;p&gt;Clicked the &amp;quot;Verify DNS&amp;quot; in the &amp;quot;Change handle&amp;quot; settings and yes! It works!&lt;/p&gt;
&lt;p&gt;Now I have my domain as my handle and I can stop obsessing about a fix. I will say, as of this article, that I don&#39;t know if this has anything to do with the current &amp;quot;Invalid Handle&amp;quot; bug, but, I would suggest giving the API method of changing your handle a try and see if that works. Your mileage may vary.&lt;/p&gt;
&lt;p&gt;Now I can rest easily, cross one more thing off my list of to-do&#39;s and move on to obsessing about something else like I normally do. Maybe sleep would be a good thing to focus on next?&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Please Clap</title>
		<link href="https://toddl.dev/posts/please-clap/"/>
		<updated>Sat, 23 Nov 2024 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/please-clap/</id>
		<content type="html">&lt;h2 id=&quot;this-is-just-a-test&quot; tabindex=&quot;-1&quot;&gt;This Is Just A Test&lt;/h2&gt;
&lt;p&gt;Trying out something here, so please excuse the clutter. Thank you.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Networking</title>
		<link href="https://toddl.dev/posts/networking/"/>
		<updated>Tue, 17 Dec 2024 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/networking/</id>
		<content type="html">&lt;h2 id=&quot;i-had-the-time-of-my-life-and-more-so-i-decided-to-write-about-it&quot; tabindex=&quot;-1&quot;&gt;I had the time of my life and more so I decided to write about it&lt;/h2&gt;
&lt;p&gt;It was 2019, I was bored. The pandemic had hit and things were in unchartered territory. So I decided to throw myself out there in a way I had never done before. The world of public speaking.&lt;/p&gt;
&lt;p&gt;I never really wanted to, nor did I ever think about putting myself out there until it was around 2018 that I wanted to speak at An Event Apart (RIP) and I thought that I could write up some accessibility articles to start off with and go from there. Little did I know.&lt;/p&gt;
&lt;h2 id=&quot;little-did-i-know&quot; tabindex=&quot;-1&quot;&gt;Little Did I Know&lt;/h2&gt;
&lt;p&gt;I never thought I would spend four years speaking to people about accessibility and three of those years traveling to conferences speaking about accessibility (as well as other topics as well towards the end). It was a wild ride and sometimes a tiring ride at that with it&#39;s moments (Grand Rapids, Michigan to Kansas City, MO).&lt;/p&gt;
&lt;p&gt;Little did I know I would end up meeting a ton of people and all of them are brilliant people in their respective areas and some of the nicest, most welcoming people I ever met. I never met anyone that I really did not like.&lt;/p&gt;
&lt;p&gt;Whether it was &lt;a href=&quot;https://magnoliajs.com/&quot;&gt;MagnoliaJS&lt;/a&gt; or &lt;a href=&quot;https://devnexus.org/&quot;&gt;Devnexus&lt;/a&gt; to &lt;a href=&quot;https://www.beercitycode.com/&quot;&gt;Beer City Code&lt;/a&gt; to &lt;a href=&quot;https://kcdc.info/&quot;&gt;KCDC&lt;/a&gt; I met a great group of speakers and a terrific bunch of attendees. Hallway tracks were always the best, post-conference days were always filled with adventure (especially the &amp;quot;Conference That Shall Not Be Named&amp;quot;) and shenanigans.&lt;/p&gt;
&lt;h2 id=&quot;speaker-fam&quot; tabindex=&quot;-1&quot;&gt;Speaker Fam&lt;/h2&gt;
&lt;p&gt;My friends, the speakers I got to meet and mingle with, discuss many things, joke around with, enjoy a meal with, you are a phenomenal group of people that I will always be grateful and thankful for getting to know you and even after the events were over, following you and your work. I can&#39;t express how much fun it was.&lt;/p&gt;
&lt;p&gt;My close &#39;support network&#39;, you know who you are. Whether it was a bad day and I was in my head, whether it was making sure I stayed on my path of sobriety, I love you all. sincerely, you were my lifeline and I am damn grateful for those moments you all got me out of my head just by being yourselves and taking the time out of your week to be there for me. I hope I reciprocated enough as a small return of payment.&lt;/p&gt;
&lt;h2 id=&quot;the-hallway-tracks&quot; tabindex=&quot;-1&quot;&gt;The Hallway Tracks&lt;/h2&gt;
&lt;p&gt;If you were an attendee that came to ask questions, to thank me for my talk or workshop, to just chit-chat, thank you. You are the reason I was there, to educate you all on accessibility. If only one of you thanked me, per conference, or even as a whole, I did my job. I can&#39;t stress enough that these events would be there if it was not for the attendees (as well as sponsors and organizers, of course).&lt;/p&gt;
&lt;h2 id=&quot;what-is-this-all-about%3F&quot; tabindex=&quot;-1&quot;&gt;What Is This All About?&lt;/h2&gt;
&lt;p&gt;It looks like 2025 may be a wash and moving forward, I may be relegated. I may become a retiree and as much as I don&#39;t want to just yet, it has been a path of exhaustion for me. This time around has taken all the wind out of my sails. So many times, so many resumes, not one job. That may change, I am giving it the first 2-3 months of 2025, but if it doesn&#39;t pan out, it was a blast and something I will remember for the rest of my days.&lt;/p&gt;
&lt;p&gt;✌🏻&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Year in Review 2024</title>
		<link href="https://toddl.dev/posts/year-in-review-2024/"/>
		<updated>Mon, 30 Dec 2024 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/year-in-review-2024/</id>
		<content type="html">&lt;h2 id=&quot;it&#39;s-been-a-roller-coaster&quot; tabindex=&quot;-1&quot;&gt;It&#39;s Been A Roller Coaster&lt;/h2&gt;
&lt;p&gt;Well, here it is, my year in review after skipping a few. I&#39;ll spare you dear reader of the ugliest details.&lt;/p&gt;
&lt;p&gt;The health front has been a gigantic roller coaster. Myself, my partner and her issues, my family members. There has been a lot in that aspect that was concerning for the most part. A little less now, as of this writing.&lt;/p&gt;
&lt;p&gt;My issues I haven&#39;t divulged to anyone, and while they have not been grave issues, they have kept me from doing some of the things I enjoy doing. Meetings, W3C work, projects I have wanted to start and stuff I have wanted to complete.&lt;/p&gt;
&lt;p&gt;One death in the family, three instances of cancer diagnoses that have fortunately two have come out free of that awful stuff, one we  are waiting to hear about (that one has to deal with United HealthCare, so we&#39;re bracing for the appeals process already. IFKYK). My mind has been all over the place more than when I was traveling the past three years.&lt;/p&gt;
&lt;h2 id=&quot;employment&quot; tabindex=&quot;-1&quot;&gt;Employment&lt;/h2&gt;
&lt;p&gt;I ended 2023 with a bang and had an auditing job that I completed and I was fortunate to work for a company that already had a culture of accessibility. That kept me afloat for half the year.&lt;/p&gt;
&lt;p&gt;The job interview process has been as tiring as all the hunting and applying can be these days. I was fortunate enough to speak with someone at Apple about a role, but sadly, I did not get that role. It gave me the confidence to know I still have value at 53 years old.&lt;/p&gt;
&lt;p&gt;I am trying hard to maintain that air of positivity going into 2025.&lt;/p&gt;
&lt;h2 id=&quot;the-good-stuff&quot; tabindex=&quot;-1&quot;&gt;The Good Stuff&lt;/h2&gt;
&lt;p&gt;I was not going to end this all negative. The TL;DR of it is this, and it is really all I need:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;I stayed sober.&lt;/li&gt;
&lt;li&gt;I reconnected with my children.&lt;/li&gt;
&lt;li&gt;I&#39;ve managed to deal with the negative a lot better than I have ever.&lt;/li&gt;
&lt;li&gt;I can walk away from things or people that are toxic without hesitation and with indifference.&lt;/li&gt;
&lt;li&gt;My coding skills may be rusty, but I still got it.&lt;/li&gt;
&lt;li&gt;I stopped selling myself short and would be open to a manager role in accessibility, but no more auditing.&lt;/li&gt;
&lt;li&gt;I know my value.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Thank you to those who stuck by me during my times of flakiness, thank you dear reader, thank you to my higher power for keeping me sober, and hopefully, with what we have looming for the next few years, we can all come out of this alive and with those whom we love and those whom we call friends.&lt;/p&gt;
&lt;p&gt;✌🏻&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Todd Vs Toddle</title>
		<link href="https://toddl.dev/posts/todd-vs-toddle/"/>
		<updated>Fri, 07 Mar 2025 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/todd-vs-toddle/</id>
		<content type="html">&lt;h2 id=&quot;wait%E2%80%A6-toddl-or-toddle-or-toddl%3F&quot; tabindex=&quot;-1&quot;&gt;Wait… ToddL or Toddle or Toddl?&lt;/h2&gt;
&lt;p&gt;Yes.&lt;/p&gt;
&lt;p&gt;So I was up early today and planning on doing nothing when I was watching the stream of one of my favorite people, Salma Alam-Naylor, &lt;a href=&quot;https://twitch.tv/whitep4nth3r&quot;&gt;a.k.a. whitep4nth3r&lt;/a&gt; and Salma was rebuilding her website with Toddle.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://toddle.dev/&quot;&gt;Toddle&lt;/a&gt; is a &amp;quot;visual web framework&amp;quot; so as a fellow Todd, I had to check this out. I said I would not pass judgment, but I will describe what I see that could be improved upon from an accessibility standpoint.&lt;/p&gt;
&lt;h2 id=&quot;caveat&quot; tabindex=&quot;-1&quot;&gt;Caveat&lt;/h2&gt;
&lt;p&gt;Yes, it is a work in progress I understand that but accessibility needs to be considered (and I believe it has been here) from before the concept phase. Things get lost in the shuffle or developers don&#39;t understand the guidelines and accessibility so this is why I felt compelled to write this. WHat I see so far is great, but loads of room for improvement.&lt;/p&gt;
&lt;h2 id=&quot;first-impression&quot; tabindex=&quot;-1&quot;&gt;First Impression&lt;/h2&gt;
&lt;p&gt;First impression is it is Figma meets front-end development. Which is great. I think tools that make the job less stressful and alleviates the daily grind of the developer is great. To an extent. Yes, I am going to talk about accessibility.&lt;/p&gt;
&lt;p&gt;It is a good looking tool that cannot be denied and the docs do need some work (and I have been told they are going to be reworked), and I love the idea of &amp;quot;Challenges&amp;quot; as a way to onboard someone to the product.&lt;/p&gt;
&lt;h2 id=&quot;accessibility&quot; tabindex=&quot;-1&quot;&gt;Accessibility&lt;/h2&gt;
&lt;p&gt;I already have an issue with things being obscured and not being able to manipulate the layout so I can read what I need as I work in three different spots in the UI at once. I like to use the keyboard occasionally to navigate a page.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1741357094/toddle1.png&quot; alt=&quot;A view of the Toddle.dev interface showing how to create a Weather App&quot; /&gt;&lt;/p&gt;
&lt;p&gt;I&#39;d love to be able to resize the area that has the formulas in it to &amp;quot;un&amp;quot;-hide the menu it is obscuring and I also wish that formula area was not a &lt;a href=&quot;https://www.w3.org/TR/WCAG22/#no-keyboard-trap&quot;&gt;keyboard trap&lt;/a&gt;. So those are the first two things I noticed right away.&lt;/p&gt;
&lt;p&gt;The second is the way everyone can re-style a heading element (as you will see if you do the Weather App challenge) which you should never do as far as font sizing goes. Styling an &lt;code&gt;h1&lt;/code&gt; to look like an &lt;code&gt;h3&lt;/code&gt; or &lt;code&gt;h4&lt;/code&gt; &lt;a href=&quot;https://www.w3.org/TR/WCAG22/#info-and-relationships&quot;&gt;is not&lt;/a&gt; &lt;img src=&quot;https://www.w3.org/TR/WCAG22/#section-headings&quot; alt=&quot;suggested&quot; /&gt;.&lt;/p&gt;
&lt;p&gt;Also not a fan of the ability to place placeholders in an input field, but, that is on people to know that placeholders are not labels and placeholders are helper text. Those placeholders that are helper text shouldn&#39;t be read by a screen reader and hidden from assistive technologies. Visual labels are the way, my friends.&lt;/p&gt;
&lt;p&gt;Speaking of visual labels...&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1741360583/huh.png&quot; alt=&quot;A screen capture of a triangle icon and when hovered over with the cursor, it says, No issues! Good Job!&quot; /&gt;&lt;/p&gt;
&lt;p&gt;More visual guidance and helper labels/text would be beneficial for anyone with cognitive issues or memory loss. Even for busy people doing ten things at once to where these improvements benefit everyone.&lt;/p&gt;
&lt;h2 id=&quot;early-final-thoughts&quot; tabindex=&quot;-1&quot;&gt;Early Final Thoughts&lt;/h2&gt;
&lt;p&gt;Great tool, needs some work, needs an accessibility audit and some retooling in the name of accessibility but overall I like what I am looking at and will continue to tinker around in Toddle. I just hope it is not another tool that gets misused in the name of rapid development forsaking accessibility.&lt;/p&gt;
&lt;h2 id=&quot;wish-list&quot; tabindex=&quot;-1&quot;&gt;Wish List&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;The ability to resize the formula area&lt;/li&gt;
&lt;li&gt;the ability to not have main parts of onboarding obscured&lt;/li&gt;
&lt;li&gt;documentation about accessibility (how-to use semantic HTML, examples of an accessible component, guiding the developer through education, good examples vs bad examples, etc.)&lt;/li&gt;
&lt;li&gt;A good, thorough, accessibility audit and usability audit&lt;/li&gt;
&lt;li&gt;Better visual guidance (accessibility) and better labelling of interactive components.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;summary&quot; tabindex=&quot;-1&quot;&gt;Summary&lt;/h2&gt;
&lt;p&gt;Todd L. likes Toddle. Again, I know it is a work in progress, so I am interested to see what happens in the future. I really do like this tool and I really did enjoy taking it for a spin. I hope great things come out of this tool for developers.&lt;/p&gt;
&lt;p&gt;They can always hire me to come on as Head of Accessibility too and we can make this tool even better!&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Lazy</title>
		<link href="https://toddl.dev/posts/lazy/"/>
		<updated>Mon, 29 Sep 2025 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/lazy/</id>
		<content type="html">&lt;h2 id=&quot;hello-again&quot; tabindex=&quot;-1&quot;&gt;Hello again&lt;/h2&gt;
&lt;p&gt;Well, it certainly has been forever and a day, hasn&#39;t it?&lt;/p&gt;
&lt;p&gt;I am still around and up to some new shenanigans. Here&#39;s a rundown.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Founded a startup&lt;/li&gt;
&lt;li&gt;Founded another startup (non-tech)&lt;/li&gt;
&lt;li&gt;W3C Safety &amp;amp; Deception work for WCAG 3&lt;/li&gt;
&lt;li&gt;Weekly &amp;amp; Bi-weekly calls with folks&lt;/li&gt;
&lt;li&gt;Decided to do one more talk at MagnoliaConf in October&lt;/li&gt;
&lt;li&gt;Recorded a podcast on Boagworld with Paul Boag and Marcus Lillington&lt;/li&gt;
&lt;li&gt;Health &amp;amp; personal issues because that&#39;s life&lt;/li&gt;
&lt;li&gt;and trying to land one more role in tech.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Personal little side projects aside, I try to keep busy so I don&#39;t get cabin fever and so far, so good but I am tired, boss. Real tired.&lt;/p&gt;
&lt;p&gt;Hoping to get to this site soon and clean it up, change the design, and much more.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>The Architecture of Anxiety and Shame, Part One</title>
		<link href="https://toddl.dev/posts/the-architecture-of-anxiety-and-shame-part-one/"/>
		<updated>Tue, 07 Oct 2025 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/the-architecture-of-anxiety-and-shame-part-one/</id>
		<content type="html">&lt;h2 id=&quot;part-one%2C-the-scarcity-and-pressure-to-make-decisions-and-placing-guilt-in-the-users-lap&quot; tabindex=&quot;-1&quot;&gt;Part One, The Scarcity and Pressure to Make Decisions and Placing Guilt in the Users Lap&lt;/h2&gt;
&lt;h3 id=&quot;humanity-and-the-choices-people-make&quot; tabindex=&quot;-1&quot;&gt;Humanity and the Choices People Make&lt;/h3&gt;
&lt;p&gt;In the work and research I have done for a number of years now, I have found that the choices we make as developers, technologists, organizations and companies, founders and CEOs has come down to compromising humanity. There are very few instances I have found where the lines are drawn in the sand and never crossed by anyone I just mentioned, which is why the work I have done to bring perhaps a little bit of change to the WCAG (Web Content Accessibility Guidelines) 3 document (which is still in development and not a standard, please refer to &lt;a href=&quot;https://www.w3.org/TR/WCAG22/&quot;&gt;WCAG 2.2&lt;/a&gt; &lt;a href=&quot;https://www.w3.org/TR/WCAG21/&quot;&gt;or 2.1&lt;/a&gt;) that we can mitigate some of the damage that has been done in the decades of grift and deceit that have been laid over the foundation of the Web as we know it.&lt;/p&gt;
&lt;p&gt;“In the name of growth and profit!” is the steady battle cry that is silently shouted as the battle horns are sounded from the tops of the towers that CEOs and companies use as a bastion of corporate greed and capitalism and whatever methods they need to employ and deploy, they will certainly get all their workers that fall into line, they will do that for their fearless leaders who strut their stuff once, maybe twice a year on a stage with a big theatrical show for all to see.&lt;/p&gt;
&lt;p&gt;Lost is the humanity I can see clearly. How that kid that just wanted to code, grew up to want to take over the world and throw away any kind of humanity though, that is the part that baffles me. Where does that get lost and at what point does something inside a person&#39;s head just snap and say, &#39;Let&#39;s do evil things today!&#39;? As I try to answer those questions I have, I also look to help others that are the targets of these deceptive practices now so that they do not fall prey to the silent hunter that is literally stalking them.&lt;/p&gt;
&lt;p&gt;I wanted to go over four patterns, four of many patterns, that are used to play with people psychologically, that draw out the anxiety and fear, the guilt and shame, and how these patterns are used and what we can do to combat them.&lt;/p&gt;
&lt;h2 id=&quot;the-three-amigos&quot; tabindex=&quot;-1&quot;&gt;The Three Amigos&lt;/h2&gt;
&lt;h3 id=&quot;timed-based-urgency%2Ffake-urgency%2Fconfirmshaming&quot; tabindex=&quot;-1&quot;&gt;Timed-based urgency/Fake urgency/Confirmshaming&lt;/h3&gt;
&lt;p&gt;The exploitation of FOMO (Fear of Missing Out) and social comparison is used a lot. Literally everywhere in a digital space where there is some kind of revenue involved. Social anxiety is something that is used to pressure people into action. Many deceptive patterns come in pairs. Some, come in groups, like The Outsiders (a great movie and book by the way).&lt;/p&gt;
&lt;p&gt;Fake scarcity (FOMO), time pressure (anxiety), and confirmshaming (guilt/social inadequacy) are used to target the social fears that are very real that affect 1 in 10 Americans. The economic and emotional/psychological cost is massive and any design that amplifies that anxiety for-profit isn&#39;t bad business. It is an ethical attack on the public&#39;s well-being. Businesses that use these patterns should never have business and people should never deal with companies that use these patterns for-profit against them.&lt;/p&gt;
&lt;h3 id=&quot;the-data-and-key-points&quot; tabindex=&quot;-1&quot;&gt;The Data and Key Points&lt;/h3&gt;
&lt;p&gt;The condition of social anxiety isn&#39;t just a rare shyness, it is actually &lt;a href=&quot;https://socialphobia.org/social-anxiety-disorder-definition-symptoms-treatment-therapy-medications-insight-prognosis&quot;&gt;the third largest mental health care problem globally according to the Social Anxiety Association&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;According to sources from the National Institute of Mental Health, Yale Medicine, Mental Health America, and the American Psychological Association, 12.1% of adults experience &lt;a href=&quot;https://www.mayoclinic.org/diseases-conditions/social-anxiety-disorder/symptoms-causes/syc-20353561&quot;&gt;Social Anxiety Disorder (SAD)&lt;/a&gt; at some point in their lives. An estimated 7.1% of adults in the U.S. had SAD in the past year, which is approximately 15 million people. Of those adults with SAD in the past year, 29.9% of those people had serious impairment, and 38.8% had moderate impairment in their lives. The onset of SAD typically begins during childhood or teenage years with the median age being 13 years old.&lt;/p&gt;
&lt;p&gt;The impact on function, work, and education can limit a person&#39;s participation in society, which is exactly where deceptive patterns in consumer tech can inflict the most damage. For instance individuals with SAD are over two times more likely to be unemployed than those without the disorder. Approximately 20% os people with SAD reported declining a job offer or promotion due to social fears.&lt;/p&gt;
&lt;p&gt;Patients with SAD report greater absenteeism and reduced productivity due to social fears compared to control groups. Individuals with SAD are significantly less likely to aspire to social jobs suggesting they pre-emptively narrow their careers paths to avoid social scrutiny. SAD is consistently linked to lowered educational attainment, reduced income, and financial dependence.&lt;/p&gt;
&lt;p&gt;The presence of SAD makes people vulnerable to other issues which is exactly the vulnerability that deceptive patterns seek to exploit in people. 66% of people with SAD have one or more additional mental health disorders, most common is clinical depression. An estimated one-fifth of people with SAD also struggle with alcohol use disorder. Women are more likely to have SAD than men, 8% to 6.1% past-year prevalence in U.S. adults.&lt;/p&gt;
&lt;p&gt;Passive social media usage has been directly linked to an increase in social anxiety symptoms in some people.&lt;/p&gt;
&lt;h2 id=&quot;the-examples&quot; tabindex=&quot;-1&quot;&gt;The Examples&lt;/h2&gt;
&lt;h3 id=&quot;fake-scarcity&quot; tabindex=&quot;-1&quot;&gt;Fake Scarcity&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;The Pattern:&lt;/strong&gt; Creating a false sense of limited availability of a product to pressure a user into an immediate purchase.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;The Sources:&lt;/strong&gt; Booking and travel websites.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;The Case:&lt;/strong&gt; You have seen them in your digital travels. Many major flight and hotel booking platforms that display messages like “Only 4 rooms left!” or “Only 2 seats remaining!” Even, “6 people are booking this flight right now!”&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;The Deception:&lt;/strong&gt; Often, the price is not the only price or the scarcity is only for a specific, non-essential room type, for instance. The key manipulation is the weaponization of FOMO to get the user to skip comparison shopping, to get them to make a rash decision, or even review the cancellation policy. The war cry here is “Get the sale by any means necessary!”&lt;/p&gt;
&lt;h3 id=&quot;time-pressure&quot; tabindex=&quot;-1&quot;&gt;Time Pressure&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;The Pattern:&lt;/strong&gt; Usage of countdown timer or short windows of expiration that are often meaningless or reset easily, preventing rational-based decision-making.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;The Sources:&lt;/strong&gt; Flash sales and countdown clocks.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;The Case:&lt;/strong&gt; A popular e-commerce site uses a platform that is the widely used platform for e-com websites. That popular e-com platform has a plugin store, and that plugin store has a plugin for flash sales. “Sale ends in 11:34:21!” that is thrown in your face, you cannot miss the component this thing has been designed by. In fact, this is a plugin that got banned from this very widely-used e-com platform&#39;s plugin store, yet they still exist as a standalone product! You can go into the (plugin, at the time) administration panel and choose to restart the timer and just restart it whenever you feel the desire to. A 24 hour flash sale could, in reality, last as long as the company wants.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;The Deception:&lt;/strong&gt; The deal usually reappears the next day or the timer magically resets if the user refreshes the page or the user returns later. The pattern is aimed at inducing anxiety and panic, thus making the cognitive load so high, that the user clicks that buy button before they have time to consider anything about what impact buying the product will have on them financially, the necessity of having that product, or even the actual value of owning that product.&lt;/p&gt;
&lt;h3 id=&quot;confirmshaming&quot; tabindex=&quot;-1&quot;&gt;Confirmshaming&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;The Pattern:&lt;/strong&gt; Insulting the target user or guilt-tripping them into opting into a service or remaining in a subscription they don&#39;t want or a mailing list they didn&#39;t sign up for.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;The Sources:&lt;/strong&gt; E-mail opt-outs and newsletter subscriptions and pop-ups.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;The Case:&lt;/strong&gt; When presented with an offer (usually a pop-up) to join a newsletter, the user clicks the “No” or “Decline” option, but the next pop-up or message shown is of text that is written to make the user seem foolish, selfish, morally inferior, or even less-than. A horrible individual even.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;The Deception:&lt;/strong&gt; Instead of a very simple, “No thanks”, the button or message reads, “No thanks, I don&#39;t want to save money today.” or “No, I don&#39;t care about that and prefer to stay in the dark.” Some even use cartoon or animated mascots or animals shedding a tear (looking at a very prolific language-learning platform who did this in the past and your green mascot).&lt;/p&gt;
&lt;h2 id=&quot;summary&quot; tabindex=&quot;-1&quot;&gt;Summary&lt;/h2&gt;
&lt;p&gt;To wrap this part one of a multi-part series on deceptive patterns and the weaponization behind them, I urge people to take their time and slow down. I know in the fast-paced world our lives are a mile-a-minute kind of speed where we have things to do and get things done. There is only twenty-four hours in a day and there isn&#39;t time to stray from the course. But you &lt;strong&gt;can&lt;/strong&gt;!&lt;/p&gt;
&lt;p&gt;Take time out and just do your due diligence. I know it is easy for me to say. Me, the author of this article, but I have experienced this very thing myself. SAD, FOMO, being manipulated by capitalism and corporate greed, deceptive patterns. I have lived this! Take your time, put an extra 15 minutes or more aside when you need to do a task online that involved &lt;strong&gt;your money&lt;/strong&gt;. I don&#39;t let these companies take my money freely anymore. Neither should you.&lt;/p&gt;
&lt;p&gt;Noticing the signs can be the first step to minimizing the impact these deceptive patterns have on us. Educating yourselves to make the right choice and steer clear of any company using these tactics, not doing business with the companies, can have a profound effect on a person. I can attest to this. The freedom I have now to spot the pattern and stay away from that temptation is great. It does not mean I don&#39;t occasionally fall prey to it, because I still do. This is why I wrote this article and I am writing more parts to this, and why I chose to deep dive into this to educate people.&lt;/p&gt;
&lt;p&gt;Hopefully, this helps someone and we can fight these practices and learn, grow, and become aware that fighting deceptive patterns and practices can lead to better mental health, better choices, retaining our finances, and a little bit less stress, anxiety, shame, guilt, and fear in our lives. It can also show companies and corporations that the long-standing practice of eroding the general public&#39;s mental health is over and that we will not be subjected to these practices for the betterment of our lives.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>The Architecture of Anxiety and Shame, Part Two</title>
		<link href="https://toddl.dev/posts/the-architecture-of-anxiety-and-shame-part-two/"/>
		<updated>Mon, 17 Nov 2025 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/the-architecture-of-anxiety-and-shame-part-two/</id>
		<content type="html">&lt;h2 id=&quot;roach-motels&quot; tabindex=&quot;-1&quot;&gt;Roach Motels&lt;/h2&gt;
&lt;p&gt;A &lt;em&gt;roach motel&lt;/em&gt; is a deceptive pattern to which it is easy to sign up for a service or subscription, but extremely difficult to cancel. This pattern usually involves hiding or obscuring the cancellation option, requiring users to call customer services to cancel, and in turn, makes the process of cancelling overly complex and time-consuming. This pattern can cause users to give up trying to cancel, and continue paying for the service for a longer period that they do not necessarily want to pay for any longer.&lt;/p&gt;
&lt;p&gt;These roach motels are not the kind you book that are not clean and are not great to stay in or the ones that trap those nasty little bugs that may crawl around a house or business but these are nonetheless just as gross. The roach motels that are laid out all over to trap users into and like the Eagles said:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;You can check out any time you like, but you can never leave.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Here is a couple examples.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1760385030/nyt1.png&quot; alt=&quot;A roach motel from the New York Times that forced a user to recruit three people to start paid subscriptions to the paper. The text says, quote. Learn about the different ways you can cancel your New York Times subscription. Refer three paid subscribers to cancel. End quote. Then three input boxes are available to enter three friends emails and another button at the bottom to verify the active referrals.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/colabottles/image/upload/v1760385031/nyt2.png&quot; alt=&quot;A roach motel from the New York Times that says, quote. There are several ways to unsubscribe from The Times. Once your subscription has been cancelled you will have limited access to The New York Times content. Speak with a Customer Care Advocate. Call us 866-273-3612 if you are in the U.S. Our hours are 1 a.m. to 10 p.m. E.T. Monday to Friday, and 7 a.m. to 3 p.m. on weekends and holidays. Please see our international contact information if you are outside the U.S. End quote. International content information is a link that leads you to another page. The text goes on to read, quote. Chat with a Customer Care Advocate. Click on the Chat button to the right or bottom of this page to chat with a Care Advocate. Chat is accessible 24 hours a day, 7 days a week. For more information about our cancellation policy, see our Terms of Sale. End quote. Terms of sale is also a link to another page.. End quote. Then three input boxes are available to enter three friends emails and another button at the bottom to verify the active referrals.&quot; /&gt;&lt;/p&gt;
&lt;p&gt;Fun huh?&lt;/p&gt;
&lt;p&gt;The pattern with roach motels focuses in on wearing a user out. Making you so tired, exhausted, irritated, mad, angry so that you give up and just say to hell with it, that you are not going to unsubscribe because it is a pain in the ass. Period.&lt;/p&gt;
&lt;p&gt;That pattern, to trap you, to make you think twice. To make you stop and say, “Is it worth the hassle&amp;amp;quest” That stopping cue is what these companies don&#39;t want you to access or find.&lt;/p&gt;
&lt;p&gt;Roach motels rely on a blend of cognitive fatigue and emotional pressure. The more friction a user encounters, the more their mental resources drain. At a certain point, anxiety rises (“What if I mess something up?”), frustration spikes, and shame creeps in (“Why is this so hard? Is it just me?”). This emotional cocktail is exactly what the pattern relies on to keep you trapped.&lt;/p&gt;
&lt;p&gt;Deceptive patterns like “roach motels” are not just annoyances — they’re part of a larger ecosystem of manipulative design that exploits cognitive fatigue, shame, and decision friction. These patterns weaponize user psychology in subtle ways, and the result is often emotional exhaustion, frustration, and a breakdown of trust in digital products.&lt;/p&gt;
&lt;h2 id=&quot;why-these-patterns-work&quot; tabindex=&quot;-1&quot;&gt;Why These Patterns Work&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Cognitive Fatigue&lt;/strong&gt;: People give up when their executive function is depleted.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Decision Friction&lt;/strong&gt;: Intentionally adding micro-obstacles increases abandonment.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Loss Aversion&lt;/strong&gt;: “You’ll lose access to ___” prompts trigger anxiety.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Shame Activation&lt;/strong&gt;: Feeling “irresponsible” or “incompetent” makes users hesitate to continue cancellation.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;forced-continuity&quot; tabindex=&quot;-1&quot;&gt;Forced Continuity&lt;/h2&gt;
&lt;p&gt;Forced continuity is the operational engine behind a roach motel. Once the user is trapped, continuity keeps them there — through auto-renewals, hidden opt-outs, or the removal of natural stopping points.&lt;/p&gt;
&lt;p&gt;This goes hand in hand with the roach motel, as well as other deceptive patterns. Infinite scroll again, for example. That forced continuity when the stopping cue (in this case the “load more” prompt or button) and the developer/designer has you in the palm of their hand.&lt;/p&gt;
&lt;p&gt;You are forced to continue the pattern you did not want to go down and find yourself exhausted, frustrated, angry, mad by the time you get to where you need to go but you have either given up and left or you have just said, “To hell with it” and you are done. Or you&#39;re so exhausted you don&#39;t remember what you were doing and you just give in and stay subscribed, or you keep scrolling, or you keep clicking, or you keep doing whatever it is you are doing.&lt;/p&gt;
&lt;p&gt;Forced continuity is your captor. The roach motel is where you are being kept hostage.&lt;/p&gt;
&lt;h2 id=&quot;the-stopping-cue&quot; tabindex=&quot;-1&quot;&gt;The Stopping Cue&lt;/h2&gt;
&lt;p&gt;The stopping cue is that point in the interaction where you are stopped. Whether it is an infinite scroll that the developer or designer has taken away (I will get to that in another post soon) or a roach motel that wears you out so you stop. That&#39;s the cue we need to get rid of regarding these patterns.&lt;/p&gt;
&lt;p&gt;Anti-pattern or deceptive pattern, that cue, needs to go if it is used for nefarious reasons and they usually are used just for that. From an interview with Aza Raskin, the inventor of infinite scroll;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;“I regret that I didn’t think more about how this thing would be used,” he told The Times. He compares the feature to a study in 2005 that gave users bowls of soups that constantly refilled via a tube underneath the bowl. Participants ate 70 per cent more soup than those with normal bowls and did not even notice.&lt;/p&gt;
&lt;p&gt;“I know as a designer that by taking away the stopping cue, I can make you do what I want you to do,” Mr Raskin, a former head of user design at the browser Mozilla, said.&lt;/p&gt;
&lt;p&gt;Mr. Raskin went on to say; “I contributed to this and I have been complicit,” he said. “This story that we had all been telling ourselves that we were making the world better with technology, that story has been undone, I can’t tell myself that story any more.” He added: “This is a profound moment in our species. We are losing control of the tools we made.”&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Stopping cues are the natural pauses in an experience — the end of a page, the bottom of a list, the confirmation of a completed action. When designers remove these cues, the user’s brain loses its moment to reset. Infinite scroll, autoplay, and friction-filled cancellation flows all target this vulnerability.&lt;/p&gt;
&lt;h3 id=&quot;examples-of-stopping-cues&quot; tabindex=&quot;-1&quot;&gt;Examples of Stopping Cues&lt;/h3&gt;
&lt;h4 id=&quot;pagination&quot; tabindex=&quot;-1&quot;&gt;Pagination&lt;/h4&gt;
&lt;p&gt;Example: A “Next page” button at the end of search results.&lt;br /&gt;
What it does: Forces a conscious choice: “Do I want to keep going?”&lt;br /&gt;
Removed version: Infinite scroll keeps feeding content endlessly, removing the reflection point.&lt;/p&gt;
&lt;h4 id=&quot;end-of-an-article-or-section&quot; tabindex=&quot;-1&quot;&gt;End of an Article or Section&lt;/h4&gt;
&lt;p&gt;Example: Reaching the end of a blog post.&lt;br /&gt;
Stopping cue: A natural break — the reading task is complete.&lt;br /&gt;
Removed version: Auto-loading the next article, keeping users from feeling “finished.”&lt;/p&gt;
&lt;h4 id=&quot;a-confirm-or-complete-button&quot; tabindex=&quot;-1&quot;&gt;A Confirm or Complete Button&lt;/h4&gt;
&lt;p&gt;Example: “Submit,” “Finish,” “Place order,” “Cancel subscription.”&lt;br /&gt;
Stopping cue: Allows users to finalize a mental task and move on.&lt;br /&gt;
Removed version: Breaking the action into multiple hidden steps without confirming completion.&lt;/p&gt;
&lt;h4 id=&quot;load-more-button&quot; tabindex=&quot;-1&quot;&gt;Load More Button&lt;/h4&gt;
&lt;p&gt;Example: Social media pages showing a limited number of posts with a “Load more” option.&lt;br /&gt;
Stopping cue: Users take stock before loading more content.&lt;br /&gt;
Removed version: Infinite scroll (removes the deliberate choice to continue).&lt;/p&gt;
&lt;h4 id=&quot;checkout-review-screen&quot; tabindex=&quot;-1&quot;&gt;Checkout Review Screen&lt;/h4&gt;
&lt;p&gt;Example: A summary of your cart before payment.&lt;br /&gt;
Stopping cue: Encourages review, consideration, and intention.&lt;br /&gt;
Removed version: One-click purchasing that bypasses reflection and increases impulse behavior.&lt;/p&gt;
&lt;h4 id=&quot;end-of-video-playback&quot; tabindex=&quot;-1&quot;&gt;End-of-Video Playback&lt;/h4&gt;
&lt;p&gt;Example: A video ends and pauses.&lt;br /&gt;
Stopping cue: The user chooses whether to watch more.&lt;br /&gt;
Removed version: Auto-play automatically begins the next video, bypassing the decision point.&lt;/p&gt;
&lt;h4 id=&quot;session-timeout-prompts&quot; tabindex=&quot;-1&quot;&gt;Session Timeout Prompts&lt;/h4&gt;
&lt;p&gt;Example: “Are you still watching?” / “Still browsing?”&lt;br /&gt;
Stopping cue: Signals a check-in moment and chance to disengage.&lt;br /&gt;
Removed version: Sites that never pause playback or activity, encouraging passive overuse.&lt;/p&gt;
&lt;h4 id=&quot;natural-end-of-a-workflow&quot; tabindex=&quot;-1&quot;&gt;Natural End of a Workflow&lt;/h4&gt;
&lt;p&gt;Example: Completing a form returns the user to a dashboard.&lt;br /&gt;
Stopping cue: Signals the task is complete.&lt;br /&gt;
Removed version: Forms that loop users into upsells, surveys, or optional extras that look mandatory.&lt;/p&gt;
&lt;h4 id=&quot;breaks-between-notifications&quot; tabindex=&quot;-1&quot;&gt;Breaks Between Notifications&lt;/h4&gt;
&lt;p&gt;Example: A notification digest that comes once a day.&lt;br /&gt;
Stopping cue: Encourages controlled re-engagement.&lt;br /&gt;
Removed version: Real-time, continuous notifications that keep pulling users back.&lt;/p&gt;
&lt;h4 id=&quot;physical-world-stopping-cues&quot; tabindex=&quot;-1&quot;&gt;Physical World Stopping Cues&lt;/h4&gt;
&lt;p&gt;These can help illustrate your point with a relatable analogy:&lt;br /&gt;
The last page of a book&lt;br /&gt;
The credits rolling at the end of a movie&lt;/p&gt;
&lt;p&gt;The bottom of a bowl (Aza Raskin’s soup analogy)&lt;/p&gt;
&lt;p&gt;When tech removes these cues, it removes the user’s natural ability to stop.&lt;/p&gt;
&lt;h2 id=&quot;how-to-avoid-the-pitfalls&quot; tabindex=&quot;-1&quot;&gt;How to Avoid the Pitfalls&lt;/h2&gt;
&lt;p&gt;So how does a user avoid all this garbage? Because once you’re in a roach motel or caught in a forced continuity loop, it feels like the product has all the power and you have none. The good news is: you do have options. Designers may remove stopping cues, but you can reintroduce your own.&lt;/p&gt;
&lt;h3 id=&quot;recognize-the-pattern-early&quot; tabindex=&quot;-1&quot;&gt;Recognize the pattern early&lt;/h3&gt;
&lt;p&gt;If a service made it extremely easy to sign up and suddenly very hard to leave, that’s not an accident. The moment you see emotional language (“You’re going to miss out!”), multi-step cancellation hoops, or links that keep getting smaller and smaller, you’re in a deceptive pattern. Awareness kills half of the manipulation right there.&lt;/p&gt;
&lt;h3 id=&quot;bypass-the-interface-entirely&quot; tabindex=&quot;-1&quot;&gt;Bypass the interface entirely&lt;/h3&gt;
&lt;p&gt;Most roach motels rely on you trying to find the exit inside their maze. Don’t. A quick search for “&lt;em&gt;service name&lt;/em&gt; cancel subscription” often leads straight to the hidden cancellation page. Or cancel through your bank, your credit card, or your phone’s app store. These systems don’t care about the company’s friction, and they let you escape without the drama.&lt;/p&gt;
&lt;h3 id=&quot;use-your-own-stopping-cues&quot; tabindex=&quot;-1&quot;&gt;Use your own stopping cues&lt;/h3&gt;
&lt;p&gt;If the interface won’t give you a moment to pause, create one. Slow down. Step back. Remind yourself why you came to the page in the first place. Infinite scroll, autoplay, and buried cancellation flows all depend on you reacting instead of deciding. When you reintroduce intention, the pattern loses its leverage.&lt;/p&gt;
&lt;h3 id=&quot;set-reminders-before-free-trials-end&quot; tabindex=&quot;-1&quot;&gt;Set reminders before free trials end&lt;/h3&gt;
&lt;p&gt;Forced continuity preys on forgetfulness. A calendar reminder set at the moment you sign up replaces the stopping cue the product intentionally removed. Don’t give them the luxury of you forgetting.&lt;/p&gt;
&lt;h3 id=&quot;use-virtual-or-single-use-cards&quot; tabindex=&quot;-1&quot;&gt;Use virtual or single-use cards&lt;/h3&gt;
&lt;p&gt;Some banks and privacy tools allow temporary or merchant-locked card numbers. If the company makes it difficult—or impossible—to cancel, you can simply cut off the payment source. They can’t force continuity if they can’t charge you.&lt;/p&gt;
&lt;h3 id=&quot;check-your-rights&quot; tabindex=&quot;-1&quot;&gt;Check your rights&lt;/h3&gt;
&lt;p&gt;In many regions, companies are legally required to provide a simple cancellation mechanism. Sometimes it’s buried in the footer under “Legal” or “Your Rights.” It may not be prominent, but it exists—because it has to.&lt;/p&gt;
&lt;h3 id=&quot;contact-support-as-a-last-resort&quot; tabindex=&quot;-1&quot;&gt;Contact support as a last resort&lt;/h3&gt;
&lt;p&gt;Support agents often have access to a straightforward cancellation tool the UI deliberately hides. A quick chat or email can end what the design tries to drag out.&lt;/p&gt;
&lt;p&gt;At the end of the day, avoiding these traps is about reclaiming control—your time, your attention, and your autonomy. If the design won’t respect those things, you have to put the stopping cues back in yourself.&lt;/p&gt;
&lt;p&gt;These traps work because they hijack executive function, shame, and emotional energy. The best way to escape them is to step outside the interface — cognitively or literally — and reclaim your control. When you reintroduce your own stopping cues, the manipulation loses its leverage.&lt;/p&gt;
&lt;p&gt;For users with anxiety, ADHD, or executive function challenges, these patterns aren’t just annoying — they’re debilitating. What might be a minor irritation for a designer becomes a source of spiraling frustration or shame for someone already struggling with emotional regulation.&lt;/p&gt;
&lt;p&gt;When systems are designed to trap us, the emotional cost is real. Anxiety spikes as we try to fight the interface, and shame sets in when we feel like the failure is ours rather than the design’s. Recognizing these patterns is the first step in resisting them — and the first step toward designing something better.&lt;/p&gt;
</content>
	</entry>
	
	<entry>
		<title>Building a Production-Ready Nuxt Module From Idea to Published</title>
		<link href="https://toddl.dev/posts/building-a-production-ready-nuxt-module/"/>
		<updated>Sat, 17 Jan 2026 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/building-a-production-ready-nuxt-module/</id>
		<content type="html">&lt;h2 id=&quot;how-i-built-%40colabottles%2Fcenter-div---a-complete-journey-from-problem-to-published-package&quot; tabindex=&quot;-1&quot;&gt;How I built @colabottles/center-div - a complete journey from problem to published package&lt;/h2&gt;
&lt;h3 id=&quot;the-impetus&quot; tabindex=&quot;-1&quot;&gt;The Impetus&lt;/h3&gt;
&lt;p&gt;My background allows me to pick up on programming pretty good these days, that said, I don&#39;t have an eidetic memory, I have a 40-plus year trove of what I call &amp;quot;space junk&amp;quot; floating around in my head, real life things to think about, but I understand the fundamentals and can understand and process by doing and reading. I figured this project is a great little thing to do. So I did it.&lt;/p&gt;
&lt;h3 id=&quot;the-post-i-saw&quot; tabindex=&quot;-1&quot;&gt;The Post I Saw&lt;/h3&gt;
&lt;p&gt;I was on my usual jaunt through Bluesky seeing if there was anything positive or interesting to read and laid eyes &lt;a href=&quot;https://bsky.app/profile/stephfh.dev/post/3mbmrbat4os2u&quot;&gt;on this comment&lt;/a&gt; and the reply to it by &lt;a href=&quot;https://roe.dev/&quot;&gt;Daniel Roe&lt;/a&gt;, lead maintainer with the Nuxt core team. I thought to myself, &lt;em&gt;&amp;quot;This looks like a funny thing I can do, here is something I can challenge myself with.&amp;quot;&lt;/em&gt; and thus I started doing the research.&lt;/p&gt;
&lt;h3 id=&quot;the-problem-issue-that-started-it-all&quot; tabindex=&quot;-1&quot;&gt;The &lt;s&gt;Problem&lt;/s&gt; Issue That Started It All&lt;/h3&gt;
&lt;p&gt;If you&#39;ve built anything with Nuxt (or anything with anything really), you&#39;ve probably written this code (or something similar) dozens of times:&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;div&lt;/span&gt; &lt;span class=&quot;token special-attr&quot;&gt;&lt;span class=&quot;token attr-name&quot;&gt;style&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;&lt;span class=&quot;token value css language-css&quot;&gt;&lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; grid&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token property&quot;&gt;place-items&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; center&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token property&quot;&gt;min-height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 25vh&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&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 tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;button&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Perfectly Centered&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;button&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;or a version of this in your preferred programming language.&lt;/p&gt;
&lt;p&gt;It&#39;s such a common pattern—centering content on a page—yet we repeat the same CSS (Cascading Style Sheets) Grid boilerplate over and over. Worse, when you try to abstract it into a component, you often run into &lt;strong&gt;hydration mismatches&lt;/strong&gt; that make your console light up with warnings.&lt;/p&gt;
&lt;p&gt;I decided to try and solve this once and for all by building &lt;code&gt;@colabottles/center-div&lt;/code&gt;, a simple Nuxt module for accessible, hydration-safe centering. Here&#39;s what I learned building and publishing a production-ready Nuxt module.&lt;/p&gt;
&lt;hr /&gt;
&lt;h2 id=&quot;the-journey%3A-from-idea-to-npm&quot; tabindex=&quot;-1&quot;&gt;The Journey: From Idea to npm&lt;/h2&gt;
&lt;h3 id=&quot;day-1%3A-the-hydration-nightmare&quot; tabindex=&quot;-1&quot;&gt;Day 1: The Hydration Nightmare&lt;/h3&gt;
&lt;p&gt;My first attempt was straightforward—create a Vue component that applies centering styles:&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;setup&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 class=&quot;token language-javascript&quot;&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; props &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;defineProps&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;span class=&quot;token literal-property property&quot;&gt;minHeight&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; String
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&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;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;template&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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 attr-name&quot;&gt;:style&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;{
      display: &#39;grid&#39;,
      placeItems: &#39;center&#39;,
      minHeight: minHeight
    }&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 tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;slot&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&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;
&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;template&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;Simple, right? &lt;strong&gt;Wrong. Hydration errors everywhere.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;The problem: Vue was applying styles differently on the server versus the client, causing the dreaded:&lt;/p&gt;
&lt;pre class=&quot;language-bash&quot;&gt;&lt;code class=&quot;language-bash&quot;&gt;Hydration completed but contains mismatches.&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;the-solution%3A-timing-is-everything&quot; tabindex=&quot;-1&quot;&gt;The Solution: Timing is Everything&lt;/h3&gt;
&lt;p&gt;After researching (and a lot of trial and error), I discovered the issue was about &lt;strong&gt;when&lt;/strong&gt; styles get applied. The fix involved two key changes:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;1. Use &lt;code&gt;computed&lt;/code&gt; styles instead of reactive object spreads:&lt;/strong&gt;&lt;/p&gt;
&lt;pre class=&quot;language-typescript&quot;&gt;&lt;code class=&quot;language-typescript&quot;&gt;&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;script setup lang&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;ts&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; computed &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;vue&#39;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; computedStyle &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;computed&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;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; baseStyle&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; Record&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token builtin&quot;&gt;string&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token builtin&quot;&gt;string&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; display&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;grid&#39;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

  &lt;span class=&quot;token keyword&quot;&gt;switch&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;props&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;axis&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;case&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;horizontal&#39;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;
      baseStyle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;justifyItems &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;center&#39;&lt;/span&gt;
      &lt;span class=&quot;token keyword&quot;&gt;break&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;case&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;vertical&#39;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;
      baseStyle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;alignItems &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;center&#39;&lt;/span&gt;
      &lt;span class=&quot;token keyword&quot;&gt;break&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;
      baseStyle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;placeItems &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;center&#39;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

  &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;props&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;minBlockSize&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    baseStyle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;minBlockSize &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; props&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;minBlockSize
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; baseStyle
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;script&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;

&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;template&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;component &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;is&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;as&quot;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;style&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;computedStyle&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;slot &lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;component&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;template&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;2. For the directive, use &lt;code&gt;beforeMount&lt;/code&gt; instead of &lt;code&gt;mounted&lt;/code&gt;:&lt;/strong&gt;&lt;/p&gt;
&lt;pre class=&quot;language-typescript&quot;&gt;&lt;code class=&quot;language-typescript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;defineNuxtPlugin&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;nuxtApp&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  nuxtApp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;vueApp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;directive&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;center&#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;span class=&quot;token function&quot;&gt;beforeMount&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;el&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; HTMLElement&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;style&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;display &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;grid&#39;&lt;/span&gt;
      el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;style&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;placeItems &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;center&#39;&lt;/span&gt;
      el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;style&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;height &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;100dvh&#39;&lt;/span&gt;
      el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;style&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;width &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;100%&#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;span class=&quot;token punctuation&quot;&gt;)&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;strong&gt;Result:&lt;/strong&gt; Zero hydration warnings. The component rendered identically on server and client.&lt;/p&gt;
&lt;hr /&gt;
&lt;h2 id=&quot;making-it-accessible%3A-wcag-(web-content-accessibility-guidelines)-2.2-compliance&quot; tabindex=&quot;-1&quot;&gt;Making It Accessible: WCAG (Web Content Accessibility Guidelines) 2.2 Compliance&lt;/h2&gt;
&lt;p&gt;Centering seems simple, but accessibility matters. I wanted this module to be usable by everyone, including users with disabilities. Here&#39;s what I focused on:&lt;/p&gt;
&lt;h3 id=&quot;1.-preserving-dom-(document-object-model)-order&quot; tabindex=&quot;-1&quot;&gt;1. Preserving DOM (Document Object Model) Order&lt;/h3&gt;
&lt;p&gt;Many centering techniques use absolute positioning or flexbox in ways that change visual order without changing DOM order. This breaks screen readers.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;My approach:&lt;/strong&gt; Pure CSS Grid with &lt;code&gt;place-items: center&lt;/code&gt;. No position manipulation, no reordering.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.nuxt-center-div&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; grid&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;place-items&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; center&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;h3 id=&quot;2.-usage-of-logical-properties&quot; tabindex=&quot;-1&quot;&gt;2. Usage of Logical Properties&lt;/h3&gt;
&lt;p&gt;Instead of &lt;code&gt;min-height&lt;/code&gt;, I used &lt;code&gt;min-block-size&lt;/code&gt; to respect writing modes and text direction:&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;CenterDiv&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;min-block-size&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;25vh&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;
  Content
&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;CenterDiv&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;This works correctly for RTL (Right-to-Left) languages and vertical writing modes.&lt;/p&gt;
&lt;h3 id=&quot;3.-never-manipulate-aria-(accessible-rich-internet-applications)&quot; tabindex=&quot;-1&quot;&gt;3. Never Manipulate ARIA (Accessible Rich Internet Applications)&lt;/h3&gt;
&lt;p&gt;The component doesn&#39;t add any ARIA  attributes, change roles, or trap focus. It&#39;s purely presentational—exactly what a layout utility should be. The less the ARIA, the better I say.&lt;/p&gt;
&lt;h3 id=&quot;4.-support-semantic-html-(hypertext-markup-language)&quot; tabindex=&quot;-1&quot;&gt;4. Support Semantic HTML (HyperText Markup Language)&lt;/h3&gt;
&lt;p&gt;The &lt;code&gt;as&lt;/code&gt; prop lets users choose the correct semantic element:&lt;/p&gt;
&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Default: &amp;lt;section&gt; --&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;CenterDiv&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Content&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;CenterDiv&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Use &amp;lt;main&gt; for main content --&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;CenterDiv&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;as&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;main&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;Content&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;CenterDiv&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Use &amp;lt;article&gt; for articles --&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;CenterDiv&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;as&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;article&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;Content&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;CenterDiv&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;Let&#39;s face it, semantic HTML is an art form and one we don&#39;t see too often these days that are all about &amp;quot;build fast and break things&amp;quot;. That is complete malarkey by the way. I&#39;ll explain more in a future blog post.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Standards met:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;✅ WCAG 1.3.2 - Meaningful Sequence&lt;/li&gt;
&lt;li&gt;✅ WCAG 1.4.10 - Reflow (supports 400% zoom)&lt;/li&gt;
&lt;li&gt;✅ WCAG 2.4.3 - Focus Order&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;h2 id=&quot;testing%3A-the-foundation-of-confidence&quot; tabindex=&quot;-1&quot;&gt;Testing: The Foundation of Confidence&lt;/h2&gt;
&lt;p&gt;I learned that &lt;strong&gt;tests aren&#39;t optional&lt;/strong&gt; for published packages. Users depend on your code working correctly. Here&#39;s the testing stack I built:&lt;/p&gt;
&lt;h3 id=&quot;unit-tests-(vitest-%2B-vue-test-utils)&quot; tabindex=&quot;-1&quot;&gt;Unit Tests (Vitest + Vue Test Utils)&lt;/h3&gt;
&lt;pre class=&quot;language-typescript&quot;&gt;&lt;code class=&quot;language-typescript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; describe&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; it&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; expect &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;vitest&#39;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; mount &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;@vue/test-utils&#39;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; CenterDiv &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;../../src/runtime/components/CenterDiv.vue&#39;&lt;/span&gt;

&lt;span class=&quot;token function&quot;&gt;describe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;CenterDiv&#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;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;renders with default props&#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;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; wrapper &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;mount&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;CenterDiv&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      slots&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;&amp;lt;button&gt;Test&amp;lt;/button&gt;&#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;span class=&quot;token punctuation&quot;&gt;,&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;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;wrapper&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;find&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;section&#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;span class=&quot;token function&quot;&gt;exists&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;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;wrapper&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;find&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;button&#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;span class=&quot;token function&quot;&gt;text&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;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;Test&#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;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;

  &lt;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;applies minBlockSize prop&#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;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; wrapper &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;mount&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;CenterDiv&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      props&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; minBlockSize&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;100vh&#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;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;

    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; el &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; wrapper&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;element &lt;span class=&quot;token keyword&quot;&gt;as&lt;/span&gt; HTMLElement
    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;style&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;minBlockSize&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;100vh&#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;span class=&quot;token punctuation&quot;&gt;)&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;strong&gt;Coverage:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Component rendering&lt;/li&gt;
&lt;li&gt;Props (axis, as, minBlockSize)&lt;/li&gt;
&lt;li&gt;Style application&lt;/li&gt;
&lt;li&gt;7 tests total&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;e2e-tests-(playwright)&quot; tabindex=&quot;-1&quot;&gt;E2E Tests (Playwright)&lt;/h3&gt;
&lt;pre class=&quot;language-typescript&quot;&gt;&lt;code class=&quot;language-typescript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; test&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; expect &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;@playwright/test&#39;&lt;/span&gt;

&lt;span class=&quot;token function&quot;&gt;test&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;component renders and centers content&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;async&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; page &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; page&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;goto&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;/&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; page&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;waitForLoadState&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;networkidle&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;

  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; centerDiv &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; page&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;locator&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;.nuxt-center-div&#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;span class=&quot;token function&quot;&gt;first&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;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;centerDiv&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBeVisible&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;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; styles &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; centerDiv&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;evaluate&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;el&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; computed &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; window&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getComputedStyle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;el&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      display&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; computed&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;display&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      placeItems&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; computed&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;placeItems&lt;span class=&quot;token punctuation&quot;&gt;,&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;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;

  &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;styles&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;display&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;grid&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;styles&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;placeItems&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;center&#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;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;These tests verify the component works in &lt;strong&gt;actual browsers&lt;/strong&gt;, not just in Node.&lt;/p&gt;
&lt;h3 id=&quot;accessibility-tests-(vitest-axe)&quot; tabindex=&quot;-1&quot;&gt;Accessibility Tests (vitest-axe)&lt;/h3&gt;
&lt;pre class=&quot;language-typescript&quot;&gt;&lt;code class=&quot;language-typescript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; axe &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;vitest-axe&#39;&lt;/span&gt;

&lt;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;has no accessibility violations&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;async&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;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; wrapper &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;mount&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;CenterDiv&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    slots&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;&amp;lt;button&gt;Accessible Button&amp;lt;/button&gt;&#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;span class=&quot;token punctuation&quot;&gt;,&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;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; results &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;axe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;wrapper&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;element&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;results&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;violations&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toHaveLength&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&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;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This caught issues I might have missed, like missing ARIA labels or incorrect heading hierarchy.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Final count:&lt;/strong&gt; 11 tests, 100% passing.&lt;/p&gt;
&lt;hr /&gt;
&lt;h2 id=&quot;the-module-structure%3A-following-best-practices&quot; tabindex=&quot;-1&quot;&gt;The Module Structure: Following Best Practices&lt;/h2&gt;
&lt;p&gt;The official Nuxt module template provides excellent scaffolding. Here&#39;s the structure I ended up with:&lt;/p&gt;
&lt;pre class=&quot;language-md&quot;&gt;&lt;code class=&quot;language-md&quot;&gt;center-div-module/
├── src/
│   ├── module.ts                    # Module registration
│   └── runtime/
│       ├── components/
│       │   └── CenterDiv.vue       # Component
│       ├── plugin.ts               # Directive
│       └── types.ts                # TypeScript definitions
├── playground/                     # Local development
│   ├── app.vue
│   └── nuxt.config.ts
├── test/
│   ├── unit/
│   │   └── CenterDiv.test.ts
│   └── e2e/
│       └── CenterDiv.spec.ts
├── package.json
├── tsconfig.json
└── vitest.config.ts&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;key-files-explained&quot; tabindex=&quot;-1&quot;&gt;Key Files Explained&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;&lt;code&gt;src/module.ts&lt;/code&gt;&lt;/strong&gt; - Registers the component and plugin:&lt;/p&gt;
&lt;pre class=&quot;language-typescript&quot;&gt;&lt;code class=&quot;language-typescript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; defineNuxtModule&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; addComponent&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; addPlugin&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; createResolver &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;@nuxt/kit&#39;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;defineNuxtModule&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;
  meta&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;center-div&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    configKey&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;centerDiv&#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;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;setup&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;_options&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; _nuxt&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; resolver &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;createResolver&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;meta&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;url&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;

    &lt;span class=&quot;token function&quot;&gt;addComponent&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;
      name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;CenterDiv&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      filePath&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; resolver&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;resolve&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;./runtime/components/CenterDiv.vue&#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;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;

    &lt;span class=&quot;token function&quot;&gt;addPlugin&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;
      src&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; resolver&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;resolve&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;./runtime/plugin&#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;
      mode&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;client&#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;span class=&quot;token punctuation&quot;&gt;)&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;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;strong&gt;&lt;code&gt;playground/&lt;/code&gt;&lt;/strong&gt; - Critical for development. Run &lt;code&gt;pnpm dev&lt;/code&gt; and you get a live Nuxt app with your module loaded. Instant feedback loop.&lt;/p&gt;
&lt;hr /&gt;
&lt;h2 id=&quot;the-build-process%3A-getting-ready-for-npm-(node-package-manager)&quot; tabindex=&quot;-1&quot;&gt;The Build Process: Getting Ready for npm (Node PAckage Manager)&lt;/h2&gt;
&lt;p&gt;Building the module involves several steps:&lt;/p&gt;
&lt;h3 id=&quot;1.-module-builder&quot; tabindex=&quot;-1&quot;&gt;1. Module Builder&lt;/h3&gt;
&lt;p&gt;Nuxt provides &lt;code&gt;nuxt-module-build&lt;/code&gt; which handles:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Bundling (ESM (ECMAScript Modules) + CommonJS)&lt;/li&gt;
&lt;li&gt;TypeScript compilation&lt;/li&gt;
&lt;li&gt;Type definitions generation&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class=&quot;language-bash&quot;&gt;&lt;code class=&quot;language-bash&quot;&gt;&lt;span class=&quot;token function&quot;&gt;pnpm&lt;/span&gt; run prepack&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This creates the &lt;code&gt;dist/&lt;/code&gt; folder:&lt;/p&gt;
&lt;pre class=&quot;language-md&quot;&gt;&lt;code class=&quot;language-md&quot;&gt;dist/
├── module.mjs              # ESM entry
├── module.cjs              # CommonJS entry
├── module.d.ts             # TypeScript definitions
└── runtime/
    ├── components/
    │   └── CenterDiv.vue
    └── plugin.js&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;2.-package-configuration&quot; tabindex=&quot;-1&quot;&gt;2. Package Configuration&lt;/h3&gt;
&lt;p&gt;The &lt;code&gt;package.json&lt;/code&gt; tells npm what to publish:&lt;/p&gt;
&lt;pre class=&quot;language-json&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;&quot;name&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;@colabottles/center-div&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;&quot;version&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;0.1.2&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;&quot;type&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;module&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;&quot;exports&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;&quot;.&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;&quot;types&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;./dist/types.d.ts&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;&quot;import&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;./dist/module.mjs&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;&quot;require&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;./dist/module.cjs&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;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;&quot;files&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;
    &lt;span class=&quot;token string&quot;&gt;&quot;dist&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;strong&gt;Only the &lt;code&gt;dist/&lt;/code&gt; folder gets published.&lt;/strong&gt; This keeps the package size tiny (4.4 kB).&lt;/p&gt;
&lt;h3 id=&quot;3.-publishing&quot; tabindex=&quot;-1&quot;&gt;3. Publishing&lt;/h3&gt;
&lt;pre class=&quot;language-bash&quot;&gt;&lt;code class=&quot;language-bash&quot;&gt;&lt;span class=&quot;token function&quot;&gt;npm&lt;/span&gt; publish &lt;span class=&quot;token parameter variable&quot;&gt;--access&lt;/span&gt; public&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;The &lt;code&gt;--access public&lt;/code&gt; flag is required for scoped packages (@username/package-name).&lt;/p&gt;
&lt;hr /&gt;
&lt;h2 id=&quot;ci%2Fcd%3A-automating-quality&quot; tabindex=&quot;-1&quot;&gt;CI/CD: Automating Quality&lt;/h2&gt;
&lt;p&gt;GitHub Actions runs tests on every push:&lt;/p&gt;
&lt;pre class=&quot;language-yaml&quot;&gt;&lt;code class=&quot;language-yaml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; ci
&lt;span class=&quot;token key atrule&quot;&gt;on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;branches&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; main
  &lt;span class=&quot;token key atrule&quot;&gt;pull_request&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;branches&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; main

&lt;span class=&quot;token key atrule&quot;&gt;jobs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;test&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;runs-on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; ubuntu&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;latest
    &lt;span class=&quot;token key atrule&quot;&gt;steps&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;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/checkout@v6
      &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/setup&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;node@v6
        &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
          &lt;span class=&quot;token key atrule&quot;&gt;node-version&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;20&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; corepack enable
      &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Install dependencies
        &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; pnpm install
      &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Prepare playground
        &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; pnpm run dev&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;prepare
      &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Test
        &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; pnpm run test&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This catches issues &lt;strong&gt;before&lt;/strong&gt; they reach users.&lt;/p&gt;
&lt;hr /&gt;
&lt;h2 id=&quot;challenges-i-faced-(and-how-i-solved-them)&quot; tabindex=&quot;-1&quot;&gt;Challenges I Faced (And How I Solved Them)&lt;/h2&gt;
&lt;h3 id=&quot;challenge-1%3A-typescript-configuration&quot; tabindex=&quot;-1&quot;&gt;Challenge 1: TypeScript Configuration&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;Problem:&lt;/strong&gt; Tests failed in CI because &lt;code&gt;tsconfig.json&lt;/code&gt; extended &lt;code&gt;.nuxt/tsconfig.json&lt;/code&gt; which doesn&#39;t exist until you run the dev server.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Solution:&lt;/strong&gt; Create a standalone &lt;code&gt;tsconfig.json&lt;/code&gt; that doesn&#39;t depend on generated files:&lt;/p&gt;
&lt;pre class=&quot;language-json&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;&quot;compilerOptions&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;&quot;target&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;ESNext&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;&quot;module&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;ESNext&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;&quot;moduleResolution&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Bundler&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;&quot;strict&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;&quot;types&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;node&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;vitest&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;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;&quot;include&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;src/**/*&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;test/**/*&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;h3 id=&quot;challenge-2%3A-vite-version-conflicts&quot; tabindex=&quot;-1&quot;&gt;Challenge 2: Vite Version Conflicts&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;Problem:&lt;/strong&gt; Vitest and @vitejs/plugin-vue used different Vite versions, causing type errors.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Solution:&lt;/strong&gt; Add a type assertion to ignore the incompatibility:&lt;/p&gt;
&lt;pre class=&quot;language-typescript&quot;&gt;&lt;code class=&quot;language-typescript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;defineConfig&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;span class=&quot;token comment&quot;&gt;// @ts-expect-error - Vite version conflict&lt;/span&gt;
  plugins&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;vue&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;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  test&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    environment&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;happy-dom&#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;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;h3 id=&quot;challenge-3%3A-eslint-checking-generated-files&quot; tabindex=&quot;-1&quot;&gt;Challenge 3: ESLint Checking Generated Files&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;Problem:&lt;/strong&gt; ESLint was throwing 2,825 errors from generated files in &lt;code&gt;playwright-report/&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Solution:&lt;/strong&gt; Add ignore patterns to &lt;code&gt;eslint.config.mjs&lt;/code&gt;:&lt;/p&gt;
&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;createConfigForNuxt&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;span class=&quot;token comment&quot;&gt;// ...&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;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;append&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;span class=&quot;token literal-property property&quot;&gt;ignores&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;
    &lt;span class=&quot;token string&quot;&gt;&#39;**/dist/**&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token string&quot;&gt;&#39;**/node_modules/**&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token string&quot;&gt;&#39;**/.nuxt/**&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token string&quot;&gt;&#39;**/playwright-report/**&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token string&quot;&gt;&#39;**/test-results/**&#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;span class=&quot;token punctuation&quot;&gt;,&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;hr /&gt;
&lt;h2 id=&quot;real-world-usage&quot; tabindex=&quot;-1&quot;&gt;Real-World Usage&lt;/h2&gt;
&lt;p&gt;Once published, using the module is straightforward:&lt;/p&gt;
&lt;h3 id=&quot;installation&quot; tabindex=&quot;-1&quot;&gt;Installation&lt;/h3&gt;
&lt;pre class=&quot;language-bash&quot;&gt;&lt;code class=&quot;language-bash&quot;&gt;&lt;span class=&quot;token function&quot;&gt;npm&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;install&lt;/span&gt; @colabottles/center-div&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;configuration&quot; tabindex=&quot;-1&quot;&gt;Configuration&lt;/h3&gt;
&lt;pre class=&quot;language-typescript&quot;&gt;&lt;code class=&quot;language-typescript&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// nuxt.config.ts&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;defineNuxtConfig&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;
  modules&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;@colabottles/center-div&#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;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;component-usage&quot; tabindex=&quot;-1&quot;&gt;Component Usage&lt;/h3&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;template&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Full viewport centering --&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;CenterDiv&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;min-block-size&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;100vh&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 tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;button&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Click Me&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;button&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;CenterDiv&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;

  &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Horizontal only --&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;CenterDiv&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;axis&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;horizontal&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;min-block-size&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;50vh&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 tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;nav&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Navigation&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;nav&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;CenterDiv&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;

  &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Custom semantic element --&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;CenterDiv&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;as&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;main&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 tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Main Content&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;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;CenterDiv&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;template&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;h3 id=&quot;directive-usage&quot; tabindex=&quot;-1&quot;&gt;Directive Usage&lt;/h3&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;template&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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 attr-name&quot;&gt;v-center&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    Quick full-viewport centering
  &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 tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;template&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;hr /&gt;
&lt;h2 id=&quot;what-i-learned&quot; tabindex=&quot;-1&quot;&gt;What I Learned&lt;/h2&gt;
&lt;h3 id=&quot;1.-developer-experience-matters&quot; tabindex=&quot;-1&quot;&gt;1. Developer Experience Matters&lt;/h3&gt;
&lt;p&gt;Small details make a huge difference:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Clear prop names (&lt;code&gt;minBlockSize&lt;/code&gt; vs &lt;code&gt;minHeight&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;TypeScript autocomplete&lt;/li&gt;
&lt;li&gt;Helpful README with examples&lt;/li&gt;
&lt;li&gt;Fast development server&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;2.-tests-give-confidence&quot; tabindex=&quot;-1&quot;&gt;2. Tests Give Confidence&lt;/h3&gt;
&lt;p&gt;Every test I wrote caught a real bug. The time invested in testing paid off immediately.&lt;/p&gt;
&lt;h3 id=&quot;3.-accessibility-isn&#39;t-optional-(which-i-already-knew)&quot; tabindex=&quot;-1&quot;&gt;3. Accessibility Isn&#39;t Optional (Which I Already Knew)&lt;/h3&gt;
&lt;p&gt;Building accessible components from the start is easier than retrofitting them later. Using semantic HTML and CSS Grid made accessibility almost automatic.&lt;/p&gt;
&lt;h3 id=&quot;4.-the-nuxt-ecosystem-is-excellent&quot; tabindex=&quot;-1&quot;&gt;4. The Nuxt Ecosystem is Excellent&lt;/h3&gt;
&lt;p&gt;The module template, build tools, and documentation made this process smooth. The Nuxt team has done incredible work.&lt;/p&gt;
&lt;h3 id=&quot;5.-community-feedback-is-essential&quot; tabindex=&quot;-1&quot;&gt;5. Community Feedback is Essential&lt;/h3&gt;
&lt;p&gt;Reaching out to experienced developers provides invaluable perspective before launching.&lt;/p&gt;
&lt;hr /&gt;
&lt;h2 id=&quot;performance-metrics&quot; tabindex=&quot;-1&quot;&gt;Performance Metrics&lt;/h2&gt;
&lt;p&gt;The final package is &lt;strong&gt;tiny&lt;/strong&gt;:&lt;/p&gt;
&lt;pre class=&quot;language-md&quot;&gt;&lt;code class=&quot;language-md&quot;&gt;Package size: 4.4 kB (compressed)
Unpacked size: 10.3 kB
Files: 15&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;For comparison, that&#39;s smaller than a single medium-resolution image. Zero dependencies beyond Nuxt itself.&lt;/p&gt;
&lt;hr /&gt;
&lt;h2 id=&quot;future-improvements&quot; tabindex=&quot;-1&quot;&gt;Future Improvements&lt;/h2&gt;
&lt;p&gt;Ideas for future versions:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Gap prop&lt;/strong&gt; for spacing between centered items:&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;CenterDiv&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;gap&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;2rem&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 tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;button&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;One&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;button&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;button&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Two&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;button&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;CenterDiv&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;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Animation support&lt;/strong&gt; for smooth centering transitions&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Max inline size&lt;/strong&gt; for constraining width:&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;CenterDiv&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;max-inline-size&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;60ch&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 tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;article&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Readable text width&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;article&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;CenterDiv&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;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Nuxt DevTools integration&lt;/strong&gt; to visualize all CenterDiv instances on a page&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;hr /&gt;
&lt;h2 id=&quot;try-it-yourself&quot; tabindex=&quot;-1&quot;&gt;Try It Yourself&lt;/h2&gt;
&lt;p&gt;The module is live on npm:&lt;/p&gt;
&lt;pre class=&quot;language-bash&quot;&gt;&lt;code class=&quot;language-bash&quot;&gt;&lt;span class=&quot;token function&quot;&gt;npm&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;install&lt;/span&gt; @colabottles/center-div&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;Links:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://www.npmjs.com/package/@colabottles/center-div&quot;&gt;npm: Click this link to go to the npm listing&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/colabottles/center-div-module&quot;&gt;GitHub: Click this link to go to the GitHub repository&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Documentation: &lt;em&gt;See README on GitHub&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;h2 id=&quot;key-takeaways-for-building-your-own-module&quot; tabindex=&quot;-1&quot;&gt;Key Takeaways for Building Your Own Module&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Start with the official template:&lt;/strong&gt; &lt;code&gt;npx nuxi init my-module -t module&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Test from day one:&lt;/strong&gt; Unit, E2E, and accessibility tests&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Use the playground:&lt;/strong&gt; Instant feedback beats blind development&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Focus on DX:&lt;/strong&gt; Clear APIs, good docs, TypeScript support&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Make it accessible:&lt;/strong&gt; Follow WCAG guidelines from the start&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Keep it small:&lt;/strong&gt; Every kilobyte matters&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Automate everything:&lt;/strong&gt; CI/CD catches issues early&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Get feedback:&lt;/strong&gt; Community review prevents bad patterns&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;hr /&gt;
&lt;h2 id=&quot;conclusion&quot; tabindex=&quot;-1&quot;&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;Building a Nuxt module taught me more about Vue, TypeScript, testing, and accessibility than any tutorial could. The process of taking an idea from concept to published package—with real users able to &lt;code&gt;npm install&lt;/code&gt; it—is incredibly rewarding.&lt;/p&gt;
&lt;p&gt;If you have a common pattern in your Nuxt projects, consider extracting it into a module. The ecosystem benefits, and you&#39;ll learn a ton in the process.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;What patterns do you find yourself repeating in Nuxt?&lt;/strong&gt; Maybe your next module idea is already in your codebase.&lt;/p&gt;
&lt;hr /&gt;
&lt;h2 id=&quot;resources&quot; tabindex=&quot;-1&quot;&gt;Resources&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/nuxt/starter/tree/module&quot;&gt;&lt;strong&gt;Nuxt Module Template:&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://nuxt.com/docs/guide/going-further/modules&quot;&gt;&lt;strong&gt;Nuxt Module Author Guide:&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://www.w3.org/WAI/WCAG21/quickref/&quot;&gt;&lt;strong&gt;WCAG Guidelines:&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://vitest.dev/&quot;&gt;&lt;strong&gt;Vitest Documentation:&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://playwright.dev/&quot;&gt;&lt;strong&gt;Playwright Testing:&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</content>
	</entry>
	
	<entry>
		<title>Names Are Hard But They Don&#39;t Have To Be</title>
		<link href="https://toddl.dev/posts/names-are-hard-but-they-dont-have-to-be/"/>
		<updated>Thu, 22 Jan 2026 00:00:00 GMT</updated>
		<id>https://toddl.dev/posts/names-are-hard-but-they-dont-have-to-be/</id>
		<content type="html">&lt;h2 id=&quot;the-%2410%2C000-bug&quot; tabindex=&quot;-1&quot;&gt;The $10,000 Bug&lt;/h2&gt;
&lt;p&gt;In 2015, a major airline&#39;s booking system rejected a passenger&#39;s name because it contained an apostrophe. The passenger—who had flown with them dozens of times before—missed their flight. The airline had to refund the ticket and compensate for the inconvenience. Total cost: over $10,000.&lt;/p&gt;
&lt;p&gt;The name? &lt;strong&gt;O&#39;Brien&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;One of the most common Irish surnames in the world, rejected by a validation rule that probably took someone five seconds to write.&lt;/p&gt;
&lt;p&gt;This isn&#39;t an isolated incident. Every day, millions of people around the world encounter forms that reject their names, corrupt their characters, or force them into boxes that don&#39;t fit their cultural identity. It&#39;s frustrating for users, expensive for companies, and completely avoidable.&lt;/p&gt;
&lt;p&gt;Take for instance &lt;a href=&quot;https://www.fodors.com/news/hotels/how-to-deal-with-booking-problems-because-of-special-characters-in-your-name&quot;&gt;this article&lt;/a&gt;&lt;br /&gt;
where a woman was denied a hotel room for having an apostrophe in her name! This is the kind of laziness that I find more than off-putting.&lt;/p&gt;
&lt;p&gt;So I&#39;m going to show you how to build forms that respect the diversity of human names while maintaining security and data integrity. Because names—something we think is simple—are actually one of the hardest problems in software development. Even harder, is the fact that most devs cannot be bothered to learn and implement these inclusive patterns.&lt;/p&gt;
&lt;h2 id=&quot;why-this-matters&quot; tabindex=&quot;-1&quot;&gt;Why This Matters&lt;/h2&gt;
&lt;p&gt;Before we dive into the technical details, let&#39;s establish why getting names right is so critical:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;The Scale:&lt;/strong&gt; There are over 7 billion people on Earth, speaking thousands of languages, writing in hundreds of scripts, and following countless cultural naming conventions. Your form isn&#39;t just for people like you—it&#39;s potentially for &lt;strong&gt;everyone&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;First Impressions:&lt;/strong&gt; Your form is often the first real interaction someone has with your product. When that form rejects their name, you&#39;re not just creating a technical error—you&#39;re telling them &amp;quot;this product wasn&#39;t built for people like you.&amp;quot;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Business Impact:&lt;/strong&gt; Failed form submissions mean:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Lost customers and revenue&lt;/li&gt;
&lt;li&gt;Increased support tickets and costs&lt;/li&gt;
&lt;li&gt;Damaged brand reputation&lt;/li&gt;
&lt;li&gt;Potential legal issues (discrimination claims)&lt;/li&gt;
&lt;li&gt;Inaccessible services for entire populations&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;It&#39;s Solvable:&lt;/strong&gt; The good news is that handling names correctly isn&#39;t actually that hard once you understand the requirements. The bad news is that most developers have absorbed incorrect assumptions about how names work and don&#39;t want to put the work into it whether it be learning regex patterns or just plain laziness.&lt;/p&gt;
&lt;h2 id=&quot;real-examples&quot; tabindex=&quot;-1&quot;&gt;Real Examples&lt;/h2&gt;
&lt;p&gt;Let me show you some real examples I&#39;ve seen and talked to people about (company names redacted to protect the guilty):&lt;/p&gt;
&lt;h3 id=&quot;example-1%3A-the-length-validator&quot; tabindex=&quot;-1&quot;&gt;Example 1: The Length Validator&lt;/h3&gt;
&lt;p&gt;A major social media platform rejected the name &amp;quot;José&amp;quot; because it required a minimum of 4 characters. José is one of the most common Spanish names in the world, used by over 6 million people in the United States alone. It is a 4-letter word. So what the hell is going on? A dev couldn&#39;t be bothered to get out of their own little bubble to make this work and a manager was too busy with paperwork and meetings to actually check and see what was going on. Peer reviews didn&#39;t happen because everyone had their heads down and faces in a keyboard. No accountability.&lt;/p&gt;
&lt;h3 id=&quot;example-2%3A-the-diacritic-stripper&quot; tabindex=&quot;-1&quot;&gt;Example 2: The Diacritic Stripper&lt;/h3&gt;
&lt;p&gt;An online retailer automatically stripped accent marks from names, turning &amp;quot;Müller&amp;quot; into &amp;quot;Muller&amp;quot; and &amp;quot;François&amp;quot; into &amp;quot;Francois.&amp;quot; When customers received packages addressed to &amp;quot;Muller&amp;quot; instead of their actual name, delivery drivers couldn&#39;t find them in apartment directories. Again, a fundamental breakdown in systems, checks and balances, and accountability for devs who could not be bothered to take into consideration names and their origins.&lt;/p&gt;
&lt;h3 id=&quot;example-3%3A-the-character-set-disaster&quot; tabindex=&quot;-1&quot;&gt;Example 3: The Character Set Disaster&lt;/h3&gt;
&lt;p&gt;A banking application using an outdated database encoding turned Chinese names into question marks. Users named 张伟 (Zhang Wei, one of the most common Chinese names) saw their bank statements addressed to &amp;quot;???.&amp;quot; So why the absolute failure by financial institutions? Because someone couldn&#39;t be bothered to fix it or even find out if it needed fixing. (It needed to be fixed).&lt;/p&gt;
&lt;h3 id=&quot;example-4%3A-the-punctuation-police&quot; tabindex=&quot;-1&quot;&gt;Example 4: The Punctuation Police&lt;/h3&gt;
&lt;p&gt;A government service portal rejected names containing apostrophes or hyphens, making it impossible for people named D&#39;Angelo, Mary-Kate, or Jean-Luc to use the service. The error message? &amp;quot;Special characters are not allowed.&amp;quot; Because a dev just did not know how to do something. Plain and simple. Instead of making it work and educating themselves, they took the easy way out and closed the door on &lt;em&gt;many&lt;/em&gt; people. Great attitude to have in a government job, and par for the course apparently.&lt;/p&gt;
&lt;h3 id=&quot;example-5%3A-the-western-format-enforcer&quot; tabindex=&quot;-1&quot;&gt;Example 5: The Western Format Enforcer&lt;/h3&gt;
&lt;p&gt;An HR system required separate &amp;quot;first name&amp;quot; and &amp;quot;last name&amp;quot; fields with no way to leave either blank. This made the system completely unusable for:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Indonesian users (many have single names like Sukarno)&lt;/li&gt;
&lt;li&gt;Icelandic users (who use patronymics, not surnames)&lt;/li&gt;
&lt;li&gt;Chinese users (whose family name comes first)&lt;/li&gt;
&lt;li&gt;Anyone else who doesn&#39;t follow Western naming conventions&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These aren&#39;t edge cases. Combined, these examples affect &lt;strong&gt;billions of people&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;&amp;quot;Well! People always have two names, right?&amp;quot; No Kevin, no they do not. Head in the sand syndrome is a horrible affliction.&lt;/p&gt;
&lt;p&gt;So yes, I am being critical. &lt;strong&gt;Very critical&lt;/strong&gt; because this &lt;em&gt;still&lt;/em&gt; goes on to this day. Just this morning I read a post on Bluesky about this very topic, so I had to write this. Because as long as the Web has (questionably) existed, this has been prevalent (especially with the advent of AI, LLM&#39;s and &#39;vibe coding&#39;). Do better. Here&#39;s how!&lt;/p&gt;
&lt;h2 id=&quot;understanding-names-globally&quot; tabindex=&quot;-1&quot;&gt;Understanding Names Globally&lt;/h2&gt;
&lt;p&gt;To build better forms, we first need to understand how names actually work around the world. Let&#39;s bust some myths. (Puts his Mythbusters shirt on).&lt;/p&gt;
&lt;h3 id=&quot;myth-1%3A-everyone-has-a-first-name-and-last-name&quot; tabindex=&quot;-1&quot;&gt;Myth 1: Everyone Has a First Name and Last Name&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;Reality:&lt;/strong&gt; Naming conventions vary wildly across cultures. This is about respect to why this matter which we covered at the start of this post.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Indonesian Names:&lt;/strong&gt; &lt;a href=&quot;https://www.ibtimes.com/sukarno-suharto-megawati-why-do-some-indonesians-have-only-one-name-1408204&quot;&gt;Many Indonesians have a single name with no family name&lt;/a&gt;. Famous examples include Sukarno and Suharto, former presidents of Indonesia. When forced to fill out forms with separate first/last name fields, they often have to make something up or repeat their name in both fields.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Icelandic Patronymics:&lt;/strong&gt; Icelanders don&#39;t use family names. Instead, &lt;a href=&quot;https://www.icls.edu/blog/icelandic-naming-system&quot;&gt;they use patronymics&lt;/a&gt;—a given name plus their father&#39;s (or sometimes mother&#39;s) name with &amp;quot;son&amp;quot; or &amp;quot;dóttir&amp;quot; added. The singer Björk&#39;s full name is Björk Guðmundsdóttir, meaning &amp;quot;Björk, daughter of Guðmundur.&amp;quot; If she had a son, he might be named &amp;quot;Jón Björksson&amp;quot;—note that the family doesn&#39;t share a surname.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Chinese Naming Convention:&lt;/strong&gt; In Chinese culture, &lt;a href=&quot;https://culturalatlas.sbs.com.au/chinese-culture/chinese-culture-naming&quot;&gt;the family name comes first&lt;/a&gt;, followed by the given name. Zhang Wei means Family Name: Zhang, Given Name: Wei. Many Chinese people adopt a Western order when dealing with international contexts, but this can create confusion and inconsistency.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Spanish Naming:&lt;/strong&gt; In Spanish-speaking cultures, &lt;a href=&quot;https://www.icls.edu/blog/why-do-people-in-spanish-speaking-countries-have-so-many-last-names&quot;&gt;people typically have two surnames&lt;/a&gt;—one from each parent. María García López has García from her father and López from her mother. When she marries, she might add her husband&#39;s surname, becoming María García López de Martínez.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Burmese Names:&lt;/strong&gt; People from Myanmar typically have &lt;a href=&quot;https://culturalatlas.sbs.com.au/myanmar-burmese-culture/burmese-myanmar-culture-naming&quot;&gt;no family name at all&lt;/a&gt; and use a system where names indicate generation and personal identity.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Greek Names:&lt;/strong&gt; It is traditional for Greeks to name their children after the grandparents, resulting in a continuation of names in the family line. &lt;a href=&quot;https://www.greece.com/info/names/greek_names/&quot;&gt;Greek surnames are usually patronymics&lt;/a&gt;, meaning that they were originally formed by a male name. However, other sources may also exist, like regarding occupation, characteristics and are also dependent on the location where the surname was formed. This includes names such as Μαρία (Maria) and Γιάννης (Yiannis), alongside names such as, Βύρων (Byron).&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Gaelic Names:&lt;/strong&gt; Written Irish is first attested in &lt;a href=&quot;https://www.worldhistory.org/Ogham/&quot;&gt;Ogham inscriptions&lt;/a&gt; from the 4th century AD.  Irish Gaelic (or Scottish Gaelic) names &lt;a href=&quot;https://www.libraryireland.com/Names.php/&quot;&gt;can be traced back to the earliest Celtic traditions&lt;/a&gt;. Many names come from ancient Irish mythology or folklore, others are based on musicality, folk heroes, or have spiritual roots. Examples are Áine (awn-ye) - &amp;quot;radiance, splendor, brilliance&amp;quot;, Siobhán (shiv-on), Róisín – “little rose”, or Ó Conchobhair (O’Connor) – “descendant of Conchobhar”.&lt;/p&gt;
&lt;h3 id=&quot;myth-2%3A-names-fit-in-ascii&quot; tabindex=&quot;-1&quot;&gt;Myth 2: Names Fit in ASCII&lt;/h3&gt;
&lt;p&gt;ASCII contains 128 characters, including uppercase and lowercase English letters. That&#39;s it. No accents, no umlauts, no characters from non-Latin scripts.&lt;/p&gt;
&lt;p&gt;Here are names that don&#39;t fit in ASCII:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Vietnamese:&lt;/strong&gt; Nguyễn (with tone marks)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Arabic:&lt;/strong&gt; محمد (right-to-left script)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Chinese:&lt;/strong&gt; 王 (logographic characters)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;German:&lt;/strong&gt; Müller (umlaut)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Hawaiian:&lt;/strong&gt; Kealiʻi (ʻokina - the glottal stop)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;French:&lt;/strong&gt; François (cedilla)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Spanish:&lt;/strong&gt; José (acute accent)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Polish:&lt;/strong&gt; Łukasz (l with stroke)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Turkish:&lt;/strong&gt; Çağlar (c with cedilla)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Czech:&lt;/strong&gt; Dvořák (r with caron)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Greek:&lt;/strong&gt; Matthew, Ματθαῖος (Polytonic (multi-accented) script)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Gaelic:&lt;/strong&gt; Pádraig (acute accent)&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These aren&#39;t exotic edge cases—they&#39;re normal names used by hundreds of millions of people every single day. &lt;strong&gt;ADD THEM!&lt;/strong&gt;&lt;/p&gt;
&lt;h3 id=&quot;myth-3%3A-you-can-validate-names-with-simple-rules&quot; tabindex=&quot;-1&quot;&gt;Myth 3: You Can Validate Names with Simple Rules&lt;/h3&gt;
&lt;p&gt;Names can be:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Very Short:&lt;/strong&gt; &lt;a href=&quot;https://forebears.io/surnames/o&quot;&gt;The surname &amp;quot;O&amp;quot; is common in China and Korea&lt;/a&gt;. Single-letter names exist in many cultures.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Very Long:&lt;/strong&gt; &lt;a href=&quot;https://surnames.behindthename.com/name/wolfeschlegelsteinhausenbergerdorff/submitted&quot;&gt;Wolfeschlegelsteinhausenbergerdorff is a real German surname&lt;/a&gt;. Thai names can easily exceed 20 characters. The longest personal name on record is 747 characters.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;All Consonants:&lt;/strong&gt; &lt;a href=&quot;https://www.igenea.com/en/surnames/n/ng&quot;&gt;Ng is a Chinese surname&lt;/a&gt;. Try pronouncing that according to English rules.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Numbers:&lt;/strong&gt; In some jurisdictions, people can legally change their name to &lt;a href=&quot;https://lawexpression.com/can-you-have-a-number-in-your-legal-name/&quot;&gt;include numbers&lt;/a&gt;. For example, &lt;a href=&quot;https://www.jennifer8lee.com/&quot;&gt;Jennifer 8. Lee&lt;/a&gt; is a legally registered name.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Special Characters:&lt;/strong&gt; Apostrophes (O&#39;Brien), hyphens (Jean-Luc), spaces (von Braun), and periods (St. John) all appear in legitimate names.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Capitalization Rules:&lt;/strong&gt; Names like &amp;quot;McDonald,&amp;quot; &amp;quot;MacLeod,&amp;quot; &amp;quot;von Neumann,&amp;quot; and &amp;quot;de la Cruz&amp;quot; have internal capitalization that you can&#39;t predict with simple rules.&lt;/p&gt;
&lt;h3 id=&quot;myth-4%3A-you-need-to-split-names-into-fields&quot; tabindex=&quot;-1&quot;&gt;Myth 4: You Need to Split Names into Fields&lt;/h3&gt;
&lt;p&gt;This assumption causes immense problems because:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Many cultures don&#39;t have a clear first name/last name distinction&lt;/li&gt;
&lt;li&gt;The meaning of &amp;quot;first&amp;quot; and &amp;quot;last&amp;quot; varies by culture&lt;/li&gt;
&lt;li&gt;Some people have multiple middle names or no middle name&lt;/li&gt;
&lt;li&gt;Asking people to incorrectly split their name is disrespectful&lt;/li&gt;
&lt;li&gt;Even &amp;quot;how should we address you?&amp;quot; requires cultural context&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;The Icelandic phone book, for example, is sorted by first name because that&#39;s the most meaningful ordering in their culture.&lt;/p&gt;
&lt;p&gt;So why are we still sticking with the same old song and dance pattern of firstname/lastname fields (especially in the US) when some people in the world may not have a qualifier as we talked about earlier? Especially if your company deals with international businesses and people (internationalization-i18n anyone?)&lt;/p&gt;
&lt;h2 id=&quot;the-technical-solution&quot; tabindex=&quot;-1&quot;&gt;The Technical Solution&lt;/h2&gt;
&lt;p&gt;Now that we understand the problem (hopefully), let&#39;s look at how to solve it properly.&lt;/p&gt;
&lt;h3 id=&quot;1.-input-validation%3A-be-permissive&quot; tabindex=&quot;-1&quot;&gt;1. Input Validation: Be Permissive&lt;/h3&gt;
&lt;p&gt;The golden rule: &lt;strong&gt;If you&#39;re not sure whether to accept something, accept it. Your users know their own names better than your regex does.&lt;/strong&gt; I cannot stress that enough. This isn&#39;t &lt;strong&gt;your&lt;/strong&gt; form! Stop treating it as such! This brings me to my saying, &amp;quot;It works on my machine so it must be correct!&amp;quot; Nope. No it is not.&lt;/p&gt;
&lt;p&gt;Here&#39;s what not to do:&lt;/p&gt;
&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Bad: ASCII only --&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;input&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;type&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;text&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;name&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;name&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;pattern&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;[A-Za-z]+&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;title&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;Letters only&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;This rejects &lt;strong&gt;billions&lt;/strong&gt; of legitimate names.&lt;/p&gt;
&lt;p&gt;Here&#39;s a much better inclusive and accessible pattern:&lt;/p&gt;
&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Good: Unicode-aware --&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;input&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;type&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;text&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;name&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;name&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;pattern&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;[&#92;p{L}&#92;p{M}&#92;s&#39;-.]+$&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;maxlength&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;150&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;title&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;Please enter your name&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;Let&#39;s break down that regex pattern:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;&#92;p{L}&lt;/code&gt; - Matches any Unicode letter from any language&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&#92;p{M}&lt;/code&gt; - Matches any Unicode mark (diacritics, accents, tone marks)&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&#92;s&lt;/code&gt; - Matches whitespace (spaces, which can appear in names)&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&#39;-.&lt;/code&gt; - Matches apostrophes, hyphens, and periods (common in names)&lt;/li&gt;
&lt;li&gt;&lt;code&gt;+&lt;/code&gt; - One or more of the above&lt;/li&gt;
&lt;li&gt;&lt;code&gt;$&lt;/code&gt; - End of string&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Note: The &lt;code&gt;&#92;p{}&lt;/code&gt; syntax works in modern JavaScript regex with the &lt;code&gt;u&lt;/code&gt; flag. For older browsers, you may need to be even more permissive or use a library.&lt;/p&gt;
&lt;p&gt;Even this pattern might be too restrictive. A truly inclusive approach would be:&lt;/p&gt;
&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;isValidName&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;name&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;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; trimmed &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; name&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;trim&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;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

  &lt;span class=&quot;token comment&quot;&gt;// Check for reasonable length&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;trimmed&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;length &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;||&lt;/span&gt; trimmed&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;length &lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;255&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;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&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;span class=&quot;token comment&quot;&gt;// Block only dangerous characters:&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;// - Control characters (0x00-0x1F, 0x7F)&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;// - HTML/XML special chars that could enable injection&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token regex&quot;&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token regex-source language-regex&quot;&gt;[&#92;x00-&#92;x1F&#92;x7F&amp;lt;&gt;]&lt;/span&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;test&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;trimmed&lt;span class=&quot;token punctuation&quot;&gt;)&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;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&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;span class=&quot;token comment&quot;&gt;// Everything else is allowed&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&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;This approach blocks only characters that pose actual security risks while accepting virtually all legitimate names.&lt;/p&gt;
&lt;h3 id=&quot;2.-database-design&quot; tabindex=&quot;-1&quot;&gt;2. Database Design&lt;/h3&gt;
&lt;p&gt;Your database needs to support the full range of Unicode characters. (If it doesn&#39;t then maybe it is time it does.)&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Bad:&lt;/strong&gt;&lt;/p&gt;
&lt;pre class=&quot;language-sql&quot;&gt;&lt;code class=&quot;language-sql&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;CREATE&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;TABLE&lt;/span&gt; users &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
  name &lt;span class=&quot;token keyword&quot;&gt;VARCHAR&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;50&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;CHARACTER&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;SET&lt;/span&gt; latin1
&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;This limits you to Western European characters and will corrupt or reject everything else. We are trying to get people to &lt;strong&gt;not&lt;/strong&gt; do this.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Good:&lt;/strong&gt;&lt;/p&gt;
&lt;pre class=&quot;language-sql&quot;&gt;&lt;code class=&quot;language-sql&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;CREATE&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;TABLE&lt;/span&gt; users &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
  name &lt;span class=&quot;token keyword&quot;&gt;VARCHAR&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;255&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;CHARACTER&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;SET&lt;/span&gt; utf8mb4 &lt;span class=&quot;token keyword&quot;&gt;COLLATE&lt;/span&gt; utf8mb4_unicode_ci
&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;Important Notes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;utf8mb4&lt;/strong&gt; is the correct encoding for MySQL/MariaDB (the plain &amp;quot;utf8&amp;quot; in MySQL is actually a limited subset)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;utf8mb4_unicode_ci&lt;/strong&gt; provides case-insensitive collation for sorting&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;VARCHAR(255)&lt;/strong&gt; gives generous space for names (adjust as needed for your use case)&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;For PostgreSQL:&lt;/p&gt;
&lt;pre class=&quot;language-sql&quot;&gt;&lt;code class=&quot;language-sql&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;CREATE&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;TABLE&lt;/span&gt; users &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
  name &lt;span class=&quot;token keyword&quot;&gt;VARCHAR&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;255&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;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;PostgreSQL uses UTF-8 by default, which is correct.&lt;/p&gt;
&lt;p&gt;For MongoDB, JavaScript, and most modern systems, UTF-8 support is built-in, but always verify your configuration.&lt;/p&gt;
&lt;h3 id=&quot;3.-form-field-design&quot; tabindex=&quot;-1&quot;&gt;3. Form Field Design&lt;/h3&gt;
&lt;p&gt;The best approach is to use a single name field when possible:&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;label&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;for&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;full-name&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;Full name&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;label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;input&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;id&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;full-name&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;type&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;text&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;name&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;full_name&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;maxlength&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;150&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;autocomplete&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;name&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;required&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;&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;span&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&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;help-text&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;Your name as it appears on official documents&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;span&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;Benefits:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Works for all naming conventions&lt;/li&gt;
&lt;li&gt;Doesn&#39;t force incorrect splitting&lt;/li&gt;
&lt;li&gt;Respects how people identify themselves&lt;/li&gt;
&lt;li&gt;Simpler for users&lt;/li&gt;
&lt;li&gt;Easier to maintain&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;When you must split names&lt;/strong&gt; (for example, government forms with legal requirements):&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;fieldset&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;legend&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Your name&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;legend&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;label&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;for&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;given-name&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;Given name(s)&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;label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;input&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;id&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;given-name&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;type&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;text&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;name&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;given_name&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;autocomplete&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;given-name&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 tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;label&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;for&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;family-name&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;Family name(s)&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;label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;input&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;id&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;family-name&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;type&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;text&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;name&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;family_name&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;autocomplete&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;family-name&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 tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&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;help-text&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;
    If your name doesn&#39;t fit this format, enter your full name
    in the first field and leave the second field blank.
  &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;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;fieldset&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;Notice:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Using &amp;quot;given name&amp;quot; and &amp;quot;family name&amp;quot; instead of &amp;quot;first&amp;quot; and &amp;quot;last&amp;quot;&lt;/li&gt;
&lt;li&gt;Neither field is required&lt;/li&gt;
&lt;li&gt;Clear help text explaining what to do if the format doesn&#39;t fit&lt;/li&gt;
&lt;li&gt;Proper autocomplete attributes for browser assistance&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;4.-the-preferred-name-pattern&quot; tabindex=&quot;-1&quot;&gt;4. The Preferred Name Pattern&lt;/h3&gt;
&lt;p&gt;For many applications, you can solve multiple problems at once by asking for both legal name and preferred name:&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;fieldset&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;legend&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Your name&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;legend&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;label&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;for&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;legal-name&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;Legal name&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;label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;input&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;id&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;legal-name&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;type&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;text&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;name&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;legal_name&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;autocomplete&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;name&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;required&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;&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;span&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&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;help-text&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;As it appears on official documents&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;span&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;label&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;for&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;preferred-name&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;Preferred name (optional)&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;label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;input&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;id&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;preferred-name&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;type&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;text&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;name&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;preferred_name&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 tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&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;help-text&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;What you&#39;d like us to call you&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;span&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;fieldset&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;This approach:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Accommodates legal requirements&lt;/li&gt;
&lt;li&gt;Respects personal identity&lt;/li&gt;
&lt;li&gt;Handles nicknames and chosen names&lt;/li&gt;
&lt;li&gt;Works across cultures&lt;/li&gt;
&lt;li&gt;Supports transgender users who may use a different name than their legal name&lt;/li&gt;
&lt;li&gt;Allows for informal names or anglicized versions&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;5.-backend-validation&quot; tabindex=&quot;-1&quot;&gt;5. Backend Validation&lt;/h3&gt;
&lt;p&gt;Your server-side validation should match your client-side approach:&lt;/p&gt;
&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;validateName&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;name&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;span class=&quot;token comment&quot;&gt;// Don&#39;t do this!!!&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;token regex&quot;&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token regex-source language-regex&quot;&gt;^[A-Za-z&#92;s]+$&lt;/span&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;test&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;)&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;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;valid&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;error&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Name can only contain letters&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;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

  &lt;span class=&quot;token comment&quot;&gt;// Do this instead!&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; trimmed &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; name&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;trim&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;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

  &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;trimmed&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;length &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&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;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;valid&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;error&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Please enter your name&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;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

  &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;trimmed&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;length &lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;255&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;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;valid&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;error&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Name is too long&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;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

  &lt;span class=&quot;token comment&quot;&gt;// Block control characters and HTML/XML special chars&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token regex&quot;&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token regex-source language-regex&quot;&gt;[&#92;x00-&#92;x1F&#92;x7F&amp;lt;&gt;]&lt;/span&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;test&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;trimmed&lt;span class=&quot;token punctuation&quot;&gt;)&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;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token literal-property property&quot;&gt;valid&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token literal-property property&quot;&gt;error&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Name contains invalid characters&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;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;valid&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&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;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Additional security considerations:&lt;/p&gt;
&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// Sanitize for display (prevent XSS)&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sanitizeForDisplay&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;name&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;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; name
    &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;replace&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token regex&quot;&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token regex-source language-regex&quot;&gt;&amp;amp;&lt;/span&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token regex-flags&quot;&gt;g&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;&amp;amp;amp;&#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;span class=&quot;token function&quot;&gt;replace&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token regex&quot;&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token regex-source language-regex&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token regex-flags&quot;&gt;g&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;&amp;amp;lt;&#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;span class=&quot;token function&quot;&gt;replace&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token regex&quot;&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token regex-source language-regex&quot;&gt;&gt;&lt;/span&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token regex-flags&quot;&gt;g&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;&amp;amp;gt;&#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;span class=&quot;token function&quot;&gt;replace&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token regex&quot;&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token regex-source language-regex&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token regex-flags&quot;&gt;g&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;&amp;amp;quot;&#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;span class=&quot;token function&quot;&gt;replace&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token regex&quot;&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token regex-source language-regex&quot;&gt;&#39;&lt;/span&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token regex-flags&quot;&gt;g&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;&amp;amp;#x27;&#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;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;// For SQL queries, use parameterized queries&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// Never concatenate user input directly&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; query &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;SELECT * FROM users WHERE name = ?&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
db&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;query&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;query&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;userName&lt;span class=&quot;token punctuation&quot;&gt;]&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;h3 id=&quot;6.-display-and-formatting&quot; tabindex=&quot;-1&quot;&gt;6. Display and Formatting&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;Never automatically transform names:&lt;/strong&gt;&lt;/p&gt;
&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// Bad: This breaks names like McDonald, von Neumann, de la Cruz&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;formatName&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;name&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;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; name&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toLowerCase&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;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;split&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39; &#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;span class=&quot;token function&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;word&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; word&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;charAt&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&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;span class=&quot;token function&quot;&gt;toUpperCase&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;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; word&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;slice&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;1&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;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;join&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39; &#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;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;// Good: Display exactly as entered&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;displayName&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;name&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;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; name&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;The only acceptable transformation is trimming leading/trailing whitespace.&lt;/p&gt;
&lt;h3 id=&quot;7.-sorting-and-searching&quot; tabindex=&quot;-1&quot;&gt;7. Sorting and Searching&lt;/h3&gt;
&lt;p&gt;Sorting names across languages requires locale-aware collation:&lt;/p&gt;
&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; names &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;Müller&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;Möller&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;Mueller&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;Moeller&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;Zhao&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;Zhang&#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;span class=&quot;token comment&quot;&gt;// Bad: ASCII sort gives unpredictable results for non-ASCII&lt;/span&gt;
names&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;sort&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;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;// Good: Locale-aware sort&lt;/span&gt;
names&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;sort&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;span class=&quot;token parameter&quot;&gt;a&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; b&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; a&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;localeCompare&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;b&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;de-DE&#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;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;For search, consider using full-text search with proper language analyzers:&lt;/p&gt;
&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// Use a library like ElasticSearch or PostgreSQL full-text search&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// that understands Unicode and language-specific rules&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;// Example: PostgreSQL with unaccent extension&lt;/span&gt;
&lt;span class=&quot;token constant&quot;&gt;SELECT&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;FROM&lt;/span&gt; users
&lt;span class=&quot;token constant&quot;&gt;WHERE&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;unaccent&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;ILIKE&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;unaccent&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;%&#39;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;||&lt;/span&gt; $1 &lt;span class=&quot;token operator&quot;&gt;||&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;%&#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;h2 id=&quot;testing-strategy&quot; tabindex=&quot;-1&quot;&gt;Testing Strategy&lt;/h2&gt;
&lt;p&gt;Testing names properly requires a comprehensive test suite with real-world examples.&lt;/p&gt;
&lt;h3 id=&quot;essential-test-cases&quot; tabindex=&quot;-1&quot;&gt;Essential Test Cases&lt;/h3&gt;
&lt;p&gt;Your test suite should include:&lt;/p&gt;
&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; testNames &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;// Basic Latin with punctuation&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;O&#39;Brien&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;Mary-Kate&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;St. John&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;von Neumann&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;de la Cruz&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;

  &lt;span class=&quot;token comment&quot;&gt;// Accented Latin characters&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;José García&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;François&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;Müller&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;Dvořák&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;Łukasz&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;

  &lt;span class=&quot;token comment&quot;&gt;// Non-Latin scripts&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;张伟&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;           &lt;span class=&quot;token comment&quot;&gt;// Chinese&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;محمد&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;          &lt;span class=&quot;token comment&quot;&gt;// Arabic&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;Nguyễn&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;        &lt;span class=&quot;token comment&quot;&gt;// Vietnamese&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;Παύλος&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;        &lt;span class=&quot;token comment&quot;&gt;// Greek&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;Владимир&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;      &lt;span class=&quot;token comment&quot;&gt;// Cyrillic&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;ธนา&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;           &lt;span class=&quot;token comment&quot;&gt;// Thai&lt;/span&gt;

  &lt;span class=&quot;token comment&quot;&gt;// Special cases&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;Kealiʻi&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;       &lt;span class=&quot;token comment&quot;&gt;// Hawaiian (ʻokina)&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;Sukarno&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;       &lt;span class=&quot;token comment&quot;&gt;// Mononym&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;X Æ A-XII&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;     &lt;span class=&quot;token comment&quot;&gt;// Unusual characters&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;O&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;             &lt;span class=&quot;token comment&quot;&gt;// Single character&lt;/span&gt;

  &lt;span class=&quot;token comment&quot;&gt;// Edge cases&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;Jean-François D&#39;Aubigny de La Tour&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;  &lt;span class=&quot;token comment&quot;&gt;// Long with multiple hyphens&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;Maria García López de Martínez&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;      &lt;span class=&quot;token comment&quot;&gt;// Spanish double surname&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;Nguyễn Tấn Dũng&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;                     &lt;span class=&quot;token comment&quot;&gt;// Vietnamese with tone marks&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;span class=&quot;token function&quot;&gt;describe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;Name validation&#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;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  testNames&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;forEach&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;name&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;should accept &lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;name&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&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;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;validateName&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;valid&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token boolean&quot;&gt;true&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;span class=&quot;token punctuation&quot;&gt;}&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;span class=&quot;token punctuation&quot;&gt;}&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;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;should reject empty names&#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;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;validateName&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;&#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;valid&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token boolean&quot;&gt;false&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;span class=&quot;token punctuation&quot;&gt;}&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;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;should reject names with HTML&#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;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;validateName&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;&amp;lt;script&gt;alert(&quot;xss&quot;)&amp;lt;/script&gt;&#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;valid&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token boolean&quot;&gt;false&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;span class=&quot;token punctuation&quot;&gt;}&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;span class=&quot;token punctuation&quot;&gt;}&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;h3 id=&quot;manual-testing-checklist&quot; tabindex=&quot;-1&quot;&gt;Manual Testing Checklist&lt;/h3&gt;
&lt;p&gt;Beyond automated tests, manually test your forms:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;✓ Copy-paste names from different scripts&lt;/li&gt;
&lt;li&gt;✓ Test with a screen reader&lt;/li&gt;
&lt;li&gt;✓ Try names with various combinations of special characters&lt;/li&gt;
&lt;li&gt;✓ Verify database storage and retrieval&lt;/li&gt;
&lt;li&gt;✓ Check email generation and display&lt;/li&gt;
&lt;li&gt;✓ Test PDF generation if applicable&lt;/li&gt;
&lt;li&gt;✓ Verify sorting and searching work correctly&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;real-user-testing&quot; tabindex=&quot;-1&quot;&gt;Real User Testing&lt;/h3&gt;
&lt;p&gt;The best way to catch issues is to test with people who have diverse names:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Recruit testers from different cultural backgrounds&lt;/li&gt;
&lt;li&gt;Ask employees with non-ASCII names to test&lt;/li&gt;
&lt;li&gt;Run a bug bounty specifically for name handling issues&lt;/li&gt;
&lt;li&gt;Monitor support tickets for name-related problems&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;common-questions-and-edge-cases&quot; tabindex=&quot;-1&quot;&gt;Common Questions and Edge Cases&lt;/h2&gt;
&lt;h3 id=&quot;%22what-about-legal-requirements%3F%22&quot; tabindex=&quot;-1&quot;&gt;&amp;quot;What about legal requirements?&amp;quot;&lt;/h3&gt;
&lt;p&gt;Some forms genuinely need to match government formats. In these cases:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Explain why you need the specific format&lt;/li&gt;
&lt;li&gt;Provide clear instructions&lt;/li&gt;
&lt;li&gt;Offer a way to contact support if their name doesn&#39;t fit&lt;/li&gt;
&lt;li&gt;Consider storing both a legal name (in required format) and actual name (as they write it)&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id=&quot;%22how-do-i-handle-sorting%3F%22&quot; tabindex=&quot;-1&quot;&gt;&amp;quot;How do I handle sorting?&amp;quot;&lt;/h3&gt;
&lt;p&gt;Use locale-aware collation in your database and &lt;code&gt;localeCompare()&lt;/code&gt; in JavaScript. For international applications, let users choose their preferred locale for sorting.&lt;/p&gt;
&lt;h3 id=&quot;%22what-about-performance%3F%22&quot; tabindex=&quot;-1&quot;&gt;&amp;quot;What about performance?&amp;quot;&lt;/h3&gt;
&lt;p&gt;Unicode-aware regex and collation are slightly slower than ASCII operations, but the difference is negligible in modern applications. Don&#39;t optimize prematurely—correctness matters more than nanoseconds.&lt;/p&gt;
&lt;h3 id=&quot;%22should-i-use-a-name-validation-library%3F%22&quot; tabindex=&quot;-1&quot;&gt;&amp;quot;Should I use a name validation library?&amp;quot;&lt;/h3&gt;
&lt;p&gt;Most name validation libraries are too restrictive. If you use one, verify it:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Accepts all Unicode letters&lt;/li&gt;
&lt;li&gt;Doesn&#39;t enforce Western name formats&lt;/li&gt;
&lt;li&gt;Has been tested with diverse real names&lt;/li&gt;
&lt;li&gt;Is actively maintained&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Libraries like &lt;code&gt;validator.js&lt;/code&gt; can help with basic sanitization, but their name validation often falls short.&lt;/p&gt;
&lt;h3 id=&quot;%22how-do-i-handle-display-names-vs.-legal-names%3F%22&quot; tabindex=&quot;-1&quot;&gt;&amp;quot;How do I handle display names vs. legal names?&amp;quot;&lt;/h3&gt;
&lt;p&gt;Use the preferred name pattern shown earlier. Store both and use the preferred name for all user-facing interactions, falling back to legal name only when legally required.&lt;/p&gt;
&lt;h3 id=&quot;%22what-about-email-addresses%3F%22&quot; tabindex=&quot;-1&quot;&gt;&amp;quot;What about email addresses?&amp;quot;&lt;/h3&gt;
&lt;p&gt;Email addresses have stricter rules defined by RFC 5321. The local part (before @) can contain letters, numbers, and certain special characters. Handle email validation separately from name validation.&lt;/p&gt;
&lt;h3 id=&quot;%22should-i-allow-emoji-in-names%3F%22&quot; tabindex=&quot;-1&quot;&gt;&amp;quot;Should I allow emoji in names?&amp;quot;&lt;/h3&gt;
&lt;p&gt;Some jurisdictions now allow emoji in legal names. Unless you have a specific reason to block them, accept emoji. They&#39;re valid Unicode characters.&lt;/p&gt;
&lt;h2 id=&quot;accessibility-considerations&quot; tabindex=&quot;-1&quot;&gt;Accessibility Considerations&lt;/h2&gt;
&lt;p&gt;Handling names correctly intersects with web accessibility:&lt;/p&gt;
&lt;h3 id=&quot;proper-labels&quot; tabindex=&quot;-1&quot;&gt;Proper Labels&lt;/h3&gt;
&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Good: Explicit label association --&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;label&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;for&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;name-input&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;Full name&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;label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;input&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&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;name-input&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;type&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;text&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&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;name&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 comment&quot;&gt;&amp;lt;!-- Bad: No label or implicit association --&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;input&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;type&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;text&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&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;name&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;placeholder&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;Enter name&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;h3 id=&quot;error-messages&quot; tabindex=&quot;-1&quot;&gt;Error Messages&lt;/h3&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;label&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;for&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;name&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;Full name&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;label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;input&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;id&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;name&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;type&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;text&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;name&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;name&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;aria-describedby&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;name-error&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;aria-invalid&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;true&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 tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&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;name-error&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;role&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;alert&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;
  Please enter your name
&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;span&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;h3 id=&quot;help-text&quot; tabindex=&quot;-1&quot;&gt;Help Text&lt;/h3&gt;
&lt;p&gt;Provide clear, visible help text for complex fields:&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;label&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;for&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;name&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;Legal name&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;label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&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;input&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;id&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;name&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;type&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;text&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;name&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;name&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;aria-describedby&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;name-help&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 tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&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;name-help&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&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;help-text&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;
  Enter your name exactly as it appears on your passport or ID
&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;span&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;h2 id=&quot;implementation-roadmap&quot; tabindex=&quot;-1&quot;&gt;Implementation Roadmap&lt;/h2&gt;
&lt;p&gt;Ready to fix your forms? Here&#39;s a practical implementation plan:&lt;/p&gt;
&lt;h3 id=&quot;phase-1%3A-audit-(1-2-days)&quot; tabindex=&quot;-1&quot;&gt;Phase 1: Audit (1-2 days)&lt;/h3&gt;
&lt;ol&gt;
&lt;li&gt;Find all name input fields in your application&lt;/li&gt;
&lt;li&gt;Check database character set and collation&lt;/li&gt;
&lt;li&gt;Review validation rules&lt;/li&gt;
&lt;li&gt;Test with non-ASCII names&lt;/li&gt;
&lt;li&gt;Document problems found&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id=&quot;phase-2%3A-database-migration-(1-3-days)&quot; tabindex=&quot;-1&quot;&gt;Phase 2: Database Migration (1-3 days)&lt;/h3&gt;
&lt;pre class=&quot;language-sql&quot;&gt;&lt;code class=&quot;language-sql&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;-- Check current encoding&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;SHOW&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;CREATE&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;TABLE&lt;/span&gt; users&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;-- Backup first!&lt;/span&gt;
mysqldump &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;u &lt;span class=&quot;token keyword&quot;&gt;user&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;p &lt;span class=&quot;token keyword&quot;&gt;database&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;backup&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;sql&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;-- Migrate to UTF-8&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;ALTER&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;TABLE&lt;/span&gt; users
  &lt;span class=&quot;token keyword&quot;&gt;MODIFY&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;COLUMN&lt;/span&gt; name &lt;span class=&quot;token keyword&quot;&gt;VARCHAR&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;255&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;CHARACTER&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;SET&lt;/span&gt; utf8mb4
  &lt;span class=&quot;token keyword&quot;&gt;COLLATE&lt;/span&gt; utf8mb4_unicode_ci&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;phase-3%3A-validation-updates-(2-5-days)&quot; tabindex=&quot;-1&quot;&gt;Phase 3: Validation Updates (2-5 days)&lt;/h3&gt;
&lt;ol&gt;
&lt;li&gt;Update backend validation to accept Unicode&lt;/li&gt;
&lt;li&gt;Update frontend validation patterns&lt;/li&gt;
&lt;li&gt;Remove overly restrictive rules&lt;/li&gt;
&lt;li&gt;Add comprehensive test cases&lt;/li&gt;
&lt;li&gt;Update error messages&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id=&quot;phase-4%3A-ui-improvements-(2-3-days)&quot; tabindex=&quot;-1&quot;&gt;Phase 4: UI Improvements (2-3 days)&lt;/h3&gt;
&lt;ol&gt;
&lt;li&gt;Consider consolidating split name fields&lt;/li&gt;
&lt;li&gt;Add preferred name fields where appropriate&lt;/li&gt;
&lt;li&gt;Update help text&lt;/li&gt;
&lt;li&gt;Improve error messages&lt;/li&gt;
&lt;li&gt;Test with screen readers&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id=&quot;phase-5%3A-monitoring-(ongoing)&quot; tabindex=&quot;-1&quot;&gt;Phase 5: Monitoring (Ongoing)&lt;/h3&gt;
&lt;ol&gt;
&lt;li&gt;Track validation failures&lt;/li&gt;
&lt;li&gt;Review support tickets&lt;/li&gt;
&lt;li&gt;Monitor user feedback&lt;/li&gt;
&lt;li&gt;Keep test suite updated with new cases&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id=&quot;resources-and-further-reading&quot; tabindex=&quot;-1&quot;&gt;Resources and Further Reading&lt;/h2&gt;
&lt;h3 id=&quot;essential-reading&quot; tabindex=&quot;-1&quot;&gt;Essential Reading&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Falsehoods Programmers Believe About Names by Patrick McKenzie: &lt;a href=&quot;https://www.kalzumeus.com/2010/06/17/falsehoods-programmers-believe-about-names/&quot;&gt;https://www.kalzumeus.com/2010/06/17/falsehoods-programmers-believe-about-names/&lt;/a&gt; -  A must-read list of 40+ incorrect assumptions about names.&lt;/li&gt;
&lt;li&gt;Personal Names Around the World - W3C: &lt;a href=&quot;https://www.w3.org/International/questions/qa-personal-names&quot;&gt;https://www.w3.org/International/questions/qa-personal-names&lt;/a&gt; - A comprehensive guide to cultural naming conventions.&lt;/li&gt;
&lt;li&gt;Unicode Character Database - &lt;a href=&quot;http://unicode.org/&quot;&gt;Unicode.org&lt;/a&gt;: &lt;a href=&quot;https://unicode.org/&quot;&gt;https://unicode.org&lt;/a&gt; - The definitive source for Unicode character properties.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;tools%2C-libraries%2C-resources&quot; tabindex=&quot;-1&quot;&gt;Tools, Libraries, Resources&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Unicode Regular Expressions (PDF) &lt;a href=&quot;https://icu-project.org/docs/papers/iuc26_regexp.pdf&quot;&gt;https://icu-project.org/docs/papers/iuc26_regexp.pdf&lt;/a&gt;: Most modern languages support &lt;code&gt;&#92;p{}&lt;/code&gt; patterns for Unicode-aware regex.&lt;/li&gt;
&lt;li&gt;ICU (International Components for Unicode) &lt;a href=&quot;https://icu.unicode.org/&quot;&gt;https://icu.unicode.org/&lt;/a&gt; - Libraries for proper Unicode handling in various languages.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;database-documentation&quot; tabindex=&quot;-1&quot;&gt;Database Documentation&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;MySQL UTF-8 Guide: &lt;a href=&quot;https://dev.mysql.com/doc/refman/8.0/en/charset-unicode.html&quot;&gt;https://dev.mysql.com/doc/refman/8.0/en/charset-unicode.html&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;PostgreSQL Character Sets: &lt;a href=&quot;https://www.postgresql.org/docs/current/multibyte.html&quot;&gt;https://www.postgresql.org/docs/current/multibyte.html&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;testing-resources&quot; tabindex=&quot;-1&quot;&gt;Testing Resources&lt;/h3&gt;
&lt;p&gt;Create a test file with diverse names:&lt;/p&gt;
&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// names-test-data.js&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; realWorldNames &lt;span class=&quot;token operator&quot;&gt;=&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;span class=&quot;token literal-property property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;O&#39;Brien&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;culture&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Irish&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;notes&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Apostrophe&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;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;José García&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;culture&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Spanish&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;notes&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Accent marks&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;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;张伟&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;culture&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Chinese&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;notes&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Chinese characters&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;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Nguyễn&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;culture&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Vietnamese&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;notes&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Tone marks&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;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Müller&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;culture&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;German&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;notes&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Umlaut&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;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;محمد&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;culture&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Arabic&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;notes&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Right-to-left script&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;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Kealiʻi&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;culture&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Hawaiian&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;notes&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;ʻOkina&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;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Sukarno&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;culture&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Indonesian&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;notes&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Mononym&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;span class=&quot;token comment&quot;&gt;// Add more as you encounter them&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;h2 id=&quot;responsibility-and-where-it-lies&quot; tabindex=&quot;-1&quot;&gt;Responsibility And Where It Lies&lt;/h2&gt;
&lt;p&gt;So where does the responsibility lie when we come across all these examples of laziness, overlooking, and plain irresponsibility? Look no further than:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;The Developer: Whether it is laziness, lack of knowledge or education, or the &amp;quot;Well, I am not allowed to make changes like that because...&amp;quot; take the Nike approach and &lt;strong&gt;Just Do It&lt;/strong&gt;! The Sisyphus Effect, or the eternal struggle to make change and there is resistance above you is real, I get it. Make your case! If that doesn&#39;t work, throw it in there! I bet Brad has so many meetings and so much paperwork that he really won&#39;t ever notice. If so, then we cross that bridge when we get there. Trust me, you&#39;ll get the avalanche of crap raining down on you in the end.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;The Manager: Oh yes. My favorite part. Managerial decision-making. Whether you have the best manager since sliced bread or you have the worst manager that can stumble backwards into horse shit and come out smelling like roses, this is on them! They oversee a group of devs, they &lt;em&gt;should&lt;/em&gt; know what they are doing, but should and do are two entirely different things. The onus lies with the manager though.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;The Designer: A small part in this play, but a part nonetheless. If they don&#39;t design for this pattern then they aren&#39;t practicing accessible design and are shutting out billions potentially. Everything starts from a design doesn&#39;t it? Then the designer is the root of the problem somewhat. The root of the problem lies next.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;The Conception of the Project: You know that meeting you all have (I hope) where you all get together and plan out what you will do and draw out the roadmap with all the cool tools you use? &lt;strong&gt;THAT&lt;/strong&gt; is where this all starts. Conception of project. It&#39;s not going to be accessible if you don&#39;t start practicing accessibility from &lt;strong&gt;the very start&lt;/strong&gt;! &amp;quot;We can go back and...&amp;quot; Great, now you have wasted resources, time, money, and more. Just because you didn&#39;t take that first step. The most important one. Accessibility and inclusivity.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id=&quot;summary&quot; tabindex=&quot;-1&quot;&gt;Summary&lt;/h2&gt;
&lt;p&gt;Handling names correctly is fundamentally about &lt;strong&gt;respect&lt;/strong&gt;. Every time someone encounters a form that rejects their name, they&#39;re not thinking &lt;em&gt;&amp;quot;this is a technical limitation.&amp;quot;&lt;/em&gt; They&#39;re thinking &lt;em&gt;&amp;quot;this company doesn&#39;t care about people like me.&amp;quot;&lt;/em&gt; They feel left out. Not included. A sense of &lt;em&gt;&amp;quot;this company doesn&#39;t want me.&amp;quot;&lt;/em&gt; and they aren&#39;t wrong. You don&#39;t if you keep shutting people out for whatever reasons.&lt;/p&gt;
&lt;p&gt;The technical solution &lt;strong&gt;isn&#39;t&lt;/strong&gt; complicated:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Use UTF-8 everywhere&lt;/li&gt;
&lt;li&gt;Accept Unicode letters and common punctuation&lt;/li&gt;
&lt;li&gt;Store exactly what users enter&lt;/li&gt;
&lt;li&gt;Don&#39;t enforce Western name formats&lt;/li&gt;
&lt;li&gt;Test with diverse real names&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;But the impact is profound. Good name handling:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Makes your product accessible to billions more people&lt;/li&gt;
&lt;li&gt;Reduces support costs and user frustration&lt;/li&gt;
&lt;li&gt;Demonstrates respect for cultural diversity&lt;/li&gt;
&lt;li&gt;Improves your brand reputation&lt;/li&gt;
&lt;li&gt;Can be legally required in many jurisdictions&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Start today. Pick one form in your application. Test it with the names in this article. Fix what&#39;s broken. Then move to the next form.&lt;/p&gt;
&lt;p&gt;Your users will notice. They&#39;ll appreciate being treated as the whole, complete people they are—with names that belong to them, not to your validation rules.&lt;/p&gt;
&lt;h2 id=&quot;take-action&quot; tabindex=&quot;-1&quot;&gt;Take Action&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Audit your forms today&lt;/strong&gt; using the test names provided in this article&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Share this guide&lt;/strong&gt; with your team&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Update your validation&lt;/strong&gt; to be more inclusive&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Add diverse names to your test suite&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Monitor and improve&lt;/strong&gt; based on real user feedback&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Every person deserves to have their name accepted, stored correctly, and displayed with respect. It&#39;s not an edge case. It&#39;s not a nice-to-have. It&#39;s a fundamental requirement for building inclusive software.&lt;/p&gt;
&lt;p&gt;Get names right, and you&#39;re telling your users: &lt;strong&gt;you belong here&lt;/strong&gt;.&lt;/p&gt;
&lt;h3 id=&quot;have-you-encountered-name-validation-issues%3F-found-a-name-that-breaks-systems%3F-share-your-stories-with-me-on-bluesky.&quot; tabindex=&quot;-1&quot;&gt;Have you encountered name validation issues? Found a name that breaks systems? &lt;a href=&quot;https://bsky.app/profile/toddl.dev&quot;&gt;Share your stories with me on Bluesky.&lt;/a&gt;&lt;/h3&gt;
</content>
	</entry>
</feed>
