Sorry to keep delaying the Astro video, it will be good I promise 💖 So how do you guys do emails? I think react-email looks quite promising tbh and I will keep my eyes on it
or perhaps more accurately, tables within tables within yet. more. tables. 😭 soon though, once the new outlook render engine takes over, I hear tables will be a thing of the too recent past-- let's hope.
@@badcatdesign Honestly, I don't find it all that bad even now. You can't use convenient stuff like flex or grid, but using tables and inline elements properly, you'll still be able to achieve nice results. Unless you need overly specific positioning, multiple tables isn't really necessary. You can also use some good old deprecated HTML attributes as they all have good support to adjust the sizes of the columns. I think the issue is more that it's kind of a lost art since modern CSS is far more convenient to use as you can make broad, sweeping adjustments far easier, instead of using inline-styling for each element. Some of the things that were kind of tricky like positioning details also became a lot easier with position: relative and position: absolute. Also, I do want to be optimistic about the new render engine, but just like IE11 was what held web development back, iOS is the new IE11. Now it's an entire operating system that is problematic because they enforce usage of their own components even in a browser like Chrome, which means the same version of Chrome can be completely broken just because of the operating system.
@@CottidaeSEA Oh boy i love me some tables. Been the designated email coder at work and i've gotten lost in my nested tables so many times. I've resorted to basically just make emails that look pretty on outlook, gmail & spark, and then every other client will get what they get. Some clients are simply impossible (windows 10 mail desktop app) just renders the text and says fuck you to everything else.
Because you're using the @react-email package, you want the components they are exporting instead, as it may have logic inside the component that makes things work nicer with the email. Using basic tags will just give the basic element without anything fancy
TypeError: Cannot read properties of null (reading '1'). This error message appears when I choose one of the email template. Anybody knows how to fix it?
Anybody else running into Next 13 expecting the email template component to be flagged "use client," and being blocked from rendering the component in the API endpoint in your Resend request? This is giving an error: "Attempted to call the default export of from the server but it's on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component." Pretty new to Next so might be an easy fix, but it's got me stumped today. If I run a Test Email SSR component without react-email/components happening I get everything working as expected, so I know it's the client vs server thing causing the issue.
Well you kind of need to or they wont work in various email clients. In email html you need to use tables, inline styles and all those goodies from late 90's
Sorry to keep delaying the Astro video, it will be good I promise 💖
So how do you guys do emails? I think react-email looks quite promising tbh and I will keep my eyes on it
What monitor do you use that is off to the side in the video ?
hello sir I am from India , I always watching your videos .
If you were around back in the early 00s, you'd already know how to create emails. Tables, baby!
or perhaps more accurately, tables within tables within yet. more. tables. 😭 soon though, once the new outlook render engine takes over, I hear tables will be a thing of the too recent past-- let's hope.
@@badcatdesign I'll believe it when I see it...they've been super stubborn about it for years.
@@badcatdesign Honestly, I don't find it all that bad even now. You can't use convenient stuff like flex or grid, but using tables and inline elements properly, you'll still be able to achieve nice results. Unless you need overly specific positioning, multiple tables isn't really necessary. You can also use some good old deprecated HTML attributes as they all have good support to adjust the sizes of the columns.
I think the issue is more that it's kind of a lost art since modern CSS is far more convenient to use as you can make broad, sweeping adjustments far easier, instead of using inline-styling for each element. Some of the things that were kind of tricky like positioning details also became a lot easier with position: relative and position: absolute.
Also, I do want to be optimistic about the new render engine, but just like IE11 was what held web development back, iOS is the new IE11. Now it's an entire operating system that is problematic because they enforce usage of their own components even in a browser like Chrome, which means the same version of Chrome can be completely broken just because of the operating system.
@@CottidaeSEA Oh boy i love me some tables. Been the designated email coder at work and i've gotten lost in my nested tables so many times. I've resorted to basically just make emails that look pretty on outlook, gmail & spark, and then every other client will get what they get. Some clients are simply impossible (windows 10 mail desktop app) just renders the text and says fuck you to everything else.
@@MrBa143 Yeah, just like with browsers you kind of have to choose how compatible you want things to be.
Hmm, you have subfolder “strapon” in “LEARNING” folder.. do you plan make a video on that ? ;)
You have such a lovely personality. You always put me into a better mood!
"Hello there... Jonathan...hmm, fuk it Jonathan" 😂
And what if I've only got a simple React Frontend and a ExpressJs Backend? Do I have to install react on my backend then?
How can we add media queries in react-email?
will this work with plain react and express?
can i create a newsletter using this?
First thing i heard about html emails, theres a lot of opportunities to get hired in this, any change to get a course about this?
Thank you for that, can you do something with webRTC and React
is there a way to just export the react code in html with tables? (for use it in another mailing platform)?
You can render it whereever, for exemple aws ses
Sometimes the email sent does not look like the preview
can i create a e-mail using it and then send it by my api?
Hi, please is there any diference when I use , tags instead of importing and using it like you?
Because you're using the @react-email package, you want the components they are exporting instead, as it may have logic inside the component that makes things work nicer with the email.
Using basic tags will just give the basic element without anything fancy
Which VS Code extension gives the size of the imported components? (the 'gzipped [X]kb' part)
wix.vscode-import-cost
Import Cost
Is there a benefit to using this over MJML?
Nope. IMO it's overly complex...email development isn't web development. It's cool but not necessary.
MJML is all you need
TypeError: Cannot read properties of null (reading '1'). This error message appears when I choose one of the email template. Anybody knows how to fix it?
wow did you upgrade quality of video? you are even more beautifuler than usual
Great video, Ed!
Anybody else running into Next 13 expecting the email template component to be flagged "use client," and being blocked from rendering the component in the API endpoint in your Resend request? This is giving an error: "Attempted to call the default export of from the server but it's on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component." Pretty new to Next so might be an easy fix, but it's got me stumped today. If I run a Test Email SSR component without react-email/components happening I get everything working as expected, so I know it's the client vs server thing causing the issue.
I got the same error, he invoked the function which was not how it was done in the docs. they added the component as an html tag.
As an email dev of 11 years, please test your renders on litmus or email on acid before sending any emails. This isnt going to be a magic bullet.
That''s pretty neat!
SLOOOOOOOOOOOOOOW with tailwind omg!
Hi buddy, What extension you should used for VS code Theme?
love your video maaaan. grrreat.
Thank you ! Very useful
Hi, can you make a video on how to send emails? it's for my mom. Tanks! Bye!
i think you need a stamp first
This is super helpful
Poor Jonathan lmfao hahahaha!
30mb weight library...
amazing video but with only react.js won't work
Thanks ❤❤❤❤❤
Nice🎉 thanks bro
or avoid everything and write it manualy anyway. mda
Why would you decide to use TS instead of JS in a JS library, this is fucked.
thank youuuuuuuuuuuuuuuuu💗💗
Be better if you slowed down and researched before doing the video.
I love you man
I wonder what Jonathan did to you 🤣
That's a Goody , 👍
🤔Hmm. I don't like that their styling and creating layout for these email templates using HTML tables.
Well you kind of need to or they wont work in various email clients.
In email html you need to use tables, inline styles and all those goodies from late 90's
All you need is MJML to get started. Much simpler than using React for email. Email is simple. It's not web development.
❤
Second
who?
@@RMCProductions me
@@dev_franqqi no who asked
@@RMCProductions go and ask your grandfather
Hahahaha
Why do you try and simplify everything. In a corporate environment nothing is as simple as you state 😢
we are graphics designers if you want any service like thumbnails, video editing so contact us