javascript – Page 2295 – Blancer.com Tutorials and projects

d3.js passing in variable name to d.properties.column

I’ve traditionally used d.properties.columnName to access an array of values in d3.js.

But what if I want to pass in a string variable instead of hard-coding the column name?

i.e.:

var myColumn = "casesPerCapita"

Using d.properties.myColumn gives undefined, even if casesPerCapita is a valid field in my data.

Thanks!

Script to delete all of my messages as a regular user on Discourse forums software? [closed]

Could someone provide a script that I can run that will delete all threads/posts on a forum that is using the Discourse software? They allow regular users to delete their own messages.

The forum software: https://meta.discourse.org/

I have tried just about everything.

Syntax Error Building Angular 17 Site with AOT Enabled

Seeing a strange error message when building an Angular 17 site when aot is enabled. When aot is disabled the site builds without issue.

The error message identifies a line in one of our own custom npm libraries which the site consumes.

 [ERROR] Expected ";" but found "-"

    node_modules/@mycompany/angular-common/fesm2022/angular-common-library.mjs:1776:16:
      1776 │       let tmp_4_-1;

I understand that there is some particular syntax being used in the dependency which the aot compiler does not like, but I cannot seem to find the actual offending line in the file referenced. Line 1776 does not remotely resemble this. I have even gone through the mjs file and removed every line that ends in -1; and the error persists.

Is there any way to see the actual file in memory that ng build is working with when it encounters this syntax issue? Even if I could just see a bit more context of the lines around this one I might be able to identify the issue, but as it stands this message tells me nothing about where the error actually originates.

Don’t really need aot on this site, so disabling it is a viable option in this case, but would still like to know what the problem here is.

Script for tiny url to convert long url to short url in google sheets

I want to run a script from Google Sheets to shorten the long URL on a column. I have purchased the tinyurl addon but I want a script to run automatically from the column with long URLs to make short URLs to another column. As you can see I try a script but it doesn’t run.
Please for your help!!!

function tinyUrlShorten(V, T, sheet) {
  var longUrl = sheet.getRange(activeRow, V).getValue();
  var response = UrlFetchApp.fetch(url);
  var = response.getContentText();
  sheet.getRange(activeRow, T).setValue(shortUrl);
}

Can i use ‘if loop’ in addEventListener? [closed]

my question is simple..
can this work and if not why and how to do it right?

In the previous question people were lowering my score a lot (on questions). If it’s because these questions are simple, please don’t judge me. I’m a beginner, so I don’t know how everything works yet.. thank you

image [1]: https://i.stack.imgur.com/EFY3y.png

Svelte – add and delete items in drag and drop list

I have to rework a program (javascript & html). So I thought of using Tauri and Sevlte to give it a stand-alone version in a newer look. Taking the first steps is never easy, especially if you are more of a C programmer than C++ or anything else 🙁

Here is my problem:

I create a drag&drop zone with draggable elements:
using ‘svelte-dnd-action’.

in my main file “+page.svelte” I create an array holding the entries:

import SortableList from ./SortableList.svelte
 
let sensors = [ 
    {id: 0, title: 'USB1'},
    {id: 1, title: 'USB2'},
    {id: 2, title: 'USB3'},
    {id: 3, title: 'File: abc.txt'},
    {id: 4, title: 'File: 123.txt'},        
];

then I call
<SortableList list = {sensors}/>

Inside “SortableList.svelte” I loop over all list elements and call “ListElement.svelte” to display the element. (I know, I could do this directly here…)

<sectionuse:dndzone={{items: list, dropFromOthersDisabled}}
    on:consider={handleSort}
    on:finalize={handleSort}>    
    {#each list as item (item.id) }
        <div animate:flip={{ duration: flipDurationMs }}>
        <ListElement count = {item.id} id = {item.title}/>
    </div>
    {/each}
</section>

“ListElement.svelte” then creates the list-item to be displayed:

<div class="ListElement">
    <div style="display: inline-block;">
        <h1 class ={id}>{id}</h1>
    </div>
    <div style="display: inline-block;">
        <div >
            <p class ="{id}, IDtag" style="margin: 0px">{@html ListBoxString}:{count}</p>
        </div>
        <div >
            <button class={id} on:click={ListBoxClick}>{id}: Clicked {count} {count === 1 ? 'time' : 'times'}</button>
        </div>
    </div>
</div>

All of this works fine…… until I start working with the list. I have a button on that adds a new element to the array “sensors” This I have in “+page.svelte”:

function buttonClick(){
    let i=sensors.length;
        sensors = [...sensors,{id:i, title:'great'}];
}

It works :-), but if I manually sorted the list by drag&drop, adding an element restores the original order! 🙁

I would also like to add a “delete” button to each list element. But my guess: this would end in a similar problem. Having browsed for this “resorting issue” for hours I decided to ask the community.

What I tried:

renumbering the id values in “SortableList.svelte” I use the function “on:finalize…”… ugly animation, adding another element resorts the list.
using “on:drop” I get an “A11y: <section> with drop handler must have an ARIA role” error.

Well, I am sure there is a simple and elegant way to cover this problem.

Many thanks to all reading my question and maybe answering it.
Greetings
GvT

I want to only be able to get to my sweets after I’ve reached 10,000 steps. How does my remote lock talk to my smartwatch? [closed]

