[An even better-er solution] - Can JavaScript replace this PHP script?

John_Betong · August 16, 2019, 3:31am

While CSS validating one of my sites this morning I happened to read the instructions and they are so much easier to implement…

Before I had a hard-coded link to the Jigsaw.w3.org validation service utility and had to specify the source page for every page. Now a common link to the Jigsaw validation URL is all that is necessary and the intuitive validation page now checks and inserts the following parameter:


$_SERVER[ 'HTTP_REFERER' ] ;

Give it a try by copying this common link to all your online web-pages:

http://jigsaw.w3.org/css-validator/check/referer

The announcement: https://jigsaw.w3.org/css-validator/

Now yo have no excuses for having invalid CSS

John_Betong · August 22, 2019, 7:35am

Unfortunately the new feature DOWS NOT work when JavaScript is present in the web-page…

…so I have to fall-back to my original catch-all web-page URL which is used by including “footer.php”:

<?php 
declare(strict_types=1);

  $url    = $_SERVER['REQUEST_SCHEME'] 
          . '://'
          . $_SERVER['SERVER_NAME'] 
          . $_SERVER['REQUEST_URI'] 
          ; 
  $vEnc   = urlencode ($url) ;

# FLOAT RIGHT
  # $jig    = 'http://jigsaw.w3.org/css-validator/check/referer';
  # $jig2   = '<a href="' .$jig .'"> CSS Validator </a>' ;
  $vCss   = '<a href="'
          .   'https://jigsaw.w3.org/css-validator/validator?uri='
          .     $vEnc
          .   '&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en"'
          . '>CSS: Validator'
          . '</a>'
          ;

# FLOAT LEFT
  $vHtml  = 'https://validator.w3.org/nu/?doc=' .$vEnc ;
  $vHtml  = '<a href="' .$vHtml .'"> HTML: Validator </a>' ;
  

 /* style.css 
  .bot {border: solid 1px #ccc;}
  .fll {float: left;} 
  .flr {float: right;}
  .fss {font-size: small;} 
  .ftr {position: fixed; left:0; bottom:0;} 
  .tac {text-align: center;}
  .w99 {width: 100%;}
*/

// PHP STRINGS HEREDOC Syntax
  echo $ftr = <<< ____EOT
    <p> <br> </p>

    <div class="ftr tac w99 fss">
      <b class="fll"> $vHtml </b>
      <b class="flr"> $vCss  </b>

      Wonderful place for a footer
    </div>  
____EOT;

Screen shot:

Is it possible to convert the PHP script to JavaScript?

John_Betong · August 23, 2019, 12:10am

Title: Just discovered that CSS validation has been made even easier

Above was the previous named PHP Topic.

The new script fails if the web-page contains JavaScript

I have to revert to this handy PHP utility which can be included in every web page. The utility supplies links to the w3.org validation utilities and eliminates the need to hard code the relevant web page URLs. It is very handy when developing and saves a lot of copying and pasting.

Can it be written using JavaScript?

daisylewis · August 30, 2019, 10:45am

Java script is client side scripting language while php is server side scripting language.So we can not replace it.

Paul_Wilkins · August 30, 2019, 10:55am

That has me saying, “wanna bet?”

m_hutley · August 30, 2019, 11:06am

hehe.

Can Javascript replace PHP scripts? Generally, yes. With some general caveats.

Obviously, sticking things like your database passwords into Javascript (or any client-side script) is a big nono.
Anything coming out of Javascript must be considered user data, and trusted accordingly (aka: not) .

Paul_Wilkins · August 30, 2019, 11:30am

Here’s the CSS to add to your stylesheet, or to include as a separate stylesheet.

