Is there any way to host a WordPress website for free? Without any custom domain

I am looking for free hosting for my WordPress website which is currently running on local server.

fabricJS - How to determine whether the mouse is on the path

• I want to show a menu When the mouse moves to the path
• but farbicjs's path has a Square Touchable area ,Instead of linear
  https://codesandbox.io/s/xz6mi?file=/src/environments/environment.prod.ts
  zrender has Simple implementation
  thanks, all

Split 1 day array into 2 days array

I have an array like this and I want to split this into 2 arrays with the same date.

 array (size=2)
   'dates' => string '2021-10-20' (length=10)
   'hours' => 
     array (size=2)
       0 => 
         array (size=12)
           0 => string '07:30' (length=5)
           1 => string '08:00' (length=5)
           2 => string '08:30' (length=5)
           3 => string '09:00' (length=5)
           4 => string '09:30' (length=5)
           5 => string '10:00' (length=5)
           6 => string '10:30' (length=5)
           7 => string '11:00' (length=5)
           8 => string '11:30' (length=5)
           9 => string '12:00' (length=5)
           10 => string '12:30' (length=5)
           11 => string '13:00' (length=5)
       1 => 
         array (size=4)
           0 => string '15:30' (length=5)
           1 => string '16:00' (length=5)
           2 => string '16:30' (length=5)
           3 => string '17:00' (length=5)

I want to make 2 arrays with the same date, and it looks like this:

 0 =>
   'dates' => string '2021-10-20'
   'hours' => 
     array (size=1)
       0 => 
         array (size=12)
           0 => string '07:30' (length=5)
           1 => string '08:00' (length=5)
           2 => string '08:30' (length=5)
           3 => string '09:00' (length=5)
           4 => string '09:30' (length=5)
           5 => string '10:00' (length=5)
           6 => string '10:30' (length=5)
           7 => string '11:00' (length=5)
           8 => string '11:30' (length=5)
           9 => string '12:00' (length=5)
           10 => string '12:30' (length=5)
           11 => string '13:00' (length=5)
 1 =>
   'dates' => string '2021-10-20'
   'hours' => 
     array (size=1)
       0 => 
         array (size=4)
           0 => string '15:30' (length=5)
           1 => string '16:00' (length=5)
           2 => string '16:30' (length=5)
           3 => string '17:00' (length=5)

How to make this happen? and my code looks like this, i tried to add variable for dates but its not works. And sometimes just showing last arrays. Help me to split an array into 2 different arrays. Here is my code

if ($cekWaktuDosen4->num_rows == 0) {
    $timesDosen4[$i]['dates'] = $dates;
    $timesDosen4[$i]['hours'] = Array
    (
        (0) => Array
            (
                0 => '07:30',
                1 => '08:00',
                2 => '08:30',
                3 => '09:00',
                4 => '09:30',
                5 => '10:00',
                6 => '10:30',
                7 => '11:00',
                8 => '11:30',
                9 => '12:00',
                10 => '12:30',
                11 => '13:00',
                12 => '13:30',
                13 => '14:00',
                14 => '14:30',
                15 => '15:00',
                16 => '15:30',
                17 => '16:00',
                18 => '16:30',
                19 => '17:00'
            )
    );
}else {
    $y = 0;
    while ($k = $cekWaktuDosen4->fetch_object()) {
        $tglMulaiDosen4 = $carbon->create($carbon->parse($k->tanggal_mulai)->format('Y-m-d'));
        $tglSelesaiDosen4 = $carbon->create($carbon->parse($k->tanggal_selesai)->format('Y-m-d'));
        $tglBantuMulai4 = $tglMulaiDosen4->addHours(7)->addMinutes(30);
        $tglBantuSelesai4 = $tglSelesaiDosen4->addHours(17);
        if($tglBantuMulai4 < $k->tanggal_mulai) {
            $timesDosen4[$i]['dates'] = $tglMulaiDosen4->format('Y-m-d');
            $timesDosen4[$i]['hours'][$y] = create_time_range($tglBantuMulai4->format('H:i'), rounddown_timestamp($carbon->parse($k->tanggal_mulai)->format('H:i')));
            $y++;
            if($k->tanggal_selesai < $tglBantuSelesai4) {
                $timesDosen4[$i]['hours'][$y] = create_time_range(roundup_timestamp($carbon->parse($k->tanggal_selesai)->format('H:i')), $tglBantuSelesai4->format('H:i'));
            }
        }else if($tglBantuMulai4 == $k->tanggal_mulai && $tglBantuSelesai4 != $k->tanggal_selesai) {
            $timesDosen4[$i]['dates'] = $tglMulaiDosen4->format('Y-m-d');
            $timesDosen4[$i]['hours'][$y] = create_time_range(roundup_timestamp($carbon->parse($k->tanggal_selesai)->format('H:i')), $tglBantuSelesai4->format('H:i'));
        }
    }
}

Can I have any way (such as an API) to count the like and react on my post in my page and use that count to store in my database to use it?

I want to create a post in my website and post/share it in my Facebook page. This can be live/video/image etc. The amount likes and reaction my post get in Facebook will need to be fetched and stored in my post related database of my website.

• Is it somehow possible to do?
  
• If it is possible then what tools or guideline I need to follow?

Problem when play youtube vidéos on my website (payback id ) [closed]

