![\"snippet-demo\"](\"/3e21aab686b29a54a248ccd545aca465/snippet-demo.gif\")
Authentication systems are the backbone of many websites. It allows users to log in to your site and preserving data between visits. It is crucial in offering a robust user experience, which rewards your users for providing their details. Authentications often provide access to personal private data which if made public, it could harm your user. To prevent these, authentication protocols were created to secure the requests while allowing users to still safely login to your system from any environment.
\nBasic SSL Auth
\nBasic auth is the simplest form of web authentication. It utilizes standard HTTP headers in place of more complicated solutions that rely on cookies, session identifiers, and login pages. There is very little security built into the basic auth system. Credentials are transmitted with only Base64 encoding and are not encrypted or hashed. Due to the ingrained insecurities in the system, these requests are most often made via HTTPS.
\nThe authorization information should be compiled into the following format and included in the header:
\nFormat:
\n<!--Authorization: Basic -->Full details on the Basic Authentication protocol can be found here: Authentication Protocol
\nDigest Auth
\nDigest Auth works similar to basic SSL authentication with the exception that the password is encrypted using a one-way hash. It utilizes MD5 cryptographic hashing with a nonce(a server-generated value that prevents replay attacks).
\nThe typical flow of a Digest Auth request is :
\nYou can find full details on the Digest Auth protocol can be found here: Digest Auth Protocol
\nOAuth 1.0
\nThe OAuth 1.0 protocol relies on having a shared secret between the server and the site. This shared secret is used to generate a signature that is included in the request. The generated signature is used to verify the validity of the authentication request on the server-side. The process for authorizing the user is generally handled in three steps (3-legged OAuth):
\nThe process of completing a 3-legged OAuth request will generally be handled as follows:
\nThe site will send a signed request for the Request token. This request should contain the following parameters:
\nThis request will be validated on the server. If validated, it will return the request token in the following format:
\nThese will be used in the next step to retrieve an access token.
\nThis will return you an access token to be used in conjunction with your secret in order to make requests for information from the server.
\nYou can find full details on the OAuth 1.0 protocol here: OAuth 1.0 protocol
\nOAuth 2.0
\nThis is similar to the OAuth 1.0 protocol, it relies on a client id and secret in order to format request, but simplifies much of the complicated signing process that is inherent in the OAuth 1.0 system. The process for authorizing a user using the 3-legged OAuth 2.0 protocol is as follows:
\nUser is directed to the service for authorization with the following details included in the authorization URL:
\nThe user would then authenticate with the service and grant the application access to their details. On successful authentication, the user is redirected back to the redirect_uri with the following parameters:
\nThe code returned in step 2 is then used by the application to make a request for an access token. Included in this request should be:
\nThe server will verify these details and then return an access token with an expiration time if they are valid. These get generally returned in the following format:
\nYou can find full details on the OAuth 2.0 protocol here: OAuth 2.0 protocol
\nAuthentication protocols allow you to secure your data with varying levels of security. Depending on the data being accessed and your desired level of security, implementing one of the above protocols allows you to be confident that your data is safe and can only being accessed by users that are permitted to your system.
\n","frontmatter":{"date":"December 01, 2015","updated_date":null,"description":null,"title":"Website Authentication Protocols","tags":["Authentication","Oauth"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5625,"src":"/static/2777d4b53aa6128513f070b7f78f3651/ee604/server-proc-150x150.png","srcSet":"/static/2777d4b53aa6128513f070b7f78f3651/69585/server-proc-150x150.png 200w,\n/static/2777d4b53aa6128513f070b7f78f3651/497c6/server-proc-150x150.png 400w,\n/static/2777d4b53aa6128513f070b7f78f3651/ee604/server-proc-150x150.png 800w,\n/static/2777d4b53aa6128513f070b7f78f3651/f3583/server-proc-150x150.png 1200w,\n/static/2777d4b53aa6128513f070b7f78f3651/5707d/server-proc-150x150.png 1600w,\n/static/2777d4b53aa6128513f070b7f78f3651/6e0a6/server-proc-150x150.png 2256w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}},{"node":{"excerpt":"1. Nim Game Click to View Original Question This question is very easy once you figure out the trick behind the game.\nSince each time you…","fields":{"slug":"/engineering/nim-game-add-digits-maximum-depth-of-binary-tree/"},"html":"Click to View Original Question
\nThis question is very easy once you figure out the trick behind the game.\nSince each time you can only pick 3 stones at most, if there are 4 stones originally on the table, no matter how many you take ... your hopefully non-stupid friend can easily beat you. The same logic also applies when the number of stones is more than 4.
\n/**\n* @param {number} n\n* @return {boolean}\n*/\nvar canWinNim = function(n) {\n return n % 4 === 0 ? false : true;\n};2. Add Digits
\nClick to View Original Question
\nThis is a tricky question, the key is trying to find the repetitive pattern of the Digits Sum. If you can't get the pattern by observation then we can do some math to find the pattern.
\nSo assume we have a 4 digit number \"abcd\" or 1234, and we want to find out the sum of the digits which in expression is:
\nvar digitSum = a + b + c + d
\nWe still can't figure out the answer from this alone, so we need to find something else to help us to get the value. Then we can consider the actual value of \"abcd\" = 1000a + 100b + 10c + d.
\n- If you're familiar with Ring Theory (pretty sure it's Ring Theory.. I could be wrong..) then perfect! Under Ring 9, the actual value of abcd === a + b + c + d.\n- And if you don't know about Ring Theory, think of this as getting the remainder of \"abcd\" divided by 9
\n> (1000a + 100b + 10c + d) % 9 => (999a + a + 99b + b + 9c + c + d) % 9 => a + b + c + d
\nSo whatever the reminder is equals to the sum of the digits and that is more than enough information to solve the question.
\nBe careful with the number 0 !!
\n/**\n* @param {number} num\n* @return {number}\n*/\nvar addDigits = function(num) {\n if (num === 0) return num;\n return num % 9 === 0 ? 9 : num % 9;\n};3. Maximum Depth of Binary Tree
\nClick to View Original Question
\nThis is very typical of recursion problems, and recursion is always hard to explain in words
\n(╯‵□′)╯︵┻━┻
\nRegardless I will try my very best to describe it.
\n1. You have a tree node, and check if it is an empty tree, if so return 0\n2. If it is not empty, use recursion to find the value\n3. The recursion will start with the left node of root, and iterate through the tree, and keep checking the depth of each node till reaching out to the leaves. Each node (small root) records its maximum depth value by a record count called \"\"currentLength\"\".\n4. Until the whole tree is traversed, the root will compare its leftLength and rightLength and return the answer!
\n rightLength ? leftLength : rightLength;\n return rootLength;\n}-->As a preface to this article: preprocessors can be used for a variety of file types, but this article is going to focus solely on CSS preprocessors. Additonally I'm going to try and avoid my personal bias and give a very generic description of CSS preprocessors rather than my preferred preprocessor.
\nFirst off what is a preprocessor? To give you a simple analogy think of speaking with someone, in a language you understand, who has a strong accent or is speaking in a different dialect. They're technically speaking the same language as you, but actually understanding what they're saying can be next to impossible.
\nIn the context of CSS, the \"normal\" or unaccented language would be CSS and the accented version would be the preprocessor! What this means in practice is that you're writing out expressions that resemble standard CSS, but with some very distinct differences with regards to its syntax.
\nAs with regular spoken language, there's not a whole lot we can do with something we can't understand. Luckily there are translators, and the same is true of preprocessors. The preprocessor code can be processed (there are a number of different ways to accomplish this), and then out pops an understandable standard-syntax CSS file ready to be used.
\nNow why would we want to write CSS in some weird way you might ask? An excellent question! Because our nonsense can be translated into regular CSS, this allows us to write some very robust and even dynamic CSS expressions.
\nWith preprocessors we've got a bundle of features now available to be used along with all the standard CSS rules we're accustomed to writing.
\nTo name a few features supported by preprocessors we've got: functions, mixins, math, variables, operators, conditionals, iteration and more to help you be more organized and write less overall.
\nVariables increase your maintainability drastically by making it so you only have to change a value in one place to affect it everywhere it was used. Imagine for example you want to add a Halloween theme to your site's colors.
\n.elementOne {\n background-color: orange;\n}\n.elementOne p {\n color: black;\n}\n.elementTwo {\n background-color: orange;\n}\nh3 {\n color: black;\n}\na:hover {\n color:orange;\n}Changing them back would require you to go and change each instance of black or orange. However; with variables you can do something like this.
\n$theme-color-1: orange;\n$theme-color-2: black;\n \n.elementOne {\n background-color: $theme-color-1;\n}\n.elementOne p {\n color: $theme-color-2;\n}\n.elementTwo {\n background-color: $theme-color-1;\n}\nh3 {\n color: $theme-color-2;\n}\na:hover {\n color: $theme-color-1;\n}Define the value of the variable in one place, and everywhere it gets used will be a reference to that value. Want to change all instances of black back to grey? Just change the variable definition and you're done.
\nAnother one of the biggest features would be functions. With these you can set up one well written function definition and then sit back and let it do all the heavy lifting for you!
\nFunctions combined with math, variables, iteration, and conditionals allows you to write some very dynamic style rules. Think of sprite sheets where the value of the background position is being incremented with each statement. Instead of writing out each one by hand, make a function that uses math and iteration to change the background position.
\nThat's a very simple example, but I've seen some truly impressive and complicated designs created with the use of functions!
\nOne of my favorite features of preprocessors are the new selectors. The parent reference (&) allows you to group your rules so that everything pertaining to a specific element can be grouped together nicely.
\n.someElement {\n some-rule: some-value;\n &:hover {\n color: some-color;\n }\n}Compiles to...
\n.someElement {\n some-rule: some-value;\n}\n.someElement:hover {\n color: some-color;\n}The parent selector takes whatever follows it immediately and tacks it on to the parent that it is nested under. In this case hover will be appended to .someElement. Another great one to check out is the root reference!
\nCSS's default format is ugly as sin. An endless tide of barely indented rules, hopefully organized in some meaningful way. With CSS preprocessors nesting is an awesome feature that helps your rules become more intuitive/logically grouped and increases readability. Nesting can give your CSS a much more distinct visual hierarchy not unlike HTML.
\n.someElement {\n some-rule: some-value;\n .someOtherElement {\n some-rule: another-value\n }\n}Compiles to...
\n.someElement {\n some-rule: some-value;\n}\n.someElement .someOtherElement {\n some-rule: another-value;\n}Full disclosure, your resulting CSS file will still likely look like someone dropped their bowl of Alphaghetti in their bowl of Alphabits and then threw that bowl at a wall. However; the file you actually work in will be considerably prettier, and that's all we care about.
\nSome people have beef with preprocessors because of over done selectors which are a result of going a little too hard with nesting. An easy way to avoid this is by limiting your nesting to 3 levels deep. Any further than that gets pretty ugly, but hey I'm not your supervisor... if you feel it's necessary then you do what you gotta do.
\nNow depending on how you choose to have your preprocessor code processed these features may or may not be more/less accessible. That being said I still feel they are worth mentioning.
\nAuto updating the page you're working on is a small perk but I remember being quite happy to find out I could just save my project and not have to spam F5 like my little sister trying to buy front row Justin Bieber tickets online. Just save and it will update your project automatically.
\nAnother one is vendor prefixes. There are a handful of ways to stop writing these things out by hand each time. Whether it's via mixins, functions or a built in feature of the processor itself you can avoid writing out these dreadfully monotonous prefixes for good.
\nAt first it might seem like a bunch of new stuff you have to learn and implement... but really if you already know CSS you're over halfway there. All you need to do is learn the specific syntax and familiarize yourself with the new features available to you with the preprocessor of your choice. It's a gentle learning curve with a surplus of benefits to integrate preprocessors into your workflow.
\nThis article is by no means all encompassing, but rather a sampler to create enough interest to try it out and learn more about preprocessors.
\nOn that note there are resources for comparing the preprocessors as well as trying them online. Each one has its own perks so try 'em out and find the one that fits your style!
\n","frontmatter":{"date":"November 17, 2015","updated_date":null,"description":null,"title":"The truth about CSS preprocessors and how they can help you","tags":["CSS"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/06a5f244323a7617c371dd411e68c861/6d161/desdev-150x150.png","srcSet":"/static/06a5f244323a7617c371dd411e68c861/6d161/desdev-150x150.png 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Zakary Hughes","github":null,"avatar":null}}}},{"node":{"excerpt":"In this blog, I will cover some of my favorite Sublime features. Use of these plugins will dramatically reduce the amount of tedious tasks…","fields":{"slug":"/engineering/beginners-guide-for-sublime-text-3-part-2/"},"html":"In this blog, I will cover some of my favorite Sublime features. Use of these plugins will dramatically reduce the amount of tedious tasks you have to perform, and make your worktime really fun. I will start with some of the most basic features that come with fresh installation of Sublime. There are lots of good tutorials on Sublime shortcuts and plugins on the internet, but I feel there should be more about these fundamental features. I have seen many people who are familiar with the plugins but not with these cool built-in features. In this article we will be introducing \"Snippets\", \"Project\" and \"Macros\".
\nHere we go:
\n
Back when i introduced Sublime editor to my friends,\"Snippets\" was among the first few features which really intrigued them. To give a quick peek what a snippet looks like:
\nThis is definitely the feature you will use the most! To start using snippets, you can either create your own snippets according to your needs or download some ready-made snippets created by others to fulfill some generic coding needs. Like the one I demonstrated, it is pre-made from a plugin called Html Page Snippets, and command docjq will create a boiler template for a Html page that contains bootstrap and jQuery.
To create your own snippet, go to \"Tools\" => \"New Snippet\", an interface to create your own snippet will pop up, it would look something like this:
\nHello, ${1:this} is a ${2:snippet}.Note: The dollar sign \"$\" allows you to use tab key to jump between, so set it wisely!
\nNow save it, but keep in mind putting it in the correct location is important!
\nIf you can not find it, go to \"Sublime\" - > \"Preferences\" -> \"Browse Packages\", and create a folder called \"User\" if there isn't one already, and save it there.
\nUsing \"Project\" feature to organize your projects is super easy and handy. It saves a lot of time that you'd normally waste finding different folders and then dragging and dropping to your Sublime each time. Additionally, it saves your previous location so you can just pick up where you left off. Let's see a quick demo:
\nSaving and using your projects is very straightforward.
\nThen go to the menu, click \"Project\" -> \"Save Project As\"
\nThat's it! You're done! Super easy right?
\n![\"without-macro\"](\"/e8a218bdc92e2c8c118faeb6fec384e0/without-macro.gif\")
Do you always feel frustrated by repeating the same tedious task again & again? Hmm... at least that's how I feel when I need to covert a vertical line of data into an array. Tasks like these are pretty common when you need to copy a line of data from spreadsheets. Using shortcuts, the best way I can come up with to accomplish this would be like so:
\nIt takes about 8 shortcuts to finish each process, that's including the first paste action and then adding a space character after each comma. Imagine having to do this for each line of a table, and for every single spreadsheet you have to work on. It would be hundreds of shortcuts you need to press and each time you are just repeating the exact same sequence of keys.
\nStop your macro Similar to other Sublime tools, it will be saved with an extension called \".sublime-macro\", after it gets saved you will be able to find it in your Macro User List. I hope you had fun and learned something new about Sublime. Next time we will cover some really good packages/plugins that you should consider using to make your life and work even simpler.\nHappy coding!!! In order to display your LoginRadius Login Interface in a pop-up you can leverage Jquery-ui which is a well documented, easy-to-use library that allows you to handle some common functionality such as pop-up dialogs and other UI features. In this article we go over the steps to use Jquery-ui to display a pop-up on your page with a LoginRadius login interface using the LoginRadius HTML SDK. 1. Get the required references this guide relies on: Jquery and Jquery-ui. You can include the hosted reference files in the header of your page: 2. Include the LoginRadius Interface Javascript and HTML5 SDK reference: 3. Create the HTML structure for your page. Below we have created a button to trigger our pop-up display as well as the dialog container that will be displayed in the custom pop-up which is hidden by default. We have also included a div to display profile data after successfully authenticating. 4. Create a JavaScript function to handle the display of the pop-up dialog. The below function utilizes Jquery-ui functions to display the dialog and the LoginRadius login interface initialization function to render the login interface on the popup: 5. Include the JavaScript callback script to handle a successful authentication and display the profile data. Full Example: Almost every active website worldwide uses jQuery, you can check stats here , but using it without optimization might make the DOM very slow. The same goes for other javascript libraries, such as SizzleJS. To ensure the performance of your DOM, you have to follow some best practices for it. In this article I am going to list down some of the most critical factors that you need to watch out. Even though this not a complete list; taking care of these will help you optimize those jQuery Selector. Whenever you apply any selector in jQuery or SizzleJS, the selector engine goes through the whole DOM to find the specified element. For example, if you use the code below, it will go through the whole DOM twice in order to find \".myClass\" selector. But instead of that, if you make all the methods in a chained format like this. It will only try to find that class once. Or if you want to use this element in other places; you can do so by doing it in this way. In both of these cases, the selector will be executed only once. Some selectors are very slow to traverse and passing them again and again will make your DOM very slow. Read on the next point to understand, how the type of selector affects performance. Selector's type affects the performance of your site. SizzleJS is a smart selector engine that also uses native js APIs for finding specific element. This is the main reason why ID selector and tag selector perform faster than others. But, if you prefer using jQuery, it’s pretty much the same. Modern browsers also have an API to find an element by class name but, let’s just focus on jQuery and SizzleJS. You can verify performance. In some exceptional cases, the selection of those tags does not matter; It’s all in the combination of the selectors. Because, it affects the performance of your site, let's discuss this on next point. If you have the combination of selectors, then the sequence of selectors matter for optimization. For example: The same code can be written as: Both of these variant represent the same thing but in the term of performance, second one is better. The reason for that is because in the first code, Sizzle will go through the DOM 3 times to find #someId, div, and .someClass. In the second one, the selector engine will go through the DOM again but, this time, it’ll only look for #someId and then find the rest inside that element without going through the DOM again. See how this will affect performance. Sizzle executes selector from right to left so it will definitely improve performance if applied in right except left. Unoptimized code: Optimized code: If you don’t see the difference, find the div and td. When you have a context, or any level of parent, then you can select an element inside that parent. It will perform better this way than selecting it directly. Because, in this case, the selector engine goes through the DOM once to find the parent. For example, assuming you are trying to find “.child” class: Is slower than You can also specify context by following syntax The selector engine always checks every selector you have specified and it might traverse slowly. That being said, always make sure to specify minimum selectors in order to maintain the performance. For example, you are trying to find “.myClass” using both of these code variants, Is slower than The .children() tag is quicker than .find() In case, you are trying to find a children element, it is recommended to use .children() instead of .find(). Using .find() will tell jQuery to look on every level of children, while .children() will find only the first level children. Therefore .children() is faster than .find(). For example, you are trying to find “.child” inside $parent and it is the first level children of the $parent. Is slower than Use minimum DOM append DOM manipulation is very heavy so always try to ignore or minimize using it. For example, by using the code below, it will make the process sluggish because you didn’t apply any selector caching. Resulting in going through the DOM ten times and appending an element. But instead of using the above code, using the code below will solve the whole issue of appending and traversal. Not only that, it will merge the 10 times manipulation of DOM into a single call. All the tips I have mentioned above is highly dependant on your requirement but one thing is for sure; Optimization will definitely improve your process. ‘SizzleJS’ is most the powerful and quick element selector. But, without writing optimized code you can’t prevent the DOM from freezing. With that being said, jQuery is awesome but without optimized code it can get more DOM freezes and frustrate your users. I hope this help you optimize your element selecting. Thank you and have a great coding. 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. What does it mean for user authentication? On 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). On 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. In this article, we’ll discuss: Third-party cookie restrictions affect user authentication in three ways, as follows. If 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. If 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. If 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. For example, you have apps at 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. Usually, 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. For 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. Note: 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). Google has been developing alternative features and capabilities for Chrome to replace third-party cookies as part of its Privacy Sandbox for Web initiative. Specific to authentication, Google recommends the following: CHIPS 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. For example, a user visits If the user visits You should specifically opt for partitioned cookies (CHIPS), which are set with partitioned and secure cookie attributes. If you’re using an external identity provider for your application, CHIPS is a good option to supplant third-party cookie restrictions. However, 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. With 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. Storage 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. It is most suitable when loading cross-site resources and interactions, such as: Verifying 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. As 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. With Related Website Sets, you can declare a Chrome automatically recognizes related website sets declared, accepted, and maintained in this open-source GitHub repository: Related Website Sets It provides access through Storage Access API directly without prompting for user approval, but only after the user interacts with the relevant iframe. It 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. The top-level site can also request approval for specific cross-site resources and scripts to Storage Access API using 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. Related 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. FedCM API enables federated SSO without third-party cookies. With FedCM API, a user follows these steps for authentication: You can access a user demo of FedCM here: FedCM. For more information about implementing federated SSO with FedCM API, go through the FedCM developer guide. Firstly, we’re committed to solving our customers' user identity pain points — and preparing for the third-party cookies phase-out is no different. We’ll implement the most relevant and widely useful solutions to facilitate a smooth transition for our customers. Please subscribe to our blog for more information. We’ll update you on how we help with the third-party cookie phase-out. The 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. Moreover, browsers like Firefox, Safari, and Edge may approach restricting third-party cookies differently than Google does. From 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. Top-level site: It is the primary site a user has visited. First-party cookie: A cookie set by the top-level site. Third-party cookie: A cookie set by a domain other than the top-level site. For example, let’s assume that a user has visited \n
\n
\nTo Be Continued ..
\n
\n<!--\n\n-->
\n<!--\nvar options={};\noptions.login=true;\nLoginRadius_SocialLogin.util.ready(function () {\n $ui = LoginRadius_SocialLogin.lr_login_settings;\n $ui.interfacesize = "";\n $ui.apikey = "";\n $ui.callback="";\n $ui.lrinterfacecontainer ="interfacecontainerdiv";\n LoginRadius_SocialLogin.init(options);\n});\n-->
\n<!--Login\n\n \n\n -->
\nfunction Login(){\n $( "#dialog" ).dialog();\n LoginRadius_SocialLogin.init(options);\n}
\nLoginRadiusSDK.setLoginCallback(Successfullylogin);\nfunction Successfullylogin(){\n LoginRadiusSDK.getUserprofile( function( data) {\n $( "#dialog" ).dialog("close");\n document.getElementById("profile").innerHTML = JSON.stringify(data);\n });\n}
\n","frontmatter":{"date":"November 09, 2015","updated_date":null,"description":null,"title":"Displaying the LoginRadius interface in a pop-up","tags":["HTML","Login","UI","LoginRadius Interface"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/af7b348bc73adfcd737b8df292359566/6d161/simplepop-150x150.png","srcSet":"/static/af7b348bc73adfcd737b8df292359566/6d161/simplepop-150x150.png 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}},{"node":{"excerpt":"Almost every active website worldwide uses jQuery, you can check stats here , but using it without optimization might make the DOM very slow…","fields":{"slug":"/engineering/optimize-jquery-sizzle-element-selector/"},"html":"<!--\n\n\n\n\n var options={};\noptions.login=true;\nLoginRadius_SocialLogin.util.ready(function () {\n$ui = LoginRadius_SocialLogin.lr_login_settings;\n$ui.interfacesize = "";\n$ui.apikey = "";\n$ui.callback="";\n$ui.lrinterfacecontainer ="interfacecontainerdiv";\nLoginRadius_SocialLogin.init(options); }); \n\n\n \nfunction Login(){\n $( "#dialog" ).dialog();\n LoginRadius_SocialLogin.init(options);\n}\n \nLoginRadiusSDK.setLoginCallback(Successfullylogin);\nfunction Successfullylogin(){\n LoginRadiusSDK.getUserprofile( function( data) {\n $( "#dialog" ).dialog("close");\n document.getElementById("profile").innerHTML = JSON.stringify(data);\n });\n}\n \nLogin\n \n\n \n-->Let's start!
\nAlways cache your selector
\n
\n$(".myClass").show();\n\n$(".myClass").addClass("anotherClass");
\n$(".myClass").show().addClass("anotherClass");
\nvar myElem = $(".myClass");\n\nmyElem.show();\n\nmyElem.addClass("anotherCLass");Prioritizing selectors based on their performance
\n\n
\nSelecting ID selector first and then other ones
\n
\n$("#someId div .someClass");
\n$("#someId").find("div .someClass");Being more specific in right hand side instead of left hand side
\n
\n$( "div.myclass .myChildClass" );
\n$( ".myclass td.myChildClass" );Selection inside a parent always improves performance
\n
\n$(".child");
\nvar parent = $("#parent");\n\nparent.find(".child").show();
\n$(".child", parent).show();Excessive selector slows down your query
\n
\n$("#div div span.myClass");
\n$("#div").find(".myClass");\n
\nparent.find(".child");
\nparent.children(".child").show();\n
\nfor( var i = 0; i < 10; i++) {\n $(".myClass").append("");\n}
\nvar myClassInnerHtml = "";\nfor( var i = 0; i < 10; i++ ){\n myClassInnerHtml += "";\n}\n$(".myClass").append(myClassInnerHtml);\n
\nHow is User Authentication Affected?
\nExternal Identity Providers
\nWeb SSO
\nexample.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
\n\n
\nChrome’s Alternatives for Third-Party Cookies
\n\n
\nCookies Having Independent Partitioned State (CHIPS)
\na.com with a map embed from map-example.com, which can set a partitioned cookie that is only accessible on a.com. 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.Storage Access API
\nRelated Website Sets
\nprimary website and associatedSites for limited purposes to grant third-party cookie access and local storage for a limited number of sites.resuestStorageAccessFor() API.Federated Credential Management (FedCM) API
\n\n
\nHow is LoginRadius Preparing for the Third-party Cookie Phase-out?
\nIn Conclusion
\nGlossary
\na.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.References
\n\n","frontmatter":{"date":"July 08, 2024","updated_date":null,"description":"Google Chrome has planned to phase out third-party cookies, which will affect different website functionalities depending on third-party cookies. This blog focuses on how this phase-out affects identity and user authentication and discusses alternatives for overcoming challenges.","title":"How Chrome’s Third-Party Cookie Restrictions Affect User Authentication?","tags":["Identity","Cookies","Chrome"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png","srcSet":"/static/eb7396060c0adc430dbed2d04b63d431/69585/third-party-cookies-phaseout-chrome.png 200w,\n/static/eb7396060c0adc430dbed2d04b63d431/497c6/third-party-cookies-phaseout-chrome.png 400w,\n/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png 800w,\n/static/eb7396060c0adc430dbed2d04b63d431/f3583/third-party-cookies-phaseout-chrome.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Raghunath Reddy","github":"raghunath-r-a","avatar":null}}}},"pageContext":{"limit":6,"skip":264,"currentPage":45,"type":"//engineering//","numPages":52,"pinned":"17fa0d7b-34c8-51c4-b047-df5e2bbaeedb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}