DEV Community: Annie Taylor Chen

Davinci Resolve 19.1.2 x Linux Mint 22 AAC Audio Workaround

Annie Taylor Chen — Fri, 03 Jan 2025 19:50:37 +0000

If you are new to Davinci Resolve and Linux Mint you might run into the issues with AAC audio format not loaded properly in your mp4 files. This is due to license issues but so far Davinci Resolve (19.1.2 at the time of writing) has not come up with a solution either in paid Studio version or free version. Therefore we might need a workaround for such.

Step 1. First you need to install FFmpeg

sudo apt install ffmpeg

Step 2. Then make a new folder. Move all your mp4 files with aac audio to this folder.

Step 3. Make this following into a script, save it as towav.sh or any name you like, you just need to change the command line. Make sure this file lives in the same folder you made in step 2.

#!/bin/bash
for f in $(ls -1v | grep -i mp4);do
    extension="${f##*.}";
   ffmpeg -i "$f" -stats -hide_banner -acodec pcm_s16le -vn "${f/%$extension/wav}";
done

Step 4. Now you run the command line

cd ./folderYouMade
./towav.sh

This will batch process your mp4 files and extract audios from them and save as a separate audio files in wav format.

Step 5. You now can load mp4 files in Davinci Resolve, delete the associated audio track and replace them with the wav one.

I do wish there would be some solution in the future so it's more intuitive to work, but before that this is the best workflow I've found so far.

Read further:

How to Install DaVinci Resolve 19 (studio) on Linux Mint 22 with AMD Radeon Graphics Card with a Script fast 2025

Annie Taylor Chen — Thu, 02 Jan 2025 13:14:30 +0000

If you want to do it from scratch you can refer to my previous post. However I've tried a new method and this works like a charm and it's much hassle-free and fast. Note I've previously installed the beta version and now I bought the studio version so I am installing the studio version and use it with license key. This might be different if you're using the free version. But in theory the process should work for both.