I share some videos in my website from a channel on youtube ( with permissions from admin ) but since 3 weeks is not possible to read some videos but some working .. ( for these not working i get an payback id problem .. Someone can help me ? have a nice day

Any recommendations for a good page translator plugin?

I'm looking for a translator plugin for my website that is free, easy to install, effective and does not have a watermark. Please tell me if you know of any plugins that fit the description.

How to solve elementor plugging

My sir My website is automatically change when I am installing elementor plugging...my website automatically change civil construction company when I am installing elementor plugging... please resolve my problem

How do I target the folder I want to deploy my web JS app in with Azure Pipelines?

I am really new to Azure DevOps especially when it comes to YAML pipelines.

I am developing a website split between backend and frontend. The backend part is already developed and deployed on my linux server.

Now I want to deploy the frontend part (Vue JS) using YAML pipelines. The thing is I dont want the frontend part to be deployed in the same folder of the backend.

I know that the pipeline script "npm run build" creates a "dist" folder, so how can I force my azure pipelines to deploy the "dist" folder into a specific folder (let's say this specific folder is a subdirectory of "wwwroot" so it would be something like "wwwroot/subfolder/dist")

Thank you for all your help !

Python Scraping Web page

I tried to Scrap all the 'a' tag placeholder values from this sample link:https://www.fundoodata.com/companies-in/list-of-apparel-stores-companies-in-india-i239

What I need is I want to copy only the names of 'a' tag and need to save it to a csv file

I'm beginner can anyone help me out below is my wrong code:

# importing the modules
from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager
import pandas as pd
import time
import os


link = "https://www.fundoodata.com/companies-in/list-of-apparel-stores-companies-in-india-i239"




# instantiating empty lists
nameList = []


for i in range(1) :
    driver = webdriver.Chrome(ChromeDriverManager().install())

 
    # fetching all the store details
    storeDetails = driver.find_elements_by_class_name('search-result')
 

 
    # iterating the storeDetails
    for j in range(len(storeDetails)):
         
        # fetching the name, address and contact for each entry
        name = storeDetails[j].find_element_by_class_name('heading').text
    
         
        myList = []
         
        nameList.append(name)


    driver.close()
 
     
# initialize data of lists.
data = {'Company Name': nameList,}
 
# Create DataFrame
df = pd.DataFrame(data)
print(df)
 
# Save Data as .csv
df.to_csv("D:\xxx\xxx\xx\xxx\demo.csv", mode='w+', header = False)

Web-Automation: Save Data in database

I have the following issue:

I have this HTML Code:

            <tr class="_requirement odd">
            <td class="_unit">XXX <strong>9999</strong></td>
            <td class="_time">07:30 - 18:00</td>
            <td><span class='_photo' data-id='1234567'>Franz Wundschuh</span>, <span class='_photo' data-id='98765432'>Dieter Bohlen</span>
            </td>
            <td class="_location">Stall<br /></td>
        </tr>
        <tr class="_requirement even">
            <td class="_unit">YYY<strong>8888</strong></td>
            <td class="_time">08:00 - 18:00</td>
            <td><span class='_photo' data-id='3641'>Julia Schwarz</span>
            </td>
            <td class="_location">Haus<br /></td>
        </tr>
            <tr class="even">
                <td class="_note" colspan="4">Information</td>
            </tr>

Now the following task:

I want to store the information in a database. I need from the <tr> with class="_requirement odd" the information "XXX" in the first column, "9999" in the second column, in this case the 3rd column is empty.

Further I need from the <tr>`` with class="_requirement even"the information "YYY" in the first column, "8888" in the second column and in the 3rd column from the`` "information".

That means, whenever after a class="_requirement even" a <tr class="even">`` comes in the third column the value from the in it (In this case "Information". The same - if after a ```class="_requirement odd"``` comes a ```<tr class="odd"> in the third column the value from the <td> in it (In this case "Information".

If no "odd" or "even" comes after the requirements odd or even, the third column should be empty.

I can't get it together.

The following code for the first 2 columns I already have:

    for shift in driver.find_elements(By.TAG_NAME, 'tr'):
        shiftLine = []
        for field in shift.find_elements(By.TAG_NAME, 'td'):
            tdClass = field.get_attribute('class')
            if tdClass == '_unit':
                splitUnit = field.text.split()
                shiftLine.append(splitUnit[0])
                if len(splitUnit) == 2:
                    shiftLine.append(splitUnit[1])
                else:
                    shiftLine.append('')

FTP permission to ubuntu apache server

How do i directly upload to /var/www/html? how do i create a user that can upload files and folder directly to the /var/www/html?

i was unable to directly upload my website files to /var/www/html via a created user id. I had to update to user id documents folder and copied the folder to /var/www/html. thereafter running this command = sudo chown www-data /var/www/html/.. This will remove the uanble to a access resource error when i access the website.

however there is a /var/www/html/image folder that does not seem to effect by the command.

there has to be a more direct and easier method without compromising the security of the default apache folder.

I want to read data from cloudfirebase subcollection into HTML table in NodeJS

I want to fetch Subcollection from CloudFirestore.

Database Model is as follow

Users //It is a collection Student //It is a document Students// A subcollection with some documents(IDs) OqlDiQkN3MVoEfN9M0h06aFfO873 QayxOc1RMSPWH9Y8ns3bBL9iid63 Here is my Snippet of Code:

async function GetAllDataOnce(){ //Reference to Subcollection const studentsRef = doc(db,"Users","Student","Students","OqlDiQkN3MVoEfN9M0h06aFfO873"); const querySnapshot = await getDocs(collection(db,"studentsRef")); var _vehicles = []; querySnapshot.forEach(doc=>{ _vehicles.push(doc.data()); }); AddAllItemsToTable(_vehicles);
} Through this function, I want to display all my data in the HTML Table. Yet my table is getting no value.

How to create a shortcut key for a specific button on a WEBPAGE

I am using this extension but I am having trouble finding out what to use in the 'Javascript code' box and how to associate it with clicking on a specific button... Please help me with this and also give an example if you could. Thanks in advance

How did Replit embed a terminal into their website?

I was amazed by how replit embedded a bash terminal into their website, So I'm asking how they did it? NOTE: I do want to do this in static HTML with CSS and JavaScript.

laravel docker docker-compose asset not found

I run laravel with docker-compose file.

If I don't use volume , laravel can't get asset and css

If I use a volume, laravel can get any asset folders and css too.

But if my teammate use a volume, all source codes become root instead of www.
So 500 error happens.
The docker file should be run as root first, become www before CMD.

How can I fix this?

FROM php:8.0-fpm

# Set working directory
WORKDIR /var/www

# Add docker php ext repo
ADD https://github.com/mlocati/docker-php-extension-    installer/releases/latest/download/install-php-extensions /usr/local/bin/

# Install php extensions
RUN chmod +x /usr/local/bin/install-php-extensions && sync && \
    install-php-extensions mbstring pdo_mysql zip exif pcntl gd memcached

# Install dependencies
RUN apt-get update && apt-get install -y \
build-essential \
libpng-dev \
libjpeg62-turbo-dev \
libfreetype6-dev \
locales \
zip \
jpegoptim optipng pngquant gifsicle \
unzip \
git \
curl \
lua-zlib-dev \
libmemcached-dev \
nginx


RUN mkdir -p /usr/src/php/ext/redis \
    && curl -L https://github.com/phpredis/phpredis/archive/5.3.4.tar.gz | tar xvz -C     /usr/src/php/ext/redis --strip 1 \
    && echo 'redis' >> /usr/src/php-available-exts \
    && docker-php-ext-install redis

# Install supervisor
RUN apt-get install -y supervisor

# Install composer
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --    filename=composer

# Clear cache
RUN apt-get clean && rm -rf /var/lib/apt/lists/*

# Add user for laravel application
RUN groupadd -g 1000 www
RUN useradd -u 1000 -ms /bin/bash -g www www


# PHP Error Log Files
# RUN mkdir /var/log/php
# RUN touch /var/log/php/errors.log && chmod 777 /var/log/php/errors.log

# Deployment steps
#RUN composer install --optimize-autoloader --no-dev

# Copy nginx/php/supervisor configs
COPY ./config/supervisord/conf.d/supervisor.conf /etc/supervisord.conf

# Copy config
COPY ./config/php/local.ini /usr/local/etc/php/conf.d/local.ini

RUN chown www:www /var/www
COPY --chown=www:www . /var/www/

# add root to www group
RUN chmod -R ug+w /var/www/storage

RUN ["chmod", "+x", "./start_script.sh"]

EXPOSE 9000

RUN chmod -R 775 /var/www/storage
USER www

# Run php-fpm
CMD ["./start_script.sh"]

docker-compose.yml

version: "3"
services:
  app:
    build:
      context: .
      dockerfile: ./docker/php-fpm/Dockerfile_php8
    image: docker/laravel
    container_name: app
    tty: true
    restart: unless-stopped
    environment: 
      DB_HOST: db
      DB_PASSWORD: password
      SESSION_DRIVER: redis
      REDIS_HOST: redis
    volumes: 
      - ./:/var/www
      - ./config/php/local.ini:/usr/local/etc/php/conf.d/local.ini
    depends_on:
      - db

  webserver:
    build:
      context: .
      dockerfile: ./docker/nginx/Dockerfile
    image: docker/nginx
    container_name: webserver
    restart: unless-stopped
    ports: 
      - "8080:80"
    volumes: 
      - ./:/var/www
      - ./config/nginx/conf.d/:/etc/nginx/conf.d/
    depends_on: 
      - app

  db:
    image: mysql:5.7
    container_name: db
    environment: 
      MYSQL_DATABASE: laravel
      MYSQL_ROOT_PASSWORD: password
    tty: true
    ports:
      - "3306:3306"
    volumes:
      - dbdata:/var/lib/mysql
  redis:
    image: redis:latest
    container_name: redis

volumes:
  dbdata:
    driver: local

HOW TO HOST MY FULL REACT APPLICATION USING FTP CLIENT IN NAMECHEAP? [closed]

Only homepage is available by hosting with cPanel.I want to host my full react application with routing or navigation enabled using FTP client how to do it with cPanel or Filezilla or provide any youtube reference link.It doesn't have any backend.

HTML javascript, dragging method in canvas

so i made a bunch of squares grids using html canvas. I am implementing the drag mechanism, and i only want to allow user to drag in rectangle shape. right now, depending how user drag, they can make an another shape as shown in below. And this is a side questions, i am making a very large grid using html canvas and its little laggy, any tips for that ?

Here are my code of html and javascript

function getSquare(canvas, evt) {

    var rect = canvas.getBoundingClientRect();
    return {
        x: 1 + (evt.clientX - rect.left) - (evt.clientX - rect.left)%10,
        y: 1 + (evt.clientY - rect.top) - (evt.clientY - rect.top)%10
    };
}


function emptySquare(context) {
    context.rect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "#ffffff"
    context.fill();
    context.strokeStyle = "#ddd";
    context.stroke();
}
function range(start, end) {
    var ans = [];
    if (end > start) {
        for (let i = start; i <= end; i += 10) {
            ans.push(i);
        }
    } else {
        emptySquare(context);
        for (let i = start; i >= end; i -= 10) {
            ans.push(i);
    }}
    return ans;
}
function drawBoard(context) {
    for (var x = 0.5; x < 20001; x += 10) {
      context.moveTo(x, 0);
      context.lineTo(x,20000);
    }

    for (var y = 0.5; y < 20001; y += 10) {
      context.moveTo(0, y);
      context.lineTo(20000, y);
    }

    context.strokeStyle = "#ddd";
    context.stroke();
}

function fillSquare(context, x, y){
    context.fillStyle = "#70B7B5";
    context.fillRect(x,y,9,9);
}

var canvas = document.getElementById('myBoard');
var context = canvas.getContext('2d');
var A;
drawBoard(context);
var isDrag= false;
// drawBoard(context);


canvas.addEventListener('mousedown', function(evt) {
    var mousePos = getSquare(canvas, evt);
    isDrag=true;
    fillSquare(context, mousePos.x, mousePos.y);
    
    previousPos = mousePos;


}, false);

 
canvas.addEventListener('mousemove', function(evt) {
    if (isDrag) {
        
        var mousePos = getSquare(canvas, evt);
        var x_dist = range(previousPos.x, mousePos.x);
        var y_dist = range(previousPos.y, mousePos.y);
        
        for (x in x_dist) {
            for (y in y_dist) {
                fillSquare(context, x_dist[x], y_dist[y]);
                }
            }
    }
}, false);

canvas.addEventListener('mouseup', function(evt) {
    if (isDrag){
        isDrag = false;
    } 

}, false);

// const p = context.lineWidth / 2; //padding
//       const x =  30;
//       const y =  30;
//       const img = new Image();
//       img.src = `snsd.jpg`;
      // img.onload = function() {
      //   A = context.drawImage(img, 0, 0,200,200);
      //   context.strokeRect(0, 0, 200, 200);
      // };

      // img2 = new Image();
      // img2.src = `ive.jpg`;
      // img2.onload = function() {
      //   A = context.drawImage(img2, 200, 200,200,200);
      // };

      // img3 = new Image();
      // img3.src = `twice.jpg`;
      // img3.onload = function() {
      //   A = context.drawImage(img3, 0, 200,200,200);
      // };

      // img4 = new Image();
      // img4.src = `blackpink.jpg`;
      // img4.onload = function() {
      //   A = context.drawImage(img4, 200, 0,200,200);
      // };
      // img5 = new Image();
      // img5.src = `promis9.jpg`;
      // img5.onload = function() {
      //   A = context.drawImage(img5, 400, 0,400,400);
      // };



  // for (let xCell = 0; xCell < 10; xCell++) {
  //   for (let yCell = 0; yCell < 10; yCell++) {
  //     const x = xCell * 30;
  //     const y = yCell * 30;
  //     const img = new Image();
  //     img.onload = function() {
  //       context.drawImage(img, x+p, y+p, 60-p*2, 60-p*2);
  //     };
  //     img.src = `https://dummyimage.com/60x60/000/fff&text=${xCell},${yCell}`;
  //   }
  // }

var canvas = document.getElementById('myBoard');
var context = canvas.getContext('2d');

// drawBoard(context);

var isDrag=false;

canvas.addEventListener('mousedown', function(evt) {
    var mousePos = getSquare(canvas, evt);
    isDrag=true;
    fillSquare(context, mousePos.x, mousePos.y);
    
    previousPos = mousePos;


}, false);

 
canvas.addEventListener('mousemove', function(evt) {
    if (isDrag) {
        
        var mousePos = getSquare(canvas, evt);
        var x_dist = range(previousPos.x, mousePos.x);
        var y_dist = range(previousPos.y, mousePos.y);
        
        for (x in x_dist) {
            for (y in y_dist) {
                fillSquare(context, x_dist[x], y_dist[y]);
                }
            }
    }
}, false);

canvas.addEventListener('mouseup', function(evt) {
    if (isDrag){
        isDrag = false;
    } 

}, false);

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="./assets/css/style.css">


    
    <meta charset="utf-8">
</head>

<body>


<!-- <div class='container'>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </div>
    </div>
  </div>
 -->  
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
      <a class="navbar-brand" href="index.html">t</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-link" aria-current="page" href="index.html">Home</a>
            <a class="nav-link" href="#">About Us</a>
            <a class="nav-link" href="Myblock.html">Mk</a>
        </div>
        <div class="navbar-nav ms-auto mb-2 mb-lg-0">
          <a class="nav-link" href="login.html">Login</a>
        </div>
      </div>
   </div>
  </nav>
<div>

            <div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">간판 구입</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                    <form action="" method="POST" enctype="multipart/form-data">
                      <div class="container">
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                         
                              <div class="preview-zone hidden">
                                <div class="box box-solid">
                                  <div class="box-header with-border">
                                    <div><b>미리보기</b></div>
  <!--                                   <div class="box-tools pull-right">
                                      <button type="button" class="btn btn-danger btn-xs remove-preview">
                                        <i class="fa fa-times"></i> 초기화
                                      </button>
                                    </div> -->
                                  </div>
                                  <div class="box-body"></div>
                                </div>
                              </div>
                              <div class="dropzone-wrapper">
                                <div class="dropzone-desc">
                                  <i class="glyphicon glyphicon-download-alt"></i>
                                  <p>광고 이미지 선택 or 드래그해 옮겨 오세요.</p>
                                </div>
                                <input type="file" name="img_logo" class="dropzone">
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">닉네임/이름</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="닉네임/이름">
                            <label for="exampleInputEmail1">연락처</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="핸드폰 번호">
                            <label for="exampleInputEmail1">구매희망 면적</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="ex) 10 x 10 OR 100x100 ">
                        </div>
                    </form>
                

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
                <button type="submit" class="btn btn-dark">적용하기</button>
              </div>
            </div>
          </div>
        </div>
        <div>
        <canvas id="myBoard" width="1440" height="1200"></canvas>
      </div>


  </hr>

  <footer>
          <p>© 2021 Nune Project</p>
  </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="./assets/js/mainBoard.js"></script>
    <script type="text/javascript" src="./assets/js/drag_field.js"></script>
</body>

Is hosting a webflow project through another hosting site less efficient? [closed]

I'm currently building my first webflow project for a client which has a very tight budget so I thought it might save me some time (It's a basic single page site). As I'm unfamilair with webflow I was wondering if it matters if it's hosted through their service ($24 NZD) or to use onlydomains plan which is only $5 NZD with 30GB of webspace? I was also thinking of ease of access, and was hoping hosting a webflow project elsewhere wouldn't be too difficult to launch.

subfolder is redirected to main folder and i don't want that to happen

I have a standard Webspace with folders. There is a Website in the Main folder and there is another website in a subfolder. When i open the domain which is directly directed to the subdomain website it gets redirected to the main folder website. How can i stop this from happening?

btw. this are all Flutter websites lg

i have a problem in my landing page in css

I am facing a problem in the CSS specifically when I add the background of an image to the landing page, the background becomes white, although I checked the path of the image and did not put any color with it. Can you help me, please?enter image description here

Require.js module(node-fetch) load for contex error

I'm making a website and I'm struggling with Require.js. I want to require node-fetch package:

const fetch = require('node-fetch');

// Getting avatar of random discord user
const token = process.env.TOKEN;

async function fetchit() {
  const response = await fetch(`https://discord.com/api/v9/users/410902667318001684`, {
    headers: {
      Authorization: `Bot ${token}`
    }
  })
  if (!response.ok) throw new Error(`Error status code: ${response.status}`)
  else{
   let obj = await response.json()
   console.log(obj.avatar)
  }
  
}
fetchit()

and I get this error:

Error: Module name "node-fetch" has not been loaded yet for context: _. Use require([])
https://requirejs.org/docs/errors.html#notloaded

I tried using const fetch = require(['node-fetch']), but I got another error:

Error: Script error for "node-fetch"
https://requirejs.org/docs/errors.html#scripterror

This is my HTML script tag: <script data-main="script.js" src="require.js">

How can I fix this and get it working?

I use node-fetch@2.6.6

Converting .HEIC to JPG using imagick in C#

I am using MagicImage to convert heic to jpg, but for some reason it does not work. My UpdateClientFile method saving pictures that were sent here. So I need help to figure out what I am doing wrong. So I already implemented MagicImage code in my method.

private void UpdateClientFile(ClientFileType type, FileData newFile, int clientId, string fileName)
{


    using (MagickImage image = new MagickImage(fileName))
    {
        string newFile12 = fileName.Replace(Path.GetExtension(fileName), ".jpg");
        image.Write(newFile12);
    }
    Console.WriteLine("Processed file '{0}'.", fileName);

    var currentFiles = 
        _clientFileService.Value.GetFilesByClient(clientId).Where(x => x.ClientFileType == type).Select(x => x.Id).ToList();

    _clientFileService.Value.MultipleDelete(currentFiles, null);

    _clientFileService
        .Value
        .AddFile(
        new ClientFile
        {
            ClientId = clientId,
            ClientFileType = type,
            ContentType = newFile.ContentType,
            Data = newFile.Data,
            FileName = fileName,
            DateChanged = DateTime.Now,
            Guid = Guid.NewGuid()
        });

}

How to creating multiple Sitemaps in PHP in this code

i have following problem, i generated the urls for the sitemap after url 50K this code wont make new sitemap like sitemap2.xml or sitemap3.xml

header('Content-type: application/xml; charset="ISO-8859-1"', true);
$dataAll1 = scandir('cache-data');
unset($dataAll1[0]);
unset($dataAll1[1]);
unset($dataAll1[2]);
$sitemap = '<?xml version="1.0" encoding="UTF-8"?>
           <urlset xmlns="'.PROTOCOL.'://www.sitemaps.org/schemas/sitemap/0.9">';

$sitemap .= '<url>
                        <loc>' . SITE_HOST . '</loc>
                        <priority>1.0</priority>
                     </url>';

foreach($dataAll1 as $val){
    $data = json_decode(file_get_contents('cache-data/'.$val),1);
    if($val=='index.php'){
        continue;
    }
    $sitemap .= '<url>
                   <loc>'.SITE_HOST . '/blog/' . $data['jk'].'jktk'.$data['tk'] . '-' . $service->slugify($data['title']).'</loc>
                        <priority>0.9</priority>
                        <changefreq>daily</changefreq>
                     </url>';
}

$sitemap.='</urlset>';
echo $sitemap;

how to write the correct code for the code above so that you can create a new sitemap after reaching 50K urls?

all help is very valuable

how to upload a file in localhost web server, and get the file path

I've deployed a web localhost, http://localhost:8080 and I included the following code to take a upload file.

    <form action="/action_page.php">
      <input type="file" id="myFile" name="filename">
      <input type="submit">
    </form>

I am trying to read file name and file path in the local web server in my javascript code. How can I get those two?

How To Learn Web Development As A Student? [closed]

I AM A COLLEGE STUDENT OF FIRST YEAR I WANT TO LEARN WEB DEVELOPMENT SO I WANT TO LEARN WEB DEVELOPMENT SKILLS QUICKLY SO HOW I LEARN WEB DEVELOPMENT.

How I can link my python code into my Website? [closed]

I have a python code which is a data science project which take input and give some output. My query is that I want to build a website in which have a input field which take input. this input value passed to the python code and the output comes from python code will display to the website. How I can build website and link my python code with website. so the given problem solved. Please help me detailed solution how it can be done.

"how dose the eclips rap genarated the html code" [closed]

I have a project web ( Eclipse RAP) ,And I want to know how can be generated the code to HTML how showing it on browser .

Problem with uploading and downloading files [closed]

I made a php on the website, there is an option to import files on the website, when I mention the normal opening of the pdf from my computer, it will buy a cheat site, I open it, look in the backpack, there is a file, I open the database, paste the file name is normal, but when I download from the website the back file writes that it can not save the back pdf file For your experience, the file in the cheat panel worked fine dragged to work properly file name is index.php: all codes in GitHub

https://github.com/vamkrtch/site.git: [1]: https://i.stack.imgur.com/3s4de.png [2]: https://i.stack.imgur.com/GMK9v.png

How to show only image on the url not other content even html?

I wan't to know "How to show only image on the url not other content even html?". Like see this url link of Image. This url only shows image not any other content on webpage and also see the url of website it's dynamic url not a specific image url.

So, how to achieve that?

I want to make website but i not want to add all folders for every new article, [closed]

Like on wordpress there is no folders for article we upload, also like Flipkart website for delivery service use like ekart.com/shipment track/hdhdhd They not use any post or get method in link, they just used, I also see this in someother websites also, for APIs website also, I only want to use php,html,js,css so please give solution in only these, a humble request

Odoo. Restrict user access to edit only one website

Odoo15

In my Odoo instance I have two companies A and B. Company A has website A

Company B has website B

In my system I have user who is worker of company B. He wants to edit website B. He is internal user.

Now he can edit website B. Great. The problem is that this user has also access to website A. I want to restrict this user access only to website B. How to do this?

Application error after deploying python script on Heroku [closed]

I have scrape a website using BeautifulSoup and trying to deploy it on heroku. And I have successfully deployed my app on heroku. But it creates the error.

When i push my app on heroku it gives me two links..

First is https://app_name.herokuapp.com/ When i go to this link i faced the error.

Application error An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command heroku logs --tail

When I tried heroku logs --tail it gives me h14 error which is No web dynos running. I have tried to run my dynos from resources of app but there is no dyno and not any option. I have tried much more commands for changing but nothig is worked for me....

Second is https://git.heroku.com/app_name.git. It gives me the "Method Not Found" error.

After the first error I set my GitHub username. Set GITHUB_USERNAME config var

My Build Pack is Heroku/python. So I am confused what should I do and which error should I solve and what's the exactly problem is.

why my contact form is working on localhost but not working when uploaded online(web host)?

My contact form is working absolutely fine on localhost, but when I am uploading the code to the web(I am using Bluehost as my host) my code is not working. This is a part of my code in server.js:

const { text } = require('express');
const express = require('express');
const app = express();

require('dotenv').config(); //{path: 'custom/path/.env'}
const nodemailer = require("nodemailer");
const PORT = process.env.PORT || 9000;

//Middleware 
app.use(express.static('public_html'));
app.use(express.json())

app.get('/', (req, res)=>{
    res.sendFile(__dirname + '/public_html/ContactUs.html')
    res.sendFile(__dirname + '/public_html/index.html')
})

app.post('/', (req, res)=> {
    console.log(req.body)

    const transporter = nodemailer.createTransport({
        service: 'gmail',
        auth: {
            user: 'abc@yahoo.com',
            pass: '1234'
        }
    })
    
    const mailOptions = {
        from: req.body.email,
        to: 'abc@yahoo.com',
        subject: `Message from: ${req.body.firstname} ${req.body.lastname}`,
        text: `Name: ${req.body.firstname} ${req.body.lastname}\nEmail: ${req.body.email}\nPhone: ${req.body.phone}\n\nMessage: ${req.body.message}`
    }

    transporter.sendMail(mailOptions, (error, info) =>{
        if(error){
            console.log("error")
            res.send('error')
        } else {
            if (req.body.email === "" || req.body.firstname === "" || req.body.message === "") {
                console.log("Email, name, and message field is required!")
                res.send('Email, name, and message field is required!')
            } else if (validateEmail(req.body.email) == false){
                console.log("Enter a valid email")
                res.send('Enter a valid email')
            } else {
                console.log('Email sent:' + info.response)
                res.send('success')
            }
        }
    })
})

app.listen(PORT, ()=>{
    console.log(`Server running on port ${PORT}`)
})

function validateEmail(email) {
    var re = /\S+@\S+\.\S+/;
    return re.test(email);
}

here is my ContactUs.html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/contact.css">
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
    <!-- contact form -->
    <div class="contact-section">
        <div class="contact-wrapper">
            <div class="contact-title">Send us a Message</div>
            <form class="contact-form">
                <div class="dbl-inputs">
                  <div class="field">
                    <input type="text" id="firstname" name="firstname" placeholder="Enter your first name">
                    <i class='fas fa-user'></i>
                  </div>
                  <div class="field">
                    <input type="text" id="lastname" name="lastname" placeholder="Enter your last name">
                    <i class='fas fa-user'></i>
                  </div>
                </div>

                <div class="dbl-inputs">
                  <div class="field">
                    <input type="text" id="phone" name="phone" placeholder="Enter your phone">
                    <i class='fas fa-phone-alt'></i>
                  </div>
                  <div class="field">
                    <input type="text" id="email" name="email" placeholder="Enter your email">
                    <i class='fas fa-envelope'></i>
                  </div>
                </div>

                <div class="message">
                  <textarea placeholder="Write your message" name="message" id="message"></textarea>
                  <i class="fas fa-comment-alt"></i>
                </div>

                <div class="button-area">
                  <button type="submit">Send Message</button>
                  <span>Sending your message...</span>
                </div>

            </form>
        </div>
    </div>
    <script src="js/app1.js"></script>
</body>
</html>

I don't know what is going wrong. Let me know if you need more code to figure out the problem. Thanks in advance!

Wrong file is being hosted on my website hosted on hostgator

I am new to hosting websites and just yesterday i tried to host a simple html file on hostgator by just putting my index.html file in public_html directory. But whenever i check the website, its not showing some other html file. I think it is some default page set by hostgator. Can anyone tell me how to resolve this issue? My website is https://kingflynft.in Right now my index.html only contains a simple "hello world" text.

enter image description here

Uncaught PDOException: SQLSTATE[HY093]: Invalid parameter number: number of bound variables does not match number of tokens

I am new to php .I have checked values so many time, they are same in database too . I am getting this error: Fatal error: Uncaught PDOException: SQLSTATE[HY093]: Invalid parameter number: number of bound variables does not match number of tokens in C:\xampp\htdocs\sms\createAboutTest.php:26 Stack trace: #0 C:\xampp\htdocs\sms\createAboutTest.php(26): PDOStatement->execute() #1 {main} thrown in C:\xampp\htdocs\sms\createAboutTest.php on line 26 I don't know what's wrong with my code :( . thankyou for your help in advance:

$pdo = new PDO('mysql:host=localhost;port=3306;dbname=testconductingportal', 'root', '');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$t_id = $_POST['t_id'];
$t_name= $_POST['t_name'];
$ins_name = $_POST['ins_name'];
$t_date = $_POST['t_date'];
$t_time = $_POST['t_time'];
$t_duration= $_POST['t_duration'];
$t_fee = $_POST['t_fee'];
$t_savedate = $_POST['t_savedate'];
$t_closing_date  = $_POST['t_closing_date'];
$t_description = $_POST['t_description'];
$statement= $pdo->prepare("INSERT INTO about_test (t_id, t_name, ins_name, t_date, t_time, t_duration, t_fee, t_savedate, t_closing_date, t_description)
VALUES(:t_id, :t_name, :ins_name, :t_date, :t_time, :t_duration, :t_fee, :t_savedate, :t_closing_date', :t_description')");
$statement->bindvalue(':t_id', $t_id);
$statement->bindvalue(':t_name', $t_name);
$statement->bindvalue(':ins_name', $ins_name);
$statement->bindvalue(':t_date', $t_date);
$statement->bindvalue(':t_time', $t_time);
$statement->bindvalue(':t_duration', $t_duration);
$statement->bindvalue(':t_fee', $t_fee);
$statement->bindvalue(':t_savedate', $t_savedate);
$statement->bindvalue(':t_closing_date', $t_closing_date);
$statement->bindvalue(':t_description', $t_description);
$statement->execute();
?>

not desired output in web scraping in bs4

I am scraping an product information. But I scrape its price it doesn't give me proper output. There is no error but not the desired output.

And also it produce error while finding the category of a product. Here is my code.

import requests
from bs4 import BeautifulSoup as bs
import pandas

url='https://shop.eziline.com/product/uncategorized/umrah-management-system/'
r=requests.get(url)
soup=bs(r.content,'html.parser')

name=soup.find(class_='product_title entry-title').text.strip()
print(name)
price=soup.find('span',class_='woocommerce-Price-amount amount').text.strip()
print(price)
detail=soup.find(class_='woo-product-details_short-description').text.strip()
print(detail)
category=soup.find('cats-link a').text.strip()
print(category)

Debugging CS0103 Error in Visual Studio code

Hi i am creating a dropdown list and inserting values programmatically from the code behind, however i am repeatedly getting the error CS0103. However my program and web page is running completely fine, but it is just bothering me and was wondering if there exist a way to suppress those error messages or maybe i am missing something.

Error: CS0103 The name 'ddlzip' does not exist in the current context

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace bse20bftmoviestore.tutorials.week3
{
    public partial class formSample : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)//When page is loaded everytime
        {
  
            txtFname.Focus();
            
            if (!Page.IsPostBack)//When page is first loaded
            {
                //Code behind to create items in the dropdown
                ListItem li1 = new ListItem("Select zip code", "-1");
                ListItem li2 = new ListItem("1111", "1");
                ListItem li3 = new ListItem("2222", "2");
                ListItem li4 = new ListItem("3333", "3");
                ddlzip.Items.Add(li1);
                ddlzip.Items.Add(li2);
                ddlzip.Items.Add(li3);
                ddlzip.Items.Add(li4);

            }
        }
    }
}

My dropdown list in the web form:

<!--zip code title and dropdown list (programmatically defined)-->
                <div class="form-group row justify-content-center">
                   <asp:Label runat="server" CssClass="col-md-2 col-form-label">Zip Code</asp:Label>
                      <div class="col-md-8">
                          <asp:DropDownList ID="ddlzip" CssClass="form-control" runat="server"></asp:DropDownList>
                      </div>
                </div>
<!--End of zip code title and dropdown list (programmatically defined)-->

Error: CS0103 The name 'ddlzip' does not exist in the current context

Unity - web request only works on localhost

I use Unity webRequest to fetch mjpeg stream from server. But it only works on localhost. If I move the server to another machine in the same LAN. Unity response connection refused.

The script is below. If the url is http://locahost:7777/img it's fine. I've also try http://127.0.0.1:7777/img and http://192.168.0.2:7777/img (localhost IP) all of them work fine. But when I host the server on another machine http://192.168.0.7:7777/img it fail.

var webRequest = WebRequest.Create("http://192.168.0.4:7777/img");
    webRequest.Method = "GET";
    List<byte> frameBuffer = new List<byte>();

    int lastByte = 0x00;
    bool addToBuffer = false;

    BufferedStream buffer = null;
    try
    {
      Stream stream = webRequest.GetResponse().GetResponseStream();
      buffer = new BufferedStream(stream);
      trackedBuffers.Add(buffer);
    }
    catch (System.Exception ex)
    {
      Debug.LogError(ex);
    }

I've use HTML to test and all of them works great.

<html>

<body>
  <img src="http://localhost:7777/img">
  <img src="http://192.168.0.2:7777/img">
  <img src="http://192.168.0.4:7777/img">
  </img>
</body>

</html>

VS Code downloads don't work in Russia now (Dom.ru provider)

Seems my government (or the internet provider) did something stupid again, so now i have to use vpn/proxy to download VS Code :D az764295.vo.msecnd.net - my browser & package manager (AUR) say "timed out". Downloads from the official website don't work either.

How to Optimize web server

I have a dedicated server for my websites. Sometimes when my website has too much visitor that time my website either crash or loads very slowly. I am using Wordpress CMS I am also using wp rocket plugin cache. I am using fastpanel in PHP 7.4 FPM version. How can i optimize everything??

How can i use python file on my website with openserver

When i trying to open it via browser just showing a code but do not execute scripts. (I was changing cgi-scripts in Apache server config but its only brought to error 500)

Best strategy for link analytics

I have a blog with multiple pages. At the end of each article there’s a “Donation button”. Here’s my questions:

• What’s the best strategy to monitor the number of clicks sorted per article?
• How do I know the pages that resulted with the largest conversions?

I’d like not to use Google Analytics for privacy concerns but I am open to use tools like Plausible (or other open source projects). Plus, I have access to a VPS, so I can use that for some sort of backend.

I apologize if the question has been asked already (searched the site but did not find an answer... probably not using the correct terminology?)

Thanks for your help

Play streaming RTMP video with clappr is blocked by CORS

I am trying to play streaming video on HTML using clappr, but whet trying to load the stream through rtmp the browser, (any browser), shows this error:

Access to video at 'rtmp://my.domain.com/vod/mp4:360_bridge.mp4' from origin 'https://my.domain.com' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

I understand that the CORS policy blocks the rtmp because is a different port (1935) than the one on the web (443) even when the resource is in the same server.

Also, reading the error, I understand that it does not matter that my server is returning Access-Control-Allow-Origin *, (I know it's not the best practice), the browser will prevent the resource from loading because rtmp is not among the supported protocols.

Why am I using clappr? Because the stream I'm trying to play is a 360 video, and clapper is a pretty easy way to play 360 video on the web.

The version of clappr is 0.3.13. My server is an Ubuntu 20.04 with Apache 2.4.41.

Clappr-video360 plugin Clappr V0.3.13 download

My code is actually simple:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8">
    <title>CLappr video</title>
</head>
<body>
    <div id="player"></div>

    <script src="../../public/assets/js/clappr.js"></script>
    <script src="../../public/assets/js/clappr-video360.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/video-dev/clappr-rtmp-plugin@latest/dist/rtmp.min.js"></script>

    <script>
        var video = 'rtmp://my.domain.com/vod/mp4:360_bridge.mp4'

        var PlayerInstance = new Clappr.Player({
            source: video,
            plugins: {
                container: [Video360],
                'playback': [RTMP]
            },
            parentId: '#player',
        })

        PlayerInstance.getPlugin('click_to_pause').disable();
    </script>
</body>

I have been researching a lot, tested with different browsers, tried disabling the cors policy in Chrome and Opera, but cannot find a solution even for my testing.

How can I do to stop this error to happen? Do you know any other tool to play streaming 360 video on HTML5?

I would be really thankful for any help or suggestion.

Bootstrap dropdown menu is not working[HTML]

i download bootstrap and added the scripts in my code, but don't know why. Everythig works fine, no error in console ,but a drop-down menu is not working ... what is the problem?

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="text/javascript" href="./assets/js/bootstrap.min.js">
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/style.css">

    
    <meta charset="utf-8">
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

My website title has a number in Google search and also on the website title

Can anyone try and point me out why my website title is showing a number before the text. This appears also in the search results on google.

What's is the cookies? [closed]

What's is the cookies? And what's its benefits? And me as web dev how to use it? like I always see it on a lot of sites and I heard about it in lectures.

Buna! Trebuie sa fac o pagina web pt un Magazin de Antichitati si nu reusesc sa fac cum mi se spune in cerinta.Imi poate explica cineva? [closed]

la mijlocul paginii, titlul Antichitati, cu font-ul Tahoma de 52px. El va trebui să aibă atributul id cu valoarea titlu. Sub acest titlu vrei să adaugi 3 imagini una sub alta, care să conțină 3 obiecte antice diferite: un ceas, o busolă și o hartă. Vrei ca aceste 3 imagini să fie de aceleași dimensiuni, așa că te-ai gândit să le faci pe toate de dimensiunea 300px lățime și 200px înălțime.

Fiecare imagine va trebui să aibă atributul id cu valoarea corespunzătoare fiecăreia: ceas, busola respectiv harta.

Acum, sub fiecare dintre cele 3 imagini vrei să ai prețul obiectului. Fiecare preț trebuie să aibă atributul class cu valoarea preturi și să fie aliniat în partea dreaptă a paginii.

Toate cele 3 imagini, alături de prețurile obiectelor, vor trebui incluse într-un singur tag div care să aibă atributul id cu valoarea imagini, iar acest div trebuie să aibă ca și fundal culoarea #66ccff.

Toate prețurile obiectelor vor fi în euro, așa că la finalul paginii vrei să adaugi un text Transformare euro in lei, iar atunci când dai click pe el va trebui să se deschidă un tab nou cu o pagină care face conversia din euro în lei. Acest text va trebui să aibă atributul id cu valoarea transformare și să nu fie inclus în tag-ul div.

D3 js How to get plain text in label at X axis and make value scaleLog

Hi i figured out how to add log labels at Y axis axis but cant make chart line scale log, and i dont really know how to make X axis labels plain text instead of converting it to date

If i just change scaleLinear to scaleLog chart line dissapear

Also removing const parseTime = d3.timeParse('%Y/%m/%d'); and change parseTime(val.date) just to val.date, and changing scaleTime to scaleOrdinal does not work as i would

Also i don't understand why Y axis labels are so blured

Sorry for asking but cant findout how this pluggin works. using D3 7.2.1 and JQ 3.5.1

(function (d3){
        const lineChartData = [
        {
            currency: "data",
            values: [
            {
                date: "2018/01/01",
                close: 0
            },
            {
                date: "2018/02/01",
                close: 5
            },
            {
                date: "2018/03/01",
                close: 10 
            },
            {
                date: "2018/04/01",
                close: 50 
            },
            {
                date: "2018/05/01",
                close: 100 
            },
            {
                date: "2018/06/01",
                close: 500 
            },
            {
                date: "2018/07/01",
                close: 1000 
            },
            {
                date: "2018/08/01",
                close: 5000 
            },
            {
                date: "2018/09/01",
                close: 10000 
            },
            ]
        }
        ];
    
        const margin = {
        top: 20,
        bottom: 20,
        left: 50,
        right: 20
        };
    
        const width = 400 - margin.left - margin.right;
        const height = 300 - margin.top - margin.bottom;
        
        const createGradient = select => {
        const gradient = select
            .select('defs')
            .append('linearGradient')
                .attr('id', 'gradient')
                .attr('x1', '0%')
                .attr('y1', '100%')
                .attr('x2', '0%')
                .attr('y2', '0%');

        gradient
                .append('stop')
                .attr('offset', '0%')
                .attr('style', 'stop-color:#FF6500; stop-opacity:0');

        gradient
            .append('stop')
            .attr('offset', '100%')
            .attr('style', 'stop-color:#FF6500; stop-opacity: 1');
        }
        
        const createGlowFilter = select => {
        const filter = select
            .select('defs')
            .append('filter')
                .attr('id', 'glow')
    
        //stdDeviation is px count for make blur around main chart line
        filter
            .append('feGaussianBlur')
            .attr('stdDeviation', '0')
            .attr('result', 'coloredBlur');
        
        const femerge = filter
            .append('feMerge');
        
        femerge
            .append('feMergeNode')
            .attr('in', 'coloredBlur');
        femerge
            .append('feMergeNode')
            .attr('in', 'SourceGraphic');
        }
    
        const svg = d3.select('#line-chart')
        .append('svg')
            .attr('width', 700 + margin.left + margin.right)
            .attr('height', 300 + margin.top + margin.bottom)
        .append('g')
            .attr('transform', `translate(${margin.left}, ${margin.top})`);
        
        svg.append('defs');
        svg.call(createGradient);
        svg.call(createGlowFilter);
    
        const parseTime = d3.timeParse('%Y/%m/%d');
        
        const parsedData = lineChartData.map(company => ({
        ticker: company.ticker,
        values: company.values.map(val => ({
            close: val.close,
            date: parseTime(val.date)
        }))
        }));
    
        const xScale = d3.scaleTime()
        .domain([
            d3.min(parsedData, d => d3.min(d.values, v => v.date)),
            d3.max(parsedData, d => d3.max(d.values, v => v.date))
        ])
        .range([0, width]);

        const yScale = d3.scaleLinear()
        .domain([
            d3.min(parsedData, d => d3.min(d.values, v => v.close)),
            d3.max(parsedData, d => d3.max(d.values, v => v.close))
        ])
        .range([height, 0]);
        
        const line = d3.line()
        .x(d => xScale(d.date))
        .y(d => yScale(d.close))
        .curve(d3.curveCatmullRom.alpha(0.5));
        
        svg.selectAll('.line')
        .data(parsedData)
        .enter()
        .append('path')
            .attr('d', d => {
            const lineValues = line(d.values).slice(1);
            const splitedValues = lineValues.split(',');
        
            return `M0,${height},${lineValues},l0,${height - splitedValues[splitedValues.length - 1]}`
            })
            .style('fill', 'url(#gradient)')
        
        svg.selectAll('.line')
        .data(parsedData)
        .enter()
        .append('path')
            .attr('d', d => line(d.values))
            .attr('stroke-width', '2')
            .style('fill', 'none')
            .style('filter', 'url(#glow)')
            .attr('stroke', '#FF6500');

        const tick = svg.append('g')
        .attr('transform', `translate(0, ${height})`)
        .call(d3.axisBottom(xScale).ticks(9))
        .selectAll('.tick')
        .style('transition', '.2s');
    
        //Y dashes
        //stroke color of line in background
        //stroke-dasharray
        //first paramter is length
        //second parameter is space between
        tick
        .selectAll('line')
            .attr('stroke-dasharray', `4, 7`)
            .attr('stroke', '#5E779B')
            .attr('y2', `-${height}px`)
        tick
        .append('rect')
            .attr('width', `${(width / 12) + 10}px`)
            .attr('x', `-${width / 24 + 5}px`)
            .attr('y', `-${height}px`)
            .attr('height', `${height + 30}px`)
            .style('fill', 'transparent');
            
        svg.selectAll('.tick')
        .append('circle')
            .attr('r', '5px')
            .style('fill', '#ffffff')
            .style('stroke', '#FF6500')
            .attr('cy', (x, i) => - height + yScale(parsedData[0].values[i].close));


        svg.select('.domain')
        .attr('stroke', '#5E779B')
        .attr('stroke-dasharray', `4, 7`)

        var yscale = d3.scaleLog()
            .domain([1, 100000])
                        .nice()
            .range([height - 10, -10]);

        var y_axis = d3.axisLeft(yscale);

        y_axis.ticks(5);
  
        svg.append("g")
            .call(d3.axisLeft(xScale).ticks(5))
            .attr("transform", "translate(0, 10)")
            .attr('stroke', '#5E779B')
            .attr('stroke-dasharray', `4, 7`)
            .call(y_axis)
    })
    (d3);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<body>
    <div id="line-chart"></div>
</body>

Vue js variable not updating

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello Vue</title>
    <script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <div id="demo">
        
    </div>
<script type="text/javascript">
    var demo = new Vue({
        el: '#demo',
        data: {
            message: 'Hello Vue!!!'
        }
    });
</script>
</body>
</html>

I am beginner of Vue js and not familiar with it. I am not clear whether anything I missed in order to have the variable shown on the template as the template still only shows instead of the value Hello Vue!!! so could anyone tell me where is the problem?

Create new page for a website but with different framework [closed]

How can I connect my website which used Laravel framework to another website which used Javascript framework (mine as well)? Something I want to do is the Laravel website has domain mydomain.com and will be connected to other.mydomain.com domain but built with JS framework (same main domain, different subdomain, different framework)?

Flutter web shows a blank screen in build mode

After finishing my web app on flutter I tried to release it on the server by flutter build web command. I uploaded my files to the server but I am getting a blank screen. In the debugging mode on Android Studio, it works fine. I am also getting the same blank screen when I use the command flutter run -d chrome --profile --verbose I found similar questions here but the root cause seems to be different every time and nothing worked for me, can you please advice?

Below is a simplified version of my flutter code, suffering from the same issue:

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:flutter_signin_button/flutter_signin_button.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  //await Firebase.initializeApp();
  ErrorWidget.builder = (FlutterErrorDetails details) {
    bool inDebug = false;
    assert(() { inDebug = true; return true; }());
    // In debug mode, use the normal error widget which shows
    // the error message:
    if (inDebug)
      return ErrorWidget(details.exception);
    // In release builds, show a yellow-on-blue message instead:
    return Container(
      alignment: Alignment.center,
      child: Text(
        'Error! ${details.exception}',
        style: TextStyle(color: Colors.yellow),
        textDirection: TextDirection.ltr,
      ),
    );
  };
  // Here we would normally runApp() the root widget, but to demonstrate
  // the error handling we artificially fail:
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
          scrollBehavior: MyCustomScrollBehavior(), //fixing the scrolling for web
          home:LoginScreen(),


          theme: ThemeData(
            cupertinoOverrideTheme: CupertinoThemeData( // <---------- this
              textTheme: CupertinoTextThemeData(
                pickerTextStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.w900),
              ),
            ),

          ),
        );

