{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/115","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Writing a foolproof code is hard, especially with a team collaborating on a single project. Thus it becomes increasingly important to ensure…","fields":{"slug":"/engineering/e2e-testing-with-jest-puppeteer/"},"html":"

Writing a foolproof code is hard, especially with a team collaborating on a single project. Thus it becomes increasingly important to ensure that no new code breaks existing functionality. And for this purpose, automated tests are used.

\n

Requirements

\n
    \n
  1. Basic knowledge of Javascript
    2. \n
  2. Familiarity with Node.js
    3. \n
\n

In this blog, we will learn how to integrate Jest and Puppeteer in our project for End-to-End Testing. Jest is a javascript testing framework maintained by Facebook. Puppeteer is a Node library created by Google, which provides a high-level API to control headless Chrome. Before we delve deeper into Jest and Puppeteer, let's familiarise ourselves with a few things.

\n

End-to-End(E2E) Testing: E2E testing refers to the testing of a complete functionality of some application. It checks that a functionality acts as intended.

\n

Headless Testing: Headless testing is a way or running browser UI tests without any browser UI. It is a preferred method mainly due to its performance. It is fast, light-weight, and less resource-intensive.

\n

Installation

\n

To install Jest and Puppeteer, open the command line in your project directory and run:

\n

For npm users:
\nnpm install --save-dev jest puppeteer jest-puppeteer

\n

For yarn users:
\nyarn add --dev jest puppeteer jest-puppeteer.

\n

Now that we've installed Jest and Puppeteer, it is time to set up the testing environment. Create a file jest.config.js in the project root directory and write the following code in it:

\n
module.exports = {\n  preset: "jest-puppeteer",\n  globals: {\n    URL: "http://localhost:8080"\n  },\n  testMatch: [\n    "<path-to-the-tests-folder>/**.test.js"\n  ],\n  verbose: true\n};
\n

Defining the preset sets up a puppeteer environment for testing. Test match directs it to the folder where tests are defined, for a piece of more detailed knowledge about running Jest with Puppeteer check this out.

\n

Now create a file jest-puppeteer.config.js in the project root directory. Here we define the testing environment further. To begin with you can add the following in this file:

\n
module.exports = {\n    launch: {\n        headless: process.env.HEADLESS !== 'false',\n        slowMo: process.env.SLOWMO ? process.env.SLOWMO : 0,\n        devtools: true\n    }\n}
\n

Testing

\n

Now we can begin writing our tests. In this example, we'll start writing a basic test to check the title of the page opened. Now head over to the tests folder defined and create a file title.test.js. As you might have noticed, .test.js would be the file extension of the jest tests defined.

\n

This is what a typical title.test.js would look like:

\n
// Defining the timeout for the test\nconst timeout = process.env.SLOWMO ? 6000 : 4000;\nconst fs = require('fs');\n\n// Go to the specified path and wait for the domcontent to load before running the tests\nbeforeAll(async () => {\n  path = fs.realpathSync('file://<file-path>');\n  await page.goto('file://' + path, {waitUntil: 'domcontentloaded'});\n});\n\ndescribe('Title of the page', () => {\n  test('Title of the page', async () => {\n    // Gets page title\n    const title = await page.title();\n    // Compares it with the intended behaviour\n    expect(title).toBe('<title-of-the-page>');\n\n  }, timeout);\n});
\n

Hurray! You've added Headless UI tests to your project. Now you can similarly define tests for different functionalities using the docs here.

\n

Cons of using jest-puppeteer

\n
    \n
  1. It is headless and hence fast, light-weight, and less resource-intensive.
    2. \n
  2. It can stimulate keyboard-press and mouse-click akin to manual testing functions.
    3. \n
  3. It is simple and easy to use and works out of the box.
    4. \n
\n

Problems that you might face

\n

It could give a sandbox-ing error if you run it in a container without a defined user. When running headless Chrome in a container without a defined user, the chromeOptions environment property needs a --no-sandbox args (in addition to the other headless args), or Chrome won't be able to startup. The possible solutions to this are:

\n
    \n
  1. Make sure you're not running them as a root user.
    2. \n
  2. If running them as a root user, include args: ['--no-sandbox'] in jest-puppeteer.config.js (not recommended).
    3. \n
  3. Make sure you have all the required dependencies installed.\nFor Debian systems that can be installed using:\nsudo apt-get install gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
    4. \n
\n

Happy coding! =)

