Highlight js import not working in lit components (es / eslint issue)

Have this piece of code in a lit component;

import {LitElement, html, property, CSSResultArray, TemplateResult, unsafeCSS} from 'lit-element';
import { customElement, query } from 'lit/decorators.js';
import {styles} from './nile-code-block.css';
import NileElement from '../internal/nile-element';
import hljs from 'highlight.js';

While rendering this I get the error:

Uncaught SyntaxError: The requested module '/__wds-outside-root__/2/node_modules/highlight.js/lib/index.js' does not provide an export named 'default' (at index.js:2:8)

This comes out to be the code for source file when checked:

//https://nodejs.org/api/packages.html#packages_writing_dual_packages_while_avoiding_or_minimizing_hazards
import HighlightJS from '/__wds-outside-root__/2/node_modules/highlight.js/lib/index.js';
export { HighlightJS };
export default HighlightJS;

I’ve tried uninstalling and installing again (yarn add highlight.js)
Tried using it in a sample project on vite with vanilla.js, works fine there.

Unhandled Runtime Error: data is undefined in useSuspenseQuery with Next.js and Tanstack Query

I am working on a Next.js application where I have implemented a commenting system. Users can post a review for a particular AI tool, reply to a review, and reply to a reply as well.

I have a component named <ReplyItemOperations /> that renders three buttons: like, dislike, and reply. Inside this component, I am using useSuspenseQuery to fetch the status of whether the user has liked/disliked the reply or not.

Here is the code for the <ReplyItemOperations /> component:

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Reply, Review } from "@/types"
import {
  useMutation,
  useQueryClient,
  useSuspenseQuery,
} from "@tanstack/react-query"
import { useSession } from "next-auth/react"


type ReplyItemOperationsProps = {
  review: Review
  reply: Reply
}

export function ReplyItemOperations({
  review,
  reply,
}: ReplyItemOperationsProps) {
  const router = useRouter()
  const { data: session } = useSession()
  const user = session?.user
  const userEmail = session?.user?.email

  const {
    id: replyId,
    likes_count: initialLikesCount,
    dislikes_count: initialDislikesCount,
  } = reply

  const { id: reviewId, tool_name: toolName } = review

  const { data: userReplyData } = useSuspenseQuery({
    queryKey: ["userReplyData", toolName, userEmail],
    queryFn: async () => {
      if (!userEmail) {
        return null
      }
      return await getUserReplyData(toolName, userEmail)
    },
  })

  const [likesCount, setLikesCount] = useState(initialLikesCount)
  const [dislikesCount, setDislikesCount] = useState(initialDislikesCount)
  const [isLiked, setIsLiked] = useState(userReplyData?.is_liked || false)
  const [isDisliked, setIsDisliked] = useState(
    userReplyData?.is_disliked || false
  )

// Other component logic

  return (
    <div>
      {/* Component JSX */}
    </div>
  )
}

Here is the query code that fetches the data (an object with two keys: is_liked and is_disliked) regarding whether the current user has liked/disliked the reply or not:

const { data: userReplyData } = useSuspenseQuery({
    queryKey: ["userReplyData", toolName, userEmail],
    queryFn: async () => {
      if (!userEmail) {
        return null
      }
      return await getUserReplyData(toolName, userEmail)
    },
  })

And here is the code for the getUserReplyData() function:

import { supabase } from "@/lib/clients"

export async function getUserReplyData(
  toolName: string,
  userEmail: string | null | undefined
) {
  const { data, error } = await supabase
    .from("user_replies")
    .select("is_liked, is_disliked")
    .match({ tool_name: toolName, user_email: userEmail })
    .single()

  if (error) {
    console.error(`Error getting user replies data: ${error.message}`)
    return
  }

  console.log("Get user reply data: ", data)

  return data
}

The <ReplyItemOperations /> component is rendered inside the <ReplyItem /> component, and the <ReplyItem /> component is rendered inside the <Reviews /> component (where I display both the reviews and replies, including nested replies). The <Reviews /> component is rendered inside the <ToolPage /> component which display details regarding a particular AI tool (along with the reviews).

When I am NOT logged in, the <ToolPage /> component renders fine; I see the tool details, as well as the reviews and replies for that particular tool, as shoen below:

enter image description here

But when I am logged in, the <ToolPage /> does not render, and I get the following error:

enter image description here

Error: ["userReplyData","MakeAudio","[email protected]"] data is undefined

I suspect this error is related to the query key that I have set inside the query. Here is the query key for reference:

queryKey: ["userReplyData", toolName, userEmail],

So, why am I getting this error when I am logged in? Is it because the userEmail has a value when I’m logged in and is undefined when I’m not logged in, and this messes up the cache? If yes, how do I solve this problem?

Additional Information:

  • Next.js version: 14.1.3
  • Tanstack Query version: 5.40.1
  • next-auth version: 4.24.5

Any help or insights would be greatly appreciated!

Use Component to populate an interface

I am working on a project (React + TS) that accepts an “uncalled” component (in the example below, I’m using SimpleCard), does some stuff behind the scenes (removed from the example for simplicity), and then renders the card component in a grid (using CardGrid below).

In SimpleCardGrid, note the three attributes in CardGrid. CardGrid should take in a component. That component (aka the card) is expected to be constructed a certain way (the same way SimpleCard is constructed). ICardGrid should be able to read the component and figure out the type for items (an array of ISimpleCardItem, or whatever the type for the card) and componentProps (in this case, it should expect isDataLoaded).

However, I struggling with how to do this correctly. I can’t seem to figure out how to change ICardGrid to make this happen (I’ve tried different variations using a generic). Please help – thank you!!!!

Here is the simplified code:

import * as React from 'react';

type IKey = { key: string };

type ISimpleCardItem = IKey & { text: string };

type IItem<T> = { item: T };

type IIsDataLoaded = { isDataLoaded: boolean };

type ISimpleCard = IItem<ISimpleCardItem> & IIsDataLoaded;

const SimpleCard = ({ item, isDataLoaded }: ISimpleCard) => {
  if (!isDataLoaded) {
    return <div>Loading</div>;
  } else {
    return <div>{item.text}</div>;
  }
};

type ICardGrid = {
  component: any;
  items: any[];
  componentProps?: any;
}

const CardGrid = ({ component: Component, items, componentProps }: ICardGrid) => {
  return (
    <div>
      {items?.map((item) => (
        <Component key={item.key} item={item} {...componentProps} />
      ))}
    </div>
  );
};

const simpleCardItems: ISimpleCardItem[] = [
  {
    key: 'thisOne',
    text: 'Hello trees',
  },
  {
    key: 'thatOne',
    text: 'Hello sky',
  },
  {
    key: 'theOtherOne',
    text: 'Hello world',
  },
];

const SimpleCardGrid = () => {
  return (
    <CardGrid
      component={SimpleCard}
      items={simpleCardItems}
      componentProps={{
        loading: false,
        thisShouldThrowAnError: false,
      }}
    />
  );
};

Limit X Axes labels in Chart.js

I’m trying to create a stock chart (with Chart.js v4) similar to the ones you see on Google. My goal is to display only intervals on the x-axis, rather than showing labels for each day. I managed to do this by setting maxTicksLimit. But my chart ends up with two x-axes: one that shows all the data labels, and another that correctly shows only the intervals. How to achieve something similar to Google’s stock chart ?

import { ChartData, ChartType, ChartOptions } from 'chart.js';

public lineChartOptions: ChartOptions = {
    scales: {
      xAxis: {
        ticks: {
          autoSkip: true,
          maxTicksLimit: 4,
        }
      }
    },
  }

  public stockPrices: ChartData = {
    labels: [
        '01-01-2020', '02-01-2020', '03-01-2020', '04-01-2020', '05-01-2020', 
        '06-01-2020', '07-01-2020', '08-01-2020', '09-01-2020', '10-01-2020',
        '11-01-2020', '12-01-2020', '13-01-2020', '14-01-2020', '15-01-2020', 
        '16-01-2020', '17-01-2020', '18-01-2020', '19-01-2020', '20-01-2020',
        '21-01-2020', '22-01-2020', '23-01-2020', '24-01-2020', '25-01-2020',
        '26-01-2020', '27-01-2020', '28-01-2020', '29-01-2020', '30-01-2020', '31-01-2020'
    ],
    datasets: [{
        label: 'Stock Prices',
        data: [
            100, 110, 105, 120, 118, 125, 130, 135, 128, 140,
            142, 138, 145, 150, 148, 152, 155, 160, 158, 165,
            170, 172, 168, 175, 178, 182, 180, 185, 190, 195
        ],
        backgroundColor: '#debdd8',
        borderColor: '#a04c93',
        borderWidth: 1
    }]
  };