Step 1
You need to download the zip file from Davinci Resolve website, put it in your Downloads folder. Note, you would need to change the script if you put it somewhere else. Make sure the name follows the zip file pattern in the script below. (It should be right if you download directly from the official site, you don't need to change anything.) Do NOT upzip it.

Step 2
Make this script executable, and place it in your Downloads folder. Name it as DR_MINT.sh. Again change the command if you plan to name it something else!

#!/bin/bash

# Script to Install DaVinci Resolve on Linux Mint 22

set -e  # Exit on any error

# Variables
ACTIVE_USER=$(logname)
HOME_DIR=$(eval echo "~$ACTIVE_USER")
DOWNLOADS_DIR="$HOME_DIR/Downloads"
EXTRACTION_DIR="/opt/resolve"
ZIP_FILE_PATTERN="DaVinci_Resolve_*.zip"

# Step 1: Ensure FUSE and libfuse.so.2 are Installed
echo "Checking for FUSE and libfuse.so.2..."
if ! dpkg -l | grep -q fuse; then
    echo "Installing FUSE..."
    sudo apt update
    sudo apt install -y fuse libfuse2
fi

if [ ! -f /lib/x86_64-linux-gnu/libfuse.so.2 ]; then
    echo "Error: libfuse.so.2 is not found. Installing libfuse2..."
    sudo apt install -y libfuse2
fi

# Step 2: Install Required Qt Libraries
echo "Installing required Qt libraries..."
sudo apt install -y qtbase5-dev qtchooser qt5-qmake qtbase5-dev-tools libqt5core5a libqt5gui5 libqt5widgets5 libqt5network5 libqt5dbus5 \
libxrender1 libxrandr2 libxi6 libxkbcommon-x11-0 libxcb-xinerama0 libxcb-xfixes0 qtwayland5 libxcb-glx0 libxcb-util1

# Step 3: Navigate to Downloads Directory
echo "Navigating to Downloads directory..."
if [ ! -d "$DOWNLOADS_DIR" ]; then
    echo "Error: Downloads directory not found at $DOWNLOADS_DIR."
    exit 1
fi
cd "$DOWNLOADS_DIR"

# Step 4: Extract DaVinci Resolve ZIP File
echo "Extracting DaVinci Resolve installer..."
ZIP_FILE=$(find . -maxdepth 1 -type f -name "$ZIP_FILE_PATTERN" | head -n 1)
if [ -z "$ZIP_FILE" ]; then
    echo "Error: DaVinci Resolve ZIP file not found in $DOWNLOADS_DIR."
    exit 1
fi

unzip -o "$ZIP_FILE" -d DaVinci_Resolve/
chown -R "$ACTIVE_USER:$ACTIVE_USER" DaVinci_Resolve
chmod -R 774 DaVinci_Resolve

# Step 5: Run the Installer or Extract AppImage
echo "Running the DaVinci Resolve installer..."
cd DaVinci_Resolve
INSTALLER_FILE=$(find . -type f -name "DaVinci_Resolve_*.run" | head -n 1)
if [ -z "$INSTALLER_FILE" ]; then
    echo "Error: DaVinci Resolve installer (.run) file not found in extracted directory."
    exit 1
fi

chmod +x "$INSTALLER_FILE"

# Set Qt platform plugin path and debug settings
export QT_DEBUG_PLUGINS=1
export QT_QPA_PLATFORM_PLUGIN_PATH=/usr/lib/x86_64-linux-gnu/qt5/plugins/platforms
export QT_PLUGIN_PATH=/usr/lib/x86_64-linux-gnu/qt5/plugins
export LD_LIBRARY_PATH=/usr/lib/x86_64-linux-gnu:$LD_LIBRARY_PATH

# Attempt to run the installer with FUSE; fallback to extraction
if ! SKIP_PACKAGE_CHECK=1 ./"$INSTALLER_FILE" -a; then
    echo "FUSE is not functional. Extracting AppImage contents..."
    sudo mkdir -p "$EXTRACTION_DIR"
    ./"$INSTALLER_FILE" --appimage-extract
    sudo mv squashfs-root/* "$EXTRACTION_DIR/"
    sudo chown -R root:root "$EXTRACTION_DIR"
fi

# Step 6: Resolve Library Conflicts
echo "Resolving library conflicts..."
if [ -d "$EXTRACTION_DIR/libs" ]; then
    cd "$EXTRACTION_DIR/libs"
    sudo mkdir -p not_used
    sudo mv libgio* not_used || true
    sudo mv libgmodule* not_used || true

    # Replace with system versions
    if [ -f /usr/lib/x86_64-linux-gnu/libglib-2.0.so.0 ]; then
        sudo cp /usr/lib/x86_64-linux-gnu/libglib-2.0.so.0 "$EXTRACTION_DIR/libs/"
    else
        echo "Warning: System library libglib-2.0.so.0 not found. Ensure compatibility manually."
    fi
else
    echo "Error: Installation directory $EXTRACTION_DIR/libs not found. Skipping library conflict resolution."
fi

# Step 7: Cleanup
echo "Cleaning up installation files..."
cd "$DOWNLOADS_DIR"
rm -rf DaVinci_Resolve

echo "DaVinci Resolve installation completed successfully!"

Step 3
Now you run

cd ./Downloads
sudo ./DR_MINT.sh

enter your password it should be good to go!

Note it might take a little while, so be patient!

I hope this will work for you, if not leave a comment so we could see if we can debug from there.

How to Install DaVinci Resolve 19 (beta) on Linux Mint 22 with AMD Radeon Graphics Card

Annie Taylor Chen — Fri, 09 Aug 2024 20:39:02 +0000

UPDATE: if you are reading this from Jan 2025 and on, please check my latest article and see if this way works for you.
How to Install DaVinci Resolve 19 (studio) on Linux Mint 22 with AMD Radeon Graphics Card with a Script fast 2025

A few years ago I wrote a post on this when I managed to solve the problem... then I wasn't really using DaVinci Resolve for a while. Fast forward to today, I was happy that Linux Mint has updated to 22, and DaVinci Resolve has grown to be 19 (beta), I thought things would become easier but nope, not at all! After naively trusting things would work like a charm, I managed to destroy my newly installed Linux Mint 22 with all things extra copied and configured nicely to my satisfaction, only to discover installing libraries required for DaVinci Resolve 19 Beta would totally destroy the whole booting process! Now I am forced to reinstall Linux Mint 22 totally from scratch, the first thing I do is to fix DaVinci Resolve first and this time I am going to do my research, experiment, and write things down!

My hardware for your reference:

1. Make DaVinci Resolve a deb for Linux Mint

If you go to DaVinci Resolve's website for download, you will find the linux version ends with .run which is made for CentOS and not debian system, such as Ubuntu or Linux Mint. Daniel Tufvesson has done a good job making a tool to convert it. Here is the link.
https://www.danieltufvesson.com/makeresolvedeb
Follow the instruction there, until you get the deb.

2. run script

sudo apt install build-essential checkinstall

3. add your user to the video and the render group

sudo usermod -a -G render,video [username]

4. install ROCm

Reference: https://rocm.docs.amd.com/projects/install-on-linux/en/latest/install/native-install/ubuntu.html
You don't need to install kernel driver, just the ones that are needed.

4.1 Package signing key
Download and convert the package signing key.

# Make the directory if it doesn't exist yet.
# This location is recommended by the distribution maintainers.
sudo mkdir --parents --mode=0755 /etc/apt/keyrings

# Download the key, convert the signing-key to a full
# keyring required by apt and store in the keyring directory
wget https://repo.radeon.com/rocm/rocm.gpg.key -O - | \
    gpg --dearmor | sudo tee /etc/apt/keyrings/rocm.gpg > /dev/null

4.2 Register ROCm packages
Add the ROCm repository.Makes sure it is ubuntu 24.04 as that's what LM22 is based on.

echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/rocm.gpg] https://repo.radeon.com/rocm/apt/6.2 noble main" \
    | sudo tee --append /etc/apt/sources.list.d/rocm.list
echo -e 'Package: *\nPin: release o=repo.radeon.com\nPin-Priority: 600' \
    | sudo tee /etc/apt/preferences.d/rocm-pin-600
sudo apt update

4.3 install the rocm6.2 (this might take a bit time)

sudo apt install rocm-libs6.2.0 rocm-opencl-sdk6.2.0 rocminfo6.2.0

5. add /opt/rocm/bin to your PATH

6. reboot

7. now we need to install the deb

sudo dpkg -i davinci-resolve_19.0b6-mrd1.7.1_amd64.deb

8. start the program

By now you should see the davinci resolve buttons shown up in the menu like below. However, if you click on them it will not work.

Because it ships versions of some system libraries that are incompatible with current Linux Mint. But these libraries exist on your system, so you can force Resolve to use the ones provided by the system rather than it's own. Additionally it won't find your graphics card unless it looks for libraries in the rocm directory. Use this command to start DaVinci Resolve:

LD_PRELOAD=/lib/x86_64-linux-gnu/libglib-2.0.so.0:/lib/x86_64-linux-gnu/libgio-2.0.so.0:/lib/x86_64-linux-gnu/libgdk_pixbuf-2.0.so.0:/lib/x86_64-linux-gnu/libgmodule-2.0.so.0  LD_LIBRARY_PATH=/opt/rocm/lib /opt/resolve/bin/resolve

then you get something like this:

9. change menu entry

On the menu, find Sound & Video -> DaVinci Resolve -> right click and in the dropdown you will find Properties, click on that -> A window will show up, you will find an input called command, paste the following command into that input. Now when you click this button in the menu, DaVinci Resolve will finally start as expected!

env LD_PRELOAD=/lib/x86_64-linux-gnu/libglib-2.0.so.0:/lib/x86_64-linux-gnu/libgio-2.0.so.0:/lib/x86_64-linux-gnu/libgdk_pixbuf-2.0.so.0:/lib/x86_64-linux-gnu/libgmodule-2.0.so.0  LD_LIBRARY_PATH=/opt/rocm/lib /opt/resolve/bin/resolve

Voila that's it...Now I only hope things will run from now on.

Read further:

How to set up Vite React TS project with Vitest

Annie Taylor Chen — Wed, 24 Aug 2022 17:03:44 +0000

This tutorials will work for self-generated vite react-ts projects. Please also refer to the following two repos if you have different requirements:

I personally ran into quite some TS errors and after some hours of digging I found the following settings worked for me. Hence I'd like to write it down and hope it will benefit anyone who has encountered the same issue.

1. Install packages. You will need those following:

@testing-library/dom
@testing-library/jest-dom
@testing-library/react
@testing-library/user-event
@types/testing-library__jest-dom
@vitest/ui
vitest

2. Add scripts:

"test": "vitest",
"test:ui": "vitest --ui",
"coverage": "vitest run --coverage",

3. In your `vite.config.ts` add, note the triple slash reference types are important to include here:

/// <reference types="vitest" />
/// <reference types="vite/client" />

import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],

  ...bla bla bla

  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts',
    // you might want to disable it, if you don't have tests that rely on CSS
    // since parsing CSS is slow
    css: true,
  },
});

4. In your `tsconfig.json` include:

 "include": ["src", "@testing-library/jest-dom"],

5. In your root directory, have a file named `setupTests.ts` and include those:

/// <reference types="vitest/globals" />
import '@testing-library/jest-dom';
import "@testing-library/jest-dom/extend-expect";

6. Make a utils folder and include a `test-utils.tsx` file and put those in the code:

/* eslint-disable import/export */
import { cleanup, render } from '@testing-library/react'
import { afterEach } from 'vitest'

afterEach(() => {
  cleanup()
})

const customRender = (ui: React.ReactElement, options = {}) =>
  render(ui, {
    // wrap provider(s) here if needed
    wrapper: ({ children }) => children,
    ...options,
  })

export * from '@testing-library/react'
export { default as userEvent } from '@testing-library/user-event'
// override render export
export { customRender as render }

7. Finally, try writing a test, such as `App.test.tsx`

import {describe, expect, it} from 'vitest';
import App from './App';
import { render, screen, userEvent } from './utils/test-utils'


describe('Simple working test', () => {
  it('the title is visible', () => {
    render(<App />);
    expect(screen.getByText(/Ellida Admin/i)).toBeInTheDocument();
  });
``
  it('should increment count on click', async () => {
    render(<App />)
    userEvent.click(screen.getByRole('button'))
    expect(await screen.findByText(/count is: 1/i)).toBeInTheDocument()
  })

  it('uses flexbox in app header', async () => {
    render(<App />)
    const element = screen.getByRole('banner')
    expect(element.className).toEqual('App-header')
    expect(getComputedStyle(element).display).toEqual('flex')
  })
});

Then type in command line either pnpm test if you just want it to run in the terminal or pnpm test:ui if you want to see the nice UI part. npm or yarn would work similar.

Slimbook pro x AMD vs. MacBook Air M1, which to choose and why?

Annie Taylor Chen — Tue, 02 Nov 2021 22:30:32 +0000

I am comparing two laptops for web developer. I don't need much storage as it'll be used mainly as working computer. So the focus is other performance.

Slimbook pro x AMD (Linux)

AMD Ryzen 7 4800 H with 8 cores and 16 threads 8M cache 2.9 GHz Turbo 4.2 GHz
AMD Radeon ™ Graphics Vega 7 1600 MHz Compatible with 5.5 kernels
Display: 14 inches FullHD IPS LED high definition and high color range True Color cover 100% sRGB - 300 nits
Keyboard: backlight
Material: Aluminium
USB 3.0 Ports: 2
USB-C Ports: 1
USB 2.0 Ports: 1
HDMI Ports: 1
RJ45 Ports: 1
RAM: 32GB 2 non-soldered DDR4 slots 3200 Mhz
SSD: 250GB SSD NVMe
price: 1,169.00 EUR | 1,353.88 USD

Tuxedo Pulse 14

Have almost exact the same with Slimbook pro above, just color is dark gray and is a bit ugly....

price: 1,090.00 EUR | 1,261.87 USD

Apple M1 Chip with 8-Core CPU and 8-Core GPU 512GB Storage

Apple M1 chip with 8‑core CPU, 8‑core GPU, and 16‑core Neural Engine
8GB unified memory
512GB SSD storage¹
Retina display with True Tone
Magic Keyboard
Touch ID
Force Touch trackpad
Two Thunderbolt / USB 4 ports
price: 1 078,50 EUR | 1,249.00 USD

Which one would you choose and why?

Study Notes for Kent C. Dodds' Javascript Testing Course

Annie Taylor Chen — Tue, 03 Aug 2021 16:19:13 +0000

This is a mini guide for developers who are new to testing. The lessons are mainly learnt from Kent C. Dodds' Javascript Testing course. Kent C. Dodds is the library author for Testing Library, which is the official recommendation for Create React App.

General testing strategies for frontend apps

Static test/format - Eslint and Prettier
To eliminate type errors and make code looks easy to read and formatted consistently.
Unit test - Jest + React testing library
Test individual key-components
Integration and Snapshot tests - Jest + MSW
Render the login pages with different responses from the metadata endpoint and see that buttons and forms are created properly
End to End (e2e) test - Cypress + BrowserStack
Implement cypress tests that run our login flow. Run the tests with BrowserStack to get coverage in different browsers. Integrate to GitHub to require approval before release
Acceptance tests/Visual Regression Test - Percy from BrowserStack (without AI) or Applitools (with AI)
Get screenshots
Synthetic tests and monitoring - Datadog
Implement synthetic tests in Datadog that runs different flows. Add real user monitoring in Datadog

Notes from the course:

0. Tests types, configuration

What are unit, static, integration and e2e tests?
The explanation and code samples here:
https://kentcdodds.com/blog/unit-vs-integration-vs-e2e-tests
this post also talks about different levels of tests and the pitfalls. The more tests you have, the higher the trophy you get at, the slower the tests will run (because of too many tests) and more money it will cost. Manual testing can always be expensive. Use strategies that suit your business needs and budget.
How do I use Node debugger and Chrome dev tool while running my tests?
Add a debugger in your code where you want to pause.
Add a script like this

"test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --watch"

It means we are using node’s inspect break, it would mean node will stop process, and we pass the jest binary to node, since jest will run all the tests in parallel, we want to use “runInBand” to run it one by one.
Then go to “chrome://inspect” in your chrome browser, and you will see the the inspect appearing in “Remote Target” section. Click on the “Inspect”, you will have a browser pop up where you can check call stacks etc.

1. Static

How to configure Eslint and Prettier?
In the eslintrc files, the rules can be found on https://eslint.org/docs/user-guide/configuring
In the prettierrc, the rules for formatting can be found on https://prettier.io/playground/, click the “show options” in the bottom left, then copy the config JSON.
It is also recommended to use the extensions within your VSCode IDE so you can see errors while you code.
What do those ignore files such as eslintignore do?
So the linter won’t check errors for the files listed here. For instance, if you run build we will have a dist folder, and we don’t want the linter to check for errors here.
You can configure it in package json like this:

”lint”: “eslint --ignore-path .gitignore . “

It means when you run npm run lint the linter will seek ignore path, which is specified in our gitignore file and don’t check those, otherwise check the rest in the repo.

What are rc files?
In short:
They're not specific to node.
They're just another file
As far as formats, they can be almost anything — it just depends on what you'll use to parse and read them. YAML, JSON, and ini are probably the most common (at least that I've seen).
In most cases they seem to follow the convention .[program or binary name]rc
package.json files can contain external metadata appropriate for config, it just depends on whether or not your project will expect a .rc file or expect it in package.json (or both, as in the case of babel)
https://stackoverflow.com/questions/36212256/what-are-rc-files-in-nodejs
What is monkey patch?
A monkey patch is a way for a program to extend or modify supporting system software locally (affecting only the running instance of the program).
Application includes : Replace methods / classes / attributes / functions at runtime, e.g. to stub out a function during testing;
https://en.wikipedia.org/wiki/Monkey_patch
What are githooks and husky?
Git hooks are scripts that Git executes before or after events such as: commit, push, and receive. Git hooks are a built-in feature - no need to download anything. Git hooks are run locally.

