Transcript

[0:00] Music.

Introduction to Chit Chat Across the Pond with Helma Vanderlinden

[0:10] Well, it's that time of the week again. It's time for Chit Chat Across the Pond.
This is episode number 785 for February 3rd, 2024, and I'm your host, Alison Sheridan.
This week, I'm talking to Helma Vanderlinden, whom many of you have probably heard from before.
She's the mastermind behind turning the Taming the Terminal series into a bona fide book.
She's also become a good friend and even came to visit Steve and me in California recently. Welcome to the show, Helma.
Okay, hi. I'm glad to be here. Well, the story with Helma is going to be great fun, but it won't make a darn bit of sense unless I give you some background.
This episode was almost a Programming by Stealth tidbit episode, so it's not really very light, but we're going to try to make this interesting to a more generalized audience, and you can tell us whether we succeed.

[0:54] My plan is to keep it at high level and not to dig too deep into the geeky programming stuff.
But let me give you some background here. In the Programming by Stealth podcast, just like it says on the tin, Bart Buschatz has been teaching us how to program.
Because he spends so much time creating his tutorial show notes for the podcast, he's let one of his own programming projects languish.
The project is his fabulous, complex but memorable password generator, xkpasswd.net.
I've tried finding how far back we originally talked about his tool on the podcast.
I know we talked about version 2 in 2012, but I wasn't able to find the original first time we talked about it.
I put a link in the show notes to a 2020 article where I put together a little how-to tutorial about how to use it to get passwords you can remember and type but are high on the uncrackable scale.
While XKPassWD does everything it needs to do, it was written in the Perl language and depends a lot on libraries that are no longer kept up to date.
Bart's been very worried over the last few years that XKPassWD would fall over in a heap if he didn't port it to modern libraries with the JavaScript programming language.
He knew he'd have to learn a lot to port his code, so he decided to use his learning process to teach the programming by Stealth students along the way.
We'd already learned a lot of nifty skills that would come in handy, but he taught us a lot more that he needed for xkpasswd.net.

[2:13] For example, we learned JSDoc to auto-create documentation of our code.
We learned Jest, which would allow us to do test-driven development.
We learned Webpack, which would allow us to bundle all of the code into one glop that could then live on a website without all of these ancillary files.
Makes it a little more portable.
We learned how to make diagrams with Mermaid so we could document the various classes we'd need in the code.
Since this was going to be a collaborative project with the Programming by Stealth students helping to write the code, Helma co-hosted an episode of Programming by Stealth with me to teach us how to use linters.
Linters are little programs that make sure everyone is writing code according to the same style guide.
You know, things like the proverbial spaces versus tabs argument.
It just decides for you and you have to obey it.
Finally, in December of 2022, we had a kickoff episode of Programming by Self for the new JavaScript version of XKPassWD.
At this point, the only thing keeping us from moving forward was that Bart wanted to create the diagrams himself for the port from Perl to JavaScript for these class things.
But Bart couldn't find the time to actually create the diagrams.
So remember, this was December of 2022.

Impatiently waiting for diagrams and a play date

[3:25] We were ready to go, and we had to wait for this one piece of it.
And this is where we finally pick up the story with Helma, right?

[3:34] Yeah. You were patiently waiting for these diagrams from Bart.
And then, so what happened?
Well, I must confess, I can't remember when it was, but finally I got impatient and we had a play date.
We being you and me. Yes. Behind Bart's back.

Starting with diagrams and looking at the code

[3:57] Yes, behind Bart's back. And then I decided, why don't I just start with these diagrams?
And then I looked at the code.
I don't know anything about Perl other than doing a search and replace.
And then I looked at the code, but it was so fabulously documented.
I didn't need to read the Perl code. I could just look at the document and see which functions there were, what the arguments were, what the return values were.
So it made it easy to just build the diagrams from there.
And then I showed them to you, and you were very excited.
And then I got some courage, and I showed them to Bart.
And Bart was very excited so that was good and then I thought okay so here are your diagrams when are we going to make the next step, and that took for ages and I didn't want to push him.

[5:14] But I was too impatient. So I learned patience along the way.
One thing people may not know about Bart is the reason he is sane and so good at what he does is he's very good at compartmentalizing things.
I am all over the map. I'm writing a blog post. I'm checking email.
I'm watching TV. I'm talking to Steve. I'm, you know, jumping in and out of walking the dog and things. I just jump around all the time.
And so I do kind of a mediocre job of a lot of things, but Bart sets a focus.
He is right now from here to here. It can be days, it can be weeks, it can be months long blocks where this is all he's going to do.
These two weeks, I'm going to do my finances for my taxes.
And he doesn't do anything else. And so when he's in one of those modes, there's no breaking in to go, hey, let's program right now.
I'll drop what I'm doing at the drop of a hat if Helma says, let's have a play date. Let's go play code. it. It's like, okay, let's go do that.
So the problem was that this block of time was getting longer and longer.
And you weren't the only one writing to me going, hey, can we start yet? Can we go?
Huh? Huh? Huh? Ed Tobias has been all over me for us to try and get started and do something.
So you're waiting patiently.

