A very customizable homepage (more soon).
Experimental New Tab Page (Chrome Extension)
Just set https://start.the404.nl/ as your homepage in your browser.
Head over to the Releases page and download the latest version (or just git clone).
Extract the .zip file to your preferred location, and open index.html in your browser. Once you set this as your homepage, you're all set!
404-Start uses the OpenWeatherMap API to get weather information. When configuring the weather display, you'll need to provide the ID of the town/city you want to display.
To find this ID, head over to the OpenWeatherMap website and search for the town/city you want to display. You'll find the ID at the end of the page's URL. This is the value you need to put in the 'City ID' field.
- Reimplement todo list
-
Shadow colour is now configurable.
- Bump theme data version to 4: New
--shadow-colorvariable in userCSS.
- Bump theme data version to 4: New
-
Renamed
colours.csstotheme-default.css, to better reflect it's purpose. -
New screenshot in README.
- Minor layout fixes to the configuration modal.
- Search box is now cleared after a search is made. (Fix for #7)
- A warning is now shown to indicate when the
weatherBoxMarginsetting is disabled with Custom Layout active. (Fix for #6) - Added some slightly more verbose descriptions to the Link config section. (Fix for #5)
- An indicator (⚠) is now shown at the top of the config modal, indicating there are unsaved changes. (Fix for #4)
- You will also now be prompted to save your changes if you attempt to close the config modal or unload the page before saving.
- The positions of UI elements is now fully customizable.
- This feature is still in development.
- To enable this, you'll find a new toggle in the settings menu called 'UI Customization'.
- The 'Edit Layout' button will appear in the top-left corner, and will allow you to drag the elements around.
- Click the 'Edit Layout' button again to save.
- Custom Layout can be disabled at any time to return to the normal layout.
- While Custom Layout is enabled, the 'Weather Box Margin' setting will be ignored.
- Bumped config data version to 3, due to the new config key
customLayout. Older configs remain backwards compatible, back to data version 0, from v2.0.0. - Search bar now rejects empty searches.
- Changed default background image from a crusty ladybug to some lovely ducks.
- Bugfix: FontAwesome icons no longer disappear upon saving settings.
- Added a search bar below the weather display.
- Currently supports the following search engines: DuckDuckGo, Google, Bing.
- Can toggle showing the search bar, and whether it gets automatically focused when the page loads.
- Bumped config data version to 2, due to the addition of a new config key
search, containing values related to the new search bar. - Changed the way default values are filled in case of missing options due to an older config file.
- 3-Year Anniversary!
- Bugfix: Clicking "Cancel" when prompted to name the exported theme file now closes the prompt and cancels the export, rather than exporting the theme as
null.json. - Correct some weird phrasing in
README.md - Migrate to Font Awesome 6
- Theme properties now have a short description when hovering over them.
- CSS property fixes, some elements were using the wrong theme colours.
- User is now prompted to enter a name for the theme when exporting (Default is still the timestamp).
- File name is now displayed in messages related to theme importing.
- Plenty of changes to customization and configuration options.
- Can now change the spacing between the weather boxes (thanks mom).
- Slider-ified some config values (
borderRadius,weatherBoxMargin,boxAlpha,headerAlpha). - Can now change the background of the header (colour and transparency).
- Moved around some of the config options to make more sense.
- Optimized loading and saving of config from local storage.
- Added
dataVersionfield to themes, future-proofing for breaking changes.
- Hacky fix to use the unused 'sleet' and 'windy' weather icons.
- 'Wind' icon is triggered by wind speeds over 30km/h, but I'm no meteorologist.
- 'Sleet' icon is triggered by checking if the forecast description contains the word "sleet".
- Fixes and such.
- Restores old config upon failed import of valid non-theme JSON, so we don't accidentally save garbage as our config.
- More CSS fixes.
- Workaround for some Firefox-specific CSS issues.
- Made the update-checking more logical.
- Automatic update checks only happen once per session, not every time the page is loaded (Fix for #3).
- We only monitor the
404CONFIGkey in local storage for changes, not the entire local storage. - Refactored
weather.js, to make it easier to manage, and possibly more efficient.- Wind direction is now shown correctly, instead the opposite of where the wind is blowing (See v1.0.4).
- Wind speed is also shown correctly, because math is hard.
- Added some documentation on using OpenWeather and finding city ID.
- JS (mostly) documented.
- Moved fonts to
css/fonts/subdirectory. - Removed unused
css/sample-colors.cssfile.
- Reimplemented XKCD comic viewer.
- Has the same functionality as the old one.
- May or may not just be identical to the old one.
- Moves upwards if link section is hidden.
- Added a warning if the selected background image is too large for the browser's local storage.
- The max size is around 3MB, but I can't be bothered to check.
- CSS fixes.
- Date and time formats are now customizable, with the following expressions:
- Date:
- %M - Month (1-12), no leading 0.
- %MM - Month (1-12), with leading 0.
- %MMM - Month, abbreviated text ("Jan").
- %MMMM - Month, full text ("January").
- %d - Day (1-31), no leading 0.
- %D - Day (1-31), with leading 0.
- %y - Year, two digits ("21").
- %Y - Year, full representation ("2021").
- %w - Weekday, abbreviated ("Fri").
- %W - Weekday, full representation ("Friday").
- Time:
- %h - Hour, 24-hour format.
- %hh - Hour, 12-hour format, no leading 0.
- %hhh - Hour, 12-hour format, with leading 0.
- %m - Minutes.
- %s - Seconds.
- %a - AM/PM indicator.
- Date:
- Lots of general code cleanup. CSS split into multiple files, removed many redundant rules.
- Removed unused JS files.
- Added ability to export the current configuration to a JSON file, and the ability to import config from said files.
- Completely rewritten.
- Layout has been changed to be simpler.
- Killed off the todo list.
- Removed accounts and firebase storage.
- All config is saved in the browser's local storage.
- Removed some unnecessary code and files (not all, more cleaning needed).
- Work isn't done yet, more features to come.
- Reimplement XKCD comic viewer.
- Ability to import/export themes.
- Custom date/time formats.
- Ability to customize fonts.
- Bugfixes to make it not look as awful on Firefox.
- Added option to auto-refresh weather info every 10 minutes.
- Fixed a long-standing bug with wind direction arrows pointing in the opposite direction of where they should be.
- As of v2.0.2, I've realized it was actually fine to begin with, and this "fix" made it wrong, lmao.
- Added hover text to buttons that don't have any text on them, like close buttons, etc.
- Added a button to refresh weather info.
- You can now press
Enterin the password fields of the login & register forms to submit them.
- Fixed a bug regarding the colour of the animated weather icons.
- Implemented the icon I made in 1.0.2, since I forgot.
- Made the path to the user's pywal css file configurable in the settings menu.
- Honestly, I'm not sure why I didn't do this in the first place.
- Some documentation changes to match this change.
- Fixed bug where missing fields in the account db would break everything and prevent the page from loading correctly.
- Missing fields are now given default values.
- Fixed very poorly coded event deletion (Thanks 2019 me).
- Login/Register forms now show error messages when something goes wrong, inputs are cleared when forms are closed.
- Slight cleanup of
js/weather.js, much more to come. - New icon, still not 100% happy with it.
- Link settings made a bit more user-friendly, config for only 1 link is shown at a time, dropdown allows user to choose which one is shown.
- Firestore rules fixed, only logged-in users can read/write, and only to the collection that matches their UUID.
- 404-Start now (sort of) differentiates between online and local modes.
- Additional settings are shown in local mode.
- Toggle automatic update on/off
- Button for manual update check
- Toggle Pywal colours on/off (still need to set the path in
config.js, for now)
- Automatic update check on page load. This will probably get annoying, so in the future I should probably make it once per session.
- Additional settings are shown in local mode.
- Added the ability to change UI colours.
- Background colour: used for the background of all components
- Foreground colour: used for text, borders, etc.
- Highlight colour: used for buttons when hovered over
- Header colour: used for the header with the time and date
- There are only 4 colours for now, but more may come in the future.
- Added ability to toggle inverting the colours of the XKCD comic, for dark themes.
- Some styling changes.
- Added more words to README setup instructions.
- After nearby 2 years, we've finally reached a full release!
- Remove old Firebase events db
- Added account-based Firestore db, stores all preferences and things per-user.
- Since everything is now account-based, you can easily sync settings cross-device.
- Added new config modal box.
- The following things are now configurable:
- Left-side links (icons, text, url)
- Weather locations and display units
- Toggle XKCD display on/off
- Date/time formats
- Migrated to OpenWeather API, since DarkSky is being depreciated at the end of 2021.
- Still missing configurable colours, that will come soon™
- Code is very messy, will need lots of cleanup.
- Force MM/DD/YY date in header.
- Added missing changelog to README.
- Rewrote CSS to make it easier to navigate.
- Added fonts, since there's no way to guarantee they're installed on the user's system.
- Changed page title from 'Welcome' to '404-Start' for consistency.
- Added a tentative icon for this project.
- Configuration process greatly simplified.
- All config now done within
config.js, instead of across multiple files. - README changed accordingly.
- All config now done within
- Added experimental Chrome extension that will make 404-Start the new tab page.
- See setup process in README
- Created local copies of external JS, improving load times as we no longer need to fetch JS from other sites.
- Customizability changes.
- Removed hardcoded values, streamlining customization
- Added setup instructions to README
- Added sample colours. These are used as a fallback if no
pywalcolours exist. - Minor fix to XKCD fetching.
- Plenty of little things from the past few months.
- Removed redundant files.
- CSS changes.
- Project moved to Github
- Minor tweaks.
- Added modal to display weather warnings, etc.
- Added XKCD viewer at the bottom, displaying the latest webcomic from xkcd.com
- Added todo list functionality using Firebase.
- Weather display CSS tweaked.
- Initial version
- Added weather display using DarkSky API and Skycons.
Only supported when 404-Start is a local html file (advanced setup)
I'm currently working on a Chrome extension that will make this start page your new tab page as well. This feature is still experimental. You've been warned.
In js/config.js, change the ExtPath variable to the path of index.html (You can just copy the url when on the homepage, the 'file://' prefix is required). This path is where the extension redirects the browser upon the creation of a new tab.
To enable the extension, perform the following steps:
-
Head over to Chrome's extension settings page chrome://extensions.
-
Enable "Developer Mode" with the toggle in the top-right corner.
-
Hit the "Load Unpacked" button that appears.
-
Choose the base directory of the homepage (the one containing
index.html). -
Success! It should be working now.
-
Once the extension is installed, you won't need to update it again, unless explicitly mentioned in the changelog.
-
When you update 404-Start, you'll need to set the
ExtPathvariable again.