DEV Community: Bruno Vieira

lwder.js - Lightweight Loading Animation

Bruno Vieira — Sat, 12 Feb 2022 10:35:56 +0000

Hi,

This time I created the simplest of all the simple projects.

Why did I do this? because even though it's a simple "task" and can be done with a few lines of CSS (but much more limited), I actually use it a lot in my projects.

I thought of making a simple library that would allow me to use it much faster and whenever I wanted in the project with just a few lines.

Have a look:
https://github.com/BMSVieira/lwder.js

LetMeScroll.js - Scroll made easy!

Bruno Vieira — Wed, 02 Feb 2022 00:50:03 +0000

Hey guys,

I have been working on a "new project"...
It's a dependency-free javascript library to make Scroll easier to use and customize.

The challenge was, create a customizable and easy to use scrollbar while maintaining native behavior and add new features like.. callbacks, styling, etc..

Im still working on it, it needs a lot of improvements.. but you can check it on my github page.

Give it a try and tell me what you think :P

GitHub: https://github.com/BMSVieira/letmescroll.js

moovie.js - Movie focused HTML5 Player

Bruno Vieira — Thu, 11 Mar 2021 01:00:18 +0000

Hey,

In my professional work, a few years ago, I worked on a project where the objective was to make reviews of films and trailers, working through API's that brought everything together.

The problem is that the subtitles were not always synchronized with the audio and it was very difficult (if not impossible) to find a player that could adjust in real time (at least without wierd plugins and hacks).

A few days ago I started working on a project called "moovie.js", which is basically a standard HTML5 video, that allows you to adjust the offset manually in real time and has full support for .vtt and .srt caption files.

The goal is to keep all the standard features of a native player but with a little bit of magic :P

Im still working on it, but you can see the progress here:

Github: moovie.js

I hope it is useful for someone, feel free to use it! : D

Page Loading Animation with EasyGrid

Bruno Vieira — Mon, 07 Dec 2020 19:20:36 +0000

Hey guys!

There are many things you can do with EasyGrid besides the obvious, but using your imagination combined with how easy to use and versatile EG is, you can take it to another level.

I made a page loading animation with just a few lines of code.

Check my last post to see other examples. If you are interested in EG, check GitHub page.

Feel free to try it!
Thank you!

EasyGrid - Examples of what you can do

Bruno Vieira — Sat, 05 Dec 2020 21:14:45 +0000

Following my latest post (this one).

Im going to show some examples of what you can do with EasyGrid, specially for less experienced developers/designers.

What is EasyGrid?

EasyGrid is a dependency-free Javascript Library.

It creates, organize and distribute items dynamically by columns automatically generated according the width of the monitor (or container).

It is not meant to replace any CSS Framework, in fact, works even better when both are combined.

Let's get started!

After you setup all Styles and JS sources, you need to create the HTML element where will be intialized.

<div id="grid" class="easygrid_bvgrid" style="width:100%;"> </div>

...then its ready to be initialized:

var demo1 = new EasyGrid({
  selector: "#grid",
  width: "150",
  height: "random",
  margin: "5",
  config: {
    fetchFromHTML: true
  },
  animations: {
    fadeInSpeed: "1000" // Ms
  },
  colors: {
    background: "random"
  }
});

Now comes the part that is the reason of this post.
It has a lot of possibilities, whether you want to add an item, several items at once or maybe bring information from a JSON file too.

What you can do with it?

To add a new item to EasyGrid:

// Single
var Element = "HTML Element";

demo1.AddItem({
   items: Element
});

The example above, will add an Individual Item to your grid.
Next example will show you how to Add Multiple Items at once.

// Array
var Elements = ["HTML Element 1", "HTML  Element 2", "HTML  Element 3", "HTML  Element 4"];

demo1.AddItem({
   items: Elements
});

Callback functions
You can have a "onComplete" callback function that allow you to take some action after a new item is successfully added.

// Append Items
demo1.AddItem({
  items: "HTML Elements",
  onComplete: function(){

    // Your Code Here will be executed when completed

  } 
});

Fetch from HTML
Im some cases when you are dealing with a Server-Side Language like PHP for example, you first fetch all items from DataBase and the JS is usually executed at the bottom of the page, how can you add those items to EasyGrid? It's pretty easy actually.

You must have fetchFromHTML set "true" when you initialize EasyGrid.

All elements must be placed inside main div with a specific class called: easygrid_fetch, they will be moved to EasyGrid.

  <!--  Main Div -->
  <div id="grid" class="easygrid_bvgrid">

        <!-- This item will be fetched to EasyGrid and then removed -->
        <div class="easygrid_fetch" style="display:none;">
            <!-- HTML Elements -->
        </div>

  </div>

Grid Wall for Background and Design

In this case, is more for Design/Style purposes, you can easily use EG to generate a grid wall with random width and height.

// Append Items
interval = setInterval(function(){ 

     demo1.AddItem({
        items: "" // Nothing to show
      });

 }, 100); 

// Clear Timeout  
settimeout = setTimeout(function(){ clearInterval(interval); }, 3000);

The example above, will generate items each 100ms for a total of 3s, of course this can be changed to fit your needs.

There are a lot more things to do with EasyGrid and many more will be implemented.

Thank you for reading this.
Have a nice day.

EasyGrid - Responsive Grid

Bruno Vieira — Fri, 04 Dec 2020 22:38:04 +0000

Hey,

Did any of you feel the difficulty in making a grid of items?

Sometimes it is a little difficult to get it right, depending on the template and the space you have to use it.

I made a Javascript Plugin that makes it really easy and straightforward, It's called: EasyGrid.

Basically, it creates items dynamically, organize them and distribute them by columns automatically generated according to the width of the monitor (or container).

It doesn't need any kind of CSS or CSS Framework and it was built with pure javascript, no dependencies.

Feel free to try it:
https://github.com/BMSVieira/EasyGrid

Thank you :D

BVAmbient - Vanilla JS Background Particles

Bruno Vieira — Tue, 01 Dec 2020 11:17:18 +0000

Hey guys,

In the past few weeks i have been working on a new project and i want to share with you.

Its basically a lightweight and easy-to-use background particles plugin, built in pure javascript.

My mission in the last months is to not use Jquery as much as i can, so sometimes i need to make my own plugins that i want to use it.

Feel free to try and share new ideas.
BVAmbient: https://github.com/BMSVieira/BVAmbient

Thank you!

Vanilla JS SlideDown/Up

Bruno Vieira — Tue, 02 Jun 2020 10:54:00 +0000

Hey Guys,

For the past years i've been working with JQuery alot, because it allow do things really fast and has full support in most browsers.

Although it is a lightweight library, it may be too much for what we want to achieve.

Couple days ago i published a way of doing FadeIn/Out in pure javascript, this time, im going to show how to make SlideDown/Up.

Let's get started.


    /* SLIDE UP */
    let slideUp = (target, duration=500) => {

        target.style.transitionProperty = 'height, margin, padding';
        target.style.transitionDuration = duration + 'ms';
        target.style.boxSizing = 'border-box';
        target.style.height = target.offsetHeight + 'px';
        target.offsetHeight;
        target.style.overflow = 'hidden';
        target.style.height = 0;
        target.style.paddingTop = 0;
        target.style.paddingBottom = 0;
        target.style.marginTop = 0;
        target.style.marginBottom = 0;
        window.setTimeout( () => {
              target.style.display = 'none';
              target.style.removeProperty('height');
              target.style.removeProperty('padding-top');
              target.style.removeProperty('padding-bottom');
              target.style.removeProperty('margin-top');
              target.style.removeProperty('margin-bottom');
              target.style.removeProperty('overflow');
              target.style.removeProperty('transition-duration');
              target.style.removeProperty('transition-property');
              //alert("!");
        }, duration);
    }

    /* SLIDE DOWN */
    let slideDown = (target, duration=500) => {

        target.style.removeProperty('display');
        let display = window.getComputedStyle(target).display;
        if (display === 'none') display = 'block';
        target.style.display = display;
        let height = target.offsetHeight;
        target.style.overflow = 'hidden';
        target.style.height = 0;
        target.style.paddingTop = 0;
        target.style.paddingBottom = 0;
        target.style.marginTop = 0;
        target.style.marginBottom = 0;
        target.offsetHeight;
        target.style.boxSizing = 'border-box';
        target.style.transitionProperty = "height, margin, padding";
        target.style.transitionDuration = duration + 'ms';
        target.style.height = height + 'px';
        target.style.removeProperty('padding-top');
        target.style.removeProperty('padding-bottom');
        target.style.removeProperty('margin-top');
        target.style.removeProperty('margin-bottom');
        window.setTimeout( () => {
          target.style.removeProperty('height');
          target.style.removeProperty('overflow');
          target.style.removeProperty('transition-duration');
          target.style.removeProperty('transition-property');
        }, duration);
    }

    /* TOOGLE */
    var slideToggle = (target, duration = 500) => {
        if (window.getComputedStyle(target).display === 'none') {
          return slideDown(target, duration);
        } else {
          return slideUp(target, duration);
        }
    }

