Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
Often in documentation for libraries, information will be given in the docs about how to import the module once it’s been installed via npm. For example:
import React from "react"
When this isn’t given, how is it possible to know how or what should be imported to make use of the library?
Here I am spreading the err object (which is an Error object in Node.js) and cloning it as error, but some properties of the err object are not copied to error.
const error = { ...err };
console.log(error.name, error.status, err.name, err.status);
The output is:
undefined 400 SyntaxError 400
Why is error.name undefined?
What does it mean to return a class in a function, like this:
setItems: action((state, newItems) => {
state.items = newItems.map(data => Class != null ? new Class(data) : data)
})
I use React with easy-peasy state management library
I have a screen where all the information related to user and their tasks will be displayed.. It’s like a report. At the end I have a button for the user clicking on which will allow them to save a pdf version of the same information. The information will be different every time.. So the number of rows will be different. How can this be achieved? I tried using react-native-html-to-pdf but I could create pdf of only static html.. Couldn’t figure out how to render dynamic html?
The ui will be slightly different for the pdf compared to the screen but the information will be same.
I have a component that renders a list of data, given by a hook. My hook returns some data on the component mount so the component always has some items to render.
MyList component:
function MyList() {
let {data} = useLoadData()
return (
<ul>
{data.map(i => <li key={i}>{i}</li>)}
</ul>
)
}
Data loader hook:
function useLoadData() {
const [data, setData] = useState([])
const fetchData = useCallback((params) => {
fetch("url")
.then(res => res.json())
.then(res => setData(res))
}, [])
useEffect(() => {
fetchData()
}, [])
return {data, fetchData}
}
I want to use jest to check if the initial data was rendered or not, is there any way to do it?
In one script I have
<a href="javascript:void;" id="druck">
This is evaluated by javascript in another script (these are nested templates in django).
This should then open a new window in order to prepare a site that is more printer-friendly (still a way to go).
$(function() {
var b = document.getElementById("druck");
b.onclick = function() {
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>' + document.title + '</title>');
mywindow.document.write('<link rel="stylesheet" href="{% static 'boot/css/bootstrap.min.css' %}" type="text/css">');
mywindow.document.write('<link rel="stylesheet" href="{% static 'boot/css/bootstrap.css' %}" type="text/css">');
mywindow.document.write('<link rel="stylesheet" href="{% static 'boot/css/dashboard.css' %}" type="text/css">');
mywindow.document.write('</head><body>');
I would like to pass a string parameter from the first script to the second script, so that I can print the string as well. I am not fit in js, therefore I am asking how I can pass a string to such a href with an id and a javascript void function with onclick and so on.
Looking for example code to convert 3d .ply to .drc (https://github.com/google/draco) compression in nodejs or javascript. Following draco3d document able to build command line tool and successfully convert ply to drc. But not sure how to achieve the same programmatically using nodejs or javascript solution. Examples are not clear in this below official documentation.
https://github.com/google/draco/tree/master/javascript/npm/draco3d
TIA
I have a class file, utility.js for all the common functions.
However some of the functions require certain library import
e.g: NetInfo library
utility.js
import NetInfo from "@react-native-community/netinfo";
export async function networkConnection() {
const state = await NetInfo.fetch();
return state.type;
}
However, in order for utility.js to be reusable in another project, another project has to have NetInfo installed. Is it a good practice if instead of importing modules directly, I import only when I need to use it, and pass the import object along to the function?
utility.js
export async function networkConnection({ NetInfo }) {
const state = await NetInfo.fetch();
return state.type;
}
and when using it
app.js
import NetInfo from "@react-native-community/netinfo";
import { networkConnection } from "./utility.js"
const network = networkConnection({ NetInfo })
This way, I can copy and paste utility.js to any project, without the need to install all the import packages. Also, this pattern seems to be able to resolve common Circular Dependencies error by limiting the import statement.
Is this the best practice for creating a common, reusable function file?
I am wondering what is the simplest method to get the XRP value of a particular token on the XRPL. So for example EQ I can go to the Sologenic DEX exchange, pass in my XRP account address and it will give me the current asking price for the EQ/XRP pair. How would I get the lowest Selling and highest Buy prices for a particular pair programmatically from the ledger?
I am hoping there is some sort of node module which I can pass an address to and a pair then it will return the data I need?
I have been using the following node xrpl.js package but cannot figure out how to get what I need. https://js.xrpl.org/[https://js.xrpl.org/][1]
I’m using a Bootstrap panel like this:
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">First Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Second Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Third Panel</a>
</li>
</ul><!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="tabs-1" role="tabpanel">
<p>First Panel</p>
</div>
<div class="tab-pane" id="tabs-2" role="tabpanel">
<p>Second Panel</p>
</div>
<div class="tab-pane" id="tabs-3" role="tabpanel">
<p>Third Panel</p>
</div>
</div>
And due to the answer to this question, I added this Javascript code for enabling opening tabs on hyperlinks:
// Javascript to enable link to tab
var hash = location.hash.replace(/^#/, ''); // ^ means starting, meaning only match the first hash
if (hash) {
$('.nav-tabs a[href="#' + hash + '"]').tab('show');
}
So if I go to the link https://sitename.com/page#tabs-2, the tab-pane with an id of tabs-2 will be opened.
But I need to show the nav-tabs item as well. I mean the redirection to
https://sitename.com/page#tabs-2 must be a little bit upper in order to show the nav-tabs items.
So how can I do that?
when i started the code i’ve got this error
Error: Cannot find module 'node:events'
Require stack:
- C:RAGEMPserver-filesnode_modulesdiscord.jssrcclientBaseClient.js
- C:RAGEMPserver-filesnode_modulesdiscord.jssrcindex.js
- C:RAGEMPserver-filespackagesDominoRPdiscordindex.js
- C:RAGEMPserver-filespackagesDominoRPindex.js
- C:RAGEMPserver-filesbinloader.mjs
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:893:15)
at Function.Module._load (internal/modules/cjs/loader.js:743:27)
at Module.require (internal/modules/cjs/loader.js:965:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (C:RAGEMPserver-filesnode_modulesdiscord.jssrcclientBaseClient.js:3:22)
at Module._compile (internal/modules/cjs/loader.js:1076:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
at Module.load (internal/modules/cjs/loader.js:941:32)
at Function.Module._load (internal/modules/cjs/loader.js:782:14)
at Module.require (internal/modules/cjs/loader.js:965:19)
this is my code
const Discord = require('discord.js');
const client = new Discord.Client();
client.on('ready', async () => {
console.log('!!! => Discord bot has authenticated successfully...');
sendMsgToServerStatus();
});
i have upgrade to node 16.13 but same thing. Can anyone help me?
I am using react-native-signature-canvas which returns the signature as a base64 image string. I want to send it to the API and before that, I want to convert it to the data URL. Can anyone help me? Also, I don’t want to store the file/image to the local storage..just wanna convert it to the DataUrl and send it to the API.
I just started with my first discord bot and I am really stuck with this problem. Everytime I write ‘node .’ it gives an error stating this ‘throw new TypeError(‘CLIENT_MISSING_INTENTS’);’can anybody tell me what I need to fix?
That’s all the code I got:
const Discord = require('discord.js');
const bot = new Discord.Client();
const token = 'myToken';
bot.on('ready', () =>{
console.log('This bot is online!');
})
bot.login(token);
I want the “Choose file” to be optional. That means if user does not click “Choose file”, the default image (/wwwroot/n-image/NoImage.png) is chosen. “Image” is a string property of Article object.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form>
<div>
<div class="form-group">
<label asp-for="Image" class="control-label"></label>
<br />
<div class="custom-file">
<input type="file" asp-for="Image" class="custom-file-input" id="FLFormFIle" />
</div>
<span class="text-danger"></span>
<br />
</div>
<img id="FormFilePrv" src="" style="border:1px; top:20px;margin-left:120px;" />
<div class="form-group">
<br />
<input type="submit" value="Utwórz artykuł" class="btn btn-primary" />
</div>
</div>
</form>
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\").pop();
document.getElementById('FormFilePrv').src = window.URL.createObjectURL(this.files[0])
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
})
The way to solve the singleton pattern in JS (TS actually) is looks like this (the best approach if you ask me):
export default class Singleton {
private static _instance: Selection
constructor() {
if (Selection._instance) {
return Singleton._instance
} else {
Singleton._instance = this
}
}
}
And then:
import Singleton from './Singleton.ts'
const singleton_1 = new Singleton()
const singleton_2 = new Singleton()
singleton_1 === singleton_2 // true
But in this scenario I have to create new variables every time I need that class.
I can achieve exactly the same the easier way:
class Singleton {
constructor() {
// some logic
}
}
export default new Singleton()
import Singleton from './Singleton.ts'
const wut = Singleton.field
Singleton.method('do something')
Am I getting something wrong or the first approach is a little bit excessive and complicated and the second one just do the same thing in more obvious way?
I understand that if I have static fields in my class, I couldn’t use it that way, but cases when you really need static fields are rare.