https://githooks.com/

Husky is a JavaScript library that makes Git hooks easier. It offers the possibility of integrating them directly into our JavaScript projects, saving us from having to deal with startup guidelines or startup scripts on repository initialization.

https://medium.com/better-programming/a-complete-pre-commit-workflow-cea6e34f0032

How can I automatically format the code according to prettier and lint rules before the commit?
Use husky and lint-staged libs.
https://www.npmjs.com/package/husky
https://www.npmjs.com/package/lint-staged
How do I run all scripts at one go?
Try https://www.npmjs.com/package/npm-run-all
What do the ** and * means in the test file path in config file?
Example:

<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}

Globstar allows ** on its own as a name component to recursively match any number of layers of non-hidden directories. Also supported by the JS libraries and Python's glob.

a/*/c    //would match a/b/c, a/f/c, a/c/c etc
a/**/c   //would match a/b/c, a/b/f/t/c

Here it means we want to find the “test” folder, in src folder, but we don’t care where it is located or nested, then we look for any file that has the js, jsx, ts, or tsx extenstion within this folder (which would be our test files).
https://en.wikipedia.org/wiki/Glob_(programming)

Typescript vs propTypes?
Typescript validates types at compile time, whereas PropTypes are checked at runtime.
If you’re using TS then it’s not necessary to use propTypes, and you can convert them. Read more in this guide
https://davemn.com/2020-07/typescript-vs-proptypes
Compile time vs runtime?
Compile-time is the time at which the source code is converted into an executable code while the run time is the time at which the executable code is started running. Both the compile-time and runtime refer to different types of error.
https://stackoverflow.com/questions/846103/runtime-vs-compile-time

2. Unit Testing

How do I do UI test if I have different framework or compiler rather than React?
Try use Dom Testing Library. You need to render the components first before testing. Otherwise you can use the specific library that were built on it, but caters to specific framework or compiler, which will make it easier.
https://testing-library.com/docs/dom-testing-library/intro
Is there any new update on using React Testing Library?
a. use screen instead of extracting variables from render methods.

