DEV Community: Sergey Khomushin

What is the fastest email service?

Sergey Khomushin — Wed, 07 Dec 2022 14:28:00 +0000

Hi, we are often asked which service to choose. Which is the fastest? Why is email provider X so slow? We will try to answer these questions in this article.

EmailJS is an abstract high-level layer for a dozen different email providers that allow users to use a single API to send emails directly from code. It can be called the "intermediary" between the client application and the email provider. This service is already used by thousands of customers, and in terms of this comparison, EmailJS is unique.

Disclaimer

The statistic is carried out only for officially added providers. All custom ones will be in "Others".
To connect to providers, either API or SMTP is used. The SMTP protocol is much slower by definition.
The statistic includes personal and transactional services. Transactional services are built for high asynchronous workloads and are usually faster.
The statistic is based on a sample of 30,000 unique users in November 2022.
The email provider is an email service and vice versa.

Top Most Selected

The email provider is most often chosen by customers.

No special discoveries here, with Gmail using over 80%, followed by Outlook with just over 4%. The Mandrill is the least used, which is obvious since the service is very expensive.

Top Most Called

Shows the amount of total traffic for each email service.

The first and second places remained unchanged. However, there are some very noticeable changes in this statistic. The outsider in the previous comparison - Mandrill - has a high traffic.

Top Request Time

And here is the most expected! This comparison will be divided into two groups: personal and transactional, to make the comparison fairer. The less time the request takes, the better.

Personal Services

The Gmail service uses an API, which gives it a huge advantage over other services. Zoho has good performance as the SMTP provider. But the average request processing time for Outlook is three times slower than other participants!

Transactional Services

All comparison participants show low request processing time. Postmark is a bit slower, but Mailjet is the worst on the list.

Summary

I hope you were as interested in the results as we were. And it was also beneficial for us. What conclusions can we draw?

The AOL service has minimal traffic, and customers don't actually use it. It have to be replaced. Any ideas on which one? Maybe ProtonMail?
The Outlook provider is popular with EmailJS clients but has a slow request processing speed. Microsoft has recently released an API for the email service, and we may look into how to use it.
We need to figure out why Mailjet is so slow compared to other providers.

Thanks for reading this article, I'll be happy to read any suggestions for improving future comparisons in the comments.

Why is "npm start" bad for production?

Sergey Khomushin — Sat, 02 Nov 2019 14:52:08 +0000

A large number of documentation and blogs recommend running the server code through npm start, and Amazon AWS documentation is no exception.

Why is it bad?

Let's create a project with common package.json



"sripts": {
  "start": "node server.js"
}

and start our server: npm start.

The server runs, but what about our processes?

OMG! The npm process is not only alive but also uses almost the same amount of memory as our server!

Moreover, if we create our package.json with several tasks:



"sripts": {
  "_serve": "node server.js"
  "start": "config-something.sh && npm run _serve"
}

They are twins...

Solution

Using npm is a great solution for configuring, building, and other short processes. But for the product server, it is better to use node.js directly.

Build your best website on VuePress

Sergey Khomushin — Mon, 30 Sep 2019 14:51:48 +0000

At this moment, there are a large number of different platforms for creating universal applications, and today I'm going to talk about one of them: VuePress

What is VuePress?

First of all, let me quote the documentation:

VuePress is a static site generator... ...Each page generated by VuePress has its own pre-rendered static HTML, providing great loading performance and is SEO-friendly. Yet, once the page is loaded, Vue takes over the static content and turns it into a full Single-Page Application (SPA). Extra pages are fetched on demand as the user navigates around the site.

In simple words, we have a modern generator to create a universal application with the built-in Vue framework.

VuePress is focused on content-centric static sites and provides features tailored for technical documentation out of the box.

And this generator uses built-in markdown for documentation, which allows you to create perfect docs for your product or service in an easy way! That is absolutely awesome, isn't it?

Commercial break

Before we start learning about various VuePress issues, let me introduce EmailJS first, whose website was created on the basis of VuePress. This is exactly why I'm using EmailJS site as an example for this article.

EmailJS service allows you to send emails from javascript with only a couple of clicks! It's definitely a must-have service for every web developer!

To be or not to be

The first thing we see after starting the VuePress project by default, the design is not suitable for a professional solution. And the problem is not the color theme at all.

Customize

To fully customize the theme, we are going to eject the default theme into src folder:

$ vuepress eject src

When the ejection process is done, we can see .vuepress folder with default theme, configs and components.

Architecting

