Show HN: Wiv.js – A library for a more wiggly div | Hacker News Reader

Show HN: Wiv.js – A library for a more wiggly div

jjkaufman.github.io

265 pointsjjkaufman55 comments

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.

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

https://github.com/jjkaufman/wiv.js/pull/5 if you are curious

Awesome! You're welcome :)

This would have been absolutely huge on MySpace.

It might still catch on on https://neocities.org/

neocities is rad

https://coughdrop.neocities.org/

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)

I sense a second coming soon

Or TheOutline

MySpace was rad

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 :)

How about Wiv.js and Comic Sans?

WivSansJs

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)

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).

I have a water-cooled i7 6700k and the rising fan speed was the first thing I heard as well. Normally this does not happen when browsing the web.

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

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

Thanks, I hate it.

The blink tag of Web 2.0 has arrived.

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

Ah yes, the perf killer

The ripple actually looks good though

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

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

This is rad and obnoxious at the same time

The quintessential eighties.

https://www.youtube.com/watch?v=1tHAxxni8RM

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

This should have existed in 1994

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/

https://www.youtube.com/watch?v=qs7f3ssuEjA

Absolutely

I have been looking for these kinds of things! A month ago I started building a similar project: 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!

> 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?

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...

Quirky sounds apt. How about awesome-quirksmode as a historical reference? :P

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

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!

Hey, it's your project, I just made a silly joke :)

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

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 :)

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

(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?

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

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...

reminds me of freezeframe.js, you can grab an a slice of a gif and draw a canvas image on top

https://github.com/ctrl-freaks/freezeframe.js

except this is just any regular div element

This should come built in in all modern browsers.

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.

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)

Appreciate all the feedback. Merry Christmas!

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

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

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

Wiggle wiggle click me stanger Wiggle wiggle buy me flowers

Upvoting because it's wednesday.

Reply on news.ycombinator.com