this is not a blog

I Reckon This Must be the Place, I Reckon

About That Programming Thing...

About That Code


These posts are about code, programs and other sh^Htuff.

This website has been maddeningly changing over the years – with no consistency whatsoever. That will probably not change, but, maybe...

PHP Powered!

So, I see all these "powered by" image tags, which are cool, but I say to myself, "Can't these be done in HTML?" Of course they can. And here is the HTML version of the "PHP POWERED" image tag followed by the real image tag.

PHP
POWERED



What's interesting is how a UA renders the text. The HTML text is a bit "fuzzy" whereas the image text is not. But if you zoom in, the opposite becomes true.

The closest matching font is Monaco, but that's an Apple font. I use Open Sans here and that is not too bad a match.

Of all the UAs I tested — Firefox, Safari, Opera and Chrome — only Safari gets it wrong.

Here is the HTML:

    <div style="border:1px solid grey;float:left;color:white;font-size:7px;letter-spacing:2px;">
    <div style="border:1px solid white;float:left;height:10px;width:23px;text-align:center;background-color:#666699;padding-top: 1px;">PHP</div>
    <div style="border:1px solid white;border-left:none;float:left;height:10px;width:49px;background-color:#898e79;padding:1px 0 0 3px;">POWERED</div>
    </div>
  1. I have not searched for a closer matching font.
  2. Safari is clearly at fault as it shows the font too large, and when Safari zooms in it does not increase the dimensions of the DIVs nor the image.
  3. These posts are in a <section> block with the overflow:hidden; attribute, so the <pre> blocks look truncated. If one selects the block though the entire text will be copied.

Google trying to be smart.

This blog displays a certain amount of "posts per page". It's a configuration setting defaulted to ten. There being about 15 posts here there are generated two "navigation links" like this: ?arg=&start=10, which is the MORE at the bottom right. And then there is: ?arg=&start=0, which is the PREV at bottom left.

This site has had about 15 posts for like ever. And it really came as a sort of a shock to see Apache log GET entries like these:

        ?arg=&amp;start=-100
        ?arg=&amp;start=-10
        ?arg=&amp;start=100
        ?arg=&amp;start=200

We're like, WTF? Nothing in our code could have ever have provided such numbers. But the most shocking thing was that they were all site hits by GoogleBot. GoogleBot was providing those values on their own. We had to look at the code to see what the implications were...

We did not validate the start values, as there was no need to. With such negative numbers the posts still always start of zero. With such large numbers no posts get displayed and the PREV link had a too large a start (decremented by ten). Stupid, but harmless.

But GoogleBot kept fucking with those values every week or so for two fucking months.

Now, can you or anyone tell me this: How could I contact Google about this? How does one contact Google at all? I find no "contact us" link on any of their pages. I used Google Groups to search for a GoogleBot group or blog, and found one whose last post was a year old.

But I did have an old Google Webmasters account and I registered this site with them and looked at the analysis. Eventually I found this:

"From parameters that Googlebot discovered on your site here is a list of parameters that appear not to change the content of your pages. Google will ignore these. (If you're certain that this is incorrect, you can specify how you want these parameters to be handled.)" start

Well, the end result is: sigh

Notes
1. We found a Google what-the-fuck-is-the-link Webmaster forum where things like this can presumably be discussed.

Update: Dec 21st

Other search engines have used invalid numbers to the start value, and we just found a source for some of them: in our own HTML! (But not the really fucked up values such as -100 and 100.)

To get the PREV and MORE links to float left and right but with a link also in between them, which in our case was a # link to the top of the page, the use of the property display: none would not work because the # would not then stay in the middle — it would shift slightly to the left or the right depending which <div> was assigned display: none. Our solution was to use visibility: hidden thereby getting what we wanted.

Since the HTML was not seen our code did not check the values of the start parameters. When less than postsperpage posts were displayed the calculated "start" value was not a multiple of postsperpage but because the link was not visible, we did not care as the link was not visible.

The problem is that search engines follow those links!

shit

The solution to our solution is to either change our HTML template to add rel="nofollow" to the links (easy) or to change our code to make sure that the "start" values are always 0 or a multiple of postsperpage even if not visible (easy). We will do both.

