Webentwicklung – Webentwicklung und sonstiger Unsinn :)

20. November 2021

TypeError: Cannot read properties of null (reading ‘length’)

Being the Javascript newbie that I am…
Javascript errors are still a mystery, more so if using Chrome/Chromium.
With Firefox the error was actually more clear.

TypeError: Cannot read properties of null (reading 'length')
means you have a variable that you’re checking it’s property ‘length’ to be a certain value but the variable is null.

Explanation:

const urls = JSON.parse(localStorage.getItem('urls'))
if (urls.length > 0) {
  // do something
}

const urls = JSON.parse(localStorage.getItem('urls'))

if (urls.length > 0) {

// do something

}

In this case localStorage’s ‘urls’ key or rather value of the ‘urls’ key was empty and JSON.parse transformed that to null.
So if you check for urls.length to be greater than 0, you can’t do it and receive this error message.

How do you solve it?

if (urls && urls.length > 0) {
  // do something
}

if (urls && urls.length > 0) {

// do something

}

This is the Javascript (and Typescript) way to check if a variable isn’t null and then check its property if it isn’t.
I know, logically this makes no sense, because it’s a logical AND. But hey, it’s Javascript so you don’t have to understand, you have to believe. 😉 HTH

16. November 202116. November 2021

The way is clear for Vue 3 with Keycloak

Since Pull Request 116 of dsb-norge/vue-keycloak-js today Keycloak works well with Vue 3.

This is great news because you can now use Quasar v2, which uses vue 3 under the hood for your authentication purposes.

If you missed the post on how to integrate keycloak with Quasar v1 and v2, click the link to read it.

Happy coding.

14. November 202114. November 2021

Using gin with pongo2/v4 and embedded templates

You’d like to use pongo2/v4 with gin and embed templates with go:embed.

I’m using cobra for my cli parsing and commands.
So

mkdir -p ~/go/src/git.icod.de/dalu/ui
cd ~/go/src/git.icod.de/dalu/ui
cobra init --pkg-name git.icod.de/dalu/ui
cobra add ui

mkdir -p ~/go/src/git.icod.de/dalu/ui

cd ~/go/src/git.icod.de/dalu/ui

cobra init --pkg-name git.icod.de/dalu/ui

cobra add ui

edit cmd/ui.go

package cmd

import (
	"errors"
	"fmt"
	"io/fs"
	"net/http"
	"os"
	"strings"

	"git.icod.de/dalu/ginpongo2/v4"
	"github.com/flosch/pongo2/v4"
	"github.com/gin-gonic/gin"
	"github.com/spf13/cobra"
)

const (
    prefixTCP = "tcp:"
    prefixUNIX = "unix:"
)

var (
	uiDebug bool
	uiAddr  string
)

// uiCmd represents the ui command
var uiCmd = &cobra.Command{
	Use:   "ui",
	Short: "A brief description of your command",
	RunE: func(cmd *cobra.Command, args []string) error {
		r := gin.Default()
		r.SecureJsonPrefix(")]}',\n")
		r.MaxMultipartMemory = 16 << 20

		subFS, e := fs.Sub(ui.Templates, "templates")
		if e != nil {
			return e
		}

		pl := pongo2.MustNewHttpFileSystemLoader(http.FS(subFS), "")
		pr := ginpongo2.New(uiDebug, pl)
		r.HTMLRender = pr

		// Static
		r.Static("/assets/", "./assets/")

		r.GET("/", func(cx *gin.Context) {
		    ctx := make(pongo2.Content)
			type Data struct {
			    Target string
				Message string
			}
		    ctx["data"] = &Data{
			    Target: "World",
				Message: "It's a great day to be alive",
			}
		    cx.HTML(200, "index", ctx)
		})

		// serve
		if strings.HasPrefix(uiAddr, prefixTCP) {
			addr := strings.TrimPrefix(uiAddr, prefixTCP)
			fmt.Println("listening on", addr)
			return r.Run(addr)
		} else if strings.HasPrefix(uiAddr, prefixUNIX) {
			addr := strings.TrimPrefix(uiAddr, prefixUNIX)
			if _, e := os.Stat(addr); errors.Is(e, os.ErrNotExist) {
				fmt.Println("listening on", addr)
				return r.RunUnix(addr)
			} else {
				if e := os.Remove(addr); e != nil {
					return e
				} else {
					fmt.Println("listening on", addr)
					return r.RunUnix(addr)
				}
			}
		} else {
			return nil
		}
	},
}

