PostCSS - The Next Cool Thing

What is post CSS?

Is PostCSS one of Sass/Less kind things?
The one-word answer is: NO
In more than one word -
postCss it is lot of plugins under same parent node plugin clalled: postcss , which have same target - to do various things on CSS.

Which things for example?

First of all take a look on postCSS README at github page and then here to get the impression of kind of various plugin some good guys made for us... (writing this post I was inspired by this grate tutorial)

Challenge

The challenge is to play a little with postCSS and use it in react-first-steps repo, from previous posts
To make use of variables mixins and sass like postcss-nested plugins

webpack.config

First you need to install all the plugins

npm i postcss-loader postcss-import postcss-mixins postcss-nested postcss-simple-vars  --save-dev

to add postcss.config file to the project

var postCSSConfig = [
/* autoprefix for different browser vendors */
require('autoprefixer'),
/* reset inherited rules */
require('postcss-initial')({
  reset: 'inherited' // reset only inherited rules
}),
/* enable css @imports like Sass/Less */
require('postcss-import'),
/* enable mixins like Sass/Less */
require('postcss-mixins')({
  mixins: require('./src/mixins')
}),
/* enable nested css selectors like Sass/Less */
require('postcss-nested'),
/* require global variables */
require('postcss-simple-vars')({
  variables: function variables() {
    return require('./src/variables')
  },
  unknown: function unknown(node, name, result) {
    node.warn(result, 'Unknown variable ' + name)
  }
}),
/* PostCSS plugin for making calculations with math.js  */
require('postcss-math'),
/* transform W3C CSS color function to more compatible CSS. */
require('postcss-color-function')
]

// Export the PostCSS Config for usage in webpack
module.exports = postCSSConfig;

To update webpack.config file

         {
            test: /\.css$/,
            include: srcPath,
            loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]&camelCase!postcss'          
         }]

for view the full code look at this repo

Using Animation Module With Angularjs

Hi dear dudes & dudesses!
Today we gonna speak about angular animate module,
Yes, in case you didn't noticed , alongside with "controller", "directive" and "filter" angular recipes, exists another one - "animate".
You can use it by adding "ngAnimate" module to your modules:

angular.
  module('yourApp', [
    'ngAnimate',
    ...
  ]);

Until now I didn't have a chance to really use it in some of my projects, actually I have only read about what it suppose to do in great phonecat tutorial - the "first steps" tutorial that angular guys made for us.

Challenge

So current challenge is to try to animate the dropdown directive I have created in one of my old posts, in a way to will expand when open and collapse when closed.

Get Started

Since angular animations triggered when one of angular events enter, leave, add and move takes place - we need to modify our components in a way it will use ng-if directive which cuases enter and leave events to fire:
Instead of hide/show dropdown menu by adding and remove 'open' class on its parent I will make dropdowMmenu template to listen to its parent isOpen property...

angular.module('ui.components',['ngAnimate'])
.component('dropdown',{ 
  controller:function($element,$document,$animate, $timeout) {
     $element.addClass('dropdown');
     
     var menu = $element.find('dropdown-menu')[0];
   
     $document.on('click',(evt)=>{
        if(!$element.find('dropdown-toggle')[0].contains(evt.target)){
          this.close() 
        }
     })
 
    this.close=() => {
       $timeout(()=> this.isOpen = false,1); 

    }
    this.open=() => {
       $timeout(()=> this.isOpen = true,1);
    }    
  }
})
.component('dropdownToggle',{
  require: {
    parent: '^^dropdown' 
  },
  controller:function($element) {
    $element.addClass('dropdown-toggle');
    $element.on('click',($event)=>{
       this.parent.isOpen ? this.parent.close() : this.parent.open();
    })     
  }
}) 
.component('dropdownMenu',{
  require: {
    parent: '^^dropdown' 
  },
  transclude:true,
  template:'<div class="dropdown-menu" ng-if="$ctrl.parent.isOpen" ng-transclude></div>'//IMPORTANT: hide menu with ng-if directive
})

Important!
Since now we use ng-if to hide and show menu we must remove display:none rule from CSS of .dropdown-menu class.

Animation Module

The time for use animation recipe came.

.animation('.fold-animation', ['$animateCss', function($animateCss) {
  return {
    enter: function(element, doneFn) {
      var height = element[0].offsetHeight;
      return $animateCss(element, {
        from: { height:'0px' },
        to: { height:height + 'px' },
        duration:0.25
      });
    },
    leave: function(element, doneFn) {
      var height = element[0].offsetHeight;
      return $animateCss(element, {
        from: { height:height + 'px' },
        to: { height:'0px' },
        duration:0.25
      });
    }    
  }
}]);

I copied this code from this angular example with slight modifications
See full code on this plunker.
Also you can read more about angular animations in their accurate docs

Angular2 and NgRx

My Challenge was to get little experience of working with ngrx .
What is NgRx?
NgRx is RxJS powered, inspired by Redux state management lib for Angular2.

Basic Philosophy

Like many state management frameworks like Redux - app skeleton must include following module types - Store, Actions and Reducers

Store

simple class or object representing the application state

import postListReducer, * as fromPostList from './post-list';
import postReducer, * as fromPost from './post';

export interface AppState {
    posts: fromPostList.PostListState;
    post: fromPost.PostState;
};

Actions

function that passes type and params of what reducer should do

    static LOAD_POSTS = '[Post] Load Posts';
    loadPosts(): Action {        
        return {
            type: PostActions.LOAD_POSTS
        };
    }

Reducers

Immutable function that returns new object containing changed current state returned

export default function (state = initialState, action: Action): PostListState {
    switch (action.type) {
        case PostActions.LOAD_POST_SUCCESS: {            
            return action.payload;
        }
    }
}

Effects

Since state actions are asynchronous - it is better to take advantage of using effects:

    @Effect() loadPosts$ = this.update$
        .ofType(PostActions.LOAD_POSTS)
        .switchMap(() => {            
            return this.svc.getAllSections();
        })
        .map(posts => this.postActions.loadPostsSuccess(posts));

Refactoring our components

Now we can replace our logic inside components:
Instead of:

   this.loadHtml.getPost(params['id']).subscribe(post => {
        this.post = post;
      })

We can now write:

  this.store.dispatch(this.postActions.getPOST(this.name));
  ...
  ...
   store.select('post').subscribe((post:Post) => {
     this.post = post;   
  })

Much more accurate, is it?

Learning Angular2 - Free Stuff

Hi my dear readers, hope you all well...
Wanted to publish some interesting post about angular2 form validations.
Template driven forms VS reactive forms, NgModel, NgForm etc... You know

But instead i decided it will be more useful to publish links to some angular2 tutorials/ blogs i gathered across internet:

Free online Books:

• learn angular2
• angular2 training

Free video tutorials:

• angular2 fundamentals

Blogs

• todd motto angular2

Github Repos

• angular2-tour-of-heroes (first steps)
• ng-pokedex (excellent repo with e2e)
• ngrx/example-app (app using ngrx)

Thats not a lot, but pretty angouth to start with...
Anyway feel free to add more free useful stuff in the comments!