Logic and Language
Load the menuLoad the menu


Copyright   James R Meyer    2012 - 2024 https://www.jamesrmeyer.com

BANNER CONTENT

Site Design

Page last updated 16 Jul 2023

 

Over the past few years browsers have become much more standardized and there is little difference in appearance and functionality of most modern browsers. This has made website design much easier and has enabled the use of techniques which would previously not have been possible. In light of changing standards, it makes sense to use modern techniques and optimize the pages for modern browsers. It is not sensible to spend time and effort attempting to fix problems in older browsers that represent only a tiny proportion of Internet users. Minimal effort has therefore been expended on making the site work in older browsers. Furthermore, most modern browsers update automatically unless the user disables it.

 

Those who browse using older browsers can, by and large, be divided into two camps. There are the ones who are either too apathetic or simply don’t know how to update to a modern browser; we should not be wasting time pandering to such users. That leaves the unfortunate few who know that they should be using a modern browser, but who are in a situation where it is beyond their control; as such we expect that such users know that web sites may not appear or function properly in the browser they are stuck with, but they will not blame the web site designer for such deficiencies.

 

The site layout is a screen size responsive version to enable better viewing on such devices, and takes into account touch screen usage. The design has been tested and should function correctly with practically all browsers released since 2018. The design has also been tested on various devices with satisfactory results. I have changed the menu set-up completely as the drop-down menu seems to be going out of favour. I have replaced it with an almost full-page box for the main menu which has links to sub-menu boxes. In this way, with the extra space, the links can be made more informative.

 

I have attempted to make the website as accessible as possible to users who have limited or no use of a mouse. For the general layout of the site, I used a three column layout, which I have made responsive with media queries. Previously I had not used Flexbox because of compatibility issues, but now have taken advantage of its possibilities.

 

In the site, much of the functionality is implemented using JavaScript; while full functionality will not be achieved if JavaScript is disabled, the site is usable with JavaScript disabled. Without JavaScript the menu will not operate and the user is instead directed to the site-map page. With the features now offered by most browsers, the need for a cross-browser library like jQuery has been fast diminishing, and I have not used jQuery for some time now. The page load time is now noticeably faster than when using jQuery.

 

Footnotes

Because of the nature of this site, I use a considerable amount of footnotes, and have installed them as tool-tips. Tool-tips can be problematic with touch screens, since the mouse hover function has no direct counterpart in touch mode. In view of this I decided it would be better to have the tool-tips appear only on a click, and appear in line with the text, rather than over the text (so that no text is obscured by the tool-tip). These tool-tips are operated by JavaScript coded by myself, and I have added code to make footnotes appear as tool-tips in the same way. Maintaining footnotes can be a headache; if one wants to later add or delete a footnote every subsequent footnote has to be renumbered. Because of this, I initially added JavaScript to renumber any footnotes in numerical sequence when the page loads. But this still meant very careful cross-reference numbering was still required when adding footnotes. After considering matters for a while, I decided that a footnote system that was completely devoid of any requirement on the web-page designer to add any numbering would be the best option for the user. Hence I devised an easy footnote system which makes it a simple matter to add, delete, or edit footnotes, or to move the place in the text where the footnote reference number is to appear. Adding a new footnote is now a simple matter of adding a tiny snippet of HTML code. The details of the system, including the code, are at Easy Footnotes for Web Pages (Accessibility friendly). If JavaScript is not enabled, the footnotes will still appear, albeit only within the text, and the content and the semantics will still be present.

 

Dark Mode

Because of the growing interest in dark themes, I set up the site so that it can also display in dark mode, where the background is a dark color and the text is a light color. Many devices now have an option to set a system-wide dark theme, and if a website is configured to show a dark theme if the system setting is set to dark, then the browser should display a dark theme.

 

However, in practice, few websites actually have such a configuration, and this has resulted in many browsers and plug-ins having a dark mode switch which attempts to make a best guess of how to convert a conventional web-page so that a light background turns into a dark background, and every other color is converted so that the result is legible and looks reasonable. This can work for some websites but the truth is that in many cases it is rather hit and miss, and can leave one repeatedly turning the dark mode on and off.

 

I had recently set up this website so that if the user had set their display preferences set to dark mode, then the website will automatically display in dark mode. But then I realized that while a user may not want a system-wide dark mode or an ad hoc browser dark mode, he/she might like the option to view a website in a properly configured dark mode. On that account I decided to include a dark/light switch on the web-page which can change from one mode to the other, regardless of a system setting. It also is set up so that it respects the system setting on a first visit and retains the user preference for subsequent visits. There is also an option in the page footer to reset to the browser/system setting.

 

I looked on the Internet to see how others had implemented this idea, and the consensus seemed to be that JavaScript is required, along with CSS variables where one value is set for light mode and a different value for dark mode. But my dark theme required a large number of different values, and the idea of having to keep track of such a large number of variables did not appeal to me. Furthermore, I already had written the CSS for dark mode and did not relish the idea of tedious rewriting to incorporate numerous variables. So I decided that the simplest option was to tag the HTML with an identifier as light or dark, and have the page elements change according to the identifier. This required a small amount of JavaScript code and minimal changes to the CSS code. For the Disqus comments, however, things are a bit more complicated but it is now fully implemented..

 

