Here follow instructions on how to setup Bootstrap in your Angular project.

The instructions below can be found in my Angular Gist.

The instructions here are based on this post…
https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a

The method here is using Bootstrap 4 (beta.2) with ng-bootstrap package.

Install ng-bootstrap

1

npm install --save @ng-bootstrap/ng-bootstrap

Install bootstrap 4

1

npm install --save bootstrap@4.0.0-beta-2

Add files to angular-cli.json

1
2
3
4
5
6
7

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Import NgbModule
Import NgbModule in app.component

1
2
3
4
5
6
7
8
9
10
11

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

...

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

(Optionally) Import in other modules
If you need to import in other modules, import without the .forRoot() method:

1
2
3
4
5
6

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...]
})
export class OtherModule {
}

Captain out

Started a gist with Angular tips-n-tricks cheatseat, as I find them in my path. Sharing it with you.

Tips and Tricks can be found here:
Killerchip’s Angular notes Gist

Here’s the opening tips:

Simple input without complex forms

The following is a quick example of how to simply grab input from user, without using Angular forms and form builder.
Of course it is for very simple cases.

HTML Template

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<form>

  <label for="firstName">First Name:</title>
  <input name="firstName" #firstName> <!-- create a template variable that binds to input element -->
  
  <br>
  
  <label for="lastName">Last Name</title>
  <input name="lastName" #lastName>
  
  <button (click)="submitName(firstName,lastName)"> <!-- pass the input element to click event -->
    Submit
  </button>
</form>

In Component Class

1
2
3
4
5

submitName(firstName: HTMLInputElement, lastName: HTMLInputElement) {
  // Then we can directly refer to elements as objects.
  console.log(`Submiting: ${firstName.value} ${lastName.value}`);
  return false; //returning false will stop event propagation, thus page does not reload.
}

Component adds class to itself

When defining a component you can define a class (and other attribute) on its own host element.

For example if you define the <my-component></my-component component, you can define it to have a class like <my-component class="my-component-class"> directly from compoent code. So you are not dependent on the “user” of this component to define the class.

This can be done with the @HostBinding

1
2
3
4
5

export class MyComponent {

  @HostBinding('attr.class') cssClass='my-component-class'

}

Use a link as button

Sometimes is more ‘elegant’ to use an linke (href) as button instead of a button, even if we don’t want actually to navigate away from the page. But even with no URL in the href element the page ‘refreshes’. This is how to avoid this.

If the click-handler function returns false value, then this stops propagation of the click further.

HTML Template

1

<a href (click)="clickMe()">Click Me!</a>

Component code

1
2
3
4

public clickMe(): boolean {
  console.log ('I will do something with the click');
  return false;   // returning false will stop click event from propagating
}

Captain Out…

I’m happy to announce that v1.1.1 of ngx-translate-extract-csv is now out.

In this version you can define a custom separator for the CSV files.

See: https://github.com/killerchip/ngx-translate-extract-csv/blob/master/CHANGELOG.md

About ngx-translate-extract-csv

ngx-translate-extract-csv is a tool that becomes handy when doing Localization of Angular projects using ngx-translate library and the ngx-translate-extract tool. It will gather up the language .json files created into a single CSV file that can be easily imported to XLS.

Installation

1

npm install ngx-translate-extract-csv --save-dev

More info at:
https://www.npmjs.com/package/ngx-translate-extract-csv

Captain Out…

I’m happy to announce that v1.0.0 of ngx-translate-extract-csv is now out.

ngx-translate-extract-csv is a tool that becomes handy when doing Localization of Angular projects using ngx-translate library and the ngx-translate-extract tool. It will gather up the language .json files created into a single CSV file that can be easily imported to XLS.

In v1.0.0 it now has the reverse operation. Split the “translated” CSV files into separate .json files to be used by the Angular app.

Installation

1

npm install ngx-translate-extract-csv --save-dev

More info at:
https://www.npmjs.com/package/ngx-translate-extract-csv

Captain Out…

Sharing my draft notes from Udacity’s Android Basics - Lesson 4 online course

The course actually gave instructions and a challenge of building your own card as android app using Android Studio and deploying in a real Android device.

Here are my notes which can be found also at My GistHub:

Preparing to work with Android

• Download and install latest Android Studio.
• Configure your phone to become developer (YouTube instruction video)
• Connect your phone to the computer
• Install Driver (Windows environments only). (Details Here)

From Design to Code

1. Identify the Views to use (TextView? ImageView?)
2. Position the Views (ViewGroups and positioning)
3. Style the views (Fonts, colors, sizes, etc.)

Referencing an image

Images are saved in app/drawable folder. E.g androidparty.jpg.

Then they can be referenced as source from the ImageView.

1
2
3

<ImageView
...  
  android:src="@drawable/androidparty" />

Note: No need to add the extension of the image file.

A Sample ImageView

Use it as a quick reference for ImageView properties:

1
2
3
4
5
6

<ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/myImage"
        />

A Sample TextView

