![](\"/ee2d9bd3978930dc685480ceac45286e/blog-aws-lambda-sqs-1.webp\")
This blog is a short guide on implementing AWS Lambda and SQS together. First we’ll introduce these technologies and explain why they work well together, then walkthrough some configurations and invocation using a simple Nodejs script.
\n
What are they?\nAWS Lambda is a popular choice in serverless computing. As an event-driven platform, AWS Lambda requires users to configure event sources in order to run a function. Their built-in support for many AWS services like S3 and SQS as event sources allow for relatively simple configuration. Note that Lambda functions can also be triggered via HTTP(S) by using AWS API Gateway service.
\nAWS SQS (Simple Queue Service) is a queue service with 2 types: standard and FIFO. The major difference is that standard queues guarantee “at-least once” delivery of its messages, while FIFO queues guarantee “exactly-once” delivery. FIFO queues, however, provide lower maximum throughput than standard.
\nAs previously mentioned, AWS SQS can be an event source for AWS Lambda. This means that when a message is added to the queue, the configured Lambda function will be invoked with an event containing this message.
\n![](\"/5e7303903f14f7a18b0b90dd5b9a194f/blog-aws-lambda-sqs-2.webp\")
But why use them together?
\nCommon reasons include better handling Lambda function invocations and errors. For function invocations, the default concurrency limit is 1000. If a function has reached this limit, any additional invocations will fail with a throttling error. However, with SQS as an event source, events resulting in throttling errors are automatically retried based on set configs. This prevents the loss of events due to unexpected jumps in usage. Additionally, dead-letter queues (DLQ) can be configured as a place where failed events go, to avoid retrying indefinitely. Failed events in DLQ can then be sent somewhere like a DB for analysis.
One limitation for many use cases was the “at-least once” delivery model of events with standard queues. Essentially, there was no guarantee that an event will only be delivered once to a consuming Lambda function. In cases where each event can strictly only be processed once, one would have to employ various strategies resulting in higher overhead and complexity. But, this is no longer an issue because recently the AWS team added support for FIFO queues as event sources to Lambda functions.
\nWalkthrough
\nLet’s set up a basic “Hello World” application with SQS and Lambda.
1. Starting with SQS, add a standard queue.
\n2. Now, add a Lambda function:
\n![](\"/ef2b599ea14dbf5ffd11d05abefad149/blog-aws-lambda-sqs-3-1024x447.webp\")
3. Create a new execution role with the following configs:
\na. Trusted Entity: Lambda
\nb. Permissions: AWSLambdaBasicExecutionRole; AWSLambdaSQSQueueExecutionRole
![](\"/5362ac9bedede42c761b07d67c387ed2/blog-aws-lambda-sqs-4.webp\")
4. Use newly created role in Lambda function. Remember to save (top right).
\n![](\"/b722125958d83a73928cc26a9b9abfb0/blog-aws-lambda-sqs-5.webp\")
5. Add a trigger:
\na. Batch size set to 1, so the Lambda Function will process 1 message at a time.
![](\"/09222801a7c08c6f77517d32730b5b95/blog-aws-lambda-sqs-6.webp\")
6. Programmatically enqueue a message into SQS with the following code in Nodejs:
\nconst AWS = require("aws-sdk");\nAWS.config.update({\n region: <AWS_SQS_REGION>, // TODO\n accessKeyId: <AWS_ACCESS_KEY_ID>, // TODO\n secretAccessKey: <AWS_SECRET_ACCESS_KEY> // TODO\n});\n\nconst sqs = new AWS.SQS({ apiVersion: "2012-11-05" });\nsqs.sendMessage({\n MessageBody: JSON.stringify({hello: "world"}),\n QueueUrl: <AWS_SQS_URL> // TODO\n}, (err, data) => (err) ? console.log("Error", err) : console.log("Success", data.MessageId));a. Create package.json with `npm init`
\nb. Install aws sdk dependency with `npm i aws-sdk --save`
\nc. Fill in your specific AWS account details. Find AWS_SQS_URL by selecting the queue you created, while AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY require creating a new IAM user with programmatic access. This user also needs permission to push messages into SQS.
\nd. Run script with `node app.js`
\ne. Navigate to Monitoring tab in your Lambda function, the invocations graph should have a new data point (may take a few minutes to update).
![](\"/9fb817ec026be608972f6f9df8836011/blog-aws-lambda-sqs-7.webp\")
Overview
\nThe “reconciliation” algorithm in React is how the decision to re-render the component is made. In the browser, DOM manipulation is expensive and time consuming, both in mounting and unmounting. Part of what makes React very performant is its reconciliation algorithm.
\nIn short, it watches closely for differences, and only updates the DOM when necessary and tries to update only the parts which need to be changed.
\nThe “Virtual DOM”
\nThe Virtual DOM is a theoretical DOM tree generated by React when a change is made to a component’s state. This is modeled after the state of your application upon modification of the state, for example, after calling this.setState(). React uses what is called a “snapshot” to make this comparison and analysis between the DOM before the update, and the DOM after. This is the point in time when React utilizes its reconciliation algorithm.
\nUpdating the Virtual DOM is much faster than the real DOM, since the browser doesn’t need to show a visualization of it.
\nHow updates are determined
\nThe reconciliation algorithm is run whenever the component level state is updated. It analyzes the current DOM with the Virtual DOM, in order to determine which changes need to be made to the real DOM. After this step, it has determined which DOM nodes on your application require updates, and it calls the render method.
\nEffect on DOM elements and their attributes
\nThe reconciliation algorithm does not only look at whole DOM elements, it also looks at individual attributes. You can think of the difference as a PUT request vs. a PATCH request, where it only updates the parts which have changed, rather than updating the entire object if there was a change.
\nWhile it doesn’t unmount and remount the entire element if it doesn’t have to, sometimes it does have to. An example of this would be if you render an element of a different type.
\nSuppose you wanted to switch between two components or elements, perhaps for conditional rendering. This would result in a full unmounting of the component, regardless of whether or not they contain the same child nodes.
\nThis differs from switching attributes on the same type of elements, an example of which might be dynamic class names, based on component state. In this scenario, the DOM element is not destroyed, and only the modified attributes are changed. This is useful because it performs minimal operations on the DOM, which as we know, is more resource-intensive than standard object operations.
\nKeys and rerenders
\nThe \"key\" attribute in React can be used to mark whether or not a DOM node is stable. You may have seen a message in the console if you’ve ever attempted to map over a collection and return a JSX element each iteration. This is because the reconciliation algorithm uses the keys to determine if the content has changed, and not including a key may cause unexpected behaviour. For this reason, the keys should be unique so that reconciliation can recognize and identify which elements are stable, and which elements are not.
\nSuppose that you have a list of items, which is derived from an array. If you were to splice an item into the middle of it, that will change all of the indices of the subsequent items. In this scenario, since the keys will not be a stable, unique representation of each item, React can end up mutating the unintended item, which can cause major bugs.
\nA detailed explanation of keys can be found on the official React docs:
\n\n\nFor an in-depth exploration of how and why reconciliation was implemented, please visit the official React docs:
\n\n","frontmatter":{"title":"React's Reconciliation Algorithm","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"December 03, 2019","updated_date":null,"tags":["React"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":2.2988505747126435,"src":"/static/3b049b298332c75b5f5768c066fe56fa/58556/react-fiber.webp","srcSet":"/static/3b049b298332c75b5f5768c066fe56fa/61e93/react-fiber.webp 200w,\n/static/3b049b298332c75b5f5768c066fe56fa/1f5c5/react-fiber.webp 400w,\n/static/3b049b298332c75b5f5768c066fe56fa/58556/react-fiber.webp 800w,\n/static/3b049b298332c75b5f5768c066fe56fa/e30b5/react-fiber.webp 1000w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/reacts-reconciliation-algorithm/"}}},{"node":{"id":"af623550-ef1d-58c6-8038-d12c7323e99d","html":"This blog post goes over how you can connect your SAAS/web application with the Azure AD world. Let’s take a look at how Azure AD works as an identity provider to provide your users with the ability to log in. e.g if anyone using Office 365, able to log on with their standard account or a federated one.
\nWindows Azure provides a number of identity-based technologies to support such kind of requirements. As a means of illustrating this, we’ll show an example using Azure AD as an Identity Provider (IdP), connecting up to the LoginRadius SAAS application using the LoginRadius Admin Console.
\n![](\"/d5a14d88388c9686e4de16d8a8538bb6/1.webp\")
![](\"/3d600c1deb640722cc1b96d6334abba2/2.webp\")
![](\"/9678949d8b19c52a1fa38ba8e896e458/A-1.webp\")
Here are the meanings of the terms, we have used above:
\nSign-On Url: This is where you want to send users to when accessing the \"application\".
\nReply URL: It's the Reply URL which is the address to which Azure AD will send the SAML authentication response.
\nOn the Service Provider side, the metadata from the tenant, Azure Identity Provider needs to be parsed and added to the configuration file. This is done by downloading the Azure IdP metadata file directly, e.g.
\nhttps://login.microsoftonline.com/<AzureTenantID>/federationmetadata/2007-06/federationmetadata.xml
This is all you need to know to go about creating a new application on the Azure portal and use Azure Ad as an Identity provider for login. With these and a number of services, Azure offers a solid convergence point for brokering connections with your web applications and workspaces.
\n","frontmatter":{"title":"Azure AD as an Identity provider","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"May 30, 2019","updated_date":null,"tags":["Engineering","Authentication","AzureAD"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/cfb639b3060cd188a04597240fb1e37d/a3e81/TN0lxUr0.webp","srcSet":"/static/cfb639b3060cd188a04597240fb1e37d/61e93/TN0lxUr0.webp 200w,\n/static/cfb639b3060cd188a04597240fb1e37d/1f5c5/TN0lxUr0.webp 400w,\n/static/cfb639b3060cd188a04597240fb1e37d/a3e81/TN0lxUr0.webp 512w","sizes":"(max-width: 512px) 100vw, 512px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/azure-ad-as-an-identity-provider/"}}},{"node":{"id":"da86ba01-0b41-5aff-b82b-a74c330bfbfd","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":{"title":"Open Source Business Email Validator By Loginradius","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"April 25, 2017","updated_date":null,"tags":["Engineering"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":0.746268656716418,"src":"/static/a657ff09e846d7d100b0fae0ea7714e9/fa668/Open-Source-Business-Validator-By-Loginradius.webp","srcSet":"/static/a657ff09e846d7d100b0fae0ea7714e9/61e93/Open-Source-Business-Validator-By-Loginradius.webp 200w,\n/static/a657ff09e846d7d100b0fae0ea7714e9/fa668/Open-Source-Business-Validator-By-Loginradius.webp 377w","sizes":"(max-width: 377px) 100vw, 377px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/open-source-business-email-validator-by-loginradius/"}}},{"node":{"id":"b2c44ee4-a8be-5cea-a539-9c7ae8681c59","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.
\n![\"Creating](\"/bd47340195d928fb4ee883951c59b738/Creating-a-simple-pop-up.webp\")
This 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;![\"Creating](\"/4a93f6818c189a0fb1ca01cb37f962ff/Creating-a-timer-based-popup.gif\")
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":{"title":"Know The Types of Website Popups and How to Create Them","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"April 20, 2017","updated_date":null,"tags":["CSS"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/d404c01e7d4da26cf8ec6404c910921c/5239a/The-Ultimate-guide-to-website-pop-ups.webp","srcSet":"/static/d404c01e7d4da26cf8ec6404c910921c/61e93/The-Ultimate-guide-to-website-pop-ups.webp 200w,\n/static/d404c01e7d4da26cf8ec6404c910921c/1f5c5/The-Ultimate-guide-to-website-pop-ups.webp 400w,\n/static/d404c01e7d4da26cf8ec6404c910921c/5239a/The-Ultimate-guide-to-website-pop-ups.webp 560w","sizes":"(max-width: 560px) 100vw, 560px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/the-ultimate-guide-to-website-pop-ups/"}}},{"node":{"id":"7dc6396b-28be-53c9-857e-9745d611ecdd","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.
\n![\"Use](\"/992c71b11d837822cbd06b34a3aa6a64/Use-breakpoints-and-Console-for-Debugging-1.webp\")
Press F11 for next call function and f8 to resume script execution.
\n![\"Use](\"/b8654e35d670696359fad0c72a2cc5e2/Use-breakpoints-and-Console-for-Debugging-2.webp\")
You 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
\n![\"Beautifying](\"/ffb7a1c2536dd770e56424c03482dcb5/Beautifying-JS-code-2.webp\")
Code after Beautifying
\n![\"Beautifying](\"/e10fa72828d50c5d23c2b68009ba432e/Beautifying-JS-code-1.webp\")
To 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":{"title":"Javascript tips and tricks to Optimize Performance","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"April 07, 2017","updated_date":null,"tags":["Engineering","JavaScript","Hacks","Array"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3793103448275863,"src":"/static/0d6472e55ba0b111b3dfa895ec2dec57/7f8e9/16-JavaScript-Hacks-to-save-time-and-boost-productivity-768x555.webp","srcSet":"/static/0d6472e55ba0b111b3dfa895ec2dec57/61e93/16-JavaScript-Hacks-to-save-time-and-boost-productivity-768x555.webp 200w,\n/static/0d6472e55ba0b111b3dfa895ec2dec57/1f5c5/16-JavaScript-Hacks-to-save-time-and-boost-productivity-768x555.webp 400w,\n/static/0d6472e55ba0b111b3dfa895ec2dec57/7f8e9/16-JavaScript-Hacks-to-save-time-and-boost-productivity-768x555.webp 768w","sizes":"(max-width: 768px) 100vw, 768px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/16-javascript-hacks-for-optimization/"}}},{"node":{"id":"4f0874cc-37a2-52c9-b338-18f7a7e1307d","html":"Gone are the days when learning coding or programming was reserved for the geeks or nerds. The case is exactly different nowadays. The latest buzz of “How to code” is here to stay. Making sure that you have little coding knowledge under your belt is proving to be an incredible skill no matter whether you are a marketer or an entrepreneur or a member of any of business team. Talk to any entrepreneur, marketer or freelancer, you will get an idea about learning coding will help you get through. The reasons are more than one! Half of the 2016 is gone, so if you haven’t included this incredible skill in your 2017’s new year resolution, you need to reconsider. Here is why!
\nWith softwares ruling the digital world, the demand of learning coding is becoming must for every professionals in every field whether it is marketing, technology, commerce, finance and what not. As the digital age is making us more and more dependant on computer softwares for business, learning to code has become helpful here. Learn to code is already in the must have technical skills list of 21st century and this demand of technical skills is growing like never before.
\nCoding is problem solving. Coding is no different than the way you can fuel up your car, check the oil and get it serviced by reading the manual you are provided with. But coding takes you a long way ahead. It is beyond these simple things. It teaches you to repaint your car, customize the engine to make it work in the way you want. Hope you got an idea why coding is important and why you should also learn it.
\nYeah, yeah, I know this coding thing is not the only factor behind their success (or should I say making them billionaire), but it didn’t hurt either.
\nBut unlike them, most of us were not gifted with this kind of exposure to the digital world and most of us are still naive to how the world of programming works. Many of the people around are still wondering how to write and combine the long string of code to create a beautiful website, app and more! And trust me you are not alone!
\nBut don’t worry because with so many information available online, you can also master the same. No need to spend a lot of money or put yourself in debt in coding learning, as these resources are definitely going to help you to get through this.
\nPrice - Free but pro-version also available at $19.99/moPro for $19.99/moPro for $19.99/mo
\nCodecademy - Teaching the world how to code, definitely tops my list while talking about the top resources for how to learn programming. Currently owning around 25 million users, one can start learning as soon as he registers himself on the website. They can learn to design websites with HTML, CSS and also customize it with Javascript.
\nThe courses provided are not lecture style but the students actually get to do hands on coding and witness changes real time. Sims, the owner of Codecademy says that the website allows students to learn the coding by providing preview for every line they write immediately instead of watching an instructor. Apart from that, Codecademy also provides students access to QnA forums and groups to learn on topics like Python, Ruby on Rails, Etsy, etc.
\n2. W3schools :
\nPrice : Free
\nW3schools - the largest web developer site, as they define it, provides free tutorials on JavaScript, HTML, CSS, jQuery and what not along with lot of references. So if you want to know what
The website provides tiered subscription plan that allows users to download multiple ebooks too along with the course. The ebook comprises of a huge catalog that comes with different code specifics like Jekyll, Sass, SVG, etc. I should definitely not forget to mention that even professionals can take the ongoing education courses to brush up their programming skills. The website provides learner tutorials in the form of write-ups about various topics.
\nPrice : Free but pro version available at $29/mo
\nThe famous e-learning course provider offers a wide range of courses in several types of programming languages, web tools and designing. The website offers both free as well as paid versions. With free version users can get access to the 10 introductory courses that include topics like SQL, Objective C, jQuery which are great for getting started. While with the paid version, users can get access to 200 videos and 50+ interesting courses. The website basically works on learn, practice, win and track model which means first the users can learn via watching videos and then challenges are placed in front of them to track their learning experience.
\nPrice : Free
\nThe academy is best for those who prefer short videos to learn things. Started in 2006, by Salman Khan, the idea of this website was generated after creating and sharing video tutorials on Youtube. One of the original e-courses providers, the Khan Academy has become widely popular over the years and offers courses in numerous programming languages, both for beginners as well as experts. Relying heavily on videos, users can learn to code animations, games, drawings and a lot more. For those who are planning to start their coding career, or are beginners at coding, the Khan Academy is the best place.
\nPrice : Free trial for 2 weeks, Basic version at $25/mo and pro version at $50/mo
\nThe online technology courses provider, Treehouse provides programming courses for both beginners as well as experts. The website works on learn, practice and earn model. With 222+ courses, videos, challenges, the website makes sure that the learners are kept busy. Apart from that, it also helps you learn new business strategies to make the best out of your knowledge. But unlike above mentioned options, for this one, you need to spend some cash before you go ahead. The basic version comes at $25/mo with which you get access to around 1000+ videos and can take interesting challenges. While if you go for the pro version at around $50/mo users can unlock the bonus content and download videos to watch offline too.
\nPrice : Free
\nAnother player in the field of online coding courses, the website’s mission is to provide more and more people opportunity to learn programming. The website works more like games with drag & drop tiles. Learners can see the code both during challenge as well as when it is completed.
\nThe next three in the list are massive open online courses provider ie MOOC. These websites provide courses related to not only coding but other fields too like life science, engineering, health habits, etc.
\nPrice : Both free and paid
\nDespite of being founded just 4 years ago, Coursera has become a major Major Open Online Courses provider that offers around 1990 courses from 119 well known institutions. Though there are certain programs that require you to spend money to get certified, there are hundred of other free introductory courses that provide specializations from well known universities like University of Toronto and Vanderbilt, etc. One of the widely popular MOOCs provided by Coursera is “Programming for everybody (Getting started with Python)
\nPrice : Free to hundreds of dollars
\nAnother MOOC provider, Udemy is one place you can find resources for just anything. It is a great place to develop your coding skills with courses like Complete Java Developer Course. Though the courses fee varies from free to hundreds of dollars, Udemy has created its own position when it comes to learning programming. Another feature that it brings along is to allow user to sign up as an instructor and create his/her own course.
\nPrice : Free
\nSimilar to above, this one is also a MOOC provider, serving millions of students around the globe. But this one is a non profit and open source which means anyone can build his own tools and contribute to the edX platform. Some of the most popular edX course is “Fundamentals of Computer Science” by IIT Bombay. Most of the courses I found here were free, but to get a verified certificate you need to spend some cash which differs between the type of courses you are enrolled with.
\nThough there are hundreds of other websites that help you to enhance your coding skills, these are the top ten sites I found to be the best. Have you tried any of these? How was your experience? I would love to know about it in the comments below.
\n","frontmatter":{"title":"Learn How To Code Using The 10 Cool Websites","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"October 21, 2016","updated_date":null,"tags":["Courses","Learning Websites"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3605442176870748,"src":"/static/984ce3cc0d4c43ee0925e08cc7b336fc/403a4/How-to-code-using-the-10-cool-websites-768x564-300x220.webp","srcSet":"/static/984ce3cc0d4c43ee0925e08cc7b336fc/61e93/How-to-code-using-the-10-cool-websites-768x564-300x220.webp 200w,\n/static/984ce3cc0d4c43ee0925e08cc7b336fc/403a4/How-to-code-using-the-10-cool-websites-768x564-300x220.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/learn-to-code-using-10-websites/"}}},{"node":{"id":"cb3fdb4b-d6e4-5802-b360-5519dcdd0623","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![\"snippet-demo\"](\"/3e21aab686b29a54a248ccd545aca465/snippet-demo.gif\")
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.
![\"new-snippet\"](\"/0300880eed77c65d2c7b959aca04ee17/new-snippet.webp\")
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.
\n![\"browse-package\"](\"/30a6ed6b40f11c0e5690a68bda1f31ef/browse-package.webp\")
Using \"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\"
\n![\"save-proj\"](\"/70e0570d0894195bc9d3e2e1c5e52dfb/save-proj.webp\")
That'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.
\n![\"start-macro\"](\"/b799f564f4bd2661de161e21af25fea4/start-macro.webp\")
Well you might think there must be a better way! You bet there is! \"Macros\" are designed to handle this kind of nasty situation and save you from all that boring work. Here I made a very quick and easy example, it converts a vertical line of data into an array:
\nMagic! Lots of time and lives will be saved by this little gadget. So now, how to make your very own macros. First of all I would recommend trying out your set of operations several times to make sure it will get recorded correctly. When you are ready, open a new window/tab in Sublime, clear your mind, take several deep breaths, and here we go.
\nGo to \"Tools\" -> \"Record Mac
\n![\"start-macro1\"](\"/b799f564f4bd2661de161e21af25fea4/start-macro1.webp\")
Usually you would have something copied in your clipboard, so it could start with a \"Paste\" command. Now it's your time to shine, do a clean and precise set of operations to format the data.
\nStop your macro
\n![\"stop-macro\"](\"/eb5135b0cb78399916eda6245eb93e69/stop-macro.webp\")
You can find it under the same \"Tools\" menu. Just use it to make sure it did what you want, sometimes even though you recorded it properly, the macro doesn't recognize the operations correctly. For this reason it's important to make sure everything is correct and smooth, and if it's not, try find some alternatives for your operations.
\nSimilar 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.
\nI 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!!!
\n","frontmatter":{"title":"Beginner's Guide for Sublime Text 3 Plugins","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"November 10, 2015","updated_date":null,"tags":["SublimeText","CodeEditor"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/296e569fc8dd1576c6df798847aaf8ad/7fbdd/Beginner-Guide-Sublime-Text.webp","srcSet":"/static/296e569fc8dd1576c6df798847aaf8ad/61e93/Beginner-Guide-Sublime-Text.webp 200w,\n/static/296e569fc8dd1576c6df798847aaf8ad/1f5c5/Beginner-Guide-Sublime-Text.webp 400w,\n/static/296e569fc8dd1576c6df798847aaf8ad/7fbdd/Beginner-Guide-Sublime-Text.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/beginners-guide-for-sublime-text-3-part-2/"}}},{"node":{"id":"89af2503-02c3-5a54-aa6f-1c581d095b2d","html":"This tutorial provides a solution to get email alerts, when a unhandled error occurs. For this tutorial, we are using WordPress.
\nImagine you created a php application and it’s running fine. A couple of days later, a user complains about an error which you’re totally unaware of. Such unhandled errors are very common in php applications. So, to find these issues, we are going to send email notifications whenever an error occurs.
\nStep 1. First of all we need to identify a common application file that include at top of application. in this case the file is “wp-config.php” at the root of your wordpress hosting directory.
\nStep 2. Let’s add the following line of code in this file under php tag.
\nset_error_handler('errorHandler'); // this line of code sets an error handler custom function to handle any php error. And here we pass our custom function that name “errorHandler”\n\nfunction createTable($array){\n if(is_array($array) && count($array)>0){\n $errorContent = "<table border = 1><tr><td>";\n foreach ($array as $key => $val) {\n $errorContent .= $key . "</td><td>";\n if(is_array($val) && count($val)>0){\n $errorContent .= createTable(json_decode(json_encode($val),true)) ;\n }else{\n $errorContent .= print_r($val, true) ;\n }\n }\n $errorContent .= "</td></tr></table>";\n return $errorContent;\n }\n return '';\n}\n \n/**\n * \n * @param type $errorNumber // This parameter returns error number.\n * @param type $errorString // This parameter returns error string.\n * @param type $errorFile // This parameter returns path of file in which error found.\n * @param type $errorLine // This parameter returns line number of file in which you get an error.\n * @param type $errorContext // This parameter return error context.\n */\nfunction errorHandler($errorNumber, $errorString, $errorFile, $errorLine, $errorContext) {\n $emailAddress = 'example@example.com';\n $emailSubject = 'Error on my Application';\n $emailMessage = '<h2>Error Reporting on :- </h2>[' . date("Y-m-d h:i:s", time()) . ']';\n $emailMessage .= "<h2>Error Number :- </h2>".print_r($errorNumber, true).'';\n $emailMessage .= "<h2>Error String :- </h2>".print_r($errorString, true).'';\n $emailMessage .= "<h2>Error File :- </h2>".print_r($errorFile, true).'';\n $emailMessage .= "<h2>Error Line :- </h2>".print_r($errorLine, true).'';\n $emailMessage .= "<h2>Error Context :- </h2>".createTable($errorContext);\n $headers = "MIME-Version: 1.0" . "rn";\n $headers .= "Content-type:text/html;charset=UTF-8" . "rn";\n mail($emailAddress, $emailSubject, $emailMessage, $headers); // you may use SMTP, default php mail service OR other email sending process\n}Step 3. Now save the file and upload on server.
\nWhenever we got any error in wordpress then above code will send an email to given email-address (example@example.com). You can use the above code on production websites to improve application performance and track all errors that’s are missed.
\nSimilarly we can use above code in drupal, joomla, and many other content management systems.
\nCommon config files on other platforms are listed below:
| CMS/application name | \nLocation of common file | \n
|---|---|
| 4Images Gallery | \n/config.php | \n
| B2 Evolution | \n/conf/_basic_config.php | \n
| Boonex Dolphin | \n/inc/header.inc.php | \n
| Concrete5 | \n/config/site.php | \n
| Coppermine Photo Gallery | \n/include/config.inc.php | \n
| Crafty Syntax Live Help | \n/config.php | \n
| Cube Cart | \n/includes/global.inc.php | \n
| dotProject | \n/includes/config.php | \n
| Drupal | \n/sites/default/settings.php | \n
| e107 | \n/e107_config.php | \n
| FAQMasterFlex | \n/faq_config.php | \n
| Gallery | \n/config.php | \n
| Geeklog | \n/db-config.php or /siteconfig.php or /lib-common.php | \n
| glfusion | \n/private/db-config.php | \n
| Hotaru | \n/hotaru_settings.php | \n
| Joomla | \n/configuration.php | \n
| LiveSite | \n/livesite/config.php | \n
| LifeType | \n/config/config.properties.php | \n
| Mambo | \n/configuration.php | \n
| Marketecture | \n/include/config.php | \n
| MODx | \n/manager/includes/config.inc.php | \n
| Moodle | \n/config.php | \n
| MyBB | \n/inc/config.php | \n
| Noahs Classifieds | \n/app/config.php | \n
| Nucleus | \n/config.php | \n
| ocPortal | \n/info.php | \n
| OpenCart | \n/config.php or /admin/config.php | \n
| osCommerce | \n/includes/configure.php or /admin/includes/configure.php | \n
| Oxwall | \n/ow_includes/config.php | \n
| PHP-Nuke | \n/config.php | \n
| phpBB | \n/config.php | \n
| phpFormGenerator | \n/index.php or /mysql.class.php | \n
| phpFreeChat | \n/forms/admin/config.inc.php (only if you have saved form input to a database) | \n
| PHPlist | \n/config/config.php | \n
| phpMyDirectory | \n/defaults.php | \n
| phpWCMS | \n/include/inc_conf/conf.inc.php | \n
| phpWebSite | \n/conf/config.php | \n
| PhpWiki | \n/admin.php or /lib/config.php | \n
| Pligg | \n/libs/dbconnect.php | \n
| Post-Nuke | \n/config.php | \n
| PrestaShop | \n/config/settings.inc.php | \n
| Saurus CMS | \n/config.php | \n
| ShopSite | \n/includes/configure.php or /admin/includes/configure.php | \n
| Siteframe | \n/config.php | \n
| Simple Machines Forum | \n/Settings.php | \n
| Soholaunch | \n/sohoadmin/config/isp.conf.php | \n
| SugarCRM | \n/config.php | \n
| Textpattern | \n/textpattern/config.php | \n
| TikiWiki | \n/db/local.php | \n
| Tomato Cart | \n/includes/configure.php | \n
| TYPO3 | \n/typo3conf/localconf.php | \n
| WebCalendar | \n/includes/settings.php | \n
| WHMCS | \n/configuration.php | \n
| WordPress | \n/wp-config.php | \n
| X7 Chat | \n/config.php | \n
| Xoops | \n/mainfile.php | \n
| Zen Cart | \n/includes/configure.php or /admin/includes/configure.php | \n
| Zikula | \n/config.php | \n
Introduction
\nAuthentication and authorization both are most important things for any system and application. This blog starts with authentication and authorization concepts and after that explains the three default important ways and three custom authentication ways for doing authentication and authorization i.e. windows, forms ,passport, multipass, JWT and SAML authentication. Plus, in this blog I will explain some fundamental concepts about the different authentication system.
\nAuthentication and Authorization
\nAuthentication is the process for checking the identity of a user based on the user’s credentials. Generally, user’s credentials are in the form of user ID and password, and we check their credentials from database or equivalent alternative, if it exists then user is a valid candidate for next process - authorization.
\nAuthorization also known as “Permission Control” will come after authentication. Authorization is the process of deciding what kind of resource a user can access based on their identity and checking whether the authenticated user has sufficient rights to access the requested resources. Typically a resource can be an ASP.NET web page, media files (MP4, GIF, JPEG etc), compressed file (ZIP, RAR) etc.
\nASP.NET default authentication Providers
\n1. Form Authentication
\nNormally, form authentication is based on cookies, the authentication and permission settings are stored in cookies. However, we can also use form authentication without cookies, and in cookie-less form authentication we can use query string for passing user details. Remember, the key concept is always ONLY allow the user with correct credential also enough permission to view certain resources, so we need to capture their information and compare with what we have stored in the database. And no matter what kind of form authentication we use, after we receive the data on server end, we will compare them with the data stored in any storage method/provider. For example, we can store username and password in the web.config file, a JSON file, or a database table.
\nForms authentication flow:
\n2. Passport Authentication
\nPassport authentication is a centralized authentication service provided by Microsoft. The .NET Passport single sign-in service. When we use passport authentication then user authentication in your application is managed by Microsoft's passport service. Passport authentication uses encrypted cookies to manage the authentication.
\nHow Password authentication works Users do not need to retype their sign-in name and password when moving from site to site. Those .NET Passport–enabled sites will issue a set of encrypted cookies in the .NET Passport central servers' domain to facilitate silent and seamless sign-in across sites. In some cases, sites owners will first redirect their end-users to .NET Passport sign-in and to authenticate upon first viewing of their site. If the users are logged in already, they'll get authenticated by ASP.NET, and if they are not logged in they will get redirected to passport servers (i.e hotmail, Live etc.) to login first. If user successfully authenticates himself, it will return a token to your website.
\n3. Windows Authentication
\nWe use windows authentication when we are creating a web application for a limited number of users who already have Windows account and this type of authentication is quite useful in an intranet environment. This authentication method uses local users windows account 'credentials' for to validate the user. Dot Net web application generally hosted on IIS(Internet Information Server) so the requests go directly to IIS to provide the authentication process in a Windows-based authentication model.
\nThe entire responsibility of authentication is done by IIS. It first takes the user’s credentials from the domain login. If this process fails, IIS displays an alert dialog box so the user can enter or re-enter his login information.
\nWindows authentication have some advantages and disadvantages:
\nWindows authentication Advantage
\nWindows authentication dis-Advantage
\n4. Custom authentication Provider
\nMultipass authentication is a single sign on authentication. Suppose you have multiple sites and you want to create a single account for a user on both sites then you can use Single Sign-On. Single Sign-On is authentication system it allow user to share his authentication details with your there site. This allows a seamless experience for your users without forcing them to create a separate account on your second site. A multipass is simply a hash of keys and values, provided as an AES encrypted JSON hash.
\nJWTs represent a set of claims as a JSON object that is encoded in a JWS and/or JWE structure. This JSON object is called “JWT Claims Set”. The JSON object consists of zero or more name/value pairs (or members), where the names are strings and the values are arbitrary JSON values. These members are the claims represented by the JWT.
\nYour JWTs can contain any information you want; the user's name, birthdate, email, etc. You do this with claims based authorization. You then just tell your provider to make a JWT with these claims from the claims principle.
\nSAML - Security Assertion Markup Language SAML. SAML is developed by the Security Services Technical Committee of \"Organization for the Advancement of Structured Information Standards\" (OASIS). SAML is an XML-based framework for exchanging user authentication. The purpose of SAML is to enable Single Sign-On for web applications across various domains.
\nSAML have three components: assertions, protocol, and binding. Assertions are authentication, attribute, and authorization. Authentication assertion validates the user's identity. Attribute assertion contains specific information about the user. And authorization assertion identifies user role and permissions.
\nSAML works with multiple protocols including Hypertext Transfer Protocol (HTTP), Simple Mail Transfer Protocol (SMTP), File Transfer Protocol (FTP) and also supports SOAP
\nSummary
\nDifferent authentication methods are available, and website’s owner always gets confused about which authentication method they should use, here I have explained some of the popular authentication and authorization methods, hope it made it a little bit clear for you. And I will provide some in-depth details about each type of authentication in my next blog, happy coding.
\n","frontmatter":{"title":"Types of Authentication in Asp.Net","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"October 01, 2015","updated_date":null,"tags":["Engineering","Authentication","Asp.Net","Multipass","JWT","JSON Web Token"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/051582b8bfe0e3796cdccd575e275a97/e7487/alternate-authentication-asp-dot-net1-150x150.webp","srcSet":"/static/051582b8bfe0e3796cdccd575e275a97/e7487/alternate-authentication-asp-dot-net1-150x150.webp 150w","sizes":"(max-width: 150px) 100vw, 150px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/alternate-authentication-asp/"}}},{"node":{"id":"5515690a-c427-560d-abc5-ad4ca6f12802","html":"Ever wondered how I work? No? Well, too bad, I'm still gonna write about it. Hello and welcome to a blog post dedicated to me. In this episode, I'm going to tell you about the tools I use, the things I do to get design inspiration, and what I do when I get stuck on a project.
\nLet's get started!
\nLet's face it, you all know this is the number 1 priority for pretty much everyone you know. Getting my fuel up and over driving my brain... And hope to god I don't break down in the middle of the day.
\nThe Photoshop to my coding skills. Sure, there are other text editors out there but this one really knows what it's doing. I have come to the point where I've installed so many Sublime Packages that I cannot function without them.
\nSome of those packages are:
\nAnd since we're talking about sublime and packages, check out this nifty blog about sublime text and their packages.
\nIf you don't know what is codekit, you should. It compiles everything from SASS to HAML to Coffeescript. It also auto refresh your browser on every save. It... it just works. Bower is also built-in so you have access to over 6,000 components. Best part? No command line usage. Just drop your project files and go.
\nAs a normal human being — and not an extraterrestrial or alien as you tiny humans may call it. I tend to get stuck in a design black hole. It is where every ideas you have is just 1 big blank canvas — or as some artists call it \"modern art\". So what do I do when I don't have any ideas? It's simple really. The first website I go to is dribbble.com. Dribble used to be an invite-only social network for designers. I think they probably opened their doors to everyone. I'm not really sure. But, I am sure that most of the designers there are still the best of the best. What I really like about it is when some designers show how their designs interact with users. With the help of GIF or codepen. Speaking of codepen, That's the place I go to if I am in need of some CSS trickery. At some point, I do get inspiration from that place too. If dribbble can't help my —oh so in the dark— brain, I go to Pinterest. Pinterest have their own design category with a bunch of different sub categories from Graphic Design to UI/UX. The best thing about it? It links back to another site with more design inspiration. YAY for Pinterest.
\nNow that my brain is full of design food. How do I put it to work? There's this thing called a notebook. If you don't know what that is. It looks like this. ![\"notebook\"](\"/b559259155be5529d3475b1b84e6d837/notebook.webp\")
This is where I start sketching or wireframing all the things I need before moving on to the digital format. And there you have it. A sneak peek on how I work. I hope that this gave you an idea on how to improve your everyday design life. A word of advice. There are a thousand ways to do 1 thing. If someone told you it can't be done; prove them wrong.
Sublime is no doubt the highly preferred light weight editor for developers, it doesn't require major installation space and working with it is just plain fun. The goal of this blog is to help you set-up the basic extensions that are required while working with Sublime: Package Control, a professional, sharp looking theme pack, and a core feature of Sublime, \"Goto Everywhere\". I am using a Mac, but the concept also works well in Windows, check the corresponding shortcut online, and it should be an easy and smooth process.
\nBefore marching forward, make sure Sublime Text Editor 3 is properly installed, if you haven't installed it yet, you can download it here.
\nStill with me? Awesome! Let's get started. First of all, the most amazing thing about Sublime is the diverse collection of packages you can install. The packages vary from big ones such as Git and SublimetoCodeIntel to small handy widgets like color picker and path auto fill. Keep checking and digging for the most useful packages for yourself is a very important part for your daily coding with Sublime. Therefore, first things first, let's install the Package Control.
\n\nPress
\nctrl + `(Normally the one under Esc)Then paste the code from above link into your console, it could be confusing to paste a big graph of code into your sublime python console, but it does work, so Let's do it.
\nNow try pressing
\nCmd + Shift + pThen type \"Install Package\", you should see it now:
\n![\"install-package\"](\"/36afd7ed765fbb0034e4ba21d0699603/install-package.webp\")
2. Theme
\nPrior to installing any functional package, let's make sublime even prettier, let's search for a theme!
\nYou should see a big list of themes right now, you can first search on the internet to have some previews of the themes, pick a good color scheme that you like and then search for it here. What I would suggest is the one I am using it, is called \"Theme - itg.flat\"
\nAfter installing your preferred theme, the font and color scheme for sublime may have already been updated. But it doesn't quiet look like what you have seen from elsewhere does it? It's because you also need to update the UI preferences for sublime, for itg.flat it will give you a more flat look after the update.
\nNavigate to:
\n![\"user-preference\"](\"/3678a3c00fd847b686c00e4495b78304/user-preference.webp\")
What this file does is actually overwrite the settings in the default-setting JSON file, if you mess up with this user file, just delete them to recover back to the original settings. So feel free to play around with it, from here you can define the settings from your theme provider's guidance, here I will post mine as a sample
\n{\n "color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme",\n "font_size": 14,\n "highlight_line": true,\n "highlight_modified_tabs": true,\n "theme": "itg.flat.dark.sublime-theme"\n}Please note JSON format is significant to Sublime Settings, when you are not sure about it, check it with an online JSON validator. Now with this step done, you will have a delightful working environment to write your code in:
\n![\"sample-code\"](\"/41b210161a3945e693da5b05545d457a/sample-code.webp\")
3. Goto Everywhere
\nOne of the most awesome features provided by sublime is called \"Goto Everywhere\", to me it is more like a \"Find Everything\". Once you get used to it, it will boost your productivity incredibly by saving enormous amount of time on finding stuff. Here is a brief list of its most common usage purpose:
\nTo trigger this feature, press key combination:
\nCmd + pThen for different purpose you just press different buttons to trigger the function,
\n: then input the number of line you want to jump into@, then you will see a list of options automatically show up. Navigate through or directly input the symbol you are looking for, this is most commonly used by search for HTML ids and classnames.So far I have briefly covered the essential features sublime provides.In the next blog of this series I will explain how to make your work even easier by utilizing sublime Project, Snippet and Macro.\nUntil then, Adios!!!
\n","frontmatter":{"title":"Beginner's Guide for Sublime Text 3","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"September 15, 2015","updated_date":null,"tags":["SublimeText","CodeEditor"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/296e569fc8dd1576c6df798847aaf8ad/7fbdd/Beginner-Guide-Sublime-Text.webp","srcSet":"/static/296e569fc8dd1576c6df798847aaf8ad/61e93/Beginner-Guide-Sublime-Text.webp 200w,\n/static/296e569fc8dd1576c6df798847aaf8ad/1f5c5/Beginner-Guide-Sublime-Text.webp 400w,\n/static/296e569fc8dd1576c6df798847aaf8ad/7fbdd/Beginner-Guide-Sublime-Text.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/beginners-guide-for-sublime-text/"}}},{"node":{"id":"0f403a39-e696-56dc-9fe7-35f0cbbff156","html":"I am here to tell you that Facebook, Google, Twitter, or LinkedIn aren’t going to be happy when they find out that you changed their icon color to green. But, hey at least you didn’t distort the logo.
\nHello and welcome to another segment of me telling you things that you need to know but will ignore at some point. Let’s get started.
\nSocial Login and Social Sharing are everywhere. Some people even combine it with with their User Registration. There’s no surprise that on every website you go to, you’ll see either well designed social icons or just plain ugliness. We can’t blame them, they want their icons to be unique and eye catching.
\n![\"1\"](\"/fb56011614f4224e2ef4c45c93a08edf/1.webp\")
Beauty!
But, the universe is full of holes inside an “A” whom sometimes destroy a thing of beauty.
\n![\"2\"](\"/80fcb505560834197a9f54513c4af0bd/2.webp\")
Just. Stop!
Then there’s the “I use my own brand color” kind of people.
\n![\"3\"](\"/81faeb78b4a333f7fb4d9e1de1f812ef/3.webp\")
So, what’s happening here? What’s the orange f? Does that stands for forangebook? *badum tsss* I’ll see myself out.
\nChanging the branding color is a big no no for them. You’ll be surprised how strict those social branding guidelines can be. Yet, we still violate them.
\nOne thing we need to realize is, we don’t own these icons. The companies still own them. So, for your convenience I searched the interwebs to gather most of the things you need to remember for social network branding guidelines.
\nLet’s start with the most used social network, Facebook and their “ f ” logo. They’re pretty straightforward, as long as you don’t modify the “ f ” logo’s design and color, you’re good to go. To simplify this more; don’t make the facebook logo look like it’s been scratched by a chicken and made it bleed too much that it turns red.
\n![\"4\"](\"/4cc1938d041a582a519a9164609a6129/4.webp\")
Quick, somebody call 911!
\nTwitter branding is a little bit complicated. Probably because they had multiple drastic changes in their logo design.
\n ![\"5\"](\"/94d97c64dc8dfecf6a3220980bf84ee7/5.webp\")
Nonetheless, it’s simple.
On Google+ (yes “ + “ not “plus“), they prefer that you don’t change or remake their icon. But if you must, you can style it to match your design, as long as you don’t...
\nIf you’re using the icon with the title, You should use “Google” without the plus (word and sign), because… well… that’s redundant.
\nLinkedIn is kind of ridiculous with their branding guidelines. They still have the same drill with no distorting or changing the color and so forth. But there’s one thing you won’t expect, you cannot change the radius or the box. ![\"6\"](\"/13e5f4760a9c17550d227d85a8917ab1/6.webp\")
We’re all going to LinkedIn Jail!
\nKeep it to a minimal radius, like 2px. That means no circle, square, iOS style rounded icons — hold the phone, did LinkedIn just violate their own branding guidelines? Tsk tsk, LinkedIn. Breaking your own rules, eh?
\nWhat about the other 30+ social icons? Well, by now you’ve probably seen the pattern here. No? Well, let me break it down for you.
\nBut, who am I to tell you what to do? Just do what makes you happy and hope to god they don’t catch you. Keep in mind too that these branding guidelines are part of your user experience and affect your users impression of the site.
\nLet me know in the comments if there’s a specific guideline that I miss.
\n","frontmatter":{"title":"Social Network Branding Guidelines","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"September 08, 2015","updated_date":null,"tags":["Social","SocialLogin","Branding"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/63460374fc13a4962cd40dfa765485b1/403a4/social-network-branding-300x300.webp","srcSet":"/static/63460374fc13a4962cd40dfa765485b1/61e93/social-network-branding-300x300.webp 200w,\n/static/63460374fc13a4962cd40dfa765485b1/403a4/social-network-branding-300x300.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/social-network-branding-guidelines/"}}},{"node":{"id":"24f32e3d-b37c-518e-b0da-fec43d819be5","html":"Hey there, spider. It’s me again, your amazing blog writer, Darryl. Have you ever wanted to select the second or third child of an element without using CSS3 nth-child —which aren’t working on grandpa browsers. Let’s face it, a lot of human beings are afraid of change that they tend to stick to what they know.
\nI’m not a pro “support the older browser” kind of guy because I still think that people won’t upgrade if we keep spoiling them. But for the sake of knowing a workaround I’m gonna teach you how to ab-use sibling selectors for better compatibility.
\nSibling selectors consists of a squiggly line ( ~ ) and a plus sign ( + ).
\nSquiggly line selects all the siblings below that element where you use that sign. Plus sign select only the next sibling.
\n![\"lr-home\"](\"/abd7ca3edfcf0936a62d81dd2468015d/lr-home.webp\")
Have you ever seen our support docs?
\nWould you believe me if I tell you that from “Getting Started” to the “Social Sharing” section, they are all siblings with the same class and everything… well except for the css code and the search, we’ll get to that later.
\nAnyhoo, how did I do it? It’s easy, since I know that the sibling I want to get was the first child. I just used the :first child pseudo element to style the first element.
\n.sibling:first-child {\n/*styles for first sibling*/\n}Then again, that’s not a sibling selector, that’s a pseudo element. Calm your feets, this is the part where we ab-use those selectors.
\n.sibling:first-child ~ .sibling {\n/*styles for the rest of the sibling*/\n}Why would we do this? This is so it doesn’t add the style for the rest of the sibling to the first-child and vice versa. Less CSS to overwrite and eliminates the use of !important.
\nHow do we get the third child without using :nth-child pseudo element? It’s simple. Get the first child and ab-use your plus sign(+) sibling selector.
\n<div:first-child + div + div {\n/*styles*/\n}The best part is. It’s backwards compatible.
\nWhat about the 12th child? Well, you can just painfully type all those “+ div”.
\nNow, why would we do this? To support IE8, which I don’t like supporting but, maybe you do.
\nKeep experimenting with this technique and be free from any restrictions of IE8.
\n","frontmatter":{"title":"How to ab-USE CSS2 sibling selectors","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"August 18, 2015","updated_date":null,"tags":["Engineering","Selector","CSS"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/bc4587907a3f51743e5602c5512e6236/7fbdd/sibling-selectors.webp","srcSet":"/static/bc4587907a3f51743e5602c5512e6236/61e93/sibling-selectors.webp 200w,\n/static/bc4587907a3f51743e5602c5512e6236/1f5c5/sibling-selectors.webp 400w,\n/static/bc4587907a3f51743e5602c5512e6236/7fbdd/sibling-selectors.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/ab-use-css2-sibling-selectors/"}}},{"node":{"id":"eafcb8fa-d8f5-535b-9de3-ffdfd367b61d","html":"What’s up, my neighbor? This is your boy, Darryl Tec. I am here to teach you how to create a responsive and awesomely scalable icon using CSS sprites. On top of that, we will also add a fallback for browsers that do not support SVG files.
\nSVG - Stands for Scalable Vector Graphics. In short it scales perfectly and you don’t need to worry about having a pixelated image anymore.
\nSprite - Google said it’s a fairy. This is not a fairy. It’s just a bunch of different icons in 1 image. Use it as background image and shift the positioning to show 1 icon. This saves you a lot of loading time. Because instead of loading, say 10 images, you’re loading just 1.
\nCSS - Cascading Style Sheet. If you don’t know what this is, I have bad news for ya.
\n![\"icons\"](\"/396a6fac14d2d5aa92551ae4d88a5e46/icons.webp\"){kind=icon}
First things first, we need a sprite image that consists four icons – or more, it’s up to you. Luckily, I have one in my digital pocket.
\nWe’re just going to use a normal PNG file at first and change it later. Make sure it has a transparent background.
\nNow, let’s make their placeholder. The icons you see above is using a grid of 32px by 32px and it’s lining up vertically. I made it like that so it’s easier to find anything, you’ll see why later.
\n</pre>\n <div class="frame"></div>\n<pre>Now we need to style them.
\n.icon {\n width: 32px;\n height: 32px;\n background: #eee;\n float: left;\n background-image: url("[ put your image here ]");\n background-size: 100% auto;\n /*extra fluff*/\n margin: 10px;\n border-radius: 5px;\n}Explanation
\nLooks simple right? But the one thing that’s very important here is the background-size, which makes our sprite responsive. When you put 100% as the value, it will stretch the image depending on what width and height you have. So, be very careful when putting a value on both X and Y axis, because this will distort the image. To stop it from distorting, you should only put a value on one axis and put the other on ‘auto’ so the image scales proportionally.
\nIf you look at the image I provided, there’s only one icon on X-axis. That means we can just say 100% on X and auto on Y.
\nSo, we get background-size: 100% auto.
\nCool, right? No crazy percentage. Your icon should look like this:
\n![\"facebook-icon\"](\"/af1887d5ca8c855ac62128b3b7c5cffb/facebook-icon.webp\"){kind=icon}
It’s time to map those icons properly. Facebook is not a problem because it’s first on the list. But for defaults sake, let’s add a code for it.
\n .icon.facebook {\n background-position: 0 0;\n background-color: #3b5998;\n }The positioning of 0 0 will map it to the top left of the element.
\n![\"here-icon\"](\"/4418d0c0d01a1971865f91b64c9fed43/here-icon.webp\"){kind=icon}
For the background-color, you can get almost all of the official social icon colors in hex here.
\nHow about the rest? Well, there’s a simple formula for that.
\nSince we’re making this responsive, we need to use percentage. We need to get the height of the image via percentage. Remember what I said earlier about x and y and scaling proportionally? Since the icons are lined up vertically, we need to get the Y-axis, which is the height. The easy way to do that is to just use 100% and never touch x axis again.
\nNow, we have to get the position of the icons. Let’s start by counting the icons starting with 0 (zero).
\n0 = Facebook
\n1 = Google
\n2 = LinkedIn
\n3 = Twitter
\nFacebook isn’t really a problem because we already know where it is. So, let’s exclude it from the count. That gives us 3 icons. We can now use those numbers to get the icon position.
\nimageHeight = 100%
\niconCount = 3
\niconPosition = [1, 2 or 3]
\nWe need to go downwards on the sprite. That means it’s negative.
-imageHeight / iconCount * iconPosition
\n-100% / 3 / 1 = 33.33% is Google’s position
\n-100% / 3 / 2 = 66.66% is LinkedIn’s position
\n-100% / 3 / 3 = 99.99% is Twitter’s position
\nThat gives us this code
.icon.twitter {\n background-position: 0 -33.33%;\n background-color: #55acee;\n}\n.icon.linkedin {\n background-position: 0 -66.66%;\n background-color: #007bb6\n}\n.icon.google {\n background-position: 0 -99.99%;\n background-color: #F90101;\n}If you use stylus you can just do this:
\nCreate the mixin
getPos(imageHeight, iconCount, iconPosition)\n imageHeight / iconCount * iconPositionThen call it.
\n.icon.twitter\n background-position 0 getPos(-100%, 3, 1)\n background-color #55acee\n \n.icon.linkedin\n background-position 0 getPos(-100%, 3, 2)\n background-color #007bb6\n \n.icon.google\n background-position 0 getPos(-100%, 3, 3)\n background-color #F90101By now your icon should look like this.
\n![\"color-icons\"](\"/d95ce5167a6a3fd1c07e24eaa853df05/color-icons.webp\"){kind=icon}
It’s time to change that PNG background to an SVG background.
\nand link it to your background image
\n.icon {\n width: 32px;\n height: 32px;\n background: #eee;\n float: left;\n background-image: url("[ put your PNG image here ]”);\n background-image: linear-gradient(transparent, transparent), url("[ <b>put your SVG image here</b> ]”);\n background-size: 100% auto;\n \n/*extra fluff*/\n margin: 10px;\n border-radius: 5px;\n}If you’re wondering why we’re adding 2 background images is because not all browsers support SVG file. The linear-gradient(transparent, transparent) tricks the CSS into falling back to the PNG image if it doesn’t support it.
\nNow, Rescale your width and height and see the magic of responsive icons.
\nAaaaaand then we’re done. That’s how you create a responsive icon.
\n","frontmatter":{"title":"CSS3 Responsive Icons","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"July 21, 2015","updated_date":null,"tags":["CSS","Responsive","UI"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/8d212eebb7243269b59bd9166d0a4cce/403a4/css3-responsive-icons-300x300.webp","srcSet":"/static/8d212eebb7243269b59bd9166d0a4cce/61e93/css3-responsive-icons-300x300.webp 200w,\n/static/8d212eebb7243269b59bd9166d0a4cce/403a4/css3-responsive-icons-300x300.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/css3-responsive-icons/"}}},{"node":{"id":"ba12ee5e-d927-590d-9ea9-6923ab3dc1f9","html":"HTML 5 is the latest and greatest web technology, although it has some issues in some browsers which don’t have native support for the new HTML5 elements. If you want to support some of the older browsers which may still be in use such as IE8 and lower then you are going to have some trouble using HTML5.
\nThe problem with IE8 and lower versioned IE browsers is that they were created many years ago while HTML5 is new technology and HTML5 tags were newly invented so legacy browsers do not support them. Microsoft will not release any updates for these browsers because they have released new versions of the IE browser.
\nAs old IE browsers do not know about these tags then it can’t style them so you will find that in IE8 or lower your websites will be rendered without many styles.
\nIf you want HTML5s new tags to be supported in IE then you need to add some javascript to create the elements:
\nExample:
\n <script>\n document.createElement('header');\n document.createElement('article');\n document.createElement('aside');\n document.createElement('footer');\n </script>This is not a very good way, you would need to remember all the tags that you have set and include them on every page of your website. If you add any new tags then you need to add these tags on every page of the website as well. Thankfully Remy Sharp provided a solution for this, Remy Sharp has created a Javascript file which he hosts with google code that will handle this for you.
\nadd the following at the top of your pages and it will include this code file on your website if the end user is using an IE browser lower than version 9.
\n<!--[if lt IE 9]>\n<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>\n<![endif]-->IE also does not support some of the most useful new HTML5 methods that are supported by modern browsers:Window.postMessage()
\nWindow.postMessage
\nallows for sending data messages between two windows/frames across domains. Normally, scripts on different pages are allowed to access each other if and only if the pages that executed them are at the same locations with the same protocol (usually both http) and matching host names. The HTML5 postMessage function provides a great way to communicate securely and with high performance and reliability even cross-domain. Unfortunately, the HTML5 postMessage function does not work in IE
\nLet’s take a look at how Window.postMessage works:
\nThe below signature is used for postMessage:
\notherWindow.postMessage(message, targetOrigin);
\notherWindow\nA reference to another window; such a reference may be obtained, for example, using the contentWindow property of an iframe element, the object returned by window.open
\nmessage\nThis parameter is required for a message to be sent to the other window. The message is serialized using the structured clone algorithm. This means you can pass a broad variety of data objects safely to the destination window without having to serialize them yourself.
\ntargetOrigin\nWhen the message is dispatched, the current location of the target document is checked. If it does not match the specified URI, then the message will not be dispatched. This parameter can be useful if you want to be sure of the location of the target document before dispatching the message and you can also specify a literal string “*” (indicating no preference) or as a URI
\nbut always provide a specific targetOrigin, not *, if you know where the other window’s document should be located. If you do not set a specific location and use “*” then a malicious site can change the location of the window without your knowledge, and therefore it can intercept the data sent using the postMessage method.
\nExample for postMessage
\nSender
\nThe first part of the process is setting up a “source”. With the source, we will open a new window (or IFrame), send the new window message (in the our example, we’ll do so every 6 seconds, and create an event listener for any response we receive from the destination window.
\n//create popup window\nvar domain = 'https://www.example.com';\nvar myPopup = window.open(domain + '/postmessage.html','myWindow');\n//periodical message sender\nsetInterval(function(){\n var message = 'Hello! The time is: ' + (new Date().getTime());\n myPopup.postMessage(message,domain); //send the message and target URI\n},6000);\n \n//listen to back\n \nwindow.addEventListener('message',function(event) {\n if(event.origin !== 'http://scriptandstyle.com') return;\n console.log('received response: ',event.data);\n},false);I have used window.addEventListener which doesn’t work with Internet Explorer so use window.attachEvent
\nReceiver
\nIn the destination window we should validate the message origin and if it is not valid then we will not send the message to the sender, otherwise we send a response back to the sender:
\nwindow.addEventListener('message',function(event) {\n if(event.origin !== 'https://lrblogs.wpengine.com) return;\n event.source.postMessage('message received: ',event.origin);\n},false);sessionStorage
\nsessionStorage stores data for one session only, this is used in a single transaction it stores the data only for one session and as you close the window the session would be lost and the data is deleted when the browser is closed.
\nHTML5 sessionStorage object are shared in different tabs in the same browser session if you change a sessionStorage attribute’s value in one tab, that change should be reflected within another tab but in IE8 this system will not work properly it does not share sessionStorage objects between frames on a page. This issue has since been fixed in IE11.
\nExample:
\n//save a value\nsessionStorage.setItem("website", "https://www.example.com");\n//retrieve item\nvar website= sessionStorage.getItem("website");\n//remove the key\nsessionStorage.removeItem(“website”);localStorage
\nThe localStorage object stores the data like a persistent cookie, with no expiration date. The data will not be deleted when the browser is closed, and will be available when a user returns to the browser.
\nIE also supports localStorage from IE8 but it does not support localStorage in IE7 and previous versions.
\nlocalStorage Vs Cookies
\nExample
\n//save a value\nlocalStorage.setItem("Domain", "https://www.example.com");\n//retrieve item\nvar website= localStorage.getItem("website");\n//remove the key\nlocalStorage.removeItem(“website”);Let's face it, at some point you look at a radio or a checkbox button and you're like... this looks like something that starts with an \"s\" and ends with a \"hit\". I'm here to stop you from saying that word and go on with your life without worrying about those ugly things.
\nWe're just going to use code here. No images, just pure scalable user interface using code. Cool, eh? Let's get started.
\nLet's create our code structure first.
\n<!-- Radio --> \n<label>\n<input type="radio">\n<span>I'm a radio button</span>\n</label>\n<!-- Checkbox -->\n<label>\n<input type="checkbox">\n<span>I'm a checkbox</span>\n</label>If it looks ugly, don't be alarmed. That's normal for an untamed code from the wild. All you gotta do now is to tame it with our very best tool, CSS.
\nFirst thing you have to do is to hide the element that generates the hideous button, which is... DUN DUN DUN... the input tag. Don't worry, we can still trigger it even though it's hidden. How? by nesting it inside the label tag.
\nNow that the default toggles are gone, we need to create our fake —but amazing— toggles.
\nRadio Button
\nWe can't really customize this toggle that much because it needs other toggles to work properly. Let's just prettify it a bit.
\nlabel input[type="radio"] {\n display: none;\n}\nlabel input[type="radio"] ~ span {\n position: relative;\n display: inline-block;\n padding: 3px 0 3px 25px;\n}\nlabel input[type="radio"] ~ span:before {\n content: "";\n position: absolute;\n display: block;\n width: 18px;\n height: 18px;\n background: #fff;\n margin-right: 5px;\n border: 1px solid #ccc;\n border-radius: 50%;\n left: 0;\n top: 0;\n box-sizing: border-box;\n transition: all 300ms ease-in-out;\n}\nlabel input[type="radio"]:checked ~ span:before {\n border: 5px solid #29d;\n}![\"checked-radio\"](\"/d36cc3d6f3b8656bc3c213dd8d697e8b/checked-radio.webp\")
![\"unchecked-radio\"](\"/0d8bd0a9dd2fb37571012a6c7fca93aa/unchecked-radio.webp\")
By now it should like this.
\nCleaner toggles!
\nCheckbox
\nThis one is fun to customize because it has an on and off feature or a switch. Let's start with a simple toggle. We're going to transform this hideous toggle (screenshot) to this beautiful creature (screenshot).
\nlabel.spin input[type="checkbox"] {\n display: none; /*hides ugly toggle*/\n}\nlabel.spin input[type="checkbox"] ~ span {\n position: relative;\n display: inline-block;\n padding: 3px 0 3px 25px; /*adds spacing on the left*/\n}\n/*create our new toggle*/\nlabel.spin input[type="checkbox"] ~ span:before {\n content: "\\2713"; /*add a new check mark*/\n text-align: center;\n font-size: 13px;\n position: absolute;\n display: block;\n width: 18px;\n height: 18px;\n background: #fff;\n color: #fff;\n margin-right: 5px;\n border: 1px solid #ccc;\n border-radius: 50%;\n left: 0;\n top: 0;\n box-sizing: border-box;\n transition: all 500ms ease-in-out;\n}\n/*if checked do this*/\nlabel.spin input[type="checkbox"]:checked ~ span:before {\n transform: rotatez(360deg);\n background: #29d;\n border-color: #29d;\n}Oh yes! Beautiful toggle.
\n![\"checked-check\"](\"/3607cca80217d22bad9c57e44caf3756/checked-check.webp\")
![\"unchecked-checkbox\"](\"/84a77f006447163b34d99200a668ffc1/unchecked-checkbox.webp\")
Bonus!
\nHave you ever seen those toggles where it slides to the left and right when you click it? Did you know you can do that too using CSS? Let's try it.
\nFirst, we're going to design the default look of an unchecked checkbox. By now you know that we need to hide the default toggle.
\nlabel input[type="checkbox"] { display: none; }And then add a space on the left of the span using padding. While you're there, add a position relative to because we need to contain the rest of the elements inside the span.
\nlabel input[type="checkbox"] ~ span { position: relative; display: inline-block; padding: 3px 0 3px 35px; }Now, let's create our toggles using CSS pseudo element :before and :after. Why? Because generated CSS is easier to handle.
\nlabel input[type="checkbox"] ~ span:before, label.slide input[type="checkbox"] ~ span:after {\n content: "";\n position: absolute;\n display: block;\n width: 18px;\n height: 18px;\n background: #fff;\n margin-right: 5px;\n border: 1px solid #ccc;\n left: 0;\n top: 0;\n box-sizing: border-box;\n transition: all 300ms ease-in-out;\n}This will generate a box looking element. Since it's targeting both pseudo elements, they will look identical and on top of each other.
\nIt's time to start prettifying those pseudo elements.
\nFor :after, since this is the background where the :before toggle slides through. We need to modify the width to look bigger. Add an inset shadow to make it look like it's pushed through and a red background for an \"off\" effect.
\nlabel input[type="checkbox"] ~ span:before {\n width: 30px;\n border-radius: 20px;\n box-shadow: inset 0 2px 5px -1px rgba(0, 0, 0, 0.4), inset 0 -2px 0 -1px rgba(255, 255, 255, 0.2);\n background: #F22613;\n}For :before, we just need to make it look like a circle and lift it off a bit using box-shadow.
\nlabel.slide input[type="checkbox"] ~ span:after {\n box-shadow: 0 3px 4px -2px rgba(0, 0, 0, 0.5);\n border-radius: 50%;\n}The \"on\" part just needs a little bit of pushing to the side and changing the background to blue or green.
\nlabel.slide input[type="checkbox"]:checked ~ span:before {\n background: #29d;\n}\nlabel.slide input[type="checkbox"]:checked ~ span:after {\n left: 13px;\n}The CSS is a bit longer here because there's a lot of elements that need to change, but take a chill pill because CSS won't slow your page down.
\nAnd that's it. Your pretty checkbox or radio button toggles.
\n","frontmatter":{"title":"Styling Radio and Check buttons with CSS","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"June 16, 2015","updated_date":null,"tags":["CSS"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/20127eac7a49d6d333dd2483a84b5c4c/7fbdd/radio-check-buttons-css-1.webp","srcSet":"/static/20127eac7a49d6d333dd2483a84b5c4c/61e93/radio-check-buttons-css-1.webp 200w,\n/static/20127eac7a49d6d333dd2483a84b5c4c/1f5c5/radio-check-buttons-css-1.webp 400w,\n/static/20127eac7a49d6d333dd2483a84b5c4c/7fbdd/radio-check-buttons-css-1.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/styling-radio-and-check-buttons-with-css/"}}},{"node":{"id":"ac7b1794-ff80-5392-b292-fa0406aef758","html":"Hey there, yogi bear. Tired of creating gifs? Seriously, that takes time and most of the time it has a huge file size and a crappy resolution. What if you can create a gif(ish) element out of CSS? Because you can.
\nCSS has come a long way we can now create our own GIF-ish contents and the best part, we have full control over it.
\n![\"yeah-css\"](\"/c26360b02b3fe566935aabf93fa63acd/yeah-css.webp\")
Great, how do I do it?
\nFirst things first, we need our html structure that will hold all the things we need. There's the container:
\n<div class="container"> <!--There's the container that centers it-->\n <div class="spinner-frame"> <!--The background-->\n <div class="spinner-cover"></div> <!--The Foreground-->\n <div class="spinner-bar"></div> <!--and The Spinny thing-->\n </div>\n</div>Easy, right? Now we need to add them styles to our html's.
\n.container {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n text-align: center;\n background: #eee;\n}\n.container:before {\n content: "";\n height: 100%;\n display: inline-block;\n vertical-align: middle;\n}Since, it's a spinner and normally covers the whole page. The combination of \"position: fixed\" and bottom, top, left, right as 0 will do that for you. ( We don't want the users to click everywhere, right?).
\nThe :before pseudo element will help you center the spinner correctly (without the help of negative margins). How? If you look at the container class, it has a \"text-align: center\" which aligns inline elements like the pseudo element :before. But, we need to add height on that thing and inline elements do not like that. So, we need to change the display from inline to inline-block and add \"vertical-align: middle\" so it aligns vertically.
\nNow the for the fun stuff.
\nWe need to style the spinner frame.
\n.container .spinner-frame {\n display: inline-block;\n vertical-align: middle;\n width: 100px;\n height: 100px;\n border-radius: 50%;\n position: relative;\n overflow: hidden;\n border: 5px solid #fff;\n padding: 10px;\n}A couple of things here. Since it's a DIV, by default it's a block element. We need to change that to an inline-block so it accepts the text-align and centers itself with the :before pseudo element. Then add a \"vertical-align: middle\" and viola!! Centered!
\nA spinner won't be a spinner if it's not a circle. A 50% border-radius will work properly if you have a perfect 1:1 ratio. Now we need to push everything inside (and automatically center it), adding consistent padding will do that for you.
\nNow for the foreground or spinner-cover.
\n.container .spinner-frame .spinner-cover {\n background: #fff;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n position: relative;\n z-index: 2;\n}This will add a white cover on top of the spinner and hide everything that we don't need inside it. You know what they say... If you can't remove it, hide it.
\nFor the spinny thing:
\n.container .spinner-frame .spinner-bar {\n background: #29d;\n width: 50%;\n height: 50%;\n position: absolute;\n top: 0;\n left: 0;\n border-radius: 100% 0 0 0;\n -webkit-animation: spinny 2s linear infinite;\n transform-origin: 100% 100%;\n}\n@-webkit-keyframes spinny {\n 0% {\n transform: rotate(0deg);\n background: #29d;\n }\n 50% {\n transform: rotate(180deg);\n background: #00427c;\n }\n 100% {\n transform: rotate(360deg);\n background: #29d;\n }\n}This one needs more advance CSS in it because this is the only thing that moves.
\nWe need to tell the element that the center point is not on the center of the element but on the bottom right edge where it spins. The CSS \"transform-origin: 100% 100%\" will do that easily for you.
\nSince it's an animated element, overflow hidden (for some reason) doesn't work on this guy. So, we need to curve to top left part of it. The CSS \"border-radius: 100% 0 0 0\" will do that for you.
\nWe also need to push it on the top left where it starts spinning \"position: absolute\" with top and left 0 will push it there.
\nNow we need to animate it using key-frames. From 0% to 100% the \"transform: rotate()\" from 0 degrees (0deg) to 360 degrees (360deg) will rotate it forever. FOREVER!
\nA tutorial wouldn't be complete without a demo.
\nSee the Pen azVwqj by Darryl Tec (@notdarryltec) on CodePen.
\n","frontmatter":{"title":"Loading spinner using CSS","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"May 05, 2015","updated_date":null,"tags":["CSS","Loader"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/7892c56df8d6f6a460669e168ad41a70/7fbdd/css3-loading-spinner.webp","srcSet":"/static/7892c56df8d6f6a460669e168ad41a70/61e93/css3-loading-spinner.webp 200w,\n/static/7892c56df8d6f6a460669e168ad41a70/1f5c5/css3-loading-spinner.webp 400w,\n/static/7892c56df8d6f6a460669e168ad41a70/7fbdd/css3-loading-spinner.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/create-a-loading-spinner-using-css/"}}},{"node":{"id":"da7b062c-0cc1-555e-a505-78a658b02c7e","html":"Today in the market various type of Database options are available like RDBMS, NoSQL, Big Data, Database Appliance, etc. developers can get very confused with all the choice. They do not understand why they should consider a newer, alternative database when RDBMSs have been around for 25+ years. However, many big enterprises are already using alternative databases and are saving money, innovating more quickly, and completing projects.
\nRelational Database Management System (RDBMS)
\nRDBMS Database is a relational database. It is the standard language for relational database management systems.Data is stored in the form of rows and columns in RDBMS. The relations among tables are also stored in the form of the table SQL (Structured query Language) is a programming language used to perform tasks such as update data on a database, or to retrieve data from a database. Some common relational database management systems that use SQL are: Oracle, Sybase, Microsoft SQL Server, Access, etc.
\nFeatures Of RDBMS
\nLimitations for SQL database
\nScalability: Users have to scale relational database on powerful servers that are expensive and difficult to handle. To scale relational database it has to be distributed on to multiple servers. Handling tables across different servers is difficult .
\nComplexity: In SQL server’s data has to fit into tables anyhow. If your data doesn’t fit into tables, then you need to design your database structure that will be complex and again difficult to handle.
\nNoSQL
\nNoSQL commonly referred to as “Not Only SQL”. With NoSQL, unstructured ,schema less data can be stored in multiple collections and nodes and it does not require fixed table sachems, it supports limited join queries , and we scale it horizontally.
\nBenefits of NoSQL
\nhighly and easily scalable
\nRelational database or RDBMS databases are vertically Scalable When load increase on RDBMS database then we scale database by increasing server hardware power ,need to by expensive and bigger servers and NoSQL databases are designed to expand horizontally and in Horizontal scaling means that you scale by adding more machines into your pool of resources.
\nMaintaining NoSQL Servers is Less Expensive
\nMaintaining high-end RDBMS systems is expensive and need trained manpower for database management but NoSQL databases require less management. it support many Features like automatic repair, easier data distribution, and simpler data models make administration and tuning requirements lesser in NoSQL.
\nLesser Server Cost and open-Source
\nNoSQL databases are cheap and open source. NoSql database implementation is easy and typically uses cheap servers to manage the exploding data and transaction while RDBMS databases are expensive and it uses big servers and storage systems. So the storing and processing data cost per gigabyte in the case of NoSQL can be many times lesser than the cost of RDBMS.
\nNo Schema or Fixed Data model
\nNoSQL database is schema less so Data can be inserted in a NoSQL database without any predefined schema. So the format or data model can be changed any time, without application disruption.and change management is a big headache in SQL.
\nSupport Integrated Caching
\nNoSQL database support caching in system memory so it increase data output performance and SQL database where this has to be done using separate infrastructure.
\nLimitations & disadvantage of NoSQL
\nConclusion
\nRDBMS and NoSQL both dbs are great in data management and both are used to keep data storage and retrieval optimized and smooth. It’s hard to say which technology is better so developer take decision according requirement and situations
\n","frontmatter":{"title":"RDBMS vs NoSQL","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"April 28, 2015","updated_date":null,"tags":["Database"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/f5c32ff4008853f989d5847a4fb3b139/7fbdd/rdbms-vs-nosql.webp","srcSet":"/static/f5c32ff4008853f989d5847a4fb3b139/61e93/rdbms-vs-nosql.webp 200w,\n/static/f5c32ff4008853f989d5847a4fb3b139/1f5c5/rdbms-vs-nosql.webp 400w,\n/static/f5c32ff4008853f989d5847a4fb3b139/7fbdd/rdbms-vs-nosql.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/relational-database-management-system-rdbms-vs-nosql/"}}},{"node":{"id":"0f613b12-b271-5762-aa6d-8e91934a5860","html":"PhoneGap now also known as Apache Cordova, is a powerful tool for mobile development which allows you to develop in HTML/JS markup and quickly generate out various mobile compatible apps. This prevents your developers from having to learn and understand multiple platform specific languages and instead use the PhoneGap framework which is based in HTML to create the app and then generate it into any one of the following platforms:
\nWith time saved on learning development languages for the above platforms your team can focus on the features of your app.
\nC:\\>npm install -g cordovaVerify your installation of Cordova/PhoneGap by running cordova in command prompt. This should display a list of the available Cordova commands.
\nC:\\>rootdir\\cordova create FirstSiteThis will create a project in the root folder with the specified site-name. This project will contain:
\nAdd platforms to the project with the cordova platform add
And for Mac:
\nC:\\>rootdir\\cordova platform add androidYou can now get a list of the added platforms by running the following command:
\nC:\\>rootdir\\cordova platform lsYou can remove a specific platform from the list with the following command:
\nC:\\>rootdir\\cordova platform remove androidNote: Building platforms requires that the relevant dependencies are installed in your system for example building android requires that you have installed the Android SDK
\nC:\\>rootdir\\cordova buildC:\\>rootdir\\cordova emulate androidAt this point you have a basic PhoneGap project configured and your desired platforms added and you can get started with adding or building out additional features and content in the \"www\" directory and run the command in step 7 above to create the platform specific projects. You can find detailed instructions on setting up additional features and implementing PhoneGap on the PhoneGap site.
\n","frontmatter":{"title":"Getting Started with Phonegap","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"March 31, 2015","updated_date":null,"tags":["Engineering","PhoneGap","Mobile"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/02771814b93eac090637b118855c7008/22f90/dev-sprites2.webp","srcSet":"/static/02771814b93eac090637b118855c7008/61e93/dev-sprites2.webp 200w,\n/static/02771814b93eac090637b118855c7008/1f5c5/dev-sprites2.webp 400w,\n/static/02771814b93eac090637b118855c7008/22f90/dev-sprites2.webp 580w","sizes":"(max-width: 580px) 100vw, 580px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/getting-started-phonegap/"}}},{"node":{"id":"97b17b35-96cc-5d86-ba88-88ee56c4a6c8","html":"By now you’ve probably seen the cool and simple way(not to mention, without using jQuery) of creating a popup by Zoie Carnegie. If not, you can click this link to go and follow that tutorial. Cool?
\nOnce you’re done creating your css popup. We’re now going to animate it with CSS3. Why? because we’re tired of seeing things that just pop onto users screen and you don’t know where it came from. Also, to make it fun for your users. Let's get started.
\nFirst things first. CSS3 animations don't work on \"display: none\" or \"block\". So, we need to modify Zoie's code to not do that and just simply add and remove the relevant class.
\n// Close Popup Event\nclosePopup.onclick = function() {\n overlay.className = ''; /*This removes all classes, use at your own risk*/\n popup.className = ''; /*This removes all classes, use at your own risk*/\n};\n// Show Overlay and Popup\nbutton.onclick = function() {\n overlay.className = 'show';\n popup.className = 'show';\n}We need to modify the CSS too.
\n#popup {\n visibility: hidden;\n opacity: 0;\n z-index: -1; /*hide it in the back of the page*/\n}\n#overlay {\n visibility: hidden;\n opacity: 0;\n z-index: -1; /*hide it in the back of the page*/\n}Now, why did I do that? Since, we can't use display: none, we need to find a way to hide it differently. CSS3 animation works perfectly with \"visibility: hidden\", \"opacity\" and \"z-index\". I know it's a bit more CSS but, I assure you that it's worth it.
\nSlide Down
\nLet's start with a simple one. Sliding them pops, yo!
\n/*Add defaults*/\n#popup {\n top: -50%; /*Put it on the very top*/\n transition: all .5s ease-in-out; /*make it smooth*/\n}\n/*Now show it*/\n#popup.show {\n visibility: visible;\n z-index: 200;\n opacity: 1;\n top: 50%; /*slide it down smoothly*/\n}\n#popup.show ~ #overlay {\n opacity: 1;\n visibility: visible;\n z-index: 100;\n}The \"top: -50%\" will push our pop-up outside while \"top: 50%\" will bring it back to the center. Now, combine it with a CSS transition and it will gracefully slide down along with the fading effect of opacity. Pretty neat huh? How about making it pop up from the center of the page? I mean it's called \"pop-up\" for a reason right?
\nWe can achieve that effect by using the same code we made earlier. Just change the \"top: -50%\" to \"transform: scale(0)\". This will scale our beloved pop-up to a small size. The showing it part will have to change too. Same as the default, change the \"top: 50%\" to \"transform: scale(1)\". This will then scale it back to original size.
\n/*Add defaults*/\n#popup {\n transform: scale(0) /*scale it to a smaller size*/\n transition: all .5s ease-in-out; /*make it smooth*/\n}\n/*Now show it*/\n#popup.show {\n visibility: visible;\n z-index: 200;\n opacity: 1;\n transform: scale(1) /*scale it to a default size*/\n}\n#popup.show ~ #overlay {\n opacity: 1;\n visibility: visible;\n z-index: 100;\n}Want to try something different than that? I got your back.
\nSwirly Pop
\nHave you heard of CSS keyframes? We're going to use that to achieve what we want. I just want to say first that CSS keyframes do not work on older browsers like IE8 and IE9. Use this trick at your own risk.
\nThe keyframes code looks like this
\n@keyframes pop-swirl {\n 0% {\n transform: scale(0) rotate(360deg);\n }\n 60% {\n transform: scale(0.8) rotate(-10deg);\n }\n 100% {\n transform: scale(1) rotate(0deg);\n }\n}The word \"pop-swirl\" is the variable we need to call later on to trigger that animation or keyframe. You can name this to whatever you want, there are no restrictions. The animation works by specifying your start and end points. There's 2 ways you can do that, either by using \"from\" and \"to\" or \"0%\" to \"100%\". I prefer the 2nd way because you can add like 100 keyframes to it.
\nCalling that code will need the help of an \"animation\" tag. This is like a transition but more advanced. I also like to point out that right now, It's not fully supported yet but you can still use it by appending your vendor prefix like \"-webkit-\". Like this...
\n\\-webkit-animation: pop-swirl 1s ease forwards;Let's break this down
\n-webkit- = Vendor prefix.
\nanimation = Used to call the keyframes.
\npop-swirl = The variable we used on keyframes.
\n1s = Duration of animation.
\nease = Timing function. This can also make the animation smoother.
\nforwards = This is the animation play state.
Using the same method as Slide Down and Pop In. We just need to remove top or transform tags and add the animation tag in it.
\n/*Don't need the defaults*/\n/*Now show it*/\n#popup.show {\n -webkit-animation: pop-swirl 1s ease forwards; /*trigger the keyframe*/\n visibility: visible;\n z-index: 200;\n opacity: 1;\n}\n#popup.show ~ #overlay {\n opacity: 1;\n visibility: visible;\n z-index: 100;\n}Bonus!
\nThe Anvil Effect
\nLet's shock your screen with this heavy pop-up. You can achieve the anvil effect by using this code.
\n@keyframes anvil {\n 0% {\n transform: scale(5) rotate(0);\n opacity: 0;\n box-shadow: 0 0 0 rgba(241, 241, 241, 0);\n }\n 50% {\n transform: scale(1) rotate(-0.2deg);\n opacity: 1;\n box-shadow: 0 0 0 rgba(241, 241, 241, 0.5);\n }\n 75% {\n transform: scale(1) rotate(0.2deg);\n opacity: 1;\n box-shadow: 0 0 250px rgba(241, 241, 241, 0.5);\n }\n 100% {\n transform: scale(1) rotate(0);\n opacity: 1;\n box-shadow: 0 0 500px rgba(241, 241, 241, 0);\n }\n}\n#popup[data-pop="anvil"].show {\n -webkit-animation: anvil 1s cubic-bezier(0.38, 0.1, 0.36, 0.9) forwards;\n visibility: visible;\n z-index: 200;\n opacity: 1;\n}\n#popup[data-pop="anvil"].show ~ #overlay {\n opacity: 1;\n visibility: visible;\n z-index: 100;\n}Of course a tutorial won't be complete without a demo.
\nSlide Down Demo Pop In Demo Pop Swirl Demo Anvil Demo
\nAnd there you have it. A little something to spice up your pop-up game. I hope this helps you woo your users and entertain them. Until next time. Cheers.
\n","frontmatter":{"title":"Animate the modal popup using CSS","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"March 23, 2015","updated_date":null,"tags":["Slide","CSS","Swirl","PopUp"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/fd58cd8b2750bcda4251057bf96d6b25/ad85c/simplepop.webp","srcSet":"/static/fd58cd8b2750bcda4251057bf96d6b25/61e93/simplepop.webp 200w,\n/static/fd58cd8b2750bcda4251057bf96d6b25/1f5c5/simplepop.webp 400w,\n/static/fd58cd8b2750bcda4251057bf96d6b25/ad85c/simplepop.webp 600w","sizes":"(max-width: 600px) 100vw, 600px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/animating-simple-css-popup-tutorial/"}}},{"node":{"id":"748f76a4-22c7-59b2-98fc-63c818315455","html":"I know what you're thinking. Why am I writing this blog? There's like a bunch of apps out there that do this thing automatically. See, that's the problem, \"automatically\". That means you have no control over it when it messes things up. Even if you do, you might mess things up for other stuff too.
\nThis is why controlling your own code is better than letting other apps do it. Just like what my mentor said, \"Don't let the apps write your own code, they screw it up\".
\nLet's get started
\nLet's make a responsive grid without using any crazy percentages or complicated margins. Sounds cool? Good.
\nBy now you know how complicated it is to calculate all the width and margins to make sure they correspond with each other. Not to mention that you need to use percentages on both of them which sometimes doesn't work, especially with our friend IE8.
\nWhat if we create a grid that doesn't need margins for spacing? Or using percentages to separate objects? Sounds awesome right? No more calculating for the right percentages and getting crazy numbers.
\nLet's start with 4 grids first. So 100 / 4 = 25 then add a percentage (%) sign and we get 25% for our 4 grid system. No crazy numbers there, but we need spacing. To add spaces between those elements just add padding on left and right. Pixels or percent, it's up to you. Yes, yes, padding adds width but, if you add \"box-sizing: border box\" on our lovely grid, the padding will start respecting your decision to add a width of 25% and start pushing everything inside.
\n![\"grid\"](\"/061ca7bb25044306d0f8d74f574250ce/grid.webp\")
There you have it, Spacing. By now your CSS code will look like this.
\ndiv {\n width: 25%;/*4 grid system*/\n padding: 0 5px;/*spacing*/\n box-sizing: border-box;/*removes the added with from padding*/\n float: left; /*put them side by side*/\n}Problem
\nOf course, there's no perfect code. Since we're using padding on both left and right. you'll see some spacing too on the left and right side of your website. For example, I used 5px padding. That means I will have a 5px offset on the left and right side of my screen. It doesn't align with my site anymore.
\nSolution
\nTo tackle this problem we need to add a margin on the parent of our grid. Since my padding is 5px, I need to add a -5px margin on left and right to stretch it back to it's intended size. So our code will look like this now.
\nparent {\n margin: 0 -5px;\n}\nparent div {\n width: 25%;/*4 grid system*/\n padding: 0 5px;/*spacing*/\n box-sizing: border-box;/*removes the added with from padding*/\n float: left; /*put them side by side*/\n}I'd like to also point out that if your parent has a width (which it doesn't really need because our grid css will add a width to the parent), the negative margins won't work. So, be careful.
\nAnother thing to watch out for, because we're using floats, we will also need to use a clearfix hack on our parent.
\nUsing the simple code we learned today will create all the grids you want.
\n1 = 100%
\n2 = 50%
\n3 = 33.33%
\n4 = 25%
\n5 = 20%
\n6 = 16.66%
\n7 = 14.28%
\n8 = 12.5%
\n9 = 11.11%
\n10 = 10%
and so on.
\nSee it on codepen.
\nAnd this is where it ends. I hope this will help you easily create a grid in the near future. If you have any other tips, leave it in the comments and I'll be happy to try it out. Cheers.
\n","frontmatter":{"title":"CSS Responsive Grid, Re-imagined","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"March 16, 2015","updated_date":null,"tags":["CSS","Grid","Responsive"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/b965f64c315a9fddcd7037c0d1e1441f/ad85c/desdev.webp","srcSet":"/static/b965f64c315a9fddcd7037c0d1e1441f/61e93/desdev.webp 200w,\n/static/b965f64c315a9fddcd7037c0d1e1441f/1f5c5/desdev.webp 400w,\n/static/b965f64c315a9fddcd7037c0d1e1441f/ad85c/desdev.webp 600w","sizes":"(max-width: 600px) 100vw, 600px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/css-responsive-grid/"}}},{"node":{"id":"f6633a4e-e2a1-5028-9180-641517df104b","html":"Are you tired of eye dropping (or worse… guessing) the colors of every social network you like? Fear not my friend, I have searched the webs to find our beloved social media colors and listed it out in hex form.
\nFacebook #3b5998
\nGoogle Plus #F90101
\nLinkedin #007bb6
\nTwitter #55acee
\nYahoo #400090
\nAmazon #FF9900
\nAol #066cb1
\nDelicious #67b6e3
\nDigg #486ca3
\nDisqus #35a8ff
\nFoursquare #1cafec
\nGithub #181616
\nGoogle #0266C8
\nHyves #f9a539
\nInstagram #406e94
\nKaixin #bb0e0f
\nLive #004C9A
\nLivejournal #3770a3
\nMixi #d1ad5a
\nMyspace #313131
\nOdnoklassnikki #f69324
\nOrange #ff6600
\nPaypal #13487b
\nPersona #e0742f
\nPinterest #cb2128
\nQQ #009BD9
\nReddit #ff5700
\nRenren #005baa
\nSalesforce #219CDF
\nStackexchange #4ba1d8
\nSteam Community #666666
\nTumblr #32506d
\nVerisign #0261a2
\nVirgilio #eb6b21
\nVkontakte #45668e
\nSinaweibo #bb3e3e
\nWordPress #21759c
\nMailru #1897e6
\nXing #007072
\nOpenid #f7921c
\nDid I miss anything? Add it in the comments and help build this awesome list.
\n","frontmatter":{"title":"Social Media Colors in Hex","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"February 06, 2015","updated_date":null,"tags":["SocialMedia","Facebook","Google","Color"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/fe80482126ca4794c0c2411058451279/e7487/darrylblog1-150x150.webp","srcSet":"/static/fe80482126ca4794c0c2411058451279/e7487/darrylblog1-150x150.webp 150w","sizes":"(max-width: 150px) 100vw, 150px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/social-media-colors-hex/"}}},{"node":{"id":"9a5b4f7a-311b-547d-9127-95044c0422ac","html":"W3C stands for the World Wide Web Consortium, a recognized global web standards body. Tim Berners-Lee founded this organization and is run by a full-time staff to continue creating and preserving web standards.
\nThese specifications are then used to direct the creation of code that lives up to those standards by web developers and browsers. They write the rule-book in a nutshell, which helps determine whether our code is well-written or poorly written.
\nLet's understand some essential points of W3C validation.
\nWorld Wide Web Consortium (W3C) allows internet users to check HTML and XHTML documents for well-formatted markup. Markup validation is an important step towards ensuring the technical quality of web pages.
\nW3C validation is the process of checking a website's code to determine if it follows the formatting standards. If you fail to validate your website's pages based on W3C standards, your website will most likely suffer from errors or poor traffic owing to poor formatting and readability.
\nW3C validation helps you to get better rankings in search engines (SEO). Errors in your code can affect your site's performance and make a big impact on your site's SEO. Search engines check the HTML or XHTML code of your website when searching.
\nIf they find invalid HTML or XHTML code – meaning code that does not follow the official rules, you might be removed from their indexes. If there is an error on your web page code, robots will stop searching your whole website's content.
\nHaving a standards-compliant code is the best practice for web design. It also teaches and encourages best practices for web design. While many veterans have learned to create error-free code and make relatively few validation errors, most beginners make more errors.
\nComputer validation checks can help beginners learn from their mistakes.
\n\"These technologies, which we call \"web standards,\" are carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the web.\" — Web Standards Group
W3C validated websites will be easily accessed by people with modern browsers. Validation improves usability and functionality because your users are less likely to run into errors when displayed on browsers compared to non-validated websites.
\nValidation is fully compatible with a wide range of dynamic pages, scripting, active content, and multimedia presentations.
\nThe website validation process allows website designers to correct formatting errors that impact website performance, and following international standards, the code used in websites is reduced in size while improving efficiency.
\nBecause of this, web pages are displayed much faster and flow much better compared to websites that have not been validated.
\nMaking website browsers friendly is one of the biggest reasons why W3C code validation was introduced. Websites that are not validated may display correctly in one browser but not in other browsers. Many websites face cross-browser problems.
\nWebsites that are not validated may display formatting problems when used in certain browsers. On the other hand, W3C validated websites are displayed without errors regardless of what browser is used.
\nThere are five major web browsers: Google Chrome, Firefox, Microsoft Edge, and Safari, and usage among them translates to millions of internet users.
\nWith the recent boom in smartphones and tablets, more people will be accessing the Internet from mobile devices than desktop computers.
\nBy 2020, mobile commerce will reach $2.91 trillion worldwide, and some sectors are seeing an even higher proportion of mobile traffic, so there is a growing need for website owners to maximize the usability of their websites on new devices.
\nUnfortunately, many website owners do not take advantage of this growth and forego W3C validation that makes sure their websites and web pages are mobile-friendly too. If you want your website to be visited by as many users as possible, accessibility should be a big factor.
\nWebsites or web pages that validate using W3C website validation have code formatted efficiently and are easy to edit, and it helps website owners to create a new page or another new website with similar formatting.
\nThe validated code used in W3C HTML validation, W3C XHTML validation, or W3C CSS validation can be used in future sites.
\nValidators tell you where you have errors in your code. If your page isn't displaying as expected, a validator might very well point you to the cause of the display problems.
\nAlso, an invalid code that may display fine in one document may show stopping errors in another because of the encompassing code.
\nValidation is comparing your code to W3C standards. The best way to validate your code is by using the W3C validation tools.
\n\nHTML Validator:
\nThis validator checks the markup validity of web documents in HTML, XHTML, SMIL, MathML, etc
\nCSS Validator:
\nThis validator checks the CSS validity of web documents in HTML, XHTML etc.
\nThere are plenty of browser extensions that will test the page you're viewing against the W3C validators.
\nHTML Tidy is another option for validating pages, though it may not offer the exact same results as the W3C validator. One advantage of HTML Tidy is using an extension; you can check your pages directly in the browser without visiting one of the validators sites.
\nIf at all possible, any website should follow W3C validation requirements. It is the right way to do it, but it has many enduring advantages, such as extending the lifespan of the pages, maintaining browser stability, and much more. This will help you understand why W3C is necessary to test all our websites for W3C validation before calling a project complete.
\n","frontmatter":{"title":"W3C Validation: What is it and why to use it?","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"January 26, 2015","updated_date":null,"tags":["W3C","Validation"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/61a5831ae676536f6f686f26efd47eea/58556/w3c.webp","srcSet":"/static/61a5831ae676536f6f686f26efd47eea/61e93/w3c.webp 200w,\n/static/61a5831ae676536f6f686f26efd47eea/1f5c5/w3c.webp 400w,\n/static/61a5831ae676536f6f686f26efd47eea/58556/w3c.webp 800w,\n/static/61a5831ae676536f6f686f26efd47eea/99238/w3c.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/w3c-validation/"}}},{"node":{"id":"f2bb40e0-d93e-545d-b9ca-c70a37316cd6","html":"Welcome to our new initiative to contribute and spread the learnings/findings we had working with LoginRadius API!
\nWe always try to come up with new ideas/process during our development and research sessions..sometimes they are funny but awesome. :). We'll share those ideas and experiences.look forward for your comments/feedback!
\n--
\nLoginRadius Engineering team
\n","frontmatter":{"title":"Hello developers and designers!","author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null},"date":"May 02, 2014","updated_date":null,"tags":["Engineering"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/b965f64c315a9fddcd7037c0d1e1441f/ad85c/desdev.webp","srcSet":"/static/b965f64c315a9fddcd7037c0d1e1441f/61e93/desdev.webp 200w,\n/static/b965f64c315a9fddcd7037c0d1e1441f/1f5c5/desdev.webp 400w,\n/static/b965f64c315a9fddcd7037c0d1e1441f/ad85c/desdev.webp 600w","sizes":"(max-width: 600px) 100vw, 600px"}}}},"fields":{"authorId":"Team LoginRadius","slug":"/engineering/hello-developers-and-designers/"}}}]},"authorYaml":{"id":"Team LoginRadius","bio":"LoginRadius is a leading provider of cloud-based Customer Identity and Access Management (cIAM) platform.","github":"LoginRadius","stackoverflow":null,"linkedin":null,"medium":null,"twitter":null,"avatar":null}},"pageContext":{"id":"Team LoginRadius","__params":{"id":"team-login-radius"}}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}