Can I use a smart padlock (or possibly a smart-lock door handle’s that support 3rd party API) and then use Google Fit API to monitor my steps, and then by writing a rule and logic on the smart-lock to only unlock once a I’ve reached 10,000 steps and then lock again after a duration of time? Do you think this is possible?

Advice please! 🙂

So far I’ve thought about building my own andriod mobile app that monitors my step data using Google Fit API, then using a smart-lock with API to monitor the steps data in my app, and then write a rule to only unlock once I;ve reached 10,000 steps. Is there a way to exclude the mobile app building step and have the smart-lock talk directly to my smart-watch?

Nextjs ServerSide how to revalidate expired jwt token?

I am revalidating jwt token onece it expired and I don’t have any idea how to do this on nextjs server side. here my jwt revalidate code:

function getAuthTokenFromCookie() {
  const cookieString = document.cookie;
  const cookies = cookieString.split(';');

  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim();
    if (cookie.startsWith('jwt_token=')) {
      const token = cookie.substring('jwt_token='.length);
      return token;
    }
  }

  return null;
}

function getRefreshTokenFromCookie() {
  const cookieString = document.cookie;
  const cookies = cookieString.split(';');

  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim();
    if (cookie.startsWith('refresh_token=')) {
      const token = cookie.substring('refresh_token='.length);
      return token;
    }
  }

  return null;
}


 

 



function setAuthTokenInCookie(token) {
  // Set the JWT token in the cookie
  document.cookie = `jwt_token=${token}; path=/`;
}

export async function handleAxois(url, method = 'get', options=null) {
  const token = getAuthTokenFromCookie();
  const refreshToken = getRefreshTokenFromCookie();
  const CSRF_TOKEN =  getCSRFTokenFromCookie()
  if (token) {
    const tokenParts = token.split('.');
    if (tokenParts.length === 3) {
      const payload = JSON.parse(atob(tokenParts[1]));
      const currentTimestamp = Math.floor(Date.now() / 1000);

      if (payload.exp < currentTimestamp) {
        console.log("payload", payload.exp)
        console.log("currentTimestamp", currentTimestamp)
        // Token has expired, refresh the token
        if (refreshToken) {
          return  axios
            .post(`${domainHost(window.location.hostname)}/api/token/refresh/`, { refresh: refreshToken }) //here must be provide refresh url
            .then((response) => {
              const newToken = response.data.access;
              // Update the token in the cookie
              setAuthTokenInCookie(newToken);
              console.log("token expaired")
              let headers = {
                'Accept': 'application/json',
                'Authorization': `Bearer ${newToken}`,
                'Content-Type': 'multipart/form-data',
                'X-CSRFToken':CSRF_TOKEN,

              };
              

              return axios({
                method,
                url,
                withCredentials: true,
                headers,
                credentials: 'include',
                data:  options ,
              });
            });
        } else {
          // Handle the case when refresh token is missing
          console.log('Refresh token not found');
          return Promise.reject(new Error('Refresh token not found'));
        }
      } else {
        // Token is still valid, proceed with the request
        console.log("token not  expaired")
        let headers = {
          'Accept': 'application/json',
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'multipart/form-data',
          'X-CSRFToken':CSRF_TOKEN,
        };

        return axios({
          method,
          url,
          withCredentials: true,
          headers,
          credentials: 'include',
          data:  options ,
        });
      }
    }
  }

  return Promise.reject(new Error('Token not found'));
}

Then on my client side I am using somethings like this

 handleAxois(`${domainHost(window.location.hostname)}/shop-details/`).then((res)=>{
    console.log(res)
    setStoreData(res.data)
  }).catch((err)=>{
    console.log(err)
  })

any idea how to use same concept on server side ?

Struts 6.3 tag removes id attribute

We are using Struts version 6.3.0.2. A third party JavaScript that we are using, needs an id property to be set in the script declaration.

The following code is used:

<s:script async="true" type="text/javascript" src="/javascript/Third-Party-Min.js?param1=Value1&param2=value2" id="unique_id" />

In the generated HTML code, the id gets removed. This is how it looks:

<script async type="text/javascript" src="/javascript/Third-Party-Min.js?param1=value1&param2=value2" nonce="Th7ugNVKpxxMfb5CfK7gc9Dr" />

Since the Script expects the id and throws an exception. If we don’t use <s:script> tag, the nonce value does not get generated and browser complains about content security policy violation. How to achieve id property inclusion with <s:script> tag?

Author BlancerPosted on 2024/04/03Categories javascript

Adding search fields to dependent dropdowns + having those dropdowns display text (2-in-1!)

I have a first website project where I have two dependent dropdown menus that I would like to 1) add a search option to each of and 2) have display text based on the combined selections.

