fabiochiu/medium-articles huggingface dataset:
Shahab Mir — HCL ERP Administrator / Support Contractor
By: Shahab Mir
Tags: Java, Web Development, Programming, Javascript Development

Shahab Mir is extremely passionate about java development and his work. And this is quite evident from his 17 years of experience and 100% track record.

Shahab is always eager to learn new skills and technologies to keep himself updated to compete with the evolving trends and market. No matter what your IT needs are, Shahab can get you the best solution.
Create Cookies in Cordova with Oreo.js
By: 𝕯𝖎𝖆𝖇𝖑𝖔 実
Tags: Web Development, Cordova, Javascript Development, JavaScript, Ionic

So, in the past, I write a post about creating cookies in Electron with Oreo.js. This time I just want to show you how to import this package in your Cordova project. Basically, you can use oreo.js as the same way you can use it in Electron or even in a WebBrowser, but the import method could be different depending on the installation type that you decide to use.

What is Oreo.js?

As I said in the Electron tutorial, Oreo.js is a cross-platform javascript package that allows you to create and manage cookies just like in browsers (with additional features). This package can be installed in different ways depending on the platform on which you are developing your application.

Installing the Package

In Cordova, you can installed this package in two different ways. You can install it by plugin-manager or by importing directly the .js file in your index.html

The script-tag way (Recommended)

You can import the .js directly with a script-tag in your index.html file. Just like this:

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

Also you can download the oreo.js file in your Electron project folder and import it:

<script src="./local/path/to/oreo.js"></script>

Once imported, the package will detect automatically if the current platform is an Cordova app to set a storage-system (LocalStorage). Also, a global object will be created with the name oreo and another named cookies . Both objects are the same, but you can select one of them to access to oreo functions.

Why I recommend this installation way? I learned a lot of Cordova programming, and will say that Cordova plugins can be really annoying if you don’t have enough Android-Programming knowledge. The plugin version of oreo.js is just an adapted version of the original .js file to be imported through Cordova plugins.

When you import oreo.js trough a script-tag, the package will dectect automatically if is working under a cordova-app, and then the package will select the LocalStorage system to storage all cookies.
LeetCode problem #32 — Longest Valid Parentheses (JavaScript)
By: Duncan Mcardle
Tags: Leetcode Hard, Leetcode Solution, Javascript Development, Leetcode, JavaScript

In this LeetCode problem, we’re supplied with a string of parentheses ( ( and ) ), and asked to find the length of the longest valid sub-string of parentheses. Valid is defined as a correctly open and closed set of parentheses, such as () , (()) , ()() , etc.

Solution #1: Finding all valid possibilities

This is notionally known as the brute force method, and is most definitely the slowest valid option. In this approach, we loop through the supplied string, and create a “potentially valid string” (PVS) every time we encounter an open-parentheses. We then continue traversing the string until said PVS is correctly closed, at which point we consider the PVS as valid, and return the longest one found.

Whilst the easiest to explain, this is unfortunately the most inefficient, as we are not only storing more data, but carrying out far more calculations, than the next approach.

Solution #2: Identifying the incorrect characters

This approach (which is inspired by a number of posters, but predominantly floribon with his submission) does the opposite of the above, by instead looking for all of the invalid parentheses. Once we know all of the invalid parentheses, we can then assume that the strings between said invalid parentheses are valid, and thus calculate the biggest of those.

Computationally this approach is far better, but it’s definitely more difficult to wrap your head around, and relies on an assumption that does not seem entirely intuitive (but is evidently correctly, at least in the test cases supplied by LeetCode).
LeetCode problem #30 — Substring With Concatenation Of All Words (JavaScript)
By: Duncan Mcardle
Tags: Leetcode Hard, Leetcode Solution, Javascript Development, Leetcode, JavaScript

In this LeetCode problem, we’re given a string, and a series of words, and asked to find all points in the string where you can then find all words, in any order, without interruption.

In other words, given the string redgreenblue and the words ['red', 'green'] , you would return [0] , as you can find all of the words uninterrupted at that point. If instead the string was redgreengreenred , then you’d return [0, 8] as the combination of provided words can also be found at the end of the string.

Solution #1: Recursion

The basic premise for this solution is that we loop through the original string, and for each iteration, check if all of the target words can be found from this point on in the string. To achieve the more complicated latter half of this, we will use recursion.

The recursive function doesStringContainAllWords , takes a string and array of words, and checks if any of those words are found at the front of the string. If they are, we call the function again, providing the same string but moved on by the length of the word we found, and the same array of words, minus the found one. Once all words have been found, we confirm that the original string did contain all target words.

