Refreshing the browser and/or relaunching “npm-start” resets to old CSS

I started building a project where in my src folder I have subfolders, such as Header, Hero, Footer.

Inside each of the subfolders, I have two files, eg.: Hero.js and herostyle.css In Hero.js the stylesheet is imported by the following method:

import './headerstyle.css';

As I start editing the css file, it responds correctly, and the design is changing accordingly, so I am not sure if it’s a linking problem.

When I refresh the browser, the CSS breaks, and the way I get the design back, is by having to go back to the Hero.js file:

First – removing the import ‘./headerstyle.css’; codesnippet
Second – Doing a quicksave
Third – Putting the same codesnippet import ‘./headerstyle.css’; back in Hero.js
Fourth – Saving again, and then I get my design back.

I tried resetting the browser’s cache, disabling the cache in the developer’s console, none of that seems to be working. It is really frustrating, please help.

Thank you

How to find the ‘m’ oldest forks of a repository using GitHub api

I need to obtain the ‘m’ oldest forks of a given repository, using the GitHub API. To get the ‘m’ oldest forks I’m trying to obtain the forks sorted from oldest to newest.

Taking the example of “it-cert-automation-practice” repository of google, I’ve tried the following APIs:

https://api.github.com/repos/google/it-cert-automation-practice/forks?q=sort:created_at
https://api.github.com/repos/google/it-cert-automation-practice/forks?q=sort:oldest
https://api.github.com/repos/google/it-cert-automation-practice/forks?q=sort:updated_at&fork:true&order:asc
https://api.github.com/repos/google/it-cert-automation-practice/forks?q=sort:created_at&fork:true&order:asc

[email protected]’ is not in the npm registry

I have a CRA project that’s being deployed using Heroku. Deploying to production has never been an issue, but now when I try I get the following error:

-----> Installing dependencies
       Installing node modules
       npm ERR! code E404
       npm ERR! 404 Not Found - GET https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-8.0.1.tgz
       npm ERR! 404 
       npm ERR! 404  '[email protected]' is not in the npm registry.
       npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
       npm ERR! 404 
       npm ERR! 404 Note that you can also install from a
       npm ERR! 404 tarball, folder, http url, or git url.
       
       npm ERR! A complete log of this run can be found in:
       npm ERR!     /tmp/npmcache.fuUsQ/_logs/2022-01-31T04_29_54_312Z-debug.log
-----> Build failed

All the versions of serialize-javascript that are installed:

% npm ls serialize-javascript   
[email protected] /Users/mpetersen/Documents/dev/on-borrowed-time
├─┬ [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected]
└─┬ [email protected]
  ├─┬ [email protected]
  │ └── [email protected]
  └─┬ [email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └── [email protected]

Does anyone know why ‘[email protected]’ is not in the npm registry? I’ve tried updating react-scripts but it causes other dependency issues in my project.

eChart not responsible

I’ve never really worked with JavaScript so i probably doing something stupid. But for some reason a echart I am using isn’t responsive in line with how a div resizes upon screen size. I’m using bootstrap for CSS.

I think i have followed the documentation correctly on https://echarts.apache.org/examples/en/editor.html?c=gauge-grade

But for me it doesn’t resize or seem to be anchored to a div.

                <div class="col-sm-12 col-md-3 col-lg-3 col-xl-2">
                <div class="card custom-card">
                    <div class="card-body">
                        <div class="card-item">
                            <div class="card-item-icon card-icon">
                                <svg class="text-primary" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect height="14" opacity=".3" width="14" x="5" y="5"/><g><rect fill="none" height="24" width="24"/><g><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,19H5V5h14V19z"/><rect height="5" width="2" x="7" y="12"/><rect height="10" width="2" x="15" y="7"/><rect height="3" width="2" x="11" y="14"/><rect height="2" width="2" x="11" y="10"/></g></g></g></svg>
                            </div>
                            <div class="card-item-title mb-2">
                                <label class="main-content-label tx-13 font-weight-bold mb-1">Chart</label>
                                <span class="d-block tx-12 mb-0 text-muted">Current</span>
                            </div>
                            <div class="card-item-body">
                                <div class="card-item-stat">
                                    <div id="main" style="width: 200px;height:200px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <script type="text/javascript">
            var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom, 'dark');
