Using Angular Augury to Debug Your Code

Augury is an open-source tool allowing developers to profile and debug Angular 2 and 4 applications.

Modern web browsers provide developer consoles to inspect various elements on the page, which is really handy when trying to debug markup, styles, and scripts. However, this console isn’t enough to debug Angular applications that usually have lots of components, events, attributes, and a separate routing system.

Augury is a tool designed specifically for Angular apps. It’s an open-source debugging and profiling tool for Angular 2+ applications.

Augury is just a Chrome extension that’s quite simple to use, so you won’t need to spend hours and hours learning how to utilize this tool. We’re going to build a sample Angular app and then see Augury in action by exploring various parts of our project. So, let’s get started!

Hello, Augury!

Augury visualizes your app’s structure in a form of a tree, showing how components and their dependencies relate to each other. It also allows you to inspect properties of your objects and change them on the fly. On top of that, you can easily view the source code of a specific component, insert breakpoints as needed, work with events, and more. Lastly, you can browse the application’s routing system, as well as view the full list of all utilized modules.

Augury is only available as a Chrome extension (there’s no Firefox support yet, unfortunately) and installing it is as simple as going to this page and pressing the Install button. After that, you may open the developer tools by pressing Ctrl + Shift + I (Windows/Linux) or Cmd + Opt + I (macOS). You’ll note that a new tab called Augury has appeared. After switching to this tab, you’ll either see the application’s structure or the phrase “This application is not an Angular application”. I’ve noticed that sometimes it may be required to re-open the Developer Console in order for Augury to analyze the page properly, so watch out.

Now that we have Augury installed, let’s proceed to the next section and prepare the sample application that we’ll use as a playground!

Building a Sample App

In order to see Augury in action, we need something to debug, right? In this section, I’m going to quickly guide you through the process of creating a very simple application (loosely based on the sample app from the Angular’s official tutorial) listing some users and allowing you to edit them. Alternatively, you may grab the source code from my GitHub repo.

Before getting started, install Angular CLI on your machine if you don’t have it yet:

npm install -g @angular/cli

Next, create the skeleton of our new project:

ng new sitepoint-augury

Change the application’s title by tweaking the src/app/app.component.ts file:

// ...

export class AppComponent {
  title = 'Augury Demo';
}

Tweak the src/app/app.component.html by removing all the links to documentation added automatically by code generator and add an <app-users></app-users> line:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

<app-users></app-users>

Of course, we need a User component, so generate it now by running:

ng generate component users

Change the src/app/users/user.component.ts file in the following way:

import { Component, OnInit } from '@angular/core';
import { User } from './user.model'; // <--- 1
import { UserService } from './user.service'; // <--- 2

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  users: User[];

  selectedUser: User;

  onSelect(user: User): void { // <--- 3
    this.selectedUser = user;
  }

  constructor(private userService: UserService) { } // <--- 4

  ngOnInit() {
    this.getUsers(); // <--- 5
  }

  getUsers(): void { // <--- 6
    this.users = this.userService.getUsers();
  }

}

Main things to note here:

  1. We are importing a User model that will be created in a moment.
  2. We’re also importing a UserService. It will simply return a list of hardcoded users, but let’s pretend they’re being fetched from some remote location.
  3. We’re allowing the users to be selected by clicking on them. The currently selected user is stored in a separate selectedUser attribute.
  4. Hook up the userService using the dependency injection mechanism.
  5. Load the list of users once the component is initialized.
  6. In order to get users, we’re utilizing our userService.

That’s pretty much it for this component.

Next, let’s create a model in a src/app/users/user.model.ts file. Each user is going to have an ID, a first and a last name:

export class User {
  id: number;
  first: string;
  last: string;
}

Nothing complex.

Now let’s proceed to the UserService that’s going to be defined in the app/src/users/user.service.ts file:

import { Injectable } from '@angular/core';
import { User } from './user.model';

@Injectable()
export class UserService {

  constructor() { }

  getUsers(): User[] {
    return [
      {
        id: 1,
        first: 'John',
        last: 'Doe'
      },
      {
        id: 2,
        first: 'Margaret',
        last: 'Brown'
      }
    ]
  }
}

The getUsers method simply returns an array of users with hardcoded data.

Now let’s display our users with the help of ngFor. Also, we’re going to add a click event listener and fire onSelect whenever a user is clicked on. When this happens, a form to edit the chosen user should be displayed (which is going to be done with the help of ngIf). Modify the src/app/users/user.component.html file like this:

<div *ngFor="let user of users" (click)="onSelect(user)"
[class.selected]="user === selectedUser">
  <p>{{user.last}}, {{user.first}} (ID: {{user.id}})</p>
</div>