//
  }
}
class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
    // etc.
  };
}
class LoginScreen extends StatefulWidget {

  @override
  State<LoginScreen> createState() => _LoginScreenState();

}

class _LoginScreenState extends State<LoginScreen> {
  late String em;
  late String pa;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();

  }
  @override
  Widget build(BuildContext context) {
    return Material(
        child: Scaffold(
              body: buildHomeScreen()
          ),
        );
  }

  Widget buildHomeScreen(){
   return Container(
      decoration: BoxDecoration(color: Colors.amberAccent),
      child: Flexible(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Align(alignment: Alignment.centerLeft,
                  child: WelcomeText('Get to know the highest rated cars,')),
              Align(alignment: Alignment.centerLeft,child: WelcomeText('good and bad things for each car,')),
              Align(alignment: Alignment.centerLeft,child: WelcomeText('best car mechanics near you,')),
              Align(alignment: Alignment.centerLeft,child: WelcomeText('best car agencies,')),
              Align(alignment: Alignment.centerLeft,child: WelcomeText('and more..')),
              SizedBox(height: 100,),
              Text('Welcome to Car of your Dreams', style: GoogleFonts.ubuntu(
                  textStyle: TextStyle(fontSize: 35,
                      color: Colors.white,
                      fontWeight: FontWeight.w500,
                      decoration: TextDecoration.none))),
              SizedBox(height: 8,),
              Text('Sign in to continue', style: GoogleFonts.ubuntu(
                  textStyle: TextStyle(fontSize: 14,
                      color: Colors.white,
                      fontWeight: FontWeight.w300,
                      decoration: TextDecoration.none))),
              SizedBox(height: 12,),
              FractionallySizedBox(
                widthFactor: 0.6,
                child: TextField(
                  onChanged: (value){
                  }
                  ,
                  decoration: InputDecoration(
                    hintText: "Email",
                    border: OutlineInputBorder(),
                    icon:Icon(Icons.email),
                    contentPadding: EdgeInsets.symmetric(horizontal: 20),
                  ),
                ),
              ),
              SizedBox(height: 5,),
              FractionallySizedBox(
                  widthFactor: 0.6,
                  child: TextField(
                      obscureText:true ,
                      onChanged: (value){
                      },
                      decoration: InputDecoration(
                        hintText: "Password",

                        border: OutlineInputBorder(),
                        icon:Icon(Icons.vpn_key_outlined),
                        contentPadding: EdgeInsets.symmetric(horizontal: 20),))
              ),
              SizedBox(height: 10,),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TextButton(onPressed: () {},
                    child: Text('Sign in', style: GoogleFonts.londrinaSolid(
                        textStyle: TextStyle(fontSize: 25,
                            color: Colors.white,
                            fontWeight: FontWeight.w300,
                            decoration: TextDecoration.none))),),
                  SizedBox(width: 10,),
                  Icon(Icons.arrow_forward, color: Colors.white,)
                ],
              ),
              SizedBox(height: 10,),
              SignInButton(Buttons.Google,
                  text: "Sign in with Google",
                  onPressed:(){}),
              SizedBox(height: 7,),
              SignInButton(Buttons.Facebook,
                  text: "Sign in with Facebook",
                  onPressed: (){}),
              SizedBox(height: 7,),
              TextButton(
                onPressed: (){
                  Navigator.pushNamed(context, '-1');
                },
                child: Text('New user? Register..', style: GoogleFonts.londrinaSolid(
                    textStyle: TextStyle(fontSize: 20,
                        color: Colors.white,
                        fontWeight: FontWeight.w300,
                        decoration: TextDecoration.none))),),
              SizedBox(height: 50,),

            ],
          ),
        ),
      ),
    );
  }

}

