Devlog 4

The README is complete!

I’ve rewritten some of the JS to simplify it, and I’ve added some more sources to the backend.

There is also a source code button now that links to the project’s github repo.

Devlog 3

I have expanded support from Wikipedia to more sources like Wired, BBC, The Verge, etc… It took a while because I had to learn how to use npm and the rss-parser library.

Bugs 🐛

• Confused between which variable to use for selecting the articles (i.e. sources vs feed vs article in article.js)

Changes

• I added rss links for each source
• Drafted a README file
• Learned how to use async functions to reduce load times
• Learned how to use Vercel CLI to test backend api code.
• Learned type module for Javascript.
• Also learned that I need to use `` instead of “” when using/embedding variables like response.status.
• Also spent a lot of time trying to make the category feature work where users can which categories they want for the random articles.
• Choosing which CSS selectors to use so that the category buttons have the proper hover and active transitions

Future Plans

• Add a link to the project’s github.
• More sources/categories!

Devlog #9

New Apps!

• I added two new apps: a timer app and a simple browser.

• The timer app currently only supports 5 minutes. It has a start, pause, and reset button.

  • Initially, I got this funny glitch where the water height was decreasing upwards (see video) instead of downwards. I fixed this by giving the water div a position of absolute and setting bottom to 3px.
  • I also accidentally named id of the timer text to be the same as the id of the top-bar time, which caused the timer to display on the top-bar instead

• The browser was somewhat easier to implement. I set up a input box and a button, and programmed the button to open the link or search query that was inputted into the search box. I’m planning on adding an iframe to showcase the website directly on the OS instead of opening a new tab!

Some other changes

• I also split my css and js into separate files for each app to make future development more organized.
• PoseiOS now has a dock which you can run apps from!

Devlog #2

I added an open article button which opens the random article on click. I learned how to implement this through Javascript by using article.content_urls.desktop.page; to get the article url and then open the article on click using window.open(url, "_blank");, and an event listener on the open article button.

I also added the current date at the top of the title using date.toLocaleDateString.

I styled the buttons to slightly glow on hover and sink into the screen (inset box-shadow) on click.

Devlog #1

I started with Astro but after learning astro for about 1 hour, I realized that it was overkill for what I was trying to do. So instead I swapped to HTML, CSS, and JS (although, I’ll probably try programming it in Astro when I get the html/css/js version to work).

I spent around 15 minutes looking for colors, fonts, and a custom cursor icon for the site. I settled with the cute coffee bean icon which you can see in the image!

The rest of the time was spent adding the styles to styles.css, setting up the HTML to work with the Javascript code, and implementing API fetch functions. The Javascript kinda works, but I haven’t linked it with the button yet, so it only loads the article on page refresh. Also, the JS only works with Wikipedia API for now, but more sites are going to be added very soon.

Devlog #7

CSS and JS changes

• I rewrote some of my Javascript to make it more readable and understandable.
• I reworked the UI in PoseiOS to make it more blue-ish/sea themed.
  • The top-bar is more transparent and only has pill shaped background for the elements.
  • The apps have new highlight/hover aesthetics and selected notes/books will now have a blue shadow, giving it a comic-looking theme. The background of the apps was also changed, now having more of a greenish teal tone to it.
• The display or heading font for PoseiOS is now Zarathustra.

Devlog #6

Changes

• Restructure CSS to be more scalable by using classes and css root variables.
• I added a new app called Books which is essentially a library catalog of Poseidon/greek fantasy books that I thought was an interesting and great read.
• I added content to the books app.
• I spent around 15 minutes tweaking the color palette and finding colors to improve the UI of PoseiOS.
• I finished writing the first good version of my README.

Bug Fixes

Bug where selecting 3 app mean one will inevitably be opened and cant be unselected. Fix by allowing to only select one app at a time. So when an app is selected and another app is clicked on, the currently selected app would be deselected and the new app icon would be selected.

Fixed a bug where it said the title was undefined since when the loop finished, i = 2 which is more than the object index which had only 0 and 1 (before I added more to the object). To fix this, I changed “var” to “let” and it worked again. I learned that let allows i to have it own value every iteration. So I basically implemented the for loop wrong in Javascript (I thought that var and let would do the same thing, turns out it has its differences!).

PoseiOS V1 is finally complete!!!

Devlog #5

It’s been a while since my last devlog. Most of the time was spent trying to fix a bunch of bugs in the javascript code.

Bug Fixes

• Spent 2 hours trying to fix bug where you could drag windows out of frame and never see them back. Trying to limit the drag based on viewport was very confusing.
• I fixed this bug by creating a new function clampWindowPos() that would determine the max x and y offset that the windows could have in order to stay in the viewport. The function calculates this by calculating half of the width and height of the window (since the window has transform: translate(-50%, -50%); which causes the center to be at half the width/height). Then, it calculates the minimum left value and the maximum left value that the window could move to and did the same for the top value. Finally the function return those values.

Changes & More Fixes

• Added a feature where clicking on the desktop window deselects the currently selected app by letting the body listen for a mouse down event and deselecting the icon if the mouse-down location is not on an app icon.

