Adafruit Playground is a wonderful and safe place for any Adafruit account holder  to share their interests with Adafruit's vibrant community of makers and doers. Have a cool project you are working on? Have a bit of code that you think others will find useful? Want to show off your electronics workbench? You have come to the right place.

The goal of Adafruit Playground is to make it as simple as possible to share your work. On the Adafruit Playground users can create Notes. A note is a single-page space where you can document your topic using Adafruit's easy-to-use editor. Notes are like Guides on the Adafruit Learning System, but guides are high-fidelity content curated and maintained by Adafuit. Notes are whatever you want them to be. Have fun and be kind. 

Accessing Your Notes

Make sure you are logged in and then click on Playground in the black header bar on the learn.adafruit.com screen. The Adafruit Playground option is not available when in the Adafruit Shop: you need to be in Learn for this option to appear.

This will take you to adafruit-playground.com, where Adafruit Playground posts are available.

The default page has Featured Notes, a list of Playground posts which users have chosen to share with the community.

Sharing your notes

To create your own notes, your page URL is adafruit-playground.com/u/[your-username]. You can click the My Playground button or the link u/your [username] in the upper right to get to your own space.

Posting Guidelines

Personal information is not to be put in notes. The content of Adafruit Playground is governed by Adafruit's Terms of Service, which is subject to change.

On the Adafruit.com site, click on the Learn tab to enter the Adafruit Learning System (see above).

Click on Playground in the black header portion.

If you have any existing notes, they will display. If you do not, you may create a new Note here.  Simply enter the title when prompted.

To edit an existing note click the edit button but the title.

Editing a Note

Clicking new or edit will bring you to the editor where you can start building you note element by element!

If you cannot interact with the toolbar and your Editor Status is labeled as connecting please refresh the page after a few seconds.

All content is subject to Adafruit's Terms of Service, which is subject to change.

Once you have your note somewhere where you want to share it, you can request for it to show up on the Adafruit Playground front page.  To do so, navigate to your notes edit page and toggle the show-off toggle.  

Once approved your note will appear on the front page of the Adafruit Playground!

What's Style?

Just like your style with clothes, etc., writing also has style. This page has suggested styles for user pages and user guides on the Adafruit Learning System. Why have style? With over 2,000 guides, the style of Adafruit guides is pretty consistent. It would benefit readers of user guides followed similar conventions.

Pictures / Images / Video

Preferably pictures should be in landscape and be in a 4:3 ratio to best display on a range of devices. This applies to the Media element and the Embed element for video. Other aspect ratios may be ok, but long portrait oriented pictures should be avoided. Use a photo editor to crop images or otherwise get them looking their best. See the picture below as an example:

Short videos without sound might best be done with animated GIF files.

Longer animated content is best put on YouTube and linked in via Embed.

Note embedded video shows as a grey box in edit mode. In preview/viewing it'll look like the image below until the user clicks the SHOW EMBEDDED CONTENT link.

Code

Code in text blocks should be highlighted with the text block code font selected from the toolbar with the {;} symbol.

Several lines of code or blocks can use the Code Element.

Code from GitHub can be pulled in using the Embed Element specifying the file address on GitHub.

Note the SPDX information. It's good to put that in. You can read more in the Guide Here.

Text Formatting

Text should be organized in paragraphs sprinkled with appropriate pictures, diagrams, etc. to help the reader understand the process you went through.

All filenames and directory names should be in bold. Code inline in a paragraph should be in code font (toolbar {;}).

HTML links should be used as appropriate with the link button in a text element (∞). This is a link.

Other Style Considerations

Be sure to convey the information that someone might need to understand your project.

Spell out acronyms on first use.

If a page gets too long, consider splitting it into two pages.

You can also pin one Note on your playground.  A pinned note is the note you want everyone to see first when they visit your Playground. This is often used to pin your personal information or best tutorial to the top of your list of notes found at "u/[username]" and "u/[username]/pages".

Below is how a pinned note appears to everyone who views your page.

To pin a note, navigate to the note edit page and click the 'Pin Note' button on the right-hand side of the page.

Elements are what makes the Adafruit Learning System editor so unique and easy to use. You can rapidly build pages by adding one element after another until each page is completed. 

This is what the elements bar looks like. You can add any of the above elements to your guide. We will go over each element and explain how and when to use each. 

After you add an element a button bar like this will appear above and below the element so that you can insert new elements anywhere. Click on the arrows for the button bar to appear.

You can also reorganize element simply by dragging them around.

