{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/109","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"How does bitwise ^ (XOR) work? XOR is a bitwise operator, and it stands for \"exclusive or.\" It performs logical operation. If input bits are…","fields":{"slug":"/engineering/how-does-bitwise-xor-work/"},"html":"

How does bitwise ^ (XOR) work?

\n

XOR is a bitwise operator, and it stands for \"exclusive or.\" It performs logical operation. If input bits are the same, then the output will be false(0) else true(1).

\n

XOR table:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
XYX^Y
000
011
101
110
\n

Example: 4^3 = 7

\n
In binary: \n\t     0100\n\t   ^ 0011\n\t    ------\n Result: 0111  => (7)
\n

XOR with negative numbers

\n

Let's understand with an example -4^-2 = 2\nIn the above example, we can see -4^-2output will be 2\nbut the question arises how? Because if we represent both inputs in the binary form, then we do XOR of bits, then the output will be 0000 0110 and in decimal, it will be 6 but as we know output should be 2.

\n
  1000 0100 (-4)\n^ 1000 0010 (-2)\n------------------\n  0000 0110 => (6) // incorrect output
\n
\n

Note: Here, the leftmost bit position is reserved for the sign of the\nvalue (positive or negative) and doesn't contribute towards the value of the number.

\n
\n

Let's understand how the XOR operation works with negative numbers.

\n
How XOR operation works with negative numbers?
\n

First, the XOR operation is to XOR each bit (the same is 0, the difference is 1), but you need to convert the number into a complement first.

\n
    \n
  1. The complement of a positive number is itself
    2. \n
  2. \n

    The complement of the negative number is reversed for each bit and then incremented by 1 (the highest is kept at 1)

    \n
    // Lets take -4\nIn binary: \t\t\t1000 0100\nReverse: \t\t\t1111 1011\ncomplement (Increment by 1): \t1111 1100
    \n
    3. \n
\n

// Now -2\nIn binary: \t\t\t1000 0010\nReverse: \t\t\t1111 1101\ncomplement (Increment by 1): \t1111 1110

\n

Final result:

\n
complement of -4 : 1111 1100\ncomplement of -2 : 1111 1110\n                  -----------\nResult:            0000 0010 \t=> 2
\n

Here, the MSB bit of result will denote the sign, and the rest of the bits will denote the value of the final result.\nXOR sign table could be useful to understand the sign of result:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
XYX^Y
+++
+--
-+-
--+
\n

The above approach will work with negative inputs, but if we have positive and negative, then?

\n
How XOR operation works with positive and negative numbers?
\n

Let's performs -5 ^ 2\nFollow the same above approach to get a complement code of -5.

\n
complement of -5 :          1111 1011\n// Note: complement of a positive number is itself\ncomplement of 2 :           0000 0010  \ncomplement result:          1111 1001\n\nNow, complement result -1 : 1111 1000\n                           -----------\nFinal result(inverse code): 1000 0111   => -7
\n

Some interesting use cases of XOR operator

\n\n","frontmatter":{"date":"November 24, 2020","updated_date":null,"description":"Everything you should know about bitwise ^ xor operator.","title":"How does bitwise ^ (XOR) work?","tags":["bitwise","XOR"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/6918df91209eb3e5939b47bc7ec1d346/ee604/xor.png","srcSet":"/static/6918df91209eb3e5939b47bc7ec1d346/69585/xor.png 200w,\n/static/6918df91209eb3e5939b47bc7ec1d346/497c6/xor.png 400w,\n/static/6918df91209eb3e5939b47bc7ec1d346/ee604/xor.png 800w,\n/static/6918df91209eb3e5939b47bc7ec1d346/f3583/xor.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kheenvraj Lomror","github":"rajlomror","avatar":null}}}},{"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}}}}]},"markdownRemark":{"excerpt":"Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards…","fields":{"slug":"/identity/developer-first-identity-provider-loginradius/"},"html":"

Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards and refining approaches to building secure, seamless experiences.

\n

We’re here to support developers on that journey. We know how important simplicity, efficiency, and well-structured documentation are when working with identity and access management solutions. That’s why we’ve redesigned the LoginRadius website—to be faster, more intuitive, and developer-first in every way.

\n

The goal? Having them spend less time searching and more time building.

\n

What’s New and Improved on the LoginRadius Website?

\n

LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve spent the last few months redesigning our interface— making navigation more intuitive and reassuring that essential resources are easily accessible.

\n

Here’s a closer look at what’s new and why it’s important:

\n

A Developer-Friendly Dark Theme

\n

\"This

\n

Developers spend long hours working in dark-themed IDEs and terminals, so we’ve designed the LoginRadius experience to be developer-friendly and align with that preference.

\n

The new dark mode reduces eye strain, enhances readability, and provides a seamless transition between a coding environment and our platform. Our new design features a clean, modern aesthetic with a consistent color scheme and Barlow typography, ensuring better readability. High-quality graphics and icons are thoughtfully placed to enhance the content without adding visual clutter.

\n

So, whether you’re navigating our API docs or configuring authentication into your system, our improved interface will make those extended development hours more comfortable and efficient.

\n

Clear Categorization for LoginRadius Capabilities

\n

\"This

\n

We’ve restructured our website to provide a straightforward breakdown of our customer identity and access management platform capabilities, helping you quickly find what you need:

\n\n

This structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem.

\n

Developer-First Navigation

\n

\"This

\n

We’ve been analyzing developer workflows to identify how you access key resources. That’s why we redesigned our navigation with one goal in mind: to reduce clicks and make essential resources readily available.

\n

The new LoginRadius structure puts APIs, SDKs, and integration guides right at the menu bar under the Developers dropdown so you can get started faster. Our Products, Solutions, and Customer Services are also clearly categorized, helping development teams quickly find the right tools and make informed decisions.

\n

Quick Understanding of Integration Benefits

\n

\"This

\n

Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs.

\n

Our platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks.

\n

Over to You Now!

\n

Check out our revamped LoginRadius website and see how the improved experience makes it easier to build, scale, and secure your applications.

\n

Do not forget to explore the improved navigation and API documentation, and get started with our free trial today. We’re excited to see what you’ll build with LoginRadius!

\n","frontmatter":{"date":"February 21, 2025","updated_date":null,"description":"LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve redesigned our website interface, making navigation more intuitive and reassuring that essential resources are easily accessible.","title":"Revamped & Ready: Introducing the New Developer-First LoginRadius Website","tags":["Developer tools","API","Identity Management","User Authentication"],"pinned":true,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7857142857142858,"src":"/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp","srcSet":"/static/80b4e4fbe176a10a327d273504607f32/61e93/hero-section.webp 200w,\n/static/80b4e4fbe176a10a327d273504607f32/1f5c5/hero-section.webp 400w,\n/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp 800w,\n/static/80b4e4fbe176a10a327d273504607f32/99238/hero-section.webp 1200w,\n/static/80b4e4fbe176a10a327d273504607f32/7c22d/hero-section.webp 1600w,\n/static/80b4e4fbe176a10a327d273504607f32/1258b/hero-section.webp 2732w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.jpg"}}}},"pageContext":{"limit":6,"skip":648,"currentPage":109,"type":"///","numPages":161,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}