« first day (3321 days earlier)      last day (1625 days later) » 
00:00 - 22:0022:00 - 00:00

10:00 PM
meh
 
Trying to juggle my hours so I can get off at 3:00-3:30 on fridays. That means I'm working for another half hour.
 
The solution is everyone who needs a phone number format / validation on the web
now need ~0.5 mb of formatting tools
like libphonenumber.js
The filtered subset is 104Kb
 
The thing is, it works perfectly if I put the method inline onclick. That is what I am doing now because I can't get it to work otherwise without rebuilding a bunch of other stuff. It seems like I should be able to make it work in a separate .js files.
 
I used to roll my own and just trust that I'd only get US phone numbers
 
i don't understand what using a separate js file for it changes in your case
 
10:03 PM
@KevinB overhead
 
obviously, an inline event is different from what you do in the js file
 
how in the world does a phone number validator take 500k
 
beats the point of input type=tel anyway
@forresthopkinsa look up
 
idc bout tel
:p
 
@forresthopkinsa International phone numbers with a ton of different formats
 
10:03 PM
"meh"
 
@KevinB seems like neither do the spec authors
at that point just effing remove it
 
still seems excessive
 
either own it or remove it
The lightest lib is
npmjs.com/package/libphonenumber-js (its a port or libphonenumber by google)
 
in other words the message you replied to wasn't directed at you
 
no it isn't `onclick="event.preventDefault();window.location.replace('/thispage.html#acc0');"`
I send the exact same thing in the .js file
 
10:04 PM
mobile is 104k
 
@VenesemeTyras Yes, but an inline event is different from a non-inline event. there's more moving parts.
are those parts all there correctly?
what isn't working? What error is occuring? Why?
 
100k is better
still weird
 
okay, but none of the other parts (of my script at least) are the problem. it is that command window.location.replace() that works inline, and in console, but not in .js file
 
like, you kept repeating "it doesn't work"
that isn't useful to me
What exactly is happening? is nothing at all happening? no error? no nothing?
is the event occuring, but the outcome not doing what you expect?
 
I think minified it'll go down a wee bit
 
10:07 PM
Sorry, I explained previously. CSP violation says script-src unsafe-inline required. I get that when it is external JS. inline it works fine. Seems backwards.
0
Q: window.location.replace for iframe?

Veneseme TyrasWe can use window.location.replace to avoid history, and to target on-page anchors without page reloads, but not in iframes? The problem is a CSP (content security policy) violation, which states script-src 'unsafe-inline' must be enabled. Except I don't have a CSP defined, and even if I define ...

 
where?
 
Minfied @forresthopkinsa
```
❯ ls -l -h size
-rw-r--r-- 1 abhishekhingnikar staff 530K Nov 19 14:08 libphonenumber.min.js
```
 
Right. so you stated this warning is occuring, but that you aren't using any content security policies. Have you proven that by looking at the headers your server is returning?
 
Yes, I checked headers.
 
then i guess i can't help
your browser is doing something that makes zero sense if it's making up content policies for you
You're not working on File:// are you?
 
10:13 PM
If I add a CSP it works too. I mean the CSP works, and will only allow sources I defined. But that error still happens, says - script-src 'unsafe-inline' is required - even though I added that to the CSP. I don't think it is specific to my browser as I get the same result in multiple different browsers (chrome/ie11/ff).
 
Ie11 doesn't support that directive anyway
would be weird if it gave that error
according to mdn anyway
and caniuse
 
But it works even in ie11 - if I put it inline onclick... (no more history).
 
right, i think it's worth ignoring the inline portion if we're trying to make it work in a script file
the fact that it worked inline is irrelevant if we can't even get the click even itself caught
At what point do we ignore this CSP error and just test to see if any of the script at all is running?
 
I can catch the click event no problem, I can do it from within the iframe. All scripts work fine, except this window.replace.location().
 
is this code in a script file being included inside the iframe?
is that what the iframe has to do with this?
 
