EvergreenTab
- 5 Devlogs
- 9 Total hours
A nature-themed new tab page.
Ship #1
Devlog #5
This one is probably going to be a bit of a mess. Firstly, I spent time adjusting the CSS styles to look more pleasing. Then, I had to figure out why the API didn’t work on GitHub Pages, and the solution was simply just reading the guide!!! I should do that more. Then the images were failing to load in GitHub Pages, which required further debugging. The last thing I made were five shortcuts relevant to me, and probably others too if I had to guess.
Devlog #4
Figuring out APIs took a long time as this is my first time using one and using Vite…
Before all of that, I spent almost an hour changing the search button to an icon and wondering why it was misaligning the search engine selector and search bar, and then I added the foundation for a settings menu.
Now over three hours were spent on figuring out Pexels API. I installed Vite midway through this project, so I had to sift through what was unnecessary. Okay, then came the image API. I bounced between Unsplash and Pexels and landed with Pexels. I had no clue how to integrate an API key at this point, so that took me a long time. Actually getting fetching images to work was a hell of a lot of debugging on my own. Eventually I got it to work after a lot of time… I decided to make the background images randomized per hour, but for now it is per minute for testing. I will need to adjust styles further later.
It’s also bugged with the GitHub Pages deployment, so I’ll need to figure that out too… oh well.
Devlog #3
I burned an hour and 45 minutes on making the search engines switchable… :D
I spent around an hour trying to make a functioning drop down menu, first with CSS :hover pseudo-class but to no avail, before moving to a button with JS to toggle it. Then I had to fight the positioning for maybe ten minutes. Getting it to work was much easier, but still took me some time as I needed to figure out how I could more easily add click event listeners to all options without separately getting each element.
I’ll add more engines later, but I want to make a shortcut dock for preferred or most visited sites next.
Devlog #2
I spent time adding CSS styles to the search bar and added a clock. I experimented with more pseudo-classes so that there is a slight glow effect when you select or hover over the search buttons. The clock was simple but the first JS I used in this project. I also added another font to use for the time and search bar text itself, still using Google Fonts.
A nature-themed New Tab page
I’m now working on the New Tab mission. I have started with making a basic search query that does function along with a basic design.
It took me some time to figure out how to make the search bar actually work, all because I put name="q" in the wrong place…
I decided to experiment with custom fonts using the Google Font API. I spent some time trying to figure out how to get it to work with a .ttf file and other ways, before I realized how Google makes it very simple by providing the HTML links.
