Podcast appearances and mentions of chris coyier

In this repeat episode, Chris Coyier, co-founder of CodePen, talks about the evolving landscape of HTML heading into 2025. He delves into topics like the slow evolution of HTML compared to CSS and JavaScript, the importance of backwards compatibility, new HTML elements and pseudo-elements, and the potential of declarative shadow DOM for server-side rendering in web components. Links Website: https://chriscoyier.net Codepen: https://codepen.io/chriscoyier Frontend Social: https://front-end.social/@chriscoyier Github: https://github.com/chriscoyier Threads: https://www.threads.net/@chriscoyier Bluesky: https://bsky.app/profile/chriscoyier.net We want to hear from you! How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend? Let us know by sending an email to our producer, Em, at emily.kochanek@logrocket.com (mailto:emily.kochanek@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod). Follow us. Get free stickers. Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we'll send you free PodRocket stickers! What does LogRocket do? LogRocket provides AI-first session replay and analytics that surfaces the UX and technical issues impacting user experiences. Start understanding where your users are struggling by trying it for free at LogRocket.com. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Chris Coyier.

Eric and Brian Chat with Chris Coyier about his recent post "Google Being Forced To Sell Chrome is Not Good for the Web".

Show DescriptionJason joins us to talk about his rebranding to CodeTV.dev, how Chris Coyier helped him become a star, the power of free, how he makes money with CodeTV, sponsorship and tech shows, crappy web cams, and the gear he uses to look and sound amazing. Listen on Website →GuestsJason LengstorfGuest's Main URL • Guest's TwitterJason Lengstorf is the producer of CodeTV.dev, where he helps tech companies connect with developer communities through better devrel strategy and media. Links tv for developers — CodeTV The Best React-Based Framework | Gatsby Scale & Ship Faster with a Composable Web Architecture | Netlify The Great British Bake Off Web Development Challenge Leet Heat Pilot TV for Developers Dropout Comedy Nebula Universe Sunny Nihilist Declaration Philosophize This! Episodes BenQ RD280UA Monitor iPhone Webcam for Mac Webcam Comparison Sony FX3 Camera ATEM Mini SponsorsBenQNot really but you should call us Mr or Ms BenQ!

Chris Coyier, co-founder of CodePen, talks about the evolving landscape of HTML heading into 2025. He delves into topics like the slow evolution of HTML compared to CSS and JavaScript, the importance of backwards compatibility, new HTML elements and pseudo-elements, and the potential of declarative shadow DOM for server-side rendering in web components. Links https://chriscoyier.net https://codepen.io/chriscoyier https://front-end.social/@chriscoyier https://github.com/chriscoyier https://www.threads.net/@chriscoyier https://bsky.app/profile/chriscoyier.net We want to hear from you! How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend? Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod). Follow us. Get free stickers. Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we'll send you free PodRocket stickers! What does LogRocket do? LogRocket provides AI-first session replay and analytics that surfaces the UX and technical issues impacting user experiences. Start understand where your users are struggling by trying it for free at [LogRocket.com]. Try LogRocket for free today.(https://logrocket.com/signup/?pdr) Special Guest: Chris Coyier.

Chris Coyier and Dave Rupert join Adam and Jerod for a ShopTalk & Friends conversation on the viability of the web, making content, ads to support that content, Codepen's future plans, books, side quests, and social networks devaluing links.

Chris Coyier and Dave Rupert join Adam and Jerod for a ShopTalk & Friends conversation on the viability of the web, making content, ads to support that content, Codepen's future plans, books, side quests, and social networks devaluing links.

Want to learn how to create a successful online course that generates significant revenue?In this episode, I chat with Aaron Francis, Co-Founder of Try Hard Studios, who shares his incredible journey of making $125,000 in just 30 days from their SQLite video course.Aaron reveals the proven strategies that drove their course's success, effective marketing techniques, and the common challenges they encountered.Discover how to develop a high-impact online course, implement powerful marketing tactics, and build trust with your audience to boost your sales.Timestamps:00:00 Introduction00:50 Secrets to a Successful Course Launch01:48 Marketing Strategies That Work03:09 How to Engage Your Audience Effectively09:29 Business Lessons and Common Mistakes21:54 Building Trust with Your Audience23:40 The Role of Authenticity in Content Creation26:53 Why Sharing Personal Stories Boosts Engagement39:32 The Importance of Video Content for Your Brand43:37 Influencer vs. Creator: What's the Difference?47:42 ConclusionIf you enjoyed this episode, please like and subscribe, share it with your friends, and leave us a review. We read every single one.Know more about Billion Dollar Creator: https://www.billiondollarcreator.com/Follow Nathan:Instagram: https://www.instagram.com/nathanbarry/LinkedIn: https://www.linkedin.com/in/nathanbarry/Twitter: https://twitter.com/nathanbarryWebsite: https://nathanbarry.com/Follow Aaron:Instagram: https://www.instagram.com/aarondfrancis/LinkedIn: https://www.linkedin.com/in/aarondfrancis/X: https://twitter.com/aarondfrancisYouTube: https://www.youtube.com/@aarondfrancisWebsite: https://aaronfrancis.com/Featured in this episode:High Performance SQLite: https://highperformancesqlite.com/watch/introduction-to-this-courseChris Coyier: https://chriscoyier.net/ConvertKit (soon to be Kit): https://convertkit.com/Highlights:03:27 How Marketers Identify Real Value04:17 Why Urgency Drives Sales for Creators16:00 Nathan's Livestream Plans for ConvertKit's Rebrand16:40 If It Scares You, It's Good Content19:15 Building Reputation with Effective Email Sequences26:13 Using Personal Experience to Build Audience Trust30:30 Nathan on Chris Coyier

In episode 14 of "The No Script Show," Nathan Wrigley and David Waumsley discuss the division between UX designers and JavaScript specialists, focusing on Chris Coyier's article “The Great Divide.” After halting their work together on the WP Builds podcast, due to David's shift towards minimalist web development with HTML and CSS, they launched "The No Script Show" to explore this new approach. This episode, the last to be featured on WP Builds, delves into whether the divide between HTML/CSS-first developers and JS framework specialists has narrowed over the years, touching on advancements in CSS, web components, and web standards, and examining ongoing issues such as gatekeeping and accessibility.

It turns out we had a lot of news to cover in this week's episode. We kicked it off discussing how RedwoodJS is the latest framework to support React Server Components, and has some pretty nice illustrated docs to help devs get started. Then, there was a rapid fire of interesting topics including a great new article about modern CSS from Mr. CSS Tricks himself, Chris Coyier, a new documentary film on the origin story of Node.js from the team that created the React and Ruby on Rails documentaries as well, and a footnote about a new antitrust case the US Department of Justice has leveraged against Apple. At NG Conf earlier in the week, it was announced Google's internal framework Wiz might be combining with Angular after the two teams successfully worked together to launch Angular signals primitives for 100% of YouTube's mobile web traffic to great effect. We can only hope the resulting combined framework is renamed to Wangular. And to round it all out, yet another CSS framework has popped up claiming to have all the answers to the ever pervasive feeling that CSS is hard. Will Nue CSS have the good to back up its claim? We'll have to wait and see, and give the new Promise.withResolvers a spin in the meantime.News:Paige - Wiz and Angular combine forcesJack - RedwoodJS supports RSCsTJ - What You Need to Know About Modern CSS, DOJ antitrust case against Apple, and Node.js: The Documentary | An origin storyBonus News:Nue CSSPromise.withResolvers() MDN Docs and a helpful explainer tweet from Wes BosWhat Makes Us Happy this Week:Paige - Masters of the Air TV seriesJack - Learning stuff! Like vector DBsTJ - Booking tours of the U.S. Capitol and White House through local repsThanks as always to our sponsor, the Blue Collar Coder channel on YouTube. You can join us in our Discord channel, reach out to us via email or Tweet us on X @front_end_fire.Blue Collar Coder on YouTubeBlue Collar Coder on DiscordReach out via emailTweet at us on X @front_end_fire

In this episode, we explore the latest in web development with Astro unveiling Astro DB, a fully managed, blazing fast SQL-based database that is “ridiculously easy to use.” Next, you may not know the name, but Speedometer just released version 3.0, which further solidifies its status as the browser benchmark for web app responsiveness. Next up is Pigment CSS, a zero-runtime CSS-in-JS solution from the makers of the Material UI component library that works with Next.js' app router and React Server Components. And to cap it all off, we've got new details about Rolldown, the Rust-based version of Rollup, and Chris Coyier's honest thoughts about what happened to his CSS Tricks site after it was acquired.News:Paige - Astro DBJack - Pigment CSSTJ - Speedometer 3.0 announcement. Run the test yourself.Bonus News:Rolldown - the Rust-based JS bundler is in betaChris Coyier's take on CSS TricksWhat Makes Us Happy this Week:Paige - Elgato PrompterJack - Big Shark movieTJ - Dune 2 movieThanks as always to our sponsor, the Blue Collar Coder channel on YouTube. You can join us in our Discord channel, reach out to us via email or Tweet us on X @front_end_fire.Blue Collar Coder on YouTubeBlue Collar Coder on DiscordReach out via emailTweet at us on X @front_end_fire

