Category: javascript

I have 3 branches, main branch, dev branch and a feature-1 branch which is a child of the dev branch. I want to be able to continue working on the dev branch as normal, to update any “core features” of the app. But i also want to be able to push feature-1 up, and after a certain amount of time, say 2 months, remove the changes that came from feature-1 without completely removing the branch as i want to keep a backup for future reference.

In addition, i want to be able to make more features on branches e.g. feature-1, feature-2, feature-3. And to be able to push these up and remove them at will.

I don’t want the code for all features to be inside the main app always as these features will be timegated.

Is this possible. If so, how would i go about doing that?

I have looked at various youtube videos and sites online. I have also looked in to releases and tags on github but not sure if these accommodate my particular needs. I have also thought about changing the main branch which my host looks at to see if this would serve as a solution.

For a project I’m working on, I have to long poll an endpoint to request a list of events. So, I’m running a locally hosted NodeJS server with an endpoint that returns the list of events that have come in since the last time the endpoint was hit. This endpoint clears the list every time it is read.

const config = require('./config.json')
const express = require('express');

const app = express();
app.use(express.json());
app.use(express.urlencoded());

var events = [];

// fetch the list of events from the last read
app.get("/changes", function(request, response, next){
    response.json(events);

    // clear out the message queue
    events = [];
});

// other logic exists that adds events to the array

module.exports = {
    startAppServer : ()=> {
        const port = config.PUBLIC_PORT // 3000
        app.listen(port, function(){
            console.log(`${new Date()} - server is listening on port ${port}`);
        });
    },
}

I’m new to designing REST APIs, and this seems to be doing two operations of reading and deleting the resource. So my question is simply, should this be a GET because it is fetching the list of changes? or should it be a DELETE that returns the deleted elements?

Is there a cleaner, better, or more RESTful way to structure this? Separating the logic into two operations seems like an unnecessary call, even though traffic is not really a big concern here.

I am trying to have a different image appear depending on the device that the page is being viewed on (either a mobil or a desktop). The issue I am facing is that the images from what I can tell from the design are not background images.

This is what I have done thus far:

<main>
  <div class="faq" id="faq">
      <div class="images">
        <img src="./images/illustration-woman-online-mobile.svg" class="woman mobile" alt="">
        <img src="./images/bg-pattern-mobile.svg" class="pattern mobile" alt="">
        <img src="./images/illustration-woman-online-desktop.svg" class="desktop" alt="">
        <img src="./images/bg-pattern-desktop.svg" class="desktop" alt="" srcset="">
        <img src="./images/illustration-box-desktop.svg" class="desktop" alt="" srcset="">
      </div>
      <h1>FAQ</h1>
      <div class="concern team" id="team">
        <div class="section">
          <p class="question">How many team members can I invite?</p>
          <img src="./images/icon-arrow-down.svg" alt="">
        </div>
        <p class="answer">
          You can invite up to 2 additional users on the Free plan. There is no limit on
          team members for the Premium plan.

and the sass for the html:

.faq {
    position: relative;
    margin: 0 1rem;
    padding: 2rem 1rem 3rem;
    border-radius: 20px;
    background-color: white;
    
    .woman {
        position: absolute;
        top: -119px;
        left: 32px;
        right: 28px;
    }

    .desktop {
        visibility: hidden;
    }

    .pattern {
        position: relative;
        top: -25px;
        left: 31px;
        // right: ;
    }

The issue is when I use visibility hidden on the mobile version for example there’s whitespace.

Here’s a link to the repo for the complet code Github

I have a web application built on react js/next js where I have a couple of pages, including some globally used components, such as: Header and Footer.

The problem is, I don’t want to re-render the whole component and APIs used in global components. I am not sure. How can I do that?

Please help.

HOC: Main.js

export default function Main(props) {
  const { authentication } = useSelector((state) => state);
  const router = useRouter();
  const shouldRedirect =
    !!unsecureRoutes.find((i) => i === router.route) &&
    authentication?.loggedIn;

  return (
    <main id="main" className={classNames(props.class)}>
        <>
          <Header menuVisible={false} menuType={"Main Menu"} />
          <>{props.children}</>
          <Footer />
        </>
      )}
    </main>
  );
}