var option;

option = {
  series: [
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 1,
      splitNumber: 4,
      axisLine: {
        lineStyle: {
          width: 6,
          color: [
            [0.33, '#FF6E76'],
            [0.66, '#FDDD60'],
            [0.75, '#58D9F9'],
            [1, '#7CFFB2']
          ]
        }
      },
      pointer: {
        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
        length: '50%',
        width: 20,
        offsetCenter: [0, '-30%'],
        itemStyle: {
          color: 'auto'
        }
      },
      axisTick: {
        length: 12,
        lineStyle: {
          color: 'auto',
          width: 2
        }
      },
      splitLine: {
        length:20,
        lineStyle: {
          color: 'auto',
          width: 2
        }
      },
      axisLabel: {
        color: '#464646',
        fontSize: 10,
        distance: -60,
        formatter: function (value) {
          if (value === 0.875) {
            return 'A';
          } else if (value === 0.625) {
            return 'B';
          } else if (value === 0.375) {
            return 'C';
          } else if (value === 0.125) {
            return 'D';
          }
          return '';
        }
      },
      title: {
        offsetCenter: [0, '-20%'],
        fontSize: 30
      },
      detail: {
        fontSize: 15,
        offsetCenter: [0, '0%'],
        valueAnimation: true,
        formatter: function (value) {
          return Math.round(value * 100) + '分';
        },
        color: 'auto'
      },
      data: [
        {
          value: 0.7,  
        }
      ]
    }
  ]
};

option && myChart.setOption(option);

How to push 1 D array to a column

I’m trying to push 1D array to a column but Im keep getting that error “Exception: The parameters (number[]) don’t match the method signature for SpreadsheetApp.Range.setValues.” which what I understood is that I cant use setValues for 1D array, it has to be 2D array or more.

Here is my code.

  var range = ss.getRange(3,5,ss.getLastRow()-2).getValues();
  var qValues = [];
  for( var i=0; i<range.length; i++ ) {
    qValues.push([range[i][0]]); // index 0 = column E.
  }

  var values = ss.getRange(3,14,ss.getLastRow()-2,11).getValues(); // N3:T??
  var results = [];
  for(var i=0; i<values.length; i++ ) {
    results.push((([values[i][0]+values[i][2]+values[i][4]+values[i][6]+values[i][8]+values[i][10]])*120*qValues[i][0])/1000); // index 0 = column N, etc.
  }

   ss.getRange(3, 27,).setValues(results);

I tried to add

results.push([""]);

before the setValues statement but it didn’t work as well

If you need more info please let me know.

Thank you

webpack es6 modules for chrome extension

I have the following config for webpack and I am trying to make modules accessible to my content script. Basically, I want them to be packed and loaded from manifest as stand-alone modules (like global variables). For some reason, the bundle.js has no references to the modules but I can see the module code is exports.

What am I missing from my config?

My webpack.config.js

    const path = require('path');

module.exports = {
  entry: ['franc-min', 'trigram-utils', './src/index.js'],
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    descriptionFiles: ['package.json'],
  },
  devtool: 'source-map',
};

My index.js

import { franc } from 'franc-min';

Javascript Confirm in c#.NET

I have a button that needs a confirm message, however the text needs to be dynamic based on the state of C# permissions for that page. I also want the c# portion of the button to halt if the user hits cancel on the button.

This is kinda what I’m thinking about.

if (something = 1)
{
ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "Confirm", "Confirm('Do you want to eat');", True);
}

else
{
ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "Confirm", "Confirm('Do you want to sleep');", True);
}


if (The confirm button is true)
{
// do something
}

else
{
// do something here
}

I tried putting the confirm in the OnClientClick = return confirm(“text here”), but I don’t have access to the variables (<% %>) I’d need to change the text there.

WEBRTC – After about 30 seconds the image freezes and the audio stops

When I stream video-audio on the same network there is no problem, everyone can see each other, listen to each other, etc. The problem is when the devices are on different networks, after about 30 seconds the image freezes and the audio stops. Note that I also have my own STUN/TURN server set up, which I test at https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/ and it doesn’t throw any errors. Anyone knows how to solve this? o Where can the error be generated?