Allereerst moeten we onze verontschuldiging aanbieden voor de kwaliteit van deze aflevering. Helaas hadden we wat technische issues waardoor de kwaliteit van Joran niet is zoals je van ons gewend bent. Doe daarom maar net als of we Joran hebben laten inbellen via de telefoon ;). We bespreken met Joran alles over Data Science en AI en hoe hij in deze wereld terecht is gekomen. Verder bespreken we nog even kort de dood van CSS Tricks en wat oud-eigenaar Chris Coyier daarover te zeggen heeft. 01:05 - Chris Coyier over CSS-Tricks - https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/ 04:50 - In gesprek met Joran, leraar AI en Data Science aan de Hanzehogeschool Groningen 1:08:30 - Shōgun 2024 - https://www.imdb.com/title/tt2788316/ 1:11:10  - The Creator - https://www.imdb.com/title/tt11858890/

Hosts Robbie Wagner and Charles William Carpenter III welcome special guest, Chris Coyier the co-founder of CodePen and an avid web enthusiast, to share his insights on the latest trends and happenings in the tech world. Pondering over the pros and cons of GitHub desktop, discussing React's influence on teams and efficiency, grappling with the hot topics around CSS and Tailwind, and airing their thoughts on Apple's latest Vision Pro, the conversation bounces around delightfully. All along, they're savoring a pour from Barrell Craft Spirits and enjoying the occasional detour into pop culture, fitness, and more. Join them as they navigate through this tech-infused whirlwind with a dash of web nostalgia. Key Takeaways [00:48] - Discussing Movies and Pop Culture [02:32] - Introducing the Guest: Chris Coyier [03:05] - Chris's Journey with CodePen [03:56] - Chris's Other Projects and Interests [07:13] - Whiskey Tasting Begins [07:57] - Discussing the Whiskey: Barrel Bourbon [09:39] - Diving into Pop Culture: Movies and Celebrities [11:02] - Back to Whiskey: Rating the Barrel Bourbon [11:59] - Discussing Tech and Coding [25:58] - Hot Takes: Tech Debates [32:27] - Discussing the Evolution of Package Managers [33:16] - Exploring the Transition from Node to Bun [34:33] - The Impact of Vite on Development [34:46] - The Quirks of Tech Terminology [36:24] - The Shift from Global to Personalized Package Management [36:41] - The Influence of Microsoft in the Tech World [39:04] - The Evolution of Web Development and the Role of Abstractions [57:12] - The Future of Web Development: AR, VR, and AI [01:03:27] - The Impact of Tech on Everyday Life [01:03:43] - The Future of CodePen and the Tech Industry Links Chris Coyier Twitter Chris Coyier LinkedIn CodePen Connect with our hosts Robbie Wagner Chuck Carpenter Subscribe and stay in touch Apple Podcasts Spotify Google Podcasts Whiskey Web and Whatnot Whiskey Web and Whatnot Merch Enjoying the podcast and want us to make more? Help support us by picking up some of our fresh merch at https://whiskey.fund/⁠. --- Send in a voice message: https://podcasters.spotify.com/pod/show/whiskey-web-and-whatnot/message

We welcome back THE CSS guy, Chris Coyier, founder of CSS Tricks and co-founder of CodePen, as he talks to us about why he loves CSS, how to use the newest features of CSS, understanding colors, and more. Links https://chriscoyier.net https://codepen.io https://shoptalkshow.com https://twitter.com/chriscoyier https://www.linkedin.com/in/chris-coyier-1aa843100 We want to hear from you! How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend? Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod). Follow us. Get free stickers. Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we'll send you free PodRocket stickers! What does LogRocket do? LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Chris Coyier.

The amazing Chris Coyier (founder of CSS-Tricks.com and CodePen.io) sat down with us to tell us all the things in CSS that he's bad at. He even brought us a list.

In this episode, Tracy Lee is joined by co-host Jessica Wilkins and guest Chris Coyier, co-founder of CodePen, a company that provides an online code editor. They discuss various topics related to web development and technology. Chris talks about his background and his work at CodePen. They are currently working on CodePen 2.0, a major update to the platform. Chris mentions that although the interface of CodePen may not have changed much over time, there's value in maintaining reliability and consistency for users. They touch upon the challenges of keeping up with the ever-evolving landscape of web technologies. Chris expresses the importance of providing an online code editor that supports various technologies and languages, allowing users to experiment without setting up complex development environments. He also acknowledges the growing trend of AI integration in coding tools. The conversation then shifts to the debate surrounding different tools, frameworks, and technologies in the web development space. Chris emphasizes the need for cohesiveness among these technologies and their documentation, allowing developers to easily combine tools without friction. He mentions other online code editors like StackBlitz and CodeSandbox and their innovations. The interview highlights the importance of community and the role it plays in the success of projects like CodePen. Chris shares his dedication to maintaining the platform and ensuring its growth and relevance while also addressing potential business challenges, such as balancing free users and paid subscribers. The discussion reflects the dynamic nature of web development and the various factors that drive innovation and growth within the industry. Hosts Tracy Lee, CEO of This Dot Labs Jessica Wilkins, Software Engineer at This Dot Labs Guest Chris Coyier, Co-Founder of CodePen Sponsored by This Dot Labs

In this milestone 100th episode, Chuck and Robbie are joined by a round table of industry experts and web developers with different philosophies, preferences, and experiences in the tech space to share their opinions on the state of web development. The round table includes Chris Coyier, Co-Founder of CodePen; Scott Tolinski, former Owner of Level Up Tutorials; Tracy Lee, CEO and Co-Founder of This Dot Labs; and Wes Bos, Founder of BosType Inc. The panel shares their opinions on the state of web development, reflecting on the journey from vanilla JavaScript to the rise of Tailwind CSS. They delve into the impact of Tailwind CSS on modern web development, discuss exciting new front-end APIs like the View Transitions API and Anchor Positioning API, and emphasize the importance of mastering JavaScript fundamentals. In this episode, Robbie and Chuck bring industry experts together for a captivating discussion filled with valuable insights on the evolution of front-end development, new web technologies, and their interests outside of web development. Key Takeaways [01:43] - An introduction to the round table of industry experts. [03:47] - A whiskey review: Sagamore and Benchmark. [07:00] - Tech hot takes. [21:14] - Scott's experience using popover API. [23:18] - Chuck discusses Chris' talk at RenderATL. [24:38] - How ChatGPT is negatively affecting Mozilla Firefox. [28:21] - What each guest would do if they weren't in web development? [32:46] - Interesting topics on Chuck's Twitter feed. [40:46] - What makes a milk? Quotes [09:11] - “CSS is getting so complex now that it has to be compiled.” ~ Wes Bos [23:15] - “Yeah, man, HTML rules.” ~ Scott Tolinski [25:33] - “People stopped using Google as much, they're going to AI.” ~ Wes Bos Links Chris Coyier Chris Coyier Twitter Chris Coyier LinkedIn Wes Bos Wes Bos Twitter Wes Bos LinkedIn Scott Tolinski Scott Tolinski Twitter Scott Tolinski LinkedIn Tracy Lee Twitter Tracy Lee LinkedIn Kelly Vaughn Twitter Kelly Vaughn LinkedIn RenderATL CodePen Syntax Podcast Level Up Tutorials This Dot Labs Modern Web Sentry Sagamore Spirit Benchmark Kentucky Straight Bourbon Tailwind CSS Twitter Nuxt Angular React JS jQuery Ember Netflix Rust Microsoft Safari Mozilla Firefox WWCD23 Google Apple ChatGPT IMBD Adobe After Effects The Dalmore 12 Ken Wheeler Nike Trader Joe's Smartless Podcast BlackRock Ferrari Make-A-Wish Foundation Apple News Connect with our hosts Robbie Wagner Chuck Carpenter Ship Shape Subscribe and stay in touch Apple Podcasts Spotify Google Podcasts Whiskey Web and Whatnot Top-Tier, Full-Stack Software Consultants This show is brought to you by Ship Shape. Ship Shape's software consultants solve complex software and app development problems with top-tier coding expertise, superior service, and speed. In a sea of choices, our senior-level development crew rises above the rest by delivering the best solutions for fintech, cybersecurity, and other fast-growing industries. Check us out at shipshape.io.

