DEV Community: Kiril Delovski

Creating a Custom Console Logger in JavaScript

Kiril Delovski — Tue, 16 Apr 2024 13:24:53 +0000

In the following tutorial, you will learn how to make a "custom console logging in a html page" instead of accessing the browser native developer tools "console section".

Let's Start 👀

1) First we Start with the HTML file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <script>
        // add your console.log() here
        setTimeout(()=> {
            console.log('...this is console.log');
        }, 100);
        // add your console.info() here
        setTimeout(()=> {
            console.info('...this is console.info');
        }, 110);
        // add your console.warn() here
        setTimeout(()=> {
            console.warn('...this is console.warn');
        }, 120);
        // add your console.debug() here
        setTimeout(()=> {
            console.debug('...this is console.debug');
        }, 130);
        // add your console.error() here
        setTimeout(()=> {
            console.error('...this is console.error');
        }, 140);
    </script>
    <script src="console-script.js"></script>
</body>
</html>

The scripts block is your place where u want to write your js and your js logic with the needed console keyword.
The following script tag is for importing our custom js for overriding the default console methods and to display their output in the custom console container as well as the browser's console.

2) Secondly we Start with the JS file

(function() {
    // Dynamically import CSS file
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'console-style.css';
    document.head.appendChild(link);

    // Create toggle button
    const toggleConsoleBtn = document.createElement('div');
    toggleConsoleBtn.id = 'toggleConsoleBtn';
    toggleConsoleBtn.className = 'toggle-console-btn';
    toggleConsoleBtn.textContent = 'Show Console';
    document.body.appendChild(toggleConsoleBtn);

    // Create console container
    const consoleContainer = document.createElement('div');
    consoleContainer.id = 'consoleContainer';
    consoleContainer.className = 'console-container';
    document.body.appendChild(consoleContainer);

    let consoleVisible = false;

    // Toggle console visibility
    toggleConsoleBtn.addEventListener('click', function() {
        consoleVisible = !consoleVisible;
        if (consoleVisible) {
            consoleContainer.classList.add('show');
            toggleConsoleBtn.textContent = 'Hide Console';
            toggleConsoleBtn.style.bottom = 'calc(200px + 20px)'; // Adjust based on console window height
        } else {
            consoleContainer.classList.remove('show');
            toggleConsoleBtn.textContent = 'Show Console';
            toggleConsoleBtn.style.bottom = '10px'; // Set back to bottom of the screen
        }
    });

    // Save reference to original console methods
    const originalConsoleLog = console.log;
    const originalConsoleInfo = console.info;
    const originalConsoleDebug = console.debug;
    const originalConsoleWarn = console.warn;
    const originalConsoleError = console.error;

    // Override console.log method
    console.log = function() {
        // Call original console.log with the arguments
        originalConsoleLog.apply(console, arguments);

        // Output message to UI with color (limegreen)
        appendToConsole(arguments, 'log', 'limegreen');
    };

    // Override console.info method
    console.info = function() {
        // Call original console.info with the arguments
        originalConsoleInfo.apply(console, arguments);

        // Output message to UI with color (cornflowerblue)
        appendToConsole(arguments, 'info', 'cornflowerblue');
    };

    // Override console.debug method
    console.debug = function() {
        // Call original console.debug with the arguments
        originalConsoleDebug.apply(console, arguments);

        // Output message to UI with color (darkgray)
        appendToConsole(arguments, 'debug', 'darkgray');
    };

    // Override console.warn method
    console.warn = function() {
        // Call original console.warn with the arguments
        originalConsoleWarn.apply(console, arguments);

        // Output message to UI with color (orange)
        appendToConsole(arguments, 'warn', 'orange');
    };

    // Override console.error method
    console.error = function() {
        // Call original console.error with the arguments
        originalConsoleError.apply(console, arguments);

        // Output message to UI with color (orangered)
        appendToConsole(arguments, 'error', 'orangered');
    };

    // Function to append message to UI
    function appendToConsole(args, messageType, color) {
        const message = Array.prototype.slice.call(args).join(' '); // Convert arguments to a string
        const messageElement = document.createElement('p');
        messageElement.textContent = message;
        if (color) {
            messageElement.style.color = color;
        }
        if (messageType) {
            messageElement.classList.add(messageType);
        }
        const consoleContainer = document.getElementById('consoleContainer');
        consoleContainer.appendChild(messageElement);
        // Scroll to bottom (assuming console-output is the ID of your console container)
        consoleContainer.scrollTop = consoleContainer.scrollHeight;
    }

})();