\n","frontmatter":{"date":"October 15, 2020","updated_date":null,"description":"Learn how to integrate Jest and Puppeteer in your project for End-to-End Testing.","title":"End-to-End Testing with Jest and Puppeteer","tags":["Testing","Jest","Puppeteer"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.6129032258064515,"src":"/static/bc9e7eb8f88f913bb3f3ba67edf01319/01a28/jest-puppeteer.png","srcSet":"/static/bc9e7eb8f88f913bb3f3ba67edf01319/69585/jest-puppeteer.png 200w,\n/static/bc9e7eb8f88f913bb3f3ba67edf01319/497c6/jest-puppeteer.png 400w,\n/static/bc9e7eb8f88f913bb3f3ba67edf01319/01a28/jest-puppeteer.png 799w","sizes":"(max-width: 799px) 100vw, 799px"}}},"author":{"id":"Shreya Sharma","github":"cypherean","avatar":null}}}},{"node":{"excerpt":"A Few Ways to Speed Up Your Python Code Python is one of the most popular languages all over the world. Nowadays it is being used in…","fields":{"slug":"/engineering/speed-up-python-code/"},"html":"

A Few Ways to Speed Up Your Python Code

\n

Python is one of the most popular languages all over the world. Nowadays it is being used in competitive programming also because of its simple syntax and rich libraries. Most of us probably started coding with python. At first, everything goes simple and easy. But while solving a hard algorithmic problem, most of us suffer from Time Limit Exceeded. However, it is not a problem of python; it is the programmer's problem. I am not saying that language is not slow, but if a programmer writes an efficient programme, it will get Accepted for sure. Here are some tips to speed up your python programme.

\n

Use proper data structure

\n

Use of proper data structure has a significant effect on runtime. Python has list, tuple, set and dictionary as the built-in data structures. However, most of the people use the list in all cases. But it is not a right choice. Use proper data structures depending on your task. Especially use a tuple instead of a list. Because iterating over tuple is easier than iterating over a list.

\n

Decrease the use of for loop

\n

As for loop is dynamic in python, it takes more time than while loop. So, use while loop instead of for loop.

\n

Use list comprehension

\n

Do not use any other technique if you can use list comprehension. For example, here is a code to list all the numbers between 1 and 1000 that is the multiplier of 3:

\n
L = []\nfor i in range (1, 1000):\n    if i%3 == 0:\n        L.append (i)
\n

Using list comprehension, it would be:

\n
L = [i for i in range (1, 1000) if i%3 == 0]
\n

List comprehension works faster than using the append method.

\n

Use multiple assignments

\n

Do not assaign variables like this:

\n
a = 2\nb = 3\nc = 5\nd = 7
\n

Instead, assign variables like this:

\n
a, b, c, d = 2, 3, 5, 7
\n

Do not use global variables

\n

Python has global keyword to declare global variables. But global variables take higher time during operation than a local variable. So, do not use global variables if it is not necessary.

\n

Use library function

\n

Do not write your function (manually) if it is already in the library. Library functions are highly efficient, and you will probably won't be able to code with that efficiency.

\n

Concatenate strings with join

\n

In python, you can concatenate strings with + operation.

\n
concatenatedString = "Programming " + "is " + "fun."
\n

It can also be done with join() method.

\n
concatenatedString = " ".join (["Programming", "is", "fun."])
\n

join() concatenates strings faster than + operation because + operators create a new string and then copies the old content at each step. But join() doesn't work that way.

\n

Use generators

\n

If you have a large amount of data in your list and you need to use one data at a time and for once then use generators. It will save you time.

\n

It may seem efficient, but it's not

\n

See the below code:

\n
L = []\nfor element in set(L):\n    ...
\n

The above code may seem efficient because it used set to delete duplicate data. But the reality is that the code is not efficient. Do not forget that converting a list into set takes time. So this code will work better than the previous:

\n
for element in L:\n    ...
\n

