<a href="mailto:name@example.com">name@example.com</a>

Right?

This is, however, the perfect recipe to get spam into your email!

This is how email harvesting works

In order for spambots to get a nice long list of emails to annoy people to click their suspicious-looking links, they use email harvesters to curate these lists. Emails are typically found on websites where people leave theirs to be contacted.

Some people think this is easy to solve simply by masking the email like name[AT]example[DOT]com. This, however, doesn't solve anything due to two things:

1. The mailto link still contains the actual email address as you can't replace it with the one above. Since email harvesters look into the source code of your website, they'd still be able to get your email.
2. Most email harvesters are advanced enough to detect common patterns like [AT] and (AT) and such, so they won't do much.

So, what now?

Encode your email address

Fortunately, there's a way to make your email address unreadable for email harvesters!

You may have seen characters like & and > in HTML before. These are called HTML entities. These are symbols that have been encoded so they won't be mistaken for HTML tags.

However, what not many people know is that you can encode every single character into an HTML entity. And even better, putting these into your hrefs will convert them back into regular text for normal visitors that are visiting your website rather than looking at the source code. It's perfect for this situation!

HTML entities for regular letters are made of HEX encoding. The HTML entities would look like like &#HEXCODE;

Let's do it!

Use this handy tool to convert! Make sure to copy the entire href link, not just your email address!

After that, copy-paste that string into your href and you're done! Here's how it should look like:

<a href="&#x6d;&#x61;&#x69;&#x6c;&#x74;&#x6f;&colon;&#x6e;&#x61;&#x6d;&#x65;&commat;&#x65;&#x78;&#x61;&#x6d;&#x70;&#x6c;&#x65;&period;&#x63;&#x6f;&#x6d;">My email</a>

This makes the whole thing a lot harder to decypher for most email harvesters. That, while still keeping the link clickable for others! On top of that, using inspect element to check the HTML gives you the decoded email, even though the source code has it encoded!

This means that it still ends up being readable for humans.

It's even better if you use some non-traditional way of masking your email address in the actual text, or just don't use your email at all (like in the sample above).

We're all good now! No more disappointments that you think you just got a client but it turns out to be spam!

Thanks for reading! 💻

If you wanna stay up to date with dev, subscribe to my newsletter! I send a couple of articles and resources once a week and will let you know when I've written a new article as well.

Not sure if it's for you? Read a sample newsletter here!

Subscribe here

This website is being hosted on Netlify, which doesn't offer email hosting. Since I wanted to write newsletters, I had to find a way to get a custom email domain!

I'd also decided to use ButtonDown to write newsletters, so I wanted to make sure that everything works smoothly.

Let's get started right away!

Receiving and sending emails

I assume you've already registered your domain (I use NameSilo by the way 😉) and are hosting on Netlify. We'll be adding DNS records through Netlify.

For receiving and sending emails, we'll use Zoho. Zoho's email service has a free plan that includes using your custom domain. If you don't mind not being able to do any IMAP/POP for forwarding, it's the perfect free solution.

1. Register to Zoho

Visit Zoho's pricing page, scroll down to the "Forever Free Plan" and sign up. Write your domain and complete your registration. Don't worry about choosing a name for your admin account, you'll be able to create as many aliases as you like.

2. Add DNS records

Zoho takes you through its onboarding progress, including adding DNS records.

First, we need to verify our domain. Select "Others" from the list of DNS managers. We'll verify the site through a TXT record.

To do to Netlify's DNS settings, go to your Netlify dashboard, select your domain, go to Domain Settings, and then Go to DNS panel under your primary domain's options. Adding a new record gets you a modal where you can fill in the DNS record.

Here's what needs to be filled in (TTL in seconds to be left blank):

• Record type: TXT
• Name: @
• Value: zoho-verification=(code provided by Zoho).zmverify.zoho.eu

It may sometimes take a while before the DNS records get updated, so if the verification doesn't work right away, try again.

Next, we add the MX records. MX (Mail Exchange) records specify the server that should handle emails. Each MX record has its priority number, the lower the number the higher the priority of that server. This means that when an email to the domain is detected, the server with the highest priority will catch it.