To speed things up with this overall approach, we also initially calculate the total length of all words being looked for. This allows us to exit early when we traverse far enough into the string to know that an answer can no longer be found.
LeetCode problem #28 — StrStr (JavaScript)
By: Duncan Mcardle
Tags: Leetcode Solution, Leetcode Easy, Javascript Development, Leetcode, JavaScript

In this LeetCode challenge, we’re asked to write a function similar to C++’s StrStr. By way of a quick refresher, StrStr is a function that takes two strings; string A (the haystack) and string B (the needle), and returns whether (and where) you can find string B in string A (the needle in the haystack).

In other words, if provided with a haystack of hello , and a needle of lo , StrStr would return 3, as that is where the needle appears in the haystack. According to the LeetCode spec, if we cannot find the needle in the haystack, we should return -1, and if the needle is empty, we should return 0.

Obviously there are a variety of functions in JavaScript to achieve this, but that’s not really in the spirit of LeetCode, so let’s look at making a solution.

Solution 1: Loop

This solution loops through the haystack until it finds the start of the needle, and then checks if the letters that follow in the haystack match that of the needle. If a full match is detected, then this position is returned, otherwise the traversal of the haystack continues. If we reach the end of the haystack without finding the needle (or more accurately, if we traverse far enough into the haystack that the needle cannot be found), we return -1.
Object Destructuring in JavaScript
Tags: Object Destructuring, Coding, Programming, Javascript Development, JavaScript

let { prop1 , prop2 } = object

If you want to know about array destructuring you can have look at it here

So Object destructuring is a method where properties of an object are assigned to a variable

Before ES6, we use to do that like this

let obj = {

firstname : "f_name",

lastname : "l_name"

} var first_name = obj.firstname;

var last_name = obj.lastname console.log(first_name)

console.log(last_name)

but after the introduction of destructuring in ES6, we can do this even more easily

let obj = {

firstname : "f_name",

lastname : "l_name"

} let { firstname:first_name , lastname:last_name} = obj console.log(first_name)

console.log(last_name)

So less code, but here is a catch always while doing so you need to keep in mind that you always refer to the same property name used in your object while destructuring else compiler will throw an error and the variables name should be mentioned after the colon

here we can have the same variable name as the one with the property name of an object, by doing so we have lesser variable declarations in the scope

let obj = {

firstname : "f_name",

lastname : "l_name"

} let { firstname , lastname} = obj console.log(firstname)

console.log(lastname)

Now what if we have a nested Object, no worries let it is also the same let's take an example for the same

let obj = {

firstname : "f_name",

lastname : "l_name",

education :{

degree:"bachelors"

}

} const {education:{degree:deg}} = obj /* here deg is variable and degree is property name we can eliminate the useage of variables const {education:{degree}} = obj console.log(degree) */ console.log(deg) /* OUTPUT : bachelors */

Now what if the nested object is missing

in such a case we get an error

TypeError: cannot read property ‘ propname ’ of undefined

so this can be overcome by giving the default value

Syntax = let { property_name : { property_name } = default_value } = object

let _obj = {

firstname : "f_name",

lastname : "l_name",

} const {education:{degree} = {}} = _obj console.log(degree) /* OUTPUT : undefined */

by giving a default value we don't get any error
LeetCode problem #27 — Remove Element (JavaScript)
By: Duncan Mcardle
Tags: Leetcode Solution, Leetcode Easy, Javascript Development, Leetcode, JavaScript

In this LeetCode problem, we’re asked to remove an element from a provided array, and to do so in-place. This is very similar to the previous challenge, and indeed the solution is very similar too.

Solution #1: Loop

In this solution, we loop through the numbers contained within the provided array, whilst checking each to see if it matches the number being removed. Whilst doing this, we also maintain a counter ( j in the code), which tells us where in the original array we should place the next value.

The way this works is that if we start with an array of [1, 2, 3] and want to remove all occurrences of 2 , we will look at 1 , see that it is not being removed, and thus place it at the counter’s current value (which will be 0 to start with), leaving the array unchanged. We’ll then look at 2 , which we see does need to be removed, and so we move onto the next number without incrementing the counter. Finally when we reach 3 , we see that it is not being removed, and so we place it at the counter’s position in the array (the counter is still set to 1 at this point), and increment the counter, giving us an array of [1, 3, 3] and a counter value of 2 . This then allows us to chop the array at the counter’s position, giving us a final array of [1, 3] .

Like with the previous exercise, LeetCode doesn’t require us to chop off the surplus data, so I have left the line to do so in, but commented it out. In addition, LeetCode ask that we return the length of the new array, rather than the array itself, as it is being edited by reference.

