Muhammad Mahdi

Posted on Nov 14, 2021

Mac OS for the Web!

#webdev #opensource #beginners #javascript

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, Terminal, VScode, and other apps and features on this website.

You can try it now!

I wrote this project by HTML, CSS, and JS.

I think if something does not start well, it may end well when you do your best. This project was something like that, it didn't start well, and it was simple, but when I continued on my way and didn't break the chain, I saw the fantastic progress.

This website has PWA (Progressive Web Apps), which with this feature we can install it on any operating system such as Windows, Mac OS, GNU/ Linux, and we can also use it offline :)

about me:
I'm a 14 years old boy 👦
I'm interested in things related to computers and science.
I started my journey as a web developer in October 2020 and started learning web development from Documents, Udemy and Youtube.
I have been working on this project for about six months, and during this project, I learned many essential topics in programming.

This emulator is an open-source project on Github.
I would like to introduce this project and connect with the developers' communities.
I will be very happy if you comment on this post or help me improve this project on Github.

My Github Page: https://github.com/mhmdmhd6/Mac-OS-Desktop

This Website's link: https://mhmdmhd6.github.io/Mac-OS-Desktop/

Your Support in improving this project is a source of motivation for me.

Thank You.

Oldest comments (84)

Rachit Khurana • Nov 15 '21

This is incredible.

Muhammad Mahdi • Nov 15 '21

thank you so much :)

Prathamesh tanksale • Nov 15 '21

Dammm you are aewsome

Muhammad Mahdi • Nov 15 '21

Thank you

SaKKo • Nov 15 '21

Awesome!!!!

Muhammad Mahdi • Nov 15 '21

Thank you

SachinDas246 • Nov 15 '21

Coool ❤️

Muhammad Mahdi • Nov 15 '21

Thank you

Mohammad Raufzahed • Nov 15 '21

This was awesome, keep going.

Muhammad Mahdi • Nov 15 '21

Thank you so much
have a nice day :)

Ansub Khan • Nov 15 '21

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

Muhammad Mahdi • Nov 15 '21

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

Ansub Khan • Nov 15 '21

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

Muhammad Mahdi • Nov 15 '21

Ok I got it
Thank you for the explanation💚

Ansub Khan • Nov 15 '21

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

Muhammad Mahdi • Nov 15 '21

Thank you so much bro :))

Rehman • Nov 15 '21

Wow such a nice website you have created

Muhammad Mahdi • Nov 15 '21

Thank you my friend :)

Zachary Truong • Nov 15 '21

This is AMAZING...

Muhammad Mahdi • Nov 15 '21

Thank you

blackr1234 • Nov 16 '21

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.

Muhammad Mahdi • Nov 16 '21

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 :)

blackr1234 • Nov 16 '21 • 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.

Muhammad Mahdi • Nov 16 '21

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

Comment hidden by post author - thread only accessible via permalink

blackr1234 • Nov 16 '21

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.

Why are there private and public keys in the repo source?
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.

Comment hidden by post author - thread only accessible via permalink

Muhammad Mahdi • Nov 16 '21 • Edited

Thanks :)

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.
I'm glad about that :)
I had no idea what vanilla meant 😅(of course, now I know).

Comment hidden by post author - thread only accessible via permalink

Nicolás Danelón • Nov 16 '21

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

Comment deleted

Comment hidden by post author - thread only accessible via permalink

Schlick Jones • Nov 16 '21

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.

Comment hidden by post author - thread only accessible via permalink

blackr1234 • Nov 16 '21

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

Comment hidden by post author - thread only accessible via permalink

asoran • Nov 17 '21

"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). :)