DEV Community: jgngo

SSL Certificate for Internal Servers

jgngo — Mon, 10 Mar 2025 06:58:13 +0000

This is a guide for generating an SSL certificate via Let's Encrypt for a server that is not exposed to the internet. This means the default method where certbot creates a temporary token exposed to the public to verify ownership will not work.

To prove ownership, you will need to use the DNS challenge and create a DNS TXT entry. To continue with this, you need to have access to create DNS records for your domain.

Assuming you have installed certbot, you just need to run the following command.

sudo certbot certonly --manual --preferred-challenges=dns

Imagemagick

jgngo — Wed, 18 Dec 2024 02:35:29 +0000

Installation

https://imagemagick.org/script/download.php#windows

1. Converting all files to jpg

In a folder, convert all png, webp, gif files to jpg.

magick mogrify -format jpg -background white -flatten *.png
magick mogrify -format jpg *.webp
magick mogrify -format jpg *.gif

2. File renaming

In Powershell, this will rename all jpeg to jpg.

dir *.jpeg | rename-item -newname { [io.path]::ChangeExtension($_.name, "jpg") }

3. Resizing all jpg files

This command "Shrinks an image with dimension(s) larger than the corresponding width and/or height argument(s)."

magick mogrify -resize '720x720>' *.jpg

4. Optimize image size

This command will optimize all jpg images to Google Pagespeed recommendations.

magick mogrify -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB *.jpg

Others

These are other commands that may be useful.

magick mogrify -resize 960x528 *.jpg

This command resizes all of the .jpg files in your directory to a size of 960 pixels by 528 pixels. Perhaps the height isn’t as important as the width. You can simply enter:

magick mogrify -resize 960 *.jpg

This will scale all of your images to a width of 960 pixels, the height will be scaled accordingly, preserving the aspect ratio.

Starter Nuxt Template

jgngo — Thu, 02 May 2024 23:49:31 +0000

npx nuxi@latest init starter
cd starter
pnpm install -D typescript
pnpm add lucide-vue-next
npx nuxi@latest module add shadcn-nuxt
npx shadcn-vue@latest init
npx shadcn-vue@latest add button
npx shadcn-vue@latest add badge
npx shadcn-vue@latest add card
npx shadcn-vue@latest add sheet
npx shadcn-vue@latest add input
npx shadcn-vue@latest add label
npx shadcn-vue@latest add dropdown-menu

Flowbite

npx nuxi@latest init starter
cd starter
npx nuxi@latest module add tailwindcss
pnpm install flowbite

Jasper Studio Design Tips

jgngo — Thu, 30 Nov 2023 00:00:23 +0000

If you are designing a columnar report intended to be exported as Excel, here are some tips.

Design

Move the column titles to the Title band. This will allow it to appear only once in the report and not in every page.

Retain only the Title and Detail bands. Delete all other bands.

In the Title band, have only the report title and the column header in two rows. There is a property below that tells Excel to freeze the top 2 rows so that the title row and the column headers row is frozen so the user can scroll through thousands of records and still see them.

In the Detail band properties, set the following:

Layout: "Grid" or "Spreadsheet". This forces the columns to be right beside each other.
Height: 14 px

Properties for Excel Export

In the Source tab, insert the following lines below the other properties. These are selected properties recommended by this article.

<property name="net.sf.jasperreports.export.xls.wrap.text" value="false"/>
<property name="net.sf.jasperreports.export.xls.remove.empty.space.between.rows" value="true"/>
<property name="net.sf.jasperreports.export.xls.remove.empty.space.between.columns" value="true"/>
<property name="net.sf.jasperreports.export.xls.white.page.background" value="false"/>
<property name="net.sf.jasperreports.export.xls.detect.cell.type" value="true"/>
<property name="net.sf.jasperreports.export.xls.ignore.graphics" value="false"/>
<property name="net.sf.jasperreports.page.break.no.pagination" value="apply"/>
<property name="net.sf.jasperreports.export.xls.freeze.row" value="3"/>
<property name="net.sf.jasperreports.print.keep.full.text" value="true"/>

Podman Tips

jgngo — Tue, 02 May 2023 00:38:40 +0000

If you are using WSL, you may want to install podman instead of docker. It is a drop-in replacement made by Red Hat. You won't need to do sudo service docker start before running docker commands. To install in WSL, just do the following.

sudo apt install podman

Adding dockerhub registry in the default search

Update the configuration file so it can search the docker.io image registry.

/etc/containers/registries.conf

unqualified-search-registries = ['docker.io']

Access localhost from the container

To allow a running container to access a service running on the host like a database server, a special hostname host.containers.internal is created in the container /etc/hosts that points to the local IP.

PostgreSQL by default only allows connections from localhost. You will need to configure it to allow remote connections. Update postgresql.conf and pg_hba.conf