The current menus:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript" type="text/javascript"> function dynamicdropdown(listindex) { switch (listindex) { case "salesforce" : document.getElementById("end").options[0]=new Option("End",""); document.getElementById("end").options[1]=new Option("Slack","slack"); document.getElementById("end").options[2]=new Option("Google Sheets","googlesheets"); break; case "slack" : document.getElementById("end").options[0]=new Option("End",""); document.getElementById("end").options[1]=new Option("Salesforce","salesforce"); document.getElementById("end").options[2]=new Option("Google Sheets","googlesheets"); break; case "googlesheets" : document.getElementById("end").options[0]=new Option("End",""); document.getElementById("end").options[1]=new Option("Salesforce","salesforce"); document.getElementById("end").options[2]=new Option("Slack","slack"); break; } return true; } </script> </head> <body> <center> <h2>Dependent dropdowns</h2> <div class="category_div" id="category_div"> <select id="source" name="source" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);"> <option value="start">Start</option> <option value="salesforce">Salesforce</option> <option value="slack">Slack</option> <option value="googlesheets">Google Sheets</option> </select> </div> <div class="sub_category_div" id="sub_category_div"> <script type="text/javascript" language="JavaScript"> document.write('<select name="end" id="end"><option value="">End</option></select>') </script> <noscript> <select id="end" name="end"> <option value="slack">Slack</option> <option value="googlesheets">Google Sheets</option> </select> </noscript> </div> </center> </body> </html>

For reference, this is adapted from this Stack Overflow response – didn’t choose the highest rated since I’m a beginner to JS with only ‘old social media profile editing’-lead HTML knowledge, and this option was the easiest to parse for me and to know I would be able to build on easily when adding more menu options after this ‘get it to work’ stage. Which is to say, I’m not opinionated about the use of over

or anything else beyond 1) I had a clear enough understanding of how to utalise this example beyond the copy-paste stage and 2) it was the first I tried to start adapting that worked as expected.
For search:

I attempted adapting the snippet in this response since it’s the exact thing I needed and seemed like it should ‘mash together’ easily for me; I incorporated it like this:

$(document).ready(function () { $('select').selectize({ sortField: 'text' }); });

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript" type="text/javascript"> function dynamicdropdown(listindex) { switch (listindex) { case "salesforce" : document.getElementById("end").options[0]=new Option("End",""); document.getElementById("end").options[1]=new Option("Slack","slack"); document.getElementById("end").options[2]=new Option("Google Sheets","googlesheets"); break; case "slack" : document.getElementById("end").options[0]=new Option("End",""); document.getElementById("end").options[1]=new Option("Salesforce","salesforce"); document.getElementById("end").options[2]=new Option("Google Sheets","googlesheets"); break; case "googlesheets" : document.getElementById("end").options[0]=new Option("End",""); document.getElementById("end").options[1]=new Option("Salesforce","salesforce"); document.getElementById("end").options[2]=new Option("Slack","slack"); break; } return true; } </script> <script src="https:/[SPAM MARK PREVENTION]/ajax.googleapis.[SPAM MARK PREVENTION]com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https:/[SPAM MARK PREVENTION]/cdnjs.cloudflare.[SPAM MARK PREVENTION]com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https:/[SPAM MARK PREVENTION]/cdnjs.cloudflare.[SPAM MARK PREVENTION]com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" /> </head> <body> <center> <h2>Dependent dropdowns</h2> <div class="category_div" id="category_div"> <select id="source" name="source" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);"> <option value="start">Start</option> <option value="salesforce">Salesforce</option> <option value="slack">Slack</option> <option value="googlesheets">Google Sheets</option> </select> </div> <div class="sub_category_div" id="sub_category_div"> <script type="text/javascript" language="JavaScript"> document.write('<select name="end" id="end"><option value="">End</option></select>') </script> <noscript> <select id="end" name="end"> <option value="slack">Slack</option> <option value="googlesheets">Google Sheets</option> </select> </noscript> </div> </center> </body> </html>

and it produces the same result as just the menus alone. I assume having multiple menus at play may mean I would have to ‘link’ these additions to both, but I have no idea how to. I also thought a lack of CSS could be at play, but by my understanding the stylesheet included should be handling that? Or the not working could be explained by this response being five years old and the linked scripts no longer functioning as expected. I’ve also placed the additional scripts above the current ones rather than below, and added what seemed to be a missing end tag on the <link rel="stylesheet" href="https:/[SPAM MARK PREVENTION]/cdnjs.cloudflare.[SPAM MARK PREVENTION]com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" /> line – no dice.

With what I’ve not tried, most of the solutions I’m finding in general are based on

over , which I only haven’t changed it to because I don’t know how to do so whilst maintaining the dependent nature of the menus – I’d be wildly grateful to anyone inclined to give me an overhaul of the original to work with

to then try those solutions, but I’m not annoying enough to ask for that specifically. I’ve also seen references to form actions like in this response, but I have no idea how to implement it if it would work.
For displaying text* based on combined results:

(*my specific end goal would ideally actually be a table – happy to handle this myself in CSS or HTML, but just a note that ‘pure text’ it not a goal despite the shorthand implying it)

I do want this to be a ‘unique’ text based on combined results rather than fill-in-the-gaps – this project is actually a ThisToThat-like for workflow automation software, so a selection of “Salesforce” + “Slack” will in the end display something like this:

truly have no idea how to cohererntly write an image description for tables, sorry!

The solution in this CodeProject question seems viable, since adding an onchange state is straightforward:

<script language="JavaScript"> var DivTxt = new Array() DivTxt[0] = "Please Select Priority" DivTxt[1] = "Priority Low: The selection is Low" DivTxt[2] = "Priority Normal: The selection is Normal" DivTxt[3] = "Priority High: The selection is High" DivTxt[3] = "Priority Critical: The selection is Critical" function getText(slction){ txtSelected = slction.selectedIndex; document.getElementById('textDiv').innerHTML = DivTxt[txtSelected]; } </script> <Select class="body_text" name="critical" onchange="getText(this)"> <option value="Select"> Select </option> <option value="LOW"> Low </option> <option value="NORMAL"> Normal </option> <option value="HIGH"> High </option> <option value="CRITICAL"> Critical </option> </select> <div id="textDiv" style="color:Green; font-family:Calibri; font-size:small; font-weight:bold"> </div>

but I don’t know how to account for both selections in doing so.

For ease of anyone who does look at this, here’s some placeholder text for my current menu combinations:

Text for Salesforce and Slack
Text for Salesforce and Google Sheets
Text for Slack and Salesforce
Text for Slack and Google Sheets
Text for Google Sheets and Salesforce
Text for Google Sheets and Slack

It felt like making these two separate questions in a row would push this from ‘asking for advice’ to ‘asking someone to do my homework’, but there’s a good chance that a 2-in-1 is less kosher for that same reason – if so, sorry for the first question faux pas! But any suggestions on how to get the solutions I’ve already identified working would be extremely appreciated ✨ I would also appreciate the suggestions being as vanilla as possible!

Author BlancerPosted on 2024/04/03Categories javascript

Parallax Website Animations not working properly

Ok I am trying to build this parallax website and on scroll the the leaf should slowly hide itself to the lower I scroll it will start to disappear like to the left side of the screen.

I don’t know why it’s not working, if anyone can fix this please let me know.