class WelcomeText extends StatelessWidget {
  WelcomeText(this.welcomeText) ;
  String welcomeText;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(20.0,0,0,0),
      child: Text(welcomeText,
          style: GoogleFonts.permanentMarker(
              textStyle: TextStyle(fontSize: 30,
                  color: Colors.white70,
                  fontWeight: FontWeight.w100,
                  decoration: TextDecoration.none))),
    );
  }
//'Get to know the highest rated cars, good and bad things for each car, best car mechanics near you, best car agencies and more...'
}

Why does the IP address different for www.joinrealtalk.co & joinrealtalk.co

I am trying to find the Ip address through which my emails are sent to check for Ip/ domain reputation. Using all the tools, when I search for Ip addresses related to joinrealtalk.co, I get one value, and something else when I search for www.joinrealtalk.co.

I'm assuming both the IPs should be the same for both these addresses right? Since it is the same domain.

Would really appreciate someone helping me understand why it is different, or if there is something fishy here.

Scratch card in website doesnt work in android

I'm trying to do a scratch game at the last picture of a automatic slider
I took as an example this slider : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto
And i took as an example this scratch card : https://codepen.io/andreruffert/pen/pvqly So i assembled them, and my code look like this:

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 6}    
  slides[slideIndex-1].style.display = "block";  
  setTimeout(showSlides, 500); // Change image every 2 seconds
}


