Category: javascript

In Vue advanced cropper , the moving class (vue-rectangle-stencil–moving) is not removing automatically when I stop moving the mouse, but if I refresh the page once means , it is removing automatically and working as expected.

I am using vue 2, vue advanced cropper version 1.11.6, there is no error message in console.

Image

My code:

    <template>
        <div>
        <b-sidebar  id="car-all-details" title="Sidebar with backdrop" backdrop right no-header prop no-close-on-esc no-close-on-backdrop>
            <div class="cropper_container d-flex w-100 mt-5">
                <div class="ml-3 w-50">
                    <cropper
                        ref="cropper"
                        class="upload-example-cropper cropper"
                        :src="image"
                        @change="cropperChangedNew"
                        :maxWidth="sizeRestriction.maxWidth"
                        :minWidth="sizeRestriction.minWidth"
                        :maxHeight="sizeRestriction.maxHeight"
                        :minHeight="sizeRestriction.minHeight"
             />
                </div>
           </div>
        </b-sidebar>
    </div>
    
</template>

<script>
import Vue from "vue";
import { Cropper } from 'vue-advanced-cropper'
import 'vue-advanced-cropper/dist/style.css';
Vue.use(Cropper);
export default {
    data(){
        return {
            croppedFinalImg : ''
        }
    },
    props: ["image", "sizeRestriction"],
    components: {
         Cropper
    },
    methods:{
        cropperChangedNew({ canvas }) {
            this.croppedFinalImg = canvas.toDataURL()
        },
    },
    mounted(){
        this.$refs.cropper.refresh()
        this.$root.$emit('bv::toggle::collapse', 'car-all-details')
    },
}
</script>

I tried to remove the class manually both by code and removing in dev tools , even removing the class, it is not working.

Faced up with problem, shown in this article: https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios#scrolling–unusable-positionfixed-element in Mobile Safari.

I’d caught this bug while coding the footer. My code structure is:

<div>
    ...
    <div className="wrap">
        <div className="footer">
            { ... content of tabs }
        </div>
    </div>
</div>

And the styles:

.wrap { 
    height: 60px;
    position: relative;
    z-index: 100;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 60px;
    width: 100%;
    z-index: 200;
    display: flex;
    background: #f2f2f7;
    border-top: 1px solid #f0f0f0;
}

Wanna say about solution. Maybe it will be helpful for someone.

I’ve tried solutions from the issues:

• How to force Safari to repaint position:fixed elements on scroll?
• Fixed position in Safari

But it didn’t look good and my footer was flickering. Sometimes (using very-very slow scroll) bug happened again.

I’ve also tried use “sticky” styles instead of “fixed”, for wrapper or footer, but it also didn’t work.

Finally, I found the solution:

1. I added listener on scroll event by js and changed styles.
   The idea is: until the scrolling ends, I add “sticky” class to the parent; when the scrolling ends, I remove it.
   I’ve seen similar issue with header here: React: Sticky header flickers in iOS Safari
2. I added “will-change: auto” styles to the wrapper.
   I found this idea from the comment: https://stackoverflow.com/a/51940706/22479266

The magic is that these fixes don’t work on their own, only using them both.

The final solution looks like:

const ref = useRef(null);

const handleScroll = useCallback(() => {
    if (ref.current) {
        if (ref.current.getBoundingClientRect().bottom > window.innerHeight) {
            if (!ref.current.classList.contains("sticky")) {
                ref.current.classList.add("sticky");
            }
        } else {
            ref.current.classList.remove("sticky");
        }
    }
}, []);

useEffect(() => {
    document.addEventListener('scroll', handleScroll);

    return () => {
        document.removeEventListener('scroll', handleScroll);
    }
}, [handleScroll]);

return <div className="wrap" ref={ref}>
    <div className="footer">
        { ... content of tabs }
    </div>
</div>

And the styles are:

.wrap {
    display: block;
    width: 100%;
    position: relative;
    z-index: 100;
    height: calc(60px + env(safe-area-inset-bottom));
    will-change: auto;
}

.footer {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    height: calc(60px + env(safe-area-inset-bottom));
    z-index: 200;
    width: 100%;
    display: flex;
    background: #f2f2f7;
    border-top: 1px solid #f0f0f0;
}

If anyone understands why this helps, please, tell me.

