{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/159","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"I am here to tell you that Facebook, Google, Twitter, or LinkedIn aren’t going to be happy when they find out that you changed their icon…","fields":{"slug":"/engineering/social-network-branding-guidelines/"},"html":"

I am here to tell you that Facebook, Google, Twitter, or LinkedIn aren’t going to be happy when they find out that you changed their icon color to green. But, hey at least you didn’t distort the logo.

\n

Hello and welcome to another segment of me telling you things that you need to know but will ignore at some point. Let’s get started.

\n

Social Login and Social Sharing are everywhere. Some people even combine it with with their User Registration. There’s no surprise that on every website you go to, you’ll see either well designed social icons or just plain ugliness. We can’t blame them, they want their icons to be unique and eye catching.

\n

\"1\"Beauty!

\n

But, the universe is full of holes inside an “A” whom sometimes destroy a thing of beauty.

\n

\"2\"Just. Stop!

\n

Then there’s the “I use my own brand color” kind of people.

\n

\"3\"

\n

So, what’s happening here? What’s the orange f? Does that stands for forangebook? *badum tsss* I’ll see myself out.

\n

Changing the branding color is a big no no for them. You’ll be surprised how strict those social branding guidelines can be. Yet, we still violate them.

\n

One thing we need to realize is, we don’t own these icons. The companies still own them. So, for your convenience I searched the interwebs to gather most of the things you need to remember for social network branding guidelines.

\n

Let’s start with the most used social network, Facebook and their “ f ” logo. They’re pretty straightforward, as long as you don’t modify the “ f ” logo’s design and color, you’re good to go. To simplify this more; don’t make the facebook logo look like it’s been scratched by a chicken and made it bleed too much that it turns red.

\n

\"4\"

\n

Quick, somebody call 911!

\n

Twitter branding is a little bit complicated. Probably because they had multiple drastic changes in their logo design.

\n

\"5\" Nonetheless, it’s simple.

\n\n

On Google+ (yes “ + “ not “plus“), they prefer that you don’t change or remake their icon. But if you must, you can style it to match your design, as long as you don’t...

\n\n

If you’re using the icon with the title, You should use “Google” without the plus (word and sign), because… well… that’s redundant.

\n

LinkedIn is kind of ridiculous with their branding guidelines. They still have the same drill with no distorting or changing the color and so forth. But there’s one thing you won’t expect, you cannot change the radius or the box. \"6\"

\n

We’re all going to LinkedIn Jail!

\n

Keep it to a minimal radius, like 2px. That means no circle, square, iOS style rounded icons — hold the phone, did LinkedIn just violate their own branding guidelines? Tsk tsk, LinkedIn. Breaking your own rules, eh?

\n

What about the other 30+ social icons? Well, by now you’ve probably seen the pattern here. No? Well, let me break it down for you.

\n\n

But, who am I to tell you what to do? Just do what makes you happy and hope to god they don’t catch you. Keep in mind too that these branding guidelines are part of your user experience and affect your users impression of the site.

\n

Let me know in the comments if there’s a specific guideline that I miss.

\n","frontmatter":{"date":"September 08, 2015","updated_date":null,"description":null,"title":"Social Network Branding Guidelines","tags":["Social","SocialLogin","Branding"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/63460374fc13a4962cd40dfa765485b1/403a4/social-network-branding-300x300.webp","srcSet":"/static/63460374fc13a4962cd40dfa765485b1/61e93/social-network-branding-300x300.webp 200w,\n/static/63460374fc13a4962cd40dfa765485b1/403a4/social-network-branding-300x300.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"Index is a typical way to speed-up queries in normal database system. There is no difference between MongoDB and a document-based database…","fields":{"slug":"/engineering/index-in-mongodb/"},"html":"

 Index is a typical way to speed-up queries in normal database system. There is no difference between MongoDB and a document-based database system. This article gives insight about the index in MongoDB, for query optimization.

\n

Index in Mongo:

\n

Default

\n

_id is an ObjectId object, 12-byte BSON type that guarantees uniqueness within the collection. The ObjectId is generated based on timestamp, machine ID, process ID, and a process-local incremental counter.

\n

Single Field

\n

For a single-field index and sort operations, the sort order (i.e. ascending or descending) of the index key does not matter because MongoDB can traverse the index in either direction. The value of index is the type of index. For example, 1 indicates ascending order and -1 specifies the descending order.

\n
db.friends.createIndex( { "name" : 1 } )
\n

\n

Compound Field

\n

The order of fields listed in a compound index has significance. For instance, if a compound index consists of { userid: 1, score: -1 }, the index sorts first by userid and then, within each userid value, sorts by score.

\n
db.products.createIndex( { "item": 1, "stock": 1 } )
\n

\n

Multiple Key

\n

MongoDB uses multiple index to index the content in an array. MongoDB creates separate index entries for every element of the array. You do not need explicitly create multiple key.

\n

Text Index

\n

A collection can have at most one text index.
\nPerformance cost for text index:
\ntext indexes can be large. They contain one index entry for each unique post-stemmed word in each indexed field for each document inserted.
\ntext indexes will impact insertion throughput because MongoDB must add an index entry for each unique post-stemmed word in each indexed field of each new source document.

\n
db.reviews.createIndex( { comments: "text" } )
\n

Hash index

\n

Query content by its hashed value. The hash is a function to computed by its value. The hashed value is designed to be distinct value. The one advantage is it is so quick, which take O(1) at most but by contract the normal binary search tree will take O(Log(N)). Hash will be theoretically quicker than normal binary search tree implementation. But the disadvantage is hash index performing range search will be extremely slowly than normal index.

\n

This an example in python to build a hash index

\n
db.active.createIndex( { a: "hashed" } )
\n","frontmatter":{"date":"September 01, 2015","updated_date":null,"description":null,"title":"Index in MongoDB","tags":["MongoDB","Database"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/e5befb74a597194f6d10cdce76d28a00/58556/mongo-db-index1.webp","srcSet":"/static/e5befb74a597194f6d10cdce76d28a00/61e93/mongo-db-index1.webp 200w,\n/static/e5befb74a597194f6d10cdce76d28a00/1f5c5/mongo-db-index1.webp 400w,\n/static/e5befb74a597194f6d10cdce76d28a00/58556/mongo-db-index1.webp 800w,\n/static/e5befb74a597194f6d10cdce76d28a00/99238/mongo-db-index1.webp 1200w,\n/static/e5befb74a597194f6d10cdce76d28a00/b40dc/mongo-db-index1.webp 1278w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Mark Duan","github":null,"avatar":null}}}},{"node":{"excerpt":"Hey there, spider. It’s me again, your amazing blog writer, Darryl. Have you ever wanted to select the second or third child of an element…","fields":{"slug":"/engineering/ab-use-css2-sibling-selectors/"},"html":"

Hey there, spider. It’s me again, your amazing blog writer, Darryl. Have you ever wanted to select the second or third child of an element without using CSS3 nth-child —which aren’t working on grandpa browsers. Let’s face it, a lot of human beings are afraid of change that they tend to stick to what they know.

\n

I’m not a pro “support the older browser” kind of guy because I still think that people won’t upgrade if we keep spoiling them. But for the sake of knowing a workaround I’m gonna teach you how to ab-use sibling selectors for better compatibility.

\n

What are sibling selectors.

\n

Sibling selectors consists of a squiggly line ( ~ ) and a plus sign ( + ).

\n

Squiggly line selects all the siblings below that element where you use that sign. Plus sign select only the next sibling.

\n

Great, give me the deets.

\n

\"lr-home\"

\n

Have you ever seen our support docs?

\n

Would you believe me if I tell you that from “Getting Started” to the “Social Sharing” section, they are all siblings with the same class and everything… well except for the css code and the search, we’ll get to that later.

\n

Anyhoo, how did I do it? It’s easy, since I know that the sibling I want to get was the first child. I just used the :first child pseudo element to style the first element.

\n
.sibling:first-child {\n/*styles for first sibling*/\n}
\n

Then again, that’s not a sibling selector, that’s a pseudo element. Calm your feets, this is the part where we ab-use those selectors.

\n
.sibling:first-child ~ .sibling {\n/*styles for the rest of the sibling*/\n}
\n

Why would we do this? This is so it doesn’t add the style for the rest of the sibling to the first-child and vice versa. Less CSS to overwrite and eliminates the use of !important.

\n

Let’s go crazy.

\n

How do we get the third child without using :nth-child pseudo element? It’s simple. Get the first child and ab-use your plus sign(+) sibling selector.

\n
<div:first-child + div + div {\n/*styles*/\n}
\n

The best part is. It’s backwards compatible.

\n

What about the 12th child? Well, you can just painfully type all those “+ div”.

\n

Now, why would we do this? To support IE8, which I don’t like supporting but, maybe you do.

\n

Keep experimenting with this technique and be free from any restrictions of IE8.

\n","frontmatter":{"date":"August 18, 2015","updated_date":null,"description":null,"title":"How to ab-USE CSS2 sibling selectors","tags":["Engineering","Selector","CSS"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/bc4587907a3f51743e5602c5512e6236/7fbdd/sibling-selectors.webp","srcSet":"/static/bc4587907a3f51743e5602c5512e6236/61e93/sibling-selectors.webp 200w,\n/static/bc4587907a3f51743e5602c5512e6236/1f5c5/sibling-selectors.webp 400w,\n/static/bc4587907a3f51743e5602c5512e6236/7fbdd/sibling-selectors.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"Did you ever want to customize your registration or login page on Drupal 7, but did not know how? Customizing these pages by adding new text…","fields":{"slug":"/engineering/customize-user-login-register-and-forgot-password-page-in-drupal-7/"},"html":"

Did you ever want to customize your registration or login page on Drupal 7, but did not know how? Customizing these pages by adding new text or changing theme is not a difficult task.

\n

To help you out with that, I have compiled some simple steps to customize your registration or login page. All that you need to do is to add the following code :

\n

Steps:

\n
    \n
  1. In the first step of customization, you need to implement hook_theme in your module file.
    2. \n
\n
 array(\n      'template' => 'user_login',\n      'render element' => 'form',\n      'path' => drupal_get_path('module', 'yourmodule') . '/templates'\n    ),\n    'user_pass' => array(\n      'template' => 'user_pass',\n      'render element' => 'form',\n      'path' => drupal_get_path('theme', 'yourmodule') . '/templates'\n    ),\n    'user_register' => array(\n      'template' => 'user_register',\n      'render element' => 'form',\n      'path' => drupal_get_path('theme', 'yourmodule') . '/templates'\n     ),\n  );\n  return $theme;\n}-->
