shihn

11 ms·

61.
by shihn 8y ago
https://pbs.twimg.com/media/DezCaWaUYAAa5ih.jpg:large
62.
by shihn 8y ago
Working now: https://stackblitz.com/edit/wired-elements-react?file=index....
63.
by shihn 8y ago
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....
64.
by shihn 8y ago
MIT license ( https://github.com/wiredjs/wired-elements/blob/master/LICENS... ). Feel free to use the code however you like.
65.
by shihn 8y ago
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.
66.
by shihn 8y ago
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.
67.
by shihn 8y ago
Slider is fixed now.
68.
by shihn 8y ago
Slider is fixed now.
69.
by shihn 8y ago
Slider is fixed now.
70.
by shihn 8y ago
Theres a stand alone drawing library roughjs.com that might be useful for more generic drawings. I believe people have used it with reveal.js to use them in presentations.
71.
by shihn 8y ago
Mostly there. Firefox still needs a polyfill and some issues working with react
72.
by shihn 8y ago
I believe it's a shadow dom issue. Firefox doesnt support Shadow DOM yet so a 'shady dom' is used by the polyfill
73.
by shihn 8y ago
Might I plug in my other project: http://roughjs.com/ which is a generic drawing library for drawing sketchy shapes. I believe people have already tried merging it with some diagramming tools.
74.
by shihn 8y ago
I was thinking of wireframes
75.
by shihn 8y ago
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 d
76.
by shihn 8y ago
The web page is using a hand written styles google fonts. Variable fonts may be a way to randomize the font at every render.
77.
by shihn 8y ago
It's actually related to where the slider control is located relative to the page. Chrome and Firefox return different coordinates for SVG node bounds when the node is transformed. Need to find an alternate calculation that works on al
78.
by shihn 8y ago
To be honest, I did think about accessibility early on but realized that the main use case was for mockups and it wasn't high on the priority list for that scenario. I do plan to make most of these controls accessible before 1.0 releas
79.
by shihn 8y ago
the controls inherit the font. So the person using the components can set them to whichever they want. I use 'Gloria Hallelujah' from google fonts' handwritten set on the website.
80.
by shihn 8y ago
Yep not very touch friendly at the moment. Bug filed
81.
by shihn 8y ago
Yep sliders aren't quite baked yet. Should work on chrome. Thanks for reporting. https://github.com/wiredjs/wired-slider/issues/3
82.
by shihn 8y ago
Yes: https://fonts.google.com/specimen/Gloria+Hallelujah
83.
by shihn 8y ago
Yep. Doesn't work with touch events properly at the moment. Work in progress!
84.
by shihn 8y ago
To give full credit, the designer was adapted from https://github.com/PolymerLabs/wizzywid
85.
by shihn 8y ago
I do plan to make them more accessible. Wanted to get to a preview build first and then evolve. Thanks for the input.
86.
by shihn 8y ago
I must add that designer may not quite work anymore. Haha. Will get back to it at some point :)
87.
by shihn 8y ago
The web components use SVG and are build on lit-element ( https://github.com/Polymer/lit-element ) as the web-component base. Rough.js can render to either canvas or SVG.
88.
by shihn 8y ago
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 wi
89.
by shihn 8y ago
Yep. It was mostly done for fun. I can see it being a tool for wire-framing or interactive mockups.
90.
Show HN: Wired-elements – UI web components with a hand drawn, sketchy look(wiredjs.com)
650 points by shihn 8y ago|120 comments

More ›