var promoCode ='';
  function handlePercentage(filledInPixels) {
    filledInPixels = filledInPixels || 0;
    console.log(filledInPixels + '%');
    if (filledInPixels > 15) {
      canvas.parentNode.removeChild(canvas);
      $('.promo-container').show();
      $('body').removeClass('not-selectable');
      $('.promo-code').html(promoCode);
    }
  }

<div class="container-fluid" >
            <div class="row">
                <div class="col-md-12">
                    <div class="slideshow-container">
                        <div class="mySlides">
                          <img class ="rounded-circle" src="image1.jpg">
                        </div>

                        <div class="mySlides">
                          <img class ="rounded-circle" src="image2.jpg">
                        </div>

                        <div class="mySlides">
                          <img class ="rounded-circle" src="image3.jpg">
                        </div>

                        <div class="mySlides">
                          <img class ="rounded-circle" src="image4.jpg">
                        </div>

                        <div class="mySlides">
                          <img class ="rounded-circle" src="image5.jpg">
                        </div>
                
                        <div class="mySlides" id="scratch">
                            <div class="container carte" id="js-container">
                                <canvas class ="rounded-circle canvas" id="js-canvas" width="300" height="300"></canvas>
                                <img class ="rounded-circle" src="win.jpg" alt="win">
                              
                            </div>             
                        </div>
                    </div>
            <div class="promo-container" style="display:none;">
                <div class="promo-code"></div>
                    <button type="button" class="btn"></button>
            </div>  
            </div>
        </div>
    </div>

