Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Dec 21 2018 17:11
    @MadLittleMods banned @OmarAlmaqtri
  • Jun 05 2018 23:13
    @MadLittleMods banned @LWSS
  • May 25 2018 16:50
    @MadLittleMods banned @TheRedstoneTaco
dimtabu
@taburetkin
My goal is not to override the user browser's default locale, while I would like to know which day of the week is considered the first in it
dimtabu
@taburetkin
there is a weekInfo method on Locale.prototype
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/weekInfo
in theory if i can get the default locale i just can do locale.weekInfo() but i do not see the way to obtain default locale instance
Julian Gonggrijp
@jgonggrijp
@taburetkin I have no idea but it seems like it would be really useful to know. Please share back if you find the answer!
gaurav
@mgourab:matrix.org
[m]
hello everyone
I am learning js
and I have a small doubt
I have a div called list-container, which has an unordered list of items and there is a hide/show toggle button
I have written the js code for adding the click event functionality to this hide/show button.
can any of you guys tell me why this code is unacceptable for production?
even though it works fine..
here's the code:
html code
<body>
    <div class="wrapper">
      <header>
        <h1 id="headline">My Day</h1>
        <div class="group">
          <label for="main">What's your task?</label>
          <input type="text" id="main" class="input-main">
          <button class="btn-main">Update Heading</button>
        </div>
      </header>

      <button class="btn-toggle">Hide List</button>

      <div class="list-container">
        <ul aria-live="polite">
          <li>Make coffee</li>
          <li class="highlight">Practice JavaScript</li>
          <li>Walk the cat</li>
          <li>Watch a Treehouse video</li>
          <li class="highlight">Go swimming</li>
          <li class="highlight">Play my guitar</li>
        </ul>
        <button class="btn-remove">Remove Last Task</button>
      </div>
    </div>

    <script src="app.js"></script>
  </body>
js code:
const btnUpdate = document.querySelector('.btn-main');
const btnToggle = document.querySelector('.btn-toggle');

btnUpdate.addEventListener('click', () => {
  const headline = document.getElementById('headline');                                                     
  const input = document.querySelector('.input-main');

  headline.className = 'grow';
  headline.textContent = input.value;
  input.value = '';
});

btnToggle.addEventListener('click', () => {
    const listContainer = document.querySelector('.list-container');

    if (listContainer.style.display === 'none') {
        btnToggle.textContent = 'Hide List';
        listContainer.style.display = 'block';
    } else {
        btnToggle.textContent = 'Show List';
        listContainer.style.display = 'none';
    }
});
Julian Gonggrijp
@jgonggrijp

@mgourab:matrix.org If I understand correctly, someone told you they thought your code isn't production-ready. I can only guess why they said that. As I see it, your JS code is a bit "ad hoc"; it is responsible for behavior, presentation and state management at the same time. There is no separation of concerns. Closely related to this observation is that the code is a bit brittle; nothing in the JS code ensures that the HTML elements it's trying to access actually exist. Problems like these disappear when you apply good practices such as MVC, most likely with help from an application framework.

A more minor thing that stands out to me, is that the first event handler has two-space indentation, while the second has four-space indentation. This lack of consistency looks a little bit unprofessional, and also doesn't help maintainability.

Having written all that, I agree that your code otherwise looks perfectly reasonable. You evidently know how to make things work, so no need to worry on that front. I personally wouldn't expect a beginner to know all the good practices, anyway.

