Category Archives: Javascript

Using ChatGPT v4 to write an angular component

My frontend experience with Angular is minimal, I’ve maintained an open source application for integration with the Rekor Scout docker image here to help keep my basic understanding of Angular around. After a year of neglect I upgraded to .net 7 and angular 11. I also added in a service worker and turned the frontend into a PWA that can be installed on the desktop and mobile. Along with that native browser/pwa push notifications alongside the existing pushover functionality.

I wanted to duplicate the camera masking logic Rekor has in their native web dashboard. Telling the agent to not analyze portions of the video saves on processing power and can help prevent false captures. I found the exact functionality I desired, but it was written in React.

I solicited some ex-coworkers to help me in their spare time. One person recommended trying out the new ChatGPT v4. I gave it a screenshot of the React app and a short description:

It took a few revisions but it ended up getting 95% of the functionality I needed. After added in some app-specific logic I had a working component in under an hour!

DataTables Search box blocking backspace key?

Working with DataTables for the first time I was having some issues with the UI. The search textbox was not allowing the user the backspace. They were able to select the text and use the delete key to clear it out, but it almost felt like there was a script capturing and suppressing the backspace key press. Upon closer inspection the “type” of the input was “Search”. According to w3schools (and Visual Studio’s Intellisense) this was valid HTML. The example of their site worked as well. Perhaps it had something to do with the other scripts running on the page, or possibly the Bootstrap library addon for DataTables? Changing the type to “Text” fixed the issue. I found an easy workaround here until I can fix the root of the problem.