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

111–120 of 124 posts

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

#112

Post by webXL »

shihn wrote: post #73
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.

Thanks. I didn't even know variable fonts were a thing. Perhaps someone will submit a pull request for the issue I just added.

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

#114

Post by shihn »

framestr wrote: post #113

This is fantastic! I’ll have to take a look at the licensing, id love to implement this on https://framestr.com as an available form skin.

MIT license (https://github.com/wiredjs/wired-elements/blob/master/LICENS...). Feel free to use the code however you like.

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

#115

Post by e111077 »

shihn wrote: post #87
d4l3k wrote: post #75

Earlier quoted context omitted.

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

I believe it's a shadow dom issue. Firefox doesnt support Shadow DOM yet so a 'shady dom' is used by the polyfill

This seems to be because you are accessing the DOM of the element from the constructor which is a no no. Here's a simple repro:

https://stackblitz.com/edit/lit-element-react-attributes-loc...

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

#117

Post by DonHopkins »

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.

We did that with The Sims. The programmers would sketch up stuff in Microsoft Paint as ugly as possible, to make it clear that it was just placeholder art:

https://i.imgur.com/4yh7Bqt.jpg

https://i.imgur.com/oMbtAL3.jpg

Q: Were these screenshots taken when you were working at EA/Maxis?

A: Yes, these have placeholder "programmer art" that looks really shitty on purpose, so nobody mistakes them for final artwork!

Q: I thought as much; also noticed the 'Live' 'Buy' and 'Build' mode placeholder text on the UI ;)

It's harder to make ugly stuff in 3dsmax, so we had to make it inexplicable instead. Things tended to get weird when we were doing things like testing the 3D sprite exporter animations. I am at a loss to explain this, other than it's an experiment in post-transmogrification texture mapping...

https://i.imgur.com/gmLNaBu.jpg

You could place "spores" on the ground that would grow into big Mona Lisa Mushrooms!

Before that, I also used the same "programmer art" approach for some demos I made at Kaleida, when I didn't have an art department at my disposal to do my bidding, but knew just enough Photoshop and Director to be a danger to myself and others. (Some of it literally looked like shit and smelled like stinky cheese that made people scream!)

https://medium.com/@donhopkins/1995-apple-world-wide-develop...

>To make any sense of this, you should realize that it’s live improvisational performance programming art. The graphical and audio artwork are just ugly placeholder “programmer art”. The references to “great content” are laughably ironic!

>I didn’t have an art department at my disposal, and I have terrible graphics design skills, but I didn’t let that stop me, because that wasn’t the point!

>The art is in how it works and what it does and how I use it, not how it looks or sounds.

>It was meant to inspire ScriptX developers as well as myself, and it led to me to later develop iLoci and MediaGraph.

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

#118

Post by DonHopkins »

Bjartr wrote: post #35
0x445442 wrote: post #21

Reminds of the Napkin look and feel for Java Swing apps. I worked on a project where we only demoed the Napkin L&F to our customers until we were feature complete. The idea was to keep them focused on functionality.

For those curious like I was http://napkinlaf.sourceforge.net/

I love the retro "3 1/2 Floppy (A:)" in the file chooser. Nice touch.

Or was it really that long ago?!?

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

#119

Post by shihn »

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

All working with react now. There was an issue wired-elements code: Here's a react demo: https://stackblitz.com/edit/wired-elements-react?file=index....
Post reply on HN