Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I read that i need host_permissions or scripting if i “inject programmatically” the content_scritps but the examples show that they use background.js code to inject the script, i don’t use that, i don’t even have a background.js. My extension only has a few functions and events. Yes, the events and functions change the html of page.
In dev mode the extension works without host_permisions, but when I send it to revision, they ask for host_permisions justification anyway
I want to use the adminLte control panel, but I noticed that the size is too big
Is there a way to reduce this huge size
AdminLte site -> https://adminlte.io
I thought there were large images or videos, but most of them are css and js files
And when I deleted some css or js files, this spoiled the design of the dashboard
I would like to know the length of an array read inside a function in NodeRed using Javascript but it is not displaying/ returning any value. can someone help me here.
Here is the code inside the function block in Node-Red
let j = 0;
let array1 = { payload: msg.payload };
j = array1.length;
return j;
I do not see any return value for J. any help ?
I was expecting a value of 50 for J to be displayed on Nodered debug console.
I’m building a custom menu for my website. What I want to do here is add an active class to highlight the menu item when it matches the current page link.
Example: if the user is on the page https://mywebsite.it/explore-docs then .link_expdocs gains the active class.
I managed to do this with some Javascript, but I don’t like what came out. I’ve iterated the code many times and I don’t think it’s a good practice.
Is there a better and shorter practice so that I don’t repeat the same code every time and so that I don’t have to explicitly write all the classes and slugs in indexOf ?
Sorry, but I’m new and managed to do this by looking around on stackoverflow.
code that I tried to shorten (not work):
I tried to shorten the code like this, but the active class is always added to .link_home even when I’m on other pages, and the same happens with link_dashboard when the /account slug is present in the url
document.addEventListener("DOMContentLoaded", function() {
const links = document.querySelectorAll(".item_menu a");
links.forEach(link => {
if (window.location.href.indexOf(link.getAttribute("href")) > -1) {
link.classList.add('active');
}
});
});
Original code (work):
<!-- Vertical Navigation -->
<div class="vertical_nav">
<!-- User Menu -->
<div class="user_menu">
<div class="wrap_user_navigation">
<div class="user_navigation">
<div class="item_menu">
<a class="link_dashboard" href="https://mywebsite.it/account">Dashboard</a>
</div>
<div class="item_menu">
<a class="link_ordini" href="https://mywebsite.it/orders">I miei ordini</a>
</div>
<div class="item_menu">
<a class="link_downloads" href="https://mywebsite.it/downloads">Libreria Downloads</a>
</div>
<div class="item_menu">
<a class="link_settings" href="https://mywebsite.it/settings">Impostazioni</a>
</div>
</div>
</div>
</div>
<div class="main_menu">
<div class="item_menu">
<a class="link_home" href="https://mywebsite.it/">Home</a>
</div>
<div class="item_menu">
<a class="link_expdocs" href="https://mywebsite.it/explore-docs">Explore Docs</a>
</div>
<div class="item_menu">
<a class="link_coaching" href="https://mywebsite.it/services">Online Coaching</a>
</div>
<div class="item_menu">
<a class="link_calculator" href="https://mywebsite.it/math">Fitness Calculator</a>
</div>
</div>
<!-- Docs Menu -->
<div class="doc_menu">
<div class="item_menu">
<a class="link_anadocs" href="https://mywebsite.it/docs-anatomy">Docs Anatomy</a>
</div>
<div class="item_menu">
<a class="link_evidence" href="https://mywebsite.it/evidence-based">Evidence Based</a>
</div>
<div class="item_menu">
<a class="link_strengthvalue" href="https://mywebsite.it/strength-value">Strength Value</a>
</div>
<div class="item_menu">
<a class="link_mission" href="https://mywebsite.it/mission">Mission</a>
</div>
</div>
<!-- Footer Items -->
<div class="footer_menu">
<div class="item_menu">
<a class="link_support" href="https://mywebsite.it/supporto">Supporto</a>
</div>
<div class="item_menu">
<a class="link_logout" href="https://mywebsite.it/wp-login.php?action=logout">Logout</a>
</div>
</div>
</div>
document.addEventListener("DOMContentLoaded", function() {
// Add - Remove class active for user_menu
if(window.location.href.indexOf("account") > -1) {
document.querySelector(".link_dashboard").classList.add('active');
}
if(window.location.href.indexOf("orders") > -1) {
document.querySelector(".link_ordini").classList.add('active');
document.querySelector(".link_dashboard").classList.remove('active');
}
if(window.location.href.indexOf("downloads") > -1) {
document.querySelector(".link_downloads").classList.add('active');
document.querySelector(".link_dashboard").classList.remove('active');
}
if(window.location.href.indexOf("settings") > -1) {
document.querySelector(".link_settings").classList.add('active');
document.querySelector(".link_dashboard").classList.remove('active');
}
// Add - Remove class active for main_menu
if(window.location.href === "https://mywebsite.it/") {
document.querySelector(".link_home").classList.add('active');
}
if(window.location.href.indexOf("explore-docs") > -1) {
document.querySelector(".link_expdocs").classList.add('active');
}
if(window.location.href.indexOf("services") > -1) {
document.querySelector(".link_coaching").classList.add('active');
}
if(window.location.href.indexOf("math") > -1) {
document.querySelector(".link_calculator").classList.add('active');
}
// Add - Remove class active for doc_menu
if(window.location.href.indexOf("docs-anatomy") > -1) {
document.querySelector(".link_anadocs").classList.add('active');
}
if(window.location.href.indexOf("evidence-based") > -1) {
document.querySelector(".link_evidence").classList.add('active');
}
if(window.location.href.indexOf("strength-value") > -1) {
document.querySelector(".link_strengthvalue").classList.add('active');
}
if(window.location.href.indexOf("mission") > -1) {
document.querySelector(".link_mission").classList.add('active');
}
});
How can I use (insert) a (just) fetched access token in Javascript to get access to an endpoint (access ID is to be added to the endpoint URI – oauth2 – Strava API).
I tried to add the fetched access token as const and var to the URI of the endpoint, but I do not get any data returned. All is working if I manually insert the actual access_code in the URI (FETCHED_ACCESS_TOKEN), but how do I pick it up to be used automatically in the endpoint URI?
JAVASCRIPT CODE I USED:
let _data = {
client_id:"11111",
client_secret:"AAAAAAAAAAAAAAAAAAAAAAAAAAAA",
code:"exchange_code",
grant_type:"authorization_code"
}
fetch("https://www.strava.com/api/v3/oauth/token", {
method: "POST",
body: JSON.stringify(_data),
headers: {"Content-type": "application/json; charset=UTF-8"}
})
.then(response => response.json())
.then(json => console.log(json))
.then(json => {data = json})
.then(res => getActivities(res))
.catch(err => console.log(err));
const auth_link = "https://www.strava.com/oauth/token"
async function getActivities(res) {
const activities_link = "https://www.strava.com/api/v3/segments/11111111?access_token=FETCHED_ACCESS_TOKEN"
await fetch(activities_link)
.then(res => res.json())
.then(json => console.log(json));
}
I have a scenario where I need to download a file using Playwright.
When I download, I get the file in a zip format. How can I validate the file format of the actual file that is zipped. While validating manually, I can extract it and see the file format.
How can I do it with Playwright automation? (I’m working with Javascript)
After updating dependencies I got problem with @craco (https://www.npmjs.com/package/@craco/craco) / react-scripts. Resulting in the error:
(node:14573) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE]
DeprecationWarning: ‘onAfterSetupMiddleware’ option is deprecated.
Please use the ‘setupMiddlewares’ option. (Usenode --trace-deprecation ...to show where the warning was created) (node:14573) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE]
DeprecationWarning: ‘onBeforeSetupMiddleware’ option is deprecated.
Please use the ‘setupMiddlewares’ option.
Related issue: Cant load a react app after starting server
This seems to be a issue with the proxy settings in the node_modules/react-scripts/config/webpackDevServer.config.js
Tried resolving this issue by overriding my craco config.
my current config looks like this:
const CracoLessPlugin = require('craco-less');
const path = require('path');
const { EnvironmentPlugin } = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const evalSourceMap = require('react-dev-utils/evalSourceMapMiddleware');
const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
const noopServiceWorker = require('react-dev-utils/noopServiceWorkerMiddleware');
const fs = require('fs-extra');
module.exports = {
webpack: {
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'disabled',
openAnalyzer: false,
}),
new EnvironmentPlugin({
GIT_COMMIT_HASH: 'local-dev',
}),
],
alias: {
'@': path.resolve(__dirname, 'src/'),
},
},
devServer: (devServerConfig, { env, paths }) => {
devServerConfig = {
onBeforeSetupMiddleware: undefined,
onAfterSetupMiddleware: undefined,
setupMiddlewares: (middlewares, devServer) => {
if (!devServer) {
throw new Error('webpack-dev-server is not defined');
}
if (fs.existsSync(paths.proxySetup)) {
require(paths.proxySetup)(devServer.app);
}
middlewares.push(
evalSourceMap(devServer),
redirectServedPath(paths.publicUrlOrPath),
noopServiceWorker(paths.publicUrlOrPath)
);
return middlewares;
},
};
return devServerConfig;
},
plugins: [{ plugin: CracoLessPlugin }],
eslint: {
enable: true,
mode: 'extends',
configure: {
extends: 'react-app',
rules: {
'react/jsx-pascal-case': 'off',
},
},
},
jest: {
configure: {
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
},
},
},
};
additional information:
“@craco/craco”: “^7.1.0”
“react-scripts”: “^5.0.1”
“react”: “^18.2.0”,
Any got any clue why this override isn’t working?
Thx 🙂
I’m new to mongodb. As I understand it, due to concurrence, I can’t read and write data to the collection at the same time. Because if I write data in one function and read it in another function, then it constantly reads the values that were written for the first time and can no longer update this data at all. However, if I comment on reading the data, then it writes everything as it should.
How can I get rid of it? I am writing a telegram bot in JS using TeleBot API and deploying it in Vercel.
In < Next 13 (or with appDir disabled), you could do:
const MyComponent = () => {
const router = useRouter();
const toggleStatic = () => {
if (router.query.static) {
router.push(router.pathname, router.pathname, { shallow: true });
} else {
router.push(router.pathname, router.pathname + "?static", { shallow: true });
}
}
return <>
// ...
</>
});
This would perform a shallow router update that would change the location, but not push it to history or trigger a page load.
Now, with appDir enabled, you need to import functions from next/navigation instead. But the docs don’t say anything about shallow router pushing using the new router?
All I can do is this:
const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();
const toggleStatic = () => {
if (searchParams.get("static")) {
router.push(pathname);
} else {
router.push(pathname + "?static");
}
};
But that does a full page reload. Is there a way to replicate the shallow router functionality using Next 13’s appDir?
first post here.
I’m existed to join and be a part of this community.
I’m finishing now the final project of Harvard CS50x project.
I’ve created a website which uses Yelp Fusion API for getting a Itineraries in Colorado.
In Itineraries info page, when I pick CO city and itinerary category. Only food results displayed in the map. Even though I pick something else.
I’ll attach here the git repo, app.py and related html pages.
Related part of app.py:
# Web page that ask from user to pick a Colorado city and type of itinerary that he looking for
@app.route('/itinerary', methods=["GET", "POST"])
def itinerary():
# Get a list of all zip codes in Colorado
co_zipcodes = zipcodes.filter_by(state='CO')
# Extract the list of city names from the zip codes
cities = [zipcode['city'] for zipcode in co_zipcodes]
# Remove duplicates and sort the list
cities = sorted(set(cities))
# Creating a list of all itinerary types
itinerary_aliases = {
"Accommodations": "hotels",
"Adult": "adult",
"Amusements": "amusementparks, aquariums, arcades",
"Architecture": "landmarks, monuments",
"Cultural": "culturalcenter",
"Historic": "museums",
"Industrial facilities": "factories",
"Natural": "parks",
"Religion": "religiousorgs",
"Sport": "active",
"Banks": "banks",
"Food": "food",
"Shops": "shopping",
"Transport": "transport"
}
if request.method == 'POST':
# Get the name of the city from the user input
city = request.form.get('city')
city = city + " Colorado"
# Get the type of itinerary
category_alias = request.form.get('itinerary_type')
url = f"https://api.yelp.com/v3/businesses/search?location={city}&radius=30000&categories={category_alias}&sort_by=best_match&limit=20"
headers = {
"accept": "application/json",
"Authorization": "Bearer pUf2JzXR1iDFAvIGBsmPvQAyVdXBQCodSnID9Z5sT59BcRYkkWvg_VoXZsfeo0Nj8odHJ1lJYcr6h0AwURBOVqRI-SDMTY5iks0_CRpHznpFz-MXz_Xg3PmHpOQ2ZHYx"
}
response = requests.get(url, headers=headers)
data = response.json()
return render_template('itinerary_r.html', data=data, city=city)
else:
return render_template('itinerary.html', cities=cities, itinerary_aliases=itinerary_aliases)
itinerary.html:
{% extends "layout.html" %}
{% block title %}
Search for city itineraries
{% endblock %}
{% block main %}
<div class="instructions">
<h3><p>Please select one of the Colorado's cities and then select a type of itinerary that you are looking for.</p></h3>
</div>
<form action="/itinerary" method="post">
<div class="mb-3">
<select name="city" id="city">
<option value="" disabled selected>Select a city</option>
{% for city in cities %}
<option value="{{ city }}">{{ city }}</option>
{% endfor %}
</select>
</div>
<div class="mb-3">
<select name="itinerary_type" id="itinerary_type">
<option value="" disabled selected>Select an itinerary</option>
{% for itinerary_aliases in itinerary_aliases %}
<option value="{{ itinerary_aliases }}">{{ itinerary_aliases }}</option>
{% endfor %}
</select>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
{% endblock %}
itinerary_r.html
{% extends "layout.html" %}
{% block title %}
Itineraries search result
{% endblock %}
{% block head %}
<script src='https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css' rel='stylesheet' />
<style>
#map {
height: 500px;
width: 100%;
}
</style>
{% endblock %}
{% block main %}
<div id="map" style="height: 500px; width: 800px; margin: auto;"></div>
<script>
var data = {{ data|tojson|safe }};
var city = "{{ city }}";
// Create the map and set the view to the center of the city
var map = L.map('map').setView([data.region.center.latitude, data.region.center.longitude], 11);
// Add the base map layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 18
}).addTo(map);
// Loop through the search results and add a marker for each business
for (var i = 0; i < data.businesses.length; i++) {
var business = data.businesses[i];
var marker = L.marker([business.coordinates.latitude, business.coordinates.longitude]).addTo(map);
var popup = "<b>" + business.name + "</b><br>" + business.location.address1 + "<br>" + business.location.city + ", " + business.location.state + " " + business.location.zip_code;
marker.bindPopup(popup);
}
// Add a marker for the center of the city
var cityMarker = L.marker([data.region.center.latitude, data.region.center.longitude]).addTo(map);
cityMarker.bindPopup("<b>" + city + "</b>");
</script>
{% endblock %}
Any help would be greatly appreciated.
Boris.
Did the testing through Yelp fusion API website
Everything works fine, probably there is something wrong in app.py function.
I am programming a small program that loads a specific localStorage variable. Here’s my code:
function loadInfo(index) {
var div = document.getElementById('report');
if (localStorage.getItem("stardata") != null) {
// read the data saved in localStorage
var data = localStorage.getItem("stardata");
// turn the data from JSON into an array.
var rdata = JSON.parse(data);
// stringify data
var afdata = JSON.stringify(rdata);
var nfdata = rdata[index];
var adfdata = JSON.stringify(nfdata);
var aafdata = JSON.parse(adfdata);
var keys = Object.keys(aafdata);
var fdata = aafdata[keys];
div.innerHTML += fdata;
return;
}
}
This takes in the data and converts it into strings a few times to get just 1 value. But for some reason, whenever I try to get the value for keys, it does not output anything. I am coding this on a school computer so I can’t access the console. Any help?
type ObjectDescriptor<D, M> = {
data?: D;
methods?: M & ThisType<D & M>; // Type of 'this' in methods is D & M
};
function makeObject<D, M>(desc: ObjectDescriptor<D, M>): D & M {
let data: object = desc.data || {};
let methods: object = desc.methods || {};
return { ...data, ...methods } as D & M;
}
let obj123 = makeObject({
data: {
x: 20,
y: 50,
moveBy(dx: number, dy: number) {
this.x += dx; // Strongly typed this
this.y += dy; // Strongly typed this
},
},
methods: { x: 0, y: 0 },
});
console.dir(obj123);
const nemObj = { method: obj123.moveBy };
nemObj.method(5, 5);
# console.dir(nemObj); // here newObj also getting two extra property x and y but how????
I created an Object called obj123 using the function called makeObject() and then I am assigning the method of this object to another Object called nemObj but this nemObj also getting the x and y property from the previous object. How is this happening?
I have this data which i’m displaying in the table
[
{
"ID": 9,
"Status": "Pending",
},
{
"ID": 8,
"Status": null,
},
{
"ID": 7,
"Status": "Pending",
},
{
"ID": 10,
"Status": null,
},
{
"ID": 18,
"Status": "Completed",
},
{
"ID": 17,
"Status": "In Progress",
}
]
Sort Method:
Ascending order :
this.List.sort((a, b) => a[columnname] < b[columnname] ? 1 : a[columnname] > b[columnname]` ? -1 : 0);
Descending order :
this.List.sort((a, b) => a[columnname] > b[columnname] ? 1 : a[columnname] < b[columnname] ? -1 : 0);
and using sort function to sort the data in table issue is when i sort it, i want to place null values at the last.
I have this array of objects that I gather from an API:
const schedules = [
{
"_id": "6436b48b875967d0bea245b4",
"service": "64246dc9a2d61593d103c749",
"scheduledDates": [
{
"date": "2023-04-17T18:00:00.000Z",
"user": "643701f7e5f61e6760f4d1f3"
},
{
"date": "2023-04-12T18:00:00.000Z",
"user": "643701f7e5f61e6760f4d1f3"
}
]
},
{
"_id": "6436b48b875967d0bea245b5",
"service": "64246dc9a2d61593d103c749",
"scheduledDates": [
{
"date": "2023-04-19T10:30:00.000Z",
"user": "64217a8dcc69c5fa48a5b484"
},
{
"date": "2023-04-12T18:00:00.000Z",
"user": "6414be936b0bbf2bd8fa964f"
}
]
},
]
How can I sort this array by the date inside schedulesDates array, keep the same array of objects structure, looking like this array:
const newSchedules = [
{
"_id": "6436b48b875967d0bea245b4",
"service": "64246dc9a2d61593d103c749",
"scheduledDates": [
{
"date": "2023-04-12T18:00:00.000Z",
"user": "643701f7e5f61e6760f4d1f3"
}
]
},
{
"_id": "6436b48b875967d0bea245b5",
"service": "64246dc9a2d61593d103c749",
"scheduledDates": [
{
"date": "2023-04-12T18:00:00.000Z",
"user": "6414be936b0bbf2bd8fa964f"
}
]
},
{
"_id": "6436b48b875967d0bea245b4",
"service": "64246dc9a2d61593d103c749",
"scheduledDates": [
{
"date": "2023-04-17T18:00:00.000Z",
"user": "643701f7e5f61e6760f4d1f3"
}
]
},
{
"_id": "6436b48b875967d0bea245b5",
"service": "64246dc9a2d61593d103c749",
"scheduledDates": [
{
"date": "2023-04-19T10:30:00.000Z",
"user": "64217a8dcc69c5fa48a5b484"
}
]
},
]
I have this function to handle the sort:
const handleSort = () => {
if (sortOrder === "asc") {
setSortOrder("desc");
return schedules.map((schedule) =>
schedule.scheduledDates.sort((a, b) => new Date(a.date) - new Date(b.date))
);
} else {
setSortOrder("asc");
return schedules.map((schedule) =>
schedule.scheduledDates.sort((a, b) => new Date(b.date) - new Date(a.date))
}
};
But it sorts only within each array of scheduledDates. Thanks for helping.
Using react and firebase, I want to update my users details using their document id.
the user variable is attempting to find an object in an array of objects (props.users) that matches a certain condition (element.id === props.docID).
The docRef variable is creating a reference to a Firestore document by providing the collection path (“users”) and the document ID (props.docID)
Can anyone help me fix the issue. and thanks.
import React, { useEffect, useState } from "react";
import { doc, updateDoc } from "firebase/firestore";
import { db } from "../../Firebase.js";
import TextInput from "../../shared/components/UIElements/TextInput";
const ViewUserDetails = (props) => {
const user = props.users?.find((element) => element.id === props.docID);
const [updatedUser, setUpdatedUser] = useState({});
const docRef = doc(db, "users", props.docID);
const handleInputChange = (event) => {
const { name, value } = event.target;
setUpdatedUser({ ...updatedUser, [name]: value });
};
const updateUserDetails = () => {
updateDoc(docRef, updatedUser)
.then((docRef) => {
console.log("updated");
})
.catch((error) => {
console.log(error);
});
};
return (
<div className="overflow-hidden bg-white shadow sm:rounded-lg">
<div className="px-4 py-5 sm:px-6">
<div className=" inline-flex w-full justify-between">
<h3 className="text-base font-semibold leading-6 text-gray-900 justify-start">
User details
</h3>
<div className="inline-flex">
<p className="my-auto mr-3 max-w-2xl text-sm text-gray-500">
Status
</p>
<div className={`badge badge-${statusColor} badge-outline m-auto`}>
active
</div>
</div>
</div>
<p className="mt-1 max-w-2xl text-sm text-gray-500">Account details.</p>
</div>
<div className="border-t border-gray-200 grid grid-cols-1 md:grid-cols-2 px-8 pb-4 gap-y-3">
<div>
<TextInput label="First Name">{user?.firstName}</TextInput>
</div>
<div>
<TextInput label="Last Name">{user?.lastName}</TextInput>
</div>
<div>
<TextInput label="Email">{user?.email}</TextInput>
</div>
<div>
<TextInput label="Company">{user?.company}</TextInput>
</div>
<div>
<TextInput label="Job title">{user?.jobTitle}</TextInput>
</div>
<div>
<TextInput label="Country">{user?.country}</TextInput>
</div>
<div>
<TextInput label="Phone">{user?.phone}</TextInput>
</div>
<div>
<div className="form-control w-full max-w-xs">
<label className="justify-start label">
<span className="label-text">Role</span>
</label>
<select
className="select select-primary select-bordered"
onChange={
props.onChange
? (e) => {
props.onChange(e.target.value);
}
: null
}
>
<option disabled selected>
{user?.role}
</option>
<option>admin</option>
<option>client</option>
<option>human resources</option>
<option>webmaster</option>
</select>
</div>
</div>
<button className="btn btn-primary" onClick={updateUserDetails}>
Save
</button>
</div>
</div>
);
};
export default ViewUserDetails;