Blog Archives

August 8th, 2022
3:43 pm
Batch file exits after running npm command

Posted under Knowledge Base & Windows & Windows 10 & Windows 11 & Windows 7
Tags ,

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

August 5th, 2022
3:36 pm
PrimeNG V13 Picklist Component does not scroll on touch device when drag drop enabled

Posted under Angular & PrimeNG & Uncategorized
Tags , ,

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

August 4th, 2022
2:38 pm
Caching of old microapp scripts breaks new version

Posted under Angular & Uncategorized & Webpack
Tags , ,

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

July 27th, 2022
8:57 am
Booting a Surface Pro 4 in recovery mode

Posted under Hardware & Knowledge Base & PC & Windows & Windows 10
Tags ,

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

June 8th, 2022
11:11 am
PrimeNG V13 Panel Header Text Not Centering

Posted under Angular & Knowledge Base & PrimeNG & Web
Tags , ,

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

June 7th, 2022
9:40 am
Windows 11 mouse multiple click issue

Posted under Hardware & Knowledge Base & PC & Windows & Windows 11
Tags ,

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

June 7th, 2022
9:03 am
Javascript console.log statement can be asynchronous/browser dependent

Posted under Angular & Javascript & Knowledge Base & Web
Tags ,

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

May 16th, 2022
4:47 pm
Issues when upgrading Yoti PHP Identity API to use v3 of the Yoti PHP api

Posted under Knowledge Base & PHP
Tags ,

I was in the process of upgrading all aspects of the Microapps functionality to the latest versions, and in particular, was upgrading the Yoti SDK versions used as part of the Age Verification Microapp Identity API. I’ve already posted about the Java/Spring Boot issues I hit when upgrading the Java/Spring Boot Identity API. I also hit a couple of issues when upgrading the PHP version of the Identity API, which are detailed here as follows.

1/ To manage the PHP versions of the Yoti SDK, I was using PHP composer as detailed hereRather than complicate matters for such a simple demo API, as per the linked post, I elected to use a simple PHP project which was not integrated to Composer within PHP. Composer functions such as install or upate were performed separately on the command line.

When doing this upgrade, I was using a new PC and so had to check out the code from scratch from Bitbucket. As a policy I do not check in IDE related files (in this case, the PHP version of eclipse), as I wish to keep checked in source IDE agnostic. I therefore cloned the repository on the command line, in a folder under the eclipse workspace, and then tried to create this as an eclipse project from existing files. Whenever I attempted this initially, I got the error ‘Cannot create project content in workspace’. After investigation I found this stack overflow post here on the subject, which says in the comments that this is in fact a long standing eclipse issue. I was able to create a project from existing files in a folder outside the workspace, but eclipse refused to do this inside the workspace, which is strange. It was possible to create the project outside the workspace, then copy the folder into the workspace, and then import it as an existing project, i.e. with all the eclipse project files already present. This all seemed unnecessarily hard though and certainly appeared to be a bug as per the post.

2/ When creating/importing the new project into eclipse, on several occasions I hit an issue where the resulting code had compilation errors in eclipse relating to the composer include files. After investigating, it appeared that due to the way I was importing/creating, eclipse was trying to interpret the type of project (possibly as a composer one) and set some complex invalid entries for the build path and include path which tripped everything up. In the end, I noted that importing just as a simple PHP project was fine and all the errors disappeared. Whilst this may not integrate eclipse fully with the underlying Composer structure, as before, I was not interested in doing this. The project was just a simple interface calling Yoti’s php api, with no other composer dependencies of mine. I therefore stuck with a simple project import and ensured that, however I went about the import/create, I told eclipse effectively ‘stop trying to be clever, just treat it all as a simple php project’. This worked fine.

I did note that unlike intellij (and indeed eclipse for java), control/clicking on a method did not appear to go to the method, or offer the choice of visiting either the declaration or the implementation. After checking online, this appears to be the norm – I could not see any posts indicating that ctrl/click or some variant of this would work in this way. There were however keyboard shortcuts to do this kind of thing, but I did not investigate further.

3/ In the end, my solution to both these issues was to use the import menu in eclipse and import directly from bitbucket into eclipse, creating a new project in the process. The double advantage of this was that the integration with the remote bitbucket was immediate as a result of the import, and creating the project in the workspace during the import did not give the error above under 1/. 

To do this, I used the clone URI that bitbucket provided for cloning, but without the git command prefix. Whilst the initial import form has a ‘local directory’ next to the remote git uri field, this was not the target local folder – it would try to do a local import instead from this folder, and suppress the git uri. I therefore left this folder blank and proceeded with the next button. A subsequent screen had a local folder location field for where to place the imported/cloned project, and when placing this under the workspace, crucially, eclipse did not complain, and everything proceeded fine. An important point during this process was that I took great pains to ensure that any fields relating to the type of import were set to basic/simple eclipse project only, i.e. I told eclipse not to try to second guess the project type, and risk getting the errors I received above in 2/ again.

After doing this, the project looked fine in eclipse, with no compilation errors. I then updated the composer.json file as required, and manually ran ‘composer update –no-dev’ to update the vendor files, then did a refresh/revalidate in eclipse. This all worked fine.

