Hot Bookmarklet
Open any web page built with Hot Page in the editor to see how it was constructed.
First, let’s cover some background. A bookmarklet is a special kind of bookmark. Instead of opening a new page, it executes a bit of JavaScript code on the page you’re currently viewing. They were actually invented at the same time as JavaScript in 1995, but these things have gone out of fashion a bit and many people may not even know they exist. It’s another Web 1.0 throwback.
The Hot Bookmarklet lets you quickly open any page built with Hot Page in the editor. It’s a great way to learn how to build complex pages. In fact, all of the pages at hot.page, docs.hot.page and fx.hot.page are all built using Hot Page, so feel free to poke around at how they’re put together. You may get ideas for your own projects or learn a little bit about web development.
How To Save It
This is the Hot Bookmarklet:
If you click it now, you should see the Hot Page editor open in a new tab. You will be editing this page.
The idea is to save it to your bookmarks so that you can use it on other pages. To save it, drag it into your bookmarks bar or your bookmark organizer or wherever you like to save links. That’s it!
How To Use It
This should be pretty easy. Go to any web page built with Hot Page, even if it’s not one of your own pages. Try opening, for example, this version of Alice’s Adventures in Wonderland. Now click the bookmark that you saved. If it all works, you should see the same page in the Hot Page editor, along with all the markup, styles and scripts that were used to build it.
How It Works
This is the entire code for the bookmarklet:
javascript:(() => {const el = document.querySelector('meta[name="hot-page-editor-url"]'); el ? open(el.attributes.content.value) : alert('Not a Hot Page')})();Really that’s two lines of code in one that are wrapped in a function to avoid polluting the global namespace. Here are the two lines separated to make them a bit easier to read:
const el = document.querySelector('meta[name="hot-page-editor-url"]')
el ? open(el.attributes.content.value) : alert('Not a Hot Page')So, what is this doing? First, it uses
document.querySelector to find a <meta>
tag that exists in the <head> of every page on Hot
Page. This meta tag with the name hot-page-editor-url
includes the URL to edit the page in the Hot Page editor (duh). So the
code looks for that tag and saves the result to a variable called
el. If the tag was found, it will open the URL in a new
tab. If there is no tag, it will show an alert that says “Not a Hot
Page.”
At this point, you can only use this on pages that were built using Hot Page. If you use it on any random web page, you’re just going to get the “Not a Hot Page” message.