You are browsing as a guest. Sign up (or log in) to start making projects!

Pi WebOS

By @pi

  • 7 Devlogs
  • 15 Total hours

A WebOS from the WebOS mission, made by Pi

Source
Ship #2

@pi on Pi WebOS

# Welcome to Pi WebOS!

This is my submission to the WebOS 2 Mission. I've created a paper-themed WebOS with many, many features, ranging from a mini browser to tiny micro-interactions like double clicking the title bar, or window positions being persistent. Made with pure HTML, CSS, and JS.

The project has a built in, intuitive walkthrough, but I'll also provide a feature list here. You can also watch the short demo attached (also visible on the README).

## Features
* Moveable, resizable, closable windows
* Window positions save on reload
* Correct Z ordering after opening a page
* Draggable files/apps on desktop *[NEW]*
* Double click menu bar to fullscreen window
* Window cannot leave desktop
* Window snaps back into frame
* Multiple Apps
* Text Documents (like this one!)
* (Mostly) Functional Browser
* Notes App
* Settings App *[NEW]*
* Menu bar
* Page Selector
* Fullscreen OS
* Browser/OS detection
* Links that open windows in the OS
* Keyboard shortcuts (Esc, Shift + Esc, Cmd + Z) *[NEW]*
* Customizable themes through the Settings app *[NEW]*

  • 3 devlogs
  • 6h
  • 4.00x multiplier
  • 22 Stardust
  • WebOS 2
Try project → See source code →
Open comments for this post

@pi on Pi WebOS

59m 19s logged

Custom themes!

Sorry, this is a short devlog, but I just finished the tedious task of letting the JS update every color in the CSS via CSS variables.
Luckily, I had thought ahead and made everything in the CSS already use a variable but there’s a lot of hardcoded values I had to manually input.

0
0
6
Open comments for this post

@pi on Pi WebOS

2h 36m 2s logged

Draggable files on the desktop :)
.
I really like how smooth and bouncy the animation is, and I’m really proud of how well I fit the files in with the rest of the theme. Double clicking gives a really satisfying fluid motion.
Also, they open the windows :)
.
Sidenote, I added keyboard shortcuts! Notably, esc to close windows and cmd z to undo the closing.
I really had to balance the command z because I didn’t want it to undo writing text, but I also didn’t want to completely disable command z on my page. text

1
0
3
Open comments for this post

@pi on Pi WebOS

1h 58m 51s logged

Learned another basic JavaScript principle again (unpacking multiple value) :)
Meanwhile, I could do this ten times faster in Python without having to look something up every minute or so.

0
0
7
Ship #1

@pi on Pi WebOS

This is Pi WebOS, a website that mimics the look and feel of a OS with moveable, resizable, and closable windows that are both responsive and smooth. There are multiple apps, including a bare bones web browser! The website has many small quality of life features, such as windows snapping back into the desktop and windows being preserved on reload.
It provides an intuitive walkthrough of almost every part of the OS and a feature list describing both the large things (like windows and apps) and the small QOL things (like links that open windows).
This project was largely to improve my comfortability with JavaScript and CSS
No AI was used to generate any code or text. AI was used to help debug and research.

Try project → See source code →
Open comments for this post

@pi on Pi WebOS

2h 23m 41s logged

Behind the scenes there’s a lot that I’ve done.
Mainly, the window content is actually styled (and a few new windows have been added!), but there a a ton of small things that had to get done first.
There is a working (kind of) web browser that displays the url in an iframe, which is really cool, and actually not too difficult. It can’t display all sites because many popular sites intentionally disable being shown in an iframe, but it can go to hackclub.com.

0
0
4
Open comments for this post

@pi on Pi WebOS

2h 44m 50s logged

I’ve added more windows and some other miscellaneous features. There was a lot of debugging, and coincidentally also a lot of forgotten keywords, like “let”. I’m too used to Python. I haven’t styled the windows yet, though.

0
0
4
Open comments for this post

@pi on Pi WebOS

1h 37m 12s logged

Starting the WebOS basic mission. I have windows displaying, moving, and closable.
Next is adding content to the windows, but also making the nav menu do stuff.
I had a weird bug with the rem unit changing based on the parent height. If you know advanced CSS, you’ll understand why that’s strange :)

0
0
5

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…