2024-11-06-Wednesday
created: 2024-11-06 06:06 tags: - daily-notes
Wednesday, November 06, 2024
<< Timestamps/2024/11-November/2024-11-05-Tuesday|Yesterday | Timestamps/2024/11-November/2024-11-07-Thursday|Tomorrow >>
🎯 Goal
- [x] Resolve Issue 20 - Auto-Formatting Blog Post Media.
🌟 Results
- Resolved the Auto-Formatting Blog Post Media issue
- Created a place for custom CSS on the Blog App so that blog details can be separate from all others.
- Removed all of the
<div class="blog-post__image">tags from around images in other blog posts - At the end I also managed to create the start of the animations for the Mini Martial Artists - Part 2 Blog Post
🌱 Next Time
- Work on the HitHub Champions section of the app to make them a more dynamic feature OR
- Resolve another issue.
📝 Notes
Thanks to my work yesterday (2024-11-05-Tuesday), I now have a Local Version of my Production database and a way to update it. Now it's much easier to work on the Blog App. I've made substantial progress in my Mini Martial Artists - Part 2 Blog Post, but I wanted to knock out one of the biggest pains I encounter when working with CKeditor / writing blogs.
Specifically, I don't want to add the <div> tag around each <img> in the raw HTML of the text editor. My hacky solution so far has been to use the blog-post__image class CSS to make sure that images stay within the confines of the blog details section:
<div class="blog-post__image">
<img alt="" src="https://dimmin.s3.amazonaws.com/uploads/2024/03/10/ul_cleaned_csv_sample.png">
</div>
but this is just an unnecessary extra step now that I understand how Static Files work and I have a Local Version of the Production database.
The CSS that is styling the images in the way I want them to be styled is available in my static_common/css/style.css directory. Specifically, it's here:
.blog-post__image {
width: 100%;
margin-top: 30px;
overflow: hidden;
}
.blog-post__image a:hover {
opacity: 1;
}
.blog-post__image img {
width: 100%;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
}
.blog-post__image img:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
}
The blog post content is already contained within a <div> tag called "blog-post__content". I wonder if there's a styling I could apply to the images within this <div> to quickly format all images within that <div> class.
First I created a Git Branch to start development. I decided to use the GitHub UI to explicitly tie the issue to the dev branch this time, then checked the branch out on my local:
git fetch origin
git checkout 20-auto-format-blog-post-media
Now I could start developing to explicitly resolve this issue (and hopefully changes would be tracked under the issue itself).
Given that this CSS should only affect the Blog App, I decided to create a custom blogstyle.css file in the blog/static/blog/css, then copied the CSS from the static_common/css/style.css file to see if I could get the ball rolling here. I should only have to change the "blog-post__image" to "blog-post__content":
.blog-post__content {
width: 100%;
margin-top: 30px;
overflow: hidden;
}
.blog-post__content a:hover {
opacity: 1;
}
.blog-post__content img {
width: 100%;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
}
.blog-post__content img:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
}
Then I need to add the custom CSS into my HTML template so that Django knows to get the blogstyle.css file:
{% block extra_css %}
<link rel="stylesheet" href="{% static 'blog/css/style/blogstyle.css' %}.css">
<link rel="stylesheet" href="{% static 'blog/css/style' %}{{ post.pk }}.css">
{% endblock %}
This gave me the classic MIME Error:
14/:1 Refused to apply style from 'http://127.0.0.1:8000/static/blog/css/style/blogstyle.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Which means that Django can't find the file. Sure enough when I try to access the resource directly by visiting
http://127.0.0.1:8000/static/blog/css/style/blogstyle.css
I get a 404 Error meaning the resource is not found. This is probably because I didn't collect the staticfiles (which is done for us already when deploying to Heroku). I tried running
python manage.py collectstatic
to consolidate the Static Files into the /static/ directory to match the path so that blogstyle.css could be found at
/static/blog/css/blogstyle.css
and found that I was pointing to the wrong directory (had an extra /style/ in the path). This fixed the issue. As anticipated, I was able to load in the CSS and now it's applied to all unformatted images in my new Mini Martial Artists - Part 2 blog post. Nice!
There are some features I actually don't like here, specifically the scaling transformation when the user hovers over the mouse caused by this CSS:
.blog-post__content img:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
}
This works well for overall blog images, but it doesn't look good when applied to individual images within the blog. Therefore, I removed it to remove that effect from the blog. In fact the only CSS I really needed was:
.blog-post__content img {
width: 100%;
max-width: 100%; /* prevents overflow / images from extending past the div container */
display: block; /* allows margin auto to center */
margin: auto;
}
Which now automatically centers and fits all images to the blog post content container. Nice!
Now that the feature was ready I added the changes and merged the new branch with the Staging environment
git add .
git commit -m "Resolved issue 20..." (with some other details)
git push
git checkout staging
git pull origin staging
git merge 20-auto-format-blog-post-media
But I ended up just doing the Pull Request on GitHub. I merged the feature Git Branch with the Production repository (master branch). I keep wanting to merge first to Staging, then to master but for now it doesn't really matter as much because Staging doesn't really do anything. I did this weird thing where I pushed the feature branch to master, then did a Pull Request, then updated Staging based on master, then updated master based on staging which was weird... Either way I'll have to get this flow right eventually. One thing I do like is that the Pull Request was explicitly associated with the original issue which makes it easy to track the exact changes to the codebase.
Then I pushed these changes to production via
git checkout master
git push heroku master
I then started a new branch to work on my little hithub champions section, where now you can hover over a hithub champion and they can rotate. I'm thinking about just integrating the HitHub App as a subsection of the DIMMiN App now that I know a little more about development. It could make sense for all of my games / features / in depth analyses to be located on the same page. A user just signs in and they have access to all of these different games and features.
--redacted--
Notes created today
List FROM "" WHERE file.cday = date("2024-11-06") SORT file.ctime asc
Notes last touched today
List FROM "" WHERE file.mday = date("2024-11-06") SORT file.mtime asc