Posted on

white-space | CSS-Tricks

Here is a table to understand the behaviors of all the different values for property white-space:

New lines Spaces and tabs Text wrapping
normal Collapse Collapse Wrap
pre Preserve Preserve No wrap
nowrap Collapse Collapse No wrap
pre-wrap Preserve Preserve Wrap
pre-line Preserve Collapse Wrap

Source: white-space | CSS-Tricks

Posted on

CSS Peeper – Chrome Css Extension

Extract CSS and build beautiful styleguides. 🔎 No more digging in a code. Inspect styles in a simple, well-organized & beautiful way. Get it now! CSS Peeper is a CSS viewer tailored for Designers. Get access to the useful styles with our Chrome extension. Our mission is to let Designers focus on design, and spend as little time as possible digging in a code. Ever wondered what’s the line-height, font or a button size on a website? We provide you the ultimate tool to satisfy your curiosity. We enable you to inspect code in the easiest possible way. Check the hidden CSS style of objects, colors and assets on the web.

Source: CSS Peeper – Chrome Web Store

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