Here is the html:

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="styles.css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <script src="https://kit.fontawesome.com/75d7c65c9d.js" crossorigin="anonymous"></script> <title></title> </head> <body> <div class="container"> <div class="navbar"> <div class="logo"> <h1 class="logo">Logo</h1> </div> <div class="links"> <p>Home</p> <p>About</p> <p>Contact</p> <p>Blog</p> <button class="login">Login</button> </div> </div> <content> <img src="../Images/leaf1.png" alt="bush" class="bush"> <img src="../Images/mountains.jpg" alt="mountains" class="mountains"> <img src="../Images/trees.png" alt="trees" class="trees" id="trees"> <h2>Parralex Website</h2> </content> <section> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque a et, fugit sint officia exercitationem? Aliquid laborum et sed tempore harum, quibusdam aut qui consectetur quisquam eligendi ullam optio culpa illum magni repudiandae, a eaque. Esse sit beatae praesentium quam vero, quaerat veritatis, tempora aut quo fugit dicta recusandae consequatur obcaecati quos perferendis nihil nostrum rerum id quidem. Aliquid corporis error sequi similique eos autem delectus cupiditate blanditiis! Praesentium voluptate optio blanditiis. Quas illo voluptatum at excepturi reiciendis sit voluptatibus incidunt, enim amet quos. Dolore voluptas nulla eius pariatur dicta fugiat rerum totam, nobis ducimus tenetur illum ad cupiditate quo. Consequatur voluptas vel perspiciatis distinctio suscipit ducimus! Natus dicta atque eligendi, totam molestias deserunt animi non esse ex alias dignissimos omnis explicabo unde voluptate corrupti voluptates repellat officia pariatur nobis. Ea ipsum atque blanditiis eius officia at pariatur impedit voluptatibus saepe labore non, voluptatem architecto ab quis esse nesciunt nostrum sequi iure? Voluptates, iusto ut! Voluptas provident distinctio debitis tenetur iste, molestias vitae esse quasi dicta, sed necessitatibus, corrupti aliquid voluptatum fugit animi nulla. Porro quaerat laborum, vitae aliquid, ipsum quidem, ea laudantium exercitationem corporis quae recusandae eveniet! Doloribus velit deleniti impedit ratione nihil, dicta amet possimus fugit esse illum voluptatem tempore eveniet commodi natus. Incidunt voluptatum, porro unde nobis exercitationem veniam, autem nemo repellat saepe animi aperiam facere minima sunt in expedita quae optio eaque nulla atque omnis, perspiciatis placeat consequatur debitis? Mollitia et beatae excepturi quos, expedita itaque quasi! Quae, adipisci. Repellat fugiat tempora quibusdam error, sit sint inventore a illum, sapiente eos reprehenderit quis enim! Illo beatae animi, aperiam pariatur officiis neque illum quia error ullam, quaerat ex soluta sequi tenetur dolore perspiciatis iusto deserunt saepe nulla quam! Dolorum quisquam vero id omnis quo maiores velit fugit, odit consequatur aspernatur doloribus excepturi sequi odio deleniti, fuga architecto? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo libero sit, voluptates corporis, doloremque temporibus blanditiis quo ipsam nisi ducimus cum totam aut, laborum quibusdam illum iure odio? Eveniet nisi perspiciatis tenetur fuga impedit! Soluta vel quia dolore odit iure deserunt modi illo architecto quibusdam voluptas, pariatur autem doloremque ducimus deleniti non aspernatur quos libero perspiciatis nisi laboriosam porro amet. Minima delectus aspernatur totam libero aperiam pariatur ipsa nemo, facilis dolorem, vitae praesentium quas fugit laborum laboriosam doloremque blanditiis expedita non. Necessitatibus asperiores laboriosam, laborum fugiat, ipsum minus quae nisi quibusdam labore voluptatem, id maiores ut deleniti quas. Commodi, inventore molestias. Quod quibusdam odit aliquid nihil nostrum eveniet sunt assumenda! Perspiciatis odit repudiandae quod sapiente voluptatibus impedit vero maxime sint sequi harum quasi molestiae cum recusandae illum quae modi, praesentium quia blanditiis doloribus voluptatum beatae repellendus. Repellendus deserunt veniam perspiciatis error non, nostrum ea cupiditate cumque ullam impedit tempore quidem dignissimos quo quia voluptas molestiae! Molestiae inventore iusto ipsum laudantium fugiat expedita nam consequatur, officiis soluta, hic qui, sint temporibus porro sunt tempora eveniet neque unde mollitia voluptas quibusdam veritatis rem laboriosam a? Ea voluptatum optio laboriosam error assumenda pariatur ullam minima voluptate modi laborum dolore, saepe expedita a eos veniam! Facilis dolorum ea saepe ipsam, culpa quidem adipisci praesentium eos at velit amet dolorem sit autem ratione, exercitationem natus aut ut cum iste architecto nulla minus rem voluptas aperiam. Tempore culpa, deserunt ex velit harum illo blanditiis eos labore consectetur rerum. Autem rem iste recusandae quis consequatur non dolor saepe libero ratione eius, doloremque quasi natus commodi nostrum suscipit. Voluptatem doloribus, error reiciendis iste sapiente, vitae pariatur veritatis, deleniti nobis fuga repellendus alias quod eligendi quasi. Autem, necessitatibus. Cum hic, obcaecati accusantium officiis maxime animi praesentium harum reprehenderit ipsam nam perspiciatis ducimus doloribus voluptatum ab illo reiciendis laboriosam a? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo libero sit, voluptates corporis, doloremque temporibus blanditiis quo ipsam nisi ducimus cum totam aut, laborum quibusdam illum iure odio? Eveniet nisi perspiciatis tenetur fuga impedit! Soluta vel quia dolore odit iure deserunt modi illo architecto quibusdam voluptas, pariatur autem doloremque ducimus deleniti non aspernatur quos libero perspiciatis nisi laboriosam porro amet. Minima delectus aspernatur totam libero aperiam pariatur ipsa nemo, facilis dolorem, vitae praesentium quas fugit laborum laboriosam doloremque blanditiis expedita non. Necessitatibus asperiores laboriosam, laborum fugiat, ipsum minus quae nisi quibusdam labore voluptatem, id maiores ut deleniti quas. Commodi, inventore molestias. Quod quibusdam odit aliquid nihil nostrum eveniet sunt assumenda! Perspiciatis odit repudiandae quod sapiente voluptatibus impedit vero maxime sint sequi harum quasi molestiae cum recusandae illum quae modi, praesentium quia blanditiis doloribus voluptatum beatae repellendus. Repellendus deserunt veniam perspiciatis error non, nostrum ea cupiditate cumque ullam impedit tempore quidem dignissimos quo quia voluptas molestiae! Molestiae inventore iusto ipsum laudantium fugiat expedita nam consequatur, officiis soluta, hic qui, sint temporibus porro sunt tempora eveniet neque unde mollitia voluptas quibusdam veritatis rem laboriosam a? Ea voluptatum optio laboriosam error assumenda pariatur ullam minima voluptate modi laborum dolore, saepe expedita a eos veniam! Facilis dolorum ea saepe ipsam, culpa quidem adipisci praesentium eos at velit amet dolorem sit autem ratione, exercitationem natus aut ut cum iste architecto nulla minus rem voluptas aperiam. Tempore culpa, deserunt ex velit harum illo blanditiis eos labore consectetur rerum. Autem rem iste recusandae quis consequatur non dolor saepe libero ratione eius, doloremque quasi natus commodi nostrum suscipit. Voluptatem doloribus, error reiciendis iste sapiente, vitae pariatur veritatis, deleniti nobis fuga repellendus alias quod eligendi quasi. Autem, necessitatibus. Cum hic, obcaecati accusantium officiis maxime animi praesentium harum reprehenderit ipsam nam perspiciatis ducimus doloribus voluptatum ab illo reiciendis laboriosam a? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo libero sit, voluptates corporis, doloremque temporibus blanditiis quo ipsam nisi ducimus cum totam aut, laborum quibusdam illum iure odio? Eveniet nisi perspiciatis tenetur fuga impedit! Soluta vel quia dolore odit iure deserunt modi illo architecto quibusdam voluptas, pariatur autem doloremque ducimus deleniti non aspernatur quos libero perspiciatis nisi laboriosam porro amet. Minima delectus aspernatur totam libero aperiam pariatur ipsa nemo, facilis dolorem, vitae praesentium quas fugit laborum laboriosam doloremque blanditiis expedita non. Necessitatibus asperiores laboriosam, laborum fugiat, ipsum minus quae nisi quibusdam labore voluptatem, id maiores ut deleniti quas. Commodi, inventore molestias. Quod quibusdam odit aliquid nihil nostrum eveniet sunt assumenda! Perspiciatis odit repudiandae quod sapiente voluptatibus impedit vero maxime sint sequi harum quasi molestiae cum recusandae illum quae modi, praesentium quia blanditiis doloribus voluptatum beatae repellendus. Repellendus deserunt veniam perspiciatis error non, nostrum ea cupiditate cumque ullam impedit tempore quidem dignissimos quo quia voluptas molestiae! Molestiae inventore iusto ipsum laudantium fugiat expedita nam consequatur, officiis soluta, hic qui, sint temporibus porro sunt tempora eveniet neque unde mollitia voluptas quibusdam veritatis rem laboriosam a? Ea voluptatum optio laboriosam error assumenda pariatur ullam minima voluptate modi laborum dolore, saepe expedita a eos veniam! Facilis dolorum ea saepe ipsam, culpa quidem adipisci praesentium eos at velit amet dolorem sit autem ratione, exercitationem natus aut ut cum iste architecto nulla minus rem voluptas aperiam. Tempore culpa, deserunt ex velit harum illo blanditiis eos labore consectetur rerum. Autem rem iste recusandae quis consequatur non dolor saepe libero ratione eius, doloremque quasi natus commodi nostrum suscipit. Voluptatem doloribus, error reiciendis iste sapiente, vitae pariatur veritatis, deleniti nobis fuga repellendus alias quod eligendi quasi. Autem, necessitatibus. Cum hic, obcaecati accusantium officiis maxime animi praesentium harum reprehenderit ipsam nam perspiciatis ducimus doloribus voluptatum ab illo reiciendis laboriosam a? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo libero sit, voluptates corporis, doloremque temporibus blanditiis quo ipsam nisi ducimus cum totam aut, laborum quibusdam illum iure odio? Eveniet nisi perspiciatis tenetur fuga impedit! Soluta vel quia dolore odit iure deserunt modi illo architecto quibusdam voluptas, pariatur autem doloremque ducimus deleniti non aspernatur quos libero perspiciatis nisi laboriosam porro amet. Minima delectus aspernatur totam libero aperiam pariatur ipsa nemo, facilis dolorem, vitae praesentium quas fugit laborum laboriosam doloremque blanditiis expedita non. Necessitatibus asperiores laboriosam, laborum fugiat, ipsum minus quae nisi quibusdam labore voluptatem, id maiores ut deleniti quas. Commodi, inventore molestias. Quod quibusdam odit aliquid nihil nostrum eveniet sunt assumenda! Perspiciatis odit repudiandae quod sapiente voluptatibus impedit vero maxime sint sequi harum quasi molestiae cum recusandae illum quae modi, praesentium quia blanditiis doloribus voluptatum beatae repellendus. Repellendus deserunt veniam perspiciatis error non, nostrum ea cupiditate cumque ullam impedit tempore quidem dignissimos quo quia voluptas molestiae! Molestiae inventore iusto ipsum laudantium fugiat expedita nam consequatur, officiis soluta, hic qui, sint temporibus porro sunt tempora eveniet neque unde mollitia voluptas quibusdam veritatis rem laboriosam a? Ea voluptatum optio laboriosam error assumenda pariatur ullam minima voluptate modi laborum dolore, saepe expedita a eos veniam! Facilis dolorum ea saepe ipsam, culpa quidem adipisci praesentium eos at velit amet dolorem sit autem ratione, exercitationem natus aut ut cum iste architecto nulla minus rem voluptas aperiam. Tempore culpa, deserunt ex velit harum illo blanditiis eos labore consectetur rerum. Autem rem iste recusandae quis consequatur non dolor saepe libero ratione eius, doloremque quasi natus commodi nostrum suscipit. Voluptatem doloribus, error reiciendis iste sapiente, vitae pariatur veritatis, deleniti nobis fuga repellendus alias quod eligendi quasi. Autem, necessitatibus. Cum hic, obcaecati accusantium officiis maxime animi praesentium harum reprehenderit ipsam nam perspiciatis ducimus doloribus voluptatum ab illo reiciendis laboriosam a? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo libero sit, voluptates corporis, doloremque temporibus blanditiis quo ipsam nisi ducimus cum totam aut, laborum quibusdam illum iure odio? Eveniet nisi perspiciatis tenetur fuga impedit! Soluta vel quia dolore odit iure deserunt modi illo architecto quibusdam voluptas, pariatur autem doloremque ducimus deleniti non aspernatur quos libero perspiciatis nisi laboriosam porro amet. Minima delectus aspernatur totam libero aperiam pariatur ipsa nemo, facilis dolorem, vitae praesentium quas fugit laborum laboriosam doloremque blanditiis expedita non. Necessitatibus asperiores laboriosam, laborum fugiat, ipsum minus quae nisi quibusdam labore voluptatem, id maiores ut deleniti quas. Commodi, inventore molestias. Quod quibusdam odit aliquid nihil nostrum eveniet sunt assumenda! Perspiciatis odit repudiandae quod sapiente voluptatibus impedit vero maxime sint sequi harum quasi molestiae cum recusandae illum quae modi, praesentium quia blanditiis doloribus voluptatum beatae repellendus. Repellendus deserunt veniam perspiciatis error non, nostrum ea cupiditate cumque ullam impedit tempore quidem dignissimos quo quia voluptas molestiae! Molestiae inventore iusto ipsum laudantium fugiat expedita nam consequatur, officiis soluta, hic qui, sint temporibus porro sunt tempora eveniet neque unde mollitia voluptas quibusdam veritatis rem laboriosam a? Ea voluptatum optio laboriosam error assumenda pariatur ullam minima voluptate modi laborum dolore, saepe expedita a eos veniam! Facilis dolorum ea saepe ipsam, culpa quidem adipisci praesentium eos at velit amet dolorem sit autem ratione, exercitationem natus aut ut cum iste architecto nulla minus rem voluptas aperiam. Tempore culpa, deserunt ex velit harum illo blanditiis eos labore consectetur rerum. Autem rem iste recusandae quis consequatur non dolor saepe libero ratione eius, doloremque quasi natus commodi nostrum suscipit. Voluptatem doloribus, error reiciendis iste sapiente, vitae pariatur veritatis, deleniti nobis fuga repellendus alias quod eligendi quasi. Autem, necessitatibus. Cum hic, obcaecati accusantium officiis maxime animi praesentium harum reprehenderit ipsam nam perspiciatis ducimus doloribus voluptatum ab illo reiciendis laboriosam a? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo libero sit, voluptates corporis, doloremque temporibus blanditiis quo ipsam nisi ducimus cum totam aut, laborum quibusdam illum iure odio? Eveniet nisi perspiciatis tenetur fuga impedit! Soluta vel quia dolore odit iure deserunt modi illo architecto quibusdam voluptas, pariatur autem doloremque ducimus deleniti non aspernatur quos libero perspiciatis nisi laboriosam porro amet. Minima delectus aspernatur totam libero aperiam pariatur ipsa nemo, facilis dolorem, vitae praesentium quas fugit laborum laboriosam doloremque blanditiis expedita non. Necessitatibus asperiores laboriosam, laborum fugiat, ipsum minus quae nisi quibusdam labore voluptatem, id maiores ut deleniti quas. Commodi, inventore molestias. Quod quibusdam odit aliquid nihil nostrum eveniet sunt assumenda! Perspiciatis odit repudiandae quod sapiente voluptatibus impedit vero maxime sint sequi harum quasi molestiae cum recusandae illum quae modi, praesentium quia blanditiis doloribus voluptatum beatae repellendus. Repellendus deserunt veniam perspiciatis error non, nostrum ea cupiditate cumque ullam impedit tempore quidem dignissimos quo quia voluptas molestiae! Molestiae inventore iusto ipsum laudantium fugiat expedita nam consequatur, officiis soluta, hic qui, sint temporibus porro sunt tempora eveniet neque unde mollitia voluptas quibusdam veritatis rem laboriosam a? Ea voluptatum optio laboriosam error assumenda pariatur ullam minima voluptate modi laborum dolore, saepe expedita a eos veniam! Facilis dolorum ea saepe ipsam, culpa quidem adipisci praesentium eos at velit amet dolorem sit autem ratione, exercitationem natus aut ut cum iste architecto nulla minus rem voluptas aperiam. Tempore culpa, deserunt ex velit harum illo blanditiis eos labore consectetur rerum. Autem rem iste recusandae quis consequatur non dolor saepe libero ratione eius, doloremque quasi natus commodi nostrum suscipit. Voluptatem doloribus, error reiciendis iste sapiente, vitae pariatur veritatis, deleniti nobis fuga repellendus alias quod eligendi quasi. Autem, necessitatibus. Cum hic, obcaecati accusantium officiis maxime animi praesentium harum reprehenderit ipsam nam perspiciatis ducimus doloribus voluptatum ab illo reiciendis laboriosam a? </section> </div> <script src="script.js"></script> </body> </html>

