DEV Community: Bertold Kolics

Moving DNS Records from NameCheap to Cloudflare

Bertold Kolics — Wed, 29 Nov 2023 01:23:49 +0000

I would like to setup a small server at home. Prior to doing this, I needed to move my DNS records from Namecheap. I am planning on using Cloudflare's free plan to host my DNS and also front the services once I have migrated the zone first.

Namecheap does not make it easy to export DNS records, though.

Here is what I ended up doing:

Cloudflare migrated some DNS records for me, but not all
Fortunately, you can import additional records into Cloudflare without deleting existing ones. Unfortunately, their user interface does not make it clear if you are appending to a zone or replacing the entire zone when you import. It is - fortunately - the former.
Next, I went to the Advanced DNS page in Namecheap and copied the table of records to the clipboard
After that I opened the Numbers app on my mac and pasted the records. I picked one record type at a time (e.g. TXT). Fortunately, Numbers can nicely parse the tables.
Next up: deleting all columns, except for the name and the value columns.
Exported the remaining columns into a CSV file
Then I ran a simple script to translate the records into a domain format that Cloudflare can import
Finally, I imported the records using the Cloudflare interface

Simple one-liner to convert the CSV (assuming that you exported to txtrecords.txt. Note that Cloudflare likes the full domain name in the record name (hence the .your.domain.):

awk -F',' ' { printf("%s.your.domain.\t1\tIN\tTXT\t%s\n", $1, $2) } ' txtrecords.txt >records-to-import.txt

You may need to adjust the file before importing if you have @ records in the file.

You also probably do not want to proxy the imported records before you have setup everything properly on the backend.

A great resource for browser compatibility

Bertold Kolics — Wed, 18 Nov 2020 02:09:09 +0000

The Mozilla Developer Network is a fantastic resource for finding out about browser compatibility issues especially when you are working with JavaScript.

I was reminded of this when I was trying to get Firefox 78 ESR (extended support release) to format time for me and I realized that it only supports the timeStyle option in version 79 or later.

So, for example, this snippet:

const date = new Date();
date.toLocaleTimeString('en', {timeStyle: 'short'});

produces different results in Firefox 78 and in Firefox 83.

Firefox 78 result:

Firefox 83 result:

As you can see, Firefox 78 will display seconds, but the newer version will adhere to the short time style and not display that field.

Clear your local storage for consistent results

Bertold Kolics — Tue, 17 Nov 2020 02:24:26 +0000

Your test results may be affected by the state kept in your browser. It is recommended to clear your history and application storage to get consistent results.

There are several ways to accomplish this.

Open your site in Incognito or Private mode.

Another is to clean your history.

I also often end up creating a separate browser profile or Person in Google Chrome parlance for different applications.

Chrome DevTools also allows you to remove local storage for your site.

The fundamental reason to follow these practices is simple: you want consistent test results on all subsequent test runs whether they are automated or manual. You don't want previous tests or visits to your application to alter the results that you see.

Breakpoints to the rescue

Bertold Kolics — Mon, 16 Nov 2020 01:53:17 +0000

I have come to respect the breakpoints that you can set in Chrome DevTools when inspecting the DOM. It is especially handy when you are trying to find an element that disappears as soon as you click outside the window.

I was interacting with a drop-down menu of a React app, where the list of items would disappear as soon as I moved the cursor elsewhere.

Set a breakpoint

Step 1

Find the container element in the DOM and highlight it. Then click on the ... to bring up the secondary menu.

Step 2

Set a breakpoint on subtree changes.

Step 3

Confirm that you see that blue dot next to the selected line.

Make a move

Now that the breakpoint is set, you can interact with the application. You may need to resume the application a few times to get to the desired state. When you are there, just switch back to the Elements tab and find the element that you are looking for.

Remove the breakpoint

When you no longer need it, remove it. You can do this the same way you set the breakpoint.