[6:25] Oh, I remember I contacted Bart and said, hey, Bart, we need to get together.

Setting up a date to discuss working on the code

[6:29] You, me, and Helma, we need to talk about what's going to happen here.
And Helma's Helm was really ready to go to start actually doing the code.
Yeah. And he said, I can't think about it until X date.
And on X date, I can think about it, but I can't do anything, but I'm allowed to think about it. And I forget what the date was.
It was in the middle of December.
And he said, I'll- Yeah, that was around the 15th of December.
Yeah. So he said, I will have the brain bandwidth to have a conversation with Helm about it. And I think you two talked together without me, I think, because I didn't. Yes, true.

[7:05] We set up a date. And then while he was cooking dinner, we had a discussion about whether I would work on his code.
And I was very cautious because it's his project.
And I didn't want to step on his toes or anything to do with like pushing him in a direction that he didn't want to go with this project.
But then he said...
If you want to start, I don't want to hold you back. And that was, for me, that was the go sign.
Chomping at the bit, doesn't he begin to describe it, right?

[7:57] Something like that, yeah. And because it was already, Christmas was approaching, and I had two weeks off from Christmas until the week after New Year.
And I thought oh my god in these two weeks I can do a lot and I decided no because you know how it is this is the new shiny so I want to jump in and I'm also all over the place um I thought well I planted some other projects to work on so let me just take one week for this project and then Then go back and do the projects I planned.
So you ate your dessert first.

[8:45] Yes, that was the near shiny. So I really went into a sort of coding frenzy.
I just got up very early. I sat on my computer and I just programmed until it was time to go to bed.
And luckily, my husband makes dinner. so i just go over there have my dinner and the other breakfast and lunch and whatever and then i would come back uh so that's that's yeah and this time rather than just jumping in and see where i uh would end up i decided let me do uh sort of.

[9:27] You know, like the agile working way of things.
I wrote little user stories, which means that as a user, I can generate a password.
And as a user, I can generate a number of passwords and the number I can decide myself.
Something like that. So I was building it up, making the code more and more complex, which would also mean that whenever time was running out, I would at least have something.
And whether somebody else or I would jump in later on, you could see from the things that were done and the things that were on the list to be done, you could figure out what's next to do.
Because I know myself, if I would jump in in three, four months, I have no clue where I left off.

[10:25] So if you did it in a linear fashion, it wouldn't work. So you did big picture and then narrowing it down to these user story pieces.
Yeah, yes.

Building the Basics: Generating Passwords with a Button

[10:37] Because I had all kinds of ideas and then I thought, well, let me do the basics.
So the basics is I can press a button and there will be a password generated.
Okay. To get to that point, I already had to do the user interface.
I had to do some of the actual library.
I had to do the code that makes the UI go with the library.
So the code that you press a button, what actually causes the password to come out? Yeah. Yeah.
So, yeah, so it's the user interface, so how it looks, it's the button that you have to press.
So there is some JavaScript that can react on the button and that can display the password.

[11:33] Well, the first version was I could just put in a random string of text.
And then the next one was, I can generate a password that complies to one of the presets that are defined.

[11:49] Let me pause this for there for a second, because I realized if people haven't seen xkpest.bd.net, the original version allows you to take one of these, we'll call them like recipes, configurations, Configurations that you can say, okay, I need something that's going to be a terrible password, an eight-character password, or I need one that will work well on an iPhone that's easier to type.
There's all these different configurations you can choose from.
They're recipes, if you will.
And then once you choose one of those, then you press the generate passwords and some spit out.
And you have a little toggle that says, how many passwords do I want to have spit out? Yes.
Yeah. So that's the basic functionality of the website.
But you have the code in Perl still that's generating the password, don't you?
Or is that not so? Did you have to rewrite that piece of it, the math and all that, to generate the password?
Yeah, I did everything again.
Because Bart actually has two projects. One is the library in Perl that you can call from the command line and a version that he used in his website.

Rewriting the Library and Building the Web Interface

[13:07] And the website, of course, has more code to make the library go and present everything on screen.
So what I did is I took the second project, so the website project, and rebuilt that one.
And um so actually if he wants a separate library like the original x whatever oh it's awful to say hs xk past wd.net yeah that one yeah just so that haystacks i think yes it is so um so the dot net That part is actually the website project.
Okay. And he has also the library.

[14:02] Okay, but the library is, and for people who don't know, the library is like a function you can just pick up and shove into something else.
It's a good way to describe it, right? Yeah, a little black box.
Yeah. Yeah. But that was written in Perl. So you had to rewrite that before you could do any of this fancy, gooey web interface, right?
Well, I worked side by side.
So the easiest thing for me was to build something that represented the website.
And if you would press the button, I would just spit out a string.
Okay. So I knew that the string would be on the right side and the code was there that pressing the button would lead to a string.
Right. And then I improved the code by building the part that generated the random string based on one of the random generators that Bart has in his Perl code. Oh, so you wrote that from scratch? Yes.
Yes. Because A, I couldn't understand what he was actually doing with his random generators.
He has multiple and I still don't know why.
So that may be a topic for discussion with Bart sometimes.

