How to select a value from the populated list using document query selector in browser console?

See also questions close to this topic

• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• MarkLogic server-side JavaScript and XQuery

  I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

  I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
• Popover in chrome extension using js

  My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.

  
• How to embed YouTube videos to the website without using iframes?

  I have embedded YouTube videos to the website using iframes. The website is fetching videos in real-time which mean whenever the user uploads a new video on YouTube, it is updated on the website too.

  Now there are two reasons I'm looking for iframes alternate.

  1. It makes the website slow. Every time the site is loaded, videos are fetched from YouTube and it is making the website slow.

  2. I'm learning SEO, and I read iframes hurt website SEO performance.

  So, what alternates do I have?
• Heroku buttons styling issue

  I made an app locally and pushed it on Heroku. The app is working perfectly on Heroku, however on the Homepage I have 2 buttons ( login and register ). When I run my app locally my buttons have some whitespace in between and they are rounded ( I am using tailwind for this). But on Heroku both buttons are not rounded and there is no whitespace in between them. When I inspect the button on Heroku, I see: class:".... rounded-full", which is what I expected and should have made the button rounded. Anyone has any idea what could cause this and how I can solve this ?

  This is how my index.js looks like:

  export default function Login() {
    return(
      <div>
        <Loginbuttons/>
      </div>
     )
  }
  

  and Loginbuttons.js defined as:

  import Link from 'next/link'
  
  export default function Loginbutton(props){
    return (
     <div>
     <div className = 'block'>
      <button
        style={{width:"10%", paddingTop:"15px",   paddingBottom:"15px"}}
        className='mt-10 mb-10 bg-blue-500 hover:bg-blue-700 text-wgvhite font-bold py-2 px-4 rounded-full'>
          <Link href='login' style={{textDecoration: 'none'}}>Login</Link>
      </button>
  
      <button
        style={{width:"10%", paddingTop:"15px", paddingBottom:"15px"}}
        className='mt-10 mb-10 ml-10 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full'>
          <Link href='register' style={{textDecoration: 'none'}}>Register</Link>
      </button>
    </div>
  </div>)}
  