In Js i just change the slideindex to stay in the last picture and i add an event when the card is scratch

It just doesnt work in android.
What can I change so that it works on android

Slick Carousel not showing anything in my page

hi there so i started this project this week but I'm having trouble getting slick.js to work , I tried it with images and with normal text but it does not work , am I importing slick.js in a wrong way?

the index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>project</title>
 
    <link rel="stylesheet" href="style.css">


    <!-- bootstrap-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 

 

   <!--slick (for sliders)-->
   <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

</head>
<body>





<main>
<div class="container-fluid p-0">
    <div class="site-slider">
        <div class="slider-one">
         <div>
             <img src="./Images/1.png">
          </div>
          <div>
            <img src="./Images/2.jpg">
         </div>
         <div>
            <img src="./Images/3.jpg">
         </div>
        </div>
    </div>
</div>
</main>

<footer></footer>











<!--js-->

<script type="text/javascript" src="main.js"></script>

<!-- Bootstrap Js-->    
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- end -->

<!--Slick Js (for Sliders)-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- end -->

</body>
</html>

the main.js

$('.slider-one').slick();

it does not show any buttons or sliders like it should , images are displayed as if slick.js was not there please help !

what we can use jquery in 2022 as a wordpress developer [closed]

I want to know which library is best for me in 2022 as a WordPress developer. and this is my problem. and before this, I tried to react. I want to know which library is best for me in 2022 as a WordPress developer. and this is my problem. and before this, I tried to react. I want to know which library is best for me in 2022 as a WordPress developer. and this is my problem. and before this, I tried to react. I want to know which library is best for me in 2022 as a WordPress developer. and this is my problem. and before this, I tried to react.

