DEV Community: Thien DX

BookmarkStart: A Minimal New Tab Extension for Organized Bookmarks

Thien DX — Thu, 11 Dec 2025 16:27:04 +0000

TL;DR, here's my extension :

👉 Install BookmarkStart

Why I Built My Own New Tab Extension?

I wanted something simple: a clean view of my bookmarks in new tab page, organized the way I like them.

I tried a lot of existing extensions. Some were beautiful but too cluttered with "features" (widgets, news feeds, ads). Others were simple but looked like they hadn't been updated since 2010.

None of them gave me the right balance of a modern look with zero distractions. So, I decided to build my own.

The Result: BookmarkStart 🚀

It's a Chrome New Tab extension that does one thing really well: organizing your bookmarks in new tab page.

Key Features ✨

🎨 It's just clean: No clutter with tons of features. Just your links (and a clock).
🛠️ Customizable:
- Dark/Light Mode
- Compact Mode
- Alignment: Center, left, or right.
🔒 Privacy: Zero tracking (because why?)

See it in Action

If you're looking for a New Tab page that respects your time and looks great, give BookmarkStart a try!

👉 Install BookmarkStart

I know there are other New Tab extensions out there, and many of them are great. But I wanted to give it a try and build something that felt right for me (and hopefully you). Sometimes, you just catch yourself thinking "I can make this myself".

Some mistakes you may make in PHP

Thien DX — Fri, 30 Apr 2021 10:20:01 +0000

Fast, flexible and pragmatic, PHP powers everything from your blog to the most popular websites in the world. Still during my work, I found it can have tricky behaviors that you may not aware of (yet) and create bugs in your code.
Here are some of the most common mistakes I encountered :

array_merge

Syntax : array_merge ( array ...$arrays ) : array
The function simply merges the elements of arrays together. But it also reset the keys of elements if it's numeric.
For example, a very basic use-case where you have arrays storing [UserId => UserName] :

$userArr1 = [1 => "John", "3" => "Mary"];
$userArr2 = [6 => "Ted", "22" => "Doe"];


$allUser = array_merge($userArr1, $userArr2);

// $allUser will be
// Array
// (
//    [0] => John
//    [1] => Mary
//    [2] => Ted
//    [3] => Doe
// )

Casting the numeric value to string like (string)10 won't work. This behavior is same for array_merge_recursive(), so you should keep this in mind when calling these functions.

empty

Syntax : empty ( mixed $var ) : bool
This check whether a variable is empty. Many use this function to check whether a key is set in array. It's all good and simple until value 0 came in.
For example, an user submit formed validation code :

// Function to check all required field are provided by user
function checkRequiredFields ($input) {
    $requiredField = ['name', 'age', 'number_of_kids']; 
    $errors = '';
    foreach ($requiredField as $field) {
        if (empty($input[$field])) {
           $errors.= "$field is missing"; 
        }
    }
    return $errors;
}
// A valid use-case in real likfe
$userData = ['name' => 'John', 'age' => 22, 'number_of_kids' => 0];

$inputError = checkRequiredFields($userData);
// This return "number_of_kids is missing"

This is because 0 is also considered as "empty" even though it's a valid response in many use-cases. I find people make this mistake mostly when validating user's input.
A work around is adding strlen($var)

!isset($input[$field]) || strlen($input[$field]) == 0

Ternary operator (?:) vs null coalescing operator (??)

When your first argument is null, they're basically the same

$a = null;

print $a ?? 'default'; // default
print $a ?: 'default'; // default

$b = ['a' => null];

print $b['a'] ?? 'default'; // default
print $b['a'] ?: 'default'; // default

Except that the Ternary operator will output an E_NOTICE when you have an undefined variable.

But when the first argument is not null, they are different :

$a = false ?? 'default'; // false
$b = false ?: 'default'; // default

That's it.

Hope my short article can save you some debugging time.

Beginner’s guide to SSL

Thien DX — Sun, 03 May 2020 21:21:13 +0000

Nowaday many websites have that cool green lock icon and HTTPS, meaning HTTP over SSL, but what benefits does SSL provide ?

1. The problem

Every technology aims to solve a problem, so does SSL.

When users at home connect to a website like Facebook or Google, the messages sent between a web server and browser go through many devices such as routers, proxies. Any of them can be compromised, known as man-in-the-middle attack ( MITM ).

We need to deal with 2 problems :

The data transferred is not secured and can be read/modified.
Clients can’t be sure whether they are talking to the true server or someone pretending.

Man-in-the-middle attack

2. What is SSL and how it can help ?

SSL-Secure Sockets Layer is a security protocol that creates an encrypted connection between a client and a web server.

SSL can :

Secure messages transmission with encryption
Verify Server’s identity by SSL Certificate

Let’s set an example, Alice is the client surfing the webs, Bob is the server, and Eve is the evil MITM attacker. Now let go into how SSL can help Alice and Bob.

Secured messages transmission with encryption

The basic idea is : Alice and Bob can come up with a shared secret key and use a symmetric encryption algorithm like AES, DES, 3DES to hide their messages.

Symmetric encryption between Bob and Alice

But, how can Alice/Bob exchanges that secret key securely with Eve watching ? The answer is asymmetric encryption.

Asymmetric Encryption is a form of encryption with 2 keys : public key , which may be openly distributed, and private key , which is known only to the owner. Data encrypted by either key can only be decrypted by the other.

Upon initial contact, Bob sends Alice a SSL certificate , which contains his public key and some meta data (we will discuss it in Verify Server’s identity section).