.bot {border: solid 1px #ccc;}
.fll {float: left;} 
.flr {float: right;}
.fss {font-size: small;} 
.ftr {position: fixed; left:0; bottom:0;} 
.tac {text-align: center;}
.w99 {width: 100%;}

Here’s the HTML code for the footer:

    <p> <br> </p>
    <div class="ftr tac w99 fss">
        <b class="fll">
                <a href="https://validator.w3.org/nu/?doc={pathname}">HTML: Validator</a>
        </b>
        <b class="flr">
            <a href="https://jigsaw.w3.org/css-validator/validator?uri={pathname}&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en">
                CSS: Validator
            </a>
        </b>
        Wonderful place for a footer
    </div>

And here’s the JavaScipt code to update the links:

function updatePathname(link, pathname) {
    link.setAttribute("href", link.href.replace("{pathname}", pathname));
}
var pathname = encodeURI(location.origin + location.pathname);
updatePathname(document.querySelector(".fll a"), pathname);
updatePathname(document.querySelector(".flr a"), pathname);

James_Hibbard · August 30, 2019, 1:54pm

It also runs on the server, a.k.a. Node.js.

John_Betong · September 7, 2019, 4:34am

Many thanks for the script.

Eventually got round to testing and unfortunately unable to get it to work. Problem seems to be the curly brackets. I tried with, without, double curly brackets, all without success

How can I use JavaScript curly brackets?

Online Demo

mawburn · September 7, 2019, 6:49am

You put the script before the code. You shouldn’t worry about what that validator says. I would just forget it exists, it’s really not useful in the slightest.

Your error is in the console.

(index):55 Uncaught TypeError: Cannot read property 'setAttribute' of null
    at updatePathname ((index):55)
    at (index):58

This says your reference to .fll a and .flr a are bad, and they are bad because they come before the elements are rendered.

John_Betong · September 7, 2019, 8:03am

Is it possible to remove the validation errors and to get it to work correctly?

I did try but was not successful

I have updated the source and the page shows the PHP version (validates OK) and a bottom link to the JavaScript version (fails validation).

m_hutley · September 7, 2019, 11:02am

The validator’s complaining because your source code URL contains non-URL characters ({ and }).
If you replaced the curly braces with square brackets (in both the URL and the javascript), the validator should stop its complaining (though if you want to be 100% compliant, you may want to URLEncode the ‘pathname’ you’re sticking in there…)

John_Betong · September 7, 2019, 4:11pm

Nearly there… the link to the CSS validation works OK but…

Please note that PHP version works a treat:

Current Setup:

I have a Ubuntu VPS and about a dozen web-sites all in the same online folder:

/var/www/
..site-001.tk
..site-002.tk
..site-003.com
..site-004.com
...
footer.php

Each site and nearly every web-page includes the common “/var/www/footer.php” script
Regardless of which web-page is rendered the dynamic footer.php script generates two validation links in the footer.
Each validation link has the correct web-page URL to W3.org tools
This saves:
a, opening the W3,org validation page
b. copying the web-page URL
c. pasting the web-page URL into the w3.org validation page

Upon reflection I think it would be better to have an individual footer for each web-page and only include the /var/www/footer.php if isset($_GET['show-footer']) is true. Also the /var/www/footer.php could be an overlaid iFrame.

[off-topic]
Shall I rename this Topic to JavaScript Challenge?
[/off-topic]

mawburn · September 7, 2019, 4:40pm

Shall I rename this Topic to JavaScript Challenge ?

No. You have to put the JS after the HTML. That’s all there is to it, nothing challenging here. The validator is worthless. Forget it exists.

John_Betong · September 7, 2019, 4:46pm

Please check the following link and note the JavaScript is positioned after the relevant links.

https://peacevase.tk/index-ver-js.php

I have found the validator to be very good and quickly highlights errors.

mawburn · September 7, 2019, 4:57pm

That link works.

I have found the validator to be very good and quickly highlights errors.

It’s giving you the wrong errors. Your console will tell you the errors.

John_Betong · September 8, 2019, 4:37am

Cracked it

The W3.org validator was showing incorrect syntax for the [pathname].

Solution - replace square brackets with hex code:

<!--
pathname = https://peacevase.tk/index-ver-js.php
-->
 <a href="https://validator.w3.org/nu/?doc=%5Bpathname%5D">
    HTML: Validator
 </a>

Special note:

Online version updated. It may be necessary to refresh the browser using CTL-F5 or add trailing dummy parameters.

Paul_Wilkins · September 8, 2019, 11:48am

It wasn’t square brackets being used. It was curly braces being used instead.

{pathname}

But basically, so long as you use the same text in the HTML code and in the replace section of code, you’ll be fine.

m_hutley · September 8, 2019, 12:44pm

*as long as the text you use doesnt accidentally match something else in the URL.

Paul_Wilkins · September 8, 2019, 12:54pm

Really? It works fine here, even though “warning” appears in several other places in the URL.

var url = "https://jigsaw.w3.org/css-validator/validator?uri=warning&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en";
// uri=warning should be changed to uri=http://example.com
// a possible conflict is that warning in other parts might get replaced instead.
url = url.replace("warning", "http://example.com");
// this works correctly, only replacing the first "warning" that it finds.

console.log(url);

Even though it works, it can be confusing to understand. Which is why I used a meaningful term of pathname, and curly braces with {pathname} to make it clearly obvious that it’s a template replaceable term.

var url = "https://jigsaw.w3.org/css-validator/validator?uri={pathname}&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en";
// uri={pathname} should be changed to uri=http://example.com

url = url.replace("{pathname}", "http://example.com");
console.log(url);