Zoho has 3 different MX records in case one of them is down. Here's an overview of all three.

Zoho is one of the few email services that allow you to have MX records from different services. This is the reason why I decided to go for it as Zoho allows you the most freedom when it comes to DNS records.

Lastly, we add SPF (Sender Policy Framework), which is another TXT record. It allows Zoho to send your emails through its server. You'll only be able to receive emails without adding the SPF.

Here's the TXT record that needs to be added:

• Record type: TXT
• Name: @
• Value: v=spf1 include:zoho.eu ~all

This record needs to be modified later in the tutorial during the newsletter setup, but we'll use this for now.

You can also add a DKIM signature to your domain. A DKIM (DomainKeys Identified Mail) signature is a unique identifier for your email address so your emails won't end up in spam, since it verifies that the email hasn't been spoofed. This is optional but highly recommended.

Click on Proceed to Configure DKIM and you'll be taken to another page to create a new selector. The selector's name can be anything you like. Personally, I go for "zoho" to ensure the name won't conflict with anything else I may add in the future.

You'll then have to create a TXT record that contains the following:

• Record type: TXT
• Name: zoho._domainkey (or whatever selector name you've chosen)
• Value: v=DKIM1; k=rsa; p=(your unique key, don't show this anywhere in public!)

3. Create your email aliases (optional)

Now that everything has finally been set up, it's time to create some aliases if you need any.

To create an alias for your existing account, go to Zoho's Control Panel, go to User Details, and select your account. Then, go to Mail Accounts and you'll be able to manage your aliases there.

Zoho allows you to use as many aliases as you like, so feel free to go crazy there.

And that's it! Feel free to test your new email address by sending an email to it and sending one back.

Sending newsletters

I wanted to go for ButtonDown because it's a very generous newsletter service. It's free when you have under 1000 subscribers. You can also generate RSS feeds, and it automatically creates a newsletter archive for you. On top of that, it's very privacy-friendly. Definitely something to appreciate!

Zoho also has its own newsletter service that has a free plan as well, so feel free to check that out if you prefer to stay in the Zoho ecosystem.

1. Register your account and set up your newsletter

Your username will be used to refer to you in newsletters (eg. in the from field), while your email address will be the custom domain used to send your newsletter. The email address you use for the newsletter can be an alias you made in your Zoho account. It doesn't have to be though, especially if you add ButtonDown's MX records. I just think it's more convenient to receive all your emails in one place.

You can change these any time of course.

2. Add DNS records

Yup, we're doing the DNS thing again.

First, we add the MX records. For the same reason as Zoho, it has 2 records so the second can backup the first. ButtonDown doesn't provide any priority numbers, so we have to choose those ourselves.

ButtonDown's MX records aren't necessary since Zoho already manages inbound mails for you, but since some email services check MX records to see whether the email should be in spam or not, so I'd rather just keep them.

In order to avoid the least conflict possible, we put ButtonDown's MX records in an entirely different subdomain. ButtonDown allows its MX records to be put anywhere on your domain. Feel free to choose any subdomain here. Personally, I went for "buttondown".

Next, we add a CNAME record. A CNAME (Canonical Name) record will run a server under the domain you've chosen. In this case, ButtonDown uses Mailgun's CNAME record to be able to track email clicks and opens using Mailgun's API. If you want analytics on your emails, you'll need this.

Lastly, we add a few TXT records. The following is for domain verification:

• Record type: TXT
• Name: smtp._domainkey
• Value: k=rsa; p=(your unique key, don't show this anywhere in public!)

Now we need to do some tinkering. Both Zoho and ButtonDown use SPF for sending emails, and adding both records separately leads to some conflicts, since they check the first SPF that appears and nothing else. This means that all SPFs need to be in one record. We're going have to merge the two.

Delete the current SPF that we've added earlier, since we can't edit records. Instead, add this record:

• Record type: TXT
• Name: @
• Value: v=spf1 include:zoho.eu include:mailgun.org ~all

v=spf1 refers to the type of TXT, ~all refers to the domains being allowed to send anything, and between these two you can include any domains to allow them to send emails.

So now, both Zoho and Mailgun are allowed to send emails. Neat!

Once again, it could take a while for the DNS records to be updated. If the verification doesn't work right away, try again.

And there we go! Not only you have a free custom domain for your email now, you even have an up and running newsletter! ButtonDown is full of options, so make sure to look around and customise it to your audience's needs.

And of course, now that I have a newsletter...

Thanks for reading! 💻

If you wanna stay up to date with dev, subscribe to my newsletter! I send a couple of articles and resources once a week and will let you know when I've written a new article as well.

Subscribe here

And now, I'm finally writing my first post ever. On a brand-new website.

Goals and constraints

I've just started looking for a new job, so I had to make sure I got a newly updated website as soon as possible, while still making this a comfortable space for myself.

So, the site must:

• Be finished within 2 weeks
• Show off my personality and what I enjoy
• Showcase my skills right off the bat
• Use my favourite stack, the JAMstack
• Be usable on devices and browsers that block JavaScript

The design

I already had a general idea of the design last year. The website would be made of windows. The homepage including my little bot tracking your mouse position. It'd have the navigation at the bottom since it's a much more logical location on mobile. It'd have theme options that'd always use any shade of red as its main colour. It'd show your current location on the website for easy navigation.

The terminal-like introduction on my homepage came later. So did the little header on top of the window containing your current location. The idea of the latter was already there at the time. I just didn't know where to place it.

Initially, I was planning to add a lot of different particles and motion in the background to add to the tech-like feeling. However, I decided to leave it as it is now as I started to take a liking its current look while developing. My website should be a place for people to read my articles, so a lot of white space and lack of distracting elements would help a lot with that.

The tools

I've been a huge fan of Eleventy for over a year now, so it was a given that I'd use that to make my website. It's a very lightweight and flexible static site generator that doesn't depend on any JavaScript. It's closer to Jekyll than Gatsby, as you create your pages using markdown files while using nunjucks for templating.

So I'd at least already decided on that. Since I didn't have a lot of time to make this, I had to make a few shortcuts along the way.

I wanted to give the website the feeling that it is a single-page web application by making page transitions. The history API was the answer to this. However, after doing some research, I've found that the history API doesn't come without its caveats and edge-case problems. Instead of taking the time to further research and write code for all of that, I decided to use an already existing plugin, Swup. Not only does Swup deal with page transitions, but it also captures pages in advance when you hover over the links using its "preload plugin". Excellent!

The other plugin I've used is SimpleBar. It's a lightweight plugin that adds cross-browser scrollbars. I simply wanted to make sure the scrollbar looked great on any browser, as the default scrollbar would break the look of these little windows.

These two already saved me enough time that I could code everything else on my own. The themes are saved in LocalStorage. The site also checks in SessionStorage whether you've already visited the homepage in your current session. That way you wouldn't have to go through the entire terminal-like experience again.

The blog

This blog is my space for anything I'd like to share. This means that not only will I talk about dev itself, I may also talk about productivity and career life. Since I'm also into illustration, I'd like to add little drawings to my articles whenever they help convey the message.

The content on dev.to and on this website will be slightly different. Dev.to gets only dev and career-related articles and this website gets the full package. Makes sense huh?

What's next?

There's still a lot that needs to be done on this website. I couldn't do most of these just yet out of time constraints.

Here are some things I plan to do:

• Making the interactive timeline page
• Tackling accessibility
• Adding some extra pages such as my work progress
• Ability to filter the blog by tag
• Adding RSS (it's still relevant, folks!)

My next posts will mainly consist of tutorials related to things I've made for this website. It's still a bit of a mystery of what I'll be doing after that, but I can say for sure I've got a lot of exciting stuff to talk about.

So, until next time!

Oh, and have a pat pat gif of my bot.

Thanks for reading! 💻

If you wanna stay up to date with dev, subscribe to my newsletter! I send a couple of articles and resources once a week and will let you know when I've written a new article as well.

Subscribe here