Alice then can generate a shared secret key, encrypt it by Bob’s public key and send to Bob, only Bob can decrypt using his secret key , Eve cannot.

Asymmetric Encryption between Alice and Bob

Now both side have securely exchanged a secret key, and can start using symmetric encryption.

Q : Why not just use asymmetric encryption all the way ?

A : Performance, asymmetric encryption requires more computational cost.

Verify Server’s identity by SSL Certificate

As said earlier, Alice receive Bob’s public key via SSL Certificate. So is it vulnerable to Eve MITM attack ? Short answer : technically, Eve cannot attack it, Alice can verify and decide to trust the certificate or not on client-side.

SSL Certificate is a digital document issued to Bob for his domain by a trusted 3rd-party, called CA-Certificate Authority.

The SSL certificate has Bob’s public key and meta data (domain, organization, …). The CA validate those information and ensure the public key in the certificate match Bob’s private key, then sign it with their private key, creating a Digital Signature which prevent any changes to the certificate later.

Digital Signature is well described in the following picture :

Digital Signature

If Eve tries modifying the public key, she won’t be able to generate a new signature. Later, Alice just need to use the CA's public key to validate the signature, if it's valid then the certificate is indeed from BOB and hasn't been changed.

Where can browsers get CA’s public key to verify the signature ?
It's already in the client browser or OS.

CA have their own certificate containing the public key that browsers can use to verify their Digital Signature on website’s SSL certificates.

There are Root-CA and Intermediate CA.

Root-CA : default set of trusted CA, their certificates are called root-Certificate and stored within Alice’s browsers or OS. Browsers can locally get their public key. The root-CA signed their own certificate, in other words, self-sign.
Intermediate CA : Can be considered child CA. Their certificates are signed by root-CA. They can also signed website’s certificates normally or can issue another child node. If signed by an Intermediate CA, Bob need to provide Alice all the Intermediate CA Certificates (recursively) along with his own SSL Certificate, the root-CA is excluded since Alice already have it. That will form a chain of trust.

Chain of trust

Websites get the awesome green lock if the certificate’s chain of trust lead back to a local root-CA, otherwise browsers will show warning “Certificated not issued by a trusted CA”.

For example, you can check your self, StackOverFlow ’s certificate is signed by Let’s Encrypt — an intermediate CA, and its certificate is signed by Digital Signature Trust Co — a root CA.

StackOverFlow’s certificate is signed by Let’s Encrypt — an intermediate CA

3. So, getting a SSL certificate, where ?

Oh, now I have to mention that there’s no free lunch, and you probably have to pay to get it, one place to check is Digicert.

But you like free stuff, it’s make sense you want to test before actually spending, Let’s encrypt is a good free solution, the drawback is their certificate only last 3 months, then you will have to renew.

Of course CA can be compromised and may cause security risks, but that’s another problem.

That’s all, since I want to keep it short, I tried not to go too far into any small areas, but I did my best to have the keywords included.

Set up your own VPN with OpenVPN and DigitalOcean

Thien DX — Sat, 22 Feb 2020 16:45:46 +0000

What is a VPN and why you need it ?

VPN — Virtual Private Network, allows you to create a secure connection over the public Internet to private networks at a remote location.

A VPN can provide protection if you are traveling or using untrusted WiFi networks as all your traffic will be going through an encrypted tunnel, it also provide some privacy bonuses since websites you connect to won’t know your starting location and IP.

OpenVPN

OpenVPN is an open-source commercial software that implements virtual private network (VPN) techniques.

Set up OpenVPN on DigitalOcean

Since we are going to host our own VPN, first we need a server, and DigitalOcean is easy to start with, you can also try AWS or Google Cloud if you want more options.

https://m.do.co/c/7d6bf3bf13c0 (and yes, it’s my referral link)

Step 1 : Creating cloud server with OpenVPN enabled on DigitalOcean_

After you create your account, go straight to CREATE > DROPLETS to create a “droplet” — cloud server.

You don’t need to start fresh on a new Ubuntu, there’s already an image that support OpenVPN. Marketplace > choose OpenVPN Access Server.

For personal or family usage, the cheapest plan with 1TB data should be enough and it costs only 5$/month; Remember ? With my referral link you got 100$ credit.

For region you will want to choose the closest.

For Authentication, since you are going to create your own VPN, I assume you should have fundamental technical background and care about privacy, please choose SSH. If you have not had a pair of public-private key yet, please check ssh-keygen for Ubuntu or PuTTy for Window.

Step 2 : A little configuration

On the MANAGE panel, go to Droplets > Click on your droplet.

You may want to wait a bit if it’s showing the droplet is being created, once it’s ready, you can proceed.

Log on via SSH to start the setup procedure, you will be asked a number of questions that need to be answered, mostly you can just use default by pressing Enter.
Once that is complete, enter the command “passwd openvpn” to set a password for your Access Server.
Now open the address of your server in a web browser https://your_droplet_IP/admin/, for example: https://123.45.67.89/admin/
If you see any SSL certificate warnings, that is normal, proceed anyway.
Now log on with username ‘openvpn’ and the password you set.

OpenVPN Access Server is ready, you can now add more users if you want to share this VPN with friends by adding users in the User Permissions table.

Step 3 : Almost done, just the client left

Go to https://your_droplet_IP, there’s no “/admin” part this time.

Download the suitable version of client for your OS.

After installing the client, go ahead and open it to find the Access Profile already there for you, turn it on > Enter username +passwords that you set in User Permissions table of the admin tools, THAT’S IT.

Now you can enjoy your very own self-hosted VPN.

You can double check if everything is working by https://www.whatismyip.com , it should point to your droplet IP.