Podcasts about codepen

Play Episode Listen Later May 17, 2024 59:07

In this revisited supper club episode, Wes and Scott talk with Brad Frost about how to implement design systems in small and large scale projects, best practices around naming things, keeping everything in sync across different codebases, and how design systems help projects. Show Notes 00:00 Welcome to Syntax! 00:49 Brought to you by Sentry.io. 01:14 Introducing Brad Frost. Brad Frost.com. Atomic Design by Brad Frost. Brad (@brad_frost) on Twitter. Brad on LinkedIn. Brad on Mastodon. Brad on YouTube. Brad on GitHub. Brad Frost on CodePen. Big Medium | Design for What's Next. 06:26 What is a design system? 11:48 How do you keep design and code in sync? Material Design. Shopify Polaris. Carbon Design System. The Design System Ecosystem | Brad Frost. 15:52 How do you use Shopify, WordPress, React, etc. through a design system? 19:19 How is CSS handled? 25:19 What's the benefit of going all in on web components? 28:49 Do small startups need to worry about design systems? 32:36 How do design tokens work? 37:38 How do you deal with pushback on design systems? 41:05 How do you go outside the guidelines? 44:52 What system do you use for naming things? 49:06 How do you best document your language choices? 50:41 Supper Club questions. Thinking in Systems. Miriam Eric Suzanne. Zeldman on Web and Interaction Design. 57:12 Sick Picks + Shameless Plugs. Sick Picks Brad: Rubblebucket. Shameless Plugs Brad: Frostapalooza! | Brad Frost, FROSTAPALOOZA - A Concert Party Happening On August 17th 2024. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

thinking web react wordpress shopify socials github mastodon css sentry syntax supper club design systems interaction design re released material design codepen brad frost atomic design zeldman

762: What to Steal. Finding Inspiration in Web Development

Play Episode Listen Later Apr 29, 2024 38:16

Scott and Wes discuss the delicate balance of what's acceptable to borrow or be inspired by in web development and what crosses into territory that's off-limits. Tune in as they share personal experiences, discuss where to find ethical inspiration, and offer tips on how to effectively capture and utilize it. Show Notes 00:00 Welcome to Syntax! 01:57 Brought to you by Sentry.io. 02:26 What is okay to steal? 02:57 Color palettes. 03:14 Font stacks. 06:26 Type scales. Warp's CSS Gradient Border. Sentry's Date Picker. 08:52 General layout patterns. 10:39 General vibes. 11:20 What is NOT okay to steal? 11:26 Whole site designs. 13:32 Taking too many things from ‘what to steal' list. 16:30 Text copy. Wes' Parity Purchasing Power. 18:48 What we've had stolen + how it feels. 21:45 Where to find inspiration. 21:56 Code inspiration. CSS Scan Buttons. CSS Scan Box Shadows. Codrops. CodePen 25:18 Design inspiration. Bentro Grids. Dribble. Site Inspire. SaaS Landing Pages. One Page Love. Type Wolf. Mobbin. Syntax Newsletter. Hoverstat.es. Internet Gems. 32:48 UX inspiration. Good UI. The Component Gallery. Open UI. Nicely Done. 35:25 How to capture inspiration. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

design code color steal ux socials font warp finding inspiration web development sentry syntax dribble codepen mobbin

613: Recording Live Music, WebC, Open Source, & WordPress Studio

ibm wordpress safari open source live music yarn zed automattic hashicorp recording live codepen brad frost

Play Episode Listen Later Apr 29, 2024 63:27

Show DescriptionChris bought recording gear off an Instagram ad, our thoughts on WebC, CodePen upgrades Yarn, thoughts on the commercial value of open source, Automattic releases an app to install WordPress locally, IBM buys Hashicorp, income tax software, and a hack for getting Safari to respect background colors used in a pseudo selector. Listen on Website →Links FROSTAPALOOZA - A CONCERT/PARTY/HAPPENING ON AUGUST 17th, 2024 601: Brad Frost on A Global Design System + Frostapalooza – ShopTalk Audigo - The pocket-size recording studio Final Cut Pro Sync iPhone Webcam for Mac Acapella PicPlayPost Eleventy Generator Astro Enhance Transform Plain Text Home page Efficient Package Manager Explore Coding Ideas Code Editor Community Node.js Documentary Goodbye Atom. Hello Zed. Zed is now open source Git Branching, Refined Design System Tracker Local WordPress Development Studio by WordPress.com WordPress Security & Performance Melanie Sumner IBM acquires HashiCorp TurboTax Deceptive Filing TikTok Tax Advice Safari Selection Rendering Val Town Sponsors

759: How to Easily Explore Coding Ideas

ideas explore write coding socials databases javascript tailwinds google sheets notebooks sentry bun syntax hot tips tooling observable codepen

Play Episode Listen Later Apr 22, 2024 31:38

Scott and Wes serve up top tools and tricks for rapid idea execution, from JavaScript services like Valtown and Observable to database solutions including LowDB and Google Sheets integration. Get ready to streamline your development ideation process with these tasty insights! Show Notes 00:00 Welcome to Syntax! 02:16 Brought to you by Sentry.io. 03:14 JavaScript Services. 03:43 Valtown. 05:44 Observable. 06:35 Notebooks. 08:23 Deno Juypter Notebooks. 09:51 Svelte Repl. 10:32 Playgrounds: TypeScript, Tailwind, etc… 11:05 CSS Services. 11:10 CodePen. 13:14 Full stack services. 13:47 Your own stack. Hot Tips & Cool Treats. Wes's Hot Tips. Scott's Cool Treats. 21:01 Bun file routing. 24:25 Tooling and tips. 26:30 Database. 26:51 Write to a file. 27:40 LowDB. 29:00 SQLite + Drizzle. 29:40 Google Sheets. 30:06 Sheet DB. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

609: Blake Watson on Home Cooked Apps

Giant Robots Smashing Into Other Giant Robots

Play Episode Listen Later Apr 1, 2024 67:19

Show DescriptionWhat is a home cooked app? Blake Watson is on this episode to talk all about the kinds of apps that make a good home cooked app, tips and advice he has for making them, resisting the urge to monetize or growth hack them, and a few CodePen v2 thoughts sprinkled in at the end. Listen on Website →GuestsBlake WatsonGuest's Main URL • Guest's TwitterCurrently a member of the frontend dev team at MRI Technologies, working on projects for NASA. Links Watson Brothers Games An app can be a home-cooked meal blakewatson.com – About blakewatson.com – MagnoliaJS 2023: The joys of home-cooked apps MRI Technologies blakewatson.com – Building our own private Discord knockoff blakewatson.com – Things I miss blakewatson.com – Use your Mac the way I do: a thought experiment Overimagine1/old-discord-font: CSS to revert Discord's font change. A Fine Start - minimal new tab page Knockout : Home Vue.js - The Progressive JavaScript Framework | Vue.js The Programming Language Lua Save 10% on Thronefall on Steam Game Off 2023 - itch.io Sponsors

building nasa discord mac apps cooked css codepen blake watson

517 - Building Better Design Systems with Luro's Trent Walton

Play Episode Listen Later Mar 21, 2024 44:59

