Create a Guide/Template: "Inspect Element" Features in Browser

[daniellex0]

Overview

We need to create a guide for the Inspect Element feature in browsers so that designers know the benefits of using it

Action Items

The phases in the guide-making process are listed below. Each phase displayed in blue is linked to a wiki page with instructions on how to complete that phase. Open the wiki page in a new tab, copy the instructions for each part into the section labeled 'Tasks' at the bottom of this issue, and complete each task listed.

• Gather Examples Solo (open in a new tab)
• Gather Examples Collaboratively
• Create a Guide Draft
  • If needed, create a template
• Have your guide peer reviewed
• Present your guide for leadership review

Resources/Instructions

• Google Drive Folder for this Guide’s documents and shortcuts (to documents in other locations)
  0061 How and why to Use "Inspect Element" Features in Browser
• This research document is a good outline of what will go in the guide, however it does not tell you how to do each thing, and the person taking on this guide will need to gather examples from someone who is using it.
  • Google Doc Research and Examples - not yet a draft

Projects to Check (might be outdated, need to recheck links)

• 100 Automations - on hold
• 311 Data
  • wiki examples: none
  • issues examples:
  • project board examples: none
• Access the Data
  • wiki examples: none
  • issues examples: none
  • project board examples: none
• BallotNav - on hold
• Brigade Organizer's Playbook
  • wiki examples: none
  • issues examples: none
  • project board examples: none
• Civic Tech Index - on hold
• Civic Tech Jobs
  • wiki examples: none
  • issues examples: none
  • project board examples: none
• Design Systems - on hold
• Engage - on hold
• Expunge-Assist (formerly known as Record Clearance)
  • wiki examples: none
  • issues examples:
    • [Design System] Auditing + standardizing colors  expunge-assist#823 (comment)
      • [ Audit Colors] in Landing page  expunge-assist#825 (comment)
    • EA: Dev / Design Sync Meeting Agenda expunge-assist#717 (comment)
      • EA: Dev / Design Sync Meeting Agenda expunge-assist#717 (comment)
      • EA: Dev / Design Sync Meeting Agenda expunge-assist#717 (comment)
  • project board examples: none
• Food Oasis
  • wiki examples:
  • issues examples:
  • project board examples:
• GreenEarthOS - on hold
• Guides
  • wiki examples:
  • issues examples:
  • project board examples:
• HomeUniteUs
  • wiki examples:
  • issues examples:
  • project board examples:
• Tech Work Experience (Internship project)
  • wiki examples:
  • issues examples:
  • project board examples:
• Lucky Parking
  • wiki examples:
  • issues examples:
  • project board examples:
• Open Community Survey - on hold
• People Depot
  • wiki examples:
  • issues examples:
  • project board examples:
• Tables team
  • wiki examples:
  • issues examples:
  • project board examples:
• TDM Calculator
  • wiki examples:
  • issues examples:
  • project board examples:
• VRMS
  • wiki examples:
  • issues examples:
  • project board examples:
• Hack for LA's Website
  • wiki examples:
  • issues examples:
  • project board examples:
• Youth Justice Nav - on hold

Communities of Practice

• Data Science Projects
• UI/UX
• Dev Ops
• Product
• Engineering

Tasks

• Gathering Examples with GitHub
  Follow the instructions from the slide deck Part 1: Gathering Examples With GitHub: Wiki, Issues, Project Board, Resources Provided
  • Remove the following labels from your issue as you complete them:
    • status: needs wiki examples
    • status: needs issues examples
    • status: needs project board examples
  • Congrats you have completed Part 1: Gathering Examples With GitHub: Wiki, Issues, Project Board, Resources Provided
    • Go to Gather Examples, Use GitHub Search and copy the the text block (next steps), below this line

[anonymousanemone]

Summer internship ended and had to prioritize school work.
Research has been completed and a rough outline is available in the "Research" link google folder.

[ExperimentsInHonesty]

The Research link above is a good outline of what will go in the guide, however it does not tell you how to do each thing, and the person taking on this guide will need to gather examples from someone who is using it. I recommend Kristine Eudey from the Hack for LA website team.

[ExperimentsInHonesty]

@NilakshiS Please provide update

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."

• remember to add links to the top of the issue if they are going to be needed again.

[NilakshiS]

1. Progress: Task is still in progress, currently at the gathering examples with GitHub stage.

• Completed: Checked projects from 100 Automations to Expunge Assist in the list for examples of using inspect element, skipping projects that are on hold.
• Left: Checking projects from Food Oasis to Youth Justice Nav in the list

2. Blockers: None

3. Availability: I will have 5-6 hours this week to work on this issue.

4. ETA: It would take me about 2 weeks to complete the gathering examples with GitHub stage.

[NilakshiS]

Unassigning myself because I cannot finish this issue, I'm currently occupied with a different project. No more progress on the issue since what was last reported.

For reference, to find the issues listed, I searched the following terms in issues and checked the closed as well as open issues: “inspect”, “inspect element”, “devtools”, “chrome devtools”, “chrome inspect”.