Podcasts about css working group

Google is making headline news once again as it reverses course on a decision to block third-party cookies in its Chrome browser. After years of testing, planning, and delays, Google scrapped a plan to turn off third-party cookie tracking by default like Safari and Firefox already do.In other news, the annual CSS Working Group meeting wrapped up recently, and some of the exciting features the group will be focusing on this year include: the if() statement for conditional styling, cross document view transitions without the need for a JavaScript library, and (perhaps the most anticipated feature) cleaner, easier CSS anchor positioning. Vercel introduces feature flags in Next.js and SvelteKit with Vercel's Flags SDK. The Flags SDK works with any feature flag provider, and sits between the application and the source of the flags to help devs follow best practices for using feature flags, while keeping websites fast.And finally, Reddit has doubled down on blocking search engine crawlers from surfacing new posts and comments in recent weeks, and as of now, Google is the only mainstream search engine that's made a deal that will allow it to index new search results when users search for posts on Reddit.News:Paige - Exciting new CSS features coming out of this year's CSSWG meetingJack - Feature Flag Support from VercelTJ - Chrome's is no longer removing third-party cookiesBonus News:Reddit is now blocking all non-Google search engines and AI botsAll the video talks from React Conf 2024 are availableWhat Makes Us Happy this Week:Paige - Apple Watch SEJack - 3D printing (Autodesk Fusion 360 program)TJ - 2024 Paris OlympicsThanks as always to our sponsor, the Blue Collar Coder channel on YouTube. You can join us in our Discord channel, explore our website and reach us via email, or Tweet us on X @front_end_fire.Front-end Fire websiteBlue Collar Coder on YouTubeBlue Collar Coder on DiscordReach out via emailTweet at us on X @front_end_fire

Igalia's Brian Kardell and Eric Meyer chatted with seven different participants at the CSS Working Group's face to face meeting at Igalia headquarters — as it happened.

One of the things that Miriam Suzanne realized early in her developer journey is that web development is a tool - she wanted to build a website for her theater company and ended up building a career and a company around it. And not just that, but she also joined the CSS Working Group - the official standards body that determines how the CSS stack evolves. In this show, we talk about her early discovery of the power of the web, how she joins creativity with technical prowess, and how CSS is really like poetry written in the browser.

Igalia's Brian Kardell and Eric Meyer recap the recent CSS Working Group Face-to-Face meetings.

Show DescriptionJen Simmons, Apple Evangelist on the Web Developer Experience team for Safari & WebKit, stops by to talk about what Interop is, and a look ahead at new CSS features in Webkit and Safari such as JPEG XL, masks, a round function, JavaScript improvements, styling form controls, content unblocks, masonry, and more! Listen on Website →GuestsJen SimmonsGuest's Main URL • Guest's Twitter Apple Evangelist on the Web Developer Experience team for Safari & @webkit. Member of CSS Working Group. Links Can I use... Support tables for HTML5, CSS3, etc Apple Developer JPEG - JPEG XL WebKit Bugzilla Main Page SponsorsJam.devYou've probably heard of Jam.dev, it's used by more than 60,000 people. It's a free tool that saves developers a ton of frustration. It forces your teammates to make the perfect bug report. They can't do it wrong because it automatically includes a video of the bug, console logs, network requests, everything you need to debug. It automatically lists out the steps to reproduce. It's so easy to get your teammates to use. It's just a Chrome extension. When they see a bug, they click a button and right away it creates a ticket. So it saves time for them.

With the recent announcement that most major browsers support CSS nesting, Adam Argyle, Google Chrome DevRel and part of the CSS Working Group, returns to give a deep dive on the long-awaited feature. Links https://twitter.com/argyleink https://nerdy.dev https://www.linkedin.com/in/adamargyle https://github.com/argyleink https://glitch.com/@argyleink https://www.youtube.com/channel/UCBGr3ZMcV5jke40_Wrv3fNA https://thecsspodcast.libsyn.com 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: Adam Argyle.

Show DescriptionMiriam Suzanne stops by to talk about CSS updates and news on container queries, rolling out cascade layers, !important things to remember, custom properties, exit animations, CSS functions, state queries, and more. Listen on Website →GuestsMiriam SuzanneGuest's Main URL • Guest's TwitterCo-Founder of Oddbird, core contributor to Sass, author for Sitepoint and CSS Tricks, invited expert to the w3c CSS Working Group. Links mirisuzanne (Miriam Suzanne) Miriam Suzanne on CodePen Autoprefixer CSS online Lightning CSS Select an element which doesn't descend from another in CSS | chriskirknielsen Susy | OddBird Posts | OddBird Demystifying CSS Container Queries | OddBird Demystifying CSS Container Queries SponsorsMiroFind simplicity in your most complex projects with Miro. Your first three Miro boards are free when you sign up today at Miro.com

Una Kravets's journey in the tech world has been nothing short of captivating. From her dedication to creating and enhancing the user interface space to her insightful perspectives on the ever-evolving challenges of web development, Una's story is one of passion, innovation, and unwavering dedication. Her experiences span a wide range of tech endeavors, from her involvement in the W3C community and standards to her unique insights into the intricate world of web design.Una placed the start of her journey in her young childhood with Neopets, AIM, MySpace, and the Sims. She described how her passion for design slowly merged into the Web. We discussed her college studies and how she stumbled upon communities at 18. We talked about learning in the open, internships, and learning some more. We discussed how she landed at Google, got into DeveloperRelations, and came to work on the CSS Working Group and OpenUI Community Group.In this episode, Una discusses the complexities of navigating the vast web development landscape and how she has found her perfect spot in the CSS and UI space. She touches upon her involvement in working groups, the challenges of backward compatibility on the web, and the joys of Developer Relations (DevRel). Moreover, Una shares her wisdom on the importance of community involvement, whether by joining, creating, or discovering one, and the impact of documenting one's learning journey through blogging.If you want to learn more about the challenges of backward compatibility on the web and get inspiration from Una's incredible journey, then tune in to this episode!Three reasons why you should listen to the full episodeGain insights from Una's unique journey, blending her arts background with technology showcasing how diverse experiences can lead to innovative outcomes in the tech world.Dive deep into the importance of community involvement, feedback, and continuous learning, essential takeaways for anyone looking to grow in their tech career.Learn about the challenges and intricacies of web development, including backward compatibility and web standards, which are crucial for anyone keen to delve deeper into web tech.Support the show

In this supper club episode of Syntax, Wes and Scott talk with Bramus Van Damme all about CSS, what the CSS Working Group is, how he got good at blogging, setting custom property types in CSS, view transition API, and so much more. Show Notes 00:35 Welcome Bramus Van Damme 02:29 Who is Bramus? Bramus Van Damme - Developer Relations Engineer - LinkedIn Original Content – Bram.us Bramus on Twitter (@bramus) bramus on GitHub (Bramus!) 03:33 What is the CSS Working Group? CSS WG Blog w3c/csswg-drafts: CSS Working Group Editor Drafts 11:18 How did you get so good at blogging? CSS Trig functions 14:02 Scroll Driven Animations Bram.us: Scroll linked animations with scrolltimeline and viewtimeline/ Chrome Dev blog: Scroll driven animations/ MDN Animation timeline Scroll-driven-animations.style 25:53 What's going on with Houdini? IsHoudiniReadyYet.com CSS Props and Vals 27:09 Why do you need to set a custom property type in CSS? 29:08 How do you debug values in CSS? 30:12 What is Scope Styling? 34:50 But when can I use it? 36:18 What's the status of the view transition API? View Transitions 40:53 What are you looking forward to in CSS? 42:19 Would CSS ever get a strict mode? 47:05 Supper Club Questions ZSH - THE Z SHELL zsh-users/antigen: The plugin manager for zsh. web.dev Blog - Chrome Developers Welcome to Feedly 52:40 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Meetups Shameless Plugs Scroll-driven-animations.style Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

