Blancer.com Tutorials and projects

How to Embed a Java Application i.e. Flowable Designer in a React Application.
I tried creating a React Wrapper and then try embedding that. There’s no iframe or tag option.

I am struggling to send data to custom metrics from Browser API. Docs are clear on how to do it from Node.js, but in Browser context it looks like there is no other option but to send it via HTTP request.

Did anyone find a browser’s api method to do that, or did datadog just skip this feature for browsers?

The datatog in my web app is configured the CDN way:

    <script type="text/javascript" src="https://www.datadoghq-browser-agent.com/datadog-logs-us.js"></script>
    <script>
      DD_LOGS.init({
        // config
      });
    </script>

I am trying to extract the real ranking of products from an e-commerce site, but my script currently assigns ranks based on DOM position, which does not match the actual ranking shown on the site.

For example, my code incorrectly displays Rank #7 as Rank #4 because it is reading products in the order they appear in the HTML structure, rather than their real-time ranking on the site.

What I Have Tried:
✅ Checking HTML Attributes: I inspected product elements in DevTools but couldn’t find data-rank, bestseller-badge, or other useful attributes.
✅ Extracting Rank from Visible Text: Some products have ranking labels, but not all of them.
✅ Looking at Network Requests (XHR/Fetch API): I noticed that the ranking might be fetched dynamically from an API, but I am unsure how to extract this data.

document.querySelectorAll(".product-card").forEach((product) => {
let rankElement = product.querySelector(".bestseller-badge");
let realRank = rankElement ? rankElement.innerText : "Unknown";
console.log(`Real Rank: ${realRank}`);

});

What I Need Help With:
❓ How does an e-commerce site typically store and update product rankings?
❓ How can I retrieve the real ranking (e.g., sorted by best sellers) instead of relying on DOM order?
❓ Should I look at JavaScript-rendered elements or API responses for this data?
❓ How can I fetch ranking data dynamically if the site loads it asynchronously?

I am a computer science student but still learning JavaScript and web scraping techniques. Any guidance would be greatly appreciated!

For every INSERT query (normally more columns and data entries) i am using this syntax

db.run(`INSERT into table1(column1, column2, column3) VALUES(?,?,?)`,
          [data1, data2, data2], (err) => {
            if (err) {
              return console.log('Error:', err.message);
            }
          });

This is working fine but when i have 20+ columns and data, i dont want to write every single column and every data variable. This is very susceptible to errors and time consuming.

I am looking for a query like

db.run(`INSERT into table1(*) VALUES(*)`,[myArray], (err) => {
       if (err) {
         return console.log('Error:', err.message);
       }
      });