Home.js

export function Home() {
  const { user, loggedIn, authenticating } = useSelector(
    (state) => state.authentication
  );

  useEffect(() => {
    if (loggedIn && user) {
    }
  }, [loggedIn, user]);

  return (
    <Main
      title={"One stop solution for all education needs"}
      description={
        "ilmyst.com is the one stop solutions for all education needs. At ilmyst.com you can find your nearest tutor online, organise & join educational webinars, learn skills online & much more."
      }
    >
        [Content goes here]
    </Main>
  );
}

export default Home;

I have recently started working with JS and its capabilities and I was trying to create a general menu that resembled something similar to a visual map (or if your prefer, a mindmap).

The visual map would be developed by different buttons (that link you with other pages that I still have to develop) displayed on the screen and in the background I would have a canvas that executes a JS script which draws the different lines that connect to every button onscreen, giving it then that “mindmap resemblance”.

Here is the code for the page:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>
            TRIAL
        </title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div>
            <h1>
                TITLE
            </h1>
        </div>
        <div class="viewport">
            
            <button id="btn1">BUTTON 1</button>
            <button id="btn2">BUTTON 2</button>
            
            <canvas id="canvas" style="z-index:-1; position: absolute;">
                    <script>
                            var btn1 = document.querySelector("#btn1");
                            var btn2 = document.querySelector("#btn2");
                
                            function getOffSet(el) {
                                const rect = el.getBoundingClientRect();
                                return {
                                    x: rect.left,
                                    y: rect.top
                                };
                            }
                
                            var coord_btn1 = getOffSet(btn1);
                            var coord_btn2 = getOffSet(btn2);
                
                            function draw(btn_1_x,btn_1_y,btn_2_x,btn_2_y) {
                                const canvas = document.querySelector('#canvas');
                
                                if (!canvas.getContext) {
                                    return;
                                }
                                const ctx = canvas.getContext('2d');
                
                                
                                ctx.strokeStyle = "black";
                                ctx.lineWidth = 5;
                
                                
                                ctx.beginPath();
                                ctx.moveTo(btn_1_x, btn_1_y);
                                ctx.lineTo(btn_2_x, btn_2_y);
                                ctx.stroke();
                
                            }
                            draw(coord_btn1.x,coord_btn1.y,coord_btn2.x,coord_btn2.y);
                            console.log("Coords BTN1: X–>" + coord_btn1.x + "; Y–>" + coord_btn1.y);
                            console.log("Coords BTN2: X–>" + coord_btn2.x + "; Y–>" + coord_btn2.y);
                       </script>
            </canvas>
        </div>
    </body>
</html>

Here is the style.css file containing the buttons and some other things:

#btn1 {
    top: 100px;
    left: 100px;
    width: 80px;
    height: 40px;
    position: absolute;
    z-index: 2; /*so as to overlay over z -1 canvas*/
    background-color: grey;

}
#btn2 {
    top: 150px;
    left: 250px;
    width: 80px;
    height: 40px;
    position: absolute;
    z-index: 2; /*same for the second button*/
    background-color: grey;

}

.viewport {
    width: 100%;
    height: 100%;
}

The problem lies that when the line is drawn, it is below the two buttons (as I show with the uploaded picture). It gets even worse when you try to make the canvas to be the width of the page (width: 100%;). And the same problem still holds when adding new buttons in other places of the page.

I do not know how to fix it, but I think the JS is fine since I checked if it recorded the coordinates of both buttons in JS. And the functions for drawing the line seem to work when it is run alone, without any buttons, just adding some random coordinates. But it may be the case that there is something in the script that I forgot since I am new to JS.