<div *ngIf="selectedUser">
  <h3>Edit</h3>
  <label for="first">First</label>
  <input [(ngModel)]="selectedUser.first" placeholder="First name" id="first">

  <label for="last">Last</label>
  <input [(ngModel)]="selectedUser.last" placeholder="Last name" id="last">
</div>

We’re assigning a .selected CSS class to the chosen user, so let’s add some simple styling for it inside the src/app/users/user.component.css file:

.selected {
  font-weight: bold;
}

Lastly, we have to import FormsModule and UserService inside the src/app/app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <---
import { UserService } from './users/user.service'; // <---

import { AppComponent } from './app.component';
import { UsersComponent } from './users/users.component';

FormsModule should be listed in the imports section in the app.module.ts, whereas UserService goes to the providers:

@NgModule({
  declarations: [
    AppComponent,
    UsersComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // <---
  ],
  providers: [
    UserService // <---
  ],
  bootstrap: [AppComponent]
})

That’s it! Our sample application is finished, and you can open it by running the following command:

ng serve --open

Continue reading %Using Angular Augury to Debug Your Code%


Source: Sitepoint

Finding Problem Areas on Your Website with Google Analytics

Finding out what users are doing on your website can tell you where UX may be falling short. While further investigation is required to find out why, taking an analytics-first approach to UX design will show you where to start. In this article, I’ll show you where to look for underperforming areas of your website using Google Analytics.

If you feel like you’re jumping in the deep end here, then read our introductory “Getting Started with Google Analytics” article first, or if you only missed the second installment in the series, then here’s our guide on “How to Perform User Research with Google Analytics”.

Okay, let’s begin.

Page-level Issues

A great place to start looking for problem areas is to look at the performance of individual pages. Key metrics to look out for are Bounce Rate and Exit Rate. These two metrics often cause confusion, but it’s very important to understand the difference between them.

A bounce refers to a visit (or “session”) on a website, during which the user only views one page before leaving. An exit refers to the moment where a user leaves your website. Users can view multiple pages before exiting, which is where exits differ from bounces. Bounce Rate and Exit Rate is then the percentage of users who bounce or exit respectively.

Bounces and exits

Have a look at the metrics from my own website, lukehay.co.uk:

Metrics from lukehay.co.uk

As you can see, the /training/ webpage has a high Bounce Rate, which suggests that it’s not leading visitors to view any other pages on the website. It appears that I need to make this web page more engaging!

The /contact/ page has a high Exit Rate, although this could be expected as it’s natural that users would want to exit the website after sending me a message. Always consider the user intent before making assumptions. In this case, the exit rate appears to be as expected.

Page Value

Page Value is useful for identifying which pages are contributing to conversions. Page Value is how Google Analytics gives a single web page a monetary value. For ecommerce sites, Google Analytics pulls in the values from Transaction Revenue, and for all other types of websites, it pulls in the Goal Value. Here’s how Page Value is calculated:

How Page Value is calculated

From a UX perspective, all you really need to know is that pages that contribute more to conversions (financial and non-financial) will generally have a higher Page Value. This means that you can often identify the key pages in the conversion process using this metric.

You can then focus your attention on any web pages that have a high Page Value but also a high Bounce Rate or Exit Rate, since these are the pages that can be thought of as “leaking” value from your website, potentially due to a critical flaw in the user experience.

You can also analyze on-page behavior (this is when a user interacts with a web page without loading a new web page in the browser) using event tracking, though this needs to be set up manually by a developer.

User Journeys

Looking at specific web pages in isolation will certainly give you an idea of how your website is performing, but in order to get the full picture, you’ll also want to look at user journeys. The behavior flow reports (Behavior → Behavior Flow) in Google Analytics help you to visualize how users are actually navigating through your website.

How users navigate through your website

While these reports look cool, they can be hard to decipher. You’ll want to spend some time exploring these user journeys in detail if you want to find the really useful insights. Smaller websites with fewer user journeys are easier to analyze using these reports than large websites.

Conversion Funnels

Conversion Funnels can be used to gain a better understanding of where your users are dropping out of the conversion flow. These funnels will show each step in the journey to a certain conversion, and where your users enter and exit these journeys. The Conversion Funnel reports can be found under Conversions → Goals → Funnel Visualization.

The example below is taken from an ecommerce website:

A Conversion Funnel report

This report shows that, while over 22,000 users enter the shopping cart, only a total of 5,442 go on to complete a purchase. It also shows that the biggest dropout is at the first step, where 36% of users drop out between the shopping cart and the billing/shipping step, so we’ve identified a yet another problem area right there. Making improvements to these problem areas will likely to lead to big increase in sale conversions. The funnel reports also offer you a decent way to measure the impact of changes you’ve made to the steps in those user journeys.

Continue reading %Finding Problem Areas on Your Website with Google Analytics%


Source: Sitepoint

Boosting Your Workflow with Angular 5 Snippets and VS Code

