CSS Recipe: Using the Flexbox layout mode

This article is about the using the flex-box layout mode in CSS3

Flexbox is the most useful in the context of the Responsive Web Design.

Keynote: Angular2 Basic Short Notes

Angular2

Superheroic, non-opinionated Framework.
Angular delivers the productivity and scalable infrastructure that supports Google's largest applications.
Despite the fact that, new 2.0 version of Angular is focused on ES6 standart and is Not compatible with the 1.4, it's definitely worth to use it.

Angular leverages ES 2015 standards and doesn't force you to stuck with one option.
You can use TypeScript, Dart or JavaScript to write your application.

Catch JS breakpoints in IDEA

How to debug JS from IDEA

Always wanted to place and catch breakpoints right into IDEA rather than doing it in browser's Dev tools.
It's fairly simple, it boosts your development speed and requires only two steps:

Boost your web development speed with LiveReload

Live Reload

LiveReload monitors changes in the file system.
As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.

---

Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.

Angular Recipe: Avoid empty option in HTML select element

HTML select in Angular JS

HTML select element is often used to create a drop-down list.
You could use either ng-repeat or ng-options directive to fulfill it with options.

Note that the value of a select directive used without ngOptions is always a string.

That's why i prefer to use ng-options directive rather than ng-repeat one.

Note: if ng-model value is undefined, has a wrong type or is not contained among the options set, than selected element into your drop-down would be empty.

---

Note: It also might happen when ng-model variable is distinct into the child-scope from the one that u've defined in JS.

If you are working with objects that have an identifier property, you should track by the identifier instead of the whole object.

Should you reload your data later, ngRepeat will not have to rebuild the DOM elements for items it has already rendered, even if the JavaScript objects in the collection have been substituted for new ones. For large collections, this significantly improves rendering performance. If you don't have a unique identifier, track by $index can also provide a performance boost.

According to (Prototypical inheritance) your directive might create a child-scope, which could distinct your ng-model="fooBar" variable and no longer refer up to the parent’s $scope.fooBar variable.

To not storing the data directly on the scope helps in this case.

Web Resource Optimizer for Java (Wro4j)

Wro4j is a tool for analysis and optimization of web resources. It brings together almost all the modern web tools: JsHint, CssLint, JsMin, Google Closure compressor, YUI Compressor, UglifyJs, Dojo Shrinksafe, Css Variables Support, JSON Compression, Less, Sass, CoffeeScript and much more.

So, basically it allows to organize static resources in groups, minify & combine those into common file, which simplifies it's including into your webpages.

See Simple 3 Steps usage explanation directly on Wro4j - Github

Best Practice: Executions & Memory Control in JavaScript

Control the Memory & Scripts Execution speed

The less operations you do, the more processor time you save, the higher speed you have.

Each new element addition to the DOM cause reflow, which can badly affect the user experience.

Here are few points how to start doing better:

• re-locate work-intensive scripts;
• run scripts asynchronously;
• let inheritance to help with memory efficiency;
• insert DOM elements within fragments;
• declare variables as few times as possible;
• make efficient choices in terms of script execution;

Stop download javascript and css libs - use Bower

Bower

Bower is a package manager for the web, that requires Node and Git.
It allows quick and easy install of all dependencies at once and provides an opportunity for sharing those dependencies with others.

So, instead of loading third party libraries manually in zip,
u can describe dependencies on those ones and their versions into the bower.json file.