Episode: 4629
Title: What did I do at work today? Part 2
Source: https://hub.hackerpublicradio.org/ccdn.php?filename=/eps/hpr4629/hpr4629.mp3
Transcribed: 2026-07-31 16:15:28 (official HPR transcript)

---

This is Hacker Public Radio Episode 4629, for 2026-04-30
Today's show is entitled, "What did I do at work today? Part 2"
The host is Lee and the duration is 00:42:53
The flag is Clean, and the license is CC-BY-SA
The summary is "Lee does some coding implementing the user interface toggling availability of a list of resources."
You are listening to a show from the Reserve Queue.
This show was submitted in April 2025 to cover occasions like this
where there are gaps in the schedule.
there I'm Lee, this is going to be a bit of a continuation of my last unscripted episode
where I was talking about what work I did and that episode ran on for about an hour so I tried
to make this one a bit shorter and this is just one little piece of work done and do today
so I'll set the context again and the software is online platform for motor mechanics,
it provides some technical info and it helps them manage their business and I'm an employee of
the company that provides a software at the time of recording so I'm working remotely rather than
the office today so one day a week I work in a rented office and then there is the time
my motor remote I'm doing this on a desktop PC this is a custom built PC and I'm running
Ubuntu at the moment as my daily driver this version of the software they may be planned to
change this in the new version which me and my supervisor have talked about but in the current
version this is running on ASP in that with forms and the language is visual basic it's using the net
framework which is native to windows and unlike net core the net framework will just run on a window
server so I run run on Linux so because of this I'll be using a virtual machine to run windows
and I'll be developing on windows with the software that Microsoft provides called Visual Studio
and there's community edition as free or the professional in the enterprise edition
I've got license provided to me for the professional edition of Visual Studio 2022
and the database is an SQL server database and I'm running the developer license of SQL Server
on my developer machine but obviously there's commercial license for the actual live production server
okay so have a toll on my desktop die click and it will launch windows and launch the
libvert viewer so it's a patched version of the display drivers that I create especially
to install on windows 11 because of the monitor that I've got it's ultra wide screen and the display
resolution on this monitor wasn't supported in the drivers that I think red hat provides
called vertio so I'd click a tile on my desktop and it launches I was doing a bit earlier so
virtual machine was already running so I just tap on the icon and the bottom of the taskbar
and it launches me into windows so I'm opening Visual Studio and I've got three solutions
at the moment on the go there's the what I call the class library which interfaces between the
application and the database then there's the tests for the class library that actually
just goes through and make sure that the class library works as it should when I'm
wonderful the class library and then there's the application itself so earlier today I made some
changes to the class library and the tests and also in SQL Server Management Studio I made some
changes to the database tables and the stored procedures the change I was working on today was
for resources which are things in the garage like an MIT by so if you're not in the UK
MIT is the test that cars have to pass each year to make sure that they're roadworthy
so some resources could include an MIT by it could include certain tools or other things
and I just want to have a boolean flag so it's a yes or no true or false flag
there would say whether the resources can't be available so for example one of the MIT
bays might need to be repaired might be being serviced itself that resource should not be available
if it was then needed to be booked the person booking the use of that bays should
know that it's not available or it should just not be listed as being able to be used
and that part of what I'm working on haven't got that fire yet so still at stage of
quote defining the various data entities and providing user interface to work with these
data entities so later on it will be possible hopefully to put the calendar that you want to do
a certain job and a certain day using certain resources with certain stuff about this stage
it's kind of defying the staff and defying the resources and defining their availability
at sort of after this monx bit will be defining the jobs and what resources in staff are needed
for a certain type of job you know such as an MIT would need an MIT by for example
so I've got visual studio here I'm launching the application solution
and it's just loading it up so my visual studio I've got dark theme going there I've got different
colours for syntax highlighting and I've like exported those settings they import them again
and I kind of just do that so kind of matches the same colour scheme that I've got in sublime
text which is my other text that I try use when I'm coding even for myself for from my other employer
but it just helps that when I'm in visual studio for this employer that the colour scheme looks
kind of similar actually I'm just going to run this application and it takes a while to load and
it's connecting to a local copy of the SQL server database and it's actually running on my Linux
machine base that windows machine is connecting over the like local network to access the server running
on the Linux machine so it's launched Firefox and it's launched the application at local
host a certain port I can log into this application and choose a username password and Firefox
fills in for me of the test use of that I use and although it's a real user but the data I've
got scripted on on the mice is the data so while the data is real any personally identifiable
information has been changed with like random values that do kind of make sense but they're not
real data so in much less than the risk of accidentally doing something with someone's real data
like especially you don't need to be emailed out or something like that by accident or unless
MS message to it by accidentally fire off or if someone going to my machine they won't be
getting you know real people's real data well it's they would be getting it but anything that
identifiable about it like names and email addresses and telephone numbers would have been an
on the mice so going to the settings screen of this application and it's a bit slower on my
death machine than it would be in production so it takes like a few seconds to navigate between
the pages and I'm then going to the diary section of the settings which is the bit I'm working on
and I've got different tabs that I've created in this section workshop resources staff holidays
and advanced I'm not sure whether it now did spend quite some time on the advanced is perhaps
too advanced so I don't know if this will be there when it comes to the end user seeing this
but it's there at the moment so I'm looking at under resources and I've got coming up
the title resources and then it's a subtitle like base in equipment and it's got a bunch of
adder resource and it's got resource and resource type and then next to each one it's got an
icon to edit on icons delete and these icons come from font awesome so I can add a resource
and it's like it gives me a name for the resource and it gives me a type so it could be a workshop
or a vehicle left or an air compressor thinks like that it's got save and cancel I'll just cancel
that so what I'm kind of thinking is do I want to specify the availability of three sources
and the same place that I'm defining the resources I kind of I'm not sure so I could have another tab
so just to mention just why I've already defined the data side of things and that class library
when you're doing the user interfaces sort of another kettle of fish you try and keep those
fairly separate so it's almost like in terms of the data and the class library I've given
myself the tools to work with but then now I'm doing the user interface I can layer the user
interface and lots of different ways potentially and the same data could be present to the user in
different ways in different parts the user interface so you're kind of hearing my unscription
thoughts about this so could have a resource availability tab and now I think we already have quite
lot of tabs already and would have call it resource availability and how will I do this so
if I have resources I just want a long list of the resources and then just to tick off
whether they're available and not with a burning flag I mean I'm almost thinking in this section
for the resource so I could have a resource availability tab but I am kind of thinking a nice user
interface would be to have with this resources just like a tick box so not editing it but just
I think like an extra column that says where it's available not in a check box so when I define
these resources I made the number of columns like configurable so it could be free columns
two columns or one column and just from how I've kind of got familiar with how it looks as I've
been developing it I kind of decided to set one two columns so I think there's there's still quite
bit of space so could have a check box and that right so this is another user interface question
do I want it to have to save after you've clicked the check box or do I want the check box
to automatically apply that and you like you don't want the user accidentally tick in the check
box without kind of realizing that they're changing the data so throughout the rest the user interface
you've got save buttons almost on every form so that the user knows that it's not changing
stuff until they click save and then it will pop up it should pop up a message some area that's
up where it will save that the items have been saved or if there's a validation area it might
save that you know what's invalid and that it hasn't been saved yet and that they need to change
something before they can save it so also when I put this check box to the left or to the right
and it's kind of a mix like a mixing metaphor's got on the right hand side you've got these two icons
to which I like actions that you can do like edit or delete and then you would have a check box
which is a directly editable field so I stopped the recording there to have a think about it
and of consulted with the AI chatbot from a certain well-known cloud company and had a little
discussion with it and I decided the way to go would be to have toggles the instantaneously
save whether the thing is available or not thinking about how that will look it's a bit difficult
for me to plan out user interface stuff exactly how it looks I've got always run the browser and
dark mode and obviously all the users are running it in light mode so I'm seeing these controls
and icons as pink on black but if I can somehow turn off my dark mode it's called dark
region this thing some reason I haven't got midnight at visit on this never get why so without the
dark mode it's a dark purple and white is a color of that stick dark reader back on
so the large language model has come up with a way that I can create a toggle control
in web forms because there is no native toggle control it suggests I could use another
to give me a toggle control by really always prefer not to add dependencies especially if it's
going to be some sort of substantial dependency because then that needs to be kept up to date
even it being cursor costs sometimes so I'd just be happy if I can implement the toggle control
myself right so the first thing I've got to do is I leave the browser running actually
visual studio doesn't look that good with everything running because it lays out everything different
when the browser running so hit the stop button and my browser disappears so my user interface
for this bit of the application I've been creating what's called user controls so I've to find
the user control thing I've got everything related to this stuck in the folder I'd create called
diary because I mean this code base a lot of it is in almost all the the SPX is which are the
actual different web pages of the application they're all in the root directory
my stuff that I'm developing I put it in a folder called diary and like when I was doing
the counting stuff before I put that in different folders called zero and sage and quickbooks
just to keep it a bit organized and not to have so much clutter in the root directory
and these are all ASCX files which is not the same as ASPX because these are like
used to find controls which this is a way of compartmentalizing the coding and making a bit more
structured and not having the code all in a big mess together just keep stuff separate that should
be separate or partition it as it were so I'm looking at the resource table control I think that's
the word of it one or the resource well it will be the resource table control because that will
have headers or add an extra header which is a TH in the T-head of the table and I'm
putting it in an EM which stands for emphasis which basically means italics ideally I'd be
styling italics with CSS but for whatever reason I'm styling it with just in the EM tag so I'll just
put available and save that and then so it's a resource table second column
resource table first column okay I've just realized there are two columns here and actually it's
not entirely configurable by parameters it actually does depend on the bit of actually putting
the headers into both the left column and the right column so I need to do the same thing
and put the available as a header in the right column I'm figuring out how these rows are
getting populated all right so it's got a yeah resource type edit and delete so I just add an extra
column to the row control because obviously the table control has lots of row controls inside it
and let's see what is actually is the chatbot recommending I do so I'll just use as checkbox
and as be checkbox for this but I'm just going to style it as a toggle and have it instantly update
rather than need to press the save button as be colon checkbox and give it an idea I'll call the
ID available so this is the last two columns what should call the CSS class I'll call it a toggle checkbox
don't want giving it text but that's what's been recommended to fire up also that hopefully the
text will be hidden once the CSS class is applied it's actually I can implement this before I
implement the toggle the CSS of the toggle I can actually fully implement this working
actually saving to the database I'm just going to run this to make sure the my checkbox is now
appearing and clicking on the resources tab yes so what I'm seeing is the resource the type of the
resource the two icons the idea delete and then I'm seeing an available column and there's a checkbox
under each one and I can toggle it on and off why not toggle I can tick it on and off it's got the word
available next to it so yeah before I go CSS styling it to make it look nice that's actually
implement making it do what it's meant to do so guess I want a function in the row control to run
when the checkbox is being clicked and this will do what's called a postback so I should make it an
auto postback basically or I just do explain about postbacks this is the thing the way that
I have been web forms works and I've told you before this bit of an old technology but basically
every time you change something on the screen and it saves it on the on the form as it were
then the client sends an HTTP post to the server and it contains the state of all the controls
and this kind of happens behind the scenes most of the time sometimes you need to like get into it
and interact with it as it's happening but a lot of the time it's behind the scenes and it kind of means
that it kind of came from people wanting to develop especially like visual basic how they're used
doing the past but then do that on the web so it's pretty much the programming experiences
very similar in terms of yourself events that fire it's just these events are always kind of sending
something back to the server and then the server is sending stuff back to the client when that
happens so I know the modern thing is that the client is his own thing and it communicates with
the server via an API I mean that's a common pattern now so you'd have a single certainly something
else I've been working recently I just had us like the whole web page I just had like one web page
basically and even though there are lots of screens on it lots of different options it was just the
one HTML file the whole time with just different bits of it being shown and hidden and so on
so it would never actually reload the HTML file and in fact if you did reload the page
using the reload button you would basically reset the entire state of the application and have
to login again so any interaction with behind the scenes would be even an Ajax request and that's just
a communication behind the scenes from the web browser to the server and they would go to what's
called an API endpoint an API is an application programming interface that is something that's
interacted with through programming rather than interacted with by the user
it's basically the distinction between an API and something else that interacts so the API was
needed to save the state or to get new state you know to get to fetch items for example but
that the way this works is slightly differently so this is actually receiving stuff back from the
server and using it to render what's on the front end in a way it's it's a bit of the same idea
I'll try not to muddy every muddy things too much there's this whole thing with web applications
of managing the client's state and the server state and it gets complex however you do it isn't
I don't think that there really is a perfect pattern for doing it and it's just the patterns
of people tend to use have changed over time and the API one has become what popular in a way
this is an API but it's an API that's not exposed or designed by the user it's an API
as part of the underlying platform that sorts of Microsoft's thing that facilitates the communication
between the web browser and the server and to keep the states in sync and doing what they need to
so anyway that was a bit of a die tribe or a bit of a distraction okay so I think the best
way to do is to have a property that tells you whether the thing is available or not okay
well this is silly isn't it because I can just read and write from the state directly
so when the resource object is set which will be done higher up in the hierarchy I want to
change the state of the checkbox so within the public right-only property called resource object
I'm going to say available dot checks equals object dot resource available and as I was typing
that visual studio is popping me up little lists that would help me pick from what I could
possibly type related to what I'm typing and that's quite handy because it stops simple like
typos at least you spell everything right if you're picking it from a list as you're typing it
first as if you're trying to type it out of memory and just making spelling errors and then actually
I don't need to propagate the state of the checkbox up the hierarchy because I'm going to make it
apply immediately I won't have a save button it will just be as soon as it's changed it will
change in the database so I do need a event handler so I'll kind of private sub-routine called
available changed and I'll say handles available dot checked changed so sorry I should call it
I recall the function or the method checked changed because this is one of those things you
could call the method whatever you like but it's a convention just to call it the same as the event
and basically I all I want to do is save it to the database so make sure I'm including
access to the database and I am I've got well it's not the database it's the class library
in the class library in turn talks to the store procedures in the database and they in turn
actually read and write the data from the table so that you've got at least two levels of
instruction between the user interface code I'm writing and actually getting in the database
so I'll create a new resource object object resource as new resource so I'll say
object resource dot resource ID I'll say actually I want to assign several fields of one so I
use the wave command with object resource dot resource ID equals and I think I'll go
property in this classical resource ID and then I'll assign this resource name
the resource name equals resource name both coming out red
oh no sorry resource dot text and then dot resource resource type equals yeah resource type nice
it's that right it's property called resource type ID resource type ID so resource type
equals resource type ID so resource ID resource name resource type and we're very
available which is what we're doing now so dot resource available equals which is defined
a property if we got property no resource available equals available dot share it then we'll just save
that to the database object resource dot add so add is and I it might be updating but just add
tool handle the situation of it updating and that's it and this just run this and see if it works
and it'll be quite miracle if it does actually work first time I'll sorry I've just realized
I need to have an auto post back because the check changed I don't think runs
automatically I've got feeling I've got to specify that whenever this control changes so when
it's tick to run tick then we want the client sent the post back event to the server so we just say
auto post back equals now we go through now run it again click on the resources tab
I have kind of expecting an error to happen when I do but we'll see
I notice this is quite nice I don't know what I'm seeing is the the hoist so I've got three
resources to find a hoist to jack in a radio for some reason I think that was just test data that
called it radio 25 but the hoist is available with the transmission jack is available and
the radio isn't so now it's a moment of truth I'm going to tick off the hoist from being available
and it reloaded the page and the hoist is not there so I just go to another tab
and then come back to this tab just check that the hoist is still in the there
I'll make the radio available and I'll even go to a whole different page
and then I'll come back to the settings screen
go back to the diary section, go back to the resources tab and yeah so the radio is still available
so this is work so all that's now required is for me to make it look nicer
with some CSS CSS is cascading style sheets which is basically
even though you've got information on the web page the cascading style suits decide
how it's going to be presented to the user you know what it actually looks like so
it can look completely different depending on the cascading style sheet and thankfully this
chatbot has given me a bit of CSS that I can possibly use I've got a choice I could embed the CSS
in the actual control that I made a thing or I could make it global and I think it may be
making it global be good because then I can reuse it so I'll go into the thing that's a style folder
somewhere styles and then we've got style dot CSS and it's quite a long file just double check
if this toggle defined here and already know no one's defined a toggle so far so I'll be the first
to define the toggle and actually it's got some quite extensive CSS provided by the
large language model so briefly reviewed it I'm going to kind of paste it in and just
kind of see how it goes I don't appreciate it adding comments for me well it adds comments
then that's good for me to know that they're there but I don't really want them in the code base
they're more there to help me understand what this code is doing and how I might tailor it
so it's like a whole host of CSS classes I've just put in now and I'm just adjusting the
indentation because it's unhappy you've got completely into indentations completely inconsistent
with the rest of the code here and I'm seeing these put some colors in so it's probably I
will want to adjust to make them consistent with the rest of the application assuming this works in
some way save that and then run it we'll see well it has done absolutely nothing that style she
is actually been included going to the web developer tools and I just reload the page recent
style.css yes even a pen something to the URL just to make sure it just depends on number
to make sure it always reloads the style she I did save that I'm going to actually look at the
response of that and scroll down to make sure when you don't assume anything yeah everything
everything I'd paste is in there is there right I'll go to the I'm going to run it again
I'll go to the web inspect and see what classes it's got yeah I have done I'm not super familiar
with any of these tools in particular it's not like I've been working with them for years so I
don't kind of never assume anything about how anything is working I just figure out what it's
doing I've now I'm seeing something different then the checkboxes and they look at there
when I've run it this time let's turn off the dark reader such case makes it different
do what I said I was going to do which is check the CSS class of the toggle of the checkbox
yep so span class equals toggle checkbox it's got stuff within that so what I'm seeing is an
input so when it's created this checkbox it's put an input in a label so I'm kind of thinking
the CSS class wanted it to be applied to the input rather than the thing so I'll go back to my
style she and I'm wrong I mean it's all here and I'll be bugging not loving you bugging mode I'll
say so toggle checkbox position relative display in light block width and high it's got
thing that makes it invisible and it's got a slider and a slider before and a slider
after I'm going to read through this to figure out what it's meant to be doing so this is talking
about a pseudo element so then what is the pseudo element this sort of crates of virtual element
that isn't really there in the HTML but the CSS creates it so then I've seen something I've
never seen before which is a plus sign in this CSS class definition it's the adjacent sibling
combinator so it's just the next one along basically if two are side by side you know what I'm seeing
that we should be yeah we should be defining this checkbox a bit differently with summation of
so put inside a label just not a nice p-label just a plain HTML label and we should be putting
a span after it's called slider so this is probably why the coding sample isn't working
wasn't showing anything so let's go into my a cx so resource row control dot a cx
to be honest the label isn't made it so it may be just adding a span class equal slider
let's try that now which I can see I actually need to read the closing tag of the table data element
what is sell element and if I can do a hot reload that's neat yes so you can actually
without recompose the program well without having to stop and then rebuild everything you
still hot reloading it's compatible it needs to or that's together what it needs to now
got these toggle boxes about the right size so don't want the word available being there because
that's redundant by the way I don't need this to be a slave or a combinator span
this is looking quite good now so it's actually a different color the ones that checked
the ones that are not checked although I don't like it and switch off the dark mode to a click this
one there isn't checked it doesn't do anything you should be reloading the page some maybe it
did need a label oh it's actually working it's now it's just it's not moving the slider anywhere
as far as it needs to so I'll see I've got translate x only two pixels I must have done that
accidentally look back at the code but was suggested 26 yeah I should have made that 13 and half
the size of everything and I know everything's meant to be responsive nowadays and should be using
example pixel values but this application is very much it's been designed not for my
ball if there's going to be a mobile version that's going to be have a different UI it's designed
to be on a table or a desktop PC so hot reload and to refresh the page there's to resent
the post back data maybe my hot reload is not functioning as it should close the browser
and run it from scratch again and then she my eyes are dying so I'm putting the dark mode back
on so I didn't seem to be interfering with things too much oh very nice well almost clicked on it
and it just refreshed the page so it's doing the animation but then it refreshes the page and I click
and again it does the animation and then refreshes the page now I'm just thinking is it about
word available is such a long word to be up there in the header again I'm going to go to
some my little chatbot and to the large language model thing and the for synonyms
something operational working active functioning ready online life present accessible in service
up and running deployable so as you could reverse the meaning and actually he's down
for lot of operational or out of service placed in the web browser seem to have a lot of browser
windows open so close not nice go back to my diary folder look at the resource table control
and it's still of the word available I'll just have your life question mark your life of a
question mark again I'm telling the dark reader of actually I do want to see the actual colors
that it's rendering these as I think green would be better than blue okay this green is a bit too
light this one is a bit too olivey and this one is just right and actually the flash on the screen
when I click the toggle thing and it reloads that's not noticeable when I'm in light mode it was only
noticeable when I was in dark mode just because I think that the dark reader was having to
reapply the CSS after refresh in the screen so this is quite nice it's still kind of think the
word life looks a bit clunky with a question mark so I'm going to just take off the question mark
right so I'm going to save this code to the repo can't leave sin dropbox and that keeps an
instantaneous backup for any version of any file but I want to then copy what's changed into the
repository so I've got a problem called beyond compare it's a Windows program
actually got myself because I just found it useful and it's a similar one called meld on Linux though
though this seems to be the best one that I found them works well for me on Windows looking to see
if I've previously compared these folders and yeah there's the previous compare there such
open that one and then I go into the in application folder it's still refreshing because it's
not just comparing the file dates it's actually doing a proper compare of the files see in
something that's changed and don't know why so I'm going to do a diff or quick compare it calls it
right this is something I'm seeing stuff that someone else has done so I've got a feeling I'm not
got I've got a different branch in the repository because I was working on some of the counting
side of things and so it's actually using the main repository rather than the branch that I'm using
for the diary project so I'm just going to delete this folder and refetch it from
the repository and get up so I mean I'd say no had to delete a folder on the command line
in Windows I know Delta Reusters did a job but I don't have Delta Reusters exists but rather just
sent it to the recycling and then I've got GitHub just to get the URL that I need some typing
Git plan minus b diaries name the branch and pasting in the URL and it's got me the latest version
and I run my file comparison program again I've been at going to the application directory
I mean I know if this is the right thing because yes I just my diary files I can see four of them have
been up there and while I've been updating the ACX files also been updating the dot fee
ACX dot vb files which hold the code and the dot ACX dot designer dot vb files which hold the
light that design layout although I never edit that directly myself some copy in those to the
right it's prompting me that I'm sure want to do that and yes seeing if anything else got changed
nothing got changed relating to what I've done today I can look at I can now is useful to look at
the dates I can see nothing else with today's date so then I'll just upload those changed files
to the actual branch and see the the program directory in the git status you can see those files
there so last time I was recording a website about this I was going for a rather long-winded way
using Git because I had a few issues and I just wanted to be a hundred percent sure so I was
being overexplicit so I can much more concisely commit these files to the repo so so git commit
a hyphen hyphen all hyphen m in quotes include toggle control for saving availability of resources
and then git push for a chin diary and if it's gone so I'm going to look my time I spent on that
I've got a little guilty that monitors what files I'm accessing uses I load fire weight
I'm just seeing how long I think I spent on that given that I did even I wasn't coding that
long it did take me quite a lot of thinking about it and researching it so I'm going to look
two hours for that so I'm going into job plan going into my log folder going into 2025 we can't
ding 25-0426 already got an entry for 25-0420 so I just say a availability toggle to resources
and two hours synchronize that saved okay so hopefully I've able to see this down so it's not
anything like as long as it actually took me for you to have to listen to and there was like a
good period of thinking time in between when I started and I paused it and then the second half
that's just the way it goes I have been kind of doing other things what in between the first second
half as well I didn't look at those hours I think someone's messaging me now so I'll probably end
the podcast here so this been completely unscripted so apologize if any of it seemed a bit off the
cuff and thanks for listening thank you bye
You have been listening to the Hacker Public Radio podcast, at hackerpublicradio.org.
Today's show was contributed by a HPR listener like yourself.
If you ever thought of recording a podcast, then visit the HPR site to find out how easy it really is.
Hosting for HPR has been kindly provided by anhonesthost.com, the Internet Archive, rsync.net, and the HPR Community Content Delivery Network.
Unless otherwise stated, today's show is released under a Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.