« first day (4235 days earlier)      last day (696 days later) » 

4:31 AM
Can we access variable defined in one script tag, inside another script tag in html?
 
4:44 AM
depends
what's the type of the tag?
what's the order of appearance in DOM?
 
@DamodaraSahu Please don't post unformatted code - use the up arrow to edit your post, then hit Ctrl + K to format the code in that post. See the faq. You have 25 seconds to edit and format your message properly before it will be removed. Please separate code blocks from your actual question. Put your question in 1 message and then your code in a 2nd and format it.
 
:54607426 not if it's type="module"
 
1 message moved to Trash can
 
:54607411 <script type="module">
	const foo = "foo";
</script>
<script>
	console.log(foo); // Uncaught ReferenceError: foo is not defined
</script>
 
5:33 AM
how can I nest a module scope in javascript?
 
 
6 hours later…
11:04 AM
@DamodaraSahu You can't? Modules are a flat structure. You can import modules into other modules but that doesn't nest their scopes.
 
 
1 hour later…
12:18 PM
Hi all, quick question - I recognise there may not be a good answer, but I guess I'll ask anyway.
I fully recognise the utility of the Cache API inside a Service Worker.
I also know that the Cache API can be deployed in the main thread, outside of a Service Worker.
Offline retrieval definitely doesn't seem to be a thing the Cache API can perform outside a Service Worker.
So, after reading around the subject for several hours, I still cannot figure out what the Cache API can possibly be used for, when it's in the main thread rather than in a service worker.
What is the point (if any?) of using Cache API in the main thread?
(I realise that Cache API was specifically designed for a Service Worker context.)
 
12:40 PM
Hello
How to cache React UI component ?
I want to show Alert dialog just once and never again
Btw. can be shown again, but just if user clear cache
 
Hi Mile. You could set a Boolean, perhaps?
Something like: let alertShown = false;
and then, after you show the alert, alertshown = true;
Aha. But you want it to not show, after the page is reloaded, right?
 
Yes, right
 
In that case, maybe use: localStorage.setItem('alertShown', 'true');
You can then check the Boolean via localStorage.getItem('alertShown');
 
Nice , thank you
 
Sorry that we had such a falling out the other day, @OlegValteriswithUkraine
 
12:45 PM
but what will happen when user clear cache ?
localStorage value will disappear and be treated as false ?
 
Then you can: localStorage.removeItem('alertShown');
or else: localStorage.setItem('alertShown', 'false');
Note that localStorage_only_ takes strings, not real Boolean values
 
Ok
but how to handle cache clear ?
when user press ctrl + f5
with JS
Hmm, very complicated
 
It's tricky to discern the difference between a refresh and a reload.
I was looking into this last weekend.
 
@MileMijatović I suppose the idiomatic React way would be to set state and check if it's not set before rendering, but take it with a grain of salt, not my forte
@Rounin-StandingwithUkraine eh, it's meta, no hard feelings
 
