RESTful programming provides stateless and a uniform interface, Rest API is HTTP-based URLs that hide the back-end infrastructure from the user. Rest APIs provide the back end for modern web and mobile applications.
\nRest APIs are the most important layer in the back-end infrastructure for most modern applications. Cybercriminals are increasingly targeting APIs. Ensuring web API security is the most important and crucial. Let’s see what you can do to ensure REST API security.
\nAPI security start with Http Connection. All requests from clients to your API should be encrypted (HTTPS). Unfortunately, many client HTTP do not enable HTTPS/secure connections by default it’s necessary to enforce that from the server. When Clients who attempt to connect via HTTP should forcefully be redirected to secure HTTPS connections.
\nYou can use HTTP Strict Transport Security security header enforcing Https for web and You can return error for API in case Rest API call on HTTP
\nYou can get a free certificate with Let's Encrypt. SSL provides security from basic API vulnerabilities with almost minimal effort
\nA Distributed Denial of Service (DDoS) is a targeted cyber attack on a web site or device where a malicious attacker flood of traffic is sent from single or multiple sources. the main purpose of DDos is to make a machine or network resource unavailable to its genuine users by temporarily or disrupting services of a host connected to the Internet. if we are not using appropriate security practice or tools then it makes RESTful API into a non-functional situation.
\nAPI DoS attacks are more common these days. Rest APIs utilizations also increasing day-by-day. The organization's dependency is increasing day-by-day because of business needed a unified platform. An attacker can use multiple ways for the DDoS attack so as developer or security engineer you need to implement long-term solution not a temporary
\nAttackers can make so many repeated calls on the APIs. it can make resources unavailable to its genuine users. A rate limit is the number of API calls an app or user can make within a given period. When this limit is exceeded, block API access temporarily and return the 429 (too many requests) HTTP error code.
\nI m adding node js examples to implement the rate limit. multiple npm packages are available for node js
\nNodeJs
\nimport rateLimit from 'express-rate-limit';\n\nexport const apiRatelimit = rateLimit({\n windowMs: 60 * 60 * 1000, // 1 hrs in milliseconds\n max: 100,\n message: 'You have exceeded the 100 requests in 1 hrs limit!', \n headers: true, // it will add X-RateLimit-Limit , X-RateLimit-Remaining and Retry-After Headers in the request \n});\n\n// you can add this in the middleware. it will apply rate limit for the all requests \napp.use(apiRatelimit);Active cache means if the service first attempts to read from the cache backend and falls back to reading from the actual source. The service is not dependent or requesting the data from the actual upstream server. a cache backend is a key-value store (e.g. Redis) or In-Memory cache and the actual source of data is an SQL, MongoDB, etc.
\nPassive cache architecture ensures high volume traffic never hit to actual server or service.
\nI m adding node js examples to implement the passive cache. multiple npm packages are available for node js
\nNodeJs
\nimport nodeCache from "node-cache";\n\nconst myCache = new nodeCache();\n\n// set object in the cache \n\nobj = { userid: 909887, name: "example" };\n\nsuccess = myCache.set( "userKey", obj, 600 ); // ttl is 600 seconds \n\n\n//read object from the cache \nvalue = myCache.get( "userKey" );\nif ( value == undefined ){\n\t// handle miss!\n}Sensitive data exposure happens when an application, organization, or other entity unable to properly secure sensitive data. It is different from a data breach, it includes personal information, tokens, etc. We can make sure sensitive data security using
\nmultiple ways which include encryption at rest or in transit and masking
Cross-Site Scripting (XSS) attacks are a type of injection, in which attacker aims to execute malicious scripts in a web browser of the victim. an attacker can transfer untrusted data into the API as part of a query or command.which can result in an attacker obtaining unauthorized access to information or carry out other damages.
\nAt the point where user input is received, filter as strictly as possible based on what is expected or valid input.
\nTo prevent XSS in HTTP responses that aren't intended to contain any HTML or JavaScript, you can use the Content-Type and X-Content-Type-Options headers to ensure that browsers interpret the responses in the way you intend.
\nIf you want to know more details about the security headers. Please go to Security Headers
\nAs a last line of defense against attackers, you can use Content Security Policy (CSP) to reduce the severity of any XSS vulnerabilities that still occur.
\nNode js we can use xss-clean package. This dependency will prevent users from inserting HTML & Scripts on input.
NodeJs
\nimport xssClean from "xss-clean";\n\n// Use this as middleare \napp.use(xssClean())We can discover suspicious activity using proper logging and monitoring. When We have insufficient logging and monitoring in that case sometimes we can miss some system access or user activity logs, a step of the particular activity and security alerts.
\nA lot of logging and monitoring tools are available. We can choose the best tools as per our requirement also we can define some policies like data retention policy that includes how far backlogs will be kept. Instrument your API access actions to record key metrics and events. Keep logs indexable and searchable.
\nEach API should limit access, API only able to perform what tasks they need to do. We can do this with Role-Based Access, separate read/write API Keys, OAuth Scopes, and permissions systems. This minimizes the chances that you’ll accidentally expose a sensitive field.
\nSometimes, people find security vulnerabilities, and they would like to report them so the vendor or the developer can fix them. you must have a public contact point where security issues can be reported.
\nWe can create a security.txt file on the site. security.txt is a proposed standard for websites' security information that will allow security researchers to easily report security vulnerabilities. The \"security.txt\" that is similar to robots.txt. security.txt files have been adopted by Google, GitHub, LinkedIn, and Facebook
You can easily create secuirty.txt file using the securitytxt.org
Now days lot of data breaches are happing. We can save mostly data breaches after following some basic security guidelines.You have to pay attention to security during Rest API development. I have covered most of the general Rest API security issues with resolution. these guidelines will help you for developing more secure and quality REST API service.
\n","frontmatter":{"date":"August 20, 2020","updated_date":null,"description":null,"title":"Best Practice Guide For Rest API Security | LoginRadius","tags":["RestAPI","Rest API","Rest API Security","Best Practice","Rest API Developer Guide","Security"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/0fa4b802f45fe1aadfd22a6700b780f7/14b42/index.jpg","srcSet":"/static/0fa4b802f45fe1aadfd22a6700b780f7/f836f/index.jpg 200w,\n/static/0fa4b802f45fe1aadfd22a6700b780f7/2244e/index.jpg 400w,\n/static/0fa4b802f45fe1aadfd22a6700b780f7/14b42/index.jpg 800w,\n/static/0fa4b802f45fe1aadfd22a6700b780f7/47498/index.jpg 1200w,\n/static/0fa4b802f45fe1aadfd22a6700b780f7/0e329/index.jpg 1600w,\n/static/0fa4b802f45fe1aadfd22a6700b780f7/d8255/index.jpg 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Vijay Singh Shekhawat","github":"code-vj","avatar":null}}}},{"node":{"excerpt":"In this blog we will learn how to create our own webpack configuration to bundle a small JavaScript utility library using webpack and babel…","fields":{"slug":"/engineering/write-a-javascript-library-using-webpack-and-babel/"},"html":"In this blog we will learn how to create our own webpack configuration to bundle a small JavaScript utility library using webpack and babel.
\nLet's create the source code for our library. For that we will be create two utility functions into two separate files in our source folder.
\ndemo and run following command in it. $ npm init -yThe above command will create a package.json in your project root. I am using a --y to initialize it with default options.
Directory Structure
\ndemo\n |-- src/\n |-- package.jsonLet's add our source code into src directory:
src\n |--index.js\n |--capital.js\n |--addDOMContent.jsOur utility library contains two functions capital, to capitalize a string and addDOMContent, to add content to a web page, each in it's own module.
capital.js
function capital(string) {\n const capitalizedString =\n string.substring(0, 1).toUpperCase() + string.substring(1)\n return capitalizedString\n}\n\nexport default capitaladdDOMContent.js
function addDOMContent(content) {\n const node = document.createElement("h1")\n node.innerText = content\n document.body.appendChild(node)\n}\n\nexport default addDOMContentInside our index.js, we will import these two functions.
index.js
import capital from "./capital"\nimport addDOMContent from "./addDOMContent"\n\nexport { capital, addDOMContent }So far we got the source code ready but we still need to bundle it so that the browsers can understand and oh boy!, we need to support some older browsers too 🙄. Anyway, being responsible developers we are going to do that 😎.
\n $ npm i --save-dev webpack webpack-cli @babel/core @babel/preset-env babel-loaderWe need webpack to bundle our code and webpack-cli is a command-line tool that uses webpack to do the same. Also webpack requires babel-loader to transpile our ES6 code to ES5 before bundling (Remember, what I said about being responsible developers 😃).
4.1. Create a webpack.config.js at the root of the project.
webpack.config.js
const path = require("path")\n\nmodule.exports = {\n entry: path.resolve(__dirname, "src/index.js"),\n output: {\n path: path.resolve(__dirname, "dist"),\n filename: "index_bundle.js",\n library: "$",\n libraryTarget: "umd",\n },\n module: {\n rules: [\n {\n test: /\\.(js)$/,\n exclude: /node_modules/,\n use: "babel-loader",\n },\n ],\n },\n mode: "development",\n}There are a couple of things we need to understand about webpack configuration. Stay with me for a couple more minutes.
\nentry: In order for webpack to know where to start with, it needs to know the entry point to our app.module.rules: Each file in Node is treated like a module. Webpack itself understands only Javascript and JSON modules. Since we want to transpile ES6, we need babel-loader and webpack needs to know the rules on how to process the Javascript using the given loader.output: After creating the bundle, webpack needs to know what name to give it and where to put it.library and libraryTarget are used to expose our library where library being the name,$ here and libraryTarget is the property to configure, how the library will be exposed. Here we will be using UMD. UMD is a module system capable of working everywhere, be it in the client, on the server or elsewhere.mode: Webpack bundles code into either development mode (unminified) or in production(minified) mode. I am using a hard coded value here for the demo. You can set it using environment variables too.
\n4.2. Create a .babelrc file at the root of the project.
.babelrc
{\n presets: ["@babel/preset-env"]\n}@babel/preset-env let's us use the latest Javascript without any polyfills and syntax transforms.babel-loader uses babel under the hood.
By Now our Project Structure should look like this:
\ndemo\n|-- src\n| |-- index.js\n| |-- capital.js\n| |-- addDOMContent.js\n|-- webpack.config.js\n|-- .babelrc\n|-- package.json\n|-- node_modulesWe have added our source files, now let's add an npm script to build final code using webpack and modify the main property inside our package.json to point it to our bundled code.
package.json
{\n "name": "demo",\n "version": "1.0.0",\n "description": "",\n+ "main": "dist/index_bundle.js",\n+ "scripts": {\n+ "build": "webpack"\n+ },\n "keywords": [],\n "author": "Hridayesh Sharma",\n "license": "ISC",\n "dependencies": {},\n "devDependencies": {\n "@babel/core": "^7.10.4",\n "@babel/preset-env": "^7.11.0",\n "babel-loader": "^8.1.0",\n "webpack": "^4.44.1",\n "webpack-cli": "^3.3.12",\n }\n}In package.json the main property is a direction to the entry point of the module that the package.json is describing.
Run $npm run build to generate the bundled code and use it in the next step.
index.html
<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Demo</title>\n </head>\n <body>\n <script src="dist/index_bundle.js"></script>\n <script>\n console.log($)\n alert($.capital("hridayesh"))\n $.addDOMContent("Well It Works Fine!!!")\n </script>\n </body>\n</html>Save it and run it in your browser. You will see the name capitalized.
\nThe complete code is available at LoginRadius Engineering Blog Sample Repo
\nThanks for reading the blog. For detailed information and execution example of this blog, please refer to the video below:
\n\n","frontmatter":{"date":"August 18, 2020","updated_date":null,"description":"Writing your own webpack configuration for a JavaScript library in ES6 and learn webpack along the way.","title":"Let's Write a JavaScript Library in ES6 using Webpack and Babel","tags":["JavaScript","Webpack","NodeJs"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/4a7d7b651d2d5406780c786320c2b664/ee604/cover.png","srcSet":"/static/4a7d7b651d2d5406780c786320c2b664/69585/cover.png 200w,\n/static/4a7d7b651d2d5406780c786320c2b664/497c6/cover.png 400w,\n/static/4a7d7b651d2d5406780c786320c2b664/ee604/cover.png 800w,\n/static/4a7d7b651d2d5406780c786320c2b664/a8378/cover.png 1024w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hridayesh Sharma","github":"vyasriday","avatar":null}}}},{"node":{"excerpt":"Every Web Developer should know about cross-domain security While working in the world of the internet, all of the complex systems are…","fields":{"slug":"/engineering/cross-domain-security/"},"html":"While working in the world of the internet, all of the complex systems are interconnected in a shareable environment. But exposing systems in the outer world will invite security vulnerabilities and data breach for the organization. Cross-domain security address this security threat by enabling information sharing in more reliable and secure environments. Cross-domain security is an inclusive approach to defending against all kinds of threats to data connections at the boundaries of sensitive or classified networks.
\nThere is no way of being 100% protected from being hacked. If anyone ever tells you that, they are wrong.
\nYou can’t just say…
\n\n\n\"Oh, because I even have CSP implemented, I am safe. I can cross out cross-site scripting from my vulnerabilities list because that can’t happen now.\"
\n
Maybe that is a given to some, but it is easy to find yourself thinking in this manner. In my opinion one reason that programmers can easily find themselves thinking this way is because so much of coding is black and white, 0 or 1, true or false. Security is not that so simple.
\nHave you ever gotten an error that looked something like this?
\nNo 'Access-Control-Allow-Origin' header is available on the requested resource. Origin 'null' is therefore not allowed access.You are certainly not alone. And then you Google it, and someone tells you to urge this extension which will make all of your problems go away!
\n\n\nAwesome, right?
\n
CORS is there to protect you, not hurt you!
\nIn order to explain how CORS helps you, let’s starts about cookies, specifically authentication cookies. Authentication cookies are wont to tell a server that you are simply logged in, and that they are automatically sent with any request you make to that server.
\n\n\nLet’s think you’re logged in to yahoo, and they use authentication cookies. You click on bit.ly/r43nugi which redirects you to cryptoearn. A script within cryptoearn makes a client-side request to yahoo.com which sends your authentication cookie!
\n
In a no-CORS world, they might make changes to your account without you even knowing. Until, obiviously , they post bit.ly/r43nugi on your timeline, and everyone of your relative orfriends click on thereon, and then the cycle continues in an evil breadth-first scheme that conquers all of yahoo’s users, and the world is consumed by cryptoearn. ?
\nIn CORS world, however, yahoo would only allow requests with an origin of yahoo.com to edit data on their server. In other words, they might limit cross-origin resource sharing. You might then ask…
\n\n\nWell can cryptoearn just change the origin header on their request, so that it looks like it is coming from *yahoo.com?*
\n
They will try, but it won’t work because the browser will just ignore it and use the actual origin.
\n\n\nOk, but what if cryptoearn made the request server-side?
\n
In this case, they can bypass CORS, but they can't crack this because they won’t be ready to send your authentication cookie along for the ride. The script should be executed on the client side to urge access to your client side cookies.
\n\n\nServers are generally host web sites, applications, images, fonts, and many more. When you use any browser, you are likely attempting to access a definite website (that is hosted on a server). Websites often request these hosted resources from different locations (servers) on the web. Security policies on servers mitigate the risks associated with requesting assets hosted on distinct server. Let’s take a glance at an example of a security policy: same-origin.\nThe **same-origin *policy is very restrictive. Under this policy, a document (i.e., sort of a web page) hosted on server A can only interact with other documents that also are on server A. In short, the same-origin policy enforces that documents that interact with one another have the same *origin.
\n
The CORS standards manage cross-origin requests by adding a new HTTP headers to the standard list of headers. The following are the new HTTP headers added by the CORS standard:
\nTo dig in to CSP, we first need to talk about one of the most common vulnerabilities on the web: XSS, which means cross-site scripting.
\nXSS is when some evil guy injects JavaScript into your client-side code. You might think…
\n\n\nWhat are they going to do? Change a color from red to blue?
\n
Let’s think of someone has successfully injected JavaScript into client-side code of a website you are visiting.
\nWhat could they do that would be malicious?
\nThe possibilities are endless.
\nCSP is something prevent this from happening by limiting:
\nwhere requests can be made, etc.
\nSo how does it work?
\nWhenever you click on a link or type a website URL in the address bar of your internet browser, your browser makes a GET request. It eventually makes its way to a server which serves up HTML along with HTTP headers. for more details about what headers, open up the Network tab in your console, and visit some sites.
\nYou might see a response header that looks like below:
\ncontent-security-policy: default-src * data: blob:;script-src *.yahoo.com *.fbcdn.net *.yahoo.net *.google-analytics.com *.virtualearth.net *.google.com 127.0.0.1:* *.spotilocal.com:* 'unsafe-inline' 'unsafe-eval' *.atlassolutions.com blob: data: 'self';style-src data: blob: 'unsafe-inline' *;connect-src *.yahoo.com yahoo.com *.fbcdn.net *.yahoo.net *.spotilocal.com:* wss://*.yahoo.com:* https://fb.scanandcleanlocal.com:* *.atlassolutions.com attachment.fbsbx.com ws://localhost:* blob: *.cdninstagram.com 'self' chrome-extension://boadgeojelhgndaghljhdicfkmllpafd chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm;That is the content security policy of yahoo.com. Let’s reformat it to make it easier to read:
\ncontent-security-policy:\ndefault-src * data: blob:;\n\nscript-src *.yahoo.com *.fbcdn.net *.yahoo.net *.google-analytics.com *.virtualearth.net *.google.com 127.0.0.1:* *.spotilocal.com:* 'unsafe-inline' 'unsafe-eval' *.atlassolutions.com blob: data: 'self';\n\nstyle-src data: blob: 'unsafe-inline' *;\n\nconnect-src *.yahoo.com yahoo.com *.fbcdn.net *.yahoo.net *.spotilocal.com:* wss://*.yahoo.com:* https://fb.scanandcleanlocal.com:* *.atlassolutions.com attachment.fbsbx.com ws://localhost:* blob: *.cdninstagram.com 'self' chrome-extension://boadgeojelhgndaghljhdicfkmllpafd chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm;Now, let’s break down the directives.
\nNote: there are many more CSP directives than just these four shown above. The internet browser will read the CSP header and apply those directives to everything within the HTML file that was served. If the directives are set correctly, they allow only what is required.
\nIf there is no CSP header is present, then everything goes, and nothing is restricted. Everywhere you see * , that is a wildcard. You can think of replacing * with anything and it will be allowed.
\nSecurity is something that should be important to everyone, not just the people who have it explicitly named in their job title, and always try to have additional layer for better security.
\n","frontmatter":{"date":"August 16, 2020","updated_date":null,"description":"Cross domain security address security threat by enabling the information sharing in more reliable and secure environments. Cross domain security is an inclusive approach to defending against all kind of threats to data connections at the boundaries of sensitive or classified networks.","title":"Cross Domain Security","tags":["Security","Web Security","Cross-Domain"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/790cea1b5ac8ae81febf53547ae0d319/ee604/cross_domain_security.png","srcSet":"/static/790cea1b5ac8ae81febf53547ae0d319/69585/cross_domain_security.png 200w,\n/static/790cea1b5ac8ae81febf53547ae0d319/497c6/cross_domain_security.png 400w,\n/static/790cea1b5ac8ae81febf53547ae0d319/ee604/cross_domain_security.png 800w,\n/static/790cea1b5ac8ae81febf53547ae0d319/f3583/cross_domain_security.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null}}}},{"node":{"excerpt":"Contents UX Design Education Inspiration Colour Components Mockups Design System Font Prototyping Tools Free Stock Photos Tools that speed…","fields":{"slug":"/engineering/best-ui-ux-design-tools-2020/"},"html":"Found the world-class UX Design Courses.
\nYour one-stop design school to learn new design skills.
\nWebsite | Courses | Topics | Join our community
\nWe share knowledge with the world.
\n\nLearn to think like a UX designer and gain the concepts, skills, and confidence to build your UX career.
\n\nWe envision a world where anyone, anywhere has the power to transform their lives through learning.
\n\nThese are the websites where the world’s top design talents share their works and ideas.
\nShowcase and discover the latest work from top online portfolios by creative professionals across industries.
\n\nDribbble is where designers gain inspiration, feedback, community, and jobs and are your best resource to discover
\n\nAwwwards are the Website Awards that recognize and promote the talent and effort of the best developers and designers.
\n\nCheck out the hand-picked collection of latest mobile design patterns from apps that reflect the best in design.
\nmobbin.design.com
\nOver 500+ interactions from the world's best designed and highest-grossing apps.
\n\nThe largest collection of the best portfolio websites from top designers in the industry.
\n\nDesigners' Secret Source: all the design inspiration you need. Served fresh.
\n\nUse these tools to explore different color schemes quickly.
\nCreate color schemes with the color wheel or browse thousands of color combinations from the Color community.
\n\nCreate and share color palettes for your UI, and measure the accessibility of any color combination.
\n\nSearch, discover, test and create beautiful color palettes for your projects
\n\nContrast is the difference in luminance or color that makes an object (or its representation in an image or display)
\n\nColorbox is a color tool to produce color sets.
\n\nCome to WebGradients.com for 180 beautiful linear gradients in CSS3, Photoshop, and Sketch.
\n\nThe biggest collection of official brand color codes around. Includes hex color codes for 500+ brands including…
\n\nA curated collection of the most popular and trendy color palettes. Get the perfect color ideas for your design.
\n\nDrawing illustration could be time-consuming, why not start with this template and use it as a draft/underlay and build your design on top of that?
\nOpen-source illustrations for every project you can imagine and create.
\n\nCreators who don't draw face the problem of the boring content for app screens, articles, landing pages, and emails.
\n\nA library of sketchy illustrations of people free for personal and commercial use.
\n\nFree illustrations, for everything. Memorable products, brands, & presentations start with our curated royalty-fr
\n\nIconscout comes with integrated Plugins, conversion Tools, and simple, powerful Editors that enhance and streamline your workflow.
\n\nAn aggregator that indexes various free avatar sources that you can use in your design mockups by copy-paste, API, plugins…
\n\nA collection of star vectors in various styles and illustrations with over 30 collections and 290k images.
\n\nImages and Sketch files of popular devices.
\n\nBig library of high quality best free UI & UX mockups
\n\nHuge collection of free mockups, patterns, illustrations, scene creators, DIY scenes, for Photoshop, Sketch, and Figma
\n\nA directory of the best free design mockups for Photoshop, Sketch, Figma, and InVision Studio.
\n\nFind documentation and resources for designing great apps for Apple platforms.
\n\nBuild beautiful, usable products faster. Material Design is an adaptable system-backed by open-source.
\n\nBehind the scenes of our new design system, This article is part of a series on our new Design Language System.
\n\nWith our company’s growth and new direction, we need a brand identity that is efficient to use, flexible across applications, and able to feature localized content in a globally consistent way.
\n\nOur style guide helps us collaborate across disciplines to build a great experience for all of Shopify’s merchants.
\n\nUse Atlassian’s end-to-end design language to create straightforward and beautiful experiences.
\n\nA collection of tools and resources from Facebook Design.
\n\nMaking the web more beautiful, fast, and open through great typography
\n\nTypewolf helps designers choose the perfect font combination for their next design project-features web fonts in the…
\n\nArchive of freely downloadable fonts. Browse by alphabetical listing, by style, by author or by popularity.
\n\nFont Squirrel scours the internet for high quality, legitimately free fonts.
\n\nHere at Typ.io, we're revealing designers' decisions for all to see; peeking under the hood of beautiful websites…
\n\nCreate a testable design prototype for your interviewee and get feedback
\nAdobe XD is your UI/UX design solution for website and mobile apps creation. Design, prototype, and share. Try it now.
\n\nInVision is the digital product design platform used to make the world's best customer experiences.
\n\nFigma helps teams create, test, and ship better designs from start to finish. Meet our customers Packed with design…
\n\nSeamless integration to the Mac app makes saving to Cloud as easy as hitting ⌘S. From there, you can organize designs…
\n\nA new tool for designing modern interfaces, built and used by designers at Facebook
\n\nA framer is coming to the web. Learn more › Why Framer X Resources Framer X Framer is coming to the web. Learn more › The…
\n\nThe principle makes it easy to design animated and interactive user interfaces. Whether you're designing the flow of a…
\n\nThe world's first user flow diagramming tool tailored for designers. Build and present beautiful user flow diagrams…
\n\nFree stock photos you can use everywhere. ✓ Free for commercial use ✓ No attribution required
\n\nBeautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock…
\n\nStunning stock images, perfect for blogs and websites Explore stock photography by category, all free for commercial…
\n\nA collection of stock photography in a single style. Good for collages. Free for commercial use.
\n\nGlitch images, videos, or webcam using WebGL effects. Save output as image, gif, or video.
\n\nFind beautiful free duotone images to use in any project, or make custom duotone images by uploading your own image and…
\nduotone.shapefactory.co
\nCompressor.io is a powerful online tool for reducing drastically the size of your images and photos whilst maintaining…
\n\nExcellent question! Let me give you a side by side comparison. Below are two photos of my cousin. The left image is…
\n\nmade with ♥ All trademarks, service marks, trade names, product names, logos, and trade dress appearing on our…
\n\nThis toolkit is an introduction to the methodology of service design
\nwww.servicedesigntoolkit.orgs
\nConnected space for product teams. Handoff designs and style guides with accurate specs, assets, code…
\n\nScalable, secure, cross-device, and enterprise-ready team collaboration tool for distributed teams. Join 2M+ users &…
\n\n","frontmatter":{"date":"August 13, 2020","updated_date":null,"description":"As a designer, often wondered which new tools and utilities, other designers are using? So here is a list of all the tools and utilities famous around the world in designers.","title":"Best Free UI/UX Design Tools/Resources 2020","tags":["Design","UX","Tools"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/410d54b614a5a7d5a65c0ca21856011c/4fe8c/ux-ui.jpg","srcSet":"/static/410d54b614a5a7d5a65c0ca21856011c/f836f/ux-ui.jpg 200w,\n/static/410d54b614a5a7d5a65c0ca21856011c/2244e/ux-ui.jpg 400w,\n/static/410d54b614a5a7d5a65c0ca21856011c/4fe8c/ux-ui.jpg 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"author":{"id":"Hitesh Kumawat","github":null,"avatar":null}}}},{"node":{"excerpt":"Migrating your existing code to a new programming language is a very tedious task. We need to have a proper set of requirements and some…","fields":{"slug":"/engineering/a-journey-from-node-to-golang/"},"html":"Migrating your existing code to a new programming language is a very tedious task. We need to have a proper set of requirements and some obvious benchmarking between the new and existing technology.
\nSo here our journey started to transform (not convert) our existing code to a new language. You might be thinking why I have used the word transformation instead of conversion, so -
\nConversion: Conversion is just about writing your existing code in different languages as it is.
\nTransformation: Transformation is about leveraging all possible benefits of a new language and convert accordingly.
\nThe idea of migrating code to a new programming language started with a simple requirement: we wanted to take our cloud solution to on-premise as well. Till now, our services were written in NodeJS for a cloud solution and it was doing pretty well. The performance was also good but there is nothing that cannot be improved upon. So, along with performance improvement, we started to find out that can we make a GUI or CLI using existing NodeJS code that can take our solution on-premise?
\nAnswer for that was practically YES. but, technically NO. If we’re writing apps with a GUI, Node can’t do it on its own. We had to use some other projects which provide GUI creation capabilities (eg: ElectronJS, NW.js, etc). Making CLI seemed doable but there were also problems like the inablility to have single file distribution for our code. And the ability to download a single file and execute commands - without an installer, or even a setup process - does wonders for a user. This also makes the product easily backward-compatible.
\nAlso, another factor came in that it was better to switch to a technology that works closely with gRPC.
\nSo, we drew out a few goals for our new solution
\nAfter research with our requirement, we were able to figure out that we can achieve these with GoLang, developed by Google.\nOn the basis of our research, we also did some benchmarking on different node js frameworks and GoLang.
\nBenchmarking sever we’ve used with below configurations
\nThe benchmarking result was pretty much similor to what we are thinking. Here are the benchmarking results -
\nThe below chart is showing that the Number of requests is very high compared to other node js frameworks.
\nAll the data clearly shows the direction so we decided to move to GoLang.
\n","frontmatter":{"date":"August 11, 2020","updated_date":null,"description":"If your existing technology is not fulfilling all your needs and you are thinking about switching to the new one. Also, if you are concerned about the performance. Here is the blog that can help you in this direction.","title":"A journey from Node to GoLang","tags":["NodeJs","Golang","Performance"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/0cb80044e5634c85f2b1002c7c3661d8/2a4de/node-go.png","srcSet":"/static/0cb80044e5634c85f2b1002c7c3661d8/69585/node-go.png 200w,\n/static/0cb80044e5634c85f2b1002c7c3661d8/497c6/node-go.png 400w,\n/static/0cb80044e5634c85f2b1002c7c3661d8/2a4de/node-go.png 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"author":{"id":"Narendra Pareek","github":"pareek-narendra","avatar":null}}}},{"node":{"excerpt":"Overview I want to explain the inspiration for React Hooks in this walkthrough, what React Hook is and the advantages of hooks, and more…","fields":{"slug":"/engineering/react-hooks-guide/"},"html":"I want to explain the inspiration for React Hooks in this walkthrough, what React Hook is and the advantages of hooks, and more. This article covers only an introduction to React Hooks. React Hooks have been introduced in React function components as a way of utilising state and side effects.
\nHave you ever assigned a task to change the functional component which is full of UI and business logic to a Class Component just because the new feature requires the use of state, just to toggle some text colour to red on some events occurred?
\nChances are there if you are a react developer, Hopefully we can solve this using the Hooks.
\nHooks are features that allow you to “hook into” the features of React state and lifecycle from function components. Hooks do not function inside classes. Without classes, they let you use React.
\n\n\nHooks are a new addition in React 16.8. They let you use state and other React features without writing a class.
\n
Dan Abramov has provided a well-rounded introduction to the API, and how and why the framework that many of us use has evolved to where it is now. You can read about it and watch his ReactConf 2018 keynote introducing the hooks proposal.
\nThe key takeaway maybe this:
\n\n\nIf the React community embraces hooks, it will reduce the number of concepts you need to juggle when writing React applications. Hooks let you always use functions instead of having to constantly switch between functions, classes, higher-order components, and render props.
\n
React Hooks enables the functional components to attach the local state to it, so that you can use React functionality without using a class component.
\nAdvantages of react hooks:
\nAs you all know there are two ways to create the React components, one is using the function and other is using the class, there is always a confusion between one v/s other.
\nLet us assume we have a simple class component and then we will convert it to a functional with hooks and see the difference.
\nimport React, { Component } from "react";\nclass Greeting extends Component {\n state = {\n text: "",\n };\n handleChange = (e) => {\n this.setState({ text: e.target.value });\n };\n render() {\n return <input value={this.state.text} onChange={this.handleChange} />;\n }\n}\nexport default Greeting; import React, { useState } from "react";\nexport default () => {\n const [text, setText] = useState("");\n return (\n <input\n value={text}\n onChange={(e) => {\n setText(e.target.value);\n }}\n />\n );\n};\n\nIf you disagree with any of the above, you can play with it in practice. I’m sure that would change your mind!
\n
Let us understand some basic hooks with examples.
\nI will take one example and will explain all the hooks in that example using a various scenarios.
\nimport React, { useState } from 'react';\n\nconst App = () => {\n const [message, setMessage] = useState('Hi there, how are you?');\n\n return <h1>{message}</h1>\n};\n\nexport default App;In this example variable message will save the value Hi there, how are you using the useState() hooks. It will be similar to this code we write in the constructor() of class component.
this.state = {\n message: "Hi there, how are you?"\n}\n\nIf you are wondering about the
\nsetMessage@line 3 then be calm, I will explain later in this tutorial
React useEffect() function can be executed in 3 different React component life cycles that are
Let's understand the useEffect() hook by taking the above example. So let's say I want to change the message 1 second after the component is mounted.
import React, { useState, useEffect } from "react";\n\nconst App = () => {\n const [message, setMessage] = useState("Hi there, how are you?");\n\n useEffect(() => {\n console.log("trigger use effect hook");\n\n setTimeout(() => {\n setMessage("I'm fine, thanks for asking.");\n }, 1000);\n });\n\n return <h1>{message}</h1>;\n};\n\nexport default App;As you can see, In this example we have used the useEffect hook to trigger the setMessage method the change the message variable after 1 second.
But there is one problem, while executing this component you can see that the console.log will trigger twice. The reason is the useEffect hook will by default trigger on change of either state or props similar to the componentDidUpdate method in our class component.
To overcome this kind of case we need to pass the Empty array ([]) as the second argument in the useEffect hooks. So updated code will look like this
\nimport React, { useState, useEffect } from 'react';\n\nconst App = () => {\n const [message, setMessage] = useState('Hi there, how are you?');\n\n useEffect(() => {\n console.log('trigger use effect hook');\n\n setTimeout(() => {\n setMessage("I'm fine, thanks for asking.");\n }, 1000)\n }, []);\n\n return <h1>{message}</h1>\n};\n\nexport default App;The above code means that hook will never be triggered as we have an empty array there, if we want to trigger the hook on a specific variable change of props or state we can add that variable in the array.
For eg : [state.message] here hook will fire on the update of message variable only.
I have covered the two basic and important hooks in this tutorial, there are many more types of hooks available in React, you can find the detailed explanation in the React docs.
\n\n\nWe can use eslint-plugin-react-hooks this eslint plugin that ensures the above two rules.
\n
So, from multiple points of view, we have covered the power of Hooks and seen how we can use controlled state in our Components without utilizing classes.
\nI hope you find this article useful, Happy Reading !!!
\n","frontmatter":{"date":"August 07, 2020","updated_date":null,"description":"A walkthrough guide on React Hooks, what is React Hooks, benefits of Hooks, and how to use Hooks in React and more.","title":"React Hooks: A Beginners Guide","tags":["React","Hooks"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.36986301369863,"src":"/static/35867498747d433ab6d7d6e31ba37b17/ee604/react-hooks.png","srcSet":"/static/35867498747d433ab6d7d6e31ba37b17/69585/react-hooks.png 200w,\n/static/35867498747d433ab6d7d6e31ba37b17/497c6/react-hooks.png 400w,\n/static/35867498747d433ab6d7d6e31ba37b17/ee604/react-hooks.png 800w,\n/static/35867498747d433ab6d7d6e31ba37b17/f3583/react-hooks.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Mohammed Modi","github":"mohammed786","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":"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.