
Show HN: Wiv.js – A library for a more wiggly div - jjkaufman
https://jjkaufman.github.io/wiv.js/
======
PavlovsCat
move these things into initWiv() and cache them:

    
    
        var speed = parseFloat(wivCurve.parentNode.dataset.wivSpeed)
        var height = parseFloat(wivCurve.parentNode.dataset.wivHeight)
        var tightness = parseFloat(wivCurve.parentNode.dataset.wivTightness)
        var thickness = parseFloat(wivCurve.parentNode.dataset.wivThickness)
        var ctx = wivCurve.getContext("2d");
    

do this once on init, the canvas context remembers it anyway:

    
    
        ctx.strokeStyle = wivCurve.parentNode.dataset.wivColor != undefined ? wivCurve.parentNode.dataset.wivColor : "#FF0000"
    

don't convert numbers and strings all the time, use numbers and init them to 0

    
    
        //current frame is tracked on per wiv basis. This is to help with speed calculations 
        if (parseFloat(wivCurve.dataset.count) > 100000) {
            wivCurve.dataset.count = "0";
        }
        wivCurve.dataset.count = (wivCurve.dataset.count ? parseFloat(wivCurve.dataset.count) : 0) + speed;
    

parseFloat(wivCurve.dataset.count) also is used a lot in that loop.

And don't set unneccessary canvas state, this should happen only once per draw
loop iteration: [edit, actually, as I said above, the canvas contexts remember
it individually, so do this once in initWiv(), and not in the draw loop at
all, yay!]

    
    
        ctx.lineWidth = thickness;
    

That's all just at first glance, but I bet you, this would help with slow
laptops and whatnot :) Such "small" things really add up when you do them 60
times per second * number of borders. I don't know if setting the canvas width
or height to the value it has anyway to clear it (instead of clearing/drawing
a rectangle explicitly) is still a useful thing to do, but you might try that
as well.

~~~
jjkaufman
Thank you for the thoughtful code review. It is already running smoother

