This has (at least) one error: silver is not the most thermally-conductive element (carbon is, as diamond). It is the most thermally-conductive metal.
Only pointing this out because it is not quite a reference source, yet [1].
—Electrician, former chemist
[1] I'll cite Wikipedia, below (the irony) #ElderMillenial
nadermx 2 days ago [-]
Appreciate this, also put in another link in the footer to "Report an Error" just in-case it does become a reference source. No factor of safety in the periodic table of elements.
As second suggestion: this probably looks great on a cell phone, but on a 50" display you've got tons more space for additional elemental facts/tidbits. Perhaps detect monitor size, then keep simple for phones?
This could additional put the lanthomides into their correct placement (if window widened enough) [0].
Much prettier. Could easily have larger pop-ups (entire point is to get information on elements, no?) <https://i.imgur.com/IVx5MY5.png>
Heck, even have a link to Wikipedia articles (why not?). You're obviously in the enjoyment of information sharing =D
You also have plenty of space for an example element (e.g. describe what each line represents e.g.g: density, atomic mass, proton/element #). The map's "key" if you will... not everybody knows these standardized chemnerd properties (you can then also remove the 120+ "RT" by simply placing in example element @STP, with a link to what that means, too).
Just feedback from a fellow dork am.chem.
nadermx 2 days ago [-]
Thanks for all the feedback. Added in all your suggestions
ProllyInfamous 2 days ago [-]
I like that you've chosen to use an actual element for the example / explainer.
To streamline the UI, might I suggest replacing example element (copper) with just the explainers, next to hydrogen [2]... using that elements information (without adding a free-floating copper).
If that doesn't make sense, let me know.
Thanks for being a responsive educator.
[2] perhaps use Beryllium for your example/explainer -- because then you can explain the electron orbitals too ..?
----
Replace the topbar (color==atomic class) location to between Group II & III elements (e.g. whitespace between Be B); does not need to be explained on example element text.
nadermx 2 days ago [-]
check now. And thanks, appreciate the praise, was fun making this thing.
2 days ago [-]
adrian_b 3 days ago [-]
The chemists have retained until today the obsolete prejudice that 0 is not a number equivalent with any other cardinal number.
Because of this, all published periodic tables are missing 1 chemical element.
Ignoring the artificial oganessian (of which it is not possible to make more than a few atoms that decay instantly), the column of the noble gases must have 7 noble gases that are encountered in nature: neutron (Z=0), helium (Z=2), neon (Z=10), argon (Z=18), krypton (Z=36), xenon (Z=54) and radon (Z=86).
Of these 7, the first and the last, i.e. neutron and radon are unstable and decay quickly, while the other 5 are stable.
Neutron does not enter in chemical combinations, but the same is true for the other light noble gases, helium and neon, so this does not make it distinct from the other chemical elements. Like also technetium and promethium, neutron is a chemical element that does not have any beta-stable isotope (because the beta-stable isobar with A=1 has Z=1, i.e. it is an isotope of hydrogen).
layer8 2 days ago [-]
> the obsolete prejudice that 0 is not a number equivalent with any other cardinal number.
When adopting zero in that way, to be consistent you’d also have to consider “nothing” to be an isotope of neutron.
But the real answer is that chemical elements imply atoms, and atoms imply the combination of a nucleus and bound electrons. The neutron is considered a subatomic particle.
adrian_b 2 days ago [-]
A neutron is an atomic nucleus with 0 electrons.
The same is true for hydrogen ionized once, helium ionized twice, lithium ionized thrice, and so on. From the point of view of chemistry, a neutron is not more subatomic than a hydrogen nucleus or any other nucleus. There is indeed a difference between the nuclei with A = 1 and the nuclei with A > 1, because the latter can be decomposed into the former at high enough temperatures, of a few tens of MeV, similarly to the decomposition of any multi-atomic molecule at high enough temperatures.
"Nothing" is not an isotope of neutron, for the same reason why it is not an isotope of sulfur or of iron, i.e. the mass number A is defined as a positive integer number and there is no reason to define it otherwise. On the other hand, the atomic number Z can be defined as an integer number if antimatter is also considered, or as a non-negative integer when applicable only to ordinary matter.
Considering neutron as a noble gas like the others simplifies certain descriptions by eliminating special cases that must be considered separately.
The noble gases can usually be ignored in chemistry, because they typically do not participate in chemical reactions, but in nuclear reactions there is nothing special about them, so the noble gases, including the neutron, participate in nuclear reactions like any other elements.
perilunar 3 days ago [-]
Bug report: in Safari (28.3.1 on macOS Tahoe 26.3.1) the electrons in the configuration pane are orbiting off-centre. Ok in Firefox and Chrome.
Also, i think in the timeline you should show a summary of the discovery on hovering over the element, so you don't have to click then go back.
Otherwise — nice!
nadermx 2 days ago [-]
Fixed the Safari bug, replaced CSS transform-origin (broken in Safari on SVG) with native SVG animateTransform which works everywhere.
Also, you can now drag the "Year" slider on the main table to see how the periodic table looked at any point in history. Undiscovered elements fade to near-invisible. Ancient elements (no known discovery date) stay visible.
heckelson 3 days ago [-]
2 Criticisms:
- On mobile, it's quite hard to hit the X to close an element description. With my specific screen size, I always end up opening Darmstadtium.
- The Element quiz hints consistently give away the answer in the penultimate or final clue.
Other than that, fun project! Thanks for sharing
nadermx 2 days ago [-]
Made the moible X 36px now, so easier to close. And removed uses and fun fact clues that gave away answers, replaced with density, melting point, electronegativity, and group number
amadeuspagel 3 days ago [-]
Beautiful. Another approach to visualizing the discovery of elements would be a "time travel" feature, where you see a timeline with just years below the table and can click on a year to see how the table looked that year.
nadermx 2 days ago [-]
added
p-a_58213 3 days ago [-]
I can indeed see some UI patterns that are indicative of vibe coding. So what?
Did something like this exist before, with the same level of interactivity?
I certainly had not come across it. Should Show HN be exclusive to hand-crafted code that demonstrate software mastery? Where things are going, that would be a slippery slope.
I think we should be celebrating what is possible using this new generation of tools, and how the reduced barrier to entry will result in more creativity and experimentation. As for those who are asking for AI use disclosure, why stop there? Why not also ask for disclosure of the use of any libraries or templates that made implementing it a bit easier?
I would also like to add a personal perspective. Each academic and teacher has their own take on things, their own narrative which distinguishes them from the rest. And in most cases, this unique perspective has so far been expressed through a combination of spoken words, handouts, and slides.
Yet, when it came to interactive demonstrations and digital tools, we were at the mercy of wildly overpriced SaaS products, or dependent on TAs to implement some version of our vision. The homebrewed teaching aid that conveyed concepts exactly the way we wanted was simply out of reach, unless we were prepared to dedicate months of work, at the expense of other commitments.
This is no longer the case.
perilunar 3 days ago [-]
> Did something like this exist before, with the same level of interactivity?
Yes, many of them. There have been online interactive tables of the elements since the early days of the web, and even before that they were available on DVD-ROM encyclopedias — I think Encarta had one.
whackernews 3 days ago [-]
You’re kind of talking to a straw man here. I didn’t read anything against the use of AI, just that they’d rather not spend time reviewing AI code. This is reasonable not to want to spend time reviewing something the author hasn’t spent that much time on. Maybe the preference would be to review AI code with AI, but we need to know in order to make that choice.
p-a_58213 2 days ago [-]
I take your point, although this was not a post about a repository, but rather for an educational website (without any link to the code provided anywhere from what I can see).
Where did you get the information in the table? I’m aware there are many open sources, I’m asking where you copied from.
camillomiller 3 days ago [-]
Where *ClaudeCode copied from
gitowiec 3 days ago [-]
Stupid bug on Android Firefox. Scrolling to the side opens description
nadermx 2 days ago [-]
Fixed, scrolling no longer triggers tooltips
dddgghhbbfblk 3 days ago [-]
The tap interaction is a bit janky on mobile.
nadermx 3 days ago [-]
thanks, fixed, first tap now shows the popup, second tap goes to the full page.
dzhiurgis 3 days ago [-]
Tooltip positioning is poor. Also colours are hard to distinguish and layout of table could be better in mobile.
nadermx 3 days ago [-]
okay, tried a few more things, lmk
marak830 2 days ago [-]
Oh perfect timing, my son was asking me what that table was when we saw it in a show the other day. Thanks :D
zarzavat 3 days ago [-]
Every Show HN should come with an AI disclosure detailing exactly how much AI was used to create it. It's not that using AI is bad per se, but I don't want to be a human critiquing an AI's work, it's hard to respond if I don't know who/what built it.
tomhow 3 days ago [-]
We're considering how to improve the way Show HNs are evaluated and presented.
Lately we've had to think deeply about exactly what has changed about Show HNs in the era of AI-generated code, and one way of thinking about it is that code-generation has basically eaten everything that used to be interesting about most Show HN posts. I.e.: What were the obstacles to making it work? What approaches did you try that didn't work? What was the breakthrough that made it work? What do you learn?
So, we need a new way of evaluating the ways in which a project may be interesting to the HN audience, and in the way project creators convey that in their post. It will take time for new conventions to emerge, but we're doing what we can to help find them.
For now, please don't post comments like this. It arguably counts as snark, a swipe, curmudgeonliness, a generic tangent, or other breaches of the guidelines: https://news.ycombinator.com/newsguidelines.html.
If you think something is unfit for HN, please email us (hn@ycombinator.com) and we'll take a look.
zarzavat 3 days ago [-]
I didn't intend it as a swipe, more as an invitation for the creator to write a comment explaining the development process.
I have no problem with people using AI to make things, even for a Show HN. I myself use AI as does I assume almost everyone on HN nowadays.
I do have a problem with if something was made entirely with AI and the OP didn't disclose that fact. I'm not saying that this OP did that, but if they don't say either way then all I can do is make my best guess, which could be wrong.
IMO it would be useful if the description on Show HN was made mandatory so that creators can introduce their projects. The days when you can just let your work speak for itself are long gone.
kevinbaiv 3 days ago [-]
[flagged]
3 days ago [-]
LVB 3 days ago [-]
It’s funny… my initial reaction to your comment was that it’s a bit persnickety to expect that. However, I’m coming around to agreeing. I recently spent a non-trivial amount of time responding to a PR into one of my projects. I did have a sense it was mostly AI, but the changes were reasonable with a bit of adjustment. Wrote some feedback and guidance for the first time contributor and bam, they closed the PR, haven’t heard back.
aeternum 3 days ago [-]
Every Show HN should come with a disclosure detailing exactly how much compiler was used to create it.
I mean it's not that using compilers is bad, it's just that those who use them aren't real coders.
drawfloat 3 days ago [-]
Nobody said anything about “real coders”.
But yes, people generally do not review and comment on compiled code. If your source is written by AI, why is it a surprise people might be hesitant to spend their time reviewing what it produced?
whackernews 3 days ago [-]
You had to change the end because following it through actually made total sense. You kinda pulled a trick, no doubt to convince yourself if I’m being fair to you.
aeternum 2 days ago [-]
It actually would have been better if I kept the end. You don't write your code, a compiler does.
You simply described what you wanted in more abstract far less specific language.
Before we were at least 2 compilation/translation steps removed from machine code, now we are 3.
cronelius 3 days ago [-]
false equivalence
camillomiller 3 days ago [-]
you’re dialectically better than this.
minsung0830 3 days ago [-]
[flagged]
Rendered at 02:19:50 GMT+0000 (UTC) with Wasmer Edge.
Only pointing this out because it is not quite a reference source, yet [1].
—Electrician, former chemist
[1] I'll cite Wikipedia, below (the irony) #ElderMillenial
Thanks for responding well — a neat tool.
As second suggestion: this probably looks great on a cell phone, but on a 50" display you've got tons more space for additional elemental facts/tidbits. Perhaps detect monitor size, then keep simple for phones?
This could additional put the lanthomides into their correct placement (if window widened enough) [0].
[0] <https://xkcd.com/2913/>
[•] <https://i.imgur.com/aAnz6w1.png>
Wasn't so cluttered before — the elements were squares (not tallcats). Silver's typo remains.
Much prettier. Could easily have larger pop-ups (entire point is to get information on elements, no?) <https://i.imgur.com/IVx5MY5.png>
Heck, even have a link to Wikipedia articles (why not?). You're obviously in the enjoyment of information sharing =D
You also have plenty of space for an example element (e.g. describe what each line represents e.g.g: density, atomic mass, proton/element #). The map's "key" if you will... not everybody knows these standardized chemnerd properties (you can then also remove the 120+ "RT" by simply placing in example element @STP, with a link to what that means, too).
Just feedback from a fellow dork am.chem.
To streamline the UI, might I suggest replacing example element (copper) with just the explainers, next to hydrogen [2]... using that elements information (without adding a free-floating copper).
If that doesn't make sense, let me know.
Thanks for being a responsive educator.
[2] perhaps use Beryllium for your example/explainer -- because then you can explain the electron orbitals too ..?
----
Replace the topbar (color==atomic class) location to between Group II & III elements (e.g. whitespace between Be B); does not need to be explained on example element text.
Because of this, all published periodic tables are missing 1 chemical element.
Ignoring the artificial oganessian (of which it is not possible to make more than a few atoms that decay instantly), the column of the noble gases must have 7 noble gases that are encountered in nature: neutron (Z=0), helium (Z=2), neon (Z=10), argon (Z=18), krypton (Z=36), xenon (Z=54) and radon (Z=86).
Of these 7, the first and the last, i.e. neutron and radon are unstable and decay quickly, while the other 5 are stable.
Neutron does not enter in chemical combinations, but the same is true for the other light noble gases, helium and neon, so this does not make it distinct from the other chemical elements. Like also technetium and promethium, neutron is a chemical element that does not have any beta-stable isotope (because the beta-stable isobar with A=1 has Z=1, i.e. it is an isotope of hydrogen).
When adopting zero in that way, to be consistent you’d also have to consider “nothing” to be an isotope of neutron.
But the real answer is that chemical elements imply atoms, and atoms imply the combination of a nucleus and bound electrons. The neutron is considered a subatomic particle.
The same is true for hydrogen ionized once, helium ionized twice, lithium ionized thrice, and so on. From the point of view of chemistry, a neutron is not more subatomic than a hydrogen nucleus or any other nucleus. There is indeed a difference between the nuclei with A = 1 and the nuclei with A > 1, because the latter can be decomposed into the former at high enough temperatures, of a few tens of MeV, similarly to the decomposition of any multi-atomic molecule at high enough temperatures.
"Nothing" is not an isotope of neutron, for the same reason why it is not an isotope of sulfur or of iron, i.e. the mass number A is defined as a positive integer number and there is no reason to define it otherwise. On the other hand, the atomic number Z can be defined as an integer number if antimatter is also considered, or as a non-negative integer when applicable only to ordinary matter.
Considering neutron as a noble gas like the others simplifies certain descriptions by eliminating special cases that must be considered separately.
The noble gases can usually be ignored in chemistry, because they typically do not participate in chemical reactions, but in nuclear reactions there is nothing special about them, so the noble gases, including the neutron, participate in nuclear reactions like any other elements.
Also, i think in the timeline you should show a summary of the discovery on hovering over the element, so you don't have to click then go back.
Otherwise — nice!
Also, you can now drag the "Year" slider on the main table to see how the periodic table looked at any point in history. Undiscovered elements fade to near-invisible. Ancient elements (no known discovery date) stay visible.
- On mobile, it's quite hard to hit the X to close an element description. With my specific screen size, I always end up opening Darmstadtium.
- The Element quiz hints consistently give away the answer in the penultimate or final clue.
Other than that, fun project! Thanks for sharing
Did something like this exist before, with the same level of interactivity? I certainly had not come across it. Should Show HN be exclusive to hand-crafted code that demonstrate software mastery? Where things are going, that would be a slippery slope.
I think we should be celebrating what is possible using this new generation of tools, and how the reduced barrier to entry will result in more creativity and experimentation. As for those who are asking for AI use disclosure, why stop there? Why not also ask for disclosure of the use of any libraries or templates that made implementing it a bit easier?
I would also like to add a personal perspective. Each academic and teacher has their own take on things, their own narrative which distinguishes them from the rest. And in most cases, this unique perspective has so far been expressed through a combination of spoken words, handouts, and slides.
Yet, when it came to interactive demonstrations and digital tools, we were at the mercy of wildly overpriced SaaS products, or dependent on TAs to implement some version of our vision. The homebrewed teaching aid that conveyed concepts exactly the way we wanted was simply out of reach, unless we were prepared to dedicate months of work, at the expense of other commitments.
This is no longer the case.
Yes, many of them. There have been online interactive tables of the elements since the early days of the web, and even before that they were available on DVD-ROM encyclopedias — I think Encarta had one.
https://railsback.org/PT.html#Popups
Lately we've had to think deeply about exactly what has changed about Show HNs in the era of AI-generated code, and one way of thinking about it is that code-generation has basically eaten everything that used to be interesting about most Show HN posts. I.e.: What were the obstacles to making it work? What approaches did you try that didn't work? What was the breakthrough that made it work? What do you learn?
So, we need a new way of evaluating the ways in which a project may be interesting to the HN audience, and in the way project creators convey that in their post. It will take time for new conventions to emerge, but we're doing what we can to help find them.
For now, please don't post comments like this. It arguably counts as snark, a swipe, curmudgeonliness, a generic tangent, or other breaches of the guidelines: https://news.ycombinator.com/newsguidelines.html.
If you think something is unfit for HN, please email us (hn@ycombinator.com) and we'll take a look.
I have no problem with people using AI to make things, even for a Show HN. I myself use AI as does I assume almost everyone on HN nowadays.
I do have a problem with if something was made entirely with AI and the OP didn't disclose that fact. I'm not saying that this OP did that, but if they don't say either way then all I can do is make my best guess, which could be wrong.
IMO it would be useful if the description on Show HN was made mandatory so that creators can introduce their projects. The days when you can just let your work speak for itself are long gone.
I mean it's not that using compilers is bad, it's just that those who use them aren't real coders.
But yes, people generally do not review and comment on compiled code. If your source is written by AI, why is it a surprise people might be hesitant to spend their time reviewing what it produced?
You simply described what you wanted in more abstract far less specific language.
Before we were at least 2 compilation/translation steps removed from machine code, now we are 3.