Audit yml collections for specific ids

[Aveline-art]

Overview

As a developer, our data must model the way data works with a database. For this issue, we will audit items in our yml collections to check that they contain unique, non-displayed id identifiers that distinguish it from other items.

Action Items

• Search through all files in our collections.
• Look for an invisible value that fits these criteria:
  • Not displayed
  • Unlikely to ever change
  • Unique to every file in the collection
• If this value is not found:
  • In a spreadsheet in our google drive, list out:
    • name of the file
    • link to file
    • recommended value to add (and it's associated key)
• Create a follow-up issue/s to add the recommended key:values to each yml file.

Resources/Instructions

_data/internal

Background on this issue: If one scans through some of our JS code that organizes and displays our collections (for example, the wins-page), one will discover areas that the id attribute of certain elements are made from displayed values, such as a title or a name. This is unacceptable, because titles and names can have character that break html attributes, such as spaces, dashes, etc. Moreover, this encourages developers to use hacky string manipulations that only causes more mayhem down the line. The better solution is to give each yml file it's own specific identifier.

How can this identifier be used? It can itself work as the value of an html attribute. In addition, it can link to a table or a JSON file containing other invisible information, such as data-attributes, which can be easily retrieved, changed, and expanded upon. This ultimately improves our scalability.

[jyaymie]

I am not sure what is meant by "id identifiers". To me, the only thing distinguishing a yml file from another is the file name itself and not anything inside the file. Is there a yml file in _data/internal containing an invisible value that I can use as an example?

Any assistance is appreciated. Thank you!

[jyaymie]

I've unassigned myself because of a sudden change in availability. There is no progress to report. @Aveline-art shared the following to help further explain the issue:

Okay, so here is the gist. In HTML the id attribute is used to identify an HTML object. For example:

<div id="div-1" />

Now imagine that you have a function that programmatically inserts these ids, say for instance:

function add_ids_to_divs(id):
  div.add(id)

This function will work in code, but when the resulting <div> is rendered through the brower's engine the HTML will crash if we insert any values that does not follow the HTML5 standard. In order to work around this then, we need checks to:

1. make sure all ids are unique
2. make sure that there are no spaces
3. make sure that there is at least 1 character

But imagine if we need to reuse this id, for some other function, which has other criteria such as:

1. it cannot have symbols
2. it cannot container upper cases

You can see how this will increasingly constrain the id and make it near impossible to account for. Since we are using some visible field to construct the ID, such as the project's name, we need to apply escaping, since we cannot simply change the name directly to use it as an id field (we do not want to end up displaying "HackforLA Website" as "HackForLAWebsite").

Therefore, we need some other value that can act as a value for the id attribute in html tags. This value should not be displayed, so we do not have to worry about how it'll appear to visitors, should not change, and also be unique (that way, we can use the id as exceptions, such as in if id is "12345" then do this).

[steven-positive-tran]

https://docs.google.com/spreadsheets/d/1km7lvlJfkbzjvL4ZNSL2SVaxj8q29C-ObTW_mdkymHE/edit#gid=886605444

[steven-positive-tran]

Progress : Google Docs Created and a few have been done.
Availability: After 5pm
Blocker : Real life obligations, needing clarification on issue.
ETA: This Friday

[steven-positive-tran]

I have created the issue as #4146.

I will be available at 7pm pst tomorrow and weekends around 6pm if we need to discusso or ask questions.

[ExperimentsInHonesty]

@steven-positive-tran I think you meant to close this issue not to move it to the done column (which is not where done issues go). Scroll to the bottom and click the Close issue button, which will close the issue and move it to QA, where I review each issue before moving to done.