{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/105","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"One fairly popular question that got asked on programming bulletin boards has to do with the similarities and differences between React’s…","fields":{"slug":"/engineering/react-constructor-get-initial-state/"},"html":"

One fairly popular question that got asked on programming bulletin boards has to do with the similarities and differences between React’s constructor and the built in method getInitialState. While the simple answer to this question is indeed simple: “getInitialState is the ES5 friendly method to define the initial state of a React component,” there are a couple more details around getInitialState as well as React’s ES5 support that are interesting and useful to highlight.

\n

Constructor vs getInitialState: With or without Classes:

\n

One of the fundamental differences between ES5 and ES6 in regards to React implementation is the new class keyword. It allows definition of React components as classes, which is a familiar data structure for anyone who has had experience with more traditional object-oriented languages such as Java or C++. The class structure also allows for natural organization of the component’s elements like state, props, lifecycle methods and member functions. However, ES5 did not provide the same convenience. So instead of defining a React component as a class:

\n
class HelloWorld extends React.Component {\n  render() {\n    return <span>Hello World</span>;\n  }\n}
\n

You would rely on a helper module called create-react-class:

\n
var createReactClass = require('create-react-class');\nvar HelloWorld = createReactClass({\n  render: function() {\n    return <span>Hello World</span>;\n  }\n});
\n

And it is within the object passed into create-react-class that you could define an initial state by populating the getInitialState attribute:

\n
var HelloWorld = createReactClass({\n  getInitialState: function() {\n    return {name: this.props.name};\n  },\n  render: function() {\n    return <span>Hello {this.state.name}</span>;\n  }\n});
\n

Which, in ES6 implementation would be the equivalent of:

\n
class HelloWorld extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      name: props.name\n    }\n  }\n  render() {\n    return <span>Hello {this.state.name}</span>;\n  }\n}
\n

Autobinding

\n

One difference worth noting is that the create-react-class method automatically binds this to every attribute method. This no longer holds true if you define React components using the common ES6 class syntax, making it so that you have to manually bind this to internal methods:

\n
class HelloWorld extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      name: props.name\n    }\n\n    this.changeName = this.changeName.bind(this);\n  }\n  changeName() {\n    this.setState({ name: "World" });\n  }\n  ...\n}
\n

Or otherwise use the “arrow function” shorthand which takes care of binding:

\n
class HelloWorld extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      name: props.name\n    }\n  }\n  changeName = () => {\n    this.setState({ name: "World" });\n  }\n  ...\n}
\n

Parting Words

\n

Since the update to ES6, there have been multiple new React iterations. You could now forgo the constructor declaration altogether and just declare state inline as a class member, or utilize React Hooks as a new way to initialize states. However, the ES5 support remains useful for legacy systems and adds to the overall flexibility of React as a toolset.

\n

You can read more about React's ES5 support in the official doc entry here, and the v0.13.0 beta release blog entry here, for the respective ES6 changes.