[15:23] And I thought, well, I mean, the whole world uses some random function.
There must be something there i'm not going to reinvent the wheel sure so it took me i think half a day to figure out what would be a truly randomness function well not so that don't they say there's no such thing that's like the holy grail there isn't really a random true as close as approximation as you can get.
Yes, yeah. And so there is one in all kinds of cryptographic functions of libraries, which is probably of a better quality of randomness than the ordinary random function in JavaScript.
So I used the cryptographic one. Oh, OK.
And then from then on, I built the code so that when I pressed the button, I would get a random password.
So, and I clicked very often to figure out if it worked. And by that time, I thought, well, now we need automated tests.
I'm not going to press this button 10 times every time.

[16:41] Well, that was a big part of what Bart was teaching us for this was to have tests and to speaking again to the generic audience or the general audience that may not be taking the class is that if you set up a test and what you're supposed to do is set up a test. And since you haven't written the code yet, it should fail.
Now you write the code, you run the test and it succeeds.
Now you go make a bunch of changes to something else. you don't want to have to go back and test by hand the thing you test you you knew was working before but you do have to make sure that you didn't break the thing that was working before so you build up these tests so that each each time you change something you run the test and you go okay nothing old broke the new thing is still broken let me work on it until it does work keep running the test but make sure those those tests pass and that was actually part of the fun um i'm going to tell a little story about helma's visit she comes out here for a conference uh and an an origami conference.
And I was worried about what to do with her here. I said, you know, we could hike to the Hollywood sign.
We could go to the beach. We could, you know, go to Palm Springs, all different kinds of things that are around here. A lot of fun to do.
And she said, can we just sit in the kitchen and program?

[17:51] Why, yes, yes, we can, Helma. And we had the best time, just two little nerds, happy as anything, sitting in the kitchen.
And what she was really pushing me to do was really learn to do test-driven development, to run these tests and why they're important and how to invoke them.
And that was a great learning experience. And I don't think you could have found two happier people that day than us.

[18:13] Yeah, that was such a great fun. And when you showed me the Christmas card on your kitchen table, it took me right back to that week when we were just sitting there talking and discussing and programming.
And yeah, it was great. You sent me a beautiful Christmas card with some origami on it, and I put it in my kitchen and took a picture of it and said, it's just like you're there.
Yeah. Yeah. And I immediately felt back there.
Beautiful weather, happily sitting there programming. We did go for a walk on the beach.
Yes, we did. I did make you go for a walk and then we went back and coded for the rest of the day.

[18:57] Yeah. I had to get my steps in. Right, right.
Okay. So you start writing tests so that you're sure you're not having to just press the button to make sure you're still getting the randomly generated code, right?
Yeah, yeah, true. Yeah. And by that time, to actually see what's happening, you have to run Webpack to get from the code to a functioning website. websites.
So Webpack is what I mentioned earlier, how Bart taught us how to bundle our code into a blob that can run on its own.
So you don't have all these separate files that you have to deal with.
And so we have a little web server running and it's running that bundled code and Webpack is what creates that.
But I find it really tedious because every time I make a change, I have to go over to the terminal and I have to write, you know, run, build, whatever.
And, and write, having to tell it to build every time is really annoying.
Yeah, that gets old very quickly. So I went in and I figured out there is actually some script that you can run.

[20:07] Which makes Webpack watch the changes in your code and do the build automatically.
Yeah, you got to teach me how to do that with my code. Because I have tested what I've worked on the code that Helmer created.
And it was just such a joy to hit Command S in Visual Studio Code.
And I would see my terminal go, yep, just built it again for you. That was so nice.

[20:30] Yeah, yeah. So the next thing you had to do is once the build is done again, you have to reload your server, which is also very tedious.
So I found another script that just automatically runs a little server and that reloads once it picks up a new build.
So then automatically you would see your browser window change because you just fixed the bug or added something.
And if you did it wrong or you saved halfway a sentence or a statement or whatever, then your browser would tell you that because it fell over in a heap.

The Power of Laziness in Programming

[21:21] So what you're learning right now listening to Helma is that the best programmers are the lazy ones, the ones who don't want to do extra work.
So they program out, they automate the things they don't want to do.
And Helma didn't like having to rebuild with Webpack and then reload the website.
And so the laziness won, right? right?
Yeah. Yeah. I mean, they say that about programmers and they say that about sysadmins.
Could sysadmins also automate away their work? Yeah. It reduces errors too, which is a nice thing.
True. True. What I like about what Helma did in her code too, and I'm skipping ahead to where I get to jump in of what I got to do, but she documented this.
So there's just this little little tiny readme file and it says, okay, do this, do this, do this, do this. Now you're ready to go.
It's got like three or four commands that you run, and then you've got this automated thing running.
And I didn't have to know how any of it worked, but I was able to get in and start playing with the code with, with those quick, easy instructions.
So that was, that was delightful having that documented. Was that also for future you?

[22:28] That was also for future me. Um, and because Because we already discussed that you wanted to participate.
And I thought, oh, and of course I wanted to show it to Bart.
And I had to put at least some lines of explanation in to make sure that he would start the project and actually see what happened and have an opinion on it.

