Are you changing your emails to a different service/provider (server, host or domain) but want to keep all data as is? You don’t have to do it manually!

The problems of exporting and importing emails manually

Forget about exporting and importing trough webmail, many times those have limits.

You might end exporting without being able to import after (and a backup is no good if you can’t later import it, right?). Dividing an export into many different files, to avoid limits, it’s also a lot of work and can lead to mistakes.

You might even remember to export the “Inbox folder”, but what about others, such as “Sent” or custom ones.

That’s why on this post, I want to share with you a very handy on-line tool, properly called Mailbox Imapsync Online.

How to use Mailbox Imapsync Online to transfer emails automatically

Using Mailbox Imapsync Online couldn’t be simpler:

First, be sure that you have the credentials of the two email addresses.

Extra parameters

If you want, you can also automatically delete the source emails that get transferred – Click on “Show/hide extra parameters” and you’ll see the new option “Move sync” appearing on the left side. This can be useful to avoid the 3GB limit that the tool currently has, on the free version.

Click sync to automatically transfer emails

Then you simply click the green button “Sync or resync”! Keep the window opened and check the console log to be sure that everything is going smoothly. If something breaks, do not worry, simply click again the green button and the process will continue as “Resync” suggests.

Besides automatically transfer emails, there’s more to Mailbox Imapsync Online

Sync between different email addresses

If you look closer to all options, you are not limited to transfer emails between the same email addresses.
So let’s say there’s a new employee in yourcompany called Lucy working in content marketing, her email is lucy.copy@yourcompany.org, the old content marketer was Lauren and her email was lauren.writter@yourcompany.org.
With Mailbox Imapsync Online, you can transfer all of those work related emails, about content marketing, to the new employee.

Just create folders

If you don’t want to transfer all the emails, but want to keep the same structure of another email address, you actually have a checkbox to “Just create folders” during the sync.

Did you know about this tool before? Was this helpful?

Let me know in the comments section below.

I remember searching for something free like this in the past and it wasn’t easy. Until an old hosting provider mentioned it to me, during support. They were more life savers then I care to admit, I hope for you too.

Comments

If you ever tried to change the look and feel of a HTML5 datalist but couldn’t, then this post might be your (delayed) Christmas present 🎄🎁 (I hope you had a great one and close to the ones you love the most)!

What’s the problem of styling a HTML5 datalist?

At the moment of writing, it’s not possible to style a datalist directly.

Hopefully in the future, we will be able to simply use normal CSS like this:

.mr-datalist > * {
    background-color: var(--dark);
    color: var(--light);
}

For now, if you still want to use datalist, there are two ways to do it:

• An easy way, using a class from a front-end toolkit.
• A more manual way, using Vanilla JavaScript.

The CSS code above will work after implementing any of those 2 options.

Some things that might be important to you: 

• These methods might not work on iOS versions prior to the 13th. On those devices, the datalist will not change, working as it does by default.
• Both methods should be future-proof. When HTML5 data lists become easier to style, you can remove the front-end toolkit or the JavaScript code. Just keep the classes and the CSS as is.

With that aside, let’s move on with this tutorial…

The easiest way to style a datalist

You can use a front-end toolkit such as Mr.Utils.

All you have to do is, make sure you are adding the global JavaScript file js/utils.js in your page (or if you don’t want to load the entire toolkit, you can individually add dev/js/utils/utils_components.js).

After that, you need to add the correct class .mr-datalist to your datalist (not to the input) and it will magically transform it into a “search” component.

You can then style it with a CSS code similar to the one shown before.

Style a datalist with code

I mentioned that the easiest way of implementation works like magic, but of course there’s no magic behind it at all, just the correct JavaScript code.

In this post, I’ll share a simplified version of that code with you.

You can either follow the steps or jump directly to the Gist full code.

Feel free to change it to your specific needs.

1- Transform the datalist into an element that can be styled.

