King Howler

Added JPT. Makes my images dynamic as well allowing it to auto-resize ensuring a fast load on websites.

Dynamified:
- Navbar
- Footer
- Timeline
- Projects Catalog
- 'More' page to display all pages

Fully Dynamic Timeline. Automatically generated from an Array of Events!!

Made a new Demo Page

Finished:
- Deployment
- About Page
- Help Page

OO2 Reboot is officially finished.

Finished the eports & imports

Now only the Help page is left, Additionally I'm thinking of adding AOS to it, but there really aren't many places where I can use them. About and Index will be the only 2 pages using them.

Created my Project Schema. Using my current setup, I can auto generate Cards at the landing page for my projects just by filling in the variables and create a new page for each.

Added Icons to my projects as well

Created Project Cards

Added AOS. Surprisingly easy way to make the website more....pop-out

Hackatime API broke so I had to update my website to use a manually set start time which I was able to find from my wakatime logs.

After that I went ahead and created this skills section using devicons.

Started working on the exports patch. Finished JSON Export (for SVG Plotter)

Also cleaned up my commit history to make it look more professional.

To my great dismay, it would seem that statistics are simply too much for common browsers and computers, I will look for a way to add Background Workers after the Exports and Help.

Here is an example of what it's capable of right now.

Fixed a few bugs in the time scale mode and switched buffer cleaning. Instead of clearing all it will remove earliest vals and append lattest giving it a true Oscilloscope Look.

Completed the following:
- Status Bar
- Clear
- Refresh Rate

Remaining:
- Import/Export
- Statistics
- Help page

After a gruesome 7 hours, I have done the Serial Communications. With the most part done, all that's left are the finishing touches:
- Exports
- Import & Clear
- Refresh Rate
- Status Bar
- Statistics

After all of these, I just need to create the help page and we should be good to go!

Created Status Messages

In SVG Exporter :All buttons are working as expected and the ability to export/import the configs has been added. Just need to add some Status Messages to make it easier to navigate through. And this page will be done and finished.

Done with the SVG Dynamifier and the crude generation code. Now I just need to do the following inside my SVG Maker:

• Status Messages
• Data -> yGap
• Downloading Generated SVG

Approx 1-2 hours of coding.

Then I'll be left with Plotter. I'm also going to add a help page with instructions and an about page so that might take a little longer.

Improved and Finished UIs for Plotters and SVG's

Remaining (only TS parts left now):
UI-Handlers (Dynamifiers)
Serial Comms
uPlot-Handler
Live-Stats

Imporved NodeJS setup using Spawn, Exec and ExecSync to check for dependency insurance and Parrallel Processing between Isolated steps

