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.