13 ms·

Periodic table of the web's APIs

127 points by crazypython 6y ago

crazypython 6y ago
Hi, I made this map/visual diagram of the web's APIs. One of the interesting things you can see is the emerging technologies, like CSS Houdini (https://developer.mozilla.org/en-US/docs/Web/Houdini https://developer.mozilla.org/en-US/docs/Web/Houdini). Another is alternative and less popular technologies, like XSLT for styling (https://developer.mozilla.org/en-US/docs/Web/XSLT https://developer.mozilla.org/en-US/docs/Web/XSLT) or SVG as a markup language. (https://www.w3.org/TR/SVG11/ https://www.w3.org/TR/SVG11/) It helps people understand the capabilities of a modern web browser easier. The color-coding is intended to help web developers think on if they can use as a feature on their site. If your audience is on a modern web browser (not IE 11), the medium shade of green is enough. If you only need some users to have the feature, then dark green is enough. If you only care about Chrome, you can use the APIs in blue.
- ZeroClickOk 6y ago
  Nice. Some suggestions: 1) Show some expanded information on hover; 2) Put (more) links to Wikipedia/CanIUse; 3) Allow some kind of resize. Even if I zoom out in Chrome I cannot see all the periodic table at once; 4) Maybe the rows must be organized by "relevant" ratio. So currently used will be on top and obsolete/deprecated in bottom; 5) Yet on 4, maybe we can customize the order? 6) Missing a "Server side" column for ASP.Net, Php, etc... 7) Allow hide/show columns
- pwdisswordfish4 6y ago
  I considered, especially since this is a Show HN, to not say anything and let it slide, but considering the potential long tail for negative effects, where web dev circles are already filled with mildly annoying falsehoods and crazy beliefs, it seems kind of irresponsible to opt for letting it slide out of some (possibly mistaken) notion of politeness. There are some bad conclusions that can be drawn from this chart, if not just downright bad info contained in it, at least in its current form. For example, if the date labels are going to be this arbitrary, it would probably be better to just omit them altogether.
- serial_dev 6y ago
  It would be also great to have at least one link for all API, so that I can easily learn more about a particular API.
- graderjs 6y ago
  This is very useful, thank you. I had to zoom out to get an overview and the legend overlapped with the top left of the table. If it could scale to different sizes more clearly and smoothly that would be an improvement I think. But I understand if you don't intend to make changes, and it's also great as it is, thanks very much for releasing!
- airstrike 6y ago
  I think this is a worthwhile exercise but the years make no sense at all. CSS was proposed in 1994, not 2015. It's off by literally 2 decades. Also XHTML was released in 2000... By 2010 it was almost obsolete with HTML5 coming out 4 years later I stopped reading there
- WhyNotHugo 6y ago
  The colour coding doesn't really have good-enough contrast. I can't personally distinguish the three first colours. I can tell they're somehow different, but can't tell which is which. All three are some kinda of "olive-like greenish". Maybe try going with better contrasting colours? Here's a useful tool to better test this: https://contrast-ratio.com/#darkolivegreen-on-olive https://contrast-ratio.com/#darkolivegreen-on-olive It's funny, I've always read a lot about these accessibility issues, but this is the first time I find myself affected by one to the point where I can't interpret something.
  - crazypython 6y ago
    I might or might not be able to look at improving the colors, but feel free to send a pull request. https://github.com/CrazyPython/wwwperiodictable https://github.com/CrazyPython/wwwperiodictable
Uehreka 6y ago
Looks cool! Some thoughts: - Could you make the cells link to something? Ideally something readable like MDN (but if there’s no article available, then perhaps the spec itself) - The two blues are so close together I can’t distinguish them - Why is Facebook on here? And why is its date 2020 when it’s been around 15 years?
- bombastry 6y ago
  The two blues are identical: the CSS has them both colored as "dodgerblue." Facebook appears to be the only one in the "Proprietary" category. The rest of the blue ones are all "Chrome."
  - crazypython 6y ago
    It's a joke that if an API is Chrome-only, it might as well be proprietary. Chrome-only (neither supported by Firefox or Safari) APIs typically have less concern for privacy and security. For example, Web MIDI lets a web browser install arbitrary binary executables on MIDI devices.
