Great Moments in JavaScript Web Design
-
@Sumireko said in Great Moments in JavaScript Web Design:
Give me a break!
Here:
break;
You're welcome.
-
@dkf said in Great Moments in JavaScript Web Design:
@Sumireko said in Great Moments in JavaScript Web Design:
Give me a break!
Here:
break;
You're welcome.
You had a clown for breakfast today, eh?
-
@Rhywden Hope he doesn't get sick then...
-
@cartman82 said in Great Moments in JavaScript Web Design:
People who use HTML slides instead of PowerPoint or Keynote usually do something special. Eg. fancy transitions or maybe an embedded code fiddle or something. Doesn't look like Eich did that, but then again I didn't scroll to the end.
On my iPad, when I swiped to go to the next page, there was an effect like the slides were on a series of tiles that folded away to the left and unfolded from the right. Well, except on some slides that introduced text one piece at a time. That was a little disconcerting.
-
@accalia said in Great Moments in JavaScript Web Design:
I mean this is clever and all, but wtf is going on here?
const elements = Array.apply(null, Array(Math.random() * 1e5)).map((_, i) => i + 1);
Isn't it obvious?
Array
with a single numeric argument will return a sparse array, basically just{length: n}
. Butmap
only processes values which have been defined, so you usecall
to give the sparse array back toArray
as a list ofundefined
arguments: the equivalent ofArray(undefined, undefined, ...)
.Array
with more than 1 argument, or with one argument that isn't numeric (undefined
isn't), will return those arguments in a new array, and it isn't a sparse array. Callingmap
on this will now process all of its values, and the callback function assignselements[i] = i + 1
for eachi
in the original array's range....maybe it's just obvious to me.
-
@anotherusername said in Great Moments in JavaScript Web Design:
Isn't it obvious?
to you, and to me. yes it is obvious.
try showing it to an intern and asking them to understand it.
-
@Rhywden said in Great Moments in JavaScript Web Design:
You had a clown for breakfast today, eh?
That explains why everything tasted funny.
-
@accalia said in Great Moments in JavaScript Web Design:
I mean this is clever and all, but wtf is going on here?
const elements = Array.apply(null, Array(Math.random() * 1e5)).map((_, i) => i + 1);RangeError: invalid array length
Very clever
-
@Jaloopa said in Great Moments in JavaScript Web Design:
RangeError: invalid array length
ara?!
what did you run that in to give you that error?!
-
@accalia Firefox 46.0.1
In Chrome 50.numbers:
VM123:1 Uncaught RangeError: Invalid array length(…)
Edit:
Looks like it's the non integer value for the inner Array from the Math.random(). Adding a Math.floor() makes it actually do something
-
@accalia said in Great Moments in JavaScript Web Design:
@anotherusername said in Great Moments in JavaScript Web Design:
Isn't it obvious?
to you, and to me. yes it is obvious.
try showing it to an intern and asking them to understand it.
True; it helps if you're already intimately familiar with the
Array.call(_, Array(len))
hack.However, if the intern can't handle an explanation of what a sparse array is, why it means
Array(len).map(callback)
wouldn't work, and whatFunction.prototype.apply
does, they're probably a bad investment anyway. (Now try explaining that, to your boss...)
-
@Jaloopa said in Great Moments in JavaScript Web Design:
@accalia Firefox 46.0.1
In Chrome 50.numbers:
VM123:1 Uncaught RangeError: Invalid array length(…)
hu-uh.....
looks like v8 fixed that bug, it no longer truncates decimal lengths.... shame
Array.apply(null, Array(Math.ceil(Math.random() * 1e5))).map((_, i) => i + 1);
aaaaaaaand fixed.
-
@accalia said in Great Moments in JavaScript Web Design:
@Jaloopa said in Great Moments in JavaScript Web Design:
@accalia Firefox 46.0.1
In Chrome 50.numbers:
VM123:1 Uncaught RangeError: Invalid array length(…)
hu-uh.....
looks like v8 fixed that bug, it no longer truncates decimal lengths.... shame
Array.apply(null, Array(Math.ceil(Math.random() * 1e5))).map((_, i) => i + 1);
aaaaaaaand fixed.
Math.random() * 1e5 | 0
Granted, that's just the equivalent of
Math.floor
. If you must needs to useMath.ceil
, you could useMath.random() * 1e5 + 1 | 0
, which isn't exactly the same (ifMath.random()
happens to return an exact integer, this'll increment it, whileMath.ceil
won't), but it does result in a number in the range [1, 1e5], which appears to be the goal (rather than a number in the range [0, 1e5 - 1], which would be the result if you usedMath.floor
).
-
@accalia said in Great Moments in JavaScript Web Design:
I mean this is clever and all, but wtf is going on here?
const elements = Array.apply(null, Array(Math.random() * 1e5)).map((_, i) => i + 1);What the actual fuck is that. No wonder javascript is broken. How is that an acceptable idiom??
Let's try that in a real language, shall we?
elements = [i+1 for i in range(0,random.randint(0,1e5))]
-
@anotherusername said in Great Moments in JavaScript Web Design:
Math.random() * 1e5 | 0
Granted, that's just the equivalent of
Math.floor
.Over this range yes, but bitwise operators convert to signed 32 bit integers so if you're outside that range, your numbers get fucked. Some food for thought.
-
@coderpatsy said in Great Moments in JavaScript Web Design:
your numbers get fucked. Some food for thought.
WTF. fucked how?
-
@accalia said in Great Moments in JavaScript Web Design:
basically let is strict mode var
Not really, since the scopes are also different (block-level vs. function-level). May be obvious to you, but you'd be surprised if you knew how many people use Javascript daily, yet have no idea that variables defined using
var
are declared in the whole function.
-
@AyGeePlus said in Great Moments in JavaScript Web Design:
@coderpatsy said in Great Moments in JavaScript Web Design:
your numbers get fucked. Some food for thought.
WTF. fucked how?
(Math.pow(2, 31) | 0) === -2147483648, while Math.floor(Math.pow(2, 31)) === 2147483648.
-
@coderpatsy true. That doesn't come into play until somewhere beyond 1e9, though (2.147483648e9, to be exact). Non-sparse arrays that large are ... you're talking about gigabytes worth of data.
-
@coderpatsy said in Great Moments in JavaScript Web Design:
(Math.pow(2, 31) | 0) === -2147483648, while Math.floor(Math.pow(2, 31)) === 2147483648.
I'm never using javascript for anything.
-
@AyGeePlus said in Great Moments in JavaScript Web Design:
How is that an acceptable idiom??
it isn't really.....
@AyGeePlus said in Great Moments in JavaScript Web Design:
Let's try that in a real language, shall we?
i did. it's just really ugly when you force that to be a oneliner in js.
-
@AyGeePlus said in Great Moments in JavaScript Web Design:
WTF. fucked how?
Most of Javascript's bitwise operators work on signed 32-bit integers. So if a number won't fit into a 32-bit signed integer, and you use a bitwise operator on it, it gets forced into one. The exception is the
>>>
operator, which is an unsigned bit shift; it forces the number into a 32-bit integer, but then it's an unsigned int.For @coderpatsy's example, 231 is binary
10000000000000000000000000000000
, and it gets chopped to the last 32 bits, and the highest bit is the sign bit. If the number is less than 232, you can fix it by adding>>> 0
, which makes it unsigned again:(Math.pow(2, 31) | 0) >>> 0 == Math.floor(Math.pow(2, 31))
The result is then true. However, it still won't help you if the number was larger than 232 - 1, because only 32 bits get preserved.
-
@accalia said in Great Moments in JavaScript Web Design:
you force that to be a oneliner in js.
My web design strategy of 'CSS is more powerful than you think' and 'render serverside and just set divs to ajax requests to modify the page dynamically' is looking better and better all the time.
INB4 next month I need to write a d3 application. :(
-
@AyGeePlus said in Great Moments in JavaScript Web Design:
I need to write a d3 application.
ick.....
d3 is powerful, but yucky to work with.
-
@accalia It's ok I guess. It took me a long time to kind of 'get it'.
The d3 workflow seems to be 'look at all the examples, and find out which of the quasidocumented callbacks you should change to make it like the thing you want, then do that.'
You know when you put it like that it does seem kind of fucked.
-
@AyGeePlus said in Great Moments in JavaScript Web Design:
You know when you put it like that it does seem kind of fucked.
exactly!
-
@AyGeePlus said in Great Moments in JavaScript Web Design:
@coderpatsy said in Great Moments in JavaScript Web Design:
your numbers get fucked. Some food for thought.
WTF. fucked how?
-
@javascript said:
she turned me into a newt!
@accalia said in Great Moments in JavaScript Web Design:
yes, but it got better.
-
@Dreikin Was this actually intended to be a public web site, or just some presentation he made for his own use?
If the latter, the usability concerns don't matter.
-
@blakeyrat He linked to it on twitter, so I assume yes to both.
-
@Dreikin said in Great Moments in JavaScript Web Design:
@blakeyrat He linked to it on twitter, so I assume yes to both.
That's funny, because all I can see on that page is a link back to his twitter feed.
-
@Dreikin said in Great Moments in JavaScript Web Design:
@blakeyrat He linked to it on twitter, so I assume yes to both.
he linked it on twitter, there is no need to assume. it's for public consumption now