Charles M Wood

Vzdělání

Byznys

Jak na to

Technika

JSJ 344: Inclusive Components with Heydon Pickering

JavaScript Jabber

Stay current on JavaScript, Node, and Front-End development. Learn from experts in programming, careers, and technology every week. Become a supporter of this podcast: <a href="https://www.spreaker.com/podcast/javascript-jabber--6102064/support?utm_source=rss&utm_medium=rss&utm_campaign=rss">https://www.spreaker.com/podcast/javascript-jabber--6102064/support</a>.

Panel:  - Charles Max Wood - Aimee Knight - Chris Ferdinandi - Joe Eames Special Guest: <a href="https://github.com/Heydon" rel="noopener">https://github.com/Heydon</a> In this episode, the panel talks with Heydon Pickering who is a designer and writer. The panel and the guest talk about his new book, which is centered on the topic of today’s show: inclusive components. Check out Heydon’s <a href="https://twitter.com/heydonworks" rel="noopener">https://twitter.com/heydonworks</a>, <a href="http://www.heydonworks.com/about" rel="noopener">http://www.heydonworks.com/about</a>, <a href="https://github.com/Heydon" rel="noopener">https://github.com/Heydon</a> and <a href="https://mastodon.social/" rel="noopener">https://mastodon.social/</a>@heydon social accounts to learn more about him. To purchase the book – <a href="https://shop.smashingmagazine.com/products/inclusive-design-patterns" rel="noopener">https://shop.smashingmagazine.com/products/inclusive-design-patterns</a> Show Topics:0:00 – <a href="https://www.telerik.com/kendo-ui?utm_campaign=kendo-ui-awareness-jsjabber&utm_medium=social-paid&utm_source=devchattv" rel="noopener">https://www.telerik.com/kendo-ui?utm_campaign=kendo-ui-awareness-jsjabber&utm_medium=social-paid&utm_source=devchattv</a> 0:38 – Chuck: Aimee, Chris, Joe, and myself – we are today’s panel. My show the <a href="http://thedevrev.com" rel="noopener">http://thedevrev.com</a> is available online to check it out.1:30 – Guest: Plain ice cream would be frozen milk and that would be terrible. So I am lemon and candy JavaScript!2:13 – Chuck: We are talking today about...?2:22 – Chris: He’s talking about “inclusive components” today!2:41 – Guest: Traveling is very stressful and I wanted something to do on the plane. I’ve done this book, <a href="https://shop.smashingmagazine.com/products/inclusive-design-patterns" rel="noopener">https://shop.smashingmagazine.com/products/inclusive-design-patterns</a> If you don’t want to buy the book you can go to the blog. I have been talking with Smashing Magazine.5:40 – Panel.5:47 – Guest: I approached Smashing Magazine initially. They didn’t think there was a market for this content at the time. They were very supportive but we will do it as an eBook so our costs our down. At the time, the editor came back and said that: “it was quite good!” We skimmed it but came back to it now and now the content was more relevant in their eyes. I didn’t want to do the same book but I wanted to do it around “patterns.” Rewriting components is what I do all the time. I use Vanilla JavaScript. <a href="http://backbonejs.org" rel="noopener">http://backbonejs.org</a> is the trendy one.9:52 – Panel: The hard book did it get published?10:02 – Guest: We are in the works and it’s all in the final stages right now. It has to go through a different process for the print version.11:54 – Panel.11:58 – (Guest continues about the editorial process.)  12:09 – Panel: They probably switched to <a href="https://visualstudio.microsoft.com/tfs/" rel="noopener">https://visualstudio.microsoft.com/tfs/</a> 12:23 – Guest: There was this argument on Twitter about the different processors.13:35 – Chris: What are the ways that people are breaking accessibility with their code through JavaScript? 13:59 – Guest: The whole premise is that there aren’t a ton of different components that we use. Generally, speaking. Most things we do through JavaScript – it’s just different ways of doing this/that, and hiding things. I am discounting things with Node or other stuff. Most of what we are doing, with interactive design, is showing and hiding.18:37 – Chris: I have some specialty friends where they tell me where I’ve screwed up my code. For example Eric Bailey and Scott O’Hara but, of course, in very kind ways. What are some things that I can make sure that my code is going to work for many different people.19:18 – Guest: You have accessibility and inclusive design. People think of accessibility as a check-list and that’s okay but there could be problems with this.26:00 – Panel: That’s a great guideline.26:05 – Chris: You talked about ARIA roles and it can be confusing. One side is: I don’t know when to use these and the other side is: I don’t know when NOT to use these so I’m going to use them for EVERYTHING! I guess both can be detrimental. What’s your advice on this topic?27:00 – Guest: Scott is great and I would trust him to the end of the Earth about what he says.Guest mentions <a href="https://tink.uk" rel="noopener">https://tink.uk</a> and her talks about this topic.29:26 – (Guest continues.) 29:36 – <a href="https://sentry.io/welcome/" rel="noopener">https://sentry.io/welcome/</a> 30:31 – Chris.30:40 – Guest: There is a lot of pressure, though, right? People wouldn’t blog about this if it wasn’t worthwhile. It doesn’t matter what the style is or what the syntax is.The guest talks about not throwing ARIA onto everything.36:34 – Aimee: Is this something that was mentioned in the book: people with disabilities and accessibility.37:28 – Guest: Yes, of course. I think it’s important to make your interfaces flexible and robust to think and include people with disabilities.39:00 – Guest mentions larger buttons. 40:52 – Panelists and Guest talk back-and-forth. 42:22 – Chris: It’s an accessibility and inclusivity element. I saw a dropdown menu and worked great on certain devices but not others. I could beat this horse all day long but the whole: what happens of the JavaScript file doesn’t load or just accordion options?43:50 – Guest: It’s the progressive enhancement element.44:05 – Guest: I think it’s worth noting. I think these things dovetail really nicely.46:29 – Chris: Did you do a video interview, Aimee, talking about CSS? Is CSS better than JavaScript in some ways I don’t know if this is related or not?47:03 – Aimee: When I talk about JavaScript vs. CSS...the browser optimizes those.47:27 – Aimee: But as someone who loves JavaScript...and then some very talented people taught me that you have to find the right tool for the job.47:29 – Guest: I am the other way around – interesting.52:50 – Chuck: Picks!52:55 – <a href="https://devchat.tv/get-a-coder-job/" rel="noopener">https://devchat.tv/get-a-coder-job/</a> END – <a href="https://www.cachefly.com" rel="noopener">https://www.cachefly.com</a> Links: - <a href="https://www.javascript.com" rel="noopener">https://www.javascript.com</a> - <a href="http://backbonejs.org" rel="noopener">http://backbonejs.org</a> - <a href="https://visualstudio.microsoft.com/tfs/" rel="noopener">https://visualstudio.microsoft.com/tfs/</a> - <a href="https://tink.uk" rel="noopener">https://tink.uk</a> - <a href="https://reactjs.org" rel="noopener">https://reactjs.org</a> - <a href="https://elixir-lang.org" rel="noopener">https://elixir-lang.org</a> - Ember.js - <a href="https://vuejs.org" rel="noopener">https://vuejs.org</a> - <a href="https://golang.org/project/" rel="noopener">https://golang.org/project/</a> - <a href="http://jquery.com" rel="noopener">http://jquery.com</a> - <a href="https://nodejs.org/en/" rel="noopener">https://nodejs.org/en/</a> - <a href="https://github.com/GoogleChrome/puppeteer" rel="noopener">https://github.com/GoogleChrome/puppeteer</a> - <a href="https://www.cypress.io" rel="noopener">https://www.cypress.io</a> - <a href="https://github.com/Heydon" rel="noopener">https://github.com/Heydon</a> - <a href="https://mastodon.social/" rel="noopener">https://mastodon.social/</a>@heydon - <a href="https://shop.smashingmagazine.com/products/inclusive-design-patterns" rel="noopener">https://shop.smashingmagazine.com/products/inclusive-design-patterns</a> - <a href="https://codeburst.io/heydon-pickering-accessibility-responsibility-and-inclusive-design-6fd8ae9883b8" rel="noopener">https://codeburst.io/heydon-pickering-accessibility-responsibility-and-inclusive-design-6fd8ae9883b8</a> - <a href="http://www.heydonworks.com" rel="noopener">http://www.heydonworks.com</a> - <a href="https://twitter.com/heydonworks" rel="noopener">https://twitter.com/heydonworks</a> Sponsors: - <a href="https://devlifts.io" rel="noopener">https://devlifts.io</a> - <a href="https://www.telerik.com/kendo-ui?utm_campaign=kendo-ui-awareness-jsjabber&utm_medium=social-paid&utm_source=devchattv" rel="noopener">https://www.telerik.com/kendo-ui?utm_campaign=kendo-ui-awareness-jsjabber&utm_medium=social-paid&utm_source=devchattv</a> - <a href="https://sentry.io/welcome/" rel="noopener">https://sentry.io/welcome/</a> - <a href="https://www.cachefly.com" rel="noopener">https://www.cachefly.com</a> Picks:Joe - <a href="https://gomakethings.com/" rel="noopener">https://gomakethings.com/</a> - <a href="https://boardgamegeek.com/boardgame/245643/luxor" rel="noopener">https://boardgamegeek.com/boardgame/245643/luxor</a> - <a href="http://cypress.io/" rel="noopener">http://cypress.io/</a> Aimee - <a href="https://threader.app/thread/1058433116002381824" rel="noopener">https://threader.app/thread/1058433116002381824</a> - <a href="https://www.amazon.com/dp/B0764FYSNF?aaxitk=2FWeizqoAJkDZQs18ygELQ&hsa_cr_id=7362091710401&pd_rd_i=B0764FYSNF&pf_rd_p=3ff6092e-8451-438b-8278-7e94064b4d42&sb-ci-a=B0764FYSNF&sb-ci-n=asinImage&sb-ci-v=https%253A%252F%252Fimages-na.ssl-images-amazon.com%252Fimages%252FI%252F41DNdyq2%252B-L.jpg" rel="noopener">https://www.amazon.com/dp/B0764FYSNF?aaxitk=2FWeizqoAJkDZQs18ygELQ&hsa_cr_id=7362091710401&pd_rd_i=B0764FYSNF&pf_rd_p=3ff6092e-8451-438b-8278-7e94064b4d42&sb-ci-a=B0764FYSNF&sb-ci-n=asinImage&sb-ci-v=https%253A%252F%252Fimages-na.ssl-images-amazon.com%252Fimages%252FI%252F41DNdyq2%252B-L.jpg</a> Chris - Web Dev Career Guide: <a href="https://gomakethings.com/career-guide/" rel="noopener">https://gomakethings.com/career-guide/</a> Become a supporter of this podcast: <a href="https://www.spreaker.com/podcast/javascript-jabber--6102064/support?utm_source=rss&utm_medium=rss&utm_campaign=rss">https://www.spreaker.com/podcast/javascript-jabber--6102064/support</a>.

