Fluent New Tab DevLog 031

Uploaded to GitHub, and am going to Ship

Fixes (only related to GitHub pages)

• Fixed an issue where the wallpaper path would get jumbled when deploying to GitHub pages
• Fixed the issue where the wallpaper won’t appear sometimes
• Fixed an issue where the APOD Wallpaper would glitch out
• Apparently this was because I had done some mistakes in my vite.config.js file

Note

APOD Wallpaper takes some time to load according to your internet speed so pls be patient

Fluent New Tab DevLog 030

Final DevLog before 3rd ship

New Features added

• Huge optimization regarding APOD wallpaper
• APOD is now fetched once a day and stays cached so you don’t have to fetch it every time you turn on APOD Wall

Fixes

• Fixed all issues/bugs since last DevLog

Current issues/bugs

• You can right click the search bar even when it’s not focused, and it shows the default browser context menu (intentional since many browsers have emoji and editing options in the context menu)
• Suggestions still fetch themselves from the history inside the site (will be fixed and shipped as a different version)
• Recent sites still uses History from the Pinned Sites (will be fixed and shipped as a different version)
• APOD Wallpaper takes a second or two to load

Note

• The Privacy un-focused version that can use browser data, will be shipped as a different version and will be my next and final ship

Image Description

APOD Wallpaper is applied

Fluent New Tab DevLog 029

Added animations

New Features added

• Bunch of animations to everything, settings panel, wallpaper, recents dock, pinned sites dock, literally everything
• Animations show when loading, when changing window size etc.
• Animations also work for mobile devices

Fixes

• Fixed the animation system for all the elements so now it actually works

Current issues/bugs

• APOD fetches wallpaper everytime you enable it, so there’s some lag there
• APOD also has issues if you turn it on and refresh

Video Description

Just showing off the animations, the white flash has been fixed btw

Fluent New Tab DevLog 028

Added a lot more features and now all the features under DevLog 021 have been implemented (except the privacy un-focused version)

New Features added

• Press Esc to close Settings Panel, un-focus the Search bar, and close any context menu that is open
• It’s now possible to swap the locations of the Recent Sites section and Widgets section
• You can choose the number of recent sites shown (up to 5) or just remove it entirely
• If you swap the recent and widgets panels, the Settings button moves with it, so now the settings panel moves accordingly too
• All Recent Sites and Widgets related buttons/options aren’t shown on mobile devices/devices with small screens

Fixes

• Fixed the small issues that I caused by bad parentheses placement in the JavaScript, nothing big

Current issues/bugs

• Suggestions still fetch themselves from the history inside the site
• Recent sites still uses History from the Pinned Sites
• There’s still not many animations in the whole UI

Image Description

An image showing the new buttons and options added, and another showing how the recent section and the widgets were all removed.

Fluent New Tab DevLog 027

Added more options and made some stuff a bit more useful

New features added

• Options to Open in New Tab and Copy Link in Pinned/Recent Sites context menu
• A custom context menu for everywhere else in the page that has a refresh option
• Elements like the Settings button, add Pinned Site button or the docks no longer show the default context menu, or rather they don’t have a context menu
• An alert box showing you successfully copied the link when you click Copy Link

Fixes

• Fixed an issue that occurred due to the swap system I used for rearranging Pinned Sites, it literally swapped the element that you’re dragging with the one on which you’d drop it. So I went back to the splicing system and tinkered with it to fix it.
• Since I tried to remove the context menus from every element that shouldn’t have them, I also managed to remove it from the search box, weather location box and Accent color box, but I fixed it, so it now shows the default context menu.

Current issues/bugs

• You can right click the search bar even when it’s not focused, and it shows the default browser context menu
• Most of the new stuff hasn’t been fixed/adjusted for mobile devices/small screens

Image Description

The images show the new options added to the context menus, and the new context menu

Fluent New Tab DevLog 026

Nothing much done

New features added

• Draggable and rearrangeable Pinned Sites

Fixes

• Encountered an issue in which adjacent Pinned Sites could not be rearranged (I was using a splice system) so I fixed it by using the good ol’ simple swap system
• Since I was using the splice system I also encountered a bug which deleted every item I tried to rearrange
• The splice system also broke the Pinned site, so I fixed it by changing some variable names

Current issues/bugs

• You cannot just drag an item and drop it in the general direction of another item; you have to drop it on the other item for it to swap places.
• There are still no animations for Widgets or Pinned Sites rearrangement

Note

• Recent Sites won’t be rearrangeable, it’ll be ordered according to the last site you visited
• Every error/dialog box in the site uses alert to show their dialog boxes, so if you can’t add a new Pinned Site, it might be your browser because as of now, the extension works almost flawlessly on MS Edge, Chrome/Chromium and Brave

Video Description

• The video with the single tab open is using the splice system so there’s the issue from earlier that can be seen (added it to show how the bug looked like)
• The video with 2 tabs open is using the swap system so there’s no issues in there

Fluent New Tab DevLog 025

Quarter-century DevLog

New features added

• Added the option to remove a website from the Recent Section
• Similar to pinned sites, this option also uses a context menu, with the only option here being “Remove”
• Added some code so that multiple context menus are no longer possible

