Crayon Syntax Highlighter Updated for PHP 8

I have updated the Crayon Syntax Highlighter to work with PHP8 and above.
While I have tagged the release as 2.8.6 I’m moving away from that version scheme.

and use master branch.

Remember to visit the settings page and save your settings, especially when switching PHP versions.

To my knowledge this is the only public repository of a working Crayon Syntax Highlighter plugin, feel free to correct me.

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:

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?

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

Using gin with pongo2/v4 or v5 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

edit cmd/ui.go

ui/templates.go

ui/templates/base.html.twig

ui/templates/layout.html.twig

ui/templates/index.html.twig

and finally run

to download packages

Any questions -> leave a comment

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

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.

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