How can I see changes to HTML & CSS caused by scripts or navigation events

How to see changes to HTML & CSS caused by scripts or navigation events

I often work with UI templates that I adapt to the framework I am coding with. Often there are UI features that are triggered off of mouse overs, etc… that rely on the position of the pointer. Once the pointer is removed the HTML/CSS reverts back to the original state.

A simple example is a Drop Down Menu triggered by a hover event.

<div>

  <button class="dropdown">Dropdown</button>

  <div class="dropdown-content">

<a href="#">Link 1</a>

<a href="#">Link 2</a>

<a href="#">Link 3</a>

  </div>

</div>

<style>

/* Dropdown Content (Hidden by Default) */

.dropdown-content {

  display: none;

  position: absolute;

  z-index: 1;

}

/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {display: block;}

</style>

One can easily find this by using Inspect in developer tools and watching for the change in the CSS of <div class="dropdown-content"> tag when you hover over the <button class="dropdown">Dropdown</button> tag (the css for the hover is selected and appears in the top of the Developer Tools Styles Window).

Unfortunately, many UI features are not this easy to uncover. Hover events can trigger complex unfamiliar JavaScript liberties, etc. with changes that are not easily noticed in the Developer Tools. This can lead to time spend tracing through compressed JavaScript code or frustration with changes disappearing when you move your mouse pointer off of the spot to use the dev tools, etc.

To avoid debugging 3rd party JavaScript (that I am often trying to replace), the rough solution I have found to this has been to dump a copy of the HTML/CSS to a file. Cause the UI change to take place and dump a second file, then Diff the files to see the changes to the HTML and Style that causes the changes.

Is there a tool that will display the diff for me without having to dump files to disk?

As I mentioned, it’s not always easy to spot the changes in the Developer Tools HTML & CSS windows without moving your mouse (losing the changes).

close friends on instagram is no more than 7500 people [closed]

Does anyone know a way to bypass Instagram’s 7,500 follower limit? I’ve tried various methods, including creating my own scripts and using VPNs, but I keep running into a persistent 500 server error. No matter what I do, it seems impossible to surpass this restriction. Has anyone successfully found a workaround or an alternative method to exceed this limit? Any insights or advice would be greatly appreciated!

Convert API response in HTML to JSON form and extract the values in my feature file [closed]

I am trying to convert an API response that comes back in HTML format to JSON format to extract the (auth) values (transId and csfr) and pass to other API to make the request.

  • Tried using JavaScript it needs DOMParser to be imported and could not find a way for it.
  • Tried karate.fromjson () did not work (genAI suggestion)
  • karate.toJson(responseHtml) did not work

HTML Response :