I’ve been asked to gradually add TypeScript type definitions for an existing package written in JavaScript and owned by us. It is built with rollup.

The library is organised as follows:

MyLib
|----/backend
|    |----index.js
|    |----index.js.map
|    
|----/frontend
|    |----index.js
|    |----index.js.map
|    
|----/lib
|    |----index.js
|    |----index.js.map
|
|----/src
|    |----index.js
|    |----common.js
|    |----be.js
|    |----fe.js
|    |----/components
|    |    |----ComponentA.js
|    |----/services
|    |    |----/nestErrorExceptions
|    |    |    |----index.js
|    |    |    |----ResultNotFoundException.js
|    |    |----/slugify
|    |    |    |----index.js
|
|----package.json
|
|----rollup.config.js
|
|----etc...

// src/index.js
module.exports = {
  ...(process.env.PLATFORM === 'BACKEND'
    ? require('../backend')
    : process.env.PLATFORM === 'FRONTEND' ? require('../frontend') : {})
}

// src/common.js
import slugify from './services/slugify'

export default {
  slugify,
}

// src/be.js
import common from './common'
import NestErrorExceptions from './services/nestErrorExceptions'

export default {
  ...common,
  NestErrorExceptions,
}

// src/fe.js
import common from './common'
import ComponentA from './components/ComponentA'

export default {
  ...common,
  ComponentA,
}

It is built with the following rollup config:

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import json from '@rollup/plugin-json'
import { babel } from '@rollup/plugin-babel'
import { terser } from 'rollup-plugin-terser'

import pkg from './package.json'

export default [
  {
    input: 'src/fe.js',
    output: {
      name: 'my-lib-fe',
      dir: 'frontend',
      entryFileNames: 'index.js',
      format: 'umd',
      sourcemap: true
    },
    plugins: [
      resolve(),
      json(),
      babel({ babelHelpers: 'bundled', exclude: 'node_modules/**' }),
      commonjs(),
      terser()
    ]
  },
  {
    input: 'src/be.js',
    output: {
      dir: 'backend',
      entryFileNames: 'index.js',
      format: 'cjs',
      exports: 'default',
      sourcemap: true
    },
    plugins: [
      // resolve(), // not to resolve nestjs
      json(),
      babel({ babelHelpers: 'bundled', exclude: 'node_modules/**' }),
      commonjs(),
      terser()
    ]
  },
  {
    input: 'src/index.js',
    output: {
      name: 'my-lib',
      dir: pkg.main, // 'lib'
      format: 'cjs',
      sourcemap: true
    },
    plugins: [
      json(),
      babel({ babelHelpers: 'bundled', exclude: 'node_modules/**' }),
      terser()
    ]
  },
]

I’ve written some .d.ts files along side, such as src/services/nestErrorExceptions/ResultNotFoundException.d.ts

MyLib
|----/backend
|    |----index.js
|    |----index.js.map
|    
|----/frontend
|    |----index.js
|    |----index.js.map
|    
|----/lib
|    |----index.js
|    |----index.js.map
|
|----/src
|    |----index.js
|    |----common.js
|    |----be.js
|    |----fe.js
|    |----/components
|    |    |----ComponentA.js
|    |----/services
|    |    |----/nestErrorExceptions
|    |    |    |----index.js
|    |    |    |----ResultNotFoundException.js
|    |    |    |----ResultNotFoundException.d.ts
|    |    |----/slugify
|    |    |    |----index.js
|
|----package.json
|
|----rollup.config.js
|
|----etc...

// src/services/nestErrorExceptions/ResultNotFoundException.d.ts
import { HttpException } from '@nestjs/common'

export declare class ResultNotFoundException extends HttpException {
  constructor(location: string, err: unknown)
}

Now how can I configure rollup (or some plugin) to take those definitions and bring them (eventually merged?) into the lib / backend / frontend directory?

I’m new to nodejs and redis and I’m trying to create a web app have which should get recent tweets containing a set hashtag and pattern :

const twitterClient = require('./init')
var counts = 0;
var tweet_array_IDs = [];
var hashtag_search = "covid";
var pattern = "vaccine";
var redis = require("redis"),
    redisClient;

redisClient = redis.createClient({
    legacyMode: true,
});

redisClient.connect();

redisClient.get(pattern, function (err, tweet_counts){

    if (err !== null){
    
        //gestisci l'errore
        console.log("Error: " + err);
    }

    if (tweet_counts === null)
        counts = 0;
    else
        counts = parseInt(tweet_counts, 10);
        
});

