2023-11-19
Goal
To access updated Static Files for the Taskmaster App so I can start applying AJAX functionality.
Pomodoro
Nah, I got that dawg in me
Notes
I can see that my CSS changes have not been implemented when I check my Browser Inspector, it's the same old CSS file that I had before. When I change the code in it I see the changes that I actually wanted to apply. Therefore, I'm fairly certain that the issue has something to do with one of the following:
- Access to the right static files
- Browser Caching
- Django staticfile handling
Debugging the Goal
Access to the Right Static Files
The request records from the output log show that I'm accessing the right files on my computer:
[19/Nov/2023 08:06:31] "GET /task_log/ HTTP/1.1" 200 19057
[19/Nov/2023 08:06:31] "GET /static/css/bootstrap.min.css HTTP/1.1" 304 0
[19/Nov/2023 08:06:31] "GET /static/css/jquery.bxslider.css HTTP/1.1" 304 0
[19/Nov/2023 08:06:31] "GET /static/css/style.css HTTP/1.1" 304 0
[19/Nov/2023 08:06:31] "GET /static/js/jquery-3.1.1.min.js HTTP/1.1" 304 0
[19/Nov/2023 08:06:31] "GET /static/js/jquery.bxslider.min.js HTTP/1.1" 304 0
[19/Nov/2023 08:06:31] "GET /static/js/script.js HTTP/1.1" 304 0
[19/Nov/2023 08:06:31] "GET /static/js/jquery.slicknav.min.js HTTP/1.1" 304 0
[19/Nov/2023 08:06:31] "GET /static/img/favicon.png HTTP/1.1" 304 0
Specifically, the file I'm altering / adjusting in VS code is referred to here:
/static/css/style.css HTTP/1.1
So at least I know I'm accessing the correct files.
Browser caching
The responses of requesting these assets are bunch of 304 Response Codes. This means that they're actually accessing a version of these files that are cached in the browser. Applying a Hard Refresh using CTRL + ALT + R didn't solve the problem, and I know that these assets were called directly because I got a bunch of 200 Response Codes for these assets:
[19/Nov/2023 08:16:54] "GET /task_log/ HTTP/1.1" 200 19057
[19/Nov/2023 08:16:54] "GET /static/css/bootstrap.min.css HTTP/1.1" 200 19123
[19/Nov/2023 08:16:54] "GET /static/css/jquery.bxslider.css HTTP/1.1" 200 1165
[19/Nov/2023 08:16:54] "GET /static/js/script.js HTTP/1.1" 200 571
[19/Nov/2023 08:16:54] "GET /static/css/style.css HTTP/1.1" 200 5177
[19/Nov/2023 08:16:54] "GET /static/js/jquery.bxslider.min.js HTTP/1.1" 200 6063
[19/Nov/2023 08:16:54] "GET /static/js/jquery.slicknav.min.js HTTP/1.1" 200 2653
[19/Nov/2023 08:16:54] "GET /static/js/jquery-3.1.1.min.js HTTP/1.1" 200 30070
[19/Nov/2023 08:16:54] "GET /static/img/favicon.png HTTP/1.1" 200 413
Upon taking a closer look at these logs, it looks like the value at the end of the line represents the number of bytes required to process that asset. It's 0 when getting the 304 response code, so that probably means it wasn't a problem to load it after it was cached. I tried opening the browser in an incognito window to clear the cache and it still didn't load the new file.
Django staticfile handling
I tried running
python manage.py collectstatic
but after deliberately changing style.css I got the following response:
0 static files copied to 'C:\Users\Billy\Desktop\DIMMiN\app\dimmin\static', 1381 unmodified, 3316 post-processed.
Come to find out that there is a pretty big difference between STATIC_ROOT and STATICFILES_DIRS.
STATICFILES_DIRS- Where to find any and all static files for the project
STATIC_ROOT- Where we can compile all of these static files from the overall project to access them in one place
When we run
python manage.py collectstatic
We copy Javascript and CSS files from directories throughout the project (seen in STATICFILES_DIRS) into the STATIC_ROOT folder. This means that each app in our project can be treated like its own little sub-app whose static files are handled
The naming convention is typically
dimmin/
blog/
static/
blog/
js/
my_app_specific_script.js
css/
my_app_specific_style.css
images/
some_image.jpg
where in this case our blog app is doubled up on naming (/blog/static/blog) to avoid naming conflicts with other static files in the app.
This actually makes a ton of sense. If I were to collaborate with other people on a project, we could each work on our own app and have css / js that doesn't need to interfere / interact with a main file. As long as we all collected the assets to the same place that shouldn't be a problem.
So I added these app-specific static file directories to all of my apps in my dimmin project (about, blog, and task_log). Static files that were shared across the entire project were moved to the static_common folder. This means that I can probably reference specific Javascript and CSS elements for my individual task_app without having to change anything else! Best part is that Django has built-in support for this convention, so running collectstatic should be able to collect those assets without the need to add them to the overall STATICFILES_DIRS folder. I can now see my changes being applied to my website. Yay!!
Aside - Crisis Aversion
I also followed this post and running
python manage.py collectstatic --noinput --clear
which just ended up deleting all of my static files. Probably should have actually read the resource that the user provided warning against it but it's not a huge problem because I was keen on using Version Control to prevent against a catastrophe like this. I was able to use
git log
to get the list of different previous commits, then
git reset --hard [commit-id]
to restore my local files to the way they were. This was a useful exercise in learning how to Git Reset to a previous version
Bootstrap
After running
python manage.py collectstatic
I ran into an error about a missing Bootstrap reference:
The CSS file 'css\bootstrap.min.css' references a file which could not be found: fonts/glyphicons-halflings-regular.eot
The notes at the top of the bootstrap.min.css file stated that the app I was using involved Bootstrap v3.3.7, so I downloaded Bootstrap v3.3.7 and thankfully it contained the fonts folder that was missing. Within the fonts folder were the glyphs that the error mentioned so adding this fonts folder to my project's static_common folder helped solve that issue.
Extending the Base Template
After fixing bootstrap and collecting my static files into one place, I found that the app still couldn't access them yet. This was because I needed to extend the base.html to allow for app-specific CSS and Javascript files. To do this I added the extra_css block to the <header> section of the base.html file:
{% block extra_css %}{% endblock %}
and the bonus_js block to the very end of the file:
{% block extra_js %}{% endblock %}
Now my apps can access their own CSS / Javascript files! YESSSSSSSSSS! Now I can get back to working on my task_log project. Looks like my staticfiles were removed on 2023-06-01 haha whoopsies.
Task App
Re-branded to Taskmaster
The first thing I'm gonna do is rename the Taskmaster App from task_log to taskmaster because it sounds cooler. To do that I force renamed every task_log to taskmaster and changed file names from task_log to taskmaster. I also deleted the previous migrations, then made new ones with
python manage.py makemigrations
python manage.py migrate
Finishedf
Responsive input
Since all of that is out of the way and I can finally access my damn files I can finally try and apply the AJAX forms for the buttons.
Results
- Cleaned up my screwed up static file management system and learned the true meaning of christmas: that all apps can have their own custom static files.
- Now I can actually alter and adjust the CSS / JavaScript for each individual app