WordPress
SitePoint Team, Feb 05

10 Popular Plugins to Extend or Enhance Your WordPress Site

WordPress plugins offer easy ways to extend WordPress functionality. There are hundreds on the market. But which ones should you use?
10 COMMENTs
Design & UX
Chris Lienert, Feb 01

How to Speed Up Your UX with Skeleton Screens

Delivering a speedy UX isn't all about code and servers – it's about how things feel.  Chris shows you how to use 'skeleton screens' to speed up your UX. 
WordPress
SitePoint Team, Jan 30

Now You Can Build Design-Oriented Pop-ups Straight from Elementor

You either hate pop-ups, or you love them. And if you say you love them, you're probably lying.
35 COMMENTs
JavaScript
Pavels Jelisejevs, Jan 29

React vs Angular: An In-depth Comparison

Should you pick Angular or React? Pavels Jelisjevs looks in detail at what both frameworks have to offer, and gives some practical advice on how to choose.
Web
Maria Antonietta Perna, Jan 29

How to Find a Development Mentor

Having a great development mentor can boost your progress, from helping you learn to code to getting a job. Find out how to find one.
JavaScript
Karolina Gawron, Jan 25

How to Tell If Vue.js Is the Right Framework for Your Next Project

Karolina Gawron digs into the pros and cons of Vue.js, and whether it’s the right choice for your next project, exploring the possibilities and limitations to give you a high-level look at the framework and make your decision a little easier.
Web
Maria Antonietta Perna, Jan 22

A Guide to Writing Your First Software Documentation

Maria Antonietta Perna covers the importance of good software documentation, showing you how to get up and running with your first software documentation.
JavaScript
Karl Penzhorn, Jan 22

Develop an Android App with React Native & Publish on Google Play

In this tutorial, you’ll build a React Native app. I’ll walk you through picking a design, setting up React Native, and publishing on Google Play.
Design & UX
Joe Natoli, Jan 21

What’s Really Behind Most UX Issues

Joe Natoli looks behind the scenes to discover the real cause behind most UX issues, finding that it's not lack of staff, awareness or expertise, but something a whole lot deeper: misalignment of individual intent — personal, organizational and political. Here's what you can do about it.
Web
Alex McPeak, Jan 21

3 Methods for Hands-free Continuous Testing

To strike a balance between speed and quality, teams that hope to achieve CI/CD must also implement Continuous Testing.
JavaScript
Braden Kelley, Jan 20

Build Your First Router in Node with Express

In this tutorial, I’ll walk you through creating a server and teach you all you need to know about routes in Express.
JavaScript
Craig Buckler, Jan 17

How to Migrate to Gulp.js 4.0

Craig Buckler provides a quick tutorial describing how to update v3 gulpfile.js configurations to v4 — now that Gulp.js version 4 has finally (after a five-year wait!) become the npm default.
Web
Patrick Catanzariti, Jan 15

Where to Start Learning Emerging Tech in 2019

Emerging technology has reached new heights as we enter 2019 - VR/AR, machine learning, robotics, the Internet of Things. Here's how to get your start.
JavaScript
Holger Schmitz, Jan 15

Build a Simple Web App with Express, Angular, and GraphQL

In this tutorial, I will show you how to develop a GraphQL web app. The server will run using Node and Express and the client will be based on Angular 7.
Entrepreneur
M. David Green, Jan 14

How to Manage Your Product Backlog with Quire

The product backlog is one of the most controversial artifacts of an agile organization. Everybody seems to have an opinion about how it should work.
Web
Gilad Maayan, Jan 10

Does Your App Include Open Source Components? 5 Security Tips

Contrary to popular belief, open-source components and dependencies are not more secure than their proprietary counterparts.
JavaScript
Matt Raible, Jan 10

Build an App with Everything New & Noteworthy in Angular 7

Angular 7 was released earlier this quarter and I’m pumped about a few of its features. If you’ve been following Angular since Angular 2, you know that upgrading can sometimes be a pain. There was no Angular 3, but upgrading to Angular 4 wasn’t too bad, aside from a bunch of changes in Angular’s testing infrastructure. Angular 4 to Angular 5 was painless, and 5 to 6 only required changes to classes that used RxJS.

Before I dive into showing you how to build an Angular app with authn/authz, let’s take a look at what’s new and noteworthy in this release.

Upgrade to Angular 7

If you created your app with Angular CLI, chances are you can easily upgrade to the latest release using ng update.

ng update @angular/cli @angular/core

You can also use the Angular Update Guide for complete step-by-step instructions.

Angular Update Guide

What’s New in Angular 7

There are a few notable features in Angular 7, summarized below:

  • CLI prompts: this feature has been added to Schematics so you can prompt the user to make choices when running ng commands.
  • Performance enhancements: the Angular team found many people were using reflect-metadata as a dependency (rather than a dev-only dependency). If you update using the aforementioned methods, this dependency will automatically be moved. Angular 7 also adds bundle budgets so you’ll get warnings when your bundles exceed a particular size.
  • Angular Material: Material Design had significant updates in 2018 and Angular Material v7 reflects those updates.
  • Virtual Scrolling: this feature allows you to load/unload parts of a list based on visibility.
  • Drag and Drop: this feature has been added to the CDK of Angular Material.

Bundle budgets is the feature that excites me the most. I see a lot of Angular apps with large bundle sizes. You want your baseline cost to be minimal, so this feature should help. The following defaults are specified in angular.json when you create a new project with Angular CLI.

"budgets": [{
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"
}]

You can use Chrome’s data saver extension for maximum awareness of the data your app uses.

For more details on what’s new in Angular 7, see the Angular blog, coverage on InfoQ, or the Angular project’s changelog.

Now that you know how awesome Angular 7 is, let’s take a look at how to create secure applications with it!

