Podcasts about postcss

This week we are joined by Andrey Sitnik, the creator of PostCSS, Browserslist, Autoprefixer, and many other tools. We talk about the origins of PostCSS, the future of CSS, and the power of open source and distributed applications. We also go into OKLCH, a new color format that Andrey has been working on tooling for. https://github.com/ai https://sitnik.ru/en/ https://twitter.com/sitnikcode Become a paid subscriber our patreon, spotify, or apple podcasts for the full episode. https://www.patreon.com/devtoolsfm https://podcasters.spotify.com/pod/show/devtoolsfm/subscribe https://podcasts.apple.com/us/podcast/devtools-fm/id1566647758 https://www.youtube.com/@devtoolsfm/membership

Irina Nazarova is CEO of Evil Martians, a product development consultancy that works with startups and established businesses while creating open-source products and services. Victoria talks to Irina about getting a sense of what people are interested in learning about or what kind of problems they have, how consulting and product development complement each other, and of course, the question on everyone's minds: Is Evil Martians really evil?

Chuck and Robbie are joined by Scott Tolinski, Executive Producer at Sentry, for a recorded chat from the RenderATL conference. The trio delves into lively discussions on various tech topics and shares their candid opinions on ongoing Twitter debates. Scott opens up about his role at Sentry and how the acquisition has impacted his other venture, Level Up Tutorials. He sheds light on the new direction of Level Up Video and the exciting opportunities it brings for delivering free web development content. Scott also emphasizes the advantages of partnering with Sentry and the increased focus it allows for Syntax. He also provides insights on using a PostCSS plugin to deploy custom media queries and addresses the progress of Safari and its position compared to Internet Explorer (IE) as the browser with the poorest support for certain features. In this episode, Scott talks to Chuck and Robbie about custom media queries, browser support for new CSS features, and the acquisition of Level Up Tutorials. Key Takeaways [01:15] - Introduction to Scott Tolinski. [01:41] - A whiskey review: The Macallan Double Cask 12 Years Old. [06:11] - Tech hot takes. [14:22] - Scott talks about new features in CSS. [16:29] - Features supported in the top web browsers. [21:30] - How Scott's position at Sentry affects Level Up Tutorials. [25:14] - Tools available that aren't used frequently. [30:33] - Tools in the works that excite Scott. [32:36] - Scott talks about his time as an accountant and breakdancer. [41:10] - The most uncool things Scott likes to do. Quotes [13:41] - “People just repeat what the library authors have said over and over again even if they don't necessarily know what that means.” ~ Scott Tolinski [16:44] - “Between Firefox and Safari, they're really close into who has the worst support for things.” ~ Scott Tolinski [26:33] - “People don't realize that, to use the clipboard API, it's a one-liner of JavaScript that is really easy to remember, but everybody reaches for a library.” ~ Scott Tolinski Links Scott Tolinski Scott Tolinski Twitter Scott Tolinski LinkedIn EmberConf 2023 RenderATL 2023 Syntax Podcast Level Up Tutorials Sentry Stranahan's - Colorado Whiskey Costco Twitter Tailwind CSS Svelte React Bootstrap Ember JS GitHub Remix Kent C. Dodds Google Safari Firefox Google Chrome Arc Discord Amy Kapernick Colby Fayock James Quick DOM YouTube Astro Guitar World University of Michigan Ghostly International Matthew Dear Steam Bravo TV The Legend of Zelda: Tears of the Kingdom 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 of Syntax, Wes and Scott talk through the work in progress on the new Syntax website, how to tackle all the moving parts, what stack they picked, AI, and more. Show Notes 00:10 Welcome 00:56 Leaky roofs 02:18 How we divided the workload for the new Syntax site Issues of Syntax v2 V2 of the website 02:55 Dark mode vs light mode 04:46 Our project management stack 06:36 High school dances 08:36 Tech stack for Syntax v2 Prisma | Next-generation ORM for Node.js & TypeScript PlanetScale: The world's most advanced database platform 16:44 PostCSS and Sveltekit SvelteKit • Web development, streamlined Vercel: Develop. Preview. Ship. For the best frontend teams 17:57 Auth Authorizing OAuth Apps oAuth APIs Explained — Syntax Podcast 599 23:15 Transcription Otter.ai - Voice Meeting Notes & Real-time Transcription Amazon Transcribe – Speech to Text - AWS Introducing Whisper WhisperX: Automatic Speech Recognition with Word-level Timestamps (& Diarization) Speech-to-Text: Automatic Speech Recognition Google Cloud Deepgram: World's Most Powerful Speech-to-Text API 35:54 Theming system CSS Zen Garden: The Beauty of CSS Design 43:38 AI Shownotes 53:02 Ingest process 00:24 Markdown as the source of truth 01:50 AI Embeddings Vector Database for Vector Search | Pinecone Introducing Ask Netlify: a new way of engaging with Netlify Docs with AI-Powered interactions 09:22:24 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Jury Duty Wes: Ted Lasso Shameless Plugs Scott: Syntax Discord Wes: Wes Bos Tutorials 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

This week we're joined by Irina Nazarova, CEO of Evil Martians. Evil Martians is a consultancy that has created and amazing open source catalog with projects like PostCSS, AnyCable, and ImgProxy. We talk about her background, stepping into leadership, and commercial open source. https://evilmartians.com https://twitter.com/inazarova https://anycable.io https://imgproxy.net Become a paid subscriber our patreon, spotify, or apple podcasts for the full episode. https://www.patreon.com/devtoolsfm https://podcasters.spotify.com/pod/show/devtoolsfm/subscribe https://podcasts.apple.com/us/podcast/devtools-fm/id1566647758

In this episode of Syntax, Wes and Scott go through all the features of Sass and decide where we are at with Native CSS alternatives, giving each feature a rating of replaceable, plausible, or missing. Show Notes 00:11 Welcome 01:17 Easter updates 04:17 Getting into Sass 06:03 What is PostCSS? 09:52 CSS Variables 13:49 CSS Nesting CSS Nesting - Chrome Developers postcss-plugins/plugins/postcss-nesting at main · csstools/postcss-plugins 23:13 Colors CSS5 Color Functions — Syntax Podcast 479 29:08 CSS Looping 34:20 Mixins or extends 39:34 CSS Partials Features - PostCSS Preset Env - CSSTools 44:29 CSS Math 49:40 Functions Is Houdini Ready Yet? 52:04 Firefox and Safari support 55:08 Back to Functions 56:21 BEM Syntax 58:51 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Solar Lantern Wes: Cotton Candy Machine Shameless Plugs Scott: Sentry Wes: Wes Bos Tutorials 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

