Code with Brylie - e32

gistfile1.txt

(...) Hello and welcome to another live code hangout.

(...)

Today we are working on the Western Friend website.

(...)

We're going to start a new pull request,(...) working on the issue to use PayPal as our payment processor.

(...)

We've made significant progress so far.

(...)

The code has been merged. There was a large pull request to basically port our bookstore e-commerce payments and subscriptions over to PayPal.

(...)

As a follow up I want to create a small PayPal donate button that can be placed on pages, arbitrary pages. So let's go ahead and create a new branch. Make sure we've got everything from the main.

(...)

I believe this is going to be time to decide how best to approach this.

(...)

Essentially, on my other screen here I've got a PayPal donation widget.

(...)

The way PayPal wants you to do it is copy and paste some code.

(...)

It's not secret so we can take a look at the code over here real quick.

(...)

I will create a template.

(...)

Now I did that.

(...)

Let's see.

(...)

Oh no that's correct. It's just using comments.

(...)

PayPal blocks. This could be donation blocks.

(...)

It seems like this gets published in the client code.

(...)

It includes a small script, inline script as well as the PayPal donate SDK.

(...)

The code could be parameterized. Essentially you just need this button ID and an image.

(...)

This is interesting.

(...)

The image could be customized.

(...)

I could use this just as a block.

(...)

It will trigger a modal.

(...)

This amount of HTML could go just in our site header. Let me first try that. See how it looks.

(...)

There's a first pass. It might be the simplest.

(...)

Oops I just realized one thing.

(...)

I need to update the stream details.

(...)

There we go. Take a look here.

(...)

Wagtail social network.(...) We'll come back to that. Need some installation instructions. It's another open source project.

(...)

This code for example running here on localhost.

(...)

Finally don't have anything in the collapsible section of the site.

(...)

We could include a PayPal button somewhere there.

(...)

It would be kind of cool if it was persistent.(...) If I put it over here and even the website in full it would still be there. Let's give it a try. See if that will work.

(...)

So for that we can just go to our core navbar templates.

(...)

After the navbar collapse section.

(...)

If I just refresh we get a donate button right there where it's kind of hoping it will go.

(...)

Yeah and with just a little bit of padding there.

(...)

And then it opens a pop over.

(...)

I think it's a good start.

(...)

So basically this would pop back over here.

(...)

And let's just see if this works. Margin left utility.

(...)

Three.

(...)

No that's cool.

(...)

We can do margin right.

(...)

That looks okay.

(...)

Yeah I would like it to sort of go back on the right hand side of the search button.

(...)

Here's the search button. I'm just seeing.

(...)

Okay we're just using flex nav item.

(...)

And it's inside of the navbar collapse.

(...)

Deflex.

(...)

Let's grab an open API chat here.

(...)

(clicking)

(...)

So, got the following bootstrap five nav bar definition in the Django project, and just paste it all in,

(...)

including the donate button. I would like for the donate button to always be visible, so I've left it outside of the nav bar collapse section, which worked out as expected.(...) However, now I'd like to add a small amount of margin between the donate button and the nav bar collapse section, since they seem to be positioned too closely.

(...)

All right, now, chadgbt is in super slow-mo here. To add a small amount of margin between the donate button and the nav bar collapse section.

(...)

Interesting.

(...)

Ah, I see, I don't know where I got that from.

(...)

Can use an inline style.(...) Yeah, I would like to use a bootstrap class, because I'm all in on bootstrap on this here.

(...)

Well, we could try that, just to see if it works. Donate button container.

(...)

Ah,(...) not recommended for quick testing in our CSS. That's a good way of doing it. Just for quick testing.

(...)

Ooh, got too much.

(...)

20 pixels, so we would use an M value, of course, as well.(...) This is just to see if it will work.

(...)

Take this margin off, that didn't seem to work.

(...)

All right, now we will go to full screen. That works, I wonder why that...

(...)

Oh, I know why. I'm using left and right, and bootstrap five uses start and end.

(...)

So, MS margin start, two M values. Let's see if this works.

(...)

Of course, it's more internationalized that way.

(...)

Ah.

(...)

All right, let's put it in our CSS.

(...)

Now, for that, we have CSS. And our static CSS, WF website.

(...)

Donate button container, margin left.

(...)

Let's say three M's values.

(...)

Oof.

(...)

That's a lot.

(...)

One M.

(...)

Not too bad, and...

(...)

You know, it does its thing.

(...)

(laughs) Very cool.

(...)

There, I'll be right back. Quickly refresh my beverage.

(...)

It's just tonic water in line.

(...)

