In this awesome reading we will see a few things, among others:

• An environment for a local node of the Blockchain with Hardhat
• Setting up accounts with Mnemonics or directly with Addresses in Hardhat
• All necessary config for Angular and Web3
• Login UI
• Login with Metamask
• Show the balance in our account

Introduction

A bunch of tools & frameworks and libraries exists for creating Dapps, however at the time I am writing the article I choose Hardhat and Angular

Why? Hardhat… Among others

Run Solidity locally

Debugging-first

Extreme flexibility

Fast Development

Typescript Integration

Why Angular?

• Awesome framework, not really fashion right now (still wondering why). There are a few nice competitors, however it is still the most complete one allowing you accomplish things others do and also things others can’t.
• Less code, more powerful & scalable and less entropic about plugin and 3º party things
• I agree yee it has a big learning curve but nothing you can’t jump in terms of engineering, I mean anything about landing into the space. 🤔 Maybe, it is a conspiracy to make us believe it is the worst choice…As long as the Google Team is in charge of Angular spending more time in creating and maintaining it, rather than do marketing for me it is ok…

Hardhat, Run your own node

Init Hardhat

$mkdir hardhat-tutorial
$cd hardhat-tutorial
$npm init --yes
$npm install --save-dev hardhat
$npx hardhat

Metamask network config for Hardhat

Accounts in Hardhat

There are two ways of setting up custom accounts in Hardhat:

• Hardcoding directly accounts

hardhat.config.js