postgresql.conf
listen_addresses = '*'

pg_hba.conf
host    all             all             0.0.0.0/0            scram-sha-256

podman run --rm --net=slirp4netns:allow_host_loopback=true -it alpine /bin/sh

The parameter --net allows access to the host. If you run podman as a regular user, the default network setting is slirp4netns with the allow_host_loopback set to false. This parameter needs to be set to true to allow slirp4netns to reach the host loopback IP host.containers.internal

https://docs.podman.io/en/latest/markdown/podman-run.1.html

For docker-compose or podman-compose, add the following under the service.

network_mode: slirp4netns:allow_host_loopback=true

Set as default

If there is no existing configuration file in /etc/containers/, create a copy of the default containers.conf so you can edit.

sudo cp /usr/share/containers/containers.conf /etc/cont
ainers/
sudo vi /etc/containers/containers.conf

Uncomment and edit the following entry.

# Default options to pass to the slirp4netns binary.
# For example "allow_host_loopback=true"
#
network_cmd_options = ["allow_host_loopback=true"]

Nuxt 3 Project

jgngo — Tue, 18 Apr 2023 09:33:16 +0000

Starting a project example-proj. If you wish to build a project including an API, please use Sidebase because it has selected plugins pre-configured. For building a Single Page Application, this is a good starting point.

npx nuxi@latest init example-proj
cd example-proj
pnpm install --save-dev @nuxtjs/tailwindcss
pnpm install --save-dev nuxt-icon
pnpm install --save-dev @tailwindcss/typography
pnpm install --save-dev @sidebase/nuxt-auth
pnpm install @headlessui/vue

Configure Tailwind

nuxt.config.ts

export default defineNuxtConfig({
    modules: [
        '@nuxtjs/tailwindcss',
        '@sidebase/nuxt-auth',    
        'nuxt-icon'
    ],
    app: {
        head: {
            link: [
                { rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }
            ]
        }
    }
})

Setup for New Machine

jgngo — Thu, 28 Jul 2022 07:30:00 +0000

Things to install when setting up a new machine.

Windows

In PowerShell, you can quickly install software via scoop

irm get.scoop.sh | iex
scoop install git
scoop install 7zip
scoop bucket add extras
scoop install putty
scoop install nvm
scoop install vscode

Desktop apps

Libreoffice
DBeaver

Vue 3 / Vite on Cloudflare Pages

jgngo — Thu, 30 Jun 2022 00:09:59 +0000

A build recently failed in Cloudflare Pages and showed the following error.

19:09:34.631    Executing user command: npm run build
19:09:34.980    
19:09:34.981    > webapp@0.0.0 build /opt/buildhome/repo
19:09:34.981    > vite build
19:09:34.981    
19:09:35.288    failed to load config from /opt/buildhome/repo/vite.config.js
19:09:35.289    error during build:
19:09:35.289    Error: Cannot find module 'happy-dom'

Doing npm run build on my local machine worked fine so I went on to find out the difference between my machine and the Cloudflare Pages build environment.

It turned out that my machine was on Node 16.15.0 while Cloudflare Pages was at 12.18.0, which is quite old. So, based on the build configuration docs, all we need to do is set an environment variable in the build settings of the Cloudflare Pages project for both production and preview NODE_VERSION=16.15.0 so it matches the local build environment.

After saving the environment variable and retrying deployment, the build was successful. This tip would apply to any javascript project that uses npm or yarn for building.

Strapi Authentication via Provider

jgngo — Mon, 30 May 2022 02:56:01 +0000

If you use a 3rd party provider in Strapi for authentication, the access token works a little differently.

The access token that you receive from cognito is not valid in Strapi. You need to retrieve a token from strapi.

From the frontend app, read the query string from cognito after successful authentication and submit both the id_token and access_token to this Strapi endpoint.

If you are using the AWS Amplify SDK, Auth.currentSession() will return a CognitoUserSession containing the accessToken and idToken.

const data = await Auth.currentSession()
const access_token = data.accessToken.jwtToken
const id_token = data.idToken.jwtToken

Send both Cognito tokens to the callback URL so that you can get a Strapi JWT that you can then use for all subsequent calls to Strapi. By calling this URL, Strapi will automatically create a new record in the User table.

${backendUrl}/api/auth/${params.providerName}/callback?id_token=xxx&access_token=yyy

You will receive the following response.

{
"jwt": "<access token> that you can use thereafter",
"user": {
  "id": 1,
  "username": "google_999999999999999999",
  "email": "theuser@gmail.com",
  "provider": "cognito",
  "confirmed": true,
  "blocked": false,
  "createdAt": "2022-05-30T02:50:08.907Z",
  "updatedAt": "2022-05-30T02:50:08.907Z"
}
}

New .NET 6 Project

jgngo — Fri, 27 May 2022 07:38:14 +0000