Use it as a quick reference for TextView properties:

1
2
3
4
5
6
7
8
9
10

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:layout_marginLeft="16dp"
    android:text="Hello World"
    android:fontFamily="sans-serif-light"
    android:textColor="@android:color/white"
    android:textSize="32sp"
/>

Draw Your Own Card challenge

Here’s the reference to my own card that I created as part of the practical challenge of this lesson:
https://discussions.udacity.com/t/make-your-own-card/19643/6766

I actually created a Memory card for my son Orestis to remember the trip we took with “Mountzouris” Locomotive train last summer (2017).

Captain Out…

Another example use case of Angular-RxJS

You can find this example and other examples in my Gist Repository.

Launch a series of requests one after the other

In this example we launch a series of requests from information derived from an array. The requests are launched one after the other. This means a “next” request is launched only when the “previous” has been resolved.

The trick here is done by concatMap operator which does exactly what we want. So we create an Observable based on an array of initial values. Then concatMap will render them into a single stream the way we described above.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/from';
import { concatMap } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

...

const myEvents: number[] = [1, 2, 3, 4, 5];
const myobs = Observable.from(myEvents).pipe(
  concatMap (evt => {
    return this.http.get(`https://jsonplaceholder.typicode.com/postss/${evt}`);
  }),
)
.subscribe( /* handle events here */);

Bypass errors

The above approach, will stop the stream if one of the requests returns an error. What if we wanted to continue with the next requests even if one of them returned an error?

The materialize operator wraps all events (Events, Errors, Complete) to a new object called Notification. Thus errors and “complete” events are treated as normal events and do not stop the stream. Of course you have to handle the errors-complete events.

1
2
3
4
5
6
7

import { materialize } from 'rxjs/operators';

...
 return this.http.get(`https://jsonplaceholder.typicode.com/postss/${evt}`).pipe(
    materialize()
 )
...

This is quick overview of the sessions that I participated and the key take-aways I take away from this conference.

Day 1

It’s a small world after all

Sander was very inspiring. The world is changing in blazing fast speed and software development ecosystem is trying to catch up with the demands.

My key take-aways:

• Small movable parts in the software is the future (aka microservices, nanoservices).
• Stop doing projects, and start buiding MVPs (minimum viable products).
• Think small, deploy early and frequently.
• Continuous Delivery: Pick backlog item, build it, test it, deploy it,… (Google does it with Gmail).
• Testers: test less and less, build automated tests more and more.

Dealing with Information Overload - Personal Productivity for Techies

We are bombarded with information and we need to absorb it all… or not? Scott is a charismatic presenter and he gave advice on how to stay focused on your tasks, and be productive while not getting overwhelmed.

My key take-aways:

• Effectiveness is different than efficiency. Effectiveness is doing the right things. Efficiency is doing things right.
• Drop the ball. You don’t have to read everything. Triage your inbox.
• Importance Vs Urgency:

• FOMO = Fear of missing out. Don’t FOMO. If something is important it will come back to you several times.
• Right 3 things that you wish to do each day, week, year. At the end of each day, week, year evaluate if you did it.
• rescuetime.com: Productivity tool to understand where you spend your time.

I personally would recommend to take a look also at:

• Getting Things Done
• Priacta

Mobile Web Performance

Estelle presented concerns and pitfalls when building web pages that will be (surely) accessed by mobile devices.

Find her presentation here:
https://estelle.github.io/viewsource/

Elegant Angular

Jeremy actually presented an overview of the Angular framework and its strong points, inlcuding Typescript, and RxJS (ReactiveX).

You can find his presentation here:
http://codefoster.com/deck/elegant-angular

Error Handling Made Easy

Stratos and his team is preparing a very promising Error Handling library, and I can’t wait for the Javascript version of it.

You can find the library for Swift and Java here:

• https://github.com/Workable/swift-error-handler
• https://github.com/Workable/java-error-handler

Thinking Reactive in Javascript

Ivan introduced reactive programming and then mainly quick introduced React and Cycle.js.

SonarLint & SonarQube

Freddy introduced the tools SonarLint and SonarQube that perform static analysis on your code and can spot bugs, vulnerabilities, etc. Also presented the general method of how to write a static code analyzer.

Key take-away:
You install SonarLint / SonarQube and you find a long list of potential bugs, and poor quality. What do you do?… Answer: NOTHING!!! It works. If you start refactoring you inject more possibilities for bugs.

Start taking care of the quality of your new code as you write it. You will at some point will have to touch/re-write your existing code. It is at that point that you increase the quality of your existing code. In the long term, the precentage of low quality code will fade to zero.

The Secret Sauce of Successful Teams

Sven did a presentation on what are the characteristics of a successfull team, and the team practices they use at Atlassian.

It’s all summed up here:
Atlassian’s Team Playbook

Day 2

Javascript and the Rise of New Virtual Machine

Scott presented in his own unique way how the browser and Javascript are becoming the new platform that everything probably will be running on.

Serverless Computing & the rise of nanoservices

