@chaosgoat and @xandra got me thinking about a custom starpage/homepage for my browser, to have a list of websites I want to check up on and various other daily reminders, sorta like a more fancy version of my bookmarks. It’s something I’ve wanted to do for a while but since the semester started up again I finally got the motivation to do so…
behold, my startpage. featuring https://haveagood.today/ as an embed to show me a blingee every day, a <textarea> form to type my mealplanning in (because I often struggle to figure out what to eat), my local weather, my current pokemon team I’m playing with, and of course 4 links I need to check every day!
I recommend everyone to make their own custom startpage if they wanna practice some coding without the stress of it being live on their website. It’s ONLY for you! Nobody else has to see it. Except for right now, when I am asking those with a custom startpage to please share your designs if you want :D
oh, this is a neat idea! i think i will try and make one for myself, it seems like it’d be grounding and useful for me! i’ll definitely post a screenshot when i’m done with it.
ta-daaa! i just showed it to my housemate and they were so impressed they asked for my code and are gonna make one too! they do actual work with computers and code so i feel pretty good about that :^)
i definitely want to add more clutter, a div with a textarea for jotting down notes, links to more stuff to do (daily puzzles like wordle, murdle, crosswords, etc…), probably more things that i often forget and need to write down that i am forgetting right now… but! for now it is done! jay linked the codepen they used for their tape on discord so i used that too.
the “clicks” header and the green “bored” are animated so they’ll draw my attention!
Wahh I love the corkboard and the silly characters and such<3 Its so cute!!! I should put more little decorations on mine…
omg the email embed…genius. I love the color palette!!! I’m totally stealing some of the ideas shown here lmaoo. A dropdown for games in progress is so smart… I love seeing everyones ideas and starpages keep em coming im totally gonna upgrade mine sometime soon >:)
the weather embed is here, the time/date embed is here (both customizable!)
the “bored” css animation is swiped and modified from melonland’s “tossing” animation, the “clicks” css animation is swiped and modified from this codepen, the rainbow gradient text is swiped from this, the box shadows are swiped from this… and i forget where i got the little star for the list bullet points.
the colors are mostly eyedropped from the background using this color picker, the tiled background is public domain edited + uploaded by me and the “clicks” frame is clipart also edited + uploaded by me! both are on my graphics pages !
thank you thank you!! the embed is a google calendar of interesting events and things happening in my area that i could do outside of the house. i’m not great at keeping up with it (i have a Lot of places i check and manually enter all the info into my calendar for, it’s a pain), but i’m hoping having it prominently displayed like this will help me to keep it in mind! same with the video games… i keep forgetting that i’m in the middle of a bunch of stuff…
i’m looking forward to seeing your upgrade!
Start pages are hands down, my fave kind of webpage to make.
here’s my morning newspaper for dwellers in that little village in the middle of nowhere, where it’s always nearly teatime and 1973 has never ended and there’s something in the hedgerow. It makes heavy use of randomisation, to give the illusion of new content every day, and is backed by years of work on collecting quotations and images and the like.
I’m also building a javascript-driven one as a text-based life planner for my family, but that’s not close enough to be done to share yet.
The concept of building a webpage with yourself as the primary user is really underrated, it’s a whole new dimension of how to use this tool.
It’s been a while since I’ve made myself a startpage, so a few days ago I decided to make a new one, totally unrelated to that I got fixated on frogs again.
I’m back in my frog mood again so I made a startpage that has frogs on it!
It has the date, time, & current day of the week on there! (I’ll need to post another screenshot next friday to show you what I mean ) I also downloaded a ton of frog images & made a script that randomly loads 1 on the page. It also has basic mobile queries & a light & dark scheme. There’s a list of pages I like to go on, plus something I’m really excited about; a frog themed playlist!
For the page I was inspired by the look of misskey.io a federated social network. I really enjoyed the site’s visual style despite how laggy it is on my laptop so I wanted to recreate it in some way, which I think fits perfectly with the frog theme I’m going with.
I still need to tweak it (better way to display links.) but currently I’m happy with the results!
Oh it’s a js script I made that checks the current day of the week & replaces the inner text of the <h1> element to said day.
Then I added an if else statement that basically checks if the day is Friday. If it is it replaces the <h1> inner text & the inner text of he <title> with something else. Right now I’m finally working on modifying the <ul> part of the page. Making a list for all the other days.
Here’s the snippet, I cleaned it up a bit but kept some comments just in case:
// Checks the day of the week.
const currentDay = new Date(Date.now()).getDay();
// Makes it into a string & the day of the week.
const dayOfWeekName = new Date().toLocaleString("default", {
weekday: "long",
});
// if else statement checking if it's friday.
if (dayOfWeekName === "Friday") {
// if friday replaces a ton of stuff in the <main> with more frog related stuff.
document.querySelector("h1").textContent = "It's frog friday bitches!!!";
document.querySelector("title").textContent = "Frog friday! 🐸";
} else {
// replaces innertext of <h1> to current day of the week.
document.querySelector("h1").textContent = dayOfWeekName;
}
Finished with the bones of my startpage! I’m planning on adding more later, which is why there are such big gaps, but I think this is a good enough starting point. I used 98.css for the styling.
) I also downloaded a ton of frog images & made a script that randomly loads 1 on the page. It also has basic mobile queries & a light & dark scheme. There’s a list of pages I like to go on, plus something I’m really excited about; a frog themed playlist!
