Kevin Powell
Kevin Powell
KPCKevin Powell - Community
Created by Chrislizardc on 10/11/2024 in #front-end
CH vs PX for container queries
I love ch for container queries, but only if I want the content to drive when the layout will change. For example, @container (width > 90ch) for going from a stacked layout to 3 columns, then I know my columns are ~30ch wide at a minimum. Then, if a user has changed the font size (or I have) then I know I won't have super squished columns. If it's more of a layout driven change, then I'd just use pixels
18 replies
KPCKevin Powell - Community
Created by empty on 8/28/2024 in #front-end
How to set max-width to tbody or tr
If you're using it as a learning opportunity, I'd say keep plugging away at it, you'll learn a ton. If you're doing this for something that's going to be used for actual emails being sent out, i'd look into some tools for creating the table for you. https://mjml.io/ is the only one I can think of off the top of my head
15 replies
KPCKevin Powell - Community
Created by empty on 8/28/2024 in #front-end
How to set max-width to tbody or tr
tables are used for layouts because the rendering engines of email clients are old (some of them), so that means we can't use grid or flex to create the layout... but that also means things like custom properties won't work
15 replies
KPCKevin Powell - Community
Created by empty on 8/28/2024 in #front-end
How to set max-width to tbody or tr
you can use divs too 😄
15 replies
KPCKevin Powell - Community
Created by empty on 8/28/2024 in #front-end
How to set max-width to tbody or tr
So:
<div class="wrapper">
<table>
<tbody>
<tr>
<td><img src="./assets/tick.png" alt="Tick Image" /></td>
</tr>
</tbody>
</table>
</div>
<div class="wrapper">
<table>
<tbody>
<tr>
<td><img src="./assets/tick.png" alt="Tick Image" /></td>
</tr>
</tbody>
</table>
</div>
.wrapper {
background-color: var(--clr-secondary);
padding-block: 60px;
padding-inline: 100px;
}

table {
max-width: 586px;
}
.wrapper {
background-color: var(--clr-secondary);
padding-block: 60px;
padding-inline: 100px;
}

table {
max-width: 586px;
}
should work
15 replies
KPCKevin Powell - Community
Created by empty on 8/28/2024 in #front-end
How to set max-width to tbody or tr
you also won't want to use table-layout: fixed; for email... or at least, I don't think you will 😄
15 replies
KPCKevin Powell - Community
Created by empty on 8/28/2024 in #front-end
How to set max-width to tbody or tr
yeah, but you could put the max-width on the .wrapper, and not on the tr/tbody
15 replies
KPCKevin Powell - Community
Created by empty on 8/28/2024 in #front-end
How to set max-width to tbody or tr
Is there a reason you aren't setting .wrapper with a max-width instead? I don't use a lot of tables, but afaik, you can't declare width on a tr or tbody. with the way tables work, having a width on tr doesn't really make sense. I'd have to check the spec, but I think table elements are sort of similar to inline elements in that way
15 replies
KPCKevin Powell - Community
Created by Jake on 8/20/2024 in #front-end
Best email API for Next.js apps?
this can definitely work, but I know a few services that did offer something like this that recently heavily reduced the capacity here. Supabase is the big one. They went from, I think 100 emails/day to 5. I'm not sure if it has to do with the new dmarc stuff, or if they just didnt want to have to deal with email or not, so I don't want to say it's not an option, but when I see this happen I assume there is a reason 😄 again, email is hard, lol. There are ways to do this, but you really need to do your homework and make sure it's done right.
20 replies
KPCKevin Powell - Community
Created by Jake on 8/20/2024 in #front-end
Best email API for Next.js apps?
heads up, I use google workspace and recently had to use it for something that didn't involve setting up a DNS record and it involves going into your primary account 2fa (not the admin account settings, where the smtp stuff is), and adding an app, which creates a 1-time password that isn't saved anywhere, which has to be used as the password... and there is no documentation around this from google as far as I could find. I ended up on some random github issue that helped me solve it.
20 replies
KPCKevin Powell - Community
Created by Berthje on 8/21/2024 in #front-end
How to recreate this component with (optional: TailwindCSS)
I'd organize it a bittlei differently to have the full card like in the image, with a top section or whatever for what I did, and then another part for the text on the bottom
8 replies
KPCKevin Powell - Community
Created by Berthje on 8/21/2024 in #front-end
How to recreate this component with (optional: TailwindCSS)
I'd love to see other people's approaches to this, not sure if I took the best one, but I felt like a mask was the easiest way to fade out the background like that, which meant using a pseudo-element.
8 replies
KPCKevin Powell - Community
Created by Berthje on 8/21/2024 in #front-end
How to recreate this component with (optional: TailwindCSS)
Very quickly thrown together: https://codepen.io/kevinpowell/pen/yLdKdoW
8 replies
KPCKevin Powell - Community
Created by Jake on 8/20/2024 in #front-end
Best email API for Next.js apps?
mailgun or sendgrid are two high-quality services that could work... there are some others too. Looking at mailgun, you'd at minimum need to be on their $35 plan, but for some reason that doesn't include email verifications. You'd want to be protecting your sending reputation, which that does, so you'd want to add that on or go at the higher plan. I think sendgrid is similar, only adding it at higher tiers too... It's all doable, but if it's not an essential feature, I doubt it's worth the amount of trouble it's going to cause, lol. It might be an essential feature, in which case, just know you'll be doing a lot of help for things that have nothing to do with your app. Even if users are knowledgeable, email is a pain in the ass, and different services have different ways of having to set it up, so you end up having to guide users through all of that.
20 replies
KPCKevin Powell - Community
Created by Jake on 8/20/2024 in #front-end
Best email API for Next.js apps?
Email deliverability is a nightmare, and I'd never want to run something that would involve sending emails, lol.
20 replies
KPCKevin Powell - Community
Created by octavia0914 on 8/21/2024 in #front-end
Media Queries
If you're creating a template or a system where a lot of users will be using it for different purposes, with different types of content, then you need to provide a lot of options. If you're working on your own projects, you need breakpoints for when the design needs to be updated... most things I work on (which, to be fair, are very content heavy) tend to need 3 at the most. Also, I generally avoid max-width media queries. There are times for them, but generally, I'd suggest going with min-width as a default, and max-width in situations where it makes sense.
5 replies
KPCKevin Powell - Community
Created by octavia0914 on 8/21/2024 in #front-end
Media Queries
My advice is not to stick to predefined media queries 😄
5 replies
KPCKevin Powell - Community
Created by Jake on 8/20/2024 in #front-end
Best email API for Next.js apps?
Yup! You also need to worry about dmarc these days too, which is for email authentication. It prevents email spoofing, and now several email providers (including gmail) will mark most emails coming in that don't have it set up as spam. There used to be ways around a lot of this, where esp would simply send an email verification and, as long as the user accepted it, you'd be able to send through their domain. I'm pretty sure you can still do this, but it would result in everything going to spam. It's too easy to exploit, so it's not really a viable option anymore. I don't know what exactly you want to do with your app, some more info on that side of things could be useful 🙂
20 replies
KPCKevin Powell - Community
Created by Jake on 8/20/2024 in #front-end
Best email API for Next.js apps?
There are a lot of good services for sending emails from domains you have control of, but having them go out from user domains is a completely different story.
20 replies
KPCKevin Powell - Community
Created by Jake on 8/20/2024 in #front-end
Best email API for Next.js apps?
Email is a bit of a different game and takes a fair amount of configuration from the user.
20 replies