I’m working on a custom WordPress theme and using Flexbox to build a responsive layout. One of my flex items (e.g., a card or sidebar element) is overflowing its parent container on smaller screens, even though I’m using flex-wrap: wrap and setting max-width values.

Here’s a simplified version of the CSS:

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 300px;
  max-width: 100%;
}

Despite this setup, the .item sometimes breaks the container width, especially when nested inside WordPress blocks or when a large image or long word is inside it.

What’s the best approach to make sure the flex item always stays inside the container on all screen sizes, especially in dynamic WordPress environments?

Things I’ve tried:

Adding overflow: hidden or auto

Setting min-width: 0

Wrapping inside another div with width: 100%

Still no consistent results.

Any ideas or best practices for solving this in a WordPress context?

Thanks in advance!

I hope someone can help me, I’m working in surveyjs, specifically in survey-creator, I want to create a custom class that extends panelmodel, but when trying to add it to survey-creator it gives the error Uncaught (in promise) TypeError: e.isDefaultRendering is not a function

const creatorOptions = {
  showLogicTab: true,
  isAutoSave: true,
};


const creator = new SurveyCreator.SurveyCreator(creatorOptions);

class MyCustomClass extends Survey.Question {
  getType() {
    return "my-custom-class";
  }
  get myCustomProperty() {
    return this.getPropertyValue("myCustomProperty");
  }
  set myCustomProperty(val) {
    this.setPropertyValue("myCustomProperty", val);
  }
}

Survey.ElementFactory.Instance.registerElement("my-custom-class", (name) => {
  return new MyCustomClass(name);
});

Survey.Serializer.addClass(
  "my-custom-class",
  [{
    name: "myCustomProperty",
    category: "general",
    visibleIndex: 2
  }],
  function () {
    return new MyCustomClass("");
  },
  "question"
);

creator.toolbox.addItem({
  name: "my-custom-class",      // mismo que getType()
  title: "question Personalizado", 
  iconName: "icon-panel",     // nombre del icono (debe existir o ser uno genérico)
  json: {
    type: "my-custom-class",
    name: "panelPersonalizado1",
    elements: []
  },
  isCopied: true              // para que se arrastre/copiar al survey
});

creator.render("surveyCreatorContainer");

I’m starting to practice with JavaScript and I’m stuck because I can’t find a way to import a .js file that only contains data from another file that contains the code that will use the data.
I’ve tried import, use, and require, but I always get the same error.

somedata.js

myhost = “localhost”;
myuser = “root”;
mypassword =  “dumb”;
mydatabase = “yourdb”;
valid_values = [‘P’,‘M’,'S',‘CM’,‘CP’,‘CS’,‘VM’,‘VP’,‘VS’,‘EM’,‘EP’,‘ES’,‘AM’,‘AP’,‘AS’,‘BM’]
headers = [‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’, ‘G’, ‘H’, ‘I’, ‘J’, ‘K’]

mainfile.js

use(somedata.js)    <---```ReferenceError: use is not defined```
require(somedata.js)   <----```ReferenceError: somedata is not defined```
import(somedata.js)   <----```ReferenceError: somedata is not defined```

mysql = require(‘mysql’);
con = mysql.createConnection({
host: myhost,
user: myuser
password: mypassword,
database: mydatabase
});
con.connect(function(err) {
query =“SELECT * FROM table WHERE year= ? AND month = ?”
 var year = 2025
 var month = ‘7’
 if (err) throw err;
    con.query(query, [year, month], function (err, result) {
        if (err) throw err;
        console.log(result);
        con.end()
    });
});

I currently have 3 javascript files displaying GEOJSON as overlays on my Leaflet Map . How can I group them together to have just one toggle button in the Layer Controls.
Overlay 1 is Building
Overlay 2 is Footpaths
Overlay 3 is Gardens
but id like them all to toggle together under one name as a group layer
Heres my code

  <script src="OldBuildings.js"></script>
  <script src="footpaths.js"></script>
  <script src="gardens.js"></script>

These files are Geojson using a Var at the top of the File of the same name.

Code for Each Overlay=

var footpaths = L.geoJSON(footpaths, {
color: ‘black’,
fillColor: ‘white’,
weight:0.5,
fillOpacity: 0.9,

}
)

.addTo(map);

var gardens = L.geoJSON(gardens, {
color: ‘black’,
fillColor: ‘green’,
weight:0.5,
fillOpacity: 0.9,

}
)

.addTo(map);

var OldBuildings = L.geoJSON(OldBuildings, {
color: ‘black’,
fillColor: ‘grey’,
weight:0.5,
fillOpacity: 0.8,

}
)