• How do i connect to websocket URL from website?

  i'm trying to get the update values from website, i manage to connect but i cant get the values, i dont know if i'm doing anything wrong.

  this is what i'm trying to do, maybe this url is not complete, but i dont know how to get the full URL. when i try to conect i dont recieve anything, i read the coments i will try to send something to this websocket

  webSocket webSocket messages

  EDIT: this is the website: https://cachedownload.europacasino.com/live/desktop/bundles/22.4.1.4/?launch_alias=wwtbamrol_millrol&cat=Roulette%20&gameType=lobby&redirect_time=1651884988615&backUrl=https%3A%2F%2Fcachedownload.europacasino.com%2Flive%2Fdesktop%2F%3Flaunch_alias%3Dwwtbamrol_millrol%26cat%3DRoulette%2520#/

  you need click in this button to show the entry hall

  const WebSocket = require('ws')
  
  const ws = new WebSocket('wss://eurolive-frontend.playtechgaming.com/ws')
  ws.onmessage = (event) =>{
    
    console.log(event.data)
  }
  ws.onerror = (erro)=>{
    console.log(erro)
  }```
  
  
• Vue web component prop not being set through html attribute

  I've got a vue web component with a numeric prop on it, and through some testing have found that doing something like this doesn't work in setting the prop value...

  <script src="https://unpkg.com/vue@2"></script>
  <script src="./mycomponents.js"></script>
  
  <my-component myProp="40"></my-component>
  

  But this will...

  <script src="https://unpkg.com/vue@2"></script>
  <script src="./mycomponents.js"></script>
  
  <my-component id="mycmp"></my-component>
  
  <script type="module">
  const myComponent = document.getElementById("mycmp");
  myComponent.myProp = 40;
  </script>
  

  Example component code:

  <template>
      <p>{{myProp}}</p>
  </template>
  
  <script>
  export default {
      name: 'MyComponent',
      props: {
          myProp: {
              type: Number,
              default: 0
          }
      }
  }
  </script>
  

  I'm guessing maybe this is a timing thing, like when doing it through the html attributes the component hasn't finished being properly initialised yet? Though all the examples I saw of other people using vue web-components seemed to suggest that this should be a pretty basic use case. Hopefully it's just me doing something dumb.

  Any help greatly appreciated!
• Active nav item with custom html elements

  I'm building a nav component using html custom elements like so:

  HTML

  <app-navbar></app-navbar>
  <template>
  <style>
      ul {
          display: flex;
          list-style: none;
          gap: 20px;
      }
      a {
          padding: 10px;
          text-decoration: none;
      }
      .active {
          color: white;
          background-color: red;
      }
  </style>
  <nav>
      <ul>
          <li><a href="/page-one.html">Nav item 1</a></li>
          <li><a href="/page-two.html">Nav item 2</a></li>
          <li><a href="/page-three.html">Nav item 3</a></li>
      </ul>
  </nav>
  

  JS

  class AppNavBar extends HTMLElement { 
   constructor() { 
    super();
    this.attachShadow({ mode: 'open' });
    const template = document.querySelector('template');
    this.shadowRoot.appendChild(template.content.cloneNode(true))
   }
  }
  window.customElements.define("app-navbar", AppNavBar)
  

  And now I need to pass the active class onto the respective nav item. For example when click on <a href="/page-two.html">Nav item 2</a> I want that item to get the class .active and so on.

  Update

  Something like:

  page-one.html

  <app-navbar page-one-nav-item="active"></app-navbar>

  page-two.html

  <app-navbar page-two-nav-item="active"></app-navbar>

  page-three.html

  <app-navbar page-three-nav-item="active"></app-navbar>

  Is this possible to achieve with html custom elements?

  Thank you.
• Import less style inside web component with webpack

  I need to import styles from a less file inside a web component. I'm using webpack with less-loader. When I try to import the style from the less file, I get an error regarding variables used in the less.

  webpack config

     module: {
                  rules: [{
                      test: /\.(css|less)$/,
                      use: [{
                          loader: MiniCssExtractPlugin.loader,
                          // loader: 'style-loader',
                      }, {
                          loader: 'css-loader',
                      }, {
                          loader: 'less-loader',
                          options: {
                              paths: [
                                  path.resolve(__dirname, 'node_modules'),
                              ],
                          },
                      }],
             },
  plugins: [new MiniCssExtractPlugin({
                  chunkFilename: '[contenthash].css',
              })]
  

  file I'm trying to import the style in

      import editorStyle from 'src/components/editor.less';
      
      const componentTemplate = document.createElement('template');
      componentTemplate.innerHTML = `
      <style>
      ${editorStyle}
      </style>
      <div class="editor-container"><div class="html-editor"></div></div>`;
      
      class EditorWebComponent extends HTMLElement {
          constructor() {
              super();
          this.attachShadow({ mode: 'open' });
          this.shadowRoot.appendChild(componentTemplate.content.cloneNode(true));
          this.editor = $(this.shadowRoot.querySelector('.html-editor'));
          this.init();
      }
  }
  

  The error:

  [built] [failed] [1 error]

  ERROR in ./src/components/editor.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js??ref--4-2!./src/components/editor.less)
  Module build failed (from ./node_modules/less-loader/dist/cjs.js):
  
  
      background-color: transparent !important;
      color: @text-primary !important;
           ^
  Variable @text-primary is undefined
        in ~\editor.less (line 4, column 11)
  
• .Net Web API - 404 not found in postman

  Hello Dearest Community,

  I am getting a 404 not found on a custom route of my Web API. I am using .Net Core Web API setup. This is my controller :

  namespace CRUD_App.Controllers
  {
      [Route("api/[controller]")]
      [ApiController]
      public class EmployeeController : Controller
      {
          private readonly IConfiguration _configuration;
          private readonly IWebHostEnvironment _env;
  
          public EmployeeController(IConfiguration configuration, IWebHostEnvironment env)
          {
              this._configuration = configuration;
              this._env = env;
          }
  
  
          [HttpGet]
          public IActionResult Get()
          {
              MongoClient dbClient = new MongoClient(_configuration.GetConnectionString("EmployeeAppCon"));
  
              var dbList = dbClient.GetDatabase("BDD").GetCollection<Employee>("Employee").AsQueryable();
  
              return Json(dbList);
          }
  
          [HttpPost]
  
          public IActionResult Post(Employee emp)
          {
              MongoClient dbClient = new MongoClient(_configuration.GetConnectionString("EmployeeAppCon"));
  
              int LastEmployeeId = dbClient.GetDatabase("BDD").GetCollection<Employee>("Employee").AsQueryable().Count();
  
              emp.EmployeeId = LastEmployeeId + 1;
  
              dbClient.GetDatabase("BDD").GetCollection<Employee>("Employee").InsertOne(emp);
  
              return Json("Employee Added Successfully");
          }
  
          [HttpPut]
          public IActionResult Put(Employee emp)
          {
              MongoClient dbClient = new MongoClient(_configuration.GetConnectionString("EmployeeAppCon"));
  
              var filter = Builders<Employee>.Filter.Eq("EmployeeId", emp.EmployeeId);
  
              var update = Builders<Employee>.Update.Set("EmployeeName", emp.EmployeeName)
                                                    .Set("Department", emp.Department)
                                                    .Set("DateOfJoining", emp.DateOfJoining)
                                                    .Set("PhotoFileName", emp.PhotoFileName);
  
              dbClient.GetDatabase("BDD").GetCollection<Employee>("Employee").UpdateOne(filter, update);
  
              return Json("Employee Updated Successfully");
  
          }
  
          [HttpDelete]
          public IActionResult Delete(int id)
          {
              MongoClient dbClient = new MongoClient(_configuration.GetConnectionString("EmployeeAppCon"));
  
              var filter = Builders<Employee>.Filter.Eq("EmployeeId", id);
  
              dbClient.GetDatabase("BDD").GetCollection<Employee>("Employee").DeleteOne(filter);
  
              return Json("Employee Deleted Successfully");
          }
  
          [Route("GetById")]
          [HttpGet]
          public JsonResult GetById(int id)
          {
              MongoClient dbClient = new MongoClient(_configuration.GetConnectionString("EmployeeAppCon"));
  
              var filter = Builders<Employee>.Filter.Eq("EmployeeId", id);
  
              var emp = dbClient.GetDatabase("BDD").GetCollection<Employee>("Employee").Find(filter);
  
              return new JsonResult(emp);
          }
      }
  

  The route that is causing the problem is the last one above meaning the one with [Route("GetById")].

  Here is the screenshot of the result on postman :

  

  Than you for your time !
• sqllite 19: foreign key constraint faild in TDD Test in Asp.net webapi

  I Test Add Goods in Project when debugging below inner Exception SqlliteException :SqlLite error 19: foreign key constraintfailed Note:my project it's a small shop with implementing WebApi then test with swagger or postman All Operation with successful and in BDD With SqlServer But TDD with InMemory can't passed them.

  public class Goods : EntityBase
      {
          public string Name { get; set; }
          public int Count { get; set; }
          public int MinimumInventory { get; set; }
          public int SalesPrice { get; set; }
          public string UniqueCode { get; set; }
  
          public int EntryDocumentId { get; set; }
          public EntryDocument EntryDocuments { get; set; }
  
          public int SalesInvoiceId { get; set; }
          public SalesInvoice SalesInvoices { get; set; }
  
          public int CategoryId { get; set; }
          public Category Category { get; set; }
  
      }
  
  
  
  
  public class Category :EntityBase
      {
          public Category()
          {
              Goods = new HashSet<Goods>();
          }
          
          public string Name { get; set; }
  
          public HashSet<Goods> Goods { get; set; }
  
      }
  

  it's my tdd test

  [Fact]
          public void Add_adds_Goods_Properly()
          {
              _category = new Category
              {
                  Name = "DummyCategory"
              };
              _context.Manipulate(_ => _.Categories.Add(_category));
  
              _addGoodsDto = new AddGoodsDto
              {
                  Name = "ماست کاله",
                  SalesPrice = 5000,
                  MinimumInventory = 5,
                  Count = 10,
                  UniqueCode = "YK-142",
                  CategoryId = _category.Id,
                  
              };
           _sut.Add(_addGoodsDto);
  
              var expected = _context.Goods.FirstOrDefault();
  
              expected.Name.Should().Be(_addGoodsDto.Name);
              expected.SalesPrice.Should().Be(_addGoodsDto.SalesPrice);
              expected.MinimumInventory.Should().Be(_addGoodsDto.MinimumInventory);
              expected.Count.Should().Be(_addGoodsDto.Count);
              expected.UniqueCode.Should().Be(_addGoodsDto.UniqueCode);
              expected.Category.Id.Should().Be(_category.Id);
          }
  
• Controller Method Get : Get specify attributes from a Class

  my question is simple, I´m try to do a controller that pass some attributes of a Model

  This is the method:

  [HttpGet("getAllUserInfo")]
  public async Task<ActionResult<object>> GetAll() {
      var test = await _context.Users.ToListAsync(); //here I have the all Info of all users
  
      //In the return I want pass some attributes of user, creating a new object (ex: The user have a password but I don´t want to show that)
      return Ok(new { test.getType().Name, test.getType().Mail });
      //this above is the part of the code I don´t understand
      }
  

  Is there any alternative to this scenario or what are the possible ideas to make this possible?

  Sorry if there are any spelling mistakes in the title and document, but I think the idea where I have difficulty understanding is there
• How do I solve this error"Uncaught Error: [News] is not a <Route> component. All component children of <Routes> must be a <Route>or <React.Fragment>"?

  I am trying to make a news app and this version 6 of react-router-dom is not working.. can anybody tell me how to fix it?

  import "./App.css";
  import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
  import React, { Component } from "react";
  import NavBar from "./components/NavBar";
  import News from "./components/News";
  export default class App extends Component {
    render() {
      return (
        <div>
          <Router>
            <NavBar />
            <Routes>
            <Route exact path="/"><News key="general" pageSize={this.pageSize} country="in" category="general"/></Route> 
            <Route exact path="/business"><News key="business" pageSize={this.pageSize} country="in" category="business"/></Route> 
            <Route exact path="/entertainment"><News key="entertainment" pageSize={this.pageSize} country="in" category="entertainment"/></Route> 
            <Route exact path="/general"><News key="general" pageSize={this.pageSize} country="in" category="general"/></Route> 
            <Route exact path="/health"><News key="health" pageSize={this.pageSize} country="in" category="health"/></Route> 
            <Route exact path="/science"><News key="science" pageSize={this.pageSize} country="in" category="science"/></Route> 
            <Route exact path="/sports"><News key="sports" pageSize={this.pageSize} country="in" category="sports"/></Route> 
            <Route exact path="/technology"><News key="technology" pageSize={this.pageSize} country="in" category="technology"/></Route> 
            </Routes>
          </Router>
        </div>
      );
    }
  }

  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
• CSS pseudoclass usage

  I want to combine a:link and a:visited at once. What is best method?

  I am thinking of a:link+visited. This doesn't work though! What to do then? What is the right way?