Live Share

Peacock detects when the Live Share extension is installed and automatically adds two commands that allow the user to change color of their Live Share sessions as a Host or a Guest, depending on their role.

Live Share is a VS Code extension that adds collaboration capabilities to the editor. Using Live Share one can share their local files, terminals, local servers and debugging sessions with someone remote.

The commands allow users to pick a color from the favorites that can be used during Live Share session.

When a Live Share session is started, the selected workspace color will be applied. When the session is finished, the workspace color is reverted back to the previous one (if set).

• Learn more about Live Share here
• Get the Live Share extension here
• Get the Live Share extension pack, which now includes Peacock

Remote Development

Peacock also now has support for the Remote Development feature of VS Code.

VS Code distinguishes two classes of extensions: UI Extensions and Workspace Extensions. Peacock is classified as a UI extension as it makes contributions to the VS Code user interface and is always run on the user's local machine. UI Extensions cannot directly access files in the workspace, or run scripts/tools installed in that workspace or on the machine. Example UI Extensions include: themes, snippets, language grammars, and keymaps.

In version 2.1.2 Peacock enabled integration with the Remote Development by adding "extensionKind": "ui" in the extension's package.json.

• Learn more about VS Code Remote Development
• Get the VS Code Remote Development Extensions

Thanks!

Special thanks to both @legomushroom and @lostintangent for implementing the Live Share integration. Also to Matt Bierner for implementing the Remote Development integration.

One way you can improve user experience with your Angular apps is to strategically decide which bundles to preload. You control when your bundles load and which bundles load. This is why you should explore choosing a built-in or creating your own custom Angular preload strategy.

In this series we'll explore a few of your options for preloading Angular bundles.

Here are the articles in this series

• Preload all Angular Bundles
• You Pick Which Angular Bundles to Preload
• Preload Angular Bundles When Good Network Connectivity is Detected
• Predictive Preloading Strategy for Your Angular Bundles

Scouting Ahead

The "on demand" strategy preloads one or more routes when a user performs a specific action. You decide which action will cause a route to preload. For example, you could set this up to preload a route while a user hovers over a button or menu item.

You can create the custom OnDemandPreloadService by creating a class that implements the PreloadingStrategy interface, and providing it in the root. Then you must implement the preload function and return the load() function when you want to tell Angular to preload the function.

Notice the preload function in the class OnDemandPreloadService examines the Observable preloadOnDemand$. It pipes the observable and uses the mergeMap RxJs operator to switch to a new Observable. This new Observable's value depends on the local preloadCheck function.

The preloadCheck function checks if the preloadOptions (which comes from the original Observable) has a routePath that matches a route that has the data.preload property set to true. So here we are opting some of the routes into preloading and leaving some routes to be loaded when they are requested explicitly.

@Injectable({ providedIn: 'root', deps: [OnDemandPreloadService] })
export class OnDemandPreloadStrategy implements PreloadingStrategy {
  private preloadOnDemand$: Observable<OnDemandPreloadOptions>;

  constructor(private preloadOnDemandService: OnDemandPreloadService) {
    this.preloadOnDemand$ = this.preloadOnDemandService.state;
  }

  preload(route: Route, load: () => Observable<any>): Observable<any> {
    return this.preloadOnDemand$.pipe(
      mergeMap(preloadOptions => {
        const shouldPreload = this.preloadCheck(route, preloadOptions);
        return shouldPreload ? load() : EMPTY;
      })
    );
  }

  private preloadCheck(route: Route, preloadOptions: OnDemandPreloadOptions) {
    return (
      route.data &&
      route.data['preload'] &&
      [route.path, '*'].includes(preloadOptions.routePath) &&
      preloadOptions.preload
    );
  }
}

Route Definitions

This strategy requires that you indicate which routes can be preloaded. You can do this by adding the data.preload property and set it to true in your route definition, as shown below.

export const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'heroes' },
  {
    path: 'dashboard',
    loadChildren: () =>
      import('app/dashboard/dashboard.module').then(m => m.DashboardModule),
    data: { preload: true }
  },
  {
    path: 'heroes',
    loadChildren: () =>
      import('app/heroes/heroes.module').then(m => m.HeroesModule),
    data: { preload: true }
  },
  {
    path: 'villains',
    loadChildren: () =>
      import('app/villains/villains.module').then(m => m.VillainsModule)
  },
  { path: '**', pathMatch: 'full', component: PageNotFoundComponent }
];

Notice that the dashboard and heroes routes both have the preload.data property set to true. However, the villains route does not have this property set. In this scenario the heroes and dashboard have preloading enabled, but the villains would only load when the user navigates to this route.

Setting the Custom OnDemandPreloadService

