How to Avoid Catastrophic Backtracking and ReDos Attacks

Regular expressions or regex are widely used in web development for pattern matching and validation purposes. However, using them in practice comes with several security and performance risks that could open doors for attackers.

So, in this article, I will discuss two fundamental issues you need to be aware of before using regular expressions in JavaScript.

Catastrophic Backtracking

There are two regular expression algorithms out there,

  • Deterministic Finite Automaton (DFA) — Checks a character in a string only once.
  • Nondeterministic Finite Automaton (NFA) — Checks a character multiple times until the best match is found.

JavaScript uses the NFA approach in its…


How to Handle JavaScript Event Propagation Life Cycle

JavaScript event bubbling is there to capture and handle events propagated inside the DOM. But do you know, there are differences between event bubbling and capturing?

So, in this article, I will discuss all you need to know about the topic with relevant examples.

Understanding the Event Flow

Before jumping to bubbling and capturing, let’s find out how an event is propagated inside the DOM.

If we have several nested elements handling the same event, we get confused about which event handler will trigger first. This is where understanding the event order becomes necessary.

Usually, an event is propagated towards the target element starting…


JavaScript library that acts as a wrapper around WebRTC

Implementing peer-to-peer communication is a challenging task. But, if you know the correct tools, you can make it a whole lot easier.

So, in this article, I will discuss PeerJS, a JavaScript library that acts as a wrapper around WebRTC, making it easier to implement peer-to-peer communication in web applications.

How PeerJS Simplifies WebRTC?

When it comes to real-time P2P communication in web applications, WebRTC is the standard used by many developers. But, it comes with some complexities as follows;

  • If you use pure WebRTC, first, you define a STUN (Session Traversal Utilities for NAT) server to generate ICE (Interactive Connectivity Establishment) candidates for…


Different methods and best practices of using conditional attributes or props with React

Today, conditional attributes are widely used with React to provide dynamic behaviors. But, most developers are not aware of all the methods that can be used to implement them.

So, in this article, I will discuss different methods and best practices of using conditional attributes or props with React.

Rendering Conditional Attributes in React

Before moving to the implementation, we should understand how React’s underlying architecture renders conditional attributes.

In JavaScript, setting an attribute to a false value will cause that specific attribute to be removed from the DOM. …


Build cross-platform applications for Desktop, Mobile and Web

Since its initial release in 2017, Flutter gained massive popularity in the Mobile Development world. Flutter has proven its dominance with over 150,000 apps in Play Store alone. Personally, Flutter has never let me down as a Mobile Developer! But, what is so cool about Flutter 2?

With Google’s Flutter 2, developers can now target six different platforms: Android, iOS, Windows, macOS, Linux, and Web.

All you need is a single Dart codebase! Flutter 2 has made cross-platform app development much more straightforward. With this feature, Flutter can now be considered as a portable framework than a mobile framework. …


Create a web timeline component hands-on using CSS styles

Timelines have become a common feature in many web designs, and users find them very attractive. However, implementing these timelines is not that easy since clients always request something unique for their websites.

But you don't have to start everything by scratch if you have a basic foundation. So in this article, I will guide you through the steps to create a customizable horizontal timeline with pure CSS.

I’ve created the slider as an independent component and shared it with Bit. Feel free to examine it, install it, or import it into your own Bit workspace.


Using license-checker to find NPM dependency licenses

Thanks to NPM and the open-source community, developers can use plenty of external libraries for JavaScript development. But that doesn’t give us the freedom to use anything without considering their copyrights.

So, we should be aware of licensing models of the libraries we use. This article will show you a way to do a quick audit on your NPM dependencies using the license-checker NPM package.

Manual Method

As you already know, all NPM packages have their own licenses, and you can find these licenses inside the package itself in the node_modules directory.

When you go inside node_modules, there is a file named…


A practical guide in setting up HTTPS for both frontend and backend local development

Today using HTTPS to ensure a secure connection between the client and the server for web applications is necessary. But, most of the time, we hardly use HTTPS in local development servers. Sometimes it could lead to unexpected issues in your application.

This article will discuss why you should use HTTPS in a local development server and how you can integrate it into your project.

Why you Should use HTTPS Locally

Before getting to implementations, let's see why you should choose to go with HTTPS in local development servers.

Here are some common situations where it favors using HTTPS in your local development environment:

  • Using cookies…


Can We Remove Cookie Banners From Our Websites?

An HTTP Cookie is a small collection of data stored on your computer by the browser whenever you visit a website. Although these Cookies make your browsing experience more smooth and easier, there are claims that Cookies are intruding on users’ privacy.

Recently GitHub removed all non-essential Cookies from their website, claiming that they are committed to protect developer privacy.

As developers, we must be aware of when to use Cookies and the rules and regulations governing them.

In this article, I will discuss Cookie law, why GitHub removed Cookies, and what can we do to remove Cookie banners from…


How to restrict in-app navigation?

In your angular web application you might need to restrict access to certain pages for some users, or in other words you might be looking for a method to authenticate in-app navigation from client-side. This is where Angular Route Guards will make your life easy. Angular Route Guard is an interface which can be implemented to decide if a route can be activated. So, without further ado let’s dive in!

There are 5 types of guards in Angular namely CanActivate, CanActivateChild, CanDeactivate, Resolve and CanLoad.

Dulanka Karunasena

Mobile developer | Web developer https://dinno.page.link/dinno_playstore

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store