DEV Community

Cover image for Mac OS for the Web!

Mac OS for the Web!

Muhammad Mahdi on November 14, 2021

Mac OS emulator on the Web Hi, I want to introduce my project, which I call Mac OS emulator on the Web. We have programs like Notes, Calculator, T...
Collapse
 
blackr1234 profile image
blackr1234

One quick question. As there are only two apps available at the moment, I tested the Calculator app with 0.1+0.2 and I got 0.300...004, a common result we get in some programming languages. Just want to know how (and the best way) can we solve this issue when implementing a calculator app ourselves.

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Hi,
This is a good point that I did not pay attention to it before.
When I saw your opinion, I first went to find out how this happens, which was interesting to me.

Then I thought to your question, how can we solve this issue?
At first, I thought we could round the number, but when I used the round method in JS, the result was zero! Then I searched it and realized that we can use the toFixed() method in JavaScript, when we put the digit on 1, the result is 0.3!

I want to know what is your answer to this question and is my answer correct?

Thank you very much for your excellent comment :)

Collapse
 
blackr1234 profile image
blackr1234 • Edited

Yes, toFixed() is the JS way to round a Number and obtain a string. It will work if we know the number of fraction digits. If we divide numbers like 1/3, toFixed(1) will result in an answer 0.3 with a huge deviation compared to something like 0.333333.
Actually I am also looking for a good answer to this question. But I do have a workaround: to use toLocaleString with an en_US locale and maximumFractionDigits specified as 16 or less.

Thread Thread
 
mohammad_mahdi profile image
Muhammad Mahdi

That's right,
it's a great idea to use toLocaleStringwith an en_US locale and maximumFractionDigits specified as 16 or less. 👍

Collapse
 
blackr1234 profile image
Info Comment hidden by post author - thread only accessible via permalink
blackr1234

Btw, awesome work. It really feels like macOS and is also running fast!
I've seen a Windows 10 web app here in dev.to before but it was a bit laggy.
When you are 24, you will probably be working at Apple.

Btw, I just checked your GitHub repo, and immediately I have two things in my mind.

  1. Why are there private and public keys in the repo source?
  2. I thought you did this by using React or some other modern development framework/library but you did this all by vanilla HTML, JS and some jQuery for dragging support. You must have a deep understanding on how website works.
 
mohammad_mahdi profile image
Info Comment hidden by post author - thread only accessible via permalink
Muhammad Mahdi • Edited

Thanks :)

  1. For your first question, I had the mistake of adding my github's account private key to the repository source.
    now I remove them all.

  2. I'm glad about that :)
    I had no idea what vanilla meant 😅(of course, now I know).

 
nicolasdanelon profile image
Info Comment hidden by post author - thread only accessible via permalink
Nicolás Danelón

you are 14? really?
btw, be careful on how you remove those private keys. one commit removing the files is not enough

 
Sloan, the sloth mascot
Comment deleted
 
enter801 profile image
Info Comment hidden by post author - thread only accessible via permalink
Schlick Jones

Just change the keys if you've exposed a private key. As a general rule, never commit a private key on a public repository and really it's best to not ever and use something more secure like Hashicorp Vault or AWS's tools for secrets.

 
blackr1234 profile image
Info Comment hidden by post author - thread only accessible via permalink
blackr1234

To OP: See this for GitHub's official guide about removing sensitive data: docs.github.com/en/authentication/...

Collapse
 
altan4444 profile image
Info Comment hidden by post author - thread only accessible via permalink
asoran

"I had the mistake of adding my github's account private key to the repository source. now I remove them all."

I don't know why I can't press "reply" on your answer, but here:
Well you deleted them, but they are still in the git commit history se we can still see them, so either:

  • Remove your repo and make a new one with commits from scratch (new initial commit)
  • Revert all the commits up to here github.com/mhmdmhd6/Mac-OS-Desktop... (where you added the public/private keys and push -force back the repo)

