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