/images/soap-bubble-gdc68aeb05_640.jpg

Visual Studio Code - Linux installation

Elementary OS - linux distribution On one of my machines I use ElementaryOS linux. This flavor of linux does not support DEB or RPM packages directly so I will use tar.gz file as installation medium. Download Download code***.tar.gz file from https://code.visualstudio.com/Download address. Link to .tar.gz is under the “deb” square. Install Open terminal and go to /usr/local directory. Unpack tar.gz file into default folder and create soft-link to code application:

Setting up the Environment for Node.js and TypeScript

To be productive as a programmer the write/run/debug cycle should be as fast as possible. Because I am a little spoiled by angular-cli setup for client side web development I search for similar experience in the server side. It means that transpiling the typescript to javascript and node server restarts should be automatic and with hassle free debugging. Install prerequisites To create basic node application in the current folder use this command :

Angular and Bootstrap 4 with Sass

Create angular project with Sass support Angular has support for Sass build in. To create angular project with Sass support use the command: ng new my_app –style=scss If you update existing project use the command: ng set defaults.styleExt scss Install Bootstrap 4 with prerequisites To install bootstrap use command: npm install bootstrap@4.0.0-beta –save Bootstrap 4 require jquery & popper.js lib to be installed: npm install jquery –save npm install popper.js –save

Angular and Sass with Bootstrap 3 style support

Integrating Sass and Bootstrap 3 to angular project If you want to customize default bootstrap 3 CSS theme, you will need to change it. But to be able to do that you will need to install CSS extension language Sass and bootstrap-sass definitions and then compile custom bootstrap CSS within your angular application. This is officially supported by angular-cli tools. Setup angular project for Sass If you create new angular project you can add option “–styles=scss” to “new” command.

Angular - create currency edit component

You can get source code of this project from github repository “ANGULARMYAPP” . Edit form What I wish to accomplish is to enable edit function on the currency list component. Button “Add” will open editing panel, after saving changes the editing panel will close. The Pencil open source product is used for GUI prototyping. To create new component we use angular command line interface and generate new component skeleton.

Augury - debug angular components

Augury - chrome development extension If you need more information about state of the running angular application, then you need augury chrome extension. As soon as application is loaded, augury analyze components tree and display it in nice graphical view. You can follow any changes in your application as they occur. Also you can inspect all properties of your components.