Category: javascript

I have a schema to validate with Ajv in Node.js. There is a recurrent pattern on the properties of the json to convalidate, the possible keys value are 1,2,3,4,5. The question is, it’s possible with a regex expression to express only one property that will explain to ajv that the keys value of the json object could be an integer between one and five? And if so, how?

Below there is an example of the current code.

const Ajv = require("ajv")
const ajv = new Ajv()

const validate_setparameters = ajv.compile(
    {
        type: "object",
        properties: {
            "1": { type: "integer"},
            "2": { type: "integer"},
            "3": { type: "integer"},
            "4": { type: "integer"},
            "5": { type: "integer"}
        },
        additionalProperties: false,
        minProperties: 1
    }
)

console.log(validate_setparameters({"3":1}))

I am trying to create a class which can turn a csv file into an object and draw a chart. I am quite new to classes.

I have the following code:

1 <div id="wrapper">
2     <canvas id="chart"></canvas>
3 </div>
4 
5 <script>
6
7     function makeChart(myData) {
8         var barLabels = myData.map(function(d) {return d.Brands});
9         var barData = myData.map(function(d){return d.Emissions});
10
11        var chart = new Chart('chart', {
12           type: 'bar',
13           data: {
14               labels: barLabels,
15               datasets: [
16               {
17                   label: "Carbon Footprint of Leading European Apparel Brands in 2019",
18                   data: barData,
19                                
20               }]
21           }
22       });
23      
24   }
25  
26   d3.csv("carbon-footprint-of-apparel-brands-2019.csv").then(makeChart);
27
28</script>

I am not sure how to turn this into a function since I am not super familiar with the .then() method.

Another issue is that right now on lines 8 and 9 I’m using the actual column header names from the csv file. However, I would like to make the class eventually be able to take the column headers from any csv file so that it doesn’t rely on being hardcoded. I’m not sure how to do this.

(Firebase Version 9)

I’m trying to get document references from the fetched documents of the collection “products” with 2 sets of code below but both return “undefined”.

Get single document:

const docsSnap = await getDoc(
  doc(db, "products/WuAC97j0avTAFNs1kvdf"),
);

console.log(docsSnap.data().ref); // undefined

Get multiple documents:

const docsSnap = await getDocs(
  collection(db, "products"),
);

console.log(docsSnap.docs[0].data().ref); // undefined

Are there any ways to get document references from the fetched documents?

I’m struggling to understand how to import CommonJS modules into an ESM syntax. I’m currently trying to work with the library url-metadata. url-metadata exposes a top-level export as a callable (which does not really conform to CommonJS, AFAIK):

const urlMetadata = require('url-metadata')
urlMetadata(URL, ...)

It’s not possible to write:

import urlMetadata from 'urlMetadata'

since no default export is defined.

Instead, I have to write:

import * as urlMetadata from 'url-metadata'

Or:

import urlMetadata = require("url-metadata")

I tried to read up on module loading in Node but I’m still somewhat confused as to what is the correct way to do this and why.

I am working on a folder uploading project and using React-dropzone for that.

however when I drop a folder and the folder does not contain anything then acceptedFiles
stays empty. I have noticed acceptedFiles, each file object contains a “path” attribute which gives the location, that’s because react-dropzone uses the file-selector library.

const onDrop = useCallback((acceptedFiles) => {console.log(acceptedFiles)}

but according to the DOC I can create a custom made drop event which can detect if a folder was dropped (even if its empty)
const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop, getFilesFromEvent: event => myCustomFileGetter(event)})

Does anyone know how can I generate a path for my empty folder structure?
It’s an issue because if I’m dropping a folder with multiple child folders just only those folder gets detected by file-selector which has a file in it.

Подскажите пожалуйста как сделать такой border-bottom как на фото
enter image description here

In the script below, I’m lazyloading two videos. My script is designed to remove the overlay image from the selected video when clicked. However, it’s also removing the overlay image from the second video and placing it above it. Another click removes the duplicate image, and a third click plays the video.

How do I remove only the image for the selected video in a way that doesn’t affect a second video on the page?

