Author: Pandiyan Murugan

Year in review #2019

Pandiyan MuruganLeave a comment

Its time to look back and see stats of #EfficientUser website.

👀 50000+ Views

Views is the one of the key factor in the blogging world to show how much our content being helped others or reached the audience. We have received 50,000 + views in this year.

🎅 41000+ Visitors

Visitors are the individual person or session who visited our blog. We have grabbed attention 41,000 + visitors this year.

🔠 5033 Total words

For me, the number of words doesn’t decide the quality of particular post. However, I typed 5033 words to make 16 posts in this year (excluding this post).

👆 1824 No. of clicks

Conversion is the important business model in the marketing. Even though we doesn’t have any product in our blog, user clicked 1824 times to visit other post or linked articles which brings more interaction to website.

🚴‍♀️ 563 Followers

Followers are the early adopters in any blogs or product. Thankfully, we have ~563 people to support our blog (including social media, email followers, and so on.)

🔣 315 Avg. words / post

On average, we have 315 words in blog post which published in the year 2019.

🏁 180 Countries

We have got traffic from around ~180 countries. This is huge for an individual blogger I guess. Wow!

👍 33 Likes

Likes are the virtual handshake given by audience to the author. We have got 33 likes in 2019.

📬 16 Total Posts

We made 16 concrete blog post in this 2019.

Quoting: Quantity doesn’t matter Quality does

💬 13 Comments

Comments are the real boost for the content creator. we got 13 comments in this year 2019.

An the Emerging post in 2019 – Technical Debt

😎 1 author

We got 1 author behind all this posts in 2019, that’s me, thanks!

To get latest updates you can follow or subscribe! #peace

Credits:

Photo by Joshua Chun on Unsplash

Baffle effect

Pandiyan MuruganLeave a comment

Welcome to another CSS post. In this post, we will discuss on how we can add baffle effect to a text in HTML document using library.

Baffle.js is a tiny JavaScript library for obfuscating and revealing text in DOM elements.

Installation

Add the library from CDN in the top of HTML document.

<script src="<https://cdn.jsdelivr.net/npm/baffle@0.3.6/dist/baffle.min.js>"></script>

Add text

Lets create a paragraph element to show some text which we are going to use to add effect later.

<p class="effect">
    Hello, world..
</p>

Some CSS magic

Here is some CSS magic to add in our document to have some decent look. Basically just aligning the content to center.

body {
    width: 90%;
    height: 90vh;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
}

.effect {
    font-family: 'tahoma';
    font-weight: 800;
    font-size: 58px;
}

Baffle configuration

Lets, add the baffle js configuration to apply the effect at the end of document with the help of script tag.

<script>
    // With a CSS selector
    const b = baffle('.effect');
    b.set({
        character: '>▓▒ /█▒</ >▒░>▒ █<░ ░█▒░> ▓░/▒ ▒>░ █<▒▓ ▓▒>░',
        speed: 120
    });

    // Start obfuscating
    b.start();
    
    // Reveal text
    b.reveal(5000);
    
    // Stop obfuscating
    b.stop();

</script>

Here, we have passed the CSS selector which targets the text that needs to obfuscated.

With baffle instantiated, you can start your instance with the start() method, stop it with stop(), or reveal it with reveal().

That’s it, we are done. We can see the changes in the browser.

Happy Coding!

Full Demo:

To get latest updates you can follow or subscribe! #peace