// Using "*" like in Select query
db.run(`SELECT * FROM table1`, (err) => {
       if (err) {
         return console.log('Error:', err.message);
       });

In this case each data from every column is fetched without naming each column using “*”.
Thanks for every hints!

I am using Tabulator and have successfully implemented a search in column headings using headerFilter:"input".

The issue I have is that the corresponding cells in the column to search on contain HTML and the search is conducted on the entire contents of the cell – i.e. including the HTML. So for a cell with this entry:

<a href="#">Sierra</a>

A search for ‘re’ will return the above (and all) results that have a link.

Is there a way to have the search ignore the tags? i.e. in the above example to just search on “Sierra”.

Here’s the JavaScript:

new Tabulator('#myTable', {
    layout: 'fitColumns',
    pagination: false,
    placeholder: "No cars",
    columns: [{title:"Model",field:"model",formatter:"html",editable:false,headerFilter:"input",headerFilterPlaceholder:"Enter text..."},
{title:"Manufacturer",field:"manufacturer",formatter:"html",editable:false,headerFilter:"list",headerFilterParams:{values:["Audi","Ford","VW"]},headerFilterPlaceholder:"< Select >"},
{title:"Fuel",field:"fuel",formatter:"html",editable:false,headerFilter:"list",headerFilterParams:{values:["Diesel","Electric","Petrol"]},headerFilterPlaceholder:"< Select >"},
],
    data: [
    {
        model: "<a href="#">Sierra</a>",
        model_clean: "Sierra",
        manufacturer: "Ford",
        fuel: "Petrol"
    },
    {
        model: "<a href="#">Capri</a>",
        model_clean: "Capri",
        manufacturer: "Ford",
        fuel: "Petrol"
    },
    {
        model: "<a href="#">A3</a>",
        model_clean: "A3",
        manufacturer: "Audi",
        fuel: "Diesel"
    },
    {
        model: "<a href="#">ID4</a>",
        model_clean: "ID4",
        manufacturer: "VW",
        fuel: "Electric"
    }
]
});

jsfiddle

NB I’ve tried to use a ‘clean’ (HTML-free) data element as the field that is searched on without luck.

I am using Tabulator and have successfully implemented a search in column headings using headerFilter:"input".

The issue I have is that the corresponding cells in the column to search on contain HTML and the search is conducted on the entire contents of the cell – i.e. including the HTML. So for a cell with this entry:

<a href="#">Sierra</a>

A search for ‘re’ will return the above (and all) results that have a link.

Is there a way to have the search ignore the tags? i.e. in the above example to just search on “Sierra”.

Here’s the JavaScript:

new Tabulator('#myTable', {
    layout: 'fitColumns',
    pagination: false,
    placeholder: "No cars",
    columns: [{title:"Model",field:"model",formatter:"html",editable:false,headerFilter:"input",headerFilterPlaceholder:"Enter text..."},
{title:"Manufacturer",field:"manufacturer",formatter:"html",editable:false,headerFilter:"list",headerFilterParams:{values:["Audi","Ford","VW"]},headerFilterPlaceholder:"< Select >"},
{title:"Fuel",field:"fuel",formatter:"html",editable:false,headerFilter:"list",headerFilterParams:{values:["Diesel","Electric","Petrol"]},headerFilterPlaceholder:"< Select >"},
],
    data: [
    {
        model: "<a href="#">Sierra</a>",
        model_clean: "Sierra",
        manufacturer: "Ford",
        fuel: "Petrol"
    },
    {
        model: "<a href="#">Capri</a>",
        model_clean: "Capri",
        manufacturer: "Ford",
        fuel: "Petrol"
    },
    {
        model: "<a href="#">A3</a>",
        model_clean: "A3",
        manufacturer: "Audi",
        fuel: "Diesel"
    },
    {
        model: "<a href="#">ID4</a>",
        model_clean: "ID4",
        manufacturer: "VW",
        fuel: "Electric"
    }
]
});

jsfiddle

NB I’ve tried to use a ‘clean’ (HTML-free) data element as the field that is searched on without luck.

Bloomer mock is good site to generate data for free and there is no limit on record generation.
Is there extensive documentation on how to use javascript feature ?

Site link – Bloomer Mock

The page number and total page display in my table header isn’t working correctly. I’ve attempted to configure the script layout element, but the issue persists. For example, on the first page, it correctly shows “1 of 2”, but on the second page, it only displays ‘1 of _’ and the total page number “2” is missing and wrong, the expected output should be ‘2 of 2’. How can I fix this problem within the template using Birt Eclipse?

I am using ReactTransitionGroup with ReactRouter. I want my website have smoothy route. but t have trouble in rendering twice
here my example componet i use
https://bin.rhosted.com/tF6o4I.png
my router i use react-transition-group with react-router-dom
https://bin.rhosted.com/p/BaCs2b.txt
i need to fix my componet call one extra, please help me resolve it, many thanks in advance

I’m working on a React project using TinyMCE and trying to handle LaTeX equations with MathJax. My issue is that when I load content into the TinyMCE editor, the LaTeX equations do not render properly.

Example of the Content I’m Trying to Load:

<div style="position: absolute;">  
<p style="margin: 0; font-size: 12px;">\*\*(a)\*\* Solve: \\\[a\^{2}-ab+b\^{2}=3\\\] \\\[a+2b+1=0\\\]</p>  
</div>  
</div>

When this content loads into TinyMCE, the LaTeX does not render correctly. Instead, I just see the raw text with [ … ] instead of the properly formatted equations.

What I Tried
Wrapping the editor in MathJaxContext from better-react-mathjax – but this causes the content to show “undefined” instead of rendering the equations.

Ensuring MathType Plugin is Enabled – I’m using tiny_mce_wiris to handle math input.

Manually Triggering MathJax Rendering – Tried using window.MathJax.typeset() after loading content, but it didn’t help.

My TinyMCE Configuration

<Editor
  id={id}
  apiKey={process.env.REACT_APP_TINYMCE}
  value={value}
  init={{
    images_upload_handler: handleImageUpload,
    automatic_uploads: false,
    placeholder: '',
    height: height,
    width: '100%',
    draggable_modal: true,
    extended_valid_elements: '*[.*]',
    display: 'none',
    plugins: [
      'advlist',
      'autolink',
      'lists',
      'link',
      'image',
      'charmap',
      'preview',
      'anchor',
      'searchreplace',
      'visualblocks',
      'code',
      'fullscreen',
      'insertdatetime',
      'media',
      'table',
      'help',
      'wordcount',
      'tiny_mce_wiris',
    ],
    toolbar:
      'undo redo | formatselect | bold italic backcolor | 
      alignleft aligncenter alignright alignjustify | 
      bullist numlist outdent indent | removeformat | help | image | table | drawio | tiny_mce_wiris_formulaEditor | tiny_mce_wiris_formulaEditorChemistry',
    setup: (editor) => {
      editor.ui.registry.addButton('drawio', {
        text: 'Draw',
        onAction: () => {
          setIsDrawioOpen(true);
        },
      });
    },
    external_plugins: {
      tiny_mce_wiris: `https:url-to-plugin`,
    },
    forced_root_block: 'div',
  }}
  onEditorChange={handleEditorChange}
/>

What I Need Help With
How can I get MathJax to properly render the LaTeX equations inside TinyMCE when loading content?

Is there a way to force MathJax to reprocess the editor content after it loads?

Should I be using a different approach to handle LaTeX inside TinyMCE?

Thanks you.

Ok, so I already made one popup that works correctly for my website but now when I try to copy the code & do it again (to make another popup besides it) it doesn’t work and only pops up when I press it. I think the problem lies in the html and css code but I’m a beginner at this so I couldn’t really figure it out.

HTML code:

  <div class="photo-gallery">
    <div class="pic website">
      <button onclick="togglePopup()"><img src="(image place holder)" alt="Button Image"></button>
    </div>
  
    <div class="popup" id="popup-1">
      <div class="overlay"></div>
      <div class="content">
        <div class="close-btn" onclick="togglePopup()">&times;</div>
      <div class="header">
        <h1 style="font-size:50px;">This Website</h1></div>
        <div class="tldr">
          <p style="font-size:25px;"></style> <br>TL:DR:</p>
        </div>
        <div class="popup-top">
        <p style="font-size:20px;">This portfolio website built from scratch using HTML, CSS, and JS!!<br><br></p> 
      </div>
        <div class="Extended-Description">
          <p style="font-size:25px;"></style>  Extended Description:</p>
        </div>
        <div class="popup-body">
        <p style="font-size:20px;">I started learning about HTML & CSS during the spring of 2024 while taking a AP CSP course. 
          Eventually (during the summer of 2024) I started to play around with these langanuges more and decided to pursue making
          my own portfolio website after being inspired seeing a former classmate do something similar. I offically started this 
          project in October of 2024. This entire project has been a learning experience for me since I intially planned for it to
          be complete simple, just bare bones basic HTML & CSS. But this project has become bigger than what I imagined with every feature
          being added more and more until it seems fit.</p> 
      </div>
    </div>

CSS code:

section{
    min-height: 100vh;
    padding: 5rem 9% 5rem;
}

.photo-gallery {
  width: 90%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

.pic {
  margin-top: 130px;
  position: relative;
  height: auto;
  border-radius: 10px;
  box-shadow: 3px 3px 5px lightgray;
  cursor: pointer;
}

.pic img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.website::before {
  content: "This website!";
  color: rgb(177, 9, 9);
  text-align: center;
}

.popup .overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.popup {
  display: none;
}


.popup .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  background: #fff;
  width: 1310px;
  height: 600px;
  z-index: 2;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 15px;

}

.header {
  text-align: center;
}

.popup-body {
  display: flex;
  text-align: left;
  justify-content: space-between;
  align-items: flex-start;

}

.popup-body img {
  border-radius: 12px;
  width: auto;
  height: auto;
  right: 50%;
}

.popup .close-btn {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  background: #222;
  color: #fff;
  font-size: 25px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
}

.popup.active {
  display: block;
}

.popup.active .overlay {
  display: block;
}

.popup.active .content {
  transition: all 300ms ease-in-out;
  transform: translate(-50%, -50%) scale(1);
}

.pic::before{
    position: absolute;
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    font-weight: bold;
    width: 100%;
    margin-top: -100px;
    opacity: 0;
    transition: .3s;
    transition-delay: .2s;
}
.pic:after{
    content: "";
    pointer-events: none;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    border-radius: 10px;
    height: 0;
    background-color: rgba(0, 0, 0, 0.289);
    transition: .3s;
}
.pic:hover::after{
    height: 100%;
}
.pic:hover::before{
    margin-top: 0;
    opacity: 1;
}

.Extended-Description {
  font-style: italic;
  font-weight: 500;
}

.tldr {
  font-style: italic;
  font-weight: 500;
}

JS code:

function togglePopup() {
  document.getElementById("popup-1").classList.toggle("active");
}

My iOS app (built with Expo SDK 51 and React Native 0.74) was rejected by the App Store because it crashes on launch for the iPad 5th generation running iOS 18.3.2. The app works fine in simulators (iPad Air 5, iPhone 13 mini) and physical test devices I own.

Crash Details from Apple:

Crash occurs immediately on launch.
Apple provided crash logs (partially symbolicated). Here’s a snippet:
log
Copy
[Include relevant crash log lines here. Example:]
Thread 0 Crashed:
0 MyApp 0x1045a3fdc -[AppDelegate application:didFinishLaunchingWithOptions:] + 0
1 UIKitCore 0x18d2b3a88 -[UIApplication _handleDelegateCallbacksWithOptions:isSuspended:restoreState:] + 348
…
What I’ve Tried:

Updated all dependencies to versions compatible with Expo SDK 51 (see package.json below).
Tested on physical devices (iPhone 13, iPad Pro) with iOS 17/18 – no crashes.
Added required permissions in app.json (camera, location, etc.).
Used expo prebuild –clean and ensured no leftover native code conflicts.
Code/Config:

package.json dependencies:
json
Copy

'''{
  "dependencies": {
    "expo": "51.0.37",
    "react-native": "0.74.5",
    "@react-native-masked-view/masked-view": "^0.3.0",
    "react-native-screens": "3.31.1",
    "react-native-reanimated": "3.10.1"
  }
}'''

app.json permissions:

json
Copy
"ios": {
  "infoPlist": {
    "NSCameraUsageDescription": "Required for scanning...",
    "NSLocationWhenInUseUsageDescription": "Needed for..."
  }
}

Environment:

Expo SDK: 51.0.37
React Native: 0.74.5
Node: 18.18.2 / npm: 9.8.1
Workflow: expo

I am trying to write up some code in Mirth Connect that takes an XML tag and removes all attributes from inside of it.

Example:

<code nullFlavor="UNK" xsi:type="CD">

Desired result:

<code/>

I could do something like this:

delete msg['code']['@nullFlavor']
delete msg['code']['@xsi:type']

But I ideally want to handle ALL possible values that could come in, not just nullFlavor and xsi:type. Is there a way to do this?

I am working on a SPA and having routing on router.js

const route = (event) => {
    event = event || window.event;
    event.preventDefault();
    window.history.pushState({}, "", event.target.href);
    handleLocation();
};

const mainpage = {
    404: "/pages/404.html",
    "/": "/pages/home.html",
    "/about": "/pages/about.html",
};

const sidesection = {
    404: "/blurbs/404.html",
    "/": "/blurbs/home.html",
    "/about": "/blurbs/about.html",
}

const handleLocation = async () => {
    const path = window.location.pathname;
    const main = mainpage[path] || mainpage[404];
    const main_html = await fetch(main).then((data) => data.text());
    const sidesec = sidesection[path] || sidesection[404];
    const sidesec_html = await fetch(sidesec).then((data) => data.text());
    document.getElementById("main").innerHTML = main_html;
    document.getElementById("side").innerHTML = sidesec_html;
};

window.onpopstate = handleLocation;
window.route = route;
handleLocation();

And index.html with these script

<script src="assets/js/router.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>

On home page / script runs very well and happy. But if I route to /about only corresponding html is rendered but none of the script runs. This happens even if I access /about first (and if I navigate back to / all 5 scripts run well).

The main.js including many script, but here is an example of one functionality not running at all in /about route (but runs well on / route, no matter how you accessing it).

function calculateSettingAsThemeString({ localStorageTheme, sessionStorageTheme, systemSettingDark }) {
    if (sessionStorageTheme !== null) { //firefox not saving localStorage between files
        return sessionStorageTheme;
    }
    if (localStorageTheme !== null) {
      return localStorageTheme;
    }
    if (systemSettingDark.matches) {
      return "dark";
    }
    return "light";
  }
  
  /**
  * Utility function to update the button text and aria-label.
  */
  function updateButton({ buttonEl, isDark }) {
    const newCta = isDark ? "☼" : "☾";
    // use an aria-label if you are omitting text on the button
    // and using a sun/moon icon, for example
    buttonEl.setAttribute("aria-label", newCta);
    buttonEl.innerText = newCta;
  }
  function updateThemeOnHtmlEl({ theme }) {
    document.querySelector("html").setAttribute("data-theme", theme);
  }
  const button = document.querySelector("[data-theme-toggle]");
  const localStorageTheme = localStorage.getItem("theme");
  const sessionStorageTheme = sessionStorage.getItem("theme");
  const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
  //take all 3 sources for current setting
  let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, sessionStorageTheme, systemSettingDark });
  updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" });
  updateThemeOnHtmlEl({ theme: currentThemeSetting });
  button.addEventListener("click", (event) => {
    const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
    localStorage.setItem("theme", newTheme);
    sessionStorage.setItem("theme", newTheme);
    updateButton({ buttonEl: button, isDark: newTheme === "dark" });
    updateThemeOnHtmlEl({ theme: newTheme });
    currentThemeSetting = newTheme;
  });