gaurav
@mgourab:matrix.org
[m]
Ok
I figured it out
It was with the inline css style which the js code applied for the block
In the conditional statement, it explicitly uses inline css style to display the toggle button for showing
But there is a method called element.removeAttribute() which could remove the style totally in order to show. That's what I get from people in other platforms
gaurav
@mgourab:matrix.org
[m]
Is this bad practice to use js for using css style explicitly within evenListeners?
Julian Gonggrijp
@jgonggrijp
@mgourab:matrix.org It's generally better to add or remove CSS classes rather than fiddling with individual CSS attributes. That said, there is no way to avoid that you'll occasionally need to change styles from within JS event handlers.
gaurav
@mgourab:matrix.org
[m]
Ok understood
Thanks for explaining
Julian Gonggrijp
@jgonggrijp
Welcome
gaurav
@mgourab:matrix.org
[m]
:)
gaurav
@mgourab:matrix.org
[m]
hello, I am trying to install nodejs and npm on my local system, but when I use the nodesource repo for nodejs LTS ubuntu and follow the instructions for installion on the ubuntu system it installs fine but when I check the node version then it shows the wrong version as 12.x.x instead of 16.x.x
please guide me and advise me of what I did wrong?
Sharon Shmorak
@dsysme
Hi, I am very much confused regarding scoping in JS and what I read on the internet just serves to confuse me even more. It would help I thing if I could get a simple answer to a few simple questions.
Does JS uses dynamic scope when arrow function are used?
If normally JS is using a static scoping how come I can in s definition of a function refer to a variable not yet defined but will be defined before I call the function?
3 replies
gaurav
@mgourab:matrix.org
[m]
oh ok
Stephen James
@sjames1958gm
@dsysme Perhaps you have an example to speak to? Maybe this is what you are asking about
function test() {
  // Declaration of testVar is hoisted to here (but not initialization)
  // testFn has access to test's scope which includes testVar as it has been hoisted
  let testFn = () => console.log(testVar);
  // testFn(); // not valid testVar hasn't been initialized
  let testVar;
  // Here testVar is initialized, but the value is "undefined"
  testFn();
  testVar = 10;
  // Here testVar is now 10
  testFn();
}

test();

--> undefined

--> 10
Gazook89
@Gazook89
hi all, when i see the term "helpers" in reference to js, does that just mean functions that are generally useful but not really 'specific' to what your program is doing? For example, a function that returns a random number between x and y inputs, or strips every m out of a string
or does 'helpers' have a more specific meaning
Stephen James
@sjames1958gm
@Gazook89 helper functions are as you describe. Ones that don't aren't necessarily the main purpose of the application.
Gazook89
@Gazook89
Okay thank you for confirming. I assumed so but didn’t want to get off on the wrong foot with it
Julian Gonggrijp
@jgonggrijp
@Gazook89 I think there are some contexts in which "helper" might have a more specific meaning, though. In any case, as far as I know, there is no "official" definition of what a helper is, although I agree with @sjames1958gm that the interpretation of "functions that aren't necessarily the main purpose of the application" is common.
Gazook89
@Gazook89
@jgonggrijp okay, that works for me as a hobbyist....just didn't want to get into a terribly bad naming convention habit but sounds like i'm in the clear
Rohit Yadav
@rohyadav

anyone help me about regex

 /^SYNTUN|TRF[0-9 _]*\.xlsx$/

string should match - TRF_(traffic).xlsx

Julian Gonggrijp
@jgonggrijp

@rohyadav Let's take your regex apart and see what each part does. Forgive me for stating the obvious on most parts; I think it can help to be explicit.

SYNTUN will match the literal characters "SYNTUN".

^SYNTUN will also match "SYNTUN", but only at the start of the string.

TRF will match the literal characters "TRF".

[0-9 _]* will match any number of digits, spaces and underscores, for example "__0 123 ".

\. will match the literal period.

xlsx will match the literal characters "xlsx".

TRF[0-9 _]*\.xlsx matches the concatenation of the previous four parts, for example "TRF.xlsx"

TRF[0-9 _]*\.xlsx$ likewise, but only at the end of the string.

The expression as a whole matches either "SYNTUN" at the start of the string, or anything that matches TRF[0-9 _]*\.xlsx at the end of the string. This means that the pattern as a whole might, for example, also match "SYNTUNbla" or "blaTRF__0 123 .xlsx".

Regarding the either-or part, I suspect you actually intended

/^(SYNTUN|TRF[0-9 _]*\.xlsx)$/

which will match either "SYNTUN" or anything that matches TRF[0-9 _]*\.xlsx, but in both cases only if it is the whole string.

Now for the reason why the TRF[0-9 _]*\.xlsx part doesn't match the example string you gave, "TRF_(traffic).xlsx". The main realization is that * in regexes does not work like a glob in shells. Rather, it is an operator that works on the previous atom. It means "zero or more of whatever I just described", in this case [0-9 _]. This is probably wrong in two ways.

Firstly, I suspect you want at least one occurrence of [0-9 _]; zero is not enough. So for this purpose, the quantifier should be +.

[0-9 _]+.

