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.

Objectives

After completing this lesson, participants will be able to:

• Participants can identify when using tools to anonymize information is necessary.

Prerequisite Skills

Participants will get the most from this lesson if they have familiarity with:

• Browser developer tools
• Browser extensions
• Introductory experience with HTML and CSS

Readiness Questions

• 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?

Materials Needed

• Web browser

Notes for the Presenter

• Discuss remaining factual in the functionality of the site
• Mention the responsibility involved when altering how a website displays

Lesson Outline

• Display a website 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

Additional Resources

• Logos in Slide Decks
• Logos in WordCamp videos

Exercises

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

Assessment

You can modify the content of a site without editor access

1. True
2. False

Answer: 1. True

When might you choose to omit content on a site

1. When it distracts users
2. When it doesn’t alter the intended topic
3. When it helps conflicts with other goals
4. All of the above

Answer: 4. All of the above

Example Lesson

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.

• Google Chrome
• Mozilla Firefox
• Apple Safari
• Microsoft Edge

HTML

To modify the text, open your browser developer tools.

1. Select the element inspector
2. Select the region you need to modify
3. Double click on the text you wish to modify to change the words

CSS

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.

Browser Extensions

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