Category: javascript

I’m starting learning Webpack.

In the teachers code in the file index.js that Webpack creates its something like:

var {initializeButtons} = require('./mainfile.js');

initializeButtons();

Can someone explain why {initializeButtons} is a variable there?

Thank you so much 🙂

I have the following function which creates a notification:

displayNotification(title: string, msg: string, avatarUrl: string, room: Room) {
    const notifBody = {
        body: msg,
    };
    if (avatarUrl) notifBody['icon'] = avatarUrl;
    const notification = new window.Notification(title, notifBody);

    notification.onclick = function() {
        dis.dispatch({
            action: 'view_room',
            room_id: room.roomId,
        });
        window.focus();
        notification.close();
    };

    return notification;
}

As you can see, when I’m creating the notification I pass a title and body to it. The title contains Bozhidar3 and the body contains Test Message so I expect the notification to only have these 2 fields alongside an icon. What actually happens is that I see this:

I can see my localhost wrapped around <a></a> tag and I have no idea where is it coming from. I went through all the notification instance properties here – https://developer.mozilla.org/en-US/docs/Web/API/notification but I couldn’t figure out what might this be. Does anyone have an educated guess where this might be coming from?I’m using Chrome on Linux.

I’m building a web ar app that allows users to wear GLTF head models. (https://www.head5.camera/) In order to get the correct lighting on the GLTF, I have set renderer.outputEncoding = THREE.sRGBEncoding and this works great BUT it also adjusts the lighting of my THREE.VideoTexture from my video stream. Is there a way to encode just the GLTF but preserve the LinearEncoding? of the rest of the scene. Any help is much appreciated.

Here’s an example of what I mean:

The background is lighter than it is supposed to be because it is also being encoded.

I have a index.html + javascript code in the ‘assets’ folder of my apk. When the app is launched, I open index.html in a webview ; the html page is displayed properly and the basic javascript code is also properly executed.

To open index.html in my webview, I use the following code:

webView.loadUrl("https://appassets.androidplatform.net/assets/www/examples/index.html");

At runtime, a .txt file is created by the app and placed on the disk of my Android phone at:

file:///storage/emulated/0/Android/data/com.example.test/files/www/mytextfile.txt

Now, I have a button in my index.html page. When I click on this button, I want to execute a javascript function that will process some tasks on mytextfile.txt and display it on my html page in the webview.

So I execute in javascript something like this when the user clicks on the button:

doStuffOnDiskTxtFile('file:///storage/emulated/0/Android/data/com.example.test/files/www/mytextfile.txt')

But I get the following error:

    "Fetch API cannot load file:///storage/emulated/0/Android/data/com.example.test/files/www/mytextfile.txt. 
URL scheme "file" is not supported.", 
source: https://appassets.androidplatform.net/assets/www/build/module.js

Any idea how to solve this issue ? Would it work better if my html + javascript code were hosted on a distant server and not ran locally ?

Thanks for your help.

Lets take a look at two statements

//case 1
let someMap1 = [];
someMap1.push({someObj});
const someObjIndex = arr.length -1;

//case 2
let someMap2 = {}
someMap2.someObj = {someObj}
//alternatively
someMap[someObj] = {someObj}

Now if I wanted to access someObj I can use the following commands

const someObjtoAccessFromArray = someMap1[someObjIndex]
const someObjToAccessFromMap = someMap2[someObj];

In case 1 the computer will go counting upto the length of array and find the someObj if within bounds. But how does it behave in the second case?

My question is since the two functions are doing the same thing are there any pros and cons in the two different approaches and how computationally intense are the two statements in terms of execution in terms of memory and speed?

I’m coding a simple app to add itens to a shopping bag to study Javascript. However my js code didn’t register when the element is clicked, it’s not printing on console.

    //your code here
    const fruitList= [
        {
            'fruit':'Banana',
            'price':3.9
        },
        {
            'fruit':'Orange',
            'price':0.7
        },
        
    ]
    
    const product= document.getElementById('products')
    ListaFrutas.map((n) => {
        product.insertAdjacentHTML('afterbegin', '<li class="fruits">' + n.fruit+ '</li>');
    })
    
    const shoppingBag= []
    const fruitproduct = document.querySelector('.fruits')
    fruitproduct.addEventListener("onClick", handlerClick)
    
    function handlerClick() {
        console.log('it works')
    }
  } 

<div id="content-produtos" class="flex" >
        <ul id="produtos" >

         </ul>