AWS API Gateway: 403 MissingAuthenticationTokenException for /static/js/bundle.js even though Authorization is set as None

I have set up this flow:

external world --> AWS API Gateway ---> VPC Link ---> Network Load Balancer ---> my single EC2 instance

The API Gateway is working because when I input the custom domain in my browser, it successfully visits the frontend service running on my EC2 instance.

However, for /static/js/bundle.js, I'm getting a 403 MissingAuthenticationTokenException error:

But the request to the main domain is ok:

Also, all other resources failed: /static/js/vendors~main.chunk.js

static/js/main.chunk.js

/favicon.ico

/manifest.json

My frontend is written in React JS.

Note that it says: x-amzn-errortype: MissingAuthenticationTokenException. But I have set the Authorization to be None:

What is going on?

How to list all dropdown values on top of modal?

I am using a dropdown inside the modal. All the dropdown values are not visible, how to keep dropdown value to be top (now overflow part is hidden).

By changing z-index still issue is not getting resolved.

Thanks In Advance.

I tried to make flutter web and i have issue with profile picuture when i picked image it doesn't display

The profile page is loading fine but as soon as I click the camera or galley icon, it opening the desktop.
Once I pick image it doesn't appear on the profile image section but I am not able to fix it yet. terminal doesn't shows any error.
Can anyone tell me what's the problem and how to fix it?

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

import 'package:image_picker/image_picker.dart';
import 'package:learningapp/Landing.page.dart';
import 'package:learningapp/Provider/user.provider.dart';
import 'package:learningapp/learner/Screens/others/learner_favourites.dart';
import 'package:learningapp/learner/utils/LearnerColors.dart';
import 'package:learningapp/learner/utils/LearnerConstant.dart';
import 'package:learningapp/learner/utils/learner_images.dart';
import 'package:learningapp/learner/utils/learner_strings.dart';
import 'package:learningapp/main/utils/app_widget.dart';
import 'package:nb_utils/src/extensions/widget_extensions.dart';
import 'package:learningapp/leaderboard.screen.dart';
import 'package:learningapp/edit.login.details.screen.dart';

class LearnerProfile extends StatefulWidget {
  const LearnerProfile({Key? key}) : super(key: key);

  @override
  _LearnerProfileState createState() => _LearnerProfileState();
}

