{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/45","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Delete A Node Click to View the Orginal Question To remove the given node，which means whoever is asking the value for this node should get…","fields":{"slug":"/engineering/delete-a-node-is-same-tree-move-zeroes/"},"html":"

Delete A Node

\n

Click to View the Orginal Question

\n

To remove the given node，which means whoever is asking the value for this node should get the value of the next node. Plus, the next node of this removing one should be the next next node.

\n

In diagram, with the following node list, we want to remove node 2.

\n

1 -> 2 -> 3 -> 4

\n

We update original Node 2 to Node 3 and skip the original Node 3, which gives out the list after removing node 2.

\n

1 -> 3 ------> 4

\n
/**\n* Definition for singly-linked list.\n* function ListNode(val) {\n* this.val = val;\n* this.next = null;\n* }\n*/\n/**\n* @param {ListNode} node\n* @return {void} Do not return anything, modify node in-place instead.\n*/\nvar deleteNode = function(node) {\n    node.val = node.next.val;\n    node.next = node.next.next;\n};
\n

Is Same Tree

\n

Click to View the Original Question

\n

Note: My solution is not efficient enough based on the performance, but I think it's fairly clean.

\n

I use recursion to solve the problem, first to define the basic cases, and recursively loop through both trees from left to right. If it hits one false, the whole result will be false.

\n
/**\n* Definition for a binary tree node.\n* function TreeNode(val) {\n* this.val = val;\n* this.left = this.right = null;\n* }\n*/\n/**\n* @param {TreeNode} p\n* @param {TreeNode} q\n* @return {boolean}\n*/\n \nvar isSameTree = function(p, q) {\n    if( p === q ) return true;\n    if(!p || !q || p.val !== q.val) return false;\n    return isSameTree(p.left, q.left) ? isSameTree(p.right, q.right) : false;\n};
\n

Move Zeroes

\n

Click to View the Original Question

\n

Here I have create two indices one called z to index the position for zeroes, another is i to loop through the nums array. They both increment by one when they see a non-zero value, but when it is zero, z stays at position and get ready to swap the position with next non-zero value i meets. By keep doing it, it will fill a consecutive row of zeroes, till the end.

\n
<!--/**\n* @param {number[]} nums\n* @return {void} Do not return anything, modify nums in-place instead.\n*/\nvar moveZeroes = function(nums) {\n    var z = 0;\n    for(var i = 0; i
\n","frontmatter":{"date":"December 22, 2015","updated_date":null,"description":null,"title":"Delete a Node, Is Same Tree, Move Zeroes","tags":["Data Structure","JavaScript","Linked List"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/5d9e9ee1d8ffc4932a01a1c72fc15ab7/403a4/code-js-300x300.webp","srcSet":"/static/5d9e9ee1d8ffc4932a01a1c72fc15ab7/61e93/code-js-300x300.webp 200w,\n/static/5d9e9ee1d8ffc4932a01a1c72fc15ab7/403a4/code-js-300x300.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Lucius Yu","github":null,"avatar":null}}}},{"node":{"excerpt":"What's one thing virtually every website has? If you said navigation (you did) you're absolutely right! Go ahead and enjoy that wonderful…","fields":{"slug":"/engineering/csshtml-animated-dropdown-navigation/"},"html":"

What's one thing virtually every website has? If you said navigation (you did) you're absolutely right! Go ahead and enjoy that wonderful feeling of being right for a moment... and now that we're feeling like a champ, let's get to it.

\n

Navigation buttons, depending on your site of course, are likely going to be some of the most commonly used items on your web site. Typically they're found near the top so people can quickly and easily... well navigate of course! With this in mind it's worth it to make sure your navigation is both visually appealing and provides an enjoyable user experience.

\n

A common featured for navigation menus is the drop down functionality for displaying sub options. This can be achieved through Javascript if you really feel like it (you don't), but why bother with that when CSS3 offers a much more elegant solution!

\n

First we start out building a simple un-ordered list, and give it some list items each of which contain a link that point nowhere in particular.
\n\"dropdownscreen1\"

\n

By the way, if you're on Sublime Text there's a great shortcut for making lists: ul>li+li+li+li and then \"Tab\" creates an un-ordered list with 4 list item tags inside of it. For more excellent Sublime tips check out my amigo Lucius' blog post on the topic.

\n

Now that we've got the bare bones, let's give this skeleton a spine. We're now going to put another ul inside of those list items, and once again more list items inside of those lists which contain, you guessed it, links to nowhere.
\n\"dropdownscreen2\"

\n

That's all the HTML we have to write for this example, so now we move on to the CSS.

\n

The first few things on the ul's and links are just to remove some default styles that I don't care for.

\n

The first actually relevant style is the inline-block display property on the list items to make them spread out horizontally. If you're unfamiliar with using inline-block for positioning I highly recommend reading up on it because it's an awesome alternative to floats or sometimes even flex-box. Next up we give these list items a relative position, so that the later absolutely positioned sub menu will use this as a reference point.

\n

\"dropdownscreen3\"

\n

To quote every MTV cribs star ever, here's where the magic happens. We put a max-height (that is at least as tall as all of the list items on the sub menu) and a height of auto on the sub menu. Note the ul li:hover, meaning these styles only apply when the first level of list items are hovered over. This might seem weird now, but it'll hopefully make sense with the styles we make use of in a bit.
\n\"dropdownscreen4\"

\n

Next up we just give the links some padding, which is highly preferable to giving the list item padding because then you can end up with a small hitbox for the actual link and a bunch of dead space around it. Only other thing to note here is the display block on the link which is required for the absolute positioning used later.

\n

The .sub-menu styles are pretty basic, just give it a position of absolute and then top: 100%, left: 0 and width: 100% to make it sit flush below the first level of list items. Finally throw on a transition to really allow the animation to shine, and fine tune the timing if you'd like.

\n

Still on the .sub-menu we give it a max-height of 0 and overflow: hidden. What this does is it hides the element from our view, similar to display:none or visibility:hidden... but for our animation we have to do it this way!

\n

Lastly we give the sub menu list items and links a display of block and some colors because pretty.

\n

That's it, you've now got a simple dropdown navigation with a neat little animation! You can add a height of 0 to the ul .sub-menu as well for a slightly different effect, or play around with the transition time and effect. Much to the same effect, increasing the value of the max-height on the sub menu hover will have an effect on the time it takes the dropdowns to make it to the end.

\n

Check it out on Codepen.

\n","frontmatter":{"date":"December 15, 2015","updated_date":null,"description":null,"title":"CSS/HTML Animated Dropdown Navigation","tags":["HTML","CSS","UI","CSS Animation"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/de68b801e2b33e38132380ed5dfa2f87/403a4/drop-anim-300x300.webp","srcSet":"/static/de68b801e2b33e38132380ed5dfa2f87/61e93/drop-anim-300x300.webp 200w,\n/static/de68b801e2b33e38132380ed5dfa2f87/403a4/drop-anim-300x300.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Zakary Hughes","github":null,"avatar":null}}}},{"node":{"excerpt":"In this tutorial I will demonstrate how to build a custom login form scratch. This time instead of using the default function call Wordpress…","fields":{"slug":"/engineering/part-2-creating-a-custom-login-form/"},"html":"

In this tutorial I will demonstrate how to build a custom login form scratch. This time instead of using the default function call Wordpress provides us, we will create this login form and the styling from scratch, making it a very customized form. I will be providing the CSS I am using, however you may style this however you wish.

\n

Building a Custom Login Form

\n

\"wp-login-boring\"

\n

This is what WordPress gives us out of the box.. Boring, right?

\n

I am going to show this part once again because it is probably the easiest to implement for beginners. I covered this in Part 1, but we'll go through it again just in case you're skipping ahead

\n

To start our page theme you will need to do the following

\n

1. Install WordPress\n2. Navigate to your wp-content/themes folder and choose a theme to edit or install a new one\n3. create a file called page-login-custom.php in the theme directory (Notice we are now making a new Page Theme)\n4. Next open that file with a text editor of your choosing and add the following at the top of the php file

\n

-->

\n

To initialize this page template make sure to activate the theme you've selected and then navigate to a page or post. On the right hand side of your page/post editor you should now see a dropdown available for template. Change your template to Login Custom and that will attach that page theme to this page/post.

\n

Now for the custom code. Below I have provided an example of some code that I have customized to make my custom login form.

\n
<form method="post" action="" class="wp-user-form">\n\n:\n<input type="text" name="log" value="" size="20" id="user_login" tabindex="11" />\n\n:\n\nRemember me\n\n<input type="submit" name="user-submit" value="" tabindex="14" class="user-submit" />\n<input type="hidden" name="redirect_to" value="" />
\n

\"login-2-custom\"

\n

Let's take a look at that custom form

\n

Handling the Login Form response

\n

To handle the Login Form response use the exact same method we used in part 1. Remember to place that function within your functions.php file within your theme unless you're building a plugin.

\n

In this example we have built a custom WordPress login form that you could customize and style to your desire. In the next section I will be demonstrating how to build a lost password form that is fully customized. Our custom lost password form will send an email to the user as well as handle creating a new password for the user.

\n","frontmatter":{"date":"December 08, 2015","updated_date":null,"description":null,"title":"Part 2 - Creating a Custom Login Form","tags":["Engineering","Login"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/c77161283a52150af28cf97603d842a3/e7487/cust-login-2-150x150.webp","srcSet":"/static/c77161283a52150af28cf97603d842a3/e7487/cust-login-2-150x150.webp 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Zoie Carnegie","github":null,"avatar":null}}}},{"node":{"excerpt":"Authentication systems are the backbone of many websites. It allows users to log in to your site and preserving data between visits. It is…","fields":{"slug":"/engineering/website-authentication-protocols/"},"html":"

Authentication systems are the backbone of many websites. It allows users to log in to your site and preserving data between visits. It is crucial in offering a robust user experience, which rewards your users for providing their details. Authentications often provide access to personal private data which if made public, it could harm your user. To prevent these, authentication protocols were created to secure the requests while allowing users to still safely login to your system from any environment.

\n

Basic SSL Auth

\n

Basic auth is the simplest form of web authentication. It utilizes standard HTTP headers in place of more complicated solutions that rely on cookies, session identifiers, and login pages. There is very little security built into the basic auth system. Credentials are transmitted with only Base64 encoding and are not encrypted or hashed. Due to the ingrained insecurities in the system, these requests are most often made via HTTPS.

\n

The authorization information should be compiled into the following format and included in the header:

\n

Format:

\n
<!--Authorization: Basic -->
\n

Full details on the Basic Authentication protocol can be found here: Authentication Protocol

\n

Digest Auth

\n

Digest Auth works similar to basic SSL authentication with the exception that the password is encrypted using a one-way hash. It utilizes MD5 cryptographic hashing with a nonce(a server-generated value that prevents replay attacks).

\n

The typical flow of a Digest Auth request is :

\n
    \n
  1. A user navigates to a page that requires user authentication.
    2. \n
  2. The server responds with a 401 message that signifies that a user is not currently authorized to access the content. In the response, it also includes the nonce which will be used during the authorization to prevent replay attacks,
    3. \n
  3. The site then displays an authentication interface to gather the required details( username and password )
    4. \n
  4. The provided details are re-sent to the server with an authentication header included in the request that has a response code.
    5. \n
  5. The server would then verify the provided credentials and accept the authentication or return a 401 message if the credentials are incorrect, which would cause the user to be again prompted with the authentication interface.
    6. \n
\n

You can find full details on the Digest Auth protocol can be found here: Digest Auth Protocol

\n

OAuth 1.0

\n

The OAuth 1.0 protocol relies on having a shared secret between the server and the site. This shared secret is used to generate a signature that is included in the request. The generated signature is used to verify the validity of the authentication request on the server-side. The process for authorizing the user is generally handled in three steps (3-legged OAuth):

\n
    \n
  1. Site obtains Request Token.
    2. \n
  2. User authorizes the Request Token.
    3. \n
  3. Site exchanges Request token for Access Token.
    4. \n
\n

The process of completing a 3-legged OAuth request will generally be handled as follows:

\n
    \n
  1. \n

    The site will send a signed request for the Request token. This request should contain the following parameters:

    \n
      \n
    1. oauth_consumer_key
      2. \n
    2. oauth_timestamp
      3. \n
    3. oauth_nonce
      4. \n
    4. oauth_signature
      5. \n
    5. oauth_signature_method
      6. \n
    6. oauth_version
      7. \n
    7. oauth_callback
      8. \n
    \n
    2. \n
\n

This request will be validated on the server. If validated, it will return the request token in the following format:

\n
    \n
  1. oauth_token
    2. \n
  2. oauth_token_secret
    3. \n
  3. and any other additional parameters returned by your server.
    4. \n
  4. The next step after retrieving the request token is to prompt your user to input their login credentials. These are then formatted into a signature with the oauth_token request token. Then they are sent with a request back to the server for validation. Upon successful validation from this request, the server will return the following:
    5. \n
  5. oauth_token
    6. \n
  6. oauth_verifier
    7. \n
\n

These will be used in the next step to retrieve an access token.

\n
    \n
  1. The final step is exchanging the retrieved details from step 2 for an access token, which will be used to access the server's resources. To exchange your request token for an access token, you can make a request to the server with the following signed request
    2. \n
  2. oauth_token -returned from step 2
    3. \n
  3. oauth_consumer_key
    4. \n
  4. oauth_nonce
    5. \n
  5. oauth_signature
    6. \n
  6. oauth_signature_method
    7. \n
  7. oauth_version
    8. \n
  8. oauth_verifier -returned from step 2
    9. \n
\n

This will return you an access token to be used in conjunction with your secret in order to make requests for information from the server.

\n

You can find full details on the OAuth 1.0 protocol here: OAuth 1.0 protocol

\n

OAuth 2.0

\n

This is similar to the OAuth 1.0 protocol, it relies on a client id and secret in order to format request, but simplifies much of the complicated signing process that is inherent in the OAuth 1.0 system. The process for authorizing a user using the 3-legged OAuth 2.0 protocol is as follows:

\n
    \n
  1. \n

    User is directed to the service for authorization with the following details included in the authorization URL:

    \n
      \n
    1. client_id
      2. \n
    2. redirect_uri
      3. \n
    3. response_type
      4. \n
    4. scope
      5. \n
    \n
    2. \n
  2. \n

    The user would then authenticate with the service and grant the application access to their details. On successful authentication, the user is redirected back to the redirect_uri with the following parameters:

    \n
      \n
    1. code
      2. \n
    2. state
      3. \n
    \n
    3. \n
  3. \n

    The code returned in step 2 is then used by the application to make a request for an access token. Included in this request should be:

    \n
      \n
    1. client_id
      2. \n
    2. client_secret
      3. \n
    3. code
      4. \n
    4. redirect_uri
      5. \n
    5. grant_type - This should be set to “authorization_code”
      6. \n
    \n
    4. \n
\n

The server will verify these details and then return an access token with an expiration time if they are valid. These get generally returned in the following format:

\n
    \n
  1. access_token
    2. \n
  2. expires_in
    3. \n
  3. refresh_token
    4. \n
\n

You can find full details on the OAuth 2.0 protocol here: OAuth 2.0 protocol

\n

Authentication protocols allow you to secure your data with varying levels of security. Depending on the data being accessed and your desired level of security, implementing one of the above protocols allows you to be confident that your data is safe and can only being accessed by users that are permitted to your system.

\n","frontmatter":{"date":"December 01, 2015","updated_date":null,"description":null,"title":"Website Authentication Protocols","tags":["Authentication","Oauth"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5625,"src":"/static/148a460add8a46784c528ade826702d3/58556/server-proc-150x150.webp","srcSet":"/static/148a460add8a46784c528ade826702d3/61e93/server-proc-150x150.webp 200w,\n/static/148a460add8a46784c528ade826702d3/1f5c5/server-proc-150x150.webp 400w,\n/static/148a460add8a46784c528ade826702d3/58556/server-proc-150x150.webp 800w,\n/static/148a460add8a46784c528ade826702d3/99238/server-proc-150x150.webp 1200w,\n/static/148a460add8a46784c528ade826702d3/7c22d/server-proc-150x150.webp 1600w,\n/static/148a460add8a46784c528ade826702d3/34181/server-proc-150x150.webp 2256w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}},{"node":{"excerpt":"1. Nim Game Click to View Original Question This question is very easy once you figure out the trick behind the game.\nSince each time you…","fields":{"slug":"/engineering/nim-game-add-digits-maximum-depth-of-binary-tree/"},"html":"

1. Nim Game

\n

Click to View Original Question

\n

This question is very easy once you figure out the trick behind the game.\nSince each time you can only pick 3 stones at most, if there are 4 stones originally on the table, no matter how many you take ... your hopefully non-stupid friend can easily beat you. The same logic also applies when the number of stones is more than 4.

\n
/**\n* @param {number} n\n* @return {boolean}\n*/\nvar canWinNim = function(n) {\n    return n % 4 === 0 ? false : true;\n};
\n

\n

2. Add Digits

\n

Click to View Original Question

\n

This is a tricky question, the key is trying to find the repetitive pattern of the Digits Sum. If you can't get the pattern by observation then we can do some math to find the pattern.

\n

So assume we have a 4 digit number \"abcd\" or 1234, and we want to find out the sum of the digits which in expression is:

\n

var digitSum = a + b + c + d

\n

We still can't figure out the answer from this alone, so we need to find something else to help us to get the value. Then we can consider the actual value of \"abcd\" = 1000a + 100b + 10c + d.

\n

- If you're familiar with Ring Theory (pretty sure it's Ring Theory.. I could be wrong..) then perfect! Under Ring 9, the actual value of abcd === a + b + c + d.\n- And if you don't know about Ring Theory, think of this as getting the remainder of \"abcd\" divided by 9

\n

> (1000a + 100b + 10c + d) % 9 => (999a + a + 99b + b + 9c + c + d) % 9 => a + b + c + d

\n

So whatever the reminder is equals to the sum of the digits and that is more than enough information to solve the question.

\n

Be careful with the number 0 !!

\n
/**\n* @param {number} num\n* @return {number}\n*/\nvar addDigits = function(num) {\n    if (num === 0) return num;\n    return num % 9 === 0 ? 9 : num % 9;\n};
\n

\n

3. Maximum Depth of Binary Tree

\n

Click to View Original Question

\n

This is very typical of recursion problems, and recursion is always hard to explain in words

\n

(╯‵□′)╯︵┻━┻

\n

Regardless I will try my very best to describe it.

\n

1. You have a tree node, and check if it is an empty tree, if so return 0\n2. If it is not empty, use recursion to find the value\n3. The recursion will start with the left node of root, and iterate through the tree, and keep checking the depth of each node till reaching out to the leaves. Each node (small root) records its maximum depth value by a record count called \"\"currentLength\"\".\n4. Until the whole tree is traversed, the root will compare its leftLength and rightLength and return the answer!

\n
 rightLength ? leftLength : rightLength;\n    return rootLength;\n}-->
\n","frontmatter":{"date":"November 24, 2015","updated_date":null,"description":null,"title":"Nim Game, Add Digits, Maximum Depth of Binary Tree","tags":["Nim","JavaScript"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/3d4aded531cc491994ddf29e4caf94a0/e7487/nim-blog-150x150.webp","srcSet":"/static/3d4aded531cc491994ddf29e4caf94a0/e7487/nim-blog-150x150.webp 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Lucius Yu","github":null,"avatar":null}}}},{"node":{"excerpt":"As a preface to this article: preprocessors can be used for a variety of file types, but this article is going to focus solely on CSS…","fields":{"slug":"/engineering/the-truth-about-css-preprocessors-and-how-they-can-help-you/"},"html":"

As a preface to this article: preprocessors can be used for a variety of file types, but this article is going to focus solely on CSS preprocessors. Additonally I'm going to try and avoid my personal bias and give a very generic description of CSS preprocessors rather than my preferred preprocessor.

\n

Introduction

\n

First off what is a preprocessor? To give you a simple analogy think of speaking with someone, in a language you understand, who has a strong accent or is speaking in a different dialect. They're technically speaking the same language as you, but actually understanding what they're saying can be next to impossible.

\n

In the context of CSS, the \"normal\" or unaccented language would be CSS and the accented version would be the preprocessor! What this means in practice is that you're writing out expressions that resemble standard CSS, but with some very distinct differences with regards to its syntax.

\n

As with regular spoken language, there's not a whole lot we can do with something we can't understand. Luckily there are translators, and the same is true of preprocessors. The preprocessor code can be processed (there are a number of different ways to accomplish this), and then out pops an understandable standard-syntax CSS file ready to be used.

\n

Now why would we want to write CSS in some weird way you might ask? An excellent question! Because our nonsense can be translated into regular CSS, this allows us to write some very robust and even dynamic CSS expressions.

\n

New Toys

\n

With preprocessors we've got a bundle of features now available to be used along with all the standard CSS rules we're accustomed to writing.

\n

To name a few features supported by preprocessors we've got: functions, mixins, math, variables, operators, conditionals, iteration and more to help you be more organized and write less overall.

\n

Variables

\n

Variables increase your maintainability drastically by making it so you only have to change a value in one place to affect it everywhere it was used. Imagine for example you want to add a Halloween theme to your site's colors.

\n
.elementOne {\n    background-color: orange;\n}\n.elementOne p {\n    color: black;\n}\n.elementTwo {\n    background-color: orange;\n}\nh3 {\n    color: black;\n}\na:hover {\n    color:orange;\n}
\n

Changing them back would require you to go and change each instance of black or orange. However; with variables you can do something like this.

\n
$theme-color-1: orange;\n$theme-color-2: black;\n \n.elementOne {\n    background-color: $theme-color-1;\n}\n.elementOne p {\n    color: $theme-color-2;\n}\n.elementTwo {\n    background-color: $theme-color-1;\n}\nh3 {\n    color: $theme-color-2;\n}\na:hover {\n    color: $theme-color-1;\n}
\n

Define the value of the variable in one place, and everywhere it gets used will be a reference to that value. Want to change all instances of black back to grey? Just change the variable definition and you're done.

\n

Functions & Friends

\n

Another one of the biggest features would be functions. With these you can set up one well written function definition and then sit back and let it do all the heavy lifting for you!

\n

Functions combined with math, variables, iteration, and conditionals allows you to write some very dynamic style rules. Think of sprite sheets where the value of the background position is being incremented with each statement. Instead of writing out each one by hand, make a function that uses math and iteration to change the background position.

\n

That's a very simple example, but I've seen some truly impressive and complicated designs created with the use of functions!

\n

Selectors

\n

One of my favorite features of preprocessors are the new selectors. The parent reference (&) allows you to group your rules so that everything pertaining to a specific element can be grouped together nicely.

\n
.someElement {\n    some-rule: some-value;\n    &:hover {\n        color: some-color;\n    }\n}
\n

Compiles to...

\n
.someElement {\n    some-rule: some-value;\n}\n.someElement:hover {\n    color: some-color;\n}
\n

The parent selector takes whatever follows it immediately and tacks it on to the parent that it is nested under. In this case hover will be appended to .someElement. Another great one to check out is the root reference!

\n

Nesting and General Aesthetic

\n

CSS's default format is ugly as sin. An endless tide of barely indented rules, hopefully organized in some meaningful way. With CSS preprocessors nesting is an awesome feature that helps your rules become more intuitive/logically grouped and increases readability. Nesting can give your CSS a much more distinct visual hierarchy not unlike HTML.

\n
.someElement {\n    some-rule: some-value;\n    .someOtherElement {\n        some-rule: another-value\n    }\n}
\n

Compiles to...

\n
.someElement {\n    some-rule: some-value;\n}\n.someElement .someOtherElement {\n    some-rule: another-value;\n}
\n

Full disclosure, your resulting CSS file will still likely look like someone dropped their bowl of Alphaghetti in their bowl of Alphabits and then threw that bowl at a wall. However; the file you actually work in will be considerably prettier, and that's all we care about.

\n

Some people have beef with preprocessors because of over done selectors which are a result of going a little too hard with nesting. An easy way to avoid this is by limiting your nesting to 3 levels deep. Any further than that gets pretty ugly, but hey I'm not your supervisor... if you feel it's necessary then you do what you gotta do.

\n

Processing dependant

\n

Now depending on how you choose to have your preprocessor code processed these features may or may not be more/less accessible. That being said I still feel they are worth mentioning.

\n

Auto updating the page you're working on is a small perk but I remember being quite happy to find out I could just save my project and not have to spam F5 like my little sister trying to buy front row Justin Bieber tickets online. Just save and it will update your project automatically.

\n

Another one is vendor prefixes. There are a handful of ways to stop writing these things out by hand each time. Whether it's via mixins, functions or a built in feature of the processor itself you can avoid writing out these dreadfully monotonous prefixes for good.

\n

Conclusion

\n

At first it might seem like a bunch of new stuff you have to learn and implement... but really if you already know CSS you're over halfway there. All you need to do is learn the specific syntax and familiarize yourself with the new features available to you with the preprocessor of your choice. It's a gentle learning curve with a surplus of benefits to integrate preprocessors into your workflow.

\n

This article is by no means all encompassing, but rather a sampler to create enough interest to try it out and learn more about preprocessors.

\n

On that note there are resources for comparing the preprocessors as well as trying them online. Each one has its own perks so try 'em out and find the one that fits your style!

\n","frontmatter":{"date":"November 17, 2015","updated_date":null,"description":null,"title":"The truth about CSS preprocessors and how they can help you","tags":["CSS"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/c1a3c2e9cd169b0cb2976078dc054b7b/e7487/desdev-150x150.webp","srcSet":"/static/c1a3c2e9cd169b0cb2976078dc054b7b/e7487/desdev-150x150.webp 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Zakary Hughes","github":null,"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":264,"currentPage":45,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}