{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/161","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Are you tired of eye dropping (or worse… guessing) the colors of every social network you like? Fear not my friend, I have searched the webs…","fields":{"slug":"/engineering/social-media-colors-hex/"},"html":"

Are you tired of eye dropping (or worse… guessing) the colors of every social network you like? Fear not my friend, I have searched the webs to find our beloved social media colors and listed it out in hex form.

\n

Facebook #3b5998

\n

Google Plus #F90101

\n

Linkedin #007bb6

\n

Twitter #55acee

\n

Yahoo #400090

\n

Amazon #FF9900

\n

Aol #066cb1

\n

Delicious #67b6e3

\n

Digg #486ca3

\n

Disqus #35a8ff

\n

Foursquare #1cafec

\n

Github #181616

\n

Google #0266C8

\n

Hyves #f9a539

\n

Instagram #406e94

\n

Kaixin #bb0e0f

\n

Live #004C9A

\n

Livejournal #3770a3

\n

Mixi #d1ad5a

\n

Myspace #313131

\n

Odnoklassnikki #f69324

\n

Orange #ff6600

\n

Paypal #13487b

\n

Persona #e0742f

\n

Pinterest #cb2128

\n

QQ #009BD9

\n

Reddit #ff5700

\n

Renren #005baa

\n

Salesforce #219CDF

\n

Stackexchange #4ba1d8

\n

Steam Community #666666

\n

Tumblr #32506d

\n

Verisign #0261a2

\n

Virgilio #eb6b21

\n

Vkontakte #45668e

\n

Sinaweibo #bb3e3e

\n

WordPress #21759c

\n

Mailru #1897e6

\n

Xing #007072

\n

Openid #f7921c

\n

Did I miss anything? Add it in the comments and help build this awesome list.

\n","frontmatter":{"date":"February 06, 2015","updated_date":null,"description":null,"title":"Social Media Colors in Hex","tags":["SocialMedia","Facebook","Google","Color"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/d2cb1d5026eb68986f33462424c006a3/6d161/darrylblog1-150x150.png","srcSet":"/static/d2cb1d5026eb68986f33462424c006a3/6d161/darrylblog1-150x150.png 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"W3C stands for the World Wide Web Consortium, a recognized global web standards body. Tim Berners-Lee founded this organization and is run…","fields":{"slug":"/engineering/w3c-validation/"},"html":"

W3C stands for the World Wide Web Consortium, a recognized global web standards body. Tim Berners-Lee founded this organization and is run by a full-time staff to continue creating and preserving web standards.

\n

These specifications are then used to direct the creation of code that lives up to those standards by web developers and browsers. They write the rule-book in a nutshell, which helps determine whether our code is well-written or poorly written.

\n

Let's understand some essential points of W3C validation.

\n

What is W3C Validation?

\n

World Wide Web Consortium (W3C) allows internet users to check HTML and XHTML documents for well-formatted markup. Markup validation is an important step towards ensuring the technical quality of web pages.

\n

Why Validate a Site on W3C?

\n

W3C validation is the process of checking a website's code to determine if it follows the formatting standards. If you fail to validate your website's pages based on W3C standards, your website will most likely suffer from errors or poor traffic owing to poor formatting and readability.

\n

1. Help Improve Rankings in Search Engines

\n

W3C validation helps you to get better rankings in search engines (SEO). Errors in your code can affect your site's performance and make a big impact on your site's SEO. Search engines check the HTML or XHTML code of your website when searching. 

\n

If they find invalid HTML or XHTML code – meaning code that does not follow the official rules, you might be removed from their indexes. If there is an error on your web page code, robots will stop searching your whole website's content.

\n

2. Validation Helps Teach Best Practices

\n

Having a standards-compliant code is the best practice for web design. It also teaches and encourages best practices for web design. While many veterans have learned to create error-free code and make relatively few validation errors, most beginners make more errors.

\n

Computer validation checks can help beginners learn from their mistakes.

\n

\"These technologies, which we call \"web standards,\" are carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the web.\" — Web Standards Group

\n

3. Improved Website User Experience

\n

W3C validated websites will be easily accessed by people with modern browsers. Validation improves usability and functionality because your users are less likely to run into errors when displayed on browsers compared to non-validated websites.

\n

Validation is fully compatible with a wide range of dynamic pages, scripting, active content, and multimedia presentations.

\n

The website validation process allows website designers to correct formatting errors that impact website performance, and following international standards, the code used in websites is reduced in size while improving efficiency.

\n

Because of this, web pages are displayed much faster and flow much better compared to websites that have not been validated.

\n

4. Make Website Browsers Friendly

\n

Making website browsers friendly is one of the biggest reasons why W3C code validation was introduced. Websites that are not validated may display correctly in one browser but not in other browsers. Many websites face cross-browser problems.

\n

Websites that are not validated may display formatting problems when used in certain browsers. On the other hand, W3C validated websites are displayed without errors regardless of what browser is used.

\n

There are five major web browsers: Google Chrome, Firefox, Microsoft Edge, and Safari, and usage among them translates to millions of internet users.

\n

5. Multiple Device Accessibility

\n

With the recent boom in smartphones and tablets, more people will be accessing the Internet from mobile devices than desktop computers.

\n

By 2020, mobile commerce will reach $2.91 trillion worldwide, and some sectors are seeing an even higher proportion of mobile traffic, so there is a growing need for website owners to maximize the usability of their websites on new devices.

\n

Unfortunately, many website owners do not take advantage of this growth and forego W3C validation that makes sure their websites and web pages are mobile-friendly too. If you want your website to be visited by as many users as possible, accessibility should be a big factor.

\n

6. Validation Help for Easy Coding and Maintenance

\n

Websites or web pages that validate using W3C website validation have code formatted efficiently and are easy to edit, and it helps website owners to create a new page or another new website with similar formatting.

\n

The validated code used in W3C HTML validation, W3C XHTML validation, or W3C CSS validation can be used in future sites.

\n

7. Validation as a Debugging Tool

\n

Validators tell you where you have errors in your code. If your page isn't displaying as expected, a validator might very well point you to the cause of the display problems.

\n

Also, an invalid code that may display fine in one document may show stopping errors in another because of the encompassing code.

\n

How Do You Validate Your Code?

\n

Validation is comparing your code to W3C standards. The best way to validate your code is by using the W3C validation tools.

\n\n

HTML Validator:

\n

This validator checks the markup validity of web documents in HTML, XHTML, SMIL, MathML, etc

\n

CSS Validator:

\n

This validator checks the CSS validity of web documents in HTML, XHTML etc.

\n

There are plenty of browser extensions that will test the page you're viewing against the W3C validators.

\n

HTML Tidy is another option for validating pages, though it may not offer the exact same results as the W3C validator. One advantage of HTML Tidy is using an extension; you can check your pages directly in the browser without visiting one of the validators sites.

\n

Conclusion

\n

If at all possible, any website should follow W3C validation requirements. It is the right way to do it, but it has many enduring advantages, such as extending the lifespan of the pages, maintaining browser stability, and much more. This will help you understand why W3C is necessary to test all our websites for W3C validation before calling a project complete.

\n","frontmatter":{"date":"January 26, 2015","updated_date":null,"description":"Learn what w3c is and why to use it, and also how to validate your web page for W3C standards, a simple guide on W3C validation.","title":"W3C Validation: What is it and why to use it?","tags":["W3C","Validation"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/198baa1960dbcb001c3f7c4c7a369913/ee604/w3c.png","srcSet":"/static/198baa1960dbcb001c3f7c4c7a369913/69585/w3c.png 200w,\n/static/198baa1960dbcb001c3f7c4c7a369913/497c6/w3c.png 400w,\n/static/198baa1960dbcb001c3f7c4c7a369913/ee604/w3c.png 800w,\n/static/198baa1960dbcb001c3f7c4c7a369913/f3583/w3c.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"Creating a popup is a very simple addition to any webpage. In this tutorial, I will show you how to create a popup using basic Html…","fields":{"slug":"/engineering/simple-popup-tutorial/"},"html":"

Creating a popup is a very simple addition to any webpage. In this tutorial, I will show you how to create a popup using basic Html, javascript and CSS. The first thing we want to think about is what we want to do to trigger a popup. You can trigger an event on almost anything such as a button, link or keypress. In this tutorial, we will be clicking on a button to trigger a popup.

\n

What you will need:

\n\n

Let’s start building the popup

\n
<html>\n<head>\n  <title>A Simple Popup</title>\n</head>\n<body>\n<div id="maincontent">\n    <h1>Page Content<h2>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n    <div class="popupcontent">\n        <h1>Some Popup Content</h1>\n    </div>\n</div>\n</body>\n</html>
\n

We’ve created a div with id overlay to cover all the page content when the popup is displayed. This forces the user to close the popup before returning to the page content and also creates a nice user experience. The div with id popup will be our popup containing controls at the top to close the popup and our content area. Currently, this popup has no content and no styling so nothing will show. Let's add some styling next.

\n
<html>\n<head>\n  <title>A Simple Popup</title>\n  <style>\n    #overlay {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        background: #999;\n        width: 100%;\n        height: 100%;\n        opacity: 0.8;\n        z-index: 100;\n    }\n\n    #popup {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        background: #fff;\n        width: 500px;\n        height: 500px;\n        margin-left: -250px; /*Half the value of width to center div*/\n        margin-top: -250px; /*Half the value of height to center div*/\n        z-index: 200;\n    }\n  </style>\n</head>\n<body>\n<div id="maincontent">\n    <h1>Page Content<h2>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n    <div class="popupcontent">\n        <h1>Some Popup Content</h1>\n    </div>\n</div>\n</body>\n</html>
\n

We’ve now added some CSS for the overlay and the popup. At this point, we can see a white box above our grey overlay. We’ve added an h1 tag inside our popup a page title and some main page content. We should now see something like this:

\n

\n \n \n

\n

Next let's add a control to close this popup. We’ll add a span containing an X that we can click on to close this popup and JavaScript to handle this event.

\n
<html>\n<head>\n  <title>A Simple Popup</title>\n  <style>\n    #overlay {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        background: #999;\n        width: 100%;\n        height: 100%;\n        opacity: 0.8;\n        z-index: 100;\n    }\n\n    #popup {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        background: #fff;\n        width: 500px;\n        height: 500px;\n        margin-left: -250px; /*Half the value of width to center div*/\n        margin-top: -250px; /*Half the value of height to center div*/\n        z-index: 200;\n    }\n\n    #popupclose {\n        float: right;\n        padding: 10px;\n        cursor: pointer;\n    }\n  </style>\n</head>\n<body>\n<div id="maincontent">\n    <h1>Page Content<h2>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n    <div class="popupcontrols">\n        <span id="popupclose">X</span>\n    </div>\n    <div class="popupcontent">\n        <h1>Some Popup Content</h1>\n    </div>\n</div>\n<script type="text/javascript">\n    // Initialize Variables\n    var closePopup = document.getElementById("popupclose");\n    var overlay = document.getElementById("overlay");\n    var popup = document.getElementById("popup");\n \n    // Close Popup Event\n    closePopup.onclick = function() {\n        overlay.style.display = 'none';\n        popup.style.display = 'none';\n    };\n</script>\n</body>\n</html>
\n

Now we can close this popup…. Ah, that’s nice. Here we’ve added our X to click on, some CSS to style this close area. Also, we’ve added the javascript to handle the click event to hide the popup. Save your file as index.html and open it in your browser to test closing the popup. You’ll notice that the popup is displayed when we first open the page. Let's hide this with CSS on load so that we have to do something to open it.

\n
#overlay {\n    display: none;\n    ...\n}\n \n#popup {\n    display: none;\n    ...\n}
\n

After adding display: none; to our overlay and popup, you’ll notice that when you load the page in your browser we cannot see them. To show this popup we’ll have to do something, so let’s make a button to click on and some JavaScript to handle this event.

\n
<html>\n<head>\n  <title>A Simple Popup</title>\n  <style>\n\t#overlay {\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\tbackground: #999;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\topacity: 0.8;\n\t\tz-index: 100;\n\t}\n\n\t#popup {\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\tbackground: #fff;\n\t\twidth: 500px;\n\t\theight: 500px;\n\t\tmargin-left: -250px; /*Half the value of width to center div*/\n\t\tmargin-top: -250px; /*Half the value of height to center div*/\n\t\tz-index: 200;\n\t}\n\n\t#popupclose {\n\t\tfloat: right;\n\t\tpadding: 10px;\n\t\tcursor: pointer;\n\t}\n\n\t.popupcontent {\n\t\tpadding: 10px;\n\t}\n\n\t#button {\n\t\tcursor: pointer;\n\t}\n  </style>\n</head>\n<body>\n<div id="maincontent">\n    <h1>Page Content<h2>\n    <button id="button">Show Popup</button>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n    <div class="popupcontrols">\n        <span id="popupclose">X</span>\n    </div>\n    <div class="popupcontent">\n        <h1>Some Popup Content</h1>\n    </div>\n</div>\n<script type="text/javascript">\n\t// Initialize Variables\n\tvar closePopup = document.getElementById("popupclose");\n\tvar overlay = document.getElementById("overlay");\n\tvar popup = document.getElementById("popup");\n\tvar button = document.getElementById("button");\n\t// Close Popup Event\n\tclosePopup.onclick = function() {\n\t  overlay.style.display = 'none';\n\t  popup.style.display = 'none';\n\t};\n\t// Show Overlay and Popup\n\tbutton.onclick = function() {\n\t  overlay.style.display = 'block';\n\t  popup.style.display = 'block';\n\t}\n</script>\n</body>\n</html>
\n

We’ve added a button in our main content area. To show the popup we’ve added a JavaScript function to change the overlay and our popup to display:block; on event onclick. After making these changes click on your button to open your popup.

\n

Demo:

\n

See the Pen OPmQMP by Zoie Carnegie (@zoie-loginradius) on CodePen.

\n

Please post your questions or feedback in the comment area.

\n","frontmatter":{"date":"January 05, 2015","updated_date":null,"description":null,"title":"A Simple Popup Tutorial","tags":["HTML","CSS","UI"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/53876e64ac99e057d364277e1ccec1ea/ee604/simplepop.png","srcSet":"/static/53876e64ac99e057d364277e1ccec1ea/69585/simplepop.png 200w,\n/static/53876e64ac99e057d364277e1ccec1ea/497c6/simplepop.png 400w,\n/static/53876e64ac99e057d364277e1ccec1ea/ee604/simplepop.png 800w,\n/static/53876e64ac99e057d364277e1ccec1ea/db955/simplepop.png 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Zoie Carnegie","github":null,"avatar":null}}}},{"node":{"excerpt":"Welcome to our new initiative to contribute and spread the learnings/findings we had working with LoginRadius API! We always try to come up…","fields":{"slug":"/engineering/hello-developers-and-designers/"},"html":"

Welcome to our new initiative to contribute and spread the learnings/findings we had working with LoginRadius API!

\n

We always try to come up with new ideas/process during our development and research sessions..sometimes they are funny but awesome. :). We'll share those ideas and experiences.look forward for your comments/feedback!

\n

--

\n

LoginRadius Engineering team

\n","frontmatter":{"date":"May 02, 2014","updated_date":null,"description":null,"title":"Hello developers and designers!","tags":["Engineering"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/61bc9402fec623803bf04d21e948e84a/2a4de/desdev.png","srcSet":"/static/61bc9402fec623803bf04d21e948e84a/69585/desdev.png 200w,\n/static/61bc9402fec623803bf04d21e948e84a/497c6/desdev.png 400w,\n/static/61bc9402fec623803bf04d21e948e84a/2a4de/desdev.png 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"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.jpg"}}}},"pageContext":{"limit":6,"skip":960,"currentPage":161,"type":"///","numPages":161,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}