Work in progress...

This guide helps you setup a new .NET 6 project using PostgreSQL as a database.

Scaffold a project

dotnet new webapi -o myapp
cd myapp
dotnet new gitignore

Configure an existing project using SQL Server to PostgreSQL

This scenario assumes that you used EntityFramework and have existing models and configuration for SQL Server.

Setup Entity Framework and PostgreSQL libraries

dotnet add package Npgsql
dotnet add package Npgsql.EntityFrameworkCore.PostgreSQL
dotnet add package Microsoft.EntityFrameworkCore
dotnet add package Microsoft.EntityFrameworkCore.Design

In appsettings.json add a connection string for PostgreSQL.

"ConnectionStrings": {
    "DefaultConnection": "you_can_retain_existing_connection",
    "PgConnection": "Host=localhost;Database=mydb;Username=myuser;Password=mypassword"
  }

In Program.cs setup the DbContext

var connectionString = builder.Configuration.GetConnectionString("PgConnection");
builder.Services.AddDbContext<MYDB>(opt => opt.UseNpgsql(connectionString));

Run the migrations

dotnet ef migrations add InitialCreate
dotnet ef database update

Create Models

:WIP:

Reverse Engineering an Existing Database

This scenario is when you have an existing database structure. You can generate the Models automatically by running one of the following scaffolding commands. The --output-dir parameter sets the location of the generated files. If you don't specify this parameter, it will create the files in the root folder.

https://docs.microsoft.com/en-us/ef/core/managing-schemas/scaffolding?tabs=dotnet-core-cli

-- SQL Server source
dotnet ef dbcontext scaffold "Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=Chinook" Microsoft.EntityFrameworkCore.SqlServer" --output-dir Models

-- PostgreSQL source
dotnet ef dbcontext scaffold "Host=my_host;Database=my_db;Username=my_user;Password=my_pw" Npgsql.EntityFrameworkCore.PostgreSQL --output-dir Models

Starting a Vue 3 project

jgngo — Thu, 26 May 2022 00:50:48 +0000

tl;dr

Use npm init vue@latest. This uses Vite as the build tool and provides options to enable state management, routing and testing tools.

Starting a vue project

There are 3 official ways to start a Vue project. Vue CLI appears to be obsolete with the arrival of Vue 3.

Vue create-vue: the official Vue project scaffolding tool

npm init vue@latest
Vite preset: a build tool that aims to provide a faster and leaner development experience for modern web projects

npm create vite@latest
Vue CLI: aims to be the standard tooling baseline for the Vue ecosystem. This appears to be for Vue 2.

vue create hello-world

Vue create-vue

The official docs recommend this command to start a build-tool-enabled project. The command provides several options that default to No. I recommend you enable Typescript, Vue Router and Pinia. The others can be added to your project when you are ready to use them.

npm init vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vuecreate
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add Cypress for both Unit and End-to-End testing? ... No / Yes
√ Add ESLint for code quality? ... No / Yes

Vite vue preset

npm create vite@latest

√ Project name: ... vite-project
√ Select a framework: » vue
√ Select a variant: » vue

Scaffolding project in C:\Users\ngoja\sandbox\vite-project...

Post project creation

Install Tailwind

After project creation, cd to your project folder and install Tailwind.

https://tailwindcss.com/docs/guides/vite

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then edit the following 3 files:

./tailwind.config.js - replace the content line with this

content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],

./src/index.css - create this new file

@tailwind base;
@tailwind components;
@tailwind utilities;

./src/main. - insert after the last import statement

import './index.css'

You will then want to delete the <style> section in ./src/App.vue so it won't conflict with the Tailwind css.

VSCode Tips

jgngo — Wed, 25 May 2022 09:40:06 +0000

If you have 11 minutes to spare, watch this first. The general principle is:

[🐭 Mouse (Slow) and 🎹 Keyboard (Fast)]

Speed Selection

If you work with tags (HTML, Vue, React), the most common task involves moving an entire tag to another location or file. Amateur coders will use a mouse to highlight the block of code and then cut and paste.

To save time, move your cursor to the start tag, for example somewhere in <div>. Then press Alt-Shift-Right Arrow. The first stroke selects the word, then repeat the action until the selection is all the way to the closing </div>.

From here, you can then cut (Ctrl-X) or move (Alt-Up/Down Arrow) the selected code.

Ctrl-D: Quickly select the entire word where the cursor is. Press again to select the same word in a another location. Since there are multiple cursors, deleting or typing will make edits simultaneously.

Deleting Lines

Ctrl-Shift-K: Deletes the entire line where the cursor is

Navigation

Ctrl-P: Allows you to open a file directly without using the mouse to locate it in a file directory.

Ctrl-Shift-Period: Opens a navigator to quickly jump to particular sections of code.

Enjoy your free time!