電臺復活節

by Ethan Ryan

由伊桑·瑞安(Ethan Ryan)

如何通過在控制臺中隱藏復活節彩蛋使您的應用程序用戶驚訝 (How to surprise your app’s users by hiding Easter eggs in the console)

I love console.logging(“stuff”).

我喜歡console.logging(“ stuff”)。

I do it throughout my apps, for debugging purposes and feature building purposes, and just for the sheer hell of it. It’s fun to log stuff to the console.

我在整個應用程序中都這樣做，出于調試目的和功能構建目的，并且純粹出于此目的。 將內容記錄到控制臺很有趣。

I even use console.warn() and console.error(), and console.table() if I’m feeling frisky.

如果我感到煩躁，甚至可以使用console.warn()和console.error()以及console.table() 。

I like all the pretty colors they make in my console, and sometimes you want some messages to stand out more than others.

我喜歡它們在控制臺中制作的所有漂亮顏色，有時您希望某些消息比其他消息更加突出。

But I realized while looking at my story generator app WordNerds yesterday than I was logging to the console in production mode.

但是我昨天在看故事生成器應用程序WordNerds時發現 ，與在生產模式下登錄控制臺相比，我意識到了這一點。

Uh-oh spaghetti-ohs.

哦，意大利面條，哦。

That’s a no-no. It could slow down the code unnecessarily, and more importantly, it could compromise my users’ email addresses! I was logging all my users’ usernames and email addresses. Not cool! Their passwords are encrypted of course but still, no bueno. I wouldn’t want any bad guys getting a a bunch of my users’ email addresses and spamming them crapola.

那是不對的。 它可能會不必要地降低代碼速度，更重要的是，它可能會損害我的用戶的電子郵件地址！ 我正在記錄所有用戶的用戶名和電子郵件地址。 不酷！ 他們的密碼當然是加密的，但仍然沒有加密。 我不希望任何壞蛋得到我用戶的電子郵件地址，并給他們發送垃圾郵件。

在生產模式下擺脫控制臺日志 (Getting Rid of Console Logs In Production Mode)

Fixing it turned out to be easy. Sure, I could have gone through the codebase and commented out all my console.logs(), but that would be a pain, and some of them are serving important purposes in development mode.

修復它很容易。 當然，我可以遍歷代碼庫并注釋掉我的所有console.logs()，但這很痛苦，其中一些在開發模式下起著重要的作用。

Luckily there’s an easier, better way.

幸運的是，有一種更簡便，更好的方法。

First I consulted some of the solutions to this problem listed on StackFlow, and then ultimately went with the first solution listed on this blog post.

首先，我咨詢了 StackFlow上針對此問題的一些解決方案 ，然后最終采用了此博客文章中列出的第一個解決方案。

As some of the comments mentioned when someone listed this as a solution to the problem: “That’s a hack. Your [sic] wasting computation in production”

正如有人將其列為問題解決方案時提到的一些評論：“這是黑客。 您的[原文如此]浪費了生產中的計算量”

Good debate! I wasn’t too worried about calling an empty function several times and wasting some computation in production, so I went with this solution, because it’s easy to implement and solves my problem.

好辯論！ 我不太擔心多次調用空函數并浪費生產中的計算量，因此我選擇了此解決方案，因為它易于實現并解決了我的問題。

Here’s how I did it, in the src/index.js file:

這是我在src / index.js文件中執行的操作：

Of course I could do this in any file, like the App component, or my StoryContainer component. Anywhere as long as it was before any console logs or warns or errors were being rendered. But it made sense to me to do it at the root.

當然，我可以在任何文件中執行此操作，例如App組件或StoryContainer組件。 只要在呈現任何控制臺日志或警告或錯誤之前的任何時間。 但是從根本上講，這對我來說很有意義。

I tested it in development by replacing ‘production’ with ‘development’, and it worked! No more messages in the console.

我在開發中通過將“生產”替換為“開發”來對其進行了測試，并且成功了！ 控制臺中沒有更多消息。

將消息添加回控制臺 (Adding Messages Back Into the Console)

But then I felt sad :(

但是后來我很難過:(

No more messages in the console? Seemed so sparse.

控制臺中沒有更多消息了嗎？ 看起來如此稀疏。

May as well have SOME messages for those curious, intrepid word nerds daring enough to open up the console.

對于那些大膽地打開控制臺的好奇，勇敢的書呆子，可能還會收到一些消息。

So I added one back in, like a hidden Easter egg:

所以我又添加了一個，就像一個隱藏的復活節彩蛋 ：

How’d I do this? Easy: since all my app’s calls to console.log(), console.warn(), and console.error() where being overwritten by empty functions, I simply added in a console.info()! It’s basically the same as a console.log(). Some of the differences are listed, and disputed, here.

我該怎么做？ 容易：因為我的應用程序對console.log() ， console.warn()和console.error()所有調用都被空函數覆蓋，所以我只添加了console.info() ！ 它基本上與console.log()相同。 這里列出了一些差異，并且有爭議。

hello everybody! was a little boring though. I already had my app’s logged-in user’s name stored in state, so why not personalize my message?

hello everybody! 雖然有點無聊。 我已經將應用程序的登錄用戶名存儲在狀態中，那么為什么不個性化我的消息呢？

And if I’m gonna personalize my message, why not personalized a bunch of messages, and randomly return one every time a logged-in user inspects the console? Everyone likes finding Easter eggs!

而且，如果我要個性化我的消息，為什么不個性化一堆消息，并在每次登錄用戶檢查控制臺時隨機返回一條消息？ 每個人都喜歡找到復活節彩蛋！

That’s what I decided to do, and here’s how I did it:

那就是我決定要做的，這就是我的做法：

I’m rendering my Greeting component in my StoryContainer, so that whenever a logged-in user chooses to check out the console, they’ll see one of those friendly messages!

我將在StoryContainer中渲染我的Greeting組件，以便每當登錄用戶選擇檢出控制臺時，他們將看到這些友好消息之一！

function getFriendlyMessage(nameString) {let messages = [`Hello ${nameString}, it's good to see you!`,`sup ${nameString}`,`hi there ${nameString}, you look awesome today!`,`hi there ${nameString}, you spectacular human being you!`,`you look awesome today ${nameString}!`,`hellllooooooo ${nameString}!`,`Hey ${nameString}, how's life?`,`Can you keep a secret, ${nameString}? You're my favorite!`,`Nothing to see here, ${nameString}.`,`Congratulations, ${nameString}! You've discovered the console ;)`,`have i told you lately that i love you, ${nameString}?`,`i knew you'd find this Easter egg eventually, ${nameString}...`,]var randomMessage = messages[Math.floor(Math.random() * messages.length)];return randomMessage
}

Coding is fun.

編碼很有趣。

Thanks for reading, word nerds!

感謝您的閱讀，書呆子！

翻譯自: https://www.freecodecamp.org/news/how-to-surprise-your-apps-users-by-hiding-easter-eggs-in-the-console-3b6e9285e7e7/

電臺復活節