CSS all-star Adam Argyle, Chrome CSS and UI Developer Relations at Google and part of the CSS Working Group, joins us to review how CSS changed in 2022 and what we should expect in 2023. Links https://twitter.com/argyleink https://nerdy.dev https://www.youtube.com/channel/UCBGr3ZMcV5jke40_Wrv3fNA https://css-tricks.com/2022-roundup-of-web-research https://2022.stateofcss.com/en-US/ https://twitter.com/leaverou/status/806936438797307904 Tell us what you think of PodRocket We want to hear from you! We want to know what you love and hate about the podcast. What do you want to hear more about? Who do you want to see on the show? Our producers want to know, and if you talk with us, we'll send you a $25 gift card! If you're interested, schedule a call with us (https://podrocket.logrocket.com/contact-us) or you can email producer Kate Trahan at kate@logrocket.com (mailto:kate@logrocket.com) 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: Adam Argyle.

Greg Whitworth is a Senior Director of Product Management here at Salesforce. Greg started with Standards Committees in 2011 before getting involved in web platform testing and CSS Working Group, then Open UI. Today, Greg focuses his efforts on MWC, LWR Node, and standard web platform browser engagement. In today's episode, we talk with Greg about some distinctions between our old component framework Aura and our new, modern framework, Lightning Web Components (LWC). We dive into how the evolution of web standards at Salesforce is driven, the different styling of LWC, Aura's file structure compared to LWC, and much more! Show Highlights: Aura in relation to the rest of the Salesforce frameworks. Greg's experience with JavaScript. How Aura's eventing compares to LWC. What GraphQL is and how it compares to other API endpoints. Strategies to start moving an org into an LWC. How the language is continuing to evolve and improve the developer experience. What is on the roadmap. Links: Greg on LinkedIn Greg on Twitter Greg on Github Greg's blog

CSS all-star Adam Argyle, Chrome CSS and UI Developer Relations at Google and part of the CSS Working Group, joins us to review how CSS changed in 2022 and what we should expect in 2023. Links https://twitter.com/argyleink https://nerdy.dev https://www.youtube.com/channel/UCBGr3ZMcV5jke40_Wrv3fNA https://css-tricks.com/2022-roundup-of-web-research https://2022.stateofcss.com/en-US/ https://twitter.com/leaverou/status/806936438797307904 Tell us what you think of PodRocket We want to hear from you! We want to know what you love and hate about the podcast. What do you want to hear more about? Who do you want to see on the show? Our producers want to know, and if you talk with us, we'll send you a $25 gift card! If you're interested, schedule a call with us (https://podrocket.logrocket.com/contact-us) or you can email producer Kate Trahan at kate@logrocket.com (mailto:kate@logrocket.com) 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: Adam Argyle.

Igalia's Brian Kardell and Eric Meyer talk about discussions and decisions of the CSS Working Group's latest face to face meeting.

