Question concerning box shadow generator and related tools

[schalkneethling]

👋 I remember when I was still at Mozilla, we had a conversation about these tools and we were not 100% on what to do going forward. I notice that they are still around, but could do with some work.

Some existing issues:

• possible Border-image generator UI updates css-examples#96
• MDN Border-image generator: Move border-image-source to the end in CSS Code output css-examples#93
• “Box-shadow generator” tool not loading properly, making the tools unusable css-examples#157
• [Border-image generator] border-image-slice fill keyword not toggled in CSS output css-examples#63
• [Border-image generator] include gradient as border-image-source example css-examples#60

I guess we have three options:

1. Remove from MDN Web Docs, add the code to one or more repos, and archive said repos.
2. Take some time to rewrite the tools using modern JS, CSS, HTML.
3. Rewrite the tools and create some microsites (could just use GitHub pages without a fancy URL).

The second option is probably, interestingly enough, the one with the least amount of work and the most benefit. If someone, for example, me 😃, would volunteer to do the work, would you all be open to that, or has another decision already been made around these tools?

Let me know, happy to discuss further.

[caugner]

I guess we have three options:

1. Remove from MDN Web Docs, add the code to one or more repos, and archive said repos.

2. Take some time to rewrite the tools using modern JS, CSS, HTML.

3. Rewrite the tools _and_ create some microsites (could just use GitHub pages without a fancy URL).

The second option is probably, interestingly enough, the one with the least amount of work and the most benefit. If someone, for example, me 😃, would volunteer to do the work, would you all be open to that, or has another decision already been made around these tools?

Hi Schalk, 👋

Great to see you around, I just checked with the content team. We definitely want to keep these tools around and it would be great to update them, but it's not a priority for us at the moment to do it ourselves. So if you're interested in volunteering to do the work, that would be awesome and much appreciated! 🙌

How would you go about rewriting them?

Apart from functional bugs, I believe the main issues are their design (not responsive), and the lack of support for newer syntax maybe?

[schalkneethling]

@caugner Does the above sound like a plan?

[caugner]

@schalkneethling Thank you, that sounds like a good plan.

To make reviewing easier, I would suggest upgrading one tool at a time, and opening separate PRs for the responsive layout and the modern JS, unless these depend on each other? You can ping me this and next week, and @LeoMcA while I'm off the week after.

Here are the tools in order of popularity:

1. Color picker
2. Box-shadow generator
3. Border-image generator
4. Border-radius generator

[schalkneethling]

Great stuff!

opening separate PRs for the responsive layout and the modern JS, unless these depend on each other?

Makes sense to me.

[schalkneethling]

I will create the relevant issues. 👍

[schalkneethling]

The relevant issues have been created:

• Updates to colour picker tool css-examples#178
• Updates to box-shadow generator tool css-examples#179
• Updates to border image generator tool css-examples#180
• Updates to border radius generator tool css-examples#181