// Old way
const { getByTestId } = render(<ResetPasswordForm queryParameters={route} />)
expect(getByTestId('password-input')).toBeEmpty() 
// New way   
render(<ResetPasswordForm queryParameters={route} />)         
expect(screen.getByTestId('password-input')).toBeEmpty()

b. use “userEvent” instead of “fireEvent”, “change” becomes “type” because userEvent mimics real user usage better

// Old way
fireEvent.change(
      getByTestId('email-input'), {
        target: {
          value: brokenEmail
        }
      }
    )
// New way
userEvent.type(
      getByTestId('email-input'), 
      brokenEmail
    )

c. “wait” becomes “waitFor”

d. new mock server is encouraged to be used
https://mswjs.io/

What are common mistakes I should avoid using React Testing Library?
https://kentcdodds.com/blog/common-mistakes-with-react-testing-library
How to test accessibility issues?
Use Jest-axe GitHub - nickcolley/jest-axe: Custom Jest matcher for aXe for testing accessibility ♿️🃏

However, this covers only 30% of real accessibility issues and to improve those you have to manually test with assistive technology that real people use (such as screen reader) and involve disabled people in the user research.

I got a lot of wrapping in act() warning, how it fix that?
It depends on your situation. You shouldn’t just simply wrap things in act() to get away with the warning. Read more in this post:
https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning
There seems to be various ways of querying elements, which way is the best?
There is indeed some priority you should consider when using the query methods. Mostly you should try to mimic the user’s real usage as much as possible. Read more here:
https://testing-library.com/docs/queries/about/#priority
Why I can’t use that getByRole and aria-label to get my password input fields if I toggle between password and text types (so password can be visible)?
It’s an aria-query error so you have to specify the attribute type in input. In this case you can use data-testid instead.

3. Snapshot and Integration Test

What is snapshot testing?
Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly. A typical snapshot test case renders a UI component, takes a snapshot, then compares it to a reference snapshot file stored alongside the test.
In Jest, you can use toMatchSnapshot function. If you have prettier you can use toMatchInlineSnapshot function instead.
https://jestjs.io/docs/en/snapshot-testing#snapshot-testing-with-jest
How do we make effective (and not meaningless and annoying) snapshot tests?
https://kentcdodds.com/blog/effective-snapshot-testing
According to Justin mentioned by Kent, “Most developers, upon seeing a snapshot test fail, will sooner just nuke the snapshot and record a fresh passing one instead of agonizing over what broke it.” So big snapshot test without telling why is not a good idea.
GitHub - kentcdodds/jest-glamor-react: Jest utilities for Glamor and React is a nice tool to have if you are using css in js with react.
And if you use styled-components, try https://www.npmjs.com/package/jest-styled-components
How do I generate test data such as fake user name or posts etc?
Try this library: GitHub - jackfranklin/test-data-bot
How do I pass the params or query in url in my tests?
Before it’s recommended to use history library but now the new way is to use window.history.pushState and BrowserRouter from react-router-dom.

window.history.pushState({}, '', '/search?clientId=client-one');

    customRender(
      <BrowserRouter>
        <Login />
      </BrowserRouter>
    );

Why can’t I use the toBeNull() to test elements that should NOT show up in the dom? Now it’s recommended to write like this instead, we use query for things that will NOT be in the dom, and get for things that will be in the dom.

expect(screen.getByRole('alert')).toBeInTheDocument()
expect(screen.queryByRole('alert')).not.toBeInTheDocument()

How to debug the network request failed error?
First check if you set up the test environment properly, and if you’re running the right test script.
If there are still problems, follow the steps here:
https://mswjs.io/docs/recipes/debugging-uncaught-requests
Test runs alright locally, but getting CI test errors such as network request failure?
It’s complicated, but it’s likely to be caused by network request related issues. The last time we had this problem it was caused by one of the inline-svg library which doesn’t fetch properly. Also the testing environment should be setting locally for msw to work properly.
What is the difference between jest.mock() and MSW?
Answered by Artem who is the main contributor behind MSW lib:
jest.mock helps you to mock an entire implementation of something. This means you become in charge of that something, reducing its integrity. That something (i.e. a request library) no longer behaves as it usually does, it listens to your mock and abides it unquestioningly. In the case of API, when you mock axois or fetch, you become in charge of them.
In NodeJS MSW doesn't mock request clients, but monkey patches request issuing modules. That means that your app still makes a real request, it hits all the logic it should, only to get intercepted by MSW and then give you the control over how to respond to a request.
I find it fair to compare jest.mock with NodeJS API of MSW, as jest runs in NodeJS. Apart from using MSW with jest and any other testing framework, you can reuse the mocks you write in a browser. In fact, you'd be using identical mocks, no need to rewrite/tweak/configure. MSW is a tool you adopt to be in charge of your network and does so without deviating your app, and it's a tool you can benefit from on many levels: when testing, developing or debugging.

4. E2E Testing

Cypress vs Selenium?
https://applitools.medium.com/cypress-vs-selenium-webdriver-better-or-just-different-2dc76906607d
Annie: I personally would prefer Cypress because it’s still Javascript.
I installed cypress but see the lint error, how to fix that?
Install eslint-plugin-cypress then configure a eslintrc.js file within cypress folder. For example:

module.exports = {
  root: true,
  plugins: ['eslint-plugin-cypress'],
  extends: ['plugin:cypress/recommended'],
  env: { 'cypress/globals': true },
};

How do I configure cypress?
Check here for options: https://docs.cypress.io/guides/references/configuration.html#Folders-Files
The cy.get.('.236r8yf0yyhsleho') with generated class names are annoying, is there any human-friendly way to select those?
Install @testing-library/cypress in your dependencies, import in the cypress/support/index.js file import '@testing-library/cypress/add-commands, then you can use regex to select text. Since it’s asynchronous we mostly use findByXXXX series.
Another trick is to add const user = cy, then you will see it from a user perspective instead of cypress robot.
How do I avoid the repeated part of the code, such as login, or register?
You can abstract those into functions and add to Cypress commands in cypress/support/commands.js, then use it in the test such as

 cy.createUser().then( user => { the rest of the cypress tests…})

How to solve the Babel env error undefined?
Check out the solution here: react-app presets in babel configuration throw error because missing NODE_ENV or BABEL_ENV environment variables · Issue #6755 · cypress-io/cypress
How to test dark mode?
See the mvp and solution in this repo:
GitHub - AnnieTaylorCHEN/test-cypress-darkmode: an MVP to test cypress loading darkmode with styled components
Cypress browser doesn’t run properly (such as not connecting to the internet) when VPN is on, why?
Cypress cannot load pages behind a corporate proxy · Issue #672 · cypress-io/cypress
According to the above thread, isnce Cypress acts as a reverse proxy to the browser (which also ends up terminating traffic amongst other things), when it makes the external requests to 3rd party servers, it needs to respect the system proxy settings. That's why this is failing.

5. Nodejs Test

Any way to improve error message for jest test when there is a function with multiple cases?
Try abstract it with GitHub - atlassian/jest-in-case: Jest utility for creating variations of the same test
What are Spies, Mocks and Stub?
Spies: Creates fake functions which we can use to track executions. This means we can tell/ find out whether the function has been executed/ how many times its been called etc. We can also use spies on existing functions and get the same capability, to track those functions executions.
Stubs: Enables us to replace functions. This gives us more control. We can return whatever we want or have our functions work in a way that suites us to be able to test multiple scenarios.
Mocks: They are fake methods, that have pre-programmed behavior and pre-programmed expectations.
Basic introduction to testing with Chai and Sinon?
How to Test NodeJS Apps using Mocha, Chai and SinonJS