There are a couple of events: unload, beforeunload, pagehide and `visibilitychange... but none of them have consistent cross-device, cross-browser handling
 
12:53 PM
Wow, then I started very interested question
How to clear browser cache with JS
Quick answer, no , we can't
 
@OlegValteriswithUkraine - Indeed, I noted with grim irony, that even while we were "enthusiastically debating" a good number of us were still defiantly supporting Ukraine. So that's one positive thing.
@MileMijatović - we can re-initialise a value on page hard refresh, but then it will re-initialise on page reload too. We can persist the value on page reload, but then it will persist on hard refresh too.
 
@MileMijatović depends on the context, though - if you literally mean "browser cache", then extensions API (at least for Chrome) can manipulate it
but since I assume you are talking about cache in a broad sense
 
Usecase: I want to show dialog with npmjs.com/package/react-swipeable-views
and last step will be an option to select a city or country and confirm with ok
 
[cont] then I guess, your best bet is localStorage/sessionStorage just as Rounin mentioned
 
after that, when user refresh the page, dialog shouldn't be displayed
 
12:59 PM
@Rounin-StandingwithUkraine yeah, well, hard not to as it is objectively a horrible thing my country is doing to another we used to be so close with...
 
It's not your country, Oleg. It's the Ruscists. A clear difference between the Russians and the Ruscists. I will continue to support the Russians.
 
well, yeah, you are definitely right about that
the amount of brainwashing they've done too is simply stunning
@MileMijatović yeah, I guess your best bet is some form of storage as Rounin said above - and listening to various load events for persisting the change
 
Thank you
 
Wait @Mile... I have an idea...
 
but I am still unsure how to setItem to false or clear the localStorage value at all , when user clear the cache
 
1:06 PM
depends on your notion of "clears the cache" - can you elaborate?
 
You'd need to test this, but I think form input elements persist values between page refreshes and reset values after a hard page reload
 
huh, quite a trick
 
so you could set an input value with a UNIX time and then copy it across to localStorage
then, when the page is reloaded, compare the two values
if they're the same, then keep alertShown as 'true' otherwise, reset to 'false'
in fact, doing it that way, you probably don't need alertShown in the localStorage at all
But you'd need to check that this form hack works cross-browser - it needs some testing
 
This is very tricky and I am not sure how to do that
how to set an input value with a UNIX time
it's very easy to do on mobile devices
I tested on android
React Native probably have an option to check if app is cached
 
I couldn't tell you in React - regrettably I'm not familiar with React. But in vanilla JS, it would be: document.querySelector('.myInput').value = Date.now();
 
1:13 PM
I will try something , thank you
 
Best of luck, Mile.
 
Thank you
 
2:00 PM
@MileMijatović - I've only tested this on Firefox Desktop, but it definitely works:
 
@Rounin-StandingwithUkraine Please don't post unformatted code - use the up arrow to edit your post, then hit Ctrl + K to format the code in that post. See the faq. You have 25 seconds to edit and format your message properly before it will be removed. Please separate code blocks from your actual question. Put your question in 1 message and then your code in a 2nd and format it.
For posting large code blocks, use a paste site like like gist.github.com, hastebin.com, pastie.org or a demo site like jsbin.com
1 message moved to Trash can
 
```
const confirmHardReload = () => {

  let hardReload;

  if (document.querySelector('input').value === '') {

    hardReload = true;

    document.querySelector('input').value = Date.now();
  }

  else {

    hardReload = false;
  }

  return (hardReload) ? console.log('This page has been hard reloaded') : console.log('This page has been refreshed');
}

