DEV Community: Rich Field

Debugging Angular App on Android from Mac

Rich Field — Mon, 13 Sep 2021 00:41:32 +0000

Today I needed to inspect an Angular web app I'm building to determine why it was not displaying correctly.

(It displayed just fine in the Chrome Dev Tools Emulator, but not on a real device).

I've done this a lot in the past and thought I knew how to set this up, but there was one thing particular to Angular that I was missing.

1. Determine your Mac's IP address

Open a Terminal window and type ifconfig
Look for the inet entry under en0 and make a note of it

2. Update your hosts file

Open a Terminal window and type the following to open the hosts file on your Mac

sudo nano /etc/hosts

Add the following entry, where Mac IP is what you copied above

127.0.0.1 <Mac IP> E.g. 127.0.0.1 192.168.1.4

3. Start Angular with host parameter

This is the bit I was missing, you need to serve the Angular app with an additional flag.

ng serve --host 0.0.0.0

By default Angular will be served on localhost but here we need to use 0.0.0.0

4. Open the app in Chrome on Android

In your mobile browser, use the IP address of your Mac and the appropriate port number

E.g. http:192.168.1.4:4000

5. Inspect your device from Mac Chrome

Start Chrome on your Mac and in the address bar type
chrome://inspect/#devices

Find your device in the list and click "inspect"

How to Inspect a Disappearing Element E.g. Dropdown Menus

Rich Field — Tue, 29 Jun 2021 23:49:42 +0000

How to inspect and modify the CSS of elements that are only displayed when they are or their parent are in focus.

Or in other words how to inspect an element which disappears when the mouse moves away?

E.g. dropdown menus. These are often only displayed when you give focus to their parent or some other item that triggers them to open.

How can we stop a dropdown menu closing so we can debug it?

The Problem

Today I wanted to inspect the CSS of a dropdown menu to see why it was not behaving as possible and then modify the CSS directly in devtools.

E.g. The dropdown below is opened when the user clicks in the TextBox. I wanted to inspect the options in the dropdown; to do so in Chrome I need to right click on an option and select Inspect

But this causes the TextBox to lose focus and the dropdown disappears.

The Solution

Is really simple...

Inspect the TextBox control and find the element which triggers the dropdown. In my case it is an input.

Inspect the input and select the Event Listeners tab.

Locate the blur event and click the Remove button.

You will now be able to inspect the dropdown because the blur event will not fire when you leave the textbox. 🕵️

Initialise BehavorSubject correctly

Rich Field — Sat, 28 Mar 2020 05:43:56 +0000

For some reason a BehaviorSubject I was calling next on was not firing events. It only fired with the initial value.

This was my declaration.

private clients: BehaviorSubject<ClientSummary[]> = new BehaviorSubject(undefined);
public clients$: Observable<ClientSummary[]> = this.clients.asObservable();

And how it was being consumed.

this.clientService.clients$.subscribe(clients => {
  // do something with clients  
  console.log(clients);
});

When the page loaded, the observable fired with the following log.

undefined

However, when next was called on the BehaviorSubject, the observable did not fire again.

this.clients.next([/* some clients*/]);

Can you see the problem?

It's very subtle and took me a while to track down.

Solution

Update the initial value!

private clients: BehaviorSubject<ClientSummary[]> = new BehaviorSubject([]);

I don't know why the initial value is significant; but with this change the observable now updates each time next is called on the BehaviorSubject.

As for why I had undefined in there in the first place?
Probably copy and paste! 🙄

🦠 COVID-19: How can we use our unique skillset to help our communities?

Rich Field — Mon, 23 Mar 2020 22:44:49 +0000

As developers we can easily work from home; in fact many of us already do this everyday. The current lockdowns being enforced around the world mean we'll now spend even more time at home - and no doubt on our computers! 😁

We also have a unique skillset that means we have the ability to help our communities even though we are isolated.

This could be as simple as offering IT support to those in our local communities / families who are not very tech-savvy.

Today for example, I am helping a neighbour set up Zoom so she can remain connected. I plan to create a simple website that contains simple setup info for this and other apps for similar people to use.

But I think we can use our skills to do more.

This site was recently created to help nurses and the most vulnerable during the COVID-19 crisis stay at home and not risk their lives:
https://www.herobuddy.org/

This site by @trekhleb shows the dynamics (the curvature of the graph) of Сoronavirus distribution per country.

Do you know of any other sites like this?

What else could we build as a community that could help others?
Perhaps something that makes it easier to organise collection of food / medical supplies?

Do we even need something - are WhatsApp etc enough?

List of Sites

List of Apps

List of Libraries/Tools

Collaborators / Volunteers Wanted

Deploying Firebase Rules is super easy

Rich Field — Fri, 06 Mar 2020 05:57:08 +0000

The deployment of my firebase project has been automated since day one.

With one notable exception - the database rules.

A recent feature required considerable changes to the rules and I wanted to have them under source control.

Partly to have a record of all changes and partly as it's easy for clumsy fingers to update / delete rules via the console.

Turns out it's super easy - as most things Firebase are! 😄

Simply define your rules in a .json file, then add a rules property to the firebase.json file that points to it.

{
  "database": {
    "rules": "firebase.database.rules.json"
  },
  "hosting" : {
     ...
  }
}

Then wherever you run simply call the Firebase CLI like this:

firebase deploy --only database

Or if like me you want to deploy and app and database:

firebase deploy --only hosting,database

Note the lack of space after the comma, that caught me out first try!

How to modify config of Create React App - without Ejecting!

Rich Field — Fri, 21 Feb 2020 05:08:30 +0000

I'm using Create React App (CRA) for a couple of client projects.
To keep things easier to maintain once the project is handed over I've not ejected.

However today I ran into the common "Hooks + multiple instances of React" issue as I was attempting to consume a component library I had created.

Both this library and the main app were including their own copy of React.

To solve this and prevent the error I needed to do two things:

Update the library to list React as a peer dependency and then update the bundler (rollup) to not include React in the bundle.
Add an alias for React to the Webpack config of the main app

The first step was easy, but as you might know, it's not possible to modify the Webpack config of CRA without ejecting it.

Or so I thought...

Turns out you can by using CRACO - which stands for Create React App Configuration Override.

After installing and a quick modification of the package.json scripts, I can now use a craco.config.js file to override the default CRA Webpack config.

const path = require('path')

module.exports = {
  webpack: {
    alias: {
      react: path.resolve(__dirname, './node_modules/react'),
    },
  },
}

For more info on the issue itself and solutions see:
https://github.com/facebook/react/issues/13991

How to delete multiple branches in Git

Rich Field — Wed, 05 Feb 2020 23:06:46 +0000

I've been a wee bit lazy keeping my local branches up to date.
Thankfully, I learnt today that it's super easy to delete multiple branches at a time.

First run this command to test what branches will be deleted.

> git branch | grep "<pattern>"

Then run this to actually do the delete

> git branch | grep "<pattern>" | xargs git branch -D

E.g.
> git branch | grep "ch100-*"
> git branch | grep "ch100-*" | xargs git branch -D