<!DOCTYPE html>
<!-- Build: 1.1.368.1 --><!-- StateVersion: 2.1.1 --><!-- DeploymentMode: Development --><!-- CorrelationId: 52b0f469-b60e-44a1-94cf-d37d65d88d7c --><!-- DataCenter: BL2 --><!-- Slice: 001-000 --><html lang=en><head><link rel=icon href="data:;base64,iVBORw0KGgo="/><script data-container=true nonce="tTR/Kk5G1dCYKmmqwdwlXg==">var CP = {
    "list": []
};
var SETTINGS = {
    "remoteResource": "https://www-teflon.samsclub.com/js/b2c-v19/login.html",
    "retryLimit": 3,
    "trimSpacesInPassword": true,
    "api": "CombinedSigninAndSignup",
    "csrf": "UGxDLzY1aWdtYUNmQ3F4eHNkNTVjaHI0U05hSXdqR1pFalBIYkRNU016dTVsS3pDKzZuVHhWOVY4Yjh1WTdHUzZublJ5SXdNWlVtckUvdmQ2WmIzblE9PTsyMDI1LTAzLTIxVDE4OjM5OjMzLjUzNjcyNTZaO2Y3YWFhemw0SUlZWTVYenBRMy9WUFE9PTt7Ik9yY2hlc3RyYXRpb25TdGVwIjozfQ==",
    "transId": "StateProperties=eyJUSUQiOiI1MmIwZjQ2OS1iNjBlLTQ0YTEtOTRjZi1kMzdkNjVkODhkN2MifQ",
    "pageViewId": "6b8a5204-d387-49f7-be18-f727bd3c432f",
    "suppressElementCss": false,
    "isPageViewIdSentWithHeader": false,
    "allowAutoFocusOnPasswordField": true,
    "pageMode": 1,
    "config": {
        "showSignupLink": "True",
        "sendHintOnSignup": "False",
        "includePasswordRequirements": "true",
        "enableRememberMe": "True",
        "operatingMode": "Email",
        "announceVerCompleteMsg": "True"
    },
    "hosts": {
        "tenant": "/stgtitan.onmicrosoft.com/B2C_1A_SignInWebWithKmsi",
        "policy": "B2C_1A_SignInWebWithKmsi",
        "static": "https://stg.titan.samsclub.com/static/"
    },

nunjucks ternary if expression

I’m using nunjucks as a templating engine in my application and can’t seem to get the block to display at all when I apply more than two conditions e.g.

{{ "true" if foo else "false" }}

The above example works just fine, however the following does not:

{{ "message one" if condition_1 else "message two" if condition_2 else "default" }}

The error message I get tells me that a comma is missing but no matter where I add one it continues to tell me a comma is missing. Is there a way to get this to work? I could solve this with if tags, but I’d have to then duplicate the whole block which doesn’t sound like a good solution.

How to wrap the complete text inside elements with a span tag?

I have basically this HTML structure:

<div id="whatever_1">
<button id="something1">
Some text 1
</button>
</div>
<div id="whatever_2">
<a href="..." class="something2">
Some text 2
</a>
</div>
<div id="whatver_3">
<a href="..." class="something3">
Some text 3
</a>
</div>
</div>

I need to wrap all the text which is inside the button- or a-tags with a span tag. So that it looks like this afterwards:

<div id="whatever_1">
<button id="something1">
<span>Some text 1</span>
</button>
</div>
<div id="whatever_2"><a href="..." class="something">
<span>Some text 2</span>
</a>
</div>and so on...

Best would be if I could add an id selector to each of the span elements but this is mandatory.

This code works for a single element, but not for getElementsbyclass which return more than one element. And I can’t use getElementbyId because the parent tag is different, sometimes a button, sometimes an anchor and using class selectors, not always id’s.
I could solve it with PHP and the_content filter but I would prefer a solution in JS/JQuery.

const p = document.getElementById('post-mention');
p.innerHTML = '';
const span = document.createElement('span');
span.innerHTML = pInner;
p.append(span);

Other questions I found here are all about select a word and wrap that in a span tag. But I need the whole text within the a or button tag wrapped in a span.

updating the text when checkbox is clicked

I have a scenario where selecting a checkbox for Testing sample switches the radio button to option A and unchecking the checked checkbox switches back the radio button to option B as shown in the code snippet below. By default, option B is selected.

My question:
When Testing Sample checkbox is checked, in addition to switching the option to A from B (which is already happening in the code below), I want to update the text of html as well from A. Some text goes here to the one defined in the variable choiceAHtml. However, I’m little confused here as I’m dealing with the table cell element so how should I select this part of table <td> A. Some text goes here</td> in order to update the text dynamically using jQuery or javascript?

let choiceAHtml = "A. text that needs to be there when Testing Sample checkbox is checked"

$("[name='testingOptionSpring']").click(function () {
    if ($("[name='testingOptionSpring']").is(":checked")) {
      console.log("Checkbox is checked so uncheck Samplechoice2 and check sampleChoice1");
      $('#sampleChoice2').prop('checked',false);
      $('#sampleChoice1').prop('checked',true);

      $("input[name='sampleChoice']").each(function(){
        
        console.log(this.value + ":" +this.checked);

      })
      //
    } else {
        console.log("Checkbox is NOT checked so uncheck Samplechoice1 and check sampleChoice2");
        $('#sampleChoice2').prop('checked',true);
        $('#sampleChoice1').prop('checked',false);
    }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<td colspan="2">
        <table border="0" cellpadding="5" cellspacing="5" align="center">

            <tbody><tr>
                <td colspan="2"><span class="headerInstructions">1. <b>SAMPLE
                            CHOICE:</b>
                </span></td>
            </tr>
            <tr>
                <td valign="top"><input id="sampleChoice1" name="sampleChoice" onchange="handleSampleChoice()" type="radio" value="choiceA"></td>
                <td> A. Some text goes here</td>
            </tr>
            <tr>
                <td valign="top"><input id="sampleChoice2" name="sampleChoice" onchange="handleSampleChoice()" type="radio" value="choiceB" checked="checked"></td>
                <td><span class="headerInstructionsBlue">B.Some other text goes here</td>
            </tr>
            <tr>
                <td colspan="2"><span class="headerInstructions">2. <b>MAIL</b>
                        the  form </td>
            </tr>
        </tbody></table>
    </td>
  
  <td colspan="2">
        <table border="0" cellpadding="5" cellspacing="5" align="center">
            <tbody><tr>
                <td><b>Testing Sample.</td>
            </tr>
            <tr>
                <td>
                        
                        
                            <input id="testingOptionSpring1" name="testingOptionSpring" type="checkbox" value="true"><input type="hidden" name="_testingOptionSpring" value="on">
                        
                     <span class="instructionsSmaller">Testing Sample </span></td>
            </tr>
            
        </tbody></table>
    </td>

Merge multiple Key Value pairs in array of objects

Good evening guys,

i am trying to merge values in multiple objects in an array and save the result as new key value pairs in the same object. I know how to do it for a single object but not really sure how to archieve it for an array of objects and couldnt find a fitting solution. Do i have to use reduce?
Here is my default array of objects:

let firstObj = [
  {
    "id": 1,
    "firstValue": 45,
    "secondValue": 15,
    "firstText": "this is ",
    "secondText": "a text"
  },
  {
    "id": 2,
    "firstValue": 14,
    "secondValue": 67,
    "firstText": "this is ",
    "secondText": "another text"
  },
  {
    "id": 3,
    "firstValue": 30,
    "secondValue": 71,
    "firstText": "this is ",
    "secondText": "again a text"
  },
  {
    "id": 4,
    "firstValue": 6,
    "secondValue": 22,
    "firstText": "this is ",
    "secondText": "the last text"
  }
]

For a single object, i know i could do something like this:

let newObjB = {...firstObj, "total": firstObj.firstValue + firstObj.secondValue, "mergedText": firstObj.firstText + firstObj.secondText}

Like i said, i am not really sure how to archieve it for an array of objects.
It should looks like this:

let firstObj = [
  {
    "id": 1,
    "firstValue": 45,
    "secondValue": 15,
    "firstText": "this is ",
    "secondText": "a text",
    "total": 60,
    "mergedText": "this is a text"
  },
  {
    "id": 2,
    "firstValue": 14,
    "secondValue": 67,
    "firstText": "this is ",
    "secondText": "another text",
    "total": 81,
    "mergedText": "this is another text"
  },
  {
    "id": 3,
    "firstValue": 30,
    "secondValue": 71,
    "firstText": "this is ",
    "secondText": "again a text",
    "total": 101,
    "mergedText": "this is again a text"
  },
  {
    "id": 4,
    "firstValue": 6,
    "secondValue": 22,
    "firstText": "this is ",
    "secondText": "the last text",
    "total": 28,
    "mergedText": "this is the last text"
  }
]

Thanks in advance

Is eval dangerous when used to run scripts from a partial view?

I have a .NET Core MVC application which uses Telerik’s control library, such as the Grid control. I want to be able to load a partial view via Ajax (into a div), and this partial view may contain a Telerik component such as a grid.

Naturally, this doesn’t work as the partial view response includes a JS function to initialise the grid, but as it’s loaded via AJAX it never gets called

An I safe to ‘eval’ this script to run it? Or is there a safer way? The script is always going to be returned from the server and will never be dictated by user input

problem with a search bar that updates after every letter inputted, html and javascript

I wrote a search bar function that updates the shown options as you input letters.
The problem is that after I put letters the not hidden images stay in the same fixed position and I want them to start from the left.
When I use ‘display: none;’ on the hidden images the transition of the hidden images fade out or back in, doesn’t work at all.

So in conclusion, I want it to show a transition of hiding the images and moving to the start instead of the hidden images, and now it or the transition or the moving to the start.

This is my css code:

.search-bar-container {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 5px;
    margin: 0px 83px;
    margin-top: 120px;
    border-radius: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;  /* Add relative positioning */
}

/* Input Field */
#search-bar {
    padding: 8px 12px;
    font-size: 17px;
    font-family: 'Courgette Regular', Times, serif;
    border: none;
    border-radius: 20px;
    outline: none;
    width: calc(100% - 100px); /* Take full width minus space for the button */
    letter-spacing: 0.01em; /* Slight spacing for refinement */
    text-align: left; /* Ensure text aligns to the left */
}

/* Clear Button (X) */
#clear-button {
    padding: 0 8px;
    font-size: 18px;
    background-color: transparent;
    color: #cf9254;
    border: none;
    cursor: pointer;
    position: absolute;
    right: 90px; /* Position it on the left side of the input */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10; /* Make sure it stays above the search input */
    visibility: hidden; /* Hide the button by default */
}

/* Search Button */
#search-button {
    padding: 8px 12px;
    font-size: 17px;
    font-family: 'Courgette Regular', Times, serif;
    background-color: #cf9254;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    letter-spacing: 0.01em; /* Slight spacing for refinement */
    position: absolute; /* Absolute positioning */
    right: 10px; /* Position 10px from the right */
    top: 50%; /* Center it vertically */
    transform: translateY(-50%); /* Adjust for perfect centering */
}