[23:03] Rather than being frustrated that I created something and he didn't know how to make it go.
Right, right. I can't tell you how many GitHub projects I go to where somebody points me to something and I just sit there looking at it going, how do I make it go?
I was just working on one with Ed Tobias the other day. We were looking at this thing and there were no instructions.
There was a readme, but it didn't really tell you, okay, go, where's the go part?
How do I make it go? I can download this thing, but I don't know how to make it go.
There was nothing to tell you that. And it was really obscure what you had to do. We did figure it out mostly, but that's really handy.
You mentioned letting me participate, but this is...
What one of Bart's basic tenets of everything that he does is open source.
So the fact that you were able to go in and edit his code is because he wants us to be open source, but you're actually a member of the project team.
So the two of you are members of the project team. You're a very trusted person in this.
And even though Bart trusts me and the way open source code works, you can always, or the way stuff works, if you use this Git thing that we've been talking about, which is a version control system that lets you dial back.
If I go in and I break something, Helma can undo it. She can literally just go back to a previous, what's called a commit, and say, okay, undo what Allison did. She's a fool and she did that all wrong.
And she could just back it out. Or she could back out pieces that were silly and keep the pieces that were good.

[24:32] But what we're doing, and I'm liking it this way, is I am not a member of the the project team.
I am Joe Blow, Sally, Sally programmer out here.
I'm just nobody who just said, Hey, I have an idea of how to make this code better. Let me request to change the code.
And that's, that's a real different experience for me to get to do that.
I've heard of doing that, but I haven't gotten to actually do it before.

Collaborative Work on Programming by Stealth Show Notes

[24:58] Yeah. So I feel flattered being one of the program team members.
You should, you should. He didn't let me in.
No, I know he would if I asked, but Bart and I do a lot of collaborative stuff.
Actually, all of the show notes that you see for Programming by Stealth, we do that all in Git.
And I am an equal member with Bart. Bart writes the original, and then I do proofreading.
I may add a few things. There's components I always add to the show notes, like where the recording is and things.
And uh that makes it easy for both of us to do the work together and that's gotten me used to doing git even though that's not a programming version thing with git but git can be anything anything you're writing or creating can be can be done yeah and i mean it's also a great way for collaboration yeah i mean it's not just a sort of backup of all the versions you created It's also collaboration.
And the nice thing about Git is that two people at opposite end of the world can work together.
They can each work on the same copy of code or, in this case, the show notes of the PBS.
And then they can upload or push the information to Git. and then you get to see each other's work.

[26:28] Yeah, Bart sent a screenshot of the programming by Stell's show notes where Helma was fixing something in the way some scripts she's written for us work.
Bart was writing next week's show notes and I was editing this week's show notes.
And you can see in this little tree that there's me and there's Helma and there's Bart and we're all weaving in and out and we never stepped on each other.

[26:50] Yeah, yeah, that's the great thing of Git. Yeah. And it's not like if you're familiar with Google Docs where you can both be typing at the same time, like I can see Helma's code or what Helma's typing real time while I'm typing in there.
It's not like that. You download a copy and then you push it back up after you change it.
And if there are conflicts, like let's say I changed the spelling of one of Bart's words where let's say he wrote color with a U and I change it and he wants it back.
He can undo that one change or he can write over it or there'd be a version conflict.
And then you got to duke it out about that one thing that you changed that you stepped on each other.
But most of the time, I'm working over on this chapter, he's on that chapter, or he's in this paragraph, I'm in that paragraph, and you're working on the underlying code. There's no stepping. Right.

[27:37] No, and Git is created by Linus Torvald, the creator of Linux.

[27:48] He knows what he's doing. And there is, I think, multiple thousands of people working on the Linux kernel together.
So if Git works for that, then we can all work like that.
Right, right. So part of the point of this, the reason we're talking about this part is this project is open.

Forking and Pull Requests for Collaboration

[28:12] And if you're not a member, esteemed member, like Bart and Helma, what you do is you do what's called forking the code.
And that's basically you're taking a copy of the code. So when I write on my computer on that code, and then I push it back up to GitHub, I'm not pushing it back up to the real repository.
I'm pushing it back to a repository in my own Git account, my GitHub account.
And then what I can do is I can do what's called a pull request where I'm requesting Helma and Bart, Helma or Bart, to pull my code into theirs.
And then they can look at it and they can see what changes I've made, run tests, you know, do whatever they want to do with it.
And then they can decide what to choose, what they're going to accept and what not to accept.
So that's a way for people to collaborate where, you know, Maybe I'm not a great programmer, and I do a bunch of stuff wrong. They don't have to accept those changes.

[29:08] True. And actually, I'm working this way in my day job, and I learned there how to pull down somebody's pull request, integrate it into my copy, check if it works.
And if it works, I can accept the pull request and push everything up to the original repository. Okay.
Yeah, I haven't actually had anybody contribute to my code, so I don't know how to do that part.
Maybe I should have you fix something in one of my little projects, and that way I could learn how to accept the pull request.
I feel a playdate coming up.
Helma and I love our little playdates, whether we're in the same room or across the world.
Helma's in the Netherlands, though, by the way. So I don't know if I'd mentioned that.
So getting back to XKPathWD, DashJS is the new name, right? Which is a little easier to say.
What else do we need to know about the things that you did in there?
Where did we leave off in our bullet point outline there?

