JSJ 343: The Power of Progressive Enhancement with Andy Bell

Published: Dec. 11, 2018, 11 a.m.

Panel:\xa0
- Charles Max Wood
- Aimee Knight
- Chris Ferdinandi
- AJ O\u2019Neal
Special Guest: Andy BellIn this episode, the panel talks with Andy Bell who is an independent designer and developer who uses React, Vue, and Node. Today, the panelists and the guest talk about the power of progressive enhancements. Check it out!Show Topics:0:00 \u2013 https://www.telerik.com/kendo-ui?utm_campaign=kendo-ui-awareness-jsjabber&utm_medium=social-paid&utm_source=devchattv 0:34 \u2013 Chuck: Hi! Our panel is AJ, Aimee, Chris, myself and my new show is coming out in a few weeks, which is called the http://thedevrev.com It helps you with developer\u2019s freedom! I am super excited. Our guest is Andy Bell. Introduce yourself, please.2:00 \u2013 Guest: I am an independent designer and developer out in the U.K.2:17 \u2013 Chuck: You wrote things about Vanilla.js. I am foreshadowing a few things and let\u2019s talk about the power and progressive enhancement.2:43 \u2013 The guest gives us definitions of power and progressive enhancements. He describes how it works. 3:10 \u2013 Chuck: I\u2019ve heard that people would turn off JavaScript b/c it was security concern and then your progressive enhancement would make it work w/o JavaScript. I am sure there\u2019s more than that?3:28 \u2013 The guest talks about JavaScript, dependencies, among other things. 4:40 \u2013 Chuck: Your post did make that very clear I think. I am thinking I don\u2019t even know where to start with this. Are people using the 6th version? How far back or what are we talking about here?5:09 \u2013 Guest: You can go really far back and make it work w/o CSS.5:49 \u2013 Chris: I am a big advocate of progressive enhancement \u2013 the pushback I get these days is that there is a divide; between the broadband era and AOL dialup. Are there compelling reasons why progressive enhancements even matter?6:48 \u2013 Guest.8:05 \u2013 Panel: My family lives out in the boonies. I am aware of 50% of American don\u2019t have fast Internet. People don\u2019t have access to fast browsers but I don\u2019t think they are key metric users.8:47 \u2013 Guest: It totally depends on what you need it for. It doesn\u2019t matter if these people are paying or not.9:31 \u2013 Chris: Assuming I have a commute on the trail and it goes through a spotty section. In a scenario that it\u2019s dependent on the JS...are we talking about 2 different things here?10:14 \u2013 Panelist chimes-in. 10:36 \u2013 Chris: I can take advantage of it even if I cannot afford a new machine.10:55 \u2013 Panel: Where would this really matter to you?11:05 \u2013 Chris: I do have a nice new laptop.11:12 \u2013 Chuck: I had to hike up to the hill (near the house) to make a call and the connection was really poor (in OK). It\u2019s not the norm but it can happen.11:37 \u2013 Chris: Or how about the All Trails app when I am on the trail.11:52 \u2013 Guest.12:40 \u2013 Chris: I can remember at the time that the desktop sites it was popular to have...Chris: Most of those sites were inaccessible to me.13:17 \u2013 Guest.13:51 \u2013 Chuck: First-world countries will have a good connection and it\u2019s not a big deal. If you are thinking though about your customers and where they live? Is that fair? I am thinking that my customers need to be able to access the podcast \u2013 what would you suggest? What are the things that you\u2019d make sure is accessible to them.14:31 \u2013 Guest: I like to pick on the minimum viable experience? I think to read the transcript is important than the audio (MP3).15:47 \u2013 Chuck.15:52 \u2013 Guest: It\u2019s a lot easier with Vue b/c you don\u2019t\u2019 have to set aside rendering.17:13 \u2013 AJ: I am thinking: that there is a way to start developing progressively and probably cheaper and easier to the person who is developing. If it saves us a buck and helps then we take action.17:49 \u2013 Guest: It\u2019s much easier if you start that way and if you enhance the feature itself.18:38 \u2013 AJ: Let me ask: what are the situations where I wouldn\u2019t / shouldn\u2019t worry about progressive enhancements?18:57 \u2013 Guest answers the question. 19:42 \u2013 AJ: I want people to feel motivated in a place WHERE to start. Something like a blog needs Java for comments. https://vtldesign.com/web-strategy/website-design-development/hamburger-icon-flyout-menu-website-navigation/ is mentioned, too.\xa0 20:20 \u2013 Guest.21:05 \u2013 Chris: Can we talk about code?21:16 \u2013 Aimee: This is the direction I wanted to go. What do you mean by that \u2013 building your applications progressively?https://andy-bell.design/writing/21:44 \u2013 Guest.22:13 \u2013 Chuck: I use stock overflow!22:20 \u2013 Guest.22:24 \u2013 Chuck: I mean that\u2019s what Chris uses!22:33 \u2013 Guest (continues).23:42 \u2013 Aimee.23:54 \u2013 Chris.24:09 \u2013 Chris24:16 \u2013 Chris: Andy what do you think about that?24:22 \u2013 Guest: Yes, that\u2019s good.24:35 \u2013 Chris: Where it falls apart is the resistance to progressive enhancements that it means that your approach has to be boring?25:03 \u2013 Guest answers the question. The guest mentions modern CSS and modern JavaScript are mentioned along with tooling.25:50 \u2013 Chuck: My issue is that when we talk about this (progressive enhancement) lowest common denominator and some user at some level (slow network) and then they can access it. Then the next level (better access) can access it. I start at the bottom and then go up. Then when they say progressive enhancement I get lost. Should I scrap it and then start over or what?26:57 \u2013 Guest: If it\u2019s feasible do it and then set a timeline up.27:42 \u2013 Chuck: You are saying yes do it a layer at a time \u2013 but my question is HOW? What parts can I pair back? Are there guidelines to say: do this first and then how to test?28:18 \u2013 https://sentry.io/welcome/ 29:20 \u2013 Guest: Think about the user flow. What does the user want to do at THIS point? Do you need to work out the actual dependencies?30:31 \u2013 Chuck: Is there a list of those capabilities somewhere? So these users can use it this way and these users can use it that way?30:50 \u2013 Guest answers the question. 31:03 \u2013 Guest: You can pick out the big things.31:30 \u2013 Chuck: I am using this feature in the browser...31:41 \u2013 Guest.31:46 \u2013 Chris: I think this differently than you Andy \u2013 I\u2019ve stopped caring if a browser supports something new. I am fine using CSS grid and if your browser doesn\u2019t support it then I don\u2019t have a problem with that. I get hung up on, though if this fails can they still get the content? If they have no access to these \u2013 what should they be able to do?Note: \u201cCutting the Mustard Test\u201d is mentioned.\xa033:37 \u2013 Guest.33:44 \u2013 Chuck: Knowing your users and if it becomes a problem then I will figure it out.34:00 \u2013 Chris: I couldn\u2019t spare the time to make it happen right now b/c I am a one-man shop.34:20 \u2013 Chuck and Chris go back-and-forth. 34:36 \u2013Chris: Check out links below for my product.34:54 \u2013 AJ: A lot of these things are in the name: progressive. 36:20 \u2013 https://andy-bell.design 38:51 \u2013 Chris: Say that they haven\u2019t looked at it all before. Do you mind talking about these things and what the heck is a web component?39:14 \u2013 The guest gives us his definition of what a web component is.\xa0 40:02 \u2013 Chuck: Most recent episode in Angular about web components, but that was a few years ago. See links below for that episode.40:25 \u2013 Aimee.40:31 \u2013 Guest: Yes, it\u2019s a lot like working in Vue and web components. The concepts are very similar.41:22 \u2013 Chris: Can someone please give us an example? A literal slideshow example?41:45 \u2013 Guest answers the question.\xa0 45:07 \u2013 Chris.45:12 \u2013 Guest: It\u2019s a framework that just happens to use web components and stuff to help.45:54 \u2013 Chuck: Yeah they make it easier (Palmer). Yeah there is a crossover with Palmer team and other teams. I can say that b/c I have talked with people from both teams. Anything else?46:39 \u2013 Chuck: Where do they go to learn more?46:49 \u2013 Guest: https://webcomponents.club And my Twitter! (See links below.)47:33 \u2013 Chuck: I want to shout-out about https://devlifts.io that has $19 a month to help you with physical goals. Or you can get the premium slot! It\u2019s terrific stuff. Sign-up with DEVCHAT code but there is a limited number of slots and there is a deadline, too. Just try it! They have a podcast, too!49:16 \u2013 Aimee: http://podcast.devlifts.io 49:30 \u2013 Chuck: Picks!END \u2013 https://www.cachefly.com Links:
- https://www.javascript.com
- https://reactjs.org
- https://elixir-lang.org
- Ember.js
- https://vuejs.org
- https://golang.org/project/
- http://jquery.com
- https://nodejs.org/en/
- https://github.com/GoogleChrome/puppeteer
- https://www.cypress.io
- https://devchat.tv/adv-in-angular/115-aia-polymer-and-web-components-with-angular-2-with-rob-dodson/
-

Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.