document.addEventListener("DOMContentLoaded", function () {
  const mrDataLists = document.querySelectorAll(".mr-datalist");
  for (let id = 0; id < mrDataLists.length; id++) {
    let mrDataList = mrDataLists[id];
    let mrDataListUL = "";
    let mrDataListClone = "";
 
    mrDataListClone =
      mrDataList
        .cloneNode(true)
        .innerHTML.replaceAll("<option", "<li")
        .replaceAll("</option>", "</li>");
    mrDataListUL = document.createElement("ul");
    mrDataListUL.id = mrDataList.id;
    mrDataListUL.className = mrDataList.className;
    mrDataListUL.innerHTML = mrDataListClone;
 
    mrDataList.replaceWith(mrDataListUL);
  }
}

In this first step, we grab all data lists that have the class .mr-datalist, but you can change it to your own.

You can even grab all data lists without exception, by replacing the class .mr-datalist with the property datalist, on the querySelectorAll (Don’t forget to change the CSS code accordingly at the end).

In this example, we transform the datalist into an unordered list. You can change that if you wish, but it should be an element with direct children. Each direct child will be a datalist option.

The replaceWith at the end finishes the transformation, but we are not done yet.

We need to create a similar “search” functionality to the one the HTML5 datalist has.

2- Make the input find content on the element.

document.addEventListener("keyup", function (e) {
  let mrDataListID = "mr-datalist";
  if (e.target.matches('input[list="'+mrDataListID+'"]')) {
    mrSearch(document.getElementById(mrDataListID), e.target);
  }
  e.stopPropagation();
});

In here, I’m assuming we know the ID of the datalist, and that we have it on the input “list” attribute. I’m assuming that because those are needed for the original datalist to work.
In this example, the ID is mr-datalist, set on the mrDataListID variable.

If for some reason you don’t know the ID, there are alternative ways to do it. On Mr.Utils for example, the “Search” component removes the original input, creates a new one and uses nextElementSibling. It does that for a reason, you can check that on the GitHub repository.

As you might notice, we are calling the function mrSearch, which will do the heavy work. 

Here is the function simplified, feel free to rename it to anything you want:

function mrSearch(t, e) {
  //t = Datalist
  //e = Input with list attribute
  let mrSearchChildren = t.children;
  if (mrSearchChildren) {
    if (e.value !== "") {
      t.style.removeProperty("display");
      for (let id = 0; id < mrSearchChildren.length; id++) {
        let mrSearchChild = mrSearchChildren[id];
        if (mrSearchChild.hasAttribute("value")) {
          //If the child does not contain any text, show the value as text.
          if (!mrSearchChild.innerText) {
            mrSearchChild.innerText = mrSearchChild.getAttribute("value");
          }
 
          //Change the input value when clicking on the child.
          mrSearchChild.addEventListener("click", function () {
            e.value = mrSearchChild.getAttribute("value");
          });
        }
        mrSearchChild.style.display = "none";
 
        //Checking the child outerHTML because I want to search text also inside the value attribute. Convert in lowercase to not be case sensitive.
        if (
          mrSearchChild.outerHTML
            .toLowerCase()
            .replace(/[^a-zA-Z0-9 ]/g, "")
            .includes(e.value.toLowerCase().replace(/[^a-zA-Z0-9 ]/g, ""))
        ) {
          mrSearchChild.style.removeProperty("display");
        }
      }
    } else {
      t.style.display = "none";
    }
  }
}

Here we changed the Input value when clicking on the element child (the datalist option that we transformed) and we’ll make the search case-insensitive.

Check the comments inside the code to better understand which parts replicate which datalist “search” feature.

Extra: If you have full control over the original datalist, you probably added a value and text to each option. If you don’t have, then this code as you covered, it copies the value into the text when no text is found.

And that’s it! Now you replicated most datalists’ functionalities and can start styling the element, with a CSS code similar to the one shown before.

3- Take it to the next level (Optional and Advanced)

If you feel inspired, now that you have full control over the code, you can add extra features! Features that not even the original datalist has.

For example:

• Show a message when no result is found.
• Bold the text while it is found on the results.
• If no exact match is found, search by each keyword instead (You can also show a message in that situation).
• Show results only after a minimum number of characters (This is a good idea to avoid connection words and code properties).

I did many of those features for Mr.Utils, you can check the part of the code here.

Might also be a good idea, to track pressing keyboard arrow keys, to select the results and improve accessibility.

Gist full code on how to style a datalist

Working example of styling datalists

I did something very similar to the methods explained above for Rydoo’s Compliance Centre and Marketplace.

I hope you enjoyed this post! I’m not sure that I will be writing something more on the blog before entering the new year, so enjoy the celebrations and let’s enter 2023 with the right footer!! 🥂🎆🥳

Comments

What is a variable?

Variables are very handy strings that, as the name suggests, can vary or change one day. They can be called from many places and in many ways to be used and reused (depending on the coding language).

What makes them handy is: When you need to change one, you only need to change its value in one place, the new value will then pass to every location where you called the variable, by its name.

What to avoid in a variable name?

Even if a variable suggests a change, I see many times developers using names such as $white in SCSS or var(–white) in CSS. This for me doesn’t make any sense… How am I supposed to change to a value other than white?

Even if we can change the colour value, and it visually applies as expected, the code will be illegible. It will be read “white” when it isn’t. For example, it doesn’t make sense to have a #cecece on a $white variable.

It stops being a real variable.

It would be much better to call it $light, so it could be changed to any light colour on future design system changes. You might think this would still limit to a certain type of colour, and you are right, but at least it can vary as the name suggests.

And we could always take this to another level, call it $secondary_colour or $colourTertiary, so we could use any colour, making it future-proof as long as it’s not confused with the main/primary one.

We will recap with more examples below…

Use a standard method on the names

Be consistent when giving a name, stick to one method on all your coding or, at least, depending on the code language.

On PHP, it is typical to use underscores on variables with two or more words, on JavaScript the camel case method is more typical and on CSS the hyphen.

But if you can stick with only one method on all coding languages, it’s even better, I would say.

My favourite nowadays is camel case, so something like this: $colourPrimary.

Make it scalable with a convention!

Another tip, but very optional, is to set a convention to make the variables more scalable.

For instance, start the name with the property type and only then the actual name in camel case. In this situation, you can even combine underscores with camel cases. Here’s what I mean:

• $colour_PrimaryLight.
• $size_Spacing2 (don’t use “margin” on the name, that way you can reuse that size on paddings and font-sizes).
• $size_font_TitleBig (create another “layer” to say that this specific size is to be used only for text).

This will avoid conflicts, mistakes and make certain variables easier to find when you have a lot of them.

Quick recap

Comments

Get mouseover options on the block editor

One of the cool features of Mr.Utils is the ability to easily install it as a WordPress plugin for free.

When you do so, an interface will appear on the block editor, allowing you to easily use the utility classes of this front-end toolkit.

One type of utility class is the mouse hover state, let’s focus on that for this post.

Note: If you prefer, you can install Mr.Utils without the interface and use the classes on each block Advanced section.

Animations

On the Animation section of the Hover tab (zigzag arrow icon) you will find options such as Fade, Slide, Scale and Zoom.

One thing to keep in mind when selecting one of those options is: By default, the animation will only occur when mouse hovering above the element, nothing will happen when mouse hovering outside the element… If you want the animation to rollback when you go outside the element, you must go to the Animation section of the Global tab (first tab) and select the transition type (e.g. Ease In Out).
Once you apply a transition globally, the animation will react to both hover situations.

Live example using Zoom animation

This paragraph block animates on mouseover!

Layout change

On the Layout section of the Hover tab (zigzag arrow icon) you will find options to change the size (width) of a block.

If you want to change the initial size, simply go to the Layout section on the Global tab (first tab) and find the similar option.

By default, the size will change without any transition/animation. If you want the block to change the size smoothly, you must go to the Animation section of the Global tab and select the transition type (e.g. Ease In Out).

Live example of size change

Display changes

On the Display section of the Hover tab (zigzag arrow icon) you will find options to change the visibility type of a block.

Here you can better understand the differences between the visibility types.

With these options, you can make a block semi-opaque or totally opaque on mouseover. To do the latter, you must first put the block semi-opaque by default on the Display section of the Global tab (you can also use the option on the Desktop tab [screen icon]).

Just like changing the layout, if you want a smooth transition you must choose the transition type on the Animations section (e.g. Ease In Out).

Live example of visibility change

Spacing changes

On the Spacing section of the Hover tab (zigzag arrow icon) you will find options to change the spacing (paddings or/and margins) of a block.

Just like changing the layout or display, if you want a smooth transition you must choose the transition type on the Animations section (e.g. Ease In Out) of the Global tab (first tab).

Live example of paddings change

Text size change

On the Text section of the Hover tab (zigzag arrow icon) you will find options to change the font-size of a block.

Just like changing the layout, display or spacing, if you want a smooth transition you must choose the transition type on the Animations section (e.g. Ease In Out) of the Global tab (first tab).

Live example of font-size change

This paragraph block will have it’s font-size increased on mouseover!

Misc. Changes

On the Misc. section of the Hover tab (zigzag arrow icon) you will find some extra options such has:

Showing a scrollbar only when mouse hovering an element

There are more than 3 images below. Mouseover to see the scrollbar that will allow you to see all of them!

Those were very basic examples, but with some creativity you can use them to make fascinating and useful experiences for your website users 🙂

Comments

I include emails on hosting maintenance

One of the things I provide on the hosting maintenance (for clients with websites I developed) is a basic email service.

I manage the service of a third-party company, so you don’t have to (You can know everything that is included on the service on the Maintenance page of the client area).

Emails can be accessed via webmail or email clients (such as Thunderbird, Outlook, etc).

Webmail vs Email clients

You can use email clients to create folders, filter emails, create signatures and other common email tasks, but many of those features will only be visible on that client on that device.

Spam filters on email clients, for example, might filter the emails you see but not filter directly on the server.

Webmail, on the other hand, provides direct access to the emails hosted on the server.

Filters, auto responders (aka out of offices) that you create on webmail, will be available on any client or device that you use.

On this post, I’ll show how you can do the most common email tasks using the webmail service I provide via the third-party company Hostinger.

How to use webmail for common email tasks

First, let’s log in, go to mail.hostinger.com and use the credentials of your account.

If you don’t remember the credentials, click on “Forgot password”. If still you can’t log in, and I’m the one managing the hosting service for you, feel free to contact me. I can reset the password for you, create new addresses, or do some troubleshooting.

Email filters

Email filters allow you to automatically organize your emails depending on whose sending, depending on the email subject and of the content.

Spam filters

Let’s say you are receiving emails that should be spam, from a domain you don’t trust or simply don’t want to receive their emails.

Go to Settings > Filters, click on “Create” and check the suggestions on the image below. The key part of this filter is the action, set to move messages with specific rules to the “Junk” folder.

Filters for urgent or important emails

Let’s say some of your colleagues, sharing the same domain as you, usually send you important emails but sometimes with many links or without subject. Those emails might be considered spam by mistake. You can create a filter that will force emails from the same domain as you to always be sent to the “Inbox” folder.

Go to Settings > Filters, click on “Create” and check the suggestions on the image below.

Or let’s say you are waiting for an important email from a certain domain, you can also move those messages automatically to a custom folder (to create folders go to Settings > Folders).

Redirect emails to a preferred address

Also, using filters, you can redirect certain messages or all of them to a specific address.

Go to Settings > Filters, click on “Create” and check the suggestions on the image below.

The key option is setting the action to “Redirect message to”.

This can be very useful if you have multiple or parked domains (such as .pt and .com) and you only want to manage your messages from one address.

Auto responders (out of office)

Currently, the webmail of Hostinger does not permit to send auto responders. You have two options:

1- Auto responders via the hosting panel

On the hosting panel of Hostinger you can create your auto responders, but not everyone can have access to that panel.

If you don’t have access, being my client you can contact me, to request the creation of the auto-responder for free or to upgrade your maintenance with a professional email service for an extra cost.

If you already have access, check the image below to understand where and how to set your autoresponders:

2- Alternative is sending the email to someone who’s available

Just like creating email filters, you can create a filter to send all messages to a colleague or friend who’s available to answer.

Check the image below, the trick is setting the scope of the filter to “All messages”:

Email signatures

If you want to create an email signature directly on the webmail, you can do it.

Go to Settings > Identities and write your signature on the text area. Click on the icon on the editor to allow HTML and the visual editor, to easily add images, indents, lines and more.

If you want to do something prettier, you can get a signature code and click on the <> icon to add HTML. Contact me if you want a custom-made one 😉

Comments

That can bring serious problems on the long-run, specially when using a non business email service. So I’ll let you know some important ones for you to take into consideration…

When should you use a business email

If your business relies a lot on sending and receiving emails or combines regular emails with marketing services, it might be better to start using a business service immediately, such as Google or Zoho. It might seem costly initially but it’s safer for your reputation and security on the long-run.

Best practices for newsletters and transactional emails

• Always use a specific service for newsletters and transactional emails, such as Mailchimp or Sendinblue.
• Avoid using your main domain. Configure your services to use a subdomain and set the sender to something like noreply@email.yourdomain.tld.
• Always add links for unsubscribe or manage preferences.

Best practices for sending regular emails

Use the Mail Tester platform when you write new messages, it will give you tips and tricks on how to improve them and avoid from falling into spam.

Some practices are:

• Do not use for mass email sending.
• Always include a subject.
• Always add alt text attributes to your images.
• Regular emails should not show HTML code, iframes or other embed content. That type of content should be sent as an attachment or via WeTransfer. You can use HTML only in newsletters.
• Do not send messages only with a link or attachment, it should always have some regular text.
• Messages should have a proper length. Avoid sending short texts that could be sent via chat, apps or sms.
• Avoid typical subjects with certain keywords that can fall into spam such as “test”, “spam” and similar. Specially when unrelated to the message.

Best practices on email clients

Which email client should you use

By email clients I mean software and apps such as Mail, Thunderbird or Outlook.

Something to keep in mind for basic users is, the simplest the email client the less problems will occur when connecting to emails:

• If you only need the basic features, check the client that comes with your device. Usually the basic is more than enough and many clients still give you features such as signatures.
• If you need a set of advanced configurations and features for free I advice you to use Thunderbird.
• If you need advanced configurations, advanced features and you are on a company, you can go with Microsoft 365 Outlook. But I usually advice against it, specially if you can’t update to the latest version for some reason, It’s the first to give problems. You might need a “tech guy” to help you out from time to time.
  Sometimes you might need some kind of compatibility with other software/service, that’s the only reason I understand the use of Outlook.

Incoming server: IMAP or POP?

To keep things simple, the best option usually is IMAP. When you delete emails they will also be deleted from the server by default and the emails will only be stored on your computer temporarily as you read them.

Troubleshooting connection problems on email clients

• Not receiving emails? Always check the spam folder before moving to other types of troubleshooting. Add domains you trust to your whitelist and report as not spam if your client/webmail allows it.
• Connection problems? First thing to always troubleshoot is to check the status of the server, some email providers have a specific place to report situations, Hostinger for example has this page for each of their services.
  A second thing to troubleshoot, is to access your email via webmail. If you can’t access via webmail, you will not be able to access via clients either. If this is the case, double-check the address and password. If they are correct, contact your host manager/provider (Is it me? Then this is the usual webmail access and you can contact me here).
• Configuration problems? If your email client doesn’t have a field for the ports, add them to the incoming and outgoing server fields. Something like this:
  imap.hostinger.com:993
  smtp.hostinger.com:465
• Unknown connection errors? If you have problems connecting and the error message is not clear, the fastest way to discover the problem is to check the logs. Depending of your email client, you might need to enable them first. If you can’t read the logs you might need help from an expert. Do you have a maintenance or support service with me? You can send the logs to me and I’ll try to help you out.
  • Outlook logs
  • Thunderbird logs

Best practices for domain records (advanced)

• The Mail tester platform mentioned above, also gives great tips for domain records.
• Regular emails usually have MX records but should also have TXT records for DKIM and DMARC.
• MX Records should not have the same priority level.
• MX Records per domain/subdomain should point to one unique service. Mass email services usually have alternative DNS Records.
• For mass email and newsletters services such as Sendinblue. Always configure with all the steps given by the service, with all the DNS records.

I hope this practices, tips and tricks can help you as they helped me!

I’m not an email expert but I’ve been learning a lot of practices while working with my clients since 2014 and it’s a pleasure to share them with you now.

I’ll continue to update this post with new practices as I remember and learn them!

And if you know some more, feel free to share them on the comments section below.

Comments

But how would they look on the website’s frontend?

There are at least two different ways to upload and display them, I’ll share them with you below…

The new and easy method to add and display PDFs in WordPress

Using the “File” block

Since WordPress version 5.8, that you can use the “File” block to embed a file directly inside a page.

Other method to add PDFs with a link

Using the Media Library

The previous method is the easiest if you use the block editor. Here’s another method that can be used anywhere (also on categories’ descriptions).

Adding PDF link into text

Adding PDF link with HTML

If you don’t have an editor you can use HTML like this:

<a href="http://127.0.0.1:5000/wp-content/uploads/2021/08/blank.pdf" target="_blank" class="button">See pdf</a>

You can transform the linked text into a button by replacing the class with your own button class.

Comments

If you have a WordPress website already established and you feel the need to show the category descriptions on the category pages, but now you realize your theme is not compatible with that, you don’t need to change theme, or mess with the code and not even do a child-theme.

If Mr.Dev. is already giving a Framework and Widgets to your website, you already have all you need!

If his not, I invite you to check all the features those plugins provide when combined. The more features you realize you need the more worth it is to download them!

If you see that you actually don’t need that many features from Mr.Dev. and don’t mind touching the code of your theme, no problem, I’ll share with you at the end of the post the code you need to use to show the category descriptions.

How to use Mr.Dev.’s Widget to display category descriptions

Display current category

1. Go to Appearance > Widgets and drag a Mr.Dev.’s Widget inside a widget-area/sidebar.
2. In Content make sure the type of content is set to Categories, this will display all categories.
3. In Customize content select Different url, this is the trick to show the widget only on the current category.

Show only the category description

1. Go to Display and disable the main title, images, meta and links. Leave only the descriptions as Item description.
2. Then you might want to only show the text without extra styling: Go to Appearance and change theme to None.

This are the only options you need to select. The category description should now be displayed at the frontend on the chosen widget-area/sidebar.

Create a custom widget area / sidebar for the category description (optional)

If the chosen widget-area/sidebar is not the best position for a category description to be displayed, you can create a new one using Mr.Dev.’s Framework.

On this example, I’ll show how to have a new widget-area/sidebar above the list of posts.

1. Go to Settings > Mr.Dev.’s Framework (Or the name of your website) and select the tab Layout (If that tab is not available, you might need to activate it on the Configuration tab first).
2. Scroll to the Main section and select to show 1 section per line.
3. Give a name to the first section (On this example I called it Content Top).
4. Choose Widget area / Sidebar as the type of content to display on that section.
5. Save the settings.

The new widget-area/sidebar/section will now appear on Appearance > Widgets, for you to drag the widget you made before into it.

Live examples of Mr.Dev. displaying categories

Gift & Craft – Categories’ images?

By default, WordPress doesn’t have the option to add a thumbnail or featured image to a category, so for the categories’ headers of this website, I added an image inside the category description and I used the method explained above.

The only difference was to disable the item description and change the image to be Description first image. This also allowed to use the parallax effect of the widget.

Ruben R. Dias – Display a set of categories

This website is a good example of how practical it can be to show a set of categories with widget shortcodes inside the categories descriptions.

The main difference comparing to the method above, is that I didn’t set to exclude different urls for this website.

Display category descriptions with code (advanced)

Child-theme

To not lose the code changes you are gonna make on future theme updates, check if your theme as a specific way to override files.

If not, you should start by making a child-theme, born from the one you are currently using.

Follow the WordPress official documentation to know more about child-themes.

Change the correct file

Your theme should have a specific file to display the list of posts. In many cases is called archive.php but can differ.

Add the code

Paste the following line of code on the file, at the location where you want the description to appear:

the_archive_description( '<div class="taxonomy-description">', '</div>' );

^{As found on WordPress developer handbook.}

And that’s it! Those are the 2 suggestions I can give you on how to show category descriptions. The same works for tags and other taxonomies. I hope this is handy for some of you developers and WordPress affectionate out there.

Comments