\n

Now that you have implemented hook theme in module file, the next step is to implement three pre-process functions. These functions are used if module needs to override or you want to add something in theme pre-processing.

\n

In the third step, you need to create following template files for login/register/forgot password.

\n
    \n
  1. user_login.tpl.php
    2. \n
  2. user_register.tpl.php
    3. \n
  3. user_pass.tpl.php
    4. \n
\n

Now paste the following code into user_login.tpl.php. Also, don’t forget to modify user_register.tpl.php and user_pass.tpl.php template files accordingly.

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

Now your login page will contain new intro text This is my awesome login form. Customization of registration page in Drupal 7 is not difficult and if you follow above mentioned tips, you can design an amazing registration / login / forgot password page according to your audience.

\n","frontmatter":{"date":"August 11, 2015","updated_date":null,"description":null,"title":"Customize User Login, Register and Forgot Password Page in Drupal 7","tags":["Drupal"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/7d36e49fa408c02e5e79fd3e845c9379/7fbdd/drupal-custom-login-register-password-pages1.webp","srcSet":"/static/7d36e49fa408c02e5e79fd3e845c9379/61e93/drupal-custom-login-register-password-pages1.webp 200w,\n/static/7d36e49fa408c02e5e79fd3e845c9379/1f5c5/drupal-custom-login-register-password-pages1.webp 400w,\n/static/7d36e49fa408c02e5e79fd3e845c9379/7fbdd/drupal-custom-login-register-password-pages1.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}},{"node":{"excerpt":"QQ is the most popular ID provider for Chinese people since the 90s, it is always the first choice for websites who want to provide social…","fields":{"slug":"/engineering/best-practice-reviewing-qq-app/"},"html":"

