
React Kawaii – Cute React SVG Components - mediumdeviation
https://react-kawaii.now.sh/
======
acemarke
The author gave a talk on this at ReactConf 2018:

[https://www.youtube.com/watch?v=1gG8rtm-
rq4](https://www.youtube.com/watch?v=1gG8rtm-rq4)

------
CGamesPlay
Neat to see a small MIT-licensed clip art library wrapped up in a convenient
React API. Would it be hard to render these to static SVG files?

~~~
TheEskil
There's a .sketch file included in the repository
([https://github.com/miukimiu/react-
kawaii/tree/master/sketch](https://github.com/miukimiu/react-
kawaii/tree/master/sketch)). Opens fine in the free version of Figma
([https://www.figma.com/](https://www.figma.com/)). Just requires a bit of
effort/time to export all the faces on all the components into SVGs.

------
saagarjha
> Sometimes things go wrong and when it happens nothing can be more boring and
> frustrating than an awful screen just displaying the error message!

Please don’t do this. Nothing frustrates me more than a “OOPSIE WOOPSIE!! Uwu
We made a fucky wucky!! A wittle fucko boingo! The code monkeys at our
headquarters are working VEWY HAWD to fix this!“ when I’m already annoyed at
the thing for not working.

~~~
Jorge1o1
Depends on the target market. I personally would love to see exception logs
every time a page 500s, but (1) it’s a security risk, (2) It’s a bad idea for
your average user.

Your Average Joe would be confused when they see the error description. And if
it has one of those good-on-paper/bad-in-practice phrases like “contact our
webmaster” it’s even worse.

They’ll start calling you or writing emails, thinking that they’re helping but
the conversation is something like:

I’m trying to buy a sweater for my grandkids, there’s 5 of them. Jimmy is 6
years old ... So when I got to the sweaters page I typed in: “turtleneck”

Then they start asking — no, DEMANDING, explanations they won’t understand. So
how do you explain to Joe that you were in the middle of a DB migration?

And even if you just have a bot answer his email or whatever, then why did you
even bother writing the bot if it’s not a human reading it?

So I think oftentimes the best solution is a cute lil dino saying “try
refreshing, and if not, go to our homepage and try again.”

~~~
saagarjha
I don’t like keeping my users in the dark, no matter how “untechnical” they
are; it makes me feel like I don’t respect them enough to understand, even at
a high level, what’s going on. In your case, usually I’d say something like
“We’re having issues with our database right now; please try refreshing or
going to the home page. If this happens again, you can contact support at
support@”. So they have a general idea of what went wrong, which they can
mention when contacting support (if I get a bunch of these, maybe the database
migration isn’t going well?) and they don’t feel like I’m treating them like a
child. More technical users can try to stay away from operations that will
touch the database, or optionally take a look at the logs that I hide behind a
“details” button.

~~~
KaoruAoiShiho
What if they are a child?

~~~
whatshisface
Children don't have to be treated like adults to be happy, but in this case I
don't see what you or they could gain by treating them differently.

------
d33
One of the demos fails:
[https://codesandbox.io/s/23rk7j098j](https://codesandbox.io/s/23rk7j098j)

"SecurityError Permission denied to access property "dispatchEvent" on cross-
origin object"

------
switz
Demo works great!
[https://i.imgur.com/hmplvqu.png](https://i.imgur.com/hmplvqu.png)

------
amelius
Why tie this to a specific framework when you can make it more generally
applicable?

(I'm not a React user)

~~~
ng12
Because React is a framework built around reusable components. As a React user
I'm much less likely to use your library if there's no React bindings.

~~~
amelius
That sounds a little selfish; think of people using other frameworks.

Also, in this particular case, the graphics are simply two layers of SVG: an
image of a ghost, backpack, browser, etc. and superimposed on top of that a
"mood". You can compose these images with two lines of CSS, no React required.

~~~
slig
Can you share the two lines of CSS that would make something like this work?

    
    
        <div style="width: 200px" class="kawaii-backpack kawaii-happy"></div>
    
    

or this:

    
    
        <div style="width: 200px">
            <img src="kawaii-backpack.sgv" />
            <img src="kawaii-happy.svg" />
        </div>
    
    

Edit: it should also work with a color user defined color.

~~~
sydd
Webcomponents were invented to do this. You just need a polyfill for now.

