Get Funky on the Console – Level Up humour😅

This content originally appeared on DEV Community and was authored by Rajesh Royal

console.logs can be really fancy and funny both.

Sometimes its nice to see some good stuff in you console 😃. And when Other developers also do the same things its fun 😅.

You can make console.logs really intresting or stylish with css as it supports the Format Specifiers.

sample

Add this code to your js or ReactJS project, Or what you can do is just copy and past in the current console and see some good stuff. 🤪
commonfunctions.ts

export const doSomethingNesty = () => {
  // this will print some funky messages to the console and a "sad life" programmer gif.
  (function async(url) {
    window.addEventListener("DOMContentLoaded", (event) => {
      // Create a new `Image` instance
      var image = new Image();

      image.onload = function () {
        // Inside here we already have the dimensions of the loaded image
        var style = [
          // Hacky way of forcing image's viewport using `font-size` and `line-height`
          "font-size: 1px;",
          // @ts-ignore
          "line-height: " + this.height + "px;",

          // Hacky way of forcing a middle/center anchor point for the image
          // @ts-ignore
          "padding: " + this.height * 0.05 + "px " + this.width * 0.5 + "px;",

          // Set image dimensions
          // @ts-ignore
          "background-size: " + this.width + "px " + this.height + "px;",

          // Set image URL
          "background: url(" + url + ");"
        ].join(" ");
        console.clear();
        // #1 welcome to my site
        let msg = "%c Hi 👋! Welcome to my site! 😇😇. Its really nice to see you here! 😁";
        let welcomeToSiteStyle = `
          font-size: 20px;
          font-family: monospace;
          background: white;
          display: inline-block;
          color: black;
          padding: 8px 19px;
          border: 1px dashed;
          margin-top: 40px;
          margin-bottom: 40px
        `;
        console.log(msg, welcomeToSiteStyle);

        console.log("%cOh! nooooo ", "color: red; font-family: sans-serif; font-size: 4.5em; font-weight: bolder; text-shadow: #000 1px 1px;");

        // #2 show the image
        // notice the space after %c
        console.log("%c ", style);

        // #3 error message
        const errorStyle = `
          color:white;
          background: linear-gradient(312deg, rgba(255,0,0,1) 0%, rgba(241,255,0,1) 15%, rgba(0,255,12,1) 30%, rgba(0,254,255,1) 43%, rgba(0,1,255,1) 59%, rgba(250,0,253,1) 88%, rgba(255,0,0,1) 100%);
          border: 1px solid white;
          padding: 5px;
          font-family: "Comic Sans MS";
          font-size: 23px;
          margin-top: 20px;
          margin-bottom: 20px;
      `;

        console.error("%c🌈💖 An error has occurred and everything is ruined forever. 💖🌈", `${errorStyle}`);
      };

      // Actually loads the image
      image.src = url;
    });
  })("https://media3.giphy.com/media/l378ANQFpBCwTNtni/giphy.gif?cid=6c09b952ecd995e546169f821e5f1309d9ec096daba0ea4f&rid=giphy.gif");
};

You can call this function in your main files like this.
App.js

  useEffect(() => {

    if (process.env.REACT_APP_ENV === "DEVELOPMENT" &&
      process.env.REACT_APP_ENV !== "STAGING" &&
      process.env.REACT_APP_ENV !== "PRODUCTION") {
      doSomethingNesty();
    }

  }, []);

BTW: It may irritate some to see each and every time same thing, you may add some cookies to set the visibility time of these outputs.

Output:

For more details:
style console logs
console logs like a pro from @wangonya

If you like this post please like ♥ it 😄. See you in the next post.

I know the title is a little fancy itself 😅

This content originally appeared on DEV Community and was authored by Rajesh Royal

Print Share Comment Cite Upload Translate Updates

APA

Rajesh Royal | Sciencx (2022-02-15T16:05:15+00:00) Get Funky on the Console – Level Up humour😅. Retrieved from https://www.scien.cx/2022/02/15/get-funky-on-the-console-level-up-humour%f0%9f%98%85/

MLA

" » Get Funky on the Console – Level Up humour😅." Rajesh Royal | Sciencx - Tuesday February 15, 2022, https://www.scien.cx/2022/02/15/get-funky-on-the-console-level-up-humour%f0%9f%98%85/

HARVARD

Rajesh Royal | Sciencx Tuesday February 15, 2022 » Get Funky on the Console – Level Up humour😅., viewed ,<https://www.scien.cx/2022/02/15/get-funky-on-the-console-level-up-humour%f0%9f%98%85/>

VANCOUVER

Rajesh Royal | Sciencx - » Get Funky on the Console – Level Up humour😅. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/02/15/get-funky-on-the-console-level-up-humour%f0%9f%98%85/

CHICAGO

" » Get Funky on the Console – Level Up humour😅." Rajesh Royal | Sciencx - Accessed . https://www.scien.cx/2022/02/15/get-funky-on-the-console-level-up-humour%f0%9f%98%85/

IEEE

" » Get Funky on the Console – Level Up humour😅." Rajesh Royal | Sciencx [Online]. Available: https://www.scien.cx/2022/02/15/get-funky-on-the-console-level-up-humour%f0%9f%98%85/. [Accessed: ]

rf:citation

» Get Funky on the Console – Level Up humour😅 | Rajesh Royal | Sciencx | https://www.scien.cx/2022/02/15/get-funky-on-the-console-level-up-humour%f0%9f%98%85/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

sample

Output:

Related Posts