We're back with episode three of the Launch Pad with Lindsay Wardell and Tejas Kumar, as we cover the latest acquisition of Gatsby, what we should do with Create React App, and what we think of the Astro 2.0 release. Links Lindsay Wardell https://twitter.com/lindsaykwardell https://www.lindsaykwardell.com/ https://www.linkedin.com/in/lindsaykwardell/ https://github.com/lindsaykwardell https://dev.to/lindsaykwardell Tejas Kumar https://tej.as https://twitter.com/TejasKumar_ https://github.com/tejasq https://www.youtube.com/c/tejaskumar Netlify acquires Gatsby, composable architectures, and the future of Jamstack Netlify announced that it would be acquiring Gatsby (https://thenewstack.io/netlify-acquires-gatsby-its-struggling-jamstack-competitor/) Biilmann cited Gatsby's recently released Valhalla platform (https://thenewstack.io/netlify-acquires-gatsby-its-struggling-jamstack-competitor/) Netlify Acquires Gatsby Inc. to Accelerate Adoption of Composable Web Architectures (https://www.netlify.com/press/netlify-acquires-gatsby-inc-to-accelerate-adoption-of-composable-web-architectures/) Netlify Acquires Gatsby, Its Struggling Jamstack Competitor (https://thenewstack.io/netlify-acquires-gatsby-its-struggling-jamstack-competitor/) Replace Create React App recommendation with Vite Replace Create React App recommendation with Vite (https://github.com/reactjs/reactjs.org/pull/5487?ck_subscriber_id=1866525605&utm_source=convertkit&utm_medium=email&utm_campaign=%E2%9A%9B%EF%B8%8F+This+Week+In+React+%23133%3A+Astro%2C+React+dying%3F%2C+Qwikify%2C+CRA%2C+Next.js%2C+Remix%2C+Redux%2C+Storybook%2C+Redwood%2C+Nextra%2C+React-Native...%20-%209971987#top) Twitter resoundingly agreed about using CRA (https://twitter.com/t3dotgg/status/1616933234478309378) CRA's inability to support PostCSS configurations and recommending Vite, Parcel, Next, or Remix (https://twitter.com/adamwathan/status/1616938902966640641?s=20&t=u1lqs5T5L2Yu05PFL8NfCWjoe5xI8FgWvRhXO6tY34w) Dan Abromov's response (https://github.com/reactjs/reactjs.org/pull/5487?ck_subscriber_id=1866525605&utm_source=convertkit&utm_medium=email&utm_campaign=%E2%9A%9B%EF%B8%8F+This+Week+In+React+%23133%3A+Astro%2C+React+dying%3F%2C+Qwikify%2C+CRA%2C+Next.js%2C+Remix%2C+Redux%2C+Storybook%2C+Redwood%2C+Nextra%2C+React-Native...%20-%209971987#issuecomment-1409720741) Release of Astro 2 and “hybrid rendering” Astro 2 released in mid-January (https://astro.build/blog/astro-2/) Hybrid rendering alternative API considerations (https://github.com/withastro/roadmap/blob/main/proposals/0029-prerender-api.md#alternatives) Unlock New Possibilities with Hybrid Rendering (https://astro.build/blog/hybrid-rendering/?ck_subscriber_id=1866525605&utm_source=convertkit&utm_medium=email&utm_campaign=%E2%9A%9B%EF%B8%8F+This+Week+In+React+%23133%3A+Astro%2C+React+dying%3F%2C+Qwikify%2C+CRA%2C+Next.js%2C+Remix%2C+Redux%2C+Storybook%2C+Redwood%2C+Nextra%2C+React-Native...%20-%209971987) Introducing Content Collections: Type-Safe Markdown in Astro 2.0 (https://astro.build/blog/introducing-content-collections/?ck_subscriber_id=1652256478) 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 Guests: Lindsay Wardell and Tejas Kumar.

In this Hasty Treat, Scott and Wes talk about next generation CSS that you can use today with PostCSS including importing, nesting, variables, media query ranges, custom media queries, and more. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Sentry - Sponsor If you want to know what's happening with your code, track errors and monitor performance with Sentry. Sentry's Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:27 Welcome 01:30 Sponsor: Prismic 02:54 Sponsor: Sentry 03:53 Do we use Post CSS? 05:22 Presets and plugins 06:19 Plugins we're using "postcss-import" @import './elements/headings.css'; 09:48 PostCSS Nested 12:59 Variables (Custom Properties) 15:50 Media Query Ranges PostCSS Media Minmax 17:16 Custom Media Queries "postcss-media-minmax" @media screen and (width >= 500px) and (width

Irina Nazarova is the CEO of Evil Martians, a consulting company known as authors of PostCSS, AnyCable, imgproxy, and many blog posts and tutorials. She and Brittany discuss both her developer and CEO origin stories, sustainable opensource, leading really talented developers and Google Apps Script. Show Notes & Links: Evil Martians (https://evilmartians.com/) whitequark/parser: A Ruby parser. - GitHub (https://github.com/whitequark/parser) All of the Evil Martians's Open Source Libraries (https://github.com/evilmartians) Google Apps Script (https://developers.google.com/apps-script) Irina Nazarova (@inazarova) · Twitter (https://twitter.com/inazarova) Support Ukraine: Nova Ukraine (https://novaukraine.org/) Razom for Ukraine (https://www.razomforukraine.org/) Sponsored By: Scout APM (http://scoutapm.com/rubyonrails) Try their error monitoring and APM free for 14-days, no credit card needed! And as an added bonus for Ruby on Rails listeners: Scout will donate $5 to the open-source project of your choice when you deploy. Learn more at http://scoutapm.com/rubyonrails (http://scoutapm.com/rubyonrails). Mirror Placement (https://www.mirrorplacement.com/) Mirror Placement are the Ruby on Rails & JavaScript recruiters. They are actively engaged with a wide and deep network of Rails, JavaScript, and Full-Stack Open Source engineers and tech leaders we love, with relationships cultivated over 15 years. Contact Brian, co-host of this podcast, here (https://www.mirrorplacement.com/contact).

Changelog Lots of JavaScript package upgrades have been made to the frontend of howtocodewell.net including TailwindCSS, PostCSS, Webpack and Node itself. I've decided to use PostCSS over Less and I'm seeing much faster results when generating the CSS The plan for next week is to look at composer package upgrades as well as progressing with the staging deployment In my contracting space I have been doing a lot of PHP 5.6, 7.4 and Angular work News/Articles Being on call sucks by Bobbie Chen https://bobbiechen.com/blog/2022/7/20/being-on-call-sucks Testing links in Cypress by Filip Hric https://filiphric.com/testing-links-with-cypress Enabling typescript in Symfony Webpack encore https://symfony.com/doc/current/frontend/encore/typescript.html How to secure applications on Kubernetes (SSL TLS certificates) by AVM Consulting Blog https://medium.com/avmconsulting-blog/how-to-secure-applications-on-kubernetes-ssl-tls-certificates-8f7f5751d788 How to speed up Cypress automation tests by FeldsparTech https://www.feldspartech.com/post/how-to-speed-up-cypress-automation-tests How to speed up Cypress tests In general Discover how slow your tests are to start begin with Don't speed up your tests if you don't need too Work on the tests that take the longest. List all tests that take over x seconds/minutes and work on those A small improvement can give you big gains in the long run Only test what you need too and when you need too Cypress Group similar tests together into a single test Separate tests that don't need state, change of state or require a fixed state Pay attention on the before and beforeEach hooks Disable the video and screenshot creation on automatic builds Enable video and screenshot creation on manual/nightly builds

"Many Ukrainians continue working. A very good opportunity is to continue working with them, to buy Ukrainian software products, to engage with people who are working [via] UpWork. Help Ukrainians by giving them the ability to work, to do some paid work," whether still in the country or as refugees abroad. If you take something from this conversation, Anastasiia Voitova's words may be the ones that should stick. After all, Ukraine has a renowned IT workforce, with IT outsourcing among its most important exports.Voitova, the head of customer solutions and security software engineer at Cossack Labs, just grabbed her laptop and some essentials when she suddenly fled to the mountains last month to "a small village that doesn't even have a name." She doesn't have much with her, but she has more work to do than ever — to meet her clients' increasing demand for cybersecurity defenses and to support the Ukrainian defense effort. Earlier this month, her Ukraine-based team even released a new open source cryptographic framework for data protection, on time, amidst the war.Voitova was joined in this episode of The New Stack Makers by Oleksii Holub, open source developer, software consultant and GitHub Star, and Denys Dovhan, front-end engineer at Wix. All three of them are globally known open source community contributors and maintainers. And all three had to suddenly relocate from Kyiv this February. This conversation is a reflection into the lives of these three open source community leaders during the first three weeks of the Russian invasion.This conversation aims to help answer what the open source community and the tech community as a whole can do to support our Ukrainian colleagues and friends. Because open source is a community first and foremost. "Open source for me is a very big part of my life. Idon't try to like gain anything out of it, I just code things. If I had a problem, I solve it, and I think to myself, why not share it with other people," Holub said.He sees open source as an opportunity for influence in this war, but also is acutely aware that his unpaid labor could be used to support the aggression against his country. That's why he added terms of use to his open source projects that use of his code implicitly means you condemn the Russian invasion. This may be controversial in the strict open source licensing world, but the semantics of OSS seem less important to Holub right now.Of course, when talking about open source, the world's largest code repository GitHub comes up. Whether GitHub should block Russia is an on going OSS debate. On the one hand, many are concerned about further cutting off Russia — which has already restricted access to Facebook, Instagram, and Twitter — from external news and facts about the ongoing conflict. On the other hand, with the widespread adoption of OSS in Russia, it's reasonable to assume swaths of open source code is directly supporting the invasion or at least supporting the Russian government through income, taxes, and some of the Kremlin's technical stack.For Dovhan, there's a middle ground. His employer, website builder Wix, has blocked all payments in Russia, but has maintained its freemium offering there. "There is no possibility to pay for your premium website. But you still can make a free one, and that's a possibility for Russians to express themselves, and this is a space for free speech, which is limited in Russia." He proposes that GitHub similarly allows the creation of public repos in Russia, but that it blocks payments and private repos there.Dovhan continued that "I believe [the] open source community is deeply connected and blocking access for Russian developers, might cause serious issues in infrastructure. Alot of projects are actually made by Russian developers, for example, PostCSS, Nginx, and PostHTML."These conversations will continue as this war changes the landscape of the tech world as we know it. One thing is for sure, Voitova, Dovhan and Holub have joined the hundreds of thousands of Ukrainian software developers in making a routine of work-war balance, doing everything they can, every waking hour of the day. 

Chris is making hiring progress and loves asdf and M1 laptops. Steph is anticipating the arrival of one dongle to rule them all and talks about moving away from having a lot of Bluetooth connections. Two other big things on Steph's mind are education around factories because they're v important and shared examples and how they can be overused. She and Chris agree that it is better to tell stories in tests instead. This episode is brought to you by ScoutAPM (https://scoutapm.com/bikeshed). Give Scout a try for free today and Scout will donate $5 to the open source project of your choice when you deploy. Services down? New Relic (https://newrelic.com/bikeshed) offers full stack visibility with 16 different monitoring products in a single platform. GitHub - asdf-vm/asdf: Extendable version manager with support for Ruby, Node.js, Elixir, Erlang & more (https://github.com/asdf-vm/asdf) Factories Should be the Bare Minimum (https://thoughtbot.com/blog/factories-should-be-the-bare-minimum) Mystery Guest (https://thoughtbot.com/blog/mystery-guest) GitHub - varvet/pundit: Minimal authorization through OO design and pure Ruby classes (https://github.com/varvet/pundit) Become a Sponsor (https://thoughtbot.com/sponsorship) of The Bike Shed! Transcript: STEPH: Hello and welcome to another episode of The Bike Shed. [laughs] CHRIS: Hello, and I'm singing, and I love singing. STEPH: It's Buddy the Elf; what's your favorite color? [laughter] For reals, here we go. Hello and welcome to another episode of The Bike Shed, a weekly podcast from your friends at thoughtbot about developing great software. I'm Steph Viccari. CHRIS: And I'm Chris Toomey. STEPH: And together, we're here to share a bit of what we've learned along the way. So hey, Chris. What's new in your world? CHRIS: My world continues to be focused on hiring as a pretty core aspect of things. We have happily had one offer extended and accepted, so that's great. We've got a person who will be joining the team in a couple of weeks. That's very exciting. And we're continuing in conversations with some other folks. So I look forward to the place where I can be on the other side of this and have that team and be growing the team and not having to focus because hiring takes a lot of effort. It is something that I believe should be done as well as possible and intentionally as possible and then just outreach and all that. So yeah, I'll be fine with being on the other side of that. But it's going well, so that is nice. STEPH: That's awesome that you're making progress. Once you have hired your team, will you then add to the agenda to hire someone to help with hiring? CHRIS: I don't actually know if the organization, if the whole company has someone who's focused on hiring. I think that can make sense. Working through recruiters and things like that is something that I've seen in the past. I've seen it work for certain organizations. I've also been on the receiving end of plenty of obviously copy and pasted very generic "Hey, person, I saw that you do lots of Java and other enterprise code software. Would you like to come work with us?" I'm like, none of those are true, and I do not want to go work with you. But thanks, I still appreciate the outreach. [laughs] So I am intrigued to see how we think about it. More generally, this is something that you and I have talked about offline but the idea that you kind of always want to be hiring. We do have specific roles that we've identified that the budget has space for. But more generally, ideally, we're going to need to hire more people down the road, and that will happen at a particular point. But having those conversations, starting to talk to people, now planting the idea of like, hey, you're great, and I would love to work with you someday and just keeping those lines of communication open. Networking is perhaps what the people call it. I don't know; I've never felt super comfortable with that word, but I think it's that and being friendly and staying connected with people whose work I respect and would love to work with more. So that's part of what I will come out of this with is yeah, let's always be hiring in a certain sense. STEPH: I'm glad you expanded on it because I was just thinking I have specific ideas as to what always be hiring means to me and what those activities would include. So I was curious what it means to you. And I agree, I think it's a lot of networking. It's a lot of taking chats and social chats with folks and just talking about the company and finding out where they're at. And then one day, if it works out that then they want to make a shift, then you've already got that relationship that started, and they're already potentially interested in your team. I guess some of the other big stuff that comes to mind, too, is like thoughtbot we have the blog. I feel like that's always really helpful too. Like when you help somebody, when you publish information that then helps them in their career, I feel like that will then draw people towards you as well. CHRIS: Yeah, the thoughtbot blog and basically everything that thoughtbot does, the podcast here, or Upcase, or all those things were so incredibly helpful in the hiring. But I also know they're hard to spin up, is what I would say. The thoughtbot blog has I don't even know how many hundreds of thousands of hours maybe. It's weird to try and put a number to it. But I've written a handful of posts for it, and I'm not great at writing them. They take me way longer than they should, but they took many hours. And then I had wonderful peer review by other developers at thoughtbot. And so, the amount of effort that goes into the thoughtbot blog absolutely produces wonderful benefits. But it's not free by any means, and similarly, the podcasts or Upcase or any of those sort of things. Similarly, the one that's actually most interesting that I see a lot of organizations go for initially and then often walk back is open source. Like, oh, we have this internal library that we built to do something. What we'll do is we'll just package it up and share it with the world, and then it'll be great. And the maintenance burden and support necessity of an open-source project is so high. I've actually historically gotten into the mode of suggesting...when I was working with clients, they would start to mention this and be like, "Oh yeah, we think we'll open source this thing, and it'll be great." I'm like, "Are you sure, though? Do you definitely want to?" There's definitely a difference between open sourcing and just putting an idea out there is one thing that I would say. Can you just write a blog post that has code snippets but not reusable code that you have to maintain that people, unfortunately, I think unfairly expect responsiveness and maintenance over time? And what if you stopped using that technology? What if you stop using this thing, but your name is still attached to it? And people have expectations of what that looks like. Or people come in and say, "Hey, this is great, but I want to change it in this way." And you're like, "Yeah, but that actually doesn't work for us. That's not how we use it. But we would be on the hook to maintain that code if we accept your pull request." And so, as wonderful as open source is, I tend to be on the more conservative end of the spectrum of like, are you definitely sure you want to open source this? Is there another way that you can share this with the world? Can it be a conference talk, or a blog post, or something like that? But it is an interesting one. STEPH: Yeah, I've been a part of several teams that have started with that; let's start an engineering blog. And their hearts are totally in the right place, and I understand why they want to do it. But like you just said, there's a cost to that. And if you don't have something like thoughtbot has like an investment day or a time for engineers to then be able to contribute to that blog, then either they're just not because they're not going to have their downtime to be able to do that. And it is hard to write and publish and be happy with what you're going to publish with the world. I really like what you're talking about in terms of the maintenance burden because I can't remember if it was an Upcase conversation or if there was something...but I was early on at thoughtbot and had a similar thought of why can't we just open source it? Why can't we make it public? And there was a very big thoughtful discussion around well, we have to have all these considerations in place. Who's going to maintain it? Just like FactoryBot is a really big internal project at thoughtbot. And there's typically a rotation of folks who will then take ownership and then onboard other people who are interested in it and curate the issues. And it's very important work, but you have to allocate time for it. All of that to say, I totally agree. There's a big burden that goes with it. CHRIS: Yeah, it's interesting that this has been an evolving thought in my head, and it makes me sad is another thing I'll say about it. I wish it were easier to just put code out there in the world and have the expectations properly calibrated for like, hey, I did this thing. Here's a code sample. It worked for me. Actually, I found dropping something in a Gist...a Gist just has a point-in-time connotation to it that I like. Like, if I see a code sample in a Gist, I'm like, I have no expectation that that person is going to do anything or respond to anything I have to say. But this is great because I now have this sample code that helps me get a little bit further. And I may have to vendor that code or take it on myself, and I now own it. It's not this person's responsibility. But the minute you have a repo with a README that says stuff and like, here are the installation instructions, the expectations just flip in a way that I don't think is...at least I become cautious around. And that does make me sad, though. STEPH: Yeah, it feels like you went from offering an example to I'm offering a product. And so then as soon as people feel like, oh, you're giving me something as a product that you maintain, then I'm going to have higher expectations of it should work how I expected it to work. I'm going to ask questions. And yeah, you make a lot of good points. CHRIS: Would you like to pay me $0 for me to build software for you? That sounds fun. STEPH: [laughs] CHRIS: And open source is such a wonderful thing. And so I'm interested in...like, I follow a lot of folks who are in the open-source world and have found ways to make it make sense financially or otherwise or organizationally. Open Collective and things like that is one option or OpenCore and then paid pro models and things like that like Sidekiq as an example. Sidekiq just celebrated ten years with some wild numbers in terms of the revenue, and it's like, yeah, that's fantastic. This is a cornerstone piece of software in the Ruby and Rails community. And also, Mike Perham had a great outcome from it. I think that's a win. So maybe blogging, maybe, but not sure. Probably not open source is my suggestion, at least for me. But one thing that I am interested in that hasn't been an option in my mind for a long time, but I'd love to get back to is conferences and going there, especially with a small team from an organization. The three developers we go, and we hang out at a conference and the company has a space there. And there's room to have conversations and meet people. That is one that I would love to continue in a way of making sure that our name is in people's minds as a place that they could work in this world. It is interesting, though, that it gets scoped a little bit like we are definitely a Rails shop. But that's not all that we are, or that's not the complete totality of our technical identity, so it becomes interesting. But I think it's probably the most representative. And I definitely see the Ruby and Rails community is having a good product-centric mindset that is definitely the sort of thing that I want in the teams that I'm building. STEPH: Yeah, I think that's an awesome idea because it's a way that you could focus on creating content. It'll likely have a big impact. But then you can also replay that content, but it's not the commitment of a blog or a commitment of open source. CHRIS: But yeah, so hiring has been, I would say, most of what I've been doing. One other thing that was fun this week, so I have my new laptop that I've had now for a couple of months, I'd say. And just this week, we had a very frustrating issue where Heroku stopped deploying our application. Just one day, it was like, nah, it doesn't work anymore. And I was like, well, that's less cool than I want it to be. And so one of the developers on the team dug into it, and it turned out Node-sass was the answer, which we're not even using is extra unpleasant. It's just part of Sprockets and Webpack or something like that. There's some downstream dependency sequence. We're using Tailwind and PostCSS. So we don't even need Node-sass. I think maybe PostCSS does. But anyway, turns out Heroku had switched to using version 16 of Node just without telling us. We were previously on 14, and then Node-sass didn't build on that. There was just this weird dependency chain that stopped working one day. And we weren't pinning the Node version within our application. So one of the developers figured this out, pinned us back to version 14 something of Node, and that was fine. But then my computer got confused because the versions were out of sync. Anyway, asdf is great. That's the first thing I'm going to say. So I use asdf to manage the versions of Ruby, and Node, and Yarn, and Elm, and basically everything else that I use. And I love that it's all under one hood, so asdf, wonderful. Also, my laptop, wonderful. I really love the M1 fancy laptop. But what was fun was I had to install the new Node version. And this was the first time in the three months I've had this computer that I've heard the fans come on. Finally, I asked it to do something hard enough that it was like, whoa, whoa, whoa, I'm going to need some backup here. And so the fans finally kicked in. So I don't know what's going on installing Node, but good for everyone involved, [laughter] impressive to make such aggressive use of all of the hardware in my computer. STEPH: Yeah, I love asdf. I miss it right now because I'm on my client machine, and we're not using asdf. Instead, we are using Chruby, C-H Ruby to manage Ruby versions. asdf is awesome. That's fun. It's the first time that the fans kicked on. I'm intrigued with my machine. I haven't really paid attention to it when the fans kick on except the one time where I had like a Ruby process that was running away, and I had to figure out what was going on there. Because then all the CPU was just being dedicated to Ruby even when I wasn't using Ruby. But since then, I haven't heard the fans. It's been very, very quiet. It's lovely. I like when it's quiet. CHRIS: Oh, it's been great. It was interesting because it was this weird noise that I'd forgotten about. STEPH: [laughs] CHRIS: My previous computer was so old that this was happening regularly whenever my backup process would run. Apparently, that is a very computationally intensive activity. So I would hear the fans kick in, immediately go find the backup process and say pause for 60 minutes or whatever it was. Just like, leave me alone. Stop it. The computer is getting too hot. You need to calm down. But now, with the new computer, there was nothing I could do to make it happen. And then finally it happened, and I was like, oh yeah, I guess this computer has fans. That's neat. But yeah, so things that are great, asdf and the M1 laptops. STEPH: Nice. Yeah, you're one of the few individuals I know that's using one of the M1 chip. So it's been reassuring to hear how well it's going because I did not opt in to that new-new. I opted in to the give me something stable and steady that I know so that way I don't have to fuss with it because I can then fuss with all the other things that I need to fuss about. CHRIS: So much fussing to do. STEPH: Lots of fussing. Fussing and cussing is what I do over here. CHRIS: [laughs] Mid-roll ad Hey, friends, let's take a quick break to hear from today's sponsor, New Relic. All right, so you've probably experienced this before where you're just starting to fall asleep, and it's a calm, code-free peaceful sleep, and then you're jolted awake by an emergency page. It's your night on call, and something is wrong. But I have some good news because you have New Relic, which means you can quickly run down the incident checklist and find that problem. So let's see, our real user monitoring metrics look good. And that's where New Relic measures the speed and performance of your end-users as they navigate the site. But it looks like there's an error in application performance monitoring. If we click on the error, we can find the deployment marker where it all began, roll back the change, and, ooh, problem is solved. We can go back to bed, back to sleep, and back to happy. That's the power of combining 16 different monitoring products into one platform. You can pinpoint issues down to the line of code so you know exactly why the problem happened and can resolve it quickly. That's why more than 14,000 other companies, including GitHub and Epic Games, use New Relic to improve their software. So you know that next late-night call is just waiting to happen, so get New Relic before it does. And you can get access to the whole New Relic platform and 100 gigabytes of data free forever. No credit card required. Sign up at newrelic.com/bikeshed. That's New Relic N-E-W-R-E-L-I-C .com/bikeshed, newrelic.com/bikeshed. CHRIS: Well, speaking of, what have you been fussing and cussing about this week, Steph? STEPH: So this is more in the pranting area, which is our portmanteau for praise and rant, where I'm super excited. I have a delivery coming from Amazon today. So I'm that person that keeps checking and waiting for it to show up. But I'm finally going to have one dongle to rule them all. I have a very messy approach right now [laughs] where I have all the dongles and have to plug everything in. And you know what? Normally it's fine. It's fine because I do it once, and I don't have to mess with it that much. But because I now have my thoughtbot laptop and I have a client laptop, and I needed to be able to switch back and forth, it is just too much. And I was realizing how many dongles I'm having to use. So I have one dongle to rule them all. It's showing up today. It's a very exciting day. CHRIS: I'm very excited for you. I recently made a similar switch when I got this new laptop. I was like, you know what? I'm going to look into it because power can come over USB-C and whatnot. And I was like, all right, it's finally time. I want to be able to just click in. And it's one of those things that feels trivial, or at least in my mind, I'm like, this doesn't feel like it'll make that big of a difference. But it makes it so much easier to disconnect my laptop, go somewhere else, and then come back. And I noticed myself doing that more, which I think is a positive thing. Otherwise, I'm just anchored to my desk. I'm like, I don't want to unplug everything and then have to replug it. That's like a whole thing. But now that it's not, I am more mobile, more flexible in where I'm working from, and I found benefits from that. So I'm a fan. I'm very happy that this is going to show up for you [laughs] and really change the way you're working. STEPH: Well, I've started moving away from a lot of Bluetooth connections as well because my keyboard will support Bluetooth, my headphones support Bluetooth. And I liked the idea of being wireless. But then, especially from switching laptops back and forth and then having to reconnect and all of it, it was just too tedious to go back and forth. And yeah, I'm with you where I didn't want to have to leave my desk and unplug everything and then bring it back where I'm playing, you know, like the game Operation where you had to reach in and then you had to grab different little bones? If you don't know the game Operation, that sounds really weird. But it felt like a game of Operation where then I was having to find all the dongles and connect them and plug them all in. And yeah, so it's going to be wonderful. CHRIS: Even knowing the game Operation, that still sounds kind of weird. STEPH: [laughs] CHRIS: But I really love that there are people out there listening that are like, what are they talking about? STEPH: What weird childhood did you have? CHRIS: Yeah, I'm definitely Team Wired-Almost-Everything. The only thing that I have that's wireless is my headphones. And it only works kind of, and I have to trick them sometimes. And the worst thing is occasionally my computer will have control, whatever, they're connected. So I'm listening to music on my computer and then suddenly, my phone will just steal it. It's like, what are you doing? No. Or, randomly, my headphones will be sitting away from me, and they'll just connect. And I'll be in the middle of a call on something else. Like, I'm here talking to you, and suddenly my headphones are like, hey, we wanted to join the party. It's like no, absolutely not, [laughs] not at this moment, under no circumstances. So I don't really believe in Bluetooth as a technology. I'm very much a fan, particularly with things like keyboards and whatnot. Bluetooth I've yet to be convinced that it is a sound technology. STEPH: I have the headphones where they try to be very smart, and they are pretty smart where they will block out sound. But then, if I am talking, then it will put me in more of an auditory space where then I can more easily hear, and it won't filter out sound as aggressively. But I've noticed a problem. And it's when I'm watching anything that's funny that then I'm laughing. So every time I laugh, my headphones think I'm talking to someone, and then it will switch over to where it's trying to let me hear more sounds out in the universe. And then it kicks back on because it's like, okay, she's done talking. It's a very jarring experience. [laughs] And I haven't figured out how to turn that setting off. It's like, oh, I just can't watch funny stuff with my headphones right now, which is also problematic with pairing because I tend to laugh a lot with pairing. It's a thing. I'm working on it. The struggles of Shteph. CHRIS: Well, at a minimum, it sounds like your dongle life is going to be improving very soon, and that's exciting. STEPH: Dongle life, it'll be single dongle life. That's it. [singing] All the single dongles, all the single dongles. Put your adapters up. [laughter] On a different note, talking about some of the work that I've been doing this past week with Joël Quenneville on our client work, is that we have been looking for ways that we still want to build up CI time. We've talked about the fact that we're working on some of that horizontal scaling. And I don't have an update there. But the other update I have is where we want to be very strategic about where we invest our time because improving the test is not trivial work. A lot of the low-hanging fruit has already been done, so triaging a flaky test can be very difficult, and it can take us a while. So we just want to make sure and verify that before we invest a lot of time into a portion of the test that then we know what the outcome is going to be. Are we improving developers' lives by this much? And how do we measure that? Are we reducing the CI build time, and how do we know that? And one of the areas that I really wanted to focus on is FactoryBot because there are a lot of factories. The factories tend to do a ton. So they are calling out to the database and building a lot of associations. And that's something that the team knows about as well is that there are just so many SQL queries that get executed in tests. And it would be great if we could reduce the number of SQL queries that are going out. And FactoryBot includes some ActiveSupport notifications, which means you can subscribe to factories being run which then gives you access to details like which factories are being used? What build strategy is used? Are you calling build build_stubbed or create? And the factory's execution time. So then the idea of this is that if we can harness a lot of the data that we can collect from FactoryBot, then can we ask questions around what's our slowest factory? How long does it take, and how many places is it being called? Because then ideally, we can calculate to say, okay, if this factory takes this long and it's used in this number of places, then we can have a formula to figure out how many minutes of our test suite is spent just on executing that factory. And then if we can reduce the time of that factory, let's say by half, then we know how much time we're shaving off of our CI build. And then we have this more concrete verified okay; this is worth our investment. We want to pursue this, even if the factory may take us a full day to improve because it does so much. And it's just gnarly. So it's going to take some time to really refactor it into a more simplified state. So, in theory, this sounds really, really great, and it was a lot of thanks to Josh Clayton, who was the one that advocated saying that we could use the ActiveSupport notifications to find a lot of this data. And so Josh and I paired on this for a bit to look into can we answer some of those other questions as well? And we were testing it on a small side project that he had, which was great because the other codebase is very big, and feedback is just a lot slower. So we wanted to first prototype it and have a proof of concept in a very quick space and just to be able to look through the data and make sure the assumptions that we had and the value would be there. So we applied that first, and that was going really well. And then Joël Quenneville took that strategy and then applied it to all the specs in the spec models directory and ran it for the much larger client codebase and got some really great results. And we also used a low fidelity approach where we wanted to be able to see which factories were the most popular. So how often are they getting called? And the average execution time. So that way, we could then quickly look at this scatter plot, and then we could see, okay, who's in the far upper right quadrant? Because those are the factories that are causing the most pain. But we started looking into a graphing library and what are we going to pull in. And Josh had the great idea. He's like, "I wonder if Google Sheets has a scatter plot. Can we export this to CSV data and then copy it from the terminal and import it into Google Sheets?" And it turns out that you can. So then we grabbed it and put it in Google Sheets and then just converted it into a scatter plot, which was really nice because then we didn't have to incorporate any chart library or any graphics or anything. We could just plop it into Google Sheets and then easily share it. So we now have this list thanks to Joël because he ran it through the spec models directory of all the factories that are getting called. And it's really interesting. And there's one, in particular, that is high on the list. And it was actually one of the first ones that we worked with when we were troubleshooting a test that took us a while when we first joined the project. And the average time for this factory is four seconds, and it gets called over 500 times. It's like 527 times. So then if we multiply that, so if we say, all right, it takes about 4 seconds times 527 and then divide it for 60 for minutes, that's 35 minutes, 35 minutes for that factory. Now, granted, these are getting parallelized across different processes. But still, if you divide that up across four processes, that's a non-trivial amount of time. So I think this is going to be really helpful and really interesting data that we can then use to drive our decisions to say, okay, we want to take this factory and let's say even if we can cut it into half, let's say if we bring it from 4 seconds to 2 seconds, it'll go from 35 minutes to 17 and a half. CHRIS: Oh wow, I love the methodical approach. I love that actually having a number you're like; this is how much pain or the cost of this right now. And so we've identified that this is this high-level thing. I love the intentional starting with, like, let's measure it. Let's understand where the most bang for the buck is. In particular, the graph that you're describing reminds me of one I haven't actually worked with it much. But Code Climate has a graph that they use, which is it's churn versus complexity. So it's like, you may have a very complex piece of your code, but someone wrote it once, and it just sits in the corner. And you know what? It quietly does its job. And yes, it's very complex, but nobody needs to touch it. So it's not a big deal. And then you have stuff that changes constantly, but it's super simple, so that's fine too. Your UsersController is probably going to change a bunch; that's fine. But the stuff that is constantly changing and very complex that's the magic quadrant that, like, pay a lot of attention to that. And similarly, which are the ones that are being used a lot and take a while? That's the magic quadrant. I'm intrigued now. I want to search for more magic quadrants that deserve attention. But for now, that sounds like a lot of fun. So now, what's the approach that you're going to take? I imagine you need to alias that factory and have it exist because some tests will rely on certain details of it. This is my guess. So let me see if this is the way that you're thinking about it, alias the factory, so you have a representation that does all the stuff that the current one does. But then you have a new one that is much more pared down. And then, on a test by test basis, you start switching it over and trying to move things to the lower weight, the slimmer version of the factory. But I would think you would want to do a gradual process if there are 520-ish usages. Because otherwise, just changing that factory out from under all the tests, I imagine you'd break some tests if you just were like, what if it did less? STEPH: Yeah, I like that idea of the incremental approach. And that all sounds great, especially the alias because you're right; we want to change it incrementally and not all of them at once. But then essentially implement, one, because I want to see what does the pared-down factory look like? What is the basic factory that we can get away with? And then how long does it take for that factory to execute? Because then that will help confirm, can we really get it down to two seconds? Or is this just a factory that's always going to take three and a half seconds, and then it's not really that much of a payoff? Maybe we should look for a different factory to investigate. And then also understanding from the test are people reaching for this factory all the time because it builds up the world and all of these tests need the full world? Or are people just reaching for this because it does the one or two things that they need, and we can get away with a much slimmer factory? So right now, it's in the space of understanding why are people reaching for this? What are the tests they actually need? And yeah, how can we do it incrementally? At one point, we may even be able to try to programmatically switch it out. Maybe we just find 50 tests that are using this once we have the slimmed-down version and we replace...50 is probably too big. But if we replace X number of tests with this factory, how many of them fail? Maybe 10% of them passed. Cool, let's just take those 10% as a win and issue those as a PR. So that could be a strategy as well just to find if there's any that are super easy to change. All we had to do is literally change the name of the factory. The other big part that's on my mind is education around factories. I think a lot of people on the team understand that factories are very important. They can be very helpful. They can also be very cumbersome. But it feels like a good opportunity to say, "Hey, we are specifically working on these factories. Here's the reasoning that led us to work on these factories. When you're in the space of factories, please be mindful about what are you reaching for? Is there a slimmed-down factory that you can reach for? Maybe you can implement your own slimmed-down factory if one doesn't already exist." So I like the idea of coupling it with also just broader awareness because we are but two people. So I would love for more people to be part of the changes. CHRIS: Unsurprisingly, there are some wonderful blog posts on the thoughtbot blog that speak to this topic. One that I'm a fan of is Factories Should be the Bare Minimum. This was written by Matt Sumner. And it describes basically that idea of factories shouldn't build the worlds. They should give you the pieces that you can use to build the world but not build the world entirely. And so I'm a big believer in that, having your factories be as minimal as possible. They should be valid, but that's about it. And then I will often reach for extracted helper methods and keeping those as locally scoped as possible often in the spec file, or if not, maybe they're sharing spec support. But being intentional with where we reach for them and not having everyone use the same thing that just slowly gets added to. And it's like, do I actually need everything that's in there? The other thing that's interesting is the idea of having a factory that does a ton is, in my mind, sort of in direct contradiction to what I believe factories exist for which is when I think of factories, they're useful to fill in the rest of the details such that you don't have mystery guests in your test. But you can explicitly say build me a user who has an email that looks like this because, in this test, I care about the email, but I don't care about the rest of the details. I don't care about their name. I don't care about their password, or the roles, or any of the other details. Just let the factory deal with that because it's not important to the test. But I want to make sure that the relevant detail is present and specified within the spec. If you have a factory that builds everything in the world, that's like build a user and then grabs the first action from the project that that user has, because I know that they do because they use the big factory, that is just in direct contradiction to what we want factories to do. We want tests to tell their story. We want to avoid mystery guests. Factories are a great way to do that while still remaining concise. But if your factories just build the world, then there are some mystery guests in the world, I can assure you. STEPH: Yeah, I agree where factories have served as an abstraction for what I think is important to the test. But then there becomes this moment of where someone thinks, well, I need to build up these records, but I don't really need to reference them directly. I just have some coupled code that's going to rely on these. And so I don't explicitly need them, but they need to be there. So I'm going to extract it away, and a factory feels like a good place for me to extract that too. And I would take the very hard opposite approach where if you have coupled code and you have these dependencies that aren't necessarily explicitly used in the test, but they are required for the test, I'd rather see a painful test setup than have all of that extracted away from me. Because then if I do need to triage or troubleshoot that test, it's going to take a lot of just mental overhead to work through what do I actually need here and why? So I'd rather see that painful test set up then have it moved somewhere else. But I think a lot of people take the opposite approach of where if I abstracted away, my test looks prettier. And I'm like, yeah, but maybe to you in the moment, but it's going to cause me a lot of pain further down the road when I have to work with this. So show me all the crap that you had to do upfront. Just let me know. [laughs] I'd rather the test be honest with me. And then it's a really nice jumping-off point because you can see a test that does all of this. And instead of blaming the test and thinking it's the test's fault, you recognize this test has a lot of complicated setup, and it's probably because of the code and how the code was written. And we should look at refactoring the code, not at how can we make our tests look prettier? CHRIS: Unsurprisingly, I agree with 100% of that. Someday we'll find things other than Pop-Tarts and IPAs that we disagree on. But today is not that day. [laughs] Once again, today is not that day. Mid-roll Ad Hi, friends. And now a quick break to hear from today's sponsor, Scout APM. Scout APM is an application performance monitoring tool that's designed to help developers find and fix performance issues quickly. With an intuitive interface, Scout will tie bottlenecks to source code, so you can quickly pinpoint and resolve those performance abnormalities like N+1 queries, slow database queries, and memory bloat. Scout also recently implemented external service monitoring, adding even more granularity when it comes to HTTP requests and API calls. So give Scout a try today with a free 14-day trial and experience first-hand why developers worldwide call Scout their best friend. And as an added bonus for Bike Shed listeners, Scout will donate $5 to the open-source project of your choice when you deploy. To learn more, visit scoutapm.com/bikeshed. That's scoutapm.com/bikeshed. STEPH: Well, here's one more that maybe you'll agree with, maybe you won't. We'll see. I'll try not to lead you in either direction, but shared examples. If I'm going to rant for a little bit, shared examples are in that space of where they just get used so heavily, and they abstract away important information about the test. And it makes the test so succinct that I don't actually know what the test is doing. And I've seen a number of places where a shared example has been extracted, and it is only used within that test file once, maybe twice. And I'm just like, friends, too much abstraction. Please keep it close. [laughs] We don't need to move it away. We want our test to be friendly and just full of context, which is what I mean when I say friendly. I want full of context is what I'm looking for, well-named variables. And I won't be able to read the test and see what's happening. So my little complaint for today would also be about shared examples and how they can be overused. And they do have a really neat purpose. They can be helpful for if you're testing maybe a controller action and you want to say you're extracting that authentication, making sure that a controller always has authentication and then that is getting included. Sure, that feels very helpful. But that's really one of the few cases I can think of where a shared example comes into play. And if you are testing code over and over throughout different parts of your codebase, there's probably a part of your codebase there that needs to then be pulled out into a class and test that class in isolation. And then you don't need to retest it throughout all of your other classes. Have I already ranted about shared examples? I can't recall at this point if I have or not. [laughs] CHRIS: I don't think we have talked about shared examples before. And I appreciate you not leading the witness here. But I think I'm in agreement with you, particularly the way you refined it there at the end because that controller example is the one rare case where I might reach for it. But in general, I think this is one of those things that I saw early on in my career. I was like, oh, cool; this is a way to clean stuff up and DRY and all those wonderful things. And then I've definitely felt the pain of just overuse of shared examples and ways to pull details out of tests. But it's like, I want to see the details. And I think broadly, that's the theme that you and I are very aligned on is like, no, no, no, tell me the story in tests. I am much less interested in having these concise tests that have a single line, and it's like, expect foo to have bar. And it's like, why? Because...oh, there's a let and then a subject, and it's a shared...oh okay. Now that I can put it together, I can tell the story, but I cannot look at this test and see a story. I want to see a story, friends. So yes, I'm totally in alignment, especially with the slight caveat at the end of like, there are cases where it's useful. Similarly, I've used let. I definitely have not even that long ago. And I stand by the usage, but it was very rare. It's very rare, and it is something that I'll look at and be like, am I sure? Definitely, is this the right thing, or did I do something wrong? Because if I find myself leaning towards let, it's like there's something that I don't think is important to the story of this test that still needs to happen. Why is that? What's going on here? Something feels off about that. And similarly, with the shared examples, it's like, is there not a different way to extract this such that I can test it in a way that I have confidence in, and then we're good? I occasionally will talk myself into using shared examples or something like it where I'm like, oh, but it's really important that everything in the app has that authentication layer put in. And so, I should definitely have this very easily reusable test that can ensure that I have it. But there's a tautology there of well, if I write the test, then I'm definitely thinking about the implementation. But if I forget the implementation, I might also forget the test. And so, it actually doesn't provide any real safety. And in those cases, that's a rare case where I would reach for some weird metaprogramming thing that's like, controllers must do the thing. And we say that in application control and then everything inherited from that will raise if it doesn't implement the authentication layer. Something like weird code that says, "You shall not pass. You must, in fact, implement the authentication layer." Rather than saying, "Oh, we'll just make it really easy to test it so that we always test and, therefore, always use the necessary authentication layer." But yeah, that's a hard one to describe in the radio. So I don't know if that came through clearly. But that's sort of my headspace on this. STEPH: Yeah, and all of that makes sense. I'm trying to think of a good example. And it's been a while since I've used Pundit, but I feel like Pundit may have a really good example of this where it's very easy to document to say, hey, all of these controllers need to make sure that they call out to this class or that there's authentication. I can't remember the exact code and how that works. But I feel like Pundit has a really good example of that behavior. CHRIS: I think they do. It's something where I think it's a configuration level thing, but you say, "Hey, Pundit, we should definitely authorize any access to models." And so Pundit then has a before action, or it's an around filter one of those. But it will raise an unauthorized error, I want to say. Like, you did not do the authorization dance in this. And that's a great example of like, I like that it is loud and annoying and in your face. And it is not possible for me to forget it because we configured it throughout all controllers. And so it's that sort of thing that I would probably reach for even though that code gets complicated and messy, and actions at a distance. But it's worth that trade-off in my mind to have, like, I don't want to forget to do the authorization stuff. Permissions matter. STEPH: That was a really nice pre-emptive approach as well. Because in most cases that we're describing, it's the I'm going to write a controller, and then I need to add this test to verify and prove that yes, I didn't forget the authentication stuff versus upfront, you're setting in a configuration to say, "Hey, please remind me to do the configuration or the authentication step that I don't miss this." So that's also a really, really nice approach. CHRIS: Yeah, the same version of me that's going to forget to write the test is going to forget to write the implementation. So I don't want to trust that version of me to save that version of me. I'm equally untrustworthy in those situations. STEPH: You want to trust the version of you that's going to get yelled at by the code if you don't do it. CHRIS: Yep, I'm going to trust the version of me that was like, I don't trust any future version of me. I will yell at myself if I have not done the necessary things. STEPH: [laughs] CHRIS: To be clear, this is like a life philosophy of mine. I don't try to remember things because I forget stuff a lot. It just happens. And so if I need to take something out the door with me, it goes in front of the door but extra critically, and this is the subtle line. Because plenty of people do that trick where you put a thing in front of the door because then you can't leave without it. There's no way to forget it. But by virtue of that, you cannot put something in front of the door until it is time to use it. Like, if ever you have to go and be like, oh, I don't need it now, though, so I'm going to move it out of the way, open the door, and then leave. No, no, no, because then you've broken the magic of the thing in front of the door must leave with you. So it's a very subtle line. I will play games with myself. I'll be like, I am forgetful. I will not remember this. I do not trust future me, so I'm going to play a trick on them. But you got to calibrate it just right. STEPH: That's really funny because I totally [laughs] didn't think about it until now how you described it. But I have definitely done that where I set a rule for myself, but then I'll break it. And then, of course, everything all of it collapses. There is a time when Tim, my husband, was going through a developer bootcamp. And as he was learning the whole world and everything that's out there, he would ask me all these questions. And he's like, "Do you know this?" And I'd be like, "No." He's like, "Do you know that?" I was like, "No." He was like, "I thought you knew this stuff." He's like, "I thought this was your job." And I was like, "Yeah, I'm really good at finding it and Googling it. But I work really hard to not store this in short-term memory because I'm filling it up with other stuff. So I work really hard to be able to find this stuff and track it and Google it." But now, there's a lot of stuff that I try very hard to not hold on to until I need it. But that was a funny moment where he seemed very upset that I didn't know stuff. And I was like, "Well, welcome to web development. There is too much to know. You're going to have to have a really good catalog system." CHRIS: Also, just so we're clear, it's going to change by next Thursday, so don't hang on to anything like it's just true forever. STEPH: [laughs] CHRIS: SQL will probably be around. That's about it. That's the one thing that I'm really confident in. STEPH: Yeah, that feels fair. Get really good at understanding HTTP forms, SQL, all that feels like some really good groundwork. CHRIS: There are some foundations. We should have a foundations episode where we talk about what we think the foundations are, the stuff that we bet won't be different in 10 years. But everything else is going to change by next Thursday, specifically. STEPH: Yeah, I like the idea of foundations. I'd be intrigued to see what we talk about and what happens there because I feel like that's going to be very representative of already what we talk about. We often will sprinkle in some new-new, especially thanks to a lot of the adventures that you go on. But I feel like a lot of the stuff that we talk about we always bring it back to the foundation because we do want the experiences that we're having to be applicable to everyone else as well. So yeah, that would be interesting to see what comes out of that. On that note, shall we wrap up? CHRIS: Let's wrap up. The show notes for this episode can be found at bikeshed.fm. STEPH: This show is produced and edited by Mandy Moore. CHRIS: If you enjoyed listening, one really easy way to support the show is to leave us a quick rating or even a review on iTunes, as it really helps other folks find the show. STEPH: If you have any feedback for this or any of our other episodes, you can reach us at @_bikeshed or reach me on Twitter @SViccari. CHRIS: And I'm @christoomey. STEPH: Or you can reach us at hosts@bikeshed.fm via email. CHRIS: Thanks so much for listening to The Bike Shed, and we'll see you next week. ALL: Byeeeeeeeee!!! ANNOUNCER: This podcast was brought to you by thoughtbot. thoughtbot is your expert design and development partner. Let's make your product and team a success.

In this episode we discuss when CSS became modern, if PostCSS can replace the enduring Sass, the new capabilities enabled by Eleventy Serverless, and the value of online streaming.Stephanie Eckles Twitter GitHub Codepen Blog Twitch Modern CSS Home Page Links CSS Cascade Layers When CSS Isn't Enough: JavaScript Requirements For Accessible Components Modern CSS: Grid, Aspect Ratio, Container Queries, and More! Word Wrap - Eleventy and the Rise of Static 11ty Rocks A First Look at Eleventy Serverless, with Zach Leatherman 11ty Serverless Search ★ Support this podcast ★

Ever have an idea that you just can't shake? Mark had an idea for an APL processor based on the PostCSS processor, but it wasn't quite working out the way he expected it to, so he and Allen chat about it a bit. But in between when they first discuss it, and when they return to record another episode - he's resolved the problems and released it. Get some insight into both phases of this process. More about PostAPL: https://github.com/postapl #VoiceFirst

Video content can be found here: https://www.youtube.com/channel/UC0BAd8tPlDqFvDYBemHcQPQ/

In this Hasty Treat, Scott and Wes talk about CSS nesting — what it is, when to use it, and why. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 04:22 - What is it? https://drafts.csswg.org/css-nesting-1/#nest-prefixed https://twitter.com/argyleink/status/1371874777548267520 06:02 - Why nest? Easier to read Easier to write Prevents refactoring errors, allows for dry-er code. No more typing a parent div 100 times, with a possibility of screwing it up. 08:13 - When to use nesting Nesting is often overused Only nest what you would have written un-nested with a short hand (e.g. don’t nest just for the sake of it) .container .item {} .container .item a {} Use it for scoping 10:06 - Nesting prefixes In order to nest CSS, you must first start it with a nesting selector .tweet { & > p { } &.media-included { color: green; } & + .tweet { } // sibling & p { } // descentang } Component-based — tweet, card, company, Link article{ color: blue; & { color: red; } } and must be the first child of a compound selector 12:44 - @nest rule / media queries Mostly just a visual way to show nested .foo { display: grid; @media(orientation: landscape) { & { grid-auto-flow: column; } } } .foo { display: grid; @media (orientation: landscape) { & { grid-auto-flow: column; } @media (min-inline-size > 1024px) { & { max-inline-size: 1024px; } } } } /* equivalent to .foo { display: grid; } @media (orientation: landscape) { .foo { grid-auto-flow: column; } } @media (orientation: landscape) and (min-inline-size > 1024px) { .foo { max-inline-size: 1024px; } } */ 16:30 - How to use nesting today Literally any CSS preprocessor PostCSS to use spec Links Syntax 274: How does stuff get added to CSS? Adam Argyle answers! Sass PostCSS CSS Variables 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

Sam and Ryan talk about how frontend and backend frameworks are converging towards similar UI patterns and developer experiences, even though they're coming at it from different starting points. They also talk about the new Next.js 10 release and whether React should document more opinions held by the core team.Topics include:3:22 – New features in Next.js 1020:40 – How frontend and backend frameworks are converging28:47 – Opinions in React that fall outside of its API35:33 – Next.js' new Image component49:00 – Q: Why is SASS not trendy? How can you replace it with PostCSS?52:12 – Q: How do you edit your videos?Links:Simon Peyton Jones - Haskell is uselessSebastian Markbage's Gist: The Rules of ReactFull Stack Radio episode on Screencasting Tips

A 77. adásban is volt sok újdonság: Github CLI, PostCSS8, Edge on linux. Ezek mellett az internet semlegességét óvó “ne legyen egyáltalán ingyen szolgáltatás” bírósági itéletet és róka kéretlen kódreview-it tárgyaltuk ki. Hallgassatok minket, mert a podcast is aszinkron. Edu Róka Ádám Lali Github CLIPostCSS 8Microsoft Edge comes to Linux next month Facebook – DevTalesPodcastTwitter […]

In this episode of Syntax, Scott and Wes talk about writing good CSS. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 02:11 - Frameworks Utility: Tailwind, Taycons, Bulma Frameworks: Foundation, Bootstrap Classless base starters: https://github.com/dbohdan/classless-css HTML5 UP / A template 13:37 - Preprocessors Sass Stylus Less Regular CSS Variables Color functions - not yet 19:42 - Tools PostCSS is like Babel for CSS. Some good plugins: https://github.com/postcss/postcss#plugins CSS min/max for clamp Autoprefixer Autoreset - reset a component Gap instead of grid-gap Simple-vars Postcss-modules SugarSS Preset env 34:19 - Stylint Stylint More than just a basic linter Capable of complex rules in your CI process - i.e. if you are using a color, make sure it’s a CSS variable 36:37 - Removing unwanted CSS PurgeCSS - Tailwind uses this PurifyCSS 41:17 - Writing maintainable CSS / scoping solutions Component-based CSS Modules Naming Convention Based BEM SMACSS CSS Variables Powerful when utilized with things like calc() to avoid out of sync values Know which browsers you need to support Links Syntax 197: Hasty Treat - Tips For Writing Good CSS Compass Susy Grunt Gulp Linaria Astroturf Houdini Svelte Syntax Highlight Dhanish Gajjar - https://www.instagram.com/dhanishgajjar/ ××× SIIIIICK ××× PIIIICKS ××× Scott: Rustlings Wes: Class Action Park Documentary Shameless Plugs Scott: Advanced Animating React with Framer Motion - Sign up for the year and save 25%! Wes: Master Gatsby - Use the coupon code ‘Syntax’ for $10 off! 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

On this week's episode, Steph and Chris discuss leveraging the Unix utility sed to search files and remove unnecessary test setup, using Vim's Arglist to create a to-do list for file edits, and budgeting time for fancy command-line scripts. They then take a deep dive into the world of utility-first CSS and TailwindCSS. This episode is brought to you by: ScoutAPM (https://scoutapm.com/bikeshed) - Give Scout a try for free today and Scout will donate $5 to the open source project of your choice when you deploy ExpressVPN (https://www.expressvpn.com/bikeshed) - Click through to get get an extra three months FREE on a one-year package Register here to attend the free panel discussion "How to sell technical debt to the business" (https://tbot.io/tech-debt) sed (https://www.gnu.org/software/sed/manual/sed.html) The Unix Chainsaw by Gary Bernhardt (https://youtu.be/ZQnyApKysg4) awk (https://en.wikipedia.org/wiki/AWK) Vim's Arglist as a File-Centric Todo List (https://ctoomey.com/writing/using-vims-arglist-as-a-todo-list/) xkcd (https://xkcd.com/) React Podcast - 88: Adam Wathan on Making Your Own Money, Refactoring UI, and tailwindcss (https://reactpodcast.com/episodes/88) Tailwind CSS (https://tailwindcss.com/) Tailwind Cheat Sheet (https://nerdcave.com/tailwind-cheat-sheet) Redesigning the Tuple Client UI (https://tuple.app/blog/redesign) Bourbon (https://github.com/thoughtbot/bourbon) PurgeCSS (https://purgecss.com/) thoughtbot dotfiles (https://github.com/thoughtbot/dotfiles) PostCSS (https://postcss.org/)

It’s another potluck! In this episode, Scott and Wes answer your questions about custom hooks, static site generators, code management, CSS, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 04:02 - Q: Could you do a quick overview of how to effectively use a platform like Cloudinary? I have a Gatsby site with a lot of images and want to use something like Cloudinary to help with optimization, but the docs aren’t completely clear to me how to get the most out of their service. 10:58 - Q: What kind of CSS pre/post-processor you usually use? What are the pros and cons of pre-processor (SASS, SCSS, LESS) and post-processor (PostCSS)? 16:22 - Q: What is the most effective way to share a project with the internet and get feedback? I’m in a phase right now where I’m building loads of new web things with React and JavaScript, but the only place I can think to share them is my Twitter, where only like 3 people will see them. 18:35 - Q: What are your thoughts on classes in JavaScript? Do we still need them in 2020, or has the functional programming paradigm made them largely unnecessary? Does the answer change based on the size of the project and/or team? 23:56 - Q: Does ES2020 have var? Also, is ES2020 a real spec or just a term people are using? 27:37 - Q: Have you tried gqless, a graphql client alternative to something like Apollo client? Very interesting idea for clean and maintainable code. 29:15 - Q: What are the main differences in working for a software agency and a software product company? Pros and cons of each? 33:53 - Q: Advice for having static blog with minimal moving parts? I used to have a static blog but I eventually got sick of touching it because instead of writing content I often got stuck keeping up with all the dependencies involved. 38:18 - Q: Micro Frontends—is it the solution to rewriting legacy components? 42:16 - Q: I am relatively new to web development and I feel like it is very difficult to “catch up” with JavaScript. It seems like whenever I try to contribute an open source, I can’t figure out the code because they’re using newer (and presumably better) ways of doing things. How can I get up to date with everything that’s going on in the JavaScript world? Also, at what point should I start learning a front-end framework? 46:56 - Q: My team and I are starting to write pretty complicated custom hooks gathering data from a number of different endpoints and/or polling certain endpoints on a continuous interval timer before returning it to the component that needs the data. Since this is the case some hooks have gotten fairly large with multiple functions inside of them getting called to get/manipulate all the data, or multiple hooks using those same functions to get slightly different data. Is it a best practice to keep all those hooks together in one file if they support all the hooks? Or should we break the hooks into separate files and move the helper functions into another file and just have one hook per file? 51:10 - Q: Any tips for navigating projects with bad project managers? Working with non-technical agency project managers makes it pretty difficult to effectively plan and allocate time to ensure that all of the projects are done on time, on budget, and done well. It’s important to me to maintain an optimistic attitude in the organization, but sometimes I’d love to just hit 'em with the 'ol “Peace out” and go smoke some pork butt. Wondering if you guys have any good experience managing these types of projects? 55:45 - Q: I’m committing often and early, but this means that I end up writing the same vague git commit message over and over again. I know the solution to the problem is to just be more verbose, but it’s a difficult habit to break. Any advice? Links imgIX Netlify Sass Less Bootstrap Stylus PostCSS WordPress Reddit StaticGen Gridsom Vue Laravel Hugo ××× SIIIIICK ××× PIIIICKS ××× Scott: Jelle’s Marble Runs Wes: Hyundai HHC2GNK Vertical Style Electric Air Compressor Shameless Plugs Scott: Level Up Tutorials Pro - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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

A 63. adásban megnéztük az újdonságokat a postcss 8-ban, milyen megoldásokat használtak a facebooknál az új layoutnál. És végül néhány érdekesség mellett volt filmajánló is a karanténos időszakra. Résztvevők: Edu Róka Tartalom: 00:00:28 – PostCSS 8 00:07:14 – Facebook CSS 00:14:27 – Email Dark Theme 00:23:20 – Webstorm 2020.1 00:28:50 – Filmajánló PostCSS 8.0 is […]

Quick show notes Our Guest: Kathleen McMahon Her JAMstack Jams: MDX | Gatsby Special thanks to Kathleen for doing the transcription for this episode Transciption Bryan Robinson 0:03 Welcome to another jam packed JAMstack adventure on That's My JAMstack — the podcast where we ask the fantastical question, what is your jam in the JAMstack? I'm your host, Bryan Robinson. And on today's episode, we had the amazing Kathleen McMahon. Kathleen is a developer and design systems guru and I had an amazing conversation with her. But before we dive into the interview, I do want to mention that our amazing sponsor TakeShape is back again this week. Stick around after the episode to hear more about their amazing content platform for the JAMstack, or head on over to takeshape.io/thatsmyjamstack for more information. Bryan Robinson 0:39 All right, Kathleen. Well, thanks for joining us today on the podcast. Kathleen McMahon 0:41 Thanks for having me. Bryan Robinson 0:42 Cool. So let's, let's talk a little bit about you. Tell us a little bit about yourself. What do you do for work? What do you do for fun, that sort of thing. Kathleen McMahon 0:47 Okay, so alright, let's break this down. For work, I am the Tech Lead for the O'Reilly Media Design System. So that's an internal open source project. We're trying to get you know, just a consistent look and feel for our components and our just our materials. I don't know if you've ever heard of design system, kind of a hot topic lately, but yes. Bryan Robinson 1:10 A little bit. Kathleen McMahon 1:11 So that's what I work on. For fun, in the fall mostly, I race cyclocross — very badly — on a single speed in the back of the pack, because everyone laps me twice, and I wear costume to make everyone that passes me laugh. And I also put tunes in my back pocket. So we have, you know, soundtrack, we have costumes. Everyone knows me because it's a person who wears, you know, like this... it looks like this lit up thing of like — spaghetti — with like a Spam costume backwards or an M&Ms costume backwards, you can be entertained! Bryan Robinson 1:51 Have you ever caused any wrecks with that? Like have people like laughed so hard, they fall off? Okay. All right, good. Good. Bryan Robinson 1:56 No, no, no, I've been doing this for a very long time. Like my, I'm much better at soccer, but I love to I love and I love soccer, but I love to bike. I'm just horrible at it. And it's fine. I just like to be at the back while everyone else is racing like going hard. And I'm back there just chilling out. Bryan Robinson 2:14 Nice and you get out you get outside, you have some fun, and you have let other people have fun while they're competing, too. Bryan Robinson 2:19 Yeah, exactly it's this huge camaraderie. And you know, who's coming, everyone announces they're coming and just you hold your line and someone else passes you and, you know, you making sure you're not holding back the leader. Everything's good. Bryan Robinson 2:34 Well, very cool. So... so let's talk a little bit about the JAMstack. So what was your entry point into this idea, either JAMstack or static sites or wherever you kind of started with it? Kathleen McMahon 2:42 Ah, that's a very good question. So, um, how I got into JAMstack was... so our design system has documentation. And our documentation site was built before MDX came out. So before JAMstack was really a thing. So it was around 2018 when MDX spec was really starting to get, you know, baked in a bit. And the way we were generating our documentation site is we had a separate repo. In that repo, we were using react-docgen, to generate our, our component. Kathleen McMahon 3:24 For example, our component pages. So we could use Markdown and it was awesome, but we had to use it in a very brittle way. We had to, we had a script to scan through our component files to you know, create, you know, data for props, tables, spit that into an object. We would have. We would use our Markdown files to write down like, you know, this is your primary button. This is the code for it. This is how you should use it. But we had to write our Markdown in a very specific order. We had to have like an h1 for our, our component name. We could have one paragraph — but only one paragraph — of intro paragraph. When we had two, you know, you could write it, but only the first one would show up from our script. And then we would have, you know, every single variant had to be written as an h2 with, you know, the variant, but not to be... only one paragraph, only one variant, and you couldn't put any h3s in there, you couldn't do anything else. And the minute you started, being freer with your Markdown, things would not render. And you couldn't even bring in rack rack, I'm sorry, you couldn't even bring in React components at all into the Markdown. So you were... you would have this one file for the information that was in your Markdown, and you'd have another file that would grab everything from your React components. Put it into a different object, and you would cobble them together in this very just... it was so hard to work with that... Kathleen McMahon 5:05 Even as someone who was used to the code base, it was hard. And for people that were contributing, they would flee. I just did a talk about this in early February for Gatsby days. I was talking about this whole journey and it was just I use a lot of penguin gifs. Penguins, you know, fleeing and running away and just like, you know, just hitting their head against the glacier because everything was brittle. So this is why once the MDX spec matured, I was like, "wow! We could do some more, so much more now. We can write what we want to write. What we write will show up on the page." And this is so much more exciting to use. And now we can have contributors that want to come in and say, "Oh, you know, I found a typo." Just you know, fix the typo, push up a commit. Bryan Robinson 5:42 And don't worry about the actual structure of your markdown. You're good to go. Bryan Robinson 5:45 Right. You're good. Yeah. Bryan Robinson 5:47 So, so that's MDX and obviously, Are y'all using Gatsby then for the design system documentation? Bryan Robinson 5:54 Yes. Bryan Robinson 5:54 Very nice. Kathleen McMahon 5:55 Yeah. Bryan Robinson 5:56 Kind of walk through that a little bit for me. Bryan Robinson 5:59 Um... Do you want to me to walk you through my learning curve? Or...? Bryan Robinson 6:04 Well just kind of like I guess transitioning from the React docs to Gatsby. Bryan Robinson 6:09 Okay, so that was a two weeks of pain that was so worth — it was so worth it. Um so what I did the transition was I... went to Gatsby. Of course my cat is meowing right now. That is Thor if you ever hear him meowing. That is Thor, the Mighty Thor. What we, what I did was... I went into the Gatsby site, I did their tutorials. I went to tutorials one through eight and um, you know, made myself a site. And after following that, tried to figure out what was missing because that — you know, that the tu- tutorial, you know, walks you through, this is how you get started, you know, doing a blog post and all these other things. And it started with with some Markdown. But it was missing some stuff. So you had to like write down what what everything, you know, everything that you missed. And I would get stuck on certain things like either creating pages, or the GraphQL query. Because you had that, you had to figure out like where, where you had to modify either the Gatsby node page, or the Gatsby browser page, or the Gatsby config. And you had to do it in a certain way. So, once I found out the right combination of understanding that I had to adjust my config, so it would support like post — because we just use postCSS in our projects. How to use themes because I watched a Twitch livestream stream with Jason Lengstorf and Chris Biscardi, and they were talking about the experimental themes. So I followed, you know, what they were doing and made a theme within a theme while it was still experimental phase. Grabbed that into our doc site, tried to make things work, and the hardest part was trying to — it wasn't where you would make your, you know, your source pages and, you know, just generate your files — it was talking to the separate directory where our components were because... We wanted our components, we wanted a better separation of concerns of documentation for just a general doc for general docs, one location. And not in a separate repo anymore. In, it's just this separate directory in this one repo. But our, our components are hosted in a source repo. And so we have it for better separation concerns we have, you know, the button component is in a folder with all you know, all its files. And so you can always keep everything you know, all you know test files and CSS files and you know, Storybook file, and the Markdown file all co-located in, you know, one location. So make, you know, make maintenance easier. Now, with that the hardest part was trying to figure out, "okay, how does Gatsby talk to this source folder?" And once you found the right combination of, you have to do a query this way, and you have to point it to the right you know you have to use these plugins like the Gatsby... Gatsby file, plugin and you add/use, you know, this other plugin which I could pull up the code base to to remind you of all the words right now, but I can't because MDX right now it's on my brain, and I'm very excited about it. But! I'm figuring out and looking at it right now. Ahh. There we go. So with with the config, you know, you have things like the page creator, the file system, you had to learn, you know, how to resolve your paths. And if you were, if you were new to you know how to use Node at all, it's a learning curve for anyone. Or if you haven't done Node, for a while, you're like, Oh, what is this like, __dirname? What does that mean? You know, how does this do things? So it was pretty cool. Once you figured it out. You're like, "Okay, this is what works", then comment the heck out of it. So everyone else will know how to use this. So once you got everything set up for like, how to handle postCSS, how to compile ES6 packages, because that's what we're using in here. How to autolink headers because you want to make sure that your your headings are accessible and you can link right to them and share those links. And how can you point to the data file, because we're still using that data file to generate props tables. And but also point to the source folder. So we can grab any MDX files from the source folder. Once you figured that out, it was, everything was happy. And then all you had to do was in the Node file, do the... do the gatsby-node file is make a query to find the childMdx body, which was awesome. And then you would just create the page and point it to the template you were using. So it was like "this is magical!" All you have to do this thing on everyone else just have to do like npm run, you know, npm run docs. Like what? Yeah, everyone else is gonna be not like, you have to do this npm link, npm link to this and da-da-da-da. You're like, "no, no, we just want to do one thing. One, one command." So we got down to that, and it was just very exciting. And you learned a lot about Gatsby because like the stuff where you're doing it like a... Bryan Robinson 11:02 Like either a static query or page query because there's two different ways you can do, depending on if you're in a layout file or other files. We had to do this particular query in gatsby-node because we're pointing to a separate directory, because there's a lot of stuff that gets done under the hood. And their docs are getting better. The team there is great. And like they've been incrementally making everything so much better. That back, you know, back in 2000, there was almost a year ago that we convert our docs. Back then it was you had to, you know, if there was anything missing in the docs you had, you're kind of on your own. But now it's a lot better of like everything's pointing where it needs to be pointing now. And which is interesting, because I'm going to divert into a different direction. Gatsby's had this 100... 100 Days of Gatsby and it's almost finished. It started January 1, no, mid like a Wednesday at the very beginning of January, because I signed up for it. So I'm like, I'm going to go through this again. See what I missed. See what I learned. And I went through it again, I've been writing down notes of everything that's missing in the docs, because I'm gonna make PRs. Like, you know what, these are the things that weren't clear to me. And it will help, you know, contribute back, say, "hey, this is what I learned. This is what I missed." And, you know, there's ways that we can add that back to the docs. Bryan Robinson 12:14 That's kind of awesome. I feel I feel like one of the big things in the JAMstack right now is just this open source community and how like, everyone wants to make it better. And it's not like a complaining mechanism. It's like, "how can I go in and make the next person have an easier time?" Is that, is that kind of been your experience as well? Bryan Robinson 12:30 Oh, totally. Because it's your your, everyone's trying to learn this at the same time. And these products that are coming out are amazing, and they are doing a lot of stuff under the hood for you. But there's also things that are missing. It's more of a — and it's not intentional — but it's more of an assumption of you already know these things already. You already know that... if someone says Yarn and you're using NPM, you use NPM. And you understand the dangers. of using Yarn and NPM at the same time, but if you've never used that, you know, you have to go back to approaching it or like, what if I've never seen this, but what if I've never seen you before? I don't know, I'm just gonna follow the instructions verbatim. Why is this breaking? I don't know. Or, you know, just things were even, like, there's gonna be a lot of people coming from, you know, self taught, you know, or any other, you know... It could be a bootcamp, or where you get thrown in, you know, four hours of HTML and some other some other questionable practices. Um, but yeah, um, but it's important that the community give back and start talking to each other. And that's one of the reasons why I love Gatsby so much is because the community over there is amazing. And the team over there, they walk their talk. They are always helpful in finding ways to make sure that, you know, if something's missing, they either encourage contributions. They're willing to pair with you, and help fill in those gaps. So yeah, I love the community. Just for that reason. Bryan Robinson 14:01 I'm kind of curious. So... so we're talking about, like, the docs in general. And I feel like — and maybe you've got an opinion on this — like, we were at a point in, you know, quote unquote, the JAMstack, right, where it was a very, very, like heavy developer-centric ideology for a while. But it's starting to get this massive adoption. So we see a lot more beginners coming in. And it's very curious to see how we have to adapt to that. Because you're right, like, I see some docs who say, you know, run NPM this or you or Yarn this. But then I see some that just spit out one or the other. And I'm wondering, like, how we can facilitate a bigger or a quicker adoption of like, a beginner-first mentality in a very developer-centric area. Bryan Robinson 14:43 Ah, yeah. Bryan Robinson 14:46 That's almost like the question of all time at this point. Um, yeah. You know, it's one thing is making those... making the time to write the docs. But other is — a lot of part is — the feedback. Like, a lot of like, personally, I see a lot of people can complain about something, but they won't offer a solution like, "hey, I, you know, I didn't understand this", or, "hey, I didn't understand this. I wish I, you know, rather than I wish it told me this, because once I figured this out, you know, it really helped me." Some people are solving it by when they learn they blog about it. So that's great. But then you have to like search for the blogs. So it's like, how do you combine you know, all that knowledge that is on the interwebs, everywhere, and but also find a way to get it back into the docs? Because when you are on a, you know, smaller, smaller startup team or even open source, anything you have to rely on your contributors to, you know, get your work done. Bryan Robinson 15:46 Yeah. So that makes a lot of sense to me. And I wonder if more places should actually be linking to all those great blog posts. Of course, there's still that findability issue. Like if you're a maintainer, you're not just actively searching for blog posts about your stuff, although maybe you are. But like, I'd be very interested to see it like a push that's like if you write a blog post, keep it on your site, but like, let's link to it. Like let's build a, a repository for each framework in their documentation of like, articles on X, Y, and Z. Bryan Robinson 16:14 That's very interesting. For example, accessibility project does that right now. Like accessibility project is really great about I mean, they have articles on there, but Iit will also link to different like, individuals tend to blog a lot. I do know that Gatsby has their own blog, so that you know, isn't just gets the employees that are blogging. There are individual contributors that are blogging to so maybe that's the way to do it. But how do you get that out there? How do you get that... that knowledge that hey, you know, because guess these philosophies, you all are welcome here. Everyone is welcome. Right. And maybe I haven't been reading closely enough to like read the blog where it says, "hey, you know, you can blog for Gatsby because of this. I mean, I just need to read more closely to say, wasn't like written there? Or is it more of a, like presumption? Or something where you can like, share that information out to people like, "hey, you learn something new? Why don't you post it on, you know, the blog" or like a lot of people are posting on Dev.to. Bryan Robinson 17:16 True. Yeah. Kathleen McMahon 17:17 And they will, they will do, you know, they will do tags to stuff, you know, then you can start searching by tag. Bryan Robinson 17:24 I wonder if you could, at that point, like build a React app into Gatsby and into their site or into into what you know, what, whatever open source thing is it to like do a search for Dev.to tags. Like I'm an Eleventy buff, so it's like, if they just pulled in like an Eleventy tag, then I don't know that'd be really interesting. Kathleen McMahon 17:43 It's almost like like the arcgis like the COVID map. The legit one, not the one that's like that asks you to download stuff — shady stuff — to your computer. Something like that, because there's a lot of, you know, there's a lot of crowdsourcing stuff out there just to share the information. So yeah. That would definitely be a good thing to do. Bryan Robinson 18:01 Yeah. But viral spread of helpful... Kathleen McMahon 18:05 Not that! Not, no... not the vir-- yeah. Yeah. No need to download anything. Bryan Robinson 18:11 Exactly. Bryan Robinson 18:13 Cool. So uh, so I assume so professionally, you're using the JAMstack in this kind of Gatsby docs way. Are you anything personally? Or is it all just kind of that that professional aspect. Kathleen McMahon 18:23 For now it's professional, but I'm, I'm — in my copious amount of free time, you know — still working through those 100 Days of Gatsby because, you know, you're learning how to approach using JAMstack in different ways. So once I figure that out, I have two sites that I could potentially convert because one of them is a WordPress site. And so that's the site I've had, you know, for my, my freelance design business, you know, that I've had for a long time. It's a... 2011 WordPress theme, and you know, I literally have like three blog posts, but you know. mostly it's a portfolio site. So I could migrate that over. And then you know, my other dev site, I could potentially make that JAMstack too. I'm just trying to figure out what I want to do. Because I think the dev site is like, combine JAMstack, or like, even my projects, like, do one project three times, like, this is how you can do in vanillaJS. This is how you can do it in ReactJS. This is how you can do it in Vue. So it's, there's different ways you can combine things. But yeah, I have, I think I want to try converting my WordPress site over. Bryan Robinson 19:33 I'll say from from my experience, it was actually pretty easy. And this was even like, I converted mine over about two and a half years ago. And it was not bad and they're better tools now. So like, that's a great way of thinking. Kathleen McMahon 19:45 Yeah, it's like I have a site just convert it over. hardest part is like figuring out the whole portfolio part without redesigning. It's like you wouldn't, "you will not redesign your site. You will just port it over." Bryan Robinson 19:59 As a fellow designer, there's almost no way that happens, you know, it feels good to do it. I don't know, Kathleen McMahon 20:05 It does but maybe I should scaffold first at least. Scaffold first and see how much you can do with Mark-- with MDX though. Because MDX... the way that one of the things I've been really loving about MDX is like how the, the, the team that is working on the spec, what they're doing with it. I mean, the things that you can do, where you can take MDX syntax, and even Mark like Markdown syntax, and you can like swap in certain things with React components. They call it shortcodes now, but you know, if you can swap shortcodes in is magical. And the way that you can — I saw one of the Gatsby employees, Kyle, not, not Kyle Matthews. I think Kyle Gill was tweeting about this last week, and I bookmarked it or like a week and a half ago, and he was showing how he was learning that you could import MDX files, like a Markdown file into a Markdown file. Bryan Robinson 21:08 Right? Yeah. Kathleen McMahon 21:09 Yeah! And it wasn't just like importing a React component, you were importing an MDX file into an MDX file. It's just like, "Whoa!" So you couldn't... you don't have to have necessarily like, you know, this very, very long scroll forever page. You could be, you know, putting them up into smaller chunks. And people can, you know, won't be overwhelmed when, again, making new docs, someone can start editing something, and then they just pop in that file. Bryan Robinson 21:35 And they're done. They're good to go. Yeah, Kathleen McMahon 21:37 Yeah. Yeah. It's amazing! Bryan Robinson 21:38 I also have a friend of mine who has redesigned his personal site like 15 times in the past three years. And his his take this time is he's actually taking the default Gatsby theme, the thing that like comes baked in, and he just started with that cuz he was like, I have to finally get it live. Like I've redone this 15 times I have to make it live. And so he's just incrementally changing that design, changing that like... structure, and he's also that kind of designer first and then has become an engineer since then. So like, we like to do custom stuff and then we never launch it. So... Bryan Robinson 22:11 Incremental builds are nice. Kathleen McMahon 22:13 Yes, they are. You just push it up and it's like, oh, well, it's already up there. Sweet! Bryan Robinson 22:18 I'm Done! Good to go. Cool. So it'd be fair to say that the Gatsby is your jam the JAMstack, we want to go all the way down to like MDX as your jam in the JAMstack? Like what would you consider your main top thing? Kathleen McMahon 22:28 Okay, my main top thing first is MDX and then, and then Gatsby. Okay. Just because MDX I've been like experimented with code blocks and learning... learning from like watching other people do it and like wow, like how much I can like, make a code block better. And I want... I want to — I'm in the middle of trying to make a code block that is... You have... Formidable has a package react-live and like bringing that into code blocks is awesome. And they also have prism-react-renderer, I believe, is another one so you get the syntax highlighting in there. But um I'm working on making a component that will, when you have the block, you could have it editable, but maybe you could — I'm trying to find a way that when you, you know, click on a button, you could see what the rendered code is versus like, just, you know... using ReactDOMServer to show the rendered code. Like, this is the semantic structure that gets rendered under the hood. So you can see what classes get, you know, because that's — a lot of times people want to, they want to either dig into the code base, but you got to click here. It's like, "if I write this, what code will I get under the hood?" But also have that and also have the code block, you know, like, have display of the component, but below it has — and you'll see this often — if you have the code, you know, the code there, but sometimes that code block will get really long. So have that collapsible. But also then people forget, have it keyboard focusable, so you can tab through everything. And if there's a focus trap, make sure you can get out of the focus trap and move forward. So I'm looking to make an accessible code block thing. And once I get it, I will put it somewhere up on NPM and people can use it. Bryan Robinson 23:59 So that is very cool and, yeah accessibility on that sort of thing. People... people don't realize it's not always easy — especially when you want to do like the really nice, usable, fun interface. To make accessible you got to put the work in or... have somebody do an open source package and download it. Which is always a nice thing Kathleen McMahon 24:18 And make it feasible so they can like, override themes but also you know, maybe if there's a way we can when they do the theme go "hey, those color combinations may not pass... if you do it that way." So... Kathleen McMahon 24:31 but start with an accessible you know... Bryan Robinson 24:33 Exactly. Accessible start and then then progressively enhance from there. Kathleen McMahon 24:37 Yes. There's a way like we can add tests for like what has, you know, accessible violations but I think there might be a way that you could look, maybe have some sort of contrast... Because there are these other tools we could have contrast checkers where you can do eyedropper things. Maybe there's a way to do like a... 'cause I know BlocksUI is working on that right now. BlocksUI is working on like when you put text over, you know, something, they'll immediately give you alert like, "hey, this is not following things." Yeah, but this is a component This isn't like a whole like UI, you know, like WYSIWYG system here so it's a little different, but maybe if they do the tests.. if they do the test, you know, that could be a way. Bryan Robinson 25:12 Yes. Cool so so what's your actual musical jam right now? What's... what's in your earphones? What are you listening to regularly? Kathleen McMahon 25:19 So um, when I... when I am well either coding or just in dance mode, I have a thing for Soca and Dancehall. And so I always excited when, I'm always excited on Carnival season comes around. I got first got turned on to it in the 90s with a band called Krosfyah. Krosfyah, which it's k-r-o-s-f-y-a-h. And their song was Pump Me Up and it was just like... once I heard that I was hooked! And then I discovered Lady Saw and Buju Banton and I you know, some other ones that were really great, and like one one that I really liked... but then he wasn't really... nice to the community so I can't like him anymore. But ever since then I've been always following, you know, these different you know, artists and lately it's Machel Montano is my favorite. Bunjai Garlin and Shal Marsh Marshall. So say Shal Marshall right now this is one — that's definitely Boston, Boston accent there — I apologize. Shal Marshall. And one of his songs is Splinters and it is great. And Miachel Montano's — one of them is Brace Up — is one of my favorites lately. The other one is with Calypso Rose. Leave Me Alone. The other one he does and other ones with these. I have a couple of ones that are like the ones called Possessed. With Kerwin Dubois and Machel Montano. He'd likes to do compilations with people and it's just these like, happy and some of them were just like, "I'm focusing, leave me alone" but um, you know, "don't... don't mess with me because I'm you know, I'm partying" and yeah, so that's that's me. It's just happy music. Happy music. Kathleen McMahon 27:15 Yeah. Bryan Robinson 27:15 I like it cool. So is there anything that you'd like to promote and get out to the JAMstack community as a whol? Anything you're working on? Kathleen McMahon 27:20 Um... Well I'm trying to get that um, that code block component out there. I would have, like, promoted the conferences but I'm... they're all being postponed right now. It's like, I'm waiting to hear from a couple of them, because they haven't officially postponed but I think they will. But the other two, like one is Self Conference is postponing for a year. And there you know, I would definitely like, if you can have a chance to get in Detroit, that's one to watch. And the UIArch Conf, which is supposed to be in April, and I was gonna do the Web Accessibility Conference there. That is postponed for now, to November of this year. The other two, three, you know, you haven't heard the postponement date, but I'm assuming. Because otherwise, I wouldn't be able to get back into the country. Which fine, but at the same time, not... Bryan Robinson 28:12 Fine, but not fine. Kathleen McMahon 28:14 But not fine. Bryan Robinson 28:17 Cool. Well, I appreciate you taking the time to talk with us today and keep doing some amazing stuff. I'm really looking forward to that accessible code block, too. Kathleen McMahon 28:24 Wonder... wonderful. And it's, it's an honor to be asked to speak on the topic and to talk about the JAMstack. So... Bryan Robinson 28:34 I want to thank Kathleen again, and thank all the listeners around the world for making the JAMstack community, one of the best developer communities on the web. Be sure to start heart favorite or whatever in your podcast app of choice, and spread the word around for those that haven't yet heard. With that it's sponsor time. And I wanted to talk about TakeShape. TakeShape is a content platform directly designed for the JAMstack. They have a super simple GraphQL API, a static site generator, and a CMS all ready for your use. They're also working on their mesh product, which allows you to mix and match multiple data sources into one easy-to-use API. Definitely worth checking into. Head on over to takeshape.io/thatsmyjamstack for more information. With that, I'll bid you adieu until next week, and implore you to keep making amazing things on the web, and to keep things jammyTranscribed by https://otter.aiIntro/outtro music by bensound.comSupport That's my JAMstack by donating to their Tip Jar: https://tips.pinecast.com/jar/thats-my-jamstack

Robots.txt.Google's humans.txt.The noisy neighbor problem.Denial Of Service Attack.SQL Injection.Apache Kafka.AWS Kinesis.Materialized Views in Postgres.Architecture Of Giants: Data Stacks At Facebook, Netflix, Airbnb, And Pinterest.Google JSON Style Guide.jsonapi.orgPostman.Jeff Atwood Lost Website Thread.Guess.js Libraries and tools for enabling data-driven user-experiences on the web) Contribution By Addy Osmani et al.Episode Picks:Alfy:Mirage.js.Postcss.Luay:Remote Book.Minor Corrections:* Luay Mistakenly mentioned Dependency Injection instead of SQL Injection during the episode.* ORM Stands for Object-Relational Mapping not Model.

Тринадцатый выпуск! Ламповый подкаст с Андреем Ситником @andrey_sitnik. Обсуждаем Open-Source.

Topics include:- 2:31 – Tailwind, PostCSS, and low-level vs. high-level tools- 13:12 – Mirage JS and Cypress- 13:55 – Ember 3.13 and Octane- 15:28 – Ryan's experiencing upgrading EmberMap from 3.4 to 3.12- 20:19 - ES Modules, and learning that imports are not code- 42:12 – React and useEffect, and the difference between reads and writes vs. rendering and event handlers- 1:00:50 – Object-oriented vs. functional programming in JavaScript Links:- [Ember 3.13 Release (Octane Preview)](https://blog.emberjs.com/2019/09/25/ember-3-13-released.html)- [How to upgrade an Ember App or Addon](https://embermap.com/video/how-to-upgrade-an-ember-app-or-addon)- [Rich Harris and Edward Faulkner Twitter thread about ES module design](https://twitter.com/Rich_Harris/status/1176509180951322624)- [Twitter thread about ES module execution order](https://twitter.com/samselikoff/status/1182485014815993856)- [Sam Selikoff on Twitter](https://twitter.com/samselikoff)- [Ryan Toronto on Twitter](https://twitter.com/ryantotweets)

Jordan Scales is a Software Engineer at Stripe and notorious Twitter memelord. He joins us on The Undefined to talk about dank memes, his origin story, and Stripe's React component library and frontend developer experience. Featuring Jordan Scales - Twitter, Github, Website Ken Wheeler – Twitter, GitHub, Website Jared Palmer – Twitter, GitHub, Website Links @fat (creator of Twitter Bootstrap) 3Blue1Brown YouTube Video: "This one time at Bandcamp" from American Pie (1999) Animate Plus by Benjamin De Cock (Twitter, Github) Aphrodite BEM (i.e. "Block Element Modifier" CSS naming convention) PostCSS is a tool for transforming CSS with JavaScript Palantir Blueprint Segment Evergreen A Life in Parts by Bryan Cranston Three Body Problem by Liu Cixin Yoshi's Crafted World for Switch Dog Blood (Skrillex & Boys Noize) - Turn Off The Lights Billie Eilish Picks Rome toolchain (Twitter Thread, Undefined Episode 1 with Seb) Casamigos Miller Lite Malika Favre Patagonia Vests! (Article, React Amsterdam Video) Keystone Light Keystalope

Добрый день уважаемые слушатели. Представляем новый выпуск подкаста RWpod. В этом выпуске: Ruby Ruby 2.6.0-rc1 Released, Truffleruby 1.0 RC10 и Big on Heroku: Scaling Fountain without losing a drop Passing current_user by default in Sidekiq, ActiveRecord on MySQL— Iterating over large tables with conditions и How to store emoji characters with Ruby on Rails & MySQL JavaScript Microsoft Edge: Making the web better through more open source collaboration и Bridging the Gap Between CSS and JavaScript: CSS Modules, PostCSS and the Future of CSS The fastest way to pinpoint frustrating user experiences, 6 JavaScript User Authentication Libraries for 2019, Sharp - high performance Node.js image processing и ForgJs - a JavaScript lightweight object validator

Добрый день уважаемые слушатели. Представляем новый выпуск подкаста RWpod. В этом выпуске: Ruby Ruby 2.6.0-preview3 Released, Testing Asynchronous Threads in Ruby и Migrating from Paperclip to Active Storage Capybara::Chrome - use Capybara to drive Chrome in headless mode via the debugging protocol, Agoo - a High Performance HTTP Server for Ruby, Typerb - strong type checking for Ruby и Grab Bag of Ruby and Ruby on Rails Tricks JavaScript The Linux Foundation Announces Intent to Form New Foundation to Support GraphQL, A Netflix Web Performance Case Study, Five years of PostCSS: State of the Union и CSS and Network Performance JSBI - a pure-JavaScript implementation of the official ECMAScript BigInt proposal, Introducing Loona: Application State Management и Glider.js - a blazingly fast, crazy small, fully responsive, mobile-friendly, dependency free, native scrolling list with paging controls

Web-kehityksestä kertovan huumoripodcastin tämän viikon jaksossa käydään läpi aivan käsittämätön määrä teidän, rakkaiden kuuntelijoidemme, lähettämiä kysymyksiä! Kysymykset Miksi kaikki on niin React-keskeistä? Webpack, rollup, parcel ja muut build -kalut. Kauanko maksaa vaivaa tunkata buildia kasaan ja minkä kanssa pääsee helpoimmalla? Mikä saa teidät työskentelemään konsulttifirmassa eikä esimerkiksi jossain omaa tuotetta tekevässä firmassa? Git aiheinen kysimus: Onko dev branchissa mitään järkeä kun on kuitenkin master(vastaa tuotantoa) ja siitä voitaisiin suoraan forkata issue/feature branchit? Meillä on prod server(sama kuin master branch) ja dev server(silloin tällöin sama kuin dev branch). Porukka committailee ja mergeilee miten sattuu dev branchiin ja asioita jää helposti roikkumaan. Viimeksi masteri oli 81 committia jäljessä ja ihan tuurista kiinni kenelle tämä iloinen dev->master->prod merge-deploy helvetti osuu. CI lienee yksi ratkaisu, mutta ei olla ihan vielä siinä ja henk.koht. haluaisin tappaa tuon dev branchin tai ainakin sen vastuuttoman käytön. Mitä teen? (lehtuska) Onko Web Assembly tai Web Components iso juttu lähitulevaisuudessa? Kannattaako niihin panostaa jo nyt? Onko webassembly vielä käyttökelpoinen webbidevauksessa / tuleeko joskus olemaan? Miten saan Reactin ja kaikki muut uudet herkut lisättyä minun Classic ASP-sovellukseen, jonka tein vuonna 1998 kun se oli uusinta uutta? Tuleeko React Native for Web mullistamaan webbikehityksen? Mitä mieltä ootte create--app boilerplateista tai boilerplateista ylipäätään? Kokonainen jakso testaamisesta (@APKoponen) Less, Stylus, Sass, PostCSS vaiko CSS-modulit, styled components vai jotain muuta? Mistä tietää mitä kannattaa käyttää? Onko Reactin uuden context APIn opettelu "pakollista", jos haluu jatkossa tehä Reactii? Entä kannattaako sen opettelu? Parhaimmat tavat testaamiseen: unit, e2e jne. mitä käyttää? Näin vahvemmin backend-henkisenä olen pitkään miettinyt fronttidevauksen syventymisen hyötyjä. Onko projektit oikeasti nopeutuneet, menneet kompleksisemmiksi tai muuten muuttuneet kivemmiksi sillä että homma tehdään Purescriptillä, joka käännetään JS:ksi ja sitten parsitaan kokonaisiksi tiedostoiksi ties millä frameworkeilla. Missä on hyöty? (Jäärä) Jakson valinnat Riku: Maniac Antti: Witcher-kirjasarja Somemaininnat @webbidevaus bit.ly/webbidevaus bit.ly/webbikesaduuni

DevShow #86 — PostCSS, мусор в JavaScript, кэширование by LoftBlog

Смотреть выпуск: https://youtu.be/jZmmQ87yFLE Андрей Ситник, автор PostCSS, Logux, один из разработчиков Хабра, а также глава разработки в Evil Martians. Входит в тройку самых популярных людей в отечественной веб-разработке. Купить VDS: https://goo.gl/TsVp1C По промокоду "loftblog" при оплате VDS на 200 рублей и более, вы получаете еще 200 рублей в подарок. Промокод можно ввести после регистрации и оплаты в панели управления VDS в разделе "Бонусы и промокоды". 1:18 Как Андрей Ситник пришел в веб-разработку? Сайты за 100$ и компания «Виртуальная мама». 3:12 Зачем выкладывать эротические фотки в соц.сетях? Секс и цензура. 5:36 Про стиль программиста. Что означает татуаж и иероглифы Андрея? 10:04 Создание RAP.ru. 11:23 Космос, лингвистика, религия и программирование. Как это все связано? Поиск истины. 13:49 Зачем ехать в Чернобыль? 15:26 Полеты на ЯК-52. 15:46 Копимизм и свобода информации. 18:40 Бухло и культ личности. 23:08 Работа в "TechMedia" и создание Хабра. 25:26 Работа в Evil Martians. 29:17 3 главных проекта Андрея Ситника. 30:38 PostCSS и революция в препроцессорах. 32:38 Что такое Logux. 39:30 Как путешествия влияют на образование? Выход из зоны комфорта. 40:14 Как быстро изучить программирование? 42:46 Чему учат в университетах? Можно ли стать программистом после окончания? 43:38 Где IT-отрасль лучше всего развита в мире? 45:31 Зачем делиться знаниями с другими?

Stefan, Hans und Schepp geben Erfahrungsberichte zu dem in Revision 224 zum ersten Mal vorgestellten PostCSS. Schaunotizen [00:00:17] PostCSS PostCSS ist gleichzeitig wenig und auch vieles. Das Framework selbst bietet nicht mehr und nicht weniger als eine Möglichkeit CSS in einen Abstract Syntax Tree zu verwandeln, und das später wieder in CSS zu verwandeln. Erst […]

Andrew and David talk STEM games, the recent launch of Tailwind CSS, and Hacktoberfest.

Andrew tells his tale about how he shot a Halibut and David talks PostCSS and Beard V3. Also, more on the notification hiatus.

In this episode, Adam is joined by Matt Stauffer of Tighten to talk about building a CSS framework with PostCSS. Topics include: What is PostCSS, really? PostCSS vs. other preprocessors like Less and Sass Examples of things PostCSS can do How to use PostCSS to add your own features to CSS How to disguise custom features as valid CSS so PostCSS will parse it Porting Tailwind CSS from Less to PostCSS and why it's been awesome Sponsors: Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 days Codeship Links: Tailwind CSS, Adam's upcoming CSS framework CSS Utility Classes and "Separation of Concerts", blog post explaining the motivation behind Tailwind PostCSS.org cssnext "Create Your Own Plugin", PostCSS tutorial at tuts+ PostCSS API documentation

ペルソナ5 - 公式サイト: P5 DARK SOULS III THE FIRE FADES EDITION - PS4 【PS4】コール オブ デューティ ワールドウォーII ファーストパーソン・シューティングゲーム - Wikipedia Splatoon 2 (スプラトゥーン2) CSSのスペシャリストも、サーバーサイドを知れば視野が広がる！ Incrementsが目指すT型エンジニアの育成 Sass: Syntactically Awesome Style Sheets CSSの変数を使う - CSS | MDN postcss/postcss-custom-properties: PostCSS plugin to transform W3C CSS Custom Properties for cascading variables postcss/postcss-nested: PostCSS plugin to unwrap nested rules like how Sass does it. pascalduez/postcss-apply: PostCSS plugin enabling custom properties sets references 1000ch/grd: A CSS grid framework using Flexbox. Only 321 bytes (Gzipped) Why I Abandoned @apply Shadow DOM - Web Components | MDN Custom Elements - Web Components | MDN Web フロントエンドにおけるコンポーネント化のアプローチ Inside Frontend キャンセルして箱根きてる Atomic Design by Brad Frost Techcrunch | Brad Frost morishitter/stylefmt: stylefmt is a tool that automatically formats stylesheets stylelint/stylelint: A mighty, modern CSS linter prettier/prettier: Prettier is an opinionated code formatter Masaaki Morishita - Dribbble scssfmt - Standard SCSS code formatter

Добрый день уважаемые слушатели. Представляем новый выпуск подкаста RWpod. В этом выпуске: Ruby Sinatra 2.0.0, Active Admin 1.0, The Lesser-known Features in Rails 5.1 и Building a Rack::Attack Dashboard Improving capistrano deployment performance, Crafting Better Code Reviews и Announcing the RubyLetter Podcast Crystal from a Rubyist's Perspective, Capistrano AWS, Pwrake: Parallel Workflow extension for Rake, runs on multicores, clusters, clouds и RailsConf 2017: Why Software Engineers Disagree About Everything (video) JavaScript Node.js 8.0.0 has been delayed and will ship on or around May 30th, Prepack - a partial evaluator for JavaScript, Autoprefixer 7.0 and Browserslist 2.0 и PostCSS 6.0 ECMAScript modules in browsers, JavaScript: The compilation epoch, UX drives all of this и 45% Faster React Functional Components, Now Getting Started with Headless Chrome, SmartPhoto.js - the most easy to use responsive image viewer especially for mobile devices, Pkg - package your Node.js project into an executable, Typefont - recognises the font of a text in a image и SpectorJS - explore and troubleshoot your WebGL scenes

Descripcion del programa Joan León Front-end y UI Developer y responsable de formación en su empresa y amante del CSS y la animación nos hablará sobre PostCSS. Si os gusta pensar en el futuro del CSS y las posibilidades que podemos llegar a usar sin duda este es vuestro programa. ¡Bienvenid@s al futuro de la web! Recomendaciones Preguntas rápidas: Joan León Quién me ha inspirado: Lea Verou Quién me ha inspirado: Harry Roberts Quién me ha inspirado: Hugo Giraudel Recomiéndanos un recurso: MDN Recomiéndanos un recurso: Perf.Rocks Recomiéndanos un recurso: DevSpace Recomiéndanos un recurso: Codepen Recomiéndanos un recurso: People You Should Follow on CodePen Recomiéndanos a un o una invitad@: Diana Aceves Recomiéndanos a un o una invitad@: Belén Albeza Recomiéndanos a un o una invitad@: Gabi Recomiéndanos a un o una invitad@: Jaume Sanchez Recomiéndanos a un o una invitad@: Daniel Guillan Recomiéndanos a un o una invitad@: Daniel Fornells Recomiéndanos a un o una invitad@: Fernando Serrano Recomiéndanos a un o una invitad@: Carlos Villuendas ¿Qué tema te gustaría que tratásemos?: WebGL ¿Qué tema te gustaría que tratásemos?: Canvas ¿Qué tema te gustaría que tratásemos?: Creative Coding ¿Qué tema te gustaría que tratásemos?: Desktop apps with HTML5 ¿Qué tema te gustaría que tratásemos?: CSS Architecture ¿Qué tema te gustaría que tratásemos?: Web Games Contacta con: Joan León Twitter de Joan León Blog de Joan León Web de Joan León Links del programa Plugins Rockstars Autoprefixer Autoprefixer Online Autoprefixer Twitter browserslist Rework PostCSS PostCSS Plugins List 1 PostCSS Plugins List 2 CSS Next Pre CSS CSS Nano stylelint postcss import postcss-custom-properties PostCSS Sprites Post Inline SVG PostCSS's plugins I used in my last project (with Gulp) gulp-postcss postcss-color-function postcss-css-variables postcss-custom-media postcss-devtools PostCSS For postcss-math postcss-nested postcss-partial-import postcss-reporter postcss-style-guide Mmmm... plugins (IMHO) postcss-shape postcss-extract-animations postcss-alias postcss-triangle postcss-short-position postcss-short-text postcss-andalusian-stylesheets postcss-trolling postcss-imperial Links útiles PostCSS Resources Suit CSS Post HTML Recomendaciones de Ignacio Harry Roberts - Newsletter CSS Weekly Slides PostCSS - Jorge Introducción a PostCSS - Lourdes Montano - DevDayAR 2016 Contacta con el programa Web de WeCodeSign Twitter de WeCodeSign eMail de WeCodeSign Web de Ignacio Villanueva Twitter de Ignacio Villanueva

Jackie D'Elia has had a long career in web development and programming. For the past several years she has been an independent WordPress developer, primarily on the Genesis platform. During the last year, Jackie has been a regular member of our Saturday podcast panel. We talk to Jackie about her experiences in web development, and what it takes to become a top-quality front-end / WordPress developer.   Jackie D'Elia Design https://jackiedelia.com/   Rethink.FM: The forward thinking podcast for WordPress and front end development https://rethink.fm/   ==================   Our episode this week is sponsored by LiquidWeb. Liquid Web is offering a 33% discount for your first 6 months of managed WordPress hosting. Head over to https://LiquidWeb.com/wordpress and use the code WPTONIC33 at checkout for your discount.   ==================   Table of Contents for Episode 177   0:00 Podcast intros. 2:22 Jackie's origin story into web development. 6:40 How is the WordPress community stack up compared to other web communities? 9:00 Jackie discusses her journey through WordPress, and her current setup for developing sites. 13:32 How does Jackie block out time for continuing her web learning? 17:41 What are some of the things Jackie has changed in her processes since starting her podcast, Rethink.fm? 18:59 The desktop mindset, and why agencies don't follow a content-first or mobile-first process. 23:12 Has Jackie encountered any resistance to being a web developer as a woman, or as a person of a particular age? Why these are strengths and not weaknesses. 25:50 Pros and cons between a hosted e-commerce and hosted e-commerce site. Jackie's advice for e-commerce from 10 years of running a business. 30:27 How is Jackie handling the increasing use of JavaScript in WordPress? Her recommendations for integrating JS into a website. 37:09 Jackie's methodology for staying focused. 41:10 The difference between working with a team as opposed to working by yourself. 43:48 What advice does Jackie have for solo consultants trying to make it in freelancing? 45:54 What percentage split does Jackie network among, between prospects and colleagues? 48:48 Podcast outros.   ===================   Links mentioned during the show:   dBase https://en.wikipedia.org/wiki/DBase   Thesis http://diythemes.com/   Genesis Framework http://my.studiopress.com/themes/genesis/   PostCSS https://github.com/postcss/postcss   DesktopServer https://serverpress.com/   Novell NetWare https://en.wikipedia.org/wiki/NetWare   Team Treehouse https://teamtreehouse.com/   Lynda from LinkedIn https://www.lynda.com/   Know The Code https://knowthecode.io/   Multiple Intelligences Self-Assessment https://www.edutopia.org/multiple-intelligences-assessment

As we look forward to all the great trends and changes that will happen in 2017, in this episode we discuss our thoughts and opinions on the various development trends and notable things that happened in 2016. Looking forward on 2017, we share some of the things we’re excited to see in the new year. Items mentioned in the episode: Preact, React, Inferno, Vue JS, Ember, Angular, Box, Yarn JS, Firefox, Mozilla, Microsoft, Edge, Chakra, Visual Studio Code, Flexbox, CSS Grid, IE, TypeScript, Elm, Flow, Webpack, Progressive Web Apps, React Native, Babel, Redux, WebKit, ES6, Safari, Apple AirPods, Apple MacBook Pro, iPhone 7, Service workers, Web workers, Apple Pay, WebVR, React VR, WebAssembly, Dear JavaScript, OpenSSL, Wearables, Brexit, 2016 US Election, SMACSS, BEM, PostCSS, CSS Houdini, Net Neutrality, Netflix, Atom, Sublime Panelists: Ryan Burgess - @burgessdryan Jem Young - @JemYoung Ryan Anklam - @bittersweetryan Brian Holt - @holtbt Mars Jullian - @marsjosephine Stacy London - @stacylondoner Picks: Ryan Burgess - Electric Objects Frame Ryan Burgess - 2017 conference list Jem Young - Travelers Jem Young - Everyone Ryan Anklam - VIM - devicons Ryan Anklam - Runner’s World Podcast Brian Holt - Run The Jewels 3 Brian Holt - Fish Shell Mars Jullian - React Status Mars Jullian - Frontend focus Stacy London - Nuclide Stacy London - Yarn

関連リンク Kyoto.js 12 - connpass 2017-01-04のJS: PostCSS概要、Chrome開発者ツール、FuseBox - JSer.info PostCSS まとめ - Qiita Optimise your web development workflow 2016 Fuse-Box bundler / API Reference Node.js Interview Questions and Answers (2017 Edition) | @RisingStack [https://tylermcginnis.com/react-interview-questions/) Front-End Performance Checklist 2017 (PDF, Apple Pages) – Smashing Magazine 2017-01-11のJS: Node.js v7.4.0とnpm v4、PhantomJS 2.5.0 Beta、クリーンコード - JSer.info npm/CHANGELOG.md at v4.0.5 · npm/npm · GitHub Comparison with QtWebKit 5.6 · annulen/webkit Wiki · GitHub 縦書きWeb普及委員会 たてよこWebアワード Flow Runtime Front-end Handbook 2017 · GitBook JavaScript Weekly Issue 316: January 5, 2017 The Web Bluetooth module for Angular – Google Developers Experts – Medium Web Bluetooth API - Chrome Platform Status Procedural Texture Generator in javascript

If you have questions of your own, you can tweet us at @immutablefm or join our Slack team and most them in the #immutable channel! Topic 1: I use Xcode on my iMac, but want to also use a MacBook to develop as well. I keep all my code locally, not using Github or such. What's the best way to sync my code and easily go back and forth? Topic 2: How do people organize their CSS? I just started using PostCSS and want to clean up a big style sheet. I am splitting up my styles into different parts at the moment (grid.css etc.), and feel like that is the proper way to do it. However, I have no clue how I can best divide things (which .css files I should make; what system makes sense) Spector BassCSS Matt Leonard Sam: Sam's Media Stand Bryn: Jonathan Cutrell Hitman Ip Man

Writing CSS seems pretty straight forward until your project and team starts to grow. CSS has a lot of issues, in this episode we share some advice for making it a little bit easier. We’ll also discuss ways to create a scalable CSS architecture for large projects and teams. Items mentioned in the episode: Sarah Drasner, Chris Coyier, Una Kravets, Sass, Less, Transpilers episode, BEM, Sass-lint, BEM lint, React, Radium, Aphrodite, Webpack, Ruby, Ruby Sass, LibSass, PostCSS, CSS Houdini, SMACSS, SassySass, Wai Lun Poon, Dart, xkcd compiling, Stylus, Jade, TJ Holowaychuk, Express, Koa, Go, Autoprefixer, Flexbox Panelists: Ryan Burgess - @burgessdryan Augustus Yuan - @augburto Jem Young - @JemYoung Derrick Showers - @derrickshowers Brian Holt - @holtbt Mars Jullian - @marsjosephine Picks: Ryan Burgess - Art of Readme Ryan Burgess - Nas - Wrote My Way Out Augustus Yuan - Google Code-in Augustus Yuan - CSS Stats Jem Young - Sketch Jem Young - Complete Intro to React Derrick Showers - Code Pen Derrick Showers - Nextdoor Brian Holt - CSS Wizardry Brian Holt - mrmrs Brian Holt - Una Kravets Brian Holt - Sarah Drasner Brian Holt - Rachel Nabors Brian Holt - City of Minneapolis Brian Holt - Laphroaig Madeira Mars Jullian - cssreference.io Mars Jullian - The Great Dickens Fair

Друзья, добро пожаловать на наш новый борт, «Суровый веб», продолжаем делиться с вами новостями из мира IT, а также аналитическими статьями. В этот раз поговорили о том как принимать PHP всерьёз, как использовать всплывающие подсказки в проектировании интерфейсов и о том, как относиться к прогрессивным веб-приложениям. Тему к следующему выпуску предлагайте здесь: Тему к подкасту #103. «Дизайн» Всплывающие подсказки в UI. Будущее веб форм — диалоговые интерфейсы. «Разработка» Настоящие разработчики выбирают правильный хостинг!↓ Когда шарить один лишь язык программирования недостаточно. IT, а оно тебе надо. Принимаем PHP всерьёз. Проблемы с PostCSS. Прогрессивные улучшения (progressive enhancement) дурно пахнут. «Светские новости» Новые эмодзи в Unicode 10. Спасибо всем, кто предлагал темы к этому выпуску, с ними можно ознакомиться по ссылке: Темы к подкасту #102. Удачи и дай вам Бог на эти коротенькие семь дней.

Добрый день уважаемые слушатели. Представляем новый выпуск подкаста RWpod. В этом выпуске: Ruby Ruby 2.4 Binding#irb, Ruby 2.4 adds better support for extracting captured data from Regexp match results и Writing a C extension for Ruby in 2016 GeoSpatial Search in Rails Using Elasticsearch, Testing Rake Tasks with RSpec Feature Specs и 3 Common Cucumber Mistakes You've Probably Made Your first Progressive Web App on Rails и Protecting from XSS with Sanitize JavaScript Please stop worrying about Angular 3, Build Pacman, The Problem with PostCSS и @supports will change your life Container Components, Cubes Advent Calendar и Logging Errors in Client-Side Applications Whitestorm.js - framework for developing 3D web apps, Sprite Spirit - generator and SCSS Mixin that Brings Image Sprite to life, Alex.js - catch insensitive, inconsiderate writing и Indent.js - fast minimalistic pure indentation of JavaScript, CSS, and HTML

We talk about CSS, Flexbox, CS Grids, CSS frameworks like Bootstrap and Foundation, Sass and other CSS pre-processors. Our panel this week: Alex Denning from https://alexdenning.com/ and https://masterwp.co/ Jackie D'Elia from https://jackiedelia.com/ Sallie Goetsch from https://wpfangirl.com/ Jonathan Denwood from https://www.wp-tonic.com/ John Locke from https://www.lockedowndesign.com   Episode 138 Table of Contents 0:00 Podcast Intros. 1:49 WordPress New Story #1: The Wix Mobile App, A WordPress Joint https://ma.tt/2016/10/wix-and-the-gpl/ 8:07 WordPress Story #2: Lessons from failing to sell WordPress themes at the start of the gold rush https://alexdenning.com/lessons-sell-wordpress-themes/ 25:08 Main Topic: All About CSS 25:26 What things do you find frustrating about CSS? 27:18 How has CSS changed over the years? 30:16 Flexbox, and the CSS problems it has solved 34:44 The browsers that tend to have browser quirks in 2016/2017 37:02 Do CSS Frameworks make front-end development easier or harder? 42:31 Jackie's workflow with Sass and PostCSS. 50:47 John is still old-school with CSS. 51:48 Sallie's workflow and where she wants to go. 53:40 Email is the final frontier for relatively easy CSS support. 58:47 When will CSS Grid be supported in the majority of browsers? 1:02:39 What are some innovative uses of CSS you have seen this year? 1:07:40 Podcast outros   =================== Links Mentioned During Episode 138:   A Complete Guide to Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/   Using CSS Flexible Boxes https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes   Flexibility: A JavaScript polyfill for Flexbox https://github.com/jonathantneal/flexibility   Sass: Syntactically Awesome Style Sheets http://sass-lang.com/   Grunt: The JavaScript Task Runner http://gruntjs.com/   Gulp: The streaming build system http://gulpjs.com/   Animate.css https://daneden.github.io/animate.css/   A Complete Guide to (CSS) Grid https://css-tricks.com/snippets/css/complete-guide-grid/   CSS Grid Layout Module Level 1 https://www.w3.org/TR/2016/CR-css-grid-1-20160929/   Target Safari 7.1 and 8.0 CSS Styles (OSX Yosemite) https://www.lockedowndesign.com/target-safari-7-1-and-8-0-css-styles-osx-yosemite/   Bootstrap http://getbootstrap.com/   Foundation by Zurb http://foundation.zurb.com/   High Performance Responsive Desig

Добрый день, друзья! Этот праздничный подкаст посвящён дню космонавтики, но накал новостей про разработку и дизайн всё равно высок как никогда! Продолжаем говорить про печальное состояние Web разработки, про PostCSS, а также про типографику и UX.

My friend Matt Winchester (https://twitter.com/mwinche) asked me (https://twitter.com/mwinche/status/718282311918362625) what I think of Aphrodite (https://github.com/Khan/aphrodite) compared to css-modules (https://github.com/css-modules/css-modules). Here's my answer. Here's an example of me migrating from CSS (processed with PostCSS (https://github.com/postcss/postcss)) to Aphrodite: https://github.com/javascriptair/site/commit/d8b8bf349f6c94a1d00539bb285240615baf5b7d (https://github.com/javascriptair/site/commit/d8b8bf349f6c94a1d00539bb285240615baf5b7d) Oh! And one other thing I didn't mention as a benefit of Aphrodite that can be a killer feature is because your CSS is colocated with the components that are using it, you can ship only the styles that are needed and used, rather than shipping ALL of your styles. A lot of problems go away when you have an explicit relationship between your styles and your components

02:30 - Ben Briggs Twitter GitHub Blog cssnano 03:03 - PostCSS cssnext Postcss.parts 07:16 - What problems was PostCSS designed to solve for developers? rework autoprefixer 09:46 - Using PostCSS vs Sass lost 14:02 - Using Future Features 16:28 - Tool Fatigue postcss.org 23:39 - When should people start thinking about using PostCSS? stylelint rtlcss postcss-colorblind 31:24 - Postprocessing midas 33:43 - Shipping Apps with Emojis? 36:21 - Where does PostCSS end and where does css-modules begin? Picks Chet Corcos: Functional Programming for JavaScript People (Aimee) Operation Code Scholarship (Aimee) Web Platform Daily Digest (Ben) Cadbury Caramel Eggs (Joe) Hello World Podcast (Joe) React Rally (Dave)

02:30 - Ben Briggs Twitter GitHub Blog cssnano 03:03 - PostCSS cssnext Postcss.parts 07:16 - What problems was PostCSS designed to solve for developers? rework autoprefixer 09:46 - Using PostCSS vs Sass lost 14:02 - Using Future Features 16:28 - Tool Fatigue postcss.org 23:39 - When should people start thinking about using PostCSS? stylelint rtlcss postcss-colorblind 31:24 - Postprocessing midas 33:43 - Shipping Apps with Emojis? 36:21 - Where does PostCSS end and where does css-modules begin? Picks Chet Corcos: Functional Programming for JavaScript People (Aimee) Operation Code Scholarship (Aimee) Web Platform Daily Digest (Ben) Cadbury Caramel Eggs (Joe) Hello World Podcast (Joe) React Rally (Dave)

02:30 - Ben Briggs Twitter GitHub Blog cssnano 03:03 - PostCSS cssnext Postcss.parts 07:16 - What problems was PostCSS designed to solve for developers? rework autoprefixer 09:46 - Using PostCSS vs Sass lost 14:02 - Using Future Features 16:28 - Tool Fatigue postcss.org 23:39 - When should people start thinking about using PostCSS? stylelint rtlcss postcss-colorblind 31:24 - Postprocessing midas 33:43 - Shipping Apps with Emojis? 36:21 - Where does PostCSS end and where does css-modules begin? Picks Chet Corcos: Functional Programming for JavaScript People (Aimee) Operation Code Scholarship (Aimee) Web Platform Daily Digest (Ben) Cadbury Caramel Eggs (Joe) Hello World Podcast (Joe) React Rally (Dave)

For our very first episode of the Front End Happy Hour podcast, we have our panelists (Augustus Yuan, Derrick Showers, Jem Young, Ryan Anklam and Ryan Burgess) discuss their opinions on the Medium article posted in early January, titled "The Sad State of Web Development", written by Drew Hamlett. The panel shares their thoughts on front end tools and how they view the current state of web development. Items mentioned in the episode: Gulp, Grunt, Broccoli JS, npm, Babel, Sass, PostCSS, React, Ember, Angular Panelists: Augustus Yuan - @augburto Derrick Showers - @derrickshowers Jem Young - @JemYoung Ryan Anklam - @bittersweetryan Ryan Burgess - @burgessdryan Picks: Ryan Burgess - Viking & Lumberjack Series Ryan Burgess - O’Reilly Fluent Conference Ryan Anklam - frinkiac.com Ryan Anklam - Red Rising Trilogy Jem Young - Syntax Con Jem Young - Planet Money Jem Young - MacBook Selfie Stick Derrick Showers - Let’s Encrypt Derrick Showers - Product Hunt Augustus Yuan - Github Scientist

Привет, друзья! Последние "разговоры у экрана" в привычном формате в этом году приветствуют вас. В этот раз центральным вопросом был вопрос про SVG иконки с использованием . Кроме этого много разговаривали про WordPress, кастомные WP_Query объекты для запросов и кастомные поля. И даже немного про PostCSS.

В этом выпуске поговорили про популярный PostCSS, разобрали много статей про юзабилити и UX, взглянули на приложение Snapster, разобрали целый новостной блок про WordPress и многое другое. Следующий выпуск — в конце августа.

К нам в гости заехал Андрей Ситник, автор PostCSS, почётный докладчик, фронтендер Злых Марсиан. Помимо прочего говорим о пре- и пост- процессорах, ruby сообществе и диалектах JavaScript.

Наш гость — Андрей Ситник Промокод для скидки на RailsClub: rubynoname Конкурс Осенью 2014 года Злые марсиане проведут два курса в Москве — Брейнвошинг по Ruby on Rails (11-14 октября) и Брейнвошинг по фронтенду (18-21 октября). Чтобы получить ссылку при оформлении билета, укажите в поле комментариев код «RUBYNONAME» — это даст вам (или оформляющему билет вашему работодателю) скидку 2000 руб. Еще можно с помощью специальной ссылки на странице каждого из курсов задать вопрос преподавателям — если вопрос будет интересный, мы с удовольствием опубликуем ответ, а вы получите скидку 5000 руб. Брейнвошинги очень полезные, но относительно дорогие, и возможность посетить их есть не у всех. Для поощрения open-source активистов мы вместе с Ruby NoName Podcast уже во второй раз проводим конкурс, приз которого — бесплатное посещение одного из брейнвошингов за вклад в open source. Условия Участники конкурса присылают свои open source работы за сентябрь (и оставшуюся до подведения итогов конкурса часть октября) нам в редакцию. Нужно прислать ссылки на свои коммиты или pull requestы, желательно с описанием или со ссылкой на статью в блоге с описанием — нам в комментарий к Gist и по почте info@rubynoname.ru. В письме не забудьте указать, как быстрее всего с вами связаться (почта и телефон, например). Мы рассматриваем работы на Ruby (улучшения/патчи/PR в Rails, популярные гемы, или ваши собственные новые проекты) и работы по фронтенд-части (тут спектр уже — нас интересуют только улучшения PostCSS, а еще лучше — собственные разработки на базе PostCSS; про него слушайте в подкасте). Единственный победитель будет выбран ведущими подкаста и брейнвошингов. Крайний срок подачи работ — 6 октября 2014 года (чтобы вы за неделю до первого брейнвошинга еще успели спланировать время и попасть на курс). Победитель может выбрать один из брейнвошингов для бесплатного посещения. Андрей Ситник Профиль на Гитхабе Профиль в Твиттере Сайт Проекты Autoprefixer PostCSS evil-blocks evil-front visibility.js easings.net R18n Прочее «Цифровой шаббат», статья в «Хакере» Сайт Сергея Короля Мы также выражаем огромную благодарность Стасу Спиридонову за помощь с мастерингом этого выпуска.