DEV Community: Vishwa.R

HTML Features, probably you never knew existed.

Vishwa.R — Sat, 28 Aug 2021 19:29:19 +0000

Hello again from codereaper08!
Thanks again to all my followers, who always motivate me to write blogs weekly, in spite of my tight academic schedules.

Back again with a good article, I hope. In this post, we are going to discuss 5 features in HTML, which probably we never knew existed. So let's get into it.

1. WBR Tag:

Let's start from the first one in our list, wordbreak tag, abbreviated as <wbr>. You may think, what's the meaning of its existence, well It's not like the handy br tags we use. <wbr> just doesn't force words to break unless there's a necessary situation to do so. wbr tag is an empty tag (Doesn't have a closing tag).

We'll see a comparison between <wbr> and <br>, resize the browser-window to see how wbr breaks itself on necessary situations.

2. address Tag:

Using div's for enclosing contact info?
HTML gives a good semantic way of doing that using <address> tag. So what's different in using <address> tags, well, It renders the text in Italics with line-breaks above and below the <address> tags. It also has a by default display property of block. Take a look at the below JSFiddle.

3. optgroup Tag:

<optgroup> tag is used when you need to group the options into categories. This makes selecting an option from a very large list of options easy!
User can look into the relevant category and select an option in that particular category. I've created a superhero optgroup for demonstration in the below JSFiddle.

4. portal Tag:

Now things get interesting! What we are going to see is a tag called <portal>. This was launched by Google in I/O 2019 DevCon, where they mentioned that, <portal> will be an upgrade to <iframe>. <portal> allows seamless navigation inside the embedded content, too!. One sad thing, It is not supported by many browsers, including the normal Google Chrome too. Currently, only the Chrome canary supports the <portal> tag. Check out the demo video below.

5. capture attribute for Input element:

Photo by Luca Bravo on Unsplash

Lastly, we are going to see about capture attribute for the input elements. capture added as an attribute to an input element opens the camera for taking shots of the user(front camera) or the scene(rear camera). This tag only works on mobile, and it simply falls back to a file picker in Desktop. capture attribute has two values,

— user --> Opens User facing Camera (Front)
— environment --> Opens Environment (Rear)

Take a look at the below JSFiddle.

And, that's it for today, Feel I missed out something? Write down in comments, I'll be happy to include. Love it? Give a 💖 for the article. Thanks for reading and have a good time 😄

Is it time to let go of Bootstrap?

Vishwa.R — Wed, 18 Aug 2021 18:29:31 +0000

Hello again!, After a short break, I am back again with a non-technical post. As Web-Dev's, we use and search all possible ways, to get our job done in the easy way. The most vital visual part of Web-Dev, the FRONT-END, is very important to catch the eyes and to give a nice user-friendly experience for the user. To make this job easy, we use CSS frameworks like Bootstrap. So, after these many good years with many technical competitors, is Bootstrap still good to hang on with?
Let's see about this in today's blog.

So, we'll start with

What is Bootstrap?

Bootstrap is a CSS framework (Most popular), which uses class based Web-design. The official site of Bootstrap describes itself as,

“Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.”

And that's completely true, Bootstrap is fast and provide responsive mobile-first build classes to achieve what we Web-Dev's dream of as “RESPONSIVE DESIGN”. It provides an awesome grid system(Which I love) and JavaScript plugins(I hate them using jQuery, we'll get into it).

Competitors

Image source: www.tekkiwebsolutions.com

Bootstrap now faces a reasonable competition from similar UI kit based CSS frameworks like Foundation and Bulma. Apart from these, It also faces a severe blow from TailwindCSS. Bootstrap is always criticized for its inflexibility. I would say, it's not inflexibility, but the huge amount of time taken for customizing the defaults provided by Bootstrap(It provides default UI components, because it's a UI Kit based CSS framework). Whereas in frameworks like TailwindCSS, Utility classes, which provide low-level flexibility, are provided.

Should Bootstrap worry about competition?

I would say Bootstrap was not made to work like TailwindCSS. Bootstrap was made to provide developers of all levels, from beginners to advanced, the ability to quickly spin up a nice looking UI without worrying about responsiveness. Bootstrap's users are mostly beginners, who start their journey of using class based CSS utilities from pure CSS. It also has a good learning curve, so people get it better soon, as frameworks like TailwindCSS, Foundation and Bulma comparatively has a steeper learning curve.

Should we use Bootstrap still in 2021?

Of course, It is best in class for rapid web-deign, where you want a useful and nice looking site, without any brand colour pallets or pixel specific needs. Even today, more than 19% of websites use Bootstrap as their CSS framework. I would say, it's the most probable gateway for learners, who get into class based CSS frameworks from pure CSS and HTML. If you want a quick site for a Boot camp you arrange next week, go for Bootstrap, It's faster to build, gives responsiveness.

Bootstrap is gearing back again!

Image source: getbootstrap.com

As you all know, Bootstrap 5 came with a nice update from 4. It let go of jQuery and switched to Vanilla JavaScript. So, now how good is that!
Bootstrap also managed to bring back the Bootstrap icon support.
It also came up with some low level utility classes for added flexibility. Overall, Bootstrap is not going to be dead, but getting back on track.

Thanks for Reading and following me!
If you didn't, make sure to follow me, so we can learn and discuss tech-stuff.

Attributions:

cover-image : www.drupal.org

Just JavaScript things…

Vishwa.R — Tue, 10 Aug 2021 18:40:43 +0000

Hello again, my dear readers and followers👋. Here I am back with another blog on JavaScript. This time it's going to be much more like a knowledge sharing than a technical thing. So, let's begin with today's topic, “Just JS things”.

We are going to discuss some peculiar features of JavaScript which, most of us, don't know. These peculiar things make JS a great language to learn, and for me, it's the most fun thing to do. So, let's BEGIN

undefined and null :

Most of us would have come across the JS data typesundefined and null. But we don't know the real difference between both of them. Let's start with undefined,

undefined :

The undefined type is an object, which represents that the declaration of the variable done, but it is not assigned. This comes under the undefined, as its name suggests. This is literally lack of value for the variable.

null :

null is a value assigned to a variable. Unlike undefined it's not the lack of value, as we know that null by itself is a value. null is voluntary absence of the value for the variable.

The below picture clearly explains the difference.

We'll see how they compare with each other in the below gist, where we use a simple conditional statement to know how undefined and null work.

Note: Line numbers referred as L below.

Here, we only get to run L4 and L8 in our code. Which means that the variable a is not assigned a value and thus gives undefined, whereas variable b is assigned the value of null which make the L8 to execute.

You can also use this JSFiddle https://jsfiddle.net/Vishwa_R/ha8tqL69/5/ for execution.

First class citizens, FUNCTIONS!

In the JavaScript world, functions enjoy many privileges as first class objects. We can pass one function as an argument for another function and can also return the same if needed for later execution. YES! That's possible in JS. These are called as “Callback functions”. They are commonly used in JS world. We use callback functions in asynchronous programming, to wait for execution until a previous function gets its job done.

Let's see a simple example, let us take the operation of reading a file and displaying its size. Here we have two functions to perform, they are,

Reading a file.
Displaying size.

This must be done in sequence, we cannot display the size first without reading the file. Scenarios like this, make Callback functions “HEROES”.

We'll see an example where we mimic the above operation (we are not going to actually read a file and display the size). Let us take a look at the below gist.

So here in this example, we have two functions, namely Readfile and sizefinder. As per our sequence of execution, we want Readfile to be first executed, So, we call the sizefinder inside the Readfile function as an argument. Finally, we can asynchronously do two functions using callbacks. This makes Callback functions to be widely used.

You can also use this JSFiddle https://jsfiddle.net/Vishwa_R/hce58f39/9/ to have a look at execution.

And that's it for today, I think these two things are great in JavaScript and that's why folks like us LOVE JS 📜✨. JavaScript dominates all the possible domains of technology, from Web to Native (A big thanks to NodeJS), and reigns as the most famous programming language. Let us love JS, as we all do every time.

Thanks for reading and give a 💖 if you liked the content, have some feedbacks? Put them down in the comments. Have a great time😄🎉

Attributions:

Cover image : https://wallpaperaccess.com/javascript

Time and Space, but not relativity :-)

Vishwa.R — Wed, 04 Aug 2021 18:55:51 +0000

Before starting this short and brief blog, I have one important thing to do, guessed it?

A BIG THANKS TO ALL MY FOLLOWERS, you guys just encourage me to share my little knowledge far and wide. Thanks once again!

So, let us get into today's topic Space and Time Complexity.(Yeah, it's not physics). We'll see What are they?, Why are they used? And How to use them?

Let's start with our first question,

What are they?

Image source : https://bitxorbytes.home.blog

Time complexity:
Time complexity is nothing but the amount of time taken by an algorithm for its execution. It is a Time Function (Don't mind a bit of maths here and there).

Space complexity:
Space complexity is nothing but the amount of memory used by the algorithm for its execution. Here, one should not include the actual program size, but should consider only the space or memory needed for execution with respect to the inputs passed.

So with this we proceed to our next question, what is the need for these, let's see about it below.

Why are they used?

So why the need for these Time and Space complexities? Are they that important?
The answer is YES, they are very important and are vital deciding factors in terms of efficiency of the algorithm we design.

Time complexity calculations shows us some great insights, regarding time, like how much amount of time the algorithm will take and is it suitable for processing large inputs and real word data.

Note:
One should note that, time complexity does not give the exact time of execution, as it depends on many factors like OS, programming language and Hardware used. Time complexity gives a time function from which we can infer some valuable insights.

Image source : tutflix.org

Whereas, space complexity tells us a different aspect of the algorithm regarding how much memory or space it'll utilize, and thus it helps in predicting the suitability of its execution on real hardware prior to actual execution.

How to use them?

I'll make it clear that, I won't be diving into exact mathematics behind these, but I'll try to explain as brief as possible here. (If you are really interested to know the maths, just comment on the blog, I would be happy to prepare a series explaining exact steps easily)

So here we sprinkle some exotic JavaScript programs 🎉 for our understanding. Let's start with this simple program,

So here in this program, we are swapping the values of a and b, for that we use a temporary variable called temp. Let's find the Time and Space complexities for this simple program.

Time Complexity:

Here I mention each line with line numbers like L1 and L5. We can also ignore the function definition and function call, as we only care about the logic part. Because, we perform time and space analysis only on algorithms and algorithms only care about logics. So we start from L3, we are doing an initialization here, so it will take less time compared to loops.(loops run over and over and spend high amount of time). We know that the initialization statement uses a constant unit of time (the smallest possible unit, we take it as 1). So the next statement at L4 performs an assignment operation, and it also uses a constant time (we take it as 1). And next we at last do another assignment operation at L5, which also uses a constant time, like the previous statements.

So that's it pretty simple right!, now we just add all those, and we get 1+1+1 = 3 which is also a constant. So we infer that this program runs in constant time. We also write the time function as,

         T(n) = O(1) → here 1 represents constant.

There are many notations we could use to better represent the time function, we'll see them in a series of blogs, if you guys are interested.

So, that is all with time. Let's jump into space complexity.

Space complexity:

Here, we take account for all the variables used, as variables are the memory occupiers. In our very short swapping program, we've got 3 variables. Let us list them below,

      1. a → occupies 1 space
      2. b → occupies 1 space
      3. temp → occupies 1 space

As all the variables occupy 1 space for each of themselves, which means they occupy constant amount of space or memory for their execution. We add all those values 1+1+1 = 3 and we get 3, which is also a constant value, so we can write the space function as below.

         S(n) = O(1) → Here also 1 represents constant

So that's it, we've found the time and space functions for a simple swapping program. It would be a little more work, if the program involves arrays and loops. We'll see about loops maybe in the next blog.

Hope you enjoyed the blog, if you have any comments, just comment, I would be happy to see them, if you like the blog then give a 💖.
Want a whole series on Time and Space complexity? Please leave a comment about your opinion. Thanks for reading and have a nice day!

Attributions :

Cover image :
Photo by Pierre Bamin on Unsplash
Combined by ME for better context to the title :-)

Photo by Aldebaran S on Unsplash

Array rotation, a simple approach using JS

Vishwa.R — Tue, 27 Jul 2021 18:47:04 +0000

What's an array?

An array is a type of linear data structure containing a collection of elements of similar data type. Arrays are one of the most important data structures. The elements in the array are stored in contiguous memory locations.

what's array rotation?

Array rotation is nothing but shifting elements of the array in a specified direction with a rotation factor. No worries, this will be made clear with an example below,

Reversal algorithm for array rotation

There are many ways to rotate an array, you may use a temporary array to store values and then replace them in the actual array, or you may store the first element of the array in a temporary variable. Shift the other elements to the left, and we have to do this for d times (where d is the rotation factor). We are going to use Reversal algorithm for rotating the array in left direction.

How the Reversal algorithm works?

Unlike other methods mentioned above, Reversal algorithm don't use any temporary variable or array for the rotation process. This makes it more space efficient. This algorithm works on 3 steps. They are,

reverse d elements.
reverse n-d elements.
And finally, reverse n elements.

Example:

So, with these steps in mind, let us dive right into JavaScript and make the magic happen ✨

Code it in JS

First, we need a function to rotate the array from a given index to the end. So it takes 3 parameters like samparr, begin, end. We use a while loop and assign the starting value of samparr to a temporary variable called temp.
We then assign the starting value of samparr to the ending value of samparr. And, finally, we assign the ending value of samparr to the temp again. We use this temp variable to dynamically change the starting and ending values of the samparr. We then increment the start with 1 and decrement the end with 1. This is going to be our main function, which we would call with respect to the above-mentioned 3 steps.

We, then, need a function to actually rotate the array to the left using the rotation factor d. For that, we create another function which takes the samparr, d and n as parameters and return the rotated array. We return the function if we have d=0, which means the array is empty. Going good till now, but wait!, What if the d is greater than n, step 2 will become broken, to fix that, we just update d as d % n. We'll look at an example in a minimum scale to better understand this d % n

After, refactoring, we give Step1, Step2 and Step3 to the Reverse function. This will finally return a nicely rotated array as a result.

So, Finally, we have to console log the rotated array. For that, we create a function called Logger, which will console log the rotated array. This function takes two parameters, samparr and n. It is a simple function which loops through all elements in the array and log them onto console.

Hurray 🎉

It's done. The last and final thing we do is pass inputs to our functions, to see them in action.

Use this *JSFiddle to change rotation factor and input array.

Acknowledgements:

Cover image : Photo by Marek Piwnicki on Unsplash

Thanks for reading, give a 💖 if you like.

Substring and stuff with JavaScript

Vishwa.R — Sat, 24 Jul 2021 18:28:08 +0000

Image source: Wikipedia

What is a string?

A string is a thin wire, you used to hang your clothes to dry. Just kidding !
A string in computer terms is a sequence of characters, we use strings to represent words or a sequence of characters in programming. Here's an example for a string,

So, What is a substring, then?

A substring is nothing but a string inside a string. But remember, substrings are contiguous!. If it isn't clear, don't worry, we'll get it right. Have a look at the below gist.

Bonus insight

Let a given string has a length of 5, let us take it as a variable n, then the total number of possible substrings is given by,

Total possible substrings = n*(n+1)/2

for example, let us take n as 5 as we assumed above, then

5*(5+1)/2 which turns into (5*6)/2, eventually yields the value of 15 (which is the total number of possible substrings for a string of length 5).

⚡Note:
Notice that the substrings are contiguous, notice how wa or wd are not substrings of wsad. Only adjoining sequence characters are taken from the string, and are called as substrings.

Now take a deep breath, we are going to dive into the JavaScript ocean🥽

JavaScript code for slicing substrings

So, let us look at the JavaScript code step-by-step for printing (I mean console logging) all the substrings for a given string.
Let us start by initializing the input string and the length of the input string.

These two will be passed to a function called FindSubstring, which contains 3 nested for loops. The first for loop is to identify the starting point of the string passed to the function. We use iterator i looping from 0 to <n.

After this, we move on to the second for loop, where we iterate using iterator j from i to <n. Using this second for loop, we determine the ending point. Take a look at the below gist,

Now, after determining the starting and ending point of the input string, we use a third for loop to console log the sequence of characters from starting point to ending point. For that, we loop using iterator k from i to <j+1. Inside the loop we console log the sequence of characters as follows,

We use charAt method above to pass in the string index, i.e k.

Do you think it's over?

NO!

Not until we call our FindSubstring function and pass it both inpstring and n values. Let us do that to wrap it up,

Awesome ✨🎉, we've done it.

You can also take a look at this JSFiddle to change input strings to your wish.

Feel free to correct me if I am wrong, give a 💖 if you like the content. Thanks for reading and have a nice day.

Acknowledgements:

Cover image : Photo by Timothy Muza on Unsplash

Sieve of Eratosthenes, What is it?

Vishwa.R — Wed, 21 Jul 2021 18:52:40 +0000

Image source : famousmathematicians.net

What is it?

Sieve of Eratosthenes is an algorithm devised by the Eratosthenes of Cyrene. It does the job of finding all the prime numbers within a given upper limit. This ancient algorithm is efficient and smart till the upper limit is a few billions. So we'll discuss the process and JavaScript code for the same, below.

How it works?

The algorithm starts with generating a list of all numbers starting from 2 to n (where n is the upper limit), with the assumption of all the numbers in the list are prime. It starts from 2 and removes all the multiples of 2 in the list by traversing the list in the interval of 2.

So, now we consider n as 10

let sample_array = [2, 3, 4, 5, 6, 7, 8, 9, 10];

Starting from 2, it removes the multiples of 2 by traversing the above list in a step count of 2.

Note: '*' below means removed from list.

let sample_array = [2, 3, 4*, 5, 6*, 7, 8*, 9, 10*];

After removing all the multiples of 2, we move to the next non-removed number (that is 3), now from 3, we traverse the list with the step count of 3 and remove its multiples.

let sample_array = [2, 3, 4*, 5, 6*, 7, 8*, 9*, 10*];

We then proceed to the next non-removed number, which is 5. But here's the thing, the multiples of 5 are already removed from the list. We just make sure when to end this cycle of traversal and removal by calculating the square of 5, that is 5*5 = 25, which is obviously greater than n that is 10. So we stop the process and get the remaining elements, which are prime.

Here's the final list we get,

let sample_array = [2, 3, 5, 7];

Hurray!, we've done with the theory part, let's get our hands dirty with some JS to actually code it.

Execution in JS 💻

Let's start by creating an empty array called Boolarray, why naming 'Bool', because we are going for a Boolean array. We also initialize the value of n as 20.

let Boolarray = [];
let n = 20;

Remember, we first made an assumption that all the numbers in the list (here array) are prime. So we use true for is prime and false for not a prime, with this in mind we first fill the empty array with boolean values of all True (based on our assumption). We use a for loop with iterator i to iterate from 1 to n and fill the array with True.

let Boolarray = [];
let n = 20;
for (var i = 0; i < n; i++) {
   Boolarray.push(true);
 }

Now, we have an array of length 20 with true on all indexes. We now follow the procedure of Sieve of Eratosthenes by starting the for with iterator j from 2 to j*j<=n (j*j<=n checks when to end the looping). If the current element in the array is true, we then loop over its multiples with iterator kand a step count, (according to the current element) and mark them false.

let Boolarray = [];
 let n = 20;
 for (var i = 0; i < n; i++) {
   Boolarray.push(true);
 }
 for (let j = 2; j * j <= n; j++) {
   if (Boolarray[j] == true) {
     for (let k = 2 * j; k <= n; k += j) {
       Boolarray[k] = false;
     }
   }
 }

