Zers becoming more sticky

Ref: The label for my browser app container on my devices is “zerz” (short for browsers if you are still mystified). It’s sort of stuck with me.

“Which zer are you using?” Pops out of my mouth unconsciously these days.

“Have you tried the Vivaldi zer yet?” Things like that.

Forthwith: Are Zers Becoming More Sticky? Short ans: Oh, Yes.

Icon Bay on my tablet.

Website stickiness refers to how long a guest hangs out on a site or sometimes how many hits a site accrues over a certain time period. A website is oh-so-sticky if people do none other than stick around rather than surf fast away.

What I’m referring to is zer (browser if you haven’t caught on yet) stickiness, which for me means how much a browser recycles objects stored in its cache. I’m noticing a change notably in Safari (the grand master of browser stickiness) and the ever more ubiquitous Chrome, with Google/Alphabet following Apple’s lead once again.

File hierarchy often goes on the order of:

Typical file/dir hierarchy.

Devvers link their webpage code to libraries of further code where repositories of Javascript or CSS style sheets (or CGI or Perl or PHP or Ruby, ad. naus…) reside and are imported by the zer’s Document Object Model by links configured in the HTML code and then run asynchronously as part and parcel of the gestalt codebase.





This has been the model of software development from time out o’ mind.

(Fairy coachmakers and all).

But I’m starting to add changes I might make to scripts or styles directly into the .html page so that I can actually see the rendered updates stat. Changes made to the library file are increasingly not being read when refreshing a live site.

And that’s what I mean by zer stickiness. I change a style, I make a code change in js and upon live site refresh, an unexpected behavior: Hey Presto. Nothing Changes!

With Safari and now Chrome, I have to open the updated library file

https://dorishoward.vet/libraries/js/print.js

in a new window/tab and refresh for every change I’ve made, then get the HTML page back in focus and refresh to see the changes.

Zer producers are in a war for fastest rendering, and clearly one way they are doing this is storing more and more data, code and images in the zer cache.

Chrome at least re-renders upon closing and reopening. Safari has gotten so stubbornly sticky that even restarting the desktop system might not clear the cache. Seriously.

For images, this has resulted in changing my naming convention; e.g., on Puppy Mill Free.US, I have a number of images that update every time a new puppy store ban has passed (342 of them, to date). Instead of replacing

sftp://puppymillfree.us//home/brooksrogers/puppymillfree.us/images/graphics/icons/ban-map/JurisdictionCount.jpg 

like I’ve been doing for years, so that other sites and interested parties can directly view or repost the latest and greatest graphic, I’ve had to add a counter to the filename and update the code pointer each time to get the zer to refresh it:

sftp://puppymillfree.us//home/brooksrogers/puppymillfree.us/images/graphics/icons/ban-map/JurisdictionCount342.jpg

Not long ago I didn’t have to do that. I’d update the file, the server would be touched and eh, voila! the new image would be displayed.

For code-base changes in link-related libraries, I’m placing the code block directly into the HTML file instead of the link, including adding new classes in the html page <style></style> blocks as well.

This change in work flow discipline works every time and saves me the same, that is time. One refresh instead of two and a page swap in between.

The seconds, they count.

But now the rub is how to have a static URI contain the latest image. No solution yet as I don’t know how to use a referrer like the

<meta http-equiv="refresh"

for an HTML page where I can re-route the page.

Still thinking through how to do it, without having to post the image twice with 2 names.

And I use marquee, too.

Though image maps are still included in the html specifications, that old chestnut, the marquee element has long been relegated to the deprecation bin. But it was an effect I wanted to use on one site to headline the latest jurisdictions that passed puppy store bans in ticker-tape fashion.

marquee tickertape screenshot on puppymillfree.us: MBP/Safari/Mojave

So if it’s so despised by the specification board, why am I using it? Beacuse it works. In fact, I’m noticing increased support across all the i/macOS browswers, even the lesser known ones like Brave and Vivaldi. In fact, my restart button script only doesn’t work in Safari and Firefox with Opera, Brave, Vivaldi and Chrome all working as expected.

I’ve added console switches for:

  • Play
  • Pause
  • Restart
  • Reverse

(Question for YOU: Should I make the play and pause buttons one and the same?)

Caveat: The play button doubles as a marquee/ticker tape direction indicator.

If the element is working near-ubiquitously, I’m down for using it on a special interest/non-commercial site for dramatic effect.

Here’s Vivaldi in reverse mode. Can tell by the reverse switch in blue.

Play button in hover state.

Yep. Still Using ImageMaps. What the heck are those you ask?

Old programmers can learn plenty of new tricks, especially as so many Web technologies just keep rolling on out. An old one that comes from the original html (nothing.0) specification a long time ago in a galaxy oh so thither and yon is ye olde image map.

Have to insert a bit of a snort here. When I checked the MDN page on image maps to see if I had the coordinates property values correct, for a second I thought this sandbox was telling me I could put the various colored parts together like this in CSS. Then I remembered I was looking for img map area coords help. For a few brief seconds I thought there was a new CSS spec that could put objects together to form various shapes such as this pentastar out of random rectangles with just a few simple declarations. I Was like, Wow. Cool! I’ll bet that will take some time to figure out how to do.