</div> ```

const submitForm= ()=>{
const newItem={
name,email,phone,address
}

Axios.post(“http://localhost:3001/api/insert”,newItem) .then((response) => {
console.log(response);

})

}

I’m breaking my head over this:

The User on my WebApp can follow a Tag (Like a user can follow a subreddit), the followed Tag will be shown in the Homepage with a different color than the not followed one.
If a User follows a Tag he will get Push-Notifications when a new Blog Post is published tagged with the Tag.

So I have to query for all the tags a given user follows.

And I have to query for all the user which follow a given tag.

A user can follow max 20 Tags.
Since I have a Many to Many relation should i go with something like this (normalization)

const SubscribeToTagSchema = new Mongoose.Schema({
 user: {
  type: Schema.Types.ObjectId,
  ref: "User",
  required: true,
 },
 tag: {
  type: Schema.Types.ObjectId,
  ref: "Tag",
  required: true,
 },
});

or should I just save the data in both schema User and Tag?

const UserSchema = new Mongoose.Schema({
 tag: {
  type: Schema.Types.ObjectId,
  ref: "Tag",
  required: true,
 },
});

const TagSchema = new Mongoose.Schema({
 user: {
  type: Schema.Types.ObjectId,
  ref: "User",
  required: true,
 },
});

I have a huge query that consists of 2 subqueries. Since I intend to use the subqueries at multiple places, I wanted to extract it as a function.

Here is the original query that works perfectly fine and returns expected results:

  public async findUsers(): Promise<UserEntity[]> {
    return this.createQueryBuilder('users')
        .andWhere('users.user_type = :userType', { userType: UserType.Parent })
        .andWhere(qb => {
          const subquery = qb
              .subQuery()
              .select('COUNT(*)')
              .from(EventEntity, 'e')
              .where('e.object_id = users.member_id')
              .andWhere('e.event_type = :eventType', { eventType: EventType.LOGIN })
              .getQuery();
          return subquery + '= 0';
        })
        .andWhere(qb => {
          const subquery = qb
              .subQuery()
              .select('COUNT(*)')
              .from(UserEntity, 'u1')
              .where('u1.primary_Id = users.member_id')
              .andWhere('u1.user_type = :userTypeChild', { userTypeChild: UserType.Child })
              .getQuery();
          return subquery + '= 0';
        })
        .getMany();
  }

However, when I try to put the subquery inside a function, it returns different results. Here is the query:

  public async findUsers(): Promise<UserEntity[]> {
    return this.createQueryBuilder('users')
        .andWhere('users.user_type = :userType', { userType: UserType.Parent })
        .andWhere(`(${this.subquerysql()}) > 0`)
        .andWhere(qb => {
          const subquery = qb
              .subQuery()
              .select('COUNT(*)')
              .from(UserEntity, 'u1')
              .where('u1.primary_Id = users.member_id')
              .andWhere('u1.user_type = :userTypeChild', { userTypeChild: UserType.Child })
              .getQuery();
          return subquery + '= 0';
        })
        .getMany();
  }

  private subquerysql(): string {
    const query = getConnection()
        .createQueryBuilder()
        .select('COUNT(*)')
        .from(EventEntity, 'e')
        .innerJoin('users', 'u','e.object_id = u.member_id')
        .andWhere(`e.event_type = 'LOGIN'`)
        .getSql();
    return query;
  }

Here is the error that I am getting:

I can’t seem to figure why the query isn’t working(when I put subquery inside a function). I am writing this inside userRepository

I’m working on a chat application where users can message each other. I have used the anchorme library to detect links / URLs / Emails in text and convert them to clickable HTML which it does. But the detected URLs are not clickable it is just converted as plain
text. Is there a way to convert it to a hyperlink?

  <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="css/styles.min.css">
    </head>
        <body>
        <div class="chat">
            <div id="sidebar" class="chat__sidebar">
    
            </div>
            <div class="chat__main">
                <div id="messages" class="chat__messages"></div>
    
                <div class="compose">
                    <form id="message-form">
                        <input name="msg" placeholder="Message" required autocomplete="off">
                        <button>Send message</button>
                    </form>
                    <button id="send-location">Send location</button>
                </div>
            </div>
        </div>
        <script id="message-template" type="text/html">
            <div class="message">
                <p>
                    <span class="message__name">{{username}}</span>
                    <span class="message__meta">{{createdAt}}</span>
                </p>
                <p>{{message}}</p>
            </div>
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.6.0/qs.min.js"></script>
        <script src="/socket.io/socket.io.js"></script>
        <script src="/js/chat.js"></script>
        <script src="https://raw.githack.com/alexcorvi/anchorme.js/gh-pages/dist/browser/anchorme.min.js"></script>
        </body>
        </html>

  Javascript client side:

    

> const socket = io()
>     
>     //Elements
>     const msg = document.querySelector('#message-form')
>     const messageFormInput = msg.querySelector('input')
>     const messageFormButton = msg.querySelector('button')
>     
>     //Templates
>     const messages = document.querySelector("#messages")
>     const messageTemplate = document.querySelector('#message-template').innerHTML
>     
>     
>     
>     //ref to index.js 
>     socket.on('message', (message) => {
>         const html = Mustache.render(messageTemplate, {
>             //will come from the value
>             username: message.username,
>             message: message.text,
>             createdAt: moment(message.createdAt).format('HH:mm')
>         })
>         messages.insertAdjacentHTML('beforeend', html)
>         scrollAuto()
>     })
>     
>     //Refers to html form input
>     msg.addEventListener('submit', (e) => {
>         //Prevents browser to update
>         e.preventDefault()
>     
>         messageFormButton.setAttribute('disabled', 'disabled')
>     
>         const message = e.target.elements.msg.value
>         socket.emit('sendMsg', message, (error) => {
>             messageFormButton.removeAttribute('disabled')
>             messageFormInput.value = ''
>             messageFormInput.focus()
>             //Enable after event acknowledged
>     
>             if (error) {
>                 return console.log(error)
>             }
>         })
>     })
>     
>     socket.emit('join', {
>         username,
>         room
>     }, (error) => {
>         if (error) {
>             alert(error)
>             location.href = '/'
>         }
> 
>     })
> 

Javascript server:
>     const path = require('path')
>     const http = require('http')
>     const express = require('express')
>     const socketio = require('socket.io')
>     
>     //Destructuring
>     const {
>         generateMessage,
>     } = require('./utils/messages')
>     
>     // Convert Urls
>     const anchorme = require("anchorme").default;
>     // Check for profanity
>     const Filter = require('bad-words')
>     //Initiate socket-io
>     const io = socketio(server)
>     
>     // Define path for Express config 
>     const publicDirectoryPath = path.join(__dirname, '../public')
>     app.use(express.static(publicDirectoryPath))
>     
>     //Server-side
>     io.on('connection', (socket) => {
>         console.log(' WebSocket Connection')
>     
>         // Listening for socket i.e messages
>         socket.on('sendMsg', (message, callback) => {
>             const user = getUser(socket.id)
>     
>             var result = anchorme(message, {
>                 attributes: [{
>                     name: "target",
>                     value: "_blank"
>                 }, ]
>             });
>             console.log(result)
>     
>             var filter = new Filter()
>             if (filter.isProfane(message)) {
>                 return callback('Profanity is not allowed')
>             }
>             io.to(user.room).emit('message', generateMessage(user.username, result))
>             callback()
>         })
>     })
> 

const generateMessage = (username, text) => {
>     return {
>         username,
>         text,
>         createdAt: new Date().getTime()
>     } }

I’m creating a small project with the mern stack. In the homepage of this project, you can see the things that the current user has. THe problem is that the list can change in every moment, because other user can happend to that list other stuff. SO, to make it refresh, I put it in the useEffect hook. The problem now is that my server is reciving a tons of request, and always the same one. I don’t know if is the case to set a timer that rerender after x second, to make the work of my server lighter, or there is a way to remake the request to the server in some case. Here is the small code that manage the request:

    const [file, setFile] = useState([]);
    useEffect(() => {
        axios.post("http://127.0.0.1:5050/file/getfilesbycreator",{creator:localStorage.getItem('user')})
        .then(res => {
            setFile(res.data);
        })
        .catch(err => console.log(err))
    })

If someone has any suggestion, please tell me. I read something about rerender react, but I didn’t found out better way then a timer, or something similar.Thanks

For optimization purposes, we have removed the use of jQuery. But we continue to use the Contact Form 7 to collect contacts. The form submits fine, but it does reload the page. How to make a custom Ajax dispatch for this form without using JQuery?

Is there a way to search and remove an arbitrary string contained in a file using gulp?

In my React application I need to grep the url with "type": "Three"?

How to find and return only specific key value based on another key value with Javascript?

From the api I get an array of images:

   "images": [
        {
          "url": "https:example/c18336d6-61ee-4c7c-be6b-397352b6fd63",
          "type": "One"
        },
        {
          "url": "https://example/c18336d6-61ee-4c7c-be6b-397352b6fd63",
          "type": "Two"
        },
        {
          "url": "https://example/c18336d6-61ee-4c7c-be6b-397352b6fd63",
          "type": "Three"
        },
      ]
    },

Then in my React component I want to use this value:

    const MyComponent = () => {

      const items =
        nodes.map((item) => {
            return {
              myImage: // Here I need e.g. the url value of the images array with type = Three.
            };
          }) || [];

   return <Slides items={items} />

  export default MyComponent;

This would be silliest question which I am asking here. I was going through Cypress automation and was working on one of the scenario.

I wanted to verify whether the date is matching or containing the date or not.

System date – 11/30/2021 06:18:33 PM and derived application date – 11/30/2021 6:18:38

How can I match and assert this using Cypress?

expect('11/30/2021 06:18:33 PM').to.have.string('11/30/2021 6:18:38');

I am getting below error :-

AssertionError

expected '11/30/2021 06:18:33 PM' to contain '11/30/2021 6:18:38'