class _LearnerProfileState extends State<LearnerProfile> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    AppUser();
  }

  PickedFile? imageFile = null;

  @override
  Widget build(BuildContext context) {
    changeStatusColor(learner_layout_background);
    return Scaffold(
      backgroundColor: learner_layout_background,
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                margin: const EdgeInsets.only(top: 16, left: 16, right: 16),
                child: Row(
                  children: <Widget>[
                    Container(
                        decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border: Border.all(color: learner_white, width: 4)),
                        child: GestureDetector(
                            onTap: () {
                              _showPicker(context);
                            },
                            child: CircleAvatar(
                              //backgroundImage: const AssetImage(learner_ic_Profile),
                              radius: 55,
                              backgroundColor: Colors.yellow,
                              child: imageFile != null
                                  ? ClipRRect(
                                      borderRadius: BorderRadius.circular(50),
                                      child: Image.file(
                                        File(imageFile!.path),
                                        width: 100,
                                        height: 100,
                                        fit: BoxFit.fitHeight,
                                      ),
                                    )
                                  : Container(
                                      decoration: BoxDecoration(
                                          color: Colors.grey[200],
                                          borderRadius:
                                              BorderRadius.circular(50)),
                                      width: 100,
                                      height: 100,
                                      child: Icon(
                                        Icons.camera_alt,
                                        color: Colors.grey[800],
                                      )),
                            ))),
                    const SizedBox(
                      width: 20,
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        text(AppUser.instance.user!.displayName,
                            fontFamily: fontSemibold,
                            fontSize: textSizeLargeMedium,
                            textColor: learner_textColorPrimary),
                        text(learner_lbl_390_290_points,
                            textColor: learner_textColorPrimary),
                        const SizedBox(
                          height: 8,
                        ),
                        Row(
                          children: <Widget>[
                            learnerAward(
                                learner_ic_medal, learner_colorPrimary),
                            learnerAward(learner_ic_crown, learner_green),
                            learnerAward(learner_ic_cup, learner_light_pink),
                            learnerAward(learner_ic_flag, learner_orange_dark),
                          ],
                        )
                      ],
                    )
                  ],
                ),
              ),
              Container(
                  margin: const EdgeInsets.only(top: 30, left: 16),
                  child: text(learner_lbl_general,
                      fontFamily: fontBold,
                      textAllCaps: true,
                      textColor: learner_textColorPrimary)),
              const SizedBox(
                height: 10,
              ),
              Container(
                decoration: boxDecoration(
                    bgColor: learner_white, showShadow: true, radius: 0),
                child: Column(
                  children: <Widget>[
                    InkWell(
                      child: learnerOption(
                        learner_ic_heart,
                        learner_lbl_favourite_courses,
                      ),
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => LearnerFavourites()),
                        );
                      },
                    ),
                    /* InkWell(
                    //   child: learnerOption(
                    //       learner_ic_user, learner_lbl_my_friends),
                    //   onTap: () {
                    //     Navigator.push(
                    //       context,
                    //       MaterialPageRoute(
                    //           builder: (context) => LearnerMyFriends()),
                    //     );
                    //   },
                    // ),*/
                    InkWell(
                      child: learnerOption(
                          learner_ic_achievements, lbl_leaderboard),
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => LeaderboardScreen()),
                        );
                      },
                    ),
                  ],
                ),
              ),
              Container(
                  margin: const EdgeInsets.only(top: 25, left: 16),
                  child: text(learner_lbl_settings,
                      fontFamily: fontBold,
                      textAllCaps: true,
                      textColor: learner_textColorPrimary)),
              const SizedBox(
                height: 10,
              ),
              Container(
                decoration: boxDecoration(
                    bgColor: learner_white, showShadow: true, radius: 0),
                child: Column(
                  children: <Widget>[
                    InkWell(
                      child: learnerOption(
                          learner_ic_key, learner_lbl_edit_login_details),
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => EditLoginDetailsScreen()),
                        );
                      },
                    ),
                    learnerOption(
                        learner_ic_correct, learner_lbl_update_interests),
                    // learnerOption(learner_ic_block, learner_lbl_blocked_users),
                    InkWell(
                      child: learnerOption(learner_ic_logout, 'Logout'),
                      onTap: () async {
                        await AppUser.instance.signOut();
                        LoadingPage().launch(context);
                        // Navigator.pushNamed(context, '/login');
                        print("logout");
                      },
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _showPicker(context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext bc) {
          return SafeArea(
            child: Container(
              child: Wrap(
                children: <Widget>[
                  ListTile(
                      leading: Icon(Icons.photo_library),
                      title: Text('Photo Library'),
                      onTap: () {
                        _openGallery(context);
                        Navigator.of(context).pop();
                      }),
                  ListTile(
                    leading: Icon(Icons.photo_camera),
                    title: Text('Camera'),
                    onTap: () {
                      _openCamera(context);
                      Navigator.of(context).pop();
                    },
                  ),
                ],
              ),
            ),
          );
        });
  }

  Widget learnerAward(var icon, var bgColor) {
    return Container(
      margin: const EdgeInsets.only(right: 10),
      width: 35,
      height: 35,
      decoration: BoxDecoration(shape: BoxShape.circle, color: bgColor),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Image.asset(
          icon,
        ),
      ),
    );
  }

  Widget learnerOption(var icon, var heading) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(16, 10, 16, 8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Row(
            children: <Widget>[
              Container(
                decoration: boxDecoration(
                    bgColor: learner_white, radius: 8, showShadow: true),
                width: 40,
                height: 40,
                padding: const EdgeInsets.all(10),
                child: SvgPicture.asset(
                  icon,
                  height: 40,
                  width: 40,
                ),
              ),
              const SizedBox(
                width: 16,
              ),
              text(heading,
                  textColor: learner_textColorPrimary,
                  fontSize: textSizeLargeMedium,
                  fontFamily: fontSemibold),
            ],
          ),
          const Icon(
            Icons.keyboard_arrow_right,
            color: learner_textColorSecondary,
          ),
        ],
      ),
    );
  }

//pick from gallery
  void _openGallery(BuildContext context) async {
    final pickedFile = await ImagePicker().pickImage(
      source: ImageSource.gallery,
    );
    setState(() {
      imageFile = pickedFile! as PickedFile?;
    });

    Navigator.pop(context);
  }

  //pick from camera
  void _openCamera(BuildContext context) async {
    final pickedFile = await ImagePicker().pickImage(
      source: ImageSource.camera,
    );
    setState(() {
      imageFile = pickedFile! as PickedFile?;
    });
    Navigator.pop(context);
  }
}

pubspec.yaml image_picker: ^0.8.4+4

how to solve automatically styling in our website? [closed]

hello I am new in web development I am creating a website but when I am using live server of visual studio then automatically some styles are added to my html elements and this is creating problems for me can anybody please help me

How to Disable A function automatically in Js?

I'm working on a website on which scroll is disabled when the user scrolls to a certain point and then after some seconds the scroll should be re enabled. How Can this be done ?

Here's the code:

<script>
    document.addEventListener('scroll', function (scrollbar_disable) {
        if (window.scrollY > 650) {
            document.body.style.overflowY = "hidden";
        }
    });
</script>

Video aspect ratio changes automatically on the firefox web browser

I'm working on a project, I'm accessing the camera using javascript and the aspect ratio of the camera is working fine on CHROME but when I'm testing it on the Firefox browser it changes the aspect ratio automatically

this is a CHROME result

and FIREFOX result

and my code <video id="video" width="280px" height="480px"></video>

const videoElement = document.getElementById("video");
const camera = new Camera(videoElement, {
  onFrame: async () => {
    await model.send({ image: videoElement });
  },
  width: 280,
  height: 480,
});
camera.start();

let me know if anyone can help with this

attribute error in web scrapping in python

I have written a python code for web scrapping but there is a error named "Nontype object has no attribute text", help me to get rid from this error. I have tried so much but i cannot find the solution of this error. Here is my code..

import requests
from bs4 import BeautifulSoup
import pandas as pd


all_books=[]

url='https://books.toscrape.com/catalogue/page-1.html'
headers=('https://developers.whatismybrowser.com/useragents/parse/22526098chrome-windows-blink')
def get_page(url):
    page=requests.get(url,headers)
    status=page.status_code
    soup=BeautifulSoup(page.text,'html.parser')
    return [soup,status]

#get all books links
def get_links(soup):
    links=[]
    listings=soup.find_all(class_='product_pod')
    for listing in listings:
        bk_link=listing.find("h3").a.get("href")
        base_url='https://books.toscrape.com/catalogue/page-1.html'
        cmplt_link=base_url+bk_link
        links.append(cmplt_link)
    return links
    
#extraxt info from each link
def extract_info(links):
    for link in links:
        r=requests.get(link).text
        book_soup=BeautifulSoup(r,'html.parser')

        name=book_soup.find(class_='col-sm-6 product_main').text.strip()
        price=book_soup.find(class_='col-sm-6 product_main').text.strip()
        desc=book_soup.find(class_='sub-header').text.strip()
        cat=book_soup.find('"../category/books/poetry_23/index.html">Poetry').text.strip()
        book={'name':name,'price':price,'desc':desc,'cat':cat}
        all_books.append(book)

pg=48
while True:
    url=f'https://books.toscrape.com/catalogue/page-{pg}.html'
    soup_status=get_page(url)
    if soup_status[1]==200:
        print(f"scrapping page{pg}")
        extract_info(get_links(soup_status[0]))
        pg+=1
    else:
        print("The End")
        break

df=pd.DataFrame(all_books)
print(df)