You are browsing as a guest. Sign up (or log in) to start making projects!

custom new tab

  • 5 Devlogs
  • 7 Total hours

making my own custom new tab page!

Ship #1

a cool lookin new tab page to ditch the default unaesthetic page. this is a functional and responsive new tab page that provides modern aesthetics and limited customizability. has multiple search engines available (google, duckduckgo, brave, startpage). also features a news section where news are classified into categories (all, tech, science, business, sports and entertainment). the background images are updated from nasa's apod (astrology picture of the day). your preferences and settings are stored in local storage so you dont have to customize themes and accents everytime you open the tab. challenging part in this entire project has to be working with the APIs had some difficulty since the website is hosted in github pages with no real backend server of any sorts.

Try project → See source code →
Open comments for this post

46m 5s logged

minor fixes and shortcuts

had problems to fetch news since i used github pages to host my site and no backend server of any sort. so i had to use a proxy api to get it work properly. further added keyboard shortcuts such as ‘/’ and ‘cmd or ctrl + k’ to focus on the search bar and escape to come out of focus. i think this project is done for now.


things to improve later

  • custom favorites
  • region specific news
  • weather forecast
0
0
27
Open comments for this post

3h 9m 10s logged

themes, accents and news section

did a quite a long work session made so much progress and the project is nearly done. made the dark and light theme options. made use of css variables for that. added a few choosable accent colors. used gnews api to fetch news and classify them into a few categories and display them in cards. site is also furnished to be responsive and usable in pretty much any device. further drafted a readme.md file. i also added a tiny animated down arrow thing that is visible at the bottom of the site to show that scrolling will get you to the news section.


next up

  • minor fixes and changes
0
0
21
Open comments for this post

1h 10m 22s logged

dropdown search engine selector

worked on the dropdown search engine selector and it turned out to be working well. this was the most challenges part to setup. after that i was fooling around with the css styling for the background and made like a spotlight like style for the search bar when clicked (i tried doing overlays and stuff but it seemed too complex for me). further i added an info button which on click takes you to the nasa apod info site.


next up

  • news part
  • settings panel (with theme selections and more)
0
0
14
Open comments for this post

33m 48s logged

apod background works

did a quick work session and got done with the apod background using nasa’s api. i also got to know that at times the apod might be videos (that is not only images) so i made a default background file that would be shown if the api is not able to fetch image, if the apod is a video or any other problems occur.


next up

  • dropdown menu for search engines
  • news section (might make a customizable one where you can chose what sources to follow)
0
0
20
Open comments for this post

1h 24m 41s logged

getting started

i started with a new project. got the basic ui built with html and css. currently the search bar works (can only google) but then im looking forward to add other search engine options to it like a dropdown menu. the live time (24 hour clock) and the date part works are done and they work properly too.


next up

  • background
  • dropdown search engine switcher
  • maybe a news part
0
0
29

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…