Setup Image Comparison Service of WDIO to make UI Testing more impactful

This blog helps to configure visual regression testing using wdio-image-comparison-service.

Creating Zoom-Out-Slide-In Parallax Effect with Framer Motion

Check out how easy it is to create a stunning Parallax effect using the framer-motion library

Stimulus.js adds inbuilt support for stopping event propagation and preventing default action

It's very common in Stimulus.js to call the .preventDefault() or .stopPropagation() methods on an Event object immediately after a controller's action has been fired: import { Controller } from "@hotwired/stimulus"; export default class extends Controller { open(event) { event.preventDefault(); /* ... action logic ... */ } close(event) { event.stopPropagation(); /* ... action logic ... */ } } But it starts to feel repetitive after a while; which is why a PR introduced by yours truly to the hotwired/stimulus repo makes it so that you can do those things while defining the action descriptors themselves: <div data-controller="modal"> <a data-action="modal#open:prevent">Open</a&

Application performance optimization using Webpack

Webpack provides support to improve the application performance. This article explains how we can achieve optimized application performance.

Customizing Wistia Player with JavaScript Plugins

This article guides on how to create custom portable Wistia plugin to control playback of videos with JavaScript.

Rails 7 brings Import Maps into the limelight

Rails 7 puts forward an alternative approach to bundling JS called Import Maps. Read this blog to find out more about it.

Architect role-permissions based app using React Hooks

React is a very popular and growing JavaScript library. When we think in the context of MVC architecture, React comprises the View in MVC architecture. For managing application state, we may need to rely on other JavaScript state management libraries like Redux or if you are using React v16+, so you can use React's Context API in combination with useReducer hook to serve our state management purpose. Good architecture makes the system easy to understand, easy to develop, easy to maintain, and easy to deploy. The ultimate goal is to minimize the lifetime cost of the system and to maximize

React Design Patterns Basic to Advance - Part 2

In the previous article of the React Design Patterns Basic to Advance series, we became familiar with the Basic Design Patterns which are widely used in React. In this article, we will learn about the various Advanced Design Patterns in React. React design patterns basic to advanceAs a Frontend developer and working on React for several months, one of thetopics I have paid close attention to is Design Patterns. In this article serieson React design patterns, I will share my learnings. This blog is completely about the design patterns which are widely used in Reactapp deve…Kiprosh BlogsShubham JajooAdvanced Design

React Design Patterns Basic to Advance Part 1

As a Frontend developer and working on React for several months, one of the topics I have paid close attention to is Design Patterns. In this article series on React design patterns, I will share my learnings. This blog is completely about the design patterns which are widely used in React app development. So before diving deep directly into design patterns, we will look into a short introduction of React and JSX. React React is a JavaScript library for building user interfaces. It lets you compose complex UI from small and isolated pieces of code called Components. Component in React

How to resolve the issue with JW player that keeps playing audio despite switching to another player

Recently we have introduced a live streaming feature in our application. For that, we have used a JW player as it is easy to show youtube videos first and then streaming live events. We have also implemented a feature for an alternate player option for the end-user if there is any streaming issue. For that, we have used Flow player as it is lightweight and powerful. So we have JW Player as the default player and Flow player as an alternative. We have integrated the JW player library into our application from here and the flow player library from here.