Merge remote-tracking branch 'origin/master'

README.md

@@ -7,7 +7,7 @@ I built UnTube with the goal of making it easier to manage multiple YouTube play
 
 ## Features
 
-Apart from the features mentioned above, UnTube offers more:
+Apart from the base features mentioned above, UnTube offers more:
 
 - Classify playlists into specific categories—for example, pin and favorite playlists/videos. For custom categories, you can create and assign tags to playlists.
 - A comprehensive search bar to search every corner of all your playlist. The search bar is filled with features such as filter by tags, sort results based on parameters, etc
@@ -28,16 +28,19 @@ I cannot be thankful enough for the existence of <b>htmx</b>. Most of the dynami
 -    <b>HTMX Triggers</b> htmx offers various triggers upon which it sends requests. One example is the <code>load</code> trigger. After the dashboard finishes loading, I've set up htmx to automatically send a GET request to the backend (this only happens once upon the page load) to check for playlist updates. From the backend, the update status is sent back via a HttpResponse which htmx promptly loads into a target div I specified. That way I did not need to check for updates inside the main view that loaded the page. In a way, htmx helped me check for updates in the "background". I've used this <code>load</code> trigger many other places on the site, one other example is the playlist completion time info is loaded after the playlist page is loaded.<br>
     Instead of sending requests on <code>load</code>, it is also possible to send htmx requests when any HTML element is <code>click</code>ed or <code>revealed</code>. I've used this <Code>click</code> trigger on the mark playlist/video as favorite buttons and the mark videos as watched buttons. Below, I discuss about using the <code>revealed</code> to achieve infinite scrolling.
 -    <b>Active Search</b> The whole search page heavily relies on htmx. On the frontend, via htmx the text field (as well as the select and radio buttons) is hooked up to automatically send requests with the search query to the backend right after certain milliseconds of typing. In Django, I've set up a view to receive these htmx requests and send back a HttpResponse using a template loader. htmx then loads the received response into a target search results div that I've set up. Check out this [search example](https://htmx.org/examples/active-search/) from htmx's website.
--    Infinite Scrolling For playlists with more than 50 videos, the next 50 videos are automatically loaded onto the screen only when the user scrolls down to the bottom. htmx's <code>hx-trigger="revealed"</code> and <code>hx-swap="afterend"</code> attributes helped me achieve this functionality. When the 50th video is revealed on the screen, htmx makes a GET request to the backend to get the next 50 videos (if available) and appends the HttpResponse after the 50th video. Until htmx gets back a response from the backend, it can be set up to show the user a loading spinner!<br>
+-    <b>Infinite Scrolling</b> For playlists with more than 50 videos, the next 50 videos are automatically loaded onto the screen only when the user scrolls down to the bottom. htmx's <code>hx-trigger="revealed"</code> and <code>hx-swap="afterend"</code> attributes helped me achieve this functionality. When the 50th video is revealed on the screen, htmx makes a GET request to the backend to get the next 50 videos (if available) and appends the HttpResponse after the 50th video. Until htmx gets back a response from the backend, it can be set up to show the user a loading spinner!<br>
     The main advantage of this feature was that for playlists with 100s or even 1000s of videos, it only needs to load the first 50 videos every time, vastly improving the playlist page load speed.
     
-One last feature I can share regarding htmx is the <code>hx-trigger="load"</code> attribute. All of the "background" checks that I do on some pages were made possible due to that attribute. For example, after the dashboard loads, check for playlist updates in the "background" by sending a request to the backend to check for playlist updates. Any questions on how I've implemented some of the features on this site? Please send me an email at [abukhan363@gmail.com](mailto:abukhan363@gmail.com) with your feedback and questions. I will be happy to share my code and thought process to illustrate how I implemented the site's features using htmx. 
+Additional interactive features such as the progress bar and tagging playlist were all made possible because of htmx. Any questions on how I've implemented some of the features on this site? Please send me an email at [abukhan363@gmail.com](mailto:abukhan363@gmail.com) with your feedback and questions. I will be happy to share my code and thought process to illustrate how I implemented the site's features using htmx. 
 
 
-## Libraries/External Resources Used
+## Libraries/Resources Used
+
 - [Bootstrap5]() - Whole UI of the site was built using Bootstrap.
 - [htmx](https://htmx.org) - Used this beautiful library all throughout my site to help simplify making AJAX calls and focus on building highly interactive site with just a little bit of code.
+- [fontawesome](fontawesome.com/) - All the lovely icons are provided by fontawesome.
 - [Charts.js](https://www.chartjs.org/) - All the charts that you see on the site were made using Charts.js
+- [robohash](https://robohash.org/) - Used robohash to generate a unique robot profile picture for users based on their username.
 - [Clipboard.js](https://clipboardjs.com/) - The copy-paste buttons on the site were made possible because of this library.
 - [SVG Loaders](https://github.com/SamHerbert/SVG-Loaders) - SVG loader signs found all over the site were taken from SamHerbert. All the previews of the loaders can be found at [his site](https://samherbert.net/svg-loaders/)
 - [Bleach](https://pypi.org/project/bleach/) - Utilized this wherever I took in input from the user (import playlists, video notes, labels, tags, etc.)