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

71–80 of 124 posts

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

#71

Post by uryga »

intrasight wrote: post #59
shihn wrote: post #27

Earlier quoted context omitted.

Yep sliders aren't quite baked yet. Should work on chrome. Thanks for reporting. https://github.com/wiredjs/wired-slider/issues/3

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.

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

#72

Post by kbenson »

arbie wrote: post #62
intrasight wrote: post #60

Earlier quoted context omitted.

Not knocking the design in any way. Just expressing frustration and sadness that you've even have to think about function.

This library is great, although I don't understand your frustration. An interactive mockup library with broken interaction is a bug, no?

I think the point is that if the function and design were actually separate, a non functioning element would also be non functioning in plain HTML (no/little design). That would be much easier to spot, and wouldn't even really be the designers problem.

It's understandable why it happens here, the browser can't easily provide this design with pure HTML and CSS, so javascript and SVG are likely carrying some of the load, and bugs there are causing problems.

That said, one of the main benefits of separating function and design is that this stuff isn't supposed to happen, or be much more rare at least, so it is sad that to utilize this we have to introduce those problems again.

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

#73

Post by shihn »

webXL wrote: post #70

The elements are drawn with enough randomness that no two renderings will be exactly the same — just like two separate hand-drawn shapes. Awesome, but why go through all that trouble if the text is going to be the same? I know typography is another degree or two of complexity, but I think that would make this particular feature complete.

Designing a variable font that does that would be the best solution for that. Variable fonts still have to go before accepted on all browsers.

As for the randomness uniqueness, it was a bonus that came out of the algorithms I was using to draw shapes.

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

#74

Post by mathisonian »

shihn wrote: post #6

After working on http://roughjs.com/ I thought it would be interesting to create common sketchy UI components that worked like actual controls. Web components seemed liked the obvious tech for that. So, yeah, here's wired-elements.

This looks great! I might try to make a theme for https://idyll-lang.org/ that utilizes the components.

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

#75

Post by d4l3k »

hugozap wrote: post #55
spankalee wrote: post #15

Earlier quoted context omitted.

These are web components and work fine within React already. We shouldn't need to port every interesting UI component to every single framework anymore.

>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
Post reply on HN