coderslovers

In the light of my previous post  “ Secure React SPA using Azure Endpoints with Authorization code flow ”  I realized that configuring multiple providers with you application needs lots of coding and configuration and specially when you want to stick with Authorization code flow for all the providers. While Azure, Google supports a request from cross origin requests in a way and on other hand Facebook strictly doesn’t support it. (So we needed to create a proxy server to modify CORS policy to get your request accepted). 1. Introduction Thanks to  WildFly  developer community for developing a open source project  Keycloak . “ Keycloak  is an open source software product to allow  single sign-on  with  Identity and Access Management  aimed at modern applications and services” as from Wikipedia. All you need to do is keep Keycloak application server running on a machine whether it is on same domain or cross domain doesn’t matter. In this post we are going to learn about running a Keycloak

H ave you ever wondered How Angular renders all the HTML, CSS, Typescript files present in the application into the browser? What happens to the code when the application is run in production(prod) mode? What if the developer accidentally creates any component or any piece of code that is not used anywhere in the application? So after reading this article one should be able to answer the above questions. Let’s dive into the topic. Angular implicitly or explicitly does some optimizations for the application. They are: Bundling AOT Compilation Minification Uglification Tree shaking Let’s get into the above-mentioned ones in detail. Bundling :  Bundling is the process of combining code in multiple files into a single file. So during compilation, Angular generates 5 javascript files and loads them into the application. They are : inline.bundle.js (or) inline.js polyfills.bundle.js (or) polyfills.js main.bundle.js (or) main.js styles.bundle.js (or) style

Positions are utilized a ton in CSS to portray how element are put in a document. Additionally, they define how elements behave with the top, left, bottom, and right property. In CSS, there are five situating properties to be specific: static, relative, fixed, total, and tacky. These properties carry on exceptionally. In this article, we'll study the position property and the sorts. The position property The position property of a component indicates the connection between a component and the archive with respect to situating. For certain components, they are limited inside their parent component and for other people, they relate straightforwardly with the viewport. The manner in which components are situated characterizes how they work with top, left, bottom and right. At the point when an estimation of 0 is applied, these properties may either put components at the edge of the parent component or the edge of the viewport. Before we get into the five position properties — static,

Scoping CSS using Shadow DOM in 2021 As a front-end developer working with a large team, managing styles for components is one of the big problems I have come across. Having a shared component style file can often result in styling conflicts, since it is very common for two developers to use the same name to name a style class. CSS will not throw in an error for this. As a consequence, in the parts where it takes time to overcome them, I have experienced unexpected use of style. The technique I will add next will give you a solution to prevent collisions with the CSS label.   What is a Shadow DOM? Shadow DOM is part of the DOM, which is capable of isolating JavaScript and CSS . If you have heard of iframes , Shadow DOM is also something that has similar capabilities. Just like in iframes , by default, styles within a shadow DOM won’t leak out and styles outside ofit won’t leak in. There are ways to inherit some styles from outside of the Shadow DOM too, if required. Structure of a Shad