You may have come across the term- “lazy loading in React”, but most of you won’t be familiar with exactly what is lazy loading in React. Lazy loading is not a new concept. It has been available for quite some time. In essence, lazy loading means that a component or a part of code must get loaded when it is required. It is also referred to as code splitting and data fetching. Now, the next question is, how to do lazy loading in react?
Talking about React specifically, it bundles the complete code and deploys all of it at the same time. Now, usually, that's not a bad idea, since React SPAs (Single page application) are quite small and do not affect the performance. But what if we have a gigantic application, like a content management system with a customer portal, admin portal etc. In such a case, it does not seem like a smart idea to load the complete application.
In this post, I will try to explain the advantages of lazy loading in react and how to implement it in React.
In situations where we know that certain code/features will not be accessible to all the users or the user does not access it frequently, it is best to load them when the user requests for it. This improves user experience as well as initial loading time.
\nFor example, let's consider that our application has two sections, A and B. Size of A is 1 MB and its loading time is approximately 1 second. Size of B is also 1 MB and so its loading time is also 1 second. And we know that a user will access either of the sections, or a user accessing section A will rarely access section B and vice versa. If we were to load the complete application at the starting of our application, it would cost the user 2 MB of data and the loading time will also be 2 seconds. The user might not like to wait for 2 seconds or won't be happy that a site is costing them a lot of data. This can be improved and halved with proper lazy loading through lazy load react components.
\n\nNote: This is not the general case. Small single-page applications are usually in kbs.
\n
To follow this tutorial, you’ll need the following:
\ncreate-react-app tool
npm install -g create-react-appFirst of all, create the app using npm create-react-app
npm create-react-app my-appNow run the app by running following command in the project directory root
\nnpm starthttp://localhost:3000Let the directory structure be
\n|\n|-src\n|\t|-components\n|\t|\t|-Admin.js\n|\t|\t|-Customer.js\n|\t|\t|-Home.js\n|\t|-app.js\n|-index.jsapp.js which will have an input field. We will pass the input received as props to Home, and render Home.js. Based on props received, we will either render Admin or Customer.React 16.6+)From React 16.6+, react added React Suspense which performs lazy loading.
\nIn our Home.js, we will lazy load Admin and Customer
import React, { Suspense } from "react";\nconst Customer = React.lazy(() => import("./Customer.js"));\nconst Admin = React.lazy(() => import("./Admin.js"));\n\n//Instead of regular import statements, we will use the above approach for lazy loading\n\nexport default (props) => {\n\tif (props.user === "admin") {\n\t\treturn (\n\t\t\t// fallback component is rendered until our main component is loaded\n\t\t\t<Suspense fallback={<div>Loading</div>}>\n\t\t\t\t<Admin />\n\t\t\t</Suspense>\n\t\t);\n\t} else if (props.user === "customer") {\n\t\treturn (\n\t\t\t<Suspense fallback={<div>Loading</div>}>\n\t\t\t\t<Customer />\n\t\t\t</Suspense>\n\t\t);\n\t} else {\n\t\treturn <div> Invalid User </div>;\n\t}\n};When talking about react lazy loading, if you are working with React version prior to 16.6, you won't have the Suspense component. It is best to upgrade to the latest version and use Suspense. If you're not able to upgrade and still want this feature, it is still possible to create your own React Suspense component. I will be using Higher Order Component(HOC).
\nOur HOC (lazyLoader.js)
const lazyLoader = (importComp) => {\n\treturn class extends React.Component {\n\t\tstate: {\n\t\t\tcomponent: null; //initializing state\n\t\t};\n\n\t\t//loading the component and setting it to state\n\t\tcomponentDidMount() {\n\t\t\timportComp().then((comp) => setState({ component: comp.default }));\n\t\t}\n\n\t\t//rendering the component\n\t\trender() {\n\t\t\tconst C = this.state.component;\n\t\t\treturn C ? <C {...this.props} /> : null;\n\t\t}\n\t};\n};\nexport default lazyLoader;Our calling component, in this case Home.js
import React from "react";\nimport { lazyLoader } from "./lazyLoader";\n\nconst Customer = lazyLoader(() => import("./Customer.js"));\nconst Admin = lazyLoader(() => import("./Admin.js"));\n\n//Instead of regular import statements, we will use the above approach for lazy loading\n\nexport default (props) => {\n\tif (props.user === "admin") {\n\t\treturn <Admin />;\n\t} else if (props.user === "customer") {\n\t\treturn <Customer />;\n\t} else {\n\t\treturn <div> Invalid User </div>;\n\t}\n};This was all about how to implement lazy loading in react, if you need the fallback feature, you can update HOC's render method where it is returning null. Instead of null, you can return your fallback component, and it can be passed as props too.
\nNow our HOC would look like -
\nconst lazyLoader = (importComp, fallback) => {\n\treturn class extends React.Component {\n\t\tstate = {\n\t\t\tcomponent: null, //initializing state\n\t\t};\n\n\t\t//loading the component and setting it to state\n\t\tcomponentDidMount() {\n\t\t\timportComp().then((comp) => setState({ component: comp.default }));\n\t\t}\n\n\t\t//rendering the component\n\t\trender() {\n\t\t\tconst C = this.state.component;\n\t\t\treturn C ? (\n\t\t\t\t<C {...this.props} />\n\t\t\t) : fallback ? (\n\t\t\t\tfallback\n\t\t\t) : (\n\t\t\t\t<div>loading</div>\n\t\t\t);\n\t\t\t// If component is not loaded then return fallback component, if fallback is not provided then use default loading\n\t\t}\n\t};\n};\nexport default lazyLoader;GraphQL's popularity has skyrocketed since its release in 2015. It is the modern way of developing and querying APIs. GraphQL is an application programming interface (API) query language and server-side runtime that prioritises giving customers precisely the data they request.
\nGraphQL is designed to make fast, scalable, and developer-friendly APIs. GraphQL allows developers to build requests that pull data from multiple data sources in a single API call as an alternative to REST.
\nIt was developed internally by Facebook in 2012 before being publicly released in 2015. \"On 7 November 2018, the GraphQL project was moved from Facebook to the newly-established GraphQL Foundation, hosted by the non-profit Linux Foundation.\"
\nGraphQL is an application-level query language that helps data fetching and serving between client and server runtime by providing a standard protocol for queries. Its strength lies in the fact that it offers a modern, simpler, and efficient way to query and develop APIs. The real deal is its flexible data fetching -- the application only loads relevant data from the server. Also, GraphQL is hierarchical in nature; it structures relationships in a simple hierarchical manner to avoid complex queries while fetching data.
\nGraphQL offers much power and flexibility over Traditional APIs. One of the few things GraphQL was designed, was to solve Data Fetching/Loading problems.
\nData fetching is one of the most critical factors responsible for the performance of the application. Most of the time, the data provided by the API isn't required to run the application. This problem is termed as \"Over fetching\", which can be a more significant issue in mobile devices. Since devices with slower network connection are bound to take more load time, it creates a negative impact on end-users.
\nIn the current scenario, traditional REST APIs offer no clean way to solve this problem; GraphQL comes to the rescue. It allows clients to define the structure of the data required, and the same structure of the data is returned from the server. Therefore preventing fetching loads and loads of data, ultimately increasing performance.
\nAPI endpoints generally fetch specific data, hence to load a certain data-rich application, there have to be multiple requests to the server. But, applications should fetch relevant data in one round trip to avoid degrading performance. The flexibility and richness of the GraphQL, allows us to define all the data to fetch in a single request, avoiding multiple Round trips
\n| Server -> | \nGraphQL Server -> | \nGraphql Client -> | \nClient | \n
|---|
Schema - GraphQL follows a type system to define the schema of an API. The syntax for writing schemas is called Schema Definition Language (SDL).
\n# A simple example to define schema\ntype Person {\n name: String!\n age: Int!\n}Query - The data or information that a client needs from a server can be fetched in a request using queries.
\n# This query fetches all specifically names of all users\n{\n users {\n name\n }\n}\n# This query fetches all names of all friends of user "Anup".\n{\n user(name: "Anup") {\n name\n friend {\n name\n }\n }\n}Mutation - Mutations are the way to modify data to the server; these include creating/updating/deleting data. They have similar syntax as queries, with special keywords ahead of them.
\n# This mutation adds a user with name "Anup" and age 20.\nmutation {\n addUser( name : "Anup", age: 20) {\n name\n age\n }\n}Despite its powers, you might not need graphQL in your applications -
\nGraphQL is a step forward in the world of applications by providing a significant boost in performance. Another plus point of GraphQL is that it is not meant to replace any existing solution but enhance and co-exist with REST APIs. Simply put, the future of GraphQL looks bright.
\n","frontmatter":{"date":"October 01, 2020","updated_date":null,"description":"GraphQL is a syntax that specifies how data can be requested and is usually used to load data to a client from a server. Find out why to use it and any other advantages.","title":"What is GraphQL? - A Basic Guide","tags":["Engineering","API","GraphQL","Performance"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/926f1c395eca216d1174370ca687b800/ee604/graph.png","srcSet":"/static/926f1c395eca216d1174370ca687b800/69585/graph.png 200w,\n/static/926f1c395eca216d1174370ca687b800/497c6/graph.png 400w,\n/static/926f1c395eca216d1174370ca687b800/ee604/graph.png 800w,\n/static/926f1c395eca216d1174370ca687b800/db955/graph.png 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Anup Aglawe","github":"anup-a","avatar":null}}}},{"node":{"excerpt":"C# and the .NET CLR use exceptions to show that an error condition has arisen during program execution. C# programs are under constant…","fields":{"slug":"/engineering/exception-handling-in-csharp/"},"html":"C# and the .NET CLR use exceptions to show that an error condition has arisen during program execution. C# programs are under constant threat of running into some sort of problem. As a program’s complexity grows, the probability that something odd would happen during its execution also gets higher.
\nIn this blog, we will go through the basics of Exception and Exception handling. We will also look at how we can achieve exception handling using try, catch, and finally blocks and how to create your own custom exceptions.
\nThe errors which we are getting at the run time of the application is called an exception.
\nIf any exception is coming into our application then the application is abnormally terminated. The Application is not considered as a good application if any exception is coming and it is not handled.
\nEvery time when we are developing an application and it got successfully build without any errors. Then this happens
\nFor that, it is good practice to use exception handling.
\nBelow are the common .NET exceptions which we can see on a regular basis of coding.
\nSystem.NullReferenceException – Occurs when calling a method on a null object reference
\nSystem.IndexOutOfRangeException – Occurs attempting to access an array element that does not exist
\nSystem.IO.IOException – Used around many file I/O type operations
\nSystem.OutOfMemoryException – Occurs when the app runs out of memory
\nSystem.InvalidCastException – Occurs when you try to cast an object to a type that it can’t be cast to
\nSystem.InvalidOperationException - Occurs when a method call is invalid for the object's current state
\nSystem.ArgumentException - Occurs when one of the arguments provided to a method is not valid
\nThe process of handling any run time error is called exception handling. The exception handling is performed to maintain the normal flow of the application.
\nIn C# we can achieve this using the below techniques:
\nThis is a very basic Exception handling technique in which try, catch, and finally, blocks are used.
\ntry block: In this block the code is written which may cause the exception. If any exception is thrown then the corresponding catch block is executed.
\ncatch block: In this block the exception is caught which means if an exception is thrown from the try block then we write the code to handle or log it.
\nfinally block: In this block we write the certain code which we want to execute if an exception is thrown or not. For example: disposing of an object or closing the database connection.
\nException Handling after using try, catch blocks
\nNote: Multiple finally blocks are not allowed. Also, the finally block cannot have the return, continue, or break keywords. It doesn't let control leave the finally block.
\nIn C#, both catch and finally blocks are optional. The try block can exist either with one or more catch blocks or a finally block or with both catch and finally blocks. The try block without a catch or finally block will give a compile-time error.
\nIf there is no exception occurred inside the try block, the control directly transfers to the finally block. We can say that the statements inside the finally block are executed always.
\ntry\n{\n// Code which can cause an exception.\n}\ncatch(Type x)\n{\n// Code for handling the exception\n}\nfinally\n{\n//Any cleanup code\n}We can use the multiple catch blocks when we are not sure which type of exception will be thrown by the code. So that will help to catch the multiple types of exceptions.
\ntry{\n// Code which can cause an exception.\n}\ncatch(ArithmeticException ex)\n{\n// Code for handling the exception\n}\ncatch(IndexOutOfRangeException ex)\n{\n// Code for handling the exception\n}\nfinally{\n//Any cleanup code\n}We can use the generic exception class as well to catch all types of exception in that case we have to write the catch block as below:
\ntry{\n// Code which can cause an exception.\n}\ncatch(Exception ex)\n{\n// Code for handling the exception\n}\nfinally{\n//Any cleanup code\n}Note: Multiple catch blocks with the same exception type are not allowed. A catch block with the base Exception type must be the last block.
\nIn C# 6.0 a new feature is introduced to handle the exception which is called the Exception Filters. This feature will allow you to handle more specific exceptions in catch blocks so that you can write the code specific to the exception condition.
\nLike before C# 6.0 We had to catch any exception and handle it. Now in C# 6.0, we can handle the exception specific to the condition.
\ntry\n{\n// Code which can cause an exception.\n}\ncatch(Type x) when(\n //some condition\n)\n{\n// Code for handling the exception\n}\ncatch(Type x) when (\n //some condition\n)\n{\n \n}\nfinally\n{\n//Any cleanup code\n}\n C# allows nested try-catch blocks. When using nested try-catch blocks, an exception will be caught in the first matching catch block that follows the try block where an exception occurred.
\nstatic void Main(string[] args)\n{\n int divider = 0;\n \n try\n {\n try\n {\n var result = 1/divider;\n }\n catch(Exception ex)\n {\n Console.WriteLine("Inner catch block");\n }\n }\n catch(Exception ex)\n {\n Console.WriteLine("Outer catch block");\n }\n \n}An inner catch block will be executed in the above example because it is the first catch block that handles all exception types.
\nIf there is not an inner catch block that matches with raised exception type, then the control will flow to the outer catch block until it finds an appropriate exception filter.
\nC# allows throwing an exception. The throw keyword is used for that purpose. One of the benefits of throwing an exception can be when a problem occurs in the middle of the complicated method execution because handling that situation in that complicated method would make that method even more complex. Then we should throw an exception and let the catch block to handle it.
The throw keyword can only be used with the Exception object except for the catch block. It will be discussed in the next section.
\ntry\n{\n //throw exception\n throw new Exception();\n}\ncatch (Exception ex)\n{\n //some code to hadle the exception\n}Note: The throw keyword is used to throw or create the new exception. If the throw keyword is used and if there is any catch block then the catch block will be executed next.
\nWhen an exception is caught in the catch block, we can do some operations and then re-throw the exception. Rethrow an exception means calling the throw keyword without an exception object inside a catch block.
Here is the point to note that if we follow the below approach to rethrow the exception then the proper stack trace will not be maintained means it will not point out that actually where the exception occurred it will show in the stack trace the line number from which the exception is rethrown.
\ntry\n{\n // Code which can cause an exception.\n}\ncatch (Exception ex)\n{\n throw ex;//Exception is rethrown with the exception object\n}Now if we follow the below approach then the proper stack trace will be maintained with maintaining the exact line number where the exception actually occurred.
\ntry\n{\n // Code which can cause an exception.\n}\ncatch (Exception ex)\n{\n throw;//Exception is rethrown with the exception object\n}User-defined exceptions are those exceptions that are not defined by the programming language. In C# we can create our own custom exceptions(User-defined exceptions)
\nC# exceptions are defined as classes, just like any other C# object. All exceptions are inherited from a base System.Exception class. There are many common exceptions that you can use within your own code.
\nCreating your own C# custom exceptions is helpful only when you are going to catch that specific type of exception and handle it differently.
\n class Program\n {\n static void Main(string[] args)\n {\n try\n {\n //throw user defined exception\n throw new CustomException("Custom exception thrown");\n }\n catch (Exception ex)\n {\n Console.WriteLine("Exception caught here" + ex.ToString());\n }\n }\n }\n class CustomException : Exception\n {\n //User-defined exception which inherits base class Exception\n public CustomException(string message)\n {\n Console.WriteLine("User defined exception");\n }\n }It is considered a good practice to log all the exception which are coming into our application. The main benefit of logging exceptions that we can know exactly what are the conditions on which the code is failing instead of asking from the user that what inputs he has provided we can log all the required information and use that data to solve the error.
\nIn many cases, we just ignore the catch block by writing nothing in it. There are some .NET libraries available for logging purposes like NLog, Serilog, etc.
\nWe can log exception into the catch block. Every exception is coming into our application is crucial as they are critical to finding the problems in the code.
\ntry\n{\n //Some code\n}\ncatch (Exception ex)\n{\n //Log Exception here!!!\n Log.Error(ex); // log the inputs provided by the user or any specific condition\n}The first chance exception is mainly designed for debugging purposes. Like whenever an exception occurs it first goes to the debugger giving the first chance to you and then to the program/application. If that exception is unhandled in the program/application then it gets back to the debugger giving a second chance to you to do something with your code before and after the application itself decides to do.
\nIt gives you visibility into every .NET exception being thrown.
\nWe can enable the first chance exception in the Visual Studio by going into the\nDebug > Windows > Exception Settings > check next to \"Common Language Runtime Exceptions\"
\nYou can also select the exceptions you want the debugger to break automatically in the above setting.
\nIn this blog, we learned about the basics of Exception, Exception Handling, and some best practices of exception handling. Use of the exception handling with its best practices in the application will help the application to run smoother and without any bad user experience.
\n","frontmatter":{"date":"September 29, 2020","updated_date":null,"description":null,"title":"Exceptions and Exception Handling in C#","tags":["C#","Exception","Exception Handling",".NET","Exception Handling Best Practices"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5748031496062993,"src":"/static/b5a34dc9602000bd64f40c7d59f9d286/ee604/csharplogo.png","srcSet":"/static/b5a34dc9602000bd64f40c7d59f9d286/69585/csharplogo.png 200w,\n/static/b5a34dc9602000bd64f40c7d59f9d286/497c6/csharplogo.png 400w,\n/static/b5a34dc9602000bd64f40c7d59f9d286/ee604/csharplogo.png 800w,\n/static/b5a34dc9602000bd64f40c7d59f9d286/f3583/csharplogo.png 1200w,\n/static/b5a34dc9602000bd64f40c7d59f9d286/5707d/csharplogo.png 1600w,\n/static/b5a34dc9602000bd64f40c7d59f9d286/5c6e9/csharplogo.png 1650w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hemant Manwani","github":"hemant404","avatar":null}}}},{"node":{"excerpt":"A lot has been written and talked about Unit Testing in the IT industry for the last couple of years. I have heard and discussed the same…","fields":{"slug":"/engineering/unit-testing/"},"html":"A lot has been written and talked about Unit Testing in the IT industry for the last couple of years. I have heard and discussed the same over the previous 2.5 decades of my IT career.
\nEven though a lot is talked about and is done in this field but still today, every company is struggling with this. But before we proceed with the above situation, let us first understand its importance.
\nA strong foundation is the basis of a strong building in the same way a proper unit testing is the foundation of high-quality software.
\nUnit Testing, if done correctly, ensures that each of the building blocks of the software product is robust and will make high-quality software when put together.
\nUnit testing is an essential tool in any serious software developer's toolbox. However, writing a good unit test for a specific piece of code can often be very hard.
\nDevelopers frequently believe that their struggles are triggered by a lack of essential testing expertise or hidden unit testing techniques after experiencing trouble testing their own or someone else's code.
\nTesting of the unit requires testing individual components of the programme or application software. The primary objective behind this is to verify that all the individual components function as expected.
\nAs the smallest possible part of the software that can be evaluated, a unit is known. It usually has a couple of inputs and a single output.
\nBoth testers and developers can isolate each module, detect and repair device defects at a very early stage of the life cycle of software development with this testing method (SDLC).
\nBy considering stubs, mock artifacts, drivers, and unit testing frameworks, this methodology effectively helps validate the consistency of a section of code.
\nBecause it is practiced at the initial testing level, this testing methodology ensures that the vulnerabilities are detected and corrected at the early stage of SDLC, even before they become costly for businesses to repair when they are later identified.
\nThe developers and testers can help save time with a suitable unit testing practice as bugs can be found early in the process as it is the initial testing step. Skipping or restricting the unit testing practice will adversely increase the defects, and repairing them later becomes difficult.
\nTherefore before preparing for the integration testing, it is essential to practice unit testing at the initial stage of the software testing process.
\nWell, it is not that a developer loves to find bugs in his/her coded code. Still, when it comes to unit testing, they at times(most of the time) see it has an additional overhead on them, especially when one has to follow and stick to a lot of protocols, frameworks, and documentation, etc.
\nAlso, it is commonly misunderstood that finding issues is the QC team's problem. We have to code. In my view, it is incorrect thinking as Quality Software is standard or combines commitment from a company and it's the team.
\nHere are a few benefits of unit testing:
\nThe most significant advantage of unit testing is this. You would need to make improvements to the old design and code when you add more functionality to any programme, which can be costly and risky. If you use the technique of unit testing, this will save a lot of time and can make the whole process much quicker and simpler.
\nUnit testing increases code consistency dramatically. It allows designers to recognize the smallest faults present in the units before they go for integration testing.
\nAt a very early point, unit testing helps detect all sorts of problems with the programme. Until going any further, software developers should then focus on those problems first.
\nThis is the primary benefit of this because no other program component is compromised as the issues are fixed at an early stage. This results in improved performance, decreased downtime, and lower costs that would otherwise occur due to the entire design process's stalling.
\nWhen you test each part of the program individually, refactoring the code or upgrading the device library becomes much simpler. If there are any issues, they are found early on, and it thus becomes much easier to make improvements to the system.
\nBefore it goes on to the next level, the accuracy of each unit is checked. This implies that until it's incorporated with other companies, the device is proven to be in good working order.
\nUnit verification considers the whole system's documentation. By reading each module's documentation, developers who want to learn about the features of a specific programme or framework will quickly learn about the device.
\nIt makes it possible for them to have a detailed understanding of the system and what each part does.
\nTo a great degree, unit testing will simplify the debugging process. If a particular test fails, it is essential to debug only the most recent improvements made to the code.
\nIn the early stages, any problems or glitches in the system are detected by unit testing, and the cost of bug fixes is significantly reduced because of this. If these vulnerabilities are found later, so repairing them would be even more costly.
\nIt is important for the unit testers to get a step-by-step instructional document in order to practice unit testing with the manual testing process.
\nHowever, automated unit testing is often chosen by most companies, taking into account the efforts necessary for manual testing.
\nIn the end, remember that I am the first and the most basic foundation in a big building of Quality and have to always keep the same in mind whenever I code since no one is interested in buying a well-packaged product if its ingredients are not of high quality.
\nBy doing the above I am not only contributing to high-quality software but I can devote later high bug-fixing time to things like improving the performance/security of my code and avoiding going back to the drawing board for issues related to performance or security etc.
\nAlways remember in the software development unit testing serves as \"A stitch in time saves nine\".
\n","frontmatter":{"date":"September 29, 2020","updated_date":null,"description":"Unit testing is one of the types of software testing that requires an initial phase of testing. Find out the benefits and why its important for developers.","title":"Unit Testing: What is it and why do you need it?","tags":["Unit Testing","QA","Testing"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/35dc4816d23601e5b75a44da15e3d18c/14b42/unit-testing.jpg","srcSet":"/static/35dc4816d23601e5b75a44da15e3d18c/f836f/unit-testing.jpg 200w,\n/static/35dc4816d23601e5b75a44da15e3d18c/2244e/unit-testing.jpg 400w,\n/static/35dc4816d23601e5b75a44da15e3d18c/14b42/unit-testing.jpg 800w,\n/static/35dc4816d23601e5b75a44da15e3d18c/47498/unit-testing.jpg 1200w,\n/static/35dc4816d23601e5b75a44da15e3d18c/0e329/unit-testing.jpg 1600w,\n/static/35dc4816d23601e5b75a44da15e3d18c/947df/unit-testing.jpg 5472w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Sudhanshu Pandey","github":null,"avatar":null}}}},{"node":{"excerpt":"Golang Maps is a compilation of unordered key-value pairs. It is commonly used because it offers simple searches and values with the aid of…","fields":{"slug":"/engineering/golang-maps/"},"html":"Golang Maps is a compilation of unordered key-value pairs. It is commonly used because it offers simple searches and values with the aid of keys that can be retrieved, modified or deleted. It is a reference to a table with a hash.
\nThis blog will cover the basic use of maps in Go, and how a newcomer to the language may utilize them for their applications.
\nMaps (also called dictionaries) are a very useful tool in helping to store and organize objects to be accessed in an efficient method.
\nMost basic implementations of a map involve using a key to access a value in the map, resulting in key-value pairs, in which one key is associated with a specific value in the map. Within Golang, maps follow this definition.
\nInitialization of a map can be done using the make command. This is similar to the initialization of a slice:
mapObject := make(map[string]string)In this case, mapObject is a map that uses strings as a key to map to another string. When creating a map, the key type must be a type that is Comparable, or more specifically types that can be compared using the == operator.
Examples of valid key types include booleans, numbers, strings and several other primitives can be used as keys.
\nOne more thing to note is that structs can be used as a key, provided that all the properties of the struct are Comparable.
Maps can also be created using a map literal. For an empty map:
\nmapObject := map[string]string{}Or for a map with initial data:
\nmapObject := map[string]string{\n\t“Key1”: “Value1”,\n\t“Key2”: “Value2”,\n\t“Key3”: “Value3”,\n}Interaction with Go maps are similar to the dictionaries and maps of other languages. A simple way to return a value associated with the key is to use bracket notation. For example, to set a string value mapped to a string key:
\nmapObject[“test”] = “test_value”Retrieving a value uses the same format.
\nresult := mapObject[“test”]The value of result will be the value assigned to “test” in the map. In the case where no key is found, the zero value of the type is returned instead. In this case, if there is no associated value with “test”, an empty string is returned.
A boolean that returns the key’s existence can also be returned if two arguments are assigned from the retrieval. For example:
\nresult, exists := mapObject[“test”]If “test” exists in the map, result will be the value associated with “test” and exists will be true. If “test” does not exist, result will be an empty string and exists will be false. This is useful when the map being used contains zero-values to distinguish between existence or whether the value is just zero.
Using Go’s built in delete method, key-value pairs can be deleted off the map. To delete the previous “test” key from the map, the following can be called:
delete(mapObject, "test")The delete method does not have a return value, so if the key does not exist in the map, nothing will happen.\nLength
\nThe number of key-value pairs of a map can be found using the len method:
\nlength := len(mapObject)Using Go’s range keyword, a map can be iterated through.
\nfor key, value := range m {\n fmt.Println("Key:", key, "Value:", value)\n}There is no specific order in which the map is iterated. If a specific order is needed, a slice or other data structure can be used to store or hold data which can then be sorted and iterated through.
\nAlthough Go has a lot of support for concurrency through the use of goroutines and channels, maps alone are not a reliable approach to handling data in a concurrent setting.
\nTo work with maps that support concurrency, a separate synchronization method should be used, like sync.RWMutex. Alternatively, an open source map package which implements the synchronizations can be used.
With the market space and number of applications being created by Go increasing, hopefully this blog will help touch onto the basics of one of the major structures in Go.
\nAlthough it doesn’t support concurrency, maps in Go are still a useful tool in most applications developed in Go, to reliably access and manage data.
\nIf you want to learn more about golang here is a quick guide on, how to send email with golang. If you like what you read leave a comment or any question and will communicate further.
\n","frontmatter":{"date":"September 25, 2020","updated_date":null,"description":"A map is a builtin sort used for storing key-value pairs. Find out more in this article on how Golang maps work and why to use them.","title":"Golang Maps - A Beginner’s Guide","tags":["Go","dictionaries","maps"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/30bb9b9901e76f3498d68913a0675ea9/ee604/index.png","srcSet":"/static/30bb9b9901e76f3498d68913a0675ea9/69585/index.png 200w,\n/static/30bb9b9901e76f3498d68913a0675ea9/497c6/index.png 400w,\n/static/30bb9b9901e76f3498d68913a0675ea9/ee604/index.png 800w,\n/static/30bb9b9901e76f3498d68913a0675ea9/f3583/index.png 1200w,\n/static/30bb9b9901e76f3498d68913a0675ea9/0dadc/index.png 1500w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Chris Yee","github":null,"avatar":null}}}},{"node":{"excerpt":"LoginRadius Open Source Projects Just 1 week left in hacktoberfest 2020 and being part of it, we at LoginRadius are all set with lots of our…","fields":{"slug":"/engineering/loginradius-opensource-repos-for-hacktoberfest-2020/"},"html":"Just 1 week left in hacktoberfest 2020 and being part of it, we at LoginRadius are all set with lots of our projects going open source this year.
\n\n\nTo get LoginRadius swags see our Hacktoberfest Launch Blog. We have around 500 swags for our open source contributors.
\n
Here is a list of our open source projects available on Github for hacktoberfest 2020
\nLoginRadius Engineering Portal
\nCascade
\n\n\n","frontmatter":{"date":"September 25, 2020","updated_date":null,"description":"Checkout LoginRadius Open Source Repositories where you can contribute for hackotberfest 2020","title":"LoginRadius Open Source For Hacktoberfest 2020","tags":["hacktoberfest","open-source","LoginRadius"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5873015873015872,"src":"/static/ccafb9d75be0248e67ee6c688fd6cee5/ee604/hacktober-fest-banner.png","srcSet":"/static/ccafb9d75be0248e67ee6c688fd6cee5/69585/hacktober-fest-banner.png 200w,\n/static/ccafb9d75be0248e67ee6c688fd6cee5/497c6/hacktober-fest-banner.png 400w,\n/static/ccafb9d75be0248e67ee6c688fd6cee5/ee604/hacktober-fest-banner.png 800w,\n/static/ccafb9d75be0248e67ee6c688fd6cee5/31987/hacktober-fest-banner.png 1000w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hridayesh Sharma","github":"vyasriday","avatar":null}}}}]},"markdownRemark":{"excerpt":"Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie…","fields":{"slug":"/engineering/identity-impact-of-google-chrome-thirdparty-cookie-restrictions/"},"html":"Check the open issues on each of the projects as well as Pull Request before creating a new one. Happy Coding!\nStay tuned for more updates from LoginRadius and don't forget to check our Hacktoberfest Page to get around 500 swags from LoginRadius.
\n
Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie restrictions for 1% of stable clients and 20% of Canary, Dev, and Beta clients.
\nWhat does it mean for user authentication?
\nOn one hand, Google believes third-party cookies are widely used for cross-site tracking, greatly affecting user privacy. Hence, Google wants to phase out (or restrict) supporting third-party cookies in Chrome by early Q2 2025 (subject to regulatory processes).
\nOn the other hand, Google introduced Privacy Sandbox to support the use cases (other than cross-site tracking and advertising) previously implemented using third-party cookies.
\nIn this article, we’ll discuss:
\nThird-party cookie restrictions affect user authentication in three ways, as follows.
\nIf your website or app uses an external Identity Provider (IdP) — like LoginRadius, the IdP sets a third-party cookie when the user authenticates on your app.
\nIf you have multiple apps across domains within your organization and authentication is handled using an IdP (internal or external) with web SSO, you already use third-party cookies to facilitate seamless access for each user using a single set of credentials.
\nIf you have implemented web SSO with one primary domain and multiple sub-domains of the primary domain, third-party cookie restrictions may not apply. For now, Google doesn’t consider the cookies set by sub-domains as third-party cookies, although this stance may change in the future.
\nFor example, you have apps at example.com, travel.example.com, stay.example.com, and web SSO is handled by auth.example.com. In this case, third-party cookie restrictions don’t apply.
Federated SSO is similar to, albeit different from, web SSO. It can handle multiple IdPs and applications—aka., Service Providers (SPs)—spanning multiple organizations. It can also implement authentication scenarios that are usually implemented through web SSO.
\nUsually, authentication is handled on a separate pop-up or page when the user wants to authenticate rather than on the application or website a user visits.
\nFor example, you already use federated SSO if you facilitate authentication for a set of apps through multiple social identity providers as well as traditional usernames and passwords.
\n\n\nNote: It is also possible to store tokens locally, not within cookies. In this case, third-party cookie restrictions won’t affect token-based authentication. However, the restrictions still affect authentication where tokens are stored within third-party cookies (a common and secure method).
\n
Google has been developing alternative features and capabilities for Chrome to replace third-party cookies as part of its Privacy Sandbox for Web initiative.
\nSpecific to authentication, Google recommends the following:
\nCHIPS are a restricted way of setting third-party cookies on a top-level site without making them accessible on other top-level sites. Thus, they limit cross-site tracking and enable specific cross-site functionalities, such as maps, chat, and payment embeds.
\nFor example, a user visits a.com with a map embed from map-example.com, which can set a partitioned cookie that is only accessible on a.com.
If the user visits b.com with a map embed from map-example.com, it cannot access the partitioned cookie set on a.com. It has to create a separate partitioned cookie specific to b.com, thus blocking cross-site tracking yet allowing limited cross-site functionality.
You should specifically opt for partitioned cookies (CHIPS), which are set with partitioned and secure cookie attributes.
\nIf you’re using an external identity provider for your application, CHIPS is a good option to supplant third-party cookie restrictions.
\nHowever, CHIPS may not be ideal if you have a web SSO or federated SSO implementation. It creates separate partitioned cookies for each application with a separate domain, which can increase complexity and create compatibility issues.
\nWith Storage Access API, you can access the local storage in a third-party context through iframes, similar to when users visit it as a top-level site in a first-party context. That is, it gives access to unpartitioned cookies and storage.
\nStorage Access API requires explicit user approval to grant access, similar to locations, camera, and microphone permissions. If the user denies access, unpartitioned cookies and storage won’t be accessible in a third-party context.
\nIt is most suitable when loading cross-site resources and interactions, such as:
\nVerifying user sessions when allowing interactions on an embedded social post or providing personalization for an embedded video.\nEmbedded documents requiring user verification status to be accessible.
\nAs it requires explicit user approval, it is advisable to use Storage Access API when you can’t implement an identity use case with the other options.
\nWith Related Website Sets, you can declare a primary website and associatedSites for limited purposes to grant third-party cookie access and local storage for a limited number of sites.
Chrome automatically recognizes related website sets declared, accepted, and maintained in this open-source GitHub repository: Related Website Sets
\nIt provides access through Storage Access API directly without prompting for user approval, but only after the user interacts with the relevant iframe.
\nIt is important to declare a limited number of domains in related website sets that are meaningful and used for specific purposes. Google may block or suspend any exploitative use of this feature.
\nThe top-level site can also request approval for specific cross-site resources and scripts to Storage Access API using resuestStorageAccessFor() API.
If you’re using an external identity provider for your web application, you can declare the domain of the identity provider in the related set to ensure limited third-party cookies and storage access to the identity provider, thus ensuring seamless user authentication.
\nRelated Website Sets can also work to supplement third-party cookie restrictions in web SSO and federated SSO if the number of web applications (or domains) is limited.
\nFedCM API enables federated SSO without third-party cookies.
\nWith FedCM API, a user follows these steps for authentication:
\nYou can access a user demo of FedCM here: FedCM.
\nFor more information about implementing federated SSO with FedCM API, go through the FedCM developer guide.
\nFirstly, we’re committed to solving our customers' user identity pain points — and preparing for the third-party cookies phase-out is no different.
\nWe’ll implement the most relevant and widely useful solutions to facilitate a smooth transition for our customers.
\nPlease subscribe to our blog for more information. We’ll update you on how we help with the third-party cookie phase-out.
\nThe proposed changes to phase out third-party cookies and suggested alternatives are evolving as Google has been actively collaborating and discussing changes with the border community.
\nMoreover, browsers like Firefox, Safari, and Edge may approach restricting third-party cookies differently than Google does.
\nFrom LoginRadius, we’ll keep you updated on what we’re doing as a leading Customer Identity and Access Management (CIAM) vendor to prepare for the third-party cookie phase-out.
\nTop-level site: It is the primary site a user has visited.
\nFirst-party cookie: A cookie set by the top-level site.
\nThird-party cookie: A cookie set by a domain other than the top-level site. For example, let’s assume that a user has visited a.com, which might use an embed from loginradius.com to facilitate authentication. If loginradius.com sets a cookie when the user visits a.com, it is called a third-party cookie as the user hasn’t directly visited loginradius.com.