FAQ

Why should I bother with testing?
To give you more confidence that your app will run smoothly, that your users won’t be angry on weekends while nobody is there to answer phone for customer support and nobody is there to fix the bug.
It also helps you to focus and think more about your app, its structure, the code robustness etc.
How do I cover all the test cases?
It is advised not to go after 100% coverage but cover the most cases, especially in the UI testing. It is also suggested to use user-centered testing strategy that focuses on testing how the user will use the app, instead of implementation details. If the app pass most tests and it’s running well, you can give it a rest until later you find some edge case.
How do I know what to test?
Probably most asked and most difficult for beginners. Some developers said just to write more tests, explore the options and you will become more experienced. Some said you can see it from a user’s perspective, what’s important for them? How will they use the app? What possible errors they might bump into during their usage, at which stage? What is crucial for the business that failure costs more loss?
What are implementation details and why we should not focus on testing on that?
There are two distinct reasons that it's important to avoid testing implementation details. Tests which test implementation details:
Can break when you refactor application code. False negatives
May not fail when you break application code. False positives
https://kentcdodds.com/blog/testing-implementation-details
Why don’t we use Enzyme any more?
It doesn’t encourage the best practice.
You can read the above post, and Kent also said : “With shallow rendering, I can refactor my component's implementation and my tests break. With shallow rendering, I can break my application and my tests say everything's still working.”
https://kentcdodds.com/blog/why-i-never-use-shallow-rendering
How to get good at testing quickly?
There is no quick track, you just have to practice a lot! Mostly it comes from your experiences, so ultimately you just have to write more tests, fail more, and learn from that.
Documentation

References

Jest - https://jestjs.io/docs/en/getting-started
Jest Cheat Sheet - GitHub - sapegin/jest-cheat-sheet: Jest cheat sheet
Jest Dom - GitHub - testing-library/jest-dom: Custom jest matchers to test the state of the DOM
Testing Library / React Testing Library - https://testing-library.com/docs/
Cypress: https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell
BrowserStack - https://www.browserstack.com/docs/
Applitools - Applitools: Automated Visual Testing with Visual AI

How to Add Multiple Github Accounts on One Computer (Linux)

Annie Taylor Chen — Wed, 14 Oct 2020 19:52:25 +0000

Normally, I like to separate work and personal projects by managing different accounts. However, occasionally we might bump into cases where we only have one computer but have to use it for both work and personal matters. Thus, we might need to set up two or more github accounts on one computer. Here is a simple guide on how to do that.

Let's assume that we need to set up two accounts:

Annie, github username: annie (annie@annie.com) - default, personal, global
AnnieWork, github username: anniework (annie@anniework.com) - work only

1. Generating the SSH keys

First let's check if we already have it on our computer by

ls -al ~/.ssh

If we see the id_rsa available, we could use this as our default key for Annie account.

In case we don't have anything, we can generate a default key by typing (-t means type. The possible values are “dsa”, “ecdsa”, “ecdsa-sk”, “ed25519”, “ed25519-sk”, or “rsa”. This flag may also be used to specify the desired signature type when signing certificates using an RSA CA key. The available RSA signature variants are “ssh-rsa” (SHA1 signatures, not recom‐mended), “rsa-sha2-256”, and “rsa-sha2-512” (the default).)

ssh-keygen -t rsa

When asked for location, you just press enter to use the default setting. The default private key and public key will be created at ~/.ssh/id_rsa and ~/.ssh/id_rsa.pub.

For our work account AnnieWork, we need to generate another different SSH key. We save it as ~/.ssh/id_rsa_anniework.

ssh-keygen -t rsa -C "annie@anniework.com" -f "id_rsa_anniework"

Now we should see two different keys created:

~/.ssh/id_rsa
~/.ssh/id_rsa_anniework

2. Adding keys to respective Github accounts

To add ssh keys to github, so we don't need to constantly type our username and password when we want to push something to github. First we need to copy the public key. You can simply go to file folder, open it with an editor and copy, or run this command to do that.

pbcopy < ~/.ssh/id_rsa.pub

Now login to your github account (the Annie account, since we're using the default key here).

Settings > SSH and GPG keys > New SSH Key > Enter a name for your computer, this name should be recognizable so you know which computer it is related to > paste the key you just copied, which looks like a bunch of gibberish letter and numbers > Add key > DONE!

Now for the work account, you repeat the above steps, except you need to copy the key from id_rsa_anniework.pub (work account) instead of id_rsa.pub (default account) and you need to add the key to your Anniework github account.

3. Register the new SSH keys with ssh-agent

To use the keys, we need to register them with the ssh-agent on our computer.

eval "$(ssh-agent -s)"
Agent pid 132819 //this is what you will see

That gets your ssh-agent running, then you add the keys:

ssh-add ~/.ssh/id_rsa
ssh-add ~/.ssh/id_rsa_anniework

4. Create SSH config file

Usually we don't have the config file, so now we can create one to add SSH configuration rules for different hosts.

cd ~/.ssh/
touch config      //create config file
nano config       //use nano to edit the config file

Now in your ~/.ssh/config file, paste the following:

# Default, personal, global - Annie
Host github.com
   HostName github.com
   User git
   IdentityFile ~/.ssh/id_rsa

# Work - AnnieWork
Host github.com-anniework    
   HostName github.com
   User git
   IdentityFile ~/.ssh/id_rsa_anniework

"github.com-anniework" is a notation to differentiate the work github account. Of course you can also set it up as "anniework.github.com", just be consistent when clone the repository.

Another approach is not to create config rules but manually ensure the ssh-agent to attach only one key at a time with any git operation. To do that you can remove all the keys, then add the key you plan to use.

ssh-add -D       //remove all ssh entries in the ssh-agent
ssh-add ~/.ssh/id_rsa   //now we add the default key

Repeat the step when you need to use the work account, just remember to replace the "id_rsa" with "id_rsa_anniework". I personally found this approach a bit troublesome, and prefer the config file approach. But choose whatever suit you the best.

5. Set up the git config user.name and user.email

For the default and global one, you can do

git config --global user.name "Annie"
git config --global user.email "annie@annie.com"
git config -l
user.name=Annie
user.email=annie@annie.com

In this way, when you push code it will be the default setting.

But when you need to work in the work repository, make sure you set it up locally

git config user.name "AnnieWork"
git config user.email "annie@anniework.com"

6. How to clone the repositories

I assume you already know how to clone the repository normally, so I will only cover the work one. When you copy the ssh key you need to modify it like this:

git clone  git@github.com-anniework/repo_name.git

You remember earlier in our ssh config file we set the work account host as "github.com-anniework" right? We need to use this exact name after "git@" when you do git clone.

Double check if we have done it right

git remote -v

Or if we need to update it we do it like:

git remote set-url origin git@github.com-anniework:anniework/repo_name.git

Note the in the "git@github.com-anniework:anniework/repo_name.git", after "git@", it's the host name we set in config file, here "github.com-anniework", then after ":", it's our github username, "anniework", it's advised that you keep the name consistent so you don't get confused.

If we have a local repo that we want to push to github, then we first do git init, then

git remote add origin git@github.com-anniework:anniework/repo_name.git

Then proceed like you usually do and you will find that your work account is adding git commit to your work repository.

It might seem lengthy and slow to set at first time, but once you have it set it up you don't need to care so much! Your git work flow should just work smoothly. :)

How to Install DaVinci Resolve 16 on Linuxmint 20 with AMD Radeon Graphic Card

Annie Taylor Chen — Mon, 12 Oct 2020 22:26:39 +0000

Although Linuxmint usually has built in driver support for AMD graphic card, sometimes we still need to install extra support for some application. Usually it's supposed to be painless, however, I did run into some issues.

0. Prepare your driver

Under linuxmint, menu > system info , you shall be able to see your graphic card's name. Search for its driver on AMD site. For instance mine is:
AMD Radeon RX 5600 OEM/5600 XT / 5700/5700 XT
Download the version for Ubuntu x86 64bit for Ubuntu 20.04.1. You will get a zip file. Unzip it. You can rename the folder to something easy to remember but I am too lazy...

cd Downloads/amdgpu-pro-20.40-1147286-ubuntu-20.04
./amdgpu-pro-install -y --opencl=pal,legacy

Previously I tried other script which somehow didn't properly install the OpenCL and I got this error.

I've since goolged like crazy, posted in two forums, and read tons of posts and discussed with another friend about this... in the end I uninstalled whatever I installed previously, and re-downloaded the package again (just to make sure it's not corrupted) and reinstalled it like above, and finally got it to work! I hope if you followed my above instruction you don't need to go through the same pain I have been through.