Solution #2: .filter()
LeetCode problem #26 — Remove Duplicates from Sorted Array (JavaScript)
By: Duncan Mcardle
Tags: Leetcode Solution, Leetcode Easy, Javascript Development, Leetcode, JavaScript

In this LeetCode problem, we’re provided with an array of numbers, and asked to remove any duplicates, without creating a new array. In other words, the original array must be manipulated in-place, rather than just moving the unique values to a new array and returning that.

Solution #1: The loop

More or less all solutions to this problem revolve around the same basic concept: You loop through the array, move all the unique numbers to the front, and then chop off the tail. So that’s what we’ll do here:

Throughout the loop we maintain a “unique cursor”. This cursor tracks how many unique values have been found, and thus allows us to know where to place the next unique value in the original array.

You’ll notice that the end of this solution is a little odd, and that’s because of how LeetCode grade the submissions. They don’t penalise you for not chopping off the tail, so I’ve commented it out in order to boost performance. In addition, rather than returning the modified array, for some reason the return value has to be the number of unique elements, so that’s what we’re returning here.
AddSkill Javascript hackathon held on 5th Nov 2020.
By: Ashutosh Singh
Tags: Javascript Development, Addskillhackathon

This is my story on experience with the first javascript hackathon I participated in and scored 4th position.

Thanks for AddSkill team to organise this hackathon. Initially when the problem statement was put on, it looked OMG this is so hard to code in a day, finding out wrong words in a text file and mark them in red colour and display the file contents. Also display the suggestions for each words on hover. Then we got to know, oh there’s already an API for spell check along with correct suggestions. Now it was so easy. ☺

Key things implemented and learned :

Make API calls using AJAX as well as async-await.

If a function wants to wait for a result, return it a promise.

If a custom function makes a call to an async function and wants result from an async function (which returns a promise), pass a reference to that async function call inside a promise, in that custom function.

Add client side events — mouseover, mouseout.

Dynamically adding divs to an html element using innerHTML property.

Using Map, array, Regex in JavaScript.

Thanks to the mentors and all AddSkill members and my colleagues for the help. ☺ A healthy, supportive and guiding hackathon like this encourages me to pick up more challenges.
Setup Mongodb, Mongoose, Node.JS, Express dan JWT bagian 2–Mengenal ORM Model
By: Fredy Y, Https, Www.Linkedin.Com In Ftansari
Tags: Nodejs, Orm, Mongoose, Javascript Development, Mongodb Tutorial

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
React JS Password Generator — Beginners
Tags: React Js Tutorials, Password Generator, Javascript Development, JavaScript, React Js

Build Password Generator using React JS. In the below Video we will be building a password generator using React JS. It will be able to generate a strong password by generating a random sequence of uppercase letters , lowercase letters, numbers and special Characters.

We will also be working on implementing notifications to be shown when the password gets copied. And we will be setting some error notifications to be shown when someone hits generate password without selecting any of the options provided.
How to debug web applications on remote mobile devices (Android & iOS)
By: Software Musings
Tags: Web Development, Javascript Development, Development, Chrome Dev Tools, Software Development

Android Devices

Turning ON Developer Mode

Go to Settings -> About Phone (or Device) -> Software Information. Find Build Number and tap it seven times. A popup will appear stating that developer mode has been turned on.

Device Discovery

In order for the chrome browser to detect android device, follow the steps below:

Go to Settings and search for Developer Options . Tap Enable USB Debugging to enable it. On your development machine, open chrome and log onto chrome://inspect#devices Ensure that Discover USB Devices is checked off. Once these steps are complete, connect your android device to the development machine using a USB cable. The device will show up as an offline device initially. Allow the usb debugging on the prompt that appears on the device once connected. Open up chrome browser on the android device. The device should be online now and you may enter url of the web app that you wish to test. Use inspect link to open dev tools window.

iOS Devices

There are a couple of different methods to debug remote iOS devices. The fastest/easiest method involves using remote debugging with Safari. However, we will also go over method for remote debugging iOS device using Chrome which requires additional configuration.

Remote iOS debugging with Safari

On your iOS device, navigate to Settings -> Safari -> Advanced. Toggle the Web Inspector option to turn it on. On your development machine, open Safari browser. Navigate to Safari -> Preferences -> Advanced. Check off Show Develop menu in menu bar .

Develop menu settings on Safari

6. Now, the Develop option should be showing in the top menu bar in Safari.

7. Connect your iOS device to the development machine using a USB cable. When prompted, ensure that your development machine is trusted on your iOS device.

8. Under the Develop menu, the connected device should be showing up by name.

9. Hover over the device and the additional menu will open with all the safari tabs that are open on the iOS device.

10. Click on the desired tab and it will open safari dev tools with console and other debugging tools.

Remote iOS debugging with Chrome dev tools

