5 ms·
React Kawaii – Cute React SVG Components
- acemarke 8y agoThe 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
- saagarjha 8y ago> 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 8y agoDepends 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 8y agoI 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.
- deleted 8y ago[deleted]
- KaoruAoiShiho 8y agoWhat if they are a child?
- whatshisface 8y agoChildren 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.
- starbeast 8y agoThen you can be more technical.
- jowiar 8y agoThis landed in my twitter feed last week: https://twitter.com/kibblesmith/status/1076219616735780870 https://twitter.com/kibblesmith/status/1076219616735780870 There's "frustrating", and then "are you fucking kidding me" with regards to cutesy copywriting.
- saagarjha 8y agoSomewhat 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…
- GuiA 8y agoI 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.
- thecatspaw 8y agoReloading the actual page works for me, the twitter reload button doesnt
- haywirez 8y agoIncreasingly, the opportunity to use an emoji is the only reason I bother to communicate online at all ️
- saagarjha 8y agoI’m not sure why you’re here, then, since Hacker News filters out emoji (believe me, I’ve tried).
- deleted 8y ago[deleted]
- Klover 8y agoNothing 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.
- saagarjha 8y agoI’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.
- jchw 8y agoEvery 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.
- saagarjha 8y agoI’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).
- jchw 8y agoWell 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.
- userbinator 8y agoThe 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.
- ygra 8y agoYou 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.
- theonething 8y agoI'm a developer and I usually would just restart the computer because I want to get back to coding asap.
- CGamesPlay 8y agoNeat 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?
- javajosh 8y agohttp://nytimes.github.io/svg-crowbar/ http://nytimes.github.io/svg-crowbar/
- TheEskil 8y agoThere'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.
- d33 8y agoOne 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 8y agoDemo works great! https://i.imgur.com/hmplvqu.png https://i.imgur.com/hmplvqu.png
- amelius 8y agoWhy tie this to a specific framework when you can make it more generally applicable? (I'm not a React user)
- ng12 8y agoBecause 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 8y agoThat 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.
- leppr 8y agoBut then it wouldn't make Hacker News front page would it ?
- mateuszf 8y ago> 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.
- slig 8y agoCan 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 8y ago