Updating data (adding new members) - nfischer/framily-tree GitHub Wiki

It's fairly easy to add new members to the family tree. You can also follow these same steps to fix misspellings, update to use someone's preferred nickname, or whatever changes you need to make.

Your part:

  1. Request edit access for the spreadsheet. You can just email me at [email protected] and briefly explain who you are and that you're in Theta Chi fraternity at UCLA.

  2. Once I grant edit access, visit the spreadsheet and add rows at the end of the doc for new members.

    • If you're deleting rows, let me know why over email (there could be good reasons for this, but I have to ask in case this was an accident).

  3. Note: be careful to spell names consistently. Specifically, make sure you spell the big's name the same way it's spelled for their own row. As an example, the following would break the site because "Joe Smith" and "Joseph Smith" are spelled differently:

    name big pledgeclass
    Joe Smith ... Fall 2011
    Alex Brown Joseph Smith Fall 2011
    • To help get this right, the spreadsheet will actually autocomplete the Big's name (Column B) based on the values you've already filled in Column A. Just start typing a few letters of the Big's name and you'll see a suggestion to autofill.
    • It's OK to update old rows to change someone's name (like if they prefer a nickname). Just make sure to update every row with that person's name so the spreadsheet stays consistent.

  4. Send me an email to let me know when you're done editing the spreadsheet.

My part:

This isn't too hard for me to do, I'm just writing down these notes so I don't forget. If you're a technical person and you're feeling up to it, feel free to try this out yourself and create a GitHub Pull Request.

In a terminal:

git pull origin main
npm install
# Pull down the spreadsheet data, convert this to a JSON file.
npm run getData
# This performs some minimal consistency testing on the spreadsheet data. This
# catches most typos.
npm test
# Start a local HTTP server and launch your web browser. You can manually test
# that the new brothers show up in the family tree where you expect.
npm start

# If everything looks good, then (1) commit the changes, (2) push to the main
# branch, (3) deploy the changes to the website.
git commit -am 'Update data'
git push origin main
npm run deploy

Now go check the website:

Changes may take up to 30 minutes to be visible. TL;DR the simplest option is to wait 30 minutes and then visit https://nfischer.github.io/framily-tree/. The latest updates should be visible in the website at that point. Let me know if anything looks wrong.

The more detailed explanation (I'm mostly writing this for my own reference) is:

  • At time of writing, GitHub pages uses cache-control: max-age=600 to cache the website. This means that if you load the site in your browser, push the changes, and refresh your browser within 10 minutes (600 seconds), you'll still see the old data. You can workaround this by doing a "hard refresh" in your browser (in Google Chrome, hold the shift key and click the refresh button). Or just wait 10 minutes, then these steps aren't necessary.
  • GitHub pages also uses a CDN (Content Delivery Network) which (if I remember correctly) can cache the site for up to 30 minutes. So even if you do a hard refresh, you might still get the old family tree. You may be able to workaround the CDN cache by visiting https://nfischer.github.io/framily-tree/?refresh=true. The ?refresh=true part at the end is called a URL query parameter: using any URL query parameter with any value is enough to trick GitHub's CDN into refreshing its cache, so ?foo=bar works just as well (it just doesn't look quite as nice). But as before, if all of this is too complicated then you can just wait 30 minutes and it should solve itself.
⚠️ **GitHub.com Fallback** ⚠️