me

Check out my selfown.com to see a very simple image map in action that tells the style.cursor to change, onmouseover, the east and west sections of the titular graphic. I don’t use the site for much except some cool and simple email addresses. So if you have any ideas or thoughts on what should be there, comment.drop(arguments).

As soon as I resurrect my old Feline Rescue of Northern Nevada site (the rescue shuttered its doors in 2015 and I have the site on one of those drives in the pile in the corner of the room) I can sample a more complicated image map with rectangles, circles and parabolas all over the place, tightly packed in so the default href wouldn’t kick in at an unexpected pixelschpot (that’s German for pixel spot).

The main page was a graphic rendering of the front of a Sierra cabin which changed throughout each season with snow, flowers, bright sunshine and fall colors, overlaid with a complex image map to guide site guests into various rooms within the site.

Here’s MND’s spec on the html element tag, <map>. And W3‘s.

Element Closing Comments

Using id populated comments adjacent a close tag

I’ve used this convention for decades now, before the advent of verbose coding clients that help keep the peripheries of indentions inline, along with vertical column markers and toggled code blocks.

So why am I still using the convention?

<div id="div1">
   {content}
</div><!-- /#div1 -->

Ancient habits hardly die? Well, I’ve transitioned from <CODING HTML LIKE THIS> to the advent of inline and block elements, CSS1-3, etc.

No, I like keeping things simple and to use only what I need—took me a long time to use a “;” after values in the last properties of a selector, but I do it now as that seems to be standard.

Plus I had a VP of Development in a 2001 incubator give me a hard time about her not finding a glitch in a large codebase wherein my code was appended without the subsequent egineer first placing a “;” in my last argument (or was it a variable?). She wasn’t mad, just extremely tired. And I’d rather that not have to happen again.

So I haven’t dropped what I call element closing comments because I still find them useful. Yes, I’ll click a div closed and open to find its top and bottom if I need to. Or I’ll scroll down a columner line to find just exactly where my <main> element ends in the code.

Or, I’ll do a quick Find for the ID attribute value and get to the bottom of my chosen element in a flash.

And that’s what’s making working with confusers, er, computers, so much fun in the end of the first 1/5 of the 21st century: lots of options to call upon when moving around code with lightning speed.

Yes, even multiple options that do the same thing because at any given particular second I don’t feel like letting my fingers leave the keyboard for the trackpad or the mouse; or the opposite.

The thing that makes it work so well (i.e., fast) is the discipline I’ve had for years now for adding the closing comment whenever I create an element. There were some years when I was working on deep applications where as part of any template for any piece of code snippet I preformatted, the ID attribute was always included, just in case…

Now I only add id attributes if needed instead of leaving something akin to a hanging chad of the 2000 presidential election fame sitting there empty and alone in the code.

<section id="" style="display: block;">

Critical to the success of this practice is careful naming conventions. If I’m at the bottom of some long-toothed div and see

</div><!-- /#justAnotherDiv.DontMindMe -->

That’s not going to help me as I scan the page for information about the code blocks I am tending. If, however, I see this like

</div><!-- #/formWrapper -->
</div><!-- #/togglePuppyMillImage -->
</div><!-- #/weatherWidget -->
</div><!-- #/gardeningTipsSidebar -->

I could in a very quick instance know exactly where I was in the code. Always seems easy when in a flash of inspiration we are hurry through code to get it “down on paper” to name critical elements frivolously, but spending a few extra seconds to get the name findable again, will help when then quickly adding the closing element tag and adjacent id populated comment.

Cloaking Exposed Email Addresses

I wrote this simple Javascript back when I was parting because it was 1999. Still using today to keep client emails (and my own) safe from roving trollbot email pirates.

How do they do it? You and I know your code is no secret. Especially if you lay it out there on a rendered page, as in, “Go ahead and email me at [email protected]

<a href="mailto:[email protected] class="showAll" style="color: tellAll;">Send us an email! :)</a>

But the trolling rovers (or is it roving trollers?) can see into your future, and your code and [email protected] is harvested by peeking under your coding skirts. Protecting your client? Nope.

Enter javascript to save the day once again.

I use inline spans and create a style for them that looks just like my link styles.

So we might do this:

<span class="linkEmail" onclick="mail_To('com','myawesomedomain','thisismyemailaddress','My Popular Site','Please send your get rich quick pamphlet immediately. Please find enclosed $250.')">

What’s happening here?

Rich Colors, Big Movement in Minimalism

As the maturing 21st century goes from 18 to 19, what shapes, figures, palettes, textures and modalities are shaping up to define this odd year in oh, so many ways.

Prosperity is with us, at least for the moment. Prosperous times bring out the devil in people. Wild becomes an obsession. Must have Wild: •Clothes •Colors •Parties •Affairs •Childs •Curtains •Ideas. Ah, Wild Ideas 

Double radial gradient made through adjusting opacity in multiple layers. eYeOpeners.design