A general chat about JavaScript. Ask anything you like or share your best cat picture. Please check Google/StackOverflow for answers before asking for help. And remember, be nice! Don't ask to ask, just ask
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, andonly-if-cached, are documented in the article for the cache property of the Request object.
cache property is probably what you need.
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
@jgonggrijp
window.open("https://www.w3schools.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
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.
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?)
add some readability to this line.
- friendly names:
const groupBy = (dataArray, getGroupingKey) => dataArray.reduce( (reducedHash, arrayElement) => ((reducedHash[getGroupingKey(arrayElement)] ||= []).push(arrayElement), reducedHash), {} ); 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
(new Date()).toLocaleString();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
weekInfo method on Locale.prototypehttps://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
<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>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';
}
});@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.
