{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/157","result":{"data":{"allMarkdownRemark":{"edges":[{"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

    \n \n \n

    \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

    \n \n \n

    \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

    \n \n \n

    \n

    \n \n \n

    \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

    \n \n \n

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

    \n

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

    \n

    \n \n \n

    \n

    Confirm it by clicking the right button again.

    \n

    \n \n

    \n \n \n

    \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

    \n \n \n

    \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

    \n \n \n

    \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

    \n \n \n

    \n

    You can get this information by adding -vvv and you can use the command

    \n
    stats slabs under telnet connection ip port
    \n

    Every time when a new memory needs to be allocated. It will scan the slab class to find the most suitable class to store the chunk.

    \n

    Rebalance and reassign slab memory:

    \n

    From memcached’s wiki:

    \n

    Overview: Memcached 1.4.11. Fixes race conditions and crashes introduced in 1.4.10. Adds the ability to rebalance and reassign slab memory.

    \n

    Slab Reassignment

    \n

    Long running instances of memcached memory may run into an issue where all available memory has been assigned to a specific slab class (say items of roughly size 100 bytes). Later the application starts storing more of its data into a different slab class (items around 200 bytes). Memcached could not use the 100 byte chunks to satisfy the 200 byte requests, and thus you would be able to store very few 200 byte items.

    \n

    1.4.11 introduces the ability to reassign slab pages. This is a beta feature and the commands may change for the next few releases, so please keep this in mind. When the commands are finalized they will be noted in the release notes

    \n

    Slab Automove

    \n

    While slab reassign is a manual feature, there is also the start of an automatic memory reassignment algorithm.

    \n

    From the source code in slabs.c we can see, memcached uses two threads to monitor the slabs class, one is to do maintenance and another one is to do the re-balance the class.

    \n

    Memcached defines a global variable struct slab\\rebalance slab_rebal,_ which is used to store the start, end information of slab. s_clsid is the source slab id and d_clsid is the destination slab id. The detailed blog in Chinese memcached源码分析—–slab automove和slab rebalance could be helpful.

    \n
    struct slab_rebalance {\n    void *slab_start;\n    void *slab_end;\n    void *slab_pos;\n    int s_clsid;\n    int d_clsid;\n    int busy_items;\n    uint8_t done;\n};
    \n

    Memory Pool

    \n

    Memcached implements its own memory pool, which is used to avoid system memory allocation and memory fragmentation. That will make your memory efficient and easy to manage. Here is a demo implementation of memory pool. Basically it is a large pre-allocated chunk of memory.

    \n
     mem_avail) {\n        return NULL;\n    }\n    /* mem_current pointer _must_ be aligned!!! */\n    if (size % CHUNK_ALIGN_BYTES) {\n        size += CHUNK_ALIGN_BYTES - (size % CHUNK_ALIGN_BYTES);\n    }\n    mem_current = ((char*)mem_current) + size;\n    if (size
    \n","frontmatter":{"date":"July 07, 2015","updated_date":null,"description":null,"title":"Memcached Memory Management","tags":["Memory Management"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/de7966e19463e0047c10eea9388c12c4/7d145/memcached-memory-management.png","srcSet":"/static/de7966e19463e0047c10eea9388c12c4/69585/memcached-memory-management.png 200w,\n/static/de7966e19463e0047c10eea9388c12c4/497c6/memcached-memory-management.png 400w,\n/static/de7966e19463e0047c10eea9388c12c4/7d145/memcached-memory-management.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Mark Duan","github":null,"avatar":null}}}},{"node":{"excerpt":"HTML 5 is the latest and greatest web technology, although it has some issues in some browsers which don’t have native support for the new…","fields":{"slug":"/engineering/html5-limitation-in-internet-explorer/"},"html":"

    HTML 5 is the latest and greatest web technology, although it has some issues in some browsers which don’t have native support for the new HTML5 elements. If you want to support some of the older browsers which may still be in use such as IE8 and lower then you are going to have some trouble using HTML5.

    \n

    The problem with IE8 and lower versioned IE browsers is that they were created many years ago while HTML5 is new technology and HTML5 tags were newly invented so legacy browsers do not support them. Microsoft will not release any updates for these browsers because they have released new versions of the IE browser.

    \n

    As old IE browsers do not know about these tags then it can’t style them so you will find that in IE8 or lower your websites will be rendered without many styles.

    \n

    How to use HTML5 in IE

    \n

    If you want HTML5s new tags to be supported in IE then you need to add some javascript to create the elements:

    \n

    Example:

    \n
      <script>\n    document.createElement('header');\n    document.createElement('article');\n    document.createElement('aside');\n    document.createElement('footer');\n  </script>
    \n

    This is not a very good way, you would need to remember all the tags that you have set and include them on every page of your website. If you add any new tags then you need to add these tags on every page of the website as well. Thankfully Remy Sharp provided a solution for this, Remy Sharp has created a Javascript file which he hosts with google code that will handle this for you.

    \n

    add the following at the top of your pages and it will include this code file on your website if the end user is using an IE browser lower than version 9.

    \n
    <!--[if lt IE 9]>\n<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>\n<![endif]-->
    \n

    IE also does not support some of the most useful new HTML5 methods that are supported by modern browsers:Window.postMessage()

    \n

    Window.postMessage

    \n

    allows for sending data messages between two windows/frames across domains. Normally, scripts on different pages are allowed to access each other if and only if the pages that executed them are at the same locations with the same protocol (usually both http) and matching host names. The HTML5 postMessage function provides a great way to communicate securely and with high performance and reliability even cross-domain. Unfortunately, the HTML5 postMessage function does not work in IE

    \n

    Let’s take a look at how Window.postMessage works:

    \n

    Syntax

    \n

    The below signature is used for postMessage:

    \n

    otherWindow.postMessage(message, targetOrigin);

    \n

    otherWindow\nA reference to another window; such a reference may be obtained, for example, using the contentWindow property of an iframe element, the object returned by window.open

    \n

    message\nThis parameter is required for a message to be sent to the other window. The message is serialized using the structured clone algorithm. This means you can pass a broad variety of data objects safely to the destination window without having to serialize them yourself.

    \n

    targetOrigin\nWhen the message is dispatched, the current location of the target document is checked. If it does not match the specified URI, then the message will not be dispatched. This parameter can be useful if you want to be sure of the location of the target document before dispatching the message and you can also specify a literal string “*”  (indicating no preference) or as a URI

    \n

    but always provide a specific targetOrigin, not *, if you know where the other window’s document should be located. If you do not set a specific location and use “*” then a malicious site can change the location of the window without your knowledge, and therefore it can intercept the data sent using the postMessage method.

    \n

    Example for postMessage

    \n

    Sender

    \n

    The first part of the process is setting up a “source”.  With the source, we will open a new window (or IFrame), send the new window message (in the our example, we’ll do so every 6 seconds, and create an event listener for any response we receive from the destination window.

    \n
    //create popup window\nvar domain = 'https://www.example.com';\nvar myPopup = window.open(domain + '/postmessage.html','myWindow');\n//periodical message sender\nsetInterval(function(){\n    var message = 'Hello!  The time is: ' + (new Date().getTime());\n    myPopup.postMessage(message,domain); //send the message and target URI\n},6000);\n \n//listen to back\n \nwindow.addEventListener('message',function(event) {\n    if(event.origin !== 'http://scriptandstyle.com') return;\n        console.log('received response:  ',event.data);\n},false);
    \n

    I have used window.addEventListener which doesn’t work with Internet Explorer so use window.attachEvent

    \n

    Receiver

    \n

    In the destination window we should validate the message origin and if it is not valid then we will not send the message to the sender, otherwise we send a response back to the sender:

    \n
    window.addEventListener('message',function(event) {\n    if(event.origin !== 'https://lrblogs.wpengine.com) return;\n        event.source.postMessage('message received:  ',event.origin);\n},false);
    \n

    sessionStorage

    \n

    sessionStorage stores data for one session only, this is used in a single transaction it stores the data only for one session and as you close the window the session would be lost and  the data is deleted when the browser is closed.

    \n

    HTML5 sessionStorage object are shared in different tabs in the same browser session if you change a sessionStorage attribute’s value in one tab, that change should be reflected within another tab but in IE8 this system will not work properly it does not share sessionStorage objects between frames on a page. This issue has since been fixed in IE11.

    \n

    Example:

    \n
    //save a value\nsessionStorage.setItem("website", "https://www.example.com");\n//retrieve item\nvar website= sessionStorage.getItem("website");\n//remove the key\nsessionStorage.removeItem(“website”);
    \n

    localStorage

    \n

    The localStorage object stores the data like a persistent cookie, with no expiration date. The data will not be deleted when the browser is closed, and will be available when a user returns to the browser.

    \n

    IE also supports localStorage from IE8 but it does not support localStorage in IE7 and previous versions.

    \n

    localStorage Vs Cookies

    \n
      \n
    1. Cookies are small text files stored by browsers allowing for a max of 4KB while with localStorage we can store Mbs of localStorage data.
      2. \n
    2. Cookies are delivered with every request, which can slow down the delivery of your web pages.
      3. \n
    \n

    Example

    \n
    //save a value\nlocalStorage.setItem("Domain", "https://www.example.com");\n//retrieve item\nvar website= localStorage.getItem("website");\n//remove the key\nlocalStorage.removeItem(“website”);
    \n","frontmatter":{"date":"June 30, 2015","updated_date":null,"description":null,"title":"HTML5 Limitation in Internet Explorer","tags":["Java","Maven","Eclipse"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/56b8ac1b7f3b7dfdc03ce43aa1e62eaa/7d145/radio-check-buttons-css.png","srcSet":"/static/56b8ac1b7f3b7dfdc03ce43aa1e62eaa/69585/radio-check-buttons-css.png 200w,\n/static/56b8ac1b7f3b7dfdc03ce43aa1e62eaa/497c6/radio-check-buttons-css.png 400w,\n/static/56b8ac1b7f3b7dfdc03ce43aa1e62eaa/7d145/radio-check-buttons-css.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"An API is an acronym for Application Programming Interface. API's include various tools, protocols, and routines. API's are used as a way…","fields":{"slug":"/engineering/what-is-an-api/"},"html":"

    An API is an acronym for Application Programming Interface. API's include various tools, protocols, and routines. API's are used as a way for applications to communicate with various systems.

    \n

    But what does this mean? Well let me explain what they are with some examples. I am going to be using various API's for these examples.

    \n

    Let's Begin

    \n

    Let's start by looking at a favorite website of mine called The Yoda Speak Generator found here.

    \n

    This website allows users to enter text and get a return of that same text formatted the way Yoda might say it. This is done with an API.

    \n

    Yoda Speak: Fun stuff, api's are! Yes, hmmm.

    \n

    API’s contain what is called an endpoint to access this API. The endpoint provides the connection to communicate with the API and give it some text to generate into Yoda Speak. The API would then return the generated Yoda Speak to the location of the request.

    \n

    Another way to think of an API is to think of it like an egg carton. An egg carton holds the eggs, protects them from damage and allows someone who wants to make breakfast a way to open and close the carton to access the eggs inside. The eggs inside would be the data, and the hand reaching into the carton would be much like the communication using an endpoint from a server.

    \n

    Okay, Let's make breakfast.... Just Kidding!

    \n

    For those of you who are visual Let's look at some examples of the code. These snippets are in PHP because it is my favorite language. Below is a link to download a small zip file called apidemo.zip.

    \n

    Demo Link

    \n

    You can host this directory on your localhost or on a website if you choose.

    \n

    After you have extracted the zip and have a directory such as localhost/apidemo open a browser and enter http://localhost/apidemo/api.php?request=example&name=yourname where localhost is your domain.

    \n

    To enter this endpoint in an application that makes API calls try Postman. Here is a link for a chrome extension.

    \n

    Try using a GET and a POST method with parameters request=example for the example function in api.php and name=yourname to output a name

    \n

    You should now see the output \"Your name is yourname\" in your browser

    \n

    explore the files api.php, API.class.php and MyAPI.php to explore how this simple API is taking in the parameters and outputting a name

    \n

    Hopefully, I have explained API's so you have a basic understanding of what they are. There are many types of API's, one that you may see often is RESTful API's, these unlike this example must abide by constraints that have been defined by the REST architecture.

    \n","frontmatter":{"date":"June 23, 2015","updated_date":null,"description":null,"title":"What is an API","tags":["API","Postman"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/2d243d0a5adf35bcbc0248f9e4a5054b/630fb/whats-an-api-300x300.png","srcSet":"/static/2d243d0a5adf35bcbc0248f9e4a5054b/69585/whats-an-api-300x300.png 200w,\n/static/2d243d0a5adf35bcbc0248f9e4a5054b/630fb/whats-an-api-300x300.png 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Zoie Carnegie","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":936,"currentPage":157,"type":"///","numPages":161,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}