DEV Community: pallade

Customizing EurKey on Ubuntu

pallade — Mon, 23 Feb 2026 14:53:57 +0000

This has been tested in Ubuntu 24.04.

When you need to type in different languages, you can configure your OS to handle their respective layouts. Often, when switching layout, more than just the letters change: punctuation and shifted keys can change too, and you need to continuously adjust (where is the open parenthesis? Shifted 9 or someplace entirely different? What happens if you hit the key right of L? Etc...).

I recently switched to a ZSA Voyager programmable keyboard, and I had enough of continuously mistyping special characters and furiously switching keyboard layouts. I needed a single layout that would let me type everything! Eurkey could be the answer but... EurKey, despite its name, does not handle all the language spoken in Europe!

I needed to support Italian, English and German (which are supported) and Polish (which is not). I also do programming.

My solution was to create a new OS layout, based on Eurkey. This is not portable, but it makes my life easier most of the time.

Situation	Portability
On my own Ubuntu pc	Everything works
On a PC with EurKEY	Set layout to EurKey. Italian, German and English work, Polish does not work
On a PC without EurKey	Set language to English. Ita, Ger, Pl do not work.

Here is the resulting layout on Oryx, the ZSA configuration utility from ZSA (it should be easy to reproduce on other programmable keyboards): https://configure.zsa.io/voyager/layouts/ymMez/latest/0

First, get the Eurkey layout (print it is you prefer!) and choose a few keys on the AltGr layer you will never use (for me, the first keys on the Q row are fine): you will override them with other keys that you will use. Decide, for each key, what should it produce when hit with AltGr.

In my case:

Key	Key + AltGr will produce
Q	ą
W	ę
E	ó
R	ć
etc...	...

Now follow this tutorial (or the newer version linked there): https://codeaffen.org/2022/02/07/custom-keyboard-layout/

In /usr/share/X11/xkb/symbols create a new euspecial file and add the following content:

default partial alphanumeric_keys modifier_keys
xkb_symbols "basic"  {
    include "eu"

    key <AD01>  {[            q,               Q,              aogonek,              Aogonek  ]};
    key <AD02>  {[            w,               W,              eogonek,              Eogonek  ]};
    key <AD03>  {[            e,               E,               oacute,               Oacute  ]};
    key <AD04>  {[            r,               R,               cacute,               Cacute  ]};
    key <AD05>  {[            t,               T,            zabovedot,            Zabovedot  ]};
    key <AD06>  {[            y,               Y,               zacute,               Zacute  ]};
    key <AD07>  {[            u,               U,               nacute,               Nacute  ]};
    key <AD08>  {[            i,               I,              lstroke,              Lstroke  ]};
    key <AD09>  {[            o,               O,               sacute,               Sacute  ]};

    include "level3(ralt_switch)"
};

This changes the behavior of keys Q, W, E... through O on the first row.

In /usr/share/X11/xkb/rules/evdev.extras.xml, add a new layout section alongside the others, inside the section:

    <layout>
      <configItem popularity="exotic">
        <name>euspecial</name>
        <!-- Keyboard indicator for European layouts -->
        <shortDescription>eu</shortDescription>
        <description>EurKEY (Special)</description>
        <countryList>
          <iso3166Id>US</iso3166Id>
        </countryList>
        <languageList>
          <iso639Id>cat</iso639Id>
          <iso639Id>dan</iso639Id>
          <iso639Id>eng</iso639Id>
          <iso639Id>est</iso639Id>
          <iso639Id>fao</iso639Id>
          <iso639Id>fin</iso639Id>
          <iso639Id>deu</iso639Id>
          <iso639Id>ell</iso639Id>
          <iso639Id>gsw</iso639Id>
          <iso639Id>ita</iso639Id>
          <iso639Id>lav</iso639Id>
          <iso639Id>lit</iso639Id>
          <iso639Id>nld</iso639Id>
          <iso639Id>nor</iso639Id>
          <iso639Id>por</iso639Id>
          <iso639Id>spa</iso639Id>
          <iso639Id>swe</iso639Id>
        </languageList>
      </configItem>
    </layout>

Now you should see a new "Eurkey (Special)" entry in your keyboard layout list. If not, restart your computer.