const getVideoId = (wistia_vid) => {
  const classes = Array.from(wistia_vid.querySelector(".wistia_embed").classList);
  const idClass = classes.find((cls) => cls.startsWith("wistia_async_"));
  const id = idClass.replace("wistia_async_", "");

  return id;
};

const removeElems = (wistia_vid) => {
  const toRemove = Array.from(
    wistia_vid.querySelectorAll(".wistia__overlay, .embed-youtube__play, .embed-video__play")
  );

  toRemove.forEach((node) => node.remove());
};

Array.from(document.querySelectorAll(".wistia")).forEach((node) => {
  node.addEventListener("click", () => {
    const videoId = getVideoId(node);
    let wistiaSupportScripts = [
      //adds jsonp file to provide security over requests
      `https://fast.wistia.com/embed/medias/${videoId}.jsonp`
    ];

    removeElems(node);
    
    //Checks if above scripts are already loaded, and if they are... they won't be loaded again
    const id = 'script-ev1';
    if (!document.getElementById(id)) {
      // const id = 'script-ev1';
      var script = document.createElement('script');
      script.id = id;
      script.onload = () => {
        console.log('Ev-1.js loaded and ready to go!');
      };
      script.src = `https://fast.wistia.com/assets/external/E-v1.js` ;
      document.getElementsByTagName('head')[0].appendChild(script);
    } else {
      console.log(`Ev-1.js script with id: ${videoId} already loaded.`);
    }     
    
    //loads supporting scripts into head
    for (var i = 0; i < wistiaSupportScripts.length; i++) {
      let wistiaSupportScript = document.createElement("script");
      wistiaSupportScript.src = wistiaSupportScripts[i];
      let complete = false;
      if (
        !complete &&
        (!this.readyState ||
          this.readyState == "loaded" ||
          this.readyState == "complete")
      ) {
        complete = true;
        console.log(`JSONP script was added.`);
      }

      let wistiaContainers = document.querySelector(".wistia");

      wistiaContainers ? document.getElementsByTagName("head")[0].appendChild(wistiaSupportScript) : console.log("No Wistia videos here.");
    }     

    window._wq = window._wq || [];
    _wq.push({
      //globally scoped
      id: videoId,
      options: {
        autoPlay: true,
        volume: 0.5
      },

      onReady: function (video) {
        playedOnce = true;
        video.popover.show();
        video.play();
      }
    });
  });
});

.wistia {
  position: relative;
  display: block;
  width: 100%;
  max-width: 500px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}