/* Show the clear button when input has value */
#search-bar:not(:placeholder-shown) + #clear-button {
    visibility: visible; /* Show the button if there's text */
}

#search-button:hover {
    background-color: #a87b44; /* Darker shade when hovered */
}

#clear-button:hover {
    color: #a87b44; /* Change color when hovered */
}

/* Search Results - Hide Non-Matching Recipes */
.recipe-container {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.recipe-container.hidden {
    opacity: 0;
    transform: scale(0.9); /* Slightly shrink when hidden */
    pointer-events: none; /* Disable interaction */
}

.side-nav.open ~ main .search-bar-container {
    width: 90%;
}

/* Adjust positioning of the search bar when side nav is open */
.side-nav.open ~ main {
    margin-left: 200px; /* Give space for the side-nav */
}

.recipes-section {
    background-color: white;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    margin-left: 85px;
    max-width: 1181px;
    box-shadow: 0px 0.5px 10px 0px #cf9254ab;
}

.recipes-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, 220px); /* Fixed size columns */
    gap: 10px; /* Consistent spacing */
    justify-content: start; /* Align items from the left */
}

/* Ensure all recipe containers are 220px x 220px */
.recipe-container {
    position: relative;
    width: 220px;
    height: 220px;
}

/* Ensure images fit within the 220px container */
.recipe-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintain aspect ratio while covering */
    border-radius: 12px;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
    display: block;
}

