{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/46","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"In this blog, I will cover some of my favorite Sublime features. Use of these plugins will dramatically reduce the amount of tedious tasks…","fields":{"slug":"/engineering/beginners-guide-for-sublime-text-3-part-2/"},"html":"

In this blog, I will cover some of my favorite Sublime features. Use of these plugins will dramatically reduce the amount of tedious tasks you have to perform, and make your worktime really fun. I will start with some of the most basic features that come with fresh installation of Sublime. There are lots of good tutorials on Sublime shortcuts and plugins on the internet, but I feel there should be more about these fundamental features. I have seen many people who are familiar with the plugins but not with these cool built-in features. In this article we will be introducing \"Snippets\", \"Project\" and \"Macros\".

\n

Here we go:

\n

Snippets

\n

\"snippet-demo\"

\n

Back when i introduced Sublime editor to my friends,\"Snippets\" was among the first few features which really intrigued them. To give a quick peek what a snippet looks like:

\n

This 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.

\n

\"new-snippet\"

\n

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:

\n\n
Hello, ${1:this} is a ${2:snippet}.
\n

Note: The dollar sign \"$\" allows you to use tab key to jump between, so set it wisely!

\n\n

Now save it, but keep in mind putting it in the correct location is important!

\n

If 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\"

\n

Project

\n

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:

\n

Saving and using your projects is very straightforward.

\n\n

That's it! You're done! Super easy right?

\n

Macros

\n

\"without-macro\"

\n

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:

\n

It 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\"

\n

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:

\n

Magic! 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.

\n\n

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.

\n\n

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.

\n\n

Similar to other Sublime tools, it will be saved with an extension called \".sublime-macro\", after it gets saved you will be able to find it in your Macro User List.

\n

To Be Continued ..

\n

I hope you had fun and learned something new about Sublime. Next time we will cover some really good packages/plugins that you should consider using to make your life and work even simpler.\nHappy coding!!!

\n","frontmatter":{"date":"November 10, 2015","updated_date":null,"description":"Getting started with one of the lightweight Code Editor Sublime Text and introduction to Snippets, Project and Macros","title":"Beginner's Guide for Sublime Text 3 Plugins","tags":["SublimeText","CodeEditor"],"pinned":null,"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"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"In order to display your LoginRadius Login Interface in a pop-up you can leverage Jquery-ui which is a well documented, easy-to-use library…","fields":{"slug":"/engineering/displaying-the-loginradius-interface-in-a-pop-up/"},"html":"

In order to display your LoginRadius Login Interface in a pop-up you can leverage Jquery-ui which is a well documented, easy-to-use library that allows you to handle some common functionality such as pop-up dialogs and other UI features. In this article we go over the steps to use Jquery-ui to display a pop-up on your page with a LoginRadius login interface using the LoginRadius HTML SDK.

\n

1. Get the required references this guide relies on: Jquery and Jquery-ui. You can include the hosted reference files in the header of your page:

\n
<!--\n\n-->
\n

2. Include the LoginRadius Interface Javascript and HTML5 SDK reference:

\n
<!--\nvar options={};\noptions.login=true;\nLoginRadius_SocialLogin.util.ready(function () {\n    $ui = LoginRadius_SocialLogin.lr_login_settings;\n    $ui.interfacesize = "";\n    $ui.apikey = "";\n    $ui.callback="";\n    $ui.lrinterfacecontainer ="interfacecontainerdiv";\n    LoginRadius_SocialLogin.init(options);\n});\n-->
\n

3. Create the HTML structure for your page. Below we have created a button to trigger our pop-up display as well as the dialog container that will be displayed in the custom pop-up which is hidden by default. We have also included a div to display profile data after successfully authenticating.

\n
<!--Login\n\n    \n\n -->
\n

4. Create a JavaScript function to handle the display of the pop-up dialog. The below function utilizes Jquery-ui functions to display the dialog and the LoginRadius login interface initialization function to render the login interface on the popup:

\n
function Login(){\n    $( "#dialog" ).dialog();\n    LoginRadius_SocialLogin.init(options);\n}
\n

5. Include the JavaScript callback script to handle a successful authentication and display the profile data.

\n
LoginRadiusSDK.setLoginCallback(Successfullylogin);\nfunction Successfullylogin(){\n    LoginRadiusSDK.getUserprofile( function( data) {\n        $( "#dialog" ).dialog("close");\n        document.getElementById("profile").innerHTML = JSON.stringify(data);\n    });\n}
\n

Full Example:

\n
<!--\n\n\n\n\n var options={};\noptions.login=true;\nLoginRadius_SocialLogin.util.ready(function () {\n$ui = LoginRadius_SocialLogin.lr_login_settings;\n$ui.interfacesize = "";\n$ui.apikey = "";\n$ui.callback="";\n$ui.lrinterfacecontainer ="interfacecontainerdiv";\nLoginRadius_SocialLogin.init(options); }); \n\n\n \nfunction Login(){\n    $( "#dialog" ).dialog();\n    LoginRadius_SocialLogin.init(options);\n}\n \nLoginRadiusSDK.setLoginCallback(Successfullylogin);\nfunction Successfullylogin(){\n    LoginRadiusSDK.getUserprofile( function( data) {\n        $( "#dialog" ).dialog("close");\n        document.getElementById("profile").innerHTML = JSON.stringify(data);\n    });\n}\n \nLogin\n \n\n \n-->
\n","frontmatter":{"date":"November 09, 2015","updated_date":null,"description":null,"title":"Displaying the LoginRadius interface in a pop-up","tags":["HTML","Login","UI","LoginRadius Interface"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/b457f6215159c9dcc593ccf7c891be5b/e7487/simplepop-150x150.webp","srcSet":"/static/b457f6215159c9dcc593ccf7c891be5b/e7487/simplepop-150x150.webp 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}},{"node":{"excerpt":"Almost every active website worldwide uses jQuery, you can check stats here , but using it without optimization might make the DOM very slow…","fields":{"slug":"/engineering/optimize-jquery-sizzle-element-selector/"},"html":"

Almost every active website worldwide uses jQuery, you can check stats here , but using it without optimization might make the DOM very slow. The same goes for other javascript libraries, such as SizzleJS. To ensure the performance of your DOM, you have to follow some best practices for it.

\n

In this article I am going to list down some of the most critical factors that you need to watch out. Even though this not a complete list; taking care of these will help you optimize those jQuery Selector.

\n

Let's start!

\n

Always cache your selector

\n

Whenever you apply any selector in jQuery or SizzleJS,  the selector engine goes through the whole DOM to find the specified element.

\n

For example, if you use the code below, it will go through the whole DOM twice in order to find \".myClass\" selector.

\n
$(".myClass").show();\n\n$(".myClass").addClass("anotherClass");
\n

But instead of that, if you make all the methods in a chained format like this. It will only try to find that class once.

\n
$(".myClass").show().addClass("anotherClass");
\n

Or if you want to use this element in other places; you can do so by doing it in this way.

\n
var myElem = $(".myClass");\n\nmyElem.show();\n\nmyElem.addClass("anotherCLass");
\n

In both of these cases, the selector will be executed only once. Some selectors are very slow to traverse and passing them again and again will make your DOM very slow.

\n

Read on the next point to understand,  how the type of selector affects performance.

\n

Prioritizing selectors based on their performance

\n

Selector's type affects the performance of your site. SizzleJS is a smart selector engine that also uses native js APIs for finding specific element. This is the main reason why ID selector and tag selector perform faster than others. But, if you prefer using jQuery, it’s pretty much the same. Modern browsers also have an API to find an element by class name but, let’s just focus on jQuery and SizzleJS.

\n\n

You can verify performance. In some exceptional cases, the selection of those tags does not matter; It’s all in the combination of the selectors. Because, it affects the performance of your site, let's discuss this on next point.

\n

Selecting ID selector first and then other ones

\n

If you have the combination of selectors, then the sequence of selectors matter for optimization. For example:

\n
$("#someId div .someClass");
\n

The same code can be written as:

\n
$("#someId").find("div .someClass");
\n

Both of these variant represent the same thing but in the term of performance, second one is better. The reason for that is because in the first code, Sizzle will go through the DOM 3 times to find #someId, div, and .someClass.

\n

In the second one, the selector engine will go through the DOM again but, this time, it’ll only look for #someId and then find the rest inside that element without going through the DOM again.

\n

See how this will affect performance.

\n

Being more specific in right hand side instead of left hand side

\n

Sizzle executes selector from right to left so it will definitely  improve performance if applied in right except left.

\n

Unoptimized code:

\n
$( "div.myclass .myChildClass" );
\n

Optimized code:

\n
$( ".myclass td.myChildClass" );
\n

If you don’t see the difference, find the div and td.

\n

Selection inside a parent always improves performance

\n

When you have a context, or any level of parent, then you can select an element inside that parent. It will perform better this way than selecting it directly. Because, in this case, the selector engine goes through the DOM once to find the parent.

\n

For example, assuming you are trying to find “.child” class:

\n
$(".child");
\n

Is slower than

\n
var parent = $("#parent");\n\nparent.find(".child").show();
\n

You can also specify context by following syntax

\n
$(".child", parent).show();
\n

Excessive selector slows down your query

\n

The selector engine always checks every selector you have specified and it might traverse slowly. That being said, always make sure to specify minimum selectors in order to maintain the performance.

\n

For example, you are  trying to find “.myClass” using both of these code variants,

\n
$("#div div span.myClass");
\n

Is slower than

\n
$("#div").find(".myClass");
\n

\n

The .children() tag is quicker than .find()

\n

In case, you are trying to find a children element, it is recommended to use .children() instead of .find(). Using .find() will tell jQuery to look on every level of children, while .children() will find only the first level children. Therefore .children() is faster than .find().

\n

For example, you are trying to find “.child” inside $parent and it is the first level children of the $parent.

\n
parent.find(".child");
\n

Is slower than

\n
parent.children(".child").show();
\n

\n

Use minimum DOM append

\n

DOM manipulation is very heavy so always try to ignore or minimize using it.

\n

For example, by using the code below, it will make the process sluggish because you didn’t apply any selector caching. Resulting in going through  the DOM ten times and appending an element.

\n
for( var i = 0; i < 10; i++) {\n    $(".myClass").append("");\n}
\n

But instead of using the above code, using the code below will solve the whole issue of appending and traversal. Not only that, it will merge the 10 times manipulation of DOM into a single call.

\n
var myClassInnerHtml = "";\nfor( var i = 0; i < 10; i++ ){\n    myClassInnerHtml += "";\n}\n$(".myClass").append(myClassInnerHtml);
\n

All the tips I have mentioned above is highly dependant on your requirement but one thing is for sure; Optimization will definitely improve your process.  ‘SizzleJS’ is most the powerful and quick element selector. But, without writing optimized code you can’t prevent the DOM from freezing. With that being said,  jQuery is awesome but without optimized code it can get more DOM freezes and frustrate your users.

\n

I hope this help you optimize your element selecting. Thank you and have a great coding.

\n","frontmatter":{"date":"November 05, 2015","updated_date":null,"description":null,"title":"Optimize jQuery & Sizzle Element Selector","tags":["Engineering","JQuery"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/4eb8d5a3c886c469b47f2341713e60af/e7487/jquery-sizzle-element-selector-150x150.webp","srcSet":"/static/4eb8d5a3c886c469b47f2341713e60af/e7487/jquery-sizzle-element-selector-150x150.webp 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"excerpt":"Hi guys! When you write test cases, do you face the problem of sharing your test cases with your team members or having to use multiple…","fields":{"slug":"/engineering/how-to-maintain-test-cases-in-excel-sheets/"},"html":"

Hi guys! When you write test cases, do you face the problem of sharing your test cases with your team members or having to use multiple colors for test cases?
\nI have a solution for these problems that is to maintain your test cases in an excel sheet.

\n

Definition
\nTest cases are the part of testing by which a product can be tested properly according to a set of requirements.

\n

Advantages of using test cases in excel sheets

\n
    \n
  1. Easily handle the test cases in the sheet.
    2. \n
  2. Easily attach links.
    3. \n
  3. Easily share sheets with team members.
    4. \n
  4. Easily use multiple colors in a sheet.
    5. \n
\n

Standard format of Test Cases
\nSome common fields that are used in test case writing are:

\n

\"1\"

\n
    \n
  1. \n
      \n
    1. \n

      Test Case Id: This field is defined by what type of system we are testing. Below are the standard rules:

      \n
        \n
      • If we are making a test case for any application which doesn’t belong to any specific module then ID would start as TEST_ID 1.
        • \n
      • If we are making test cases for any specific module then ID would be used as MOD_ID 1.
        • \n
      • If test case has more than one expected result then we can use test cases as TEST_ID 1.1,TEST_ID 1.2 etc. All these test cases are a sub-part of TEST_ID 1.
        • \n
      \n
      2. \n
    \n
    2. \n
\n

In this way we can maintain all the test case IDs and if in the future we can get any requirement or change logs then easily add or change the test case using the following  standard rules without changing the test case IDs of previously written test cases.

\n

Note: Test Case Id always uses capital letters.

\n
    \n
  1. Feature Of Product: This field defines the feature of a product for the type of product we are using.The main advantage of maintaining this field is, in the future if any requirements change then we can easily calculate how many test cases are affected by this and we will change or remove the test cases.**
    2. \n
  2. Feature Description: This field explains what type of feature we will test on which condition.**
    3. \n
  3. Steps To Execute: These are the steps to be executed on the system being tested to get the expected results. Steps should be understandable and correct. They are written and executed according to a sequence.**
    4. \n
  4. Expected Result: These are the wanted outputs from the execution steps performed. Results should be clearly defined for every step. It specifies what are the specifications and what we will get from a particular specification.
    5. \n
  5. Actual Result: This field has the real result after the performed execution steps on the system under testing. If the result matches with the expected result then we can write as expected.
    6. \n
  6. Pass/Fail: If the result is showing according to the expected result, mark as pass and if not get the output according to the expected, result mark as fail. You are using color for status. Use the green color for Pass and red color for Fail.
    7. \n
  7. Comment: This column is for additional information for e.g. if status is set to “cannot be tested”,  then tester can give the reason in this column.**
    8. \n
\n

Here I have explained a very general format, this will cover almost all the scenarios but we can not assure that all the requirements have been covered, you can proceed the following way to cover all requirements.

\n

Knowing that all the Requirements have been covered
\nTo know that all the requirements have been covered, you need to maintain a Traceability Matrix documentation. Let's take a look on how to create this document.

\n

Traceability Matrix is a document which provides linking between the requirements and the product which we have developed.
\nTraceability Matrix can be divided into 2 parts:-

\n\n

\"2\"

\n
    \n
  1. \n

    Traceability Matrix :

    \n

    Traceability Matrix covers all the product requirements.We can say that it is a document which maps and traces requirements with test cases. Prime fields of this traceability matrix are

    \n

    2.1 Requirement Id: This field identifies all the testable requirements.
    \n2.2 Requirement Description:  This field contains the short
    \ndescription of requirements.
    \n2.3 Test Case Id: According to requirements description which test case id is
    \ncovered.
    \n2.4 Status: Mention here the status of test cases such as passed, failed, on hold or
    \ninvalid.

    \n
    2. \n
\n

As per the image below:

\n

\"3\"
\nRequirement ID REQ_ID 1 covered in Test Case Id TEST_ID 1 and TEST_ID 2
\nRequirement ID REQ_ID 2 covered in Test Case Id TEST_ID 3 ,TEST_ID 4, TEST_ID 5

\n

Advantages of using Traceability Matrix

\n
    \n
  1. Easily identify missing functionality.
    2. \n
  2. Easily cover all customer requirements.
    3. \n
  3. Make sure that all requirements are covered by developers in test cases
    4. \n
  4. If any change request is made we can easily change in test cases.
    5. \n
\n

So we can say that test cases are easily handled in excel sheets. We can use multiple colors in excel sheets for test cases, easily attach links with test cases and easily trace test cases.

\n","frontmatter":{"date":"November 03, 2015","updated_date":null,"description":"Learn how to maintain test cases in Excel sheets","title":"Maintain Test Cases in Excel Sheets","tags":["Excel","Tes"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/e0fafb559e2ab74897544f5b5e92f003/58556/test_cases.webp","srcSet":"/static/e0fafb559e2ab74897544f5b5e92f003/61e93/test_cases.webp 200w,\n/static/e0fafb559e2ab74897544f5b5e92f003/1f5c5/test_cases.webp 400w,\n/static/e0fafb559e2ab74897544f5b5e92f003/58556/test_cases.webp 800w,\n/static/e0fafb559e2ab74897544f5b5e92f003/99238/test_cases.webp 1200w,\n/static/e0fafb559e2ab74897544f5b5e92f003/135cd/test_cases.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Shefali Yaduvanshi","github":null,"avatar":null}}}},{"node":{"excerpt":"Are you afraid of hackers and feel unsafe for admin and front user to login through same area? No need to worry as in this article, I am…","fields":{"slug":"/engineering/separate-login-page-for-admin-and-user/"},"html":"

Are you afraid of hackers and feel unsafe for admin and front user to login through same area?
\nNo need to worry as in this article, I am going to guide you with how to create separate login area for admin. Along with that, I will also provide the required steps to disable administrator login through user/login page.

\n

Please follow the following implementation steps.

\n

Step by step Guide:

\n
    \n
  1. In the first step, you need to implement hook_menu in your module file.
    2. \n
\n
 t('Admin Login Page'),\n    'page callback' => 'yourmodule_admin_login_page',\n    'page arguments' => array(),\n    'access arguments' => array('access content'),\n    'type' => MENU_CALLBACK,\n  );\n  return $menu_items;\n}-->
