style and content fixes

_posts/2023-03-21-web-workers-in-angular.md

@@ -26,8 +26,6 @@ The [Web Workers API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Worke
 
 Web Workers are now supported in [all major browsers](https://caniuse.com/webworkers) except Opera Mini, which is mostly used on feature phones with limited processing power.
 
-> Hint: check [here](https://caniuse.com/webworkers) if your browser supports Web Workers.
-
 ## How to Add a Web Worker in an Angular Component
 
 Adding a web worker in Angular is surprisingly easy -- just run one [Angular CLI](https://angular.io/cli) command:
@@ -53,7 +51,9 @@ This will generate an `app.worker.ts` file beside `app.component.ts`
 
 In this next section let's create a basic demo angular application that sorts a list of super hero names -- just to make the example familiar if you followed [Angular's tour of heroes tutorial](https://angular.io/tutorial/tour-of-heroes).
 
-> Hint: this emoji 👨🏻‍💻 means you are going to write some code!
+All the code for the demo application we built in this blog can be found on [this Git repository](https://github.com/ayoayco/ng-web-worker-demo).
+
+> This emoji 👨🏻‍💻 means you are going to write some code!
 
 First, let's create a new app `web-worker-demo` with the defaults (i.e., no routing and using CSS for styling).
 
@@ -111,20 +111,21 @@ export class AppComponent {
 {% raw %}
 <h1>{{ title }}</h1>
 
-<button>Sort by ID</button>
-<button>Sort by Name</button>
-
 <ul class="hero-list">
   <li *ngFor="let hero of heroes">
     <span class="badge">{{ hero.id }}</span>
     <span class="name">{{ hero.name }}</span>
   </li>
 </ul>
+
+<button>Sort by ID</button>
+<button>Sort by Name</button>
+
 {% endraw %}
 
 ```
 
-👨🏻‍💻 Let's now make it look a bit fancy with by putting the following in the App component stylesheet `app.component.css`:
+👨🏻‍💻 Let's make it look a bit fancy with by putting the following in the App component CSS `app.component.css`:
 
 ```css
 h1 {
@@ -192,9 +193,9 @@ If your browser is now showing a blank white page, unfortunately, this is becaus
 
 Don't panic. You just have to restart (i.e., stop and start) your development server.
 
-> Hint: Most operating system terminals allow this by pressing [CTRL]+'C' and running `ng serve` again.
+> Most operating system terminals allow this by pressing [CTRL]+'C' and running `ng serve` again.
 
-👨🏻‍💻 Now open `app.component.ts`, create a `sortHeroes` method that accepts a `flag` string as argument in the `AppComponent` class.
+👨🏻‍💻 Open `app.component.ts`, create a `sortHeroes` method that accepts a `flag` string as argument in the `AppComponent` class.
 
 👨🏻‍💻 Next, move all the generated code for using the web worker in it, and you should have this:
 
@@ -269,6 +270,8 @@ Your `sortHeroes` method should now be:
 
 This sends a message to our `worker`, letting it know that we want to sort the `heroes` list using the `flag` property.
 
+After the `worker` instance is done processing, it will then send a message back to its creator and this will trigger the `onmessage` callback where we assign the processed data back to our `heroes` list.
+
 👨🏻‍💻 Now let's program our `worker` to do the sorting. Open `app.worker.ts` and replace its contents with the following:
 
 ```ts

assets/main.scss

@@ -455,7 +455,7 @@ table.image caption {
       padding-top: 20px;
       font-weight: bold;
     }
-    p:not(blockquote p):first-of-type::first-letter {
+    p:not(blockquote *):first-of-type::first-letter {
       font-weight: 900;
       font-size: 75px;
       line-height: 60px;
@@ -477,7 +477,6 @@ table.image caption {
     p,
     ul li,
     ol li,
-    blockquote p:first-of-type::first-letter,
     li p:first-of-type::first-letter {
       --x-height-multiplier: 0.375;
       --baseline-multiplier: 0.17;