Software & web developing

When learning about CSS and Cascading priorities, the topic of User, Author, and User Agent style sheets becomes a bit confusing for newbies. It is actually a fairly easy topic to grasp. According to w3.org, CSS declarations are applied in this order (from lowest to highest priority): - user agent - user normal - author normal - author important - user important First, what is the difference between user agent, author, and user styles? User Agent is your browser such as IE or Chrome or Firefox. It has its own default style sheet and has the lowest priority. Author is the maker of the website who embeds all the styles of a website in CSS files or inline into the html. User is you or the end-user viewing a website. You can override the author's styles by defining your own styles or CSS. Typically this is done if you need to have larger font sizes, varying colors, etc. for accessibility reasons. Now that these three have been defined, what is the difference between normal and important styles? Normal styles are styles that you define normally. They are processed in a top down methodology. So if you had a background-color:#00ff00; followed by background-color:#000000; for the same element, the black background will have precedence. Important styles are those which override normal styles regardless of where they are on the page. So in the same example, if the style was defined as: background-color:#00ff00 !important; background-color:#000000;, the background color of the element will be yellow even though black was defined afterwards.

jQuery

jQuery plugins make development faster since you are using what other experts have already built. You can deploy them with just a little bit of technical knowledge. The more plugins you understand how to use, the better you will be at jQuery development. you do not have to worry about creating jQuery plugins yourself. Plenty of developers release free jQuery plugins that provide just about any functionality your app may need. so follow these simple steps for success: Make sure the plugin is popular. In general, if many developers are using something it is probably pretty decent. However, if the functionality is very specific, only a handful of people may need the plugin, so weigh that accordingly. Make sure the plugin is regularly and recently updated. That is a good sign that the developer is committed to quality and will be available to help if you encounter any bugs. Make sure it does not break anything. This one sounds a little obvious, but the best test of a plugin is often to just try it out. Make sure it does not cause any errors, break any functionality, or slow down the performance of

Responsive Design

Introducing Responsive Design and Media Queries Influence of Mobile Technology The spread of mobile technology has challenged designers and developers to establish new techniques for providing good experiences on a wide variety of devices Responsive Design Responsive design is the practice of building a single Web experience that “responds” to the context of the user, a concept Marcotte borrowed from related trends in architecture. Technically, the HTML and CSS detect characteristics of the user’s device and then present a Web experience that is suitable for that device. Media Queries A foundational technique for responsive design is the media query. Media queries are the use of CSS to detect (or “query”) the capabilities of the user’s device and then to use CSS to shape the presentation accordingly Testing Responsiveness An easy way to test for responsiveness is to simply visit a popular Web site in your desktop browser and then resize the browser window to reduce the window to a narrow size, mimicking a smartphone browser window Visit bostonglobe.com. This is an example of one of the first major media sites to implement a responsive design. To use media queries in your code: Define a media type using CSS’s @media rule. Define the CSS that should be delivered when the user’s device matches that media type. @media screen and (max-width: 400px) { body { background-color: purple; } } Or A complete list of features you can detect with a media query is available at https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features. Here are the most common media queries. Select each one. min-width max-width min-device-width max-device-width orientation=portrait orientation=landscape For a complete list of all the features you can detect with a media query, seehttp://www.w3schools.com/cssref/css3_pr_mediaquery.asp In addition to querying for size and orientation, you can use media queries to determine other capabilities of the user’s device. Here are some examples: Optimizing pages for printing A common use of media queries is to optimize a page for a printer. If you want to change the presentation when the page is printed, you can use the @media print media query, like this: @media print { color: black; background-color: white; } Displaying high-resolution images Perhaps you want to display high resolution photographs, but only if a user’s graphics processor can handle them. You can query the min-resolution and the -webkit-min-device-pixel-ratio to determine the screen density in conjunction with the min-resolution to determine the dpi. (A retina display on recent iPhones and Apple computers has a screen density of 2.) Here’s the media query: @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* Retina-specific stuff here */ }