\n
    \n
  1. After adding menu in module file, the next step is to define the page callback function yourmoduleadminlogin_page. In this function, we’ll define the layout of admin login page using theme.
    2. \n
\n
function yourmodule_admin_login_page() {\n  return theme('yourmodule_admin_login_template');\n}
\n
    \n
  1. Now that you have defined page callback function, the next step is to implement hook_theme in your module file.
    2. \n
\n
array(\n      'template' => 'yourmodule-admin_login',\n      'render element' => 'form',\n      'path' => $path,\n    ),\n  );\n  return $theme;\n}-->
\n
    \n
  1. After implementation of hook theme in module file, the next step is to implement preprocess function for template file.
    2. \n
\n
 'hidden',\n    '#value' => 'admin_login',\n    '#name' => 'hidden_admin_login_form',\n  );\n  $variables['rendered'] = drupal_render($form);\n}-->
\n

Note : In the above code, we have used the hidden element to identify the admin login page.

\n
    \n
  1. After adding menu in module file, the next step is to define the page callback function yourmodule_admin_login_page. In this function, we’ll define the layout of admin login page using theme.
    2. \n
\n

'yourmodule-admin_login.tpl.php'

\n
    \n
  1. Now paste the following code in yourmodule-admin_login.tpl.php file.
    2. \n
