mdn / mdn/css-examples

Updates to border image generator tool

Open
#180 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

idle p3
Dominant language
HTML
Stars
647
Forks
830
PR merge metrics
No merged PRs in 30d

Description

### What was incorrect, unhelpful, or incomplete?

This stems from the [discussion I started concerning the tools on MDN Web Docs](https://github.com/orgs/mdn/discussions/674). Please read the discussion for more details and context.

There are a couple of common problems between these tools and issues filed here. This issue will track the work on addressing the relevant issues and do a bit of a rewrite of the [border image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator).

## Known issues

- [ ] https://github.com/mdn/css-examples/issues/96
- [ ] https://github.com/mdn/css-examples/issues/93
- [x] https://github.com/mdn/css-examples/issues/63
- [ ] https://github.com/mdn/css-examples/issues/60

## Common issues

- [ ] Ensure that the tool is responsive and usable on as many platforms and devices as possible.
- [ ] Rewrite the JS to use modern syntax without introducing the need for polyfills

The work will be split up into two to three separate pull requests. The first will address the responsiveness, the second the JS, and the last any existing issues that were not already fixed by the JS updates.

Reviewers for the work will be between @caugner and @LeoMcA

### What did you expect to see?

The tool is responsive and usable across viewports and devices. The code has been updated and is in a better state to ensure they can be more easily maintained going forward.

### Do you have any supporting links, references, or citations?

https://github.com/orgs/mdn/discussions/674

### Do you have anything more you want to share?

_No response_

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the border image generator linked in the issue and read discussion 674 for the scope and context. Review linked issues 96, 93, 63, and 60 before separating the work into responsiveness, JavaScript modernization, and remaining fixes. Done means the tool works across viewports and devices and its code is easier to maintain.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
frontend, web-dev
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.