UI Gyan

 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...

Hello techies,  Here are a few Best free icon libraries Material UI Icons Great set of icons available free to download in SVG and PNG format. Feather Icons Big list of icons with option to change size and color Zondi Icons A few list of standard icons available free to download Hero Icons Variety of icons free to copy as SVG format and can be used within JSX Hero Pattern Good number of SVG patterns available free to download and use for your application. The Noun Project One of the best place to download creative icons but, needs to give credits to creators. .

 If you want to learn Frontend but, you don't know from where to start or if you're a beginner and wanted to explore more in web or if you're a developer but, struggling with learning some new advance concepts within frontend. I personally recommend below three best available platforms for your learning. 1.  FreeCodeCamp 2. Codeacademy 3. TheOdinProject

This South Korean survival drama television series making headlines. It's a personal choice. I don't encourage anyone to go and watch. This post I'm just sharing my personal experience and perspectives. There are many redemptions after each game but, as a viewer you're still want continue ignoring all other things. There are many things I've noted from design side which makes it different from other series.  Uniqueness Mysterious dystopian thriller with uniqueness in every character and every game Limited colors Very limited colors used throughout series In depth research In depth research done for each character Characters Compelling characters includes all age groups Shapes/ Layouts Different shapes everywhere, each game has different layout and design Simple Simple Old traditional games Background Unique background with depth Content Very simple easily understandable predictable content Brand Focus on branding apart from normal story telling techniques Life is li...

Here are a few Best React libraries that I found very useful to developers in 2021. 1. React Query If you know how to work with promises or async/await, then you already know how to use React Query. There's no global state to manage, reducers, normalization systems, or heavy configurations to understand. Simply pass a function that resolves your data. I t provides us with all of the data that we require without having to declare a state variable. 2. React Hook Form It Reducing the amount of code you need to write, and removing unnecessary re-renders are some of the primary goals of React Hook Form.  3. Rebass A very simple and easy-to-implement  UI components library capable of creating a very powerful set of theme-able UI elements. A whole set of customization and theme you can apply and play with. 4. Grommet grommet is a   react -based framework that provides accessibility, modularity, responsiveness, and themes in a tidy package 5. Fluent UI Fluent UI's robust, up...

 

Keyframes A couple of very user-friendly and simple visual tools to help you generate CSS (animations, shadows, colors) for your projects. Clippy Clippy is another amazing tool that you can use for image clipping. CSS Stats Very useful to get CSS Stats of the webpage. It provides a report with deep analytics and visualizations for your stylesheets. CSS Hell Common mistakes developers make Color Leap Website to get good combinations of color pallets based on paintings. HTML DOM A handy DOM-related knowledge database for developers Animista The best site for getting animation keyframes. It contains lots of cool examples with code. Blush Easily create stunning and beautiful illustrations with collections made by artists across the globe. .

