React Kawaii – Cute React SVG Components | Hacker News Reader

React Kawaii – Cute React SVG Components

react-kawaii.now.sh

The author gave a talk on this at ReactConf 2018:

https://www.youtube.com/watch?v=1gG8rtm-rq4

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?

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

http://nytimes.github.io/svg-crowbar/

> 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.

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.”

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.

What if they are a child?

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.

Then you can be more technical.

Every time cutesy design comes up, two camps immediately go to war: the "Cute things make me want to bludgeon everyone in a 50 mile radius" camp and the "I actually like this stuff everywhere" camp.

It's probably just cultural because you can see differing attitudes toward it depending on where you look, but I am gonna be honest: I still think it's a bit silly how frustrated some people get over silly drawings.

I’m not frustrated over the drawings, I’m frustrated when they replace useful information. If there was both I’d actually not mind it at all, but giving me no information and giving me a stupid “error message” just makes me more annoyed at a time I’m already not very happy (because I was trying to do something that didn’t work).

Well that is understandable, but I think that in the end the decision of what color to paint the error screen has quite little to do with how much information is shown. Frankly it barely matters. If I'm on a web app, I look in the console and network logs for the real debug information. Why? Because just seeing a JSON parse error doesn't tell me that the API is returning non-sense, for example.

Maybe there is some loose correlation between sites with terse error information and sites that use cutesy error states... But there's Plenty of sites with useless error states. Probably most modern sites realistically.

Nothing frustrates me more than comments using hyperboles they copied from somewhere else. Personally I do prefer some visual indication that something crashed. Like a sad face on the side of an error, or whatever you can quickly add. That way I know I don’t have to read the whole thing. That doesn’t mean they have to use some edgy description like you’re pretending they do.

I’m figuring that most people here are aware of this meme, which is a slight exaggeration but still serves as a useful point of discussion. There’s no denying that there’s been a trend recently of hiding error messages and instead providing overly saccharine but unhelpful interfaces in their place.

The new BSOD in Windows 8(?) with the sad face also causes me the same increase in irritation, even more so because it hides everything except one unhelpful "try searching online for SOME_ERROR_CODE" line. Before, I would copy down in addition to the exception code, the address, filename, and parameters --- which often determine exactly what's wrong due to other users also posting the same detailed information and the solution online.

You get those things in the event log, or via the minidump. But the vast majority of Windows users will never bother to figure out the cause of a BSOD your (or my) way, so restarting immediately is actually more helpful for spurious issues.

I'm a developer and I usually would just restart the computer because I want to get back to coding asap.

Increasingly, the opportunity to use an emoji is the only reason I bother to communicate online at all ‍️

I’m not sure why you’re here, then, since Hacker News filters out emoji (believe me, I’ve tried).

This landed in my twitter feed last week: https://twitter.com/kibblesmith/status/1076219616735780870

There's "frustrating", and then "are you fucking kidding me" with regards to cutesy copywriting.

Somewhat ironically, when loading that page Twitter asked me to reload because an error occurred, but wouldn’t tell me what the error was or if there was anything I could do to prevent it…

I get this error at an extremely high rate when using twitter web. I am convinced that they are fully aware of this “bug” but don’t fix it to push people to the mobile app; and even suspect that they might trigger that error on purpose to this end.

Reloading the actual page works for me, the twitter reload button doesnt

One of the demos fails: https://codesandbox.io/s/23rk7j098j

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

Demo works great! https://i.imgur.com/hmplvqu.png

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

(I'm not a React user)

The license is MIT. (https://github.com/miukimiu/react-kawaii/blob/master/license) If you would like to port this to something else, you're free to do so. Expecting someone else to write software that meets your particular needs (see your comment down below "That sounds a little selfish") itself sounds a little selfish and entitled. If you think this library would benefit from a more general approach, you could also contribute back, as a number of others have already done.

> Expecting someone else to write software that meets your particular needs

You misunderstood: I'm hoping people write software that meets everybody's needs, not just mine.

Be the change you want to see in the world. Feel free to contribute back by extending the library to your framework of choice.

"Software that meets everybody's needs" needs to be defined by someone, and in this case, that someone is you. Take inspiration with what's been done and run with it. They've given you all the tools you need, including open source and a very permissive license.

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.

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.

But then it wouldn't make Hacker News front page would it ?

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.

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

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

Or people using other frameworks could be not selfish and use React. If she/he's the one giving stuff for free - it's on her/his terms.

Reply on news.ycombinator.com