12 ms·

macOS in Svelte

309 points by hidden-spyder 5y ago

vzaliva 5y ago
Apple lawyers are probably already at work drafting cease and decist letter to the author :)
- puruvj 5y ago
  hehe this project's been on since November. I don't think they'll sue me anytime :) (PS. Project author here :) )
EugeneOZ 5y ago
Can only launch an “app” there but it doesn't react to taps.
- arvindamirtaa 5y ago
  Hahaha
- vezycash 5y ago
  Try the VScode icon
- puruvj 5y ago
  Yup!! It's not functional, and probably won't be. It's just meant to be looked at :)
viztor 5y ago
<del>It's a copycat of another's work in a different framework. Please do proper attribution.</del>
- FractalHQ 5y ago
  This is actually the same author of the famous MacOS in React. He’s a legend, and has been very active in the Svelte community / discord lately!
  - viztor 5y ago
    I might be confusing https://news.ycombinator.com/item?id=27084995 https://news.ycombinator.com/item?id=27084995 with this. You're right, I did see both versions (in terms of design) in the past.
  - giansegato 5y ago
    Where can I find the Svelte discord you're mentioning?
    - sidharthv 5y ago
      Taken from their homepage: https://svelte.dev/chat https://svelte.dev/chat
  - puruvj 5y ago
    Whoa!!! Thanks buddy! Legend might be a bit too much though
tarkin2 5y ago
Unrealistic. The UI is faster than my mac's.
- jfmc 5y ago
  I guess that it is fast because modern browsers are fast, implement good algorithms to repaint just what need to be repainted, and delegate a lot of work to the GPU. Exactly like the Quartz compositor engine.
  - jbverschoor 5y ago
    But he said "Faster". Not "Fast"
    - vbezhenar 5y ago
      Animation speed is just an arbitrary constant.
      - moistbar 5y ago
        Except when the system can't handle the animations and they get jerky.
  - PaulHoule 5y ago
    Also the real computer has to think about it more. (E.g. initialize whatever services the applications uses, be concerned about the data structures the applications mirror.). The demo just has to look right on initial inspection.
- lower 5y ago
  This reminds me of an old story about the original development of OS X Aqua in the 90s. At the time they were doing functioning mockups for the Aqua design in Macromedia Director. It was not easy to actually implement the UI with the available hardware, but the mockups showed that it was possible. "Mr. Ratzlaff frequently would remind Apple engineers that 'Macromedia can do it, so why can't you?'" Only source I can find is: https://www.macobserver.com/article/2006/03/15.9.shtml https://www.macobserver.com/article/2006/03/15.9.shtml > As it so happened, Mr. Ratzlaff and his team had already been working on a ground-up redesign of the operating system after they discovered that their original goal of porting the look-and-feel of Mac OS 8 completely to Mac OS X would be impossible. "We were only going to be able to get about 95% of the way there [putting the Mac OS 8 interface on Mac OS X], which is possibly the worst thing you could do," Mr. Ratzlaff said. The redesign had been scrubbed by higher-ups at Apple but was put back on track by Mr. Jobs. > With that, Mr. Ratzlaff and his team's list of requirements for the operating system, which had been called overly ambitious and led to laughter from engineers who heard of them only weeks prior, became mandatory. These included 32-bit color with alpha channels and QuickTime integration, all being able to run on a system with just a G3 processor and as a little as 8MB of video memory. Mocking up the operating system's design and functionality with Macromedia's Director, Mr. Ratzlaff frequently would remind Apple engineers that "Macromedia can do it, so why can't you?"
