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
Marco Colia
@justoverclockl
@jgonggrijp
Julian Gonggrijp
@jgonggrijp
@justoverclockl You can find that type of information well through the search function of the MDN web docs at https://developer.mozilla.org/.

I entered "fetch" there and ended up at https://developer.mozilla.org/en-US/docs/Web/API/fetch. On that page, it says:

cache
A string indicating how the request will interact with the browser's HTTP cache. The possible values, default, no-store, reload, no-cache, force-cache, and only-if-cached, are documented in the article for the cache property of the Request object.

So the article about the cache property is probably what you need.
PakDragoon
@PakDragoon
I am working on react project. I am recording a video with react-media-recorder package. Now i want to store the recorded video direcrly into the mongodb. Does anyone have knowledge about where that video blob is getting stored?
mounikesh42
@mounikesh42
guys can we use javascript to open a popup page and get info back to the parent page
not just basically on javascript but using any frameworks like angular or react ???
Julian Gonggrijp
@jgonggrijp
@mounikesh42 Probably, though it depends a bit on what you mean by "popup page".
Also, if you can do it with plain JavaScript, you can also do it with JavaScript plus libraries like Angular or React.
mounikesh42
@mounikesh42
@jgonggrijp so basically parent page triggers a third party page in popup
after it loads it generates a token in the popup page url
now i wanna grab that url into the parent page
is that possible ???
i can open popups using javascript or anyother frameworks but having one way connection from parent page to popup page is what i wanted
not sure if it works
any insights regarding that would be appreciated
Julian Gonggrijp
@jgonggrijp
@mounikesh42 I can think of three different ways in which you might load an external page in a "popup" and they have wildly different possibilities with regard to what extent information can travel back to the parent. Perhaps show the line of code in which you open the popup, so it is clear what technique we're talking about?
mounikesh42
@mounikesh42

@jgonggrijp

window.open("https://www.w3schools.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");

something like this
Julian Gonggrijp
@jgonggrijp
@mounikesh42 In that case it returns a WindowProxy, which you might be able to read the URL on, depending on the same-origin policy of the website that you're opening in the popup. Documentation on MDN: Window.open, WindowProxy, same-origin policies.
mounikesh42
@mounikesh42
@jgonggrijp thank you so much for the info
LOVKUSH
@LOVKUSH9888
hi guys i am new here
Sharon Shmorak
@dsysme
I am JS newbie
Can someone pls explain the following line of code?
const groupBy = (x,f)=>x.reduce((a,b)=>((a[f(b)]||=[]).push(b),a),{});
it is from this answer:
https://stackoverflow.com/questions/14446511/most-efficient-method-to-groupby-on-an-array-of-objects
I don't understand how the magic works. Specifically I don't understand how to the empty object a key-value pair is added. I also would like to understand if the is a code create side effect (when we push is a new array returned or do we alter existing array?)
dimtabu
@taburetkin

add some readability to this line.

  1. friendly names:
    const groupBy = (dataArray, getGroupingKey) => dataArray.reduce(
     (reducedHash, arrayElement) => ((reducedHash[getGroupingKey(arrayElement)] ||= []).push(arrayElement), reducedHash),
     {}
    );
  2. now, replace those: ||= [], (..., ...)

    const groupBy = (dataArray, getGroupingKey) => dataArray.reduce(
     (reducedHash, arrayElement) => {
    
         const key = getGroupingKey(arrayElement);
         let group = reducedHash[key];
         if (!group) {
    
             group = [];
             reducedHash[key] = group;
    
         }
         group.push(arrayElement);
         return reducedHash;
    
     },
     {}
    );
7 replies
gaurav
@mgourab:matrix.org
[m]
Hi guys I am learning javascript from a website
anybody wants to join in learning js with me?
Julian Gonggrijp
@jgonggrijp
@mgourab:matrix.org Regardless, please feel welcome to ask your questions here when you have them.
dimtabu
@taburetkin
(new Date()).toLocaleString();
this line will return formated current date using a default implementation of Locale.
as i can see (at least in chrome) browser tries to detect best fit locale.
So, when you omit locale identifier in Intl API you get beauty formatted text in correct locale in most cases.
So, i am trying to understand how to get that Locale instance which is used by browser by default.
is there a way? i mean native for Intl
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?