What's the current state of CSS in 2023? Chris Coyier joins us to talk with us about the current landscape of CSS and what we should be excited about in the future. Guests: Chris Coyier - @chriscoyier Panelists: Ryan Burgess - @burgessdryan Jem Young - @JemYoung Stacy London - @stacylondoner Cole Turner - @coleturner Picks: Chris Coyier - Tempered Glass Mouse Mat Ryan Burgess - Doritos ketchup chips Ryan Burgess - Modern CSS in Real Life - Chris Coyier Jem Young - Valley Silicon: Linn Sondek Stacy London - Line of Fire (feat. Sharon Van Etten) by Junip, Elias Araya, José González, Sharon Van Etten, Tobias Winterkorn Cole Turner - No Hard Feelings Cole Turner - Crocs - the perfect outdoor shoe Episode transcript: https://www.frontendhappyhour.com/episodes/modern-css-drinking-in-style

Igalia chats/Shop Talk crossover - Brian Kardell and Eric Meyer chat with Chris Coyier and Dave Rupert from the Shop Talk Show about the economics of browsers and engines

Alice Girard Guittard finds out how much she could you really get out of a $4 VPS, Brett Cannon wonders if using TOML for .env files is a good idea, Nic Mulvaney details how they count unique visitors to a website without using cookies, UIDS, or fingerprinting, after a few months, Chris Coyier is still using the Arc browser & Alex Kladov pens a love letter to Deno.

Alice Girard Guittard finds out how much she could you really get out of a $4 VPS, Brett Cannon wonders if using TOML for .env files is a good idea, Nic Mulvaney details how they count unique visitors to a website without using cookies, UIDS, or fingerprinting, after a few months, Chris Coyier is still using the Arc browser & Alex Kladov pens a love letter to Deno.

Alice Girard Guittard finds out how much she could you really get out of a $4 VPS, Brett Cannon wonders if using TOML for .env files is a good idea, Nic Mulvaney details how they count unique visitors to a website without using cookies, UIDS, or fingerprinting, after a few months, Chris Coyier is still using the Arc browser & Alex Kladov pens a love letter to Deno.

If you are a web developer, chances are that you used CodePen more than once. You're also probably very familiar with CSS-Tricks for, well, more than just CSS tricks. The man behind these experiences, Chris Coyier, actually started his journey some time ago with a programming language called Turbo Pascal - many steps removed from web development. I sat down with Chris to talk more about his career, lessons in getting CodePen out into the world, and so much more.

Eine Woche vollgepackt mit Neuigkeiten:Jojo fasst euch alles neue zum halbjährlichen Major-Release von Java 19 zusammen. Passend dazu: Am Donnerstag, den 13.10.2022, findet unser nächstes Meetup in Bad Nauheim statt: "Why Java Rocks" mit Adam Bien!Wasmtime ist eine in Rust geschriebene Web Assembly Runtime, die nun in Version 1.0 erschienen ist.Meta steht einer neuen Klage gegenüber: Die Facebook App trackt im internen Browser jegliche Aktivitäten der Nutzer:innen. Dieses Vorgehen hatte Felix Krause kürzlich offengelegt.Open AI bringt das nächste neuronale Netz an den Start: Whisper. Es handelt sich dabei um ein Spracherkennungsnetzwerk, das auf Trainingsdaten von 680.000 Stunden beruht und mehrere Sprachen verstehen kann.TypeScript 4.9 kommt mit dem "most satisfying release ever" und führt den satisfies-Operator ein (Pun intended).Zu guter Letzt gibt's zwei Talk-Empfehlungen von Sebi: "The Web is Good Now" ist ein mitreißender Vortrag von Chris Coyier auf der CascadiaJS über den Status von Web-Technologien und was man heute alles cooles einsetzen kann. Und Adam Argyle spricht über die Snap-Scroll-Möglichkeiten per CSS.Schreibt uns! Schickt uns eure Themenwünsche und euer Feedback: podcast@programmier.barFolgt uns! Bleibt auf dem Laufenden über zukünftige Folgen und virtuelle Meetups und beteiligt euch an Community-Diskussionen. TwitterInstagramFacebookMeetupYouTube

Episode 500!!! And it has been a journey! Nearly 13 years ago we started this podcast and as of today (this episode) we've officially shipped our 500th episode. As a companion to this episode, Jerod and Adam shipped a special Backstage episode where they reflect on 500 episodes. And…not only has it been a journey for us, but it's also been a journey for our good friend Chris Coyier and CSS-Tricks — which he grew from his personal blog to a massively popular contributor driven model, complete with an editor-in-chief, a wide array of influential contributors, and advertisers to help fund the way. The news, of course, is that CSS-Tricks was recently acquired by DigitalOcean in March of 2022. We get into all the details of this deal, his journey, and the legacy of CSS-Tricks.

Episode 500!!! And it has been a journey! Nearly 13 years ago we started this podcast and as of today (this episode) we've officially shipped our 500th episode. As a companion to this episode, Jerod and Adam shipped a special Backstage episode where they reflect on 500 episodes. And…not only has it been a journey for us, but it's also been a journey for our good friend Chris Coyier and CSS-Tricks — which he grew from his personal blog to a massively popular contributor driven model, complete with an editor-in-chief, a wide array of influential contributors, and advertisers to help fund the way. The news, of course, is that CSS-Tricks was recently acquired by DigitalOcean in March of 2022. We get into all the details of this deal, his journey, and the legacy of CSS-Tricks.

This is Adam and Jerod's pre-show call before hooking up with Chris Coyier to record episode 500 of The Changelog. We've been doing these off and on for awhile now. We hang out for 30ish minutes before the show begins and ship that conversation as a bonus for our Changelog++ members. We're doing this one different. You don't hit a round number like this very often. So, here it is. A standalone Backstage episode. Thanks for listening and here's to the next 500!

What's this? A Frontend Feud! The ShopTalk guys return to defend their championship over Syntax against new contenders: Una and Adam from The CSS Podcast!

What's this? A Frontend Feud! The ShopTalk guys return to defend their championship over Syntax against new contenders: Una and Adam from The CSS Podcast!

“Creator” is a word that has really come into focus in an industry in the last few years. But content creation is nearly as old as the internet itself. And building businesses from your content…that's not new either. Just ask Chris Coyier, the founder who recently sold his hugely popular blog, CSS Tricks, to Digital Ocean. We talk about his journey, how he made money, and answer the question: are we seeing an uptick in content acquisitions as more companies realize it's a great way to establish trust. Top Takeaways: Kickstarting the CSS Tricks redesign generated a lot of revenue, but ended up resulting in a loss. Still, it did its job: it gave Chris capital to build the business.CSS Tricks has always been about ads as a way to make money. It started off as handshake deals at conferences, but the process became more formalized.The best thing you can do for advertisers and offer packages. Get them in front of all of the eyeballs you have access to. You can charge more and deliver better results. Show Notes: Chris CoyierChris on TwitterWP JukeboxKickstarter CSS TricksJoin the Creator CrewSponsored by: Nexcess | TextExpander | LearnDash

Chris Coyier is a man of many hats and has successfully started and sold websites, wrote books, and has a great tech startup. In today's bit, he offers some advice that is the key to his success.Listen to the entire episode at https://howibuilt.it/006Be sure to subscribe at https://howibuilt.it/subscribe  This clip is brought to you by WP Wallet ★ Support this podcast ★

Chris Coyier is a man of many hats and has successfully started and sold websites, wrote books, and has a great tech startup. In today's bit, he offers some advice that is the key to his success. Listen to the entire episode at https://howibuilt.it/006 Be sure to subscribe at https://howibuilt.it/subscribe This clip is brought to you by WP Wallet

Chris Coyier is a man of many hats and has successfully started and sold websites, wrote books, and has a great tech startup. In today's bit, he offers some advice that is the key to his success. Listen to the entire episode at https://howibuilt.it/006 Be sure to subscribe at https://howibuilt.it/subscribe This clip is brought to you by WP Wallet

News There is a call for WordPress users to help with the upcoming release of WordPress 6.0. This release is scheduled for May 24, 2022. There have been over 400 updates and 500 bug fixes since the last release and they could really use everybody's help to test. Jump over to make.wordpress.org to join the core slack channel and get involved. WooCommerce The WooCommerce blocks roadmap has been released. There are a lot of cool things happening over at WooCommerce with most of the work taking place right now in the WooCommerce Blocks repository with store editing. Take a look at the ways you can contribute. The plan is to release quarterly updates. From Our Contributors and Producers If you missed it, go check out the latest eCommerce minute, on the WPMinute with Dave Rodenbaugh. He provides additional news and perspective on the owner of FAST, the one-click checkout provider. Jodie Fiorenza wrote a great article on Omnichannel marketing over at WebDevStudios. With an omnichannel strategy, the customer becomes the focus of the campaign. Take a minute to read Jody's article and see if you can consult with a customer using multi-channel marketing in your business. The Admin Bar community created an anonymous WordPress Agency survey for all of their community members to ask them questions about their revenue, and various focuses (including accessibility, SEO, hosting, etc.). The results were very interesting and worth checking out. The first issue of Tiny Press went out this week by our contributor Daniel Schutzsmith. The article covers 3 WordPress design and development links. There is also a great interview of Chris Coyier from css-tricks.com by Nathan Wrigley on the WPTavern podcast about his sale of CSS Tricks to Digital Ocean. This is a great podcast to learn about Chris' journey. Friend of the show Scott Bolinger is seeking a buyer for his pop-up plugin Holler Box. New Members: We would like to thank Courtney Robertson for buying a coffee this week and joining as a monthly member. Next up: Simplified Business Minute with Sam Muñoz “Block Editor Dev Minute” by Aurooba Ahmed Thanks to all of the members who shared these links today: Lisa Sabin-WilsonBirgit Pauli-HaackDaniel SchutzsmithDave RodenbaughLiam Dempsey