var get_recent_tweet = function(hashtag_search, pattern){

    twitterClient.tweets.search({
        q: '#' + hashtag_search,
        result_type: 'recent', //get latest tweets with this hashtag
    }).then ((response) => {
        var tweet_array = response.statuses;
        tweet_array.forEach(function (tweet){           
            // if current tweet is not in the list, add it
            if (tweet_array_IDs.indexOf(tweet.id) === -1){
                tweet_array_IDs.push(tweet.id);
                if (tweet.text.indexOf(pattern) > -1){
                                counts++;
                                redisClient.incr(pattern);
                        }
            }
        });


    }).catch ((err) => console.error(err));
}


setInterval(function () {
    get_recent_tweet(hashtag_search, pattern);  
    module.exports = counts;
}, 3000);

My question is the following, I’ve read that the get method() in nodejs is asynchronous so should the get_recent_tweet function be placed inside the callback function of the redisClient.get() method ?

I have a problem with my NextJS App. I want to create a Portfolio on my website, using Strapi to add some content when I realize new projects. I can’t succeed to extract the data array from Axios tu use it in my App. It is blocked in my GetProjects function.

This is the Page.jsx

import styles from './page.module.css'
import Introduce from './components/Introduce'
import Process from './components/Process'
import Scaling from './components/Scaling'
import Techs from './components/Techs'
import Portfolio from './components/Portfolio'
import Socials from './components/Socials'
import variables from './globals.scss'
import "../../node_modules/bootstrap/scss/bootstrap.scss"

export default function Home() {

  return (
    <main className='container-fluid'>
      <Introduce />
      <Process />
      <Scaling />
      <Techs />
      <Portfolio />
      <Socials />      
    </main>
  )
}

The portfolio component :

import React from "react";
import GetProjects from "./GetProjects.jsx";

function Portfolio() {


    return (

        <div className='vh-100 d-flex align-items-center slide bg-waterblue row justify-content-center'>
            <div className='col-md-5'>
                <h2 className="text-lg-start text-center fw-bold title text-gold">My Portfolio.</h2>
                <p className="text-light text-lg-start text-center fw-semibold">Some images illustrate better
                    than long speaches.
                </p>
            </div>
            <div className="col-md-5">
                <div className="row row-cols-4">
                    <div className="row">
                    <GetProjects />
                    </div>
                </div>
            </div>

        </div>
    )
}

export default Portfolio;

And this is the GetProjects.jsx component, including the function that doesn’t work:

import React from "react";
import axios from "axios";

function GetProjects() {

    async function getData() {
        try {
            const response = await axios.get('http://localhost:1337/api/projects?populate=*');
            const data = response.data.data;
            // console.log(data);

            return (
                <div>
                    {function renderData(data) {
                        data.map(project => {
                            <li>{project.attributes.title}</li>
                        })
                        
                        
                            <div>
                                <ul>
                                    {renderData(data)/* Doesn't works */}
                                </ul>
                            </div>
                        
                    }}

                </div>
            )

        } catch (error) {
            console.error(error); // Don't forget to add "?populate=*" to the API endpoint.
        }
    }

    getData()

}

export default GetProjects;

Do you have advice? Some idea to extract that array and use it in the app?

Thank you so much!

We’re looking to streamline our authentication process and would love some insights or tips on how to make this integration smooth and seamless. Any advice or pointers would be greatly appreciated! Thanks in advance for your help!

I haven’t tried anything yet as I’m facing a problem integrating PostgreSQL with Clerk authentication. I was expecting the integration to work smoothly, but I’m encountering difficulties. Can you provide guidance on how to proceed or troubleshoot the issue?

I’m trying to build a dynamic select box but when I click each .option tag its title place in all select-show in entire page.

I want it to just be placed in the .select-show element that is exactly in the same parent .selectbox tag and not the others.