Fixes

• Fixed the issue from my last DevLog where there were no errors when trying to Move Widgets while at either end.

Current issues/bugs

• There are no animations when opening the context menus or rearranging widgets

Image Description

As you can see in the images, I have added a remove button in a context menu for the Recent Sites. The errors for trying to move a widget also work.

Fluent New Tab DevLog 024

Slowly but steadily ticking off stuff from my “Possible Features” list

New Features added

• Added the ability to rearrange widgets
• Made the widgets order persistent, i.e., it stays every after a refresh
• This ability uses a context menu that appears when right-clicking a widget, and has two options to Move the widget up or down
• The said context menu uses the same design, almost the same code and properties as the context menu that appears when you right click pinned sites

Fixes

• Fixed an issue where the APOD Widget would be stuck at “Loading…” unless you turn on APOD Wall

Current issues/bugs

• Move up/down buttons don’t give errors when the widget is at an end

Image Description

As you can see in the image, I have rearranged my widgets, and the Context Menu is also visible clearly.

Fluent New Tab DevLog 023

I originally though coding with Vite is harder, now I think it’s easier because you don’t have to put a semicolon (;) after every line in the javascript, and there’s the html, which is inside the javascript, so that’s nice.

New features added

• Ability to upload and use your own wallpaper
• A button to remove your own custom wallpaper
• Icon for the remove custom wallpaper button
• Enabling APOD Wallpaper overrides custom wallpaper, and you cannot use your current custom wallpaper unless you disable APOD Wallpaper, until then you can select a new custom wallpaper to use, and that one overrides the APOD.

Fixes