Applied namespaces to my TS, had to spend a long time to debug how it worked because Terser would remove everything (I did not know that I had to explicitly use 'export' even though this wasn't a module). Restructured it finely and created a uPlot wrapper. I've also added a dual-host script which means I can run Jekyll and HTTP-Server in parallel. Hence being able to edit the UI on the go instead of ON and OFF repeatedlly.

Mostly done on the redo, all that is left is:

1. Serial Communication
2. Fixing Plotter page UI and adding uPlot + Serial to it
3. Fixing SVG Plotter Code (need to create it as a class)
4. Fixing SVG page UI and adding the edited SVG Plotter code to it

Created SVG Page, fixed the bug in the dependent project. Improved my NPM setup so that anyone can easily download and locally use it with only 2 requirements: Ruby and NodeJS.

Also finished the TS for my Setup page with complete scoped Controller for the form. Allowing a controlled environment.

Setting up the new TS written config storing. I'm using a jekyll plugin I previously made to handle the links in the head assets, and I just found a bug in it. It really limits my automated setup for testing and production. So I'm gonna go ahead and fix it.

Styled the plotting page

A bit of NodeJS later, I have now automated most of my repo.

• Build with CDN Assets
• Local Host with Local Assets across entire Router (test on phone without publish)
• TS -> Terser compressed JS

Created a setup page

Rebooting

Added Bootstrap and created my index page

Created Base Demo and Benchmarking page. Overall, the library is very good imo.

Initialized a Docusaurus Website

Created the Demo Page

Done writing the main code, created a dist, added auto-deploy

It was a long time, since I'm brand new to TS. BUT I HAVE DONE IT!!

SVG Generator is done additionally I have made it so that anyone can use it.

It is isolated and works a bit like C++ OOP. Each instance is completely self contained and will only affect itself. You can make as many instances you want.

With the app complete, now comes the re-iteration. I know it may seem like I am redoing this for extra shells, but the truth is that this project needs to be really good so I'm doing iteration development which let's me do this very well. This is probably the final iteration as I move all my code into TS and then use a GitHub action to deploy it with compiled JS.

I'll also be using Bootstrap for a more modern style.

I'll also isolate the SVG maker, so that others can use it easily in their own apps.

For now, here is my JSON definition, JSON plays a very important role in this app as it is responsible for seamless data transfer.

Instead of manually clicking to preview, I am now auto-updating at any change.

Also formatted my files a bit and hid y_gap option on log graphs, since they are linear-only options

DONE WITH THE CLEANUP FINALLY

Just need a few more tweeks.

1. Update Help

2. Update Documentation

3. Add JSON export to plotter page

4. Add JSON MCU Command to auto export

5. Figure out a way to input svg config from the MCU allowing for auto SVG Export

Added the download options. I also found a bug with the logarithmic axes and spent some time trying to fix it up. The project is essentially finished, but there is one extremely important and difficult step I must do. Cleaning!!

Most of the code was written when I didn't know JS much so I need to fix it. Replace the numerous constants with a single JSON object so I have more variable names to work with in the future.

Successfully inputting from the config page!!

All that's left now is the downloading. I will also add the option to download the data as a JSON

Created the Config page with a preview. Now I need to take input from said config page

Chrome doesn't allow Unpublished extension installs. To use it on chrome you need to download the source code and install it via the Install Unpacked option in dev mode. Detailed instructions are given in the README.

Added Fill. Also enabled the use of alpha for line, point and fill.

Now my svg generator is done. Next I will hook it up with my oscilloscope and create a dedicated configuration page specifically for SVG Export.

SUCCESSFULLY CONNECTING THE POINT ON MY FIRST TRY!!!

Surprisingly easy, I was worried that it'll be difficult cuz of the null vals

Added null val handling, so you can add empty values.

I have once again reached the Scatter Plot milestone. However this time my code is cleanly structured and supports log scales as well. Unlike before where it was limited to linear scales only

CREATED THE Y_SCALE!! WITH LOG SUPPORT THIS TIME!!

Making swift progress I have done the x_scale.

Now the problem is the y_scale. Linear is easy, the issue is with log. How do I decide on the gaps?

I've decided on the config options for the svg export. The user will be redirected to an HTML form with a live preview where he will be able to change his config as per his requirement.

Created the data parser! It isolates all of my data into separate arrays allowing me easier usage instead of complex index and scaling!

Here's an example from the console log.

Mapped my points successfully!!

However, the code is literal garbage. I'll redo it, once again, from scratch. Now that I have a good idea of how it is supposed to be, it should be pretty good! I'll start with a parser that will convert all of my current data into something easily usable. I can then use this parser to transfer only the important stuff to the svg exporter page!

I'm redoing the svg export, with cleaner code, greater functionality and a lot of customization. I'll redirect the user to a new page for the customization options.

Updated the README!!

Here is an example of the SVG export without the fill area option (the previous example doesn't look very good)

Just made an SVG Exporter, also added MCU commands for SVG and PNG Export triggers.

The SVG doesn't export logarithmic scales for now, but instead of failing the chart is exported with linear scales.

Hackatime removed the CORS Policy!!!! I've removed the proxy server from my source code.

I've also made the data to be extracted as soon as possible instead of after DOM-Content-Loaded. I've also added a nice loading text incase DOM finishes before Data.

Creating an automated projects page. It will automatically categorize and show all my projects, however it's still a bit bland. Instead of normal links, I need to generate something stylish. Maybe create slideshows with links?

Tried to make an SVG generator using AI. Ended up wasting an hour with nothing to gain.

Managed to get the hacaktime data via a public proxy server!

Created a dynamic more page. It's empty for now, but it is completely automatic. Everytime I create a file, a link for it will be automatically generated over here. This will be the complete glossary of sorts, everything will be alphabetically stored.

Created a nav-box at the end of the home page

Just added a Hackatime page!
I want to add the total coded time as a whole, but Hackatime API is blocking external requests.

I might have to extract the data from the svg itself :(

When I compared my original bootstrap prodced css with the one after running PurgeCSS, I was very impressed to see the 13727 lines of code become 48 lines.
I formatted the file to re-add all the white space to find out only 30 lines of code was removed.
Those 48 lines were actually 13699 stripped down and moved onto the same line.

Added Dual Deploy!! Now I can host my new and old website together!!

Although I still can't seem to get it to be automatic. I have to manually trigger it.

Trying to silence some deprecation warnings.

Removed a bit of them, but the following still remain in the sass
-> @import
-> Global Built-in Functions
-> Color Functions

I'll probably leave them as is, since most of them occur from my local bootstrap downloads

Created a responsive Intro to myself!

Made my footer! Also completely dynamic!

I tried to fix up all of my @import sass deprecation warnings, but it turns out bootstrap already uses them. I'll create a ruby gem and plug it into my website, but for now I'll stick with @import until bootstrap creates their own solution.

Just finished and shipped!!!

Using the TemporaryGPT userscript, you will be automatically redirected to the temporary chat of ChatGPT. Just a little add-on but it will also close the sidebar so you that you can focus on your chat.

A great thing about this is that it will only work on the intial load, meaning it won't block you from going to a new chat or other parts of the website.

Downloaded the Bootstrap SASS and started using it locally.

Now I have complete control over the color scheme, and now I will have reduced a file size when since I will use purgeCSS during build.

Finally created a completely dynamic navbar. It automatically detects my number of pages. to create a link for each of them.

Then simply by filling some variables it will create a dropdown for each section of the page that I tell it to go to.

THE BEST PART? THIS IS ALL BUILD TIME ONLY. THE USER NEVER HAS TO RUN ANY SCRIPTS!

After fiddling around to get a hand of things, I have reverted back to the scaffold and doing it properly and ethically from scratch.

Just finished the basic code.

Will consider adding more features, though there really isn't anything that I can think of.

Created the release: https://github.com/MUmarShahbaz/YT-Playlist-Length/releases/tag/v1.0.0

Added a Demo and instructions for installing on Chrome.

Just finished the project

It's working as it is supposed to. Will make a release soon

Fixed Timescale issues when importing a .csv with time.
Added a CSV char to automate downloading of data via the MCU Serial Input.

Just added the CSV Import/Export and PNG Export.

Will add a CSV exporting special char to automate storing via the MCU