Home of Todd Libby - Senior Accessibility Engineer, W3C Invited Expert, International Speaker, and Accessibility AdvocateA web development, design and technology blog.2024-02-07T00:00:00Zhttps://toddl.dev/Todd Libbytoddlibby@protonmail.comAn Event Apart 2008 - Wrap-up Edition2008-05-01T00:00:00Zhttps://toddl.dev/posts/an-event-apart-boston-2008/<h3 id="preface" tabindex="-1">Preface</h3>
<p>This is a super fanboy-ish post, but it is (100%) in its original entirety.</p>
<h3 id="an-event-apart-2008%2C-boston%2C-ma" tabindex="-1">An Event Apart 2008, Boston, MA</h3>
<p>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?)</p>
<p>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.</p>
<h3 id="off-for-an-adventure" tabindex="-1">Off for an adventure</h3>
<p>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.</p>
<p>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.)</p>
<p>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.</p>
<p>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.</p>
<h3 id="day-one.-meeting-%26-mingling" tabindex="-1">Day One. Meeting & Mingling</h3>
<p>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 <strong>A LOT</strong> better. Went in and sat through the presentations, immersed in them all, mingled during breaks, took photos, had photos taken with speakers.</p>
<p>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.</p>
<h3 id="day-two.-more-mingling-%26-me-being-me" tabindex="-1">Day Two. More Mingling & Me Being Me</h3>
<p>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 <strong>(GLADLY)</strong> take a copy of the PC version if you feel the need to get rid of some!</p>
<p>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.</p>
<p>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.</p>
<p>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!</p>
<p>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.</p>
<p>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).</p>
<h3 id="the-speakers" tabindex="-1">The speakers</h3>
<p>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.</p>
<p>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)!</p>
<p>Ethan Marcotte gave me a refreshing way to make sure to communicate between coder and designer (a chore in itself for most of us).</p>
<p>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!</p>
<p>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.</p>
<p>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.</p>
<p>Christopher Fahey gave me insight on style and art direction when it comes to interactive design and to think about form and function.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>PPK made me realize that yes, Javascript really is simple and unobtrusive. Explaining it clearly, very clearly.</p>
<p>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.</p>
<p>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.”</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>This is something I will never forget. So thank you all who spoke and were involved in the planning and organizing.</p>
An Event Apart 2017 - Wrap-Up Edition2017-05-20T00:00:00Zhttps://toddl.dev/posts/an-event-apart-boston-2017/<h3 id="an-event-apart-boston-2017%2C-boston%2C-ma" tabindex="-1">An Event Apart Boston 2017, Boston, MA</h3>
<p>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.</p>
<p>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.</p>
<h3 id="day-one.-kickoff" tabindex="-1">Day One. Kickoff</h3>
<p>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.</p>
<p>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.</p>
<p>Jaimee Newberry followed with The Art & 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.</p>
<p>“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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>I’ll leave out the bees, I went Twitter happy with that gif I think. Nah, unleash the bees!</p>
<blockquote cite="https://toddl.dev/posts/an-event-apart-boston-2017/Brad%20Frost" class="twitter-tweet">This was still the best from Day One from <a href="https://twitter.com/brad_frost?ref_src=twsrc%5Etfw">@brad_frost</a> <a href="https://twitter.com/hashtag/aeabos?src=hash&ref_src=twsrc%5Etfw">#aeabos</a> <a href="https://t.co/tcOxG1lmAn">pic.twitter.com/tcOxG1lmAn</a><p></p>— Todd (@toddlibby) <a href="https://twitter.com/toddlibby/status/864309047226503172?ref_src=twsrc%5Etfw">May 16, 2017</a></blockquote>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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).</p>
<p>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.</p>
<p>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's where my head was…</p>
<p>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.</p>
<h3 id="day-two.-the-code-block" tabindex="-1">Day Two. The Code Block</h3>
<p>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!</p>
<p>Defining your brand. Brand & Experience Pillars, Voice & 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!</p>
<p>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.</p>
<p>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 <code>flex-basis</code> and <code>minmax()</code> 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.</p>
<p>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.</p>
<p>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 <strong>rows</strong> as well as columns!</p>
<p>Needless to say… things happened in my head… Mind Blown!</p>
<div class="content__placeholder">
<img class="content__image" src="https://media.giphy.com/media/xT0xeJpnrWC4XWblEk/giphy.gif" alt="Tim & Eric mind blown gif" />
</div>
<p>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.</p>
<p>Eric Meyer stepped up and spoke about “Design for Real Life”.</p>
<blockquote cite="https://toddl.dev/posts/an-event-apart-boston-2017/Eric%20Meyer">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.</blockquote>
<p>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 & myself included.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://res.cloudinary.com/colabottles/image/upload/v1585002454/images/onthisday_ablvla.jpg" data-src="https://res.cloudinary.com/colabottles/image/upload/v1585002454/images/onthisday_ablvla.jpg" alt="Example of Facebook filter for On This Day" />
<figcaption>Now Facebook allows users to go in and filter people or dates.</figcaption>
</figure>
</div>
<p>It brought me back to when I remember reading his book, “<em>CSS: The Definitive Guide</em>”, 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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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?</p>
<p>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!</p>
<p>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!</p>
<p>I was taken back by that little revelation.</p>
<p>Alexa ordering dollhouses when people that watched a newscast and had their Amazon Echo on, when the newscaster said, “Alexa, order me a dollhouse”.</p>
<p>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.</p>
<p>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.</p>
<p>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”.</p>
<p>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…</p>
<p>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.</p>
<h3 id="day-three.-a-day-apart" tabindex="-1">Day Three. A Day Apart</h3>
<p>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.”</p>
<p>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;</p>
<blockquote cite="https://toddl.dev/posts/an-event-apart-boston-2017/Bruce%20Lawson">It’s the World Wide Web, not the Wealthy Western Web.</blockquote>
<p><a href="https://www.brucelawson.co.uk/2008/an-event-apart-boston/">Funny story related to that encounter but that’s for another day.</a></p>
<p>Overall, I recommend this event to everyone in the creative field. A must-go, a must-attend.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
Maine Lobster Run 20172017-09-04T00:00:00Zhttps://toddl.dev/posts/maine-lobster-run-2017/<p>The trip entailed a five-day jaunt up the Maine coast starting in Kittery, Maine at Bob's Clam Hut who has one of the best lobster rolls in southern Maine.</p>
<h3 id="i've-only-met-two-lobster-rolls-i-didn't-like" tabindex="-1">I've Only Met Two Lobster Rolls I Didn't Like</h3>
<p>But they weren'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.</p>
<p>I ended up at these two places:</p>
<p><a href="http://www.redseatsmaine.com/">Red's Eats</a><br />
<a href="https://www.mainelobsterfestival.com/">Maine Lobster Festival</a></p>
<p>Red's. Best lobster roll in Maine. Bar none.</p>
<p>Along the way up Route 1 I stopped into Ken's Restaurant, The Lobster Shack at Two Lights, and Red'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.</p>
<p>Not only is there seafood that is fresh and great, but there is fair food, Amato's Real Italians (A Maine thing), and more fair food!</p>
<h3 id="that's-a-lot-of-lobster!" tabindex="-1">That's a lot of lobster!</h3>
<p>Yes, yes it is. But for me it was well worth it. And I will do it again!</p>
An Event Apart 2018 - Wrap-Up Edition2018-05-28T00:00:00Zhttps://toddl.dev/posts/an-event-apart-boston-2018/<h3 id="an-event-apart-boston-2018%2C-boston%2C-ma" tabindex="-1">An Event Apart Boston 2018, Boston, MA</h3>
<p><strong><em>Originally posted on my old site in installments, this has been compiled into one post.</em></strong></p>
<p>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.</p>
<p>As with every AEA, it was kicked off by Jeffrey Zeldman, speaking first about Engagement and the Content Performance Quotient.</p>
<blockquote cite="https://toddl.dev/posts/an-event-apart-boston-2018/Jeffrey%20Zeldman">If a customer spends 30 minutes on our site, was she engaged… or frustrated?</blockquote>
<p>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?</p>
<p>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.</p>
<blockquote cite="https://toddl.dev/posts/an-event-apart-boston-2018/Jeffrey%20Zeldman">FAQs are the junk drawer of content.</blockquote>
<p>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”.</p>
<p>Once again, Jeffery delivered.</p>
<p>Next up, was Yesenia Perez-Cruz who spoke about Scenario-Driven Design Systems.</p>
<p>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.</p>
<p>A good design system feels cohesive, unified and connected.</p>
<p>Successful design patterns don’t exist in a vacuum. Successful design systems start with content and people.</p>
<p>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…</p>
<blockquote cite="https://toddl.dev/posts/an-event-apart-boston-2018/Jeffrey%20Zeldman" class="twitter-tweet">.<a href="https://twitter.com/yeseniaa?ref_src=twsrc%5Etfw">@yeseniaa</a> killed it at <a href="https://twitter.com/hashtag/aeabos?src=hash&ref_src=twsrc%5Etfw">#aeabos</a>. — zeldman (@zeldman) <a href="https://twitter.com/zeldman/status/1011270559697645568?ref_src=twsrc%5Etfw">June 25, 2018</a></blockquote>
<p>Yes, she did. what I took away from her talk was to let your user'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.</p>
<p>Next up was Una Kravets, who spoke on “Why Design Systems Fail”.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>She showed some examples of design systems, voice and tone, MailChimp, DigitalOcean, Carbon, Solid, etc.</p>
<p>A successful design system is like a successful exercise program. Once you stop using it, you lose all your progress.</p>
<p>I’ve never had a successful diet, so I will shoot for a successful design system.</p>
<p>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!</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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! <strong><em>GASP!</em></strong></p>
<blockquote cite="https://toddl.dev/posts/an-event-apart-boston-2018/Rachel%20Andrew">Don’t be afraid of the future of CSS Grids, be excited!</blockquote>
<p>Then Eric Meyer took the stage to discuss Feature Queries. What are the pros and cons? Where are the strengths and weaknesses?</p>
<p>Feature Queries examples.</p>
<pre class="language-css"><code class="language-css"> <span class="token atrule"><span class="token rule">@supports</span> <span class="token punctuation">(</span><span class="token property">prop</span><span class="token punctuation">:</span> val<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment">/* CSS goes here */</span> <span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@supports</span> <span class="token punctuation">(</span><span class="token property">--css</span><span class="token punctuation">:</span> variables<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token selector">html</span> <span class="token punctuation">{</span>
<span class="token property">--color1</span><span class="token punctuation">:</span> navy<span class="token punctuation">;</span>
<span class="token property">--color2</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">html.help</span> <span class="token punctuation">{</span>
<span class="token property">--color1</span><span class="token punctuation">:</span> teal<span class="token punctuation">;</span>
<span class="token property">--color2</span><span class="token punctuation">:</span> maroon<span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token selector">body</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.highlight</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<pre class="language-css"><code class="language-css"> <span class="token atrule"><span class="token rule">@supports</span> <span class="token punctuation">(</span><span class="token property">prop</span><span class="token punctuation">:</span> val<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment">/* CSS goes here */</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@supports</span> <span class="token punctuation">(</span><span class="token property">--css</span><span class="token punctuation">:</span> variables<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token selector">html</span> <span class="token punctuation">{</span>
<span class="token property">--color1</span><span class="token punctuation">:</span> navy<span class="token punctuation">;</span>
<span class="token property">--color2</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">html.help</span> <span class="token punctuation">{</span>
<span class="token property">--color1</span><span class="token punctuation">:</span> teal<span class="token punctuation">;</span>
<span class="token property">--color2</span><span class="token punctuation">:</span> maroon<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">body</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.highlight</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>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.</p>
<p>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.</p>
<p>The truncation joke was a good one as well.</p>
<img src="https://res.cloudinary.com/colabottles/image/upload/v1585002461/images/truncation_wnesil.jpg" data-src="https://res.cloudinary.com/colabottles/image/upload/v1585002461/images/truncation_wnesil.jpg" class="lazy" alt="A slide from Jen Simmons talk on Intrinsic Web Design at An Event Apart Boston 2018" />
<p>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.</p>
<p>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.</p>
<p>…and I cannot forget to mention that I got to see my friend Claudia Snell again!</p>
<p>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.</p>
<h3 id="day-two" tabindex="-1">Day Two</h3>
<p>Well, it is finished and as usual the second day of speakers was as good as the first!</p>
<p>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?</p>
<p>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.</p>
<blockquote cite="https://toddl.dev/posts/an-event-apart-boston-2018/Todd%20Libby" class="twitter-tweet">Internet Pace Layers with <a href="https://twitter.com/adactio?ref_src=twsrc%5Etfw">@adactio</a> <a href="https://twitter.com/hashtag/aeabos?src=hash&ref_src=twsrc%5Etfw">#aeabos</a> <a href="https://t.co/3U1C6ETHEz">pic.twitter.com/3U1C6ETHEz</a> — Todd (@toddlibby) <a href="https://twitter.com/toddlibby/status/1011602011048038402?ref_src=twsrc%5Etfw">June 26, 2018</a></blockquote>
<p>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.</p>
<blockquote cite="https://toddl.dev/posts/an-event-apart-boston-2018/Donna%20Lichaw" class="twitter-tweet">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. <a href="https://twitter.com/dlichaw?ref_src=twsrc%5Etfw">@dlichaw</a> <a href="https://twitter.com/hashtag/aeabos?src=hash&ref_src=twsrc%5Etfw">#aeabos</a>— zeldman (@zeldman) <a href="https://twitter.com/zeldman/status/1011620432028545024?ref_src=twsrc%5Etfw">June 26, 2018</a></blockquote>
<p>Make things that go <strong>BOOM!</strong></p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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!</p>
<p>Delivering a performant, accessible, responsive, scalable website isn’t enough: I also need to consider the impact of third-party scripts.</p>
<p>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.</p>
<blockquote cite="https://toddl.dev/posts/an-event-apart-boston-2018/Derek%20Featherstone">Accessibility is an outcome. Inclusive design is a process.</blockquote>
<p>Inclusive UX Design is “the intentional facilitation and crafting of the interactions within an ecosystem that incorporates inclusion as a core value.”</p>
<p>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.</p>
<p>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!</p>
<p>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!</p>
<p>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.</p>
<blockquote cite="https://toddl.dev/posts/an-event-apart-boston-2018/Gerry%20McGovern" class="twitter-tweet">Designing an intuitive navigation - Gerry McGovern's presentation at An Event Apart 2018 <a href="https://twitter.com/hashtag/customerexperience?src=hash&ref_src=twsrc%5Etfw">#customerexperience</a> <a href="https://twitter.com/hashtag/informationarchitecture?src=hash&ref_src=twsrc%5Etfw">#informationarchitecture</a> <a href="https://t.co/e4ySp0WLjl">https://t.co/e4ySp0WLjl</a> <a href="https://twitter.com/hashtag/aeabos?src=hash&ref_src=twsrc%5Etfw">#aeabos</a> <a href="https://twitter.com/hashtag/aeaboston?src=hash&ref_src=twsrc%5Etfw">#aeaboston</a>— Gerry McGovern (@gerrymcgovern) <a href="https://twitter.com/gerrymcgovern/status/1011675900482596865?ref_src=twsrc%5Etfw">June 26, 2018</a></blockquote>
<p>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.</p>
<p>Even why and how to avoid (or even kill) the hamburger menu (something I am guilty of implementing on a few sites).</p>
<p>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.</p>
<p>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.</p>
<p>Until next time, that is all.</p>
<h3 id="a-day-apart-with-eric-meyer" tabindex="-1">A Day Apart with Eric Meyer</h3>
<p>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.</p>
<p>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.</p>
<p>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!</p>
<p>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.</p>
<p>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. (<em>HTML5 For Web Designers</em>, <em>Bulletproof Ajax</em>, <em>DOM Scripting</em>, and <em>Going Offline</em>).</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
UX Burlington 20192019-05-03T00:00:00Zhttps://toddl.dev/posts/ux-burlington-2019/<h3 id="ux-burlington-2019---burlington%2C-vt" tabindex="-1">UX Burlington 2019 - Burlington, VT</h3>
<h4 id="my-first-ux-burlington" tabindex="-1">My First UX Burlington</h4>
<p>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.</p>
<h4 id="morning-keynote" tabindex="-1">Morning Keynote</h4>
<p>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've been dealing with at work.</p>
<p>Three main points of the talk were:</p>
<ol>
<li>What's an Attention Span?</li>
<li>Decision Making Heuristics</li>
<li>Tactical Design Elements</li>
</ol>
<p>We all have an attention span that is less than that of a goldfish. Designers need to care about their users' attention though. Victor touched upon the questions we have to be asking not only our team and stakeholders, but for our users as well.</p>
<blockquote cite="https://toddl.dev/posts/ux-burlington-2019/Victor%20Yocco">Designing to gain people's attention comes with great responsibility. Why do you want that, what are you doing that's contributing to making their lives better if they're going to give you their attention?</blockquote>
<p>A lot of tech giants need to start asking themselves that very question.</p>
<p>Some of the many points touched on in the fantastic morning keynote were;</p>
<ol>
<li>We need to capture users' attention.</li>
<li>We need to understand why we want and deserve users' attention.</li>
<li>We must navigate ethical decisions and issues when we design for attention.</li>
<li>We need to conduct research with users.</li>
<li>Users can't pay close attention to each decision.</li>
<li>Heuristics are mental shortcutsfor making decisions.</li>
<li>Accounting for heuristics may increase user adoption and decrease mental load.</li>
</ol>
<p>Some key points on the Tactical Design Elements were;</p>
<ol>
<li>Clear the clutter.</li>
<li>Remove distractions.</li>
<li>Animation. What is the goal of it?</li>
<li>Give users something to do.</li>
</ol>
<p>There was so much to Victor'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'll just suggest people watch the video of the keynote. The link to <a href="https://youtu.be/6WBS6YYMAcE">the video for Victor's keynote can be found here</a> on the UX Burlington YouTube account.</p>
<h4 id="fr%C3%A9d%C3%A9ric-harper" tabindex="-1">Frédéric Harper</h4>
<p>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.</p>
<p>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.</p>
<p>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's Law. Fitt's Law, for those who don'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.</p>
<p>Minimizing large files, file requests, HTTP requests, using a CDN, running the audit on Webhint, don'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'll point you to <a href="https://youtu.be/DWd5cL3ViTY">Frédéric's video on the UX Burlington YouTube page</a>. I highly suggest watching.</p>
<h4 id="henri-helvetica" tabindex="-1">Henri Helvetica</h4>
<p>The next speaker was Henri Helvetica, “Planet of the APIs: A Tale of Performance and UX”. The beginning of Henri'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.</p>
<p>How the US was 2nd in the world with selling the low end/low spec phones & 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't mind, I'll borrow this example that he used. Buckle up.</p>
<iframe class="yt" width="560" height="315" src="https://www.youtube.com/embed/GWbP8eC-SIw?start=20" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" title=""></iframe>
<p>Don't say I did not warn you!</p>
<p>Here is a quote from Henri I loved.</p>
<blockquote cite="https://toddl.dev/posts/ux-burlington-2019/Henri%20Helvetica">Resource loading is a delicate dance that can be delightful, but also destructivedue to device damper and limitations.</blockquote>
<p>I won't (and possibly have not a chance to explain these as well as Henri did) go into the API's in-depth, but I will give you and overview of what they are and <a href="https://youtu.be/DLvSPYklE4U">point you to the video on the UX Burlington YouTube page</a>.</p>
<ol>
<li>Paint Timing API</li>
<li>Intersection Observer API</li>
<li>Media Capabilities API</li>
<li>Network Information API</li>
<li>Cache API</li>
<li>Battery Status API</li>
</ol>
<p>I'll go back to another quote from Henri;</p>
<blockquote cite="https://toddl.dev/posts/ux-burlington-2019/Henri%20Helvetica">You can't improve what you don't measure.</blockquote>
<p>I had written down a lot of notes, what mobile browsers these are all good in and not implemented in yet, but again, I'll direct and suggest that <a href="https://youtu.be/DLvSPYklE4U">folks go to the UX Burlington YouTube page and view his talk there</a>. Henri articulated everything so well, I don't want to butcher it.</p>
<h4 id="chris-demars" tabindex="-1">Chris DeMars</h4>
<p>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.</p>
<p>It started with this after Chris' introduction;</p>
<iframe class="yt" width="560" height="315" src="https://www.youtube.com/embed/XB4cjbYywqg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" title=""></iframe>
<p>and a quote that I hope Chris doesn't mind me borrowing.</p>
<blockquote cite="https://toddl.dev/posts/ux-burlington-2019/Chris%20DeMars">If now, you were on the fence about accessibility because it was always an afterthought it'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'll understand ‘Wow, I need to do this not just for myself.’</blockquote>
<p>According to the World Heath Organization, 20% of the people on Earth have a disability(impairment). The W3C states;</p>
<blockquote cite="https://toddl.dev/posts/ux-burlington-2019/W3C">Web accessibility means that people with disabilities <em>can</em> use the web.</blockquote>
<p>Chris thinks (and I am in total agreement) it <em>should</em> read;</p>
<blockquote cite="https://toddl.dev/posts/ux-burlington-2019/Chris%20DeMars">Web accessibility means that <em>EVERYONE</em> can use the web.</blockquote>
<p><a href="https://youtu.be/gUK0ieCJkRI">Go to the UX Burlington page on YouTube and see the video in its entirety.</a></p>
<p>Chris also walked people through <span class="pre">:focus</span> <span class="pre">:focus-visible</span> & <span class="pre">:focus-within</span> with some pretty cool, yet simple pens over at his CodePen account. <a href="https://codepen.io/chrisdemars/pen/OvrbLr"><span class="pre">:focus</span></a>, <a href="https://codepen.io/chrisdemars/pen/PRXbpg"><span class="pre">:focus-within</span></a>, <a href="https://codepen.io/chrisdemars/pen/ejbZYv"><span class="pre">and focus styles</span></a> so go check those out!</p>
<p>Top notch accessibility talk from Chris, so I was extra glad I got the ticket I got.</p>
<h4 id="dr.-robert-moore" tabindex="-1">Dr. Robert Moore</h4>
<p>Witht the closing keynote on a great one-day conference was Dr. Robert Moore and “Conversational UX”.</p>
<p>Without going into it, <a href="https://youtu.be/ZcKB2ns8I1g">go watch the video</a>. I couldn't even possibly begin to articulate a fraction of good as Dr. Moore does. I'll give it the Reader's Digest version as well as I can.</p>
<p>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.</p>
<p>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.</p>
<h3 id="but-what-about-the-food%3F" tabindex="-1">But what about the Food?</h3>
<p>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'll miss it. At least I had to. I am oblivious some times.</p>
<p>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's a must-do if you're looking for good eats in the area.</p>
<p>That's just a little recommendation.</p>
<h3 id="yeah%2C-but-the-conference!" tabindex="-1">Yeah, but the conference!</h3>
<p>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.</p>
<p>If you are debating on going, debate no more. Go. It's well worth it.</p>
An Event Apart 2019 - Wrap-Up Edition2019-05-09T00:00:00Zhttps://toddl.dev/posts/an-event-apart-boston-2019/<h3 id="an-event-apart-boston-2019%2C-boston%2C-ma" tabindex="-1">An Event Apart Boston 2019, Boston, MA</h3>
<h3 id="day-one" tabindex="-1">Day One</h3>
<p>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. <span class="italic">“Readability transcends legibility”</span>, <span class="italic">“Absorption, not conversion</span>.” 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?</p>
<p>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.</p>
<p>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.</p>
<p>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's make it so. Though at work we are not used outside of the United States, we probably wouldn'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.</p>
<p>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't be using unnecessary animations, subtilty in animation (opacity, colors, movement), triggering motion in GIFs and video, and using <code>prefers-reduced-motion</code>.</p>
<p>Val spoke about which types of motion can be triggers for people with disabilities. Now I haven'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.</p>
<p>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 <span class="bolder">“Technical Triad of Terrific”</span> because the next three speakers I follow closely and anything they share or write up on CSS, Grid Layout, and web.</p>
<p>Eric talked about the possibilities when using the pseudo-elements <code>::before</code> and <code>::after</code> for styling and minimalising the clutter in your HTML markup. Then how pull quotes are “mismanaged” and that'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.</p>
<p>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'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.</p>
<p>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.</p>
<p>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!</p>
<p><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=762679">Pushing for Subgrid in Chrome</a> (go ahead, sign in and star it!), <a href="https://noti.st/rachelandrew/aSEj0y/making-things-better-redefining-the-technical-possibilities-of-css#sRqusUa">many technical aspects that you can see in Rachel's slides</a> and many examples <a href="https://gridbyexample.com/">on Rachel's site</a> but the best takeaway I found was Rachel's ending where she stated, “More than ever the web needs <span class="bolder">diversity of thought</span>.”</p>
<p>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'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.</p>
<p>Jen also mentioned that everything doesn'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 <span class="italic">(Thank you so very much!)</span> 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.</p>
<p>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.</p>
<h3 id="day-two" tabindex="-1">Day Two</h3>
<p>Kate O'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.</p>
<p>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'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.</p>
<p>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't do that in an Amazon Go store as it wont be registered correctly. So is this a meaningful experience? Dare I say, nay.</p>
<p>A talk I was itching to hear, <a href="https://rwt.io/">Jason Pamental</a> 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!</p>
<p>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, <a href="https://fontofthemonth.club/">fontofthemonth.club</a>, 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.</p>
<p>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!</p>
<p>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'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! <a href="https://www.sarasoueidan.com/">Be sure to read up on her site for a lot of great articles and information</a>.</p>
<p>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 <strong>a lot</strong>. It made me think of how my work can adjust our app and website to meet the needs and wishes of our customers.</p>
<p>Sarah's examples, especally the Bloom & Wild example were perfect examples of customers to opt-out of newsletters and emails, Sarah's feedback was the catalyst for change when it came to opting out of emails on Mother's Day when someone had suffered a loss or tragedy. This talk brought me back to Eric's talk (and his book with Sara Wachter-Boettcher “<em>Designing for Real Life</em>”) on Design for Real Life. This was widely acclaimed on social media and even in the British press.</p>
<p>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.</p>
<p>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.</p>
<p>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'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're doing and go from there. Run your design system and it's evolution in tandem witht he project you or you and your team are currently working on. I even won a prize during <strong>“Name That Design System!”</strong> (A small victory).</p>
<p>That wrapped up a busy Day Two in which my head was overflowing with ideas and information. Then it was onward to…</p>
<h3 id="day-three" tabindex="-1">Day Three</h3>
<p>The accessibility rock block! Starting off with Michael Austin Sui discussing how (most passionately as well as eloquently) we'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.</p>
<p>Michael discussed AirBNB'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'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's talk (a.k.a. Safari Dude) alone!</p>
<p>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 <code>:focus</code> pseudo class.</p>
<p>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 <strong>still</strong> online, is more accessible than the Captain Marvel site tht is online from only this year. Amazing.</p>
<p>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!</p>
<p>Derek Featherstone talked about inclusive design, a topic that is important to me. The main question I got out of Derek'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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>Jason spoke about Autofill and WebAuthn and also talked about the Payment Request and Credential Management API'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.</p>
<p>The code example of the <code>ui-mask</code> and <code>maxlength</code> 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.</p>
<p>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!</p>
<p>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's talk just reinforced my feelings on user feedback to better the design of our system.</p>
<h3 id="the-summary" tabindex="-1">The Summary</h3>
<p>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.</p>
<p>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.</p>
Typetura2019-06-15T00:00:00Zhttps://toddl.dev/posts/typetura/<p>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'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.</p>
<p><a href="https://typetura.com/">Typetura</a> 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.</p>
<p>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's still in beta and the creators, Scott Kellum and Sal Hernandez, are still adding features and killing bugs. They're also taking questions and feedback. The info for that is right on the website.</p>
An Introduction to the Cascade2019-06-16T00:00:00Zhttps://toddl.dev/posts/an-introduction-to-the-cascade/<p>This is just an introduction in a condensed form. Just a minor basic level overview of the cascade.</p>
<p><a href="https://www.w3.org/TR/css-cascade-4/#cascading">The CSS Cascade Level 4 Spec states</a>;</p>
<blockquote cite="https://toddl.dev/posts/an-introduction-to-the-cascade/CSS%20Cascade%20Level%204%20Spec">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.</blockquote>
<p>There is an order in which selectors are prioritized. Importance, scope, specificity, and order. Let's go over each priority starting with importance. You don'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.</p>
<h3 id="importance" tabindex="-1">Importance</h3>
<p>An <code>!important</code> declaration takes precedence over a normal declaration. Such as when the star selector is used for site-wide styling, take for instance <code>box-sizing: border-box;</code> and then the same property (in this case below, <code>background-color</code>) is using it in the case of the <code>body</code> selector. So <code>background-color: red !important;</code> will overrule the <code>background-color: white;</code>.</p>
<pre class="language-css"><code class="language-css">
<span class="token selector">*</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">body</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> red <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<ul>
<li>
<p>Transition declarations <code>transition-timing-function: steps(6, end);</code> or <code>transition: all .25s ease-in-out;</code></p>
</li>
<li>
<p>Important user agent declarations</p>
</li>
</ul>
<pre class="language-css"><code class="language-css">
<span class="token selector">input, textarea, keygen, select, button, meter, progress</span> <span class="token punctuation">{</span>
<span class="token property">-webkit-writing-mode</span><span class="token punctuation">:</span> horizontal-tb <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<ul>
<li>
<p>Important user declarations <code>p { text-indent: 1em !important; }</code></p>
</li>
<li>
<p>Important author declarations <code>p { text-indent: 1.5em !important; }</code></p>
</li>
<li>
<p>Animation declarations</p>
</li>
</ul>
<pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@keyframes</span> slide-right</span> <span class="token punctuation">{</span>
<span class="token selector">50%</span> <span class="token punctuation">{</span>
<span class="token property">margin-left</span><span class="token punctuation">:</span> 110px<span class="token punctuation">;</span>
<span class="token property">opacity</span><span class="token punctuation">:</span> 0.9<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">to</span> <span class="token punctuation">{</span>
<span class="token property">margin-left</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<ul>
<li>
<p>Normal author declarations <code>p { text-indent: 1.5em; }</code></p>
</li>
<li>
<p>Normal user declarations <code>p { text-indent: 1em; }</code></p>
</li>
<li>
<p>Normal user agent declarations <code>keygen, select { border-radius: 5px; }</code></p>
</li>
</ul>
<p>Read more about <a href="https://www.w3.org/TR/css-cascade-4/#biblio-css-transitions-1">Transition declarations</a> here.<br />
Read more about <a href="https://www.w3.org/TR/css-cascade-4/#biblio-css-animations-1">Animation declarations</a> here.</p>
<h3 id="scope" tabindex="-1">Scope</h3>
<p>A declaration can be scoped to a subtree so that it only affects its scoping element and that element’s descendants. An example is <code>html</code> to <code>body</code>.</p>
<blockquote cite="https://toddl.dev/posts/an-introduction-to-the-cascade/CSS%20Cascading%20and%20Inheritance%20Level%204">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.</blockquote>
<p>So in other words, for normal declarations the inner scope's declarations override but for the <code>!important</code> rule the outer scope's declarations override. Later wins over earlier.</p>
<pre class="language-css"><code class="language-css">
<span class="token selector">h1</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* This one wins */</span>
<span class="token selector">h1</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<pre class="language-css"><code class="language-css">
<span class="token comment">/* This one wins due to specificity */</span>
<span class="token selector">.title__heading</span> <span class="token punctuation">{</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">h1</span> <span class="token punctuation">{</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 2.8em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<blockquote cite="https://toddl.dev/posts/an-introduction-to-the-cascade/MDN%20Web%20Docs">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'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.</blockquote>
<p><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#A_note_on_rule_mixing">A not on rule mixing</a></p>
<h3 id="specificty" tabindex="-1">Specificty</h3>
<ul>
<li>Inline styles (anything between <code><style></style></code> tags)</li>
<li>ID selectors</li>
<li>Classes / pseudo-selectors</li>
<li>Type selectors (for example, <code>h1</code>) & pseudo-elements (<code>::before</code>)</li>
</ul>
<h3 id="order" tabindex="-1">Order</h3>
<p>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 <code>@imports</code> are loaded before anything else in the main stylesheet you are using.</p>
<h3 id="summary" tabindex="-1">Summary</h3>
<p>I have seen a lot of folks frustrated that they don'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.</p>
<p>The spec may look daunting and the language may look foreign, but when it comes down to it, it really isn'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.</p>
<p>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).</p>
<p>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.</p>
Carbon2019-06-16T00:00:00Zhttps://toddl.dev/posts/carbon/<p>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.</p>
<p><a href="https://carbon.now.sh/">Carbon</a> is (taken from the website) where you can “create and share beautiful images of your source code.”</p>
<blockquote cite="https://toddl.dev/posts/carbon/Carbon">You know all of those code screenshots you see on Twitter? Although the code'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.</blockquote>
<p>Plain and simple.</p>
<p>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.</p>
<p>If you want an easy way to share code snippets, this is the way!</p>
Why Your Site Must Be Accessible2019-06-18T00:00:00Zhttps://toddl.dev/posts/why-your-site-must-be-accessible/<p>Accessibility: <em>adj. that can be used, entered, reached, etc.</em></p>
<p>Some of us all too often forget how easy it is for us able-bodied persons to access the web. We don'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.</p>
<p>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's 95 million people out of (as of 2010) around 309 million people. That's over a quarter of the entire populace, 30.7% to be precise.</p>
<h3 id="what-does-that-have-to-do-with-me%3F" tabindex="-1">What does that have to do with me?</h3>
<p>A: Everything.</p>
<p>As designers and even developers, we <strong>must</strong> take into consideration that 30.7% of the population, there shouldn't be <em>any</em> argument about it. It's 2019 folks, time to get inclusive!</p>
<h4 id="there's-that-word-%22inclusive%22" tabindex="-1">There's that word "inclusive"</h4>
<p>Yes, and it's here to stay. As of 2016, it was the UN that declared;</p>
<blockquote cite="https://toddl.dev/posts/why-your-site-must-be-accessible/UN%20Universal%20Declaration%20of%20Human%20Rights,%20Article%2019">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.</blockquote>
<p>So we must be inclusive. The UN also added;</p>
<blockquote cite="https://toddl.dev/posts/why-your-site-must-be-accessible/UN%20Universal%20Declaration%20of%20Human%20Rights,%20Section%2032">The promotion, protection and enjoyment of human rights on the Internet</blockquote>
<p>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'll be surprized how many people access the internet from places you couldn't and don't even think of.</p>
<p>Accessibility is part of the fabric now, it is part of an inclusive experience for those that deserve it. The keyword there is <em>deserve</em>. Don'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.</p>
<h3 id="what-do-i-need-to-do%3F" tabindex="-1">What Do I Need To Do?</h3>
<p><strong>The use of descriptive alt tags.</strong></p>
<p>Just having an alt tag of a boat that says “boat” isn'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.”</p>
<p><strong>Keyboard navigation and Focus</strong></p>
<p>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.</p>
<p>Also enhance <code>:focus</code> indicators and make them stand out and distinctive.</p>
<p><strong>Form fields</strong></p>
<p>Make sure form fields have <code>aria-required="true"</code> so they are read by screen readers as required.</p>
<p><strong>Closed captioning</strong></p>
<p>Make sure all videos are closed captioned.</p>
<p><strong>Basic ARIA landmarks</strong></p>
<p>Use <code>role</code> properly.</p>
<p><strong>Table tags</strong></p>
<p>Markup all tables, cells, headers, and captions appropriately.</p>
<p>These just aren't it, there is a lot more you can do to make your site accessible that I won't be covering here but you can go through these links and read on.</p>
<p><a href="https://soap.stanford.edu/getting-started/basic-checks">Stanford - Online Accessibility Program</a><br />
<a href="https://karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do">Karl Groves - The 6 Simplest Web Accessibility Tests Anyone Can Do</a><br />
<a href="https://webaim.org/blog/10-easy-accessibility-tips/">WebAIM - 10 Easy Accessibility Tips Anyone Can Use</a><br />
<a href="https://www.w3.org/WAI/test-evaluate/preliminary/">W3C - Easy Checks - A First Review of Web Accessibility</a><br />
<a href="https://developer.paciellogroup.com/resources/">Resources - The Paciello Group</a></p>
<h3 id="summary" tabindex="-1">Summary</h3>
<p>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.</p>
<p>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'll share from my experience.</p>
<p>"We don't need to have accessibility as a priority." said my boss. All I had to say is, "Yes we do." I presented one story about why accessibility is important to someone who is focused on company. "Did you hear about Target being sued for their website not being accessible according to the ADA?"</p>
<p>Attitudes change when you tell suits how they can save money by not paying extra. "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't happen while building the website."</p>
<p>It's funny when you present suits that information how fast they give the green light and the go ahead to "do what you need to do. Make it happen."</p>
<p>Be inclusive with your websites, your apps, your designs and remember those who aren't like you when you design and build great things.</p>
<p>You got this.</p>
Fear and Accessibility2019-08-23T00:00:00Zhttps://toddl.dev/posts/fear-and-accessibility/<h3 id="fear-of-the-unknown" tabindex="-1">Fear of the Unknown</h3>
<p>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.</p>
<p>What causes people and companies, to forego accessibility for greed and because “it is not necessary”. What could it be? Fear. In my opinion.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.”</p>
<h3 id="what-about-%E2%80%A6%3F" tabindex="-1">What about …?</h3>
<p>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).</p>
<p>“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.”</p>
<p>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!</p>
<p>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!).</p>
<p>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.</p>
<p>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.</p>
<blockquote cite="https://toddl.dev/posts/fear-and-accessibility/Bruce%20Lawson" class="twitter-tweet" data-lang="en">"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." <a href="https://t.co/eNwUpsFQtH">https://t.co/eNwUpsFQtH</a>— Bruce Lawson (@brucel) <a href="https://twitter.com/brucel/status/1164829479010590720?ref_src=twsrc%5Etfw">August 23, 2019</a></blockquote>
<h3 id="where-do-we-go-from-here%3F" tabindex="-1">Where do we go from here?</h3>
<p>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!</p>
<p>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”.</p>
<p>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.</p>
CORS, CodePen & Me2019-09-06T00:00:00Zhttps://toddl.dev/posts/cors-codepen-and-me/<h3 id="cors%2C-codepen-and-me" tabindex="-1">CORS, CodePen and Me</h3>
<p>I have been experimenting and leaning about Variable Fonts ever since <a href="https://rwt.io/">Jason Pamental</a> 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.</p>
<p>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 <a href="https://ethanmarcotte.com/">Ethan Marcotte</a> 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!</p>
<p>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.</p>
<p>CORS, or Cross-Origin Resource Sharing, is, according to <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">MDN</a> (Mozilla Developer Network);</p>
<blockquote cite="https://toddl.dev/posts/cors-codepen-and-me/MDN">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.</blockquote>
<p>So, unbeknownst to me, browsers restrict cross-origin HTTP requests initiated from within scripts. <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">To quote from MDN again</a>;</p>
<blockquote cite="https://toddl.dev/posts/cors-codepen-and-me/MDN">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.</blockquote>
<p>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.</p>
<h3 id="how-did-i-solve-it%3F" tabindex="-1">How did I solve it?</h3>
<p>The best (and easiest) solution I found came from here <a href="http://bit.ly/2U2DV5s">http://bit.ly/2U2DV5s</a></p>
<p>So, in the netlify.toml file, I just implemented these headers;</p>
<pre class="language-markdown"><code class="language-markdown">[[headers]]
for = "/<span class="token italic"><span class="token punctuation">*</span><span class="token content">.woff"
[headers.values]
Access-Control-Allow-Origin = "</span><span class="token punctuation">*</span></span>"
Content-Type = "application/font-woff"</code></pre>
<pre class="language-markdown"><code class="language-markdown">[[headers]]
for = "/<span class="token italic"><span class="token punctuation">*</span><span class="token content">.woff2"
[headers.values]
Access-Control-Allow-Origin = "</span><span class="token punctuation">*</span></span>"
Content-Type = "application/font-woff2"</code></pre>
<pre class="language-markdown"><code class="language-markdown">[[headers]]
for = "/<span class="token italic"><span class="token punctuation">*</span><span class="token content">.ttf"
[headers.values]
Access-Control-Allow-Origin = "</span><span class="token punctuation">*</span></span>"
Content-Type = "application/font-ttf"</code></pre>
<p>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!</p>
<p>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.</p>
<h3 id="special-thanks" tabindex="-1">Special Thanks</h3>
<p>Thanks to <a href="https://twitter.com/@jpamental">Jason Pamental - @jpamental</a>, <a href="https://twitter.com/@ScottKellum">Scott Kellum - @ScottKellum</a> and <a href="https://twitter.com/@sarah_edo">Sarah Drasner - @sarah_edo</a> for their guidance and assistance!</p>
Open House2019-10-18T00:00:00Zhttps://toddl.dev/posts/open-house/<p>I finally am getting around to writing again after not having written for some time. This is about my adventure down to <a href="https://djr.com/">David Jonathan Ross</a>'s home in Conway, Massachusetts for an open house. It was a great weekend full of adventure and meeting people I normally wouldn't have, talking typography and fonts, and watching some very cool and extremely awesome rpesentations.</p>
<p>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.</p>
<p>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'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.</p>
<p>It was made even better by meeting Scott Kellum, Sal Hernandez and Ana Monroe from <a href="https://typetura.com/">Typetura</a> 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.</p>
<p>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.</p>
<p>A pleasant surprise was getting to catch up with <a href="https://rwt.io/">Jason Pamental</a> again before another get together in <a href="https://aneventapart.com/event/denver-2019">Denver at An Event Apart</a>. I was also taken aback by a very generous invite which I won'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.</p>
<p>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.</p>
<div class="content__placeholder">
<img src="https://toddl.dev/img/breakfastphotoop.jpg" alt="From left to right, Jason Pamental, Todd Libby, and David Jonathan Ross at breakfast Sunday morning" class="content__image" />
</div>
<figcaption>An early morning breakfast photo op, fanboy moment. (L to R - Jason Pamental, myself, David Jonathan Ross)</figcaption>
<div class="content__placeholder">
<img src="https://toddl.dev/img/group-photo.jpg" alt="A group photo at the attendees at David Jonathan Ross's open house. Photo taken at Apex Orchards, courtesy of Matthew Rechs" class="content__image" />
</div>
<figcaption>and here is the group photo, courtesy of Matthew Rechs, taken at Apex Orchards</figcaption>
<h3 id="summary" tabindex="-1">Summary</h3>
<p>Overall. I had a blast. I don'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.</p>
<p>To DJR. Thank you for hosting a wonderful event and I hope to do it again at some point! I'm grateful to have met you, talked with you, and your kindness was greatly appreciated.</p>
An Event Apart 2019 - Denver Wrap-Up Edition, Part One2019-10-28T00:00:00Zhttps://toddl.dev/posts/an-event-apart-denver-2019-part-one/<h3 id="an-event-apart-denver-2019%2C-denver%2C-co" tabindex="-1">An Event Apart Denver 2019, Denver, CO</h3>
<h4 id="the-day-before" tabindex="-1">The Day Before</h4>
<p>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.</p>
<p>I got a huge bear hug from my new friend Jason Ogle, the man behind the <a href="https://userdefenders.com/">User Defenders Podcast</a>. One of my favorites, I highly suggest folks subscribe, listen, join the User Defenders community and <a href="https://patreon.com/userdefenders">become a patron on Patreon</a>.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/jasono-todd.jpg" alt="Jason Ogle and Todd Libby" />
<figcaption>(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.</figcaption>
</figure>
</div>
<p>I got to meet <a href="https://miriam.codes/">Miriam Suzanne</a>, 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!</p>
<p>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!</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/sd-ph-tl.jpg" alt="Sarah Drasner, Phil Hawksworth and Todd Libby at the Netlify table at An Event Apart Denver" />
<figcaption>(L to R: Sarah Drasner, Myself and Phil Hawksworth, at the Netlify table in Denver at An Event Apart Denver.</figcaption>
</figure>
</div>
<p>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'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.</p>
<h4 id="day-one" tabindex="-1">Day One</h4>
<p><a href="https://zeldman.com/">Jeffrey Zeldman</a> 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.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/jz.jpg" alt="Jeffrey Zeldman on stage at An Event Apart Denver" />
<figcaption>Jeffrey Zeldman on stage at An Event Apart Denver talking about Slow Design for an Anxious World.</figcaption>
</figure>
</div>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/jp.jpg" alt="Jason Pamental on stage at An Event Apart Denver" />
<figcaption>Jason Pamental on stage at An Event Apart Denver speaking about Dynamic Typographic Systems and Variable Fonts.</figcaption>
</figure>
</div>
<p><a href="https://rwt.io/">Jason Pamental</a> 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't and want to learn about typography and variable fonts, <a href="https://rwt.io/newsletter">subscribe to Jason's fantastic newsletter</a>. It's well worth it!</p>
<p><a href="https://trentwalton.com/">Trent Walton</a> 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's talk in Boston about all the bloat that comes with different third-party systems. Great refresher and the artwork from Trent's son was top notch!</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/tw.jpg" alt="Trent Walton on stage at An Event Apart Denver" />
<figcaption>JTrent Walton discussing third-party scripts and services and the impact they can have on site performance.</figcaption>
</figure>
</div>
<p>Even Trent's son, Charlie helped out with some of the slides. Of which were excellently done!</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/tw-art.jpg" alt="Trent Walton's son Charlie and his art, helped his dad out in his slides" />
<figcaption>Trent's son Charlie helped out with the slide presentation and produced some excellent art for dad to show the crowd at An Event Apart</figcaption>
</figure>
</div>
<p><a href="https://meyerweb.com/">Eric Meyer</a> came up after lunch and talked about generated content. Pullquotes, blockquotes, gradients, <code>::before</code> and <code>::after</code>. 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.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/em.jpg" alt="Eric Meyer on stage at An Event Apart Denver" />
<figcaption>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.</figcaption>
</figure>
</div>
<p><a href="https://rachelandrew.co.uk/">Rachel Andrew</a> followed with her "Making Things Better: Redefining the Technical Possibilities of CSS" 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'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'll be talking about below. Jen Simmons.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/ra.jpg" alt="Rachel Andrew on stage at An Event Apart Denver" />
<figcaption>Rachel Andrew talked about what is coming to browsers soon, the technical aspects of what's coming down the road and what that means for CSS.</figcaption>
</figure>
</div>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/js.jpg" alt="Jen Simmons on stage at An Event Apart Denver" />
<figcaption>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.</figcaption>
</figure>
</div>
<p><a href="https://jensimmons.com/">Jen Simmons</a> 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's examples of layouts that are done in comparison to some of the things found in graphic arts posters and magazines is simply amazing.</p>
<h4 id="the-user-defenders-podcast" tabindex="-1">The User Defenders Podcast</h4>
<p>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!</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/udp.png" alt="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" />
<figcaption>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.</figcaption>
</figure>
</div>
<p>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're not subscribed to the User Defenders podcast, you are missing out! <a href="https://userdefenders.com/subscribe/">Go subscribe today</a>!</p>
<p>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.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/dinner.jpg" alt="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" />
<figcaption>Dinner at iFish+Ramen with this terrific group of people that came out to dinner with me. Photo courtesy of Jason Ogle.</figcaption>
</figure>
</div>
<p>A fantastic kickoff to the conference! I don'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.</p>
<p>That was the end of Day One. A day of learning, of friendship and of good food. <a href="https://toddl.dev/posts/an-event-apart-denver-2019-part-two/">On to Day Two</a>!</p>
An Event Apart 2019 - Denver Wrap-Up Edition, Part Two2019-10-29T00:00:00Zhttps://toddl.dev/posts/an-event-apart-denver-2019-part-two/<h3 id="an-event-apart-denver-2019%2C-denver%2C-co" tabindex="-1">An Event Apart Denver 2019, Denver, CO</h3>
<h4 id="day-two" tabindex="-1">Day Two</h4>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/jc.jpg" alt="Josh Clark on stage at An Event Apart Denver" />
<figcaption>Josh Clark speaking on stage at An Event Apart Denver on machine learning and what it can do for humans.</figcaption>
</figure>
</div>
<p><a href="https://bigmedium.com/">Josh Clark</a>, the Eleventh Strongest Man in Maine, started the day off talking about machines. Automation.</p>
<blockquote cite="https://toddl.dev/posts/an-event-apart-denver-2019-part-two/Josh%20Clark">How can we use technology in a way that adds meaning?"</blockquote>
<p>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'm also gunning for that tenth spot on the list Josh!</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/jc-tl.jpg" alt="Josh Clark and Todd Libby at An Event Apart Denver in the hallway posing for a photo." />
<figcaption>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.</figcaption>
</figure>
</div>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/bd.jpg" alt="Beth Dean on stage at An Event Apart Denver." />
<figcaption>Beth Dean speaking at An Event Apart Denver on the impact technology and design has on social aspects of society and technology.</figcaption>
</figure>
</div>
<p><a href="http://www.thebethdean.com/">Beth Dean</a> 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.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/fm.jpg" alt="farai Madzima at An Event Apart Denver speaking on diversity and inclusion." />
<figcaption>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)</figcaption>
</figure>
</div>
<p><a href="https://faraimadzima.com/">Farai Madzima</a> 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't safe and they leave?</p>
<p>How can we make this industry more diverse and inclusive? All are fantastic questions and the answers are there in the future, but we'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.</p>
<p>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</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/fm-tl.jpg" alt="Farai Madzima and Todd Libby at An Event Apart Denver posing for a photo." />
<figcaption>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.</figcaption>
</figure>
</div>
<p>After the lunch break, <a href="https://www.lukew.com/">Luke Wroblewski</a> 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.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/lw.jpg" alt="Luke Wroblewski on stage at An Event Apart Denver" />
<figcaption>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.</figcaption>
</figure>
</div>
<p>Remove all friction that distracts the user from experiencing the product value, don'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.</p>
<p>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.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/mm.jpg" alt="Mina Markham on stage at An Event Apart Denver" />
<figcaption>Mina Markham on stage discussing lots of great topics including progressive enhancement, design, accessibility, localization, and most importantly, inclusion.</figcaption>
</figure>
</div>
<p><a href="http://mina.codes/">Mina Markham</a> 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.</p>
<p>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.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/mm-tl.jpg" alt="Mina Markham and Todd Libby sitting on stage at An Event Apart Denver posing for the photo." />
<figcaption>Mina Markham and Todd Libby posing for a photo sitting on stage at An Event Apart Denver after Mina's great talk.</figcaption>
</figure>
</div>
<p>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'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.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/ms-tl-mm-js.jpg" alt="Miriam Suzanne, Todd Libby, Mina Markham, and Jen Simmons standing in the conference hall at An Event Apart Denver. Todd has his red Andrew& Simmons& Markham& Soueidan& Jina shirt on." />
<figcaption>Miriam Suzanne, Todd Libby, Mina Markham, and Jen Simmons posing for a photo at An Event Apart Denver.</figcaption>
</figure>
</div>
<p>To finish off Day Two was <a href="https://danmall.me/">Dan Mall</a> talking about Putting the 'Design' in Design Systems. A deep dive into design systems, again playing the <em>"Name That Design System"</em> game show (which I 'won' 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.</p>
<p>Dan explains it's not the components, it'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 <em>"accessible"</em> and <em>"simple"</em>.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/dm.jpg" alt="Dan Mall at An Event Apart Denver talking about Design Systems." />
<figcaption>Dan Mall on stage discussing design systems at An Event Apart Denver.</figcaption>
</figure>
</div>
<p>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's on why there are certain components with certain design systems. A great way to cap off another phenomenal day at An Event Apart.</p>
<p>Farai'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... <a href="https://toddl.dev/posts/an-event-apart-denver-2019-part-three/">on to Day Three. The final day!</a></p>
An Event Apart 2019 - Denver Wrap-Up Edition, Part Three2019-10-31T00:00:00Zhttps://toddl.dev/posts/an-event-apart-denver-2019-part-three/<h3 id="an-event-apart-denver-2019%2C-denver%2C-co" tabindex="-1">An Event Apart Denver 2019, Denver, CO</h3>
<h4 id="day-three---the-final-chapter" tabindex="-1">Day Three - The Final Chapter</h4>
<p>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.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/ko.jpg" alt="Kate O'Neill at An Event Apart Denver speaking on human experience in technology." />
<figcaption>Kate O'Neill on stage discussing human experience in tech at An Event Apart Denver.</figcaption>
</figure>
</div>
<p>Kate O'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'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.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/sd.jpg" alt="Sarah Drasner at An Event Apart Denver talking about Animation on the Web." />
<figcaption>Sarah Drasner on stage discussing Animation on the Web at An Event Apart Denver.</figcaption>
</figure>
</div>
<p>Sarah Drasner took the stage after with "Animation on the Bleeding Edge". Sarah spoke about emotions and how "the web is first and foremost about communicating". 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.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/sd-code.jpg" alt="Code snippets from Sarah Drasner's talk at An Event Apart Denver" />
<figcaption>Code snippets from Sarah Drasner's talk at An Event Apart Denver.</figcaption>
</figure>
</div>
<p>Val Head came up with "Making Motion Inclusive" 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 & 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 <code>prefers-reduced-motion</code>. 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.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/vh.jpg" alt="Val Head at An Event Apart Denver talking about Motion on the Web." />
<figcaption>Val Head discussing motion on the web and making motion and animation accessible at An Event Apart Denver.</figcaption>
</figure>
</div>
<p>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'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.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/cd-tl-jp.jpg" alt="(From left to right, Chris DeMars, Todd Libby, and Jason pamental at La Loma in Denver at lunch posing for a photo." />
<figcaption>(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.</figcaption>
</figure>
</div>
<p>Back at the conference, Derek Featherstone kicked off the last half of the final day with "Inclusive, by Design". 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. "Acknowledge your privilege, and your power, and your position in the design process." says Derek. "Ask 'How can we make sure that we include more people with disabilities earlier and more meaningfully in the process?" 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.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/df.jpg" alt="Derek Featherstone at An Event Apart Denver discussion Inclusive Design and Accessiblity." />
<figcaption>Derek Featherstone discussing Inclusive Design and Accessibility on stage at An Event Apart Denver.</figcaption>
</figure>
</div>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/gm.jpg" alt="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." />
<figcaption>Gerry McGovern wrapping up the conference at An Event Apart Denver discussing Delivering Products. Don't miss a talk from Gerry, they're not only informative, but very entertaining!</figcaption>
</figure>
</div>
<p>and as with the last few AEA events I have attended, Gerry McGovern ended the conference with his stellar (and very humorous) talk, "Delivering Product 67". I just finished Gerry's book "Top Tasks" 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'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.</p>
<p>And with that, the conference was over.</p>
<h4 id="the-after-conference" tabindex="-1">The After-Conference</h4>
<p>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'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's talk hit me at the very core.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/denver.jpg" alt="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." />
<figcaption>A view of downtown Denver on 16th Street.</figcaption>
</figure>
</div>
<p>After some lengthy conversation I retired to my room and then prepared to rest for the long trek back home. I really don'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).</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/hotel.jpg" alt="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." />
<figcaption>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.</figcaption>
</figure>
</div>
<p>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, <a href="https://aneventapart.com/why-attend">go here and read about all the things said</a> and don't forget that towards the end of the page are links for some great pointers to persuade your boss to send you!</p>
User Defenders Live Podcast at An Event Apart Denver2019-12-05T00:00:00Zhttps://toddl.dev/posts/user-defenders-live-at-an-event-apart-denver/<iframe width="560" height="315" src="https://www.youtube.com/embed/i9mTeKl3NVQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" title=""></iframe>
<p><a href="https://twitter.com/toddlibby/">If you follow me on Twitter</a> 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 <a href="https://userdefenders.com/">User Defenders</a> Live Podcast by Jason Ogle.</p>
<p>I happily accepted and shot this all on my iPhone 11 Max Pro. I'm glad the video came out as well as it did and I am glad I was there to see this podcast live.</p>
<p>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?</p>
<p>Hear the panel that consists of <a href="https://twitter.com/MinaMarkham/">Mina Markham</a>, <a href="https://twitter.com/farai_uxguy/">Farai Madzima</a>, and <a href="https://twitter.com/feather/">Derek Featherstone</a> 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 <a href="https://twitter.com/jasonogle/">Jason Ogle</a>, who runs a terrific podcast and I suggest people in UX subscribe, become a patron, and support <a href="https://twitter.com/UserDefenders/">User Defenders</a>.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
User Defenders Book Club2020-02-02T00:00:00Zhttps://toddl.dev/posts/user-defenders-book-club/<p>It was a pleasure being a part of this discussion about a book I really liked. Mike Monteiro's <em>Ruined By Design</em>. Have a look at the video below and join User Defenders for more community events and more book club discussions!</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/OfxEJvJ5GsQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" title=""></iframe>
<p>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.</p>
<p>I joined in a bit late, I had just gotten back into the office after my afternoon workout , which explains my disheveled look.</p>
<p>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!</p>
Deceptive Patterns In Programs We Trust2020-02-24T00:00:00Zhttps://toddl.dev/posts/deceptive-patterns-in-programs-we-trust/<p>Don't look now but you're probably installing something else other than what you downloaded.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>Then I started to get calls about how <em>“Chrome is on my computer and I don’t know what it is.”</em> or <em>“I need you to come fix this for me. It’s telling me to update the program.”</em></p>
<p>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.</p>
<p>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 <strong>anything</strong> about the topic, but I figured there was only one reason why. Money. The thing that makes big tech run rampant.</p>
<p>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.</p>
<p>I found several instances of <em>“Reasons Why Google Chrome Is Bad”</em> or <em>“Top 10 Reasons Not To Download Chrome”</em> I already know these reasons because I am a little tech savvy. My customers are not.</p>
<p>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.</p>
<h2 id="applications" tabindex="-1">Applications</h2>
<p>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.</p>
<p>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;</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/ccleaner.png" alt="CCleaner by Piriform installation screen." />
<figcaption>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 _“Piriform recommends Google Chrome”_. Why?</figcaption>
</figure>
</div>
<p>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.</p>
<p>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.</p>
<p>Some folks do not! Your <strong>“recommendation”</strong> 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.</p>
<p>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.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/avgfree.jpg" alt="AVG Anti-Virus program installation screen." />
<figcaption>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.</figcaption>
</figure>
</div>
<p>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.</p>
<p>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. <em>“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.”</em>.</p>
<p>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.</p>
<p>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.</p>
<h2 id="emails" tabindex="-1">Emails</h2>
<p>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 <a href="http://nba.com/">NBA.com</a>.</p>
<div class="content__placeholder">
<figure>
<img class="content__image" src="https://toddl.dev/img/nbaemail.png" alt="An email from NBA.com." />
<figcaption>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.</figcaption>
</figure>
</div>
<p>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.</p>
<p>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?!</p>
<h2 id="deceptive-patterns" tabindex="-1">Deceptive Patterns</h2>
<p>In this video, The User Story gives you information on UX deceptive patterns below, talks about some of the ways deceptive patterns work.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Lri1pn2_mnY?si=TCiojvo0c4Nh61vW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
<p>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!”</p>
<p>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.</p>
<p>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?</p>
<h3 id="so-what-can-we-do-about-this%3F" tabindex="-1">So What Can We Do About This?</h3>
<p>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.</p>
<p>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.</p>
<p>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).</p>
<p>We need to be vigilant. I have to be more vigilant.</p>
<p>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).</p>
<p>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.</p>
<p>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.</p>
Coronavirus, Quarantine, and Chats2020-03-22T00:00:00Zhttps://toddl.dev/posts/coronavirus-quarantine-and-chats/<p>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.</p>
<p>I had a few calls with some great people from around the world and it reminded me of the dial-up days when I <strong>really</strong> 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.</p>
<p>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.</p>
<p>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).</p>
<p>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).</p>
<p>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.</p>
<p>I won'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'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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
RWD Turns Ten2020-05-25T00:00:00Zhttps://toddl.dev/posts/rwd-turns-10/<p>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's <em>SAMS Tech Yourself Web Publishing with HTML and XHTML in 21 Days</em> or Jeffrey Zeldmans <em>Designing With Web Standards</em> or Eric Meyer's <em>CSS: The Definitive Guide</em>.</p>
<p>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, <em>«Responsive Web Design»</em></p>
<p>Thank you, Ethan Marcotte.</p>
<p><a href="https://responsivedesign.is/">Responsive Web Design is</a> « ...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 <a href="https://alistapart.com/article/responsive-web-design/">A List Apart</a> and <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">MDN</a>.</p>
<p>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.</p>
<p><a href="https://abookapart.com/products/responsive-web-design">There is even a book</a>, if you did not know this. It should be a part of your library. Really. It should.</p>
<p>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.</p>
<p>Ethan wrote in the ALA article;</p>
<blockquote cite="https://toddl.dev/posts/rwd-turns-10/Ethan%20Marcotte">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.</blockquote>
<p>We'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.</p>
<p>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.</p>
<p>Happy 10th birthday, Responsive Web Design.</p>
Tech Interviews and Anxiety2020-10-29T00:00:00Zhttps://toddl.dev/posts/tech-interviews-and-anxiety/<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1605623948/images/anxiety.jpg" alt="A woman clutching at the neck line of her shirt with eyes closed in contemplation with the photo having a red overlay." title="Photo by Chaozzy Lin on Unsplash." /></p>
<p>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.</p>
<p>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.</p>
<p>I get anxiety-ridden and when I am thrown a curve ball in the Q&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.</p>
<p>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.</p>
<p>I see younger people all the time, “I got a new role at <strong>COMPANY</strong> after two years at <strong>FORMER COMPANY</strong>!” 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 'sour grapes' over the entire process. Frustration, yes.</p>
<p>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.</p>
<p>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.</p>
<p>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 <strong>always</strong> 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: <a href="https://css-tricks.com/the-widening-responsibility-for-front-end-developers/">The Widening Responsibility for Front-End Developers</a> and here <a href="https://css-tricks.com/the-great-divide/">The Great Divide</a>.</p>
<p>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.</p>
<p>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.</p>
Contrasting Accessibility with Color Contrast2020-11-21T00:00:00Zhttps://toddl.dev/posts/contrasting-accessibility-with-color-contrast/<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>How do we improve accessibility for the visually impaired? According to the World Health Organization (WHO); [1]</p>
<ul>
<li>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.</li>
<li>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.</li>
<li>Globally, the leading causes of vision impairment are uncorrected refractive errors and cataracts.</li>
<li>The majority of people with vision impairment are over the age of 50 years.</li>
</ul>
<p>If your website'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:</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1585002459/images/si1_spgbxn.png" alt="A blue form to submit a subscription to an email newsletter" /></p>
<p>Color contrast is defined as;</p>
<p><strong>noun</strong></p>
<ol>
<li>the change in the appearance of a colour surrounded by another colour; for example, grey looks bluish if surrounded by yellow.</li>
</ol>
<blockquote>
<p>“Contrasting colors, also known as complementary colors, are colors from opposing segments of the color > wheel. Colors that are directly across from one another on a basic color wheel provide maximum contrast.” [2]</p>
</blockquote>
<p>There are at least 2.2 billion people who suffer from a vision impairment or some form of color blindness and I'll share with you some of those types of color blindness and vision impairments below.</p>
<h3 id="types-of-color-blindness" tabindex="-1">TYPES OF COLOR BLINDNESS</h3>
<p>There are seven total types of color blindness including monochromacy (the absence of color perception).</p>
<h4 id="red-green-color-blindness" tabindex="-1">Red-green color blindness</h4>
<p>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;</p>
<p><em>Deuteranomaly:</em> 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.</p>
<p><em>Protoanomaly:</em> This makes red look more green and less bright. This is also mild as well.</p>
<p><em>Protonopia</em> and <em>deutueranopia:</em> Both of these make it so that you cannot tell the difference between red and green at all.</p>
<h4 id="blue-yellow-color-blindness" tabindex="-1">Blue-yellow color blindness</h4>
<p>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;</p>
<p><em>Tritananomaly:</em> Which makes it hard to tell the difference between blue and green, and red and yellow.</p>
<p><em>Tritanopia:</em> 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.</p>
<h4 id="complete-color-blindness" tabindex="-1">Complete Color Blindness</h4>
<p><em>Monochromacy</em>: 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.</p>
<p>Men have a much higher risk than women for color blindness. You’re also more likely to have color blindness if you: [3]</p>
<ul>
<li>Have a family history of color blindness.</li>
<li>Have certain eye diseases, like glaucoma or age-related macular degeneration(AMD).</li>
<li>Have certain health problems, like diabetes, Alzheimer’s disease, or multiple sclerosis(MS).</li>
<li>Take certain medicines.</li>
<li>Are white.</li>
</ul>
<h4 id="stargardt's" tabindex="-1">Stargardt's</h4>
<p>Stargardt'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. <a href="https://twoblindbrothers.com/pages/reveal">Here is an example of a site</a> that allows visitors to see through the eyes of the founders, and what they see when they navigate the internet.</p>
<blockquote>
<p>Accessibility should be a top priority for all users. Designers and developers can use color contrast checkers.</p>
</blockquote>
<h3 id="the-tools" tabindex="-1">THE TOOLS</h3>
<p>Color contrast checkers. There are many. I mean <em>a lot</em>. There is one I use to make sure what I am doing uses the correct level of color contrasting, it is <a href="https://contrast-ratio.com/">Lea Verou’s Color Contrast Checker</a>.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1605994825/images/verou-cc.png" alt="Lea Verou's Constrast Ratio website for color contrast checking" /></p>
<p>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).</p>
<p>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.</p>
<p><a href="https://whocanuse.com/">Who Can Use</a> 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.</p>
<p><a href="https://contrastchecker.com/">The WCAG Contrast Checker</a> is another option.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1585002465/images/wcagcc_g30ecf.png" alt="The WCAG Contrast Checker" /></p>
<p>Along with the WebAIM Color Contrast Checker.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1585002466/images/webaimcc_xmujlm.png" alt="WebAIM Contrast Checker" /></p>
<p><a href="https://wave.webaim.org/extension/">The WAVE Web Extension</a> and the <a href="https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd">Axe Web Accessibility Extension</a> are a couple of browser extensions/add-on's I use among other color contrast checking sites and tools.</p>
<p><a href="https://wave.webaim.org/">WAVE</a> and <a href="https://www.deque.com/tools/">Deque</a> 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's for their respective browsers when it comes to color contrast checkers.</p>
<p>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.</p>
<p>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.</p>
<p>Some colors look good to some people (designers, I'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?</p>
<h3 id="wcag-aa-%26-aaa-definitions" tabindex="-1">WCAG AA & AAA DEFINITIONS</h3>
<blockquote>
<p>"So what is an acceptable level of color contrast?"</p>
</blockquote>
<p>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;</p>
<blockquote>
<p>“it compensated for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/40 vision.” [4]</p>
</blockquote>
<p>The minimum level for WCAG AAA is 7:1 and the reason for that is;</p>
<blockquote>
<p>“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]</p>
</blockquote>
<p>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!</p>
<p>While these are the minimum and suggested ratios for each level (AA & 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.</p>
<p>Text requires a higher contrast because people need to read it. Interface components do not and therefore have a lower standard.</p>
<h3 id="forms" tabindex="-1">FORMS</h3>
<p>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;</p>
<blockquote>
<p>“Please check your inbox to confirm your subscription.”</p>
</blockquote>
<p>or…</p>
<blockquote>
<p>“Your confirmation number will be sent to <a href="mailto:user@address.com">user@address.com</a>”</p>
</blockquote>
<p>or…</p>
<blockquote>
<p>“Your ticket number is 98765. Check your inbox to confirm receipt.”</p>
</blockquote>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1585002437/images/ewww_xczuk2.png" alt="A form submission message in white font on a neon yellow background" /></p>
<h3 id="what-we-can-do" tabindex="-1">WHAT WE CAN DO</h3>
<p>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.</p>
<p>How can we make sure we’re paying attention to color contrast when we design and develop websites?</p>
<p><strong>Test with persons with vision impairments.</strong> 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.</p>
<p><strong>Make accessibility inclusive in the design and development process.</strong> If we are including time to make sure what we are doing right from the start is accessible, then we are halfway there.</p>
<p><strong>Be sensible with colors.</strong> 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...</p>
<p><strong>Use the tools!</strong> Color contrast checkers and accessibility tools. Use them, that'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.</p>
<h3 id="summary" tabindex="-1">SUMMARY</h3>
<p>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's make the web more inclusive, but also remember how and why.</p>
<p>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.</p>
<p>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.</p>
<p><a href="https://www.zeldman.com/2019/12/01/bluebeanieday2019/">Jeffrey Zeldman summarized it</a> in his post on Blue Beanie Day (November 30th) when he wrote;</p>
<blockquote>
<p>“...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]</p>
</blockquote>
<p>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.</p>
<p>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.</p>
<ol>
<li><a href="https://toddl.dev/posts/contrasting-accessibility-with-color-contrast/www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment">World Health Organization</a></li>
<li>Vasquez, Rachel R., Lane, Emily, <a href="https://toddl.dev/posts/contrasting-accessibility-with-color-contrast/a11yproject.com/posts/what-is-color-contrast/">What is Color Contrast?</a></li>
<li><a href="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">National Eye Institute, Types of Color Blindness</a></li>
<li>W3C, Contrast (Minimum): <a href="https://toddl.dev/posts/contrasting-accessibility-with-color-contrast/www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding SC 1.4.3</a></li>
<li>Zeldman, Jeffrey, <a href="https://toddl.dev/posts/contrasting-accessibility-with-color-contrast/www.zeldman.com/2019/12/01/bluebeanieday2019/">Another Blue Beanie Day</a>, 1 December, 2019,</li>
</ol>
Fourth Quarter 20212020-11-24T00:00:00Zhttps://toddl.dev/posts/fourth-quarter-2021/<h2 id="it's-been-a-long-fourth-quarter" tabindex="-1">It's been a long fourth quarter</h2>
<p>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.</p>
<p>Perhaps a bit too much. Or, let's face it, it was far too much.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>I didn'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't sit with.</p>
<h2 id="the-start-of-the-pandemic" tabindex="-1">The start of the pandemic</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<h2 id="lots-of-things" tabindex="-1">Lots of things</h2>
<p>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.</p>
<p>So as the days have gone on, I have managed to <em>very slowly</em> get things done and finalized. I've begin the process of cutting down on the groups and subgroups I belong to in the W3C, I haven't streamed in well over a year and maty or may not get back into that.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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't yet concluded the moral of this story, but I sure am tired.</p>
<h2 id="changes" tabindex="-1">Changes</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<h2 id="present-day" tabindex="-1">Present Day</h2>
<p>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.</p>
<p>Looking down the road, I don't regreat the path I took, but I don't recommend it either. Take time for yourself so that you can be there for your family, your friends, and for others.</p>
Label in Name in WCAG 2.12020-12-15T00:00:00Zhttps://toddl.dev/posts/label-in-name-in-wcag-21/<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1605616284/images/accessibility.jpg" alt="A user sitting in front of a computer using a Braille reader." title="Photo by Sigmund on Unsplash." /></p>
<p><a href="https://www.w3.org/TR/WCAG21/">WCAG 2.1 Recommendations rolled out in 2018</a>. It’s been a couple years now and there are some new Success Criterion. In this article, I will discuss <a href="https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html">Label in Name</a>, 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.</p>
<h2 id="you-lost-me-at-success-criterion%E2%80%A6" tabindex="-1">You lost me at Success Criterion…</h2>
<p>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.</p>
<p>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.</p>
<h2 id="label-in-name" tabindex="-1">Label in Name</h2>
<p>So, getting back to things, <a href="https://www.w3.org/TR/WCAG21/#label-in-name">2.5.3 Label in Name</a> (Level A) is new and defined in the WCAG 2.1 Success Criterion. Here’s how it’s described:</p>
<blockquote>
<p>For user interface components with labels that include text or images of text, the name contains the text that is presented visually.</p>
</blockquote>
<p>The intent of this Success Criterion (SC) is to ensure <strong>the words which a label has visually on the component are also included in the words that are associated with the component programatically</strong>. 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 <strong>programmatic name</strong> do not have to be exact, mind you, but they should contain a common work that associates them (e.g., “Submit” with “Submit Now”).</p>
<p>The point is that there isn’t confusion, because of a discrepancy, between what is read and what is seen.</p>
<h2 id="assistive-technology-in-action" tabindex="-1">Assistive technology in action</h2>
<p>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.</p>
<p>Say the label of the button and the visual text in the button are inconsistent:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>
Message:
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Send<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre>
<p>In the above example, <strong>the button doesn’t function properly for assistive technology</strong>. The button contains the text “Send” but its <code>aria-label</code> 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.</p>
<p>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 <code>aria-label</code> adds no value, removing it altogether is a better fix:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>
Message:
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Send<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre>
<p>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.</p>
<p>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.</p>
<p>Also, when the accessible name is different from the visible label, it may function as a hidden command that can be activated <em>accidentally</em> by speech-input users. SC does not apply where a visible text label does not exist for a component.</p>
<h2 id="code-in-action" tabindex="-1">Code in action</h2>
<p>Here are three different failure states.</p>
<ul>
<li><a href="https://codepen.io/colabottles/pen/QWKWmEK">A problematic <code><button></code> element</a> where the spoken label and visual label have no association.</li>
<li><a href="https://codepen.io/colabottles/pen/poEoLPP">A label mismatch</a> where the spoken text reads more content than the visual label does because of an “accessibly hidden” span.</li>
<li><a href="https://codepen.io/colabottles/pen/MWjWVXr">An input with a spoken label</a> via <code>aria-labelledby</code>, which fails to establish a correlation between the spoken and visual label.</li>
</ul>
<p>Again, these are all examples of poor practices, according to the 2.5.3 Label in Name SC.</p>
<blockquote>
<p>In 2020 the WebAIM Million project evaluated 4.2 million form inputs and found that 55% were improperly unlabeled, either via <code><label></code>, <code>aria-label</code>, or <code>aria-labelledby</code>.</p>
</blockquote>
<p>When working with forms, most of us are pretty used to pairing a <code><label></code> with an <code><input></code> 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 <strong>programmatic name</strong>, which is also known as the “accessible name” using an <code>aria-label</code>.</p>
<p>We get a better user experience when the name of the <code><label></code> can be associated with the programmatic (or accessible) name in the <code>aria-label</code>. For example, if we’re using “First Name” for an input’s <code><label></code>, then we probably want our <code>aria-label</code> to be “First Name” or something to that effect as well. <strong>A failure to draw a connection between programmatic names and visible labels can be more of a challenge for users with cognitive challenges</strong>. 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.</p>
<p>Here are those three examples from above fixed up!</p>
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="colabottles" data-slug-hash="OJRPGYO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Label in Name: Ex 4 - Correct Usage of Label in Name">
<span>See the Pen <a href="https://codepen.io/colabottles/pen/OJRPGYO">
Label in Name: Ex 4 - Correct Usage of Label in Name</a> by Todd Libby (<a href="https://codepen.io/colabottles">@colabottles</a>)
on <a href="https://codepen.io/">CodePen</a>.</span>
</p>
<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h2 id="text-in-label-specifics" tabindex="-1">Text in Label specifics</h2>
<p>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 <a href="https://www.w3.org/WAI/WCAG21/Understanding/images-of-text">1.4.5 Images of Text</a>).</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1608072283/images/rte.webp" alt="A rich-text editor taken from the GitHub website." title="GitHub's Rich-text editor" /></p>
<p>To match the label text and accessible name with one another, it is important to determine <em>which</em> text should be considered the label for any component for any given control. There are often <em>multiple</em> text strings in a user interface that may be relevant to a control. <a href="https://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160105/G162">There are reasons</a> 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:</p>
<ul>
<li>immediately to the left of text inputs, dropdown boxes, and other widgets or components.</li>
<li>immediately to the right of checkboxes and radio buttons.</li>
<li>inside buttons or tabs or immediately below icons serving as buttons.</li>
</ul>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1608078060/images/Group-6a.jpg" alt="Labels to the left of inputs and dropdown select menus" /><strong><em>Labels to the left of inputs and dropdown select menus</em></strong></p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1608078060/images/Group-7a.jpg" alt="Labels to the right of checkbox and radio buttons" /><strong><em>Labels to the right of checkbox and radio buttons</em></strong></p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1608078060/images/Group-8a.jpg" alt="Labels inside or below a button, depending on the symbol" /><strong><em>Labels inside or below a button, depending on the symbol</em></strong></p>
<p>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.</p>
<p>Another thing to consider: components without a visual label are not considered by the WCAG SC.</p>
<h2 id="proper-labeling-has-its-perks" tabindex="-1">Proper labeling has its perks</h2>
<p>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.</p>
<p>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.</p>
<h2 id="summary" tabindex="-1">Summary</h2>
<p>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.</p>
<p>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 <a href="https://www.w3.org/TR/WCAG21/#label-in-name">looking for</a>:</p>
<blockquote>
<p>[…] <a href="https://www.w3.org/TR/WCAG21/#dfn-user-interface-components">user interface components</a> with <a href="https://www.w3.org/TR/WCAG21/#dfn-labels">labels</a> that include <a href="https://www.w3.org/TR/WCAG21/#dfn-text">text</a> or <a href="https://www.w3.org/TR/WCAG21/#dfn-images-of-text">images of text</a>, the <a href="https://www.w3.org/TR/WCAG21/#dfn-name">name</a> contains the text that is presented visually.</p>
</blockquote>
<p>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 <a href="https://wave.webaim.org/extension/">WAVE browser extension</a> (Chrome and Firefox) and <a href="https://www.deque.com/axe/browser-extensions/">Axe from Deque Systems</a> (Chrome).</p>
<p>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.</p>
Goodbye 20202020-12-31T00:00:00Zhttps://toddl.dev/posts/goodbye-2020/<p>What can be said that already hasn't been said about this year?</p>
<p>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.</p>
<p>Yet here we are…</p>
<p>I can't think of a year where so much was taken from everyone. Ever. I have seen a lot of wins though from people. It's those small wins that add up to make the blow that is 2020 a lot more bearable.</p>
<p>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.</p>
<p>So here are some of the things I am grateful for in 2020 that happened along the way.</p>
<ol>
<li>Spoke at BarCamp Philly.</li>
<li>Wrote an article for CSS-Tricks.</li>
<li>Self-published a zine.</li>
<li>Started writing an autobiography.</li>
<li>Joined the W3C</li>
<li>Started a podcast.</li>
</ol>
<p>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.</p>
<p>I'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.</p>
<p>What will 2021 bring us? I'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'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.</p>
<p>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're not going to reach that goal in my lifetime.</p>
<p>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.</p>
<p>May your 2021 be the best it can be with happiness and safety in these times.</p>
Staycation 20212021-01-25T00:00:00Zhttps://toddl.dev/posts/staycation-2021/<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1611591059/images/staycation.jpg" alt="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." title="Photo by Nathan Dumlao on Unsplash." /></p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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't want to chance anything, I stayed home and decided January, my birth month, would be a great present to myself.</p>
<h2 id="so-what%3F-why-should-i-care%3F" tabindex="-1">So What? Why should I care?</h2>
<p>I've been burnt out <strong>multiple</strong> times. You don't want to go down the same path if you haven'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.</p>
<p><strong>Mental Health</strong>: 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. "The One Ring" so to speak. You rmental health is so important that any damage has a ripple effect as I like to call it. If you're not at your best, then that affects other people that you deal with on a daily basis.</p>
<p>This could be co-workers, family, friends, anyone. Your actions affect others.</p>
<p><strong>Physical Health</strong>: I don't know how many times I "burnt the candle at both ends." 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.</p>
<p>I scrapped sleep for the almighty dollar and it cost me time with my kids when they were young, two TIA's (mini-strokes), premature grey hair, stress, worry, anxiety. Nothing I'd wish on anyone. It made me some money, but it cost me in the long run.</p>
<h2 id="i-can't-afford-to!-so-i-won't" tabindex="-1">I can't afford to! So I won't</h2>
<p>Yes you can. You certainly can. I can and did. Here is how.</p>
<p>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't a pandemic and we are free to travel and do our thing without fear) to pay for your vacation.</p>
<p>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.</p>
<p>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, <em>spend time with your family</em>! I cannot stress that last one enough. Kids grow up fast. Make sure you'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.</p>
<h2 id="my-company-won't-let-me-have-pto" tabindex="-1">My company won't let me have PTO</h2>
<p>Well, I wouldn't work for a company that doesn'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 <em>all the time</em>.</p>
<p>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're remote, we're not there. I'm not going into a gym under these extreme times we are living in. Are you? I hope not.</p>
<p>So be good to yourself, be good to your families. Be good to the people around you because that "ripple effect" 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.</p>
<p>That stone is you, the ripples are the effect you can have on others.</p>
<p>Coding isn't the most important thing in the world. You are.</p>
Don't Ever Give Up2021-03-31T00:00:00Zhttps://toddl.dev/posts/dont-ever-give-up/<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1617229521/images/employed.jpg" alt="The symbol for a handicapped parking space with the blue square and white figure sitting in a wheelchair." title="Photo by AbsolutVision on Unsplash" /></p>
<h3 id="the-more-you-persist" tabindex="-1">The More You Persist</h3>
<p>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.</p>
<p>If you don't have a job in tech and you'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't stop. Don't ever give up.</p>
<p>I have quit more than a thousand times. I have "given up" 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.</p>
<p>Well, dear reader, that all has changed. Much, to my shock, surprise, and delight, I have accepted an offer to go to work for <a href="https://knowbility.org/">Knowbility</a> and I couldn'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.</p>
<p>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.</p>
<h3 id="it's-over" tabindex="-1">It's Over</h3>
<p>The job search is over.</p>
<p>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.</p>
<h3 id="that's-great.-i'm-still-jobless" tabindex="-1">That's Great. I'm Still Jobless</h3>
<p>Through the thousands (literally) of resumes, and emails and rejections and ghosting that I endured. Through the amount of times when I thought:</p>
<blockquote>
<p>Am I good enough? Am I too old? Should I just give up? Should I just quit?</p>
</blockquote>
<p>I kept going and finding the things I was good at. I applied to the jobs even if I didn't have all the qualifications. I was so numbed to the:</p>
<blockquote>
<p>We liked your resume and it was impressive but you're not the right fit.</p>
</blockquote>
<p>I kept going. Kept the bar low as low can be. I don't know how and I don't know why, but I kept going and I finally got my Holy Grail.</p>
<p>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's alright by me.</p>
<p>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.</p>
<p>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.</p>
<p>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're a friend of mine that isn't white like me, KEEP GOING!</p>
<p>DON'T EVER GIVE UP!</p>
My First Week At Knowbility2021-04-05T00:00:00Zhttps://toddl.dev/posts/my-first-week-at-knowbility/<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1618106597/images/knowbility-logo.png" alt="The Knowbility logo." title="The Knowbility logo." /></p>
<h3 id="onboarding" tabindex="-1">Onboarding</h3>
<p>Well, my first day was the usual day of paperwork and chaos with some family issues. I started a week earlier, so to keep my mind off things that I cannot control outside of myself. This was Monday.</p>
<p>Tuesday was a team meeting where I got to meet a lot of folks and see some folks I had interviewed with and met already. Eric, Sharron, Kim, and Emily. I was welcomed warmly and I felt something I hadn't felt before working within a team. Welcomed and valued. It was different, yet it felt like I was home.</p>
<p>Wednesday was a day off of sorts. I finished filling out the last of the paperwork, and had to go see my father at the rehab center he is currently at. Thursday I will be shadowing and just lurking and getting familiarized with the process and I have some reading to do as well.</p>
<p>At some point, I have to pinch myself because it all seems like a dream but it is in fact, not a dream. I couldn't be any more happier.</p>
<h3 id="the-present" tabindex="-1">The Present</h3>
<p>I'll be jumping in more in the following weeks and going forward, I am eager, anxious (in a good way), and excited to get going even more and contribute more. Hopefully I cna get into more speaking and writing roles as well.</p>
<p>Accessibility has been a focus for all my career, even more the last decade and even more advocating in the past 2-3 years. I plan to do a lot more, and now that I am with an accessibility-focused company, multiply that tenfold.</p>
<p>I am beyond thrilled at this point.</p>
<h3 id="the-future" tabindex="-1">The Future</h3>
<p>The future looks great. I already have the feeling like I am home in a company that values its people. That it's juts not a 9-5 grind, that they value their people and their well-being.</p>
<p>I hope to be a part of Knowbility for a very long time. I have about 10-15 years left in me. 20 if I am lucky and I think this part of the ride into the sunset is going to be the best one yet.</p>
A Month At Knowbility2021-05-05T00:00:00Zhttps://toddl.dev/posts/a-month-at-knowbility/<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1618106597/images/knowbility-logo.png" alt="The Knowbility logo." title="The Knowbility logo." /></p>
<h3 id="a-little-background" tabindex="-1">A little background</h3>
<p>One month in and things couldn't be any better. I wrote a first week post because of all the excitement behind the new job and now it's time to go a little deeper and write about all the events leading up to being hired at <a href="https://knowbility.org/">Knowbility</a>.</p>
<h3 id="how-i-got-here" tabindex="-1">How I got here</h3>
<p>I was getting some food at the local pizza joint in my neighborhood on a pretty decent afternoon. I had just done the interviews and felt okay about them with the good folks at Knowbility, so I decided to treat myself to a pizza. Who doesn't?</p>
<p>Standing in line and waiting to order (masked, of course) and I got the email. Now if you have followed my search that I have documented a bit, you'll know it has been a long process. A defeating, debilitating process that beat me down pretty good. Rejection after rejection, over the phone, over email, being ghosted. By any and all means it seemed.</p>
<p>I started sweating. I had applied at a couple places that focused on accessibility and knew it was a great fit for me, but who was I a great fit for? Anyone? I was mired in depression, self-doubt, imposter syndrome. I applied for roles I knew I wasn't going to get anyway. I just wanted something to stick.</p>
<p>So I look at my phone and of course, instantly, the doom and gloom set in.</p>
<blockquote>
<p>Oh, another rejection email has come in. The typical, 'While your resume was impressive, we don't think you;re a good fit for _________. Thank you for applying.' Is this another email like that? Do they have a link attached that will tell me how to appply for future roles like some companies do? How about a link to how to apply for roles like I am someone right out of high school?</p>
</blockquote>
<p>A hundred thoughts ran through my head. Then, my defiant side kicked in.</p>
<blockquote>
<p>Open it. Read it. You'll know after the first line of the email if they want you or not.</p>
</blockquote>
<p>Well, usually the process was me reading who the email is from, panic ensuing, then the rejection. This time was a little different for some reason. I glanced at the sender, in this case, someone from Knowbility, and I read the subject line involuntarily.</p>
<blockquote>
<p>Mar 31 Knowbility Offer Letter of Employment</p>
</blockquote>
<p>I got to say, I "bricked" in my pants figuratively. I had to contain myself from fist-pumping and jumping up and down, screaming and celebrating. I maintained my composure, acted as if nothing had happened, got my food, went home and then I completely came unglued and went bonkers. Jumping, fist-pumping, celebrating, even dancing at age fifty, yeah I did it. I earned it.</p>
<blockquote>
<p>We finally did it. Wow.</p>
</blockquote>
<p>My brain, who likes to play a lot of practical jokes on me, actually decided to take a vacation. No more second guessing. No more telling me things that weren't true. No more self-doubt or self-deprecation. Pack your bags and take some time off.</p>
<h3 id="where-the-rubber-meets-the-road" tabindex="-1">Where the rubber meets the road</h3>
<p>First week or so was onboarding and getting used to how things are done. Forms to fill out naturally, meeting the team and some of my colleagues. All that first week stuff you do at a new job. Or in my case, a new career.</p>
<p>The people are great, friendly, and welcoming. My team is made up of some terrific people who are smart and talented. I worked with a colleague who is very patient with my first week jitters and oversights and we worked on a project, audited a site in no time flat. I'm getting the process more and more each day and the Accessibility Services Team is phenomenal in their support and help.</p>
<p>As I moved forward I got another project to audit and have one that we just started that I am teaming up again with. Auditing sites for accessibility issues so that companies and entities can make their sites more accessible. I am here for that.</p>
<h3 id="what-do-you-do%3F" tabindex="-1">What do you do?</h3>
<p>I audit websites for accessibility issues with automatic and manual testing and file those issues in Jira and then send that off for review and eventually a report handed off to the client on recommended changes. No coding. It's a bit of a refreshing break. My title is <em>Accessibility & Training Specialist</em>. I don't do any training right now, however.</p>
<p>There is also a lot of learning. How the workflow is, how the team does audits, how they do other things also like Masterclasses, webinars, and online events. Having to learn Jira has been the most challenging thing, it's not an easy job. It's a fun and challenging career for me.</p>
<h3 id="where-do-i-go-from-here%3F" tabindex="-1">Where do I go from here?</h3>
<p>One month in and I couldn't be any happier. My short-term goal is reach the 6-month mark and get good feedback and remarks from the team and the company. I've <strong>finally</strong> broken into the accessibility space twenty-two years and over 2,200 resumes later, after my professional journey started in 1999. Forty-one years after I first touched a computer and knew this is what I wanted to do for a living in some capacity in 1980 at age nine.</p>
<p>Long-term? I am trying not to think that far down the road because the landscape of employment can change in the blink of an eye in tech. I hope that I am with Knowbility for awhile. I said I'd like to close out my career in tech here, I hope I can, if I can't then I hope I can continue on in the accessibility space and who knows where or when or if that will happen.</p>
<p>Right now though? One month in? I couldn't be any happier to have the past behind me and a good-looking future ahead of me.</p>
AccessiBe Is Not Your Friend2021-07-15T00:00:00Zhttps://toddl.dev/posts/accessibe-is-not-your-friend/<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1626382025/images/snakeoil.jpg" alt="A snake oil salesman on his wagon where he sells snake oil that has the AccessiBe logo Photoshopped on the side of the wagon." title="A snake oil salesman on his wagon where he sells snake oil that has the AccessiBe logo Photoshopped on the side of the wagon." /></p>
<p>The following view does not represent my employer, or any other entity I am involved with. The views expressed here are strictly my own.</p>
<h3 id="the-shot" tabindex="-1">The Shot</h3>
<p>A recent thread on Twitter caught my eye and it was probably the most ridiculous thing I have read in a very long time.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1626382345/images/shot.png" alt="A Twitter thread by a group that uses AccessiBe and a troll account tweeting disparaging remarks about Karl Groves, a long time accessibility professional." title="A Twitter thread by a group that uses AccessiBe and a troll account tweeting disparaging remarks about Karl Groves, a long time accessibility professional." /></p>
<p>There is a bit to unpack here.</p>
<ul>
<li>One. This account was created to troll an accessibility professional of many years and much experience.</li>
<li>Two. It's a sock puppet account. If it's a real guy, then its a middle school attempt at being a troll on Twitter.</li>
<li>Three. It's probably the only account I have seen come to the defense of a snake oil sales company.</li>
</ul>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1626383178/images/sock_puppet.png" alt="'Sheldon' just joined Twitter today to throw shade. His picture may be from This Person Does Not Exist." title="'Sheldon' just joined Twitter today to throw shade. His picture may be from This Person Does Not Exist." /></p>
<p>“Sheldon” looks like he just joined today to throw shade at Karl. I smell something rotten and suspect an "executive" 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.</p>
<p>I asked for a list of the "professionals" that support AccessiBe. No list has been made public yet. A lot of "pot meet kettle" especially when others have come to the conclusion that AccessiBe needs the benefit of the doubt.</p>
<p>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's next? I think the attacks get worse.</p>
<p>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't. Their product is a modern-day Ponzi scheme.</p>
<h3 id="the-chaser" tabindex="-1">The Chaser</h3>
<p>Few have sung the praise of the snake oil, yet when time and time again, accessibility professional after accessibility professional has come forward with <strong>evidence</strong> that the overlay <em>does not work</em>, 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 <em>decades</em>.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1626383910/images/chaser.png" alt="The chaser. Proof from Eric Eggert that AccessiBe's overlay does not work as the company claims." title="The chaser. Proof from Eric Eggert that AccessiBe's overlay does not work as the company claims." /></p>
<p>The overlay (and <strong>any</strong> overlay or aid that is plastered onto a site) does not work. The proof is in the pudding and the proof has been <a href="https://adrianroselli.com/2020/06/accessibe-will-get-you-sued.html">well-researched</a>, <a href="https://overlayfactsheet.com/">well-documented</a>, and presented by many. So many that <a href="https://www.forbes.com/sites/gusalexiou/2021/06/26/largest-us-blind-advocacy-group-bans-web-accessibility-overlay-giant-accessibe/?sh=379fd3bf5a15">it has been in the news</a>, it has been <a href="https://www.nbcnews.com/tech/innovation/blind-people-advocates-slam-company-claiming-make-websites-ada-compliant-n1266720">featured nationally</a>, and even the lies AccessiBe has perpetrated have been <a href="https://wptavern.com/wordpress-org-removes-fake-reviews-for-acessibe-plugin">uncovered and exposed them</a> as the frauds they are.</p>
<h3 id="how-low-can-you-go%3F" tabindex="-1">How Low Can You Go?</h3>
<p>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.</p>
<p>Let's revisit some of those, shall we?</p>
<ul>
<li>Lies about reviews, those reviews removed because they were fake about the WordPress plugin they offer (which still doesn't make you rsite 100% accessible).</li>
<li><a href="https://adrianroselli.com/2020/06/accessibe-will-get-you-sued.html#Update05">Being ableist</a></li>
<li>Attacking accessibility professionals in the accessibility space.</li>
<li>Fake Twitter accounts (?)</li>
<li>Lies about other assistive technologies.</li>
</ul>
<p>and those are just a few.</p>
<p>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'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.</p>
<h3 id="bottom-line" tabindex="-1">Bottom Line</h3>
<p>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 "100% accessible") to make a site that changes and evolves, "totally accessible".</p>
<p>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's snake oil do that?</p>
<p>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 <a href="https://knowbility.org/">a hold of a company</a> 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.</p>
<p>Don'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. <a href="https://www.smashingmagazine.com/2021/07/strong-case-for-accessibility/">I wrote an article that touched upon how to get stakeholder and managerial buy-in at your organization</a> it even stresses the importance of getting peers and colleagues in on accessibility as well.</p>
<p>Don'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'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.</p>
<h2 id="correction-(28-july%2C-2021)" tabindex="-1">CORRECTION (28 July, 2021)</h2>
<p>After some research when seeing a tweet, I looked up Sheldon, who is in fact real. And a person with a disability. Don't come at me with "You're attacking a disabled person." I'm not, I'm questioning professional ethics and confirmation bias. However, the irony remains.</p>
<p>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.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1627483084/images/sheldon.png" alt="Sheldon is real and Sheldon has a great LinkedIn profile." title="Sheldon is real and Sheldon has a great LinkedIn profile." /></p>
<p>There are lots of people in the disabled community that are on the side of AccessiBe, and that'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.</p>
<p>Two things that are apparent in the accessibility community:</p>
<ul>
<li>Karl has decades experience.</li>
<li>Karl does not "own his own manual coding business".</li>
</ul>
<p>Which brings me this last point.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1627482525/images/sheldon2.png" alt="Sheldon has goals and aspirations yet joins in the divide that AccessiBe hammers between people in the disabled and accessibility communities." title="Sheldon has goals and aspirations yet joins in the divide that AccessiBe hammers between people in the disabled and accessibility communities." /></p>
<blockquote>
<p>We are on a mission to make the internet accessible to all by 2025</p>
</blockquote>
<p>Hard to achieve that dream when the company you stump for doesn't make the web accessible.</p>
<blockquote>
<p>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.</p>
</blockquote>
<p>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%+.</p>
<p>It is unjust, but AccessiBe contributes to that unjust.</p>
<p>Technology has shown (as has the people that create it) that ML, AI, cannot be trusted to solve all the problems. It doesn't bridge, is creates barriers.</p>
<p>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.</p>
<p>By the by, Sheldon is back and still pedaling the same farcical, muck.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1627486307/images/sheldon3.png" alt="Guess who's back, back again. Sheldon's back, tell a friend." title="Guess who's back, back again. Sheldon's back, tell a friend." /></p>
<p>It just doesn't end. That'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.</p>
<p>Sheldon just exacerbates it.</p>
<p>Sheldon may be a very nice human being, I'm not saying Sheldon isn't. However, what I am saying is Sheldon is part of the problem. What woks in your browser doesn't work in everyone else's.</p>
Looking at WCAG 2.5.5 for Better Target Sizes2021-07-29T00:00:00Zhttps://toddl.dev/posts/looking-at-wcag-255-for-better-target-sizes/<p>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.</p>
<p>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.</p>
<h3 id="success-criterion-revisited" tabindex="-1">Success criterion revisited</h3>
<p>I touched (no pun intended) on Success Criterion in <a href="https://css-tricks.com/whats-new-in-wcag-2-1-label-in-name/#you-lost-me-at-success-criterion">a previous article</a> 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.”</p>
<p>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 <a href="https://www.w3.org/TR/WCAG21/#target-size">WCAG 2.5.5</a> with a AAA grade requires “the size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:</p>
<ul>
<li>Equivalent: The target is available through an equivalent link or control on the same page that is at least 44×44 CSS pixels;</li>
<li>Inline: The target is in a sentence or block of text;</li>
<li>User Agent Control: The size of the target is determined by the user agent and is not modified by the author;</li>
<li>Essential: A particular presentation of the target is essential to the information being conveyed.”</li>
</ul>
<h3 id="what-could-possibly-go-wrong%3F" tabindex="-1">What could possibly go wrong?</h3>
<p>It’s just a size, right? Easy peasy. Nothing can possibly go awry.</p>
<p>Or can it?</p>
<p>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.</p>
<p>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.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1627617619/images/timeline.webp" alt="A timeline from Twitter with some really small target area to close out topics if you don't want to see them and plus icons if you want to add them." /></p>
<figcaption>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.</figcaption>
<p>Another favorite example I see quite often? Ads. Have you ever struggled to click the minuscule “X” button to close them?</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1627864886/images/cookie.webp" alt="Cookie policy modal with a very small target area and difficult way to close the ad." /></p>
<figcaption>You’re not alone if you’ve ever struggled to click, let alone even locate, the close button.</figcaption>
<p>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.</p>
<h3 id="target-size-considerations" tabindex="-1">Target size considerations</h3>
<p>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.</p>
<p>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.</p>
<h4 id="consider-the-difference-between-%E2%80%9Cclick%E2%80%9D-and-%E2%80%9Ctap%E2%80%9D" tabindex="-1">Consider the difference between “click” and “tap”</h4>
<p>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.</p>
<p>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.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1627620899/images/mobile1.webp" alt="A comparison of mobile screens side-by-side comparing targets of links as opposed to buttons." /></p>
<figcaption>A Tale of Two Targets: Combining padding and color can help increase the size of a tap target while making it visually clear.</figcaption>
<p>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.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1627621013/images/mobile2.webp" alt="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." /></p>
<figcaption>A smaller pointer offers more precision than a larger thumb when it comes to interacting with an element.</figcaption>
<p>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.</p>
<p>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.</p>
<p>But with all this said, <a href="https://www.w3.org/TR/mediaqueries-4/#pointer">we do actually have a CSS media query</a> that can detect a pointer device so we can target certain styles to either fine or coarse input interactions, <a href="https://caniuse.com/css-media-interaction">and it’s well-supported</a>. Here’s an example pulled right out of the spec:</p>
<pre class="language-css"><code class="language-css"> <span class="token comment">/* Make radio buttons and check boxes larger if we have an inaccurate primary pointing device */</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">pointer</span><span class="token punctuation">:</span> coarse<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token selector">input[type="checkbox"], input[type="radio"]</span> <span class="token punctuation">{</span>
<span class="token property">min-width</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
<span class="token property">min-height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>But wait. While this is great and all, Patrick H. Lauke offers a word of caution about this interaction media query and <a href="https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/">it’s potential for making incorrect assumptions</a>.</p>
<h4 id="consider-that-different-platforms-have-different-requirements" tabindex="-1">Consider that different platforms have different requirements</h4>
<p>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 <a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">WCAG 2.5.5 explainer</a>.</p>
<p>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.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1627666743/images/apple1.webp" alt="Side by side iPhones showing target size dimensions on two different devices." /></p>
<figcaption>“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/))</figcaption>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1627666769/images/android1.webp" alt="Material Design target sizes." /></p>
<figcaption>“Consider making pointer targets at least 44 x 44 dp.”
(Material Design, [“Accessibility”](https://www.material.io/design/usability/accessibility.html#layout-and-typography))</figcaption>
<h4 id="consider-the-%E2%80%9Ctappable-area%E2%80%9D-of-a-target" tabindex="-1">Consider the “tappable area” of a target</h4>
<p>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, <a href="https://www.material.io/design/usability/accessibility.html#layout-and-typography">as it’s documented</a> in Material Design:</p>
<blockquote>
<p>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.</p>
</blockquote>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYZWzZm" data-user="css-tricks" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/team/css-tricks/pen/zYZWzZm">
</a> by CSS-Tricks (<a href="https://codepen.io/team/css-tricks">@css-tricks</a>)
on <a href="https://codepen.io/">CodePen</a>.</span>
</p>
<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h4 id="consider-responsive-layout-behavior" tabindex="-1">Consider responsive layout behavior</h4>
<p>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.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1627859821/images/target-size-button-inline.webp" alt="Two mobile devices showing inline button styles and their repective target areas." /></p>
<p>Speaking of inline, there’s a particular piece of the WCAG’s exception for inline targets that’s worth highlighting:</p>
<blockquote>
<p><em>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)</em></p>
</blockquote>
<p>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.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1627860493/images/target-size-inline-links.webp" alt="A mobile device showing inline links and their target sizes" /></p>
<figcaption>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.</figcaption>
<h4 id="consider-the-target%E2%80%99s-relationship-to-its-surroundings" tabindex="-1">Consider the target’s relationship to its surroundings</h4>
<p>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.</p>
<p>Let’s take the example that the WCAG explainer provides, again, in it’s description of inline target exceptions:</p>
<blockquote>
<p>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.</p>
</blockquote>
<p>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.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1627860568/images/target-size-relation.webp" alt="Target size relation between two mobile devices one showing buttons and theother showing links in an article for each respectively." /></p>
<figcaption>If the target is its own block of text (left), then it needs to adhere to the WCAG criterion. Otherwise, it is exempt (right).</figcaption>
<p>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:</p>
<blockquote>
<p>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.</p>
</blockquote>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="rNydzOE" data-user="css-tricks" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/team/css-tricks/pen/rNydzOE">
WCAG 2.5.5: Icons at the end of a sentence are exempt</a> by CSS-Tricks (<a href="https://codepen.io/team/css-tricks">@css-tricks</a>)
on <a href="https://codepen.io/">CodePen</a>.</span>
</p>
<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p>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.</p>
<h4 id="consider-whether-the-target-is-styled-by-the-user-agent" tabindex="-1">Consider whether the target is styled by the User Agent</h4>
<p>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.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1627861573/images/form-input-submit.webp" alt="A submit button." /></p>
<figcaption>You’re fine just as you are, little button.</figcaption>
<p>So, yeah, if you’re rockin’ a default <code><button></code> 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.</p>
<h4 id="consider-if-there-are-other-ways-to-activate-the-functionality" tabindex="-1">Consider if there are other ways to activate the functionality</h4>
<p>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.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1627861624/images/toc.webp" alt="A table of contents." /></p>
<figcaption>Should these be at least 44×44 pixels?</figcaption>
<p>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.</p>
<p>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.</p>
<h3 id="wrapping-up" tabindex="-1">Wrapping up</h3>
<p>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.</p>
<p>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.</p>
<p>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!</p>
<p>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.</p>
<p>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.</p>
<h3 id="edit%3A-30-july%2C-2021" tabindex="-1">EDIT: 30 July, 2021</h3>
<p>Adrian Roselli added:</p>
<blockquote>
<p>There is a <a href="https://codepen.io/aardrian/pen/eYZWNyv">bookmarklet to test 2.5.5</a> that Jared Smith made last year and which I modified to allow you to dismiss on Esc.<br />
There is plenty of evidence beyond Apple and Material Design (the latter being easy to dismiss for usability failures). <a href="https://www.nngroup.com/articles/touch-target-size/">Nielsen Norman Group writes about</a> a 1cm × 1cm (0.4in × 0.4in) tap area, <a href="https://www.bbc.co.uk/gel/guidelines/how-to-design-for-touch">BBC GEL recommends</a> 7mm, <a href="https://docs.microsoft.com/en-us/windows/uwp/design/input/guidelines-for-targeting#target-size">Microsoft’s Fluent recommends</a> 40 × 40 effective pixels.<br />
Hopefully the coming <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">2.5.8 Target Size (Minimum) SC</a> at Level AA will cover the gap that 2.5.5 at Level AAA left.</p>
</blockquote>
<p>Patrick H. Lauke added:</p>
<blockquote>
<p>If you must use a <code>pointer</code> query, strongly suggest using <code>any-pointer:coarse</code> to detect the presence of <em>any</em> coarse (generally, touch) pointer input (not just going by whatever the UA believes to be the primary).</p>
</blockquote>
Making A Strong Case For Accessibility2021-07-30T00:00:00Zhttps://toddl.dev/posts/making-a-strong-case-for-accessibility/<p>(Originally posted on <a href="https://www.smashingmagazine.com/2021/07/strong-case-for-accessibility/">Smashing Magazine</a> on 9 July, 2021)</p>
<p><em>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.</em></p>
<p>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.</p>
<p>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.</p>
<p>These are just a couple of <strong>examples of what disabled users face daily</strong> 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.</p>
<p>If you have ever read the <a href="https://webaim.org/projects/million/">WebAIM Million</a> 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.</p>
<p>Inclusive design is a way of <strong>creating digital products that are accessible to a wide range of people</strong> regardless of who they are, disabled or not, where they are, and encapsulates a diverse spectrum of people. <a href="https://shop.bsigroup.com/upload/Download/30317424.pdf">The British Standards Institution (2005) defines inclusive design as</a>(PDF):</p>
<blockquote>
<p>“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.”</p>
</blockquote>
<p>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.</p>
<h3 id="examples-of-practical-digital-accessibility" tabindex="-1">Examples Of Practical Digital Accessibility</h3>
<ol>
<li>
<p>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 <a href="https://shop.bsigroup.com/upload/Download/30317424.pdf">WCAG standards</a>.</p>
</li>
<li>
<p>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 <a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html">4.5 to 1 ratio guideline</a> that you can read about in <a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">(Success Criterion 1.4.3: Contrast (Minimum))</a>, then it would meet the standard and be accessible to more people. <img src="https://res.cloudinary.com/colabottles/image/upload/v1627868024/images/font-contrasts.webp" alt="Different font colors and their respective WCAG color contrast ratios for text on a light blue background for a use case." /></p>
</li>
<li>
<p>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 <a href="https://youtu.be/FvpUNiB-2T0">can be seen in this video</a> and in <a href="https://youtu.be/7RHG_XiQ0ck">this short video about voice recognition</a>.</p>
</li>
<li>
<p>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.</p>
</li>
<li>
<p>Using alternative text to describe the information in a picture for Blind users. <a href="https://www.smashingmagazine.com/2021/06/img-alt-attribute-alternate-description-decorative/">Images that do not have alternative text that describes to screen reader users what the picture conveys</a> are a barrier to blind people. e.g. <code><img src=“” alt=“This is my favorite kind of animal, a Maine Coon cat.”></code></p>
</li>
<li>
<p>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.</p>
</li>
<li>
<p>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.</p>
</li>
<li>
<p>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.</p>
</li>
</ol>
<p>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.</p>
<h3 id="actionable-steps-to-get-buy-in" tabindex="-1">Actionable Steps To Get Buy-In</h3>
<p>Two of the most widely used reasons I hear as to why people or companies aren’t practicing accessibility are:</p>
<blockquote>
<p>“The client has no budget for it.”<br />
“My manager said we’ll get to it after launch.”</p>
</blockquote>
<h3 id="buy-in-and-support-from-executives%2Fstakeholders" tabindex="-1">Buy-In And Support From Executives/Stakeholders</h3>
<p>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.</p>
<p>When the ethical approach doesn’t work, the approach I will take is the financial approach:</p>
<blockquote>
<p>“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.”</p>
</blockquote>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>Demonstrations of <strong>live testing with disabled users</strong> 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.</p>
<p>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.</p>
<p>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.</p>
<h3 id="have-a-team-or-individual-who-is-your-accessibility-advocate(s)" tabindex="-1">Have A Team Or Individual Who Is Your Accessibility Advocate(s)</h3>
<p>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.</p>
<p>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.</p>
<h3 id="assess-the-product-and-proficiency-within-the-company" tabindex="-1">Assess the Product and Proficiency Within the Company</h3>
<p>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?</p>
<p>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?</p>
<p>Maintaining a <strong>written record of all accessibility training done</strong> 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 <a href="https://webaim.org/services/training/">WebAIM</a>, <a href="https://www.adaanniversary.org/training">the ADA</a>, or <a href="https://knowbility.org/services/training">Knowbility</a> has to offer.</p>
<h3 id="establish-guidelines-for-the-company" tabindex="-1">Establish Guidelines For The Company</h3>
<p>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. <strong>Design systems</strong> should be used not only to ensure branding and consistency, but accessibility, inclusivity, and understanding of code better.</p>
<p><a href="https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/">Accessible components</a> 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.</p>
<p><strong>Documenting guidelines</strong> 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.</p>
<h3 id="getting-fellow-colleagues-to-buy-in" tabindex="-1">Getting Fellow Colleagues To Buy-In</h3>
<p>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 <strong>YOU</strong> to be their voice.</p>
<p>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.</p>
<p>Getting a team onboard because training brings the team together and people <strong>know the importance of accessibility</strong>, and they want to produce a quality product that people can use regardless of disability.</p>
<p>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.</p>
<h3 id="sharing-the-importance-of-the-rules" tabindex="-1">Sharing The Importance Of The Rules</h3>
<p>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.</p>
<p>Whether it is the <a href="https://www.dol.gov/general/topic/disability/ada">ADA (American Disabilities Act)</a> or <a href="https://section508.gov/">Section 508 (Government compliance)</a> in the U.S., the <a href="https://laws-lois.justice.gc.ca/eng/acts/A-0.6/page-1.html">ACT (Accessible Canada Act)</a> in Canada, or <a href="https://www.etsi.org/deliver/etsi_EN/301500_301599/301549/02.01.02_60/en_301549v020102p.pdf">EN 301 549</a>(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.</p>
<h3 id="pick-examples-from-the-outside-world-as-use-cases" tabindex="-1">Pick Examples From The Outside World As Use Cases</h3>
<p>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.</p>
<p>From there, you could get a source outside the organization that specializes in accessibility testing with disabled users, such as <a href="https://www.applause.com/">Applause</a>, for instance. The organization and people within may turn around and embrace accessibility at the company and in the workflow.</p>
<h3 id="hire-disabled-people" tabindex="-1">Hire Disabled People</h3>
<p>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.</p>
<p>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.</p>
<h3 id="best-practices-for-maintaining-accessibility" tabindex="-1">Best Practices For Maintaining Accessibility</h3>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>Performing <strong>screen reader analysis</strong> before every release to ensure that users of screen readers and other assistive technologies can use the website or mobile app.</p>
<p>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?</p>
<blockquote>
<p>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.</p>
</blockquote>
<h3 id="summary" tabindex="-1">Summary</h3>
<p>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.</p>
<p>Accessibility and accessible sites and apps make the web better, they make everyone feel included no matter what situation or disability. <strong>Inclusion and accessibility remove barriers</strong> 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.</p>
<p>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.</p>
ConnectTech 20212021-11-14T00:00:00Zhttps://toddl.dev/posts/connecttech-2021/<h2 id="connect.tech" tabindex="-1">Connect.Tech</h2>
<p>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.</p>
<p>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'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.</p>
<p>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't want to do another virtual event again, following some people I know that don't want to do another virtual event either.</p>
<p>Not because of the event, but because of the fatigue.</p>
<p>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.</p>
<p>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.</p>
<p>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 "hallway track", where I think I get the most out of a conference, chatting with folks in the hallway and where the conference really takes place.</p>
<p>Then I got asked if I wanted to speak. Now I am at an in-person event, and I had <strong>never</strong> done an in-person talk before. I said, "Yes." with no hesitation though. Whether it was spontaneous or not, I had gone all-in. Now I had to do the talk.</p>
<p>I decided to do the talk on my Smashing Magazine article, <a href="https://www.smashingmagazine.com/2021/07/strong-case-for-accessibility/">"Making A Strong Case For Accessibility"</a> 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.</p>
<p>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.</p>
<p>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.</p>
<p>I highly recommend going to Conenct.Tech, it is a great event, and I look forward to attending in 2022.</p>
Give Us Some Space!2022-03-25T00:00:00Zhttps://toddl.dev/posts/give-us-some-space/<h2 id="there's-a-better-way" tabindex="-1">There's A Better Way</h2>
<p>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.</p>
<p>To be there in the audience and hopefully be a show of strength and a cheering section. Because there is nothing I'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!</p>
<p>But most of the time, it isn't that easy or it just does not happen. There's a better way to do this organizers!</p>
<h2 id="a-better-way-to-do-what%3F!" tabindex="-1">A Better Way To Do What?!</h2>
<p>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!</p>
<p>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't in a food coma. Or a very hard-hitting talk that you can schedule last. What about a keynote?!</p>
<h2 id="stop-saying-you-have-a-diverse-range-of-topics" tabindex="-1">Stop Saying You Have A Diverse Range Of Topics</h2>
<p>If you're going to pass up accessibility talks, and other talks that you turn down because it "might not fit in" or "it doesn't match what the conference is about". 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.</p>
<h2 id="some-suggestions" tabindex="-1">Some Suggestions</h2>
<ol>
<li>Space out the accessibility talks in your multi-track event. Please don't stack us against each other. We want to educate as much of the masses as possible.</li>
<li>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.</li>
<li>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!</li>
<li>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!).</li>
</ol>
<h2 id="summary" tabindex="-1">Summary</h2>
<p>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.</p>
<p>Let us be spaced out so everyone that is interested can enjoy <strong>all</strong> of the accessibility talks, or all the talks that you stack on each other. Also, if you could, let'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'm willing to take the hit for those groups of people.</p>
It Has Been A Minute2022-10-07T00:00:00Zhttps://toddl.dev/posts/it-has-been-a-minute/<h3 id="it-has-been-a-hot-minute" tabindex="-1">It Has Been A Hot Minute</h3>
<p>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.</p>
<p>I'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.</p>
<p>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, "why not?!" I cna do it, I have been doing it to some extent. I just haven'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.</p>
<p>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.</p>
<p>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.</p>
<p>Until next time, that is all.</p>
Conferences and Alcohol2022-10-19T00:00:00Zhttps://toddl.dev/posts/conferences-and-alcohol/<h3 id="hello%2C-i'm-todd" tabindex="-1">Hello, I'm Todd</h3>
<p>and I am a recovering alcoholic.</p>
<p>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?</p>
<p>I'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'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.</p>
<p>By "lately" 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 "evil" (again, some may protest that).</p>
<p>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.</p>
<p>It's a lonely place when you go off to a dinner by yourself while everyone is at an after party. I don't mind, but it does affect me. I don't want to push my agenda (sobriety) on anyone. Religion does that, and I'm not a religious man. I don't ask conferences to make it a booze-free event. I don't wish to dictate that to any one or event. That's not my place. I have the choice to leave.</p>
<h3 id="what-is-this-all-about" tabindex="-1">What is this all about</h3>
<p>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.</p>
<p>I want a bottled water, but I don't have a ticket. The bartender says I need a ticket. For a water. That's not inclusive or accessible. I'm not asking for a free water, I'll gladly pay you for it and tip you a couple bucks. But if I need a ticket for a water, that's pretty lousy in the rules department.</p>
<h3 id="i-really-want-to-speak-at-your-event" tabindex="-1">I really want to speak at your event</h3>
<p>I do my accessibility talks and plan to keep doing more, but I want to do events I normally wouldn'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't get to mingle and chat with my peers, I don't get to enjoy a night out and have fun with said people.</p>
<blockquote>
<p>"Well, you could always go somewhere else or go back to your room."</p>
</blockquote>
<p>Why?</p>
<p>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'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.</p>
<p>I think I met one or two folks that are in the same boat as me and are recovering alcoholics. It'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's the easy part.</p>
<p>The hardest part is though, the wanting to be heard and to fit in and feel valued. I want to feel like I'm wanted at an event and that not everyone drinks until they'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).</p>
<p>Conference organizers. Please… just remember not everyone drinks. Please provide an inclusive and accessible alternative at your conferences to have alcohol-free events.</p>
<p>To those of you who have joined me at booze-free lunches and dinners and shown your support, thank you. I <em>really</em> am grateful for you.</p>
<p>To you, reader. Thanks for reading.</p>
Bias and Overlooking People2022-11-03T00:00:00Zhttps://toddl.dev/posts/bias-and-overlooking-people/<h2 id="a-lot-of-thinking-was-done-today" tabindex="-1">A Lot of Thinking Was Done Today</h2>
<p>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.</p>
<p>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.</p>
<p>The people that aren'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?</p>
<h2 id="why-do-we-insist-on-staying-the-course%3F" tabindex="-1">Why Do We Insist On Staying the Course?</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<h2 id="what-does-paper-have-to-do-with-it%3F" tabindex="-1">What Does Paper Have to Do with It?</h2>
<p>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.</p>
<h2 id="let's-change-the-course" tabindex="-1">Let's Change the Course</h2>
<p>It'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.</p>
An Open Challenge2022-11-10T00:00:00Zhttps://toddl.dev/posts/an-open-challenge/<h3 id="to-tech-event-organizers" tabindex="-1">To Tech Event Organizers</h3>
<p>I have an open challenge to you if your event(s) are very heavily focused on alcohol.</p>
<p>Leave it for after the day ends.</p>
<p>Why does there have to be an element of booze at your event? Why can't the event be alcohol-free for the day? Then after that, you can go get your drink on.</p>
<p>Why do events have to have an element of alcohol in them?</p>
<p>Booths with code and beer, bottles of booze, I just don't understand. I'm not saying you need to or have to abstain and getting up on a pulpit to preach a alcohol-free gospel.</p>
<h3 id="why%3F" tabindex="-1">Why?</h3>
<p>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?</p>
<p>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?</p>
<p>Do you have problems that <strong>YOU</strong> need alcohol becaue you are dependent on it? Look inward and ask yourselves are you partaking too much? Of course you'll say no, but if you're feeling like shit the day after or even days later or even a week later when you're not in the environment, you may want to talk to someone.</p>
<p>I want organizers to read this part <em>very</em> closely.</p>
<p>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's mental health, sobriety, physical health, or more? Is the party crowd and the drinking culture really worth it?</p>
<p>Will it take someone getting taken to a hospital or worse to get organizers to wake the fuck up? <strong>THINK</strong> about that. Has it happened? I don't know. i haven't heard of any such situation at an event, but it doesn't mean it <em>can't</em> happen. Because it can.</p>
<h3 id="sit-down-and-shut-up!" tabindex="-1">Sit Down and Shut Up!</h3>
<blockquote>
<p>Go have your foofy mocktail and shut up, Buzz Killington!</p>
</blockquote>
<p>Is that what you're thinking dear reader? Or maybe you're agreeing? If you're agreeing, what reasons do you have? Do you let organizers know?</p>
<p>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.</p>
<p>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't posess those tools and doesn't know what to do. Then what? They might feel excluded. They may feel uncomfortable. You may have lost someone who doesn't want to attend your event anymore.</p>
<h3 id="does-it-matter%3F" tabindex="-1">Does It Matter?</h3>
<p>Sure it does! Do you really want to make anyone that attends your event feel excluded or unwanted or uncomfortable? I don't think any organizaer does. Or at least most organizers.</p>
<p>The attendees make your event because without them, without ticket sales, you have nothing.</p>
<p>Sponsors drive the event. Attendees <strong>make</strong> the event. So why do you want to exclude a certain percentage of your attendee population? You don't.</p>
<p>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't have to, but we will.</p>
Modern Frontends2022-11-19T00:00:00Zhttps://toddl.dev/posts/modern-frontends/<h2 id="no-filter" tabindex="-1">No Filter</h2>
<p>That's gone out the window with the word that <a href="https://twitter.com/coderinheels">Gen Ashley</a> contacted a CEO to try and have someone in trouble for posting a blog post about their experience. The gloves are off.</p>
<h2 id="little-things" tabindex="-1">Little Things</h2>
<p>My photo of me eating a lobster roll hasn't bothered anyone from any conference. Until MFL. I was asked to provide a different one. Why? Wait, I won't "pile on".xx</p>
<p>"Can you handle your own room and travel?" Sure. I'm privileged I can do that. The room and travel fiasco is just that. A fiasco and downright greasy shit that the organizer pulled.</p>
<p>I too was DM'ed. Now in my haste to get off the bird app because the ne owner decided to let an old account back on, I did not get the screen shots of the DMs, <a href="https://www.cassie.codes/posts/modern-frontends/">but they are similar to Cassie Evans' DMs</a>.</p>
<p>"Don't pile on", "You're adding pressure", something something team member blah blah death in the family. Were there <em>any</em> team members?</p>
<h2 id="what-i-saw" tabindex="-1">What I Saw</h2>
<p>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've not seen before. Epic overkill.</p>
<p>Hype all the "big names" on social media. The new speakers, the people having not spoken long got shafted. We all know Kent C. Dodds was going to be there. We didn't need to see it a week straight (embellishment there but not far from the truth) on LinkedIn, Twitter, and elsewhere.</p>
<p>I see a woman politicking and schmoozing in the speaker lounge and not caring to her speakers needs, her attendees, or having <strong>ANY</strong> video equipment available for livestream or for recording like they promised. Lies on top of more lies.</p>
<p>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.</p>
<h2 id="more-lies-and-failures" tabindex="-1">More Lies and Failures</h2>
<p>This was not the venue.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1668912966/images/venue.webp" alt="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." /></p>
<p>This was not the truth.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1668913191/images/numbers.png" alt="A list of statistics to a conference that did not have the numbers they were indicating." /></p>
<p>There were less workshops, less speakers, no video or livestreaming, and there wasn't even 300 people there. This was oversold, overhyped, overdone, and underwhelming.</p>
<p>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.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1668913351/images/code_conduct.png" alt="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'll be wearing branded clothing or badges." /></p>
<p>I did not see branded clothing, badges for staff, or <strong>any</strong> staff. And <em>who</em> exaclty was I supposed to report anything to?!</p>
<h2 id="i-have-words" tabindex="-1">I Have Words</h2>
<p>You want to fund your extravagnt lifestyle, work for it. Don't skim off the top of the pot and take from attendees, speakers, and sponsors. You're nothing special and you'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.</p>
<p>You cheated people out of a great experience.</p>
<h2 id="my-talk" tabindex="-1">My Talk</h2>
<p>I had <strong>ZERO</strong> people at my talk at 17:30pm (5:30pm) <strong>ON A FRIDAY NIGHT!</strong> What kind of a screw-up do you have to be to schedule a talk on the last night of a conference and at <em>five thirty</em>?! A colossal one, that's what.</p>
<p>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't know. I am grateful to those who did attend.</p>
<p>I was not there for a week long holiday. I was there to give a talk.</p>
<p>Five talks at the end, no final keynote to bring the crowd back together before leaving and closing the conference. Nothing. What a fuck up of exceptional proportions.</p>
<h2 id="summary" tabindex="-1">Summary</h2>
<p>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't catch a promised livestream. I feel bad for sponsors that shelled out major dollars or pounds just to pay for Gen's next pair of designer boots and jacket. Maybe even a leopard print scarf.</p>
<p>I feel bad for speakers that didn't have the audiences they should have and were promised.</p>
<p>It was a cavalcade of <a href="https://hidde.blog/modern-frontends-live/">lies and deceit as explained by Hidde</a>, and just plain bitchy behavior. Bitchy that was <a href="https://dev.to/thisisjofrank/my-experience-of-modern-frontends-conference-1cgg">documented in Jo Franchetti's blog post</a>.</p>
<p>If you decide to try and contact my CEO, he is a bigger asshole than I am. That CEOs name is Todd Libby. Call me.</p>
<p>Get out of the racket of conning people and sponsors, Gen. The gig is up. The speaker community is on to you.</p>
<hr />
<p>If you have any experience you want to share, please reach out and let me know.</p>
<ul>
<li><a href="https://dev.to/thisisjofrank/my-experience-of-modern-frontends-conference-1cgg">Jo's Blog</a></li>
<li><a href="https://www.cassie.codes/posts/modern-frontends/">Cassie's Blog</a></li>
<li><a href="https://hidde.blog/modern-frontends-live/">Hidde's Blog</a></li>
<li><a href="https://mhartington.io/post/modern-frontends-live/">Mike's Blog</a></li>
<li><a href="https://jdhillen.com/blog/my-experience-at-modern-frontends-live">JD's Blog</a></li>
<li><a href="https://dev.to/niamhmccoo/my-experience-at-modern-frontends-live-1lcn">Niamh's Blog</a></li>
<li><a href="https://kentcdodds.com/blog/my-modern-frontends-live-experience">Kent's Blog</a></li>
<li><a href="https://twitter.com/pattyneta/status/1595495394557022208">Patty's Tweet Thread</a></li>
<li><a href="https://dylanbeattie.net/2022/11/22/modern-frontends-2022.html">Dylan's Blog</a></li>
<li><a href="https://christopherallanperry.github.io/blog/2022/11/20/modern_frontends-an_attendees_perspective.html">Chris's Blog</a></li>
<li><a href="https://nielsleenheer.com/articles/2022/red-flag-speakers-having-to-cover-their-own-travel/">Niels's Blog</a></li>
<li><a href="https://youtu.be/CHJrO8TvNjI">James's Video</a></li>
</ul>
Two Weeks2022-11-22T00:00:00Zhttps://toddl.dev/posts/two-weeks/<h2 id="firstly" tabindex="-1">Firstly</h2>
<p>With all the criticism out and people voicing their experiences with <a href="https://toddl.dev/posts/modern-frontends.md">last week's fiasco in London</a> it is time for me to pivot and write about the many positive experiences that occurred over the last two weeks.</p>
<h2 id="atlanta-%26-connect.tech" tabindex="-1">Atlanta & Connect.tech</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>Giveaways after the final keynote and just plain fucking fun. I can't say enough about Pratik and Vincent. They work hard, they know how to run an event.</p>
<p>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 '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.</p>
<p>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'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.</p>
<p>I cannot express how much that means to me. When I'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. <strong>That</strong> means the world to me. These people I'd jump in front of a moving bus for.</p>
<p>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.</p>
<hr />
<h2 id="london" tabindex="-1">London</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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).</p>
<p>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.</p>
<p>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't get to meet up with others, but some day there will be another visit.</p>
<h2 id="more-fun" tabindex="-1">More Fun</h2>
<p>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.</p>
<p>I never before in my life since I was in my twenties, had never had that feeling of friendship and family. It's been a long time, it's still a little new to me, but these folks are special people, good people. I think DeMars is the one I've known the longest and that is around 2019. Damn... someone is cutting up onions in this motherfucker.</p>
<p>Again, I meet up with new people at the speaker dinner and in the speaker lounge during the event. Scott, Daniel, Mark "The Mayor", Hidde, Liran, and a score of others. New friends are always welcome to the people I call "the speaker family". That family is on display as we form in solidarity after the event and we had to voice our opinions.</p>
<h2 id="clutch" tabindex="-1">Clutch</h2>
<p>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'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't played at a venue that is very accessible.</p>
<h2 id="london-proper" tabindex="-1">London Proper</h2>
<p>After walking around the city, after going by places I haven'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'll know that I had to soak it all in with pictures and memories.</p>
<p>It was a lot of cognitive overload, but getting back to the hotel to process allowed me to handle it all.</p>
<p>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't know when I'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.</p>
<h2 id="wrapping-it-up" tabindex="-1">Wrapping It Up</h2>
<p>I'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.</p>
<p>We were there with our friends, our speaker family, our new friends. That'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.</p>
<p>The people I met that I am connected with, if you are reading this and we didn'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.</p>
<p>I hope you got some positive out of this post, our meeting if we met up, and hope you'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's start a chain of positive blog posts!</p>
<p>Thanks for reading.</p>
Writing and Feelings2022-11-23T00:00:00Zhttps://toddl.dev/posts/writing-and-feelings/<h2 id="a-little-backstory" tabindex="-1">A Little Backstory</h2>
<p>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, "be tough" or "toughen up". You learn to be real good at stuffing any feelings deep down in you.</p>
<p>Sobriety has taught me that I will feel feelings. That said, my recovery is a whole different ballgame than others. I <em>want</em> to feel things so that I don't have those feelings surprise me all of a sudden and I <em>have</em> to feel those feelings in order to comprehend what they are when they arise.</p>
<p>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't like me. Well, it doesn't matter what people think of me, it's none of my business.</p>
<h2 id="why-am-i-writing-this%3F" tabindex="-1">Why Am I Writing This?</h2>
<p>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't know me, they can get to know me. Anyone that doesn't care for me, I know I'm not everyone's cup of tea because I "curse".</p>
<p>"Cursing" 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's just words, and just because you're offended doesn't mean you're right.</p>
<p>So I am writing this for me. First and foremost. For my friends, secondly. For others, should they choose to read. It's my version of therapy. The need to feel as I write and feel <strong>everything</strong>.</p>
<h2 id="why-so-mad%3F" tabindex="-1">Why So Mad?</h2>
<p>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. <strong>That</strong>, was anger. That was furious, mad, rage.</p>
<p>When someone blatantly slaps an entire communityt of people in the face, they deserve not only to feel the brunt of people's feelings, but deserve to get dragged to the ends of the Earth.</p>
<h2 id="theraputic-feeling" tabindex="-1">Theraputic Feeling</h2>
<p>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's discuss that.</p>
<p>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 "taking it too far". 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 "speaker family", I'll take a bullet for them all.</p>
<p>So I'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 ("soiree of shame" 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's why.</p>
<h2 id="lose-it-all%3F-you're-going-to-get-me%3F" tabindex="-1">Lose It All? You're Going To Get Me?</h2>
<p>I have had <em>nothing</em> a lot during my life. I have been at the very bottom. I've been at the lowest of lows. Without getting too personal here, let'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.</p>
<p>I'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.</p>
<p>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.</p>
<h2 id="i-can-feel-it" tabindex="-1">I Can Feel It</h2>
<p>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.</p>
<p>So I may be the asshole. I may be the dickhead and not someone's cup of tea.</p>
<p>Not everyone likes tea. Not everyone likes me. I'm okay with that now. I'm no longer a people pleaser.</p>
<p>Just remember though, you make your bed and you lie in it. If I have an issue, I'll rip it hard and lay right into you, no minced words. I don't write things to explain myself to others. I don't owe anyone an explanation unless I <strong>really</strong> fuck up.</p>
<p>When I do, I'll make that apology and I won't explain. I'll own up to it. Something a conference organizer seems devoid of doing because it is the right thing to do. With me, it's too late at this point. That ship has sailed.</p>
<p>Again however...</p>
<p>Not everyone likes tea.</p>
Ionic and Vue, Part One2022-12-01T00:00:00Zhttps://toddl.dev/posts/ionic-and-vue-part-one/<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1670038063/images/vue-ionic-logos.png" alt="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." /></p>
<h2 id="well%2C-here-i-go!" tabindex="-1">Well, Here I Go!</h2>
<p>I've been looking to start coding again after doing accessibility auditing for two solid years and also have had an idea that'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).</p>
<p>I like the <a href="https://vuejs.org/">Vue framework</a>, I liked how it was accessible. Still do even though in <a href="https://webaim.org/projects/million/#frameworks">the last WebAIM Million Report</a>, 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.</p>
<p>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.</p>
<p>That's not why I'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.</p>
<p>So Vue it is. I also just like the feeling I get when writing it. If you're a developer, and you prefer a certain language or framework and you just feel comfortable in that language or framework, then you'll understand what I mean.</p>
<p>Sure there is Flutter or React Native, but I just had a good feeling about using Vue and Ionic.</p>
<h2 id="a-mobile-ui-toolkit" tabindex="-1">A Mobile UI Toolkit</h2>
<p>I don'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. <a href="https://ionicframework.com/">That's when I found Ionic</a>.</p>
<p>It works with Angular, React, Vue. It is cross-platform. Performant and interoperable. I also like the attention to accessibility. I don't know if anyone has touched upon the accessibility of the framework, but I like what I have read, heard, <a href="https://youtu.be/p3AN3igqiRc?t=72">and seen</a>. Though the video does reference Web Standards, so that is a giant plus as far as I am concerned.</p>
<p>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 <code>.html</code> file with no build process. I kind of like that.</p>
<p>So I'm going to go over my experience with the Ionic framework.</p>
<h2 id="installation" tabindex="-1">Installation</h2>
<p>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:</p>
<pre class="language-js"><code class="language-js">npm install <span class="token operator">-</span>g @ionic<span class="token operator">/</span>cli</code></pre>
<p>I made a pre-made template to start. Just to get the feel of doing a quickstart of sorts by running:</p>
<pre class="language-js"><code class="language-js">ionic start</code></pre>
<p>or I could have typed in:</p>
<pre class="language-js"><code class="language-js">ionic start lobstah<span class="token operator">-</span>roll tabs</code></pre>
<p>I'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 <a href="https://capacitorjs.com/docs/v2/">Capacitor</a>.</p>
<p>It then runs and does its thing, then I get a list of next steps to follow:</p>
<pre class="language-js"><code class="language-js"><span class="token operator">-</span> Go to your <span class="token keyword">new</span> <span class="token class-name">project</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">cd ./test-ionic</span><span class="token template-punctuation string">`</span></span>
<span class="token operator">-</span> Run <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">ionic serve</span><span class="token template-punctuation string">`</span></span> within the app directory to see your app <span class="token keyword">in</span> the browser
<span class="token operator">-</span> Run <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">ionic capacitor add</span><span class="token template-punctuation string">`</span></span> to add a native iOS or Android project using Capacitor
<span class="token operator">-</span> Generate your app icon and splash screens using <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">cordova-res --skip-config --copy</span><span class="token template-punctuation string">`</span></span>
<span class="token operator">-</span> Explore the Ionic docs <span class="token keyword">for</span> components<span class="token punctuation">,</span> tutorials<span class="token punctuation">,</span> and more<span class="token operator">:</span> https<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>ion<span class="token punctuation">.</span>link<span class="token operator">/</span>docs
<span class="token operator">-</span> Building an enterprise app<span class="token operator">?</span> Ionic has Enterprise Support and Features<span class="token operator">:</span> https<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>ion<span class="token punctuation">.</span>link<span class="token operator">/</span>enterprise<span class="token operator">-</span>edition</code></pre>
<p>I followed the steps and I was good to go.</p>
<p><a href="https://toddl.dev/posts/ionic-and-vue-part-two.md">Part two of the series is here if you want to read on</a></p>
<h2 id="next-steps" tabindex="-1">Next Steps</h2>
<p>It'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'm doing it. So if you want to leave a comment, <a href="https://toddl.dev/contact/">go to the contact page</a> and contact me there! And if you don't have anything nice to say, then just find somewhere else to go and complain. Like <a href="https://youtube.com/">YouTube</a>.</p>
The Writings of a Privileged Mediocre White Man2022-12-02T00:00:00Zhttps://toddl.dev/posts/the-writings-of-a-privileged-mediocre-white-man/<h2 id="my-position-in-tech" tabindex="-1">My Position in Tech</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>So let's break this down.</p>
<h2 id="the-wrongdoings-of-a-shady-enterprise" tabindex="-1">The Wrongdoings of a Shady Enterprise</h2>
<p>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.</p>
<p>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 <em>and was</em> well-qualified for. This is my privilege because I have a platform and I do have an audience.</p>
<p>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's not how I roll. No apologies there.</p>
<p>I was fired up and you can bet the farm that I won'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 <strong>NOT</strong> 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.</p>
<p>My privilege needs to be acknowledged by me and that'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's your decision, your loss, and your mistake.</p>
<p>Not only that, but spending the money out of pocket that I did? And hearing about what other people spent and was <em>not</em> 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 <strong>the speaker lounge</strong>? You bet I was incensed.</p>
<h2 id="partner-companies-or-entities" tabindex="-1">Partner Companies or Entities</h2>
<p>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 <em>judgment</em> 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's <em>judgment</em>.</p>
<p>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'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 "yes man".</p>
<p>What you find in the Web and tech landscape are a far-reaching field of "yes men". I'm not one of those people.</p>
<h2 id="why-the-blog-post%3F" tabindex="-1">Why the Blog Post?</h2>
<p>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 <strong>lot</strong> of companies do this. I may have been passed over a thousand times because I let thought flow to blog post. That's a form of censorship. You don'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 <em>absolutely nothing</em> to do with anything remotely related to any company involved.</p>
<blockquote>
<p>"Well, we don't want to have to explain…"</p>
</blockquote>
<p>You don'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!</p>
<p>Now if I rambled on about Company A's partner Company Z, and their product because I thought it was lousy and <em>that</em> affected Company A's standing with Company Z, you bet your bottom dollar I'd understand totally!</p>
<p>If I did have a problem with Company Z's overlay for instance that Company A was using, I'd go straight to the decision-makers and let them know my displeasure, for instance. See? <strong>Judgment</strong>!</p>
<p>I'd also rather have a person that tells me what they think about something rather than a group full of "yes men".</p>
<p>The point I am trying to make is this:</p>
<p>When I see a wrongdoing, I'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 <em>real fast</em>. That'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'm winning.</p>
<p>Overlooking me because of a blog post that came to the defense of those harmed and to point out a problematic organizer? That'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.</p>
<p>and with that… I have moved onward and upward.</p>
Snake Oil and Smoke Screens2022-12-23T00:00:00Zhttps://toddl.dev/posts/snake-oil-and-smoke-screens/<h2 id="where-it-began" tabindex="-1">Where It Began</h2>
<p>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.</p>
<p>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'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.</p>
<p>DiMillo's Restaurant has been a mainstay in Portland for 57 years, it is now a "floating" 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.</p>
<h2 id="what-the-f%40%24k%3F!" tabindex="-1">What The F@$k?!</h2>
<p>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.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1671844426/images/a11y_logo.png" alt="The universal access icon for accessibility" /></p>
<p>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't know.</p>
<p>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.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1671842087/images/dimillos_home.png" alt="The universal access icon for accessibility" /></p>
<p>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.</p>
<p>You can go to a number of sites like <a href="https://www.myridgegateapartments.com/accessibility">this one and read the accessibility statement</a> and it will be the same as <a href="https://www.s29apartments.com/accessibility">the one that you found before that</a>. Some use (or have used) an overlay. <a href="https://northeastwhitewater.com/accessibility-disclaimer/">Or this statement</a> and then <a href="https://www.downtownwestbrook.com/accessibility-disclaimer/">go to this site and see this statement</a></p>
<h2 id="who-is-doing-this%3F" tabindex="-1">Who Is Doing This?</h2>
<p>Well... in the case of what I stumbled upon that I am writing about, it is the <a href="https://www.websiteportland.com/">Portland Website Company</a>. A marketing firm, naturally. What really gets under my skin about these firm that tout an accessible website are:</p>
<ol>
<li>Their own site is not accessible.</li>
<li>They shy away from taking any responsibility of the accessibility of a web site they build.</li>
<li>They refer to the <a href="http://ada.gov/">ADA.gov</a> accessible when the ADA does not cover websites! The ADA does not explicitly address online compliance!</li>
<li>They "strive" for Section 508 standards but I don't see a federal government site or entity in their portfolio that would be covered by Section 508 at all.</li>
<li>Nothing changes as far as accessiblity goes on their website when turning the overlay on and off.</li>
</ol>
<p>Pure bull. That's what overlays are and that's what marketing firms are that hawk them. A straight up fallacy saying a site is made more accessible.</p>
<p>This leads me to a number of observations.</p>
<h2 id="what-is-lacking%3F" tabindex="-1">What Is Lacking?</h2>
<ol>
<li>Morals</li>
<li>Knowledge and Educated Information</li>
<li>An Accessibility Specialist and or Accessibility team.</li>
<li>Inclusion</li>
<li>Knowledge</li>
</ol>
<p>There is no way, with anyone that is in tech or especially web, that you'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.</p>
<h2 id="summary" tabindex="-1">Summary</h2>
<p>Like <a href="https://karlgroves.com/">Karl</a> said:</p>
<blockquote>
<p>Overlays are here to stay. So are “male enhancement pills”.</p>
</blockquote>
<p>They pop up like bad acne, cold sores, and groundhogs every February 2nd.</p>
<p>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 <a href="https://www.websiteportland.com/accessibility-disclaimer/">the one on the Portland Website Company website</a>.</p>
<p>When your website accessibility disclaimer includes the fact <strong>YOU</strong> are not responsible for the accessibility of a website <strong>YOU</strong> build, <strong>YOU</strong> 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.</p>
<p>The accessibility community is sick of it. We'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.</p>
<p>When you run from the responsibility, you're the problem along with the overlays you peddle that are the bigger problem.</p>
An Event Apart2022-12-27T00:00:00Zhttps://toddl.dev/posts/an-event-apart/<h2 id="shocked" tabindex="-1">Shocked</h2>
<p>The words fail me. <a href="https://www.aneventapart.com/">An Event Apart is no more</a>. I've taken a couple days to process this. It comes as a bit of a surprise to me.</p>
<p>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.</p>
<h2 id="pandemic-times" tabindex="-1">Pandemic Times</h2>
<p>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'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.</p>
<p>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.</p>
<p>To <a href="https://zeldman.com/">Jeffrey</a> and <a href="https://meyerweb.com/">Eric</a>.</p>
<p>Thank you.</p>
<p>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.</p>
<p>Thank you Team AEA. I'll miss you all.</p>
Goodbye 20222022-12-28T00:00:00Zhttps://toddl.dev/posts/goodbye-2022/<h2 id="hey-2022" tabindex="-1">Hey 2022</h2>
<p>It wasn't fun. The pandemic is still here, it is gearing up to be worse, and still I got through you.</p>
<h2 id="lowlights" tabindex="-1">Lowlights</h2>
<ol>
<li>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.</li>
<li>I went to a fiasco in London that <em>almost</em> resulted in me talking to a room full of no one but myself.</li>
<li>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.</li>
<li>The pandemic still is a thing. I know a lot of people that got sick, know people who passed away.</li>
</ol>
<h2 id="highlights" tabindex="-1">Highlights</h2>
<ol>
<li>I spoke at eight conferences (it felt like more), attended Smashing Conference in San Francisco and some virtuals.</li>
<li>I did not get COVID again.</li>
<li>I met a ton of great people at conferences. Too many to mention but they know who they are.</li>
<li>I went to London for the first time in over thirty years.</li>
<li>I bought a house</li>
<li>We got a cat.</li>
<li>I spent another year sober.</li>
<li>I had an amazing support system when I'm on the road that I am grateful to have.</li>
<li>I will continue to wear a mask not only to prevent me from getting sick, but to ensure I don't get anyone sick if I happen to be sick.</li>
<li>I got a great co-host for the podcast.</li>
<li>I ended season two of the podcast and we're heading into season three.</li>
<li>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.</li>
</ol>
<h2 id="looking-ahead" tabindex="-1">Looking Ahead</h2>
<p>I don't like to look too far ahead but the one thing I do look forward to is this:</p>
<p>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.</p>
<p>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're doing isn't working, that maybe we need to change drastically before there is no Earth left.</p>
<p>See you in 2023.</p>
Enough with "Dark Patterns" Already!2023-01-01T00:00:00Zhttps://toddl.dev/posts/enough-with-dark-patterns-already/<h2 id="this-isn't-going-to-go-over-well" tabindex="-1">This Isn't Going To Go Over Well</h2>
<p>and I couldn'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't directly affect you doesn't mean it doesn't affect someone else. That goes for anything in this world.</p>
<h2 id="your-naming-conventions-are-suspect" tabindex="-1">Your Naming Conventions Are Suspect</h2>
<blockquote>
<p>"The colors black and white have long carried opposite connotations. Black has connoted evil and disgrace, while white has connoted decency and purity."<br />
Longshore, D. (1979). Color Connotations and Racial Attitudes. Journal of Black Studies, 10(2), 183–197. <a href="http://www.jstor.org/stable/2784327">http://www.jstor.org/stable/2784327</a> *</p>
</blockquote>
<p>The history of the term "dark patterns" as far as I can tell goes back to 2010 when Harry Brignull, a UX designer set up <a href="http://darkpatterns.org/">darkpatterns.org</a>, a resource to highlight patterns and anti-patterns on the web.</p>
<p>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.</p>
<p>Many articles can be found if you search for the term "dark Pattern" and some even highlight Brignull and his steering away from a term that is exclusionary and harmful. These articles want to <em>"stick to calling them dark patterns"</em> because <em>"the term dark pattern has more traction"</em> <a href="https://www.comparitech.com/blog/information-security/dark-patterns/">to quote one article</a>.</p>
<p>To quote Kim Crayton, <em>"Tech is not neutral."</em> and <em>"Unremarkably mediocre white dudes"</em> it sure isn't and I am one of those unremarkably mediocre white dudes.</p>
<h2 id="then-why-are-you-writing-this-article%3F" tabindex="-1">Then Why Are YOU Writing This Article?</h2>
<p>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'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't lie, friend:</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1672586775/images/sounds-about-white.webp" alt="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." /></p>
<p>I'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've done my job but I won't rest with that as the accepted result. "Dark pattern" is problematic.</p>
<p>Tech is not neutral and it is political. So if you have lasted this long let's get into why this thinking is problematic and what I propose we do as a community of "professionals" on the web (I sometimes read the bird site and wonder how some people can be called "professionals").</p>
<p>It is 2023 and we are still, in most places with most people, using the word "dark" 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?</p>
<p>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?</p>
<p>Your naming conventions are highly suspect.</p>
<p>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.</p>
<p>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.</p>
<blockquote>
<p>"Why do we have to bring politics into this?"</p>
</blockquote>
<p>Oh, you didn'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, "dark patterns". You can agree to disagree and move on with your day, I know I will with people who disagree.</p>
<blockquote>
<p>"This has nothing to do with master/main"</p>
</blockquote>
<p>They sure as hell do.</p>
<p>Change came around from the usage of the word <em>"master"</em> and GitHub made the change. <em>"Slave"</em> 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.</p>
<p>Dark isn't <em>just a word</em> in the dictionary, oh no. It is also been known to have designated racial groups since the days when this country was <em>"founded"</em>. Along with black, dark and black was the norm and their connotations may well reinforce social norms pertaining to those groups(*).</p>
<p>The reasoning behind the usage of the term can be anywhere from, <em>"What does it matter? I don't see anything wrong with it."</em> to <em>"Why do people overreact to everything these days? Why can't people not look into everything with a microscope?"</em></p>
<p>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's a huge part of the problem.</p>
<p>Why stray from the norm? Why change something that has been <em>"industry standard"</em> since they started their web careers? Fear. Fear of change and fear of being inclusive. So the reasons don't matter, just as long as their discomfort gets them what they want.</p>
<p>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't have to be <em>"every"</em> single group of marginalized and underrepresented folks.</p>
<p>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.</p>
<h2 id="deceptive.-it's-okay-to-use-the-word.-honest!" tabindex="-1">Deceptive. It's Okay To Use The Word. Honest!</h2>
<p>I'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's the kind of attitude I see permeate through tech to this very day. Especially with the white guys. It's the entitlement. It's the air of ego and of that they are the "alpha male".</p>
<p>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's been a twenty year process. It has been all about change.</p>
<p>Change the words, change the attitudes, change the ego, swallow your pride or drown. It's okay to use the word <em>"deceptive"</em>, it really is.</p>
<p>I'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's time to sunset the old <em>"dark"</em> term and use something that does not invoke negative connotations, words, thoughts, inflections. Period.</p>
<p><a href="https://twitter.com/andyvitale/status/1262403859286315010?s=20&t=JqI3CFSxTdHDds71LVwWvg">Andy Vitale brought up the subject in 2020</a> 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?).</p>
<h2 id="it's-moved-into-the-mainstream" tabindex="-1">It's Moved Into The Mainstream</h2>
<p>Media outlets online pick up on articles and the terminology fast and they write and publish articels at the same rate. "Dark" has permeated the search engines and we need to change this.</p>
<p>I can see many articles that specifically use "dark" in its headline. <a href="https://www.ftc.gov/news-events/news/press-releases/2022/09/ftc-report-shows-rise-sophisticated-dark-patterns-designed-trick-trap-consumers">"FTC Report Shows Rise In Sophisticated Dark Patterns Designed to Trick and Trap Consumers"</a> for one. Even <a href="https://en.wikipedia.org/wiki/Dark_pattern">Wikipedia has an entry for this</a>.</p>
<p>It's time to get rid of the language. Whether it is <em>"deceptive design patterns"</em>, <em>"deceptive patterns"</em>, <em>"Anti-patterns"</em> or something else. We need to remove "dark" from the terminology. It doesn't make sense to begin with. "Dark" may be because of "perception" 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.</p>
<p>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.</p>
<h2 id="definition-is-everything" tabindex="-1">Definition Is Everything</h2>
<p>According to <a href="https://www.dictionary.com/browse/dark">Dictionary.com, dark is</a>:</p>
<p>adjective, <strong>dark·er</strong>, <strong>dark·est</strong>.</p>
<ol>
<li>having very little or no light: <em>a dark room</em>.</li>
<li>radiating, admitting, or reflecting little light: <em>a dark color</em>.</li>
<li>approaching black in hue: <em>a dark brown</em>.</li>
</ol>
<p>noun</p>
<ol>
<li>the absence of light; darkness: <em>I can't see well in the dark</em>.</li>
<li>night; nightfall: <em>Please come home before dark</em>.</li>
</ol>
<p>verb (used with object)</p>
<ol>
<li>to make dark; darken.</li>
</ol>
<p>verb (used without object)</p>
<ol>
<li>Obsolete. to grow dark; darken.</li>
</ol>
<p>Why are we using "dark"?! There is no sense to it whatsoever. A <em>"deceptive pattern"</em> or an anti-pattern designed to trick users, whether it is with or without intent, is <strong>deceptive</strong>. It is a deceptive practice.</p>
<p>Not "dark" like Halloween spooky or scary, not without light, not due to color or light. None of those. None!</p>
<h2 id="my-current-work-behind-deceptive-patterns" tabindex="-1">My Current Work Behind Deceptive Patterns</h2>
<p>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 <a href="https://raw.githack.com/w3c/fast/restructure-functional-and-user-needs/index.html">the Framework for Accessibile Specification of Technologies (FAST)</a>.</p>
<p>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.</p>
<p>The challenge here is filling those gaps because there could be a thousand different use cases to fill a gap. It's work, a lot of work. It'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.</p>
<ul>
<li>blacklist/whitelist</li>
<li>master/slave</li>
<li>native feature/built-in feature</li>
<li>dummy/sample</li>
<li>man hours/engineer hours</li>
<li>Black Hat/White Hat</li>
<li><a href="https://www.britannica.com/topic/grandfather-clause">Grandfather Clause</a></li>
</ul>
<p>These terms have been looked at for needing to be changed and <a href="https://www.zotero.org/groups/2554430/ach_inclusive_technology/items/K6BFUBHB/item-details">there are a lot of articles that can be found here</a> if you're not convinced like I am after doing my research.</p>
<h2 id="just-stop-already" tabindex="-1">Just Stop Already</h2>
<p>Stop using "dark". It's easy to do. Maybe it is not easy for those that are still using "master" in their git repos or those that cling to the Indigenous mascots that "aren't hurting anyone" in sports/schools, or those that do the tomahawk chop in Atlanta or at Florida State University, or in Kansas City. If you're resistant to change, because "words is words" than quit reading this and go on with your day. If it's made you think a little, I challenge you to think more and think harder.</p>
<p>People can do this. We are capable of adaptating and change. We'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't white, how easy is it for you just to adopt a new term that reflects a change?</p>
<h2 id="disagree.-that's-your-right" tabindex="-1">Disagree. That's Your Right</h2>
<p>You can read this article and say to yourself, <em>"What a load of bullshit. This guy has no idea of what he's talking about."</em> That's your right and that's your opinion and you're <strong>entitled</strong> to that opinion. Notice I bolded the word "entitled". 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 <strong>is</strong> racist, I mention the connotation of racism).</p>
<p><a href="https://medium.com/@shaundmorris/to-change-scrum-master-or-not-to-change-scrum-master-that-is-the-question-8b503cd43e89">A great article here by Shaun Morris mentions at the end</a>:</p>
<blockquote>
<p>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.</p>
</blockquote>
<p>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.</p>
<p>And as the NCSC's Technical Director Ian Levy says <a href="https://www.ncsc.gov.uk/blog-post/terminology-its-not-black-and-white">in this article</a>:</p>
<blockquote>
<p>"If you’re thinking about getting in touch saying this is political correctness gone mad, don’t bother."</p>
</blockquote>
What I Have Learned With Ionic2023-03-17T00:00:00Zhttps://toddl.dev/posts/what-i-have-learned-with-ionic/<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1679077487/ionic_logotype_blue_jde7di.png" alt="The Ionic logo in blue" /></p>
<p>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.</p>
<h2 id="a-little-history" tabindex="-1">A Little History</h2>
<p>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.</p>
<p>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).</p>
<p>I had also toyed with 1.X versions of Angular but stopped after v4 and I didn't get to Vue until v2 (2.4 or 2.5-ish) and stopped before v3. So I didn't quite get familiar with any of the "big 3".</p>
<p>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.</p>
<h2 id="ionic-makes-me-think-back" tabindex="-1">Ionic Makes Me Think Back</h2>
<p><a href="https://toddl.dev/posts/ionic-and-vue-part-one/">I started tinkering around with Ionic</a> and of course, I have yet to follow up with an article on my progress (coming soon!) but it reminds me a lot of <a href="https://coldfusion.adobe.com/">ColdFusion</a> and it is because of the custom tags. ColdFusion with their tags:</p>
<pre class="language-html"><code class="language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cfset</span> <span class="token attr-name">firstName</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>Todd<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cfif</span> <span class="token attr-name">firstName</span> <span class="token attr-name">eq</span> <span class="token attr-name">"Todd"</span><span class="token punctuation">></span></span>
I don't care for lobster rolls at all.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cfif</span><span class="token punctuation">></span></span></code></pre>
<p>and Ionic with their tags:</p>
<pre class="language-html"><code class="language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ion-header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ion-toolbar</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ion-title</span><span class="token punctuation">></span></span>
Contact Form
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ion-title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ion-toolbar</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ion-header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ion-content</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ion-item</span> <span class="token attr-name">*ngIf</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>isLoggedIn; else login<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ion-label</span><span class="token punctuation">></span></span>Welcome, !<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ion-label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ion-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ng-template</span> <span class="token attr-name">#login</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ion-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ion-label</span><span class="token punctuation">></span></span>Please log in to continue.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ion-label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ion-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ng-template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ion-content</span><span class="token punctuation">></span></span></code></pre>
<p>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't for me and I went back to PHP.</p>
<h2 id="ionic-makes-learning-and-mobile-development-fun" tabindex="-1">Ionic Makes Learning and Mobile Development Fun</h2>
<p>I went with Vue and Ionic. Vue had a good reputation for accessibility and Ionic takes accessibility seriously. That's what drew me to the both of these. <a href="https://webaim.org/projects/million/#frameworks">Vue has slipped a bit in the accessibility area according to the WebAIM Million Report</a> so that'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.</p>
<p>But the learning has been fun. <a href="https://ionic.io/docs">Ionic's docs are great</a> 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'd never get into has been the best part.</p>
<h2 id="what-is-ionic%3F" tabindex="-1">What is Ionic?</h2>
<p>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).</p>
<h2 id="why-i-am-learning-and-using-ionic" tabindex="-1">Why I Am Learning And Using Ionic</h2>
<p>Accessibility. Ionic puts their best foot forward with accessibility. I won't speculate how the other technologies go about accessibility but Ionic does it right. I mean, <a href="https://ionic.io/docs/accessibility">look at their accessibility guide</a> for great insight how they treat accessibility. This is the major reason behind my decision.</p>
<p>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'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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<h2 id="wait.-appflow%3F-capacitor%3F-portals%3F" tabindex="-1">Wait. Appflow? Capacitor? Portals?</h2>
<p>So in my extensive reading of everything I could pour over, here is what I understand of each of these technologies:</p>
<p><a href="https://capacitorjs.com/">Capacitor</a> 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.</p>
<p>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.</p>
<p>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.</p>
<p><a href="https://stenciljs.com/">Stencil</a> allows you to build reusable design systems. Since I'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.</p>
<p><a href="https://ionic.io/appflow">Appflow</a> 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.</p>
<p><a href="https://ionic.io/portals">Portals</a> 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't able to read too far into that but that is definitely on my list.</p>
<p>Ionic also has a CI/CD service, an auth service for SSO (Single Sign-On), Trapeze which I haven'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.</p>
<h2 id="what-i-am-building%3F" tabindex="-1">What I Am Building?</h2>
<p>I can't say other than it is an app and it has to do with lobster rolls. That's all I'll say. You didn't expect anything less or me to actually spill, did you?</p>
<p>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.</p>
<p>You'll be able to find some of the best in Maine... that's all I'll say for now.</p>
<h2 id="what-else%3F" tabindex="-1">What Else?</h2>
<p>Well, I'd like to get into DevRel (Developer Relations) once I transition out of accessibility. I'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.</p>
<p>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'll even be more than happy to do booth duty and talk with people.</p>
<p>Maybe for Ionic? Maybe for another company? Maybe it may be time for me to hang up the whole tech career? I don'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 <strong>LOVED</strong> to code and learn.</p>
Stepping Out2023-04-12T00:00:00Zhttps://toddl.dev/posts/stepping-out/<h2 id="it's-a-great-song!" tabindex="-1">It's a great song!</h2>
<p>Joe Jackson has a timeless catchy tune with that one. That's not what this is about though. This is about me and stepping out of the accessibility space and time for a change.</p>
<p>It's been a bit. I've been thinking about this and where I want to go moving forward in the next few months, that's not in the direction that I am currently in. It's a total "back to square one" 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.</p>
<p>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 <strong>need</strong> that. I <strong>want</strong> that.</p>
<h2 id="burn-out" tabindex="-1">Burn Out</h2>
<p>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's time for change. Which means it is time for me to leave accessibility. Not advocacy, but the work. I can't do it anymore. It's Sisyphean at this point for me. no matter how much time I take off.</p>
<p>I'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.</p>
<h2 id="now-what%3F" tabindex="-1">Now What?</h2>
<p>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.</p>
<p>That goal is where I want to be in a few months. Because I know that I can excel at it, I know I'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.</p>
<p>It isn't up to me to decide, that's not in my control. My control lies in how I get there and present myself.</p>
<p>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.</p>
<h2 id="fin" tabindex="-1">Fin</h2>
<p>I hope to have a better picture in July as to where I am and what I am doing because right now, I'm a bit lost. I can admit it. I don'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.</p>
<p>I hope to get there and report back soon. Send some positive vibes this way, I could sure use them.</p>
Ionic and Vue, Part Two2023-04-26T00:00:00Zhttps://toddl.dev/posts/ionic-and-vue-part-two/<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1670038063/images/vue-ionic-logos.png" alt="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." /></p>
<p>It has been a bit, but following up on the <a href="https://toddl.dev/posts/ionic-and-vue-part-one/">first part</a> of this series, I'm going to be diving into file structure, so pitter patter, let's get at 'er!</p>
<h2 id="file-structure" tabindex="-1">File Structure</h2>
<blockquote>
<p>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.</p>
<p>This also takes into consideration you have familiarity with the node_modules folder and test folder if you're testing with Jest and/or Cypress. I will be going over the testing stuff later on in this series.</p>
</blockquote>
<h2 id="src" tabindex="-1">src</h2>
<p>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.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1682433572/vue-example.png" alt="The file structure shown for a Vue and Ionic template showing files in the src folder." /></p>
<h2 id="router" tabindex="-1">router</h2>
<p>The <code>router</code> folder is where all the routes are kept, added, and each route has its View component with route name. So the <code>index.ts</code> file will point to the <code>HomePage.vue</code> file. The route points to the HomePage view.</p>
<p>The <code>Home</code> route is defined as the default path.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> HomePage <span class="token keyword">from</span> <span class="token string">'../views/HomePage.vue'</span></code></pre>
<h2 id="theme" tabindex="-1">theme</h2>
<p>This is the folder that holds the stylesheets for your project. You can <a href="https://ionicframework.com/docs/theming/basics">find out more about theming</a> from the Ionic docs here.</p>
<p>Global theming for the project can be defined here, Ionic has such names as <code>success</code>, <code>danger</code>, <code>warning</code>, and more for colors for different elements in the UI.</p>
<h2 id="views" tabindex="-1">views</h2>
<p>The <code>views</code> folder is what is render for what page. <code>HomePage.vue</code> is rendered when the <code>Home</code> route is defined in the <code>index.ts</code> file. The same would be for <code>ContactPage.vue</code>, <code>AboutPage.vue</code>, and others.</p>
<p>The home page code looks something like this:</p>
<pre class="language-js"><code class="language-js"><span class="token operator"><</span>template<span class="token operator">></span>
<span class="token operator"><</span>ion<span class="token operator">-</span>page<span class="token operator">></span>
<span class="token operator"><</span>ion<span class="token operator">-</span>header <span class="token operator">:</span>translucent<span class="token operator">=</span><span class="token string">"true"</span><span class="token operator">></span>
<span class="token operator"><</span>ion<span class="token operator">-</span>toolbar<span class="token operator">></span>
<span class="token operator"><</span>ion<span class="token operator">-</span>title<span class="token operator">></span>Blank<span class="token operator"><</span><span class="token operator">/</span>ion<span class="token operator">-</span>title<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>ion<span class="token operator">-</span>toolbar<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>ion<span class="token operator">-</span>header<span class="token operator">></span>
<span class="token operator"><</span>ion<span class="token operator">-</span>content <span class="token operator">:</span>fullscreen<span class="token operator">=</span><span class="token string">"true"</span><span class="token operator">></span>
<span class="token operator"><</span>ion<span class="token operator">-</span>header collapse<span class="token operator">=</span><span class="token string">"condense"</span><span class="token operator">></span>
<span class="token operator"><</span>ion<span class="token operator">-</span>toolbar<span class="token operator">></span>
<span class="token operator"><</span>ion<span class="token operator">-</span>title size<span class="token operator">=</span><span class="token string">"large"</span><span class="token operator">></span>Blank<span class="token operator"><</span><span class="token operator">/</span>ion<span class="token operator">-</span>title<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>ion<span class="token operator">-</span>toolbar<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>ion<span class="token operator">-</span>header<span class="token operator">></span>
<span class="token operator"><</span>div id<span class="token operator">=</span><span class="token string">"container"</span><span class="token operator">></span>
<span class="token operator"><</span>strong<span class="token operator">></span>Ready to create an app<span class="token operator">?</span><span class="token operator"><</span><span class="token operator">/</span>strong<span class="token operator">></span>
<span class="token operator"><</span>p<span class="token operator">></span>Start <span class="token keyword">with</span> Ionic
<span class="token operator"><</span>a
target<span class="token operator">=</span><span class="token string">"_blank"</span>
rel<span class="token operator">=</span><span class="token string">"noopener noreferrer"</span>
href<span class="token operator">=</span><span class="token string">"https://ionicframework.com/docs/components"</span><span class="token operator">></span>
<span class="token constant">UI</span> Components
<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>ion<span class="token operator">-</span>content<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>ion<span class="token operator">-</span>page<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span>
<span class="token operator"><</span>script setup lang<span class="token operator">=</span><span class="token string">"ts"</span><span class="token operator">></span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> IonContent<span class="token punctuation">,</span> IonHeader<span class="token punctuation">,</span> IonPage<span class="token punctuation">,</span> IonTitle<span class="token punctuation">,</span> IonToolbar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@ionic/vue'</span><span class="token punctuation">;</span>
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</span>style scoped<span class="token operator">></span>
#container <span class="token punctuation">{</span>
text<span class="token operator">-</span>align<span class="token operator">:</span> center<span class="token punctuation">;</span>
<span class="token literal-property property">position</span><span class="token operator">:</span> absolute<span class="token punctuation">;</span>
<span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token literal-property property">right</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token number">50</span><span class="token operator">%</span><span class="token punctuation">;</span>
<span class="token literal-property property">transform</span><span class="token operator">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">50</span><span class="token operator">%</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
#container strong <span class="token punctuation">{</span>
font<span class="token operator">-</span>size<span class="token operator">:</span> 20px<span class="token punctuation">;</span>
line<span class="token operator">-</span>height<span class="token operator">:</span> 26px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
#container p <span class="token punctuation">{</span>
font<span class="token operator">-</span>size<span class="token operator">:</span> 16px<span class="token punctuation">;</span>
line<span class="token operator">-</span>height<span class="token operator">:</span> 22px<span class="token punctuation">;</span>
<span class="token literal-property property">color</span><span class="token operator">:</span> #8c8c8c<span class="token punctuation">;</span>
<span class="token literal-property property">margin</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
#container a <span class="token punctuation">{</span>
text<span class="token operator">-</span>decoration<span class="token operator">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">/</span>style<span class="token operator">></span></code></pre>
<p>I won't go into the specifics here until another installment of this series, but it won't be too long before I dive into that part.</p>
<h2 id="next-steps" tabindex="-1">Next Steps</h2>
<p>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.</p>
<p>I'll get more into the deeper parts of the template files, router, and more later in the series.</p>
<!-- [Part three of the series is here if you want to read on](https://toddl.dev/posts/ionic-and-vue-part-three.md) -->
The Perpetual Circle of Accessibility2023-09-05T00:00:00Zhttps://toddl.dev/posts/the-perpetual-circle-of-accessibility/<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1693938299/frustration.jpg" alt="A man holding his glasses in his hands while rubbing the bridge of his nose in frustration." /></p>
<h2 id="the-history" tabindex="-1">The History</h2>
<p>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.</p>
<p>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's 24 years if you're keeping score.</p>
<p>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.</p>
<p>Sound familiar? Well if it does, then you know. If it does not, then <a href="https://webaim.org/projects/million/">I shall point you to the WebAIM Million Report</a> 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.</p>
<h2 id="the-question" tabindex="-1">The Question</h2>
<blockquote>
<p>Why do accessibility professionals scream at us when we…</p>
</blockquote>
<p>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.</p>
<p><strong>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.</strong></p>
<p>Or when you see something we post, like <em>"Hey, if you're doing this, please don't. Please do that."</em> and then you post:</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1693929327/a11y.jpg" alt="A post about accessibility professionals not telling developers what to do when something is not done to their understanding" /></p>
<p>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?!</p>
<p>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!).</p>
<p>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 <em>still</em> inaccessible (I lean towards 99%).</p>
<p>The reasons are your own, but when you snap back at me with "Why do you scream at us, tell us what we're doing wrong!" I have. I mean, <strong>I have</strong>.</p>
<pre class="language-css"><code class="language-css"><button>This is a cool button</button></code></pre>
<p>is more accessible and easier to implement than:</p>
<pre class="language-css"><code class="language-css"><div
role=<span class="token string">"button"</span>
aria-label=<span class="token string">"A button as a CTA"</span>
aria-labelledby=<span class="token string">"IdOfSomethingUnrelated"</span>
onClick=<span class="token string">"Do something JavaScripty()"</span>
>
This is a div disguised as a button
</div></code></pre>
<p>A div has no semantic meaning. More often, you see a <code><div></code> as a "wrapper" in the times since HTML5. That one container to rule them all. Then you get into your HTML5 landmark elements (e.g., <code><main></code>, <code><section></code>, <code><nav></code>, <code><footer></code>, etc.). But I <strong>have</strong> told you.</p>
<h2 id="the-examples" tabindex="-1">The Examples</h2>
<blockquote>
<p>Please put alternative text on the image you posted on Twitter.</p>
<p>Please use better contrast for the text on this because I cannot read it.</p>
<p>Screen reader technology will not read a label because you have forgotten it.</p>
<p>You are not shipping your machine. A screen reader will skip over all this.</p>
<p>Who do you want to exclude when you make this inaccessible?</p>
<p>Please use the button element. It is more accessible than a div.</p>
</blockquote>
<p>One example: Flashing video content on the former Twitter. I asked the original poster (OP), <em>"Please add a content warning for people that are prone to epileptic seizures and other vestibular issues, thank you."</em> Just to have some clown reply with <em>"Well then don't watch the video."</em></p>
<p>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 <em>"move fast and break things"</em> or <em>"coding is my life, here are ten reasons why you should do what I list here on Twitter."</em></p>
<p>If you'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, <strong>you</strong> are the barrier.</p>
<p>and there are many more examples. You don't have to look too far to find them on Twitter.</p>
<h2 id="the-burnout" tabindex="-1">The Burnout</h2>
<p>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.</p>
<p>I'm tired. I'm burnt out. I'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.</p>
<p>I have scolded you, I've finger-wagged, I'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't care.</p>
<p>I am burnt out. I'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're not burning the house down. Yet, I don'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'm in.</p>
<h2 id="the-education" tabindex="-1">The Education</h2>
<p>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'm always happy to say, "Here is why this isn't an accessible solution…"</p>
<p>There are those that will virtually spat at you and block you or admonish you, or scold you, or tell you to <em>"fuck off"</em> (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.</p>
<p>The one'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!</p>
<h2 id="the-solution" tabindex="-1">The Solution</h2>
<p>Ask. Simply stated. Ask.</p>
<h2 id="the-takeaway" tabindex="-1">The Takeaway</h2>
<p>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.</p>
<p>You see a post, it suggests something but doesn't explain why, but you don't use the back channels to ask. That is on <strong>you</strong> 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.</p>
<p>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, <em>"Use alternative text for your images for people who use screen reader technologies or assistive tech, please"</em></p>
<p>It'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.</p>
<p>That is the current state of accessibility. Every time someone ignores a suggestion, I get ill. Because that person doesn't care. Accessibility is a right, <strong>NOT</strong> a privilege.</p>
<p>That said, you wonder why we shout it out on socials? Read this article again.</p>
Dear Molly2023-09-06T00:00:00Zhttps://toddl.dev/posts/dear-molly/<h2 id="cw%3A-death" tabindex="-1">CW: Death</h2>
<p>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.</p>
<p>I learned of Molly'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.</p>
<p>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.</p>
<p>I had always said to Molly, <em>"When I can I want to come out to Arizona and meet you and just talk about the good old days of the Web."</em> and in Molly fashion we went into a dive into the good and the bad of the Web.</p>
<p>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't feeling well, it wasn'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.</p>
<p>When we did exchange telephone numbers and speak on the phone, I could hear the pain and said, <em>"It is okay. There will be another day."</em> Well, there will not be another day and this makes me incredibly sad.</p>
<p>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. <a href="https://twitter.com/mholzschlag/status/1528580765675450374?s=20">The face-to-face showdowns with Bill Gates numerous times about Internet Explorer</a>, calling her "the annoying web standards girl", the conferences and speaking, and owning the stage.</p>
<p>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.</p>
<p>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.</p>
<p>Molly has been described as <em>"a force of nature"</em> and I have to say, nature doesn't have anything on what and who Molly was and forever will be. She leaves an indelible mark on the Web.</p>
<p>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.</p>
<p>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.</p>
<p>Rest easy, dear Molly. Rest peacefully. ♥</p>
Whataboutism2023-09-15T00:00:00Zhttps://toddl.dev/posts/whataboutism/<blockquote>
<p>What about it? This doesn’t need accessibility.</p>
</blockquote>
<p>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.</p>
<p>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.</p>
<p>We don’t talk about it much these days.</p>
<p>“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.</p>
<p>That’s just one example of why without education and research, the Web is doomed to be inaccessible even more than it already is.</p>
<p>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 <strong>YOUR</strong> machine.</p>
<p>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.</p>
<p>“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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<section> is the new <div>2023-10-12T00:00:00Zhttps://toddl.dev/posts/section-is-the-new-div/<p>Note that there are times and places to use the <code>div</code> and <code>section</code> elements. This article addresses the need for more accessible solutions and fixes as well as the need to stop over-engineering things.</p>
<p>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.</p>
<h2 id="remember-when%E2%80%A6" tabindex="-1">Remember when…</h2>
<p>We used to have tables for layouts? Then we had the trusty <code>div</code> element and it took off like a rocket! you see div soup as far as the eyes can see.</p>
<p><img src="https://media.giphy.com/media/i4JiDqwoV3A0ZO9d23/giphy.gif" alt="A man with a blue shirt scanning the distance for something." /></p>
<p>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.</p>
<p>Then the accessibility people said, "Wait a minute. Try not to use so many divs. They hold no semantic meaning and use semantic HTML elements like <code>section</code> it is much better for accessibility." Then the gardeners that are the developers started using the section element, and planting those seeds. And planting them. And planting them.</p>
<p>Now we have a garden, not only overflowing with <code>div</code> elements, but that same garden we call the Web is not choking with the overplanting of <code>section</code> elements.</p>
<blockquote>
<p>Well how do we achieve this?</p>
</blockquote>
<h2 id="know-when-to-hold-'em" tabindex="-1">Know When To Hold 'Em</h2>
<p>As with the <code>div</code> element, moderation is the key. You should know when to hold 'em. For example:</p>
<pre class="language-css"><code class="language-css"><div class=<span class="token string">"wrapper"</span>>
<div>
<div class=<span class="token string">"menu"</span>>
<div id=<span class="token string">"header"</span> role=<span class="token string">"banner"</span>>
<div id=<span class="token string">"search"</span>></div>
<h1>Title</h1>
<nav role=<span class="token string">"list"</span>>
<a href=<span class="token string">""</span>>/page</a>
<a href=<span class="token string">""</span>>/page</a>
<a href=<span class="token string">""</span>>/page</a>
</nav>
<div id=<span class="token string">"main"</span>>
<h2>Subtitle</h2>
<div class=<span class="token string">"section"</span>>
<section class=<span class="token string">"grid-box"</span>>
<h4>Styled to look like an h3</h4>
<p>Stuff...</p>
</section>
<section class=<span class="token string">"grid-box"</span>>
<h4>Styled to look like an h3</h4>
<p>Stuff...</p>
</section>
<section class=<span class="token string">"grid-box"</span>>
<aside>
<h3>Sectional heading</h3>
<p>Stuff...</p>
</aside>
</section>
</div>
</div>
<div id=<span class="token string">"footer"</span>></div>
</div>
</div>
</div>
</div></code></pre>
<p>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.</p>
<p>At some point, this will need to be refactored. Which costs time and money. Also, stress. I'll explain.</p>
<pre class="language-css"><code class="language-css"><div class=<span class="token string">"wrapper"</span>>
<div id=<span class="token string">"header"</span>>
<div id=<span class="token string">"search"</span>></div>
<h1>Title</h1>
<nav role=<span class="token string">"list"</span>>
<a href=<span class="token string">""</span>>/page</a>
<a href=<span class="token string">""</span>>/page</a>
<a href=<span class="token string">""</span>>/page</a>
</nav>
</div>
<div id=<span class="token string">"main"</span>>
<h2>Subtitle</h2>
<section class=<span class="token string">"grid-box"</span>>
<h3>Styled to look like an h3</h3>
<p>Stuff...</p>
</section>
<section class=<span class="token string">"grid-box"</span>>
<h3>Styled to look like an h3</h3>
<p>Stuff...</p>
</section>
<section class=<span class="token string">"grid-box"</span>>
<aside>
<h4>Sectional heading</h4>
<p>Stuff...</p>
</aside>
</section>
</div>
<div id=<span class="token string">"footer"</span>></div>
</div></code></pre>
<p>Now this being a very rough example, you may need to go back and change some stuff, but for the most part, you'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.</p>
<p>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.</p>
<p>If you do use the <code>section</code> element when grouping things genrically, please take a read through Scott O'Hara's article on his blog about <a href="https://www.scottohara.me/blog/2021/07/16/section.html">the accessibility of the section element</a>.</p>
<blockquote>
<p>Use the <code><section></code> 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 <code><div></code>s and classes to hopefully understand the intended structure.</p>
</blockquote>
<h2 id="know-when-to-fold-'em" tabindex="-1">Know when to fold 'Em</h2>
<p>So why do I see a lot of empty <code>div</code> 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't know about the accessibility implications.</p>
<p>Look at the rendered code on X (formerly Twitter). It's a thick, creamy div chowder. Divs as far as the eyes can see.</p>
<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1697122400/x-twitter-code.png" alt="Code from the X (formerly Twitter) interface showing all the div elements used" /></p>
<p>There is a world of options with less code. Especially with the advancements of CSS.Even more now with <code>subgrid</code> gaining support in the modern browsers. If the opportunity is there, seize it!</p>
<pre class="language-css"><code class="language-css"><div id=<span class="token string">"wrapper"</span>>
<header>...</header>
<main>
...
<section>
...
<aside>
...
</aside>
</section>
</main>
<footer>...</footer>
</div></code></pre>
<p>If you'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.</p>
<p>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?</p>
<blockquote>
<p>I don't have any support.</p>
</blockquote>
<p>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.</p>
<p><a href="https://www.smashingmagazine.com/2023/02/keys-accessibility-mindset">Keys To An Accessibility Mindset</a><br />
<a href="https://www.smashingmagazine.com/2022/08/organization-improved-web-accessibility-case-study/">How Our Organization Improved Web Accessibility (Case Study)</a><br />
<a href="https://www.smashingmagazine.com/2021/07/strong-case-for-accessibility/">Making A Strong Case For Accessibility</a><br />
<a href="https://smart-interface-design-patterns.com/articles/accessibility-strong-case/">How To Make A Strong Case For Accessibility</a></p>
<p>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'll understand the foundations of the Web better than you ever have before. I guarantee it.</p>
20242024-01-11T00:00:00Zhttps://toddl.dev/posts/twenty-twenty-four/<h2 id="new-year%2C-different-me" tabindex="-1">New Year, Different Me</h2>
<p>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.</p>
<p>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.</p>
<p>Last night, when I got back to my room after dinner with friends, I had a good think. "Where am I going in 2024"?</p>
<p>I don't think it is going to be very far, to be honest. I don'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'm almost 53. That's ancient in tech these days.</p>
<p>Ageism in tech sure does exist and don't let anyone tell you different.</p>
<p>2023 ended good for me, so I cannot complain. I had a huge accessibility audit for a company I can't quite name yet (I won't for ethical reasons until everything is signed off for) and I got to remodel my office at home the way I had envisioned.</p>
<h2 id="i-have-seen-things" tabindex="-1">I Have Seen Things</h2>
<p>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 "where is the place for me once this trend stops (hopefully) and who is going to take a chance on me?"</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<h2 id="i-am-done" tabindex="-1">I Am Done</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>I'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.</p>
<p>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.</p>
<p>It has been fun for years up until the last two years. Now it is just tedious. I'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.</p>
<p>I think I will go enjoy another venture in another arena somewhere.</p>
<p>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.</p>
<p>Peace.</p>
The Decision to Leave Tech2024-02-05T00:00:00Zhttps://toddl.dev/posts/the-decision-to-leave-tech/<p><img src="https://res.cloudinary.com/colabottles/image/upload/v1707139800/todd-halfstack.jpg" alt="Todd speaking at HalfStack Phoenix about leaving tech." /></p>
<h2 id="done" tabindex="-1">Done</h2>
<p>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.</p>
<p>Something I have loved to do over the past 44 years as a person, the past 25 professionally. Something I thought I'd love to do forever. That old saying comes to mind.</p>
<blockquote>
<p>All good things must come to an end.</p>
</blockquote>
<p>I'm leaving on my terms, not anyone else's. I'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.</p>
<p>I've thought about it, I have written about it a hundred thousand times before but this feels different, it feels final. It is final.</p>
<p>I've worked with a lot of great people, kind people, compassionate, empathetic, wonderful, intelligent people. I've met the same amount of the same people at conferences and events.</p>
<h2 id="next" tabindex="-1">Next</h2>
<p>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'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?</p>
<h2 id="accessibility" tabindex="-1">Accessibility</h2>
<p>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, <a href="https://yatil.net/blog/hope-kills-you">"It's the hope that kills you"</a>.</p>
<p>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.</p>
<p><a href="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">When respected accessibility people become overlay salesmen</a>, 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 <a href="https://www.businesswire.com/news/home/20231230727471/en/Level-Access-Agrees-to-Acquire-UserWay/">when accessibility companies buy overlay companies</a> in the continual monetization of accessibility.</p>
<p>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.</p>
<p>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).</p>
<p>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.</p>
<p>The perpetually bitter and angry crowd that tells you that "you are not wanted, nor are you needed and you can fuck off" (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.</p>
<p>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'm finished rolling that boulder up that mountain.</p>
<h2 id="i-tried" tabindex="-1">I Tried</h2>
<p>I have tried over the years to become gainfully employed in the accessibility space with the "big three". I have to say that apparently, my experience, although extensive, definitely not all-knowing, was not good enough. At any level.</p>
<p>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.</p>
<p>So it hasn'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.</p>
<p>I tried though. I'm tired boss.</p>
<h2 id="burnout" tabindex="-1">Burnout</h2>
<p>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.</p>
<p>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?</p>
<p>No. I don't.</p>
<p>My coding suffered, my ability to do development with fire, passion, love, and pleasure. Wiped out. Gone. I am indifferent to that now. I'm still tired, boss. Even more, just plain tired.</p>
<h2 id="2024" tabindex="-1">2024</h2>
<p>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.</p>
<h2 id="farewell" tabindex="-1">Farewell</h2>
<p>It is time for me to go. It isn't see you later or good bye for now. It is farewell.</p>
Thank You2024-02-07T00:00:00Zhttps://toddl.dev/posts/thank-you/<p>I would like to take the time to address everyone who reached out to me and who left messages on the socials I inhabit:</p>
<p>Thank you all.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>♥</p>
<p>For context you can <a href="https://toddl.dev/posts/the-decision-to-leave-tech/">interact with this link to read up</a> on what this means.</p>