Project Overview and Initial Rules

[30:16] Give people an idea. What's the state of the project right now?
What does it look like? What's done? Yeah.
Okay. At first, when you and Bart talked about this new version of XKPassword, he explained, he set some rules.
I want a well-written code. I want documentation.
I want tests. tests um and i want a webpack script that builds everything so that was basically one of the first things i did to get every all those pieces up and running and then of course add some more scripts because of i'm lazy and um what i also did is i put up in github issues all these user stories that I talked about.

[31:16] So basically, you can check the user stories to see which one I did and which one are still to be done.
But basically, what it does now is it takes BART's default preset, so the default configuration of how the password should look like, And you can generate up to 10 passwords at the same time with the press of a button.
Based on, I think I actually forgot something, but basically based on the list of English words, the English dictionary that he put in.

[32:04] And I think somewhere along the line I took out three quarters of the list to make it just go faster. Uh-oh.
So you made the search space smaller. You made it less entropy.
Yes, I did. But it's just, I think I commented out something or I put in some, all the words are there.
But just most of them are commented out or something like that.
So that's one of the tasks you could do.
Go in and get out my little marker so that you will get the entire list of words again.
I did that when my browser began to consume more than two gigabytes of RAM. Oh.
And everything became slow and I thought that that was the issue.
But once I restarted the browser, everything was fine again.
But I forgot to take it out, finally.

User Interface Configuration Options

[33:23] And what needs to be done to make it match the functionality of the current website is you need to be able to select from various presets.
You need to be able to fully reconfigure all the bits and pieces that you can change for these passwords.
Oh, yeah. Let me explain that. So what you can do in BART's original is you can say, I want three words, and I want what's between the words to be asterisks, and I want one number at each end, and I want padding of two pound symbols on one end and two exclamation points on the other end.
And then every password that's generated will have that format.
And so he's got these, not only the presets, you can then just change these little pieces. You can keep changing it.
Like if you find it really hard to get to the pipe command or you run into a lot of websites that don't like the pipe, I shouldn't have said command key.

[34:30] If you just find it hard to get to that key or you find a lot of websites don't accept the pipe, then maybe you want to change it to a more quote unquote normal special character.
And so you can change all of those. So yeah, those, okay, so those need to be done.
Yeah and um bart had um the option for various languages um dictionaries in various languages and i just stuck to the english one first so extra languages need to be added as well oh there's a name for the localization localist no yeah well localization is when you have the the website be in German, Spanish, or whatever.
This is just a dictionary of words.
Okay. I'm going to squint and still call that a little bit of localization.
Okay. Okay. Maybe not full. You know, we should probably put these in as issues in Git so people can see where to get started.
Yeah. Yeah. So there are already some issues in there, And I'll check later on if the dictionaries and the presets are there and the full configuration is there as well.
And I already added some ideas of mine.

[35:53] One is that you can have this prefix, fix this your own configuration stored on your machine so that when you go back to this website, that it will automatically load your preferred preset.

[36:13] Right. Did you add that one as an issue? I have it as an issue, yeah. Okay.
That's a good one. You know what I did to get around that problem on the still standing, not yet fallen over in a heap version?
Yeah. I just wrote a TextExpander snippet for it.
So he taught us how to build the little, I don't know if it's JSON.
What is it? Now that I think about it. Yeah, it's JSON.
Okay. I already built the JSON object.
It's the same because that's what he requested.
So the JSON object that you would export, the current website has an import and export.
So you can export your configuration and you can re-import it.
So you don't need TextExpander, but you can export. Import and export, but you have to remember.
And I made it sure that if you export it from the current website and you would import it, the feature is not there yet, but if it is, you should be able to import the JSON and have the website be configured with that same configuration.
Okay. Okay, that's cool. So, import and export is also something that needs to be done.

[37:42] And I used Bootstrap for the markup, for the sequence.
And for the audience, that's the look and feel of the thing, like the way the buttons are presented, the spacing between blocks of the display of information. Yeah.

[38:08] Yeah. So if you go in and watch and read the documentation on the Bootstrap website, you will often see a little code block with an example.
And in that code block in the upper right hand corner is a little copy button.
Okay so i decided i also want a copy button so the copy button is there including the tooltip but it doesn't function yet so the copy button for for the passwords but that would copy all of the passwords well that's that's what i was what i want to do is if you don't select anything thing in that text area and you press the copy button, it will copy all the passwords.
But if you select something, whether it's one character or an entire password or one and a half passwords, and you would press the copy button, you would only get the selected text. Okay. Okay.