Here is my current state of Chart looks like, and what I am trying to achieve

enter image description here
enter image description here

Upload ffmpeg output to S3

When I make the next upload, if the duration of the clip is very short it generates a corrupt file and if it is a little longer, for example 19 seconds, it generates a file that starts from second 8

const passThroughStream = new PassThrough();
    const response = await new Promise((resolve, reject) => {
    const command = ffmpeg()
    .input(`${import.meta.env.BUCKET_URL}${m3u8S3}`)
    .inputOptions([`-ss ${TIME_OFFSET}`])
    .outputOptions([`-t ${end - start}`, '-c:v libvpx', '-c:a libvorbis', '-f webm'])
    .on('start', (commandLine) => {
            console.log('Spawned FFmpeg with command:', commandLine);
    })
    .on('error', (err, stdout, stderr) => {
        console.error('FFmpeg error:', err);
        console.error('FFmpeg stderr:', stderr);
        reject(err);
    })

    // Collect data into buffers
    const buffers = [];
    command.pipe(passThroughStream);
    passThroughStream.on('data', (chunk) => {
        buffers.push(chunk);
    });
    passThroughStream.on('end', async () => {
        try {
            const clipKey = `clip_${uuidv4()}.webm`;

            const buffer = Buffer.concat(buffers);
            const uploadParams = {
                Bucket: import.meta.env.BUCKET_NAME,
                Key: clipKey,
                Body: buffer,
                ContentType: 'video/webm',
            };
            await S3.send(new PutObjectCommand(uploadParams));

            resolve(new Response({ status: 200 }));
        } catch (error) {
            reject(error);
        }
    });
});

I hope to be able to create clips of maximum 1 minute from the hls transmission

Problem with fullscreen API of javascript

I am doing a project that is somewhat clone of a powerpoint or canva, i am trying it go fullscreen using the js api but when ever the slide content changes it exits the fullscreen automatically.

import React, { useState, useEffect, useRef, useCallback } from "react";
import "./form-template.css";
import { useRecoilState } from "recoil";
import { slides } from "../../recoil/atom/slideDataAtom";
import "react-quill/dist/quill.snow.css";
import Toolbar from "../editor/Toolbar";
import ResizeableContent from "../resizeable_content/ResizeableContent";
import ImageUpload from "../editor/ImageUpload";
import ContextMenu from "../context-menu/ContextMenu";