From Vue to Alpine.js on a legacy project

pallade — Sat, 23 Mar 2024 07:31:24 +0000

I have been struggling with progressive enhancement on a legacy project. The requirements are simple: there is some PHP-generated HTML that could be nicely enhanced.

Our approach has been using Vue 2 inline templates. This feature neatly separated HTML code (server generated) from JS and CSS code, that lived on the client.

No JS? No problem: the HTML works anyway.

Unfortunately, Vue 3 removed support for inline templates. This left us in a tough spot, since Vue 2 is unsupported and EOL.

Enter Alpine.js. You know Vue? Alpine is the same sauce. Minus lots of complcations. It is just perfect for this use case!

Migrating from Vue 2 to Alpine.js is really, really straightforward, and you gain a lot of benefits:

reactivity is super easy
reactivity and events bubble outwards, to the outermost Alpine.js enabled element. No need to have props and weird questions about communicating between parents and children!
data sharing among different components is easy: you can have a global reactive store and bind to that
all is inline! but you can have some separation of concens and move JS code to a separate file, so that the HTML becomes lighter
error reporting is stellar: look at your console and you will see a specific and well described error!

From file.vue to Alpine.js

Template (HTML)

If you have a component, it will have its own template, somewhere.

If it is an inline-template, then replace inline-template with x-data="customcomponent".

<div is="custom-component" inline-template>...</div>

becomes

<div x-data="customcomponent">...</div>

Otherwise, you probably have some <custom-component /> code in your HTML: copy and paste your HTML template that you have in your .vue file, and replace <custom-component /> with the entire HTML template. Then add and x-data="customcomponent" to the outermost tag.

What is customcomponent? It is the name of the JS component that we will create in the next step. The customcomponent will be registered at the last step of this tutorial, and will allow Alpine.js to connect this block of HTML to the correct script that automates it.

Note that you can (and should) inline x-data too, and have all your logic in one place. But I prefer to separate it as soon as it becomes even slightly complex.

Now that your HTML is mostly in place, you will need to replace the v- attributes with... x- attributes. You can just rename most of them: they are equivalent.

One exception is x-if and x-show: x-if works on a <template> tag only, so you should probably start by renaming v-if to x-show, unless you have special requirements.

CSS

Your CSS code goes to the main CSS. No magic here, sorry.

JS

Create a new custom-component.js file
Start like this:

export default () => ({
  // Code here
});

Paste the insides of your .vue script tag to where // Code here is.
Promote all data to the outermost scope:

export default () => ({
  reactiveVar1 : 'hi!',
});

Promote all computed to the outermost scope:

export default () => ({
  reactiveVar1 : 'hi!',
  computeMe() : { return this.reactiveVar1; },
});

Rename mount() to init()

export default () => ({
  reactiveVar1 : 'hi!',
  computeMe() : { return this.reactiveVar1; },
  init() : { reactiveVar1 = 'hello world'; }
});

Have a watch block? Promote all the watching function to the main scope, and then connect them manually in your init() function, like this:

this.$watch('watchedVariable', (newValue) => this.watchedVariableChanged(newValue))

Adjust special Vue features, if you have any

Bring it all together now

You will need to bootstrap Alpine.js somewhere in your JS code, at the top level of your app, the same as you did with Vue.

You would do something like this:

import Alpine from 'alpinejs/dist/module.cjs';
import collapse from '@alpinejs/collapse'

import customcomponent from './custom-components.js';

window.Alpine = Alpine

document.addEventListener("DOMContentLoaded", function () {
    Alpine.plugin(collapse)

    Alpine.data('customcomponent', customcomponent)

    Alpine.start()
});

We have imported our JS, we introduced it to Alpine and we gave it a name: now we can use it.

Go to your HTML file and replace data='{ someReactiveVar = 1; }' with data='customcomponent'.

Reload and enjoy!

New Relic and php-fpm on Ubuntu

pallade — Fri, 28 Apr 2023 08:53:15 +0000

This is a sad story of a great service with very poor documentation and abysmal customer support.

When installing New Relic agent, it will not work out of the box.

How to debug:

When you install the deb repository, remember do replace http with https. Otherwise the repository will not load:
Failed to fetch http://apt.newrelic.com/debian/dists/newrelic/InRelease 301 Moved Permanently
Check your INI files. Use phpinfo() and find out if the module for newrelic is loaded.
Go to /var/log/newrelic/php_agent.log. There should be lines there. For example:

2023-04-28 10:30:39.288 +0200 (2312 2312) info: New Relic 10.9.0.324 ("lilac" - "d563196dce79") [daemon='@newrelic' php='8.2.5' zts=no sapi='fpm-fcgi' pid=2312 ppid=1 uid=0 euid=0 gid=0 egid=0 backtrace=yes startup=agent os='Linux' rel='5.15.0-71-generic' mach='x86_64' ver='#78-Ubuntu SMP Tue Apr 18 09' node='XXX']

You should see things related to your SAPI, in my case php-fpm. If you are using fpm and you see things related to apache2 sapi, then you have some issues. Maybe you are loading modphp and you forgot to disable it?

If you still see nothing on new relic, then check Apparmor. Is it enabled? Is php-fpm in enforce mode? If so, you need to add this line to /etc/apparmor.d/php-fpm:

/proc/*/statm r,

then call service apparmor reload to reload all profiles.

ppa:ondrej/php on Ubuntu 23.04 (Lunar)

pallade — Thu, 27 Apr 2023 11:20:15 +0000

Ondrej's PPA is not meant to be run on non-LTS versions of Ubuntu. Despite what the docs state (they are unfortunately not up-to-date), he decided to target LTS versions only.

This said, you may still need to make it work, maybe temporarily. Here is how.

1: Add the PPA

sudo add-apt-repository ppa:ondrej/php

2: Edit /etc/apt/sources.list.d/ondrej-ubuntu-php-lunar.list and change lunar to jammy:

deb https://ppa.launchpadcontent.net/ondrej/php/ubuntu/ jammy main

3: If you need the intl extension, download and manually install libicu70_70.1-2_amd64.deb from the jammy repository. It has no dependencies.

4: Pin libgd3 to the official Ubuntu version. Otherwise it will make a mess of your system (Ondrej's versio is newer, at the moment, but it has different and unsatisfiable dependencies, resulting in a "broken" package).

Create a file like this: /etc/apt/preferences.d/ondrejphp and paste this:

Package: libgd3
Pin: release n=lunar
Pin-Priority: 900

5: install your PHP packages

php-fpm says: Failed to open stream: Permission denied

pallade — Thu, 13 Apr 2023 07:50:59 +0000

This is an error message I recently debugged with PHP-fpm on Apache2 and Ubuntu (other webservers will behave the same way).

Thu Apr 13 09:23:02.625178 2023] [proxy_fcgi:error] [pid 233355] [client XXX.XXX.XXX.XXX:46074] AH01071: Got error 'PHP message: PHP Warning: PHP Request Startup: Failed to open stream: Permission denied in Unknown on line 0; Unable to open primary script: /ZZZ/XXX/YYY/public_html/index.php (Permission denied)', referer: http://XXXXX.com/

What does this error say?

Apache connected correctly to the php-fpm backend, so the issue is not to be researched at apache level
php-fpm correctly identified the file (/ZZZ/XXX/YYY/public_html/index.php) so both the Apache2 instructions and the pool are configured correctly
php-fpm could not read the file due to permissions denied

What to check:

First, check how does the pool read the file. You can do that simply by calling ps aux | grep php-fpm
Then, see if the user can effectively read the file: sudo -u PHP_FPM_USER less /ZZZ/XXX/YYY/public_html/index.php. If this gives a permission denied, then you need to add permissions to the file (and, possibly, add a "x" permission to the path upstream to it).
If the php-fpm user can read the file, then something else is blocking it, and it is not system file permissions!

In Ubuntu the most probable culprit will be Apparmor. The solution is quite easy however: add your path to the allowed list of directories that php-fpm can read. You can use some magic to make this general.

Edit /etc/apparmor.d/php-fpm and add something like:

/ZZZ/*/YYY/site/** rw,

this will, for example, allow PHP to read:

/ZZZ/somesite/YYY/site/index.php
/ZZZ/somesite/YYY/site/public_html/anything.php
/ZZZ/othersite/YYY/site/public_html/hello.jpg

Then restart apparmor and it should work.

Css: A rectangle with an oblique bottom border

pallade — Sat, 22 Aug 2020 11:39:24 +0000

Update: trigonometric functions are now available in all major browsers! No need for such tricks anymore!

My designer came up with a comp that has sections, and some of those sections have an oblique border. Moreover, they also have a drop shadow! And of course, this has to be responsive.

So I came up with some ideas on how to solve this.

Find the codepen at the bottom of this post!

All of the examples have a div that will host the content ("above-gradient"), and another div that will render the sloping bottom. This is to make things easier, and also most of those solutions require two divs because of the drop shadow.

Solution 1: svg triangle without shadow

The first solution is the easiest: just create an SVG triangle and stretch it.

<div class="above-gradient"></div>
<div class='gradient gradient1'>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none' overflow="visible">
    <polygon points="0,100 100,0 0,0" class="main"/>
  </svg>
</div>

.above-gradient {
  width: 100%;
  height: 150px;
  background-color: yellow;
}

.gradient {
  width: 100%;
  height: 100px;

  svg {
    height: 100%;
    width: 100%;
    .main {
      fill: yellow;
    }
  }
}

Notice that the angle is not preserved when the viewport width changes, so the angle will increase when the screen is narrower.

Advantages: quickest
Disadvantages: angle is not preserved, no shadow

Solution 2: svg triangle with shadow

We will be adding a shadow now. Call it gradient2 and apply this CSS:

.gradient2 {
  svg {
    filter: drop-shadow(0 0 5px rgba(0,0,0,.5));
  }
}

Whoops: we will need to apply some z-indexes, otherwise the shadow will be also on the upper part of the triangle!

But look carefully: that shadow is inconsistent with the main shape! It is a shadow of a triangle, and not that of a trapezium. This is evident at the far right corner, where the shadow is zero (because near the edge there is nothing that could cast it).

Advantages: quickest
Disadvantages: angle is not preserved, inconsistent shadow

Solution 3: skewed rectangle with JS

So let's come up with something else. How can we fix the shadow problem? We'd need to cast it from a rectangle, that does not have the problem with the edges. And CSS has a filter that is skewY that would skew the entire rectangle to achieve exactly the effect we want.

Unfortunately there is a problem: the width of the screen is unknown, therefore we cannot both fix an angle and a height. One of the two has to be computed.

This means: trigonometry.

Unfortunately, CSS does not have trigonometric functions (yet), so the only possibility is to resort to some JS.

Since we need to do it the hard way, let's also solve the problem with the angle: let's try to keep the angle constant. We will therefore need to adjust its height.

    function updateTan() {
        let deg = 3 * Math.PI / 180;
        let adjacent = document.getElementById('main-wrapper').offsetWidth;
        let opposite = adjacent * Math.tan(deg);
        document.documentElement.style.setProperty('--len-at-3', opposite + 'px');
    }
    updateTan();

    window.addEventListener('resize', updateTan);

Our JS will get the width of the containing element and compute the appropriate height of our div, given an angle of 3°.

The first line converts our 3 degrees into radiants, that is the unit expected by Math.tan.

We are setting a CSS variable here, called --len-at-3, which we will use later in the CSS. We could access the element directly, but it is clearer this way.

:root {
  --len-at-3: 0;
}
.gradient3 {
  height: var(--len-at-3);
  transform: skewY(-3deg);
  transform-origin: top left;
}

If JS is disabled, the element will have a 0 width and no shadow. Since it will also have a z-index of -1 (see previous example) it should not get into our way.

Advantages: angle preserved
Disadvantages: requires JS

Solution 4: cheating with a PNG

There is a solution I used to employ widely which is just to get a triangular PNG file and stretch it edge to edge.

The shadow is consistent, and there are no problems at the edges. However, this feels a bit as a hack, since stretching an image much beyond its native size feels unnatural.

Advantages: compatible with ancient browsers, consistent shadow
Disadvantages: angle is not preserved, may lose quality when screen is larger

Conclusion

Did you come up with a better solution? Please, let me know.

Below is the codepen with all of them.