For overlaying, the only way I know to do that is with the z-index property, but it does not seem to work.

For now, I am not worried with responsiveness of the webpage nor with the stylization of the buttons, I just want to get the buttons to be connected by the drawn line in the background.

If anyone knows which might be the mistake and if you have any suggestions as well for how to write JS script, would be very much appreciated. Thanks.

I’m trying to make a text fade in fade out transition effect as such:

let change = document.querySelector("#change")
let transition_duration = 2000

let title = ["a plane!", "Superman!", "a bird!"]
let i = 0

setInterval(async() => {
  change.style.transitionDuration = (transition_duration / 2000) + 's'
  change.classList.add("fadeout")

  setTimeout(() => {
    change.classList.remove("fadeout")
    change.innerText = title[i];
    i = (i + 1) % title.length
  }, transition_duration / 2);

}, 3000)

#change {
  padding: 0 0.5rem;
  background-color: red;
  border-radius: 3px;
  color: white;
  transition: all;
}

.fadeout {
  color: transparent !important;
}

It's <span id="change">a bird!</span>

But as you can see the width does not transition when the text changes the length of the <span>
is there fix for this?

Website with a ISSUE

I have a script working. When I click “+ or -” in the basket – the cost changes and the quantity of goods too. Without page refresh.

    add_action( 'wp_footer', 'cart_update_qty_script' );

function cart_update_qty_script() {
    if (is_cart()) :
    ?>
    <script type="text/javascript">
        jQuery('div.woocommerce').on('change', 'input.qty', function(){
            jQuery("[name='update_cart']").removeAttr("disabled").trigger("click");
        });
    </script>
    <?php
    endif;
}

Question.

Is it possible to modify this script in such a way that the quantity of goods in the mini-basket also changes?

Because when adding and reducing the quantity of goods – the mini basket does not react …
Quantity does not change

I wanted to create some timeouts which i can cancel globally, i’m creating a node.js app which contains different timeouts (number of timeouts is dynamic) and i need to cancel some of them based on their ID, but I don’t have access to IDs from other files.
Ideally i need to save related id in a mongodb database which i can fetch whenever i need.

file ‘create_timeout.js’
const timeoutID = setTimeout( fn, time)
I tried to saving timeoutID but it’s a circular structure and cause problems and it doesn’t have any id field.

file ‘cancel_timeout.js’
if (someCondition) { clearTimeout(specific_TimeoutID) }

I need a way to save id of timeout and then feed it as specific_TimeoutID to ‘cancel_timeout.js’ to cancel it.

How do I make a Bottom Navigation using “@react-navigation/bottom-tabs” I have two screens in my react native appwhich BottomNavigation will be “Home” and “Profile” screen How can I create that?For example in any random screen i can import that BottomNavigateimport { Pressable } from “react-native”component and i BottomNavigation will come also in any random screenfor example in enteremail screen i can do “navigation. navigate(‘home’)” and it will navigate from settings screen to home screencan you please help me to do that?

earlier I was achieving this by using Pressable and Text but it was very slow how can I use “@react-navigation/bottom-tabs” to do that?

App.js:

export default function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }} initialRouteName={routeName}>
        <Stack.Screen name="enteremail" component={Email} />
        <Stack.Screen name="settings" component={Settings} />
        <Stack.Screen name="profile" component={Profile} />
        <Stack.Screen name="home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}v

I’m trying to make a CLI application using prisma.

In my schema.prisma file I have a Folder and Phew table to make the “filesystem”

I want to delete all sub-folders and phews when a parent is deleted.

I tried to “Cascade” but it throws an error

Error validating: A self-relation must have onDelete and onUpdate referential actions set to NoAction in one of the @relation attributes. Read more at https://pris.ly/d/cyclic-referential-actions

Here is the Folder schema:

model Folder {
  folder_id        String   @id @default(auto()) @map("_id") @db.ObjectId
  name             String
  readonly         Boolean  @default(false)
  private          Boolean  @default(true)
  // relations
  user_id          String   @db.ObjectId
  user             User     @relation(fields: [user_id], references: [user_id], onDelete: Cascade)
  phews            Phew[]
  Folders          Folder[] @relation(name: "parent")
  parent           Folder?  @relation(name: "parent", fields: [parent_folder_id], references: [folder_id], onDelete: NoAction, onUpdate: NoAction)
  parent_folder_id String?  @db.ObjectId
  // timestamps
  createdAt        DateTime @default(now())
  updatedAt        DateTime @updatedAt
}

I read this docs but I didn’t find a way to solve this.

I am looking for a way to code one-liner arrow functions that do not return any value. For example:

    const fun = x => {
      console.log(x);
    };

I would remove the curly braces. Is it possible?

I want to get an array of all time zone names, a browser understand to give the user the possibility to select one of them.

I know I could get the time zone names for the time zone, the user is currently in like so:

    const browserLocale = new Intl.Locale(navigator.language);
    console.log(browserLocale.timeZones);

However I didn’t find any function, which returns a full list of all time zone names, the browser understands. (This may differ from browser to browser and from version to version)

Here is my really dumb version to get all names:

    function collectAllPossibleTimeZoneNames() {
      const az = Array.from({ length: 26 }, (_, i) => String.fromCharCode(97 + i));
      const aazz = az.flatMap((a) => az.map((b) => a + b));
      const AAZZ = aazz.map((item) => item.toUpperCase());
      const aazzAAZZ = aazz.flatMap((a) => AAZZ.map((b) => `${a}-${b}`));

      const length = aazzAAZZ.length;
      let oldProgress = "";

      const timeZoneNames = aazzAAZZ.reduce(
        (set, currentLocale, index) => {
          const progress = ((index / length) * 100).toFixed(1);
          if (progress !== oldProgress) {
            oldProgress = progress;
            console.log(`${progress}%`);
          }
          const locale = new Intl.Locale(currentLocale);
          if (!locale || !locale.timeZones || locale.timeZones.length === 0) {
            return set;
          }
          locale.timeZones.forEach((timeZoneName) => set.add(timeZoneName));
          return set;
        },
        new Set(),
      );

      const timeZoneNamesArray = Array.from(timeZoneNames);
      timeZoneNamesArray.sort();
      return timeZoneNamesArray;
    }

    console.log(collectAllPossibleTimeZoneNames());

This solution is practically useless as it takes far too long (about 2 minutes on my System)
I could use a code like this once and store the result in a database but these names may differ for different users.

Any guesses so far?

Thank you

I have two div classes, one for login and one for signup. Now, for the login div, there’s underlined text which asks to Sign Up, and for the signup div, there’s underlined text which asks to Log In. When these texts are clicked, the respective div should have no display and the other div should be displayed.

HTML:

<div class="login">
        <h2 class="textHead">MedConnect</h2>
        <h2 class="logintxt">Log In to Your Account</h2>
        <input type="text" class="loginemailtxt" name="email" placeholder="Email Address">
        <input type="password" class="loginpwdtxt" name="password" placeholder="Password">
        <button class="loginbtn" type="button" name="button">Log In</button>
        <h5 id="signuptext" style="margin-top: 50px; text-align: center;">Don't have an Account? <u style="cursor: pointer;">Sign Up</u></h5>
        <h6 style="text-align: center;">By clicking "Log In", you log back into your Existing Account</h6>
        <div id="errorMsg">
          <h5 id="loginNoEmail">Please enter your email address</h5>
          <h5 id="loginNoPassword">Please enter your password</h5>
          <h5 id="loginIncorrectCreds">Incorrect Email or Password</h5>
        </div>
      </div>

      <div class="signup" style="display: none">
        <h2 class="textHead">MedConnect</h2>
        <h2 class="logintxt">Create a New Account</h2>
        <input type="text" class="signupnametxt" name="Name" placeholder="Name">
        <input type="text" class="signupemailtxt" name="Email" placeholder="Email Address">
        <input type="password" class="signuppwdtxt" name="Password" placeholder="Create Password">
        <button class="signupbtn" type="button" name="Button">Sign Up</button>
        <h5 id="logintext" style="margin-top: 50px; text-align: center;">Already a Member? <u style="cursor: pointer;">Log In</u></h5>
        <h6 style="margin-top: 5px; text-align: center;">By clicking "Sign Up", you agree to our <u style="cursor: pointer;">Terms</u> and <u style="cursor: pointer;">Privacy Policy</u></h6>
        <div id="errorMsg">
          <h5 id="loginNoEmail">Please enter your email address</h5>
          <h5 id="loginNoPassword">Please enter your password</h5>
          <h5 id="loginIncorrectCreds">Incorrect Email or Password</h5>
        </div>
      </div>

