Posted on

Error Handling with Angular 8 – Tips and Best Practices

Handling errors properly is essential in building a robust application in Angular. Error handlers provide an opportunity to present friendly information to the user and collect important data for development. In today’s age of advanced front-end websites, it’s more important than ever to have an effective client-side solution for error handling.

An application that does not handle errors gracefully leaves its users confused and frustrated when the app suddenly breaks without explanation. Handling these errors correctly across an application greatly improves user experience. Collected data from the error handling can inform the development team about important issues that slipped past testing. This is why monitoring tools like Rollbar are so important.

In this article, we will compare several solutions for error handling in Angular apps. First, we will describe the traditional approaches using ErrorHandler and HttpClient. Then, we will show you a better solution using HttpInterceptor. We’ll also show you how to use this interceptor to monitor and track errors centrally in Rollbar.

 

Source: Error Handling with Angular 8 – Tips and Best Practices

Posted on

Flexbox guide

Snippet for positioning items centered horizontally and vertically:

display: flex; /* turn flexbox on */ 
justify-content: center; /* center horizontally */ 
align-items: center; /* center vertically */

Snippets for container positioning items and IE10 rules:

/* IE 10 flexbox cheatsheet */

/* enable flexbox */
display:                  flex;
display: 		  -ms-flexbox;

/* container - horizontal align items */
justify-content:          flex-start | flex-end | center | space-around | space-between;
-ms-flex-pack:            start | end | center | distribute | justify;

/* container - vertical align items */
align-items:              flex-start | flex-end | center | stretch | baseline;
-ms-flex-align:           start | end | center | stretch | baseline;

/* container - vertical height for items when extra space is available (multi line) */
align-content:            flex-start | flex-end | center | space-around | space-between | stretch;
-ms-flex-line-pack:       start | end | center | distribute | justify | stretch;

Read more here:
css-tricks.com/snippets/css/a-guide-to-flexbox/

Legacy browser support: (E.g. Internet Explorer 10):
https://css-tricks.com/using-flexbox/

Cheatsheet flexbox equiv. for IE10:
https://gist.github.com/Paul-frc/3ed765ed10c9635384e98f58334081e4

Posted on

CSS to highlight layout – great CSS hack

Different depth of nodes will use different colour allowing you to see the size of each element on the page, their margin and their padding. Now you can easily identify inconsistencies when working with the overall layout of elements…

* { background-color: rgba(255,0,0,.2);
  outline: 1px solid rgba(255, 0, 0, 0.5);
}
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }

From: dev.to/gajus/my-favorite-css-hack-32g3