In this article, we’ll focus on how to use Angular 5 snippets in Visual Studio Code to improve our workflow. We’ll first start with the basics of using and creating snippets. We’ll look at how we can use Angular snippets for VS Code in an Angular project. Then we’ll later look at how we can create our own snippets and share them with others.

For anyone who’s become proficient in a programming language, you know how boring it is to type the same code over and over again. You eventually start copying and pasting pieces of your code to spare your fingers the agony of writing another for loop.

What if your editor could help you insert this common code for you automatically as you type? That would be awesome, right?

Well, you probably know them as snippets. It’s a feature that’s common in every modern IDE currently available. Even Notepad++ supports them (though not enabled by default).

Prerequisites

Before you start, you’ll need to have the latest version of Visual Studio Code installed on your machine. We’ll also be looking at Angular 5 snippets. So having at least a basic knowledge of Angular will be helpful, but not necessary.

You’ll need to use an existing or new Angular 5 project in order to experiment with snippets. I assume you have the latest version of Node.js, or at least a version that’s not older than Node.js 6. Here’s the command for installing the Angular CLI tool if you haven’t:

npm install -g @angular/cli

# or
yarn global add @angular/cli

Snippets Explained

Snippets are templates that allow you to easily insert repetitive code. When you first install VSCode, it comes with snippets for JavaScript pre-installed. To check them out, just open an existing JavaScript file or create a new one in your workspace and try out typing these prefixes:

  • log
  • if
  • ifelse
  • forof
  • settimeout

As you type, a popup list will appear giving you options to autocomplete your code. As soon as the right snippet is highlighted, just press enter to insert the snippet. In some cases, such as log and for, you may need to press the down key to select the right snippet.

You’re probably wondering where these JavaScript snippets are coming from exactly. Well, you can find the exact definitions in these locations:

  • Windows – C:Program FilesMicrosoft VS Coderesourcesappextensionsjavascriptsnippetsjavascript.json
  • Linux –/usr/share/code/resources/app/extensions/javascript/snippets/javascript.json

We’ll look into how we can create our own snippets, but first let’s explore some third-party snippets.

How to Use Snippets

At the time of writing, the Visual Studio Marketplace listed 934 extensions in the snippet category. You’ll find snippets for every programming language created, including Pascal! This means you probably should check out the marketplace before creating your own snippets. As mentioned earlier, we’ll be looking at Angular 5 snippets. Locate an existing Angular 5 project in your workspace or just create a new one:

ng new snippets-demo

Once the project is set up, open it in VSCode. Next, click the extension icon on the activity bar to open the Extensions panel. Search for Angular 5. The search results should list several Angular extensions. Install the one that has the author ‘John Papa’. After installation is done, click the reload button to restart VSCode. This Angular 5 snippets extension comes with over 50 snippets. About 70% of the snippets are written for TypeScript, and the rest are mostly for HTML. There are some Docker snippets in there too.

Angular 5 Snippets

Let’s try a few of these Angular 5 snippets. Create a new file called app.service.ts inside the app folder. Open the file and start typing “a-service”. A pop-up list will appear as you type. Even before you finish typing, you should have the correct option highlighted. Press enter to insert the template. Once the snippet is entered, take note that the generated class name is highlighted for you to change.

angular-service

Just type “App” and the entire class name will read “AppService”. Pretty convenient, right? Let’s try something different. Delete the entire code in app-service.ts and type this prefix:

a-service-httpclient

You should get a service class definition, including imports and HttpClient injection in the class constructor. Just like before, rename the class name to AppService.

http-client-service

Next, let’s use another snippet to define an HTTP GET request. Let’s define an empty GET method. For this piece of code, you have to type; don’t copy-paste:

getPosts(): Observable<any[]> {

}

As you start to type “Observable”, a snippet option for it will appear. Just press enter and the Observable class will be imported for you automatically.

Observable Snippet

Next, let’s use another snippet to complete the function. Start typing this prefix: “a-httpclient-get”. Pressing enter will insert this snippet for you:

return this.httpClient.get('url');

Change the URL to an imaginary path — let’s say /posts. Obviously our code won’t run, as we haven’t set up any APIs. Fix it by adding <any> after get. The complete method now looks like this.

getPosts(): Observable<any[]> {
  return this.httpClient.get<any[]>('/posts');
}

Now that we know a little bit about how to use Angular 5 snippets, let’s see how they’re created.

Continue reading %Boosting Your Workflow with Angular 5 Snippets and VS Code%


Source: Sitepoint

Boosting Website Conversions Exponentially with A/B Testing

Many designers underestimate the power of A/B testing and its ability to drive UX and boost conversions. Unfortunately, this is because most A/B tests are conducted without the forethought of a testing plan. Yes, it’s easy to run an A/B test, but it’s not as easy to do it well.

In this article, I’m going to show you a real-life case study where we used A/B testing to boost conversions exponentially. I’ll walk you through the process that we took, mentioning any tools used, and linking to any useful tutorials along the way. I’m Jon from The Good, where we turn visitors into buyers — and that’s exactly what we did for TreeRing. Read on to find out how.

Why A/B Testing Often Fails

First, let’s talk about why A/B testing often fails.

One of the main reasons that A/B testing fails to yield actionable results is the lack of a strategic, iterative testing plan. Many companies instead approach A/B testing in a scattered, shotgun manner, trying a random test here, another there, all without a cohesive and strategic technique. This is like trying to improve on the piano by practicing different instruments every day. You may have occasional, random success, but you won’t make much substantive progress.

The power of A/B testing is unlocked when you develop a step-by-step, robust testing plan with each step providing more insights into what’s going wrong. In other words, the results of the first test inform how you perform the second test. When you use this method, you see compounding results, with each test achieving greater results. Slowly but surely, as they say.

Introducing TreeRing and Their UX Problems

TreeRing helps schools create better yearbooks. Their social-first approach lets teachers, parents, and students capture memories, safely share them with the school community, and create free, personalized pages for the printed edition — all at no extra cost to the school.

They came to us needing help with their website, where the user experience was significantly hampering their growth. They were seeing a low lead-generation conversion rate for their free sample download. Their primary goal was to get visitors to download a free sample yearbook, and they in turn could use these leads to generate sales and retain customers. But their conversion rate was painfully low, generating much fewer leads than desired.

They had tried one-off conversion improvements and had only seen minimal success. They knew that a better process for A/B testing was crucial, but couldn’t figure out how to make it work, and since their organic traffic growth was slowing due to platforms like Google and Facebook shifting toward an emphasis on paid traffic, they wanted to get more conversions from their existing traffic, rather than paying to acquire new traffic.

That being said, they also wanted us to take a detailed look at their website to determine precisely where they should focus their testing strategy. They had implemented various changes in an effort to improve conversion rates and hadn’t seen much success, because they weren’t 100% on what they should be focusing on.

We needed to find out which areas of the UI were key, then carry out a conversion rate optimization strategy to begin test variants of these key UI elements.

How A/B Testing Became Part of the Strategy

We began with an initial audit of their site, working to identify the biggest UX dark spots.

We like to approach problems with a “leaky bucket” strategy. If we can find and fix the largest holes first, we’ll see the biggest impact. Once we highlighted the primary issues (which we’ll talk more about in a moment), we began using A/B testing to solve those issues.

Continue reading %Boosting Website Conversions Exponentially with A/B Testing%


Source: Sitepoint

Ethereum: How Transaction Costs are Calculated

This article on Ethereum Transaction Costs was originally published at Bruno’s Bitfalls website, and is reproduced here with permission.

When sending a Bitcoin transaction, its fee is proportionate to its size. The more inputs and outputs, the more expensive it is. Add to that the factor of pending transactions, and transaction fees can skyrocket based on those two factors alone.


It’s recommended you read the following materials before diving into the rest of this post in order to better understand the terminology we’ll be mentioning.

Basic knowledge of programming terms (variables, loops) might also come in handy.


With Ethereum, given that we’re talking about a programming language within the protocol, it’s possible to be very computationally demanding with very little text or code (something which would be very cheap in the BTC-verse). Let’s look at this loop, for example:

while (i++ < 1000) {
    j = j + i;
}

This loop means “for as long as i is smaller than 1000, increase it by 1 and then sum up i and j and write the result into j, then do it all again.” This loop will execute 1000 times if i is 0, or more if it’s a negative number.

To pay for this computational cost in a fair way — since it has to be executed on all miners’ machines at once and they spend their resources and time on it — the concept of gas was introduced. Gas is used to pay for the execution of these so-called smart contracts (Ethereum programs) inside the EVM. For example, i + j above is a summation operation which costs 3 gas every time it’s executed, so 3000 gas if executed 1000 times.

To explain gas properly, let’s first cover the EVM.

EVM

EVM stands for Ethereum Virtual Machine. But what is a virtual machine anyway?

Virtual Machine

A virtual machine is software running on a specific computer which contains another operating system completely encapsulated inside the main one. For example, a virtual machine allows you to run Windows inside Linux, Linux inside Windows, Windows on macOS like in the image below, or any other combination.

Windows inside macOS

We use virtual machines to separate the environment in which we do our everyday computer use from the environment we work or program in. This lets us keep viruses at bay (they have no way of breaching the virtual machine and getting to the main operating system), helps prevent infinite loops from crashing our main operating system, and holds hard-drive corruptions like the infamous WannaCry ransomware at bay. Additionally, VMs let us use Windows games on Linux, for example, or allow us to program in different versions of the same programming language’s environment easily, without mixing them up.

EVM