3) Thirdly we Start with the CSS file

body {
    margin: 0;
    padding: 0;
    position: relative;
    min-height: 100vh; /* Ensure the body takes up the entire viewport height */
}

.console-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px; /* Set desired height */
    background-color: rgba(0,0,0,0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: white;
    overflow-y: auto; /* Enable scrolling if content exceeds height */
    padding: 10px;
    box-sizing: border-box;
    font-family: monospace;
    display: none; /* Initially hidden */
    z-index: 1; /* Ensure the console window is behind the button */
    border-top: 5px solid silver;
}

.console-container.show {
    display: block; /* Show when toggled */
}

.console-container p {
    margin: 0;
    white-space: pre-wrap;
}

.console-container .warn {
    color: yellow;
}

.console-container .error {
    color: red;
}

.toggle-console-btn {
    position: fixed;
    bottom: 10px; /* Initially set to bottom of the screen */
    left: 10px;
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    z-index: 2; /* Ensure the button is on top of the console window */
}

Final notes:

Feel free to use it or contribute to the project to improve it or make additional functionalities.

To see the working example or visit the github repo .

For any questions or information about me you can reach out by scanning or clicking on the following qr code:

Running a postman collection with newman alongside plugins (newman-reporter-htmlextra | pdf-export | pdf-parse)

Kiril Delovski — Tue, 14 Jun 2022 09:52:44 +0000

This guide is for running a collection of api tests, generating html report of results and generating pdf file from the API body response (the pdfData) from base64 encoded string.

What is covered with this tutorial:
1) Running postman collection with newman.
2) Custom environment location with newman.
3) Reporter-htmlextra with custom template location to export the test result report.
4) PDF Export - get the response object search for binary encoded pdf string, generate decoded pdf file and place it with the report.html file in a newly created folder by current date.
5) PDF Parse - the generated pdf file - access it and search for specific metadata or custom text content or string from that pdf.

We may start now: 👀
Let's assume you already have a postman collection of requests and the next step is to export that collection.json file in the specific directory where the following steps are needed.

Requirements:
1) Postman application installed (for exporting the collection)
2) NodeJs installed (https://nodejs.org/en/download/)

Setup:
1) Setup a local path on your pc and inside project directory open terminal/cmd and do command npm init

this will generate the package.json file.

2) Install newman npm i newman --save-dev
3) Install newman-reporter-htmlextra npm i newman-reporter-htmlextra --save-dev
4) Install pdf-parse npm i pdf-parse --save-dev
5) Install date formatter npm i dateformat@1.0.2-1.2.3 --save-dev
6) Create index.js file in the root project and let's start filling it with code.



const dateFormat = require('./node_modules/dateformat/lib/dateformat.js');
const fs = require('fs');
const now = new Date();
const currentData = dateFormat(now, "dd.mm.yyyy HH.MM");
const newman = require('newman');
// add the path to your exported postman collection
const collection = require('./Newman.postman_collection.json');
const reportName = 'report.html';