grawprog 5y ago
Gotta be honest, the last mac I ever used ran OS8 I think, maybe 9, it was one of the classic Mac os's either way. I know this is just a UI recreation and not the actual OS but as a long time KDE user, like over a decade, I can't help but think meh, why does this UI get so much praise? I can make my desktop look, act and behave literally any way I want, I can modify every single aspect of every single thing on my desktop to suit my work flows and everything I do on a computer exactly so my computer does exactly what I want, when I want, exactly how I want it to in the exact way I want things to be done. I haven't changed much over the years, i've copied my configs through every update, even brand new computers and everything always just works how I want it to. Why do people pay the premium for this UI Apple forces you to use?
- Klonoar 5y ago
  >Why do people pay the premium for this? Because... >I can make my desktop act and behave literally any way I want, I can modify every single aspect of every single thing on my desktop to suit my work flows and everything I do on a computer exactly so my computer does exactly what I want, when I want, exactly how I want it to in the exact way I want things to be done. I haven't changed much over the years, i've copied my configs through every update, even brand new computers and everything always just works how I want it to. Most people don't want to deal with this^.
  - grawprog 5y ago
    Deal with what? I selected some click and point options from a very clear and easy to read menu, downloaded some themes from a nice shiny, easy to use theme downloader, it took me all of a half hour to an hour or so to set things up about a decade ago and I have had to do a minimal amount of work since. Little tweaks,improvements here and there as I find better ways of doing things but otherwise, it was not much work at all. Install from a live CD...actual CD originally, USB these days, go to the options menu that has all the things, click some buttons and menus, drag some widgets around, browse through the shiny WM themes, download, install, done. If you can use a computer to do basic tasks, it's really not hard. If you can't navigate some menus that have confusing titles like, desktop settings and themes and display options and widgets and you can't click and drag things around, whatever OS you use will be a struggle.
rawoke083600 5y ago
Very very well done ! :) And I bet doing it in Svelte was a pleasant DX experience !
chrismorgan 5y ago
The use of backdrop-filter triggers a fascinating bug in Firefox if you have manually enabled it (about:config, layout.css.backdrop-filter.enabled = true): the menus have a `backdrop-filter: blur(25px)`, and when they’re closed, the menus are hidden with `visibility: hidden` (I can’t see any reason why `display: none` is not used, you should normally prefer it), and this triggers https://bugzilla.mozilla.org/show_bug.cgi?id=1600485 https://bugzilla.mozilla.org/show_bug.cgi?id=1600485, where the blurred backdrop still gets rendered, making the areas underneath those menus basically useless as they’re blurred beyond recognition.
- d_k_f 5y ago
  Without having opened the page: visibility can be animated using CSS transitions, so you can fade in/out the menus. Display doesn't work that way, so that's probably the reason.
  - chrismorgan 5y ago
    At present at least there is no CSS transition here (I checked before I first made my comment). You could also use a CSS animation (which can handle display), multi-stage transitions controlled in JavaScript, or Svelte’s own animation system.
Shadonototro 5y ago
beautiful, i always loved the feel of macOS, i heel at home, everything is easy to use, accessible and pleasant on the eyes
tqkxzugoaupvwqr 5y ago
It even has dark mode.
- puruvj 5y ago
  Project author here! I never do anything without themes :)
kachnuv_ocasek 5y ago
What fascinates me is that this was apparently written in just two days according to the commit log: https://github.com/PuruVJ/macos-web/commits/ https://github.com/PuruVJ/macos-web/commits/
- puruvj 5y ago
  Hehe don't let that fool you from the fact that it took me 6 months to get it in current state. Moving to Svelte was just copy pasting a lot and modification :)
- deleted 5y ago
  [deleted]
puruvj 5y ago
Project author here :) Can't express my gratitude enough for sharing this here. Thanks you!
- hidden-spyder 5y ago
  You're welcome! I loved your project and the fact that it's so responsive.
  - puruvj 5y ago
    Thank you
- etewiah 5y ago
  You rock dude!! I see you made some submissions that didn't get a lot of traction. HN sucks like that - sometimes you need someone else to give your project visibility. Hope you get some well deserved publicity now.
- arcturus17 5y ago
  This is dope, congrats. I've read in other comments that you also built this in React... I think people would kill to read a deep dive of the differences you've seen between both frameworks in the context of building this project. I'm a hardcore React user, and Svelte looks great, but what prevents me from adopting it is that I don't have enough info of what its limitations "at the edges" may be in a complex project (whereas I understand React very well in this sense). Barring a full-on technical blog post - which I think would get you a lot of exposure, but is too much to ask - if you could share some thoughts here I would really appreciate it.
  - kevinak 5y ago
    We're going to have him on Svelte Radio in a couple of weeks to talk about this! Stay tuned :)
  - puruvj 5y ago
    Started writing the blog post already