Git has many different commands that you can use. Please find few very basic useful commands. //TO CONFIG USER git config --global user.email "user@domain.com" //TO CACHE USERS LOGIN git config --global credential.helper cache // TO INTIATE GIT git init // TO ADD FILE TO STAGING git add filename_here // TO ADD ALL CHANGES TO STAGING git add . // TO CERTAIN FILES CHANGES TO STAGING git add fil* // TO CHECK GIT STATUS git status // TO COMMIT CHANGES WITH MESSAGE git commit -m "your commit message here" // TO COMMIT AND SKIP STAGING git commit -a -m"your commit message here" // TO AMMEND MOST RECENT COMMIT git commit --amend // TO SEE COMMIT HISTORY git log // TO SEE SPECIFIC COMMIT git show commit-id // TO SEE CHANGES BEFORE COMMITING git diff // REVERT STAGED CHANGES git reset HEAD filename git reset HEAD -p // ROLLBACK LAST COMMMIT OR TO COMMIT ID git revert HEAD git revert comit_id // TO CREATE NEW BRANCH AND CHECKOUT git branch branc...

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}`; ...

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...

 Hello, If you're looking for covering your JSON into QR code in angular then you can follow the below steps. 1. You can download  angularx-qrcode  from NPM. 2.  npm install angularx-qrcode --save within your project. 3. Import QRCodeModule in your app.module.ts  import { QRCodeModule } from 'angularx-qrcode'; 4. Next, you need to convert JSON object into a string and assign it to some variable. var obj={ "fistName":"John","lastName":"Smith"}; this.qrVal=JSON.stringify(obj); 5. Add qrcode tag in component html with qrVal. <qrcode [value]="qrVal"></qrcode> 6. Run and build your app QR Code will appear on your page. 7. You can use your phone camera or QR Scanner to scan the QR code. cheers :)

 There are multiple ways by which we could design our layout. To design web developers normally use all sorts of combinations of positioning floating to align and design a page. Now, If you've complex designs to develop you've nothing to worry. yupp.. All thanks to Flex design display systems in CSS make developers' life much easy. Flex-box Layout module can be helpful for developers to develop responsive layouts easily without using the float and position. You can find thousands of resources online to learn flex. I recommend below two links to learn and play around with Flex Yougalayout Flexboxfroggy cheers :)

Cheat Sheet Character Meaning Example ^ the beginning of the string $ the end of the string \b whole word only \babc\b matches 'abc', but not 'abcc ' \B if the pattern is fully surrounded by word \Babc\B mathes 'aabcc', but not 'abc' . anything \d single digit in 0-9 \D single non-digit \w single word character \W single non-word \s white space(space, tab, return, new line) \S non-whitespace \t tab \r return \n new line \g global search, which means it doesn't stop at the first match * zero or more of the previous abc* matches a string that has ab followed by zero or more c + one or more of the previous abc+ matches a string that has ab followed by one or more c ? zero or one of the previous abc? matches a string that has ab followed by zero or one c ?: non-capturing group X{m} number of X === m X{m,} m < number of X X{m, n} m < number of X < n (X | Y) X or Y [...] any of characters in the class [abcd] matches a string that has one of the ch...

Simplest way to debug your Angular app by adding debugger for chrome extension in your MS Visular Studio. Add below configuration. You can add configuration by visiting debug panel. It will create .vscode directory for you and it will add default configuration for you. You can add/ modify configuration based on your requirement. For local development debugging you can use below configuration by enabling chrome debugging. launch.json { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:4200", "webRoot...

Extra small (xs) - below 576px Small (sm) - between 576px and 768px Medium (md) - between 768px and 992px Large (lg) - between 992px and 1200px Extra Large (xl) - over 1200px

If you're front-end developer than you must be knowing the little struggle of implementing preprocessors like Saas and Less. This technologies helps you in adding second layer on top of your css layer. Most useful concepts in implementing the second layer are defining reusable global variables that we can reuse again. Good to know that now, CSS variables are now here and it will allow you to do a few things that you couldn't even do with preprocessors! In CSS now you can define :root { --main-bg: #dddddd; } body { background: var(--main-bg); } .container{ background: var(--main-bg); } You need to wrap variable under var() function. You can do inheritance .container { --type-font: Gotham; } .wrapper, .container { font-family: var(--type-font); } Even it allw you to specify multiple levels of fallbacks .container { font-family: var(--type-family, Arial); } Variable can be accessed and value can be changed via javascrpit var b...

Variable Name Single ' Double " Make this HTML safe (so it can be written inside HTML attributes) [ Info ] Also convert ' to &#39; (for use with HTML attributes that use ' as delimiters) Put in HTML and JavaScript code in here

Current Browser Versions Browser Happy site happy to help you...  Browser Happy

Overivew of Media Queries Media Queries are web modern way method lets say logical expression in css by which responsive page which can be work on any device can be created. We can set different target points/ media expressions for document. When user changes the resolution or user opens up same page in different devices if it is satifying the expression defined or lets say if its matching the breakpoint defined in media queris. Web page will automaticaly excute and apply all css defined in that media queries. There are different ways of doing it //External: //While Importing: @import "style.css" only screen and (max-width: 340px); //Within CSS: Here's a simple example of the media query for standard devices. How min and max width and other queries work //max-width: If device width is less than or equal to 600px, then will execute @media only screen and (max-width: 600px) {...} //min-width: If device width is greater than or equal to 600p...

Adaptive Vs Responsive design Obective of both the approach is same to make your page works in any device and resolutions. For repsonsive design respond to the size of the browser at any given point. No matter what the browser width may be, the site adjusts its layout in a way that is optimized to the screen. In case of Adaptive design Adaptive design adapt to the width of the browser at a specific points. In other words, the website is only concerned about the browser being a specific width, at which point it adapts the layout. Responsive - Adapts at anytime any resolutions and any device. jQuery( window ).resize(function() { jQuery(div).html( jQuery( window ).width() ); }); Adaptive - Adapts at specific given point. @media screen and (max-width: 300px) { div { width: 200px; } }