Developer tips and tricks
Bookmarklets
A bookmarklet is a little bit of JavaScript that you can use as a bookmark in your browser to perform context-sensitive tasks. To use one copy the text in the code block, right-click in your browser’s bookmarks bar to add a link, paste the code into URL field, and name it accordingly. Clicking on the bookmark should run the code.
Link to highlighted text
javascript:void(location.hash=`#:~:text=${encodeURIComponent(window.getSelection())}`)This uses the very new text fragments feature (only available in Chrome and Edge as of this writing) to link to the currently highlighted text. You should see #:~:text= in your browser’s URL bar after running this, after which you can share that URL by copy and paste.
View on test
javascript:location=location.href.replace(/https:\/\/sf.gov/g,'https://test-sfgov.pantheonsite.io')Use this to view a URL on sf.gov on the test environment at test-sfgov.pantheonsite.io. You can run this on pages with sf.gov anywhere in the URL, which can be helpful when you want to compare production and test environments run through external services, like What the form (see also: “WTF”, below).
Forms
What the form (WTF)
javascript:location.href=`https://formio-sfds.herokuapp.com/api/wtf?url=${location.href}`Use this bookmarklet to view the WTF analysis of a form.io form page on sf.gov (or any other Pantheon deployment URL).
Translate a form
Use this bookmarklet to see the translation view of a form, which collects all form inputs into a single page, disables conditionals, and prompts you to log in with Phrase to see translations in context.
Preview form with latest theme version
Use this bookmarklet to preview the current sf.gov URL with the latest version of our form.io theme, formio-sfds.