Freelance Projects, Design and Programming Tutorials
Been asked to edit some code for a friend, but when trying to locate the appearance tab to find the code files for styles and scripts I can’t seem to find them anywhere.
I have been told I have full admin permissions, but will ask and confirm.
anything I have tried so far hasn’t worked, I’m relatively new to wordpress
I am using the latest version of Gridstack.js in my Blazor server-side app and it is nearly working as expected.
However, when I added a dynamic widget through the api to the grid the HTML content is being rendered as text.
The code to add a widget:
<button onClick="addWidget()">Add widget</button>
<script language="javascript" type="text/javascript">
function getGrid()
{
return document.querySelector('.grid-stack').gridstack;
}
function addWidget() {
console.log('addWidget called');
var id = 'widget-' + Math.random().toString(36).substring(2, 15);
let n = {
id: id,
w: Math.round(1 + 3 * Math.random()),
h: Math.round(1 + 3 * Math.random()),
content: '<div>test</div>',
};
var grid = getGrid();
grid.addWidget(n);
}
</script>
This is the result:
Why is the HTML being rendered as text? (There are no non-printable characters that might be causing the problem).
i’m currently working on a custom radio input that is working as expected. The only issue I’m facing is that the background of my radio appears black, but only on Chrome. It works fine on Firefox.
className are just Tailwind classes prefixed with tw-
I tried to use inline styles and use “important” but nothing is fixing that black background.
<input
type='radio'
name={name}
value={option.value}
disabled={disabled}
checked={value === option.value}
onChange={onChange}
className={cn(
'tw-mt-0.5 tw-cursor-pointer',
'tw-border tw-border-gray-300 tw-rounded-full',
'tw-accent-prim-500',
disabled ? 'tw-cursor-not-allowed tw-bg-gray-200' : '',
)}
{...inputProps}
/>
Here is a link to a screenshot :
https://i.ibb.co/sSMmP0v/Screenshot-from-2025-06-18-15-08-46.png
Thanks
I have several Javascript files e.g. TITLE.js with this format and they all work fine:
jQuery( document ).on( 'click', '.click-TITLE-link', function(event) {
event.preventDefault();
var post_id = jQuery(this).data('id');
jQuery.ajax({
url : TITLElink.ajax_url,
type : 'post',
data : {
action : 'click_TITLE_process',
nonce : TITLElink.ajax_nonce,
post_id : post_id
},
success : function( response ) {
if (response) {
// DO SOMETHING
}
}
});
})
Each javascript file is associated with a code snippets that look like this:
<?php
add_action( 'wp_enqueue_scripts', 'ajax_TITLE_link_enqueue_scripts' );
function ajax_TITLE_link_enqueue_scripts() {
wp_enqueue_script( 'TITLE-link', get_theme_file_uri( '/js/TITLE.js' ), array('jquery'), '1.0', true );
wp_localize_script( 'TITLE-link', 'TITLElink', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
'ajax_nonce' => wp_create_nonce( 'link_TITLE_accept_' . admin_url( 'admin-ajax.php' ) ),
));
}
// action to execute AJAX call
add_action( 'wp_ajax_nopriv_click_TITLE_process', 'click_TITLE_process' );
add_action( 'wp_ajax_click_TITLE_process', 'click_TITLE_process' );
function click_TITLE_process() {
if ( defined( 'DOING_AJAX' ) && DOING_AJAX && wp_verify_nonce( $_POST['nonce'], 'link_click_TITLE_' . admin_url( 'admin-ajax.php' ) ) ) {
// Do something here
// redirect back to the page
echo "Refreshing";
} else {
die( 'Security check failed' );
}
}
It seems cumbersome and not good practice to have a separate javascript file for each function, but before I give consolidation a go, I’m worried that the NONCE part won’t work?
Any help much appreciated. TIA.
Normally, the <html> and <body> tags define the root structure of an HTML document and are not allowed to appear inside other tags like <div>.
But I’m wondering:
Is it technically possible to “nest” an entire HTML structure — including its own <html>, <head>, and <body> — inside a <div> on the parent page?
Would it work via tricks like:
Shadow DOM (attachShadow({ mode: 'open' }))
Embedding with <iframe>
Using templates or script tags?
If yes, how does the browser interpret and render that structure?
If not, what are the specific limitations that prevent it?
Goal:
I’m exploring whether we can embed full HTML documents as modular components inside a larger HTML page — not just with iframes, but also with more modern component techniques (e.g., Web Components).
Can someone explain to me why Response.json is listed as both a static and an instance method for the Response interface of Fetch API?
Is it because it performs two different actions at the same time? One being static (returning a new promise) and one being dynamic (return a specific type of data based on the response?)
import { useState } from 'react';
import getWeatherData from './weatherApi/weather';
interface SearchBarProps {
text: string;
}
function SearchBar({text}: SearchBarProps) {
const [city, setCity] = useState('');
const searchClick = () => {
const input = document.querySelector('input');
setCity((input as HTMLInputElement).value.trim());
getWeatherData(city);
}
const [x, setX] = useState(1);
return (
<>
<h1 onClick={() => setX(x+1)}>Hello {text} and {x} </h1>
<input type="text" />
<button onClick={searchClick}>Search</button>
</>
);
}
export default SearchBar;basically when i press the button its supposed to log out the text in it but it logs out the previous text and i am even changing the state before i log the value
where am i mistaken
I have two React repositories:
Main app – recently upgraded to React 19
Builder (support repo) – still on React 18
I upgraded my Main repo to React 19, and I’m linking my Builder repo like this in package.json:
"@myComp/builder": "git+ssh://[email protected]/myComp/builder.git#semver:0.1.18"
The builder repo has both react and react-dom listed as peerDependencies and devDependencies (not direct dependencies). However, when I connect the Builder to Main, I get the following error:
TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner')
I tried to upgrade my Builder repo & half way there, but it uses a critical library called @projectstorm/react-diagrams, which does not support React 19 yet. This library is core to my app and I cannot refactor or replace it right now due to time constraints.
Is there any safe workaround where I can:
Any guidance or suggestions on safe patterns or temporary workarounds would be appreciated.
SO has a very specific way of evolving, and you really should spend a whole lot of time searching it before you post a question that has — especially if you’re a beginner — very likely already been answered. They’re very welcoming of novel, answerable questions, but they get really bored over there of flagging basic beginner questions as duplicates a million times in a row.
For most languages with any kind of user base there is at least one subreddit, and most languages at least try to be friendly to newcomers. Do a search on here for r/[LANG] and r/learn[LANG] and you’ve got a decent chance of finding a more language specific answer.
If it’s not really language specific you’re always welcome to ask here… different model from SO, but similarly it’s a good idea to spend some time searching and reading (especially in any given subreddit’s FAQ section) before asking anything that’s one-or-two quick Google searches away.
Upvote
22
Downvote
[deleted]
OP
•
3y ago
Thank you for that but what if one could really not get that point even he or she did multiple research abt it
Upvote
1
Downvote
[deleted]
•
3y ago
Then ask… and simultaneously learn to get better at researching. The simple fact is most questions a beginner might ask in any given language have an answer already out there. A beginner is not likely to ask a question that hasn’t been asked before, but it could happen. Always be prepared for the possibility that someone else seeming unfriendly to you might well be you asking a question you could have easily answered yourself.
Also, have patience; when you ask a question on either Reddit or SO it’s entirely possible the person with the answer you need is in a vastly different time zone than you.
Upvote
9
Downvote
[deleted]
•
3y ago
The thing is, that IF you did the research, your question will be very specific automatically. Stuff that gets harsh respones on SO usually falls into the category “general question without any context”.
Same goes for this subreddit: general questions will get ignored (or you’ll get asked for more context) or you will get asked for more context.
Asking bad / unanswerable questions will lead to unwanted reactions anywhere. On SO it’s kind of harsh reactions, here you will not get.
@ìr_Sign_#j1✨
I am a little stuck on working with javascript in Interactive Grid in Oracle Apex. I just want to change the label of one interactive Grid save button, but I am not able to do it. I am on APEX 23.2
This code is not working
function(config) {
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(), // Make a copy of the default toolbar
toolbarGroup = toolbarData.toolbarRemove("actions2"); // Remove the actions2 menu group
toolbarGroup.controls.push({
type: "BUTTON",
label: "test",
action: "save",
icon: "icon-ig-save",
iconBeforeLabel: true,
hot: true
});
// Assign new toolbar data back to toolbarData configuration property
config.toolbarData = toolbarData;
// Return the options
return config;
}
I’m working on a project based on the OHIF Viewer. My goal is to load measurement data from a mock JSON file and have it automatically drawn on the corresponding image slice when the viewer loads.
When implementing measurement in the ViewerLayout component I use a useEffect hook that is bound to the activeViewportId and renderingEngineId. Inside this hook I do the following:
Read my mock measurement data.
Enrich it with the current study/series/instance UIDs.
Attempt to add it to the measurementService and annotationManager.
The Problem:
The measurement data successfully appears in the “Measurements” side panel, and measurementService.getMeasurements() shows the data correctly. However, the annotation (the actual PlanarFreehandROI drawing) is not rendered on the viewport’s SVG layer. There are no errors in the console.
It seems the data is tracked by the measurementService, but the rendering part is not being triggered correctly.
What is the correct, idiomatic way in OHIF/Cornerstone.js to programmatically add a measurement from data and ensure it gets rendered?
I’ve tried using measurementService.annotationToMeasurement and annotationManager.addAnnotation manually. Is this correct, or should measurementService.addMeasurement handle the rendering automatically through its mappings?
My current implementation uses a useEffect hook. Is there a more reliable event-based approach (e.g., listening for Enums.Events.IMAGE_RENDERED) to ensure the viewport is fully ready before I attempt to add the annotation?
Here are the relevant code snippets and my mock data structure. Any guidance would be greatly appreciated!
const getViewportInfo = useCallback(() => {
return cornerstoneViewportService.getViewportInfo(activeViewportId);
}, [cornerstoneViewportService, activeViewportId]);
const getCurrentImageId = useCallback(() => {
if (!activeViewportId) return null;
const viewportObj = cornerstoneViewportService.getCornerstoneViewport(activeViewportId);
return viewportObj?.getCurrentImageId();
}, [cornerstoneViewportService, activeViewportId]);
if (!dataSource) {
console.error('ViewerLayout: Invalid DataSource');
} else {
servicesManager.services.dataSource = dataSource;
servicesManager.services.getImageIdsForDisplaySet = ds =>
dataSource.getImageIdsForDisplaySet(ds);
}
const customToMeasurementSchema = useCallback(
raw => {
console.log('customToMeasurementSchema', raw);
if (!dataSource?.getImageIdsForDisplaySet || !displaySetService.getDisplaySetByUID) {
return null;
}
const ds = displaySetService.getDisplaySetByUID(raw.displaySetInstanceUID);
if (!ds) {
console.warn(`DisplaySet with UID ${raw.displaySetInstanceUID} not found.`);
return null;
}
const imageIds = dataSource.getImageIdsForDisplaySet(ds) || [];
const imageId = imageIds[raw.frameNumber - 1] || imageIds[0];
const measurementSchema = {
uid: raw.uid,
SOPInstanceUID: raw.SOPInstanceUID,
FrameOfReferenceUID: ds.FrameOfReferenceUID || raw.metadata?.FrameOfReferenceUID,
referenceStudyUID: raw.referenceStudyUID || raw.studyInstanceUID,
referenceSeriesUID: raw.seriesInstanceUID || ds.SeriesInstanceUID,
frameNumber: raw.frameNumber || 1,
displaySetInstanceUID: raw.displaySetInstanceUID,
label: raw.label || '',
displayText: raw.displayText || [],
type: raw.type,
points: raw.points || [],
source: raw.source,
toolName: raw.toolName,
referencedImageId: imageId,
metadata: {
...raw.metadata,
FrameOfReferenceUID: ds.FrameOfReferenceUID || raw.metadata?.FrameOfReferenceUID,
referencedImageId: imageId,
},
data: { [imageId]: raw.data },
selected: raw.selected || false,
textBox: raw.textBox,
};
console.log('customToMeasurementSchema Output:', measurementSchema);
return measurementSchema;
},
[dataSource, displaySetService]
);
const toAnnotationSchema = useCallback((measurement, annotationType) => {
const annotationObj = {
annotationType,
uid: measurement.uid,
imageId: measurement.referencedImageId,
frameNumber: measurement.frameNumber || 1,
visible: true,
handles: {
points: measurement.points.map(([x, y, z]) => ({
x,
y,
world: [x, y, z],
})),
textBox: {
x: measurement.textBox?.worldPosition[0],
y: measurement.textBox?.worldPosition[1],
},
},
textBox: {
x: measurement.textBox?.worldPosition[0],
y: measurement.textBox?.worldPosition[1],
},
style: {
color: 'rgb(0,255,0)',
lineWidth: 3.5,
fill: 'rgba(0,255,0,0.1)',
},
metadata: {
...(measurement.metadata || {}),
FrameOfReferenceUID:
measurement.metadata?.FrameOfReferenceUID || measurement.FrameOfReferenceUID || '',
},
data: measurement.data,
};
console.log('toAnnotationSchema Output:', annotationObj);
return annotationObj;
}, []);
const injectMeasurements = useCallback(
(currentImageId, displayUID, instance, viewportElement) => {
console.log('Instance object in injectMeasurements:', instance);
const renderingEngine = getRenderingEngine(renderingEngineId);
if (!renderingEngine) {
console.error('Rendering engine not found in injectMeasurements');
return;
}
const viewport = renderingEngine.getViewport(activeViewportId);
if (!viewport) {
console.error('Viewport not found');
return;
}
const { clientWidth, clientHeight } = viewport.element;
const topLeftWorld = viewport.canvasToWorld([0, 0]);
const bottomRightWorld = viewport.canvasToWorld([clientWidth, clientHeight]);
const center = [
(topLeftWorld[0] + bottomRightWorld[0]) / 2,
(topLeftWorld[1] + bottomRightWorld[1]) / 2,
(topLeftWorld[2] + bottomRightWorld[2]) / 2,
];
const worldWidth = Math.abs(bottomRightWorld[0] - topLeftWorld[0]);
const worldHeight = Math.abs(bottomRightWorld[1] - topLeftWorld[1]);
const dynamicPoints = [
[center[0] - worldWidth * 0.1, center[1] - worldHeight * 0.1, center[2]],
[center[0] + worldWidth * 0.1, center[1] - worldHeight * 0.1, center[2]],
[center[0] + worldWidth * 0.1, center[1] + worldHeight * 0.1, center[2]],
[center[0] - worldWidth * 0.1, center[1] + worldHeight * 0.1, center[2]],
];
console.log('Calculated dynamic points:', dynamicPoints);
const commonProps = {
displaySetInstanceUID: displayUID,
StudyInstanceUID: instance.StudyInstanceUID,
referenceStudyUID: instance.StudyInstanceUID,
referenceSeriesUID: instance.SeriesInstanceUID,
SOPInstanceUID: instance.SOPInstanceUID,
metadata: {
...measurementsMock[0],
FrameOfReferenceUID: instance.FrameOfReferenceUID,
referencedImageId: currentImageId,
data: measurementsMock[0].data,
textBox: measurementsMock[0].textBox,
},
FrameOfReferenceUID: instance.FrameOfReferenceUID,
};
console.log('Common Props before raw assignment (with actual UIDs):', commonProps);
const source = measurementService.getSource('Cornerstone3DTools', '0.1');
const annotationManager = annotation.state.getAnnotationManager();
if (!annotationManager || typeof annotationManager.addAnnotation !== 'function') {
console.error(
'Annotation Manager is not available or addAnnotation method is missing! Cannot inject measurements.'
);
return;
}
const rawTemplate = measurementsMock[0];
measurementsMock.forEach(rawTemplate => {
const raw = {
...rawTemplate,
...commonProps,
points: dynamicPoints,
metadata: {
...(rawTemplate.metadata || {}),
...(commonProps.metadata || {}),
},
referencedImageId: currentImageId,
SOPInstanceUID: commonProps.SOPInstanceUID,
FrameOfReferenceUID: commonProps.FrameOfReferenceUID,
referenceSeriesUID: commonProps.referenceSeriesUID,
referenceStudyUID: commonProps.referenceStudyUID,
};
console.log('Raw object for customToMeasurementSchema (after dynamic merge):', raw);
measurementService.annotationToMeasurement(
source,
measurementService.VALUE_TYPES.POLYLINE,
raw,
false
);
let existingAnnotation = annotationManager.getAnnotation(raw.uid);
if (!existingAnnotation) {
console.log('Injecting measurement (no existing annotation found with this UID)');
const annotationObj = toAnnotationSchema(raw, raw.toolName || 'PlanarFreehandROI');
console.log('Eklenecek Annotation FoR:', annotationObj.metadata.FrameOfReferenceUID);
annotationObj.imageId = currentImageId;
console.log(
'Final annotationObj before addAnnotation (full object):',
JSON.stringify(annotationObj, null, 2)
);
const engine = getRenderingEngine(renderingEngineId);
if (!engine) {
console.error(`[ViewerLayout] Geçersiz renderingEngineId: ${renderingEngineId}`);
return;
}
const groupKey = annotationObj.metadata.FrameOfReferenceUID;
annotationManager.addAnnotation(annotationObj, groupKey);
engine.render();
const added = annotationManager.getAnnotation(raw.uid);
if (!added) {
console.error(`Annotation UID ${raw.uid} eklenemedi.`);
}
console.log(
'Annotation retrieved from manager AFTER addAnnotation:',
annotationManager.getAnnotation(raw.uid)
);
} else {
console.log(
`Annotation with UID ${raw.uid} already exists in manager. Skipping injection.`
);
}
});
},
[measurementService, toAnnotationSchema, renderingEngineId, activeViewportId]
);
useEffect(() => {
const source = measurementService.getSource('Cornerstone3DTools', '0.1');
measurementService.addMapping(
source,
measurementService.VALUE_TYPES.POLYLINE,
{ points: measurementsMock[0].points.length },
toAnnotationSchema,
customToMeasurementSchema
);
}, [measurementService, toAnnotationSchema, customToMeasurementSchema]);
useEffect(() => {
const timeoutId = setTimeout(() => {
const viewportInfo = getViewportInfo();
if (viewportInfo?.renderingEngineId) {
setRenderingEngineId(viewportInfo.renderingEngineId);
console.log('[ViewerLayout] renderingEngineId set:', viewportInfo.renderingEngineId);
}
}, 5000);
return () => clearTimeout(timeoutId);
}, [getViewportInfo]);
useEffect(() => {
if (!renderingEngineId || !activeViewportId) return;
const toolGroup = ToolGroupManager.getToolGroupForViewport(activeViewportId, renderingEngineId);
if (!toolGroup) {
console.error('ToolGroup not available, skipping tool configuration.');
return;
}
toolGroup.setToolActive(PlanarFreehandROITool.toolName, {
bindings: [{ mouseButton: Enums.MouseBindings.Primary }],
});
console.log('[ViewerLayout] Tool configured for:', toolGroup);
}, [renderingEngineId, activeViewportId]);
useEffect(() => {
if (!activeViewportId || !viewports.has(activeViewportId) || !renderingEngineId) {
return;
}
const renderingEngine = getRenderingEngine(renderingEngineId);
if (!renderingEngine) {
console.error('ViewerLayout: Invalid Rendering Engine');
return;
}
const viewport = renderingEngine.getViewport(activeViewportId);
if (!viewport) {
console.error('ViewerLayout: Invalid Viewport');
return;
}
const currentImageId = getCurrentImageId();
console.log('Active Viewport currentImageId:', currentImageId);
if (!currentImageId) {
console.error('ViewerLayout: No current image ID');
return;
}
if (showLoadingIndicator) {
setShowLoadingIndicator(false);
}
const dsUIDs = viewports.get(activeViewportId).displaySetInstanceUIDs || [];
if (!dsUIDs.length) return;
const displayUID = dsUIDs[0];
const ds = displaySetService.getDisplaySetByUID(displayUID);
if (!ds?.instances?.length) return;
const instance = ds.instances[0];
const toolGroup = ToolGroupManager.getToolGroupForViewport(activeViewportId, renderingEngineId);
if (toolGroup) {
const viewportIdsInToolGroup = toolGroup.getViewportIds();
console.log('Viewport IDs in ToolGroup:', viewportIdsInToolGroup);
let isViewportAlreadyAdded = false;
if (Array.isArray(viewportIdsInToolGroup)) {
isViewportAlreadyAdded = viewportIdsInToolGroup.includes(activeViewportId);
}
if (!isViewportAlreadyAdded) {
toolGroup.addViewport(activeViewportId, renderingEngineId);
console.log(
`[ViewerLayout] Added viewport ${activeViewportId} (engine: ${renderingEngineId}) to toolGroup ${toolGroup.id}`
);
}
} else {
console.error(`No toolGroup found for viewport ${activeViewportId}. Cannot add viewport.`);
return;
}
injectMeasurements(currentImageId, displayUID, instance, viewport.element);
viewport.render();
console.log('[ViewerLayout] Measurements and annotations injected successfully');
}, [
activeViewportId,
viewports,
renderingEngineId,
displaySetService,
getCurrentImageId,
injectMeasurements,
showLoadingIndicator,
]);
Mock data is added to the measurement service, the annotation service is also triggered and data appears to have been added, but the relevant changes are not displayed in the svg layer, as a result, no drawing is visible on the image.
I’m building a WebRTC app where two users can join a video call using a signaling server (via WebSocket). I’m facing two main issues:
Auto-joining: As soon as a room is created, it automatically connects — even if the second user has not clicked the “Join Room” button.
No remote connection: When both users are present, the call does not complete — no remote video appears and ontrack does not fire for the second peer.
What I expect:
What I tried:
sendMessage({ type: "join_room" }) inside WebSocket.onopenconnectWebSocket()remoteDescription is setremoteCandidatesQueue and flushing it after SDP negotiationMy current code:
How can I fix the automatic entry and ensure the peer connection succeeds?
Thank you in advance.
I need the call to begin only when the user who creates the room also joins it explicitly. I expected that by removing startCall() from the createRoom button and delaying sendMessage({ type: “join_room” }) until after WebSocket.onopen in the Join button, the caller would not join until ready. I also ensured signaling only begins after setupPeerConnection(), and candidates are queued until remoteDescription is set. Despite this, the caller still joins and the session starts automatically.
i try to use includeHTML function via w3.js ,
cause i want to let main_menu.html as a block for another html include，
the menu problem is dropdown effect is not work in firefox,even sometime not work in chrome,
(actually i also try use sample code in my index.html like
https://www.w3schools.com/howto/howto_html_include.asp sample)
index.html (use sample code)
index_test_01.html (use w3.js)
(my project also put on my github https://github.com/hukluto7750/dev_h_life)
here is my demo video https://youtu.be/eZU11ymrQRY
the nav bar seems not 100% work in every browser ,
even chrome also not 100 % sure any time run work done.
but when i not use includeHTML funciton
(
mean main_menu.html part code merge in one index.html,not seperate in main_nenu.html
,that will run ok , not problem
)
<head>
<script src="https://www.w3schools.com/lib/w3.js"></script>
</head>
<body>
<!-- include 共用的 html -->
<div w3-include-html="main_menu.html"></div>
<script>
w3.includeHTML();
</script>
When typing in Japanese,p ressing Enter often just confirms the conversion but not the submission. How can I achieve this?
I have an input field and upon pressing enter it will submit.
So I have this function
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter' && searchQuery) {
e.preventDefault();
handleAddTag(searchQuery);
}
};
and this input field
<TextInput
placeholder='タグを検索'
value={searchQuery}
onChange={(e) => setSearchQuery(e.currentTarget.value)}
onKeyDown={handleKeyPress}
className='h-9 text-sm w-full box-border'
leftSection={<IconTag size={16} className='text-gray-400' />}
/>
What can I do?
It is a React app.
I was testing JavaScript’s comma operator and got confused by the following behavior:
function A() {
return '1','2' == '1';
}
function B() {
return '1','2' == '2';
}
console.log(A() && B()); // Output: false
const x = ('1','2' == '1' && '1','2' == '2');
console.log(x); // Output: trueI expected both expressions to behave similarly, but:
A() && B() returns false.
The expression assigned to x returns true.
Why does this happen?
I know that the comma operator evaluates both expressions and returns the last one, but I’m not sure how it interacts with the == operator in these cases.
Is it about operator precedence or evaluation order?