QQ is the most popular ID provider for Chinese people since the 90s, it is always the first choice for websites who want to provide social login functionality for their Chinese users. But similar to other ID providers from China, the app you created needs to be reviewed before actually launching it. Reading Chinese and using Google translate for each line is not that much of fun, and in this tutorial we will go through step by step to figure out how to submit a QQ app for review. Do note: You can always download a Google translate extension for your browser to translate each page to English, it would probably be the easiest way for you, but here I decide to keep it Chinese, Let's go.

\n
    \n
  1. \n

    Navigate to QQ Connect

    \n

    And click the 4th tab (in orange box)

    \n

    \"homepage\"

    \n
    2. \n
  2. \n

    Registration

    \n

    After being redirected to QQ connect login page, it asks you to fill in your credentials, since I do not have one, I will register for one and feel free to skip this step if you have already got one.

    \n

    Click \"register a new account\", like shown:

    \n

    \"qq-register-1024x630\"

    \n

    It will link you to this page, it is written in English, sweet! I am pretty sure you can register an account by yourself. After filling in the information, it will send a confirmation email to your email box. After your email is verified go back to the login page, and use the QQ number you just got to log in with.

    \n
    3. \n
  3. \n

    Creating the app

    \n

    Click the big green button on the right side of your screen to create an app, and here we will create a website type app.

    \n

    \"create_app_button\"

    \n

    \"app_for_website\"

    \n

    After choosing the type, you need to fill in some basic information for your website, in case if you do not use Google translate to translate the page, I did a little translations for you, there you go.

    \n

    \"form_with_english_translations\"

    \n

    Here is what I have filled in

    \n

    \"lucius_fillin_info\"

    \n

    Please note, when you fill in your website address, it will ask you to verify your website, so you need to copy and paste the javascript code under your website page, and then click the button beside to verify it.
    \n\"verify_successfully\"

    \n

    Once all the information is filled, then move on to next step, click the blue text link, it asks you to upload different sizes of the images about your company.

    \n

    \"add_assets\"

    \n

    \"upload_different_assets\"
    \nThen, it is time to submit by clicking that big green button in the middle.

    \n

    \"app_submit\"

    \n

    Confirm it by clicking the right button again.

    \n

    \"confirm_submit\"

    \n
    4. \n
