{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/25","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Motivation Maps are an effective, intuitive way to understand data in some use-cases. Interactive web maps can help us visualize the data…","fields":{"slug":"/engineering/visualizing-data-using-leaflet-and-netlify/"},"html":"

Motivation

\n

Maps are an effective, intuitive way to understand data in some use-cases. Interactive web maps can help us visualize the data better and derive better insights.

\n

Different map visualizations can highlight different aspects of a dataset. Heatmaps, Choropleth maps and Clustering maps are frequently used for this purpose.

\n

In this blog, I shall go over using a powerful JavaScript library to build a web map and deploy it on Netlify.

\n

Using Leaflet

\n

The Leaflet is a great library for implementing interactive web maps as it provides many UI features, like smooth canvas panning, zooming, mouse events, and all the involved work in animations, which one would otherwise have to implement from scratch.

\n
\n

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of JS, it has all the mapping features most developers ever need.

\n

source: leafletjs.com

\n
\n

\"Leaflet

\n

We can include Leaflet in our application by including the CSS stylesheet and the JS file from the unpkg CDN. Let's start building the application by starting with the following code at the project root. Create a file named index.html and put the following markup in it. The map shall be rendered in div#mapid.

\n
<!--index.html-->\n<!DOCTYPE html>\n<html lang="en">\n\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>MapViz</title>\n    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />\n    <style>\n      #mapid {\n        position: fixed;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n      }\n    </style>\n  </head>\n\n  <body>\n    <div id="mapid"></div>\n    <script defer src="https://unpkg.com/leaflet/dist/leaflet.js"></script>\n  </body>\n\n</html>
\n

Now, we gather a link to the GeoJSON file for metro stations in Washington D.C., that we shall be visualizing, from the MapBox documentation. It should look similar to the following:

\n
https://docs.mapbox.com/help/data/stations.geojson
\n

Create a new JavaScript file named script.js in the same directory as the HTML file. Include this file in the web page by adding the following line to it.

\n
<!--index.html-->\n  ...\n  <body>\n    ...\n    <script defer src="https://unpkg.com/leaflet/dist/leaflet.js"></script>\n    <script src="script.js"></script>\n  </body>\n  ...
\n

In script.js, we can use the Fetch API to make an AJAX request and get the data as a response to a GET request using promises and take a look at what we are dealing with.

\n
// script.js\nlet data = {};\nconst dataUrl = 'https://cors-anywhere.herokuapp.com/https://docs.mapbox.com/help/data/stations.geojson';\n\nfetch(dataUrl)\n  .then(response => response.json())\n  .then(data => console.log(data))\n  .catch(err => console.error(err));
\n

We can take a look at the data in the Developer Console. We observe that it is a JavaScript object. The various properties associated with the data can be viewed by checking the individual features.

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    ...\n    {\n      "geometry": {\n        "type": "Point",\n        "coordinates": [-76.9750541388, 38.8410857803]\n      },\n      "type": "Feature",\n      "properties": {\n        "description": "Southern Ave",\n        "marker-symbol": "rail-metro",\n        "title": "Southern Ave",\n        "url": "http://www.wmata.com/rider_tools/pids/showpid.cfm?station_id=107",\n        "lines": ["Green"],\n        "address": "1411 Southern Avenue, Temple Hills, MD 20748"\n      }\n    },\n    ...\n  ]\n}
\n

Before we begin adding the layers to our map, we need to instantiate a Leaflet map object with the DOM ID of the map container and center it on our point of interest at a specified initial zoom level.

\n
const map = L.map('mapid').setView([38.8977, -77.0365], 15);
\n

As we need a base map (the base layer) for our map, we can use one that is provided by Mapbox. In order to use that, you need a Mapbox API access token that you can create on their portal.

\n

The following snippet instantiates a tileLayer object and adds it to our map:

\n
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {\n  attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',\n  maxZoom: 18,\n  id: 'mapbox/streets-v11',\n  tileSize: 512,\n  zoomOffset: -1,\n  accessToken: 'your_mapbox_api_access_token'\n}).addTo(map);
\n

We can use the following snippet to parse the GeoJSON and add it to the map.

\n
L.geoJSON(data).addTo(map);
\n

Replace the code in script.js with the following, and refresh the web page:

\n
let data = {};\nconst dataUrl = 'https://cors-anywhere.herokuapp.com/https://docs.mapbox.com/help/data/stations.geojson';\n\nconst map = L.map('mapid').setView([38.8977, -77.0365], 15);\n\nL.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {\n  attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',\n  maxZoom: 18,\n  id: 'mapbox/streets-v11',\n  tileSize: 512,\n  zoomOffset: -1,\n  accessToken: 'your_mapbox_api_access_token'\n}).addTo(map);\n\nfetch(dataUrl)\n  .then(response => response.json())\n  .then(data => {\n    L.geoJSON(data).addTo(map);\n  })\n  .catch(err => console.error(err));
\n

As the dataset contains Point features, markers will be added at the respective coordinates. Our web page will now look like the following:

\n

\"Map

\n

We can show tooltips upon clicking on the markers by modifying the code as follows, to include some custom HTML using the properties in the feature, in the popup:

\n
// script.js\n  ...\n  fetch(dataUrl)\n  .then(response => response.json())\n  .then(data => {\n    L.geoJSON(data, {\n      onEachFeature: function (feature, layer) {\n        layer.bindPopup(\n          '<h4>'\n          + feature.properties.title\n          + '</h4>'\n          + '<p>' \n          +  feature.properties.address\n          + '</p>'\n        );\n      }\n    }).addTo(map);\n  })\n  .catch(err => console.error(err));\n  ...
\n

Uupon clicking any marker, we will now see the following popup:

\n

\"Map

\n

We can also customize the marker icon using the pointToLayer option of the geoJSON constructor as follows:

\n
// scripts.js\n  ...\n  L.geoJSON(data, {\n      pointToLayer: function (feature, coords) {\n        return L.marker(coords, {\n          icon: new L.Icon({\n            iconSize: [30, 30],\n            iconAnchor: [15, 15],\n            popupAnchor: [1, -24],\n            iconUrl: 'https://cdn.iconscout.com/icon/free/png-256/metro-subway-underground-train-railway-engine-emoj-symbol-30744.webp'\n          })\n        });\n      },\n      onEachFeature: function (feature, layer) {\n        layer.bindPopup(\n          '<h4>'\n          + feature.properties.title\n          + '</h4>'\n          + '<p>'\n          + feature.properties.address\n          + '</p>'\n        );\n      }\n    }).addTo(map);\n    ...
\n

Our updated web page will now look like the following:

\n

\"Map

\n

Now, we can move on to deploy this web page on Netlify.

\n

Deploying on Netlify

\n

Netlify is an awesome platform to host your web applications. It also offers many other features such as serverless functions.

\n

\"Netlify

\n

Once you have pushed your web page to a Git repository, hosted either on GitHub, GitLab or BitBucket, navigate to Netlify and click on the New Site from Git button.

\n

\"Starting

\n

Next, select your Git provider and your repository:

\n

\"Git

\n

\"Git

\n

Go ahead with the defaults, and now your site shall be published on Netlify, and all future pushes should result in a Netlify deployment:

\n

\"Netlify

\n

Nice! Now we have a web map, even though a very basic one, live! Check out the Leaflet documentation for more!

\n

Source Code

\n

Demonstration: Priceless Poincare

\n

GitHub: leaflet netlify starter

\n","frontmatter":{"date":"October 14, 2020","updated_date":null,"description":"Let's visualize geospatial data on the web using Leaflet and host it on Netlify!","title":"Visualizing Data using Leaflet and Netlify","tags":["GIS","Serverless","JavaScript"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":2.0618556701030926,"src":"/static/f09ca52cdb62e663db2958fa17ee7f4a/58556/map.webp","srcSet":"/static/f09ca52cdb62e663db2958fa17ee7f4a/61e93/map.webp 200w,\n/static/f09ca52cdb62e663db2958fa17ee7f4a/1f5c5/map.webp 400w,\n/static/f09ca52cdb62e663db2958fa17ee7f4a/58556/map.webp 800w,\n/static/f09ca52cdb62e663db2958fa17ee7f4a/99238/map.webp 1200w,\n/static/f09ca52cdb62e663db2958fa17ee7f4a/42314/map.webp 1366w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Sudipto Ghosh","github":"sudiptog81","avatar":null}}}},{"node":{"excerpt":"Introduction The Secure Enclave is a hardware-based key manager that’s isolated from the main processor to provide an extra layer of…","fields":{"slug":"/engineering/secure-enclave-ios-app/"},"html":"

Introduction

\n

The Secure Enclave is a hardware-based key manager that’s isolated from the main processor to provide an extra layer of security. Using a secure enclave, we can create the key, securely store the key, and perform operations with the key. Thus makes it difficult for the key to be compromised.

\n

We usually save data persistently in the app using UserDefaults, Keychain, Core Data or SQLite.\nFor example, To save the session of logged in user, we save username and password. But this process puts our data at high-security risk. So it's always recommended to store sensitive data in an encrypted format. But again, it's a challenge to secure keys used in encryption/decryption.

\n

\"Secure

\n

Now here Secure Enclave comes in the role.

\n

In this blog, we will use Secure Enclave to generate key pair and use those in encryption/decryption of sensitive data further.

\n

Here I will create a wrapper to generate key pair using Secure Enclave and use them to encrypt/decrypt sensitive data. And also a viewcontroller to show how to use a wrapper to get encrypted and decrypted data.\nYou may implement wrapper's methods as common methods and use wherever needed in the project. But its recommended to use a separate wrapper for handling communication with Secure Enclave.

\n

Wrapper

\n

I have created .h and .m files named as SecEnclaveWrapper as a subclass of NSObject.\nIn .h file I am declaring function for being accessible from other classes like:

\n
/**\nReturn encrypted value of data using kSecKeyAlgorithmECIESEncryptionStandardX963SHA256AESGCM algo\n*/\n- (NSData *_Nonnull)encryptData:(NSData *_Nonnull)data ;\n\n/**\nReturn decryrpted data of encrypted data  using kSecKeyAlgorithmECIESEncryptionStandardX963SHA256AESGCM algo\n*/\n- (NSData *_Nonnull)decryptData:(NSData *_Nonnull)data ;\n\n/**\nReturn an initialized instance of the wrapper\n*/\n- (instancetype)init;
\n

Then in .m file, define the following methods as :

\n

The method init initializes and returns the object of this wrapper class. And 'encryptData' and 'decryptData' method return encrypted data and decrypted data of encrypted data, respectively.

\n
- (instancetype)init {\n    self = [super init];\n    \n    if(![self lookupPublicKeyRef] || ![self lookupPrivateKeyRef])\n        [self generatePasscodeKeyPair];\n    \n    return self;\n}\n- (NSData *)encryptData:(NSData *)data {\n    if (data && data.length) {\n        \n        CFDataRef cipher = SecKeyCreateEncryptedData(publicKeyRef, kSecKeyAlgorithmECIESEncryptionStandardX963SHA256AESGCM, (CFDataRef)data, nil);\n        \n        return (__bridge NSData *)cipher;\n    } else {\n        return nil;\n        \n    }\n}\n- (NSData*)decryptData:(NSData *)data {\n    \n    if(data && data.length){\n        \n        CFDataRef plainData = SecKeyCreateDecryptedData(privateKeyRef, kSecKeyAlgorithmECIESEncryptionStandardX963SHA256AESGCM, (CFDataRef)data, nil);\n        return  (__bridge NSData *)plainData;\n    }\n    else {\n        return nil;\n    }\n}
\n

The 'lookupPublicKeyRef' method below will lookup keychain for public key & 'lookupPrivateKeyRef' method search for the private key and return key if found.

\n
- (SecKeyRef) lookupPublicKeyRef\n{\n    OSStatus sanityCheck = noErr;\n    NSData *tag;\n    id keyClass;\n    \n    if (publicKeyRef != NULL) {\n        // if already resides in memory, return\n        return publicKeyRef;\n    }\n    tag = [kPublicKeyName dataUsingEncoding:NSUTF8StringEncoding];\n    keyClass = (__bridge id) kSecAttrKeyClassPublic;\n    \n    \n    NSDictionary *queryDict = @{\n        \n        (__bridge id) kSecClass : (__bridge id) kSecClassKey,\n        (__bridge id) kSecAttrKeyType : (__bridge id) kSecAttrKeyTypeEC,\n        (__bridge id) kSecAttrApplicationTag : tag,\n        (__bridge id) kSecAttrKeyClass : keyClass,\n        (__bridge id) kSecReturnRef : (__bridge id) kCFBooleanTrue\n    };\n    //else look key in keychain and return\n    sanityCheck = SecItemCopyMatching((__bridge CFDictionaryRef) queryDict, (CFTypeRef *) &publicKeyRef);\n    if (sanityCheck != errSecSuccess) {\n        NSLog(@"Error trying to retrieve key from server.  sanityCheck: %d", (int)sanityCheck);\n    }\n    \n    return publicKeyRef;\n}\n- (SecKeyRef) lookupPrivateKeyRef\n{\n    CFMutableDictionaryRef getPrivateKeyRef = newCFDict;\n    CFDictionarySetValue(getPrivateKeyRef, kSecClass, kSecClassKey);\n    CFDictionarySetValue(getPrivateKeyRef, kSecAttrKeyClass, kSecAttrKeyClassPrivate);\n    CFDictionarySetValue(getPrivateKeyRef, kSecAttrLabel, kPrivateKeyName);\n    CFDictionarySetValue(getPrivateKeyRef, kSecReturnRef, kCFBooleanTrue);\n    \n    OSStatus status = SecItemCopyMatching(getPrivateKeyRef, (CFTypeRef *)&privateKeyRef);\n    if (status == errSecItemNotFound)\n        return nil;\n    \n    return (SecKeyRef)privateKeyRef;\n}
\n

The following methods will actually deal with Secure Enclave to generate a private key and public key.

\n
- (bool) generatePasscodeKeyPair\n{\n    CFErrorRef error = NULL;\n    SecAccessControlRef sacObject = SecAccessControlCreateWithFlags(\n                                                                    kCFAllocatorDefault,\n                                                                    kSecAttrAccessibleAfterFirstUnlockThisDeviceOnly,\n                                                                    kSecAccessControlPrivateKeyUsage,\n                                                                    &error\n                                                                    );\n    \n    if (error != errSecSuccess) {\n        NSLog(@"Generating key pair, error: %@\\n", error);\n    }\n    \n    return [self generateKeyPairWithAccessControlObject:sacObject];\n}\n\n- (bool) generateKeyPairWithAccessControlObject:(SecAccessControlRef)accessControlRef\n{\n    // create dictionary of private key \n    CFMutableDictionaryRef accessControlDict = newCFDict;;\n#if !TARGET_IPHONE_SIMULATOR\n    \n    CFDictionaryAddValue(accessControlDict, kSecAttrAccessControl, accessControlRef);\n#endif\n    CFDictionaryAddValue(accessControlDict, kSecAttrIsPermanent, kCFBooleanTrue);\n    CFDictionaryAddValue(accessControlDict, kSecAttrLabel, kPrivateKeyName);\n    \n    // create dictionary for saving key into keychain\n    CFMutableDictionaryRef generatePairRef = newCFDict;\n#if !TARGET_IPHONE_SIMULATOR\n    \n    CFDictionaryAddValue(generatePairRef, kSecAttrTokenID, kSecAttrTokenIDSecureEnclave);\n#endif\n    CFDictionaryAddValue(generatePairRef, kSecAttrKeyType, kSecAttrKeyTypeEC);\n    CFDictionaryAddValue(generatePairRef, kSecAttrKeySizeInBits, (__bridge const void *)([NSNumber numberWithInt:256]));\n    CFDictionaryAddValue(generatePairRef, kSecPrivateKeyAttrs, accessControlDict);\n    \n    OSStatus status = SecKeyGeneratePair(generatePairRef, &publicKeyRef, &privateKeyRef);\n    \n    if (status != errSecSuccess){\n        NSLog(@"Error trying to retrieve key from server.  sanityCheck: %d", (int)status);\n        \n        return NO;\n    }\n    [self savePublicKeyFromRef:publicKeyRef];\n    return YES;\n}
\n

The private key is generated and stored in Secure Enclave which cannot be directly used. Whereas public key have to be stored manually in keychain by following method.

\n
- (bool) savePublicKeyFromRef:(SecKeyRef)publicKeyRef\n{   OSStatus sanityCheck = noErr;\n    NSData *tag;\n    id keyClass;\n    \n    \n    tag = [kPublicKeyName dataUsingEncoding:NSUTF8StringEncoding];\n    keyClass = (__bridge id) kSecAttrKeyClassPublic;\n    \n    \n    NSDictionary *saveDict = @{\n        \n        (__bridge id) kSecClass : (__bridge id) kSecClassKey,\n        (__bridge id) kSecAttrKeyType : (__bridge id) kSecAttrKeyTypeEC,\n        (__bridge id) kSecAttrApplicationTag : tag,\n        (__bridge id) kSecAttrKeyClass : keyClass,\n        (__bridge id) kSecValueData : (__bridge NSData *)SecKeyCopyExternalRepresentation(publicKeyRef,nil),\n        (__bridge id) kSecAttrKeySizeInBits : [NSNumber numberWithUnsignedInteger:256],\n        (__bridge id) kSecAttrEffectiveKeySize : [NSNumber numberWithUnsignedInteger:256],\n        (__bridge id) kSecAttrCanDerive : (__bridge id) kCFBooleanFalse,\n        (__bridge id) kSecAttrCanEncrypt : (__bridge id) kCFBooleanTrue,\n        (__bridge id) kSecAttrCanDecrypt : (__bridge id) kCFBooleanFalse,\n        (__bridge id) kSecAttrCanVerify : (__bridge id) kCFBooleanTrue,\n        (__bridge id) kSecAttrCanSign : (__bridge id) kCFBooleanFalse,\n        (__bridge id) kSecAttrCanWrap : (__bridge id) kCFBooleanTrue,\n        (__bridge id) kSecAttrCanUnwrap : (__bridge id) kCFBooleanFalse\n    };\n    sanityCheck = SecItemAdd((__bridge CFDictionaryRef) saveDict, (CFTypeRef *)&publicKeyRef);\n    if (sanityCheck != errSecSuccess) {\n        NSLog(@"Error trying to retrieve key from server.  sanityCheck: %d", (int)sanityCheck);\n        \n    }\n    \n    return publicKeyRef;\n}
\n

Demo

\n

Now I am creating ViewController.h and .m files. In viewDidLoad in .m file, having a string to be stored in UserDefaults. I will encrypt this string by a private key generated above and then store persistently encrypted data for later use.

\n
- (void)viewDidLoad {\n    [super viewDidLoad];\n    NSString *strDatatosave = @"example data to save";\n    NSString *bundleIdentifier = [[NSBundle mainBundle] bundleIdentifier];\n    NSString *strGroupID = [NSString stringWithFormat:@"group.%@",bundleIdentifier];\n    SecEnclaveWrapper *keychainItem = [[SecEnclaveWrapper alloc] init];\n    \n    NSData *encrypted = [keychainItem encryptData:[strDatatosave dataUsingEncoding:NSUTF8StringEncoding]];\n    NSString *strEncrypted = [[NSString alloc] initWithData:encrypted encoding:NSUTF8StringEncoding];\n    NSLog(@"encrypted string %@",strEncrypted);\n    \n    NSData *decrypted =[keychainItem decryptData:encrypted];\n    NSString *strDecrypted = [[NSString alloc] initWithData:decrypted encoding:NSUTF8StringEncoding];\n    \n    NSLog(@"decrypted string as real string%@",strDecrypted);\n\n}
\n

Conclusion

\n

In this blog, we learned about the basics of key generation via Secure Enclave and encryption and decryption using keys.\nBy default, key-pairs are generated in the Secure Enclave. The private key is available only at creation time and can not be obtained later as it is saved in Secure Enclave. Operations can be performed with it without exposing it to user code. Only Public Key will be stored and retrieved.

\n

You can find the complete repository link here

\n

Thanks for reading the blog. For detailed information and execution example of this blog, please refer to the video below:

\n\n","frontmatter":{"date":"October 13, 2020","updated_date":null,"description":"SecureEnclaveDemo is an xcode project containing helper named as SecEnclaveWrapper. You can use this wrapper in your project to encrypt/decrypt sensitive data using Secure Enclave. Let's understand more about in the blog.","title":"Secure Enclave in iOS App","tags":["ios","security","data","encryption","private key","xcode"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/e677a934323b29af4619ee797f0286b8/58556/CoverImage.webp","srcSet":"/static/e677a934323b29af4619ee797f0286b8/61e93/CoverImage.webp 200w,\n/static/e677a934323b29af4619ee797f0286b8/1f5c5/CoverImage.webp 400w,\n/static/e677a934323b29af4619ee797f0286b8/58556/CoverImage.webp 800w,\n/static/e677a934323b29af4619ee797f0286b8/210c1/CoverImage.webp 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Tanvi Jain","github":"tanvijn","avatar":null}}}},{"node":{"excerpt":"What is STL? STL stands for Standard Template Library. If you've used C++ even in small projects, you've likely already used STL - which is…","fields":{"slug":"/engineering/cpp-stl-containers/"},"html":"

What is STL?

\n

STL stands for Standard Template Library. If you've used C++ even in small projects, you've likely already used STL - which is a great thing! Using STL in C++ makes your code more expressive, simple, and easy to understand. This post will give you an overview of how STL works, some examples, and the basic knowledge you need to get started!

\n

STL Components

\n

Loosely speaking, the first components you'd typically understand and use of STL are Containers & Algorithms. Then there's also Iterators & Functors, but you should try to take them on one by one, in that order perhaps. This blog will expand a bit on STL Containers.

\n

Containers

\n

Suppose you are at your favorite cinema hall and it's the launch of a big movie. Since it's the launch, there are likely many people waiting in line to buy their tickets. Naturally, you join the queue at the back and wait for your turn. In the computing world, we have a queue too! This is a popular data structure. If you've had a Data Structures class before, you are most likely familiar with some other data structures as well. These are often used, so the STL provides a great implementation of all these data structures, otherwise known as containers.

\n

Take arrays, for example. Arrays are elements with the same type, stored in contiguous blocks of memory. In C++, you can use arrays as you would in C, like this:

\n
std::string students[10];\nstudents[0] = "Adam";
\n

But wait, STL provides a container for arrays too. It's available in the header <array>. Example usage of it would look like this:

\n
#include <iostream>\n#include <string>\n\nint main() {\n    std::array<std::string, 10> students;\n    students[0] = "Adam's Friend";\n    \n    cout << students[0] << endl;\n}
\n

So, what's the difference? Why should you use the STL Container class? The performance difference is negligible, but what makes the container classes better is that it is a class. A wrapper class around normal arrays, and offers some advantages like passing by values, bounds checking, etc. As a side note, you'd normally want to use an std::vector instead - which is a dynamically resizable array.

\n

Other examples

\n

Other containers in C++ include:

\n\n

STL - What next?

\n

Containers aren't the only part of STL. It is huge! You are encouraged to read up more on STL, as it makes your life easier in every manner! You don't need to reinvent the wheel. Next, you could try looking up the various algorithms contained in the STL. They're present in the header file <algorithm>. Good luck on your journey!

\n","frontmatter":{"date":"October 13, 2020","updated_date":null,"description":"Learn how Standard Template Library works in C++ with interactive examples and what you need to get started","title":"STL Containers & Data Structures in C++","tags":["C++","STL"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/4ec0001784cd81b020aea7e2bbf26abb/58556/cover.webp","srcSet":"/static/4ec0001784cd81b020aea7e2bbf26abb/61e93/cover.webp 200w,\n/static/4ec0001784cd81b020aea7e2bbf26abb/1f5c5/cover.webp 400w,\n/static/4ec0001784cd81b020aea7e2bbf26abb/58556/cover.webp 800w,\n/static/4ec0001784cd81b020aea7e2bbf26abb/99238/cover.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Aryan Rawlani","github":"aryanrawlani28","avatar":null}}}},{"node":{"excerpt":"Before we get into details of finding out optimal clusters, let's first see what the KMeans clustering algorithm is and some basics about it…","fields":{"slug":"/engineering/optimal-clusters-kmeans/"},"html":"

Before we get into details of finding out optimal clusters, let's first see what the KMeans clustering algorithm is and some basics about it.

\n

What is Clustering?

\n

Clustering is an unsupervised ML technique wherein we cluster the data to get insights from it. Clustering the data is quite essential for some business models and problems. It gives us conclusions on what is a cluster, i.e. data which is similar and in the form of cluster or groups.

\n
\n

Clustering is the process of dividing the entire data into groups (also known as clusters) based on the patterns in the data.

\n
\n

What is the KMeans clustering algorithm?

\n

It is an algorithm for clustering. We will be discussing this method with code in the further sections.

\n

Initial Imports :

\n
import pandas as pd\nimport numpy as np\nimport matplotlib.pyplot as plt\nfrom sklearn.cluster import KMeans\n%matplotlib inline
\n

Method :

\n

Now let's discuss the method behind finding out the right number of clusters on a K-Means clustering algorithm.\nSo we will learn how to decide what number of clusters to input into your K-Means algorithm.\nHere we've got a data science problem.\nWe've got only two variables, x and y coordinates.

\n

Now, if we run the K means clustering algorithm on this dataset with three clusters or with K pre-determine the clusters to be three, then the result will look something like this.

\n

\"initial\"

\n

We need a specific metric, we need a way to understand or evaluate how a certain number of clusters performs compared to a different number of clusters, and preferably, that metric should be quantifiable.

\n

So what kind of metric can we impose upon our clustering algorithm that will tell us something about the final result?\nThere is such a metric called the within-cluster sum of squares. (WCSS)

\n

\"Wcss\"

\n

So you can see here that it jumps from 8000 down to 3000, that's a massive change of 5000. Let's just call them units, 5000 units and then from 3000 as we increase the number of the close from 2 to 3, they jump from 3000 to 1000.

\n

Again quite a large drop and then from three to four what's going to happen is going to jump from 1000 to maybe eight hundred and from 800 to 600, 600 to 500 and so on so as you can see the first two improvements or first two changes from one cluster to two from two to three created some huge jumps or considerable drops in the WTS going forward The WCR says drops not substantially. And this is our hint at selecting the optimum optimal number of clusters; and the method we're going to use is the elbow method, and it is very visual. All you have to do is look at your chart and look for that change, or that's kind of like it does look like an ELBOW.

\n

Look for that elbow in your chart where the drop goes from being quite substantial to being not as significant not as proven is not as great, and therefore, that point in your chart will be the optimal number of clusters.

\n

In this case, it is indeed three clusters.

\n

That is the optimal number. And as you can imagine, this method is entirely arbitrary.\nSometimes, the situations are not as pronounced as the elbow might not be as evident as in this case, and therefore, somebody might pick one number of clusters. Someone else might come along and select a different number.

\n

CODE :

\n
from sklearn.cluster import KMeans\nwcss = []\n\nfor i in range(1, 11):\n\n  kmeans = KMeans(n_clusters = i, init = 'k-means++', random_state = 42)\n\n  kmeans.fit(X)\n  \n  wcss.append(kmeans.inertia_)\n\nplt.plot(range(1, 11), wcss)\n\nplt.title('The Elbow Method')\n\nplt.xlabel('Number of clusters')\n\nplt.ylabel('WCSS')\n\nplt.show()
\n","frontmatter":{"date":"October 12, 2020","updated_date":null,"description":null,"title":"Optimal clusters for KMeans Algorithm","tags":["Machine Learning"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/225782b978d81111592f1f839c6dc1e4/58556/cover.webp","srcSet":"/static/225782b978d81111592f1f839c6dc1e4/61e93/cover.webp 200w,\n/static/225782b978d81111592f1f839c6dc1e4/1f5c5/cover.webp 400w,\n/static/225782b978d81111592f1f839c6dc1e4/58556/cover.webp 800w,\n/static/225782b978d81111592f1f839c6dc1e4/b0b9b/cover.webp 1192w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Neeraj Ap","github":"NEERAJAP2001","avatar":null}}}},{"node":{"excerpt":"Introduction When building APIs, the need to upload files is expected, which can be images, text documents, scripts, pdfs, among others. In…","fields":{"slug":"/engineering/upload-files-with-node-and-multer/"},"html":"

Introduction

\n

When building APIs, the need to upload files is expected, which can be images, text documents, scripts, pdfs, among others. In the development of this functionality, some problems can be found, such as the number of files, valid file types, sizes of these files, and several others. And to save us from these problems we have the Multer library. Multer is a node.js middleware for handling multipart/form-data that is used to send files in forms.

\n

First steps

\n

The first step is to create a NodeJS project on your computer.

\n

Adding Express

\n

In your terminal, type the following command:

\n
yarn add express
\n

* You can also use NPM for installation

\n

Create a file named app.js inside the src/ folder. The next step is to start our Express server in our app.js

\n
const express = require("express")\nconst app = express()\n\napp.listen(3000 || process.env.PORT, () => {\n  console.log("Server on...")\n})
\n

Adding Multer

\n

With the project created, configured and with Express installed, we will add the multer to our project.

\n
yarn add multer
\n

The next step is to import the multer into our app.js file.

\n
const multer = require("multer")
\n

We are almost there. Now create a folder called uploads where we will store the uploaded files.

\n

Configuring and validating the upload

\n

Now we are at a very important stage which is the configuration of diskStorage. DiskStorage is a method made available by multer where we configure the destination of the file, the name of the file and we can also add validations regarding the type of the file. These settings are according to the needs of your project. Below I will leave an elementary example of the configuration.

\n
const storage = multer.diskStorage({\n  destination: (req, file, cb) => {\n    cb(null, "uploads/")\n  },\n  filename: (req, file, cb) => {\n    cb(null, Date.now() + "-" + file.originalname)\n  },\n})
\n

In the configuration above, we mentioned the destination for the uploaded files and also change the name of the file .

\n

Providing an upload route

\n
const uploadStorage = multer({ storage: storage })\n\n// Single file\napp.post("/upload/single", uploadStorage.single("file"), (req, res) => {\n  console.log(req.file)\n  return res.send("Single file")\n})\n\n//Multiple files\napp.post("/upload/multiple", uploadStorage.array("file", 10), (req, res) => {\n  console.log(req.files)\n  return res.send("Multiple files")\n})
\n

In the code snippet above, we created 2 POST routes for sending files. The first /upload/single route receives only a single file, note that the uploadStorage variable receives our diskStorage settings. As a middleware in the route, it calls the single method for uploading a single file. The /upload/multiple route receives several files, but with a maximum limit of 10 files, note that the uploadStorage variable now calls the ʻarray` method for uploading multiple files.

\n

The end

\n

With all the settings done, our little API is already able to store the files sent.

\n
const express = require("express")\nconst multer = require("multer")\n\nconst app = express()\n\nconst storage = multer.diskStorage({\n  destination: (req, file, cb) => {\n    cb(null, "uploads/")\n  },\n  filename: (req, file, cb) => {\n    cb(null, Date.now() + "-" + file.originalname)\n  },\n})\n\nconst uploadStorage = multer({ storage: storage })\n\n// Single file\napp.post("/upload/single", uploadStorage.single("file"), (req, res) => {\n  console.log(req.file)\n  return res.send("Single file")\n})\n//Multiple files\napp.post("/upload/multiple", uploadStorage.array("file", 10), (req, res) => {\n  console.log(req.files)\n  return res.send("Multiple files")\n})\n\napp.listen(3000 || process.env.PORT, () => {\n  console.log("Server on...")\n})
\n

Now it's up to you!

\n","frontmatter":{"date":"October 12, 2020","updated_date":null,"description":"Learn how to upload files in a NodeJS application using Multer, Multer is a middleware for handling multipart/form-data that is used to send files in forms.","title":"Upload files using NodeJS + Multer","tags":["NodeJs","Express","Multer"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/7abf157b1bfeb7c65d7e338a620ac875/58556/node-multer-upload.webp","srcSet":"/static/7abf157b1bfeb7c65d7e338a620ac875/61e93/node-multer-upload.webp 200w,\n/static/7abf157b1bfeb7c65d7e338a620ac875/1f5c5/node-multer-upload.webp 400w,\n/static/7abf157b1bfeb7c65d7e338a620ac875/58556/node-multer-upload.webp 800w,\n/static/7abf157b1bfeb7c65d7e338a620ac875/99238/node-multer-upload.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Gabriel Rabelo","github":"gabrielrab","avatar":null}}}},{"node":{"excerpt":"Introduction Learning Deep Features for Discriminative Localization: Machine learning and Deep learning are gaining traction in today’s…","fields":{"slug":"/engineering/class-activation-mapping/"},"html":"

Introduction

\n

Learning Deep Features for Discriminative Localization:

\n

Machine learning and Deep learning are gaining traction in today’s world and are making significant and unimaginable progress in almost every industry. However, with the increase in complexity and accuracy of these algorithms, the interpretability of these is at stake- especially the deep learning models which take in more than a million parameters for complex, convoluted models. Class Activation Mapping (CAM) is one such technique which helps us in enhancing the interpretability of such complex models.

\n

Class Activation Mapping (CAMs)

\n

For a particular class (or category), Class activation mapping basically indicates the discriminative region of the image, which influenced the deep learning model to make the decision. The architecture is very similar to a convolutional neural network. It comprises several convolution layers, with the layer just before the final output performing Global Average Pooling. The features that are obtained are fed into the fully connected neural network layer governed by the softmax activation function and thus, output us the required probabilities. The importance of the weights with respect to a category can be found out by projecting back the weights onto the last convolution layer’s feature map.

\n

Global Average Pooling (GAP) vs Global Max Pooling (GMP)

\n

The Global Average Pooling (GAP) is preferred over Global Max Pooling (GMP) because GAP helps us in identifying the full extent of the object as compared to the GMP layer, which identifies one discriminative part. In Global Average Pooling, an average is taken across all the activation maps which help us to find all the possible discriminative regions present in them. Contrary to this, the Global Max Pooling method just considers the most discriminative region. Hence, Global Average Pooling showed better results than Global Max Pooling.

\n

Mathematical equations governing CAMs

\n

Let \"Equation be the activation map of unit \"Equation in the last convolutional layer at spatial location \"Equation.

\n

The result of GAP is represented as:-

\n

\"Equation

\n

For a class c, an input to the softmax will be:-

\n

\"Equation

\n

Output of Softmax layer:-

\n

\"Equation

\n

Thus, the final equation for an activation map of class c would be:-

\n

\"Equation

\n

Weakly-supervised Object Localization

\n

The localization ability of the CAM method was put to the test when they were trained on the ILSVRC 2014 benchmark dataset. The CAM technique was used on popular CNN models like AlexNet, VGGNet and GoogLeNet by tweaking their models and fitting a GAP layer (similar to the CAM architecture) towards the end. This modified model was giving astounding results with the GAP layer as compared to their traditional architecture in terms of discriminative localization.

\n

Deep Features for Generic Localization

\n

After applying a CAM architecture to fine-grained recognition and pattern discovery (like discovering informative objects in the scenes, concept localization in weakly labelled images, weakly supervised text detector and interpreting visual question answering), we can infer that feature capturing and localization was far more accurate in the CAM based GAP layer architecture, as the complete extent of the features were captured.\nVisualizing Class-specific Units:-\nWhen we use the GAP layer and the ranked softmax weight, we can directly visualize the units, which are the most discriminative for a particular class. Thus, CNN actually learns a bag of words, where each word is a discriminative class-specific unit. A combination of these class-specific units helps to guide CNNs in classifying each image.

\n

Conclusion:

\n

CAMs are a great technique to interpret the information from the CNN models. However, the disadvantage of CAMs is that they can be noisy, and there might be some loss of spatial information. Hence, the Grad-CAM architecture and the Score-CAM architecture were built upon the CAM architecture to improve the accuracy, feature capturing and retain precise spatial information.

\n","frontmatter":{"date":"October 10, 2020","updated_date":null,"description":"Learn about the importance of the explainability of deep learning models and Class Activation Map Technique","title":"Class Activation Mapping in Deep Learning","tags":["Explainable AI","Deep Learning","CNN","Machine Learning"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/f00bfab91c9b545daddfe5a17abc22c8/58556/Cover.webp","srcSet":"/static/f00bfab91c9b545daddfe5a17abc22c8/61e93/Cover.webp 200w,\n/static/f00bfab91c9b545daddfe5a17abc22c8/1f5c5/Cover.webp 400w,\n/static/f00bfab91c9b545daddfe5a17abc22c8/58556/Cover.webp 800w,\n/static/f00bfab91c9b545daddfe5a17abc22c8/99238/Cover.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Ankit Choraria","github":"Ankit810","avatar":null}}}}]},"markdownRemark":{"excerpt":"Introduction Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT…","fields":{"slug":"/engineering/how-to-integrate-jwt/"},"html":"

Introduction

\n

Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT, or JSON Web Tokens, a compact, stateless method for securely transmitting user identity and session data across services.

\n

With JWT token authentication, identity information is embedded in a signed token, allowing you to maintain user sessions without server-side storage. This approach is highly scalable and ideal for modern architectures like SPAs, mobile apps, and microservices.

\n

In this blog, we’ll walk you through what is JWT, why use it, and how to implement JWT authentication using LoginRadius.

\n

You’ll learn what JWT is, why it’s effective, and how it works in real-world applications. We'll cover both integration methods (IDX and Direct API), generating your signing key, managing sessions, storing the JWT token securely, and applying best practices throughout.

\n

Whether you're a developer, product manager, or IAM architect, this guide offers a complete foundation for implementing JWT token authentication into your application stack.

\n

What is JWT?

\n

JSON Web Token (JWT) is an open standard (RFC 7519) used to transmit information securely between parties as a JSON object. It’s compact, self-contained, and digitally signed, making it a reliable format for authentication and authorization across modern applications.

\n

A JWT consists of three parts:

\n
    \n
  1. Header – Contains metadata like the type of token and signing algorithm (e.g., HS256).
    2. \n
  2. Payload – Stores the actual data or “claims,” such as user ID, roles, and token expiry.
    3. \n
  3. Signature – A cryptographic hash that ensures the token hasn’t been tampered with.
    4. \n
\n

Example of a token structure:

\n

<base64Header>.<base64Payload>.<signature>

\n

Why Use JWT?

\n\n

How JWT Works?

\n

\"Flowchart

\n
    \n
  1. A user logs in with credentials.
    2. \n
  2. Your app (or identity provider like LoginRadius) issues a signed JWT.
    3. \n
  3. The client stores the token and sends it with each request (usually in the Authorization header).
    4. \n
  4. The server validates the token’s signature and claims.
    5. \n
  5. If valid, access is granted — without any session stored on the backend.
    6. \n
\n

JWT simplifies identity verification, especially when you're building apps that talk to APIs or need to scale without centralized session storage.

\n

JWT Authentication with LoginRadius: Overview

\n

LoginRadius provides robust support for JWT (JSON Web Token) authentication, which allows for flexible and secure access control across different digital platforms. Whether you're building a fully custom identity flow or using a pre-built interface, the platform supports various integration approaches depending on your architecture.

\n

If you're looking to understand how to implement JWT token authentication effectively, LoginRadius offers two primary implementation models that cater to different levels of customization and control:

\n

1. IDX Implementation – JWT through a Hosted Login Page

\n

The IDX-hosted login approach enables secure, standards-compliant, JWT-based authentication without requiring you to build a custom login interface. This is a strategic option for fast, compliant, and user-friendly deployments.

\n\n

Configuration Steps:

\n
    \n
  1. Enable JWT Login
    2. \n
  2. Go to authentication configuration settings and enable JWT Login in the Admin Console.
    3. \n
\n

\"Screenshot

\n
    \n
  1. Specify your signing algorithm and expiry policy, and define your JWT Secret Key.
    2. \n
  2. Input a secure JWT signing key.
    3. \n
  3. Specify token expiry duration (e.g., 15–60 minutes)
    4. \n
  4. Select the desired algorithm —HS256 for symmetric signing (same key signs and verifies)
    5. \n
  5. RS256 for asymmetric signing, where LoginRadius securely stores the private key used to sign the JWT.
    6. \n
  6. Your app or backend service uses the public key to validate the token signature.
    7. \n
  7. LoginRadius provides a JWKS (JSON Web Key Set) endpoint to dynamically fetch and rotate public keys, ensuring trust without key exposure.
    8. \n
  8. Update IDX Template for Callback
    9. \n
  9. Modify your IDX login page template to retrieve the JWT post-login. You can access the token via redirect URL parameters or secure JavaScript callbacks.
    10. \n
\n

Example Response:

\n

{

\n

\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR...\",

\n

\"expires_in\": 1800

\n

}

\n

This integration approach works best for all teams that want effective identity workflows without the complexity of building proprietary login screens, something that is crucial for customer portals, onboarding of mobile applications, and even managing access for business partners.

\n

2. Direct API Implementation – Self Managed Login

\n

If you’re building a custom login UI or working in a headless environment, LoginRadius lets you generate and handle JWTs directly through its Authentication APIs. Here’s how you can programmatically perform token authentication using the classic method:

\n\n

Configuration Steps:

\n

Step 1: Authenticate via API:

\n\n

Include the user’s credentials (email + password) in the request body.

\n

Step 2: Get JWT in Response

\n\n

{

\n

\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\",

\n

\"expires_in\": 3600

\n

}

\n

Step 3: JWT Decoding and Validation

\n\n

Step 4: Set Custom Claims (Optional)

\n

With LoginRadius, it is possible to customize the payload to include user roles and/or any additional metadata. You can set custom JWT claims on the Admin Console.

\n

With this method, you have complete customization over login flows while using LoginRadius to issue signed JWTs for user session management.

\n

NOTE- With either method, LoginRadius ensures that JWTs are securely signed, optionally short-lived, and compatible with standard token validation libraries, making integration seamless for everyone.

\n

To get started with JWT implementation, you can read our complete developer documentation.

\n

Hosted Login vs Direct API

\n

\"Illustration

\n

What is Session Management and How It Works with JWT

\n

Session management is how your app keeps track of a user after they log in so they don’t have to prove who they are with every request.

\n

In traditional apps, sessions are stored on the server using session IDs. Every time a request comes in, the server checks that session ID to verify the user.

\n

In modern apps, especially SPAs and APIs, JWTs are used to manage sessions without needing server-side storage; this is called stateless session management. The token itself carries the user’s identity, roles, and expiration details. As long as the token is valid, the user stays logged in.

\n

Good session management ensures:

\n\n

How LoginRadius Handles Session Management with JWT:

\n
    \n
  1. \n

    User Logs In

    \n\n
    2. \n
  2. \n

    Client Stores the Token

    \n\n
    3. \n
  3. \n

    Access Token Expiry

    \n\n
    4. \n
  4. \n

    Token Renewal

    \n\n
    5. \n
  5. Logout and Token Revocation Strategy
    6. \n
\n

When the user logs out, both the access token and refresh token should be cleared from client storage.

\n\n

Combining these strategies gives you greater control over token misuse and enables a robust, enterprise-grade logout flow.

\n

\"illustration

\n

How to Store JWT Tokens?

\n

When you implement JWT-based authentication, the client (browser or mobile app) needs a way to store the access token and, optionally, the refresh token after they are issued by the authentication server. This stored token is then attached to every subsequent request to prove the user's identity.

\n

Choosing where to store the JWT is a crucial security decision. The most common storage options are:

\n\n

Each option has trade-offs between security, accessibility, and persistence, and the right choice depends on your application's architecture and threat model.

\n

Recommended Storage Strategy

\n\n

Best Practices for Storing JWTs

\n
    \n
  1. Never store sensitive tokens (like refresh tokens) in localStorage or sessionStorage.
    2. \n
  2. Use Secure and HttpOnly flags with cookies to prevent JavaScript access and ensure transmission only over HTTPS.
    3. \n
  3. Set the SameSite=Strict or Lax attribute on cookies to protect against CSRF.
    4. \n
  4. Use short-lived access tokens and rotate refresh tokens regularly.
    5. \n
  5. Implement CSP (Content Security Policy) to reduce XSS risk.
    6. \n
  6. Avoid storing any tokens in frontend code (e.g., hardcoded in JS files).
    7. \n
\n

Conclusion

\n

JWT authentication with LoginRadius offers a modern, stateless approach to managing sessions across distributed systems. The IDX integration is ideal for rapid deployment, while the Direct API model is best for organizations needing deep customization and integration flexibility.

\n

With robust token signing, refresh capabilities, and centralized control, LoginRadius provides a future-ready foundation for secure, scalable identity architecture. Contact us to know more about JWT authentication and implementation guide.

\n

FAQs

\n

1. What is JWT authentication used for?

\n

A: JWT authentication securely verifies user identities, enabling stateless session management across web, mobile apps, and microservices without server-side session storage.

\n

2. How does LoginRadius simplify JWT integration?

\n

A: LoginRadius simplifies JWT integration by offering hosted IDX login pages and direct API-based authentication methods, enabling rapid deployment and deep customization.

\n

3. Is JWT authentication secure?

\n

A: Yes, JWT authentication is secure when implemented with best practices like short-lived tokens, secure storage methods, signature validation, and refresh token rotation.

\n

4. Can JWT tokens be revoked with LoginRadius?

\n

A: Yes, LoginRadius allows revocation of JWT refresh tokens explicitly, and supports strategies like short-lived tokens and key rotation to manage token lifecycles securely.

\n","frontmatter":{"date":"April 15, 2025","updated_date":null,"description":"Discover JWT (JSON Web Token) authentication, its advantages, and how to integrate it seamlessly using LoginRadius' hosted IDX and Direct API methods for secure, scalable identity management.","title":"JWT Authentication with LoginRadius: Quick Integration Guide","tags":["JWT","JSON Web Token","Authentication","Authorization"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":0.7782101167315175,"src":"/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp","srcSet":"/static/4cedb7829f98208cbc6d5a9aea4e983d/61e93/how-to-integrate-jwt.webp 200w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1f5c5/how-to-integrate-jwt.webp 400w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp 800w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1cc9f/how-to-integrate-jwt.webp 896w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},"pageContext":{"limit":6,"skip":144,"currentPage":25,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}