Salient Soft

I created a simple batch file to run a number of npm build commands in succession.

However, the file exited after running the first npm command. This appears to be a side effect of the way npm runs – when you run npm, you actually end up running npm.cmd, which exits after completing. This is detailed on StackOverflow here.

A simple workaround as per the post is to prefix the npm commands with call – I did this and everything worked fine and all the builds were executed.

Comments Off on Batch file exits after running npm command

In V6 or PrimeNG, you could enable drag drop reordering on the picklist and still scroll on a touch device, e.g. on a mobile phone. This was handled nicely by using a click and hold to select an item for drag drop, and a swipe to do scrolling.

In V13 this is now broken – touching on an item instantly selects it for dragging, without using the previous click and hold, so that it is not possible to scroll by swiping the source or target list any more. I have confirmed that it used to work on my old V6 microapps version which used a standard PrimeNG V6.1.3 picklist, and also have checked the current PrimeNG showcase online – the current showcase is broken in exactly the same way when trying to scroll via touch on mobile. Whilst scroll bars are present on the RHS of the list, they are very small for Mobile. I did try to enlarge the scroll bars for mobile, using some webkit specific styling, but this proved problematic as it is not fully supported for Firefox – they cannot be resized on firefox. Even when I did get it working, selecting the scroll thumbtrack for mobile proved intermittent and tricky – not a nice interaction at all.

My simple workaround for this is to disabled dragdrop for the picklist for a touch device by setting dragdrop=false (i.e. dragdrop=!touchDevice). I already have a config property in the fabric to detect a touch device, and have replicated that as a global config parameter which is visible to all the microapps. The picklist can then use this. This is actually better than it sounds – whilst you cannot reorder items within a list any more, you can move between source and target using the buttons, and drag/drop is tricky on a mobile anyway as the source and target lists appear one above the other with typically only one of them visible so dragging between them is tricky as again scrolling is involved.

For reference, changing the scrollbar styling via the webkit styles is documented here and here.

Applying the webkit styles is very picky per the posts above – spacing etc. matters – there must not be a space between the element/class name and for example ::-webkit-scrollbar or it won’t work. In the end this SCSS styling worked for me, and fortunately I was able to get it working with a classname rather than just e.g. a ul element which is the one I wanted to hit:

.p-component.p-picklist {
  .p-picklist-header {
    background: $ss-widget-header;
    color: $ss-widget-header-text;
  }

  .p-picklist-list {
    &::-webkit-scrollbar {
      width: 50px;
      height: 50px;
    }
    &::-webkit-scrollbar-thumb {
      width: 50px;
      height: 50px;
      background: #a8a8a8;
      border-radius: 4px;
    }

As above I dumped this approach anyway, as even with a very large scrollbar and thumb track, it was difficult to consistently scroll on mobile, and anyway  the source and target for drag/drop were not both in view simultaneously anyway.

Comments Off on PrimeNG V13 Picklist Component does not scroll on touch device when drag drop enabled

An old chestnut this – when upgrading from an old version on my hosted environment, my chrome based dev desktop worked fine, mainly due to my habit of hitting ctrl/f5 which clears the cache before loading.

However, on my android mobile, this needs an explicit cache clear before loading the page e.g. via the settings/history etc., which I was not in the habit of doing. Therefore when testing the new version on mobile, it failed. The new version was a production build which did not have source maps. The old version was a dev one with source maps. The console errors indicated an inability to find and load the source maps, which were not present in the latest prod deployment, but were still being requested by the cached scripts on the mobile. An explicit cache clear solved the problem. 

When I tried this again on the desktop without the cache clear, i.e. with a straight refresh, I was able to duplicate the error seen on the android chrome.

Note that the problem only applies to the fabric deployment as all the others have a timestamp (ts=) querystring parameter added to the scripts when loading, which prevents caching. I normally disable the output hashing on all microapps including the fabric for convenience, to avoid editing the app config to change the names of all the dynamically loaded scripts, even for a prod build.

Doing this on the Fabric is unnecessary as the scripts are not loaded dynamically by my code, so if I left the hashing on for the fabric, this would solve the problem, as the timestamp querystring would sort the issue for all the others.

Going forward, I intend to improve automation of the build process for hosted deployments by providing e.g. an NPM script to build all the microapps into a single zipped deployment which can be just uploaded and unzipped – at present I am having to do each one individually and copy up the dist directory. Whilst all this is only a POC application, I am doing it often enough to make this worthwhile so as not to waste time or make mistakes with it.

Doing this would also allow the possibility of using my own timestamps on all the filenames for every script, and dynamically modifying the config to incorporate the timestamps in the build script. This would allow caching to be left enabled for the code scripts (but not for the config), which would actually be a benefit as it would improve startup times and lessen bandwidth usage – especially relevant for mobiles. I could add a fabric config parameter to indicate whether the querystring timestamps should be added or not when loading scripts, so that the feature can still be used when needed. Perhaps I could leave this enabled for dev mode and not bother with timestamps on the actual filenames for example.

Using my own timestamps on the names would simplify and standardise the names, as I could use an identical timestamp on all scripts for every microapp done as part of a given build, to simplify naming and build automation – I would only need to pass around one single timestamp parameter which would be used for all generated script files and in the config.

Comments Off on Caching of old microapp scripts breaks new version

I had issues with this – the method proposed everywhere online was to hold the volume up key down whilst booting from cold with the power button, but I could not make this work at all, and could not enter the bios/UEFI either.

In the end I used the method detailed here fff. Right click on start, pick settings, then Update and Security, then select Recovery. Then click Restart Now from under Advanced Startup.

This worked fine, and gave a number of options which I did not explore, but the one I used was boot from usb device which gave the option of booting from a flash drive, which worked fine.

Comments Off on Booting a Surface Pro 4 in recovery mode

Unfortunately with V13 of PrimeNG and its supported chart.js versions, the axes do not get removed when switching  chart types and bleed onto the next chart. It appears that the chart must be destroyed and recreated when changing types – a refresh or reinit call are not enough, and explicit angular change detector calls don’t work either, see here.

Therefore as just having a single permanent chart and changing its properties fails as above, I’m explicitly making the chart data undefined to ensure that the *ngIf in the template destroys and recreates the chart. This works fine.

This appears to be a new bug.

Comments Off on PrimeNG V13 Chart Axes Bleedover Issue

I hit an issue where a PrimeNG panel, used in a Dataview component in grid mode, was not centering its header text after upgrading to the latest V13.

The issue was weird – the header container div was set to flex by the Panel component itself, but when I used justify-content: center to center the text in a dependent span, it remained left justified despite all my efforts to check for other style issues, force styling with !important etc.

When I checked the latest PrimeNG showcase online, I noticed that this also has the same problem. I noted that other containers/elements in the Panel such as the content container div did not use flex, so I felt happy to force the styling for the container back to block and use text-align: center instead. I did this locally in the affected microapp component rather than the overall theme, but might rethink this later and standardize if I hit the issue again.

This solved the problem and the text centered correctly.

Comments Off on PrimeNG V13 Panel Header Text Not Centering

I needed a shortcut for this as my new keyboard did not have its own sleep key like the old one.

There are various shortcuts for this which are discussed here.

My favourite one in the end has been Windows+X, then U, then S all on the keyboard, as this does not need any mouse involvement and is quick.

Comments Off on Shortcut to sleep PC in Windows 11

I have had a repeated issue on windows 11 where my usb mouse appears to do multiple single clicks for one click, including an apparent extra click triggered by the mouse button release.

I tried a number of tricks with the settings, and also changed to another older usb mouse and replaced the original ageing mouse, but the issue persisted. I also wondered about USB port/hardware issues, and tried swapping ports several times, but to no avail.

I also tried updating the HID compliant mouse driver and the usb drivers, but in every case I was told that I was already on the latest version. In the end, I followed some online advice and removed all the HID compliant mouse drivers (as I was trying 2 mice to compare the issue). I then had to use the keyboard to navigate to a restart.

The restart reinstalled the latest mouse driver, and this completely fixed the problem. I am not sure if the issue was due to a corrupted mouse driver or corruption in its configuration/the registry somewhere, but either way, this resolved the problem perfectly.

Mouse issues like this, including possible causes and solutions, are discussed online here and also here.

Comments Off on Windows 11 mouse multiple click issue

I had trouble when debugging some asynchronouse code – console.log was showing a later value/state of an object and not the current one at the time of the statement, which significantly confused the debugging process.

It turned out that console.log operation is browser dependent and not guaranteed to be either sync or async, and can also change between versions. In addition, when logging a complete object, the log statement might be synchronous, but it is only logging the object reference. The actual values will only be accessed when the object is opened in the chrome inspector for example.

These issues are discussed online here, here and here.

In the end I used breakpoints and inspected values directly when stopped on a breakpoint, rather than relying on the operation of console.log. This point needs to be borne in mind when dealing with async code, callbacks etc.

Comments Off on Javascript console.log statement can be asynchronous/browser dependent

I have already noted here and here that Prime have removed themeroller support in favour of a paid for theme designer tool, and more significantly, have removed there actual new theme SCSS api from open source, so this is paid for as well, preventing you from using their new API with manually designed themes.

My solution is to pick one of the free themes which is nearest to the look I want, and then rebadge its compiled css (which you do get a copy of) as SCSS, and then customise that.

Obviously the raw CSS has a lot of duplication compared to the original SCSS. My original strategy was to copy raw rules to the end of the file in a new section, and modify them as required to override the original rules, by making more specific as required (e.g. by adding a p.component class). This would then allow them to be matched to their originals, which sounded attractive from a correlation/derivation point of view.

In the end I gave up on this idea. The section with the modified rules was getting messy with all the duplication, and was harder to make sense of. I therefore adopted a new strategy which was to copy all the rules and modify as required, and then do some fairly straightforward merging of them into single SCSS rules. This dramatically simplified the modifications and made them clearer to read, so I have stuck with this idea going forwards.

There have been oddball cases where I have taken a different approach, and actually edited the original generated css directly. For example, there is a media query to switch the menu bar into hamburger only mode at a certain fixed viewport width. I did not want this, so as the media query covered a lengthy section of css, I removed the media query directly, replacing it with a class based rule so I could still switch in hamburger mode dynamically when I wanted. This still encapsulated the same original css, and seemed the tidiest approach in this case.

Comments Off on PrimeNG Theming Strategy