\n

If everything works well, you will get you app approved in a week, just remember to check it back periodically, good luck!

\n","frontmatter":{"date":"August 04, 2015","updated_date":null,"description":null,"title":"Best practice for reviewing QQ app","tags":["SocialLogin","QQ"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/a89009e858e98fb020d251158f47dd23/7fbdd/qq-app-review-best-practices.webp","srcSet":"/static/a89009e858e98fb020d251158f47dd23/61e93/qq-app-review-best-practices.webp 200w,\n/static/a89009e858e98fb020d251158f47dd23/1f5c5/qq-app-review-best-practices.webp 400w,\n/static/a89009e858e98fb020d251158f47dd23/7fbdd/qq-app-review-best-practices.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"excerpt":"What’s up, my neighbor? This is your boy, Darryl Tec. I am here to teach you how to create a responsive and awesomely scalable icon using…","fields":{"slug":"/engineering/css3-responsive-icons/"},"html":"

What’s up, my neighbor? This is your boy, Darryl Tec. I am here to teach you how to create a responsive and awesomely scalable icon using CSS sprites. On top of that, we will also add a fallback for browsers that do not support SVG files.

\n

Quick FAQ.

\n

SVG - Stands for Scalable Vector Graphics. In short it scales perfectly and you don’t need to worry about having a pixelated image anymore.

\n

Sprite - Google said it’s a fairy. This is not a fairy. It’s just a bunch of different icons in 1 image. Use it as background image and shift the positioning to show 1 icon. This saves you a lot of loading time. Because instead of loading, say 10 images, you’re loading just 1.

\n

CSS - Cascading Style Sheet. If you don’t know what this is, I have bad news for ya.

\n

Let's Begin

\n

\"icons\"

\n

First things first, we need a sprite image that consists four icons – or more, it’s up to you. Luckily, I have one in my digital pocket.

\n

We’re just going to use a normal PNG file at first and change it later. Make sure it has a transparent background.

\n

Now, let’s make their placeholder. The icons you see above is using a grid of 32px by 32px and it’s lining up vertically. I made it like that so it’s easier to find anything, you’ll see why later.

\n
</pre>\n  <div class="frame"></div>\n<pre>
\n

Now we need to style them.

