How to detect structural changes in a RSS feed

I am using a news RSS feed in a small app (JS, Vue.js). Unfortunately it already happenend that the RSS feed provider changed the feed structure without notifying me, so my app broke (they changed how the image was delivered).

E.g. I was expecting

<article>
  <title>News title</title>
  <content>
    <image>
      <url>img.jpg</url>
    </image>
    <text>News text</text>
  </content>
</article>

but I got

<article>
  <title>News title</title>
  <image>
    <url>img.jpg</url>
  </image>
  <text>News text</text>
</article>

Is there a way to check for structural changes in RSS feeds? It can be JS or something specific for Vue.js.

After I can detect the changes in the feed my app can send me an email. That part I can figure out.

Any help is appreciated.

I tried googling for info, but all I get is how to detect changes in the feed content, not the feed structure.

I am a JS beginner, so maybe I am searching for the wrong stuff.

Testing window.location in jest

I am trying to test the window functionality via jest. I have a function which appends a query param to the url and redirects the page to the other page. A rough snippet of the code is below:

var url = new URL(targetUrl);
    if (typeof status !== undefined) {
      // base encode status
      url.searchParams.append("status", status);
      window.location = url.toString();

I am new to jest and I am facing a bit of difficulty simulating the mock test for this, hence can you please help me with this. Thanks in advance.

array.splice() method doesn’t add a variable in the correct spot

so I’m trying to create a basic calculator. The add() method is supposed to take in the array (numsArray), remove the part of the array being added together, and replace it with the result (addedNum). addPoint is the + sign, so therefor it should start from numsArray[addPoint – 1] and delete 3 elements. The expected output should be 300,+,200,+,105. However, the output is 300,+,200,+,100,+5,105.

The add() method:
function add(addPoint, numsArray) { addedNum = parseInt(numsArray[addPoint - 1]) + parseInt(numsArray[addPoint + 1]); numsArray.splice(numsArray[addPoint - 1], 3, addedNum.toString()); return numsArray; }

The code:
var equation = "300 + 200 + 100 + 5".split(" "); console.log(equation.toString()); equation = add(5, equation); console.log(equation.toString());

I tried fiddling with the values, but splice() would only add the number to the front or the end of the array. Am I missing something? I’m new to js so the answer is probably very simple. Thanks in advance!

Angular – DevExpress dxdatagrid disable checkbox conditionally

I am trying to disable checkbox of my dxdatagrid on certain condition. But it does not seems to be working. Below is my code :-

 onCellPrepared(event: any)
{
    console.log(event.rowType);
    if (event.rowType === "data")
     {
      debugger;
      var instance = event.cellElement.find('.dx-select-checkbox').dxCheckBox("instance");
      instance.option("disabled", true);
      event.cellElement.off();
    }
  }

Below is the error i get on execution :-

ERROR TypeError: event.cellElement.find is not a function

Please advise.

Display WordPress Sub-category in dropdown based on the selected Parent Category

I’m trying to show the parent categories in a drop-down box and based on which parent categories are selected, their Sub Categories should appear in a separate drop-down box via an ajax call.

I’ve done a lot of research and came across the following article which is 100% what I need to achieve: https://1stwebdesigner.com/implement-ajax-wordpress-themes/

I followed it correctly but for some reason, the sub-category drop-down is always disabled.

My end goal is to have the 2 dropdowns with a submit button and have it act as a search form, display the selected sub-category posts on a separate page, this was my first step to getting there but having no luck.

I’ve tried changing the javascript $ to jQuery as this was giving an error the first time I used it but currently no errors on the page at all.

<!-- Dropdown select box & javascript -->
<div id="content">
<?php
wp_dropdown_categories('show_count=0&selected=-1&hierarchical=1&depth=1&hide_empty=0&exclude=1&show_option_none=Main Categories&name=main_cat');
?>
<select name="sub_cat" id="sub_cat" enabled="disabled"></select>

<script type="text/javascript">
    jQuery(function() {
      jQuery('#main_cat').change(function() {
        var $mainCat = jQuery('#main_cat').val();

        // call ajax
        jQuery("#sub_cat").empty();
        jQuery.ajax({
          url: "/wp-admin/admin-ajax.php",
          type: 'POST',
          data: 'action=my_special_action&main_catid=' + $mainCat,

          success: function(results) {
            //  alert(results);
            jQuery("#sub_cat").removeAttr("disabled");
            jQuery("#sub_cat").append(results);
          }
        });
      });
    });
</script>

</div>
<!-- Ajax call in function.php -->

add_action('wp_ajax_my_special_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');


function implement_ajax() {
if(isset($_POST['main_catid']))
            {
            $categories=  get_categories('child_of='.$_POST['main_catid'].'&hide_empty=0');
              foreach ($categories as $cat) {
                $option .= '<option value="'.$cat->term_id.'">';
                $option .= $cat->cat_name;
                $option .= ' ('.$cat->category_count.')';
                $option .= '</option>';
              }

              echo '<option value="-1" selected="selected">Scegli...</option>'.$option;
            die();
            } // end if
}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//for users that are not logged in.

Rewrite Vue component to be more DRY

I am just looking for some advice on if there is a more efficient way to write the below, make it a little more DRY?

    <h2>{{ title }}</h2>
    <p>{{ subtitle }}</p>

As I am making the same check for this.name on both title and subtitle I thought there could be a between way than my current implementation, any ideas?

  computed: {
    title() {
      if (this.name === 'discounts_offers') {
        return this.$t('discounts.title')
      }
      if (this.name === 'newsletter') {
        return this.$t('newsletters.title')
      }
      if (this.name === 'product_upgrade') {
        return this.$t('upgrade.title')
      }
      return this.name
   },
    subtitle() {
      if (this.name === 'discounts_offers') {
        return this.$t('discounts.subtitle')
      }
      if (this.name === 'newsletter') {
        return this.$t('newsletters.subtitle')
      }
      if (this.name === 'product_upgrade') {
        return this.$t('upgrade.subtitle')
      }
      return this.name
   },
}

How do I access json object elements from this json in JS?

I have this Json object and need to consume latitude and longitude

Object {
 "coords": Object {
   "accuracy": 22.512498028738957,
   "altitude": 56.650177001953125,
   "altitudeAccuracy": 9.316750526428223,
   "heading": -1,
   "latitude": 44.63884296672757,
   "longitude": -63.59112091788229,
   "speed": -1,
  },
  "timestamp": 1648821089319.792,
}

FormData() converts files to String

I cannot send the original data object from my form through axios to Spring Boot as is is a single object and Spring boot cannot get the @RequestParams for it. Therefore, I am putting the data a FormData object so that it can be sent to a Spring Boot application, however, whenever I append a file to the FormData object, it converts my file array to a string.

Here is the code:

const onSubmit = async (data) => {
        console.log(data, "Form data");

        let payload = new FormData();
        payload.append("JobName", data.JobName);
        payload.append("CandidateFile", data.CandidateFile);
        payload.append("ReferenceFile", data.ReferenceFile);
        console.log(...payload, "Payload")

        for(let pair of payload.entries()) {
            console.log(typeof pair[1]);
        }

        ...

In the console, data comes back with the data object, with files included:

{JobName: ‘JobName’, ReferenceFile: [File], CandidateFile: [File]}

The FormData payload, in the console, is:

(2) [‘JobName’, ‘JobName’]

(2) [‘CandidateFile’, ‘[object File]’]

(2) [‘ReferenceFile’, ‘[object File]’]

And all three typeof of the payload values come back as:

String

Is there any way I could send the files through with FormData?

I have tried using the files both in an array, and out, yet it still gives the same result.

Change code page with ESC/POS on Birch printer

I am using QZ Tray tool to send raw data to thermal printer using ESC/POS commands. This is the code I’m using and it’s working as expected on most printers:

data = [
    "x1bx40",
    "x1bx74x49", // ESC t 73 - switch to Windows-1251
    text + "rn",
    "x1Bx74x48", // ESC t 72 - switch to Windows-1250
    text + "rn",
];

let config = qz.configs.create('printer_name', { encoding: 'windows-1251' });
qz.print(config, print_data).catch(function(e) {
    console.error(e);
});

The issues I am having are with Birch CP-Q3 printer. This printer doesn’t seem to execute ESC t n command if the n is greater than 33. Like that it doesn’t recognize those code pages. Command ESC t n works fine if the n is less than 33.

Strangest thing is that I can switch code page to 73 for example using printer tool, but it can’t be done using ESC/POS commands. Printer self test also contains those code pages.

Is there a command that I should execute before changing code page or a printer configuration that I can change so that extended code pages can be used?

Refactoring condition more efficient

I wrote a code with condition and for me I have lots a repetition of similar code.
Can I make this code more efficient with a refactor ?
After some research, that’s the best that I can do
that’s just a part of the code, not the entire
https://codepen.io/manofthelake/pen/GRyMzgW?editors=1010

  const firstNumber = 50
  const lastNumber = 1000
  const defaultMinNumber = firstNumber + Math.round((lastNumber - firstNumber) / )
                                                       
  const selection = {
    min: null
    max: null
    }                                                     

  if (Object.values(selection).every(s => s === null)) {
    selection.min = defaultMinNumber
    selection.max = lastNumber
  }
  else if (selection.min < firstNumber) {
    savedSelection = {...selection}
    selection.min = (selection.max > firstNumber) ? firstNumber: defaultNumber
    selection.max = (selection.max > firstNumber) ? selection.max : lastNumber
  }
  else if (Object.values(savedSelection).every(s => s !== null)) {
    selection.min = (savedSelection.max > firstNumber) ? selection.min : defaultMinNumber
    selection.max = (savedSelection.max > firstNumber) ? selection.max : lastNumber
  }

how to set DOM media query in javascript?

I need to write a code in DOM Javascript by using media query.

This is my code,

@media screen and (min-width: 300px){
#demo{
width: 100%;
height: 300px;
background-color: blue;
}
}
I tried this in CSS but isn’t worked.

Now, I need to work this code in DOM Javascript but without using “if-else” conditions. it’s my problem.

How to set autoplay for my iframeHtml in Angular?

I use ngx-embed-video/dist for my video section on web page. I try to set autoplay like it is write in documentation but it don’t work for me. Who can help me with fixing it ?

Documentation : https://www.npmjs.com/package/ngx-embed-video

Here I set iframeHtml

    loadVideo() {
        if (this.validUrl.transform(this.video.url)) {
            this.iframeHtml = this.embedService.embed(this.video.url, {
                query: { autoplay: 1 }
            });
        }
    }

There I set the iframe in html

 <div *ngIf="load && (video.url | validUrl)" class="videoPlayer" [innerHTML]="iframeHtml"></div>

Not Found page rendering for an entire page

Below in the App.js file , the routes component wraps part of the website , but i needed the NotFound component to be rendered for the whole page if a wrong url was entered , please advice on how this can be done in this case , i appreciate your feedback

const App = () => {
  return (
    <Box>
      <CssBaseline />
      <Navbar />
      <Routes>
        <Route path="/" element={<Navigate to="/home" />} />
        <Route path="/home" element={<Home />} />
        <Route path="/tours" element={<Tours />} />
        <Route path="/music" element={<Music />} />
        <Route path="/contact" element={<ContactUs />} />
      </Routes>
      <Testimonials />
      <Footer />
    </Box>
  );
};