4/ Another issue I hit was when accidentally missing out the pem file when deploying under zen hosting with the new version. When this happened, Yoti correctly returned an exception re the missing pem file, but the error code was set to 0, rather than to a specific http status as is done for the success case which gives a code of 200. Unfortunately, whilst this code of 0 was returned in the response body, the actual http status was set to 200 ok, as for success. This resulted in the age verification application assuming a successfully returned age of -1. In the java/Spring Boot version of the same api, I had elected to return all error conditions as a 404 for simplicity. This would be sensible i.e. if a broken or invalid token was sent to Yoti – Yoti would return an error stating that it could not decrypt the token, which should map to a 404. I did not want to get into mapping individual statuses to http responses as the mapping would not be easy/good anyway, and it did not feel right to map all errors to a 500 say, as in many typical cases this would not be appropriate, as in the incorrect or duplicate token usage as above.

I therefore did exactly the same for the PHP version as for the java one, for consistency. All 200 error codes were sent as an http response of 200 as expected, but anything else in the code field, which would not be a success, was sent as a 404. This solved the problem and all worked fine.

Comments Off on Issues when upgrading Yoti PHP Identity API to use v3 of the Yoti PHP api

February 2nd, 2022
6:30 pm
Issues when reinstalling NVM/NPM/Angular environment under new PC build

Posted under Angular & Web & Windows 10
Tags , ,

Update/Fix 24/2/2022

It appears that in the end much of this issue was down to a basic error on my part! I have previously documented here and here about the collision of object namespaces when loading multiple webpack bundles for separately deployed web components/angular elements. My solution is to perform a custom post build step to rename the root webpack objects to be unique for each webpack deployment.

This requires building to be done using npm via npm run build rather than the basic angular/cli ng build. Unfortunately I did the latter when initially rebuilding the microapps, hence the post build step did not run and I suffered the consequences I have seen previously due to namespace collisions. Once I rebuild everything correctly, all the microapps worked fine.

Original Post

I had reinstalled a PC from scratch with Windows 10, and this required rebuilding my whole dev environment from scratch. I hit some issues when I just simplistically tried the latest node via nvm install, and the latest angular (14) on projects previously run under angular 11 – builds failed and would not complete. Initially I had failed to install node-sass, so installing this helped, but I was still getting webpack errors on building.

I reverted to angular 11, but also reverted node as well. Finding a compatibility matrix for the versions was tricky but this one on stack overflow was a real help. I therefore reverted node to 12.11.1 using nvm install 12.11.1., and reverted node-sass to 5.0 due to some build errors that stated that 4.0 or 5.0 was needed.

Having done this, I was able to do a build using ng build, but this would not run using http-server, which gave the error “Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client”. My next action was to suspend/pause Kaspersky Antivirus, which helped, as it revealed a firewall port that I needed to enable. When I then immediately tried running directly using ng serve, this worked fine and I was finally able to successfully run my microapp fabric.

I then uploaded the built microapp as a test version under my zen hosting and tried running it from there. This ran fine with no errors, pointing to a local issue with my http-server. This likely needed an older version. I reverted to 0.12.2 to correspond with the current version when I last worked on the microapps, using the http-server version list here,  but this did not work.

I then checked exactly which versions of key components had been used successfully under Windows 7, and reverted to exactly those versions. These were v15.5.0 of node.js, and v0.12.3 of http-server. This worked successfully, and I was able to run compiled versions of both the fabric and the dataview microapp. Whilst I could have checked the versions used previously more carefully, this certainly highlights the potential brittleness of the environment as a whole to version changes.

I then upgraded http-server to the latest version and tried again, and everything still worked fine. Therefore, this definitely appears to point to an issue with the version of node.js alone. It also highlights issues with the version matrix I hunted down previously as above. I ended up using a later version of node which was technically incompatible in terms of the above version matrix, but which worked successfully, whereas a version mandated by the version matrix failed completely with the above error.

This whole area of versioning can certainly prove to be an unexpected and ill-documented minefield!

 

Comments Off on Issues when reinstalling NVM/NPM/Angular environment under new PC build

January 31st, 2022
12:00 pm
Windows 10 Boot issue after Gigabyte GA-Z77-D3H reflash to F22

Posted under Hardware & PC & Windows & Windows 10
Tags , , ,

I had some issues when upgrading to windows 10 – when sleeping/waking I sometimes got a blue screen error which forced an immediate reboot. I was running bios revision F18, so elected to upgrade to the latest non-beta version which was F22 at the time.

Reflashing was fine using qflash straight from the bios having placed the new bios image on a flash drive. It was also safe as the motherboard was dual bios so wouldn’t brick itself if I accidentally had a power fail whilst flashing.

However, Windows 10 would not boot after the reflash. The reflash reset all motherboard settings to default, so after some investigation I noticed that the Peripherals, SATA mode selection was set to IDE rather than AHCI, the latter being required by Windows 10 (and also used by my Windows 7 installation previously). Changing this allowed the system to safely reboot, only needing a slight repair fix by windows which took only a few seconds. All was then well. I had also tried to set the OS type to “Win 8” rather than the default of “Other”, but this was in fact a red herring – not sure what this setting does exactly (claims to allow certain Windows 8 features but does not elaborate), so in the end I just left the setting at “Other”.

This fixed the issue. 

Comments Off on Windows 10 Boot issue after Gigabyte GA-Z77-D3H reflash to F22