DEV Community: Brent Vanwildemeersch

How to change your PHP version on Ubuntu 22.04

Brent Vanwildemeersch — Tue, 10 Jan 2023 18:25:07 +0000

Info

This is a guide to change your PHP version through the command line on Ubuntu 22.04

Installed versions list

To list all the installed PHP versions on your local device, use the following command :

sudo update-alternatives --config php

Change active PHP version

To change your currently used PHP version to a different version (that is installed), you can use the following command:

sudo update-alternatives --set php /usr/bin/php${version}

Enable hibernate on Ubuntu 20.04

Brent Vanwildemeersch — Fri, 09 Sep 2022 17:16:09 +0000

Source : How to Change Lid Close Behavior in Ubuntu 20.04

1. Open a new shell session

2. Run command to open file

sudo gedit /etc/systemd/logind.conf

3. Edit the file to enable hibernate on closing lid

When the file is opened, search for the following line

#HandleLidSwitch=suspend

remove the # to enable the setting and save the changed document

You can also choose one of the following options if suspend is not what you are looking for

HandleLidSwitch=lock – lock when lid closed.
HandleLidSwitch=ignore – do nothing.
HandleLidSwitch=poweroff – shutdown.
HandleLidSwitch=hibernate – hibernate Ubuntu.

4. Apply the changes

Apply the changes by restarting the service

systemctl restart systemd-logind.service

Your system should suspend/hibernate now when you close the lid of your laptop

If you want to verify if the option you chose is available on your device you can run

sudo systemctl hibernate/suspend/lock

How to set default NVM version for all Linux shells

Brent Vanwildemeersch — Mon, 22 Aug 2022 17:25:00 +0000

After installing NVM and setting up a nvm version using:

nvm use ${NODE_VERSION_NUMBER}

I realized that not every shell I started had the NODE_VERSION_NUMBER that I had set earlier

Setting a default node version using NVM on Linux for all shells/terminals can be done using the following command.

nvm alias default ${NODE_VERSION_NUMBER}

Restarting the terminall/shell will now have the correct NODE_VERSION_NUMBER set for NVM

Fix Microsoft Teams screen sharing on Ubuntu 22.04

Brent Vanwildemeersch — Sun, 07 Aug 2022 11:23:00 +0000

Problem

When you install Microsoft Teams on Linux Ubunut 22.04, screen/desktop sharing doesn't work (v1.5.00.10453)
When you open the sharing tray on the native or the web-client of MS teams, its empty as shown below.

Cause

The origin of this problem is that Linux Ubuntu 22.04 uses Wayland as main communication protocol between a display server and its clients. And the Elektron version that Teams is currently using doesn't support Wayland as it should.

Solution

Source

Solving the screen sharing issue is easily resolved by just disabling Wayland in your display manager

Assuming GDM3 is your default display manager, editing the config can disable Wayland



 sudoedit /etc/gdm3/custom.conf

Uncomment #WaylandEnable=false and save your changes

Restart your device or restart GDM3


 bash
sudo systemctl restart gdm3

After restart, this should resolve the issues with MS Teams screen sharing

Bun command not found on Linux

Brent Vanwildemeersch — Sun, 31 Jul 2022 12:59:00 +0000

After a clean install of bun on Linux, the bun command will not be recognised by the commandline, because bun was not automatically added to PATH

It will probably return a message as following,

bun --version

Command 'bun' not found, did you mean:

  command 'ben' from deb ben (0.9.0ubuntu2)
  command 'bus' from deb atm-tools (1:2.5.1-4)
  command 'zun' from deb python3-zunclient (4.0.0-0ubuntu1)

Try: sudo apt install <deb name>

You can solve this with the following actions :

1. Edit the `.bashrc` file

nano nano ~/.bashrc

2. Add the following lines at the end of your `.bashrc` file

BUN_INSTALL="/home/{USERNAME}/.bun"
PATH="$BUN_INSTALL/bin:$PATH"

with {USERNAME} replaced by your username.

3. Close your terminal and open a new shell

bun --version

should now return information on the installed version of bun

How to prepare yourself for the Pro Scrum Master Certification (PSM 1)