CSS Minify

So, we wanted to minify (minimize) CSS files for shits and giggles. First thought was, "Well, just replace this char sequence with that, and that char sequence with this, and..." And then someone says, "Let's just see what's already done."

"Okay, fine."

(Wow, so many people create websites to minify/minimize shit online!)

We found a couple programs, I forget exactly now... But we trying Minify which is hosted over at Google Code somewhere. It's a PHP program that you run from within your browser, so you have to copy and paste the result. "Okay, fine."

Wow! Is it complicated and complex! Classes, libraries. It's huge! But it does minify all kinds of stuff like Javascript and HTML. It's also quite slow. And it leaves behind newlines in the minified CSS. "What's up with that?"

Anyway, our intern here came up with this:

<?php
$ss 
file_get_contents($argv[1]);
$ss str_replace("\n",'',$ss);
$ss str_replace("\t",'',$ss);
$ss preg_replace('/\s\s+/',' ',$ss);
$ss str_replace(': ',':',$ss);
$ss str_replace('; ',';',$ss);
$ss str_replace(', ',',',$ss);
$ss str_replace(' > ','>',$ss);
$ss str_replace(' + ','+',$ss);
$ss preg_replace('/\/\*.*\*\//U','',$ss);
$ss preg_replace('/\s*\}\s*/','}',$ss);
$ss preg_replace('/\s*\{\s*/','{',$ss);
$ss str_replace(';}','}',$ss);
exit(
$ss."\n");
?>

Works just fine for most CSS.

Microsft IE and Chrome wrong

Recently I viewed this site with Internet Explorer and the HTML was completely broken — and using IE's Developers Tools to inspect the HTML was no help as it appeared to not show some start tags. So I declared IE as stupid.

Well, then I tried Chrome, and it rendered the HTML broken just like IE...

Turns out that IE and Chrome default the properties of the elements header, footer, section and article as display: inline. Which is wrong. W3C says they should be display: block (as written in the HTML 5 specification I found on their website).

So we had to adjust our CSS accordingly.

sigh

I hate wasting my time on stuff like that... (And it made me look really stupid for who knows how long to everybody who came here with IE or Chrome.)

  1. I refuse to use any vendor-specific extensions in HTML, and this will make me an automatic pariah in the HTML world... But, please explain to me just why people are supposed to use crap like -webkit-border-radius when Webkit should simply support border-radius! (And if they now do there are hundreds of other similar examples.) Why Web Designers do not protest lazy Web Browser Developers is beyond my comprehension.

Hiding Email Addresses

Ever see in HTML something like: [email protected]. (When Javascript is disabled.)

