POPULARITY
Hosted by ward bell
56 episodes with ward bell
54 episodes with ward bell
4 episodes with ward bell
3 episodes with ward bell
61 episodes with ward bell
3 episodes with ward bell
3 episodes with ward bell
2 episodes with ward bell
Host(s):John Papa @John_PapaWard Bell @WardBellGuest:Laurent Bugnion [@LBugnion]](https://x.com/LBugnion)Recording date: Jun 20, 2024Brought to you byAG GridIdeaBladeResources:Visual InterDev on WikipediaVisual StudioVisual Studio CodeWhat is DevBox?Create a Vue.js app on Visual StudioFree Code Camp Shares Perspectives on the difference between VS Code and Visual StudioMarkDown on VS CodeInstall Copilot on Visual StudioAnnouncement of GitHub Copilot on Visual StudioFeatures of GitHub CopilotTimejumps00:39 Where in the world is Ward Bell?01:59 Introducing Laurent Bugnion03:03 What is Visual Studio?08:02 Sponsor: Ag Grid09:03 What is Dev Box?12:03 What does it look like to use Visual Studio for web development?24:38 The advantage of not caring what the cool kids are doing25:47 Sponsor: IdeaBlade26:51 How is Copilot inside of Visual Studio to work with?29:08 How do I enable CoPilot inside Visual Studio?35:22 Where do you see Visual Studio going?Podcast editing on this episode done by Chris Enns of Lemon Productions.
Recording date: 09/08/2022John Papa @John_PapaWard Bell @WardBellDan Wahlin @DanWahlinCraig Shoemaker @craigshoemakerEvyatar Alush @evyataralBrought to you byAG GridNarwhal Visit nx.dev to get the preeminent open-source toolkit for monorepo development, today. Resources:Episode 188: Wearing a Vest is In Style, with Evyatar AlushToastrForm Validation Done Right, by Ward Bell at ngConf 2022Angular AsyncValidatorVest on GitHubSquiggly Be Gone ! New feature in VS Code PeacockVest.jsVest news, from InfoQVest and SvelteVest and ReactEmoji Picker ReactEvyatar Alush on GitHubVS Code Peacock extensionNxConfDon't be scared to put yourself out thereReact Context Propagation in JavaScriptTimejumps00:44 Be our vest01:47 Guest introduction02:09 What is the Vest framework?04:21 What is unique about Vest?10:29 Sponsor: Narwhal11:08 What are some issues people run into with Vest?14:12 What is DX?19:30 When should you use Vest?22:35 Should we be validating on the server?27:37 How have you used Vest?29:21 Sponsor: Ag Grid30:24 What is the future of Vest?33:34 What are you working on these days?37:24 Final thoughtsPodcast editing on this episode done by Chris Enns of Lemon Productions.
In this episode we take you to the Memorial of Rock Star Ward Bell. Comedian Brian Swinehart gives a humorous and heartfelt speech to honor the life of his friend Ward Bell. --- Support this podcast: https://anchor.fm/brian-swinehart/support
SHOW SUMMARY:In today's episode of NgXP, GDE and contributor to the original Angular documentation, Ward Bell talks about how to quit your job. After first discussing how to know when it's time to move on, Ward then covers best practices for leaving a position, how to make the transition smooth, what to do when things may not be ending on the best of terms, and how to stay optimistic before and throughout all the change.LINKS:https://www.ideablade.com/https://webrush.io/CONNECT WITH US:Ward Bell @wardbellBrooke Avery @JediBraveryErik Slack @erik_slack
This week, we're trying something new: each host has brought with them a topic for the crew to discuss. Topics range from considerations about data-context; what does and does not make for a good manager; code that we're proud to have written; and, what it looks like when a team develops a strong bias for action. One particularly thought-provoking matter is the fact that 20% of Tim's clients prefer to make payments over the phone even when given a web-based option. This is a great reminder of the "bubble" that we can live in, often forgetting that what seems like an odd, archaic choice to us can actually be the "preferred choice" for others. Triumphs & Failures ------------------- * Adam's Triumph - His desk is normally an obstacle course of empty Mountain Dew cans, thumb drives, pens, papers, and whatever else piles up and refuses to be thrown away over time. But, he finally cleaned up his office and even vacuumed the floor. And, heck if it doesn't feel good; well, at least for the next 6-hours. * Ben's Triumph - He fixed some bugs! On a small team, there's always a tension between new feature development and fixing bugs. And, unfortunately, building the "newness" tends to win out. In the last few weeks, however, he's really focused on allocating time to grooming the backlog and fixing long-standing issues, each one of which represents a real user that's experiencing real frictions. * Carol's Triumph - Her communication style can be a bit too curt. In a professional setting, she tends not to mince her words, which can ruffle feathers. Lately, however, she's been making an effort to "people" better, pushing back against inaccuracies with questions instead of just showing people where they went wrong. * Tim's Triumph - Building a successful software product is far more than just writing the code. As Tim puts it, you have to be a "bridge builder". Which means, spending time getting everyone else on board: finance, legal, engineers, and the leadership within the corporate hierarchy. Everyone needs to understand why something is being created; and, why it's worth the time, money, and investment. Historically, Tim has not felt very effective at this consensus building. But lately, he's been really crushing it. He can't share too many details at the moment; but, when the time comes, we won't be able to shut-him-up! Notes & Links ------------- * Girls Who Code ( https://girlswhocode.com/ ) - an organization focused on building the world's largest pipeline of future female engineers. * Go Time podcast ( https://changelog.com/gotime ) - a Changelog podcast focused on Golang. * BFF: Backends For Frontends ( https://samnewman.io/patterns/architectural/bff/ ) - an architectural pattern in which backend APIs are built for specific frontend clients. * Tef: Write code that's easy to delete ( https://programmingisterrible.com/post/139222674273/how-to-write-disposable-code-in-large-systems ) - an article espousing the virtues of code that is written to be deleted. * Ward Bell ( https://wardbell.me/ ) - co-host of the Web Rush podcast ( https://webrush.io/ ). * Dark Matter Developers - the quiet majority of engineers that do their job but don't necessarily participate in the greater web development community. * IGROW - Issue, Goal, Reality, Options, Way Forward: a model for mentoring and coaching. Follow the show! Our website is workingcode.dev ( https://workingcode.dev/ ) and we're @WorkingCodePod on Twitter ( https://twitter.com/WorkingCodePod ) and Instagram ( https://www.instagram.com/workingcodepod/ ). New episodes weekly on Wednesday. And, if you're feeling the love, support us on Patreon ( https://www.patreon.com/workingcodepod ).
In the final installment of our series on forms, the Angular Show welcomes one of our favorite speakers and expert on forms, our very own panelist, Jennifer Wadella. Jennifer is the Director of Angular Development at Bitovi, a front-end JavaScript consulting firm.In the first two installments, we discussed Angular Formly with Bram (better known as Beeman) and Juri Strumpflohner, and then we sat down with Ward Bell to expand our understanding and appreciation for template-driven forms. In this episode, Jennifer will take your knowledge of reactive-driven forms to the next level. To get started, we will broadly discuss the basics of reactive forms and its API; including the AbstractControl, the FormBuilder, and more. We'll then briefly learn about the differences between using the reactive forms API and the template-driven approach. We'll also discuss some more advanced topics, such as the value control accessor and validation. Finally, we'll look at a few of the open issues related to reactive forms and discuss how the API could be improved (ehh hemm, typings).If you haven't subscribed to our show, go ahead and do it now. We love this community and we want you to be a part of it! The Angular Show is your home for the latest Angular news, to learn more about Angular, and to meet amazing people in the community.Show Notes: ngx-typed-forms: https://github.com/Quramy/ngx-typed-formsStrong typings: https://github.com/angular/angular/issues/13721Andrew's reply: https://github.com/angular/angular/pull/40772#issuecomment-776456955 Improvements: https://github.com/angular/angular/issues/31963Control touch state observable: https://github.com/angular/angular/issues/10887Control.getValidators() is missing: https://github.com/angular/angular/issues/13461Input as Observable: https://github.com/angular/angular/issues/5689Identity made simple for developers with Auth0 - https://a0.to/youtubeDemo: How to add user login to an Angular application using Auth0 - https://a0.to/angularSDKqsConnect with us:Brian Love - @brian_loveJennifer Wadella - @likeOMGitsFEDAYAaron Frost - @aaronfrost
Angular is a feature-rich and opinionated framework. Opinionated, for example, in terms of fetching data via XHR. Most, and perhaps all, Angular developers reach for the HttpClientModule. Most of us don't have to even think about that decision. While the debate will likely never end over JavaScript frameworks, Angular developers may never end their debate over what forms implementation to use. Do you use reactive forms (which are arguably not really reactive) or template-driven forms? The Angular show panelists want to take you on a learning journey into the depths of this debate in a healthy, fun, and educational way.If you read the Angular documentation you might be inclined to believe that Angular's template-driven forms approach is where you start, but real Angular devs use reactive forms. I mean, the name reactive is hip. And template-driven forms, that's so AngularJS-y. Why would I want to use template-driven forms?We have the perfect guest to answer that question for you. Ward Bell, a Google Developer Expert in Angular and President/Co-Founder at IdeaBlade, has put template-driven forms through its paces for many years, and in our opinion, is one of the foremost experts on using template-driven forms in Angular. Grab your kombucha, coffee, running shoes, or really whatever you want, and join us as we learn from the master on template-driven forms. By the end of the show, you might be asking yourself why you aren't already using template-driven forms in your Angular applications.Bonus notes from Ward after the show:I talked through a couple of approaches during the show but I didn't have an actual sample to refer to... I just updated the StackBlitz sample with an example of both approaches. Color me “obsessive”.https://stackblitz.com/edit/angular-kkatri?file=src%2Fapp%2Fhero-form%2Fhero-form.component.htmlThe hero now has both a “Power” and a “Power Qualifier” (category and subcategory). Both are required. You pick a power and the list of qualifiers changes accordingly. A special “Select a power qualifier” appears until you pick a qualifier. This demonstrates the “disabled control” approach.One of the selectable powers is “Other”. It has no pre-defined qualifiers. Instead, you must enter a free-form description of the “other power”; what you enter is bound to the hero's qualifier field.When you pick “Other”, the “Power Qualifier” selector is removed from the form and a required free-form input control takes its place. This is the alternative “ngIf” approach that I mentioned.Click the “New” button to see how it works when Hero has no power.Show NotesAbstractControl: https://angular.io/api/forms/AbstractControlConnect with us:Aaron Frost - @aaronfrostJennifer Wadella - @likeOMGitsFEDAYBrian Love - @brian_loveWard Bell - @wardbell
Ward Bell and the podcast team discuss some of the common impediments related to Angular and how they can be overcome.
Sponsors Sentry use the code “devchat” for 2 months free on Sentry small plan Triplebyte offers a $1000 signing bonus CacheFly Host: Charles Max Wood Guest: Ward Bell Episode Summary In this episode of My Angular Story, Charles hosts Ward Bell, President/Co-Founder of IdeaBlade and Microsoft Regional Director in San Francisco. Ward is also a regular panelist on the podcast Adventures in Angular. Ward got interested in computers in high school through IBM’s high school partnership program. Upon graduation he got a job at the Cornell University Medical School as a programmer in New York City. While attending university and then graduate school, he worked as a consultant in the financial district as a programmer, coding in APL. He then decided to be a developer full time and started working for General Electric (GE). Working for GE gave Ward the opportunity to see the business side of developing and he learned that adding value to the business side as a developer was crucial. Ward then co-founded IdeaBlade, delivering development solutions to companies across many industries. During this time, he started working with Angular and later on led the Angular documentation effort. Links Ward's Twitter Ward's GitHub Real Talk JavaScript IBM P-TECH Weill Cornell Medicine - Cornell University The Movie Hidden Figures APL General Electric IdeaBlade AiA: NgRx Tips & Tricks with Adrian Fâciu AiA: NGRX Entities with Jesse Sanders AiA: NGRx with Mike Ryan https://devchat.tv/adv-in-angular/ https://www.facebook.com/DevChattv https://www.facebook.com/adventuresinangular https://twitter.com/angularpodcast Picks Ward Bell: Still Alice by Lisa Genova
Sponsors Sentry use the code “devchat” for 2 months free on Sentry small plan Triplebyte offers a $1000 signing bonus CacheFly Host: Charles Max Wood Guest: Ward Bell Episode Summary In this episode of My Angular Story, Charles hosts Ward Bell, President/Co-Founder of IdeaBlade and Microsoft Regional Director in San Francisco. Ward is also a regular panelist on the podcast Adventures in Angular. Ward got interested in computers in high school through IBM’s high school partnership program. Upon graduation he got a job at the Cornell University Medical School as a programmer in New York City. While attending university and then graduate school, he worked as a consultant in the financial district as a programmer, coding in APL. He then decided to be a developer full time and started working for General Electric (GE). Working for GE gave Ward the opportunity to see the business side of developing and he learned that adding value to the business side as a developer was crucial. Ward then co-founded IdeaBlade, delivering development solutions to companies across many industries. During this time, he started working with Angular and later on led the Angular documentation effort. Links Ward's Twitter Ward's GitHub Real Talk JavaScript IBM P-TECH Weill Cornell Medicine - Cornell University The Movie Hidden Figures APL General Electric IdeaBlade AiA: NgRx Tips & Tricks with Adrian Fâciu AiA: NGRX Entities with Jesse Sanders AiA: NGRx with Mike Ryan https://devchat.tv/adv-in-angular/ https://www.facebook.com/DevChattv https://www.facebook.com/adventuresinangular https://twitter.com/angularpodcast Picks Ward Bell: Still Alice by Lisa Genova
Sponsors Sentry use the code “devchat” for 2 months free on Sentry small plan Triplebyte offers a $1000 signing bonus CacheFly Host: Charles Max Wood Guest: Ward Bell Episode Summary In this episode of My Angular Story, Charles hosts Ward Bell, President/Co-Founder of IdeaBlade and Microsoft Regional Director in San Francisco. Ward is also a regular panelist on the podcast Adventures in Angular. Ward got interested in computers in high school through IBM’s high school partnership program. Upon graduation he got a job at the Cornell University Medical School as a programmer in New York City. While attending university and then graduate school, he worked as a consultant in the financial district as a programmer, coding in APL. He then decided to be a developer full time and started working for General Electric (GE). Working for GE gave Ward the opportunity to see the business side of developing and he learned that adding value to the business side as a developer was crucial. Ward then co-founded IdeaBlade, delivering development solutions to companies across many industries. During this time, he started working with Angular and later on led the Angular documentation effort. Links Ward's Twitter Ward's GitHub Real Talk JavaScript IBM P-TECH Weill Cornell Medicine - Cornell University The Movie Hidden Figures APL General Electric IdeaBlade AiA: NgRx Tips & Tricks with Adrian Fâciu AiA: NGRX Entities with Jesse Sanders AiA: NGRx with Mike Ryan https://devchat.tv/adv-in-angular/ https://www.facebook.com/DevChattv https://www.facebook.com/adventuresinangular https://twitter.com/angularpodcast Picks Ward Bell: Still Alice by Lisa Genova
Sponsors Sentry use the code “devchat” for 2 months free on Sentry small plan Angular Bootcamp TripleByte offers a $1000 signing bonus Cachefly Panel Ward Bell Shai Reznik Alyssa Nicoll Aaron Frost Joe Eames Summary Joe Eames introduces a fun panel only show, “The Show about Nothing”. The panel starts by sharing podcast behaviors that bother the members of the panel. Between anecdotes and humor, the panel shares what they are looking for in a guest to their podcasts. The panel engages in a playful debate about the pronunciation of “angular”. Shai Reznik introduces the more serious topic of state management. The jokes continue as the panel discusses the best way to handle state management and change detection. Links https://www.ng-conf.org/ https://www.facebook.com/adventuresinangular https://twitter.com/angularpodcast Picks Ward Bell https://netbasal.com/why-its-time-to-say-goodbye-to-angular-template-driven-forms-350c11d004b Shai Reznik Dad breast milk https://blog.angularindepth.com/the-three-pillars-of-angular-routing-angular-router-series-introduction-fb34e4e8758e Alyssa Nicoll https://www.angularconnect.com/ https://angulardenver.com/ Aaron Frost Power Watch 2 Joe Eames Swig The Mentalist
Sponsors Sentry use the code “devchat” for 2 months free on Sentry small plan Angular Bootcamp TripleByte offers a $1000 signing bonus Cachefly Panel Ward Bell Shai Reznik Alyssa Nicoll Aaron Frost Joe Eames Summary Joe Eames introduces a fun panel only show, “The Show about Nothing”. The panel starts by sharing podcast behaviors that bother the members of the panel. Between anecdotes and humor, the panel shares what they are looking for in a guest to their podcasts. The panel engages in a playful debate about the pronunciation of “angular”. Shai Reznik introduces the more serious topic of state management. The jokes continue as the panel discusses the best way to handle state management and change detection. Links https://www.ng-conf.org/ https://www.facebook.com/adventuresinangular https://twitter.com/angularpodcast Picks Ward Bell https://netbasal.com/why-its-time-to-say-goodbye-to-angular-template-driven-forms-350c11d004b Shai Reznik Dad breast milk https://blog.angularindepth.com/the-three-pillars-of-angular-routing-angular-router-series-introduction-fb34e4e8758e Alyssa Nicoll https://www.angularconnect.com/ https://angulardenver.com/ Aaron Frost Power Watch 2 Joe Eames Swig The Mentalist
Sponsors Sentry use the code “devchat” for 2 months free on Sentry small plan Angular Bootcamp TripleByte offers a $1000 signing bonus Cachefly Panel Ward Bell Shai Reznik Alyssa Nicoll Aaron Frost Joe Eames Summary Joe Eames introduces a fun panel only show, “The Show about Nothing”. The panel starts by sharing podcast behaviors that bother the members of the panel. Between anecdotes and humor, the panel shares what they are looking for in a guest to their podcasts. The panel engages in a playful debate about the pronunciation of “angular”. Shai Reznik introduces the more serious topic of state management. The jokes continue as the panel discusses the best way to handle state management and change detection. Links https://www.ng-conf.org/ https://www.facebook.com/adventuresinangular https://twitter.com/angularpodcast Picks Ward Bell https://netbasal.com/why-its-time-to-say-goodbye-to-angular-template-driven-forms-350c11d004b Shai Reznik Dad breast milk https://blog.angularindepth.com/the-three-pillars-of-angular-routing-angular-router-series-introduction-fb34e4e8758e Alyssa Nicoll https://www.angularconnect.com/ https://angulardenver.com/ Aaron Frost Power Watch 2 Joe Eames Swig The Mentalist
Sponsors Sentry use the code “devchat” for 2 months free on Sentry small plan Angular Bootcamp TripleByte offers a $1000 signing bonus Cachefly Panel Charles Max Wood Aaron Frost Joe Eames Joined by Special Guest: Michael Hartington Episode Summary Aaron Frost introduces a RxJS as a trend that is also a fundamental for angular. Aaron Frost shares his experience at ng-conf where the community was polled, and the topic most people wanted to learn was RxJS. Charles Max Wood brings up a previous podcast where Ward Bell predicts this trend, sharing the opinion that angular developers must know RxJS to be successful. The panels discusses the need to be reactive in Angular and the need to react to this trend by learning RxJS. Michael Hartington and Aaron Frost share an examples to show how RxJS simplifies the work.The panel discusses the switch from NgRx or RxJS, and a few things that might help someone looking to switch. Panelists share how they learned RxJS and how it helped them, even if they were reluctant to learn it. They finish by sharing resources they found helpful in learning RxJS. Links https://devchat.tv/adv-in-angular/rxjs-with-angular/ https://thinkster.io/ https://www.ng-conf.org/ https://twitter.com/Michael_Hladky https://rxjs.dev/operator-decision-tree https://github.com/MikeRyanDev https://twitter.com/mikeryandev https://github.com/johnlindquist https://staltz.com/blog.html https://blog.rangle.io/author/yuri/ https://github.com/bent Michael Pearsons Blog https://twitter.com/brandontroberts https://github.com/brandonroberts www.facebook.com/adventuresinangular https://twitter.com/angularpodcast Picks Michael Hartington Harmonquest Joe Eames Gravity Falls Dungeons and Dragons Charles Max Wood Podfest Go out and meet awesome people in the angular community Aaron Frost Captain Crunch - Crunch Berries
Sponsors Sentry use the code “devchat” for 2 months free on Sentry small plan Angular Bootcamp TripleByte offers a $1000 signing bonus Cachefly Panel Charles Max Wood Aaron Frost Joe Eames Joined by Special Guest: Michael Hartington Episode Summary Aaron Frost introduces a RxJS as a trend that is also a fundamental for angular. Aaron Frost shares his experience at ng-conf where the community was polled, and the topic most people wanted to learn was RxJS. Charles Max Wood brings up a previous podcast where Ward Bell predicts this trend, sharing the opinion that angular developers must know RxJS to be successful. The panels discusses the need to be reactive in Angular and the need to react to this trend by learning RxJS. Michael Hartington and Aaron Frost share an examples to show how RxJS simplifies the work.The panel discusses the switch from NgRx or RxJS, and a few things that might help someone looking to switch. Panelists share how they learned RxJS and how it helped them, even if they were reluctant to learn it. They finish by sharing resources they found helpful in learning RxJS. Links https://devchat.tv/adv-in-angular/rxjs-with-angular/ https://thinkster.io/ https://www.ng-conf.org/ https://twitter.com/Michael_Hladky https://rxjs.dev/operator-decision-tree https://github.com/MikeRyanDev https://twitter.com/mikeryandev https://github.com/johnlindquist https://staltz.com/blog.html https://blog.rangle.io/author/yuri/ https://github.com/bent Michael Pearsons Blog https://twitter.com/brandontroberts https://github.com/brandonroberts www.facebook.com/adventuresinangular https://twitter.com/angularpodcast Picks Michael Hartington Harmonquest Joe Eames Gravity Falls Dungeons and Dragons Charles Max Wood Podfest Go out and meet awesome people in the angular community Aaron Frost Captain Crunch - Crunch Berries
Sponsors Sentry use the code “devchat” for 2 months free on Sentry small plan Angular Bootcamp TripleByte offers a $1000 signing bonus Cachefly Panel Charles Max Wood Aaron Frost Joe Eames Joined by Special Guest: Michael Hartington Episode Summary Aaron Frost introduces a RxJS as a trend that is also a fundamental for angular. Aaron Frost shares his experience at ng-conf where the community was polled, and the topic most people wanted to learn was RxJS. Charles Max Wood brings up a previous podcast where Ward Bell predicts this trend, sharing the opinion that angular developers must know RxJS to be successful. The panels discusses the need to be reactive in Angular and the need to react to this trend by learning RxJS. Michael Hartington and Aaron Frost share an examples to show how RxJS simplifies the work.The panel discusses the switch from NgRx or RxJS, and a few things that might help someone looking to switch. Panelists share how they learned RxJS and how it helped them, even if they were reluctant to learn it. They finish by sharing resources they found helpful in learning RxJS. Links https://devchat.tv/adv-in-angular/rxjs-with-angular/ https://thinkster.io/ https://www.ng-conf.org/ https://twitter.com/Michael_Hladky https://rxjs.dev/operator-decision-tree https://github.com/MikeRyanDev https://twitter.com/mikeryandev https://github.com/johnlindquist https://staltz.com/blog.html https://blog.rangle.io/author/yuri/ https://github.com/bent Michael Pearsons Blog https://twitter.com/brandontroberts https://github.com/brandonroberts www.facebook.com/adventuresinangular https://twitter.com/angularpodcast Picks Michael Hartington Harmonquest Joe Eames Gravity Falls Dungeons and Dragons Charles Max Wood Podfest Go out and meet awesome people in the angular community Aaron Frost Captain Crunch - Crunch Berries
Sponsors Sentry use the code “devchat” for $100 credit Angular Bootcamp TripleByte Panel: Charles Max Wood Joe Eames Ward Bell John Papa Special Guest: Eyas Sharaiha Notes: This episode of Adventures in Angular has the panelists speaking with Eyas Sharaiha, who is a software engineer working for Google, working primarily with Google Maps . Eyas mostly does back end and infrastructure work, which gives him an interesting view of Angular. The panelists and Eyas discuss his article Data and Page Content refresh Patterns in Angular. Eyas talks about the most common mistakes he sees in using Angular, namely transforming observables and then subscribing to them too early or too late, and putting certain kinds of data transformations in places where they end up making the code a lot less clear. His approach in his articles is to walk readers through with trial and error, rather than laying down some sort of law. Eyas lays out how he deals with changes in Angular, naming the three best things to do to use Angular and RXJS correctly, emphasizing the importance of looking for side effects. His rule of thumb is that if the observable does anything other than the data it is admitting, then something is probably wrong. The panelists go on to discuss the usefulness of observables. The ask Eyas what the most common code smells he finds in angular apps that frequenly use observables and how he would correct people. Eyas again emphasizes side effects or mutation as a sign of a deeper problem, cautions people against bending over backwards to use an observable, and discusses the importance of unpacking an observable at the correct time. He encourages listeners to try out the ergonomics of AsyncPipe to combine observables where possible, and the importance of using observables correctly. The shift in Angular becoming more about learning RXJS and non-Angular things than it is about Angular is discussed and length, as well as the difficulty to relate Angular to other things. Eyas feels that this trend has taken away some of the magic of Angular. In fact, NG Conf’s annual survey revealed that the top struggles are RXJS and architectural guidance. The panelists emphasize that programmers should ask themselves why they are doing things this particular way, and to seek creative solutions using different types of programming, such as procedural, reactive, idiomatic, and object oriented programming. Terms: Observables RxJs Async pipe TypeScript Reactive programming Inheritance NGRX Picks: Joe Eames Talk List over at NG Conf Five Minute Marvel John Papa http://realtalkjs.com Ward Bell https://auth0.com/blog/ngrx-facades-pros-and-cons/ Charles Max Wood http://libsyn.com Purple seat pad vrbo.com Eyas Sharaiha Schema-DTS – TypeScript library for Schema.org Bad Blood
Sponsors Sentry use the code “devchat” for $100 credit Angular Bootcamp TripleByte Panel: Charles Max Wood Joe Eames Ward Bell John Papa Special Guest: Eyas Sharaiha Notes: This episode of Adventures in Angular has the panelists speaking with Eyas Sharaiha, who is a software engineer working for Google, working primarily with Google Maps . Eyas mostly does back end and infrastructure work, which gives him an interesting view of Angular. The panelists and Eyas discuss his article Data and Page Content refresh Patterns in Angular. Eyas talks about the most common mistakes he sees in using Angular, namely transforming observables and then subscribing to them too early or too late, and putting certain kinds of data transformations in places where they end up making the code a lot less clear. His approach in his articles is to walk readers through with trial and error, rather than laying down some sort of law. Eyas lays out how he deals with changes in Angular, naming the three best things to do to use Angular and RXJS correctly, emphasizing the importance of looking for side effects. His rule of thumb is that if the observable does anything other than the data it is admitting, then something is probably wrong. The panelists go on to discuss the usefulness of observables. The ask Eyas what the most common code smells he finds in angular apps that frequenly use observables and how he would correct people. Eyas again emphasizes side effects or mutation as a sign of a deeper problem, cautions people against bending over backwards to use an observable, and discusses the importance of unpacking an observable at the correct time. He encourages listeners to try out the ergonomics of AsyncPipe to combine observables where possible, and the importance of using observables correctly. The shift in Angular becoming more about learning RXJS and non-Angular things than it is about Angular is discussed and length, as well as the difficulty to relate Angular to other things. Eyas feels that this trend has taken away some of the magic of Angular. In fact, NG Conf’s annual survey revealed that the top struggles are RXJS and architectural guidance. The panelists emphasize that programmers should ask themselves why they are doing things this particular way, and to seek creative solutions using different types of programming, such as procedural, reactive, idiomatic, and object oriented programming. Terms: Observables RxJs Async pipe TypeScript Reactive programming Inheritance NGRX Picks: Joe Eames Talk List over at NG Conf Five Minute Marvel John Papa http://realtalkjs.com Ward Bell https://auth0.com/blog/ngrx-facades-pros-and-cons/ Charles Max Wood http://libsyn.com Purple seat pad vrbo.com Eyas Sharaiha Schema-DTS – TypeScript library for Schema.org Bad Blood
Sponsors Sentry use the code “devchat” for $100 credit Angular Bootcamp TripleByte Panel: Charles Max Wood Joe Eames Ward Bell John Papa Special Guest: Eyas Sharaiha Notes: This episode of Adventures in Angular has the panelists speaking with Eyas Sharaiha, who is a software engineer working for Google, working primarily with Google Maps . Eyas mostly does back end and infrastructure work, which gives him an interesting view of Angular. The panelists and Eyas discuss his article Data and Page Content refresh Patterns in Angular. Eyas talks about the most common mistakes he sees in using Angular, namely transforming observables and then subscribing to them too early or too late, and putting certain kinds of data transformations in places where they end up making the code a lot less clear. His approach in his articles is to walk readers through with trial and error, rather than laying down some sort of law. Eyas lays out how he deals with changes in Angular, naming the three best things to do to use Angular and RXJS correctly, emphasizing the importance of looking for side effects. His rule of thumb is that if the observable does anything other than the data it is admitting, then something is probably wrong. The panelists go on to discuss the usefulness of observables. The ask Eyas what the most common code smells he finds in angular apps that frequenly use observables and how he would correct people. Eyas again emphasizes side effects or mutation as a sign of a deeper problem, cautions people against bending over backwards to use an observable, and discusses the importance of unpacking an observable at the correct time. He encourages listeners to try out the ergonomics of AsyncPipe to combine observables where possible, and the importance of using observables correctly. The shift in Angular becoming more about learning RXJS and non-Angular things than it is about Angular is discussed and length, as well as the difficulty to relate Angular to other things. Eyas feels that this trend has taken away some of the magic of Angular. In fact, NG Conf’s annual survey revealed that the top struggles are RXJS and architectural guidance. The panelists emphasize that programmers should ask themselves why they are doing things this particular way, and to seek creative solutions using different types of programming, such as procedural, reactive, idiomatic, and object oriented programming. Terms: Observables RxJs Async pipe TypeScript Reactive programming Inheritance NGRX Picks: Joe Eames Talk List over at NG Conf Five Minute Marvel John Papa http://realtalkjs.com Ward Bell https://auth0.com/blog/ngrx-facades-pros-and-cons/ Charles Max Wood http://libsyn.com Purple seat pad vrbo.com Eyas Sharaiha Schema-DTS – TypeScript library for Schema.org Bad Blood
Sponsors Sentry use the code “devchat” for $100 credit Angular Bootcamp TripleByte Cachefly Panel Joe Eames Aaron Frost Alyssa Nicoll Ward Bell Joined by Special Guest: Ben Nadel Summary Ben Nadel introduces the irrational demonization of two-way data-binding in Angular as a topic for the panel. The panel discusses the survey that put Angular in a poor light and favors React; acknowledging that a fair survey is hard to find. The panel considers how technologies that are now out of favor changed the web. The panel compares Angular to other frameworks and considers what to they can do about other frameworks. Ward Bell invites the panel to try other frameworks and find what is beautiful, not just ignore them or diss unknown frameworks. Ben talks about his companies move away from Angular and the opportunity this presents for him to learn about other frameworks. Links https://www.invisionapp.com https://www.bennadel.com/ https://github.com/BenNadel https://twitter.com/BenNadel https://www.facebook.com/adventuresinangular/ https://twitter.com/angularpodcast Picks Joe Eames https://www.ng-conf.org/ https://elm-lang.org/ Felt https://thinkster.io/ Aaron Frost https://blog.angularindepth.com/connecting-the-dots-where-hard-work-and-dreams-can-lead-you-2e8ef44096b Ward Bell Learn how to sharpen a pencil Ben Nadel http://icon.no.sh/ https://www.netlify.com/ The Marvelous Mrs. Maisel http://freakonomics.com/ https://www.npr.org/podcasts/510308/hidden-brain
Sponsors Sentry use the code “devchat” for $100 credit Angular Bootcamp TripleByte Cachefly Panel Joe Eames Aaron Frost Alyssa Nicoll Ward Bell Joined by Special Guest: Ben Nadel Summary Ben Nadel introduces the irrational demonization of two-way data-binding in Angular as a topic for the panel. The panel discusses the survey that put Angular in a poor light and favors React; acknowledging that a fair survey is hard to find. The panel considers how technologies that are now out of favor changed the web. The panel compares Angular to other frameworks and considers what to they can do about other frameworks. Ward Bell invites the panel to try other frameworks and find what is beautiful, not just ignore them or diss unknown frameworks. Ben talks about his companies move away from Angular and the opportunity this presents for him to learn about other frameworks. Links https://www.invisionapp.com https://www.bennadel.com/ https://github.com/BenNadel https://twitter.com/BenNadel https://www.facebook.com/adventuresinangular/ https://twitter.com/angularpodcast Picks Joe Eames https://www.ng-conf.org/ https://elm-lang.org/ Felt https://thinkster.io/ Aaron Frost https://blog.angularindepth.com/connecting-the-dots-where-hard-work-and-dreams-can-lead-you-2e8ef44096b Ward Bell Learn how to sharpen a pencil Ben Nadel http://icon.no.sh/ https://www.netlify.com/ The Marvelous Mrs. Maisel http://freakonomics.com/ https://www.npr.org/podcasts/510308/hidden-brain
Sponsors Sentry use the code “devchat” for $100 credit Angular Bootcamp TripleByte Cachefly Panel Joe Eames Aaron Frost Alyssa Nicoll Ward Bell Joined by Special Guest: Ben Nadel Summary Ben Nadel introduces the irrational demonization of two-way data-binding in Angular as a topic for the panel. The panel discusses the survey that put Angular in a poor light and favors React; acknowledging that a fair survey is hard to find. The panel considers how technologies that are now out of favor changed the web. The panel compares Angular to other frameworks and considers what to they can do about other frameworks. Ward Bell invites the panel to try other frameworks and find what is beautiful, not just ignore them or diss unknown frameworks. Ben talks about his companies move away from Angular and the opportunity this presents for him to learn about other frameworks. Links https://www.invisionapp.com https://www.bennadel.com/ https://github.com/BenNadel https://twitter.com/BenNadel https://www.facebook.com/adventuresinangular/ https://twitter.com/angularpodcast Picks Joe Eames https://www.ng-conf.org/ https://elm-lang.org/ Felt https://thinkster.io/ Aaron Frost https://blog.angularindepth.com/connecting-the-dots-where-hard-work-and-dreams-can-lead-you-2e8ef44096b Ward Bell Learn how to sharpen a pencil Ben Nadel http://icon.no.sh/ https://www.netlify.com/ The Marvelous Mrs. Maisel http://freakonomics.com/ https://www.npr.org/podcasts/510308/hidden-brain
Sponsors Sentry use the code "devchat" for $100 credit Angular Bootcamp TripleByte Panel Charles Max Wood John Papa Ward Bell Joined by Special Guests: Uri Shaked and Netta Bondi Episode Summary Netta is a senior web developer at a startup called Reali, although her degree is in social work. She also co-founded the largest community of women in research and Development in Israel. Netta and Uri are here to talk more about the talk they gave at FrontEnd Con about Angular Ivy and React Fiber. They share how this talk came to be. Uri and Netta compare Angular Ivy and React Fiber, which take different approaches to managing the cycle of code. The panel discusses whether or not there is an advantage to digging into the framework. Netta and Uri talk about some of the processes they explored while investigating Angular Ivy and React Fiber. They share techniques for not getting lost in the source code and delve into some of the differences between Angular Ivy and React Fiber. Through their investigations, they learned that the primary difference between the two is in the event delegation pattern. They advise that when deciding which technology to use, companies should consider which one will be easier to hire new employees for. The panel discusses whether or not big tree frameworks have become a commodity. Most new frameworks focus on making builds smaller and faster, but they would like new frameworks to have more benefits than just speed. The show is finished by Uri and Netta sharing how to track features down in Angular Ivy and React Fiber. Links Angular Ivy React Fiber Virtual DOM Incremental DOM Ajax jQuery Lin Clark - A Cartoon Intro to Fiber - React Conf 2017 Netta Bondy & Uri Shaked - React Fiber vs. Angular Ivy / FRONTEND CON 2018 Follow DevChat on Facebook and Twitter Picks Charles Max Wood: Package Thief vs. Glitter Bomb Trap Help Charles move Devchat from WordPress to Eleventy and get an hour of coaching. Write show notes for 3 episodes and tag it, Charles will do an hour of coaching with you. John Papa: NG Atlanta Ward Bell: BlacKkKlansmen Uri Shaked: NG Atlanta Why We Sleep Uri is on Twitter as @UriShaked and github (urish) Netta Bondi: Hassan Minaj: Homecoming King Iliza Shlesinger: Elder Millennial Netta is on Medium and Twitter (@_bondit_)
Sponsors Sentry use the code "devchat" for $100 credit Angular Bootcamp TripleByte Panel Charles Max Wood John Papa Ward Bell Joined by Special Guests: Uri Shaked and Netta Bondi Episode Summary Netta is a senior web developer at a startup called Reali, although her degree is in social work. She also co-founded the largest community of women in research and Development in Israel. Netta and Uri are here to talk more about the talk they gave at FrontEnd Con about Angular Ivy and React Fiber. They share how this talk came to be. Uri and Netta compare Angular Ivy and React Fiber, which take different approaches to managing the cycle of code. The panel discusses whether or not there is an advantage to digging into the framework. Netta and Uri talk about some of the processes they explored while investigating Angular Ivy and React Fiber. They share techniques for not getting lost in the source code and delve into some of the differences between Angular Ivy and React Fiber. Through their investigations, they learned that the primary difference between the two is in the event delegation pattern. They advise that when deciding which technology to use, companies should consider which one will be easier to hire new employees for. The panel discusses whether or not big tree frameworks have become a commodity. Most new frameworks focus on making builds smaller and faster, but they would like new frameworks to have more benefits than just speed. The show is finished by Uri and Netta sharing how to track features down in Angular Ivy and React Fiber. Links Angular Ivy React Fiber Virtual DOM Incremental DOM Ajax jQuery Lin Clark - A Cartoon Intro to Fiber - React Conf 2017 Netta Bondy & Uri Shaked - React Fiber vs. Angular Ivy / FRONTEND CON 2018 Follow DevChat on Facebook and Twitter Picks Charles Max Wood: Package Thief vs. Glitter Bomb Trap Help Charles move Devchat from WordPress to Eleventy and get an hour of coaching. Write show notes for 3 episodes and tag it, Charles will do an hour of coaching with you. John Papa: NG Atlanta Ward Bell: BlacKkKlansmen Uri Shaked: NG Atlanta Why We Sleep Uri is on Twitter as @UriShaked and github (urish) Netta Bondi: Hassan Minaj: Homecoming King Iliza Shlesinger: Elder Millennial Netta is on Medium and Twitter (@_bondit_)
Sponsors Sentry use the code "devchat" for $100 credit Angular Bootcamp TripleByte Panel Charles Max Wood John Papa Ward Bell Joined by Special Guests: Uri Shaked and Netta Bondi Episode Summary Netta is a senior web developer at a startup called Reali, although her degree is in social work. She also co-founded the largest community of women in research and Development in Israel. Netta and Uri are here to talk more about the talk they gave at FrontEnd Con about Angular Ivy and React Fiber. They share how this talk came to be. Uri and Netta compare Angular Ivy and React Fiber, which take different approaches to managing the cycle of code. The panel discusses whether or not there is an advantage to digging into the framework. Netta and Uri talk about some of the processes they explored while investigating Angular Ivy and React Fiber. They share techniques for not getting lost in the source code and delve into some of the differences between Angular Ivy and React Fiber. Through their investigations, they learned that the primary difference between the two is in the event delegation pattern. They advise that when deciding which technology to use, companies should consider which one will be easier to hire new employees for. The panel discusses whether or not big tree frameworks have become a commodity. Most new frameworks focus on making builds smaller and faster, but they would like new frameworks to have more benefits than just speed. The show is finished by Uri and Netta sharing how to track features down in Angular Ivy and React Fiber. Links Angular Ivy React Fiber Virtual DOM Incremental DOM Ajax jQuery Lin Clark - A Cartoon Intro to Fiber - React Conf 2017 Netta Bondy & Uri Shaked - React Fiber vs. Angular Ivy / FRONTEND CON 2018 Follow DevChat on Facebook and Twitter Picks Charles Max Wood: Package Thief vs. Glitter Bomb Trap Help Charles move Devchat from WordPress to Eleventy and get an hour of coaching. Write show notes for 3 episodes and tag it, Charles will do an hour of coaching with you. John Papa: NG Atlanta Ward Bell: BlacKkKlansmen Uri Shaked: NG Atlanta Why We Sleep Uri is on Twitter as @UriShaked and github (urish) Netta Bondi: Hassan Minaj: Homecoming King Iliza Shlesinger: Elder Millennial Netta is on Medium and Twitter (@_bondit_)
Recording date: 2018-11-29 John Papa @John_Papa Ward Bell @WardBell Resources: Front End Happy Hour Ryan Burgess - Testing into a Better User Experience Netflix Techblog AB Testing Optimizely Google Analytics Someone to follow: Code Like a Girl The Philosophy of React Vue Vixens NG Girls @Netflix UI Engineers CodeLikeaGirl.org Timejumps 00:56 Mailbag question 06:34 Guest introduction 08:32 Have you screwed up the UI? 09:55 How do we A/B test UI changes well? 13:14 How do you decide who to test? 15:38 Defining light and dark vs a/b 20:45 Sponsor: Progress 21:21 Does Netflix A/B test during a show? 23:23 How big should a feature be to A/B test? 27:38 Are there seperate SPAs for signups, members, and streaming? 29:34 How do you make A/B testing actionable? 33:11 What tools do you recommend for A/B testing? 35:00 Sponsor: 36:05 How do I get the right metric? 37:55 UI Don't's 39:18 Someone to follow Sponsored by: NativeScript
Recording date: 2018-11-29 John Papa @John_Papa Ward Bell @WardBell Chris Fritz @ChrisvFritz Resources: Views on Vue podcast Unproductive code reviews Vue Enterprise boilerplate Someone to follow: Terry Gross Conversation advice Phil Hack Sarah Drasner's Design for Developers course Ben Hong Timejumps 1:00 Introduction of Chris & mailbag question on how to do code review 9:00 Code reviews with employees vs outside contractors/consultants 15:00 How do you adjust your communication for different people? 17:00 Sponsor: Nativescript 18:00 Styleguide for review 24:20 Having a process with automation to catch things. 26:50 What about comments in code? 32:40 Questions to ask during code reviews. 33:45 Sponsor: Ideablade 35:05 How do internal docs help? 39:00 VS Code snippets 41:50 Running too fast while trying to solve problems creates more problems. 46:00 Someone to follow
Recording date: 2018-11-29 John Papa https://twitter.com/john_papa Ward Bell https://twitter.com/wardbell Dan Wahlin https://twitter.com/danwahlin Ives van Hoorne https://twitter.com/compuives Resources: CodeSandbox https://codesandbox.io Elixr https://elixir-lang.org/ Erlang https://www.erlang.org/ Reactjs https://reactjs.org/ NPM https://www.npmjs.com/ Serverless https://martinfowler.com/articles/serverless.html Unpkg https://unpkg.com/ Pupeteer https://github.com/GoogleChrome/puppeteer Kubernetes https://kubernetes.io/ Redux https://redux.js.org/ Cerebral https://github.com/cerebral/cerebral CodePen https://codepen.io Monaco https://github.com/Microsoft/monaco-editor Code https://code.visualstudio.com/ Typescript https://www.typescriptlang.org/ Flow https://flow.org/en/docs/frameworks/react/ Someone to follow: Netanel Basal https://netbasal.com Ana Cidre https://twitter.com/AnaCidre_ Kyle Matthews https://twitter.com/@kylemathews / Gatsbyjs https://twitter.com/gatsbyjs Timejumps 1:00 Mailbag question: Will VSCode editor replace the current editor? 3:01 What is Codesandbox and how did you get into it? 6:30 What kinds of challenges did you face when launching Codesandbox? 10:00 What are you using for serverless functions? 13:10 Why use serverless? 16:10 Sponsor: Nativescript 17:15 Moving away from serverless for some things? 23:10 What do you think of suspense or hooks? 24:20 Why does the world need Codesandbox? 28:00 What does Codesandbox use for linting? 31:00 Sponsor: IdeaBlade https://www.ideablade.com 32:30 What is Codesandbox written in? 35:20 How are the users of Codesandbox using types? 36:20 How do you keep up with the latest versions of software? 41:00 How do you handle concurrent users? 42:10 Someone to follow
Recording date: 2018-11-20 John Papa https://twitter.com/john_papa Ward Bell https://twitter.com/wardbell Dan Wahlin https://twitter.com/danwahlin Nathan Walker https://twitter.com/wwwalkerrun Resources: NativeScript https://www.nativescript.org/ Swift https://developer.apple.com/swift/ Ionic https://ionicframework.com/ Electron https://electronjs.org/ React https://reactjs.org Vue https://vuejs.org/ Nathan talks about "Portable North Pole" app https://www.portablenorthpole.com/ XPlat https://github.com/nstudio/xplat Nrwl https://nrwl.io/ TypeScript https://www.typescriptlang.org/ Progress https://www.progress.com/products Someone to follow NativeScript https://www.nativescript.org/ Bram Borggreve https://twitter.com/beeman_nl
Recording date: 2018-11-13 John Papa https://twitter.com/john_papa Ward Bell https://twitter.com/wardbell Dan Wahlin https://twitter.com/danwahlin Jen Luker https://twitter.com/knitcodemonkey Resources: section 508 https://webaim.org/standards/508/checklist The a11y project https://a11yproject.com/ Jaws https://www.freedomscientific.com/Products/Blindness/JAWS ARIA https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA The https://www.starbucks.com/careers/ Starbucks career site WCAG https://www.w3.org/TR/WCAG20/ Jen helped author https://www.npmjs.com/package/eslint-plugin-jsx-a11y Husky https://www.npmjs.com/package/husky Google A11y https://developers.google.com/web/fundamentals/accessibility/ Lighthouse https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en Azure text to speech https://azure.microsoft.com/en-us/services/cognitive-services/text-to-speech/ amazon polly https://aws.amazon.com/polly/ Amazon Polly on Dan's blog: https://blog.codewithdan.com/8-tips-for-maximizing-your-productivity/ *Someone to follow * Gleb Bahmutov https://twitter.com/bahmutov Tejas Kumar https://twitter.com/TejasKumar_ Rick Strahl https://twitter.com/RickStrahl Transcript { credit to Jen Luker } (Intro Music) 0:00:06.6 Voiceover Welcome to Real Talk JavaScript, the weekly talk show with advice and insight into the technologies and practices currently being used to build web applications in the real world. Each week John Papa and Ward Bell talk to industry experts about their experiences writing, deploying and maintaining web applications in HTML, CSS and JavaScript. And now, here are your hosts, John and Ward. 0:00:40.0 John Papa Welcome back to Real Talk JavaScript, this is Episode 11: Accessibility in JavaScript Apps and this week I’ve got my co-host, Dan Wahlin. How’s it going, Dan? 0:00:48.8 Dan Wahlin Going great, John. 0:00:49.9 John Papa And Dan, today we have a special guest of Jen Luker. How’re you doing, Jen? 0:00:54.6 Jen Luker Doing pretty well today. How are you? 0:00:56.0 John Papa We’re doing pretty good, thank you very much. Jen is a Senior Software Engineer at Formidable, BookBytes Podcast co-host, RxJS Learning Team member, and eslint-plugin-react-native-a11y core contributor. Jen has spent a majority of her career as a full stack developer but has a particular fondness for frontend technologies, thus why she’s here today. And she trains others in ReactJS and Accessibility, and enjoys removing obstacles that slow down productivity and loves optimizing webpack builds. When she’s not finding solutions or mentoring others, her spare time is spent spinning yarn from raw wool and knitting. She’s even better known to 3D print her own tools for the job. 0:01:33.3 Dan Wahlin Nice! 0:01:34.0 John Papa Welcome to the show, Jen. 0:01:35.2 Jen Luker Thank you! 0:01:36.0 John Papa There’s a lot in there. I mean, you’re not- 0:01:37.9 Jen Luker Yeah… 0:01:37.9 John Papa Just a JavaScript coder with ReactJS. It looks like you do a lot of teaching, and knitting! That’s pretty cool. 0:01:44.1 Jen Luker Haha, it’s… I like to say that I’m a knitter first and then a programmer second. So, it’s definitely a large part of my life. 0:01:53.3 John Papa You mean you do something besides coding all day? 0:01:56.1 Jen Luker It happens. 0:01:56.9 John Papa & Dan Wahlin (laughing) 0:01:58.9 Dan Wahlin You know, I have heard more and more people with knitting now. I, like, I hear that, I also do a lot of training, and I hear that all the time now, so it must be a big upcoming... trend I guess, I don’t know. 0:02:11.5 Jen Luker I think it has a little more to do with the fact that what we do as developers is often fleeting. It’s something that exists online, it’s not something tangible. Knitting is a programming language that sticks around long enough for you to wear it. So it’s- 0:02:28.9 John Papa I see. 0:02:30.4 Jen Luker Definitely caters to those that need that tangible aspect in their lives. But one of the coolest things I’ve seen knitting be used for, not just, you know, cryptography World War II, but also things like using it as a programming simulator for people that don’t have access to computers, such as people in Third World countries. So it’s definitely something that caters to the mind of programmers. 0:02:56.6 Dan Wahlin Interesting. Yeah, I’ve… Some of the people, too, have also mentioned it just helps them, it’s very relaxing they said. I don’t know how to knit, I haven’t tried it, but it looks fun. 0:03:04.3 John Papa So now, when we see Dan at his next conference, right before his talk, with a ball of yarn and some needles, we’ll know exactly why that happened. 0:03:10.7 Dan Wahlin Yeah. I’ll say, “Jen inspired me!” 0:03:13.0 John Papa & Dan Wahlin (laughing) 0:03:14.1 Jen Luker Well, you do know that at React Conf they actually had a fiberarts circle that I ran, so I ended up teaching quite a few people to knit, and crochet, and spin at that conference. So- 0:03:24.2 Dan Wahlin That’s so cool! 0:03:25.2 Jen Luker It is a possibility. 0:03:26.3 John Papa Huh! 0:03:26.8 Dan Wahlin There you go. 0:03:27.4 John Papa That is so cool. Yeah, I think we all have different ways of dealing with non programming mindsets. Like, what do you do when you’re not coding? And some people exercise, some people meditate, some people draw, some people play music, some people knit! So, I think it’s great to have something to kind of work different parts of your brain. 0:03:47.0 Jen Luker Definitely. 0:03:47.7 John Papa Hey, Dan! You had a question for us to kick things off about accessibility. 0:03:50.7 Dan Wahlin Yeah! So, I think we hear a lot… I used to work, one of my first jobs out of college was at a government agency and so there it was kind of required to learn about section 508 and things. But with corporations and with a lot of the developers I work with, I’ll have to admit I think we’re a little more in the dark on… 0:04:11.2 What are some of the ways, like, if I were to say, “Hey Jen, what are the key ways from a high level that I could add some accessibility things and like, who can I help with that?” Because I think a lot of us, we think, “Oh, well I just add a title to an image and call it a day.” 0:04:28.0 Jen Luker Mm-hmm (affirmative). 0:04:28.5 Dan Wahlin And I suspect there’s a lot more to it than that. 0:04:30.6 Jen Luker There is a lot more to it but there’s different ways of approaching accessibility on the web. One of the ways is technologically, which is oftentimes what developers deal with, but that’s only 30-50% of the problems you’re going to find in accessibility issues. The other half is going to be content and context and verbiage and language and ways that you say things that make it easier for people that have different disabilities, like neurological issues, or language barriers from interacting with the content on the site. 0:05:08.5 To deal with the technological side though, I tend to point people towards the aXe, Chrome, and Firefox extensions to begin with because it not only runs like, a technological audit on your site, but it also gives you more information. There’s always links that explain why there’s a problem, why the types of people that you’re focusing when you fix an issue, and different ways that you can fix an issue. So it’s a really great educational tool for just getting started. 0:05:43.6 John Papa Excellent. 0:05:44.2 Dan Wahlin Yeah, see, you already hit on a couple things like, you mentioned neurologically how maybe people interpret or have the context for different text. And I actually have a son with some disabilities so I’m very sensitive to this whole, you know, concept. It’s amazing how when you’re not around it, you just don’t think about it. But when you’re around it, it becomes, you know, your whole world. A big deal. So, you know, that’s when I hadn’t ever heard of- Can you tell me a little bit more about that? Is that related to the context you put into, like, the site, then, that helps them understand it better? Or how’s that work? 0:06:18.5 Jen Luker It is. Something that they recommend, or things that I’ve seen regarding recommendations for the level of content does vary depending on who your audience is. If you are a technical journal then chances are you’re going to be catering to a much more technical audience. However, if you’re a generic website you may want to keep your verbiage as low-level as possible, like anything between a third grade level to a high school level education, to allow for people to better understand the words that you’re actually putting on a page, and what the words are trying to tell you. 0:07:00.0 Like, you’ve got one side where you have people with ADHD that is not going to make it to the end of a 6-paragraph description of what it is you’re supposed to do. And then you have people on the other side of the spectrum that really need step-by-step instructions of what it is they need to do to get through your form. So trying to find that happy medium, or trying to find a way of giving a TLDR and then a longer context for different sides of that issue, is also something you may want to look at. 0:07:31.1 Dan Wahlin Interesting, yeah. I’ll have to admit that’s something that I haven’t really, you know, you mentioned third grade through, maybe, high school level and I think, as developers, we, especially if we’re in charge of putting some of the content, you know, out there ourselves, that’s something that I don’t think I’ve really thought through as to, you know, who’s my target that’s going to be reading this? As far as, you know, you think of, “I know these words and I’m sure everyone else will know these words.” But it sounds like you’re a lot better off if you can kind of reign that in a little bit, make it more focused. 0:08:02.3 Jen Luker Something that I’ve found that’s extremely different for even a dev when they’re onboarding into a new company is learning the names of things, and learning the acronyms for things. So if you’re using customized names for your products or your processes or you’re using acronyms, then you’re already losing part of your audience who just doesn’t understand what those things mean. 0:08:28.6 John Papa So, I think that’s a great point. This isn’t just for accessibility for, even for people like, let’s just say vision-impaired on one side. This is for anybody who doesn’t necessarily know your vernacular. 0:08:38.8 Jen Luker Exactly. 0:08:39.8 John Papa You go to a new company, what’s the first thing they do? “Hey, today we’re going to use the TLC with the EBY and then we’re going to talk with the XJ Bots.” And you’re like, “...What does any of that actually mean?” 0:08:49.4 Jen Luker I recently onboarded with a company and someone was very nice enough to put together a cheat sheet of acronyms for me and it was five pages long. 0:08:57.5 John Papa (laughs) 0:08:58.0 Dan Wahlin Wow! (laughs) 0:08:59.0 John Papa When I went to Disney one of my first things they did, like my first week there, was I got a book like that, too. 0:09:05.3 Jen Luker Mm-hmm (affirmative). 0:09:05.8 John Papa And the funny thing at Disney was the every TLA, which is a three-letter acronym which is kind of funny, the first letter of all of them begin with D for "Disney". Which really- 0:09:14.3 Jen Luker Yeah. 0:09:13.8 John Papa Only left two letters for all the rest. (laughs) 0:09:16.8 ALL (laughing) 0:09:17.9 John Papa I don't know if it's changed since then though. (laughs) But let's, let's start back. So on that same note, there's something I've seen a lot of over the years, and when I first encountered this, it's not an acronym but it's an abbreviation, I didn't know what the heck it meant. But, and maybe there's other people in the same boat so I wanted to talk about it with you. A-11-Y. 0:09:39.1 Jen Luker Yes. 0:09:40.0 John Papa Can you explain what that is and why people see that? 0:09:42.6 Jen Luker So back in the days of Twitter when there were only 140 characters, writing out a really long word like "accessibility" which is 13 letter long, took up a lot of space. So due to Twitter and their awesome audience, they shortened it to A11Y which is A-, the first letter in "accessibility", 11 letters, and then Y-, the last letter in "accessibility." You see the same thing with "Kubernetes" with K8S, or "internationalization" which is I18N. So any of those really long words end up getting shortened to first letter, number of characters in between first and last letter, and last letter. 0:10:26.0 John Papa Yeah, that's... that's kind of funny, you know? Once I realized that, I started going, "You know, I've been using I18N for years and I didn't know why it was called that." 0:10:33.1 Jen Luker Mm-hmm (affirmative). 0:10:33.2 John Papa Until I discovered it through A11Y, 'cause we, our nickname for it when we were talking about it was "ally". 0:10:39.0 Jen Luker Which I think is highly appropriate. 0:10:40.7 John Papa Yeah, yep. It kind of is a... 0:10:42.8 Dan Wahlin It fits it. 0:10:43.6 John Papa It kinda worked for us, too. 0:10:44.8 Dan Wahlin Yeah. 0:10:45.3 John Papa So, Dan, you're really D1N and Jen, you're J1n. It doesn't really work for our short first names, does it? 0:10:50.8 Dan Wahlin & Jen Luker (laughing) 0:10:52.0 Jen Luker Well, Jen is already shortened. 0:10:53.9 John Papa Yeah, yeah. It doesn't really help. What if your name is Al? What do you do? You only have two letters. 0:10:58.4 Dan Wahlin Yeah, there you're out of luck. 0:10:59.3 Jen Luker First and last. 0:11:01.0 John Papa A0L I guess? AOL! There you go! That's what AOL stood for. 0:11:05.4 Dan Wahlin Al. 0:11:06.4 John Papa The secret has been revealed, right here. 0:11:07.5 Dan Wahlin Who knew? 0:11:08.3 Jen Luker (laughs) 0:11:09.0 John Papa (laughs) So accessibility. One of the things I think that was really eye-opening to me was understanding how many people this actually affects. When I first started getting into it many years ago on some large projects the things that were introduced to me were,"Well, we're doing this because there are, you know, millions of people who are affected by this and we're really trying to make the web more accessible." You know, it sounds like a grandiose thing, but that was true. We were trying to make our websites more accessible to all these people who either couldn't use our websites, or they could but with much difficulty. 0:11:43.0 Jen Luker Right. 0:11:43.6 John Papa Now, what kind of scale is this really at? Is it just one guy down the street? Or is it, you know? How big is this? 0:11:48.8 Jen Luker Well the World Health Organization estimates that about 15% of the entire world has some sort of disability. This is a highly conservative number. Not everyone wants to identify with the fact that they have a disability. There's definitely a level of taboo that comes with the word "disability." So- 0:12:13.3 Dan Wahlin Yep, I can vouch for that. 0:12:15.6 Jen Luker Right? So there's a lot of people that will not identify with that label and therefore the 15% is, in fact, a very limited number. You know, if you're looking just in the U.S. they estimate, as of the 2012 census so it's been a while, 19% of people, so almost 1 in 5. If you're looking at other numbers we're looking at 8% of you men who are colorblind of some fashion, and it's not an on and off switch, there's a varying degree. There's also people with multiple versions of color blindness. There are people with very slight color blindness so it's almost unnoticeable. The range is quite large and about 1% of women also are colorblind. So you're looking at about 4.5% of the population as a whole just for one type of disability. 0:13:10.8 John Papa That's fascinating, and it hits, at part for me, that's at home, too. 'Cause I also identify as being partially colorblind, I guess you could say. I'm on that scale. 0:13:19.8 Jen Luker Mm-hmm (affirmative). 0:13:20.4 John Papa I don't have full blown color blindness because I can still determine some colors but others I have struggles with. 0:13:25.8 Jen Luker Mm-hmm (affirmative). 0:13:26.4 John Papa But I've also found that when I identify with this I get a lot of backlash from people of, "Well you're not really colorblind." Or, you know, there's a lot of disbelief. It's almost like it's become, "Oh, I'm sorry." So I can totally empathize with you on why people wouldn't want to identify with any of these things ‘cause it's almost like they put them in a category of, "Oh, well... the pity category." 0:13:48.0 Jen Luker Right? And there's differences in color blindness. It's not just grayscale in everything. There's the red/green, there's blue/green, there's you know, the trichotomy side, there's... there's a lot of different variations, and then there's some people that can see the differences between but the colors are all still muted. The more muted they are the less likely you're going to be able to tell the difference between them which really starts to rear its ugly head when you're looking at images or text color changes. So, it gets complicated fast. 0:14:25.8 John Papa Is this the real answer to what color that dress is on the internet streams? 0:14:29.6 ALL (laughing) 0:14:31.5 Dan Wahlin Oh my gosh. 0:14:32.5 Jen Luker That's a whole other fascinating concept- 0:14:34.6 John Papa (laughs) 0:14:34.9 Jen Luker When it comes to how each person perceives color- 0:14:39.2 Dan Wahlin Yeah. That was- 0:14:39.1 Jen Luker And how no one actually perceives them the same way. 0:14:41.5 Dan Wahlin That was pretty freaky, actually. 0:14:42.9 John Papa Yeah, I know. (laughs) Yeah, I get that a lot from folks on, themes for example. I like to create themes for VS Code or for other tools and when you create a theme people get very personal over what theme they choose. And the reason I created my own is because I like mine to look the way I look and it makes me feel good, it makes me more productive, but not everybody likes one theme. There's probably, you know, 100 great themes out there. It's because everybody looks at things differently and they have varying degrees of sensitivity to the colors, too. 0:15:14.0 Jen Luker Mm-hmm (affirmative). 0:15:14.4 John Papa So, you're building an app and you have to pull accessibility in. What kind of apps should use accessibility? 0:15:21.1 Jen Luker All of them. 0:15:22.0 John Papa Good answer. (laughs) 0:15:23.5 Dan Wahlin Yeah, it's a good one. I was gonna say, "Great answer." 0:15:24.3 Jen Luker (laughs) 0:15:25.0 John Papa What does it cost for money? I mean, I a business manager now. Does it cost more money? How much more time is it going to take? Do I need to teach my people how to build web apps for accessibility? What kind of things are affected by it? I don't have time for this, no, let's not do it. I bet you've heard all these things? 0:15:40.3 Jen Luker Oh yeah! Absolutely. 0:15:41.7 John Papa How do you answer those? 0:15:42.9 Jen Luker Well, there's a couple different ways. The not so passive-aggressive way is to find the person closest to them that's colorblind and then sit them down and say, "Can you explain to them why we're not going to write the website in a way that they can use it? This person in that company that works for you." That tends to drop, you know, that tends to pull up some people's shorts. 0:16:06.6 But the other ways is you can start talking about those financials. If you're looking at the return on investment take those 15% of the population. If you are, you know, a $10 million company, by making your website accessible it's an $11.5 million company, and that's just your slice of the 15%. Only 1 in 10 websites is accessible, which means you still have the opportunity to corner the market in your region, your demographic. That means that that 15% could very well be larger than the rest of the people that use your website. 0:16:53.4 Dan Wahlin That's an interesting concept from a, you know, purely financial standpoint. I’d never even thought about that, even cornering your own market. 0:17:00.1 John Papa And that's what a lot of people make decisions on, right? If you're gonna make more money, it's still making- Think like a business manager. You're telling me my $10 million app I can pull in $11.5 million instead; an extra 1.5 million a year, which is, pick some fake numbers for a minute. 0:17:13.9 Jen Luker Mm-hmm (affirmative). 0:17:14.5John Papa What's the cost though? Of building that app, what's the additional cost? 0:17:18.7 Jen Luker If you're designing it from the ground up it's very little additional cost. So a lot of the major issues have to do with color contrasts. Other ones have to do with making sure, you know, as you've said before, title tags on HTML or hrefs or ALT tags on images. A lot of it has to do with the fact that the platform, HTML, is inherently accessible and we, as JavaScript developers, go ahead and run through and override it and make it inaccessible. So, sticking closer to the platform is usually enough to cover the majority of accessibility issues. 0:18:03.4 John Papa Let's take a quick break for a word from our sponsors. 0:18:05.8 Voiceover Looking to learn more about the state of software security? Check out VeraCode’s recently released report, "State of Software Security Volume 9." This year's report highlights the more important open source vulnerabilities and the latest dev sec-ops trends. Dev sec-ops, by the way, is kind of like "devops" plus "security". This is VeraCode’s most developer-focused volume ever. So don't miss out. Get your copy today by visiting www.VeraCode.com/SOSS for State of Software Security. That's www. v-e-r-a- code.com slash S-O-S-S-. 0:18:47.0 John Papa And we're back. Jen, you were just talking about how you can stick to the platform and that might help you build accessible apps. Can you kind of explain what you mean by that? 0:18:55.4 Jen Luker I usually mean by using semantic HTML as much as possible for the reasons it's made. For instance there's a lot of... A lot of developers that still would rather use a div over a button, but the complexities inmaking a div accessible like a button go deeper than you'd expect. So it's not just adding a highlight, adding text or a keyboard interaction. It's also weird things like, in some versions of ios, if you don't add a cursor pointer in the CSS, ios won't detect that it's a link, even if you tell it that it is. 0:19:39.0 John Papa Hmm. That's interesting. 0:19:40.0 Dan Wahlin Yeah, I don't think I've run into that, myself. 0:19:42.5 John Papa Oh, we hear about semantic HTML a lot, right Dan? About, "Don't use divs everywhere!" But yet, I don't know about you, but a lot of apps I get called in to look at it's like, div craziness. 0:19:52.5 Jen Luker Mm-hmm (affirmative). 0:19:53.2 Dan Wahlin I call it div soup. 0:19:54.7 John Papa (laughs) Div soup! 0:19:55.0 Jen Luker (laughs) 0:19:56.4 Dan Wahlin Yeah. How much, so Jen, are there numbers out there, and I'm sure there are, for people- 'cause I know probably the only program I've heard of would be for people with vision, you know, various issues from they're completely blind to partially. How many different apps are out there? What, is there a number one app that you use to actually read these pages to them? Like, I've heard "JAWS", is that still a thing these days? 0:20:21.1 Jen Luker JAWS is definitely a huge things, particularly for windows systems. Other screen readers would be just the default screen reader that Mac uses. Chrome has its own that you can implement, too. There's a dozen major, major players. 0:20:44.0 Dan Wahlin Okay. 0:20:46.1 Jen Luker So, and not all of them, just like the browsers, read the text or the website in the same way. Even ios and android devices have different readers of their own. So, each one kind of reads things a little bit differently. It's important to be aware of those differences once you start really digging deep into accessibility, especially if you're trying to customize something away from semantic HTML. 0:21:13.5 Dan Wahlin Now does, you mentioned, I mean, the thing that I think most developers probably have heard of are title attributes, and like you mentioned, the ALT on images, things like that. One that probably most people have come across, and you're going to have to correct me if I say this wrong, I've already said "ARIA?" [pronounced are-ee-uh] 0:21:30.7 Jen Luker Mm-hmm (affirmative). 0:21:31.3 Dan Wahlin Is it ARIA [pronounced are-ee-uh] or ARIA [pronounced air-ee-uh?] Is it ARIA [pronounced are-ee-uh]? 0:21:32.6 Jen Luker I call it ARIA [pronounced are-ee-uh]. It's WAI-ARIA [pronounced why-are-ee-uh]. 0:21:34.2 Dan Wahlin Okay then. I'm going with you then. So, okay. See, I'm right, everyone! 0:21:38.6 John Papa & Jen Luker (laughing) 0:21:39.3 Dan Wahlin 'Cause Jen says! 0:21:40.8 Jen Luker Ha! 0:21:42.1 Dan Wahlin Now that's one I've only seen a few of the, I guess you could say core attributes that you can do with ARIA, but do those play a, I would assume, a pretty big role then? With some of the screen readers out there? 0:21:54.3 Jen Luker Yes and no. Going back to semantic HTML, if you're using just HTML then there's really no need for the ARIA roles. The roles themselves are built in to the platform-specific HTML; however, if you are deviating from that plan or you are using something a little closer to HTML5 then ARIA can play a role in making sure that exactly what you want read to a screen reader is defined. So, usually the first rule of ARIA is "Don't use ARIA." But there's definitely a place for it. 0:22:40.9 Dan Wahlin Okay, good to know. Yeah. I think that's one area that, you know, I'm comfortable with the semantic tags and it's good to hear that those are still the, kind of, I guess, goal. 0:22:51.3 Jen Luker Mm-hmm (affirmative). 0:22:52.1 Dan Wahlin But I'm not as familiar with the ARIA stuff. You know, you'll see it, for instance, even in some of the, if you use Bootstrap all, the CSS. 0:22:59.2 Jen Luker Mm-hmm (affirmative). 0:22:59.5 Dan Wahlin I've noticed they'll add it here and there. If you use Font Awesome I've noticed there'll even be some ARIA-type stuff. But kind of one of those where you copy and paste it and don't really know what it does, you know, without looking it up more. 0:23:10.5John Papa You bring up a great point there with Font Awesome, Dan. Font Awesome, if my memory serves me right, you take a icon tag, right? The i and then you almost always have to stick in an ARIA attribute into there because you're effectively making a button, sometimes, out of that. So you're making a button out of an icon, which isn't really a button, and maybe you don't want it to be inside of a button control. Which almost always leads to end up using the ARIA attributes on there. Is that a bad thing, Jen? Or is that, I mean, 'cause that's what I see a lot out there. I mean, just 'cause I see it doesn't mean that it's right. 0:23:45.7 Jen Luker For the most part what you want in a button is text; however, we often use icons for those buttons. If you can possibly wrap it in a button control that would be better than just trying to add ARIA items to the icon itself. However, that is a way to get around that. Ideally you'd add a button, you'd tell the button its title and its value and that's what ends up getting read instead of just an empty icon. 0:24:20.0 John Papa Yeah, I hear you. Ideally, I try to do that as well, and I'm actually trying to pull up some code of where I've done this before to kind of get sense for, you know, "Why did I do that as opposed to actually using a button, in that case?” And I think sometimes it's more about styling and maybe it's just about effort. Like, you could put it inside of a button. If you didn't really want it to look like a button you could then restyle the button so it didn't look that way. 0:24:44.7 Jen Luker It is so easy to restyle a button- 0:24:48.1 John Papa Mm-hmm (affirmative). 0:24:47.8 Jen Luker So that it doesn't actually look like a button. 0:24:49.4 John Papa Yeah. 0:24:49.9 Jen Luker It is so easy. It's like three lines of CSS and suddenly it's just your icon. 0:24:55.9 John Papa I think you're right on that. I mean, and that's actually gets back to a thing of, Daniel you'll laugh at this, it makes me think of Silverlight. (laughs) The old Silverlight days. 0:25:04.2 Jen Luker (laughs) Mm-hmm (affirmative). 0:25:05.3 John Papa Where everything was described as a lookless control. And I kind of wish, in some ways, HTML was like that. 0:25:11.8 Dan Wahlin Yeah. 0:25:12.4 John Papa Whereas, out of the box, a button has a certain look and a feel. I wish it didn't. Like, you had to add those things because I feel like because there already is a standard way these things are represented... Like, you stick a button on a page you get a certain look, and it's almost never exactly what you want it to look like anyway. So maybe if there was a lookless feel to these HTML elements- 0:25:32.6 Dan Wahlin Or at least an option for that, right? 0:25:34.7 John Papa Yeah! 0:25:35.0 Dan Wahlin Where if you want it out of the box, great. But if you don't, here's how you can start from scratch and just add your own CSS in. Which wouldn't be too bad because we typically use, especially for public facing, you know, reset-type CSS, stylesheets anyway. So you could just kind of say, "Nope. Start from scratch and here's what I'm using." 0:25:52.3 John Papa Yeah. 0:25:52.8 Jen Luker Mm-hmm (affirmative). 0:25:53.1 Dan Wahlin But on that topic, Jen. Is, you know, for your... You obviously specialize in this and I saw in some of the info John was sharing with me that you worked on a website that implemented some automated accessibility testing to meet, is it WCAG? Is that how you say the standard there? 0:26:10.5 Jen Luker Yeah. 0:26:11.1 Dan Wahlin WCAG 2.0? Okay. 0:26:12.5 Jen Luker Mm-hmm (affirmative). 0:26:13.4 Dan Wahlin Can you tell us more about, kind of that process? And what you need to do there? 0:26:17.6 Jen Luker I actually worked on the Starbucks Careers Site project that was recently released. The benefit of that project is that when they started with a rewrite they started from design up with the intention to comply with WCAG 2.0 AA accessibility. So it was literally baked in from the design up and everybody was on board with engineering it to be as accessible as possible. So it was very much a collaborative effort between the design team, the different developers that worked on it, and even the engineering managers and the product owners. It was a really great process. 0:27:05.2 As far as the testing goes, we actually went through a few different layers of testing. The very first one is we implemented the eslint-jsx... or the eslint-plugin-jsx-a11y ... ESLint plugin. That (laughs)- 0:27:24.8 John Papa Oh, sorry, wait. Just let me make sure I got that one right. It's the eslint-plugin-jsx-a11y, right? 0:27:30.9 Jen Luker Yes! 0:27:31.8 John Papa Okay. Perfect. (laughs) 0:27:32.8 Dan Wahlin Say that 10 times fast. 0:27:33.7 Jen Luker I know. 0:27:34.0 John Papa Exactly. 0:27:34.9 Jen Luker It's really long. Especially when you start talking about the fact that I wrote another one for React Native. So... 0:27:39.4 John Papa (laughs) 0:27:40.0 Jen Luker It's even longer. That was kind of the first line of defense. It was utilized right there with Prettier, which was great. We used husky to run Prettier and the accessibility linter at the same time before someone could push code to the repo. In addition to that, we moved on to using axe-core as implemented into Jest for unit testing. And then we also use axe-core in Enzyme for end-to-end testing once the content was compiled down to static pages. 0:28:26.4 So this allowed us to hit the developers before they even pushed, hit the unit test of each one to make sure that they would comply if given the ideal data, and then made sure that it was still compliant once the data from the APIs was inserted into the page on a real time level. 0:28:52.2 That essentially meant that at every step of the process we made sure that everything was compliant before it made it to live. 0:29:02.1 Dan Wahlin Excellent. This would be public, I guess, right? Is this where people would go to look for a job? Or... is that what it was? It says the careers website, it looks like. 0:29:10.0 Jen Luker Yes, it was actually the... Yeah, it's just Starbucks.com/Careers. 0:29:14.8 John Papa Okay. 0:29:15.5 Jen Luker It was multiple pages, it had its own menu navigation. Once you actually go to look for a job by submitting your resume and stuff, you're transported out to the portal that they use, which we didn't get to go over, but the careers section of the Starbucks.com website is, in fact, accessible. And they're using those to expand that project. 0:29:43.4Dan Wahlin For people that want to learn more about it learn more about it, obviously I guess you could go right click view source on, you know, the careers site, but is there a recommended site that it out there that's considered a really good, almost like cheat sheet of how to get started adding stuff into your site? 0:29:59.5 Jen Luker There is. WCAG 2.0 website. 0:30:03.1Dan Wahlin Okay. 0:30:03.0 Jen Luker Which we will add to the show notes for this. It is on W3's website. That's usually a great place to go dig in and find out what's kind of covered in compliance. If you dig in deep enough you can find examples of how to implement code in an accessible way. They give different formats of how you could implement a menu, different ways of, you know, drop downs, so they do give you examples that would comply with accessibility compliance that I've found isn't always exactly going to suit your needs but gives you a very good idea of what's going to be necessary. 0:30:46.5 Dan Wahlin Okay. And is there, when it comes to, you know, if I'm vision-impaired, as a, from developer standpoint is there a way to really test that? Short of using like JAWS or maybe one of the built in readers you mentioned? Or is there an actual tool out there than can help you, you know, make sure that what you wanted them to hear is actually what gets heard? 0:31:08.0 Jen Luker It's literally manually testing at that point. 0:31:10.8 Dan Wahlin Okay, I kinda figured. But, yeah I'm wondering if there's anything out there. 0:31:14.4 Jen Luker Something I do want to mention about that is when you are dealing with testing screen readers, among other different types of ... you know, accessibility technologies, assistive technologies that help you. Being cold, not knowing them, and going in and trying to test them actually develops a huge amount of frustration. That can actually develop enough frustration that you decide that it's not even worth it for someone else to have to try to deal with this pain even with something is ideal. 0:31:52.0 What you should do is find someone who uses that technology day in and day out. You'll be amazed at how much faster and much easier they navigate through tools. And something that I have found extremely interesting is how they've learned to adapt their interactivity with your site based on how it's already broken. So it can be very fascinating to see how people that interact with it have their actual pain points, which things aren't, and those aren't things that you're going to be able to identify as just a casual user. 0:32:28.8 John Papa Let's take a quick break for a word from our sponsors. 0:32:32.0 Voiceover Are you building a web application? Need to deliver it soon and don’t have the people to do it? Maybe you’re not sure your company has the skillset or experience to do it. Then maybe we can help. 0:32:42.4 I’m your host, Ward Bell, and my day job is building applications for companies like yours. I don’t do it alone, I’m president of IdeaBlade, a consultancy that specializes in enterprise web application development. We’re particularly strong in Angular, RxJS, NgRx Redux on the frontend, and .Net Microsoft technologies on the server. 0:33:03.2 We’re a small tight knit group of people, hand picked by me, for their expertise, experience,integrity, and team spirit. Maybe we can help you with architectural guidance and hands-on development. And if there’s something we don’t know (and in our field, really, there’s too much to know), we can draw on our personal connections in the Microsoft RD, MVP, and Google GDE Networks as well as our international circle of really great developers, people we know and trust personally. 0:33:29.8 If you’ve got a project that’s keeping you up at night shoot us an email at info@ideablade.com. That’s info@IdeaBlade.com. And now back to the show! 0:33:42.0 John Papa And we’re back. Jen, Dan brought up a good question ‘cause I had this same thought, and I know it’s changed throughout the years, too; it’s how do you test for your site being accessible, and I realize, you know, the manual test is the best one. But there’s, and you do some automating as well for this. I noticed you mentioned the eslint plugin that you had. 0:34:01.5 Years ago there was, well it still exists, a Chrome plugin for screen reader which is now labeled as deprecated, and I notice they always link you over to the Lighthouse tools now, the Chrome plugin for that, which does an accessibility audit. I don’t know how you feel but I’m curious, like on, I see for example, the Starbucks Careers site has a, right now, 100 out of 100 score for accessibility. That doesn’t make me feel like it’s done, but it does make me feel like at least, like if there were something missing in that list of what wasn’t 100, I’d know I have some work to do. But when it’s 100 I’m then stuck with the, “What’s my next step?” Like, running Lighthouse step one: make sure those things aren’t barking at you. 0:34:44.9 Jen Luker Mm-hmm (affirmative). 0:34:45.6 John Papa But what do you do after that? 0:34:47.2 Jen Luker After that is when you starting bringing in actually user testers. So previously we were talking about return on investments of adding accessibility features from the viewpoint of someone who wants to add the accessibility demographic, right? The addition of adding those accessibility features actually expands far beyond those with accessibility issues, but also everybody. So, for instance, say that you’re sitting in a really noisy bar and you want to share a video with your friends. You can’t just sit there and play the video and expect them to get everything that’s being said. It’s too loud in the area that you’re in. With either a transcript or subtitles you can actually understand everything that’s going on in the video without having sound. 0:35:39.9 John Papa I’m so glad you brought that up ‘cause that’s something that is near and dear to me on videos. Not just for people who have issues, but it’s also… Just think about the financial side of this, too, and the marketing side. If you want somebody to watch your video and it’s scrolling past them on a screen in a Twitter feed, or Linkedin, or Instagram, or any kind of social media even, or even on the TV. If there’s no sound, if they can see the words sometimes that grabs their attention. 0:36:08.0 And I’ll, gonna share something about myself here, when I watch TV shows, and I love science fiction, things like Game of Thrones for example- 0:36:17.1 Jen Luker (laughs) 0:36:17.5 John Papa I actually put the closed captions on because I can’t tell what the heck name they’re saying. 0:36:21.7 Dan Wahlin I do the same thing. 0:36:23.0 John Papa You know? (laughs) 0:36:23.4 Dan Wahlin Not with Game of Thrones but with other stuff, yeah. 0:36:25.8 John Papa Yeah, I mean if their name was “Dan” I could get it. But when some of these names comes on I’m like, “...” So I love the fact that we… It’s not just for people who can’t understand names like me, but it’s a great thing for videos ‘cause now you’re reading an audience who maybe they don’t understand the slang you’re using, maybe English isn’t their first language. If you’re recording in English. 0:36:46.3 Jen Luker Mm-hmm (affirmative). 0:36:47.9 John Papa So when I talk with other countries they use the closed captions a lot for trying to figure out, “What did John say?” There’s just so many good ways and good reasons to do it and it’s not hard. 0:36:58.4 Jen Luker Unh-unh (negative). It’s not necessarily hard but it is time consuming. And it can be a little bit costly, depending on whether you do it yourself or whether you’re hiring someone to- 0:37:08.6 John Papa Yes. 0:37:09.2 Jen Luker Provide those transcriptions for you. 0:37:11.3 John Papa There are some free ones. Like if you go to YouTube and you upload it they give you one free translation, but then you run the risk of something like, my good buddy, Asim Hussain, his name is spelled A-S-I-M. 0:37:22.9 Jen Luker Mm-hmm (affirmative). 0:37:23.4 John Papa And when he recorded one of the videos it came out on the closed captioning as “Hello, everyone. My name is Awesome Hussein.” 0:37:29.3 Jen Luker (laughs) 0:37:30.2 ALL (laughing) 0:37:31.1 Dan Wahlin We should call him that now, when I see him. 0:37:32.6 John Papa Yes! So that’s now his nickname. (laughs) 0:37:34.6 Jen Luker That’s awesome. Ha ha! 0:37:35.9 John Papa Literally! 0:37:38.2 Jen Luker Oh, goodness. Yeah, YouTube is… I’m so proud of YouTube for at least trying to add like, automated transcriptions to all of the videos that are available. So there is a button you can click on that will show just a real time transcription as it’s developed. Unfortunately our ability to write machine learning that can fully understand different accents, different dialects, different contexts is still lagging behind how quickly communication and language evolves. So it’s not the best. It’s like trying to use Google Translate and it can be difficult. 0:38:23.3 Dan Wahlin Yeah, it’s- I started playing with, so Azure has it, and Amazon has had it though, for quite a while, has a few more voices at this point on AWS, but they have a service on some of my, I guess you could say wordier posts, meaning that there’s not as much code ‘cause it’s hard to convert. 0:38:43.0 This is kinda opposite of what we’re talking about, this is text-to-speech, and I said, you know, it doesn’t really cost me. I mean, it’s negligible, almost free it’s so minimally used by people and looking at the stats, but it’s you know, Amazon Polly and then Azure… I don’t remember what it’s called. what’s it called, John? They have their text-to-speech service. Do you know off the top of your head? I don’t think I remember the name. It’s probably part of the cognitive speech APIs I’m guessing. 0:39:12.9 But anyway it'll, you know, take your text and convert it into like, an mp3. So I’ve been doing that recently on just some of my more text based posts. ‘Case like I said, it’s hard to get context out of code, of course. But, you know, I like having it. I look at the stats. There’s not a ton of usage, per se. Although somebody could download it, almost like a podcast, but what I like about it is somebody that, you know, was vision impaired in some way, and I swear the older I get I’m starting to fall into that category anyway where I’d almost rather listen to it, you know, than read it. 0:39:49.4 But there’s a lot of different things out there like that that I think as technology progresses, you know, hopefully as you’ve mentioned, Jen, the YouTube closed captioning-type thing just keeps getting better and better. Text to speech is definitely getting pretty awesome. The voice I picked I’m just amazed with how high the quality is. So, a lot of cool stuff out there for this. 0:40:08.2 John Papa Yeah, that is called Azure’s text-to-speech cognitive services is the piece of it. You’re right it’s Amazon Polly. I put both those links in the show notes for everybody. 0:40:16.3 Jen Luker I think the biggest take away from all of this is that accessibility isn’t just for the people with disabilities. It literally is for everyone and it’s not just for old people or young people or people suffering from a specific disability. It’s also for people that have temporary or circumstantial disabilities. It’s for people that have you know, issues today, but no issues tomorrow. Or maybe they’re watching a TV show that has really loud explosions and really quiet text and your baby’s sleeping- 0:40:52.9 John Papa Yeah, what’s up with that anyway? 0:40:53.8 Jen Luker (laughs) Right? That’s why I use a screen… You know, that’s why I use subtitles. But, you know, it’s just the more you step back and look at it the more you realize that accessibility isn’t just keyboard tabbing and it’s not just a screen reader. It’s being able to allow people to interact with your content no matter who they are, or where they are, or what they are; and that has a real power. 0:41:22.9 That has the ability to take people that, I mean, arguably needs to be the ones that have the work flexibility in order to support themselves, and to be able to have the insurance to take care of their medical issues, and give them a job that gives them that freedom. I mean we, as devs, have a huge amount of freedom. We can work from anywhere as long as we’ve got an internet connection and a laptop. And as long as we’re working towards making the entire web accessible, whether that’s Game of Thrones, or that’s our technological documentation it really opens up the world to people that would not have otherwise had the opportunity to be able to make the best of it. 0:42:10.9 Dan Wahlin Absolutely. I think that’s, you know, that’s just a win all around for everyone. To kind of tag on that again, real quick… So I was at Dick’s Sporting Goods, which if you’re in the United States listening to this you’ll probably know who that is, they’re a pretty big sporting goods company. But I was out there doing some angular training and we were talking briefly- Jen, that’s why I asked more about the ARIA labels ‘cause that’s came up. And they actually have a full-time, at least one person maybe more but at least one I know full-time for accessibility. 0:42:41.0 So I think kind of challenge we might be able to issue all of us as devs is, if your company’s currently not doing that, there are companies that are. Now, you know, some of them I think are doing it purely out of what you just said, Jen. They just want to make it more accessible to everybody. Some of them probably it’s financial and okay, I think it’s a win either way, whatever they choose. 0:43:02.6 John Papa Sure. 0:43:03.1 Dan Wahlin But I think that’s a challenge we could all probably take on to try to be a little more educated on that and use it more. 0:43:09.6 John Papa there’s even little things you can do that may not fall under the exact category but how many times have you been to a website where there’s so much text jammed onto a screen you can’t actually discern what you’re supposed to be looking at? You know, so just making sites easier to read and having a better user experience. I find user experience and accessibility really flow together, personally. And when you’ve got one and the other together it’s like the beauty of the web. When you have neither of those that’s like when you go back to one of those 1996 websites where you can't figure out what’s going on. 0:43:42.2 Jen Luker (laughs) It’s absolutely true. It’s definitely a situation where making it fantastic for one group of people ends up helping everyone. So I mean, even if you do one thing today, if you add one more ALT tag, or you convert one more div to a button, or one button to a link, you know? That’s one more thing that’s going to be useable. You don’t have to flip the switch and have your entire website accessible tomorrow, but you can make one step today. 0:44:13.9 John Papa Awesome. Jen, we would like to wrap up this show with a section we call “Someone to Follow” where we talk about somebody who may be well known, or may not in the industry who we just want people to take a closer look at. And I’ll kick things off. Today, and I seem to be picking names that I can’t pronounce recently, so I apologize Gleb, but the person I want to point out is Gleb Bahmutov, and it’s… I’ll put his Twitter link up here on the page. He is one of the JavaScript ninjas behind the tool called cyprus.io which, Dan you did a show with us on that a couple of weeks or months ago. 0:44:47.6 Dan Wahlin I love it. Yeah. 0:44:49.1 John Papa Gleb is amazing. I’ve talked with him a few times on, he’s another Twitter friend, and the reason I wanted to call him out was I was working with cyprus.io, ‘cause I switched, Dan convinced me to switch. And I absolutely loved it and I was trying to solve some problems with it and I resent it to him on Twitter and he helped me get over those issues right away. And I just really love how open and friendly he was and he’s just done some amazing technology products that he’s had on the web over the years and cyprus io is just the recent one of those. Dan, do you have somebody to follow? 0:45:20.4 Dan Wahlin Yeah. So I had the chance to have dinner recently with one of my buddies, Rick Strahl. You know Rick, John. 0:45:27.6 John Papa Oh, yeah. 0:45:28.3 Dan Wahlin And for those that don’t know Rick he’s like, world champion I think. He windsurfs a lot (laughs). But Rick’s just a all-around very cool guy and very knowledgeable about frontend and backend type technologies, so he’s @Rick- We’ll put it in the show notes, but @RickStrahl on Twitter. 0:45:51.7 John Papa And Jen, do you have someone to follow? 0:45:53.1 Jen Luker I do. So there’s someone that I’ve been seeing a lot in the conference circuit this year. His name is Tejas Kumar. He is one of the nicest, most upbeat, most enthusiastic, and kindest, and most patient people you will ever meet in your entire life. He has more energy than my child and he’s basically the person who touts love and tolerance and kindness throughout Twitter. It’s a definite highlight in my feed. So I will definitely include his link in the show notes as well. But he’s my person to follow. 0:46:34.2 John Papa Actually I think I met Tejas last week at dotJS in Paris. Super nice guy. I hadn’t met him before but he was just a Twitter friend, so. It’s so nice when you actually meet people in person who you meet on the internet. (laughs) 0:46:46.0Jen Luker Absolutely. 0:46:47.1John Papa Well hey, Jen, it was great having you on here and thank you for coming on and talking to us about accessibility and for everybody who’s listening, thanks for listening to this show. We’re putting a bunch of links in the show notes so go check those out and please listen to us every Tuesday morning. 0:47:03.3 Jen Luker Thank you. (Exit Music) 0:47:08.4 Voiceover Thanks for listening to Real Talk JavaScript. This show and all of our shows are available at www.RealTalkJS.com with links and notes. John and Ward would love to hear what you think, especially about potential guests and topics for future shows. Follow and send them a message on Twitter @RealTalkJS.
Recording date: 2018-11-01 Tweet John Papa https://twitter.com/john_papa Ward Bell https://twitter.com/wardbell Dan Wahlin https://twitter.com/danwahlin Mike Hartington https://twitter.com/mhartington Notes (0:01:59) MailBag question from Jon Mayhew: Is it possible to have one code base for Android, iOS, PWA, and Web? Would you just deploy the PWA as a web app? Or would I need to have a separate Angular app that would look better on the web? (0:03:50) Ward asks "Why go down the road of Ionic" (0:04:20) Mike talks about user expectations and how you choose your mobile solution. (0:05:58) Ward asks if what works on the web also works on mobile (0:07:02) Ward asks how you can take a web app and move to Ionic? (0:08:30) Mike talks about how you can replce an airplane while flying (0:09:10) Mike and John talk about Ionic v4 (0:09:31) John asks Mike where he sees Ionic as a good choice compared to the field (0:10:20) Mike talks about how you can ask yourself if you need device features (0:12:12) Mike alks about what you can do on the Web today cmopared to mobile (0:12:45) John asks Mike if low wifi or no wifi are good scenarios for Ionic, native mogile, or PWAs (0:14:15) Mike talks about how Ionic fits in with the web frameworks (0:15:30) Mike compares mobile dev to baking a cake (0:16:30) Ward talks about Easy Bake Ovens https://en.wikipedia.org/wiki/Easy-Bake_Oven (0:18:30) Apache Cordova: https://cordova.apache.org/ (0:18:38) Mike talks about capacitor https://capacitor.ionicframework.com/ (0:19:35) "Can i use" https://caniuse.com (0:20:01) Mike recommends how to store offline data in mobile (0:20:50) IndxedDB https://developer.mozilla.org/en/docs/Web/API/IndexedDB_API and SqlLite https://www.sqlite.org/ (0:22:01) Data on mobile and sensitive info (0:26:14) Mobile iron and hockeyapp https://hockeyapp.net/ (0:27:12) Stencil: https://stenciljs.com/ (0:28:44) Mr. Peabody and the "Wayback Machine" https://en.wikipedia.org/wiki/WABAC_machine (0:30:33) Mike talks about how Ionic works https://ionicframework.com/docs/components/ (0:31:31) Mike mentions a productivity talk by Scott Hanselman https://www.hanselman.com/blog/ItsNotWhatYouReadItsWhatYouIgnoreVideoOfScottHanselmansPersonalProductivityTips.aspx (0:32:45) RxJS https://rxjs-dev.firebaseapp.com/ (0:35:00) Mike talks about the frameworks handles events (0:36:02) Mike shares a story of a mobile app he built and its challenges (0:39:42) Ward talks about customers he talks to who are just starting to get into mobile (0:40:48) Mike talks about cordova vs not cordova (0:43:11) Ward talks about "CIO Magazine" syndrome (0:45:50) Mike talks about examples of apps built with Ionic (0:50:38) Someone to follow: CodeNewbie community https://www.codenewbie.org/ (0:51:11) Someone to follow: Craig Shoemaker https://twitter.com/craigshoemaker (0:52:07) Someone to follow: Refactr Tech https://twitter.com/RefactrTech
Recording date: 2018-10-30 Tweet John Papa https://twitter.com/john_papa Ward Bell https://twitter.com/wardbell Dan Wahlin https://twitter.com/danwahlin Tracy Lee https://twitter.com/ladyleet Notes (0:01:00) Ward reads the mailbag https://twitter.com/plambweb/status/1057291112807723013 (0:01:35) Tracy says often the best answer to RxJS memory leaks is to check to unsubscribe (0:02:01) Tracy talks about RxJS in stencil https://stenciljs.com/, vue https://vuejs.org, react https://reactjs.org, angular https://angular.io, ionic https://ionicframework.com/ (0:03:12) Learn by making mistakes (0:03:50) Tracy talks about some places you can go wrong in RxJS (0:03:55) Introducing Tracy (0:04:20) Tracy's company https://www.thisdot.co/ (0:05:45) Tracy says she prefers frameworks for what they offer (0:06:10) Tracy talks about rxjs https://rxjs-dev.firebaseapp.com/ (0:06:30) Tracy mentions Ben Lesh and RxJS https://twitter.com/BenLesh (0:07:04) Tracy talks about reactive programming https://en.wikipedia.org/wiki/Reactive_programming as sets of events over time (0:07:47) TC39 https://www.ecma-international.org/memento/tc39-m.htm (0:08:00) Tracy explains how, generally, observables are stateless and lazy (0:08:50) Tracy discusses the stages of the TC39 (0:09:03) Babel https://babeljs.io/ (0:09:33) Ward asks what questions Tracy hears at her RxJS workshops https://www.thisdot.co/rx-workshop (0:10:03) Tracy says she hears a lot of confusion on observables and observers https://toddmotto.com/rxjs-observables-observers-operators (0:10:11) Tracy says rxjs operators can be a source of confusion https://www.learnrxjs.io/operators/ (0:10:55) Ben Lesh is working on RxJS 7 (0:11:15) Ward asks tracy how she slides people into rxjs easily (0:11:30) Tracy says she likes that Observables are just functions (0:12:54) John asks Tracy which operators in rxjs to learn first (0:13:53) Ward asks Tracy about the new RxJS docs (0:14:04) Ward talks about one of the creators of RxJS, Matt Podwysocki https://twitter.com/mattpodwysocki (0:14:20) Tracy talks about how RxJS was created as it is today from Netflix and Microsoft (0:15:02) Tracy says there are over 12 million downloads of rxjs a month (0:15:24) Ward mentions the RxJS docs https://rxjs-dev.firebaseapp.com/ (0:16:46) RxJS on npm https://www.npmjs.com/package/rxjs (0:17:50) John asks Tracy how she advises people on upgrade strategies for RxJS (0:18:45) Ward mentions the RxJS change from method chaining to pipe (0:18:49) Upgrade rxjs 5 to 6 https://www.learnrxjs.io/concepts/rxjs5-6.html (0:19:46) John asks Tracy what kind of applications she sees people creating with RxJS (0:20:00) Tracy talks about multi-plex over a websocket with rxjs with node.js and react native (0:20:22) Tracy mentions React Native https://facebook.github.io/react-native/ (0:20:37) Ken Wheeler https://twitter.com/ken_wheeler (0:21:28) Ward asks if "just subscribe" is a useful bit of advice (0:23:30) Tracy talks about reactive aspects and non reactive aspects of code (0:24:15) John mentions how RxJS is not part of any particular front end framework (0:24:30) Tracy says she is seeing a lot of React folks taking learning and using RxJS (0:24:34) Tracy talks about how RxJS is framework agnostic (0:25:17) Tracy talks about prtoecting from JavaScript fatigue (0:25:40) Ward asks Tracy how she recommends debugging RxJS (0:26:10) Tracy asys to "keep tapping away" (0:26:31) Tracy says they are trying to make testing easier (0:26:58) Tracy talks about how you can get into the RxJS slack channel (0:27:50) Tracy talks about her use of Evernote for staying organized (0:29:00) Tracy talks about her efforts with Women in Tech https://twitter.com/ladyleet/status/985018157994831872?lang=en (0:29:31) Tracy talks about possibly announcing something at the ngAtlanta: https://ng-atl.org/#/ conference (0:30:00) Tracy talks about her passion for creating companies (0:30:26) Someone to follow: Jay Phelps https://twitter.com/_jayphelps https://medium.com/@jayphelps (0:31:10) Someone to follow: Dmitri Shekhovtsov https://twitter.com/valorkin (0:31:50) Someone to follow: Dam Abramov https://twitter.com/dan_abramov Additional Resources RxJS api https://rxjs-dev.firebaseapp.com/api RxJS and Angular https://angular.io/guide/rx-library Upgrade RxJS 5 to 6 https://www.learnrxjs.io/concepts/rxjs5-6.html
Recording date: 2018-10-25 Tweet John Papa https://twitter.com/john_papa Ward Bell https://twitter.com/wardbell Dan Wahlin https://twitter.com/dan wahlin Tierney Cyren https://twitter.com/bitandbang Show Notes: (0:01:11) Ward reads the mailbag about Node versioning (0:01:39) Tierney talks about Node.js versioning https://nodejs.org/en/ (0:01:56) Tierney discusses the Node.js LTS schedule (0:02:18) Ward asks how he would go about moving from v8 to v10 of Node.js (0:02:48) John asks if the code needs to change or just recompile (0:04:40) Tierney explains the node.js release lines work https://nodesource.com/blog/understanding-how-node-js-release-lines-work/ (0:05:10) Tierney explains there can be more than one active LTS at a time (0:05:39) John dsicusses how the Node.js LTS chart is helpful https://github.com/nodejs/Release#release-schedule (0:06:10) Ward asks what is he missing if he doesn;t move to a new release (0:06:30) Tierney explains vthat you may miss vulnerability patches (0:07:30) Tierney explains how he recommends thinking about how long you should stay on a release line (0:08:10) Tierney says Laurie Voss https://twitter.com/seldo of npm had a talk about the Fortune 50 companies who use Node.js (0:08:46) Ward asks what the relationship is between Node.js and npm (0:09:00) Tierney says npm is a company https://npmjs.com (0:09:39) Tierney mentions Isaac - CEO of npm https://twitter.com/izs?lang=en (0:12:32) John asks Tierney what the performance is of Node.js (0:14:11) Tierney talks about how LinkedIn used Node.js (0:14:33) Tierney says Paypal is the largest public deployment of Node.js on the planet (0:14:50) Tierney says Walmart uses Node.js which helps them with Black Friday sales (0:16:04) tc39 spec https://tc39.github.io/ecma262/ (0:16:48) Node.js performance tips https://www.smashingmagazine.com/2018/06/nodejs-tools-techniques-performance-servers/ (0:17:01) Ward asks what level of javascript features are implemented in Node.js (0:17:40) Tierney talks about ESM (module system) (0:19:40) John and Tierney talk about tools for application performance monitoring (0:21:04) New Relic and AppDynamics are great tools for this (0:21:40) Tierney talks about when the event loop is blocked (0:21:45) JSON.parse can sneak up on you, as it blocks the event loop (0:22:46) NSolid is a replacement for node.js runtime - does perf monitoring too https://nodesource.com/products/nsolid (0:22:50) John asks if you can use NSolid for production deployments without slow-downs (0:22:50) Tierney talks about the performance impact of using NSolid for monitoring (0:23:30) John talks about an AST http://www.syntaxsuccess.com/viewarticle/javascript-ast (0:26:10) Async hooks is a new tool that ships in node that pulls data out to help APM's (App Performance Monitoring) help get data (0:27:00) Ward asks if there are tools that will check for anti patterns, for CI (0:27:50) Tierney talks about tools that NodeSource has written to help look for issues in Node code (certified modules) (0:28:57) ncm-ci is the tool https://github.com/nodesource/ncm-ci (0:29:11) Ward mentions tools like Lighthouse for chrome https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en (0:29:15) Tierney commits to writign Lighthouse for Node.js by the end of the podcast (jokingly) (0:30:32) Greenkeeper is a github integration app that auto checks dependencies https://greenkeeper.io/ and analyzes your npm package (0:31:09) Snyk looks for security vulnerabilities in packages https://snyk.io (0:32:01) Node awesome list https://github.com/sindresorhus/awesome-nodejs (0:33:14) Tierney has his own list for Node.js https://github.com/bnb/awesome-awesome-nodejs (0:33:30) Ward asks Tierney whaat the top 10 Node.js tools everyone needs (0:36:00) Ward says he is looking for a middle ground between all of the tools and just the most important tools (0:37:49) John asks what you can do to secure Node.js apps (0:39:50) Tierney talks about how you can submit vulnerabilities to https://hackerone.com/nodejs-ecosystem (0:40:09) John asks Tierney about npm vs yarn (0:50:51) Yarn https://yarnpkg.com/en/ (0:42:20) Tierney talks about his interest in Go https://golang.org/ (0:43:30) Tierney talks about how Ryan Dahl created Node.js https://jaxenter.com/ryan-dahl-fixing-node-deno-146190.html (0:45:01) Someone to follow - Dave Geddes at https://gedd.ski/ (0:45:58) Someone to follow - Sherry List https://twitter.com/sherrrylst (0:46:41) Someone to follow - Franziska Hinkelmann https://twitter.com/fhinkel Resources Node.js Everywhere with Environment Variables https://medium.com/the-node-js-collection/making-your-node-js-work-everywhere-with-environment-variables-2da8cdf6e786 by John Papa Eleven Tips to Scale Node.js https://medium.com/microsoftazure/eleven-tips-to-scale-node-js-65cbf6deef6e by Brian Holt async await in Node.js https://blog.risingstack.com/mastering-async-await-in-nodejs/ Certified Modules from Node Source https://nodesource.com/products/certified-modules Blog posts by Tierney https://nodesource.com/blog/author/bitandbang Node Collection - medium blog https://medium.com/the-node-js-collection Tierney says use security tools like helmet https://github.com/helmetjs/helmet Ryan Dahl - creator of Node http://tinyclouds.org/ npm audit in ci system https://docs.npmjs.com/getting-started/running-a-security-audit WardInSpace: https://docs.npmjs.com/cli/audit NPM Audit Node security working group https://medium.com/the-node-js-collection/meet-the-node-js-security-working-group-30b9f00b678 WardInSpace: Node Security Working Group https://github.com/nodejs/security-wg Tierney-Cyren: https://internetbugbounty.org/ WardInSpace: https://www.rust-lang.org/en-US/ Rust
Recording date: 2018-09-20 Tweet John Papa https://twitter.com/john_papa Ward Bell https://twitter.com/wardbell Sam Julien https://twitter.com/samjulien ** Rob Wormald** https://twitter.com/robwormald Notes: (0:01:20) Mailbag https://twitter.com/D2KX_/status/1052980944389513217 about Polymer's life and web components (0:01:30) Polymer https://www.polymer-project.org/ (0:02:44) Rob says that more common features will move to the platform for web components (0:03:45) Rob talks about how his role is to talk to folks who build apps with JavaScript (0:05:04) Rob talks about solving the problem of recreating the same component over and over (DatePicker as an example) (0:05:26) DatePicker in Angular Material https://material.angular.io/components/datepicker (0:05:46) Rob talks about solving the problem of recreating the same component over and over (DatePicker as an example) (0:06:31) Dan talks about jQuery and the plugins for extensibility (0:08:00) Ward asks if people are looking for an Angular version of a control or a more generic JavaScript one (0:08:33) Ward asks Rob if he sees people want to interop between platforms (0:09:12) Rob talks about how Google has various internal tools (0:10:20) Angular's new Ivy compiler https://www.youtube.com/watch?v=dIxknqPOWms&feature=youtu.be&t=1360 (0:10:37) John asks Rob to explain the Ivy compiler (0:11:15) Tree shaking https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking (0:11:30) Rob talks about how an Angular app will be about 15kb with Ivy (0:14:00) John asks Rob if sharing company specific UI libraries is one of the goals of Angular Elements (0:14:32) Angular Elements https://angular.io/guide/elements (0:15:32) Ward asks Rob about dynamic forms and how Angular Elements may address it (0:17:44) Ward asks about the value of AngularElements talking to each other! Vanilla web components are stand alone. Great. But I build apps and apps are components that talk to each other. If I'm building with AE, I get that inter-comm among elements, yes? How does that work? (0:19:08) Dan asks Rob about how this impacts big companies (0:20:26) Rob talks about SkateJS https://github.com/skatejs/skatejs (0:21:09) Ward asks Rob about vanilla web components. (0:21:19) Ward says components should be able to talk to each other. (0:22:37) Rob addresses how components can talk to each other with Angular Elements (0:23:30) Dan says a lot of the companies he works with have islands of apps and want to take a feature and drop it in with a tool like Angular Elements. (0:24:00) Ward says he loves Sharepoint (0:24:29) Rob explains how Sharepoint users are one of the larger consumers of Angular Elements (0:24:45) Ward says there may be similar things in the Salesforce world too (0:26:52) John asks Rob how much Angular comes along for the ride with Angular Elements (0:27:17) Rob explains the basic steps to create a component with Angular Elements. (0:28:11) Rob says the way you author a component doesn't change, just how you bootstrap it. (0:28:35) Dan asks if he needs the CLI to create and build Angular Elements (0:29:38) Ward asks if DI works across the elements (0:32:06) Ward asks Rob how he sees the other frameworks handling this problem. (0:32:00) Rob talks about his experience with React and Vue's approaches to custom elements. (0:32:56) Rob says the React team is talking with the Angular team about this, but he does not know of their plans. (0:34:13) Rob says Vue provides the ability to publish component from inside of Vue, as far as he knows (0:35:30) Rob talks about their relationship and cooperation with Ionic https://ionicframework.com/ (0:37:53) Someone to follow - Thierno Thiam https://twitter.com/localhost_droid and https://twitter.com/dakarPromiseJs (0:48:42) Someone to follow - Minko Gechev https://twitter.com/mgechev (0:39:30) Someone to follow - is Laurie Voss, https://twitter.com/seldo COO and co-founder of npm http://our-origins.com/post/171840751116/laurie-voss-co-founder-and-coo-at-npm (0:40:00) Someone to follow - Jason Miller author of preact https://twitter.com/_developit https://twitter.com/preactjs
Recording date: 2018-09-20 Tweet John Papa https://twitter.com/john_papa Ward Bell https://twitter.com/wardbell Dan Wahlin https://twitter.com/danwahlin (0:01:51) John reads the mailbag about browser support, service workers performance imapc,t and adding home screens to PWAs. (0:01:51) Mailbag https://twitter.com/RealTalkJS/status/1042572672025194496 (00:2:15) Maxim describes PWA support in the browsers (0:03:10) Ward points out that Addy Osmani https://twitter.com/addyosmani says: "It's important to remember that Progressive Web Apps work everywhere but are supercharged in modern browsers. Progressive enhancement is a backbone of the model." (0:03:42) Service worker support in "Can I Use" https://caniuse.com/#feat=serviceworkers (0:03:50) Maxim recommends using the PWA feature detector https://github.com/tomayac/pwa-feature-detector (0:04:10) Maxim answers John's question about how PWAs have changed over the past few years (0:05:45) Maxim answers what a PWA is and the value to developers and users (0:07:00) Ward asks "What problem does PWA solve?" (0:07:43) Dan asks what he benefits of PWA are to an enterprise business (0:08:50) Maxim points out how low wifi (LiFi) can be hard to deal with (0:09:22) What is a PWA https://developers.google.com/web/progressive-web-apps/ (0:09:30) Ward asks if a PWA magically knows if its offline or not (0:11:50) Maxim talks about LiFi as really low connectivity (0:13:20) John clarifies with Maxim that PWAs uses browser APIs to check their connectivity (0:14:00) Ward asks if he should use the raw service worker protocol (0:15:15) Dan and Ward asks Maxim what makes this easier (0:16:57) Maxim talks about the Workbox project https://developers.google.com/web/tools/workbox/ (0:18:15) John asks Maxim what else besides Service Workers, that is a part of PWAs (0:18:30) Maxim discusses web app manfiest https://developer.mozilla.org/en-US/docs/Web/Manifest (0:21:10) Maxim talks about Service Worker precache https://github.com/GoogleChromeLabs/sw-precache (0:22:22) Ward asks Maxim to tell a story about one of Maxim's successful experiences with PWAs (0:28:26) mobile era rocks PWA https://mobileera.rocks/ (0:28:46) Ward raises how conferences are notorious for low wifi (0:33:00) John asks Maxim when not to do a PWA (0:38:00) Ward, John and Maxim discuss security concerns with PWAs (0:44:30) Lighthouse tool for PWAs https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk (0:45:30) Maxim mentions the Web Hint tool for PWAs https://webhint.io/ (tip: npx hint https://example.com ) (0:46:50) Someone to follow: Nicholas Zakas https://twitter.com/slicknet https://humanwhocodes.com/ (0:47:38) Someone to follow: Simona Cotin https://twitter.com/simona_cotin?lang=en (0:48:10) Someone to follow: Arthur Stolyar https://twitter.com/nekrtemplar Additional Resources PWA Checklist https://developers.google.com/web/progressive-web-apps/checklist Curated list of PWA news by Maxim: https://twitter.com/progwebnews/ PWA Feature Detector https://tomayac.github.io/pwa-feature-detector/ Mobile Era PWA: https://mobileera.rocks/ Workbox: https://workboxjs.org Webhint: https://webhint.io PWA Get Started: https://developers.google.com/web/progressive-web-apps/ https://developer.microsoft.com/en-us/windows/pwa Excellent post on PWA: https://developers.google.com/web/updates/2015/12/getting-started-pwa
Recording date: 2018-09-13 Tweet John Papa https://twitter.com/john_papa Ward Bell https://twitter.com/wardbell Dan Wahlin https://twitter.com/danwahlin (0:03:30) Ward asks Dan when there are too many end to end tests (0:04:23) Dan talks about how he got into end to end tests (0:06:42) Ward talks about how he approaches testing a component (0:07:50) Dan talks about how deep routes in javascript frameworks help end to end testing (0:10:00) John asks Dan about how testing workflows can be a sweet spot for end to end tests (0:10:47) John asks Dan how he uses id vs class in elements to locate what he wants to test (0:12:20) Dan mentions how he uses css selectors to locate what he wants to test (0:12:50) Ward says don't drill down through your HTML to locate elements for testing (0:15:47) Dan talks about his experience with Protractor and Selenium https://www.seleniumhq.org/ (0:16:26) Dan talks about how he uses Cypress.io https://www.cypress.io/ (0:18:40) Dan talks abot how Cypress.io doesn't work in all browsers (0:19:10) Ward mentions how he uses Test Cafe http://devexpress.github.io/testcafe/ (0:19:50) Dan discusses his pain points for testing child routing without end to end tests (0:21:00) Dan says he wrote his first 5 or 10 tests with Cypress within an hour (0:21:36) Ward says end to end tests can be more fragile and slower than unit tests (0:21:56) Ward says his large team uses end to end tests because it makes sure that nobody breaks anybody else (0:24:25) Dan says Cypress is pretty fast to run (0:24:58) Dan says he uses TypeScript a lot (0:25:20) John asks Dan "how fast is fast?" (0:27:00) John asks Dan to clarify how he handles authenticating during an end to end test (0:28:30) Ward asks Dan how if he opens the browser for each test, or once for the entire sequence of tests (0:30:00) Dan disucsses how he uses containers for testing (0:21:40) Edge browser https://www.microsoft.com/en-us/windows/microsoft-edge (0:23:37) Sauce Labs https://saucelabs.com/ (0:31:28) John talks about security expert Brian Clark https://twitter.com/_clarkio (0:32:10) Ward discusses how animations can cause tests to run slower (0:33:30) Dan says Cypress is good at responding in github (0:34:03) Cypress on twitter https://twitter.com/Cypress_io (0:34:14) Cypress github issues https://github.com/cypress-io/cypress/issues (0:38:25) Dan talks about Electron https://electronjs.org/ (0:39:00) Dan talks about time travel in cypress's test tools (0:42:03) Cross browser testing in Cypress.io https://github.com/cypress-io/cypress/issues/310 (0:49:00) John asks Dan about how you can use npm install for cypress (0:50:19) Dan talks about how it works (Cypress.io) https://www.cypress.io/how-it-works/ (0:51:10) Cypress Docs https://docs.cypress.io/guides/overview/why-cypress.html (0:53:47) Someone to follow: Brandon Roberts https://twitter.com/brandontroberts (0:54:05) Someone to follow: Tracy Lee https://twitter.com/ladyleet and https://www.thisdot.co/labs (0:55:00) Someone to follow: Netanel Basal https://twitter.com/NetanelBasal and https://github.com/datorama/akita (0:55:48) Someone to follow: Alyssa Nicoll https://twitter.com/AlyssaNicoll More Resources Wahlin Consulting (https://codewithdan.com)
Recording date: 2018-09-13 John Papa https://twitter.com/john_papa Ward Bell https://twitter.com/wardbell Aysegul Yonet https://twitter.com/AysSomething $50 off to register for DevInteresections in Dec 2018 http://bit.ly/RTJS_Dev_Registration (0:02:10) Mailbag: AssemblyScript and TypeScript with D3 (0:02:36) Ward asks Aysegul what AssemblyScript is (0:04:28) AssemblyScript https://github.com/AssemblyScript/assemblyscript (0:05:07) D3 docs https://d3js.org/ (0:06:46) D3 visualization examples https://github.com/d3/d3/wiki/Gallery (0:09:20) John asks how we should make the decision on when to use a visualization (0:12:07) Ward aks for an example of something Aysegul has done recently with D3 (0:17:07) John asks Aysegul where people can learn the basics for D3 (0:19:30) Aysegul talks about her favorite videos on D3 https://www.youtube.com/watch?v=DTjLcLytNt8 (0:20:45) Aysegul discusses challenges she faced with working with D3 (0:23:50) Ward asks about testing D3 (0:25:38) Ward asks how much time does someone need to invest to become a D3 developer (0:26:49) https://www.tableau.com/ (0:31:38) D3 with rxjs https://github.com/Reactive-Extensions/RxJS/tree/master/examples/d3 (0:34:11) egghead and d3 https://egghead.io/lessons/d3-get-started-with-d3 (0:34:36) D3 at Pluralsight https://app.pluralsight.com/library/courses/d3js-data-visualization-fundamentals/table-of- contents (0:34:59) Udacity and D3 https://www.udacity.com/course/data-visualization-and-d3js--ud507 (0:38:18) Aysegul at AngularConnect 2016 https://www.youtube.com/watch?v=3i8voRuZL70 (0:41:47) code 4 good https://github.com/Yonet/Code4Good (0:43:07) Katerina Skroumpelou https://twitter.com/psybercity (0:43:51) Nicholas Jamieson https://medium.com/@cartant $50 off to register for DevInteresections in Dec 2018 http://bit.ly/RTJS_Dev_Registration
Recording date: 2018-09-11 Tweet John Papa https://twitter.com/john_papa Ward Bell https://twitter.com/wardbell Brian Holt https://twitter.com/holtbt (0:01:23) "Lady Gaga" writes in for the mailbag (0:03:25) How do we tackle the challenges we face in web development (0:05:55) Brian discusses his view on scaling to human teams (0:06:20) Defining "large" applications, and application size (0:07:10) How the human dimension plays into scale (0:07:15) Scaling Angular http://angular.io/ at Reddit (0:08:10) Brian discusses how you don't miss a business deadline (0:09:40) Communication between engineers, product teams, design teams, and C levels is important (0:09:59) Ward asks how to balance process vs getting things done (0:11:15) Brian talks about his experience with process at Netflix (0:12:57) LinkedIN and having a real Jira expert to set up the process and investing in their tools (0:15:36) DevOps experiences can be very different for Node.js (0:16:25) Brian talks about the importance of getting a full CI pipeline and high code quality (0:17:10) Brian says code doesn't age well, so tools like ESLint help create guidelines (0:17:45) Brian talks about how he uses TypeScript with React https://reactjs.org/ (0:20:55) Brian states "that which you cannot automate, you cannot enforce" (0:22:30) Nit picks and their effect on development (0:23:52) John asks Brian about the usage of Flow https://reactjs.org/docs/static-type-checking.html and TypeScript https://www.typescriptlang.org/ in React (0:29:20) Brian discusses when to delete code and keeping code easier to read (0:30:50) Brian loves opening PRs with more deletion that additions (0:32:00) Ward asks Brian how communication works up and down, and across the component trees in React (0:33:01) Brian talks about Prop drilling https://reactjs.org/docs/components-and-props.html (0:33:37) Brian talks about Flux http://facebook.github.io/flux/docs/overview.html#content and Redux https://redux.js.org/ (0:35:00) Brian tells us about something that's better for data state management (Suspense) (0:35:00) Dan Abramov https://twitter.com/dan_abramov and Suspense in React https://www.youtube.com/watch?v=6g3g0Q_XVb4 (0:37:00) Brian says most of the time context https://reactjs.org/docs/context.html will serve you better than Redux (0:38:30) John says someone to follow is Max Koretskyi - https://twitter.com/maxim_koretskyi https://blog.angularindepth.com/ (0:39:12) Ward says someone to follow is Rick Strahl https://twitter.com/RickStrahl (0:39:12) Rick has a blog post questioning if css/html has evolved far enough https://weblog.west- wind.com/posts/2018/May/31/Web-Code-is-a-solved-Problem-How-about-fixing-Web-UI-next (0:40:39) Brian says someone to follow is Necoline Hubner https://twitter.com/necolinehubner More Resources react https://reactjs.org/ redux https://redux.js.org/ ngrx (redux in Angular) https://medium.com/ngrx vuex (redux in Vue) https://vuex.vuejs.org/ Webpack https://webpack.js.org/ Parcel https://parceljs.org/ React's context API: https://reactjs.org/docs/context.html React’s forthcoming “timeslice” and “suspense” APIs: https://blog.pusher.com/time-slice-suspense-api-react-17/ Maxim Koretsky ("ngWizard”) https://blog.angularindepth.com/@maxim.koretskyi
Welcome to Real Talk JavaScript, the weekly talk-show with advice and insight into the technologies and practices currently being used to build web applications in the real world. Each week, John Papa and Ward Bell will be talking to industry experts about their experiences writing, deploying, and maintaining web applications in HTML, CSS, and JavaScript. Send questions or show ideas and follow the show on Twitter: @RealTalkJS Follow John and Ward: @John_Papa and @WardBell
Panel: Alyssa Nicholl Joe Eames John Papa Ward Bell Special Guests: Martin Jakubik In this episode, the Adventures in Angular panel talk with Martin Jakubik and he has been working with Angular for the last three years. He has one large and one small Angular application, which the panel talks about. Show Topics: 2:31 – Alyssa likes to be called... 2:40 – Alyssa: You have a large and small application – what makes it small? Is it the user-base? 2:56 – Martin: It is one module out of ten or twenty components. 2: 59 – Panelist: Only 1 Angular module? 3:47 – Panelist: Joe went off on how much he hates modules. I am sorry JP we had to throw that in that? 4:04 – Joe: I am an anti-modulist. 4:11 – Martin: Just one module. 4:21 – Panelist: When you are building an application with one module – start us from the beginning, what does it look like? 4:38 – Martin: It is actually quite special. It has to run in an iFrame, and all it does it allows the user to add into the experiment. 5:05 – Alyssa: Is it like a CMS? 5:10 – Martin: It is like Google Optimize. The application is quite simple and every component is in that one module. 5:36 – Panelist: How many do you have? 5:44 – Martin: There are less than 10 services and 20 components at most. 5:57 – Panelist: I feel personally, I feel like that I a decent size? 6:11 – Panelist: That makes perfect sense. If there is no routing or nothing... 6:40 – Panelist: Asks a question, and clarifies the question to Martin. 7:48 – Panelist: It is nice and clean. 7:55 – Panelist: I do, too. 8:08 – Alyssa: How new is it? 8:15 – Panelist: June/July? 8:32 – Martin: I am using the new style. 9:01 – Panelist: I am leery of using it. 9:13 - Panelist: I would like to clarify. When you mention you have 20 components... 9:40 - Panelist: Do it. 10:34 – Panelist: Webpack. Can you explain what that is and how you solved it? 10:57 – Martin: I don’t think I did anything special. I wanted to know how it works. I used webpack and used their configurations. Several months into the project then I... 11:40 – Panelist: Why did you decide not to use the CLI? This is like an Iron Man thing. 11:55 – Panelist: I think it’s a pain thing. 12:05 – Martin: I wanted to know how it works. 12:32 – Martin: I started from scratch, I can’t remember. 12:44 – Panelist: Whenever I use webpack it makes my head spin. 12:56 – Martin: The application was very simple. I was doing more blogging. 13:45 – Panelist: It is doing more configurations on the fly for you. It’s wonderful if it works and if it doesn’t work then I don’t know what you’d do. 14:17 – Martin: That’s why I did it, so I can appreciate all the magic. 14:30 – Panelist: How big is big? 14:36 – Martin: Enterprise level. 100 different components. 15:06 – Panelist chimes in. 15:13 – Panelist: That is complex. 15:28 – Panelist: let’s add more modules to add to the complexity... 15:55 – Alyssa: When you took your app to the CLI was that hard? 16:06 – Martin: That took me one whole day. The module is so simple that’s why. 16:32 – Panelist talks about this topic. 17:39 – Panelist asks a question. 17:53 – Panelist: Fixing any problem ... ever work on tooling help people if they have their stuff in the right file name? 18:18 – Martin: I used Cypress. 18:58 – Panelist: Under what situation would you recommend it to anyone? Do it your own webpack configuration? 19:23 – Martin: Only if... 19:51 – Alyssa: What if you wanted to add a watermark to each file, do you have to stop adding the CLI? 20:13 – Panelist: So am I...what are the boundaries, I don’t know what they are? I’m curious. 20:41 – Panelist: Are you asking, Alyssa, how you would customize it? 21:09 – Panelist: You won’t loose all the features that you get. You now elected out of that place where they had it; webpack configurations. 22:12 – Panelist: What happened to it ejecting? How do you get it out of there? 22:26 – Good question! I have – I like to play with scissors. 22:43 – Advertisement 23:32 – Panelist reads a message from the company. How do you get that voice? 24:10 – First you have to have a really deep sinus cold. 25:00 – Panelist: Do you live without eject? I really don’t care. What I care about...Scratch that! I want to know what kinds of things you can’t do with a CLI that would drive you to do your own application? What other things could you not do in webpack. 25:50 – Martin: I wanted to see how it works. 25:56 – Panelist: Now I use CLI and all it’s features except testing. I use Cypress completely separate than CLI. 26:46 – Panelist: I feel like it’s talking to the one person without a cellphone. 27:01 – Panelist: Wow! I had no concept that life could be like that! I thought you had to have a cellphone. 27:29 – Martin: What does anyone use the CLI for anyways? 27:44 – Martin: I use it for unit tests. 27:52 – Panelist: Another question. 28:30 – Alyssa: You write things out by hand because it’s easier?! 28:44 – Panelist: You copy, and paste and it’s less work. 29:06 – Panelist: It feels easier. 29:22 – Joe: No, I am serious. 29:48 – Joe: Yes, I am amazing. 30:30 – Martin talks about another topic. 30:48 – Alyssa: When you generate a component do you put it into a different file? 31:29 – Panel: We are all friends here and we aren’t shaming anyone here. We are joking here. 32:00 – Alyssa: It’s that he can write it from memory. 33:08 – Panelist: I have been using Vue lately. He also talks about Angular and mentions Sarah Drasner, too. 34:26 – Panelist: Not everyone has a memory like him, though. 35:32 – Panelist: The fourth version of Renderer. 36:28 – Panelist: We are not talking about Nirvana the band, here. 36:46 – Alyssa: It will be the new Renderer. It’s out for you to try. Check out Angular Air. He was trying out IB yourself right now. People are flipping out about it. I am excited to see how my Angular app runs differently now. Here is the code that was generated, here is the code that... I am not sure that there is a promise date. Any secrets heads-up on when it will come out? 38:22 – Panelist: The big question what does this mean for my existing code? Do I have to change my existing code? 38:48 – Alyssa: The Angular team is working so that there are minimal changes. I don’t have a good answer. NGGC. For third-party libraries you run it through and it... I don’t know what that means for the community. 39:49 – Panelist: My hope is that they... 40:03 – Alyssa: For your third-party... 40:18 – Panelist: Question: between your small and large pack? What architectural differences are there? 40:44 – Martin: I have a template edit. 41:03 – Panelist: Come to my... 41:32 – Panel talks about talks that Jon can do. 42:13 – Panelist: True story... The panel is having fun going back and forth with jokes. 43:03 – Panelist: This kind of stuff creeps into production code. That’s the great thing about copy and paste. 43:21 – Panelist: We had a rule, though, if it happens more than once let’s put into our build. 44:20 – It’s 3 hours if you have a CI process, if you don’t... 44:33 – Console.log 44:49 – Martin chimes in. 45:14 – Panelist: Let’s talk about an iFrame in your app? 45:27 – Martin: The point is to be able to do it with any... Make sure that it doesn’t collide. The CSS wasn’t separated. I had to put my application inside an iFrame. 46:27 – Panelist: Thanks for coming on for us, Martin. 46:37 – Picks! 46:44 - Advertisement Links: Martin Jakubik’s Medium How to Copy, Cut, Paste for Beginners by Melanie Pinola Art Joker Blog @AngularMine Cypress Vue Renderer Sponsors: Angular Boot Camp Digital Ocean Get a Coder Job course Picks: Alyssa Question as my pick – About Angular 7...(47:52) True or False? Martin Thank you for having me today. Present your work more. I challenge you all to cook. Blog: Bratislava Angular Ward How to Copy, Cut, and Paste Joe Brian Holt – Eleven Tips to Scale Node.js NPM scripts – I relearned something “new” lately.
Panel: Alyssa Nicholl Joe Eames John Papa Ward Bell Special Guests: Martin Jakubik In this episode, the Adventures in Angular panel talk with Martin Jakubik and he has been working with Angular for the last three years. He has one large and one small Angular application, which the panel talks about. Show Topics: 2:31 – Alyssa likes to be called... 2:40 – Alyssa: You have a large and small application – what makes it small? Is it the user-base? 2:56 – Martin: It is one module out of ten or twenty components. 2: 59 – Panelist: Only 1 Angular module? 3:47 – Panelist: Joe went off on how much he hates modules. I am sorry JP we had to throw that in that? 4:04 – Joe: I am an anti-modulist. 4:11 – Martin: Just one module. 4:21 – Panelist: When you are building an application with one module – start us from the beginning, what does it look like? 4:38 – Martin: It is actually quite special. It has to run in an iFrame, and all it does it allows the user to add into the experiment. 5:05 – Alyssa: Is it like a CMS? 5:10 – Martin: It is like Google Optimize. The application is quite simple and every component is in that one module. 5:36 – Panelist: How many do you have? 5:44 – Martin: There are less than 10 services and 20 components at most. 5:57 – Panelist: I feel personally, I feel like that I a decent size? 6:11 – Panelist: That makes perfect sense. If there is no routing or nothing... 6:40 – Panelist: Asks a question, and clarifies the question to Martin. 7:48 – Panelist: It is nice and clean. 7:55 – Panelist: I do, too. 8:08 – Alyssa: How new is it? 8:15 – Panelist: June/July? 8:32 – Martin: I am using the new style. 9:01 – Panelist: I am leery of using it. 9:13 - Panelist: I would like to clarify. When you mention you have 20 components... 9:40 - Panelist: Do it. 10:34 – Panelist: Webpack. Can you explain what that is and how you solved it? 10:57 – Martin: I don’t think I did anything special. I wanted to know how it works. I used webpack and used their configurations. Several months into the project then I... 11:40 – Panelist: Why did you decide not to use the CLI? This is like an Iron Man thing. 11:55 – Panelist: I think it’s a pain thing. 12:05 – Martin: I wanted to know how it works. 12:32 – Martin: I started from scratch, I can’t remember. 12:44 – Panelist: Whenever I use webpack it makes my head spin. 12:56 – Martin: The application was very simple. I was doing more blogging. 13:45 – Panelist: It is doing more configurations on the fly for you. It’s wonderful if it works and if it doesn’t work then I don’t know what you’d do. 14:17 – Martin: That’s why I did it, so I can appreciate all the magic. 14:30 – Panelist: How big is big? 14:36 – Martin: Enterprise level. 100 different components. 15:06 – Panelist chimes in. 15:13 – Panelist: That is complex. 15:28 – Panelist: let’s add more modules to add to the complexity... 15:55 – Alyssa: When you took your app to the CLI was that hard? 16:06 – Martin: That took me one whole day. The module is so simple that’s why. 16:32 – Panelist talks about this topic. 17:39 – Panelist asks a question. 17:53 – Panelist: Fixing any problem ... ever work on tooling help people if they have their stuff in the right file name? 18:18 – Martin: I used Cypress. 18:58 – Panelist: Under what situation would you recommend it to anyone? Do it your own webpack configuration? 19:23 – Martin: Only if... 19:51 – Alyssa: What if you wanted to add a watermark to each file, do you have to stop adding the CLI? 20:13 – Panelist: So am I...what are the boundaries, I don’t know what they are? I’m curious. 20:41 – Panelist: Are you asking, Alyssa, how you would customize it? 21:09 – Panelist: You won’t loose all the features that you get. You now elected out of that place where they had it; webpack configurations. 22:12 – Panelist: What happened to it ejecting? How do you get it out of there? 22:26 – Good question! I have – I like to play with scissors. 22:43 – Advertisement 23:32 – Panelist reads a message from the company. How do you get that voice? 24:10 – First you have to have a really deep sinus cold. 25:00 – Panelist: Do you live without eject? I really don’t care. What I care about...Scratch that! I want to know what kinds of things you can’t do with a CLI that would drive you to do your own application? What other things could you not do in webpack. 25:50 – Martin: I wanted to see how it works. 25:56 – Panelist: Now I use CLI and all it’s features except testing. I use Cypress completely separate than CLI. 26:46 – Panelist: I feel like it’s talking to the one person without a cellphone. 27:01 – Panelist: Wow! I had no concept that life could be like that! I thought you had to have a cellphone. 27:29 – Martin: What does anyone use the CLI for anyways? 27:44 – Martin: I use it for unit tests. 27:52 – Panelist: Another question. 28:30 – Alyssa: You write things out by hand because it’s easier?! 28:44 – Panelist: You copy, and paste and it’s less work. 29:06 – Panelist: It feels easier. 29:22 – Joe: No, I am serious. 29:48 – Joe: Yes, I am amazing. 30:30 – Martin talks about another topic. 30:48 – Alyssa: When you generate a component do you put it into a different file? 31:29 – Panel: We are all friends here and we aren’t shaming anyone here. We are joking here. 32:00 – Alyssa: It’s that he can write it from memory. 33:08 – Panelist: I have been using Vue lately. He also talks about Angular and mentions Sarah Drasner, too. 34:26 – Panelist: Not everyone has a memory like him, though. 35:32 – Panelist: The fourth version of Renderer. 36:28 – Panelist: We are not talking about Nirvana the band, here. 36:46 – Alyssa: It will be the new Renderer. It’s out for you to try. Check out Angular Air. He was trying out IB yourself right now. People are flipping out about it. I am excited to see how my Angular app runs differently now. Here is the code that was generated, here is the code that... I am not sure that there is a promise date. Any secrets heads-up on when it will come out? 38:22 – Panelist: The big question what does this mean for my existing code? Do I have to change my existing code? 38:48 – Alyssa: The Angular team is working so that there are minimal changes. I don’t have a good answer. NGGC. For third-party libraries you run it through and it... I don’t know what that means for the community. 39:49 – Panelist: My hope is that they... 40:03 – Alyssa: For your third-party... 40:18 – Panelist: Question: between your small and large pack? What architectural differences are there? 40:44 – Martin: I have a template edit. 41:03 – Panelist: Come to my... 41:32 – Panel talks about talks that Jon can do. 42:13 – Panelist: True story... The panel is having fun going back and forth with jokes. 43:03 – Panelist: This kind of stuff creeps into production code. That’s the great thing about copy and paste. 43:21 – Panelist: We had a rule, though, if it happens more than once let’s put into our build. 44:20 – It’s 3 hours if you have a CI process, if you don’t... 44:33 – Console.log 44:49 – Martin chimes in. 45:14 – Panelist: Let’s talk about an iFrame in your app? 45:27 – Martin: The point is to be able to do it with any... Make sure that it doesn’t collide. The CSS wasn’t separated. I had to put my application inside an iFrame. 46:27 – Panelist: Thanks for coming on for us, Martin. 46:37 – Picks! 46:44 - Advertisement Links: Martin Jakubik’s Medium How to Copy, Cut, Paste for Beginners by Melanie Pinola Art Joker Blog @AngularMine Cypress Vue Renderer Sponsors: Angular Boot Camp Digital Ocean Get a Coder Job course Picks: Alyssa Question as my pick – About Angular 7...(47:52) True or False? Martin Thank you for having me today. Present your work more. I challenge you all to cook. Blog: Bratislava Angular Ward How to Copy, Cut, and Paste Joe Brian Holt – Eleven Tips to Scale Node.js NPM scripts – I relearned something “new” lately.
The Redux Dance Craze is on! Carl and Richard talk to Ward Bell about how Redux has becoming a key player in state management for UX stacks in modern Single Page Application development. Although Redux was originally a library to support the React component model, today there are implementations of Redux for almost any Javascript UI solution - including Angular! Ward talks about how Redux and reactive architecture makes a cleaner, tidier and more maintainable UI solution. And lots of great side conversations about various aspects of web development along the way!Support this podcast at — https://redcircle.com/net-rocks/donations
The Redux Dance Craze is on! Carl and Richard talk to Ward Bell about how Redux has becoming a key player in state management for UX stacks in modern Single Page Application development. Although Redux was originally a library to support the React component model, today there are implementations of Redux for almost any Javascript UI solution - including Angular! Ward talks about how Redux and reactive architecture makes a cleaner, tidier and more maintainable UI solution. And lots of great side conversations about various aspects of web development along the way!Support this podcast at — https://redcircle.com/net-rocks/donations
How can you be successful with a product without good documentation? You can't! Carl and Richard talk to Ward Bell, who is serving as editor in chief for Angular docs. After complaining about the quality problems with the Angular documentation, Ward found himself in charge of the problem - and has taken it on in a big way. The docs themselves are developed in GitHub, so anyone can contribute. The challenge is making sure they're good - everything is driven by coding samples that are as simple as they need to be and follow strict standards. The result is docs you can trust - first and foremost they are correct, and hopefully effective at getting you productive with Angular!Support this podcast at — https://redcircle.com/net-rocks/donations
How can you be successful with a product without good documentation? You can't! Carl and Richard talk to Ward Bell, who is serving as editor in chief for Angular docs. After complaining about the quality problems with the Angular documentation, Ward found himself in charge of the problem - and has taken it on in a big way. The docs themselves are developed in GitHub, so anyone can contribute. The challenge is making sure they're good - everything is driven by coding samples that are as simple as they need to be and follow strict standards. The result is docs you can trust - first and foremost they are correct, and hopefully effective at getting you productive with Angular!Support this podcast at — https://redcircle.com/net-rocks/donations
Carl and Richard chat with IdeaBlade man Ward Bell about the latest in Breeze and the whole concept of building web clients that can function in a disconnected state. It's possible with modern browsers to store information locally, which can help your web app survive an intermittent connection. Ward talks about how Breeze, his open source tool for caching, validation and querying, helps solve the disconnected problem. The challenge is finding the right patterns of development so that you don't have to litter your code with connectivity testing, just handle failures when they come without losing the user's work. Easy, right?Support this podcast at — https://redcircle.com/net-rocks/donations
Carl and Richard chat with IdeaBlade man Ward Bell about the latest in Breeze and the whole concept of building web clients that can function in a disconnected state. It's possible with modern browsers to store information locally, which can help your web app survive an intermittent connection. Ward talks about how Breeze, his open source tool for caching, validation and querying, helps solve the disconnected problem. The challenge is finding the right patterns of development so that you don't have to litter your code with connectivity testing, just handle failures when they come without losing the user's work. Easy, right?Support this podcast at — https://redcircle.com/net-rocks/donations
Ward is a Microsoft MVP and the V.P. of Technology at IdeaBlade (www.ideablade.com), makers of the "DevForce" .NET application development product and BreezeJS. Ward often obsesses on client technologies for business applications, data access, and development practices.
At the San Francisco stop of the .NET Rocks! Visual Studio 2012 Road Trip, Carl and Richard sat down with Ward Bell in the GitHub offices to talk about his experiences creating breeze.js. Breeze.js focuses on the plumbing needed to make Single Page Applications (SPA) on the web work well. Ward talks about key pieces of Breeze including caching, validation, automated object mapping and more. He admits his inspiration is Silverlight and how it handled this plumbing so well. Now it's available in Javascript as well!Support this podcast at — https://redcircle.com/net-rocks/donations
© 2020-2025 Ivy Podcast Discovery LLC
