ampbin / ampbin Goto Github PK

Slide login/registration in from the side

Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry

Adjustable viewport size of the preview

/cc @lannka

Create a Cloud Function to remove unused database entries

Use CSS Grid Layout

There is a slight delay between the time the page loads and when the bin loads.

1. The site loads
2. It loads the starter bin
3. It waits until the user authenticates
4. It grabs the bin ID from the URL
5. It grabs that bin from the database
6. It replaces the starter bin with the bin from the database

There might be another way to make this happen. Might need to change the order.

Currently users authenticate anonymously

A user may think it automatically saves after they make edits since a lot of editors do these days. So we should add a message somewhere after they make changes, it should come up and tell them they need to save.

• Show validation error messages
• Highlight line numbers with errors

• When registering, if user already exists, let user know
• When logging in, if wrong password, let user know

Make it prettier

Build out notifications to notify users when actions successfully executed.

Implement a simple toaster popup

Creating another share button for sharing the static link.

Save includes line numbers.

Is your feature request related to a problem? Please describe.
This tool is so helpful to quickly demonstrate an idea or reproduce a bug etc. It will be great if it also support AMPHTML ads? This can be a cool place to craft and share AMPHTML ad creatives.

Describe the solution you'd like
AMPHTML ads is AMP with a different validator setup.
Other good to have feature: adjustable viewport size of the preview.

/cc @jasti

Add a hidden sidebar for a place to put more stuff

Figure out how to protect bins from others writing over them.

Updated database rules broke cloud functions on staging site.

Will continue to use the ID generated by Firebase. Bin name will be saved in the /bins/ location in the database.

• Add place to input bin name
• Show bin name in nav

Add darkmode

Update user_bins to reflect:

    "user_bins": {
        "user_one": {
            "bins": {
              "one": true,
              "two": true
        },
        "user_two": {
            "bins": {
              "two": true
            }
        }
    }

Use Cloudflare for assets after they're deployed to production.

If you click two buttons, the second message gets appended to the first message.

Hi there,

First off, thanks so much for the project. I'd love to play with the code and I'm trying to run the app at my end, but some key things are missing.

I see that you're using firebase. Can you put some details on how to integrate my firebase instance to this? (I'd assume changing .firebaserc, but not sure if there are more places that need changing)

Thanks!
Jeff

Use Cloud Function via Hosting

https://firebase.google.com/docs/hosting/functions

Get a URL for the file you save

Add alerts to let user know something has happened. Show 'saved' somewhere when bin is saved.

Add AMP HTML validation check

Would like to show how many times a bin has been viewed.

Need a mock-up of where this could go. I'm thinking about using the info icon (shown below). Click it and then more information about the bin would be displayed in a modal.

Should users be able to save over an existing bin?

Write documentation for everything.

When a new bin is created, have the cloud function write the AMP HTML to cloud storage. It'll also need to write metadata for the content type text/html.

Then people can share their rendered AMP HTML without having the editor load the code.

Ideally, we can use a CNAME record to shorten the storage URLs. If not, then perhaps we can use Fastly.