Do not use dot operation

\n

Try to avoid dot operation. See the below programme.

\n
import math\nval = math.sqrt(60)
\n

Instead of the above style write code like this:

\n
from math import sqrt\nval = sqrt(60)
\n

Because when you call a function using . (dot) it first calls __getattribute()__ or __getattr()__ which then use dictionary operation which costs time. So, try using from module import function.

\n

Use 1 for infinity loops

\n

Use while 1 instead of while True. It will reduce some runtime.

\n

Try a different approach

\n

Try new ways to write your code efficiently. See the below code.

\n
if a_condition:\n    if another_condition:\n        do_something\nelse:\n    raise exception
\n

Instead of the above code you can write:

\n
if (not a_condition) or (not another_condition):\n    raise exception\ndo_something
\n

Use speed up applications

\n

For python's slow speed, some projects have been taken to decrease runtime. Pypy and Numba two of them. In most of the programming contests, you will see pypy if it allows python. These applications will reduce the runtime of your programme.

\n

Use special libraries to process large datasets

\n

C/C++ is faster than python. So, many packages and modules have been written in C/C++ that you can use in your python programme. Numpy, Scipy and Pandas are three of them and are popular for processing large datasets.

\n

Use the latest release of python

\n

Python is updated and upgraded regularly, and every release is faster and more optimized. So always use the latest version of python.

\n

These were some of the tips to decrease the runtime of python code. There are a few more techniques that you can use. Use a search engine to find those and write efficient code!

\n","frontmatter":{"date":"October 15, 2020","updated_date":null,"description":"Learn a few ways to speed up your python code.","title":"Speed Up Python Code","tags":["Python","Performance"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/80999ea5cffd2a5ffbfe1622f4b9c068/14b42/speed-up-python-code-1.jpg","srcSet":"/static/80999ea5cffd2a5ffbfe1622f4b9c068/f836f/speed-up-python-code-1.jpg 200w,\n/static/80999ea5cffd2a5ffbfe1622f4b9c068/2244e/speed-up-python-code-1.jpg 400w,\n/static/80999ea5cffd2a5ffbfe1622f4b9c068/14b42/speed-up-python-code-1.jpg 800w,\n/static/80999ea5cffd2a5ffbfe1622f4b9c068/47498/speed-up-python-code-1.jpg 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Md. Tahmid Hossain","github":"tahmid02016","avatar":null}}}},{"node":{"excerpt":"Back in the day, when consumers wanted to access different sites and applications, they had to register first, and then log in with their…","fields":{"slug":"/identity/loginradius-federated-identity-management/"},"html":"

Back in the day, when consumers wanted to access different sites and applications, they had to register first, and then log in with their usernames and passwords every single time. Such experiences are no longer acceptable to consumers and they choose to opt-out of such services.

\n

The recently launched Federated Identity Management by LoginRadius is an arrangement to simplify the implementation of Single Sign-On (SSO) and user experience across applications. 

\n

Intent Behind the Launch

\n

Federated Identity Management by LoginRadius helps businesses and applications use a single set of identity data. Consumers need not create multiple accounts for multiple organizations to access their web applications. These applications do not  communicate with each other directly and standard SSO protocols like JWT, SAML, OAuth 2.0, OIDC etc are used to establish the communication.

\n

\n \n \n

\n

Federated Identity Management is designed by LoginRadius to help your business in the following ways: 

\n\n

Key Capabilities of Federated Identity Management by LoginRadius

\n

\n \n \n

\n

1. Support for industry-standard SSO protocols: LoginRadius supports the following standard SSO protocols: 

\n\n

2. LoginRadius Admin Console: LoginRadius offers a simple dashboard to manage all configurations required for the above mentioned SSO protocols.

\n

3. API support for protocols: LoginRadius covers end-to-end API support for the SSO protocols mentioned above which make integration and implementation relatively easy to be executed within any system.

\n

4. LoginRadius acts as Identity Provider: LoginRadius acts as an IdP which stores and authenticates the identities that consumers use to log in to systems, applications, files servers, and more depending upon the configuration.

\n

A Final Word

\n

Federated Identity Management by LoginRadius is a way to connect multiple web applications and services using the same identity data. It’s a many to one mapping to help your consumers access your business and partners with a single credential set.   

\n

\n \n \n

\n","frontmatter":{"date":"October 15, 2020","updated_date":null,"description":"Our Federated Identity Management feature is designed to simplify the implementation of Federated SSO, so consumers now do not need to create multiple accounts for multiple organisations to access their web applications.","title":"Announcement - LoginRadius Simplifies the Implementation of Federated SSO With Federated Identity Management","tags":["industry-news"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.408450704225352,"src":"/static/e3e15cc0e99afbd02b2a610532659be3/33aa5/fim-image.jpg","srcSet":"/static/e3e15cc0e99afbd02b2a610532659be3/f836f/fim-image.jpg 200w,\n/static/e3e15cc0e99afbd02b2a610532659be3/2244e/fim-image.jpg 400w,\n/static/e3e15cc0e99afbd02b2a610532659be3/33aa5/fim-image.jpg 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"excerpt":"Build a Twitter Bot with NodeJs Hey there! In this blog post, we will build a twitter bot that let us tweet using the command line directly…","fields":{"slug":"/engineering/build-a-twitter-bot-using-nodejs/"},"html":"

Build a Twitter Bot with NodeJs

\n

Hey there! In this blog post, we will build a twitter bot that let us tweet using the command line directly.

\n
\n

Node and npm (or, yarn) must be installed on your system.

\n
\n

Let's Start 🎉

\n

We will use twitter - a client library for the Twitter REST and Streaming APIs. This npm package will make the whole process of building the bot a whole lot easier and faster.

\n

1. Apply for a Twitter Developer Account

\n

To be able to access Twitter API, you need a Twitter Developer Account. Apply for it here. Click on Apply for a Developer Account.

\n

\n \n \n

\n

It will ask you to log in. Select appropriate settings after logging in. It will also generate keys and secret tokens like Consumer Key, Consumer Secret, Access Token Key, Access Token Secret. Copy and save them somewhere for future use.

\n

2. Setup Project

\n

Make a project folder with any name of your choice. Run npm init to initialize the project. This will generate a package.json file in your directory. Alternatively, you can run npm init -y to setup your project with default settings.

\n
\n

package.json holds all the dependencies of a project.

\n
\n

Since our project will be dependent on twitter client library, it's time we install this dependency in our project. Run npm install twitter to include this in your package.json .

\n

3. Setup Files

\n

Now we will start with the actual coding part. At the moment, your project folder will have a node_modules folder, a package.json file, and a package-lock.json file. If you have gone with the default options while running npm init, then index.js is the file we will be working upon.

\n

Open index.js. To be able to use the twitter library, which we have installed, you need to include it in index.js.

\n

var Twitter = require('twitter');

\n

Also, remember the keys and tokens you got from Twitter Developer Portal? It's time we use them.

\n
var client = new Twitter({\n\tconsumer_key: process.env.CONSUMER_KEY,\n\tconsumer_secret: process.env.CONSUMER_SECRET,\n\taccess_token_key: process.env.ACCESS_TOKEN_KEY,\n\taccess_token_secret: process.env.ACCESS_TOKEN_SECRET\n});
\n

Do not add your Consumer or Access Token keys or secrets directly in the index.js. These should be managed accordingly using environment variables.

\n
\n

We will use dotenv library to manage our environment variables in NodeJS. Run npm install dotenv and follow these instructions. Your .env will look something like this.

\n
\n
CONSUMER_KEY=........................................\nCONSUMER_SECRET=.....................................\nACCESS_TOKEN_KEY=....................................\nACCESS_TOKEN_SECRET=.................................
\n

4. Start Coding 🎯

\n

I will use Official Joke API to automatically fetch content for my tweet. You can visit the repository and learn more about the endpoints. But the only endpoint we will work with is random_joke. Click on this, and you will receive a JSON response with fields id, type, setup, and punchline. The fields we are concerned with are setup and punchline.

\n

We will use axios for calling the API endpoint. Run npm install axios and add var axios = require('axios'); in index.js.

\n

Now everything has been laid out. We need to connect the dots. The Official Joke API will return a JSON response. We will grab the required data, i.e., the setup and the punchline from it. And then make use of client.post functionality of twitter package.

\n
axios("https://official-joke-api.appspot.com/random_joke").then(Response => {\n\treturn [Response.data.setup, Response.data.punchline];\n}).then(([setup, punch]) => {\n\tclient.post('statuses/update', {status: `${setup}\\n${punch}`}, function(error, tweet, response){\n\t\tif(!error){\n\t\t\tconsole.log(tweet);\n\t\t}\n\t})\n});
\n

Now run node index.js on the terminal and see the output.\nIf everything went well, you would see a tweet response, otherwise an error message. The successful message would look something like this.

\n

At this point, your index.js should look like this.

\n

\n \n \n

\n

Congratulations! 🎊

\n

That's it! You have created your first Twitter Bot, which tweets content after directly calling it from an API. You might take a look at the repository if you encountered any errors. Here, I have used different APIs to fetch content and tweet. Moreover, I have added a script that will search posts with a particular hashtag and like them.

\n
\n

While pushing your code to GitHub, make sure to add .gitignore file and include node_modules and .env in it.

\n
\n

Further Reading

\n
\n

The world is yours to explore.

\n
\n

And the dev world is based entirely on exploring technologies and frameworks. Play with this twitter library and see what interesting stuff can be built with it. Maybe, search tweets with a particular hashtag and like them? Or maybe, retweet tweets of any particular user? You are free to use your imagination and coding skills to explore more and more. If axios and dotenv are new to you, then go ahead and read their documentation. Get hold of the concepts of environment variables. And come up with your own cool Twitter Bot.

\n
\n

Keep in mind Twitter's Developer Policy & Terms and Twitter Terms & Conditions. These should not be violated in whatever project you are building.

\n
\n","frontmatter":{"date":"October 14, 2020","updated_date":null,"description":"Learn how to create a twitter bot using NodeJS that let us tweet using the command line directly","title":"Build A Twitter Bot Using NodeJS","tags":["NodeJs","Twitter","Bot"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/73b57d06f8809fab5ebb6ad89ab328ef/14b42/cover.jpg","srcSet":"/static/73b57d06f8809fab5ebb6ad89ab328ef/f836f/cover.jpg 200w,\n/static/73b57d06f8809fab5ebb6ad89ab328ef/2244e/cover.jpg 400w,\n/static/73b57d06f8809fab5ebb6ad89ab328ef/14b42/cover.jpg 800w,\n/static/73b57d06f8809fab5ebb6ad89ab328ef/47498/cover.jpg 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Vineeta Jain","github":"Ninjavin","avatar":null}}}},{"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

\n \n \n

\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

\n \n \n

\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

\n \n \n

\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

\n \n \n

\n

Next, select your Git provider and your repository:

\n

\n \n \n

\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

\n \n \n

\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/2bf4fa98946c3aaa9aff33c4859f3bda/14b42/map.jpg","srcSet":"/static/2bf4fa98946c3aaa9aff33c4859f3bda/f836f/map.jpg 200w,\n/static/2bf4fa98946c3aaa9aff33c4859f3bda/2244e/map.jpg 400w,\n/static/2bf4fa98946c3aaa9aff33c4859f3bda/14b42/map.jpg 800w,\n/static/2bf4fa98946c3aaa9aff33c4859f3bda/47498/map.jpg 1200w,\n/static/2bf4fa98946c3aaa9aff33c4859f3bda/1abfa/map.jpg 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

\n \n \n

\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/69f1d98b07ca23af682918f3250280ff/14b42/CoverImage.jpg","srcSet":"/static/69f1d98b07ca23af682918f3250280ff/f836f/CoverImage.jpg 200w,\n/static/69f1d98b07ca23af682918f3250280ff/2244e/CoverImage.jpg 400w,\n/static/69f1d98b07ca23af682918f3250280ff/14b42/CoverImage.jpg 800w,\n/static/69f1d98b07ca23af682918f3250280ff/9842e/CoverImage.jpg 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Tanvi Jain","github":"tanvijn","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":684,"currentPage":115,"type":"///","numPages":161,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}