10:23 PM
running numerous scripts on the page, and in the iframe. iframe resizer script in both. equal height columns script in iframe, and others. I can catch the click, get the href attribute (i can do that much from either the parent or the child, though doing from the child is slightly simpler. but I just can't pass window.location.replace().
I can pass the script file from the iframe, or from the parent, tried both ways
 
@ShrekOverflow ugh
 
i can't check that right now
at least, not in a way that would be useful (mobile)
 
The site works fine on mobile - but I get what you are saying. No devtools, etc..
 
right, i cant play around with it
break it etc
It does sound like you're running into a CSP policy issue.
the problem is...
 
yeah, but it just doesn't make sense. inline is okay, but external script requires unsafe-inline. and there is no way to bypass it even by allowing unsafe-inline.
 
10:34 PM
the directive you mention, is irrelevant
to what you're doing
it would be relevant for your inline solution
 
I'm trying to do the following in a container but its not working properly
 
in your case, you're not using an inline script element, you have <script src="whatever.js"></script> which shouldn't run afoul of that policy
assuming you have the current domain as safe within that directive
if you didn't, you'd be getting a different error
 
60
A: Javascript scrollIntoView() middle alignment?

Rohan OrtonIt is possible to use getBoundingClientRect() to get all the information you need to achieve this. For example, you could do something like this: const element = document.getElementById('middle'); const elementRect = element.getBoundingClientRect(); const absoluteElementTop = elementRect.top + w...

 
the calculation is wrong
"Math"
 
Evidently -.-
pageYOffset doesn't exist for elements so i replaced with scrollTop
Same with innerHeight and scrollHeight
 
Yeah, exactly. That's why I am so confused. It doesn't make sense...
 
i don't understand why you're dividing stuff and whatnot
 
Lol. I want the middle to be in the middle not the middle of the element to be on top
 
if you're scrolling to the middle div, why do you care where the middle of the scroll height is?
 
^ yours
What it should be:
 
 
ic
Right. so start by getting the middle position
this is going to be an order of operations problem
due to the fact that your original ends up with a middle of like 150, when it should be in the thousands
get the middle position (wrapper.scrollHeight/2) then subtract half the visible area
elementRect is middle's bounding... which isn't useful to your calculation is it?
 
I'm not sure. Def need to find the size of the element to figure out the middle of it (size/2)
> The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.
So i figure we probably need it
 
viewport
 
hmm, so maybe we don't need. Just use the offsetTop?
 
10:58 PM
const middle = absoluteElementTop - (wrapper.scrollHeight / 2); isn't useful
the absolute element top is where you want the middle of the viewport to be
 
I mean a really cheap way would be to scrollIntoView() and then get the scrolledTop of the wrapper but thats stupid.
 
so you want to subtract half of the viewport height from it
not half of the overall scroll height
 
? the viewport is irrelevant right?
 
oops
it is irrelevant, you just got lucky cause of my example :)
 
11:03 PM
to be even mroe exact, subtract half of the middleElement height
 
confused. The issue with yours is that its using its position relative to viewport instead of the wrapper.
 
why is the bounding box taking into account the top position at all?
it's viewport is the wrapper's viewable area
 
You are right, thats odd
> The amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the bounding rectangle. This means that the rectangle's boundary edges (top, right, bottom, left) change their values every time the scrolling position changes (because their values are relative to the viewport and not absolute).

If you need the bounding rectangle relative to the top-left corner of the document, just add the current scrolling position to the top and left properties (these can be obtained using window.scrollX and window.scrollY) to get a b
It should be relative to the wrapper not to the window
 
i think by viewport it literally means window viewport... but... that's weird too
that would mean when we scroll down we should see a negative value
because it's above
 
@KevinB I would agree except for the last paragraph "If you need the bounding rectangle relative to the top-left corner of the document..."
 
11:11 PM
yeah, so that's just the wrong tool for the job
we need it's position within wrapper
 
Doesn't that mean "we are giving you the relative position to the wrapper, if you need relative to the widow view port than don't use this"
But instead we are getting "relative to the window viewport"
 
offsetTop is close... but not close enough
removing the top 50px doesn't break it
 
also why
> const middle = absoluteElementTop - 50;
wheres that magic number from>
 
wrapper is 100px
50px is half that
 
we should js that
 
11:17 PM
i did
oh, lost that in a fork i guess
 
alright i think we are good
thanks
 
!!afk
 
11:40 PM
@KevinB i broke it again :(
Before it runs, scroll down a bit (only works when its scrolled at the top)
ill try to fix
 
ugh, css
I spent like five hours on css at work yesterday
I don't think I ever get better at it
every time I waste hours debugging css it's due to some crazy (documented!) behavior that I've never heard of
like a nonzero line-height breaking the heights of elements inside flex containers
 
@KevinB Ok i fixed it just need to remove the scrolltop
 
00:00 - 22:0022:00 - 00:00

« first day (3321 days earlier)      last day (1625 days later) »