MatthewHughes

I'm a Liverpool-based technology writer with a passion for usability and security. When I'm not churning out copy, you'll find me walking my two dogs: Luna and Apollo

Business Content Writer

Matthew Hughes

From tooling changes to the ascent of the hybrid event model, it’s all change, all the time.

As a seasoned engineer, you've seen your fair share of industry changes. Over the past forty years, developers have witnessed the emergence of new coding paradigms and approaches that have had a seismic change to how they work. Examples include the mainstreaming of object-oriented programming in the early 1990s and the emergence of multi-core programming in the late 2000s. 

More recently, Covid-19 has turned the development world on its head, forcing teams to adapt to a brave new distributed world. As we enter the second year of the pandemic, it is increasingly clear that these changes aren't a temporary blip but rather a long-term reality. 

So, what can we expect from 2022? We spoke to four development, product, and privacy experts at Auth0 to hear their predictions for the year ahead. 

![Remote](https://images.ctfassets.net/23aumh6u8s0i/6esbX2g2LrG3jLK1FQjRyw/a110f6422adefcbfecdc53a67141b809/separator01.jpg)

## Remote Working Drives Tooling 

It's been almost two years since the world was tipped on its head. Tech roles, from software development to system administration, moved from the cubicle farm to the home office. Slack DMs replaced the usual water cooler conversations. Although some firms have fully embraced these seismic shifts, notably Twitter and Pinterest, others are less keen. 

Several Silicon Valley giants — most notably Google and Apple — set deadlines for a return to in-person working, although these have been pushed back again and again, following the emergence of the Delta and Omicron variants. Like it or not, remote working is here to stay for the foreseeable future. As Adam Housman, Group Product Manager at Auth0, explains, this will influence how developer tools are made, configured, and used. 

"I'm excited about how the shift towards remote work is impacting the choices in tooling that design and development teams make. We see a lot more globally distributed teams, and that is directly influencing which SaaS products are gaining traction in modern software companies," said Housman. 

"Products that take the friction out of async collaboration are experiencing a massive amount of growth, but we've reached the point that even companies which may have been late to react to the initial shift with COVID are now catching up," he added. 

What does this mean in practice? Housman expects developer-facing SaaS products to compete for less on functionality but more on flexibility, interoperability, and ease of adoption. Scalability will be another key factor, Housman adds, and the most successful tools will be those that can work equally well across whole companies as with small teams. 

"Companies of all sizes are using way more SaaS products today than they did just a year ago, and we're seeing a distinct shift from top-down purchasing to autonomous teams championing the tools that they need to be effective. I am very bullish about it because that autonomy directly translates to being happier and more productive at work," he said. 

"We're experiencing a bit of a renaissance in SaaS right now; products that solve problems well, are delightful to use, and reduce friction in collaboration among distributed teams have an advantage over more traditional players that rely on top-down adoption. Those that can do all of that and also nail the land-and-expand motion – by fulfilling all of the "enterprise" requirements around single sign-on, security, compliance, and auditing – will be the clear winners."

![Privacy](https://images.ctfassets.net/23aumh6u8s0i/35plETC7j2bdsO3J2pmYJV/b3d92308ff2b6b3dd4c6fcc0ffc8efbe/separator02.jpg)

## Privacy, Engineering, and Security Teams to Work Closer Together 

For the longest time, engineering operated as its own private silo, detached from the other tech-facing sides of the business: including security, operations, privacy, and governance. Over time, that began to change. 

The real catalyst was GDPR. With a maximum possible fine of €20m or 4 percent of total global revenue, organizations were incentivized to take data privacy and security seriously. Subsequent legislation, including the California Consumer Privacy Act (CCPA), as well as the upcoming California Privacy Rights Act (CPRA), only reinforced that.

Rachel Taylor, Compliance Manager at Auth0, believes this will transform the organizational landscape, with engineering, security, and privacy teams working as a single coherent unit. These "shift left" principles are already being adopted in some workplaces, including at Auth0. 

"As privacy laws continue to expand and as the regulatory bodies that govern them continue to hold organizations accountable, companies will not just be challenged with privacy by design, but by the concept of data protection as a service," said Taylor. 

Much like secure-by-design, Privacy by Design sees engineering and design teams consider privacy and compliance requirements at the start of the development process rather than as an afterthought. Data Protection as a Service (DPaaS), meanwhile, allows organizations to rapidly harden their privacy posture through the provisioning of discrete, cloud-based services. 

"I am excited for this challenge, as I believe it offers a unique opportunity to bring teams such as privacy, security, and engineering closer together. Data privacy and data security roles will merge, as the responsibilities between them are further blurred, and the need for a cohesive unit will start to take shape," she added. 

![](https://images.ctfassets.net/23aumh6u8s0i/48rgTNxGDCDabzYHWqKyXk/57df93d97881895281ed1ef585fe3adb/separator04.jpg)

## DevSecOps Becomes More Widespread

David Telehowski, Director of Security Engineering at Auth0, echoed these sentiments, adding that he expected DevSecOps roles and approaches to become more common within organizations of a certain size. 

The National Institute of Standards and Technology defines a DevSecOps platform as where security is ingrained during the design, building, deployment, and runtime phases. "Integrating Security into DevOps practices and workflows enables vulnerabilities to be detected and quickly remediated in every phase of the DevOps lifecycle," said Telehowski. 

This doesn't just bring security and privacy benefits but is liable to accelerate the development process, as a 2020 study from GitLab found. A majority of organizations surveyed integrated DevSecOps into their workflows, and 83% reported faster code releases, with 60% able to achieve multiple daily releases. 

## Hybrid Events are Here to Stay 

The COVID-19 pandemic added dozens of new terms into our collective lexicons, including social distancing, spike protein, and viral load. But let's not forget "Zoom fatigue," referring to the widespread disaffection with virtual meetings. 

"It's fashionable to complain about how hard and alienating virtual events are and to celebrate on social media the first in-person events we are able to attend," said Vittorio Bertocci, Principal Architect at Auth0. In practice, however, virtual events are here to stay, at least as a hybrid model. 

"Conference organizers got a taste of the incredible reach they can achieve when offering an experience that doesn't require the money, time, and complexity traditionally demanded when attending an in-person event. Many conferences achieved record (paying) attendee numbers, reaching audiences traditionally off-limits. They won't give that up," said Bertocci. 

"I expect a sharp increase in hybrid events, aimed both at developers and other interest groups, in 2022. Last year was the testbed for this model, but this will be the year when the industry irons out the wrinkles and brings hybrid events into the mainstream," he added. 

This increased reach has an unavoidable cost. Large sectors of the economy support in-person events, from airlines and hotels to catering firms. These sectors will be the biggest losers from this shift. Bertocci also notes that organizers will have to create the technological underpinnings to support these hybrid events, from conference apps supporting both in-person and online attendees to virtual expo booths and lead generation tools. 

![](https://images.ctfassets.net/23aumh6u8s0i/1i5xKyG2hpADtJuntezwZp/5dd18cbb2c3806412ae6c4acdd3bc614/separator05.jpg)

## Omicron Uncertainty 

The software development sector exists in a perpetual state of change. New frameworks and technologies emerge. Coders wrestle with new paradigms. Culture continues to evolve. This has always been the case but has only felt more true over the past two years. 

The emergence of the Omicron variant offers more uncertainty, with organizations pushing back their office re-opening dates and international travel feeling riskier than ever. For the time being, remote working and socially-distanced webinars are here to stay. 

Looking ahead to 2023, it's possible that things might remain in flux. However, devs are comfortable with responding to change, and I'm personally curious to see how working models continue to evolve.

How Developers Will Work in 2022

alejandro-ortuno

Alejandro is a Security Engineer in Auth0's Detection & Response team with a passion for automation and the cloud. Initiated as a software developer, he has experience working on AppSec, network security and cloud security for startups and enterprise companies such as Cisco or Rackspace. He spends his spare time learning newer technologies, playing padel and breaking things.

Security Engineer

Alejandro Ortuno

Discover how Auth0 uses security automation to respond to GuardDuty events at scale and our learnings in the process



Cloud adoption is occurring at a rapid pace and so are the risks and challenges in maintaining those secured environments. Doing it at scale requires the extensive use of automation and tooling. DevSecOps methodologies can also be applied to the detection and response of threats, decreasing the time to respond and preventing potential breaches. Logging pipelines, Slack bots, orchestration tools, and serverless technologies empower operation teams in a way that traditional security operations centers (SOC) can’t. Services such as AWS GuardDuty provide indispensable threat detection to continuously monitor for malicious activity and unauthorized access on cloud resources.

At Auth0, we have embraced the cloud since our inception, and with cloud resources in numerous AWS accounts in our organization, strong defenses and timely response to security events in the cloud are an absolute priority for us. That is why our Detection and Response team has embraced technologies to automate the response to security events in the cloud to scale for our [future organizational growth](https://techcrunch.com/2019/05/20/auth0-billion-dollar-unicorn/).

In this blog, we will provide an overview of the implemented architecture for the alert analysis, triage, user notification, and automated response of the AWS GuardDuty security findings on all of our AWS accounts.

## AWS GuardDuty Service

[_Amazon GuardDuty_](https://aws.amazon.com/guardduty/) is a threat detection paid service that continuously monitors for malicious activity and unauthorized behavior on AWS accounts and workloads. The service consumes CloudTrail, VPC Flow, and DNS logs and then enriches them with threat intel from AWS and other third-party services (such as CrowdStrike). GuardDuty also uses machine learning techniques to detect malicious activity on an AWS account. The service is regional (needs to be enabled on a per-region basis) and has a 30-day free trial. GuardDuty findings, if any, will start populating just a few minutes after the service is enabled.

At Auth0, we enable the GuardDuty service at account creation in all regions. Configuration follows a [_master/member_](https://docs.aws.amazon.com/guardduty/latest/ug/guardduty_accounts.html) setup where every new AWS account becomes a new member of the master GuardDuty account.
From there, a combination of regional CloudWatch event rules and AWS Lambda functions ships all GuardDuty events into our security information and event management (SIEM) system.

We also monitor the health of this ecosystem closely as any failure would mean a critical gap in our alerting systems. As an example, we monitor specific [_GuardDuty API calls_](https://docs.aws.amazon.com/guardduty/latest/ug/logging-using-cloudtrail.html) (such as `Disassociate`, `StopMonitoring`, `DeleteDetector`, and many more) that could tamper with our infrastructure resulting in a page notification to our team.

Also, we have subscribed to the [_GuardDuty Announcements SNS Topic_](https://docs.aws.amazon.com/guardduty/latest/ug/guardduty_sns.html) and integrated the alerts with our bot, so we get Slack notifications when there are new GuardDuty findings or updates to the existing ones that require our attention.

## SecurityBot

At Auth0, we rely heavily on Slack as our main communication channel. On top of it, [we have created Slack Bots](https://auth0.com/blog/auth0-internal-dev-tools-unleashing-engineering-potential/) that can automate our common tasks and help us scale and better respond to security events.

One of those bots is the SecurityBot, developed by the Detection and Response team on top of our Security Orchestration, Automation, and Response (SOAR) system. Auth0’s SecurityBot was inspired by the awesome work of the security teams at both [_Slack_](https://slack.engineering/distributed-security-alerting-c89414c992d6) and [_Dropbox_](https://github.com/dropbox/securitybot).
The SecurityBot helps us in two main tasks:

- As a ChatOps function, we can ask the bot to create an incident response channel, add all necessary members to it, initiate the documentation for an incident, or perform an investigation on specific IPs and Domains.

- As our main channel to communicate with employees. The bot can send notifications or inquiry messages (that require a confirmation) to our employees, ask for MFA confirmation, or even page our team if an employee responds negatively to a specific event.

![A message notification from SecurityBot](https://images.ctfassets.net/23aumh6u8s0i/3heWkQLOzq6ehvjVSDE5a1/967048353b36f46ce89be46c3ea7be00/a-message-notification-from-securitybot)

## AWS Incident Response Tool (aws-ir)

Especially important when dealing with an incident is to have a timely response. For that reason, our team has developed an internal tool to make investigation and response on AWS a much easier and repeatable task.

AWS IR is an API built on a serverless infrastructure that allows our team to take necessary forensic artifacts and response options on a specific machine in any of our AWS accounts. Those actions are mainly:

- Take a snapshot of the instance volume.

- Run a set of [_osquery_](https://osquery.io/) commands.

- Take a memory dump.

- Take a `tcpdump` of the network traffic.

- Isolate an instance.

We have integrated this tool with the response to GuardDuty events so we can collect artifacts and perform response actions depending on the severity of the alerts.

## The Hive Project

Keeping records for the actions taken and the artifacts collected is sometimes a “boring” but necessary task to do while performing a response to an incident. [_The Hive Project_](https://thehive-project.org/) is our main ticketing and artifacts collection platform that we use to perform our investigations.

We rely on its APIs to create alerts, promote them to cases, and to upload the artifacts that we automatically collect.

## Automating the Response Like a Pro

Now that we have explained all the different elements that compose our architecture let’s see how we glue them together.

We partner with the security automation company [_Tines_](https://tines.io/) in this regard. Every alert from our detection stack, whether it’s from SIEM, GuardDuty, Phishing, or custom tooling we’ve built, first goes through Tines where it is enriched, prioritized, and ticketed. We also use Tines to automate the response to the GuardDuty alerts.

One of the most common observations after enabling GuardDuty is that it can be daunting at the beginning and that it requires a significant amount of time to tune it to make it serviceable for your environment. Let’s take a look at a few examples of what this tuning looks like and some associated caveats:

### Network Load Balancer: Port Probe Alert False Positives 

Receiving a GuardDuty event of an instance which have a random port that is being probed by a malicious IP from the internet can be concerning. But the story changes if the instance has no public IP, and is behind a load balancer which has port 443 open to the internet. The reason for this is that the Network Load Balancer, by default, offers "Source IP Preservation" and the source IP addresses of the clients are preserved and provided to your backend applications. This is documented in the following [_public article_](https://mysteriouscode.io/blog/dont-panic-false-positives-from-guardduty-and-network-load-balancer-nlb/) as well. Later we will discuss how we have overcome this limitation when making changes on the load balancer is not an option.

### Alerting on harmless customer provided domains

If your service takes or ingests domains supplied by your customers and queries them (as is the case for us), GuardDuty can flag some of this legit activity as malicious. We encountered false positive "Backdoor and Trojan" alerts that happened due to customers providing flagged domains into our service.

### Detecting anomalies while employees are on the move

Machine learning is great, and we definitely believe in this technology for detection purposes (we want to further expand on this technology for our own sake). Still, it doesn’t cope well on a remote-friendly company where employees are on the move, continuously changing their locations and source IPs.

### GuardDuty events for already terminated EC2 Instances

We have received GuardDuty events where the instance state is “terminated” (this information is contained on the GuardDuty event). On an ephemeral infrastructure where instances are spun up and torn down on demand, and there are no long-running services, this can limit our capabilities to respond to incidents or to perform live investigations.

### Visibility gaps in cloud environments

There is a lack of visibility for Digital Forensics and Incident Response (DFIR) with GuardDuty for containers/microservices, especially if they are running on the same EC2 instance. Alerts will come from the same EC2, and additional logging/tooling will be needed to respond to those alerts.

<include src="TweetQuote" quoteText="Learn how to tune GuardDuty to make it serviceable for your environment and the associated caveats."/>

So let’s dig deeper into how we have automated the response for those GuardDuty findings and overcome some of those challenges. We have grouped the different GuardDuty events and their responses mostly into four different categories:

1. EC2 PortProbe alerts

2. IAM User non-critical alerts

3. IAM User critical alerts

4. EC2 Other alerts

Let's go over the response for each of them.

## PortProbe Alerts

The first group of alerts involves inbound port probing, which means potentially malicious IPs probing ports that are open on the internet. We do have PortProbe type of events (_Recon:EC2/PortProbeUnprotectedPort_) and also SSH and RDP brute force events included in this group.

Initially, we filter out common ports that we know are open and are commonly attacked (for example, port 443). Also, as mentioned before, we do not want instances that are behind a network load balancer to trigger events if the load balancer is opening common ports such as 443. For that reason, we have built an [_AWS Step function_](https://aws.amazon.com/step-functions/) that maps network load balancer ports against instance ports and dumps this information on a DynamoDB database. From Tines, we query the database to filter out alerts on instances behind a network load balancer from which the listening port is 80 or 443.

![AWS Step function to collect network load balancer information](https://images.ctfassets.net/23aumh6u8s0i/6ApTwxb12qBo36xQ3tlpVc/a22e10551f48604894d5ef8326394160/aws-step-function-to-collect-network-load-balancer-information)

Finally, if the event is not filtered and has not been notified before, we send a notification via SecurityBot to the resource owner (based on Instance tags).

## IAM User Non-Critical Alerts

In this group, we cover GuardDuty `IAMUser` events that we have deemed non-critical. These events typically suggest suspicious API calls made by AWS principals. Our main action with those alerts is to first automatically determine the mapping of the Principal to an employee and their endpoint machine. From there, we check their device IP and compare it to the IP in the alert. If there is any mismatch, we trigger a SecurityBot Inquiry message to ask the employee for confirmation that they made the AWS API call.

![SecurityBot Inquiry Message](https://images.ctfassets.net/23aumh6u8s0i/3urYXdOgk6xG4F2nOp2L1B/53a2bf233268ff3b2f95a9c14ee28ab2/securitybot-inquiry-message)

## IAM User Critical Alerts

In this group, we cover the GuardDuty IAMUser events that we have deemed critical, and as such, they trigger a PagerDuty alert to our team. These events include modification to CloudTrail, password policy changes, credential exfiltration, or the [_latest S3 specific alerts_](https://aws.amazon.com/about-aws/whats-new/2019/10/amazon-guardduty-adds-three-new-threat-detections/) among others.

We also enrich the alerts with the following information:

- List of employees seen under the same offending IP over the last 24 hours

- CloudTrail API calls made by the offending IP

## EC2 Alerts

Within this group, we have the following event types:

- EC2 Outbound network connection

- EC2 DNS request

- EC2 PortScanning

There is an important filtering layer that we needed to implement for our network scanner, and also for services that query customer provided domains which caused false positives to trigger. We initiate the AWS Incident Response tool to collect specific artifacts on the instance so we can better perform timely forensics investigation on the machines.

<include src="TweetQuote" quoteText="Dig deep into how Auth0 has automated the response to GuardDuty events and the associated challenges."/>

## Conclusions

We have no doubt as to the incredible value and visibility the AWS GuardDuty service provides to our team. Enabling it is incredibly simple, and we have decided to include it on each of our AWS accounts.

Automating our response to the GuardDuty alerts has helped us focus on what is important to us, filtering out some of the noise it generates and customizing it to our environments. We have evolved from processing hundreds of GuardDuty events per week (that would completely consume our team’s time to review and respond to these alerts) into just a few events per week needing our manual review. To add to this, with SecurityBot, we empower our employees to provide valuable real-time data relating to potential security incidents, making them aware of the alerts and also adding them to the front line of our security team.

For future work, we will continue to improve the automation for our incident response process. We also want to include other sources of information into our alerts, such as the events provided by agents like [_osquery_](https://osquery.io/) or information specific to containers and Kubernetes infrastructures. On top of that, we will expand our threat model to include attacks vectors such as compromised employee machines, malicious insiders, etc.

<include src="asides/AboutAuth0" />


Guardians of the Cloud: Automating the Response to Security Events

sambiopic

I'm Director of Developer Relations and a Google Developer Expert for Angular and Web Technologies. I believe anyone who wants to learn to code should be able to learn code and I love teaching. When I'm not coding or writing, you'll find me outside hiking or camping in the beautiful Pacific Northwest.

Director of Developer Relations

Sam Julien

Learn how to create workspaces, generate code, run tasks, and install extensions with Angular Console.


**TL;DR:** In this article, we’ll explore Angular Console. Angular Console is a desktop application that provides a graphical UI for the Angular CLI. It is packed with features like code generation, task running, and a simple interface for installing CLI extensions like schematics. Angular Console is a great tool for Angular developers of all skill levels!

There’s often a bizarre prejudice in programming against graphical UIs in favor of the command line. Maybe it’s because of 80’s hacker movies, but it’s never made sense to me. A GUI is just a layer of abstraction. The computer gets the same commands whether you’re clicking on some buttons or furiously typing green text into a black screen.

[Angular Console](https://angularconsole.com/) is a great reason to reconsider that bias. It’s a desktop application developed by [Nrwl](https://nrwl.io/) that provides a graphical UI for the Angular CLI. Nrwl is a software development consultancy that specializes in creating high-quality enterprise software. They’re also great at giving back to the Angular Community.  Angular Console is packed with features like code generation, task running, and a simple interface for installing CLI extensions like schematics.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Do you enjoy a visual UI when building/serving <a href="https://twitter.com/angular?ref_src=twsrc%5Etfw">@Angular</a> apps? I tried the brand new Angular Console from <a href="https://twitter.com/nrwl_io?ref_src=twsrc%5Etfw">@nrwl_io</a> and it&#39;s looking good! <br><br>See it below 📽️<a href="https://t.co/GetJg4ELsw">https://t.co/GetJg4ELsw</a> <a href="https://t.co/DnahCmUJsJ">pic.twitter.com/DnahCmUJsJ</a></p>&mdash; John Papa (@John_Papa) <a href="https://twitter.com/John_Papa/status/1028319375835758593?ref_src=twsrc%5Etfw">August 11, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Who is Angular Console for?
When the team at Nrwl announced Angular Console,  a lot of people shared a similar reaction. Sure, a GUI is fine for *beginners* (probably said with a sneer), but not the *Advanced Super Users*. I’m here to tell you that Angular Console is incredibly helpful for Angular developers across the experience spectrum.

<include src="TweetQuote" quoteText="Angular Console by @nrwl_io is helpful for @angular devs of all experience levels."/>

### It’s fantastic for new Angular friends
Okay, yes, let’s get this out there: Angular Console is great for folks new to Angular. Learning Angular can be tough, even with prior programming experience. Suddenly, you’re thrown into a world of TypeScript and RxJS observables on top of all of the normal front end development concerns.  The [Angular CLI](https://angular.io/cli) is a lifesaver, but even that has a learning curve. The CLI has a specific syntax to learn, as well as all of the different commands needed to build applications. I don’t know about you, but the faster I can get up and running with a new framework, the more likely I am to stick with it.

Angular Console helps reduce the tooling friction of learning Angular to practically nothing. In just a few clicks, you can have a shiny new Angular application and open it in your favorite editor. You can then run CLI commands to generate things like components and services straight from Angular Console. You can even run and serve your app with a few clicks!

### It’s a lifesaver for experienced Angular developers
Do you remember (without looking!) the command to use the NgRx schematics to generate a new action, but to use a flat directory structure and group all actions within one folder? How about the command to add a directive to a specific module while giving it a custom prefix?

Neither do I, at least not from memory. It’s the same reason I have to look up `git rebase` syntax nearly every time: I have more important things to worry about than memorizing a zillion commands!

In psychology, this is called being a [cognitive miser](https://en.wikipedia.org/wiki/Cognitive_miser). We humans prefer simplicity over complexity when it comes to processes and problem-solving. We can improve our ability to solve problems and finish tasks by reducing unnecessary complexity.

Angular Console helps reduce your cognitive overhead by providing a simple interface for generating code that includes live updating of CLI command output.

Here’s a screenshot of that command I mentioned to add a directive with a custom prefix to a specific module:

![Generating a directive with Angular Console.](https://images.ctfassets.net/23aumh6u8s0i/2dKRfnSdhAPaKy0l9OK0RN/2abf53d5d47cdfec092ecafb58961e43/ac-gen-directive-2)

Note that I didn’t have to remember the name of the project, the path to the module, or the command to use a custom prefix. Angular Console handled all of that for me while showing me what it was doing under the hood. This becomes even more useful as your applications get larger, especially when trying to keep track of multiple projects and modules.

Angular Console also lets you quickly and easily add  CLI extensions and schematics to your applications.  There’s no more looking up exactly which package you need to install. If you want to add [Angular Material](https://material.angular.io/), [Ionic](https://ionicframework.com/), [NativeScript](https://www.nativescript.org/), or many others to your application, you can simply choose from a list and click “Add.” You’ll learn more about that in just a minute.

Naturally, the [Nx schematics](https://nrwl.io/nx/what-is-nx) from Nrwl are tightly integrated into Angular Console. Nx schematics unlock all kinds of essential tools for enterprise developers, like the monorepo pattern, built-in support for testing with Jest and Cypress, and an incredible suite of scripts (like the ability to generate a dependency graph). Nx is definitely a power tool for the advanced user and Angular Console lets you wield it with ease and grace.

## A Tour through Angular Console
Now that you know *why* Angular Console is so helpful, why don’t you take it for a test drive?

### How to Install Angular Console
You’ll first need to head over to the [Angular Console site](https://angularconsole.com/#download) to download and install it. It’s available as a desktop app for Mac, Windows, and Linux (the Linux app is still experimental), as well as an [extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console). The requirements for running Angular Console are the same as running the Angular CLI, so you’ll need to [download and install Node](https://nodejs.org/en/) first.

> Note: For this tour through Angular Console, I'll be using the dekstop version. The UI for the Visual Studio Code extension is a bit different, but all of the functionality is still there.

![AngularConsole.com desktop app download options](https://images.ctfassets.net/23aumh6u8s0i/78OTGmjvEC5SEgdbLELEUz/7c691bbb3ac7e5bf1cc2fc44d94ab44a/ac-download-window)

### How to Create a Project with Angular Console
Once you’ve got Angular Console installed, open it up. You’ll see a welcome screen that lets you choose between creating a new Angular workspace or opening an existing one.

![The Angular Console welcome screen - create a project.](https://images.ctfassets.net/23aumh6u8s0i/6j8uEp5XUH3FG9N1ScIl2a/efb585eaccffb24c20409c2fda020e0e/ac-get-started-2)

Click the create button. Select the parent directory you want to use and give a name to your new workspace (you can name it whatever you’d like). Angular Console will show you the path where your new workspace will live once it’s created.

![Angular Console - Select a parent directory and give your workspace a name.](https://images.ctfassets.net/23aumh6u8s0i/2nDW40KJC9l8nRoRFPS1ob/934f7041ba2bc4dd366549ab76814c49/ac-name-new-workspace)

Click on step 3, “Choose a schematic set.” Here, Angular Console gives you the option to use either the default Angular schematics or Nrwl’s Nx schematics. As mentioned earlier, the Nx schematics create a monorepo and allow for some great other options for enterprise developers. For now, let’s keep things simple. Choose the default schematics.

![Angular Console workspace - Choose the default schematics and click Create.](https://images.ctfassets.net/23aumh6u8s0i/2aH2CDRyFYb1wS2tSasEJE/64a4b45d576664f1e3bfe944d4c162b7/ac-create-workspace-schematics-2)

There's also an optional step 4, "Set schematic options." This includes options to skip the initial dependency installation, initialization of a git repostory, and many others.

You can keep it simple right now, though. Skip all of those and just click "Create."

You’ll see a bunch of output from the command line as the Angular CLI generates the application and runs `npm install` for you. Once that’s done, Angular Console will open the workspace for you.

![Angular Console project automatically opens the workspace after setup.](https://images.ctfassets.net/23aumh6u8s0i/3OshHgPs2TNOWvk7oxLmoY/37b440545cd44c750e9d579f2550a132/ac-workspace-created-2)

If you click on the bar at the bottom (called the "action bar"), it will slide out as a bottom sheet and show you all of the command line output for running `ng new` to set up your workspace. This bar will appear any time you run a task. You can click on it to look at the output and then click the trash can icon to dismiss it.

In doing research for this article, I learned a couple of neat things about the action bar. I interviewed Nrwl engineer Dan Muller about Angular Console and it turns out this is his favorite feature in the app. Dan and his best friend [Cindy](https://twitter.com/czengg) were traveling together while they brainstormed on how to make this feature amazing. The action bar actually caches the last five tasks you ran. In addition to dismissing the output, there’s also a button that lets you re-run these tasks. Here’s an example from another project I have open:

![Angular Console application listing up to five prior tasks.](https://images.ctfassets.net/23aumh6u8s0i/4MngwN18OAMfMeQoCJJCu8/69b709c56c1111f950290efae9175c17/ac-task-sheet-2)

Dan also put a lot of love into the UI design of this feature, like how the icons change if the task failed or was successful. The Angular Material library has no built-in bottom sheet, so he created it from scratch. You can really tell that Nrwl put a lot of care and attention into Angular Console, which developers like me really appreciate.

Okay, your new workspace is ready to go! Let’s look at how to use Angular Console.

### Angular Console basics
Looking at the open project, you’ll notice a hamburger menu button in the upper left corner. That button takes you back to a list of workspaces, where you can also create or open a new workspace.

Below the main title bar, you’ll see a filter bar and a sorting button to organize projects. Of course, this brand new application only contains the main project and its `e2e` folder, so those aren’t terribly useful yet.

Below the filter and sorting bar, you’ll notice that there are a few buttons. To the right of the name of the main application, you’ll see buttons for “Serve,” “Test,” “Build,” and “Generate Component.” To the right of the end-to-end project name, you’ll see an “E2E” button. These buttons correspond to Angular CLI commands or `npm` scripts.

<include src="TweetQuote" quoteText="Angular Console can generate code, run tasks, and install extensions."/>

The left toolbar is home to all of the core functionality of Angular Console.

![The Angular Console app UI has buttons to get to a list of projects, code generation, task running, and extension installation.](https://images.ctfassets.net/23aumh6u8s0i/44AUZ7tT8SzdpR5Q33fLnf/afa7a84379ed550e9d7333233c416f3d/ac-toolbar-2)

The top list button you takes back to the list of projects in the open workspace (where you are now). The bottom gear button takes you to the settings screen. The chat bubble icon is where you can access [Nrwl Connect](https://nrwl.io/connect), which is Nrwl’s premium support service. Nrwl Connect also unlocks some additional features in Angular Console.

The other three buttons are for generating code, running tasks, and installing extensions. Let’s step through each of these.

### Generate code
You can use Angular Console to generate code in projects by clicking on the brackets icon in the left toolbar.  This screen lists all available schematics, which you can also filter by name.

![The Generate Code screen in Angular Console.](https://images.ctfassets.net/23aumh6u8s0i/7HQZxs1tK64c8wwquMMXbQ/7d73963ffda705e193b6f6d9b4a29d8d/ac-code-gen-2)

To try this, click on `component` under the standard `@schematics/angular` package. You’ll see a new screen with two sections: “Important fields” and “Optional fields.” You'll also see a collapsible bottom pane with a button that toggles between structured output or console output. The console output shows the `generate` command using the `--dry-run` flag and updates as you change options (so cool!). You can also hide this pane at any time with the caret button to the right.

![Generating a component with Angular Console.](https://images.ctfassets.net/23aumh6u8s0i/6S4njbgc6tA4GxcIgUaoqQ/dbf71cba5e147f07b4671e82af193ef6/ac-create-component-2)

You’ll probably stick with the “Important fields” most of the time, but the “Optional fields” are where power users of the CLI will benefit. It can be tough to remember all of those extra flags and options. Angular Console’s live updating of the dry run output is extremely useful, too. Sometimes I just use Angular Console as a staging area for the commands I want to run and then copy and paste them into my terminal.

To generate a component from this screen, fill out a name and select the main project (not the `e2e` one). You can leave everything else with the default values, but feel free to experiment to see how the console output changes. When you’re ready, click “Generate” in the upper right corner. You’ll see the command change to drop the dry run and execute in the console. If you toggle the bottom pane to “Structured Output,” you’ll see that the task completed successfully.

![Successful component generation in Angular Console.](https://images.ctfassets.net/23aumh6u8s0i/2kJczWnhQd8KYALcNd67Ua/95aaf22148d5cd6c31038a0ed4f28dcf/ac-component-successful-2)

Click the “X” in the upper left corner to return to the code generation screen. The task output is still available to you from the action bar you saw earlier.

### Run tasks
Code generation is really awesome, but it’s only one of the features of Angular Console. You can also use Angular Console to run tasks. Click on the terminal icon in the left toolbar to get started. You’ll see a list of `package.json` scripts, as well as tasks related to the main project and the `e2e` project. You can also filter by name like on the other screens.

![The task runner screen in Angular Console.](https://images.ctfassets.net/23aumh6u8s0i/6pHBc9DJ3m08JwVUerkgGb/fc732f0a4b75c63175c0132cb4894ef0/ac-task-runner-2)

Search for “serve” and click on the task under the main project you created. You’ll see a screen similar to the one you saw when generating code. The familiar “Important fields” and “Optional fields” will be present, as well as the output pane.  You’ll also see radio buttons for the `serve` task to either run with the default or production configuration.

![The individual task screen in Angular Console.](https://images.ctfassets.net/23aumh6u8s0i/5aKvIyOvQPn0NUwz4MlyrG/a0efce6e1b3021d6272be2ab166f74f7/ac-serve-task-2)

Just as with the code generation screen, you’ll most likely stick with the standard fields as you get started. That being said, there are a wealth of options just for the `serve` command, like the port, the host, SSL settings, and settings specific to the underlying Webpack build. When you run `ng serve` or its cousin `ng build` from the terminal, you may not realize just how much granular control you can have on the CLI build. Having a UI really helps with that.

Once you’ve got the settings how you want them, click the “Run” button in the upper right corner. You’ll see the successful Console Output, as well as some new information from the Structured Output. You can click on the provided link to view your application in the browser at `localhost:4200`. If you make changes to your code, Angular Console will also let you know when the application rebuilds.

![The task output of the serve command.](https://images.ctfassets.net/23aumh6u8s0i/78TOtC2e192hD3qdSfMOVU/d20071673753b77ceac84655d83c506d/ac-serve-output)

Click the “X” in the upper left corner to return to the task runner screen. The task is again available to you from the action bar. This time, since the server is in watch mode, you’ll see the spinning progress circle inside of a button on the left side. You can stop the `serve` task any time by clicking that button.

### Install extensions
Last but not least, Angular Console features an easy way to install other extensions and schematics packages in your workspace. Click on the puzzle piece in the left toolbar to go to the extensions screen. You’ll see a long list of available extensions from the Angular team, outside companies, and members of the community. Whether you need to add state management, a UI library, or mobile support, you can search through the list and install the package you need with ease. You can also install Nrwl’s Nx schematics to convert your default CLI workspace into an Nx workspace.

![Angular Console extensions screen.](https://images.ctfassets.net/23aumh6u8s0i/eqthXndlrMiNUwSqdXru7/4da0bf84daef618ba3fa28672aeb79fe/ac-extensions-list)

To try this out, search for “material” and click on the `@angular/material` package. You’ll see the familiar UI, but without any additional options.

![The screen to add Angular Material.](https://images.ctfassets.net/23aumh6u8s0i/1XZaZH25iEcoeNXgi53i48/7da6ad5110208ba854beb304ea43f5c0/ac-add-material-2)

Click the “Add” button in the upper right corner. You’ll see the installation output in the console, as well as “Task completed successfully” in the Structured Output.

![Angular Material was added successfully!](https://images.ctfassets.net/23aumh6u8s0i/2viRdtqnyE5QFsgnbprt11/58ff2fdc2a380c10de5963c285164dc6/ac-add-material-successful-2)

Clicking on the “X” in the upper left corner will take you back to the extension installation screen. You’ll also see your completed task added to the bottom task list. You can clear that list any time by clicking on the bar to pop out the bottom sheet and clicking the trash can button. Note that clearing out the list will also stop any running tasks like `ng serve`.

If you install extensions that include CLI schematics, such as Nx or NgRx, you'll also see new tasks available from the Task Runner screen.

## Conclusion
I hope this tour of Angular Console has given you some ideas of how it can be useful to you. If you’re new to Angular, I hope Angular Console will become a great learning tool that helps you get up and running quickly with Angular. If you’re experienced with Angular, I hope you’ll see it as a timesaver and a cheatsheet for CLI commands. If you can’t stand GUIs and want to stick to the command line, that’s okay too. Whatever you choose, happy coding everyone!

*Special thanks to [Dan Muller](https://github.com/mrmeku) from Nrwl for  talking through some of the features and engineering decisions of Angular Console with me. Dan can be reached at [dan@nrwl.io](mailto:dan@nrwl.io).*

<include src="asides/Angular" />


A Tour of Angular Console

Learn how to create apps, libs, and custom workspace schematics with the enterprise Angular tool Nx.

Create Your First Custom Angular CLI Schematic with Nx

eHk3ciM

I am the Group Manager, Developer Content at Okta, and a Google Developer Expert in Web Technologies and Angular. I'm passionate about identity, authentication, constant learning, and developer communities. As a developer advocate, engineer, mentor, and international speaker, I love learning from and sharing with other inhabitants of the tech space.

Group Manager, Developer Content

Kim Maida

Many developers are overwhelmed by the rapidly expanding ecosystem of modern JavaScript. Learn how to manage and mitigate JS fatigue.


**TL;DR:** Most JavaScript developers have heard of or experienced JavaScript fatigue. JS fatigue is the overwhelming sense that we need to learn most of the hottest emerging technologies in order to do our jobs well. This is unattainable and the stress we feel to achieve it is unjustified; so how do we manage and combat JavaScript fatigue?

---

![JavaScript fatigue comic](https://images.ctfassets.net/23aumh6u8s0i/4NFPPvHmFXs1H0bRHVjuHv/0ffdc8fb11a7e58f586f0b3a92e2f0bb/comic)
_[View larger](https://cdn.auth0.com/blog/js-fatigue/comic.png)_

## What is JavaScript Fatigue?

Putting satire aside, _JavaScript fatigue_ is on a lot of developers' tongues and blogs recently, and with valid reason. But what does it mean to have JS fatigue? It's often mentioned when someone hears about a new library, framework, dependency manager, build tool, etc. Let's do a quick breakdown of what JS fatigue means.

### JS Fatigue vs. Analysis Paralysis

JS fatigue is often linked with [analysis paralysis](https://en.wikipedia.org/wiki/Analysis_paralysis) (also called _choice paralysis_). JS analysis paralysis can occur because of the huge range of options when selecting a framework, tooling, testing suites, and more for a new application. Choosing the right framework or library can be challenging and occasionally even paralyzing, but having a wealth of tools at our disposal allows us to be more selective about what's best for the job at hand. In some cases, options help us to _avoid_ fatigue by supplying an ideal solution for a specific project.

### What it Means to Have JS Fatigue

We get JS fatigue when the requirements (either actual or self-imposed) for learning something are so daunting that a developer becomes exhausted and overwhelmed.

JS fatigue can refer to:

* the fear that we'll fall behind or become obsolete if we don't know and use the newest, hottest tools;
* the sense that we never become experts in anything because everything changes too quickly and the tools we're trying to learn are already being replaced;
* picking up a new framework and then becoming overwhelmed thinking we need to master everything in the toolchain in order to use it;
* the fear that we'll pick a tool that will get displaced, resulting in a lack of support and obsolete resources;
* frustration with a lack of user empathy when consulting documentation or resources while trying to learn a new framework or toolchain.

## JavaScript's Astonishing Growth Rate

In a nutshell, JS fatigue has become a phenomenon because the JS landscape is ever-changing. Various build tools, transpilers, and syntax additions are considered par for the course. There are even [dozens of _entire languages_ that compile to JS](https://github.com/jashkenas/coffeescript/wiki/list-of-languages-that-compile-to-js).

The exponential and unslowed growth of JS has opened the doors for great tools, languages, and frameworks. However, this also promotes change so rapid it can make any developer's head spin. [The Deep Roots of Javascript Fatigue](https://segment.com/blog/the-deep-roots-of-js-fatigue/) delves into the history of JS and its swift evolution over a short amount of time. It's a great read and highly recommended.

Only a few years ago, most programmers considered _front-end development_ to consist primarily of HTML, CSS, and UI-enhancing JavaScript (such as jQuery). Since then, JS alone has proliferated into [isomorphic JS](http://isomorphic.net/javascript), [functional reactive programming](https://auth0.com/blog/glossary-of-modern-javascript-concepts/#functional-reactive-programming) [in](https://www.sitepoint.com/functional-reactive-programming-rxjs/) [JS](https://www.infoq.com/articles/virtual-panel-reactive-javascript-and-elm-in-2016), [frameworks, libraries, build](https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711#.fuxwtb909) [tools, package managers, and much more](http://stackoverflow.com/questions/35062852/npm-vs-bower-vs-browserify-vs-gulp-vs-grunt-vs-webpack). We used to refer to "front-end" wholistically as all client-side development, but JS has evolved to support a specialization: _JavaScript developers_.

## How to Manage JS Fatigue

At this time, JS proliferation is _not_ showing signs of slowing. JS fatigue doesn't have a magic bullet cure, but there are things we can do to manage and also mitigate it. **The following tips are useful for overwhelmed new developers as well as experienced, fatigued JS engineers.**

### Pick Your Battles

The first thing to focus on is picking your battles. We get easily overwhelmed trying to follow every hot new thing that emerges. **It's good to be _aware_ of the sea of new technologies, but not to drown in it.** If something starts to come up a lot, read a little about it. You'll want to know just enough to answer the following:

1. What is its primary purpose?
2. Is it popular enough to have a stable, growing community and easily accessible support? (Who is behind it? Who is using it?)
3. Does it _solve_ a problem I frequently run into with my current tools?

If #1 isn't practical for your use case and the answers to #2 and #3 are not both _yes_, don't expend precious time and effort learning this if you're already fatigued. **It can be best to wait and see, or to take a pass on tools that don't serve your goals.** [Make peace with your focus](https://medium.com/javascript-scene/why-im-thankful-for-js-fatigue-i-know-you-re-sick-of-those-words-but-this-is-different-296fae0c888f#.h81mamgiv) and remember that _no_ JS developer is an expert in every new tool that lands.

<include src="TweetQuote" quoteText="Pick your battles: It can be best to wait and see, or to take a pass on tools that don't serve your goals."/>

In fact, it can make us _better developers_ to know when to be okay with _not_ learning some new tool. You may have heard the expression "[Jack of all trades, master of none](https://en.wikipedia.org/wiki/Jack_of_all_trades,_master_of_none)", which implies superficial knowledge in many things but expertise in none of them. Remember that **you're _not_ obligated to learn everything** and you can excel at your craft without jumping on every bandwagon that rolls up to the curb.

On the other hand, **if a tool has gained critical mass _and_ will help you solve a problem you're having, it's worth further exploration**. Don't feel like you have to commit to learning it right away, but it might help to find out a little more and keep an eye on it.

<include src="TweetQuote" quoteText="Pick your battles: if a tool has gained critical mass and helps you solve a problem, it's worth exploration."/>

### Make Something Interesting / Useful

For many developers, there are two primary ways we learn something new in a short amount of time:

1. We need to learn it in order to complete a project with predefined requirements and a deadline, or:
2. We build something on our own that we're interested in.

Learning anything can be arduous and tedious if we don't have a clear view of the end result or real-world practicality. On the same token, **learning is much more gratifying when we're building something interesting or useful**.

One good way to learn new tools and frameworks is to make the same thing (something useful that you like) using different tools.  This [shouldn't be the ubiquitious and tiresome TODO app](https://hackernoon.com/cure-for-js-fatigue-build-something-more-interesting-afaf74b95682#.bi5mnqt96). It should be something that covers many common features of modern applications, such as:

* Routing
* Global header and footer
* CSS framework integration
* Responsive UI and custom styles
* Global application data
* External API
* Services and utilities

This has several advantages for learning.

* **Familiarity**: knowing what you're trying to achieve and not making it up as you go along makes development more straightfoward.
* **Comparison**: rebuilding something reveals similarities and differences as well as highlights strengths and weaknesses between frameworks.
* **Iteration**: you may find that each time you go through this exercise, you see things you can refine and improve.

It's important to maintain a high level of interest and/or usefulness with your learning app. Creating a robust starter project can help you quickly learn the ins and outs of setup and common features while providing a practical beginning point for future apps you build.

### Be Aware of Common Concepts

Even as JS grows and changes, there are always [concepts shared amongst many new frameworks and libraries](https://auth0.com/blog/glossary-of-modern-javascript-concepts). It's useful to keep an eye out for these tools and topics. For example, [ES6](https://auth0.com/blog/a-rundown-of-es6-features) and [TypeScript](https://www.typescriptlang.org/) are becoming more heavily used, as well as [Webpack](https://webpack.github.io/), [functional reactive programming](https://vincenttunru.com/Javascript-reactive-programming/), and [web components](https://auth0.com/blog/web-components-how-to-craft-your-own-custom-components/). **Knowing about common dependencies makes different frameworks feel more similar.**

When you take the plunge with a new framework and toolchain, you'll learn some of the common topics. You'll be pleased to find that other modern frameworks leverage many of the same tools and concepts and are now much easier to pick up.

### Learn Iteratively

Many developers are fatigued by the fact that new frameworks have so many complex dependencies that it takes weeks to set up a new app. Don't be afraid to use tools if they help. If a CLI is available or the community offers starter projects, take advantage of them. **Getting off the ground quickly allows you to focus on learning the core features and avoid getting discouraged by difficult setup.**

It's ideal to know how and why something works so it's less magical, but [that _doesn't_ mean you need to frontload that knowledge before getting started](https://medium.com/building-kwoosh/you-dont-need-more-knowledge-83c5247e8f60#.yvz0arns4). Don't worry if you find yourself picking it up along the way. When you hit a roadblock, work through it. Remember to take breaks if you get frustrated. **"Learn as you go" is a legitimate, effective method for absorbing lots of new information over time.** Once you've done the basics, the _how_ and _why_ reveal themselves, either in "Ah-ha!" moments or gradually with repeated use.

<include src="TweetQuote" quoteText="'Learn as you go' is a legitimate, effective way to absorb lots of new information over time."/>

## Aside: Use Auth0 For Authentication in JS Apps

Taking advantage of knowledge, tools, and solutions from others is extremely valuable when combating JS fatigue. Authentication can be one of the most complex, time-consuming features to build for _any_ application. Developers who are already learning a new toolchain, library, or framework can become even more overwhelmed building secure, complicated features like authentication.

If you have a JS app that needs authentication, Auth0 can bear the load for any framework. Auth0's [Single Page Application QuickStart guides](https://auth0.com/docs/quickstart/spa) and [Auth0 SDK for Web](https://auth0.com/docs/libraries/auth0js) provide indepth documentation for robust identity and user management in JS apps. Auth0 makes authentication straightforward, greatly reducing fatigue and cognitive burden for busy developers.

Don't be hesitant to utilize the proper tools and services that will help you do your job and do it well. We're much less fatigued by new things when we have help completing difficult tasks. If authentication is one of your primary needs, you can learn more in the [Auth0 docs](https://auth0.com/docs) or [sign up for a free account here](https://auth0.com/signup).

> [Auth0 offers a generous **free tier**](https://auth0.com/pricing) to get started with modern authentication.

## Conclusion

We'll finish with an analogy. If JS is the world around you, there are a few ways to view and take it in.

If you look at the JS world through a **telescope**, you can see _one thing very clearly_. However, you're essentially blind to everything _else_ around you. It's important to be comfortable with your focus, but not to the point that you shut out awareness of any other possibilities.

If you view the world as a panorama through a **wide-angle lens**, you get a vast, comprehensive picture but it's hard to know where to look. Everything in the scene competes for your attention and you can get easily distracted when trying to focus if something else catches your eye. This can be exhausting.

Now consider a normal **pair of glasses**. You can see everything more clearly, but still focus your attention on one (or a few) things without losing sight of what's in your periphery.

When viewing the modern JavaScript landscape, glasses are a good approach. Don't feel like you have to take in all your surroundings at once, but don't blind yourself to the larger world either. Focus your time and effort on what's in front of you while surveying occasionally for potential improvements. Hopefully you'll find yourself feeling more refreshed and enthusiastic about the great things JavaScript has in store for the future.

> Auth0 provides the simplest and easiest to use [user interface tools to help administrators manage user identities](https://auth0.com/user-management) including password resets, creating and provisioning, blocking and deleting users.


"tooling"