Periodic Table - Periotable

[cobalt fern]

I created a website called pt-temp, I can't figure a nice name, and pt.vercel.app domain was taken. I know there are a lot of periodic table website made. But this is my take on how I wanted it to look like, major credit to evrimagaci for creating periodum, as most of my website data is scraped from it. Any feedbacks are welcome!

Tech stack - Nextjs, Typescript, MUI Joy

Github link available here https://github.com/GervinFung/the-periodic-table

Update: the link has changed to periotable

[chrome bridge]

Amazing!

[chrome bridge]

Just curious, are you a chemistry student?

[cobalt fern]

Hi, no I am not a chemistry student, I am a software engineer 😄

[tame hamlet]

Im sorry but the deployment link is not found

[calm valley]

Its now periotable

@cobalt fern You should update the original message to include the new link.

Also the atomic numbers seem to be broken on mobile and show just 0.

[cobalt fern]

oh hey im sorry, it now at periotable

[cobalt fern]

can u screenshot and show it to me? Thank you!

Periodic Table - Periotable

[cobalt fern]

right, thank you!

[cobalt fern]

@calm valley it's fixed, thank you for spotting that

really appreciate it

[tame hamlet]

Okay

this is really nice

[green badger]

this looks nice and cool, id suggest when you hover on any element, it changes the big example to that

ok.... your 404 page is just to good of animation https://periotable.vercel.app/elements/no

[tame hamlet]

i want to say that the detail page can do a bit work by using columns or something

but then again you already do all the work such as scraping the data and such

[tame hamlet]

yeah this is dope

[cobalt fern]

hi, thank you for your feedback! I'm wondering what do u meant by when you hover on any element, it changes the big example to that? Perhaps, u can give me an example?

[cobalt fern]

by using columnds or something, can you tell me more on that?

[tame hamlet]

like this my friend, half of the screen is wasted space

you could just make it into 3 columns

but nonetheless its still impressive work

[cobalt fern]

I got what you mean

not a bad idea

[tame hamlet]

@cobalt fern can i have your twitter?

[cobalt fern]

oh i dont have twitter

[cobalt fern]

Dont think it's nicer, but maybe the gap is too big

[tame hamlet]

no its already 300% better

the fact that i dont need to scroll that far to see all information

is already hugeee improvement

[calm valley]

It definitely is better tbh. I guess the thing you might not be liking is the interactive and static model's box sizes being different

If you really wanted to, you could complicate things a bit and add a tab component so you can switch between static and interactive views. However i think this version looks good enough

[cobalt fern]

@calm valley @tame hamlet , thank you for the feedback, but I need time to think of a better way to align those information horizontally, in the meantime, I've added spectrum image

[tame hamlet]

nooooo why is it back to 1 column 😭

[cobalt fern]

cos I'm unsure of they layout I think it's best to present information with multiple columns

but I'm sure I wanna have spectrum image

and im definitely trying to think of the layout

[tame hamlet]

finding the best will take a very long time. making it better is something you can do at the moment

[cobalt fern]

due to "too many request" issue, I can't deploy the latest version

but these are the new design for element page, the best I could think of in a short period of time, without adding other styles

1. mobile

2. desktop

3. tablet

the reason I used 3 columns in desktop is to reduce the number of characters to read per row, thus adding more gap between columnds, making it easier to read especially in dark theme

[tame hamlet]

yes thats nicer

now in the mean time you can think of the perfect way to convey information haha

[tiny tide]

Nice work 🫡

[cobalt fern]

I published it! Thank you everyone for ur feedback

[cobalt fern]

Thanks man

[cobalt fern]

would this be nicer if the color is based on subshell (block) selection

rather than defaulting to original color

[tame hamlet]

for selection i think thats too bright

id rather choose the latter

but make the bg less bright since its in dark mode

[bleak pebble]

So much information! I love it, two quick recommendations:

• Add smooth scroll in the Elements page, I thought I was jumping pages until I realized I was clicking a TOC.
• Use some kind of separator for each section, maybe adding background as blocks.
• Make sure the external links open in a separate tab/window so they don't take the user out of your page.

Congrats it looks amazing 🤩

[cobalt fern]

thank you, I'm considering the 1st suggestion. I dont understand the 2nd one, and yes I will open in separate tab, thank you for your suggestion

[cobalt fern]

i implemented 3rd suggestion. I am very used to right click a link and choose Open link in new tab, I forgot I should let the link to be opened in new tab

[cobalt fern]

I've created the desktop application for it https://github.com/GervinFung/periotable/releases

feel free to try it out

its's the same as web just port to desktop app

[quartz spindle]

Neptonium (Np) is falsely represented as atomic number 152 not 93 on the main page

[calm valley]

Not just that, the other elements also have the wrong atomic numbers

[cobalt fern]

okkkk

[cobalt fern]

oh, thank you for spoting that, didn't notice it

it's fixed, I'll publish this evening - just came back from hiking, super tired

[cobalt fern]

hey, fixed and deploy on web and desktop

thank you guys for the feedbacks

[cobalt fern]

hey guys i'll deploy new fix in 8 hours 🗿

[lone acorn]

Hi there, can you tell me which text-editor you are using?

[cobalt fern]

neovim

[cobalt fern]

rate this flag set up

if it's not flag, it's USSR/USA

[calm valley]

Ngl, i would prefer just writing the name.

Playing geoguesser isnt my strong suite

[daring viper]

Looks super good! Really well done. Why you choose Tauri to build desktop apps? And for mobile part its Capacitor? Thanks for details 😉

[cobalt fern]

tauri because I dont need to use electron, and I've built the website, so instead of writing same code, same design/functionalities again for each native platform. I would just need to connect the native platform to JavaScript, for mobile it's Capacitor, otherwise, I would need to rewrite in say, react native or flutter etc..

[cobalt fern]

nah u guys gonna geoguesser

the icons are shrinked and have border radius

definitely looks nicer

[quartz spindle]

Just add a title="United States of America" to the img tag so you can hover the flags atleast

[mossy horizon]

I was building the same app😠

looking good

maybe make the elements name on the home 2px bigger

it shouldn't overflow

[tame hamlet]

whats wrong with building another one

[mossy horizon]

really nothing

i just feel weird about not being unique in the apps i make

[tame hamlet]

you can improve on existing solution then it would still be considered as unique/novel

[cobalt fern]

ok, good idea

[cobalt fern]

u r encouraged to build it

[mossy horizon]

Is yours static?

[cobalt fern]

yeah i pre-generated all the pages, so it's static

[mossy horizon]

Then apart from the design there's nothing that comes to my mind

I have other project ideas so that's not an issue

[tame hamlet]

have you added view transition API 👀

search

[cobalt fern]

no

i know what that is, but i didnt use that

[cobalt fern]

if u hover over it