In order to debug iOS device using chrome dev tools, you will need RemoteDebug iOS Webkit Adapter.

It is an open source adapter that allows users to debug iOS WebViews with tools like VS Code and Chrome dev tools.

The Github repo of this adapter has detailed instructions on setting it up. The instructions can be found here: https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter
What is a closure?
By: Md Shahab Uddin
Tags: HTML, Web Development, Web Design, Javascript Development, JavaScript

Photo by Marek Piwnicki on Unsplash

Most of us who want to learn closure have already used it before. So, we don’t need to learn closure. Instead, we need to recognize closure.

When a function access a variable/another function outside of it, it’s a closure? Don’t worry if it’s confusing. Let's look at an example

If we call app() function, we get the output “Ronaldo is a good sportsman”. Here, the function app is accessing a player variable which is outside of it. So, it's a closure.

As we know that wrapping some code inside a function doesn’t change its output. Let’s wrap some code inside a wrapper function.

The “app” function can access any variable outside of it even if the variable is outside the wrapper function. So, we can define closure now.

When a function can read/write/create/access a variable which is declared outside of it even when the function is execute outside it’s scope. we call it closure.

Some key facts need to know
Multiple ways to flatten a JavaScript array; there’s more than one way to skin a 🙀.
By: Wibodha Dhanik Alkegama
Tags: Coding, Programming, Javascript Development, JavaScript, Front End Development

Array.flat()

Mozilla doc says Array.flat() method produces a new array by concatenating all sub arrays recursively up to the depth you specify.

Simply put, if you have an array of arrays (maybe more arrays within them), flat() will help you to join all entries together into a single array 🤗.

flat([depth]) accepts a recursion depth as a parameter. However, this is optional, by default it is set to 1.

flat() or flat(1) both are the same

Deeply nested array

What if you don’t know how deeply nested is your given array is, fear not! you have Infinity to the rescue 🦸.

Infinity

flat() will also take care of empty slots from an array, but it will not remove null , undefined or "" . hmmm, 🤔 how can we handle that? continue reading the article and you may find a way 😉.

Flat omits empty slots

Array.toString() or Template literal

You could convert an array to a string and then split it by "," into a new string and then convert it back to an array , which will give you a flattened array.

Flattening by stringifying an array

Ways to handle null , undefined or ""

As mentioned earlier, using flat() will any remove empty slots from an array, but it won’t remove null , undefined or "" . Using toString() you may have to do more manipulations. But regardless of what you choose, we could use filter() with Boolean function. This will allow us to omit items that aren’t truthy.
My Setup — Dev Tools Overview. To start with let's be perfectly clear…
By: Kyle Willard
Tags: Review, Javascript Development, Software Engineering, React, Computers

To start with let's be perfectly clear. I am not current a web developer but rather someone learning the skills to be a JS Software Engineer. I blow through HTML/CSS/ and JS currently. I am learning react & Redux with more planned shortly. But all that means is that my setups are a bit more flexible…

So I am going to give you what I currently run between software & hardware and get you a look at what works and what doesn't.

HARDWARE:

This is the easy one. I run both a Desktop PC & a MacBook pro 2020 w/ touch bar.

Desktop:

Ryzen 7 2700X Processor

16GB Ram

1TB M.2 SSD

3 TB HDD Programs Drive

1 TB HDD Storage Drive

2x 27in 4k Monitors (on a side by side monitor mount)

Blue Snowball Ice Mic

Logitech 615 Mechanical Keyboard

Logitech G Pro Mouse

GTX 2060

MacBook Pro 13 2020:

8GB Ram

256 M.2 SSD

TouchBar

Cast to 55in 4k TV

Enroute:

Magic Keyboard

Magic Touchpad 2

Software:

VSCode

Discord

Slack

Git Bash

Postman

Insomnia — New Addition

Spotify

Zoom

So Obviously this is a pretty obvious setup. I also still have tools like Adobe Creative Suite, and others that I retained from my last job, and still use, but this is my core that is installed every 3–6 months when I clean up and wipe the system drive. (I am kind of OCD on that)

All told the entire setup between both computers would be about 3K for all of it. The TV and monitors are not the top brands, they are merely functional. This is all OVERKILL for the programming that I do, but some of my side hustles include video editing, graphic design, audio editing, and of course in my downtime gaming is certainly a thing.

Here is my advice:

Use this equation:

Price /5 years usage (- hrs used per year) = ROI

The point is this: You do not need a super high-end computer but the time that you save being able to keep going instead of having to wait is a HUGE $$ saver on its own… It is kind of like buying a car. Will it suit your needs long term, will it last 5–10 years with minimal cash expenditure to ensure that it stays that way. Accessories are cheap in comparison to a computer so really don’t include that other than in the initial cost.

Do what works for you… don't worry about what others are doing… BUT if you can spend the extra money so that you have the time savings and dependability.
10 JavaScript projects for absolute beginners.
By: Debojit Basak
Tags: JavaScript, Programming, Javascript Development

10 JavaScript projects for absolute beginners.

If you are a complete beginner with just a few days of learning experience then this blog is for you. Here I will discuss about 10 projects that you can use to understand the basic concepts more clearly. These projects may seem small to many of you. But by building these projects of your own you will have clear idea of the basic concepts.

Changing background color: In this project you will have a button. Whenever you click on it the background color will change. BMI calculator: If you don’t know what BMI is then google it. In this project you will have two input fields. One for your height, and one for your weight. You can have another input field for your name also. Then the program will take the inputs, calculate the BMI and then show the result mentioning your name. Tip calculator: Suppose you go to a restaurant. When the bill comes you have to pay the bill leaving a tip for the waiter. It may be 5% or whatever. take the bill amount and the percent as input and calculate the tip and total money you have to pay. Random number generator: In this case you will have a button. Whenever someone clicks on it, a random number will be shown on the display. Date and Time: In this project you will have to display the current date and time. Background color changing: Again you have to change the color. But this time you will have multiple buttons mentioning the mane of the colors. If you click on the button the background color will change to that specific color. Convert your age into days: In this project you have to take your birthday as input. The the program will convert those years, months and weeks into days and display the result. Count: Suppose you have a number showing in the display. Then you have Two buttons. Add and Minus. If you press add then one will be added to your displayed number and show the result. If you press minus the the reverse will happen. Light switching : Take the image of a bulb (two actually) . If you tap on a bulb that was off then it will light up. If you tap on a bulb that was already on then it will turn off. Calculator: Now it’s time to put everything together. Make a simple calculator. It will take numbers and operators as inputs and show the result.

These were the basic projects for you. if you can complete these properly then you have completed the basics of JavaScript. Now for a bonus project.

Pin matcher: Here there will be two sections. In the left side there will be a display and a button. When you press the button, a 4 digit number will be shown on the display. Then on the right side there will be a display and a number pad. you will have to give the exact number as show earlier. If both of the numbers match, then an alert will pop up congratulating you. If it doesn’t match the the alert will tell you to try again.

Please use your HTML and CSS skills to style the projects. Not only the will look good but also give you satisfaction.
JAVASCRIPT JOURNEY: DAY-1
By: Sakshi Jain
Tags: JavaScript, Web Development, Javascript Development

JavaScript is known yet unknown according to me.

JS is just like another C++, Java or Python .

Yes, JS needs tools to convert JS code into Machine Executable Code. Tools is nothing but some sort of compiler to do a lot of intermediate work.

The biggest myth revolves around when it is said that JS runs only in browser. This myth is hacked by JS engines( V8 and Spider Monkey) with their NodeJS implementation to convert standalone JS code.

With this , it is not needed to attach JS into HTML and hit reload every time.

Everything in JS happens inside execution context and JS is not possible without it.

What the heck is Execution Context?

It consists of two components :

Memory Code

Memory refers to the placeholder for variable and functions stored as key/value pair. For say : key: value equals to a:10 or function :{…..}. Memory Component is also known as variable environment.

Code refers to the execution of program one line at a time . Also known as Thread of Execution. It is a thread in which code is executed one line at a time.

Is JavaScript synchronous single threaded language?

JS can execute one command at a time in a specific order. It can only go to a next line once the current line has been finished executing.

BEHIND THE SCENE OF JS:~

When you write JS program execution context is created. The execution context is created in two phases:~

CREATION PHASE (Memory Creation Phase) where JS allocates memory to variables and functions. CODE EXECUTION PHASE says how code is executed after JS allocation.

So when you run a function whole brand new execution context is created. It is executed in phases !

So try to visualize: As soon as the whole JS program runs , global execution context is created(GEC) with two components Memory and Code with two phases Memory Creation and Code Execution.

Memory Execution means allocation of memory to variables/functions such that variable : undefined and function : {code}

Code Execution means JS program is executing line by line. It replaces “undefined” with value in case of variable and then function is invoked eventually.

So when the function is invoked , whole brand new execution context is created.

Again the same process of creation of execution context is created such that variables got allocation of memory where code execution phase calculates value for that.

After that control is returned and control is back to the execution context from which originally function was invoked.

Do you think JS do so much work??

Yes , indeed it is but JS does this very beautifully . It handles creation, update and deletion of execution context via managing stack i.e. call stack!

JS has its own call stack.

Call Stack is a stack .

