Devlog 6 - Preparing for Ship #1

• I’ve added all the main features for my website in my previous devlog and now I have to fill the bottom right space!
• Looking at Windows XP, I wanted to replicate its system tray as a date-time window in project… After some experimenting with CSS, I added the date-time window with a transparent background, placed it on the bottom right of the website with thin black text! I liked its minimal look as I wanted to design it in a way that it doesn’t grab our attention much.
• I was switching themes to check if it looks good on all of them… And due to the black text, it was not properly visible on themes having a darker background. So, I added a line of code which makes the colour of the date-time window white when the user selected a dark colored background.
• And the cool part of this devlog is the “Info Box”, inspired from the dialog box of WinXP, this displays a info about a random tech device from the 2000s era. This uses the API which I made for my previous project, which has a lot of data about tech devices from the Y2K.
• Additionally, I’ve also added the feature of character counting for the Notepad Window
• Now that everything’s done, I think this project is ready to be shipped!

I hope you guys like the website!

Devlog 5 - The Background Themes

• I was casually browsing through the projects made by others for this mission with a thought in mind to add something which others missed. That’s when I got the idea of adding the feature of Background Themes. And of course people do have different interests and likings and I think they’d love the idea of different themes.
• I started preparing an idea of how it should look and where people can change the settings. I added an icon named “Settings” and by clicking on it, the user could select a theme out of the available ones. I’ve also integrated localStorage which will save the theme selected by the user and loads it the next time he returns to the website.
• Initially, I’ve planned to add the colours from Frutiger Aero design aesthetic but upon adding them, the website looks too odd and bright, my idea was to select colors which looked minimal and were also seen during the Y2K era.
• Themes only not change the background color of the website but also the color of the logo text at the top-left, its just small detailing but it gives the website a cleaner look.
• A quick tip for developers who love designing good UI and pick perfect colors for their projects - Just search “color picker” on Google and a you can find a color picker displayed on your screen! (except that it doesn’t have an option to set transparency)
• Additionally, I’ve also fixed two bugs from the recent bookmarks feature.

Do check how the Mint and DarkUI themes look!

Devlog 4 - The Bookmarks Manager

Heyy, it’s been 5 days since my last devlog and I had an important exam yesterday for which I was studying the whole week.. It took me a lot of time to plan and implement this bookmarks feature which is why, this is my longest time logged for a devlog!

• After my last devlog, the next feature I wanted to add to my project was a bookmarks section under the searchbar. I started experimenting with some design ideas in mind but later fixed on the desktop-icon styled bookmark icons.
• I spent a lot of time on adding and modifying designs in CSS but thanks to VS Code’s suggestions for CSS properties it made my work easy!
• While implementing the bookmarks feature, I first developed a static bookmarks section which had 5 bookmarks pre-coded (I included websites such as Hackclub, Gmail, Github, Hackatime, Youtube), where users cannot add website bookmarks of their choice.
• Later, I planned for a custom bookmarks section where people can add/remove bookmarks of their choice. I also planned for an application-like interface where people can add or remove websites bookmarks and all of this should be done in a Windows XP theme.
• There was another challenge which was to display the icon whichever website the user added as a bookmark. After some research, I found this answer on StackOverflow. Attaching the logo to that API grabs the icon of the website, so that we can directly use it as a source for an image tag.
• I added the icon of WinXP’s Control Panel as the icon for Bookmarks Manager. And I’ve also added a limit where the user can only add upto 6 bookmarks, as a maximum of 6 bookmark cards look perfect under the searchbar.

I don’t wish to make this devlog any longer. Thanks for your time!

If you ever try out my website, don’t forget to minimize the notepad to view the icon of Bookmarks Manager. Do check the bookmarks section below…

Devlog 3 - The Optimization

• I was bored yesterday and I was scrolling through the projects which are completed for the ‘Give Your Website a Pulse’ mission and they are very creative! But there was one problem in almost all of their projects.
• The problem was that the content which people enter in the searchbar is of two types:
  1. Keyword or a query just like how we search on Google.
  2. URL or a website link.
• And the website has only one searchbar which is either redirecting to “google.com/search?q=[content-in-searchbar]” or “https://[content-in-searchbar]” according to what the developer has written in the code.
• What if the user searched for a query and it redirects him to https://keyword (or) if the user searched for a URL and it redirects him to google.com/search?q=userurl.com . It’s really annoying!
• To prevent this, the code should be structured to check if the entered content is a URL, if yes - redirect him to that website; if no - redirect him to a google search.
• After doing some research on how to validate a URL, I got to know about URL Object Validation in Javascript. Thanks to this guide, it helped me implement the URL validation in my website. I’ve also added two lines of code just to ensure that the https:// gets added to the URL, incase the user doesn’t enter it.
• I’ve added the feature of localStorage which automatically saves the text typed by the user in the notepad window and loads it the next time he returns to the website. There’s no worry of losing the data now!
• Along with that I’ve added a feature of minimizing or closing the notepad window and you can see a notepad icon at the bottom left of your screen after minimizing it!

Checkout the minimize feature ⬇

Devlog 2 - The Notepad Window

• In my previous devlog, I’ve noticed that a lot of space on my website looks very empty. I couldn’t figure out what to fill that space with, until I thought to add small space in the screen where people could fill it with their to-do lists or ideas!
• And as my project being ‘2000s Desktop’ themed, I thought that adding a Windows XP-styled Notepad Window would be the best! Though this may look like a small feature to be added, it took me a lot of time to design the Notepad window!
• Thanks to this website, which replicated exactly how a WinXP OS would be running like. It helped me to exactly replicate that user interface.
• Wait until my next devlog to see what I’d fill the other half of the screen with!

The Notepad Window 👇🏻

Devlog 1 - The Idea

• This is my 2nd project on Stardance and I’ve started it yesterday. Just like my previous project, I wanted to design this website in the same 2000s Desktop aesthetic.
• I’ve started with finding a catchy name, which I thought to go with ‘prism.exe’. The .exe in the naming refers to the Windows Executable File which points out the desktop aesthetic of my website. I’ve also designed a logo for my website on Canva.
• I’ve started developing the website with an off-white background which was intended to look like the background of File Explorer on Windows XP or the color used in some parts of the Windows 98.
• I’m still experimenting with various CSS properties but right now I’ve added a basic centered searchbar with a Windows XP styled Search button which shows orange shade when hovered.

That’s everything I’ve done yesterday! It was too late in the night, so I couldn’t post a devlog yesterday…

This is how the website looks right now ⬇