Paris explained and demonstrated how to get started with writing Azure functions. The future will be become more and more micro/nano-served.

AI and UX for Chatbots: A Practical Guide for Developers

Chatbots are on the rise and most probably will be the new mobile app. Dimitris and Stavros (the Chatbot ninjas) explained what a Chatbot is, how it is structured and how to approach them.

If you are interested in Chatbots look no further than their activities at Helvia.io.

Hardware Hacking for JavaScript Developers

Javascript is not only for the web. Javascript can help you create your own devices and gadgets. As Tim demonstrated by live-coding an Andruino and a Raspberry Pi 3 device, your imagation is the only limit.

Building an Angular.js app the “Angular” way : Lessons learned

Vasiliki and Alexandros explained to us how AngularJS framework helped to build a commercial app for their organization. Although if you get started today you will go for Angular.

Note: AngularJs = Angular v1, Angular = Angular v2+

Failed and successful stories with Technical Debt

Antonio started by explaining what is technical dept, and various success and failure stories dealing with it.

• Technical Debt: he implied cost of additional rework caused by choosing an easy solution now instead of using a better approach that would take longer.
• What causes technical debt:
  • Business pressure to deliver.
  • Ignorance that we are creating it.
• How to prevent it:
  • Code review
  • Say “No” when you have to. Don’t deliver poor quality due to pressure.
• How to deal with it
  • Explain to business on “money” terms. Impact on customers and brand.
  • Make it a story, backlog items, etc.
  • Communicate with the team, communicate with the team and communicate with the team.

Closing

It was fun, it was exciting, it was usefull. Unfortunately I wish I could be in two places together to participate in all sessions.

Definately will participate next year.

Captain out…

Sharing my scratchpad notes for Udacity’s “Android Basics” Scholarship - Lesson 3: Building Layouts - Part 2.

You can find the notes here in my Gist site.

The course is related to Android Layouts, like RelativeLayout, LinearLayout, etc.

Captain out…

Here are two example use cases for RxJS streams with Angular. You can save the link as a reference.

This is intended to be the start of as series of use-case examples of RxJS with Angular. I will be gathering these and future use-cases in my Gist pages.

In this post:

• Monitoring until: In this scenario we want to repeatedly monitor an API endpoint, until it retuns a specific value (or condition).

• Gather up info from APIs: In this example we gather up information from two different API endpoints, combine them and present them as one object to the subscriber.

Here follow code snippets and examples of RxJS and HttpClient in Angular

Monitoring until

In this scenario we want to repeatedly monitor an API endpoint, until it retuns a specific value (or condition).

Explanation:

• We use interval operator to create an observable that emits a dummy event (a counter) on specific intervals.
• We use these dummy events to trigger calls to remove API, and merge the result back to the stream, with mergeMap.
• Finally with takeWhile we check if the condition we want is met. If the conidition is met then
  • the particular event is not emitted
  • the transmition stops

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/Observable/interval';
import 'rxjs/add/operators/mergeMap';
import 'rxjs/add/operators/takeWhile';

...

const monitor = Observable.interval(2000)    // parameter is milliseconds
  .mergeMap (() => this.httpClient.get(remoteURL) ) // call remote API that returns Χ
  .takeWhile ((X) => X === desiredValue /* condition that defines if the event will be emitted.
  
monitor.subscribe((X) => /* handle the events here */ );

...

Note: The above code works for Angular with RxJS 5.4 and older. With RxJS 5.5 .pipe can used to apply operators.

Gather up info from APIs

In this example we gather up information from two different API endpoints, combine them and present them as one object to the subscriber.

Explanation:

• We create an observable that queries the 1st endpoint.
• With mergeMap operator we trigger query for the 2nd endpoint. The 2nd query depends on the results of the 1st query.
• Finally we combineLatest the two observables into one that emits the combination of the two.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

...
const postArray = this.getPosts();

const comments = postArray.pipe(
  mergeMap(posts => this.http.get(`https://jsonplaceholder.typicode.com/posts/${posts[1].id}/comments`))
);

const latest = combineLatest (postArray, comments, (posts, cmnt) => {
  return {a: posts, b: cmnt};
})

latest.subscribe(data => {
  this.posts = data.a;
  this.comment = data.b;
});

Note: We use RxJS 5.5 which now use the ‘lettable’ operators.

Captain out…

Sharing my notes and experience from Voxxed Days Thessaloniki 2017 - IoT Workshop

I was really excited and really glad that I particpated in this IoT Workshop with Jeremy Foster ( codefoster.com ) an expert in IoT development.

The workshop included an introduction to IoT and Azure IoT, and then hands-on project. The hands-on project started with setting up a Raspberry Pi 3 with a camera sensor and a bread-board with a button to trigger the camera.

Then the software would grab a picture from camera, send it to Azure IoT service that would analyze the picture and respond a description of the picture… It was real fun viewing the responses.

If you want to follow up this very interesting “getting started” workshop you can find all the instructions and code at Jeremy’s GitHub.