Brent Vanwildemeersch — Mon, 20 Dec 2021 14:46:00 +0000

Introduction

The PSM I certification is available to anyone who wishes to validate his or her depth of knowledge of the Scrum framework and its application. Those who pass the assessment will receive the industry recognized PSM I Certification to demonstrate their fundamental level of Scrum mastery.

Preparation for this assessment/certification can be very easy, if you know what to focus on.
Therefore I will try to give an overview of the resources I used during my preparation to pass the PSM I final assessment successfully

Scrum Guide

The first and most important step in your preparation is the Scrum Guide.
Don't just read this document once, read it over and over again, untill you fully digested and understand the contents of the Scrum Guide. Understanding the roles and responsibilities in Scrum, the events and artifacts included and how the support empericism will be the core knowledge required for passing the assessement.

Nexus Guide

The next step in your preparation can be reading and understanding The Nexus Guide. The Nexus Guide is focused on the implementation of Scaled Scrum (multiple Scrum Teams working on the same product) and how to adapt/extend the Scrum framework to scale efficiently. Although the information on Scrum.org doesn't mention The Nexus Guide as a requirement for the PSM I assessement, there can be questions in the final assessement related to Scaled Scrum implementation.

Scrum Glossary

The Scrum Glossary will provide you with an overview of all Scrum-related terms. Some of them you will know, some of them can be new. Reading and understanding the glossary list is not required, but can be very useful in understanding the questions that will be asked during the final assessement.

Scrum open assessments

On Scrum.org, there are several open assesments available where you can test your knowledge and evaluate your current progress towards the final assessement. For the Scrum Open assessment you will get 30 questions that are relatively similar to some of the questions you can get in the final assessement.
I would advise to reach 100% on the Scrum Open assessement a few times, before giving mock assessements or the final assessment a try.
Also, don't hesitate the try the other open assessements provided like the Nexus Open, Product Owner Open or the Developer Open assessment. Some of the questions you will get will be irrelevant, others can return in the PSM I final assessement.

Mock Assessments

Similar to the open assessements on Scrum.org, there are some really good (free) mock assessements available

The most useful mock assessements to me were:

I retried these mock assessements multiple times till I could achieve 100%.
Try not to focus on how much questions you answered wrong, but why did you get them wrong. Try to find out which part of the Scrum Guide the question relates to, and try to understand why the answer you provided is not correct, or why other answers fit better according to the Scrum Guide
This way you will get a better and deeper understanding of the Scrum framework

The final assessement

Once you are ready to take the final assessement, here are some tips that can make a difference during the exam

Keep your eye on the clock, don't waste time
Rely on your knowledge, there is not a lot of time to go looking for answers on the internet
Read the questions thoroughly, there can be trick questions where one word in the question can make the difference
Read all the answers before picking the one you think is right. If you are unsure about the answer, try to eliminate the ones you know are certainly wrong

Summary

I hope this gives a clear summary on the available resources to prepare for the PSM I assessment/certification, or at least give you some direction/helps to focus on what to study.
This is (of course) only a small grasp of the available resources related to the PSM I assessment, but they are the ones I felt were the most useful to me, and which I used the most to achieve the PSM I certification

(Reading, understanding and passing all the open and mock assessments is also no guarantee that you will pass the final assessment)

5 useful Git-commands

Brent Vanwildemeersch — Mon, 20 Dec 2021 12:39:31 +0000

Create a new branch

Using the git terminal may still be the fastest way of creating a new branch, even with Git integration tools in code editors as VS Code.

git checkout -b <new-branch-name> master

Rename your Git-branch (local and remote)

Having a branch naming convention is a good practice and will particularly be usefull in support of git automation workflows.
But sometimes you will find your branch not aligned with the set naming convention, and you already pushed code to the remote branch.
With the following commands you can adjust your local and remote branch name

#Checkout the branch you want to rename
git checkout <old-branch-name>

#Rename the branch locally
git branch -m <new-branch-name>

#Delete the old branch from remote 
git push origin :<old-branch-name><new-branch-name>

#Reset upstream branch for the new branch name
git push origin -u <new-branch-name>