const Multipage = ({
  activeSlide,
  aiResponse,
  aiReset,
  copySlide,
  removeSlide,
  slideShow,
}) => {
  const [slide, setSlide] = useRecoilState(slides);
  const [clickedIndex, setClickedIndex] = useState(null);
  const editorRefs = useRef({});
  const [showContextMenu, setShowContextMenu] = useState(false);
  const [contextPosition, setContextPosition] = useState({ x: 0, y: 0 });
  const [contextMenuItems, setContextMenuItems] = useState([]);
  const [elementContextMenu, setElementContextMenu] = useState(false);
  const slideContainerRef = useRef(null);

  const newTextboxData = {
    type: "TEXT",
    size: { width: "50%", height: "11%" },
    position: { x: 50, y: 100 },
    content: "",
  };

  const manipulateBackgroudImage = (data) => {
    console.log(data);
    setSlide((prevData) => {
      const updatedSlide = prevData.map((slide, i) => {
        if (i === activeSlide) {
          return {
            ...slide,
            backgroundImage: data,
          };
        }
        return slide;
      });
      return updatedSlide;
    });
  };

  const manipulateSlideContentData = (contents, index) => {
    setSlide((prevData) => {
      const updatedSlide = prevData.map((slide, i) => {
        if (i === activeSlide) {
          const updatedData = slide.data.map((item, j) => {
            if (j === index) {
              return {
                ...item,
                content: contents,
              };
            }
            return item;
          });
          return {
            ...slide,
            data: updatedData,
          };
        }
        return slide;
      });
      return updatedSlide;
    });
  };

  useEffect(() => {
    const removeContextMenu = () => {
      setContextMenuItems([]);
      setShowContextMenu(false);
    };
    window.addEventListener("click", removeContextMenu);
    return () => {
      window.removeEventListener("click", removeContextMenu);
    };
  });

  useEffect(() => {
    if (aiResponse !== "") {
      manipulateSlideContentData(aiResponse, clickedIndex);
    }
    aiReset("");
  }, [aiResponse]);

  const deleteElement = useCallback(() => {
    setSlide((prevData) => {
      const updatedSlide = prevData.map((slide, i) => {
        if (i === activeSlide) {
          const updatedData = slide.data.filter(
            (item, j) => j !== clickedIndex
          );
          return {
            ...slide,
            data: updatedData,
          };
        }
        return slide;
      });
      return updatedSlide;
    });
    setElementContextMenu(false);
  }, [setSlide, activeSlide, clickedIndex]);

  const handleDeleteElement = useCallback(
    (event) => {
      if (event.key === "Delete") {
        deleteElement();
      }
    },
    [deleteElement]
  );

  useEffect(() => {
    document.addEventListener("keydown", handleDeleteElement);
    return () => {
      document.removeEventListener("keydown", handleDeleteElement);
    };
  }, [handleDeleteElement]);

  const handleAddTextbox = useCallback(() => {
    setSlide((prevData) => {
      const updatedSlide = prevData.map((slide, i) => {
        if (i === activeSlide) {
          const updatedData = [...slide.data, newTextboxData];
          return {
            ...slide,
            data: updatedData,
          };
        }
        return slide;
      });
      return updatedSlide;
    });
  }, [setSlide, activeSlide, newTextboxData]);

  const handleResizeStop = useCallback(
    (e, direction, ref, delta, position, type) => {
      const { width, height } = ref.style;
      const { x, y } = position;
      setSlide((prevData) => {
        const updatedSlide = prevData.map((slide, i) => {
          if (i === activeSlide) {
            const updatedData = slide.data.map((item, j) => {
              if (j === type) {
                return {
                  ...item,
                  size: { width, height },
                  position: { x, y },
                };
              }
              return item;
            });
            return {
              ...slide,
              data: updatedData,
            };
          }
          return slide;
        });
        return updatedSlide;
      });
    },
    [setSlide, activeSlide]
  );

  const handleDragStop = useCallback(
    (e, d, type) => {
      const { x, y } = d;
      setSlide((prevData) => {
        const updatedSlide = prevData.map((slide, i) => {
          if (i === activeSlide) {
            const updatedData = slide.data.map((item, j) => {
              if (j === type) {
                return {
                  ...item,
                  position: { x, y },
                };
              }
              return item;
            });
            return {
              ...slide,
              data: updatedData,
            };
          }
          return slide;
        });
        return updatedSlide;
      });
    },
    [setSlide, activeSlide]
  );

  const slideContentChangeHandler = useCallback(
    (e, index) => {
      const content = e;
      manipulateSlideContentData(content, index);
    },
    [setSlide, activeSlide]
  );

  const handleFocus = useCallback((editorId) => {
    console.log("editor id: ", editorId);
    setClickedIndex(editorId);
  });

  const handleAction = useCallback(
    (action, param) => {
      const editor = editorRefs.current[clickedIndex].getEditor();
      editor.focus();
      switch (action) {
        case "bold":
          editor.format("bold", !editor.getFormat().bold);
          break;
        case "italic":
          editor.format("italic", !editor.getFormat().italic);
          break;
        case "underline":
          editor.format("underline", !editor.getFormat().underline);
          break;

        case "align":
          editor.format("align", param);
          break;

        case "font":
          editor.format("font", param);
          break;
        case "size":
          editor.format("size", param);
          break;
      }
    },
    [clickedIndex]
  );

  const addImage = (imageUrl) => {
    console.log(imageUrl);
    const newImageBoxData = {
      type: "IMAGE",
      size: { width: "50%", height: "50%" },
      position: { x: 50, y: 100 },
      content: imageUrl,
    };

    setSlide((prevData) => {
      const updatedSlide = prevData.map((slide, i) => {
        if (i === activeSlide) {
          const updatedData = [...slide.data, newImageBoxData];
          return {
            ...slide,
            data: updatedData,
          };
        }
        return slide;
      });
      return updatedSlide;
    });
  };

  const handleGlobalContextMenu = (event) => {
    if (
      slide[activeSlide].data.length > 0 ||
      slide[activeSlide]?.backgroundImage
    ) {
      event.preventDefault();
      const rect = event.target.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      if (
        slide[activeSlide]?.backgroundImage &&
        slide[activeSlide]?.data[clickedIndex]?.type !== "IMAGE"
      ) {
        setContextMenuItems([
          {
            lable: "Remove background image",
            onClick: removeBackgroundImage,
          },
        ]);
      } else {
        setContextMenuItems([
          {
            lable: "Set as background image",
            onClick: setBackgroundImage,
          },
        ]);
      }
      setContextPosition({
        x,
        y,
      });
      setShowContextMenu(true);
      console.log("context menu");
    }
  };

  useEffect(() => {
    document.addEventListener("contextmenu", handleGlobalContextMenu);

    return () => {
      document.removeEventListener("contextmenu", handleGlobalContextMenu);
    };
  }, [handleGlobalContextMenu]);

  const setBackgroundImage = () => {
    setShowContextMenu(false);
    const src =
      slide[activeSlide]?.data[clickedIndex]?.type === "IMAGE"
        ? slide[activeSlide].data[clickedIndex].content
        : "";

    manipulateBackgroudImage(src);

    deleteElement();
    setElementContextMenu(false);
  };

  const removeBackgroundImage = () => {
    setShowContextMenu(false);
    manipulateBackgroudImage("");
  };

  useEffect(() => {
    const enterFullscreen = () => {
      if (slideContainerRef.current) {
        if (slideContainerRef.current.requestFullscreen) {
          slideContainerRef.current.requestFullscreen();
        } else if (slideContainerRef.current.mozRequestFullScreen) {
          // Firefox
          slideContainerRef.current.mozRequestFullScreen();
        } else if (slideContainerRef.current.webkitRequestFullscreen) {
          // Chrome, Safari and Opera
          slideContainerRef.current.webkitRequestFullscreen();
        } else if (slideContainerRef.current.msRequestFullscreen) {
          // IE/Edge
          slideContainerRef.current.msRequestFullscreen();
        }
      }
    };

    const exitFullscreen = () => {
      if (document.mozCancelFullScreen) {
        // Firefox
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        // Chrome, Safari and Opera
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        // IE/Edge
        document.msExitFullscreen();
      }
    };

    if (slideShow) {
      enterFullscreen();
    } else {
      exitFullscreen();
    }
  }, [slideShow, activeSlide]); // Add activeSlide as a dependency

  return (
    <div
      className="row w-100  pb-3 mx-auto"
      onClick={() => {
        setShowContextMenu(false);
      }}
      role="outter-container"
    >
      {slide.length > 0 && (
        <div
          className={`box col-12 d-flex flex-column justify-content-center align-content-center ${
            slideShow ? "slideshow-mode" : ""
          }`}
          key={activeSlide}
        >
          {!slideShow && (
            <Toolbar onAction={handleAction} addTextbox={handleAddTextbox} />
          )}
          <ImageUpload onUpload={addImage} />
          <div
            className={`form-template p-5 w-100 ${
              slideShow ? "fullscreen" : ""
            }`}
            style={{
              backgroundImage: `url(${slide[activeSlide]?.backgroundImage})`,
              backgroundSize: "cover",
              backgroundPosition: "center",
              backgroundRepeat: "no-repeat",
              backgroundColor: slide[activeSlide]?.backgroundColor,
            }}
            id="slide"
            ref={slideContainerRef}
          >
            <div className="row w-100 h-100 position-relative" role="slide">
              {showContextMenu && (
                <ContextMenu
                  position={contextPosition}
                  onClose={() => setShowContextMenu(false)}
                  menuItems={contextMenuItems}
                  setBackgroundImage={setBackgroundImage}
                />
              )}
              {slide[activeSlide].data.length !== 0 ? (
                slide[activeSlide].data.map((item, i) => {
                  return (
                    <ResizeableContent
                      key={i}
                      editorId={i}
                      type={item.type}
                      initialSize={item.size}
                      initialPosition={item.position}
                      onResizeStop={(e, direction, ref, delta, position) => {
                        handleResizeStop(e, direction, ref, delta, position, i);
                      }}
                      onDragStop={(e, d) => {
                        handleDragStop(e, d, i);
                      }}
                      className="col-12 rnd-container position-absolute"
                      onFocus={handleFocus}
                      value={item.content}
                      onChange={(e) => slideContentChangeHandler(e, i)}
                      ref={(el) => (editorRefs.current[i] = el)}
                      slideShow={slideShow}
                    />
                  );
                })
              ) : (
                <></>
              )}
            </div>
          </div>

          {slide.length > 1 && (
            <div className="bottom-props">
              <span className="delete-icon-svg">
                <img
                  onClick={removeSlide}
                  className="img-responsive  cursor-pointer"
                  src="./../img/delete.svg"
                  alt=""
                />
              </span>
              <span className="copy-icon-svg pt-2">
                <img
                  onClick={copySlide}
                  className="img-responsive cursor-pointer"
                  src="./../img/copy.svg"
                  alt=""
                />
              </span>
            </div>
          )}
        </div>
      )}
    </div>
  );
};
export default Multipage;