Then when setting up your RouterModule, pass the router options including the preloadingStrategy to the forRoot() function.

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: OnDemandPreloadService
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Deciding When to Preload

The missing piece here is the mechanism that you use to tell the app which route to preload and when to preload it. Notice the service OnDemandPreloadService in the code below. You can call this service's startPreload function and pass the route you wish to preload. The OnDemandPreloadService service then next's the subject (think of this like publishing or emitting a message). Then whoever or whatever listens to that message can act on it.

This is where the OnDemandPreloadStrategy strategy comes in, as it is listening.

export class OnDemandPreloadOptions {
  constructor(public routePath: string, public preload = true) {}
}

@Injectable({ providedIn: 'root' })
export class OnDemandPreloadService {
  private subject = new Subject<OnDemandPreloadOptions>();
  state = this.subject.asObservable();

  startPreload(routePath: string) {
    const message = new OnDemandPreloadOptions(routePath, true);
    this.subject.next(message);
  }
}

Bind to a Mouseover Event

Now your app is ready to preload a route when you decide to do it. You can try this by binding a DOM event such as mouseover and firing the OnDemandPreloadService's startPreload function.

<a
  [routerLink]="item.link"
  class="nav-link"
  (mouseover)="preloadBundle('heroes')"
  >heroes</a
>

Notice the following code accepts the route path and passes it along to the preloadOnDemandService.startPreload function.

preloadBundle(routePath) {
  this.preloadOnDemandService.startPreload(routePath);
}

All Together

Let's step back and follow how this all works.

1. A user hovers over your anchor tag
2. The mouseover binding calls a function in your component, passing the route path ('heroes' in this case)
3. That code calls the PreloadOnDemandService service's startPreload, passing the route path to it
4. The PreloadOnDemandService service next's the RxJS Subject, which is exposed as an Observable
5. The OnDemandPreloadStrategy gets a handle on that Observable, and it knows when it "nexts"
6. The OnDemandPreloadStrategy pipes it into mergeMap and evaluates the route for preloading
7. If it decides to preload, the OnDemandPreloadStrategy returns a new Observable with the load() function
8. If it decides not to preload, the OnDemandPreloadStrategy returns an Observable with the EMPTY observable (which does not preload)
9. The Angular router listens to the response of the strategy's preload function and either preloads or not, accordingly.

Try It

After applying this strategy, rebuild and run your app with ng serve. Open your browser, open your developer tools, and go to http://localhost:4200. When you inspect the Network tab in your browser you will likely see none of your bundles already preloaded (except whichever route your navigated to by default, if that was lazy loaded).

Then hover over the HTML element where it fires with the mouseover event you bound. Check your network tab in your browser and you will see the bundle will be preloaded.

Deciding What Is Right For Your App

Now that you know how to create your own preload strategy such as OnDemandPreloadService, how do you evaluate if this is the right strategy for your app?

This is a more involved strategy for certain. Could it be beneficial to your users? Do your users often hover over search results before selecting them? Would that normally fire off a lazy loaded bundle? If so, perhaps this could give that preload a jumpstart.

If you can determine that your users' behavior and workflow often follows a specific path before loading a new bundle, then this strategy could be beneficial.

You can apply this to a number of scenarios such as hovering over an HTML element, clicking a button, or scrolling to a specific area of the screen.

In the end the decision is up to you. I recommend before choosing this options, or any preload strategy, that you test at various network speeds under various valid and common user workflows. This data will help you decide if this is the right strategy for you, or if another may be more beneficial for users of your app.

Resources

• Get VS Code
• Get the VS Code Angular Essentials
• Get the VS Code Angular Snippets

One way you can improve user experience with your Angular apps is to strategically decide which bundles to preload. You control when your bundles load and which bundles load. This is why you should explore choosing a built-in or creating your own custom Angular preload strategy.

In this series we'll explore a few of your options for preloading Angular bundles.

Here are the articles in this series

• Preload all Angular Bundles
• You Pick Which Angular Bundles to Preload
• Preload Angular Bundles When Good Network Connectivity is Detected
• Predictive Preloading Strategy for Your Angular Bundles

Check out Suguru Inatomi's post here for a similar network-aware preloading strategy

Checking for a Good Connection

The "network aware" strategy uses the browser's Network Information API to detect the connection and speed. If the speed qualifies as good, then it preloads the bundles. If not, it leaves them alone.

You can check browser compatibility for the Network Information API here.

You can create the custom NetworkAwarePreloadStrategy by creating a class that implements the PreloadingStrategy interface, and providing it in the root. Then you must implement the preload function and return the load() function when you want to tell Angular to preload the function.

Notice the preload function in the class NetworkAwarePreloadStrategy checks the navigator.connection object's saveData property first. Some mobile devices have a setting for "data saver". When this is enabled, this property will be true. Therefore, if the user has decided to save their data, they did so by choice and we should not be preloading bundles (which consumes data).

