WordPress
SitePoint Team, Feb 19

5 Core Elements for Building Award-Winning One-Page Websites

This sponsored article was created by our content partner, BAW Media. Thank you for supporting the partners who make SitePoint possible.

Is your next project a one-page website? You might think designing it would be an easy task compared to the multi-page website designs. You're in for a surprise.

Making a one-pager both visually appealing and user-friendly is harder than you think. The design effort alone could be a factor of 10 times greater than you normally put into a multi-page site. This is of the challenges involved in designing a one-pager. For example, you need to stuff a lot of valuable information into a much smaller space in a way that won't turn users off

This guide is centered about 5 critical elements you need to take into account. It will help your one-pager become a success. They're somewhat akin to fire, earth, water, air, and spirit, the 5 fundamental elements of nature. But they're much more important for your purposes.

JavaScript
Maria Antonietta Perna, Feb 15

How to Build Your First Static Site with Gatsby

Thinking about getting on the JAMStack bandwagon? If your answer is yes, then static site generator Gatsby could be just what you're looking for.
Design & UX
Mads Soegaard, Feb 14

Customer Journey Maps: A Day in the Life of a Customer

Mads Soegaard introduces customer journey maps, explaining how to measure customer engagement, how much customers feel they’re in a relationship with your product, business or brand, and the best tools for getting the job done.
Web
Patrick Catanzariti, Feb 12

How to Take JavaScript Beyond the Web in 2019

We take a forward-facing look at all the potential JavaScript has beyond the web in 2019.
Design & UX
SitePoint Team, Feb 12

Check out the 6 Best Productivity Apps for Designers

We've rounded up tools that put productivity-enhancing technology to work, combined with tips and techniques you can use to streamline your design workflow.
Design & UX
Daniel Schwarz, Feb 07

7 Awesome Wireframing Tools You Should Be Using

Daniel Schwarz introduces wireframing — a design exercise that can radically improve user experience — and looks at the best wireframing tools.
JavaScript
Maria Antonietta Perna, Feb 05

How to Beat 5 Common JavaScript Interview Challenges

Maria Antionetta Perna shows how you can tackle five common coding challenges you might be asked when interviewing for a JavaScript or front-end position.
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.