superplussed 5y ago
You are a beast. This is ridiculous and incredible!
birdyrooster 5y ago
I don't understand but I like it anyways.
- puruvj 5y ago
  Nothing to understand here. It's just to enjoy :)
legrande 5y ago
This is just like: https://www.windows93.net/ https://www.windows93.net/ And https://windows96.net/ https://windows96.net/
- puruvj 5y ago
  Inspired in the first place from https://winxp.vercel.app https://winxp.vercel.app
onnnon 5y ago
Update: Issue is fixed now, see author's comment below. -- The link goes to the wrong demo! "macOS in Svelte" is here: https://macos-svelte.vercel.app/ https://macos-svelte.vercel.app/ "macOS in Preact" is here: https://macos.vercel.app/ https://macos.vercel.app/
- puruvj 5y ago
  Hi! I reset the domains for preact one to be macos-preact.vercel.app. Svelte one is now macos.vercel.app, but macos-svelte.vercel.app will work too
laszlokorte 5y ago
Looks pretty neat but one thing immediatly noticed: When clicking in in the menu bar to open a menu (for example on the apple logo) and then moving the mouse down, but diagonally in a way that the cursor cross the next to the right menu item (eg finder): - in this demo the hover triggers the finder menu to open - on a real map the diagonal down movement prevents that and keeps the current menu open
simonw 5y ago
This has a ton of clever tricks in it. https://github.com/PuruVJ/macos-web/blob/main/src/components/apps/VSCode/VSCode.svelte https://github.com/PuruVJ/macos-web/blob/main/src/components... is the source code for the VSCode app - it actually works by adding an iframe around https://github1s.com/puruvj/macos-web https://github1s.com/puruvj/macos-web
- puruvj 5y ago
  Project author here :) Yup!! No way in world will I build whole VSCode like structure around the monaco editor, just way too much work (Or maybe....) * wink *
somenewaccount1 5y ago
did you also write DevUtils?
- puruvj 5y ago
  Nope, but returning favor to a friend by linking it here :)

macOS in Svelte

309 points by hidden-spyder 5y ago

vzaliva 5y ago

Apple lawyers are probably already at work drafting cease and decist letter to the author :)

puruvj 5y ago
hehe this project's been on since November. I don't think they'll sue me anytime :) (PS. Project author here :) )

EugeneOZ 5y ago

Can only launch an “app” there but it doesn't react to taps.

arvindamirtaa 5y ago
Hahaha
vezycash 5y ago
Try the VScode icon
puruvj 5y ago
Yup!! It's not functional, and probably won't be. It's just meant to be looked at :)

viztor 5y ago

<del>It's a copycat of another's work in a different framework. Please do proper attribution.</del>

FractalHQ 5y ago
This is actually the same author of the famous MacOS in React. He’s a legend, and has been very active in the Svelte community / discord lately!
- viztor 5y ago
  I might be confusing https://news.ycombinator.com/item?id=27084995 https://news.ycombinator.com/item?id=27084995 with this. You're right, I did see both versions (in terms of design) in the past.
- giansegato 5y ago
  Where can I find the Svelte discord you're mentioning?
  - sidharthv 5y ago
    Taken from their homepage: https://svelte.dev/chat https://svelte.dev/chat
- puruvj 5y ago
  Whoa!!! Thanks buddy! Legend might be a bit too much though

tarkin2 5y ago

Unrealistic. The UI is faster than my mac's.

jfmc 5y ago
I guess that it is fast because modern browsers are fast, implement good algorithms to repaint just what need to be repainted, and delegate a lot of work to the GPU. Exactly like the Quartz compositor engine.
- jbverschoor 5y ago
  But he said "Faster". Not "Fast"
  - vbezhenar 5y ago
    Animation speed is just an arbitrary constant.
    - moistbar 5y ago
      Except when the system can't handle the animations and they get jerky.
- PaulHoule 5y ago
  Also the real computer has to think about it more. (E.g. initialize whatever services the applications uses, be concerned about the data structures the applications mirror.). The demo just has to look right on initial inspection.