$(".option").click(function() {
  let selectBoxShow = $(this).parent().find(".select").find(".select-shows");
  let optionTitle = $(this).find(".option-title").text();
  selectBoxShow.text(optionTitle);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>

<div class="selectbox w-50 mb-5">
  <div class="select">
    <div>
      <i class="fa-light fa-grid-2"></i>
      <span class="select-shows">Select your City</span>
    </div>
    <i class="fas fa-angle-down"></i>
  </div>
  <menu class="options">
    <div class="option">
      <div class="option-container">
        <i class="fas fa-angle-left"></i><span class="option-title">Whitehorse</span>
      </div>
    </div>
    <div class="option">
      <div class="option-container">
        <i class="fas fa-angle-left"></i><span class="option-title">Yellowknife</span>
      </div>
    </div>
    <div class="option">
      <div class="option-container">
        <i class="fas fa-angle-left"></i><span class="option-title">Regina</span>
      </div>
    </div>
    <div class="option">
      <div class="option-container">
        <i class="fas fa-angle-left"></i><span class="option-title">Winnipeg</span>
      </div>
    </div>
    <div class="option">
      <div class="option-container">
        <i class="fas fa-angle-left"></i><span class="option-title">Charlottetown</span>
      </div>
    </div>
  </menu>
</div>

My phone story is full and no space my phone
And my phone is second hand phone so is more problems
Also my phone is hang very much

My new phone is black colour and so much stored
His body is strong and smooth
And very amazing

I see examples where people, in order to check if e.key is a printable character, check key.length (where 1 means a printable char). Other people also check for !e.ctrlKey && !e.metaKey && !e.altKey (modifier key).

For what I can see doing some tests, only the first is required. So, Is the second check just excessive zeal?

document.addEventListener('keyup', (e) => {
    const isPrintableChar = e.key.length === 1;
    const noModifier = !e.ctrlKey && !e.metaKey && !e.altKey;

    // Just check the length
    if (isPrintableChar) {
        console.log('printable');
    }

    // Check both length and if it's a modifier
    if (isPrintableChar && noModifier) {
        console.log('printable+');
    }
});

I am developing a Docker Desktop extension and I am able to get it running locally as desired, but when I create the actual extension, i.e. the Docker image, the Tailwind CSS I am using does not render correctly.

What could be the reason for this?

This is my simple index.html file,

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Title</title>
    <script src="index.js"></script>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div id="root">
      <div class="relative flex w-full content-center min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12 items-center ">
        <svg class="animate-pulse"  width="94" height="52" viewBox="0 0 94 52" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- paths -->
        </svg>
        <p class="mt-6 text-zinc-800">Hang tight! The service is starting..</p>
      </div>
    </div>
  </body>
</html>

My index.css looks like this,

@tailwind base;
@tailwind components;
@tailwind utilities;

I have a simple JavaScript function that checks if the service at my address is running and redirects the user to that address when it is,

function checkServer() {
    fetch('http://my-address')
      .then(response => {
        if (!response.ok) {
          throw new Error('Server not ready');
        }
        document.getElementById('loader').style.display = 'none';
        window.location.href = 'http://my-address';
      })
      .catch(error => {
        // Server not ready yet. Wait for 2 seconds and try again
        setTimeout(checkServer, 2000);
      });
  }

  window.onload = checkServer;

I have used this guide to install and configure Tailwind CSS and all of the generated files are included in my Docker image (tailwind.config.css and postcss.config.css are included within the ui directory).

Finally, this is my Dockerfile,

FROM node:18-alpine
#labels

COPY docker-compose.yaml .
COPY metadata.json .
COPY ui ui

RUN cd ui && npm install

The rest of my code is within the src/ui directory.When I cd into my ui directory and run npm run dev, the service runs without any problem. However, when I create a container out of it and run it as an extension on Docker Desktop, it does not work. In fact, I realized that the JavaScript function I have is not correctly routing the application to my address either.

Prior to adding Tailwind CSS, this worked fine; both locally and on Docker Desktop.

Next.js 14.1 Dev Mode Compilation Extremely Slow – Seeking Solutions

I’ve recently upgraded my Next.js project to version 14.1, excited about the new features and improvements. However, I’ve noticed a significant slowdown in compilation times while running the project in development mode (next dev). It’s taking noticeably longer than before, which impacts my workflow productivity.

Has anyone else encountered this issue with Next.js 14.1 in development mode? If so, are there any known fixes or optimizations that can help speed up the compilation process?

Here are a few details about my setup:

Next.js version: 14.1
Node.js version: node-v20.11.0-x64
Operating system: Win 10

I’ve tried some basic troubleshooting steps like clearing caches and ensuring my dependencies are up to date, but the issue persists. Any insights or suggestions would be greatly appreciated. Thank you!

I have the content script of a chrome extension containing a function which is supposed to fire only when a particular button is clicked. But I notice that the function is fired once when the button is clicked and it keeps on calling itself multiple times( not infinite)

 button.addEventListener("click", handleButtonClick);

 function handleButtonClick() {
        extractedData = function3();
        // Your custom logic for button click
        setTimeout(() => {
            fillContentEditableWithDummyText('Loading...')
         
            fetch('a valid end point',{
                method: "POST",
                body: JSON.stringify({
                    email: user.email,
                    extractedData: extractedData
                })
            }).then(res => res.json()).then(data => fillContentEditableWithDummyText(data.message))
        },300);
        //fillContentEditableWithDummyText();
    }

When I tried to debug, noticed that once function3() is returned, the handleButtonClick() function is called again

I’m trying to make sure that a number counter above a graph matches the graph’s line animation perfectly. Right now, the number jumps to the final value irrespective of the duration, but I want it to smoothly follow the line animation.
I am trying to fix the issue by either of the following

• Is there any way to tune / sync the odometer and line animation
  OR b) Is there a way to do this without adjusting duration settings?
  OR
• Can I somehow get the values as the graph animates, so I can
  update the number counter in sync?

I have tried using the events listed here, but none of them emit a event on animation per frame.
https://plotly.com/javascript/plotlyjs-events/

Here is the counter / odometer that i have used
https://www.npmjs.com/package/vue-countup-v2

Here is the codesandbox demo

https://codesandbox.io/p/sandbox/button-t5stcq

I have a Grid with mui which is dragable. On drop, I want it to edit my configuration state to save its position in database.

Here is how my state is constructed :

interface SocialMediaState {
  socialLinks: string;
  conf: {
    confId: string;
    conf: {
       hasIcon: boolean;
       hasLabel: boolean;
       position: number;
    }
  };
}

Here is my try, but the problem is that the position only stays at 0 or 1. So this works nice when there are only 2 items, but when there is more, it doesn’t work.

I’m trying to figure out how to adapt this logic to multiple items.

const SocialMediaSettings = () => {
  const [socialMedia, setSocialMedia] = useAtom(socialMediaHeaderAtom);

  [...]

  const handleDragStart = (event, index) => {
    event.dataTransfer.setData("index", index.toString());
  };

  const handleDrop = (event, newIndex) => {
    const oldIndex = parseInt(event.dataTransfer.getData("index"));

    const networkKeys = Object.keys(socialMedia.conf.conf);
    const draggedNetwork = networkKeys[oldIndex];
    const targetNetwork = networkKeys[newIndex];

    const updatedConf = { ...socialMedia.conf.conf };
    const draggedConfig = updatedConf[draggedNetwork];
    const targetConfig = updatedConf[targetNetwork];

    const tempPosition = draggedConfig.position;
    draggedConfig.position = targetConfig.position;
    targetConfig.position = tempPosition;

    setSocialMedia({
      ...socialMedia,
      conf: {
        ...socialMedia.conf,
        conf: updatedConf,
      },
    });
  };

  return (
    <Grid container direction="column">
      {Object.entries(socialMedia.conf.conf)
          .sort(([, a], [, b]) => a.position - b.position)
          .map(([network, config], index) => (
            <Grid
              item
              key={network}
              draggable="true"
              onDragStart={(event) => handleDragStart(event, index)}
              onDrop={(event) => handleDrop(event, index)}
              onDragOver={(event) => event.preventDefault()}
            >

this is the code i get from the advertiser. i cant seem to add it dynamically. i understand you cant use document.write after load page so is there a way to run this?

<script type="text/javascript">
                            atOptions = {
                                'key' : '4d65e082e738af430fa34ddeac916be6',
                                'format' : 'iframe',
                                'height' : 250,
                                'width' : 300,
                                'params' : {}
                            };
                            document.write('<scr' + 'ipt type="text/javascript" src="//www.topcreativeformat.com/4d65e082e738af430fa34ddeac916be6/invoke.js"></scr' + 'ipt>');
                        </script>

they also gave me this code

<script async="async" data-cfasync="false" src="//pl22464107.profitablegatecpm.com/70dc149ec489e883ffe0c36bd73d05d0/invoke.js"></script>
                                <div id="container-70dc149ec489e883ffe0c36bd73d05d0"></div>