How to convert a file to binary stream in Javascript?

I am developing a website by using Next.js and trying to upload a file to OneDrive by using Microsoft Graph REST API.

The document says the request body should be the binary stream of the file to be uploaded, but I don’t know how to convert it to binary stream.

I am using HTML input element to save file data to file:

{name: '200311 Weekly Safety Meeting - Coronavirus (2019-nCoV).pdf', lastModified: 1644421523745, lastModifiedDate: Wed Feb 09 2022 07:45:23 GMT-0800 (Pacific Standard Time), webkitRelativePath: '', size: 700913, …}

My code on the client side,

const uploadFile = async () => {
    const res = await axios.put('/api/onedrive/file', {
        accessToken: token,
        filename: file.name,
        content: file,
        parentId: '01XA3PFKG7YWH2K7QVIZCYRP33XLQEHLZG',
    });
    console.log(res.data);
};

On the server side,

const upload = async (req, res) => {
const { filename, accessToken, content, parentId } = req.body;
const url = `https://graph.microsoft.com/v1.0/users/69e5bc0d-ef63-4040-88cf-0ada867b7afa/drive/items/${parentId}:/${filename}:/content`;

try {
    const result = await axios({
        method: 'put',
        url: url,
        body: content,
        headers: {
            Authorization: `Bearer ${accessToken}`,
        },
    });
    res.status(200).send(result.data);
} catch (err) {
    console.log(err);
    res.status(500).send(err);
}};

how can i get all value from this object into a tabular form? I have no idea how to do this?

i have tried console.table(user); but that does not show value of array in courselist.

i want courseList value similar to other values in one row

        var user = {
  firstName: "piyush",
  lastName: "raj",
  role: "admin",
  loginCount: 32,
  courseList: [],
  buyCourse: function (courseName) {
    this.courseList.push(courseName);
  },
  getCourseCount: function () {
    return `${this.firstName} is enrolled in total of ${this.courseList.length} courses`;
  },
    info: function () {
      return 
    },
};

user.buyCourse("react js");
user.buyCourse("angular js");



Flask Many Ajax requests

how can I do many ajax request to the same page with flask?

HTML

<!DOCTYPE html>
<html>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            var variable1 = 'Hello World'
            $.ajax({
                type:'POST',
                url:'/home',
                data:{'mydata':variable1},
                success:function(){
                    $('#forajax').text(variable1)
                }
            })
        </script>
        <p id="forajax"></p>
    </body>
</html>

FLASK

from flask import Flask,request,render_template
app = Flask(__name__)
@app.route('/home',methods=['POST','GET'])
def home():
    a = None
    if request.method == 'POST':
        a = request.form['mydata']
        print(a)
    return render_template('index.html')
if __name__ == '__main__':
    app.run(debug=True)

This is how I did only one. How can I do many?

Thanks.

How to prevent assigning of useState variables to an array

I have:

  var sendToList = Object.assign(thisSelected, { attributes: [...thisButtomsSelected] })

   ListAdder.push(sendToList);

thisButtomSelected is an useState variable.

Problem:
In the app user capable to send items with specific attributes to users list. When user chooses 2 items with same names but different attributes, last added item changes attributes of previously added one.

So, I assume that problem covered in useState hook
Can you suggest the way how to solve it?

Can’t import the named export ‘Directive’ from non EcmaScript module (only default export is available)

this is a ionic angular project that i’m working on, i’m using ng-lazyload-image plugin Link. when i start compiling it showing errors like this.

Error: ./node_modules/ng-lazyload-image/fesm2015/ng-lazyload-image.mjs 401:10-19

Can't import the named export 'Directive' from non EcmaScript module (only default export is available)

ExpressJS: How to prevent user from posting code inside req.body

I’m developing an API with expressJS. This API is a semi-weblog service, and clients can create, update and delete their posts and contents. I have a sec urity concern about implementing its post and patch routes.

If the user injects some JS code and sends it to API to store in Mongodb, could these codes affect our API? How can I prevent users from posting and patching requests with any code inside them?

I have found “xss-clean” middleware to sanitize the user input body, is it enough for this purpose?

Because it is very important to me to ensure that I am using the correct middleware to protect this API, I am asking this question.