[https://github.com/jjkaufman/wiv.js/pull/5](https://github.com/jjkaufman/wiv.js/pull/5)
if you are curious

~~~
PavlovsCat
Awesome! You're welcome :)

------
edoo
This would have been absolutely huge on MySpace.

~~~
vanderZwan
It might still catch on on [https://neocities.org/](https://neocities.org/)

~~~
jjkaufman
neocities is rad

[https://coughdrop.neocities.org/](https://coughdrop.neocities.org/)

~~~
vanderZwan
Hey, you're the person who made this lib!

You're the one who is rad! Thanks for sharing this Christmas gift! :)

(also, I love neocities. Happily donate to it and using it unironically for
sharing small things)

------
ryanchoi
This is guilt-trippingly sweet, there's a certain charm I get from this, kind
of like that of tacky Christmas sweaters or unironically used comic sans :)

~~~
snazz
How about Wiv.js _and_ Comic Sans?

~~~
lapnitnelav
WivSansJs

------
KeybInterrupt
I opened this on my Notebook, and it's Fan spun out of control!

it might be my ancient hardware, but this is rather CPU intensive it seems.

But the effect is fun, and cool non the less!

(on Linux, Xorg + Frirefox)

~~~
LukeShu
I suspect that Firefox is relying on modern-ish GPU features to make things
"fast", but Mesa is straining the CPU to emulate those features, which are
missing from your older GPU. (Software going "I'll use the GPU, that must make
things faster!" is what finally pushed me away from using an x60 as my daily
driver).

------
saagarjha
As long as it’s not fast or turbo, this is actually not as bad as I expected.
It’s soothing, even.

------
zeta0134
Ha! This is completely nonsense, and completely awesome. Description checks
out. Well done!

------
pzone
Thanks, I hate it.

------
m0zg
The blink tag of Web 2.0 has arrived.

~~~
JoshMnem
It's already here: Material Design "ripple" effect.

~~~
tuesdayrain
The ripple actually looks good though

~~~
JoshMnem
The ripple looks bad and is terrible for accessibility. Not everything on a
page should move. Look up animation and accessibility.

------
hayksaakian
It's cool, and I could see it making it's way into more lighthearted projects

------
miguelmota
This is rad and obnoxious at the same time

~~~
cafebabbe
The quintessential eighties.

~~~
jjkaufman
[https://www.youtube.com/watch?v=1tHAxxni8RM](https://www.youtube.com/watch?v=1tHAxxni8RM)

------
madprops
Wondering if it's possible to increase the speed on hover

------
quickthrower2
This should have existed in 1994

~~~
jasonkester
It did. Here's my personal site from that era, complete with javascript
"Layer" (in Netscape) (or DIV in IE3) tags doing the wiggling:

[http://jasonkester.com/](http://jasonkester.com/)

------
dsalaj
I have been looking for these kinds of things! A month ago I started building
a similar project: [http://dsalaj.com/quirky-ux/](http://dsalaj.com/quirky-
ux/)

But now I realize these things should also be collected to a list somewhere. I
linked your project in mine for starters. Thanks for sharing! Cheers!

~~~
vanderZwan
> _But now I realize these things should also be collected to a list
> somewhere._

Like an _awesome_ list? What should it be called? _awesome-oldschool_ maybe?

~~~
dsalaj
Well... I've been thinking a lot about this terminology. On one hand it is
useless/oldschool/ugly/trash/weird kind of effect, but on the other hand it
can be extremely effective (like described in motivation of my quirky-ux (see
talk by Vitaly Friedman of smashingmagazine)).

tl;dr ...websites with a lots of character which break best practice
guidelines and design rules are able to capture audience better and produce
better results (turnover, traffic, user retention, etc.)

So I ended up finding a neutral sounding word: QUIRKY - having or
characterized by peculiar or unexpected traits or aspects.

I would gladly reformat quirky-ux to be primarely this collestion/list of
quirky stuff, but maybe _awesome-quirky_ makes more sense or _awesome-quirky-
ui_ or something similar...

~~~
vanderZwan
Quirky sounds apt. How about _awesome-quirksmode_ as a historical reference?
:P

~~~
dsalaj
Cool. I would say _awesome-quirks_ sounds a bit better and also avoids the
confusion with the meaning of quirks mode, the compatibility feature of
browsers. I have created the list: [https://github.com/dsalaj/awesome-
quirks](https://github.com/dsalaj/awesome-quirks)

Please contribute! If you really prefer the name _awesome-quirksmode_ I have
no problem with renaming the repo or adding you as a contributor so you can do
it. Thanks for the feedback!

~~~
vanderZwan
Hey, it's _your_ project, I just made a silly joke :)

------
mindcrime
That is amazingly cool. Not sure what I'd ever use it for, but it's awesome
nonetheless!

~~~
kangoo1707
It can be use for form validation. If user doesn't enter an input, we can
"wiggle" it for 2 seconds (together with a red error message). Recently I did
just that :)

~~~
mindcrime
Aaaww, yeah. I like that idea a lot. I might just use that in a project I'm
working on. Thanks for mentioning that!

------
kristopolous
(edit: this assertion is incorrect, I skimmed the code too fast) I had no idea
that you can draw on any element, not just canvas ones ... I thought there was
a semantic meaning there ... apparently there isn't?

~~~
MatthewRayfield
Looks like it's adding a canvas element to the divs and positioning it to line
up.

~~~
kristopolous
Ah yes I missed the var canvas line and just presumed the code was getting a
context on the selected div instead, a feature I didn't know was possible (it
isn't).

The canvas declaration is staring right at me now that I review it again.
That's life...

------
kidoodle
This should come built in in all modern browsers.

~~~
amelius
Browsers are getting too feature laden. Soon nobody will be able to write a
browser from scratch. Instead, let users implement the features they need, or
let them use libraries if necessary.

~~~
RobertKerans
Yes, sure, but thIs is one of those things we don't realise should be a core,
kernel-level feature until it's put on our Christmas dinner plate (by all
means keep things like security/auth/etc in libraries)

------
jjkaufman
Appreciate all the feedback. Merry Christmas!

------
jccalhoun
If there is an official Dr. Katz web page it should use this.

------
amunategui
Very cool - hopefully ads won't usurp this...

------
hkon
Great stuff! Now let's see it for text next!

------
conanthe
Wiggle wiggle click me stanger Wiggle wiggle buy me flowers

------
more-coffee
Upvoting because it's wednesday.