1. Prepare the extra libraries needed

sudo apt install libssl1.1 ocl-icd-opencl-dev fakeroot xorriso

libssl1.1, ocl-icd-opencl-dev needed for running DaVinci Resolve
fakeroot, xorriso for generating the deb (since the official DaVinci Resolve linux package is only made for CentOS)

2. Download the official DaVinci Resolve 16

DaVinci Resolve Download page

Click on the Linux, note Studio is the paid version with more features, if you want to download the free one just download the DaVinci Resolve 16.

Extract the zip in your Downloads folder, and you will see the file named DaVinci_Resolve_16.2.7_Linux.run. Don't do anything yet as this one is made for CentOS. In next step we will have a bash script to make it into a installation file that's suitable for Linuxmint.

3. Download the The MakeResolveDeb script to make the deb file for Linuxmint

The MakeResolveDeb

The instruction is pretty straight forward from here. Basically you download and extract everything into one folder, and make sure they have exactly the same name. The script here makes the previous .run file we have into a .deb file, then it's suitable to install on Linuxmint.

4. Reboot

After everything, don't forget to reboot for things to work properly. If everything goes well you should be able to run DaVinci Resolve on your computer.

Read further:

OpenCL on Linux - I hope you will not need to read it, I used it for trouble shooting.
DaVinci Resolve's own forum - You will likely find more related information here

Why are there fewer female developers?

Annie Taylor Chen — Sun, 13 Sep 2020 18:26:49 +0000

Since I switched my career to web development, I can't help noticing that it's rare to see female developers. I mean, there are more and more women getting into "tech" industry, as more and more tech companies are emerging and traditional companies are embracing tech, but women who are developers or engineers aren't as common as men. I am just curious on why it is that way. Note a lot of hypothesis are drawn purely from my observation, so it can be very biased. Please feel free to disagree.

1. Hypothesis: Women in general, are more into careers that deal with people than computers.

Where I am, Sweden, is considered to be one of the most equal countries when it comes to education, employments and gender equality in general. Girls and boys have equal access to education and technology, yet there are fewer girls choosing computer science or other STEM subjects. This might indicate that, when women are given a choice, they tend not to choose computer related subjects. They might prefer what they are naturally good at, which have something to do with people.

2. Hypothesis: Women from less privileged backgrounds might choose computer science because it offers better job opportunities.

Among the very limited female developers I've encountered so far, many of them tend to come from countries that are generally less equal, less affluent than Nordic countries, such as Russia, Poland, India, China, Iran, Cambodia etc. Of course, I've also met two native Swedish female developers who actually studied at KTH, one of the universities in Stockholm that is famous for churning out engineers, but they're not a norm.

3. Hypothesis: When given a chance, for instance, when they no longer need to worry about job or money, some women might switch to careers that deal with people than computers.

So far I have met several people who studied computer science before, from less affluent countries, managed to switch their career when they came to Sweden. For instance: one became a audiologist who helps people fit their hearing aids, another became a technical recruiter. Both said they don't find programming interesting, and do not like to face computer all day, and prefer to work with people, preferably face to face.

UPDATE: 4. Based on some reading and interaction from other readers, there exist a "systematic problem" in the IT industry that alienated women, which reduced the numbers of women as mentors and leaders, discouraged younger generation to pursue the careers.

One argument says from 1984, personal computers were often bought as a gift for the sons, but not daughters. Boys were more likely to play with it and got mentored by their fathers. By the time they entered college, boys were significantly better at computers, which made girls who had less exposure and previous experiences with computer felt "inferior" and "intimidated" and they dropped from computer science majors or changed their majors. Those men created companies and nerdy cultures, and prefer to hire people who are just like them. Women feel unwelcomed and prefer to do something else. When there are fewer and fewer women in the industry, fewer and fewee girls choose to learn computer science.

Alternatively, in countries like India, girls are encouraged to study IT because it's an indoor job that keeps them safe from "street-level sexual harassment".

Further reading/watching: (thank you readers for your recommendation!)
The Secret History of Women in Coding
CODE: Debugging the Gender Gap
Delusions of Gender:How Our Minds,Society, and Neurosexism
Create Difference
Why Beautiful People Have More Daughters: From Dating, Shopping, and Praying to Going to War and Becoming a Billionaire-- Two Evolutionary Psychologists Explain Why We Do What We Do
Hjernevask (Brainwash) 1/7 - The Gender Equality Paradox – (Eng. sub - HQ)
Jordan B. Peterson | Full interview | SVT/TV 2/Skavlan - this super popular video with 9 million + views is censored in Sweden, by the uploader, SVT, a state TV station funded by Swedish tax payer's money. Swedish tax payer paid for it but can't view it, what do you think? :)

Of course, there are many women who are indeed interested in computers, programming or engineering in general, and they find it fun and rewarding. And perhaps with more role models, more girls will be inspired to choose tech, and fall in love with it. However, I am not sure the number will eventually even out. I still think it's a positive thing to encourage more girls to get interested in computer science, but I don't think it's necessary to force an equal outcome. After all, we also need to respect people's own interests and choices.

What is your opinion?

Photo credit: Photo by Christina @ wocintechchat.com

What are reasons you're not using Svelte in production?

Annie Taylor Chen — Wed, 26 Aug 2020 16:14:03 +0000

We know there are a lot of perks using Svelte:

less code to write, less bugs to chase
smaller bundle size, fast performance
compiler only, no big run-time library or virtual DOM
typescript-friendly
built-in easy-to-use transition and animation
easy to use state management
friendly for juniors to learn

There are a few reasons as cons as well:

small community, less support for solutions
eco-system is not as diverse as others, such as React's
might not support vintage browsers such as pre-IE 11
no big well-known application as examples to demonstrate the scalability of the apps

Are there any other reasons you're not using it in production? Especially if you're a tech lead, CTO or senior developer who has a say about what tech stack to use for projects, I'd really love to hear your perspectives! I understand it takes time time to rewrite things if you already have an app to maintain, but if you are given a chance to select tech stack to build new apps, will you choose Svelte? Why or why not?

