Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I was wondering if there is way to type the return of a function based on the input given to it. Here is an example of what I am thinking:
function toEnum(...strings: string[]) {
const enumObject = {};
strings.forEach((str) => {
enumObject[str.toUpperCase()] = str;
});
return enumObject;
}
const myEnum = toEnum('one', 'two', 'three')
Is there a way to type this function so that we know that myEnum looks like:
{
ONE: 'one',
TWO: 'two',
THREE: 'three'
}
I grew up in Europe and have been used to the week starting on Monday, so this is kind of weird to me. Why does JavaScript make it start on Sunday? Is it because the creator was American? But even so, a big part of the world starts the week on Monday, and that’s when the work-week usually starts anyways, so wouldn’t it make more sense to make Monday = 0 and -1 to all the other days?
Im currently using wavesurfer.js to play an audio file. I have created a useRef for the wavesurfer. On first load, I create an instance of WaveSurfer and assign it to the wavesurferRef. I am currently running this code as well
const [timeRemaining, setTimeRemaining] = useState('')
useEffect(() => {
if (playing && wavesurfer.current) {
wavesurfer.current.on('audioprocess', function () {
if (wavesurfer.current?.isPlaying()) {
const totalTime = wavesurfer.current.getDuration()
const currentTime = wavesurfer.current.getCurrentTime()
setTimeRemaining(`-${Math.round(totalTime - currentTime)}`)
}
})
}
}, [playing])
From my understanding of useState. The component should rerender everytime state changes so assume that since setTimeRemaining is called for every millisecond then the Component should rerender but when I check the logs. The useEffects that loads on component mount is not rerunning.
Why isnt my component rerendering?
Ideally, instead of useState, I should use useRef for the timeRemaining value but when I use useRef, the div that displays the value of timeRemaining doesnt show the new value of timeRemaining ref.
Here is a stackblitz example containing an example for both the usestate and useref approach
When I click on a button that I have inside my slider, instead of executing what the button should do, what it does is take that slider to position 1 of the carousel. what I want is that this does not happen since it does not allow the action of the button to be executed, which is to open an overlay. I leave a video so that it is better understood.
I checked the documentation and I couldn’t solve it.
This is my code:
let swiperTrending = new Swiper(".swiper-container-trending", {
slidesPerGroup: 1,
autoplay: {
delay: 3000,
},
speed: 1000,
grabCursor: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
100: {
slidesPerView: 1,
spaceBetween: 10,
},
768: {
slidesPerView: 2,
spaceBetween: 10,
},
1024: {
slidesPerView: 3,
spaceBetween: 60,
},
},
});
I’m writing a validator using AJV and have defined the schema as follows:
const ajv = new Ajv({ allErrors: true, $data: true });
export interface UpdateTaskRequest {
pathParameters: {
listId: string;
taskId: string;
};
body: {
id: string;
name: string;
isCompleted?: boolean;
desc?: string;
dueDate?: string;
};
}
export const updateTaskRequestSchema: JSONSchemaType<UpdateTaskRequest> = {
$schema: "http://json-schema.org/draft-07/schema#",
type: "object",
properties: {
pathParameters: {
type: "object",
properties: {
listId: {
type: "string",
},
taskId: {
type: "string",
},
},
required: ["listId", "taskId"],
},
body: {
type: "object",
properties: {
id: {
const: { $data: "/pathParameters/taskId" },
},
name: {
type: "string",
maxLength: 200,
},
isCompleted: {
type: "boolean",
nullable: true,
},
desc: {
type: "string",
nullable: true,
maxLength: 400,
},
dueDate: {
type: "string",
nullable: true,
format: "date-time",
},
},
required: ["id", "name"],
},
},
required: ["pathParameters", "body"],
};
I want to validate that body.id is equal to pathParameters.taskId so I used the const keyword in conjunction with the $data reference as explained here.
id: {
const: { $data: "/pathParameters/taskId" },
},
The problem is I’m getting the following error:
The types of ‘properties.id’ are incompatible between these types.
Type ‘{ const: { $data: string; }; }’ is not assignable to type ‘{ $ref: string; } | (UncheckedJSONSchemaType<string, false> & { const?: string | undefined; enum?: readonly string[] | undefined; default?: string | undefined; })’.
Types of property ‘const’ are incompatible.
Type ‘{ $data: string; }’ is not assignable to type ‘string’.ts(2322)
How do I tell the TypeScript compiler that { $data: string; } will eventually resolve to string so as to resolve the above error? I tried the following but it did not work:
id: {
type: "string",
const: { $data: "/pathParameters/taskId" },
},
I am trying to implement stroke-dasharray for one line usinf if-else condition. But It’s not working. Can someone have a look at it and tell what is wrong here ?
.attr("stroke-dasharray", function (d) {
if (d.type != "Stpe") return ('3, 3');
else
return null;
})
I want to make the red line in solid and other in dashed.
Image
Follwing is the data of red line of one point. Only the red line has “type”: “Step”.
{
"status": 1,
"resource_name": "Step 1",
"type": "Step",
"ld": [0, 0],
"pathway_name": "pathway1"
},
What I am not able to do right here ?
window.onload = function(){
func1();
};
var list = [];
function func1(){
for(var i = 0; i < 9; i++){
list.push(i);
}
}
console.log(list);
Which the output log is an empty array, then how do I add elements to a global array in a function, and access them globally?
I’m new to this community and just started programming I couldn’t find anything about this topic can anyone please solve this.
I need to filter names who’s each points in array above 75.
i have tried this and unable iterate over an array.
const candidatesList = [{'name':'Blake Hodges', 'points':[76,98,88,84]},{'name':'James Anderson', 'points':[0,98,12,13]}]
const arrayOfSelecetedCandidates=[]
for(let object of candidatesList){
if (candidatesList.every(candidatesList.points>75)){
arrayOfSelecetedCandidates.push(candidatesList.name)
}
}
console.log(arrayOfSelecetedCandidates);```
output like this:-
```['Blake Hodges']```
I am looking for a solution which would take a path and an object as input and create/add the object in the specified path of the nested parent object.
var obj = {};
function addHandle(object, path, handle){
//logic
}
addHandle(obj, "order/customer/name", "abc");
addHandle(obj, "order/customer/address[]/line1", "address 1");
addHandle(obj, "order/customer/address[]/line1", "address 2");
The expected output should be
"order":{
"customer":{
id":"abc",
"address":[
{
"line1":"address 1"
},{
"line2":"address 2"
}
]
}
}
}
Can you please help me with the function logic ?
How can I access different JSON objects in JavaScript by a variable containing the attribute’s path?
var item = {
"car": {
"manufacturer": "Ford",
"model": "Taunus"
"surface": {
"color": "silver",
"type": "metallic"
}
"built (year)": "1975"
};
let foo = "model";
let bar = "surface.color";
consloe.log("Model: " + item[foo]); // Output: "Taunus"
console.log("Surface color:" + item[bar]); // Output: "undefined", Desired output "silver"
This notation represents only one hierarchic level per set of brackets, of course. Is there an easy elegant way to access several levels with only one labeling variable like “one.two” and “one.two.three”?
I have a problem of markLine rendering xAxis location value to name and seemingly ignores supplied name. Original documentation can be found here: https://echarts.apache.org/en/option.html#series-line.markLine
Sorry about the long snippet, just run the code.
<html style="height: 100%"><head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;" _echarts_instance_="ec_1644723235300"><div style="position: relative; width: 2752px; height: 952px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="3440" height="1190" style="position: absolute; left: 0px; top: 0px; width: 2752px; height: 952px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div class="" style="position: absolute; display: block; border-style: solid; white-space: nowrap; z-index: 9999999; box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgb(255, 255, 255); border-width: 1px; border-radius: 4px; color: rgb(102, 102, 102); font: 14px / 21px "Microsoft YaHei"; padding: 10px; top: 0px; left: 0px; transform: translate3d(1370px, 91px, 0px); border-color: rgb(255, 255, 255); pointer-events: none; visibility: hidden; opacity: 0;"><div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><div style="font-size:14px;color:#666;font-weight:400;line-height:1;">2021-09-27</div><div style="margin: 10px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#ffffff;"></span><span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">Süstoolne</span><span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">130</span><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="margin: 10px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#1dd56a;"></span><span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">Diastoolne</span><span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">67</span><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="margin: 10px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#ffbb04;"></span><span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">Pulss</span><span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">36</span><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div></div></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/bmap.min.js"></script>
-->
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
const colors = ['#5470C6', '#EE6666'];
option = {
title: {
text: 'Jälgin vererõhku'
},
color: ['#242e66', '#1dd56a', '#ffbb04', '#0089ff'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
left: '1%',
right: '3%',
bottom: '1%',
containLabel: true
},
toolbox: {
feature: {
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
},
dataZoom: {
yAxisIndex: 'none'
}
}
},
legend: {
data: ['Süstoolne', 'Diastoolne', 'Pulss']
},
dataZoom: [
{
type: 'inside',
realtime: true,
start: 0,
end: 100
}
],
xAxis: [
{
type: 'time',
axisTick: {
alignWithLabel: true
},
data: [
'2021-05-27T05:00:00',
'2021-06-04T05:00:00',
'2021-06-29T05:00:00',
'2021-08-13T05:00:00',
'2021-08-21T05:00:00',
'2021-09-27T05:00:00',
'2021-10-01T05:00:00',
'2021-10-11T05:00:00',
'2021-11-14T04:00:00',
'2021-12-06T04:00:00',
'2021-12-15T04:00:00',
'2021-12-26T04:00:00',
'2021-12-27T04:00:00',
'2022-01-07T04:00:00',
'2022-01-12T04:00:00',
'2021-05-27T05:00:00',
'2021-06-04T05:00:00',
'2021-06-29T05:00:00',
'2021-08-13T05:00:00',
'2021-08-21T05:00:00',
'2021-09-27T05:00:00',
'2021-10-01T05:00:00',
'2021-10-11T05:00:00',
'2021-11-14T04:00:00',
'2021-12-06T04:00:00',
'2021-12-15T04:00:00',
'2021-12-26T04:00:00',
'2021-12-27T04:00:00',
'2022-01-07T04:00:00',
'2022-01-12T04:00:00',
'2021-05-27T05:00:00',
'2021-06-04T05:00:00',
'2021-06-29T05:00:00',
'2021-08-13T05:00:00',
'2021-08-21T05:00:00',
'2021-09-27T05:00:00',
'2021-10-01T05:00:00',
'2021-10-11T05:00:00',
'2021-11-14T04:00:00',
'2021-12-06T04:00:00',
'2021-12-15T04:00:00',
'2021-12-26T04:00:00',
'2021-12-27T04:00:00',
'2022-01-07T04:00:00',
'2022-01-12T04:00:00'
]
}
],
yAxis: [
{
scale: false,
type: 'value',
name: 'Süstoolne',
position: 'left',
offset: 0,
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: '#242e66'
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
scale: false,
type: 'value',
name: 'Diastoolne',
position: 'right',
offset: 0,
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: '#1dd56a'
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
scale: false,
type: 'value',
name: 'Pulss',
position: 'right',
offset: 60,
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: '#ffbb04'
}
},
axisLabel: {
formatter: '{value} ml'
},
max: 160
}
],
series: [
{
name: 'Süstoolne',
type: 'line',
yAxisIndex: 0,
smooth: true,
data: [
['2021-05-27T05:00:00', 108],
['2021-06-04T05:00:00', 126],
['2021-06-29T05:00:00', 98],
['2021-08-13T05:00:00', 143],
['2021-08-21T05:00:00', 91],
['2021-09-27T05:00:00', 130],
['2021-10-01T05:00:00', 107],
['2021-10-11T05:00:00', 104],
['2021-11-14T04:00:00', 91],
['2021-12-06T04:00:00', 118],
['2021-12-15T04:00:00', 159],
['2021-12-26T04:00:00', 131],
['2021-12-27T04:00:00', 156],
['2022-01-07T04:00:00', 159],
['2022-01-12T04:00:00', 135]
],
symbol: 'circle',
symbolSize: 8,
lineStyle: {
color: '#242e66',
width: 4
},
itemStyle: {
borderWidth: 2,
borderColor: 'rgba(36, 46, 102, 1)',
color: '#ffffff'
},
markLine: {
label: {
show: true,
backgroundColor: '#808080',
borderRadius: 10,
padding: [5, 5, 3, 5],
color: '#ffffff'
},
symbol: ['none', 'none'],
lineStyle: {
normal: {
color: '#808080',
type: 'dashed'
}
},
data: [
{
name : "Test",
xAxis : "2021-07-07T04:00:00"
}
]
}
},
{
name: 'Diastoolne',
type: 'line',
yAxisIndex: 1,
smooth: true,
data: [
['2021-05-27T05:00:00', 75],
['2021-06-04T05:00:00', 93],
['2021-06-29T05:00:00', 71],
['2021-08-13T05:00:00', 87],
['2021-08-21T05:00:00', 86],
['2021-09-27T05:00:00', 67],
['2021-10-01T05:00:00', 70],
['2021-10-11T05:00:00', 95],
['2021-11-14T04:00:00', 72],
['2021-12-06T04:00:00', 67],
['2021-12-15T04:00:00', 66],
['2021-12-26T04:00:00', 63],
['2021-12-27T04:00:00', 86],
['2022-01-07T04:00:00', 72],
['2022-01-12T04:00:00', 82]
],
symbol: 'circle',
symbolSize: 8,
lineStyle: {
color: '#1dd56a',
width: 4
},
itemStyle: {
borderWidth: 2,
borderColor: 'rgba(36, 46, 102, 1)',
color: '#1dd56a'
}
},
{
name: 'Pulss',
type: 'scatter',
yAxisIndex: 2,
smooth: true,
data: [
['2021-05-27T05:00:00', 36],
['2021-06-04T05:00:00', 30],
['2021-06-29T05:00:00', 37],
['2021-08-13T05:00:00', 34],
['2021-08-21T05:00:00', 44],
['2021-09-27T05:00:00', 36],
['2021-10-01T05:00:00', 30],
['2021-10-11T05:00:00', 40],
['2021-11-14T04:00:00', 37],
['2021-12-06T04:00:00', 32],
['2021-12-15T04:00:00', 34],
['2021-12-26T04:00:00', 43],
['2021-12-27T04:00:00', 32],
['2022-01-07T04:00:00', 31],
['2022-01-12T04:00:00', 40]
],
symbol: 'circle',
symbolSize: 8,
lineStyle: {
color: '#ffbb04',
width: 4
},
itemStyle: {
borderWidth: 2,
borderColor: 'rgba(36, 46, 102, 1)',
color: '#ffbb04'
}
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body></html>I have a forEach loop which displays all records for ‘communities’. For every 10th record, I want to insert an ‘advert record’, then continue with the loop of ‘communities’.
With my existing code, although the ‘advert record’ is displayed at record 10, I’ve found that ‘communities record 10’ is being skipped/missed out, so it looks like this:
R1 – R2 – R3 – R4 – R5 – R6 – R7 – R8 – R9 – ADVERT AT 10 – R11 – R12
Whereas what I want is this:
R1 – R2 – R3 – R4 – R5 – R6 – R7 – R8 – R9 – ADVERT AT 10 – R10 – R11
Can someone please advise where my code is going wrong?
<div class="index-record-grid-container" id="communityGroupsContainer">
<% let count = 0; %>
<% communities.forEach(function(community, i) { %>
<% count = count+1; %>
<% if (count === 10) { %>
<div class="standard-record-container">
<div class="standard-ad-container">
<h3 class="standard-ad-header">Advertisement</h3>
<% promotions.slice(1,2).forEach(promotion => { %>
<img class="standard-ad-image lazy" data-src="https://res.cloudinary.com/dcjceb5aj/image/upload/w_400,c_fit,q_auto,f_auto,fl_lossy/<%- promotion.images[0].public_id %>">
<% }) %>
</div>
</div>
<% } else if (count === 20) { %>
<div class="standard-record-container">
<div class="standard-ad-container">
<h3 class="standard-ad-header">Advertisement</h3>
<% promotions.slice(1,2).forEach(promotion => { %>
<img class="standard-ad-image lazy" data-src="https://res.cloudinary.com/dcjceb5aj/image/upload/w_400,c_fit,q_auto,f_auto,fl_lossy/<%- promotion.images[0].public_id %>">
<% }) %>
</div>
</div>
<% } else { %>
<div class="standard-record-container">
<div class="record-grid-container">
<div class="box-record-username-row-2">
I have the following function:
jQuery(document).ready(function(){
window.addEventListener("load", function (){
alert("hello");
});
It works on the first run, but then stops working when I hit the refresh button.
If I empty the cache or hard reload, it works again once.
What is going on? How can I fix this?
WebBrowser, the control that was previously used, is now deprecated as it was using IE, WebView2 uses Edge Chromium, but in WebBrowser you could call the DOM directly in C# so if I just wanted to get the content of a specific I could do it using C# code. Here you need to run the command ExecuteScriptAsync from a WebView2 instance. Nothing worked so far. I recreated new projects and tried while only doing that, still not working.
Also ExecuteScriptAsync().RunSynchronously(); didn’t work for me either.
The Problem: the font-loaded fires, when the font is loaded and visible, but still not full calculated?
The mission is to create an hr like element, that spreads a given pattern over a given width of an element. I named it Garnish
The easiest is eg. “+”, put as many “+” into the element (and stretch to fit)
There are more complex patterns like “(—+—)”, but this we do not need here.
All this with decorative fonts.
The logic – at least for on character – is simple. Get the width of one … the rest is clear.
This all makes more sense with decorative Fonts that have special nice looking glyphs.
So I have to wait until the font is loaded and after that I call (again) Garnish.calculate_into(element), as soon I get noticed, that the font was loaded. For this I use the FontFace interface.
All this works – most of the time for most of fonts. But not always.
The point, the problem is, that I get wrong dimensions for the glyph when I call Garnish.calculate_into(element), when call directly after “loaded“
If I defer (setTimeout) this call again for up to 3 seconds, all is nice again.
Therefore I think, that loaded is not ready to use.
After I get the loaded info, the font is correct displayed. But the width of the glyph is still wrong!
3secs (or what ever time >2.5 secs) later, I get the correct width.
I try to explain step by step
We assume the pattern “+” will get “∰” after the Font is loaded.
After reloading the page I see “++++++++++” and calc_into says pattern is 5px wide (as expected)
After font loaded I see “∰∰∰∰∰∰∰∰∰∰” and calc_into says pattern is 5px wide (surprise)
If I fire calc_into 3 seconds later I see “∰∰∰∰∰∰” and calc_into says pattern is 12px wide (as expected)
This does – as expected – not happen, if Cache is not disabled.
This belongs to all browsers I can test (ie. no idea about safari).
So I think there is a difference between loaded and “ready”
Is is possible to get this ready state?
I am not searching for workarounds.