Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

HTML5 Deck of Cards

pakastin.github.io

Post reply on HN
Print view View original

41–50 of 165 posts

Re: HTML5 Deck of Cards

#41

Post by kelukelugames »

pluma wrote: post #29
kelukelugames wrote: post #27

How did you get it to show up at the URL: http://pakastin.github.io/deck-of-cards/ ? I thought we needed to make a separate repository for github pages first. My other repo doesn't show at all.

You just need a gh-pages branch on the repo. The separate repo is only for the "root folder" of that subdomain (i.e. the content of the master branch of the repo pakastin/pakastin.github.io shows up at pakastin.github.io/ and the content of the gh-pages branch of the repo pakastin/xyz shows up at pakastin.github.io/xyz).

Thanks. I've been manually copying the directories into my gh-pages repo. lol.

Re: HTML5 Deck of Cards

#42

Post by daok »

riebschlager wrote: post #7

Maybe it's a weird takeaway, but this line is really clever: var suit = i / 13 | 0; That's such a clean way to get a 0, 1, 2 or 3 from each card's `i` and I never would have thought of it.

1.89% faster than Math.Floor, 100% more hard to read.

Re: HTML5 Deck of Cards

#43

Post by jpollock »

ZitchDog wrote: post #20
pakastin wrote: post #9

Earlier quoted context omitted.

I think "value | 0" is basically same as "Math.floor(value)"

Yes, but it is 18% faster do run the bitwise or on my machine: https://jsperf.com/or-vs-floor/2

There is no substantial difference in performance on mine (within 2%), although the OR was always a little bit faster.

Chrome 45 on Linux

It's odd that a bitwise operator should have the effect of truncating the float (since X|0 == X)? I'm guessing there's an implicit type conversion to int in the middle?

Re: HTML5 Deck of Cards

#44

Post by TazeTSchnitzel »

Stormcaller wrote: post #39
hacker_9 wrote: post #23

Earlier quoted context omitted.

In asmjs you see this sort of syntax 'num | 0' a lot [0] to enforce that the number is an int, so that may be where he got the idea. [0] http://www.sitepoint.com/understanding-asm-js/

It exists in other languages, too, like PHP.

You can do this in PHP, but you shouldn't.

Use (int), like C.

Re: HTML5 Deck of Cards

#45

Post by TazeTSchnitzel »

jasonkester wrote: post #8

Any idea why the suits all render as smiley faces in Chrome/Mac? Inspecting the cards, you can see that they are using the unicode character for spade/heart/etc. But in the browser itself you get nothing but smileys. Perhaps the font they're using doesn't have those code points? Edit: Yes, that's the case. Font is not specified, so it comes in as "inherit" by default, using whatever the browser feels like. On Mac Chr…

> On Mac Chrome, that must use smileys to represent unknown characters.

You're seeing the Last Resort fallback font, which shows a symbol representative of the codepoint range, and the range's name, so you can identify what type of font you need. Since the suits are in the smiley block, you see a smiley. If you had no Latin alphabet font, you'd see an A.

https://en.wikipedia.org/wiki/Fallback_font

Re: HTML5 Deck of Cards

#46

Post by takeda »

riebschlager wrote: post #7

Maybe it's a weird takeaway, but this line is really clever: var suit = i / 13 | 0; That's such a clean way to get a 0, 1, 2 or 3 from each card's `i` and I never would have thought of it.

If you're referring to |0 then I would disagree. It shows how horrible JavaScript is. This is very confusing if you're not familiar with this trick or strange behavior of the language.

    suit = int(i / 13)
    suit = (int)(i / 13)
    suit = math.floor(i / 13)
Are much easier to understand for someone not familiar with the code.

Re: HTML5 Deck of Cards

#47

Post by TazeTSchnitzel »

takeda wrote: post #46
riebschlager wrote: post #7

Maybe it's a weird takeaway, but this line is really clever: var suit = i / 13 | 0; That's such a clean way to get a 0, 1, 2 or 3 from each card's `i` and I never would have thought of it.

If you're referring to |0 then I would disagree. It shows how horrible JavaScript is. This is very confusing if you're not familiar with this trick or strange behavior of the language. suit = int(i / 13) suit = (int)(i / 13) suit = math.floor(i / 13) Are much easier to understand for someone not familiar with the code.

The behaviour of JavaScript's bitwise operators isn't that unreasonable, but the excessive use of this trick for tiny performance gains at the expense of readability is a shame.

Re: HTML5 Deck of Cards

#48

Post by TazeTSchnitzel »

jpollock wrote: post #43
ZitchDog wrote: post #20

Earlier quoted context omitted.

Yes, but it is 18% faster do run the bitwise or on my machine: https://jsperf.com/or-vs-floor/2

There is no substantial difference in performance on mine (within 2%), although the OR was always a little bit faster. Chrome 45 on Linux It's odd that a bitwise operator should have the effect of truncating the float (since X|0 == X)? I'm guessing there's an implicit type conversion to int in the middle?

The bitwise operators don't make sense for floating-point values. So they work by converting to a 32-bit integer first.

Re: HTML5 Deck of Cards

#49

Post by riebschlager »

takeda wrote: post #46
riebschlager wrote: post #7

Maybe it's a weird takeaway, but this line is really clever: var suit = i / 13 | 0; That's such a clean way to get a 0, 1, 2 or 3 from each card's `i` and I never would have thought of it.

If you're referring to |0 then I would disagree. It shows how horrible JavaScript is. This is very confusing if you're not familiar with this trick or strange behavior of the language. suit = int(i / 13) suit = (int)(i / 13) suit = math.floor(i / 13) Are much easier to understand for someone not familiar with the code.

I take your point, but that's some crazy non-JS typecasting in your first two examples :)
Post reply on HN