Anonymizing information in the browser
When creating screenshots and screencasts, it can be helpful to anonymize portions of data. For this, there are a few ways to achieve the on the front of the site without altering the data permanently.
After completing this lesson, participants will be able to:
- Participants can identify when using tools to anonymize information is necessary.
Participants will get the most from this lesson if they have familiarity with:
- Browser developer tools
- Browser extensions
- Introductory experience with HTML and CSS
- Do you want to show an example of content on your screen while anonymizing or altering portions of the site?
- Are you creating technical documents or other training?
- Do you know how to modify what the browser displays without changing the source content?
- Web browser
Notes for the Presenter
- Dicsuss remaining factual in the functionality of the site
- Mention the responsibility involved when altering how a website displays
- Display a webite that you are not logged into
- Use developer tools to alter the way the site displays in HTML and CSS
- Demonstrate searching your favorite browser extensions area for relevant tools
Participants will take a screenshot of Tools > Settings that has the Help tab hidden
- Use the browser developer tools to modify the text of the Help tab at Tools > Settings
- Use CSS in the browser developer tools to hide the Help tab
- Take screenshots of both scenarios
You can modify the content of a site without editor access
Answer: 1. True
When might you choose to omit content on a site
- When it distracts users
- When it doesn’t alter the intended topic
- When it helps conflicts with other goals
- All of the above
Answer: 4. All of the above
If you are creating technical documentation but need to anonymize data, there are a few ways to go about this process. Whether privacy-related or adhering to the standards of the documentation, having the flexibility to alter the front of site without modifying data is incredibly valuable.
Similarly, you may want to modify CSS to hide areas that are not relevant to the presentation.
Browser Developer Tools
Each browser will have a similar developer tools experience. Accessing this area will allow you to modify the HTML and CSS displayed in the browser. See each for the specific relevant tutorial.
To modify the text, open your browser developer tools.
- Select the element inspector
- Select the region you need to modify
- Double click on the text you wish to modify to change the words
When modifying the CSS, it is especially important to adhere to the original designer’s intention. However, nuances like hiding the Screen Options or Help tab in the WordPress admin dashboard may make sense at times.
In the image below, the Help tab is not needed. However, resizing the image to omit it would chop off the linked text at the bottom.
Instead, we can use CSS to hide the tab. In the image below, we used the Element Inspector to select the Help tab and hid the tab using
display: none. Now we can crop the image without weirdly chopping through the help tab.
There are many browser extensions that can be helpful when creating documentation, and it will vary based upon the browser you are using. Search your preferred browser extension for tools that help you:
- Search/Find and Replace text
- Alternatives to modify code compared to the developer tools
- Hiding the WordPress admin toolbar
Lesson Wrap Up
Tip: 💡 Follow with the Exercises and Assessment outlined above.