.addTo(map);

var overlays = {
“Buildings”:OldBuildings,
“Footpaths”:footpaths,
“Gardens”:gardens
L.control.layers(baseLayers, overlays).addTo(map);

Currently being displayed as three seperate overlay control toggle buttons
Cheers T

Notion MCP Integration: “Expected object, received string” Error with Nested Parameters

I’m experiencing a consistent issue with the Notion MCP (Model Context Protocol) integration where nested object parameters are being incorrectly parsed as strings, causing all operations that require complex parent or data objects to fail.

Environment

• Integration: Notion MCP Server

• Client: Claude with MCP integration

• Issue: Parameter serialization/parsing bug with nested objects

Problem Description

When attempting to use Notion MCP functions that require nested object parameters, I consistently get validation errors indicating that objects are being received as strings.

Error Examples

1. Creating Pages in Database

Code:

{
  "pages": [
    {
      "properties": {
        "Name": "Test Item",
        "Status": "Not started",
        "Sub Group": "Ben"
      }
    }
  ],
  "parent": {
    "database_id": "15ee8129-6c2b-8010-ae07-c6b7bddd3c66",
    "type": "database_id"
  }
}

Error:

MCP error -32602: Invalid arguments for tool create-pages: [
  {
    "code": "invalid_union",
    "unionErrors": [
      {
        "issues": [
          {
            "code": "invalid_type",
            "expected": "object",
            "received": "string",
            "path": ["parent"],
            "message": "Expected object, received string"
          }
        ],
        "name": "ZodError"
      }
    ],
    "path": ["parent"],
    "message": "Invalid input"
  }
]

2. Moving Pages

Code:

{
  "page_or_database_ids": ["225e8129-6c2b-81f9-a6a6-ee10d9486331"],
  "new_parent": {
    "database_id": "15ee8129-6c2b-8010-ae07-c6b7bddd3c66",
    "type": "database_id"
  }
}

Error:

MCP error -32602: Invalid arguments for tool move-pages: [
  {
    "code": "invalid_union",
    "unionErrors": [
      {
        "issues": [
          {
            "code": "invalid_type",
            "expected": "object",
            "received": "string",
            "path": ["new_parent"],
            "message": "Expected object, received string"
          }
        ]
      }
    ]
  }
]

3. Updating Page Properties

Code:

{
  "data": {
    "page_id": "225e8129-6c2b-81f9-a6a6-ee10d9486331",
    "command": "update_properties",
    "properties": {
      "Name": "Updated Name",
      "Status": "Not started"
    }
  }
}

Error:

MCP error -32602: Invalid arguments for tool update-page: [
  {
    "code": "invalid_type",
    "expected": "object",
    "received": "string",
    "path": ["data"],
    "message": "Expected object, received string"
  }
]

What Works

Simple operations without nested objects work fine:

// This works ✅
{
  "pages": [
    {
      "properties": {
        "title": "Simple Page"
      }
    }
  ]
  // No parent parameter
}

What I’ve Tried

1. Different parameter formats: Tried various object structures and property names

2. Different database IDs: Used both page ID and collection ID formats

3. Simplified objects: Reduced nested objects to minimum required fields

4. Alternative functions: Same issue occurs across multiple MCP functions

Analysis

The issue appears to be in the parameter serialization layer where:

• Simple parameters (strings, arrays) are passed correctly

• Nested objects are being stringified somewhere in the MCP pipeline

• The Zod schema validation then fails because it receives a string instead of an object

Questions

1. Is this a known issue with the Notion MCP integration?

2. Are there workarounds for creating pages directly in databases?

3. Is there a different parameter format that works for nested objects?

4. Are there alternative approaches to achieve the same functionality?

Expected Behavior

The parent and data parameters should be passed as objects to the Notion API, allowing for proper database operations as documented in the Notion API specification.

Additional Context

• Authentication works fine (can fetch pages, search, etc.)

• Read operations work perfectly

• Issue only affects write operations with nested parameters

• Same database operations work fine via direct Notion API calls

Any insights or workarounds would be greatly appreciated!

Tags: notion-api, mcp, model-context-protocol, javascript, integration, parameter-serialization

I need to be able to parse a time string formatted like this: ’12:34:15′ along with a timezone. Obviously would have to add it to today’s date at 12am, and then parse it into a JavaScript date obj.

• Can use the Date() constructor with hours +- according to the input timezone but that has doesn’t account for daylight savings
• Can also use the Date.Parse() function but that has the same problem

Requirements of a solution:

• using a string formatted like ’12:34:15′, and a IANA timezone, convert the time into a JS date obj
• the date doesn’t actually matter, I just need the time adjusted to the timezone
• then from there convert that to UTC
• would like this to be vanilla JS if possible as this is running in the browser and I don’t want to include external packages

been scratching my head at this one for a while now. I am running Node/Express 5 to serve a simple web-app, I am also using ES modules on the JS end.

ERROR: POST /auth/register → 500 TypeError: Unexpected ( at 27, expected END: https://git.new/pathToRegexpError

I completely understand the error. When parsing one of my routes, path-to-regexp is finding a ‘(‘. I cannot find this for the life of me though. I have checked every single route and none exist. I have checked dependencies in my package.json, nothing. I have gone through the process of singling out the files with routes, and found that it is coming from my auth.js file. This is currently set to handle sign-ups to my service, creating a database object when signup is complete, and sending a confirmation email.

router.post('/register', async (req, res) => {
try {
const { username, password, email, first_name, last_name } = req.body;

// 1) basic validation
if (!username || !password || !email) {
  return res.status(400).json({ error: 'Missing fields' });
}

// 2) hash the password
const password_hash = await bcrypt.hash(password, 12);

// 3) verification token
const verification_token = uuidv4();

// 4) insert user
await pool.query(
  `INSERT INTO users
     (username, password, email, first_name, last_name, is_verified, verification_token)
   VALUES ($1,$2,$3,$4,$5,$6,$7)`,
  [ username, password_hash, email, first_name, last_name, false, verification_token ]
);

// 5) send confirmation email
const confirmUrl = `${process.env.BASE_URL}/auth/confirm?token=${verification_token}`;

await transporter.sendMail({
  from:    '"XXX" <[email protected]>',
  to:      email,
  subject: 'Confirm your email with XXX',
  html:    `<p>Click <a href="${confirmUrl}">here</a> to verify.</p>`
});

return res
  .status(201)
  .json({ message: 'Registered — please check your email' });

  } catch (err) {
console.error(
  `[${new Date().toISOString()}] ${req.method} ${req.originalUrl} → 500`,
  err
);
return res.status(500).json({ error: 'Registration failed' });
}
});

I am assuming this has something to do with the SQL query being put into the route, but I don’t understand how it is getting in there.

Hopefully someone else has insight to what is happening, I am clearly doing something wrong.

In a page i have a field like this with the Label field as Status and next to that it has the value and that also as Label.
Webpage content with Status value as Label

When i inspect the page code has below:
Html Code in Inspect

I am trying to get the value for the label Status.

How can i get the value of Status? ie: Pending payout

I’m encountering issue with element ui after migrating from vue 2 to vue 3

the clearable attribute doesn’t work anymore.

for the while el tags like el-select, el-input.

And that’s the issue output

    <el-input v-model="searchForm.societe" type="text" placeholder="Nom de societe"  clearable>
                        </el-input>

app.min.js?id=8d88cd5b8f72df7e3f3a656da29bf8b7:24634 [Vue warn]: (deprecation INSTANCE_ATTRS_CLASS_STYLE) Component has inheritAttrs: false but is relying on class/style fallthrough from parent. In Vue 3, class/style are now included in $attrs and will no longer fallthrough when inheritAttrs is false. If you are already using v-bind=”$attrs” on component root it should render the same end result. If you are binding $attrs to a non-root element and expecting class/style to fallthrough on root, you will need to now manually bind them on root via :class=”$attrs.class”.
Details: https://v3-migration.vuejs.org/breaking-changes/attrs-includes-class-style.html
at <ElIcon key=1 class=”el-input__icon el-input__clear” onMousedown=fn … >
at <ElInput modelValue=”d” onUpdate:modelValue=fn type=”text” … >

When using FormKit’s drag and drop JS library, and dragging an external element over a region which has drag and drop enabled, the console shows the following error.
Please see screenshot showing what I am doing from the FormKit documentation website.

This is the error in the developer tools console, which is the same error I receive in my project:

Uncaught TypeError: Cannot read properties of undefined (reading 'el')
    at La (CGmjAurY.js:64:49253)
    at Re (CGmjAurY.js:64:51565)
    at Ta (CGmjAurY.js:64:48897)
    at HTMLLIElement.<anonymous> (CGmjAurY.js:64:51516)

I have tried to set the accepts property, however receive the same issue:

const [source, items] = useDragAndDrop(["dungeon_master.exe", "map_1.dat", "map_2.dat", "character1.txt", "character2.txt", "shell32.dll", "README.txt"],
  {draggable: (el) => { return el.id !== "no-drag"; }, }
);

Any suggestions on how to prevent this error would be great, it doesn’t cause the application to crash but would be nice to avoid this error in the console. Wondering how to fix it since the documentation examples seem to do it as well.

I’m adding a few hex color codes to a const in JavaScript. It works fine when the hex code includes both letters and numbers. However, if the hex code is numbers only, I get an “Invalid character” error – the error occurs on the “purple” color below. I know I could use rgb(), but I’d prefer to go with hex codes. How can I fix this?

const color = {
  orange: #C65E09,
  purple: #000060,
  lightgray: #E5E5E5
};

I don’t know why its giving me undefined at the end of printing a string characters using for loop inside a function. When I use the code outside the function it works fine but inside it it giving me undefined at the end of printing the characters.

Here is the code:

console.log(vowelsAndConsonants("javascriptloops"));

function vowelsAndConsonants(ss) {

    let vowels = ss.match(/[aeiou]/g);
    for(let i =0; i<vowels.length;i++){
        console.log(vowels[i]);
    }
}

Here is the result:

a
a
i
o
o
undefined

I’m having an issue where I want my javascript project to build in Docker. I copy all projects file that are needed and then I run pnpm i. This will not work because I have a private npm registry for some dependencies. My solution is to copy over the npmrc file with a secret. The problem however is that this npmrc file also should have an environment variable replaced with it. How do I do this?

In package.json script I have the following to build the docker image:

"build:server:docker": "DOCKER_BUILDKIT=1 docker build . -f apps/my-app/Dockerfile -t my-app --secret id=npmrc,src=$HOME/.npmrc --secret id=my-npm-token,env=$MY_NPM_TOKEN",

Inside of the Dockerfile:

RUN --mount=type=secret,id=my-npm-token,env=MY_NPM_TOKEN 
    --mount=type=secret,id=npmrc,target=/root/.npmrc 
    pnpm install

In the copied over npmrc file there is a mention to my private npm registry:

//artifactory.mystuff.io/artifactory/api/npm/npm-release-local/:_authToken=${MY_NPM_TOKEN}

The pnpm install command fails with a 401 “No authorization header was set for the request.”

This makes me thing the environment variable is not loaded correctly in combination with the npmrc file.

Everything works fine when using pnpm install without using Docker.

I’m working on a Tailwind CSS configuration where I’m overriding some default color values (for example, cyan.400) inside theme.extend.colors. I’m also defining aliased color tokens (such as button-primary-default-bg) that reference those colors.

However, the aliased classes are not picking up the overridden color values – they still use Tailwind’s original colors instead of my custom ones.

Here’s a slimmed-down version of my tailwind.config.js to illustrate the issue:

const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");

module.exports = {
  content: [
    "./app/views/**/*.{erb,html}",
  ],
  darkMode: "selector",
  theme: {
    extend: {
      colors: {
        ...colors, // keeping other Tailwind utility colors available
          cyan: {
          ...colors.cyan,
          400: "#01C5D1", // My custom cyan.400
        },
        "button-primary-default-bg": {
          DEFAULT: colors.blue[600], // Light mode: uses default Tailwind color
          dark: colors.cyan[400],    // Dark mode: should pick up my override but does not
        },
      },
    },
  },
  plugins: [],
};

What I expect:
The class using theme('colors.button-primary-default-bg.dark') in dark mode should result in a background of #01C5D1 (my cyan.400 override).

What happens instead:
It still uses the original Tailwind cyan.400 color (#22d3ee), not my overridden value.

I’ve tried moving the ...colors spread both above and below my overrides, but no matter what, the alias (button-primary-default-bg) seems to reference the original imported colors object, not the extended theme.

I also tried putting the color override code into theme.colors instead of theme.extend.colors, and that had no positive effect either.

I’ve been implementing the Master/Detail functionality on an existing AG Grid and the cellRenderers don’t seem to be getting applied to the cells in the detail grid. Looking at the documentation I didn’t see any examples there of using them, though styling through the cellStyle/Class and using the valueFormat do work.

Are cellRenderers not support in details, or is there some other key I missed in the doc?

Example setup:

    const detailCellRendererParams = useMemo(
        () => ({
            // provide the Grid Options to use on the Detail Grid
            detailGridOptions: {
                columnDefs: [
                    { field: 'label' },
                    {
                        field: 'detailValue',
                        cellRenderer: 'DetailValue',
                        filter: 'agNumberColumnFilter',
                        cellStyle: { textAlign: 'right'},
                    },
                ],
            },
            // get the rows for each Detail Grid
            getDetailRowData: params => {
                params.successCallback(params.data.details);
            },
        }),
        []
    );