• Fixed the long loading time for the wallpaper
• Fixed some logic issues with the wallpaper (I did a silly mistake where I referenced the wallpaper in multiple places using multiple paths, somewhere I used “./walls/wall1.jpg”, which is correct, but somewhere I used “./assets/walls/wall1.jpg” which is wrong and led to the blank screen issue.

Current issues/bugs

• Animation from APOD/Default Wallpaper to custom wallpaper is the same as Default/Custom wallpaper to APOD, but the animation from Custom Wallpaper to default is different, but I might keep this one as a feature, just to distinguish between default and custom.

Fluent New Tav DevLog 022

I think VS Code got an update, so now the weird issue that I used to get while typing “” or () aren’t there. So now I got a lot of work done in my current session. Also I was taking a look at the resources section, so I am kinda updating my style of writing DevLogs.

New features and what changed

• FNT(short form) now supports APOD Wallpaper even when the APOD is a video. Well I haven’t been able to set the video as a wallpaper since NASA Servers are pretty busy and a bit unresponsive at times. It just uses the video thumbnail as wallpaper that day, and it’s shown in the widget.
• Added icons for the widget settings toggles, and made them appear in a single row instead of 3.
• Added a View More button in the APOD Widget, clicking it now takes you to the NASA APOD page.
• Since I removed the text from the Widget Toggles, I added tooltips instead.
• The APOD widget now stops showing text if the 2nd line is full, earlier it used to be 3. This was done to make room for the View More button.
• Added invert logic for the widget toggle icons since icons8 gave me black icons and that too in png.

Fluent New Tab DevLog 021

• Just took a look at the reviews/feedbacks on the previous ship and they are really helpful unlike the ones on my Minesweeper one, so yeah, the 2nd ship is not going to be my final Ship/version.
• I’ll be taking a break from Fluetro OS and related stuff.
• And thus, I’ll be working on this, slow and steady.
• And now according to the reviews/feedbacks I have made some changes.

Changelog:

• Added an option to show or remove specific widgets.
• Fixed the loading time issues, it was mostly caused by the APOD Server loading (which I mentioned in the README). Now it loads into this Wallpaper by default.
• Since I added the Widgets Customization section (which is still not designed correctly), and widgets are not available or mobile/smaller width devices, those options are not available there.

Possible Future updates:

• Draggable and more customizable Pinned Sites panel.
• A separate version that focuses less on privacy and thus can use Browser History for the Recent Sites and has Live Location system for Weather
• More Customizable Widgets where you can only change the order of them and make them show on the left or right side.
• Customizable and toggleable Recent Sites Section, like widgets you can only select if it’s shown at the left or right side, turn them off entirely, or select the number of items that are shown.
• Option to add your own wallpaper for the background.

Fluent New Tab DevLog 020
•I have encountered multiple issues when trying to build an extension or while deploying to github pages
•Everything is structured correctly but something is not right
Edit: Fixed all of them and uploaded to GitHub

Fluent New Tab DevLog 019
Final DevLog before 2nd and possibly final ship
•Tried to add Duplicate protection for Pinned Sites (both while adding and editing), had a lot of loopholes (e.g., it treated www.google.com and google.com as different systems), so scrapped that idea
•Tried to add a history button to the left under Recent which opened the history page of the browser, but the browser didn’t allow it, so scrapped that too
•Tried to add dragging to the Pinned Sites dock, that broke the whole UI, so scrapped it too
•Only meaningful addition, fixed icon sizing for the settings and + button so they don’t look huge
•Another meaningful addition is that now it no longer requires you to write the full URL to add a site to pinned sites

Fluent New Tab DevLog 018
•Added search suggestions from the recent searches, works even if you don’t start typing something that matches the starting of a recent search
•Originally intended to add live suggestions fetched from google but didn’t work
•Fixed the settings panel margins to fit smaller screen resolutions (tested on 800x600, but still looks best on 1080p screens and higher)

Fluent New Tab DevLog 017
•Fixed the issue of the settings panel overlapping with search bar/recent searches in smaller windows
•Added a custom accent color option (uses hex codes)
•Fixed the positioning and sizing of elements for smaller windows.

Fluent New Tab DevLog 016
•Added a Mobile version for the UI
•Fixed the issue of blur with the Search Engine drop down menu
•Changed the name of APOD Wallpaper to just “APOD Wall” since it was causing issues due to it being 2 rows tall
•Added a logic to not show the Keyboard Shortcut hint if on mobile/device with small screen resolution/small window

Fluent New Tab DevLog 015
•Added support for multiple Search Engines and fixed the option to switch among them
•Made the Search Engine dropdown UI consistent with the rest
•Made the APOD Wallpaper and Dark Menu buttons be on a single row to preserve space and look better
•Somehow added a transition while switching APOD Wallpaper on/off
•Added a bug where the background of the search engine dropdown menu is transparent and doesn’t have ANY blur

Fluent New Tab DevLog 014
•Added a transition while changing theme
•Added an option to turn off APOD Wallpaper(no transition here since the APOD is fetched from NASA servers and causes issues)
•Added more Search engines to the list (Bing, Yahoo and DuckDuckGo) (only Google works for now) (list uses default HTML UI)
•Finally changed the Settings UI to match the other elements
•Weather now refreshes as soon as you enter new Location and press Enter

Fluent New Tab DevLog 013
•Added Weather under the greeting
•Added an option to set Weather Location under settings
•Current issues: Settings buttons still use html design and weather doesn’t reload until page refresh

Fluent New Tab DevLog 012
First DevLog after first ship
•Added a Recent Searches Panel (had some leftover code for this before first ship)
•Fixed an issue where the Recent Sites won’t update unless you refresh the page
•Working on adding a Weather system (same system that’s used by Fluetro OS) and fixing the Settings UI

Fluent New tab DevLog 011
This might be my last DevLog to this project before uploading this to GitHub and Shipping
•Tried to rework the Weather Widget but broke the whole UI, so scrapped it.
•Tried to add a search dropdown showing previous queries but broke the whole UI (again) and scrapped it (for now).
•Changed the position of the Ctrl+K hint
•Fixed the page to adjust according to Window size.
•Made it so that it clears the previous query if you go back from the search page.
•Any further suggestions will be highly appreciated, and most likely be added in a future update.

Fluent New Tab 010
•Removed the Weather Widget.
•Added actual icons instead of Placeholders (from icons8).
•Added alternative accent color for Dark Mode.
•Added working Clock widget.

Fluent New Tab DevLog 009
•Removed the Date from under the Greeting.
•Added Greeting Logic.
•Added working Calendar widget.
•Fixed the overflow issue in the APOD widget.
•Fixed the issue where Recent Sites won’t show up until you click a link in the Pinned Sites section.

Fluent New Tab Devlog 008
•Added the ability to show Recent Sites (only shows 4 Recently visited sites that are already Pinned) (made it this way to keep that pane clean).
•Added Persistence to all the elements (Pinned and Recent Sites, Settings) using localStorage so they don’t disappear after a Page Refresh/browser restart.
•Recent sites don’t rely on any browser-specific APIs.

Fluent New Tab Devlog 007
•Added the ability to Pin Sites.
•Added Icon Support for Pinned Sites (some sites don’t work).
•Added Edit and Delete options for Pinned Sites.
•Made sure you can no longer select elements/text from the webpage.

Fluent New Tab Devlog 006
•Added Dark Mode
•Added a Settings Panel
•Made the Search Bar Work and get activated on Ctrl+K.
•Currently the Default Search Engine is Set to Google but will make it have an option to change it in the future.

Fluent New Tab Devlog 005
•Added Boxes and Elements to complete the UI.
•Added Blur to the elements.
•Broke the setting button hover
•Moved the Greeting and Search bar a bit to the top.

Fluent New Tab Devlog 004
•Finally fixed the alignment of the different elements.
•Added Support for NASA APOD for the Wallpaper.
•Added Fallback wallpaper just in case today’s NASA APOD is not an image (like today it’s a video).

Fluent New Tab DevLog 003
Spent like 1.5 hrs just to get to this stage😭
and yes, the texts and emojis are all placeholders
(Coding with Vite is a real pain😭✌️)

Fluent New Tab Devlog 002
•Taking a break from Fluetro OS after 12 hrs straight.
•Making it from scratch, again, to match Fluetro’s design more.
•Finalized on a new design concept.
•Will be giving updates about any Future plans and features and UI changes.

A basic New Tab Page, looks Great on MS Edge and Chrome too, based off of the WinUI 3 design language