HOW DO YOU write javascript so that it works on any web browser ?

[Charlie Veniot]

G'day,

Javascript and I have never gotten along, but once in a while I've got no choice have simply must surrender to it.

Working on my Chromebook, when I get something working, I never think of making sure it works with other browsers.  Sure enough, I discovered today that some javascript in my TiddlyWiki doesn't work with Internet Explorer.

Specifically, the offending bit of code: a call to URLSearchParams.

Figuring that I want error-handling that simply/gracefully/quietly exits the code, I decided to wrap all of the code with "try" and "catch" processing (having just discovered that today).

If anybody has any related experience and/or interesting/educative info to share: please please please ?

Related snipit of code (from this TiddlyWiki's tiddler) further below.

Cheers !

exports.run = function() {
        const queryString = window.location.search;
try {
        const urlParams = new URLSearchParams(queryString);
        const wikicontext = urlParams.get('context');
        var output = wikicontext;

        if ( (output !== "OffGridding") && (output !== "HydroCutting")  && (output !== "Chromebook") ){
            output = "ProductReviews";
        };
          document.title = output;
}
catch(err) {
            output = "ProductReviews";
}
        return output;

[Mark S.]

IE is getting kind of old. I'm sure there is sample code for dealing with multiple browsers. That kind of thing is why frameworks like jQuery were (are?) so popular -- it does the detection and compensation for you.

Looking at the code, it looks like you're expecting your site to be called with ?context="ProductReviews" and then setting the title accordingly. I'm wondering if all that couldn't be accomplished via wikitext/macros inside a startup tiddler (see InfoMechanism ). Or maybe you've already tried that route?

When suggesting "lite" off-gridding, don't forget solar cookers, the most efficient and cost-effective way to use the sun's energy. ;-)

[TW Tones]

Charlie,

Looks like javascript is your hammer. To people who have a hammer everything looks like a nail. 

As mark said "wikitext/macros" are most likely easy. Just ask for what you want to achieve and we can help. I am not keen to try and reverse engineer your Javascript code (I am not fluent in) before I provide a tiddlywiki solution.

Regards

Tones

[Charlie Veniot]

So totally off the TiddlyWiki track for a moment:

Mark, you had me a "solar cooker".  To me, there is nothing that is more environmentally friendly than building a solar cooker, and nothing more sustainable than using the energy of the sun.  Well, in summertime, to avoid generating heat inside the house.  I had thought of buying something pre-frabricated, but what I've found is so frigging expensive.  So I must find the time and quickly build one next summer.

I've been so focused on winter time heating, and just recently really focused on the notion of "heating oneself instead of heating the entire room."

• For anybody interested, check out the thread of discussion "making the best of electric heat" at permies.com
• I am experimenting with a USB Lens Heater as a portable (using a power bank) and free energy (charging the power bank via solar panels) method of heating oneself (my notes here)

Back to TiddlyWiki:

Well, not so much that I want to support Internet Explorer.  That thing cannot go the way of the dodo quick enough for my liking.

And trying to support all the browsers in the wild is much too great of a pain in the caboose for my liking.  I see no joy in that.

I much prefer the approach:  I've got this thing working on my computer and browser; now, how do I go about simply making sure that if this doesn't work for somebody out there, that it just gracefully does nothing at all versus generate some nasty javascript error.

Tones had suggested an alternative approach using wikitext/macros.  Let me go find that thread, and I'll link to that in reply to Tones' reply (right after yours) in this thread.

• 30 minutes later correction:  Arg! Eric Shulman had suggested code for a wikitext approach.  Ugh.  This old sponge o' mine ain't what she used to be, ain't what she used to be ...

Cheers ! 

[Mark S.]

@TW Tones

In case you're interested in doing this --

It gets the url string the TW was called with. It gets the parameter section (after the ?). 

It finds the parameter "context" and puts it in variable output

If output doesn't equal OffGridding,  "HydroCutting" or "Chromebook" then it sets output to "ProductReviews"

It sets the title to output

[Charlie Veniot]

Yikes!

Oh no, I like hammers.  To me, javascript is more like having a tooth pulled out via string attached to door while simultaneously getting a colonoscopy sans drugs, putting me in a physical position so that the tooth gets pulled out sideways.

I thought you had already suggested a wikitext/macro way to go about things, but my memory is brutal:  Eric Shulman suggested all kinds of goodies in this other thread.

Although a bit overwhelming to me at the time, I understand Eric's code better now (thanks to everybody here via various samples of code in various threads, with a special shout-out to Eric, Tones, and Felicia.  (Dang it, I know I'm forgetting somebody.  Regardless, hugs to all !)

Looking back at Eric's code, the only thing that turned me off was the part about using $:/info/url/search to capture the "context".  At the time, I felt that approach a bit messy if ever I want to add additional types of search criteria in the mix.