Viewing the HTML source one may see something like:

    <a href="/cdn-cgi/l/email-protection" class="__cf_email__" 
        data-cfemail="a6cbc3e6cbcfcdc3d0c7c8d4cfc3ca88c5c9cb">
            [email&#160;protected]
    </a>

What that means is that there is a whole lotta code behind this way of hiding email addresses from being detectable by simple Bots that just request HTML source.

(There are a myriad of ways to "hide" email addresses by obfuscation: "email AT example DOT com" being just one.)

What if there was an easier way?

Like this in some CSS:

    #sekret:before { content:"\6a\6f\65\62\6f\62\40\72\6f\6f\73\74\65\72\73\2e\63\6f\6d" }

And this somewhere in the HTML:

    <span id='sekret'></span>

That way, no code can possibly parse that span of text, while all human visitors can.

The result is this:

No code required.

  1. While there are dozens of JS "hide email" examples out there, Cloudflare does that for you. (Visit this URL with JS off – https://www.w3resource.com/cdn-cgi/l/email-protection.) Funnily (yes, that's a word), Cloudflare-like protection obfuscates an entire page, sometimes mistakenly seeing an "@" that is not part of an email address, like in a Makefile example: "echo $@" – yes, that was a real thing...
  2. That won't last. There exist "headless" browser code to read HTML and run it's Javascript...
  3. I have code somewhere that could detect oh so many of those; all of them simple regular expression parseable...

Fucking With the Atom Editor

First, it's fucking HUGE! 582 MB (610,738,176 bytes), 7,010 Files, 1,663 Folders.

Second, it fucking uses Node. The problem with node is that it does not manage it's modules well. Every module that has dependencies have those dependencies (other modules) – copies of them – in it's own nodes_modules directory. Even though each one also exists in the main node modules directory – node/npm/node_modules. (come on, that's near insane.)

Third, it's fucking slow!

I installed it for one of it's packages, language-htaccess, to highlight .htaccess files. Then I installed the copy-with-syntax package, in order to "one off" the copying of the htaccess code. I like the idea of "copy with highlighting" as some editors purport to do. (It's just that... they don't.)

Now, copy-with-syntax adds a right-click menu line of "Copy current file to clipboard as HTML". Doing so results in RTF formating! That package has no settings, and it's webpage (https://atom.io/packages/copy-with-syntax) simply states, "Buggy hack that sometimes can copy visible content from Atom text buffer into clipboard preserving fonts and colors."

Yeah, okay, so it does, but it's fucking RTF! (I guess to paste into a Word Document. UGH!)

So, I then installed copy-with-style, as it (https://atom.io/packages/copy-with-style) says, "Ever which you could just copy the code from your editor into document or presentation, WITH the syntax highlighting? Well, now you can!". And it specifically states "RTF or HTML".

Yeah, but it too only – no matter the settings – results in RTF...

Also, copy-with-style binds to the key-sequence Alt-A 1, and doing so results in:

    Uncaught TypeError: Cannot read property 'length' of undefined
    
    .atom\packages\copy-with-style\lib\atom_editor.js:21
    
    Show Stack Trace
    
    The error was thrown from the copy-with-style package. This issue has 
    already been reported.

sigh

I looked at the source file... Ah, it's gonna take a while to figure out the fix as the code is, though well written, too very new to me...

It's me, of course, stupidly thinking that, "Code should just work." Yeah, I've published, released and made available, code that, ah, "Did not work." Had "bugs" as we say. And I feel bad for that.

But without really good documentation – and not just DocPHP shtuff, – but real, actual "this is how this code works" documentation, with like data definitions, funtion call traces...

Also, some Applications require root (or Adminitrator) to install, and then their source files (like in packages and modules which are Javascript, Typescript, etc.) are read-only. (Requiring that extra step to edit.)

I Love Node!

I love Node, aka, Node.js!

    C:\bin\node>npm prune
    npm WARN enoent ENOENT: no such file or directory, open 'C:\bin\node\package.json'
    npm WARN . No description
    npm WARN . No repository field.
    npm WARN . No README data
    npm WARN . No license field.
    
    audited 1656 packages in 118.461s
    
    30 packages are looking for funding
      run `npm fund` for details
    
    found 321 vulnerabilities (153 low, 111 moderate, 57 high)
      run `npm audit fix` to fix them, or `npm audit` for details
    
    C:\bin\node>npm audit fix
    npm ERR! code EAUDITNOPJSON
    npm ERR! audit No package.json found: Cannot audit a project without a package.json
    
    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\luser\AppData\Roaming\npm-cache\_logs\2021-06-23T14_45_07_482Z-debug.log
    
    C:\bin\node>
    C:\bin\node>npm update
    npm ERR! code EEXIST
    npm ERR! path C:\bin\node\npm.cmd
    npm ERR! Refusing to delete C:\bin\node\npm.cmd: is outside C:\bin\node\node_modules\npm and not a link
    npm ERR! File exists: C:\bin\node\npm.cmd
    npm ERR! Remove the existing file and try again, or run npm
    npm ERR! with --force to overwrite files recklessly.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\luser\AppData\Roaming\npm-cache\_logs\2021-06-23T14_52_01_233Z-debug.log
    
    C:\bin\node>

Yah! I love Node!

Why?

Why is Cygwin's "autorebase" script so slow?

Why can't there be just one version of Python?

Why can't [program] be configured to NOT use a cache?

Why does a "Save Page" perform a complete reload (GET) of the site?

Why does "View Page Source" perform a complete reload (GET) of the site?

Why does everyone use Google links for fonts? Why not host them yourself?

Why does the "<- go back" action perform a complete reload (GET) of the site?

Why is it "Just me"?