Here's a quick pop quiz. What is 'Poka-yoke'?
这是一个快速的流行测验。 什么是“ Poka-yoke ”？
Is it:
是吗：
a). A tasty, freeze-dried egg snack from Thailand? 一个)。 来自泰国的美味冻干鸡蛋零食？ b). A Woodpecker-like Pokemon? b)。 啄木鸟般的宠物小精灵？ c). A Japanese system for mistake-proofing? C)。 日本的防错系统？If you answered 'c' well, done, you get a gold star!
如果您回答好“ c ”，说对了，您将获得一颗金星！
Poka-yoke was invented by the Toyota Production System and is an approach to eliminating operator errors by making it impossible (or extremely difficult) to make them. It was originally known as ‘baka yoke‘ which translates to ‘fool proofing’ or ‘idiot proofing’.
Poka-yoke是由丰田生产系统发明的，是一种通过使操作员不可能(或非常困难)制造错误来消除操作员错误的方法。 它最初被称为“ baka yoke ”，翻译为“傻瓜打样”或“白痴打样”。
You're probably already aware of products using this idea. My manual Volvo won't even attempt starting unless the clutch is engaged.
您可能已经知道使用此想法的产品。 除非离合器已接合，否则我的手动沃尔沃汽车甚至不会尝试启动。
In a similar way, it’s now impossible to insert Apple’s lightning cables the wrong way, because — unlike the previous cable design — there IS no wrong way. Even most electrical power outlets are designed so the only way to use them is the correct way.
以类似的方式，现在不可能以错误的方式插入Apple的避雷线，因为与以前的线缆设计不同，这没有错误的方式。 甚至大多数电源插座都经过设计，因此使用它们的唯一方法是正确的方法。
This is a really useful principle to build into our designs — and even to retro-fit into the tools we use.
这是构建我们的设计乃至改型为我们使用的工具的真正有用的原则。
I spend a long time in WordPress, so I feel like I’ve got a good lock on its strengths and weaknesses. My biggest pet peeve is on the WP post composition page.
我在WordPress上度过了很长时间，所以我觉得自己已经牢牢掌握了它的优缺点。 我最大的烦恼是在WP帖子撰写页面上。
As this screencap shows, the page is almost entirely tones of wispy whites and light grays under dark text. As a writer, most of the time you are going to be pushing that drab, unobtrusive 'Save Draft' button on the top right.
如该屏幕截图所示，该页面几乎完全是深色文本下的淡淡白色和浅灰色调。 作为一名作家，大多数时候您都会按下右上方单调，不显眼的“保存草稿”按钮。
The main visual exception to this 'sea of grays' is that lovely, big, blue, enticing 'Publish' button on the right.
这种“灰色海洋”的主要视觉例外是右侧的可爱，大号，蓝色，诱人的“发布”按钮。
Now this is a button you REALLY don't want to push before you're ready because it instantly unleashes a surging cascade of RSS entries, tweets, Facebook posts, Discourse entries, and who knows what else.
现在，您真的不想在准备好之前按下此按钮，因为它会立即释放大量激增的RSS条目，tweet，Facebook帖子，Discourse条目，以及其他人知道什么。
There is no ‘undo’ or CMD-Z for that, so getting absent-mindedly lured into sending a half-baked, half-edited post out into the universe is a very bad look.
没有“撤消”或“ CMD-Z”功能，因此心不在lu地诱使您将半烘焙，半编辑的帖子发送到宇宙中是一件很糟糕的样子。
(So I'm told… on good authority… [whistles innocently]..).
(因此，有人告诉我……凭着良好的权威……[天真地吹口哨]。
Well, you could begin campaigning for WordPress to change it. Power to the people, right on! But how long you got?
好了，您可以开始竞选WordPress以更改它。 给人民的力量，继续前进！ 但是你多久了？
You could write a legit WordPress extension to fix the problem, and if you did, I would salute you, sir or madam.
您可以编写一个合法的WordPress扩展程序来解决此问题，如果您这样做了，先生或女士，我会向您致敬。
But sometimes even getting permission to install a new WordPress extension can be a roadblock. 'How will this extension impact server performance? Is it compatible with WordPress x.xx….? Do we really need it?'
但是有时甚至获得安装新的WordPress扩展程序的许可也可能是一个障碍。 '此扩展将如何影响服务器性能？ 它与WordPress x.xx ...兼容吗？ 我们真的需要吗？
Sysadmins are paid to ask these questions, and we often lack good answers.
系统管理员有酬劳来问这些问题，而我们通常缺少好的答案。
One often-overlooked way of tackling these types of UI problems is to hit the issue directly in your browser.
解决这些类型的UI问题的一个经常被忽视的方法是直接在浏览器中打的问题。
Stylish for Chrome is one of a handful of userstyles extensions (Stylebot is another) that let you re-engineer the sites and web-apps you use every day.
时髦的Chrome浏览器是少数几个用户样式扩展程序之一( Stylebot是另一个)，可让您重新设计每天使用的网站和网络应用程序。
If you haven’t used one before, these extensions allows you to automatically re-code the CSS on any site you target each time you visit. Want larger textboxes on Facebook? Re-code it. Hate the body font on a blog? Re-code it.
如果您以前从未使用过，则这些扩展使您可以在每次访问时自动在目标网站上重新编码CSS。 想要在Facebook上使用更大的文本框吗？ 重新编码。 讨厌博客上的正文字体？ 重新编码。
As frontend people, we tend to notice UX problems more keenly. This is your chance to fix them.
作为前端人员，我们倾向于更敏锐地注意到UX问题。 这是您修复它们的机会。
The Molly Guard – Photo by Mark Wahl
莫莉警卫队—照片作者Mark Wahl
Today I want to run you through a userstyle that I call 'The Molly Guard'. The original 'Molly Guard' was an improvized plexiglass cover for the 'Big Red Switch' on an IBM 4341 mainframe computer. Apparently 'Molly' was the programmer's daughter who reset the big red switch twice in one day.
今天，我想通过一种称为“ The Molly Guard ”的用户风格来帮助您。 最初的“ Molly Guard”是用于IBM 4341大型计算机的“ Big Red Switch”的简易有机玻璃盖。 显然，“莫莉”是程序员的女儿，一天之内两次重置红色大开关。
Fair enough too. Big red switches are hard to ignore, after all.
也足够公平。 毕竟，红色大开关很难忽视。
So, I wanted something similar to protect the publish button from absent-minded clicks. If you haven't used Stylish before, here's a quick lesson.
因此，我想要类似的方法来保护发布按钮免受不必要的点击。 如果您以前从未使用过时尚，这是一个快速的课程。
Install Stylish (there are version for other browsers).
安装时尚 (其他浏览器有版本)。
Go to the URL/app you want to tweak. 转到您要调整的网址/应用。 Use 'Inspect Element' to find a HTML class or ID you want to change. In my case, I found the ID of the WP publish button was '#publish'. 使用“检查元素”查找要更改HTML类或ID。 就我而言，我发现WP发布按钮的ID为“ #publish”。Click the Stylish button and hit 'Write style for URL'.
点击时尚按钮，然后点击“为网址写样式”。
Give your new userstyle a name – mine was 'The Molly Guard' – and start writing CSS.In my case, the quickest, dirtiest solution was to make the publish button tiny by default, but to expand it to normal size when you hover over it for a second — a hover state and a simple CSS transition provides the magic. I figured that would be hard to do by accident. 给您的新用户样式起一个名字-我的名字是“ The Molly Guard”-并开始编写CSS。对于我来说，最快，最肮脏的解决方案是默认情况下将发布按钮设置为很小，但将鼠标悬停在其上时，将其扩展为正常大小一秒钟-悬停状态和简单CSS过渡提供了魔力。 我认为这很难做到。 When you're done, hit 'Save' and you're in business. You should see a small red notification on your Stylish button telling you the userstyle is active. Your new CSS will now automatically run on that domain any time you render the site in that browser. You also can tweak your userstyle any time you like through the 'Manage installed styles' panel. 完成后，点击“保存”即可开展业务。 您应该在“时尚”按钮上看到一个红色的小通知，告诉您用户样式已激活。 现在，只要您在该浏览器中呈现网站，新CSS就会自动在该域上运行。 您还可以随时通过“管理安装的样式”面板调整用户样式。Here’s the result.
这是结果。
Let’s be clear: the Molly Guard was never designed to be a polished product. It’s more of a McGuyver ‘wire-and-chewing-gum hack’, but I suspect it’s already saved me many times over. I could spend more time writing a more elegant solution, but this one does the job – it ‘satisfices’.
让我们清楚一点：Molly Guard从未设计成抛光产品。 这更像是McGuyver的“电线和口香糖黑客”，但我怀疑它已经为我省了很多遍。 我可以花更多的时间来编写一个更优雅的解决方案，但是这个可以完成工作-它“令人满意”。
I also use Stylish to tweak Campaign Monitor, Tweetdeck, Groupon and Spotify amongst other sites. If it runs on CSS, you can unleash your CSS superpowers upon it. The cool thing is, you can stop complaining about bad UX on sites and just fix it and get on with life. It’s quite cathartic.
我还使用时尚来调整Campaign Monitor，Tweetdeck，Groupon和Spotify等网站。 如果它在CSS上运行，则可以在其上释放CSS的超能力。 很棒的事情是，您可以停止抱怨网站上的UX不佳，而只需对其进行修复就可以继续生活。 这很通俗。
A few readers have mentioned that they prefer Stylebot or even UserCSS. These look great and it’s really just the legacy that has kept me on Stylish, so check them out. Stylebot certainly appears to have a better social/sharing aspect.
一些读者提到他们更喜欢Stylebot甚至UserCSS 。 这些看起来很棒，而实际上正是让我保持“时尚”风格的遗产，所以请查看它们。 Stylebot显然具有更好的社交/共享方面。
One interesting potential use for Stylish is a kind of guerilla feature development method. You can build a working prototype of a new feature — perhaps new modals or navigation changes — live on your existing site without needing to touch any of the source code.
时尚的一个有趣的潜在用途是一种游击特征开发方法。 您可以在现有站点上实时构建新功能(可能是新的模式或导航更改)的有效原型，而无需接触任何源代码。
Getting buy-in on a new feature may be easier if your client, manager or test subject can see it working on a real site. I’ve used this method twice and it’s been very effective. Sometimes userstyles are the fastest way to get a usable result.
如果您的客户，经理或测试对象可以看到新功能在实际站点上正常运行，那么购买新功能可能会更容易。 我已经使用过两次这种方法，并且非常有效。 有时，用户风格是获得可用结果的最快方法。
Originally published in the SitePoint Design Newsletter
最初发布在SitePoint设计时事通讯中
翻译自: https://www.sitepoint.com/userstyles-making-molly-switch/
