console.logscan 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 😅
Top comments (0)