On the podcast today we have Chris Coyier. Chris has been a user and educator in the WordPress and web development space for many years. He's an author, podcaster, developer, but is perhaps best known for his website CSS-Tricks. CSS-Tricks has been a valuable source of information about CSS for over 15 years. Updated multiple times a week, the site has articles about every aspect of styling your website. It's gone through several iterations over those years. A few weeks ago Chris decided it was time for CSS-Tricks to find a new home and it's now owned and operated by Digital Ocean, a popular cloud computing service provider. This podcast is all about the journey that Chris has had running CSS-Tricks.

On the podcast today we have Chris Coyier. Chris has been a user and educator in the WordPress and web development space for many years. He's an author, podcaster, developer, but is perhaps best known for his website CSS-Tricks. CSS-Tricks has been a valuable source of information about CSS for over 15 years. Updated multiple times a week, the site has articles about every aspect of styling your website. It's gone through several iterations over those years, not just in how it looks, but in the manner in which it is managed and maintained. If you're searching for any CSS related content, it's quite likely that CSS-Tricks will be one of the top results. A few weeks ago Chris decided it was time for CSS-Tricks to find a new home and it's now owned and operated by Digital Ocean, a popular cloud computing service provider. This podcast is all about the journey that Chris has had running CSS-Tricks. We go right back to the start and talk about what his motivations were for starting, and then continuing to run the site. Were there any low points where he lost his motivation to keep it going? How has the site changed over the years? Why did he finally decide to sell the site, and how he landed upon Digital Ocean as the new custodian? It's been a remarkable journey, and you'll hear that there were many twists and turns along the way. Useful links. CSS-Tricks Chris' personal website Digging into WordPress Codepen

