Update installation.md

[Utopiah]

removed Glitch

Description:
sadly closed for a while now

Changes proposed:

• just left codepen

[vincentfretin]

I wanted to replace it with another solution to quickly create the examples from github repo, see my comment #5737 (comment)
stackblitz is not working, but codesandbox is working, you need to log in with an account to edit though. If we update the urls used in the examples in the gh-pages branch, that should be seamless.
If https://krabbel.dev could support that feature, that would be even better!

[vincentfretin]

first step:

• Point gh-pages examples at the released A-Frame CDN build #5838

[vincentfretin]

@Utopiah if you're willing to, could you rewrite the section to use codesandbox urls, like this:
https://codesandbox.io/p/sandbox/github/aframevr/aframe/tree/gh-pages/examples/docs/community-components
It auto opens the index.html file.

[Utopiah]

@mrxz is it something that'd be good for krabbel and thus you or might it bring too much early attention and thus no be good for resources?

[Utopiah]

FWIW I do think replacing with an alternative is better... but until it's done I also think removing broken links for newcomers is more important. Expert will know that they didn't do anything wrong, beginners will assume they somehow messed up and won't have a first good contact with AFrame.

[Utopiah]

@vincentfretin unlucky but I just try the CSB preview URL in the HMD and the "open code sandbox" is just above the VR button, so I didn't manage to test it in VR.

[mrxz]

@mrxz is it something that'd be good for krabbel and thus you or might it bring too much early attention and thus no be good for resources?

Went into some detail in a comment on the issue @vincentfretin linked to, see #5737 (comment)

In any case, I'm totally fine with linking to Krabbel as a ways to get started and experiment with A-Frame. Though, unlike Glitch, the intention isn't for hosting projects (no custom domain, no backend, no CDN, etc...). For this section in particular that would mean rewording it quite a bit. Though to a large extend the same would apply for codesandbox.io. Probably best to list them both along side Codepen, as functionality wise they are closer together than Codepen and Glitch were.

[vincentfretin]

@vincentfretin unlucky but I just try the CSB preview URL in the HMD and the "open code sandbox" is just above the VR button, so I didn't manage to test it in VR.

Ah I didn't see that! They injects the button with a random id. I managed to put the button at the top with:

    <style>
      iframe[id^="sb__open-sandbox"] {
        top: 16px !important;
        bottom: auto !important;
      }
    </style>

maybe we could add the rule in aframe style.css? Although I don't quite like to put css to fix external services css in core, that would be the easiest solution to fix any aframe project on codesandbox. We could also inject that style tag in all examples when we publish on the gh-pages branch, but that will apply only for projects created from the gh-pages branch.

[vincentfretin]

• Reposition CodeSandbox button in gh-pages examples #5839

[dmarcos]

@vincentfretin unlucky but I just try the CSB preview URL in the HMD and the "open code sandbox" is just above the VR button, so I didn't manage to test it in VR.

Ah I didn't see that! They injects the button with a random id. I managed to put the button at the top with:

    <style>
      iframe[id^="sb__open-sandbox"] {
        top: 16px !important;
        bottom: auto !important;
      }
    </style>

maybe we could add the rule in aframe style.css? Although I don't quite like to put css to fix external services css in core, that would be the easiest solution to fix any aframe project on codesandbox. We could also inject that style tag in all examples when we publish on the gh-pages branch, but that will apply only for projects created from the gh-pages branch.

we can add it to a-frame styles I guess. just add a good comment