{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/19","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"A High-Level Introduction to Redux Saga Redux Saga is a middleware library used to allow a Redux store to interact with resources outside of…","fields":{"slug":"/engineering/introduction-to-redux-saga/"},"html":"

A High-Level Introduction to Redux Saga

\n

Redux Saga is a middleware library used to allow a Redux store to interact with resources outside of itself asynchronously. This includes making HTTP requests to external services, accessing browser storage, and executing I/O operations. These operations are also known as side effects. Redux Saga helps to organize these side effects in a way that is easier to manage.

\n

Why do we even need this?

\n

A redux store natively only knows how to dispatch actions and update its state using its root reducer. Actions represent an event describing something happening in your application and an intention to change your application's state. A reducer accumulates values from or stemming from dispatched actions and accumulates these values into the newly updated state of your application.

\n

Reducers must be written as a pure function, as it is necessary to enable useful features of Redux such as time travel (replaying past actions). Actions are simply objects passed on into the reducer and are naturally deterministic. Thus we have a problem; there isn't any place in your Redux application to put your side effects in.

\n

The solution

\n

A Redux middleware lies between an action and a reducer. This enables actions to contain something else other than a plain object, as long as the middleware intercepts this, performs its logic, and returns a plain object to pass along to the reducer.

\n

Redux Thunk, a common alternative to Redux Saga, allows functions to be passed into the Redux store dispatch, which checks to see if it is a function or an action object, executing the function in the former case, and directly passing along the action object to the reducer in the latter case. These functions can then perform whatever complex asynchronous logic that it wants and produce a plain action object to be then passed into the reducer.

\n

Redux Sagas are slightly different in that a separate set of actions are defined in your Redux application, which is captured exclusively by watcher functions (as part of your saga). Upon capturing the action, the saga will execute the corresponding logic and dispatch a resultant action to your application's reducer. The saga essentially acts as a separate thread to your application, listening for specific actions from your main application to perform complex asynchronous tasks and updating your application's state once it is completed.

\n

Redux Saga vs. alternatives

\n

While I wouldn't say Redux Saga is inherently better than any of the alternatives available, it does have a few benefits that might make you want to consider using it.

\n

Redux Saga offers a place completely decoupled from your action creators for you to handle your application's side effects. Some people may feel that this makes your application's data flow harder to follow (which I would agree with), but I think that this decoupling makes organizing your codebase and extending functionality easier down the road.

\n

For example, in a situation where you might need to support a workflow that requires multiple HTTP requests to different services in a particular order, Redux Saga allows you to compose granular sagas into a single one and represent this new high-level function with a separate action. Your application can still access each individual HTTP resource in other workflows, but for this particular one, your React component can simply call this high-level action to load whatever it needs from a single place. As far as your component is concerned, your asynchronous logic to load multiple resources in a particular order is abstracted away.

\n

Redux Saga also offers us a collection of helper functions that are used to spawn your tasks when some specific actions are dispatched. These can be used to help organize when and how your tasks are executed.

\n

For example, one of the most commonly used helper functions is takeEvery(). This instructs the middleware to spawn a new task for every action dispatched to your store matching a given pattern. This provides a behaviour similar to Redux Thunk and is as simple as it gets: \"Application tells you to fetch something, go fetch it\".

\n

Now imagine that you had two functionally independent components that needed to retrieve the most up to date data from the same place. Previously they existed on two different pages and could both be visited at any time. It would make sense for both components to try to retrieve a fresh copy of the resource whenever it is visited. Now imagine that your specification has changed, and now the two components need to exist on the same page. Now you have a situation where two different components are redundantly spawning the same task.

\n

Obviously, you could rewrite one of the components to no longer try to retrieve a fresh copy and rely on the other to create the necessary action to retrieve this resource and populate the application store. Or you could add some logic to ensure that your component does not try to create a new action to retrieve this resource if this resource is already being loaded. But this could also be solved using another Redux Saga helper function: take(). This function instructs the middleware to spawn a new task for an action dispatched matching a given pattern but will effectively ignore any new actions until the spawned task has been completed.

\n

With this, your two independent components can coexist together without changing any component-specific logic! As far as your component is concerned, it asks your saga to retrieve a resource on its behalf and retrieves it from the resultant updated state. Your saga gets to decide how it wants to handle two requests from different components.

\n

Concluding thoughts

\n

There is a fair bit more to Redux Saga than I managed to cram into this post. If you're interested in incorporating it into your project or want to know more, check out their fantastic documentation here: Redux-saga. It's packed full of useful examples if you'd like to get into the low-level details.

\n

Redux Saga is one of many tools that can help you handle your application's side effects. It's heavy and has a learning curve but contains a lot of functionality that will help keep your codebase neat and modular.

\n","frontmatter":{"date":"November 23, 2020","updated_date":null,"description":"A high level introduction to Redux Saga.","title":"Introduction to Redux Saga","tags":["React","Redux","Redux Saga"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/08b61adc0e5e69207ac4c62a11d05aa6/ee604/unsplash.png","srcSet":"/static/08b61adc0e5e69207ac4c62a11d05aa6/69585/unsplash.png 200w,\n/static/08b61adc0e5e69207ac4c62a11d05aa6/497c6/unsplash.png 400w,\n/static/08b61adc0e5e69207ac4c62a11d05aa6/ee604/unsplash.png 800w,\n/static/08b61adc0e5e69207ac4c62a11d05aa6/f3583/unsplash.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Nick Chim","github":"nickc95","avatar":null}}}},{"node":{"excerpt":"React thrives on being one of the premier tools to build single-page applications, which used to be a fairly foreign concept when I started…","fields":{"slug":"/engineering/react-router-basics/"},"html":"

React thrives on being one of the premier tools to build single-page applications, which used to be a fairly foreign concept when I started building my first React app. Back then, I was used to the concept of serving separate web pages whenever the user redirects from an URL path to another, and it was rather challenging at first to wrap my head around how React handles navigation.

\n

With that in mind, this blog post aims to lay down and explain the basic aspects of navigation using React Router, one of the most, if not the most, popular solutions for navigation within a React app.

\n

Throughout the first section below, please reference this CodePen example.

\n
    \n
  1. Link, Switch and Router
    2. \n
\n

As hinted at in the preface of this writing, routing in React does not involve replacing the HTML, CSS or JavaScript resources currently being served or reloading the browser content. Instead, using libraries like react-router allows containers to be swapped in and out dynamically based on the current URL location, and this all happens client-side. With that in mind, React Router can more generally be understood as a wrapper that handles conditional rendering based on URL path.

\n

To accomplish this, the basic building blocks that developers get to play with are <Route>, <Switch> and <Link>. Let us look at a basic example making use of these 3 components:

\n

First off, let’s create some simple text components. These components are stand-ins for actual components to be swapped in and out in navigation. HelloBanner will be a div containing the simple message “Hello”, and WorldBanner containing “World!”:

\n
const HelloBanner: React.FunctionComponent = () => {\n  return (\n    <div id="banner_hello" className="banner">\n      <span>Hello Banner is currently displayed. We are currently in path "/hello"</span>\n    </div>\n  ) \n}\n\nconst WorldBanner: React.FunctionComponent = () => {\n  return (\n    <div id="banner_world" className="banner">\n      <span>Hello Banner is currently displayed. We are currently in path "/world"</span>\n    </div>\n  ) \n}
\n

Now let’s imagine the layout of a conventional web application with a top navigation bar. The navigation bar contains links to each section of the app and the body would show the content of the current webpage. The skeleton code for that container would look something like this in React:

\n
class AppContainer extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  render() {\n    return (\n      <div id="div_app_container" className="app-container">\n        <div id="div_nav" className="nav-bar">\n          <span>Navigation bar</span>\n          <Link to="/hello">\n            <span>Link to /hello</span>\n          </Link>\n          <Link to="/world">\n            <span>Link to /world</span>\n          </Link>\n          <Link to="/clearlyinvalidpath">\n            <span>Link to a clearly invalid path.</span>\n          </Link>\n        </div>\n        <div id="main_container" className="main-container">\n          <span>Main Container</span>\n          <Switch>\n            <Route exact path="/">\n              <div>\n                <span>\n                  Default container. We are in root path\n                </span>\n              </div>\n            </Route>\n            <Route path="/hello" component={HelloBanner} />\n            <Route path="/world">\n              <WorldBanner />\n            </Route>\n            <Redirect to="/" />\n          </Switch>\n        </div>\n      </div>\n    );\n  }\n}\n\nReactDOM.render(\n  <BrowserRouter>\n    <AppContainer />\n  </BrowserRouter>,\n  document.getElementById("app")\n);
\n

If you are currently looking at the render of this structure from the CodePen, you would see this very simple UI:

\n

\n \n \n

\n

Clicking on the <Link>’s in the navigation bar will “navigate” you to the corresponding paths. In effect, what this does is twofold:

\n\n

This is demonstrated through the example app. Once you click the links to /hello or to /world, the corresponding component will be swapped in under the <Switch> container.

\n

A couple of noteworthy things from the code example:

\n\n

The workflow described above is intuitive from the end user’s point of view. However, there are times when the application’s internal logic demands a redirection to be performed following app events. In these occasions, React Router leverages the history object to allow for programmatic redirection:

\n

For a traditional setup, the history object can be accessed through a component’s props through the user of the withRouter higher order component:

\n
import * as React from "react";\nimport { RouteComponentProps, withRouter } from "react-router-dom";\n\nexport interface SampleComponentProps extends RouteComponentProps {\n  // props go here\n}\nexport interface SampleComponentStateState {\n  // states go here\n}\n\nclass SampleComponent extends React.Component<SampleComponentProps, SampleComponentStateState> {\n  constructor(props: any) {\n    super(props);\n  }\n\n  performRedirect = () => {\n    const { history } = this.props;\n\n    history.push("/desired-pathname")\n  }\n\n  render() {\n    return <div/>\n  }\n}\n\nexport default withRouter<SampleComponentProps>(SampleComponent);
\n

In the example above, you can see all the components required to extract the history object, as well as the history.push() call to perform the redirection.

\n

For a more updated approach, React Router introduced the hook useHistory, which should blend in more naturally when programming with a React Hooks intensive workflow.

\n
    \n
  1. Passing states on redirects
    2. \n
\n

Certain redirects are unique in nature, and/or contain certain information about the previous user activity that you might want to pass on to the new component. In this case, the information can be passed through history states into the new component, which will then perform custom behavior based on these states:

\n

When using <Link> component redirect, populate the to prop with an object that contains the new path as well as states, instead of just the string for pathname:

\n
<Link\n  to={{\n    pathname: "/desired-pathname",\n    state: {\n      stateName: "state to be passed."\n    }\n  }}\n>\n  Link text here.\n</Link>
\n

The same object can be used as argument to the history.push() call to achieve similar results:

\n
history.push({\n  pathname: "/desired-pathname",\n  state: {\n    stateName: "state to be passed."\n  }\n})
\n

Once the state has been included with the redirection, on the receiving end, you can extract the state from the history.location.state object:

\n
import * as React from "react";\nimport { RouteComponentProps, withRouter } from "react-router-dom";\n\nexport interface ReceivingComponentProps extends RouteComponentProps {\n  // props go here\n}\nexport interface ReceivingComponentStateState {\n  // states go here\n}\n\nclass ReceivingComponent extends React.Component<ReceivingComponentProps, ReceivingComponentStateState> {\n  constructor(props: any) {\n    super(props);\n  }\n\n  componentDidMount() {\n    const { history } = this.props;\n    if (history.location.state && history.location.state.stateName) {\n      // stateName can be accessed here if it is passed in from a previous redirect action.\n      console.log(history.location.state.stateName);\n    }\n  }\n\n  render() {\n    return <div/>\n  }\n}\n\nexport default withRouter<ReceivingComponentProps>(ReceivingComponent);
\n

The state access is in componentDidMount in the example above.

\n
    \n
  1. Parting Words
    2. \n
\n

At this point, hopefully, we have covered all the big bullet points to help you get started with navigation using React Router. I hope this write-up has been informative and helpful to your understanding of navigation in React, as well as helping you build your next React application.

\n","frontmatter":{"date":"November 20, 2020","updated_date":null,"description":"Everything essential you need to know about React Router.","title":"React Router Basics: Routing in a Single-page Application","tags":["JavaScript","Node","React","React Router"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/a53096b6796dd3d1e3f3df8bc77a6689/ee604/index.png","srcSet":"/static/a53096b6796dd3d1e3f3df8bc77a6689/69585/index.png 200w,\n/static/a53096b6796dd3d1e3f3df8bc77a6689/497c6/index.png 400w,\n/static/a53096b6796dd3d1e3f3df8bc77a6689/ee604/index.png 800w,\n/static/a53096b6796dd3d1e3f3df8bc77a6689/f3583/index.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Nathan Nguyen","github":"nathannguyenn","avatar":null}}}},{"node":{"excerpt":"Introduction Hello Everyone, In this article, we will learn how to send emails in .NET/C# using SMTP. As sometimes, it is required to send…","fields":{"slug":"/engineering/how-to-send-emails-through-csharp-dotnet-using-smtp/"},"html":"

Introduction

\n

Hello Everyone, In this article, we will learn how to send emails in .NET/C# using SMTP. As sometimes, it is required to send emails to the users of the application. Email communication is considered a good way to communicate with the users of the application. There are different ways to send emails in .NET, but here we will talk about SMTP.

\n

What is SMTP?

\n

SMTP stands for Simple Mail Transfer Protocol. It is a communication protocol for electronic mail transmission. Mail servers and other message transfer agents use SMTP to send and receive mail messages. The Key Features of SMTP are it is considered a reliable server for sending emails, and it delivers the email more easily and quickly as it is developed from a simple platform.

\n

Prerequisites

\n\n

Let's start

\n

In the implementation part, we will first create a .NET Core class library, and then we will use that library in the .NET Core console app.

\n

Step 1 - Create a .NET Core Console App project in IDE.

\n

Step 2 - Add a .NET Core class library in the created solution.

\n

Step 3 - Create a new class file in the class library and name it as MailArguments.cs. Add the arguments fields in this file, which will be used in sending the email.

\n
 public string MailTo { get; set; }\n public string Bcc { get; set; }\n public string Name { get; set; }\n public string Subject { get; set; }\n public string Message { get; set; }\n public string SmtpHost { get; set; }\n public string Password { get; set; }\n public int Port { get; set; }\n public string MailFrom { get; set; }
\n

Step 4 - Create a new class file in the class library; name it ExtensionMethods.cs. Here we will add the extension methods, which will be helpful to put the validation while sending the emails.

\n
 public static bool IsNotNullOrEmpty<T>(this IEnumerable<T> value)\n {\n     return value != null && value.Any(); // This will return true if the value is not null and not empty\n }\n public static bool IsNotNullOrEmptyOrWhiteSpace(this string value)\n {\n     return !(string.IsNullOrEmpty(value) || string.IsNullOrWhiteSpace(value)); // This will return true if the string value is not null, not empty and not contains any white space\n }\n public static bool IsNotNull(this object value)\n {\n     return value != null; // This will return true if the object value is not null\n }
\n

Resolve missing references.

\n

Step 5 - Create a new static class file in the class library name it as Mail.cs. In this class add a static method with try and catch block.

\n
 public static Tuple<bool, string> SendEMail(MailArguments mailArgs, List<Attachment> attachments, bool isSsl, Dictionary<string, string> headers){\n try{\n\n }\n catch (Exception ex){\n     var msg = ex.Message;\n     return Tuple.Create(false, msg);\n }\n }
\n

Resolve missing references.

\n

In this method, we are returning the Tuple<bool, string> which returns the status of the email sent and a message from the method in case of failure and success.

\n

Step 7 - Add below lines of code which will help create the NetworkCredentials for SMTP in the created method SendEmail.

\n
 var networkCredential = new NetworkCredential\n {\n     Password = mailArgs.Password,\n     UserName = mailArgs.MailFrom\n };
\n

Here we are using NetworkCredential class to set the UserName and Password.

\n

Step 8 - Add below lines of code, which will be used to initiate a message, subject, and IsBodyHtml.

\n
 var mailMsg = new MailMessage\n {\n     Body = mailArgs.Message,\n     Subject = mailArgs.Subject,\n     IsBodyHtml = true // This indicates that message body contains the HTML part as well.\n };\n mailMsg.To.Add(mailArgs.MailTo);
\n\n

Step 9 - Add the below lines of code to check and add the Headers, BCC, and Attachments. Here we have used the earlier created extension methods to add the validation.

\n
 if (headers.IsNotNullOrEmpty() )\n {\n     foreach (var header in headers)\n     {\n         mailMsg.Headers.Add(header.Key, header.Value);\n     }\n }\n if (mailArgs.Bcc.IsNotNullOrEmptyOrWhiteSpace())\n {\n     string[] bccIds = mailArgs.Bcc.Split(',');\n     if (bccIds.IsNotNullOrEmpty())\n     {\n         foreach (var bcc in bccIds)\n         {\n             mailMsg.Bcc.Add(bcc);\n         }\n     }\n }\n if (attachments.IsNotNull())\n {\n     foreach (var attachment in attachments)\n     {\n         if (attachment.IsNotNull())\n         {\n             mailMsg.Attachments.Add(attachment);\n         }\n     }\n }
\n

Step 10 - Add below the line of code to create a new email address using the From and Name fields of MailArguments class.

\n
 mailMsg.From = new MailAddress(mailArgs.MailFrom, mailArgs.Name);
\n

Step 11 - Add below lines of code to create a new SMTP client and use the send method of that client. When the email is successfully sent then we are creating a new tuple for sending the success message with a true flag that will indicate mail is sent.

\n
 var smtpClient = new SmtpClient(mailArgs.SmtpHost)\n {\n     Port = Convert.ToInt32(mailArgs.Port),\n     EnableSsl = isSsl,\n     DeliveryMethod = SmtpDeliveryMethod.Network,\n     UseDefaultCredentials = false,\n     Credentials = networkCredential\n };\n smtpClient.Send(mailMsg);\n return Tuple.Create(true, "Email Sent Successfully.");
\n

Here we are initializing the below variables for the SMTP client.

\n\n

Step 12 - In the Program.cs, which will be in the console app project, we will initialize and add the Mail arguments which are required to send an email.

\n

Step 13 - Before that add the reference of the class library which we have created above in your console app by doing the below steps

\n
Right-click on the console app project->Click on Add->Click on Reference->Select the created class library project.
\n

Step 14 - In the main method, add the below lines to initialize the arguments. Here I am using Gmail's SMTP server port and host address.

\n
 var mailArgs = new MailArguments\n {\n     MailFrom = "<--From mail address from where mail should be sent-->",  \n     Password = "<--From mail address password-->",  \n     Name = "<--From mail address name-->",\n     MailTo = "<--To mail address to where mail should be received-->", \n     Subject = "<--Subject of the email-->",                             \n     Message = "<--Message body of the email can contains HTML as well-->",                                           \n     Port = 587,                                                         \n     SmtpHost = "smtp.gmail.com",                                                                     \n     Bcc = "<--BCC email id's separated by semicolon (;)-->"             \n };\n List<Attachment> lstAttachments=new List<Attachment>\n {\n     new Attachment("<--Path of the attachment-->>",MediaTypeNames.Image.Gif) //MediaType and Path of the attachment here I have selected Gif Image we have MediaTypeNames Application/Image/Text\n };\n\n Dictionary<string, string> dictHeaders = new Dictionary<string, string>\n {\n     { "<--Key of the header-->", "<--Values of the header-->" }\n };
\n

Resolve missing references.

\n

You have to initialize all the variables as described above. From and Password will be the Gmail's account email id and password respectively because we are using Gmail's SMTP server.

\n

In the attachment, I have used the MediaTypeNames.Image.Gif, which is used for Gif Images. There are different constructors for the attachment class. For reference, you can read from here- Attachment Class. Attachments are not necessary to be passed. You can pass null in the SendMail method below.

\n

Headers are custom headers that will be sent with the email. It is not necessary to pass these headers. You can pass null in the SendMail method below.

\n

Step 15 - Add the below line of code to call the SendMail method of the class library.

\n
 Console.WriteLine(Mail.SendEMail(mailArgs, lstAttachments, true, dictHeaders).Item2);
\n

Note

\n

Here we have used Gmail's SMTP server to send emails (From Mail Address) so we have to enable the Less Secure Apps in our from mail address account by enabling Allow less secure apps else we will get the error from Gmail's SMTP server (The SMTP server requires a secure connection or the client was not authenticated. The server response was: 5.7.0 Authentication Required.)

\n

Conclusion

\n

In this article, we have learned about how to How to send emails through C#/.NET using SMTP. We have used the class library to initiate in the console app to send a mail to the particular emailId.The complete code for this blog can be found at Github Repo.

\n","frontmatter":{"date":"November 19, 2020","updated_date":null,"description":" In this article, we will learn how to send emails in .NET/C# using SMTP","title":"How to send emails in C#/.NET using SMTP","tags":[".NET","C#","SMTP"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3333333333333333,"src":"/static/00f36310a70961d9fef484d82409d136/14b42/coverimage.jpg","srcSet":"/static/00f36310a70961d9fef484d82409d136/f836f/coverimage.jpg 200w,\n/static/00f36310a70961d9fef484d82409d136/2244e/coverimage.jpg 400w,\n/static/00f36310a70961d9fef484d82409d136/14b42/coverimage.jpg 800w,\n/static/00f36310a70961d9fef484d82409d136/47498/coverimage.jpg 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hemant Manwani","github":"hemant404","avatar":null}}}},{"node":{"excerpt":"AWS EC2 is a virtual computing environment (known as instances) to develop and deploy applications. To create an EC2 instance in AWS, we…","fields":{"slug":"/engineering/ec2-instance-aws/"},"html":"

AWS EC2 is a virtual computing environment (known as instances) to develop and deploy applications. To create an EC2 instance in AWS, we need an active Amazon Web Services account.

\n

EC2 Dashboard

\n

First, let's login into our AWS account. Once login, we will land on the Management Console page, we can see all the AWS services.

\n

\n \n \n

\n

There is a drop-down on the top left corner, which is one more option to search and browse all the services provided by AWS. You can find EC2 under the Compute category.

\n

\n Mumbai region.

\n\n

There is a button Launch Instance to create a new instance in the selected region on the dashboard's bottom section.

\n

\n \n \n

\n

How to launch an EC2 Instance

\n

After clicking the Launch button, we need to select the Amazon Machine Image (AMI) it includes the operating system and applications required to launch an instance. Here we will select the Ubuntu Server 20.04 LTS as shown in the below snapshot.

\n

\n \n \n

\n

We can increase or decrease the size of instance storage while creating it; the free tier is eligible upto 30GB; if you need more storage, it will be billed according to Elastic Block Store (EBS) Pricing

\n

\n \n \n

\n

On the next screen, we can add tags to our instance and storage; these tags are key-value pair which are very useful to add properties to our resources, especially when we have multiple instances.

\n

\n \n \n

\n

We can define the firewall rules in a security group attached to our instance. With the help of these rules, we can control the traffic to our instance.

\n

\n \n \n

\n

Once we are done with firewall rules, we can review the complete detail of our new instance on a single page, and here we can click Launch button to launch the instance.

\n

\n \n \n

\n

When we click Launch, it will open a pop-up that will require you to select a pre-existing public-private key-pair or create one to connect to our instance securely. Once you select/download the key, you will be able to launch the instance.

\n

\n \n \n

\n

It will take approximately 5-10 min to launch the instance. Once launched, You can see the list of your running instances by clicking on the Instances button on the left menu.

\n

\n \n

git checkout master

\n

git cherry-pick neutron

\n

Once executed, our Git history will look like:

\n
alpha - beta - gama - delta - neutron  `Master`\n     \\\n       x - neutron - Ultraviolet `Feature`\n\t
\n

The neutron commit has been successfully picked into the feature branch.

\n

WHEN to use

\n

git cherry-pick is a useful tool but isn't best practice always. Cherry-picking can trigger duplicate commits, and traditional merges are preferred instead in many situations where cherry-picking would work. Git cherry-pick is a useful option for a few situations.

\n

Collaboration

\n

A team will often find individual members working in or around the same code sometimes. Perhaps there is a backend and frontend component of a new product feature. There may be some shared code between two sectors of the product. Perhaps the developer of the backend produces a data structure that will also need to be used by the frontend. In order to select the commit in which this hypothetical data structure was created, the frontend developer could use git cherry-pick. This selection would allow the developer of the front end to continue progress on their project side.

\n

Quick fixes

\n

When a bug is discovered, it is essential to fix that quickly as possible. For example, let's say a developer has started working on a new feature. During the development of a new feature, they find an existing bug. The developer creates an explicit commit to fix this bug. This new patch commit can be cherry-picked directly to the master branch to quickly fix the bug.

\n

Undo and restore commits

\n

A feature branch can often go stale and not be merged into a master. Often, without merging, a pull request might be closed. Git never sacrifices those commits, and they can be identified and cherry-picked back to life by commands such as git log and git reflog.

\n

Other options

\n

-edit\nPassing the -edit option causes git to trigger a commit message before the cherry-pick process is introduced.

\n

—no-commit\nThe —no-commit option executes the cherry-pick, but it transfers the contents of the target commit into the working directory of the current branch instead of making a new commit.

\n

—the-signoff\nThe —signoff option adds the signature line 'signoff' to the end of the cherry-pick commit message at the end.

\n

Git cherry-pick also accepts merge strategy options and conflict resolution as well. Please check the git merge strategy documentation.

\n","frontmatter":{"date":"November 17, 2020","updated_date":null,"description":"Introduction to Git Cherry-pick and its usages.","title":"How to use Git Cherry Pick","tags":["git"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/da6f791029e367a6d1f983172a08cc8a/14b42/cherrypck.jpg","srcSet":"/static/da6f791029e367a6d1f983172a08cc8a/f836f/cherrypck.jpg 200w,\n/static/da6f791029e367a6d1f983172a08cc8a/2244e/cherrypck.jpg 400w,\n/static/da6f791029e367a6d1f983172a08cc8a/14b42/cherrypck.jpg 800w,\n/static/da6f791029e367a6d1f983172a08cc8a/47498/cherrypck.jpg 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null}}}},{"node":{"excerpt":"Application Security is one of the primary concerns for a software developer. People trust your application and share sensitive or personal…","fields":{"slug":"/engineering/password-security-best-practices-compliance/"},"html":"

Application Security is one of the primary concerns for a software developer. People trust your application and share sensitive or personal information. As a software developer, you need to take care of your application user information security. Authentication and authorization both play critical roles in application security. They confirm the identity of the user and grant access to your website or application.

\n

The process in which confirm the user's identity and provides access to sensitive information is called authentication. Generally, authentication is done through the email/username/password. Authentication using the password is the older and common way, so passwords are a critical component of user's identity security. Password policy is the front line of defense to protect user identity. However, weak passwords may violate compliance standards. A simple or common password could be reversed engineered back to plaintext and sold on the dark web, or result in a costly data breach if compromised.

\n

Why We needed Password Policy & Compliance

\n

Password policies and compliance are rules and methods that enforce the user for using a secure and robust password. A billion credentials were stolen last year from multiple data breaches. According to Verizon's Data Breach Report, 81% of data breaches are caused by compromised, weak, and reused passwords. According to National Cyber Security Centre (NCSC) recent analysis, millions of peoples are using easy to guess passwords like 123456. Recently a security researcher claimed he hacked President Trump's tweeter account by guessing his password maga2020! so now we can understand the need for Password Policy & Compliance. You can check the top worst passwords list here.

\n

1. Minimum Password Age policy

\n

The Minimum password age policy is to decide how many days minimum users must keep a password before changing it. This password policy.

\n

2. Enforce Password History policy

\n

The \"Enforce password history\" policy is used to make sure the number of unique passwords a user must set before reusing an old password. This is an important policy because password reuse is a common issue – the user feels more comfortable with the old passwords. Using the same password for a long duration for a particular account, it will create a strong chance for the password compromised in some way, such as in a brute force attack. Password age policy shouldn't be efficient until the password history policy. Users must change their password, but they can reuse an old password; the effectiveness of a password age policy is greatly reduced.

\n

3. Minimum Password Length policy

\n

The Minimum Password Length policy decides the minimum number of characters needed to create a password. Minimum Password Length should be at least eight characters or more. Longer passwords are generally more secure and harder to crack than short ones. For even greater security, you could set the minimum password length to 14 characters.

\n

4. Passwords Must Meet Complexity Requirements policy

\n

The Passwords Complexity Requirements policy make sure user shouldn't use basic passwords. Passwords should be a combination of uppercase, lowercase, and numbers also include some special characters. We can set the following policies in the password Complexity Requirements.

\n\n

5. Common Password Protection

\n

The users shouldn't use the common passwords, so Restrict the use of common passwords. You can refer to this document for a common password list maintained by LoginRadius and this list is dynamic, and it gets updated from time to time.

\n

6. Dictionary Password Prevention

\n

A Password dictionary is a file that contains a list of potential passwords. This feature prevents your user's from setting a password available in the dynamic password dictionary. We are using this dynamic Password Dictionary in the LoginRadius to prevent the use of dictionary passwords.

\n

7. Password Audit policy

\n

Enabling the Password Audit policy allows you to track all password changes. By monitoring the modifications that are made, it is easier to track potential security problems. This helps to ensure user accountability and provides evidence in the event of a security breach.

\n

Password Compliance

\n

Password compliance is a set of rules to enhance user's data security by encouraging users to use strong passwords and use them properly.

\n

1. FDA (U.S. Food and Drug Administration)

\n

The FDA regulates the set of rules for the food, drugs, biologics, medical devices, electronic products, cosmetics, veterinary products, and tobacco products Industries.

\n

Passwords for FDA Industry Systems accounts must meet ALL of the following requirements:

\n\n

2. HIPAA (Health Insurance Portability and Accountability Act)

\n

The Health Insurance Portability and Accountability Act (HIPAA) enforce a set of rules for sensitive patient data protection. Companies that deal with protected health information (PHI) must ensure HIPAA compliance.

\n\n

3. PCI DSS (Payment Card Industry Data Security Standard)

\n

PCI is the set of rules or guidelines for the businesses that are dealing with payment card data.

\n\n

4. NIST (National Institute for Standards and Technology)

\n

NIST creates a set of rules or guidelines for the businesses that are providing services to the federal government. These guidelines to help federal agencies meet the requirements of the FISMA; however, other organizations reference NIST for strong security standards.

\n\n

Summary

\n

I have explained why we needed a strong password policy & compliance. It doesn't matter how strong a password you are using, but bad guys are using new methods or technologies for exposing the user data.\nMost of the data breaches are happing because of Common or weak passwords. MFA, passwordless, or one-time password are providing additional security for a user account.

\n

Source

\n

https://www.fda.gov/food/online-registration-food-facilities/random-password-generator-fda-industry-systems

\n

https://uwm.edu/hipaa/security-guidelines/#password

\n

https://pcipolicyportal.com/blog/pci-compliance-password-requirements-best-practices-know/

\n

https://spycloud.com/new-nist-guidelines/

\n","frontmatter":{"date":"November 12, 2020","updated_date":null,"description":null,"title":"Password Security Best Practices & Compliance","tags":["Security","Password","Compliance","Passowrd Policy"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/f1b48d682872b6c2f7aee16ea458d6ad/14b42/password-security.jpg","srcSet":"/static/f1b48d682872b6c2f7aee16ea458d6ad/f836f/password-security.jpg 200w,\n/static/f1b48d682872b6c2f7aee16ea458d6ad/2244e/password-security.jpg 400w,\n/static/f1b48d682872b6c2f7aee16ea458d6ad/14b42/password-security.jpg 800w,\n/static/f1b48d682872b6c2f7aee16ea458d6ad/47498/password-security.jpg 1200w,\n/static/f1b48d682872b6c2f7aee16ea458d6ad/ec6c5/password-security.jpg 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Vijay Singh Shekhawat","github":"code-vj","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.

\n

What does it mean for user authentication?

\n

On 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).

\n

On 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.

\n

In this article, we’ll discuss:

\n\n

How is User Authentication Affected?

\n

Third-party cookie restrictions affect user authentication in three ways, as follows.

\n

External Identity Providers

\n

If 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.

\n

Web SSO

\n

If 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.

\n

If 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.

\n

For 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.

\n

Federated SSO

\n

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.

\n

Usually, 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.

\n

For 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

Note: 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
\n

Chrome’s Alternatives for Third-Party Cookies

\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.

\n

Specific to authentication, Google recommends the following:

\n
    \n
  1. Cookies Having Independent Partitioned State (CHIPS)
    2. \n
  2. Storage Access API
    3. \n
  3. Related Website Sets
    4. \n
  4. Federated Credential Management (FedCM) API
    5. \n
\n

Cookies Having Independent Partitioned State (CHIPS)

\n

CHIPS 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.

\n

For 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.

\n

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.

\n

You should specifically opt for partitioned cookies (CHIPS), which are set with partitioned and secure cookie attributes.

\n

If you’re using an external identity provider for your application, CHIPS is a good option to supplant third-party cookie restrictions.

\n

However, 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.

\n

Storage Access API

\n

With 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.

\n

Storage 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.

\n

It is most suitable when loading cross-site resources and interactions, such as:

\n

Verifying 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.

\n

As 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.

\n

Related Website Sets

\n

With 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.

\n

Chrome automatically recognizes related website sets declared, accepted, and maintained in this open-source GitHub repository: Related Website Sets

\n

It provides access through Storage Access API directly without prompting for user approval, but only after the user interacts with the relevant iframe.

\n

It 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.

\n

The top-level site can also request approval for specific cross-site resources and scripts to Storage Access API using resuestStorageAccessFor() API.

\n

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.

\n

Related 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.

\n

Federated Credential Management (FedCM) API

\n

FedCM API enables federated SSO without third-party cookies.

\n

With FedCM API, a user follows these steps for authentication:

\n
    \n
  1. The User navigates to a Service Provider (SP) — aka., Relying Party (RP)
    2. \n
  2. As the user requests to authenticate, the SP requests the browser through FedCM API to initiate authentication.
    3. \n
  3. The browser displays a list of available identity providers (supported by the RP), such as social IdPs like Google, Apple, LinkedIn, and Facebook, or other OAuth IdPs like LoginRadius.
    4. \n
  4. Once the user selects an IdP, the browser communicates with the IdP. Upon valid authentication, the IdP generates a secure token.\nThe browser delivers this secure token to the RP to facilitate user authorization.
    5. \n
\n

You can access a user demo of FedCM here: FedCM.

\n

For more information about implementing federated SSO with FedCM API, go through the FedCM developer guide.

\n\n

Firstly, we’re committed to solving our customers' user identity pain points — and preparing for the third-party cookies phase-out is no different.

\n

We’ll implement the most relevant and widely useful solutions to facilitate a smooth transition for our customers.

\n

Please subscribe to our blog for more information. We’ll update you on how we help with the third-party cookie phase-out.

\n

In Conclusion

\n

The 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.

\n

Moreover, browsers like Firefox, Safari, and Edge may approach restricting third-party cookies differently than Google does.

\n

From 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.

\n

Glossary

\n

Top-level site: It is the primary site a user has visited.

\n

First-party cookie: A cookie set by the top-level site.

\n

Third-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.

\n

References

\n\n","frontmatter":{"date":"July 08, 2024","updated_date":null,"description":"Google Chrome has planned to phase out third-party cookies, which will affect different website functionalities depending on third-party cookies. This blog focuses on how this phase-out affects identity and user authentication and discusses alternatives for overcoming challenges.","title":"How Chrome’s Third-Party Cookie Restrictions Affect User Authentication?","tags":["Identity","Cookies","Chrome"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png","srcSet":"/static/eb7396060c0adc430dbed2d04b63d431/69585/third-party-cookies-phaseout-chrome.png 200w,\n/static/eb7396060c0adc430dbed2d04b63d431/497c6/third-party-cookies-phaseout-chrome.png 400w,\n/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png 800w,\n/static/eb7396060c0adc430dbed2d04b63d431/f3583/third-party-cookies-phaseout-chrome.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Raghunath Reddy","github":"raghunath-r-a","avatar":null}}}},"pageContext":{"limit":6,"skip":108,"currentPage":19,"type":"//engineering//","numPages":52,"pinned":"17fa0d7b-34c8-51c4-b047-df5e2bbaeedb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}