01:09 - Todd's Superpower: Advocacy For Accessibility * Getting Started * Designing With Web Standards by Jeffrey Zeldman (https://www.amazon.com/Designing-Web-Standards-Jeffrey-Zeldman/dp/0321616952) * The A11Y Project (https://www.a11yproject.com/) * W3C (https://www.w3.org/) 06:18 - Joining The W3C * The W3C Community Page (https://www.w3.org/community/) 07:44 - Getting People/Companies/Stakeholders to Care/Prioritize About Accessibility * Making A Strong Case For Accessibility by Todd Libby (https://www.smashingmagazine.com/2021/07/strong-case-for-accessibility/) * Diplomatic Advocacy * You Don't Want To Get Sued! / $$$ * “We are all temporarily abled.” 15:20 - The Domino's Pizza Story * Supreme Court hands victory to blind man who sued Domino's over site accessibility (https://www.cnbc.com/2019/10/07/dominos-supreme-court.html) 18:21 - Things That Typically Aren't Accessible And Should Be * The WebAIM Million Report (https://webaim.org/projects/million/) * WCAG (https://www.w3.org/WAI/standards-guidelines/wcag/) * Color Contrast * Missing Alt Text on Images * Form Input Labels * What's New in WCAG 2.1: Label in Name by Todd Libby (https://css-tricks.com/whats-new-in-wcag-2-1-label-in-name/) * Empty Links * Not Using Document Language * Triggering GIFS / Flashing Content * Empty Buttons – Use a Button Element!! * Tab Order * Semantic HTML, Heading Structure 26:27 - Accessibility for Mobile Devices * Target Size * Looking at WCAG 2.5.5 for Better Target Sizes (https://css-tricks.com/looking-at-wcag-2-5-5-for-better-target-sizes/) * Dragging Movements 28:08 - Color Contrast * Contrast Ratio (https://contrast-ratio.com/) 33:02 - Designing w/ Accessibility in Mind From the Very Beginning * Accessibility Advocates on Every Team * Accessibility Training 36:22 - Contrast (Cont'd) 38:11 - Automating Accessibility! * axe-core-gems (https://github.com/dequelabs/axe-core-gems) Reflections: Mae: Eyeballing for contrast. John: We are all only temporarily abled and getting the ball rolling on building accessibility in from the beginning of projects going forward and fixing older codebases. Mandy: Using alt-tags going forward on all social media posts. Todd: Accessibility work will never end. Accessibility is a right not a privilege. This episode was brought to you by @therubyrep (https://twitter.com/therubyrep) of DevReps, LLC (http://www.devreps.com/). To pledge your support and to join our awesome Slack community, visit patreon.com/greaterthancode (https://www.patreon.com/greaterthancode) To make a one-time donation so that we can continue to bring you more content and transcripts like this, please do so at paypal.me/devreps (https://www.paypal.me/devreps). You will also get an invitation to our Slack community this way as well. Transcript: JOHN: Welcome to Greater Than Code, Episode 251. I'm John Sawers and I'm here with Mae Beale. MAE: Hi, there! And also, Mandy Moore. MANDY: Hi, everyone! I'm Mandy Moore and I'm here today with our guest, Todd Libby. Todd Libby is a professional web developer, designer, and accessibility advocate for 22 years under many different technologies starting with HTML/CSS, Perl, and PHP. Todd has been an avid learner of web technologies for over 40 years starting with many flavors of BASIC all the way to React/Vue. Currently an Accessibility Analyst at Knowbility, Todd is also a member of the W3C. When not coding, you'll usually find Todd tweeting about lobster rolls and accessibility. So before I ask you what your superpower is, I'm going to make a bet and my bet is that I'm 80% positive that your superpower has something to do with lobster rolls. Am I right? [laughter] Am I right? TODD: Well, 80% of the time, you'd be right. I just recently moved to Phoenix, Arizona. So I was actually going to say advocacy for accessibility, but yes, lobster rolls and the consumption of lobster rolls are a big part. MAE: I love it. That's fantastic. MANDY: Okay. Well, tell me about the advocacy. [chuckles] TODD: So it started with seeing family members who are disabled, friends who are disabled, or have family members themselves who are disabled, and the struggles they have with trying to access websites, or web apps on the web and the frustration, the look of like they're about ready to give up. That's when I knew that I would try to not only make my stuff that I made accessible, but to advocate for people in accessibility. MAE: Thank you so much for your work. It is critical. I have personally worked with a number of different populations and started at a camp for children with critical illnesses and currently work at an organization that offers financial services for people with disabilities – well, complex financial needs, which the three target populations that we work with are people with disabilities, people with dementia, and people in recovery. So really excited to talk with you today. Thanks. TODD: You're welcome. JOHN: When you started that journey, did you already have familiarity with accessibility, or was it all just like, “Oh, I get to learn all this stuff so I can start making it better”? TODD: So I fell into it because if you're like me and you started with making table-based layouts way back in the day, because what we had—Mosaic browser, Netscape Navigator, and Internet Explorer—we were making table-based layouts, which were completely inaccessible, but I didn't know that. As the web progressed, I progressed and then I bought a little orange book by Jeffrey Zeldman, Designing with Web Standards, and that pretty much started me on my journey—semantic HTML, progressive enhancement in web standards, and accessibility as well. I tend to stumble into a lot of stuff [laughs] so, and that's a habit of mine. [laughs] MAE: It sounds like it's a good habit and you're using it to help all the other people. So I hate to encourage you to keep stumbling, but by all means. [laughter] Love it. If you were to advise someone wanting to know more about accessibility, would you suggest they start with that same book too, or what would you suggest to someone stumbling around in the dark and not hitting anything yet? TODD: The book is a little outdated. I think the last edition of his book was, I want to say 2018, maybe even further back than that. I would suggest people go on websites like The A11Y project, the a11yproject.com. They have a comprehensive list of resources, links to learning there. Twitter is a good place to learn, to follow people in the accessibility space. The other thing that, if people really want to dive in, is to join The W3C. That's a great place and there's a lot of different groups. You have the CSS Working Group, you have the accessibility side of things, which I'm a part of, the Silver Community Group, which is we're working on the Web Content Accessibility Guidelines 3.0, which is still a little ways down the road, but a lot of great people and a lot of different companies. Some of those companies we've heard of—Google, Apple, companies like that all the way down to individuals. Individuals can join as individuals if your company isn't a member of the W3C. So those are the three things that I mainly point to people. If you don't really want to dive into the W3C side of things, there's a lot of resources on the a11yproject.com website that you can look up. MANDY: So what does being a member entail? What do you have to do? Do you have to pay dues? Do you have to do certain projects, maybe start as an individual level, because I'm sure we have mostly individuals listening to the show. Me as a newbie coder, what would I do to get started as a member of this initiative? TODD: Well, I started out as an individual myself, so I joined and I can get you the link to The W3C Community Page. Go to sign up as an individual and someone will approve the form process that you go through—it's nothing too big, it's nothing complicated—and then that will start you on your way. You can join a sub group, you can join a group, a working group, and it doesn't cost an individual. Companies do pay dues to the W3C and if your company is in the W3C, you get ahold of your company's liaison and there's a process they go through to add you to a certain group. Because with me, it was adding me to The Silver Community Group. But as an individual, you can join in, you can hop right into a meeting from there, and then that's basically it. That's how you start. JOHN: What are the challenges you see in getting not only the goals of a W3C, but I'm assuming specifically around accessibility? TODD: Some of the things that I've seen is buy-in from stakeholders is probably the number one hurdle, or barrier. Companies, stakeholders, and board members, they don't think of, or in some cases, they don't care about accessibility until a company is getting sued and that's a shame. That's one of the things that I wrote about; I have an article on Smashing Magazine. Making A Strong Case for Accessibility, it's called and that is one of few things that I've come across. Getting buy-in from stakeholders and getting buy-in from colleagues as well because you have people that they don't think about accessibility, they think about a number of different things. Mostly what I've come across is they don't think about accessibility because there's no budget, or they don't have the time, or the company doesn't have the time. It's not approved by the company. The other thing that is right up there is it's a process—accessibility—making things accessible and most people think that it's a big this huge mountain to climb. If you incorporate accessibility from the beginning of your project, it's so much easier. You don't have to go back and you don't have to climb that mountain because you've waited until the very end. “Oh, we have time now so we'll do the accessibility stuff,” that makes it more hard. MAE: John, your question actually was similar to something I was thinking about with how you developed this superpower and I was going to ask and still will now. [chuckles] How did you afford all the time in the different places where you were overtime to be able to get this focus? And so, how did you make the case along the way and what things did you learn in that persuasion class of life [chuckles] that was able to allow you to have that be where you could focus and spend more time on and have the places where you work prioritize successful? TODD: It was a lot of, I call it diplomatic advocacy. So for instance, the best example I have is I had been hired to make a website, a public facing website, and a SAAS application accessible. The stakeholder I was directly reporting to, we were sitting down in a meeting one day and I said, “Well, I want to make sure that accessibility is the number one priority on these projects,” and he shot back with, “Well, we don't have the disabled users,” and that nearly knocked me back to my chair. [laughs] So that was a surprise. MAE: There's some groaning inside and I had to [chuckles] do it out loud for a moment. Ooh. TODD: Yeah, I did my internal groaning at the meeting so that just was – [chuckles] Yeah, and I remember that day very vividly and I probably will for the rest of my life that I looked at him and I had to stop and think, and I said, “Well, you never know, there's always a chance that you're able, now you could be disabled at any time.” I also pointed out that his eyeglasses that he wore are an assistive technology. So there was some light shed on that and that propelled me even further into advocacy and the accessibility side of things. That meeting really opened my eyes to not everyone is going to get it, not everyone is going to be on board, not everyone is going to think about disabled users; they really aren't. So from there I used that example. I also use what I call the Domino's Pizza card lately because “Oh, you don't want to get sued.' That's my last resort as far as advocacy goes. Other than that, it's showing a videotape of people using their product that are disabled and they can't use it. That's a huge difference maker, when a stakeholder sees that somebody can't use their product. There's numbers out there now that disabled users in this country alone, the United States, make up 25% of the population, I believe. They have a disposable income of $8 trillion. The visually disabled population alone is, I believe it was $1.6 billion, I think. I would have to check that number again, but it's a big number. So the money side of things really gets through to a stakeholder faster than “Well, your eyeglasses are a assistive technology.” So once they hear the financial side of things, their ears perk up real quick and then they maybe get on board. I've never had other than one stakeholder just saying, “No, we're just going to skip that,” and then that company ended up getting sued. So that says a lot, to me anyways. But that's how I really get into it. And then there was a time where I was working for another company. I was doing consulting for them and I was doing frontend mostly. So it was accessibility, but also at the same time, it was more the code side of things. That was in 2018. 2019, I went to a conference in Burlington, Vermont. I saw a friend of mine speaking and he was very passionate about it and that talk, and there was a couple others there as well, it lit that fire under me again, and I jumped right back in and ever since then, it's just then accessibility. MAE: You reminded me one of the arguments, or what did you say? Diplomatic advocacy statements that I have used is that we are all temporarily abled. [chuckles] Like, that's just how it is and seeing things that way we can really shift how you orient to the idea of as other and reduce the othering. But I was also wondering how long it would be before Pizza Hut came up in our combo. [laughter] MANDY: Yeah, I haven't heard of that. Can you tell us what that is? TODD: [chuckles] So it was Domino's and they had a blind user that tried to use their app. He couldn't use their app; their app wasn't accessible. He tried to use the website; the website wasn't accessible. I have a link that I can send over to the whole story because I'm probably getting bits and pieces wrong. But from what I can recall, basically, this user sued Domino's and instead of Domino's spending, I believe it was $36,000 to fix their website and their app, they decided to drag it out for a number of years through court and of course, spent more money than just $36,000. In the end, they lost. I think they tried to appeal to the Supreme Court because they've gone up as high as federal court, but regardless, they lost. They had to – and I don't know if they still have an inaccessible site, or not, or the app for that matter because I don't go to Domino's. But that's basically the story that they had; a user who tried to access the app and the website, couldn't use it, and they got taken to court. Now Domino's claimed, in the court case, that he could have used the telephone, but he had tried to use the telephone twice and was on hold for 45 minutes. So [laughs] that says a lot. JOHN: Looks like it actually did go to the Supreme Court. TODD: Yeah. Correct me if I'm wrong, I think they did not want to hear it. They just said, “No, we're not going to hear the case.” Yeah, and just think about all these apps we use and all the people that can't access those apps, or the websites. I went to some company websites because I was doing some research, big companies, and a lot of them are inaccessible. A little number that I can throw out there: every year, there's been a little over 2,500 lawsuits in the US. This year, if the rate keeps on going that it has, we're on course for over 4,000 lawsuits in the US alone for inaccessible websites. You've had companies like Target, Bank of America, Winn-Dixie, those kinds of companies have been sued by people because of inaccessible sites. MAE: Okay, but may I say this one thing, which is, I just want to extend my apologies to Pizza Hut. [laughter] MANDY: What kinds of things do you see as not being accessible that should be or easily could be that companies just simply aren't doing? TODD: The big one, still and if you go to webaim.org/projects/million, it's The WebAIM Million report. It's an annual accessibility analysis of the top 1 million home pages on the internet. The number one thing again, this year is color contracts. There are guidelines in place. WCAG, which is the Web Content Accessibility Guidelines, that text should be a 4.5:1 ratio that reaches the minimum contrast for texts. It's a lot of texts out there that doesn't even reach that. So it's color contrast. You'll find a lot of, if you look at—I'm looking at the chart right now—missing alt texts on images. If you have an image that is informative, or you have an image that is conveying something to a user, it has to have alternative text describing what's in the picture. You don't have to go into a long story about what's in the picture and describe it thoroughly; you can just give a quick overview as to what the picture is trying to convey, what is in the picture. And then another one being another failure type a is form input labels; labels that are not labeled correctly. I wrote a article about that [chuckles] on CSS-Tricks and that is, there's programmatic and there's accessible names for form labels that not only help the accessibility side of it, as far as making the site accessible, but also it helps screen reader users read forms and navigate through forms, keyboard users also. Then you have empty links and then a big one that I've seen lately is if you look up in the source code, you see the HTML tag, and the language attribute, a lot of sites now, because they use trademarks, they don't have a document language. I ran across a lot of sites that don't use a document language. They're using a framework. I won't name names because I'm not out to shame, but having that attribute helps screen reader users and I think that's a big thing. A lot of accessibility, people don't understand. People use screen readers, or other assistive technologies, for instance, Dragon NaturallySpeaking voice input. But at the same time, I've got to also add accessibility is more than just deaf, or blind. I suffer from migraines, migraine headaches so animation, or motion from say, parallax scrolling can trigger a migraine. Animations that are too fast, that also trigger migraine headache. You have flashing content that can potentially cause seizures and that's actually happened before where an animated GIF was intentionally sent to someone and it caused a seizure and almost killed the person. So there's those and then the last thing on this list that I'm looking at right now, and these are common failures, empty buttons. You have buttons that don't have labels. Buttons that have Click here. Buttons need to be descriptive. So you want to have – on my site to send me something on the contact form, it's Send this info to Todd, Click here, or something similar like that. MAE: Can you think of any, John that you know of, too? I've got a couple of mind. How about you, Mandy? MANDY: For me, because I'm just starting out, I don't know a whole lot about accessibility. That's why I'm here; I'm trying to learn. But I am really conscious and careful of some of the GIFs that I use, because I do know that some of the motion ones, especially really fast-moving ones, can cause problems, migraines, seizures for people. So when posting those, I'm really, really mindful about it. JOHN: Yeah, the Click here one is always bothers me too, because not only is it bad accessibility, it's bad UX. Like HTML loves you to turn anything into a link so you can make all the words inside the button and it's just fine. [laughs] There's so many other ways to do it that are just – even discounting the accessibility impact, which I don't want it. TODD: Yeah, and touching upon that, I'm glad you brought up the button because I was just going to let that go [chuckles] past me. I have to say and I think it was in the email where it said, “What's bothering you?” What bothers me is people that don't use the button. If you are using a div, or an anchor tag, or a span, stop it. [laughs] Just stop it. There's a button element for that. I read somewhere that anchor tag takes you somewhere, a div is a container, but button is for a button. MAE: I love that. The only other ones I could think of is related to something you said, making sure to have tab order set up properly to allow people to navigate. Again, I liked your point about you don't have to be fully blind to benefit from these things and having keyboard accessibility can benefit a lot of people for all kinds of reasons. The other one is, and I would love to hear everybody's thoughts on this one, I have heard that we're supposed to be using h1, h2, h3 and having proper setup of our HTML and most of us fail just in that basic part. That's another way of supporting people to be able to navigate around and figure out what's about to be on this page and how much should I dig into it? So more on non-visual navigation stuff. TODD: Yeah, heading structure is hugely important for keyboard users and screen reader users as well as tab order and that's where semantic HTML comes into play. If you're running semantic HTML, HTML by default, save for a few caveats, is accessible right out of the box. If your site and somebody can navigate through using let's say, the keyboard turns and they can navigate in a way that is structurally logical, for instance and it has a flow to it that makes sense, then they're going to be able to not only navigate that site, but if you're selling something on that site, you're going to have somebody buying something probably. So that's again, where tab order and heading structure comes into play and it's very important. JOHN: I would assume, and correct me if I'm wrong, or if you know this, that the same sort of accessibility enhancements are available in native mobile applications that aren't using each HTML, is that correct? TODD: Having not delved into the mobile side of things with apps myself, that I really can't answer. I can say, though, that the WCAG guidelines, that does pertain to mobile as well as desktop. There's no certain set of rules. 2.2 is where there are some new features that from mobile, for instance, target size and again, I wrote another article on CSS-Tricks about target size as well. So it's if you ever noticed those little ads that you just want to click off and get off your phone and they have those little tiny Xs and you're sitting there tapping all day? Those are the things target size and dragging movements as well. I did an audit for an app and there was a lot of buttons that were not named. A lot of the accessibility issues I ran into were the same as I would run into doing an audit on a website. I don't know anything about Swift, or Flutter, or anything like that, they pretty much fall into the same category with [inaudible] as far as accessible. JOHN: I also wanted to circle back on the first item that you listed as far as the WebAIM million thing was color contrast, which is one of those ones where a designer comes up with something that looks super cool and sleek, but it's dark gray on a light gray background. It looks great when you've got perfect eyesight, but anybody else, they're just like, “Oh my God, what's that?” That's also one of the things that's probably easiest to change site-wide; it's like you go in and you tweak the CSS and you're done in a half hour and you've got the whole site updated. So it's a great bit of low-hanging fruit that you can attach if you want to start on this process. TODD: Yeah. Color contrast is of course, as the report says, this is the number one thing and let me look back here. It's slowly, the numbers are dropping, but 85.3%, that's still a very high number of failures and there's larger text. If you're using anything over 18 pixels, or the equivalent of 18—it's either 18 points, or 18 pixels—is a 3:1 ratio. With that color contrast is how our brains perceive color. It's not the actual contrast of that color and there are people far more qualified than me going to that, or that can go into that. So what I'll say is I've seen a lot of teams and companies, “Yeah, we'll do a little over 4.5:1 and we'll call it a day.” But I always say, if you can do 7:1, or even 10:1 on your ratios and you can find a way to make your brand, or whatever the same, then go for it. A lot of the time you hear, “Well, we don't want to change the colors of our brand.” Well, your colors of your brand aren't accessible to somebody who that has, for instance, Tritanopia, which is, I think it's blues and greens are very hard to see, or they don't see it at all. Color deficiencies are a thing that design teams aren't going to check for. They're just not. Like you said, all these colors look awesome so let's just, we're going to go with that on our UI. That's one thing that I actually ran into on that SAAS product that I spoke about earlier was there was these colors and these colors were a dark blue, very muted dark blue with orange text. You would think the contrast would be oh yeah, they would be all right, but it was horrible. JOHN: You can get browser plugins, that'll show you what the page looks like. So you can check these things yourself. Like you can go in and say, “Oh, you're right. That's completely illegible.” TODD: Yeah. Firefox, like I have right here on my work machine. I have right here Firefox and it does this. There's a simulator for a visual color deficiencies. It also checks for contrast as well. Chrome has one, which it actually has a very cool eyedropper to check for color contrast. If you use the inspector also in Firefox, that brings up a little contrast thing. The WAVE extension has a contrast tool. There's also a lot of different apps. If you have a Mac, like I do, I have too many color contrast because I love checking out these color contrast apps. So I have about five different color contrast apps on my Mac, but there's also websites, too that you can use at the same time. Just do a search for polar contrast. Contrast Ratio, contrast-ratio.com, is from Lea Verou. I use that one a lot. A lot of people use that one. There's so many of them out there choose from, but they are very handy tool at designer's disposal and at developers' disposal as well. JOHN: So I'm trying to think of, like I was saying earlier, the color contrast one is one of those things that's probably very straightforward; you can upgrade your whole site in a short amount of time. Color contrast is a little trickier because it gets into branding and marketing's going to want to care about it and all that kind of stuff. So you might have a bit more battle around that, but it could probably be done and you might be able to fix, at least the worst parts of the page that have problems around that. So I'm just trying to think of the ways that you could get the ball rolling on this kind of a work. Like if you can get those early easy wins, it's going to get more people on board with the process and not saying like, “Oh, it's going to take us eight months and we have to go through every single page and change it every forum.” That sounds really daunting when you think about it and so, trying to imagine what those easy early wins are that can get people down that road. TODD: Yeah. Starting from the very outset of the project is probably the key one: incorporating accessibility from the start of the project. Like I said earlier, it's a lot easier when you do it from the start rather than waiting till the very end, or even after the product has been launched and you go back and go, “Oh, well, now we need to fix it.” You're not only putting stress on your teams, but it's eating up time and money because you're now paying everybody to go back and look at all these accessibility issues there. Having one person as a dedicated accessibility advocate on each team helps immensely. So you have one person on the development team, one person on the dev side, one person on the marketing team, starting from the top. If somebody goes there to a stakeholder and says, “Listen, we need to start incorporating accessibility from the very start, here's why,” Nine times out of ten, I can guarantee you, you're probably going to get that stakeholder onboard. That tenth time, you'll have to go as far as maybe I did and say, “Well, Domino's Pizza, or Bank of America, or Target.” Again, their ears are going to perk up and they're going to go, “Oh, well, I don't really, we don't want to get sued.” So that, and going back to having one person on each team: training. There are so many resources out there for accessibility training. There are companies out there that train, there are companies that you can bring in to the organization that will train, that'll help train. That's so easier than what are we going to do? A lot of people just sitting there in a room and go, “How are you going to do this?” Having that person in each department getting together with everybody else, that's that advocate for each department, meeting up and saying, “Okay, we're going to coordinate. You're going to put out a fantastic product that's going to be accessible and also, at the same time, the financial aspect is going to make the company money. But most of all, it's going to include a lot of people that are normally not included if you're putting out an accessible product.” Because if you go to a certain website, I can guarantee you it's going to be inaccessible—just about 99% of the web isn't accessible—and it's going to be exclusive as it's going to – somebody is going to get shut out of the site, or app. So this falls on the applications as well. Another thing too, I just wanted to throw in here for color contrast. There are different – you have color contrast text, but you also have non-text contrast, you have texts in images, that kind of contrast as well and it does get a little confusing. Let's face it, the guidelines right now, it's a very technically written – it's like a technical manual. A lot of people come up to me and said, “I can't read this. I can't make sense of this. Can you translate this?” So hopefully, and this is part of the work that I'm doing with a lot of other people in the W3C is where making the language of 3.0 in plain language, basically. It's going to be a lot easier to understand these guidelines instead of all that technical jargon. I look at something right now and I'm scratching my head when I'm doing an audit going, “Okay, what do they mean by this?” All these people come together and we agree on what to write. What is the language that's going to go into this? So when they got together 2.0, which was years and years ago, they said, “Okay, this is going to be how we're going to write this and we're going to publish this,” and then we had a lot of people just like me scratching their heads of not understanding it. So hopefully, and I'm pretty sure, 99.9% sure that it's going to be a lot easier for people to understand. MAE: That sounds awesome. And if you end up needing a bunch of play testers, I bet a lot of our listeners would be totally willing to put in some time. I know I would. Just want to put in one last plug for anybody out there who really loves automating things and is trying to avoid relying on any single developer, or designer, or QA person to remember to check for accessibility is to build it into your CI/CD pipeline. There are a lot of different options. Another approach to couple with that, or do independently is to use the axe core gems, and that link will be in the show notes, where it'll allow you to be able to sprinkle in your tests, accessibility checks on different pieces. So if we've decided we're going to handle color contrast, cool, then it'll check that. But if we're not ready to deal with another point of accessibility, then we can skip it. So it's very similar to Robocop. Anyway, just wanted to offer in some other tips and tricks of the trade to be able to get going on accessibility and then once you get that train rolling, it can do a little better, but it is hard to start from scratch. JOHN: That's a great tip, Mae. Thank you. TODD: Yeah, definitely. MANDY: Okay. Well, with that, I think it's about time we head into reflections; the point of the show, where we talk about something that we thought stood out, that we want to think about more, or a place that we can call for a call of action to our listeners, or even to ourselves. Who wants to go first? MAE: I can go first. I learned something awesome from you, Todd, which I have not thought of before, which is if I am eyeballing for “contrast,” especially color contrast, that's not necessarily what that means. I really appreciate learning that and we'll definitely be applying that in my daily life. [chuckles] So thanks for teaching me a whole bunch of things, including that. TODD: You're welcome. JOHN: I think for me, it's just the continuing reminder to – I do like the thinking that, I think Mae have brought up and also Todd was talking about earlier at the beginning about how we're all of us temporarily not disabled and that I think it helps bring some of that empathy a little closer to us. So it makes it a little more accessible to us to realize that it's going to happen to us at some point, at some level, and to help then bring that empathy to the other people who are currently in that state and really that's, I think is a useful way of thinking about it. Also, the idea that I've been thinking through as we've been talking about this is how do we get the ball rolling on this? We have an existing application that's 10 years old that's going to take a lot to get it there, but how do we get the process started so we feel like we're making progress there rather than just saying, “Oh, we did HTML form 27 out of 163. All right, back at it tomorrow.” It's hard to think about, so feeling like there's progress is a good thing. TODD: Yeah, definitely and as we get older, our eyes, they're one of the first things to go. So I'm going to need assistive technology at some point so, yeah. And then what you touched upon, John. It may be daunting having to go back and do the whole, “Okay, what are we going to do for accessibility now that this project, it's 10 years old, 15 years old?” The SAAS project that I was talking about, it was 15-year-old code, .net. I got people together; one from each department. We all got together and we ended up making that product accessible for them. So it can be done. [laughs] It can be done. JOHN: That's actually a good point. Just hearing about successes in the wild with particularly hard projects is a great thing. Because again, I'm thinking about it at the start of our project and hearing that somebody made it all through and maybe even repeatedly is hard. TODD: Yeah. It's not something that once it's done, it's done. Accessibility, just like the web, is an ever-evolving media. MANDY: For me. I think my reflection is going to be, as a new coder, I do want to say, I'm glad that we talked about a lot of the things that you see that aren't currently accessible that can be accessible. One of those things is using alt tags and right now, I know when I put the social media posts out on Twitter, I don't use the alt tags and I should. So just putting an alt tag saying, “This is a picture of our guest, Todd” and the title of the show would probably be helpful for some of our listeners. So I'm going to start doing that. So thank you. TODD: You're welcome. I'm just reminded of our talk and every talk that I have on a podcast, or with anybody just reminds me of the work that I have to do and the work that is being done by a lot of different people, other than myself as well, as far as advocacy goes in that I don't think it's ever going to be a job that will ever go away. There will always be a need for accessibility advocacy for the web and it's great just to be able to sit down and talk to people about accessibility and what we need to do to make the web better and more inclusive for everybody. Because I tweet out a lot, “Accessibility is a right, not a privilege,” and I really feel that to my core because the UN specifically says that the internet is a basic human and I went as far as to go say, “Well, so as an accessibility of that internet as well.” So that is my reflection. MAE: I'll add an alt tag for me right now is with a fist up and a big smile and a lot of enthusiasm in my heart. MANDY: Awesome. Well, thank you so much for coming on the show, Todd. It's been really great talking with you and I really appreciate you coming on the show to share with us your knowledge and your expertise on the subject of accessibility. So with that, I will close out the show and say we do have a Slack and Todd will be invited to it if he'd like to talk more to us and the rest of the Greater Than Code community. You can visit patreon.com/greaterthancode and pledge to support us monthly and again, if you cannot afford that, or do not want to pledge to help run the show, you can DM anyone of us and we will get you in there for free because we want to make the Slack channel accessible for all. Have a great week and we'll see you next time. Goodbye! Special Guest: Todd Libby.

Claire and Steph discuss the Web, and why it is absolutely crucial to know your Web fundamentals. Inspired by a recent issue on the CSS Working Group's GitHub, we bring it back to the basics.

Joy Heron talks with Rachel Andrew about CSS Layout. Rachel shares her journey as a web developer and how the web has changed over that time. They discuss Rachel’s work with the CSS working group and how developers can get involved to improve the web for the future. Rachel also talks about the current status of CSS layout and what we can expect in the near future. To wrap up, Rachel shares some practical tips and they discuss the future of the web platform.

Wie wird CSS eigentlich weiterentwickelt? Cascading Style Sheets stellen einen globalen Standard dar, der heute aus keinem Browser mehr wegzudenken ist. Daher ist die Frage wie es zur Weiterentwicklung dieser Norm kommt besonders spannend. Zusammen mit Adam Argyle, Chrome CSS Developer Advocate bei Google, finden wir darauf in Podcastfolge 55 eine Antwort – erstmals auf Englisch! Als Stylesheet-Sprache gibt CSS Gestaltungsanweisungen für HTML und XML vor. Definiert wird dieser Standard durch das W3C, kurz für World Wide Web Consortium, das als Dachorganisation der CSS Working Group auftritt. Adam ist Teil dieser Arbeitsgruppe und erzählt uns in dieser Folge, wie sich eine übergeordnete Organisation wie die W3C strukturiert. Er erklärt uns, wie die Arbeitsprozesse zur Weiterentwicklung von CSS-Vorgaben aussehen und sich aus Proposals und Drafts Implementierungen ergeben. Ausgestattet mit Tipps zu Tools und Best Practices, verrät uns Adam außerdem sein liebstes CSS-Feature! Ihr könnt Adam auf Twitter folgen, auf seiner Webseite mehr über seine Projekte erfahren und euch so zusätzlich von seiner Expertise in CSS überzeugen lassen.Diese Folge ist die erste, die wir auf Englisch veröffentlichen. Schreibt uns doch, was ihr darüber denkt – ganz einfach auf Social Media oder per Mail! Hier findet ihr, was Adam ansprach: Motion Blur Draft von Adam Draft zu cubic-bezier to take additional pairs von Adam CSS Typed Object Model CSS Houdini Spec Wiki CSS Houdini Spec Dev Timecodes (00:48) Who's Adam? (04:27) What's the CSS Working Group?(06:14) How does a new idea come to CSS?(15:35) Some exciting new CSS specs(25:16) Loved and hated CSS features(31:38) Animation curves and motion blur(33:43) Browser support(38:27) Some history of CSS(40:58) Will there be a CSS4?(45:43) How to mix JS and CSS the right way(51:55) Future of the browser platform(57:00) VisBug: a FireBug for designers(59:35) Picks of the DayPicks of the Day Adam: Hat dein Lieblings-CSS-Feature es noch nicht in alle Browser geschafft, kannst du es mit PostCSS-Preset-Env konvertieren, sodass es von den meisten Browsern verstanden wird! Tutorial: How to Use CSS Logical Properties to Control Layout Adams Tweet: Logical Property Equivalents von Höhe und Breite Sebi: Mit Wakamaifondue Eigenschaften einer Schriftart herausfinden, die man nicht direkt erfassen kann. Jojo: Vue CLI Plugin zum einfachen Überführen einer Vue Single-page Application in eine Android- oder iOS-App mithilfe von Capacitor. Schreibt uns! podcast@programmier.bar Folgt uns! Twitter Instagram Facebook Besucht uns! Meetup 

Summary Amy Kapernick loves CSS Grid Layout and thinks you should use it too! Details Who she is, what she does, speaking at conference. History of layouts, table. Background of CSS grid, it makes your code smaller. What browsers support it, falling back if not supported. Usage in the industry. CSS Working Group is driving the standard. No relationship to bootstrap. What's coming in the next version. Where you can find more info on CSS grid, or catch Amy at a conference. Full show notes

Добрый день уважаемые слушатели. Представляем новый выпуск подкаста RWpod. В этом выпуске: Ruby Ruby 2.7 adds shorthand operator for Object#method, Rails 6 adds support for timezones to Active Job, Rails 6 adds before? and after? methods to Date, DateTime, Time, and TimeWithZone, Rails 6 adds negative scopes for all enum values и Debugging in Ruby—Busting a Year-old Bug in Sprockets Diving into Ruby's #dup and #clone, Action Cable vs AnyCable: fight!, Sail - a lightweight Rails engine that brings an admin panel for managing configuration settings on a live Rails app и CryptoZombies - an interactive code school that teaches you to write smart contracts in Solidity through building your own crypto-collectables game Web .dev for all, The CSS Working Group agreed on adding many math functions и 8 Little Videos About the Firefox Shape Path Editor Frontend Bootcamp / Days in the Web, FrenchKiss.js - a blazing fast lightweight i18n library written in JavaScript, Web Accessibility Guide и JavaScript SEO

Jen Simmons—Designer Advocate at Mozilla, creator of Firefox Grid Inspector, host of Layout Land and The Web Ahead, member of the CSS Working Group, coiner of Intrinsic Web Design, and general force of nature—is Jeffrey Zeldman's guest. Everything we thought we knew about web design just changed. Making sites that sing. Designing with the viewport in mind. A time-based storytelling journey. Real whitespace on the web. Real designer/developer tools: the Shapes Editor, Grid Inspector, and next-generation fonts panel in Firefox. Links for this episode:Jen Simmons (@jensimmons) | TwitterLayout Land - YouTube - YouTubeJen SimmonsTry New Browser Features in Pre-Release Versions | FirefoxJen Simmons | LabsLayout LandTranscriptBrought to you by: Simple Contacts (Get $30 off your contacts at Simplecontacts.com/bws or enter code BWS at checkout).

Jen Simmons—Designer Advocate at Mozilla, creator of Firefox Grid Inspector, host of Layout Land and The Web Ahead, member of the CSS Working Group, coiner of Intrinsic Web Design, and general force of nature—is Jeffrey Zeldman’s guest. Everything we thought we knew about web design just changed. Making sites that sing. Designing with the viewport in mind. A time-based storytelling journey. Real whitespace on the web. Real designer/developer tools: the Shapes Editor, Grid Inspector, and next-generation fonts panel in Firefox.

Rachel Andrew is a member of the CSS Working Group and is working with CSS Grids. Show Notes: Rachel Andrew's site Book: The New CSS Layout Flexbox MDN documentation Bootstrap CSS Working Group drafts on Github: CSS grid level 1, CSS grid level 2 Grid by Example Jen Simmons (of Mozilla) CSS Grid labs Rachel Andrew writing on Smashing Magazine Newsletter: CSS Layout.news Rachel Andrew's Wikipedia page Rachel Andrew is on Twitter. Want to be on the next episode? You can! All you need is the willingness to talk about something technical. Music is by Joe Ferg, check out more music on JoeFerg.com!

Rachel Andrew returns! Rachel is a sought out expert on web design layout technologies like CSS Grid and Flexbox, an invited expert to CSS Working Group, and author of several books. Her latest book, The New CSS Layout, is out now from A Book Apart.

Rachel Andrew returns! Rachel is a sought out expert on web design layout technologies like CSS Grid and Flexbox, an invited expert to CSS Working Group, and author of several books. Her latest book, *The New CSS Layout*, is out now from A Book Apart.

Rachel Andrew returns! Rachel is a sought out expert on web design layout technologies like CSS Grid and Flexbox, an invited expert to CSS Working Group, and author of several books. Her latest book, The New CSS Layout, is out now from A Book Apart.

Brenda joins Reda to discuss CSS Grid Layout, the reasons they don't use grid frameworks as much anymore, iPad design, and the pros/cons of client vs product work. CSS Layout Club CSS Working Group "Learn CSS Grid"- Jen Simmons Neat

In this episode, I'm chatting with Rachel Andrew - an authority on CSS Grid Layout, the new specification that is redefining how we approach layout for the web. We'll cover what you need to know to get started with CSS Grid and how this will change the way you think about the web design grid. Meet Rachel Andrew Rachel Andrew is a front and back-end web developer, author and speaker. Her books include the recent Get Ready for CSS Grid Layout and she is a regular contributor to a number of publications both on and offline. Rachel is co-founder of the CMS Perch, a Google Developer Expert and an Invited Expert to the CSS Working Group. She writes about business and technology on her own site at rachelandrew.co.uk. Show Notes Rachel's website:  https://rachelandrew.co.uk/ Grid by Example:  http://gridbyexample.com/ The CSS Layout Workshop:  https://thecssworkshop.com/ Twitter:  https://twitter.com/rachelandrew Codepen:  http://codepen.io/rachelandrew/ Perch CMS:  https://grabaperch.com/ Transcript Open PDF version of this transcript in new window JackieHey everybody. This is Jackie with another episode of Rethink.fm for you. Today, I have a very special guest, Rachel Andrew, who many of you may have heard is an expert in the new CSS Grid and is also a co-founder of Perch, which is a simple CMS application. Hi Rachel. RachelHi, good to be here. JackieThanks for joining me. If I've left anything out and for anybody who doesn't know you, if you want to introduce yourself that would be awesome. RachelSure. Yes, I'm Rachel. I've been a web developer for, well, a very long time. I've been running my own business since 2001 as a developer and now, as mentioned, what we mainly do is Perch CMS. That's our product. I'm an Invited Expert to the W3C CSS Working Group, so my interest in CSS and the open web goes back a long way. I'm just back from Tokyo where I was at the CSS Working Group meeting talking about all things CSS. That's really what I do. It's mainly Perch, and then quite a bit of speaking and writing about CSS. JackieStarting off with the CSS Grid, how did you get involved with that and what role have you played? RachelI just spotted it really. In fact, it all started, I was speaking at a conference and I can't remember what about. There was workshops as part of the conference. Bert Bos, from the W3C, was doing a workshop in French, my French isn't great, but he was doing a workshop in French and showing some kind of experimental layout stuff. One of those things was a forerunner to CSS Grid. I saw this and thought, this is something we want. Then I realized that actually there was a spec had come through from Microsoft, and there was this early version of the Grid spec was developed by a team at Microsoft. It was implemented into IE10. I got my hands on that and I started building things and saying, "Yeah. This is a really good thing. This is something we want." Really it just started from there, that I was very keen to promote it and to write about it and to get people talking about it, to make sure that it was something that got implemented into other browsers and didn't just end up being something that ... Some sort of IE experiment. That's really where it all came from is I was just very keen ... I'm very aware of the fact that web developers have got quite a lot of power in terms of what ends up in browsers, if we talk and write about it and make some noise. I just wanted to start doing that, to champion this spec that I thought really was interesting and was going to solve a lot of problems. JackieCSS Grid had its beginnings with Internet Explorer? RachelThat's right, yeah. JackieWow. That is very ... It's not something I would have thought given the history with Internet Explorer. RachelIt's surprising. I mean the team now with Edge and really going quite a long way back, there's been some great stuff coming out of Microsoft and co...

CSS Grid Layout is in Firefox and Chrome, and coming to Safari. Jeffrey Zeldman talks about the new spec with one of its foremost advocates, Rachel Andrew – a web developer, writer, and public speaker from Bristol, UK. Rachel is a member of the CSS Working Group, a Google Developer Expert, the co-founder of the Perch CMS, the publisher of CSS Layout News (a weekly collection of tutorials, news, and information on all things CSS layout), and the author or co-author of countless articles and 30 books, including Get Ready for CSS Grid Layout, A Pocket Guide to CSS Modules, The Profitable Side Project Handbook, and HTML 5 For Web Designers, 2nd Edition. Links for this episode:this is rachelandrew.co.uk - the website of web developer, writer and public speaker Rachel AndrewRachel Andrew (@rachelandrew) | TwitterCSS Grid Guides on MDNA Book Apart, Get Ready for CSS Grid LayoutCSS Layout NewsPublished books authored and co-authored by Rachel AndrewPerch - The really little content management system (CMS)CSS Grid lands in Firefox 52Podcast episodes featuring Rachel AndrewThree years with CSS Grid LayoutGrid LayoutMy presentations - subjects I speak about and links to resources, video and slidesBrought to you by: Incapsula (Just visit Incapsula.com/BigWebShow and enter the code BIGWEBSHOW to get one month free). FreshBooks (To claim your month long unrestricted free trial, go to FreshBooks.com/bigwebshow and enter BIG WEB SHOW in the “How Did You Hear About Us?” section). Wix (Just go to Wix.com and create your stunning website today.)

CSS Grid Layout is in Firefox and Chrome, and coming to Safari. Jeffrey Zeldman talks about the new spec with one of its foremost advocates, Rachel Andrew – a web developer, writer, and public speaker from Bristol, UK. Rachel is a member of the CSS Working Group, a Google Developer Expert, the co-founder of the Perch CMS, the publisher of CSS Layout News (a weekly collection of tutorials, news, and information on all things CSS layout), and the author or co-author of countless articles and 30 books, including Get Ready for CSS Grid Layout, A Pocket Guide to CSS Modules, The Profitable Side Project Handbook, and HTML 5 For Web Designers, 2nd Edition.

This week, we are blessed to have Rachel Andrew as our guest. Rachel is an accomplished web developer, co-founder of Perch CMS, a Google Developer Expert, an invited expert to the CSS Working Group (which sets the direction for how CSS works in the future). For the past four years, Rachel has also been the leading authority on CSS Grid, which is set to be supported in most major browsers in early 2017. We're very glad Rachel spent some time with us, and talked about both the past and the bright future of the web. You can find Rachel in various places. Here are just a few: Website: https://rachelandrew.co.uk/ Perch CMS: https://grabaperch.com/ Edge of My Seat: http://www.edgeofmyseat.com/   Table of Contents for Episode 158 0:00 Podcast intros 2:50 Rachel's origin story: How she became a web developer 5:05 Are we entering the next Golden Age of the web? Especially when it comes to CSS and layout? 8:24 Have CSS frameworks killed the creativity of the web? Will CSS Grid end up being a replacement for Bootstrap? Or will industry-wide the creativity return? 11:12 What are some of the things that you will be able to do with CSS Grid as browser support becomes more widespread? 13:26 Why do CSS specifications take so long to get full implementation in browsers? 20:33 What are some ways that the Perch CMS differs from other CMS like WordPress, Drupal, and Joomla? 23:45 What have some of the challenges been developing and supporting a CMS? 26:15 How has the growth been with the e-commerce add-on for Perch? 28:33 Have Rachel and Drew ever considered taking VC money to invest in Perch? Why or why not? 30:23 What are Rachel's thoughts on open-source, and how does open-source contribute to the development of the web? Is there a balance that needs to be struck between donated time and sustainability? 36:12 How the Perch business model is both sustainable and supporting the growth of the agencies that use it. 37:45 Why Perch is built to be streamlined, and why that is in the best interest of the businesses that build their sites on top of Perch? 41:30 Does Rachel feel that hosted solutions like Wix or Squarespace are the main competition to Perch? How has the market for websites changed in recent years? 45:00 Rachel says specialization is the way to stand out as a web service provider. 48:59 Podcast outros.   ===================   Other Links mentioned during the show:   CSS Zen Garden http://www.csszengarden.com/ Grid By Example http://gridbyexample.com/ Using Flexible Boxes (MDN) https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes W3C CSS Working Group https://www.w3.org/Style/CSS/members.en.php3 CSS Working Group - Drafts on GitHub https://github.com/w3c/csswg-drafts Perch Runway 3 as a Headless CMS https://grabaperch.com/blog/archive/perch-runway-3-as-a-headless-cms The High Price of Free http://alistapart.com/article/the-high-price-of-free   ===================   Find bonus content for this episode on the WP-Tonic website:

Rachel Andrew (@RachelAndrew) , Managing Director and founder of edgeofmyseat.com (currently working exclusively on CMS Perch), talks withe panel on the mysterious ways of CSS Layout. Rachel has been speaking quite a lot on the subject in the developer speaking circuit for a while now. Join us as she shares her stylish insights on Grid, Flexbox, Floats, Bootstrap, Regions, and much more. Resources http://gridbyexample.com - where I keep CSS Grid Layout stuff, info about browser support, code samples, inks to other resources I dig up. http://csslayout.news - weekly newsletter on CSS Layout. http://www.slideshare.net/zomigi/using-flexbox-today-frontend-united-2016 - Zoe Gillenwater slides, Using Flexbox Today https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/ “Should I Use Grid or Flexbox?” Here is which to use and when. http://caniuse.com/#feat=flexbox https://github.com/w3c/csswg-drafts CSS Working Group drafts on GitHub https://rachelandrew.co.uk/archives/2016/03/25/css-grid-and-css-regions/ Grid plus Regions https://rachelandrew.co.uk/archives/2016/03/16/css-exclusions-and-grid-layout/ Grid plus Exclusions Solved By Flexbox - https://philipwalton.github.io/solved-by-flexbox/

Tab Atkins works for Google on the Chrome team, claiming that his position is “Web Standards Hacker”. Previously, he was a web developer for for a software company in Texas. Tab is also a member of the CSS Working Group, and participates in several other W3C groups as either a member or a contributor, including the HTML and Fonts Working Groups.

Tab Atkins works for Google on the Chrome team, claiming that his position is “Web Standards Hacker”. Previously, he was a web developer for for a software company in Texas. Tab is also a member of the CSS Working Group, and participates in several other W3C groups as either a member or a contributor, including the HTML and Fonts Working Groups.

Tab Atkins works for Google on the Chrome team, claiming that his position is “Web Standards Hacker”. Previously, he was a web developer for for a software company in Texas. Tab is also a member of the CSS Working Group, and participates in several other W3C groups as either a member or a contributor, including the HTML and Fonts Working Groups.

Once seen as unsophisticated, childish and of low artistic value, comic-book art and culture has inspired artists and designers for generations and are now are often untapped resource for web design inspiration. In this session, designer and author of Transcending CSS, Andy Clarke will examine comic book layout, conventions and colour in the context of making inspirational designs for today’s web. Andy Clarke has been working on the web for almost ten years. He is a visual web designer based in the UK and started his design consultancy Stuff and Nonsense in 1998. As lead designer and creative director, his clients include national and international businesses, charities and government bodies. Andy is a member of the Web Standards Project where he redesigned the organization’s web site in 2006. He is also an invited expert to the W3C’s CSS Working Group. Andy regularly educates web designers on how to create beautiful, accessible web sites and he speaks at workshops and conference events worldwide. He writes about design and popular culture on his blog, All That Malarkey and is the author of Transcending CSS: The Fine Art of Web Design. Licensed as Creative Commons Attribution-Noncommercial-Share Alike 3.0 (http://creativecommons.org/licenses/by-sa-nc/3.0/).