Uncommit local commits

Sometimes you can have made a commit, which you now regret and you want to remove. There are several ways to remove/undo these commits

#Keep the changes you made, but undo the commit
git reset --soft HEAD^

#Undo the commit and destroy all made changes
git reset --hard HEAD^

#Destroy/Undo more than 1 commit (2 commits in example) 
git reset --hard||--soft HEAD~2

Delete a file/multiple files from Git-branch (local and remote)

Deleting a file(s) from remote could be useful if the file is deprecated or isn't supposed to be in the git repository in the first place.

#Remove your file(s) locally 
git rm <file-a> <file-b> ...

#Commit your changes 
git commit -m "Commit message"

#Push changes to git
git push

Remove dead branches

When you work on decent sized projects, it can occur that the git-repository has tens or hundreds of branches from previous pull requests.
Most of these branches are probably already merged and deleted on the remote repository, but they still are listed on your local machine.
To delete these dead branches, use the following command

git remote update --prune

Use Powershell within Hyper Terminal (Windows)

Brent Vanwildemeersch — Tue, 17 Nov 2020 09:14:21 +0000

How to set up your Hyper-terminal environment to use Powershell as default. Only for windows

Open `.hyper` config file from Hyper terminal

Go to the menu
Click edit
Click Preferences

Open `.hyper` config file from File Explorer

Go to C:\Users\{user}\AppData\Roaming\Hyper
Open .hyper config in editor

Add Powershell.exe location

Scroll down to the shell argument in the .hyper config.
Replace the value after shell: with "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
Remove --login from shellArgs:[]. --login argument will prevent Powershell from opening.

Reload Hyper Terminal

Close Hyper terminal and restart Hyper
Or click View</> and click Reload or Full Reload

Powershell should now be running as default in your Hyper terminal

How to deploy your Node App/API on Heroku

Brent Vanwildemeersch — Mon, 16 Nov 2020 19:25:30 +0000

Deploying a website/web app is easy in these modern times with deploying services such as Firebase, Netlify,...
But to deploy Node apps or apps that have some sort of communication with backend-services or database, we have to look further than one of the static deployment services.
To deploy an app like this, we need to look at services like Heroku, Back4App, or Google App Engine.
In this example, Heroku will be used for deployment.

This guide can be used for Node.js web apps, but also for Node API's using .env variables. This API is built with Express.

1. Make your API production-ready

Port listeners

When building your app, a port was set to where the app should listen too. (Mostly in the root file like index.js/app.js)
For example:

app.listen(3000, () => {
  console.log(`App listening on http://localhost:3000`);
});

If there is still a hardcoded port number in use as a listener for the app, this needs to be changed.
To be able to run the app on the Heroku servers, the port needs to change to an environment variable but can be used in combination with the hardcoded value.
For example:

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.warn(`App listening on http://localhost:${PORT}`);
});

After adjusting your code, the application will run locally on port 3000 but will use the environment variable on the Heroku servers.

Package.json

In the package.json, create a command that will start your app on the Heroku server
For example npm start

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon ./index.js",
    "start": "node index.js"
  },

In this example, npm start can be used to run the app on the Heroku server, or locally in production mode, and the dev can be used to run the app in development using nodemon.
We will use the command to start the app in production in the Procfile

Procfile

A Procfile is a Heroku file that defines the dynos settings for your project. The content of your Procfile will define how Heroku will start your Node app.

Create a Procfile in the root of your project
Add the content web: to the newly created Procfile let it be followed by your command to run the node app in production. In this case, the Procfile will look as following

web:npm start

You can also call node index.js directly if you want.

2. Create a new project on Heroku

When logged in to the Heroku platform, you can create a new Heroku-app in the dashboard by clicking the New button.
After giving it a name and choosing a region, we can now link our codebase to our Heroku app.

3. Link your repository to Heroku

You can link your codebase in several ways to your Heroku app:

Using the Heroku CLI in combination with Git
Using the Heroku CLI in combination with Docker
Using Github to connect your repository directly to the app

Since the API codebase in this example was hosted on Github, we opt to connect the repository directly to the app.
This means every time a commit is done to the master/main branch of the repository, the Heroku app will rebuild and re-deploy.

