HTML and Javascript
Here I would like to give some hints about Javascript that I did not find elsewhere or that I consider important for other reasons.
HTTP is unsecure
(?) Question mark! Google states this. Yes, HTTP is unsecure if you enter
passwords or personal data and someone develops enough interest to invest into
substantial effort to get it. This would not apply to my site. It contains only
information I published willingly and no personal data or passwords are involved
when you use it.
It contains only information wich is of no political relevance and should be legal
in any country of the world. I could not think of a reason why anyone
would want to see how you or any other $PERSON_
Google Chrome will start marking my site as unsecure from july 2018. I'm hosting my site on a free account which does not allow SSL. I do not earn money with it and therefore can not pay money for a SSL server or a certificate (and not for google ads of course). If Google starts degrading my site for this, it will propably vanish sooner or later. This would not do any harm to me (although I would of course feel sorry) but it would be bad for the people that could profit from my site. In this way, free knowledge and open source would vanish not only from my site. Well, indeed it does not vanish but Google can make it really hard to find! It's a pitty but money rules. People like me generally do not pay for Google ads and there is no space for us in Google's internet.
So thousands of sites will be marked unsecure
without bearing
any danger. This will lead to users ignoring the unsecure
and beeing
trapped by really unsecure sites. Who wins? I'm sure google knows the answer...
probably it's just Google!
Bullshit by Design
This is my résumé about javascript.
A programming language in which you do not have to declare or typecast variables is an error by design.
Luckily I did not have to write much code in javascript but nevertheless
I ran into some pitfalls and wasted hours searching for errors that just
would not be there in a reasonable
language:
- Missing typecast: whether 11+11 gives 22 or 1111 is just a matter of the compilers view considering the 11 as a string or as a number. The workaround I found in the internet is to multiply the variable by 1.0 to make sure it is a number. This is bullshit.
- Missing declaration: if you forget to define a valiable you meant to be local as such, it is implicitly declared global. Even worse: a global variable of the same name of a different script will be silently reused. Scripts that once worked perfectly will suddenly fail if they are used together. This is bullshit.
Starting with ECMA5 which was published 2008 it is possible to eliminate
the second point by using use strict
. Well, better late than never but Windows XP
isn't dead even nowadays. At least, it is the best Windows ever in my opinion.
You won't believe how many hits I get from XP clients...
SI-Prefix
When I searched for it, I expected tens of sites that would deal with it but
I found not a single one with useful content. Odd, isn't it?
Find here a little javascript that allows input in SI prefixes
and formats output in even such.
It converts input like 1k3, 1.2M or even insane like 1e6u into a corresponding
javascript number and formats output in a suitable SI notation.
The script is not a proof of fine programming art but it is fairly useful and I hope
you enjoy it.
If you find an error or want to suggest an extension, feel free to drop me an
email.
Again, I must express this script worked for me but I cannot be made responsible for every possible kind of usage or user input (users are very creative!). If you use this script you do this on your own risk and responsibility!
I have been using this script in various of my electronic calculators and it worked fine.
SSI, UTF and BOM
I use Server-
Now, I have wasted hours to figure out why in some of my pages there was a gap
above the logo.
The answer: my favourite editor created the include file as UTF with BOM, so the include produced an extra line above the logo! So I just reloaded the file, changed encoding to UTF without BOM and all worked perfectly fine!
Sitemap.xml
Have you ever been annoyed that Google asks you to submit a Sitemap.xml
-File?
Whose brain might have breeded this kind of nonsense?
Google can (and will) create a sitemap just based on your internal links.
If you have dead pages wich are not linked from your domain, it is your fault.
Even Xenu can do this.
Though, a sitmap in wich every single page has a priority of 0.8 will probably
lead to degradation.
The only advantage would be you can actively specify a weight of certain pages. This could have been solved by a simple meta tag without the urge to generate a separate file wich, unless you work absolutely accurate, never will reflect your entire site or even cites pages that do not longer exist (what would probably lead to degradation).
I did not submit a sitemap nor will I do in the future, thats just too much work for me! For me, it is not important to be listed under the first hits on Google. It might be important for the users profiting from my site but not for me. If you operate an online shop things may seem different. If so, have fun with the sitemap.xml...
More than one H1 per page
Why not? The title of the page is noted in the title-tag. Why should there be one single h1 that sounds exactly like the title? This is nonsense. A html-page is not one chapter in a book, it's a page and a page may contain more than one headline (or even none at all). Why should I create a layout in wich h2 looks exactly like h1?
There are voices that claim Yahoo (like Bing) would reduce pages with more than one h1 in rank. Well, the hits I get from Yahoo and Bing make less than 1% so even if, that simply really does not matter for me! At least Google seems to support my opinion :-)
May be, this is a self-emphasizing process and the reason why I have so few hits from Yahoo and Bing is because I have more than one H1 on some pages but I would not risk to gain 10% more hits from Yahoo without being sure not to loose 10% from Google.
In my experience, there is only one search engine you should optimize your website for. You know the name. Anything else is meaningless.
Srcset and AMP
In times of 5G, where people are streaming 4k videos on the streetcar out of boredom, Google is thinking about how to reduce the size of images for mobile devices. Image Lint complains that a 200-pixel image is too high as the lowest resolution. The image is merely nine kilobytes!
It is self-evident that you should not include umpteen CSS files and scripts if you want to have a fast site and this should be clear to every web developer. Oddly enough, various elements of AMPs may only be included from Google servers. Evil to him who evil thinks...
Tooltips
I found lots of magnificant CSS code that produces really nice tool tips but not a single one that works if the element is at the left or at the right. In any case the tooltip would appear cut off. The only way I can think of is a simple span with a title tag containing the tool tip. It always works since the browser is responsible for display. You have no control about how it is displayed but you are sure, it will show up. This is better than to control the layout but not to be sure it will show up at all...
Web and TTF Font LCD 5x7
For my Eload-Page I wanted a font similar to a 5x7 Display with a HD44780.
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
I just made it myself with FontForge and provide it for download as TTF and as WOFF. Free for any use except for sale. Pimp up your printed user documentation or your Website, private or commercial, anything you want, it's free!
I tried to get pixel level accuracy but characters above 127 are not yet implemented. Instead, I added some characters that I use as soft characters in my projects:
Character | Position | HTML | Appearance |
---|---|---|---|
Antenna | 161 (0xa1) | iexcl | ¡ |
µ | 181 (oxb5) | micro | µ |
Ω | 937 (0x3a9) | Omega | Ω |
Be aware that the size of the font (especially on devices with limited physical resolution like web pages) may affect the visual appearance. You might want to change it for some percent to get a better user experience.
Meanwhile I added german umlauts and bar characters as used for level display. They are not included in the standard character set of the HD44780 but can easily be created as soft characters if needed.
Web- and TTF-Font LED/LCD 7-Segment
While designing my digital weigh scale it was desirable to have a font
representing the display via a 7-
Since I did not find one in the web I hereby offer my self-
Design example:
rE5Et. CLEAr. don't touch. 5YNC. 1234567890. YE5. no. N0. N0. Abort. 51-23=28.
Here as well as above, free for any use except selling for profit!
Of course you can select foreground and background color at will to represent your desires, i.e.
for a LCD:
rE5Et. CLEAr. don't touch. 5YNC. 1234567890. YE5. no. N0. N0. Abort. 51-23=28.
Find here the characters implemented.
Note: This is not a complete Font for writing!
It only consists of charactars displayable by a 7-A
but not a lower case one. It has a lower case letter b
but not a capital one.
It has a closing bracket but not an opening one which would look exactly like a capital letter C
!
And of course it does not contain an x
, w
or v
since these symbols cannot be displayed
on a 7-O
you would have to chose a number 0
, for a
capital letter I
, take a number 1
. Noone will notice the difference. It's just 7-
Here is a page to test the fonts with various sizes. Check it out on different devices with different physical resolutions and on different operating systems.