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 ⬇

Devlog 5 - Ephemeral??

• I have added all the commands to Cyber3000 which I wanted to and today is the day to run it 24/7 on Nest.
• I started seting up my bot on Nest from my command prompt, following the guide… And after I’ve done it, I opened Slack to try out my bot, just to get shocked that the responses were only visible to me!
• Throwback to 3 days ago, while testing my bot on Slack during the time of running my bot locally, I saw that all of it’s responses were ephemeral. I mistook that it was happening because I was running my bot locally.
• I had to add a line of code for every response in my code to fix it and I edited the index.js file from my command prompt itself using the command nano index.js (Nano is CLI-based text editor) and restarted the container from Nest.
• Now that everything is fixed, I’ve added the demo url to README.md on my Github Repo. Tested all the commands of my bot again and now I think am sure that my project is ready to be shipped!

Do checkout the responses of the bot (it’s not ephemeral anymore!!) 👇🏻

Devlog 4 - The ASCII Art

• I was tinkering with my project, wondering which feature to add next. That’s when the ASCII Art came into my mind…
• For those who don’t know, ASCII was a character encoding standard and ASCII Art was a graphic design technique which used the those characters for art which was widely used during the 80s.
• I had known this art for a while and for Cyber3000’s theme, I thought it would be very cool to add it.
• Also added a help command for the bot.

Do check out the ASCII Art below!

Devlog 3 - My Own API Endpoint for Cyber3000

• Two days ago, I’ve just read the Hackclub guide on making a Slackbot which uses APIs to retrieve data such as a random cat image or a random joke.. And I found APIs interesting right from the start when I was trying to find a theme for making my Slack bot.
• I did some research on how basic API Endpoints work and how they retrieve and manage data formatted in JSON.
• Today, I started gathering a lot of information about 2000s tech and nostalgic memories of the 1990s-2010s(early) era and I have made two JSON files with the data from which my bot can retrieve the info and drop a random info. about 2000s tech or a nostalgic memory. Though I was not born in that era, I’m definitely very fond of it.
• I have added two commands for the above:
  • /cyber3000-y2ktech
  • /cyber3000-nostalgia

Below attached are their screenshots:

Devlog 2 - The Seek Command

• Thought of adding a command which gives a summary of any keyword entered and went for the DuckDuckGO API.
• Struggled with catching the proper part I needed from the API and displaying it to the user. As the it returned a lot of information about the keyword(such as links and a lot of specifications related to it), I had to filter the result only to get the short summary.
• The bot was replying with [object Promise] until I realised that I’ve missed await when calling the function. The silly part was I’ve entered = instead of === in an if statement.
• Sorted everything at the end!

The Seek Command! 👇🏻

Devlog 1 - The First Commit

• Started with setting up my bot on Slack API website and wrote the boilerplate code for the bot on VSC in Node.js. Thanks to the Hackclub guide on making a Slack bot, it made my work easy.
• Struggled with testing my bot on Slack channel until I realised that my ‘node index.js’ was not running on my Terminal.
• Added a ‘/cyber3000-advice’ command which fetches a random advice from the AdviceSlip API
• Lastly, committed everything into my Github Repo

The advice command: