Photo by Markus Winkler on Unsplash

Dependency Injection is important concept of angular structure, instead of creating new instance manually, you can just declare it on the module or component.

We can use same instance for the whole app, but some times you might encounter the situation that requires different instance to each component.

But is it possible to inject different type of instance into another service?

Let’s say we have ScoreService says and we have 2 different component which show them in different languages.

class ScoreService(private scoreI18nService: ScoreI18nService){  name: string;
good(){
return this.name + ', ' + this.scoreI18nService.good()…


Validation of form control is critical and most time we check the validity of the content and delete or fix certain characters with Regular Expression(RegExp).

Photo by Clark Van Der Beken on Unsplash

And I’ve seen many codes declaring these RegExp in somewhere of the app and use it over and over with and or passing this as an argument of the function without any guards.
This article is why it is not a good practice and how it might get you into a trouble.

RegExp.exec vs String.match

Most time exec and match returns identical value in array. …


Photo by Battlecreek Coffee Roasters on Unsplash

Jest is well-known test framework, it uses jsdom, which runs tests faster than karma. Let’s implement jest in the project and make test step by step.

Jest setting

Uninstall karma and jasmine

npm uninstall karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core jasmine-spec-reporter

You might have types and more dependencies on jasmine and karma. It’s time to let them go.

Install Jest and jest-preset-angular for preset

npm install jest jest-preset-angular @types/jest --save-dev

jest-preset-angular is preset for angular. It makes easy to implement jest to angular.

Create tsconfig.spec.json

If you tsconfig.json is suitable for testing, you can use it, but it is better to make new environment for it.

{ 
"compilerOptions": {…


Photo by pine watt on Unsplash

First time I used typescript, enum was great, but by some reasons I stopped using it in typescript. And this article is to demonstrate why I stopped using.

https://www.typescriptlang.org/docs/handbook/enums.html

| Enum into plain javascript

enum ActionType {
ADD = 'ADD',
SUB= 'SUB',
MULT= 'MULT',
DIV = 'DIV'
}

Typescript generates enum object in plain javascript like this shape.
with var keyword, it is translated into Immediately-Invoked Function Expression(IIFE).

var ActionType;
(function (ActionType) {
ActionType["ADD"] = "ADD";
ActionType["SUB"] = "SUB";
ActionType["MULT"] = "MULT";
ActionType["DIV"] = "DIV";
})(ActionType || (ActionType = {}));

This is not a big problem, but some might be bothered by this result, first…


Photo by James Pond on Unsplash

Dependency Injection is popular pattern in programming, creates value or instance outside of the class and inject it into another object to use that.
When you see the Module of Angular, you can see how hard they tried to make applying DI simple by declaring metadata.

@NgModule({   
declarations: [AppComponent],
imports: [BrowserModule],
providers: [AppAPIService],
bootstrap: [AppComponent]
})
export class AppModule {}

An instance created upon angular concepts(like component, module, service), they look into the dependencies at their level, but if nothing found, it crawls back to the root and use it(like prototype chaining).

This means that you can always inherit the…


Photo by Joanna Kosinska on Unsplash

Always assuming is the enemy of learning, back to angular for 3 months, I realized how much React and Angular chose different path to the problem(managing DOM and update).

So I wanted to summarize libraries/frameworks I worked with and what I think of them.

JQuery(to standard API)

jQuery is the first library that I ever used(even before vanilla javascript) and still found it brilliant.

When jQuery was out, browsers provided different spec of DOM Api and Spec, the mission of jQuery was simple, to try to build the web standards on the solution. …


Photo by Maria Teneva on Unsplash

Redux

Redux is a famous state management library, it offers centralized global store and helps maintain the states with consistency. But when the store gets bigger and bigger you get wonder, is this a good way to manage states shared among components as global state.

Redux is simple.
Reducer returns new state(or same one if no change requires) by the action dispatched and triggers listeners to notify its change.
In other words dispatch triggers this notification. Here’s the code.
https://github.com/reduxjs/redux/blob/master/src/createStore.ts#L225

function dispatch(action: A) {    
...
if (isDispatching) {…

Photo by Olav Ahrens Røtne on Unsplash

RxJS is a real life savior when it comes to the app with complex data structuring, helps building solid data pipelines easy and elegant.
Like any other tools, this conveniency and simplicity comes with the chance of messing up if you don’t know the proper use case, that requires the knowledge of which is the (still figuring out what is the best).

This is from KnowledgeShare at my team and based on some mistakes we’ve seen. Some are silly and some are critical to the app. …


Photo by Luke Chesser on Unsplash

It is good to have meaningful commits merged to master branch but when you actually commit, usually they are not so.

So we do rebase and most time we use rebase squash.
But you know, there’s easier way to squash commits with reset.

Reset: easier than rebase squash

we use reset to remove working-tree or change HEAD(which indicates the last commit of the branch) of the branch.

rebase has 2 options.
and .

removes all the working tree and the staging(except untracked files), but preserve changes as working tree.

With this definition we don’t need to process every steps of rebase(remember, this…


To access spreadsheet of other apps over APIs, you need to make a credential.
I usually store language packs on spreadsheet and wrap it to json on my project. This is about how you create credentials.

| Create Project.

Visit https://console.developers.google.com/projectcreate to create a project

I named project name When you click CREATE it will jump to Credentials

| Create Credential

If you failed to go to Credentials, you can access it by menu
(Move to APIs & Services > Create Credentials > Service Account)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store