**Problem Description
**

  • Issue: When changing the slide content (e.g., adding or modifying text, images, or other elements), the application exits fullscreen mode automatically.
  • Behavior Observed: The fullscreen mode is triggered correctly, but any state change that re-renders the slide causes it to exit fullscreen.

Backend gets stuck in deployment

I have a project that gets deployed on an ec2 instance automatically via github actions. But after some recent changes to the code, the deployment takes too long and often gets stuck somewhere in between the deployment process. Mainly it gets stuck at “tsc -p .” and other times anywhere random. I have the logs of github actions here. There is nothing wrong with the compilation in local environment.enter image description here

Could you please guide me on how to debug this or what are the steps I can follow to fix this ?

I tried to fix the typescript compilation that happens with “tsc -p” as it was producing an error. It got resolved for once and the code was deployed with no issues, but then again it started getting stuck while producing no errors whatsoever.
There is no problem with the ec2 instance as well. Can it be the case that my node version is old (16) which is producing problems ?

can anyone please tell me why my listofRestaurants is undefined? haven’t data been fetched?

import Restro from "./RestroCard";
import { useState, useEffect } from "react";

const Body = () => {
  const [listOfRestaurants, setListOfRestaurants] = useState([]);

  useEffect(() => {
    Fetchy();
  }, []);

  const Fetchy = async () => {
    const response = await fetch(
      "https://allsetnow.com/api/address/v5/?sort_point=29.38385,+-94.9027&limit=100&offset=0"
    );
    const json = await response.json();

    setListOfRestaurants(json?.data?.data);
  };  

  return(
    <>
      {listOfRestaurants.map((restaurant) => (
        <Restro key={restaurant.id} Resdata={restaurant} />
      ))}
    </>
  )
};