Secondly, this does not yet account for the fact that anything (I presume) can come after the digit, space or underscore. The way to match anything, including newlines in regexes is [^] (the set that excludes no character). Since this is a file name, you probably don't need to include newlines, for which there is an even shorter notation: .. You can presumably have zero or more of anything, so you need the quantifier *. However, that would also consume the final .xlsx, which you need to ensure is present. To prevent a wildcard from consuming too much of the pattern, you can make the quantifier "lazy" by appending a ?.

.*?

Putting it all back together:

TRF[0-9 _]+.*?\.xlsx
Tunde Oretade
@tundeiness
hello folks. I have a question. I have just fetched data from an API using redux toolkit. The API fetches all items. I searched for the API responsible for one item using ID and I found out that the company had none. The work around it right now (to prevent loss of customers using the API) is to get all items and find the required item using the Find function. So I'd like to know if it is possible to pass the data for all items to redux reducer so that I can now find the required item there instead of using local storage. All suggestions will be appreciated. Thanks.
1 reply
Elon Muskmelon
@vedantmgoyal2009:matrix.org
[m]
This message was deleted
1 reply
Elon Muskmelon
@vedantmgoyal2009:matrix.org
[m]
This message was deleted
1 reply
Julian Gonggrijp
@jgonggrijp
@wucunqian I think it is based on the picture you set on GitHub.
2 replies
iamjohnsimeon
@iamjohnsimeon
Hello guys, anybody knows how to simulate the mouse position in a window inside a scaled down div? Say i have a window that's 1920 x 700 and i scaled it down like transform: scale(0.5).
I would like to copy the position of the real cursor to a virtual cursor (really an image). All while maintaining the scale.
@iamjohnsimeon I realize that might not be clear enough.
I want the cursor position on the main window to show up on a smaller div. Kind of like having an accurate mini-map of the main window.
Julian Gonggrijp
@jgonggrijp
@iamjohnsimeon Do you have some (non-working) preliminary code that we could comment on?
22 replies
Tony Lobbin
@elitesuper
Please help me, Files couldn't upload.
I think getMockSenderEnhancer had some problem.
import React, {useState} from 'react';
import Uploady, {useItemProgressListener, useItemFinishListener} from "@rpldy/uploady";
import UploadDropZone from "@rpldy/upload-drop-zone";
import UploadButton from "@rpldy/upload-button";
import { getMockSenderEnhancer } from "@rpldy/mock-sender";

const LogProgress = () => {

    const [progress, setProgess] = useState(0);
    const progressData = useItemProgressListener();

    if (progressData && progressData.completed > progress) {
      console.log(progressData);
      setProgess(() => progressData.completed);
    }

    return null;
}
const mockSenderEnhancer = getMockSenderEnhancer({
    delay: 1500
 });

function CollectionUpload(props:any){

    const nativeProps:any = { webkitdirectory: 'true' };

    const customIsSuccess = (xhr:any) => [308, 418].includes(xhr.status);

    return(
        <div className="row">
            <div className="row">
                <Uploady isSuccessfulCall={customIsSuccess} destination={{url: "http://localhost:5000/upload"}} {...nativeProps} enhancer={mockSenderEnhancer}>
                    <UploadDropZone
                      className="collection-upload-field"
                      onDragOverClassName="drag-over"
                      htmlDirContentParams={{ recursive: true, withFullPath: true }}
                    >
                    <div className="upload-drop-zone">
                        <div className="upload-info">
                            <h5>Drag and drop or browse to choose your collection folder</h5>
                            <UploadButton text="Choose files..." className="voomio-btn btn-filled"/>
                        </div>    
                    </div>    
                    </UploadDropZone>
                    <LogProgress />
                </Uploady>
            </div>
        </div>
    )
}

export default CollectionUpload;
gitexp2050
@gitexp2050
can anyone help with a javascript change in HTML file for a good open source tool which is used by many?
Recoll Web UI has preview window but doesn't higlight the text or show preview dialog as in Recoll Desktop version - the preview window in the webui is just a regular browser tab started on an HTML or text version of the document. So only the regular browser commands are available. Someone with Javascript know-how and some available time could probably improve this...1) move to the first occurence of the highlighted text 2) previous/next button to navigate the result 3) highlight color
elghanbibadr
@elghanbibadr
hi guys