Now I'm thinking I could handle splitting multiple search criteria with wikitext, knowing just enough to be dangerous.

At the moment, it just doesn't feel like a fun exercise.  However, I am keeping that in my back-pocket for when I'm in the right kind of mood for that kind of brain age game.

Honestly, though: as much as I loath javascript, I'm not quite sure I'm loving the "look" of the wikitext (purely subjective, just how my old sponge works.)

[Charlie Veniot]

A Silence of the Lambs reference is ALWAYS oh-so-awesome !!!

Well, I'm assuming you intended a reference.  Don't mind me, "Everywhere I Look, I See Silence of the Lambs references.  Sometimes, they don't know they are Silence of the Lambs references."

Hmmmm, fava beans and a nice chianti ...

[Mark S.]

I can't be a cannibal. I don't like fava beans.

[Mark S.]

For anyone following along, the reason Charlie's script throws an error is because urlsearchparams isn't supported by IE 11:

https://caniuse.com/urlsearchparams

If you really wanted to write a complete javascript version, you would need to do your own string parsing based on location.search, a property that IS supported by IE. 

On Monday, October 26, 2020 at 3:47:28 PM UTC-7, Charlie Veniot wrote:

[Mark S.]

On Tuesday, October 27, 2020 at 6:55:19 AM UTC-7, Charlie Veniot wrote:

Honestly, though: as much as I loath javascript, I'm not quite sure I'm loving the "look" of the wikitext (purely subjective, just how my old sponge works.)

I agree. With javascript, you only have to know about the code in front of you. With wikitext, you have to know about lists, and filters, and filter operators and variables and different ways of handling variables and wikifying text and .... you have an incomplete toolset.

So, yes, javascript is easier to understand . But it's also a bit fragile and you have to deal with browser idiosyncracies.

[Felicia Crow]

Hi Charlie,

in general the first thing to do in such a case is to use the search engine of your choice and look for a polyfill for the "offending" code, which often thanks to a lot of wonderful people already exists.

In your case though since you are only using this in one place for one parameter - at least for the moment  - it would probably be overkill to import a complete polyfill for urlsearchparams into your wiki. So I did what Mark suggested and rewrote your function to get the context from location.search via regex.

Please be aware that this is neither necessarily best practice nor tested beyond a general it works as I currently don't have access to my testing setups to see if it works in IE11 specifically, although in theory it should as everything used is supported by it.

Also I went a bit overboard and changed how the context is checked so it assumes the default context until the loop finds that the parameter is a valid context and resets it. This was mostly done as to have one place to add contexts/change the default context while being able to leave the rest of the code alone. If you want to keep your if check because it is easier for you to use I can rewrite the function to use that instead.

exports.run = function() {
  /* Settings */
  const contexts = [
    "ProductReviews",
    "OffGridding",
    "HydroCutting",
    "Chromebook",
  ];
  const defaultContext = "ProductReviews";
  const ctxre = /context=(\w+)/i;

  let currentContext = defaultContext;
  const queryString = window.location.search;
  const match = queryString.match(ctxre);
  if(match){
    let tmpContext = match[1];
    for(let i = 0; i < contexts.length; i++){
      if(contexts[i] == tmpContext){
        currentContext = tmpContext;
        break;
      }
    }
  }
  
  document.title = currentContext;
  return currentContext;
};

Hope this helps.

Felicia

[Charlie Veniot]

Well, I will likely continue not getting along with javascript.

However:  DAAAAAANG, that is some right lovely, as in ooh-la-la snap my neck on the double-take, code.

I'm liking it, I'm using it.  Virtual hugs for sure.  Well, not everybody is a hugger, so out of respect for boundaries: virtual fist-bumps also available.

[TW Tones]

Mark/CHarlie,

So, yes, javascript is easier to understand . But it's also a bit fragile and you have to deal with browser idiosyncracies.

If the platform already provides it eg 

$:/info/url/search

 then either it handles all browsers or it needs fixing. Most likely it simply does the job. that is there is already code handling the desired feature. If you then make use of this you will not confuse someone who has no idea why you are using a browser fragile piece of javacript (that requires a reload on install) when the platform provides it. The solution remain accessible to others in tiddlywiki without javascript knowledge and is in a sense is already documented

Any solution that does not make use of the platforms method already available is fragmenting, reducing supportability and more fragile. Because apart from anything the platform may change the javascript may be forced to change but not do so.

 This is why I said 

 

Charlie,

Looks like javascript is your hammer. To people who have a hammer everything looks like a nail. 
As mark said "wikitext/macros" are most likely easy. Just ask for what you want to achieve and we can help. I am not keen to try and reverse engineer your Javascript code (I am not fluent in) before I provide a tiddlywiki solution.

And I am keen to persuade him, despite his predilections. 

plural noun: predilections
a preference or special liking for something; a bias in favour of something.
"my predilection for Asian food"

Regards

Tones