Pages

Sunday, December 26, 2021

How to find Max Consecutive Ones?


We are given an array with binary values named nums, this will return the max consecutive ones.  

In order to solve this problem I am going to be using JavaScript.

As an example, the first array to be executed will be:

nums: [1,1,0,1,1,1] which will return the value: 3. 

 

The following is the code to solve this problem: 

var findMaxConsecutiveOnes = function(nums) {
    let c = 0;
    let l1 = 0;
    let l2 = 0;
    let largest = 0;

    for (let i=0; i<nums.length; i++) {
        
        if (nums[i] === 1) {
            c++;
        }  
        
        if (nums[i] === 0 || i === (nums.length - 1)) {
            
            if (l1 !== 0 && l2 < l1) {
                l2 = l1;
            }
            
            l1 = c;
            c = 0;  
 
            if (l1 > l2) {
                largest = l1;
            } else {
                largest = l2;
            }
        }
        
    }

    console.log(largest);
    return largest;
    
};


Now, I am going to explain the code:

var findMaxConsecutiveOnes = function(nums) {
    let c = 0;
    let l1 = 0;
    let l2 = 0;
    let largest = 0;

};

First, we declare the function "findMaxConsecutiveOnes" e ititialize the variables c, l1, l2, and largest equal to 0. 

 

