Introduction
As mentioned in the Site Welcome post there is a need for site maintenance. Updates to the post launch site that I deemed essential have already been completed. Now is my opportunity to overhaul the site. This will be done in a series of steps. For this update I will focus on front end development.
Maintenance Items
My first set of tasks are as follows.
- Mobile First CSS layout
- Update blog and projects detail HTML to be consistent (completed 3/02/2023)
- Overhaul site CSS
- Consistently comment sections to organize styles (completed 2-21-2023)
- Better utilize class selectors for cleaner CSS (completed 3/11/2023)
- Utilize something like
/* || … */to quickly search CSS blocks (completed 2-21-2023) - Move blog and projects post body CSS to common file for DRY coding goals (completed 3/02/2023)
- Update JavaScript for Priority Navigation bar to avoid overflow during page load
- Change blog post and comment time from UTC to user local time zone
I will update this post to include completion dates as I complete each task. Note that updates to live site will be done as a group.
Mobile First
Why use a Mobile First CSS layout all of a sudden? I initially implemented my CSS as top down. After some development and reading I ended up wanting to change my initial approach for a variety of reasons, but chiefly to optimize the experience on the less powerful mobile device. Still I decided I needed to finish out the current iteration of the site before a major change. Additionally, I had to choose between grouping media queries together for different size screens or using multiple media queries at a given selector. Below is how I tried to group media queries together.
/* Large Screen */
.mystyle {
/* Stuff */
}
.second style {
/* Stuff */
}
/* Medium Screen */
@media (max-width: 991px) {
.mystyle {
/* Stuff */
}
.second-style {
/* Stuff */
}
}
/* Small Screen */
@media (max-width: 768px) {
.mystyle {
/* Stuff */
}
.second-style {
/* Stuff */
}
}This was great for a short CSS document, but became harder to manage as the file grew. So instead I started building media queries around the selector.
/* First selector */
.mystyle {
/* Stuff */
}
@media (max-width: 991px) {
.mystyle {
/* Stuff */
}
}
@media (max-width: 768px) {
.mystyle {
/* Stuff */
}
}
/* Second selector */
.second-style {
/* Stuff */
}
@media (max-width: 991px) {
.second-style {
/* Stuff */
}
}
@media (max-width: 768px) {
.second-style {
/* Stuff */
}
}I will be updating my CSS to utilize this second approach.
Other Improvements
As for my other tasks I suppose it should be clear that my CSS could use some work. From a functional point of view I want to avoid code reuse. My CSS was structured to have a core site CSS styling things like the navigation bar and footer and then let each app have a CSS file to control less shared aspects. Due to the similarity of the blog and projects detail post content I decided this style should go into my core CSS. In the future I may consider putting it in a separate file. Making better use of class selectors will help me achieve my goals regardless of my choice on this matter.
The other point of note is that after loading my site online I noticed an issue with my priority navigation bar. I didn't notice in production likely due to using a wider screen than with mobile and not testing page refreshes that much. Essentially, the menu items are populated first and then removed to the hamburger menu as needed causing a short flash of the page being too wide on small screen devices. This fixes itself quickly as the JavaScript code runs, however, it makes the site appear bouncy when loading up a page. I'll need to figure out how to determine menu item widths without displaying them on page or perhaps come up with a more clever idea.
Conclusion
Ultimately, the goal for this set of updates is to improve site performance on mobile, make my CSS more manageable and clean up a few bugs. Once these improvements are made I will be in a good place to make more significant improvements in the future.
Add a new comment