They Fixed Email?? OMG

have you ever had to send an email via code before if so I'm sorry it's always been pretty painful to be frank I am willing to pay people to do our email templates for us it's one of the few things I'll still reach to like Fiverr or Contracting stuff for because formatting an email is one of the hardest things I've ever had to do it's kind of HTML but isn't it kind of supports tables but doesn't and it certainly doesn't support any new methods of formatting things correctly with CSS and HTML and if you want those emails to look good in things like Outlook good luck seriously though I am horrified by the current state of email and it is hilariously difficult to just send a decent looking email from your web application until now the recent team has been hard at work on making email way more accessible for all web developers but react devs in particular the main project that they built was react email or which is an open source library to use react to Define an email similar to how react native lets you render native applications through react or react 3 fiber lets you render 3D stuff on the canvas react email lets you use react to generate in email HTML instead of whatever chaos we used to deal with it's so much nicer to work with that they realize that hosting was the remaining problem and similar to how versell realized nexjs was too hard to host they realized that sending emails was too hard to do with existing services and as well as react email works on things like send grid they wanted to do something better it's only fair that I disclose that I am an investor in resend I am really excited by what Xeno and team is doing they did not pay me to make this video I am not sponsored I'm just sharing this because I'm genuinely excited which is the same reason that I invested in them so let's take a look at what resend is building if you haven't already seen react email it's dope I'm sure there's an example yep here const email return button href is example style is whatever click me they have docs for all the different elements that they support if you're used to mostly using react for the web it's weird not having access to div paragraph image tags and all the things you normally are used to but if you've ever done react native this should look very familiar importing all these types of things because react email Isn't using react Dom react email is an alternative to react Dom that lets you render email ready elements so as long as you use the elements they provide not only will it work they'll tell you which email clients are properly supported do they have email templates uh where would one find said email templates explore components assuming examples that's cool so here's an example of like the join my project on versel email and if that goes away we can look at the source and see looks a lot like react code HTML had preview text Tailwind which lets you your Tailwind is a element that you can wrap around your content and then you have access to Tailwind classes and it will do the right thing you have sections think of them kind of like divs but they'll split up properly inside of your different email clients heading lets you put a nice fancy title on the top the main benefit of using these is kind of like using H1 and other tags is it's really accessible so if somebody's using the screen reader this will work just fine but you also have your Tailwind syntax if you want it to format and look really good with what is output really dope that they have all of these elements and things you might need provided and that you're creating a component that you pass values to just like any other component react and now it's that easy to send an email you pass resend the versel invite user email component with the props that you want and that's now an email you can send so convenient and you can even see the HTML that it outputs for this email and see how miserably formatted it is because if you've ever written one of these before yeah it's all done with weird table and then they even have a plain text output too for the email clients that don't support the HTML beautiful so pumped that they have this level of detail here's a recreation of the twitch password reset email this one I noticed a little bug here the click here has the space go there with the link instead of being before it let's see if we can find that in here yeah the this space should have been outside not inside but that like the fact that this just works exactly as expected in HTML ish syntax it's great this is awesome it's that simple to write and format an email this one doesn't use tail and this one uses more traditional CSS formatting kind of because they're creating these so they would be nice to see typescript defs here but it all works and theoretically you have a type error if you pass out a style that isn't formatted correct so really cool to see I chances are if you've had to write an email in code before you've went through a lot of pain do some of the stuff this just does for you by default so convenient and programmatic emails where like you need to change the username you need to put a custom login code stuff like that and your template just being a react component makes so much sense but that's not what launched this has been out for a bit what just launched isn't react email which is launched is recent which is a way for any developer to send emails they wrote in react email super easy to get started I haven't even signed up yet YOLO add API key I actually want to send an email right now because I'm lazy but yeah resend.emails dot send you can see all the emails that have been sent here as well as the docs on how to do it let's take a look at that and see how to do it with react too late please spamming that's hilarious yeah Lee Rob hacking me with that API key dang anyways we hop into here I bet there's a look at that there's a react key that you can pass your email template to and then this is It's a component which if you don't already know components are just functions so you pass your input here and there you go that's how easy it is to send an email you have a from address to address subject HTML if you want to pass it HTML or just pass the react instead it's great they even have an app router example here with get I wouldn't put an email send on a get I would put that on a post personally just saying things a little scary to put destructive actions like email sends on a get come on guys anyways yeah seems like they have sdks for pretty much anything you would need technically you don't need much of an SDK for this but like they support PHP already they support Ruby already they support python go even Elixir so for us fellow Elixir fan boys resend dot email you're good really cool to see the craziest part though isn't what they support or just their DX it's their pricing the free tier is insane 3000 emails a month but it is capped at 100 a day but 100 emails a day for free is nuts well this is particularly useful for outside of being cheap is spinning up a second app that is your Dev experience it's very very good value I was impressed to see 3 000 emails a month and if I had to spin up a side like Dev project to do things in staging versus prod that's a great deal and if we bump pricing here I wish they would just show us per email pricing somewhere I'm assuming there's no yeah all pro plans come with unlimited domains huge interesting so you can get up to 250k emails for 80 bucks a month but then 300K bumps to 200. it's pricing changing is interesting but yeah up to 250k emails for 80 bucks a month that's nuts if you don't want to have to worry about everything from spam in boxes to templating for your emails to supporting whatever weird backend your company moves to in the future resend is an increasingly enticing option I invested for a reason I'm really confident in the team and what they're building if you haven't already checked it out now it's a great time to they just went General access today so get in go give resend a shot I couldn't be more hyped with what they're working on and I'd love for you all to try it let me know what you think and if you want to hear a bit more about why email sucks here's a video about all the things Google's doing to make email impossible for developers thank you guys as always peace notes

Channel: Theo - t3․gg

Views: 69,261

Keywords: web development, full stack, typescript, javascript, react, programming, programmer, theo, t3 stack, t3, t3.gg, t3dotgg

Id: Xa1WaSPu5K8

Length: 7min 12sec (432 seconds)

Published: Sat Jun 17 2023