The Ethereum Virtual Machine is built into the software running on the Ethereum protocol. It executes smart contracts — Ethereum programs written in the Solidity language. The EVM is contained in the full nodes of the Ethereum network, inside of which it executes these Ethereum-user-written programs.

Any miner of Ethereum simultaneously executes smart contract code. What this means is that Ethereum programs (dapps — decentralized apps) are executed on everyone’s computer at the same time (decentralized).

Execution of these programs isn’t free, however. Miners spend their own electricity, time, and hardware to do this. To pay them for their effort of executing computer instructions (like “store the value 5 into the variable X”), the concept of gas was introduced.

Continue reading %Ethereum: How Transaction Costs are Calculated%


Source: Sitepoint

Top Angular Plugins for Sublime Text

This article covers a number of Angular plugins for the Sublime Text text editor.

Whether you’re new to Angular (version 2+) development, and looking to get started with it and integrate it more closely with your code editor of choice, or you’re an old hand at Angular development and you’re trying your hand with Sublime Text as a new editor, integrating the two has never been easier.

There are lots of options for Angular plugins that can smooth your way developing Angular apps using Sublime Text. You’ll need to set up the Sublime Text package manager (called “Package Control”) prior to getting started, and then you can take a look at the list of plugins here and see if any meet your needs!

Setting up Package Control