newman.run({
    collection,
    // if you use environments from different json file excluded from the postman collection, otherwise comment it
    environment: `./environment/dev.json`,
    reporters: ['cli', 'htmlextra'],
    iterationCount: 1,
    reporter: {
        htmlextra: {
            // commented lines are the all possibilities available to be set for the report document
            export: `./${currentData}/${reportName}`,
            /*
            this is the original location of the template but can be copied modified, moved and linked to it
            if you don't specify template path will use the default one ./node_modules/newman-reporter-htmlextra/lib/dashboard-template.hbs
            */
            template: './node_modules/newman-reporter-htmlextra/lib/dashboard-template.hbs',
            // logs: true,
            // showOnlyFails: true,
            // noSyntaxHighlighting: true,
            // testPaging: true,
            browserTitle: "Newman report",
            title: 'Report - ' + currentData,
            titleSize: 5,
            // omitHeaders: true,
            // skipHeaders: "Authorization",
            // omitRequestBodies: true,
            // omitResponseBodies: true,
            // hideRequestBody: ["Login"],
            // hideResponseBody: ["Auth Request"],
            showEnvironmentData: true,
            // skipEnvironmentVars: ["API_KEY"],
            // showGlobalData: true,
            // skipGlobalVars: ["API_TOKEN"],
            // skipSensitiveData: true,
            // showMarkdownLinks: true,
            showFolderDescription: true,
            // timezone: "Australia/Sydney",
            // skipFolders: "folder name with space,folderWithoutSpace",
            // skipRequests: "request name with space,requestNameWithoutSpace",
            // displayProgressBar: true
        }
    }
}).on('request', (error, data) => {
    const requestName = data.item.name;
    const fileName = `${requestName}.pdf`;
    let content = data.response.stream.toString();

    /* You need to modify this in order to get the specific
 data of encoded string from your API response */
    let pdfEncodedString = JSON.parse(content).pdfData;

    if (error) {
        console.log(error);
        return;
    }

    if (JSON.parse(content).message === 'Forbidden') {
        console.log('There has been error. Get renewed access token!');
        return;
    }

    if (pdfEncodedString !== undefined) {

        if (!fs.existsSync(currentData)) fs.mkdirSync(currentData, { recursive: true });

        fs.writeFile(currentData + '/' + fileName, pdfEncodedString, 'base64', function (error) {
            if (error) {
                console.error(error);
            } else {
                const pdf = require('pdf-parse');
                let dataBuffer = fs.readFileSync(currentData + '/' + fileName);
                pdf(dataBuffer).then(function (data) {
                    /*  number of pages    
                    console.log(data.numpages);     
                    //number of rendered pages    
                    console.log(data.numrender);     
                    //PDF info    
                    console.log(data.info);     
                    //PDF metadata    
                    console.log(data.metadata);      
                    //PDF.js version     
                    check https://mozilla.github.io/pdf.js/getting_started/    
                    console.log(data.version);     PDF text    console.log(data.text);
                    */
                    console.log('Content: ', data.text);
                    console.log('Specific word: ', data.text.includes('some_text_you_want_to_find'));  // you can use any js logic here or regex
                    console.log('number of pages:', data.numpages);
                    console.log('number of rendered pages:', data.numrender);
                    console.log(data.info);
                });
            }
        });
    } else {
        console.log('Pdf encoded string not found in the body response')
    }
});

7) Running the script with the command node . inside the terminal window of the project root

After command finishes the tests will be generated in a new folder by current date and time inside the root of project:
- If some test fails then will be no visible pdf file in the folder.

For any questions or information about me you can reach out by scanning or clicking on the following qr code:

How to Capture an HTML Element

Kiril Delovski — Mon, 28 Sep 2020 13:39:45 +0000

Liquid syntax error: Unknown tag 'endraw'

How to Pass a JavaScript Interview

Kiril Delovski — Fri, 18 Sep 2020 16:51:44 +0000

Have you ever had the struggle of being overwhelmed from the plenty amount of resources reachable online and besides that being confused from where to begin when preparing yourself for a javascript interview, well good news, this post changes all of that, and that's why you should continue reading...

LET'S START 👀

I am a frontend developer with more than 10 years of experience. During my professional experience, I have had been to more than 50 frontend interviews so far. By having these interviews the interviewers their main focus had on questions related to javascript.

After each interview, I have been noting down these questions with provided answers and kept them for myself until this moment.
This document (knowledge library) which I have of javascript questions and answers helped me a lot for my further interviews as preparation material.

This knowledge and written material gave me an idea, why don't I help the developer community providing this material too.

Considering this, that was the main reason why I have created this booklet "JAVASCRIPT INTERVIEW CHEAT SHEET MANUAL" which is a .pdf document and you can get it by downloading it from here.

By having this material it will shorten your time for search and learn, considering that it's containing the specific asked criteria at the javascript technical interviews.

You might have noticed that this is a First Edition of this booklet, meaning that based on your feedback (which you will provide) from getting this material and filling out the survey located on the last page of this manual or by joining the discord channel, I will be able to make a summary and get an additional input which will be a perfect reason and motivation for preparing and publishing the Second Edition as an extended version of this booklet.

FINAL NOTE

This manual will be sufficient to help you learn and prepare yourself for an upcoming frontend / javascript interview you might encounter.

For any questions or information about me you can reach out by scanning or clicking on the following qr code:

You can request a discount version of this "booklet" by completing this survey 🙂

☛ https://forms.gle/8va29R7TmedWhMteA

feel free to join the discussion on Discord Community
you can also follow the Facebook Page

Bonus: get this fancy website template for free from here

Test your javascript knowledge with this quick quiz

The post was published first on Delovski.net Blog