I don't know git enough on the security parts, but if you don't want people to do bad things with your keys, invalidate them and generate them again (Idk how, sorry). :)

Collapse
 
lod61 profile image
louis

Hi, Try this.

parseFloat((0.1 + 0.2).toFixed(10))
Enter fullscreen mode Exit fullscreen mode
Collapse
 
blackr1234 profile image
blackr1234

This works too!

Collapse
 
23n6 profile image
23n6

You should use bigNumber to fix it. (Mathjs, Bignumberjs). This is my example: github.com/nguyenvannghi/calc-reac...

Collapse
 
harrify profile image
Harry Tom

Changing the top-menu font will make it more realistic!

Collapse
 
ansub profile image
Ansub Khan

this is amazing, however i will recommend you to show the menu list when it is clicked instead of on focus.

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thank you
but I don't understand what do you mean
can you please explain more?

Collapse
 
ansub profile image
Ansub Khan

i am saying that when i hover on "file" top the top left, it shows the dropdown menu, it should be visible on click action not hover action

Thread Thread
 
mohammad_mahdi profile image
Muhammad Mahdi

Ok I got it
Thank you for the explanation💚

Thread Thread
 
ansub profile image
Ansub Khan

anytime brother, you are doing a amazing work! i have followed you and will be looking for the future blogs!

Thread Thread
 
mohammad_mahdi profile image
Muhammad Mahdi

Thank you so much bro :))

Collapse
 
oshadaera68 profile image
Oshada Eranga

very good work....I was experienced for using the MacOS...Thank you

Collapse
 
laputafish profile image
laputafish

Good job. Impressive and appreciated.
It is not a difficult project but not easy for your such age. I was only learning AppleSoft Basic (maybe you don't know it) at your age. jQuery is good for beginner. It was also my first library to start web programming. Next step, you can try one of popular frameworks, Angular, React, Vue.js, etc. They are so interesting and funny to play. You will love it.

Collapse
 
sachindas246 profile image
SachinDas246

Coool ❤️

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thank you

Collapse
 
g0d profile image
George Delaportas (ViR4X)

Hi!

Very good work for fun...

If you really want to realize your project maybe you should base it on GreyOS. It is an open source Meta-OS (nothing related to metaverse, facebook, etc.). I have been developing this since 2013.

I am a professional enterprise architect and I'd love to help you Muhammad.

Please check the github.com/g0d/GreyOS for details and let's make something beautiful :-)

Collapse
 
phuonganhniie profile image
Minerva Do • Edited

This is amazing not only you're just 14 but also you're using only Js not modern framework for building this website.

Btw, there's a little bug in here, but keep going, you're really awesome.
dev-to-uploads.s3.amazonaws.com/up...

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thanks so much.
Yeah, I'll fix that bug in the next update.

Collapse
 
filliperomero profile image
Fillipe Romero

Congrats.
What I suggest to you is to check this repo: github.com/PuruVJ/macos-web
This guy already did the exact same thing but in Svelte with some improvements. So i think you can learn from it and also if you want, learn svelt!
The website that is hosted is: macos-preact.vercel.app/

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thank you.
yes, i knew about that :)

Collapse
 
mohammadraufzahed profile image
Mohammad Raufzahed

This was awesome, keep going.

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thank you so much
have a nice day :)

Collapse
 
destinyjunior profile image
Mint Coder

Nice one

Collapse
 
computergeek profile image
Amrut

haha, loved it . This was the first time I had any mac experience. thankyou 😀

Collapse
 
mrakcw profile image
MrakCw Dev

Amazing 🚀
💪

Collapse
 
0x61nas profile image
Anas

عاش

Collapse
 
0x61nas profile image
Anas

عااااااش جدا🖤
انا في سنة تانية في حاسبات ومعلومات ولسة م وصلتش لمستواك😂😂❤

Collapse
 
kamaroly profile image
Kamaro Lambert

I am here to say that this is impressing! I wonder what you will be able to do after 10 years in computer science. Keep up the good work.

