Get to know the benefits of using the BFF pattern in practice
Imagine a scenario where you need to build an e-Commerce application using microservices. You may have microservices for Customers, Orders, Products, Shopping carts, etc. The microservices expose APIs to be used by the frontend.
However, the data returned to the frontend by the Microservices may not be formatted or filtered according to the exact way the frontend needs to represent them.
In that case, the frontend needs to have some logic on its own to re-format these data. Having such logic in the frontend will use up more browser resources.
In a situation like this, we can use a BFF…
These features will change the way you work with Material UI
As a frontend engineer, Material-UI is my favorite styling option for React Components. Its sleek design and elegance made it stand out from the rest.
That being said, I recently found some interesting facts about Material-UI while using it in practice. In this article, I want to bring those into your light as I found them very interesting.
Pre-requisite: Familiarity with Material-UI basics will be beneficial to fully grasp the content of this article.
1. Automatic color changes
Whether you build a website or a mobile application, having a dark mode is crucial for modern applications. …
Protecting against DOM XSS security vulnerabilities in JavaScript
Have you heard of DOM XSS attacks? For those of you who haven’t,
DOM XSS attacks are where the hacker attack payloads are executed as a result of modifying the DOM environment in the browser.
This makes the client-side code run unexpectedly. Therefore, the vulnerability exists in the client-side code. Attackers make use of instances where they can inject harmful payload into your code to make these attacks possible. This is an injection attack.
DOM XSS injections can happen in various ways. Some of these are as follows.
- Setters for
Elementattributes that accept a URL of the code to…
Using Cypress in practice for combined test scenarios for improved productivity
Introduction
Software test automation is a mature area today. We can find various tools and practices that help us to automate testing for long-term maintainability.
Nowadays, we are also looking into different strategies to make test automation more productive.
Having front-end and API testing together is one such strategy that I found quite useful.
This article will focus on using Cypress for API and end-to-end testing while providing detailed insights on how to use it in your projects.
Pre-requisite: Basic knowledge about Cypress and how to write tests in Cypress.
What is end-to-end testing?
End-to-end testing (also known as E2E) checks whether an application is…
Building a robust eco-system to enforce code quality with JavaScript
Ensuring code quality is very important for a maintainable and scalable application. But how can we enforce these quality standards?
Well, with JavaScript, you can use ESLint to define coding conventions and use Prettier for consistent code formatting. If you have these two configured, the first step is complete.
Now that we have standards in place, how do we enforce them? This is where Husky comes to play. Husky is used to enforcing standards in Git-based projects. …
WebHID, WebNFC, and WebUSB have opened up new avenues to interact with user’s device hardware for web apps.
Have you ever come across the need to access a user’s device hardware and implement a desktop application only for that feature? You are not alone. Until recently, the way to achieve the above would have been far-fetched and cumbersome. However, with recent Chrome DevTools updates, talking to hardware using JavaScript has become a reality.
So, in this article, I would be introducing three new JavaScript APIs, namely WebHID, WebNFC, and WebUSB became available for device hardware access. Let’s look at each of these technologies separately.
1. What is WebHID?
One major problem developers face when integrating an HID (Human Interface Device) into software…
These practices will help to secure your JavaScript execution
JavaScript is used everywhere today. It runs in your browser as well as in your backend. Besides, JavaScript is a highly dependent ecosystem on third-party libraries. Therefore, securing JavaScript requires following best practices to reduce the attack surface.
But, how do we keep JavaScript applications secure? Let’s find out.
1. JavaScript Integrity Checks
As a frontend developer, you may have used <script> tags to import third-party libraries. Have you thought about the security risks of doing so?
What if the third-party resource has been tampered with?
Yes, these are things that can happen when you render external resources on your site. …
Creating virtual reality experiences using JavaScript
Virtual Reality (VR) experiences with React? 😮
Is this really possible? YES, it is. With the introduction of React 360, it is now possible to create virtual reality experiences using JavaScript.
How VR is Used in Devices Nowadays
Before looking at what React 360 is, let me give a quick recap of how VR is used in devices nowadays. VR is a trending topic at present, where most games and entertainment focus on VR to provide an exceptional user experience.
The introduction of React 360 brings hope for the UIs of the future for broad adoption, literally providing a 3D and VR experience for modern web applications.
…
Find out the different features of few IDEs suitable to code JavaScript
Every developer has a favorite IDE. I do as well. (I’ll reveal my personal favorite at the end of this article 😃)
How do we choose which IDE is best for development? Well, the features of an IDE do come into play for this choice. But all in all, it sums down to a very subjective choice of each developer’s preference.
Let’s have a look at some of the best IDEs for JavaScript development in 2021.
1. Visual Studio Code
Using Workbox with Webpack to Generate Service Workers
During the past few years, Service Workers emerged to fill the void of background script execution in JavaScript.
With the increasing adoption of Service Workers, many tools and libraries emerged to improve developer productivity. Out of these, one such library is Workbox.
The Workbox
Workbox brings all the best Service Worker creation practices into a single place while removing typical boilerplate work. Besides, you can use it in three different ways.
- Command-line interface — Can be integrated into any application.
- Node.js module —Can use with any build tool such as gulp.
- Webpack plugin — Integrates with projects that use Webpack.
This article…