window.addEventListener('load', confirmHardReload);
```
I didn't really like the logical flow of that. Here's a cleaner version:
const confirmHardReload = () => {

  let hardReload = (document.querySelector('.my-input').value === '') ? true : false;

  if (hardReload === true) {

    document.querySelector('input').value = Date.now();

    console.log('This page has been hard reloaded');
  }

  else {

    console.log('This page has been refreshed');
  }
}
 
@Rounin-StandingwithUkraine yeah, triple backticks don't work well in chat :(
 
I have to note that I think it has an unfortunate issue of triggering every time a page dispatches a load event (which may or may not be a problem, though - one thing I learned from developing userscripts for Stack Exchange is that they actually do trigger load events during a normal lifespan of a page with no reloads - was pretty funny to see scripts duplicate and triplicate their functionality over time :))
although that depends on what, @MileMijatović has in mind, ofc
 
2:14 PM
Frankly I'm surprised it works at all :D

There's advice all over the web stating that there is no way for JS to discern whether a page has been hard-reloaded or simply refreshed.
I've written it up on GitHub, anyway:

https://github.com/RouninMedia/confirmHardReload/blob/main/README.md
 
2:29 PM
quite interesting! it does seem to
 
Do you know anything about Cache API, @OlegValteriswithUkraine ? (Or do you know anyone who does...?) I had a question further up:
I recognise there may not be a good answer, but I guess I'll ask anyway.
I fully recognise the utility of the Cache API inside a Service Worker.
I also know that the Cache API can be deployed in the main thread, outside of a Service Worker.
Offline retrieval definitely doesn't seem to be a thing the Cache API can perform outside a Service Worker.
So, after reading around the subject for several hours, I still cannot figure out what the Cache API can possibly be used for, when it's in the main thread rather than in a service worker.
 
yeah, I've seen it, just not sure what to say :) I, frankly, never had a task that required Cache API even remotely. I know what it can do theoretically, but it never really came up otherwise. I guess one could use it as a convenient way of caching resource-heavy requests on the main thread?
 
2:55 PM
Thanks, @OlegValteriswithUkraine. It's not a huge thing. It's simply that I'm working through a number of approaches while putting an app together and I'm discounting each one in turn as I verify that it's not appropriate, given what I need it to do.
In the last 24 hours I've pretty much verified that Cache API (outside of a ServiceWorker) can be discounted as an approach... but then I'm simply left with a huge amount of curiosity as to what the use-cases are for Cache API outside of a ServiceWorker.
The two approaches that will work (it relates to offline when there is no connectivity) are ServiceWorker (which I'm entirely happy with, but I wanted to see what else was out there) and something I've developed myself (more lightweight, simpler, but requires manual operation) called "ServiceShield".
 
 
5 hours later…
7:29 PM
So … do you kids use "DOM factories" these days or is it all template literals with ${var} placeholders?
Have some old projects with some nifty crafted builders, but wonder if I should replace them with templates. The builders add some complexity in regards to readability of the code.
 
7:46 PM
I'd perhaps use const hard_reload = … instead of let, - beside that why use a variable at all?
If using a variable perhaps: console.log('This page has been', hard_reload ? 'hard reloaded' : 'refreshed');
If '.my-input' and 'input' is the same element I'd likely use a variable for that instead.
As in making clear this is ze element we are both checking and setting
 
@3342816 - Good question. I suppose everyone has their preferred mix of templating and vanilla DOM creation. I think I must be a bit old school, because even now: 'This is myVariable: ' + myVariable; comes more naturally to my typing fingers than This is myVariable: ${myVariable};
@3342816 - using a variable for the sake of legibility, but yes, const is probably better here than let.
 
Only find it very clear that this is not something that is going to / or should be changed when using const
 
When I wrote it, I was thinking that the value would change between page reloads, but of course, that doesn't matter since only one instance of the variable ever exists within a single page load.
 
As for the templates I think more in regards to creating HTML elements. E.g. having a JSON response of N items where I build a list. Using document.createElement ... or a mix of `<li data-foo="${data.foo}"><span>${data.bar} ...` etc.
Perhaps miss-reading, but hardReload would only exists within it's scope …
 
Re: templating, I can't speak for anyone else but I tend naturally (more often than not) towards:
const myDiv = document.createElement('div');
myDiv.classList.add('my-div');
myDiv.setAttribute('title', 'This is my-div');
myDiv.dataset.myData = 'my-data';
document.body.appendChild(myDiv);
But for longer HTML fragments (and entire documents) I also use (JSON-based) DaNIS³H templating:
 
8:29 PM
Yes, I do the same - or some factory thing DOM.build({div:{css: ..., data: ...}, span: { ...}) or the like. It quickly becomes complex to read though doing it that way - esp when nesting a lot.
 
    {
        "element" : "div",

        "classList" : [

          "my-div"
        ],

        "attributes" : {

          "title": "This is my-div"
        },

        "dataSet": {

          "my-data": "my-data"

        },

        "elementChildren" : [

          {[...]}
        ]
      }
More concise version:
{"element" : "div", "classList" : ["my-div"], "attributes": {"title": "This is my-div"}, "dataSet": {"my-data": "my-data"}, "elementChildren": [{[...]}]}
 
Yes … I use something similar (or that is I likely have a dozen different variants depending on use) - It's a bit messy to read; not hard, but quickly becomes messy when it is deep.
 
9:10 PM
@Rounin-StandingwithUkraine when you asked the question, I tried to enumerate in my mind instances where I would want to use Cache API at all, not even mentioning the main thread, and actually found none...
 
 
3 hours later…
11:47 PM
@OlegValteriswithUkraine - After a lot of reading around the subject over the last two days, I finally found an answer to my question. There are at least two use-cases for deploying the Cache API in the main thread:
1) If your website's vistors arrive on a given page and commonly navigate to or download specific resources soon after, you can use Cache API immediately at the point they arrive on that page to pre-fetch resources, which then appear much more quickly when selected
2) If your ServiceWorker is collecting pages to be served offline, you can add to that collection from the main thread as well as from within the ServiceWorker itself
 

« first day (4235 days earlier)      last day (696 days later) »