[39:14] Yeah, I guess that's marginally useful.
I mean, most people know if you've got to select the text, if you hit Command-C, if they were separate little objects on screen.
We're having a play date redesigning this right now, but if they were separate little objects, you could just hit the copy button and not have to select it.
But the way they are, they're just kind of in a text area, but that might be a future idea. That would be kind of cool.
Yeah. So I put in the button and I put in the tooltip, but i didn't put in any functionality yet okay okay i'm afraid if we go much further we're going to start uh keep redesigning and we should probably do that more in playdate form um yeah that's true true yeah yeah so one of the things that bart loves about this is that he didn't have to do any work at all i mean he did six months worth of training of us with uh you know teaching teaching us JS doc and web pack for bundling and you taught us linters and, you know, all those things went together to build the audience's ability to help write this.
So we really, I wanted to do this conversation with you because I think we should kick it off. I think people should start contributing.

[40:26] The door should be open to allow them to know that they can contribute because we had naturally, we've been doing all this often secret until it got to, you know, it's gotten to a point where it's, it's, it's a functioning project.
Yes. Yes, it is. And actually maybe it's a good idea.
If you explain how you took the code and fixed the bug that you found.
Okay, cool. That I, that's of course, my favorite part of the story is my, my four lines that I wrote.
One of the greatest things about Helma is that well, let me describe what happened.
So I looked at the, at the website that it creates.
And I told it to generate the three passwords.
And the third password didn't fit. Only the first two fit. So it was like two and a half that you could see.
And the little window had that the little tick marks down in the corner that you could drag it down to make it show you the whole thing.
But if you started adding more and more passwords, you basically had to scroll up and down in this cramped little box.
And I said, I told Helma that I thought this was a bug that really should be sized appropriately for the number of passwords. and I created in GitHub, you can create an issue to the project.
And she wrote back to me and she said, that's cool, fix it.

[41:40] Well, more politely, I think you said, would you like to try to fix it?
And I got that back from Helma while I was at CES and we weren't even sleeping, much less getting time to do any code or anything like that.
So I told her I would start working on it when I got back and I procrastinated for a little bit.
But then because we had been at CES and we have all these great videos creating content for the show, I now have a bunch of time where normally I would have to be writing for the show.
I have these blocks of time I could dedicate to doing some some coding.
So I took a look at it and my favorite part of it was that I, for the life of me, could not figure out how all these files were structured.
One of the things that happens with bundling like this is you create a folder that has, or a directory that has a bunch of code in it, but then another set that looks very similar gets auto-generated.
And I couldn't figure out which one I was supposed to be editing.
Was I supposed to be doing the one in source or there was another another folder.
And they were indexed out HTML files all over the place and trying to figure out which one.
And so I thought, okay, I'm going to create a mermaid diagram to show Helma where I'm confused.

[42:46] So I brought up this, started creating the mermaid diagram of all the different folders and what was in all the different folders.
And I mentioned something about how I was looking at it. And she said, well, you know, there are some, my class diagrams are in there.
And I was like, yeah, but it's not about the classes. It's the structure of the folders I'm looking for.
The funniest part, I go back to the GitHub project, and not only is there already at the main level, at the top level, not only is there a mermaid diagram showing the structure, I'm the one who created it.

Organizing Files and Editing Code

[43:20] So i that was so funny i i pre-documented it in a way i mean i put in lots of little symbols like the ones you're never allowed to touch they're in red and they have big flame things on them don't touch these folders here's the ones you're supposed to edit i mean i created this but to my to my defense it was a long time ago that i created those and i forgot that i did it but i looked at my diagram and i went oh there's the ones i'm supposed to change.

[43:49] So once i know what files to work on uh so there's an index.html file which is what builds the the the website itself and then there's this css file that that has to do with the look and feel and then there's main.js which is where the javascript code is and i looked through her code and i found that she had a variable called num which then was the number of lines in that field And I just wrote a simple little function that said, when somebody presses the button to generate passwords, find out how many passwords they asked for, which was another variable I had access to, find out what it is and change num to that. that.
And so now when you press the button, it runs, it's already running all this complex code to go through random generators of words and it's building all kinds of, you know, entropy and doing all this math and everything.
At the same time it goes, oh yeah, and count the number of lines, you know, and throw that in there while you're at it. And now it goes boom and it comes up.
And then the other thing I did was I figured out how to, I think I figured out how to get rid of of the little... A resize.

[44:57] Yeah, the resize thing at the bottom of the field.
So I felt like I'd made fire, Helma. When I saw that, I was marching around here. I showed it to my kids.
I made a little video. I mailed it to people. It was like, look what I could do.
And that's what excites me so much about programming.
When you solve something like that, you just feel like the adrenaline is nothing like anything I've ever felt. It's fantastic.

[45:25] So now you know what feeling I had every day of the week during Christmas and New Year.
The corollary though is as soon as that happens, as soon as you feel that adrenaline rush, you want more.
So you work on more and the only time you stop is when you fail.
When you get stuck, when you can't do it, that's when you stop.
And that's the worst thing because you never stop on a high.
You don't go, I solved it and walk away.
You look at it and go, yeah, but you know what would be even better?

[46:00] Yeah, true, true. That's what happened. And I briefly told you about how I was looking for this random function, something that would be as random as possible.
And I couldn't get it to work.
And it took me, I think, half a day or even longer.
And I was just stomping around the house and I was procrastinating of going on.
And then the next day I sat down and something clicked or whatever it happened. And then it worked.
So yeah, I felt this adrenaline rush.
And then, oh yes, Yes. So now I can do this and this and this and this.
Yeah. Until you get stuck again.
There is a huge amount of value in walking away.

