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

Show HN: Wired-elements – UI web components with a hand drawn, sketchy look

wiredjs.com

Post reply on HN
Print view View original

101–110 of 124 posts

Re: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look

#101

Post by pjmlp »

uryga wrote: post #71
intrasight wrote: post #59

Earlier quoted context omitted.

The fact that your designs "don't work" is very disconcerting - given that we've spent 20 years trying to separate function from design. Does this mean that after 20 years that we still don't have a good clean separation?

Another comment in this thread mentioned a similar project, a Swing "napkin" theme, which managed a rough look as normal styling. So I guess Swing did something better than HTML/CSS - from skimming the comments i gathered that this library had to reimplement everything from scratch using SVG/Canvas.

Web components are still trying to catch up with the components market that native apps enjoy since the 90's.

I guess we still need a few more years of catching up.

Re: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look

#102

Post by pjmlp »

fredley wrote: post #99
roddux wrote: post #98

Reminds me of back when people used to make hand-drawn controls in Adobe Flash! Good memories. Nice work.

Flash was a wonderful era for the web. It's sad that nothing equivalent ever really came along to replace it.

I am looking forward to WebAssembly as the Flash revival.

Re: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look

#103

Post by pc86 »

jedberg wrote: post #30
spking wrote: post #5

This is fantastic! Very useful to get a concept into the browser and hopefully minimize clients focusing on visual design preferences too early in the process.

I hadn't thought of this, but this is an excellent point! You can use this to make a functional mockup for a client/boss/whomever, and by using these they will completely ignore all styling and focus on the functionality. Heck, I'm even thinking of using it now when we launch a beta, to get the users to focus on the functionality instead of the design. My only fear is that they will want to keep the design!

This is why I purchased Balsamiq when I was contracting, even the basic Bootstrap theme, even with bold text saying "ignore everything design related!!" I'd still get comments about button shapes, colors, complaints about shadows and graphics, etc.

Even with more "theme" stuff in a Balsamiq mockup like colors and images clients were able to focus much more on content, layout, and information architecture than design.

Re: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look

#104

Post by Diggsey »

Vinnl wrote: post #96

That's brilliant! One suggestion I have is to prevent rerendering when changing states, e.g. when checking a checkbox, draw a checkmark without changing the shape of the actual box it's in, or when selecting a dropdown item, to not change the edges of the dropdown even if the label displayed in it changes. Probably a lot more work though :)

Each component should generate a random seed on construction, and use that same seed for its entire lifetime.

Re: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look

#105

Post by swyx »

d4l3k wrote: post #75
hugozap wrote: post #55

Earlier quoted context omitted.

>These are web components and work fine within React already I tried with a simple CodeSandbox and they are not working for me. ( Unless I'm doing something wrong? ) https://codesandbox.io/s/pp4q7kw9q7

There's something weird going on in Chrome. This link works in Firefox though with the webcomponents polyfill https://codesandbox.io/s/jn85y61kx9

stuff like this is why i have trust issues with people who try to push webcomponents on me. I'm either not smart enough to understand why i dont get it, or its just not ready yet.

Re: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look

#106

Post by swyx »

spicyj wrote: post #51
swyx wrote: post #42

Earlier quoted context omitted.

i know and it was more just an exercise for myself. polymer and react interop still isnt very nice as far as i can tell. calm down :)

What could we do better?

i don't know. wanna try putting up a codesandbox to use wired-elements in a react app? would love to learn. sorry i dont know your affiliation with the polymer project or react-polymer. it just didnt seem usable when i looked at it

Re: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look

#109

Post by shihn »

csomar wrote: post #108

For the checkbox: Every time you click on the same one, the image changes. How do you achieve this apparent randomness?

The shapes are calculated with randomness at every render. i.e. it's not a single image that I turn on or off. It calculates and draws it every time it changes.

Re: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look

#110

Post by shihn »

Diggsey wrote: post #104
Vinnl wrote: post #96

That's brilliant! One suggestion I have is to prevent rerendering when changing states, e.g. when checking a checkbox, draw a checkmark without changing the shape of the actual box it's in, or when selecting a dropdown item, to not change the edges of the dropdown even if the label displayed in it changes. Probably a lot more work though :)

Each component should generate a random seed on construction, and use that same seed for its entire lifetime.

It's actually simpler than that. Most of the time it should not re-render at all. Should only re-render when the size has changed - at which point one needs to recompute anyway. I was just lazy and rendering every time.
Post reply on HN