2023-07-27

Goal

To add the bubble effect from Floaty Notes to the background of the local version of the DIMMiN App.

Pomodoro

30 minutes work 5 minutes rest - done for 3 sessions.

Notes

I learned that STATICFILES_DIRS is used to reference static files on the local runserver while STATIC_ROOT is used to reference static files in Production. In Django, STATIC_ROOT is implemented when the collectstatic command is called in production. While both are important to have, for some reason they can't be the same folder. Before, I had static and staticfiles folders for STATICFILES_DIRS and STATIC_ROOT respectively. Now I don't have a STATICFILES_DIRS explicitly defined but it still works fine on local for some reason. Not sure exactly why that is but we'll see if we hit any problems when we try to push to Heroku in production.

I originally thought that the reason I wasn't able to change the styling of the page via the style CSS was because the static folder wasn't appropriately pointed to. However, I tried deleting all of the CSS except for certain portions and found that I was able to use CSS the way it was intended. Specifically, I was able to alter the background parameter of the body tag to change the background color of the website (changing from white to red to make a dramatic effect).

For some reason, I have control over this until I hit the Navigation section of my style.css file. That is, if I delete all the CSS code after section 5 in my table of contents (everything after Top Icons) I can adjust the parameters and background color of the webpage. After I add Navigation back in though I can't change anything anymore.

I have no idea why this is but I'm glad to see that changes to style.css are showing up on my local. Knowing that the body tag is where I can adjust the background of the page will be essential for knowing where to position Floaty Notes on my webpage.

Results

  • Learned about the different paths required for static files (but still not exactly sure why)
    • Maybe the collectstatic command reduces file sizes or improves efficiency of the original STATICFILES_DIRS in production or something
  • Found out that the style.css page is in fact being referenced
  • Found out that the background parameter in the body tag in style.css is what changes the overall background of the site
    • This is where the nodes for Floaty Notes will need to float around
  • Found out that I can no longer alter this parameter after the Navigation section of style.css.

Next Time


Previous Note 2023-07-25 Next Note 2023-11-16