Category Archives: tech

Getting your webpage printout presentable

Here are a few tips that will help.

1. If you’re using Bootstrap CSS, I had a good experience simply supplying the same xs col setting for every col setting I had specified:
eg: add col-xs-6 where every col-md-6 is specified.

2. A few CSS libraries will have anchor’s href printing in addition to the anchor’s text. The below is a way to override it:

@media print {
  a[href]:after {
    content: none !important;
  }
}

Angular: specifying the img src

While it likely appears that <img src=”{{imageUrl}}”/> is working, you may wonder about the Angular way to specify the source and why.

When the browser is loading the page, before angular bootstrapping and creation of controllers, the browser will try to load image from literally “{{imageUrl}}“, which will fail. Then once angular is started, it will do the replacement of {{imageUrl}} to image.png for example. When the img src attribute changes, and browser then loads the image as expected. To avoid these 2 requests going and first one failing, do as below instead:

Angular 1:

<img ng-src="{{imageUrl}}">

Angular 2:

<img [src]="imageUrl">

Angular: JIT and AOT

With Angular 1 and early stages of Angular 2, JIT (Just In Time) has been the way of compiling Angular code. With this approach, the compiler performs a lot of work to analyze the components in the application at runtime (generating code in memory). Since this is just stored in memory, when the page is refreshed, all of that work is lost. So, the JIT compiler does the work all over again. Doesn’t sound that efficient, huh?

What’s “AOT” ? It stands for Ahead Of Time.

With an AOT compiling approach, Angular apps can be built to not require much of the compiler, change detection, or dependency injection systems at runtime. This leads to a significantly smaller application payload. And since the component factories are generated at build time, Angular can skip the compilation and move straight to creating views at runtime.

Considering these two approaches to compilation, we can see how AOT provides significant improvements to load time, as the majority of the compilation work is already completed before the code gets sent to the browser and the AOT compiled code yields less code that we need to send to the browser.