Next the code checks if the connection's effectiveType is one of the connection speeds that you feel are too slow to then preload the bundles. The code below decides that 2g and slow-2g don;t qualify for preloading, but 3g and better do. Therefore, as long as the saveData is true and the connection speed is 3g or better, the bundle will be preloaded.

export declare var navigator;

@Injectable({ providedIn: 'root' })
export class NetworkAwarePreloadStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    return this.hasGoodConnection() ? load() : EMPTY;
  }

  hasGoodConnection(): boolean {
    const conn = navigator.connection;
    if (conn) {
      if (conn.saveData) {
        return false; // save data mode is enabled, so dont preload
      }
      const avoidTheseConnections = ['slow-2g', '2g' /* , '3g', '4g' */];
      const effectiveType = conn.effectiveType || '';
      console.log(effectiveType);
      if (avoidTheseConnections.includes(effectiveType)) {
        return false;
      }
    }
    return true;
  }
}

Setting the Custom NetworkAwarePreloadStrategy

Then when setting up your RouterModule, pass the router options including the preloadingStrategy to the forRoot() function.

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: NetworkAwarePreloadStrategy
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Try It

After applying this strategy, rebuild and run your app with ng serve. Open your browser, open your developer tools, and go to http://localhost:4200. When you inspect the Network tab in your browser you will likely see all of your bundles already preloaded.

Then toggle your throttling to 2g speeds in your browser, then refresh the page. Then the routes will no longer be preloaded.

Deciding What Is Right For Your App

Now that you know how to create your own preload strategy such as NetworkAwarePreloadStrategy, how do you evaluate if this is the right strategy for your app?

If mobile and low bandwidth / low WiFi scenarios are likely for your users, this could be a beneficial preload strategy. You could talk to your business users (the stakeholders in your app) to discover this, if you are not sure.

You could also combine this strategy with one of the other custom strategies.

In the end the decision is up to you. I recommend before choosing this options, or any preload strategy, that you test at various network speeds under various valid and common user workflows. This data will help you decide if this is the right strategy for you, or if another may be more beneficial for users of your app.

Resources

• Get VS Code
• Get the VS Code Angular Essentials
• Get the VS Code Angular Snippets

One way you can improve user experience with your Angular apps is to strategically decide which bundles to preload. You control when your bundles load and which bundles load. This is why you should explore choosing a built-in or creating your own custom Angular preload strategy.

In this series we'll explore a few of your options for preloading Angular bundles.

Here are the other articles in this series

• Preload all Angular Bundles
• You Pick Which Angular Bundles to Preload
• Preload Angular Bundles When Good Network Connectivity is Detected
• Predictive Preloading Strategy for Your Angular Bundles

Opting in

The "opt in" strategy is like a buffet. You pick what you want to preload, and leave the rest to load as needed.

Creating custom preload strategies is a great way to control the manner in which the bundles preload. The custom OptInPreloadStrategy preload strategy let's you indicate which lazy loaded bundles should be preloaded.

You can do this by creating a new class that implements that PreloadingStrategy interface, and providing it in the root. Then you must implement the preload function and return the load() function when you want to tell Angular to preload the function.

Notice the preload function in the class OptInPreloadStrategy checks the route definition for a data property that contains a preload property. If that data.preload property exists and is a truthy value, then the load() function will be returned. When the load() function is returned, the router listens to this Observable and will make the network call to load the route's bundle.

import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, EMPTY } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class OptInPreloadStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    return route.data && route.data['preload'] ? load() : EMPTY;
  }
}

Route Definitions

This strategy requires that you indicate which routes should be preloaded. You can do this by adding the data.preload property and set it to true in your route definition, as shown below.

export const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'heroes' },
  {
    path: 'dashboard',
    loadChildren: () =>
      import('app/dashboard/dashboard.module').then(m => m.DashboardModule),
    data: { preload: true }
  },
  {
    path: 'heroes',
    loadChildren: () =>
      import('app/heroes/heroes.module').then(m => m.HeroesModule),
    data: { preload: true }
  },
  {
    path: 'villains',
    loadChildren: () =>
      import('app/villains/villains.module').then(m => m.VillainsModule)
  },
  { path: '**', pathMatch: 'full', component: PageNotFoundComponent }
];

Notice that the dashboard and heroes routes both have the preload.data property set to true. However, the villains route does not have this property set. In this scenario the heroes and dashboard would preload, but the villains would only load when the user navigates to this route.

Setting the Custom OptInPreloadStrategy

Then when setting up your RouterModule, pass the router options including the preloadingStrategy to the forRoot() function.

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: OptInPreloadStrategy })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Try It

