{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/127","result":{"data":{"allMarkdownRemark":{"edges":[{"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":"

Overview

\n

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.

\n

Have 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?

\n

Chances are there if you are a react developer, Hopefully we can solve this using the Hooks.

\n

What are Hooks?

\n

Hooks 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

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

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

\n

The key takeaway maybe this:

\n
\n

If 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
\n

Benefits of React Hooks

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

\n

Advantages of react hooks:

\n\n

A Practical View

\n

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

\n

Let us assume we have a simple class component and then we will convert it to a functional with hooks and see the difference.

\n

Component without Hook: Class Component

\n
import 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;
\n

Components with Hook:Functional Component:

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

If you disagree with any of the above, you can play with it in practice. I’m sure that would change your mind!

\n
\n

Basics Of React Hooks

\n

Let us understand some basic hooks with examples.

\n
    \n
  1. useState()
    2. \n
  2. useEffect()
    3. \n
\n

I will take one example and will explain all the hooks in that example using a various scenarios.

\n

useState()

\n
import 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;
\n

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.

\n
this.state = {\n    message: "Hi there, how are you?"\n}
\n
\n

If you are wondering about the setMessage @line 3 then be calm, I will explain later in this tutorial

\n
\n

useEffect()

\n

React useEffect() function can be executed in 3 different React component life cycles that are

\n
    \n
  1. componentDidMount
    2. \n
  2. componentDidUpdate
    3. \n
  3. componentWillUnmount
    4. \n
\n

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.

\n
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;
\n

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.

\n

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.

\n

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

\n
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;
\n

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.

\n

For eg : [state.message] here hook will fire on the update of message variable only.

\n

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

The Rules of Hooks

\n
    \n
  1. Hooks can only be called at the Top Level, it can't be called inside the loops or condition or nested functions.
    2. \n
  2. Hooks can only be called in the React Function or Custom Hooks, never use hooks in the regular javascript function.
    3. \n
\n
\n

We can use eslint-plugin-react-hooks this eslint plugin that ensures the above two rules.

\n
\n

Conclusion

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

\n

I 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/48f1a9f24091fba7929dcb79ec13b4fe/58556/react-hooks.webp","srcSet":"/static/48f1a9f24091fba7929dcb79ec13b4fe/61e93/react-hooks.webp 200w,\n/static/48f1a9f24091fba7929dcb79ec13b4fe/1f5c5/react-hooks.webp 400w,\n/static/48f1a9f24091fba7929dcb79ec13b4fe/58556/react-hooks.webp 800w,\n/static/48f1a9f24091fba7929dcb79ec13b4fe/99238/react-hooks.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Mohammed Modi","github":"mohammed786","avatar":null}}}},{"node":{"excerpt":"If enterprise mobile apps are the future of businesses, we are already living in the future. With the growing popularity of technologies…","fields":{"slug":"/identity/securing-enterprise-mobile-apps/"},"html":"

If enterprise mobile apps are the future of businesses, we are already living in the future. With the growing popularity of technologies like 5G, blockchain, AI, and machine language, more and more companies are integrating their corporate processes with mobile platforms.

\n

Some of these primary capabilities include the management of security, IT infrastructure, content, salesforce, human resource, business intelligence (BI), billing system, and product catalogs.

\n

No doubt, mobile applications are gradually becoming a staple in enterprises. 

\n

With all the good that's going around, it is crucial that we flip and try to see through the other side of the scenario.

\n

Latest Threats in the Enterprise Mobile App Security

\n

Mobile will take over the enterprise software universe very soon. Almost three-quarters of internet users (that sums up to 72.6 percent) will use mobile to access the web by 2025. 

\n

No wonder, businesses of all sizes are making the shift towards enterprise mobile apps.

\n

What could go wrong? It turns out, a lot. Even a well-established enterprise can fail spectacularly—with respect to security—when they take on mobile.

\n

Zimperium's 2019 State of Enterprise Mobile Security findings below highlights the nuances:

\n\n

Mobile App Security Threats That You Should Take Seriously in 2020 

\n

Mobile security is at the epicenter of an enterprise's concern today. After all, nearly all employees now regularly access corporate data on mobile. You need to keep confidential information out of the wrong hands, and that's an intricate puzzle in itself.

\n

Following are the major threats security teams need to deal with:

\n

Improper Session Handling: Most applications use tokens to allow users to perform multiple actions without re-authenticating their identity every time. Improper session handling happens when apps involuntarily exchange session tokens (for example, with the bad guys), they can exploit the website and the corporate network, altogether.

\n

Insecure data storage: There are many vulnerable places in an application where data can be stored: binary data stores, SQL databases, and cookie stores are a few. Majority of these vulnerabilities are triggered by the OS, frameworks, and compilers involved. Often, the poor storage of data results from inadequate processes to manage device gallery and data cache.

\n

\"Enterprise

\n

Improper encryption: Encryption is the method of translating data into an unreadable code that is only usable with the secret key after it has been re-translated. Therefore, it is important to evaluate how easy or difficult it might be to crack your application's secret code. This is a common vulnerability that hackers exploit with code and intellectual property theft, leading to privacy violations, and damage to reputation.

\n

Mobile ad fraud: With the amount of revenue generated by mobile advertising every year, it is no surprise that cybercriminals are after all the cash that can be duped from mobile ad revenue streams. One of the most common types of ad fraud is using malware to generate fraudulent clicks on ads that appear to come from real uses. Ad fraud malware often runs in the background and can overheat the battery, incur high data charges, and make users lose millions of dollars.

\n

Human error from remote workers: Human error is perhaps one of the most commonly observed cybersecurity threats. Despite the steady rise in mass media reporting of cybersecurity accidents, the non-technical population still lacks basic security knowledge. Your responsibility as an enterprise owner is to educate employees on mobile security threats and prevent cybercriminals from accessing a device or network.

\n

Features of a Secured Enterprise Mobile Application

\n

A holistic approach to security for mobile devices is regarded as an essential part of a security ecosystem. Keeping data storage and application management at the center, here's what the entire ecosystem looks like.

\n

\n

Securing Mobile Apps Using LoginRadius' Secured Platform

\n

\n

LoginRadius, a consumer identity and access management (CIAM) solution, offers a comprehensive approach to protecting enterprise mobile applications. While human error is unavoidable, the platform is an all-in-one solution for all mobile security needs. Some of the features include:

\n

Identity management 

\n

The most efficient mobile security involves intelligent device identification. This describes the emergence and development of identity and access management services like LoginRadius, which offers a host of advantages: 

\n\n

Multi-factor authentication (MFA)

\n

MFA is ideally a kind of authentication granted on the server-side and is available after successful authorization. LoginRadius ensures that all user data is encrypted and accessed only after all credentials are successfully validated. Moreover, it creates different authentication tokens for different devices.

\n

Adaptive mobile security

\n

LoginRadius takes an integrated approach when it comes to responding to mobile threats. It offers a thread of risk management and information security features to prevent cyberattacks or upcoming mobile app vulnerabilities from happening.

\n

Data security

\n

LoginRadius defends user data by profoundly analyzing the issue that may exist and produces defense strategies accordingly. It keeps you well-informed about how different operating systems, external APIs, platforms, and enterprise mobile frameworks store and transfer their data. 

\n

Conclusion 

\n

Sadly, very few companies have a well-secured management policy, while still a lot of others lack absolute power.  

\n

Enterprise mobile app security is the need of the hour. Businesses must consider the changing state of cybersecurity and mobility when implementing the above-mentioned protection tips to secure their devices. 

\n

\"Book-a-demo-loginradius\"

\n","frontmatter":{"date":"August 07, 2020","updated_date":null,"description":"We are already living in the future as corporate mobile applications are the future of companies. More and more businesses are combining their organisational processes with mobile networks with the the popularity of innovations such as 5 G, blockchain, AI , and machine language.","title":"Securing Enterprise Mobile Apps with LoginRadius","tags":["security"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.408450704225352,"src":"/static/899394e76907ff847d314a89b6ded679/7f8e9/Secure-Enterprise-Mobile-App.webp","srcSet":"/static/899394e76907ff847d314a89b6ded679/61e93/Secure-Enterprise-Mobile-App.webp 200w,\n/static/899394e76907ff847d314a89b6ded679/1f5c5/Secure-Enterprise-Mobile-App.webp 400w,\n/static/899394e76907ff847d314a89b6ded679/7f8e9/Secure-Enterprise-Mobile-App.webp 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}},{"node":{"excerpt":"Overview Each business relies on a specific target set of users, who has a problem area. Analysis and further finding out the right solution…","fields":{"slug":"/engineering/design-led-thinking/"},"html":"

Overview

\n

Each business relies on a specific target set of users, who has a problem area.

\n

Analysis and further finding out the right solution for the identified problem hence helps businesses to meet their target user’s needs.

\n

If the solution meets the needs completely and resolves the pain area, at the right time, acts as an ointment and proves and builds trust for businesses.

\n

Design Thinking plays an important role to reiterate the understanding of problems, causes, environmental changes leading innovation and experimentation for a competitive advantage.

\n

How to define a problem for the business problem with DESIGN THINKING

\n

\"Design

\n
    \n
  1. Empathise the emotions\nObservation of user needs with past and market trends and economic forecasts. It includes interaction with the target user to hear and see the user’s desire and the real cause within the contextual area.
    2. \n
  2. \n

    Define the problem - based on\n5 W’s- who, what, where, why, when

    \n
      \n
    1. Why-What user needs?
      2. \n
    2. What is the pain area of the problem?
      3. \n
    3. When the problem arises?
      4. \n
    4. Who-For whom the problem exists?
      5. \n
    5. Where-What are the driving aspects of the problem which increases the problem impact- like legal compliance?
      6. \n
    \n
    3. \n
  3. \n

    Ideation - Design Thinking solutions

    \n\n
    4. \n
  4. \n

    User Experience - prototype

    \n\n
    5. \n
\n

5.Testing of design and solution

\n

Match the solution ideas demonstrated via designs to target users, to make sure every detail of the solution chosen matches the requirements and observations made.

\n
    \n
  1. Evaluate and reiterate the solution for measuring user needs.
    2. \n
\n

New Design Thinkings VS Traditional Business Thinking

\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\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\n\n\n\n\n\n\n\n\n
CriteriaDesign ThinkingTraditional Problem Solving
NatureVisual Thinking ProcessOld traditional documented process
Initial StageObservation, based on Emotional intelligenceProblem Defining, based on intelligence
Based Depends onExperiment, Innovation based on user needsBased on founders vision
Focussed OnWhat People needsBusiness model
User meansReal HumansCustomers
Solution ProposalRestricts proposing solutions within the problem definition stage.Includes proposing solutions while problem understanding
Future ScopeVisualize the future of business organization via innovation thinking, via releasing products before actual development.Rework and re-iteration with improvement are supported to reach final product deliverable.
MeaningDiscovery of what WORKS.So encourages Multiple POSSIBLE answersDiscovery of what is RIGHT = CORRECT solution.
ApproachBased on storytelling following a bottom-up approachBased on facts and figures, based on top-down approach
Testing with real usersUser is unaware that he is in test mode and experiences the service he expects to perceive. Example- ability to customize furniture without buying.User is well aware that he is using test services and does not expect much.
PhaseThere is no planning, instead there exists building of Prototypes and presenting fast to get feedback without delaying the GO-TO market.Follows conventions process of THINKING and PLANNING
FailureFailure Driven- learn from failure and read to fail anytime as the cost associated is low. FAIL EARLY- FAIL FASTFailure Restrictor- Tries to avoid failure, to avoid huge money loss involved.
\n

How is it useful for business Organizations?

\n
    \n
  1. Real-Time- Feedback from the end-user is instant and does not take months to develop.
    2. \n
  2. Low Cost- Just involves a small team, rather than a big team, processes, roles, etc.
    3. \n
  3. Prototype instead of Planning- providing better visual experience to users instead of lengthy documents to analyze a viable solution.
    4. \n
  4. Leads to EXPERIMENTS, INNOVATIONS of -\n-Experience\n-Emotions\n-Processes\n-Features or functionality
    5. \n
\n

Successful Case Studies

\n
    \n
  1. \n

    Pepsico design-led problem-solving\nFor female user experience, it released a new line of Doritos in china in a stack of the tray and packaged in a canister, instead of a snack bag, so that women can use it opening the drawer and push it back when done, as they don't like other to notice them munching.

    \n

    Ref: How Indra Nooyi Turned Design Thinking Into Strategy

    \n
    2. \n
  2. \n

    Samsung’s design-led innovation\nIt realized the need of Korean and Japanese business users who had common practice to note or schedule events or important points in small pocket-sized notebooks, This led to an innovative idea where the user was observed and the need was created and hence realized to users.\nSamsung launched a successful Galaxy Note series. with the innovation of “smart diary” a 5.5-inch interface with a stylus pen to pair.

    \n

    Ref: How Samsung Became a Design Powerhouse

    \n
    3. \n
  3. \n

    Samsung design concept used for experimenting\nWhere it experimented with TV units, realizing the fact that users are spending more time on furniture, so TV ‘s are supposed to be a bit more attractive. This led to the radical change for the speaker’s positioning at the TV sets to be hidden at the bottom instead of the traditional side panes. This has experimented in the European market first and after a successful adaption, Samsung experimented more with visual appearance and by the time it was building the product, it had already sold a million units.

    \n

    Ref: How Samsung Became a Design Powerhouse

    \n
    4. \n
  4. IBM - It got an ROI of 301 %, by investing in Design Thinking services which can be experienced at IBM
    5. \n
  5. \n

    Stanford Hospital for improvement\nIt worked on improving the experience of a patient within the emergency room and for staff to serve patients a better way

    \n

    Ref: What Is Design Thinking and Design Thinking Process?

    \n
    6. \n
\n

Last but not least

\n

It is very important to drive and extract meaningful images out of the observations from real humans.\nThis requires an influencing processor who can drive the team to opt for an approach for DESIGN THINKING. Here even the market leaders are at risk to sustain with innovations and experiments involved with Early FAILURES.

\n","frontmatter":{"date":"August 06, 2020","updated_date":null,"description":"Design thinking is a solution-oriented, iterative process where the team creates the design while keeping the end customers in mind. This blog guides you about how does design-led thinking works.","title":"DESIGN THINKING -A visual approach to understand user’s needs","tags":["Design","Design Thinking","UX"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/110edfa95f48f0a46a297c46621f3040/58556/design_led_thinking.webp","srcSet":"/static/110edfa95f48f0a46a297c46621f3040/61e93/design_led_thinking.webp 200w,\n/static/110edfa95f48f0a46a297c46621f3040/1f5c5/design_led_thinking.webp 400w,\n/static/110edfa95f48f0a46a297c46621f3040/58556/design_led_thinking.webp 800w,\n/static/110edfa95f48f0a46a297c46621f3040/99238/design_led_thinking.webp 1200w,\n/static/110edfa95f48f0a46a297c46621f3040/135cd/design_led_thinking.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Deepali Soni","github":null,"avatar":null}}}},{"node":{"excerpt":"Audience: Anyone who wishes to deliver secure code to the rest of the world. Answer to What it is? At the heart of any image scanning tool…","fields":{"slug":"/engineering/container-security-scanning/"},"html":"

Audience: Anyone who wishes to deliver secure code to the rest of the world.

\n

Answer to What it is?

\n

At the heart of any image scanning tool is static analysis against a “Common Vulnerabilities and Exposures” (CVE) database. Each layer within the container image is analyzed and queried to discover known vulnerabilities.

\n

In addition to vulnerability scanning, a comprehensive tool should compare the architecture of your application against best practices to identify potential vulnerabilities.

\n

Answer to Why it is important?

\n

While tools like Kubernetes and Container Registries have become household names for developer community because these tools make their life much easier to develop and deploy applications, many are still catching up on the need to integrate container security tools to secure their containerized application throughout the container lifecycle. As the world is already shifted to containerized applications, taking good care of you docker images is also equally important.

\n

One of the main unique features of containers is how layers are used to build a container image. A service is piled up with an application server layer, a Linux layer and so on. One of these layers is updated, we can rebuild the application with a new updated version.

\n

It would be an unthinking idea to get into a container-based strategy without integrating a well-grounded and inclusive container scanning security solution into the CI/CD setup.

\n

What are the factors to keep in mind while selecting the right tool?

\n\n

Let's get Implemented.

\n

I am here, implementing a Clair tool in gitlab-ci.yml to get secure docker images.

\n
image_scanning:\n  stage: scan\n  image: docker:stable\n  tags:\n    - gitlab-org-docker\n  services:\n    - docker:19.03.8-dind   \n  variables:\n    DOCKER_DRIVER: overlay2\n  allow_failure: true\n  before_script:\n    - echo $CI_BUILD_TOKEN | docker login -u $CI_REGISTRY_USER --password-stdin $CI_REGISTRY\n  script:\n  - docker run -d --name db arminc/clair-db:latest\n  - docker run -p 6060:6060 --link db:postgres -d --name clair --restart on-failure arminc/clair-local-scan:v2.0.1\n  - apk add -U wget ca-certificates\n  - docker pull $CI_REGISTRY_IMAGE:$PROJECT_NAME-latest || true\n  - wget https://github.com/arminc/clair-scanner/releases/download/v8/clair-scanner_linux_amd64\n  - mv clair-scanner_linux_amd64 clair-scanner\n  - chmod +x clair-scanner\n  - touch clair-whitelist.yml\n  - while( ! wget -q -O /dev/null http://docker:6060/v1/namespaces ) ; do sleep 1 ; done\n  - retries=0\n  - echo "Waiting for clair daemon to start"\n  - while( ! wget -T 10 -q -O /dev/null http://docker:6060/v1/namespaces ) ; do sleep 1 ; echo -n "." ; if [ $retries -eq 10 ] ; then echo " Timeout, aborting." ; exit 1 ; fi ; retries=$(($retries+1)) ; done\n  - ./clair-scanner -c http://docker:6060 --ip $(hostname -i) -r gl-container-scanning-report.json -l clair.log -w clair-whitelist.yml $CI_REGISTRY_IMAGE:$PROJECT_NAME-latest || true\n  - cat gl-container-scanning-report.json\n  artifacts:\n    paths: [gl-container-scanning-report.json]\n  rules:\n    - if: '$CI_COMMIT_BRANCH == "staging"'\n      when: always
\n

gitlab-org-docker is a GitLab shared-runner to run this analysis (an agent on which the above-described job will run), it will fetch the latest ms image and will run it against the CVE database, at last record the report in the JSON file which we can store as artifacts. These artifacts can be further used by the developer to see and resolve the vulnerabilities.

\n","frontmatter":{"date":"August 04, 2020","updated_date":null,"description":"At the heart of any image scanning tool is static analysis against a “Common Vulnerabilities and Exposures” (CVE) database. Each layer within the container image is analyzed and queried to discover known vulnerabilities.","title":"Deep Dive into Container Security Scanning","tags":["Docker","Container","Security"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5625,"src":"/static/3420a61c66e126bfa00855959eeb5a57/58556/cover_container_security.webp","srcSet":"/static/3420a61c66e126bfa00855959eeb5a57/61e93/cover_container_security.webp 200w,\n/static/3420a61c66e126bfa00855959eeb5a57/1f5c5/cover_container_security.webp 400w,\n/static/3420a61c66e126bfa00855959eeb5a57/58556/cover_container_security.webp 800w,\n/static/3420a61c66e126bfa00855959eeb5a57/99238/cover_container_security.webp 1200w,\n/static/3420a61c66e126bfa00855959eeb5a57/7c22d/cover_container_security.webp 1600w,\n/static/3420a61c66e126bfa00855959eeb5a57/25f09/cover_container_security.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rashmi Jain","github":null,"avatar":null}}}},{"node":{"excerpt":"Before You Get Started This tutorial assumes you have: A basic understanding of Go Language Latest GoLang version installed on your system A…","fields":{"slug":"/engineering/sending-emails-with-golang/"},"html":"

Before You Get Started

\n

This tutorial assumes you have:

\n\n

In this blog, we’ll look at different methods to send an email with Go, First, we will explore inbuilt smtp package, then we will move to use a popular package Gomail and finally, we will send HTML emails using custom templates.

\n

Package smtp

\n

smtp is an inbuilt package provided with Golang. It implements the Simple Mail Transfer Protocol and has multiple functionalities related to it. Here to send the email we will be using only two functions PlainAuth and SendMail from the package.

\n
\n

Note: Click here for an overview on Go Functions

\n
\n\n

Below is the complete code to send a plain text email with smtp package in golang.

\n
package main\n\nimport (\n  "fmt"\n  "net/smtp"\n)\n\nfunc main() {\n\n  // Sender data.\n  from := "from@gmail.com"\n  password := "<Email Password>"\n\n  // Receiver email address.\n  to := []string{\n    "sender@example.com",\n  }\n\n  // smtp server configuration.\n  smtpHost := "smtp.gmail.com"\n  smtpPort := "587"\n\n  // Message.\n  message := []byte("This is a test email message.")\n  \n  // Authentication.\n  auth := smtp.PlainAuth("", from, password, smtpHost)\n  \n  // Sending email.\n  err := smtp.SendMail(smtpHost+":"+smtpPort, auth, from, to, message)\n  if err != nil {\n    fmt.Println(err)\n    return\n  }\n  fmt.Println("Email Sent Successfully!")\n}
\n
\n

In the above code example we have used smtp details of a Gmail account, you should update the smtp detail according to your email provider.

\n
\n
\n

Just to explain things easily, In the above snippet, we have written all the smtp and email credentials in the main function, Though in a production app you should always use env variables for configurations. You can check Viper to manage configurations in production apps.

\n
\n

Package Gomail

\n

Below is the complete code to send a plain text email with Gomail package in golang.

\n
package main\n\nimport (\n  "crypto/tls"\n  "fmt"\n\n  gomail "gopkg.in/mail.v2"\n)\n\nfunc main() {\n  m := gomail.NewMessage()\n\n  // Set E-Mail sender\n  m.SetHeader("From", "from@gmail.com")\n\n  // Set E-Mail receivers\n  m.SetHeader("To", "to@example.com")\n\n  // Set E-Mail subject\n  m.SetHeader("Subject", "Gomail test subject")\n\n  // Set E-Mail body. You can set plain text or html with text/html\n  m.SetBody("text/plain", "This is Gomail test body")\n\n  // Settings for SMTP server\n  d := gomail.NewDialer("smtp.gmail.com", 587, "from@gmail.com", "<email_password>")\n\n  // This is only needed when SSL/TLS certificate is not valid on server.\n  // In production this should be set to false.\n  d.TLSConfig = &tls.Config{InsecureSkipVerify: true}\n\n  // Now send E-Mail\n  if err := d.DialAndSend(m); err != nil {\n    fmt.Println(err)\n    panic(err)\n  }\n\n  return\n}
\n

Custom HTML Templates

\n

Now, let's send an HTML email with smtp package, for this, we need to create two files in the root folder.

\n\n
<!-- template.html -->\n<!DOCTYPE html>\n<html>\n<body>\n    <h3>Name:</h3><span>{{.Name}}</span><br/><br/>\n    <h3>Email:</h3><span>{{.Message}}</span><br/>\n</body>\n</html>
\n

We are using text/template package to parse HTML files and use it in smtp SendMail function.

\n
package main\n\nimport (\n  "bytes"\n  "fmt"\n  "net/smtp"\n  "text/template"\n)\n\nfunc main() {\n\n  // Sender data.\n  from := "from@gmail.com"\n  password := "<Email Password>"\n\n  // Receiver email address.\n  to := []string{\n    "sender@example.com",\n  }\n\n  // smtp server configuration.\n  smtpHost := "smtp.gmail.com"\n  smtpPort := "587"\n\n  // Authentication.\n  auth := smtp.PlainAuth("", from, password, smtpHost)\n\n  t, _ := template.ParseFiles("template.html")\n\n  var body bytes.Buffer\n\n  mimeHeaders := "MIME-version: 1.0;\\nContent-Type: text/html; charset=\\"UTF-8\\";\\n\\n"\n  body.Write([]byte(fmt.Sprintf("Subject: This is a test subject \\n%s\\n\\n", mimeHeaders)))\n\n  t.Execute(&body, struct {\n    Name    string\n    Message string\n  }{\n    Name:    "Puneet Singh",\n    Message: "This is a test message in a HTML template",\n  })\n\n  // Sending email.\n  err := smtp.SendMail(smtpHost+":"+smtpPort, auth, from, to, body.Bytes())\n  if err != nil {\n    fmt.Println(err)\n    return\n  }\n  fmt.Println("Email Sent!")\n}
\n

Once done you need to run below command to send the emails

\n
go run main.go
\n
\n

If you don't want to create your custom HTML emails, Hermes is a package that generates clean, responsive HTML e-mails for sending transactional e-mails.

\n
\n

Now you can send beautiful emails to the customer by your golang application, You can found the complete code used in this blog on our Github Repo

\n","frontmatter":{"date":"August 03, 2020","updated_date":null,"description":"In this blog, we’ll look at different methods to send an email with Go, First we will explore inbuilt smtp package, then we will move to use a popular package Gomail and finally we will send HTML emails using custom templates.","title":"Different ways to send an email with Golang","tags":["Go","Email"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/8c5f2a8ca4c0d8c2e442b0b5b909e070/58556/email_cover.webp","srcSet":"/static/8c5f2a8ca4c0d8c2e442b0b5b909e070/61e93/email_cover.webp 200w,\n/static/8c5f2a8ca4c0d8c2e442b0b5b909e070/1f5c5/email_cover.webp 400w,\n/static/8c5f2a8ca4c0d8c2e442b0b5b909e070/58556/email_cover.webp 800w,\n/static/8c5f2a8ca4c0d8c2e442b0b5b909e070/99238/email_cover.webp 1200w,\n/static/8c5f2a8ca4c0d8c2e442b0b5b909e070/7c22d/email_cover.webp 1600w,\n/static/8c5f2a8ca4c0d8c2e442b0b5b909e070/685a2/email_cover.webp 1800w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Puneet Singh","github":"puneetsingh24","avatar":null}}}},{"node":{"excerpt":"Snapshot Testing Snapshot tests as the name implies, is a very powerful tool to test whether you the UI has change or not. A typical…","fields":{"slug":"/engineering/snapshot-testing-using-nightwatch-and-mocha/"},"html":"

Snapshot Testing

\n

Snapshot tests as the name implies, is a very powerful tool to test whether you the UI has change or not. A typical snapshot test case for a website/mobile app renders a UI component, takes a snapshot, then compares it to a reference snapshot file stored alongside the test.

\n

Snapshot Testing Benefits

\n

For QA Manual And Automation

\n\n

For Developer Unit Testing

\n\n

Need to install NPM

\n
    \n
  1. npm i mocha
    2. \n
  2. npm i clean-html
    3. \n
  3. npm i snap-shot
    4. \n
  4. npm i jsdom
    5. \n
  5. npm i jsdom-global
    6. \n
\n
\n

NightWatch does not have snapshot feature. So, We will use mocha to take snapshots. But Mocha will be run by NightWatch.

\n
\n

Directory Structure

\n

As per over automation project. We have created a \"snapshot\" folder under the \"test\" folder and we will be following the same structure as per the below project menu bar.

\n

\"N|Solid\"

\n

We also need to add Mocha test files, which will use to take snapshot and store under the root folder \"__snapshots__\".

\n

\"(https://cdn.filestackcontent.com/XGkI0wDrQoGDSp2djINg)\"

\n

If you are running automation code via visual code editor, then you can setup a launch.json file which helps you to debug your test code with all file/individual file.

\n

You can see the settings below of the launch.json file.

\n

\"(https://cdn.filestackcontent.com/qDjAHwHIQtKp2hmBdaEn)\"

\n
\n

Update Snapshot

\n

After creating a snapshot, sometimes we need to update snapshot due to improvement, customer requirements, and any valid changes on UI. So here, we can have some other settings which will help us.

\n
    \n
  1. \n

    If we want to update all snapshots by single command then we need to follow below instruction.

    \n

    Create a root folder file(update_snapshot.js) and paste code on it.

    \n
    (function(){\n      process.env.UPDATE\\=1;\n})()
    \n

    Add in package.json

    \n

    \"(https://cdn.filestackcontent.com/TTvchMDTW6F5x87J0688)\"

    \n
    2. \n
\n
\n

We can update all snapshot by using → npm run snapshot-u

\n
\n
    \n
  1. If we want to update the single snapshot then we can use the above technique but we just need to update the file name against \"test/snapshot\".
    2. \n
  2. \n

    If we use vscode, then we need to update launch.json as per above information

    \n

    \"(https://cdn.filestackcontent.com/uWX0pIUaSzKFyVKJGIYB)\"

    \n

    and need to create a file(\"snapshot.config.js\") in the root folder and paste the below code.

    \n

    \"(https://cdn.filestackcontent.com/Hh3PNxKmSo2pSFRA9YeM)\"

    \n
    3. \n
\n
\n

Important-: If we want to run only a snapshot test then we will need a small change in the nightwatch.json file.

\n
\n

\"(https://cdn.filestackcontent.com/EkBrPZffRv2ElZ0Qez36)\"

\n

You can find the complete reposrtory link here

\n","frontmatter":{"date":"July 29, 2020","updated_date":null,"description":"Snapshot testing is one of many different testing tools, which compares the previous and current snapshot. Unlike TDD, snapshot testing relies on the fact that your component renders correctly already. ","title":"Snapshot testing using Nightwatch and mocha","tags":["QA","Nightwatch","snapshot-testing"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/858d55e4f691f5e5780be7675877f12d/58556/snapshot_nightwatch.webp","srcSet":"/static/858d55e4f691f5e5780be7675877f12d/61e93/snapshot_nightwatch.webp 200w,\n/static/858d55e4f691f5e5780be7675877f12d/1f5c5/snapshot_nightwatch.webp 400w,\n/static/858d55e4f691f5e5780be7675877f12d/58556/snapshot_nightwatch.webp 800w,\n/static/858d55e4f691f5e5780be7675877f12d/99238/snapshot_nightwatch.webp 1200w,\n/static/858d55e4f691f5e5780be7675877f12d/135cd/snapshot_nightwatch.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Nitesh Jain","github":"niteshjain1987","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.webp"}}}},"pageContext":{"limit":6,"skip":756,"currentPage":127,"type":"///","numPages":164,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}