norrius 6y ago
Does size/shape[1] mean anything? Or is it my punishment for not using Chrome? [1]: https://i.imgur.com/g8J28D8.jpg https://i.imgur.com/g8J28D8.jpg
- crazypython 6y ago
  It's a bug in the CSS when the width is too small– increase your window width to fix it– feel free to submit a pull request.
TheRealPomax 6y ago
It would be nicer if it resized with the browser but such that it fits inside the viewport, instead of cutting off after "semantic" regardless of how big the viewport is set.
- snerbles 6y ago
  Indeed. Having to sidescroll at any size/zoom is really, really annoying.
  - reificator 6y ago
    14 columns of cards. Each card has a 2-3 letter header and a very brief description that fits < 10 words in two lines. 3840 columns of pixels on my display. Yet even at the smallest level of zoom with a fullscreen window, I have to scroll horizontally to view all the columns. This is absurd.
SoSoRoCoCo 6y ago
pug?
DarkContinent 6y ago
This is great work--thank you for sharing! I was just wondering which APIs did you prioritize to appear here? Was there a scoring process?
b34r 6y ago
> The lighter the color, the more support there is. Shouldn’t the blue for proprietary be like white with an outline or something then?
LudwigNagasena 6y ago
What do people think “periodic” in “periodic table” stands for?
- Isamu 6y ago
  I think people are used to terms being used when they don’t really mean anything.
- recursive 6y ago
  It's kind of like "REST" in "REST interface". You know it just means like... normal and good.
- willvarfar 6y ago
  One of the interesting side effects of the periodic table was that it made people go look for elements to fill in the gaps. There was a similar 2D layout that prompted the search for a memristor. Perhaps in the same way a tech table grouped by some properties on axis will prompt developers to ‘fill in the gaps’ and make new tech?
- fabian2k 6y ago
  I don't think the people that create "periodic tables" for other areas understand the principles behind the actual periodic table of elements. I've never seen any example that had any kind of underlying principle like the real thing.
- phaedryx 6y ago
  I was expecting a pattern, but there wasn't one; one of the two classic problems in computer science, I guess.
  - crazypython 6y ago
    From the site: "The columns are organized left-to-right by the date an API in that column was first implemented. Older first. The rows are organized by the date they were first proposed. The first row represents technologies that still work, but are superseded or obsoleted by newer technologies. The second-to-last row is deprecated or abandoned APIs. These may have been implemented before and removed, or only partly implemented. The last row is for APIs that only ever worked in one browser. Many of these are proprietary or vendor-specific APIs."
jfk13 6y ago
Shouldn't the abbreviations be unique? I see two "Ac"s...
- crazypython 6y ago
  Yes, they should be unique so the abbreviations can be used in communication. Thanks for the catch, I fixed it now.
ffpip 6y ago
Not putting a dot after the www in your domain name seems weird :)
BlueTemplar 6y ago
Ironically, I think your website isn't working properly with Firefox mobile?
felixr 6y ago
XMLHttpRequest shoud be 2006 and not 2016, and I also doubt the 2014 on JavaScript ;-)
divbzero 6y ago
Web APIs with high RFC number tend to be unstable and may decay spontaneously.
fitzroy 6y ago
Is there a class of "noble" APIs that are completely non-reactive and just timeout?
crazypython 6y ago
I picked the acronyms so you could use them while talking to people– they are intended to not conflicted with other industry terms. I put this under the copyleft GNU Free Documentation License. Feel free to fork and send a pull request to suggest changes. https://github.com/CrazyPython/wwwperiodictable/fork https://github.com/CrazyPython/wwwperiodictable/fork Let me know if I'm missing any APIs– I skimmed through the WICG and W3C lists to compile this resource, but I may have missed some.
- gary_0 6y ago
  Hi! The Geolocation API seems to be missing. https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API https://developer.mozilla.org/en-US/docs/Web/API/Geolocation...
heavyset_go 6y ago
I like that this doesn't require loading JavaScript to view the static data and visualization. Pretty cool!
octoberfranklin 6y ago
... and they are all radioactive. ;)
Daub 6y ago
Time perhaps to remind people of this: https://news.ycombinator.com/item?id=668496 https://news.ycombinator.com/item?id=668496 (A period table of visualization meathods)