JavaScript (creating a variable for each element required):

<script type="text/javascript">

var signuptxt = document.getElementById('signuptext');
var logintxt = document.getElementById('logintext');
var loginDiv = document.getElementsByClassName('login');
var signUpDiv = document.getElementsByClassName('signup');

</script>

I am starting in a new project where I have to automate the testing with cypress. I have some experience with cypress but only partially since I have been a developer till now and wrote only component testing.
Now that I have to take a lead here as a tester, I don’t know where or how to start?

The cypress experience that I have is with Angular where I always created the test file in the same component I developed. The core testing was the responsibility of QA.

Can anyone here from the QA or experience with cypress testing please guide me to kickstart. I have few questions like:

Should the tests be in the same repo as the developer code or should there be a separate project for it in the Gitlab?
How would I integrate the testing into CI/CD pipeline?

How should the project structure look like? Is there any example on internet?
Would this test be directly on the running application or I should build it locally and test there? For the first case, that means I don’t need any mock server for the testing?

FYI, it is javascript project.

According to the latest release (v11.1.0) change log:

Added support for mouse wheel zooming through chart.zooming.mouseWheel. This feature is embedded in the Highcharts Stock bundle, but requires an additional module file for the Highcharts bundle.

I’m building a line chart. I want to add this functionality to it but not exactly sure how.

I’m using Vue 3.

Here’s my code:

<template>
  <h1 style="text-align: center">Facilities Analyst</h1>
  <highcharts class="chart" :options="lineChartOptions"></highcharts>
</template>


<script>
/* eslint-disable */
import { decode_jwt_token_payload } from '@/services/auth';
import spectrumDataAll from '../../spectrum_example.json';
import { tuple } from 'ant-design-vue/lib/_util/type';
const spectrumData = spectrumDataAll[0];