/* Hide non-matching recipes and remove space with a fade transition */
.recipe-container.hidden {
    opacity: 0;               /* Fade out */
    visibility: hidden;       /* Make the element invisible but still in layout */
    pointer-events: none;     /* Disable interaction */
    transform: scale(0.9);    /* Optional: Shrink the element a bit while fading */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; /* Apply transitions */
}```

useMotionValueEvent not working on motion react

I just discovered motion for react (previously framer motion) and I just started learning it. I’ve gotten a hold of the basic syntax from the docs to make some simple animations. I’m working with useMotionEvent. But I’m not sure I totally get the concept, because I’ve been trying to replicate this “Track element scroll offset” on the docs. https://motion.dev/docs/react-scroll-animations,

I’ve gotten the scrollXprogress to work, but I’m not totally getting the function with the maskimg to work. It’s supposed to give a fade gradient animation to the left or right depending on whether you’ve scrolled to the end or start or middle of the container.
The code on the docs is mostly using typescript and I’m not familiar with that. I use reactJS

This is what I’ve been able to do so far.

import React, { useRef } from "react";
import {
  animate,
  motion,
  useMotionValue,
  useMotionValueEvent,
  useScroll,
} from "motion/react";

const ScrollXBox = () => {
  const left = `0%`;
  const right = `100%`;
  const leftInset = `20%`;
  const rightInset = `80%`;
  const transparent = `#0000`;
  const opaque = `#000`;

  function useScrollOverflowMask(scrollXProgress) {
    const maskImage = useMotionValue(
      `linear-gradient(90deg, ${opaque}, ${opaque} ${left}, ${opaque} ${rightInset}, ${transparent})`
    );

    useMotionValueEvent(scrollXProgress, "change", (value) => {
      if (value === 0) {
        animate(
          maskImage,
          `linear-gradient(90deg, ${opaque}, ${opaque} ${left}, ${opaque} ${rightInset}, ${transparent})`
        );
      } else if (value === 1) {
        animate(
          maskImage,
          `linear-gradient(90deg, ${transparent}, ${opaque} ${leftInset}, ${opaque} ${right}, ${opaque})`
        );
      } else if (
        scrollXProgress.getPrevious() === 0 ||
        scrollXProgress.getPrevious() === 1
      ) {
        animate(
          maskImage,
          `linear-gradient(90deg, ${transparent}, ${opaque} ${leftInset}, ${opaque} ${rightInset}, ${transparent})`
        );
      }
    });

    return maskImage;
  }

  const elements = ["A", "B", "C", "D"];
  const colors = [
    "bg-red-800",
    "bg-yellow-600",
    "bg-green-900",
    "bg-purple-900",
  ];

  const ref = useRef(null);
  const { scrollXProgress } = useScroll({ container: ref });
  const maskImage = useScrollOverflowMask(scrollXProgress);

  return (
    <div className="scroll-x h-screen flex flex-col justify-center items-center gap-4 bg-violet-400">
      <div id="example">
        <svg id="progress" width="80" height="80" viewBox="0 0 100 100">
          <circle
            cx="50"
            cy="50"
            r="40"
            pathLength="1"
            style={{ fill: "none", stroke: "red", strokeWidth: 20 }}
          />
          <motion.circle
            cx="50"
            cy="50"
            r="40"
            style={{
              fill: "none",
              stroke: "yellow",
              strokeWidth: 10,
              pathLength: scrollXProgress,
            }}
          />
        </svg>
        <div
          ref={ref}
          className="element-container overflow-x-scroll w-96 flex gap-4"
          style={{
            WebkitMaskImage: maskImage.get(),
            maskImage: maskImage.get(),
          }}
        >
          {elements.map((element, index) => (
            <motion.ul key={index} className="flex-shrink-0">
              <li>
                <div className={`${colors[index]} w-64 h-64`}></div>
              </li>
            </motion.ul>
          ))}
        </div>
      </div>
    </div>
  );
};

