722: The No-Ai Talk Challenge, Picking Rails Tooling, Dark Mode?  🔗 **Source:** [722: The No-Ai Talk Challenge, Picking Rails Tooling, Dark Mode?](https://share.snipd.com/episode/6242b472-79f7-479e-8aa1-f1d1f5f18842) ## Highlights - **QueueMicrotask Uses The Browser's Microtask Queue** - queueMicrotask hooks into the browser's microtask queue to run deferred work as soon as the current task finishes without scheduling a separate macrotask. - It sits between requestAnimationFrame and Promise timing and reduces later blocking compared to setTimeout. Transcript: Chris Coyier MDN.io slash Q-U the British Q, Q Microtask. So this is kind of a new ish API. Let's see, July, 2020 baseline. Q micro task is like request animation frame, but it's a little, it's like, actually, the examples are actually exactly what you're doing. It's like set data and then dispatch the data event, you know? Dave Rupert Okay. Yeah. And then just like do it when you have a second. Please don't block anything. Yeah, yeah. Chris Coyier It's, like, basically, like, you're hooking into the – have you seen Jake Archibald's talk on the event queue, like, the event loop or whatever? Like, you click. Probably. And then it bubbles and then it does all this stuff. Like, the event loop, I think. Jake Archibald, event loop. He has a good talk on it. So I think I would look at that to understand how the event loop works. And the disgusting thing is it works a little bit different in different browsers. Ah, I've been paying again. And then you mix in some Shadow DOM, and it gets even better. But the QMicrotask will, it's basically like, hey, hook into this event system that the browser already has, this task system, this Microtask system, and go execute this when you get On your next runaround. Dave Rupert So baseline 2020 seems good, doesn't it? For sure good. Chris Coyier Yeah, I mean, you're talking, we're going back to Safari 12.1. So that's... Dave Rupert Yeah, because Ryan ends this question with like, one, does IMP even matter? Yes, it does. That's the Dave's wife metric, or the Jesse metric, we'll call it. And the scheduler API seems promising, but it's not supported by Safari. Is scheduler even newer than that? Do we even care about the scheduler API if we have this micro task thing? Chris Coyier Yes. Scheduler API is actually even better. But I think it's more event driven. You can post it up. It's not supported in Safari. So you're not going to get that yet, you know, but we'll use this micro task thing. Dave Rupert That seems good. Like, I think that's like the greatest. I've never heard of it. So there you go. I'd fail that interview question. Chris Coyier Oh, well, it's kind of like a, if you know, you know, I mean, that's like, why would you need this unless you ran into this micro task queuing problem? Like we had to use it on our fluent web components um because like if we're trying to like we had this whole event system like fast has this whole it's called fast controller but it's like Basically like we we basically event notify you know when different things happen in in the life cycle and event of an event you know and like we are listening to like a child elements Event cycle and um but now just to see if that element mounted and then we can add an attribute to it stuff like that right like a like a aria roll or something like that okay um or a popover Or something but queue microtask we we went through all these iterations but queue microtask was like like became this kind of front runner of like oh we can just like use the browser's Task queue to like hey when you're now free almost like a request idle callback would which would also be another one but that has like safari problems too if i recall correctly um but Uh or i it might be in safari now let me let me let me be nope it's not in safari it's in here it's behind a flag i think so okay it's like a star and asterisks on um uh so yeah a request i have a callback Not technically out there, but, uh, this cute micro task is great. Just like it, it sort of filled the gap of like, okay, cool. Well, we're just going to like send something out and you can do this real quick, you know? Um, so check it out. I think like, it's probably what you want. ([Time 0:09:14](https://share.snipd.com/snip/1d812216-b180-454f-80c9-39a8262376b8)) - **Optimize For INP And Use Scheduler Or Microtasks** - Prioritize INP because it reflects real user-perceived interactivity and affects user experience. - Try Scheduler API where available but fallback to queueMicrotask since Scheduler lacks broad Safari support today. Transcript: Dave Rupert Yes, it does. That's the Dave's wife metric, or the Jesse metric, we'll call it. And the scheduler API seems promising, but it's not supported by Safari. Is scheduler even newer than that? Do we even care about the scheduler API if we have this micro task thing? Chris Coyier Yes. Scheduler API is actually even better. But I think it's more event driven. You can post it up. It's not supported in Safari. So you're not going to get that yet, you know, but we'll use this micro task thing. Dave Rupert That seems good. Like, I think that's like the greatest. I've never heard of it. So there you go. I'd fail that interview question. Chris Coyier Oh, well, it's kind of like a, if you know, you know, I mean, that's like, why would you need this unless you ran into this micro task queuing problem? Like we had to use it on our fluent web components um because like if we're trying to like we had this whole event system like fast has this whole it's called fast controller but it's like Basically like we we basically event notify you know when different things happen in in the life cycle and event of an event you know and like we are listening to like a child elements Event cycle and um but now just to see if that element mounted and then we can add an attribute to it stuff like that right like a like a aria roll or something like that okay um or a popover Or something but queue microtask we we went through all these iterations but queue microtask was like like became this kind of front runner of like oh we can just like use the browser's Task queue to like hey when you're now free almost like a request idle callback would which would also be another one but that has like safari problems too if i recall correctly um but Uh or i it might be in safari now let me let me let me be nope it's not in safari it's in here it's behind a flag i think so okay it's like a star and asterisks on um uh so yeah a request i have a callback Not technically out there, but, uh, this cute micro task is great. Just like it, it sort of filled the gap of like, okay, cool. Well, we're just going to like send something out and you can do this real quick, you know? Um, so check it out. I think like, it's probably what you want. Dave Rupert And so, and you can just kind of do this without a whole bunch of. So, yeah, I mean, this metric does matter because it really affects how people really feel about your website and there's tools to fix it. So that's pretty satisfying answer. I would think. Yeah. Yeah. Chris Coyier And then, you know, like the other workaround is like setting up all these mutation observers and things like that and promises and you know, like, um, like a set timeout is a promise. Right. But you're kind of just saying like, Hey, I want you to do this, but do it later, right? And that's kind of what we get with a Q-my Yeah, set timeout doesn't feel right because it's like, well, it's not smart about when it's going to do it. Dave Rupert So if it doesn't block right this second, fine, but it's going to block something else later, right? Yeah, yeah. Chris Coyier Yeah, so like, yeah, I mean, that's like they actually in this task versus micro tasks, like you should read it, but like, we're basically hooking into the already established event Loop rather than creating a set timeout that creates another registry in the event loop. You know what I mean? Like, like you're basically just like, in my opinion, like you're pushing into an array rather than being like, I don't know, like causing the array to re clone itself or something like That. Like you're just adding an item rather than like, you know, splicing an item in or something like that. That's a terrible. Yeah, that makes sense. Dave Rupert It also feels like I know it's not even close to the same thing, but it's like when we get a new CSS feature that like, just let CSS do it rather than JavaScript do it or whatever. Well, it's like one of those, like, just let the browser do what it's going to let it figure out when to do it. Chris Coyier Yeah, yeah, yeah. You're like, yeah, it's, it's the imperative versus declarative, I guess. Like, like, you're like, hey, do this at some point, right? But a set timeout is more imperative. You're like, do this in 2,000 seconds. And it's not going to be exactly 2,000 seconds. But you're basically saying, and then you're going to have all this set timeout code, and it's going to be all buggy, and it's never going to finish. Whereas I think queue microtask is going to be a little more reliable. If you put it on the event queue, there's probably a less of a chance. Dave Rupert What percentage of set timeouts on the web are, are a bad idea? Chris Coyier Like a thousand. I don't know. Like unless you're building a clock, like probably all of them. All of them. Yeah. I don't know. That's funny. Like whenever you, I don't feel good when I write a set timeout. I'm sure I've done it and I've needed to. And, you know, there's even like this. Dave Rupert Yeah, that's what my mind goes to is all the times I've done it. You're like, oh, this like little piece of data isn't ready yet. But if you just like wait a second, then it like usually it is. So just like that's a terrible idea. Chris Coyier Yeah. Yeah. Dave Rupert No, I mean, that's it happens i guess is the best way to put that like it's not right it just never feels good yeah you know when you're writing it you're like yeah but what if the internet's Like extra slow shouldn't there just be like a callback when that data is available yeah so yes ryan uh imp matters. Chris Coyier Scheduler API is not quite ready. You could probably fill it. But I would hope it's coming, and I would probably get into it. But I would also consider, you know, maybe looking at some, like, this Q Microtask. Dave Rupert So, good luck. ([Time 0:10:58](https://share.snipd.com/snip/8da2a0f8-015f-4bc7-a3a2-6ddeb77bb5f2)) - **Read Designing Content Authoring Experiences** - Read Designing Content Authoring Experiences to deeply understand CMS and authoring UX. - Greg Dunlap's book (authoringexperience.com) digs into rate of change and authoring workflows with practical examples. Transcript: Dave Rupert The book I love that goes way into the weeds is the newish one by Greg Dunlap called designing content author experiences. It talks about the rate of change and all that stuff like Dave cover, but even more, the URL is authoringexperience.com. So great, great book by, by Greg there. And it's just, it's one of those books that makes me want to like, I don't know, like an alternate reality where what I'm doing with my life is designing the ultimate authoring experience. You know, I just love it when a CMS really hits it perfectly for what you're trying to do. And I feel like there's a lot of room for improvement there. And this is a book all about that. So thanks, Katie, for reminding us about that. ([Time 0:16:55](https://share.snipd.com/snip/f2f88a1d-3413-40f9-a0bf-dfb1a84b8878)) - **Auth0 Gave Features But Still Required Heavy Integration** - Chris describes choosing Auth0 for enterprise features and later finding they still had to implement much custom integration. - The team wrote their own auth logic while depending on a third party, which reduced the expected lift. Transcript: Chris Coyier Like it's snowballs, right? Um, you know, we went with auth zero as our auth backbone because we were like, well, we're going to get asked about enterprise stuff. And we're going to get asked about a two factor authentication, like text messages and stuff. And I don't want to maintain a text message server and all that stuff. Right. And so, um, went with Auth0, but, uh, in my experience, you end up writing, they have a thin API. And if you don't use their little GUI to log in and you want like custom screens, you're, you have to do everything. And then you end up writing all this code to integrate with their authentication API. And it just, it was like, we, we wrote our own auth system, but had to depend on a third party. That's how I felt like we, we built all this stuff and we still had to like, you know, authenticate. Whereas something I'm sure like the Rails Auth, Rails authentication, whatever, two factor has like a Twilio gem you can plug into or it goes straight to a password list. What do we call that? Dave Rupert Passkeys, you know like it goes straight to it you know like anyway that's a lot about auth but there is a lot of choices there and it is nice if if rails like just guides you to one place and ([Time 0:23:55](https://share.snipd.com/snip/187df247-2588-4fb4-a0de-6d7cdfc47cdf)) - **Protect Domain Email With SPF DKIM And DMARC** - Harden email by publishing SPF, DKIM, and incrementally enforcing DMARC (report→quarantine→reject) to prevent spoofing and protect deliverability. - Use established providers (SendGrid, Postmark) to simplify keys and reports. Transcript: Dave Rupert So there's a real basic thing in this toolbox called an SPF, which is kind of like a, it's just a TXT record that you have to publish on DNS, but you publish it under your main domain that You're trying to send email from. And it's just like an allow list. So you say in that SPF, what domains are allowed to send email on my behalf? Because an email server will know. So it might be yourself or whatever, but probably not, right? Because you probably use like SendGrid or SparkPost or Postmark or whatever email solution you're picking, it's probably nice to pick an email provider, just like it's nice sometimes To pick Auth0 or whatever. You can pick a good email sending provider, and they just help you with all this. They help you with reporting and actually creating emails and sending emails. Chris Coyier If your domain gets blocked, code like CodePen or DaveRupert.lc like if that gets blocked by it's hell, it's hell to undo. So like go through the provider, right? Like SendGrid or whoever. Right. Dave Rupert And I think they'll help you with some of this, which is good, you know, but so you put this SPF TXT record on and then it's a whitelist for, you know, you can say, hey, they can send it and I can send it, but nobody else can send email on my behalf. Or at least then it's a clue to who gets that email that they can decide. Like, I think that's how it works. Like, if your SPF matches, well, they're like, well, it's probably not spam then, you know, they're telling me it's okay to get this email. At least it's a strong signal. But then there's like another layer on top of that called DKIM, which is just like a published public key for your email server, which, you know, you generate a public key has a, has a, You know, a matching private key, right? So you get some package and, and along with the public key and anybody has the private key can then kind of like whatever decrypt it because it has both keys and like make sure that that's, You know, good to go. I'm not going to like explain public key, private key cryptography. I'm not the guy to do that. But I think you can kind of imagine that the public key can literally be public, but only certain people like you have the private key in which to like sign packages with. So you let's say you have an email, you like smash it together with the headers and all the content of the email and stuff. And then you hash it with your private key, you can push that out and then people with the public key can decrypt it or whatever. And I think that's just a way to any, like a receiver can like look it up, decrypt it, figure out what's in there, match it to the SPF records, whatever. It's just a stronger signature. And nobody else can send an email that decrypts nicely because they don't have your private key. You know, you have your private key. So, so, so you only you can send emails that are encrypted in this nice way. That's a pretty big deal. So that goes a long way. Chris Coyier And like, you know, sending of a, an email that's that's safe that like only you can do nobody else can do that and that one you put on your dns like you make an a record or something like that Dave Rupert Like a like you yeah put a record right like it's yeah the public key is a dns record that's right oh the spf one is too used i'm seeing this and then there's another one that's yet another Dns. This is all DNS all the way down. Chris Coyier We're going to put one more DNS record and we're going to solve it. We're going to, yeah, just one more guys, one more and we're going to really fix it. Dave Rupert And, uh, and that's called D Mark. And it's what, what the other two are like, um, strong signals, I guess. Like, I don't think SPF is saying, it's saying, oh, I got an email that doesn't match what's on SPF. Now what? Whereas DMARC says, has the actual policy. The DMARC says like, this is what you should do. I'm telling you what you should do and you have to do it. So you could say like, oh, because the SPF failed, then you could set your DMARC to just like report it. And you can put an email address in there. Or like if you use a fancy tool, I don't know, I know Cloudflare for sure has a tour, a tool, you can be like, okay, I want all the like, the bounces essentially to go to, to my Cloudflare, And they'll process it and give me a nice dashboard of what came. So you can then see like, oh, look at this weird, who's this person trying to send email on my behalf? It's like tattletailing on people doing bad news for you. But you don't have to set it to just report. You can set it to quarantine, which that tells a provider, hey, if you get an email and it fails either DKIM or SPF, you should spam it. Quarantine means spam, essentially. Just spam it. It's spam. Or you could say reject. That's the hardest core level. Be like, hey, it failed one of these? Or I think it's an and thing. It's like one or the other. If one or the other passes, it's cool. It's like resilient in that way. But if it fails both, you could just be like, don't even accept the email. Just junk it. It's just gone. It's not even in their spam. That's pretty hardcore. So DMARC has this like leveling up thing where you start with reporting, get all your reports. Then after a few weeks, you know, you look through because then because sometimes it can be like oh look my like my my wordpress is sending emails on my behalf but like i didn't really set Up my wordpress to like have my public key private key and all that um so you might be nervous with that one and be like oh actually i'm gonna allow list that one or or some crap like that or You could just be like screw it i. I'm not going to. I need to route those through another service, too. ([Time 0:35:11](https://share.snipd.com/snip/70505a14-0de5-47b3-9996-39c7138d227e)) - **Domain Blacklist Took Our Business Offline** - Paravel experienced deliverability collapse when a team member's account was abused and the domain got blacklisted, causing prolonged recovery work. - Recovering a blocked domain was slow and costly, proving SPF/DKIM/DMARC are business-critical. Transcript: Chris Coyier We basically had to just keep proving we're real and not spammers. But once they get your email address, and I can set up a mail server and send email as you, Chris. I can make one PHP file that's five lines long that sends email as you all day, the email, the valid email address is a problem, but then you pair a valid email with like known correspondent Or something like known person in your email. Like that's like a, you know, that gets a little more like a little riskier. And so anyway, we were just kind of like, to like fight the spam like a bunch you know it was it was kind of difficult but you know and then the whole domain the whole like paravel domain like Went down you know just because it was just like we were labeled bad guys or whatever you know so um uh yeah i mean i i suppose like it qualifies as some kind of hack, but I don't really think It. I think it was just like a, what you would call it, like just a service that's validated the email and then stole the like your contact list or whatever or something. Yeah, I get it. He got on the naughty list. Dave Rupert And that's one thing if it's just like your, your personal email or the domain of your design business or whatever, that's really bad. But if it's your web app, it's really, really, really bad. Soup's bad. Yeah. ([Time 0:42:27](https://share.snipd.com/snip/9d28477f-b489-42c3-aceb-5132005b1855)) - **Build Dark Mode With Semantic Paired Colors** - Treat dark mode as a major feature and design a semantic color system with paired light/dark values instead of inverting colors. - Reduce color tokens, use semantic variables (background, elevated, danger) and test shadows and contrast extensively. Transcript: Dave Rupert Hi, guys. Love the show. Long time listener. High five, Chris. Thanks for being a listener of the show. I'd like to ask how you go about adding a dark mode to a site. I've done dark modes where you use invert and hue rotate filters. You got color scheme, light, dark going on. This works okay. But if your site has more nuance to the design, like shadows, then inverting results in a light glow, which is just weird. Do you guys use dark gray as the base so you can still use dark shadows? Any advice? All that is great thinking. Invert is okay on some stuff, but images looks really weird. And yeah, your color scheme kind of helps with some of the basics, like your scroll bars and your inputs and stuff. Most browsers give you, depending on what the OS theme is, it can change accordingly to that. But you have some control over it too. All this gets more complicated if you're allowing the user to change between light and dark mode, or if you're just falling back to what the OS has, that's a huge decision. The second you're controlling it, you just have a ton more work to do. And I know what you're saying about shadows. Those are particularly weird. I would say there's just so we've just scratched the surface of this. And I would my whole point with this is that this is so complicated that you should treat it as a major feature. And that there don't look for a little shortcut or some easy way to say, hey, we've got light and dark mode now. Even though those things that we can't mention during this show love to like throw in a little switcher for this. And you're like, get out of here. This is such a complicated thing. Anyway. Anyway, I'm just saying that like it, there is a ton of nuance to this and it's easy to get wrong and it's easy to trick your brain into thinking that this is easy and stuff. And it just isn't. I'd say it's just going to be a big thing for the rest of the existence of this website. If you decide to have light and dark themes, it's just a ton of work. It's going to require testing forever. It's easy to get wrong and just know that you're in for a major feature to have it. Sorry if that sounds gnarly, but I think that's just what it is. There's just, if it's important to you, great, do it. It's going to be hard. I would agree. Nothing's free. Chris Coyier Um, so I, I'm having great experience with light dark like color scheme light dark and then you use the light dark function yeah so pretty nice and then you but you have to reprogram your Brain i'm not using color red uh 500 i'm using some you know like some sort of semantic layer like color warning, you know, or danger. And this is my danger color. And it has a light and a dark appearance, like all colors on your site are now two light and dark colors. Like, and so what you're going to want to do is if you like open up, what is those, those like CSS stats or whatever? There's actually edge has it too. What's it called? Oh, it's in the like extras or something. There's like a CSS, like a tool, a view quick panel. It's in the quick panel. Oh no. Dave Rupert What's it called? I don't know what you're talking about. It's just a way to emulate it. Yeah. Like, like it's basically like one of those, oh, what's it? Chris Coyier There's like a CSS Stat Collector famous. Give me one second. CSS Stats. There was a CSS Stats app. And then I feel like there's another one that has like somebody's name, like Merlin or something. Dave Rupert But, oh. There's like Project Wallace and all that. Project Wallace is what I was thinking of. Chris Coyier It's a dude's name. Yes. Uh, Wallace, project Wallace, um, sitting here knowing the answer, making you struggle, making me a little like a frigging idiot out of my pocket. No, uh, project Wallace is a great one. So it's basically like, like if you run your site through that and you have like 7,000 colors on your website, you're now into a color refactoring situation. Because that's like each light-dark combo can be a problem, right? And so like now you have to like be like, hey, what colors actually do we need? What are similar? Can we merge those down? And so, you know, you have to think of color now as like this system, a, that exists in both light and dark and like, what is appropriate. And so like, and so the less colors you have, the easier that is to manage. And so that's where I'd probably start. Like, you know, like instead of 2000 background colors, we have five, you know, or something like that so think about that um you know semantic variables are your way out of it i mean the Dave Rupert More and more the bigger your site already is either in terms of just general scope or like how many how many colors you have essentially everyone needs to get looked at everything every Nook and cranny of your entire site and then it would be nice if you didn't have to basically do if statements you know what you're hoping is that it's not it's you know every single color Background color shadow color border color or whatever right next to it has a like if dark mode then right hopefully you can have a better right ideally better system than that you're Chris Coyier Like you know you have these semantic variables of colors that represent whatever background color whatever base background color you know elevated background color or something Like that like you have three or four of those and then your foreground colors mac like make sure they have the sufficient contrast on top of that background color set and then you just Kind of keep stacking these rules border colors all like make sure they're bordery enough to make past border contrast or whatever and you know um you know and maybe you're going gonna Come up with like i'm thinking of like code pen like you guys are pretty black on black you know but like uh you know you have occasionally like a pop of yellow or a pop of green or something That shows up rainbow you know like just yeah it can be a little dangerous because yeah yeah i mean yellow sucks in light mode so what do you do like how? Dave Rupert It's going to, you essentially have to make it a little like muddier than you want it to be, to be a color contrast. Kind of gold or whatever, like a mud gold. Yeah, it's sort of doable, but whatever. And then the temptation is like, you know, don't go full black, don't go full white. And you don't go full white, you have to go even muddier with the gold to to get it and it's just the way it is yeah so yeah i mean the chance there's a hundred percent chance that you have just A couple of you're gonna find places where somebody set a color ([Time 0:47:18](https://share.snipd.com/snip/11e4c042-89e4-4c95-b145-5713731fcaf9)) - **Fewer Semantic Colors Make Dual Themes Manageable** - Fewer, semantic color variables make dual-theme maintenance feasible by limiting permutations you must adapt for light and dark. - Project Wallace/CSS Stats helps find excessive unique colors before refactoring. Transcript: Chris Coyier Of. It's a dude's name. Yes. Uh, Wallace, project Wallace, um, sitting here knowing the answer, making you struggle, making me a little like a frigging idiot out of my pocket. No, uh, project Wallace is a great one. So it's basically like, like if you run your site through that and you have like 7,000 colors on your website, you're now into a color refactoring situation. Because that's like each light-dark combo can be a problem, right? And so like now you have to like be like, hey, what colors actually do we need? What are similar? Can we merge those down? And so, you know, you have to think of color now as like this system, a, that exists in both light and dark and like, what is appropriate. And so like, and so the less colors you have, the easier that is to manage. And so that's where I'd probably start. ([Time 0:51:07](https://share.snipd.com/snip/10b9f12e-3ea4-460c-a94c-c1b89f6ab0fa)) - **Prevent FART By Applying Theme Before First Paint** - Avoid Flash Of Inaccurate Color Theme (FART) by determining user theme preference before initial paint when possible. - Persist theme choice in local storage or server and apply it early to prevent jarring swaps. Transcript: Chris Coyier Yeah. Dave Rupert Which is a dangerous situation. You want before any paint happens on your website, you want to know if you're in light or dark mode. And it's possible that you don't if you have a kind of a client side rendered app and that that has to like ask some data source or something. Because it's one thing to be like, okay, I'm going to respect the system's preference, you know, at media queries and the prefers settings and all that. That's nice. You should respect that if you can. But it's possible that the user just is in a different browser or set it to be a different way. There's always this thing that like they, they have a preference, but for your website, they have a different preference for some reason, just any given user. Anyway, you just can't trust that if you're in charge, if you have saved data anywhere, local storage, index DB in your own database, I don't know, in the URL, any source that, says which Color theme it is you have to kind of like wait until you absolutely know what that is and then you can paint the screen because you don't want to like paint the screen and then be like oh Chris Coyier Shoot that's different and have it go yeah yeah do a like a yoink, like a whoop, go fix it. That's what a fart is. Yeah. Dave Rupert It's fine. Anyway, it's still coming up. It's still, it still comes up, believe it or not. Chris Coyier I typed it into a search and it did. I'm riding the line here on our no-no list, but it gave me a generated response that says why fart happens. And that is beautiful. And so it's like, you kind of won the game, Chris. ([Time 0:56:05](https://share.snipd.com/snip/f51b027a-3c01-4b75-9687-7f0ec0084060))