After applying this strategy and setting some of the route definition's routes data.preload = true, rebuild and run your app with ng serve. Open your browser, open your developer tools, and go to http://localhost:4200. When you inspect the Network tab in your browser you will see all of your bundles already preloaded.

Notice that the dashboard and heroes are already preloaded, but villains are not. If you wish to really see this make a difference, enable throttling in your developer tools to a slower connection such as 3G, then refresh the page. The preloading will be much more visible now in the Network tab.

Deciding What Is Right For Your App

Now that you know how to create your own preload strategy such as OptInPreloadStrategy, how do you evaluate if this is the right strategy for your app?

It might make sense to consider which bundles would help improve your users' experience by being preloaded first. You could talk to your business users (the stakeholders in your app) and discover what they feel are the most frequented areas of your app. You could use analytics from existing apps or perform user studies to determine this, as well.

In the end the decision is up to you. I recommend before choosing this options, or any preload strategy, that you test at various network speeds under various valid and common user workflows. This data will help you decide if this is the right strategy for you, or if another may be more beneficial for users of your app.

Resources

• Get VS Code
• Get the VS Code Angular Essentials
• Get the VS Code Angular Snippets

One way you can improve user experience with your Angular apps is to strategically decide which bundles to preload. You control when your bundles load and which bundles load. This is why you should explore choosing a built-in or creating your own custom Angular preload strategy.

In this series we'll explore a few of your options for preloading Angular bundles.

Here are the other articles in this series

• Preload all Angular Bundles
• You Pick Which Angular Bundles to Preload
• Preload Angular Bundles When Good Network Connectivity is Detected
• Predictive Preloading Strategy for Your Angular Bundles

Preload All

Out of the box Angular's default preload strategy is to not preload. So if you want to preload you must change that behavior.

You can tell Angular to preload all of the lazy loaded modules in advance by using the built-in preload strategy PreloadAllModules. Simply import this from @angular/router as shown below.

import { RouterModule, Routes, PreloadAllModules } from '@angular/router';

Then when setting up your RouterModule, pass the router options including the preloadingStrategy to the forRoot() function.

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Try It

Now rebuild and run your app with ng serve. Open your browser, open your developer tools, and go to http://localhost:4200. When you inspect the Network tab in your browser you will see all of your bundles already preloaded.

Now when you navigate to your lazy loaded bundles you will see that they are already loaded, so the experience is fast. If you wish to really see this make a difference, enable throttling in your developer tools to a slower connection such as 3G, then refresh the page. The preloading will be much more visible now in the Network tab.

Deciding What Is Right For Your App

Now that you know how to use the built-in PreloadAllModules strategy, how do you evaluate if this is the right strategy for your app? Well, this depends on your situation.

If your app has several bundles from lazy loading and all are large, these will all start transferring to your browse as your app loads. You don't control which ones load first, so if a user clicks on a route chances are that it won't be the first one preloaded.

What if your users rarely ever go to some of these routes? Does it make sense to preload them all up front?

If you feel the users could benefit from the routes all loading up front, this may be a good choice.

In the end the decision is up to you. I recommend before choosing this options, or any preload strategy, that you test at various network speeds under various valid and common user workflows. This data will help you decide if this is the right strategy for you, or if another may be more beneficial for users of your app.

Resources

• Get VS Code
• Get the VS Code Angular Essentials
• Get the VS Code Angular Snippets

Reasons aside, for now, there are a few commands I seem to run almost daily to try to recover from errors. Kelly Vaughn got me thinking this morning about this from her post on Twitter

if at first you don't succeed, try `rm -rf node_modules && npm install`

— Kelly Vaughn 🐞 (@kvlly) April 22, 2019

There are a few contributing factors to me running into issues with npm packages.

1. I manage a lot of code, including some just infrequent enough where the packages get stale.
2. I work in coffee shops and poor WiFi areas quite often
3. Murphy's Law surrounds me

So what do I do when I see one of the issues with my npm packages? Especially the ones that claim there may be something wrong with one of the packages and not npm itself? I clear the node_modules folder and try again.

rm -rf node_modules package-lock.json
npm install

And to do it with flair, I created a bash alias to run these commands.

npm-wipe
npm i

Why run it in two commands? Mostly because I like to see that the first one completed then go run npm install manually. I have no good reason. You may prefer to run it all at once.

Bash Alias

Here is how I set up my bash alias on my macOS.

alias npm-wipe="rm -rf node_modules package-lock.json"

Hope this helps you out of a bind once in a while, too!

Are you a storyteller on stage? Do you want to engage and inspire your audience comfortably and naturally? The great news is that you have one of the essential tools to accomplish this already! Let's explore how you can adjust your voice to tell your stories in a more impactful way.

Pitch