127 points by crazypython 6y ago

Hi, I made this map/visual diagram of the web's APIs. One of the interesting things you can see is the emerging technologies, like CSS Houdini (https://developer.mozilla.org/en-US/docs/Web/Houdini https://developer.mozilla.org/en-US/docs/Web/Houdini). Another is alternative and less popular technologies, like XSLT for styling (https://developer.mozilla.org/en-US/docs/Web/XSLT https://developer.mozilla.org/en-US/docs/Web/XSLT) or SVG as a markup language. (https://www.w3.org/TR/SVG11/ https://www.w3.org/TR/SVG11/) It helps people understand the capabilities of a modern web browser easier. The color-coding is intended to help web developers think on if they can use as a feature on their site. If your audience is on a modern web browser (not IE 11), the medium shade of green is enough. If you only need some users to have the feature, then dark green is enough. If you only care about Chrome, you can use the APIs in blue.

ZeroClickOk 6y ago
Nice. Some suggestions: 1) Show some expanded information on hover; 2) Put (more) links to Wikipedia/CanIUse; 3) Allow some kind of resize. Even if I zoom out in Chrome I cannot see all the periodic table at once; 4) Maybe the rows must be organized by "relevant" ratio. So currently used will be on top and obsolete/deprecated in bottom; 5) Yet on 4, maybe we can customize the order? 6) Missing a "Server side" column for ASP.Net, Php, etc... 7) Allow hide/show columns
pwdisswordfish4 6y ago
I considered, especially since this is a Show HN, to not say anything and let it slide, but considering the potential long tail for negative effects, where web dev circles are already filled with mildly annoying falsehoods and crazy beliefs, it seems kind of irresponsible to opt for letting it slide out of some (possibly mistaken) notion of politeness. There are some bad conclusions that can be drawn from this chart, if not just downright bad info contained in it, at least in its current form. For example, if the date labels are going to be this arbitrary, it would probably be better to just omit them altogether.
serial_dev 6y ago
It would be also great to have at least one link for all API, so that I can easily learn more about a particular API.
graderjs 6y ago
This is very useful, thank you. I had to zoom out to get an overview and the legend overlapped with the top left of the table. If it could scale to different sizes more clearly and smoothly that would be an improvement I think. But I understand if you don't intend to make changes, and it's also great as it is, thanks very much for releasing!
airstrike 6y ago
I think this is a worthwhile exercise but the years make no sense at all. CSS was proposed in 1994, not 2015. It's off by literally 2 decades. Also XHTML was released in 2000... By 2010 it was almost obsolete with HTML5 coming out 4 years later I stopped reading there
WhyNotHugo 6y ago
The colour coding doesn't really have good-enough contrast. I can't personally distinguish the three first colours. I can tell they're somehow different, but can't tell which is which. All three are some kinda of "olive-like greenish". Maybe try going with better contrasting colours? Here's a useful tool to better test this: https://contrast-ratio.com/#darkolivegreen-on-olive https://contrast-ratio.com/#darkolivegreen-on-olive It's funny, I've always read a lot about these accessibility issues, but this is the first time I find myself affected by one to the point where I can't interpret something.
- crazypython 6y ago
  I might or might not be able to look at improving the colors, but feel free to send a pull request. https://github.com/CrazyPython/wwwperiodictable https://github.com/CrazyPython/wwwperiodictable

Uehreka 6y ago

Looks cool! Some thoughts: - Could you make the cells link to something? Ideally something readable like MDN (but if there’s no article available, then perhaps the spec itself) - The two blues are so close together I can’t distinguish them - Why is Facebook on here? And why is its date 2020 when it’s been around 15 years?

bombastry 6y ago
The two blues are identical: the CSS has them both colored as "dodgerblue." Facebook appears to be the only one in the "Proprietary" category. The rest of the blue ones are all "Chrome."
- crazypython 6y ago
  It's a joke that if an API is Chrome-only, it might as well be proprietary. Chrome-only (neither supported by Firefox or Safari) APIs typically have less concern for privacy and security. For example, Web MIDI lets a web browser install arbitrary binary executables on MIDI devices.

