11 ms·
Show HN: Wiv.js – A library for a more wiggly div
- zeta0134 8y agoHa! This is completely nonsense, and completely awesome. Description checks out. Well done!
- hayksaakian 8y agoIt's cool, and I could see it making it's way into more lighthearted projects
- saagarjha 8y agoAs long as it’s not fast or turbo, this is actually not as bad as I expected. It’s soothing, even.
- quickthrower2 8y agoThis should have existed in 1994
- jasonkester 8y agoIt 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/
- jjkaufman 8y agohttps://www.youtube.com/watch?v=qs7f3ssuEjA https://www.youtube.com/watch?v=qs7f3ssuEjA
- jjkaufman 8y agoAbsolutely
- shawn 8y agoLaarc is now Christmas themed: https://www.laarc.io https://www.laarc.io Arc makes it so easy to make changes like that. (def display-item-number (i) (when i (tag (td align 'right valign 'top class 'title) (fontcolor (if (even i) darkred darkgreen) (pr i "."))))) Happy holidays everyone. :) EDIT: Just got our first feature request. You can see all site tags here: https://www.laarc.io/l https://www.laarc.io/l
- m0zg 8y agoThe blink tag of Web 2.0 has arrived.
- JoshMnem 8y agoIt's already here: Material Design "ripple" effect.
- vanderZwan 8y agoAh yes, the perf killer
- tuesdayrain 8y agoThe ripple actually looks good though
- JoshMnem 8y agoThe ripple looks bad and is terrible for accessibility. Not everything on a page should move. Look up animation and accessibility.
- pzone 8y agoThanks, I hate it.
- kidoodle 8y agoThis should come built in in all modern browsers.
- amelius 8y agoBrowsers 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 8y agoYes, 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)
- ryanchoi 8y agoThis 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 8y agoHow about Wiv.js and Comic Sans?
- lapnitnelav 8y agoWivSansJs
- kristopolous 8y ago(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 8y agoLooks like it's adding a canvas element to the divs and positioning it to line up.
- kristopolous 8y agoAh 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...
- Kagerjay 8y agoreminds 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 https://github.com/ctrl-freaks/freezeframe.js except this is just any regular div element
- mindcrime 8y agoThat is amazingly cool. Not sure what I'd ever use it for, but it's awesome nonetheless!
- kangoo1707 8y agoIt 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 8y agoAaaww, yeah. I like that idea a lot. I might just use that in a project I'm working on. Thanks for mentioning that!
- edoo 8y agoThis would have been absolutely huge on MySpace.
- vanderZwan 8y agoIt might still catch on on https://neocities.org/ https://neocities.org/
- jjkaufman 8y agoneocities is rad https://coughdrop.neocities.org/ https://coughdrop.neocities.org/
- vanderZwan 8y agoHey, 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)
- agumonkey 8y agoI sense a second coming soon
- DaiPlusPlus 8y agoOr TheOutline
- jjkaufman 8y agoMySpace was rad
- hkon 8y agoGreat stuff! Now let's see it for text next!
- miguelmota 8y agoThis is rad and obnoxious at the same time
- amunategui 8y agoVery cool - hopefully ads won't usurp this...
- conanthe 8y agoWiggle wiggle click me stanger Wiggle wiggle buy me flowers
- more-coffee 8y agoUpvoting because it's wednesday.
- KeybInterrupt 8y agoI 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)
- deleted 8y ago[deleted]
- LukeShu 8y agoI 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).
- 1125 8y agoI 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.
- PavlovsCat 8y agomove 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 8y agoThank 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 8y agoAwesome! You're welcome :)
- madprops 8y agoWondering if it's possible to increase the speed on hover
- jccalhoun 8y agoIf there is an official Dr. Katz web page it should use this.
- jjkaufman 8y agoAppreciate all the feedback. Merry Christmas!
- dsalaj 8y agoI 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 8y ago> 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 8y agoWell... 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 8y agoQuirky sounds apt. How about awesome-quirksmode as a historical reference? :P
- dsalaj 8y agoCool. 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!