(super slick now) Show users where to edit a various parts of your template

[wh0]

Project URL: Glitch :･ﾟ✧

Alright so imagine you’ve made a neat webpage template with a bunch of different places people can edit the HTML to put their own information.

The first step for the person remixing it is to cross reference where in the code is the markup that goes with which parts of the page. And that can be pretty tricky with the wild layouts that you can make in CSS these days.

Here’s an idea for how to speed that up (doesn’t work though). Take a look at this sample code:

<h2>
  Using this project
  <script>editLink();</script>
</h2>

The editLink function here does the following:

1. If our page isn’t embedded in the Glitch editor, exit right away.
2. Pretend there was a JS error.
3. Look at the error’s stack to see where editLink() was called. That’ll be something like this:

   Error
       at editLink (https://lavish-lace-axolotl.glitch.me/edit.js:52:13)
       at https://lavish-lace-axolotl.glitch.me/:71:21
   

4. Extract the Glitch project name, path, and line+column location. For example: lavish-lace-axolotl, index.html, line 71, column 21.
5. Come up with a Glitch editor URL that goes there: https://glitch.com/edit/#!/lavish-lace-axolotl?path=index.html%3A71%3A13 (actually a few characters before it so that we’re actually in the part to edit and not the script tag).
6. Put a link to that URL right there where the script is. The link has target="_parent" so that it navigates the editor instead of opening another copy of the editor inside the preview panel.

You can put these <script>editLink();</script> all over your template. When people view the webpage by itself, it’ll look normal, as if nothing were there. When you open it in the editor preview, you get a bunch of links, and clicking on one will move your editor cursor right to where you can edit that part of the page:

Except no, it doesn’t. The Glitch editor doesn’t actually respond to hash changes. This was all pointless.

[_tr]

Hum, you would need to have an extension, or perhaps even a bookmarklet?

[wh0]

ok I’ve changed it to do a full page reload so now it at least goes there. very disruptive though.

[wh0]

There’s a new piece of functionality in the Glitch editor!

Hello Website starter project updates!

We’ve made a few changes to the Glitch Hello Website starter project we wanted to share. We’re aiming to make lots of enhancements to our starter projects this year to make them even more easy and fun for learning. As always, if you have any suggestions for starters please share them! When you have the project open in the editor, clicking the link to the TODO in the preview will open the file. You’ll see the code for this in the script.js file – we’re planning on making more guided…

You can now use a postMessage to the editor to move the cursor around. I’ve updated this to use that . Goodbye, full page reloads!