Strict vs. quirks modes – How to trigger each and why this matters?
Quirks mode and strict mode are the two ’modes’ modern browsers can use to interpret your CSS.
Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older versions.
In HTML5, the only purpose of the DOCTYPE is to activate full standards mode. Older versions of the HTML standard gave additional meaning to the DOCTYPE, but no browser has ever used the DOCTYPE for anything other than switching between quirks mode and standards mode.
Solution to Prevent error $digest already in progress when calling $scope.$apply( )?
To check if a $digest is already in progress you have to check $scope.$$phase.$scope.$$phase will return “$digest” or “$apply” if a $digest or $apply is in progress. The difference between these states is that $digest will process the watches of the current scope and it’s children, and $apply will process the watchers of all scopes.
Have you ever worked with retina graphics? If so, when and what techniques did you use?
On retina devices the websites are not broken. They just look vague and pixels start appearing as low resolution images. So the only way to correct is to resize the images by following one of the techniques below:
i) Using alternate high resolution pixels
Suppose we have an image of 200px by 400px (CSS pixels) and we want to display it properly in a retina display, we can upload an alternate image of size 400px by 800px in our server and render them whenever the webpage is opened in a retina device.
ii) Using @face-fonts instead of images icon
Image fonts will automatically resize themselves on the high resolution devices just like normal fonts do. Using @face-fonts is an alternate solution to Bitmap icons.
iii) Using SVG images instead of Bitmap images
Bitmap images are images that multiply their pixels in retina displays. But they come with a limitation of getting multiplied infinite number of times. This is where SVG images come into role. They also solve our problem of uploading alternate images of double resolution plus they solve the bandwidth problem too.
If you have 10 different stylesheets for a given design, how would you integrate them into the site?
Every CSS file we use on a website will add time to our page load speed. CSS will not care where it is at or how many files it is in. However in most cases we can have a combination of two or more CSS files together.Developers handle this situation in multiple ways. Few of them simple combine by copy pasting one from another.
The other possible way to combine CSS files using YUI Compresser, that combines CSS and minimizes code and is good for performance. Few handle this by using build tools like GRUNT.
One CSS file that contains all the styles of the separate CSS files combined will work just as well and improve the page speed. Putting all of the CSS into one file substantially reduces the amount of time it takes to load our web pages because we are reducing the amount.
What’s the difference between feature detection, feature inference, and using the UserAgentstring
Feature Detection is to verify if a feature works in a particular browser or not. The feature can be either a CSS property or a Java Script Method.
Feature Inference is to assume that a CSS property/ JS method is available in all the browsers, by verifying it in a single browser. The fact is it can or it cannot be available. For ex. the text( ) function is implemented in Chrome , but it is not implemented in Firefox which will give out an error eventually when used. So we have to be careful.
The User Agent is a software which identifies your operating system, browser and its version. When you a visit a particular webpage, the browser sends a user-agent string to the host, implying that only the content/data related to that particular browser should be displayed.
But among all the three techniques, feature detection is considered a good practice.