Create a Secure Angular 7 Application

An easy way to create Angular 7 apps is using the Angular CLI. To install it, run the following command:

npm i -g @angular/cli

The example below uses Angular CLI 7.1.0. To verify you’re using the same version, you can run ng --version.

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / â–ł \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.1.0
Node: 11.1.0
OS: darwin x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.11.0
@angular-devkit/core         7.1.0
@angular-devkit/schematics   7.1.0
@schematics/angular          7.1.0
@schematics/update           0.11.0
rxjs                         6.3.3
typescript                   3.1.6

To create a new app, run ng new ng-secure. When prompted for routing, type "Y". The stylesheet format is not relevant to this example, so choose whatever you like. I used CSS.

After Angular CLI finishes creating your app, cd into its directory, run ng new, and navigate to [http://localhost:4200](http://localhost:4200) to see what it looks like.

Default Angular App!

Add Identity and Authentication to Your Angular 7 App with OIDC

If you’re developing apps for a large enterprise, you probably want to code them to use the same set of users. If you’re creating new user stores for each of your apps, stop it! There’s an easier way. You can use OpenID Connect (OIDC) to add authentication to your apps and allow them all to use the same user store.

OIDC requires an identity provider (or IdP). There are many well-known IdPs like Google, Twitter, and Facebook, but those services don’t allow you to manage your users like you would in Active Directory. Okta allows this, and you can use Okta’s API for OIDC.

Register for a forever-free developer account, and when you’re done, come on back so you can learn more about how to secure your Angular app!

Free developer account!

Now that you have a developer account, I’ll show you several techniques for adding OIDC authentication to you Angular 7 app. But first, you’ll need to create a new OIDC app in Okta.

Create an OIDC App in Okta

Log in to your Okta Developer account and navigate to Applications > Add Application. Click Web and click Next. Give the app a name you’ll remember, and specify [http://localhost:4200](http://localhost:4200) as a Login redirect URI. Click Done. Edit your app after creating it and specify [http://localhost:4200](http://localhost:4200) as a Logout redirect URI too. The result should look something like the screenshot below.

Okta OIDC App

Use angular-oauth2-oidc

The angular-oauth2-oidc library provides support for OAuth 2.0 and OIDC. It was originally created by Manfred Steyer and includes many community contributions.

Install angular-oauth2-oidc using the following command:

npm i angular-oauth2-oidc@5.0.2

Open src/app/app.module.ts and import OAuthModule as well as HttpClientModule.

import { HttpClientModule } from '@angular/common/http';
import { OAuthModule } from 'angular-oauth2-oidc';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    OAuthModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Modify src/app/app.component.ts to import OAuthService and configure it to use your Okta application settings. Add login() and logout() methods, as well as a getter for the user’s name.

import { Component } from '@angular/core';
import { OAuthService, JwksValidationHandler, AuthConfig } from 'angular-oauth2-oidc';

export const authConfig: AuthConfig = {
  issuer: 'https://{yourOktaDomain}/oauth2/default',
  redirectUri: window.location.origin,
  clientId: '{yourClientId}'
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ng-secure';

  constructor(private oauthService: OAuthService) {
    this.oauthService.configure(authConfig);
    this.oauthService.tokenValidationHandler = new JwksValidationHandler();
    this.oauthService.loadDiscoveryDocumentAndTryLogin();
  }

  login() {
    this.oauthService.initImplicitFlow();
  }

  logout() {
    this.oauthService.logOut();
  }

  get givenName() {
    const claims = this.oauthService.getIdentityClaims();
    if (!claims) {
      return null;
    }
    return claims['name'];
  }
}

Modify src/app/app.component.html to add Login and Logout buttons.

<h1>Welcome to {{ title }}!</h1>

<div *ngIf="givenName">
  <h2>Hi, {{givenName}}!</h2>
  <button (click)="logout()">Logout</button>
</div>

<div *ngIf="!givenName">
  <button (click)="login()">Login</button>
</div>

<router-outlet></router-outlet>

Restart your app and you should see a login button.

App with Login button

Click the login button, sign in to your Okta account, and you should see your name with a logout button.

App with name and Logout button

Pretty slick, eh?

Okta’s Angular SDK

You can also use Okta’s Angular SDK to implement the same functionality. You can start by installing it.

WordPress
SitePoint Team, Jan 08

How to Choose a WordPress Theme in 2019: A Selection of the Best

Want to know how to choose a WordPress theme? We've selected what we consider to be the best 15 for 2019 for your review.
WordPress
SitePoint Team, Dec 19

Visual Composer: The Brain-Twisting Story of the Name Change

If you have been a Visual Composer user for some time, you have witnessed some changes happening that might have been a little bit confusing.
Web
SitePoint Team, Dec 11

Why More Web Designers Should Give Pre-built Websites a Try

There's a heated and seemingly never-ending debate in the web design industry about whether web designers should always start their design work from scratch or not.
30 COMMENTs
JavaScript
Craig Buckler, Dec 06

Best JavaScript Frameworks, Libraries and Tools to Use in 2019

Craig Buckler comes up with his list of the top JavaScript frameworks, libraries and tools, and explains when to use them.
JavaScript
David Neal, Dec 06

How to Use TypeScript to Build a Node API with Express

The goal of this tutorial is to show you how to build a new Node.js application using TypeScript and Express.
Web
David Cramer, Dec 05

How to Debug Python Errors

One of Sentry’s powerful features comes with languages like Python. In Python, PHP, and the JVM, we’re able to introspect more deeply into the runtime and give you additional data.
JavaScript
Braden Kelley, Dec 04

How to Create and Verify JWTs with Node

In this tutorial, I’ll show you how a modern and secure authentication approach. By the end, you’ll be able to create and verify JWTs yourself in Node.