Call stack maintains the order of execution of Execution Context popularly known by names : Program Stack , Control Stack , Run Time Stack and Machine Stack.

Summary:-)

So this article will help you learn what is JavaScript with its essence and some beautiful terms that acts as a foundation for it.
JS Shorts — Immediately Invoked Function Expression (IIFE)
By: Prakhar Jaiswal
Tags: Javascript Tips, JavaScript, Frontend, Javascript Development

Immediately Invoked Function Expression (IIFE) is a function expression that runs as soon as it’s defined.

An IIFE has the below syntax,

Generally, IIFEs can be used to guard against unintended effects of Hoisting.

Here, getValue gets it’s value from an IIFE which is called with an argument v = 1 . As a result, even if we are changing the value later on, the value returned by the function remains as is.

IIFEs can also be used to enforce private variables and methods.

Here, the counter variable holds only the get and set functions as only these are returned by the IIFE. These get and set have the access to the variable i due to the scope in which they were defined. As a result, we have maintained the private variables while providing the full functionality using IIFEs.

Image by Pexels from Pixabay

— That’s all for today
Understanding Destructuring, Rest Parameters, and Spread Syntax
Tags: Fundamentals, Programming, Javascript Development, Javascript Tips, JavaScript

Since the release of ES2016 (aka ES6), many new features for working with arrays and objects have been made available to the developers. In this article, I am going to explain destructuring, rest parameters, and spread syntax. The aim is to describe these features in depth so that you’ll be able to work with arrays and objects much more quickly and compactly.

Destructuring

Destructuring assignment allows assigning the properties of an Array or Object to multiple variables at once. There are two types of restructuring; object destructuring and array destructuring.

Object Destructuring

Object destructuring binds variables to different properties of an object. Let’s have a look at an object with the traditional approach to creating variables and assign values to them.

NOTE: The same object is used for all the examples of object destructuring.

If you wanted to assign the value of name and date to variables individually, then — before this assignment syntax — you might do it the following way:

With object destructuring, you can reduce it to a single line by surrounding variables in curly brackets {}. JavaScript will create new variables (name and dob) from the property with the same name:

You will notice that the above assignment for object destructuring creates new variables with the same name as the object properties. There are many use cases where you may want to give different names to these variables. You can easily achieve that by using colon : followed by alias.

In the example below, a custom name is given to a destructured value:

You can also destructure the values of nested objects. In the example below, the address is destructured once again to create variables (streetNum, streetName, and city).

Note: If you try to console.log(address) in the above example, it will be undefined. In order to access an object as well as its nested values, you would have to declare them separately:

Array Destructuring

Array destructuring creates new variables using an array item as a value. Let’s take a look at an array of colors:

const colors= ['Red', 'Green', Blue]

Previously, you would create variables from the array as follows:

As you can see, there is a lot of code repetition and this approach will take up a lot of space in your code. Array destructuring allows you to unpack the values from the array in order and assign those values to their own variables.

NOTE: In object destructuring we have used curly brackets, but in array destructuing we have used square brackets while declaring variables.

To skip the values, you can leave the destructuring syntax blank between the commas.

You can also destructure nested arrays. For this, let's create a nested array of numbers and destructure it to save the values into the new variables.

You can also set default parameters during the destructuring. As illustrated in the example below, we have set the default value of enrolled to true. Moreover, we have used the combined object and array destructuring in a single assignment.
React Virtual DOM vs Real DOM
By: Devinder Suthwal
Tags: Web Development, JavaScript, Reactjs, Javascript Development

If you landed here then you have an idea that React uses Virtual DOM for better performance and want to have better understanding of it. In this article we will try to find out what is DOM and its problem, what is Virtual DOM, how it solves DOM’s problems and how React uses Virtual DOM.

What is DOM?

“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”

The DOM is an abstraction of a page’s HTML structure. It takes HTML elements and wraps them in an object with a tree-structure — maintaining the parent/child relationships of those nested HTML elements. This provides an API that allows us to traverse nodes (HTML elements) and manipulate them in a number of ways — such as adding nodes, removing nodes, editing a node’s content, etc.

DOM inefficiency

DOM was originally intended for static UIs — pages rendered by the server that don’t require dynamic updates. When the DOM updates, it has to update the node as well as re-paint the page with its corresponding CSS and layout. Say we have an array.

let fruits = [‘Apple’, ‘Orange’, ‘Banana’]

We want to update here from Orange to lemon. Then we need to create a new array.

let fruits = [‘Apple’, ‘Lemon’, ‘Banana’]

In an efficient way we can just traverse to the fruits[2] and update only this element.

Now it’s common to have a thousands node in a single SPA. So repaint the whole page for each change is very-very expensive.