Now let's try something. I'm going to try this picture. So if I send a picture,(...) I'll get a print screen here, a new screenshot, and we will just get the navigation menu here.

(...)

It's hard to tell.

(...)

There we go.

(...)

And I'll just save it to my desktop.

(...)

I don't normally do that. Now with GPT, we can include images and such.

(...)

So it worked great. Now I'd like for the button to be vertically centered in the navbar as can be seen in the neighboring elements pictured.

(...)

So let's see how well I can interpret this picture of our network. To vertically center the donate button, within the navbar you can use various CSS techniques.

(...)

Like Flexbox or CSS Grid. Since Bootstrap 5 already utilizes Flexbox, it would be easier to go with that.

(...)

Here's how you can vertically center the donate button container. Inline style approach.

(...)

Add the style attribute directly to the donate button. Display flex, align items,(...) center margin left. So we're just combining these or in our external CSS file.(...) Display flex, align items, center.(...) This should vertically center your donate button with respect to the neighboring elements in the navbar. Make sure to link the CSS file in your HTML if you haven't already.

(...)

I have already, so that's good to go.

(...)

Cool, let's hop back over and see what happens.

(...)

Didn't seem to work.

(...)

Inspectoroo

(...)

The donate button...(...) The donate button do is...

(...)

Seemingly, it's a little bit hard to tell.

(...)

But it has something going on there.

(...)

Well, I can try just nudging it.

(...)

The Flexbox approach didn't work.

(...)

Why? Are we not in a Flex container?

(...)

It might not be in a Flex context, it should be implicitly.(...) Using Flexbox.

(...)

But there's always just a little, you know, adding...

(...)

A little bit of bottom margin, you know, just tweaking it manually.

(...)

Looks good to me.

(...)

[typing](...) Okay, let's go with that. So essentially...

(...)

[typing]

(...)

For the first pass, I can hard code it.

(...)

More complicated solution would be a couple options. One, make this a Wagtail block that can just be popped into any page or content section.

(...)

Used throughout the site.

(...)

Two, I could create a new setting that you could kind of copy and paste the custom generated PayPal code into. And it would display it here. It's a bit of a foot gun.

(...)

You could paste arbitrary stuff and then the navbar would kind of break. The Wagtail block, it would at least be possible to control that. For example, I don't have to let the editor modify the code, even the campaign link. But here, I'm just going to go with the very minimal thing and just put it here. I'm leaving it out of the navbar collapse so that it's always visible. Even if you open the navbar, you still will see the donate button.

(...)

In order to do that, it would have to be before everything or after everything.

(...)

I don't think we necessarily want it before everything.

(...)

If we want it on the navbar, we could also potentially put it here in the sky.

(...)

It's just kind of weird.

(...)

Probably more tricky placement. I would prefer to keep things simple.

(...)

Since this isn't really going to be changing, I'm just going to hard code it in there.

(...)

I didn't see an easy way to get the hosted button ID from the website that a non-technical person would be using.

(...)

Already logged out. So yes, we're going to go with it.

(...)

Persistent,(...) PayPal,(...) and of course, name this block, but it's not really what we're doing here.

(...)

Add PayPal, donate button, dang it.

(...)

Clean.(...) It looks like my HTML was formatted.

(...)

So 9.12.

(...)

It's a bit annoying that the padding has to be added there. It staggers it from the other elements.

(...)

The other way would be to add the padding there.

(...)

Okay, let's take a look at that approach.

(...)

That is the navbar expanded container navbar collapse.

(...)

That's right. So if I do instead, I do hash navbar collapse.

(...)

I'll just come up, can I just have a little note here?

(...)

(typing)

(...)

Separate the navbar collapse and donate button.

(...)

That's strange.

(...)

Why didn't I change anything there?

(...)

Oh man,(...) I just broke.

(...)

Just something else, but that's weird.

(...)

Let's rerun that.

(...)

Looks good.

(...)

Looks good.

(...)

All right, better cut that detail.

(...)

I'm not sure how, I just wasn't paying attention.

(...)

It's a gold button, always present.

(...)

Even if you're going to mobile,(...) mobile device mode.

(...)

It's a nice donate button there.

(...)

That's interesting, popped it out the side of the window.

(...)

So we'll hop back over to the pull request.

(...)

We'll run all the tests and keep the database.

(...)

Or grab a little bit more tonic and lime.

(...)

(typing)

(...)

Seems I want to toggle the visibility of the camera. I'll fix that by having an AFK scene.

(...)

But doing a little bit tonic and lime.

(...)

So all the tests run successfully here. There's just some brittleness in how our factories are constructing users in some of the setups.

(...)

