{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/153","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"As a front-end developer, if you haven't heard about Promise in Javascript, well ... At least you have heard about it now! And it is truly…","fields":{"slug":"/engineering/how-to-promise/"},"html":"

As a front-end developer, if you haven't heard about Promise in Javascript, well ...
\nAt least you have heard about it now! And it is truly amazing.

\n

Promise is a the standard way of handling asynchronous operations, such as calling APIs. It is comprehensive but elegant, espeically with a series of Async operations and handling the errors from them.
\nIt has been widely supported by mordern browsers. But of course IE is not one of the modern ones, so do not forget to find a promise-polyfill for your IE users.

\n

Can I use Promise
\nPolyfill for IE

\n

In this blog I will cover the basic usages for Promise, let's get started.
\nA promise function would look like this

\n
new Promise(function (resolve, reject) {\n    var data = asyncCall(); // could be API calls\n    if( data ) {\n        resolve(data); // success\n    } else {\n        reject(data); // fail\n    }\n});
\n

First we need to declare it is a `new` Promise, inside you can put your async calls and let promise know how to deal with the response with `resolve` and `reject`. You can treat `resolve` and `reject` as two callback functions, `resolve` when you are confirmed that you have got what you expect, and reject if anything bad happened.

\n

Here is a brief example, Fiddle it here

\n
var aync1 = function() {\n    return new Promise(function(resolve, reject){\n        // Wait 1s and alert\n        setTimeout(function(){\n            resolve("Hello Promise");\n        }, 1000);\n    });\n}\n\naync1().then(function (resp) {\n    alert(resp);\n});
\n

If something is going wrong, you want to catch and handle it, Fiddle it here.

\n
var aync2 = function() {\n    return new Promise(function(resolve, reject){\n        // Wait 2s and alert\n        setTimeout(function(){\n            // pretend we got something wrong.\n            reject("error");\n        }, 1000);\n    });\n}\n \naync2().then(function (resp) {\n    alert("This will not be called");\n}).catch(function(err){\n    alert(err);\n});
\n

Here I have quickly demonstrated the basic usage of Promise, you may think \"Oh callbacks can do the same thing as well\". You are not wrong, but in next blog I will show the real power of Promise, thanks for reading.

\n","frontmatter":{"date":"January 05, 2016","updated_date":null,"description":null,"title":"How to Promise","tags":["JavaScript","Promise"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/05707517353767f5f43e5a285bd216f7/630fb/promise-300x300.png","srcSet":"/static/05707517353767f5f43e5a285bd216f7/69585/promise-300x300.png 200w,\n/static/05707517353767f5f43e5a285bd216f7/630fb/promise-300x300.png 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Solomon Yu","github":null,"avatar":null}}}},{"node":{"excerpt":"When you work for a tech company in an office capacity, it feels like everyone around you is speaking another language. Which they are, most…","fields":{"slug":"/engineering/learning-how-to-code/"},"html":"

When you work for a tech company in an office capacity, it feels like everyone around you is speaking another language. Which they are, most of their work exists in coding language. To feel more relevant, I signed up on codecademy.com and started working on their beginner courses (for free! you should try it!).

\n

Here are some things I have learned about coding:

\n
    \n
  1. There are many different ways to code. Not every website or app is made using the same terms or patterns, programmers and developers have options for how they want to format their content, and how they want to communicate with their computer.
    2. \n
  2. Coding is more about seeing what you want in your head than about math. Deciding exactly what you want and communicating it is the big struggle. Having your website/app be capable of computing things is optional, but the layout is mandatory. (Not to mention the most noticeable aspect of your site).
    3. \n
  3. Code is like a language. The words and punctuation must be learned for each coding language. Though they can be linked to English words (like “p” for a new paragraph), you have to be able to pull them up quick in your mind. As with any language, repetition is key to recognition.
    4. \n
  4. You don’t have to start from scratch (but you can). There are frameworks available, like Bootstrap, which have some existing templates you can draw from. This helps you when you are constructing your site, so that you can set up your layout quicker, and have more time to work on your content.
    5. \n
  5. \n

    There are some areas of knowledge that you don’t need to memorize, but having an understanding of what they do will be helpful in coding:

    \n
      \n
    1. The hexi-decimal system (and how it relates to color)
      2. \n
    2. Binary code
      3. \n
    3. ASCII
      4. \n
    \n
    6. \n
  6. Once you learn some of the basics, websites you see every day will start to seem simpler. You will be able to pick out some of their elements, and if you look at their bare code, you will recognize how they come together.
    7. \n
  7. The world of coders is large and easy to access. If you have questions, there is someone online who is willing and eager to answer. This is not a skill that anyone was born with, and due to new languages etc, everyone is still learning.
    8. \n
\n

I hope that this list has contributed to your knowledge, and would encourage you to check online for available resources to expand (or begin) your abilities in coding.

\n","frontmatter":{"date":"December 29, 2015","updated_date":null,"description":null,"title":"Learning How to Code","tags":["Learning","Coding","Learning resources"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/26a66e05ab78493dc6d84d3afe0d8a82/630fb/begin-code-300x300.png","srcSet":"/static/26a66e05ab78493dc6d84d3afe0d8a82/69585/begin-code-300x300.png 200w,\n/static/26a66e05ab78493dc6d84d3afe0d8a82/630fb/begin-code-300x300.png 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Carling","github":null,"avatar":null}}}},{"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/4dbfe94040c20cde6c3a395142bd3009/630fb/code-js-300x300.png","srcSet":"/static/4dbfe94040c20cde6c3a395142bd3009/69585/code-js-300x300.png 200w,\n/static/4dbfe94040c20cde6c3a395142bd3009/630fb/code-js-300x300.png 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\n \n \n

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

\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

\n \n \n

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

\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/501f7fa9187224569eb6e51827f87931/630fb/drop-anim-300x300.png","srcSet":"/static/501f7fa9187224569eb6e51827f87931/69585/drop-anim-300x300.png 200w,\n/static/501f7fa9187224569eb6e51827f87931/630fb/drop-anim-300x300.png 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

\n \n \n

\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

\n \n \n

\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/3e9f0e12bae5ff4eea3aa1dae7083c47/6d161/cust-login-2-150x150.png","srcSet":"/static/3e9f0e12bae5ff4eea3aa1dae7083c47/6d161/cust-login-2-150x150.png 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/2777d4b53aa6128513f070b7f78f3651/ee604/server-proc-150x150.png","srcSet":"/static/2777d4b53aa6128513f070b7f78f3651/69585/server-proc-150x150.png 200w,\n/static/2777d4b53aa6128513f070b7f78f3651/497c6/server-proc-150x150.png 400w,\n/static/2777d4b53aa6128513f070b7f78f3651/ee604/server-proc-150x150.png 800w,\n/static/2777d4b53aa6128513f070b7f78f3651/f3583/server-proc-150x150.png 1200w,\n/static/2777d4b53aa6128513f070b7f78f3651/5707d/server-proc-150x150.png 1600w,\n/static/2777d4b53aa6128513f070b7f78f3651/6e0a6/server-proc-150x150.png 2256w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}}]},"markdownRemark":{"excerpt":"Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards…","fields":{"slug":"/identity/developer-first-identity-provider-loginradius/"},"html":"

Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards and refining approaches to building secure, seamless experiences.

\n

We’re here to support developers on that journey. We know how important simplicity, efficiency, and well-structured documentation are when working with identity and access management solutions. That’s why we’ve redesigned the LoginRadius website—to be faster, more intuitive, and developer-first in every way.

\n

The goal? Having them spend less time searching and more time building.

\n

What’s New and Improved on the LoginRadius Website?

\n

LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve spent the last few months redesigning our interface— making navigation more intuitive and reassuring that essential resources are easily accessible.

\n

Here’s a closer look at what’s new and why it’s important:

\n

A Developer-Friendly Dark Theme

\n

\"This

\n

Developers spend long hours working in dark-themed IDEs and terminals, so we’ve designed the LoginRadius experience to be developer-friendly and align with that preference.

\n

The new dark mode reduces eye strain, enhances readability, and provides a seamless transition between a coding environment and our platform. Our new design features a clean, modern aesthetic with a consistent color scheme and Barlow typography, ensuring better readability. High-quality graphics and icons are thoughtfully placed to enhance the content without adding visual clutter.

\n

So, whether you’re navigating our API docs or configuring authentication into your system, our improved interface will make those extended development hours more comfortable and efficient.

\n

Clear Categorization for LoginRadius Capabilities

\n

\"This

\n

We’ve restructured our website to provide a straightforward breakdown of our customer identity and access management platform capabilities, helping you quickly find what you need:

\n\n

This structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem.

\n

Developer-First Navigation

\n

\"This

\n

We’ve been analyzing developer workflows to identify how you access key resources. That’s why we redesigned our navigation with one goal in mind: to reduce clicks and make essential resources readily available.

\n

The new LoginRadius structure puts APIs, SDKs, and integration guides right at the menu bar under the Developers dropdown so you can get started faster. Our Products, Solutions, and Customer Services are also clearly categorized, helping development teams quickly find the right tools and make informed decisions.

\n

Quick Understanding of Integration Benefits

\n

\"This

\n

Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs.

\n

Our platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks.

\n

Over to You Now!

\n

Check out our revamped LoginRadius website and see how the improved experience makes it easier to build, scale, and secure your applications.

\n

Do not forget to explore the improved navigation and API documentation, and get started with our free trial today. We’re excited to see what you’ll build with LoginRadius!

\n","frontmatter":{"date":"February 21, 2025","updated_date":null,"description":"LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve redesigned our website interface, making navigation more intuitive and reassuring that essential resources are easily accessible.","title":"Revamped & Ready: Introducing the New Developer-First LoginRadius Website","tags":["Developer tools","API","Identity Management","User Authentication"],"pinned":true,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7857142857142858,"src":"/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp","srcSet":"/static/80b4e4fbe176a10a327d273504607f32/61e93/hero-section.webp 200w,\n/static/80b4e4fbe176a10a327d273504607f32/1f5c5/hero-section.webp 400w,\n/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp 800w,\n/static/80b4e4fbe176a10a327d273504607f32/99238/hero-section.webp 1200w,\n/static/80b4e4fbe176a10a327d273504607f32/7c22d/hero-section.webp 1600w,\n/static/80b4e4fbe176a10a327d273504607f32/1258b/hero-section.webp 2732w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.jpg"}}}},"pageContext":{"limit":6,"skip":912,"currentPage":153,"type":"///","numPages":161,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}