![\"Creating](\"/4a93f6818c189a0fb1ca01cb37f962ff/Creating-a-timer-based-popup.gif\")
Maven is a project build management software, it means it Let's you define your project dependencies, features, and behaviors. To do this, Maven downloads plugins and dependencies for various online repositories. People who want to share their libraries, develop using Maven and upload the binaries in a repository. In this article, we’ll discuss how to configure and use Maven dependency.
\nPrerequisites:
\nInstall the Maven support for Eclipse (m2e)
\nMost Eclipse downloads include the Maven tooling already. If it is missing in your installation, you can install it via the main update of your release via Help > Install New Software. The following listing contains the update site for the Neon release and an update site maintained by the m2e project.
\nFor the usage of Maven for Java projects, you only need the m2e component. For Java web development you also want the m2e-wtp entry.
\nDownload the Maven index
\nBy default, the Maven tooling does not download the Maven index for the Eclipse IDE. Via the Maven index, you can search for dependencies, select them and add them to your pom file. To download the index, select Windows > Preferences > Maven and enable the Download repository index updates on startup option.
\nAfter changing this setting, restart Eclipse. This triggers the download of the Maven index. You may want to remove this flag after restarting to avoid network traffic at every start of Eclipse.
\nCreate Maven project
\nCreate a new Maven project via File > New > Other… > Maven > Maven Project.
\nOn the first wizard page, you can select if you want to create a simple project.
\nAfter creating the Maven project, a pom.xml is generated. You can find the file in Project Explorer. A Project Object Model or POM is the fundamental unit of work in Maven. It is an XML file that contains information about the project and configuration details used by Maven to build the project. It contains default values for most projects.
\nNow, you can add a dependency in pom.xml. For example, if you want to add LoginRadius for Java library/dependency, you can add as follows:
\n<dependencies>\n <dependency>\n <groupId>com.loginradius.sdk</groupId>\n <artifactId>java-sdk</artifactId>\n <version>11.0.0</version>\n </dependency>\n ......\n</dependencies>You should now be able to quickly import any libraries that you want o use in your project via Maven.
\n","frontmatter":{"date":"July 11, 2017","updated_date":null,"description":"Learn step by step setting up and resolution of maven dependency using eclipse IDE.","title":"Maven Dependency in Eclipse","tags":["Java","Maven","Eclipse"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/2d5127407846f33b1b7073695bd669d7/ee604/maven.png","srcSet":"/static/2d5127407846f33b1b7073695bd669d7/69585/maven.png 200w,\n/static/2d5127407846f33b1b7073695bd669d7/497c6/maven.png 400w,\n/static/2d5127407846f33b1b7073695bd669d7/ee604/maven.png 800w,\n/static/2d5127407846f33b1b7073695bd669d7/f3583/maven.png 1200w,\n/static/2d5127407846f33b1b7073695bd669d7/e4d72/maven.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Giriraj Yadav","github":null,"avatar":null}}}},{"node":{"excerpt":"jCenter is the public repository hosted at bintray that is free to use for open source library publishers. It is the largest repository in…","fields":{"slug":"/engineering/how-to-use-jcenter-dependencies-in-android-studio/"},"html":"jCenter is the public repository hosted at bintray that is free to use for open source library publishers. It is the largest repository in the world for Java and Android OSS libraries, packages and components. All the content in JCenter is served over a CDN, with a secure HTTPS connection. In this article, we’ll discuss how to make use of jCenter dependencies in Android Studio.
\nPrerequisites
\nIf you don’t have Android Studio installed, you can download from the following link:
\n\nAfter successfully installing Android Studio, you can open an existing project or create a new project to start with.
\nUsage
\nAfter opening or creating a new project, you can find two files named “build.gradle” under Gradle Scripts section in the left pane. The first one will be suffixed with “Project” and another with “Module”. We’ll start with the “Project” one.
\nAdd jCenter repository in project’s build.gradle file as shown below and sync your project:
\nallprojects {\n repositories {\n jcenter()\n\t . . .\n }\n}On successful sync, you’re now able to add any Android dependency hosted on jCenter repository. The dependency will be added to “Module” build.gradle. It’s also known as app’s build.gradle.
\nFor example, if you want to add LoginRadius dependency/library, you can add in app’s build.gradle as follows and sync your project:
\ncompile 'com.loginradius.android:androidsdk:3.3.1'If all the steps are followed successfully, you’re now able to add a jCenter dependency in Android Studio.
\n","frontmatter":{"date":"July 11, 2017","updated_date":null,"description":"Learn how to make use of jCenter dependencies in Android Studio.","title":"jCenter Dependencies in Android Studio","tags":["JCenter","Android"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/21f45b8f9eba48b3695a10929ce75fff/ee604/jCenter.png","srcSet":"/static/21f45b8f9eba48b3695a10929ce75fff/69585/jCenter.png 200w,\n/static/21f45b8f9eba48b3695a10929ce75fff/497c6/jCenter.png 400w,\n/static/21f45b8f9eba48b3695a10929ce75fff/ee604/jCenter.png 800w,\n/static/21f45b8f9eba48b3695a10929ce75fff/f3583/jCenter.png 1200w,\n/static/21f45b8f9eba48b3695a10929ce75fff/e4d72/jCenter.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hitesh Pamnani","github":null,"avatar":null}}}},{"node":{"excerpt":"Bower is a popular package manager to help you quickly deploy components. In this article I'm going to show you how to install Bower and how…","fields":{"slug":"/engineering/how-to-use-bower-to-install-bootstrap/"},"html":"Bower is a popular package manager to help you quickly deploy components. In this article I'm going to show you how to install Bower and how to use it to install Bootstrap.
\nPre-requisites: To install Bower you must first have Node.js and npm (another package manager) installed, your computer may have shipped with these pre-installed. To check if you have npm, open your command-line tool and type:
\nnpm -vIf you do not get a version number, you may need to install npm which comes pre-packaged with Node.js
\nYou can find Node.js along with instructions on how-to install it here: NodeJS
\nWindows Users Only: If you're a Windows user make sure you have Git for Windows installed to work with the Windows Command Prompt with Checkout Windows-Style and commit Unix-style line endings. You can find more information on that here: Git for Windows
\nProvided that you have both Node.js and npm installed, run the following command in your Command-line tool:
\nnpm install -g bowerOnce Bower is installed it's as easy as going to your project folder in Command-line and typing:
\nbower install bootstrapfollowed by:
\nbower install jqueryThis will install the files required for Bootstrap in the newly created 'bower_components' folder.
\nIn this folder you will have 2 new folders 'bootstrap' and 'jquery'.
\nThe next step is to include the files for both jQuery and Bootstrap into your project file(s).
\n...And that's it, you're good to go.
\nIf you need to update a project and are unsure which bower packages you have installed that might need an update, you can type
\nbower listin your project directory for a listing of packages you installed via Bower and which ones are due for an update.
\nin this case if we wanted to update our bootstrap install we would do:
\nbower update bootstrapOnce you have figured out your configurations and installed all of your desired Bower packages you can use:
\nbower initFollow the steps provided in your Command-line.
\nThis will initialize a bower.json file which will store your configurations.
\nOnce you have your Bower.json file you can move it around to other locations or projects and you can get Bower to reinstall all of your packages and configurations by typing:
\nbower installThis will get Bower to create another 'bower_components' folder with the same packages and configurations specified in your bower.json file.
\nFor further information on using or configuring Bower You can checkout the official website
\n","frontmatter":{"date":"July 05, 2017","updated_date":null,"description":"Learn how the Bower package manager helps into quick components deploy and install Bootstrap using Bower","title":"Install Bootstrap with Bower","tags":["Bootstrap","Bower"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.1363636363636365,"src":"/static/f22ed4623c0a1e31c973ed6e1f0ba4bd/ee604/bower-logo.png","srcSet":"/static/f22ed4623c0a1e31c973ed6e1f0ba4bd/69585/bower-logo.png 200w,\n/static/f22ed4623c0a1e31c973ed6e1f0ba4bd/497c6/bower-logo.png 400w,\n/static/f22ed4623c0a1e31c973ed6e1f0ba4bd/ee604/bower-logo.png 800w,\n/static/f22ed4623c0a1e31c973ed6e1f0ba4bd/a8378/bower-logo.png 1024w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Pascal Noel","github":null,"avatar":null}}}},{"node":{"excerpt":"While creating Lead Generation form at LoginRadius, Marketers wanted to sure that visitors enter business emails. To that end, I created a…","fields":{"slug":"/engineering/open-source-business-email-validator-by-loginradius/"},"html":"While creating Lead Generation form at LoginRadius, Marketers wanted to sure that visitors enter business emails. To that end, I created a list in JSON format to block free mail providers like Gmail, Outlook etc.
\nBusiness mail validator makes sure users enters only business emails in submission forms on a web page. User can’t enter with free email’s that provided by the third party (free email) service provider.
\nEx. Gmail.com, Yahoo.com, Yahoomail.com, Rediff.com etc.
\nWe can classified business email validation in two ways.
\nIn client side validation we use javascript(js) OR jQuery to validate entered the email at time of submission the html form. So we can follow the following steps to validate it on client side.
\nAdd jQuery script on head section
\n<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script><script>\n var emailValidator = {\n "123.com": true,\n "123box.net": true,\n "123india.com": true,\n …………………….\n …………………..\n "ymail.com": true,\n "yandex.com": true\n };\n</script>Our complete list is available here
\n<script>\nfunction validateForm(id) {\n var emailValue = jQuery('#'+id).val();\n var emailArray = emailValue.split("@");\n var provider = emailArray[1] ? emailArray[1] : '';\n for(var domain in emailValidator){\n if(emailValidator[domain]){\n if(domain == provider){\n alert("Please Provide Business Email Address.");\n return false;\n }\n }\n }\n return true;\n}\n</script><form name="myForm" action="emailsubmit.php" onsubmit="return validateForm('business_email');" method="post">\n <input type="text" placeholder="Full Name"/><br>\n <input type="email" id="business_email" name="email" placeholder="Email Address"/><br>\n <input type="submit" value="submit"/>\n </form>Note: if you have already have html form where you want to apply this avalidator, look up for the buysiness_email and replace it accordingly.
\nIn Server side validation we use php scripting language to validate entered email at time of submission the html form. So we can flow the following steps to validate it.
\n<?php\n$email = isset($_POST[‘email’]) ? trim($_POST[‘email’]):’’;\nif(!empty($email)){\n $tempEmail = explode('@', $email);\n if (isset($tempEmail['1']) && !empty($tempEmail['1'])) {\n $validEmail = json_decode(file_get_contents('freeEmailService.json'), true);\n if (is_array($validEmail) && in_array($tempEmail['1'], array_keys($validEmail))) {\n echo "Please use business email address.";\n }\n }\n}else{\n echo ‘email is required field.’;\n}\n?>Feel free to add, edit or modify this script as per your requirements. You can contact us if you have any queries.
\n","frontmatter":{"date":"April 25, 2017","updated_date":null,"description":null,"title":"Open Source Business Email Validator By Loginradius","tags":["Engineering"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":0.746268656716418,"src":"/static/bbcfe6f9ef64e0695370aa979325ff56/ab8bb/Open-Source-Business-Validator-By-Loginradius.png","srcSet":"/static/bbcfe6f9ef64e0695370aa979325ff56/69585/Open-Source-Business-Validator-By-Loginradius.png 200w,\n/static/bbcfe6f9ef64e0695370aa979325ff56/ab8bb/Open-Source-Business-Validator-By-Loginradius.png 377w","sizes":"(max-width: 377px) 100vw, 377px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"POPUPS! They can annoy you but if used properly, they can be a boon to any marketing campaign. In 2015, Taylor wrote an article on best…","fields":{"slug":"/engineering/the-ultimate-guide-to-website-pop-ups/"},"html":"POPUPS! They can annoy you but if used properly, they can be a boon to any marketing campaign. In 2015, Taylor wrote an article on best practices to use popup. While the article discussed how to optimize popup, in this article I am going to list down the types of articles and how you can implement them. I have added codes for every type of popup for a better idea.
\nThis section talks about creating a basic popup using simple HTML and CSS. There is a separate section for header, footer and content. I have also added a close button at top right corner of the popup. There are three steps to create this popup.
\n&amp;lt;div class="popup-content"&amp;gt;\n&amp;lt;span class="popup-close"&amp;gt;&amp;amp;times;&amp;lt;/span&amp;gt;\n&amp;lt;div class="popup-header"&amp;gt;Header&amp;lt;/div&amp;gt;\n&amp;lt;div class="popup-body"&amp;gt;\n&amp;lt;p&amp;gt;Your popup code goes here&amp;lt;/p&amp;gt;\n&amp;lt;/div&amp;gt;\n&amp;lt;div class="popup-footer"&amp;gt;Footer&amp;lt;/div&amp;gt;\n&amp;lt;/div&amp;gt;\n&amp;lt;/div&amp;gt;\\&lt;style&gt;\n.popup-layout {\nposition: fixed;\nz-index: 1;\nleft: 0;\ntop: 0;\nwidth: 100% ;\nheight: 100% ;\noverflow: auto;\nbackground-color: rgb(0, 0, 0);\nbackground-color: rgba(0, 0, 0, 0.4);\n}\n.popup-header,\n.popup-footer{\nbackground: #29f;\npadding: 20px;\ncolor: #fff;\nfont-weight: bold;\n}\n.popup-body{\npadding: 20px;\n}\n.popup-content {\nbackground-color: #fefefe;\nmargin: 15% auto;\nborder: 1px solid #888;\nwidth: 60% ;\n}\n.popup-close {\ncolor: #FFF;\nmargin: 10px;\nfloat: right;\nfont-size: 28px;\nfont-weight: bold;\n}\n.popup-close:hover,\n.popup-close:focus {\ncolor: black;\ntext-decoration: none;\ncursor: pointer;\n}\n&lt;/style&gt;Moreover, you can also check out this tutorial of creating a basic popup if you want to learn the basic understanding.
\n&amp;lt;script&amp;gt;\nvar popup\\_close = document.getElementsByClassName('popup-close');\nfor (var i = 0; i &amp;lt; popup\\_close.length; i++) {\nvar closeThis = popup\\_close\\[i\\];\ncloseThis.addEventListener("click", function () {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\n}, false);\n}\n&amp;lt;/script&amp;gt;
This is a timer based popup which can be displayed at a certain time after the page is loaded.
\nFor reference, I have added the code to display the popup after 5 second [Add following code]. Steps are as below.
\nFollow all the steps mentioned in section 1. (Creating a simple popup) and add the following code below that code.
\n&amp;lt;script&amp;gt;\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\nsetTimeout(function () {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "block";\n}, 5000);\n&amp;lt;/script&amp;gt;To Auto hide after 5 second, add following code.
\n&amp;lt;script&amp;gt;\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "block";\nsetTimeout(function () {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\n}, 5000);\n&amp;lt;/script&amp;gt;This one shows up when you scroll down the page. I have set it to 500 pixels, you can change as per requirements
\n&amp;lt;script&amp;gt;\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\nwindow.onscroll = function () {\nif (document.body.scrollTop &amp;gt; 500 || document.documentElement.scrollTop &amp;gt; 500) {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "block";\n}\n}\n&amp;lt;/script&amp;gt;Pretty much the same as above but this one shows popup after 5 seconds of scrolling .
\n&amp;lt;script&amp;gt;\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\nwindow.onscroll = function () {\nif (document.body.scrollTop &amp;gt; 500 || document.documentElement.scrollTop &amp;gt; 500) {\nsetTimeout(function () {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "block";\n},5000 }\n}\n&amp;lt;/script&amp;gt;![\"Creating](\"/c718dfa91184e4494f4d856fd051d640/Creating-an-exit-popup.gif\")
Only confirmation alert popup will show and you can’t make changes in html of this popup. Use following line of code on a single page.
\n&amp;lt;script&amp;gt;\nwindow.onbeforeunload = function() {\nreturn "You are about to leave"\n}\n&amp;lt;/script&amp;gt;There is another variation you can make here. In this scenario, if the user moves his cursor beyond the browser screen, you can create a popup to convince the user to stay. Below is the line of code you will need.
\n&amp;lt;script&amp;gt;\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\ndocument.addEventListener("mouseout", function (event) {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "block";\n});\n&amp;lt;/script&amp;gt;So guys, I hope this guide helped you through various types of popups. If you love animating your pop-up, you might want to check out this tutorial of creating an animated CSS pop-up. Do try them and let us know your experiences.
\n","frontmatter":{"date":"April 20, 2017","updated_date":null,"description":null,"title":"Know The Types of Website Popups and How to Create Them","tags":["CSS"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/6fe96fef5e3bc22b578982f8a2322966/0edbf/The-Ultimate-guide-to-website-pop-ups.png","srcSet":"/static/6fe96fef5e3bc22b578982f8a2322966/69585/The-Ultimate-guide-to-website-pop-ups.png 200w,\n/static/6fe96fef5e3bc22b578982f8a2322966/497c6/The-Ultimate-guide-to-website-pop-ups.png 400w,\n/static/6fe96fef5e3bc22b578982f8a2322966/0edbf/The-Ultimate-guide-to-website-pop-ups.png 560w","sizes":"(max-width: 560px) 100vw, 560px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"JavaScript or JS helps implement complex things on web pages. Many of the developers know the importance of an minified Javascript file but…","fields":{"slug":"/engineering/16-javascript-hacks-for-optimization/"},"html":"JavaScript or JS helps implement complex things on web pages. Many of the developers know the importance of an minified Javascript file but few are aware of an Optimized Javascript code.
\nAn optimized code is a combination of smartly programmed logics and small hacks to optimize performance, speed and save time.
\nHere are sweet 16 JS hacks and tips for developers for optimizing Javascript to improve JS performance and improve execution time without affecting server resources.
\nIt is a small hack to filter out bucket of elements from the array pool. This method creates an array filled with all array elements that pass a test (provided as a function). According to requirement create a callback function for non-required elements.
\nIn below example the bucket elements are null and are ready to get filtered out.
\nExample:
\nschema = ["hi","ihaveboyfriend",null, null, "goodbye"]\nschema = schema.filter(function(n) {\n return n\n });Output: ["hi","ihaveboyfriend", "goodbye"]This hack will save some time and lines of codes for developers.
\nThe String.replace() function allows you to replace strings using String and Regex.
\nBasically this function replaces the string at its first occurrence. But to replace all using replaceAll() function, use /g at the end of a Regex:
\nExample:
\nvar string = "login login"; \nconsole.log(string.replace("in", "out")); // "logout login" \nconsole.log(string.replace(/in/g, "out")); //"logout logout"With the help of breakpoints or debugging points you can set multiple barriers to rectify source of error at every barrier.
\nPress F11 for next call function and f8 to resume script execution.
\nYou can also check what dynamic values are generated by a function, using console and can check output on different values.
\nOften we use math.floor, math.ceil and math.round for eliminating decimals. Instead of using them use “~~” to eliminate decimals for a value.
\nIt is also helpful in increasing performance when it comes to micro optimizations in a code.
\nExample:
\nUse\n\n~~ (math.random*100)\n\nInstead of\n\nmath.round(math.random*100)This technique will help you in resizing and emptying an array.
\nFor deleting n elements in an Array, use array.length.
\n array.length = n\n\nSee this example:\n\nvar array = [1, 2, 3, 4, 5, 6]; \nconsole.log(array.length); // 6 \narray.length = 3; \nconsole.log(array.length); // 3 \nconsole.log(array); // [1,2,3]\n\nFor **emptying array** use\n\narray.length = 0;.Example:
\nvar array = [1, 2, 3, 4, 5, 6]; \narray.length = 0; \nconsole.log(array.length); // 0 \nconsole.log(array); // []This technique is mostly preferred over any other methods to resize/unset the array elements and is one of the best javascript practices most of the developers follow.
\nIf your requirement is of merging two arrays, use Array.concat() function
\nFor merging two arrays:
\nvar array1 = [1, 2, 3]; \nvar array2 = [4, 5, 6]; \nconsole.log(array1.concat(array2)); // [1,2,3,4,5,6]; This function works best for small arrays.
\nTo merge large arrays we use
\nArray.push.apply(arr1, arr2)Reason is using Array.concat() function on large arrays will consume lot of memory while creating a separate new array.
\nIn this case, you can use Array.push.apply(arr1, arr2) which instead will merge the second array in the first one, hence reducing the memory usage.
\nExample:
\nvar array1 = [1, 2, 3]; \nvar array2 = [4, 5, 6]; \nconsole.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];It will also optimize the performance of your Javascript code irrespective of size of array.
\nThis is probably the one of the best optimization tips for javascript. It optimizes speed of your JS code.
\nUsing splice instead of delete is a good practice, it will save some”null/undefined space” in your code.
\nThe downside of using delete is it will delete the object property, but will not reindex the array or update its length, leaving undefined values. Also it consumes a-lot of time in execution.
\nUsing splice
\nExample
\nmyArray = ["a", "b", "c", "d"] \nmyArray.splice(0, 2) ["a", "b"]\n\nResult: myArray ["c", "d"]To check whether an object is empty or not, use
\nObject.keys(YOUR\\_OBJECT).length \n\n// 0 returns if object is emptyFollowing code return the number of elements in an Object.
\nCaching the variable tremendously increase javascript performance.
\nEverytime we use document.getElementById() or getElementsByClassName(), JS travels through all elements repeatedly upon each similar element request.
\nIn Order to boost performance, cache your selections to some variable (if using the same selection multiple times).
\nExample:
\nvar cached = document.getElementById('someElement');\ncached.addClass('cached-element');It is a simple optimization tip with drastic impact on performance, recommended for processing large arrays in loop(s).
\nCheck this link for performance results.
\nGenerally switch cases are used over if/else statements to perform almost the same tasks.
\nThe fact that in switch statements expression to test is only evaluated once, execution time becomes less for the script compared to if/else where for every if , it has to be evaluated.
\nShort circuiting is when a logical operator doesn't evaluate all its arguments.
\nThe code
\nif (loggedin) { \nwelcome\\_messege();\n }Make it short by using combination of a verified variable and a function using && (AND operator) in between both.
\nNow above code can be made in one line
\nloggedin && welcome\\_messege();Array.prototype.slice(begin, end) is used to cut arrays when you set the start and end arguments. But if you don't set the end argument, this function will automatically set the max value for the array.
\nA smart hack is it can also accept negative values and by setting a negative number as begin argument, you will get the last elements from the array.
\nvar array = [1, 2, 3, 4, 5, 6]; \nconsole.log(array.slice(-1)); // [6] \nconsole.log(array.slice(-2)); // [5,6] \nconsole.log(array.slice(-3)); // [4,5,6]In JS there is a basic rule of having a default value otherwise process will halt at undefined values.
\nTo provide default value in a variable use || to stay away from this most common issue.
\nvar a = a || 'hello'The developer must check whether there are any conflicting values that might be passed to the function to avoid Bugs.
\nFor beautifying your Javascript code use jsbeautifier. It formats a clumsy JS code into well structured code.
\nCode before Beautifying
\nCode after Beautifying
\nTo check how well a Javascript code is performing and share results use jsperf. It is easiest way to create and share testcases.
\nJsfiddle and jsbin is a tool for experimenting with your Javascript code and other web languages.
\nIt is also a code sharing site. As you type into one of the editor panels the output is generated in real-time in the output panel.
\nThese are some useful hacks and tips for optimizing javascript performance. It is not mandatory to use them all the time because cases and conditions will vary. If you have tricks other than these, do share with us in comment section.
\n","frontmatter":{"date":"April 07, 2017","updated_date":null,"description":"Learn how to optimize performance using some useful javascript hacks, tips and tricks.","title":"Javascript tips and tricks to Optimize Performance","tags":["Engineering","JavaScript","Hacks","Array"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3793103448275863,"src":"/static/f5e8f6ba73e9e3ac28efba4d9492473b/0756a/16-JavaScript-Hacks-to-save-time-and-boost-productivity-768x555.png","srcSet":"/static/f5e8f6ba73e9e3ac28efba4d9492473b/69585/16-JavaScript-Hacks-to-save-time-and-boost-productivity-768x555.png 200w,\n/static/f5e8f6ba73e9e3ac28efba4d9492473b/497c6/16-JavaScript-Hacks-to-save-time-and-boost-productivity-768x555.png 400w,\n/static/f5e8f6ba73e9e3ac28efba4d9492473b/0756a/16-JavaScript-Hacks-to-save-time-and-boost-productivity-768x555.png 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}}]},"markdownRemark":{"excerpt":"Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie…","fields":{"slug":"/engineering/identity-impact-of-google-chrome-thirdparty-cookie-restrictions/"},"html":"Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie restrictions for 1% of stable clients and 20% of Canary, Dev, and Beta clients.
\nWhat does it mean for user authentication?
\nOn one hand, Google believes third-party cookies are widely used for cross-site tracking, greatly affecting user privacy. Hence, Google wants to phase out (or restrict) supporting third-party cookies in Chrome by early Q2 2025 (subject to regulatory processes).
\nOn the other hand, Google introduced Privacy Sandbox to support the use cases (other than cross-site tracking and advertising) previously implemented using third-party cookies.
\nIn this article, we’ll discuss:
\nThird-party cookie restrictions affect user authentication in three ways, as follows.
\nIf your website or app uses an external Identity Provider (IdP) — like LoginRadius, the IdP sets a third-party cookie when the user authenticates on your app.
\nIf you have multiple apps across domains within your organization and authentication is handled using an IdP (internal or external) with web SSO, you already use third-party cookies to facilitate seamless access for each user using a single set of credentials.
\nIf you have implemented web SSO with one primary domain and multiple sub-domains of the primary domain, third-party cookie restrictions may not apply. For now, Google doesn’t consider the cookies set by sub-domains as third-party cookies, although this stance may change in the future.
\nFor example, you have apps at example.com, travel.example.com, stay.example.com, and web SSO is handled by auth.example.com. In this case, third-party cookie restrictions don’t apply.
Federated SSO is similar to, albeit different from, web SSO. It can handle multiple IdPs and applications—aka., Service Providers (SPs)—spanning multiple organizations. It can also implement authentication scenarios that are usually implemented through web SSO.
\nUsually, authentication is handled on a separate pop-up or page when the user wants to authenticate rather than on the application or website a user visits.
\nFor example, you already use federated SSO if you facilitate authentication for a set of apps through multiple social identity providers as well as traditional usernames and passwords.
\n\n\nNote: It is also possible to store tokens locally, not within cookies. In this case, third-party cookie restrictions won’t affect token-based authentication. However, the restrictions still affect authentication where tokens are stored within third-party cookies (a common and secure method).
\n
Google has been developing alternative features and capabilities for Chrome to replace third-party cookies as part of its Privacy Sandbox for Web initiative.
\nSpecific to authentication, Google recommends the following:
\nCHIPS are a restricted way of setting third-party cookies on a top-level site without making them accessible on other top-level sites. Thus, they limit cross-site tracking and enable specific cross-site functionalities, such as maps, chat, and payment embeds.
\nFor example, a user visits a.com with a map embed from map-example.com, which can set a partitioned cookie that is only accessible on a.com.
If the user visits b.com with a map embed from map-example.com, it cannot access the partitioned cookie set on a.com. It has to create a separate partitioned cookie specific to b.com, thus blocking cross-site tracking yet allowing limited cross-site functionality.
You should specifically opt for partitioned cookies (CHIPS), which are set with partitioned and secure cookie attributes.
\nIf you’re using an external identity provider for your application, CHIPS is a good option to supplant third-party cookie restrictions.
\nHowever, CHIPS may not be ideal if you have a web SSO or federated SSO implementation. It creates separate partitioned cookies for each application with a separate domain, which can increase complexity and create compatibility issues.
\nWith Storage Access API, you can access the local storage in a third-party context through iframes, similar to when users visit it as a top-level site in a first-party context. That is, it gives access to unpartitioned cookies and storage.
\nStorage Access API requires explicit user approval to grant access, similar to locations, camera, and microphone permissions. If the user denies access, unpartitioned cookies and storage won’t be accessible in a third-party context.
\nIt is most suitable when loading cross-site resources and interactions, such as:
\nVerifying user sessions when allowing interactions on an embedded social post or providing personalization for an embedded video.\nEmbedded documents requiring user verification status to be accessible.
\nAs it requires explicit user approval, it is advisable to use Storage Access API when you can’t implement an identity use case with the other options.
\nWith Related Website Sets, you can declare a primary website and associatedSites for limited purposes to grant third-party cookie access and local storage for a limited number of sites.
Chrome automatically recognizes related website sets declared, accepted, and maintained in this open-source GitHub repository: Related Website Sets
\nIt provides access through Storage Access API directly without prompting for user approval, but only after the user interacts with the relevant iframe.
\nIt is important to declare a limited number of domains in related website sets that are meaningful and used for specific purposes. Google may block or suspend any exploitative use of this feature.
\nThe top-level site can also request approval for specific cross-site resources and scripts to Storage Access API using resuestStorageAccessFor() API.
If you’re using an external identity provider for your web application, you can declare the domain of the identity provider in the related set to ensure limited third-party cookies and storage access to the identity provider, thus ensuring seamless user authentication.
\nRelated Website Sets can also work to supplement third-party cookie restrictions in web SSO and federated SSO if the number of web applications (or domains) is limited.
\nFedCM API enables federated SSO without third-party cookies.
\nWith FedCM API, a user follows these steps for authentication:
\nYou can access a user demo of FedCM here: FedCM.
\nFor more information about implementing federated SSO with FedCM API, go through the FedCM developer guide.
\nFirstly, we’re committed to solving our customers' user identity pain points — and preparing for the third-party cookies phase-out is no different.
\nWe’ll implement the most relevant and widely useful solutions to facilitate a smooth transition for our customers.
\nPlease subscribe to our blog for more information. We’ll update you on how we help with the third-party cookie phase-out.
\nThe proposed changes to phase out third-party cookies and suggested alternatives are evolving as Google has been actively collaborating and discussing changes with the border community.
\nMoreover, browsers like Firefox, Safari, and Edge may approach restricting third-party cookies differently than Google does.
\nFrom LoginRadius, we’ll keep you updated on what we’re doing as a leading Customer Identity and Access Management (CIAM) vendor to prepare for the third-party cookie phase-out.
\nTop-level site: It is the primary site a user has visited.
\nFirst-party cookie: A cookie set by the top-level site.
\nThird-party cookie: A cookie set by a domain other than the top-level site. For example, let’s assume that a user has visited a.com, which might use an embed from loginradius.com to facilitate authentication. If loginradius.com sets a cookie when the user visits a.com, it is called a third-party cookie as the user hasn’t directly visited loginradius.com.