Migrate Node.js App from Heroku to Digital Ocean Ubuntu 20.04 with Nginx, Pm2, SSL

Annie Taylor Chen — Fri, 24 Jul 2020 19:55:24 +0000

Heroku has been a really great service for developers that don't want to spend time on infrastructure. I've uploaded all my toy projects there so far, because it's faster to make them available online, and I can focus more on learning and doing things I like. However, there comes a time when I want to learn more about "behind the scene", so I want to experiment with Digital Ocean, since so many people already mentioned it. Surprisingly not many tutorials were written for what I need in details, so after quite some googling, asking around and experimenting myself, I finally got it working. 😂

Are you ready?

1. Sign up for a Digital Ocean account

First you need to sign up an account. Click Here, it is an affiliate link which will give you $200 for FREE for 60 days. How cool is that! 😉 You can use this period to experiment and learn without any cost. Note you do need to sign up with a credit card so you can be verified.

2. Set up the droplet

Next to your avatar on the top right corner, you will find a bright green button says Create. Click on it and then click droplets. And you will see this page:

Here we choose Ubuntu 20.04 LTS, Shared CPU Basic, $5/Month plan. Of course feel free to choose what suits you the best!

Scroll down and choose a data center that's near your target audiences, then select additional options, check IPv6 and monitoring.

I like to use ssh as authentication, so you can generate a key. I am sure there is a lot of tutorials online for this already. I also suggested you choose a name for your droplets. Depending on you, you can choose to have backup or not. After all that, click the green button Create Droplet. Wait a few seconds, your droplet is ready! You will be able to copy the ip address now, and from now on, we will leave Digital Ocean interface and do things in the terminal.

3. Login and update your ubuntu system

Now open a terminal and type

ssh root@youripaddress

Note normally you shouldn't do stuff with root. More power more responsibility! You might mess up things by accident, so it's better to create a user. For simplicity I will continue with root for now. Note when you login as user later, you gotta make sure to give user enough right to write some files, such as some nginx conf files. I will paste some read further links at the end.

It will ask you if you want to continue, then type yes. Then you will see root@DropletName:~#.

Let's update now. Upgrade is optional. Some people don't do it at all, it's up to you.

sudo apt update
sudo apt upgrade

4. Let's install Node.js

In the terminal type: (This is the latest version so far but you can replace 14 with 12 if you want stable version)

curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh
sudo apt install nodejs
node -v

When you see output of node version number like

v14.6.0

We have successfully installed node on our system.YEAH!

5. Let's move our repo to our droplet

Since we already have a node.js app on github, we can easily git clone it here. Let's first create a folder called Apps for all our apps.

mkdir apps
cd apps 
git clone git clone https://github.com/username/repo.git
ls -a

Now you should see something like this

.  ..  repo

If the output is your repo's name, we successfully copied our repo here.

6. Install dependencies and test run

Now first let's go into your repo here

cd repo
npm install
npm start npm