[46:51] You're positive you've tried everything, but until you walk away and you have to go let your brain work on something else, go for a walk, taking a shower often helps me.
There's some of the hot water hitting the top of my head, like fires new neurons or something, but that seems to Maybe something that'll help me break it loose.
Yeah. And what helps me is writing an email or a forum post where I want to ask a question.
And then I write down and then I, okay, before I make a fool of myself, let me check everything I write down.
Do I have the right versions? Do I have the right file? And then...

[47:32] Damn, I forgot this setting. And then my problem was solved.
You don't have to send those emails. You only have to write them.
Yeah. Yeah. And then halfway through you find the solution and then you just throw everything away. Oh, I did that today.
I wrote a bug report to a developer and then right before I hit send, I went, let me test one more thing.
Now there was no bug. There was nothing wrong. It was some self and do the inflicted wound, you know? Yeah, yeah.
So if people want to get involved in the project, I'll obviously put it in the show notes, but it's under Bartificer, which in Ireland apparently is something people would know what that means, but an artificer is like an artisan, I think.
And so Bartificer is a play on words, and that's Bart's GitHub persona.
And the project is xkpasswd-js, But of course, I'll put a link in it.
And we really welcome people to fork the code and get to work now.
I think, I mean, we're ready, right? Yeah, true.
What might be helpful is if you plan to work on something, put an issue in GitHub and assign it to yourself.
I don't think you can if you're not part of the project. Let me check that.
Oh, yeah, yeah. Yeah, of course. No, you can't.

[48:59] So you could... You could add a comment?
Yeah, well, let's see. Can I make a comment? So remove problematic words from dictionary.
Oh, Bart commented. Yeah, you could make a comment and say dibs, and then maybe you could keep an eye on that, or Bart can keep an eye on that and assign.
Well, no, you can't assign people either, can you, if they're not part of the team?

Realizing a Bad Idea

[49:22] Maybe not. No, no, yeah, yeah, you're right. You're right. So that was a bad idea.
But you can write something in the comments.
You could. Yeah, what we could do, what if, like, remove problematic words from dictionary? Let's say I agree I want to do that one.
And then you could...
Create a one of those little tags that says assigned or something like that or you know somebody's working on that but in any case it can still be solved by several people, right true true it doesn't get stomped on because of the power of git right no that's true but um i know um i know myself if i solve a problem and somebody else already did solve the problem them i feel like i wasted time true yeah and so i guess put right dibs.

Establishing Rules for Task Assignments

[50:16] Yeah i call dibs on that that's where you say that one's mine somebody could call dibs but say i'll try to get it done in the next x number of weeks or something like that and if they don't get it done then somebody else can steal dibs yeah true i'm not sure what the rules are on this yeah well there is the only rule there is is if you commit um or rather yeah if you commit at the issue number so hashtag say five means i'm working on each i've worked on issue five this belongs to issue five so you do the conventional commits like fix or work in progress or chore or whatever.
And then you put in a space, of course, and then hashtag and then the number of the GitHub issue.
Once you, when it's pulled in as a pull request, it refers to that issue.
And then you can cross link and see, okay, this code belongs to that issue. Oh, that's nice.
Can it be so in the commit message or in the commit title?

[51:29] Does it matter? In the commit title. Okay, in the title.
Okay, we're getting a little bit nerdy here for the general audience, but we want to pull everybody along.
Yeah, if you want, you can check my commits.
I've done that already, and then just follow there. Follow the format.
Well, this is really cool.
Would it be a true statement that someone could actually use it right now to get?
Yeah. Yeah, it doesn't have as much functionality as the current version of the website.
Oh, it doesn't have entropy information either.
It doesn't? It does. Does it? Oh, sorry.
Yeah, the statistics are there. They are. Okay, sorry.
I was so paying attention to that one little text area. I don't think I looked below it, but it is in there. Below it is the status. Yeah.
So it's functioning. it's functioning yeah but the the thing is there is no website currently where it's publicly available we should do releases we could do a beta release.

[52:39] Yeah but that means we have to actually find some place on the internet to put it up no no we can do it within git i do that all the time with my with my code while i'm working on it i create a little Yeah, I mean, yeah, I can make a release.
Yeah, of course. But then you still have, you need, you can't just open the HTML.
You need it as a web server.
But it does that inside Git. Yeah.

Working on a Time Adder app on GitHub Pages

[53:13] So I have one I call, I'm working on this Time Adder app.
Oh, we can do it on GitHub Pages, yeah. Yeah, GitHub Pages.
So it's github.io slash, so mine is podfeet.github.io slash time-adder.
You can get to it. So we could do that. It'd be a beta.
True. Yeah, we can do that. But I mean, we can automate. That's using your own risk.
Yeah, true. True. I mean, it will generate about the same quality of passwords that it would do on the original website. Well, except you took a bunch of the words out.
Well, yeah, that's true. But you are going to fix those. See how she is?

Discussing customization and configuration functionality