Leading to non or constraint, unique constraint violation.

(...)

What it looks like.

(...)

They ran successfully this time.

(...)

CodeQL is a bit slow.

(...)

(typing)

(...)

In any case, I like this solution because it didn't require a lot of thinking and coding and unit tests.

(...)

Curiosity, it would be nice to change the button.

(...)

Let's see what this looks like.(...) (typing)

(...)

Look at the alternative buttons.

(...)

I can use PayPal.

(...)

E-G.

(...)

PayPal offers several types of buttons for donations that you can use ranging from small to large and sometimes with different wordings. The URL structure for these buttons usually remains consistent allowing for some level of customization.

(...)

Here are some alternative URLs for the PayPal donate buttons. A large button,(...) credit card small, credit card large with text,(...) with PayPal logo small.

(...)

Interesting.

(...)

Let's see what the large button does. We want people to donate and recurring if possible.

(...)

This should be eye catching.

(...)

This could be a configuration option as well.

(...)

Donate.

(...)

That's a bit much.

(...)

Maybe. Maybe not.

(...)

Maybe.

(...)

Well, the thing is the other like the logout buttons, these aren't really buttons, but I mean,(...) the text is proportional. It's just strong.

(...)

So bad. I don't see how they can have such bad style.

(...)

Yeah, and I wish we just show me the buttons.

(...)

Show me the buttons.

(...)

See, that doesn't look so bad. The pill.

(...)

This is more proportional.

(...)

I like that.

(...)

Call to action.

(...)

And perhaps in the footer.

(...)

Let's go with it.

(...)

We'll just say closes 906.

(...)

So, yeah, I don't have two significant issues.

(...)

Currently active, at least during the staging.

(...)

And there's only five issues in staging.

(...)

We can do this pull request during this session. This is actually for me.

(...)

I'll do that real quick after we merge this.

(...)

I'll go ahead and merge it now. It did run the tests, succeeded, and I just changed the GIF. I'm merging.(...) Confirming the merge.

(...)

Good.(...) Closed that.(...) And essentially our shipping and handling costs.

(...)

Not super elegant, but it's very simple.

(...)

I've got a hard coded because these need to be mutually exclusive,(...) non overlapping ranges.

(...)

The prices need to be defined somewhere. And I couldn't think of a way of doing that in user interface that allows us to configure them.

(...)

Three.

(...)

Great pull request closes nine 10.

(...)

Hop over here.

(...)

Tests. Yeah.

(...)

Here we go.

(...)

And this is the test suite for the book.

(...)

Yeah. Yeah.

(...)

Seems expensive.

(...)

Okay.

(...)

I don't know.

(...)

It's a bug.

(...)

Yeah.

(...)

Okay.

(...)

Okay.

(...)

Still being in process.

(...)

So back to the issues. I think we're kind of done for today.

(...)

We're going to milestone staging milestone, which is where we are.

(...)

I'll just post an update here to the staging.

(...)

Please donate where we should now be displaying our new.

(...)

Sorry. Subscribe.

(...)

Amazing.

(...)

Where we should share new subscribe buttons.

(...)

Okay.

(...)

Good.

(...)

And as we'll have to discuss how to bring over the magazine subscribers from the Drupal site.

(...)

So we'll take that up during our weekly call, but probably have to do a data export and then just some, you know, use our tools.

(...)

We've got like mail chimp or, you know, bulk communication.

(...)

I can bulk import email addresses and set randomized passwords for people to reset their password will need a mail service.

(...)

Okay.

(...)

So we need to do this during staging. It's already set. I need to set it up.

(...)

We just needed either an IMAP account or a transactional email service something.

(...)

Yeah, but I think we're pretty good for today. Just on the hour.

(...)

This has been another live code hangout.

(...)

We're getting the Western friend project. Pretty close to launch. It feels like, you know,(...) it was a bit surprising to do the to reef work the payment provider during staging phase of the project. So I'm not 100% confident that we're going to confident that we're going to launch to this at this point, even.

(...)

We're going to do some other really big gotcha that comes up.

(...)

But so it goes.

(...)

She'd like to get involved with this or similar projects. You can swing by GitHub. We're at github.com slash Western friend WF website.

(...)

We have several non urgent tasks that are marked as help wanted. A lot of these are even good first issues that would be kind of small in scope.

(...)

And maybe could just be closed with a comment like, no longer valid.

(...)

Some of these are lint level things that could have already been fixed or could be very easy to fix.

(...)

So do check those out. We have several contributors active right now.

(...)

And we are grateful to all the contributors who have helped us out along the way.

(...)

All right. Well, I hope you're doing well and have a great day.