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

Some new tab

  • 2 Devlogs
  • 4 Total hours

A mini new tab page with Nasa cosmos pictures backgrounds.

Ship #1

I made a new tab page with direct search form for duckduckgo. In the back end it uses an API from Nasa to fetch a new cosmic image every 24 hours and uses it as a background.

Javascript in the front end cares for updating the time and date displayed each second.

I made a custom CSS structure around everything and finally got to use 2 year old CSS code for the colored heading.

I didn't use the missions guide and build everything without it (while still reading it to not make something too far of)

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

1h 5m 26s logged

Minor improvements.

  • I updated the design a bit
  • Added java script for automatic date/time updating
  • Improved the API from PHP a bit

The java script

I just take the h1 and h2 tags and set their inner text every 1000 ms (1s) to a date.
Time was easy because we just use new Date().toLocaleTimeStrin() for the date i hade to get a bit more creative ${("0" + dt.getDay()).slice(-2)}.${("0" + (dt.getMonth() + 1)).slice()}.${dt.getFullYear()} ${weekdays[dt.getDay()]} / ${months[dt.getMonth()]} All this is there to have leading zeros that only appear when the second digit isn’t used (0-9). Also i convert months and days with help of arrays to short strings that are getting placed at the end. I personally need number & name because i really can’t memorize the names for the months.

The PHP

The PHP code is now also caching the image from the Nasa API so that clients don’t have to call any other servers. I also made the php script read from the API key file, trim spaces and other characters that are there for some reason and than use it. Of course i also added the .htaccess file to block access to the API_KEY.txt

Furthermore i added headers to stop clients from caching so that when a new image from Nasa replaces the old one the clients get the new image displayed. May be not the best solution but it works!

Another thing I would like to add is that I made it so that when a image from the API is requested with special copyright it gets displayed in the footer. If the API doesn’t give an copyright notice the PHP script just default to Nasa.

0
0
2
Open comments for this post

2h 41m 22s logged

So we got this new mission for making a new tab page with some API stuff.

Well… I did started it. I have made a simple website that can be used as a new tab. With a HTML form automatically going to duckduckgo. Therefore I actually still don’t have any Java script to work with currently. But you may ask how did I then requested thing from the free Nasa API. I do it through PHP. I have already made several applications with PHP so instead of following the tutorial I build everything without it (again…) was it a mistake? maybe? But now my PHP script asks every 24 hours the API endpoint for the updated info and than caches it until next time. This way clients only request from my website files + the API key is stored on the server and only used by the server + rate limit will not be a problem (i do 1 request per day, Nasa blocks at 1000 or something like that)


What i want to add with Java script is actually updating the time and date (currently server sends its time and it never gets changed) and i want to add shortcuts a bit like duckduckgo’s vim keybindings.


Maybe i also just make a quote of the day thing. Because, in my terminal, I have a Fox ASCII art that tells me every day a new quote.

fortune | cowsay -f fox
1
0
18

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…