Have you ever watched a presentation where the speaker seemed to grab your attention with the tone the used to pronounce specific phrases? Let me jog your memory in case you can't recall. Do you remember any of these lines from famous movies?

"You shall not pass!" - Fellowship of the Ring, 2000

“I'll get you, my pretty, and your little dog, too!” The Wizard of Oz, 1939

“You can't handle the truth!” A Few Good Men, 1992

“Here's Johnny!” The Shining, 1980

“My precious.” The Lord of the Rings: Two Towers, 2002

These are all from some great movies! Each of these stands out for various reasons. But one of the keys we should focus on is the pitch of the actor/actress's voice. I bet as you read them you could hear the actor/actress's voice in your head. Now trying saying these yourself without using any of their vocal changes.

Did you notice that each of these quotes were said with varying degrees of a high and low vocal pitch? Some were softer, some louder. Some were faster, some slower. Some were deeper and some higher pitched. The changes in pitch (we'll focus there for now) can help grab attention mainly when used sparingly at critical moments in the delivery of your story.

What is Pitch?

Pitch is the highness or lowness of your voice. It can be a handy tool for you when presenting.

Pitch, Not Volume

We'll talk more about volume in a future post. These two topics can overlap a little, but the best way to think about these is that the pitch is the deep or high voice you use. And you can still adjust the volume independently of the pitch.

Try this Exercise

Let's start with an exercise you can try right now. Let's take the phrase "Winter is Coming" (yes, I am a Game of Thrones fan). Try saying this phrase first with a high pitch, then a typical pitch of your voice, then with a deeper pitch. Notice how they sound different.

The odds are that some of these may sound natural and compelling while others may sound awkward. That's understandable. Pitch isn't a tool that should be wielded lightly. When it works, it works great. But it should be used with purpose and sparingly to capture attention.

Now say this phrase in a high pitched voice. It just doesn't work for the story. Does it grab attention? Very likely it would. But it may catch the wrong kind of attention by causing confusion for the audience as they think "why is the actor saying it like that?"

Proper use of pitch adds to the story. Using a low and deep pitch throughout, and slowly (note the speed can play into this too), gives some sense of aw to the phrase.

Another Pitch Exercise

What is your baseline for your pitch? Let's find out. We'll pick a simple word like "yes" and repeat it till you find your comfortable, typical, baseline pitch.

Now say "yes" at your baseline pitch and then raise it a step higher. Continue going step by step higher to get a feel for your comfort range. Then take a few steps down in your pitch to find your deeper pitch for "yes".

The key here is to use varying pitches that are comfortable and natural for you. If you don't like the way they sound, odds are others will not either. So find the pitches that work for you and are not forced.

Where is this useful?

Changing your pitch can make the difference in your story being followed and remembered, vs. quickly forgotten.

Let's start with some boundaries and guidelines for pitch. Pitch isn't something I recommend changing too often in your presentation. Otherwise, you risk sounding a bit off, and you lose the value of the infrequent pitch change to grab attention.

Changing pitch can help grab attention most especially when used within a part of your story where the pitch is one way, and then you adjust the pitch suddenly. Here are some examples of changing pitch:

Questions

During your story you pause, move forward and bend a little and speak into the mic "Has this ever happened to you?"

If you were talking in a high pitch before this, try using a deeper tone of your voice for the question. Or, use a higher pitch for the question if you were speaking more deeply prior to it. This gives a chance to your audience to re-focus on you and your voice.

Note that using a higher pitch at the end of sentences is similar to the tone used when asking a question.

Exclamations

Your story may have "aha" moments. In these, a high pitch can emphasize the moment. For example, imagine you are telling a story that suddenly changes the narrative to show the audience that a great secret is revealed. You could stop and exclaim in a higher pitch "Woah? What just happened here?". Or you could use a deeper pitch for the same phrase. Depending on the context of your story and what pitch pattern you had been speaking in, going deeper or higher can help grab the audience.

Avoid the Sleepers

When we speak in the same pitch and tone and pace and volume, it is natural for humans to tune out from your presentation. You don't want heads to nod off - and yes, I had this happen to me when I presented. Some people can't stay awake. Changing any one of these can help and changing more than one can help even more!

We hear the term "monotone" often when referring to the same pitch of a voice for a period of time. By changing the pitch at a critical moment in your talk, you can avoid this and be sure to grab (or re-grab) attention

Parting Tips on Pitch

Here are quick tips for using the pitch of your voice.

• Discover your typical and most often used pitch. Then find small variances you can comfortably use.
• Try using a high pitch for asking questions to your audience.
• Use a deeper pitch when you want to convey more authority at a point in your story.

Finally, observe the audience when you vary your pitch. Make mental notes of their reactions and make adjustments for the next time you present.

What's in This Series?

Here are the other topics in this series, in no particular order. I'll update these links as I publish them.

1 - Using Your Voice
2 - Pace of your voice
3 - Pitch of your voice
4 - Volume of your voice
5 - Emphasis of words in your speech
6 - Clarity of your speech

Good luck with your next presentation!

Recently I posted How I Write Online Articles. Since then I have been working on a few ideas for making this easier. Today I'm announcing a preview version of a new VS Code extension called Read Time

You can get Read Time here from the VS Code Marketplace

Read Time is a Visual Studio Code extension that is ideal for writers who want an estimate how for long it may take to read your markdown.

When writing markdown you will see a book icon and a number in your VS Code status bar. The number will update as you add or remove text in your markdown file. When you are not in a markdown file, it will disappear. It's that simple.

Future Ideas

This extension is new, and I have some ideas on how to make it even more useful. If you have ideas, by all means, please share your feedback here or in GitHub.

One new feature I would like to add is the ability to adjust the assumed words-per-minute that a person reads. By default in many calculations, this is 200 words/minute. The API is open for this, and I have made a PR into the library to adjust for it. It is only a matter of time before I add this feature.

Another is to allow adjusting the types of files that it will read. Currently, it only reads markdown files. But this could be opened for extending to other files, too. Making this a user configured feature could be nice.

Why Isn't the Icon is Appearing in the Status Bar?

There is only so much room in the status bar and the Read Time status bar icon may become a casualty and have disappeared from your status bar. You can test this by zooming out of your vs code a few times. Zooming out will also zoom out the status bar. If the status bar icon were a casualty, then it would reappear when you zoom out.

The Read Time icon is very slim (just an icon and a number). However, if it is not appearing, you can try to change your settings for other items in the status bar to make them disappear. In other words, clean up your status bar by hiding things you do not want to see. Here is one example where I hid a few things that were in my status bar.

  "workbench.statusBar.feedback.visible": false,
  "debug.showInStatusBar": "never",
  "azure.showSignedInEmail": false,
  "liveshare.showInStatusBar": "whileCollaborating",
  "spellright.statusBarIndicator": false

VS Code Extensions for Writing

In case you are curious, here are the VS Code extensions I use:

• Markdown Lint
• Spell Right
• Peacock - I color code my vs code editor for writing articles
• Read Time

What Do You Think?

I'd love to hear your feedback. What do you like about it? What else would be useful to you in writing?

This is what I would have loved when I was learning how to create a CI pipeline with Azure DevOps. I wanted to create the pipeline using a YAML file, and while the quick-start is helpful, my scenario was more nuanced. I bet your situations have special cases too.

As I was working on putting my app into an Azure DevOps pipeline I wrote down all of the links that I found to be super helpful. Thus, I decided to make a list of them and share them with you, in case they may be of help to you, as well.

In case you are curious, this is the Pipeline that I built when I was creating Peacock.

Free for OSS?

What does it cost for OSS? This is a great question, and the best answer comes directly from the source here.

With the introduction of Azure DevOps today, we’re offering developers a new CI/CD service called Azure Pipelines that enables you to continuously build, test, and deploy to any platform or cloud.

Here are some more details on the pricing and what you can get for free and what qualifies.

Gimme the Links

I tried, below, to explain why each might be helpful, so you can decide which might suit your use cases.

I hope this helps!

- 1 - Starting page for all things DevOps

Start here. Seriously, it's a great starting place that can help ground you in the Azure DevOps tool and what you can do.

• Start here to learn Azure Pipelines

- 2 - Multiple Jobs

If you want to run your builds in different ways, this is a great resource. For example, imagine you want to run your build on Windows and Linux and macOS. If so, this is the place to start.

• Learn how to create multiple jobs

- 3 - Trigger a Build

If you want to trigger builds from your GitHub repo to Azure DevOps, this is a great resource. It shows how to set up the YAML for Triggers for branches and Pull Requests.

• Learn how to set up the YAML for Triggers for branches and Pull Requests

- 4 - YAML Example

If you want an example of what a YAML file in DevOps looks like, look no further.

• Check out this example of a pipeline YAML file

- 5 - Build Multiple Branches

If you want to build more than one branch or exclude some branches from builds, then this is a great resource.

• Learn to build multiple branches

- 6 - Build Using Multiple Node Versions

If you like to test against more than one version of Node.js, this is a great resource.

• Learn how to create a build strategy for multiple Node versions

- 7 - Hosted Agents and YAML

If you want to learn more about how to create the hosted agent (the thing that does all the work for you), this is a great resource.

• Learn the Host agent syntax for the YAML

- 8 - Example Pipeline of a VS Code Extension

I was building a VS Code extension, so this example was helpful for me. If you are building a Node.js app, it may help you too.

• See an example of a pipeline for VS Code Extensions

- 9 - Multiple Build Jobs

If you want to run your build in different ways, this is a great resource. A great example is running multiple jobs for multiple OS's.

• Learn how to run multiple jobs

- 10 - Extension for VS Code

If you want some extra help for Azure DevOps Pipelines and YAML in VS Code, try this resource.

• Learn about the Azure Pipelines extension for VS Code

• Get the Azure DevOps Pipelines extension

- 11 - All Things YAML

If you get stuck in the YAML (I know I did), then this is an excellent resource for figuring out what goes where.

• Lean on the YAML scheme reference

I hope these help you as much as they helped me!

this article is cross posted to from johnpapa.net

My Writing Process

All of this assumes I have an idea and I know what I am writing. That in itself is a whole different topic and not covered here. If you want to know how I write, this is the right place to be.

My Goals

I have some primary goals with writing:

1. Stable Tools: What I write in must be stable (I don't want to have to rewrite it!)
2. Saving: I want to save my articles, so I can iterate, refer back, and always have it.
3. Proofing: I want to spell check and grammar check my articles.
4. Markdown: I prefer writing in markdown
5. Offline: It must work offline

My Workflow

My workflow is short and hits my main goals. So let's get right to the workflow.

- 1 - VS Code

I use VS Code to write my articles. It has excellent markdown support and is super stable which satisfies two of my goals. Plus, I work in this for my coding all day, so I don't have to switch to another tool.

Here are the VS Code extensions I use:

• Markdown Lint
• Markdown Preview
• Spell Right
• Peacock - I color code my vs code editor for writing articles

- 2 - Proofing

I currently use Spell Right (see the link above) for spell checking in my markdown. I then copy and paste the content to a local doc in Grammarly for grammar checking. You can use any grammar checking tools including Microsoft Word.

I find this to be a good step because spell check only catches part of the story. Grammar checking helps to avoid confusing sentences.

- 3 - Push to a Private GitHub Repo

Saving my content and making sure I do not lose it (2 of my goals) are reinforced by creating a GitHub repository for my content. I prefer this to be private as it contains a lot of my writing. I also organize my repository in a way that makes sense to me. I can find my articles quickly, modify them, iterate on them, and move along.

VS Code integrates with GitHub well, and I use this every day for source control. I find comfort staying in my familiar tools to write articles, commit, push, and move along.

Here is an example of my meta in dev.to:

---
title: How I Write Online Articles
published: true
description: How you can write online articles
tags: devrel, vscode, markdown, discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/n0ecqvxjrzh9qy6ekfgy.png
canonical_url: https://johnpapa.net/how-i-write-online-articles/
---

- 4 - Copy and Paste to Target Site

The target for my articles could be Ghost (where I host my blog), Medium, dev.to, or any number of platforms. Unfortunately, because they are all different, some support various features, and few have an API, I currently copy and paste. Copy and paste only takes a few moments, so it's not a big deal.

Once I paste into the target platform, I generally find something that looks a little awkward. I make my adjustments in the target platform, test it out in preview (not publishing it), and repeat till it is good.

Then I copy the changes back to my local VS Code editor, commit, and push.

- 5 - Publish on my Blog and then dev.to

I publish my content to my blog first, since it is my blog and I like having a home for all of my content. Then I copy the canonical URL for my blog post and that to the dev.to target in the headers by setting canonical_url. Then I'll publish the same article on dev.to.

Cover Image or SketchNotes

I like to add something visual to my articles. I find visuals in articles to help connect the concepts in my mind. Also, it's fun! There are a lot of ways to get royalty free images. Pexels is one of these.

Often I want a very specific image and it is much easier to draw one. This is where I use my sketchnotes. The sketchnote at the top of this article is what I use to plan out my article.

I'll share more on how and why I use sketchnotes in a future article.

Ideas for the Future

I'd love to have an open API for all writing platforms, especially dev.to. Imagine writing locally in your favorite tools like VS Code, and then pressing a command which publishes the article on dev.to! I'm currently discussing some ideas for how I could write such an extension to publish to dev.to. An extension would require an API from a target platform and a bunch of cool features which I could code in the extension (gist previews using liquid embeds, for example). But ... hey ... it would be a lot of fun and very useful.

The great team at dev.to are considering an API. I imagine it one feature in a long list of great ideas they are prioritizing.

What Do You Do?

I shared my writing process. I'd love to hear about yours! Is yours different? What do you like about it? What do you wish you could change?

Are you a storyteller on stage? Do you want to engage and inspire your audience comfortably and naturally? The great news is that you have one of the essential tools to accomplish this already! Let's explore how you can adjust your voice to tell your stories in a more impactful way.

Pace

Have you ever been told you talk too fast or too slow during a presentation?

Let's dissect that for a moment. What pace is too fast vs. too slow? Why is either a problem? Is it because the person is trying to keep up and your quick pace is hard to process? Is slower better, or is it not enough to keep their interest? How do you solve this problem (is it even a problem)? You might have to be a wizard and figure out the exact pace that makes everyone happy. But you know, my father always tells me that if I try to make everyone happy I'll be very disappointed. The same thing here is true.

So let's step back a bit and talk about the right pace. My feeling is that there is no single right pace. Often I find that a presentation where the velocity varies is much more interesting than one where the same rhythm and cadence exists.

Patterns

Our brains are attuned for detecting patterns. When we find them, things start to blend in. Remember that catchy song you were recently listening to while working? I bet you remember the pattern and can work while it's playing. You can focus on other things because you have trained yourself to expect the pattern that is playing. We can tune out on patterns and put them in the back of our minds.

Change the Patterns

Now imagine you are attending or watching a presentation. You will detect patterns in the presentation, perhaps in the back of your mind. But they are there. Your mind is trained to recognize them and expect them. If the pace is constant throughout the presentation, that is indeed a pattern.

If the presenter varies his/her pace at critical moments, it recaptures your attention.

Patterns are another tool we can use. Both maintaining patterns and breaking patterns are good tools. I'll share more on this in a future article, outside of this series on "voice".

Ludicrous Speed

Sometimes we may speak quickly and pretty much non-stop without pausing. Sometimes people are just fast-talkers. This is OK - in fact talking fast can be very effective at times. The key part being "at times". When we talk fast we can generate excitement. Maybe you're so excited about this topic that this section of the presentation makes you giddy! I know there are times I want to jump up and down because I'm excited about what I am sharing. This is OK. No, it's better than OK. If you can help make your audience feel what you feel, you've connected with them.

You should use a fast pace at key moments in your presentation to generate a feeling in your audience. Do this when it feels right.

I recommend thinking about what your normal pace is, and then find a comfortable faster and slower pace that you can use when you want to shake things up. Use these changes of pace purposefully to grab the audience, connect with them, and help them share the feeling you have right then and there.

One caveat to remember is that a fast pace does not mean you have to lose clarity. Be sure your voice is still clear and understandable. Especially if you are speaking to audiences that may not be native speaking to the language you are talking.

Pausing at Key Moments

We're often told that slowing down too much can be bad in a presentation. That dead silence is a bad thing. Well, it can be, but it can also be an incredibly effective way to grab attention and make an essential point.

Have you ever listened to a presentation, a news report, or just a conversation with your friends where there was suddenly a pause in the action? What did you do? This pause can grab your attention cleverly and subtly.

When you place a pause at a strategic moment in a presentation, they can positively impact its effectiveness. Here are some use cases for using a pause to improve a presentation:

1. when you want the listener to have time to absorb an important point and think about it
2. when you ask a question you want them to consider and answer in their heads.
3. when you want to give the audience a chance to predict what you will say/do next
4. when you want to change the direction of a presentation
5. when you need to collect your thoughts or breathing

You know those "ums" and "so's" that pop up a lot? They are filler words, and sometimes we use those to fill in gaps between our thoughts. Ask yourself this: Do you follow a presentation when the speaker is talking fast and non-stop? Maybe. But what if those filler moments were actual pauses? This might give the audience time to think about what you are saying. You can also vary the length of your breaks, depending on the reaction you want from your audience.

A short pause is good for the audience to catch up and process what you say. A longer break gives them time to think through it, answer a question, and wonder where you are going next. Remember, you control the narrative.

This doesn't mean you should pause every other word. You likely won't be effective talking consistently like dramatic Captain Kirk on Star Trek for a 30-minute presentation. But if you find the key strategic moments in your presentation where you need to grab their attention. A pause might do the trick.

Parting Tips on Pace

Here are quick tips for using the pace of your voice.

• Vary your pace. People learn to live and look for patterns and rhythms.
• Use a fast pace at a key moment to generate excitement.
• Use pauses. If you like a number, choose two key moments in your next presentation.
• If you think you may speak too slowly, vary your rate to speak quickly at times.
• If you think you may talk too quickly, change your rate to speak slower at times.

Finally, observe the audience when you vary your pace. What reactions do they have? Experiment with this and as it will help you adjust your speed and improve your engagement with your audience.

A bonus tip is to use your body language during a pause to gather the audience. Ask a question or make a profound point, then smile and node your head with them.

What's in This Series?

Here are the other topics in this series, in no particular order. I'll update these links as I publish them.

0 -Using Your Voice
1 - Pace of your voice
2 - Pitch of your voice
3 - Volume of your voice
4 - Emphasis of words in your speech
5 - Clarity of your speech

Good luck with your next presentation!

cross posted to dev.to here