.wistia__overlay {
  width: 100%;
  height: auto;
}
.wistia::before {
  display: block;
  content: "";
}
.wistia button.embed-youtube__play {
  background: url("https://nextiva.com/assets/svg/play-button.svg") no-repeat center center, rgba(33, 33, 33, 0.8);
  background-size: 40%;
  background-position: 55%;
  border: 0;
  border-radius: 50%;
  position: absolute;
  transition: all 0.2s ease;
  -webkit-transition: background 0.2s;
  width: 10%;
  aspect-ratio: 1/1;
  max-height: 15%;    
  cursor: pointer;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.wistia:hover button.embed-youtube__play,
.wistia button.embed-youtube__play:focus-visible,
.wistia button.embed-youtube__play:focus {
  background: url("https://nextiva.com/assets/svg/play-button.svg") no-repeat center center, #005fec;
  background-size: 40%;
  background-position: 55%;
}
.wistia_embed,
.wistia embed,
.wistia iframe {
  width: 100%;
  max-height: 100%;
}

<div class="wistia">
  <picture>
    <source srcset="https://embedwistia-a.akamaihd.net/deliveries/48f1d62d1ceddb4284ad9cf67c916235.jpg?auto=format&w=640" media="(min-width: 1200px)">
    <source srcset="https://embedwistia-a.akamaihd.net/deliveries/48f1d62d1ceddb4284ad9cf67c916235.jpg?auto=format&w=310" media="(min-width: 768px)">
    <img src="https://embedwistia-a.akamaihd.net/deliveries/48f1d62d1ceddb4284ad9cf67c916235.jpg?auto=format&w=310" alt="some text" class="wistia__overlay lazy" loading="lazy">
  </picture>
  <div class="wistia_embed wistia_async_vhkqhqhzyq videoFoam=true"></div>
  <button class="embed-youtube__play"></button>
</div>

<div class="wistia">
  <picture>
    <source srcset="https://embed-fastly.wistia.com/deliveries/2eab84ad71cf5acd9c7572d36667d255.jpg?auto=format&w=640" media="(min-width: 1200px)">
    <source srcset="https://embed-fastly.wistia.com/deliveries/2eab84ad71cf5acd9c7572d36667d255.jpg?auto=format&w=310" media="(min-width: 768px)">
    <img src="https://embed-fastly.wistia.com/deliveries/2eab84ad71cf5acd9c7572d36667d255.jpg?auto=format&w=310" alt="Some text" class="wistia__overlay lazy" loading="lazy">
  </picture>
  <div class="wistia_embed wistia_async_8ei13wuby7 videoFoam=true"></div>
  <button class="embed-youtube__play"></button>
</div>

    import React from 'react';
import updateCoverImage from '../../assets/images/profile/update-cover-image.png';
import facebookIcon from '../../assets/images/profile/facebook.png';
import instagramIcon from '../../assets/images/profile/instagram.png';
import tweeterIcon from '../../assets/images/profile/tweet.png';
import avatarUpdate from '../../assets/images/profile/avatar-update.png';
import verificationSign from '../../assets/images/profile/verification-sign.png';
import {useSelector} from 'react-redux';
import {getProfileSettings} from '../../store/reducers/profileSettingsSlice';

const ProfileTopBlock = () => {
  const {profile_data, profile_socials, profile_settings} = useSelector(getProfileSettings);
  const {cover, avatar} = profile_data;

  console.log(profile_data, profile_socials, profile_settings);

  return (
    <div className="user-top-block">
      <div className="top-border"></div>

      <div className="profile-cover-image-update" id="profile-cover-image-update">
        <div className="update-image">
          <img className="img" src={updateCoverImage} alt="update-cover-image"/>
        </div>


      </div>


      <div className="soc-links-block">
        <a href="#" className="soc-link" target="_blank">
          <img className="img" src={facebookIcon} alt="facebook icon"/>
        </a>
        <a href="#" className="soc-link" target="_blank">
          <img className="img" src={instagramIcon} alt="instagram icon"/>
        </a>
        <a href="#" className="soc-link" target="_blank">
          <img className="img" src={tweeterIcon} alt="twitter icon"/>
        </a>
      </div>

      <div className="user-info" style={{backgroundImage: `url(${cover})` }}>
        <div className="profile-name-img">

          <div className="profile-avatar">
            <div className="profile-image-block">
              <img className="img" src={avatar || '/'} alt="profile image"/>
            </div>

            {/*{% if not is_guest %}*/}
            <div className="avatar-update" id="profile-avatar-image-update">
              <img src={avatarUpdate} alt="" className="img"/>

              <form action="/" method="post" hidden
                    encType="multipart/form-data">
                {/*{% csrf_token %}*/}
                profile_avatar_form
              </form>
            </div>
            {/*// <!-- End profile avatar image update -->*/}
            {/*{% endif %}*/}
          </div>
          {/*// <!-- End profile-avatar -->*/}

          <div className="username-profession">
            <div className="username">
              <span>{profile_data?.first_name} {profile_data?.last_name}</span>
              <span className="verification-sign-img">
                  <img className="img" src={verificationSign} alt=""/>
              </span>
            </div>
            <div className="profession">
              {/*{% if profile_settings.profession %}*/}
              profile_settings.profession
              {/*{% else %}*/}
              Profession
              {/*{% endif %}*/}
            </div>
          </div>
          {/*// <!-- End username-profession -->*/}
        </div>
        {/*// <!-- End profile image block -->*/}
      </div>
      {/*// <!-- End user info -->*/}

      <div className="user-info-bottom-line">
        {/*{% if is_guest and not user.is_anonymous %}*/}

        <form action="/" method="POST">
          {/*{% csrf_token %}*/}
          <label>
            <input type="hidden" name="profile_slug" value=" profile.slug "/>
          </label>
          {/*{% if follow %}*/}
          <button type="submit" className="user-info-following followed">&#128076; Following</button>
          {/*{% else %}*/}
          <button type="submit" className="user-info-following">&#9995; Follow</button>
          {/*{% endif %}*/}
        </form>

        {/*{% elif is_guest %}*/}
        <a href="#" className="user-info-following">Follow</a>
        {/*{% endif %}*/}

        <a href="#" className="user-info-following">
          <span>Followers</span>
          <span>profile_followers | length</span>
        </a>
        <a href="#" className="user-info-following">
          <span>Following</span>
          <span>profile_followings.count</span>
        </a>
      </div>

      <div className="user-links">
        <ul className="user-links-list">
          <li className="links-list-item">
            <a href="#" className="list-link">Feed</a>
          </li>
          <li className="links-list-item">
            <a href="#" className="list-link">Videos</a>
          </li>
          <li className="links-list-item">
            <a href="#" className="list-link">Videos</a>
          </li>
          <li className="links-list-item">
            <a href="#" className="list-link">Groups</a>
          </li>
          <li className="links-list-item">
            <a href="#" className="list-link">Shop</a>
          </li>
          <li className="links-list-item">
            <a href="#" className="list-link">CV</a>
          </li>
          <li className="links-list-item">
            <a href="#" className="list-link">Portfolio</a>
          </li>
          {/*{% if not is_guest %}*/}
          <li className="links-list-item">
            <a href="#" className="list-link">•••</a>
          </li>
          {/*{% endif %}*/}
        </ul>
      </div>
      {/*// <!-- End user links -->*/}
      <div className="user-links-mobile user-links-mobile-fixed-bottom user-links-first-line">
        <a href="#" className="ok-btn">
          <span className="icon-block">&#x270B;</span>
        </a>
        <a href="#" className="ok-btn">
          <span className="icon-block">&#x270C;</span>
        </a>
        <a href="#" className="ok-btn">
          <span className="icon-block">&#x1F4F0;</span>
        </a>
        <a href="#" className="ok-btn">
          <span className="icon-block">&#x1F5BC;</span>
        </a>
        <a href="#" className="ok-btn">
          <span className="icon-block">&#x1F4F7;</span>
        </a>
      </div>

      <div className="user-links-mobile user-links-mobile-fixed-bottom">
        <a href="#" className="ok-btn">
          <span className="icon-block">&#x94D;</span>
        </a>
        <a href="#" className="ok-btn">
          <span className="icon-block">&#x1F6D2;</span>
        </a>
        <a href="#" className="ok-btn">
          <span className="icon-block">&#x1F3B4;</span>
        </a>
        <a href="#" className="ok-btn">
          <span className="icon-block">&#x223A;</span>
        </a>
        <a href="#" className="ok-btn">
          <span className="icon-block">•••</span>
        </a>
      </div>
    </div>
  );
};

export default ProfileTopBlock;

I am creating program, which should show me gallery page of my website. When I use the useselector from React Js hooks, It gives me an error of ” TypeError: Cannot destructure property ‘cover’ of ‘profile_data’ as it is null. ” And I cannot repair it, help me if you can. I used the useSelector, however the error is bigger showing in my screen.

I would like to increase a number by 1 every 1 second by using setInterval().
However, it would change the number to a string. How do I add a number instead of a string?

    function addNum (){setInterval(() => {number.innerHTML += 1;
        }, 1000);
    }

    document.getElementById("Btn").addEventListener("click",addNum);

<span id = "number">0</span>
<button id = "Btn">+1/s</button>

I have this code (abbreviated) that renders from the Gravity Forms WordPress plugin with no hooks or other means of altering its output (other than forking the plugin):

<div class="gform_heading">...</div>
<form id="gform_8" action="/volunteer/">
    <div class="gform_body gform-body">...</div>
    <div class="gform_footer top_label">...</div>
</form

I need for the div class="gform_heading">...</div> to be a child of the <form> element:

<form id="gform_8" action="/volunteer/">
    <div class="gform_heading">...</div>
    <div class="gform_body gform-body">...</div>
    <div class="gform_footer top_label">...</div>
</form

I’m planning to use this jQuery to alter the DOM.

$(".gform_heading").prependTo("[id^=gform_]");

However, the site has multiple forms and the gform_... id has a number after the underscore that changes depending on the form rendered to the page. I need to wildcard the number in the jQuery so it can work for any form, present or future, that the site may embed into a page.

I tried the solution at Use wildcard ID with jQuery and get wildcard ID in my Inspector console (substituting my form ID and class names) but it didn’t work.

What would be the most correct way to do this?

Am new to storybook and the docs make it pretty clear on the idiomatic way to write stories in Angular. Here’s an example of one for my app:

import { Meta, Story } from '@storybook/angular';

import {CustomerListComponent} from "@app/modules/customer/customer-search/components/customer-list/customer-list.component";

export default {
  title: 'Customer List',
  component: CustomerListComponent,
} as Meta;


const Template: Story = (args) => ({
  props: args,
});

export const EmptyArgs = Template.bind({});
EmptyArgs.args = {};

This fails with the following error:

Indeed, if we look at the constructor for the CustomerListComponent there is a dependency on CustomerSearchComponent.

@Component({
  selector: 'customer-list',
  templateUrl: './customer-list.component.html',
  styleUrls: ['./customer-list.component.scss']
})
export class CustomerListComponent {
  constructor (
    private customerSearchComponent: CustomerSearchComponent,
  ) {
  }
...

So what is typically done in this case? Can I just tell storybook to load that component, and any dependencies it has and so forth? Do I need to pass a mock of CustomerSearchComponent somehow? Am having trouble finding clean examples of cases like this, storybook docs seem to assume components with no depenencies on other components.

This also has me thinking – should I not plan to use storybook to render larger views (ie. parents with several child components)? Is that going to be hard to configure.

PS: random question – is storiesOf syntax deprecated? It’s not in official docs but tutorials all over the web.

A dependency of mine uses the null coalescing operator. Babel can’t handle it. Is there any way to make Babel work here?

babel.config.js

module.exports = {
    presets: ['@babel/preset-env', '@babel/preset-react'],
    plugins: [
        '@babel/transform-runtime',
        '@babel/plugin-proposal-nullish-coalescing-operator'
    ],
};

Compile error:

./node_modules/test/dist/test.js 26:10
Module parse failed: Unexpected token (26:10)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| export class Test {
|   constructor() {
>     null ?? 0;
|   }
|

Having the following testing file:

import { render } from '@testing-library/react';

import '@testing-library/jest-dom';
import TaskModal from './task-modal';

describe('TaskModal', () => {
  const title = 'title';
  const selectedOption = { id: '1', name: 'test' };
  const options = [{ id: '1', name: 'test' }];
  it('should render successfully', () => {
    const { baseElement, getByText } = render(
      <TaskModal
        title={title}
        open={true}
        toggle={jest.fn()}
        initialScriptNameSelectedOption={selectedOption}
        scriptNameOptions={options}
      />
    );
    expect(baseElement).toBeTruthy();
    expect(getByText(title)).toBeTruthy();
  });

  it('should check if TaskModal renders Textarea successfully', () => {
    const { getByTestId } = render(
      <TaskModal
        hasTextarea
        title={title}
        open={true}
        toggle={jest.fn()}
        initialScriptNameSelectedOption={selectedOption}
        scriptNameOptions={options}
      />
    );
    const textarea = getByTestId('has-textarea');
    expect(textarea).toBeInTheDocument();
  });
});

When I run each test separately they pass, when I run the whole file, the second test fails with the following message:

Error: Uncaught [ReferenceError: IntersectionObserver is not defined]

Why is this happening?

I have the following kind of json:

const obj = {
  "trees":{
     "name":"a",
     "age":"9",
     "height":"10",
     "location":"park"
  },
  "cars":{
     "name":"b",
     "age":"3",
     "height":"10",
     "location":"park"
  },
  "bikes":{
     "name":"c",
     "age":"110",
     "height":"10",
     "location":"park"
  }
};

How do I sort it based on say age in javascript or react.

My purpose is click a button and show a div with some text, but there are a lot of buttons in the page.I need to recalculate top value for my component according to browser resize. I’m a newbie and I don’t know how I can do this. I do this (angular)

<div [top]="top">

in my ts:

click(event){
this.top=(event['Y']);
}

The problem is that when resize browser and click on the one button the div is not open when I want.
I think there is some formula: event.y-event.screenY but I don’t find
Anyone can help me?