Freelance Projects, Design and Programming Tutorials
I am learning React using JS, and while executing npm run dev, I noticed in my console, the following:
the screenshot of the problem with Chinese Characters
I noticed that I could notice same lines in every website I look into console. Therefore I was wondering what is that and why it is in Chinese (why not localized?)
Humbly thankful for any explanations.
I am learning React using JS, and while executing npm run dev, I noticed in my console, the following:
the screenshot of the problem with Chinese Characters
I noticed that I could notice same lines in every website I look into console. Therefore I was wondering what is that and why it is in Chinese (why not localized?)
Humbly thankful for any explanations.
is it bad not to use hooks in Reacts if I want to manipulate the DOM
like changing the style of an element
P.S. I am currently learning Reacts so if there is a better way to handle elements, please advise
Example:
window.onscroll = () => {
if (window.scrollY >= 400) {
document.querySelector("header").style.backgroundColor = "#001F54";
document.querySelector("header").style.position = "fixed";
document.querySelector("header").style.color = "#fff";
document.querySelector(".burger-menu").style.fill = "#fff";
document.querySelector(".arrow-up").style.display = "block";
} else {
document.querySelector("header").style.backgroundColor = "transparent";
document.querySelector("header").style.position = "absolute";
document.querySelector(".arrow-up").style.display = "none";
}
};
Consider this repro script.
#!/bin/bash -x
rm -rf my-vanilla-lib
npm create vite@latest my-vanilla-lib -- --template vanilla
cd my-vanilla-lib
npm i
cat <<EOL > vite.config.js
export default {
build: {
minify: 'terser',
terserOptions: {
compress: {
passes: 2,
},
mangle: true,
format: {
beautify: false,
comments: false,
},
},
lib: {
entry: 'src/counter.js',
name: 'MyLibrary',
fileName: 'my-library',
formats: ['es'],
},
}
};
EOL
npm run build
cat dist/my-library.js
The output looks like this, with whitespace in my JS totally unminified.
function setupCounter(element) {
let counter = 0;
const setCounter = (count) => {
counter = count;
element.textContent = `count is ${counter}`;
};
element.addEventListener("click", () => setCounter(counter + 1));
setCounter(0);
console.log("Counter initialized");
}
export {
setupCounter
};
In fact, it’s a few characters larger than the original counter.js file that Vite generates as part of the template.
Why is this happening? How do I make terser actually do something in my Vite build?
I am working on a personal reactjs project and have created two projects using Module Federation.
In the main project I added some CSS which is affecting the remote project. After Googling I found that a better way to handle this is by using a Shadow DOM which isolates the remote component.
However while implementing the Shadow DOM the entire remote project disappeared.
const App = (() => {
const divRef = useRef(null);
useEffect(() => {
if (divRef.current && !divRef.current.shadowRoot) {
const shadowRoot = divRef.current.attachShadow({ mode : "open" })
}
}, [])
<div className='app' ref={divRef}></div>
const App = (() => {
const divRef = useRef(null);
useEffect(() => {
if(divRef.current && !divRef.current.shadowRoot){
const shadowRoot = divRef.current.attachShadow({mode : "open"})
}
},[])
<div> className='app' ref={divRef}>
</div>
I am working on a personal project and have created two projects using Module Federation. In the main project, I added some CSS, which is affecting the remote project. After Googling, I found that a better way to handle this is by using Shadow DOM, which isolates the remote component. However, while implementing the Shadow DOM, the entire remote project disappeared.
Am using this code to embed my outlook calendar on a html page via an iframe. when I access the app, I can only see the calendar but all the events are not showed. my email is eg. [email protected].
I set permission to: can view all details
Please what could be the issue. Thanks
<!DOCTYPE html>
<html>
<head>
<title>My Page with Outlook Calendar</title>
<style>
/* Optional: Style the iframe */
iframe {
border: 1px solid #ccc; /* Example border */
}
</style>
</head>
<body>
<h1>Our Event Calendar</h1>
<p>Here's our public calendar from Outlook:</p>
<iframe
src="https://outlook.live.com/owa/calendar/00000000-0000-0000-0000-000000000000/xxxxxxxxxxxxxxxxxxxxxxx/index.html"
style="border: 0"
width="1200"
height="600"
frameborder="0"
scrolling="yes"
title="Public Outlook Calendar">
</iframe>
<p>More content on the page...</p>
</body>
</html>
Creating a mini app to demonstrate the problem I’m having with React & Typescript
Here is a simple toggle component
import { MouseEvent, useState } from "react";
interface ToggleParams {
label?: string;
value?: boolean;
disabled?: boolean;
onToggleClick?: (
event: MouseEvent<HTMLButtonElement>,
value: boolean
) => void;
}
const Toggle = ({
label = "",
value = false,
disabled = false,
onToggleClick = () => {},
}: ToggleParams) => {
const [enabled, setEnabled] = useState(value);
const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
if (disabled) return;
console.log("handleClick > enabled", enabled);
const newValue = !enabled;
console.log("handleClick > newValue", newValue);
setEnabled(value);
onToggleClick(event, newValue);
};
return (
<button
onClick={handleClick}
disabled={disabled}
className="focus:outline-none"
>
{`${enabled ? "true" : "false"} ${label}`}
</button>
);
};
export default Toggle;
here is the code that tests this component
import { useState } from "react";
import Toggle from "./Toggle";
export default function App() {
const [toggleAll, setToggleAll] = useState(false);
const [toggleItem, setToggleItem] = useState(false);
const [toggleDisabled, setToggleDisabled] = useState(false);
console.log("Toggle state", toggleAll, toggleItem, toggleDisabled);
const onToggleAllClick = (event: any, value: boolean) => {
setToggleAll(value);
setToggleItem(value);
setToggleDisabled(value);
};
const onToggleItemClick = (event: any, value: boolean) => {
setToggleItem(value);
if (!value) {
setToggleAll(value);
setToggleDisabled(value);
}
};
return (
<div className="App">
<div>
<Toggle
value={toggleAll}
label={"Toggle All"}
onToggleClick={onToggleAllClick}
/>
</div>
<div>
<Toggle
value={toggleItem}
label={"Toggle Item"}
onToggleClick={onToggleItemClick}
/>
</div>
<div>
<Toggle
value={toggleDisabled}
label={"Toggle Disabled"}
disabled={true}
/>
</div>
</div>
);
}
The toggle should change state when I click them, however they don’t on the 1st click
When I click the Item toggle, the console correctly shows
handleClick > enabled false
handleClick > newValue true
Toggle state false true false
indicating that the code works, however the display shows
false Toggle All
false Toggle Item
false Toggle Disabled
which means the toggle component itself didn’t change
clicking it again, then changes the display correctly to this
false Toggle All
true Toggle Item
false Toggle Disabled
the console output doesn’t change
I refresh the page to start again
When I click the All toggle, all the items should be true, and the console correctly shows
handleClick > enabled false
handleClick > newValue true
Toggle state true true true
however the display incorrectly shows
false Toggle All
false Toggle Item
false Toggle Disabled
all these should have changed from false to true
when I click All toggle again, the console is the same, but the display changes to
true Toggle All
false Toggle Item
false Toggle Disabled
toggle All display changed correctly this time, but the others should have changed as well
Bug: toggles need to be clicked twice before they change their own value on the display
now click item toggle (once), the item toggle now displays true and only needed 1 click
now click item toggle again (twice) so that it shows false
the display changes to
handleClick > enabled true
handleClick > newValue false
Toggle state false false false
the code correctly changed all the values to false here in the console according to onToggleItemClick, however the display still incorrectly shows
true Toggle All
false Toggle Item
false Toggle Disabled
Bug: toggles need to be change their value when the underlying value from the code changes
Bug: the disabled toggle should also change its value when the underlying value from the code changes
what do I need to do to correctly show get the toggle to display the correct value?
Here is a sandbox https://codesandbox.io/p/sandbox/vibrant-jackson-44g6xt
I have a requirement to download a pdf report (created using html table tag) from an html page by clicking of a button.
I do not want to use any 3rd party java script code for this. Is there any way to get this done using plan html and javascript
Any help on this very much appreciated.
Thanks
Shaji
I have a javascript function in snowflake:
returns variant
language javascript
as $$
return Object.fromEntries(ARR.map(_ => ([_[KEY_FIELD_NAME], _[VALUE_FIELD_NAME]])))
$$;
it takes array of dict and returns dict.
Example input:
[ { "key": "country_code", "value": "ZA" } ]
output:
{'country_code': 'ZA'}
I am calling it as :
select array_to_dict_test(params)
Earlier params was of type variant and the function was working fine, now the type has been changed to
ARRAY(OBJECT(key VARCHAR(16777216), value VARCHAR(16777216)))
and it is throwing me exception Invalid argument types for function ‘ARRAY_TO_DICT’: (ARRAY(OBJECT(key VARCHAR(16777216), value VARCHAR(16777216))), VARCHAR(3), VARCHAR(5))
I have some code which which uses postMessage to display a message in an embedded iFrame. I am wondering if it is possible for the message to be displayed only for a set duration, or whether it can be ‘cleared’ (disappear) after it has been posted.
I’ve been trying to recreate this button hover effect but I just can’t seem to get it working, does anyone know how to make this?
https://web.archive.org/web/20250127215312/https://yummygum.com/#expand – when you hover over start a project or menu in the header, it looks like it’s creating a circle that scales then scales back to 0 on the position of the mouseleave.
I feel like the timing of scale is uneven too, that it starts fast growing and is slower shrinking.
I just can’t seem to get it right.
Has anyone made something like this before? I’d appreciate any help in making this as it’s a really cool effect.
Kind regards
I have YAML 11ty front matter that looks like this:
---
date: 2024-07-16
eleventyComputed:
title: "Petra, ({{ date | fullDateToYear }})"
tags:
- lightboxItem
- gridItem
portCategories: illustration
portTags: giftArt
---
I use 11ty’s built in tags frontmatter key for top-level content-types of this site I want to be displayed in arrays together. I feel like most 11ty users use the built in tags key for their blog tags. But, this is more of a case where I have multiple types of site content (lightbox items, blog posts, etc.) and I want those to have the top-level tags key, and for each type of site content to have its own set of categories and tags in separate frontmatter keys. (portCategories, portTags. projectCategories, projectTags. blogCategories, blogTags. Etc.)
When it comes to putting this setup into the Eleventy configuration file is where I get stuck. The Eleventy docs provide the example:
// Filter using `Array.filter`
eleventyConfig.addCollection("keyMustExistInData", function (collectionsApi) {
return collectionsApi.getAll().filter(function (item) {
// Side-step tags and do your own filtering
return "myCustomDataKey" in item.data;
});
});
I infer/understand from the rest of the 11ty Collections API docs page keyMustExistInData is both the name of what this collection will be, and the devs telling me, that the key this custom collection will be based on, must be in the YAML frontmatter data of the items that’ll go into it. In the case of my portfolio categories, portCategories?
Next, the example provides me with a function with which to do my filtering. From what I’m looking at elsewhere on filter(), the return part of a filter is the part where you choose what makes it into the filter. Instead of "myCustomDataKey", do I put in "portCategories: illustration" to get all the portfolio items I’ve given the category of illustration to?
How can I make it so I can swap which portfolio category I’m trying to display?
Tl;dr a walkthrough of the 11ty .addCollection collectionsApi.getAll().filter() filter example, and guidance on how to make custom tags and categories outside of Eleventy’s built in tags front matter key would be extremely helpful.
In windows, the value help dialog is not working properly with long uppercase item values. Below are the issues currently facing.
Question:
I’m using Vega-Lite to visualize a set of sessions with a vertical Y-axis representing asset values and horizontal X-axis for time (arrival=plug in and departure). I have implemented a legend-based selection, allowing users to click on an asset in the legend to filter the chart.
Expected Behavior:
Current Behavior:
Sample Vega-Lite Spec:
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json",
"config": {
"view": {
"height": 300,
"width": 400
}
},
"datasets": {
"data-sessions": [
{
"asset": "1",
"sensor_id": "100",
"plug in": "2023-12-04T10:35:00",
"departure": "2023-12-04T12:00:00"
},
{
"asset": "2",
"sensor_id": "101",
"plug in": "2023-12-04T08:45:00",
"departure": "2023-12-04T10:15:00"
},
{
"asset": "3",
"sensor_id": "102",
"plug in": "2023-12-04T09:30:00",
"departure": "2023-12-04T12:10:00"
},
{
"asset": "1",
"sensor_id": "100",
"plug in": "2023-12-04T07:35:00",
"departure": "2023-12-04T08:33:00"
},
{
"asset": "2",
"sensor_id": "101",
"plug in": "2023-12-04T10:45:00",
"departure": "2023-12-04T12:15:00"
},
{
"asset": "3",
"sensor_id": "102",
"plug in": "2023-12-04T08:50:00",
"departure": "2023-12-04T10:10:00"
},
]
},
"layer": [
{
"selection": {
"air" : {"type": "multi", "encodings": ["color"], "fields": ["asset"], "bind": "legend"}
},
"data": {
"name": "data-sessions"
},
"encoding": {
"x": {
"field": "plug in",
"type": "temporal",
"title": "Plug-in Time"
},
"x2": {
"field": "departure",
"type": "temporal",
"title": "Departure Time"
},
"y": {
"field": "asset",
"type": "nominal",
"title": "Asset",
"condition":{
"selection": {
"field": "air"
}
}
},
"color": {
"field": "asset",
"type": "nominal",
"legend": {
"title": "Assets"
}
},
"opacity": {
"condition": {
"selection": "air",
"field": "asset",
"type": "nominal",
"legend": null,
},
"value": 0
},
"tooltip": [
{"field": "sensor_id", "type": "ordinal", "title": "Sensor ID"},
{"field": "plug in", "type": "temporal", "title": "Plug-in Time"},
{"field": "departure", "type": "temporal", "title": "Departure Time"}
]
},
"mark": {
"type": "rule",
"strokeWidth": 3
}
}
]
}
What I’ve Tried:
y axis, but it only changes the visibility, not the axis values.When I select any asset from legends, I see all the asset ids on the Y-axis, see the example here:
Question:
How can I rearrange the Y-axis so that only the selected asset appears, and it is centered in the Y-axis when filtered using the legend?
Any help would be appreciated.