After this execution, we are left with a Boolean array, which contains true in places of prime (remember true → is prime) and false in places of non-prime numbers in the array.

Now it's all logging it onto the console 🎉

We use another for loop to iterate on Boolarray with iterator num, starting from 2 to num<=n. We console log only the num's which contains true in the Boolarray.

 for (let num = 2; num <= n; num++) {
   if (Boolarray[num] == true) {
     console.log(num);
   }
 }

So, we end with this final code,

You can also use the JSFiddle, to change the hard-coded input n to your wish.

JSFiddle link

Attributions:

Cover-image : Photo by Jaanam Haleem on Unsplash

Thanks for reading ✨

Feel free to correct and give feedbacks. Like it?, then 💖 it.

What is Jina?

Vishwa.R — Mon, 19 Jul 2021 18:36:20 +0000

This Post discusses Jina, a neural search framework from Jina-AI, in layman terms.

How is search going now ?

We search the internet for a variety of needs, from finding the lyrics of your favourite song to ordering food online. We use search engines like google to search and get the desired data based on a query. Now what is a query ?

Query :

It is a precise request for information retrieval with database and information systems.

In general, a query is a form of questioning, in a line of inquiry.

View on Wikipedia

Now, after we give a query to a search engine, it begins it's work and responds to our query with the results matching. For example, imagine you search for the new film releasing this weekend, you google it like, New movie this week release or new film near me. These two phrases we use for searching about the to be released film is the query we give to search engine. Now search engine uses this and retrieve and present us information/data related to the query we gave. This is how the process works.

Traditional query:

In our day-to-day life, we search (I mean query) search engines using plain text mostly. This approach is traditional. Search engines like Google are for general purpose and cannot be tailored for the business needs. Moreover, this traditional approach is error-prone (User can misspell the queries or some words mean different in different context) This poses a void for Jina to enter the scene.

Image source : growhackscale.com

How Jina works?

Jina, on the other hand, is a neural search framework, meaning it uses a deep learning based Neural Search approach to provide out of the box features. One clear advantage of Jina is that it enables users to query with unstructured data, like images, audio, video, and maps. Sounds cool right? If it didn't awe you, here's another plus, it is fully customizable and Open-Source. This means one can easily tailor their search needs with Jina and provide a highly accurate search results for unstructured query.

Structured and Unstructured data:

Ordered data is known as structured data, for example CSV and XML files. Here, data is categorized and ordered, in the form of rows and columns. Whereas in Unstructured data, such orderliness and categorization is difficult and not found.

Now here Jina wins as it enables users to query with unstructured data like images, videos and more. This is possible because of the fundamental development of Jina is strongly rooted on Neural Search and deep learning. This makes Jina trainable for different use-cases.

Image source : lawtomated.com

Traditional Search VS Neural Search:

Chill, This is not going to be a fight between two ways. Both has their own pros and cons. Like, Neural Search has low query matching capabilities compared to Traditional Search. But Neural Search wins in scalability and customizable factor.

Using Jina:

We just install Jina using pip install jina in a venv.
Jina works on flows, a fundamental component, which manages things to get your application running, each flow takes care of real world task. A flow contains executor, executors are like elements which do data processing for our application.

We add these executors called MyTransformer and MyIndexer for data encoding and indexing purpose respectively

We can visualize this flow using plot function

this generates an SVG like below,

We now add a name to the executors like below, so that the generated SVG is readable,

This now generates a more readable SVG like below,

We then add executors needed for our purpose and begin our work. More detailed explanations are given in Jina-Docs.

Contribute to Jina:

Jina adores Open-Source as it's crown and works on community level to get features onboard. Any type of contributions are welcomed, and they have a diverse and inclusive community too. Head over to the GitHub page and start working on issues. If you want to spread a word about Jina, Awesome, do it soon!
Any type of contribution is welcomed.

Love Jina? Read these blogs too

Correct me if I am wrong, forgive me if my English is bad.