Sebby's Custom New Tab Page
- 2 Devlogs
- 2 Total hours
A custom new tab page that lets me search Google but also just a reminder to chill for a second if I need to.
Ship #1
@SebbyMortimer
on
Sebby's Custom New Tab Page
I made a custom new tab page that is ocean/iceberg themed that features Piplup and Charles. If you click on Charles you get some really nice music, it’s one of the ones that I like to listen to to relax. However the main thing is the search area in the middle that lets you search google, you can also change which language to search in and whether to hide the AI overview. The other “real” feature that I have is a word of the day API taken from wordnik that updates daily. The website also features multiple animations, including piplup swimming across the screen, waves bobbing up and down, ripples when you click, and the icebergs float too. Honestly nothing was too challenging in this project, so I think the most challenging for me was just trying to change the design of the form elements that let you search - I always have left them as their default designs in my computing classes but because I wanted to use them in a finished, polished product this time I had to try and design them and change them from their default styles which was a bit more difficult than I imagined. I’m super proud of being able to recreate the idea I had in my head on an actual website. I love how it’s turned out and it’s usually pretty difficult for me to get exactly what I’m thinking of made into an actual finished project. There’s not much you need to know when testing my project, I kind of already talked at the start that if you click on Charles you can listen to music, and also if you just click around the water you will create ripples. Besides that you can just use it like a normal new tab page to start your searches. Thank you for reading this and trying out my project. :)
@SebbyMortimer
on
Sebby's Custom New Tab Page
1h 45m 39s logged
Devlog #2
The word of the day API has been fully implemented and I put it on its own floating iceberg which makes it look so much better than when it was just hovering next to Charles. I also added the attributions required by wordnik to link to the word on their website and use their media logo. I also re-added the “splash” YouTube video that I originally had but made it take up less space and real estate on the screen and I added a nice little image underneath showing that it’s a recommendation of mine to watch. I also slightly tweaked positioning of the main search area and word of the day text as well as the position of the holes in the iceberg to make the entire thing more cohesive and to get that finishing polish done.
@SebbyMortimer
on
Sebby's Custom New Tab Page
26m 48s logged
Yeah so I didn’t realise I needed to link Hackatime.
As the title says, I didn’t realise I had to link hackatime for my project hence why I’ve only logged about half an hour. However I can describe the things I’ve worked on this project up until this point.
Devlog
I decided not to follow the guide after looking through it as the images that nasa gives really did not match the sort of website I wanted to make so instead I took to making my own new tab page. It’s themed around an iceberg floating in the middle of the water with little wave effects and ripples when you click on the water. I also love penguins (and Piplup) so you might spot a little piplup swimming across the screen some times. You can also just chill and listen to music by clicking on Charles in the bottom right to play and pause the song. And for the main part of this project, in the centre on the iceberg is a search bar along with two options, one for changing the language and one for hiding the ai overview in your search. I’m currently implementing a word of the day from an api (my “real” feature) and to help stop people stealing it I’ve hidden the api key behind a cloudflare worker and also made use of caching so it will be very difficult to run out of requests but also caching makes it super fast like holy. Next I want to work on refining the design of the search area in the middle as I only just started changing it from the default bland grey look. Sorry for such a long devlog, I didn’t realise I was going to have to link hackatime and create some devlogs because for some reason I never looked at my project page until yesterday.
