Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
  • Dec 21 2018 17:11
    @MadLittleMods banned @OmarAlmaqtri
  • Jun 05 2018 23:13
    @MadLittleMods banned @LWSS
  • May 25 2018 16:50
    @MadLittleMods banned @TheRedstoneTaco
html code
    <div class="wrapper">
        <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>

      <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>
        <button class="btn-remove">Remove Last Task</button>

    <script src="app.js"></script>
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

@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.

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
Is this bad practice to use js for using css style explicitly within evenListeners?
Julian Gonggrijp
@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.
Ok understood
Thanks for explaining
Julian Gonggrijp
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
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
oh ok
Stephen James
@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"
  testVar = 10;
  // Here testVar is now 10


--> undefined

--> 10
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
@Gazook89 helper functions are as you describe. Ones that don't aren't necessarily the main purpose of the application.
Okay thank you for confirming. I assumed so but didn’t want to get off on the wrong foot with it
Julian Gonggrijp
@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.
@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

anyone help me about regex

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

string should match - TRF_(traffic).xlsx

Julian Gonggrijp

@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
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
This message was deleted
1 reply
Elon Muskmelon
This message was deleted
1 reply
Julian Gonggrijp
@wucunqian I think it is based on the picture you set on GitHub.
2 replies
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
@iamjohnsimeon Do you have some (non-working) preliminary code that we could comment on?
22 replies
Tony Lobbin
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) {
      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);

        <div className="row">
            <div className="row">
                <Uploady isSuccessfulCall={customIsSuccess} destination={{url: "http://localhost:5000/upload"}} {...nativeProps} enhancer={mockSenderEnhancer}>
                      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"/>
                    <LogProgress />

export default CollectionUpload;
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
hi guys
Hello guys, how are you?
Suren Atoyan

Hi everyone 👋 I hope you all are having a good holiday 🎄

Check this out - https://github.com/suren-atoyan/x-python

I tried to provide a clean and complete interface for interacting with Python in browser-based applications - code execution, autocomplete, code formatting, etc.

Would love to get your feedback. Thanks 🙂


How to define hours for this javascript player? Need help......

I want to specify an audio with 08:56:35 => 8 hrs, 56 mins and 34 seconds

The following lyrics has example for minutes, but not sure about hours or how to define.

Can someone help me on how to define for hours?

  1. Javascript: https://github.com/lusaisai/Lyricer/blob/master/lyricer.js
    Source: https://github.com/lusaisai/Lyricer
    Example for minute: https://github.com/lusaisai/Lyricer/blob/master/index.html (03:54.84)

  2. Javascript: https://guoyunhe.github.io/rabbit-lyrics/
    Source: https://github.com/guoyunhe/rabbit-lyrics
    Example for minute: [03:27.19]