Our website has 5 major sections, which you can find in our navigation panel: Homepage, Faq, Docs, Pricing and Contact Us. Our links depend on folder structures, so let's create these folders in src folder and markdown files for each section:

node_modules
src
|
- .vuepress
- contact-us
  |- README.md
- docs
  |- README.md
- faq
  |- README.md
- pricing
  |- README.md
- README.md
package.json

Now we need to add these sections to our navbar. We can use a VuePress config file: .vuepress -> config.js

...
themeConfig: {
    nav: [{
        text: 'Home',
        link: '/'
    }, {
        text: 'FAQ',
        link: '/faq/'
    }, {
        text: 'Docs',
        link: '/docs/'
    }, {
        text: 'Pricing',
        link: '/pricing/'
    }, {
        text: 'Contact Us',
        link: '/contact-us/'
    }]
...

Pages

Next, run our project and test our links in navbar and you will find everything works except for... distinctive designs and contents are in need.
In order to accomplish that, we can create a pages directory in the theme folder, and implement vue components: ContactUs.vue, Home.vue and etc.

I recommend to move the Page.vue from components to pages. We can use it for our docs section.

And then inject our pages by Vue :is to load dynamic components:

<template>
    <section>
        <component :is="landingPage"/>
    </section>
</template>

<script>
    import Page from '@theme/pages/Page.vue';
    import Home from '@theme/pages/Home.vue';
    import FAQ from '@theme/pages/FAQ.vue';
    import Pricing from '@theme/pages/Pricing.vue';
    import ContactUs from '@theme/pages/ContactUs.vue';

    export default {
        components: {Home, Page, FAQ, Pricing, ContactUs},

        computed: {
            landingPage() {
                return this.$page.frontmatter.landingPage || 'Page';
            }
        }
    }
</script>

Now we just need to declare a landingPage parameter for every markdown file: I use the JSON frontmatter:

---
{
    "landingPage": "Home"
}
---

Palette

To override the style of the default theme or define some color variables, we need to create a palette.styl file in the styles directory.

$accentColor = #FCA253; // primary color
$nprogressColor = #FCA253; // progress bar color
$borderColor = rgba(0, 0, 0, 0.1); // search box, navbar and etc
$textColor = #2C3E50; // main text color
$arrowBgColor = #FCA253; // arrows color in sidebar

Search box

The built-in search engine is looking for all headers in markdown files, but we need it only for our docs section. So how are we going to fix it?

We can set it in index.js, but from my point of view, it's better to set all configs in config.js. We can ask the context for our siteConfig:

// Theme API.
module.exports = (options, ctx) => ({
    plugins: [
        ['@vuepress/search', ctx.siteConfig.searchBox]
    ]
});

config.js:

module.exports = {
    searchBox: {
        test: '/docs'
    }
};

Various plugins can be added to our site exactly the same way. For instance, the Progressive Web App plugin, GA and etc.

Scroll listener: window doesn't exist?

VuePress uses server side to generate HTML files, therefore we can't use window object in create, destroy and computed (!!!) lifecycle methods. However, we can do it in methods, beforeMount and beforeDestroy.

export default {
    methods: {
        handleScroll() {
            this.isSticky = window.pageYOffset < 0;
        }
    },
    beforeMount() {
        window.addEventListener('scroll', this.handleScroll);
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll);
    }
}

And also you can use the ClientOnly wrapper:

<ClientOnly>
    <CookiesBar />
</ClientOnly>

Script per page

It's pretty easy to add meta tags per page, but what about scripts? Well, it's complicate.
As we mentioned above about server side build, we can inject our code in created method and check if it's server side process:

created() {
    if (typeof this.$ssrContext !== 'undefined') {
        let script = '<script type="application/ld+json">{}&lt;/script>';
        this.$ssrContext.userHeadTags += script.replace('&lt;', '<');
    }
}

Vue crashes when it spots a </script>. Maybe there is a better solution, but we can work it around without using the tag script and replace < to < during build time.

Build

By default, VuePress builds the code into .vuepress directory, which is an absolute nuisance! Besides, it's also recommended to disable the cache for the build process.

$ vuepress build src -d dist --no-cache

Conclusion

We've learnt about VuePress, defined the initial architecture for our project, and also created Vue components for each individual page.
There's no doubt that it's one of the best solutions to use VuePress for creating a site with structured documentation. I'll be glad to know if you find my solution is valuable and more efficient.
If there's any question on certain topic regarding VuePress, please make a comment below.

Have a great day!

Please note that version 1.0.2 was used. Perhaps you will find many issues have been resolved in the new version.