Ideally, we’d like to only re-render items that receive updates, leaving the rest of the items as-is.

Knowing when to update

There are a couple of ways in which components can tell when a data update occurs and whether or not it needs to re-render to the UI:
Alternative libraries for Console.log() for your next JavaScript Project
By: Manish Mandal
Tags: Console, Programming, Javascript Development, Javascript Tips, JavaScript

If you are a JavaScript developer you must be using console.log() for debugging your JavaScript project. But do you know that there are some alternative libraries to console.log() . These libraries can be used in your next Node, React, Angular, or Vue projects. So let us see what are those libraries and how to use them.

Console is a lightweight library that can be used as an alternative to console.log() . The best part about Console is that apart from supporting warn, info, log, or error method it also supports success, debug, and stress method.

Usage

Install : npm install Console or yarn add Console

Import: const Console = require("Console"); or import Console from "Console"

Terminal Output

Browser Output

Logdown is a debug utility for the browser and the server with Markdown support, providing a single interface and a similar behavior between the browser and the server.

The best part about logdown is that you can pass the name of your module and it will return a decorated console.

Usage

Install : npm install logdown or yarn add logdown

Import: const logdown = require("logdown"); or import logdown from "logdown"

Note: Using isEnabled state the log method can be enabled or disabled.

Terminal Output

Browser Output

Consola is the most used logger libraries available for Node.js and Browser. It has 1.5 million downloads weekly. You can also pause or resume your logs with consola.

Usage

Install : npm install consola or yarn add consola

Import: const consola = require("consola"); or import consola from "consola"

Terminal Output

Browser Output

Ololog is a library you can use to display your log messages in console with different styling. It supports text color, background color, italic, etc to display your log messages.

Usage

Install: npm install ololog or yarn add ololog

Import: const log = require("ololog"); or import log from "ololog"

Note: It’s not compulsory to use the configure method.

Terminal Output

Browser Output

Hope this article will be useful for your next JavaScript project.

Thanks for Reading
JavaScript Programmers Can’t Stand on top
By: Joana Borges Late
Tags: Javascript Tips, JavaScript, Javascript Development

Notes

You may use “top” to name a local variable (declared inside a function), but not to name a global variable (declared outside a function).

But its “inferior” friend, “bottom” you can use as local and as global variable name.
Digital Clock in React
By: Ankit Kumar Gupta
Tags: React, JavaScript, Reactjs, Javascript Development

This is my first post. So please forgive me in advance.

I never wrote anything before. Even in collage I copied and pasted assignments. So I’m trying to post a blog in a week.

This post is a part of my #100daysofcode challenge. This is my second attempt. My first attempt last long for 10 days. I took this challenge to learn a new thing everyday. I will be focused on JavaScript, React and NodeJs.

On day 1 of this challenge I build a React Application that shows current time. I know this is not much but I will try to make it harder.

You can check out source code here.

https://github.com/ChikoDish/react-clock

live demo: https://chikodish.github.io/react-clock/

Please leave you valuable comments.

Thank you.
Proč je lepší si pro vývoj softwaru najmout IT agenturu, než sestavovat vlastní interní IT tým
By: Linda Hubičková
Tags: Agile, Javascript Development, Scrum, Development, Agency

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
JS Shorts — Call and Apply. The call and apply are both used to…
By: Prakhar Jaiswal
Tags: Javascript Interview, JavaScript, Javascript Development

The call and apply are both used to call a function using a desired this value and a set of parameters.

Both these functions accept the first argument as the value of this . The only difference between the two is that .call accepts the list of parameters as a comma separated list of function arguments while .apply accepts an array as the list of arguments. An easy way to remember this is Call -> Comma and Apply -> Array .

Notice the example above, it shows how the output can be changed by providing a desired value for the this keyword.

There are a wide range of situations where this comes in handy.

One of the most simple example is when we want to conditionally change the value of the scope in which the function executes.

Another situation is when we want to conditionally change the number of arguments provided to the function.

Image by Dhruvil Patel from Pixabay

— That’s all for today
Javascript call() Method.
By: Deepak Chandra
Tags: Javascript Tips, Javascript30, JavaScript, Javascript Development

The call() function is a predefined JavaScript function. The call() allows for a function belonging to object can use a method belonging to another object.

var person = {

fullName: function() {

return this.firstName + " " + this.lastName;

}

}

var person1 = {

firstName:"rahul",

lastName: "gupta"

}

var person2 = {

firstName:"ajay",

lastName: "sharma"

}

person.fullName.call(person1); // Will return "rahul gupta"

This example calls the fullName function of person.