How can I fix script suddenly not runs when navigate to other routes?
I am running locally with http-server –proxy http://localhost:8080?

I want to trigger evaluateJavascript mouse focus by code to document.getElementById(‘txt_amount’), but it’s not working on Windows Desktop. But it’s working well on MacOS. When page loaded, I want it to trigger document.getElementById(‘txt_amount’) by mouseFocusEvent, removeAttribute(‘required’) and filled with amountValue2.value = 100 and then click button2 by document.querySelector(‘button’).click() and submit button Continue automatically, But it’s not working on Windows Desktop(it’s working very well on MacOS).

var amountValue2 = document.getElementById('txt_amount');
                if (amountValue2) {
                    amountValue2.value = 100;
                } else {
                    console.log('amountValue2 not founded.');
                }

                let button2 = document.querySelector('button');
                if (button2) {
                     button2.disabled = false;
                     button2.addEventListener('click', function() {
                       });
                    var mouseFocusEvent = new MouseEvent('focus', {
                    bubbles: true,  // Allow event to bubble up the DOM tree
                    cancelable: true, // Allow the event to be canceled
                    view: window, // Specify the window object
                    clientX: 0, // Mouse position relative to the viewport
                    clientY: 0 // Mouse position relative to the viewport
                  });
                  amountValue2.addEventListener('focus', function() {
                  amountValue2.value = $amount;
                        console.log('Mouse 1 focus!');
                      });

                  window.setTimeout(() => {
                  amountValue2.removeAttribute('required');
                  amountValue2.dispatchEvent(mouseFocusEvent);
                  button2.focus();
                  button2.click();
                }, 500);
                } else {
                    console.log('Button not founded.');
                }

Image show below