DEV Community: Axel Navarro

Implementing effortless rollbacks in Git

Axel Navarro — Tue, 22 Oct 2024 13:17:59 +0000

In this series we've learned how to merge or split commits using the git rebase command, now it's time to learn how to make rollbacks using the git revert understanding how this works and how to rollback a revert and when this can be useful. 🪄

The commit ID

The commit ID (SHA) is used by Git to identify a commit, and it can be regenerated using git rebase --force-rebase.

git rebase --force-rebase HEAD~1

By default, the rebase makes a fast-forward when it's possible 🤔. This means that the commits aren't re-created when they're being applied over the same previous commit, keeping the commit ID unchanged.

This also happens with you use git cherry-pick, this command applies changes changing the parent commit and that means a new commit ID is used for these picked changes.

When is a new commit ID useful? This may be useful in those sad days when GitHub has issues detecting new commits in the repository and fails to trigger the GitHub Actions or the pull request is out of sync with the Git repo. 🌚

Also, this could be useful when you revert a failed merge and you need to remerge the same code now expecting to work properly 🤞 without reverting the reversion 😵‍💫. Let's explain this complex scenario a little more.

Making a rollback of a merge

For this example we merge a topic branch into a shared branch as always.

git checkout staging
git merge mytopic-branch
git push origin staging

But let's say you merged these changes too soon, or you need another topic to be merged into staging first. Then you need to revert the merge.

git revert mytopic-branch
git push origin staging

And we've reverted to a Git merge effortlessly.

Remerging a reverted merge

After pushing more commits into staging it's time to remerge your topic 🎉 again, then you get a Git output worse than a merge conflict. 🙀

$ git merge mytopic-branch
Already up to date.

Why are we getting Already up to date if the merge of mytopic-branch was reverted? Since Git is inspired by the patch-set workflow of open-source development, the mytopic-branch's commits already exist in the staging branch even if they have been reverted. You can still see the reverted commit in the log:

commit 68ab202e93cb059d01feaaae1cf7d988e2c470a1 (HEAD -> staging)
Author: Axel N <...@gmail.com>
Date:   Wed Oct 16 19:09:13 2024 -0000

    Revert "Upgrade to Rust v1.81 (#87)"

    This reverts commit 0680aa76b96a29b3052482c2e38f817363ac88a8.