call() method provides a new value of this. Through call() method, you can write a function once and then inherit it in another object, without having to rewrite the function for the new object.
Concept about JoInTest: My solution to Class Tests
Tags: Forms, Free, Javascript Development, Forms Design, JavaScript

You see I had a little problem when I started out I had just learnt Node.Js and started to write the code for this in Node but then I wanted free hosting and I started out with firebase because of it being free so that I could provide the service for free. But Firebase hosting is not like VPS so Its like you only have access to var/www/ and its an apache/ngnix server. So the app.js file I had written was to be dumped.

Necessity is the mother of invention.

And then came a thought how do you handle any random value added to domain as jointest.ml/authgc/ you can’t create this many folder.

But one way you could do that was by configuring the Error page to deliver tests with our fav JavaScript. That’s what I did using Firebase Data Base as data storage and window.location.pathname as identifier. Later I realized that this would also help in WebCrawlers finding out page and devouring the free limit firebase had given me! (yeah!, a true genius our mind is).

So if you want to create your own Google Forms let me tell you it can be free. But might require a lot of real work. Sip a coffee and sit in a chair , relax and think start working night long. Stack Overflow is there my friend!
10 Funny JavaScript libraries
By: Zeba Academy
Tags: Programming Languages, Programming, Mobile App Development, Javascript Development, JavaScript

Such a humorous theory has long been known: for any word of the English language, there is a JavaScript library with the appropriate name. Below we will look at a list of the most unusual names, with links to their repositories and a brief overview of the functionality provided by these libraries.

Here I was amused not by the name, but by what this tool does, namely, it allows you to write javascript as if it were English, for example:

whenever('Click Me!').is('clicked').then('Change the text to "Clicked!"')

I’m not sure if this is useful or really improves readability, but the idea is fun and worth at least curiosity.

This tool implements a queue with event subscription support.

Have you ever wished to have the power to do anything you want by a snap of your fingers? Thanos JS gives you a taste of this power, allowing you to reduce the file size of your project down to 50% with a simple command. But instead of achieving it by some clever JavaScript manipulation, Thanos JS simply randomly deletes half of your project files. Thus, this JavaScript tool isn’t intended for serious use. It was created just as a joke.

This is a lightweight CSS3 and JavaScript library for creating scrolling animations. It is free, open source, and easy to use. Scrollanim uses Animate.css and has a large number of built-in CSS animations, from which you can choose, for example, bounceIn, bounceOut, fadeIn, fadeOut and others.

The tool allows you to track changes in the DOM and find out, for example, whether a particular page element has been modified. The description on the repository explains in detail where and how this can be useful. Weighs 1.5 KB

One of the best animation libraries in the world, Anime.js is flexible and easy to use. This is the perfect tool to help you add some great animation to your project.

Anime.js works well with CSS, SVG, DOM attributes, and JavaScript objects and can be easily integrated into your applications.

A useful tool that allows you to easily link keyboard shortcuts to events in the browser. On the site, when certain keys are pressed, this part of the page is highlighted. Weighs 2.2 KB.

This is a small JavaScript library that allows you to create a watch function that notifies you when a node that matches a given CSS rule is added to the DOM. The library uses dynamically defined CSS animation rules (@keyframes) that are added to the browser’s animationstart events when a new DOM node is added.

The description on the repository states that this is “browser-javascript, jquery-like lib”, which gives reason to believe that some selectors for DOM.

Popper.js is a 3 kB JavaScript library with zero dependencies that provides a reliable positioning engine you can use to ensure all your popper elements are positioned in the correct place.
All about semantic HTML tags.
By: Rahul Yadav
Tags: HTML, CSS, Javascript Development, React, Webdevelopment

All about semantic HTML tags.

What are semantic elements?

Semantic elements are the elements which clearly describe their purpose and meaning both to the browser as well as the coder.

First look at some of the non-semantic elements -

The elements like <div> and <span> are called non-semantic elements because they do not clearly define their meaning.They can be used (and are used frequently )anywhere and for any purpose.

Here’s a list of all the semantic html elements-:

<article>

<aside>

<nav>

<section>

<details>

<figcaption>

<header>

<footer>

<main>

<img>

<summary>

<time>

<mark>

<figure>

Why use semantic elements?

The first question that strikes our mind is why use semantic tags when <div> and<span> can serve our purpose,to understand the benefits of using semantic tags have a look at the images below.

First image shows the use of non-semantic elements

This one shows the use of semantic elements-

It is obvious from the above images that semantic tags are clear to understand both to the browser and the developer.

Some of the advantages of using semantic html tags are-:
JavaScript Clock
By: Arc Coder
Tags: Javascript Clock, Clock, Realtime Clock, Javascript Development, Realtime

Today we are going to learn how to make a real-time clock by using vanilla JavaScript and CSS only.