Added poseidon.md, my first app!

• It took a whole 3 hours to style and get the app to function. Chrome dev tools was my best friend 🤩. It helped me spot few typos in variable names and find out javascript code that wasn’t working.
  • I first started by trying out the javascript code show in the hack club workshop. It didn’t really work so I browsed through other WebOS shipped projects to see how they made the app. A really useful project I found was Blackbird OS, which I took inspiration from for coding my poseidon.md notes app.
  • I began by implementing a local storage that didn’t really work so I left it for last and went to work on the other features like adding, deleting, and editing notes.
  • After finishing these features, I came back to fix the local storage bug. The issue was that I directly accessed the storedNotes object in my Javascript functions instead of the note objects stored in the local browser. To fix this, I created a variable content and set it to equal loadNotes() so that this new variable would be an updated object with all of the saved notes.

What’s Next

• I’m going to polish poseidon.md’s UI a bit and then start working on more apps for the WebOS.

Devlog #4

What I learned

• Learned how to use arrow functions and how to add classes to an HTML element via element.classList.add("...");
• Learned width: fit-content so that I don’t have to guess the width of my div.

Changes & Bug Fixes

Aesthetic tweak: Changed cursor grab to only show when hovering over handle instead of showing over the whole window).

• Reduced repetition and improved scalability by turning open/close window into a generalized function that works for all windows, so I can call the function for future apps.

• A lot of bugs and back-and-forth and commenting out code to add open-close function for the apps. I found out that I needed 2 parameters for the functions closeWindowOnClick and openWindowOnClick. First parameter is used for checking if the open button (app icon) or close button was selected/tapped, and second parameter is used for targeting the specific window that should be opened/closed. The parameters made me very confused because I would sometimes misinterpret the element as the button when the element parameter being passed was linked to the window.

• Added an icon and CSS styling for my first app: poseidon.md

• Added attributions to my README, for the bg image and the icons.

Programming Decisions

• Called addWindowTapHandler() on line 19 instead of calling addWindowTapHandler() for each window directly to reduce redundancy.

• Chose mousedown instead of click for event listener so that the window auto-focus when it is tapped immediately (if click is used then the window will only focus after mouse is up).

What’s Next?

• More README tweaks coming soon!
• More apps and content about Poseidon within each app.

Devlog #3

Some New Features!

Add open and close window functions. You can open by clicking “PoseiOS” in the topbar, and close by clicking the “x” button.

Add left & right padding on top bar.

Bug Fixes

Fix text being highlighted when dragging windows by using user-select: none; cursor: grab;

I encountered a bug where u can drag window by selecting any part of it. I fixed this by changing the id to include “-handle” so that the javascript could recognize it (before the javascript was looking for “handle” instead of “-handle” which created the bug).

Devlog #1

Context & What I built

I made a website to showcase a font I drew using Calligraphr and ibis Paint.

Unfortunately I didn’t use Lapse to record my font drawing process 😭 so I am unable to publish the font itself as a project.

Process

I learned how to add a editable text block using contenteditable="true" within the div. I also learned how to add a coding snippet using <pre><code>...</code></pre>.

Marquee Feature

Since the marquee tag was deprecated, I built a marquee of text using an animation keyframe that I defined in CSS. I used white-space: no-wrap in order to stop the text in the marquee from wrapping and instead flow on one horizontal line. overflow-x: auto was used to fix a bug where the text would overflow to the right side of the screen.

Bugs

I ran into an issue where the vines background image in hero section was distracting and made the font unreadable. I fixed this by adding the linear gradient property to background in CSS.

I initially deployed the website using Github pages, but I ran into a https issue that I wasn’t sure how to fix, so I decided to switch to Vercel deployment instead which was a lot more convenient and straightforward.

Aesthetics

I made the website transition from green (at the hero section) to brown (at the footer) to resemble the green grass and brown soil.

I plan to make more fonts in the future!

Devlog #2

• Implement some JavaScript for draggable windows and a real-time clock on the top bar.
• I added a glass design for the windows and top-bar
  using backdrop-blur and
  background-color: rgba(255, 255, 255, 0.1);
• I learned how to center a div using position absolute and transform. At first, I ran into a problem where the top left corner of the welcome window was centered, but the window wasn’t centered correctly. I found out that this was because I didn’t use transform: translate(-50%, -50%);

Devlog #1:

I started off with some boilerplate code, creating and linking the HTML, CSS, and JS files.

I added some content on the webpage.

I added a background wallpaper for the WebOS.

I styled the site using CSS, but I haven’t added any Javascript yet.

I imported the Inter Font from Google fonts.

A new tag that I learned was using background-position in order to crop/position the background image so that it fit my preferences.

I am working on the schematic for my first PCB! I am learning the basics of how to make a PCB board for a USB 2.0 hub by referencing the USB hub tutorial on Hack Club Jam. I started off by importing some symbols for a chip and USB ports using the EasyEDA library. I also started wiring some of the components and learned how to use nets.