Tag: Weather

A Centralized CSS File

After reworking three web pages, I am seeing certain CSS content that is the same across all pages.  I have moved this into a central CSS file that is now included in all site pages.  Each page also includes a local CSS file with stylization that is specific to that page.  The central page now includes a background image and a font specification.

Changing the font really helps make the page look less like a relic from the 1990s.  After doing some reading, I decided to use Google Web Fonts rather than including font data files on my site.  I am not that particular and think the Merriweather font looks fine, so I chose that.  Not having to maintain the font data is very appealing to me, and the load time still seems reasonable.

HTML5

I guess I got ahead of myself when turning in the new version of the Ithaca Weather page.  After doing so, I read some more about HTML5 and realized that instead of using <div> with class names assigned for header, section and footer, I could actually use elements of those types.  So something like:

<div class="section">
<h2>Ithaca Historical Weather</h2>
<p><a href="http://www.usclimatedata.com">U.S. Climate Data</a></p>
</div>

and

.section h2 {
margin: 1em 0 0 0;
}

.section p {
font-size: 1.3em;
margin: 0 0 0.2em 0;
}

becomes

<section>
<h2>Ithaca Historical Weather</h2>
<p><a href="http://www.usclimatedata.com">U.S. Climate Data</a></p>
</section>

and

section h2 {
margin: 1em 0 0 0;
}

section p {
font-size: 1.3em;
margin: 0 0 0.2em 0;
}

I like this a lot better and it seems like the right thing to do, so I’ll be using this as much as possible in future changes.  After reading about the other changes in HTML5 and am looking forward trying to use the canvas and drawing SVG graphics on some new experimental pages.

I also ran the page through web-based lint programs, using Another HTML Lint and CSS Lint to clean up a few things.  I may run lint regularly, but might not have the energy or humility to make all of the petty changes it suggests.

Updating the Weather Page

wbt_in_snow

The Ithaca Weather page is the first one I chose to modernize from its antiquated 1990s format.  It is one of the least viewed pages on the site and half the links were broken, so little harm could be done if it went wrong.  After separating all the styling out into its own CSS file, I tweaked a few things.

The image at the top now has rounded corners.  The link to my main page has been moved into a “footer” div that is in a fixed location against the bottom of the screen.  This required lengthening the page content so that none of it is hidden behind the footer when the window is not tall enough. Also, an “About this page” link has been added to the footer that will show all blog posts that include the “Weather” tag.  I hope to use footers like this on all the pages that I update.

I developed the page on Chrome, then tested in on Firefox and Microsoft Edge.  Are developers still obligated to test it on Internet Explorer?  I am not going to try Opera and Safari as their usage is too low.  I looked at it on my Android phone and all was well, though that may just have been lucky due to the narrow content.  I’ll study that problem more when I update some of the other pages.

I would like to come back to this page sometime and make it show something interesting based on calls to a weather API.