Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
Am just learning the feasibility of using Monaco editor in my react project.So i do have a requirement , that i need a provision to open a file from local and edit and save.
Am not sure on this functionality. As i dont have any examples also handy
if anyone encountered anything similar to this , please notify me also i heard about gitpod in some places .
Any help or feedback will be highly helpful
I have an array, the number of elements in it is never known.
I need to show 5 values from an array, the first, 3 from the inside proportional and the last.
let v = [1,2,3,4,5,6,7,8,9] // 1, 3, 5, 7, 9
let v = [1,2,3] // 1, 2, 3
let v = [1..20] // 1, 5, 10, 15, 20
How i can do it?
Is it possible to define a global-scope function (i.e. ABC) in Node.js app, so in any other .js files it was possible to call that function directly without need to require/import ( like we call any global-scope i.e. console.log)? .
(note: I couldn’t find analog question on SE).
I am facing a problem when develop a blog. This blog has two side. Admin side for blog management like creating, editing blogs…etc
In admin side, I integrated CKEditor and save blog content which edited by CKeditor to my database (MySQL). And as result, this content contains full of html tags and strange characters which auto-generated by CKEditor looks like this:
EX: </p> <p>Cục Quản lý Khám chữa bệnh ghi nhận đến 17h chiều 14/12, thành phố có 119 ca phải thở oxy, trong đó 6 ca thở máy.</p> <p>
So now I use Vuejs to develop the user side. I use axios in Vue component and calling api from backend to get blog’s content and want to render this in Vue component.
But after rendering, all blog’s content containts html tags. Is there any way to convert CKEditor content to plain text in Vue Component. As a expected result, I just want to display plain text (not text with full of html tags…)
If anyone has any idea, I am really grateful if you can suggest me. Thank you.
<script>
export default {
data() {
return {
blogs: [],
};
},
async mounted() {
try {
const url = "api/blog/latest";
const result = await this.getLatestBlogs(url);
/* console.log(result); */
this.blogs = JSON.parse(result.data);
/* console.log(this.blogs); */
} catch (error) {
console.log(error);
}
},
};
</script>
*Render content in vue component but all I get is CKEditor content with many html tags as plaint text
<p>{{ blogs[0].content }}</p>
I want to make an online coding text editor but I cannot find any template for its terminal (to make code have color, etc).
do you guys have any idea how can I download a template?
thanks
I want to start by saying that I am by no means an expert in JavaScript, so apologies in advance if I am missing something obvious.
Example:
I’m trying to create a custom tooltip for column A. Using the data from another cell as the parameter for the output of column A’s tooltip.
{title: "title", tooltip: function(cell) {return anotherfunction(cell)}...
When passing ‘cell’ through as a parameter, it’s possible to view the information in the rest of the row console.log(cell._cell) but from what I’ve discovered, there’s no way of accessing the rest of the data.
This is a code pen of the issue that I’m having (i’ve commented out the console.log(cell._cell.value) in the example, as this will make the table fail to render. So, looking at the browsers console, it’s possible to see the data that is returned from console.log(cell._cell).
I’ve tried to use Tabulators cell.getData(), cell.getRow(), cell.getColumn() etc (and a load of others) but each results in an error.
Codepen
https://codepen.io/lukeorriss/pen/yLzMapg
If someone could please point me in the right direction for accessing the data in another row from a tooltip function, this would be great. Thank you all, in advance.
first a little bit of context.
I’m working on a React web app and my object, Product, it has an array of images. The image object is pretty simple: { url: string, id: string }. The images are loading fine as you can see bellow:
When you click on the scissors icon it pops up a crop container. The crop container uses react-cropper, internally what that package does is the following:
//...
if (this.options.checkCrossOrigin && isCrossOriginURL(url)) {
if (!crossOrigin) {
crossOrigin = 'anonymous';
} // Bust cache when there is not a "crossOrigin" property (#519)
crossOriginUrl = addTimestamp(url);
}
this.crossOrigin = crossOrigin;
this.crossOriginUrl = crossOriginUrl;
var image = document.createElement('img');
if (crossOrigin) {
image.crossOrigin = crossOrigin;
}
image.src = crossOriginUrl || url;
image.alt = element.alt || 'The image to crop';
this.image = image;
//...
Sometimes the image loads normally but most of the time I get the error:
Access to image at 'https://url.to.image?timestamp=1639579791237' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
That timestamp param is added by react-cropper to avoid CORS error. I did a deploy to my DEV environment to see if it would work in a live scenario but still got the same error.
Does anyone know what could be happening?
I’m new to firebase and have been having some difficulties over the past two days with querying and deleting documents from a collection. Specifically, I am trying to clear my entire collection of company dummy data each time I start the server before I loop over the dummy data and write it to the collection (to prevent duplication).
I have been able to take my company dummy data and write it to my ‘companies’ collection no problem. The problem is when I attempt to delete a doc from the collection; it does not delete and appears to throw the following error when passing the retrieve variable to the deleteDoc() method.
Note: I decided to try deleting just one doc first. If I can do that successfully and it is reflected in the firebase collection, then I should be able to clear the whole collection with no problem.
TypeError: Cannot use ‘in’ operator to search for ‘_delegate’ in undefined
I understand that the ‘in’ keyword is only valid when checking if a property exists on an object. I logged the data at each point of the function to make sure I was referencing the doc correctly and passing the appropriate data type to the deleteDoc() function (which would be an object).
Here is my code for writing the dummy data to the database (works fine):
export const dummyDataToFirebase = async() => {
try {
const batch = writeBatch(db);
dummyData.forEach(doc => {
addDoc(companyRef, doc)
console.log(doc)
})
await batch.commit();
console.log('success!')
} catch (error) {
console.error(error, 'try again!');
}
}
```**Here is my code for deleting a doc from the database collection (problem)**:```
const deleteOne = async () => {
try {
const docRef = doc(companyRef, '86e9cade14e2a972c526db4b7c828ed7')
const retrieve = await getDoc(docRef)
console.log(retrieve)
await deleteDoc(retrieve)
if(retrieve.exists()) {
console.log('still exists')
} else {
console.log('it worked!')
}
} catch (error) {
console.error(error, 'nope')
}
}
deleteOne()
```**Here is the error I get from the deleteDoc function I wrote:```
index.js:1 TypeError: Cannot use 'in' operator to search for '_delegate' in undefined
at Tc (index.esm2017.js:14691)
at ph (index.esm2017.js:17522)
at deleteOne (Firebase.jsx:101) 'nope'[enter image description here][1]
retrieve object that is console.logged
[1]: https://i.stack.imgur.com/srxpq.png
error in console
[2]: https://i.stack.imgur.com/p2xQk.png
function to iterate over an array passed as argument and output those values which either start with “den” or end with “ly”.
function to extract HTML tags from the string passed as argument.(‘<h1> hello </h1>‘)
function to retrieve time from the string passed as argument to the
function. Example :
getTime(Random time at 19:08 on the clock 123:456’)
OP = “19:08”
I am a newcomer to the world of JS and have been following a tutorial. Below is my very simple code.
HTML
<body>
<p>People Entered</p>
<h1 id="count-el">0</h1>
<button id="inc" onclick="increment()">Increment</button>
<button id="rst" onclick="rst()">Reset</button>
<button id="getoff" onclick="getoff()">Get Off</button>
<button id="save" onclick="save()">Save</button>
<p id="save-el">Previous Saves : </p>
<script src="scripts.js"></script>
JS
function save() {
let text = document.getElementById("save-el").innerText
document.getElementById("save-el").innerText = text +" " + count
}
The above JS code provides the exact output I want. But if I change it as follows, it does not provide any output and remains blank.
function save() {
let text = document.getElementById("save-el").innerText
text = text +" " + count
}
I don’t understand why it happens and appreciate it if someone could explain what I am missing here. Thanks in advance.
I am trying to display the list of authors from my API, I’ve created simple component, and am using axios. My API looks like this:
{
"links": [
{
"rel": "self",
"href": "http://localhost:8080/booker/api/authors"
}
],
"content": [
{
"authorId": 4,
"firstName": "Tonyslav",
"lastName": "Shamal",
"webPage": "www.tonisha.gov",
"dateCreated": "2021-12-15T11:58:28.829+00:00",
"numberOfBooks": 13,
"links": [
{
"rel": "books",
"href": "http://localhost:8080/booker/api/books/author/4"
}
]
},
{
"authorId": 6,
"firstName": "Georgio",
"lastName": "Martinez",
"webPage": "www.got.gov",
"dateCreated": "2021-12-15T11:58:28.829+00:00",
"numberOfBooks": 16,
"links": [
{
"rel": "books",
"href": "http://localhost:8080/booker/api/books/author/6"
}
]
}
}
And my React components looks like this:
import { useEffect, useState } from 'react';
import axios from 'axios';
const Authors = () => {
const [authors, setAuthors] = useState([]);
useEffect(() => {
axios.get('http://localhost:8080/booker/api/authors')
.then(res => {
setAuthors(res.data);
})
.catch(err => console.log(err));
}, []);
return (
<div>
{authors.map(author => (
<div className="card" key={author.content.authorId}>
{author.content.firstName}
</div>
))}
</div>
);
}
export default Authors;
This is my error from the console
TypeError: authors.map is not a function
Can anybody try to help me with this, i can not solve this error.
how i can change or expand a function like this script below?
id = 10;
comment+id.slideTo(0, 500);
that should be dynamic so that it can be addressed individually.
Thank you for helping!
My server code handles an error and sends it to client.
Logging it on server seems fine but err.response.data on catch clouse returns empty on client.
Backend code
const errorHandler = async (err, req, res, next) => {
console.log({err}, err.message)
return res.status(err.status || err.code || 500).json({message:'hey'})
}
module.exports = errorHandler
Frontend code
export function apiCall(method, path, data) {
return new Promise((resolve, reject) => {
return axios[method](path, data)
.then(res => {
console.log({res})
return resolve(res.data)
})
.catch(err => {
console.log(err.response)
return reject(err?.response?.data)
})
})
}
error.response.data returns empty all tho console.log on
export function apiCall(method, path, data) {
return new Promise((resolve, reject) => {
return axios[method](path, data)
.then(res => {
console.log({res})
return resolve(res.data)
})
.catch(err => {
console.log(err.response)
return reject(err?.response?.data)
})
})
}
How to change parameter within the Observable method and receive value according to value obtained on click
orderItem(item: string, value: string) {
switch (value) {
case 'status':
this._sortService.listSort(this._sortService.filter, { sort: {
"colaborator.status": 1 } }).subscribe(res => {
this.dataSource = res.data;
}, err => {
console.info('### ERRO sort', err);
});
break;
default:
}
}
Exemple value: Status and name
<ng-container>
<th headerCell column="status"
(click)="OrderItem($event, 'status')">
Status</th>
<td *cell="let element" (click)="open()">
{{element.colaborator.status)}}
</td>
</ng-container>
<ng-container>
<th *headerCell column="name"
(click)="orderItem($event, 'name')">Name</th>
<td>
{{ element.name }}
</td>
</ng-container>
I wish I didn’t have to duplicate the Subscribe method: this._sortService.listSort
I want to produce a one-page web platform which plays a single video. Users need to be able to ‘zoom’ in on that video without compromising the image quality on the screen. Performance is also a priority (we want the platform to run smoothly on most devices).
Intuition (borrowed from this old question: How can I zoom into video and switch streaming of videos in the same HTML5 player?):
Play the whole video at a standard quality. Crop the video into 1/4ths (see below image for example) and 1/8ths at higher qualities. If user zooms in then ‘switch’ the stream to the higher quality zoomed in video (1/4 or 1/8).
I believe this can be done using HTML5/CSS3 (as the old top answer in the linked question indicates).
My question: the idea stated above is involved and not very fluid (zoom restricted to premade partitions), is there a more efficient/better way to do this using available tools: HTML5, CSS and/or Javascript?