Stickytab
- 15 Devlogs
- 31 Total hours
Better New Tab page designed for productivity and organization. Create stickies (stored locally), save and quickly open frequently visited sites, access a calculator, view a calendar, and more!
@NotSuspiciousProgrammer
on
Stickytab
1h 12m 15s logged
Okay, seriously? Over an hour of searching through my code to fix a single calendar bug I found, and that bug was caused by ONE VARIABLE DECLARATION MISTAKE. I’m glad my bug is fixed now, and the calendar works properly, but… an hour? For a single variable declaration thingy?? Can anyone else relate to this?
Ship #3
✨ Blessed
@NotSuspiciousProgrammer
on
Stickytab
This is a customizable New Tab page designed for better productivity!! A sticky manager displays sticky notes, where you can organize reminders for yourself. Add events to a calendar, which displays the current month and the next upcoming month. Save frequently visited sites, quickly search through them using the webpage search bar, and visit the site with keyboard shortcuts! Quickly view the time and date, and access a simple calculator or Desmos calculator. Set preferences in the settings area. For more details about Stickytab’s many features, take a look at my README.
In this ship, I had to utilize complex JSON for the calendar component of Stickytab. This challenged me a lot, and I was stuck with my bugs for many hours! Eventually I managed to find all the different bugs, and the calendar is a working component of Stickytab.
Please explore my Stickytab project - I hope you find it a useful tool for productivity!! Check out the README file (that’s why it’s called “readme”) before using Stickytab.
@NotSuspiciousProgrammer
on
Stickytab
5h 55m 50s logged
FINALLY!! The calendar component of Stickytab has been completed! Now, you can add events to the calendar, to the current month or next month. Events can also be removed if they’re cancelled. The events are saved locally to your browser, and their aesthetics can be customized through Stickytab’s settings.
@NotSuspiciousProgrammer
on
Stickytab
1h 33m 6s logged
Sneaky bugs… always hiding in the darkest corners of my code. In continuation for working on the calendar component of Stickytab, I fixed all the bugs I could find. I also improved the aesthetics of the calendar, and started some code for the special calendar customization components!
@NotSuspiciousProgrammer
on
Stickytab
2h 58m 45s logged
The core code for a calendar was added to Stickytab! Since I usually use saved sites through the webpage search bar, and not through directly clicking the link in the list on the right, I decided to put a more productive tool in the right-hand side of Stickytab. Sites can still be saved through the “Saved Sites” button - and they are very usable through the helpful webpage search bar! Next I will work on adding cool functions to Stickytab’s calendar!!
@NotSuspiciousProgrammer
on
Stickytab
51m 1s logged
Responsiveness added - sort of! After the second ship, a lot of people talked about the peeving-ness of restricting Stickytab to a 16:9 landscape screen ratio. I edited all three main files - the HTML, CSS, and JS - to support other screen ratios. Stickytab still works best with a 16:9 landscape screen ratio, but now it is physically possible to use it with a different ratio.
Ship #2
✨ Blessed
@NotSuspiciousProgrammer
on
Stickytab
Stickytab is a better New Tab page designed for productivity and organization. You can save sticky notes and fill them with reminders, quickly access a calculator, and save frequently visited sites. View the date and time (both 12-hour and 24-hour time formats are supported) and quickly access the README for help anytime.
When you enter a URL for a webpage, there is a popup that searches through your saved sites to find a saved site that matches the URL you are entering. You can filter through the results using the up and down arrow keys, and use the enter key to open the site. This can save a lot of time when you are opening websites!
You can create reminders for yourself by posting sticky notes on Stickytab. (That’s why it’s called Stickytab!!) Up to twelve stickies can be viewed on the page; additional stickies can be viewed by pressing the corresponding button.
Preferences for the default search engine, time format, and Desmos calculator shortcut can be edited and saved locally.
One of the most challenging parts of Stickytab was using the browser’s local storage; I have never done that before! The other challenging part was creating the recursive JavaScript function that searches through your saved sites. I somehow managed to fix all my bugs.. and ended up with a complete and fully working New Tab page.
Hope you enjoy Stickytab! Feel free to test it out, or look through the README for more information :)
@NotSuspiciousProgrammer
on
Stickytab
1h 49m 31s logged
Updated the README and fixed hidden bugs throughout Stickytab. I think I’m ready to ship!!
@NotSuspiciousProgrammer
on
Stickytab
2h 13m 40s logged
Squashed all my bugs and added KEYBOARD SHORTCUTS to the search autocomplete! Now it’s easy to navigate through and open saved sites; the up and down arrow keys move through the list, and the enter key opens the site. If you start by typing “s”, then it finds all your saved sites that begin with “s” (not including the http). If you continue by typing “t” to make “st”, then it finds all your saved sites that begin with “st”.
To-do:
- Update and improve the README
- Preference and site saving with a .json file?
- Add dotfiles to the repo
- Add font tags to calculator
- Add thing where using the arrow to go to the very bottom of the autocomplete list and beyond the bottom will exit the autocomplete to go to root URLs instead of saved ones
@NotSuspiciousProgrammer
on
Stickytab
1h 7m 54s logged
FINALLY!! I finished the recursive JavaScript loop to filter through saved sites and find ones that match the search query. Next I’ll be working on making those results usable, through clickable links and maybe through a keyboard shortcut with the enter key.
Bugs to fix:
- One I found with saving sites without http or https
- Making this sites window close when a user exits the webpage search and left it blank
To-do:
- Fix bugs (obviously)
- Add delete button to calculator - I just realized I forgot this
- Make links clickable (and add keyboard shortcuts?)
- Make popup div’s height automatically adjust to size of the list?
- Add a feature for exporting/importing all preferences, sites, and stickies in a .json?
@NotSuspiciousProgrammer
on
Stickytab
21m 35s logged
I added a digit limit to the calculator, for both aesthetic purposes and for the bug that came with rounding JavaScript numbers. I also fixed some bugs regarding local storage saved preferences. Next I’ll start working on what might be the hardest part of Stickytab: a partial autocomplete for the webpage opener using saved sites.
@NotSuspiciousProgrammer
on
Stickytab
28m 55s logged
Added calculator customization! There’s a Desmos button on the calculator that allows you to quickly open the Desmos calculator. Now, you can customize your preferred Desmos calculator, saved locally to browser storage.
@NotSuspiciousProgrammer
on
Stickytab
2h 42m 45s logged
I finally finished the calculator! Its code was significantly more confusing than I thought it would be, but I somehow managed to fix some of my bugs..? There’s a limit to how many digits are shown, but not how many digits are stored, and JavaScript slightly rounds the digits, so I should work on adding an actual digit limit.
Ship #1
@NotSuspiciousProgrammer
on
Stickytab
I made a fully working NewTab page! I call it Stickytab because of my favorite part: you can stick sticky notes on the new tab page! The sticky notes are saved locally to your browser, which means that you can save your sticky notes and see them later, even after you close the page. You can also save sites (kind of like browser bookmarks, but with easier access) to the new tab page, also saved locally to your browser. Figuring out how to access and use local browser storage was the hardest part for me, because it is something I have not done before in JavaScript. It definitely took a lot of W3Schools articles!
@NotSuspiciousProgrammer
on
Stickytab
5h 49m 34s logged
Finished the code for the site saving feature. Now, favorite sites can be saved (locally on your browser) and accessed anytime.
The sticky manager is finished for now. I also completed a settings page which can store preferences for time formats and search engines.
Time to decide between adding any finishing touches, or shipping this completed project!
@NotSuspiciousProgrammer
on
Stickytab
26m 41s logged
I completed core code for stickies and updated the README. Next I’ll be adding to the other empty spaces of the newtab page. I’m planning for a calculator and saved shorctuts for web addresses, but this is usually what happens when I plan my coding:
- I plan things
- I plan some more
- I don’t follow my plans
Anyway, regarding the things I’ve completed for this devlog:
- I used a different code editor for the stickies (so that I could compile all the graphics into a single HTML file) and I couldn’t figure out how to add Hackatime to it. Hopefully it’ll be fine..?
- I updated the README with, well, more detailed instructions. The README is still a little vague, so I should add to it later.
I can’t think of anything else for this devlog. Back to coding!
@NotSuspiciousProgrammer
on
Stickytab
2h 55m 29s logged
I added basic search engine capabilities to Stickytab! In addition to this, there’s an iframe that’s ready for a file containing the code for the best part of this project: the stickies!! I guess it’s time to start working on those sticky notes before I move on to the other blank parts of the page.
@NotSuspiciousProgrammer
on
Stickytab
15m 59s logged
Added basic code files for my Stickytab project!