commit 0680aa76b96a29b3052482c2e38f817363ac88a8 (origin/staging)
Author: Axel N <...@gmail.com>
Date:   Wed Oct 16 10:46:05 2024 -0000

    Upgrade to Rust v1.81 (#87)

Let's use git rebase to recreate this commit of the topic branch:

git checkout mytopic-branch
git rebase --force-rebase HEAD~1

Now, let's do the merge again!

git checkout staging
git merge mytopic-branch

And, it's done!

What if mytopic-branch is a shared branch like development and I can't rewrite its history? You could revert the reversion using this:

git checkout staging
git revert 68ab202 # SHA of the revert commit.

In this latest scenario we're undoing the reversion and you can get Git conflicts too. Just resolve it as always. You can choose any method to do this but if anyone is not too familiar with Git a revert of a revert could be too hard to understand by just checking the Git log. Try to keep the commit message clear enough about what happened and what commits you're reapplying.

Conclusion

We have learned how to rollback a merge and how to recreate commits when it's needed.

Always remember that the commit ID is used by Git for traceability, If you change the commit ID of a set of changes this is not the same commit for Git.

I hope you find this post useful. Let me know in the comments how you resolved the revert the reversion. 👇 See ya!

A step-by-step guide to splitting commits using Git rebase

Axel Navarro — Fri, 27 Sep 2024 15:08:10 +0000

In the previous posts we checked how to use the git rebase --interactive and how to squash your commits using the fixup command in the git-rebase-todo file.

Now, we're going to learn how to split commits using the terminal. But why splitting a commit? This helps to organize your work. For instance, you may need to rearrange your changes to make backporting hotfixes to older released versions easier, likely using git cherry-pick. Let’s dive in!

Splitting commits

You can use git rebase to split your commits. There are several alternatives to do it and we're going to check the git rebase --interactive way. You can use git rebase --interactive main to reapply all your new commits to the top of the main branch, or just git rebase --interactive HEAD~2 to apply the latest 2 commits.

pick 0680aa7 fix header responsiveness
exec npm test
edit 68ab202 fix grid responsiveness and upgrade bootstrap
exec npm test
break

💡 You can pick the rebased commits in any order! but this can cause Git conflicts 😞. Also you can pick commits from other branches like git cherry-pick.

Well, Git will pick the commit 0680aa7 as-is and run npm test and if the command exists then Git will pick the commit 68ab202 and break, returning the control of the shell to you allowing to edit this last commit. Let's see how to edit the last commit.

🧠 To clarify: edit stops after applying the commit, so that you can edit the files or the commit message, amend the commit, and continue rebasing.

First, undo it keeping all the changes in the working tree using the following command:

git reset HEAD^

Now, you are able to make any edition to your code. Then you can use git add to add the changes to the index to commit it in parts splitting the original commit. As the following example shows:

git add package.json package-lock.json
git commit -m 'upgrade bootstrap'
git add .
git commit -m 'fix grid responsiveness'
git rebase --continue

Git will continue running the second exec command that makes an npm test. If this fails you will need to fix your code; otherwise Git will stop at the break command returning the control of the shell to you again. Here you are able to run your application, make the final checks, etc.

If you're happy with the changes, run git rebase --continue to finish the rebase, or git rebase --abort to cancel all changes. 👀

Let me know in the comments 👇 what other method you prefer to split or edit commits.

Conclusion

Remember that it's useful to keep your commits small and semantic. Committing atomic changes makes it easier to check where a crazy bug was introduced. Splitting commits is an easy process to perform and helps you to keep your Git history more readable. Remember, more commits is not an issue if they are small and semantic.

In the next post we're going to check the git rebase --force-rebase command. See ya!

Git rebase exec to validate every commit

Axel Navarro — Mon, 16 Sep 2024 13:10:33 +0000

In the previous post we checked out how the git rebase works and how to use the --interactive mode to keep your topic branch up-to-date with the target (e.g. main). We also talked about how to use the exec command into the git-rebase-todo file to run custom commands for the rebased commits.

Now, let's check how to useexec in a short way.

Exec, exec, exec

If you need to run the build, tests, or any format tool while rebasing because you must guarantee that every commit is valid, you can speed things up using the git rebase --exec command.

git rebase main --exec "npm test" --exec "npm run build"

If the command fails 😩 you will need to fix your code and then resume the rebase with git rebase --continue.

git add .
git commit --amend
git rebase --continue

Reschedule failed exec

If an exec command exits with a failure, your rebase will return the shell control to you. The git rebase --continue command will resume the execution but it won't run the failed exec again. To avoid this you can use --reschedule-failed-exec.

git rebase main --exec "npm test" --exec "npm run build" --reschedule-failed-exec

You can make this the default behavior by using the rebase.rescheduleFailedExec setting:

git config --global rebase.rescheduleFailedExec true

To turn this off when the rescheduleFailedExec is globally true you should use the --no-reschedule-failed-exe flag:

git rebase main --exec "npm test" --no-reschedule-failed-exec

Or, you can unset this globally:

git rebase --global --unset rebase.rescheduleFailedExec

Conclusion

If your commits will live on your Git repository forever (e.g. inside the main branch) without being squashed (combined into one) it's useful to guarantee the validity of each commit individually. Git provides this exec mechanism to automate this process.

How often do you check the tests and build for every commit of your created pull request? 😉

In the next chapter we're going to see how to split the commits 🔪 using git rebase too.

Rewriting the history with Git rebase

Axel Navarro — Fri, 16 Aug 2024 13:07:44 +0000

As when we work in a new topic (feature or bugfix) it is recommended to keep our branch up-to-date with the target branch (main, development, etc.), we can use the git rebase command instead of git merge in order to keep our Git history clean.

💡 The Git documentation uses topic branch as a generic term for feature branch and bugfix branch, giving to branches like main, development, etc. the name of shared branch because are being used for multiple developers.

The git rebase command reapplies our commits on top of the target branch, rewriting the Git history. This is not recommended on shared branches because it causes divergence (and therefore the need of conflict solving) and panic on your teammates 😬 since it is sometimes hard to resolve.

The basics

To be clear about how git rebase works we're going to use the simplest example: you have 3 commits in your topic branch and you want to get the latest changes from main. To do so you can simply run the following command:

git rebase main

If you're lucky to get no conflicts then you'll have a new Git history with your 3 commits on the top of the main branch and you just need to override (--force) the remote branch with your new history.

git push --force origin mytopic-branch

But what if we have conflicts? Well, you're reapplying 3 commits so any of these could bring conflicts. Just resolve conflicts as always and then continue rebasing:

git add .
git rebase --continue

Let's check a more dynamic scenario.

Squashing commits interactively

If you made several commits while you were preparing your work but now you want to combine your commits into one before creating the pull request then you can rebase against your target branch using the --interactive argument git rebase --interactive main. A git-rebase-todo file will be open in the default editor (nano, vim, etc.) where you can edit the commands that Git will execute to reapply your commits. Let's check this example:

pick 0680aa7 fix grid responsiveness
fixup 68ab202 fix unit tests
exec npm test
reword 76d14ac fix grid layout for iOS
exec npm test

🧠 Thegit-rebase-todo file is a sequence of commands to be executed by Git, and you can run any shell command using the exec command.

The pick is used to take a commit as-is. The commit message is displayed by Git only to help you to identify what changes are there (Git will ignore if you edit it).

Then we have the fixup command, which combines a specific commit into the previous one without changing the commit message.

If the npm test fails you will see the following message:

warning: execution failed: npm test
You can fix the problem, and then run

  git rebase --continue

Sad time when you need to fix the tests 😢. Before continuing the rebase you will need to commit these changes creating a new commit; or integrating there in the latest one using the classic git commit --amend.

git add .
git commit --amend
git rebase --continue

The reword command that we put into the git-rebase-todo file will open your default editor (e.g. nano) with the current commit message for 76d14ac. Edit it and save to continue.

💡 The git rebase reapplies commits, you can do this without needing a target branch (main): just indicate how many commits you want to reapply for the current branch (HEAD). For our example of 3 latest commits:

git rebase --interactive HEAD~3

🧠 Remember that HEAD is a pointer to either your current branch or your current commit when you're in a detached HEAD (meaning you are located in a commit not associated with any branch).

And, this is the usage of git rebase --interactive 🎉. Let's continue with the git rebase --exec.

Do you either prefer rebase or merge to keep your branch up to date? 👇 Let me know in the comments.

Conclusion

You can manipulate the commits in a useful way using git rebase, maybe just using it to keep your work up to date using a linear history, optionally combining your editions into one commit using fixup.

I hope this guide helps you understand more about Git and how to manipulate your commits safely because you can always git rebase --abort if the things aren't going how is planned.

In the following post of this series of git rebase we're going to see how to run tests for the rebased commits automatically. 😬

Node.js v20: .env files, import modules, and Permission Model

Axel Navarro — Fri, 09 Aug 2024 12:23:27 +0000

Node.js v20.6 was released with amazing new features that are part of the LTS versions from October 24th, 2023. Let's see!

The INI configuration files

Say goodbye to the dotenv package, now Node.js can load environment variables from a .env file.

node --env-file path/to/.env index.js

💡 The path to the INI file is required because Node.js didn't choose a default name for the INI file.

🧠 If the INI file does not exist, the node process will not fail; instead, it will start running without the environment variables.

Loading `NODE_OPTIONS`

You can load Node.js' specific environment variables (like NODE_OPTIONS) using an INI configuration file like the following example:

NODE_NO_WARNINGS=1
NODE_OPTIONS="--experimental-permission --allow-fs-read=*"
TZ=Pacific/Honolulu
UV_THREADPOOL_SIZE=5

You can use this with the same method:

node --env-file .env index.js

Preload ES modules

Preload ES modules at startup using the --import flag, the module will be loaded before any application code runs, even the entry point.

node --import path/to/file.js index.js

This flag is similar to the well known --require flag used to load CommonJS modules.

💡 Modules preloaded with --require will run before modules preloaded with --import.

Permission Model

We have a new mechanism to restrict access to specific resources during the execution of a Node.js process called Permission Model. The API exists behind a flag --experimental-permission which, when enabled, will restrict access to all resources not explicitly allowed.

File System permissions

The --allow-fs-read flag allows all FileSystemRead operations using *, or to specific paths using absolute routes.

node --experimental-permission --allow-fs-read=* index.js

To only allow access to specific paths you should use absolute routes

node --experimental-permission --allow-fs-read=/path/to/index.js --allow-fs-read=/path/to/directory index.js

🧠 The initializer module also needs to be allowed. Otherwise index.js file cannot be loaded by the Node.js process itself.

💡 You can use . to allow access to the working directory, but you can't use it to specify the path to a file (e.g. ./index.js).

node --experimental-permission --allow-fs-read=. index.js

The --allow-fs-write flag allows access to specific paths or the whole file system using *.

node --experimental-permission --allow-fs-read=. --allow-fs-write=/tmp/ index.js

Child Process

When the Permission Model is enabled, the process will not be able to spawn any child process by default, you should use the --allow-child-process to allow this operation. Let's use the following code for the index.js.

const childProcess = require('node:child_process');
childProcess.spawn('node', ['-e', 'require("fs").writeFileSync("./new-file.txt", "Hello, World!")']);

To run this snippet with the Permission Model enabled you should execute index.js using the following command:

node --experimental-permission --allow-fs-read . --allow-child-process index.js

🧠 The child process doesn't inherit the Permission Model by default, that's why the new-file.txt is created successfully.

More options

You can check the --allow-worker flag if you want to create Worker Threads under this Permission Model and --allow-wasi to allow the creation of WASI instances

Conclusion

We have a lot of new tools to load environment variables for our application, a method to import preload ES modules required in our code and a new Permission Model to increase the security of our systems.

Stay tuned to the Node.js' blog, this team is adding awesome features in every version! We have initial TypeScript support and a Network Inspection using the DevTools in v22.6.0.

Git autocorrect needs more marketing

Axel Navarro — Tue, 23 Jul 2024 18:33:57 +0000

Git comes with a lot of configurations to improve your experience with the command-line. We already talked about how to color moved blocks of code, but I recently found an awesome configuration called autocorrect. 🤩

This feature allows Git to detect typos in your input and display similar valid commands. Git can also suggest the correct one or even run the suggestion automatically. Let's see!

The default value

By default Git displays suggested commands if we had a typo in our command:

$ git pll
git: 'pll' is not a git command. See 'git --help'.

The most similar command is
      pull

But we can get more than just a suggestion… 👀

Check before running the suggestion

If you configure autoCorrect with prompt Git will ask for a confirmation to run the suggested command.

$ git config --global help.autocorrect prompt
$ git pll
WARNING: You called a Git command named 'pll', which does not exist.
Run 'pull' instead [y/N]?

Running the suggestion without manual intervention

If you use a numeric value for autoCorrect and Git finds only 1 valid command to fix the typo, then the valid one will be executed without confirmation. 🚀

$ git config --global help.autoCorrect 30
$ git pll
WARNING: You called a Git command named 'pll', which does not exist.
Continuing in 3 seconds, assuming that you meant 'pull'.
Already up to date.

💡 You can stop its execution using Ctrl + C or let Git run the assumption.

The numeric value is the timeout in deciseconds (0.1 seconds), but if you want Git to run the fixed command without any wait you should use immediate.

🧠 The value 0 disables the auto execution and only displays suggestions.

Conclusion

If you combine this autocorrect feature with popular aliases you achieve a customized experience with the command-line to rock on your productivity. 🎸

git config --global alias.st "status --short --branch"
git config --global alias.co checkout
git config --global help.autoCorrect immediate

Also, you can check Delta to improve your Developer Experience using the git diff command.

Write in the comments which configuration do you like more to use Git in the terminal! 👇

Setting Up a Modem in Bridge Mode for a UDM router: A Step-by-Step Guide

Axel Navarro — Sat, 29 Jun 2024 11:51:30 +0000

I bought a Unifi Dream Machine (UDM) and then I called my ISP to change the modem to bridge mode, but they don't provide support for that. You should do it by yourself.

The simplest possible explanation of what we are doing in this post is: we're going to redirect the fiber signal from the ISP's modem to our UDM using an ethernet port of our router and the PPPoE is going to be resolved in our UDM.

Here I'm gonna show you a brief guide using my modem RTF8115VW provided by Movistar. I'll assume you know the basics and how to go to the control panel of your ISP's modem.

Step #0, the backup

I couldn't find the backup configuration page on my modem, but if you have luck you have remembered to make a backup. It's nice to have a lifeguard if you make a mistake.

Step #1- the WAN interface

At first we need to remove the PPPoE WAN interface because the WAN connection is going to be resolved by our UDM.

💡 Remember to copy both user and password of your PPPoE connection.

Just select the PPPoE connection type in the grid and click on Delete. This operation can take up to a minute.

🧠 Take note of the VLAN of your PPPoE connection, you'll need it later.

Step #2 - Ingress Filtering

Now we're going to associate one ethernet port of our modem to the WAN port using the proper VLAN. For this, I used the ethernet port #4 for this, but it could be done with any eth port. Just check the eth0.4 and click on delete to remove the current LAN configuration for this port.

Then, click the Add button to associate the port to the WAN interface with the following values:

Order: Lowest
Ingress Interface: your selected Ethernet port, eth0.4 in this example.
Associated Bridge: Here just select the WAN interface.
Ingress Packet: All the packages. 😬
VLAN ID: the VLAN number that you copy from the previous step, 6 in this example.

Then hit Apply, to complete this step. If you want to know more about ingress filtering you check it here.

Step #3 - Egress Marking

We're going to mark the packages from the ethernet port number 4, but first we should delete the current configuration for this. Just click the eth0.4 interface and then on the Delete button.

Now, we're going to mark the packages from eth0.4 with the following values:

Ingress Interface: your Ethernet interface, eth0.4 in this example.
Associated Bridge: select your WAN interface.
Accepted Type: Tagged.
VLAN ID Re-Mark: -1.
Priority Re-Mark: 1.

💡 But is not -1 a misconfiguration value for VLAN ID? 🤔 Well, I understand that this misconfiguration value overrides the 6 value that we used in our end. If you know more about this please comment, I want to hear from you! 💬

If you want to learn more about egress marking you can check the QoS Packet Marking page from Cisco.

Step #4 - the Wi-Fi

The most simple step with our modem, just turn off the Wi-Fi radio for 2.4 and 5 GHz and reboot your

Step #5 - Ubiquiti

Now, we need to configure the WAN interface in the UDM, for me this is here: /network/default/settings/internet. Click on the WAN interface and let's configure it.

Advanced: I used Manual configuration.
VLAN ID: you should enter the same number used in the modem configuration, 6 in this example.
IPv4 Connection: PPPoE in the scenario.
Username and Password: credentials for your ISP.
DNS Server: you can use Auto, or Cloudflare (1.1.1.1), or Google (8.8.8.8), or anyone you want.
IPv6 Connection: I used Disabled for me.

Finally submit your changes and wait for the internet connection to be established in our Unifi network. 🤞

Conclusion

We've learned a few networking concepts that could be used to configure several modems in bridge mode, but be careful because different models or providers could require a little tweaks to make it work! And if you have another router, like a TP-Link, the PPPoE configuration is similar to what I show you in the UDM panel.

I want to thank Salvathore, because I couldn't make it without his video tutorial.

I hope you enjoy your UDM as much as I do. 🖖

Validate an OpenID Connect JWT using a public key in JWKS

Axel Navarro — Thu, 30 Mar 2023 14:45:36 +0000

You may have used OpenID Connect in the Front-end, where an IDP (IDentity Provider) authenticates a user, gives you a bunch of tokens in the browser and then you can add the Authorization header to your HTTP requests to your own Back-End because you trust this IDP. But what happens when you can't find where you can verify the id_token (or access_token) using some endpoint in the IDP?

Well, I found how an OpenID Connect id_token should be validated. It wasn't straightforward in my case: I had to do a lot of research to validate my id_token. Let's see how to make this easy using Node.js and the jsonwebtoken npm package made by Auth0.

Understanding JWT to know how to validate it

A JSON Web Token (JWT) is a string built with 2 JSON objects encoded in base64 and a signature; these parts are joined by a period (.) with the following structure: <header>.<payload>.<signature>.

💡 This is why a JWT always starts with ey, because it is the result of encoding {" using base64, which is the beginning of any JSON.

In the header part we can find which signature algorithm was used in the alg parameter (e.g. RS256) to sign the JWT, and the kid parameter tells which Key ID from the JSON Web Key Set (JWKS) was used for a given token.

🧠 Remember that when the JWT header has a Key ID (kid), JWKS is used.

And here is where the problem starts. Where do I find the JWKS to get the public key so we can verify the integrity of this token? 😫

The issuer

The issuer is the one who created and signed the JWT, and we can know this by checking the value iss in the payload of our JWT - using jwt.decode from jsonwebtoken.

const jwt = require('jsonwebtoken');
const payload = jwt.decode('<your_jwt_here>');
console.log(payload.iss);

Alternatively, you can paste your JWT into https://jwt.io (don't worry, it's a safe website from Auth0), and iss is there too!

In OpenID Connect, the issuer should be a URL, but it could just be the name of the IDP. In that case you should read more docs to find where the JWKS URI is. 😭

For our example we can use https://sandrino.auth0.com as an issuer, so you can know the OpenID configuration using the well-know URI https://sandrino.auth0.com/.well-known/openid-configuration, and in the jwks_uri attribute is where you can find the JWKS for our issuer. You can check this same value in another issuer https://login.microsoftonline.com/common/v2.0/.well-known/openid-configuration, the jwks_uri is there too! 😉

const jwt = require('jsonwebtoken');

const printJwksUri = async (issuer) => {
  const response = await fetch(`${issuer}/.well-known/openid-configuration`);
  const {jwks_uri} = await response.json();
  console.log(jwks_uri);
};

const token = '<your_jwt>';
const {iss} = jwt.decode(token);
printJwksUri(iss);

We have the JWKS URI programmatically in Node.js! 🥳

Verifying the token

Now that we know enough about JWKS, we can write a Node.js code to validate an OpenID token that discovers the JWKS URI if you don't know where it is.

const {promisify} = require('node:util');
const jwt = require('jsonwebtoken');
const jwksClient = require('jwks-rsa');

const fetchJwksUri = async (issuer) => {
  const response = await fetch(`${issuer}/.well-known/openid-configuration`);
  const {jwks_uri} = await response.json();
  return jwks_uri;
};

const getKey = (jwksUri) => (header, callback) => {
  const client = jwksClient({jwksUri});
  client.getSigningKey(header.kid, (err, key) => {
    if (err) {
      return callback(err);
    }
    callback(null, key.publicKey || key.rsaPublicKey);
  });
};

/**
 * Verify an OpenID Connect ID Token
 * @param {string} token - The JWT Token to verify
 */
const verify = async token => {
  const {iss: issuer} = jwt.decode(token);
  const jwksUri = await fetchJwksUri(issuer);
  return promisify(jwt.verify)(token, getKey(jwksUri));
};

const token = '<your_jwt>';
verify(token)
  .then(() => console.log('Token verified successfully.'))
  .catch(console.error);

⚠️ Did you notice that I didn't check who is the issuer? This code will accept any of them, even a malicious one. 😨 To control this just accept issuers from an allowed list.

const allowedIssuers = [
  'https://login.microsoftonline.com/common/v2.0',
  'https://sandrino.auth0.com',
];

const fetchJwksUri = async (issuer) => {
  if (!allowedIssuers.includes(issuer)) {
    throw new Error(`The issuer ${issuer} is not trusted here!`);
  }
  const response = await fetch(`${issuer}/.well-known/openid-configuration`);
  const {jwks_uri} = await response.json();
  return jwks_uri;
};

With this little change you're safe now 🔒

Conclusion

Like I mentioned in this post, these well-known URIs are a standard method to get information for specific features, and issuers should implement the /.well-known/openid-configuration to integrate it easier to your authentication flow.

🧠 OpenID Connect is a safe way to authenticate users, but you always have to verify the token's integrity in the Back-End side and check if it was created by a trusted issuer.

🔑 Remember that this scenario only works with JWKS (when the certificate is pre-distributed to the clients the JWT header has x5t instead of kid). You can find examples with public.pem files in the jsonwebtoken package.

🪙 Bonus tip if you use Autenticar service from the Argentinian government, a.k.a AFIP Clave Fiscal, you can use this code to validate the id_token with the JWKS.

Running graphic apps in Docker: AWS WorkSpaces

Axel Navarro — Thu, 29 Dec 2022 12:19:18 +0000

As a Linux user, I need to connect to an Amazon WorkSpace but the client app can only be run in specific old, but maintained, versions of Ubuntu. I've tried with the latest Ubuntu version but it haven't worked, so created a virtual machine with Ubuntu Focal 20.04 but this setup used 14GB of disk space 😵 only to open a window application. This didn't make any sense and also included issues when sharing the clipboard from the host to the VM and then to the virtual desktop hosted in Amazon. 🙄
Then, I remembered that we can run graphic applications using Docker. Let's see how to connect a container to the host's X Window System.

Creating the Docker image

The following Dockerfile builds the image using Ubuntu Focal 20.04, and installs the Amazon WorkSpace client:

FROM ubuntu:focal

ENV DEBIAN_FRONTEND=noninteractive

RUN apt update && \
  apt install -y libusb-1.0-0 wget xauth && \
  wget -q -O - https://workspaces-client-linux-public-key.s3-us-west-2.amazonaws.com/ADB332E7.asc | apt-key add - && \
  echo "deb [arch=amd64] https://d3nt0h4h6pmmc4.cloudfront.net/ubuntu focal main" > /etc/apt/sources.list.d/amazon-workspaces-clients.list && \
  apt remove -y wget && \
  apt update && \
  apt install -y workspacesclient && \
  touch /root/.Xauthority && \
  rm -rf /var/lib/apt/lists/*

💡 libusb-1.0-0 is a dependency of Amazon WorkSpaces.

The DEBIAN_FRONTEND=noninteractive environment is used to skip the Ubuntu’s prompt asking for our time zone.

Build the image with the following command:

docker build -t workspace .

The Docker image's size is 1.2GB, a reduction of 91% in comparison to the 14GB of the virtual machine.

Starting the container

Now, we can run the container!

docker run --name ws --network=host -e DISPLAY -v /tmp/.X11-unix -it workspace

We need to share the .X11-unix/ directory where the connection socket is located, where DISPLAY is the name of the host's display.

The --network=host argument makes the container use the same host's network so the container does not get its own IP address. This avoids the container being network isolated. 🪛

Starting the GUI application

Before starting the app we must authenticate the X Window System of the container with the host.

Get the authorization entry of the host using the xauth command:

xauth list

Copy the output of the command and run this in the container (replacing the placeholders with the values from the clipboard):

xauth add <display_name> <protocol_name> <hex_key>

Now you are able to start GUI applications inside the container! 🎉

/opt/workspacesclient/workspacesclient

Alternative: use VNC instead of X11

We need to make a few changes to run a VNC server in the container:

FROM ubuntu:focal

ENV DEBIAN_FRONTEND=noninteractive

RUN apt update && \
  apt install -y libusb-1.0-0 gpg wget x11vnc xvfb && \
  wget -q -O - https://workspaces-client-linux-public-key.s3-us-west-2.amazonaws.com/ADB332E7.asc | apt-key add - && \
  echo "deb [arch=amd64] https://d3nt0h4h6pmmc4.cloudfront.net/ubuntu focal main" > /etc/apt/sources.list.d/amazon-workspaces-clients.list && \
  apt remove -y wget && \
  apt update && \
  apt install -y workspacesclient && \
  rm -rf /var/lib/apt/lists/*

RUN echo "exec /opt/workspacesclient/workspacesclient" > ~/.xinitrc && \
  chmod +x ~/.xinitrc

CMD ["x11vnc", "-create", "-forever"]

The x11vnc command will start an X11 session in the container launching the application specified in the ~/.xinitrc file.

docker build -t workspace .

Then, we can run the container:

docker run --name ws -it workspace

But how can we know the IP address of the container? Just check it with the following command:

docker inspect --format='{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' ws

Now you can connect to the VNC server. 🔌

Conclusion

We can run graphic applications that work in specific Linux distros using Docker 🐋, by connecting directly to our X Window System. This uses less memory and disk space than a VM.

You can get the same in Windows as the host using Xming.

xauth could be used in conjunction with SSH to run remote GUI apps 😉 in our local, but that's for another post.

Alternatively, you can start a VNC server in a container allowing more flexibility either if you use macOS, or if you can't connect using X11 because you're using Wayland. But this doesn't feel like a native window on your OS.

Connecting through OpenVPN with deprecated ciphers, using Docker

Axel Navarro — Mon, 14 Nov 2022 12:33:19 +0000

Caution! This is a developer horror story 👻, Halloween 2022 comes with a nightmare for those who use a VPN. OpenSSL released the version 3.0.7 as the latest stable, if you compare that we're talking about a jump from 1.1.1 to 3.0.7 we can think that any already deprecated protocol was removed to guarantee the security of our systems! And, it happened.
Arch Linux, with its philosophy of using the latest stable release of everything, applied the OpenSSL v3 on Saturday morning November 5.

Note: Treating option '--ncp-ciphers' as '--data-ciphers' (renamed in OpenVPN 2.5).
WARNING: Compression for receiving enabled. Compression has been used in the past to break encryption. Sent packets are not compressed unless "allow-compression yes" is also set.
--cipher is not set. Previous OpenVPN version defaulted to BF-CBC as fallback when cipher negotiation failed in this case. If you need this fallback please add '--data-ciphers-fallback BF-CBC' to your configuration and/or add BF-CBC to --data-ciphers.
Unsupported cipher in --data-ciphers: BF-CBC
Options error: NCP cipher list contains unsupported ciphers or is too long.
Use --help for more information.

Surprise! You can't use the BF-CBC cipher on OpenVPN anymore, because it was removed from OpenSSL itself; OpenVPN plans to remove it on 2.7 but we're currently in 2.5.8 at the moment.

Downgrading the openssl package is a possible solution but not the best. Should I move my development environment to a virtual machine? 🙀 Change to an old Ubuntu version? Not for me. Here is when the hero 🦸 of this story appears to save us, and its name is Docker 🐳.

💡 You can receive an alternative error message in Ubuntu or other Linux distributions:

OpenVPN 2.5.5 x86_64-pc-linux-gnu [SSL (OpenSSL)] [LZO] [LZ4] [EPOLL] [PKCS11] [MH/PKTINFO] [AEAD] built on Jul 14 2022
library versions: OpenSSL 3.0.2 15 Mar 2022, LZO 2.10
WARNING: --ns-cert-type is DEPRECATED. Use --remote-cert-tls instead.
OpenSSL: error:0A00018E:SSL routines::ca md too weak
Cannot load inline certificate file
Exiting due to fatal error

The solution

The containers can use the same network of the host, this avoids the container being network isolated, and the VPN tunnel is shared with our host system.

Creating the image

For this example I'll use a simple ovpn file, but with a few tweaks I'm sure this will work for you too.

FROM ubuntu:focal

RUN apt update && \
  apt install -y openvpn && \
  rm -rf /var/lib/apt/lists/*

COPY profile.ovpn /etc/openvpn/client/

CMD ["openvpn", "/etc/openvpn/client/profile.ovpn"]

We based our image on Ubuntu 20.04 LTS (Focal Fossa), just install the openvpn package and copy your OpenVPN configuration file inside. Maybe you need a .p12, .key, or .crt files just to copy them too.

🧠 We can't use Ubuntu 22.04 LTS (Jammy Jellyfish) because it received the update to OpenSSL 3.0.2.

Build the image with the following command:

docker build -t openvpn .

Starting the container

Now, we can run the container!

docker run --name=vpn \
  --cap-add=NET_ADMIN \
  --network=host \
  --device /dev/net/tun \
  -it openvpn

The container needs the Linux kernel capability of network administration to create a VPN tunnel with the --cap-add=NET_ADMIN argument. Also --device /dev/net/tun gives access to the tunnel device of the host.

⚠️ Don't give kernel capabilities or access to devices if you don't trust the publisher.

Once started, the container could ask for your credentials (username and password) to establish the VPN connection and it's done! 🎉

Conclusion

Some changes can't be applied in enterprise environments without analyzing all possible scenarios, and the change of this cipher could take some time. That's where Docker could help us to continue using old software in a controlled way for specific tasks without compromising the security of our system.

I hope you don't get scared with this story, but Super-Docker saves the day, one more time. Tell me in the comments if this helped you, or if you found another solution.

Querying installed packages with npm query

Axel Navarro — Wed, 02 Nov 2022 17:39:20 +0000

Do you know if you have any package that makes use of postinstall scripts? Do you have a package installed twice? Since version 8.18.0 we can use npm query to find packages in the node_modules directory matching a specific query.
This is helpful in identifying possible issues and fixing them.

Why is a postinstall script important?

The postinstall script allows a package to run code when it's installed and this could be used in a malicious way. The npm security team receives reports of malware in the registry and works to keep the ecosystem safe, but did you check which dependencies are running in postinstall scripts? Do you trust them?

npm query ":attr(scripts, [postinstall])" | jq 'map(.name)'

Review the list of dependencies. then to uninstall these packages with a postinstall script use the following command:

npm query ":attr(scripts, [postinstall])" | jq 'map(.name) | join("\n")' -r | xargs -I {} npm uninstall {}

💡 The jq program is essential to filter data in JSON format.

Finding duplicate packages

Sometimes we find some errors on the DevTools' console when React or Angular is being loaded twice on our website. This happens when a dependency is incompatible with the semver of the same package declared on our package.json. E.g. We declared react@^18.2.0 in our package.json and some dependency has react@^16.8.0 || ^17.0.0 as dependency in their own package.json.

We can find every installed copy of a specific package using:

npm query '#react'

Or, if we're looking for old versions of React

npm query '#react:semver(<18.0.0)'

🧠 Remember that the selectors for npm query follow the CSS selectors format.

Check the dependency licenses

Perhaps you can't use code with a specific license in your app. You can check the variety of licenses installed in your node_modules printing a dedupe list with this command:

npm query '*' | jq '.[] | select(.license | type == "string") | .license' -r | sort | uniq

🎁 Some packages, like rimraf, declare an object in the license field of the package.json, so you can use this example for these:

npm query '*' | jq '.[] | select(.license | type == "object") | .license'
# or using attr selector
npm query ':attr(license, [url])' | jq 'map(.license)'

Then you can look up packages with specific licenses, or without a license.

npm query '[license=MIT], [license=ISC], [license=]'

Other usages

You can create the query that matches your needs, but we can review a few additional scenarios.

Dependencies from Git

You can install dependencies from Git branches or tags instead of the npm registry and then you can check which of them are installed in your project.

npm query ':type(git)'

Who needs these packages? The npm why command can tell us:

npm query ":type(git)" | jq 'map(.name) | join("\n")' -r | xargs -I {} npm why {}

The peerDependencies

If you run your app and you get an error for a missing dependency, check if a peer dependency of your direct dependencies is required. Maybe you should add it in your package.json file.

npm query ':root > * > .peer' | jq 'map(.name)'

📚 You could have example pages for npm-query and jq in your terminal for quick usage thanks to the tldr-pages open source project.

Conclusion

Using npm query in conjunction with jq you can check some constraints in your dependencies to make sure you don't have duplicate dependencies, or licenses that are incompatible with your app or company's policy.

I hope this helps you to resolve your issues with npm packages. Tell me in the comments which queries you found useful.

Improve your website performance using Partytown type in script tags

Axel Navarro — Mon, 03 Oct 2022 12:33:27 +0000

Can we use Google Tag Manager from a web worker? Is <script type="text/partytown"> a new standard? Let's see what this new script type is and how we can easily move workloads from the main thread to a worker with an example using GTM and Next.js. After that you can implement this with vanilla JS and other third party scripts like Facebook Pixel, Mixpanel, Amplitude, etc.

What is Partytown 🎉?

Partytown is a library that helps us to relocate scripts into a web worker creating communication channels, like dataLayer.push() which is used in GTM. If GTM was loaded into a worker, every call to dataLayer.push() should be forwarded from the main thread to the worker thread, and Partytown solves that automatically! Also, it allows code executed from the web worker to access DOM synchronously, so third-party scripts can run exactly how they were coded and without any alterations.

Creating script tags for workers

To run code in the worker just use type="text/partytown". The browser won’t recognize that type ignoring the script tag and then Partytown will load that script inside a web worker. This works for inline code or files.

<script type="text/partytown">
  /* GTM Script Here */
</script>
<script type="text/partytown" src="https://example.com/analytics.js"></script>

Where is the `forward`?

To forward a function call to the worker we just need to add the configuration to the window object before the inlined Partytown script.

<script>
  window.partytown = { forward: ['dataLayer.push'] };
</script>
<script type="text/partytown">
  /* GTM script here */
</script>

Now, you can use window.dataLayer.push() from the main thread. 🙌

Using workers in Next.js

Setting up Partytown in a Next.js website is very easy! We just need Next.js v12.1.1 or later.

🧠 Remember that this is an experimental feature in Next.js and it’s not covered by semver. 🙀

First, we should enable the experimental flag in the next.config.js file.

module.exports = {
  experimental: { nextScriptWorkers: true }
};

And install the Partytown package.

npm install --save-dev @builder.io/partytown

The Next.js workers don't require extra configurations, but we should forward the dataLayer.push for this example. We need to include this configuration in a <Head> component inside a custom _document.js.

import { Html, Head, Main, NextScript } from 'next/document'

const Document = () => (
  <Html>
    <Head>
      <script
        data-partytown-config
        dangerouslySetInnerHTML={{
          __html: `
            partytown = {
              lib: '/_next/static/~partytown/',
              debug: true,
              forward: ['dataLayer.push']
            };
          `
        }}
      />
    </Head>
    <body>
      <Main />
      <NextScript />
    </body>
  </Html>
);

export default Document;

💡 The debug: true setting gives us nice info in the DevTools' console.

Finally, we can add the GTM script in our _app.js.

import Script from 'next/script'; 

const MyApp = ({ Component, pageProps }) => (
  <>
    <Script
      id="gtm-script"
      strategy="worker"
      dangerouslySetInnerHTML={{
        __html: `/* GTM script here */`
      }}
    />
    <Component {...pageProps} />
  </>
);

export default MyApp;

The id property is required for inline scripts in order to let Next.js track and optimize the script.

And it's done! Your GTM runs in a worker that you can communicate with using the dataLayer.push - as always.

You can find installation instructions for React, Angular, Nuxt and more.

Conclusion

Too much JavaScript can block DOM construction, delaying how quickly pages can render. Reducing JavaScript in our main thread is a good strategy to reduce the time until interaction. This will free up main thread resources so they can be used for the primary web app execution, e.g. network requests.

With Partytown we can use read and write main thread DOM operations synchronously from within a web worker; I wonder if this can be used in a microfrontend application to increase the responsiveness of our website.

I hope you find this helpful If you came here looking for performance improvements for your website. Do you have production experience with workers? Have you used Partytown before? Tell me in the comments.

DEV Community: Axel Navarro

Implementing effortless rollbacks in Git

The commit ID

Making a rollback of a merge

Remerging a reverted merge

Conclusion

A step-by-step guide to splitting commits using Git rebase

Splitting commits

Conclusion

Git rebase exec to validate every commit

Exec, exec, exec

Reschedule failed exec

Conclusion

Rewriting the history with Git rebase

The basics

Squashing commits interactively

Conclusion

Node.js v20: .env files, import modules, and Permission Model

The INI configuration files

Loading NODE_OPTIONS

Preload ES modules

Permission Model

File System permissions

Child Process

More options

Conclusion

Git autocorrect needs more marketing

The default value

Check before running the suggestion

Running the suggestion without manual intervention

Conclusion

Setting Up a Modem in Bridge Mode for a UDM router: A Step-by-Step Guide

Step #0, the backup

Step #1- the WAN interface

Step #2 - Ingress Filtering

Step #3 - Egress Marking

Step #4 - the Wi-Fi

Step #5 - Ubiquiti

Conclusion

Validate an OpenID Connect JWT using a public key in JWKS

Understanding JWT to know how to validate it

The issuer

Verifying the token

Conclusion

Running graphic apps in Docker: AWS WorkSpaces

Creating the Docker image

Starting the container

Starting the GUI application

Alternative: use VNC instead of X11

Conclusion

Connecting through OpenVPN with deprecated ciphers, using Docker

The solution

Creating the image

Starting the container

Conclusion

Querying installed packages with npm query

Why is a postinstall script important?

Finding duplicate packages

Check the dependency licenses

Other usages

Dependencies from Git

The peerDependencies

Conclusion

Improve your website performance using Partytown type in script tags

What is Partytown 🎉?

Creating script tags for workers

Where is the forward?

Using workers in Next.js

Conclusion

Loading `NODE_OPTIONS`

Where is the `forward`?