export default {
  data() {
    return {
      username: '',
      authority: '',
      lineChartOptions: {
        chart: {
          zooming: {
            enabled: true,
            mouseWheel: true,
            type: "x",
          },
          height: "50%",
          type: 'line',
          // zoomType: 'x',
          resetZoomButton: {
            position: {
              // align: 'right', // by default
              // verticalAlign: 'top', // by default
              x: 0,
              y: -30
            }
          },
          events: {
            selection: function (event) {
              console.log(Highcharts.version);
              console.log(event);
              if (event.resetSelection) {
                this.xAxis[0].update({ tickInterval: 100 });
              }
              else {
                // Retrieve the minimum and maximum x-values
                let xAxis = event.xAxis[0];
                let minX = this.xAxis[0].categories[Math.floor(xAxis.min)];
                let maxX = this.xAxis[0].categories[Math.ceil(xAxis.max)];
                const range = maxX - minX + 1;
                let newTickInterval = this.xAxis[0].tickInterval;
                if (range > 1000) newTickInterval = 100;
                else if (range > 500) newTickInterval = 50;
                else if (range > 100) newTickInterval = 10;
                else if (range > 50) newTickInterval = 5;
                else if (range > 10) newTickInterval = 2;
                else if (range > 5) newTickInterval = 1;
                console.log(newTickInterval);
                // Set the calculated tickInterval for the x-axis
                this.xAxis[0].update({
                  tickInterval: newTickInterval,
                });
              }
            },
          },
        },
        credits: false, // can add credits in bottom right
        title: {
          text: 'Spectrum',
          align: 'left',
          style: {
            fontFamily: 'Montserrat, Arial, sans-serif',
            fontSize: '1.3rem',
            fontWeight: '600',
            color: '#181819',
          },
        },
        subtitle: {
          text: 'bla bla bla',
          align: 'left',
          style: {
            fontFamily: 'Montserrat, Arial, sans-serif',
            fontSize: '0.9rem',
            fontWeight: '600',
            color: '#a3a3a3',
          },
        },

        xAxis: {
          title: {
            text: 'Frequency (Hz)'
          },
          tickInterval: 100,
          offset: 10,
          gridLineWidth: 1, // Set the width of the X grid lines
          gridLineColor: '#e6e6e6', // Set the color of the X grid lines
          categories: [],
          crosshair: {
            width: 1,
            color: 'black'
          },
          events: {
            setExtremes: function (event) {

            },
            afterSetExtremes: function (event) {

            },
          },
        },
        yAxis: {
          title: {
            text: 'Velocity (mm/s)'
          },
          crosshair: {
            width: 1,
            color: 'black'
          },
        },
        tooltip: {
          animation: false,
          useHTML: true,
          headerFormat: '<table><tr><th colspan="2">{series.name}</th></tr>',
          pointFormat:
            '<tr><td style="color: {series.color}">M(x): </td>' +
            '<td style="text-align: left">{point.category} Hz</td></tr>' +
            '<tr><td style="color: {series.color}">M(y): </td>' +
            '<td style="text-align: left">{point.y} mm/s</td></tr>',
          footerFormat: '</table>',
          valueDecimals: 2,
          positioner: function (labelWidth, labelHeight, point) {
            var tooltipX, tooltipY;

            tooltipX = this.chart.chartWidth - labelWidth - 10; // Adjust the offset if needed
            tooltipY = labelHeight + 40; // Adjust the offset if needed

            return {
              x: tooltipX,
              y: tooltipY
            };
          },
        },
        legend: {
          enabled: false // Disable legend
        },
        series: []
      }
    };
  },
  methods: {
    convertDate(dateString) {
      const regex = /^(d{4})-(d{2})-(d{2})T(d{2}):(d{2}):(d{2})$/;
      const match = regex.exec(dateString);

      if (match) {
        const year = match[1];
        const month = match[2];
        const day = match[3];
        const hours = match[4];
        const minutes = match[5];
        const seconds = match[6];

        const formattedDate = `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;
        return formattedDate;
      }
      return "";
    }
  },
  created() {
    const { username, authority } = decode_jwt_token_payload()
    this.username = username
    this.authority = authority
    console.log(spectrumData)
    // Insert X categories:
    this.lineChartOptions.xAxis.categories = Array.from({ length: spectrumData.CountX + 1 }, (_, i) => spectrumData.StartX + i * spectrumData.IncX);
    // Insert Y series:
    for (let i = 0; i < spectrumData.Measures.length; i++) {
      this.lineChartOptions.series.push({
        data: spectrumData.Measures[i].Values.map(v => parseInt(v)),
        // data: spectrumData.Measures[i].Values.map(v => parseInt(v)),
        name: this.convertDate(spectrumData.Measures[i].Date),
        visible: i < 1,
        marker: {
          enabled: false,
        }
      })
    }
  },
  mounted() {
  }

};
</script>

<style>
.chart {
  background-color: #fff;
  box-shadow: 3px 0.5px 10px rgba(119, 119, 119, 0.25);
  border-radius: 8px;
  padding: 10px;
  margin-left: 5%;
  width: 70%;
}
</style>