Written by Amandeep Singh. Developer @ Avarni Sydney. Tech enthusiast and a pragmatic programmer.
This article talks about my approach to building accessible forms using HTML and CSS only, instead of relying of lots of stateful React code. With this approach, you can build a fully functional form that delivers a great user experience.
Leverage React Router v6’s errorElement API in conjunction with React Query’s throwOnError option to provide seamless UI fallbacks for errors occurring during both rendering and asynchronous operations
CORS is an HTTP-header based mechanism that allows sharing resources from one origin to another. In this article, we will explore the CORS protocol in more detail and see how the browser decides if it needs to make a preflight request or not.
Using only the semantic HTML, we'll implement a basic login form without writing a single line of JavaScript. We will follow the Rule of Least Power and explore why native HTML (the least powerful language) should be used wherever possible to deliver an inclusive web experience.
In many Single Page Applications, dynamic feedback is primarily designed for sighted users, inadvertently excluding those who rely on screen readers. This article is here to guide you on harnessing the power of ARIA regions to implement an inclusive and accessible solution.
We will continue our journey of making our modal more accessible and keyboard friendly. This part will address keyboard interaction including focus trap, and scroll lock.
Creating an accessible Modal dialog will make it inclusive and accessible to all the users, including keyboard and screen readers. This article will take you through the process of implementing one from scratch by starting off with the foundation, mouse interaction, and adding the required aria attributes.
Understanding the layering order (or "stack order") of the HTML elements is key to understanding how the `z-index` works. This article will look into how the browser layers elements on the page by default, and how we can use `z-index` to rearrange that order.
Creating an accessible component is not as hard as you think. It only requires the right attitude and a bit of empathy for your users.
We'll look into a few caveats, gotchas, and some 'Aha' moments in CSS which you might not be aware of. Do check out the CodePen demos, as they speak louder than words.
The aria-current attribute can help screen reader users recognise the currently active link among a set of navigation links. We'll learn how easily you can inject this attribute into your link tags inside your NextJS app.
While resolving merge conflicts, you could instruct git to pick all the changes made to one branch over another. In this article, we'll see how you can achieve it in a single-line command.
It's time we stop considering web accessibility as an optional thing. Read a few tips that could help you get up and running with accessibility in mind.
Don't make your user pay the cost of additional JavaScript they never get to use. Think inclusive, think accessible.
Level up your programming skills by subscribing to this curated list of newsletter subscriptions.
Events are core part of web programming. System notifies us about these occurrences and we can respond them however we desire. Understanding the event propagation is important to create robust UI widgets.
JavaScript doesn't have classical inheritance, but Prototypal delegation. This allows a very powerful paradigm of sharing methods and properties in JavaScript.
Strive to keep your commit history clean, and your future colleagues will thank you for this. Let's see how can you do it using git reset.
It's time to supercharge your git tooling. We will go beyond your normal git add and git checkout command, and showcase their interactive counterparts.
We will break the components into pieces and demystify their existance. You will learn about prototye delegation, borrowing function techinque, and why one would use hasOwnProperty on Object's prototype and not on instance itself.
Effects play a crucial part in your application. Understanding why its important to pass correct dependencies in your `useEffect` hook can help you avoid bugs.
We will explore some of the coolest tricks and features that can make 'debugging' your cup of tea ☕.
Functions in ECMAScript captures their parent scope bindings at creation time
We demystify the mechanism of JavaScript engine, closures, scope, and event loop.
This is not React but JavaScript.
Hook are the new programming model in React. Are you up and ready to embrace it?
Avoid wasteful re-renders.
Some tips to help you get started with React.