Now go to the ipaddress:3000 (or whatever port you're running on)

can you see your app running? If so, well done! 👍 Press Ctrl + C to stop as we still have a lot to do.

7. Set up Pm2 to keep your app running

Now let's install pm2 globally. You can read more about pm2 here.

sudo npm install pm2@latest -g
pm2 start app

For instance my app's file is in src, so I cd to my apps/repo then run

pm2 start src/index.js

Something like this shows up, and you should still be able to see your ipaddress:3000 (or whatever port you use) in your browser to see your app running.

To make sure your app starts when reboot you can type:

pm2 startup ubuntu

8. Set up firewall to block port

When you type

sudo ufw status

You will probably see Status:inactive. Now let's enable it

sudo ufw enable
sudo ufw status

Now it should say Status: active. Let's allow a few ports.

sudo ufw allow ssh
sudo ufw allow http
sudo ufw allow https

ssh is port 22, http port 80, https port 443.

9. Set up and configure Nginx as reverse proxy

sudo apt update
sudo apt install nginx
sudo ufw allow 'Nginx HTTP'
sudo ufw status

Now you should see something like this:

Now we can go to the http://ipaddress, (note we don't need to type port any more) and you shall see the following.

That means you're doing right so far!

Now here comes the tricky part. Since I plan to host more toy projects within one droplets, which will also point to different domain names (or subdomain names). We'd better create something extra, instead of modifying the default.

Let's say we're going to serve the current app at a.example.com. First let's create something like this:

sudo mkdir -p /var/www/a.example.com/html
nano /var/www/a.example.com/html/index.html

Then we paste those simple html here, it won't show up so don't need to make it pretty.

<html>
    <head>
        <title>Welcome to a.example.com!</title>
    </head>
    <body>
        <h1>Success! a.example.com server block is working!</h1>
    </body>
</html>

To save you press Ctrl + X, yes, then press enter. Now we have this file to refer to later in our another conf file.

First let's create something like :

sudo nano /etc/nginx/sites-available/a.example.com

copy and paste the following to that

 server {
     listen 80;
     listen [::]:80;

       server_name a.example.com;

       root /var/www/a.example.com/html;
       index index.html;

       location / {
        proxy_pass http://localhost:3000; #whatever port your app runs on
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
       }
}

Ctrl + X, yes, press enter.

Now that we have our server block file, we need to enable it. We can do this by creating symbolic link from this file to the sites-enabled directory, which Nginx reads from during startup. Later when we add more apps and more domains names, we can copy the same steps.

We can create these links by typing:

sudo ln -s /etc/nginx/sites-available/a.example.com /etc/nginx/sites-enabled/

To avoid a possible hash bucket memory problem that can arise from adding additional server names, it is necessary to adjust a single value in the /etc/nginx/nginx.conf file. Open the file:

sudo nano /etc/nginx/nginx.conf

Find the server_names_hash_bucket_size 64 directive and remove the # symbol to uncomment the line.

Now let's see if our setting is ok. Type

sudo nginx -t

If you see those lines, then you're successful.

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Now we can restart Nginx.

sudo service nginx restart

10. Set your domain/subdomain name

You need to set an A record. Since I manage my domain name at Netlify, it's relatively easy to do. For instance, I want the domain to sound like meowlo.annietaylorchen.com, so I set it up as below.

Note it can take up to 24 to 28 hours for your domain name to propagate, so you need to be a little patient at this point.

Use whatsmydns to check if your domain name is available or not.

11. Set up environment variables

If you're using some api keys, we need to set up environment variables. Since I already use dotenv in my node.js app, I will do as follow. I don't know whether this is the best practice, but it somehow worked for me.

Since we copied our git from github and naturally we didn't push our .env file there, now on our Digital Ocean droplet we also don't have that. But we need to use it when running our apps.

Now cd to your app folder, and type

touch .env
nano .env

Now you copy your api keys like

API_KEY=49upogjergeu

then Ctrl + X, yes, press enter to save. Now you type

cat .env

You should be able to see them showing up in your terminal. Ok, now make sure when you use dotenv you write something like

if (process.env.NODE_ENV == 'production'){
    require('dotenv').config()
}

and in your npm script it's sth like:

"start": "NODE_ENV=production node src/index.js",

Now let's inform pm2 about this

NODE_ENV=production pm2 restart src/index.js --update-env

Now your apis should be working! 😺

12. Add SSL with LetsEncrypt

Now let's go back to our home directory.

cd
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d a.example.com
sudo certbot renew --dry-run

Simply follow the instruction they prompt in the terminal. If you don't see any error, we're all set. Now refresh your browser, you should see your a.example.com serving your apps, api working, and it's secure too! Pfew! That's a lot, I know! Congrats if you make it to the end. Let's high five!🙌

Last but not least, I have made it as short as possible. There are quite some details I didn't cover, but I think if you have time you should read further later.

Full Node.js Deployment - NGINX, SSL With Lets Encrypt by Brad Traversy - note this is not the latest version I used, but many concepts are the same.
How To Install Git on Ubuntu 20.04 - ubuntu usually comes with git already, but you can set up with your own name and email etc.
How To Set Up Automatic Deployment with Git with a VPS - teaches you how to commit from local repo through git, and how to set up beta version
How To Set Up a Node.js Application for Production on Ubuntu 20.04 - general guide for node.js app
How To Install Nginx on Ubuntu 20.04 - general guide for nginx
How To Set Up Nginx Server Blocks (Virtual Hosts) on Ubuntu 16.04 - if you want to serve different sites on the same droplets this is useful
How To Secure Nginx with Let's Encrypt on Ubuntu 20.04 - how to add SSL to your site
How To Install and Use PostgreSQL on Ubuntu 20.04 - my simple node.js app doesn't require a database, but you will probably need one

Which computer to choose for Linux OS with good graphical processing power? + UPDATE

Annie Taylor Chen — Wed, 08 Jul 2020 16:07:37 +0000

Currently I use Linuxmint on an average laptop that's custom-built from PCSpecialist, part of the reasons I got it is that I need a physical ENGLISH keyboard but it's hard to find those in Sweden. I got it a few years ago and am thinking about upgrading to a desktop. I would love to explore more on graphic design or 3D modeling in the future, so hopefully I can get something more powerful. I'm not so familiar with hardware, would love some help from experts! Thank you! 🙏

What would you recommend as hardware?

desktop, physical English keyboard (I have monitor already)
must be compatible with Linux OS
can deliver to Sweden without tax and duty (it's damn expensive in Sweden)
should handle powerful graphical tasks (design, 3d modeling, videos)

Current candidates:
UK:
PCSpecialist
JUNO

Germany:
TUXEDO

Spain:
Slimbook

If you don't know anyone else, can perhaps suggest some machines from suppliers I list above?

UPDATE 2020-10-10

I now got my computer from
https://www.komplett.se/
Special thanks to @joelbonetr for suggestion!
They've assembled all the pieces I chose. It took over a month from order to arrival, which is understandable during pandemic period. Here are what I bought for reference:

computer case: Fractal Design Define C Black
graphic card: Sapphire Radeon RX 5600 XT PULSE
processor: AMD Ryzen 5 3600 Processor
DDR Memory: HyperX Fury DDR4 2666MHz 32GB
Harddrive: Kingston A2000 500GB NVMe M.2 SSD
Motherboard: ASUS EX-A320M-GAMING, Socket-AM4
Powersupply: Corsair CV550, 550W PSU
Network card: ASUS PCE-AC68 Nätverkskort

Total cost: 11,410 kr / 1,299 USD / 1,098 EUR

Today I installed my Linuxmint 20 and all the applications I need. The process is quite smooth. Although, at the beginning I was not sure how to do as there is no proper boot menu like I normally saw on laptop, through googling I found that if I turn the "realtek PXE Oprom" off then insert the usb stick it will work. Just in case anyone might also run into issue of not seeing the WIFI detected, you just need to insert the usb stick to install the hardware driver after you install the main OS and restart it. For fast installation, if you have wired connection, better use that than WIFI.

I did a few tests on sites featuring 3D models but since I don't play games I probably haven't tested it to its maximum ability haha... hope I can test something serious soon such as video editing, which has been slow and clumsy on my previous laptop.

DEV Community: Annie Taylor Chen

Davinci Resolve 19.1.2 x Linux Mint 22 AAC Audio Workaround

How to Install DaVinci Resolve 19 (studio) on Linux Mint 22 with AMD Radeon Graphics Card with a Script fast 2025

How to Install DaVinci Resolve 19 (beta) on Linux Mint 22 with AMD Radeon Graphics Card

1. Make DaVinci Resolve a deb for Linux Mint

2. run script

3. add your user to the video and the render group

4. install ROCm

5. add /opt/rocm/bin to your PATH

6. reboot

7. now we need to install the deb

8. start the program

9. change menu entry

Read further:

How to set up Vite React TS project with Vitest

1. Install packages. You will need those following:

2. Add scripts:

3. In your vite.config.ts add, note the triple slash reference types are important to include here:

4. In your tsconfig.json include:

5. In your root directory, have a file named setupTests.ts and include those:

6. Make a utils folder and include a test-utils.tsx file and put those in the code:

7. Finally, try writing a test, such as App.test.tsx

Slimbook pro x AMD vs. MacBook Air M1, which to choose and why?

Slimbook pro x AMD (Linux)

Tuxedo Pulse 14

Apple M1 Chip with 8-Core CPU and 8-Core GPU 512GB Storage

Study Notes for Kent C. Dodds' Javascript Testing Course

General testing strategies for frontend apps

Notes from the course:

0. Tests types, configuration

1. Static

2. Unit Testing

3. Snapshot and Integration Test

4. E2E Testing

5. Nodejs Test

FAQ

References

How to Add Multiple Github Accounts on One Computer (Linux)

1. Generating the SSH keys

2. Adding keys to respective Github accounts

3. Register the new SSH keys with ssh-agent

4. Create SSH config file

5. Set up the git config user.name and user.email

6. How to clone the repositories

How to Install DaVinci Resolve 16 on Linuxmint 20 with AMD Radeon Graphic Card

0. Prepare your driver

1. Prepare the extra libraries needed

2. Download the official DaVinci Resolve 16

3. Download the The MakeResolveDeb script to make the deb file for Linuxmint

4. Reboot

Read further:

Why are there fewer female developers?

1. Hypothesis: Women in general, are more into careers that deal with people than computers.

2. Hypothesis: Women from less privileged backgrounds might choose computer science because it offers better job opportunities.

3. Hypothesis: When given a chance, for instance, when they no longer need to worry about job or money, some women might switch to careers that deal with people than computers.

UPDATE: 4. Based on some reading and interaction from other readers, there exist a "systematic problem" in the IT industry that alienated women, which reduced the numbers of women as mentors and leaders, discouraged younger generation to pursue the careers.

What are reasons you're not using Svelte in production?

Migrate Node.js App from Heroku to Digital Ocean Ubuntu 20.04 with Nginx, Pm2, SSL

1. Sign up for a Digital Ocean account

2. Set up the droplet

3. Login and update your ubuntu system

4. Let's install Node.js

5. Let's move our repo to our droplet

6. Install dependencies and test run

7. Set up Pm2 to keep your app running

8. Set up firewall to block port

9. Set up and configure Nginx as reverse proxy

10. Set your domain/subdomain name

11. Set up environment variables

12. Add SSL with LetsEncrypt

Which computer to choose for Linux OS with good graphical processing power? + UPDATE

3. In your `vite.config.ts` add, note the triple slash reference types are important to include here:

4. In your `tsconfig.json` include:

5. In your root directory, have a file named `setupTests.ts` and include those:

6. Make a utils folder and include a `test-utils.tsx` file and put those in the code:

7. Finally, try writing a test, such as `App.test.tsx`