\n","frontmatter":{"date":"January 05, 2021","updated_date":null,"description":"No ES6? No problem. getInitialState is the ES5 friendly method to define the initial state of a React component.","title":"Constructor vs getInitialState in React","tags":["JavaScript","React"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/4fcf496b1fdd8d1d7ae98e1ab30f19b6/ee604/index.png","srcSet":"/static/4fcf496b1fdd8d1d7ae98e1ab30f19b6/69585/index.png 200w,\n/static/4fcf496b1fdd8d1d7ae98e1ab30f19b6/497c6/index.png 400w,\n/static/4fcf496b1fdd8d1d7ae98e1ab30f19b6/ee604/index.png 800w,\n/static/4fcf496b1fdd8d1d7ae98e1ab30f19b6/efc77/index.png 865w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Nathan Nguyen","github":"nathannguyenn","avatar":null}}}},{"node":{"excerpt":"Engineering as marketing is an especially under-used medium, and when implemented correctly, it has proven to be very useful. It's under…","fields":{"slug":"/growth/engineering-as-marketing/"},"html":"

Engineering as marketing is an especially under-used medium, and when implemented correctly, it has proven to be very useful. It's under-used because it's very costly and can not suit traditional marketing or development plans. Imagine two weeks of iterations or tests where the critical route is to create a small project. It just doesn't work, either in terms of time or budget.

\n

Engineering as Marketing is about using your engineering time (or that of your team) to create useful resources such as calculators, checkers or checklists, widgets, and even micro-sites that bring potential customers in need of your company.

\n

In the long-term, producing tools that your target audience finds useful will do wonders for your business. Ideally, organizations should expand exponentially to make this tool free for their users.

\n

Here are some reasons why a business will produce high growth with free tools:

\n\n

Five Engineering as Marketing Strategies

\n

There are obstacles when it comes to engineering commercialization. It takes effort to develop and sustain an effective marketing plan for an engineering company, from selecting the correct tactics to writing the best sales copy.

\n

Digital marketing is a vital part of how an engineering company can be sold. This is how most individuals now find information: for almost all, including businesses to work with, they turn to the Internet. So you could struggle to attract potential leads if your engineering company is not well-represented or easy to find online. Not just that, you're going to lose them to your rivals.

\n

Create a more robust marketing approach with these five engineering marketing strategies for your engineering company:

\n

1. Create High-Quality Content

\n

The quality content, which can include anything from blog posts and videos to marketing guides and ebooks, is loved by search engines and social website users.

\n

You will hit the most eligible prospects as they are already looking online by producing and publishing useful material. And after finding helpful content posted by your business, people will be more likely to want to find more information about your engineering company.

\n

2. Utilize Social Evidence

\n

One of the most relevant and frequently ignored tips is to use data from close to your future customers but have started using your device and are super excited about it. People prefer to trust what other individuals have already learned and checked and have something useful to share. Only add a couple of constructive reviews and comments on the website, and your conversion rates will see a boost.

\n

Many B2B companies wonder why social media accounts should be started. Social media provides a perfect way to connect with current and future clients, regardless of the industry or business model.

\n

3. Leveraging SEO

\n

One of the easiest ways to boost your engineering company's online exposure is search engine optimization or SEO. It should be one of your top priorities when designing your overall marketing plan.

\n

SEO requires making improvements to specific items on your website to increase the probability that the phrases you are targeting will rank well. These improvements may include adding keywords to your page names, updating and adding copies to your site, quicker loading of your pages, enhancing the layout of your site, and so on.

\n

4. Launch an Email Newsletter

\n

Email newsletters are a perfect way to communicate with prospective customers, keep in contact with current customers, and improve your link with both groups. While past email marketing tactics may have included making hard sales pitches, and you may think of e-commerce emails as being about sales specials or discounts, it is all about adding value to engineering email marketing.

\n

5. The Power of Online Reviews

\n

An increasingly significant feature of marketing engineering services is online feedback. Reviews are the modern-day word of mouth counterpart, and a successful review will help the company attract new customers. On the opposite, your chances of attracting fresh customers can be hurt by not getting feedback.

\n

You should track your company's online feedback and respond to the questions people have about them. Try to take the feedback constructively and focus on improving any missed areas of your service.

\n

Conclusion

\n

You can incorporate a range of Internet marketing approaches with a little practice and some experimentation into a detailed strategy that increases your company's exposure and credibility, attracting more leads and inspiring more potential customers to select your company for their engineering needs.

\n

If it blends into the overall story with goal and vision, the use of resources that might already be available in the organization is promising. Marketing as Engineering is at the top of the funnel region in the marketing funnel.

\n

If you build the lead magnets so that they deliver a quick win and do not give too many possibilities to the consumer, you lay the foundation stone for throwing out a net in which you can attract the long-term attention of prospective customers to yourself.

\n

\n \n \n

\n","frontmatter":{"date":"January 05, 2021","updated_date":null,"description":"Engineering as Marketing is about utilising engineering time to build helpful tools such as calculators, checkers or checklists, widgets, and even micro-sites that introduce your business to potential customers.","title":"Engineering As Marketing: 5 Growth Hack Strategies For Modern Businesses","tags":null,"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/c5ead7bf487f0f76413f26ceeea4cad2/14b42/engineering-as-marketing.jpg","srcSet":"/static/c5ead7bf487f0f76413f26ceeea4cad2/f836f/engineering-as-marketing.jpg 200w,\n/static/c5ead7bf487f0f76413f26ceeea4cad2/2244e/engineering-as-marketing.jpg 400w,\n/static/c5ead7bf487f0f76413f26ceeea4cad2/14b42/engineering-as-marketing.jpg 800w,\n/static/c5ead7bf487f0f76413f26ceeea4cad2/47498/engineering-as-marketing.jpg 1200w,\n/static/c5ead7bf487f0f76413f26ceeea4cad2/0e329/engineering-as-marketing.jpg 1600w,\n/static/c5ead7bf487f0f76413f26ceeea4cad2/79d1b/engineering-as-marketing.jpg 4206w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.jpg"}}}},{"node":{"excerpt":"The North Star Metric was invented in business to give companies a singular emphasis on a single target. Everyone should still measure…","fields":{"slug":"/growth/north-star-metrics-nsm/"},"html":"

The North Star Metric was invented in business to give companies a singular emphasis on a single target. Everyone should still measure progress by whether or not they are progressing the organization using this metric instead of being distracted by day-to-day matters or individual projects.

\n

This article is the first in a series of deep dives on the North Star Metric. We hope it serves as a guide to why this metric matters, how to interpret it, and how to use it to drive the long-term product plan and development for product leaders and managers around the globe.

\n

A walk through of the article and topics we’ll cover:

\n
    \n
  1. What is a north star metric
    2. \n
  2. Benefits of north star metric (NSM)
    3. \n
  3. 6 Essential steps to choose your north star metric
    4. \n
  4. 7 examples of a good north star metric
    5. \n
  5. How to implement the north star metric (NSM)
    6. \n
\n

Let’s dive in!

\n

What is a North Star Metric?

\n

Companies use North Star Metric (NMS) as a focus for their growth. The North Star Metric came from Silicon Valley companies with explosive growth. It helps teams to look beyond the surface-level growth and concentrate on long-term customer and product growth.

\n

A north star metric must have these three factors:

\n\n

\n \n \n

\n

The metrics with the above factors and contributions from product teams for improvement provide sustainable company growth and improved user experience.

\n

Benefits of a North Star Metric (NSM)

\n

By now, it's understood that NSM is a metric to drive growth. Let’s see how this metric helps growth hackers and makes sure that the company grows:

\n\n

6 Essential Steps to choose your North Star Metric

\n

A good north star metric must indicate future success, and every product should have a north star metric. While the other key metrics like monthly revenue gives you an insight into what happened in the past rather than predicting future revenue.

\n

\n \n \n

\n","frontmatter":{"date":"January 05, 2021","updated_date":null,"description":"In industry, the North Star Metric was developed to give businesses a singular focus on a single objective. Instead of being distracted by everyday matters or individual tasks, everyone can always evaluate success by whether or not they are advancing the organisation using this metric.","title":"North Star Metric: 6 steps to discover your NSM","tags":null,"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/534f4b37c429182703558f2f3fe71062/14b42/north-star-metrics.jpg","srcSet":"/static/534f4b37c429182703558f2f3fe71062/f836f/north-star-metrics.jpg 200w,\n/static/534f4b37c429182703558f2f3fe71062/2244e/north-star-metrics.jpg 400w,\n/static/534f4b37c429182703558f2f3fe71062/14b42/north-star-metrics.jpg 800w,\n/static/534f4b37c429182703558f2f3fe71062/47498/north-star-metrics.jpg 1200w,\n/static/534f4b37c429182703558f2f3fe71062/0e329/north-star-metrics.jpg 1600w,\n/static/534f4b37c429182703558f2f3fe71062/4a461/north-star-metrics.jpg 2560w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Archna Yadav","github":null,"avatar":null}}}},{"node":{"excerpt":"The marketing funnel's very last step includes some sign-up process if you want to increase your conversion rate, generate leads, or make a…","fields":{"slug":"/growth/sign-up-tips-conversion-rate/"},"html":"

The marketing funnel's very last step includes some sign-up process if you want to increase your conversion rate, generate leads, or make a sale. But, just because you got them this far doesn't mean that if your type isn't optimized at least as well as the rest of the funnel, your prospects won't bolt in a second.

\n

When using your sign up forms, the following tips will help you maximize your prospects' experience and plug in the leaks that arise so frequently at the critical endpoint of your funnel.

\n

Your sign-up form should be transparent and quick to understand. Avoid using confusing areas that frustrate users. When they fill out the form, tell the users what to do, don't wait until they have made a mistake. Near the area, put specific instructions so that they understand what they have to do.

\n

9 mantras to increase your sign up rates:

\n
    \n
  1. Reduce the number of fields for the form
    2. \n
  2. Create a secure sign-up form
    3. \n
  3. Using Signup Popup Forms
    4. \n
  4. Add live chat to your site
    5. \n
  5. Allow social signups
    6. \n
  6. Be creative with sign-up CTAs
    7. \n
  7. A/B testing for CTAs
    8. \n
  8. Distraction free Signup experience
    9. \n
  9. Show clear Value prop
    10. \n
\n

Let's dive in!

\n

1. Reduce the number of fields for the sign-up form

\n

You need to make the signup forms as short as possible to convert the users.

\n

If these forms are lengthy and need so much data to be completed, individuals may not take the time to fill them out.

\n

Shorter forms are not only easier to fill out, but the visitor is also less intrusive.

\n

Longer forms need more details. But the visitor to the website may be unwilling to provide you with any information about themselves.

\n

\n \n

2. Create a secure sign-up and registration form

\n

Many developers and website owners overlook the value of providing a safe login form on websites. The incompetence of these web developers can cause a lot of harm to their guests without understanding the dangers of their actions.

\n

Securing a login form for any website may seem like a tiny move towards web security. Still, users get a negative impression of the safety of the website without taking this step. On the opposite, you are rewarding user perceptions regarding web protection by securing a website's login type.

\n

The key here is as much as possible to lower the barrier to entry. You don't want your guests to worry about it until they've agreed to sign up. An unsafe sort of website is a chance to change their minds.

\n

To find the best balance between customer experience and protection, the LoginRadius Identity Platform provides a full range of customer registration and authentication options.

\n

\n \n \n

\n

Source: moreconversion

\n

3. Using Signup Popup Forms

\n

Your conversion rate will be Skyrocket by one shift. To get the highest conversion rate from them, here are some few tips:

\n\n

This combination will provide you with a massive conversion boost and keep your complaints to zero. You're not going to bother anybody, and you get all the perks.

\n

4. Add live chat to your site.

\n

Items and their characteristics often confuse consumers. Offering options in real-time helps speed up their purchase decisions. When interacting with a real person, this is particularly true.

\n

Customers want to feel listened to, and that's just what it brings to live chat. Rapidly addressing challenges in a tailored manner leaves clients happy and positively affects their purchase decisions.

\n

On any platform, live chat tools are simple to add and have an instant boost to your versions, just like a pop-up.

\n

5. Allow social logins

\n

For users, social login is easy to use and improves the conversion rate for registrations.

\n

Nevertheless, with social sign-up, the user's privacy is again in the spotlight. Most of them do not realize that, with this registration form, they agree to the use of their data by businesses. An opportunity that companies take to sell the product that best fits their preferences and desires to each customer, in a much more segmented and customized way.

\n

\n \n \n

\n

Few advantages of using social signups:

\n\n

6. Be creative with sign-up CTAs.

\n

One of the most critical sections of your sign-up forms is your CTA button. It should attract the attention of the consumer and motivate them to take a specific action. From the form's background color, pick a bright color contrast.

\n

Make sure it has a simple value proposition when writing a copy of your sign-up button. Using \"Book a free demo\" or \"start your free trial\" instead of using just a simple \"sign up\" or \"download\" button. The subsequent copy explains to the customer what they can get when they sign up.

\n

7. A/B testing for CTAs

\n

Your CTA button is one of the essential parts of your sign-up forms. Signup form CTAs are the ideal candidate for a/b testing.

\n

You can evaluate several different components of a CTA, such as:

\n
    \n
  1. Dimension
    2. \n
  2. Placement
    3. \n
  3. Colour
    4. \n
  4. Fonts
    5. \n
  5. Text
    6. \n
\n

Having small modifications can have a significant effect on your conversions. Make sure that you measure only one item at a time.

\n

If your A/B checks have been completed, you can rest assured that your CTA signup form is designed for high conversions.

\n

8. Distraction Free Signup experience

\n

Building a high-converting form has always been difficult, even though most of the web's traffic was from the desktop, one that eliminates friction by making it very easy. The share of smartphone users has overtaken the desktop in recent years, creating an additional degree of complexity for designers who now have to build forms with a mobile-first mindset. It comes with its own special collection of issues to conceptualise a signup experience for a smaller screen.

\n

Speed in UX is crucial when it comes to forms, too. Users do not want to bother with tedious types, nor do they feel like typing their passwords from scratch, especially where it is harder to do so on mobile devices.

\n

9. Show clear Value prop

\n

One of the most critical sections of your sign-up forms is your CTA button. It should attract the attention of the consumer and motivate them to take a specific action.

\n

Make sure it has a simple value proposition when writing a copy of your sign-up button. Using \"claim your free trial\" or \"start your free demo\" instead of using just a simple \"sign up\" or \"download\" button. The subsequent copy explains to the customer what they can get when they sign up.

\n

Conclusion

\n

Following the tips and examples shown in this article is your next move. If you can get it right, you can build better sign-up forms for conversion and increase the number of quality leads created.

\n

\n \n \n

\n","frontmatter":{"date":"January 05, 2021","updated_date":null,"description":"It should be clear and easy to understand your sign-up form. Avoid using undefined fields that frustrate users. Your next step is to follow the tips and examples shown in this article. If you can get it right, better conversion sign-up forms can be developed and the amount of quality leads produced can be increased.","title":"9 Signup Tips To Skyrocket The Conversion Rate","tags":null,"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.6,"src":"/static/edd68e06d3b48bea04c157d4bde4f9ab/14b42/sign-up-rate.jpg","srcSet":"/static/edd68e06d3b48bea04c157d4bde4f9ab/f836f/sign-up-rate.jpg 200w,\n/static/edd68e06d3b48bea04c157d4bde4f9ab/2244e/sign-up-rate.jpg 400w,\n/static/edd68e06d3b48bea04c157d4bde4f9ab/14b42/sign-up-rate.jpg 800w,\n/static/edd68e06d3b48bea04c157d4bde4f9ab/47498/sign-up-rate.jpg 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.jpg"}}}},{"node":{"excerpt":"In JavaScript, web workers allow developers to benefit from parallel programming. Parallel programming enables various computations to be…","fields":{"slug":"/engineering/web-workers/"},"html":"

In JavaScript, web workers allow developers to benefit from parallel programming. Parallel programming enables various computations to be performed at the same time by applications.

\n

Web Workers are a browser feature that allows scripts to be executed on a separate thread from the main execution thread of your web application. This allows the main thread of your web application to run without being blocked by slow scripts in your application.

\n

Isn't JavaScript already asynchronous?

\n

Well, sort of. This has been something that had confused me many a time when I was initially learning about JavaScript. JavaScript a synchronous, single-threaded language. However, JavaScript has features that allow you to execute asynchronous code, which is handled by browser engines (on your client) or by your OS (in NodeJS), which are capable of executing code in multiple threads.

\n

We work with asynchronous methods in JavaScript by either using callbacks, Promises or async/await. We'll use Promises as an example for exploring asynchronicity in JavaScript.

\n

Promises are proxies for values that are not yet available when the Promise is created. This lets you organize parts of your code to run when the value becomes available or if something goes wrong.

\n

This does not mean that your code is running asynchronously. As I mentioned before, JavaScript code is executed on a single thread. The callback that processes the response from your created Promises still runs on your single main thread. Promises do, however, allow you to spawn asynchronous tasks, such as file I/O or making an HTTP request which runs outside of your code. This allows your main thread to work on something else while waiting for these tasks to return a response. This means that the callback functions which run after a response is received are called asynchronously.

\n

I feel that the distinction between your code running asynchronously vs. being called asynchronously is important, as you will see that you are not able to perform computationally expensive tasks without blocking your main thread, even when using Promises.

\n

Here is an example of using an expensive function (finding prime numbers) wrapped in a Promise.

\n
function findPrimeNumbers(max) {\n    return new Promise((resolve) => {\n        console.log("starting findPrimeNumbers");\n        let primes = [];\n        for (let i = 0; i < max; i++) {\n            if (i === 0 || i === 1) {\n                continue;\n            }\n            let isPrime = true;\n            for (let y = 2; y < i; ++y) {\n                if (i % y === 0) {\n                    isPrime = false;\n                    break;\n                }\n            }\n            if (isPrime) {\n                primes.push(i);\n            }\n        }\n        console.log("prime numbers found");\n        resolve(primes);\n    });\n}\n\nconsole.log("a");\nfindPrimeNumbers(100000).then(() => {\n  console.log("b");\n});\nconsole.log("c");
\n

You'll find that the above program will print the following:

\n
a\nstarting findPrimeNumbers\nprime numbers found\nc\nb
\n

The ordering of a, b, and c is not particularly noteworthy, as we already know that the callback for the findPrimeNumbers function will only execute after the main thread has nothing left to do, after printing c.

\n

What I did find interesting was that the statement printing c waits until the findPrimeNumbers function completes before being executed. To prevent functions like this from blocking the main thread, we'll have to use Web Workers.

\n

Web Workers run in a separate thread altogether, with no access to the context of the main thread. Data is sent between the worker and the main thread using a system of messages: the postMessage() method is used to send a message from one to the other, and the onmessage event handler is used to receive and respond to messages.

\n

First we need to create the script (we'll just call it find-prime-numbers.js) that the Web Worker will run:

\n
onmessage = (event) => {\n  const { data } = event;\n  const primes = findPrimeNumbers(parseInt(data));\n  postMessage(primes);\n};\n\nfunction findPrimeNumbers(max) {\n    console.log("starting findPrimeNumbers");\n    let primes = [];\n    for (let i = 0; i < max; i++) {\n        if (i === 0 || i === 1) {\n            continue;\n        }\n        let isPrime = true;\n        for (let y = 2; y < i; ++y) {\n            if (i % y === 0) {\n                isPrime = false;\n                break;\n            }\n        }\n        if (isPrime) {\n            primes.push(i);\n        }\n    }\n    console.log("prime numbers found");\n    return primes;\n}
\n

The onmessage handler receives an event with the message itself contained in the event's data attribute. Here we execute the findPrimeNumbers() function again, and use postMessage() function to send the result back to the main thread.

\n

Over in your main script, we'll create a worker object using the constructor new Worker(), which runs the named JavaScript file containing the code that we just wrote, which will run in the worker thread.

\n
const primeNumberWorker = new Worker("./find-prime-numbers.js");\nprimeNumberWorker.onmessage = (event) => {\n    console.log("b");\n};\n\nconsole.log("a");\nprimeNumberWorker.postMessage("100000");\nconsole.log("c");
\n

Running this script will print the following:

\n
a\nc\nstarting findPrimeNumbers\nprime numbers found\nb
\n

You can see that this time, the prime numbers function is actually running on a thread separate from our main one, which allows the main thread to continue printing the statement c while the worker thread works out its own response.

\n

When should you use JavaScript Web Worker

\n

To reiterate, Web Workers allow you to run your own code on a separate thread, which allows your main thread to continue rendering the UI, receive user input, etc., while your worker thread processes a response.

\n

For most web applications, the most expensive operations in your code will often be I/O, interacting with resources in your network. Thanks to JavaScript's Event Loop, these are already offloaded from your main thread to your system's operating system. As such, there is no need for Web Workers when making these kinds of operations.

\n

If you need to process large sets of data, there is a decent chance that you will be able to perform this on your server-side before sending it to your front end client for display to the user. This will allow you to rely on JavaScript's event loop to prevent these expensive operations from blocking your main thread.

\n

However, if your scenario must have these long-running tasks running on your client end, Web Workers would be an ideal solution for your needs. Some examples of these could be:

\n\n

Javascripty Web Worker Limitations

\n

As Web Workers work on a separate thread, it has no access to the parent page, which calls it. This means that the worker itself cannot manipulate the DOM nor access any data stored within it. It is not able to access the browser's localStorage and sessionStorage either. You are limited to the data sent directly via postMessage or IndexedDB for accessing stored client data.

\n

As with anything multithreaded, adding Web Workers into your application will add complexity to your application. Natively, postMessage is the only direct line of communication between threads. You will need to define how more complex workflows will be managed between your main thread and worker thread (such as error handling).

\n

If your worker can be triggered multiple times, each request will simply be queued and will run when the previous has been completed. For more complex queuing mechanisms, you would have to define this yourself.

\n

Conclusion

\n

With discussions dating back a decade, Web Workers are not a new feature. Despite their powerful potential, they haven't been widely adopted. Client side applications, for the most part, just haven't needed to perform intensive tasks where Web Workers would have been a solution. In addition, with a lack of widespread use, finding relatable examples to reference when implementing them is an extra barrier for adoption.

\n","frontmatter":{"date":"December 28, 2020","updated_date":null,"description":"Learn how to use JavaScript web workers to create parallel programming and execute multiple operations concurrently rather than interconnecting them.","title":"Web Workers in JS - An Introductory Guide","tags":["Web Workers"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/a17120a4316c8564d40dee1e652c0641/ee604/unsplash.png","srcSet":"/static/a17120a4316c8564d40dee1e652c0641/69585/unsplash.png 200w,\n/static/a17120a4316c8564d40dee1e652c0641/497c6/unsplash.png 400w,\n/static/a17120a4316c8564d40dee1e652c0641/ee604/unsplash.png 800w,\n/static/a17120a4316c8564d40dee1e652c0641/f3583/unsplash.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Nick Chim","github":"nickc95","avatar":null}}}},{"node":{"excerpt":"A website is incomplete without a contact form. Depending on the company’s requirements, there are several implications where they may be…","fields":{"slug":"/identity/bot-attacks/"},"html":"

A website is incomplete without a contact form. Depending on the company’s requirements, there are several implications where they may be added. For example, they may be included as a permanent element or used as a sudden appearing pop-up on websites.

\n

It is no surprise that the contact form attracts a lot of bot attacks. Hackers not only create false traffic, resulting in damages to brand images, it also results in malicious attacks on websites. The objective of this blog is to help you to secure contact form.

\n

We will explore the various methods that can be used to prevent bots from submitting forms and not fall into a random audacious attack.

\n

What Is a Spambot?

\n

\n \n \n

\n

A spambot is a malicious program or unethical activity specially designed to gather email addresses or information from contact forms. It is usually done by sending spam emails.\nAs emails have a distinct structure, a bot creation process is easy for hackers. Hence, you need to be extra cautious while using contact forms for your website or important marketing campaigns.

\n

Here are some proven ways that will help your secure contact forms from spambots.

\n

12 Best Ways to Stop Bots From Filling Out Forms

\n

1. “Add Google reCAPTCHA.”

\n

One of the most common ways to stop bots from filling up your form is to add CAPTCHA to the contact form. It offers an intelligent program that ensures that users who are filling out forms are actually humans.\nThe process is simplified by Google with reCAPTCHA and can be used as a protective practice against bots. However, this is not a silver bullet but effective against basic bots. Also, you might be sacrificing some bit of user experience for security

\n

2. “Secure contact forms using a double opt-in form.”

\n

Double opt-in forms make the signup process more secure and help to create spam-free contact forms. For example, it will send a confirmation link to your email address when you enter the email address. Humans generally feel comfortable with the process, but bots skip this step.

\n

3. “Add a test question to your contact form.”

\n

Add some tricky questions to your form that are easy to understand by humans, but confuse the bots. However, make sure you put some common questions; otherwise, it may frustrate your potential subscribers.

\n

4. “Add Honeypots.”

\n

Honeypots are hidden fields that are added to the user registration form to prevent bots from submitting forms. Users cannot see these, but bots can detect them. In this way, if the information is provided for that hidden field, it alerts you that a spambot is trying to fill the form. This unseen field can be programmed using CSS or HTML.

\n

5. “Implement time-analysis.”

\n

This is again a great way to identify spammers since humans usually will take some time to fill out all the fields of a form while bots can do it instantly. So, measuring the time taken to fill a form can be helpful when finalizing your contact list.

\n

\n \n \n

\n

6. \"Hide target request.\"

\n

Since bots target sensitive information, these should not be made available from the browser side. These can be added from your server-side, to which no one will have access.\nUse the form as just a medium to collect the information. If the data is not taken through the browser, you can protect your data easily. You can also make your form more secure if you allow only one signup from one IP address.

\n

7. \"Form validation after geolocation of the IP address.\"

\n

You can also control the location from which the contact forms are being filled. For example, if you have been witnessing a lot of spam activities from a particular location/country or IP address, you can permanently block such addresses or geolocations.

\n

8. Use a web application firewall.

\n

By adding a web application firewall, it is possible to manage severe attacks and prevent bots from spamming your forms.

\n

9. Blacklist IPs and limited IP addresses.

\n

If you notice some suspicious activities from a particular IP address, don’t hesitate to block it permanently. Another option is to set a limit for each IP. For example, you might allow only ten forms to be filled from each IP address.

\n

10. Beware of Cross-Site Request Forgery (CSRF).

\n

A CSRF or XSRF attack usually focuses on executing an operation in a web application on behalf of the user but without consent. To prevent such an event from happening, make sure that the request you receive is from the server and that it is a legitimate one.

\n

A popular approach to know that the request sent is valid is to use a CSRF token, which stores the value of the matching token on the server. You can also adopt the double submit cookie approach in which the server stores the matching token value in the form of a cookie. The server then checks this value with the hidden field value when it receives a request.

\n

11. Validate email addresses and phone numbers.

\n

It can be fairly easy to determine whether the email submitted in the form is linked to a working inbox or not by using an email address validation API. This will also tell you whether the email has engaged in any abusive behavior.\nSince bots will use invalid email IDs most of the time, verifying the email addresses can give a good layer of protection to your site against bots.

\n

12. Block copy and paste in your forms.

\n

Another way to prevent contact form spam is to disable the right-click functionality. Your contact forms will only be secured from human spammers who copy and paste their details into your forms. You would also have the added advantage of keeping anyone from stealing content from anywhere on your platform.

\n

Stay Rest Assured with LoginRadius

\n

LoginRadius offers all the options mentioned above to secure contact forms from spam or fake signups. The consumer identity and access provider also offers world-class security for consumers to ensure that their data is safe during login, registration, password setup, and any other data touchpoints.\nThe CIAM platform is a powerhouse of open source SDKs, pre-designed and customizable login interfaces, and robust data security products such as MFA, RBA, and Advanced Password Policies.

\n

\n \n \n

\n

Final Words

\n

Spambots will not go anywhere so soon. Take your time and learn to implement these strategies to make things easier for you in the long-run. It demands a lot of effort and practice to implement these ideas, but the result is worth it.

\n

\n \n \n

\n","frontmatter":{"date":"December 24, 2020","updated_date":null,"description":"It is no surprise that the contact form attracts a lot of bot attacks. Hackers not only create false traffic, but also result in malicious attacks on websites. The objective of this blog is to help you to secure contact form from random audacious attacks.","title":"How To Secure Your Contact Form From Bot Attacks","tags":["data security","ciam solution","cx"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":2,"src":"/static/5311b4c6c298fc095f42c5e9cbcc80c0/33aa5/bot-attacks.jpg","srcSet":"/static/5311b4c6c298fc095f42c5e9cbcc80c0/f836f/bot-attacks.jpg 200w,\n/static/5311b4c6c298fc095f42c5e9cbcc80c0/2244e/bot-attacks.jpg 400w,\n/static/5311b4c6c298fc095f42c5e9cbcc80c0/33aa5/bot-attacks.jpg 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.jpg"}}}}]},"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":624,"currentPage":105,"type":"///","numPages":161,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}