lower 5y ago
This reminds me of an old story about the original development of OS X Aqua in the 90s. At the time they were doing functioning mockups for the Aqua design in Macromedia Director. It was not easy to actually implement the UI with the available hardware, but the mockups showed that it was possible. "Mr. Ratzlaff frequently would remind Apple engineers that 'Macromedia can do it, so why can't you?'" Only source I can find is: https://www.macobserver.com/article/2006/03/15.9.shtml https://www.macobserver.com/article/2006/03/15.9.shtml > As it so happened, Mr. Ratzlaff and his team had already been working on a ground-up redesign of the operating system after they discovered that their original goal of porting the look-and-feel of Mac OS 8 completely to Mac OS X would be impossible. "We were only going to be able to get about 95% of the way there [putting the Mac OS 8 interface on Mac OS X], which is possibly the worst thing you could do," Mr. Ratzlaff said. The redesign had been scrubbed by higher-ups at Apple but was put back on track by Mr. Jobs. > With that, Mr. Ratzlaff and his team's list of requirements for the operating system, which had been called overly ambitious and led to laughter from engineers who heard of them only weeks prior, became mandatory. These included 32-bit color with alpha channels and QuickTime integration, all being able to run on a system with just a G3 processor and as a little as 8MB of video memory. Mocking up the operating system's design and functionality with Macromedia's Director, Mr. Ratzlaff frequently would remind Apple engineers that "Macromedia can do it, so why can't you?"

grawprog 5y ago

Gotta be honest, the last mac I ever used ran OS8 I think, maybe 9, it was one of the classic Mac os's either way. I know this is just a UI recreation and not the actual OS but as a long time KDE user, like over a decade, I can't help but think meh, why does this UI get so much praise? I can make my desktop look, act and behave literally any way I want, I can modify every single aspect of every single thing on my desktop to suit my work flows and everything I do on a computer exactly so my computer does exactly what I want, when I want, exactly how I want it to in the exact way I want things to be done. I haven't changed much over the years, i've copied my configs through every update, even brand new computers and everything always just works how I want it to. Why do people pay the premium for this UI Apple forces you to use?

Klonoar 5y ago
>Why do people pay the premium for this? Because... >I can make my desktop act and behave literally any way I want, I can modify every single aspect of every single thing on my desktop to suit my work flows and everything I do on a computer exactly so my computer does exactly what I want, when I want, exactly how I want it to in the exact way I want things to be done. I haven't changed much over the years, i've copied my configs through every update, even brand new computers and everything always just works how I want it to. Most people don't want to deal with this^.
- grawprog 5y ago
  Deal with what? I selected some click and point options from a very clear and easy to read menu, downloaded some themes from a nice shiny, easy to use theme downloader, it took me all of a half hour to an hour or so to set things up about a decade ago and I have had to do a minimal amount of work since. Little tweaks,improvements here and there as I find better ways of doing things but otherwise, it was not much work at all. Install from a live CD...actual CD originally, USB these days, go to the options menu that has all the things, click some buttons and menus, drag some widgets around, browse through the shiny WM themes, download, install, done. If you can use a computer to do basic tasks, it's really not hard. If you can't navigate some menus that have confusing titles like, desktop settings and themes and display options and widgets and you can't click and drag things around, whatever OS you use will be a struggle.

rawoke083600 5y ago

Very very well done ! :) And I bet doing it in Svelte was a pleasant DX experience !

chrismorgan 5y ago

The use of backdrop-filter triggers a fascinating bug in Firefox if you have manually enabled it (about:config, layout.css.backdrop-filter.enabled = true): the menus have a `backdrop-filter: blur(25px)`, and when they’re closed, the menus are hidden with `visibility: hidden` (I can’t see any reason why `display: none` is not used, you should normally prefer it), and this triggers https://bugzilla.mozilla.org/show_bug.cgi?id=1600485 https://bugzilla.mozilla.org/show_bug.cgi?id=1600485, where the blurred backdrop still gets rendered, making the areas underneath those menus basically useless as they’re blurred beyond recognition.

