Skip to main content

Posts

Showing posts from February, 2021

Navigating WCAG 2.1: A Step-by-Step Approach for Developers

 Get Familiar with WCAG 2.1: WCAG 2.1 is like the rulebook for web accessibility. It's split into four parts: Perceivable, Operable, Understandable, and Robust (POUR). For instance, "Perceivable" includes rules like giving all images a text description (alt text) for folks who can't see them.  Run an Accessibility Audit: Use tools like Google Lighthouse or WAVE to scan your site. They'll flag up stuff like missing alt text, low color contrast, or form fields without labels.  Manual Testing: Automated tools can't catch everything. You'll need up roll to your sleeves and do some manual testing. Try navigating your site using only your keyboard, or using a screen reader like NVDA or VoiceOver. You're checking that all content and functionality is accessible.   Write an Accessibility Statement: This is a page on your site where you talk about your commitment to accessibility. You could mention that you're aiming for WCAG 2.1 Level AA compliance, lis

Error Handling with HttpClient and HttpInterceptor in Angular

To handle your errors properly in angular, you can use HttpInterceptor. It intercepts Http request. It helps in converting http request before sending and after getting the response from the server. import { HttpEvent, HttpHandler, HttpRequest, HttpErrorResponse, HttpInterceptor } from '@angular/common/http'; import { Observable, throwError } from 'rxjs'; import { catchError, retry } from 'rxjs/operators'; export class MyErrorInterceptor implements HttpInterceptor { intercept( request: HttpRequest , next: HttpHandler ): Observable > { return next.handle(request) .pipe( retry(1), catchError((error: HttpErrorResponse) => { let errorMessage = ''; if (error.error instanceof ErrorEvent) { // client-side error errorMessage = `Error: ${error.error.message}`;

Media Queries Cheat Sheet

Desktop - Tablet - Phone Few media queries to make life simpler  h3 {text-align:center;} /* PRINT VERSION */ @media print { h3:after {content: ' - PRINT'; display: inline;} } /* PHONE VERSION */ @media only screen and (min-width: 320px) { h3:after {content: ' - PHONE'; display: inline;} } /* TABLET VERSION */ @media only screen and (min-width: 768px) { h3:after {content: ' - TABLET'; display: inline;} } /* DESKTOP VERSION */ @media only screen and (min-width: 980px) { h3:after {content: ' - DESKTOP'; display: inline;} } /* GLOBAL STYLES */ h3 {text-align:center;} /* PRINT VERSION */ @media print { h3:after {content: ' - PRINT'; display: inline;} } /* PHONE LANDSCAPE VERSION */ @media only screen and (min-width: 3