\n
.icon {\n  width: 32px;\n  height: 32px;\n  background: #eee;\n  float: left;\n  background-image: url("[ put your image here ]");\n  background-size: 100% auto;\n  /*extra fluff*/\n  margin: 10px;\n  border-radius: 5px;\n}
\n

Explanation

\n

Looks simple right? But the one thing that’s very important here is the background-size, which makes our sprite responsive. When you put 100% as the value, it will stretch the image depending on what width and height you have. So, be very careful when putting a value on both X and Y axis, because this will distort the image. To stop it from distorting, you should only put a value on one axis and put the other on ‘auto’ so the image scales proportionally.

\n

If you look at the image I provided, there’s only one icon on X-axis. That means we can just say 100% on X and auto on Y.

\n

So, we get background-size: 100% auto.

\n

Cool, right? No crazy percentage. Your icon should look like this:

\n

\"facebook-icon\"

\n

It’s time to map those icons properly. Facebook is not a problem because it’s first on the list. But for defaults sake, let’s add a code for it.

\n
 .icon.facebook {\n   background-position: 0 0;\n   background-color: #3b5998;\n }
\n

The positioning of 0 0 will map it to the top left of the element.

\n

\"here-icon\"

\n

For the background-color, you can get almost all of the official social icon colors in hex here.

\n

How about the rest? Well, there’s a simple formula for that.

\n

The raw CSS way

\n

Since we’re making this responsive, we need to use percentage. We need to get the height of the image via percentage. Remember what I said earlier about x and y and scaling proportionally? Since the icons are lined up vertically, we need to get the Y-axis, which is the height. The easy way to do that is to just use 100% and never touch x axis again.

\n

Now, we have to get the position of the icons. Let’s start by counting the icons starting with 0 (zero).

\n

0 = Facebook

\n

1 = Google

\n

2 = LinkedIn

\n

3 = Twitter

\n

Facebook isn’t really a problem because we already know where it is. So, let’s exclude it from the count. That gives us 3 icons. We can now use those numbers to get the icon position.

\n

imageHeight = 100%
\niconCount = 3
\niconPosition = [1,  2 or 3]
\nWe need to go downwards on the sprite. That means it’s negative.

\n

-imageHeight / iconCount * iconPosition
\n-100% / 3 / 1 = 33.33% is Google’s position
\n-100% / 3 / 2 = 66.66% is LinkedIn’s position
\n-100% / 3 / 3 = 99.99% is Twitter’s position
\nThat gives us this code

\n
.icon.twitter {\n  background-position: 0 -33.33%;\n  background-color: #55acee;\n}\n.icon.linkedin {\n  background-position: 0 -66.66%;\n  background-color: #007bb6\n}\n.icon.google {\n  background-position: 0 -99.99%;\n  background-color: #F90101;\n}
\n

The Stylus way

\n

If you use stylus you can just do this:
\nCreate the mixin

\n
getPos(imageHeight, iconCount, iconPosition)\n  imageHeight / iconCount * iconPosition
\n

Then call it.

\n
.icon.twitter\n  background-position 0 getPos(-100%, 3, 1)\n  background-color #55acee\n \n.icon.linkedin\n  background-position 0 getPos(-100%, 3, 2)\n  background-color #007bb6\n \n.icon.google\n  background-position 0 getPos(-100%, 3, 3)\n  background-color #F90101
\n

By now your icon should look like this.

\n

\"color-icons\"

\n

It’s time to change that PNG background to an SVG background.

\n

and link it to your background image

\n
.icon {\n  width: 32px;\n  height: 32px;\n  background: #eee;\n  float: left;\n  background-image: url("[ put your PNG image here ]”);\n  background-image: linear-gradient(transparent, transparent), url("[ <b>put your SVG image here</b> ]”);\n  background-size: 100% auto;\n \n/*extra fluff*/\n  margin: 10px;\n  border-radius: 5px;\n}
\n

If you’re wondering why we’re adding 2 background images is because not all browsers support SVG file. The linear-gradient(transparent, transparent) tricks the CSS into falling back to the PNG image if it doesn’t support it.

\n

Now, Rescale your width and height and see the magic of responsive icons.

\n

Aaaaaand then we’re done. That’s how you create a responsive icon.

\n","frontmatter":{"date":"July 21, 2015","updated_date":null,"description":null,"title":"CSS3 Responsive Icons","tags":["CSS","Responsive","UI"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/8d212eebb7243269b59bd9166d0a4cce/403a4/css3-responsive-icons-300x300.webp","srcSet":"/static/8d212eebb7243269b59bd9166d0a4cce/61e93/css3-responsive-icons-300x300.webp 200w,\n/static/8d212eebb7243269b59bd9166d0a4cce/403a4/css3-responsive-icons-300x300.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","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.webp"}}}},"pageContext":{"limit":6,"skip":948,"currentPage":159,"type":"///","numPages":164,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}