[54:00] Yeah. And then, of course, you have less customization and configuration functionality. functionality.
But the quality of the passwords is, I think, the same.
Yeah, yeah, that's right. Well, I think this has been really cool.
I know the community is going to be super excited about this.
And we'll probably, hopefully, we were trying to get this done in time to talk about it on the next Programming by Stealth, where we can talk about the fact that the project has technically kicked off and more than it did in December of 2022.

[54:33] True, true. We've actually got functioning code. I got to tell the audience that Helma's code is a thing of beauty, and I hope we can all try to keep it in her style because she uses variable names that you can tell exactly what they are.
The function names are exactly what it does.
You know what the function is that generates the passwords? It's called...
Generate password. You know, I mean, everything, there's no abstraction layer.
You don't have to look at, at, you know, an acronym and try to guess what she meant.
It's, it's written out. It's, I know it's a lot of text to type, but everything auto fills in now in, in code when you're writing.
So it's not that big of a deal.
And her documentation is beautiful and her tests are beautiful.
And it's just, it's just a wonderful thing. I, I, I was thrilled that it's only because of that, that I was able to figure out where I could do this.
Cause I was like, Oh, So there's what happens when I press this button.
Where's the click event? Oh, it's that function. Oh, that's the name of the function. I know what it is.
Where's it going to put it? Oh, it's going to put it in password text area.
You know, I knew exactly where it was going to go. It made it so much easier.
So I hope everybody else keeps writing like that or I'll never have a chance to keep up with the rest of you.

[55:44] Yeah i hope so too because that that's why i'm wondering if we should make some rules like uh i don't want to say follow my lead uh but it would make it easier if we could all program in the same kind of style with with longer words describing the functions what they do etc etc and um that That may kill Bart.
He loves his acronyms for his.

[56:14] Well, I think Bart is a different kind of lazy. Why write 20 letters if you can do it with two?
Right, right. I think that's, yeah.
And, well, for all the little, you know, the examples that are used within programming by stealth, they might be long but I don't know if you looked how many lines of code there currently is in XK it's not very long no it's tight it's really short right yeah, Yeah, I try to stick to the rule that don't make your function longer than what fits in one screen.
Wow. Because otherwise you lose track. I sure do.
Yeah, and try to make a function do one thing.
I probably didn't follow my own rules everywhere, but those are sort of best practices. is.
And if we can stick to that, I think it makes it easy for everybody to contribute and improve and expand the code and the functionality.

[57:28] Yay. Well, this has been really fun. So if people want to chat with you about any of this, would the podfee.com slash slack be the right place to go?
Yeah, yeah. But do ping me because I'm not in there every day of the week.
Yeah, so throw an at Helma on it in the PBS channel and you can catch her attention and tell her how awesome she is or how you want to contribute.
I think this is going to be a lot of fun and I'm excited that we're getting there. We're way past fixing to make a plan to start.
Yes, yeah, yeah, yeah. We just actually started. And right now I would love for Bart to just, you know, participate himself.
Self and well he opened an issue so there you go he got it oh i haven't looked at it yet yeah you got an interesting request from on the uh form on xkpasswd.net is somebody asked whether problematic words for children could be taken out of the password generator that this person works for a k-8 school district in it and it was it's words like pain and hurt and dead and death Death.

[58:37] It also has woman in the list.
I don't know what that one is. Bone, heaven, pole, anger, broken, cried, sick, kiss. I don't know.
But he did open an issue, so he's poked at it, so that's good. Yeah.
And the list of words is there, so they're easily changed and removed or whatever we want to do. Right, right.
Well, this has been a lot of fun. I am excited. I'm pumped.
I've got a couple of, maybe another month or so more of CES content.
So hopefully I'll get more time, have more time right now to dig in and help.
This is great fun. Thank you so much for doing it, Helma. Yeah, and I mean, everybody who doesn't want to program but wants to use the project, they can also make feature requests.
I want it to do this. And whoever wants to contribute with code can look at the issues and try to fix it and bring that feature request into the code.
There you go. And you can help write documentation. There's a lot of things different people can do of different skill levels. You do need a GitHub account, but that's about it.

[59:51] Yeah. Yeah. And that's free. Right. All right. Thank you so much, Helma. This was really a blast.
Thank you. I hope you enjoyed this episode of Chit Chat Across the Pond Light.
Did you notice there weren't any ads in the show?
That's because this show is not ad supported. It's supported by you.
If you learned something, or maybe you were just entertained, consider contributing to the Podfeet podcast.
You can do that by going over to podfeet.com and look for the big red button that that says support the show.
When you click that button, you're going to find different ways to contribute.
If you'd like to do a one-time donation, you can click the PayPal button.
If you want to make a recurring contribution, click the weekly Patreon button.
You're only charged when I publish an episode of the NoCillaCast, which, let's face it, it's every single week, so I don't charge Patreon for chit-chat across the pond light or programming by stealth episodes.
Another way to contribute is to record a listener contribution.
It's a great way to help the nocillicast ways learn from you and takes a little bit of the load off of me doing all the work.
If you want to contact me for any reason, you can email me at alison at podfeed.com and I really encourage you to follow me on Mastodon.

[1:00:58] Music.