Hosts Victoria Guido and Will Larry are joined by Trent Walton, CEO of Luro. Trent shares his journey into the design world, from his early fascination with typography and logos to co-founding Paravel. This agency later evolved into creating Luro, a no-code solution for building design systems and tracking their adoption across products. Trent emphasizes the importance of understanding the materials one works with in design and development and stresses the need for a holistic approach to product building. This approach blurs the lines between disciplines, encouraging a generalist mindset over specialization. Luro, as a product, stemmed from the realization that existing design systems often fell short in adoption and application, leading to a search for a more integrated and comprehensive solution. Trent outlines the functionality and vision behind Luro, explaining how it serves not just designers and developers but entire organizations by fostering better collaboration, documentation, and understanding of design decisions. Luro aims to streamline the creation and maintenance of design systems, making them more accessible and manageable, even for teams facing resource constraints. By incorporating performance, accessibility metrics, and the ability to track component adoption and integration, Luro provides a platform for continuous improvement and alignment with organizational goals. Luro (https://luroapp.com/) Follow Luro on LinkedIn (https://www.linkedin.com/company/luroapp/), YouTube (https://www.youtube.com/channel/UCsS9BEmX1NPBXkbaLGcMZlw), Discord (https://discord.com/invite/aNEdjnR6A5), or Instagram (https://www.instagram.com/luroapp/). Follow Trent Walton on LinkedIn (https://www.linkedin.com/in/trent-walton/). Visit his website at trentwalton.com (https://trentwalton.com/). Follow thoughtbot on X (https://twitter.com/thoughtbot) or LinkedIn (https://www.linkedin.com/company/150727/). Become a Sponsor (https://thoughtbot.com/sponsorship) of Giant Robots! Transcript: VICTORIA: This is the Giant Robots Smashing Into Other Giant Robots Podcast, where we explore the design, development, and business of great products. I'm your host, Victoria Guido. WILL: And I'm your other host, Will Larry. And with me today is Trent Walton, CEO of Luro. Luro is a no-code solution to build your design system and track adoption across your entire product. Trent, thank you for joining me. TRENT: Oh, thanks for having me. It's great to be here. WILL: Yeah, I can't wait to dive into Luro and get to know more about the product. But before we go into that, tell us a little bit about yourself. I know you're based out of Texas. TRENT: Yeah, I grew up, lived here my whole life. I'm in Austin with the other co-founders, Dave and Reagan. Been a designer probably all my life, always been interested in, like, typography and fonts. When I was little, I used to buy badges for cars from swap meets and take them home, not because I needed, like, I had a car I was building and had any interest in, like, sandblasting or building an engine. I just liked the typography, and the design of the icons, and the logos, and all that kind of thing. And so, now it's evolved into me just being, like, a type aficionado and a graphic design aficionado, and then that evolved into, especially when I discovered the web in the early 2000s, building and designing websites with Dave and Reagan, who I mentioned. And so, we had an agency called Paravel early on and had a lot of time putting into practice kind of that design and development and building for the web. VICTORIA: So, your first interest in design came from, is it a car engine? Is that what I heard? TRENT: Well, yeah, my father is a mechanical engineer, and so is my brother. And they work on cars, have classic, like, old Mustangs and Cobras and things that they build in their spare time. And I have no interest in that kind of work [laughs] but grew up in that environment. And, you know, pre-internet growing up in the '80s, one of the things that really got me was the aesthetic and the design around those kinds of muscle cars, so, like, old Shelby or Cobra or Mustang Ford ads, just, I really got into that. So, I'd buy, like, car manuals for a few bucks, or if there's a Mustang Cobra and there's a cool, like, chrome snake logo with a condensed uppercase typeface or some sort of lettering that says, you know, "Shelby Cobra." And that's when I realized [laughs] where my interests lie. You know, engines are cool. They sound cool. Fast cars are cool. But I was just totally, you know, enamored with the typography and the design aspect that surrounded those things, and then it just kind of evolved from there. Anything else I could get my hooks into, I picked up on. VICTORIA: I love that because when I talk to people about design, for folks who don't have a background in it, they kind of think, oh, design, that's logos. You know, I'm redesigning my house right now. My husband is like, "Oh, it's picking the tiles and the colors. We can do that." And I'm like, "No, like, design, there's a lot more to it. Design is everywhere." Like, you can find design inspiration from car manuals [laughs], it's so funny that you bought those, or from random logo design and actually, like, really good design. If it's something that's designed well, you probably don't even notice it. You just flow and use the space or use the app as you're intended to. TRENT: Yeah. And I also think that getting inspiration or starting ideas out from anywhere but the medium you're working in might be a nice little trick to bring some, like, naïve, fresh perspective to things. So, I try to go back to that stuff as much as possible. I have heaps of manuals I've bought off of eBay in recent years, yeah, things you wouldn't think you'd find on, like, you know, whatever, a graphic designer's bookcase, just anything to sort of break the monotony or break my own little lenses of what a website should look like, or what a logo or a brand should look like, how to step outside of that a little bit. But it's funny because it really does go back to that initial sense of wonder I experienced at those really just, you know, we're talking, like, in a gross, swampy field in Texas with, like, funnel cakes being served at every corner, like, not the most slick, rad graphic designy vibe, but that's where it all started for me. So, I go back there as often as I can [laughs]. VICTORIA: So, how do you talk to founders or people who are thinking about building products? How do you talk to them about design and give them a where to get started approach? TRENT: I don't know that I ever specifically talk about design or even maybe, like, engineering or about performance. I talk about all those things, accessibility, et cetera. I try to blur those lines as much as possible. It's maybe an idyllic thing that I've had for years. But going back to the agency days, I'll call them the agency days, but up until, like, you know, 2015, '16, Dave, Reagan, and I ran an agency called Paravel. And by nature, the three of us are some sort of a hybrid between a designer, maybe, like, a front-end developer. You know, Dave's more of an engineer now. But we've all been very careful to make sure that we're generalists, which I don't know that that, like, career-wise that, might pay off long term, but I cannot work on the web any other way or talk about the web any other way. I've always felt like, I mean, there was the old, which we don't have to get into, gosh, but the debate on should designers code? But I think the essence of that is really, like, should we be familiar with the materials we're working on? So, anytime I start to talk about designing for the web or designing a product, you want to make sure everyone has a clear understanding of the environment that they're working with. So, is it, you know, a website? And is performance important? And is our site that we're redesigning is it performant now? Is it fast or slow? Or am I a designer who only cares, and this is a thing that I have to fight inside of myself all the time? So, I'm not trash-talking anybody, but, like, do I want to load a bunch of fonts and cool images, and is that my KPI is how interesting and engaging the visuals are? Which is a great one to have, but it also, you know, while you're talking about design, you have to consider all of these other things that can define quality for an experience. Maybe those other things don't matter as much from one person to the next. But the more they are in front of me, the more they evolve the way I perceive what I work on. And so, I try to never really isolate any kind of aspect into maybe, like, a stage or a sprint that we're doing as a team. It's just sort of this holistic kind of hippie vibey way to look at sites, but I want to make sure that it's always, like, we're always starting from a very, very broad place that involves every aspect, and all team members and stuff like that. VICTORIA: Well, I love that because I try to think about that in the same way from the other end, like, on the operations perspective when you're talking about site performance. And, you know, like, is the site responding fast enough? And it comes back to the question of, like, well, what is the experience, expectations of the user? And what's important to get done on the site? [laughs] And having those conversations, like, early on and integrating all these different teams from the design and development and operation side to have that conversation so everyone knows what is the goal of the site and what is the important aspects of the user experience that the system needs to be able to support? So, I also like that you said that it's like, well, should you be familiar with the materials that you're using? [laughs] Thought that that was really cool. Like, I'm actually...my husband and I are renovating our home. And I'm talking about why we should invest in design [laughs], and part of it's because there's things to know about the materials. Like, if you're choosing a floor for your house, like, the designers will know, like, what's the durable ones? What's the ones that are going to fit your need, and your cost, and your budget? And so, like, they don't necessarily need to be a person who's going to lay the floors [laughs], but they need to know what to expect out of what you decide to use. TRENT: Yeah, it's, like, all of these constraints. And so, being familiar with the real-world implications of the decisions we make, you know, inform that. So, yeah, I mean, I think that's pretty similar, too. It's like, well, you need this floor because it's more durable in this climate or whatever, same thing for, you know, the websites that we build. It's all contingent upon the outcomes that, hopefully, we can mutually agree on. You know, there's kind of a general sense of, like, performance is important, and accessibility is paramount and extremely important. But then there's some nuance to that as you get into some smaller decisions. So, having these kinds of discussions early on and frequently and almost...the way I like to think about it is rather than, like, a check-in where we say, "Okay, this is it," but having a place where we can all look to check in and find information and share information that's maybe not so fast. One thing I like to think about is things get lost in chats and maybe even tickets, so as you're closing tickets and opening tickets. There's a bug. I solved it. It's gone. Can you send me this logo? Can we tweak this? These micro changes they open and close very, very quickly. And so, there's this firehose that happens. And so, I find that having a place separate from that for discussing these things and remembering these things, and referencing these things while we are in our code editors or inside of our Figma or any kind of design tool that we use to sort of cross-reference and simmer on things as we think about the decisions that we have to make, as opposed to just knocking them out super quick, always being mindful of those constraints. And again, yeah, the [chuckles] materials we're working with, whether it's just, you know, HTML, CSS, and JavaScript or whatever, but all of those things. It's good to be mindful of that. WILL: I know you said that you've been in design for a while, and so I love just picking the brain of someone who's been into it a while and see how far we've come from, especially just the 2000s. So, in your opinion, with design, how do you feel about where we've come since the beginning of tech to where we're at now and, also, I guess, where we're going with the design? TRENT: Yeah. So, I guess I can really just frame...this is going to help me remember just framing [laughs] where we were. I started off on Homestead, which is sort of like GeoCities. I was in college. I graduated, and I think it was 2001, maybe 2000, anyways. And it was mainly just taking images...I didn't even have Photoshop at this point. And you realize you could, like, tile a background for a build your own website. Homestead was one of those kinds of deals. And I thought that was very interesting. So, I had this cheap digital camera. It took a lot of cords to figure out how to, like, port that onto this old, crappy Hewlett Packard computer that was, like, a hand-me-down. Fast forward a couple of years, I had graduated, did not study design, so I'm all kind of self-taught or just taught by the web, the peers, the information that has been shared and been influenced by. But Dreamweaver was out, and Macromedia was huge, and I loved Fireworks. And so, Dave Rupert, I paid him $80 to teach me HTML [laughs], and so we've been together ever since. This is right out of college. And so, the tools that we used there were pretty rudimentary, but Fireworks was rad. Like, it was kind of web-based. It felt like it made more sense. I love Photoshop, and that's kind of, like, a primary graphic design tool that I still use to this day. But early on, it just felt like everything was so harshly limited. So, if you had any kind of idea that you wanted to execute that you could just draw on a piece of paper, mock it up in Photoshop, the amount of work that you had to do to get that to happen was either extremely high, or it was just impossible. And then, if it was impossible, I bet you can guess what we did. We went to Flash, and we made, like, a crappy video of a web page that was not accessible and really hard to use. I was heavy into Flash for, like, two or three years until kind of, as I had been warned by Dave that, you know, HTML and CSS are going to be the way the web works. But when I came back to that, there was this wonderful time where it felt like we were charting out every single...it was just new territory. It's like we had come to this other planet or this other world, and everything that needed to be done, we had to figure out how, like, getting web fonts onto pages, rounding borders. I mean, getting that done aside from slicing images in Fireworks felt like this new monumental discovery that changed the lives of many. Maybe it did, maybe it didn't, but in my world, it felt like that. And so, early on, you can look back on it and go, gosh, everything was a pain in the ass, like, living with all of these limitations. But for me, I do look back at it like that, but I also look back on it as this wonderful time where we were building the web that we're working on now. So, all these things that make designing easier and quicker come with some sort of a, you know, an evolution of your perception, and [inaudible 13:14] fond memories of work along the way. For me, it's sort of I've just always sort of been around working on the web and watching design evolve, and every little step maybe feels like a tiny one or a large one. But these days, it just seems like, oh, this is exactly how it should have [laughs] always been, like, convenient grids and convenient box shadow and all that kind of stuff. But yeah, it's been nice to sort of grow up only being a web designer. Like, I mean, I've done graphic design. I've done brochures and, print design, and logo design for sure. But, I have always been anchored to and centered around web design and thinking about things in the context of how they will be applied to the web first and foremost. MID-ROLL AD: Are you an entrepreneur or start-up founder looking to gain confidence in the way forward for your idea? At thoughtbot, we know you're tight on time and investment, which is why we've created targeted 1-hour remote workshops to help you develop a concrete plan for your product's next steps. Over four interactive sessions, we work with you on research, product design sprint, critical path, and presentation prep so that you and your team are better equipped with the skills and knowledge for success. Find out how we can help you move the needle at tbot.io/entrepreneurs. VICTORIA: So, what was the turning point for you that led you to found Luro? How did it all get started? TRENT: With Paravel, the agency days, we had a lot of fun. I think, for us, our big agency spike was when responsive web design came out. Ethan coined the term. There was a lot of people on the web, you know, a lot of agencies or a lot of teams, a lot of companies that needed to pivot into that. And so, we found this great working relationship with companies where we would come in and sort of had a little bit more practice just because we got in early learning kind of how to do that well, I think. And it was a sort of we're going to redesign a page, a homepage perhaps, or, like, a marketing page. You'll do that project; three to six months go by. And then the next thing turns into, well, we have this giant network of e-commerce stores. We have this giant network of pages with, like, download centers and support documents. And now, we need to make everything responsive, and it can be anything. We need to make everything accessible. We need to make everything performant. We need to update the brand on everything. And I don't think we're alone in this. I think this is the beginning of the greater design system discussion as it applies to the web. Obviously, design systems predate the web; design systems pre-date, like, 2012 or '13 or whenever we got into it. But projects started to migrate from, "Hey, can you design this really amazing, responsive marketing page," to "We have a system, and we need you to solve these problems." We love working on those problems. I still do to this day. But the reason why we switched from kind of being a, you know, individual contributor-type agency consultant type roles to building a SaaS product was because we were realizing that things got complicated...is a very, like, boring way to say it. But to get a little deeper, it was, we would see things not ship. So, like, our morale went down. The teams that we were working with morale kind of went down. And as I was digging into why things weren't shipping...and when I mean ship, I think, like, pages would ship, of course. Like, here's a page. It just needs to be built, somebody decided, or a new feature needs to be built. Of course, those went out. But the idea of, is our design system or the system that we're designing launched? Is it applied? Is it fully adopted? Is it partially adopted? It never felt like the amount of traction that we were promising or that we were being asked for. And I don't mean we, as in just the three of us, but the entire team or the entire organization who, in many cases, all were bought into the idea of design systems. So, what we found was, when things got real, and we had to give up things, and we had to work on things and prioritize things, it became much more difficult to work in that capacity, probably partially because of the cross-discipline nature of those things. So, as opposed to what I consider maybe a miserable way to work in many cases, is the classic; here's my Photoshop comp. And I have a red line document JPEG that I will give you, whatever engineer I'm working with, or it's myself, and I'm just giving myself a red line document, but you're just going through and trying to make those things match. And that is sort of not fun for the team because now we're just sort of chiseling each other and sort of, like, going through and critiquing our work over and over versus really kind of in the spirit of prototyping and inventing together. I find that products are diminished when you do that. So, as you try to get into this design system part, it requires a lot more insight into what everyone around us is doing, kind of, as I was saying at the beginning, how to have this cross-discipline view of what we are actually working on. And that view is what we thought, and we still believe in many cases, is absolutely missing. So, you can spin up a design system. And Luro is not the only design system tool. Of course, you can spin up your own. And what I mean by that is, like...I'm maybe going to answer, like, three questions in one. Maybe you haven't even asked them yet. But just to kind of frame this, if you ask anyone what a design system is, it might be a different answer. It might be these are my Figma components that I've created and I've shared out, and there's a public link. You know, an engineer might say, "Well, it's the GitHub repo of components that I'm actually using." So, the design is helpful as documentation. But the design system is the code, or the design system is the actual...or the actual components that are live that users see, which I would argue probably is the most accurate, just because we're talking about user experience impacting whatever business objectives we may have. So, those components need to make their way into live sites or products. So, finding out what that answer is, what's the source of truth? What is our design system? What are our components? What are our standards? You have to have multiple sources for that, just because there's multiple people with multiple opinions and multiple measures of success involved in those. And all of those opinions and measures of success, I would say, are valid. So, accounting for those and kind of crossing the streams, if you will, in one sort of central UI, we believed was crucial enough that we should jump out of the agency days and into a product-building scenario. VICTORIA: That's really interesting. So, you saw this pattern in the delivery of your work as an agency that made you want to build a solution to create better outcomes for a potentially exponential number of clients, right? [chuckles] TRENT: Yeah, hopefully. I think that working on how you work together as a team is vitally important, and if you can find the right environment, then the actual product will benefit. I mean, and I'm not even just thinking about these maybe soft things like, oh yeah, if engineers and designers can work together, the typography will be a little bit better, and the site will feel a little bit more cohesive, and it'll be maybe a little bit easier to digest. I believe that. But I also believe that there are people in organizations doing research, financial analysis, customer analysis, A/B testing, you know, all sorts of work that contributes to the decisions that we make about our sites and products that sort of just gets lost in the shuffle, in the firehose of the day to day. So, having something that takes not only a, I guess, what you could classify as the what for a design system, it could be the design of a component. Maybe it's actually even, too, as well, the code that makes up that component. But then there's this giant why. Why does the button look the way that it does? Why does a card have a border around it? Why? Why? Why? Why? Why? These things maybe they come up during meetings. Maybe there's something that, as a designer or an engineer, I found maybe on the company's shared OneDrive or somebody mentioned in passing. Those things are vitally important, and they need to be, again, back to the morale and perception evolving; they need to be accessible to everyone. But it's a needle-in-a haystack situation. It's funny. We would consult. And one of my favorite stories is we were building this prototype. We were hired to build a prototype for a startup in Austin. They were on a big, open floor-plan office with the glass meeting rooms. And we were showing off our prototype, and we just felt really clever and witty about the way we were going to solve this and the pages that we were going to build. And who is a friend now, a person named Angela walks by, and she's like, "What are you working on?" And we told her what it was. And she says, "Oh, wow, you know, six months before you started contracting with the startup, we did this all, and we've user-tested it. Everybody's been reorged, and nobody remembers. But I have this PowerPoint I can send you, and it will show you the results. Some of these things you're doing are probably going to be great. The other things you should absolutely not be repeating these mistakes." And I thought about how likely it was that she walked by and happened to see that through the window and happened to look on the sharp television on the wall. And it's probably not very likely, and as we become, you know, we're remote and working remote the likelihood of those things happening maybe goes down. The idea of building a product that increases the likelihood or almost makes it seamless that you can find information relevant to what you were working on, even if you're new to that project or you haven't worked on it for a long time, is very, very key. So, within Luro, you can build a design system. You can add your styles. You can add your components, configure your tokens, and do all that, but you can also integrate those things that I was mentioning: prototyping, research, and testing. We also do an accessibility and performance through Lighthouse and give you metrics there. All of those things are associated to the pages that your site is comprised of. They're associated to the components that you use to build everything. So, we're sort of crossing the streams here. So, if you're going into imagine a button component and you're like, okay, the border-radius is four pixels. The type size is 16 pixels, and here's how you code it. We're putting in an actual button. The class is dot btn. That's all great. It's helping us build the button. But if you are asked by leadership or anyone, "Why did you decide this?" Or "What is the impact of design?" Or "What is the impact of the product team on our bottom line? How are you moving the needle? How are you helping us as an organization achieve?" The answer isn't, "Well, we made the border four pixels just like the design [chuckles] said." That's great. Good job. But I think having all of this information associated with design and associated with engineering not only makes us more informed as contributors to teams but it helps us to articulate the value of what we do on the daily in a much more broad organizational sense. So, you can say, "Well, we user-tested this, and we realized that if we took out these form elements from a signup flow, we get more signups by having fewer steps. And so we removed a step. We user-tested it before and after, and signups went up 30%." That's a much cooler answer than, "Well, our design system helps us be consistent," even though we know that that is vitally important, and it makes our app or our site feel much more cohesive, and it contributes to that sign up metric or a sales metric just as much. But having this data and associating it with a component so it's not something that you have to sort of...I guess it almost sounds subjective if you bring it up and say, "Well, we're moving faster, and we're selling more stuff." That's not great. But if you can link and say, "Well, here's a PowerPoint before," or "Here's a summary of a user test before and after. Here's real numbers," it helps you to portray yourself as the designer or engineer or product team member who thinks very deeply about these things, and it helps you to accurately portray yourself in that way. So, I went on a real tangent, but actually just there, I think I just was describing sort of the nuts and bolts of why we built Luro to not only be a design system tool but, like, what we kind of also call a product development tool, a product development system. So, it's extending the idea of design systems to the practice of building a product with an entire organization. WILL: That's really, really cool, and you did a great job explaining it. I'm excited to see it and see where it's going. I felt like a lot of what you were saying was the why you're doing stuff, why you chose, you know, X, Y, Z. Is that where the analytics and the tracking portion of Luro comes into play? TRENT: Yeah. I think that one thing we heard a lot from agencies or even just teams within an organization that are working on design systems is back to that articulating the value of maybe a design system or articulating the value of the work that we do as designers or product builders and similar to we've done a user test and these are the results, and sales or signups, or whatever the case may be, have improved. I think one of the key metrics for a design system is, is the component adopted? There are other ones, and people will mention those, things like, is it helping a team be quicker? So, if there's a design system team, and then there's multiple product teams within an organization, and they all want to work together, and they want to be able to take the components that they need and build their ideas quicker, prototype quicker, that's a great metric as well. But one that we find vitally important is, are the components live to users? And so, being able to track that has a lot of value. One, obviously, is that communicating that to the greater organization, saying, "You know, we've spun up a design system team. The card component is on 49% of pages. The button is on 100% of pages." And then if you're trying to be more tactical about how to improve the product or even just track down, you know, which components or which pages or which experiences aren't, I guess, consistent with the design system, you can say, well, "There's 49%, and there's 51% of pages that may or may not have the card component." And so, you can go find outdated components if you're trying to phase new ones in, and all of those sorts of things as well. So, the metrics are sort of great from a thematic sense, saying, this is the value that our design system is, you know, affording us as a business and the users are experiencing while they're using our app or our site. But then, also, you can drill down into these metrics and see, okay, the button is appearing here. I can click into pages and see views where it's being used on the page level and see, is it being used properly? Those kinds of things. You can track legacy components as well, so, for example, if we've rebranded the site that we all work on together and our old button was, like, dot button and the new button is dot BTN or however we would want to class those things. And you can use classes. You can use data attributes, all those kinds of things. But I would say we can track legacy along that. So, if your goal is to completely adopt the new design system across the entire network and products within six months or whatever the case may be, you know, month over month, week over week, you can check our, you know, line graphs and see, hopefully, the legacy occurrences of that going down over time. So, if, like, the button is being used less and less and then the dot BTN is being used more and more, you can see those sort of swap places. And so, what we have found is talking about things in sort of an objective or fuzzy way, saying, well, we're trying to ship this, and we're doing these inventories, and we're going through all the pages. And we're clicking around trying to find old things, or we're redesigning pages. But it's very, very difficult. This is just an instant quantification of where our components are manifesting in the product. So, what we do is, with Luro, you can give us...whether it's behind an authentication layer or not, we crawl web pages, first and foremost. So, you can give us a site. And this is all optional. You can spin out a design system without this. But we crawl the site, and then we will go ahead and do performance and accessibility scores for there. So, that's one way to itemize work, where you can just say, well, as an agency, we're going to work with this company, and we want to show them, like, the starting point and expose weak points on where we might be paying a lot of attention to. In the design or engineering phase, we need to improve the speed here. We have accessibility violations we need to think about, all that kind of stuff. And then, once you crawl those, you can add your design system, and then you can cross-reference those, and I kind of mentioned that. You can use CSS classes to do that. And so, you'd enter in dot BTN for button. We've already crawled your pages. And so, we can tell you every time that that class appears inside of any page inside of the network. So, it's this very, like, two-minute way to get a wealth of information that's shared and communicated with...the entire organization will benefit. Like I said, like, leadership they can get a sense of how the design system is being used and adopted, but also, the active teams working on things so that they can go find outliers and work on replacing those. VICTORIA: It's been over a year in your journey with Luro. What challenges do you see on the horizon? TRENT: I still think it is an adoption challenge. I think that, you know, one thing that we found is that a lot of teams, and this is going back to our agency days, but I sort of sort of still see this happening now is that building the design system, you know, let me separate these two things. I think designing components and building the design system in the sense of picking styles, and choosing fonts, and iterating upon something like a search box or, a footer, or a modal that's a lot of work. That's just design and product design and product development in general. But the act of, you know, creating the design system, maybe it's the documentation site, or however, we're communicating these standards across the organization. That part, to me, it's always kind of taken too much time and effort. And to be really candid, the amount of budget that's being allocated for those tasks is less. So, we're having a lot of users who are saying, "Well, I wasn't in charge of a design system. We had a team for that. We don't anymore. And now I'm responsible for it," or "The team's been combined, and I'm working on, like, three things at once." And so, something that's very, very crucial to us at Luro is to help with the struggle of spinning up a design system. For us, I fully believe that there are design systems that can be fully custom available to the public and need to have, you know, every page and view needs to be unique unto itself. But for Luro, the starting place that we get you with, you know, you can link in your Storybook. You can link in Figma components. You can add components manually and all those sorts of things. Where we can get you in a few minutes is really close. And then, if you started to fold in, you know, the idea of performance, accessibility, and then all of the other insights that you can then integrate, so if you're doing A/B testing or user testing and doing research, and you want to make sure that that's all involved inside of your design system, then it becomes a really attractive option. So, I think that decreasing the time it takes to get started and to spin up a design system is the number one thing we see people struggling with and the number one thing we want to bring. I kind of like to compare it to services like Netlify. Like, I remember I used to have to set up servers to demo things for clients, and it would take an hour, and I don't know what I'm doing. And I would break stuff, and they would have to help me fix it. So, then I'm bothering him. And then, now I'm just, you know, will either link to a CodePen or drag and drop a deployed URL from something like Netlify. And it's this amazing, almost like it feels like deploying is just as difficult as, like, sketching something out on a napkin. We want spinning up a design system to kind of feel that way so it's not so precious. You're not worried about...it is just easy to get started. And so, we're kind of integrating all these other tools that you use to make that easier and quicker because if you do have other things that you're working on and you need to move beyond that so that you can focus on prototyping, or designing, and building the actual components, you can do that. And you have that option as opposed to having to be mired in some of these other details. VICTORIA: It seems like change management and integrating change into larger organizations is always the biggest challenge [laughs], even for great innovations. And I'm curious: what types of people or groups have you found are quick to adopt this new method and really the right group for you to center your message on? TRENT: Yeah, it is...I was joking, I think, maybe before the podcast started, but it's, like, very ambitious because it's easy, I think, to say, "This tool is for designers. And if you're a designer, you can integrate your Figma, and then you'll have your components published to your team so that they can use them." And that's absolutely true. Like, if you're a designer, Luro is for you. If you're an engineer and you have just received components, and you need a way to document that and show your coded version alongside the design version and be able to collaborate with people in that sense, it is absolutely for you as well. So, you can see how it's almost like you almost have to frame Luro for individuals across the organization. So, it's one of those deals where...and we've kind of experimented with this with the marketing. And the way we've discussed it, we talked to lots of, you know, leadership, heads of product, CMOs, even CTOs, things like that. And so, it's like, if you're trying to get your entire organization to work better, to ship, you know, more effectively, then Luro is the tool for that as well because we're getting into knowledge retention via uploading. Like, my favorite story there is if you're an A/B tester, probably, and this is what we've experienced, is you run these tests. A lot of time and effort goes into building the prototypes for the test, whether that's you or an engineering team that's doing those things. This is one of the things we used to do as an agency. We would be brought on to prototype something totally new. We would test that alongside the existing experience. And an A/B tester, we'd work with them, and they would create, like, a PowerPoint or something that would explain the pros and cons and what should happen next and summarize the test. And that would live on that person's hard drive, whether it's on their computer or, like, a Dropbox or a OneDrive account. And no one ever thought about it ever again. You would just move on to the next test. But the amount of money spent on us to build the prototype and the amount of money spent on the SaaS to spin up the, like, A/B testing environment and all of these things, and then the time spent on the A/B tester to analyze the results and generate a PowerPoint it's not nothing. And so, one of the things that we find pretty appealing for leadership within Luro is the idea of integrating all of these tools and all this work that you do in mapping them to components so that when you pull up, for example, a button component, you'll see all the user tests that have been added over any period of time. So, if you were a new hire and you're trying to onboard, you can go interview everybody in the organization and ask them about the history of a button or a card component or the history of a sign-up page. But then, also, in a self-service way, you can just click into Luro, click a button, click a card, click to the sign-up page, any of those things, and find all that stuff I was mentioning earlier, whether it's a test, or research, or prototyping, or any kind of documents that have been written. These aren't the arguments that Dave or I might have around the actual border-radius value. Those are small things that probably should be lost in the firehose. But if we have learned an outline button with a stroke is performing way better than a solid-filled button or vice versa, that's important information that doesn't need to disappear in six weeks. So, that's the other kind of metric there is explaining kind of the holistic version, telling the holistic story of Luro to those types. And so, yeah, navigating that and trying to get, like, buy-in on a broad level is kind of what we're working on these days now. WILL: Sweet. So, I actually really like how it's almost like version control. You can see the history of what you've been working on. And I really like that because so many times...you're correct. When I go to Figma or anything, I'm like, why are we doing it this way? Oh, we made these decisions. Maybe in comments, you can kind of do it, but I think maybe that's the only place you can see the version control. So, I like that feature. Like you said, you can see the history of why you did something like that. TRENT: Yeah. And think about that, so if I am a front-end engineer and I receive a design and everyone thinks that, why are we doing it this way? I would hate to code something...I can do it. It's my job. But if I don't understand why, my feeling about work and maybe the quality of my work goes down, you know what I mean? I guess what I'm trying to say is, like, feeling like you understand, and you're lockstep with the entire team, and you understand what the goal is...what are we trying to do? What are we trying to achieve? Like, what have we reviewed that has made us believe this? And if you don't have that information, or if I don't have that information, like, there's some traction within the team, whether it's actual momentum forward and the amount of tickets that are being closed, or just the spirit of what we're doing, that the product is going to be diminished. These are all these little things that add up, up, up, up, up over time. So, being able to show this information to be able to access this information kind of passively. So, for example, if you got VS Code open and Luro open and you can see here's the user test from six weeks ago that shows us why we went with option B, you'll say, "Okay, cool. Even better." You know, you can review those things way before you get things handed to you. You know, it's much more kind of this utopian vision of an open, collaborative deal. And the way I would say that is it's, you know, we all kind of hand things off. So, of course, like, there's some version, even if it's like a micro waterfall that happens on a daily basis. We're all doing that. Like, somebody needs to be done with something to hand it off to something else, so we're not all up in each other's space all the time. But one thing that we like about Luro, whether we use Teams, or Slack, or whatever, it's not a real-time thing where I have to say, "Stop, look what I'm doing [laughs]. Come over here and look because I need you to know this." You can get notifications from Luro, but it's not something that is a context-switching demand type of a situation. So, the idea is if you're like, I'm wondering what's going on. I know this is coming up. I'd like to review. Or I could let you know and tell you, and just on your own time, you can go see this. So, separate from, like, the firehose of tickets and chats, you can see the actual product evolving and some of these, like, key milestone decisions on your own time and review them. And if they've happened before you even started on the project, then you can do that as well. WILL: I think that's probably where the breakdown between developers and designers that collab that's where it probably breaks down, whenever you're trying to get your tickets out as a developer. And then there's a change while you're working on it, and it's a complicated change, but you're still responsible for trying to get that ticket out in time. So, I think, like, what you're saying, you can get it beforehand. So, it sounds like, to me, Luro would be a huge help because you have to have developers and designers working together; if you don't, you're just in trouble in general. But anything that can help the relationship between the two I think, is amazing, and that's what I'm hearing whenever you're talking about Luro. It helps. It benefits that relationship. TRENT: Yeah, that even makes me think a little bit about the ongoing collaboration aspect. So, it's like, if something is shipped...or maybe let's go the agency scenario here. You've launched a site. You've launched a product. How do we know how it's performing? Of course, you'll have everybody...they're going to have analytics, and we'll be talking about that. And are signups up or down? But Luro will run tests. It'll continue to run component analytics. So, you can sense whether, like, somebody is changing a component. Or, you know, is the fully adopted design system not being utilized or being utilized less or more over time? But then, also, we're running, again, performance and accessibility metrics. So, we've seen it where we've shipped a product for a client. You know, we've had Luro running. We've sort of used that as our hub to collaborate over time. And then we'll notice that there's a giant performance spike and that, like, the page speed has gone way down. And we itemize issues and can point you to exactly the page that it's happening on and give you some insight into that. Of course, you could go through after you've worked with the client and run Lighthouse on every single page in your own time for fun, but that's not reality or fun. So, you'll get this information. And so, you almost...before we were telling people who were using Luro, we were kind of using it ourselves just to help ourselves do a better job. About a month into a project, we were able to email a customer, a former client, and say, "Hey, site's looking great. Amazing to see this. There's a 3-megabyte, 50-pixel avatar. Someone uploaded a giant image. It displays as 50 pixels. But somebody must have uploaded the full one to your homepage, and your page speed score tanked." They're like, "Oh, wow, they must [laughs] be monitoring us and checking in on us every day." We love them dearly, but we were not doing that. We were using Luro off to the side. So, there is this other aspect of just sort of monitoring and making sure things stay, you know, as they were or better once we ship things and move forward to the next. VICTORIA: That's really interesting. And I'm excited to explore more on my own about Luro. As we're coming towards the end of our time today, I wanted to give you one last chance to shout out anything else that you would like to promote today. TRENT: Oh, that's it [laughs], luroapp.com, you know, that's the main thing. Check out component analytics. We have a YouTube channel, and I would say that's probably the easiest, a lot of effort, even though the videos maybe I'd give myself an A-minus or a solid A, not an A-plus on video production. I'm trying to get better. But explaining just, like, how to set things up. There's, like, a one-minute, like, what is all this? So, if you want to see all the things that I've been trying to describe, hopefully well on the podcast [chuckles], you can see that really well. So, I'd say Luro App and then the YouTube channel. We've got, like, five, six videos or so that really kind of help get you into maybe what your use case would be and to show you how easily things are set up. VICTORIA: Great. Thank you so much for joining us today, Trent, and for sharing about your story and about the product that you've been building. TRENT: Yeah. Thank you for having me. This has been great fun. VICTORIA: You can subscribe to the show and find notes along with a complete transcript for this episode at giantrobots.fm. If you have questions or comments, email us at hosts@giantrobots.fm. And you can find me on Twitter @victori_ousg. WILL: And you can find me on Twitter @will23larry. This podcast is brought to you by thoughtbot and produced and edited by Mandy Moore. Thanks for listening. See you next time. AD: Did you know thoughtbot has a referral program? If you introduce us to someone looking for a design or development partner, we will compensate you if they decide to work with us. More info on our website at: tbot.io/referral. Or you can email us at referrals@thoughtbot.com with any questions.

ceo texas design collaboration discord flash ebay saas slack fireworks lighthouses cobra powerpoint ui photoshop dropbox github kpi product development javascript html holistic approach homestead web design css hewlett packard cmos figma building better mustangs mandy moore storybook onedrive jpeg ctos cobras typography vs code design systems giant robots btn geocities netlify design innovation codepen macromedia shelby cobra organizational alignment paravel dave rupert will larry victoria you trent walton victoria well

Chris Coyier on Embracing Technology and the Future of Web Development

Whiskey Web and Whatnot

Play Episode Listen Later Feb 15, 2024 66:28

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

595: MedTalk Show, Plagiarism and Code Grifting, and How We’re Testing Code

Microsoft Business Applications Podcast

Play Episode Listen Later Dec 11, 2023 60:27

Show DescriptionBlood pressure, stress, and COVID highlight the MedTalk Show portion of this episode, a new "Did You Know" segment about dev tools in Chrome, 4 hour video on plagiarism and code grifters, typography, breaking out of CSS Grid, the oldest things Chris and Dave worked on, and what the testing process is like at Luro or CodePen. Listen on Website →Links Blood Pressure – Chris Coyier QardioArm 2 - Smart Blood Pressure Monitor CodePen PRO Plagiarism and You(Tube) kottke.org - home of fine hypertext products Welcome to Ethan Marcotte's website Practical SVG, A Book Apart Built to Last: Successful Habits of Visionary Companies: Collins, Jim, Porras Kevin Powell Igalia Chats: The Struggle to Keep Up with Web Tech Thoughts on testing SponsorsMiroFind simplicity in your most complex projects with Miro. Your first three Miro boards are free when you sign up today at Miro.com.

covid-19 testing code chrome keep up miro plagiarism did you know grifting codepen css grids last successful habits ethan marcotte

The Week in Green Software: Greening the Front End

Environment Variables

Play Episode Listen Later Dec 7, 2023 49:29

Chris Adams is joined by Ines Akrap from Cognizant to talk all-things sustainable web design. Together, they delve into the nuances of designing energy-efficient websites and the challenges of green coding in frontend development. Ines shares valuable insights from her experiences at the Linux Energy Foundation Summit and the SDIA Green Coding Summit. The episode also explores common mistakes in optimizing sites for carbon efficiency and discusses exciting projects in the field of green software that are generating buzz. Resources like Website Carbon, Ecograder, and Lighthouse are highlighted, alongside discussions on the Software Carbon Intensity Specification and the CarbonAware SDK. This episode is a must-listen for anyone interested in the intersection of web development and sustainability, offering practical tips and exploring new research horizons in the quest to decarbonize the digital world.

sustainability software lighthouses rum centric mozilla frontend greening cognizant chris adams thoughtworks w3c front end developer codepen simon wardley green software

From Hairdresser to Power Platform Senior Analyst: Exploring Natalie Leenders' Tech and Life Journey

Play Episode Listen Later Nov 1, 2023 17:01 Transcription Available

FULL SHOW NOTES https://podcast.nz365guy.com/496 Meet Natalie Leenders, a Power Platform Senior Analyst who has taken an intriguing journey from hairdresser to tech expert. Take a peek beyond the screens into her world as she discusses her passions beyond the tech realm. She shares her love for cooking inspired by her travels, her interest in Argentine tango, and her life with her cat. Natalie's story teaches us that it's never too late to switch gears and embrace a completely new career path. The conversation steers towards her transition from an IT support role to working on Power Platform. Get insights into how she navigates use cases in Power Apps, Power Automate, and Power BI, and how she's assisting in replacing legacy applications in her company. Listen as Natalie talks about her recent Power Automate exam and her rising interest in Robotic Process Automation (RPA). You also won't want to miss Natalie's exciting news about her selection as a speaker at the upcoming Vegas conference. This episode is a treasure chest of inspiration and insights, offering a fresh perspective on tech careers and beyond. OTHER RESOURCES: Microsoft MVP YouTube Series - How to Become a Microsoft MVP 90-Day Mentoring Challenge - https://ako.nz365guy.com/ CodePen - https://codepen.io/Nathalie-Leenders Github - https://github.com/Nathalie-LeendersAgileXRM AgileXRm - The integrated BPM for Microsoft Power PlatformSupport the showIf you want to get in touch with me, you can message me here on Linkedin.Thanks for listening

las vegas tech analysts argentine bpm senior analyst hairdressers life journey mark smith power bi microsoft mvp power platform showif powerapps robotic process automation rpa power automate codepen leenders

75: Why isn't my custom property the value I expect?

The CSS Podcast

Play Episode Listen Later Oct 27, 2023 19:32

In this episode, Una and Adam discuss common gotchas with custom properties, which often feel fully reactive during use, but their limits and implementation details can popup at unexpected times and create a headache. They'll cover these situations and their solutions! Links: Value stages → https://goo.gle/3FDo7yA How custom property values are computed →https://goo.gle/49cOUiQ A complete guide to custom properties → https://goo.gle/40gtVb8 The big gotcha with custom properties → https://goo.gle/45VwUHe CodePen → https://goo.gle/3SdMnyY Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨

designing property unicorns developers chrome browsers css google chrome codepen una kravets

Modern CSS in real life with Chris Coyier

PodRocket - A web development podcast from LogRocket

Play Episode Listen Later Oct 17, 2023 43:35

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

modern real life colors css codepen chris coyier css tricks

Chris Coyier and the things he's bad at

Bad at CSS

Play Episode Listen Later Sep 14, 2023 53:55

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

css codepen chris coyier css tricks

Modern Web Podcast S10E24- Unbelievable Transformation: How CodePen Revolutionized Web Development with Co-Founder Chris Coyier

Modern Web

Play Episode Listen Later Aug 23, 2023 32:27

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

ceo ai co founders transformation unbelievable software engineers web development revolutionized codepen chris coyier tracy lee modern web codesandbox stackblitz this dot labs

Whiskey Web and Whatnot 100th Episode Round Table with Chris Coyier, Scott Tolinski, Tracy Lee, and Wes Bos

Whiskey Web and Whatnot

Play Episode Listen Later Jul 20, 2023 54:33

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

Supper Club × JavaScript on Hardware, Micro Controllers, ESP32 with Nick Hehr

Play Episode Listen Later Jun 16, 2023 64:27

In this supper club episode of Syntax, Wes and Scott talk with Nick Hehr about the fun ways to get started with micro controllers, writing JavaScript for hardware, and ideas for projects to build involving hardware and software. Show Notes 00:36 Welcome to Syntax 01:04 Introducing Nick Hehr Nick Hehr (@hipsterbrown) HipsterBrown (@hipsterbrown@toot.cafe) - Toot Café HipsterBrown HipsterBrown (Nick Hehr) Nick Hehr on CodePen 03:58 Running JavaScript on microcontrollers 06:20 What was your first project that got you into this? 12:12 Is the ESP32 the most popular controller? 14:12 Where do you buy hardware? Arduino - Home Adafruit Industries, Unique & fun DIY electronics and kits AliExpress - Online Shopping for Popular Electronics, Fashion, Home & Garden, Toys & Sports, Automobiles and More products - AliExpress SparkFun Electronics Introduction

Overcoming PTSD & Trauma Caused by Pathological Narcissists

apple tech iphone vr similar animation quotes key takeaways ar vr front end developer codepen stephen shaw ken wheeler

Play Episode Listen Later Jun 12, 2023 52:40

Rick Belden is a life coach who helps men and women who are feeling stuck get their lives moving again. He is a respected explorer and chronicler of the psychology and inner lives of men whose interviews, poetry, and essays have appeared in books and on media platforms around the world, reaching an international audience of many thousands of men and women.Visit his coaching website at https://www.rickbeldencoaching.com/ to schedule a free discovery session with him to visit about where you are, where you've been, and where you want to go with your life.► Visit Self-Love Recovery Institute:https://www.selfloverecovery.com► Listen to the podcast on all major platforms:https://selfloverecovery.buzzsprout.com► Ross Rosenberg's Links:YouTube Channel: https://youtube.com/RossRosenbergFacebook: https://www.facebook.com/TheCodependencyCureInstagram: https://www.instagram.com/rossrosenberg_slriTwitter: https://www.twitter.com/RossRosenberg1TikTok: https://www.tiktok.com/@rossrosenberg► Ross Rosenberg's BiographyRoss Rosenberg M.Ed., LCPC, CADC is a psychotherapist, educator, expert witness, and celebrated author. He is also a global thought leader and clinical expert in codependency, trauma, pathological narcissism, narcissistic abuse, and addictions.Ross's pioneering codependency contributions are responsible for the sweeping theoretical and practical updates and developing a treatment program that permanently resolves it.Ross has been featured on national TV and radio and is a regular radio and podcast guest. In addition, he has traveled the world, giving his one-of-a-kind keynote presentations and educational workshops.His global impact is best illustrated by his YouTube channel with 23 million views and 260,000 subscribers, and his book, The Human Magnet Syndrome, which has sold over 155,000 copies in 12 languages.In 2013, Ross created The Self-Love Recovery Institute, a hub for his personal development, workshops, professional training, retreats, other programs, and services. Learn more at www.SelfLoveRecovery.com.Support the show

CodePen, Web Animation, and the Future of AR/VR with Stephen Shaw

Whiskey Web and Whatnot

Play Episode Listen Later Jun 8, 2023 58:51

Stephen Shaw is a Front End Developer at CodePen. But his journey into the world of web development traces back to his earliest memory, captured in a nostalgic photo from 1987 of him sitting on his dad's lap gazing at a computer tower. Today Stephen contributes to building one of the most widely used code editors for the web. CodePen, as Stephen reveals, is a dynamic social network where people share code samples and demos among a vibrant community. Stephen reminisces about his involvement in working on Ken Wheeler's cash and using classic web animation tools like GSAP (GreenSock Animation Platform). He's also keen on exploring what lies ahead. Stephen predicts that Apple's rumored headset device will harness the power of AR/VR, pushing developers to adapt to the technology. In this episode, Stephen talks to Robbie and Chuck about his challenges using typescript at CodePen, the evolution of web animation tools, and the future of VR and AR on the web. Key Takeaways [00:35] - An Introduction to Stephen Shaw. [01:53] - A whiskey review: Angels Envy Straight Bourbon Whiskey. [07:00] - Tech hot takes. [09:58] - Why Stephen's team is converting projects to typescript. [18:21] - Stephen talks about his time maintaining cash. [21:11] - How to design web animations. [24:44] - Stephen discusses the future of VR and AR on the web. [35:07] - Stephen's career journey. [42:45] - Chuck, Robbie, and Stephen explore gaming. [47:48] - Stephen's other hobbies. Quotes [07:32] - “If you have an existing code that works, don't add typescript. That's not going to make your life any easier.” ~ Stephen Shaw [25:00] - “I think that we're very close to a crossroads. Similar to back in 2007 when the iPhone was introduced and suddenly everyone was scrambling to have a mobile website.” ~ Stephen Shaw [39:57] - “That's my idea of a web developer. I want to make information accessible. I want to figure out who the audience is and make them connect with what they need.” ~ Stephen Shaw Links Stephen Shaw Twitter Stephen Shaw LinkedIn CodePen Dribble UI David Khourshid Angels Envy Straight Bourbon Whiskey Woodford Reserve Tailwind CSS Github Visual Studio Code Zod Solid JS React Twitter Rust Ruby on Rails GraphQL Next JS jQuery GreenSock Figma Rive Adobe Apple Oculus Quest Firefox Google Amazon Microsoft CodeSandbox JSFiddle The Legend of Zelda: Breath of the Wild The Legend of Zelda: Tears of the Kingdon Nintendo Switch Toys “R” Us Skyrim Virginia Tech Kirby Super Mario Odyssey Lego Star Wars Disney Plus DigitalOcean 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.

Men Also Get Traumatized By Narcissists w/ Rick Belden

Play Episode Listen Later Jun 2, 2023 46:23

In this episode, Ross Rosenberg, M.Ed., LCPC, CADC, has invited Rick Belden, a life coach, author, and poet, to the podcast to discuss men's mental health issues, including self-love deficit disorder (SLDD)/codependency and trauma caused by narcissistic abuse.It's no secret that there is a stigma when it comes to men reaching out for help. Ross and Rick explain how they work with their clients to help resolve their mental health challenges using various strategies and techniques such as Ross's Healing the Inner Trauma Child (HITCH) Method.► Visit Self-Love Recovery Institute:https://www.selfloverecovery.com► Listen to the podcast on all major platforms:https://selfloverecovery.buzzsprout.com► Ross Rosenberg's Links:YouTube Channel: https://youtube.com/RossRosenbergFacebook: https://www.facebook.com/TheCodependencyCureInstagram: https://www.instagram.com/rossrosenberg_slriTwitter: https://www.twitter.com/RossRosenberg1TikTok: https://www.tiktok.com/@rossrosenberg► Ross Rosenberg's BiographyRoss Rosenberg M.Ed., LCPC, CADC is a psychotherapist, educator, expert witness, and celebrated author. He is also a global thought leader and clinical expert in codependency, trauma, pathological narcissism, narcissistic abuse, and addictions.Ross's pioneering codependency contributions are responsible for the sweeping theoretical and practical updates and developing a treatment program that permanently resolves it.Ross has been featured on national TV and radio and is a regular radio and podcast guest. In addition, he has traveled the world, giving his one-of-a-kind keynote presentations and educational workshops.His global impact is best illustrated by his YouTube channel with 23 million views and 255,000 subscribers, and his book, The Human Magnet Syndrome, which has sold over 155,000 copies in 12 languages.In 2013, Ross created The Self-Love Recovery Institute, a hub for his personal development, workshops, professional training, retreats, other programs, and services. Learn more at www.SelfLoveRecovery.com.Support the show

567: Full Stack Dev, Load Bearing Developer, and Being Zod Curious

Play Episode Listen Later May 29, 2023 60:39

What do you do if your computer dies? Chris applies to work at Luro, Dave applies at CodePen, Dave's Zod curious, TypeScript, sorting out a 10MB blog post, and how much do you miss jQuery?

curious developers load bearing zod fullstack typescript jquery codepen 10mb

The "Mother Wound" and Your Perpetual Unhappiness. Overcome Your Childhood Trauma

Play Episode Listen Later Apr 4, 2023 33:40

In this episode, Ross Rosenberg is joined by Rick Belden, a life coach, where they talk about "The Mother Wound" and how this form of attachment trauma dysfunctionally impacts adult personal and relational development. The unresolved psychological problems of the SLD (codependent) or narcissist mother significantly harms the emotional and social development of her children, who bring that harm/trauma forward into their adult lives. My Human Magnet Syndrome book addresses the impact of a person's mother's trauma on their choices for romantic partners and friends. ► Visit Self-Love Recovery Institute:https://www.selfloverecovery.com► Listen to the podcast on all major platforms:https://selfloverecovery.com/pages/podcast► Ross Rosenberg's Links:YouTube Channel: https://youtube.com/RossRosenbergFacebook: https://www.facebook.com/TheCodependencyCureInstagram: https://www.instagram.com/rossrosenberg_slriTwitter: https://www.twitter.com/RossRosenberg1TikTok: https://www.tiktok.com/@rossrosenberg► Rick Belden's BiographyRick is a highly talented coach specializing in adult problems caused by childhood trauma. Visit at https://www.rickbeldencoaching.com/ to schedule a session with him. ► Ross Rosenberg's BiographyRoss Rosenberg M.Ed., LCPC, CADC is a psychotherapist, educator, expert witness, and celebrated author. He is also a global thought leader and clinical expert in codependency, trauma, pathological narcissism, narcissistic abuse, and addictions.Ross's pioneering codependency contributions are responsible for the sweeping theoretical and practical updates and developing a treatment program that permanently resolves it.Ross has been featured on national TV and radio and is a regular radio and podcast guest. In addition, he has traveled the world, giving his one-of-a-kind keynote presentations and educational workshops.His global impact is best illustrated by his YouTube channel with 23 million views and 251,000 subscribers, and his book, The Human Magnet Syndrome, which has sold over 155,000 copies in 12 languages.In 2013, Ross created The Self-Love Recovery Institute, a hub for his personal development, workshops, professional training, retreats, other programs, and services. Learn more at www.SelfLoveRecovery.com.Support the show

559: Fidget Apps, Coding with AI, Dialog Element Navs, Getting Rid of CSS

Play Episode Listen Later Apr 3, 2023 60:16

Is there still any value in specializing in front-of-the-frontend dev? Would you ever use the dialog element for a mobile navigation? Why did CodePen decide to use Go for its GraphQL server?

apps element coding dialog getting rid graphql fidget codepen navs

The Inner Trauma Child & The Inner Critic Share the Same Voice. With Wendy Behary

Building With People For People: The Unfiltered Build Podcast

Play Episode Listen Later Mar 30, 2023 27:01

In this episode, Ross Rosenberg, M.Ed., LCPC, CADC, is joined by Wendy Behary, author of Disarming the Narcissist, to discuss why the "inner critic," the voice in our minds that condemns, criticizes, or demeans us—whether justified or not, is formed out of painful early life experiences causing attachment trauma.By "Healing the Inner Trauma Child," a powerful psychotherapy technique to uncover unconscious, dissociated childhood trauma, one can "re-write the script," which previously consisted of negative, pessimistic thoughts caused by our childhood trauma, and replace it with positive, optimistic thoughts, and most importantly, self-love.► Visit Self-Love Recovery Institute:https://www.selfloverecovery.com► Listen to the podcast on all major platforms:https://selfloverecovery.com/pages/podcast► Ross Rosenberg's Links:YouTube Channel: https://youtube.com/RossRosenbergFacebook: https://www.facebook.com/TheCodependencyCureInstagram: https://www.instagram.com/rossrosenberg_slriTwitter: https://www.twitter.com/RossRosenberg1TikTok: https://www.tiktok.com/@rossrosenberg► Wendy T. Behary's BiographyWith 30 years of professional experience and advanced level certifications, Wendy Behary is the founder and director of The Cognitive Therapy Center of New Jersey and The Schema Therapy Institutes of NJ-NYC-DC. She is the author of an international bestselling book, "Disarming the Narcissist...” translated in 15 languages.Learn more about Wendy by visiting her website:https://disarmingthenarcissist.com/► Ross Rosenberg's BiographyRoss Rosenberg M.Ed., LCPC, CADC is a psychotherapist, educator, expert witness, and celebrated author. He is also a global thought leader and clinical expert in codependency, trauma, pathological narcissism, narcissistic abuse, and addictions.Ross's pioneering codependency contributions are responsible for the sweeping theoretical and practical updates and developing a treatment program that permanently resolves it.Ross has been featured on national TV and radio and is a regular radio and podcast guest. In addition, he has traveled the world, giving his one-of-a-kind keynote presentations and educational workshops.His global impact is best illustrated by his YouTube channel with 23 million views and 250,000 subscribers, and his book, The Human Magnet Syndrome, which has sold over 155,000 copies in 12 languages.In 2013, Ross created The Self-Love Recovery Institute, a hub for his personal development, workshops, professional training, retreats, other programs, and services. Learn more at www.SelfLoveRecovery.com.Support the show

Ep. 20: DxE and Me - Reducing time to hello world through Developer Experience Engineering with Cassidy Williams

Play Episode Listen Later Mar 7, 2023 49:21

As a developer have you ever worked on an API endpoint but you can't easily find the documentation for the API to see how pieces work, or can't find the specific sequence diagram on how your domains interact, or how about using some clunky outdated internal tool that you have to use to compile your code, well your user experience is suffering, more specifically your developer experience is poor. The term “developer experience” or DX is becoming more and more pervasive in the tech industry as companies realize how important it is for the success of their businesses. But what is DX you ask? Well, in today's episode I am joined by a very special guest to answer that question and explore the realm of DX engineering and how you can help yourself and your team become more productive and build the experience you deserve. Our guest today, Cassidy Williams, spreads the joy of tech through her contagious positivity and accessible content. She earned her Bachelor of Science in Computer Science from Iowa State University and is a startup advisor and investor and developer experience expert. Currently, she is the CTO at Contenda, an AI content generation platform. Previously, she was the Director of Developer Experience at Netlify and has also worked at a variety of large and small companies like Remote, React Training, CodePen, Amazon and Venmo. She's active in the developer community, has given hundreds of talks around the world, and also co-hosts the Stack overflow podcast and The Dev Morning Show (at night) podcast. She is one of Glamour Magazine's 35 Women Under 35 Changing the Tech Industry and LinkedIn's Top Professionals 35 & Under. She wants to inspire generations of STEM students to be the best they can be. When Cassidy is not inspiring the next generation of coders she is playing music, singing karaoke, creating memes, building mechanical keyboards, and hanging out with her sister. Connect with Cassidy: Twitter The Dev Morning Show (at night) LinkedIn Website Show notes and helpful resources: CTO at Contenda Glamour Magazine's 35 Women Under 35 Changing the Tech Industry Subscribe to Cassidy's newsletter it won't disappoint Cassidy's fav joke at the time of recording “I adopted my dog from a blacksmith. As soon as we got home, she made a bolt for the door!” Obsidian note taking software for productivity As a developer experience engineer you are making developers live's easier through content generation, demos, tutorials and anything that can get them from zero to 1, the “Time to Hello World” Make Time by Jake Knapp and John Zeratsky Cosynd App - The fastest and most affordable way for content creators to register their works Visit podcast.unfilteredbuild.com for more info Building something cool or solving interesting problems? Want to be on this show? Send me an email at jointhepodcast@unfilteredbuild.com Podcast produced by Unfiltered Build - dream.design.develop.

400: Hiatus

Play Episode Listen Later Feb 8, 2023

Marie and I jump on the show to tell y'all we're taking a little break! It feels like years since we've been eluding to the fact that we're working on a new major upgrade to CodePen. Rather than keep dancing around it, we're going to minimize or remove working on anything that isn't working on that. We can't wait to come back for episode 401 and tell you all about it. Time Jumps Sponsor: Split This podcast is powered by Split. The Feature Management & Experimentation Platform that reimagines software delivery. By attaching insightful data to feature flags, Split frees you to quickly deploy, measure, and learn the impact of every feature you release. So you can safely deliver features up to 50 times faster and exhale. What a Release. Start raising feature flags (and lowering stress). Visit Split.io/CodePen for a free trial.

split hiatus codepen

399: Data Munging

Play Episode Listen Later Feb 1, 2023

There was a small problem in our database. Some JSON data we kept in a column would sometimes have a string instead of an integer. Like {"tabSize": "5"} instead of {"tabSize": 5} of the like. Investigation on how that happened was just silly stuff like not calling parseInt on a value as it came off a element in the DOM. This problem never surfaced because our Rails app just papered over it. But we're moving our code to Go in when you parse JSON in Go, the struct type that you parse it out into needs to match those types perfectly, or else it panics. We had found that our Go code was working around this in all sorts of ways that felt sloppy and inconsistent. One way to fix this? Fix any bad data going into the DB, then write a script to fix all the data in the DB. This is exactly the approach I took at first, and it would have absolutely fixed this problem. But Alex took a step back and looked at the problem a bit wider, and we ended up building some tools that helped us solve this problem, and solve future problems related to this. For one, we built a more permission JSON parser that would not panic on something as easy to fix as a string-as-int problem. This worked by way of some Go reflection that could tell what types the data was supposed to be and coerce them if possible. But what should the value fall back to if it's not savable? That was another tool we built to set the default values of Go structs to be potentially other values than what the defaults for their types are. And since this is all in the realm of data validation, we built another tool to validate the data in Go structs against constraints, so we can always keep the data they contain good. Once all these tools were in place, the new script to fix the data was much easier to write. Just call the safe JSON function to fix the data and put it back. And the result is a cleaned up code base and tools we can use for data safety for the long term. Time Jumps Sponsor: Split This podcast is powered by Split. The Feature Management & Experimentation Platform that reimagines software delivery. By attaching insightful data to feature flags, Split frees you to quickly deploy, measure, and learn the impact of every feature you release. So you can safely deliver features up to 50 times faster and exhale. What a Release. Start raising feature flags (and lowering stress). Visit Split.io/CodePen for a free trial.

data split dom investigation fix db rails json codepen

398: DevOops

Play Episode Listen Later Jan 26, 2023

Stephen and I hop on the podcast to chat about some of our recent tooling, local development, and DevOps work. A little while back, we cleaned up our entire monorepo's circular dependency problems using Madge and elbow grease. That kind of thing usually isn't the biggest of deals and the kind of thing a super mature bundler like webpack deals with, but other bundlers might choke on. Later, we learned that we had more dependency issues like inter-package circular dependencies (nothing like production deployments to keep you honest) and used more tooling (shout out npx depcheck) to clean more of it up. Workspaces in a monorepo can also paper over missing dependencies — blech. Another change was moving off using a .dev domain for local development, which oddly actually caused some strange and hard-to-diagnose DNS issues sometimes. We're on .test now, which should never be a public TLD. Time Jumps Sponsor: Notion Notion is an amazing collaborative tool that not only helps organize your company's information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com. Take your first step toward an organized, happier team, today.

notion devops workspace dns tld codepen

397: User-Generated Content Saftey

notion user generated content saftey codepen

Play Episode Listen Later Jan 18, 2023 32:52

I was asked about the paradoxical nature of CodePen itself recently. CodePen needs to be safe and secure, yet we accept and gleefully execute user-authored code, which is like don't-do-that 101 in web security. Marie and I hop on the show to talk this through as an update from quite a long time ago. It's wonderfully-terribly complicated. Part of what complicates it is that there are many different kinds of worrisome code, from malicious, to distasteful, to spam, and they all need different treatment. This is a daily and never-ending war. Time Jumps Sponsor: Notion Notion is an amazing collaborative tool that not only helps organize your company's information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com. Take your first step toward an organized, happier team, today.

396: Open Source

split open source mastodon codepen

Play Episode Listen Later Jan 11, 2023

Robert and I jump on the podcast to have a little chat about open source generally and what we do with open source at CodePen. CodePen itself is not open source, aside from the small bits we've made public and the open-source things we include within it. But all Public Pens on CodePen are open source, so we certainly handle a lot of it! Enough that I felt comfortable making our Mastodon presence on Fosstodon, which is an open-source-focused instance. Time Jumps Sponsor: Split This podcast is powered by Split. The Feature Management & Experimentation Platform that reimagines software delivery. By attaching insightful data to feature flags, Split frees you to quickly deploy, measure, and learn the impact of every feature you release. So you can safely deliver features up to 50 times faster and exhale. What a Release. Start raising feature flags (and lowering stress). Visit Split.io/CodePen for a free trial.

395: The Most Hearted of 2022

Play Episode Listen Later Jan 4, 2023

Marie and I hop on the show to discuss our recently released Most Hearted of 2022 Pens. We only did the calculations the day before, so this is more of a first reaction than a deep dive. Congrats to Hyperplexed for #1 and a massive year on CodePen. Last one entry on the Top 100, and this year, nine. "Full layouts" like this appeared a number of times, including Aysenur Turk, last year's winner, at #13 with Liquid Transition Effect, and there were two NFT-themed landing pages (1, 2) in the Top 100. A lot of Pens attract attention when they have that "I could use this" feel to them, demonstrated by Ryan Mulligan's Logo Wall at #2! High five to Greensock for taking #3 with a re-creation of Brian Cross' lovely Pen. The tag "gsap" was used a ton in the Top 100. Jon Kantner took #4 and 10 other spots making this the most appearances on the Top 100 list ever, and also took a spot with a Pen made on December 13th! Aaron Iker and Yoav Kadosh both had 4 spots. Perhaps my favorite because of the deep CSS trickery involved was Scott Kellum's Apple inspired pride clock. Scott has the oldest account of anyone in the list, over 10 years old! Huge fan of Steve Gardener's joke, though as well. 11 of the Top 100 were created for CodePen Challenges. Time Jumps Sponsor: Notion Notion is an amazing collaborative tool that not only helps organize your company's information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com. Take your first step toward an organized, happier team, today.

apple nfts pens notion css hearted codepen brian cross greensock scott kellum

394: Very Remote Work

Play Episode Listen Later Dec 14, 2022

Rach lives in Australia, so for our otherwise U.S.-based team, that's about as remote as it gets. We've always been remote at CodePen, so we have it built-in to our culture already, but that doesn't mean we don't have to plan for it, think about it, and adjust things to make sure we're all doing the best we can. Writing is a fundamental aspect of it all, but even that is funny sometimes because you have to choose where those words will go that make the most sense. Right now, it's a balance between Notion, GitHub, Slack, and even our codebase itself. Time Jumps Sponsor: Split This podcast is powered by Split. The Feature Management & Experimentation Platform that reimagines software delivery. By attaching insightful data to feature flags, Split frees you to quickly deploy, measure, and learn the impact of every feature you release. So you can safely deliver features up to 50 times faster and exhale. What a Release. Start raising feature flags (and lowering stress). Visit Split.io/CodePen for a free trial.

australia writing split slack remote work github notion rach codepen

393: Challenges in 2022

Play Episode Listen Later Dec 7, 2022

Marie and Chris talk about the year in CodePen Challenges. If you participate, this might be an interesting look into how we think about them. If you don't, it might help you understand what they are and how they might just tickle your fancy. Time Jumps Sponsor: Split This podcast is powered by Split. The Feature Management & Experimentation Platform that reimagines software delivery. By attaching insightful data to feature flags, Split frees you to quickly deploy, measure, and learn the impact of every feature you release. So you can safely deliver features up to 50 times faster and exhale. What a Release. Start raising feature flags (and lowering stress). Visit Split.io/CodePen for a free trial.

challenges split codepen

392: Project Management Refresh

split refresh project management notion ic codepen

Play Episode Listen Later Nov 30, 2022

Dee and Chris chat about our latest take on Project Management (PM), a somewhat tricky topic for us with such a small team where literally everyone is an individual contributor (IC) with a lot on their shoulders aside from PM. We're attempting a project of large scale, so part of what has helped us so far is scoping the project into phases releases. That way work that we know is in a later release can be put off until we're literally working on that release. Without at least that prioritization, things would take much longer. The releases are also chunked into sub-projects with a no-too-little and not-too-big quality, and within those projects is where the kan-baning happens. If we can keep the whole team on one project (or at least a group of 2-3), it limits the context switching which also helps speed and productivity. We use Notion for most of this work, and it's been nice to keep literally all of it (all the way up through all the phases) in one big database, then we scope the views down to phases and projects and cards. Each card we make sure has a very actionable tone to it and includes everything one might need to finish the task, including decisions, previous conversations, relevant other tickets, etc. Each card has things you might expect like who is working on it, the current status, whether it's blocked or not, and several other useful bits of metadata. It also contains time estimates, so we can, at a glance, see how far we've come and what's left on any given project. We know things like time estimates can change quite a bit, but everyone is well aware of that and isn't beholden to the numbers. It just gives us some idea of what is going on other than feeling like we're entirely driving blind. Each week we take a look at the progress together as a team. Time Jumps Sponsor: Split This podcast is powered by Split. The Feature Management & Experimentation Platform that reimagines software delivery. By attaching insightful data to feature flags, Split frees you to quickly deploy, measure, and learn the impact of every feature you release. So you can safely deliver features up to 50 times faster and exhale. What a Release. Start raising feature flags (and lowering stress). Visit Split.io/CodePen for a free trial.

391: Early TypeScript at CodePen

Play Episode Listen Later Nov 23, 2022

TypeScript ain't exactly new, but it's a bit new to us. Robert was the most knowledgeable about TypeScript on the team and felt like it could be valuable for us. What does that mean though? Where would we use TypeScript? What blockers were there? What does it actually help with? The implementation hasn't been trivial, so has it been worth it? Will it be worth it? Robert, Chris, and Stephen discuss. Time Jumps

typescript codepen time jumps

390: The Social Media Zeitgiest

Play Episode Listen Later Nov 16, 2022

Marie and I talk about what's going on in the world of social media, and what that might mean for CodePen and front-end developers. Twitter doesn't feel particularly healthy at the moment, but has been the biggest player for front-end developers for a lot of years. Are we moving? Not? Where? Time Jumps

social media codepen time jumps zeitgiest

Healing the Inner Trauma Child (HITCH) Method: Trauma Integration/Resolution

Play Episode Listen Later Nov 16, 2022 21:26

In this episode, Ross Rosenberg, M.Ed., LCPC, CADC describes his "Healing the Inner Trauma Child (HITCH) Method," a trauma integration and resolution technique. He explains how and why childhood attachment trauma is responsible for Self-Love Deficit Disorder (codependency). ► Visit Self-Love Recovery Institute:https://www.selfloverecovery.com► Listen to the podcast on all major platforms:https://selfloverecovery.buzzsprout.com► Ross Rosenberg's Links:YouTube Channel: https://youtube.com/RossRosenbergFacebook: https://www.facebook.com/TheCodependencyCureInstagram: https://www.instagram.com/rossrosenberg_slriTwitter: https://www.twitter.com/RossRosenberg1TikTok: https://www.tiktok.com/@rossrosenberg► Ross Rosenberg's BiographyRoss Rosenberg M.Ed., LCPC, CADC is a psychotherapist, educator, expert witness, and celebrated author. He is also a global thought leader and clinical expert in codependency, trauma, pathological narcissism, narcissistic abuse, and addictions.Ross's pioneering codependency contributions are responsible for the sweeping theoretical and practical updates and developing a treatment program that permanently resolves it.Ross has been featured on national TV and radio and is a regular radio and podcast guest. In addition, he has traveled the world, giving his one-of-a-kind keynote presentations and educational workshops.His global impact is best illustrated by his YouTube channel with 23 million views and 242,000 subscribers, and his book, The Human Magnet Syndrome, which has sold over 150,000 copies in 12 languages.In 2013, Ross created The Self-Love Recovery Institute, a hub for his personal development, workshops, professional training, retreats, other programs, and services. Learn more at www.SelfLoveRecovery.com.Support the show

540: Next 13, WP vs FB, Figma Thoughts, and a TypeScript Journey

wordpress figma typescript codepen nextjs

Play Episode Listen Later Nov 7, 2022 43:11

Our thoughts on Next 13, incremental adoption, server components, WordPress vs Facebook, CodePen updates, Figma features we dig, Chris' TypeScript journey, and Dave's a hypocrite?

389: Migrating a Ruby on Rails GraphQL API to a Go GraphQL API

Play Episode Listen Later Nov 2, 2022

One thing that's been keeping us very busy at CodePen is moving our main API. We decided on GraphQL long ago and it's served us pretty well. We originally built it in Ruby on Rails alongside a lot of the rest of our app. But while Rails served us well, we've been moving off of it. We like our React architecture and we're better served leaning into that, with frameworks like Next, than staying on Rails. We proved out this combination of technologies for ourselves, building a whole set of admin tools with it. Now we're ready to keep that train going as we build out more of CodePen with the same stack. But removing Rails means moving off of our Rails-based GraphQL implementation. This means re-writing that API in Go, another bit of tech we've had a lot of luck with. Turns out that re-writing an API is more time-consuming than writing it to begin with, especially as we need to run them side-by-side and behave identically. No refactoring allowed! Unless of course we want to refactor it on both sides and take even more time. Dee joined me this week in talking about all this. It's a huge job! But we've been doing well at it, building our own tooling, doing lots of testing, and ultimately proving that it works by releasing it in small areas on the production site. It's all working out how we hoped it would: fast, cheap, and easier to reason about. Time Jumps Sponsor: Equinix Metal's Startup Partner Program Equinix Metal's Startup Partner Program helps early stage companies level up. Their experts work with startups like Koord and INVISV to build their competitive edge with infrastructure. Equinix Metal provides real time guidance and support to help startups grow faster. With up to $100,000 in infrastructure credit, access to Equinix's global ecosystem of over 10,000 customers and 1,800 networks, they might just be what you need to take your startup global. Visit metal.equinix.com/startups to take your startup to the next level.

react api rails migrating ruby on rails graphql equinix codepen graphql apis equinix metal

388: Durable Objects

Play Episode Listen Later Oct 19, 2022

Robert and I jump on to chat about Cloudflare's product Durable Objects. It's part of their Workers platform, which we already use at CodePen a good bit, but with Durable Objects... Global Uniqueness guarantees that there will be a single instance of a Durable Object class with a given ID running at once, across the world. Requests for a Durable Object ID are routed by the Workers runtime to the Cloudflare data center that owns the Durable Object. In their intro blog post a few years back, they call the "killer app" real-time collaborative document editing, which is obviously of interest to us. So we've been tinkering and playing with how that might work with CodePen's future technology. Time Jumps Sponsor: Equinix Metal's Startup Partner Program Equinix Metal's Startup Partner Program helps early stage companies level up. Their experts work with startups like Koord and INVISV to build their competitive edge with infrastructure. Equinix Metal provides real time guidance and support to help startups grow faster. With up to $100,000 in infrastructure credit, access to Equinix's global ecosystem of over 10,000 customers and 1,800 networks, they might just be what you need to take your startup global. Visit metal.equinix.com/startups to take your startup to the next level.

id workers objects requests durable cloudflare equinix codepen equinix metal

387: CodePen Co-Founders AMA

Play Episode Listen Later Oct 5, 2022

A few months back, Alex and I did a 10-year anniversary episode that took the form of 10 bits of advice formed in the fires of running a software company for a decade. That was us talking at you. We thought it would be fun to turn the tables and have you talk at us in the form of an Ask-Me-Anything follow-up to that 10-year show. Time Jumps

co founders ask me anything codepen time jumps

386: Hakim El Hattab

Play Episode Listen Later Sep 21, 2022

This week I got to speak with Hakim El Hattab. I feel pretty special as Hakim told me he doesn't do public stuff very often. I get it! He's a busy man with a family, a successful company, and ambitious other projects. I think of Hakim as the master of simple but satisfying UI concepts that have a way of becoming bigger than demos. Consider Ladda, which you can find as part of his personal site, which is a button that expands to show a spinner. This concept started with Hakim has has made it's way to surely hundreds or thousands of websites, some as big as Slack and some as awesome as CodePen itself. Time Jumps Sponsor: Notion For companies of all sizes, Notion provides one central and customizable workspace that can be tailored to fit any team and brings all teams together to get more done and move faster.Notion is an all-in-one team collaboration tool that combines note-taking, document sharing, wikis, project management, and much more into one space that's simple, powerful, and beautifully designed.With powerful integrations, an API, and seamless navigation, you'll have everything you need in one spot so you can make speed your advantage — without the silos and context switching that slow companies down.Plus, Notion has a worldwide network of millions of users creating templates, tutorials, and new inspiration. The product is getting better all the time, and you'll always have the support you need.Learn more and get started for free right now at notion.com.

slack api ui notion hakim codepen

382: Bulk Actions for Assets

Play Episode Listen Later Aug 24, 2022

CodePen will host your assets, like images, data models, libraries, whatever. It’s quite useful! They are easy to browse, easy to copy URLs or code snippets of usage, served with the right headers from a fast global CDN, and heck, we’ll even help optimize them. It’s easy to amass a lof of them, as we […]

assets bulk urls cdn codepen

381: Data on External Library Usage

Play Episode Listen Later Aug 17, 2022

Marie and I this week! Marie dug up some interesting data about “external library” usage on CodePen. In the Pen Editor (specifically), you have the option of adding external resources. These are literally placed in the Settings area and added to the end of your HTML. We’re specifically focused on these (not scripts you might […]

data library external settings usage html codepen

528: Alex and Andrew on Working in an Agency