export default Body;

Ngx-Charts – how to add text inside a normalized bar chart for each normalized section

I have created a normalized horizontal bar chart using ngx-charts

Here is my sample code https://stackblitz.com/edit/swimlane-normalized-horizontal-bar-chart-wunjep?file=app%2Fdata.ts

It looks like this
enter image description here

But I want to add text in the middle of the bar chart for each section so it looks something like

enter image description here

Is there a way to do this.
Help is much appreciated 🙂

open a app direct from package name using nodejs or php

generate a link which contain package name of the app that will open direct app if it is already installed on mobile means direct launch app and if it is not installed than option install from play store using nodejs or php

i have try https://play.google.com/store/apps/details?id=com.example.app but it is redirect to play store if app is installed i want that direct open app if i click on link

Export “Total” row into excel from ag-grid

I have data in below format in ag-grid and when I try to export to excel all the rows got exported except “Total” row.

product category price1 price2 price3
apple   fruit1    3       4     5
apple   fruit2    6       8     5
carrot  veg1      5       6     9
carrot  veg2      58      25    60
Total             72      43    79

The above data has been grouped by columns on product and category.

I know this is limitation in ag-grid and should be using processRowGroupCallback to include this data. I am not able to achieve this and need some clear examples of how we can achieve this.

Deploy Node / aplicação no ar