func init() {
	rootCmd.AddCommand(uiCmd)
	uiCmd.Flags().BoolVar(&uiDebug, "debug", false, "enable dev mode")
	uiCmd.Flags().StringVar(
		&uiAddr,
		"addr",
		"unix:/tmp/ui.sock",
		"either tcp: or unix: e.g. tcp:localhost:3030 unix:/tmp/listen.sock",
	)
}

package cmd

import (

"errors"

"fmt"

"io/fs"

"net/http"

"os"

"strings"

"git.icod.de/dalu/ginpongo2/v4"

"github.com/flosch/pongo2/v4"

"github.com/gin-gonic/gin"

"github.com/spf13/cobra"

)

const (

prefixTCP = "tcp:"

prefixUNIX = "unix:"

)

var (

uiDebug bool

uiAddr string

)

// uiCmd represents the ui command

var uiCmd = &cobra.Command{

Use: "ui",

Short: "A brief description of your command",

RunE: func(cmd *cobra.Command, args []string) error {

r := gin.Default()

r.SecureJsonPrefix(")]}',\n")

r.MaxMultipartMemory = 16 << 20

subFS, e := fs.Sub(ui.Templates, "templates")

if e != nil {

return e

}

pl := pongo2.MustNewHttpFileSystemLoader(http.FS(subFS), "")

pr := ginpongo2.New(uiDebug, pl)

r.HTMLRender = pr

// Static

r.Static("/assets/", "./assets/")

r.GET("/", func(cx *gin.Context) {

ctx := make(pongo2.Content)

type Data struct {

Target string

Message string

}

ctx["data"] = &Data{

Target: "World",

Message: "It's a great day to be alive",

}

cx.HTML(200, "index", ctx)

})

// serve

if strings.HasPrefix(uiAddr, prefixTCP) {

addr := strings.TrimPrefix(uiAddr, prefixTCP)

fmt.Println("listening on", addr)

return r.Run(addr)

} else if strings.HasPrefix(uiAddr, prefixUNIX) {

addr := strings.TrimPrefix(uiAddr, prefixUNIX)

if _, e := os.Stat(addr); errors.Is(e, os.ErrNotExist) {

fmt.Println("listening on", addr)

return r.RunUnix(addr)

} else {

if e := os.Remove(addr); e != nil {

return e

} else {

fmt.Println("listening on", addr)

return r.RunUnix(addr)

}

} else {

return nil

}

func init() {

rootCmd.AddCommand(uiCmd)

uiCmd.Flags().BoolVar(&uiDebug, "debug", false, "enable dev mode")

uiCmd.Flags().StringVar(

&uiAddr,

"addr",

"unix:/tmp/ui.sock",

"either tcp: or unix: e.g. tcp:localhost:3030 unix:/tmp/listen.sock",

)

}

ui/templates.go

package ui

import "embed"

//go:embed templates/*
var Templates embed.FS

package ui

import "embed"

//go:embed templates/*

var Templates embed.FS

ui/templates/base.html.twig

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    {%- block meta %}{% endblock -%}
    <title>{{ title }}</title>
    {%- block js %}{% endblock -%}
    {%- block css %}{% endblock -%}
</head>
<body>
{%- block body %}{% endblock -%}
{%- block jsbottom %}{% endblock -%}
</body>
</html>

<!doctype html>

<head>

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

{%- block meta %}{% endblock -%}

<title>{{ title }}</title>

{%- block js %}{% endblock -%}

{%- block css %}{% endblock -%}

</head>

<body>

{%- block body %}{% endblock -%}

{%- block jsbottom %}{% endblock -%}

</body>

</html>

ui/templates/layout.html.twig

{% extends "base.html.twig" %}
{%- block css %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
{% endblock -%}
{%- block js %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
{% endblock -%}
{%- block body %}
<div class="container">
  <div class="row">
    <div class="col-2">
      {%- block left -%}{% endblock -%}
    </div>
    <div class="col-8">
      {%- block middle -%}{% endblock -%}
    </div>
    <div class="col-2">
      {%- block right -%}{% endblock -%}
    </div>
  </div>
</div>
{% endblock -%}

{% extends "base.html.twig" %}

{%- block css %}

{% endblock -%}

{%- block js %}

{% endblock -%}

{%- block body %}

{%- block left -%}{% endblock -%}

</div>

{%- block middle -%}{% endblock -%}

</div>

{%- block right -%}{% endblock -%}

</div>

{% endblock -%}

ui/templates/index.html.twig

{% extends "index.html.twig" %}
{%- block middle %}
  <div class="px-4 py-5 my-5 text-center">
    <h1 class="display-5 fw-bold">Hello {{data.Target}}</h1>
    <div class="col-lg-6 mx-auto">
      <p class="lead mb-4">{{data.Message}}</p>
      <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
        <button type="button" class="btn btn-primary btn-lg px-4 gap-3">You got it</button>
        <button type="button" class="btn btn-outline-secondary btn-lg px-4">Huh?</button>
      </div>
    </div>
  </div>
{% endblock -%}

{% extends "index.html.twig" %}

{%- block middle %}

<h1 class="display-5 fw-bold">Hello {{data.Target}}</h1>

<p class="lead mb-4">{{data.Message}}</p>

</div>

{% endblock -%}

and finally run

go mod tidy

1	go mod tidy

to download packages

What have we done?

In ui/templates.go we said that the directory templates, which is a subdirectory of ui/ should be embedded as the exported variable Templates
In line 36 of cmd/ui.go we imported that variable and stripped it of its templates/ prefix
line 41 we turned that into a HttpFileSystem and passed that to pongo2’s FileSystemLoader
line 42 then creates a renderer that is compatible with pongo2/v4
line 43 we assign that renderer to be gin’s HTML renderer

Any questions -> leave a comment

22. October 2021

Quasar v2 create re-usable js file with vue3

I had a little problem migrating Quasar v1 to v2. I wanted to have a re-usable (importable) .js file that I could import in every SFC.
This particular case used i18n.

I create a directory lib under the src dir.
Since this .js file was to set the default menu items in every SFC I named it defaultItems.js.
So it lives in src/lib/defaultItems.js

The content of the file

import { useStore } from 'vuex'
import { useI18n } from 'vue-i18n';

export default function () {
  const i18n = useI18n()
  const items = [
    {
      label: i18n.t('sidebar.home'),
      to: {path: '/'}
    },
    {
      label: i18n.t('sidebar.feed'),
      to: {path: '/feed/'}
    },
    {
      label: i18n.t('sidebar.groups'),
      to: {path: '/groups/'}
    }
  ]
  const store = useStore()
  store.dispatch('sideMenu/setItems', items)
}

import { useStore } from 'vuex'

import { useI18n } from 'vue-i18n';

export default function () {

const i18n = useI18n()

const items = [

{

label: i18n.t('sidebar.home'),

to: {path: '/'}

{

label: i18n.t('sidebar.feed'),

to: {path: '/feed/'}

{

label: i18n.t('sidebar.groups'),

to: {path: '/groups/'}

}

]

const store = useStore()

store.dispatch('sideMenu/setItems', items)

}

You see a bunch of things.

import { useStore } from 'vuex'
and
import { useI18n } from 'vue-i18n';

Vue3 has this new use* functions that allow for instance vuex to be accessed via useStore() or vue-i18n to be accessed via useI18n() anywhere.

So that’s pretty simple.

You can now import the defaultItems.js file in your SFC.

<script>
import defaultItems from 'src/lib/defaultItems';

export default defineComponent({
  name: 'PageIndex',
  mounted() {
    defaultItems()
  }
})
</script>

import defaultItems from 'src/lib/defaultItems';

export default defineComponent({

name: 'PageIndex',

mounted() {

defaultItems()

}

})

</script>

Of course now that I see this, it’s wrong to store the translated text in the vuex store. Only the references should be stored there and the translation should happen in the display component.
e.g. the label shouldn’t be i18n.t(‘sidebar.home’) but only ‘sidebar.home’ and later do $t() or <v-t> in the component

26. September 2021

PcEngines APU4D4 erst 2022

Ich wollte mir gerade ein Board bestellen mit Gehäuse usw. ein PcEngines Apu4d4 (weil die Apu2c4 gibts wohl nicht mehr).
Nichts ist lieferbar. Alles aufverkauft scheinbar, oder wird da gehortet?

Wie war das noch im Kommunismus? Lange Schlangen, keine Produkte verfügbar.
Haben wir darum denselben aufgegeben um nicht nur unfreier zu sein und überwachter sondern im Endeffekt dort anzukommen wo der Kommunismus im negativen Sinn war?

Heute gehört wenigen das meiste statt wie im Kommunismus vielen alles.
Alles kostet Geld im Gegensatz zum Kommunismus – alles ist frei weil ja im Volkseigentum.
Bewegungsfreiheit? Tja ohne Geld kannst du auch nicht reisen, als Hartz4Empfänger must du sogar um Erlaubnis bitten um verreisen zu dürfen.

Wird es nicht Zeit umzuschwenken? Gerade lese ich China hat alle Cryptowährungen für illegal erklärt. BRAVO! Und vor einigen Tagen hat es versprochen keine Kohlekraftwerke mehr zu bauen.
Die machen was in Punkto Klima.
Blöd nur das die Sprache so schwer zu lernen ist.