module.exports = {
solidity: "0.8.4",
networks: {
 hardhat: {
   accounts:
   [
    {
      privateKey: '0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80',
      balance: '1000000000000000000'
    },
    {
      privateKey: '0xde9be858da4a475276426320d5e9262ecfc3ba460bfac56360bfa6c4c28b4ee0',
      balance: '5000000000000000000'
    }
  ]

...

Note that Ethers are in Weis. Go to the link for further details about the units

• Via Mnemonics a Bip39

If you have no idea about what I am talking, I share a couple of articles describing these concepts quite well.

• Mnemonics | CoinMarketCap
• Official BIP39 Word List (mnemonic)

So configuring a HD Wallet

hardhat.config.js

module.exports = {
solidity: "0.8.4",
networks: {
 hardhat: {
   accounts:
   {
      mnemonic: "test test test test test test test test test test test junk",
     path: "m/44'/60'/0'/0",
     initialIndex: 0,
     count: 4,
     passphrase: ""
   }
...

For further details with custom config in hardhat

Running stand-alone in order to support wallets and other software

Importing Account in Metamask

Angular

Create an empty project

$ng new ng-metamask-login

Make your Angular App -> Dapp

Dependencies

The minimum of libraries we need to interact with our node to make login and web3

$npm install ethereumjs-wallet bip39 web3 crypto-js --save

Next step, I will go through the most common problems I have found to arrange the project of a Dapp in Angular

Other Dependencies for a custom ts/webpack config

Basically, because we would need to make use of node libraries for the Front so we will configure through browserify

$npm install crypto-browserify stream-browserify stream-http https-browserify os-browserify url --save-dev

We need to reconfigure it everything with webpack for building a custom config that works with our bundle

Allowing dependencies in Js will be the key for integrating those libraries that are already compile to js. A little bit confusing, but this is because they are originally for Node so we must make compatible with our ts project

angular.json

"build": {

...

"scripts": [],
"allowedCommonJsDependencies": [
    "bip39",
    "crypto-js",
    "ethereumjs-wallet",
    "web3"
  ]
},

...

Configure browserify for loading node libraries

tsconfig.json

"compilerOptions": {

...

"paths" : {
   "crypto": ["./node_modules/crypto-browserify"],
   "stream": ["./node_modules/stream-browserify"],
   "http": ["./node_modules/stream-http"],
   "https": ["./node_modules/https-browserify"],
   "os": ["./node_modules/os-browserify"],
},

...

Create an index.d.ts in your src with a wrap of this libraries so you don’t get you app crushed

index.d.ts

declare module 'bitcore-mnemonic';
declare module 'crypto-js';

Still is crashing, believe me you can try…So last issue, we solve with polyfills

polyfills.ts

...

* APPLICATION IMPORTS
*/
(window as any).global = window;
import { Buffer } from 'buffer';
global.Buffer = Buffer;
global.process = {
env: { DEBUG: undefined },
version: '',
nextTick: require(‘next-tick’)
} as any;

Angular Dapp

Finally, we can develop nice features for our Dapp and everything in a local environment.

Our goal is login and show our balance. And of course, there are many ways to achieve it, but we divide the puzzle in two pieces:

• Service for interacting with the wallet and web3
• Component containing the login UI and logic for the user to use our Dapp.

Note: For the sake of simplicity in this post, I can’t go through all our code in Angular trying to explain every details. However, I share gists leaving all the important feature commented with what we have done in every step so you can find it more understandable

Web3 Service

Service for wrapping all web3 features and create a little core of all our functionalities

$ng generate service web3

Then

web3.service.ts

About the path you can google & research about Bip39. Anyway, a little bit more info

HD Wallets and Derivation Paths: Explained

Note: see getInfo function | For logging purposes, we trace some info like our web3 version, what type of network and all the accounts we set up in hardhat.

Note: see getBalance function | Take care, we should convert from Weis.

Seeds will be the key for logging into the Dapps so we save & remove them in local storage to make easier our logging. Also, we encrypt and decrypt them avoiding to be easily hacked making of crypto-js.

Login Component

In our template we create a form, error messages and buttons enabled or disabled depending on some conditions

login.component.html

In our ts we control all the interaction with the user and the platform

login.component.ts

Result

I always try to share onStackblitz or similar, although this time I can’t put hardhat online and locally obviously, it should go to a Testnet.

So this time I leave some screenshot of the Dapp and the repositories for if you want to run locally in your pc

Code

I share two github repository with all the code 👨‍💻 I explained before. Just download and follow the instruction (Both in branch feature/login-hardhatlocal).

GitHub - ackuser/ng-metamask-login at feature/login-hardhatlocal

$npm i

$npm run start

GitHub - ackuser/hardhat-sample at feature/login-hardhatlocal

$npm i

$npx hardhat node

Next steps

We will see & learn in this post how to create a local environment of the blockchain to avoid connecting to a Testnet and in this way having all the control about the wallets. Then, we have made a login just to authenticate our wallet and finally we showed the current balance associated to the address.

This is the most basic part, we will cover in next chapters how to put our project in a Tesnet, how to process a transaction, something about ERC Tokens a more complex features…

Conclusion

I just share my experience in this new exciting subject, leave your comments if you found it really helpful or if you see any point of improvement. It would be really appreciated.

Basically we all love scalable projects knowing what we do, better if we can rely on the terminal for automating tasks and simplicity must be a plus so we focus in the solution to solve rather than solving problems for the solution to solve. That’s the reason why I choose Angular & Hardhat, I think it is nice .

Obviously, some features are only for learning purpose and if you implemented a real one you will take more care security and so on and so forth.

In the past week, we have already create a component, basically a custom input form component.

We wish to have everything checked in our new project and quality processes force us to coverage a % of our code with testing, so we have to be ready to test.

We are bored of boring test for testing functionalities or unit testing that mocks everything in the core of nowhere else, so we decide to use Cypress to be sure things work as we expected they work.

No comparison and comments vs its predecessors like Selenium, Protactor… It is just faster, very nice to code and it gets the job done.

Introduction

Summarising, we have to test this component and its different part of the code

If you want to see how we created this custom component, click the link below 👇

Custom Form Elements in Angular

1. Integrating Cypress

ng add @cypress/schematic

2. Think before you make

What we are going to test is the three states of the component: Default, Filled and Active.

Overall, We do focussing on the structure of the data. Then, in terms of the changes we see into the styles and we get deep into what is changed in our Css’s state.

Default

We create the component, there is no problem and the component exists in itself with a correct field

Filled

We write down into the input and the filled text should appear in the input

Active

Changes are reflected in the UI

3. Now, testing it with code

We build our first tests here

cypress/integration/spec.ts

describe('Custom Input Form Component', () => {

const typeComponent = 'app-text-field-form'

beforeEach(() => {
  cy.visit('/')
})

Just visiting the webpage…

Default

We create the component, there is no problem and the component exists in itself with a correct field

it(‘Default’, () => {
  cy.get(typeComponent).contains(‘Another name’)
})

Filled

We write down into the input and the filled text should appear in the input

it('Filled', () => {
   const foo = 'Hello, World';
   
   cy.get(typeComponent).type(foo)
   cy.get(`${typeComponent} > input`).should('have.value', foo)
})

Active

Changes are reflected in the UI

it('Active', () => {
  const foo = 'Hello, World';
  
  cy.get(`${typeComponent} > input`).first().focus()
  cy.get(`${typeComponent} > input`).should('have.css', 'border', '1px solid rgb(146, 119, 255)')
})

In my case, I just compared with the border because it is the only thing to be added when it is Active. However, I admit you can do in a more elegant way adding classes and comparing in Cypress if the classes were added successfully.

Here is the API of Cypress to interact with the DOM

Table of Contents | Cypress Documentation

Open our tests

ng e2e

Code

I don’t share a Stackblitz because it is hard to integrate with Cypress and you won’t be able to run commands, however I have created a github repository with all the code 👨‍💻 I explained before.

GitHub - ackuser/ng-custom-form-input-cypress: Custom Form Input created with Angular and tested with Cypress

Conclusion

If you are newbie in Cypress & testing or even if you didn’t know it, I hope this article can give an idea of the possibilities around Cypress and how it helps us to automate tasks (it comes with a lot of features like video recording, screenshots, etc).

Nowadays, it is the best Framework for testing Front, this kind of tests give us confidence and allow us to automate interactions.

There are more capabilities that we may see in other posts, so follow me if you want to see how I solve normal problems that you can find in your daily basis. Stay tuned and see you soon!!!

Clearly, no one wants boilerplate in its code and there is no need to repeat your code over the time, however sometimes we need to customise components and our first choice is to choose a css framework, a prebuilt design system or a rich ui library.

But why we don’t create them from scratch? We may create our own component faster and we may reuse in a near future.

Introduction

We have to create this week for our department…

Our first thought is to start using Angular Material or Bootstrap…or Maybe Polymer or do a research for a similar web component or another kind of library to cover this form component…

In this post we will create agnostically, only Angular and our skills styling component

Let’s create

1. Generate it

$ ng g c text-field-form

2. Style it

There are two elements the input and the descriptive field over the input

text-form-field.component.html

<span class="field">Street Address</span>

<input class="input" type="text" />

text-form-field.component.scss

@import '_fonts';
@import '_colors';

:host {
    width: 240px;
    height: 73px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

.field {
    @include font(12px, medium, 15px, -.25);
    color: $secondary-dark-1;
}

.input {
    @include font(12px, bold, 15px, -.25);
    width: 240px;
    height: 48px;
    border: 1px solid $secondary-light-1;
 }
}

Tips here:

★ host: , so you don’t need to create a div wrapping all the elements in html

★ flex, you gain responsiveness in your components

★ font, create dry functions with Sass for less code

★ declare your principal colours as a variables

And here we are

Mmm wait look when we hover it, bad border and cursor right

text-form-field.component.scss

...

.input {
   @include font(12px, bold, 15px, -.25);
   width: 240px;
   height: 48px;
   border: 1px solid $secondary-light-1;
   border-radius: 4px;
   caret-color: $primary-light-1;

   &:focus {
      outline: none;
   }

   &:hover, &:focus {
      border: 1px solid $primary-light-2;
   }
}

...

Tips here:

★ caret-color and you style the cursor

★ outline, the you remove the blue border line inherit in all the inputs in html

★ hover and focus, you will have your border forever

3. Field name parametizable

You can solve this with an @Input, however I see more elegant for spaced and long names to be passed through ng-content

text-form-field.component.ts

...

control = new FormControl('');

...

...somewhere.html

...

<app-text-field-form>
   Another name
</app-text-field-form>

...

4. Form Control, make it reactive and valid for Angular Forms

Get reactive power in your custom form component just with two lines!!!

text-form-field.component.ts

...

control = new FormControl('');

...

text-form-field.component.html

...

<input class="input" type="text" [formControl]="control" />

...

Final code

Next steps

We will see & learn in another post how to pass the value from the Form Control of the Form Component to its Parent Component, or just pass it like a FormGroup to build a bigger Form outside of it

Conclusion

If you try to build a very customise component with a library half of the times you’ll be faster from scratch.

Summarising create your own custom things sometimes would be better, I hope you see any tips valid for using in your projects.

We will cover other interesting topics of Angular soon or better we will show how we create nice thing together solving problems that we find in the way, so stay tuned!!!

A nice agile team with the last visual prototype, you are the front developer in charge and you have to build fonts this week for the team.

I am going to show you how you can accelerate and automise several tasks to achieve this.

Introduction

Somewhere from UX:

Spartan will be used as a font and you can find it on Google Fonts

Google Fonts

and here it is

If you click on it you will be able to customise several things, but anyway it is very intuitive and easy to use.

For now we selected medium and bold and also checked. Then, they are ready to copy for our angular project.

Using it

1. Incorporate to your angular project

I suppose you are using Sass/Scss if you use Css is quite similar. Another thing is that you are retrieving the font through internet, however it can be downloaded locally for improving time in requests (as a asset).

style.scss

...

@import url(https://medium.com/'https://fonts.googleapis.com/css2?family=Spartan:wght@500;700&display=swap');

...

2. Modify your angular.json to shortener import

angular.json

"build": { // also in "test": {

...

"styles": [
  "src/styles.scss"
],
"stylePreprocessorOptions": {
  "includePaths": [ "src/assets/styles"]
},
"scripts": []

...

Then, instead of having

@import './../assets/styles/_fonts';

you will have

@import '_fonts';

3. Define the fonts

Have a look to one of our fonts

Using mixin and includes we can achieve a more dry solution

_fonts.scss

@mixin font(
   $fontSize: medium,
   $fontWeight: medium,
   $lineHeight: normal,
   $letterSpacing: normal
) {
  font-size: $fontSize;
  font-weight: $fontWeight;
  font-family: 'Spartan', sans-serif;
  line-height: $lineHeight;
  letter-spacing: $letterSpacing;
}

.h1 {
  @include font(32px, bold, 36px, -1);
}

.h2 {
  @include font(20px, bold, 22px, -0.63);
}

.h3 {
  @include font(16px, bold, 24px, -0.8);
}

.h3-2 {
  @include font(12px, bold, 15px, -0.25);
}

.body1 {
  @include font(12px, medium, 15px, -0.25);
}

.body2 {
  @include font(11px, medium, 18px, -0.23);
}

4. Use it

Just apply the class to the element

<span class="h1">
     Aliquam porttitor mauris sit amet orci Aenean
</span>

Conclusion

I hope I was able to show you the basics of the workflow between a Design System and Front (implementing the Font part relatively easy).

Also, the importance of having a good UX prototype and how you can reduce your code drastically using Angular and Sass.

It would be really nice to know how others achieve this kind of tasks in Angular or if there are other nice solutions.

Anyway, we will cover other interesting topics of Angular soon, so stay tuned!!!

Sometimes you need to format your template and you don’t want to bother your back end, neither your services in the front end part.

Predefined Pipes are a really good options for fitting your necessities in this case.

You may already know, but if not you must know that there are already exists some default pipes built in Angular

Angular

Introduction

The other day I was working in a project in which we have to show currency like X.XXX.XXX,XXX € -> i.e 1.989.674,123 €

Very basic, but interesting for new people learning Angular or for anyone who doesn’t already know how to do it.

And I will teach you how I solve it without touching any code neither in your logic (ts) or services in Front, nor in the Back. Therefore, leave you number & figures to travel along ...

i18n

In computing, internationalization and localization, often abbreviated as i18n means of adapting computer software to different languages, regional peculiarities and technical requirements of a target locale. Internationalization is the process of designing a software application so that it can be adapted to various languages and regions without engineering changes. Localization is the process of adapting internationalized software for a specific region or language by translating text and adding locale-specific components…

Code

First of all, for the sake of simplicity we are going to use an already built in pipe to convert our amounts in €

src/app/app.component.html

{{ amount | currency: 'EUR' }}

But, what about if I want to say eyy I am for example in Spain so you should show that like if I were there …

src/app/app.module.ts (I do globally)

...

import { registerLocaleData } from '@angular/common';
import localeEs from '@angular/common/locales/es';
registerLocaleData(localeEs);

...

providers: [
  {
    provide: LOCALE_ID,
    useValue: 'es-ES',
  },
],

...

That’s were the magic occurs behind the pipe, for more info about registerLocaleData and so on you can browse trough https://angular.io/api/common/registerLocaleData

I leave this little code here, so you can play with it …

Conclusions

Pipes are a good approach to leave your template cleaners, helping us to separate a lot of logic inside them.

With i18n we can see how powerful your code can be working contextually depending on your location.

There are for sure so many ways to achieve that, however I thought it was very interesting to target it from the point of view of i18n and pipes.

Stay on touch, we will see more examples to reduce your code and make your apps more adaptive for your users.

In terms of development precise, meticulous and scrupulous doesn’t mean perfect, but almost. We normally start from something like

So imagine you receive a Sketch file, should I do exactly as the design is? Well, if it is a great design deserves to do pixel by pixel.

I am going to summarise as much as I can some approach and methodologies for you to achieve development products that match visually and aesthetically in a 99% its designs…and of course with my favourite framework, Angular.

Have a look to that 👇

Theory

Maybe very clear for some people, but very unknown for many others

Layouts are the culmination of defined spatial rules and the organisation of content into one single composition. Bringing together your content into thoughtful structures is the easy part, making it all flow together with a clear hierarchy across a sea of changing platforms and screen sizes is the hard part…

Grids are useful in layout design because they help structure and organise content. Although grids are invisible in the user-facing design, it’s easy to tell at a glance whether a layout follows a grid system…

The foremost purpose of a grid — in graphic design at least — is to establish a set of guidelines for how elements should be positioned within a layout. Not only does an effective grid provide the rhythm for a design, but it also defines the meter.

Here a couple of links pointing to an interesting post for having quick look about the history behind and another one talking to some concepts regarding to spatial system, grid and layouts

In practice

Sketch

Development

The persistence of grid-based design in web and app design has also been a challenge for developers shaping web standards. In the early days of the web, developers often used tables to organise a layout. Since then, standards have evolved and we now have systems like Flexbox and CSS Grid which offer a basic framework for faithfully implementing grid systems in websites and apps.

Grid is mostly defined on the parent element. In flexbox, most of the layout (beyond the very basics) happen on the children.

Nice article to read

https://css-tricks.com/quick-whats-the-difference-between-flexbox-and-grid/

Now, we can build whatever Responsive Layout / Grid for apps with those tools.

There are already some very nice built-in frameworks / libraries defining Responsive Layout Grid like Material Design or Bootstrap.

However, I encourage you to build a custom one deciding what is better for the project with your UX colleagues

Challenge cases, all pieces together…

Defining Layouts in Sass

How is the code?

Using Grid (yes, grid in development; layout in designs)

src/assets/styles/_layout.scss

// Layout System in Large Devices

$layout-column-width-lg: 94px;
$layout-gutter-width-lg: 28px;

app.component.scss

@import '_layout';

@media screen and (min-width: 1024px) {

column-gap: $layout-gutter-width-lg;

grid-template-columns: repeat(12, $layout-column-width-lg);

grid-template-rows: 534px 266px;

grid-template-areas:

"area-1 area-1 area-1 area-1 area-1 area-1 area-1 area-2 area-2 area-2 area-2 area-2"

"area-3 area-3 area-3 area-3 area-4 area-4 area-4 area-4 area-5 area-5 area-5 area-5";

}

We just cover the position in the parent element, the code can change a little but the philosophy is the same

Defining Grids in Sass

src/assets/styles/_grid.scss

// Grid System in Large Devices

$grid-cell-lg: 16px;
$grid-block-lg: 10 * $grid-cell-lg;

Now, zooming

app.component.scss

...

.img {
    &--logo {
       position: absolute;
       left: 0;
       right: 0;

...

       @media screen and (min-width: 1024px) {

          margin-top: $grid-cell-lg * 4;
          margin-left: $grid-cell-lg * 4;

        }
}

The point here is that we are now able to put every single piece of the design in the correct place

Flexbox

Yes, flexbox for everything else like …

For example

menu.component.html

...

<div class="menu">
    <span class="item">home</span>
    <span class="item">shop</span>
    <span class="item">about</span>
    <span class="item">contact</span>
</div>

menu.component.scss

...

width: 243px;
display: flex;
justify-content: space-between;

...

I will leave you here the repo on GitHub

ackuser/nx-room-homepage

and the link to the site

Frontend Mentor | Room homepage

just in case you want to have a deeper look

✍ Conclusion ✍

Support your developments with Layout, Grid over your design and using Css/Sass with Grid and Flexbox in Angular is the best option to me to make 1 to 1 pixel from Design to Development.

This design & challenge was taken from Frontend Mentor is such a great place to make yourself grow up professionally by allow you to improve your skills practising development.

👣 Next Steps 👣

This post helps me to show you how I solved part of the challenge. In next posts we will see other things related with Angular and other problems so stay tuned!!!

Nx is like a kind of framework for creating modern projects, its app skeleton is similar to a mono-repository. There, you can have your Front and Back end and shared all your interfaces and classes between them, that one of the top benefit I saw

Introduction

For the case of Angular monorepo for Front, among other features it comes with Jest, Cypress and EsLint by default, so it has been my favourite choice for creating new project in Angular.

Have a look to these links if you have no idea about what I am talking about

• Nx: Smart Repos · Fast Builds
• Code-sharing made easy in a full-stack app with Nx, Angular, and NestJS - Angular inDepth

Another thing I found in the last days was Vercel, a great platform for deploying software. You will be able to import your git repository and deploy instantaneously your product, once the pipeline has already finished successfully.

Agentic Infrastructure - Vercel

Problem

You can choose a lot of frameworks to deploy in Vercel, however there is no exists one a choice for Nx

Solution

I found a way to do that, so I will put and share here my config just in case you are in a similar situation

Just if you want to see the site

https://nx-room-homepage.vercel.app/

✍ Conclusion ✍

We see a new stack for you to show all the magic behind your full stack powers ;)

I will keep me up to date with Nx since it is gaining more space in this huge universe of techs that are appearing everyday.

Also, my first experience with Vercel that I have known through Frontend Mentor was very nice. Basically, it is so easy and fast for deploying basic projects and also for free.

I hope this article can give you fresh ideas for exploring new worlds in web development to make your days easier

D3js is human readable sometimes, however in certain occasions you see a chart you want to create or just copy from somewhere else and

In this post, we will see a tutorial for basic bubble chart that may help you. To be honest, it is a tutorial also for myself. In the past few years, I have done like ten bubble charts and every time I start from scratch.

Introduction

First question, what is Bubble Chart…

A scatterplot with variable dot size

from https://www.data-to-viz.com/ which is an amazing, fantastic and awesome resource that you should have a look if you are starting with DataViz (either has content with Python or R)

How a bubble chart looks like

Version 6

Why 6?

At this time is the latest stable version of d3. To me it is more compacted, you have more functions in its core and is easier to load its modules…

I leave you the link anyway for installing it in different environments

https://github.com/d3/d3#installing

But, I love npm so if you are like me …

$ npm i d3

Then, in you load in your js

index.js

import * as d3 from "d3";

Dataset

We are going to create something similar, now imagine you have a similar dataset

const dataset = [
{ type: "Sample 1", value: 50, radius: 7 },
{ type: "Sample 2", value: 30, radius: 11 },
{ type: "Sample 3", value: 10, radius: 3 }
];

But, first of all a couple of utility function in d3 to manipulate data

d3.extent to calculate min and max

d3.extent(dataset, d => d.value) ==> [10, 50]

However, our Y Axis starts at 0 so we can only use d3.max function and finish with 60.

d3.max(dataset, d => d.value) + 10 ==> 60

Moreover, we need an array with all the ordinal values so we can use map function from es6 or mapping from d3 that extracts the names.

dataset.map(d => d.type) ==> ["Sample 1", "Sample 2", "Sample 3"]

d3.map(dataset, d => d.type).keys() ==> ["Sample 1", "Sample 2", "Sample 3"]

As you see d3 has some native functions over arrays that can be very useful.

Svg

It is always the same, create a frame with margin, the width & height of the content, translating it correctly to visually /display correctly and so on and so forth…

index.html

<div id="viz"></div>

index.js

const margin = { top: 40, right: 150, bottom: 60, left: 30 },
width = 500 - margin.left - margin.right,
height = 420 - margin.top - margin.bottom;

const svg = d3
.select("#viz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Axis and Scale

For X Axis we have to create and scale of discrete values equally distributed along the axis

index.js

const types = dataset.map(d => d.type); ==> ["Sample 1", "Sample 2", "Sample 3"]

// Add X scale

const x = d3
.scaleBand()
.domain(types)
.range([0, width]);

// Add X axis

svg
.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));

At this point, you may wonder why I use scaleBand rather than scaleOrdinal ???

scaleOrdinal maps discrete values (specified by an array) to discrete values (also specified by an array)

And

In scaleBand domain is specified as an array of values (one value for each band) and the range is splitted automatically into n bands computing the positions and widths of them.

So basically with scaleBand we specify less and we get part of the job done automatically

For understanding scales, another amazing resource is

https://www.d3indepth.com/scales/

For Y Axis we create a linear scale from 0 to the maximum value of values

index.js

const yMax = d3.max(dataset, d => d.value) + 10 ==> 60

// Add Y scale

const y = d3
.scaleLinear()
.domain([0, yMax])
.range([height, 0]);

// Add Y axis

svg.append("g").call(d3.axisLeft(y));

Bubbles

For Bubbles we create circles using radius value in dataset for size and positioning them with its type and value. Normally, things used to be more complex with a customized scale in radius and colorized bubbles.

index.js

// Add bubbles

svg
.append("g")
.selectAll("bubble")
.data(dataset)
.enter()
.append("circle")
.attr("cx", d => x(d.type) + 50)
.attr("cy", d => y(d.value))
.attr("r", d => d.radius)
.style("fill", "lightcyan")
.style("opacity", "0.7")
.attr("stroke", "black");

Result

Code

ackuser/d3js-bubble-chart

Conclusions

You can play with it, changing a lot of things and customize colors, axis, etc.

If you start with dataviz and d3js, try to go deeper understanding every thing you do. It is a hard task at the beginning, but there are a lot of resources and step by step you can do amazing things.

Thanks for reading.

Bubble Chart in D3js was originally published in Analytics Vidhya on Medium, where people are continuing the conversation by highlighting and responding to this story.

Starting with a framework solves many problems; some of them are very hard to learn from the very beginning. However, we can even build many things faster than in a vanilla mode. In fact, I almost used NgRx Data before NgRx.

Now, I am going to tell you about my experience with a problem — I couldn’t figure out a solution for a long time.

But before that, we will also learn how to:

• Create a dummy project in NgRx Data, and
• customize the URL in NgRx data.

To finally see how to intercept native NgRx data actions-request for firing effects.

Introduction

The Angular and NGRX teams have done magnificent work; however, you know that docs sometimes...

Anyways, the truth is that NgRx data makes the hard job ofCRUD communication that going through the back-end. We save a lot of time and effort, but at a price. It is normalization in REST verbs for your request, and also in URLs routes coming to your back end. That’s it; quite simple, quite standard.

My question on StackOverFlow:

“How do I write effects for “NATIVE” Actions in ngrx/data?

I know ngrx/data was created to get rid of Actions, Selectors, Effects, Reducers as much as it is possible, having therefore less boilerplate. However, there should be a way to create effects for NgRx Data.”

Let’s me explain in another way. For my projects, I needed to listen to NgRx data actions, like, for example, QUERY_ALL: ‘@ngrx/data/query-all' or QUERY_ALL_SUCCESS: ‘@ngrx/data/query-all/success’, or others.

Does exist something like that?

fooNgrxDataEffectForQueryLoad$ = createEffect(() =>
            this.actions$
                .pipe(
                    ofType(('FooActionDispatchedByNgRxData')),

Of course, the above code does not work, and nobody told me a way to catch these automatic requests (NgRx Data Actions) on the fly for writing Effects. I didn’t find anything by Googling or on StackOverFlow.

A Dummy NgRx Data Project

We need a project to apply our concepts with a practical example and materialize all the ideas in our minds.

Have a look at this website that offers us a simple fake rest API to play with. Yeah, we don’t need to build a back end!

JSONPlaceholder

Our candidate for today is a list of posts, and that’s all about the API and back end.

Defining the entities

Now, let’s start the party with NgRx Data…

We are going to use posts, so the very first thing we do is defining the entity…

interfaces.ts

export default interface Post {
userId: number;
id: number;
title: string;
body: string;
}

Then, we say to NgRx Data which entities to use:

entity.component.ts

import { EntityMetadataMap } from '@ngrx/data';

const entityMetadata: EntityMetadataMap = {
    Post: {}
};

export const entityConfig = {
    entityMetadata
};

Registering the entity store

Just to load NgRx Data correctly:

app.module.ts

...

@NgModule({
     imports: [
     HttpClientModule,
     StoreModule.forRoot({}),
     EffectsModule.forRoot([]),
     EntityDataModule.forRoot(entityConfig)
    ]
})

...

Creating entity data services

Create a service that is doing all magical work of communication with the API:

post.service.ts

import { Injectable } from '@angular/core';
import {EntityCollectionServiceBase,EntityCollectionServiceElementsFactory} from '@ngrx/data';
import Post from './interfaces';

@Injectable({ providedIn: 'root' })
export class PostService extends EntityCollectionServiceBase<Post> {

constructor(serviceElementsFactory:  EntityCollectionServiceElementsFactory) {
  super('Post', serviceElementsFactory);
}

Using NgRx Data in components

Now for Smart and Dumb components. Here is our Smart component containing all the logic to retrieve data and so on with NgRx Data:

post-list.component.ts

...

export class PostListComponent {

posts$: Observable<Post[]>;

constructor(private postService: PostService) {
   this.posts$ = postService.entities$;
}

ngOnInit() {
   this.getPosts();
}

getPosts() {
   this.postService.getAll();
}

...

post-list.component.html

<ng-container *ngFor="let post of posts$ | async">
     <post [post]="post"></post>
</ng-container>

Our dumb:

post.component.ts

export class PostComponent  {
  @Input() post: Post;

post.component.html

<p class="title">{{ post.id }}: {{ post.title }}</p>
<img [src]="'https://picsum.photos/id/'+post.userId+'/200/200'" alt="Avatar">
<p class="body">{{ post.body }}</p>

Note: we randomized photos through their IDs in our post with https://picsum.photos/ just to make it more real.

A Custom URL

Our jsonplaceholder back end API doesn’t fit NgRx Data default config in terms of their routes, then customization:

app.module.ts

const defaultDataServiceConfig: DefaultDataServiceConfig = {
    root: 'https://jsonplaceholder.typicode.com/'
}

...

@NgModule({

imports: [

...

providers: [{ provide: DefaultDataServiceConfig, 
useValue: defaultDataServiceConfig }]

...

Some other minor tasks were done to prettify our list of posts and make it work perfectly.

Intercepting Actions

How does it look like in NgRx Data?

Remember what we do in post-list.component.ts?

this.posts$ = postService.entities$;
...

this.postService.getAll();

These lines of code activate all the magic behind them with a couple of actions:

• QUERY_ALL: ‘@ngrx/data/query-all’
• QUERY_ALL_SUCCESS: ‘@ngrx/data/query-all/success

First action [Post] ngrx/data/query-all:

Send a request:

To retrieve all the data with:

Their response:

And the result in the UI:

WoW NgRx Effect

Finally, the reason why we created this project:

post.effects.ts

...

@Injectable()
export class PostEffects {

ngrxDataEffectForQueryLoad$ = createEffect( 

() =>this.actions$.pipe(

ofEntityType("Post"),
ofEntityOp([EntityOp.QUERY_ALL_SUCCESS]),

tap(action =>

console.log("%c%s","color: green; background: yellow; font-size: 24px;","Your 🎸🎸🎸 WOW 😲😲😲 Effect here 🚀🚀🚀!"))),

{ dispatch: false }

);

...

Don’t forget to register them in the app:

app.module.ts

...

@NgModule({
imports: [

...

EffectsModule.forRoot([PostEffects]),
],

...

Not very difficult, beyond filtering Post entities and also the QUERY_ALL_SUCCESS operation — no need to explain much. Remember you can do this for all https://ngrx.io/api/data/EntityOp operations as well.

This is a good trick that you may hardly find if you don’t read this or see it anywhere else.

As you see I have left the WoW Effect part for you, I didn’t want to make the article longer… now, you are able to fire effects from NgRx data actions!

⤣ Repo at this point (StackBlitz OR GitHub on branch develop)⤤

Conclusion

I love NgRx Data. If you are a newbie on the subject, now you know how to quickly implement a project with NgRx data.

On the other hand, if you already know NgRx data but you have never seen how to fire Effects/Magic from NgRx Data Actions/Requests, or you’re stuck with this, I hope this article was helpful for you.

I always like to recommend helpful articles from others:

• Super Fast Stateful CRUD — A practical guide to NgRx Data
• @ngrx/data Will Change Your Life

Next Steps

We want to 🎸 NgRx, so stay tuned to see other features & customizations!

Thanks for reading.

How to Write Effects for Actions in NgRx Data was originally published in Better Programming on Medium, where people are continuing the conversation by highlighting and responding to this story.

New features are coming into NGRX, one of which is ngrx/component. It brings plenty of opportunities to make our programming easier & faster. Apparently, it appears onto the scene to help us get rid of the async pipe in templates. But also, under the hood, it takes maximum advantage for Angular life cycles.

We will explore it briefly, and in the meantime, you will see the base of some concepts to understand why we should use this. Finally, we are going to apply it to an easy project done with NGRX, getting the benefits of this feature.

The Use Case

The use case is a simple to-do list built with Angular and NGRX superpower that we’ve already seen and improved in Part 1.

Refactoring Reducers and States for a Better Store

Introduction

What is @ngrx/components?

From Docs:

Component is a set of primitive reactive helpers to enable fully reactive, fully zone-less applications. They give more control over rendering, and provide further reactivity for Angular applications.

In plain English:

Directives & Pipes to eliminate the use of Zones and improve the handling of Observables in Angular templates.

At the present moment, there are two:

• *ngrxLet
• ngrxPush

But before we dive into them, let’s clarify why the need to replace the async pipe:

The problem is async pipe just marks the component and all its ancestors as dirty. It needs zone.js microtask queue to exhaust until ApplicationRef.tick is called to render all dirty marked components.

Heavy dynamic and interactive UIs suffer from zones change detection a lot and can lean to bad performance or even unusable applications, but the async pipe does not work in zone-less mode.

Key Concepts

1. NgZone

Summarising, thanks toNgZone Angular makes for us the detection of changes automatically in components with the aim of updating our HTMLs. Obviously, it costs in terms of CPU processing.

Problems with detect changes coming up with User Events, Requests & Timers that have something in common with Asynchronicity. Despite this, any time we use Observable, the right time is known to make the detection of changes and be rendered in our UI. And that changes everything.

Let’s see some examples so we can clarify all of these concepts about updating HTMLs.

Plain/vanilla javascript:

Angular, default configuration:

Angular, without NgZone:

Disabling Zone in Angular

1. Comment zone.js line in polyfills.ts:

//'zone.js/dist/zone';

2. Bootstrap Angular with the noop zone in src/main.ts:

platformBrowserDynamic().bootstrapModule(AppModule,{ ngZone:'noop'})

Now NgZone is not used anymore so detection is not automatic.

3. However, we can trigger it manually and it will work fine, src/click-me/click-me.component.ts:

 ...

constructor(private changeDetector: ChangeDetectorRef) {}

 ...

onClickMe() {
  this.clickMessage = ‘You are the best!’;
  this.changeDetector.detectChanges();
}

Less computing in the backend is the main advantage. On the other hand, deactivating part of the core makes us responsible for change detection for Angular (and that is not easy at all).

If you want to go deeper, here are a couple of really good readings.

• 10 Things Every Angular Developer Should Know About Zone.js
• Do you still think that NgZone (zone.js) is required for change detection in Angular?

2. Null and undefined is the same but not exactly the same

3. Operator DistinctUntilChanged in RxJS

The distinctUntilChanged() operator ignores duplicate consecutive emissions.

Using ngrxLet

This directive serves a convenient way of binding observables to a view context (a dom element scope).

Use in our project

todo-list.component.ts

<ng-container *ngrxLet=”todos$ as todos”>

<todo *ngFor=”let todo of todos” [todo]=”todo” (onRemoveTodo)=”removeTodo($event)”
(onToggleTodo)=”toggleTodo($event)”>
</todo>

</ng-container>

Technical features:

• Takes away the multiple usages of the async or ngrxPush pipe.

Verified.

• Unifies the way of handling null and undefined.

• Distinct same values in a row (distinctUntilChanged operator)

• Triggers change-detection differently if zone.js is present or not (detectChanges or markForCheck).

Using ngrxPush

This pipe serves as a drop-in replacement for the async pipe. It contains intelligent handling of change detection to enable us to run in zone-full as well as zone-less mode without any changes to the code.

Use in our project

todo-list.component.html

<todo *ngFor=”let todo of todos$ | ngrxPush” [todo]=”todo” (onRemoveTodo)=”removeTodo($event)” (onToggleTodo)=”toggleTodo($event)”>
</todo>

Technical features:

• Observables & promises retrieve their values & render them to the template.

All correct here.

Note: This pipe only works when we use the Store. Just in case you want to use it for whatever reason without using NGRX, it won’t work.

Let me explain it to you with code.

todo-list.component.ts

ngOnInit() {

// this.todos$ = this.store.select(selectTodos);

this.todos$ = of([{ id: “123”, text: “new task”, todo: true }]);

It is still an Observable list, but if you don’t do it through a selector, then it simply won’t process the to-do list in your template.

• Distinct same values in a row to increase performance, unify null and undefined values and triggers change-detection differently if zone.js is present or not (detectChanges or markForCheck).

Same as ngrxLet, they even share that part of the code.

• Coalescing of change detection calls to boost performance

For the sake of simplicity in this article, you must think of it as a way to aggregate change detection to make it faster.

And Now, Both *ngrxLet & ngrxPush

src/main.ts:

platformBrowserDynamic().bootstrapModule(AppModule,{ ngZone:'noop'})

It works without zone!

Note: At the time I wrote this article, the package was an experimental package and was in development, so it may have some changes. You may have to deactivate AOT compilation and it will work with Angular version 8.x. Also, Angular/components behavior is a little bit different depending on the View Engine or Ivy.

Repo at this point (StackBlitz on branch feature/ngrx_components_stackblitz or GitHub on branch feature/ngrx_components)

Conclusion

I hope you now know the basics and some key concepts to understand “@ngrx/component.” Also, its importance and why we remove the use of the async pipe which drastically reduces operations done behind the scene.

In addition, the separation of concerns independently if Angular works with or without zone is great for performance and improving the time of execution. It would be really nice to profile & measure how much better when we are in zoneless mode. Try to align your project with the future of where NGRX goes!

We will cover other interesting topics of NGRX soon so stay tuned!!!

I encourage you to have a look at some further readings:

• A First Look at @ngrx/component
• Reactive Angular with ngrx/component

Intro to @ngrx/component was originally published in Better Programming on Medium, where people are continuing the conversation by highlighting and responding to this story.