Skip to content
Decoding OTF Data
Share
Explore
Decoding OTF Data

icon picker
Ep 5: How many OTF studios are there, globally?

Entry Date:
1/31/2023
/ Updated
2/1/2023

Idea

Curious how many OTF studios are there around the world.

tl;dr

🟡 With the help with ChatGPT & Chrome developer tool bar, we’re able to extract all studio locations from OTF’s page - .
A bit more on what needs to run to generate the JSON blob on your own.
Answer: 1495 ✌️

Legend

💡 = Insight 🟢 = Do-able by anyone 🟡 = Hack by running Javascript via Chrome Debugger 🔴 = Hack that requires some level of Web coding experience

What’s next?

Map it out on Google Maps maybe?

Raw Notes

Randomly curious about where all studios are in OTF.
Found a page that contains a list of all OTF studios on
Use Chrome debugger to inspect the CSS locator of each studio’s location, and this should be sufficient — .studios-cl-wrapper [role="listitem"] .w-embed
Locate the first outerHTML, so we have an HTML element to feed into ChatGPT, so I don’t have to write code. :-) ​document.querySelectorAll('.studios-cl-wrapper [role="listitem"] .w-embed')[0].outerHTML
Feed that into ChatGPT to convert the data into JSON blob — And... Bingo! ​
image.png
Use the extractInfo function above, and feed it into a forEach(...) loop from the querySelectorAll(...) output, and now we got our JSON.
Good enough of a stopping point — It’d be great if we could add studio ID as a part of JSON payload — Maybe next time if I’m interested.
[Updated on 2023-02-01] The CSS selector unfortunately creates duplicate (Thanks to pointing this out!), so we’ll need to do some quick deduplication (Definitely not the best approach — I should fix it in CSS instead.) ​
image.png

Feedback? Got ideas? Found a bug?

Let me know on this .

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.