d_k_f 5y ago
Without having opened the page: visibility can be animated using CSS transitions, so you can fade in/out the menus. Display doesn't work that way, so that's probably the reason.
- chrismorgan 5y ago
  At present at least there is no CSS transition here (I checked before I first made my comment). You could also use a CSS animation (which can handle display), multi-stage transitions controlled in JavaScript, or Svelte’s own animation system.

Shadonototro 5y ago

beautiful, i always loved the feel of macOS, i heel at home, everything is easy to use, accessible and pleasant on the eyes

tqkxzugoaupvwqr 5y ago

It even has dark mode.

puruvj 5y ago
Project author here! I never do anything without themes :)

kachnuv_ocasek 5y ago

What fascinates me is that this was apparently written in just two days according to the commit log: https://github.com/PuruVJ/macos-web/commits/ https://github.com/PuruVJ/macos-web/commits/

puruvj 5y ago
Hehe don't let that fool you from the fact that it took me 6 months to get it in current state. Moving to Svelte was just copy pasting a lot and modification :)
deleted 5y ago
[deleted]

puruvj 5y ago

Project author here :) Can't express my gratitude enough for sharing this here. Thanks you!

hidden-spyder 5y ago
You're welcome! I loved your project and the fact that it's so responsive.
- puruvj 5y ago
  Thank you
etewiah 5y ago
You rock dude!! I see you made some submissions that didn't get a lot of traction. HN sucks like that - sometimes you need someone else to give your project visibility. Hope you get some well deserved publicity now.
arcturus17 5y ago
This is dope, congrats. I've read in other comments that you also built this in React... I think people would kill to read a deep dive of the differences you've seen between both frameworks in the context of building this project. I'm a hardcore React user, and Svelte looks great, but what prevents me from adopting it is that I don't have enough info of what its limitations "at the edges" may be in a complex project (whereas I understand React very well in this sense). Barring a full-on technical blog post - which I think would get you a lot of exposure, but is too much to ask - if you could share some thoughts here I would really appreciate it.
- kevinak 5y ago
  We're going to have him on Svelte Radio in a couple of weeks to talk about this! Stay tuned :)
- puruvj 5y ago
  Started writing the blog post already

superplussed 5y ago

You are a beast. This is ridiculous and incredible!

birdyrooster 5y ago

I don't understand but I like it anyways.

puruvj 5y ago
Nothing to understand here. It's just to enjoy :)

legrande 5y ago

This is just like: https://www.windows93.net/ https://www.windows93.net/ And https://windows96.net/ https://windows96.net/

puruvj 5y ago
Inspired in the first place from https://winxp.vercel.app https://winxp.vercel.app

onnnon 5y ago

Update: Issue is fixed now, see author's comment below. -- The link goes to the wrong demo! "macOS in Svelte" is here: https://macos-svelte.vercel.app/ https://macos-svelte.vercel.app/ "macOS in Preact" is here: https://macos.vercel.app/ https://macos.vercel.app/

puruvj 5y ago
Hi! I reset the domains for preact one to be macos-preact.vercel.app. Svelte one is now macos.vercel.app, but macos-svelte.vercel.app will work too

laszlokorte 5y ago

Looks pretty neat but one thing immediatly noticed: When clicking in in the menu bar to open a menu (for example on the apple logo) and then moving the mouse down, but diagonally in a way that the cursor cross the next to the right menu item (eg finder): - in this demo the hover triggers the finder menu to open - on a real map the diagonal down movement prevents that and keeps the current menu open

simonw 5y ago

This has a ton of clever tricks in it. https://github.com/PuruVJ/macos-web/blob/main/src/components/apps/VSCode/VSCode.svelte https://github.com/PuruVJ/macos-web/blob/main/src/components... is the source code for the VSCode app - it actually works by adding an iframe around https://github1s.com/puruvj/macos-web https://github1s.com/puruvj/macos-web

puruvj 5y ago
Project author here :) Yup!! No way in world will I build whole VSCode like structure around the monaco editor, just way too much work (Or maybe....) * wink *

somenewaccount1 5y ago

did you also write DevUtils?

puruvj 5y ago
Nope, but returning favor to a friend by linking it here :)