All content is subject to Adafruit's Terms of Service, which is subject to change.

The text element is pretty straight forward. You can undo and redo edits with the arrows. You can change the size of the text by selecting H1, H2, or Normal text from the paragraph dropdown on the left. Normal text is set by default. The rest of the buttons are, from left to right:

• Bold
• Italics
• Underline
• Bulleted list
• Numbered list
• Outdent - if you have an indented paragraph, you can remove the indent with this button
• Indent - you can indent a paragraph by highlighting a paragraph and pressing this button.
• Hyperlink - make text clickable. Highlight a section of text, click the button, then enter in a web address.
• The HTML button. Click this to make it so you can directly edit the HTML.

Make sure to click the SAVE button below the text box to continue.

Cancel out of the text box, or open and delete an entire text box with the CANCEL and DELETE buttons.

You can add images with the Media element. There are two ways to add an image to your page. You can upload a gif, png, or jpg. Or you can add the image location via a a URL.

Guidelines

Images may be used in user pages. Want to show your project, or provide a picture of yourself (or even your pet)? All good. Images should be < 3MB in size each.

Please be judicious in posting images. No personal information, images of others without their permission, lewd content, etc. All images are subject to Adafruit's Terms of Service.

Again, if a picture belongs to someone, is copyrighted, or the licensing belongs to someone else, please do not post it in User Pages.

The code element is used when you want to paste in bits of code, like so: 

The most important thing here is to make sure to select the right type of code you are pasting. In this case, I pasted Arduino code:

By selecting what type of code you are pasting, it changes how the code is displayed to your readers to make it easier to read. Learn will attempt to detect the language if auto detect is selected.

The Embed Element is how you add YouTube and Vimeo videos, and Github Gists to your guide.

Embedding videos or Gists couldn't be easier. All you need to do is get the URL of the page that the video is on and paste it into the Embed Element text box.

Dump the entire URL into the text box like shown and click SAVE.

While you are in the editor, you will see the embed URL, but your readers will see the full video. This is what you will see in the editor:

This is what your readers will see in the front end: 

You can always click the preview link in the right sidebar to view what your readers will see, even if you haven't published your guide.

Embedding MakeCode Blocks

Just like in the last step, embedding MakeCode blocks into your guide is just as easy. In MakeCode, click on the share project button and you will see a popup like this:

Just like as before, copy that link and then in your guide choose the EMBED element. Just paste in the URL from MakeCode above, and click save. Your MakeCode block should now be in your guide.

The Alert Element is an easy to use element that is designed to grab your reader's attention. Enter in a short sentence and click SAVE.

Just remember to use them sparingly, and only for the most important reminders that you need to burn into your reader's brains. The more of these you use, the less impact they will have. 

Below are the steps to create a typical Note. Feel free to make your own designs of course, but if you want to get started, here is a step-by-step.

You can see the finished note here.

Page Name

Whenever a new page is made, you will be prompted for a name. If you want, type your first and last name. Or if you prefer to remain a bit anonymous, type just your first name.

In the example below, I typed the 'About'.

After typing in the name, click Create and you will get a "blank" page similar to below:

First I'll insert a picture myself. I select a Media Element. If you don't want a picture, skip to adding a text box below.

You can select a picture from a file on your computer or a web address/URL to a picture on the internet. I select a file. NOTE: the filesize of either must be < 3MB. If you want a smaller picture, edit it prior to uploading.

The editor will insert the image centered on the screen.

Next is some text about the user. I'll type some information about me as an example. Select the Text element and type the text you want.

You can use different font attributes by selecting them at the top of the text box. Click "..." to see more than can be displayed.

That's a good start. It can always be edited or augmented later. No more Elements are desired. 

You can then preview the page by selecting View Note on the right.

Also make sure to check out the preview on "u/[:username]/pages"

Edit the page if the preview doesn't suit you. Click on any element to make changes. You can click on the picture to change it. You can click on the text box to modify the text. Preview after your changes if you wish. Elements can be deleted by selecting the element and clicking Delete.

There is no save - once an element is completed, it's on the page.

Did an user put something that you wish to report to Adafruit management? There is a link for that. Click the "Report Note" link. And fill out the pop-up box and be specific as to why the user is being reported.

Please do not use the report feature for trying to communicate with a specific person (they are not forwarded to the user).

Your report will be reviewed. You will not be notified as to the outcome.

If you are using the editor and encounter an issue, you can report it in our forums. 

When reporting an issue please leave as much detail as possible.  Please leave a link the the page with the issue and a description of the steps you took to produce the issue.