It's the WPMinute! I am Birgit Pauli-Haack with the following news and updates. This episode is brought to you by the WPMinute. This is a great place to be a part of the community, get access to the private Discord server and be part of the news. You know how it goes, everything I mention here will be linked up in the newsletter and the blog post. Check out thewpminute.com for the links. News Does WordPress need more than one Block Theme? Justin Tadlock over at the WPTavern wrote a recent article covering different opinions of having thousands of Block Themes when Full Site Editing is really becoming a thing. There are strong opinions for having one theme or having many. Do you provide one block theme that builders can expand on OR do you offer many themes to provide a site for new users to fill in their custom information? Go read the article to understand each approach. If you would like to test out a block theme with FSE check out the article by Misha Rudrastyh on Learning Full Site Editing with the Kubrick Block Theme. It is a great basic tutorial that clearly explains. WooCommerce WooCommerce started rolling out automatic updates with patches for WooCommerce 3.5–6.3. This fix contains important security improvements for the PayPal Standard payment gateway (deprecated since July 2021). Please make sure to update your site if you don't get the update automatically. Events Buddy Works is having a Webinar on How to Automate Gutenberg block development in WP projects on March 23rd, 2022 at 5:00 PM UTC. If you are interested in how to start WordPress block development head on over to their website to register. From Our Contributors and Producers Voting for Torque's 2022 Plugin Madness is now open. In its seventh year, this bracket-style competition pits the best plugins from around the community against each other. CSS-Tricks has been acquired by DigitalOcean. Chris Coyier will still be working at CSS-Tricks so you can expect things to pretty much remain the same with DigitalOcean continuing to produce high-quality content on front-end development. Ronald Huereca wrote a detailed article for WordPress plugin development with a table of contents over at Media Ron. He covers the Tips, Tricks, and Guidelines for Navigating WordPress.org.  Tim Ferriss and Matt Mullenweg are in Antarctica on the most recent podcast of the Tim Ferriss Show.  They explore personal fears, discuss bucket lists, grief and craft some life missions. You can even hear Tim's Best Penguin Impressions (#578). This is a long podcast full of interesting tidbits and you get to hear Matt in an informal setting. There is a new update for LearnDash. The onboarding wizard in 4.0 automatically installs plugins like Certificate Builder, WooCommerce, and Course Grid depending on what options you select. To check out all the new features, jump over to LearnDash.com. Apologies to Joe Casabona for not including his "Podcast Plugin" in the recording this week. We look forward to his Creator Clock Minute in the WPMinute next week. Thanks to all of the members who shared these links today:  Michelle FrechetteBirgit Pauli-HaackMatt Cromwell Thank you to @brand_on_fire for becoming a new member of the WPMinute. ★ Support this podcast ★

Ten years after launching CodePen, Co-Founder Chris Coyier still thinks of his company as a scrappy startup. That's because CodePen, an app and social community for testing and creating web projects, still feels like a company striving to prove itself in a world of jaded developers. Nevertheless, CodePen has successfully reached developers as they're learning to code.  In this episode, Chris talks with Chuck and Robbie about his online opinions that align and differ from Robbie's, the evolution of CodePen, how they've managed to monetize, the advantages of sticking with CSS, why blogging is like grinding, and Chris' parenting advice for new dads. Key Takeaways [02:23] - A whiskey review.  [11:10] - The beauty of CodePen and a brief chat about Tampa.  [16:11] - The niche that sets CodePen apart.  [18:03] - Why going serverless is a wonderful thing.  [23:11] - How CodePen has evolved and how they have monetized.  [25:06] - How CodePen uses information for good.  [27:16] - How CSS-Tricks came to be and Chris' other digital passions.  [38:38] - What Chris thinks of Tailwind.  [44:59] - What new things are coming to CSS.  [49:42] - Chris' dad advice for Robbie.  [57:31] - A Rick Steves whatnot, complaints about Italian food, and why deadlines work.  Quotes [23:59] - “Not a day has gone by, pretty much in the 10 years we've been running this, where there isn't some kind of jaw-dropping, interesting creation on CodePen.” ~ @chriscoyier [45:25] - “If you just let CSS be, just use the language, you get all this stuff. But if you have to wait for an abstraction to come later, maybe it never does arrive or maybe it comes in a way that's too abstracted that's not all that useful. There's an advantage to just sticking to the core language.” ~ @chriscoyier [49:28] - “The rule is, just leave it alone. Do not open up somebody else's thing and reorder their inputs and commit that. Because that is just noise, and it doesn't matter.” ~ @chriscoyier Links Chris on Twitter Discord  New Riff Single Barrel Bourbon Sagamore Spirit  Jack Daniel's Jim Beam CodePen Sass Next.js JavaScript Dart Bitcoin Eyeframe Rust Go Acquia Ruby VS Code CodePen PRO Plans The CodePen Spark (CodePen newsletter) CSS-Tricks WordPress How to Fetch and Parse RSS Feeds in JavaScript Whiskey Web and Whatnot: Work-Life Balance, React, and Why Accessibility is Everything with Melanie Sumner The Legend of Zelda: Breath of the Wild Nintendo Switch Oculus Quest 2 Workrooms Rec Room on Oculus Quest Pictionary Oculus Guardian Phasmophobia Tailwind CSS National Graphic Codebase React JSX Chrome DevTools Netflix The Red Hen Rick Steves Rick Steves, Cool Dude. Europe Through The Back Door Rick Steves' Europe TV Show VSCode All Autocomplete GitHub GitHub Copilot Connect with our hosts Robbie Wagner Chuck Carpenter Ship Shape Subscribe and stay in touch Apple Podcasts Spotify Google Podcasts Whiskey Web and Whatnot Top-Tier, Full-Stack Software Consultants This show is brought to you by Ship Shape. Ship Shape's software consultants solve complex software and app development problems with top-tier coding expertise, superior service, and speed. In a sea of choices, our senior-level development crew rises above the rest by delivering the best solutions for fintech, cybersecurity, and other fast-growing industries. Check us out at shipshape.io.

In this episode, I talk to Chris Coyier and Dave Rupert from the Shop Talk Show! We talk about all sorts of topics having to do with front end development, design, and accessibility. Specifically, web components, CodePen, Eleventy, Astro, and much, much more! Intro/Outro music graciously given permission to use called, "Settle In" by Homer Gaines. Sound editing by Chris Enns of Lemon Productions. Transcripts can be found at: https://toddl.dev/podcast/transcripts/shoptalkshow/ Show Notes https://twitter.com/chriscoyier - Chris on Twitter https://twitter.com/davatron5000 - Dave on Twitter https://chriscoyier.net/ - Chris's Homepage https://daverupert.com/ - Dave's Homepage https://codepen.io/ - CodePen https://paravelinc.com/ - Paravel https://css-tricks.com/ - CSS-Tricks https://shoptalkshow.com/ - Shop Talk Show https://www.youtube.com/realcsstricks - Real CSS Tricks YouTube https://larahogan.me/donuts/ - Lara Hogan Donut Manifesto https://www.deque.com/axe/ - axe (Deque) https://tenon.io/ - Tenon https://webaim.org/ - WebAIM https://wave.webaim.org/extension/ - WAVE browser extension https://developers.google.com/web/tools/lighthouse/ - Google Lighthouse https://www.w3.org/TR/WCAG21/ - WCAG (Web Content Accessibility Guidelines) https://twitter.com/goodwitch - Glenda Sims (@goodwitch) https://astro.build/ - Astro https://slinkity.dev/ - Slinkity https://www.netflix.com/title/81228573 - Komi Can't Communicate --- Support this podcast: https://podcasters.spotify.com/pod/show/frontendnerdery/support

Chris Coyier needs no introduction and it was a pleasure to have him on the show. Being a front end engineer as well we were able to chat about CSS and front end technologies, product development and running a profitable business, virtual assistants and of course getting into the nitty-gritty of Codepen. I felt like we could have talked for hours on this one but alas it has to come to an endEdited by: Simon HoernerProduced by: Samuel Gregory and Chris AddamsTheme Music by: Chris AddamsSponsored by: Jupiter and the GiraffeWebsite: https://thattech.showYouTube: https://www.youtube.com/channel/UC4paazkqrlwtB_WW28w4GsgInstagram: @thattechshow_Twitch: https://twitch.tv/thattechshowTikTok: @thattechshowPatreon: @thattechshowLinkedIn: linkedin.com/company/thattechshow/Get in touch: hello@thattech.show Hosted on Acast. See acast.com/privacy for more information.

La velocidad de los cambios en el ámbito del front-end, ha generado una sensación de hastío o insatisfacción entre los profesionales del diseño web. No son pocos los profesionales que expresan su descontento con la complejidad o la sobre ingeniería que ha sufrido la capa de presentación de los sitios web. En este episodio nos hacemos eco de este sentimiento, a través de otro acertado artículo de Chris Coyier titulado Front-End Dissatisfaction (and Backing Off), que a su vez hace referencia a otros artículos similares. Muchos profesionales ven con escepticismo las ventajas de aplicar las últimas tecnologías a su stack de herramientas. A fin de cuentas, como se explica la web sigue funcionando con HTML y CSS, y la progresiva incorporación de frameworks y otras herramientas, diluye la sencillez del medio. Existe una presión en ocasiones infundada, por estar al día en las últimas tendencias, a menudo también debido al temor de no quedarse atrás en la carrera o mercado profesional. En el episodio comentamos este artículo sobre la evolución del front-end y nuestra opinión acerca de cómo afrontar tanto cambio. En la segunda parte del episodio volvemos (min 36:30) con la sección Backlog, donde contamos recientes experiencias relacionadas con nuestro trabajo. Hablamos sobre una aplicación de citas que le solicitaron desarrollar a Andros y también de lo poco profesional que resulta dejar textos "lorem ipsum" en una web publicada. Por último vuelve también (min 50:43) la sección Radar al podcast con algunos enlaces de recursos y herramientas de interés, relacionadas con el desarrollo web.

Si bien en la mayoría de los episodios nos centramos en una cuestión o entrevista, para este episodio hemos seleccionado dos artículos y una noticia de interés para la profesión del desarrollo web. Empezamos comentando el artículo de Chris Coyier publicado en lncrement y que lleva por título When frontend means full stack. Continuamos con una noticia reciente aparecida en Valencia Plaza y que hace referencia al descubrimiento de un grave error de seguridad en el acceso a una aplicación móvil. Por último comentamos la columna de opinión publicada en el digital El Confidencial por Eduardo Manchón y que lleva por título Las consultoras están matando al industria: la digitalización 'made in Spain' hace agua. Cuando el frontend quiere decir full stack El artículo escrito por el conocido desarrollador Chris Coyier dibuja un acertada línea sobre el estado actual de la profesión del desarrollador frontend. Según comenta Coyier en su artículo, "los desarrolladores de frontend se están haciendo preguntas que alguna vez habrían sido respondidas exclusivamente por los desarrolladores de backend". Los artículos de Chris Coyier suelen analizar con bastante certeza, la situación actual de la profesión. En este artículo se muestra cómo ha evolucionado el perfil del desarrollador web, las habilidades que se le piden a una persona encargada de la parte del frontal y cómo hoy en día, las opciones para la construcción de un sitio web, son enormemente complejas y también diversas. Quizás una de las mejores frases del artículo sea que "el término "full stack" ha llegado a significar en gran medida "un desarrollador de frontend que hace una buena cantidad de las cosas que un desarrollador de backend solía hacer". App deja al descubierto datos personales de miles de vecinos de Valencia Andros nos cuenta esta noticia aparecida recientemente en el digital Valencia Plaza, en el que se cuenta como un profesor de la Universidad de Valencia, halló importantes defectos de seguridad en la aplicación de la empresa encargada de la gestión de aguas en Valencia. Como comenta Andros, en el momento de comprobar él mismo esta información, el acceso a la app de la empresa había sido bloqueado y no se había informado del problema a los usuarios. También comentamos lo sorprendente que resulta que desde la empresa afectada, respondan que "se requieren unos mínimos conocimientos de informática para detectarlos". Digitalización made in Spain hace agua Para seguir con el mundo de las consultoras y de las aguas (curiosamente), David comenta la reciente columna de Eduardo Manchón, donde se relata el sistema de desarrollo tecnológico en España, a través de consultoras. Según explica el autor del artículo "las empresas españolas han cometido el error de delegar su digitalización y dejarla en manos de consultoras". Este artículo pone de manifiesto la necesidad de crear desde dentro de las empresas, una cultura tecnológica liderada por personas que comprendan bien como sea desarrollan los negocios en una economía digital. Como indica muy bien Manchón, "la digitalización es mucho más que crear una web o una 'app', es un aprendizaje que implica cambios profundos en las personas y en el funcionamiento de las organizaciones". En definitiva, un episodio diferente y con diversidad de temas orientados a la profesión del desarrollo y la tecnología en internet.

Talents Arena Facebook Page.What we don't know talk by Chris Coyier.Episode Picks:Alfy: Eleventy.Luay: Measuring Tech Performance: You're Probably Doing It Wrong 

This episode was brought to you by ThisisDoing.com Chris Coyier talks to Gerry McGovern about how many of the tools and resources out there make it easy for developers and designers to create bloated, heavy, energy-sapping digital designs. Chris says we need new thinking and new tools that clearly indicate when we are making design decisions that are bad for the user and bad for the planet. https://twitter.com/chriscoyier https://gerrymcgovern.com/books/world-wide-waste/ This is HCD Podcast Network EthnoPod with Jay Hasbrouck Bringing Design Closer with Gerry Scullion ProdPod with Adrienne Tan Getting Started in Design with Gerry Scullion Moments of Change with Melanie Rayment World Wide Waste with Gerry McGovern Global Jams Podcast with Adam Lawrence and Markus Edgar Hormess Connect with This is HCD Follow This is HCD us on Twitter Follow This is HCD on Instagram Sign up for our newsletter (we have lots of design giveaways!) Join the practitioner community on This is HCD Slack Channel Read articles on our This is HCD Network on Medium See omnystudio.com/listener for privacy information.

Chris and I talked about how people don't like to leave comments anymore, and how that has affected css-tricks.com, if at all. It used to be just him spinning up blog posts, but now he has a staff and they put much more effort into each post. We also talk about his journey creating and monetizing codepen.io, and how that is going. Other things we discuss include JAMstack, React, WordPress and more.

If you've done any kind of front-end design or development in the past ten years, there's a good chance you ran across a blog article by Chris Coyier. Amongst other things, we talk about his relationship with CrossFit, how CSS Tricks got started, how CodePen got started, the power of blogging, how almost all his work is public, and things that have helped him along the way in his professional career. We cover: CrossFit as a community How Chris started CSS Tricks How Chris got his start with Wufoo How Chris got funding for CodePen The idea behind CodePen How CodePen changed their homepage and went social Why Chris left WuFoo How Kickstarter was a mixed blessing for CSS Tricks How CSS Tricks has evolved CSS Trick's analytics Chris' speaking schedule Books that have changed Chris' mindset Being Nice to the Machines A few links to Chris's sites: CSS Tricks CodePen ShopTalk Show

Kris Van Houten: @krivaten | krivaten.com | Q2 Show Notes: 00:55 - Kris' Interest and Passion for Accessibility 06:07 - Using Ember for Accessibility: Pattern Adoption 10:13 - Context Switch Awareness and Managing Focus 12:08 - Asynchrony and Desired Interaction 14:04 - Building a Form Input Component 19:05 - Things That Are Hard to Catch 22:41 - Assistive Browsers? 28:17 - Making Things Accessible From the Start Resources: Building for Accessibility by Nathan Hammond @ Wicked Good Ember 2015 The A11y Project: Web Accessibility Checklist WCAG 2.0 checklists Why Don't Screen Readers Always Read What's on the Screen? Part 1: Punctuation and Typographic Symbols Mozilla Accessibility Kris' Blog Post Series on Accessibility: Part 1: What is accessibility and why should we care? Part 2: A Primer on Accessibility Part 3: Getting Our Apps Ready for Accessibility Part 4: Building an Accessible Icon Component in Ember Part 5: Building an Accessible Input Component in Ember Part 6: Building an Accessible Alert Component in Ember Part 7: Building an Accessible Numbers Component in Ember Part 8: Building an Accessible Currency Component in Ember Transcript: CHARLES: Hello, everybody and welcome to The Frontside Podcast, Episode 72. My name is Charles Lowell, a developer here at The Frontside and podcast host-in-training. With me today is Wil. WIL: Hello. CHARLES: Hey, Wil. Today, we're going to be talking about accessibility in single page applications with Kris Van Houten who is a developer at Q2. Hey, Kris. Thank you for coming on the show. Today, we're going to talk about something that I know a lot of people's minds here and probably elsewhere on the internet, it's a topic that's getting a lot more attention, which is a good thing and that's accessibility. We're going to explore the niche of accessibility as it applies to single page applications. Now, you're a frontend developer at Q2, what initially got you interested in and passionate about accessibility in general? KRIS: I honestly feel my path to passion in this area has been a little bit unorthodox in a number of ways. I basically started out in total apathy of this topic and over the last year, it has turned into a genuine interest of mine. About three years ago, I remember listening to an episode of ShopTalk Show with Dave Rupert and Chris Coyier and they kind of went on this large rant about accessibility and why more developers need to be concerned and compassion about it. Dave Rupert was talking about his contributions to the accessibility project and I'm sitting back and thinking to myself and this is back then, obviously, "Why would anyone who is blind want to use anything that I'm working on." I basically balked at the idea and disregarded it entirely. At that time, I was just getting my feet wet with Ember working on an application with a company here in Cincinnati and we had these conversations about, "I notice that we put this action or a clickable event on a div element, should we not be doing that? Is it that not something that we should be doing?" I remember sitting back and having this conversation and saying, "The ads been crawled by SEO and Ember isn't yelling at us for doing it. It still works fine so what the heck? Let's just go with it." Basically, every single app that come into since then has basically adopted that same mindset even before I joined the team so I know it's not just me who is thinking this. A lot of developers that have been exercising the same way of doing their code. CHARLES: Right, it's the path of least resistance. Everybody's got a job to do. Everybody's got features to deliver so that practice can be very easily self-perpetuating, right? KRIS: Exactly and I think a lot of developers just don't understand the semantic difference between a div or a label or a button or a link and how browsers can actually treat these difference HTML attributes or HTML tags differently because of how assistive technology can utilize them for per person's benefit. That's where I was a little over a year ago basically. When I first started at Q2, that first week, I got pulled into a discussion about design patterns which is another passion of mine and somehow, that turned into me joining a group that was to establish to figure out how to tackle the task of making our large app accessible. Basically, we had a company come in, audit our application and we got a big fat F for accessibility so it's something that we said, "We need to start tackling this problem." Being that, I just started at the company that week, I was going to tell them no but internally, I was panicking and saying, "I got to figure out what is this whole accessibility thing is and why it's important." I started looking for books, articles on the topic and trying to basically flood myself with information. Two things that really transformed my way of thinking was actually a talk given by Nathan Hammond at that Wicked Good Ember in 2015, where he shows an example of building an application without accessibility in mind so basically, doing what I was doing before which is we're adding actions to div tags, we're not really caring about semantic HTML, we're just making the feature or the application work. But then what he does, which I think is super powerful is he pulled up a colleague of his who is blind and had him try to use the application. He just goes through and you can see the struggle and he's actually vocalizing and talking about where he's [inaudible] with this application. Long story short, Nathan comes back up and makes a few adjustments. DHTML has [inaudible] up again and it's night and day difference just by changing the markup and by dropping in the Ember A11y add-on which helps with focusing the browser in certain areas of the content. He's able to totally transform how's individuals able to use the app. For me, that was a super powerful to come in and see that and see someone actually struggle with a website that they were trying to use. I think, [inaudible] where I always saw accessibility was it will only affects people who can't see and I think that's the other area where I've really started to have that paradigm shift was when I realized that this isn't just people who can't see. It's for people who have motor difficulties, who can't use a mouse and how to use a keyboard instead. People who have various vision issues, whether that's cataracts, colorblindness, glaucoma, dyslexia, some in these effects, not just DHTML but also affects color contrast, the fonts that we're using that impacts every area of application design and development and that's where I started to realize that that was where the paradigm shift happened in my mind where I started thinking to myself we really need to start talking about this more and getting other developers on board in general on this. CHARLES: It can be intimidating, especially when it feels like on a single page application, your divs have to do more, so to speak in the sense that it feels that your HTML is fatter. It's not just a thin layer but your HTML is actually part of the UI. KRIS: Exactly, yeah. CHARLES: When it comes to having this paradigmatic shift that you're describing, when you're looking at your single page applications, are there any insights into the general structure of the application that you feel like you've gained that are foundational, they kind of transcend accessibility? I guess, what I'm saying is, is there any way that you become like a better developer or been able to recognize foundational patterns because of having these insights surrounding accessibility? KRIS: I've been working with Ember for about three or four years now, basically since it was still in beta. Over the last several years, I have started to accumulate a lot of knowledge as to how we can utilize Ember to do a lot of the heavy lifting for us. When I started getting more passionate about the area of accessibility, first question that came into my mind are how can we use Ember to do some of the heavy lifting for us. For example, some of the things that I had done was go through and start working on developing a couple of components that basically cover a lot of things that I find ourselves doing [inaudible] a lot. Whether that might be a component to just plain icon on a page or a component to display input on a page. What we're able to do is using Ember, we can say, "Here's the icon I want to display but if I don't happen to pass in an aria-label attribute, for example. The component will add the 'aria-hidden=true' for me. Being able to really utilize the power of Ember to do some of that stuff for us on the back side of things, I guess you could say it magically. CHARLES: Let me stop you there for a second and unpack that example. What you're saying is, if I'm going to put an input on the page, if I actually don't assign an ARIA role, it's going to hide it from me? KRIS: No. I was thinking of an icon components, say if I'm using Font Awesome, for example and I want this with the trash icon so I wrote a component for our specific icon library that we're using. We pass in the icon that we want to display, again that could be the trash icon and we can also pass in an aria-label attribute to add a label to that span that will be read to the user. But if we don't pass that attribute in, the component will automatically add the 'aria-hidden=true' attribute for us so basically it skips over it. CHARLES: Yes so it won't be just garbage for a screen reader or someone navigating with a keyboard. WIL: Yeah, otherwise the screen reader tries to read the content of the icon CSS which is just the Unicode. CHARLES: Right. KRIS: Yeah. What we really is trying to figure out and what I've spent a lot of my time, especially in writing my blog series on this was while we are using React or Vue or Angular or Ember or whatever, how can we utilize the power of the single page application frameworks to do some of that heavy lifting for us in the background without us needing to explicitly define everything. I'd say, especially when you work on a large team like what I work on currently, we can't expect everybody to be extremely well-versed in the area of accessibility so if we can do some of the work for them and just encourage them to adopt these components in their daily workflow, it does some of the work for us. That's what we're working on and talking a lot about at Q2 is basically this pattern adoption. CHARLES: Right so it sounds like to kind of paraphrase, whether you're working in any framework most of them have this concept of components so really leaning hard on that idea to make components at the very granular level aware of their own accessibility. Is that fair to say? KRIS: Yeah, obviously there's more I'm sure as we go for the conversation about some of the things that I've tackled in this area but long story short, being able to utilize and recognize, you have this extremely powerful JavaScript framework at your disposal to do some of work for you so why not equip to do just that. CHARLES: Yeah. I guess that falls into my next question, which is there are component level concerns and if there are other component level concerns, I definitely want to hear about them but what immediately leaps to mind is there are also cross-cutting concerns of any single page application, what's the state of your URL and if you're using a router. Some of the content on the page is going to be changing and others isn't like how do you cope with that? What are the cross-cutting concerns of an application that span components and then how do you cope with them? KRIS: I think one thing that comes to mind as you're talking is the whole area of context switch awareness. If I click a link, if I go from the home page of an application to my profile page, how does a screen reader know that that content has now changed to present this new information to the user? I know what we were able to do was we were able to drop in the focusing out with component that's put out by the Ember accessibility team, which basically whenever we render to an outlet, that's utilizing this focusing outlet component, it will focus the browser to that main area and start presenting that information back to the users. One area that was at the top of our list as we start tackling accessibility was we need to figure out this whole context switch awareness thing because -- this is back then obviously when we first got started -- back then there was no way for a user to know when the page changed so they would basically be sitting there, waiting for any kind of feedback or whatsoever to be presented back to them and it just wasn't happening. I would say, managing focus is probably one of the top level concerns when it comes to single page applications because it's a single page application so if you click a link, the page isn't completely refreshing, prompting the screen reader to present the information back to user. That's one of the key areas that I think of. CHARLES: What about things like asynchrony because a lot of times, these context switches are not boom-boom, one-two. The content on which you want to focus isn't available yet. Usually, the analog from a visual UI would be a loading spinner or a progress bar. How do you deal with those to say, "Your content is not quite ready. If you're made to wait it's because we want your content to be of the highest quality." KRIS: Sure, yeah. We were able to drop in the focusing outlet components in our application and it took care of a good chunk of the work but it seems like in our application, we're doing something that might not be as conventional as the rest of the Ember community would like them to be so we might not use the model hook as we should. It's hard for the page to know when the contents actually ready, when it's been rendered to the DOM to present back to the user. One thing that I'm currently trying to tackle right now, to figure out how we can remedy that problem. I probably say, honestly that's the challenge I'm working on right now. I don't have a solid answer to that one at the moment. CHARLES: Irrespective of how it plugs into the tool that you're using, what would just be the desired interaction there, regardless of how you make it work? KRIS: I guess, conceptually what I'd be thinking about is how can we notify the user we're loading content right now and whether that we have an alert box that has the ARIA alerts, basically attributes set on it, that we could pass in new, basically notifications to it to let the user know, "Loading content. Please wait," and then once that content resolves, focus them on that main outlet where the content has been displayed to read that content back to the user. That's how we're trying to think about tackling this issue but we haven't have a time to implement it to see how it's going to work across all the different avenues of application. CHARLES: I did want to come back at the component level. are there any other ways that you can lean on Ember or lean on React or lean on Vue, if you're using a component or in framework, just talk a little bit more about how you use those to unlock your application and make it more accessible. KRIS: One thing I can think of is a way that we can enforce better usage of the framework that we're using is one that comes to mind is a component that I worked out in the blog series that I wrote was building a form input component. Especially, when you're trying to write an accessible app, I think about how can we enforce certain patterns when other developers come in later on and want to add a field to a form or use this component somewhere else in the application. What are some ways that we can enforce that they're doing everything, using the component correctly so that way it renders accessible mark up? What I tinkered around with and we actually just landed in our application is basically a form group component to where we pass in, obviously the value that the input is bound to. But we also pass in a label that is tied to the input and whenever you hit save and the app goes to refresh, if you don't pass the label, there's an assert statement that basically fires up an error into the console and lets you know, "You're trying to use this component, you need to pass into label attribute for the purposes of accessibility and here's the instructions on how to do it." We've been kind of toying around with this idea of enforcing patterns because again, we have several dozen developers at Q2 that are working on this stuff and they're not all wizards when it comes to accessibility but how can we gradually start getting them to the place where they're adopting these patterns and best practices. I'd say, doing things like that, we are enforcing patterns in the usage of the components as well is really a key. One thing that we implement it in our testing framework is the use of a Deque Labs' aXe engine to basically go through, we can pass it a chunk of HTML and it will give us any suggestions that it has to make that content more accessible. We're using that in our test library right now, in our test build and encouraging developers as they write new components, as they go in and modify components to throw new snippets in to make sure that the content that's being spit out here is accessible and then submit your PR again. Just trying to be more hands on in that way. CHARLES: So you actually running a GitHub agent or something that's actually in the same vein as your test suite or if you're taking like snapshotting with Percy for doing visual diff so you're actually running a third check, which is an accessibility check? KRIS: Right now, we were able to land the aXe engine into our test build a couple months back so we're just slowly incrementing that over time. We have a couple challenges in the way of getting Percy implemented but that is in our list of goals to have that running as well. But one thing that I really like about aXe engine in particular is that if your check fails, it refines improvements that you should be making. The nice thing about it is also spits out a link to a page on Deque Labs website. They give an explanation of what have found and basically educates your developers for you. To me, I think that's huge because again, we can't educate every single developer and expect them to be pros at this but we can utilize tooling like the aXe engine or the [inaudible] Chrome extensions or stuff like that to do some education for us. As we work towards automating this further and further by using the aXe engine in our development side of things or using Percy on the test build as well. See, there's all kinds of stuff you can do but that's where we are right now. CHARLES: I really like that idea because in comparison with what we talked about at the top of the show, about how there's this path of least resistance that developers will follow quite naturally and quite rationally, which can lead to not accessible applications. It sounds to me like what you're doing is a establishing the same path of least resistance but having that path guide you towards accessible applications and saying, "This path of least resistance thing, it can be an asset or a liability so we might as well make it an asset." KRIS: Yeah, for sure. We sit down once a week and we talk about whatever challenges we're trying to work through in terms of accessibility. We have a weekly meeting where we sit down and talk about it. I thought one of the key topics to those conversations is how do we get the other developers that are not in these meetings more aware, more informed and more up to speed with this that they care about it, that they're working on it and it's part of their inner dialogue as they're writing out new features that are going to be deployed out to our clients. Lots of challenges there. CHARLES: Yeah. We've talked about some of these problems that you catch, you're actually writing some assertions there on the test build so you'll actually fail if there's certain requirements that aren't met but what are the things that are more intangible? How do those come up in terms of accessibility? What are the things that you can't catch through automated testing? KRIS: Right now, some of things that we're having a hard time testing which Percy will help once we get that implemented is contrast ratios and stuff like that. That's one of the key things that comes to mind for me when I think of the things that are a little hard to catch. I think another thing that's hard to catch, especially at the aXe engine and stuff like that, won't necessarily catch is the flow of your dialogue. When I turn on a screen reader and it starts reading back this page and content to me, sure we can make it so that it doesn't read out the icons character code and a lot of stuff. It presents the information we want back to us but I think, having that information presented back to the user in a way that's legible, that makes sense to them is probably one of the bigger challenges that I've been working on a little bit. One that comes to my mind is like the reading of currencies or numbers. One thing that I found way helpful was Deque put out a very thorough article on how the different screen reader like JAWS, NVDA, Apple's VoiceOver, how they read different types of punctuation, different types of graphics symbols, how they read [inaudible], $123.50, what does a screen reader actually read back to you. That's where I've actually been spending so much of time lately is building on some components that instead of reading back what the streaming will read back by default, which should be, "Dollar sign, one-two-three-five-zero," having actually read back, "One hundred twenty-three dollars and fifty cents," so basically, writing a series of components, I would do some of that, again heavy-lifting force, in that way, our developers don't have to go in and manually add-ons aria-labels obviously. That's been a nice little challenge where something that's we are working on just testing right now and making sure it works right if there is any downsides to doing this but I want a person using a screen reader or other types of assistive technology to hear the information as I'm thinking about it. When I see $123.50, I'm thinking in my head that's, "One hundred twenty-three dollars and fifty cents," not in single digits one right after the other. Those are things that a lot of the automated software isn't catching. It's not catching like, "Your grammar is bad," or, "This isn't making any sense to me." It is catching like are you passing in or applying the attributes to HTML elements that you should be. Are you using semantic structure in your headings and stuff like that?" I think that's one of the areas where developer is need to get their hand dirty, turn on the a screen reader or use any array of different voice-over tools to actually listen to the content being present back to them to see how it's presented. CHARLES: Yeah, it's almost a difference between a syntax error versus a runtime error like we've got a lot tools that can catch the syntax errors and you can put those in and catch where you have something that's malformed but some sentences can be perfectly formed but make no sense and it takes a human set of eyes to make sure if that content is coherent. One of the things that if you're going to ship applications to people, you need to be able to try and measure as closely as possible the environments in which the people will be using your software so you can actually have an accurate measure of whether it works or not. For example, in the Ember world lately in the stuff that we've been doing with acceptance testing in React, we admit people are going to be using a multiplicity of browsers to access this application so it's very typical to use Testem or use Karma to fire up five different browsers, which if you're using BrowserStack, you can do fifty. You know, people are going to be using IE8.1 on Edge or on a Surface. They're going to be using Safari. They're going to be using Chrome and those often surface those issues but I feel like there's no access to the actual screen reader and assistive technologies to be able to make real assertions against those things. I imagine that it would be cool if there was some way that in Testem or in Karma, you could have one of your browsers be like an assistive browser that you could actually assert, I want to assert that it read it as, "One hundred fifty-three dollars and twenty-five cents," and is that on the horizon? Is that even possible? But it seems like something that we have to shoot for if we actually want to measure that these things are working if we actually want to capture data points. KRIS: Yeah, I totally agree. If you look at the documentation on W3 for how these different HTML attributes should be treated by the browser or by the assistive technology, long story short is this is not how -- in several cases -- certain screen readers are presenting the information back to you. It's not how it's treating the content. That's again, one of the areas I thought was way interesting about that. Deque article on punctuation and typographic symbols, which is like we should expect that this software is operating at this level to present this information back to user in such a way where it understands what the dollar symbol in front of a series of numbers means but it just isn't there yet. There's still work to be done. I'm hopeful for the day where our screen readers are a lot more powerful in that capacity. One that makes me a lot more hopeful about that is I don't know if it's just because I've been more interested about this over the last year but it does seem like I'm seeing a lot more people talk about accessibility. I'm seeing Apple putting out videos, talking about the efforts that they're making to make their software more accessible. It does give me hope that there's a lot more visibility on this now. There's a lot more people fighting for this cause to cause these companies to come back and say, "We're going to put more effort into this. We not just going to make a standard screen reader and ship it and just leave it there for five years and no one was going to touch it," but, "We're going to start making improvements." One thing that I did notice just over the last couple months even was that out of nowhere, we use Apple VoiceOver in Chrome, which isn't typically how people use it. They typically use it with Safari. But if you use in Chrome, it will actually read back to you as, "One hundred twenty-three dollars and fifty cents." When I came across that, I was kind of dumbfounded but then I was thinking to myself, the vast majority of people who are using screen readers aren't using this browser but that's really interesting that they're doing this now. I dream of that day where we can basically run a series of mark up through in a test or into a function and basically have to spit back, here's how screen readers going to present this back to you. I'm hopeful for that day. CHARLES: I'm wondering now like why don't major browser vendors, why is this not just a piece of a puzzle that comes when I download Firefox. Firefox has access to my speakers, why isn't there a web standard for how screen readers will treat content? Maybe there's an effort under way. KRIS: I sure hope so. Looking through documentation, we know how things are supposed to work, how we've agreed that they should work and now basically, we're just waiting for the different browser vendors and Microsoft and Apple to make the updates to their streaming technology as well as JAWS and NVDA. I'm hopeful that these changes come soon. These are improvements to the interface. CHARLES: Yeah. Any time there's a gap, you can see that's an opportunity for someone -- KRIS: For sure. CHARLES: -- To write some software that has some real impact. I know certainly, I would love to see some way to roll these things into our automated test suites. KRIS: Yeah. I searched for it but with no avail and it's a little bit beyond my knowledge of how to build something of that caliber. I hope someone else does it because I don't know how. [Laughter] CHARLES: Well, maybe in a year, maybe in two years, maybe in 10, although hopefully a lot sooner than that. KRIS: Yeah. I would judge that at the speed of things were going right now, I'm optimistic that we're going to have some much better solutions within the next year or two on this field. Especially of how much I'm seeing people talk about it now, how much it's becoming a part of the regular conversation of web development, application development. I'm really optimistic that we're going to see some strides in this area over the next couple years. CHARLES: Okay. With the time that we have left, I'm going to ask one more question. Kris, there is something that I wanted to ask you, which is let's say that I am a developer who is working on a team that is maybe it's big, maybe it's small. I've got an application or I'm starting an application and I have a desire to make it accessible. How do I establish that path of least resistance? What advice do you have for someone who's just about to take the first step on that journey to make sure that they have the outcome that they're looking for which is the most accessible single page app that they can have? KRIS: I think it's a great question. I would start out that answer by simply saying to encourage you to be somebody who cares enough to speak up and become an evangelist, become an educator and become an enforcer in your workplace for this work. You don't have to be the most knowledgeable person in the world on the topic. God knows I'm not and I still there were people come to me, asking me, "How do I make this feature, make the guidelines, make it accessible to screen readers," but I'm passionate about this topic and I'm interested in learning as much as I can about those. Step one, just being an evangelists for it. Be interested in it, care about it. I'd say, the next thing is just learn more about semantic HTML. I would say from a lot of the things that I've been trying to tackle with the application that I'm working on, just simply writing semantic markup takes care about 80% of my challenges. In just understanding what are the different elements, what are the different tags are for and how screen readers and other assistive technology see those things. To get started, I would say there's beginner, intermediate and advance stuff. I would say go to the accessibility project, which is just A11yProject.com and read through the content there. It's very entry-level. You can probably read through most of the content within an hour or two and really start to get a grasp as to what level of effort you're looking at in terms of your application. Once you get through that, if you still want to learn more, I'd say go over to Mozilla's developer network -- MDN -- and read through their documentation. On the topic, there is a little bit more exhaustive but it's still really easy to read and really easy to grasp. Based on a content they have shared there, I'd say more of an advance level is actually go through all the documentation on the W3. It's a lot more verbose, it covers a lot more of use cases, it has a lot more suggestions and just stuff ready to go over. I'm still working through that information. There's so much of it but I would say that's as a good place to get started with understanding the different attributes, what they're for and just the importance of writing semantic HTML. I would say some definitely good things to start tinkering with to find some of the low-hanging fruit in your application would be to use some of the assessment tools that are already out there. You have the [inaudible] little JavaScript snippet that you can put in your Chrome favorite's bar or you can use the aXe engine or if you even have an aXe Chrome extension that you could pop up in your application to basically give you report on some of the areas that you should be looking to make some improvements. I think it's important to view accessibility kind of like how a lot of bloggers view SEO, is that there's always more work to be done, there's always improvements you can make but the key is to take those first steps and start making those improvements. One of the nice things about the accessibility project and there's a couple other websites out there that have some of the lists, they basically have a checklist for you to go down. If you're just getting started with accessibility, they have a checklist of all the first things that you should be covering to get your app started in that realm, to start making those improvements. I know you guys do links in the show notes. I can definitely send you those things to those items to get people started. Another thing I find myself doing a lot is while we're talking about something in our chat at work in or just go off in the code pin and mock something out in HTML and then see how the screen reader reads our content back to me and then kind of tinker with it and do a little bit of self-discovery in how this all works together. There's a lot of options out there. I know just threw a lot at your listeners but I'd say, it all starts with being someone who cares about the topic and cares enough to start asking others to care as well. CHARLES: I think that's a fantastic answer and a great note to end on. But before we go, obviously we will include those things in the show notes but also the other thing that we're going to include is a link that you actually, I understand, have a series of blog posts related to all of the things that you've been talking about, which we'll also include. KRIS: Awesome. Thanks. CHARLES: Everybody, go read it. Thank you so much Kris for coming and talking with us about accessibility. I think you're right. It is a topic that's gaining a lot more traction and a lot more mind share in the mainstream that can only be a good thing.

Chris Coyier (@chriscoyier) returns to the show to chat about his most recent publication ‘Practical SVG'. Chris walks us through the ins and outs of working with SVG (Scalable Vector Graphics). Chris is most known for on the web for masterminding codepen.io (an in-browser social code application), creating & maintaining css-tricks.com, and podcasting on ShopTalk Show & CodePen Radio. Resources Practical SVG - https://abookapart.com/products/practical-svg About the Practical SVG book - https://css-tricks.com/wrote-book-practical-svg/ ShopTalk Show - http://shoptalkshow.com/ CodePen Radio - https://blog.codepen.io/radio/ CodePen - http://codepen.io/ The Web Platform Podcast 27 - http://thewebplatformpodcast.com/27-building-codepen The Web Platform Podcast 58 - http://thewebplatformpodcast.com/58-scalable-vector-graphics GruntIcon - https://github.com/filamentgroup/grunticon IcoMoon - https://icomoon.io/ SVGO - https://github.com/svg/svgo SVG Reference Cheat Sheet - https://developer.mozilla.org/en-US/docs/Web/SVG/Element D3 - https://d3js.org/ Sara Soueidan SVG articles - https://sarasoueidan.com/tags/svg/

In this episode, Christopher Schmitt is joined again by Chris Coyier. Publisher of the CSS Tricks community site, Coyier recently authored Practical SVG from A Book Apart.

In this episode, Christopher Schmitt is joined with Simon St. Laurent. We're talking the CSS Containment property, SVG book by Chris Coyier, Pokemon Go, Telsa's new masterplan, ComicCon, and the Star Trek: Beyond movie.

The Round Table from the SVG Summit has hosted by CSS Tricks' Chris Coyier. It's both a recap of the SVG Summit talks that happened before it and a Q+A panel with some special guests from the SVG community.