Skip to main content
Craft, learnings, and thinking behind the work. From our team
All blogs
All topics
AI
Drupal
Design Process
Culture
JavaScript
DXP
More topics
Quality Engineering
BizTech
Events
Open Source
Podcast
Non-Profits
Healthcare
Higher-Ed
Clear all
JavaScript
Building powerful custom properties with CSS Houdini
Introduction In these series of blogs, we will talk about Houdini - the new era of CSS. Before jumping right into CSS Houdini, let’s first understand what the word Houdini means. Houdini means, an expert in the art of escaping. ...
JavaScript
GraphQL - Beginner's Guide
To understand what GraphQL is we need to understand why GraphQL was created. Before you go any further. This blogpost is aimed at all the beginners like me to get familiar with some very basic terminologies of GraphQL. Enjoy! A Bit of Hi...
JavaScript
Navigation with Leaflet Maps
Today, we are going to see how we can add routing to our leaflet maps. This blog will show how we can make use of the leaflet maps to show the route between a source and a destination. For achieving this we will be using the Le...
JavaScript
ReactJS Kick-starter - A full day workshop at QED42
Anyone who has worked in the Web domain doesn't need an introduction to ReactJS. Our team engaged with new as well as informed ReactJS enthusiasts in a full day hands-on workshop. ReactJS is an open-source JavaScript Library for cre...
JavaScript
Web Components - Introduction to the future web
Web is evolving rapidly, If we analyze heavy modern web applications they are not only complex to design but also quite difficult to develop and manage. Given the range of tools involved, amount of testing required, and the combination o...
JavaScript
Code Splitting in React
React is truly revolutionizing the way how we look at our front-end. With React we are not only making our UI faster but also very scalable. It may require some initial efforts to get the momentum but it’s totally worth the efforts. The ...
JavaScript
Handling GraphQL Errors with Status Code
Any application, from simple to complex, can have errors. It is important to handle these errors and report these errors back to your users for information. The question is - How do we handle errors in GraphQL? How can we do it in a way ...
JavaScript
New Polymer element to indicate reading position of your visitor - <polymer-meter>
Now a days we have seen quite a few websites that have some kind of an indicator to display the current reading position of readers. Generally, such indicators are used on blog posts or long form articles and help readers understand...
JavaScript
React’s Context API and How it can replace REDUX
React is a great library used to build the user interfaces but when it is combined with tools such as Redux, Reselect, Router and more, it really takes the lead in terms of performance and reusability. Well, these may sound like some rea...
JavaScript
Weekend Hack - 'Balloon Burst Game' using jQuery
jQuery is often used on websites to enhance the user experience and to make the page interactive. Recently, I was trying to integrate gravitational equations to the DIV elements of the DOM and ended up the rabbit hole which resulted in t...
JavaScript
Combating COVID-19 with Digital Health
With COVID-19 all around the news these days, each one of us is concerned about our own safety and health and that of our dear ones too. Despite practising social distancing and quarantine, we will always be in constant t...
JavaScript
How to build a real-time tracking app with GraphQL Subscriptions & Apollo Client
One of the exciting things about GraphQL is its ability to build real-time applications using GraphQL subscriptions. In this tutorial, I’ll be showing you how Google Maps updates your location in real-time with GraphQL subscriptions &...
JavaScript
Next.js performance tuning: practical fixes for better Lighthouse scores
Achieving strong Lighthouse scores starts with basic optimisations, but reaching exceptional performance takes more than default settings. While Next.js offers powerful tools out of the box, real results come from deliberate decisions ac...
JavaScript
React's latest evolution: a deep dive into React 19
React remains the foundation of modern web development. React 19 is now stable and available on npm, bringing significant changes to how developers build applications. The release solves long-standing complexity issues in React developme...
JavaScript
What's new with Next.js 11?
Next.js is a result of the combined work of 1600 community developers, industry partners like Facebook and the core Next.js team. Its philosophy has always been to make DX (Developer Experience) as good as UX (User Experience). And...
JavaScript
Context API in React with Hooks
As per the React documentation "Context provides a way to pass data through the component tree without having to pass props down manually at every level.” But, without diving straight into the definition of what Context API is, let’s try...
JavaScript
How to build your first plugin in Strapi: A beginner’s guide
Strapi is a powerful CMS that offers a variety of features out of the box, along with a robust plugin marketplace. However, there are times when you might need a custom solution to meet specific project requirements. Fortunately, Strapi ...
JavaScript
Optimize your React App Performance with Memoization
Memoization in React is a performance feature that aims to speed up the render process of components. We will be exploring this technique in React, with sample use cases along the way. What is Memoization? Memoization is the process of c...
JavaScript
Resolving Network Error in Android app development
What do these errors indicate? These errors state that the request you tried to make did not reach your remote server. Be it a hosted API or your local machine. These errors may occur under the following scenarios: Scenario 1...
JavaScript
Why businesses are moving to Headless CMS
Consider a global beverage brand. A new product launch requires detailed information such as nutritional values, packaging visuals, and compliance notes. That content is first published on the corporate website, then re-entered into the ...
JavaScript
Custom Redux Middlewares with Example
Redux has now become an integral part of the web app development, especially when developed with React. It offers so much flexibility and scalability that no other library as of now. With good coding practices, it is now very feasible to...
JavaScript
How to Cache your Node.js application with Redis
This article is a simple introduction to Redis and how to cache your Node.js application with Redis. Here, you will learn the utilization of Redis for caching through an example and how you can use it to improve your application speed an...
JavaScript
Optimizing your Next.js application: using analytics, metadata, and Bundle Analyser
To improve a Next.js application, you have to work on its performance, user experience and resource usage optimisation. This blog post gives you three strong instruments which are Next.js Analytics, Metadata Management and Bundle Analyse...
JavaScript
SEO strategies for Next.js 14+ and TypeScript: building search-optimised websites
Getting your website noticed is no small feat, especially when competing with millions of others online. Search Engine Optimization (SEO) is what makes your site easier to find, helping it rank higher in search results and bring in more ...
JavaScript
Data Fetching and Next.js
Next.js has evolved enormously over the past couple of years. From last year only it has introduced different data fetching techniques like Static Site Generation (SSG) and Incremental Static Regeneration(ISR) making it a default solutio...
JavaScript
How to create a custom snackbar in Next.js 14 using Tailwind CSS
Snackbars are an essential part of modern web applications. They provide quick, at-a-glance feedback to users, often informing them of the success or failure of an action. However, when searching for libraries in React or Next.js to cr...
JavaScript
Optional Chaining Operator in JavaScript
Property chaining challenges: Working with JSON structure involves a lot of conditional checks, accessing nested properties of JSON, and checking multiple And operators (&&) to verify whether the given value exists or not. ...
JavaScript
Solving web performance with the Speculation API
Web applications today are expected to respond instantly. Even minor lags between user action and content load can lead to user drop-off, higher bounce rates, and lost engagement. At QED42, we’ve been experimenting with several ways to a...
JavaScript
Developing a real-time secure chat application like WhatsApp & Signal with end-to-end encryption
Lately, there is a lot of fuss around end-to-end encrypted chat applications. WhatsApp and Signal are two messaging apps dominating the headlines, let's take a look at why - WhatsApp recently updated its privacy policy, stating that the ...
JavaScript
How to use the GraphQL useMutation hook of Apollo in ReactJS
GraphQL is a powerful query language that allows more flexibility and efficiency in data-driven applications compared to REST. In simple words, while querying with a RESTful API, we demand extra data that is not required at that moment. ...
JavaScript
Potential of location based services
Its almost paradoxical that the internet, that helped in making the world a smaller place has local as its next major focus area, but there has been a spate of activity in the local internet space in the last year which seems to suggest ...
JavaScript
State Management in React
What is State? And why do you need to manage it? The State is an important concept in React that stores data and displays the behavior of a component. People choose different approaches for managing State in React. Let us delve int...
JavaScript
A Beginner's Guide to React Native
React Native, a popular javascript-based framework built by Facebook in 2015, uses a Single Codebase applicable for developing apps on Android and iOS. The usage of this framework has increased developer productivity and minimized the le...
JavaScript
Developing Multilingual sites with Headless CMS - Strapi
Over 4 billion people are using the internet today. It is used by different businesses (like e-commerce, social media, etc.) for attracting more customers. Every business is going online (especially during this pandemic) with the notion ...
JavaScript
Implementing Iterators and Generators in JavaScript
JavaScript provides several ways of iterating over a collection, from simple for loops to map() and filter(). Iterators and generators bring the concept of iteration directly into the core language and provide a mechanism for customizing...
JavaScript
Publishing MEAN packages
This is a follow-up blog post from Our Jounrey with MEAN. For those who are not familiar with MEAN, you must go through the previous blog post before proceeding here. Contrary to Mean core, which is hosted on github, mean packa...
JavaScript
Strapi V5: Easing content revisions in production
A Content Management System (CMS) is a software platform that enables users to create, manage, and publish digital content, typically for websites, without needing deep technical expertise. CMS platforms provide tools to organize and edi...
JavaScript
A comprehensive guide to deploying apps to TestFlight for seamless testing
Introduction: In the fast-paced world of app development, ensuring a smooth and bug-free user experience is paramount. One crucial step in achieving this is thorough testing, and TestFlight stands out as a reliable platform for iOS app t...
JavaScript
Drag & Drop Reorderable Grid List With REACT + REDUX
Generally, a lot of devs face problem when it comes to drag and drop functionality implementation and its integration with the Redux states is a big pain. Well, we all can do in some way with some workarounds but what should be the actua...
JavaScript
Implementing Permission System with MEAN
MEAN has a concept of roles but doesn't yet have a granular permission system to go with it, in this blog post we will implement a permission system and screen to manage permissions. Roles is a way to segment users based on access requir...
JavaScript
Querying Static vs Dynamic Data in Gatsby
Gatsby uses different kinds of plugins to pull data from different data sources into Gatsby. Once it gets the desired data, it uses GraphQL to query that data. Now, why does it use GraphQL is a topic for another day. Today we will focus ...
JavaScript
Styling your Next.js application
Next.js is opinionated about how to organize your JavaScript code, but it's not opinionated about whether your styling should belong in JavaScript or not. As CSS-in-JS is becoming more and more popular due to some of its great advantages...
JavaScript
A Comprehensive guide to integrate Redux Toolkit with React using counter example
Redux is a powerful tool for managing state in JavaScript applications, but it can be complex and verbose.Redux Toolkit – a library that simplifies Redux development with a set of tools and best practices.It has revolutionized state mana...
JavaScript
Dynamic Routing in Gatsby
During my internship, I was developing a project named Group Expense, which required the implementation of dynamic routing. Let us understand what dynamic routing is all about. What is dynamic routing? Dynamic routing means there is only...
JavaScript
Implementing Scroll Based Animations using React and GSAP
As computers are getting more powerful it is getting easier to achieve complex animations without compromising the fluidity and user experience. There are various JavaScript animation libraries available and most of them are pretty good....
JavaScript
Quick and easy steps to optimize your React App
React (a JavaScript library) has been around in the market for around a decade and it is the first choice for most of the developers. React is performant but at times one would like to optimize their apps as the app size grows. If you ar...
JavaScript
Test-driven development (TDD): code that starts with a test
Software development works best when every feature is clear, tested, and built with purpose. Test-Driven Development (TDD) supports this by starting with tests before any code is written. Each test defines a specific behaviour, guiding t...
JavaScript
A Guide to Functional and Reactive Programming
New to JavaScript or need to brush up your concepts? This blog reviews the fundamentals of Functional Programming and Reactive Programming, the driving shift, what you need to know and which path is optimal for your requirements. Functio...
JavaScript
Exploring routing flexibility with Next.js Parallel Routes
Next.js, a powerful React framework, offers two essential features - Parallel Routes and Intercepting Routes - that enable developers to create highly dynamic and seamless user experiences in their applications. In this blog post, we wil...
JavaScript
Improve performance of media-heavy React applications using Intersection Observer API.
Modern web applications use a lot of animations and media ranging from images, gif, videos to SVG’s to make user experience elegant and engaging. If not handled properly, it can hamper your website’s performance, and these things mi...
JavaScript
React Native: Custom Navigation Tabs are here!
The Idea - React Native Custom Navigation Tabs I was browsing through the internet in search of some custom navigation tabs needed for my React Native app. I found out that there are no good options available on the npm that provide good...
JavaScript
Unblocking the UI with web workers: a guide for faster web apps
Ever clicked a button in a web app, and the UI just froze? Maybe a timer stopped, animations stuttered, or clickable elements stopped responding. This happens because JavaScript is single-threaded, meaning it can only do one thing at a t...
JavaScript
A Guide to React Unit Testing
Today testing has become a crucial part of the application development process. It should pass with all the verifications and validations on every step. Let’s take a look at how Unit Testing is performed on React applications. What is Un...
JavaScript
Factory for Data Operations on SQLite using Ionic
One of the pain points in hybrid app development is data persistence & data storage. Though LocalStorage can be used for storing less critical data like cache, devs usually look at SQLite for consistent data storage backend...
JavaScript
Ionic and Android 6 Runtime Permissions
Android Permission Provisioning has changed recently, If an app is using Android SDK API level 22 or below, users are asked for all the permissions in bulk at the time of installation i.e. Without grant...
JavaScript
React Native: Do’s And Don’ts
This article is based on the experience gained after completing 2–3 projects, it is assumed that you already have some basic experience around React and React Native. This blog is a brief set of guidelines of best practices whi...
JavaScript
Understanding PanResponder with react-native-dragging-list
A simpler way to drag and drop list items. Nowadays, the internet has solutions to almost all sorts of problems but Alas! This is not the case when it comes to issues related to PanResponder and Animated component/library of React Native...
JavaScript
A quick guide to MongoDB Indexing
Databases are the backbone of any modern application, be it mobile or web. The database helps store useful information so that it can be queried whenever needed. Let’s assume the database is like a book. It’s easy to read through and fin...
JavaScript
Frontend build tool with PostCSS and Gulp
Frontend build tools can save a lot of valuable time and make a frontend developers life much easier. They can do almost anything: download libraries, run tests, bundle packages, automatize tasks, and so much more. Lately, PostCSS a...
JavaScript
Ionic compatibility with iOS10 -- Content Security Policy
If you have been building Ionic / Cordova apps, you might have noticed your app breaking with public release of iOS 10 launched recently. Common symptom of apps suffering from this issue is that the app continues to work as exp...
JavaScript
React Native: Endless background process
We will be discussing how we can build an endless react-native process that runs even if the app is killed, suspended, active in the foreground, or when the phone is restarted. Having a background process can be great when you want some ...
JavaScript
Understanding some of the routing mechanisms using App Router in Next.js 14
Routing is a core aspect of web development, enabling smooth navigation across pages within an application. This article focuses on introducing a powerful new feature: the App Router in Next.js 14. This addition aims to enhance the way d...
JavaScript
Automated Water Sensor Module
A bunch of technology enthusiasts started an IoT project to build a water sensor module a few months ago here at QED42. And we would like to share our experience with you. Water availability has been a pressing concern al...
JavaScript
GatsbyJS Plugin Alert - Simplify data navigation
A few weeks back we started working on a POC around GatsbyJS and Drupal commerce. While building the listing pages we ran into an issue due to the current entity type and bundle route pattern provided by the JSON:API module. Drupal provi...
JavaScript
Mastering Cron Jobs in CMS: a practical guide with Strapi
In modern web development, automation plays a crucial role in enhancing productivity and ensuring applications run smoothly. One common and effective tool for automation is the cron job, which allows developers to schedule specific tasks...
JavaScript
React Native Fabric - Why Am I So Excited?
React has truly changed the way we look at our web apps and with React Native, our vision for native apps is also transforming. It has helped JavaScript to realise its true potential but this is not enough, we still have a long way to go...
JavaScript
Using Curl commands with Webdav
Curl is a command line tool for doing all sorts of URL manipulations and transfers, but this particular post will focus on how to use curl for managing (read/ delete/ rename/ upload) files on Webdav Server. While the second part of the p...
JavaScript
Building APKs locally with expo: a step-by-step guide
Building an APK locally with Expo gives you greater control over your development workflow, allowing you to generate a standalone Android package without depending on Expo’s cloud build services. This approach is particularly valua...
JavaScript
Getting Started with React Native's Animated API
With the changing technological environment and user expectations, the urge to explore and create has grown now more than ever. Animations have come a long way since their inception. Moreover, they feel pleasant to the eyes and give a be...
JavaScript
Migrating page router to app router in Next.js 14
In React development, Next.js has always been a game-changer, especially for folks who appreciate a powerful and manageable framework. With the release of Next.js 14, things have gotten even more exciting. However, change can be challeng...
JavaScript
React Native: Let's Animate the SVGs!
A simpler way to animated SVGs in React Native. Animations are an important feature that one can include in his/her app. They give a much better user experience and when it comes to SVGs, animations become all the more important. But as ...
JavaScript
Using Curl for Webdav with Two Factor Authentication
Web Distributed Authoring and Versioning (WebDAV) is an extension of the Hypertext Transfer Protocol (HTTP) that allows for remote Web content authoring operations. There are various clients available to perform such operations but somet...
JavaScript
Building interactive maps with Leaflet and React
Having a map is a vital tool for engaging with audiences for many online businesses. Interactive maps allow direct interaction with your site visitors. It also responds and anticipates the needs of your users/customers. In this article, ...
JavaScript
Google Places Api integration with IONIC and the Long Press Issue
Google Maps are changing the way we see the world. Lets change the way we look at Google Maps Google Maps are a perfect match when you are dealing with location based apps. In this article we will learn to integrate the Google Maps api a...
JavaScript
Modularizing your GraphQL schema code
As your GraphQL application grows from a demo to an actual application, the complexity of your schema will grow. And it is very difficult to organize the schema in one file. So, to organize your code and schema, you’ll want to split...
JavaScript
React Suspense - A Quick Introduction
React 16.6 has added a <Suspense> component that allows you to “wait” for some code to load and declaratively specify a loading state (like a spinner) while you’re waiting. React Suspense was pitched as an improvement to the develo...
JavaScript
Vagrant NFS Sync Problem on macOS High Sierra
Disclaimer: This is a temporary workaround which worked for me, not a permanent fix and may not work for everyone Many of us have already tried to enjoy the flavor of new OS by Apple, macOS High Sierra. And doing that might have given yo...
JavaScript
Supercharging Next.js with Strapi webhooks
Supercharge Next.js with Strapi webhooks using a custom ISR workflow. Learn how to avoid full rebuilds, enable partial regeneration, and scale content-heavy sites efficiently.
Sorry! No items found.
load more
