Periodic table of the web's APIs

http://wwwperiodictable.surge.sh/?hn5

by crazypython • 6 years ago

127 44 6 years ago

wwwperiodictable.surge.sh

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). Another is alternative and less popular technologies, like XSLT for styling (https://developer.mozilla.org/en-US/docs/Web/XSLT) or SVG as a markup language. (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• 6 years 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• 6 years 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• 6 years 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• 6 years 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• 6 years 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• 6 years 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

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.

crazypython7• 6 years 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

Uehreka• 6 years 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• 6 years 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."

crazypython7• 6 years 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• 6 years ago

Does size/shape[1] mean anything? Or is it my punishment for not using Chrome?

[1] https://i.imgur.com/g8J28D8.jpg

crazypython7• 6 years 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• 6 years 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• 6 years ago

Indeed. Having to sidescroll at any size/zoom is really, really annoying.

reificator• 6 years 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• 6 years ago

pug?

DarkContinent• 6 years 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• 6 years 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• 6 years ago

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

Isamu• 6 years ago

I think people are used to terms being used when they don’t really mean anything.

recursive• 6 years ago

It's kind of like "REST" in "REST interface". You know it just means like... normal and good.

willvarfar• 6 years 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• 6 years 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.

phaedryx2• 6 years ago

I was expecting a pattern, but there wasn't one; one of the two classic problems in computer science, I guess.

crazypython7• 6 years 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."

SimeVidas• 6 years ago

Mind blown. I never thought of that.

still_grokking• 6 years ago

The parent is an interesting comment as I thought just everybody would learn about the periodic table of elements in school. Basic education seems to differ really widely.

jcranmer• 6 years ago

Well, it's worth delving a bit into the history of the periodic table of the elements to understand how it came to be.

Lavoisier is usually credited with the first systematic list of the elements, partially because he's generally credited as being the father of modern chemistry and is associated with the transition from alchemy to chemistry. His list, published in 1789, does have some errors: he included "light" and "caloric" (aka heat), and several metals are given in oxide form instead of pure form (e.g., magnesium, calcium, molybdenum, barium). There's no inherent order to the list.

As stoichiometry develops over the next few decades, chemists begin to discover the atomic weights of elements, and further establish relative ratios of elements in compounds, so we can identify that (say) magnesium oxide has magnesium and oxygen in a one-to-one ratio, whereas sodium oxide has a two-to-one ratio.

Parallel to this effort, it also becomes readily apparent that there are some groups of elements that behave very similarly--today, we'd call these the alkali metals (first column), alkaline earth (second column), chalcogens (third column from right; least used of the list), and the halogens (second column from right).

By the 1860s, these patterns and the atomic masses are starting to be combined into two-dimensional tables, taking a list of elements with increasing masses and chopping it off every so often to make a new row. Mendeleev wasn't the first to create this kind of table, but he was the first to recognize that some of the data was wrong [1], and most importantly, he discovered several periodic trends in the process that allowed him to predict the properties of unknown elements, with gallium and germanium the most ringing successes.

The periodic table we get in the 19th century does not look like our modern periodic table, though. It creates 8 groups of elements, with group VIII comprising three elements in a row (the columns headed by iron, cobalt, and nickel in the modern table). When noble gasses were discovered, they were combined into a Group 0. Not every row would have a group 0 and group VIII entry. Pretty much all of the tables from this era will list groups with their oxide/hydride valencies, which should give you an idea of how the groups are organized.

It's not until the early 20th century that chemists began to develop the theory of atomic numbers, and shortly thereafter electron configuration. This leads to the development of the periodic table dominated by increasing atomic number instead of increasing atomic weight, and also begins to recognize that the table isn't a simple table but has a more stair-step design, comprising what we would now call the s block (left two columns), p block (right 6 columns), d block (middle mass), and f block (the lanthanide and actinide series).

This development helps settle the issues with rare earth elements--the lanthanides don't make sense in view the old periodic table layout (there's too many of them!), although it also doesn't help that separating the lanthanides from one another is so difficult that several elements were later shown to be mixtures of different lanthanides. It really doesn't help organizing known elements into a table when your input data is wrong!

That said, if you pay careful attention to modern periodic tables, you will notice that there is one place where tables differ. Which elements are placed below yttrium? Is lanthanum and actinium in the main table? Or is lutetium and lawrencium in the main table? Or do you create a gap below yttrium and place both lanthanum and lutetium in the supplemental series at the bottom? Organizing the lanthanides is still an unsolved problem for chemists!

[1] At the time, the way of calculating atomic mass meant you had to make a guess at valency to compute the atomic mass. If the valency was wrong, then the atomic mass would be wildly off.

rleigh• 6 years ago

Regarding what's in the main table, that's solved in circular tables like this: https://www.webelements.com/_media/periodic_tables/periodic_...

ThePadawan• 6 years ago

That reminds me of the time someone online pointed out that customers did in fact believe "essential oils" to mean "these are essential = required for survival", not "these constitute essences = extracts of a plant's ingredients".

jfk13• 6 years ago

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

crazypython7• 6 years ago

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

ffpip• 6 years ago

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

BlueTemplar• 6 years ago

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

felixr• 6 years ago

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

divbzero• 6 years ago

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

fitzroy• 6 years ago

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

crazypython7• 6 years 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

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• 6 years ago

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

heavyset_go• 6 years ago

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

octoberfranklin• 6 years ago

... and they are all radioactive. ;)

Daub• 6 years ago

Time perhaps to remind people of this: https://news.ycombinator.com/item?id=668496

(A period table of visualization meathods)

Periodic table of the web's APIs

Related Stories