Web World

In production, you HAVE to use AOT. JIT makes your server send compiler code as well to the browser and let the client compile your code. This adds overhead at the request and bootstrap time. So, in order to shrink your bundle size and improve performance of your application, you have to use AOT. Also, you should always use AOT if you can even in development environment. From angular-cli 1.5, you can use  --aot  option with  ng serve . This will provide you an environment like your production, so you will see how your app will behave in production beforehand. Also, since it compiles your code on your server, you catch errors way before you run it on a browser. In upcoming versions of Angular-Cli, AOT will be the default option on  ng serve .

jQuery  is purely designed to simplify and standardise scripting across browsers. It focuses on the low-level stuff: creating elements, manipulating the DOM, managing attributes, performing HTTP requests, etc. jQueryUI  is a set of user interface components & features built on top of jQuery (i.e. it needs jQuery to work): buttons, dialog boxes, sliders, tabs, more advanced animations, drag/drop functionality. jQuery and jQueryUI are both designed to be 'added' to your site (desktop or mobile) - if you want to add a particular feature, jQuery or jQueryUI might be able to help. jQuery Mobile , however, is a full framework. It's intended to be your starting point for a mobile site. It requires jQuery and makes use of features of both jQuery and jQueryUI to provide both UI components and API features for building mobile-friendly sites. You can still use as much or as little of it as you like, but jQuery Mobile  can  control the whole viewport in a mobile-frie...

What is the difference between CSS variables and preprocessor variables ? Variables are one of the major reasons CSS preprocessors exist at all. The ability to set a variable for something like a color, use that variable throughout the CSS you write, and know that it will be consistent, DRY, and easy to change is useful. You can use native CSS variables ("CSS Custom Properties") for the same reasons. But there are also some important differences that should be made clear. A simple example of preprocessor variable usage is like this: $brandColor : #F06D06 ; .main-header { color : $brandColor ; } .main-footer { background-color : $brandColor ; } The above code would do nothing in a browser. The browser wouldn't understand the declarations and toss them out. Preprocessors need to compile into CSS to be used. This code would compile to: .main-header { color : #F06D06 ; } .main-footer { background-color : #F06D06 ; } This is no...

Responsive Font Size The text size can be set with a   vw   unit, which means the "viewport width". That way the text size will follow the size of the browser window: Example < h1  style ="font-size:8vw;" > Hello World < /h1 > < p  style ="font-size:2vw;" > Resize the browser window to see how the font size scales. < /p > Change Font Size With Media Queries You could also use media queries to change the font size of an element on specific screen sizes: @media screen and (min-width: 601px)  {   div.example  {     font-size :  80px ;    } } @media screen and (max-width: 600px)  {   div.example  {     font-size :  30px ;    } }

@media print : You can you  @media print    to define what will be printed and what will be shown on screen. Background color showing in print: The Chrome CSS property  -webkit-print-color-adjust: exact;  works appropriately. However, making sure you have the correct CSS for printing can often be tricky. Several things can be done to avoid the difficulties you are having. First, separate all your print CSS from your screen CSS. This is done via the  @media print  and  @media screen . Often times just setting up some extra  @media print  CSS is not enough because you still have all your other CSS included when printing as well. In these cases you just need to be aware of CSS specificity as the print rules don't automatically win against non-print CSS rules. In your case, the  -webkit-print-color-adjust: exact  is working. However, your  background-color  and color definitions are being beaten out by other...

@page : The  @page  CSS at-rule is used to modify some CSS properties when printing a document. You can't change all CSS properties with  @page . You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored. @page { margin : 1 cm ; } @page : first { margin : 2 cm ; } :blank :first :left :right @page { size : portrait } @page rotated { size : landscape } Controlling Widows and Orphans The  orphans   property specifies the minimum number of lines of a paragraph that must be left at the bottom of a page. The   widows   property specifies the minimum number of lines of a paragraph that must be left at the top of a page. <style type = "text/css" > @page{orphans:4; widows:2;} </style>

If you're willing to switch over to tables for your layout (not necessarily ideal), you can do it with the  <thead>  and  <tfoot>  elements. They'll print at the top and bottom of every page: <div id = "header" > header </div> <div id = "content" > content spanning several pages... </div> <div id = "footer" > Footer - Fixed at the bottom of each page </div> <table> <thead> <!-- Will print at the top of every page --> </thead> <tbody> <!-- Page content --> </tbody> <tfoot> <!-- Will print at the bottom of every page --> </tfoot> </table> Another option is to use display  table-header-group  and  table-footer-group  but cross-browser support isn't great: # header { display : table-header-group ; } # main { display : table-row-group ; } # footer { display : ta...