부활절이 다가오면서 우리 모두는 이 어려운 시기에 행복을 가져오기 위해 노력하고 있습니다. 웹사이트나 클라이언트 웹사이트에 이스터 에그 🐇🥚를 추가하지 않으시겠습니까?

TLDR; - 빠르고 쉽습니다. ASCII 아트를 생성하고 사용하기만 하면 됩니다console.log.

DEV 이스터 에그

dev.to에 이 부활절 달걀이 있다는 것을 알고 계셨습니까?

dev.to 웹사이트를 방문할 때 즐겨 사용하는 브라우저(F12)의 개발 도구를 연 적이 있다면 콘솔 로그에 표시된 ASCII 아트를 보았을 것입니다.

-oooooooo/-      .+ooooooooo:  +ooo+        oooo/
+MMMMMMMMMMm+   -NMMMMMMMMMMs  +MMMM:      /MMMM/
+MMMNyyydMMMMy  /MMMMyyyyyyy/   mMMMd      mMMMd
+MMMm    :MMMM. /MMMN           /MMMM/    /MMMM:
+MMMm    .MMMM- /MMMN            dMMMm    mMMMh
+MMMm    .MMMM- /MMMMyyyy+       :MMMM/  +MMMM-
+MMMm    .MMMM- /MMMMMMMMy        hMMMm  NMMMy
+MMMm    .MMMM- /MMMMoooo:        -MMMM+oMMMM-
+MMMm    .MMMM- /MMMN              yMMMmNMMMy
+MMMm    +MMMM. /MMMN              .MMMMMMMM.
+MMMMdddNMMMMo  /MMMMddddddd+       sMMMMMMs
+MMMMMMMMMNh:   .mMMMMMMMMMMs        yMMMMs
.///////:-        -/////////-         .::.

dev.to를 방문할 때 열린 dev 도구가 있는 콘솔 로그의 출력.



그리고 그것이 멋져 보인다고 생각했습니다.

내 사이트에 어떻게 추가합니까?

먼저 텍스트를 ASCII 아트로 변환하는 방법이 필요합니다. 저는 명령줄에서 실행할 수 있는 다음 npm 패키지figlet-cli를 사용했습니다.

Note: Other packages or applications are available.

https://www.npmjs.com/package/figlet-cli

npx figlet-cli "Raven Code"

Note: Used npx to install as we don't need as a global package.

그러면 기본 글꼴을 사용하여 다음 출력이 생성됩니다.

  ____                          ____          _      
 |  _ \ __ ___   _____ _ __    / ___|___   __| | ___
 | |_) / _` \ \ / / _ \ '_ \  | |   / _ \ / _` |/ _ \
 |  _ < (_| |\ V /  __/ | | | | |__| (_) | (_| |  __/
 |_| \_\__,_| \_/ \___|_| |_|  \____\___/ \__,_|\___|

이제 이것을 콘솔에 출력하려면 \(백슬래시)를 사용하여 특수 문자를 이스케이프하고 \n\로 각 줄을 종료해야 합니다(새 줄\n 및 문자열이 여러 줄에 걸쳐 있음을 나타내는 백래시).

console.log(
      "     ____                          ____          _\n\
    |  _ \\ __ ___   _____ _ __    / ___|___   __| | ___\n\
    | |_) / _` \\ \\ / / _ \\ '_ \\  | |   / _ \\ / _` |/ _ \\\n\
    |  _ < (_| |\\ V /  __/ | | | | |__| (_) | (_| |  __/\n\
    |_| \\_\\__,_| \\_/ \\___|_| |_|  \\____\\___/ \\__,_|\\___|"
    )

Note: Could use `Template Literals` in ES6 as this supports multiline strings and you wouldn't need the \n\ syntax.

글꼴 변경

figlet-cli 패키지는 -f 플래그 중 하나인 다른 명령줄 매개변수를 지원합니다. 이 옵션을 지정하면 ASCII 아트를 생성하는 데 사용되는 글꼴이 결정됩니다.

지원되는 글꼴 목록을 보려면 다음 명령을 사용하십시오.

npx figlet-cli -l

ANSI Shadow 라는 글꼴을 사용하려면 다음 명령을 사용하십시오.

npx figlet-cli -f "ANSI Shadow" "Raven Code"

그러면 ANSI Shadow 글꼴을 사용하여 다음 출력이 생성됩니다.

██████╗  █████╗ ██╗   ██╗███████╗███╗   ██╗     ██████╗ ██████╗ ██████╗ ███████╗
██╔══██╗██╔══██╗██║   ██║██╔════╝████╗  ██║    ██╔════╝██╔═══██╗██╔══██╗██╔════╝
██████╔╝███████║██║   ██║█████╗  ██╔██╗ ██║    ██║     ██║   ██║██║  ██║█████╗
██╔══██╗██╔══██║╚██╗ ██╔╝██╔══╝  ██║╚██╗██║    ██║     ██║   ██║██║  ██║██╔══╝
██║  ██║██║  ██║ ╚████╔╝ ███████╗██║ ╚████║    ╚██████╗╚██████╔╝██████╔╝███████╗

창의력을 발휘하기 위해 무엇을 기다리고 있습니까!

추가 크리에이티브

추가로 이동하여 이미지를 ASCII 아트로 변환하려면 ascii-art npm 패키지를 살펴보십시오.

https://www.npmjs.com/package/ascii-art

다시 다음 명령을 사용하여 npx를 통해 설치할 수 있습니다.

npx ascii-art image path/to/image.png

Note: This package also supports generating text to ASCII art. However, the font support seem to be limited.

이것을 사용하여 로고에 대한 ASCII 아트를 생성하고 이것을 console.log에 출력할 수 있습니다.

부활절 달걀 찾기 🐇🥚🔍

가상 이스터 에그 헌트를 하고 이스터 에그가 있는 웹사이트를 찾아 아래 댓글에 최고를 나열해 보겠습니다. 그러니 사냥하세요!

자원

https://www.npmjs.com/package/figlet-cli
https://github.com/khrome/ascii-art