\n
<!--\n  \n-->
\n
    \n
  1. After that, clear your website’s cache and check the following url for your admin login page
    2. \n
\n

URL : your-site-domain/admin/login

\n

All above steps are used to show admin login page. But if you want that only administrator can login through page admin/login then follow the following the next steps.

\n
    \n
  1. In this step, you need to implement hook_form_alter function. In this function we will add custom validation.
    2. \n
\n
function yourmodule_form_alter(&$form, &$form_state, $form_id) {\n  if ($form_id == 'user_login') {\n    $form['#validate'][] = 'yourmodule_external_validate';\n  }\n}
\n
    \n
  1. After that, add the following code to define the custom validation in which only administrator can login.
    2. \n
\n
roles);\n    if ($access_granted) {\n      return TRUE;\n    }\n    else {\n      form_set_error('', t('Only site administrator can login.'));\n      return FALSE;\n    }\n  }\n}-->
\n

Note: If you want that administrator can’t login through user login page then add following code to do this.

\n

Add the mentioned code in function yourmodule_external_validate

\n
roles);\n    if ($user_access_granted) {\n      form_set_error('', t('Only front user can login.'));\n      return FALSE;\n    }\n    else {\n      return TRUE;\n    }\n}-->
\n

Complete code of function yourmodule_external_validate looks like:

\n
roles);\n    if ($access_granted) {\n      return TRUE;\n    }\n    else {\n      form_set_error('', t('Only site administrator can login.'));\n      return FALSE;\n    }\n  }\n  else {\n    $user = user_load($form_state['uid']);\n    $user_access_granted = in_array('administrator', $user->roles);\n    if ($user_access_granted) {\n      form_set_error('', t('Only front user can login.'));\n      return FALSE;\n    }\n    else {\n      return TRUE;\n    }\n  }\n}-->
\n

If you are searching over the web and can’t find anything to create separate admin login page in drupal, Please follow the mentioned above steps and you are done. Also create different layout for this  admin login page.

\n","frontmatter":{"date":"October 29, 2015","updated_date":null,"description":null,"title":"Separate Drupal Login Page for Admin and User","tags":["Drupal","Admin Panel"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.9047619047619047,"src":"/static/9e0cd76a1ad2ed809f396189f3db918c/58556/drupal.webp","srcSet":"/static/9e0cd76a1ad2ed809f396189f3db918c/61e93/drupal.webp 200w,\n/static/9e0cd76a1ad2ed809f396189f3db918c/1f5c5/drupal.webp 400w,\n/static/9e0cd76a1ad2ed809f396189f3db918c/58556/drupal.webp 800w,\n/static/9e0cd76a1ad2ed809f396189f3db918c/99238/drupal.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}},{"node":{"excerpt":"This tutorial provides a solution to get email alerts, when a unhandled error occurs. For this tutorial, we are using WordPress. Imagine you…","fields":{"slug":"/engineering/how-to-get-email-alerts-for-unhandled-php-exceptions/"},"html":"

This tutorial provides a solution to get email alerts, when a unhandled error occurs. For this tutorial, we are using WordPress.

\n

Imagine 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.

\n

Step 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.

\n

Step 2. Let’s add the following line of code in this file under php tag.

\n
set_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}
\n

Step 3. Now save the file and upload on server.

\n

Whenever 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.

\n

Similarly we can use above code in drupal, joomla, and many other content management systems.
\nCommon config files on other platforms are listed below:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
CMS/application nameLocation of common file
4Images Gallery/config.php
B2 Evolution/conf/_basic_config.php
Boonex Dolphin/inc/header.inc.php
Concrete5/config/site.php
Coppermine Photo Gallery/include/config.inc.php
Crafty Syntax Live Help/config.php
Cube Cart/includes/global.inc.php
dotProject/includes/config.php
Drupal/sites/default/settings.php
e107/e107_config.php
FAQMasterFlex/faq_config.php
Gallery/config.php
Geeklog/db-config.php or /siteconfig.php or /lib-common.php
glfusion/private/db-config.php
Hotaru/hotaru_settings.php
Joomla/configuration.php
LiveSite/livesite/config.php
LifeType/config/config.properties.php
Mambo/configuration.php
Marketecture/include/config.php
MODx/manager/includes/config.inc.php
Moodle/config.php
MyBB/inc/config.php
Noahs Classifieds/app/config.php
Nucleus/config.php
ocPortal/info.php
OpenCart/config.php or /admin/config.php
osCommerce/includes/configure.php or /admin/includes/configure.php
Oxwall/ow_includes/config.php
PHP-Nuke/config.php
phpBB/config.php
phpFormGenerator/index.php or /mysql.class.php
phpFreeChat/forms/admin/config.inc.php (only if you have saved form input to a database)
PHPlist/config/config.php
phpMyDirectory/defaults.php
phpWCMS/include/inc_conf/conf.inc.php
phpWebSite/conf/config.php
PhpWiki/admin.php or /lib/config.php
Pligg/libs/dbconnect.php
Post-Nuke/config.php
PrestaShop/config/settings.inc.php
Saurus CMS/config.php
ShopSite/includes/configure.php or /admin/includes/configure.php
Siteframe/config.php
Simple Machines Forum/Settings.php
Soholaunch/sohoadmin/config/isp.conf.php
SugarCRM/config.php
Textpattern/textpattern/config.php
TikiWiki/db/local.php
Tomato Cart/includes/configure.php
TYPO3/typo3conf/localconf.php
WebCalendar/includes/settings.php
WHMCS/configuration.php
WordPress/wp-config.php
X7 Chat/config.php
Xoops/mainfile.php
Zen Cart/includes/configure.php or /admin/includes/configure.php
Zikula/config.php
\n","frontmatter":{"date":"October 26, 2015","updated_date":null,"description":null,"title":"How to Get Email Alerts for Unhandled PHP Exceptions","tags":["PHP","Email"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/7cc01786c805c6dabe755c22c0e6b3fb/7fbdd/email-alerts-unhandled-php.webp","srcSet":"/static/7cc01786c805c6dabe755c22c0e6b3fb/61e93/email-alerts-unhandled-php.webp 200w,\n/static/7cc01786c805c6dabe755c22c0e6b3fb/1f5c5/email-alerts-unhandled-php.webp 400w,\n/static/7cc01786c805c6dabe755c22c0e6b3fb/7fbdd/email-alerts-unhandled-php.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}}]},"markdownRemark":{"excerpt":"Introduction Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT…","fields":{"slug":"/engineering/how-to-integrate-jwt/"},"html":"

Introduction

\n

Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT, or JSON Web Tokens, a compact, stateless method for securely transmitting user identity and session data across services.

\n

With JWT token authentication, identity information is embedded in a signed token, allowing you to maintain user sessions without server-side storage. This approach is highly scalable and ideal for modern architectures like SPAs, mobile apps, and microservices.

\n

In this blog, we’ll walk you through what is JWT, why use it, and how to implement JWT authentication using LoginRadius.

\n

You’ll learn what JWT is, why it’s effective, and how it works in real-world applications. We'll cover both integration methods (IDX and Direct API), generating your signing key, managing sessions, storing the JWT token securely, and applying best practices throughout.

\n

Whether you're a developer, product manager, or IAM architect, this guide offers a complete foundation for implementing JWT token authentication into your application stack.

\n

What is JWT?

\n

JSON Web Token (JWT) is an open standard (RFC 7519) used to transmit information securely between parties as a JSON object. It’s compact, self-contained, and digitally signed, making it a reliable format for authentication and authorization across modern applications.

\n

A JWT consists of three parts:

\n
    \n
  1. Header – Contains metadata like the type of token and signing algorithm (e.g., HS256).
    2. \n
  2. Payload – Stores the actual data or “claims,” such as user ID, roles, and token expiry.
    3. \n
  3. Signature – A cryptographic hash that ensures the token hasn’t been tampered with.
    4. \n
\n

Example of a token structure:

\n

<base64Header>.<base64Payload>.<signature>

\n

Why Use JWT?

\n\n

How JWT Works?

\n

\"Flowchart

\n
    \n
  1. A user logs in with credentials.
    2. \n
  2. Your app (or identity provider like LoginRadius) issues a signed JWT.
    3. \n
  3. The client stores the token and sends it with each request (usually in the Authorization header).
    4. \n
  4. The server validates the token’s signature and claims.
    5. \n
  5. If valid, access is granted — without any session stored on the backend.
    6. \n
\n

JWT simplifies identity verification, especially when you're building apps that talk to APIs or need to scale without centralized session storage.

\n

JWT Authentication with LoginRadius: Overview

\n

LoginRadius provides robust support for JWT (JSON Web Token) authentication, which allows for flexible and secure access control across different digital platforms. Whether you're building a fully custom identity flow or using a pre-built interface, the platform supports various integration approaches depending on your architecture.

\n

If you're looking to understand how to implement JWT token authentication effectively, LoginRadius offers two primary implementation models that cater to different levels of customization and control:

\n

1. IDX Implementation – JWT through a Hosted Login Page

\n

The IDX-hosted login approach enables secure, standards-compliant, JWT-based authentication without requiring you to build a custom login interface. This is a strategic option for fast, compliant, and user-friendly deployments.

\n\n

Configuration Steps:

\n
    \n
  1. Enable JWT Login
    2. \n
  2. Go to authentication configuration settings and enable JWT Login in the Admin Console.
    3. \n
\n

\"Screenshot

\n
    \n
  1. Specify your signing algorithm and expiry policy, and define your JWT Secret Key.
    2. \n
  2. Input a secure JWT signing key.
    3. \n
  3. Specify token expiry duration (e.g., 15–60 minutes)
    4. \n
  4. Select the desired algorithm —HS256 for symmetric signing (same key signs and verifies)
    5. \n
  5. RS256 for asymmetric signing, where LoginRadius securely stores the private key used to sign the JWT.
    6. \n
  6. Your app or backend service uses the public key to validate the token signature.
    7. \n
  7. LoginRadius provides a JWKS (JSON Web Key Set) endpoint to dynamically fetch and rotate public keys, ensuring trust without key exposure.
    8. \n
  8. Update IDX Template for Callback
    9. \n
  9. Modify your IDX login page template to retrieve the JWT post-login. You can access the token via redirect URL parameters or secure JavaScript callbacks.
    10. \n
\n

Example Response:

\n

{

\n

\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR...\",

\n

\"expires_in\": 1800

\n

}

\n

This integration approach works best for all teams that want effective identity workflows without the complexity of building proprietary login screens, something that is crucial for customer portals, onboarding of mobile applications, and even managing access for business partners.

\n

2. Direct API Implementation – Self Managed Login

\n

If you’re building a custom login UI or working in a headless environment, LoginRadius lets you generate and handle JWTs directly through its Authentication APIs. Here’s how you can programmatically perform token authentication using the classic method:

\n\n

Configuration Steps:

\n

Step 1: Authenticate via API:

\n\n

Include the user’s credentials (email + password) in the request body.

\n

Step 2: Get JWT in Response

\n\n

{

\n

\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\",

\n

\"expires_in\": 3600

\n

}

\n

Step 3: JWT Decoding and Validation

\n\n

Step 4: Set Custom Claims (Optional)

\n

With LoginRadius, it is possible to customize the payload to include user roles and/or any additional metadata. You can set custom JWT claims on the Admin Console.

\n

With this method, you have complete customization over login flows while using LoginRadius to issue signed JWTs for user session management.

\n

NOTE- With either method, LoginRadius ensures that JWTs are securely signed, optionally short-lived, and compatible with standard token validation libraries, making integration seamless for everyone.

\n

To get started with JWT implementation, you can read our complete developer documentation.

\n

Hosted Login vs Direct API

\n

\"Illustration

\n

What is Session Management and How It Works with JWT

\n

Session management is how your app keeps track of a user after they log in so they don’t have to prove who they are with every request.

\n

In traditional apps, sessions are stored on the server using session IDs. Every time a request comes in, the server checks that session ID to verify the user.

\n

In modern apps, especially SPAs and APIs, JWTs are used to manage sessions without needing server-side storage; this is called stateless session management. The token itself carries the user’s identity, roles, and expiration details. As long as the token is valid, the user stays logged in.

\n

Good session management ensures:

\n\n

How LoginRadius Handles Session Management with JWT:

\n
    \n
  1. \n

    User Logs In

    \n\n
    2. \n
  2. \n

    Client Stores the Token

    \n\n
    3. \n
  3. \n

    Access Token Expiry

    \n\n
    4. \n
  4. \n

    Token Renewal

    \n\n
    5. \n
  5. Logout and Token Revocation Strategy
    6. \n
\n

When the user logs out, both the access token and refresh token should be cleared from client storage.

\n\n

Combining these strategies gives you greater control over token misuse and enables a robust, enterprise-grade logout flow.

\n

\"illustration

\n

How to Store JWT Tokens?

\n

When you implement JWT-based authentication, the client (browser or mobile app) needs a way to store the access token and, optionally, the refresh token after they are issued by the authentication server. This stored token is then attached to every subsequent request to prove the user's identity.

\n

Choosing where to store the JWT is a crucial security decision. The most common storage options are:

\n\n

Each option has trade-offs between security, accessibility, and persistence, and the right choice depends on your application's architecture and threat model.

\n

Recommended Storage Strategy

\n\n

Best Practices for Storing JWTs

\n
    \n
  1. Never store sensitive tokens (like refresh tokens) in localStorage or sessionStorage.
    2. \n
  2. Use Secure and HttpOnly flags with cookies to prevent JavaScript access and ensure transmission only over HTTPS.
    3. \n
  3. Set the SameSite=Strict or Lax attribute on cookies to protect against CSRF.
    4. \n
  4. Use short-lived access tokens and rotate refresh tokens regularly.
    5. \n
  5. Implement CSP (Content Security Policy) to reduce XSS risk.
    6. \n
  6. Avoid storing any tokens in frontend code (e.g., hardcoded in JS files).
    7. \n
\n

Conclusion

\n

JWT authentication with LoginRadius offers a modern, stateless approach to managing sessions across distributed systems. The IDX integration is ideal for rapid deployment, while the Direct API model is best for organizations needing deep customization and integration flexibility.

\n

With robust token signing, refresh capabilities, and centralized control, LoginRadius provides a future-ready foundation for secure, scalable identity architecture. Contact us to know more about JWT authentication and implementation guide.

\n

FAQs

\n

1. What is JWT authentication used for?

\n

A: JWT authentication securely verifies user identities, enabling stateless session management across web, mobile apps, and microservices without server-side session storage.

\n

2. How does LoginRadius simplify JWT integration?

\n

A: LoginRadius simplifies JWT integration by offering hosted IDX login pages and direct API-based authentication methods, enabling rapid deployment and deep customization.

\n

3. Is JWT authentication secure?

\n

A: Yes, JWT authentication is secure when implemented with best practices like short-lived tokens, secure storage methods, signature validation, and refresh token rotation.

\n

4. Can JWT tokens be revoked with LoginRadius?

\n

A: Yes, LoginRadius allows revocation of JWT refresh tokens explicitly, and supports strategies like short-lived tokens and key rotation to manage token lifecycles securely.

\n","frontmatter":{"date":"April 15, 2025","updated_date":null,"description":"Discover JWT (JSON Web Token) authentication, its advantages, and how to integrate it seamlessly using LoginRadius' hosted IDX and Direct API methods for secure, scalable identity management.","title":"JWT Authentication with LoginRadius: Quick Integration Guide","tags":["JWT","JSON Web Token","Authentication","Authorization"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":0.7782101167315175,"src":"/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp","srcSet":"/static/4cedb7829f98208cbc6d5a9aea4e983d/61e93/how-to-integrate-jwt.webp 200w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1f5c5/how-to-integrate-jwt.webp 400w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp 800w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1cc9f/how-to-integrate-jwt.webp 896w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},"pageContext":{"limit":6,"skip":270,"currentPage":46,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}