var findMaxConsecutiveOnes = function(nums) {
    let c = 0;
    let l1 = 0;
    let l2 = 0;
    let largest = 0;

    for (let i=0; i<nums.length; i++) {
        
        if (nums[i] === 1) {
            c++;
        }  

};

Then we need to iterate through each element on the array nums. In orde to do this we utilize a for loop. At the same time, every time the index "i" is equal to 1 we'll increment the value of variable "c" by one.

 

var findMaxConsecutiveOnes = function(nums) {
    let c = 0;
    let l1 = 0;
    let l2 = 0;
    let largest = 0;

    for (let i=0; i<nums.length; i++) {
        
        if (nums[i] === 1) {
            c++;
        }  
        
        if (nums[i] === 0 || i === (nums.length - 1)) {
           
l1 = c;
            c = 0;

        }
};

Now we ask: if index "i" is equal to 0, or index "i" indicates the end of the array then we should set the value of "l1" equal to the value of the accumulator variable "c". Then we reset the variable "c" to 0. 

 

var findMaxConsecutiveOnes = function(nums) {
    let c = 0;
    let l1 = 0;
    let l2 = 0;
    let largest = 0;

    for (let i=0; i<nums.length; i++) {
        
        if (nums[i] === 1) {
            c++;
        }  
        
        if (nums[i] === 0 || i === (nums.length - 1)) {
            
            if (l1 !== 0 && l2 < l1) {
                l2 = l1;
            }
            
            l1 = c;
            c = 0; 
        } 
    }

};

Let's say the max consecutive ones in the array id equal to 2 and then we find that there is a new value, higher of consecutibe ones, then we should replace this value as the new max. In order to do this we inquiere whether the variable "l1" is not equal to 0 and also if "l1" is greater that "l2", then "l2" would be the value of "l1". 

 

var findMaxConsecutiveOnes = function(nums) {
    let c = 0;
    let l1 = 0;
    let l2 = 0;
    let largest = 0;

    for (let i=0; i<nums.length; i++) {
        
        if (nums[i] === 1) {
            c++;
        }  
        
        if (nums[i] === 0 || i === (nums.length - 1)) {
            
            if (l1 !== 0 && l2 < l1) {
                l2 = l1;
            }
            
            l1 = c;
            c = 0;  
 
            if (l1 > l2) {
                largest = l1;
            } else {
                largest = l2;
            }
        }
        
    }

    console.log(largest);
    return largest;
    
};

Finally, we figure out if the max consecutive ones of the newest found value "l1" is greater than the previous max value "l2". Then, we assign "l1" to "largest"; otherwise, "largest" will be equal to "l2". We the proceed to return the value of "largest", which will give us the final answer.

 

 

 


Sunday, December 19, 2021

Comparing JavaScript with CSS-based Web Animations

 

Web applications are sometimes equipped with animations. Some animations are
event driven, such as when the user hovers over a button and this progressively
expands its size, or they can simply happen without any user interaction, as an example
a flickering square figure on the screen. Animations provide visual effects to web
applications to make them more engaging and visually appealing. Some applications
are more suited for certain elements to be animated than others, as in the case of
interactive games.


There are different ways on which these visual effects can be achieved on the web. I am going to analyze the JavaScript and CSS web animation approaches.
Which method is more efficient, and under which circumstances? Which one is easier to
write and maintain?


In the past Flash was very popular for creating animated applications; however, as
demand became more targeted toward mobile devices, animation performance became
highly important and Flash did not offer the best capabilities, which ultimately made it
obsolete. Some JavaScript libraries came out, such as jQuery which offers easy to write
JavaScript animations. Nevertheless, as convenient as jQuery was for developers it
also felt short on achieving high animation performance [3]. As CSS3 came out there
was a better solution for animations that did not imply installing any external library to
our project, and therefore was a promise for more efficient animations.


There are two different ways in which CSS can be used to create animations. These are
CSS transitions and animations properties:


CSS transitions: display animations between two states. These could be for example,
animating a button between its resting state and a hover. The button could display a
fading effect while the user tries to select this button. CSS transitions have different
properties that define the targeted animation property, the animation duration, easing
effect, and delay. Both duration and delay are measured in seconds.
CSS animations: assigns animations between a set of start and end properties. This
consists of keyframes for the progression of the animations and styling for the
appearance of it [2].


Both are programmed in different ways but also share similar shortcomings. CSS
animations do not allow great interaction between the programmer/user and the
animation. For example, there is no way to find a particular keyframe on a CSS
animation, also once the animation has started it can not be reversed at any or to any
particular point. Aside from this, only some browsers allow the user to pause and
resume a CSS animation. When it comes to relative values CSS animations do not offer
great flexibility either, meaning that if the programmer would like to instruct the animated
element to move 50px to the right of where the animations starts, it would not be
possible to do merely utilizing CSS animations [3].


Another popular alternative to animate web application elements is by using
JavaScript. As previously mentioned, there are certain JavaScript libraries that can be
used to produce animations by simplifying the task for developers. jQuery made an
attempt to achieve this but felt short in performance. Another library alternative would be
GSAP (GreenSock Animation Platform) which was built specifically to create animations
for the web, taking optimization and efficiency into account for these tasks [3].
However, there is a more standard approach to creating JavaScript animations, and this
is the Web Animations API which works by targeting DOM elements [6].
JavaScript provides certain functionalities not possible utilizing CSS animations such
as the possibility to pause, resume, stop, slow down, and reverse an animation. The
ability for the user to have certain control over the animation is what makes an
application truly interactive, a feature not possible using CSS [3]. JavaScript animations
can also make use of objects, which makes it possible to integrate Object Oriented
Programming to our animations, allowing more complex designs to be developed.
Another advantage of JavaScript over CSS animations is being able to animate other
objects other than DOM elements [2].


Aside from interactivity and ease of development there is another, more important
aspect when comparing two programming methods. This is performance. First we are
going to discuss which properties and components are least and most expensive to
animate. The cheapest properties for browsers to animate are: position, scale, rotation,
and opacity [4]. Now, the most expensive properties to animate are those that change
the entire layout of the page along with them, as well as painting on the screen. For
example, if we have a web page element with width and height measured in percentage
next to other elements, changing these properties constantly will cause the surrounding
elements to also recalculate their values, making this a highly expensive task. These
performance issues can be attributed to both types of JavaScript and CSS of
animations.


When it comes to threading CSS animations, as well as JavaScript Web Animations
are run in a thread called “compositor thread”. This thread is different from the thread
where the browser makes most of the work regarding styling, layout, painting, and
JavaScript execution. The name of this thread is “main thread”. The fact that there is a
separate thread for CSS and Web Animations to execute means that they will run
independently from the workload the browser is carrying from other highly consuming
tasks. This makes CSS and JavaScript based animations perform equally well in that
sense [2]. Another advantage that makes CSS and JavaScript animations run smoothly
is the advantage both take of hardware. GPU layering allows the isolation of animated
elements which in turns makes it easy for the GPU to move those layers around and
compose them later on. However, in order for JavaScript to take advantage of this GPU
layering advantage it needs to make use of 3D transformations and matrices. The only
downside of GPU layering would be a small delay when starting out both applications
because of the browser layer’s calculation and uploading to GPU time [3].

In conclusion, both JavaScript and CSS-based animations perform relatively and
almost equally well when JavaScript is well optimized. The decision to choose one over
the other has more to do with flexibility and the complexity of the animation that wants to
be achieved. For smaller, simpler projects it recommended to use CSS animations.
They come with the advantage of being easier to write. For more complex animations
that require pause, stop, resume, and slow down JavaScript animations are necessary.
The Web Animations API is the go-to for JavaScript animations development; however,
there are other high performing animation libraries such as GSAP.


References:
[1] https://developers.google.com/web/fundamentals/design-and-ux/animations/css-vs-javascript
Updated 2019
[2]https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-andperformance#
css-vs-javascript-performance Updated 2019
[3] https://css-tricks.com/myth-busting-css-animations-vs-javascript/ 2014 - Updated 2017
[4] https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/