That's it, now you can use it like this:


// Specify Element and Duration (milliseconds)
slideUp(document.getElementById("target"), 1000);

slideDown(document.getElementById("target"), 1000);

slideToggle(document.getElementById("target"), 1000);

I found this code online a few days ago and it works well, I hope it helps someone.

Take a look at my most recent project: VanillaJS Fully Customizable SelectBoxes

Thank you.

Using Throttle in Javascript

Bruno Vieira — Sat, 30 May 2020 22:59:00 +0000

Hey guys,

This time, im going to talk Throttle.
What is Throttle and what it is used for?

A throttle is a technique used in the browser to improve performance by limiting the number of events your code needs to handle.

Throttle is used when you want to execute a callback at a controlled rate, allowing you to handle intermediate states repeatedly at each fixed interval of time.

For example, using ScrollEventListener

document.addEventListener("scroll", function() { 
    console.log("Hey!");
}, false);

It will be executed dozens of times (maybe more) per second when you scroll, it is a waste of memory, code overflow, and you probably don't even need to run that code so many times to achieve your goal.

So, you can use Throttle with the following code:

// Main throttle function
function throttle (func, interval) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function () {
      timeout = false;
    };
    if (!timeout) {
      func.apply(context, args)
      timeout = true;
      setTimeout(later, interval)
    }
  }
}

// My function that will run repeatedly at each fixed interval of time.
var myHeavyFunction = throttle(function() {

          // Your code here

}, 200); // Adjust interval of time

// Add EventListener
window.addEventListener('scroll', myHeavyFunction);

That's it! now you can control the interval of time wich your funciont will run.

You can use Throttle with the following Events:

Scroll
Mouse Move
Window Resize
Etc...

It also exists Debounce that allows you to “group” multiple raised sequential functions into a single function, but that's for another post.

I hope it helps someone.

Take a look at my most recent project: VanillaJS Fully Customizable SelectBoxes

thank you.

VanillaJS Customizable SelectBoxes

Bruno Vieira — Fri, 29 May 2020 08:22:22 +0000

Hey Guys,

I always had problems when it comes to styling native elements, but mainly SelectBoxes.

So i made a class that replaces native select elements with fully customizable dropdowns & searchbox.

Even though this replaces native select options, you can still use Form Submit, Onchange Events and Attributes as you would with normal usage.

Source: https://github.com/BMSVieira/BVSelect-VanillaJS
Demo : https://bmsvieira.github.io/BVSelect-VanillaJS/

Give it a try!

Polyfill Explained (Simplified Version)

Bruno Vieira — Thu, 28 May 2020 02:07:43 +0000

Hello Guys,
I recently migrated my project from Jquery to VanillaJS.

One of the problems that i had was Browser Compatibility, so i started searching ways to solve that problem and i found people talking about Polyfill.

What is Polyfill?
Think in Polyfill as pieces of code, that converts code you wrote in such way that will be supported in older browsers (Like IE)