4. Add environment variables to Heroku

If you are using a .env file in your Node App or API to store environment variables or to keep credentials to API's or others hidden, you will have to add the env variables stored in your .env file manually to the Heroku app.
These can be done with Heroku CLI, or within the GUI of your Heroku app

Go to the settings tab of your Heroku app
Go to Config Vars and click Reveal Config Vars
Add the variables from the .env file as key-value pairs to the Config Vars of your app

Heroku cannot read nor process .env files, so it will not be able to access your environment variables necessary for the deploying app.
If you are using an .env file and you are not adding the Config Vars to your app, your app will not work.

5. All set, API should be up and running

After following every step in this guide, the API should now be up and running on the Heroku servers.
In the case of an API, it can be useful to add some documentation or a landing page when a simple GET request is done to the root URL. This will give visual confirmation the API is up.

6. Deployment success, the app is not working

If the deployment of your app was successful, but your app is not working correctly, you can see the logs of the deployed app making use of the Heroku CLI or the GUI of your app.
Heroku Logging Docs

5 useful browser extensions for front-end developers

Brent Vanwildemeersch — Sat, 14 Nov 2020 06:38:36 +0000

1. Site Palette

A browser extension to create comprehensive color palettes. A must-have tool for designers and front-end developers.
Site Palette will extract all the colors used on a website and create a color palette. You can share and export your palettes to Sketch, Adobe Swatch, and more.

Link to extension

2. Fonts Ninja

Identify fonts used on any website, bookmark them, try them out, and buy them.
This is a great tool to detect on a webpage which fonts are used, and use them in your own code (if free and available of course)

Link to extension

3. ColorZilla

ColorZilla is an advanced Eyedropping tool, Color Picker, Gradient Generator, and much more. Using ColorZilla you can easily extract color from any point in the browser, and copy the color straight to your code editor, Photoshop file, ...

Useful features of ColorZilla

Eyedropper - Get the color of every pixel on the page
Advanced Color Picker
CSS Gradient Generator
Webpage Color Analyzer - Create color palette for webpage
Color History - review recently picked colors

Link to extension

4. Page Ruler

A great tool to measure objects on a webpage. Measures width and height in pixels.

Link to extension

5. JSON Formatter

Extension to show JSON content in the browser in a clear and readable way.
Useful features :

JSON & JSONP support
Syntax highlighting
Collapsable trees, with indent guides
Clickable URLs
Toggle between raw and parsed JSON content
For URLs or local files

Link to extension

Deploy to Github Pages using Github Actions

Brent Vanwildemeersch — Fri, 13 Nov 2020 21:28:35 +0000

My personal site/portfolio has always been hosted on Github Pages, but recently I decided to automate my workflow for my site. I opted to give Github Actions a try to implement a CI/CD process, and build and deploy the codebase to the already existing Github Pages Repository (see GH Pages documentation).

The codebase I used for building and deploying with GH Actions is a VueJS app, but you can adjust the workflow to fit your needs or programming language.