In order to use most of the Angular plugins that will be discussed in this article, you’ll first need to set up Package Control in Sublime Text. This is a fairly painless process. The easiest way involves copy-pasting a configuration code.

  1. Use the hotkey CTRL + ` or use the View > Show Console menu to bring up the integrated Sublime Text console.
  2. Paste the block of Python code into the console, which can be copied from the Package Control Installation page and follow the instructions there.
  3. Once this is done, the Package Control menus will be set up! Now, all you’ll need to do is find and install your packages.

Installing a Sublime Text Package via Package Control Menus

Using Package Control is a breeze. You’ll need to open Package Control, select the install menu, and then choose and install a package:

  1. Use the shortcut CMD + Shift + P (CTRL + Shift + P, depending on OS) to open the command palette.
  2. Type install package and then press Enter, which brings you to the list of available packages.
  3. Search for the package by name, select the package, then press Enter to install.

Angular 2 HTML Package

The Angular 2 HTML plugin provides augmented HTML syntax for Sublime Text. You’ll be able to use Angular attributes without syntax highlighting being broken. Additionally, the JavaScript parts of your pages will also highlight as JavaScript. A small but incredibly useful addition for Angular developers.

Angular 2 HTML Package Setup

At the time of this writing, this plugin was not present in Package Control, but can be installed manually via the following steps.

  1. Close Sublime Text and navigate via the Command Line to your Sublime Text 3 “Packages” folder in your application installation. In macOS, this is at /Users/{user}/Library/Application Support/Sublime Text 3/Packages.

  2. Clone the repository into your Packages folder with the following:

    git clone https://github.com/princemaple/ngx-html-syntax
    
  3. Re-open Sublime Text 3, and check in the View > Syntax menu to ensure that Ngx HTML is an option.

Additionally, you can have Sublime Text automatically highlight .component.html files with Angular 2 HTML Syntax:

  1. Open a .component.html file.

  2. Choose View > Syntax > Ngx HTML.

  3. Go to Preferences > Settings > Syntax Specific. Because your current file is using the Ngx HTML syntax, it should open the syntax-specific settings file for Ngx HTML. If so, add an extensions entry to the settings panel on the right:

    "extensions":
    [
      "component.html"
    ]
    
  4. Restart Sublime Text. Now, all .component.html files should automatically use the Ngx Syntax plugin!

Continue reading %Top Angular Plugins for Sublime Text%


Source: Sitepoint

Descriptive Analytics vs Diagnostic Analytics

Recently, David Attard wrote about analytics and KPIs (key performance indicators), and how they can be used to understand our website users better — and, in turn, to help us design better experiences for those users. He told us about the important metrics to analyze (time on site, bounce rate, conversions, exit rates, etc.), but also mentioned that, while these metrics help us to understand what users are doing (or not doing) on our website, the reasons why can still be a bit of a blur. This is because, while data is objective, the conclusions drawn from it are often subjective.

Even though KPIs describe our users’ behavior, more context is needed to draw solid conclusions about the state of our UX. In order for this to happen, we have to use other techniques — such as A/B testing and usability testing — to diagnose the UX flaws we identify through descriptive analytics. In this article, I’m going to explain the difference between descriptive analytics and diagnostic analytics, so that you have a realistic expectation of what descriptive analytics can do, and what you’ll need to gain from descriptive analytics before you begin A/B testing and usability testing.

Descriptive Analytics

Descriptive analytics in a nutshell: what has happened?

When you visit a nurse or doctor, it’s because you have undesirable symptoms that indicate bad health. You have trouble doing the things you need to do because of this. You don’t know what’s going on exactly, only that you aren’t functioning at an optimal level. This is likened to analytics, where business goals can’t be met because of bad user experience. Certain KPIs might indicate this, such as high bounce rate or low Avg. Time on Site.

KPIs describe the symptoms, but they don’t actually diagnose what the underlying issue is, and this is why we call them descriptive analytics. However, we can use the symptoms to help diagnose the UX flaws.

We can use tools like Kissmetrics to track and analyze KPIs, although many companies choose to use Google Analytics because it’s rather sophisticated for a free tool. As well as the KPIs mentioned in David’s article, analytics tools like Google Analytics can reliably tell us things about our users’ demographic and interests (that is, who they are and what they like), and also other important tidbits of information such as what device they’re using and where they’re from. This kind of data, even though it can’t be used to indicate website performance, can tell us a little more about the user intent.

Consider these descriptive analytics as background information that we can use to narrow down what’s going wrong exactly (i.e. user research).

Continue reading %Descriptive Analytics vs Diagnostic Analytics%


Source: Sitepoint

Ethereum Wallets: Send and Receive Ether with MyEtherWallet

In this article, we’ll go through the process of generating your first Ethereum wallet and sending and receiving ether through the MyEtherWallet interface.

For a better understanding of the information which follows, it’s recommended you read the following first:


There are many ways to interact with the Ethereum blockchain. In this piece, we’ll be using MyEtherWallet (MEW).

Note: After opening the site, please bookmark it so you never have to paste it into your browser again. There are many bad people who want your ether, and they’ve bought domains similar to the domain of this site hoping you’ll fall into that trap by mistyping!

Immediately after loading, the page will display some warnings about them not being a bank and basically not being able to help you if you lose your funds because they don’t have access to them. The gist of it is that you’re responsible for your own funds.

MEW initial screen

Creating and Reading an Address

The first screen of MEW is the “input password” screen. Input a password for a new wallet. (Make it something complex but easy to remember or use a password generator like LastPass.)

Password input

The address is immediately generated in the background, but MEW won’t let you see it yet. For as long as you haven’t saved the Keystore file somewhere safe, you cannot proceed. Click Download Keystore File (UTC / JSON) and store it on a USB drive, then hide it from curious family members. The file will be called something like UTC--2018-01-26T10-39-56.592Z--d877263725d9247352661e44c444b21dc5a28581. The first part is the date of creation, the second is the address itself. After you’ve stored it safely, the next screen will display the private key.

Private key

Very imporant!! The private key is equivalent in access level to the file you downloaded previously. Both can be imported into wallet software and used to unlock an address to spend money on it. But there is an important difference: the private key does not require a password! If you enter a private key into another tool like MetaMask, the address will immediately become unlocked without a password and can be used for sending Ether and tokens. If you import the previously downloaded file into any wallet software, it will require a password before letting you access it fully. Therefore, it’s safer to only keep one method around: either store the file and remember the password, or store only the private key in a very secure location. Destroy the other method. The fewer ways to access your wallet there are, the safer the money is.

You can generate a Paper Wallet on the same screen. This will open a new tab with a neatly generated printable layout of two QR codes. One is the public key — the address to which you can send funds and tokens — and the other is the private key mentioned above.

Paper Wallet

If you’re planning to use this address for long-term holding of ether, it’s smart to print it and store it in a safe as if you had a bond or a big wad of cash.

After these steps have been completed, MEW lets us unlock the wallet and view its info. This can be done in two ways:

  • Picking a Keystore/JSON file will provide you with a form through which you upload the file you downloaded previously. You’ll then be asked for a password.
  • Picking a private key lets you paste the private key directly into the field, unlocking the address for usage.

Unlock your wallet and you should see something like the image below:

Unlocked wallet info UI

This interface lets you print the wallet again if you lost or destroyed the previous one, or to re-download the JSON file if you lost it and accessed the wallet with the private key. The QR code for the private key can be read by clicking the eye icon under the black rectangle in the bottom of the screen.

Revealing the private key

On the right, you can see your account’s balance: 0 Eth. A little lower you can see the Token Balances frame which shows you how many of which tokens you have. Because of a large number of available tokens out there, you first need to click Show all tokens to load them.

This screen is visible because you’re on the View Wallet Info option to which MEW automatically redirects you after creation. When sending tokens or ether, the option to use is Send Ether and Tokens.

MEW UI options

Continue reading %Ethereum Wallets: Send and Receive Ether with MyEtherWallet%


Source: Sitepoint

Developer Economics Survey: Your Chance to Win Prizes & Voice Opinions

This article was created in partnership with SlashData. Thank you for supporting the partners who make SitePoint possible.

Is JavaScript giving you headaches? Do you wish other developers knew how important Swift and Rust will be in the coming years? It’s your chance to turn your opinions into a tool of change! The new Developer Economics survey is open starting from April 30, calling out all software developers to take part. Start right away.

Don’t miss a chance to join over 40,000 developers from 160+ countries who take part in the Developer Economics surveys every year to tell the world where software development is going next.

Who can take the survey?

Pretty much everyone writing code and getting their hands on software development in Mobile, Desktop, IoT, AR/VR, Machine Learning & Data Science, Web, Backend and Games. It doesn’t matter if you’re a hobbyist, a startupper or an enterprise dev – the survey is open for all real developers out there!

What sort of questions are they asking?

The survey is designed to dive into real-life developer issues, from coding skills and favorite tools to satisfaction with learning resources and communities.

Expect questions like:

  • Which are your favorite tools and platforms?
  • What’s going up and what’s going down in the software industry?
  • Are you working on the projects you would like to work on?
  • Where do you think development time should be invested?

There are also deep-dive questions based on your area of expertise, like Machine Learning, IoT, web development and more where you can really show you’re a pro and answer more complex questions about your favorite frameworks and vendors.

Read to take the survey?

Why should you take the survey?

It’s fun, for starters! The survey is designed to reveal your sci-fi profile, so the more you engage, the closer you get to finding out your place in the galaxy far far away.

Then there’s prizes. This time, devs who take part and complete the survey can win stuff like iPhone X, Samsung S9 Plus, HTC Vive Pro, GitHub Developer Plan, Amazon vouchers and other useful things to help you test your work or just play around.

You can also take part in the referral program, which allows you to win up to $700 in cash by referring other developer friends to take the survey.

Last but not least, everyone who takes the survey will get a insights with key findings from the survey as well as free report with the highlights and up-and-coming trends.

If you have a few minutes to spare and want to have a quality time, then this survey is for perfect for you! You can start right here. Extra tip: if you need to take a break, just click to save your responses and then you can come back and continue where you left off.

Good luck!

Take the survey now!

Continue reading %Developer Economics Survey: Your Chance to Win Prizes & Voice Opinions%


Source: Sitepoint

Authenticating Firebase and Angular with Auth0: Part 2

This article was originally published on the Auth0.com blog, and is republished here with permission.

In this two-part tutorial series, we’ll learn how to build an application that secures a Node back end and an Angular front end with Auth0 authentication. Our server and app will also authenticate a Firebase Cloud Firestore database with custom tokens so that users can leave realtime comments in a secure manner after logging in with Auth0. The Angular application code can be found at the angular-firebase GitHub repo and the Node API can be found in the firebase-auth0-nodeserver repo.

The first part of our tutorial, Authenticating Firebase and Angular with Auth0: Part 1, covered:

  • intro and setup for Auth0 and Firebase
  • implementing a secure Node API that mints custom Firebase tokens and provides data for our app
  • Angular application architecture with modules and lazy loading
  • Angular authentication with Auth0 with service and route guard
  • shared Angular components and API service.

Authenticating Firebase and Angular with Auth0: Part 2

Part 2 of our tutorial will cover:

  1. Displaying Dogs: Async and NgIfElse
  2. Dog Details with Route Parameters
  3. Comment Model Class
  4. Firebase Cloud Firestore and Rules
  5. Comments Component
  6. Comment Form Component
  7. Realtime Comments
  8. Conclusion

Our completed app will look something like this:

Angular Firebase app with Auth0 custom tokens

Let’s pick up right where we left off at the end of Authenticating Firebase and Angular with Auth0: Part 1.

Displaying Dogs: Async and NgIfElse

Let’s implement the home page of our app — the dogs listing. We created the scaffolding for this component when we set up our Angular app’s architecture.

Important Note: Make sure your Node.js API is running. If you need a refresher on the API, refer to How to Authenticate Firebase and Angular with Auth0: Part 1 – Node API.

Dogs Component Class

Open the dogs.component.ts class file now and implement this code:

// src/app/dogs/dogs/dogs.component.ts
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ApiService } from '../../core/api.service';
import { Dog } from './../../core/dog';
import { Observable } from 'rxjs/Observable';
import { tap, catchError } from 'rxjs/operators';

@Component({
  selector: 'app-dogs',
  templateUrl: './dogs.component.html'
})
export class DogsComponent implements OnInit {
  pageTitle = 'Popular Dogs';
  dogsList$: Observable<Dog[]>;
  loading = true;
  error: boolean;

  constructor(
    private title: Title,
    private api: ApiService
  ) {
    this.dogsList$ = api.getDogs$().pipe(
      tap(val => this._onNext(val)),
      catchError((err, caught) => this._onError(err, caught))
    );
  }

  ngOnInit() {
    this.title.setTitle(this.pageTitle);
  }

  private _onNext(val: Dog[]) {
    this.loading = false;
  }

  private _onError(err, caught): Observable<any> {
    this.loading = false;
    this.error = true;
    return Observable.throw('An error occurred fetching dogs data.');
  }

}

After our imports, we’ll set up some local properties:

  • pageTitle: to set our page’s <h1> and <title>
  • dogsList$: the observable returned by our API HTTP request to fetch the dogs listing data
  • loading: to show a loading icon while the API request is being made
  • error: to display an error if something goes wrong fetching data from the API.

We’re going to be using the declarative async pipe to respond to the dogsList$ observable returned by our API GET request. With the async pipe, we don’t need to subscribe or unsubscribe in our DogsComponent class: the subscription process will be managed automatically! We just need to set up our observable.

We’ll make Title and ApiService available to our class by passing them to the constructor, and then set up our dogsList$ observable. We’ll use RxJS operators tap (previously known as the do operator) and catchError to call handler functions. The tap operator executes side effects but does not affect the emitted data, so it’s ideal for setting other properties. The _onNext() function will set loading to false (since data has been successfully emitted). The _onError() function will set loading and error appropriately and throw an error. As mentioned before, we don’t need to subscribe or unsubscribe from the dogsList$ observable because the async pipe (which we’ll add in the template) will handle that for us.

On initialization of our component, we’ll use ngOnInit() to spy on the OnInit lifecycle hook to set the document <title>.

That’s it for our Dogs component class!

Dogs Component Template

Let’s move on to the template at dogs.component.html:

<!-- src/app/dogs/dogs/dogs.component.html -->
<h1 class="text-center">{{ pageTitle }}</h1>

<ng-template #noDogs>
  <app-loading *ngIf="loading"></app-loading>
  <app-error *ngIf="error"></app-error>
</ng-template>

<div *ngIf="dogsList$ | async as dogsList; else noDogs">
  <p class="lead">
    These were the top <a href="http://www.akc.org/content/news/articles/the-labrador-retriever-wins-top-breed-for-the-26th-year-in-a-row/">10 most popular dog breeds in the United States in 2016</a>, ranked by the American Kennel Club (AKC).
  </p>
  <div class="row mb-3">
    <div *ngFor="let dog of dogsList" class="col-xs-12 col-sm-6 col-md-4">
      <div class="card my-2">
        <img class="card-img-top" [src]="dog.image" [alt]="dog.breed">
        <div class="card-body">
          <h5 class="card-title">#{{ dog.rank }}: {{ dog.breed }}</h5>
          <p class="text-right mb-0">
            <a class="btn btn-primary" [routerLink]="['/dog', dog.rank]">Learn more</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<app-comments></app-comments>

There are a couple things in this template that we’ll take a closer look at:

...
<ng-template #noDogs>
  <app-loading *ngIf="loading"></app-loading>
  <app-error *ngIf="error"></app-error>
</ng-template>

<div *ngIf="dogsList$ | async as dogsList; else noDogs">
  ...
    <div *ngFor="let dog of dogsList" ...>
      ...

This code does some very useful things declaratively. Let’s explore.

First we have an <ng-template> element with a template reference variable (#noDogs). The <ng-template> element is never rendered directly. It’s intended to be used with structural directives (such as NgIf). In this case, we’ve created an embedded view with <ng-template #noDogs> which contains both the loading and error components. Each of these components will render based on a condition. The noDogs embedded view itself will not render unless instructed to.

So how (and when) do we tell this view to render?

The next <div *ngIf="... is actually an NgIfElse using the asterisk prefix as syntactic sugar. We’re also using the async pipe with our dogsList$ observable and setting a variable so we can reference the stream’s emitted values in our template (as dogsList). If something goes wrong with the dogsList$ observable, we have an else noDogs statement that tells the template to render the <ng-template #noDogs> view. This would be true before the data has been successfully fetched from the API, or if an error was thrown by the observable.

If dogsList$ | async has successfully emitted a value, the div will render and we can iterate over our dogsList value (which is expected to be an array of Dogs, as specified in our component class) using the NgForOf (*ngFor) structural directive to display each dog’s information.

As you can see in the remaining HTML, each dog will be displayed with a picture, rank, breed, and a link to their individual detail page, which we’ll create next.

View the Dogs component in the browser by navigating to your app’s homepage at http://localhost:4200. The Angular app should make a request to the API to fetch the list of dogs and display them!

Note: We’ve also included the <app-comments> component. Since we’ve generated this component but haven’t implemented its functionality yet, it should show up in the UI as text that says “Comments works!”

To test error handling, you can stop the API server (Ctrl+c in the server’s command prompt or terminal). Then try reloading the page. The error component should display since the API cannot be reached, and we should see the appropriate errors in the browser console:

Angular app with Node.js API showing data error

Continue reading %Authenticating Firebase and Angular with Auth0: Part 2%


Source: Sitepoint