Sign your work
As a follow-up on yesterday's gakker, I wanted to write an article which includes the JavaScript I use to write a small signature in the console for the websites I am making. One thing I usually always do, is to include a class called corfitz-me
assigned to the footer section in websites which refers to a comment in the main stylesheet.
That has been my usual way of leaving a signature, but recently I started reading up a lot on JavaScript and using the custom styling options in the console, I made a little logging script which sole purpose is to write “Made by Corfitz.” in the console.
![](https://admin.corfitz.me/storage/uploads/2019/06/08/5cfbaa48a6d66Screenshot-2019-06-08-13.19.57.png)
The script is executed on the client, and doesn’t impact performance nor conflicts with other scripts on the website. And besides – it is easy for any non-programmer to easily remove should they for some reason feel annoyed by it.
So – without further ado – here is the simple little console logging script.
/**
* Harmless Signature by @CorfitzMe
* Find me: https://www.corfitz.me
*/
(function(u) {
// Create a new `Image` instance
const i = new Image();
i.onload = function() {
// Inside here we already have the dimensions of the loaded image
const style = [
// Hacky way of forcing image's viewport using `font-size`
'font-size: 1px;',
// Hacky way of forcing a middle/center anchor point for the image
`padding: ${this.height * 0.5}px ${this.width * 0.5}px;`,
// Set image dimensions
`background-size: ${this.width}px ${this.height}px;`,
// Set image URL
`background: url(${u});`,
].join(' ');
// notice the spaces after %c
console.log(
'%c %c Made by Corfitz%c.',
style,
'font-weight: bold; font-size: 13px;line-height:40px;',
'color: #00ff00; font-size: 16px;'
);
};
// Actually loads the image
i.src = u;
})(
'https://admin.corfitz.me/storage/uploads/2019/06/06/5cf96fb5e6234console-signature.png'
);