The workflow I used is to deploy built code into the root directory of your GH Pages, not in a subdirectory (Application that will be shown on {{Github_username}}.github.io and not on {{Github_username}}.github.io/myNewApplication

1. Enable Github Actions & init Github workflow

In the GH repository of the codebase, click on the Actions tab.
If not enabled yet, in the Github Actions overview, you can opt to use an already existing workflow, or skip and set up a workflow yourself.(I chose to create my own workflow, but this is a preference)
When selecting a pre-configured workflow, a YAML editor will open with the selected workflow configuration, when opting to create your own, Github will configure a workflow file based on the type of codebase and show you in the YAML editor
You can give the workflow file a different name based on the process/action you want to run in the action(build, deploy, test,...), change the name to branch-specific information (dev, stage, production), or give it a name of choice
(I always initialize and commit the workflow file first, before making any changes, added to the repository, by clicking Start Commit and confirming. Again, this is a preference)
(If not committed yet, you can continue with the next step. If committed first, you will be returned back to the location of where the workflow.yml was added in your repo. To return back to editing the workflow, click Actions, select the latest workflow commit, and click on Workflow file. In this detailed overview, you will be able to change the .yaml file using the edit button.)

2. Adjust the workflow to fit your needs

To be able to build my Vue codebase and deploy my built code, I used the following workflow.yml. I added comments to the file to explain all parts of the workflow.

# Name that will define how it shows up in 
# your Github Action overview for this repository
name: Build and Deploy


# Defines what events the workflow will listen to in repository
# In this case commits and pull-requests on master-branch
on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

# What jobs will run in your workflow -> build_and_deploy
# Jobs can run in parallel or sequentially
jobs:
  build_and_deploy:
    # Type of runner that this job wil run on -> Linux Ubuntu
    runs-on: ubuntu-latest

    # Define which node version to use in the runner.
    # Use node version 14.15.0, latest Node LTS version 
    strategy:
      matrix:
        node-version: [14.15.0]

    # Steps that are part of the build_and_deploy job
    # Steps represent a sequence of tasks that will be executed
    steps:
        # Action that will checkout repository so the workflow can 
        # access the codebase
      - uses: actions/checkout@v2

        # Action allowing caching of node_modules to improve 
        # workflow execution time
        # {{runner.os}} will use defined runner 'ubuntu-latest'
      - name: Cache node_modules
        uses: actions/cache@v2
        env:
          cache-name: cache-node-modules
        with:
          path: ~/.npm
          key: ${{ runner.os }}-build-${{ env.cache-name}}-${{hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-

        # Sets node environment for use in action
        # {{matrix.node-version}} will use Github default Node.js 
        # version
      - name: Node ${{matrix.node-version}}
        uses: actions/setup-node@v1
        with:
          node-version: ${{matrix.node-version}}

        # Run npm commands to install NPM packages
      - name: Install dependencies
        run: npm install

        # Run npm build command for Vue project
      - name: Build Project
        run: npm run build

        # Push built code to the upfront created GH pages repo
      - name: Pushes to another repository
        uses: cpina/github-action-push-to-another-repository@master
        env:
          # Create and store API_TOKEN_GITHUB in repository 
          # secrets -> explained later in this article
          API_TOKEN_GITHUB: ${{ secrets.API_TOKEN_GITHUB }}
        with:
          # Define source directory to push from -> Vue default 
          # built into /dist folder
          source-directory: 'dist'
          # Set user settings and repository to push to
          destination-github-username: '{{Your_Username}}'
          destination-repository-name: '{{GH_Pages_Repository}}'
          user-email: {{Your_email}}

How to create API_TOKEN_GITHUB secret
Generate your personal token following the steps:

Go to the Github Settings (on the right-hand side of the profile picture)
On the left-hand side pane click on "Developer Settings"
Click on "Personal Access Tokens"
Generate a new token, choose "Repo". Copy the token.

Then make the token available to the Github Action following the steps:

Go to the Github page for the repository that you push from, click on "Settings"
On the left-hand side pane click on "Secrets"
Click on "Add a new secret" and name it "API_TOKEN_GITHUB"

Now your Github repository secret will be available as {{ secrets.API_TOKEN_GITHUB}} in your workflow.

Docs for used actions and settings

3. Commit to the master branch to verify it's working

All set, after committing the updated version of the workflow.yml file and creating a change on the master-branch (in this case) you should see an ongoing GH Action that will build your codebase and then push it to the destination repository, your original Github Pages repository.
You can follow your build steps in the detailed console logs when selecting your latest commit in the Actions</> overview

Docker: Angular setup + issue exposed port not accessible

Brent Vanwildemeersch — Fri, 06 Nov 2020 10:22:13 +0000

Dockerizing an Angular application + how to solve the issue of an exposed port on the Docker container is not accessible in your browser

Create DockerFile

Create a DockerFile in the root folder of the project with the following content.

FROM node:14.15.0

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json /app/package.json
RUN npm install
RUN npm install -g @angular/cli@10.2.0


COPY . /app

CMD npm start

Use the latest LTS version of Node.js to create the Docker container
Create a working directory in the container (WORKDIR /app)
Copy package.json and install all dependencies in Docker container
Install the latest version of the angular-cli globally in the container
Copy the current directory into the /app directory of the container
Add the command npm start

Create Docker Image

Create a new DockerImage with the name of your app (angularapp) and a tag of choice (dev in this case).
Then add the current directory (.) as a second parameter to the build command

docker build -t angularapp:dev .

Run Docker container with the created image

docker run -v ${PWD}:/app -v/app/node_modules -p 4200:4200 --rm angularapp:dev

bash

-v ${PWD}:/app mounts the code in the containers /app directory
-v/app/node_modules mounts the node_modules of the container to be used instead of the locally installed node_modules folder. Deleting the locally installed node modules is possible now
-p 4200:4200 exposes the 4200 port (ng serve uses default port 4200) of the Docker container to other docker containers, and maps it to the 4200 port of the Docker host
--rm will remove all mounted volumes after the container exits
angularapp:dev defines which image with which tag to run

Issue of unaccessible exposed ports

After executing the docker run command the container is up and running. Running docker ps confirms this.

Using the container_id or container name and running docker port {container_id/container name} shows that port 4200 of the host is mapped to the 0.0.0.0:4200 of the running container
(4200/tcp -> 0.0.0.0:4200)

But using http://localhost:4200 in the browser will not give any results. The browser tells the page is not available/accessible.

Entering the container and verifying that the Angular local dev-server is running in the container and returning a valid HTML page is confirming that the container is working, access from the Docker host is the current issue

How to verify Angular dev-server is up and running
> docker exec -it {container_id/container name} /bin/bash
> curl localhost:4200
A valid HTML file should be visible

The issue is that, if we check the Angular-cli docs for serving an application(ng serve), the default host the dev-server listens too is localhost. Unfortunately, an outside connection (from Docker host' browser) to the Docker container is not using localhost

If we add the following params to the ng serve command to ng serve --host 0.0.0.0 and restart the docker container, using http://localhost:4200 in the Docker host browser should now work

DEV Community: Brent Vanwildemeersch

How to change your PHP version on Ubuntu 22.04

Info

Installed versions list

Change active PHP version

Enable hibernate on Ubuntu 20.04

1. Open a new shell session

2. Run command to open file

3. Edit the file to enable hibernate on closing lid

4. Apply the changes

How to set default NVM version for all Linux shells

Fix Microsoft Teams screen sharing on Ubuntu 22.04

Problem

Cause

Solution

Bun command not found on Linux

1. Edit the .bashrc file

2. Add the following lines at the end of your .bashrc file

3. Close your terminal and open a new shell

How to prepare yourself for the Pro Scrum Master Certification (PSM 1)

Introduction

Scrum Guide

Nexus Guide

Scrum Glossary

Scrum open assessments

Mock Assessments

The final assessement

Summary

5 useful Git-commands

Create a new branch

Rename your Git-branch (local and remote)

Uncommit local commits

Delete a file/multiple files from Git-branch (local and remote)

Remove dead branches

Use Powershell within Hyper Terminal (Windows)

Open .hyper config file from Hyper terminal

Open .hyper config file from File Explorer

Add Powershell.exe location

Reload Hyper Terminal

How to deploy your Node App/API on Heroku

1. Make your API production-ready

Port listeners

Package.json

Procfile

2. Create a new project on Heroku

3. Link your repository to Heroku

4. Add environment variables to Heroku

5. All set, API should be up and running

6. Deployment success, the app is not working

5 useful browser extensions for front-end developers

1. Site Palette

2. Fonts Ninja

3. ColorZilla

4. Page Ruler

5. JSON Formatter

Deploy to Github Pages using Github Actions

1. Enable Github Actions & init Github workflow

2. Adjust the workflow to fit your needs

3. Commit to the master branch to verify it's working

Docker: Angular setup + issue exposed port not accessible

Create DockerFile

Create Docker Image

Run Docker container with the created image

Issue of unaccessible exposed ports

1. Edit the `.bashrc` file

2. Add the following lines at the end of your `.bashrc` file

Open `.hyper` config file from Hyper terminal

Open `.hyper` config file from File Explorer