Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
When running the terminal commands ng server , I’m getting this :
An unhandled exception occurred: (0 , _schemaUtils.validate) is not a function
i am using visual studio code and trying to learn Angular
*note : my default browser is Microsoft edge not sure if that may effect
I’m trying to run Quokka (enterprise) on a javascript file that has a JSX pragma comment
/** @jsxImportSource @emotion/react */
at the top of the file and I am getting the error:
SyntaxError: ./src/components/LoadingButton.js: importSource cannot be set when runtime is classic.
> 1 | /** @jsxImportSource @emotion/react */
| ^
Here are the docs for the CSS prop that includes the need for the import source comment: https://emotion.sh/docs/css-prop#jsx-pragma
It is worth noting that the app runs fine with this configuration below, however, Quokka’s output keeps showing the error. If I remove the JSX pragma comment and the CSS import, Quokka is able to run a file.
LoadingButtonl.js (example file that I am running Quokka on)
// Libraries
import PropTypes from 'prop-types';
import { css } from '@emotion/react';
import Button from '@mui/material/Button';
import CircularProgress from '@mui/material/CircularProgress';
import Fade from '@mui/material/Fade';
const loadingButtonStyles = css`
align-items: center;
display: flex;
justify-content: center;
position: relative;
.button-progress {
position: absolute;
}
`;
const LoadingButton = ({ isButtonLoading, ...props }) => {
return (
<div css={loadingButtonStyles}>
<Button {...props}>{props.children}</Button>
{isButtonLoading && (
// this acts as a delay for the spinner so it doesn't spin as soon as the user clicks the button
<Fade in style={{ transitionDelay: '800ms' }} unmountOnExit>
<CircularProgress className="button-progress" />
</Fade>
)}
</div>
);
};
LoadingButton.propTypes = {
children: PropTypes.any,
isButtonLoading: PropTypes.bool
};
export default LoadingButton;
.babelrc
"presets": [
"@babel/preset-env",
[
"@babel/preset-react",
{
"runtime": "automatic"
}
]
],
"plugins": [
[
"i18next-extract",
{
"discardOldKeys": true,
"outputPath": "public/locales/{{locale}}.json"
}
],
["@babel/proposal-class-properties", { "loose": true }],
["@babel/proposal-private-methods", { "loose": true }],
["@babel/proposal-private-property-in-object", { "loose": true }],
["@babel/proposal-object-rest-spread", { "loose": true }]
]
}
package.json
"name": "order-customizer-ui",
"version": "0.1.0",
"private": true,
"default": "order-customizer-ui.js",
"dependencies": {
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mui/icons-material": "^5.0.4",
"@mui/lab": "^5.0.0-alpha.51",
"@mui/material": "^5.0.4",
"@mui/styles": "^5.0.1",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"fs": "^0.0.1-security",
"graphql-hooks": "^5.1.3",
"i18next": "^20.2.4",
"i18next-browser-languagedetector": "^6.1.1",
"i18next-http-backend": "^1.2.4",
"js-cookie": "^3.0.1",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.21",
"react": "^17.0.2",
"react-color": "^2.19.3",
"react-dnd": "^14.0.2",
"react-dnd-html5-backend": "^14.0.0",
"react-dom": "^17.0.2",
"react-error-boundary": "^3.1.3",
"react-i18next": "^11.8.15",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"unzipper": "^0.10.11",
"uuid": "^8.3.2",
"web-vitals": "^1.0.1"
},
"devDependencies": {
"@babel/cli": "^7.14.3",
"@babel/core": "^7.14.3",
"@babel/eslint-parser": "^7.14.3",
"@babel/node": "^7.14.2",
"@babel/preset-env": "^7.14.2",
"@babel/preset-react": "^7.13.13",
"@emotion/eslint-plugin": "^11.2.0",
"@parcel/transformer-image": "^2.0.0-rc.0",
"@storybook/addon-actions": "6.3.12",
"@storybook/addon-essentials": "^6.3.12",
"@storybook/addon-links": "6.3.12",
"@storybook/addon-storysource": "6.3.12",
"@storybook/node-logger": "6.3.12",
"@storybook/preset-create-react-app": "3.1.7",
"@storybook/react": "6.3.12",
"babel-plugin-i18next-extract": "^0.8.3",
"eslint": "^7.26.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": "^7.0.0",
"jsdoc": "^3.6.7",
"parcel": "^2.0.0-rc.0",
"prettier": "^2.3.0",
"storybook-addon-designs": "^6.2.0",
"uuid": "^8.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "npm run build:translations && npm run build:parcel${PARCEL_ENV} && npm run build:storybook && scripts/postbuild.sh",
"build:react": "react-scripts build",
"test": "react-scripts test --testPathIgnorePatterns src/__tests__/integrationTestHelpers/*",
"test:no-watch": "react-scripts test --watchAll=false --testPathIgnorePatterns src/__tests__/integrationTestHelpers/*",
"doc": "jsdoc -c jsdoc.json",
"eject": "react-scripts eject",
"build:parcel-dev": "cp src/index.js src/order-customizer-ui.js && parcel build src/order-customizer-ui.js --no-optimize && rm src/order-customizer-ui.js",
"build:parcel": "cp src/index.js src/order-customizer-ui.js && parcel build src/order-customizer-ui.js && rm src/order-customizer-ui.js",
"build:translations": "npm run updateLanguageKeys && npm run updateLokalise && npm run downloadLokalise",
"updateLanguageKeys": "rm -rf public/locales/en.json && npx babel -f .babelrc 'src/**/*.{js,jsx}'",
"mockNonEnglishKeys": "node ./src/util/mockNonEnglishKeys.js",
"updateLokalise": "node ./src/util/updateLokalise.js",
"downloadLokalise": "node ./src/util/downloadLokalise.js",
"storybook": "start-storybook -p 6006 -s public",
"build:storybook": "build-storybook -s public --quiet",
"prepare": "husky install"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": [
"since 2017-06"
],
"quokka": {
"babel": true
}
}
.eslintc
"extends": ["prettier", "eslint:recommended", "plugin:react/recommended"],
"plugins": ["@emotion", "react", "react-hooks"],
"parser": "@babel/eslint-parser",
"env": {
"browser": true,
"commonjs": true,
"jest": true,
"node": true,
"es6": true
},
"parserOptions": {
"ecmaVersion": 2018,
"ecmaFeatures": {
"jsx": true,
"modules": true
}
},
"rules": {
"curly": "warn",
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off",
"no-console": ["warn", { "allow": ["error"] }],
"react/display-name": "off",
"quotes": ["warn", "single", { "avoidEscape": true }],
"no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
"react/no-unescaped-entities": 0,
"react/no-render-return-value": "off",
"no-unused-vars": "warn",
"react/prop-types": "warn"
}
}
Is there a way for a pop-up to appear when all divs got ‘onmouseovered’?
function moveOver(obj)
{
obj.innerHTML = "POP!!!"
obj.style.color = "#ff0000"
obj.style.background = "transparent"
if ()
{
alert("There is no circles left!")
}
}
I basically have 12 circles that pop when you move your mouse over them, is there a way to make a pop-up that says “There is no circles left!” after I hover over the 12th circle?
Pretty new to expo so not sure what this error means am getting this when I run expo in production mode
After I try reloading the app it gets stuck at the new update downloading
Would be highly appreciated if anyone can help! Let me know if any more details needed.
I have a table with fixed x number of top rows and y number of left columns.
Like : https://jsfiddle.net/26m75fge/11/
CSS :
div {
max-width: 40em;
max-height: 20em;
overflow: scroll;
position: relative;
}
table {
position: relative;
border-collapse: collapse;
}
td,
th {
padding: 0.25em;
border: 0.25em solid white;
}
thead tr:nth-child(1) {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0.25em;
background: #000;
color: #FFF;
z-index: 2;
}
thead tr:nth-child(2) {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 2em;
background: #000;
color: #FFF;
z-index: 2;
}
thead th:first-child {
left: 0;
z-index: 1;
}
tbody th {
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
background: #FFF;
border-right: 1px solid #CCC;
}
HTML :
<table>
<thead>
<tr>
<th></th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
....
</tr>
<tr>
<th></th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
....
</tr>
</thead>
<tbody>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
.....
</tr>
</tbody>
</table>
</div>
However, when I scroll my other cells I can see the “Hidden” rows in the background/ border-spacing of the table. (See: cells in border spacing)
Is there a way using CSS/JS to hide these make the border so that these cells dont show up once they are scrolled?
How will the view code part based on Class-based view will look like if i have for example this 2 models
Class Student with two columns name and last_name
Class City name and street
The form will be in a html file, in this case it will have the 4 inputs,
I have a map of Africa which I loaded using D3 which features several columns including a column named ADMIN which features each country’s name. I’m trying to highlight the country on my map that is selected in my dropdown. For example if I select Algeria in my drop down, Algeria will highlight on my map. The map itself loads fine as well as the dropdown. I’m just having trouble coordinating the interaction between the dropdown function and the highlight function so that the selected country actually highlights.
//begin script when window loads
window.onload = setMap();
var attrArray = ["Algeria","Angola","Benin"];
var expressed = attrArray[0];
//set up map
function setMap(){
//map frame dimensions
var width = 1200,
height = 1000;
//create new svg container for the map
var map = d3.select("body")
.append("svg")
.attr("class", "map")
.attr("width", width)
.attr("height", height);
//create Albers equal area conic projection centered on France
var projection = d3.geoOrthographic()
.scale(600)
.translate([width / 2, height / 2.7])
.clipAngle(85)
.precision(.1);
var path = d3.geoPath()
.projection(projection)
var graticule = d3.geoGraticule()
.step([5, 5]); //place graticule lines every 5 degrees of longitude and latitude
//create graticule background
var gratBackground = map.append("path")
.datum(graticule.outline()) //bind graticule background
.attr("class", "gratBackground") //assign class for styling
.attr("d", path) //project graticule
var gratLines = map.selectAll(".gratLines")
.data(graticule.lines()) //bind graticule lines to each element to be created
.enter() //create an element for each datum
.append("path") //append each element to the svg as a path element
.attr("class", "gratLines") //assign class for styling
.attr("d", path); //project graticule lines
//use queue to parallelize asynchronous data loading
d3.queue()
.defer(d3.csv, "data/AfricaCountries.csv") //load attributes from csv
.defer(d3.json, "data/world.topojson") //load background spatial data
.defer(d3.json, "data/Africa.topojson")
.await(callback);
function callback(error, csvData, world, africa){
//translate europe TopoJSON
var basemapCountries = topojson.feature(world, world.objects.ne_10m_admin_0_countries),
africaCountries= topojson.feature(africa, africa.objects.ne_10m_admin_0_countries).features;
//select graticule elements that will be created
//add Europe countries to map
var countries = map.append("path")
.datum(basemapCountries)
.attr("class", "countries")
.attr("d", path);
//add Africa countries to map
var regions = map.selectAll(".regions")
.data(africaCountries)
.enter()
.append("path")
.attr("class", function(d){
return "regions " + d.properties.ADMIN;
})
.attr("d", path);
createDropdown(csvData);
};
function createDropdown(csvData){
//add select element
var dropdown = d3.select("body")
.append("select")
.attr("class", "dropdown")
.on("change", function(){
highlight(d.properties);
});
//add initial option
var titleOption = dropdown.append("option")
.attr("class", "titleOption")
.attr("disabled", "true")
.text("Select Country");
//add attribute name options
var attrOptions = dropdown.selectAll("attrOptions")
.data(attrArray)
.enter()
.append("option")
.attr("value", function(d){ return d })
.text(function(d){ return d });
};
//function to highlight enumeration units and bars
function highlight(props){
//change stroke
var selected = d3.selectAll("." + props.ADMIN)
.style("stroke", "blue")
.style("stroke-width", "2");
};
};
I have added folders as assets to pkg for creating exe file.
The jsonfiles folder contains json files and I want to change the values of these json files and when changed should reflect in frontend.
The jsonfiles folder always displays the value which was present during compilation, I want to make these assets dynamic(i.e,json file changes should reflect on frontend)
"pkg": {
"assets": [ "public/**/*", "jsonfiles/**/*" ],
"targets": ["node14-win-x64" ]
},I’m creating a swiper slider using the SwiperJS library. On Desktop, I’d like to show custom pagination and on mobile, I’d like to set the pagination type to “bullets”. The issue is that the pagination type doesn’t change when I resize my browser until I manually refresh the page. Any help would be greatly appreciated. Here’s the code:
HTML:
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p>slide 1</p>
</div>
<div class="swiper-slide">
<p>slide 2</p>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
JS:
let mySlider = new Swiper('.swiper', {
slidesPerView: 1.1,
spaceBetween: 10,
observer: true,
observeParents: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
type: 'bullets'
},
breakpoints: {
768: {
pagination: {
type: 'custom',
renderCustom: function (swiper, current, total) {
return current + ' - ' + total
}
}
}
},
on: {
breakpoint: function (swiper) {
swiper.update()
// Also tried swiper.destroy(), swiper.pagination.init() and swiper.init()
}
},
})
this is what I did. The following code creates a php arrray with component as id ajnd recipes as values. An example is at component “vodka”(string) we have recipes(“”recipe1″,”recipe2″”recipe3″”) the recipes are also in a format of a string. The array is $menuThings
I have been searching through the web, but could not find the answer to the question, which seems to have a trivial solution.
I have three popups on my page, which user can open and the functionality to open and close them looks usual:
![[1]: https://i.stack.imgur.com/PJrU1.png](https://i.stack.imgur.com/QMBA3.png){kind=link}
const popupPicture = document.querySelector(".popup_pic");
const popupProfile = document.querySelector(".popup_profile");
const profileName = document.querySelector(".profile__name");
function openPopup(popup) {
popup.classList.add("popup_opened");
}
function closePopup(popup) {
popup.classList.remove("popup_opened");
}
and I pass one of the popup variables to closePopup or to openPopup as a variable.
For instance
closePopupButton.addEventListener("click", () => closePopup(popupProfile));
closePopupImageButton.addEventListener("click", () => closePopup(popupImage));
closePopupPictureButton.addEventListener("click", () => closePopup(popupPicture));
The same with opening popups. I need now closing functionality by Escape button. I understand that it is easy to achieve if there is just one popup by the following code:
document.addEventListener("keydown", function (evt) {
if (evt.key === "Escape") {
// and close popup here
}
});
But there are three popups in my case and I do not know, which I should close. Of course I can do it by this ugly way:
document.addEventListener("keydown", function (evt) {
if (evt.key === "Escape") {
closePopup(popupProfile);
closePopup(popupImage);
closePopup(popupPicture);
}
});
And it solves my case, but I wonder if there is more elegant solution, which does not require calling two functions that should not be called.
Hopefully I stated my issue clear.
Thank you very much in advance!
I am creating an web app with ReactJS & there I have to use Google Map to show some data from NASA API
no billing free API Key on Google Developer.env on my React project & use with `process.env.REACT_APP_API_KEYgoogle-map-reactJavaScript Map API*localhost:3000
http://localhost:3000
cached & cookies & restart server many times but it show meThis page can’t load Google Maps correctly. Do you own this website? For development purposes only
import GoogleMapReact from 'google-map-react'
import '../style/index.css'
const Map = ({ center, zoom }) => {
return (
<div className='map'>
<GoogleMapReact
bootstrapURLKeys={{
key: process.env.REACT_APP_API_KEY
}}
defaultCenter={center}
defaultZoom={zoom}
>
</GoogleMapReact>
</div>
)
}
Map.defaultProps = {
center: {
lat: 42.3265,
lng: -122.8756
},
zoom: 3
}
export default Map
I’m developing a small javascript browser script that retrieve files from S3.
I can display the images without any issue after requesting a SignedUrl to S3. I also updated the CORS policy on S3:
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD",
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
However when I want to use the same URL to extract the EXIF data (using ExifReader), I get an error message about CORS policy:
Access to fetch at '*SIGNEDURL*' from origin 'null' has been blocked
by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
If an opaque response serves your needs, set the request's mode to
'no-cors' to fetch the resource with CORS disabled.
I don’t understand the difference in the behaviour of both. Can someone help?
Thank you
I am trying to make it so that a “Submit” button is disabled when submitting and forwarding data from a form. This is to prevent the user from create multiple copies of the form when rapidly clicking the button when the initial data that was inputted is being saved.
One approach I tried was adding a debouncer to the JavaScript function that handles the submit button operations. However if the user continues to click the button after 5 seconds, the duplicate is still created.
I think a better approach would be to disable the button while the data is being submitted and give an indication to the user that the data is in the state of being saved, and after completion, reenable the button.
Here is the javascript code for context:
setupFormIO: function(submissionFunction) {
var $this = this;
var submitFunc = submissionFunction;
var labelText = "Submit";
if ($this.projectData && !this.readonly) {
labelText = "Save";
}
var submits = FormioUtils.searchComponents($this.template.components,
{
"type": "button"
}
);
if (submits) {
_.each(submits, function (component) {
component.label = labelText;
//
var timer;
if (timer) {
clearTimeout(timer);
}
//
if ($this.readonly) {
$("#" + component.id + " > button").on("click", function(evt) {
evt.stopPropagation();
location.assign("/project/ProjectHome.aspx");
timer = setTimeout(process, 5000); //
});
}
});
}
I’ve got a question regarding Slatejs.
I’m trying to implement an option to set a text to a type “url” and display this type as hyperlink.
This works fine, but actually the complete line is being marked as type “url” and not only the selected text. I want the selected text marked as type “url” and to be added inline.
This is my current code to mark the selected text as type “url”
function onFormatTextUrlButtonClick(editor) {
const isActive = isTypeActive(editor,'url')
Transforms.setNodes(
editor,
{
type: isActive ? 'paragraph' : 'url',
url: isActive ? undefined : Editor.string(editor, editor.selection)
},
{
match: n => Editor.isBlock(editor, n)
}
);
}
I’m sure it is no big issue, but I can’t figure it out actually. Many thanks for any hint in advance!