For example, Internet Explorer 11 does not support:

Array.From();

So you have to include before, the Polyfilled version of Array.From in order for IE be able to run it:

/**
 * Array.from() polyfill
 */
// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from
// Production steps of ECMA-262, Edition 6, 22.1.2.1
if (!Array.from) {
    Array.from = (function () {
        var toStr = Object.prototype.toString;
        var isCallable = function (fn) {
            return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
        };
        var toInteger = function (value) {
            var number = Number(value);
            if (isNaN(number)) { return 0; }
            if (number === 0 || !isFinite(number)) { return number; }
            return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
        };
        var maxSafeInteger = Math.pow(2, 53) - 1;
        var toLength = function (value) {
            var len = toInteger(value);
            return Math.min(Math.max(len, 0), maxSafeInteger);
        };

        // The length property of the from method is 1.
        return function from(arrayLike/*, mapFn, thisArg */) {
            // 1. Let C be the this value.
            var C = this;

            // 2. Let items be ToObject(arrayLike).
            var items = Object(arrayLike);

            // 3. ReturnIfAbrupt(items).
            if (arrayLike == null) {
                throw new TypeError('Array.from requires an array-like object - not null or undefined');
            }

            // 4. If mapfn is undefined, then let mapping be false.
            var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
            var T;
            if (typeof mapFn !== 'undefined') {
                // 5. else
                // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
                if (!isCallable(mapFn)) {
                    throw new TypeError('Array.from: when provided, the second argument must be a function');
                }

                // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
                if (arguments.length > 2) {
                    T = arguments[2];
                }
            }

            // 10. Let lenValue be Get(items, "length").
            // 11. Let len be ToLength(lenValue).
            var len = toLength(items.length);

            // 13. If IsConstructor(C) is true, then
            // 13. a. Let A be the result of calling the [[Construct]] internal method
            // of C with an argument list containing the single item len.
            // 14. a. Else, Let A be ArrayCreate(len).
            var A = isCallable(C) ? Object(new C(len)) : new Array(len);

            // 16. Let k be 0.
            var k = 0;
            // 17. Repeat, while k < len… (also steps a - h)
            var kValue;
            while (k < len) {
                kValue = items[k];
                if (mapFn) {
                    A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
                } else {
                    A[k] = kValue;
                }
                k += 1;
            }
            // 18. Let putStatus be Put(A, "length", len, true).
            A.length = len;
            // 20. Return A.
            return A;
        };
    }());
}

How do i know what is not being supported in my code?
The best way to do it is check in the Console Log what is currently not being supported by the browser you are in, and use Polyfill Bundle to select the Polyfilled versions of it.

After that, include the source in your project.
There are other ways, but this is the easiest to get started.

I hope this helps someone, it is just an introduction to Polyfill, there are many things involved but i don't want you to lose focus.

Thank you!

Vanilla JS FadeIn/Out

Bruno Vieira — Tue, 26 May 2020 09:08:52 +0000

It looks like JQuery is slowly starting to be "a thing of the past".. so i recently migrated my project from JQuery to Vanilla.. and the result is quite satisfying.

First, you can be sure that if you made it with JQuery, you will make it with Vanilla aswell, but keep in mind that may required a few more lines of code.

One of the things that i used to use alot with JQuery was FadeIn/FadeOut... now the question was: how to do it in Vanilla?

Well... quite easy actually.
Hope it helps someone.

        // ** FADE OUT FUNCTION **
        function fadeOut(el) {
            el.style.opacity = 1;
            (function fade() {
                if ((el.style.opacity -= .1) < 0) {
                    el.style.display = "none";
                } else {
                    requestAnimationFrame(fade);
                }
            })();
        };

        // ** FADE IN FUNCTION **
        function fadeIn(el, display) {
            el.style.opacity = 0;
            el.style.display = display || "block";
            (function fade() {
                var val = parseFloat(el.style.opacity);
                if (!((val += .1) > 1)) {
                    el.style.opacity = val;
                    requestAnimationFrame(fade);
                }
            })();
        };

It works really well and it gives your project a little personality :P