Collapse
 
ankitbeniwal profile image
Ankit Beniwal

Although Keyboard shortcuts aren't working but 3-finger drag worked like a charm. It's awesome.

Collapse
 
yhoung24909577 profile image
obiabo Immanuel

wow this is really awesome

Collapse
 
pulkit39 profile image
Pulkit Sharma

Well, Thats really good and i appreciate this

Collapse
 
sulmanweb profile image
Sulman Baig

Great Effort for 14 years old. I am 32 years old. I don't think I can make make this. Kudos to you great effort :-)

Collapse
 
steinbring profile image
Joe Steinbring

That's pretty cool. There is definitely stuff left to do but I really like it. :)

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi • Edited

Thanks :)
I will try to make it better.

Collapse
 
fisforfaheem profile image
Faheem Ahmad

Please make it more powerful enough and add more features in the coming times, also make it more personal and easier so that we can log on from anywhere and have everything saved

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thank you very much for your ideas
I try my best to add these features to my project :)

Collapse
 
rhytham profile image
Rhytham

Hey, Very Good Work!

Collapse
 
mojo2012 profile image
Matti

Cool stuff man, keep up the good work

Collapse
 
enter801 profile image
Schlick Jones

Good job Muhammad! It's so great that you are getting into this at such a young age! You are on your way to a bright future and an inspiration to kids of all ages.

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thanks.

Collapse
 
casafurix profile image
Agnibha Sarkar

wow! how long did it take to make this! and also did you use some framework?

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

It took time because I was learning during the coding and no I didn't use frameworks just a bit of jQuery.

Collapse
 
hyggedev profile image
Chris Hansen

It's sooo good! LOL, great job 💯

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thanks.

Collapse
 
demiahmed profile image
demiahmed

This is really impressive!

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thanks :)

Collapse
 
jagerbom profile image
Zachary Truong

This is AMAZING...

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thank you

Collapse
 
rehman0 profile image
Abdul Rehman

Wow such a nice website you have created

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thank you my friend :)

Collapse
 
sakko profile image
SaKKo

Awesome!!!!

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thank you

Collapse
 
dilutewater profile image
Rachit Khurana

This is incredible.

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

thank you so much :)

Collapse
 
pratham_161 profile image
Prathamesh tanksale

Dammm you are aewsome

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thank you

Collapse
 
ofrepose profile image
Ofrepose

This is very impressive! Keep going, you have a bright future ahead of you!

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thanks :)

Collapse
 
dansonserge profile image
dansonserge

Keep up the spirit bro

Collapse
 
dgtofficial profile image
DarkBat Gaming™

Amazing man, good job 👍

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thanks :)

Collapse
 
ryanroybal profile image
RyanRoybal

This is best helpful information keep it up bit.ly/3nosoxR

Collapse
 
exm profile image
Mokhtar ExM

Maan, this is awesome 🔥🤙

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thanks.

Collapse
 
tanishqsinghanand profile image
Tanishq Singh Anand

Coool
really liked it 🔥🔥🔥

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thanks :)

Collapse
 
hanfx profile image
Achmad Farhan

wow! such fast learning!

Collapse
 
ultimategemini profile image
NF

Very good!

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thanks!

Collapse
 
keen_code profile image
Vladimir Popovic

There are two 14yo boys here on DEV. One is making MacOS on the web, the other one Windows on the web.
dev.to/abdulrrehman0/windows-12-bu...

What is going on?

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thanks.

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thank you so much.
yeah, I tried to start from scratch to learn better.

Collapse
 
xiao_yintan_b00e5d5b85cb profile image
Xiao yin Tan

Can you teach me how to do it?

Collapse
 
taosif7 profile image
Taosif Jamal

Awesome! you can call it moc emulator, since its a mock of mac 😜

Collapse
 
mohammad_mahdi profile image
Muhammad Mahdi

Thank you!!

Some comments have been hidden by the post's author - find out more