norrius 6y ago

Does size/shape[1] mean anything? Or is it my punishment for not using Chrome? [1]: https://i.imgur.com/g8J28D8.jpg https://i.imgur.com/g8J28D8.jpg

crazypython 6y ago
It's a bug in the CSS when the width is too small– increase your window width to fix it– feel free to submit a pull request.

TheRealPomax 6y ago

It would be nicer if it resized with the browser but such that it fits inside the viewport, instead of cutting off after "semantic" regardless of how big the viewport is set.

snerbles 6y ago
Indeed. Having to sidescroll at any size/zoom is really, really annoying.
- reificator 6y ago
  14 columns of cards. Each card has a 2-3 letter header and a very brief description that fits < 10 words in two lines. 3840 columns of pixels on my display. Yet even at the smallest level of zoom with a fullscreen window, I have to scroll horizontally to view all the columns. This is absurd.

SoSoRoCoCo 6y ago

pug?

DarkContinent 6y ago

This is great work--thank you for sharing! I was just wondering which APIs did you prioritize to appear here? Was there a scoring process?

b34r 6y ago

> The lighter the color, the more support there is. Shouldn’t the blue for proprietary be like white with an outline or something then?

LudwigNagasena 6y ago

What do people think “periodic” in “periodic table” stands for?

Isamu 6y ago
I think people are used to terms being used when they don’t really mean anything.
recursive 6y ago
It's kind of like "REST" in "REST interface". You know it just means like... normal and good.
willvarfar 6y ago
One of the interesting side effects of the periodic table was that it made people go look for elements to fill in the gaps. There was a similar 2D layout that prompted the search for a memristor. Perhaps in the same way a tech table grouped by some properties on axis will prompt developers to ‘fill in the gaps’ and make new tech?
fabian2k 6y ago
I don't think the people that create "periodic tables" for other areas understand the principles behind the actual periodic table of elements. I've never seen any example that had any kind of underlying principle like the real thing.
phaedryx 6y ago
I was expecting a pattern, but there wasn't one; one of the two classic problems in computer science, I guess.
- crazypython 6y ago
  From the site: "The columns are organized left-to-right by the date an API in that column was first implemented. Older first. The rows are organized by the date they were first proposed. The first row represents technologies that still work, but are superseded or obsoleted by newer technologies. The second-to-last row is deprecated or abandoned APIs. These may have been implemented before and removed, or only partly implemented. The last row is for APIs that only ever worked in one browser. Many of these are proprietary or vendor-specific APIs."

jfk13 6y ago

Shouldn't the abbreviations be unique? I see two "Ac"s...

crazypython 6y ago
Yes, they should be unique so the abbreviations can be used in communication. Thanks for the catch, I fixed it now.

ffpip 6y ago

Not putting a dot after the www in your domain name seems weird :)

BlueTemplar 6y ago

Ironically, I think your website isn't working properly with Firefox mobile?

felixr 6y ago

XMLHttpRequest shoud be 2006 and not 2016, and I also doubt the 2014 on JavaScript ;-)

divbzero 6y ago

Web APIs with high RFC number tend to be unstable and may decay spontaneously.

fitzroy 6y ago

Is there a class of "noble" APIs that are completely non-reactive and just timeout?

crazypython 6y ago

I picked the acronyms so you could use them while talking to people– they are intended to not conflicted with other industry terms. I put this under the copyleft GNU Free Documentation License. Feel free to fork and send a pull request to suggest changes. https://github.com/CrazyPython/wwwperiodictable/fork https://github.com/CrazyPython/wwwperiodictable/fork Let me know if I'm missing any APIs– I skimmed through the WICG and W3C lists to compile this resource, but I may have missed some.

gary_0 6y ago
Hi! The Geolocation API seems to be missing. https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API https://developer.mozilla.org/en-US/docs/Web/API/Geolocation...

heavyset_go 6y ago

I like that this doesn't require loading JavaScript to view the static data and visualization. Pretty cool!

octoberfranklin 6y ago

... and they are all radioactive. ;)

Daub 6y ago

Time perhaps to remind people of this: https://news.ycombinator.com/item?id=668496 https://news.ycombinator.com/item?id=668496 (A period table of visualization meathods)