Here’s the css:

@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); * { margin:0; padding:0; transition:0.4s; } body,html { transition: background-color 0.3s ease, color 0.3s ease; margin: 0; padding: 0; } :root { --black:rgb(0, 1, 42); --lightblue:rgb(55, 127, 243); --red:rgb(255, 72, 72); } .container { height: 100vh; overflow-y:auto; overflow-x: hidden; perspective: 10px; background-color: rgb(197, 212, 248); position: relative; } .navbar { width: 100%; height:60px; background-color: rgb(255, 255, 255); display: flex; } .navbar .logo { width: 300px; height:100%; display: flex; align-items: center; justify-content: center; font-family: "Poppins",sans-serif; color:black; } .navbar .links { width: 100%; height: 100%; display: flex; align-items:center; justify-content: space-evenly; } .links p { font-family: "Inter",sans-serif; font-weight: bold; font-size: 17px; cursor: pointer; color:var(--lightblue); padding:10px 30px; border-radius: 4px; } .links p:hover { background:rgb(231, 231, 231); } .links .login { padding:10px 80px; color:#fff; font-family: "Poppins",sans-serif; border: none; background:rgb(33, 105, 250); border-radius: 8px; font-size:14px; cursor: pointer; } .links .login:hover { background-color: rgb(58, 137, 255); } content { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; transform-style:preserve-3d; z-index: -1; height: 100vh; } .bush { position: absolute; z-index: -6; width: 200px; top: calc(50% + -1000px); left: calc(50% + -920px); transform: translate(-50%, -50%); } .mountains { transform:translateZ(-10px) scale(2); } .bush { transform:translateZ(-9px) scale(2); } .trees { position: absolute; left:500px; } .mountains, .trees, .bush { position: absolute; height: 100%; width: 100%; object-fit: cover; z-index:-1; } h2 { font-size:8rem; color:#fff; text-shadow:2px 2px #454444; } section { font-size:1rem; background-color: rgb(235, 235, 235); padding:15px; font-family: "Poppins",sans-serif; color: #000000; }

Here’s the javascript:

const title = document.querySelector('h2'); const leaf = document.querySelector('.bush'); document.addEventListener('scroll', function() { let value = window.scrollY; // console.log(value) title.style.marginTop = value * 4.8 + 'px'; leaf.style.marginRight = -value + 'px'; });const title = document.querySelector('h2'); const leaf = document.querySelector('.bush'); document.addEventListener('scroll', function() { let value = window.scrollY; // console.log(value) title.style.marginTop = value * 4.8 + 'px'; leaf.style.marginRight = -value + 'px'; });

The “leaf.style.marginRight = -value + ‘px’;” should be working but it’s not.

Author BlancerPosted on 2024/04/03Categories javascript

how to send cookie in trpc standalone server

I am a frontend dev and i learn backend and TRPC, I built a user registration procedure which looks like so

export const registration = publicProcedure .input(RegistrationFormSchema) .mutation(async ({ input: { email, password }, ctx }) => { const existingUser = await prisma.user.findUnique({ where: { email } }); if (existingUser) { Failures.throwCustomError( { code: 'CONFLICT', message: `Email ${email} already exists` }, { procedure: PROCEDURE_NAME }, ); } try { const hashedPassword = await hash(password, SALT_ROUNDS); const user = await prisma.user.create({ data: { email, password: hashedPassword } }); console.log({ ctx }); return { success: true, data: user }; } catch (error) { if (error instanceof Error) { Failures.handleServerError(error, { procedure: PROCEDURE_NAME, metadata: { problem: 'Error while registering user.' }, }); } } });

in TRPC docs there is an authorization section https://trpc.io/docs/server/authorization but it only say how to spread the news about authorized user as far as i understand but context object does not expose a setHeader method or anything like that. How can i store the session in a cookie in standalone trpc adaper? Or am i thinking about this in a wrong way? 🙂 Thanks

Author BlancerPosted on 2024/04/03Categories javascript

Update chunk text file with Drive API resumable upload failed with 100000 byte(s) error

I’m using fetch to make a PATCH request like below:

fetch(uri, { method: "PATCH", headers: new Headers({ "Authorization": "Bearer " + access_token, "Content-Length": 256, "Content-Range": `bytes 0-${256-1}/${JSON.stringify({ items }).length}`, "Content-Type": "text/plain" }), body: JSON.stringify({ items }).substring(0, 256), }).then((res) => { return res.json(); }) .then(data => cb(db)) .catch(e => cb(e));

And it gives me a weird error because the bytes of uploaded chunk I want to upload is 256:

Author BlancerPosted on 2024/04/03Categories javascript

How to make bar widths the same and category widths variable?

I have a bar chart with multiple datasets which include empty values. I use skipNull to hide the empty values. Currently each group (month) has the same width, and the width of the bars is inversely proportional to the number of bars in a group. I’d like all bars in the chart to have the same width, and the groups to have variable widths.

This is my current code:

const data = { labels: ['January', 'February', 'March'], datasets: [ { label: 'Dataset 1', data: [3, null, null], skipNull: true, }, { label: 'Dataset 2', data: [1, 2, null], skipNull: true, }, { label: 'Dataset 3', data: [4, 1, 3], skipNull: true, }, ], }; new Chart( document.querySelector('#chart'), { type: 'bar', data: data, } )

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script> <canvas width="500" height="100" id="chart"></canvas>

This is more or less how I’d like the chart to look (excuse my poor Photoshop skills):

I tried barPercentage and barThickness, but they don’t affect the group width.

Author BlancerPosted on 2024/04/03Categories javascript

How can i replicate the TradingView indicator Rolling Moving Average(RMA) in Javascript/Typescript

I’m trying to “clone” the technical indicator RMA from tradingview.

I’ve read some articles like this one: https://download.esignal.com/products/workstation/help/charts/studies/rmi.htm

But i’ve not managed to convert it to working code after a good while of trying.

Here is the equivalent in the pine language:

alpha = 1/length sum = 0.0 sum := na(sum[1]) ? ta.sma(src, length) : alpha * src + (1 - alpha) * nz(sum[1])

Here is my typescript code so far:

function simpleMovingAverage(data: number[], period: number) { if (data.length < period) return null let sum = 0 for (let i = 0; i < period; i++) { sum += data[i] } const smaValues = [sum / period]; for (let i = period; i < data.length; i++) { sum = sum - data[i - period] + data[i]; smaValues.push(sum / period); } return smaValues } function rollingMovingAverage(data: number[], period: number) { // Missing } const t = [ 39.69999999999709, 77.19999999999709, 69.79999999998836, 48.90000000000873, 28.40000000000873, 25.19999999999709, 16.5, 10, 59.89999999999418, 52.90000000000873, 22.80000000000291, 97.5, 103.39999999999418, 63.5, 79.69999999999709, 97.60000000000582, 57.29999999998836, 23.69999999999709, 89.79999999998836, 33.60000000000582 ]

Author BlancerPosted on 2024/04/03Categories javascript

Posts pagination

Previous page Page 1 … Page 2,294 Page 2,295 Page 2,296 … Page 8,825 Next page