CSS interactive examples - help wanted

[wbamberg]

Over the last while, we’ve been working on a project to bring interactive examples to MDN pages. Our current status with this is:

• we’ve designed and implemented editors for interactive JavaScript and CSS reference pages
• we’ve written examples for just about all the JavaScript pages
• we’ve written examples for some of the CSS pages

One of the next steps is to write examples for the rest of the CSS pages. These things are fairly quick and quite fun to write, so if anyone wants to help out, we’d really appreciate it. You can see what a few of them look like on the pages that have been updated:

https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
https://developer.mozilla.org/en-US/docs/Web/CSS/position

If you’re interested in helping out, please:

• read https://github.com/mdn/interactive-examples/blob/master/CONTRIBUTING.md to understand what’s involved
• pick an issue from the list of “help wanted” and “example needed” issues on GitHub
• write an example and send a pull request to the https://github.com/mdn/interactive-examples repo

Finally: there’s a spreadsheet listing all the properties and CSS functions that have pages on MDN. This is what I’m using to track the work. So if you’re not inspired by any of the items that already have GitHub issues, then you’re welcome to work on any of the items in this spreadsheet that are up for grabs (meaning, that the “status” column is either blank or says “Not started”).

If you do decide to work on one of the spreadsheet items, please file an issue for it, and in the issue, comment that you are intending to work on it. This will help us to avoid collisions.

[wbamberg]

In the MDN team we schedule work in 3-week sprints: 12 days work plus 3 days of planning. I wrote the post above at the start of a sprint, and we’re just about to start the next one, so this seemed like a good time to look back at it.

In the sprint I estimated that we’d complete 50 CSS interactive examples, which at the time I thought might be a stretch.

How did we do?

In fact, we now have a total of 179 examples. I’m not sure exactly how many we started with, but I’m pretty sure we have added at least 140 in this sprint.

How did this happen?

Most of the examples were contributed by volunteers. Here’s a list of everyone who landed at least one CSS example in the last sprint:

• benji1304
• bromy
• d7ark
• danielhickman
• dominicduffin1
• helmutgranda
• mfluehr
• rachelandrew
• veekas
• wbamberg

I’m hesitant to single anyone out, but must mention mfluehr who contributed a mind-boggling number of examples. I’m afraid I lost count of exactly how many, but I think around 100.

Here are a few of the examples that people have made:

• resize
• border-radius
• rotate3d
• font-size
• list-style-position
• line-height
• width
• grid-auto-columns
• z-index
• transition

Apart from writing examples people have got involved in suggesting, implementing and landing some quite intricate improvements to the editor and the contribution workflow, especially danielhickman and kenrick95.

So: thanks to all these people! It’s been amazing to see such engagement in GitHub-hosted MDN projects.

What’s next?

One thread is to finish off the CSS examples. We have about 150 pages left. Some of the remaining properties are experimental, and have limited browser support. We need to improve the way the editor handles experimental properties.

The other thread is to implement an editor for interactive HTML examples. @schalkneethling has written a prototype HTML editor, which we’ll user test in the next sprint.

[schalkneethling]

I second everything @wbamberg said. You all are amazing! o/\o

[atopal (Kadir Topal)]

Genuinely awesome. Thank you all!

[chrisdavidmills]

Yup, thanks folks — this is a wonderful set of work.