Get Funky on the Console - Level Up humour😅
Tags: javascript, programming, fun, react
Published: 2022-02-15 16:05:15

 > `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`
```javascript
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`
```javascript
  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:
![Get Funky on the Console - Level Up humour](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjvrr0hzs2iqe38idhm5.png)

For more details:
[style console logs](https://dev.to/arikaturika/how-to-style-console-logs-in-chrome-dev-tools-33np)
[console logs like a pro](https://dev.to/wangonya/better-consolelogs-448c) 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 😅`