ChatGPT paired with Environmentally Resistant Software!

Premise

How I fixed styles for an ordered list with the help of #ChatGPT and pushed to prod in an hour

and?

What it means to be environmentally resistant software

Where?

Accommodate a change even when the parent environment is frozen for all changes, for any number of reasons.

Background

There was once a blogging system where an ordered list on a web page is badly formatted. It has been years I touched CSS. Java is no longer backward compatible. My copy of Tomcat will not run anymore in a build environment. I have changed my laptop 5 times since the last time the blogging system was built.

I said, ok, let me take the plunge and fix it.

A conversation with ChatGPT first!

Asked ChatGPT:

Can you provide an embedded CSS with classes for <ol> and <li> where the list has a left margin of zero pixels, and the font size is 10, and the lines double spaced.

It produced an inline style.?

ol {
???margin-left: 0px;
???font-size: 10pt;
???line-height: 2;
}

li {
???margin-left: 0px;
???font-size: 10pt;
???line-height: 2;
}        

So I said

Can you provide style class for ol and li and use those class names in the html body

ChatGPT said:

<style
??.list {
???margin-left: 0px;
???font-size: 10pt;
???line-height: 2;
??}
??.list-item {
???margin-left: 0px;
???font-size: 10pt;
???line-height: 2;
??}
?</style>

<ol class="list">
??<li class="list-item">....
</ol>>        

I said

Can you remove the explicit class name for the list item but specify the style if the list item is a child of of defined parent class ".list"

ChatGPT said:

Certainly, here's the HTML with the styles for the li elements specified based on their parent ol class:

?<style>
??.list {
???margin-left: 0px;
???font-size: 10pt;
???line-height: 2;
??}

??.list li {
???margin-left: 0px;
???font-size: 10pt;
???line-height: 2;
??}
?</style>        

The benefit now is I don't need to change the "li" elements with their class names. Redundant.

Why is this radical?

I "knew" how to change the CSS long time ago.?The nuances are tricky and nebulous as you can see above, if you are familiar with CSS. Having a few hints I could arrive at the solution fairly from a cold start with ChatGPT, a bit more, or even far more authoritatively compared to a "look up system" like Google, SOF, or my own previous blog-notes.

Now to the Environmentally resistant software

The blogging software I am talking about treats a high percentage of "code" as data.

Good for me.

So I upload the new CSS as if it is another blog.

Now I go to the blog page to see if my ordered lists are clearer, spaced out, and prettier!

They weren't for the left margins are way far to the right even though I said 0

Chrome CSS debugger to the rescue

I go to the source view of Chrome.?

Again from a cold start. I haven't debugged .js or css in a long time.

Go to the list on the webpage, locate its corresponding CSS element, understand the hierarchy of margins be it for the a) div b) or to the ol or c) to the div.ol d) or to the div.ol.li, and so and so forth, play around with the "numbers" and "text" of the list margins and arrive at the right element to arrive at a CSS that worked

div.olist {
??margin-left: 0px;
}
div.olist ol {
??margin-left: 0px;
??padding-inline-start: 25px;
}

div.olist li {
??margin-left: 0px;
??font-size: 10pt;
??line-height: 2;
}        

Uploaded the new CSS code as data again, and it worked, and it fixed all the 1000 ordered lists I had during the last decade on the site!