Panel:  - Charles Max Wood - Aimee Knight - Chris Ferdinandi - Joe Eames Special Guest: <a href="https://github.com/Heydon" rel="noopener">https://github.com/Heydon</a> In this episode, the panel talks with Heydon Pickering who is a designer and writer. The panel and the guest talk about his new book, which is centered on the topic of today’s show: inclusive components. Check out Heydon’s <a href="https://twitter.com/heydonworks" rel="noopener">https://twitter.com/heydonworks</a>, <a href="http://www.heydonworks.com/about" rel="noopener">http://www.heydonworks.com/about</a>, <a href="https://github.com/Heydon" rel="noopener">https://github.com/Heydon</a> and <a href="https://mastodon.social/" rel="noopener">https://mastodon.social/</a>@heydon social accounts to learn more about him. To purchase the book – <a href="https://shop.smashingmagazine.com/products/inclusive-design-patterns" rel="noopener">https://shop.smashingmagazine.com/products/inclusive-design-patterns</a> Show Topics:0:00 – <a href="https://www.telerik.com/kendo-ui?utm_campaign=kendo-ui-awareness-jsjabber&utm_medium=social-paid&utm_source=devchattv" rel="noopener">https://www.telerik.com/kendo-ui?utm_campaign=kendo-ui-awareness-jsjabber&utm_medium=social-paid&utm_source=devchattv</a> 0:38 – Chuck: Aimee, Chris, Joe, and myself – we are today’s panel. My show the <a href="http://thedevrev.com" rel="noopener">http://thedevrev.com</a> is available online to check it out.1:30 – Guest: Plain ice cream would be frozen milk and that would be terrible. So I am lemon and candy JavaScript!2:13 – Chuck: We are talking today about...?2:22 – Chris: He’s talking about “inclusive components” today!2:41 – Guest: Traveling is very stressful and I wanted something to do on the plane. I’ve done this book, <a href="https://shop.smashingmagazine.com/products/inclusive-design-patterns" rel="noopener">https://shop.smashingmagazine.com/products/inclusive-design-patterns</a> If you don’t want to buy the book you can go to the blog. I have been talking with Smashing Magazine.5:40 – Panel.5:47 – Guest: I approached Smashing Magazine initially. They didn’t think there was a market for this content at the time. They were very supportive but we will do it as an eBook so our costs our down. At the time, the editor came back and said that: “it was quite good!” We skimmed it but came back to it now and now the content was more relevant in their eyes. I didn’t want to do the same book but I wanted to do it around “patterns.” Rewriting components is what I do all the time. I use Vanilla JavaScript. <a href="http://backbonejs.org" rel="noopener">http://backbonejs.org</a> is the trendy one.9:52 – Panel: The hard book did it get published?10:02 – Guest: We are in the works and it’s all in the final stages right now. It has to go through a different process for the print version.11:54 – Panel.11:58 – (Guest continues about the editorial process.)  12:09 – Panel: They probably switched to <a href="https://visualstudio.microsoft.com/tfs/" rel="noopener">https://visualstudio.microsoft.com/tfs/</a> 12:23 – Guest: There was this argument on Twitter about the different processors.13:35 – Chris: What are the ways that people are breaking accessibility with their code through JavaScript? 13:59 – Guest: The whole premise is that there aren’t a ton of different components that we use. Generally, speaking. Most things we do through JavaScript – it’s just different ways of doing this/that, and hiding things. I am discounting things with Node or other stuff. Most of what we are doing, with interactive design, is showing and hiding.18:37 – Chris: I have some specialty friends where they tell me where I’ve screwed up my code. For example Eric Bailey and Scott O’Hara but, of course, in very kind ways. What are some things that I can make sure that my code is going to work for many different people.19:18 – Guest: You have accessibility and inclusive design. People think of accessibility as a check-list and that’s okay but there could be problems with this.26:00 – Panel: That’s a great guideline.26:05 – Chris: You talked about ARIA roles and it can be confusing. One side is: I don’t know when to use these and the other side is: I don’t know when NOT to use these so I’m going to use them for EVERYTHING! I guess both can be detrimental. What’s your advice on this topic?27:00 – Guest: Scott is great and I would trust him to the end of the Earth about what he says.Guest mentions <a href="https://tink.uk" rel="noopener">https://tink.uk</a> and her talks about this topic.29:26 – (Guest continues.) 29:36 – <a href="https://sentry.io/welcome/" rel="noopener">https://sentry.io/welcome/</a> 30:31 – Chris.30:40 – Guest: There is a lot of pressure, though, right? People wouldn’t blog about this if it wasn’t worthwhile. It doesn’t matter what the style is or what the syntax is.The guest talks about not throwing ARIA onto everything.36:34 – Aimee: Is this something that was mentioned in the book: people with disabilities and accessibility.37:28 – Guest: Yes, of course. I think it’s important to make your interfaces flexible and robust to think and include people with disabilities.39:00 – Guest mentions larger buttons. 40:52 – Panelists and Guest talk back-and-forth. 42:22 – Chris: It’s an accessibility and inclusivity element. I saw a dropdown menu and worked great on certain devices but not others. I could beat this horse all day long but the whole: what happens of the JavaScript file doesn’t load or just accordion options?43:50 – Guest: It’s the progressive enhancement element.44:05 – Guest: I think it’s worth noting. I think these things dovetail really nicely.46:29 – Chris: Did you do a video interview, Aimee, talking about CSS? Is CSS better than JavaScript in some ways I don’t know if this is related or not?47:03 – Aimee: When I talk about JavaScript vs. CSS...the browser optimizes those.47:27 – Aimee: But as someone who loves JavaScript...and then some very talented people taught me that you have to find the right tool for the job.47:29 – Guest: I am the other way around – interesting.52:50 – Chuck: Picks!52:55 – <a href="https://devchat.tv/get-a-coder-job/" rel="noopener">https://devchat.tv/get-a-coder-job/</a> END – <a href="https://www.cachefly.com" rel="noopener">https://www.cachefly.com</a> Links: - <a href="https://www.javascript.com" rel="noopener">https://www.javascript.com</a> - <a href="http://backbonejs.org" rel="noopener">http://backbonejs.org</a> - <a href="https://visualstudio.microsoft.com/tfs/" rel="noopener">https://visualstudio.microsoft.com/tfs/</a> - <a href="https://tink.uk" rel="noopener">https://tink.uk</a> - <a href="https://reactjs.org" rel="noopener">https://reactjs.org</a> - <a href="https://elixir-lang.org" rel="noopener">https://elixir-lang.org</a> - Ember.js - <a href="https://vuejs.org" rel="noopener">https://vuejs.org</a> - <a href="https://golang.org/project/" rel="noopener">https://golang.org/project/</a> - <a href="http://jquery.com" rel="noopener">http://jquery.com</a> - <a href="https://nodejs.org/en/" rel="noopener">https://nodejs.org/en/</a> - <a href="https://github.com/GoogleChrome/puppeteer" rel="noopener">https://github.com/GoogleChrome/puppeteer</a> - <a href="https://www.cypress.io" rel="noopener">https://www.cypress.io</a> - <a href="https://github.com/Heydon" rel="noopener">https://github.com/Heydon</a> - <a href="https://mastodon.social/" rel="noopener">https://mastodon.social/</a>@heydon - <a href="https://shop.smashingmagazine.com/products/inclusive-design-patterns" rel="noopener">https://shop.smashingmagazine.com/products/inclusive-design-patterns</a> - <a href="https://codeburst.io/heydon-pickering-accessibility-responsibility-and-inclusive-design-6fd8ae9883b8" rel="noopener">https://codeburst.io/heydon-pickering-accessibility-responsibility-and-inclusive-design-6fd8ae9883b8</a> - <a href="http://www.heydonworks.com" rel="noopener">http://www.heydonworks.com</a> - <a href="https://twitter.com/heydonworks" rel="noopener">https://twitter.com/heydonworks</a> Sponsors: - <a href="https://devlifts.io" rel="noopener">https://devlifts.io</a> - <a href="https://www.telerik.com/kendo-ui?utm_campaign=kendo-ui-awareness-jsjabber&utm_medium=social-paid&utm_source=devchattv" rel="noopener">https://www.telerik.com/kendo-ui?utm_campaign=kendo-ui-awareness-jsjabber&utm_medium=social-paid&utm_source=devchattv</a> - <a href="https://sentry.io/welcome/" rel="noopener">https://sentry.io/welcome/</a> - <a href="https://www.cachefly.com" rel="noopener">https://www.cachefly.com</a> Picks:Joe - <a href="https://gomakethings.com/" rel="noopener">https://gomakethings.com/</a> - <a href="https://boardgamegeek.com/boardgame/245643/luxor" rel="noopener">https://boardgamegeek.com/boardgame/245643/luxor</a> - <a href="http://cypress.io/" rel="noopener">http://cypress.io/</a> Aimee - <a href="https://threader.app/thread/1058433116002381824" rel="noopener">https://threader.app/thread/1058433116002381824</a> - <a href="https://www.amazon.com/dp/B0764FYSNF?aaxitk=2FWeizqoAJkDZQs18ygELQ&hsa_cr_id=7362091710401&pd_rd_i=B0764FYSNF&pf_rd_p=3ff6092e-8451-438b-8278-7e94064b4d42&sb-ci-a=B0764FYSNF&sb-ci-n=asinImage&sb-ci-v=https%253A%252F%252Fimages-na.ssl-images-amazon.com%252Fimages%252FI%252F41DNdyq2%252B-L.jpg" rel="noopener">https://www.amazon.com/dp/B0764FYSNF?aaxitk=2FWeizqoAJkDZQs18ygELQ&hsa_cr_id=7362091710401&pd_rd_i=B0764FYSNF&pf_rd_p=3ff6092e-8451-438b-8278-7e94064b4d42&sb-ci-a=B0764FYSNF&sb-ci-n=asinImage&sb-ci-v=https%253A%252F%252Fimages-na.ssl-images-amazon.com%252Fimages%252FI%252F41DNdyq2%252B-L.jpg</a> Chris - Web Dev Career Guide: <a href="https://gomakethings.com/career-guide/" rel="noopener">https://gomakethings.com/career-guide/</a> Become a supporter of this podcast: <a href="https://www.spreaker.com/podcast/javascript-jabber--6102064/support?utm_source=rss&utm_medium=rss&utm_campaign=rss">https://www.spreaker.com/podcast/javascript-jabber--6102064/support</a>.

Aplikace Youradio Talk

JSJ 344: Inclusive Components with Heydon Pickering

Poslechněte si podcast