sou estudante de desenvolvimento sistemas e nunca fiz um deploy com node. Minha aplicação utilizei o express, handlebars, body-parser, dotenv e nodemailer, como fazer um deploy com node ?

Quero colocar minha aplicação no ar

Hamburger menu using aria-expanded, JS/JQuery, and CSS translation not activating on Safari

I added a hamburger menu to my site recently and have been trying to get it to work on Safari (it works perfectly fine on all devices and browsers tested except Apple Products/Safari) .. it does work on Chrome on MacOS however for some reason.. even though I thought that was just a skin for Safari the way that Apple set it up. anyway..

TLDR The menu just doesn’t open on Safari.

Does anyone out there know the solution/the error in my code that has taken away the last 10 hours of my life?

Source:
REPO – https://github.com/Laterthanlate/RoomToRoam
SITE – https://laterthanlate.github.io/RoomToRoam

I tested on MacBook web inspector/developer environment, tested on iPhone. The hamburger.js file has the script for the nav/hamburger menu. I tested too many fixes to list here with modifications to the main.css, the hamburger.js, and the index.html, following/experimenting with every bit of advice I could find online/on CanIUse, on MDN/W3, etc. I even used GPT for like 3 hours to see if it could help figure it out. Nothing.

I tested to see if it was something simple like an issue with the css translation, but simplifying it down to just a display change, without any transformations/translations/transitions did not work. I tried simplifying the JS and removing anything that may conflict with Safari to the best of my knowledge/research, but it didn’t work.

Are there any techniques in getting past Javascript checks with BeautifulSoup?

So I have the following script:

#!/usr/bin/env python3
import requests
from bs4 import BeautifulSoup

def parse_marketwatch_calendar(url):
    #page=requests.get(url).text
    #soup=BeautifulSoup(page, "lxml")
    soup = BeautifulSoup(requests.get(url).text, 'html5lib')
    print(soup)
    title_parent = soup.find("div", class_="column column --primary")
    print(title_parent)
url = "https://www.marketwatch.com/economy-politics/calendar?mod=economy-politics"
parse_marketwatch_calendar(url)

However, when I run it, I get the following repeated response:

<html><head><title>marketwatch.com</title><style>#cmsg{animation: A
1.5s;}@keyframes A{0%{opacity:0;}99%{opacity:0;}100%{opacity:1;}}</style></head><body style="margin:0"><p id="cmsg">Please enable JS and disable any ad blocker</p><script data-cfasync="false">var dd={'rt':'c','cid':'AHrlqAAAAAMA0byAgFOkDSoAGKNiPA==','hsh':'D428D51E28968797BC27FB9153435D','t':'bv','s':47891,'e':'a873fd745afc33d92e8f68dbadb4eaa3536c2c677a9785033316a437fb980f49','host':'geo.captcha-delivery.com'}</script><script data-cfasync="false" src="https://ct.captcha-delivery.com/c.js"></script></body></html> None

A Javascript checker is intercepting my page and I’m not able to access the MarketWatch Economic Calendar itself. I suppose I can find a different source but without switching to Selenium, is there any way to get to the actual page with requests or urllib? I was thinking of adding a user agent header that’s JavaScript enabled but IDK if this would even work or if I’m better off going to Selenium to make the initial website call. Thanks! 🙂

debugger.SendCommand ‘Runtime.evaluate’ expression:’window.open’ does not work

I want to open a new tab with dynamic code in my chrome-extension(v3).
So I take the api: chrome.debugger.sendCommand(‘Runtime.evaluate’), it can execute the javascript I expected mostly.But ‘window.open’ can not make any sense while the ‘window.close’ can work well.

How cloud i make the code ‘window.open’ work well with chrome.debugger.sendCommand(‘Runtime.evaluate’)

await chrome.debugger.sendCommand({ tabId: 71418804 }, 'Runtime.evaluate', { expression:"window.open('https://www.baidu.com/')", includeCommandLineAPI:true, executionWorld: "MAIN" });