To deal with browsers with JavaScript disabled, the HTML tag starts off with an id which is normally removed if JavaScript is enabled, but remains if it is disabled, in which case the retained id ensures that the page respects the system-wide dark/light mode. When JavaScript is disabled the switch remains nonoperational.

 

I now have a page describing How to setup a dark mode switch for your web-site, and there is a simple demo page at Basic Dark mode Demo page and for sites with Disqus the demo page is Basic Dark mode Demo page with Disqus.

 

Note that some browsers and plug-ins have a pseudo-dark mode option which ignores a web-page’s own CSS, even if it is already set up for dark mode, and will apply their own CSS on top of the web-page’s own CSS, usually with deplorable results.

 

Thanks to Ana Tudor for her wonderful light/dark mode switch, see it on CodePen at Day/Night toggle on CodePen.

 

Comments system

At first Disqus seemed like an easy solution for a comments system, but having used it for a while, I decided that it was time to ditch it. I have had numerous problems of comments disappearing after I made changes to my site. In Disqus you do not have access to the base data and you can only use an interface that only lets you see what it wants you to see. There are other big issues also, one is that unless you add a button to load Disqus only when the user clicks the button, it will load on every page load, and this uses an unbelievable amount of extra resources. Apparently it loads advertisements also, though I have not seen these adverts on my site or other sites, probably because I use a good ad block setup.

 

There are plenty of other comment systems out there, but most of them are paid, and those that are free get their revenue either by advertising or harvesting personal data or both.

 

A disadvantage of having a company managing your comments on a paid basis is that it can lock you in, so that if the prices increase, you may have difficulty in changing to another provider. But the main reason I changed is that I do not want to pay some company for the privilege of having people post material on my site, where the company controls the data, where I do not have full control over it. I don’t want to support personal data harvesting either.

 

So I looked around and found a free alternative over which I have full control and full access to the comment data. The system I use now uses code by Jacob Barkdull and you can see the details at HashOver Comment System. It isn’t plug and play, but if you are reasonably competent with some coding, it’s not a big problem to set it up. My biggest problem in moving over from Disqus was sorting out the mess of the comments and formatting it to import it into the new system.

 

Other people have posted articles on why they deleted Disqus too, see Disqus, the dark commenting system, Why I Deleted Disqus and Why You Should Too, Switching Away from Disqus Review, Disqus Ads Are No Longer Free to Disable.

 

Font size

I have included buttons to enable the user to easily change the text size. I did this because I have found that it is often the case that browsers on portable devices such as tablets or mobiles do not offer a quick way of doing this and I find that quite annoying. I have it set up so that the settings are retained for the entire website for any subsequent visits to the same or to other pages. There is also an option in the page footer to reset to the default setting.

 

Accessibility - Keyboard Quick Guide

  • To get back to the top of the page at anytime, press the Shift + Home key.
  • To access the menu at anytime, press the Shift + Home key, and then the Tab key. This brings the focus to the Menu Hamburger Icon, and pressing Enter will launch the main menu. The menu can be navigated through by Tab, and Shift + Tab to move back up through the items.
  • Pressing Enter on an item that has the focus will launch the sub-menu. Pressing Esc or Left Arrow in the main menu at any time will close it, and pressing Esc or Left Arrow in a sub-menu will bring you back to the main menu. Pressing Home at any time in a menu will close the menu.
  • To change the font size or change dark/light theme at anytime, press the Shift + Home key, and then the Tab key to go past the Menu icon. This will bring into view a “Make size smaller” button, a “Change theme” button, and a “Make size larger” button. Tabbing past these continues into the normal content. The icons at the bottom of the page can also be accessed by the keyboard as the last items in the normal order of keyboard tabbed items, or by pressing the Shift + Home key, and then the Shift + Tab to move through the items at the foot of the page.

If you like the design, or if you have any suggestions, I would like to hear from you. Equally, if you do not like it, please Contact me and tell me why.

Interested in supporting this site?

You can help by sharing the site with others. You can also donate at Go Get Funding: Logic and Language where there are full details.

 

 

As site owner I reserve the right to keep my comments sections as I deem appropriate. I do not use that right to unfairly censor valid criticism. My reasons for deleting or editing comments do not include deleting a comment because it disagrees with what is on my website. Reasons for exclusion include:
Frivolous, irrelevant comments.
Comments devoid of logical basis.
Derogatory comments.
Long-winded comments.
Comments with excessive number of different points.
Questions about matters that do not relate to the page they post on. Such posts are not comments.
Comments with a substantial amount of mathematical terms not properly formatted will not be published unless a file (such as doc, tex, pdf) is simultaneously emailed to me, and where the mathematical terms are correctly formatted.


Reasons for deleting comments of certain users:
Bulk posting of comments in a short space of time, often on several different pages, and which are not simply part of an ongoing discussion. Multiple anonymous user names for one person.
Users, who, when shown their point is wrong, immediately claim that they just wrote it incorrectly and rewrite it again - still erroneously, or else attack something else on my site - erroneously. After the first few instances, further posts are deleted.
Users who make persistent erroneous attacks in a scatter-gun attempt to try to find some error in what I write on this site. After the first few instances, further posts are deleted.


Difficulties in understanding the site content are usually best addressed by contacting me by e-mail.

 

Based on HashOver Comment System by Jacob Barkdull

Copyright   James R Meyer   2012 - 2024
https://www.jamesrmeyer.com