export default ScrollXBox;

I tried using the .get() function with the maskImg but it only gets the value declared

prop-types NOT giving warning in react

I am trying to learn prop-types and cause a warning intentionally but it is not working.

App.jsx:

import { PropTypes } from 'prop-types';

const App = (props) => {

    return (
        <div>
            {props.name}
        </div>
    )
}

App.propTypes = {
    name: PropTypes.string.isRequired,
}

export default App

main.jsx:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App name={1} />
  </StrictMode>,
)

I am saying a string is required but passing in a number. If I dont pass anything to name ( <App /> ) then there is no warning even though I have ‘isRequired’. I checked my browser console and I do have it set so i can see warnings. If i remove the import line in App.jsx, then I get an error saying PropTypes isnt defined. Whatever is passed to name is rendered on screen and if nothing is passed then the empty div is rendered.

package.json:

{
  "name": "react-prop-types",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "prop-types": "^15.8.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.21.0",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.21.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.15.0",
    "vite": "^6.2.0"
  }
}

node --version
v18.19.1
npm --version
9.2.0

Is it ok to leave simple, mobile-related states for all devices? [closed]

I’m creating a search component which becomes fixed on mobile devices and is then activated (translated to the center of the screen) by a button. Changing the visibility of certain elements can be of course done using CSS media queries (I’m ok with leaving HTML elements in the DOM), but I’m wondering what about the states that are still present in the component when the viewport is larger? If the user starts browsing on desktop device, then these states will probably never be needed and they will be just there sitting. I was thinking of maybe creating another component which looks almost the same, but doesn’t hold these two mobile-related states. Then the parent component would check the viewport size and if the viewport size matches the mobile devices, it will show the component with these mobile-related states. However, on the other hand, these are just two simple states and using viewport-checking state in parent and then conditionally rendering mobile or desktop version of component might be more wasteful in terms of device’s resources. What approach is recommended?

My code:

const Search = () => {
  const [value, setValue] = useState("");
  const [showMobileSearch, setShowMobileSearch] = useState(false);
  const inputRef = useRef<HTMLInputElement | null>(null);
  const toggleShowMobileSearch = () => {
    setShowMobileSearch((prev) => !prev);
    if (showMobileSearch) setValue("");
    else if (inputRef.current) inputRef.current.focus();
  };
  const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };
  return (
    <_Search role="search">
      <SearchWrapper $active={showMobileSearch}>
        <SearchFormWrapper $active={showMobileSearch}>
          <SearchForm>
            <InputButton text="ser" />
            <SearchInput
              ref={inputRef}
              value={value}
              onChange={handleSearch}
              placeholder="Search for songs, albums and artists"
            />
            <InputButton text="del" />
          </SearchForm>
          <Button text="mic" />
          <CloseMobileSearchButton
            text="clo"
            onClick={toggleShowMobileSearch}
          />
        </SearchFormWrapper>
      </SearchWrapper>
      <OpenMobileSearchButton text="mob" onClick={toggleShowMobileSearch} />
    </_Search>
  );
};

javascript fetch failing when target url is on same server as script file – can this be CORS?

I am trying to write a javascript routine which gets a large chunk of text from one of several different files, depending on user behaviour. So I am using the fetch() routine, copying code snippets from many examples on this site. But I always get the “failed to fetch” error, and I am trying to understand why. In other questions, the commonest answer is a CORS failure. But in my case, all the files live on the same server – the .html and .js files are in a directory called (let’s say) B/simulation, and the text files are in a directory called B/parameters. So my question is – Can it be a CORS failure in this situation?
If the answer to that is NO, any ideas of what it might be – though I realize I’ll probably need to provide some actual code to enable anyone to help with that.