J.D Nicholls
Founding Full-Stack Web3 Engineer at @baxusco | Digital nomad 🎒 | Mentor 👨🏫 | Speaker 🗣️ | Developer 👨💻 | Creator of @proyecto26 #opensource #developer
Demo 👨💻
Remix and SSR 🔥
1. Server Side Rendering for SEO improvements.
2. Content and Meta tags for social media.
3. Performance, Traffic and Page Rank- link.
4. Remix vs Next.js - comparison.
Google crawler and other bots will visit a site via a hyperlink. The crawler then reads the site's content and embedded links before following the links away from the site.
SEO Improvements
A crawler is the name given to a program used by search engines that traverses the internet in order to collect and index data.
Client Side Rendering
baxus.co (Today)
Server Side Rendering
baxus.co (Tomorrow)
Monorepo structure with Nx 📦
1. Developer Experience:
- Code sharing
- Code generation
- Dependency graph visualization
TailwindCSS & PostCSS for styling ❤️
1. Developer Experience - Online Playground
2. Reusable UI Components - Tailwind Elements
3. Time to Market - Figma plugins for code generation.
Email Templates 📩
1. EAT-2557- Align ku email confirmations with figma designs:
- Using mjml framework to create modules (templates) for our emails (Live editor)
- Also there are free useful templates for inspiration.
Header
<mj-section background-color="#FFFFFF" border-top="3px solid #F05123">
<mj-column>
<mj-image
align="left"
width="190px"
src="https://int-kitchenunited.imgix.net/original/1602023109284-kitchenunited-mix-logo-main-color_159x45_72pxdpi-1.png"
css-class="logo"
/>
</mj-column>
</mj-section>Greeting
<mj-section background-color="#FFFFFF">
<mj-column>
<mj-text
font-weight="bold"
font-style="normal"
color="#333333"
font-family="Roboto"
font-size="24px"
>
Hi ${username},
</mj-text>
<mj-text
font-style="normal"
font-weight="regular"
letter-spacing="0.04px"
color="#333333"
line-height="140.9%"
font-family="#333333"
font-size="16px"
>
Thanks for using Mix. This email is the receipt for your purchase. No payment is due.
</mj-text>
</mj-column>
</mj-section>Order Information
<mj-section padding-top="0" background-color="#FFFFFF">
<mj-column>
<mj-text
font-weight="bold"
font-style="normal"
color="#333333"
font-family="Roboto"
font-size="14px"
letter-spacing="0.04px"
>
Order Number: 1636052451992
</mj-text>
<mj-text
font-style="normal"
font-weight="normal"
color="#333333"
font-family="Roboto"
font-size="12px"
letter-spacing="0.04px"
>
<b>Delivery type: </b>ASAP
</mj-text>
</mj-column>
<mj-column>
<mj-text
align="right"
font-weight="bold"
font-style="normal"
color="#333333"
font-family="Roboto"
font-size="14px"
letter-spacing="0.04px"
>
2021-11-04 12:20:00
</mj-text>
</mj-column>
</mj-section>Order Description
<mj-section padding-top="0" background-color="#FFFFFF">
<mj-column>
<mj-text
font-weight="bold"
font-style="normal"
padding-top="0"
padding-bottom="0px"
color="#333333"
font-family="Roboto"
font-size="14px"
letter-spacing="0.04px"
>
Burger King
</mj-text>
<mj-table
cellpadding="10px"
padding-top="0"
padding-bottom="0px"
color="#333333"
font-family="Roboto"
font-size="14px"
line-height="140.9%"
>
<tr style="border-bottom:1px solid #E0E0E0;">
<th style="color:#828282;">Description</th>
<th style="width:70px;color:#828282;text-align:right;padding: 0 0 0 15px;">Amount</th>
</tr>
<tr>
<td style="text-align:left;padding: 10px 0px;vertical-align:top">
1 x Bacon King
<ul style="padding: 0px 20px;">
<li>No Mayo</li>
</ul>
</td>
<td style="text-align:right;padding: 10px 0px;vertical-align:top">
7.99
</td>
</tr>
<tr>
<td style="text-align:left;padding: 10px 0px;vertical-align:top">
1 x 8 Pc Cheesy Tots
</td>
<td style="text-align:right;padding: 10px 0px;vertical-align:top">
2.49
</td>
</tr>
<tr style="border-top:1px solid #E0E0E0;text-align:center;padding:20px 0;font-size:16px;font-weight:bold;">
<td style="padding-left:40px;">Total</td>
<td style="text-align:right;padding: 0 0 0 15px;">
11.55
</td>
</tr>
</mj-table>
</mj-column>
</mj-section>Pickup information
<mj-section padding-top="0" background-color="#FFFFFF">
<mj-column padding-left="25px" padding-right="25px" inner-background-color="#ECF1F7">
<mj-text
padding-top="25px"
font-style="normal"
font-weight="bold"
color="#333333"
font-family="Roboto"
font-size="14px"
letter-spacing="0.04px"
>
Order for Pickup
</mj-text>
<mj-text
padding-top="0"
font-style="normal"
font-weight="regular"
color="#333333"
font-family="Roboto"
font-size="14px"
letter-spacing="0.04px"
>
Order ready <b>Today, Thursday November 4</b> at <b>12:20 pm</b>
</mj-text>
<mj-text
padding-top="0"
padding-bottom="25px"
font-style="normal"
font-weight="regular"
color="#333333"
font-family="Roboto"
font-size="14px"
letter-spacing="0.04px"
>
Please have your order number ready when picking up orders.
</mj-text>
</mj-column>
</mj-section>Delivery information
<mj-section padding-top="0" background-color="#FFFFFF">
<mj-column padding-left="25px" padding-right="25px" inner-background-color="#ECF1F7">
<mj-table
padding-top="25px"
padding-bottom="25px"
color="#333333"
line-height="140.9%"
font-family="Roboto"
font-size="12px"
>
<tr style="text-align:left;border-bottom: 5px solid transparent;">
<th>Picked up from</th>
<th>Delivered to</th>
</tr>
<tr>
<td>55 S. Madison Ave</td>
<td>undefined</td>
</tr>
</mj-table>
</mj-column>
</mj-section><mjml>
<mj-head>
<mj-style inline="inline">
.logo img {
object-fit: contain;
}
</mj-style>
</mj-head>
<mj-body background-color="#F2F2F2">
<mj-section background-color="#FFFFFF" border-top="3px solid #F05123">
<mj-column>
<mj-image
align="left"
width="190px"
src="https://int-kitchenunited.imgix.net/original/1602023109284-kitchenunited-mix-logo-main-color_159x45_72pxdpi-1.png"
css-class="logo"
/>
</mj-column>
</mj-section>
<mj-section background-color="#FFFFFF">
<mj-column>
<mj-text
font-weight="bold"
font-style="normal"
color="#333333"
font-family="Roboto"
font-size="24px"
>
Hi Juan David Nicholls Cardona,
</mj-text>
<mj-text
font-style="normal"
font-weight="regular"
letter-spacing="0.04px"
color="#333333"
line-height="140.9%"
font-family="Roboto"
font-size="16px"
>
Thanks for using Mix. This email is the receipt for your purchase. No payment is due.
</mj-text>
</mj-column>
</mj-section>
<mj-section padding-top="0" background-color="#FFFFFF">
<mj-column>
<mj-text
font-weight="bold"
font-style="normal"
color="#333333"
font-family="Roboto"
font-size="14px"
letter-spacing="0.04px"
>
Order Number: 1636052451992
</mj-text>
<mj-text
font-style="normal"
font-weight="normal"
color="#333333"
font-family="Roboto"
font-size="12px"
letter-spacing="0.04px"
>
<b>Delivery type: </b>ASAP
</mj-text>
</mj-column>
<mj-column>
<mj-text
align="right"
font-weight="bold"
font-style="normal"
color="#333333"
font-family="Roboto"
font-size="14px"
letter-spacing="0.04px"
>
2021-11-04 12:20:00
</mj-text>
</mj-column>
</mj-section>
<mj-section padding-top="0" background-color="#FFFFFF">
<mj-column padding-left="25px" padding-right="25px" inner-background-color="#ECF1F7">
<mj-text
padding-top="25px"
font-style="normal"
font-weight="bold"
color="#333333"
font-family="Roboto"
font-size="14px"
letter-spacing="0.04px"
>
Order for Pickup
</mj-text>
<mj-text
padding-top="0"
font-style="normal"
font-weight="regular"
color="#333333"
font-family="Roboto"
font-size="14px"
letter-spacing="0.04px"
>
Order ready <b>Today, Thursday November 4</b> at <b>12:20 pm</b>
</mj-text>
<mj-text
padding-top="0"
padding-bottom="25px"
font-style="normal"
font-weight="regular"
color="#333333"
font-family="Roboto"
font-size="14px"
letter-spacing="0.04px"
>
Please have your order number ready when picking up orders.
</mj-text>
</mj-column>
</mj-section>
<mj-section padding-top="0" background-color="#FFFFFF">
<mj-column>
<mj-text
font-weight="bold"
font-style="normal"
padding-top="0"
padding-bottom="0px"
color="#333333"
font-family="Roboto"
font-size="14px"
letter-spacing="0.04px"
>
Burger King
</mj-text>
<mj-table
cellpadding="10px"
padding-top="0"
padding-bottom="0px"
color="#333333"
font-family="Roboto"
font-size="14px"
line-height="140.9%"
>
<tr style="border-bottom:1px solid #E0E0E0;">
<th style="color:#828282;">Description</th>
<th style="width:70px;color:#828282;text-align:right;padding: 0 0 0 15px;">Amount</th>
</tr>
<tr>
<td style="text-align:left;padding: 10px 0px;vertical-align:top">
1 x Bacon King
<ul style="padding: 0px 20px;">
<li>No Mayo</li>
</ul>
</td>
<td style="text-align:right;padding: 10px 0px;vertical-align:top">
7.99
</td>
</tr>
<tr>
<td style="text-align:left;padding: 10px 0px;vertical-align:top">
1 x 8 Pc Cheesy Tots
</td>
<td style="text-align:right;padding: 10px 0px;vertical-align:top">
2.49
</td>
</tr>
<tr style="border-top:1px solid #E0E0E0;text-align:center;padding:20px 0;font-size:16px;font-weight:bold;">
<td style="padding-left:40px;">Total</td>
<td style="text-align:right;padding: 0 0 0 15px;">
11.55
</td>
</tr>
</mj-table>
</mj-column>
</mj-section>
<mj-section padding-top="0" background-color="#FFFFFF">
<mj-column>
<mj-text
font-style="normal"
font-weight="regular"
color="#333333"
line-height="140.9%"
font-family="Roboto"
font-size="14px"
letter-spacing="0.04px"
>
If you have any questions about this receipt, simply reply to this email or reach out to our <a href="#">support team</a> for help.
</mj-text>
<mj-text
font-style="normal"
font-weight="regular"
color="#333333"
line-height="140.9%"
font-family="Roboto"
font-size="14px"
letter-spacing="0.04px"
>
Cheers,<br/>
The Mix Team
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#FFFFFF">
<mj-column>
<mj-divider border-width="1px" border-color="#E0E0E0"></mj-divider>
<mj-text
font-style="normal"
font-weight="regular"
color="#333333"
line-height="140.9%"
font-size="12px"
font-family="Arial"
letter-spacing="0.04px"
>
Need a printable copy for your records? You can <a href="#">download a PDF version.</a>
</mj-text>
</mj-column>
</mj-section>
<mj-section >
<mj-column>
<mj-text
align="center"
font-style="normal"
font-weight="regular"
color="#333333"
line-height="140.9%"
font-size="12px"
font-family="Arial"
letter-spacing="0.04px"
>
© 2021 Mix. All rights reserved.
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>Order Template (Result)
Demo
By J.D Nicholls
