DEV Community

Cover image for Get Funky on the Console - Level Up humour😅
Rajesh Royal
Rajesh Royal

Posted on

 

Get Funky on the Console - Level Up humour😅

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");
};
Enter fullscreen mode Exit fullscreen mode

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();
    }

  }, []);
Enter fullscreen mode Exit fullscreen mode

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

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 😅

Top comments (0)

The JavaScript Brief

1. Top 5 MERN STACK projects to improve your practical understanding

Boost your MERN Stack development skills by undertaking interesting beginner projects. These five engaging projects cover web applications and range from social media website applications to geo-social networking maps. Hone your understanding and apply modern techniques backed up by hands-on experience.

2. How To Optimize Your React App’s Performance

Learn the best optimizing techniques to make your React applications faster and more efficient. Focusing on the identification of performance bottlenecks and common pitfalls to avoid, these optimization strategies will keep your applications running smoothly even when faced with growing complexity.

3. A story of let, const, object mutation, and a bug in my code

In the pursuit of bug-free code, explore an incident involving a mix-up between const and let, making sure your custom code works effectively with third

party documentation. Discover best practices on program flow and learn about JavaScript's unpredictable aspects to ensure your core code is robust.